ENTORNO DE TRABAJO DE DREAMWEAVER

Dreamweaver CS3 es un software fácil de usar que permite crear páginas web profesionales.

ARRANCAR DREAMWEAVER CS3

Desde el botón Inicio
 Hacer clic sobre el botón Inicio, se despliega un menú.
 Colocar el cursor sobre Todos los programas aparece otra lista con los
programas que hay instalados en tu ordenador
 Buscar Adobe, seguidamente Dreamweaver CS3, hacer clic sobre él, y
se arrancará el programa.
Desde el icono de Dreamweaver CS3 del escritorio .
Abrir un elemento reciente o uno Nuevo -- HTML

LA PANTALLA INICIAL
Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes
fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entenderlo.

2. Barra Insertar 1. Barra de herramientas de documento 3. Ventana de documento

4. Regla horizontal y vertical

5. Paneles Acoplables

6. Panel de propiedades 7. Barra de etiquetas

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

 La Barra de menús
Contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar,
por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en
Dreamweaver.

 La Barra de herramientas estándar

La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las
operaciones más habituales, como Abrir , Guardar , etc.
 La barra de herramientas del 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 estándar. Estas operaciones son las de cambio de vista del documento, vista previa,
etc.

 La Barra de estado.
La barra de estado nos indica en cada momento en qué etiqueta HTML nos encontramos, también nos es
posible alternar entre los modos de selección, mano (para arrastrar la página), o zoom. En cualquier
momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje
preferido (por defecto siempre viene al 100%).

LOS PANELES E INSPECTORES

A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o
inspectores. Vamos a ver los más importantes.
 El inspector de propiedades
El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que
son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el
tipo de fuente, la alineación, si está en negrita o cursiva, etc.

 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 están clasificados según su categoría: tablas, texto, objetos de
formulario, etc.

ACOPLAR O DESACOPLAR GRUPOS DE PANELES

 Para facilitar la organización de los paneles flotantes es posible acoplarlos a la derecha o izquierda
del área de trabajo, en un grupo de paneles.
 Para mover un panel, ya sea para acoplarlo o desacoplarlo de un grupo de paneles, simplemente hay
que pulsar sobre la zona de puntos que se encuentra junto al nombre del panel, y mantener
pulsado el ratón mientras se arrastra el panel hacia el lugar deseado.
 Los grupos de paneles pueden mostrarse y ocultarse pulsando sobre el botón que tiene el siguiente
aspecto .
 También pueden mostrarse y ocultarse todos los paneles pulsando la tecla F4, o a través de una
opción del menú Ventana.
VISTA DE UN DOCUMENTO

 La vista diseño
La vista Diseño permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y
la que se suele utilizar habitualmente.

 La vista Código
La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código
fuente.

 La vista Código y Diseño

La vista Código y Diseño permite dividir la ventana en
dos zonas. La zona superior muestra el código 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.
Nombres y apellidos……………………………………………………………………………………………

MARCAR LA RESPUESTA CORRECTA

1. Es un software fácil de usar que permite crear páginas web profesionales.
a) Adobe Flash b) Adobe Dreamweaver c) Adobe Photoshop
2. Contiene el nombre del programa y seguidamente el nombre del documento que aparecerá en el
explorador y entre paréntesis, su ubicación y el nombre del archivo en formato HTML.
a) Barra de menú b) Barra de título c) Barra de estado
3. Contiene íconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como
Abrir , Guardar , etc.
a) Barra de menú b) Barra de herramienta estándar c) Barra de estado

SEÑALA LAS PARTES DE LA VENTANA DE DREAMWEAVER

-Panel de propiedades -Regla horizontal y vertical - Paneles acoplables

-Ventana de documento - Barra de herramienta de documento - Barra Insertar
- Barra de etiquetas

RECONOCE EN EL COMPUTADOR LAS PARTES DE LA VENTANA DE DREAMWEAVER

PARTES DE LA VENTANA SI NO
Barra de título

Barra de menús

Barra de estado

Paneles acoplables

Vista de un documento

Inspector de propiedades
 DISEÑO Y ADMINISTRACIÓN DE UN SITIO

 Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un
objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a
contener.
 La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos
HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las
animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de
tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio
local.
 Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que
equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.

CREAR O EDITAR UN SITIO WEB SIN CONEXIÓN A

