TutorialpasoapasoparalaplaneaciónydesarrollodeunapáginawebusandolaherramientaMacromediaDreamweaver8Version 1.0 Realizado por Drako www.dragon-obscuro.com drako@dragon-obscuro.com / dragon.obscuro@gmail.com Xalapa, Veracruz México 2009

El contenido de esta obra se publica bajo la licencia creative commons - Atribución-No comercial-Licenciamiento Recíproco 2.5 México

PROPÓSITOSLo primero que se debe hacer al diseñar una página web es definir los propósitos de la misma. Eso nos ayudará a tomar decisiones de forma y contenido para nuestro sitio. En este ejemplo me estoy enfocando en diseñar una página para el grupo de multimedia 2009 de la carrera de informática de la U.V. ¿Cuál es la razón de ser? Está página sirve para ejemplificar como realizar una página web con la herramienta Dreamweaver 8 ¿Qué utilidad tendrá? Permitirá que los alumnos visualicen de una manera más clara el proceso de planeación, diseño y desarrollo de una página web simple. ¿A quién está dirigida? A alumnos de la carrera de informática que dominan al menos el manejo básico de internet, la navegación y tienen un amplio conocimiento de páginas web de distintos tipos.

ESTRUCTURA Definir la estructura del sitio es el siguiente paso, y para eso es muy útil apoyarnos en el manejo de:

• Diagramas de navegación (o árbol de navegación): organiza la información por categoría, tiempo, alfabéticamente, localidad o magnitud.

• Esquemas: Define todos los recursos requeridos en cada pantalla. • Storyboards: Plan ilustrado escena por escena que sirve para contar una historia e indicar el balance

de los elementos visuales en cada escena. •

En este caso solo utilizaré un árbol de navegación para definir las categorías y el nombre lógico de mis archivos; y un diagrama sencillo que me permita definir el estilo (diseño gráfico) que aplicaré al sitio. Arbol de navegación

Nombres lógicos de archivos

Esquema general de la página

CONTENIDOEn este punto es cuando se debe buscar, crear o conseguir el contenido y todo el material que se necesita para nuestro sitio y separar diseño del contenido. En este ejemplo, hay que desarrollar: Un fondo general para la pagina hecho de simples líneas delgadas que se van a repetir a todo lo largo del background (fondo). Buscando encontré uno que me agrada más y esta hecho de conexiones de circuitos, lo descargué desde: http://www.allfreebackgrounds.com/backgrounds/backs/computer/comp010.jpg Una imagen de 800 x 150 pixeles para el encabezado de la página, este lo voy a desarrollar por mi cuenta (se puede hacer en GIMP o Photoshop de una manera muy sencilla). Y el texto e imágenes que acompañarán cada tema.

DEFINIRELDISEÑOEn este ejemplo, la página va a utilizar imágenes en formato JPG, su tipografía va a ser Arial (o tipografía _sans) y los títulos van a ser de color azul, excepto por los botones de navegación, que serán de color blanco sobre fondo azul y los textos generales de la página los planteo de color gris obscuro. Los links deben resaltar, asi que también serán de color azul, pero de un azul diferente. Es necesario planear una "paleta de color", es decir, saber que colores vamos a utilizar y sus valores hexadecimales para texto, títulos, fondo de navegación y links. En wikipedia puedo rápidamente hacer la selección de los colores que usare. http://en.wikipedia.org/wiki/Web_colors

• Títulos: DarkBlue - 00 00 8B • Texto: DimGray - 69 69 69 • Links: Blanco - FF FF FF • Fondo de navegación: MidnightBlue - 19 19 70

JFD! Ya con toda la planeación y material listo, entonces podemos pasar a Dreamweaver para armar nuestra página web.

DREAMWEAVER1.- Abrimos el programa y creamos una nueva página básica en HTML.

2.- Inmediatamente lo grabamos. En este ejemplo tengo una carpeta en mi escritorio que se llama: VHMO y es donde voy a guardar todos mis archivos HTML (y la hoja de estilo CSS).

3.- Ahora es necesario dividir las secciones, que planeamos para la página. El diagráma de abajo muestra como sería esa separación.

Existe una división que funciona como contenedor para las otras tres divisiones (encabezado, navegacion y contenido). Para lograr esto en Dreamweaver éstas divisiones se deben declarar en el atributo <BODY> de la siguiente manera: <body> <DIV id="contenedor"> <DIV id="encabezado"></DIV> <DIV id="navegacion"></DIV> <DIV id="contenido"></DIV> </DIV> </body>

