Você está na página 1de 75

MANUA DEL PARTICIPANTE

Diseo de pginas web estticas


con
DREAMWEAVER

Facilitadora:

Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

TABLA DE CONTENIDO

Objetivo General......................................................................................................2
Introduccin.............................................................................................................2
Unidad I. Generalidades de Dreamweaver..............................................................2
Prctica 1. Entorno de Trabajo.............................................................................2
Prctica 2. Mens.................................................................................................2
Prctica 3. Bosquejo del sitio Web.......................................................................2
Prctica 4. Creacin de un sitio............................................................................2
Prctica 5. Creacin del primer documento.........................................................2
Unidad II. Enlazar e ilustrar una pgina..................................................................2
Prctica 1. Vnculos.............................................................................................2
Prctica 2. Imgenes............................................................................................2
Prctica 3. Imagen de sustitucin.........................................................................2
Prctica 4. Insertar Texto de Flash.......................................................................2
Prctica 5.- Botn de flash...................................................................................2
Unidad III. Formas de ordenar la informacin........................................................2
Prctica 1. Tablas.................................................................................................2
Prctica 2. Aadir y eliminar filas y columnas....................................................2
Prctica 3. Anidar, dividir y combinar celdas......................................................2
Prctica 4. Marcos................................................................................................2
Unidad IV. Creacin de Formularios y Plantillas....................................................2
Prctica 1. Formularios........................................................................................2
Prctica 2. Plantillas.............................................................................................2
Unidad V. Animaciones en una pgina web.............................................................2
Prctica 1. Capas..................................................................................................2
Prctica 2. Cubo mgico......................................................................................2
Conclusiones............................................................................................................2
Bibliografa..............................................................................................................2

2
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Objetivo General

El
participante
utilizar
las
herramientas de Dreamweaver para
disear pginas Web estticas.

3
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Introduccin
El programa DreamWeaver es una herramienta de desarrollo profesional de
sitios web, cuenta con caractersticas novedosas y ofrece un panorama amplio
de opciones de diseo que son indispensables para los diseadores expertos y
principiantes de web.
Podemos emplear DreamWeaver para crear sitios de web en forma visual, con
una interfaz grfica de fcil manejo que nos permite visualizar los cambios que
efectuamos al mismo tiempo que los realizamos.
Con Dreamweaver podemos crear pginas HTML sin tener que preocuparnos
por el cdigo HTML, recordar todos los "tags" necesarios para componer
nuestra pgina o tener que pre-visualizar en nuestra cabeza cual ser el
resultado compositivo del documento final. De esta manera, crear un
documento HTML se convierte en una tarea menos parecida a programar y
ms parecida a maquetar, tal y como se hara en un programa de maquetacin
tradicional como puede ser QuarkExpress o Pagemaker. En resumen,
podramos decir que Dreamweaver es un programa de "maquetacin" de
pginas web, salvando las lgicas distancias que lo separan de un programa
de maquetacin normal.
Con el fin de facilitar aun ms el proceso de creacin de una pgina web,
Dreamweaver aade junto a las opciones que permiten formatear un
documento HTML otras opciones que pueden ser de gran utilidad, como
funciones javascripts predefinidas (behaviors), opciones de HTML dinmico. As
mismo, aade otras herramientas que potencian la productividad, como son la
creacin de plantillas o "templates" que permiten mantener y modificar la
apariencia completa de un sitio modificando un solo documento, la posibilidad
de convertir en smbolos elementos que se repiten en muchas pginas del sitio
de manera que cualquier cambio en este smbolo actualice dicho elemento en
todas las pginas del sitio. Por otro lado, alrededor de estas herramientas de
diseo y composicin se han ido aadiendo otras opciones que permiten
gestionar sitios completos, como puede ser el cliente FTP incluido en
Dreamweaver.
Como ver, un editor de pginas web como Dreamweaver ha dejado de ser
una herramienta de composicin para convertirse en una herramienta completa
para la gestin y desarrollo de sitios web completos.
Los temas de Dreamweaver que se vern en este manual, son los siguientes:
Generalidades de Dreamweaver. En esta unidad los participantes conocern
que es Dreamweaver y cules son los requerimientos para instalar el
programa, as como las herramientas bsicas de dicho software.

4
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Enlazar e ilustrar una pgina. El participante conocer y crear varios tipos


de enlaces con diferentes destinos y formatos, as como insertar imgenes
con la finalidad de ilustrar una pgina web.
Formas de ordenar la informacin. El participante insertar tablas y marcos
con la finalidad de ordenar la informacin dentro de una pgina web.
Creacin de Formularios y Plantillas. Aqu se aprender a insertar los
elementos bsicos de un formulario, as como la utilidad de las plantillas para la
creacin de pginas web.
Animaciones en una pgina web. Este tema tiene la finalidad de que el
participante inserte capas y objetos multimedia para generar animaciones en
una pgina web.

5
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Unidad I. Generalidades de Dreamweaver


Prctica 1. Entorno de Trabajo.
Escriba el nombre correspondiente a lo que indica la flecha.

6
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Prctica 2. Mens.
Escriba sobre la lnea, el nombre de los botones con que se activan los siguientes mens.

________________________________
7
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Prctica 3. Bosquejo del sitio Web.

Entrar a Dreamweaver.
Crear un sitio que se llame Ejercicios en la unidad C:\Mis documentos.
En la ventana Administrador de sitios seleccionar el botn Nuevo.

Seleccionar la opcin Sitio.


Seleccionar la ficha Avanzadas.

En la categora datos locales ingresa los siguientes datos:


o Nombre del sitio.
o Nombre y ubicacin de la carpeta raz local.
o Nombre y ubicacin de la carpeta de imgenes.
o Activa la casilla cach.

8
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Debe crearse las carpetas EJERCICIOS y la de imgenes.

