PRESENTACION

l presente manual fue elaborado especialmente para ti, joven estudiante, y

tiene la finalidad de proporcionarte los cimientos bsicos para que puedas
desarrollar tus habilidades y destrezas en la elaboracin de pginas Web
en tu entorno estudiantil.

E
Los temas que aqu se desarrollan tienen toda la claridad posible y los ejemplos
estn diseados para que puedas ejecutarlos sin ninguna complicacin, adems
de que tendrs contigo la ayuda profesional de tu profesor para que aclare tus
dudas.

Ojal y este sencillo manual te sirva para lograr tus propsitos en la Carrera que
pretendes desarrollar durante tu estancia en este Plantel Educativo y enfocarte en
lo futuro, al desarrollo integral de cualquier rama de la tecnologa moderna, que
da a da avanza a grandes pasos.























INTRODUCCION




a finalidad de la imparticin de esta materia es la de proporcionar a los
educandos los elementos necesarios e indispensables para la aplicacin
adecuada en la elaboracin de pginas Web, enlazando el hardware y el
software en la aplicacin de diversas funciones; todo ello enfocado al
desenvolvimiento prctico y como un medio de enlace entre los dems
componentes de la currcula.
L

Al tener este documento en tus manos, te irs adentrando a los conocimientos
informticos, ya que sus contenidos temticos te ayudarn a que desarrolles tus
habilidades y destrezas y te ayudar a que aproveches los recursos de un equipo
de cmputo en la solucin de problemas de sistemas de informacin, as como la
deteccin, correccin y elaboracin de pginas Web.

En la actualidad, es indispensable conocer las principales herramientas que aqu
se te proporcionan y que las podrs utilizar con facilidad aun no siendo un
profesional de la informtica, ya que nos ayuda en gran medida a la resolucin de
tareas del mbito familiar, laboral y, principalmente, escolar.

Por ello, este manual y sus contenidos temticos te sern de gran utilidad por sus
importantes y bsicos elementos, los cuales te ayudarn a explotar
adecuadamente las herramientas con eficiencia en el mbito de la computacin
moderna.





















OBJETIVOS GENERALES Y ESPECIFICOS





OBJETIVO
GENERAL:
Que el alumno mediante el uso de las Tecnologas
modernas, aprenda a desarrollar sus habilidades y
destrezas para el uso y manejo de la elaboracin de
pginas Web.


OBJETIVOS
ESPECIFICOS:

Utilizara los elementos fundamentales del diseo.

Manejara los elementos bsicos de un lenguaje
utilizable en la Creacin de Pginas Web (HTML,
DHTML, ASP, Java Script, CSS u otros).

Diseara una pgina Web con un
Software de aplicacin.

Publicar pginas Web.











ESTRUCTURA TEMTICA

UNIDAD O
MODULO
ELABORAR PGINAS WEB.
OBJETIVO
Que el alumno mediante el uso de las Tecnologas modernas, aprenda a desarrollar sus habilidades y
destrezas para el uso y manejo de la elaboracin de pginas Web.

RESULTADO DE
APRENDIZAJE
El alumno obtiene informacin sobre tcnicas grupales para el manejo de diseo.
Utiliza tcnicas comparativas sobre las aplicaciones de la teora del diseo, color y formatos.
Lleva a cabo tcnicas demostrativas y comparativas de los servicios que ofrece Internet.
Le da solucin a los problemas a travs del uso de las herramientas de Internet, en la aplicacin del
diseo grfico.
Elabora una pgina Web con todos sus elementos y la publica en Internet.
ESTRUCTURA TEMATICA
TEMA
DURACION
TECNICAS
INSTRUCCIONALES
ACTIVIDADES DE
ENSEANZA
APRENDIZAJE
SUGERENCIAS
DIDACTICAS
MATERIAL
DIDACTICO
SUGERENCIA
DE
EVALUACION T P T

1. Interpretar el diseo.

1.1 Teoras del diseo.
Minimalismo.
Conceptualismo.

1.2 Funciones de diseo.
Necesidades.
Impacto.
Enfoque.

2. Disear formatos.

2.1 Zonas ureas.
2.2 Direccin y sentido.
2.3 Equilibrio.

3. Utilizar teora del
color.

3.1 Crculo cromtico.
3.2 RGB (Red, Green,
Blue).

0










0





0

6










6





6

6










6





6

- Investigacin.










- Ejecucin.





- Ejecucin.

Identificacin de
conocimientos
previos.

Utilizacin de
tcnicas grupales
para el manejo del
diseo.

Cuestionarios
referenciados con
preguntas directas e
indirectas sobre las
generalidades del
diseo.


Conformacin de una
pgina Web para su
anlisis y reflexin.



- Investigacin
en Internet.


- Investigacin en
una enciclopedia.


- Realizacin de
ejercicios de
auto evaluacin.


- Aplicar
prcticamente lo
aprendido.

Equipo de cmputo.
Software de
aplicacin.
Medios de
almacenamiento
secundario.
Bibliografa.
Can.


P: Producto.
D: Desempeo.
C: Conocimiento


Gua de
observacin.
Lista de cotejo.
C: El diseo
interpretado.

D: Los formatos
diseados.

D: La teora del
color
utilizadas.

ESTRUCTURA TEMATICA
TEMA
DURACION
TECNICAS
INSTRUCCIONALES
ACTIVIDADES DE
ENSEANZA
APRENDIZAJE
SUGERENCIAS
DIDACTICAS
MATERIAL
DIDACTICO
SUGERENCIA
DE
EVALUACION T P T

3.3 CMY (Cyan,
Magenta, Yellow)
3.4 Contrastes.


4. Utilizar los servicios
de Internet.

4.1 Correo electrnico.
4.2 Outlook express.
4.3 Eudora.
4.4 FTP.
4.5 Navegadores.
4.6 Internet Explorer.
4.7 Netscape.
4.8 Sistemas de
comunicacin
personal.
4.9 Netmeeting.
4.10 Lcq.
4.11 Mirc.
4.12 World Wide Web.
4.13 Buscadores en
Internet.
4.14 Metabuscadores.
4.15 Riesgos y
seguridad en
Internet.

5. Manejar protocolos y
lenguajes.

5.1 Hipertexto.
5.2 Servidores Web.
5.3 Protocolos.
5.4 http.
5.5 Lenguajes.
5.6 HTML.
5.7 DHTML.






0























0






6























6






6























6






- Investigacin

- Ejecucin.





















- Investigacin

- Ejecucin.

Identificacin de
servicios que
proporciona la
Internet.


Tcnicas
demostrativas y
comparativas sobre
los servicios que
proporciona el
Internet.


Realizacin de
prcticas sobre la
utilizacin de los
servicios de Internet.




- Investigacin
en Internet.


- Investigacin en
una enciclopedia.


- Realizacin de
ejercicios de
auto evaluacin.


- Aplicar
prcticamente lo
aprendido.

Equipo de
cmputo.
Software de
aplicacin.
Medios de
almacenamiento
secundario.
Bibliografa.
Can.


- Gua de
observacin.

- Cuestionario.

- Listas de
cotejo.









- Gua de
observacin.

- Cuestionario.

- Listas de
cotejo.

ESTRUCTURA TEMATICA
TEMA
DURACION
TECNICAS
INSTRUCCIONALES
ACTIVIDADES DE
ENSEANZA
APRENDIZAJE
SUGERENCIAS
DIDACTICAS
MATERIAL
DIDACTICO
SUGERENCIA
DE
EVALUACION T P T

5.8 ASP.
5.9 JAVA SCRIPT.

6. Programar en un
lenguaje de
Hipertexto.

6.1 Etiquetas principales.
6.2 Links.
6.3 Imgenes.
6.4 Etiquetas
secundarias.
6.5 Caracteres
especiales.

7. Disear la estructura
de una pgina Web.

7.1 Objetivos y
contenidos.
7.2 Imgenes.
7.3 Ubicacin.
7.4 Tablas.
7.5 Insercin de
componentes.
Comentarios.
Contadores de
visitas.
Administrador de
titulares.
Fecha y hora.
Marquesina.
Botones activables.
7.6 Formularios.
7.7 Marcos.
7.8 Organizacin y
navegacin.
7.9 Tablero de
secuencia para la
presentacin Web.




0










0




6










6




6










6




- Investigacin

- Ejecucin.








- Investigacin

- Ejecucin.


