dw_cs4

8/3/2019 DW_CS4

1/113

Gua de aprendizajeDreamweaver CS4Autor: Carlos Casado Martnez

Coordinacin: Csar Pablo Crcoles Briongos
http://mosaic.uoc.edu/http://uoc.edu/

8/3/2019 DW_CS4

2/113

ndice de tutoriales

1. Crear una pgina web para alquilar un apartamento

2. Mejorando la presentacin

3. Crear un sitio

4. Aadir fotografas y enlaces a lugares de inters

5. Catlogo de apartamentos

6. Temporadas y precios

7. Crear una pgina de contacto

Gua de aprendizaje

Dreamweaver CS4

0. Introduccin

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

3/113

Gua de aprendizaje

Dreamweaver CS4

Introduccin

Adobe Dreamweaver es una potente aplicacin de creacin y edicin de pginas web. Suinterfaz permite trabajar tanto con una visin WYSIWYG (vista de diseo) como editardirectamente el cdigo HTML (vista de cdigo) y facilita su uso tanto a personas que no tienenconocimientos de HTML como a expertos diseadores web.

En esta gua vamos a ver cmo se realiza una pgina web; empezaremos desde el principio yaadiremos poco a poco diferentes elementos. Usaremos Dreamweaver como un editorcompleto, aprovechando sus opciones de edicin, aunque dejaremos de lado algunaspotentes herramientas que incorpora, como la de gestin de bases de datos. Veremos cmo, apesar de que el editor WYSIWYG es muy potente, nos ir bien usar la vista de cdigo paraalgunas opciones. Tambin veremos cmo usar CSS en nuestras pginas sin necesidad derecordar los nombres de los diferentes atributos que podemos modificar.

Dreamweaver nos ayudar a crear pginas web vlidas y accesibles. Adems, desde la vistade diseo podremos disponer capas, aplicar estilos, cambiar propiedades, Sin embargo, enmuchos casos ser necesario revisar lo que hagamos desde la vista de cdigo (no todo sepuede hacer desde la vista de diseo!).

A pesar de que esta es una gua de Dreamweaver (o precisamente por ello) vamos a incidirmucho en la necesidad de validar el cdigo y en que las pginas sean accesibles. A lo largode esta gua usaremos a menudo las herramientas que Dreamweaver pone a nuestradisposicin para esta labor.

INTRODUCCIN

OBJETIVOS

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

4/113

Gua de aprendizaje

Dreamweaver CS4

Introduccin

Para avanzar por la gua vamos a crear un sitio web sencillo: empezaremos por una pginapara alquilar un apartamento en un lugar de veraneo y acabaremos con todo un sitio pensadopara alquilar varios apartamentos. Daremos todos los pasos necesarios para, empezandodesde cero, crear toda la web usando los diferentes recursos que nos permiten utilizarXHTML y CSS

Como codificacin, usaremos XHTML 1.0 Transitional.

Esta gua presupone que el usuario tiene buenos conocimientos de estndares web. Es undetalle importante, pues aqu no se explicarn, y, en algunos casos, podra quedar coja laexplicacin si no se tienen los conocimientos necesarios.

INTRODUCCIN

OBJETIVOS

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

5/113

Gua de aprendizaje

Dreamweaver CS4

Crditos

Grado y Mster en Multimedia (GMMD)

http://multimedia.uoc.edu/guias

Coordinacin

Csar Pablo Crcoles Briongos

Autora

Carlos Casado Martnez

Fecha de publicacin

13.09.2009

PID_00147023

Estudios de Informtica,

Multimedia y Telecomunicacin

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

6/113

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Tutorial 1. Crear una pgina web para alquilar un apartamento

Desarrollo del tutorial: paso 1 de 17

Vamos a crear una sencilla pgina web con un poco de textoy algunas imgenes, pensada para alquilar un apartamentoen Menorca. Es un primer ejercicio donde veremos cmoempezar a usar Dreamweaver. Normalmente, no haremoswebs de una sola pgina, pero ahora nos servir parafamiliarizarnos con el entorno y empezar a ver cmo se usa

el programa.

Una vez abrimos Dreamweaver, en la barra de ttulo y a laizquierda de la caja de bsqueda, encontramos undesplegable que nos permitir seleccionar un estilo deespacio de trabajo predeterminado.

Para seguir esta gua, lo ms til ser seleccionar la vista deDiseador, que nos muestra una barra lateral, con los estilosy los archivos del sitio, y una inferior, con las propiedades delelemento que tenemos seleccionado.

Gua de aprendizaje

Dreamweaver CS4

8/3/2019 DW_CS4

7/113



Vamos a crear un nuevo documento donde haremos nuestra primerapgina. Para ello, en el men seleccionamos Archivo - Nuevo y en

la ventana que aparece seleccionamos HTML.

Tambin podemos hacer clic en Crear nuevo HTML de la ventana depresentacin de Dreamweaver.

Por defecto, Dreamweaver presenta la vista de diseo, con lo que se nospresentar una pantalla en blanco. Sin embargo, es interesante ver quha puesto Dreamweaver en esta pgina inicial.

Gua de Aprendizaje

Dreamweaver CS4

Para ello seleccionaremos la vistade Cdigo y veremos lo que

aparece en la imagen de laderecha.

En total, Dreamweaver ha escritonueve lneas de cdigo (nteseque hay una partida en dos).

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

8/113



A pesar de que ya deberamos saber qu significa lo que aparece en la vista de cdigo, conviene repasarlo brevemente.

Gua de aprendizaje

Dreamweaver CS4

Interactivo

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

9/113



Una vez hemos creado el nuevo documento, podemos configurar unos parmetros queafectarn al conjunto de la pgina. Esos parmetros los podemos modificar en el menModificar-Propiedades de la pgina.

Las cuatro categoras iniciales nos permiten modificar el aspecto general de la pgina.Como especificaremos el diseo de la pgina desde un archivo CSS, nos saltamosesas categoras para centrarnos en la de Ttulo-Codificacin.

Gua de aprendizaje

Dreamweaver CS4

Fijmonos en las diferentes opciones:

Ttulo: Es el texto que aparece en lapestaa donde est abierta la pgina.

DTD: Indica qu versin del lenguaje deetiquetado usaremos. Dreamweaverselecciona por defecto XHTML 1.0transicional, que como hemos dicho ya nos

ir bien. Podra interesarnos, tambin,HTML 4.01 o, en un futuro, HTML5. Seacual sea la versin que queramos usar,este es el lugar para indicarlo.

Codificacin: Indica de qu manera secodifican los caracteres. UTF-8 suele seruna buena opcin porque permite lacodificacin de cualquier carcter. Sinembargo, dependiendo del servidor, podraser necesario usar la codificacin Europeooccidental (ISO-8859-1).

Finalmente, en la categora Imagen derastreopodemos seleccionar una imagen,que se pondra como fondo, para que nossirva de muestra a la hora de montarnuestra pgina. Esa imagen no aparecercuando publiquemos la pgina.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

10/113



Hay un paso queDreamweaver no hace deforma automtica pero esimprescindible: indicar elidioma principal de nuestrapgina web. Debemos hacerloen la vista de cdigo y ponerloen la etiqueta .

Afortunadamente,Dreamweaver nos ayuda ahacerlo.

Gua de aprendizaje

Dreamweaver CS4

Interactivo

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

11/113



Vamos a acabar la preparacin de nuestra pginaponindole el ttulo a la misma. Esto lo podemos realizar entres sitios diferentes:

Directamente en el cdigo, modificando el textoDocumento sin ttulo. Vimos cmo acceder al cdigo de lapgina en un paso anterior.

En el men, en Modificar-Propiedades de la pgina, en lacategora Ttulo-Codificacintenemos un campo llamadoTtulodonde podemos modificar ese dato.

Finalmente, en la barra de herramientas que aparece bajoel men, tenemos tambin un cuadro de texto dondepodemos modificar el ttulo de nuestra pgina. Vamos ahacerlo aqu; vamos a poner Alquiler de apartamento enMenorca.

Gua de aprendizaje

Dreamweaver CS4

Ahora ya estamos a punto de poder incluir contenido ennuestra pgina. Nos queda tan solo grabar la pgina con elnombre index.html.

Por qu index.html? index.htmles el archivo que la mayorade servidores carga por defecto cuando se accede a un sitioweb.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

12/113



Ha llegado el momento de empezar a aadir contenido anuestra pgina. Vamos a escribir un breve texto con lasiguiente estructura:

Ttulo principal: Alquiler de apartamento en MenorcaSubttulo: UbicacinSubttulo: Caractersticas