En la categora Mapa de sitio seleccionar y agregar el nombre de la


pgina principal como se muestra a continuacin:

Dar un clic en el botn Aceptar

Mostrar el siguiente mensaje

Dar clic en Aceptar y se mostrar el sitio creado

Dar clic en el botn Listo y aumentar la ventana para crear un nuevo


documento.
Cerrar Dreamweaver completamente.
Entrar ahora a Dreamweaver y abrir el sitio que se cre anteriormente.

9
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Seleccionar Dreamweaver en Inicio, Todos los programas, Macromedia,


Macromedia Dreamweaver 8.
En la ventana que se muestra seleccionar el sitio y dar un clic en el
botn listo.

A partir de este momento todos los archivos que se utilicen se guardarn en


este sitio.

10
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Prctica 4. Creacin de un sitio


Lo primero que se debe hacer, es crear una carpeta que ser el sitio donde
residan nuestras pginas y todos los archivos que se vayan aadiendo. Es
recomendable que esta carpeta se encuentre directamente en disco duro C.
Seleccionar Sitio, en la barra de mens, y se desplegar el siguiente men:

Elegir Administrador de sitios y se abre otra ventana:

Seleccionar el botn nuevo para crear un sitio, en la ventana que se muestra


dar clic en la opcin Sitio.

Seleccionar la ficha avanzadas.

11
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Dar doble clic en el icono

de la carpeta raz local. Se desplegar la ventana

de bsqueda de directorios. Elegir C y hacer clic en el icono


nueva carpeta.

para crear una

12
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Aparecer la siguiente ventana:

Cambiar el nombre de la Nueva carpeta y se le pondr, por ejemplo, mi_primer


pagina y se le dar

Con toda seguridad se tendr que volver a repetir el proceso anterior pues se
habr vuelto a la ventana Definicin del sitio.

Dar clic al icono

y seleccionar la carpeta que se acaba de crear, clic en

aparecer la siguiente ventana.


Clic en
y se volver a la ventana de Definicin del sitio pero ahora
ya con la carpeta creada y seleccionada como Carpeta raz local:
13
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Clic a
y se volver a la ventana de Definicin del sitio pero ahora ya
con la carpeta creada y seleccionada como Carpeta raz local:

14
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Poner el nombre al sitio. Por ejemplo EJERCICIOS. Lo dems se dejar como


est y clic en Aceptar.
Volver a la ventana mltiple del Sitio:
Seleccionar la categora mapa de diseo de sitio.
Teclear el nombre del archivo de la pgina principal.
Por ejemplo, index.html.

Por ltimo clic en el botn aceptar y se mostrar la siguiente pantalla

15
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Observar el lateral inferior derecho:

Aparece abierto el sitio que se acaba de crear


que est alijado
en una carpeta denominada
EJERCICIOSDW que est en el disco duro.

16
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Prctica 5. Creacin del primer documento.


En la ventana Mltiple ya se ha creado un primer archivo al que Dreamweaver
llama Untitled-1. Observa la pestaa inferior izquierda del espacio mayor vaco
. Por otro lado, el documento (no el archivo) lo que ser la pgina
tampoco tiene ttulo
. Lo primero que se debe hacer
es guardar el documento. Como va a ser nuestro primer documento, vamos a
guardarlo con el nombre especial de index. Dreamweaver le aadir la
extensin .htm de pgina Web. Es recomendable que se le de la extensin
html.
Se le dar clic en Archivo y luego en Guardar como

Aparecer la ventana Guardar como.


Se le pondr el nombre de index.html.

Y se le da guardar.

17
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

En el lateral inferior derecho aparece el archivo dentro de la carpeta del sitio.

y, en la pestaa inferior del documento ya aparece el nuevo nombre


(index.html) que se le ha dado al archivo.
Simplemente se empezar a escribir en el espacio vaco.
Se podr empezar dando la bienvenida a los visitantes. Escribir y pulsar Enter
para saltar a la siguiente lnea.

18
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Para dar formato al texto, disponemos de las herramientas que se desplegan


en el Inspector de propiedades.

Si no se ve este panel es porque est oculto


. Observar que la
flecha est sealando hacia la derecha. Simplemente haciendo clic en l pasas
a la posicin anterior.
Para efectuar los cambios que se desea, previamente seleccionar el texto al
que se quiere hacer referencia.

Por ejemplo, a la primera lnea se le ha aplicado un formato de Encabezado 1.


No se ha modificado el tipo de fuente, ni el tamao (de forma explcita). Se ha
puesto de color rojo y se ha centrado en la lnea.

Ahora se harn cambios en la segunda lnea.

19
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Lo que se realiz en la pgina fue cambiar el tipo de fuente, el tamao, el color


y la alineacin.
Para finalizar, pondremos un ttulo al documento, por ejemplo, Pgina de
Bienvenida.
Se
escribe
directamente
en
la
ventana
Ttulo
Observe cmo ha la barra de ttulo.
En primer lugar aparece el nombre del documento Ejercicios. En segundo
lugar, la carpeta raz, y finalmente el nombre del archivo index. El asterisco que
viene a continuacin nos recuerda que el documento no ha sido guardado
despus de los cambios efectuados. As que se procede a guardar el
documento.

El asterisco habr desaparecido.


Ahora se pondr un color de fondo a la pgina. Para ello se le da clic en
cualquier punto vaco de la pgina con el botn derecho del ratn Y
ELEGIMOS propiedades de la pgina del men contextual.

20
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Aparecer la siguiente ventana:

21
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

De todo lo que se puede hacer aqu, de momento nos quedamos con poner un
color de fondo. Hacer clic en el cuadrito
la paleta de colores.

y aparecer

Se elegir el ms adecuado y vemos su efecto en Aplicar. Cuando se este