Analizar y reflexionar
sobre el uso de
lenguajes de
programacin


Desarrollar la
integracin de una
pgina Web.


Solucionar problemas
en el desarrollo de
una pgina Web.

- Investigacin
en Internet.


- Investigacin en
una enciclopedia.


- Realizacin de
ejercicios de
auto evaluacin.


- Aplicar
prcticamente lo
aprendido.

Equipo de
cmputo.
Software de
aplicacin.
Medios de
almacenamiento
secundario.
Bibliografa.
Can.



ESTRUCTURA TEMATICA
TEMA
DURACION
TECNICAS
INSTRUCCIONALES
ACTIVIDADES DE
ENSEANZA
APRENDIZAJE
SUGERENCIAS
DIDACTICAS
MATERIAL
DIDACTICO
SUGERENCIA
DE
EVALUACION T P T

8. Crear vnculos de
Web.

8.1 Vnculos a otros
documentos en
Web.
8.2 Creacin de
vnculos y anclas.
8.3 Estructura de un
URL.
8.4 HTTP.
8.5 FTP annimo.
8.6 FTP no annimo.
8.7 Archivo.
8.8 Mailto.
8.9 Listas
8.10 Tablas.
8.11 Imgenes.
8.12 Sonido.
8.13 Video.

9. Crear Hipervnculos.

9.1 Direcciones
absolutas y relativas.
9.2 Marcadores.
9.3 Habilitar los efectos
de conversin de
hipervnculos.

10. Interpretar el
diseo.

10.1 Teoras del diseo.
10.2 Minimalismo.
10.3 Conceptualismo.




0




















0








0

6




















6








6

6




















6








6

- Investigacin

- Ejecucin.


















- Investigacin

- Ejecucin.






- Investigacin

- Ejecucin.

Analizar y reflexionar
sobre el uso de
lenguajes de
programacin


Desarrollar la
integracin de una
pgina Web.


Solucionar problemas
en el desarrollo de
una pgina Web.

- Investigacin
en Internet.


- Investigacin en
una enciclopedia.


- Realizacin de
ejercicios de
auto evaluacin.


- Aplicar
prcticamente lo
aprendido.

Equipo de
cmputo.
Software de
aplicacin.
Medios de
almacenamiento
secundario.
Bibliografa.
Can.



ESTRUCTURA TEMATICA
TEMA
DURACION
TECNICAS
INSTRUCCIONALES
ACTIVIDADES DE
ENSEANZA
APRENDIZAJE
SUGERENCIAS
DIDACTICAS
MATERIAL
DIDACTICO
SUGERENCIA
DE
EVALUACION T P T

11. Funciones de
diseo.

11.1 Necesidades.
11.2 Impacto.
11.3 Enfoque.

12. Disear formatos.

12.1 Zonas ureas.
12.2 Direccin y sentido.
12.3 Equilibrio.




























0






0

6






6

6






6

- Investigacin

- Ejecucin.




- Investigacin

- Ejecucin.

Analizar y reflexionar
sobre el uso de
lenguajes de
programacin


Desarrollar la
integracin de una
pgina Web.


Solucionar problemas
en el desarrollo de
una pgina Web.

- Investigacin
en Internet.


- Investigacin en
una enciclopedia.


- Realizacin de
ejercicios de
auto evaluacin.


- Aplicar
prcticamente lo
aprendido.

Equipo de
cmputo.
Software de
aplicacin.
Medios de
almacenamiento
secundario.
Bibliografa.
Can.



RESUMEN TEMATICO



MACROMEDIA DREAMWEAVER MX 2004

Al arrancar Dreamweaver aparece una pantalla inicial; vamos a ver sus componentes fundamentales. As
conoceremos los nombres de los diferentes elementos, los cuales sern ms fciles de entender. La pantalla que se
muestra a continuacin (y en general todas las de este curso) pueden 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.






















u LAS BARRAS u

La barra de ttulo



La barra de ttulo contiene el nombre del programa (Macromedia Dreamweaver MX 2004) y seguidamente el nombre del
documento que aparecer en el explorador, y entre parntesis, su ubicacin y el nombre del archivo en formato html. En el
extremo de la derecha estn los botones para minimizar, maximizar/restaurar y cerrar.


La barra de mens


La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens 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 mens, pero para algunas es preferible o indispensable
hacerlas desde los paneles.

La barra de herramientas estndar



La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms
habituales, como Abrir, Guardar, etc.


La barra de herramientas de documento



La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones
habituales que no incluye la barra de herramientas estndar. Estas operaciones son las de cambio de vista del
documento, vista previa, etc.


Los paneles e inspectores:

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

A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o
inspectores. Vamos a ver los ms importantes.


El inspector de Propiedades





El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son
usadas de forma ms frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrar el tipo de fuente, la
alineacin, si est en negrita o cursiva, etc.

Pulsando sobre el botn se despliega para mostrar ms opciones. Este botn se encuentra en la esquina inferior-
derecha.

Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar.

La barra de herramientas Insertar o panel de objetos.











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 estn clasificados segn su categora: tablas, texto, objetos de formulario,
etc.

Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la
imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.