INTERNET
 Crear las carpetas que formarán un sitio local(raíz y
predeterminada para imágenes)
 Dirigirse al menú Sitio, a la opción Administrar sitios....
 Aparece el cuadro de dialogo Administrar Sitios.

NOTA: Si no tiene ningún sitio de Dreamweaver definido, aparecerá

el cuadro de diálogo definición del sitio y podrá omitir este paso y
continuar con el siguiente.

 Haga clic en el Botón Nuevo, se desplegará un menú, elegir la

opción Sitio.
 Aparece el cuadro de diálogo Definición del sitio.
 En la ficha Avanzadas, en el cuadro de diálogo Definición
de Sitio que aparece estará seleccionada la categoría Datos
Locales, introduzca las opciones siguientes:
o En el campo nombre del sitio, introduzca un nombre
para el sitio.
o En el campo Carpeta Raíz Local, especifique la carpeta
del disco duro en la que desea almacenar los
archivos,plantillas,etc
o En el campo Carpeta predeterminada de imágenes
especifique la carpeta en la cual se almacenará las imágenes(por lo general dentro de la carpeta Raíz
local)

o En el campo Dirección HTTP, Introduzca el URL que utilizará el sitio Web finalizado, de modo que
Dreamweaver pueda verificar los vínculos del sitio.
o Haga clic en Aceptar. Se abrirá el panel Archivos del sitio.

LA VENTANA SITIO

Utilice el panel Sitio para realizar operaciones de mantenimiento estándar, como

crear nuevos documentos HTML; ver, abrir y mover archivos; crear carpetas; y
borrar elementos. También puede utilizar el panel Sitio para transferir archivos
entre los sitios local y remoto.

ABRIR UN SITIO

 Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción
Administrar sitios....
 Seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.
 También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a
abrir en el menú desplegable de la pestaña Archivos.
VISTAS DE UN SITIO
Es posible visualizar un sitio en el panel Archivos o en
una ventana.
El panel Archivos se puede abrir a través del menú
Ventana, opción Archivos. También pulsando F8.

Para cambiar de una vista a otra hay que pulsar sobre el

botón que aparece en la parte superior del panel y
de la ventana.
Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el mapa
del sitio.

PROPIEDADES DEL DOCUMENTO

Este cuadro se puede abrir de tres modos diferentes:
 Pulsar la combinación de teclas Ctrl+J.
 Hacer clic sobre el menú Modificar y elegir la
opción Propiedades de la página.
 Hacer clic con el botón derecho del ratón sobre el
fondo de la página. Aparecerá al final del menú
contextual la opción Propiedades de la página.
Se abrirá el cuadro de diálogo siguiente:

PRÁCTICA DE SESIÓN
 FORMATO DE 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.

CARACTERÍSTICAS DEL TEXTO

Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a través del
inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de
propiedades, aunque sean menos que las que se nos ofrecen a través del menú Texto.

 Formato:
Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o
preformateado. Los encabezados se utilizan para establecer títulos dentro de un documento.

 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.

 Tamaño:
Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles,
centímetros, etc.

 Color:
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de
la página. Si no se ha establecido ningún color en las propiedades de la página 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.

 Alinear:
A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas
distintas: izquierda, centrada, derecha y justificada.

 Lista:
Estos botones permiten crear listas con viñetas o listas numeradas.

 Sangría:
Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que
se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del
texto.

ESTILOS CSS
En el menú Texto, opción Estilo, aparecen una serie de estilos predefinidos que pueden aplicarse al texto
seleccionado.
Los estilos CSS están en hojas de estilo de actualización automática (también denominadas Hojas de
Estilo en Cascada) se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el
tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la
asignación de esos mismos valores a otras partes del texto.

CREACIÓN DE UN ESTILO PERSONALIZADO

1. En el documento, se selecciona el texto al que se desea aplicar características concretas.
2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen los
atributos de la fuente y del párrafo que queramos.

Automáticamente Dreamweaver creará un nuevo estilo con el nombre Estilo1 o

Estilo2 o Estilo3,... según los nombres de los estilos ya creados.

Aparecerá el nombre Estilo1 en el cuadro Estilo del panel Propiedades.

CAMBIAR NOMBRE DE UN ESTILO

También se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qué
tipo de texto se va a aplicar. Para ello desplegamos la lista de estilos y
seleccionamos la opción Cambiar nombre... Aparecerá un cuadro de
diálogo para que introduzcamos el nuevo nombre como la imagen inferior.