convencido, se le dar Aceptar.
La pgina tiene ahora este aspecto:

Dar clic en Archivo, Guardar de manera frecuente para conservar los cambios.
Va siendo hora de comprobar la pgina con el navegador.
Una primera forma de hacerlo consiste en darle a la tecla de funciones del
teclado <F12>. Se abrir el navegador que se tenga configurado como
predeterminado y se ver el aspecto de la pgina.
22
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Otra forma conveniente es ver la pgina desde fuera de Dreamweaver. Para


ello ir al Explorador de Windows o al disco duro C y buscar la carpeta Mis
documentos, la carpeta EJERCICIOS y el archivo que contiene la primer
pgina, index.html.

En Mis documentos vemos la carpeta de EJERCICIOS. Hacemos doble clic


sobre ella:

23
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Hacer doble clic sobre el archivo y visualizaremos nuestra pgina con el


navegador que se tenga predeterminado. En este caso, como se ve por el
icono, es el Explorer

24
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Unidad II. Enlazar e ilustrar una pgina


Prctica 1. Vnculos
Seleccionar el elemento que va a servir para enlazar (puede ser una palabra,
una frase, una imagen o un fragmento de imagen).
Una vez seleccionado dar clic en el icono
panel de propiedades.

de la seccin Vnculo dentro del

Por ejemplo, hacer clic en la frase ir a la pgina anterior sea un vnculo con la
pgina anterior de este curso de Dreamweaver. Seleccionar la frase

Abrir el panel propiedades, si no est abierto.


Abrir el panel de Propiedades, si no est abierto.

Hacer clic en el icono

de

y se abrir.

Seleccionar el archivo correspondiente, en este caso es uno, y hacer clic en


Aceptar.
25
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

El enlace habr quedado marcado de otro color y subrayado aunque esto se


puede modificar:

Cuando se pruebe con el navegador se comprobar que al dar clic en la frase


se va al documento anterior: index. El documento se abrir.
Vincular una pgina de Internet ajena a nuestro sitio.
Se har lo mismo: seleccionar el elemento que va a ser el activador del vnculo
y, ahora, escribir en la caja de texto la direccin completa del sitio.
Supongamos que se quiere hacer que esta imagen sea un vnculo a la pgina
de yahoo. Pues bien, se selecciona y escribimos la URL de la pgina
http://yahoo.com.mx en la caja de texto:

como en el caso anterior, se comprobar que funciona oprimiendo la tecla


<F12> y comprobando con el navegador.
Ahora al dar clic en el activador se coloque al principio de la pgina, al final, al
comienzo de un apartado determinado, siempre dentro del mismo documento.
Para ello primeramente hay que hacer marcas en los puntos a los cuales se
requiere que vaya el vnculo.
Realizar vnculos en cada una de las partes de este documento: al comienzo
(apartado 12) y a los apartados 12.1, 12.2, 12.3 y 12.4. para ello se colocarn
con el cursor en el punto en el cual se quiere establecer un denominado punto
de fijacin con nombre.

26
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Se hace con el comienzo: se sita el cursor delante del ttulo del documento
(delante de Vnculos) y clic en la barra de mens Insertar, Anclaje con nombre.

Aparecer un cuadro de dilogo para que introduzca el nombre que se le


quiere dar.

Se escribe Uno y clic en Aceptar.

27
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Aparece este icono


justo en el sitio donde se haba colocado el cursor y
que es el punto al cual se ir cuando activemos el enlace. Este icono no se
visualizar cuando se vea la pgina en el navegador.

Como en el caso anterior, se comprueba que funciona dndole a la tecla <F12>


y comprobando con el navegador.
Vnculo a puntos concretos de otros documentos del mismo sitio.
Los dos tipos de vnculos anteriores se pueden combinar, de tal manera que
podamos ir a partes concretas de otros documentos. En este caso, una vez
definido el anclaje con nombre en el documento correspondiente, se establece
el enlace escribiendo el nombre de la pgina con su extensin .html seguido de
smbolo de nmero y el nombre del anclaje.
Vnculos de correo electrnico
Se puede establecer tambin vnculos de correo electrnico a partir de una
imagen o un texto, de manera muy similar al resto de los hiperenlaces.
Vamos a vincular un nombre (o una expresin o frase cualquiera) con su
direccin de correo electrnico. Una forma de hacerlo es:
Colocar el cursor en el punto en el queramos que est el enlace y darle a
Insertar, Vnculo de correo electrnico:

28
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Aparecer el cuadro de dilogo en el que pondremos el texto que queremos


que sirva como enlace y la direccin de correo electrnico:

ste es el resultado:

Cuando un visitante de la pgina d clic sobre este vnculo se abrir su


programa de correo y podr enviar un mensaje a la persona a cuya direccin
se hayamos vinculado el enlace.
Como en los casos anteriores, se comprobar que funciona dndole clic a la
tecla <F12> y comprobando con el navegador.

29
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Prctica 2. Imgenes
Para insertar una imagen es conveniente tenerla previamente guardada en la
carpeta del sitio. De lo contrario Dreamweaver advertir para que se guarde
una copia en la carpeta correspondiente.
Las imgenes pueden estar sueltas en la carpeta raz junto con los archivos de
cada uno de los documentos o, mucho mejor, en una carpeta especial dentro
del sitio a la que se le llamar Imgenes (nombre de los archivos y carpetas sin
acentos) o cualquier otro nombre que sugiera que, dentro de esa carpeta estn
las imgenes.
Para crear una carpeta dentro de la carpeta raz del sitio, dar un clic derecho
sobre el sitio y seleccionar Nueva carpeta.

Se crear una carpeta con el nombre untitled que habr que cambiar por el que
se desee tenga la carpeta de imgenes:

Por ejemplo, se podr llamar Img.

