Com utilitzar les opcions de disseny al tauler de propietats CSS de Dreamweaver

A la part superior del tauler de propietats del dissenyador de CSS trobareu les propietats de CSS que s'utilitzen habitualment per crear dissenys de pàgina. Utilitzeu aquestes opcions per especificar l'alçada, l'amplada, l'alineació, la posició i l'espaiat. Aquests paràmetres són ideals per crear dissenys de pàgina amb estils de classe i identificació per fer coses com ara alinear imatges i posició

etiquetes per crear dissenys multicolumnes.

Podeu utilitzar les opcions de disseny del tauler de propietats CSS per establir aquests valors:

• Amplada: especifiqueu una amplada per a qualsevol element que pugui tenir les seves dimensions especificades, com ara a

  etiqueta. Les opcions de mida són píxel (px), punt (pt), pica (pc), percentatge (%), em, rem, ex i ch.

• Alçada: especifiqueu una alçada per a qualsevol element que pugui tenir les seves dimensions especificades.

  • Min i Max Ample: Especificar amples mínims i màxims per

    etiquetes i altres elements de bloc. Aquestes opcions són útils quan especifiqueu l'amplada com a percentatge de la finestra del navegador. Per exemple, podeu establir l'amplada del disseny al 80 per cent de la finestra del navegador i, a continuació, establir una amplada màxima de 1000 píxels per evitar que el vostre disseny s'estiri més de 1000 píxels.

  • Alçada mínima i màxima : especifiqueu les altures mínimes i màximes

    etiquetes i altres elements de bloc.

  • Marge: estableix la quantitat d'espai al voltant d'un element. Els marges es poden utilitzar per crear espai entre la vora d'un element i altres elements de la pàgina, com ara entre una imatge i un text o entre dos

    etiquetes. Podeu establir el marge per separat per a la part superior, dreta, inferior i esquerra. El farciment es mesura en píxels, punts, polzades, centímetres, mil·límetres, pics, ems, exs i percentatges.

  • Farciment: estableix la quantitat d'espai dins de les vores d'un element. Per exemple, podeu utilitzar el farciment per crear espai entre les vores d'a

    etiqueta i el seu contingut. Podeu configurar el farciment per separat per a la part superior, dreta, inferior i esquerra. El farciment es mesura en píxels, punts, polzades, centímetres, mil·límetres, pics, ems, exs i percentatges.

    Configurar el farciment i l'espaiat dels marges pot ser complicat. Quan afegiu marge i farciment a un element, com ara una imatge o

    etiqueta, augmenteu la mida general d'aquest element i la quantitat d'espai que requereix en el disseny.

• Posició: l' opció Posició, disponible a la part inferior de la secció Disseny del tauler Propietats, altera la manera com es col·loquen els elements en una pàgina. El posicionament pot canviar dràsticament la manera com els elements a nivell de bloc (com ara taula, llista, capçalera, paràgraf i

  etiquetes) apareixen en un navegador.

  • Hereta: no cal que especifiqueu aquesta opció predeterminada. A menys que se seleccioneu una altra opció, cada element hereta la posició del seu element pare.

  • Estàtica: col·loca el contingut a la seva ubicació dins del flux del document. Per defecte, tots els elements HTML que es poden posicionar són estàtics.

  • Absolut: utilitzeu les coordenades superior i esquerra per controlar la posició d'un element en relació amb l'extrem superior esquerre de la finestra del navegador o l'extrem superior esquerre d'un element que conté l'element.

  • Corregit: col·loqueu un element en relació a la cantonada superior esquerra del navegador. El contingut d'un element que utilitza un posicionament fix es manté constant fins i tot si l'usuari es desplaça cap avall o per la pàgina.

  • Relatiu: utilitzeu una posició relativa al punt on inseriu l'element a la pàgina o en relació al seu contenidor.

    

  • Float: alinea elements, com ara imatges i

    etiquetes, a l'esquerra o a la dreta d'una pàgina o d'un altre contenidor, fent que el text o altres elements s'emboliquen al seu voltant. Feu clic a les icones del camp Float per especificar les quatre opcions següents: Hereta, Dreta, Esquerra o Cap.

  • Clar: evita que el contingut flotant se superposi una àrea a l'esquerra o a la dreta, o als dos costats d'un element. Aquesta opció és útil quan un element flotant, com ara a

    l'etiqueta que s'utilitza per crear una barra lateral, se superposa a un altre element a nivell de bloc, com ara una etiqueta que s'utilitza per crear el peu de pàgina d'una pàgina.

  • Overflow-x i -y: indiqueu al navegador com mostrar el contingut d'un element si el contenidor, com ara un

    etiqueta, no pot adaptar-se a tota l'alçada o l'amplada de l'element. Les opcions de desbordament són

  • Visible: manté el contingut, com ara una imatge o un text, visible, fins i tot si s'expandeix més enllà de l'alçada o amplada definida d'un contenidor.

  • Ocult: tallar el contingut si supera la mida del contenidor. Aquesta opció no proporciona barres de desplaçament.

  • Desplaçament: afegiu barres de desplaçament al contenidor independentment de si el seu contingut supera la mida de l'element.

  • Automàtic: feu que les barres de desplaçament apareguin només quan el contingut d'un contenidor supera els seus límits.

• Visualització: indiqueu si, o com, s'ha de representar un element en un navegador. Per exemple, canvieu la posició d'una llista no ordenada d'horitzontal a vertical escollint Cap. Podeu utilitzar l'opció Mostra amb un llenguatge de script per canviar la visualització dels elements de manera dinàmica.

• Visibilitat: controla si el navegador mostra o no un element. Les opcions de visibilitat són

  • Hereta: l'element té la visibilitat de l'element en què està contingut (per defecte).

  • Visible: es mostra l'element.

  • Ocult: l'element no es mostra.

  • Col·lapse: per utilitzar-lo amb taules HTML. El replegament es pot utilitzar per eliminar una columna o una fila sense afectar la resta de la disposició de la taula.

• Índex Z: controla la posició d'un element a la coordenada Z, que controla l'ordre d'apilament dels elements en relació entre si. Els elements de nombre superior se superposen als elements de numeració inferior.

• Opacitat: controleu el nivell d'opacitat d'un element de 0,0 (totalment transparent) a 1,0 (totalment opac). Per exemple, si introduïu .5 al camp d'opacitat, l'opacitat d'un element es reduirà al 50 per cent.