Está en la página 1de 46

Dreamweaver 8

http://www.aulaclic.es/dreamweaver8/t_1_1.htm

INDICE:
1. Conceptos bsicos de Dreamweaver 8 2. El entorno de trabajo 3. Configuracin de un sitio local 4. El texto 5. Hiperenlaces 6. Imgenes 7. Tablas 8. Marcos 9. Formularios 10. Multimedia 11. Las plantillas 12. HTML desde Dreamweaver 13. Otros elementos 14. Capas 15. Comportamientos 16. Comportamientos Avanzados 17. Estilos CSS Avanzado 18. Sitios Remotos 19. Servidor de Pruebas 20. Pginas Dinmicas 21. Cmo crear un Blog 22. XML y RSS 23. AJAX y Spry Framework

Unidad 1. Conceptos bsicos de Dreamweaver 8


Qu es Dreamweaver 8 HTML bsico Novedades de Dreamweaver 8 Editar pginas web Cmo tener una pgina en Internet Arrancar y cerrar Dreamweaver 8 Compaginar dos sesiones Abrir y guardar documentos Mi primera pgina

Qu es Dreamweaver 8
Dreamweaver 8 es un software fcil de usar que permite crear pginas web profesionales. Las funciones de edicin visual de Dreamweaver 8 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la pgina de Adobe, la versin caduca al cabo de 30 das, pero seguro que te animas a comprar la versin de pago de este estupendo programa.

Si no conoces las caractersticas bsicas de HTML puedes verlas aqu.

HTML bsico
Las pginas que vemos en Internet estn escritas utilizando el lenguaje HTML (Hyper Text Markup Language). Este lenguaje est basado en etiquetas que marcan el inicio y fin de cada elemento de la pgina Web. Por ejemplo, el ttulo de la pgina Web se escribe entre las etiquetas <TITLE> y </TITLE>. Como ves, ambas etiquetas consisten en poner un mismo comando entre los smbolos "<" y ">". La primera etiqueta indica inicio, y la segunda, que incluye el smbolo "/", indica final.

Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan. Por ejemplo, <TABLE Border="1"> indica que la tabla tendr un borde de tipo 1. Una pgina HTML bsica tendra el siguiente aspecto: <HTML> <HEAD> <TITLE> Mi primera pgina web </TITLE> <BODY> <A href:"http://www.aulaclic.com"> Haz clic aqu para ir a aulaClic</A> resto de la pgina web </BODY> <HTML> Las etiquetas que se introducen en un documento HTML no son visibles cuando el documento se muestra en un navegador (IExplorer, Netscape, etc). Cuando un usuario desde Internet solicita ver una pgina el servidor Web enva la pgina al navegador y este interpreta las etiquetas para dar el formato a la pgina. Cuando utilizamos Dreamweaver para crear una pgina Web no tenemos que preocuparnos de todo esto. Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la apariencia y contenido definidos en el editor grfico.

Novedades de Dreamweaver 8
En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior, Dreamweaver MX 2004. Integracin de RSS: con Dreamweaver 8 podrs integrar entradas RSS provenientes de otras pginas con slo introducir la fuente y arrastrar y colocar los campos. De esta forma podrs introducir datos en formato XML fcil y cmodamente. Mejoras CSS: esta ltima versin ha mejorado mucho respecto a la compatibilidad y manejo de estilos de cascada. De esta forma se ha mejorado el panel de estilos CSS, donde ahora podrs acceder a la configuracin de cada uno de los estilos desde una lista mucho mejor dotado de una cuadrcula editable desde donde podrs modificar sus propiedades. Adems, Dreamweaver 8, aade una nueva barra de herramientas que proporciona la reproduccin inmediata de los estilos para diferentes medios (pantalla, impresora, web TV, PDAs...). Accesibilidad: Dreamweaver 8 incorpora las normas de accesibilidad de prioridad 2 marcadas por la WCAG/W3C. Transferencia de archivos: Ahora con Dreamweaver 8 podrs seguir trabajando con tus archivos mientras el programa se comunica con tu servidor e incluye los archivos creados o modificados recientemente. Su sincronizacin ha mejorado notablemente siendo posible una mejor gestin de cambios, adems de permitir en uso de bloqueo/desbloqueo de archivos para que estos no se sobrescriban. Interfaz mejorada: Los usuarios con problemas visuales podrn acceder a una opcin de Aumento de la pantalla en vista de diseo para analizar o trabajar con difciles anidamientos de tablas. Adems de la inclusin de informacin visual gracias a las guas que permitirn la medicin pxel a pxel de todos los elementos. Nueva barra de herramientas: Se ha aadido una barra de herramientas a Dreamweaver 8, podrs encontrarla en la parte lateral izquierda del modo de Cdigo, esta barra hace mucho ms accesible el cdigo al permitirnos la navegacin por etiquetas y su contraccin. Una de las nuevas novedades es la posibilidad de aadir comentarios con un slo clic. Compatibilidad: Comentaremos, adems, la compatibilidad aadida en esta versin con PHP5, Coldfusion MX 7 y Video Flash.

