Diseño de página web

DREAMWEAVER

DISEÑO DE PÁGINA WEBHTML BÁSICO

QUÉ ES DREAMWEAVER…• Dreamweaver es la herramienta de diseño de páginas web más avanzada, tal como se ha afirmado en muchos medios. Aunque sea un experto programador de HTML el usuario que lo maneje, siempre se encontrarán en este programa razones para utilizarlo, sobretodo en lo que a productividad se refiere. Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional, y soporta gran cantidad de tecnologías, además muy fáciles de usar:

Hojas de estilo y capas Javascript para crear efectos e interactividades Inserción de archivos multimedia...

LA INTERFÁZ DE DREAMWEAVER

PARA ENTENDER MEJOR HTMTL…

• HTML («lenguaje de marcado de hipertexto»)

El HTML es mas una codificación que un lenguaje de programación. Su estructura básica es tan simple que cualquier persona sin principios en programación puede aprenderlo con gran facilidad.

Lo sorprendente de este lenguaje es que proporciona al usuario la información en una manera interactiva, haciendo uso del hipertexto , o texto con enlaces hacia otros lugares del Web, o hacia inserciones de multimedia (videos, sonidos, gráficos, etc.). Además es universal y no depende del sistema operativo que se esté utilizando.

ESTRUCTURA BÁSICAPara comenzar debemos saber que el HTML utiliza una codificación genérica, la cual hace uso de TAGS o etiquetas. Mediante estas etiquetas es posible separar el contenido del documento de su formato.

Los TAGS son comandos que se especifican en el cuerpo del programa, con el fin de darle las características deseadas a la información.

Toda página Web debe contener la siguiente estructura :

<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> Esta es mi primera página Web</BODY> </HTML>

ESTRUCTURA BÁSICAEntre la etiqueta <BODY> va el cuerpo del documento, el cual es lo que realmente vemos en el Web. Para comenzar a escribir un documento, es importante tener en cuenta que el lenguaje HTML no distingue mas de un espacio entre caracteres y se olvida de cualquier formato que se le de al texto (negrilla, cursiva, tipo de letra, entre otras). Recordemos que para esto es que se creó el HTML, toda presentación final debe ser proporcionada mediante las etiquetas.

Cada etiqueta, con excepción de unas cuantas, le debe indicar al visualizador cuando finaliza, para lo cual se utiliza </TAG>, donde TAG es puede ser cualquier etiqueta. De esta manera indicamos cuando comienza y termina el encabezado, el título, el cuerpo y el documento HTML.

ETIQUETAS HTML…

ETIQUETAS HTML…• LISTAS Las listas sirven para desplegar la información que debe ser enumerada o tabulada de una manera organizada. En el lenguaje HTML se pueden construir varios tipos de listas :

Lista numerada: Numera los párrafos u objetos que se encuentran dentro de la siguiente estructura : <OL><LI> Primer párrafo u objeto.<LI> Segundo párrafo u objeto.Etc...</OL>

Útiles para crear tablas de posiciones y enumerar procedimientos.

Lista con viñetas: Inserta un punto negro a los párrafos u objetos que se encuentran dentro de la siguiente estructura : <UL><LI> Primer párrafo u objeto.<LI> Segundo párrafo u objeto.Etc...</UL>

Son útiles para enumerar por puntos los comentarios de su página.

ETIQUETAS HTML…• Lista de definición: Son útiles para las entradas de tipo

diccionario o para las secciones de documentos donde un término es el encabezado de la sección y la definición es el texto de aquella.

La estructura es la siguiente :

<DL><DT> Primer término.<DD> Primera definición.<DT> Segundo término.<DD> Segunda definición.Etc...</DL>

• A cada una de estas listas se les puede crear una lista dentro de ellas, simplemente agregando la estructura deseada dentro de la etiqueta correspondiente.

ETIQUETAS HTML…VÍNCULOS DE HYPERTEXTO

• El hipertexto son vínculos dentro del texto del documento HTML que permiten al usuario navegar con facilidad, tanto a nivel interno como externo, es decir , pueden crearse vínculos que lleven hacia una misma parte del documento (interno) o hacia otra parte del mundo Web (externo).

Las etiquetas HTML que se encargan de generar los vínculos son <A> y </A>. A esta etiqueta se le debe agregar el "URL" con el que se desea vincular. Esto se realiza de la siguiente manera :

<A HREF="URL">Texto del vínculo</A>

ETIQUETAS HTML…AGREGANDO IMÁGENES A SU PÁGINA

Las páginas en el Web no deben estar llenas de texto por todos lados pues esto hace que los usuarios se aburran de verlas y como resultado obtendrán una página que nunca es visitada. Una herramienta muy útil para hacer de las páginas un documento llamativo y amigable es hacer uso de imágenes relacionadas con el texto al que se esta haciendo referencia. ¿Se imaginan una valla publicitaria sin ningún tipo de imagen ?

También es muy importante una excelente combinación de colores de fondo y de texto, con el fin de hacer que la página sea lo mas leíble posible. Es en este punto donde entra a jugar la creatividad del diseñador.

Para colocar una imagen en una página basta con llamarla desde el documento HTML ( es similar los vínculos hacia páginas cercanas). Lo primero es diseñar el gráfico deseado en cualquier programa de dibujo como el Corel Draw o el Adobe Photoshop, luego se debe convertir a cualquiera de los formatos aceptados por el lenguaje HTML (GIF y JPEG).

La estructura es la siguiente : <IMG SRC= "Nombre del archivo" >

Donde "Nombre del archivo" es el nombre del archivo de gráfico que desea desplegar.

ETIQUETAS HTML…ESTRUCTURA BÁSICA DE LAS TABLAS

<TABLE BORDER="Número entre 0 y 7"> <CAPTION ALIGN=TOP ó BOTTOM>;Aquí va el texto del título</CAPTION> <TR><TD>Primera fila, primera columna</TD><TD>Primera fila, segunda columna</TD><TD>Primera fila, tercera columna</TD>.......... </TR><TD>Segunda fila, primera columna</TD> <TD>Segunda fila, primera columna</TD> <TD>Segunda fila, primera columna</TD> .......... </TR> etc... </TABLE>

Notas: El número que se designa en la etiqueta <TABLE BORDER="Número entre 0 y 7"> determina el ancho del borde de la tabla. Este número puede estar entre 0 y 7.

Se preguntarán que significa la etiqueta <CAPTION ALIGN=TOP ó BOTTOM>; Aquí va el texto del título</CAPTION>. Simplemente da la posibilidad de colocarle un título a la tabla, bien sea en la parte superior (TOP) o en la parte inferior (BOTTOM).

FIN DE LA PRESENTACIÓN…

Creado por:

Alejandro González RojasVictor Aurelio González

Pérez

Diseño de página web

Design

Transcript of Diseño de página web