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-
Internet, el instrumento esencial de la diplomacia del siglo XXI
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.
Introducción al diseño de páginas Web
-2-
Internet, el instrumento esencial de la diplomacia del siglo XXI
<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:
Introducción al diseño de páginas Web
-3-
Internet, el instrumento esencial de la diplomacia del siglo XXI
<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).
Introducción al diseño de páginas Web
-4-
Internet, el instrumento esencial de la diplomacia del siglo XXI
<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>
Introducción al diseño de páginas Web
-5-
Internet, el instrumento esencial de la diplomacia del siglo XXI
¾ 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.
Introducción al diseño de páginas Web
-6-
Internet, el instrumento esencial de la diplomacia del siglo XXI
<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">
Introducción al diseño de páginas Web
-7-
Internet, el instrumento esencial de la diplomacia del siglo XXI
</TR> </TABLE>
<TD>7</TD> <TD>8</TD>
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.
Introducción al diseño de páginas Web
-8-
Internet, el instrumento esencial de la diplomacia del siglo XXI
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:
Introducción al diseño de páginas Web
-9-
Internet, el instrumento esencial de la diplomacia del siglo XXI
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 -
Internet, el instrumento esencial de la diplomacia del siglo XXI
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í.
Introducción al diseño de páginas Web
- 11 -
Internet, el instrumento esencial de la diplomacia del siglo XXI
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).
Introducción al diseño de páginas Web
- 12 -
Internet, el instrumento esencial de la diplomacia del siglo XXI
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.
Introducción al diseño de páginas Web
- 13 -
Internet, el instrumento esencial de la diplomacia del siglo XXI
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.
Introducción al diseño de páginas Web
- 14 -
Internet, el instrumento esencial de la diplomacia del siglo XXI
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.
Introducción al diseño de páginas Web
- 15 -
Internet, el instrumento esencial de la diplomacia del siglo XXI
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.
Introducción al diseño de páginas Web
- 16 -
Internet, el instrumento esencial de la diplomacia del siglo XXI
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 ColdFusion, 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).
Introducción al diseño de páginas Web
- 17 -
Internet, el instrumento esencial de la diplomacia del siglo XXI
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.
Introducción al diseño de páginas Web
- 18 -
Internet, el instrumento esencial de la diplomacia del siglo XXI
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.
Introducción al diseño de páginas Web
- 19 -
Internet, el instrumento esencial de la diplomacia del siglo XXI
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.
Introducción al diseño de páginas Web
- 20 -
Internet, el instrumento esencial de la diplomacia del siglo XXI
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.
Introducción al diseño de páginas Web
- 21 -
Internet, el instrumento esencial de la diplomacia del siglo XXI
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.
Introducción al diseño de páginas Web
- 22 -
Internet, el instrumento esencial de la diplomacia del siglo XXI
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.
Introducción al diseño de páginas Web
- 23 -