Adems, bajo cada uno de los subttulos pondremos un

prrafo explicativo.

Gua de aprendizaje

Dreamweaver CS4

En Ubicacin: En Cala'n Bosch, a 100 metros de la playade Son Xoriguer. Conjunto de apartamentos en bloques de 2pisos de altura (planta baja ms piso), con zona comunitariacon piscina.

En Caractersticas: Apartamento en primer piso de 65metros cuadrados totalmente equipado. Un cuarto de baocompleto, cocina americana equipada con horno,microondas, nevera y lavavajillas. Tres habitaciones, una de

matrimonio y dos dobles.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

13/113



En Dreamweaver introduciremostexto como si estuvisemostrabajando con un procesador detextos.

En la parte inferior de la pantallatendremos la barra deherramientas de propiedadesque nos facilitar la entrada de

texto.

Gua de aprendizaje

Dreamweaver CS4

Interactivo

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

14/113



Antes de continuar, guardaremos de nuevo. Veamos cmo ha quedado el cdigo (ser necesario hacer clic en el botn Cdigo):

Gua de aprendizaje

Dreamweaver CS4

Aqu podemos ver cmo el Encabezado 1 se corresponde con la etiqueta , y el Encabezado 2 con la etiqueta . Adems, aunque nolo habamos especificado, todo el texto que no es encabezado ha quedado marcado dentro de etiquetas

.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

15/113



Ahora que hemos escrito el texto, vamos a marcar aquellaspalabras que sean ms relevantes. Vamos a usar dosetiquetas, y , que, por defecto, en pantallaaparecern con negrita y cursiva respectivamente, pero cuyosignificado vendra a ser resaltado y enfatizado.

Gua de aprendizaje

Dreamweaver CS4

En el primer prrafo seleccionamos playa de Son Xoriguer

y en la barra de propiedades apretamos el botn b (de bold,negrita).

En la pantalla (en la vista de diseo) veremos esto:

Y si seleccionamos la vista de cdigo, lo que veremos seresto:

A pesar de la utilizacin de la inicial b como indicador de y de que la presentacin en pantalla de esta etiqueta es un texto ennegrita, esto no es obligatorio; lo importante es la carga semntica de la etiqueta.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

16/113



Hacemos lo mismo con laetiqueta .

Gua de aprendizaje

Dreamweaver CS4

Interactivo

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

17/113



Dreamweaver nos indica al piede la ventana lascaractersticas del contenidosobre el que se encuentra elcursor.

En la vista de diseo, puedeser muy til ver qu etiquetasse encuentran activas en un

punto dado.

Gua de aprendizaje

Dreamweaver CS4

Interactivo

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

18/113



Tenemos en la pgina doscontenidos diferenciados: laubicacin y las caractersticas.

Vamos a separarlos usando laetiqueta .

Para que la diferencia sea clara, acada uno de ellos le asignaremos unidentificador, ubicaciona uno ycaracteristicasal otro (la falta de losacentos es intencionada).

El resultado es ste (vista cdigo):

Gua de aprendizaje

Dreamweaver CS4INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

19/113



Y ste en vista de diseo:

Gua de aprendizaje

Dreamweaver CS4

Es interesante ver cmo Dreamweaver marca con una lnea discontinua la situacin de las capas (etiqueta ).

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

20/113



Ahora estamos en condicionesde ver nuestra pgina en unnavegador.

En la pestaa donde aparece elnombre del archivo, podemosver que tiene un asterisco a suderecha.

Gua de aprendizaje

Dreamweaver CS4

Guardamos (+s) ypulsamos la tecla F12. Al haceresto, se abrir nuestro navegadorprincipal y mostrar la pgina.

El asterisco en el nombre delarchivo indica que el archivo hasido modificado desde la ltima

vez que se guard.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

21/113



Como hemos visto en elpaso anterior, en este casoel navegadorpredeterminado es Firefox.Con Dreamweaverpodemos definir dosnavegadores para ver una

presentacin preliminar denuestras pginas. Elprincipal es accesible conF12, y el secundario, conCTRL+F12.

Podemos definir qunavegadores queremosusar para la presentacinpreliminar en el men,EdicinPreferencias,

categora Vista previa en elnavegador.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

22/113



Para asentar los conceptos desarrollados en este tutorial, serecomienda hacer la siguiente actividad.

Gua de Aprendizaje

Dreamweaver CS4

Cread una nueva pgina web, cuyo ttulo ser Crear ymantener una pgina web, que tendr el siguiente texto:

Introduccin

A mediados de los aos 90, para crear una pgina web necesitbamos tener algunos conocimientos deHTML, un espacio donde alojarla, un cliente ftp y mucho tiempo para mantenerla. Y, sin embargo,GeoCities, un servicio gratuito de alojamiento, albergaba innumerables webs. Muchas personastenan cuestiones que explicar y GeoCities ofreca un espacio donde hacerlo.

Creando una web sencilla

As, cuando la pgina no pretende ms que ofrecer una informacin puntual que no debe cambiar, puedeser interesante usar opciones sencillas, y a priori menos costosas que los sistemas de gestin de

contenidos.

Debis usar encabezados (h1 y h2), negrita, cursiva y prrafos.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

23/113

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Tutorial 2. Mejorando la presentacin


Nuestra pgina no tiene un granaspecto. Las caractersticas pordefecto de HTML no son muyvistosas, por lo que, seguramente,nos convendr cambiarlas.

Para mejorar la presentacinusaremos CSS. Podemos hacerlode tres maneras diferentes:

directamente sobre un elementodeterminado (estilo en lnea), definiendo reglas CSS en lapgina que estamos editando, definiendo las reglas CSS en unarchivo aparte.

Para empezar vamos a ver laopcin menos recomendable: ladefinicin de un estilo en lnea.

En este ejemplo, hemos puesto untexto de color rojo y en negrita.Qu diferencia hay entre estanegrita y la que usamos en eltutorial anterior?

Gua de aprendizaje

Dreamweaver CS4

Interactivo

8/3/2019 DW_CS4

24/113



Hemos visto cmo crear un estilo en lnea, pero tambinhemos comentado que es la peor opcin posible. Por qu?Porque si necesitamos hacer cambios en la pginatendremos que revisar todas las pginas de nuestro sitiobuscando los estilos en lnea.

En el paso anterior hemos seleccionado un estilo en lnea.En el siguiente paso veremos la opcin habitualmente msrecomendable: guardar los estilos en un archivo CSS.

Existe un paso intermedio que nos puede ser til cuandoestamos haciendo una sola pgina: Crear los estilos en lapgina. En Dreamweaver, al crear una nueva regla CSS, senos pregunta dnde se va a definir la regla (en la parteinferior del cuadro de dilogo). Tal como est seleccionadoen la imagen de la derecha, la regla se creara en eldocumento HTML. En el siguiente paso veremos que,seleccionando Nuevo archivo de hoja de estilos, las reglasCSS se guardan en un archivo aparte, con extensin .css.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

25/113



Tal y como hemos visto en el pasoanterior, la mejor opcin paratrabajar con estilos es guardar unconjunto de reglas CSS en unarchivo externo que nos servir paratodas las pginas de nuestro sitio.De esta manera, si necesitamosrealizar algn cambio, basta conmodificar el archivo de las reglas

CSS (o archivo CSS) paratransformar todas nuestras pginas.

Vamos a eliminar el estilo en lneaque habamos creado en el paso 1 ya crear un archivo CSS dondeguardar una regla que nos permitaponer un texto en rojo y negrita.

Gua de aprendizaje

Dreamweaver CS4

Interactivo

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

26/113



Vamos a cambiar ahora los estilos de los diferenteselementos de la pgina para mejorar su presentacin.Teniendo en pantalla la vista de diseo de nuestrapgina web, pulsamos +F11 para visualizar labarra de Estilos CSS, seleccionamos Todopara ver losestilos que tenemos definidos.

Gua de aprendizaje

Dreamweaver CS4

Para crear un nuevo estilo, hacemos clic con el botnderecho del ratn en la barra de herramientas deEstilos CSSy seleccionamos Nuevo. Nos aparecer elcuadro de dilogo de nueva regla CSS, y allseleccionaremos crear una regla para una etiqueta,que ser , que se definir en el archivoestilos.css.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

27/113



En la etiqueta vamos a definir las caractersticasgenerales del texto, el tipo de letra, y el tamao y color quetendr por defecto, y el color del fondo:

En la categora Tiposeleccionamos la Font-familyqueser Verdana, Geneva, sans-serify el color #333.

En la categora Fondocambiamos el Background-colora#D6E1E2.