( EL ENTORNO DE TRABAJO (

Vistas de un documento:

Puedes cambiar la vista del documento a travs de la barra de herramientas de documento.




La vista Diseo

La vista Diseo permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se suele
utilizar habitualmente.













La vista Cdigo

La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. No
permite tener directamente una referencia visual de cmo va quedando el documento segn se va modificando el
cdigo.


















La vista Cdigo y Diseo

La vista Cdigo y Diseo permite dividir la ventana en dos zonas. La zona superior muestra el cdigo fuente, y la
inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente
sobre la otra.





















Propiedades del documento:

Es conveniente definir sitios homogneos, que todas las pginas 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 pginas a travs de Propiedades de la pgina.

Se puede abrir esta ventana de tres modos diferentes:

Pulsar la combinacin de teclas Ctrl+J.

Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.

Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men
contextual la opcin Propiedades de la pgina. Se abrir el cuadro de dilogo siguiente:

















Las propiedades estn organizadas en categoras, en la categora Ttulo/Codificacin encontramos la propiedad:

Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana
de documento de Dreamweaver.

En la categora Aspecto, como ves en la imagen anterior, 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 segn 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.

Tamao: permite definir el tamao de la letra.
Color del texto: es el color de la fuente.

Mrgenes: permiten establecer mrgenes en el documento. Los mrgenes izquierdo y superior solo
funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de mrgen solo funcionan
para Netscape Navigator. Ninguno de estos mrgenes aparece en la ventana de documento de
Dreamweaver, solo se mostrarn en los navegadores.
En la categora Vnculos encontramos las propiedades:




Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y
los vnculos que sirven de enlace a otras pginas.

Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos
vnculos ya han sido visitados o no.

Vnculos activos: es el color de los vnculos activos.

Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece
subrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca
subrayado.

En la categora Imagen de rastreo encontramos las propiedades:

Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se
mostrar en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se
utiliza como plantilla grfica sobre la que se va a crear el documento.

Transparencia: permite establecer la opacidad de la imagen de rastreo.







Los colores:

Para asignar colores es posible desplegar una paleta de colores como sta.
Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del
color en la parte superior.

Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores
seguros para web. stos son los colores que se muestran de la misma forma
en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows
como en Macintosh.
Tambin es posible personalizar los colores a travs del botn de la
parte superior de la paleta.

Los colores pueden asignarse a travs de los botones:

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin en algunas ventanas
que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la
ventana de Propiedades de la pgina, que tienes ms arriba.

El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris, lo que hace que se
despliegue la paleta de colores. El otro modo es introduciendo directamente el nmero hexadecimal del color en el
recuadro blanco.

Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con valor #3399FF, el
botn quedara del siguiente modo:



EL TEXTO

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten
asignar al texto estilos creados por nosotros mismos, no predefinidos.

Caractersticas del texto:

Las caractersticas del texto seleccionado pueden ser definidas a travs del men Texto, y a travs del inspector
de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de propiedades, aunque
sean menos que las que se nos ofrecen a travs del men Texto.






Formato:

Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o
preformateado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato
preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se
introducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetar que hayan
varios espacios en lugar de solo uno.

Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de
fuentes en lugar de una sola, ya que es posible que al establecer una nica
fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de
fuentes posibilita que en el caso de que el usuario no tenga una fuente se
aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetia,Sans-
serif, el texto se ver con la fuente Arial, pero si esta no existe se ver en
Helvetia.
Tamao:

Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles, centmetros,
etc...

Color:

Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la pgina. Si
no se ha establecido ningn color en las propiedades de la pgina ni aqu, el color del texto por defecto ser el negro.

Estilo:

Estos botones permiten establecer si el texto aparecer en negrita o en cursiva. A travs del men Texto tambin se
puede, entre otras cosas, subrayar el texto. Esta opcin no aparece en el panel de Propiedades ya que de normal no
suele utilizarse, debido a que los vnculos aparecen subrayados y el subrayar texto normal podra hacer que el usuario
pensara que se trata de un vnculo.

Alinear:

A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas distintas:
izquierda, centrada, derecha y justificada.

Lista:

Estos botones permiten crear listas con vietas o listas numeradas.

Sangria:

Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de mrgen que se establece
a ambos lados del texto. En este caso los botones se refieren a sangra a la izquierda del texto.

Listas:

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con vietas.

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 opcin de lista correspondiente, ya sea a travs del inspector de propiedades, o a
travs del men Texto.
La lista con vietas (desordenada) se selecciona a travs del botn, mientras que la lista numerada (ordenada) se
selecciona a travs del botn.

Ejemplo de lista con numerada (ordenada):
1. Preparar la mochila
1. Sacar los libros de ese da
2. Introducir los libros del da siguiente
2. Ponerme el pijama
3. Lavarme los dientes
4. Poner el despertador
Ejemplo de lista con vietas (desordenada):
Perro
Gato
Aves
o Canario
o Loro
Hamster
Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario aadir una sangra en
los elementos de la lista que se desee que pasen a formar parte de la lista anidada.

A travs del men Texto, opcin Lista, es posible acceder a las propiedades de la lista seleccionada.Se debe
seleccionar el texto de la lista previamente o tener el cursor en algn lugar de la lista para que se active este
submen.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el tipo de
nmeros o vietas que se utilizarn (en la propiedad Estilo:), y en el caso de las listas ordenadas, el nmero por el
que comenzar el recuento.















TIPOS DE ENLACES:

Existen diferentes clases de rutas de acceso a la hora de definir los vnculos.

Referencia absoluta:

Conduce a una ubicacin externa al sitio en el que se encuentra el documento. La ubicacin es en Internet, por
ejemplo, "http://www.cbta125.com".

Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual.




Referencia relativa al documento:

Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el
que se encuentra el documento actual.

Puntos de fijacin:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vnvulo debe ser
"nombre_de_documento#nombre_de_punto". El punto se define dentro de un documento a travs del men Insertar,
opcin Anclaje con nombre.
Crear enlaces:

La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es necesario
seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vnculo en el inspector.

Por ejemplo, aqu hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://





Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.

Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc. Para ello es
necesario escribir en Vnculo nicamente una almohadilla '#'.


Destino del enlace:

El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar dependiendo de los
marcos de que disponga el documento actual.

Puede especificarse en el inspector de propiedades a travs de Dest, o en la ventana que aparece a travs del
men Insertar, opcin Hipervnculo.

_blank:

Abre el documento vinculado en una ventana nueva del navegador.

_parent:

Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre.

_self:

Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo.

_top:

Abre el documento vinculado en la ventana completa del navegador.


Formato de enlace:

En general, un texto que tiene asociado un vnculo suele aparecer subrayado. Al mismo tiempo, puede adquirir tres
colores diferentes que pueden especificarse a travs de las propiedades de la pgina. Estos tres colores diferentes
son los que se asignan como color de vnculo, de vnculo activo, y de vnculo visitado.
Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella.
Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.

Aqu tienes dos vnculos similares de ejemplo:





Como puedes ver, la segunda imagen que hace de vnculo contiene un recuadro alrededor. Esto ocurre debido a que
el campo Borde del inspector de propiedades de la imagen vale uno (1), mientras que para la primera imagen vale
cero (0).

El campo Borde sirve para ponerle un borde a la imagen, independientemente de si sta va a contener un vnculo o
no.

Si se pone a cero (0), no aparece ningn borde, ya que esto indica que el tamao de las lneas que forman el
recuadro es cero (0). Puede hacerse un recuadro ms gordo incrementando el valor del campo Borde.







Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vnculo.
Suele adquirir la apariencia de una mano sealando.

Enlace a correo electrnico:

Es posible especificar vnculos a direcciones de correo electrnico. Esto resulta til cuando se desea que los visitantes
de la web puedan contactar con nosotros.

La sintaxis del vnculo en este caso es mailto:direccindecorreo.

Puede definirse el vnculo a travs de Vnculo, del inspector de propiedades, seleccionando previamente el texto o la
imagen deseados.

Tambin es posible a travs del men Insertar,
opcin Vnculo de correo electrnico.

En este caso no es posible asignar el vnculo a una imagen, solo permite introducir el texto que contendr el vnculo de
correo.
En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos cmo crear algunas
imgenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de
nuestras pginas.

Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o
dotarla de una mayor informacin visual.


INSERTAR UNA IMAGEN

Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus de esto, ya es posible
seleccionar una imagen a travs de la nueva ventana.















En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta raz del sitio. Es preferible
que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicacin diferente, la imagen puede no verse
al estar siendo buscada en la ubicacin anterior.

Lo mismo ocurre cuando se selecciona un documento para crear un vnculo.

La ruta en la que se encuentra la imagen aparecer representada de una u otra forma en el campo URL de la ventana
y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta
raz del sitio o relativa al documento.

Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio) se encuentran la carpeta imgenes y
el documento en el que deseamos insertar la imagen. Dicha imagen, llamada cbta125.jpg, se encuentra dentro de la
carpeta imgenes.

En el caso de insertar la imagen como relativa al Documento la ruta sera:

imagenes/cbta125.jpg

Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera:

/imgenes/cbta125.jpg
Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al documento o a la carpeta raz del
sitio.

Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver, aunque s en el navegador.
En Dreamweaver aparecer de la siguiente forma:

Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que haba sido insertada.
Esto puede ocurrir si se ha modificado el nombre de la imagen, o si se ha movido de directorio, desde fuera de
Dreamweaver. En ese caso, la imagen que aparecer en el navegador ser similar a esta:


Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del
inspector de propiedades.





Si por algn motivo se desea insertar un BMP, este no aparecer a no ser que en Tipo se seleccione Todos los
archivos.

Cambiar el tamao de una imagen:

Dentro de Dreamweaver puede modificarse el tamao de las imgenes. Dicho cambio de tamao no se aplica
directamente sobre el archivo de imagen, sino que lo que vara es la visualizacin de la imagen dentro de la pgina.
Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra quedar
modificndola desde un editor externo, como Fireworks.

Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y
modificamos su tamao de varias formas diferentes:

Imagen original

Imagen con tamao modificado


Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar til
modificar el tamao de algunas imgenes aunque esto implique perder calidad.


Existen dos formas de modificar el tamao.

Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que
aparecen alrededor de la imagen.


La otra es a travs de inspector de propiedades, cambiando los campos An (anchura) o Al (altura). Estos campos
aparecern en el inspector cuando este seleccionada alguna imagen.
Hay que tener en cuenta que para cambiar la alineacin de la imagen hay que hacerlo a travs del campo Alinear del
inspector de propiedades. La alineacin de las imgenes ofrece ms posibilidades que la del texto: superior, medio,
medio absoluta, lnea de base, etc.


Imagen de sustitucin Rollover:

Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre ella. Este tipo de imagen suele
utilizarse en los mens o en los botones para desplazarnos a travs de distintas pginas.

Aqu tienes un ejemplo de rollover. Sita el puntero sobre l para ver qu es lo que ocurre.



Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen, a la opcin Imagen de sustitucin.
En la nueva ventana hay que especificar la imagen original y la de sustitucin.











Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se activa, la imagen de sustitucin
se carga cuando se carga la pgina, de este modo se evitan las demoras debidas a la descarga de la imagen cuando
llega el momento de que aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecer en lugar de la
imagen en el caso de que por algn motivo sta no pueda ser mostrada en el navegador.

El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers. Puede hacerse a travs del campo Alt
del inspector de propiedades de la imagen seleccionada.













RETROALIMENTACIN


INSTRUCCIONES: Coloca en cada uno de los renglones el nombre correspondiente a cada una de las
figuras, as como las respuestas correctas de las preguntas escritas.






_____________________________________________________





_________________________



_________________________




_________________________


A qu herramienta corresponden estos iconos?
________________________________________


Para qu se utiliza Macromedia Dreamweaver?______________________________________________


A qu herramienta corresponden estos iconos?
________________________________________


Mencione 5 mens de la lnea de Mens_____________________________________________________
_____________________________________________________________________________________





Si tienes dudas para responder correctamente, te sugiero que
vuelvas a leer este captulo.
Botones Flash:

Existen otra serie de imgenes especiales, similares a los rollovers, que suelen utilizarse para crear mens, como
pueden ser los botones Flash.

Para insertar un botn Flash hay que dirigirse al men Insertar, Media, a la opcin Botn Flash, aparecer el siguiente
cuadro de dilogo:
















A travs de Estilo puede seleccionarse uno de los distintos formatos de botn que se ofrecen.

En esta misma ventana hay que especificar tambin el Texto que mostrar el botn (Texto del botn:), as como el
nombre con el que ser guardado (Guardar como:) y el vnculo asociado (Vinculo: y Destino:).

Es preferible guardar los botones Flash en el mismo directorio que los documentos HTML, en lugar de la carpeta
destinada a almacenar imgenes, ya que de no ser as es posible que al intentar asignar un vnculo dentro del propio
sitio, Dreamweaver no permita guardar el botn con ese vnculo en una ubicacin diferente de la de dicho documento.

Recuerda que los botones deben guardarse con la extensin SWF.

A travs del inspector de propiedades del botn Flash es posible editar de nuevo sus atributos:






Puede volver a abrirse el cuadro de dilogo anterior pulsando sobre el botn Editar, y a travs del botn Reproducir
es posible probar el funcionamiento del botn Flash desde Dreamweaver, sin la necesidad de tener que abrir la pgina
con algn navegador.

Despus de haber probado el funcionamiento del botn Flash, debe pulsarse de nuevo sobre el botn Reproducir (que
habr cambiado por el botn Detener)


Texto Flash:

El texto Flash es similar a un rollover, pero en lugar de intercambiar imgenes intercambia el color del texto.

Para insertar texto Flash hay que dirigirse al men Insertar, Media, a la opcin Texto Flash.

En la nueva ventana, adems del texto, el vnculo y el nombre con el que ser guardado el texto, hay que especificar
el color original y el de sustitucin.





CBTA 125







El inspector de propiedades del texto Flash es igual que el de un botn Flash.

Barra de Navegacin:

Una barra de navegacin es un conjunto de imgenes que se utilizan como opciones de men para navegar dentro
de una web. La barra de navegacin te permite definir unos botones para ir a diferentes pginas pero de forma que
cambie el aspecto del botn segn muevas el ratn sobre l y segn sea el ltimo botn pulsado.

Una pgina web solo puede contener una nica barra de navegacin.

Para insertar una barra de navegacin hay que dirigirse al men Insertar, Objetos de imagen , a la opcin Barra de
navegacin.

En la nueva ventana pueden especificarse cuatro imgenes diferentes para cada uno de los botones, el vnculo para
cada uno de ellos, etc.















A travs de los botones superiores de la ventana es posible crear y eliminar botones de la barra de navegacin, as
como reordenarlos. Con se crea un botn nuevo, con se elimina el botn seleccionado, y con se puede
modificar la posicin del botn seleccionado.

En Imagen arriba pones la imagen que quieres mostrar inicialmente (cuando todava no se ha hecho clic).

En Sobre imagen, pones la imagen que quieres mostrar cuando el usuario mueva el puntero sobre el botn y ste
estaba mostrando la imagen asignada en Imagen arriba.

En Imagen abajo, pones la imagen que quieres mostrar despus de que el usuario haya hecho clic en la imagen.

En Sobre mientras imagen abajo, pones la imagen que quieres mostrar cuando el usuario mueva el puntero sobre el
botn y ste estaba mostrando la imagen asignada en Imagen abajo.

De esta forma, si asignas imgenes distintas puedes saber cul es el ltimo botn que ha sido pulsado (el que tiene
Imagen abajo).

Aqu tienes un ejemplo de barra de navegacin. Para su creacin se han utilizado las mismas imgenes para todos
los botones, pero como puedes ver, en el botn del medio aparece inicialmente una imagen diferente de la de los
otros dos. Esto se debe a que la opcin Mostrar "Imagen abajo" inicialmente estaba activa para este botn. Sita el
puntero sobre los distintos botones, y pulsa sobre alguno, para ver qu es lo que ocurre.





El que existan cuatro imgenes diferentes sirve para identificar cual de los vnculos est activo, cosa que con un
simple rollover no puede hacerse.

A travs de la opcin Insertar es posible especificar si los botones de la barra de navegacin van a aparecer de forma
horizontal o vertical dentro de la pgina.



? TABLAS ?

Barra de Navegacin:

En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas,
insertar filas o columnas y cambiar el tamao del borde.

Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas es posible
distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas
seran imposibles de realizar.

Hoy en da, la mayora de las pginas web se basan en tablas, ya que resultan de gran utilidad al mejorar
notablemente las opciones de diseo.

Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuacin tienes un
ejemplo de tabla.









Insertar una Tabla:

Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla.

En la nueva ventana habr que especificar el nmero de Filas y Columnas que tendr la tabla, as como el Ancho.

El Ancho puede ser definido como Pxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en
Pxeles es siempre el mismo, independientemente del tamao de la ventana del navegador en la que se visualice la
pgina, en cambio, el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la pgina y se
ajustar al tamao de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes,
aprovechen todo el ancho de pantalla.

Grosor del Borde indica el grosor del borde de la tabla en pxeles, por defecto se le asigna uno (1).
Relleno de celda indica la distancia entre el contenido de las
celdas y los bordes de stas.
Espacio entre celdas indica la distancia entre las celdas de la
tabla.

Tambin se puede establecer si se quiere un encabezado para
la tabla es recomendable utilizar encabezados en el caso de que
los usuarios utilicen lectores de pantalla. Los lectores de pantalla
leen los encabezados de tabla y ayudan a los usuarios de los
mismos a mantener un seguimiento de la informacin de la
tabla.

Si queremos incluir un ttulo, lo indicamos en Texto, el ttulo
aparecer fuera de la tabla.

En alinear texto indicamos dnde queremos alinear el ttulo con
respecto a la tabla.

En Resumen: indicamos una descripcin de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto
no aparece en el navegador del usuario.
Rellenar las Celdas:

Las celdas son cada uno de los recuadros que forman una tabla, resultan de la interseccin entre una fila y una
columna.







imagen y texto

COLUM
NA

Texto dentro de
una celda

CELDA
FILA

Para poder insertar algn elemento en una celda, ya sea texto o imgenes, simplemente hay que situar el cursor
previamente dentro de la celda deseada.

Seleccionar elementos de una Tabla:

Existen varias formas de seleccionar una tabla. Una de ellas es a travs del men Modificar estando el cursor en la
tabla, o desplegando el men contextual de la tabla al pulsar con el botn derecho sobre ella. En ambos casos
aparece la opcin Tabla, a travs de la cual se puede elegir la opcin Seleccionar tabla.










Tambin es posible seleccionar una tabla pulsando con el ratn sobre el borde que la rodea, o pulsando sobre la
etiqueta <table> que aparece en la barra de estado de la ventana de documento.

Como novedad muy til a la hora de trabajar con tablas, Dreamweaver MX 2004 incorpora la opcin Anchos de
tabla. Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte de la tabla, Dreamweaver
muestra en una zona verde el ancho de la tabla y de cada columna. Junto a los anchos se encuentran unos men
desplegables (men de encabezado de la tabla y men de encabezado de la columna). Estos mens permiten
acceder rpidamente a determinados comandos relacionados con la tabla.










Si tienes el cursor en la tabla y no te aparece esa zona verde puedes activar su visualizacin seleccionando la opcin
Anchos de tablas del men Tabla o tambin desplegando de la barra de mens, el men Ver, Ayudas visuales,
Anchos de tabla. De la misma forma se desactiva su visualizacin.

Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene un ancho especificado, si aparecen
dos nmeros, el primer nmero corresponde al ancho especificado en las propiedades de la tabla o columna y el
segundo nmero es el ancho el ancho visual que aparece en la vista de diseo, por ejemplo en la tabla anterior la
primera columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139 pxeles pero al contener una
imagen que necesita ms espacio, la columna ocupar realmente 142 pxeles (ancho visual de la columna tal como
aparece en la pantalla).

Cuando ocurren estas diferencias podemos hacer que en el cdigo
(propiedades) se cambie el ancho por el real, para ello slo tenemos que
seleccionar la opcin Igualar todos los anchos del men desplegable de
encabezado de tabla.

En este men vemos que tambin tenemos la opcin Seleccionar tabla.

No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar filas, columnas o celdas.

Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes las distintas formas y elijas la
que ms te gusta. Estas son las formas de seleccin:

Puedes utilizar la opcin Seleccionar columna del men de encabezado de columna (zona verde de
anchos) esto slo es vlido para seleccionar una columna.
Manteniendo pulsado y arrastrando el ratn hasta seleccionar la columnas o filas completamente.

Tambin puede hacerse situando el cursor junto al borde superior o izquierdo de la columna o fila
respectivamente, de modo que el cursor cambia a la forma de una flecha negra. Al hacer clic se selecciona la
columna o fila a la que apunta dicha flecha.

Para seleccionar una fila posicionar el cursor en cualquier sitio de la fila y sobre la etiqueta <tr> de la barra de
estado o sobre la etiqueta <td> para seleccionar la columna.

Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratn mientras se arrastra sobre las
celdas deseadas.

Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener pulsada la tecla Control mientras
se hace clic sobre las celdas.


Formato de Tabla:

Las propiedades de la tabla se especifican a travs de su inspector de propiedades.





A travs del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al
mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al
centro o a la derecha), el color de fondo o de borde de la tabla, o la imagen de fondo.

Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir
especificar otros valores.