NOTA: Cada nuevo estilo que se crea, se añade a la lista de estilos, y los podemos acceder también de una
manera rápida a través del menú Texto, opción Estilos CSS.

PARA APLICAR UN ESTILO CSS PERSONALIZADO:

 Selecciona el texto al que deseas aplicar el estilo CSS, o sitúa el punto de inserción del mouse en un
párrafo para aplicar el estilo a todo el párrafo.
 En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al
desplegar el cuadro Estilo.

EL PANEL CSS
Cada nuevo estilo que se crea, se añade a la lista de estilos, y los podemos acceder
también de una manera rápida a través del menú Texto, opción Estilos CSS.
En el Panel CSS se puede verificar que se ha añadido automáticamente el nuevo estilo.

PRÁCTICA DE SESIÓN
 IMÁGENES
TIPOS DE IMÁGENES PARA UNA WEB
 Formato GIF: Utilizan un máximo de 256 colores. Suelen utilizarse con gran frecuencia, ya que
permiten contener transparencias y animación.
 Formato JPG: Las imágenes son de mayor calidad que las GIF, al poder contener millones de
colores, pero el tamaño de la imagen es mayor y tarda más en descargarse.
Si introduces una imagen BMP en Dreamweaver, te aparecerá un cuadrado gris en su lugar. La imagen
solo se mostrará correctamente en el navegador.
Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de
imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc.

INSERTAR UNA IMAGEN

 Ir menú Insertar, a la opción Imagen
 Después de esto, seleccionar una imagen a través de la nueva
ventana.
NOTA:
 Si por algún motivo se desea insertar un BMP, este no aparecerá a no ser que en Tipo se seleccione
Todos los archivos.
 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:

PROPIEDADES DE UNA IMAGEN

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

 Desde el campo Alt podrás asignarle una ayuda contextual a la imagen, está se mostrará cuando
coloques el mouse sobre ella.

 Si le damos un valor al campo Vínculo convertiremos la imagen en un link (enlace) a otra página.
Para enlaces externos recuerda que debe empezar siempre por HTTP://
 En caso de que le hayas asignado un vínculo podrás decidir en qué ventana quieres que se abra
seleccionando un valor en el campo Destino.
 Puedes asignarle un tamaño de borde desde el campo Borde.
 Y puedes seleccionar su alineación con respecto al texto desde el campo Alinear.
 Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen del texto
y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical y horizontal
respectivamente entre la imagen y el texto

CAMBIAR EL TAMAÑO DE UNA IMAGEN

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes, sólo para visualizarlo dentro de la
página, pues el cambio no se da directamente sobre el archivo de la imagen.
Imagen con tamaño modificado
Imagen original

Existen dos formas de modificar el tamaño de una imagen

 Seleccionar la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen
alrededor de la imagen.
 La otra es a través de inspector de propiedades, cambiando los campos An (anchura) o Al
(altura). Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen
MAPAS DE IMAGEN
  Los mapas de imagen son partes de una imagen que pueden ser utilizadas para asignarle algún tipo
de comportamiento.
 Para crear un mapa de imagen es necesario seleccionar previamente la
imagen en la que se desea crear el mapa, y abrir el inspector de
propiedades de dicha imagen.
 Estando seleccionada la imagen, ya es posible crear un mapa a través de
los botones del inspector de propiedades que tienen el siguiente
aspecto: . Si no te aparecen despliega el panel Propiedades para verlo completo.
 Los tres últimos botones son los que se utilizan para crear los mapas. Dichos mapas pueden tener
forma rectangular, circular, o libre, dependiendo del botón pulsado.

IMAGEN DE SUSTITUCIÓN: ROLLOVER

o Un rollover es una imagen que cambia por otra cuando el puntero se
sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en
los botones para desplazarnos a través de distintas páginas.
o Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción
Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de
sustitución.
PRÁCTICA DE SESIÓN: Insertar la siguiente imagen y aplicar propiedades.

 Ingresar a Dreamweaver(página en blanco – tipo HTML)

 Crear un sitio local de nombre: Imágenes (carpeta raíz… Prueba e imagenes)
 Insertar la imagen Ugarte.JPG que se encuentra en la carpeta imágenes del disco local D
 Cambiar el tamaño de la imagen 320 x 250 , centrada y tendrá un borde de número 2
 Guardar el documento dentro de la carpeta prueba del sitio, con el nombre Index.html
 Creamos un nuevo documento Archivo – Nuevo – crear página en blanco HTML.
 Insertar la imagen Presidente.JPG que se encuentra en la carpeta imágenes del disco local D,
