Índex
 
Fitxers auxiliars      
11 Els estils amb Dreamweaver

Podem parlar de dues classes d'estils en les pàgines Web. Estils de text amb instruccions HTML i estils de text amb instruccions CSS.

La primera la constitueix un conjunt d' instruccions del llenguatge HTML original i es fan servir en quasi tots els navegadors. Aquestes instruccions són molt elementals i en principi, l'HTML no tenia un caràcter de gran maquetador de pàgines sinó de permetre fer pàgines no gaire complicades per publicar la informació.

La ràpida expansió de la Web a nivell mundial va crear mes i mes necessitats en els usuaris de fer pàgines cada cop més sofisticades i atractives. D'aquesta manera es van afegir elements als navegadors per tal de donar resposta a aquestes inquietuds. Els estils CSS (fulls d'estils en cascada) va ser un d'aquests afegits a l'HTML original. Poden trobar una descripció d'aquest llenguatge a l'adreça http://www.w3.org/.

Hi ha una web personal molt bona on tenim un curs molt complet de disseny i ús dels estils CSS2: Hojas de estilo en cascada de Carlos Benavidez en la que hi ha dos apartats molt diferents. Un correspon a les especificacions del llenguatge CSS2, *traducción de la Especificación CSS2*, i un manual d'us *manual de uso de las CSS*

1 Estil de text.

El Dreamweaver entén com a estils de text les opcions del menú Texto/Estilo i que veiem a la figura següent:

 

Per fer ús d'aquestes ordres de menú heu de seleccionar un text i triar l'estil que volgueu.

Cal dir que es poden posar dos o més estils a un mateix text. Haurem de mirar si aquestes ordres tenen el mateix efecte en tots els navegadors, ja que cada navegador té llibertat per fer els seus propis dissenys d'estils de lletra.

També hem de dir que poden haver alguna d'aquestes etiquetes que no estiguin implementats en un navegador i per tant no produeixi cap efecte la seva inclusió en el moment de veure la pàgina en pantalla.

2. Introducció als fulls d'estil en cascada.

El CSS és un conjunt d'instruccions molt més potent que permet crear estils de text i altres per a les taules i altres objectes de l'HTML, amb molt més control sobre les característiques dels objectes als que s'apliquen aquests estils.

En realitat es tracta d'un llenguatge afegit al llenguatge HTML totalment diferent d'aquest. No es poden comparar els estils HTML i els estils CSS. De fet no és convenient barretjar en una pàgina les dues classes d'estils en la mateixa pàgina.

Quan creem una nova web ens hem de plantejar el tipus d'imatge de conjunt volem donar. Per exemple, les pàgines d'aquests apunts estan fetes totes amb el mateixos estils. En realitat té al darrera un conjunt d'estils CSS que fan homogeneïtzar l'estil global de totes les pàgines.

Els estils es poden escriure a tres llocs diferents:

  1. Dins una etiqueta html ja existent. S'escriuen els estils particulars per a aquesta etiqueta. Només s'executen una vegada, en l'àmbit d'execució d'aquesta etiqueta.

  2. A l'encapçalament del documento (head) mitjançant una etiqueta <style>. Permet crear estils per etiquetes, que s'executaran cada vegada que els cridem des de el document on està definit l'estil.

    Podem escriure estils per a diferents etiquetes dins de l'encapçalament del documento.

  3. En darrer lloc es pot crear un fitxer de text on es desen els estils de totes les etiquetes, fitxer que es desa all servidor i que es crida des de la pàgina o document amb una etiqueta lynk escrita dins de l'encapçalament.

    Així tenim una forma de tenir separats els fulls d'estil dels fulls de document. Si canviem un estil en un full d'estils canviarà l'aspecte de tots els documents que fan referència a aquest full.

2.1 Els estils dins de les etiquetes.

En un documento dins d'una etiqueta HTML podem donar format a la sortida en el navegador amb la propietat style que es comú a bona part de les etiquetes.

Com veiem al llistat tenim dues etiquetes <p> que delimiten un paràgraf. A la segona hem escrit un atribut STYLE que modifica les propietats del text escrit dins de <p></p>.

Les propietats són de quatre característiques molt diferents: una pel color del fons, dos que afecten al tipus de font, família i mida, i una quarta propietat per a l'espaiat entre lletres

Com l'atribut STYLE està en el segon <p> només afectarà a aquest paràgraf.