Aceptamos, y el archivo estilos.cssse actualizarautomticamente (y aparecer un asterisco junto a sunombre, puesto que estar pendiente de ser guardado). Simiramos qu hay en ese archivo, veremos lo siguiente:

Gua de aprendizaje

Dreamweaver CS4

Si con F12 hacemos una vista previa en nuestro navegador, podremos apreciarlas diferencia con lo que tenamos antes. El texto resaltado no ha cambiado, a

pesar de que la manera de indicarle el estilo ha variado considerablemente. Porotra parte, al haber cambiado las caractersticas del texto en la etiqueta ,todo el texto de la pgina ha cambiado, modificndose el color (aunque al ser ungris oscuro apenas se aprecia) y la tipografa (antes era una tipografa tipo serif yahora es sin serif).

Un detalle a tener en cuenta: en la captura de pantalla que hay sobre estaslneas, puede dar la sensacin de que vara el color del texto entre los ttulos y losprrafos, pero no es as. El cambio se debe al grosor del texto, ya que el color esel mismo para todo el texto (menos para el resaltado!). Se puede comprobarcambiando el color del texto a azul, por ejemplo.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

28/113



Ahora vamos a mejorar la presentacin de los encabezados1 y 2 ( y ).

Nos situamos en el archivo index.html(ojo!, siDreamweaver nos est mostrando el archivo estilos.css, nopodremos crear una nueva regla, por lo que es necesarioque estemos visualizando nuestra pgina web).

Hacemos clic en con el botn derecho del ratn en la barra

de herramientas de Estilos CSSy seleccionamos Nuevo. Acontinuacin seleccionamos la etiqueta, y estilos.css

En la categora Tipo, en font-size, ponemos 1.8 em:

Gua de aprendizaje

Dreamweaver CS4

Para el encabezado h2 hacemos algo similar, poniendo eltamao a 1.2 em.

Si miramos el archivo estilos.css aparecern las nuevasreglas:

Cuando tenemos abierto un archivo HTML Dreamweavermuestra todos los archivos CSS asociados. Podemos verloen la parte superior derecha de la ventana de cdigo:

Adems, si seleccionamos estilos.css y Dividirpodemos veren la parte superior las reglas css y en la parte inferior lapresentacin preliminar de la pgina.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

29/113



Nuestra pgina web tiene ahora este aspecto:

Gua de aprendizaje

Dreamweaver CS4

Ha mejorado considerablemente, pero an ser difcil que atraigaa nadie: ocupa toda la ventana, con lo que en pantallas grandesno quedar bien; adems, le falta algn dato importante (comouna manera de contactar) y algunas fotos

Vamos a empezar por determinar un tamao para el contenidopara que no ocupe la totalidad de la pantalla y mejorar as lapresentacin de nuestra pgina.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

30/113



Para determinar un tamao para la presentacin de nuestro

texto y centrarlo en pantalla, lo primero que debemos hacer

es crear una capa que contenga todo nuestro contenido.

Lo ms rpido ser hacerlo en vista de diseo:

Seleccionamos todo el contenido.

En la barra de la derecha hacemos doble clic en el ttulo

de la barra Insertar.

Seleccionamos Insertar etiqueta Div.

En el cuadro de dilogo Insertar etiqueta Div

seleccionamos Ajustar alrededor de la selecciny lo

ponemos como ID contenedor.

A continuacin, hacemos clic sobre el botn Nueva regla

CSSy en la categora Cuadromodificamos los ajustes

segn la imagen de la derecha (Width800px, Margin 0px

en Topy Bottom, y auto en Righty Left)

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

31/113



Pulsar F12 (despus de haber guardado el archivo CSS) nos

mostrar cmo queda el documento.

Gua de Aprendizaje

Dreamweaver CS4

Vamos a mejorar un poco el aspecto cambiando el fondo de

la ventana, aadiendo una imagen de fondo. Para ello

seleccionamos la etiqueta en la barra de CSS y, con

el botn derecho del ratn, seleccionamos Edicin...

En el cuadro de dilogo seleccionamos la categora Fondoy,

tras hacer clic en el botn Examinar, seleccionamos la

imagen llamada fondo.png, que habremos guardado en una

carpeta a la que llamaremos img.

Guardamos el archivo CSS y con F12 podemos ver cmo

queda ahora el documento.

Pero con ese fondo el texto no queda suficientemente

legible. Vamos a cambiar el fondo del contenedor para que

tenga un color plano y facilite la lectura.

Para hacerlo, cambiamos la regla CSS del identificador

#contenedor de manera que tenga como color de fondo el

#EEE

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

32/113



Hemos ganado en legibilidad, pero el

texto queda demasiado pegado al borde

de la capa. Vamos a aadirle un padding

para modificar los mrgenes interiores.

Gua de aprendizaje

Dreamweaver CS4

Una vez mejorado el fondo, deberamosaadir alguna imagen que facilite al

visitante hacerse una idea de cmo es el

apartamento.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

33/113



Vamos a aadir la primera foto,una fotografa de la zonacomunitaria con piscina.

El primer paso es guardar en lacarpeta img la imagen con eltamao que vayamos a usar.

Para este tutorial, esta primera

imagen la hemos guardado a300x225 pxeles.

Para poner la imagen en lapgina web iremos al men,Insertar-Imagen.

Veamos cmo hacerlo.

Gua de aprendizaje

Dreamweaver CS4

Interactivo

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

34/113



Ya hemos puesto la foto, pero no queda en

un sitio demasiado adecuado. La situaremos

al final del documento, despus de los textos.

Para hacerlo, aunque podemos arrastrar la

imagen con el ratn en la vista de diseo,

vamos a seleccionar la vista de cdigo y a

cortar y copiar la etiqueta , de manera

que la pondremos justo antes del ltimo

.

Gua de aprendizaje

Dreamweaver CS4

A continuacin aadimos una nueva foto, en este caso del

interior del apartamento. La ubicaremos justo a continuacin

de la otra.

Ahora las imgenes aparecen una al lado de la otra despus del texto y a la

izquierda.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

G

8/3/2019 DW_CS4

35/113



As se ve ahora nuestra pgina web.

Gua de aprendizaje

Dreamweaver CS4

Vamos a poner la imagen del apartamento alineado a la

derecha para que quede cada imagen a un lado de la

pgina. Para hacerlo, pondremos un identificador a la

imagen de la derecha.

Para poner el identificador podemos hacerlo en la vista de

cdigo o en la vista de diseo.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

G d di j

8/3/2019 DW_CS4

36/113



Gua de aprendizaje

Dreamweaver CS4

Ahora creamos un nuevo CSS para el identificador fotoInt

Y en la categora Cuadroponemos en Floatla opcin Right

Una vez guardado todo (ser necesario guardar tanto el

archivo HTML como el CSS) actualizamos el navegador y

comprobamos que ambas imgenes quedan cada una a

cada lado del contenedor respectivamente.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

G d di j

8/3/2019 DW_CS4

37/113



Gua de aprendizaje

Dreamweaver CS4

Nos queda una cosa por hacer: poner los datos de contacto. Vamos a indicar un telfono y una direccin de correo electrnico al pie de la

pgina.

Para ello, crearemos una nueva capa, a la que llamaremos contacto, dentro del contenedor y debajo de las imgenes. Y en esa capa ser

donde, en un prrafo, pondremos la informacin de contacto.

Pero el resultado no es demasiado vistoso:

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

G d di j

8/3/2019 DW_CS4

38/113



Gua de aprendizaje

Dreamweaver CS4

Vamos a sacar la informacin del contenedor para

darle ms relevancia. Adems, cambiaremos el color

de fondo y del texto y tambin alguna de las

caractersticas del texto. Vamos a hacerlo por pasos.

En primer lugar sacaremos la capa contacto del

contenedor:

Despus crearemos un nuevo estilo de ID para la capa

contacto, donde haremos los cambios que afectarn a la

forma de presentar esa capa en la pgina.

En el cuadro de dilogo de Definicin de reglade Dreamweaver, haremos los

siguientes cambios:

En la categora Tipo, en Font-weight, pondremos bold.

En esa misma categora, en Color, pondremos #FFF.

En la categora Fondo, en Background-color, pondremos #009.

En la categora Cuadro, en Margin, pondremos, en Topy Bottom, un 0 y en

Righty Left, pondremos auto. En Padding, pondremos, en Topy Bottom, un 0 y

en Righty Left, 20 px.

En esta misma categora, en Width, pondremos 800 px y en Height, 20 px.

En el archivo .cssdebera quedarnos algo similar a esto:

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

G d di j

8/3/2019 DW_CS4

