, se utiliza para agrupar bloques de texto, pero con la diferencia de que la etiqueta div puede obtener una identificación “ID”, facilitando el uso de la sección en los editores avanzados de HTML como el Dreamweaver la separación entre ellos es menor.

Texto utilizando párrafos

Título 1: HTML

Título 2: HTML

Título 3: HTML

Título 4: HTML

Título 5: HTML

Título 6: HTML

Las marquesinas

Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea. Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y . La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen.

6

A través del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez). A través del atributo direction puede modificarse la dirección en la que se moverá el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha). También es posible establecer un color de fondo, a través del atributo bgcolor. Por ejemplo:

<marquee bgcolor="#006699" behavior="alternate" direction="right"> Esto es una marquesina

Practica 2 Realizar la siguiente página web:

Titulo de la página: Tipos de etiquetas Etiqueta cabecera 1 “H1” para este texto. Texto utilizando barra horizontal. Texto con etiqueta de color azul Texto con etiqueta párrafo

con el texto centrado a la derecha. Etiqueta utilizando texto subrayado. Texto con etiqueta tipo “negrita” Guardar archivo como práctica2.html

Los hiperenlaces Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo. Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas y . A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace. Enlaces absolutos Visita www.cetpenedes.com Habría que escribir:

Visita www.cetpenedes.com Enlaces relativos al sitio. Enlace a Tema 4: Hiperenlaces

7

Enlaces al propio documento Punto de fijacion Tipos de enlaces

Practica 3 Crear una página web desde el bloc de notas con las siguientes características: Se trata de crear una página donde aparezcan tres noticias escogidas al azar desde diferentes páginas web de noticias.  Titulo de la página: NOTICIAS DESTACADAS DEL DIA  Marquesina con el texto “últimas noticias”, tamaño 8, slide  Titulo de la primera noticia con etiqueta H1, color azul. o Párrafo de la noticia con alineación centrada. o Enlace “Ver mas” a la noticia.  Barra Horizontal  Noticia 2 con encabezado H2 o Párrafo alineado a la derecha, color azul o Enlace “Ver mas” a la noticia.  Barra Horizontal  Noticia 3con encabezado H3 o Párrafo alineado a la izquierda, color verde o Enlace “Ver mas” a la noticia.

Tipos de enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo target al que se le puede asignar los siguientes valores: _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ínculo o en el conjunto de marcos padre. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: Abre el documento vinculado en la ventana completa del navegador. link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez). alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado). vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).

8

... www.cetpenedes.com ...

Puntos de fijación: Anclas

Cuando se tienen documentos extensos, divididos en varios apartados, es preferible poder ir directamente al apartado deseado, en lugar de ir al comienzo del documento. Para ello se utilizan las anclas, o puntos de fijación, muy útiles a la hora de crear índices. Un ancla necesita que se inserten las y , con el atributo name, que puede tomar cualquier valor inventado por el usuario, se recomienda no utilizar caracteres especiales. Por ejemplo, para insertar un punto de fijación delante del siguiente texto: Texto con ancla Habría que escribir: Texto con ancla

Como puedes ver, no es necesario insertar nada entre las etiquetas y , y que sin mirar el código no hay nada que indique que delante del texto haya un ancla. Teniendo en cuenta que el documento actual se llama t_4_3.htm, y que el ancla anterior se llama miancla, podríamos crear un enlace que nos llevara directamente a la línea de texto en la que se encuentra el ancla. Por ejemplo: Enlace al ancla Habría que escribir: Enlace al ancla Si pulsas sobre el enlace verás como se vuelve a cargar el documento actual, pero en lugar de cargarse desde el principio, la primera línea de texto será la línea en la que hemos insertado el ancla. Cuando el ancla se encuentra en el mismo documento que el enlace, como ocurre en este caso, podemos prescindir de poner el nombre de la página en el atributo href. En el ejemplo anterior podríamos haber escrito: Enlace al ancla Correo electrónico

