Dreamweaver CS5 Prctica: Diseo Web parte II

Una vez configuradas las preferencias de Dreamweaver que vimos en el ejercicio anterior, llega el momento de configurar la estructura del sitio que vamos a crear. Un sitio es un lugar de almacenamiento para todos los documentos y archivos necesarios para crear una pgina Web. Al definir el sitio local, lo que haremos ser establecer el lugar en el que pensamos almacenar todos los archivos del sitio dentro del disco duro de nuestro PC. Es recomendable crear un sitio local por cada sitio Web que creemos. Ver el sitio Web completado:
1.

Antes de comenzar, vea la Web completamente terminada para que se haga una idea del resultado que pretendemos obtener cuando hayamos terminado la Web dedicada a la pelcula Spider-Man. Inicie Adobe Dreamweaver utilizando cualquiera de los mtodos vistos a lo largo del primer tema. Cuando se abra la aplicacin, asegrese de que todas las modificaciones realizadas en la configuracin del programa a lo largo de la primera prctica permanecen vigentes. En el men Archivo, seleccione la opcin Abrir. Utilice el cuadro de dilogo Abrir para localizar el archivo Index.html que se adjunta en la carpeta SPIDER-MAN. A continuacin, en el men Archivo, seleccione la opcin Vista previa en el navegador y en el submen que aparece, escoja el navegador que tenga configurado para ver el documento.

2. 3.

4. 5. 6.

Nota: Para poder ver parte del contenido de la Web, necesitaremos tener instalados los reproductores de Adobe Flash, QuickTime y RealPlayer. Los reproductores de QuickTime y RealPlayer los puede instalar desde la plataforma y el de Flash lo puede instalar desde la direccin http://get.adobe.com/es/flashplayer/.
7.

Observe la pgina principal del sitio Web que vamos a crear. Se trata de una imagen con dos reas interactivas que nos abrirn una nueva ventana de navegador donde el usuario visualizara todo el contenido.

Pgina 1
Copyright INEDETEC

Dreamweaver CS5

8. 9.

Justo debajo hay un vnculo que nos permite instalar de forma directa el plug-in de Macromedia Flash que nos permitir ver la introduccin de la Web. Haga clic en las reas interactivas para explorar el sitio que vamos a crear a lo largo del curso.

Creacin del sitio local:

1. 2.

En el men Sitio de la Barra de mens, seleccione la opcin Nuevo sitio. En el cuadro de dilogo Configuracin del sitio, asegrese de que la categora Sitio est seleccionada.

3.

En el campo de edicin Nombre del sitio, escriba el nombre para el nuevo sitio que vamos a configurar. Para esta prctica le daremos el nombre Spider-Man. Recuerde que el nombre del sitio permite identificarlo y seleccionarlo fcilmente en la lista de sitios de Dreamweaver. Seleccione la carpeta en la que ubicaremos de forma local nuestro sitio Web, escribiendo la ruta directamente en el campo de edicin Carpeta del sitio local o haciendo clic sobre el icono con forma de carpeta situado a la derecha de ste.

4.

Pgina 2
Copyright INEDETEC

Dreamweaver CS5

Nota: Previamente crearemos la carpeta SPIDER-MAN en la raz de nuestro disco duro. sta ser la carpeta cuya ruta tendremos que localizar para ubicar nuestro sitio Web.
5. 6.

Seguidamente pulse sobre la categora Configuracin avanzada y muestre el contenido de Informacin local. Vamos a crear una carpeta para guardar las imgenes que vayamos colocando en la Web que vamos a disear. Para ello en el rea Carpeta predeterminada de imgenes pulse sobre el icono de carpeta y en el raz de la carpeta SPIDER-MAN cree una nueva carpeta con el nombre Images. Mantenga activa la opcin Activar cach para mantener la informacin de archivos y activos del sitio para acelerar el funcionamiento del panel Activos y la funcin de administracin de vnculos. Automticamente, Dreamweaver muestra el panel Archivos correspondiente al nuevo sitio creado.

7.

8.

Crear y guardar un documento nuevo:

1.

Una vez que hemos establecido una estructura para el sitio en la que se almacenarn las pginas y archivos del sitio Spider-Man, crearemos la pgina inicial del sitio. Despliegue el men Archivo de la Barra de mens y haga clic en la orden Nuevo. Dentro del cuadro Nuevo documento que se abre, seleccione la categora Pgina en blanco y seleccione HTML en el rea Tipo de pgina. Para terminar de crear el nuevo documento en el rea Diseo asegures que <ninguno> este seleccionado y haga clic sobre el botn Crear para obtener una pgina en blanco. Seguidamente, despliegue de nuevo el men Archivo y seleccione, en esta ocasin, la opcin Guardar como. Se abrir el cuadro de dilogo con el mismo nombre.

2. 3. 4.

5.

Pgina 3
Copyright INEDETEC

