DISEÑO WEB UPOLI-ESTELI

UNIVERSIDAD POLITECNICA DE NICARAGUA SEDE ESTELI

TRABAJO DE INGENIERA EN SISTEMAS: INFORME DE DISEÑO WEB

DREAMWEAVER

IV AÑO DE INGENIERIA EN SISTEMAS

ORIENTADO POR: ING. MARIO PASTRANA

ELABORADO POR: FRANKLYN NOEL GARCÍA ARMIJO

ESTELI JUEVES 3 DE JUNIO 2010

 DISEÑO WEB UPOLI-ESTELI

Dreamwever
Interfaz

Apariencia general
Nuestra andadura en la web ha comenzado con Dreamweaver y el estudio de XHTML.
A lo largo de las páginas de este documento iremos desarrollando los diferentes aspectos del diseño
de páginas web, combinando tanto las herramientas propias de dreamweaver (DW de ahora en
adelante), y recurriendo al código puro y duro en aquellos casos donde sea necesario.
En esta sección vamos a hablar sobre todo de la apariencia del programa, de algunas
recomendaciones acerca de su configuración y uso y de herramientas a las que podemos recurrir sin
que nuestro código resulte perjudicado.
Comencemos pues, con la apariencia y configuración del programa.

comenzar con dreamweaver

Al abrir el DW descubrimos que es muy similar en apariencia al resto de los programas de la

familia Macromedia:
Tenemos nuestros indispensables menús, una barra de herramientas para insertar elementos y
paletas para desarrollar los diferentes aspectos de nuestro diseño.
El resto del espacio lo ocupará el área de trabajo, donde iremos añadiendo los elementos que
necesite nuestro documento. No hablamos sólo de elementos visuales, como pueda ser el texto o las
imágenes, sino también de enlaces (links) o botones que nos validen un formulario.

La barra de herramientas
La barra de herramientas nos permite insertar diferentes elementos en nuestro documento. En
muchos casos nos ofrece un acceso rápido y cómodo a ciertas funciones del DW.
En el caso de que alguna vez tengamos que activarla (podemos cerrarla accidentalmente), debemos
hacerlo desde el Menú Ver > Barras de herramientas > Insertar.

La barra de herramientas nos ofrece varias opciones. Según la visualización que escojamos nos
aparecerán diferentes herramientas, específicas para cada caso.
En el apartado "Común", que aparece por defecto al abrir el programa por primera vez tenemos las
opciones más generales: crear tablas, puntos de ancla, insertar imágenes o crear imágenes de
sustitución son las que mejor funcionan.

Nota acerca de las herramientas de DW

Tengamos en cuenta que no todas las opciones de la barra de herramientas son recomendables.
Destacamos insertar formularios porque DW lo hace de manera aceptable, evitando que escribamos
código. Pero en otros casos, DW genera código inadecuado. Aprender a controlar nuestro código es
tan fundamental como saber para qué sirven las herramientas del programa.
 DISEÑO WEB UPOLI-ESTELI

Si pulsamos "Común" para desplegar las opciones de la barra, tendremos acceso al resto de
herramientas propias de cada apartado. Uno de los más útiles para evitarnos escribir código es el de
Formulario.

Desde aquí podemos definir qué tipo de elementos deseamos para nuestro formulario, insertar
campos para pedir información al usuario y botones que validen la información, de tal manera que
llegue a nuestro correo. Para más información, consulta el apartado sobre formularios.
¿Código o diseño?
Como ya te habrás dado cuenta, estamos haciendo mención a un buen uso del código XHTML. Esto
es importante para no generar un resultado a partir de una etiqueta inadecuada.
Por tanto, desde aquí aconsejamos utilizar el doble espacio de trabajo que nos ofrece DW. ¿Qué es
esto?
Básicamente, se trata de una opción que nos permite trabajar en el documento bien a nivel de
código, bien sólo en modo diseño (la apariencia de la web).
Nosotros sugerimos la tercera opción: el modo dividir.

