Notes
sobre el
DREAMWEAVER
(actualitzades a la versió 4 )

INTRODUCCIÓ

Hi ha editor HTML molt simples, fins i tot podem fer una plana web amb el Bloc de Notes de Windows, escrivint tot el codi HTML. El Composer de Netscape és un dels més coneguts. Més potent encara és el FrontPage. Algunes notes sobre ells hi ha en Notes Composer  i  en Notes FrontPage. Però el Dreamweaver, de potència semblant al FrontPage, és un dels més utilitzats.

SITE

-Amb la tecla F8, accedim al Site (conjunt de planes WEB d'una persona, d'un tema ...) Es visualitza el lloc carpeta local i el sitio remoto (si estem connectats a internet)
-Amb Alt+F8 Mapa del sitio : enllaços a plana web icona DW / a carpeta o directori icona full, enllaços dins del lloc/fora del lloc amb icona món blava, enllaços impossibles en vermell; + indica que hi ha adreces a planes que depenen d'aquesta
-Amb Crtl+F8 Comprova vincles trencats, externs i arxius orfes
-Molt interessant es la sincronització de la web local i remota, amb la possibilitat de ordenar el.liminar els fitxers que hi ha en la web remota que no estiguin en la web local o de 'obtener' fitxers del lloc remot...

TECLES