Abre la aplicación Outlook Express para escribir un correo electrónico, cuyo destinatario será el especificado en el enlace. Para ello la referencia del vínculo debe ser "mailto:direcciondecorreo". Por ejemplo, para insertar un enlace que permita enviar un correo electrónico a Cetpenedes, tal como este: e-mail para ceptpenedes Habría que escribir: e-mail para cetpenedes

Después de hacer clic en el enlace se abrirá el Outlook Express (si el usuario lo tiene instalado) con la pantalla para redactar un nuevo mensaje y con el campo destinatario rellenado con la direcciondecorreo.

9

Podemos hacer que esté rellenado algún campo más como es el asunto. En este caso habría que escribir: e-mail para aulaclic

Etiqueta Imágenes

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Para insertar una imagen es necesario insertar la etiqueta . Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src. Por ejemplo, para insertar una imagen con enlace a cetpenedes.com:

Teniendo en cuenta que la imagen se llama logo.gif y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento). Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imagenes, o una carpeta destinada a almacenar archivos de audio, etc.

10

TABLAS Hoy en dia, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño. Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse. Para crear una tabla hay que insertar las etiquetas

y . Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla. Filas ..

Es necesario insertar las etiquetas y por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiqetas y . Por ejemplo, para crear una tabla con cinco filas escribiríamos: ............... Columnas ..

Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas. Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila. Es necesario insertar las etiquetas y por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas y . Entre las etiquetas y se podrá especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla: Sabado Domingo Curso HTML Curso Dreamweaver Curso Frontpage Curso Flash Habría que escribir:

Sabado	Domingo
Curso HTML	Curso Dreamweaver
Curso Frontpage	Curso Flash

11

Formato tablas: Atributo

Significado

Posibles valores

width

ancho de la tabla

un número, acompañado de % cuando se desee que sea en porcentaje

height

altura de la tabla

un número, acompañado de % cuando se desee que sea en porcentaje

cellpadding

espacio entre el contenido de las un número celdas y el borde

cellspacing

espacio entre celdas

un número

border

grosor del borde

un número

align

left (izquierda) alineación de la tabla dentro de right (derecha) la página center (centro)

bgcolor

color de fondo

número hexadecimal

background imagen de fondo

número hexadecimal

bordercolor color del borde

número hexadecimal

Formato celdas:

Es posible modificar los siguientes atributos de una celda: Atributo Significado Posibles valores un número, acompañado de % cuando se width ancho de la tabla desee que sea en porcentaje un número, acompañado de % cuando se height altura de la tabla desee que sea en porcentaje left (izquierda) alineación horizontal del align right (derecha) contenido de la celda center (centro) baseline (línea de base) alineación vertical del bottom (inferior) valign contenido de la celda middle (medio) top (superior) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta , en lugar de en la etiqueta . Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. Ejemplo con atributos

12

Sabado	Domingo
Curso HTML	Curso Dreamweaver
Curso Frontpage	Curso Flash

Las etiquetas y se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas y . Para la etiqueta es posible especificar los mismos atributos que para la etiqueta , pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las columnas. Por ejemplo, si escribiéramos el siguiente código:

Sabado	Domingo
Curso HTML	Curso Dreamweaver
Curso Frontpage	Curso Flash

Combinar celdas Para las etiquetas y existen los atributos colspan y rowspan, que se utilizan para combinar celdas. A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda. Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente tabla: DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE DIFERENCIAS Duración crecimiento

PERRO PEQUEÑO

GRANDE

10 meses

18 a 24 meses

HOMBRE 16 años

Tiempo de gestación

58 a 63 días

9 meses

Duración de vida del pelo/cabello

1 año

2 a 7 años

Habría que escribir el siguiente código: 13

DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE
DIFERENCIAS	PERRO		HOMBRE
	PEQUEÑO	GRANDE
Duración crecimiento	10 meses	18 a 24 meses	16 años
Tiempo de gestación	58 a 63 días		9 meses
Duración de vida del pelo/cabello	1 año		2 a 7 años

CAPAS Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño. Podemos insertar una capa a través de las etiquetas

y

