PDF de programación - APUNTES DE DREAMWEAVER - CLASE III

APUNTES

DE



DREAMWEAVER



CLASE III



1

DREAMWEAVER – CLASE III



la

segunda

la

En esta clase aprenderemos a realizar un index.html utilizando
tablas, insertar una película Flash, transformar una lista en lista
desordenada (colocándole viñetas),insertar tablas dentro de otra,
combinar y dividir celdas , cambiar color de fondo de la página, de la
tabla, vínculo correo electrónico.

Para comenzar crea un sitio, computacionxls_apellido, el cual
tendrá cuatro páginas, la primera guárdala con el nombre
index.html,
tercera
novedades.html, y la cuarta contacto.html.
En esta clase trabajaremos solo con la página inicial (index.html).
(Ver modelo terminado).
PUNTO 0
1.
2.
3.
4.

Título del documento: COMPUTACIONXLS
guardarlo como index.html
Fondo color del documento: #333333
Crear una tabla principal de 1 columna, 1 fila, 600 px de
ancho y alineación centrado.
Crear una tabla adentro de la tabla principal que tenga 8
filas y una columna

producto.html,

5.


Para 1. Clic en PROPIEDADES DE LA PAGINA > Categoría >Título-
Codificación: Computacionxls.
Para 3. Clic en PROPIEDADES DE LA PAGINA > Categoría
>Aspecto>Color de fondo: #333333
Para 4. Clic en Insertar >Tabla , definir cantidad filas, columnas,
ancho (en pixeles), para alineación: Seleccionar tabla > Alinear
:Centro


Para 5: Colocar el cursor dentro de la tabla: Clic en Insertar >
Tabla….


PUNTO 1:
Crear la hoja de estilo externa, cuyo nombre es: estilos1.css y
vincularla con index.html

Los elementos son:



2


.textos: Arial, 12px, color: #666666;
.titulo: Arial, 16px, negrita, color: #FF0000

Para crear una hoja de estilo externa (es un archivo que contiene
varios estilos creados por nosotros para formatear, títulos, textos,
etc) , clic en Texto > Estilos css > Nuevo



Al aceptar se abre una nueva ventana donde escribimos el nombre
del estilo: estilos1.css



3

Crear tabla de 5 columnas y 1 fila. Insertar ahí adentro la


FILA 1:

1.
imagen del logo (logo.jpg) e
insertar las imágenes: bt_quienes.jpg, bt_quienes2.jpg,
bt_producto.jpg, bt_producto
2.jpg, bt_novedades.jpg, bt_novedades 2.jpg, bt_contacto.jpg,
bt_contacto 2.jpg.
Aplicar efecto de Rollover a las imágenes.

2.
ventana.
BOTON QUIENES: quienes.html
BOTON PRODUCTOS: productos.html
BOTON NOVEDADES: novedades.html
BOTON CONTACTO: contacto.html



Al hacer clic en Guardar, se abre una nueva ventana, donde
seleccionamos el formato pedido,


Vinculaciones de cada botón. Estas se abrirán en una nueva


Para crear el segundo estilo repetir los pasos y donde dice definir en:
dejar estilos1.css.
Para vincular la hoja de estilo a nuestra página: Texto > Estilo CSS >
Adjuntar Hoja de Estilo, Clic en examinar, seleccionar estilos1.css.



4




PUNTO 2:
FILA 1:

1.

Crear tabla de 5 columnas y 1 fila. Insertar ahí adentro la
imagen del logo (sm_logo1) e insertar las imágenes:
bt_quienes.jpg, bt_quienes2.jpg, bt_producto.jpg, bt_producto
2.jpg, bt_novedades.jpg, bt_novedades 2.jpg, bt_contacto.jpg,
bt_contacto 2.jpg.
Aplicar efecto de Rollover a las imágenes.

Vinculaciones de cada botón. Estas se abrirán en una nueva

Armar el contenido según el modelo, se puede insertar o

Crear una tabla de 2 columnas y 1 fila. Insertar ahí adentro la


2.
ventana.
BOTON QUIENES: quienes.html
BOTON PRODUCTOS: productos.html
BOTON NOVEDADES: novedades.html
BOTON CONTACTO: contacto.html
Para ello: Insertar > Objeto de imagen > Imagen de sustitución:

FILA 2:

1.
animación.
2.
eliminar tablas, combinar
filas y celdas, colores, utilizar vista estándar y vista de disposición,
tamaño de las
tablas en píxeles o en porcentajes.
3.

Para 1. Insertar animación: Clic en Flash, Seleccionar banner.swf.



Aplicar estilos



5





FILA 4:

1.
2.

Crear una tabla de 10 columnas y 1 fila.
Armar el contenido según el modelo, se puede insertar o
eliminar tablas, combinar filas y celdas, colores, utilizar vista
estándar y vista de disposición, tamaño de las
tablas en píxeles o en porcentajes.
Insertar las imágenes: 1.jpg, 2.jpg y 3.jpg
Aplicar estilos.
Aplicar 2 Vínculos. Todas las vinculaciones son en una ventana

3.
4.
5.
nueva.

Para 5. Cuando el vínculo es a una página web se debe especificar



6

http://www.ciudad.com.ar/, (es una dirección absoluta), en cambio,
cuando es a una página del mismo sitio, solo se escribe
nombreCarpeta_nombrePagina.(es una dirección relativa).



FILA 6:

1.
2.
eliminar tablas, combinar
filas y celdas, colores, utilizar vista estándar y vista de disposición,
tamaño de las tablas en píxeles o en porcentajes.
3.
4.

FILA8: Vínculo correo electrónico: maito:[email protected]



Crear una tabla de 3 columnas y 1 fila.
Armar el contenido según el modelo, se puede insertar o

Insertar la imagen: img03.jpg
Aplicar estilos.



7

Modelo terminado (Volver)



8





9