Modulo I

Internet, el instrumento esencial de la diplomacia del siglo XXI
INTRODUCCIÓN AL DISEÑO DE PÁGINAS WEB
1. Nociones básicas de HTML: las etiquetas
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:
<ETIQUETA parámetros> </ETIQUETA>
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.
<HTML> Indica el comienzo de un documento en formato HTML.
</HTML> Indica el final del documento.
Estas dos etiquetas siempre aparecerán en los ficheros programados en HTML para indicarle al
navegador que lo que está interpretando es lenguaje HTML.
1.1. El interior de un documento
Como se ha comentado en el apartado anterior, toda página en HTML tendrá al principio la

etiqueta <HTML> y al final </HTML>. El interior del documento se compone de una cabecera (head)
y un cuerpo (body). En la cabecera se pondrá la información relativa a la página y en el cuerpo, el
contenido de ésta. Al igual que sucede con el conjunto de la página en HTML, cada una de estas partes
tiene su etiqueta de comienzo y fin (ver el ejemplo).
Dentro de la cabecera se puede poner el título de la página de la siguiente forma:
<TITLE> Título de nuestra página Web </TITLE>
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.
Introducción al diseño de páginas Web -1-

Ejemplo de una página Web básica:
<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>
1.2. Listado de etiquetas para utilizar como referencia en HTML
¾ Etiquetas básicas
<html></html> Crea un documento HTML.
<head></head> Muestra el título y otro tipo de información que no se muestra en la propia página
Web.
<body></body> Muestra la parte visible del documento.
¾ Etiquetas del encabezado
<title></title> Sitúa el nombre del documento en la barra de título.
¾ Atributos del cuerpo del texto
<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.
<body alink=”color”> Determina el color de los enlaces activos.
¾ Etiquetas de texto
<FONT></FONT>
Los atributos básicos de la etiqueta FONT son tres:

- SIZE: determina el tamaño de la fuente, de 1 a 7.
- FACE: indica la fuente que se desea utilizar. Puede escoger cualquier tipo de fuente que desee
que aparezca en su página.
- COLOR: determina el color de la fuente, mediante un nombre o un código hexadecimal.
Por ejemplo:
<font size= “2” face= “Arial, Helvetica, sans-serif” color=“#663399”>
<b></b> Crea un texto en negrita.
<i></i> Crea un texto en cursiva.
<h1></h1> Crea encabezados. Hay seis niveles de encabezados, de H1 (el más grande) a H6 (el más
pequeño).
¾ Enlaces
<a href="URL"></a> Crea un hipervínculo.
Por ejemplo:
<ahref=http://www.un.org/chinese/av/radio/latenews.htm>Chino</a>
<a href="mailto:EMAIL"></a> Crea un enlace mailto.
Por ejemplo:
<A HREF="mailto:fuentesp@un.org">Envíe un mensaje</A>
¾ Enlaces específicos
Mismo sitio, misma página:

<a href="#NAME"></a> Enlaza con el destino deseado desde cualquier otro punto del documento.
<a name="NAME"></a> Crea un punto de destino dentro de un mismo documento.
Por ejemplo:
<a href= “#norte”>Desde el norte</a>
<I><a name=”norte”></a>Desde el norte:</I>
Mismo sitio, distinta página:
<a href="FILENAME.htm#NAME"></a> Enlaza con el punto de destino desde un punto

cualquiera de un documento distinto.
<a name="NAME"></a> Crea un punto de destino dentro de un mismo documento.
Por ejemplo:
<a href="guide.htm#scholarships" >BECAS</a>
<font color="#FF0000"><a name="scholarships"></a> Becas</font>
¾ Formato
<p></p> Crea un nuevo párrafo.
Existen distintas posibilidades para alinear el texto en un párrafo:

- JUSTIFY (justificado)
- LEFT ( a la derecha)
- RIGHT (a la izquierda)
- CENTER (centrado)
Por ejemplo:
<p align=”justify”>…</p>
<br> Inserta un salto de línea. No hace falta cerrar la etiqueta.
<BLOCKQUOTE> </BLOCKQUOTE> Indenta el texto por ambos lados, siguiendo la norma

habitual para la escritura de citas.
¾ Listas
<ol></ol> Crea una lista numerada (ordenada).