La parte superior del inspector de propiedades en este caso sirve para especificar las propiedades del texto que se
insertar dentro de la celda (o celdas) seleccionada.

La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo
(diferentes de los especificados para la tabla global), el color del borde de la celda, etc.

Dos opciones que posiblemente necesites utilizar con frecuencia sern Horiz y Vert, que definen la alineacin del
contenido de la celda de forma horizontal y vertical respectivamente.

Cambiar tamao de Tabla y Celdas:

Como ya sabes, el Ancho de una tabla puede ser definido como Pxeles o como Porcentaje. El tamao de la tabla a
travs del inspector de propiedades estar especificado por los valores de An (anchura) y Al (altura). Normalmente
solo se especifica la anchura, no la altura.







Los valores An y Al de una celda siempre estn en Pxeles. No es necesario especificar ninguno de estos dos valores
para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamao, y no que se ajusten al
contenido o al tamao de la ventana.
No solo puede establecerse el tamao de las tablas y de las celdas a travs del inspector de propiedades. Tambin es
posible hacerlo manteniendo pulsado el ratn sobre alguno de los bordes, arrastrndolo hacia la posicin deseada.


Aadir y Eliminar Filas y Columnas:

Existen varias formas de aadir y eliminar filas y columnas a una tabla.

Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el men
contextual de la tabla al pulsar con el botn derecho sobre ella, o bien abrir el men Modificar. En ambos casos
aparece la opcin Tabla.