Editar pginas web


Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo. Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un editor grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los elementos de la pgina, al mismo tiempo que es ms complicado crear una apariencia profesional para la pgina.

Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromedia Dreamweaver. Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.

Cmo tener una pgina en Internet


Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio por disponer de espacio propio en el servidor depender de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar. Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra pgina precedido por el de la suya. Hay que tener tambin en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa, aunque s es aceptable para una pgina personal. Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser nico, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com. En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra pgina no ser ms que un archivo dentro de la de la empresa contratada. A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de cuentas de correo electrnico propias que pueden habilitarse y si disponemos

de una base de datos para poder acceder a ella a travs de programacin va Web, aunque esto ltimo ser til slo para usuarios avanzados. Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo. Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrs que se encuentre a disposicin de todo el mundo en Internet. Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no lo haces de este modo, tu sitio experimentar fallos y enlaces que no funcionarn.

Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni espacios en blanco. De esta forma te asegurars de que el servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l. Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los nombres en minscula. Algunos servidores distinguen entre maysculas y minsculas, por lo que si en tu pgina quieres mostrar la imagen foto1.jpg debers guardarla con ese nombre y no como Foto1.jpg. Evitars horas perdidas buscando fallos.

Arrancar y cerrar Dreamweaver 8


Veamos las dos formas bsicas de arrancar Dreamweaver 8.

Desde el botn Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men; al colocar el cursor sobre Todos los programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Macromedia (o Adobe si tienes las ltimas versiones), seguidamente Dreamweaver 8, hacer clic sobre l, y se arrancar el programa.

Desde el icono de Dreamweaver 8 del escritorio

Puedes arrancar Dreamweaver 8 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios tambin puedes compaginar dos sesiones de la forma que te explicamos aqu.

Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las siguientes operaciones: Hacer clic en el botn cerrar Pulsar la combinacin de teclas ALT+F4. Hacer clic sobre el men Archivo y elegir la opcin Salir. Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedir confirmacin para guardar o no cada uno de ellos.

Abrir y guardar documentos


Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botn abrir de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+O. Hacer clic sobre el men Archivo y elegir la opcin Abrir. Hacer doble clic sobre el archivo en la ventana del sitio. Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botn abrir

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+N. Hacer clic sobre el men Archivo y elegir la opcin Nuevo. Hacer doble clic sobre el archivo en la ventana del sitio. Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina bsica, HTML.

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botn guardar

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+S. Hacer clic sobre el men Archivo y elegir la opcin Guardar.

Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones. Hacer clic en el botn guardar todo de la barra de herramientas estndar.

Hacer clic sobre el men Archivo y elegir la opcin Guardar todo. Al tener varios documentos abiertos es fcil olvidarse de todos las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opcin guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opcin, al menos hasta que te hayas habituado a manejar el programa. Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear una pgina web sencilla, con varios estilos de texto, una imagen y un enlace a otra pgina. Crear esta pgina solo te llevar unos pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los que estn hechas la mayora de las pginas web. Si nunca has hecho una pgina web, este es el momento para descubrir lo fcil que es.

Mi primera pgina
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior como puede hacerse. Abres un documento nuevo y seleccionas la Categora Pgina bsica, HTML. Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.