De esta manera visualizamos diseño y código al mismo tiempo. Esta opción se encuentra en la barra
de herramientas "Documento", a la que accedemos desde el menú Ver > Barras de herramientas >
Documento.

Vista de código
Cuando navegamos por internet podemos solicitar al navegador que nos muestre el código fuente de
una página para saber cómo está hecha. Cuando trabajamos en nuestro documento en modo dividir
también tenemos ese código a mano.
Por defecto, DW suele mostrar el código ocupando tanto ancho como sea necesario. Esto puede
generar líneas de código interminables e incómodas de leer.
Para solucionar esto debemos activar una opción que permite visualizar el código según el ancho
del área de trabajo, de tal manera que no habremos de recurrir a las barras de desplazamiento
horizontales.
A esta opción llegamos desde el menú Ver > Opciones de vista de código > Ajustar texto.

Las paletas de trabajo

A medida que vayamos experimentando con DW y dominemos mejor el código necesitaremos
nuevas herramientas que nos aporten nuevas posibilidades.
Una de las primeras aspiraciones es, por supuesto, la de para que esté accesible en la red y pueda
ser visitada. Podemos también usar la paleta de los estilos CSS para gestionarlos desde nuestro
documento, o crear comportamientos.
También surgirá la idea de crear un pop-up o abrir una nueva ventana mostrando en detalle alguna
foto o cualquier otra cosa. Y a medida que queramos dar consistencia a nuestra página nos vendrá
 DISEÑO WEB UPOLI-ESTELI

bien aplicar los estilos CSS de manera más rápida que tecleando en código.
Muchas de estas operaciones se realizan desde las paletas que nos ofrece DW. Todas ellas pueden
activarse desde el menú Ventana.

El formato de texto en dreamwever

A.- CREAR Y CONFIGURAR LA PÁGINA O DOCUMENTO
1.- Crear Página: Archivo - Nuevo - Aparece el cuadro de diálogo «Nuevo documento» - En la lista
de categorías de la izquierda, bajo Categoría, seleccionar la categoría Página básica
- Hacer clic en Crear - Aparece la ventana de Documento vacía
2.- Guardar página: Archivo - Guardar como - En el campo «Guardan en» buscar la carpeta raíz y
subcarpeta - En el campo «Nombre de archivo» escribir el nombre del archivo y en el campo
«Guardar como tipo» seleccionar Todos los documentos - Guardar
3.- Abrir página: Archivo - Abrir
4.- Modificar página: Existen dos maneras: Modificar - Propiedades de la página o pulsar el botón
derecho del ratón y en el menú contextual seleccionar Propiedades de la página
a) Asignar un título al documento
b) Definir una imagen de fondo (si se quiere): Hacer clic en Examinar - En el campo Buscar en
seleccionar el disco local, carpeta y archivo de la imagen que se quiere poner de fondo- Aceptar -
Aparece un cuadro de mensaje - Aceptar - Aparece un segundo cuadro de diálogo - Contestar: Sí -
Guardar - Aceptar
c) Definir un color de fondo (si se quiere): Hacer clic en el cuadro Fondo - Seleccionar un color del
selector de color - Aceptar
B.- EDITAR TEXTO
1.- Escribir un texto
a) En la ventana del documento vacío escribir títulos y párrafos
b) Para insertar caracteres especiales en un documento, hacer uno de los siguientes pasos:
Insertar - Caracteres especiales - Seleccionar el carácter deseado
En la barra «Insertar» hacer clic en categoría «Caracteres» - Aparece el menú de caracteres -
Seleccionar el carácter deseado
Para utilizar otros caracteres especiales: Insertar - Caracteres especiales - Otro o también hacer clic
en el icono «Otros caracteres» (el último icono de la derecha del menú de caracteres) - Seleccionar
un carácter en el cuadro «Insertar otro carácter» - Aceptar
c) Para hacer el salto de línea (no confundir con el punto y aparte): En la barra «Insertar» marcar la
categoría «Caracteres» - Aparece la barra de menú de caracteres - Hacer clic en el botón «Salto de
línea» (primer botón de la izquierda)
d) Para insertar la fecha actual en el documento:
En la ventana de documento, situar el punto de inserción en el lugar donde se desea insertar la fecha
Insertar - Fecha o también, en la barra «Insertar» hacer clic en la categoría «Común» - Aparece un
menú de botones - Hacer clic en el botón «Fecha» - En el cuadro de diálogo que aparece seleccionar
el formato de día, fecha y hora - Activar la opción «Actualizar automáticamente al guardar» -
Aceptar
e) Para corregir la ortografía: Texto - Ortografía - En el cuadro «Ortografía» seleccionar la
ortografía correcta en el cuadro «Sugerencias» o teclear la palabra correcta en el cuadro «Cambiar
por» - Cambiar