Segn las celdas seleccionadas, algunas de las opciones de Tabla se podrn utilizar mientras que otras no.

Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna. La fila se
inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.












Tambin tenemos una opcin ms completa, la opcin Insertar filas o columnas. Al seleccionarla aparece una
nueva ventana, donde es posible determinar si lo que se insertarn sern filas o columnas, el nmero de ellas que se
insertar, y la posicin donde se insertarn.












Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opcin
Eliminar fila o Eliminar columna del men Tabla.














Tambin se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr).

Anidar, Dividir y Combinar Celdas:

Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas.

A continuacin tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda de una tabla se ha insertado
otra tabla.





Para anidar tablas slo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla e insertarla
como ya hemos visto.

Combinar celdas consiste en convertir 2 o ms celdas en una sola por lo que dejar de haber borde de
separacin entre una celda y otra ya que sern una sola. Esto nos puede servir por ejemplo para utilizar la primera fila
para escribir el ttulo de la tabla. En este caso habra que combinar todas las celdas de la primera fila en una sola

Mientras que dividir celdas consiste en partir en dos una celda.

Una de las formas de dividir y combinar celdas es a travs del inspector de propiedades.






Si se seleccionan varias celdas pueden combinarse pulsando sobre el botn del inspector de propiedades (lo
encontrars en la parte inferior izquierda del panel Propiedades, o pulsando sobre la opcin Combinar celdas de la
opcin Tabla, que como ya has visto puedes dirigirte a ella a travs del men contextual de la tabla y a travs del
men Modificar.

Tienes que tener en cuenta que slo es posible combinar celdas contiguas, cuya combinacin pueda dar como
resultado otra celda, es decir, que su combinacin d como resultado un recuadro. Por ejemplo, en la siguiente tabla
no podran combinarse las celdas 1 y 4, ni las celdas 1, 2 y 3, porque dichas combinaciones no dan como resultado
una celda.
1 2
3 4

Para dividir una celda hay que pulsar sobre el botn del inspector de propiedades, o sobre la opcin Dividir
celda de la opcin Tabla.

En ambos casos, aparece una ventana como sta, en la que hay que especificar si la celda se va a dividir en filas o
columnas, y el nmero de stas.



Modos de Tabla:

A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de visualizacin. Nosotros hemos
trabajado en todo el tema con el modo estndar, y vamos a seguir trabajando con el, pero se puede pasar a los otros
modos a travs del men Ver opcin Modo de tabla. Dentro de esta opcin podemos elegir entre Modo estndar,
Modo de tablas expandidas, o modo de diseo.










El Modo de diseo se utiliza para dibujar pginas con un diseo determinado, basndose en tablas. Utilizando esta
vista, las tablas no han de insertarse obligatoriamente en lneas de texto, como hemos hecho hasta el momento, sino
que es posible insertarlas en cualquier punto de la pgina, y Dreamweaver se encargar de rellenar el espacio vaco,
para que sea posible que la tabla aparezca en esa posicin.

El Modo de tablas expandidas aade temporalmente relleno y espaciado de celda a las tablas de un documento y
aumenta los bordes de las tablas para facilitar la edicin. Este modo se puede utilizar para seleccionar elementos de las
tablas o colocar el punto de insercin de forma precisa pero en este modo no vemos la pgina como quedar
exactamente.



` MARCOS `

Vamos a ver qu son los marcos y para qu se utilizan. Tambin veremos cmo insertar un marco sencillo en una
pgina, y cmo trabajar con l.

Los marcos o frames sirven para distribuir mejor los datos de las
pginas, ya que permiten mantener fijas algunas partes, como pueden
ser el logotipo y la barra de navegacin, mientras que otras s pueden
cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin
la apariencia.

Cada uno de los marcos de una pgina, contiene un documento HTML
individual. Por ejemplo, en la imagen de la derecha puedes ver una
pgina con dos marcos. El marco izquierdo contiene el documento
menu.htm y el derecho el documento perros.htm. Para poder
visualizar la pgina de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es a pgina
que contiene los marcos agrupados.

Es posible editar los documentos contenidos en los marcos desde la pgina que contiene el grupo de marcos. Esto
facilita el trabajo, ya que es ms fcil hacerse una idea de cmo quedar la pgina al final, cosa que no es posible si
se editan individualmente cada uno de los documentos que contiene el marco.

El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no vamos a
profundizar mucho en el tema, y veremos solamente algunos conceptos bsicos y ejemplos sencillos.


Crear Marcos:

Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.

Para crear un marco, primero hay que abrir algn documento. Puede ser uno nuevo o uno ya existente.

Despus, dirigirse al men Insertar, HTML, Marcos. A travs de esta opcin puede elegirse el tipo de marco que va a
crearse.

Vamos a ver el marco a la Izquierda.

Si pulsamos sobre Izquierda se crear un nuevo marco a la izquierda del documento actual.











Como puedes ver en la imagen, aparece una lnea que divide el documento en dos.
El documento de partida era uno nuevo.

En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el
que contiene el grupo de marcos. El de la derecha es el documento que tenamos
inicialmente, que est en el marco conocido como marco padre (MainFrame).
Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre
la lnea que separa los marcos. Esto solo es posible mientras dicho documento no se
haya guardado.


Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vaco
aparecer a la derecha del documento original.

En esta imagen puedes ver un ejemplo de marco a la derecha.

Sobre un documento ya existente, menu.htm, se ha insertado un marco a la derecha.

Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la derecha, y el que contiene el
grupo de marcos. En este caso, el documento que tenamos inicialmente es el de la izquierda, mientras que antes era
el de la derecha. Por ello, en este caso el marco padre ser el de la izquierda.

El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto
de marcos.


Seleccionar Marcos:

Para seleccionar los marcos del documento es necesario dirigirse al panel
Marcos, que puede abrirse a travs del men Ventana. Si la opcin
Marcos no te aparece directamente en este men, posiblemente est dentro
de la opcin Otros. Tambin puedes abrir el panel Marcos pulsando la
combinacin de teclas Mays+F2.

En el panel Marcos aparecen los marcos que contiene el documento
de marcos, y se puede pasar de uno a otro pulsando sobre ellos en el panel.
Tambin puede seleccionarse la pgina de marcos pulsando sobre el
borde que rodea a los marcos (el que aparece ms grueso y en relieve en
la imagen).

No es necesario seleccionar los marcos para editar los documentos que stos contengan.

Si es necesario seleccionar los marcos para especificar las propiedades especficas de cada uno de ellos.


Guardar:

Todos los documentos que contienen marcos tienen que tener una pgina en cada uno de ellos. Es por esto que al
crear algn marco, se cargan pginas nuevas por defecto en cada uno de ellos, a excepcin del marco que contiene
la pgina original.
Estas pginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya veremos ms adelante.

Es necesario guardar la pgina que contiene el grupo de marcos, as como cada una de las pginas que estn
incluidas en sus marcos.

No es conveniente guardar la primera vez los marcos con la opcin guardar todo ya que podemos
equivocarnos al dar los nombres a los nuevos documentos.

Es preferible guardar cada documento uno por uno, a no ser que todos los marcos contengan alguna pgina ya
existente, ya que en ese caso el nico documento al que habr que dar nombre ser al que contiene el grupo de
marcos.

Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo previamente.
Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor en ellos antes de pulsar sobre
guardar.



Configurar Marcos:

Una vez seleccionado un marco a travs del panel Marcos, pueden establecerse sus propiedades a travs del
inspector de propiedades.









Cada marco tiene asignado un nombre, que puede cambiarse a travs de Nombre del marco. El nombre no puede
contener espacios en blanco.

En Origen aparece el nombre del documento HTML que est contenido en el marco.

En Bordes puede elegirse si aparecer o no una lnea separando el marco del resto de marcos. En el caso de que se
muestre el borde, se puede especificar un color para ste a travs de Color borde. Tambin es posible establecer un
grosor para el borde a travs de Ancho.

Desplaz. indica si aparecern o no las barras de desplazamiento cuando el documento del marco no pueda
visualizarse completamente.

Si la opcin Mismo tamao est activa, indica que los usuarios no podrn variar las medidas del marco desde el
navegador.

El Ancho del margen y el Alto del margen indican la separacin que habr entre el contenido del marco y sus
bordes izquierdo-derecho y superior-inferior.

Si lo seleccionado es todo el conjunto de marcos (la pgina de marcos), el inspector de propiedades es algo
diferente.









En Bordes puede elegirse si aparecer o no una lnea separando los marcos entre s y puede especificarse un color
para este a travs de Color borde. Tambin es posible establecer un grosor para el borde a travs de Ancho.

El campo Columna (o Fila dependiendo del marco elegido en Seleccin Fila Col.) sirve para especificar el tamao
del marco, que puede ser en Pxeles, Porcentaje (de la ventana) o Relativo (proporcional al resto de marcos).

Normalmente utilizars dos marcos, uno de ellos con tamao en Pxeles, que ser el que contenga la barra de
navegacin, y el otro marco con tamao Relativo, para que se ajuste a la ventana del navegante.

Contenido del Marco:

Como ya has visto, el contenido de un marco puede establecerse a travs del campo Origen del inspector de
propiedades.






Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos. El contenido de
alguno de los marcos ha de ser fijo, mientras que el de otros ha de poder variar.

A travs del campo Origen del inspector de propiedades, slo es posible especificar el documento que se cargar
inicialmente en el marco, pero hemos de poder cambiar este documento por otro a travs de vnculos.

Como recordars, en el tema de hipervnculos vimos los posibles destinos de los enlaces. Estos destinos podan ser
_blank, _parent, _self, y _top. Vamos a recordar para que serva cada uno de ellos, ya que ahora que ya sabes
trabajar con marcos te sern ms fciles de entender.

_blank:

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

Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre.
Como ya sabes, el marco padre es el marco en el que se encuentra el documento inicial, sobre el que se han
insertado el resto de marcos.

_self:

Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo.

_top:

Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana
desaparecern al abrir el vnculo en ella.
Adems de estos destinos para los enlaces, tambin aparecern los nombres de los distintos marcos de la pgina.

Podemos aadir todos estos destinos a cualquier elemento de la pgina que contenga algn enlace, ya sea texto, una
imagen, un mapa de imagen, un elemento Flash, etc.

Gracias a todo esto podremos hacer que las barras de navegacin y el resto de enlaces funcionen a nuestro antojo,
cargando unas u otras pginas en alguno de los marcos, en una ventana nueva, en toda la ventana, etc.

Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales.
K FORMULARIOS K

Vamos a ver qu es un formulario, para qu se utiliza, cmo insertar uno, qu elementos puede contener y cmo
pueden validarse los datos introducidos en l.

Los formularios se utilizan para recoger datos de los usuarios, nos pueden
servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer
las opiniones de los usuarios, recibir preguntas, etc.

Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se
arrancar un programa que recibir los datos y har el tratamiento
correspondiente.

Aqu vamos a ver cmo crear el formulario, (insertar campos y botones en el
formulario y validarlos), pero no la parte de tratamiento de los datos, ya que
para ello se necesitan nociones de programacin, ya sea en VBScript, en JavaScript o en otro lenguaje de
programacin, y esto no entra en los objetivos del curso.
A la derecha tienes un ejemplo de formulario.

Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones.

Elementos de Formulario

Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcin Formulario.

A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la
pgina.
Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, as como
algunas de sus propiedades.

Campo de texto y rea de texto:

Permiten aadir un cuadro de texto. El Campo de texto solo permite al usuario escribir una lnea, mientras que el
rea de texto permite escribir varias. Se puede pasar de Campo de texto a rea de texto a travs del inspector de
propiedades.

Tambin es posible definirlo como Contrasea es como el campo de texto pero las letras que va tecleando el usuario
se sustituyen por un carcter como podrs ver en la imagen siguiente.

A continuacin tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.

Campo de text











rea de texto
A travs del inspector de propiedades es posible asignar tambin el ancho del cuadro de texto, el nmero mximo
de lneas o caracteres, y el valor inicial del cuadro.

Botn:

Es el botn tradicional de Windows. El botn puede tener asignadas tres opciones:Enviar formulario, Restablecer
formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de
los dos anteriores).
Enviar