Codi HTML 
<html>
   <head>
      <title>Prova d'estils</title>
   </head>

   <body bgcolor="#FFFFFF" text="#000000">
      <p>Paràgraf normal</p>
      <p style = "background-color: #CCCCCC; 
                  font-family: Arial, Helvetica, sans-serif; 
                  font-size: 12px; 
                  letter-spacing: 3px"
      >
         Paràgraf amb un estil dins la etiqueta
      </p>
   </body>
</html>
Resultat en pantalla

 

Paràgraf normal

Paràgraf amb un estil dins la etiqueta

 

Com veiem la propietat style permet incloure tot un conjunt de propietats que afectaran al text com són el color de fons, la font del text, la mida i moltes més propietats.

El Dreamweaver no proporciona cap eina per tal de crear estils aplicats a una sola etiqueta, com un sol paràgraf. I si pensem que els estils han de poder aplicar-se a un conjunt d'elements dins diferents pàgines, tampoc té molt sentit fer estils per a una única etiqueta.

2.2 Els estils en el HEAD.

L'esquelet d'un fitxer de pàgines web es composa de les següents instruccions HTML:

<html>
    <head>
         <title>Títol de la pàgina</title>
    </head>

     <body>
    </body>
</html>

Com podeu veure exiteixen dues seccions, el head i el body.

  1. La primera secció serveix per la creació d'instruccions espacials, adreçades al navegador, als cercadors, codi d'altres llenguatges com el JavaScript, etc. Per exemple, dins del head s'escriu el títol que apareixerà després en la barra del navegador.
  2. La segona secció és el body on s'escriuen totes els textos, s'insereixen les imatges i tot el contingut de la nostra pàgina.

En el head podem posar una etiqueta STYLE dins de la qual podrem agrupar els estils de diferents etiquetes o de diferents classes.

A l'exemple següent veiem que hi ha definits dos estils per a dues etiquetes, <H1> i <HR>.

Veiem que totes les aparicions d'aquestes dues etiquetes dins del cos del document funcionen com estan definides en l'estil de l'encapçalament:

Estil d'etiquetes en els encapçalaments
Codi HTML Resultat en pantalla 
<html>
<head>
    <title>Prova de style</title>
    <STYLE>
    <!--
        H1 {
            font-family: Times New Roman;
            background-color: Teal;
            letter-spacing: 3px;
           }

        HR{
            color : Red;
            height: 4px;
          }
    -->
    </STYLE>
</head>

<body>

  <h1>Encapçalament con estilo</h1>
  Una línia horitzontal
  <hr>
  Altra línia horitzontal
  <hr>

</body>
</html>

 

 

Encapçalament amb estil

Una línia horitzontal
Altra línia horitzontal

En aquest exemple hem aconseguit redefinir l'estil de l'encapçalament 1 de la línia horitzontal. Cada cop que li diem a un paràgraf que és un encapçalament 1ens sortir per pantalla amb l'estil definit en el HEAD. Totes les línies horitzontals ens sortiran vermelles i de quatre pixels.

2.3 Les classes per identificar els estils.

À l'apartat anterior hem fet que les etiquetes HTML funcionin a la nostra manera. Això fa que les ordres originals ja no funcionin de la manera com estaven programades. És millor una nova solució:

Una classe es defineix amb un identificatiu. A l'exemple següent tenim dues classe sde línia horitzontal, la vermella i la verd.

Per usar dins del cos del document una d'aquestes classes hem de posar l'atribut class en las etiquetes. Veieu l'exemple

Estil d'etiquetes en els encapçalaments
Codi HTML Resultat en pantalla 
<html>
<head>
    <title>Prova de style</title>
    <STYLE>
    <!--
        HR.Vermell{
            color : Red;
            height: 8px;
          }
        HR.Verd{
            color : Green;
            height: 4px;
          }
    -->
    </STYLE>
</head>

<body>

Una línia horitzontal amb la identificació de classe Vermell
<hr class="Vermell">
Una línia horitzontal amb la identificació de classe Verd
<hr class="Verd">
Una línia horitzontal sense identificació de classe 
<hr>

</body>
</html>
 Una línia horitzontal amb la identificació de classe Vermell
Una línia horitzontal amb la identificació de classe Verd
Una línia horitzontal sense identificació de classe

2.4 Els fulls d'estils externs al documento.

Els estils fets en el head es poden desar en fitxers independents. Per fer-ne ús d'aquests fitxers hem de cridar-los des d'un document amb una etiqueta LINK escrita dins de l'encapçalament.