Una vez introducido el texto, vas a modificar el ttulo y el color de fondo del documento. Para ello debes hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Entonces se abrir una ventana como la que aparece ms abajo.

Cambia el Ttulo por Mi primera pgina. En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color azul. Seguidamente pulsa sobre el botn Aceptar. Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un CD-ROM o en un disquete, pero preferiblemente en el disco duro. Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botn derecho del ratn sobre la imagen que queremos traer de Internet, se abre una ventana con una opcin similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro. En los navegadores ms modernos al colocar el cursor sobre una imagen aparecen estos iconos en una esquina de la imagen, si haces clic en el icono del disquete aparecer el mismo men Guardar imagen como... a que hacamos referencia anteriormente. Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina

web que estamos creando. Puedes guardarla, por ejemplo, en la carpeta Mis Documentos.

Ahora tienes que insertar la imagen debajo de la segunda lnea de texto. En primer lugar debes situar el cursor al final de la segunda lnea y pulsar un intro ( Enter) para ir a una nueva lnea. Despus debes dirigirte al men Insertar, a la opcin Imagen. En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la habas guardado, y despus seleccionarla.

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto:

Si no te aparece, puedes mostrarlo a travs del men Ventana, con la opcin Propiedades.

Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque est contrado. Para que te aparezca desplegado debes pulsar sobre el botn , que aparece junto al nombre.

Selecciona la primera lnea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal y como se muestra en la siguiente imagen.

Despus de esto, la apariencia de la primera lnea habr cambiado. Selecciona la imagen y las dos ltimas lneas de texto. Pulsa sobre el botn para centrarlos.

Una vez hayas centrado la imagen y las otras dos lneas siguientes, selecciona la segunda lnea de texto, que an no ha sido modificada. Cambia el Formato por Encabezado 3, pulsa una vez sobre el botn y pulsa tres veces sobre el botn .

Selecciona de nuevo la ltima lnea, y en Vnculo introduce http://www.elpais.es, para crear un enlace a esa otra pgina:

Despus de todos estos pasos, puedes ver cmo ha quedado el documento pulsando la tecla F12. Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs del men Archivo, desde la opcin Guardar. Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la extensin ha de ser htm o html. Por ejemplo, puedes llamarlo prueba1.htm.

Si pulsas aqu podrs ver cmo debera haber quedado la pgina despus de haber seguido todos los pasos anteriores. Compara esta pgina con la tuya, para ver si lo has hecho todo bien.

Prueba evaluativa del Tema 1.

Prueba evaluativa de la unidad 1. Conceptos bsicos de Dreamweaver 8


Solo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin.
1. Las pginas web pueden tener la extensin HTML. a) Verdadero. b) Falso. 2. Los servidores gratuitos son recomendables para alojar pginas de empresas. a) Verdadero. b) Falso. 3. En Internet pueden existir pginas con el mismo nombre pero distinta terminacin. a) Verdadero. b) Falso. 4. En Dreamweaver no pueden utilizarse combinaciones de teclas. a) Verdadero. b) Falso.

5. El botn a) Abrir. b) Nuevo. c) Cerrar.

significa...

6. El icono a) Abrir. b) Nuevo.

significa...

c) Cerrar.

7. El icono a) Abrir. b) Nuevo. c) Cerrar.

significa...

8. Si hacemos clic sobre el botn Nuevo de la barra de herramientas: a) Aparecer directamente un nuevo documento vaco en pantalla. b) Aparecer una nueva ventana en la que hay que elegir el tipo de documento que se desea crear. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.

9. Si se pulsa sobre el icono a) Se guardarn todos los documentos modificados y los nuevos. b) Se guardarn solamente todos los nuevos documentos. c) Se guardarn solamente todos los documentos modificados. d) Ninguna de las opciones anteriores. 10. La combinacin de teclas Ctrl + O sirve para.... a) Crear un nuevo documento. b) Abrir un documento. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.

Unidad 2. El entorno de trabajo


La pantalla inicial Las barras Los paneles e inspectores Personalizar el rea de trabajo Vistas de un documento La ayuda Vamos a ver cules son los elementos bsicos de Dreamweaver 8, la pantalla, las barras, los paneles, etc., para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear pginas web.

