Paginas Web

Tutorial
paso
a
paso
para
la
planeación
y
desarrollo

de
una
página
web
usando
la
herramienta

Macromedia
Dreamweaver
8
Version 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.5MéxicoPROPÓSITOS
Lo 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 unapá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 unahistoria 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 archivosEsquema general de la páginaCONTENIDO
En este punto es cuandose 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.
DEFINIR
EL
DISEÑO
En este ejemplo, la página va a utilizar imágenes en formato JPG, sutipografí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 coloresvamos 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 materiallisto, entonces podemos pasar a Dreamweaver para armar nuestra
página web.DREAMWEAVER
1.- 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...