DE con
PAGINAS
WEB
Diseo de
Pginas Web
DreamWeaver
CON DREAMWEAVER-NIVEL II
INDICE
Leccin 1: Las capas
Apartado 1: Introduccin
Apartado 2: Trabajando con capas
Apartado 3: Practicando con las capas
Apartado 4: Convertir capas en tablas y tablas en capas
Apartado 5: Cdigo HTML
Apartado 6: Pon a prueba tus conocimientos
Leccin 2: Los formularios
Apartado 1: Introduccin
Apartado 2: Crear formularios
Apartado 3: Elementos del formulario
Apartado 4: Validar los formularios
Apartado 5: Formatear formularios
Apartado 6: Cdigo HTML
Apartado 7: Pon a prueba tus conocimientos
Leccin 3: Los marcos
Apartado 1: Introduccin
Apartado 2: Creacin de marcos
Apartado 3: Seleccionar el conjunto y los marcos
Apartado 4: Propiedades de los marcos
Apartado 5: Contenido de los marcos
Apartado 6: Cdigo HTML
Apartado 7: Pon a prueba tus conocimientos
Leccin 4: Otros elementos de la web
Apartado 1: DTHML
Apartado 2: Imgenes de sustitucin
Apartado 3: Barras de navegacin
Apartado 4: Botones y texto flash
Apartado 5: Animacin de capas
Apartado 6: Comportamiento
Apartado 7: Cdigo HTML
Apartado 8: Pon a prueba tus conocimientos
Leccin 5: Subir la web al servidor
Apartado 1: Subir nuestra pgina
Apartado 2: FTP
Apartado 3: Pon a prueba tus conocimientos
del
Para ello no tienes ms que mantener pulsada la tecla Shift
teclado mientras seleccionas las capas tal como te hemos indicado anteriormente.
Para insertar tanto texto, como imgenes, etc la capa no puede estar
seleccionada. Debes situar el cursor dentro de ella y en ese momento podrs
introducir lo que quieras.
PANEL CAPAS
El panel Capas proporciona una vista de todas
las capas del documento. Es muy cmodo
trabajar con l o al menos tenerlo visible cuando
trabajemos con capas. Veamos cmo hacerlo:
Si no ests viendo entre los paneles el panel
Diseo debes ir al men Ventana y seleccionar
la opcin Capas.
En ese momento vers como aparece el panel Diseo con la pestaa Capas activa.
Fjate en el aspecto del panel, nos muestra todas las capas del documento. Vamos
a analizarlo:
Las capas aparecen en la lista en el orden
descendente segn su creacin. Desde este panel
podrs seleccionar capas, definir su visibilidad,
cambiar su nombre, cambiar su orden, etc. En la
siguiente animacin veremos paso a paso las
posibilidades que nos ofrece este panel:
Para conseguir lo que ves, hemos indicado en la propiedad ndice Z del Inspector
de propiedades el orden de apilamiento de cada capa. Teniendo en cuenta que las
capas se ordenan en orden descendente se ver por encima de las dems la que
mayor numeracin tenga. El resto ha sido moverlas hasta conserguir que se
superpongan de este modo.
Abre una pgina nueva en blanco e inserta dentro de ella una capa. Escribe
dentro de la capa el siguiente texto: "FLORA Y FAUNA DE ASTURIAS"
Inserta otra capa ms y escribe dentro de ella el siguiente texto: "La fauna
es rica en especies poco comunes en el resto de Espaa, como el oso
parto; hay tambin lobos, rebecos, corzos, , zorros (raposos),
guilas reales y una gran variedad de peces de ros de aguas bravas.
dentro
de
la
FAUNA
Crea dos capas ms dentro de la pgina e inserta una imagen en cada una,
para ello sita el cursor dentro de la capa e inserta la imagen
Hemos variado el tamao de la capa ttulo para que ste se muestre en una
sola lnea.
Recuerdas los estilos de texto? Vamos a aplicarlos a los textos de las capas. No
olvides que antes debes adjuntarlos, si no recuerdas como se haca es buen
momento para hacer un repaso.
textos
el
estilo
parrafos
de
la
hoja
de
Para convertir todas las capas de este documento en una tabla vete a la
opcin
Convertir
del men
Modificar y
selecciona Capas
en
tabla . Aparecer el siguiente cuadro de dilogo:
La opcin Ms preciso crear una celda por cada capa, junto con las celdas
adicionales necesarias para conservar el espacio entre capas.
La opcin Usar GIF transparentes nos garantiza que la tabla tenga las
mismas anchuras en todos los navegadores. Insertando para ello imgenes
transparentes al final de la tabla.
10
11
12
13
LISTAS O MENS
Las listas y los mens se usan para proporcionar al usuario varias opciones de
eleccin.
Ambos elementos son similares, ayudarn al usuario a realizar la misma funcin.
No obstante, las primeras se usan para mostrar todas o varias de las opciones
disponibles, mientras que los segundos consisten en un men desplegable.
Una vez insertada la lista puedes seleccionarla y ver sus propiedades en el
inspector de propiedades:
14
15
Por tanto, podemos decir que el botn Enviar es una parte fundamental de los
formularios. Sin l un formulario no servira de nada ya que sus datos no tendran
ninguna utilidad.
Cuando insertas un botn debes indicar en sus propiedades si ste va a enviar
latos o a restablecer el formulario. Fjate en el inspector de propiedades.
16
Esto es muy sencillo, slo tendrs que seleccionar la Accin Enviar formulario o la
accin Restablecer formulario, segn la finalidad del botn.
Comportamientos pulsa
(+). Selecciona
el
17
nuestro
formulario
lo
siguiente
que
haremos
ser
18
Creando primero el formulario y dentro de ste una tabla con las filas y columnas
necesarias para distribuir despus los elementos que vayas insertando. Intenta
realizar la siguiente prctica haciendo esto practica1.doc
Para terminar esta leccin vincularemos el formulario a nuestro sitio Web:
Los formularios se crean dentro del cuerpo de la pgina, es decir, entre las
etiquetas <body> </body>
Las etiquetas que encierran el formulario son <form> </form>. Dentro de la
etiqueta de apertura del formulario se introduce el nombre de ste, la accin, etc
A continuacin puedes ver las etiquetas utilizadas para insertar el cuadro de texto
nombre:
Diseo de Pginas Web con DreamWeaver
19
Las etiquetas <select> </select> contienen toda la lista o men mientras que las
etiquetas <option value=valor> </option> contienen cada elemento de la
lista o men.
Por ltimo veremos
Restablecer:
las
etiquetas
utilizadas
para
los
botones
Enviar
Como ves, para los botones se emplea la etiqueta <Input> y dentro de ella se
indica el nombre del botn, el tipo (si enva o restablece), etc
20
Esta estructura contendr las pginas web de nuestro sitio. De modo que nosotros
debemos indicar qu pgina se mostrar en cada marco.
La pgina del ayuntamiento de Siero es un buen ejemplo de sitio Web que funciona
con marcos. Pulsa el siguiente vnculo para verla: http://www.ayto-siero.es
21
Dreamweaver nos ofrece diversas formas de crear conjuntos de marcos. Dado que
somos principiantes, escogeremos la opcin que mejor nos puede llevar a entender
su funcionamiento:
22
Luego haz lo mismo con el marco derecho y por ltimo selecciona todo el
conjunto de marcos.
23
Mismo tamao: Al activar esta casilla se impide a los usuarios arrastrar los
bordes del marco para modificar su tamao en su navegador.
Color de borde: Permite establecer un color para el borde que separa los
marcos.
Alto del margen: Indica en pxeles el alto de los mrgenes superior e inferior,
es decir, del espacio que hay entre los bordes superior e inferior del marco y su
contenido.
24
En este caso nos interesa precisar un poquito ms, ya que necesitaremos que los
vnculos seleccionados en un marco se abran en el otro. En la siguiente pantalla
trabajaremos con todo esto.
Para establecer los vnculos entre los marcos de un conjunto debers seguir los
pasos que te proponemos a continuacin:
Ahora inserta los textos o imgenes que funcionarn como vnculos a las
dems pginas.
25
26
Apartado 1: Qu es el DHTML?
QU ES DHTML?
Dynamic HTML o HTML dinmico no es ms que el lenguaje HTML que conocemos
complementado con otro lenguaje, como puede ser Javascript.
Esta combinacin permite presentar pginas HTML con determinados efectos que
ofrecen un mayor dinamismo y espectacularidad a la pgina.
Una pgina que utilice DHTML puede contener imgenes que aparecen y
desaparecen, objetos que se desplazan por la pantalla y mens que se ocultan o se
muestran.
27
28
Abajo: es el aspecto del botn cuando se pulsa. A menudo tiene una apariencia
de profundidad.
29
30
Sita el cursor justo encima del mapa de asturias y saca el cuadro de texto
Insertar botn flash y crea el primer botn teniendo en cuenta que:
o Puedes escoger el estilo que ms te guste.
o El texto debe ser Norte.
o La fuente : Arial Black, 12
o El destino ser _blank
o Por ltimo, lo guardaremos como norte.swf . Pulsa sobre el
botn Examinar para guardar los botones en una carpeta "flash"
dentro de tu sitio turismo.
Pulsa Aceptar y crea los botones para abrir las pginas sur, oriente y
occidente.
31
Si necesitas modificar cualquier botn solo tendrs que hacer doble clic
sobre el en la vista diseo y se abrir de nuevo el cuadro de dilogo.
La opcin Texto flash que podemos encontrar tanto en el men Insertar como
en la barra de herramientas Insertar . Nos ofrece la posibilidad de
utilizar textos con efectos dinmicos . Estos textos tienen la misma finalidad que
los botones que hemos utilizado anteriormente.
32
Fuente : Verdana, 14
Alineacin : Centrada
Colores de fondo y sustitucin : #669900 y #6600CC
Texto : Ayuntamiento de Gijn
Vnculo : http://www.ayto-gijon.es (escribe la ruta "relativa" en
el cuadro de texto. El botn examinar es para buscar pginas dentro
del sitio)
Destino : _blank
33
34
Abre una pgina nueva en blanco e inserta en ella una capa. Escribe dentro
de la capa el siguiente texto: "ANIMAR CAPA"
35
Este mensaje indica que cada vez que marcas la opcin de reproduccin
automtica ests diciendo que quieres que la pelcula se ejecute al cargarse
la pgina en el navegador.
36
La capa se mover por la pgina repitiendo los movimientos que tu le has indicado
anteriormente en la vista diseo. Luego se detendr, si quieres que no se detenga
nunca marca la casilla Bucle.
Para hacer que la animacin ocupe ms o menos fotogramas pulsa sobre el final de
la linea violeta y arrastra hacia la derecha o la izquierda
Apartado 6. Comportamientos
37
38
39
Una vez que ests seguro de que los eventos que vas a ver son los del IE
6.0. Pulsa sobre el evento que tienes actualmente para modificarlo y
aparecer un desplegable. Busca el evento onClick (al hacer clic) y
seleccinalo.
Si quieres detener la lnea de tiempo los pasos son casi idnticos. Seleccionars
entre los comportamientos Detener lnea de tiempo . Luego indicars qu lnea
de tiempo deseas detener (tambin puedes detenerlas todas) y por ltimo el evento
que desencadenar ese comportamiento.
MOSTRAR-OCULTAR CAPAS
Una de las opciones ms tiles de las capas es la capacidad de poderlas mostrar u
ocultar a voluntad.
Para usar la accin Mostrar-Ocultar capas debes seleccionar primero un objeto
que active la accin. Este objeto puede ser cualquier elemento, excepto una capa,
las imgenes suelen ser los objetos ms utilizados, aunque tambin podramos
utilizar textos.
El usuario realizara un evento sobre ese objeto (hacer un clic, pasar el puntero
sobre l, etc). Y este evento desencadenara el comportamiento lo entiendes?
Luego oculta la capa. Recuerda que puedes hacerlo desde el panel Capas o
desde el Inspector de propiedades.
40
41
42
Inserta una capa y dentro de ella crea una tabla de 1 fila y 3 columnas. El
tamao de la tabla ser 750px por 188px. Inserta una imagen en cada
celda.
Registra una ruta para la capa que mueva la capa de derecha a izquierda. El
movimiento debe comenzar al cargarse la pgina y no debe interrumpirse
nunca te parece muy difcil? Si es as vuelve al apartado Ejecutar lnea de
tiempo.
43
44
45
Pulsa sobre el vnculo que te ofrece geocities para crear tu sitio Web.
46
Apartado 2. FTP
An no hemos subido los archivos que componen nuestro sitio Web a internet, por
el momento lo nico que hemos hecho ha sido crear el sitio.
Antes de continuar debemos detenernos un instante para hablar sobre el FTP
47
QU ES ESTO DE FTP?
Bien. FTP son las siglas de File Transfer Protocol, es decir, Protocolo de
Transferencia de Archivos. Es el sistema ms sencillo y eficaz para enviar y
recibir archivos entre ordenadores a travs de la red Internet.
Justo lo que queremos! Enviar los archivos que tenemos en nuestro ordenador al
sitio Web que acabamos de crear.
Existen muchos programas de FTP (Cute FTP, Ws_FTP LE, etc...) que podramos
utilizar para realizar esta transferencia. Nosotros lo haremos a travs de
Dreamweaver que tambin nos ofrece esta opcin.
48
Ahora debes indicar que s quieres utilizar una tecnologa de servidor (no
especifiques ninguna en el desplegable) y pulsar Siguiente.
Esta pantalla es
correctamente:
la
ms
importante,
asegrate
de
introducir
los
datos
49
Cuando hayas rellenado esto correctamente pulsa Siguiente. Los siguientes pasos
djalos con los datos que te propone por defecto y pulsa Siguiente en cada
pantalla hasta completar el asistente.
En este momento tenemos configurado el sitio remoto. Por tanto podremos elegir si
queremos ver los archivos locales o los archivos que se encuentran en el servidor
remoto. Para ello escogeremos la opcin que nos interese en el segundo
desplegable que se encuentra en la pestaa Archivos.
50
La pgina inicial de un sitio debe llamarse index.htm para que ste funcione.
51
Selecciona todos los archivos que quieres subir, en este caso selecciona todo y
pulsa sobre el botn Colocar archivo(s).
52