La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes fundamentales. As conoceremos los nombres de los diferentes elementos y ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qu elementos quiere que se vean en cada momento, como veremos ms adelante.

Las barras
La barra de ttulo

La barra de ttulo contiene el nombre del programa (Marcromedia Dreamweaver 8) y seguidamente el nombre del documento que aparecer en el explorador y entre parntesis, su ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn los botones para minimizar, maximizar/restaurar y cerrar. La barra de mens

La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o indispensable hacerlas desde los paneles. La barra de herramientas estndar

La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms habituales, como Abrir , Guardar , etc.

La barra de herramientas de documento

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estndar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.

La barra de estado

La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>). Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la

pgina), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%).

Los paneles e inspectores


Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los ms importantes. El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrar el tipo de fuente, la alineacin, si est en negrita o cursiva, etc. Pulsando sobre el botn se despliega para mostrar ms opciones. Este botn se encuentra en la esquina inferior-derecha. Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar. La barra de herramientas Insertar o panel de objetos

La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al men Insertar. Los elementos estn clasificados segn su categora: tablas, texto, objetos de formulario, etc. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez. Si lo deseas puedes personalizar el rea de trabajo, te explicamos cmo hacerlo aqu .

Vistas de un documento
Puedes cambiar la vista del documento a travs de la barra de herramientas de documento.

La vista Diseo La vista Diseo permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se suele utilizar habitualmente.

La vista Cdigo

La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. No permite tener directamente una referencia visual de cmo va quedando el documento segn se va modificando el cdigo.

La vista Cdigo y Diseo La vista Cdigo y Diseo permite dividir la ventana en dos zonas. La zona superior muestra el cdigo fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.

La ayuda
A travs del men Ayuda puedes: Acceder al cuadro de dilogo de ayuda muy similar al de Windows donde puedes buscar por temas, por ndice o por contenido, si seleccionas la opcin Utilizacin de Dreamweaver o simplemente pulsando F1. Acceder a tutoriales (opcin Primeros pasos con Dreamweaver). Abrir el panel Referencia en el que encontrars la sintaxis y descripcin de las etiquetas HTML. Acceder al Centro de servicio tcnico de Dreamweaver en la web. Acceder al Foros en lnea de Dreamweaver.

Prueba evaluativa del Tema 2.

Prueba evaluativa de la unidad 2. El entorno de trabajo


Solo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin.
1. Los botones para minimizar y maximizar la ventana del programa Dreamweaver se encuentran en la Barra Insertar. a) Verdadero. b) Falso. 2. Las vistas del documento pueden cambiarse a travs del panel Propiedades. a) Verdadero. b) Falso. 3. La pestaa Favoritos en la barra Insertar puede personalizarse para mostrar unos u otros iconos. a) Verdadero. b) Falso. 4. Las barras de herramientas son flotantes. a) Verdadero. b) Falso. 5. La apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. a) Verdadero. b) Falso. 6. Los paneles e inspectores se muestran y ocultan a travs del men ... a) Insertar. b) Comandos. c) Ventana.

7. En la barra Insertar o panel de Objetos... a) se puede cambiar las vistas del documento. b) los botones estn clasificados segn su categora. c) se configuran las propiedades del objeto seleccionado. 8. Se puede trabajar con el editor visual mediante las vistas... a) diseo. b) cdigo. c) las dos respuestas anteriores son correctas. 9. El icono sirve para ...

a) pasar a la vista cdigo. b) pasar a la vista cdigo y diseo. c) pasar a la vista diseo. d) insertar una imagen. 10. La vista diseo... a) es la vista predeterminada. b) es la que se suele utilizar habitualmente. c) las dos afirmaciones anteriores son verdaderas. d) las tres afirmaciones anteriores son falsas.

Unidad 3. Configuracin de un sitio local


Introduccin Crear o editar un sitio web sin conexin a Internet Vistas del sitio Subir archivos al servidor Comprobar tamao para optimizar la carga Propiedades del documento Los colores

En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las propiedades de los documentos, como puede ser el color de fondo.