Aquest fitxers d'estils es diuen fulls d'estils. Tenen l'avantatge de que podem fer-ne ús des de tots els documents que hagin de tenir un mateix estil, i així no tindrem que repetir el codi en cadascun d'aquests documents.

Aquests apunts estan fets amb el full d'estils: jsapunts.css

Mira a la taula següent la forma d'incloure aquest full d'estils dins de l'encapçalament.

Cridar un full d'estils 
<head>
   <title>HTML-EStilos.</title>
   <link rel="stylesheet" type="text/css" href="jsapunts.css">
</head>


2.5 Creació d'estils i fulls d'estils amb el Dreamweaver.

Per fer un estil nou hem d'anar a l'opció de menú Texto/Estilo CSS/Nuevo o fer clic amb el botó dret del ratolí a sobre de de la finestra d'estils (Ventana/Estilos CSS).

Ens apareix un quadre de diàleg en elque podem dir on i de quin tipus volem fer el nostre estil com es mostra en les imatges següent:

Creació d'un estil anomenat .prova, per tant és un estil de clase que escriurem dins del HEAD. Estil per a l'etiqueta h1 (Encabezado1) que escriurem dins del HEAD i que afectarà a tots els encapcalaments 1 de la pàgina.

Es recorda que una redefinició d'una etiqueta, com la h1, afecta a totes les aparicions d'aquesta etiqueta en el nostre document.

Quan fem clic en el botó Aceptar ens apareix un quadre de diàleg que ens permet crear l'estil donant valor a una gran quantitat de propietats de formats de text.

No farem aquí una descripció de tot allò que és el conjunt de propietats ja que es surt de l'abast d'aquests apunts.

Però si que farem ús d'aquest quadre de diàleg per crear un estil anomenat txtTitol que tingui el format següent:

Prova de text amb el nou estil

Les propietats estan agrupades per categories en diferents subquadres de diàleg. Com veiem en les quatre figures següents hem fet ús de les categories de Tipo, Fondo, Bloque i Borde.

NOTA: No totes les propietats són aplicables a totes les etiquetes.

Si volem fer-nos una idea del codi que genera un estil podem examinar el codi corresponen a l'estil h2.tit d'aquest apunts que té aquest aspecte:

.txtTitol
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 36px;
    color: #99FFFF;
    background-color: #000099;
    letter-spacing: 6px;
    text-align: center;
    border-bottom-width: 6px;
    border-bottom-style: solid;
    border-top-color: #0000FF;
    border-right-color: #00CCCC;
    border-bottom-color: #0000FF;
    border-left-color: #0000FF;
    border-right-width: 6px;
    border-right-style: solid;
}

Prova amb p.txtTitol

 

3. Disseny d'un full d'estils

Per dissenyar una web hem de fer dos treballs essencials:

  1. Dissenyar el format de les pàgines atenent diversos aspectes com la forma general, els colors i els tipus de lletres.
  2. Creació d'un full d'estils on inclourem tots els estils que intervindran després en la nostra web.
  3. Incloure el full creat a tots el fitxers de la nostra web per tal d’homogeneïtzar el format.

El primer apartat se surt una mica del propòsit d'aquests apunts però ens basarem en un exemple per tal donar uns mínims requisits.

Així feu clic a l'enllaç Exemple i examinarem el format d'aquesta web per tal d'esbrinar els estils bàsics

  1. Aquesta pàgina té enllaç amb un full d'estils anomenat basic.css
  2. Redefinició d'estils en aquest full d'estils:
  3. Si volem fer diferents tipus d'enllaços haurem de fer classes com les de la classe "negre" de l'exemple que han de fer-se amb la notació a.negre:link, a.negre:hover, a.negre:active i a.negre:visited.
  4. En darrer lloc hi ha una classe .titol que canvia el color de la lletra i el color del fons.

El fitxer basic.css té els següent contingut:

BODY {
    FONT-SIZE: 13px;
    FONT-FAMILY: Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: FFFFFF;
    color: #0000CC;
    background-image: url(../Imatges/fondo02.gif);

    margin: 0;
    padding: 0;

    scrollbar-face-color: #CCCCCC;
    scrollbar-arrow-color: #000000;
    scrollbar-base-color: #EEEEEE;
    scrollbar-highlight-color: #EEEEEE;

    scrollbar-darkshadow-color: #EEEEEE;
    scrollbar-track-color: #FFFFDD;
    scrollbar-shadow-color: #EEEEEE;
    scrollbar-3dlight-color: #FFFFDD;
}