Se pueden llevar las imgenes a la carpeta por cualquiera de los


procedimientos habituales en Windows. Si por ejemplo, tal como se indicaba al
principio, la imagen no est previamente guarda en la carpeta, Dreamweaver

30
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

va a sugerir que se haga. Supongamos que se quiere insertar una imagen que
se tiene guardada en el Escritorio. La imagen se llama obras.
Seleccionar Insertar de la barra de mens y dar clic en Imagen:

Aparecer la ventana Seleccionar origen de imagen.

Seleccionar Escritorio y dar clic a la imagen: LOGO

31
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Aparecer el mensaje de advertencia diciendo que la imagen no est en la


carpeta raz del sitio.

Le decimos que S y se abrir la ventana Copiar archivo como.

Dar doble clic sobre la carpeta Img. para abrirla.

32
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Dar clic en Guardar. La imagen se guardar en la carpeta Imag y se colocar


en el documento.

Ahora colocar una imagen a fondo de una tabla, o de una celda. Por ejemplo,
en la tabla que se ha creado en el apartado anterior.
Se pone una imagen de fondo a algunas de las celdas. Por ejemplo,
seleccionar la primera celda (colocar el cursor en ella y pulsar <td> en la barra
de

estado).

En

el

panel

de

Propiedades

seleccionar

en

de

Aparecer la ventana Seleccionar origen de imagen. Se busca y se selecciona.

33
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Dar clic en aceptar y la imagen se colocar como fondo de la celda


seleccionada.

Guardar los cambios.

34
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Prctica 3. Imagen de sustitucin


Un rollover o imagen de sustitucin 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.
Para insertar un rollover hay que dirigirse al men Insertar, objetos de imagen,
y en la opcin Imagen de sustitucin. En la nueva ventana hay que especificar
la imagen original y la de sustitucin.

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.

1) Crear una nueva pgina llamada menu.html que tenga las siguientes
caractersticas (las imgenes se habrn copiado previamente a la carpeta)

Realizar el fondo con una imagen que se tenga en la carpeta imgenes.


35
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Color del texto amarillo


Insertar una imagen de sustitucin con otra de las imgenes para que
accedan a la pgina index.html. Centrar la imagen y poner debajo
Acceso a la pgina principal
Insertar dos imgenes de sustitucin para que accedan a las pginas
prueba1.html y prueba2.html. Elegir las 4 imgenes de la carpeta
imgenes y ponerle debajo los textos Acceso a la pgina prueba1 y
Acceso a la pgina prueba2.htm respectivamente.
Guardar la pgina y comprobar que cambian las imgenes en la vista
previa de la pgina.

2) Aadir en las pginas anteriores hipervnculos a los textos que se han


escrito, de forma que se pueda acceder a las pginas index.html,
men.html, prueba1.htm y prueba2.htm tanto desde las imgenes como
desde los textos. Guardar y comprobar que funcionan los enlaces.

36
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Prctica 4. Insertar Texto de Flash


Dar clic en Insertar, Media, Texto Flash, aparecer la siguiente ventana

Se puede elegir elementos como: el tipo de fuente, el tamao, negrita, cursiva,


el tipo de justificacin dentro del botn y el texto que va a tener. Elegir el
archivo con el que se vincula, el destino, si es en ventana nueva o en toda la
pantalla, el color de fondo y el nombre con el que se va a guarda.
Haciendo doble clic sobre el texto se vuelve a la ventana anterior. Tambin
haciendo un solo clic se abre esta ventana

En ella realiza algunos cambios, ver el comportamiento


y, en
todo caso, volver a la pantalla de Insertar texto de Flash dndole clic a

37
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Prctica 5.- Botn de flash.


Para insertar un botn le damos a Insertar > Imgenes interactivas > Botn de
Flash

Aparece la siguiente ventana:

En estilo elegir el botn que se desee. En Muestra se ver el botn elegido.


En Texto del botn escribir lo que se quiere que aparezca en el botn.

38
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Elegir el tipo de fuente y el tamao.


En vnculo escribir la direccin URL completa si es un vnculo externo, o haz
clic en Examinar y elegir el archivo en caso de ser un vnculo a un documento
de la pgina Web.
En destino elegir que se abra en la pantalla completa (_top), en ventana nueva
(_blank).
Elegir el color de fondo que rodear el botn ( a veces el botn no se ve).
Finalmente dejar el nombre por defecto o poner otro. Es importante saber que
los botones tienen que estar en la misma carpeta que el documento. No
pueden estar en carpetas diferentes.
Hacer clic en Aceptar y el botn se habr colocado en el sitio elegido.
Colocar un botn a continuacin de esta lnea con enlace a otra pgina de
estilo

Modificar alguna de las propiedades del mismo, basta con hacer doble clic
sobre el botn para volver a la ventana anterior y poder hacer los cambios
oportunos.
39
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Si se hace un solo clic se obtiene la ventana:

Tambin es posible modificar algunas de las propiedades.


Los resultados pueden verse pulsando el botn Reproducir.

40
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Unidad III. Formas de ordenar la informacin.


Prctica 1. Tablas.
Desde Insertar de la barra de Mens, elegir Tabla

Aparecer una ventana similar a sta:

La tabla debe ser como sigue: con 3 filas y 6 columnas y que ocupe 80% del
ancho, un borde de 2 pixeles y un relleno de celda de 5 pixeles:

Vamos a realizar algn cambio en la tabla

41
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Se ha aadido una fila, alineando al centro, incrementando el grosor del borde


a 5 pixeles, estableciendo un color de fondo y otro diferente para el borde.
Ahora seleccionar la primer fila, en el panel Propiedades realizar los siguiente
cambios.

Pulsar el botn

, el texto que est escrito en las celdas de esa fila se colocar

