Enrera
Mòdul 4
Disseny i creació de pàgines web
  Pràctica
1
2
3
4
5
   
Exercicis
Exercicis
 
 


Aplicació d'un full d'estil CSS a diferents pàgines

Pràctica

A la pràctica anterior, heu creat un full d'estils CSS que conté els atributs que tindran les diferents seccions del text de diferents pàgines.

Creeu una carpeta nova amb el nom m4p5 i copieu a dins la carpeta estils, que heu fet a la pràctica anterior i que conté el full webtext.css. Entreu al Dreamweaver MX 2004 i creeu un fitxer HTML nou i deseu-lo, també, a la carpeta m4p5 amb el nom webtext.htm.

Copieu, també dins aquesta carpeta, la imatge fons.gif, que fareu servir de fons de pàgina.

Feu clic amb el botó dret del ratolí i editeu les propietats de la pàgina, o premeu Control + J:

 

Propietats de la pàgina

Propietats del fons de pàgina

Feu que els enllaços apareguin de color negre i canviïn a blau en passar el ratolí per sobre, i, en aquest moment, apareixeran subratllats.

Propietats dels víncles de la pàgina

Propietats dels enllaços

Pràctica
Ja teniu totes les propietats bàsiques de la pàgina definides. Ara inseriu taules que delimitaran el text.

Des del menú Insertar | Tabla, inseriu una taula d'una sola fila de 616 píxels d'amplada i sense contorn, i escriviu al seu interior: "L'educació romana".

 

Inseriu un salt de línia amb l'objecte de text Etiqueta <br> situat al panell Texto.

Panell ''Texto''

Aquest salt de línia tindrà una separació inferior a la d'un salt de paràgraf . També podeu escriure directament l'etiqueta <br> al codi font, tal com havíeu vist al primer mòdul.

A sota d'aquest salt de línia, inseriu una taula nova de la mateixa amplada que l'anterior, però amb dues columnes i una sola fila. La columna de la dreta tindrà 160 píxels i la de la dreta, 451 píxels.

Abans d'escriure el text, heu de fer que aquesta pàgina utilitzi el full d'estils CSS que vàreu crear a la pràctica anterior. Recordeu que, prement sobre la icona Adjuntar full d'estils Adjuntar hoja de estilos, i seguidament des d'Examinar, localitzareu el fitxer webtext.css.

Adjuntar full d'estils

Vincular full d'estils a la pàgina

Si la importació d'aquest fitxer s'ha fet correctament, tindreu tots els estils a la finestra Propiedades, llestos per aplicar.

Llistat d'estils que conté el full

Ara ja podeu procedir a inserir el text a la columna de la dreta, que correspon a roma1.rtf, i aplicar els estils corresponents, com veureu aquí. Per estalviar-vos l'escriptura, podeu copiar i enganxar el text des del fitxer RTF a la web, i aplicar els estils a continuació.

A la columna esquerra, escriviu els enllaços:

INICI | INFLUÈNCIA GREGA | ENSENYAMENT PRIMARI | L’ENSENYAMENT SUPERIOR

I, a la finestra Propiedades, escriviu el fitxer corresponent al vincle.

INICI -> webtext.htm

Vincle de ''INICI''

INFLUÈNCIA GREGA -> webtext2.htm

Víncle de ''INFLUÈNCIA GREGA''

ENSENYAMENT PRIMARI -> webtext3.htm

Víncle de ''ENSENYAMENT PRIMARI''

L'ENSENYAMENT SUPERIOR -> webtext4.htm

Víncle de ''L'ENSENYAMENT PRIMARI''

 

Si tot ha anat bé, la pàgina haurà de tenir un aspecte semblant a aquesta: webtext.htm

La resta de pàgines les fareu, simplement, desant aquesta amb noms diferents. Després, canvieu el text. Per fer això, cal anar a:

Archivo | Guardar como: poseu el nom webtext2.htm. Aquest fitxer serà idèntic a l'anterior i només li heu de canviar el text de la columna de la dreta pel que teniu a roma2.rtf.

Feu el mateix per a cadascuna de les pàgines que queden inserint, respectivament, el contingut del text de roma3.rtf i roma4.rtf.

   
Atenció !

Amb un full d'estils CSS, aconseguiu donar la mateixa uniformitat al text de diferents pàgines relacionades.

   
   
 
Amunt