Introduccin
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas que va a contener. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imgenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. Despus se podrn copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podr verlo en Internet. La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc. Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una pgina con ese nombre cuando se intenta acceder a una URL genrica. Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.com en el navegador, ste intentara cargar la pgina http://www.aulaclic.com/index.htm, por lo que se producira un error en el caso de que no existiera ninguna pgina con el nombre index.htm.

Crear o editar un sitio web sin conexin a Internet


Una vez creadas las carpetas que formarn un sitio local, ya es posible definir el sitio en Dreamweaver. Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios.... Recuerda que a travs del panel Archivos, pestaa Archivos, se puede acceder a cada uno de los sitios creados y a la opcin Administrar sitio.

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad. Por supuesto, pueden existir varios sitios locales en un mismo ordenador. Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma ventana en la que definir las caractersticas del sitio.

Las caractersticas del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda. Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic en ella. Vamos a ver los datos que hay que editar para la categora Datos locales. Debe definirse el Nombre del sitio y la Carpeta raz local, que es en la que se encuentra el sitio dentro del disco duro local. Despus, si se desea, a travs de la categora Mapa de diseo del sitio puede definirse la pgina principal del sitio, de la que colgarn el resto de documentos HTML dentro del sitio, si en la carpeta raz del sitio existe una pgina con el nombre index.htm, Dreamweaver la coger por defecto. Estas tres caractersticas son las imprescindibles para definir un sitio local. Las dems opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estar el sitio remoto. Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio. Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la pestaa Bsicas, en vez de la pestaa Avanzadas.

Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo. Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men desplegable de la pestaa Archivos.

Para practicar puedes realizar el Ejercicio paso a paso Crear un sitio web local.

Ejercicio paso a paso. Unidad 3.Crear un sitio web local


Objetivo.
Practicar las operaciones que hay que realizar para crear un sitio web sin conexin a Internet. En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es importante que realices los ejercicios por orden, sin saltarte ninguno . Estos ejercicios estn diseados para ir construyendo una pgina web completa y si intentas realizar un ejercicio sin haber hecho los anteriores puede que no veas un resultado muy coherente o no puedas seguir el ejercicio.

1 Si es la primera vez que realizas este ejercicio, copia en la carpeta Mis documentos de tu disco duro, la carpeta ejerciciosdream, que se encuentra dentro de la carpeta ejercicios del curso. 2 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 3 Haz clic sobre el men Sitio. 4 Elige la opcin Administrar sitios. Se abrir una nueva ventana. 5. Selecciona el botn Nuevo..., y selecciona la opcin Sitio. Se abrir una nueva ventana. 5 Selecciona la pestaa Avanzadas de la nueva ventana. 6 Selecciona Datos locales en Categora. 7 En Nombre del sitio escribe Cocina. 8 En Carpeta raz local busca la carpeta cocina , que se encuentra dentro de la carpeta ejercicios dream, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta. 9 En Carpeta predeterminada de imgenes busca la carpeta imagenes, que se encuentra dentro de la carpeta cocina, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta. 10 Haz clic sobre el botn Aceptar y sobre el botn Listo. A partir de este momento, realizando los ejercicios paso a paso, vamos a crear una pgina como la que aparece si pulsas aqu.

Vistas del sitio


Es posible visualizar un sitio en el panel Archivos o en una ventana. El panel Archivos se puede abrir a travs del men Ventana, opcin Archivos. Tambin pulsando F8.

Para cambiar de una vista a otra hay que pulsar sobre el botn parte superior del panel y de la ventana.

que aparece en la

Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el mapa del sitio. En esta imagen se visualizan el mapa del sitio y el sitio local. En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento indice.htm, ya que ste ha sido definido como pgina principal del sitio y contiene vnculos hacia los otros dos.

Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver, las pginas no se mostrarn correctamente: no aparecern imgenes, no funcionarn enlaces, etc.

En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a travs del sitio, es posible actualizar automticamente las pginas para que si hacen referencia a un objeto que ha cambiado, despus no se produzcan problemas al visualizarlas. Al modificar algn objeto que es referenciado por algn otro documento, se muestra una ventana similar a esta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados. Simplemente hay que pulsar sobre el botn Actualizar.

