Com editar els estils en un disseny CSS a Dreamweaver

Després de crear una pàgina nova amb un disseny CSS a Dreamweaver, teniu un nombre aparentment infinit d'opcions per editar-la, però primer heu de determinar quins estils del full d'estil corresponen als elements que voleu editar.

Com probablement us podeu imaginar, podeu editar els estils en un disseny CSS de moltes maneres per crear els vostres propis dissenys.

Després d'ajustar els estils existents per obtenir el disseny bàsic de la pàgina de la manera que vulgueu, podeu crear tants estils addicionals com vulgueu.

Com comprovar els estils disponibles i fer edicions bàsiques

Podeu utilitzar aquestes mateixes instruccions bàsiques amb qualsevol disseny CSS inclòs a Dreamweaver. Per editar estils en un disseny CSS, seguiu aquests passos:

Obriu un fitxer de pàgina basat en un disseny CSS de Dreamweaver i trieu Finestra→Estils CSS (o feu clic a la pestanya Dissenyador CSS per ampliar el tauler).

El tauler CSS Designer s'obre o s'amplia.

Feu clic per seleccionar el nom del full d'estil al tauler Fonts a la part superior de CSS Designer.

Tots els estils associats a la pàgina nova es mostren al panell Selectors.

Seleccioneu el nom de qualsevol estil llistat al panell Selectors del dissenyador CSS.

Les regles CSS corresponents definides per a l'estil es mostren al tauler Propietats, a la part inferior del tauler CSS Designer. Fer clic a la llista d'estils i revisar les seves regles corresponents és una bona manera d'obtenir una visió general ràpida del disseny i de veure on s'emmagatzemen les diferents opcions de format de pàgina.

Les etiquetes de capçalera, .nav i peu de pàgina HTML5 controlen les seccions principals de la pàgina. Per exemple, l'estil de capçalera inclou una regla que fa que el color de fons sigui verd. Per tant, per canviar el color de l'àrea de la capçalera a la part superior de la pàgina, canvieu la configuració del color de fons a la regla de la capçalera.

Com editar la configuració de tota la pàgina

Per editar la configuració de tota la pàgina, com ara el color de fons de la pàgina o la font principal, la mida i el color del text utilitzat a la pàgina, seguiu aquests passos:

Al panell Selectors del dissenyador de CSS, seleccioneu l'estil anomenat cos.

Les propietats definides a la regla d'estil seleccionada es mostren al panell Propietats.

Feu clic a la icona T a la part superior del tauler Propietats i canvieu o afegiu el tipus de lletra desitjat i altres paràmetres de text.

Podeu canviar el tipus de lletra, la mida, l'estil i el pes. Per canviar l'espai entre línies de text, canvieu l'alçada de la línia.

Desplaceu-vos cap avall fins a l'àrea de fons del tauler Propietats i utilitzeu el pou de color al camp Color de fons per especificar un color per a tot el fons de la pàgina.

Alternativament, podeu introduir qualsevol codi de color hexadecimal al camp Color de fons o utilitzar el comptagotes per provar qualsevol color. Per afegir una imatge de fons, feu clic al camp URL de la secció Fons i, a continuació, feu clic al botó Navega que apareix i seleccioneu la imatge que voleu servir com a fons. Utilitzeu les icones Repetició de fons per especificar com s'ha de repetir la imatge de fons a la pàgina.

Feu qualsevol altre canvi o addició a la regla d'estil.

Els canvis a les regles d'estil del tauler Propietats es desen i s'apliquen automàticament al contingut format amb la regla.

Com personalitzar les àrees de contingut

Per canviar l'amplada o altres paràmetres de les àrees de contingut principals, que controlen la mida general de la pàgina i la capçalera, el peu de pàgina i la barra lateral, seguiu aquests passos:

Per canviar l'amplada de tota l'àrea de disseny principal:

Feu clic a l'estil .container al tauler Selectors del tauler CSS Designer.

Les propietats de la regla d'estil .container es mostren al tauler Propietats, on també podeu editar l'estil.

Canvieu la mida al camp Amplada o escriviu un número nou per a l'amplada de pàgina desitjada.

L'amplada del disseny de la pàgina es canvia automàticament en funció de la mida que heu introduït. Quan altereu l'amplada de l'estil .container, canvieu l'amplada de tot el disseny perquè tots els

les etiquetes i altres elements estan continguts al fitxer

format amb l'estil .container — i tots estan preparats per expandir-se per omplir el .container

.

Per modificar la mida de l'àrea de contingut de la pàgina, seleccioneu l'estil anomenat .content i especifiqueu la mida i altres opcions que desitgeu al tauler Propietats.

Si canvieu l'amplada de l'àrea de contingut en un disseny que inclou una barra lateral, també haureu de canviar l'amplada de la barra lateral.

Per canviar el color de fons de qualsevol estil de la pàgina, feu clic al nom de l'estil corresponent i canvieu la configuració a la secció Fons del tauler Propietats.

Per exemple, als dissenys CSS de Dreamweaver, la barra lateral es defineix amb un estil anomenat .sidebar1. Així, per canviar el color de fons, hauríeu de fer clic a .sidebar1 al tauler Selectors, seleccionar la categoria Fons al tauler de Propietats i seleccionar el color que vulgueu. De la mateixa manera, per canviar el color de fons de la capçalera, seleccioneu l'estil anomenat capçalera al tauler Selectors i feu servir el color.

Per afegir una imatge a la capçalera:

Seleccioneu la imatge de marcador de posició anomenada Insereix logotip i premeu la tecla Suprimeix o Retrocés.

Trieu Insereix → Imatge → Imatge i seleccioneu una imatge mitjançant el quadre de diàleg Selecciona l'origen de la imatge.

Substituïu el text i inseriu imatges a la barra lateral i a les àrees de contingut principals.

Podeu afegir o substituir text i inserir imatges a qualsevol pàgina creada a partir d'un disseny CSS, tal com ho faríeu a qualsevol altra pàgina web.

Trieu Fitxer → Desa-ho tot per desar la pàgina i els estils.