, que como ya vimos, sirven para agrupar bloques de texto. A través del atributo id se le da un nombre a la capa, y a través del atributo style se establecen el resto de propiedades de la capa. A través de las propiedades left (izquierda) y top (superior) se establece la posición de la capa respecto a los márgenes izquierdo y superior de la página. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje. Para que la capa aparezca en la posición establecida, es necesario incluir también la propiedad position con el valor absolute. Si no se estableciera este valor, la capa se mostraría pegada al margen izquierdo, en la posición en la que hubiera sido insertada dentro del código.

14

A través de las propiedades width (anchura) y height (altura) se establece el tamaño de la capa. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje. A través de la propiedad z-index puede establecerse el índice de la capa dentro de la página. Una capa podrá ser solapada por aquellas capas cuyo índice sea mayor. Siempre es un valor numérico. A través de la propiedad visibility puede establecerse la visibilidad de la capa. Puede tomar los valores inherit (se muestra la capa mientras la capa a la que pertenece también se esté mostrando), visible (muestra la capa, aunque la capa a la que pertenece no se esté viendo) y hidden (la capa está oculta). A través de las propiedades layer-background-image y background-image se puede establecer una imagen de fondo para la capa. La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url. A través de las propiedades layer-background-color y background-color se puede establecer un color de fondo para la capa. Ha de ser un número hexadecimal. A través de la propiedad overflow puede establecerse si se mostrará o no el contenido de la capa cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado pequeña. Puede tomar los valores visible (se muestra todo el contenido de la capa, aunque esto implique hacer que la capa sea más grande), hidden (no es posible visualizar el contenido de la capa que no quepa en ella), scroll (se muestra la barra de desplazamiento, aunque el contenido de la capa pueda ser visualizado totalmente) y auto (se muestra la barra de desplazamiento cuando sea necesario). A través de la propiedad clip puede establecerse el área de la capa que podrá ser visualizado. Lo que hace es recortar la capa, haciendo que partes de ella no sean visibles. Ha de especificarse la distancia de los márgenes de la capa entre paréntesis, después de la palabra url. El primer valor ha de ser la distancia (se asume que está en píxeles) del margen superior, hasta la que no se visualizará el contenido de la capa. El segundo valor ha de ser la distancia del margen izquierdo, hasta la que no se visualizará el contenido de la capa. El tercer valor ha de ser la distancia del margen superior, hasta la que se visualizará el contenido de la capa. El cuarto valor ha de ser la distancia del margen izquierdo, hasta la que se visualizará el contenido de la capa. También es posible incluir auto como valor de alguna de estas distancias, lo que indica que la distancia se corresponderá con los bordes de la capa. Todas estas propiedades se especifican a través del atributo style, y deben aparecer entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las 15

propiedades no se utiliza el símbolo = (igual), sino que se utiliza el símbolo : (dos puntos). Por ejemplo, podríamos insertar una capa escribiendo el siguiente código:

Este texto está dentro de una capa.

Otra forma de insertar capas es utilizando las etiquetas <span> y , en lugar de las etiquetas

y

. La etiqueta <span> se utiliza del mismo modo que la etiqueta

, y es compatible con un mayor número de navegadores. También existen las etiquetas y , pero solamente son reconocidas por el navegador Netscape.

DREAMWEAVER Qué es? Dreamweaver CS3 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS3 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

Come tener una página web? Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar. Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya.

16

Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal. Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com. En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra página no será más que un archivo dentro de la de la empresa contratada. A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a través de programación vía Web, aunque esto último será útil sólo para usuarios avanzados.

Mi primera página web Abre Dreamweaver y introduce el siguente texto: Con Dreamweaver es mucho mas fácil hacer una página web. Se usan enlaces con mucha mas comodidad, por ejemplo: El Pais.es Lavanguardia.es Sport.es Fin de prueba.

Nota: “Para realizar un salto de línea dentro del mismo párrafo se usa CTRL+Intro” Vamos a conocer las propiedades de página. Cambia el Título por Mi primera página. En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de color azul. Seguidamente pulsa sobre el botón Aceptar. Ves a google y busca una imagen para usar de logo. Insértala en tu pagina web.

17