2.- Dar formato al texto

a.- Aplicar fuentes y tamaños
Seleccionar el texto. Si no hay texto seleccionado, el cambio se aplicará al texto que se escriba a
continuación
Para cambiar la fuente, caben dos opciones:
o Texto - Fuente - Seleccionar la fuente deseada
 DISEÑO WEB UPOLI-ESTELI

o En el inspector de propiedades de Texto elegir una fuente o combinación de fuentes

Para editar la lista de fuentes: Texto - Fuente - Editar lista de fuentes - En el cuadro «Editar lista de
fuentes» seleccionar la fuente que se desee en el cuadro «Fuentes disponibles» - Hacer clic en el
botón << - Aceptar. Si se quiere quitar una fuente de la lista editada de fuentes, en el cuadro «Lista
de fuentes» seleccionar la fuente que se quiere quitar - Volver a seleccionar la misma fuente en el
cuadro «Fuentes elegidas» - Hacer clic en el botón >> - Aceptar
Para cambiar el tamaño de la fuente, existen dos opciones:
o Texto - Fuente - Tamaño - Elegir el número de tamaño
o En el inspector de propiedades de Texto, en el cuadro «Tamaño de texto» hacer clic en la flecha
de opciones - Seleccionar el número de tamaño que se desee
b.- Aplicar color al texto
Seleccionar texto
Existen dos opciones para cambiar el color de texto
o 1ª) Texto - Color - Se abrirá la paleta de colores - Hacer clic en el color deseado
o 2ª) En el inspector de propiedades de Texto hacer clic en icono de color de texto - Se abrirá la
paleta de colores - Hacer clic en el color deseado Figura
c.- Aplicar estilo al texto
Seleccionar texto
Existen tres opciones para aplicar estilo al texto
o 1ª) Texto - Estilo - Negrita, cursiva, etc.
o 2ª) En el inspector de propiedades de texto hacer clic en los botones negrita (B) o cursiva (I)
o 3ª) En la barra «Insertar» hacer clic en la categoría «Caracteres» - Aparece la barra de menú -
Hacer clic en los botones negrita (B) o cursiva (I)

3.- Alinear y sangrar texto

a) Para alinear texto:
Seleccionar texto
Para alinear texto existen dos posibilidades:
i. Texto - Alinear - Izquierda, centro, etc.
ii. En el inspector de propiedades de texto hacer clic en los botones «alinear a la izquierda»,
«alinear al centro», etc.
b) Para crear o quitar sangría de texto existen también dos opciones:
i. Texto - Sangrar o Anular sangría
ii. En el inspector de propiedades de texto hacer clic en los botones «sangría de texto» o «anular
sangría de texto»

4.- Crear una lista