-Ctrl-Majús-T : Veure/no veure la barra d'eines. Si la barra d'eines està visible hi ha en la part esquerra tres icones amb tres possibles vistes (codi HTML, disseny, pantalla divida amb les dues finestres alhora)
-F4 : visualitza si estan amagades o amaga les finestres que estan visibles entre d'altres les tres Windows flotants del Dreamweaver : Objets (Ctrl-F2), Properpies(Ctrl-F3), més la del codi HTML
-Ctr-Majús-U: colocar la plana en el servidor, avisant de poder gravar previament les modificacions
-Ctr-Majús-D: obtener la del servidor
-Ctrl-Doble Clic : obra els enllaços des del  Dreamweaver
-Ctrl-S : permet desar la pàgina activa (i encara es permès desfer/refer les accions fins l'estat que s'ha gravat ...) i no en surt
-Ctrl-Tab : finestra amb el codi HTML
-CTRL+ALT+S (per gravar-ho tot)
-Ctrl-F4 : permet desar la pàgina activa i sortir-ne
-Ctrl-N : Crea una planaWEB nova (File > New)
-Alt-Z / Alt Y : desfer/refer les accions
-Ctrl-Alt-A (d'Ancla -apareix una icona amb aquest dibuix-): possa un marcador de destí o objectiu dins de la pròpia plana (Insert > Name Anchor)
-Ctrl-Alt-I : permet inserir una imatge
-Ctrl-Shift-Espaiador :  introdueix un espai en blanc (Shift = Majús)
-La tecla F12 : grava la plana en un fitxer temporal  i  es visualitza en el navegador
(mentre no gravem podem desfer les accions amb Ctrl-Z,  i  refer amb Ctrl-Y)
-Ctr-F3 : visualitza/amaga la finestra Properpies
-Ctrl-B : posa negreta a una selecció de text o l'activa/desactiva

LINKS o ENLLAÇOS

-Per posar un enllaç o link en una plana origen WEB cal tenir primer el destí o objectiu d'aquest link que pot ser
* un destí o objectiu intern dins de la pròpia plana web origen. Per posar un objectiu destí dins de la pròpia plana WEB farem anar la combinacació de tecles Ctrl-Alt-A (d'Ancla)
* un destí extern a una altra plana web (o fins i tot la pròpia plana) amb indicació del camí, millor del camí relatiu que absolut!

-Una vegada es té el destí (intern o extern) es selecciona la paraula o frase que s'ha de fer activa és a dir que ha de tenir l'enllaç (link) i es selecciona la primera o segona icona respectivament, segons l'enllaç sigui intern a la pròpia plana o extern a una altra plana

-Per treure un link ens hi posem sobre, accedim al menú contextual amb el botó secundari del ratolí i seleccionem aquesta opció (Remove link)

IMATGE DE SUBSTITUCIÓ (ROLLOVER IMAGE) : El Dreamweaver insereix automàticament el codi JavaScript escaient; així s'ha fet aquest exemple amb el DW  partint de la finestra Objectes o 'Insertar > Imágenes interactivas' : 'Insertar imagen de substitución'; hi ha d'altre codi JavaScript que fa una funció semblant com es pot veure aquí  (per veure el codi visualitzar la font de la pàgina)

FRAMES Explicarem com fer aquest exemple de frames Cal que hagi observat com les diferents opcions de l'índex (sotaesquerra -al fer les frames li donarem de NAME sotaesquerra-) apareixen en la mateixa finestra gran de sota a dreta , quedant les altres dues igual amb el títol i l´índex.

1. Inicialment podem crear les planes : plana0.html, plana1.html, plana2.html ...que volem que es visualitzin en la finestra gran de sota a la dreta
2. Fem File > New i amb Insert FRAMES podem definir tot tipus d'estructura de finestres. En els nostre exemple definim una frame Top i en la finestra de sota una frame Left; així ja tenim definida l'estructura de les frames. Ara activem la icona <> per veure el codi HTML.
   Al clicar sobre les diferents finestres, apareix el codi de la finestra corresponent denominada UntituledFrame-N on N es un número correlatiu donat automàticament pel Dreamweaver. Aquest nom apareix en la part superior esquerra de la finestra <> Source del codi HTML activa. Per veure el codi de la plana mare que origina les frames cal clicar sobre la separació de les finestres o en els vèrtexs de la total : quan s'aconsegueix, això queda visualitzat per l'aparició de les frames amb ratlletes indicant que s'ha seleccionat la plana mare de les frames que porta de nom UntituledFrame-N (on N es el més petit) i es veu el codi que crea les frames <frameset ....> .... </frameset>
3. Quan estem editant el codi html (icona <>) de la plana mare que origina les frames (estarem veient les frames amb ratlletes), si ens anem movent pel codi de la plana mare de les frames, apareix en la finestra Properties (activar la visualització d'aquesta finestra en menú Windows del Dreamweaver) en Frame Name el nom de la finestra i en Src la pàgina web que inicialment es mostrarà en la finestra ... Hi ha d'altres paràmetres que podem modificar : Borders, Scroll, No Resize, Border Color, Margin Width, Margin Height ... tal com s'indica a continuació en el gràfic
   
   
   
   
   
4. Ens posem (clicant) en la finestra petita superior i la gravem com títol.html (per defecte Dreamweaver possarà htm); ens posem en la finestra petita inferior esquerra i la gravem com índex.html; ens posem a la finestra gran i la gravem com plana0.html. Però encara no hem gravat la plana mare que origina les frames : visualitzem el codi HTML (icona <>) i seleccionem la plana mare i la salvem amb File > Save Frameset posant de nom paginaf.html.
5. Si no volem voreres en les frames, en la seva pàgina mare no podem seleccionar sense voreres, ja que es veuen línies de separació;  cal fer : a)activar que sí apareguin b)però amb mida 0! ... Així s'aconsegueix que les voreres de les frames siguin nítides com es mostra en el exemple de frames
6. Ara des la finestra codi HTML de la la plana mare podem canviar el NAME que ha donat el Dreamweaver a les finestres frames definides : canviarem topFrame per franjadat, leftFrame per sotaesquerra i mainFrame per sotadreta. És en aquesta finestra de NAME sotadreta en la qual farem visibles les pàgines del diferents links de les opcions de la plana índex. Anem a la plana índex i posem els diferents links : Inicial a plana0, opció1 a plana1, opció2 a plana2 ... posant en tots els casos en Target sotadreta. Així hauríem d'haver obtingut el resultat de l'exemple ...
   

MULTIMEDIA

*Podem fer enllaços a .mid, .wav ... multimedia
*Per fer que al carregar una plana soni per exemple un midi ho podem fer fàcilment amb Insert > Media >Plugin : només cal seleccionar el midi al cual podem posar paràmetres border=" "   width=" " height=" " loop="false" autostart="true" ... com els que s'indica aquí

MAPA

A l'inseir una imatge, apareix ja en la finestra Properpies la possibilitat de convertir-la en un MAP seleccionant en la imatge zones tancades rectangulars (fer CLIC continu fins dibuixar-la), circulars o poligonals (amb Ctrl es permès de indicar més de tres punts). Seleccionada una zona (apareixen punts blaus en el seu perímetre) també la podem esborrar amb tecla DEL
A cadascuna d'aquestes zones se li pot associar un enllaç (link)

TAULES

Amb el DW4 s'ha modificat força opció de taules : Des de la finestra objectes/Ctrl-F2 -comuns- podem treballar amb vista de disposició (ressaltada blau al final de la 2a columna) o vista estàndard (a l'esquerra de l'anterior) Cura! : si estem en vista de disposició no podrem inserir taula des de menú / tecla mètode abreujat (Ctrl-Alt-T) -igualment passa amb la capa-, cal fer-ho directament amb el ratolí clicant prèviament una de les dues icones sobre anteriors (taula en verd, i cel·la en blau)
Una vegada fet Insert Table (Ctrl-Alt-T) aquesta es pot modificar
* cel·la, columna, fila o un conjunt rectangular de cel·les seleccionades prèviament amb el ratolí
* si en la part superior - esquerra de la taula quan apareix unes doble-fletxes, cliquem es selecciona totat la taula : podem redimensionar-la parcial o totalment, i alinear-la al centre, dreta o esquerra de la plana
* es poden seleccionar amb el ratolí un grup de cel.les i ajuntar-les en una de sola amb Ctr-Alt-M(erge)
* les cel.les es poden dividir en diverses files o columnes amb el menú contextual Table > S(plit) o tecla Ctr-Alt-S(plit)

ETIQUETES INVISIBLES

El codi HTML és invisible però es visualitza el seu efecte ... però podem inserir 'Etiquetes invisibles' que no tenen un efecte directe en la visualització com són :
- señalització del DESTÍ dins d'una plana -punto de fijación-, l'ANCLA del DW (Ctrl-Alt-A)
- seqüència de codi JavaScript, VBScript .. com per exemple
  el seu navegador (browster) és el
- el comentari per fer aclariments o recordaris sobre el codi HTML