Subir Archivos al servidor


Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) debers subir los archivos al sitio que hayas contratado o conseguido gratuitamente.

Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que debers ir subiendo uno a uno cada archivo y creando las carpetas t mismo. Este proceso puede hacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y como se encuentra en tu carpeta del disco duro. Sino los enlaces no funcionarn correctamente y es posible que algunas imgenes no se muestren. Para subir los archivos via web debers seguir las instrucciones que te proporcionar tu servidor.

La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior. Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en el

Explorador de Windows) y, obviamente, nos es mucho ms til para subir los archivos. Uno de los programas gratuitos (si no es con fines comerciales) ms utilizados es SmartFTP, desde su pgina web podrs descargarte el programa y su traduccin al espaol. Una vez instalado, abre el programa y haz clic en Archivo y luego en Nuevo Navegador Remoto para crear una nueva cuenta FTP.

Aqu debers introducir los datos que te facilit el servidor dnde vas a alojar tus pginas: Host, Usuario y Contrasea. Rellena los campos y haz clic en OK. Se conectar automticamente y podrs ver una carpeta donde podrs copiar los archivos que hayas creado. Para ello, haz clic en Archivo y en Nuevo Navegador Local para abrir un navegador de los archivos de tu disco duro. Busca la carpeta que definiste como Sitio local y copia todos los archivos que quieras subir seleccionndolos a la vez y arrastrndolos a la carpeta (remota) del servidor.

Vers como el programa empieza a copiar la informacin de tu disco a Internet. Cuando haya finalizado, slo tendrs que introducir tu direccin de Internet en la barra de direcciones de tu navegador (Firefox, Internet Explorer...) y vers el sitio en Internet!

Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la carpeta public_html y sube tus archivos all.

Propiedades del documento


Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc. Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo Propiedades de la pgina. Este cuadro se puede abrir de tres modos diferentes: Pulsar la combinacin de teclas Ctrl+J. Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al

final del men contextual la opcin Propiedades de la pgina. Se abrir el cuadro de dilogo siguiente:

Las propiedades estn organizadas en categoras. En la categora Aspecto, como ves en la imagen anterior, encontramos las propiedades: Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que segn los colores de la imagen ser necesario establecer unos u otros colores para el texto, as como que no es conveniente tener un gif animado como fondo. Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrar en el caso de no haber establecido ninguna imagen de fondo. Tamao: permite definir el tamao de la letra. Color del texto: es el color de la fuente. Mrgenes: permiten establecer mrgenes en el documento. Los mrgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de margen solo funcionan para Netscape Navigator. Ninguno de estos mrgenes aparece en la ventana de documento de Dreamweaver, solo se mostrarn en los navegadores.

En la categora Ttulo/Codificacin encontramos la propiedad: Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana de documento de Dreamweaver.

En la categora Vnculos encontramos las propiedades:

Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y los vnculos que sirven de enlace a otras pginas. Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculos ya han sido visitados o no. Vnculos activos: es el color de los vnculos activos.

Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado. En la categora Imagen de rastreo encontramos las propiedades: Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se mostrar en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla grfica sobre la que crear el documento. Transparencia: permite establecer la opacidad de la imagen de rastreo.

Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el navegador. Para ver cmo comprobar el tamao de los documentos, pulsa aqu .

Los colores
Para asignar colores es posible desplegar una paleta de colores como sta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior. Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. stos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh. Tambin es posible personalizar los colores a travs del botn de la parte superior de la paleta.

Los colores pueden asignarse a travs de los botones:

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la pgina, que tienes ms arriba. El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , lo que hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el nmero hexadecimal del color en el recuadro blanco. Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con valor #3399FF, el botn quedara del siguiente modo: .

Para practicar puedes realizar el Ejercicio paso a paso Crear nuevo documento y modificar sus propiedades. Ejercicios del Tema 3. Prueba evaluativa del Tema 3.

Ejercicio paso a paso. Unidad 3. Crear nuevo documento y modificar sus propiedades
Objetivo.
Practicar las operaciones que hay que realizar para crear un nuevo documento html y configurar las propiedades de la pgina.

1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.

