HTML

Internet, el instrumento esencial de la diplomacia del siglo XXI
INTRODUCCIN AL DISEO DE PGINAS WEB

1. Nociones bsicas de HTML: las etiquetas Para comenzar, se ver que el HTML es un lenguaje que se basa en SGML (estndar internacional para la definicin de mtodos de representacin de texto en forma electrnica no ligados a ningn sistema ni a ningn dispositivo), lo que quiere decir que todo ir encerrado entre dos etiquetas, normalmente, una que indica el comienzo de algn elemento del documento y otra que indica el final del mismo. Estas son de la forma: <ETIQUETA parmetros> </ETIQUETA>
Cada una va entre los signos de menor que (<) y mayor que (>). Como podemos ver, para cerrar el elemento ir una barra (/) despus de la indicacin de comienzo de una etiqueta. Al principio y final del texto tenemos la etiqueta HTML, que indica que estamos ante una pgina Web programada en HTML. <HTML> Indica el comienzo de un documento en formato HTML. </HTML> Indica el final del documento. Estas dos etiquetas siempre aparecern 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 pgina 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 informacin relativa a la pgina y en el cuerpo, el contenido de sta. Al igual que sucede con el conjunto de la pgina 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 ttulo de la pgina de la siguiente forma: <TITLE> Ttulo de nuestra pgina Web </TITLE> Ms adelante, cuando se tengan los conocimientos bsicos, se comentarn algunas cosas ms que se pueden hacer con las cabeceras. En el cuerpo ir la informacin que se ver en la pantalla del navegador y por lo tanto, la mayora de las etiquetas que veremos en el resto del seminario.
Introduccin al diseo de pginas Web
-1-
Ejemplo de una pgina Web bsica: <HTML> <HEAD> <TITLE> Ttulo de mi pgina</TITLE> </HEAD> <BODY> Esta podra ser mi primera pgina Web, creada en lenguaje HTML. </BODY> </HTML>
1.2. Listado de etiquetas para utilizar como referencia en HTML Etiquetas bsicas <html></html> Crea un documento HTML. <head></head> Muestra el ttulo y otro tipo de informacin que no se muestra en la propia pgina Web. <body></body> Muestra la parte visible del documento.
Etiquetas del encabezado <title></title> Sita el nombre del documento en la barra de ttulo.
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.
-2-
<body vlink=color> Determina el color de los enlaces visitados, mediante un nombre o un cdigo hexadecimal. <body alink=color> Determina el color de los enlaces activos. Etiquetas de texto <FONT></FONT> Los atributos bsicos de la etiqueta FONT son tres: SIZE: determina el tamao 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 pgina. COLOR: determina el color de la fuente, mediante un nombre o un cdigo 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 ms grande) a H6 (el ms pequeo). Enlaces <a href="URL"></a> Crea un hipervnculo. 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">Enve un mensaje</A>
Enlaces especficos Mismo sitio, misma pgina:
-3-
<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 pgina: <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 prrafo. Existen distintas posibilidades para alinear el texto en un prrafo: JUSTIFY (justificado) LEFT ( a la derecha) RIGHT (a la izquierda) CENTER (centrado)
Por ejemplo:
<p align=justify></p>
<br> Inserta un salto de lnea. 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).
-4-
<ul></ul> Crea una lista con smbolos (simple o no ordenada). <li></li> Precede a cada elemento de la lista y aade un nmero. Por ejemplo: Lista numerada
<OL> <LI>Elemento1 </li> <LI>Elemento2 </li> <LI>Elemento3 </li> </OL>
Lista con smbolos