39/113



Gua de aprendizaje

Dreamweaver CS4

As es como queda nuestra pgina. No es ninguna maravilla, pero, a fin de cuentas, tan slo estamos empezando!

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de Aprendizaje INICIO | CRDITOS

8/3/2019 DW_CS4

40/113



Gua de Aprendizaje

Dreamweaver CS4

Para asentar los conceptos desarrollados en este tutorial, serecomienda realizar las siguientes actividades.

Utilizando reglas CSS : Haced que el ttulo (h1) sea de color azul y los subttulos (h2), de color verde.

Remarcad (usando la negrita) el texto Calan Bosh. Haced que el texto playa de Son Xoriguer sea de color azul oscuro (adems de mantener el remarcado). Qu ms hay que hacer, adems de crear una nueva regla CSS? Cmo se debe incluir el remarcado?

Eliminando la etiqueta y poniendo negrita con CSS. Tal y como est ahora, con la etiqueta .

Utilizando la clase resaltado, resaltad el texto tres habitaciones. Cread una nueva regla CSS que aada una lnea discontinua de color azul alrededor de las imgenes.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

INICIO | CRDITOSGua de aprendizaje

8/3/2019 DW_CS4

41/113

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Tutorial 3. Crear un sitio


Nuestra sencilla pgina web ha llamado la atencin de otropropietario de un apartamento situado en el mismo lugar queel nuestro, y, tras proponerlo a la comunidad de vecinos,hemos decido hacer una pgina web desde donde sepuedan alquilar todos los apartamentos disponibles ennuestra comunidad.

Ya no nos sirve el esquema que tenamos de una solapgina: necesitaremos una estructura que nos permita tener

varias pginas enlazadas con un men.

Aunque tenemos una parte de la pgina elaborada. Vamos aempezar desde el principio. Y el principio pasa por definir laestructura de la pgina web. Antes de comenzar conDreamweaver, deberamos tener claras dos cosas: qupginas vamos a tener y cmo vamos a disponer loselementos en las pginas.

Para el sitio que vamos a crear, confeccionaremos sietepginas:

1. Pgina de inicio (a la que se llega cuando se escribe elnombre del dominio)

2. Ubicacin (con un mapa de situacin)3. Caractersticas (caractersticas generales de los

apartamentos con fotos)4. Precios5. Disponibilidad6. Lugares de inters (enlaces a otros sitios de inters)7. Formulario de contacto

Gua de aprendizaje

Dreamweaver CS4

Una vez hemos definido qu pginas tendremos, podemosdefinir la estructura de nuestro sitio, que en nuestro casoser aproximadamente esta:

Tiene un men a la derecha que lleva a las diferentespginas, una cabecera y un pie.

Gua de aprendizaje INICIO | CRDITOS

8/3/2019 DW_CS4

42/113



El siguiente paso es crear unnuevo sitio. Al definir un nuevositio le indicamos a Dreamweaverdnde almacenaremos los

archivos de nuestro sitio web. Esimportante ser conscientes de queun sitio web no se limita a unarchivo HTML; son muchos losarchivos que almacenaremos(imgenes, ficheros HTML,ficheros de CSS) y esimportante que se encuentren bienordenados.

Para crear el sitio, en el men

seleccionamos la opcin Sitio,y all, Nuevo sitio

Gua de aprendizaje

Dreamweaver CS4

Interactivo

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

43/113



Una vez creado el nuevo sitio, en la parte inferior de la barrade la derecha tendremos la ventana de Archivos, dondepodremos ver los archivos de nuestro sitio.

Gua de aprendizaje

Dreamweaver CS4

Dependiendo de la cantidad de tipos de archivos quetengamos (y tambin de cuantos de ellos haya), deberemoscrear ms o menos directorios donde almacenarlos. Esimportante que tengamos nuestro sitio adecuadamenteordenado para que el mantenimiento sea sencillo. En nuestrocaso, dado que tendremos pocos archivos, vamos a crear unsolo subdirectorio, al que llamaremos imgy dondealmacenaremos las imgenes. El directorio lo crearemosdirectamente en la ventana de Archivos, haciendo clic con elbotn derecho del ratn y seleccionando Nueva carpeta.

Ha llegado el momento de organizar el espacio dondeguardaremos todos los archivos que formarn parte denuestro sitio. El sitio web que vamos a crear no serdemasiado complejo y slo tendr tres tipos de archivo:

archivos HTML (las pginas web propiamente dichas),

archivos CSS (los archivos donde guardaremos la partede diseo de nuestras pginas),

archivos de imagen (.jpg, .gifo .pngsern los tipos dearchivo de imagen que usaremos normalmente).

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

44/113



Como hemos visto, vamos a hacer cinco pginas

diferentes pero con una estructura comn. Para que el

trabajo sea ms fcil, crearemos una plantilla en

Dreamweaver. Las plantillas permiten definir elementos

comunes a todas las pginas, por lo que se limitan las

posibilidades de edicin tan solo a unas zonas

determinadas. De esta manera, una vez bien definida la

plantilla, la creacin de las pginas es ms sencilla.

Adems, cuando modifiquemos la plantilla,

Dreamweaver modificar todas las pginas que

hayamos hecho con ella y facilitar la modificacin

posterior de todo el sitio. En el tutorial 5 veremos cmo

acta Dreamweaver cuando modificamos la plantilla.

Para crear una plantilla, en la pantalla inicial de

Dreamweaver seleccionamos Archivoen el men y, a

continuacin, Nuevo. En la ventana que aparece, en la

pestaa Pgina en blanco(que es la que aparece por

defecto), seleccionaremos Plantilla HTML.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

45/113



Una vez creada la plantilla, vamos a poner en ella el contenido

comn a todas las pginas. Empezaremos por la estructura de

capas. Hemos visto en un paso anterior que tendremos una pgina

dividida en tres partes: encabezado, cuerpo y pie. Adems, el

cuerpo lo tendremos dividido en dos partes: contenido y men.

Finalmente, tal y como vimos en los tutoriales anteriores, para

centrar la pgina usaremos una capa que contendr todas las

dems.

Gua de aprendizaje

Dreamweaver CS4

Una vez creada la estructura, vamos a crear el archivo CSS que

site cada capa en su sitio.

Dreamweaver crea una nueva pgina y nos la presenta en

vista de cdigo.

Se destacan en verde los comentarios como

TemplateBeginEditableque utiliza Dreamweaver para indicar

qu partes del documento sern editables.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

46/113



Posiblemente, sta sea la parte ms complicada.

Dreamweaver no ofrece ninguna utilidad para situar

las capas de una forma fcil en la pantalla, as que

deberemos editar directamente el fichero CSS.

Primero debemos crear el archivo y asignarlo a

nuestra pgina (X)HTML. Para ello, haremos clic con

el botn derecho del ratn en la barra de estilos CSS

y seleccionaremos Nuevo...

Seleccionaremos Tipo de selector: ID, Nombre del

selector: contenedory Definicin de regla: (Nuevo

archivo de hoja de estilos).

Gua de aprendizaje

Dreamweaver CS4

Tras el clic en Aceptar, introduciremos el nombre

del archivo CSS (estilos) y se abrir el cuadro de

dilogo de Definicin de regla.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

47/113



Vamos a modificar los siguientes campos de la categora

Cuadro:

Gua de aprendizaje

Dreamweaver CS4

Dreamweaver nos avisa de que no hemos definido ninguna regin

editable. Aun as, aceptaremos, y nos pedir el nombre del archivo yuna descripcin.

Una vez definida la regla, vamos a guardar la plantilla.

Pulsamos +s y aparece una ventana de advertencia:Como podemos comprobar, Dreamweaver permite guardar diferentes

plantillas para un mismo sitio web. Adems, guarda una descripcin

junto con la plantilla para que sea ms fcil reusarla en un futuro.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

48/113



Vamos ahora a aadir las reglas CSS necesarias para

disponer de todas las capas en la pantalla. Como tenemos

claro lo que queremos hacer, vamos a editar directamente el

archivo CSS, en vez de usar la utilidad de edicin de

Dreamweaver.

Gua de aprendizaje

Dreamweaver CS4

Al seleccionar el archivo estilos.css, vemos lo que

Dreamweaver ha puesto en l al crear la nueva regla. Vamos

a simplificar la regla existente y a aadir el resto de reglas

necesarias. As, la regla contenedor la dejaremos as:

#contenedor {

width: 800px;

margin: 0 auto;

}

Y el resto de reglas sern las siguientes:

#cabecera {

width: 100%;height: 150px;

}

#cuerpo {

margin: 1em auto 0 auto;