centrado en cada una de las celdas. Pulsar el botn


a estar en negritas. El resultado ser:

, el texto escrito pasar

Otra forma de seleccionar filas y/o celdas consiste en situar el cursor en una de
las celdas y arrastrar con el ratn hasta donde se desee.
Seleccionar las cuatro celdas intermedias de la ltima fila. Si se le da clic al
icono
, las celdas seleccionadas se agruparn en una sola:

Se puede aadir texto o variar las propiedades de las celdas por los
procedimientos descritos:

Guardar la pgina con el nombre de miprimertabla.html.


42
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Prctica 2. 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 es posible insertar filas o columnas a travs de la opcin Insertar filas
o columnas. Al pulsar sobre este botn 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 pulsar sobre las opciones
Eliminar fila o Eliminar columna.
1) Abrir el archivo miprimertabla.htm. Aadir una columna a la derecha y
otra a la izquierda y tambin una arriba y otra abajo. Poner como color de
fondo a las celdas creadas el color gris. Esto se hace seleccionando las
celdas y pulsando sobre el botn
Guardar la tabla resultante con el nombre miprimertabla_modificada.htm

43
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Prctica 3. Anidar, dividir y combinar celdas


Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le
llama anidar tablas.
Crear en una pgina nueva, donde se insertar una tabla de 2 filas por 2
columnas y en el interior de la primera celda se introducir una tabla de ese
mismo tamao. Poner a la primera tabla el color de fondo verde claro y a la
tabla interior el color naranja.
El ttulo de la pgina ser Tablas anidadas, tendr como color de fondo el gris
y la se deber guardar con el nombre tablas2.htm
Una de las formas de dividir y combinar celdas es a travs de los botones del
inspector de propiedades.

Si se seleccionan varias celdas pueden combinarse pulsando sobre el botn


del
inspector de propiedades. Se debe de considerar que slo es posible
combinar celdas contiguas, cuya combinacin pueda dar como resultado otra
celda.
Para dividir una celda hay que pulsar sobre el botn del inspector de
propiedades,
o sobre la opcin del men Modificar/tabla/Dividir celda

Abrir la pgina web del ejercicio anterior y realizar los siguientes pasos:

Combinar las 4 celdas de la tabla interior


-Aadir dos columnas a la derecha de tabla exterior
-Dividir las 4 celdas de la tabla interior

Guardar los cambios realizados, con la creacin de la pgina tabla3.html


44
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Prctica 4. Marcos
Para crear una pgina con marcos, se debe saber que:

La estructura de la pgina es un documento independiente.

Cada uno de los marcos es otro documento independiente.

Cuando se carguen los diferentes documentos, el documento inicial


situado en el espacio principal (main frame), ser sustituido por el enlace
que haya sido pulsado.

Crear un sitio nuevo que se llame Ejemplo de marcos dentro de la carpeta raz
marcos que se crear en Mis documentos.
Empezar por crear un nuevo archivo, sealando Archivo, nuevo archivo.
Aparecer el nuevo archivo al que Dreamweaver llamar untitled.html.

Hacer doble clic sobre l para abrirlo:

Pulsar

Seleccionar el botn

para que se despliegue:

para que aparezcan los patrones de marcos:

