Manual Dreamweaver

Dreamweaver

Version imprimible

Este documento deber servir exclusivamente como material de apoyo al contenido

del curso interactivo accesible a través de internet.

Indice

Módulo I: Introducción a HTML......................................................Introducción................................................................ 3U.D.1. Las etiquetas. Formato y sintáxis.............................. 4

U.D.2. Estructura de un documento html........................................Estructura básica de un documento html (Parte I).................. 6Estructura básica de un documento html (Parte II)................ 12U.D.3. Editar páginas web con editores de texto................... 15

Módulo II: Introducción a Dreamweaver...........................................Introducción...............................................................21U.D.1. Modos de visualización del Entorno de Trabajo........... 21U.D.2. Definición de un sitio web..................................... 32U.D.3. Mapa del Sitio. Creación y mantenimiento..................41

Módulo III. Diseño de páginas web.................................................Introducción...............................................................45U.D.1. Propiedades de la página..................................... 45U.D.2. Propiedades del texto.......................................... 53U.D.3. Listas.............................................................. 61U.D.4. Vínculos.......................................................... 62

Módulo IV. Incorporación de imágenes............................................Introducción...............................................................70U.D.1. Formato y propiedades........................................ 70U.D.2. Imagen de Fondo de Página.................................. 76U.D.3. Imágenes de sustitución....................................... 80

Módulo V. Utilización de tablas......................................................

Plataforma de Teleformación de IFES Página 1 de 169

Introducción...............................................................85U.D.1. Crear tablas...................................................... 85U.D.2. Ancho y alto de columnas y filas............................. 92U.D.3. Añadir, eliminar, combinar y dividir celdas................. 95U.D.4. Bordes y fondos............................................... 101

Módulo VI. Marcos.....................................................................Introducción............................................................. 107U.D.1. Trabajar con Marcos. Parte 1................................107U.D.1. Trabajar con Marcos. Parte 2................................113

Módulo VII. Multimedia................................................................Introducción............................................................. 119U.D.1. Inserción de audio............................................. 119U.D.2. Inserción de video............................................. 123U.D.3. Inserción de Flash y Shockwave........................... 126

Módulo VIII. Formularios..............................................................Introducción............................................................. 131U.D.1. Parámetros y controles de los Formularios............... 131

Módulo IX. DHTML. Hojas de estilo.................................................Introducción............................................................. 139U.D.1. Creación de CSS (Hojas de estilo en cascada).......... 139

Módulo X. Capas.......................................................................Introducción............................................................. 150U.D.1. Capas............................................................150

Módulo XI. Publicación del sitio web................................................Introducción............................................................. 154U.D.1. Obtención de un sitio de publicación.......................154U.D.2. Utilización de programas de FTP........................... 155U.D.3. Publicación y mantenimiento del sitio web................ 159U.D.4. Dar la web de alta en los buscadores......................162

Dreamweaver

Dreamweaver

Página 2 de 169 Dreamweaver

Módulo I: Introducción a HTML

Introducción

HTML es el lenguaje básico con el que se escriben las páginas web.

El HTML (HiperText Markup Language) es el lenguaje utilizado para representardocumentos en la WWW (World Wide Web). Además de texto también podemos incluirelementos multimedia como pueden ser imágenes, vídeo, audio, etc y existen enlaces(links) que permiten saltar a otras partes del documento a otro sitio cualquiera deInternet.

Las páginas creadas con este lenguaje se pueden visualizar en cualquier sistemaoperativo.

El HTML se basa en utilizar unas determinadas etiquetas que indican a nuestronavegador de Internet (Firefox, Explorer, Opera, etc.) cómo se debe mostrar la página.Por medio de ellas se pueden controlar los elementos tipográficos del texto: tipo, color ytamaño de las fuentes, el estilo (negrita, cursiva, etc.), así como también la inclusión detablas, listas, formularios, la inserción de imágenes, sonidos, fondos, los enlaces, etc.

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crearlos documentos con la extensión HTML o HTM, e incluir como contenido del documentoel código HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.

INDICE

1. Las etiquetas. Formato y sintaxis.2. Estructura de un documento html.3. Editar páginas web con editores de texto.

OBJETIVOS

En este tema vamos a ver cómo es el lenguaje en el que se escribe la mayoría de laspáginas que hoy en día están colgadas en Internet, cómo es su estructura básica, ycómo crear una página desde un editor de texto simple, sin tener que acudir a unprograma de edición o maquetación web como Dreamweaver .

Una de las ventajas de Dreamweaver es que no es necesario conocer el lenguajeHTML para crear una página, así que no ahondaremos demasiado en este tema. A

Dreamweaver


pesar de todo, es muy recomendable tener al menos conocimientos básicos de HTML ala hora de realizar una web.

U.D.1. Las etiquetas. Formato y sintáxis.

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesarioguardar los documentos con la extensión html o htm , e incluir como contenido deldocumento el código HTML deseado. Como se ha dicho, el código fuente se escribe enun editor de texto. Por ejemplo con el Bloc de Notas. Para abrir el Bloc de Notas , ledamos a Inicio > Programas > Accesorios > Bloc de notas .

Las páginas HTML se basan en el uso de marcas o etiquetas que marcan el inicio y elfin de cada elemento de la página web. Estas etiquetas comienzan por el símbolo demayor (“< “) y terminan con el símbolo de menor (“> ”) .

La palabra que se encierra entre estos dos símbolos indica qué acción debe realizar elnavegador. Por ejemplo, el título de la página web (que es el texto que aparece en laparte superior de la ventana del navegador) se escribe entre las etiquetas <TITLE></TITLE> . Para delimitar el ámbito en el que debe aplicarse una etiqueta, se debeindicar hasta dónde actúa. Para ello, se utiliza la misma etiqueta pero con el símbolo “/”justo delante de la palabra. Esto indica el fin de una acción.

En el caso de esta página, el título es "Plataforma de Teleformación de IFES ". Esosignifica que el código fuente o código HTML de esta página incluye las etiquetas<TITLE> </TITLE> y el texto "Plataforma de Teleformación de IFES " entre ellas.

Así pues, cada etiqueta de principio de acción, o sea <...> tiene una “correspondencia”con una etiqueta de fin de acción </...> .

Ejemplo: Vamos a crear nuestro primer documento HTML. Para ello abrimos el Bloc deNotas. Para abrir el Bloc de Notas, iremos a Inicio > Programas > Accesorios > Blocde notas . Una vez que tengamos abierto el programa, escribimos lo siguiente:

1. La etiqueta <head> , en la siguiente unidad explicaremos su función.2. En la siguiente línea escribiremos las etiquetas <title> </title> , y entre las

etiquetas el texto "Mi primera página web".3. Para finalizar escribiremos la etiqueta </head> .4. A continuación guardamos el documento con la extensión ".html ". Para ello

acudimos a Archivo > Guardar Como y lo guardamos con el nombre"prueba1.html ".

Dreamweaver


A continuación sólo nos queda comprobar que lo hemos hecho bien. Abrimos connuestro navegador (Firefox, Internet Explorer, ...) el archivo que hemos creado ycomprobaremos que, en la parte superior de la página, aparece el título "Mi primerapágina web ". El resto de la página está en blanco, ya que no le hemos añadido máscódigo HTML.

Las etiquetas o marcas delimitan cada uno de los elementos que componen undocumento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la defin o cierre de elemento.

La etiqueta de comienzo está delimitada por los caracteres <…> . Está compuesta porel identificador o nombre de la etiqueta, y puede contener una serie de atributosopcionales que permiten añadir ciertas propiedades. Su sintaxis es: <etiquetaatributo1 atributo2 …> . Los atributos de la etiqueta de comienzo siguen una sintaxispredefinida y pueden tomar cualquier valor propio del usuario, o valores HTMLpredefinidos.

La etiqueta de final está delimitada por los caracteres </…> . Está compuesta por elidentificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis

Dreamweaver


</identificador> . Cada elemento de la página se encontrará entre una etiqueta decomienzo y su correspondiente etiqueta de cierre, a excepción de algunos elementos,que no necesitan etiqueta de cierre. También es posible anidar etiquetas, es decir,insertar etiquetas entre otras etiquetas de comienzo y de cierre.

Independientemente de si se escribe en minúsculas o mayúsculas, las etiquetasmantienen su valor <html> o <HTML>. Aunque es recomendable escribirlas enminúsculas.

U.D.2. Estructura de un documento html.

Estructura básica de un documento html (Parte I)

Las páginas web comienzan con la etiqueta <html> y acaban con la etiqueta </html> .Todo lo que esté fuera, de lo delimitado por estas etiquetas, no se considera texto de lapágina, por lo que no se mostrará. Una página se divide en dos partes biendiferenciadas: la cabecera y el cuerpo .

• La cabecera de la página se emplea para proporcionar información acercadel documento, como título, autor, fecha de creación, información para losbuscadores, recursos externos, etc.

• El cuerpo contiene el texto de la página, es decir, la información que se va avisualizar en el navegador.

A la cabecera le corresponde la etiqueta <head></head> , y al cuerpo <body></body>. Una página HTML básica tendría el siguiente aspecto:

Dreamweaver


Las etiquetas que se introducen en un documento HTML no son visibles cuando eldocumento se muestra en un navegador (Firefox, Internet Explorer, etc… ). Si unusuario desde Internet solicita ver una página, el servidor web envía la página alnavegador y éste interpreta las etiquetas para dar el formato a la página.

Vamos a crear un nuevo documento HTML. Los pasos son los siguientes:

1. Abrimos el Bloc de Notas .2. Empezaremos incluyendo las etiquetas <html> y </html> , que delimitan la

página.3. A continuación, y entre ellas, incluimos las etiquetas que delimitan la

cabecera: <head> y </head> y el cuerpo: <body> y </body> .4. Como ya se ha dicho, en la cabecera vamos a incluir información acerca del

documento, como título, autor, fecha de creación, etc. Por ejemplo, el títulode la web, así que, entre las etiquetas que delimitan la cabecera <head> y</head> , incluimos el título de la página: <title> Mi segunda página web</title> .

5. En el cuerpo aparece el texto que va a mostrarse en la página, para nuestroejemplo pondremos entre las etiquetas que lo definen el texto: <body> Estetexto que estás leyendo es el cuerpo de la página. </body> .

El código quedará así:

Ya sólo nos queda guardarlo con el nombre "prueba2.html " y visualizarlo en un

Dreamweaver


navegador para comprobar que funciona correctamente.

ENRIQUECIMIENTO DEL DOCUMENTO

HTML interpreta el texto de forma lineal. Para darle forma necesitaremos una serie deetiquetas. Mediante las etiquetas y podemos hacer saltos de línea y depárrafo.

• Los saltos de línea vendrán determinados por la etiqueta . Estaetiqueta no necesita cierre.

• Los saltos de párrafo vienen determinado por la etiqueta y se cierra con .

Como ya se ha dicho anteriormente, las etiquetas pueden contener una serie deatributos opcionales que permiten definir propiedades del elemento sobre el queactúan. Es posible cambiar la alineación del texto de cada párrafo, por ejemplo. Paraello, después de la etiqueta que marca el párrafo, se modifica el valor del atributoalign , cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) ojustify (justificado).

Abrimos el documento anterior, pruebas2.html y le realizaremos una serie demodificaciones.

1. Iremos al barra de menú ARCHIVO > GUARDAR COMO y le cambiaremosel nombre por el de prueba3.html .

2. Realizaremos las siguientes modificaciones, delante del texto escribiremos laetiqueta , y al final del párrafo , para crear un párrafo.

Dreamweaver


3. Ahora insertaremos el siguiente texto: Esto es un salto de párrafo Esto es un salto de línea otro salto de línea. .

4. Guardaremos y veremos el efecto. El código quedaría así:

Vamos a seguir modificando el fichero. Procederemos a cambiar la primera etiqueta , dejándola así: , con esto centraremos el párrafo en el centro; yla siguiente etiqueta de párrafo le añadiremos alineándolo a laderecha. Guardamos los cambios y el fichero se quedará de la siguiente forma:

Dreamweaver


Otra forma de cambiar la alineación del texto es mediante las etiquetas <div> </div> ,para las que también existe el atributo align. La etiqueta <div> , al igual que la etiqueta , se utiliza para agrupar bloques de texto, pero con la diferencia de que laseparación entre ellos es menor. Y también podremos utilizar las etiquetas de estilospara negrita, etiqueta , cursiva, , y subrayado .

Dreamweaver


Las propiedades del texto pueden modificarse a través de la etiqueta . Para ello,podemos insertar el texto entre las etiquetas , especificando algunos delos atributos de la etiqueta:

No es aconsejable utilizar cualquier fuente. Puede que el usuario no las tenga

Dreamweaver


instaladas en su ordenador y no vea la página de forma correcta. Se aconseja utilizarlos grupos de fuentes del sistema. Más adelante veremos este tema.

Otro atributo es el color , que se puede aplicar a todo tipo de etiquetas.

A cada color le corresponde un código hexadecimal . Cada color estará representadopor un grupo de seis dígitos en código hexadecimal, precedidos por una almohadilla,como por ejemplo rojo= #FF0000 .

En la red hay muchas herramientas que nos permiten ver los colores y su códigoHexadecimal. (Los enlaces los encontrarás en la Opción Indice -> Enlaces )

1. RGB Hexadecimal to Decimal Converter . Podremos modificar y crearcolores y ver sus valores para ponerlos en nuestra web.

2. KULER . Herramienta muy buena y efectiva para trabajar con colores y verposibles combinaciones.

Estructura básica de un documento html (Parte II)

Creación de hipervínculos.

Un hipervínculo es un enlace, normalmente entre dos páginas web de un mismo sitio,pero un enlace también puede apuntar a una página de otro sitio web, a un fichero, auna imagen, etc. Para navegar al destino que apunta el enlace, deberemos hacer clicsobre él. También se conocen como hiperenlaces o links.

Los hipervínculos se crean añadiendo la etiqueta <a></a> . Esta etiqueta laasociaremos al texto que queremos que sea un enlace.

Dreamweaver


<a href=http://www.google.es> Google </a>Con el código anterior, tendremos en la página la palabra "Google " convertida en unhipervínculo, de modo que al pinchar sobre ella con el ratón, nos llevará a la web deGoogle. Con esta etiqueta se puede asignar cualquier URL. De esta manera no sólopodrás crear enlaces a otras páginas HTML, sino también podrás crear enlaces a tuprograma de correo electrónico escribiendo delante de tu dirección la etiqueta"mailto:"

Los enlaces hacen referencia a otras páginas, a las que se accede pinchando sobreellos. Estas referencias pueden ser de diferentes formas:

1. Referencia absoluta . Conduce a una ubicación externa al sitio en el que seencuentra el documento. Si la ubicación está en la red externa, hay que empezar lareferencia por http:// , el nombre del dominio y algunas veces el nombre de la página.Si no se escribe el nombre de la página se cargará la página de inicio asociada aldominio: index.html que generalmente suele ser el nombre de la página inicial oprincipal del sitio.

2. Referencia relativa al sitio . Conduce a un documento situado dentro del mismositio que el documento actual. Un sitio web es un conjunto de archivos y carpetas,relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellosdentro de una misma carpeta, conocida como carpeta raíz del sitio.

Dreamweaver


Inserción de elementos multimedia.

En una página se puede incluir cualquier tipo de elementos, como imágenes endiferentes formatos: GIF, JPG o PNG . Se recomienda utilizar el que tenga una mejorrelación calidad de imagen / tamaño de fichero, que generalmente se corresponde a losficheros de imágenes jpg.

La etiqueta para poder insertar una imagen es <img src=”...”> , los puntossuspensivos indican el lugar donde se encuentra la imagen dentro de la estructura delsitio web que estemos creando.

<img src=”imagen.jpg> ó <img src=”imagenes/imagen.jpg”>La segunda etiqueta indica que la imagen está en la carpeta imagenes, dentro de laestructura creada. Este es el procedimiento para que se incluya en la página.

También se puede incluir archivos de animaciones flash, video y audio. Pero realizaresto desde un editor de texto es más complejo por lo que utilizaremos Dreamweaverpara insertarlo.

En las próximas unidades didácticas usaremos Dreamweaver de un modo similar acomo se utiliza un editor de textos, y el programa se encargará de convertir a códigoHTML nuestras órdenes.

Esta lección es una breve introducción al HTML. Conforme se vaya creando laestructura en Dreamweaver, aparecen etiquetas y atributos nuevos.