a) Situar el punto de inserción en la línea o lugar donde se desea añadir una lista
b) Para empezar a crear una lista existen dos posibilidades:
1ª) Texto - Lista - Seleccionar el tipo de lista deseado en el menú desplegable
En el inspector de propiedades hacer clic en los botones «Lista sin ordenar» (viñeta) o «Lista
ordenada» (numerada)
c) Para terminar de crear la lista, se puede actuar de dos maneras:
Presionar dos veces seguidas la tecla Entrar
Después de haber pulsado la tecla Entrar, caben dos opciones:
o 1ª) Texto - Lista - Ninguno
o 2ª) En el inspector de propiedades de texto hacer clic en los botones «Lista sin ordenar» o «Lista
ordenada»

5.- Formato de párrafos y encabezados

a) Situar el punto de inserción en el párrafo o seleccionar parte del texto del párrafo
 DISEÑO WEB UPOLI-ESTELI

b) Existen dos posibilidades para aplicar o quitar una etiqueta de párrafo o encabezado:
1ª) Texto - Formato de párrafo - Elegir un formato de párrafo del menú desplegable
2ª) En el inspector de propiedades de texto hacer clic en el cuadro Formato - Aparece el menú
desplegable - Elegir la opción deseada
6.- Insertar una regla horizontal
En Dreamweaver es posible separar visualmente diferentes textos y objetos en la misma ventana de
documento con una o más reglas horizontales.
a) Para insertar una regla horizontal:
Situar el punto de inserción en el lugar donde se quiere insertar una regla horizontal
Existen dos opciones para insertar regla horizontal:
o 1ª) «Insertar - Regla horizontal
o 2ª) En la barra «Insertar» marcar la categoría «Común» - Aparece la barra de menú - Hacer clic en
el botón «Regla horizontal» (4º botón empezando por la derecha)
c) Para modificar una regla horizontal en la ventana de documento.
Seleccionar la regla horizontal que se quiere modificar
En el inspector de propiedades de «Regla horizontal» modificar las propiedades que se deseen:
ancho (An) y alto (Al), alineación de de la regla y sombreado

Hiperenlaces
Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento
esencial para cualquier página web.

Introducción
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de
una página o archivo a otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.
Referencia absoluta:
Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en
Internet, por ejemplo, "http://www.aulaclic.com".
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual.
Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo
del directorio en el que se encuentra el documento actual.
Puntos de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello
el vínculo debe ser "nombre_de_documento#nombre_de_punto". El punto se define dentro de un
documento a través del menú Insertar, opción Anclaje con nombre.
La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es
necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el
Vínculo en el inspector.
Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene
HTTP://

Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.
Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamientos,
 DISEÑO WEB UPOLI-ESTELI

etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla '#'.
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar
dependiendo de los marcos de que disponga el documento actual.
Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que aparece a
través del menú Insertar, opción Hipervínculo.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de
marcos padre.
_self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el
vínculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino,
ya que se volverán a ver en el tema de Marcos

Formato del hiperenlace

En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo,
puede adquirir tres colores diferentes que pueden especificarse a través de las propiedades de la
página. Estos tres colores diferentes son los que se asignan como color de vínculo, de vínculo activo,
y de vínculo visitado.
Aquí tienes un vínculo de ejemplo:
www.aulaclic.com

Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos al
pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece
el contorno de esa zona.
Aquí tienes dos vínculos similares de ejemplo:
 DISEÑO WEB UPOLI-ESTELI

Como puedes ver, la segunda imagen que hace de vínculo contiene un recuadro alrededor. Esto ocurre debido
a que que el campo Borde del inspector de propiedades de la imagen vale uno (1), mientras que para la
primera imagen vale cero (0).
El campo Borde sirve para ponerle un borde a la imagen, independientemente de si ésta va a contener un
vínculo o no.
Si se pone a cero (0), no aparece ningún borde, ya que esto indica que el tamaño de las líneas que forman el
recuadro es cero (0). Puede hacerse un recuadro más gordo incrementando el valor del campo Borde.

Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del
vínculo. Suele adquirir la apariencia de una mano señalando.