45
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Colocando el cursor sobre cada uno de los conos muestra los diferentes
conjuntos de marcos que se pueden utilizar.
Una vez decidido qu conjunto de marcos se va a utilizar (en nuestro caso,
hacemos clic sobre el icono
pgina.

y el conjunto de marcos dividir nuestra

Se puede modificar la anchura de los marcos, simplemente situndose con el


cursor en el borde y arrastrarlo.

46
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

En este momento, Dreamweaver ya ha creado 4 diferentes documentos: El


primero que es el que contiene la estructura de los tres marcos (frameset) y
uno por cada marco (el superior, el izquierdo y el principal) los frames. Se
puede ahora, escribir algo en cada una de las tres partes para identificarlas
posteriormente. Por ejemplo, escribir:

Frame el ttulo.

Frame del ndice.

Frame principal.

Quedar algo as:

Proceder a guardar, eligiendo Archivo, Guardar todo.

47
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Este proceso es muy importante, por eso se debe realizar tal como se indica.
Aparecer la siguiente ventana:

Observar que a la carpeta raz del sitio se le ha llamado marcos, luego se


guardarn en esta carpeta los frames creados. Puede ocurrir que
Dreamweaver intente guardarlo en otro sitio, en ese caso se tiene que buscar
la carpeta marcos dentro de la carpeta Mis documentos. Observar, tambin,
que aparece aparte de la carpeta _notes, un documento denominado untitled;
ms adelante sabremos qu documento es ste.
Lo primero que se va a guardar el el conjunto de marcos o frameset.
Dreamweaver le ha puesto un nombre: UntitledFrameset-6. Nosotros le
podemos llamar index porque es la pgina que se va a abrir al principio con
todos los marcos cargados.

48
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Una vez cambiado el nombre y guardado, aparecer la siguiente ventana:

Observar que ahora el borde est rodeando al frame de la izquierda, el frame


de los enlace. Adems, el nombre que le est poniendo Dreamweaver ya no es
Frameset sino Untitled. Se le pone el nombre que nos aparezca, por ejemplo,
ndice.

Le damos guardar y aparecer la ltima ventana:

49
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Ahora el cordn est rodeando el marco superior. De nuevo observa el nombre


de Dreamweaver: UntitledFrame-3. Se est guardando el marco del ttulo. Se
puede llamar ttulo.

Le damos Guardar y ya no aparecen ms ventanas. Falta, sin embargo, un


frame por guardar, el frame principal, ste es el documento que Dreamweaver
ha guardado con el nombre untitled que veamos en la carpeta marcos.
Comprobamos, finalmente, que los tres marcos y el conjunto de marcos estn
dentro de la carpeta del sitio:

50
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Intentar entender un poco la estructura de este complejo sistema.


Abrir el index.html haciendo clic sobre el.

Observa las etiquetas que aparecen:


. Indican
que el frame principal (observa que est enmarcada) est dentro de un
frameset que es la banda horizontal entera (con el frame del ndice) y que este
frameset est dentro de otro que divide el espacio en dos bandas.
Si al menos un
no aparece al abrir el index, da un clic con el ratn en
cualquiera de los bordes internos de separacin entre marcos (a veces cuesta
un poco, al parecer el borde inferior es el que responde antes).

51
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Cargar otros documentos en el marco principal


Cada uno de los tres documentos que forman nuestro espacio se pueden
modificar desde el conjunto de marcos, o bien, abriendo cada uno de ellos de
manera independiente.
El documento que va a tener los enlaces se recomiendan que sea modificado
dentro de la estructura de marcos para poder elegir el destino de los enlaces.
As colocamos el texto, los fondos, que nos parezca y cundo vamos a hacer
los enlaces:

Selecciona el 1 y da un clic en la carpeta

del panel Propiedades:

52
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Aparecer la ventana Seleccionar archivo.

Elige Uno y clic en Aceptar.


A continuacin elegir el marco de destino en Dest:

Elige mainFrame.
Haz lo mismo para el enlace del 2: selecconalo o haz clic en la carpeta del
vnculo. Elige el archivo dos y en Dest selecciona el mainFrame.
Lo mismo para el tercer enlace.
Guardar el archivo, guardar todo.
Oprimir <F12> para comprobar con el navegador que las cosas funcionan.

53
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Unidad IV. Creacin de Formularios y Plantillas.


Prctica 1. Formularios
Para insertar un formulario hacer clic en
panel:

para que se despliegue el

Elegir la pestaa

Colocar el cursor en el sitio donde se quiera que se coloque el formulario y dar


un clic en el icono

Aparecern los lmites del formulario representados por un rectngulo cuyos


lados son una lnea punteada de color rojo:

Ahora, por motivos estticos, coloca una tabla dentro del formulario con dos
columnas y varias filas: sita el cursor dentro del rectngulo de lneas
discontinuas, introduce la tabla y cntrala.

54
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Se emplear la columna de la izquierda para realizar la pregunta


correspondiente (justificado a la derecha) y la columna de la derecha para
colocar los objetos de formulario (justificado a la izquierda).
Situar el cursor en la primera celda, alinear a la derecha y escribir, Nombre: En
la primera celda de la derecha insertar un campo de texto

El formulario tendr el siguiente aspecto:

Debajo aparecer la ventana de propiedades del campo del texto:

Elegir la anchura del campo a 30, el nmero de caracteres mximo a 25,


queremos que aparezca un texto inicialmente Mi pgina, lo que es ms
importante, el nombre que se le quiera dar: quitar textfield y poner el nombre.

En la segunda celda de la columna de la derecha, insertar un botn de opcin


.
El formulario tendr el siguiente aspecto:

55
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Debajo aparecer el panel Propiedades del botn:


En la primera casilla de la izquierda borra radiobutton y escribir el nombre de la
opcin global: opinin. En la segunda casilla al lado de Valor activado, escribe
lo que corresponda con esta primera opcin que puede ser: muy buena. Se
puede elegir que esta opcin est activada o desactivada de entrada. Tienes
que escribir a la derecha del botn el texto que ver el visitante: muy buena,
excelente. El formulario ir quedando as:

Sigue insertando los dems botones de opcin correspondientes a esta misma


cuestin. Por lo tanto, los siguientes botones se debern seguir llamando
opinin y en cada caso habr que escribir lo que corresponde con esa opcin.
Para que el segundo botn no quede muy separado del primero pon un salto
de lnea, eligiendo Insertar, HTML Caracteres especiales, Salto de lnea.
El segundo botn debe quedar as:

56
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Pon un tercer botn con la opcin de que la pgina es mala, bastante mala.
Con el mismo nombre: opinin y como valor activado: mala.

Si se quiere colocar otra pregunta de opcin se debe llamar de otra manera


para que no se excluyan las selecciones. Por ejemplo, se puede pregunta al
visitante sobre sus conocimientos de informtica. El nombre de la opcin podra
ser conoc_infor.
El formulario va teniendo es aspecto siguiente:

57
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

En la siguiente celda de la izquierda introducir la pregunta Qu es lo que ms


te ha gustado del curso? En la celda de la derecha introduce la primera casilla
de verificacin pulsando en el icono correspondiente.
Ponle un nombre a la casilla, por ejemplo: gustado y como primer valor uno de
los que se nos puedan ocurrir, por ejemplo, paso a paso (para Valor activado) y
una frase un poco ms construida para el formulario visible.

Da un salto de lnea e introduce nuevas casillas, siempre con el mismo nombre,


gustado, y una frase nueva como Valor activado que debe ser una expresin
corta de lo que se escriba en el formulario. Esta parte del formulario podra
quedar as:

58
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Escribe la pregunta en la siguiente celda Indica tu edad e incluye el men en la


celda de la derecha pulsando en

Dale un nombre a la Lista/men, por ejemplo, edad y pulsa


Aparecer la siguiente ventana:

Escribe en
los elementos del men. En valor escribe lo
mismo (ser lo que aparezca al ser enviado el formulario). Pulsando la tecla
para incluir el siguiente y la tecla
para quitar uno ya introducido. Con las
flechas ve cambiando el orden de las etiquetas de elemento.

59
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Cuando los tengas todos clic en Aceptar.


Las diferentes etiquetas no aparecen, slo lo harn al lanzar la pgina con el
navegador

Incluye un rea de texto pulsando el botn

rea de texto:

Puedes introducir la direccin de correo electrnico del visitante. En este caso,


puedes poner un Valor inicial:

60
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Finalmente, tienes que insertar un botn para enviar el formulario y, si lo


deseas, un botn para borrar todo lo que haya podido escribir el visitante.
Empecemos por el de borrar.
Coloca el botn de borrar en la ltima celda de la izquierda alineado a la
derecha. Coloca el cursor en la celda, alinea y pulsa el cono
. Por defecto
dreamweaver coloca el botn enviar.

61
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Se puede modificar de la siguiente forma:

A continuacin, coloca el cursor en la celda de la derecha, alinalo a la


izquierda, pulsa en el icono
. Aparecer de nuevo la ventana anterior que
se modifico, esta ligeramente:

62
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Para dar por finalizado el formulario. Queda por definir la accin que se quiere
realizar una vez relleno. Para usuarios personales, la opcin ms habitual es el
envo por correo electrnico de los datos obtenidos. Esto se hace colocando el
cursor en cualquier punto del formulario y eligiendo <form> desde la barra de
estado
. Aparecern las
propiedades del formulario

En Accin escribimos malito:direcciondecorreo. Por ejemplo en mi caso,


escribira malito:nfernand97@hotmail.com.
De todas formas, para que el envo del formulario pueda leerse como un
mensaje de correo ordinario, hay que escribir en la etiqueta del formulario del
cdigo fuente el atributo enctype=text/plain.

Se puede intentar seleccionarlo del men


.
Si no est all tienes que escribirlo directamente en el cdigo. Selecciona el
formulario colocando el cursor y pulsa <form> de la barra de estado. Pulsa el
botn
para acceder al cdigo:
<form id="form1" name="form1" method="post" action="mailto:nfernand97@hotmail.com">

En las propiedades queda de la siguiente manera:

El formulario ya debe funcionar. Gurdalo primero, se visualizar con el


navegador y realiza un rellenado de prueba para ver si lo recibimos
satisfactoriamente por el correo electrnico.
Antes de dar por concluido el formulario se puede hacer alguna modificacin en
la tabla, aadiendo algn color de fondo para separar unas filas de otras.

63
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Prctica 2. Plantillas
Se empezar abriendo desde Archivo de la barra superior.

Elegir la pestaa General y seleccionar Pgina de plantilla y, dentro de ella


Plantilla HTML:

Hacer clic en crear y abrir el documento; en l se puede empezar a trabajar y


colocar los distintos elementos:

64
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

En el caso que se este trabajando con una tabla, por ejemplo:

Una vez finalizada la tabla se tiene que elegir los elementos que van a poder
ser modificados: Primero se selecciona el elemento modificable (en el primer
ejemplo el nombre del curso) y en el men Insertar clic en Objeto de plantilla,
Regin editable.

65
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Se abrir la ventana siguiente:

Se debe cambiar el nombre:

Y dar clic en aceptar.


Repetir el proceso para todos los dems elementos editables. ste es el
resultado final.

Lgicamente el nombre de los elementos editables solamente se ven dentro de


Dreamweaver. Cuando se visite la pgina con el navegador, no se notarn las
diferencias entre las regiones editables y no editables, nada sealar unas
partes de otras.
Ahora se guarda como plantilla: Archivo, guardar como plantilla

66
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

El programa permite elegir el sitio donde guardar la plantilla y el nombre con el


que se guardar:

En los archivos se habr creado una carpeta con el nombre Templates y, dentro
de ella, la plantilla que se acaba de crear. A veces no se visualiza
inmediatamente, hay que cerrar y abrir de nuevo el sitio para que se haga
visible la carpeta.

Ahora para crear un documento basado en esa plantilla, abre Archivo, Nuevo,
Plantillas y haz clic en Crear.

Se abrir la plantilla y se podr modificar los elementos editables. Bastar


guardar como un documento nuevo cada una de las modificaciones para hacer
funcionar la plantilla.
67
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Unidad V. Animaciones en una pgina web.


Prctica 1. Capas.
Abrir un sitio.
Crear un documento de HTML.
Selecciona la opcin para crear capas.

Crear cuatro capas como se muestra a continuacin:

68
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Las medidas del primer cuadro son 300 x 397.


Las medidas de los tres cuadros a la derecha son 304 x 86.
Insertar la una imagen con:

El inspector de propiedades de la ruta.


La imagen Espaa_Francia

69
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Prctica 2. Cubo mgico


Se har un trabajo concreto con capas para aprender sobre su funcionamiento
e intuir posibles utilidades.
El trabajo a realizar es un pasatiempo denominado Cubo mgico. Consiste en
colocar determinados nmeros en un cuadrado con un nmero igual de fila y de
columnas de tal manera que las filas sumen 15 al igual que las columnas y las
diagonales del cuadro.
El Cubo mgico va a ser de 3 filas y 3 columnas, nueve casillas en total a
ocupar por las cifras del 1 al 9. la suma de todas las filas y de todas las
columnas y diagonales debe ser 15.

Primero hay que disear, con un programa grfico, las 9 cifras

1 2 3
4 5 6
7 8 9
Es importante realizar cada imagen con un tamao redondo. En el ejemplo
miden 100 x 100 pixeles.
Se Irn insertando capas e introduciendo una imagen con el nmero respectivo
dentro de cada una de las capas (el cursor deber estar dentro de la capa
antes de insertar la imagen).
La capa y la imagen deben tener el mismo tamao.

70
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Dreamweaver llamar a la primera capa Layer 1 (y estar la imagen del


nmero 1) y a la segunda capa Layer2 (y estar la imagen del 2). Es
conveniente ser consciente del nombre que Dreamweaver le va dando a cada
capa (Inspector de propiedades).
Se puede ir dando clic en todos los iconos de capa
para comprobar que se
seleccionan todos y cada uno de los nmeros. Se debe tener abierto el Panel
Propiedades y comprueba, una vez ms el nombre de cada una de las capas.
A continuacin coloca los nmeros tal y como van a estar en la solucin final.
Empieza por la casilla superior izquierda que, en esta solucin, va a ser el 4.
Llvalo ms o menos al centro de la pantalla y haz clic en Ventana,
comportamientos.

Se abrir la siguiente ventana:

Ahora hacer clic en el icono


comportamientos:

y se desplegar el siguiente catlogo de

De este men se elegir Arrastrar capa (si no estuviera activo este


comportamiento al dar clic en la cruz, dar clic en la etiqueta <body> de la barra
de estado y volver a hacerlo).
Aparecer la siguiente ventana:

71
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Se tiene que:
En Capa: seleccionar la capa Layer4 (est colocado el 4).
Movimientos dejar Sin restricciones.
Hacer clic en Obtener posicin actual para que se rellenen los nmeros del
Destino de forma automtica.
Ajustar a 20 pixeles del destino. Esto quiere decir que, cuando el visitante
suelte el objeto a menos de 20 puntos de la solucin, el objeto se colocar solo
de manera exacta en el sitio que acaba de ser obtenido al pulsar en Obtener
posicin actual, lo que proporcionar belleza en la solucin final y sensacin de
seguridad al saber que es sa la posicin a la que haba que llevar el objeto (en
este caso, el nmero).

Hacer clic en Aceptar y comprobar la capa en el panel Propiedades antes de


pasar al siguiente nmero:
Si se selecciona la capa, se comprobar su situacin.
Colocar cada uno de los nmeros procurando que estn perfectamente
alineados con sus vecinos. Se puede ajustar y modificar la posicin escribiendo
directamente en el panel Propiedades la posicin IZ y Sup.

72
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Si el primer nmero ha quedado a 250 puntos de la izquierda y a 100 puntos de


arriba, y cada capa (e imagen) ocupa 100 x 100, el segundo nmero deber
quedar a 350 puntos de la izquierda y a 100 puntos de arriba, el tercer nmero
a 450 puntos y a 100 puntos respectivamente. El siguiente nmero ser el
primero de la segunda fila, por eso deber estar a250 puntos de la izquierda y
a 200 puntos de arriba, el siguiente a 350 200, el siguiente a 450 200. Por
ltimo la tercera fila: 250 300; 350 300 y 450 300.
Repetir el proceso indicado para el nmero 4 de aadir comportamiento
Arrastrar capa para cada uno de los nmeros segn se vayan quedando
colocados en su posicin de solucin.
Al nmero que se va a colocar en el centro (el 5) no se le ajusta el
comportamiento de arrastrar capa. Su posicin ser inamovible; es decir, el
visitante de la pgina no lo podr mover de su posicin central.
Cuando se haya acabado y, para que pueda ser un pasatiempo para el
visitante, se tendr que desordenar los nmeros: cambiar los nmeros que nos
parezca excepto el del centro que no lo tocar. El visitante de la pgina recibir
el cuadro tal como lo haya guardado esta ltima vez, pero, al ser manipulado
por l, el programa recordar la posicin que tena cuando el cuadro estaba
bien resuelto y cada imagen se dejar llevar automticamente a su posicin
correcta cuando el nmero se acerque menos de 20 puntos y el jugador suelte
el ratn.

73
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Conclusiones
Dreamweaver 8 puede integrar entradas RSS provenientes de otras pginas
con slo introducir la fuente y arrastrar y colocar los campos. De esta forma
podr introducir datos en formato XML fcil y cmodamente.
Esta ltima versin ha mejorado mucho respecto a la compatibilidad y manejo
de estilos de cascada. De esta forma se ha mejorado el panel de estilos CSS,
donde ahora podr acceder a la configuracin de cada uno de los estilos
desde una lista mucho mejor dotado de una cuadrcula editable desde donde
se modificarn sus propiedades. Adems, Dreamweaver 8, aade una nueva
barra de herramientas que proporciona la reproduccin inmediata de los
estilos para diferentes medios (pantalla, impresora, webTV, PDAs...).
Su sincronizacin ha mejorado notablemente siendo posible una mejor
gestin de cambios, adems de permitir en uso de bolqueo/desbloqueo de
archivos para que estos no se sobreescriban.
Los usuarios con problemas visuales podrn acceder a una opcin de
Aumento de la pantalla en vista de diseo para analizar o trabajar con difciles
anidamientos de tablas. Adems de la inclusin de informacin visual gracias
a las guas que permitirn la medicin pxel a pxel de todos los elementos.
Se ha aadido una barra de herramientas a Dreamweaver 8, podr
encontrarla en la parte lateral izquierda del modo de Cdigo, esta barra hace
mucho ms accesible el cdigo al permitir la navegacin por etiquetas y su
contraccin. Una de las nuevas novedades es la posibilidad de aadir
comentarios con un slo clic.
Concluiremos, adems, la compatibilidad aadida en esta versin con PHP5,
Coldfusion MX 7 y Video Flash.

74
Lic. Norma Fernndez Osorio

CNAD - Mecatrnica

Bibliografa
GASPAR GONZLEZ MANGAS y ANTONIA GONZLEZ MANGAS.
Negocios Virtuales. Ed. MC Graw Hill. Primera edicin
http://macromedia.com
http://aulaclic.com
http://www.ua.es/ugt/cursos/curso_diseno_web/ejercicios1_8.pdf
http://www.adrformacion.com/cursos/dream/dream.html
http://www.arp.jazztel.es/dreamweaver.htm
http://www.arp.jazztel.es/dreamweaver.htm

75
Lic. Norma Fernndez Osorio

Você também pode gostar