2 Abre el men Archivo y elige la opcin Nuevo, o bien haz clic sobre el botn la barra de herramientas. 3 Selecciona la pestaa General de la nueva ventana. 4 Selecciona Pgina bsica en Categora. 5 Selecciona HTML en Pgina bsica:. 6 Haz clic sobre el botn Crear.

de

7 A partir de este momento vamos a realizar todos los ejercicios en la vista diseo. Haz clic sobre el botn Mostrar vista de diseo .

8 Haz clic con el botn derecho del ratn sobre el documento en blanco, para abrir su men contextual. 9 Elige la opcin Propiedades de la pgina en el men contextual. 10 En Ttulo escribe Cocina. 11 En Fondo: escribe #CCCC99. 12 En Vnculos: escribe #CC6600. 13 En Vnculos visitados: escribe #CC9933. 14 En Vnculos activos: escribe #CC9966. 15 Haz clic sobre el botn Aceptar.

16 Haz clic sobre el botn Guardar de la barra de herramientas. Guarda el documento con el nombre menu.htm, dentro de la carpeta cocina del ejercicio anterior.

Ejercicios Unidad 3. Crear sitio local y modificar las propiedades de la pgina


En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es importante que realices los ejercicios por orden, sin saltarte ninguno . Estos ejercicios estn diseados para ir construyendo una pgina web completa y si intentas realizar un ejercicio sin haber hecho los anteriores puede que no veas un resultado muy coherente. Si no has realizado an el primer ejercicio paso a paso, copia en la carpeta Mis documentos la carpeta ejerciciosdream, que se encuentra dentro de la carpeta ejercicios del curso. Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin. A partir de este momento vamos a realizar todos los ejercicios en la vista Diseo, a no ser que se indique lo contrario. Haz clic sobre el botn Mostrar vista de diseo .

Ejercicio 1: Deportes
1 Crear un sitio local con el nombre Deportes, cuya carpeta raz sea la carpeta deportes, que se encuentra dentro de la carpeta ejerciciosdream. 2 Abrir el documento menu.htm. 3 Modificar sus propiedades para que el color de los vnculos, sea cual sea su estado, sea #000000 y nunca se encuentren subrayados. 4 Asgnale el color de fondo #738099 y la imagen fondo5.gif que se encuentra en la carpeta imagenes del sitio aparezca como fondo sin repeticin. 5 Haz que la fuente del documento sea Verdana 18px Negrita. 6 Abre los archivos donde.htm, instalaciones.htm, quienes.htm y reservas.htm. 7 Establece el color de fondo como #999999, selecciona la imagen fondo.gif de la carpeta imagenes del sitio como fondo y que se repita sobre el eje de las x. 8 Haz que la fuente de estos documentos sea Arial. 9 Abrir el documento marcos.htm y darle el ttulo Tu Tienda de Deportes. 10 Guardar todos los cambios y cerrar los documentos. A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la que aparece si pulsas aqu.

Ejercicio 2: Animales.
1 Crear un sitio local con el nombre Animales, cuya carpeta raz sea la carpeta animales, que se encuentra dentro de la carpeta ejerciciosdream. 2 Abrir el documento consultas.htm y modificar sus propiedades, para que su ttulo sea Consultas. 3 Abrir el documento gatos.htm y modificar sus propiedades, para que su ttulo sea Gatos. 4 Abrir el documento perros.htm y modificar sus propiedades, para que su ttulo sea Perros. 5 Abrir el documento inicio.htm y modificar sus propiedades, para que su ttulo sea Inicio. 6 Guardar los cambios y cerrar los documentos. A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la que aparece si pulsas aqu.

Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.

