INFORME DE DISEÑO WEB DREAMWEAVER UPOLI ESTELI

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


DreamweverInterfaz

Apariencia generalNuestra 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 herramientasLa 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 DWTengamos 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.


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ódigoCuando 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 trabajoA 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á


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 dreamweverA.- 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


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


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

HiperenlacesVamos 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ónUn 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,


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:

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 conte-ner 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.

http://www.aulaclic.com/




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.

INFORME DE DISEÑO WEB DREAMWEAVER UPOLI ESTELI

Documents

Transcript of INFORME DE DISEÑO WEB DREAMWEAVER UPOLI ESTELI