Tambin es posible cambiar el texto del botn, a travs del campo Etiqueta del inspector de propiedades.

Casilla de verificacin:

Es un cuadrito que se puede activar o desactivar.
Deseo recibir informacin


Puede asignrsele el estado inicial como Activado o como Desactivado.

Botn de opcin:

Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, solo puede
haber uno activado. Cuando se activa uno, automticamente se desactivan los dems.
Superman
Spiderman

Lista/Men:

Una lista o men es un elemento de formulario que lleva asociada una lista de opciones.

--- Elige opcin lista ---

--- Elige opcin men---
Perro
Gato


Los elementos se aaden a travs del botn Valores de lista del inspector de propiedades.

Cuando se trata de un men, solo es posible elegir uno de los elementos, pero si se trata de una lista, a travs de
Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultneamente.

Etiqueta:

Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qu datos ha de
introducir en cada uno de ellos.

Crear Formularios:

Puedes crear formularios a travs del men Insertar, opcin
Formulario.

Una vez creado un formulario, este aparecer en la ventana de
Dreamweaver como un recuadro formado por lneas rojas
discontinuas, similar al de la imagen de la derecha.

Dentro de dicho formulario se podrn insertar los elementos de formulario, que como ya sabes puedes insertar a travs
del men Insertar, opcin Formulario.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una
mejor distribucin de los elementos del formulario, lo que facilita su comprensin y mejora su apariencia.


Validar Formularios:

