Fem aquest curs perquè sabem fer pàgines web i hem utilitzat el Dreamweaver. Si no és així, abans de començar hauríem de fer una bona repassada dels cursos D72 i D98 sobre Disseny i Creació de Pàgines Web. Sigui com sigui, donem per certa l'afirmació inicial.

Dreamweaver permet dissenyar pàgines utilitzant un editor visual. Per sota, genera codi HTML, css i JavaScript. Entendre aquest codi és fonamental si es vol anar més enllà.

Es pot aprendre molt si s'observa com treballa Dreamweaver, tot i que cal tenir present que només és un programa i que s'ha d'assegurar la possibilitat de tornar enrera (desfer). Sovint, genera més codi del que hauríem fet a mà, sobretot, quan crea scripts.

Esquema de la pàginaEn aquesta pràctica, però, només treballarem sobre HTML. No es tracta de programar (tot arribarà), sinó d'utilitzar Dreamweaver de la forma més eficaç i, de passada, aconseguir que generi menys codi, i més net.

Farem l'esquema d'una pàgina utilitzant tècniques que ens permetin avançar amb rapidesa. Més endavant, aquest disseny ens servirà de base per aplicar nous conceptes.

  Les etiquetes HTML més utilitzades
<head> </head> (cap), <title> </title> (títol), <body> </body> (cos), zones de la pàgina.
<table> </table> Defineixen l'inici i fi d'una taula.
<tr> </tr> cada fila d'una taula i <td> </td> cada cel·la individual dins d'una fila.
<p> </p> Defineixen un paràgraf.
<b> </b> (negreta), <i> </i> (inclinada), <u> </u> (subratllada), etiquetes de format del text.
<br> (no té parella) Fa un salt de línia.
<font> </font> Tipus de lletra, mida i color del text.
<img src="..."> Posa una imatge.

Algunes d'aquestes etiquetes tenen modificadors:
width i heigh estableixen l'amplada i l'altura.
color i bgColor defineixen el color del text i del fons.
align i valign permeten establir l'alineació horitzontal i vertical.
  1.- Començar amb bon peu
Si encara no ho hem fet, hauríem de crear al nostre disc dur una carpeta on guardarem els treballs del curs. Més endavant farem tota l'estructura de treball de forma ordenada i ràpida. De moment, amb això n'hi ha prou. Farem tot el curs dins d'aquesta carpeta.

Prepararem una pàgina amb títol, sense marges i amb una taula..

Botons sota la barra de menúsObrim el Dreamweaver i fem clic al botó "Mostrar vistas de código y diseño". Si el nostre monitor ens fa incòmoda aquesta vista, podem alternar entre les dues de les puntes, "código" i "diseño".

Observem que el programa ja ha generat l'estructura de la pàgina. Si la vista de codi no té activada la numeració de línies, anem al menú Ver - Opciones de vista de Código - Números de líneas i l'activem.

Ara anem al menú Modificar - Propiedades de la página i escrivim un títol per al curs, per exemple "Curs d108" o el que vulguem. A continuació posarem tots els marges a 0 d'una passada. Ens situem al quadre Margen izquierdo, i escrivim:

      0  (tabulador)  0  (tabulador)  0  (tabulador)  0  (intro)

Inserim una taula de 2 files, 3 columnes, 770 píxels (resolució del monitor menys 30), relleno celda: 2, espacio celda: 0 i borde: 0. Observem el codi que ha creat.
 
2.- La barra d'estat, la finestra de propietats i el teclat
HTML treballa sobre contenidors. Si marquem una zona amb el mouse, Dreamweaver crearà un contenidor per poder-li assignar les propietats que especifiquem, normalment, un <div>. En molts casos això no és necessari, perquè els elements ja ocupen tot un contenidor.

Donarem format a la taula i en farem una còpia. Tindrem dues taules de la mateixa mida, l'una sota l'altra, de manera que l'aspecte final serà d'una única taula. Ho fem així per millorar el temps psicològic. Quan es carrega la pàgina des d'Internet, HTML no mostra les taules fins que troba l'etiqueta </table>. Seguint aquesta tècnica, la taula superior es veurà abans.

Format ràpid
1.- Amb el ratolí, seleccionem les dues cel·les de l'esquerra.