Esta son orientaciones básicas para crear la estructura de la página. AunqueDreamweaver genere el código HTML, es importante controlarlo, porque cuando la

Dreamweaver


estructura de la página se complique con tablas, imágenes, menús, formularios, etc, esposible que en algún momento desde el propio programa resulte difícil seleccionar ocontrolar algún elemento, y entonces se necesite acudir a HTML para tener un mayorcontrol de lo que se está haciendo. En la sección de enlaces encontraréis variaspáginas en la que podréis profundizar más sobre el HTML.

U.D.3. Editar páginas web con editores de texto.

Desde el bloc de notas, como desde cualquier editor de texto, se puede crear unaestructura html y guardarla como una página web. Dominar perfectamente el códigoHTML, significa crear cualquier página HTML, pero puede resultar tedioso y lento. Aunasí, es importante saber cómo se estructura una página, cómo se escribe y cuál es sulenguaje.

Usar el bloc de notas es la forma más básica de generar una página (que no la másfácil), y luego visualizarla en el navegador.Se abre desde el menú Inicio del ordenador, Programas, Accesorios, opción Bloc denotas.

Una vez abierto, se escribe el código correspondiente y guarda el documento con laextensión HTML (como hemos hecho en los ejemplos de las unidades anteriores).

Dreamweaver


Escribir en él, es como escribir en cualquier otro editor de textos. Basta con situar elcursor en el documento y escribir. Es recomendable insertar una nueva línea para cadanueva etiqueta HTML, ya que resulta más facil trabajar de este modo. Así tendremos elcódigo estructurado de manera más ordenada.

Resulta difícil interpretar el código, y por ello es preferible programar insertando lasetiquetas por separado, en diferentes líneas.

Dreamweaver


A través del menú Formato, opción Fuente, se cambia la fuente de todo el documento.Modificar el tamaño de la letra no afecta a las propiedades de la página, solamenteayuda a visualizar mejor el texto en el bloc de notas.

Dreamweaver


El bloc de notas guarda por defecto los documentos con la extensión .txt. Hay quecambiarla por .html o .htm al poner el nombre de archivo, aunque es recomendablehacerlo en .html.Una vez guardado el documento en una carpeta previamente creada, hacer doble clic yse abrirá en el navegador predeterminado que tengamos. En el ejemplo anterior lacarpeta se ha creado desde Mis documentos.

Dreamweaver


Desde cualquier página de Internet y desde el explorador, pulsar en la opción Ver /Código fuente de la Página, Firefox Versión 3, o Barra de Menú Página > Ver códigofuente, en Internet Explorer 7, para abrir el bloc de notas y acceder al código de lapágina.

Hay páginas que tienen un código muy complicado de analizar, y puede aparecer otrotipo de lenguajes como Javascript, php, etc. Estos son lenguajes de programación másavanzados y que en este curso no se van a explicar.

Existen muchos programas editores de textos sencillos que nos permitirán hacer lomismo que el Bloc de Notas, por ejemplo el Notepad++. Este programa es fácil de usar

Dreamweaver


y entre otras ventajas es que colorea las etiquetas que escribimos, por lo que nossupondrá una clara mejora respecto a otros editores. Además de HTML, nos permitirátambién escribir en otros lenguajes de programación. Pulsando aquí accederéis a supágina de descarga.

Dreamweaver


http://notepad-plus.sourceforge.net/es/site.htm

Módulo II: Introducción a Dreamweaver

Introducción

Dreamweaver es un programa fácil de usar con el que se pueden crear páginas webdesde un nivel de principiante a profesional. Las funciones de edición visual deDreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sinla necesidad de programar manualmente el código HTML.

Se pueden crear tablas, marcos, capas, estilos, insertar imágenes, archivos flash,comportamientos JavaScript, PHP, etc., de forma sencilla y visual. Además incluye unsoftware de cliente FTP completo , que permite colgar o actualizar el sitio web en elservidor sin salir del programa.

Si no posees el programa, puedes descargar la versión gratuita de Dreamweaverdesde la página de Adobe . Esta versión caduca al cabo de 30 días de su instalación.Si tienes versiones anteriores también puedes realizar el curso, pero recomendamostener la versión actualizada ya que algunos detalles van cambiando de una a otraversión.

ÍNDICE1. Modos de visualización y descripción del Entorno de trabajo.2. Definición de un sitio web.3. Mapa del sitio. Creación y mantenimiento.

OBJETIVOS

En este módulo vamos a familiarizarnos con el programa (abrir y utilizar la interfaz),describiendo sus herramientas y su espacio de trabajo. Definiremos el sitio web, quees el lugar donde está todo el contenido de nuestra página o conjunto de páginas, yexplicaremos el mapa del sitio, que es el esquema de nuestra estructura del sitio , unárbol de contenidos.

U.D.1. Modos de visualización del Entorno de Trabajo

Es preciso conocer el espacio de trabajo o interfaz de usuario para poder manipular lasherramientas que proporciona este programa.

El interfaz es el conjunto de ventanas, menús, barras de herramientas, cuadros de

Dreamweaver


http://www.adobe.com/es/downloads/

diálogo y otros elementos que se muestran en la pantalla del ordenador y que permiteninteractuar con el programa. Estos interfaces no modifican las características delprograma; solamente determinan la forma de acceder a las herramientas y sudisposición en la pantalla.

La primera vez que se abre el programa aparecerá una pantalla que permiteseleccionar la forma de visualización que deseamos, pero según vayamos trabajando ytambién dependiendo de la tarea que estemos realizando, podremos seleccionar una uotra.Para acceder a ella iremos a la opción de Barra de Menú > Ventana > Diseño delespacio de Trabajo .

Dreamweaver


También en la renovada barra de menú, para los que hayan trabajado con versionesanteriores, podemos ver la palabra Diseñador, que si pulsamos sobre ella sedesplegará el mismo menú.Como veréis en las imágenes anteriores hay distintas opciones de visualización. Ahoraque estamos empezando a trabajar con el programa, la más recomendable es la opción

Dreamweaver


“Diseñador”, pero podréis escoger la que más le guste. También podremos crear unespacio de trabajo personalizado, marcando las paletas que nos interese que esténpresentes y su disposición.

Página de inicioLa página de inicio del programa Dreamweaver . Permite elegir entre varias tareas deuso frecuente, como abrir un elemento reciente, crear uno nuevo y crear a partir demuestras. Dependiendo de lo que queramos hacer escogeremos una u otra.

Espacio de trabajo del diseñadorEn esta ventana se distribuyen todos los elementos para el desarrollo de las páginas.Aparecen los diferentes menús, barras de herramientas y documentos de trabajo. Cadausuario puede decidir qué elementos ver en cada momento y distribuirlos como desee.Todos los paneles y ventanas se pueden mover, abrir, cerrar y cambiar de posición. Enla siguiente imagen vemos este espacio de trabajo.

Dreamweaver


BARRASLas barras en esta nueva versión han sido modificadas. La barra de título como casitodos los programas Windows, como tal ha desaparecido, dejando paso a Barra deMenús. Al igual que cualquier otro programa contiene las operaciones del programa,agrupadas en menús desplegables que permiten acceder a los diferentes comandos. Alhacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con losdiferentes elementos que se pueden insertar en Dreamweaver . Muchas de lasoperaciones se pueden realizar a partir de estos menús, pero para otras es preferible oindispensable acudir a los paneles. También aparecen las opciones deVistas,Administrador de sitios y Espacio de trabajo . En el extremo de la derecha aparecenlos botones para minimizar, maximizar / restaurar y cerrar.

Dreamweaver


La barra de herramientas estándar contiene iconos para ejecutar de forma inmediataalgunas de las operaciones más habituales, como Abrir, Guardar, copiar pegar, etc.Para verla iremos a la opción de Barra de Menú Ver > Barra de Herramientas >Estándar

La barra de herramientas de Documento contiene opciones que nos permitirándistintas opciones, cambio de vistas, etc. La barra de herramientas contiene tambiéncomandos y opciones relativas a la visualización del documento y a su transferenciaentre los sitios.

a Mostrar vista de código. Sólo muestra la vista Código en la ventana de documento.

b Mostrar vistas de código y diseño. Divide la ventana de documento entre las vistasCódigo y Diseño.

c Mostrar vista de diseño. Sólo muestra la vista Diseño en la ventana de documento.

d Vista en vivo. Muestra una vista del documento no editable, interactiva y basada en elnavegador.

e Vista código en vivo. Muestra el código en sí utilizado por el navegador para ejecutarla página.

f Título del documento. Permite introducir un título para el documento, que apareceráen la barra de título del navegador. Si el documento ya tiene título, éste aparecerá endicho campo.

g Administración de archivos. Muestra el menú emergente Administración de archivos.

h Vista previa/Depurar en explorador. Permite obtener una vista previa o depurar eldocumento en un navegador. Seleccione un navegador en el menú emergente.

i Actualizar vista de diseño. Actualiza la vista Diseño tras realizar cambios en la vistaCódigo. Los cambios realizados en la vista Código no aparecerán de forma automáticaen la vista Diseño hasta que se efectúen determinadas acciones, como guardar elarchivo o hacer clic en este botón.

j Ver opciones. Permite definir las opciones de las vistas Código y Diseño y establecerqué vista desea que aparezca en la parte superior de la ventana. Las opciones del

Dreamweaver


menú corresponden a la vista actual: la vista Diseño, la vista Código o ambas.

k Ayudas visuales. Permite utilizar distintas ayudas visuales para el diseño de laspáginas.

l Validar formato. Permite validar el documento actual o una etiqueta seleccionada.

m Comprobar compatibilidad con navegadores. Permite comprobar si el CSS escompatible con diferentes navegadores.

La barra de estado de la ventana de documento contiene un grupo de herramientasmuy útiles, sobre todo el selector de etiquetas , que permite identificar cualquierelemento de la vista de diseño correspondiente a esa etiqueta. Siempre comienza conla etiqueta body, y muestra las etiquetas de HTML jerárquicamente.

También contiene el selector de tamaño de pantalla y el indicador de velocidad dedescarga de la página.

a Selector de etiquetas. Muestra la jerarquía de etiquetas que rodea a la selecciónactual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta ytodo su contenido. Haga clic en <body> para seleccionar todo el cuerpo del documento.

b Herramienta Seleccionar. Activa y desactiva la herramienta Mano.

c Herramienta Mano. Permite hacer clic en el documento y arrastrarlo por la ventana dedocumento.

d y e Herramienta Zoom y menú emergente Establecer nivel de aumento. Permitenestablecer un nivel de aumento para el documento.

f Menú emergente Tamaño de ventana. Permite cambiar el tamaño de la ventana dedocumento a dimensiones predeterminadas o personalizadas.

g Tamaño del documento y tiempo de descarga. Muestra la estimación del tamaño deldocumento y del tiempo de descarga de la página, incluidos todos los archivosdependientes, como imágenes y otros archivos multimedia.

h Indicador de codificación. Muestra la codificación del texto del documento actual.

VISTAS

Dreamweaver


La vista Diseño permite trabajar con el editor visual. Es la que más usaremos en estecurso.

La vista Código se utiliza para trabajar en un entorno totalmente de programación,código fuente. En ella veremos el código HTML que el programa va generando segúntrabajemos. En ella no tenemos una referencia visual de cómo va quedando eldocumento según se modifica el código, sólo muestra el código.

Dreamweaver


La vista Código y Diseño permiten dividir la ventana en dos zonas. La zona superiormuestra el código fuente, y la inferior el editor visual. Cuando se realiza un cambio enalguna de las zonas, este cambio se aplica directamente sobre la otra. Es la vista quese recomienda utilizar para tener un mayor control de lo que vas haciendo, ya que enun momento dado puede que la estructura se haya complicado y el HTML facilite sucontrol.

Dreamweaver


No olvidar nunca activar la ventana correspondiente a la vista con la que se deseatrabajar antes de introducir alguna modificación, pues puede ocurrir que se introduzcancomandos erróneos en la sección equivocada.

PANELES E INSPECTORES

Dreamweaver utiliza ventanas flotantes, similares a las barras de herramientas, que seconocen como paneles o inspectores . La diferencia entre panel e inspector es que,en general, la apariencia y las opciones de un inspector cambian dependiendo delobjeto seleccionado.

A través de la opción Ventana de la barra de menús es posible mostrar u ocultar cadauno de los paneles o inspectores. Por ejemplo el inspector de Propiedades muestra ypermite modificar las propiedades más utilizadas del elemento seleccionado. Porejemplo, cuando el elemento seleccionado sea un enlace, mostrará el tipo de fuente, laalineación, la negrita o cursiva, dirección web de enlace, etc. Desde el inspector es

Dreamweaver


posible modificar todos estos atributos.

Haciendo doble click sobre el nombre, podremos maximizarlo o minimizarlo. Pulsandosobre el botón se pliega o despliega para ocultar o mostrar más opciones. Este botónse encuentra en la esquina inferior-derecha.

La barra de herramientas Insertar o Panel de objetos permite introducir elementosen un documento sin la necesidad de recurrir al menú Insertar. Los elementos estánclasificados según su categoría: tablas, texto, objetos de formulario, etc. Es posibleconfigurar este panel para que en los botones se muestren los iconos de los objetos,los nombres de los objetos o ambos a la vez. Los elementos se insertarán en eldocumento, donde esté ubicado el cursor. Muchos de estos objetos tienen sus propiosmenús con herramientas adicionales, opciones y otros elementos relacionados.

La mayor parte de los paneles que utilizaremos para crear páginas web estánanclados, combinados en ventanas con fichas, dentro de grupos de paneles. A estos

Dreamweaver


paneles se puede acceder desde dentro de estos grupos, además de desde el menúVentana. A los grupos de paneles se les puede cambiar el nombre (pinchando sobre elnombre con el botón derecho), arrastrar (pinchando en las dos columnas de puntitosque tiene cada uno en la parte superior izquierda), cambiar de lugar (pinchando sobrela barra superior y arrastrándolo), plegar y desplegar (pinchando en el nombre), yocultar (arrastrándolo fuera y pinchando en el botón que aparece en la parte superiorderecha).

U.D.2. Definición de un sitio web

Existen sitios con una estructura muy compleja que contienen numerosas páginas, yotros más sencillos incluso con una página. En cualquier caso, siempre será necesariocrear un sitio definiendo la ubicación de los elementos que lo integran (imágenes,sonidos, etc.).

Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con undiseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web

Dreamweaver


antes de crear las páginas que va a contener.

• Sitio local : la forma habitual de crear un sitio consiste en crear una carpeta(carpeta raíz) en el disco local (nuestro ordenador). Los documentos HTMLnormalmente se introducen en dicha carpeta, mientras que para contener lasimágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevascarpetas dentro de ésta con el objetivo de tener una mejor organización delos archivos a la hora de trabajar.

• Sitio remoto : está formado por los archivos ubicados en el servidor Web alque se accede a través de Internet. Normalmente el sitio remoto es unacopia del contenido del sitio local. Esta copia se hará cuando se publique elsitio local (subirlo a Internet). Después de publicar un sitio es posible editarlas páginas existentes o añadir otras nuevas.

El método de trabajo consiste en crear y editar páginas en el sitio local y luego subirlasal sitio remoto. Se puede también editar directamente en el sitio remoto, pero no esrecomendable, pues podemos hacer cambios que nos gusten, o que den algún tipo deerror y se vean directamente en Internet.

Las ubicaciones y vínculos a todos los archivos incluidos en el sitio serán relativos a lacarpeta raíz. Siempre se debería crear y trabajar dentro de sitios locales. Si no se hace,puede que se tenga problemas con vínculos, rutas y gestión de archivos. Una vezcreadas las carpetas que formarán un sitio local, ya es posible definir el sitio enDreamweaver. La definición se realiza desde diferentes sitios. Al abrir Dreamweaver senos abre una ventana con varias opciones, entre ellas la de Sitio de Dreamweaver .

Dreamweaver


O desde el menú Sitio > Administrar sitios

Dreamweaver


O directamente desde la barra de menú.

Pueden existir varios sitios locales en un mismo ordenador. Cada uno correspondería aun sitio web diferente. Tanto si se elige la opción Nuevo como Editar uno ya creado, semostrará la misma ventana en la que definir las características del sitio.

Para crear un Sitio , procederemos de siguiente forma. Un vez que hayamosselecionado a Nuevo Sitio , se nos mostrará la siguiente pantalla.

Dreamweaver