centrar la imagen y darle un borde de número1 y guardarlo como presidente.html
 Crearemos el vínculo de la imagen Ugarte.JPG a el documento presidente.html
 Pulse F12 para ver el resultado en su navegador.

PRÁCTICA DE SESIÓN: Crear un mapa de imagen.

 Crearemos un documento nuevo Archivo – Nuevo e insertar la imagen ministro.JPG y lo

guardamos como ministro.html
 Utilizar la herramienta de mapa Zona interactiva poligonal y seleccionar la imagen del ministro, en
el panel de propiedades insertamos vínculo a logoministerio.html(luego se creará) destino:parent
 Crearemos un documento nuevo Archivo – Nuevo e insertar la imagen logoministerio.JPG y lo
guardamos como logoministerio.html

PRÁCTICA DE SESIÓN: Crear un Rollover.

 Crearemos un documento nuevo Archivo – Nuevo y lo guardamos como rollover.html
 Imagen original: presidente.JPG, imagen de sustitución: ministro.JPG y al hace clic ir a la imagen
Ugarte.JPG(tomar como referencia el cuadro de arriba)
 INSERTAR OBJETOS FLASH
BOTONES FLASH
Existen otra serie de imágenes especiales, similares a los rollovers, que suelen utilizarse para crear menús,
como pueden ser los botones Flash.
 Para insertar un botón Flash hay que dirigirse al menú Insertar, Media, a la opción Botón Flash,
aparecerá el siguiente cuadro de diálogo.
 También podemos acceder desde la barra de herramientas
Insertar.
 Seleccionar un estilo de nuestra preferencia.
 Especificar también el Texto que mostrará el botón
(Texto del botón:), así como el nombre con el que será
guardado (Guardar como:) y el vínculo asociado
(Vinculo: y Destino:).
 Recuerda que los botones deben guardarse con la extensión SWF
 Puede volver a abrirse el cuadro de diálogo anterior pulsando sobre el botón Editar, y a través del
botón Reproducir es posible probar el funcionamiento del botón Flash desde Dreamweaver, sin la
necesidad de tener que abrir la página con algún navegador.
 Después de haber probado el funcionamiento del botón Flash, debe pulsarse de nuevo sobre el botón
Reproducir (que habrá cambiado por el botón Detener) .
EJERCICIO:
o Insertar botones Flash según consta
en la imagen(estilo: slider)
o Fuente:verdana, tamaño:12
o Color de fondo de preferencia.
o Que se guarde por defecto.

TEXTO FLASH
El texto Flash es similar a un rollover, pero en lugar de intercambiar imágenes intercambia el color del texto.
 Para insertar texto Flash hay que dirigirse al menú Insertar, Media, a la opción Texto Flash.
 También podemos acceder desde la barra de herramientas Insertar.
 En la nueva ventana, además del texto, el vínculo y el nombre con el que será guardado el texto, hay
que especificar el color original y el de sustitución.
EJERCICIO:
o Insertar texto Flash según consta en la imagen: “Ir al
logo del Ministerio”(Fuente:M. corsiva tamaño:30)
o Color: rojo – Color de sustitución: azul.
o Vínculo: Logoministerio.html
o Destino: _Blank
o Color de fondo: celeste
o Guardar por defecto y aceptar.
o Ir al navegador: Archivo – vista previa en el
navegador – Iexplorer o F12