La validacin de formularios sirve para hacer que Javascript valide el formulario antes de
que se enve el formulario, para que en el caso de que hayan campos del formulario que
sean obligatorios, tengan que rellenarse antes de poder enviarse.


Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se
puede abrir a travs del men Ventana, opcin Comportamientos, o pulsando
Mays+F3.

En el este panel hay que desplegar el botn pulsando sobre l, y en Mostrar eventos para elegir una versin de
las actuales de entre la lista de navegadores. Por ejemplo, puedes elegir el navegador IE 6.0.

Despus de esto, hay que volver a desplegar el botn y pulsar sobre la opcin Validar formulario, debers haber
seleccionado el formulario previamente.

Entonces se mostrar una ventana como la siguiente, donde aparecen todos los elementos del formulario.







Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir.

Puede establecerse como campo a rellenar obligatoriamente, y si su contenido ha de ser numrico, una direccin de
correo electrnico, etc.


Multimedia:

Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo insertar una animacin Flash, un
sonido y un vdeo.

Pelculas Flash:

Las pelculas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la extensin SWF. Es
frecuente verlas en las pginas iniciales de los sitios web, a modo de presentacin hacia los usuarios, aunque se
pueden utilizar para realizar cualquier tipo de animacin.

Estas pelculas pueden crearse mediante el programa Flash de Macromedia, y necesitan que el usuario tenga
instalado el plug-in para poder ser visualizadas.

Las pelculas Flash pueden insertarse en una pgina a travs del men Insertar, Meda, opcin Flash, o pulsando
Ctrl+Alt+F.

Tambin pueden insertarse pulsando sobre la opcin Flash que aparece en la pestaa Comn del panel Insertar,
botn Media.










El inspector de propiedades de las pelculas Flash es prcticamente igual que el de los botones y el texto Flash,
pero existen dos opciones nuevas que hacen referencia a la visualizacin de la pelcula.



La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio.

La otra es la opcin Rep. autom. (reproduccin automtica), que al estar marcada indica que nada ms cargarse la
pgina comenzar a reproducirse la pelcula Flash.

Si esta opcin no estuviera marcada, se mostrara nicamente el primer fotograma de la pelcula.
Interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada por algn comportamiento.

Sonido:

No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen estar escuchando su propia
msica cuando navegan en Internet, por lo que el escuchar tambin sonido en cada pgina que se visita puede
resultar algo molesto.
A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la pgina, puede hacerla ms atractiva.
Muchas de las pginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que
aquellos usuarios que no deseen escuchar el sonido de la pgina puedan desactivarlo.

Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el
MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algn archivo de
audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.
Para insertar un archivo de audio en un documento tienes que dirigirte al men Insertar, Meda, opcin Plug-in.

A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas,
puedes reproducirlo pulsando sobre los controles ( recuerda encender los altavoces, si los tienes).

En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son insertados como plug-in
aparecen representadas dentro de Dreamweaver por una imagen como la de la izquierda.

En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarn los controles de
audio, mediante Al y An.

En el caso de no especificar ningn tamao, se mostrar el tamao por defecto de los controles, como ocurre en el
ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la pgina, pero que no se muestren los
controles de audio, los campos Al y An deben valer cero.

Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores
no pueden cambiarse a travs del inspector de propiedades, pero s a travs del cdigo.

Por ejemplo, el archivo anterior aparece en el cdigo como <embed src=varios/audio.MID></embed>. Pero para
que no se reprodujera automticamente se ha aadido autostart="false", y para que se reprodujera continuamente
se ha aadido loop="true".

La lnea de cdigo del archivo de audio a quedado del siguiente modo:

<embed src="varios/audio.MID" autostart="false" loop="true"></embed>

Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los controles, es necesario
insertar una serie de comportamientos que se encarguen de esa tarea.

Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles de audio, puedes escribir este
cdigo directamente en la vista Cdigo.

<bgsound src="cancion1.wav" loop="-1">

Insrtalo despues de la etiqueta </title> Con el parmetro loop puedes decidir cuantas veces quieres que se reproduzca,
1, 2, 3 ... (con -1 se reproduce de modo continuo).


* MULTIMEDIA *

Videos:

En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los vdeos
suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
Para insertar un archivo de vdeo en un documento tienes que dirigirte al men Insertar, Meda, opcin Plug-in.

A la derecha tienes un ejemplo de un archivo de vdeo, para el que se muestran los controles de vdeo. Puedes
reproducirlo pulsando sobre los controles.

El inspector de propiedades para los archivos de vdeo insertados de esta forma es el mismo que el de los
archivos de audio, ya que ambos se insertan como Plug-in.





Los vdeos tambin se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos
valores pueden cambiarse a travs del cdigo, del mismo modo que en el caso de los archivos de audio, aadiendo
autostart="false" y loop="true".

Todos los objetos insertados a travs de la opcin Plug-in precisan que el usuario tenga instalado un reproductor o un
plug-in apropiado para reproducirlos. En el campo Origen del inspector de propiedades se establece el archivo
vinculado (el archivo de audio o de vdeo) que ha de reproducirse.

En el caso de que el usuario no tenga instalado ningn plug-in adecuado, puede establecerse en el campo URL plg una pgina en
la que pueda encontrarlo.


Las Plantillas:

En este tema vamos a ver qu son las plantillas, cmo crearlas y cmo basar documentos en ellas.

Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las pginas deben seguir un
formato uniforme.

La mayora de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre estas copias,
modificando simplemente su contenido. Esta es la forma ms sencilla de tener pginas con una estructura basada en
la estructura de otras ya creadas previamente.

Las plantillas son una especie de copia de la pgina en la que van a estar basadas el resto de pginas del sitio web,
pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que sern fijas, que no podrn ser
modificadas.

No es posible modificar las propiedades de una pgina que est basada en una plantilla, a excepcin del ttulo.
Cuando se desea que existan pginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas
diferentes con los distintos colores, y basar las pginas en una u otra plantilla, segn el color de fondo que se desee
para cada una.

Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las pginas basadas en ella.
Las plantillas son archivos con la extensin DWT que se guardan en el sitio web, dentro de una carpeta llamada
Templates.

Crear Plantillas:

Las plantillas pueden crearse desde cero, o a partir de una pgina ya existente.

Una forma de crear una plantilla desde cero es a travs del panel Activos.

El panel Activos se puede abrir a travs del men Ventana, opcin Activos.
Tambin pulsando F11.

Una vez abierto el panel hay que seleccionar el botn , para poder trabajar
con las plantillas.

Los botones inferiores del panel Activos Plantillas son similares a los del
panel Estilos CSS.

El nico botn diferente es el primero, que en este caso sirve para actualizar la lista, el resto permiten crear una nueva
plantilla, editar una plantilla seleccionada en la lista, o eliminarla.

Para crear una nueva plantilla hay que pulsar sobre el botn ( este botn no est activado, pulsa con el botn
derecho del ratn y elige Nueva Plantilla).

Cuando se pulsa ese botn aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el
Nombre pulsando previamente sobre l.

Para modificar una plantilla la seleccionamos de la lista y pulsamos el botn.

Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botn.

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automticamente.

Para crear una plantilla a partir de un archivo existente es
necesario abrir dicho archivo, y despus guardarlo como plantilla a
travs del men Archivo, opcin Guardar como plantilla.

Cuando se pulsa dicha opcin, aparece una ventana como la de la
derecha.
En ella es necesario especificar el nombre con el que va a ser
guardada la plantilla, a travs del campo Guardar como, y elegir,
de entre la lista de sitios, el Sitio en el que se va a guardar.

Establecer regiones editables en una Plantilla:

Todos los elementos de una plantilla estn bloqueados por defecto, no se pueden modificar.

Es necesario establecer las zonas que s podrn ser editadas en las pginas que se basen en dicha plantilla.

Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a travs del panel Activos,
pulsando dos veces sobre ella , o estando seleccionada pulsando sobre el botn como ya hemos visto.

Una vez abierta la plantilla es posible establecer sus propiedades a travs de Propiedades de la pgina.

Como recordars, para abrir esta ventana puedes:

Pulsar la combinacin de teclas Ctrl+J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Pulsar con el botn derecho sobre el documento abierto en Dreamweaver, y en el men contextual que
aparece seleccionar la opcin Propiedades de la pgina.

