Familiaritzar-se amb l'entorn del Dreamweaver

L'entorn de treball del Dreamweaver és relativament simple, però cal tenir algunes nocions bàsiques sobre les eines que es poden fer servir i el seu significat.

Per a aquesta iniciació a l'entorn de treball es començarà per situar les zones de treball comentant els 5 elements principals:

• Barra de menús
• Barra d'eines
• Barra Insertar
• Barra d'estat
• Finestres

En la imatge següent es pot veure la disposició d'aquestes zones, que es comenten detalladament tot seguit.

Barra de menús i barra d'eines

La barra de menús conté gairebé totes les eines que es poden fer servir amb el Dreamweaver, però algunes, per la seva freqüència d'ús, també s'incorporen a través d'altres accessos, com la barra d'eines, el llançador d'objectes i algunes finestres flotants que es descriuen a continuació.

El conjunt de les opcions disponibles en cadascun dels menús es desplega en situar el cursor a sobre. Ara no en farem cap enumeració, ja que que els anireu veient segons aneu avançant en el desenvolupament del curs.

Les característiques dels elements d'aquesta eina són:

• Canvi de visualització de vistes (vista codi HTML, vista compartida i vista disseny), que comentarem més endavant.

• Títol del document: el títol del document és una dada molt important que convé posar sempre a les pàgines que creeu. Sempre que feu una pàgina amb el Dreamweaver, heu de posar un títol que faci referència al contingut d'aquesta. Aquest títol apareix si es desa la pàgina als preferits. Així mateix, serveix perquè els indexadors de la web (robots que indexen la web per fer-ne directoris o cercadors) recullin el títol de la pàgina.

• Eina de comprovació d'errades als navegadors: comprova la compatibilitat de la pàgina als diferents navegadors.

• Eina per al control del lloc web i l'administració dels arxius, incloses les Design notes (notes sobre l'estat de l'arxiu que permeten controlar la situació de cada arxiu, afegir comentaris i recordatoris sobre el que queda per fer).

• Vista prèvia als navegadors i depuració.

• Actualització de la vista de disseny, que permet fer modificacions al codi i forçar el Dreamweaver a actualitzar la vista de disseny amb el canvis fets al codi.

• Accés directe als ajuts visuals.

Tornant a les tres primeres icones de la barra d'eines, vegeu què us permeten fer:

El mode Disseny mostra un resultat semblant al resultat final, però no exacte; s'ha de veure la presentació amb els navegadors per comprovar el resultat final una vegada la pàgina estigui disponible a Internet.

Barra Insertar

La barra Insertar té dos modes diferents de visualització: el mode Menú (el que ve predeterminat) i el mode Fitxes. Per passar d'un mode a l'altre, seleccioneu Mostrar como fichas al menú emergent de categories d'objectes.

Aquesta barra conté botons per inserir diferents tipus d'objetes, com imatges, taules, capes, arxius Flash..., en un document. Cada un d'aquests objectes és un fragment de codi HTML que permet establir diversos atributs en inserir-lo. Disposeu de les categories següents:

Barra d'estat

Aquesta barra està situada a la part inferior de la finestra del document i proporciona molta informació sobre la pàgina mitjançant les eines següents: el selector d'etiquetes, l'indicador de la mida de la finestra i l'indicador de la mida de l'arxiu / temps de descàrrega estimat.

Selector d'etiquetes

La zona de selecció d'etiquetes permet tenir a la vista on hi ha el codi mentre treballeu. Com que les pàgines HTML estan construïdes a partir d'unes etiquetes imbricades, el selector indica en tot moment el punt d'inserció o la selecció en relació amb la jerarquia d'etiquetes de la pàgina. Observeu com a la imatge anterior es visualitzen les etiquetes body, table, tr, td, div i img, que indiquen que el cursor està situat a una zona de la pàgina on hi ha tots aquests elements. Si feu clic a sobre una d'aquests etiquetes, se seleccionarà automàticament aquesta, fet que en facilitarà la visualització independentment del tipus que tingueu activat en aquell moment.