Desde ésta daremos nombre al sitio. Es recomendable nombrar los sitios con relación alo que van a contener. En esta opción no deseamos utilizar la tecnología del servidor,ya que es algo que no vamos a tratar en este curso.

Dreamweaver


Aquí definiremos nuestra carpeta raíz , donde se almacenan todos los elementos. Loharemos desde el equipo.

Dreamweaver


La opción de conectar con un servidor remoto, la desarrollaremos en otra unidaddidáctica. De momento dejamos la opción "ninguno".

Dreamweaver


Así es como quedará reflejada la configuración.

Dreamweaver


Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionarla pestaña Básicas . Si deseamos configurarlo de forma más avanzada usaremos lapestaña Avanzadas .

Dreamweaver


Las características del sitio se agrupan en diferentes categorías que aparecen en laparte izquierda. Para visualizar las características de una Categoría basta conseleccionarla de la lista, y hacer clic en ella.

Los datos que hay que editar para la categoría Datos locales se corresponden con elNombre del sitio y la Carpeta raíz local, que es en la que se encuentra el sitio dentrodel disco duro local. Definiremos solamente los datos locales. De momento no esnecesario establecer los datos del servidor en el que estará el sitio remoto. Después derellenar los datos pulsamos el botón Aceptar y abrimos el sitio.

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrarsitios. Seleccionar el sitio de la lista y pulsar sobre el botón Listo.

U.D.3. Mapa del Sitio. Creación y mantenimiento.

En versiones anteriores de Dreamweaver. Existía la opción Mapa de sitio, dondepodíamos ver en formato gráfico una representación del sitio web, su distribución y losenlaces entre las páginas web del sitio. En esta última versión del programa esta

Dreamweaver


opción ha desaparecido, pero contamos con el Panel de archivos , que nos permitirá amodo de navegador.

Se encuentra en la parte inferior derecha del programa. Buscaremos yseleccionaremos el sitio en el menú desplegable de la pestaña Archivos. Desde elpanel Archivos podemos explorar todos los discos duros, los sitios creados yadministrarlos. Como se ve en esta imagen el sitio local DREAMWEAVER está creadoen el disco duro de este ordenador.

El Panel archivos de Dreamweaver se convierte en la interfaz en la que realizamostodas las tareas relacionadas con el sitio. Mientras trabajamos, es conveniente tenerlaabierta. Desde aquí controlamos todos los elementos que contiene el sitio.

Botones de la barra de herramientas del panel archivos:

Dreamweaver


a Conectar al servidor remoto: Conecta al servidor y actualiza la lista de carpetas paraluego ser publicadas.

b Actualizar: Actualiza los cambios.

c Obtener archivo (s): Descarga los archivos seleccionados desde el servidor remoto.

d Colocar archivos: Sube los archivos desde nuestro ordenador (sitio local) al servidorremoto.

e Proteger archivos: Descarga los archivos seleccionados y los marca como protegidospara evitar que sean editados por otra persona.

f Desproteger: Transfiere una copia del archivo local al servidor remoto y convierte elarchivo local en archivo de sólo lectura.

g Sincroniza todo el sitio.

h Expandir / contraer: Expande o contrae el panel archivos para mostrar uno o dospaneles.

Así es como quedaría el programa al expandir el panel de archivos.

Dreamweaver


Desde esta vista se muestra el panel de archivos extendido. Por un lado, los archivosdel sitio local, y por el otro lado estarían los archivos del sitio remoto. En este caso nose ven porque el sitio remoto todavía no está definido.

Desde aquí también podemos gestionar nuestro sitio después de haberlo creado,duplicar páginas, cambiar nombres, crear carpetas, reubicar los archivos, etc., y estoquedará reflejado también en la carpeta raíz de nuestro disco duro, ya que trabajamossobre ésta (sitio local).

Podemos abrir este panel posicionándonos sobre él y haciendo clic con el botónderecho del ratón o en la pestaña superior derecha.

También podríamos gestionar nuestro sitio remoto (aunque no es aconsejable trabajardirectamente sobre él) si cambiásemos de vista local a vista remota.

Dreamweaver


Módulo III. Diseño de páginas web

Introducción

La página web constituye la unidad mínima de un sitio web. Una vez creada esnecesario configurar las características generales de la misma, es decir tenemos queconfigurar las propiedades.

Las propiedades de todo documento, al igual que su contenido, se pueden configuraren cualquier momento del proceso creativo, pero siempre es recomendable tenerdesde el inicio del proceso una idea más o menos clara de cual es nuestro objetivo conel fin de tener que pacer posteriormente modificaciones complejas. Para que una webresulte atractiva, además de incorporar imágenes, animaciones, etc, es importante queel texto que contenga esté bien escrito y estructurado, que tenga una buena legibilidady para ello Dreamweaver proporciona una serie de herramientas que facilitan ypermiten dar al texto el formato deseado. Otra característica importante de cualquiersitio web es que contenga varios documentos o páginas y su flexibilidad para lanavegación (ya sea a los vínculos internos de sus páginas o externos a otras páginasweb).

En éste módulo mencionaremos ligeramente los estilo CSS, pero será en el módulo IXdonde profundizaremos en ellos, siendo una herramienta potente y muy efectiva paradar formatos no solo al texto sino también a la páginas web.

INDICE

1. Propiedades de la página.2. Propiedades del texto.3. Listas.4. Vínculos.

OBJETIVOS

En este módulo aprenderemos a crear y configurar páginas a la vez que daremosformato al texto y generaremos vínculos a otras páginas ya sean internas o externas.

U.D.1. Propiedades de la página

La página constituye la unidad estructural de todo el sitio web. Es importante conocer

Dreamweaver


sus propiedades para crear un sitio web interesante.

Cuando creamos un nuevo documento , en la opción del menú superior Archivo /Nuevo se abre este cuadro de diálogo.

En él aparecen, en el lado izquierdo, varias opciones que nos permitirán acceder amúltiples diseños en cada una de las categorías, y proporcionan también la posibilidadde crear nuevos diseños y plantillas propias.

La opción que nos va a ocupar en este curso será Página en blanco/ HTML . Una vezcreado el documento web, es necesario configurar las características que definen susatributos. Estas características son las propiedades del documento , entre las que seencuentran: el título, el esquema de colores y texto, la codificación, etc.

De todas maneras, Dreamweaver permite cambiar estas propiedades en cualquiermomento. Es conveniente definir sitios homogéneos, en los que todas las páginas deun sitio sigan un mismo formato; es decir, que tengan el mismo color de fondo, defuente, etc. Puede definirse el formato de cada una de las páginas a través dePropiedades de la página . Se puede abrir esta ventana de varios modos:

1. Pulsando la combinación de teclas Ctrl+J .2. Abriendo el menú Modificar y eligiendo la opción Propiedades de la página

Dreamweaver


.3. Pinchando con el botón derecho del ratón sobre el fondo de la página.

Aparecerá al final del menú contextual la opción Propiedades de la página .4. En la paleta propiedades en propiedades de la página.

Con cualquiera de estos métodos se abrirá el cuadro de diálogo que aparece en elaparatado siguiente.

CODIFICACIÓN DEL DOCUMENTO

Vamos a ver algunas de las distintas categorías que nos aparecen en la ventanaPropiedades la página . Empezaremos por Título/Codificación.

- Título del documento . Es una de las informaciones que utilizan los motores de

Dreamweaver


búsqueda para indexar las páginas web en sus bases de datos y así poderla localizarnuestro documento en la web. Aquí generalmente pondremos el título del documento,un identificador de la página actual, el nombre de sitio web, etc. Como si se tratara deun documento de texto cualquiera. Este también se puede cambiar desde aquí.

- Tipo de documento (DTD). Está información hace referencia a la estructura yformato del documento. Es recomendable dejar la opción por defecto ya que estasopciones no son parte del temario del curso.- Codificación específica. La codificación empleada para los caracteres deldocumento (si se usan caracteres en japonés, cirílico, hebreo...). Aquí es recomendableutilizar el formato UTF-8, que es un estándar de los más utilizados.

APARIENCIA DE LA PÁGINA

En la imagen mostrada más abajo, vemos que tenemos dos opciones, Apariencia dela Página CSS y Apariencia de Página HTML . En esta última permitirá configurar laspropiedades de color de fondo, imagen de fondo y márgenes.

- Imagen de fondo. También se puede definir una imagen de fondo de la página, estolo veremos más detalladamente en el módulo siguiente.

- Márgenes. Con esta propiedad se puede definir la distancia en píxeles hasta losbordes superior e izquierdo de la ventana del navegador. Si no se define estapropiedad cada navegador utilizará sus configuraciones propias.

Dreamweaver


En la apariencia de la Página CSS , podremos también cambiar el aspecto del texto,su color, color de fondo, etc.

Dreamweaver


Las siglas CSS, Cascading Style Sheets, hojas de estilo en cascada . Se trata de unsistema para dar formato al texto y colocar los elementos dentro de la página, de unaforma muy parecida al funcionamiento de los estilos en un procesador de texto. Lasrazones para usar este sistema son muchas pero las principales son que ahorrantrabajo y nos permiten crear contenido más fácilmente que antes.

Es un lenguaje formal que se usa para definir la forma de presentación de una páginaweb, escrito en HTML o XML. Los que se persigue con el desarrollo de hojas de estiloes separar la estructura de una página de su presentación visual. Por ejemplo, laetiqueta de HTML indica que un bloque de texto es un encabezamiento y que es

mayor que un bloque con la etiqueta . En las versiones anteriores del HTML

permitían atributos extra dentro de la etiqueta abierta para darle formato (como el coloro el tamaño de la fuente), pero el problema lo encontrábamos en la cantidad de vecesque teníamos que repetir esto en una página para darle consistencia a la misma, y siencima nuestro sitio web era de 20 páginas diferentes, tendríamos que hacer muchasinserciones. Cuando utilizamos CSS, la etiqueta no proporcionará información

sobre cómo va a ser visualizado, solamente marca la estructura del documento, lainformación de estilo separada en una hoja de estilo, nos dará la información de cómova a ser mostrado : color, fuente, alineación del texto, tamaño. La información

del estilo puede ser adjuntada en un documento separado, con extensión ?.CSS ? o en

Dreamweaver


el mismo documento HTML.

-Fuente de página. Se desarrollará en el capítulo siguiente.

- Color de texto y Color de fondo de página. Veamos a continuación cómo sedefinen los colores en Dreamweaver.

DEFINICIÓN DE COLORES EN DREAMWEAVER

En Dreamweaver los colores se definen en el Inspector de Propiedades o en otroscuadros de diálogo, dependiendo del elemento. Cuando se aplica un color, se generaun código HTML con un número de color hexadecimal para que lo reconozca elordenador. Por ejemplo, el #006600, corresponde a un verde.

El hexadecimal es un sistema numérico de base 16, que usa del 0 al 9 y desde la A ala F. En código HTML el color se representa de manera que los dos primeros dígitosrepresentan el nivel de rojo, los dos siguientes el de verde, y los dos últimos el azul. Sepueden definir colores para los siguientes elementos: Fondo, Texto, Vínculos, Vínculosactivos y Vínculos visitados. Para asignar colores es posible desplegar una paleta decolores como la que aparece en la imagen inferior. Al seleccionar un color de estaspaletas se muestra el valor hexadecimal del color en la parte superior.

Las paletas de colores de Dreamweaver utilizan la paleta de 212 colores seguros paraweb. Éstos son los colores que se muestran de la misma forma en Firefox y MicrosoftInternet Explorer. También es posible personalizar los colores a través del botón de laparte superior de la paleta.

Dreamweaver


Los colores pueden asignarse a través de los botones:

Estos botones suelen aparecer en el Inspector de propiedades de muchos objetos, ytambién en algunas ventanas que permiten especificar propiedades (sobre todopropiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedadesde la página que aparece más arriba.

El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadrogris, lo que hace que se despliegue la paleta de colores. El otro modo es

introduciendo directamente el número hexadecimal del color en el recuadro blanco.

Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el colorcon valor #00FFCC, el botón quedaría del siguiente modo: .

ENCABEZADOS

En esta categoría se pueden definir el tamaño y el color de fuente para seisencabezados distintos. Se define la fuente, estilo, tamaño y color. El programaguardará esto para que sea utilizado cuando se estime necesario en cualquier textoque se incluya en la página, sin tener que definirlo en las propiedades. El programacreará un estilo CSS para cada uno.

Dreamweaver


U.D.2. Propiedades del texto

En una página web es importante que la información que contiene sea precisa, estébien escrita y resulte visualmente atractiva. Siempre es posible utilizar código HTMLpara introducir texto usando la vista código, pero Dreamweaver permite introducir textodesde la vista Diseño . Todas las formas de cortar, copiar y pegar conocidas de otrasaplicaciones funcionan también en Dreamweaver.

En Dreamweaver , a diferencia de los procesadores de texto normales, el salto depárrafo y salto de línea tienen significados.

• Salto de párrafo : con la etiqueta , representa a un párrafo y se

genera con la tecla Enter. Todo el texto que aparece entre los dos signos <>, se considera un solo elemento y se le aplican atributos propios. En estaetiqueta podremos incluir texto, imágenes etc. ya se comporta como unpárrafo. También es posible insertar la etiqueta con el formato , que

significaría un párrafo vacío.• Salto de línea : con Mayus+Enter. Aunque es más correcto utilizar la

etiqueta con el formato , es decir abriendo y cerrando la etiqueta enel mismo código.

Dreamweaver


Los documentos web ignoran varios espacios en blanco consecutivos, ya que no lotienen en cuenta. En caso de querer poner varios espacios en blanco seguidos, ydeberán introducirse desde HTML, usaremos la etiqueta: ; es lo que se llama

espacio indivisible. En el menú Insertar / HTML / Caractéres especiales o mediantela combinación de teclas Ctrl+Mayus+Espacio.

FORMATO DE TEXTO

Muchos de los atributos de texto son modificables. Por ejemplo; tipo de fuente,tamaño, color y estilo . Al seleccionar un texto, el Inspector de Propiedades seconvierte en un Inspector de Texto ya que nos muestra las propiedades del texto, porun lado en HTML, con las siguientes características:

A. Negrita.B. Cursiva.C. Lista desordenada.D. Lista ordenada.E. Anular sangría de Texto.F. Sangría de Texto.G. Vínculo o enlace.

Por otro lado las propiedades del texto en CSS:

A. Nombre de la regla de la hoja de estilo.B. Tipo de fuente.C. Negrita.D. Cursiva.

Dreamweaver


E. Alineación a la izquierda.F. Alienación centrada.G. Alineación a la derecha.H. Alineación justificada.I. Tamaño de fuente.J. Medida de la fuente.K. Color de la fuente.

Características de algunas opciones:

Tipo de Fuente: Aparecen conjuntos de fuentes en lugar de una sola. Esto posibilitaque en el caso de que el usuario no tenga instalada en su ordenador una de las fuentesde ese conjunto, se aplique la siguiente de este conjunto. Éstas suelen ser las fuentesmás comunes que están instaladas en los ordenadores.

Es posible añadir otros tipos de fuente, mediante la opción de Editar lista de fuentes.Pero nunca existe la seguridad de la forma en que se visualizarán en otros sistemas.Puede que los usuarios que visualicen la página no tengan instalada esa fuente en susistema, por tanto el consejo es que se utilicen los grupos de fuente que ofrece elprograma.

Dreamweaver


Si se desea usar fuentes diferentes por cuestión de diseño, hay convertirlas en imagenen un programa de edición de imágenes. No es conveniente hacerlo con muchacantidad de texto, solamente si es para un título o poco más, pues hay que tener encuenta el peso de las imágenes (que es superior al del texto).Cuando se pone un tipo de fuente, automáticamente se nos abrirá una ventana en laque deberemos crear un nuevo estilo. En versiones anteriores del programa, esto nosucedía, pero ante la evolución de los lenguajes de páginas web y de laestandarización de las normas de diseño web, es recomendable, por no decir que“casi” obligatorio, la creación de dichos estilo.

Primero tendremos que escoger que tipo de selector es, en principio dejaremos el queel programa nos propone. Deberemos introducir un nombre para la clase que estamoscreando, que deberá ser único para que no haya confusión, y el área de influencia , eneste documento o creando una hoja de estilos externa.

Dreamweaver


Hemos creado una clase llamada texto_contenido, modificando el tipo de texto.

Aquí vemos una vez aceptada la pantalla anterior como quedaría en la página web.

Dreamweaver


Tamaño de la fuente, Unidad de Medida y Color : Permite cambiar el tamaño deltexto. Si seleccionas alguno de los valores numéricos de la parte superior se activa elmenú de la derecha que contiene las unidades para el tamaño de fuente (puntos,píxeles, etc.). También se puede seleccionar un tamaño de fuente relativo (muypequeño, etc.), que actúa en relación con la dimensión del texto configurado en losordenadores de los usuarios. Al lado el color de la fuente ignorando el color que sehaya definido en las propiedades de la página. Si no se ha establecido ningún color enlas propiedades de la página ni aquí, el color del texto por defecto será el negro.

Dreamweaver


Estilo : Estos botones permiten establecer si el texto aparecerá en negrita o

en cursiva. A través del menú Formato / Estilo también se puede, entre otras cosas,subrayar el texto. Esta opción no aparece en el panel de Propiedades, ya quenormalmente no suele utilizarse debido a que los vínculos aparecen subrayados, ysubrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo.Existen más estilos que no se pueden utilizar desde el inspector de propiedades, sinodesde el menú de Formato. Se puede aplicar varios estilos de fuente a una solaselección de texto.

Dreamweaver


En este menú Formato, podemos encontrar opciones interesantes como pueden ser elformato de párrafo que nos permitirá seleccionar un formato de párrafo ya definido paraHTML, que puede ser:

• Encabezado : Seis diferentes que se definen al principio en Propiedades deldocumento y se utilizan para títulos y subtítulos.

• Formato predeterminado : Sirve para que el texto aparezca tal cual ha sidoescrito. Por ejemplo, si entre dos palabras se introducen varios espacios,sólo se consideraría uno, pero al establecer el formato predeterminado serespetará que haya varios espacios en lugar de uno.

• Ninguno : Elimina cualquier formato que se haya aplicado anteriormente.• Párrafo : Inserta las etiquetas y añade un final de párrafo.

Dreamweaver


Alinear : A través de estos botones es posible establecer la alineación

del texto de cuatro formas distintas: izquierda, centrada, derecha y justificada. Paraestablecer la alineación de texto sólo se precisa insertar el cursor en algún lugar delpárrafo y hacer clic en cualquier opción.Las opciones de alineación de texto controlan la posición de los textos respecto a losbordes de la página, pero si este texto está en una celda de tabla, capa o marco serácon respecto a los bordes de estos contenedores.Lista : Estos botones permiten crear listas con viñetas o listas numeradas.

Ampliaremos este tema en la siguiente unidad.

Sangría : Estos dos botones permiten sangrar el texto y anular la sangría. La

sangría es una especie de margen que se establece a ambos lados del texto. En estecaso los botones crean la sangría a la izquierda del texto.

U.D.3. Listas

Cuando diseñamos o creamos una página web deberemos crear un documento que selea con facilidad y cuya información esté ordenada. Para ayudarnos un poco en estalabor tenemos herramientas como las listas. Nos ayudarán a crear contenido ordenadoy coherente y su funcionamiento es muy semejante a como se usan en un procesadorde textos, o bien creamos el texto primero y luego lo marcaremos como lista o a lainversa. Para que un texto que ya ha sido introducido en el documento se convierta enuna lista, simplemente hay que seleccionarlo y pulsar sobre la opción de listacorrespondiente, ya sea a través del Inspector de propiedades o del Menú Formato /Lista .

Dreamweaver, nos ofrece varios tipos:

• Lista ordenada. Lista generalmente precedida de un número, o letras delalfabeto de forma ordenada.

• Lista desordenada. Listas con viñetas, ya sean pequeños cuadrados,círculos, etc.

• Lista de definición. Son listas en las no aparece ningún tipo de identificadorpero están con sangría y estructura propia.

Dreamweaver


Para que un texto que ya ha sido introducido en el documento se convierta en una lista,simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, yasea a través del Inspector de propiedades o del Menú Formato / Listas .

La lista con viñetas (desordenada) se selecciona a través del botón , mientras que

la lista numerada (ordenada) se selecciona a través del botón . Para insertar la lista

de Definición hay que recurrir al menú.

Para establecer listas anidadas dentro de otras, como en los ejemplos anteriores, esnecesario añadir una sangría en los elementos de la lista que se desee que pasen aformar parte de la lista anidada. A través del menú Formato , opción Lista , es posibleacceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de lalista previamente.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con númeroso con viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo ),y en el caso de las listas ordenadas, el número por el que comenzará el recuento.