Para insertar una regin editable hay que situar el ntero en
el lugar en el que se desea insertar, y despus dirigirse al
men Insertar, Objetos de plantilla, opcin Regin
editable, o pulsar la combinacin de teclas
Ctrl+Alt+V.
pu
p
obje
p
odos los objetos que se encuentren fuera de estas zonas editables aparecern tambin en las pginas, pero no
n este caso, la imagen con el logotipo de aulaclic aparecera en todas las pginas que se basaran en esta plantilla,

En la nueva ventana hay que establecer un Nombre
para la regin editable.

Dentro de la plantilla no pueden existir dos regiones editables con el
mismo nombre.

Posteriormente puede modificarse el nombre a travs del inspector de
propiedades de la regin editable.

Las zonas editables aparecen representadas en Dreamweaver como un
recuadro con una etiqueta de color turquesa. En la etiqueta aparece el
nombre de la zona editable.

Dentro del recuadro es posible insertar objetos, que aparecern or defecto
en aquellos documentos que se basen en la plantilla. Estos tos, al
estar dentro de la zona editable, podrn ser modificados en las ginas.

T
podrn ser modificados.

E
mientras que todo lo que insertramos dentro de la zona editable Formulario Correo Electrnico podra ser
modificado.


O LAS PLANTILLAS O

asar pginas en una Plantilla:
l uso de las plantillas puede resultar un poco complicado al principio. Vamos a ver cmo basar una pgina vaca en
na vez abierto el documento, hay que dirigirse al men Modificar, Plantillas, opcin Aplicar plantilla a pgina.
s preferible que antes de hacer esto nos
abierto
g
espus de pulsar sobre la opcin Aplicar plantilla
s recomendable activar la casilla Actualizar pgina cuando cambie la plantilla, para que la pgina se actualice
pesar de estar trabajando sobre un documento vaco, es posible que al aplicar la plantilla aparezcan nombres de
n ella hay que establecer ento vaco con el nombre de
del documento vaco que no coincida con el nombre de ninguna regin de la plantilla

A travs de Mover contenido a la nueva regin se ha seleccionado la regin head
espus de establecer las correspondencias necesarias, se carga la plantilla en el
n este caso no es posible cambiar el color de fondo, que est definido en la

B

E
una plantilla, ya que por el hecho de estar vaca resulta ms sencillo.

U

E
aseguremos de que el sitio que se encuentra
en Dreamweaver es el mismo en el que vamos a uardar
el documento, y el mismo en el que se encuentra la plantilla
en la que queremos basarlo.

D
a pgina aparece una ventana como la de la derecha,
en la que hay que seleccionar una de las plantillas de la
lista de Plantillas del sitio.

E
automticamente en el caso de modificar la plantilla en la que se basa.

A
regiones no coincidentes entre el documento en blanco y la plantilla. En ese caso se muestra una ventana como la
siguiente.







E una correspondencia entre el nombre de la regin del docum
alguna regin de la plantilla.
En este ejemplo, la regin
era la regin Document head.
de la plantilla, para establecer as la correspondencia que se necesitaba.

D
documento vaco.

E
plantilla, pero s es posible cambiar todos los elementos de la tabla y el formulario,
ya que se encuentran dentro de una zona definida en la plantilla como editable.
En este caso se podra cambiar el estilo del texto, el color de las celdas, combinarlas, etc.
ara que una pgina deje de estar basada en una plantilla hay que dirigirse al men Modificar, Plantillas, opcin
uando se separa una pgina de una plantilla, el contenido de la pgina sigue siendo el mismo que el que tena cuando
c

P
Separar de plantilla.

C
an estaba basada en la plantilla, pero sin las restricciones establecidas por la plantilla.


CAPAS c

amos a ver algunas de las caractersticas bsicas sobre las capas, para luego poder trabajar con ellas y aplicarles
as capas no son ms que unos recuadros, que pueden situarse en cualquier parte de la pgina, en los que podemos
as capas pueden moverse de una posicin a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el
lsando sobre los recuadros negros, y arrastrndolos hasta conseguir el
entro del recuadro de la capa es posible insertar texto, tablas, imgenes, animaciones flash, y todos los elementos
a capa no solo aparece representada por el recuadro anterior, sino que tambin aparece la imagen en el documento,
ste icono sirve para seleccionar la capa al pulsar sobre l, y al eliminarlo se elimina tambin la capa.
sertar una Capa:
as capas pueden insertarse en una pgina a travs del men Insertar, opcin Objeto de diseo, Capa.
na vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero.
na capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono correspondiente, pero esto
V
algn comportamiento.

L
insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre s, lo que proporciona grandes posibilidades
de diseo.

L
ratn, arrastrndola hacia la nueva posicin.
Tambin pueden ser redimensionadas pu
tamao deseado.






D
que puede contener un documento HTML.

L
cuando est abierto en Dreamweaver.

E


In

L

U

U
no resulta til cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una
imagen igual a esta, y no es fcil seleccionar la deseada a la primera.

Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a travs de la pestaa Capas del
panel Diseo, que puede abrirse a travs del men Ventana opcin Capas. Si la opcin Capas no te aparece
directamente en este men, posiblemente est dentro de la opcin Otros. Tambin puedes abrir el panel pulsando F2.

En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y para seleccionar una de ellas
simplemente hay que pulsar sobre el nombre en el panel.













Formato de una Capa:

Las propiedades de la capa se especifican a travs de su inspector de propiedades.







ID de capa es el nombre de la capa. Tambin puede ser cambiado a travs del panel Capas, haciendo doble clic
sobre l.

Iz y Sup indican la distancia en pixels que hay entre los lmites izquierdo y superior del documento y la capa.

An y Al indican la anchura y la altura de la capa.

ndice Z es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse a travs del panel
Capas. Una capa ser solapada por aquellas capas cuyo ndice Z sea mayor que el suyo.

Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:

Default (visibilidad segn el navegador),

Inherit (se muestra la capa mientras la pgina a la que pertenece tambin se est mostrando),

Visible (muestra la capa, aunque la pgina no se est viendo) y

Hidden (la capa est oculta).

La visibilidad tambin puede cambiarse a travs del panel Capas, pulsando sobre la imagen del ojo. El ojo abierto
indica Visible, y el ojo cerrado indica Hidden.

A travs de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.

Desb. (Desbordamiento) controla cmo aparecen las capas en un navegador cuando el contenido excede el tamao
especificado de la capa.

Visible indica que el contenido adicional aparece en la capa. La capa se ampla para darle cabida.

Hidden (oculto) especifica que el contenido adicional no se mostrar en el navegador.

Scroll (desplazamiento) especifica que el navegador deber aadir barras de desplazamiento a la capa tanto
si se necesitan como si no.

Auto (automtico) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es
decir, cuando el contenido de la capa supere sus lmites).



































RETROALIMENTACIN



INSTRUCCIONES: Coloca en cada uno de los renglones el nombre correspondiente a cada una de las figuras.



________________________ _________________________



________________________ _________________________



________________________ _________________________




_________________________




_________________________




_______________________________







_______________________________________________________________







Si tienes dudas para responder correctamente, te sugiero que vuelvas
a leer este captulo.
BIBLIOGRAFIA


COREL CORPORATION.
MANUAL DE USUARIO COREL DRAW.

LEMAY, LAURA.
HTML 3.0
1 EDICIN, MXICO, EDIT. PRENTICE, may, 1996.

LEMAY, LAURA.
TEACH YOURSELF WEB PUBLISHING WITH HTML 3.0 IN A WEEK.
1 EDICIN, U.S.A., EDIT. SAMS NET, 1996.

MANUAL DE DHTML.

MANUAL DE JAVA.

PRESSMAN, ROGER S.
INGENIERA DEL SOFTWARE, UN ENFOQUE PRCTICO.
3 EDICIN, MXICO, EDIT. Mc GRAW HILL, 1993.

RUMBAUGH, JAMES.
MODELADO Y DISEO ORIENTADO A OBJETOS.
1 EDICIN, ESPAA, EDIT. PRENTICE may, 1996, pp 643

COBURN, FOSTER D., Mc CORMICK, PETER.
GUA OFICIAL DE COREL DRAW 8.
EDIT. OSBORNE, ESPAA, Mc GRAW HILL, 1998.

CORNEJO, ANTONIO.
ARTES GRFICAS CON AUTOEDICIN.
EDIT. Mc GRAW HILL, 1998.

INTERNET.

ELABORO: