Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Diseño de Pagina Web PDF
Diseño de Pagina Web PDF
Para comenzar, se verá que el HTML es un lenguaje que se basa en SGML (estándar
internacional para la definición de métodos de representación de texto en forma electrónica no ligados
a ningún sistema ni a ningún dispositivo), lo que quiere decir que todo irá encerrado entre dos
etiquetas, normalmente, una que indica el comienzo de algún elemento del documento y otra que
indica el final del mismo. Estas son de la forma:
Cada una va entre los signos de “menor que” (<) y “mayor que” (>). Como podemos ver, para
cerrar el elemento irá una “barra” (/) después de la indicación de comienzo de una etiqueta. Al
principio y final del texto tenemos la etiqueta HTML, que indica que estamos ante una página Web
programada en HTML.
Estas dos etiquetas siempre aparecerán en los ficheros programados en HTML para indicarle al
navegador que lo que está interpretando es lenguaje HTML.
Más adelante, cuando se tengan los conocimientos básicos, se comentarán algunas cosas más
que se pueden hacer con las cabeceras.
En el cuerpo irá la información que se verá en la pantalla del navegador y por lo tanto, la
mayoría de las etiquetas que veremos en el resto del seminario.
<HTML>
<HEAD>
<TITLE> Título de mi página</TITLE>
</HEAD>
<BODY>
Esta podría ser mi primera página Web, creada en lenguaje HTML.
</BODY>
</HTML>
¾ Etiquetas básicas
<head></head> Muestra el título y otro tipo de información que no se muestra en la propia página
Web.
<body bgcolor=”?”> Determina el color del fondo, utilizando un nombre o un valor hexadecimal.
Por ejemplo:
<body bgcolor=”#FFFF99”>
<body text=”color”> Determina el color del texto, mediante un nombre o un valor hexadecimal.
<body link=”color”> Determina el color de los enlaces, mediante un nombre o un valor hexadecimal.
<body vlink=”color”> Determina el color de los enlaces visitados, mediante un nombre o un código
hexadecimal.
¾ Etiquetas de texto
<FONT></FONT>
Por ejemplo:
<font size= “2” face= “Arial, Helvetica, sans-serif” color=“#663399”>
<h1></h1> Crea encabezados. Hay seis niveles de encabezados, de H1 (el más grande) a H6 (el más
pequeño).
¾ Enlaces
Por ejemplo:
<ahref=http://www.un.org/chinese/av/radio/latenews.htm>Chino</a>
Por ejemplo:
<A HREF="mailto:fuentesp@un.org">Envíe un mensaje</A>
¾ Enlaces específicos
<a href="#NAME"></a> Enlaza con el destino deseado desde cualquier otro punto del documento.
Por ejemplo:
<a href= “#norte”>Desde el norte</a>
<I><a name=”norte”></a>Desde el norte:</I>
Por ejemplo:
<a href="guide.htm#scholarships" >BECAS</a>
<font color="#FF0000"><a name="scholarships"></a> Becas</font>
¾ Formato
Por ejemplo:
<p align=”justify”>…</p>
¾ Listas
Por ejemplo:
Lista numerada
<OL>
<LI>Elemento1 </li>
<LI>Elemento2 </li>
<LI>Elemento3 </li>
</OL>
Por ejemplo:
Lista de definiciones
<DL>
<DT> LEÓN <DD> Gran mamífero carnívoro de la familia de
los Félidos, de pelaje entre amarillo y rojo. Tiene la
cabeza grande, los dientes y las uñas muy fuertes y la cola
larga y terminada en un fleco de cerdas. El macho se
distingue por una larga melena.
<DT> LEOPARDO <DD> Mamífero carnicero de metro y medio
de largo desde el hocico hasta el arranque de la cola, y de
unos siete decímetros de alto. El aspecto general es el de
un gato grande, de pelaje blanco en el pecho y el vientre,
y rojizo con manchas negras, redondas y regularmente
distribuidas en todo el resto del cuerpo. Vive en los
bosques de Asia y África, y a pesar de su magnitud trepa
con facilidad a los árboles en persecución de los monos y
de otros animales.
<DT> GALLINA <DD>Hembra del gallo, de menor tamaño que
este, cresta pequeña o rudimentaria, cola sin cobijas
prolongadas y tarsos sin espolones. <DD> Persona cobarde,
pusilánime y tímida.
</DL>
¾ Elementos gráficos
Atributos de la imagen:
- WIDTH (ancho)
- HEIGHT (alto)
- ALT (texto alternativo)
Por ejemplo:
<img src="images/goose.gif" width="158" height="36" align="top” alt=
"En esta imagen se muestra un ganso”>
<img src="name" border=”?”> Determina el tamaño del borde alrededor de una imagen.
Por ejemplo:
<img src="images/language%20rollovers/radnewsweb.gif" width="81"
height="69" border="0">
Por ejemplo:
<HR SIZE="5" WIDTH="75">
<HR SIZE="2" WIDTH="25%">
¾ Tablas
<th></th> Determina el encabezado de una tabla (una celda normal con texto centrado y en negrita).
Atributos de la tabla:
- BORDER: determina la anchura del borde alrededor de las celdas de una tabla.
- CELLSPACING: determina la cantidad de espacio entre las celdas.
- CELLPADDING: determina la cantidad de espacio entre el borde de una celda y los contenidos
de la misma.
- WIDTH: determina el ancho de una tabla (en píxeles o como porcentaje del ancho del texto).
Por ejemplo:
<table width="85%" border="1">
Atributos de celda:
- ALIGN : determina el tipo de alineación para la(s) celda(s) (izquierda, centrada o derecha).
- VALIGN: determina la alineación vertical para la(s) celda(s) (superior, centrada, inferior).
Por ejemplo:
<tr align=”center” valign=”top”>
Atributos de columna:
- COLSPAN: determina el número de columnas que se extenderá una celda.
- ROWSPAN: determina el número de filas que se extenderá una celda (valor por defecto=1)
- NOWRAP: evita que las líneas de una celda se rompan en su proceso de ajuste.
Por ejemplo:
<td colspan=”2”>
<td rowspan=”2”>
<td nowrap>
<TD>7</TD>
<TD>8</TD>
</TR>
</TABLE>
2. El entorno Dreamweaver MX
Esto lo hace permitiendo que el usuario personalice a su gusto el entorno de trabajo. En esta
lección vamos a familiarizarnos con las principales áreas de trabajo del programa. En la imagen
inferior vemos señalada la barra de título y en ella, además de ver el nombre de la aplicación, el título
de la página que tengamos activa, también veremos los iconos de gestión de ventanas típicos de
Windows.
Debajo de la barra de título tenemos la barra de menús. En ella tenemos acceso a todos los
menús, desde los cuales podemos manejar con eficiencia las numerosas opciones del programa.
Debajo de la barra de menús, nos encontramos la barra de los grupos de paneles, que es
contextual, lo que significa que va cambiando dinámicamente según la tarea en la que estemos
trabajando. Más adelante veremos su funcionamiento en detalle.
En la zona de la derecha: el programa nos permite utilizar unas plantillas de ejemplos para crear
nuestros documentos de una manera rápida y sencilla. En la izquierda y en la zona inferior de la
ventana que contemplamos tenemos otros paneles con funciones avanzadas, que iremos descubriendo a
lo largo del curso, según los vayamos necesitando. En la siguiente página se incluye una imagen que
muestra, a modo de referencia, lo que venimos diciendo.
En este tema nos centramos en los iconos que están relacionados con la ventana del
documento. En la ventana del documento es donde visualizaremos y editaremos la página Web en la
que trabajemos. Aquí tenemos abierto un documento llamado Untitled Document.
La barra del título del documento tiene los típicos controles de minimización, maximización y
cerrar ventana. Esto es útil en el caso de que tengamos abiertos simultáneamente varios documentos.
En la parte inferior de la ventana del editor tenemos la barra de estado. En la parte inferior derecha de
la misma podemos ver varios indicadores muy útiles, tal y como se puede apreciar en la siguiente
imagen:
Con el indicador de la derecha el programa nos indica el tamaño del documento en Kilo bytes y
el tiempo que un navegador estándar tardaría en visualizar completamente la página con una conexión
telefónica a Internet. A su izquierda el programa nos indica las dimensiones en píxeles de la página que
estamos creando. Pero no sólo eso, sino que Podemos elegir entre una lista de tamaños
predeterminados, como se muestra a continuación:
El tamaño óptimo depende de las dimensiones del monitor o pantalla en que se visualice la
página. Dado que por ahora la mayoría de los usuarios de Internet tienen monitores de 800x600
píxeles, si diseñamos una página con un tamaño superior provocamos que las personas que nos visiten
visualicen incorrectamente nuestras páginas. Debemos tener muy presente que el objetivo de nuestra
página es que sea vista por el mayor número posible de personas, por lo que no debemos poner trabas
innecesarias a nuestros visitantes.
En la vista Código (Show Code View), el programa nos muestra el código HTML de la página
y nos permite editar directamente las instrucciones con las que el navegador del usuario mostrará la
página y que más adelante veremos qué significan exactamente.
En la vista Diseño (Show Design View), el programa nos da una aproximación de cómo se
visualizará en el navegador del usuario. Por último, la vista Dividir (Show Code and Design Views),
nos muestra simultáneamente el código y la vista de diseño; de esta manera podemos escribir
instrucciones en lenguaje HTML en la página e instantáneamente comprobaremos cómo se visualizaría
en un navegador.
Pero para ver en pantalla completa cómo se visualizará la página en un navegador podemos
pulsar en el icono de previsualización (Preview).
El programa abrirá la ventana del navegador que tengamos asociada por defecto y nos mostrará
la página completa. En la ventana de previsualización (Preview), podemos detectar tanto los errores
de diseño como los de código, y directamente corregirlos en la aplicación sin tener que grabar y abrir
el documento con cada prueba
En el menú que se desplegará, buscaremos la opción Nuevo (New) y pincharemos en ella con el
botón izquierdo del ratón.
Se nos abrirá una ventana como la que vemos en la imagen inferior. En ella podremos elegir
entre diversos tipos de documentos, el que deseemos crear. Nosotros pulsaremos en la pestaña General
(General) y en el panel de la izquierda llamado Categoría (Category) elegiremos Página básica
(Basic Page). El panel adyacente cambiará de manera contextual dependiendo de la opción que
hayamos elegido en el panel de categorías. Como por ahora hemos elegido Página básica, éste será el
título del panel de la izquierda y entre las distintas opciones que se nos presentan pulsaremos sobre
HTML. Veremos que hay una gran variedad de documentos que podemos crear desde aquí.
Una vez que hemos aprendido a crear documentos nuevos, cuando hayamos terminado de
trabajar con ellos, necesitaremos aprender a guardarlos para poder recuperarlos en el futuro. Para ello
desplegaremos de nuevo el menú Archivo (File) y buscaremos esta vez la opción Guardar (Save).
Al pulsar sobre la opción Guardar (Save) se nos abrirá una ventana titulada Guardar como
(Save As). En ella vemos varias zonas importantes. En la zona superior podemos elegir la carpeta
donde queramos guardarlo, eligiendo Guardar en (Save in). En la zona inferior introduciremos el
nombre con el que deseamos conservar el documento.
Para finalizar sólo tenemos que pulsar el botón Guardar (Save) en la ventana activa.
El primer paso es ir al menú Archivo (File), pulsaremos sobre él con el botón izquierdo del
ratón, y en el menú que se desplegará buscaremos la opción Abrir (Open).
Una vez que hayamos pulsado sobre la opción Abrir (Open) del menú Archivo (File),
aparecerá una ventana de diálogo como la que vemos en la imagen inferior. Es un cuadro de diálogo
muy semejante al que ya conocimos cuando guardamos el documento.
En la zona superior podemos navegar por las distintas carpetas hasta encontrar el lugar donde
tenemos almacenado el documento.
Cuando hayamos encontrado la carpeta sólo tendremos que elegir de entre la lista mostrada el
título del documento que deseemos abrir y pulsaremos sobre él dos veces con el botón izquierdo del
ratón.
Una vez que hemos aprendido a crear un documento, a guardarlo y a recuperarlo, vamos a
aprender ahora a cerrar el documento. Esto lo haremos cuando hayamos acabado de trabajar con el
documento en cuestión, bien porque ya no lo necesitemos más, o por que tengamos muchos
documentos abiertos y necesitemos despejar un poco el área de trabajo.
Para ello iremos otra vez al menú Archivo (File), tal como ya sabemos. Y allí pulsaremos en la
opción Cerrar (Close), tal como vemos en la imagen de la próxima página.
Y ahora, en el caso de que hayamos modificado el documento, vemos que nos aparece un
cuadro de diálogo como el que vemos en la siguiente imagen.
En este cuadro nos pregunta, en caso de que hayamos modificado algo desde la última vez que
grabamos el documento, si queremos guardar los cambios en el documento en el que hemos estado
trabajando.
Si pulsamos No (No) todos los cambios realizados desde la última grabación serán descartados.
Esto es útil en el caso de que no nos guste nuestra página y prefiramos una versión anterior de ella,
algo que suele pasar muy a menudo . Si pulsamos Sí (Yes), se guardarán los cambios realizados sobre
el documento. Pero, atención, es posible que hayamos cometido un error y hayamos pulsado el botón
Sí (Yes), de manera mecánica.
El programa nos da una última oportunidad para meditarlo y nos muestra otro cuadro de
diálogo como el inferior.
Por último, una vez que hayamos guardado, o no, los cambios sobre la página, sólo nos queda
salir del programa. Y para ello volveremos al menú Archivo (File). Buscaremos en el final del menú y
pulsaremos sobre la opción Salir (Exit). En la siguiente página se muestra una imagen a modo de
referencia visual.
3. El sitio Web
Hasta ahora sólo hemos creado una página Web en blanco. Pero las páginas de verdad tienen
contenido y este contenido puede formarse con diversos documentos que pueden abarcar desde otras
páginas HTML, imágenes, scripts, animaciones, hasta cualquier tipo de objeto que podamos vincular
en una página HTML.
El conjunto de todos estos documentos que forman parte de la página se llama, en el lenguaje
de las páginas Web, un sitio, site en inglés. Vamos a aprender a diseñar un sitio para albergar nuestras
páginas y sus elementos, de una forma sencilla.
Ahora que sabemos lo que es un sitio vamos a configurarlo paso a paso. Todas las opciones de
configuración están en el menú Sitio (Site) de la barra de menús.
Pulsando sobre el botón Sitio (Site), se despliega un menú. Para configurarlo por primera vez
pulsaremos en la opción Administrar sitios (Edit Sites).
Al seleccionar esa opción se abrirá un asistente en el que el programa nos irá haciendo una
serie de preguntas que tendremos que ir respondiendo para poder configurar nuestro nuevo sitio.Una
vez introducida la información requerida por el asistente en cada una de las pantallas de las que consta,
tendremos que presionar Siguiente (Next), y así una y otra vez hasta llegar a la pantalla final. En la
imagen inferior podemos apreciar el aspecto que presentará el cuadro de diálogo inicial del asistente.
A continuación presentaremos, a modo de resumen, las distintas preguntas que tendremos que
responder para configurar nuestro sitio, con sus correspondientes respuestas.
En la primera pantalla, el asistente nos pregunta qué nombre queremos dar a nuestro sitio
(What would you like to name your site?), a la cual responderemos introduciendo en el campo en
blanco el nombre que deseemos. A continuación, haremos clic en Siguiente (Next).
La próxima pregunta que tendremos que responder es la siguiente: ¿Quiere trabajar con una
tecnología de servidor como Cold-Fusion, ASP.NET, ASP, JSP, o PHP? (Do you want to work with
a server technology such as Cold-Fusion, ASP.NET, ASP, JSP, or PHP?). Para ello, tan sólo
tendremos que seleccionar una de las dos opciones que se nos presentan. En nuestro caso,
seleccionaremos la primera, que dice: No, no quiero utilizar una tecnología de servidor como Cold-
Fusion, ASP.NET, ASP, JSP, o PHP (No, I do not want to use a server technology such as Cold
Fusion, ASP.NET, ASP, JSP, o PHP). A continuación, haremos clic en Siguiente (Next).
En la ventana que se nos abrirá, tendremos que responder a la pregunta de cómo queremos
trabajar con nuestros archivos durante el desarrollo de nuestro sitio (How do you want to work
with your files during development?) y seleccionaremos la primera de las tres opciones que se nos
ofrecen, es decir, le diremos al programa que queremos editar copias locales en nuestra máquina y
subirlas al servidor cuando estén listas (Edit local copies on my machine, then upload to server
when ready). Esta es, además, la opción recomendada (Recommended).
En la parte inferior de esta misma ventana encontramos un campo vacío bajo la pregunta ¿en
qué lugar de su ordenador quiere almacenar sus archivos? (Where on your computer do you want
to store your files?), a la que debemos responder introduciendo en el campo en blanco la ruta de acceso
a la carpeta en que deseamos guardarlos. Una vez introducidos los datos necesarios haremos clic en
Siguiente (Next) para pasar a la siguiente pantalla.
En ésta, se nos preguntará de qué modo queremos conectar con nuestro servidor remoto
(How do you want to connect to your remote server?). En el menú desplegable seleccionaremos
Ninguno (None), y al llevar a cabo esta acción veremos que la segunda pregunta que nos aparecía en la
parte inferior de la ventana desaparece automáticamente. A continuación, haremos clic en Siguiente
(Next).
La última ventana del asistente para la configuración inicial de nuestro sitio consistirá en un
resumen (Summary) de los datos que hemos introducido en las anteriores pantallas, con lo que se nos
permite revisar los datos relativos a la configuración de nuestro sitio por última vez, antes de concluir
la operación. Si estamos de acuerdo con la configuración pulsaremos Listo (Done). Si no lo estamos,
tenemos la posibilidad de retroceder haciendo clic en Atrás (Back) tantas veces como nos sea
necesario, para modificar cualquiera de los datos introducidos en las pantallas precedentes.
Cuando hayamos terminado de configurar nuestro sitio, se abrirá un cuadro de diálogo con
todas las opciones para administrarlo. Como aún no tenemos creado ninguno, pulsaremos en el botón
Nuevo (New).
El programa nos preguntará qué es lo que queremos crear exactamente un sitio o un servidor
FTP y RDS. Por ahora sólo vamos a crear un sitio.
Una vez confirmando en el cuadro de diálogo que queríamos crear un nuevo sitio. Pulsaremos
sobre la opción Sitio (Site) de la barra de menús.
Veremos que se abre otra ventana de diálogo como la que veíamos anteriormente, y de manera
idéntica iremos contestando a las preguntas que nos va haciendo el programa y pulsaremos el botón
Siguiente (Next) después de introducir en cada ventana las respuestas que nos pide.
La primera cuestión que el programa nos plantea es el nombre del sitio (What would you like
to name your site?). Es muy útil que el nombre tenga una fuerte relación con el contenido de la página
para poder recordarlo fácilmente.
Cuando nos pregunte cómo vamos a trabajar nuestras páginas elegiremos la primera opción.
La cuestión de abajo se interesa en la forma en como subiremos las páginas que creemos al
servidor de Internet. Por ahora no vamos a preocuparnos de esto y por lo tanto elegiremos la opción
Ninguno (None).
En los temas anteriores ayudamos al programa a configurar nuestro sitio. En este tema vamos a
personalizar un poco más nuestro sitio para adecuarlo a nuestras necesidades de trabajo. Para ello
volvemos a la ventana de diálogo Administrar sitios (Edit Sites).
Y esta vez, como ya tenemos creado el sitio CursoDreamweaver pulsaremos el botón Editar
(Edit), tal y como se muestra en la imagen que sigue en la próxima página.
En la sección Datos locales (Local Info), que vemos en la imagen inferior, podemos cambiar y
ajustar los valores del sitio, tales como el nombre del sitio, que ya conocemos. También podemos
modificar la carpeta raíz local, lo cual significa que podemos designar manualmente la carpeta donde
deseemos situar las páginas que creemos y los documentos vinculados a ella.
Con la opción Actualizar lista archivos (Refresh Local File List Automatically) que veíamos
activada en la imagen nos aseguramos que cuando modifiquemos un archivo se actualicen
automáticamente las carpetas locales durante las copias.
El último paso para la edidción de nuestro sitio lo podemos apreciar en las opciones de la
imagen inferior. Es necesario configurar la Dirección HTTP (HTTP Address) de nuestro sitio, con lo
que el programa detecta y distingue automáticamente las direcciones www de páginas internas a
nuestro sitio, lo que permite ahorrar tiempo al navegar.
Con la opción Caché (Cache) activada, el programa actualiza y gestiona todos los cambios de
las páginas y sus enlaces internos automáticamente. Por ejemplo, si cambiamos una imagen no
tenemos que ir modificando una a una todas las páginas.
Ya hemos aprendido a configurar y editar el sitio, ahora veremos rápidamente el resto de las
opciones del cuadro de diálogo Administrar sitios (Edit Sites), que nos ayudarán a gestionar más
fácilmente nuestro sitio. En la siguiente página se muestra el cuadro de diálogo a modo de referencia.
Las opciones, Nuevo (New) y Editar (Edit), ya las conocemos, por lo que no nos reiteramos
más en el tema. Las siguientes opciones son Duplicar (Duplicate), Quitar (Remove) y Exportar
(Export).
Duplicar (Duplicate), crea un duplicado del sitio que tenemos activo, logramos duplicar
totalmente la estructura del sitio. Es muy útil para crear duplicados perfectos del sitio en otros
servidores, sobre todo si tenemos utilizarlo como plantilla de la estructura.
La opción Exportar (Export), nos permite guardar las características del sitio en un archivo
XML (Lenguaje Extensible de Marcado), de forma que con un sólo archivo podemos guardar,
recuperar, e incluso compartir con otras personas las características del sitio fácilmente.
Las últimas opciones son Importar (Import), que es la opción complementaria de Exportar
(Export), con la cual podemos crear un nuevo sitio a partir de las características de otros sitios
exportados, y la opción Ayuda (Help), que se explica por sí misma.
Una vez que pulsemos sobre Salir (Exit), Dreamweaver se cerrará y nos mostrará el escritorio.