Esto no mostrará ningún cambio en el diseño, pero de manera interna ahora tenemos la página dividida en 3 secciones dentro de un contenedor. Para notar el cambio en diseño agrega un parrafo entre los TAGS de cada división, como en el ejemplo siguiente. <body> <DIV id="contenedor"> <DIV id="encabezado">División del encabezado</DIV> <DIV id="navegacion">Divición de la navegación</DIV> <DIV id="contenido">División del contenido</DIV> </DIV> </body>

Y observa la página con la opción de DISEÑO; debes poder ver algo iguala esto:

Nota que la división del contenedor sigue sin notarse. 4.- Reunimos todas las imágenes que vamos a usar en nuestra página, dentro de una carpeta que llamaré: IMAGES y que se encuentra dentro de la misma carpeta donde tengo mi archivo INDEX.HTML

5.- Ahora procederemos a crear el archivo de estilo (CSS) y ligarlo a la página HTML que estamos trabajando.Para hacer eso lo primero que tenemos que hacer es crear una archivo de estilo que llamaremos: style.css Esto lo hacemos desde: ARCHIVO > NUEVO > PAGINA BASICA > CSS

Ahora grabamos esta página en la misma carpeta que tenemos nuestro archivo INDEX.HTML

Y ahora ya solo falta vincular esta hoja de estilo con nuestro archivo html, para ello es necesario regresar a nuestro archivo html (selecciona la pestaña superior titulada: index.html). Y si no está visible, despliega la ventana de CSS desde: VENTANA > ESTILOS CSS

En la ventana de propiedades, pulsa sobre el ícono de la cadena que te permitirá vincular la hoja de estilo que recientemente creamos con tu archivo index.html

Te aparecerá un cuadro de dialogo donde te pide que ubiques el archivo a vincular y te presentará la opción de importar o vincular. Ubica el archivo y selecciona laopción de vincular).

Automáticamente se inserto una línea de codigo como la siguiente: <link href="style.css" rel="stylesheet" type="text/css" />

6.- Ahora es necesario declarar los estilos básicos y los nombres de las divisiones que hicimos antes, para que la hoja de estilo se vincule por completo con la pagina HTML. Para hacer esto debes pasar nuevamente al archivo style.css y escribir lo siguiente: body{} a:link {} #contenedor{} #encabezado{} #navegacion{} #contenido{} Las 2 primeras declaraciónes son globales y afectaran a toda la página, mientra que las siguientes 3 declaraciones definirán especificamente el estilo que se mantendrá para cualquier contenido que se encuentre dentro de esas secciones. Graba para que los cambios queden registrados. Tu archivo style.css debe verse igual a este:

Y en tu archivo index.html ahora aparecen los estilos CSS en la ventana de estilos CSS

Si no aparecen, presiona sobre el signo de más (+) que aparece junto a style.css en la ventana de estilos CSS.

7.- Para trabajar de una mejor manera con los estilos, es recomendable que tu página tenga el contenido que vas a mostrar, asi los cambios que realices en el estilo se reflejarán en tu página automáticamente. En este ejemplo escribiré una breve descripción de lo que es multimedia y del curso de multimedia 2009 en la FEI.

8.- Para insertar una imagen lo hago desde elpanel de insertar.

9.- Ahora si es posible trabajar con los estilos. Para hacerlo es necesario seleccionar la sección que queremos editar, en la ventana de estilos CSS. Lo ideal es tener una idea de que queremos afectar en cada sección

Body El fondo será la imagen de circuitos y se repetira por toda la página. La tipografía será arial Contenedor Mide 800 pixeles de ancho Encabezado Tiene una imagen de fondo que no se repite Navegacion El color del fondo es 191970 El color de la tipografia es blanco FFFFFF Contenido El color de fondo es blanco FFFFFF El color de la tipografía es 696969

La primera sección que afectaremos será BODY, para esto lo seleccionamos en la ventana de estilos CSS y en propiedades, pulsamos sobre: aumentar propiedad (add property).

El texto cambia a una lista de atributos.Selecciona el atributo: backgrund-image, esto significa que queremos que el fondo sea una imagen.