Dreamweaver CS5
6. 7. 8. 9.

En el cuadro de dilogo, localice la carpeta SPIDER-MAN como ubicacin para este documento. En el campo de edicin Nombre, escriba Index.html y haga clic en el botn Guardar. Observe que la ruta y nombre del documento aparecen en la parte superior de la ventana de documento de Dreamweaver. Aunque al documento que acabamos de guardar le hemos dado un nombre de archivo, observe que an est etiquetado como Documento sin ttulo; esto se debe a que necesitamos asignarle un ttulo de pgina al archivo HTML.

Asignar un ttulo de pgina al archivo HTML:

1. 2. 3.

En el campo de edicin Ttulo de la Barra de herramientas, escriba: ::: Spider_Man: La pelcula :::. A continuacin, haga clic en la ventana de documento. Si observa la Barra de ttulo, justo al lado del nombre Index.html, aparece un pequeo asterisco. Esto nos indica que hemos realizado modificaciones en el documento que no hemos guardado. Para finalizar, en el men Archivo, seleccione la opcin Guardar. El pequeo asterisco desaparece.

4.

Ver los archivos del sitio:

1. 2.

Una vez que ya hemos creado el primer archivo de la Web, observe el panel Archivos para ver cmo comienza a crearse la estructura de nuestro sitio local. Pulse el botn Expandir para mostrar sitios locales y remotos.

Pgina 4
Copyright INEDETEC

Dreamweaver CS5

3.

En el rea Archivos locales, puede observar cmo el archivo Index.html creado anteriormente, aparece en la jerarqua de la carpeta Spider-Man.

Nota: Si el sitio Spider-Man no se abriera automticamente en el panel Archivos, utilice la lista desplegable Mostrar para seleccionarlo. Configurar las propiedades bsicas de Index.html:
1. 2. 3. 4.

Antes de comenzar a aadir contenido a la pgina principal de nuestro sitio Web, vamos a configurar las propiedades principales del documento. Minimice el panel Archivos haciendo clic en el botn Contraer para mostrar slo el sitio local o remoto. En el men Modificar, seleccione la opcin Propiedades de la pgina o pulse la combinacin de teclas CTRL+J. Se abre el cuadro de dilogo con el mismo nombre. Marque la categora Apariencia (CSS).

Pgina 5
Copyright INEDETEC

Dreamweaver CS5

5.

Para definir el color de fondo del documento Index.html, haga clic con el puntero del ratn en el cuadro Color de fondo y seleccione el color negro en el selector que aparece. A continuacin, presione la categora Vnculos (CSS) y defina los colores predeterminados para los vnculos, vnculos visitados y vnculos activos, introduciendo su valor hexadecimal directamente en el cuadro de edicin. Utilice los siguientes valores: Color de vnculo: #0000FF. Vnculos visitados: #FF0000. Vnculos activos: #FFFF00.

6.

7.

Para finalizar, deje el resto de opciones sin modificar y pulse el botn Aplicar y luego Aceptar. Los cambios se guardarn y el documento HTML abierto se actualizar.

Pgina 6
Copyright INEDETEC

Dreamweaver CS5
Insertar palabras clave en la pgina principal:
1. 2.

Vamos a incluir la informacin necesaria para que los motores de bsqueda puedan dar a conocer el contenido y tipo de pgina Web. En el men Insertar, seleccione la opcin HTML/Etiquetas Head y en el submen que aparece, seleccione Palabras clave. Se abre el cuadro de dilogo con el mismo nombre.

3.

En el cuadro de edicin Palabras clave, introduzca las siguientes palabras separadas por comas: spider-man, raimi, marvel, maguire, dafoe, dunst, columbia, superhroes, cmics, araa. Para finalizar, pulse el botn Aceptar.

4.

Insertar una descripcin:

1.

En el men Insertar, seleccione la opcin HTML/Etiquetas Head y en el submen que aparece, seleccione Descripcin. Se abre el cuadro de dilogo con el mismo nombre. En el cuadro de edicin Descripcin, introduzca el siguiente texto descriptivo:

2.

Pgina dedicada a la pelcula Spider-Man dirigida por Sam Raimi. Entra y descubre todos los datos de una de las pelculas ms esperadas de los ltimos aos.

Pgina 7
Copyright INEDETEC

Dreamweaver CS5

3.

Para finalizar, pulse el botn Aceptar.

Ver el cdigo del documento:

1. 2. 3.

A continuacin, vamos a ver cmo Dreamweaver aade al cdigo de nuestro documento las palabras clave y la descripcin de la pgina. Despliegue el men Ventana de la Barra de mens y presione la opcin Inspector de cdigo. Se abre la ventana que muestra el cdigo del documento Index.html. Observe que en la lnea 20, se ha aadido la informacin correspondiente a las palabras clave y en la 21, la descripcin de nuestra Web.

Pgina 8
Copyright INEDETEC