DW - Dissenys predefinits del Dreamweaver



[Pròximament]

DW - Més Comportaments de Javascript del DW

[Pròximament]

DW - Configurar el client FTP(i gestor d'arxius) del DW

Introducció
Si hi ha un punt fort al Dreamweaver és el seu gestor d'arxius que al mateix temps fa les funcions de client FTP. Com a client FTP és com qualsevol altre tot i que més especialitzat o adaptat a disseny web, potser amb alguna funció de sincronització d'arxius que un client FTP normal no tindria. Però que tingui un client FTP integrat a dintre del mateix programa no és el seu punt més fort. El veritable punt fort del Dreamweaver és la gestió d'arxius ja que si canviem un arxiu de nom o de carpeta, dintre del nostre lloc web, el Dreamweaver se n'adona i corretgeix automàticament les URLs, tant les que hi hagi a l'arxiu mateix com les que hi hagi als arxius que apuntin cap ell. Aquest automatisme estalvia molts maldecaps i feina feixuga al dissenyador web, permetent-li treballar amb un grau més ample de flexibilitat.


Quan comencem a treballar en un projecte al Dreamweaver ens cal definir una carpeta local on treballar, diríem "una carpeta de projecte" però també diríem "crear un lloc web" o "crear un site". Tant si volem penjar el nostre site com si no caldrà definir localment la carpeta de treball per que DW pugui treballar coneixent així les URLs relatives dels arxius. Per Dreamweaver és molt important conèixer la carpeta local d'un lloc web ja que així podrà establir les URLs entre els arxius com a URLs relatives, de tal manera que tant funcionan localment com quan "pujem" el lloc sencer al servidor web.

El gestor d'arxius del DW el veurem a la finestra "Archivos" del DW. Si no la veieu aneu al menú Ventana > Archivos. També podeu fer F8. Convindria que tinguèssiu aquesta finestra a la vista abans de començar a configurar aquest gestor d'arxius i client FTP i a continuació podeu seguir els següents passos:



1. [Menú: Sitio > Nuevo Sitio]



2. Ens posarem a la pestanya "Avanzadas" i a datos locales tan sols ens cal definir obligatòriament dos coses que són el Nom de Projecte[Nombre del Sitio] i la carpeta de treball[Carpeta raíz local]. La resta de coses d'aquesta pestanya no són obligatòries i us deixo a vosaltres que investigueu per a què serveixen.



3. A l'apartat "Datos remotos" configurem el client FTP del DW pròpiament dit per que es connecti al servidor on allotjarem el nostre lloc web. Bé, una condició prèvia que ens cal per poder omplir aquesta secció és disposar d'allotjament i que ens hagin proporcionat les dades de connexió. Suposem que disposem d'aquestes dades. Les omplim doncs:


Com a consell us diria que omplíssiu només el que s'us hagi proporcionat per part del hosting. Generalment es posa l'adreça ftp, el nom d'usuari i la contrasenya. A vegades algun hosting us fa posar a directorio del servidor alguna cosa de l'estil de "httpdocs". Això depén de cada hosting. En qualsevol cas us han de donar aquesta dada. També podeu fer servir aquesta carpeta per pujar els arxius a una carpeta en concret que hagueu creat vosaltres al server.






4. Comprovem que ens podem connectar al hosting prement el botó "Prueba".
Si tot va bé acceptem i la finestra Archivos, a la dreta ens quedarà així:





5. Si premem al botó la finestra Archivos s'expandirà mostrant-nos, com si fos un client FTP, a la esquerra els arxius que hi ha pujades al hosting i a la dreta els arxius que hi ha a la nostra carpeta local. Queda així la finestra:






6. Si premem sobre "l'endollet" connectarem amb el server i podrem veure el que hi ha a la carpeta remota.



Si vulguèssim baixar algun arxiu remot primer el seleccionariem de la banda esquerra i després amb la fletxa de baixar el baixaríem. I si vulguèssim pujar algun arxiu el seleccionariem de la part dreta i el pujaríem amb la fletxa de pujar. . I per desconnectar premeriem a l'endollet novament fins que s'apaguès la llum.




7. Un cop hem connectat, hem pujat, hem baixat, hem desconnectat el que podem fer és tornar a posar la finestra "Archivos" plegada a la dreta de la interfície del Dreamweaver amb el botó i tornaria a quedar-nos la finestra així:



8. Si fem botó dret a la finestra ens sortiran vàries opcions en el menú contextual. Dues d'aquestes opcions,Nuevo Archivo y Nueva Carpeta, són molt importants ja que ens estalviaran molts maldecaps. Si els creem en aquesta finestra "Archivos" el DW farà correctament les URLs relatives ja que ja sabrà amb exactitud a quin SITE pertanyen. Per tant no feu [menú: Archivo>Nuevo] des d'ara en endavant. Creeu els arxius en la finestra Archivos directament sempre que pugueu. Per tant fem sobre la finestra Archivos, botó dret i:



I queda l'arxiu:


I per crear la carpeta fem botó dret i escollim:

I ens crea la següent carpeta:






9. Altres operacions importants que podeu fer a la finestra Archivos son arrosegar arxius a dins o a fora de carpetes, renomenar,etc. Amb l'avantatge que el DW se n'adona i actualitza les URLs automàticament als arxius on cal. Per tant a partir d'ara no convé renomenar els arxius per fora del DW amb l'explorador de Windows o de MAC si no amb aquest gestor d'arxius per aprofitar-nos d'aquest punt fort del DW.

DW - Comportaments - Menús emergents



Un dels comportaments de javascript més interessants que incorpora DW és el dels menús emergents. Més endavant us explicaré com fer menús emergents amb CSS sense necessitat de posar Javascript en les nostres pàgines. Però en aquest article us explicaré pas a pas com es fan. Però per que et facis una idea de quin és el resultat final clica aquí i mira a l'enllaç "Internacional":

Pasos a seguir:


1. Seleccionem un enllaç(una etiqueta A), condició obligatòria per que se'ns habiliti a la finestra Comportamientos la opció Mostrar Menú Emergente.
[Seleccionar enllaç + A la finestra Comportaments apretar al signe + > Escollir Mostrar Menú Emergente ]



2. Llavors ens surt una finestra on ens parla que amb el Fireworks els menús són més avençats i...

Us suggereixo que aneu mirant, quan pugueu, el Fireworks. Però de moment per que no ens molesti aquest cartellet cada cop que voleu un menú emergent marqueu la casella: "No volver a mostrar este mensaje" i cliqueu al botó continuar.

3. Ens apareix la següent finestra de la que de moment ens preocuparem de la pestanya "Contenido" on podrem anar posant els diferents elements de menú i fins i tot de submenú.


Podem anar creant tots els elements de menú per l'enllaç "La Portada" donant cada cop al botó [+], Per eliminar-ne fem servir el [-],les fletxes ens serveixen per canviar l'ordre. Al camp "vínculo" podem anar posant les url dels documents cap on volem que salti, i al camp destí, que és l'atribut target d'aquell enllaç, posem la finestra on volem que es representi la URL.



4. Ara us explicaré com fer submenús. Per fer això seleccionaré l'enllaç "Internacional" i crearé els següents enllaços. Començo posant els continents.



Però vull que Xina estigui indentada amb Àsia. Volem que Xina quedi penjada de la opció Àsia. Per fer això premem al botó:



Podem continuar creant més enllaços a Àsia... i quedarà així:



5. A la pestanya "Aspecto" escollim els colors i si volem el menú vertical u horitzontal. Jo esculliré vertical per que vull que es despenji d'Internacional.



6. I a la petanya Avanzado podem controlar altres aspectes, entre els quals trobem la demora de temps que es manté visible el menú emergent i/o els submenús.



7. A posició indiquem per on volem que aparegui el menú emergent. Jo escolliré per sota. I si cal modificaré el valor Y: per que aparegui al lloc adient.

DW - Plantilles

Com crear una plantilla amb el Dreamweaver. Els passos són els següents:

  1. Dissenyar una pàgina prototipus. Li podem dir, per què no, avia.html. En aquest pàgina definim les capses amb els seus noms i afegim una fulla d'estils externa, si vols, per definir l'aspecte que tindran totes les pàgines del nostre lloc web. Tot això preveient les parts que seran constants a totes les pàgines del nostres lloc web [La navegació constant] i les parts que seran variables, els continguts. Quan ja tinguem definit aquest document prototipus el guardem com a html. Segurament el procés de confeccionar la pàgina prototipus és el més llarg.

  2. Convertir la pàgina avia.html en la plantilla mare.dwt que és un arxiu de treball del dreamweaver(dwt vól dir dreamweaver template).
    [Archivo > Guardar como Plantilla]

  3. A la plantilla mare.dwt definim les regions editables i les regions opcionals. Seleccionem el lloc de la pàgina desitjat i fem:
    Botó dret > Plantillas > Crear Región Editable (o bé Región Opcional)

  4. Creem les pàgines filles.
    Archivo > Nuevo > Pestaña Plantillas > Escogemos la plantilla > [Crear]

  5. Farcim("rellenamos") les regions editables i en cas d'haver-hi mostrem o ocultem les regions opcionals.

    a. Anem al Head i posem els "interruptors" de les regions opcionals que vulguem que es vegin en aquella filla en mode "true".

    b.
    [Modificar > Plantillas > Actualizar página actual]

    c.
    Guardem la filla amb un nom. [ Archivo > Guardar como ]


  6. Al menú de la plantilla mare.dwt enllacem a les filles, Guardem[Ctrol+S] i Actualizar todas.

FLASH - SWFOBJECT - Col·locar flash sense que protesti el navegador per l'avís de l'ActiveX

Amb Javascript, dinàmicament per tant, podem escriure a la pàgina la instrucció per que col·loqui un flash. D'aquesta manera també aconseguirem que surti el cartellet de l'ActiveX. Ens ho expliquen a Uninjipe. Clica aquí per veure-ho.