Repaso general de Dreamweaver Cosas que debes tener muy claras Gua con los puntos bsicos de Dreamweaver

r 1 La importancia de entender el concepto de editor de pginas web De la misma forma que podemos usar Word para escribir cartas y otros documentos, para crear pginas web en condiciones, debemos utilizar un programa especfico. La referencia, a nivel mundial, sigue siendo Adobe Dreamweaver. Es un programa complejo, con muchos pequeos puntos que, sin ayuda, resultan abstractos (difciles de entender a simple vista), pero siguiendo las pequeas indicaciones vistas en clase, podremos sacarle muchsimo partido. Slo hay que recordar que los programas no son perfectos, es decir, ni resulta fcil entender qu hace cada cosa, ni las traducciones son exactas, por lo que tenemos que prestar mucha ms atencin de lo habitual para no perdernos.

2 Los mapas mentales (cunto quiero poner y cmo debera ponerlo) Partiendo de los principios bsicos de qu quiero hacer?, tenemos que elaborar un pequeo mapa de todo lo que me gustara poner en mi pgina web. Invirtiendo unos pocos minutos, podemos ahorrar mucho tiempo y complicaciones, ya que trabajamos sobre seguro (lo que buscamos, se llama como habamos pensado), en lugar de improvisar constantemente y abrir cada archivo, para ver si es lo que buscbamos. Ten en cuenta este consejo: ser organizado no cuesta nada y evitas disgustos

3 La importancia de usar (y conocer) los marcos (frames) Ciertas herramientas, no es necesario usarlas, pero resulta que si les sacas partido, te facilitan muchsimo ciertas tareas (como actualizar la pgina web, que no slo es ponerla en Internet !!!). Los marcos son una de esas opciones que podemos usar. Recuerda que con entender bien el concepto de pantalla partida, sabrs la mitad de lo que tienes que tener bien claro (no es un archivo que guarda dos partes, si no slo la estructura donde luego aparecen dos archivos distintos). Para insertar un marco, basta con ir a insertar, html, marcos y elegir dnde queremos que aparezca. Por defecto, el marco central (el principal) se llama main frame, que traducido al castellano, sera justamente, la parte central. En la parte inferior, encontrars el apartado origen. Si tienes el archivo creado, puedes insertarlo directamente, en lugar de crearlo poco a poco (algo que hicimos en clase). Esto te permite actualizar tu pgina web sin esfuerzo, ya que los marcos te quitan todo el trabajo de ir cambiando, pgina por pgina, el men lateral. Pgina 1 de 11

Repaso general de Dreamweaver Cosas que debes tener muy claras No olvides que es necesario ir guardando el trabajo poco a poco, teniendo siempre en cuenta qu estamos guardando en cada momento (un marco, un archivo normal.).

Pulsando Maysc + F2 , podemos ver lo mismo que yendo a Ventana y Marcos. Ahora, en ese cuadro que aparece, haces clic donde quieras cambiar el archivo que sale en los marcos. Como siempre, el botn examinar (la carpeta amarilla). Hay muchas cosas en DW que son realmente sencillas, slo tienes que tener claro qu utilidad tienen para nosotros. Si entiendes el concepto, te ser muy fcil el poder relacionar men con qu puedo hacer en ese men.

4 No quiero usar marcos, pero s me interesa que todas las pginas tengan el mismo aspecto Aqu lo tenemos ms fcil: podemos usar plantillas o preparar una hoja maestra y luego, guardar, una y otra vez, con diferentes nombres. Me explico: usar plantillas est bien, pero necesitas preparar regiones editables y termina siendo engorroso. Por eso, lo ms directo es hacer una pgina web a tu gusto y llamarla plantilla (tal cual). A medida que vamos aadiendo datos, slo tenemos que ir guardando, con el nombre que nos interese.

Pgina 2 de 11

Repaso general de Dreamweaver Cosas que debes tener muy claras Por ejemplo: si nuestra pgina tiene informacin sobre la biografa de un artista, se llamar biografia , pero si luego aadimos informacin sobre sus discos, esa nueva pgina, ya debera volver a guardarse con el nombre correspondiente (discografa). Importante: las pginas web no deben guardarse con nombres que tengan espacios en blanco, tildes o ees (al ser no ser caracteres que usados por los anglosajones)

5 Quiero poner una lista desplegable, para que la gente elija lo que quiere ver Muy fcil. Slo tienes que ir a Insertar, Formulario, Men de Salto. Cuando pongas los datos, te quedar as (el nombre y la pgina web correspondiente):