clear:both;

padding-top: 1em;

overflow:auto;

}

#contenido{

width: 520px;

float:left;

padding: 1em 40px 0 20px;

}

#menu {

width:200px;

float:right;

padding-top: 1em;

}

#pie {

height:25px;

}

|

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

49/113



Si hacemos una previsualizacin de lo que hemos

hecho, veremos una pgina en blanco, ya que las

capas no contienen nada todava.

Completemos la plantilla. De momento tenemos la

estructura, pero hay ms partes de la plantilla que no

cambiarn, como los fondos, o la cabecera. Vamos aempezar por establecer un tipo de letra comn para

todo el sitio. Para ello, definimos una regla CSS para

el elemento bodyque indique la familia de fuentes

que usaremos: Verdana, Geneva, sans-serif.

Podemos hacerlo escribiendo la regla directamente

en el archivo CSS, o usando el editor de reglas de

Dreamweaver:

Gua de aprendizaje

Dreamweaver CS4

El siguiente paso consiste en crear la cabecera, que tambin

es comn para todas las pginas. Contendr una imagen y

dos textos. Como la imagen ser de adorno, la pondremos

en el CSS. El resultado ser ste:

|

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

50/113



Los dos textos de la cabecera los colocaremos en

sendos encabezados, h1 para Alquiler de apartamentos

en Menorca y h2 para Cala'n Bosh. Como estn en la

cabecera, los ponemos dentro de la capa

correspondiente.

Gua de aprendizaje

Dreamweaver CS4

Y ahora modificaremos sus caractersticas en el CSS. Primero aadimos el fondo a la capa.

O directamente en el archivo CSS.Desde Dreamweaver

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

51/113



Y despus, las caractersticas de los encabezados en CSS:

h1 {

padding-top:30px;

margin-left: 200px;

text-align:center;

font-size:1.5em;color:#006;

}

h2 {

margin-left: 200px;

text-align:center;

font-size:1.2em;

}

p j

Dreamweaver CS4

El margen izquierdo (margin-left) es para que los

encabezados no queden sobre la imagen de fondo.

Ahora guardamos la plantilla y el archivo CSS y pulsamos

F12 para visualizar la plantilla. El resultado es ste:

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

52/113



Pasemos ahora al pie de la pgina. Como vamos a

tener un formulario de contacto, el pie ser tan solo la

frase Apartamentos familiares en Menorca:

p j

Dreamweaver CS4

Modificamos las caractersticas de la capa.

Y como el texto queda demasiado pegado al

borde superior de la capa

modificamos tambin las caractersticas de la etiqueta

de la capa pie.

Si guardamos y previsualizamos veremos esto.

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

53/113



Otra parte del sitio prcticamente

idntica en todas las pginas ser

el men. El men consiste en una

lista no ordenada de tems

enlazados con las pginas

correspondientes. Vamos a hacer

el men desde la vista de diseo

de Dreamweaver. Antesdeberemos situar el cursor en la

capa men.

p j

Dreamweaver CS4

Falta menu.swf

Interactivo

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

54/113



Ahora, en Dreamweaver, en vista de diseo, deberamos

ver esto:

p j

Dreamweaver CS4

Y en vista de cdigo, el men ha quedado de la siguiente

manera:

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

55/113



Deberamos ahora mejorar el aspecto del men. Para ello aadiremos unas reglas en el archivo CSS.

#menu ul {

padding-left:1em;

}

#menu li {

list-style-type: none; /* Elimina las vietas */margin-bottom: 0.5em; /* Separa un elemento del men del siguiente

*/

font-weight:bold; /* Los elementos se ponen en negrita */

}

#menu a {

font-weight:normal; /* Pero si son enlaces no */

}

#menu a:link {

text-decoration:none; /* Elimina el subrallado de los enlaces */

color:#053685;

}#menu a:hover {

text-decoration:underline; /* Se lo aade cuando el ratn est

encima */

}

#menu a:visited {

color:#00CCFF;

text-decoration:none;

}

Dreamweaver CS4

Antes de aadir las

reglas, el men es as:

Despus de aadir las

reglas, el men queda

as:

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

56/113



Y para dar por acabada la plantilla, ahora deberamos

definir las zonas editables. Dreamweaver ya ha

marcado dos zonas editables.

Dreamweaver CS4

Deberamos aadir al menos otras dos: una para la capa de

contenido y otra para la capa del men. Para aadir zonas

editables, debemos, en vista de cdigo, situar el cursor all

donde queramos hacer la zona editable e ir al men y

seleccionar InsertarObjetos de plantillaRegin editable.

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

57/113



Nos pedir el nombre de esa regin editable.

Dreamweaver CS4

Y escribir en el cdigo el texto necesario para que esa zona

pueda editarse cuando creemos una pgina a partir de la

plantilla.

Para la capa de men, deberemos hacer lo mismo pero seleccionando antes todo el men.

Ya slo nos queda guardar el documento y podremos usar la plantilla para hacer nuestra primera pgina web.

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

58/113



Dreamweaver CS4

Para asentar los conceptos desarrollados en este tutorial, serecomienda hacer las siguientes actividades.

Cread un nuevo sitio web, llamado museo. Cread una nueva plantilla para el sitio museo, con la siguiente estructura:

Poned un ttulo en la parte superior de la pgina. Poned una imagen en la parte superior de la capa de la derecha. Definid las zonas editables de la pgina. Guardad la plantilla.

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

59/113

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Tutorial 4. Aadir fotografas y enlaces a lugares de inters


Con la plantilla que hemos creadoen el tutorial anterior, vamos a hacerla primera pgina del sitio.

Empezaremos por la pgina deinicio. En el men de Dreamweaver,seleccionamos ArchivoNuevo...

Aparecer un cuadro de dilogodonde podremos seleccionar quequeremos crear una pgina desdeuna plantilla, del sitio Alquilery conla plantilla llamada plantilla.Dreamweaver muestra unaprevisualizacin de la plantilla.

Dreamweaver CS4


8/3/2019 DW_CS4

60/113



Una vez abierto el nuevo documento desde la plantilla,Dreamweaver se pone en vista de cdigo, mostrando en grisclaro todo el cdigo bloqueado.

Dreamweaver CS4 TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


8/3/2019 DW_CS4

61/113



Creemos la pgina inicial. Esta pgina, cuyonombre ser index.html, tendr un textogenrico. Introduciremos ese texto en elapartado de contenido y eliminaremos elenlace de la opcin de men Indice.

Dreamweaver CS4

Una vez introducido el texto,seleccionamos la palabra Iniciopara borrarel enlace (aunque parezca un modo pocosofisticado, nos resulta til para estetutorial).

Interactivo

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de aprendizaje

D CSINICIO | CRDITOS

8/3/2019 DW_CS4

62/113



Al elaborar esta primera pgina, nos damos cuenta de un detalle:necesitamos diferenciar contenido y men de alguna manera.

Para diferenciar el men del contenido, modificaremos el fondo de lacapa cuerpo. Podemos editar directamente el archivo CSS, oeditarlo a travs del cuadro de dilogo de edicin de las reglas CSSde Dreamweaver.

Dreamweaver CS4

El resultado es ste:

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de aprendizaje

D CS4INICIO | CRDITOS

8/3/2019 DW_CS4

63/113



Nos falta un paso antes de dar por acabada esta pginainicial. El ttulo de la pgina es, en estos momentos,Documento sin ttulo. Como ttulo, le pondremos: Alquilerde apartamentos en Menorca.

Dreamweaver CS4

Una vez acabada la pginainicial, lo guardamos todo (tantola pgina HTML como el CSS),desde ArchivoGuardar todoFinamente, con F12 podemosver una vista preliminar denuestra pgina.

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de aprendizaje


8/3/2019 DW_CS4

64/113



Una vez acabada la pgina inicial, vamos a elaborar unanueva pgina de lugares de inters, que contendr unarelacin de webs de sitios prximos. Pondremos en ellaenlaces e imgenes relacionadas.

Tal y como hicimos para la primera pgina, crearemos unnuevo archivo a partir de la plantilla. Antes de empezar conel contenido de la pgina, cambiaremos su ttulo por Alquilerde apartamentos en MenorcaLugares de inters (sin lascomillas) y quitaremos el enlace Lugares de Intersde la

barra lateral.

Para cada lugar de inters pondremos un ttulo (con laetiqueta h3), una imagen alineada a la derecha, un textoexplicativo y una lista de enlaces donde encontrar msinformacin.

Antes de empezar, modificaremos el archivo CSS aadiendouna regla especfica para que las imgenes, en la capacontenido, queden alineadas a la izquierda y con el texto a la