<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 definicin. <dd> Precede a cada definicin. Por ejemplo: Lista de definiciones
<DL> <DT> LEN <DD> Gran mamfero carnvoro de la familia de los Flidos, de pelaje entre amarillo y rojo. Tiene la cabeza grande, los dientes y las uas muy fuertes y la cola larga y terminada en un fleco de cerdas. El macho se distingue por una larga melena. <DT> LEOPARDO <DD> Mamfero carnicero de metro y medio de largo desde el hocico hasta el arranque de la cola, y de unos siete decmetros 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 persecucin de los monos y de otros animales. <DT> GALLINA <DD>Hembra del gallo, de menor tamao que este, cresta pequea o rudimentaria, cola sin cobijas prolongadas y tarsos sin espolones. <DD> Persona cobarde, pusilnime y tmida. </DL>
-5-
Elementos grficos <img src="filename.extension"> Inserta una imagen. Atributos de la imagen: WIDTH (ancho) HEIGHT (alto) ALT (texto alternativo)
La alineacin 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 tamao 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 bsicos: SIZE: determina el tamao (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.
-6-
<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 pxeles o como porcentaje del ancho del texto). Por ejemplo:
<table width="85%" border="1">
Atributos de celda: ALIGN : determina el tipo de alineacin para la(s) celda(s) (izquierda, centrada o derecha). VALIGN: determina la alineacin vertical para la(s) celda(s) (superior, centrada, inferior). Por ejemplo:
<tr align=center valign=top>
Atributos de columna: COLSPAN: determina el nmero de columnas que se extender una celda. ROWSPAN: determina el nmero de filas que se extender una celda (valor por defecto=1) NOWRAP: evita que las lneas 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">
-7-
Internet, el instrumento esencial de la diplomacia del siglo XXI <TD>7</TD> <TD>8</TD>
</TR> </TABLE>
2. El entorno Dreamweaver MX El programa Dreamweaver es una aplicacin muy completa, de gran funcionalidad y muy potente, pero a la vez est diseada para hacer ms cmodo el trabajo al usuario. Naturalmente, tener una aplicacin con un gran nmero de funciones implica un gran nmero de botones, mens, opciones y pulsar cientos de clics, que a primera vista pueden resultar muy complicados Entonces cmo 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 leccin vamos a familiarizarnos con las principales reas de trabajo del programa. En la imagen inferior vemos sealada la barra de ttulo y en ella, adems de ver el nombre de la aplicacin, el ttulo de la pgina que tengamos activa, tambin veremos los iconos de gestin de ventanas tpicos de Windows.
Debajo de la barra de ttulo tenemos la barra de mens. En ella tenemos acceso a todos los mens, desde los cuales podemos manejar con eficiencia las numerosas opciones del programa.
Debajo de la barra de mens, nos encontramos la barra de los grupos de paneles, que es contextual, lo que significa que va cambiando dinmicamente segn la tarea en la que estemos trabajando. Ms 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 rpida 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, segn los vayamos necesitando. En la siguiente pgina se incluye una imagen que muestra, a modo de referencia, lo que venimos diciendo.
-8-
2.1. Ventana del documento En este tema nos centramos en los iconos que estn relacionados con la ventana del documento. En la ventana del documento es donde visualizaremos y editaremos la pgina Web en la que trabajemos. Aqu tenemos abierto un documento llamado Untitled Document.
La barra del ttulo del documento tiene los tpicos controles de minimizacin, maximizacin y cerrar ventana. Esto es til en el caso de que tengamos abiertos simultneamente 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 tamao del documento en Kilo bytes y el tiempo que un navegador estndar tardara en visualizar completamente la pgina con una conexin telefnica a Internet. A su izquierda el programa nos indica las dimensiones en pxeles de la pgina que estamos creando. Pero no slo eso, sino que Podemos elegir entre una lista de tamaos predeterminados, como se muestra a continuacin:
-9-
El tamao ptimo depende de las dimensiones del monitor o pantalla en que se visualice la pgina. Dado que por ahora la mayora de los usuarios de Internet tienen monitores de 800x600 pxeles, si diseamos una pgina con un tamao superior provocamos que las personas que nos visiten visualicen incorrectamente nuestras pginas. Debemos tener muy presente que el objetivo de nuestra pgina es que sea vista por el mayor nmero posible de personas, por lo que no debemos poner trabas innecesarias a nuestros visitantes.
2.1.1. Vistas de edicin En la barra de documentos, en la esquina superior izquierda, vemos tres botones que modifican la vista de trabajo del documento: Cdigo (Show Code View), Dividir (Show Code and Design Views) y Diseo (Show Design View). Son las tres formas que el editor nos permite visualizar el documento para su edicin.
En la vista Cdigo (Show Code View), el programa nos muestra el cdigo HTML de la pgina y nos permite editar directamente las instrucciones con las que el navegador del usuario mostrar la pgina y que ms adelante veremos qu significan exactamente.
En la vista Diseo (Show Design View), el programa nos da una aproximacin de cmo se visualizar en el navegador del usuario. Por ltimo, la vista Dividir (Show Code and Design Views), nos muestra simultneamente el cdigo y la vista de diseo; de esta manera podemos escribir instrucciones en lenguaje HTML en la pgina e instantneamente comprobaremos cmo se visualizara en un navegador. Pero para ver en pantalla completa cmo se visualizar la pgina en un navegador podemos pulsar en el icono de previsualizacin (Preview).
El programa abrir la ventana del navegador que tengamos asociada por defecto y nos mostrar la pgina completa. En la ventana de previsualizacin (Preview), podemos detectar tanto los errores
- 10 -
de diseo como los de cdigo, y directamente corregirlos en la aplicacin sin tener que grabar y abrir el documento con cada prueba
2.2. Crear un nuevo documento A continuacin procedemos a crear nuevos documentos. Para ello debemos ir a la barra de mens y pulsar en el men Archivo (File).
En el men que se desplegar, buscaremos la opcin Nuevo (New) y pincharemos en ella con el botn izquierdo del ratn.
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 pestaa General (General) y en el panel de la izquierda llamado Categora (Category) elegiremos Pgina bsica (Basic Page). El panel adyacente cambiar de manera contextual dependiendo de la opcin que hayamos elegido en el panel de categoras. Como por ahora hemos elegido Pgina bsica, ste ser el ttulo 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.
- 11 -
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 opcin Guardar (Save).
Al pulsar sobre la opcin 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 slo tenemos que pulsar el botn 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 botn izquierdo del ratn, y en el men que se desplegar buscaremos la opcin Abrir (Open).
- 12 -
Una vez que hayamos pulsado sobre la opcin Abrir (Open) del men Archivo (File), aparecer una ventana de dilogo como la que vemos en la imagen inferior. Es un cuadro de dilogo 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 slo tendremos que elegir de entre la lista mostrada el ttulo del documento que deseemos abrir y pulsaremos sobre l dos veces con el botn izquierdo del ratn.
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 cuestin, bien porque ya no lo necesitemos ms, 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 opcin Cerrar (Close), tal como vemos en la imagen de la prxima pgina.
- 13 -
Y ahora, en el caso de que hayamos modificado el documento, vemos que nos aparece un cuadro de dilogo 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 grabacin sern descartados. Esto es til en el caso de que no nos guste nuestra pgina y prefiramos una versin anterior de ella, algo que suele pasar muy a menudo . Si pulsamos S (Yes), se guardarn los cambios realizados sobre el documento. Pero, atencin, es posible que hayamos cometido un error y hayamos pulsado el botn S (Yes), de manera mecnica. El programa nos da una ltima oportunidad para meditarlo y nos muestra otro cuadro de dilogo como el inferior.
Por ltimo, una vez que hayamos guardado, o no, los cambios sobre la pgina, slo nos queda salir del programa. Y para ello volveremos al men Archivo (File). Buscaremos en el final del men y pulsaremos sobre la opcin Salir (Exit). En la siguiente pgina se muestra una imagen a modo de referencia visual.
- 14 -
3. El sitio Web Hasta ahora slo hemos creado una pgina Web en blanco. Pero las pginas de verdad tienen contenido y este contenido puede formarse con diversos documentos que pueden abarcar desde otras pginas HTML, imgenes, scripts, animaciones, hasta cualquier tipo de objeto que podamos vincular en una pgina HTML. El conjunto de todos estos documentos que forman parte de la pgina se llama, en el lenguaje de las pginas Web, un sitio, site en ingls. Vamos a aprender a disear un sitio para albergar nuestras pginas 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 configuracin estn en el men Sitio (Site) de la barra de mens.
- 15 -
Pulsando sobre el botn Sitio (Site), se despliega un men. Para configurarlo por primera vez pulsaremos en la opcin Administrar sitios (Edit Sites).
Al seleccionar esa opcin 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 informacin 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 dilogo inicial del asistente.
- 16 -
A continuacin 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 continuacin, haremos clic en Siguiente (Next). La prxima pregunta que tendremos que responder es la siguiente: Quiere trabajar con una tecnologa 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 slo 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 tecnologa 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 continuacin, haremos clic en Siguiente (Next). En la ventana que se nos abrir, tendremos que responder a la pregunta de cmo 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 mquina y subirlas al servidor cuando estn listas (Edit local copies on my machine, then upload to server when ready). Esta es, adems, la opcin recomendada (Recommended). En la parte inferior de esta misma ventana encontramos un campo vaco 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 accin veremos que la segunda pregunta que nos apareca en la parte inferior de la ventana desaparece automticamente. A continuacin, haremos clic en Siguiente (Next). La ltima ventana del asistente para la configuracin 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 configuracin de nuestro sitio por ltima vez, antes de concluir la operacin. Si estamos de acuerdo con la configuracin pulsaremos Listo (Done). Si no lo estamos, tenemos la posibilidad de retroceder haciendo clic en Atrs (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 dilogo con todas las opciones para administrarlo. Como an no tenemos creado ninguno, pulsaremos en el botn Nuevo (New).
- 17 -
El programa nos preguntar qu es lo que queremos crear exactamente un sitio o un servidor FTP y RDS. Por ahora slo vamos a crear un sitio. Una vez confirmando en el cuadro de dilogo que queramos crear un nuevo sitio. Pulsaremos sobre la opcin Sitio (Site) de la barra de mens.
Veremos que se abre otra ventana de dilogo como la que veamos anteriormente, y de manera idntica iremos contestando a las preguntas que nos va haciendo el programa y pulsaremos el botn Siguiente (Next) despus de introducir en cada ventana las respuestas que nos pide. La primera cuestin 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 relacin con el contenido de la pgina para poder recordarlo fcilmente.
La respuesta a la siguiente pregunta depender de la tecnologa con la que deseemos trabajar. Ya dijimos antes que una pgina Web puede enlazar documentos de muy diferentes tipos, algunos de los cuales son utilizados para intercambiar informacin con el servidor. En esta opcin elegimos el tipo documento dependiendo de las caractersticas del servidor con el que trabajaremos. Cuando nos pregunte cmo vamos a trabajar nuestras pginas elegiremos la primera opcin.
- 18 -
La cuestin de abajo se interesa en la forma en como subiremos las pginas que creemos al servidor de Internet. Por ahora no vamos a preocuparnos de esto y por lo tanto elegiremos la opcin Ninguno (None).
Y con esto hemos acabado de proporcionarle al programa la informacin 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 ms nuestro sitio para adecuarlo a nuestras necesidades de trabajo. Para ello volvemos a la ventana de dilogo Administrar sitios (Edit Sites).
Y esta vez, como ya tenemos creado el sitio CursoDreamweaver pulsaremos el botn Editar (Edit), tal y como se muestra en la imagen que sigue en la prxima pgina.
- 19 -
Y en el cuadro de dilogo resultante pulsaremos en la pestaa Avanzadas (Advanced). Y a continuacin, en el men Categora (Category), pulsaremos la opcin Datos locales (Local Info).
En la seccin 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. Tambin podemos modificar la carpeta raz local, lo cual significa que podemos designar manualmente la carpeta donde deseemos situar las pginas que creemos y los documentos vinculados a ella.
- 20 -
Con la opcin Actualizar lista archivos (Refresh Local File List Automatically) que veamos activada en la imagen nos aseguramos que cuando modifiquemos un archivo se actualicen automticamente las carpetas locales durante las copias. Finalmente, con la opcin Carpeta predeterminada de imgenes (Defautl Images Folder) le diremos al programa dnde situaremos agrupadas todas las imgenes con las que trabajemos. Esto es muy til para no tener mltiples rutas, lo que nos evita posteriormente muchos errores de vinculacin. El ltimo paso para la edidcin de nuestro sitio lo podemos apreciar en las opciones de la imagen inferior. Es necesario configurar la Direccin HTTP (HTTP Address) de nuestro sitio, con lo que el programa detecta y distingue automticamente las direcciones www de pginas internas a nuestro sitio, lo que permite ahorrar tiempo al navegar. Con la opcin Cach (Cache) activada, el programa actualiza y gestiona todos los cambios de las pginas y sus enlaces internos automticamente. Por ejemplo, si cambiamos una imagen no tenemos que ir modificando una a una todas las pginas.
3.3. Opciones para administrar sitios Ya hemos aprendido a configurar y editar el sitio, ahora veremos rpidamente el resto de las opciones del cuadro de dilogo Administrar sitios (Edit Sites), que nos ayudarn a gestionar ms fcilmente nuestro sitio. En la siguiente pgina se muestra el cuadro de dilogo a modo de referencia.
- 21 -
Las opciones, Nuevo (New) y Editar (Edit), ya las conocemos, por lo que no nos reiteramos ms 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 nmero importante de sitios, algunos de ellos estarn obsoletos o simplemente no los necesitaremos ms, podemos eliminarlos pulsando el botn Quitar (Remove). La opcin Exportar (Export), nos permite guardar las caractersticas del sitio en un archivo XML (Lenguaje Extensible de Marcado), de forma que con un slo archivo podemos guardar, recuperar, e incluso compartir con otras personas las caractersticas del sitio fcilmente.
- 22 -
Las ltimas opciones son Importar (Import), que es la opcin complementaria de Exportar (Export), con la cual podemos crear un nuevo sitio a partir de las caractersticas de otros sitios exportados, y la opcin Ayuda (Help), que se explica por s misma.
Cuando hayamos terminado de administrar el sito, simplemente pulsaremos el botn Listo (Done) y todos nuestros cambios sern actualizados. Una vez que pulsemos sobre Salir (Exit), Dreamweaver se cerrar y nos mostrar el escritorio.
- 23 -

HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML

Cargado por

Copyright:

Formatos disponibles

Internet, el instrumento esencial de la diplomacia del siglo XXI

INTRODUCCIN AL DISEO DE PGINAS WEB

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

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

Enlaces especficos Mismo sitio, misma pgina:

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

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

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Lista con smbolos

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

<hr noshade> Crea una barra sin sombreado.

Tablas <table></table> Crea una tabla.

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Ejemplo de una tabla completa:

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI <TD>7</TD> <TD>8</TD>

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introduccin al diseo de pginas Web

También podría gustarte