Ayuda Ejercicios Unidad 3. Crear sitio local y modificar las propiedades de la pgina
Ejercicio 1: Deportes
Apartado 1 Para crear un sitio nuevo es necesario elegir la opcin Administrar sitios... en el men Sitio. En la nueva ventana, seleccionar el botn Nuevo... En la nueva ventana, en la pestaa Avanzadas, hay que elegir la categora Datos locales. En Nombre del sitio hay que escribir Deportes. En Carpeta raz local hay que seleccionar la carpeta deportes, que se encuentra dentro de la carpeta ejerciciosdream. Podemos seleccionar la carpeta imagenes, que se encuentra dentro de la carpeta deportes, como Carpeta predeterminada de imgenes. Por ltimo, hay que hacer clic sobre el botn Aceptar. Apartado 2 Para abrir el documento menu.htm puedes hacer doble clic sobre l en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos y seleccionar el sitio en el men desplegable que aparece. Apartado 3 Una vez abierto el documento en Dreamweaver, elige a la opcin Propiedades de la pgina del men Modificar. En la nueva ventana haz clic en la categora Vnculos, y en los campos que aparecern a la derecha modifica Color de vnculo, Vnculos visitados, Vnculos de sustitucin y Vnculos activos y dales el valor #000000, en el campo Estilo subrayado escoge Nunca subrayar. Apartado 4 Selecciona la categora Aspecto y modifica los campos a los siguientes valores, Color de fondo: #738099; Imagen de fondo: imagenes/fondo5.gif; Repetir: no repetir. Apartado 5 Modifica tambin los campos Fuente de pgina: Verdana, Arial, Helvetica, sans-serif; Tamao: 18 y pulsa el botn Negrita Por ltimo, pulsa el botn Aceptar. Apartado 6 Para abrir los documentos donde.htm, instalaciones.htm, quienes.htm y reservas.htm puedes hacer doble clic sobre ellos en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos y seleccionar el sitio en el men desplegable que aparece. Apartado 7 Una vez abierto los documentos en Dreamweaver, elige a la opcin Propiedades de la pgina del men Modificar para cada uno de ellos y modifica los siguientes campos en la catagora Aspecto. Color de fondo: #999999 Imagen de fondo: imagenes/fondo.gif

Repetir: repetir x Apartado 8 Selecciona Arial, Helvetica, sans-serif en el campo Fuente de pgina. Por ltimo, pulsa el botn Aceptar. Apartado 9 Para abrir el documento marcos.htm puedes hacer doble clic sobre l en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos y seleccionar el sitio en el men desplegable que aparece. Escribe Tu Tienda de Deportes en el campo Ttulo de la barra de herramientas de documento. Apartado 10 Para cada uno de los archivos abiertos hacer clic sobre el botn Guardar , y despus sobre el botn Cerrar . El botn de cerrar cambia dependiendo del diseo de vista de la pgina, si es como fichas o como ventanas flotantes.

Ejercicio 2: Animales
Apartado 1 Para crear un sitio nuevo es necesario elegir la opcin Administrar sitios... en el men Sitio. En la nueva ventana, seleccionar el botn Nuevo... En la nueva ventana, en la pestaa Avanzadas, hay que elegir la categora Datos locales. En Nombre del sitio hay que escribir Animales. En Carpeta raz local hay que seleccionar la carpeta animales, que se encuentra dentro de la carpeta ejerciciosdream. Podemos seleccionar la carpeta imagenes, que se encuentra dentro de la carpeta animales, como Carpeta predeterminada de imgenes. Por ltimo, hay que hacer clic sobre el botn Aceptar. Apartado 2 Para abrir el documento consultas.htm puedes hacer doble clic sobre l, en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos. Escribe Consultas en el campo Ttulo de la barra de herramientas de documento. Apartado 3 Para abrir el documento gatos.htm puedes hacer doble clic sobre l, en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos. Escribe Gatos en el campo Ttulo de la barra de herramientas de documento. Apartado 4 Para abrir el documento perros.htm puedes hacer doble clic sobre l, en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos. Escribe Perros en el campo Ttulo de la barra de herramientas de documento.

Apartado 5 Para abrir el documento inicio.htm puedes hacer doble clic sobre l, en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos. Escribe Inicio en el campo Ttulo de la barra de herramientas de documento. Apartado 6 En todos los documentos, hacer clic sobre el botn Guardar despus sobre el botn Cerrar . , y

Unidad 4. El texto
Caractersticas del texto Listas Caracteres especiales Estilos CSS. Introduccin Crear un estilo personalizado El Panel CSS Crear un nuevo estilo Gestionar estilos CSS Aplicar un estilo Hojas de Estilos

También podría gustarte