NOTA:
Como vínculo puede ser un documento(index.html), un blog(¡Error! Referencia de hipervínculo
no válida. página web(http://www.minedu.gob.pe)

INSERTAR ANIMACIONES REALIZADAS EN FLASH

 Para insertar animaciones realizadas en Flash hay que dirigirse al menú Insertar, Media, a la
opción Flash o FlashPaper
 También podemos acceder desde la barra de herramientas Insertar.
 Buscar el archivo flash tiene una extensión .SW y es de color plomito.
 Podemos visualizar la animación haciendo clic en la opción Reproducir o Detener
 Si tenemos instalado Flash es posible editarlo, haciendo clic en la opción editar
PRACTICA DE SESIÓN N°1 Insertar los siguientes botones Flash
 Ingresar a Dreamweaver – Archivo - Nuevo(página en blanco – tipo HTML)
 Crear un sitio local de nombre: botones (carpeta raíz… flash e imagenes)
 Crear 5 documentos e insertar texto e imagen según consta, guardarlos con los siguientes nombres:
index.html,animales.html,vegetales.html,naturales.html y culturales.html
 En el documento Index.html insertar los botones flash de estilo: Corporate – Green.
o Fuente: Georgia – tamaño: 14 guardarlos con los nombres predeterminado.
o Cada botón creará un vínculo a otra página según consta en la imagen.
NOTA:
Las imágenes a insertar tienen el mismo nombre que las páginas, ejemplo: animales.JPG

PRACTICA DE SESIÓN N°2 Insertar texto Flash

 Archivo - Nuevo(página en blanco – tipo HTML)
 Guardarlo como textoflash.html
 Aplicar los atributos al texto “ir a la página naturales”, según consta
en la imagen de la derecha.
 Fuente: Monotype Corsiva, Tamaño: 30
 Color: azul, Color de sustitución: verde
 Vínculo a naturales.html
 Color de fondo: Celeste
 TABLAS
 Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es
posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de
cosas que sin las tablas serían imposibles de realizar.
 Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar
notablemente las opciones de diseño.

INSERTAR UNA TABLA

 Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla. O
también desde la Barra de herramienta estándar.
 En la nueva ventana habrá que especificar el número de Filas y Columnas
que tendrá la tabla, así como el Ancho de la tabla
 El Ancho puede ser definido como Píxeles o como Porcentaje
 Grosor del Borde indica el grosor del borde de la tabla en píxeles, por
defecto se le asigna uno
 Si queremos incluir un título, lo indicamos en Texto, el título aparecerá
fuera de la tabla.
 En alinear texto indicamos dónde queremos alinear el título con respecto a la tabla

NOTA. Si se selecciona toda la tabla

Dreamweaver muestra en una zona verde
el ancho de la tabla y de cada columna

RELLENAR LAS CELDAS

 Las celdas son cada uno de los recuadros que forman una tabla, resultan de la intersección entre una
fila y una columna.
 Para poder insertar algún elemento en una celda, ya sea texto o imágenes, simplemente hay que
situar el cursor previamente dentro de la celda deseada.

SELECCIONAR ELEMENTOS DE UNA TABLA

 Estando el cursor en la tabla ir a menú Modificar –Tabla – Seleccionar Tabla.
 Menú contextual sobre la tabla Tabla – Seleccionar tabla.
 También es posible seleccionar una tabla pulsando con el ratón sobre el borde
que la rodea, o pulsando sobre la etiqueta <table> que aparece en la barra de estado de la ventana de
documento.
 Junto a los anchos se encuentran unos menús desplegables
(menú de encabezado de la tabla y menú de encabezado de la
columna). Estos menús permiten acceder rápidamente a
determinados comandos relacionados con la tabla.
 Haciendo clic sobre la imagen o seleccionando el texto,
podemos cambiar sus atributos en el inspector de propiedades.

FORMATO DE UNA TABLA

Formato para toda la tabla – seleccionar la tabla Formato para una celda – seleccionar la celda –fila o columna

 El valor alinear, alinea la tabla a la izquierda, centro o derecha.

 El color de fondo de toda la tabla(Col. Fondo), color de borde(Col.Borde), grosor del borde(Borde)
  Si el borde es (0) no será visible.
 Haciendo clic sobre una delas celdas podemos cambiar algunos atributos como el color de fondo de
la celda, color de borde la celda.
 Horiz y Vert, definen la alineación del contenido de la celda de forma horizontal y vertical
respectivamente.
 La opción An y Alt definen el ancho y altura de la tabla – celda.

AÑADIR Y ELIMINAR FILAS Y COLUMNAS

 Existen varias formas de añadir 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 botón derecho sobre ella, o bien abrir el menú
Modificar. En ambos casos aparece la opción Tabla.

ANIDAR Y COMBINAR CELDAS

 Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas.
 Para anidar tablas sólo 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 más celdas en una sola por lo que dejará de haber
borde de separación entre una celda y otra ya que serán una sola.
 Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón del inspector de
propiedades (lo encontrarás en la parte inferior izquierda del panel Propiedades, o pulsando sobre la
opción Combinar celdas de la opción Tabla, que como ya has visto puedes dirigirte a ella a través
del menú contextual de la tabla y a través del menú Modificar.

TABLA ANIDADA

CELDAS COMBINADAS

PRÁCTICA DE SESIÓN: Crear la siguiente página web en base a Tablas.

 Estando en Dreamweaver, Archivo - Nuevo(página en blanco – tipo HTML)

 Insertar una tabla de 3 columnas por 3 filas (ancho de 74%)
 Tabla alinear: al centro, Borde(0)
 Para ingresar el título “Bienvenidos a mi página Web con tablas” se combinó todas las celdas de la
primera fila.
 En la columna posterior ingresar botones flash, texto e imágenes según consta en el gráfico.
 La última fila se combinó en ella se ingresó el texto “Somos una Institución Educativa que
brinda Educación de Calidad”

Texto flash
Color de Rojo a Ugarte2.JPG
Azul Tamaño: 500 x
350

Botones flash
Estilo: corporate
orange
 MARCOS
Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas
algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar

CREAR MARCOS
 Abrimos un documento nuevo o existente.
 Menú Insertar – HTML – Marcos, elegir el tipo de
marco que se va a crear.
 Vamos a ver el marco a la izquierda, se creará un
nuevo marco a la izquierda del documento actual.
 Aparece una línea que divide el documento en dos. El
documento de partida era uno nuevo
NOTA:
 Tendremos tres documentos, el de la izquierda, el de la derecha y el que contiene el grupo de
marcos
 Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que
separa los marcos, esto sólo es posible cuando se haya guardado (grupo, izquierda, derecha con
extensión HTML)

SELECCIONAR MARCOS
Para seleccionar los marcos es necesario dirigirse al panel de marcos.
 Menú ventana – Marcos
 En el panel marcos aparece los marcos que contiene el documento de
marcos
 Se puede pasar de uno a otro haciendo clic en el panel de marcos
 Para seleccionar la página de marcos se debe pulsar sobre el borde que
rodea a los marcos.

GUARDAR
 Todos los documentos que contienen marcos tienen que tener una página en cada uno de ellos
 Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya existentes
 Es necesario guardar la página que contiene el grupo de marcos, así como cada una de las páginas
que están incluidas en sus marcos
 No es conveniente guardar la primera vez los marcos con la opción Guardar todo , ya que
podemos equivocarnos al dar los nombres a los nuevos documentos.
 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 .

Izquierdo.html derecho.html

principal.html

CONFIGURAR MARCOS
Seleccionar los marcos a través del panel de marcos y establecer sus propiedades mediante el inspector de
propiedades.
o A través de nombre de marco podemos asignarle un nombre al marco(sin espacios en blanco)
o En origen aparece el nombre del documento HTML, que está contenido en el marco.
o En Bordes, puede elegir si aparece o no una línea separando el marco del resto de marcos.
 o Si aparece el borde, se puede especificar un color a través de Color borde.
o Desplaz, indica si aparecerán o no las barra de desplazamiento cuando el documento del marco no
pueda visualizarse completamente.
o Si la opción mismo tamaño está activa, indica que los usuarios no podrán variar las medidas del
marco desde el navegador.

CONTENIDO DEL MARCO

 Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos.
El contenido de los marcos ha de ser fijo, mientras que el de otros ha de poder variar
 A través del campo origen del inspector de propiedades, sólo es posible el documento que se
cargará inicialmente en el marco, pero hemos de poder cambiar este documento por otro a través de
vínculos.

PRÁCTICA CALIFICADA DE SESIÓN

 Abrir el sitio que se ha estado trabajando.

 Estando en Dreamweaver, Archivo - Nuevo(página en blanco – tipo HTML)
 Insertar marcos con la opción Izquierdo anidado superior.
 Para guardar unas de las formas Archivo – Guardar todo.
 Una de las formas de guardar es Archivo – Vista previa en el navegador – Iexplorer, aceptar la
pantalla que sale, de esta forma visualizamos marco por marco que vamos a guardar (se resalta).
 Ingresar textos haciendo clic en cada marco, especificar fuente, color, tamaño y alineación
 El estilo de botones flash es Glass – Purple, fuente: verdana, tamaño:12
 Insertar la imagen logo_movistar.GIF (tamaño 100 x 80) centrado.
 Insertar la imagen ugarte2.JPG (tamaño 500 x 350) centrado.

Prasuperior.html

Praderecho.html Praderecho.html

Praprincipal.html