Y escribe la ruta a la imagen si la conoces o pulsa sobre el folder que aparece a la derecha para que puedas seleccionar la imagen deseada. En este caso la imagen se llama fondo.jpg y se encuentra dentro de la carpeta IMAGES. Eso cambia el fondo de toda la página. Repetimos el proceso y ahora seleccionamos la propiedad FONT y escribimos la fuente que queremos: ARIAL

Ahora, para definir el tamaño del contenedor a 800 pixeles, selecciona el estilo #contenedor en la ventana de estilos CSS, agrega la propiedad width y ajusta el valor a 800px. Ahora todo el contenido dentro del contenedor tendrá un tamaño de 800 pixeles.

El encabezado es una imagen, asi que se procede de manera similar a como se inserto la imagen de fondo del BODY; pero es necesario declarar la altura de esa división o solo aparecera una pequeña parte de la imagen como en el siguiente ejemplo.

Para evitar esto aumentamos la propiedad de altura (height) y la definimos con una altura de 150 px. (Precisamente por este tipo de ajustes es importante contar con un esquema de la página porque sino se puede volver un dolor de cabeza).

Ahora definimos las propiedades de estilo de la división: navegación. En este caso no es una imagen de fondo sino un color,por lo que la propiedad que seleccionamos es background y el color que declararemos es el que con anterioridad habiamos elegido (191970). De la misma forma se hacen todos los ajustes de diseño que previamente habiamos planeado.

A continuación se presenta la forma como queda el archivo style.css con una expliación de cada atributo. body{ background-image: url(images/fondo.jpg); font: arial; } >>> Esta declaración de la hoja de estilo indica que el fondo será una imagen y que el tipo de fuente que se ocupara para todo el documento será la arial. a:link { color:#FFFFFF; text-decoration: none; } >>> Esta declaración de la hoja de estilo indica que los links serán de color blanco y que no estarán subrayados como normalmente suelen estarlo. #contenedor{ width: 800px; } >>> Esta declaración de la hoja de estilo indica que el tamaño del contenedor será de 800 pixeles de ancho. #encabezado{ background-image: url(images/encabezado.jpg); height: 150px; } >>> Esta declaración de la hoja de estilo indica que en encabezado tendrá una imagen de fondo y su altura será de 150 pixeles. #navegacion{ background: #191970; color: FFFFFF; font-weight: bold; letter-spacing: 5px; margin-top: 5px; padding-left: 17px; padding-top: 5px; padding-bottom: 5px; } >>> Esta declaración de la hoja de estilo indica que la barra de navegación tendrá cierto color de fondo (191970), el color de la tipografía será blanco (FFFFFF) y la fuente se presentará en bold (negritas). Tambien indica que la separación entre las letras será de 5 pixeles y tendrá un margen superior de 5 pixeles (que lo separa del encabezado). Por último también indica una separación de 5 pixeles en la parte superior e inferior y una separación de 17 pixeles desde la izquierda. #contenido{ color: 696969; background: #FFFFFF; } >>> Esta declaración de la hoja de estilo indica que el color de la letra será gris (696969) y el color de fondo será blanco (FFFFFF).

Particularmente en el caso del titulo del contenido, para definirlo es necesario hacerlo desde el panel de propiedades del texto, donde seleccionaremos el estilo de parrafo ENCABEZADO 1

AJUSTES NECESARIOS Al trabajar una página web siempre aparecen pequeños ajustes que deberemos hacer o que no fueron planeados, en este ejemplo la imagen y eltextoen elcontenido no se integran de manera armónica. Para solucionar eso simplemente creamos una tabla con 2 celdas y copiaremos la imagen y la pegaremos en la celda de la izquierda y el texto en la celda de la derecha.

Y los ajustes pequeños como tipografía bold (negritas) o italica (inclinada). Ligas La página inicial (index.html) ya quedó lista, ahora solo falta declarar las ligas que nos permitirán navegar entre las otras páginas que integrarán nuestro sitio (alumnos.html y drako.html). Para esto solo debemos seleccionar el texto que se convertira en liga y declarar a que archivo html se va a ligar. Esto se hace en la ventana propiedades, dentro del campo link (enlace); y se repite el mismo procedimiento con los otros dos links.

Paginas faltantes Ya solo resta hacer una copia del index.html en la misma carpeta y renombrar esos archivos como alumnos.html y drako.html para tener la base de los archivos y solo realizar los cambios de contenido.

El contenido de esta obra se publica bajo la licencia creative commons - Atribución-No comercial-Licenciamiento Recíproco 2.5 México