Dreamweaver


U.D.4. Vínculos

Vínculos, hipervínculos, enlaces, hiperenlaces, hyperlinks o simplemente links; sonalgunos de nombres con los que denomina la acción de ir de una página web a otra. Lapágina que contiene el vínculo o página de origen se conoce como página dereferencia , y la página final como página de destino . Los vínculos se muestran deforma muy diferente en las diferentes páginas web, pueden de URL, un simple texto,una imagen, un botón, etc.

Antes de ver la forma de trabajar en Dreamweaver es bueno repasar o ver, que son lasRutas de Acceso. Las rutas de acceso son las direcciones de los elementos, si es unapágina web es la ruta o la dirección, si fuera una imagen es la ruta para llegar a esaimagen.

RUTAS DE ACCESO

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.Dependiendo muchas veces del elemento al que haremos referencia usaremos unas uotras.

• Rutas absolutas. Contienen la dirección completa, el URL completo, estaruta se usará generalmente para las páginas ubicadas en otro sitio. Porejemplo: http://www.sitio.com/pagina.html . Donde nos encontramos:

• http: - protocolo de transferencia• //www.sitio.com - servidor o dominio,• /página.html ? dirección del documento (está ubicada en la carpeta

raíz del sitio).• Rutas relativas. Se utilizan para vincular páginas ubicadas dentro del

mismo sitio, pagina.html se refiere a una ruta de acceso del documento./pagina.html será una ruta relativa a la raíz del sitio. Así mismo dentro delas rutas relativas nos encontramos con:

• Rutas relativas al documento . Se utilizan para vincular páginas quese encuentran en la misma carpeta o en el mismo sitio. Si doc1.htmly doc2.html están en la misma carpeta , el vínculo de doc1.html adoc2.html será doc2.html . Si por el contratrio doc2.html estuvieraubicada en otra carpeta , entonces será ../carpeta2/doc2.html

• Rutas relativas a la raíz del sitio. La referencia, en lugar de ser eldocumento de origen del vínculo, es la carpeta raíz del sitio. Este tipode ruta siempre empieza con una barra/

Un pequeña ayuda a la hora de crear los vínculos es mantener unas pequeñas reglas,con fin de no equivocarnos. Para ello utilizaremos unas normas que deberemos teneren cuenta. Son:

Dreamweaver


• Vincular documentos que estén en la misma carpeta , rutas de accesorelativas al documento .

• Si tenemos un Sitio con muchas carpetas y subcarpetas donde seacostumbra a cambiar de lugar los documentos , rutas de accesorelativas a la raíz del sitio.

• Para imágenes o archivos multimedia , rutas de acceso relativas a la raízdel sitio (ejemplo, si se hace un menú de navegación en Flash, habrá quetener en cuenta este tipo de ruta para su programación). Generalmente esaconsejable poner todo este tipo de archivos en la misma carpeta.

CREAR VÍNCULOS

Para crear los enlaces, el programa Dreamweaver , nos ofrece varias formas.

• Seleccionando el elemento que queremos sea vínculo y pulsando sobre elicono y arrastrando hasta el documento al que queremos que enlace, en elInspector de Propiedades .

• Desde el inspector de propiedades también, introducir la ruta deldocumento, de forma manual o buscándola desde el explorador por mediodel icono carpeta.

• Desde el Menú / Insertar Hipervínculo . Se nos abrirá una ventana dondeintroduciremos todos los datos.

Dreamweaver


CREAR VÍNCULOS UTILIZANDO UN ANCLA

Es posible, también, crear vínculos a un punto ubicado dentro del mismo documentodel siguiente modo: nombre_de_documento#nombre_de_punto . El punto se definedentro de un documento a través del menú Insertar, opción Anclaje con nombre .

Dreamweaver


Se nos abrirá una ventana donde introduciremos el nombre del ancla.

Y aparecerá este símbolo donde lo hayamos insertado dentro de la página. Esto no

se visualizará en el navegador, solamente en el espacio de trabajo del programa. Lamanera de vincular a este sitio será:

• Desde el mismo documento : Seleccionando el elemento que se quiereutilizar como vínculo y escribiendo en el inspector de propiedades en vínculo# y nombre del anclaje, por ejemplo: #1 . Al pinchar en el vínculo, la páginamostrará la parte donde esté el ancla, desplazándose por ella. Esto se suele

Dreamweaver


hacer por ejemplo cuando una página es demasiado larga, y en diferentesalturas de ésta se inserta un ancla que lleva al principio de la página.

• Desde otro documento : llevará a la parte de otra página donde esté elancla. El texto será nombre de la página # nombre del anclaje. Por ejemplo:pagina1.html#.

VÍNCULOS A DIRECCIONES DE CORREO

Se puede crear vínculos a una dirección de correo electrónico de la siguiente manera:mailto: + dirección de correo . Por ejemplo: mailto:[email protected]. Al hacerclic, automáticamente se abrirá el editor de correo electrónico predeterminado.

DESTINO DEL ENLACE

El destino del enlace determina en qué ventana va a ser abierta la página vinculada.Puede variar dependiendo de los marcos (esto lo veremos más adelante) de quedisponga el documento actual. Puede especificarse en el Inspector de propiedades através de Destino , o en la ventana que aparece a través del menú Insertar/Hipervínculo.

Dreamweaver


1. _blank . Abre el documento vinculado en una ventana nueva del navegador.2. _parent . Abre el documento vinculado en la ventana del marco que

contiene el vínculo o en el conjunto de marcos padre.3. _self . Es la opción predeterminada. Abre el documento vinculado en el

mismo marco o ventana que el vínculo.4. _top . Abre el documento vinculado en la ventana completa del navegador.

COLOR DE LOS VÍNCULOS

Forma parte de las propiedades del documento y en esta nueva versión ya es unapropiedad de la Hoja de Estilo, CSS . Da la opción de colorear los vínculos en susdiferentes estados.

• Color de vínculo no visitado. (Por defecto es azul).• Color de vínculos de sustitución , cuando el cursor está encima de él. (Por

defecto también azul).• Color de vínculos activos , cuando se pincha sobre él. (Por defecto es rojo).• Color de vínculos visitados . (Por defecto es violeta).

Estos colores están bastante normalizados en la red, pero no es imprescindibleutilizarlos.

Dreamweaver


Dreamweaver


Módulo IV. Incorporación de imágenes

Introducción

Seleccionar las imágenes para un sitio y saber distribuirlas va a ser una de lasdecisiones más importantes del proceso de diseño de la web. Esto va a hacer que elsitio sea atractivo o no, y nos ayude a transmitir un mensaje inmediato. Hay que saberjugar con su composición para que el sitio resulte atractivo. Pero hay que tener encuenta algo muy importante, que las imágenes tienen un tamaño y por lo tanto pesodeterminado dentro de la web, ocupan un espacio físico no sólo visual, y si no sabemosgestionarlas bien y optimizarlas, pueden ralentizar el sitio y hacer que los usuariosdesistan de ver nuestra página.

Las imágenes abarcan desde fondos, sombras, texturas, banners e iconos hastaimágenes interactivas.

ÍNDICE

1. Formatos y propiedades.2. Imagen de fondo de página.3. Imágenes de sustitución.

OBJETIVOS

En este módulo vamos a conocer los diferentes formatos de imagen, sus propiedades ysus posibilidades de ubicación.

U.D.1. Formato y propiedades

Las imágenes son un elemento importante dentro de las páginas web, ya que ayudan aque su diseño sea más o menos atractivo y aportan información visual. Es importantetener en cuenta el peso de las imágenes (se mide en KB). Hay que saber gestionarlasbien ya que de esto dependerá en gran parte que la página se descargue con mayorrapidez y que, por lo tanto, su acceso sea más rápido y el visitante no se canse deesperar y anule la visita.

Crear imágenes para la web es diferente de crear imágenes para imprimir. Para esto esimprescindible conocer los distintos formatos de imagen. Las imágenes abarcan desdefondos, sombras, texturas, banners, etc. Las imágenes para la web deben crearse en

Dreamweaver


modo de color RGB , no en CMYK (este modo es para impresión). También laresolución tiene que ser la adecuada. La resolución de pantalla es de 72 puntos porpulgada, pero las de impresión son mucho más elevadas: desde 150 a 300 puntos.

Encontrar el equilibrio ideal entre calidad de imagen y tiempo de descarga es el objetivopara un diseñador web.Para esto hay que optimizar las imágenes de la mejor forma, desde un editor deimagen. Se pueden utilizar diferentes programas como Photoshop de Adobe, Firework,GIMP, etc. La información de la imagen que se pierde una vez comprimida, ya no sepuede recuperar. Por eso es importante guardar siempre la original y hacer los cambiossobre ésta, ya que si se hacen desde la imagen comprimida se volverá a perderinformación.

FORMATOS

Hay multitud de formatos diferentes en la actualidad, por ejemplo bmp, gif, jpg, raw, tiff,etc. Pero no todos son adecuados para una web debido a que pueden ocupar muchamemoria o a que no son compatibles con navegadores. Los formatos más utilizadosson el GIF, JPG y PNG. La elección va a depender de cómo sea la imagen.

Formato GIF:

Utilizan un máximo de 256 colores, y es recomendable para imágenes con grandesáreas de un mismocolor. Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias ypequeñas animaciones. Normalmente se utilizan para imágenes más planas comodibujos, iconos, etc.

Formato JPG:

Estas imágenes son de mayor calidad que los GIF por que contienen millones decolores, pero su tamañoes mayor y tarda más en descargarse, aunque actualmente con los programas actualesde diseño se consiguen buenas imágenes con poco tamaño. Actualmente es el másutilizado en la web debido a relación calidad y tamaño. Normalmente se utiliza parafotografías.

Formato PNG:

Este formato es poco utilizado, pese a que es un buen formato, admite transparencias,no como el jpg, y puede llegar a ser muy ligero. Se suele utilizar en dibujos vectoriales,pero todavía no está muy extendido y en algunos navegadores antiguos puede ser queno funcione correctamente.

Dreamweaver


En la siguiente imagen podréis observar las diferencias entre ambos formatos.

PROPIEDADES

Las propiedades de las imágenes deberemos modificarlas desde programas externosya que Dreamweaver no permite hacerlo.

Dimensiones (ancho por alto). Se miden en píxeles y muestran el tamaño de laimagen tal y como se ve en elordenador.

Resolución. Se mide en píxeles por pulgada . La resolución para web será de 72pixeles/pulgada . Desde un programa editor de imágenes, por ejemplo el Photoshop,se permite gestionar las dimensiones y la resolución de la imagen.

Dreamweaver


Lo que si nos permite Dreamweaver es que haciendo doble clic en una imagen, abrir eleditor de imágenes predeterminado y así poder modificar la imagen, para ello iremos elmenú Edición / Preferencias / Tipo de archivos editores . Desde esta opciónpodemos configurar el programa predeterminado.

Dreamweaver


Una imagen se puede insertar desde diferentes sitios. Desde la opción Menú / Insertar/ Imagen .

O simplemente seleccionando la imagen en el administrador de archivos yarrastrándola donde se quiere ubicar dentro de la página web.

Dreamweaver


INSPECTOR DE PROPIEDADES

Dreamweaver


En el inspector de propiedades de la imagen tenemos propiedades como:

A. Puntos de control de la imagen, que nos servirán para cambiar de forma visual eltamaño de la imagen.B. Tamaño de la imagen.C. Podemos dibujar un mapa sobre la imagen y este espacio se convertirá en una zonade hipervínculo.D. Tamaño de ancho y alto de la imagen.E. Agregar espacios a la imagen.F. Ruta de la imagen.G. Vínculo de la imagen si deseamos que enlace a otra página o documento.H. Opciones para editar la imagen.I. Tamaño para añadirle un borde a la imagen introduciendo un número.J. Alineación de la imagen respecto a donde se encuentra.K. Opciones de recorte, brillo y contraste, para modificar la imagen.

Dreamweaver


U.D.2. Imagen de Fondo de Página