2.- Comprovem que la taula <table> queda seleccionada a la barra d'estat i la línia fosca ocupa les dues cel·les. Dreamweaver aplica format als elements seleccionats.

3.- A la finestra de propietats, establim l'alineació, la mida i el color de fons. Com que volem que es mantingui la mida (190), seleccionem "No ajustar". Ignorem els botons d'alineació a la part superior dreta de la finestra de propietats. Els utilitzarem poc o gens.

Després fem clic sobre la paraula <table> a la barra d'estat. Premem Control+C (Copiar), Fin (desmarcar i situar-se darrera) i Control+V (Pegar). Tenim dues taules iguals.

Ens situem a la segona fila de la primera taula, fem clic <tr> a la barra d'estat i premem la tecla Suprimir. La primera taula ha quedat amb una única fila. Seleccionem les columnes segona i tercera, i les combinem. Ara té una fila amb dues cel·les.
 
3.- Taules enniuades
Observem un moment aquest disseny, perquè farem una pàgina similar. Donem un cop d'ull, també, al codi HTML que s'ha generat fins ara. De moment, l'hauríem d'entendre.
Esquema de la pàgina d'entrada
La primera taula serà el cap de pàgina. La fila inferior de la segona taula en serà el peu. La fila del mig (primera fila, segona taula) farà de contenidor dels menús, la zona de contingut i uns hipotètics enllaços (d'esquerra a dreta). Crearem, doncs, tres taules enniuades.

Seleccionem la cel·la de l'esquerra i la del centre (taula inferior, primera fila). A la finestra de propietats posem alineació horitzontal centrada i vertical superior. Després, ens situem a la cel·la de la dreta i li assignem alineació horitzontal a la dreta, vertical superior, 190 píxels d'amplada i marquem "No ajustar".

Tornem a la cel·la dels menús (esquerra). Inserim una taula de 8 files, una columna, 186 píxels, relleno celda: 1, espacio celda: 1 i borde: 0. Marquem l'última <table> a la barra d'estat i premem Control+C per copiar-la. Després, ens situem a la cel·la que contindrà els links (dreta) i premem Control+V per enganxar la taula que hem copiat.

A la cel·la de contingut crearem, de moment, una taula de 2 files, una columna i el 98% d'amplada, sense borde. En aquesta cel·la no hem marcat "No ajustar", només ho fem a les que tenen amplada exacta. Més endavant, si cal, podrem esborrar o afegir files.

Donem format a les tres taules. Treballem sempre amb la barra d'estat i la finestra de propietats. Seleccionem grups de cel·les i apliquem format.

Quan acabem, tanquem el Dreamweaver i, quan ens demani si volem desar els canvis, contestem que sí i guardem l'arxiu a la carpeta rel del nostre lloc, amb el nom "index.htm". Ja tenim la primera pàgina. A la pràctica següent farem l'estructura.
 
4.-
Codi net
Ja ho hem dit, en aquest curs necessitarem entendre HTML. Dreamweaver, com a editor, fa exactament el que li manem. Això significa que si la nostra tècnica de treball es basava en seleccionar amb el ratolí i aplicar format, haurem de filar molt prim ... o canviar de tècnica.

Fins i tot quan seleccionem, per exemple, un bocí de text per canviar-li la font, mida o color, és convenient que ho fem d'una passada. Si no ens queda al nostre gust, el millor és desfer l'acció i tornar-ho a provar.

Quan hem de modificar una zona amb format establert abans, utilitzarem també la barra d'estat, seleccionant etiquetes com ara <font>, <b> o <i>. El programa marcarà tot el bloc i, així, no haurem de patir per si l'encertem o no.

Observar el codi amb regularitat és una bona prova per saber si treballem correctament. Quan veiem etiquetes duplicades (<font color ...> i, després, <font size ...>) o que no hem demanat (<div> i <span> són les més habituals), és que alguna cosa no va bé.

Generar codi net fa que les pàgines ocupin menys i es carreguin més ràpidament. A més, a més s'entenen millor i és més fàcil modificar-les o reutilitzar-les.

Un cop hem fet la pràctica, l'hauríem de repetir d'una passada fins que no ens calgui mirar l'explicació. Primer escrivim les mesures i alineacions en un full, o, millor encara, fem un esquema amb anotacions. Podem fer variacions en el disseny.

L'objectiu és saber fer l'esquelet d'una pàgina, net, en menys de cinc minuts.