Conceptos básicos Dreamweaver Barra de propiedades:

Situada en la parte inferior de la pantalla. Esta banda de opciones va cambiando en función del objeto que tenemos seleccionado, apareciendo todas las propiedades de dicho objeto. Por ejemplo, si queremos inertar un enlace a un texto, seleccionaremos el texto y en la propiedad de vinvulo introduciremos la dirección web. Opciones de tipo de encabezado, tipo de letra, tamaño, alineación y muchas otras opciones están en esta banda. La pantalla incial:

Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento, como veremos más adelante.

La barra de título contiene el nombre del programa (Marcromedia Dreamweaver CS3) y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.

18

La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles. La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Abrir La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estándar. Estas operaciones son las de cambio de vista del documento, vista previa, etc. La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc.

Configuración de un sitio en modo local Introducción: Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet. La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc. Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica. Por ejemplo, si escribiéramos la dirección genérica http://www.cetpenedes.com en el navegador, éste intentaría cargar la página http://www.cetpenedes.com/index.htm, por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index.htm.

19

Crear un sitio web sin conexión a internet Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el sitio en Dreamweaver. Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios.... Recuerda que a través del panel Archivos, pestaña Archivos, se puede acceder a cada uno de los sitios creados y a la opción Administrar sitio. En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad. Por supuesto, pueden existir varios sitios locales en un mismo ordenador. Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir las características del sitio. Las características del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella. Vamos a ver los datos que hay que editar para la categoría Datos locales. Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local. Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio, de la que colgarán el resto de documentos HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con el nombre index.htm, Dreamweaver la cogerá por defecto. Estas tres características son las imprescindibles para definir un sitio local. Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto. Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio. Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la pestaña Básicas, en vez de la pestaña Avanzadas.

20

Propiedades del documento Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc. Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página. Este cuadro se puede abrir de tres modos diferentes: Pulsar la combinación de teclas Ctrl+J. Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. Hacer clic 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. Se abrirá el cuadro de diálogo siguiente: Las propiedades están organizadas en categorías. En la categoría Aspecto, encontramos las propiedades Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo. Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo. Tamaño: permite definir el tamaño de la letra. Color del texto: es el color de la fuente. Márgenes: permiten establecer márgenes en el documento. Los márgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de márgen solo funcionan para Netscape Navigator. Ninguno de estos márgenes aparece en la ventana de documento de Dreamweaver, solo se mostrarán en los navegadores. En la categoría Título/Codificación encontramos la propiedad: Título: es el título del documento, que aparecerá en la barra de título del navegador y de la ventana de documento de Dreamweaver. En la categoría Vínculos encontramos las propiedades: Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre el texto normal y los vínculos que sirven de enlace a otras páginas. Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al usuario si unos vínculos ya han sido visitados o no. Vínculos activos: es el color de los vínculos activos. Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el texto aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado. 21

En la categoría Imagen de rastreo encontramos las propiedades: Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el documento. Transparencia: permite establecer la opacidad de la imagen de rastreo. PRACTICA 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Abre el menú Archivo y elige la opción Nuevo, o bien haz clic sobre el botón barra de herramientas.

de la

3 Selecciona la pestaña General de la nueva ventana. 4 Selecciona Página en blanco en Categoría. 5 Selecciona HTML en Página en blanco. 6 Haz clic sobre el botón Crear. 7 A partir de este momento vamos a realizar todos los ejercicios en la vista diseño. Haz clic sobre el botón Mostrar vista de diseño

.

8 Haz clic con el botón derecho del ratón sobre el documento en blanco, para abrir su menú contextual. 9 Elige la opción Propiedades de la página en el menú contextual. 10 En Título escribe Cocina. 11 En Fondo: escribe #CCCC99. 12 En Vínculos: escribe #CC6600. 13 En Vínculos visitados: escribe #CC9933. 14 En Vínculos activos: escribe #CC9966. 15 Haz clic sobre el botón Aceptar. 16 Haz clic sobre el botón Guardar de la barra de herramientas. Guarda el documento con el nombre menu.htm, dentro de la carpeta cocina del ejercicio anterior.

22