TD {
    FONT-SIZE: 13px;
    FONT-FAMILY: Arial, Helvetica, sans-serif;
    vertical-align: top;
}

OL
{
    FONT-SIZE: 12px;
    FONT-FAMILY: Arial, Helvetica, sans-serif
}

UL {
    FONT-SIZE: 12px;
    FONT-FAMILY: Arial, Helvetica, sans-serif
}

a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #990000;
    text-decoration : none;
}

a:active {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#990000;
    text-decoration : none;
}

a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #990000;
    text-decoration : none;
}

a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #990000;
    text-decoration : none;
    background-color: #FFFFFF;
}

a.negre:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    text-decoration : none;
}

a.negre:active {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#000000;
    text-decoration : none;
}

a.negre:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    text-decoration : none;
}

a.negre:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    text-decoration : none;
    background-color: #FFFFFF;
}

.titol
{
    color: #FFFFFF;
    background-color: #000066;
    font-weight: bolder;
}

4. Exercicis

4.1 Propòsit d'aquests exercicis

Aquests exercicis es dediquen solament als estils CSS i no fan ús dels estils HTML car aquests estils, els del CSS, s'escriuen amb un llenguatge de programació nou diferent de l'HTML i no convé intercalar els dos tipus d'estils en un mateix document per evitar problemes quan donem ordres contradictòries amb un llenguatge i amb un altre.

La pregunta és: quins factors intervenen en el moment de que una ordre, per exemple de color d'un text, tingui efecte o no en la pantalla?

La contestació d'aquesta pregunta se surt un poc de l'abast d'aquests apunts pero apuntaré tres possibles respostes a la mateixa:

  1. El llenguatge HTML està format per etiquetes d'ordres que comencen en una part del document i acaben en una altra. Però una ordre està sempre continguda sencera dins d'una altra, com les nines russes. L'exemple és el codi següent:

    <BODY class="TextVermell">
      Text que apareix davant de la taula   <TABLE>
            <TR class="TextVerd">
                <TD class="TextNegre">
                     Contingut de la cel·la 1 de la taula
                </TD>
                <TD>
                     Contingut de la cel·la 2 de la taula
                </TD>
          </TR>
       </TABLE>
    </BODY>




    Podem donar l'ordre de color de text en cadascuna d'aquestes etiquetes. La regla general diu que l'ordre que es compleix és la que més a prop està de l'element al que va dirigida.
  2. La segona rao per no obtenir l'efecte deseat quan fem una pàgina és la de barretjar estils CSS amb HTML. En aquest cas és millor anar al mode de visualització de cody i suprimir un d'aquests dos estils.

    <font color="#339933">
       <p class="textVermell">
          Text amb color
       </p>
     </font>

    Aquesta ordre fa que el color sigui vermell
    <p class="textVermell">
       <font color="#339933">
          Text amb color
       </font>
    </p>    		 Aquesta ordre fa que el color sigui verd

  3. És precís saber en cada etiqueta quines propietats tenen efecte. Si es vol conèixer a fons el CSS heu d'estudiar les especificacions del llenguatge que trobareu en http://www.w3.org/ o la seva traducció al castellà en http://www.sidar.org/recur/desdi/traduc/es/css/cover.html

4.2 Els exercicis

  1. En aquesta activitat fareu un nou estil per a tots els paràgrafs

  2. En aquest problema fareu uns estils de prova per a un sol document.


  3. En aquest problema creareu estils per a llistes ordenades i llistes de vinyeta.


  4. En aquesta activitat aprendreu a utilitzar un full d'estil ja fet


  5. Creeu un estil pels enllaços que s'anomeni txtEnllac

  6. Disseny i creació d'un full d'estils per a una web


    1. Creeu un full d'estils nou per a la vostra web. Heu de fer un document nou de tipus css i desar-lo amb el nom que volgueu.
    2. Ara es tracta de redefinir els tags més importants. Comenceu pels estils que hi ha a l'exemple basic.css i modifiqueu totes les etiquetes que normalment utilitzeu. Són importants les etiquetes que donen format als textos com els encapçalaments i els enllaços.
    3. Si en coneixeu alguna propietat CSS, com les propietats de les barres desplaçament del body , que no hi són dins de les opcions del Dreamweaver podeu editar i escriure directament aquestes propietats a l'editor del Dreamweaver.
    4. Com a criteri general el text de tota la pàgina ha de ser del mateix tipus.
    5. Apliqueu el full que heu creat a totes les pàgines de la vostra web.