Desde Dreamweaver se puede definir una imagen de fondo, en vez de usar un simplecolor. Hay que tener en cuenta que al poner una imagen de fondo se pueden dar dossituaciones; la primera es que sea del mismo tamaño la página y la imagen, por lo quela página aumenta de peso y tardará más en cargarse y por lo tanto hay queoptimizarla muy bien; la segunda situación es que dicha imagen sea más que pequeñaque la página, por lo que el navegador creará un mosaico y la repetirá tantas vecescomo sea necesario para rellenar la parte de la página visible en el navegador.

Las imágenes seleccionadas como fondo tienen que guardar una armonía con el restode la página, y no dificultar la visibilidad de otros elementos como imágenes, textos,etc. Cuando se define una imagen de fondo, siempre se superpone a cualquier color defondo definido anteriormente. Se inserta una imagen de fondo desde Propiedades de lapágina.

Dreamweaver


La imagen de fondo siempre va a rellenar toda la página, y se va a repetir las vecesque haga falta. No es necesario crear una imagen de un tamaño tan grande como laanterior para rellenar el espacio disponible. Una imagen de cualquier tamaño serepetirá y nos creará un mosaico, como el de la siguiente imagen.

Dreamweaver


No se puede controlar la disposición en mosaico de la imagen. El navegadorautomáticamente repite la imagen tantas veces como sea necesario, horizontal yverticalmente para rellenar el espacio disponible. El mosaico comienza en la esquinasuperior izquierda y se repite desde ese punto. Podremos en este punto, en la opciónde Propiedades de Página Repetir , modificar la repetición de la imagen. Sus opcionesson:

• no-repeat : Sólo muestra la imagen una vez.• repeat : Repetirá la imagen por toda la página.• repeat-x : La repetirá en horizontal.• repeat-y : La repite en vertical.

Dreamweaver


También se pueden utilizar imágenes como fondo de tabla, de celda y de capa.

U.D.3. Imágenes de sustitución

Normalmente un hipervínculo cambia de estado; que cambia de alguna forma cuandoel cursor está sobre él. Por ejemplo, un texto cambia de color, estilo o tamaño; lo quenos indica que se puede pinchar sobre él, y normalmente sucede algo.

Cuando el vínculo es una imagen y hay un cambio visual, se llama sustitución .Consiste en dos imágenes. La imagen principal o arriba , que se visualiza cuando secarga la página por primera vez; y la imagen secundaria o imagen sobre , con la queel navegador sustituye a la imagen principal cuando el cursor pasa sobre ella.

Las dos imágenes deben ser del mismo tamaño. Si no es así, la imagen secundariaadquirirá el tamaño de la principal, por lo que puede aparecer deformada si lasproporciones de ambas imágenes no son iguales.

Estas se pueden crear desde el programa, desde el panel de objetos Insertar /Objetos de imagen / Imagen de sustitución .

Dreamweaver


Hay que introducir varios datos. Las imágenes deben tener nombre ya que si no elprograma asigna uno por defecto.

Seleccionar la imagen original y la de sustitución.

Activar o desactivar la casilla de carga previa. Es interesante activarla. El ordenadorno cargará la imagen con la página si ésta no está activada, sino que esperará a queposicionemos el ratón sobre la imagen original. Es posible que esta imagen pese unpoco y tarde en cargarse, entonces el usuario desista en la espera, no vea la imagende sustitución y no utilice el enlace. Dreamweaver utiliza código JavaScript para dar laorden al navegador de cargar las dos imágenes al cargar la página.

Texto alternativo. Este texto aparece al posicionar se sobre la imagen. Se puede

Dreamweaver


aplicar a todas las imágenes aunque no sean de sustitución. Para modificar la imagende sustitución acudimos a menú Ventana / Inspector de etiquetas .

Se nos abrirá una ventana donde veremos como comportamiento “Intercambiarimagen”

Dreamweaver


Se nos abrirá una nueva ventana en la que podremos cambiar la imagen, la opción“Definir origen como …”

Dreamweaver


Dreamweaver


Módulo V. Utilización de tablas

Introducción

Las tablas son uno de los elementos más importantes de la maquetación web, ya queademás de mostrar información en forma de tablas tradicionales, a través de ellaspodremos distribuir el contenido de la página por toda su superficie.

Es muy importante saber trabajar con ellas ya que nos permitirá crear diseñosatractivos y muy modeables.

ÍNDICE

1. Crear tablas.2. Ancho y alto de columnas y filas.3. Combinar y dividir celdas.4. Bordes y fondos.

OBJETIVO

Aprender a crear, editar, dar formato y rellenar las tablas (insertar tablas, combinarceldas, insertar filas o columnas y cambiar tamaños de borde, etc.).

U.D.1. Crear tablas

Las tablas son uno de los elementos más importantes de la maquetación web.Se utilizan para mostrar datos y principalmente para distribuir los elementos en lapágina. Hoy en día, muchas de las páginas web que visitamos se basan en tablas yaque resultan de gran utilidad al mejorar notablemente las opciones de diseño.

Todos los objetos se alinean por defecto a la izquierda al ser insertado en una páginaweb, pero gracias a las tablas es posible distribuir el texto en columnas, colocarimágenes al lado de un bloque de texto, y otra serie de opciones que sin las tablasno sería posible realizar.

A una tabla le corresponde la etiqueta . Una tabla está formada por unasucesión de filas, teniendo por etiqueta , y de columnas, a la que corresponde laetiqueta , y cada intersección de una fila con una columna se conoce como celda.

Crear una tabla en código HTML es complicado, pero Dreamweaver se ocupa de crear

Dreamweaver


todo el código necesario. Se puede crear, editar, dar formato y rellenar de una formatotalmente visual sin tener que acudir al HTM, aunque es bueno conocerlo por si en unmomento dado del diseño web, nos perdemos.

Ejemplo de tabla:

INSERTAR UNA TABLA

Se puede hacer desde el menú Insertar / Tabla , con la combinación de teclasCTRL+ALT+T o desde el panel Insertar / Común, Tabla. Aparecerá el siguiente

menú:

Dreamweaver


El cuadro de diálogo permite configurar las características de tabla:

Tamaño

• Número de filas• Número de columnas• Ancho de tabla: en píxeles o en porcentaje con respecto a la ventana del

navegador.• Grosor del borde de la tabla: en píxeles.• Rellenos de celda: el número de píxeles entre el borde de la celda y su

contenido.• Espacio entre celdas : número de píxeles entre dos celdas adyacentes.

Dreamweaver


Encabezado: se puede seleccionar la ubicación del encabezado. El formato de esasceldas cambia; está más destacado.

Sección accesibilidad

• Texto: proporciona el título de tabla; aparece fuera de la misma.• Alineación del texto: alineación de éste respecto de la tabla.• Resumen: ofrece una descripción de la tabla. No será visible en el

navegador.

La anterior imagen nos muestra el aspecto de la tabla, una vez creada, si queremospodemos ocultar o mostrar las ayudas visuales de la tabla desde el menú Ver .

Dreamweaver


No es imprescindible configurar todas las características de la tabla al principio porque se pueden modificar en cualquier momento.

Seleccionar

Es posible seleccionar una tabla o sus componentes de diferentes maneras:

Dreamweaver


• Pinchando en la parte superior izquierda de la tabla.• Pinchando en cualquier parte de la tabla y seleccionando la etiqueta

en el selector de etiquetas.

• Pinchando en la tabla y en el menú Modificar / Tabla / Seleccionartabla.

• Pinchando en una celda de la tabla, y desplegando el menú delencabezado.

Dreamweaver


Para seleccionar cualquier celda, posicionarse en una de ellas y seleccionar en elselector de etiquetas. Otra manera de seleccionar es pinchar en la primera celda deuna fila y arrastrar el ratón hasta el final.

Configuración de la propiedades de una tabla.

La mayoría de estas propiedades las hemos visto en el menú de Tabla. Explicaremosaquí las no comunes.

Id de tabla, (por debajo de la palabra Tabla): Especifica un identificador o nombre de latabla (es opcional) común a todos los elementos de la página.

Alinear: Determina dónde aparece la tabla en relación con otros elementos del mismopárrafo, como por ejemplo texto e imágenes.

Botones para modificar las dimensiones de tabla: Este apartado lo desarrollaremos enla unidad que trata del tamaño de columnas y filas.

Añadir contenido a una tabla

Seleccionando la celda donde se va a introducir el contenido, se escribe el texto o seinserta la imagen de las formas que ya conocemos. Los datos de una tabla se puedenordenar, si son datos de texto, desde Comandos / Ordenar tabla .

Dreamweaver


U.D.2. Ancho y alto de columnas y filas

Dreamweaver permite modificar el tamaño de la tabla en general, y también ajustarindividualmente la altura de las filas y el ancho de las columnas. El tamaño de la tabla através del Inspector de propiedades está especificado por el valor de An (anchura).El ancho de una tabla puede ser definido como píxeles o como porcentaje. Cuando seintroducen datos en píxeles, el tamaño es fijo, no varía. Si es en porcentaje el tamañoestá en relación con el contenedor. Por ejemplo: una celda respecto a una fila ocolumna, una tabla respecto a una celda y una tabla respecto al navegador.

Al modificar el tamaño de la tabla completa, Dreamweaver varía el tamaño de todas lasceldas proporcionalmente, a menos que antes se haya especificado un tamañodeterminado para alguna de ellas.

Para ajustar el ancho de una columna se selecciona una o varias y se escribe un valoren la casilla An .

Para ajustar el alto de una fila se selecciona y se escribe un valor en la casilla Al .

Dreamweaver


No sólo puede establecerse el tamaño de las tablas y de las celdas a través delinspector de propiedades, también es posible hacerlo manualmente, manteniendopulsado el ratón sobre alguno de los bordes y arrastrándolo hacia la posición deseada,pero este método es menos preciso. Hay que tener cuidado con esta opción, porque aveces sin quererlo se puede modificar el tamaño de alguna celda al intentar seleccionaralgún contenido, y sin darse cuenta variar el tamaño. Por eso es preferible modificartamaños de la otra forma.

En el inspector de propiedades aparecen unas casillas que simplifican este trabajo.

• Convertir anchos de tabla en porcentajes. Establece el ancho de

todas las columnas de la tabla en su ancho actual, expresado en porcentajedel ancho de la ventana del documento.

• Convertir anchos de tabla en píxeles. Establece el ancho de todas las

columnas de la tabla en su ancho actual, en píxeles.• Borrar ancho de columna. Elimina los valores especificados para el

ancho de columna de la tabla.• Borrar alto de fila. Elimina los valores especificados para el alto de fila

de la tabla.

Si no se introduce ningún valor en las celdas, el navegador ajustará automáticamenteestas dimensiones según se necesite, y adaptará las medidas de la tabla a lasdimensiones de la visualización del navegador.

Una manera de borrar e igualar todas estas medidas es desde el encabezado queaparece en el modo diseño. Éste marca dónde comienza y acaba cada columna o tablay cuánto mide, si se le da algún valor.

Dreamweaver


Una vez establecidas las dimensiones de la tabla, hay que comprobar que estasdimensiones no entren en conflicto. Cuando ocurre esto, los navegadores muestranmal el contenido. Por ejemplo, dar a una celda que contiene una tabla un valor de 100px de ancho y a la tabla un valor de 200 px, creará un conflicto, ya que la celda quecontiene a la tabla es más pequeña.

Para facilitar el manejo de las tablas desde el espacio de trabajo, Dreamweaverproporciona el modo de Tabla Expandida. Con está herramienta podremos trabajar lastablas, en cuanto a tamaño se refiere, de forma más cómoda. Añade temporalmenterelleno y espaciado de celda a las tablas y aumenta los bordes de las tablas parafacilitar la edición.

Para hacer podremos ir al Menú Ver / Modo de tabla / Modo de tablas expandidas ocon la combinación de teclas ALT + F6 .

Dreamweaver


U.D.3. Añadir, eliminar, combinar y dividir celdas

Con las tablas se pueden crear variedad de combinaciones entre filas y columnas, loque facilita ordenar y colocar los elementos con más precisión dentro del contenido dela página.

Insertar y eliminar celdas

Desde el menú Tabla podemos acceder de dos maneras distintas: desde Modificar /Tabla o posicionándonos en cualquier celda y pinchando con el botón derecho .

Dreamweaver


Desde Insertar fila , (CTRL+M) , que insertará una fila debajo de donde estéposicionado el cursor o Insertar columna (CTRL+ Mayús+A ) que irá a la derecha delcursos. También está la opción de Insertar filas o columnas donde podremosconfigurar más opciones como de que tipo es la inserción, cantidad y su posición.

Dreamweaver


Otra manera de insertar filas o columnas es desde el Inspector de propiedades ,seleccionando la tabla y modificando la cantidad de filas y columnas.

Posicionándote en la última celda de la tabla y pulsando Tab se añadirá una nueva filapor debajo de la tabla.Otra manera de insertar columnas será desde el encabezado de la propia tabla .

Se elimina una fila o columna desde el menú anteriormente explicado, con la opción deEliminar fila o Eliminar columna, que las anulará donde esté posicionado el cursor.

Otra manera de suprimir una fila o columna es seleccionar y pinchar en la tecla Supr.Para eliminar solamente una celda, Dreamweaver no ofrece ninguna herramienta. Setendrá que hacer directamente desde HTML . Seleccionaremos la celda desde elinspector de etiquetas, pondremos el modo dividir (para ver diseño y código), y quedaráseleccionado en HTML el código correspondiente a la celda, y con la tecla suprimir, la

Dreamweaver


eliminaremos. Esto no se suele hacer, pero a veces el diseño de la página exigerecurrir a ello.

La tabla queda así, sin una celda. Ese espacio queda en blanco, vacío, y las celdas sedesplazan a la izquierda.

Anidar, combinar y dividir celdas

Es posible insertar tablas dentro de las celdas de otras tablas. Esto se denomina anidartablas. A continuación ponemos un ejemplo de anidamiento. Como se puede ver, en laprimera celda de una tabla se ha insertado otra. Para anidar tablas sólo hay que

Dreamweaver


posicionar el cursor en la celda la nueva tabla insertar, como ya hemos visto. Losajustes que se hagan a esta segunda tabla de tamaño y alineación estarán en relacióncon la celda que la contiene.

Combinar celdas consiste en convertir dos o más celdas en una sola, por lo quedesaparecerá el borde de separación entre ellas, ya que serán una sola. Esto puedeservir, por ejemplo, para utilizar la primera fila para escribir el título de la tabla. En estecaso, habría que combinar todas las celdas de la primera fila en una sola.

Dividir celdas consiste en partir una celda en dos o más .

Tabla original de tres columnas y cinco filas.

Ejemplo con distintas opciones de combinación y división de celdas.

Dreamweaver


Una de las formas de dividir y combinar celdas es a través del Inspector depropiedades . Cuando seleccionas una celda, se activa esta casilla para dividir yaparece un menú para elegir el número de filas o columnas que quieres en la división.

Cuando seleccionas varias celdas se activa esta casilla, para combinarlas.

Dreamweaver


El código HTML de combinar filas es: en este caso lacelda está compuesta por dos filas. El código HTML de combinar columnas será:

en este caso la celda esta compuesta por tres columnas.

Otra manera de hacer esto es desde el menú Modificar / Tabla , al que, como yahemos visto anteriormente se puede acceder desde varios sitios. Es preferible, antesde crear una tabla, planificar cuántas columnas y filas se van a necesitar y no tener queacudir a insertar, combinar filas y columnas hasta perder de vista la estructura originalde la tabla.

U.D.4. Bordes y fondos

A una tabla se le puede asignar un borde, dar el tamaño necesario y asignar un color.Cuando una tabla no tiene borde, para delimitar las celdas Dreamweaver muestra unaslíneas discontinuas, para facilitar el diseño, que no serán visibles en el navegador. Loharemos desde el Inspector de Propiedades .

Dreamweaver


El color del borde lo podremos asignar pero definiendo una Nueva Reglas CSS , enel Inspector de Propiedades .

Dreamweaver


Seleccionaremos en tipo de Selector , la opción Etiqueta, para darle formato a la tabla,y en Nombe del selector , el de la etiqueta que vamos a modificar, que en este casoes table y en solo en este documento. Pulsaremos sobre aceptar.

Dreamweaver


En la ventana que se nos muestra, en Categoría , escogeremos Borde y aquimodificaremos los parámetros a nuestra necesidad. También podremos modificar otrascategorías, como puede ser el Fondo, Bloque, etc.

Dreamweaver