<ul></ul> Crea una lista con símbolos (simple o no ordenada).
<li></li> Precede a cada elemento de la lista y añade un número.
Por ejemplo:
Lista numerada
<OL>
<LI>Elemento1 </li>
<LI>Elemento2 </li>
<LI>Elemento3 </li>
</OL>
Lista con símbolos

<UL>
<LI>Elemento1 </li>
<LI>Elemento2 </li>
<LI>Elemento3 </li>
</UL>
<dl></dl> Crea una lista de definiciones.
<dt> Precede a cada elemento de la definición.
<dd> Precede a cada definición.
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
<img src="filename.extension"> Inserta una imagen.
Atributos de la imagen:
- WIDTH (ancho)
- HEIGHT (alto)
- ALT (texto alternativo)
La alineación de la imagen puede producirse de las siguientes maneras:

- LEFT (izquierda)
- RIGHT (derecha)
- CENTER (centro)
- BOTTOM (inferior)
- TOP (superior)
- MIDDLE (media)
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">
<hr> Inserta una barra horizontal
La etiqueta tiene dos atributos básicos:

- SIZE: determina el tamaño (alto) de la barra.
- WIDTH: determina el ancho de la barra, a modo de porcentaje de un valor absoluto.
Por ejemplo:
<HR SIZE="5" WIDTH="75">
<HR SIZE="2" WIDTH="25%">
<hr noshade> Crea una barra sin sombreado.
¾ Tablas
<table></table> Crea una tabla.

<tr></tr> Determina las filas de una tabla.
<td></td> Determina las celdas de una fila.
<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>
Ejemplo de una tabla completa:

<TABLE BORDER="5" CELLSPACING="10" CELLPADDING="15" WIDTH="75%"
ALIGN="CENTER">
<TR ALIGN="RIGHT">
<TD COLSPAN="2">1</TD>
<TD>2</TD>
</TR>
<TR ALIGN="CENTER">
<TD ROWSPAN="2">4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
<TR ALIGN="LEFT">

<TD>7</TD>
<TD>8</TD>
</TR>
</TABLE>
2. El entorno Dreamweaver MX
El programa Dreamweaver es una aplicación muy completa, de gran funcionalidad y muy

potente, pero a la vez está diseñada para hacer más cómodo el trabajo al usuario. Naturalmente, tener
una aplicación con un gran número de funciones implica un gran número de botones, menús, opciones
y pulsar cientos de clics, que a primera vista pueden resultar muy complicados ¿Entonces cómo puede
Dreamweaver combinar a la vez potencia y comodidad?
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.

2.1. Ventana del documento
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.
2.1.1. Vistas de edición
En la barra de documentos, en la esquina superior izquierda, vemos tres botones que

modifican la vista de trabajo del documento: Código (Show Code View), Dividir (Show Code and
Design Views) y Diseño (Show Design View). Son las tres formas que el editor nos permite visualizar
el documento para su edición.
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
Introducción al diseño de páginas Web - 10 -

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
2.2. Crear un nuevo documento
A continuación procedemos a crear nuevos documentos. Para ello debemos ir a la barra de

menús y pulsar en el menú Archivo (File).
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í.

2.3. Guardar un documento
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.
2.4. Recuperar un documento
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.
2.5. Cerrar un documento
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.
3.1. Configurar un sitio nuevo
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.
La respuesta a la siguiente pregunta dependerá de la tecnología con la que deseemos trabajar.

Ya dijimos antes que una página Web puede enlazar documentos de muy diferentes tipos, algunos de
los cuales son utilizados para intercambiar información con el servidor. En esta opción elegimos el tipo
documento dependiendo de las características del servidor con el que trabajaremos.
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).
Y con esto hemos acabado de proporcionarle al programa la información necesaria para

configurar nuestro sitio.
3.2. Editar un sitio
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.

Y en el cuadro de diálogo resultante pulsaremos en la pestaña Avanzadas (Advanced). Y a

continuación, en el menú Categoría (Category), pulsaremos la opción Datos locales (Local Info).
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.
Finalmente, con la opción Carpeta predeterminada de imágenes (Defautl Images Folder) le