derecha.

Dreamweaver CS4

Antes de continuar es importante guardar el archivo CSSInteractivo

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de aprendizaje


8/3/2019 DW_CS4

65/113



Vamos a aadir la informacin referente a la Naveta des Tudons

Dreamweaver CS4

Deberamos cambiar algunascosas para mejorar lapresentacin

Interactivo

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de aprendizaje


8/3/2019 DW_CS4

66/113



Guardamos la pgina con el nombre lugares.html.Veamos una vista preliminar.

Dreamweaver CS4

El texto es demasiado grande, as que lo haremosun poco ms pequeo: 0.9 em. Por otra parte, elttulo debera ser de color #000066 y el color de losvnculos visitados (en la imagen, Inicio) debera serms oscuro para que puedan verse: #4576c5.Finalmente querremos que entre la imagen y el

texto haya algo de espacio.

Para cambiar el texto, crearemos una nueva clasellamada texto:

Cambiaremos tambin el color de los vnculosvisitados.

Para el ttulo, crearemos una regla para la etiqueta.

.texto {

font-size: 0.9em;

}

h3 {

color:#006;

}

#menu a:visited {

text-color:#4576c5;

decoration:none;

}

Y separaremos la imagen del texto.#contenido img {

float:left;

padding-right: 1em;

}

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de aprendizaje


8/3/2019 DW_CS4

67/113



Nos falta asignar la clase textoa los prrafos escritos.

Dreamweaver CS4

Interactivo

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de aprendizaje


8/3/2019 DW_CS4

68/113



Aadimos el siguiente texto explicativo,con sus correspondientes enlaces:

Se puede encontrar ms informacin enla wikipedia, en la pgina webMenorcaWeb y en la Xarxa MenorcaMonumental (pdf).

Dreamweaver CS4

Los textos enlazan a:

wikipedia: http://es.wikipedia.org/wiki/Naveta_des_TudonsMenorcaWeb: http://www.menorcaweb.com/reportajes/yacimientos-arqueologicos/naveta-des-tudonsXarxa Menorca Monumental: http://www.menorcamonumental.org/castellano/4.pdf

Interactivo

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de aprendizaje


O S

8/3/2019 DW_CS4

69/113



Como la imagen de la Naveta des Tudons es muy pequea, vamos a poner en ella un enlace para que se abra la misma imagen peroen un tamao ms grande.

Dreamweaver CS4

Interactivo

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

70/113



Siguiendo los mismos pasos, podemos aadir nuevos sitios de inters. Ahora la pgina queda as:


Gua de Aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

71/113



Dreamweaver CS4

Para asentar los conceptos desarrollados en este tutorial, serecomienda hacer la siguiente actividad.

Aadid un nuevo sitio de inters en la pgina realizada en este tutorial. Puede ser, por ejemplo, el puerto de la ciudadde Ciudadela. Se puede encontrar informacin sobre el puerto en la wikipedia1.

El nuevo sitio debe incluir: un ttulo con el nombre del lugar, una fotografa, que debe subirse recortada al tamao adecuado, al menos tres prrafos de informacin, uno o varios enlaces con la informacin relacionada.

1 http://es.wikipedia.org/wiki/Ciudadela_(Espaa)

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de aprendizaje

Dreamweaver CS4

8/3/2019 DW_CS4

72/113

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Tutorial 5. Catlogo de apartamentos


En la comunidad de vecinos existen cuatro tipos de apartamentos; cada apartamento tiene unas caractersticas determinadas, por lo queconviene comentarlas. Para hacer tal descripcin, usaremos una lista de definicin. Empezaremos por escribir el texto y despus veremoscmo mejorar la presentacin.

En primer lugar, debemos crear una nueva pgina y adaptarla a la opcin del men con la que se va a abrir. Los pasos sern lo siguientes:

crear la pgina a partir de la plantilla, quitar el enlace de la opcin de men Caractersticas, cambiar el ttulo de la pgina por Alquiler de apartamentos en MenorcaCaractersticas, guardar la pgina con el nombre caracteristicas.html.

El resultado ser ste:

Dreamweaver CS4

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

73/113



Para crear la lista de definicin, vamos al men, FormatoListaLista de definicin.

Dreamweaver CS4

Una vez indicado que es una lista dedefinicin, podemos escribir el texto.

Dreamweaver entender que lo primero queescribimos es un ttulo y que cada vez quepulsemos la tecla Introsignificar pasar dettulo a definicin y al revs. As, escribimosnuestro texto normalmente, y nos quedaresto:

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

74/113



El resultado es poco vistoso. Modificando el archivo CSS podremos mejorarlo.

Dreamweaver CS4

Interactivo

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |


Dreamweaver CS4 TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8

8/3/2019 DW_CS4

75/113



Para cambiar el CSS que afecta a la definicin, modificaremos directamente el archivo CSS incorporando la siguienteregla:

dd {

margin-top: 0.5em;

margin-bottom: 1em;

font-size: 0.9em;

}

Dreamweaver CS4

Vemos que aparece una barra azul no deseada debajo del ltimo texto. Esto se debe a que Dreamweaver ha aadido un al finaldel texto. Deberemos quitarlo desde la vista de cdigo:

Si, una vez guardados los dos archivos, hacemos una vista preliminar,nos encontraremos con esto:

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

76/113



Dado que la lista de definicin se refiere a las caractersticasde los apartamentos, vamos a poner un ttulo que lo diga.

Pero tenemos un problema. Dreamweaver no nos permitir,en vista de diseo, salir de la lista de definicin para llegar alprincipio del texto. Para ver claramente el problema,seleccionamos la vista Dividir y, desde la visualizacin dediseo intentamos llevar el cursor fuera de la lista dedefinicin.

En la imagen de la izquierda tenemos la vista Dividir, en laque se observa en la parte inferior el diseo y en la partesuperior el cdigo. En el cdigo, vemos el cursor al principiode la A de Apartamentos. Para poder poner el ttulo,debemos mover el cursor en la vista de cdigo.

Dreamweaver CS4

Para poder poner el ttulo, deberemos situar el cursordelante de la etiqueta directamente desde la vista decdigo.

Una vez all, tan solo queda escribir el texto Caractersticasde los apartamentos y aplicarle la etiqueta h3.

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

77/113



El siguiente paso ser aadirlas caractersticas de la zonacomunitaria. Empezaremos por

poner el ttulo: Caractersticasde la zona comunitaria, y acontinuacin las detallaremos.

Para esta lista, usaremos unalista no ordenada a la quecambiaremos las vietasmediante CSS.

Dreamweaver CS4

Interactivo

| | | | | | |

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

78/113



Vamos a cambiar la vieta y el tamao del texto de la lista, de manera que quedemejor con el conjunto de la pgina. Para ello, crearemos una nueva regla en el archivoCSS:

#contenido li {

list-style-image:url(img/vieta.png);

font-size:0.9em;

margin-top: 0.2em;

}

Dreamweaver CS4

Los elementos de segundo nivel de la lista tienen una tipografa mspequea debido al modo como hemos definido su tamao.

| | | | | | |

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

79/113



Hasta ahora no hemos comprobado si nuestra plantilla es accesible o si respeta los estndares. As que, antes de continuar, abramos la plantillay hagamos las comprobaciones necesarias.

Cerramos el archivo caracteristicas.html(guardando los cambios si es necesario) y abrimos la plantilla.

Dreamweaver CS4

Interactivo

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

80/113



Para comprobar tanto si nuestra plantilla se ajusta a los estndares como si es accesible,tenemos sendos botones en la barra de herramientas.

Dreamweaver CS4

Usaremos el botn de la izquierda para validar el cdigo fuente de lapgina y el CSS, mientras que el de la derecha nos permitir validar laaccesibilidad y la compatibilidad de nuestro cdigo con diferentesnavegadores. Estos son los navegadores que Dreamweaver

comprueba por defecto.

Si comprobamos la compatibilidad con navegadores, con la configuracinpor defecto de Dreamweaver, veremos que no detecta ningn problema.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

81/113



Dreamweaver CS4

De nuevo, tampoco detecta ningn problema.

Tambin podemos validar la pgina.

Dado que hemos hecho la pgina con Dreamweaver prcticamente sin editar el cdigo y Dreamweaver genera cdigovlido, es poco sorprendente.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

82/113



Hemos visto que el cdigo de nuestra plantilla es vlido yque no da problema con casi ningn navegador. Veamosahora si existen problemas de accesibilidad.

Seleccionamos la opcin correspondiente.

Dreamweaver CS4

Y aqu aparece un error.