A continuació, fareu una petita pràctica per tal d'ampliar els elements seleccionables i veure com, efectivament, aquests apareixen a la barra de selecció.

Pràctica

Obriu una pàgina en blanc i escriviu unes paraules, per exemple: Text en negreta.

A continuació, seleccioneu el text i activeu des de la barra de menú Texto l'opció Texto | Estilo | Negrita.

El resultat des de la vista Diseño ha de ser aquest:

Això es fa més útil a mesura que augmenten els elements de la pàgina. És especialment interessant per seleccionar parts d'una taula o la taula sencera, ja que amb el ratolí, a vegades, es fa difícil seleccionar exactament el que es vol.

Indicador de la mida de la finestra

Aquest indicador senyala en píxels l'amplada i l'alçada de l'àrea activa de la finestra Documento. A l'hora de dissenyar les vostres pàgines, és molt important que es visualitzi correctament en les mides de finestra dels navegadors més comuns i que s'adapti adequadament a les diferents resolucions.

Si premeu la casella on es veu la resolució, apareix una llista d'opcions amb les resolucions més comunes.

Indicador de la mida del document / temps de descàrrega

Aquest indicador mostra dues dades diferenciades. D'una banda, la mida de l'arxiu del document actual i tots els elements inserits (HTML, imatges, Flash, etc.) en kilobytes, i de l'altra, el temps estimat de la descàrrega total. La velocitat indicada és la velocitat de transferència de la pàgina actual, amb una taxa de transferència predefinida (normalment 28,8 kbits/s). Aquesta taxa de transferència la podeu modificar des del menú Edición | Preferencias | Barra de estado I Velocidad de conexión.

Aquesta opció és útil per controlar per sobre si la velocitat de transferència de la pàgina es manté en uns marges adequats (entre 1 i 10 segons, segons el tipus de pàgina i segons el que es fa aparèixer ràpidament).

És important tenir en compte que una pàgina que triga menys d'un segon dóna la impressió de ser immediata, si triga de l'ordre de 3-5 segons sembla tardar una mica i si triga més de 10 segons, sembla una pàgina molt lenta.

Finestres

El programa posa a la vostra disposició una gran quantitat de finestres disposades inicialment a la zona dreta de la pantalla si heu optat per la vista Diseñador la primera vegada que heu obert el programa. Cadascuna d'elles amb utilitats que més aviat o més tard utilitzareu. Podeu activar-les des del menú Ventana.

L'espai que ocupen aquests finestres pot ajustar-se arrossegant la barra vertical que els separa de la resta de l'espai de treball. A més a més, aquestes finestres es poden desplegar, contraure, amagar, agrupar... sempre segons les vostres necessitats a l'hora d'eiditar les pàgines amb les quals treballeu.

Aquestes finestres són molt útils, però convé activar-les només en el moment de fer-les servir, exceptuant la de Propiedades, que normalment està oberta perquè s'utilitza constantment.

Observeu un exemple de finestres sense desplegar i al costat algunes d'elles desplegades després de clicar sobre la fletxa negra al costat esquerra del nom de la categoria:

No farem cap explicació exhaustiva del contingut de cadascuna de les finestres, ja que al llarg del curs les podreu visualitzar a l'hora de fer les pràctiques que us proposarem. Ara bé, us n'ensenyarem una que per les seves característiques especials cal conèixer ràpidament: la finestra Propiedades.

Finestra Propiedades

Aquesta finestra és força especial, ja que va canviant el contingut segons l'objecte seleccionat a l'àrea de treball, però en tots els casos, serveix per modificar les propietats del que hi ha seleccionat.

De forma predeterminada apareix situada a la part inferior de l'àrea de treball. Igual que la resta de finestres, podeu desplegar-la, moure-la, agrupar-la, etc. A mes a més, un petit triangle situat a la part inferior dreta de la finestra permet ampliar la informació sobre l'objecte seleccionat. Observeu les tres visualitzacions d'aquesta finestra a mida que l'aneu expandint (a l'exemple, la selecció es fa sobre un element de text).