Cada vez que pulsas el botn + , te permite aadir un nuevo elemento. En texto, pones lo que quieras mostrar y en URL, la direccin de internet ( ojo! Empiezan siempre por http:// , no siendo necesario poner www..). Y el aspecto final (si activas el botn, claro est), ser este. Una lista que puede desplegarse (pulsando en el smbolo de abajo) y el botn para confirmar la accin:

(y al pulsar..)

Pgina 3 de 11

Repaso general de Dreamweaver Cosas que debes tener muy claras 6 Insertar una imagen que al ponerme encima, cambie (imagen de sustitucin) sta es una de esas cosas tan fciles de hacer, que se hacen en menos de 2 minutos. Primero necesitas tener las fotos en tu ordenador (las tienes? Si es as, sabes donde estn? Vale, pero estn en la carpeta de tu sitio? Pues cpialas!!! Simplemente tendremos que ir a insertar, objetos de imagen, imagen de sustitucin y como no, poner un ttulo descriptivo (sin espacios, plis) y luego, darle a examinar, para ir eligiendo las fotografas que quieras poner. Mira como queda:

Esta imagen se llama boton_musica (sin tildes, ni espacios, ni ees, ojo!!!!) , tiene dos imgenes (una se vera siempre y otra, slo cuando paso por encima con el ratn) y si hago clic sobre ella, me llevar a otra pgina de mi sitio web (o una URL externa).

7 Insertar objetos de Flash (SWF o similares) Vale, esto requiere algo ms de tcnica. Primero, necesitas tener ese fichero. Como suele pasar que son cosas que ves pero no tocas (no puedes descargarte), necesitas un programa externo (es decir, aparte del DreamWeaver). En clase elegimos Video Cache View (lo encuentras usando google y buscando las palabras videocacheview). Si lo descargas, elige la primera opcin (no necesita instalador):

Download VideoCacheView in zip file Download VideoCacheView with install/uninstall support (la pgina es: http://www.nirsoft.net/utils/video_cache_view.html )

Pgina 4 de 11

Repaso general de Dreamweaver Cosas que debes tener muy claras Lo que guardes, al abrirlo, te mostrar esto:

Como somos personas avispadas (vivas), nos daremos cuenta de que un archivo .exe, es un programa executable (o sea, que lo abres y hace algo). Pues eso,clica. Despus de unos segundos, aparecer una lista. Recuerda que para ver los ficheros SWF (ShockWave Flash), necesitas hacer unos cambios en este men: Dejo la primera opcin marcada, porque quiero que me muestre aquellos archivos que no tengo en marcha ahora mismo (porque he cerrado el navegador). Y como no, desmarco aquello que no me interesa (audio, videos..). Ahora bien, cmo bajo algo? Muy fcil: Sin tener que saber mucho ingls, nos daremos cuenta de que copy es para copiar algo (o sea, poner tambin en otro sitio). Play, lo he visto en el video (y al darle, se pone en marcha.. vale). Pero. copy download URLs. podra ser para poner un enlace y que la gente lo vea en otra ventana? Podra ser. De todas las opciones que ves, cul te parece ms probable? Por descarte, copy. Al darle, veo algo como esto: Simplemente, elige el botn de puntitos y dile donde lo quieres (en tu sitio web). Ahora, insertar, media, SWF (dentro de Dreamweaver). Si ves una caja gris, no te preocupes, lo has hecho correctamente! Pgina 5 de 11

Repaso general de Dreamweaver Cosas que debes tener muy claras 8 Las tablas (cmo ponerlas donde quiero?) Las tablas en Dreamweaver son muy tiles, pero como en muchas otras cosas, necesitas conocer cmo funcionan. Estamos acostumbrados a verlas en Word, donde se pueden cambiar de sitio, de tamao, etc con relativa facilidad. Aqu, no. Por ello, primero, necesitas una capa. Cmo lo hago? Yendo a insertar (como no), objeto de diseo, div PA (divisin que puedes mover en Posiciones Absolutas o lo que es lo mismo, poner donde quieras, que es totalmente independiente de lo dems-)

Ahora, debemos tener claros unos cuantos conceptos: -El tamao (Ancho an- y Alto al.-) , se miden en pxeles (no centmetros) -ndice Z: cuanto ms alto, ms prioridad le damos a esa capa (tapa a las que tengan un ndice ms bajo) -Imagen de fondo (lo quieres con una foto para que no se vea todo blanco?) -Elemento CSS (vamos, el nombre, siempre ponle con un nombre que t decidas) -Rec: recortar? Si le pones un valor, eliminar ese trozo de la foto (desde la izquierda, derecha, por encima o por debajo) -Desb. = si quieres que el texto se vea siempre y haga ms grande la capa (visible), que no se vea (oculto), con desplazamiento (barra de scroll) o automtico (si hace falta, que ponga esa barra, si no, nada) Ahora, inserta la tabla (Insertar, Tabla). Puedes poner tantas columas y filas como quieras, pero si necesitas combinarlas (unirlas) o dividirlas (span), recuerda donde pulsar:

Pgina 6 de 11

Repaso general de Dreamweaver Cosas que debes tener muy claras 9 Cmo cambio el aspecto, color o tamao de los textos? Aqu tenemos un problemilla. Para cambios bsicos, puedes hacerlo fijndote en que en la parte inferior de la pantalla (ventana propiedades), aparecen dos secciones: HTML (cosas referidas a la pgina en s) y CSS (lo referido al aspecto de la letra):

Aqu tienes lo que DW ofrece, cuando ests trabajando con texto dentro de tablas (fuente=tipo de letra , tamao, color de la letra, del fondo.. y como no, alineacin). Si realizas ciertos cambios (tamao, por ejemplo), puede salirte una ventana como esta (no te asustes, slo es el CSS, que quiere que guardes ese perfil estilo de letra-): Lo dejamos tal como est y slo nos tenemos que preocupar por ponerle un nombre (como siempre, nada de maysculas, tildes, espacios en blanco, ees). Truco: Es interesante poner el nombre con un punto delante, para distinguirlo de otros elementos en DW (como fotos, tablas, etc)

Ahora, puedes usar esa clase (estilo), seleccionando otros textos y eligiendo, en esta lista, el nombre que has puesto hace un momento (.textopequenho):

Ten en cuenta que si NO deseas utilizar ese estilo CSS, puedes quitarlo diciendo eliminar regla. Ojo!! Si haces cambios en el tamao, esos mismos cambios se aplicarn en TODAS las palabras que hayas marcado como textopequenho. Tiene su sentido, ya que de lo contrario, unas seran ms grandes que otras y DW busca la uniformidad. Parece raro, pero tiene su sentido. Esto no es Word, mal que nos pese. Necesitas un estilo separado, para cada lnea que desees personalizar. Pgina 7 de 11

Repaso general de Dreamweaver Cosas que debes tener muy claras 10 Quiero publicar (subir a internet) mi pgina web. Cmo lo hago? Antes de nada, tienes que tener los datos de conexin , o haber creado tu propia pgina web (recuerdas la prctica de crear un dominio en 260mb.org?). Te recuerdo los datos genricos:
Username: mb260_10633271 (dato bsico: cul es tu usuario?) Password: laContraseaQueHayasPuesto Su URL: http://cristinaestevez.260mb.org o tambien con las www. delante Ftp server: ftp.260mb.org (dato bsico, quin es tu servidor?) URL de Cpanel: http://cpanel.260mb.org (Dnde est mi panel de control?)

Estos datos son los nicos que tienes que controlar para configurar tu sitio web en DW. Por ello, bastar con ir a: Sitios , administrar sitios (y completar los datos):

Primero, tendrs que decirle nuevo, para que nos pregunte, en la pestaa de sitio, los datos bsicos: -nombre del sitio: algo que me aclare qu hay aqu -carpeta del sitio: dnde estarn los archivos de la pgina web (o sea, las fotos, los HTML.)?

Ahora, deberemos tener en cuenta los apartados que aparecen: -primero, buscar servidores, en el men lateral. Pulsar + -segundo, cubrir todos los datos (ojo a los espacios) y pulsar en Prueba (si todo est correcto, podremos conectar desde DW) -tercero, en esa pestaa, en avanzadas, marcar la segunda casilla (as, al guardar, esos cambios se aplican al momento y no tendremos que estar pendientes de este paso) Pgina 8 de 11

Repaso general de Dreamweaver Cosas que debes tener muy claras 11 He borrado sin querer la carpeta y necesito recuperar la informacin que est en Internet Lo resolvemos en un momento. Pulsa F8 y fjate en el cuadro flotante que aparece: En la lista con la carpeta, veo xesusvazque (vale, es mi cuenta, pero puedo elegir otra que haya borrado de mi equipo, pero me interese rescatar de lo que he subido a Internet, lo pillas?). Por eso, elige el sitio adecuado y ahora, donde pone vista local, quiero ver servidor remoto. Como la lista de archivos no se carga sola, pulsa en el botn de actualizar (el smbolo de reciclaje). Selecciona los archivos que desees y pulsa en la flecha de bajar, para recuperar esos archivos que no tenas. Verdad que no ha costado tanto?

12a Acabo de realizar muchos cambios en mi pgina web, pero no s si tiene errores. Puede DW buscarlos por mi? S, poder, puede. Ve al men Sitios y localiza comprobar vnculos en todo el sitio:

Al pulsarlo vers, en la parte inferior de la pantalla, todo esto:

O sea, que de todos mis archivos, slo me qued un enlace errneo (tendra que llevarme a un fichero que YA no existe, se ha borrado, se cambi el nombre..). Busca en la parte derecha, el smbolo de la carpeta, para corregir el enlace de ese fichero HTML. Y con eso, estara listo! Pgina 9 de 11

Repaso general de Dreamweaver Cosas que debes tener muy claras 12b He creado una pgina web usando Word. Puedo llevarla a Dreamweaver? Claro que puedes, pero deberas usar una opcin llamada limpiar cdigo, ya que Word inserta muchos cdigos que puedan dar problemas con ciertos navegadores. Esta posibilidad la encuentras yendo a Comandos, Limpiar HTML de Word 14 A la hora de trabajador con marcos, cmo debo proceder? La idea es, como siempre, crear un fichero html nuevo. A continuacin, insertar el marco que necesites (normalmente, a la izquierda o en la zona superior). Para ello, ser suficiente con decirle insertar, html, marcos, izquierda (o lo que proceda). Ahora, tendrs 2 zonas diferenciadas: la izquierda (men?) y la derecha (principal). Es el momento ideal para guardar ese marco. Nos situamos en la parte izquierda y luego, vamos a Archivo, Guardar marco como.. Ponemos menu y aceptamos. Ahora, la parte de la derecha. Hacemos clic en cualquier parte de esa zona central y repetimos proceso, pero ahora, le llamaremos principal (o lo que nos interese). Por ltimo ,tal como hicimos en clase, guardaremos el fichero completo, yendo a Archivo , Guardar conjunto de marcos como... ste ser, por ejemplo, nuestro fichero raz (ndice = index).

15 Hay alguna forma de saber todos los atajos de teclado en DW? Si no te gusta usar constantemente los mens, puedes aprenderte ciertas combinaciones de teclas. Para saberlas todas todas, puedes ir al men Edicin y luego, Mtodos abreviados de teclado. Prueba a buscar estas opciones:

Pgina 10 de 11

Repaso general de Dreamweaver Cosas que debes tener muy claras Ciertas cosas son siempre iguales en todos los programas (ojo, control+A , selecciona todo, pero en otros programas, puede ser control+E, tenlo en cuenta!). Como ves, no es fcil recordar todo esto, por lo que podemos probar a memorizar los bsicos:

F8: mostrar archivos del sitio (muy til) Control + ALT + F : insertar archivo SWF (Shockware Flash) F3: buscar una palabra en el cdigo (o en la parte de Diseo, donde escribimos todo) Control + S : Save (Guardar) , pero Control + Mayusc + S , implica guardar como.. Control + ALT + T : insertar tabla (habitual) Control + B : negrita (y como no, Control + I : cursiva , como en muchos programas) Mays + F7: correccin de ortografa (en Word, slo F7) Control + F8 : comprobar vnculos de todo el sitio web Mays + F4 : comportamientos (til para pequeos efectos de javascript -texto,fotos-) Mays + F2 : ventana Marcos (para cambiar el archivo que aparece en cada marco) F10: inspector de cdigo (si algo puede dar problemas, nos permitir preveerlo) Control + 1 : Pone ttulo en tamao grande (H1) , el 2 , H2. y as sucesivamente

Como ves, DreamWeaver tiene cosas que se pueden aprender fcilmente, pero otras, requieren algo ms de atencin. En caso de problemas: -Repasa qu has hecho. Intenta volver hacia atrs (control+Z , o desde Edicin.) -Si algo no funciona, puede haber ms de una causa. Suele haber 2 formas de hacer lo mismo (directamente o con un pequeo rodeo) -En ltimo caso, siempre puedes ir a la vista cdigo, copiar todo y crear un nuevo fichero. Hazlo, en caso de problemas con esa pgina -Si usas la vista en vivo para ver como queda la pgina web, recuerda desactivarla, para regresar al modo de edicin. Es fcil despistarse, tenlo en cuenta! -Si la funcin de vista previa (F12) no funciona bien, siempre podrs guardar el documento en la carpeta correspondiente (la de tu sitio web) y abrirla directamente con el navegador (recuerda, puedes decirle botn derecho, abrir con. y elegir el navegador que ms te guste (Google Chrome, Internet Explorer.) Pgina 11 de 11