Igual que a la página, a las tablas y a las celdas se les puede asignar una imagen defondo. Como se dijo antes, según su tamaño la imagen ocupará toda la celda o semostrará como mosaico si la imagen es más pequeña. En este caso, sería la imagenque hemos seleccionado.

Teniendo como resultado:

Dreamweaver


En este ejemplo hemos dado a la tabla una imagen de fondo; y a una celda, color defondo.

Dreamweaver


Módulo VI. Marcos

Introducción

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya quepermiten mantener fijas algunas partes (como pueden ser la cabecera, el logotipo y labarra de navegación), mientras que otras partes de la página sí pueden cambiar paramostrar contenidos diferentes. Además de mejorar la funcionalidad, pueden mejorartambién la apariencia.

ÍNDICE

1. Trabajar con marcos, simples y anidados.

OBJETIVOS

En este tema crearemos marcos y conjunto de marcos, insertaremos y dividiremosmarcos, modificaremos sus propiedades y veremos el uso de vínculos.

U.D.1. Trabajar con Marcos. Parte 1.

Gracias a los marcos no es necesario insertar los mismos elementos en todas laspáginas del sitio, y tampoco es necesario descargar los mismos elementos variasveces, por lo tanto las páginas pueden ser más ágiles en cuanto a la navegación. Cadauno de los marcos de una página es una sección rectangular del navegador quecontiene un documento HTML individual.

Veamos a continuación un ejemplo de página de marcos sin contenido, en el que sólomostraremos la delimitación de los marcos. El marco izquierdo contiene el documentomenu.html; el superior, el documento cabecera.html; y el derecho, el documentocontenido.html.

Dreamweaver


Para visualizar la página de este modo hemos tenido que abrir en el navegador eldocumento marco.html, que es la página que contiene los marcos agrupados.

Es posible editar los documentos contenidos en los marcos desde la página quecontiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse unaidea de cómo quedará la página al final, cosa que no es posible si se editaindividualmente cada uno de los documentos que contiene el marco.

CREAR UN CONJUNTO DE MARCOS

Dreamweaver ya tiene un apartado de marcos predefinidos, con todas lasposibilidades, y se pueden modificar según las necesidades. Al abrir el programa o bienen Menu / Archivo / Nuevo , se da la opción en la Categoría: Página de Muestra /Conjunto de marcos.

Dreamweaver


Desde la Paleta

Insertar/ Diseño

también podemos insertar marcos. Pinchando en esta pestaña aparecerá este listadode opciones de marcos.

Dreamweaver


En el ejemplo anterior, al crear el conjunto de marcos habremos generado cuatrodocumentos: el marco padre (MainFrame), que será el que contenga el conjunto demarcos; parte superior (cabecera.html)l parte izquierda (menu.html) y parte derecha(contenido.html). Se consigue una infinidad de combinaciones ya que dentro de cadamarco se puede crear otro conjunto de marcos. Esto se llama anidar marcos.

INSERTAR Y DIVIDIR MARCOS

Otra manera de insertar marcos sobre un documento ya creado con o sin ellos: desdeInsertar / HTML / Marcos y también podremos modificarlos con la opción Modificar /Conjunto de Marcos / Dividir marco.

Dreamweaver


Dreamweaver


No hay que abusar de los marcos; como máximo deben utilizarse tres o cuatro en ladisposición de una ventana.

PANEL DE MARCOS

Como ya hemos dicho anteriormente, con los marcos se puede trabajar como páginasindividuales. También se puede hacer desde la página que los contiene, peroseleccionarlos requiere un poco de cuidado. Dreamweaver proporciona un panel demarcos para ver en todo momento en qué parte de la página estamos. Se abrepulsando Mayús+F2 o acudiendo al menu Ventana / Marcos .

Dreamweaver


U.D.1. Trabajar con Marcos. Parte 2.

EL INSPECTOR DE PROPIEDADES DE MARCOS

Dreamweaver


Para modificar el tamaño de los marcos, se pueden arrastrar sus bordes igual lasceldas de una tabla, o utilizar el Inspector de Propiedades.

Propiedades

Nombre del marco : han de constar de una sola palabra cada uno. Por defectoaparecen los que hay en la imagen superior.

Origen : especifica el documento de origen que se muestra en el marco. Esposible cambiar el contenido HTML del marco seleccionando una página diferente a laguardada en un principio, al crear la página de marcos.

Dreamweaver


Desplaz : indica si aparecerán o no las barras de desplazamiento cuando el documentodel marco no pueda verse completamente.

Mismo tamaño: impide a los usuarios de la página arrastrar los bordes del marco paracambiar de tamaño.

Bordes: muestra u oculta los bordes del marco actual al visualizarlo en un navegador.

Color del borde: con esta propiedad estableceremos un color para todos ellos.

Ancho de margen: establece el ancho de los márgenes izquierdo y derecho en píxeles(el espacio que hay entre el borde del marco y su contenido).

Alto de margen: establece el alto de los márgenes.

INSPECTOR DE PROPIEDADES DE CONJUNTO DEMARCOS

Permite personalizar la forma de mostrar el marco seleccionado.

Selección Fila Col: para seleccionar la fila o la columna.

Bordes: desde aquí se selecciona si los bordes son o no visibles.

Ancho: especifica el ancho de los bordes en el conjunto de marcos.

Color de borde: determina el color de los marcos.

Valor: unidades de medida para las filas y columnas seleccionadas.

• Píxeles: establece el tamaño de la columna o fila seleccionada en un valorabsoluto . Esta opción es la apropiada para dar un valor fijo, por ejemplo elde una barra de navegación en el marco de la parte izquierda de la página.

• Porcentaje: la columna o fila debe ser un porcentaje del ancho y alto totaldel conjunto de marcos. A estos se les asigna el valor después de marcar elvalor fijo en píxeles a los demás marcos.

Dreamweaver


• Relativo: una vez asignado el espacio a los marcos en píxeles y enporcentaje, debe asignarse a la columna o fila seleccionada el espaciorestante, que se divide proporcionalmente entre los marcos que tenganasignado como valor relativo.

Prevalece la propiedad establecida para un marco frente a la establecida para elconjunto de marcos.

GUARDAR MARCOS

Todos los documentos que contienen marcos deben tener una página en cada uno deellos. Por esta razón y que al crear algún marco se cargan páginas nuevas por defectoen cada uno de ellos, a excepción del marco que contiene la página original. Estaspáginas nuevas pueden ser posteriormente sustituidas por otras ya existentes.

Es necesario guardar la página que contiene el grupo de marcos, así como cada unade las páginas que están incluidas en sus marcos. Por ejemplo, si creamos una máginacon dos marcos (uno superior y otro inferior) tendremos que guardar:

1. El marco superior (podemos guardarlo pinchando en él con el cursor yacudiendo a "Guardar marco" ).

2. El marco inferior (lo mismo).3. El conjunto de marcos (podemos guardarlo pinchando en él con el cursor y

acudiendo a "guardar conjunto de marcos").

También tenemos la opción "Guardar todo ", que nos guarda automáticamente cadamarco y el conjunto de marcos. Pero no es conveniente guardar la primera vez losmarcos con la opción Guardar todo, ya que podemos equivocarnos al dar los nombresa los nuevos documentos. Nada más crearlos, es preferible guardar cada documentouno por uno (a no ser que todos los marcos contengan alguna página ya existente, yaque en ese caso el único documento al que habrá que dar nombre será al que contieneel grupo de marcos). Una vez que ya hayamos guardado todos los marcos porseparado, así como el conjunto de marcos, sí que podemos usar la opción "Guardartodo".

Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlopreviamente.

USO DE VÍNCULOS

Al trabajar con hipervínculos en los marcos y conjunto de marcos se obtiene un mayorcontrol sobre el lugar donde se van a mostrar los documentos del destino del enlace.

Desde cualquier marco podemos crear un vínculo a una página y mostrarla en

Dreamweaver


cualquier otro marco o en el mismo, por medio del campo destino.

_blank: Abre el documento vinculado en una ventana nueva del navegador.

_parent: Abre el documento vinculado en la ventana del marco que contiene el vínculoo en el conjunto de marcos padre. Como ya sabes, el marco padre es el marco en elque se encuentra el documento inicial, sobre el que se ha insertado el resto de marcos.

_self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco oventana que el vínculo.

_top: Abre el documento vinculado en la ventana completa del navegador, lo cualquiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella.

Además de estos destinos para los enlaces, también aparecerán los nombres de losdistintos marcos de la página. Podemos añadir todos estos destinos a cualquierelemento de la página que contenga algún enlace, ya sea texto, una imagen, un mapade imagen, un elemento Flash, etc.

Dreamweaver


Ejemplo: fijándonos en la imagen superior, veremos que en esta página hay tresmarcos. Supongamos que queremos hacer un vínculo desde el marco Menú oleftFrame, y que el contenido de dicho vínculo se abra en el marco Contenido omainFrame. En ese caso crearemos el vínculo, y en la sección Destino, en vez deponer "_self", "_blank",... pondremos mainFrame; es decir, el nombre del marco dedestino.

Dreamweaver


Módulo VII. Multimedia

Introducción

La inserción de elementos multimedia constituye uno de los aspectos másespectaculares del diseño web, que no sólo enriquece el documento visualmente si noque también interactúa con HTML, por ejemplo los botones con Flash.

ÍNDICE

1. Inserción de audio.2. Inserción de vídeo.3. Inserción de Flash.

OBJETIVOS

En este módulo veremos cómo insertar formatos de audio y vídeo, y elementosmultimedia como Flash y películas FLV, formato de video de FLASH.

U.D.1. Inserción de audio

No es muy habitual incluir sonido en una página web, ya que algunos usuarios suelenestar escuchando su propia música cuando navegan en Internet, por lo que escucharsonido en cada página que se visita puede resultar algo molesto. A pesar de ellopodremos insertar audio en nuestra página web con el fin de hacer más atractiva, peroteniendo en cuenta que esto puede provocar la página web sea muy lenta cargando.Muchas de las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo odesactivarlo para los usuarios que no deseen escuchar el sonido y está muy extendido,también, insertar audio pero dentro de películas Flash en vez de la página webdirectamente. (El Flash nos permite un control practicamente total, en la reprodución ycontrol del audio).

Para visualizar o escuchar estos contenidos multimedia más sofisticados, los usuariosnecesitarán un plugin correspondiente a cada elemento y en caso de no tenerlogeneralmente el propio navegador suele advertirnos.

Los plugins son programas que aportan a un documento HTML la capacidad devisualizar contenidos creados con un código diferente. Algunos plugins se instalan conel propio navegador o con el propio sistema operativo, y otros tendrán que instalarseindependientemente. Es importante facilitar al usuario el lugar donde descargarse estos

Dreamweaver


plugins, por ejemplo desde las páginas de los creadores de estos plugins.

Los formatos de sonido más habituales son, fundamentalmente:

• Sonido Onda : se digitaliza el sonido descomponiéndolo en pequeñasondas sonoras. El formato más conocido es el WAV , de buena calidad, perosu formato no es adecuado para la web ya que pesa mucho.

• Sonido Midi : se almacenan las instrucciones para generar el sonido. Sonarchivos pequeños, con baja calidad y se utilizan como fondo de página.

• Sonido Cd : se usa en los discos compactos, y se almacena en pistas.

Lo importante es obtener una buena calidad de sonido reduciendo al máximo el tamañodel fichero para evitar largas esperas de descarga al usuario. Para ello se handesarrollado diferentes formatos como el MP3 y el formato WMA (Windows MediaAudio).

No existe un formato estándar para la web. El reproductor de cada archivo de sonidopuede ser diferente según el navegador y el sistema operativo del usuario.

INSERTAR SONIDO EN UNA PÁGINA

Existen diferentes formas de agregar sonido a una página. Hay que tener en cuenta sise quiere solamente reproducir el audio o que el usuario de la página se puedadescargar el archivo. Una manera de agregar sonido es utilizar un hipervínculo alfichero de sonido. Desde el Inspector de Propiedades vincularemos cualquierelemento de la página a este archivo.

Dreamweaver


Cuando el usuario pulse en el hipervínculo, el reproductor correspondiente se activará yse escuchará el sonido. Desde el navegador definiremos qué reproductor ejecutarácada fichero de audio.

Otra manera de insertar sonido es incrustarlo . Para insertar un archivo de audio en undocumento, tienes que dirigirte al menú Insertar/ Medía opción Plug-in .

Dreamweaver


Aquí se muestran los controles de audio, pero es meramente orientativo ya quedepende del reproductor que se tenga instalado en el ordenador, tendremos uno u otro.Puedes reproducirlo pulsando sobre los controles.

En Dreamweaver no se mostrarán los controles de audio. Todos los archivos que soninsertados como plug-in aparecen representados dentro de Dreamweaver por unaimagen como está.

En el Inspector de propiedades puede establecerse mediante Al y An , la altura y laanchura con la que se mostrarán los controles de audio. En el caso de no especificarningún tamaño, se mostrará el tamaño por defecto de los controles. Si lo que se deseaes que se escuche el sonido en la página, pero que no se muestren los controles deaudio, los campos Al y An deben valer cero.

Los sonidos se reproducen automáticamente al cargarse la página, y se reproducensolamente una vez. Estos valores no pueden cambiarse a través del Inspector depropiedades , pero sí a través del código.

Por ejemplo, el archivo anterior aparecía en el código como:

Dreamweaver


Pero para que no se reproduzca automáticamente, en Vista Código deberemosteclear:

autostart="false"y para que se reproduzca continuamente se ha añadido:

loop="true"La línea de código del archivo de audio quedará de la siguiente forma:

Para conseguir que el audio pueda activarse y desactivarse cuando no se muestran loscontroles, es necesario insertar una serie de comportamientos que se encarguen deesa tarea. Si quieres poner música de fondo en una página web sin que aparezcan loscontroles de audio, escribe este código directamente en la vista Código .

Insértalo después de la etiqueta. Con el parámetro loop puedes decidir cuántas vecesquieres que se reproduzca, una, dos, tres... (con -1 se reproduce de modo continuo).

Es importante tener en cuenta que dependiendo del Navegador web que tengamos,incluso de su versión, puede ser que alguno de estas últimas características nofuncionen correctamente.

U.D.2. Inserción de video

El vídeo es uno de los componentes de las páginas web que más pesan, por lo tantohay que lograr la mayor calidad posible reduciendo al máximo su tamaño.

En la actualidad hay avances en los formatos de video, como la codificación con DivX,o Xvid, que comprimen la información sin pérdida notable de calidad. Los formatos devídeo que suelen utilizarse en Internet son:

• AVI: (Audio Video Interleave): predefinidos en Windows.• MPEG: hasta ahora el formato más utilizado para conseguir archivos más

reducidos.

Dreamweaver


• MOV: necesitan de Quick Time para reproducirse.• Real video : se trasmiten en tiempo real, ya que la descarga y la

reproducción son simultáneas. El programa que los controla es el RealPlayer.

Para insertar un archivo de vídeo en un documento actuaremos como si se tratara deun audio, la misma opción: Insertar / Media / Pulg-in . Aquí se muestra un ejemplo deun archivo de video, con los controles de reproducción.

Dreamweaver


El Inspector de propiedades para los archivos de vídeo insertados de esta forma es elmismo que el de los archivos de audio, ya que ambos se insertan como Plug-in.

Dreamweaver


Los vídeos también se reproducen automáticamente al cargarse la página, y sereproducen solamente una vez. Estos valores pueden cambiarse a través del código,del mismo modo que en el caso de los archivos de audio, añadiendo

y .

Todos los objetos insertados a través de la opción Plug-in precisan que el usuariotenga instalado un reproductor o un plug-in apropiado para reproducirlos. En el campoOrigen del Inspector de propiedades se establece el archivo vinculado (el archivo deaudio o de vídeo) que ha de reproducirse.

En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puedeestablecerse en el campo un enlace con una página en la que pueda encontrarlo.

Es importante tener en cuenta que dependiendo del Navegador web que tengamos,incluso de su versión, puede ser que alguno de estas últimas características nofuncionen correctamente.

U.D.3. Inserción de Flash y Shockwave

En las páginas web, actualmente, solemos ver bastantes animaciones, que algunasnos permiten interactuar con ellas, y videos. La animaciones son ficheros SWF , que segeneran usando generalmente el programa Adobe Flash o Shockwave , creados porDirector. Mientras que los videos FLV , son fichero de video, como vimos en el móduloanterior, pero que se comportan de forma diferente y su forma de trabajar con ellostambién es diferente.