Dreamweaver nos indica qu pautas de accesibilidad debemos comprobar a mano (con un interrogante) y en qu pautas tenemos unerror. El error que nos marca en este caso, revisado con otras herramientas, resulta no serlo, pero nos ayuda a darnos cuenta de que nohemos aadido etiquetas , que pueden servirnos para ayudar a los buscadores a localizar nuestra pgina. Vamos a aadir algunade estas etiquetas.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

83/113



Dreamweaver CS4

Interactivo

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

84/113



Hemos aadido lasetiquetas meta fuera de lazona editable. Al hacerloas, cuando guardemos laplantilla, Dreamweaveractualizar todoslosarchivos de ese sitio.

Interactivo

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

85/113



En esta pgina destaca mucho visualmente que el men es corto en comparacin conel contenido. Aunque eso no es un problema, hemos pensado que poda quedar bienuna imagen en la parte inferior del men.

Como ser una imagen tan solo de presentacin, deberemos ponerla en el CSS. Apriori, parece sencillo con Dreamweaver. En la plantilla, editamos la regla CSS delidentificador men.

Modificamos la regla segn estas caractersticas.

A pesar de que Dreamweaver nos ofrece dosBackground-position, en realidad lo gestiona comouno slo, al que incorpora las opciones queindicamos.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

86/113



El resultado es ste:

Aunque parezca que con esto ya est, en realidad nos falta dar un pasoms.

Si accedemos a la presentacin preliminar de la plantilla, veremos que laimagen queda en el centro del men. Esto se debe al tamao de la capadonde se encuentra, y tiene fcil solucin: height:20em.

Es necesario guardar la plantilla y actualizarlas pginas ya confeccionadas?

No: al modificar el archivo CSS, no esnecesario ni guardar la plantilla ni actualizar laspginas.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

87/113



Comprobad si son vlidas todas las pginas web que hemos hecho hasta ahora. Aadid un nuevo apartado (debajo de las caractersticas de la zona comunitaria) titulado

Caractersticas de la zona de aparcamiento, con dos apartados (como si de los apartamentos setratase):

Zona exterior

Acceso directo a los apartamentos de la zona 1. Descubierto. Capacidad para 20vehculos sin lmite de altura.

Zona interior Acceso directo a los apartamentos de la zona 1. Cubierto. Capacidad para 10

vehculos. Altura mxima 1,80 metros.

Para asentar los conceptos desarrollados en este tutorial, serecomienda realizar la siguiente actividad.



8/3/2019 DW_CS4

88/113

Tutorial 6. Temporadas y precios


Para establecer la lista de precios, la mejor opcin ser una tabla. En las columnas pondremos el tipo de apartamento y en las filas, la temporada.Los datos que debemos representar en la pgina web debern ser stos:

Son precios por noche de estancia, as que habrque hacer algunas aclaraciones:

El precio es por noche. La hora de entrada son las 17:00 y la de salida

las 12:00. Las semanas completas tienen un 5% de

descuento y los meses completos un 10%. No se incluye el IVA (7%).

Adems, necesitaremos especificar las temporadas.

Zona 1 Zona 2

Temporada Bajo Piso Bajo Piso

Alta 145,00 160,00 145,00 160,00

Media - Alta 100,00 110,00 100,00 110,00

Media - Baja 80,00 85,00 75,00 80,00 Baja 60,00 65,00 50,00 55,00

Alta Del 15/07 al 31/08

Media Alta Del 15/06 al 14/07 y del 1/09 al 15/09

Media Baja Del 1/05 al 14/06 y del 16/09 al 15/10

Baja Del 1/03 al 31/04 (excepto Semana Santa) y del 16/10 al 15/11

No disponible Del 16/11 al 29/02

Y deberemos aadir que Semana Santa se considera temporada MediaAlta.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

89/113



Pongamos la informacin en nuestra pgina web. Los pasosque debemos seguir son:

1.Crear una nueva pgina a partir de la plantilla.2.Cambiar el ttulo de la pgina: Ahora debe ser Alquiler deapartamentos en Menorca - Temporadas y precios.3.En el men, quitarle el enlace a Precios.4.Guardar la pgina con el nombre de precios.html

Ahora, desde el men Insertar-Tabla, crearemos una tabla

de seis filas y cinco columnas.

En el apartado Texto, que se corresponde con la etiqueta, escribimos Tabla de precios segn tipo deapartamento y temporada. En el apartado Resumen, que secorresponde con el atributo summary, describimos cmo esla tabla: Las dos primeras filas son de ttulo, el resto tienenlos datos de las temporadas. En las columnas se encuentranlos 4 tipos de apartamentos.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

90/113



El siguiente paso ser agrupar las celdas que nos interese. Por otra parte, tambin querremos que la segunda fila sea considerada comoencabezado. Ambas cosas las haremos desde la vista de diseo.

Interactivo

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

91/113



Ahora vamos a rellenar las dos primeras filas. El resultado ser ste:

A continuacin debemos indicar que Zona 1 y Zona 2agrupan columnas. Eso no podemos hacerlo conDreamweaver y, por tanto, deberemos hacerlo desde la vistade cdigo.

ste es el cdigo antes de modificarlo:

Aprovecharemos para cambiar tambin el mbito delencabezado Temporada.

El cdigo despus de modificarlo quedar as:

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

92/113



Rellenamos el resto de datos, guardamos y vamos a la vistapreliminar. El resultado no es demasiado atractivo.

Para arreglarlo deberemos modificar el CSS. Tenemos dosopciones. Podramos aadir las reglas que nos interesan dentro delarchivo CSS general del sitio; pero tambin podramos crear unnuevo archivo CSS slo para esta pgina. Dado que no tendremostablas en ninguna otra pgina, no parece mala idea hacerlo as.

Para crear un nuevo archivo CSS, actuamos igual que siquisiramos crear una nueva regla, indicando que queremosguardarla en un Nuevo archivo de hoja de estilos.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

93/113



Las reglas CSS que hemos creados son stas:

table {

font-size: 0.9em;

caption-side:bottom;

border:none;

}

td { text-align: center;

border:none;

background-color: #AAC1EB;

}

th {

border:none;

background-color: #99F;

}

caption {

font-size: 0.8em;

font-family:Verdana, Geneva,sans-serif;

text-align:left;

}

Estas reglas CSS generan la tabla que vemos en la imagen.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

94/113



Para mejorar la tabla y que no se vea la celda superiorizquierda, aadiremos una nueva regla en el CSS y lepondremos una clase a esa celda.

As, el cdigo de la pgina quedar de esta manera: Y la regla CSS ser sta:

.nada {

background-color:#ebebeb;

}

El resultado es el siguiente:

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

95/113



Aadiremos ahora la lista de aclaraciones. En la vista de diseoescribiremos el siguiente texto:

Nota:1. El precio es por noche.2. La hora de entrada son las 17:00 y la de salida las 12:00.3. Las semanas completas tienen un 5% de descuento y los

meses completos un 10%.4. No se incluye el IVA (7%).

Pero, aunque hemos definido una lista ordenada, el resultado no es elesperado.

El resultado se debe a una regla que pusimos en el archivo CSSestilos.css:

#contenido li {

list-style-image:url(img/vineta.png);

font-size: 0.9em;

margin-top: 0.2em;

}

Tal y como est definida, esta regla afecta a todos los elementosde cualquier lista. Para que afecte slo a las listas no ordenadasla cambiaremos un poco:

#contenido ul>li {

list-style-mage:url(img/vineta.png);

font-size: 0.9em;

margin-top: 0.2em;

}

El aadir el ul>lihace que esa regla afecte slo a los elementosde las listas no ordenadas.

Podramos haber aadido la regla con ul li , sin embargo, estohara que la vieta se asignase tambin a listas ordenadas queestuvieran dentro de una lista no ordenada.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

96/113



Falla el tamao de la letra y la separacin entre elementos de lalista. Para solucionarlo podemos aadir una nueva regla alarchivo estilos.css:

#contenido ol>li {

font-size:0.9em;

margin-top: 0.2em ;

}

Sin embargo, estamos repitiendo tems que tambin tenamosdefinidos en la regla #contenido ul>li.

Ahora la lista est as:

Podemos simplificar nuestro CSS substituyendo las reglas#contenido ul>li y #contenido ol>li por:

li {

font-size:0.9em;

margin-top: 0.2em;

}

#contenido ul>li {

list-style-image:url(img/vineta.png);

}

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

97/113



Finalmente, aadiremos lasegunda tabladirectamente desde lavista de diseo deDreamweaver , de lasiguiente manera:

Interactivo

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