diremos al programa dónde situaremos agrupadas todas las imágenes con las que trabajemos. Esto es
muy útil para no tener múltiples rutas, lo que nos evita posteriormente muchos errores de vinculación.
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.
3.3. Opciones para administrar sitios
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.
Cuando tengamos un número importante de sitios, algunos de ellos estarán obsoletos o

simplemente no los necesitaremos más, podemos eliminarlos pulsando el botón Quitar (Remove).
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.
Cuando hayamos terminado de administrar el sito, simplemente pulsaremos el botón Listo

(Done) y todos nuestros cambios serán actualizados.
Una vez que pulsemos sobre Salir (Exit), Dreamweaver se cerrará y nos mostrará el escritorio.

Modulo I

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modulo I

Diunggah oleh

Hak Cipta:

Format Tersedia

Internet, el instrumento esencial de la diplomacia del siglo XXI

INTRODUCCIÓN AL DISEÑO DE PÁGINAS WEB

1. Nociones básicas de HTML: las etiquetas

<ETIQUETA parámetros> </ETIQUETA>

<HTML> Indica el comienzo de un documento en formato HTML.

</HTML> Indica el final del documento.

1.1. El interior de un documento

Como se ha comentado en el apartado anterior, toda página en HTML tendrá al principio la

Dentro de la cabecera se puede poner el título de la página de la siguiente forma:

<TITLE> Título de nuestra página Web </TITLE>

Introducción al diseño de páginas Web -1-

Ejemplo de una página Web básica:

1.2. Listado de etiquetas para utilizar como referencia en HTML

<html></html> Crea un documento HTML.

<body></body> Muestra la parte visible del documento.

¾ Etiquetas del encabezado

<title></title> Sitúa el nombre del documento en la barra de título.

¾ Atributos del cuerpo del texto

Introducción al diseño de páginas Web -2-

<body alink=”color”> Determina el color de los enlaces activos.

Los atributos básicos de la etiqueta FONT son tres:

<b></b> Crea un texto en negrita.

<i></i> Crea un texto en cursiva.

<a href="URL"></a> Crea un hipervínculo.

<a href="mailto:EMAIL"></a> Crea un enlace mailto.

Mismo sitio, misma página:

Introducción al diseño de páginas Web -3-

<a name="NAME"></a> Crea un punto de destino dentro de un mismo documento.

Mismo sitio, distinta página:

<a href="FILENAME.htm#NAME"></a> Enlaza con el punto de destino desde un punto

<a name="NAME"></a> Crea un punto de destino dentro de un mismo documento.

<p></p> Crea un nuevo párrafo.

Existen distintas posibilidades para alinear el texto en un párrafo:

<br> Inserta un salto de línea. No hace falta cerrar la etiqueta.

<BLOCKQUOTE> </BLOCKQUOTE> Indenta el texto por ambos lados, siguiendo la norma

<ol></ol> Crea una lista numerada (ordenada).

Introducción al diseño de páginas Web -4-

<ul></ul> Crea una lista con símbolos (simple o no ordenada).

<li></li> Precede a cada elemento de la lista y añade un número.

Lista con símbolos

<dl></dl> Crea una lista de definiciones.

<dt> Precede a cada elemento de la definición.

<dd> Precede a cada definición.

Introducción al diseño de páginas Web -5-

<img src="filename.extension"> Inserta una imagen.

La alineación de la imagen puede producirse de las siguientes maneras:

<hr> Inserta una barra horizontal

La etiqueta tiene dos atributos básicos:

<hr noshade> Crea una barra sin sombreado.

<table></table> Crea una tabla.

Introducción al diseño de páginas Web -6-

<tr></tr> Determina las filas de una tabla.

<td></td> Determina las celdas de una fila.

Ejemplo de una tabla completa:

Introducción al diseño de páginas Web -7-

El programa Dreamweaver es una aplicación muy completa, de gran funcionalidad y muy

Introducción al diseño de páginas Web -8-

2.1. Ventana del documento

Introducción al diseño de páginas Web -9-

2.1.1. Vistas de edición

En la barra de documentos, en la esquina superior izquierda, vemos tres botones que

Introducción al diseño de páginas Web - 10 -

2.2. Crear un nuevo documento