Dreamweaver es un programa que interactúa muy bien con Flash, al ser programas dela misma casa. Estos ficheros solamente se pueden ver correctamente si el usuario quevisualiza nuestra página web, dispone del plugin de estos programas. Para insertareste tipo de ficheros, deberemos ir a la paletaComún / Media y selecionar SWF , paraanimaciones y FLV , para video en ese formato.

Dreamweaver


Los ficheros de Flash son más rápidos en su descarga. Las películas Flash sonanimaciones que, al igual que los botones y el texto Flash, tienen la extensión SWF. Esfrecuente verlas en las páginas iniciales de los sitios web, a modo de presentaciónhacia los usuarios, aunque se pueden utilizar para realizar cualquier tipo de animación.

Pulsaremos sobre la opción SWF, seleccionaremos el fichero de la animaciónaceptamos, y Dreamweaver nos insertará, en vista diseño, un marcador de posición dearchivo SWF en la ventana de documento. El marcador de posición es un contorno azulcon ficha informativa. La ficha indica el tipo de activo (archivo SWF) y el ID del archivoSWF.

Dreamweaver


Si guardamos la página web, Dreamweaver nos indicará que se están guardando dosarchivos necesarios para la correcta visualización, expressInstall.swf yswfobject_modified.js , en una carpeta llamada Scripts del sitio. Los navegadores nomostrarán correctamente la animación a no ser que se hayan cargado estos archivos.

Si seleccionamos el objeto SWF, veremos lo siguiente en el Inspector de propiedades.

• ID. Especifica un identificador o nombre exclusivo para el archivo SWF.• An (Ancho) y Al (Alto). Especifica el ancho y el alto de la película en píxeles.• Archivo. Es la ruta del archivo SWF.• Fnd. Pondremos aquí un color de fondo para la zona de la película. Este

color aparecerá cuando la película no se esté reproduciendo.• Editar. Inicia el programa Flash ordenador para actualizar o modificar el

archivo por el que creamos el SWF. Esta opción estará desactivada si notenemos instalado Flash en el equipo.

• Clase. Le permite aplicar una clase CSS a la película.• Bucle. Hace que la película se reproduzca continuamente.• Rep. autom. (Reproducción automática). Reproduce automáticamente la

película al cargar la página.• Espacio V y Espacio H. Especifica el número de píxeles de espacio en

blanco que habrá por encima, por debajo y a ambos lados de la película.• Calidad. Controla la calidad de las películas.• Escala. Determina cómo se ajusta la película a las dimensiones establecidas

por los cuadros de texto de ancho y alto. La configuración predeterminadahace que la película se reproduzca entera.

• Alinear. Determina cómo se alineará la película en la página.

Dreamweaver


• Reproducir. Reproduce la película en la ventana de documento.• Parámetros. Abre un cuadro de diálogo para introducir parámetros

adicionales que serán enviados a la película, pero esta deberá estardiseñada para recibirlos.

INSERTAR UN VIDEO FLV.

Si lo que insertamos es por el contrario un video en formato FLV , se nos mostrará lasiguiente pantalla.

En la opción Tipo de video deberemos escoger uno entre:

• Descarga progresiva de vídeo. Descarga el archivo FLV en el disco durodel usuario que ve nuestra página web y lo reproduce. La descargaprogresiva permite que se empiece a reproducir el vídeo antes de que haya

Dreamweaver


finalizado la descarga.• Flujo de vídeo. Transfiere el contenido de vídeo y lo reproduce en una

página Web transcurrido un breve periodo de búfer que garantice unareproducción fluida. Para ello deberemos contar con un software de Adobeque lo permita.

Tanto los archivos SWF o los FLV, Dreamweaver insertará código que detecta si elusuario dispone de la versión correcta de Flash Player para verlos. Si esto no es así lapágina muestra un texto que solicita al usuario que descargue la versión más reciente.En principio escogeremos la opción de Descarga progresiva de video .Porteriormente en URL , examinaremos la ruta para localizar el fichero que queremosreproducir. El aspecto , que es el la forma física y los controles que tendrá nuestroreproductor y otra serie de configuraciones básica, iguales que en el sonido. Una vezconfigurado esto, ya tendremos nuestro video en la página web funcionando.

Dreamweaver


Módulo VIII. Formularios

Introducción

Un formulario permite al gestor de la página plantear preguntas estructuradas alvisitante para obtener la información deseada.

Los formularios sirven para recoger datos de los usuarios. Un formulario tiene multitudde utilidades, entre ellas: realizar un pedido en una tienda virtual, crear una encuesta,conocer las opiniones de los usuarios, recibir preguntas, dar acceso a determinadaszonas utilizando contraseñas, etc.

ÍNDICE

1. Parámetros y controles de los formularios

OBJETIVOS

Veremos qué es un formulario, qué utilidades tiene, aprenderemos a crearlos y cómoinsertarlos; qué elementos contiene (campos, botones), y cómo pueden validarse losdatos que introducimos, pero sin abarcar la parte del tratamiento de los datos, por quepara ello se necesitan nociones de programación, ya sea en los lenguajes JavaScript,PHP, etc. que no es materia de este curso.

U.D.1. Parámetros y controles de los Formularios

Un formulario es un área específica de introudcción de datos. Una vez que el usuariorellena los datos y pulsa el botón para enviar el formulario, se arrancará un programaque recibirá esos datos y hará el tratamiento correspondiente.

Para crear un formulario, lo primero es insertarlo desde el menú Insertar /Formulario. Un formulario puede estar formado por distintos elementos quedescribiremos a continuación.

Dreamweaver


O desde la paleta Insertar / Formulario / Formulario . En el código HTML se

representa con la etiqueta . En la ventana del documento se muestra como unrectángulo de líneas rojas discontinuas.

Dreamweaver


Una vez creado, configuraremos sus propiedades nombre en el Inspector depropiedades.

• Id de Formulario , identificador para poder identificarlo.• En el campo de Acción se escribe la dirección URL a la cual se envía el

formulario. Deberemos poner en nuestro casola siguiente acción:mailto:[email protected]. Con esto lo que se consigue es que se envíeal correo electrónico los datos recogidos por el formulario.

• En Método se elegirá el método para enviar el formulario.Seleccionamos Post , que envía los datos directamente al script que se hayaespecificado en el campo Acción. En este caso el correo electrónico.

Se puede crear un formulario y comenzar a insertar objetos sin tener que definirpreviamente los campos de Acción y Método , pero no podrá funcionar hasta que sedefinan. En un formulario es posible incluir todas las entidades HTML: textos, imágenesy tablas con excepción de los propios formularios. Se puede insertar más de unformulario en una página con tal de que no se solapen.

OBJETOS DE LOS FORMULARIOS

Vamos a ver algunos de los distintos elementos que pueden formar parte de unformulario, llamados también objetos , así como algunas de sus propiedades.

Dreamweaver


Campo de texto: Añade un cuadro de texto. Se utiliza para recoger información queno se conoce de antemano, por ejemplo un nombre, una dirección, etc. Son de cuatrotipos:

• De una línea.• Área de texto. Permite escribir varias líneas.• Contraseña. Es similar al campo de texto, pero las letras que va

tecleando el usuario están ocultas y se sustituyen por el carácter *.Es un campo de texto de una línea.

• Campo oculto . Es un campo línea especial que el usuario no ve yque se utiliza para adjuntar información anexa, por ejemplo el sitio

Dreamweaver


desde nos envía la página.

A través del Inspector de propiedades es posible asignar también el ancho del cuadrode texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro. Sepuede también pasar de Campo de texto a Área de texto o Contraseña a través delInspector de propiedades .

El texto que se escribe en la casilla de Val inicial (valor inicial) aparece al visualizar lapágina. Puede ser un texto descriptivo de lo que hay que introducir en este campo.

Casilla de verificación: Las casillas de verificación suelen aparecer en grupo ypermiten seleccionar varias opciones.

En el panel de Insertar le corresponde este icono.

Dreamweaver


En el Inspector de Propiedades le asignaremos el estado, si está activado odesactivado. También es posible crear un Grupo de Casillas de Verifiación , que nosmostrará un menú emergente en el que configuraremos las distintas estiquetas yopciones.

Botón de opción: Generalmente aparecen en grupo y solamente se puede elegir unaopción, aunque si lo insertamos de uno en uno, si que nos permitirá selecionar varios.Para que solo nos permita seleccionar uno deberemos acudir a la opción de Grupo deopción , cuyo icono se corresponde con este . El menú que aparece es el que se

muestra a continuación. Desde aquí podemos añadir opcionestones, nombrarlos yelegir su disposición, salto de línea o tablas.

Lista/Menú : A la que le pertenece este icono . Se muestra una relación de

elementos que puede seleccionar el usuario, y son mucho más eficientes que loselementos anteriormente descritos. Permite elegir entre varias opciones sin ocuparmucho espacio en la página web, ya que aparecen como un desplegable.

Dreamweaver


Los elementos se añaden a través del botón Valores de lista del Inspector depropiedades . Cuando se trata de un Menú , solo es posible elegir uno de loselementos, pero si se trata de una Lista, a través de Selecciones del inspector depropiedades nos permite seleccionar varios simultáneamente.

Campos de archivo : Permiten al usuario examinar archivos de sus discos duros ycargarlos como datos de formulario . Se recomienda no incluir estos archivos debido

a los posibles riesgos de virus.

Botón Enviar, Restablecer y otros : Es el botón tradicional de Windows. El botónpuede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrartodos los campos del formulario), o Ninguna (para asignarle un comportamientodiferente de los dos anteriores).También es posible cambiar el texto del botón a travésdel campo Etiqueta del Inspector de propiedades .

Las imágenes Se pueden insertar para mejorar el aspecto de los formularios,

utilizándolas para sustituir los botones.

Dreamweaver


ENVIAR FORMULARIO

Los datos recopilados en los formularios no sirven de nada si no se pueden procesar.Para ello existen numerosas posibilidades, pero el procesamiento de los scripts va másallá de los objetivos de este curso. Casi todos los servidores proporcionan aplicacionespara procesar formularios. Sólo hay que ponerse en contacto con el web master oadministrador de sistemas para conocer la ubicación del script y cómo enviar losformularios. Todo lo que debe hacer es conseguir la siguiente información paraincorporarla al formulario:

• El método .• URL de la aplicación o el script .• Los parámetros que deben enviarse como datos de formulario: por ejemplo,

la dirección de correo electrónico a la que se debe enviar el formulario. Estosdatos se insertan habitualmente en campos ocultos al principio delformulario.

Dreamweaver


Módulo IX. DHTML. Hojas de estilo.

Introducción

Las hojas de estilo permiten definir un conjunto de reglas para configurar cómo elnavegador va a mostrar las páginas de su sitio. Controlan la forma de presentar elcontenido HTML, la disposición de los objetos, el color de los vínculos, etc.

ÍNDICE

1. Creación de CSS (Hojas de estilo en cascada).

OBJETIVO

En este módulo vamos a ver cómo crear hojas de estilo, redefinir etiquetas HTML, crearhojas de estilo externas, adjuntar hojas de estilo, aplicarlas y editarlas.

U.D.1. Creación de CSS (Hojas de estilo en cascada)

Las hojas de estilo permiten definir un conjunto de reglas para configurar cómo va amostrar el navegador las páginas de su sitio. Controlan la forma de presentar elcontenido HTML, la disposición, el color, etc. Estos nuevos estilos, llamados estilosCSS , se utilizan principalmente para combinar una serie de atributos de modo que nosea necesario asignar estos atributos cada vez que se desee repetir la asignación deesos mismos valores a otras partes del HTML.

Los estilos CSS cuentan con una capacidad simple de actualización: cuando seactualiza un estilo CSS, todos los documentos que usan ese estilo se actualizanautomáticamente. El inconveniente de trabajar con hojas de estilos es que paraalgunos navegadores unas cosas funcionan y para otros funcionan pero de otramanera, aunque estos navegadores suelen ser versiones antiguas o no actualizadas.

Con Dreamweaver las características que se aplican a un texto crean automáticamenteestilos CSS, que se incrustan en el encabezado del documento actual. Al crear unestilo CSS, el Inspector de propiedades lo muestra directamente pudiéndolomodificarlo en cualquier momento.

TIPOS DE CSS

Dreamweaver


Hay dos tipos diferentes de Hojas de estilos en cascada.

• Las CSS internas consisten en un conjunto de estilos incrustados en elcódigo de un documento web, y sólo se aplican a la página o el documentodonde se han creado.

• Las CSS externas están ubicadas en un archivo externo que puedevincularse a cualquier documento.

El tipo se determinan justo cuando creamos el estilo, le indicamos en donde queremoscrear el estilo.

En un documento en blanco en el que tendremos algo de texto escrito, loseleccionamos y en el Inspector de propiedades , iremos a la opción Fuente.Seleccionaremos la fuente que deseamos y se nos abrirá la siguiente venta.

Primero tendremos que escoger que tipo de selector es, en principio dejaremos el que

Dreamweaver


el programa nos propone. Deberemos introducir un nombre para la clase que estamoscreando, que deberá ser único para que no haya confusión, y el área de influencia , esen este punto donde seleccionamos Sólo este documento , sería una CSS Interna yNuevo archivo de hoja de estilos y sería una CSS externa .

En el siguiente ejemplo, que ya vimos anteriormente, hemos creado una clase llamadatexto_contenido, modificando el tipo de texto. Aquí vemos una vez aceptada la pantallaanterior como quedaría en la página web.

Dreamweaver


Así podremos crear estilos diferentes para áreas distintas de texto, por ejemplo unopara los títulos otros para los párrafos, etc. Para aplicar estilos en el documento,seleccionaremos el texto al que se desea aplicar el estilo CSS, o se posiciona el ratónen un párrafo para aplicarlo a todo el párrafo, y en el Inspector de propiedades seselecciona el estilo deseado de la lista, que aparece al desplegar la Regla de Destino.Otra manera de crearlos será desde el grupo de paneles Ventana / Estilos CSS oMayús + F11.

Dreamweaver


Pinchando en el icono de nuevo estilo CSS , como se ve en la imagen superior,

nos aparecerá de nuevo el cuadro anterior para crear un nuevo estilo, con el tipo deselector, nombre y lugar donde lo creamos. Se nos mostrará la siguiente pantalla paradarle las características y propiedades que nos interese, que como vemos nos ofrecemás posibilidades que el Inspector de propiedades.

Dreamweaver


Aceptamos y veremos que en el Panel de CSS, aparecerá el nuevo estilo creado.

Dreamweaver


Si queremos añadir alguna propiedad más simplemente pulsaríamos sobre añadirpropiedad, la seleccionaríamos de la lista y ponemos el valor que deseamos. Si por locontrario lo que queremos es modificar alguna, pulsamos sobre la misma y lacambiamos a nuestro interés.

CSS externas.

Como ya hemos dicho anteriormente, las hojas de estilo externas son documentosaparte que contienen diferentes estilos. Los estilos se crean de la misma forma, pero laopción seleccionada enDefinición de reglas será Nuevo archivo de hoja de estilos .

Dreamweaver


En esta opción tendremos que guardar el estilo nuevo o podemos seleccionar una hojade estilos ya creada.

Dreamweaver


Pondremos un nombre y pulsaremos sobre Guardar, y veremos que aparecerá en elPanel de Estilos CSS .

Dreamweaver


Hemos generado una hoja de estilos externa que se podrá vincular a cualquierdocumento, y no sólo éste. Si abrimos el fichero recién creado, veremos que es laetiqueta que hemos creado con los atributos que modificamos.

Para aplicar por primera vez un estilo de un CSS externo a una página, tendremos queir a Panel de Estilos CSS pulsar sobre la opción Adjuntar hoja de estilos.

Aparecerá la siguiente ventana, localizaremos el fichero.

Dreamweaver


Vincularemos el CSS, que habíamos creado anteriormente, a la página. Al hacerlo, elestilo aparece en las propiedades.

Hemos generado estilos para el texto, pero también se pueden generar estilos paraotros elementos de la página como pueden ser tablas, vínculos, etc.

Dreamweaver


Módulo X. Capas.

Introducción

Una capa es un contenedor de elementos de la página web que puede tener cualquiertamaño y colocarse en cualquier lugar de la página. Es invisible para el navegador,solamente se ve su contenido.

ÍNDICE

1. Trabajar con capas

OBJETIVOS

En este tema vamos a trabajar con capas: crearemos, editaremos y modificaremos suspropiedades.

U.D.1. Capas