98/113



Rellenamos la tabla con los datos que vimos en el primer paso de este tutorial y obtenemos el siguiente resultado:

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

99/113



Hay una pgina que no vamos a desarrollar en esta gua: la pgina de disponibilidad. La actividad propuesta consiste en crear dichapgina. Para ello se deber hacer una tabla como la de la imagen. Adems, para remarcar los apartamentos ocupados, se crearuna nueva clase que, aplicada a la celda, cambie el fondo a rojo, el color del texto a blanco y aplique negrita al texto.

En este caso, es muy importante que el cdigo sea lo ms limpio posible, dado que el objetivo es que en un futuro los datos seextraigan de una base de datos con PHP, y cualquier complicacin en el cdigo repercutir en la programacin.

Para asentar los conceptos desarrollados en este tutorial, serecomienda realizar la siguiente actividad.

INICIO | CRDITOS

TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Gua de aprendizaje

Dreamweaver CS4

8/3/2019 DW_CS4

100/113

Tutorial 7. Crear una pgina de contacto


Para crear una pgina de contacto, vamos a crear un formulariodonde pediremos al usuario que rellene seis datos:

su nombre, su direccin de correo electrnico, su telfono, el apartamento que le interesa, la poca en que le interesa el alquiler, comentarios.

Cambiamos el ttulo de la pgina

Borramos el enlace de Contacto

Guardamos con el nombre contacto.html

Lo primero que haremos es crear una nueva pgina apartir de la plantilla. Recordamos los pasos:

En el men de Dreamweaver seleccionamos,ArchivoNuevoPgina de plantillaAlquilerCrear.

Cambiamos el ttulo de la pgina, aadiendo al

final - Pgina de contacto. En el men de la pgina borramos el enlace deContacto.

Guardamos ponindole a la pgina el nombre decontacto.html

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

101/113



Aadimos un titular () y un

texto explicativo que quedarn

as:

Y ya podemos aadir los tres

primeros campos.

ContactoPara ponerse en contactocon nosotros, por favorrellene este cuestionario.

Contactaremos con usted tanpronto como nos sea posible.

Interactivo

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

102/113



Hemos visto que, al crear los campos de texto,Dreamweaver nos presenta un cuadro de dilogodonde se nos piden los siguientes datos:

Identificador. Etiqueta: texto que aparecer acompaando al

campo de texto. Estilo: cmo debe ponerse la etiqueta. Posicin: dnde se pondr la etiqueta. Clave de acceso: tecla de acceso rpido para

acceder directamente al campo. ndice de fichas: orden en que se visitarn los

campos cuando se navegue con el tabulador.

Guardamos la pgina y previsualizamos en elnavegador. Lo siguiente ser cambiar los tamaos delos campos de nombre y correo electrnico, para quesean algo ms grandes y hacer ms pequeo elcampo telfono.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

103/113



Para modificar los tamaos de los campos de entrada,deberemos, desde la vista de diseo, seleccionar el campo quequeremos modificar. En la barra de propiedades aparecern laspropiedades de ese campo, donde podremos modificar:

el nmero de caracteres que se visualizarn (Ancho car), el nmero mximo de caracteres que se podrn escribir

en el campo (Car. mx.), el tipo de campo de texto, el valor inicial que tendr el campo,

si est activado o desactivado, si slo es de lectura, Si se le aplica alguna clase.

En nuestro caso, vamos a modificar el ancho de caracteres de los trescampos. Pondremos treinta en los campos de nombre y correo electrnicoy quince en el campo de telfono.

Ahora nuestro formulario se ve as:

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

104/113



Vamos a aadir ahora el campoTipo de apartamento que leinteresa. Este campo tendr cuatrovalores posibles:

zona 1 bajo zona 1 piso zona 2 bajo zona 2 piso

Nos interesa que el usuario puedaescoger ms de una opcin.Podramos hacerlo con una listadesplegable, pero queda ms clarocon un grupo de casillas deverificacin.

Interactivo

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

105/113



Para la temporada, haremos unalista desplegable donde el usuariopodr escoger una de lassiguientes posibilidades:

JulioAgosto MayoJunio SeptiembreOctubre Otra temporada

Por defecto, dejaremosseleccionado JulioAgosto, pueses la poca con ms peticiones.

El ndice de fichases el ordenen que se pasar de elemento aelemento cuando se use la tecla

de tabulacin.

En este caso, asignaremoscomo ndice de fichaselnmero ocho, porque, aunqueno pudimos hacer lo mismo conlas casillas de verificacin, loharemos ms adelante.

Interactivo

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

106/113



Nos faltan un par de elementospara poder tener acabado elformulario de contacto: un campode comentarios y un botn deenvo.

Interactivo

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

107/113



Una vez acabado el formulario, deberemos indicar qu hayque hacer con los datos que rellene el usuario.

Acercamos el ratn a la lnea roja delimitadora del formularioy haciendo clic en ella, en la ventana de propiedadestenemos la posibilidad de modificar el funcionamiento delformulario.

En Accinpodramos poner:

mailto:[email protected]

con lo que se abrira el programa de correo electrnico del usuario indicando en la direccin del destinatario la direccin que hayamospuesto.

Tambin podramos poner la direccin de una pgina web. En ese caso, cuando el usuario pulsase el botn de enviar, se abrira la pginaseleccionada, a la que se le enviaran los datos introducidos por el usuario, mediante el mtodo (POST o GET) indicado. Adems, en elapartado Dest. se puede seleccionar si la pgina web debe abrirse en la misma ventana del navegador, en otra nueva, o lo quecorresponda.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

108/113



As es como aparece nuestro formulario cuando previsualizamosen el navegador.

En ese momento nos pide el texto bajo el que se agruparnlas casillas de verificacin. Pondremos: Tipo de apartamentopreferido.

Si previsualizamos, el resultado es ste:

Lo primero que haremos ser agrupar las cuatro casillas deverificacin dentro de un . Para ello, en la vista de

diseo seleccionaremos las cuatro casillas de verificacin.Despus, en el men, iremos a InsertarFormularioJuego decampos.

Ahora ya est listo. Sin embargo, vamos a mejorar la presentacin.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

109/113



Vamos ahora a poner los tipos de apartamento en dos columnas: los de la zona 1 en la columna de la izquierda y los de la zona 2 en la columnade la derecha.

Lo haremos desde la vista de cdigo. Eliminaremos la etiqueta de prrafo que engloba a cada una de las casillas de verificacin y pondremos dosetiquetas ; cada una de ellas engloban a las casillas de una zona. Adems, a cada etiqueta le asignaremos un identificador: casillas1 ala que engloba a las dos casillas de la zona 1 y casillas2a la que engloba las casillas de la zona 2.

El resultado, en vista de cdigo, ser ste:

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

110/113



Deberemos crear sendas reglas CSS para hacer quelos dos queden uno al lado del otro. Igual quehicimos con las tablas, vamos a crear una nueva hojade estilos a la que llamaremos formulario.css, dondeguardaremos las reglas que usaremos para estapgina.

Para crear el nuevo archivo CSS, haremos una nuevaregla CSS y en el cuadro de dilogo seleccionaremos

Nuevo archivo de hoja de estilos.

Esta regla la definiremos en la categora cuadro. Allpondremos 45% en Widthi leften Float.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

111/113



ste es el aspecto que tienen ahora las casillasde verificacin de nuestro formulario.

Para los campos de nombre, correo electrnico ytelfono, vamos a hacer que los campos de textoqueden alineados por la izquierda. Para ello,debemos hacer tres cosas:.

1. Crear una capa (con la etiqueta ) que

englobe los tres campos. Le pondremoscomo identificador campostext.2. Crear una regla CSS para las etiquetas

de esa capa, para que floten a laizquierda y tengan un tamao del 35% de lacapa.

3. Crear una regla CSS para esa capa, paradarle una altura de 8em y una anchura del100%.

Adems, para mejorar la presentacin, daremosun tamao de 50 al campo nombre.

En las imgenes se puede ver el cdigoresultante y las reglas CSS introducidas.

Gua de aprendizaje


TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8/3/2019 DW_CS4

112/113



Vamos a mejorar la accesibilidad de nuestro formulario. Hemos tenido en cuenta la accesibilidad siempre que Dreamweaver nos lo hapermitido, pero en las casillas de verificacin no hemos podido asignar orden de tabulacin (ndice de fichas segn Dreamweaver). Tal comoest ahora, si cambiamos de campo usando el tabulador, nos saltaremos las casillas de verificacin. Por tanto, en vista de cdigo, vamos aaadir los correspondie

dw_cs4

Documents