La finalidad de las capas, también conocidas con el nombre de layers, es de mostrarinformación, imágenes, animaciones Flash, etc, de forma más atractiva y visual. Lascapas son absolutamente invisible para el navegador, sólo se muestra su contenido, ypuede superponerse a otros elementos de la página (algo imposible con las tablas). Notodos los navegadores admiten bien las capas y su forma de interactuar, por lo que esnecesario, una vez concluido el diseño de la página, probarla en diferentesnavegadores con el fin de validar el correcto funcionamiento.

Para insertar este elemento de diseño en Dreamweaver, en modo Vista Diseño,acudiremos a la opción de la Paleta Insertar / Dibujar Div PA .

El cursor se nos convertirá en una cruz y dibujaremos la capa según nuestranecesidades. Aparecerá representado por la siguiente forma:

Dreamweaver


Las capas pueden moverse de una posición a otra de la ventana pulsando sobre elrecuadro blanco de su parte superior izquierda, y sin soltar el ratón, arrastrándola haciala nueva posición. También pueden ser redimensionadas pulsando sobre los recuadrosazules, y arrastrándolos hasta conseguir el tamaño deseado. Dentro del recuadro de lacapa es posible insertar texto, tablas, imágenes, animaciones flash, y todos loselementos que puede contener un documento HTML. Se pueden también crear desdeInsertar / Objeto de diseño / Div PA .

PROPIEDADES DE CAPA

Dreamweaver


Como todos los elementos que hemos ido viendo hasta ahora, a las capas también seles da un nombre, unas dimensiones, y también se les puede aplicar una imagen o uncolor al fondo.

• Elemento CSS-P es el nombre de la capa. También puede ser cambiado através de la paleta Elementos PA haciendo doble clic sobre él.

• Iz y Sup (izquierda y superior) indican la posición del extremo superiorizquierdo de la capa con respecto al extremo superior izquierdo de la páginao de la capa padre si la capa está anidada a ella. La distancia se mide enpíxeles.

• An y Al indican la anchura y la altura de la capa, en píxeles.• Índice Z es el número de orden de colocación de las capas. Este valor

también puede cambiarse a través del panel Capas. Una capa será solapadapor aquéllas cuyo índice Z sea mayor que el suyo.

• Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatrotipos:

• Default (predeterminada). Visibilidad según el navegador.• Inherit (heredada). Se muestra la capa mientras la página a la que

pertenece también se esté mostrando.• Visible muestra el contenido de la capa independientemente del

valor de la capa padre.• Hidden no muestra el contenido de la capa independientemente del

valor de la capa padre.

La visibilidad también puede cambiarse a través de paleta Elementos PA pulsandosobre la imagen del ojo. El ojo abierto indica Visible , y el ojo cerrado indicaHidden(invisible) .

• Im. fondo y Col puede indicarse una imagen o un color de fondo para lacapa.

• Desb. (desbordamiento) controla cómo aparecen las capas en un

Dreamweaver


navegador cuando el contenido excede el tamaño especificado de la capa.

• Visible indica que el contenido adicional aparece en la capa. Lacapa se amplía para darle cabida.

• Oculto especifica que el contenido adicional no se mostrará en elnavegador.

• Desplaz especifica que el navegador deberá añadir barras dedesplazamiento a la capa tanto si se necesitan como no.

• Automático hace que el navegador muestre barras dedesplazamiento para la capa cuando sean necesarias (es decir,cuando el contenido de la capa supere sus límites).

• Rec (Recorte) define el área visible de una capa. Solamente será visible elrectángulo especificado en esas dimensiones.

CAPAS ANIDADAS

Consiste en insertar capas dentro de otras que ya existen. La ventaja es que se puedecrear una estructura compleja de capas, con varios niveles de profundidad, que permitemover toda la estructura sin que se modifique la posición de unas respecto a las otras.Para anidar capas, seleccionaremos desde la paleta Elementos PA la deseada ymanteniendo pulsada la tecla CTRL , pincharemos en la capa arrastrándola hasta lacapa deseada. Como se muestra en esta figura:

Desde la paleta Elementos PA , podremos mostrarla o ocultarla con F2, podemos vertodas las capas existentes, lo cual permite controlar su apariencia y su comportamientoy hacerlas visibles o invisibles desde el icono del ojo. Esto puede ser útil a la hora detrabajar con ellas, ocultando la que en algún momento resulte molesta. Como hemosvisto en esta paleta de propiedades número Z, índica el nivel de la capa, el orden desolapamiento, por encima estarán las capas con mayor índice.

Dreamweaver


Módulo XI. Publicación del sitio web.

Introducción

Una vez diseñada la estructura de páginas y desarrollado el sitio local, la intenciónúltima es que todo se pueda ver en internet. Dreamweaver dispone de muchasherramientas para ayudarnos a que el sitio se mantenga correctamente. Tenemos quepublicar el sitio local poniéndolo en un sitio al que todo el mundo pueda acceder desdeinternet.

Antes de nada, hay que comprobar en el sitio local que todo funciona, que se ven todaslas imágenes y que los enlaces funcionan correctamente. Una vez hecho esto, el sitiolocal se transfiere y se publica en un Sitio Remoto . Para esto necesitaremos obtenerloa través de un Servidor Web . Dreamweaver se encarga del acceso al servidor y de latransferencia de datos.

Una vez publicado el sitio, hay que mantenerlo y actualizarlo periódicamente siqueremos que sea interesante de cara a los usuarios. Si pretendemos que este sitiotenga la mayor cantidad posible de visitas, será interesante darlo de alta en losbuscadores para que se posicione en un buen lugar en las búsquedas de los usuariosde temas relacionados con nuestro sitio.

ÍNDICE

1. Obtención de un sitio de publicación.2. Utilización de programas FTP.3. Publicación y mantenimiento del sitio web.4. Dar de alta en los buscadores.

OBJETIVOS

En este capítulo veremos cómo definir un sitio remoto, un sitio de publicación , cómotrabajar con él, cómo cargar y descargar archivos, mantenimiento de éstos y dar de altaen los buscadores.

U.D.1. Obtención de un sitio de publicación

Antes de gestionar un sitio remoto, debemos que tener claro qué tipo deservidor utilizar. Podemos usar servidores gratuitos que se encuentran por la red oservidores por los que hay que pagar una cuota dependiendo de las prestaciones que

Dreamweaver


ofrecen.

La diferencia entre unos y otros es clara. El servidor gratuito tiene sus inconvenientes:puede ser más lento en su transferencia de datos, en el nombre de nuestro sitioaparecerá el de su dominio, y puede que si ese servidor desaparece (suelen ser másinestables), nuestro sitio desapareca con él, también hay que indicar que este tipo deservidores ofrecen gratuitamente estas páginas pero insertando anuncios en ellas. Unejemplo de sitio donde poder colgar el tuyo gratuitamente es http://www.miarroba.com/ .Normalmente todas estas páginas funcionan igual, tendrás que darte de alta en supágina y una vez registrado podrás acceder al servicio que te permite crear tu propiaweb, y luego seguir sus instrucciones.

Si decides contratar un servidor web, existen multitud de compañías que se dedican aeste servicio. Independientemente del precio, debes que tener en cuenta:

• No pagar más espacio del que realmente se necesita. Se refiere a lacantidad de bytes que proporcionan para colgar la página. Hay que calcularcuánto pesan las imagenes, animaciones, etc. y si más adelante se incluirámás contenido que aumente el peso del sitio.

• Verificar la rapidez de la conexión a internet de otros sitios alojados en esteservidor.

• Saber si registran el nombre del dominio y cuánto cobran por ello. Losdominios tienen un precio según la extensión u otra. No es lo mismo un .comque un .es. Estos se contratan si no se desea que aparezca el nombre delservidor que se ha contratado y que el nombre de la página cambie si elnombre del servidor contratado lo hace.

• Y si puede saberse cuántas visitas recibe el sitio.

Una vez decidido el tipo de servidor, proporcionarán tres datos, nombre de usuario ,contraseña y nombre de servidor ftp .

U.D.2. Utilización de programas de FTP

Como hemos explicado en la anterior unidad, los archivos deben ser transferidos a unservidor web, es decir los archivos del sitio local (propio ordenador) al sitio remoto.Para esta transferencia el programa tiene diferentes opciones, y la más usada es elFTP (File Transfer Protocol ) , protocolo para transferencia de archivo. Usar FTP es laopción más adecuada cuando se transfieren los datos a una empresa de servidoresweb. No es obligatorio utilizar Dreamweaver para enviar datos del sitio al servidorremoto porque existen otras vías para hacerlo, otros programas de FTP.

Dreamweaver realiza la transferencia desde la ventana Definición de Sitio . El FTP sebasa en una estructura cliente/servidor, en la que el ordenador local es el cliente. Eladministrador del servidor web contratado proporciona una cuenta de usuario y una

Dreamweaver


http://www.miarroba.com/

contraseña, y éstas tendrán que ser validadas cada vez que actualicemos nuestro sitio.

A la ventana de Definición de sitio podemos acceder desde varios sitios: Menú Sitio/Administrar sitios o desde el Panel de Archivos .

Se abrirá esta ventana y editaremos nuestro sitio local, en este caso CursoDreamweaver.

Seleccionaremos en Categoría , Datos remotos .

Dreamweaver


Selecionaremos Acceso FTP . Existen otras opciones, pero son sistemas detransferencia más avanzados que en este curso no veremos.

Dreamweaver


Habrá que definir todos estos parámetros del FTP. Datos remotos.

Los parámetros son:

• Servidor FTP : nombre del servidor FTP que da acceso a los archivosremotos alojados en dicho servidor. Es una dirección similar al URL denuestro sitio web. En algunos casos puede empezar con el prefijo FTP conapariencia ftp.nombre.com . En este campo no se pueden introducir ni barrasni carpetas.

• Directorio del servidor : los archivos del sitio remoto deben tener unacarpeta raíz igual que el sitio local, y tendremos que definirla en el sitioremoto.

• Usuario: nombre para acceder al servidor remoto, que proporcionará elservicio contratado.

• Contraseña : clave para acceder al servidor remoto. También seráproporcionada por el servidor.

La demás opciones no las explicaremos en este momento ya que son específicas delservidor contratado y en caso de ser necesarios nos lo facilitarían.

Dreamweaver


ftp://ftp.nombre.com

Podremos pulsar sobre el botón Prueba para ver si funciona correctamente.

U.D.3. Publicación y mantenimiento del sitio web

Una vez introducidos los parametrosFTP , como ya hemos visto en la unidad anterior,estamos listos para conectarnos al servidor web y transferir los archivos. Primero nosaseguraremos de estar conectados a internet. Abriremos el panel Archivos ypincharemos en el botón expandir y contraer .

Se activa el panel del Sitio expandido con las herramientas para publicar y gestionarlos archivos del sitio.

La imagen superior describe las herramientas de publicación y gestión.

• A - Conectar y desconectar: al servidor remoto.• B - Actualizar: actualizará los archivos que han sido modificados o creado.

Dreamweaver


• C - Obtener archivo : baja del sitio remoto al sitio local los archivosseleccionados.

• D - Colocar archivo: publica o sube los archivos seleccionados.• E y F- Proteger y desproteger: aunque intentes subirlos, si están

protegidos no se publican.• G - Expandir / contraer mapa : Expande o contrae esta ventana.

Lo primero es conectarse al servidor.

Una vez conectados al sitio, seleccionar lo que se desea subir al sitio remoto. Podemossubir el sitio completo, y pedirá si estamos seguros de ello. Esto se haría al crear elsitio, aunque también se puede realizar en cualquier momento.

Proceso de carga de los ficheros.

Dreamweaver


En esta imagen vemos que los archivos locales y los archivos del sitio remotocoinciden.

Dreamweaver


Es posible subir parte de los archivos, y nos pedirán si subimos los archivosdependientes de éste. Lo haremos si nos interesa. Normalmente no se hace, pues sesube lo actualizado salvo que estén actualizados todos los archivos dependientes.

U.D.4. Dar la web de alta en los buscadores

Internet se compone de millones de sitios web. Esta gran cantidad de páginas hace quelocalizar uno concreto pueda resultar extremadamente difícil. El método habitualutilizado por los internautas para localizar páginas web de una determinada temáticaconsiste, básicamente, en realizar búsquedas en directorios y buscadores de la Red.Así pues, puede decirse que para estar en Internet es necesario estar en losbuscadores.

El alta en cientos o miles de buscadores se lleva a cabo utilizando un sistemaautomático que remite la misma información a cada buscador. Se rellena un únicoformulario y con un click la información se envía. Al margen de otras consideracionestécnicas (las solicitudes de alta de cada buscador, aunque parecidas, exigen distintainformación).

Resumen:

Dreamweaver


1. No es fácil . El número de páginas en internet es muy alto y debemosbuscar el hueco donde incluir la nuestra.

2. Es lento. El tiempo que pasa desde que se lanza una web hasta que esindexada varía desde las dos semanas hasta los cuatro meses (aprox.)

3. Merece la pena. La mayoría de los usuarios encuentran las páginas porbuscadores.

4. Elementos a potenciar: el titulo de la pagina, los metatags y el contenido.5. No olvides incluir un texto alternativo a las imágenes.

Ejemplo de alta en un buscador. Por ejemplo, en Google

Al entrar en la página de Google pincharemos donde nos van indicando las imágenesque aparecen a continuación:

Dreamweaver


Dreamweaver


Dreamweaver


En este última es en la que deberemos insertar la dirección web de nuestro sitio, unoscomentarios y rellenar con los caracteres mostrados en la imagen el cuadro de textofinal y pulsaremos el botón. Ya estaremos en Google.

Dreamweaver


Dreamweaver


¿Cómo funcionan los buscadores?

Entre varios métodos que existen, el más conocido es el de los Los robots que indexanpáginas. Estos robots son programas informáticos que escanean la web buscandopáginas. Cuando encuentran una, la analizan leyendo el texto (no las imágenes) quehay en la página. Si los metas y el texto son relevantes, la incluirán en su base dedatos.

¿Qué hacer para que te indexen?

Definir tu página al detalle. Esto requiere definir su localización geográfica (si esrelevante), su temática, su punto fuerte, su idioma, sus propiedades. Por ejemplo sitenemos una página web de deporte podríamos definirla de la siguiente forma:

"Página de deportes españoles. Especializada en ligas de fútbol. Dispone deentrevistas recientes con los mejores deportistas y vídeos de los partidos. Dispone defotografías y guías sobre los partidos, buscador y buzón de correo electrónico."

Esta definición hace hincapié en los elementos de interés, y seguramente sea difícil deindexar ya que hay mucha competencia, pero todo es cuestión de tiempo. Ahorapodremos construir una estrategia para ser indexados en los buscadores y para losrobots prepararemos títulos de páginas web, meta-tags y contenidos muy precisos.

¿Qué son los meta-tags?

Los meta-tags, son etiquetas (tags) códigos HTML, que situaremos dentro de las<HEAD> y </HEAD>. el uso que se le puede dar es el de especificarle al navegadordistintas opciones o a los robots de los buscadores. Por ejemplo si una pagina puedeser guardada en el cache, para decirle que nuestra pagina se actualiceautomáticamente cada determinado tiempo, decir quien ha creado la página web, etc.La otra utilidad es la de indicarles de los buscadores que tienen que hacer al entrar ennuestra página web.

La estructura de un meta-tag es la siguiente:

<meta name="accion_o_propiedad" content="contenido">La estructura puede variar, por ejemplo en la parte donde dice name puede decirHTTP-EQUIV o algo similar, pero siempre va a seguir lo misma forma. En el siguienteejemplos verás algunos.

Dreamweaver


No hay que limitarse a introducir contenido en los meta-tag. Cuanto más preciso y másdetallado sea, mejor. Conviene incluirlo en todas las páginas de la web. Esbueno introducir siempre el nombre de la página (http;//www.midominio.com) y loselementos claves. También conviene que en cada página se varíe incluyendo logenérico más el tema destacado de esa página.

El meta tag + un buen título + más un contenido bien estructurado = + posibilidades deque un buscador indexe la página. Por último, no olvides nunca incluir el título de lapágina , procurando que concuerde con el contenido de los meta tags y el contenidode la página.

Dreamweaver

Plataforma de Teleformación de IFES Página 169 de169

Manual Dreamweaver

Documents

introduccin a html

mdulo iii

mdulo iv

mdulo viii

documento html parte

introduccin a dreamweaver

estructura bsica

sitio web