Você está na página 1de 24

Diseo de Sitios Web Pgina 1

U

P

T







UNIVERSIDAD POLITCNICA DE TULANCINGO




MANUAL PRACTICO
DE DREAMWEAVER












Lic. Marco Antonio Lechuga Gaona





Diseo de Sitios Web Pgina 2




U

P

T




Introduccin a DREAMWEAVER

Qu es Dreamweaver?

Dreamweaver es un software fcil de usar que permite crear pginas web
profesionales.


Dreamweaver provee una ventana de todo en uno integrada. En el espacio
de trabajo integrado, todas las ventanas y paneles son integrados dentro de
una sola ventana de aplicacin.
En la ventana de entorno de trabajo tienes una barra de titulo, la barra de
titulo despliega los ttulos de las pginas, y en parntesis la direccin del
nombre del archivo.
La Ventana Documento
La ventana Documento muestra lo que le ocurre a nuestro documento.
Puedes seleccionar cualquiera de las siguientes vistas:
Vista Diseador es un entorno de desarrollo grafico visual, edicin, y
entornos de aplicacin rpidos. En esta vista, Dreamweaver se despliega
completamente editable, con representacin visual del documento, similar a
como se puede mirar en el explorador.

Vista programador (cdigo) es un entorno de cdigo a mano para escribir y
editar en HTML, Java Script, lenguaje de Servidor como PHP o ColdFusion
Markup Lenguaje (CFML), y cualquier otra clase de cdigo.

Diseo de Sitios Web Pgina 3




U

P

T




Vista doble es un entorno de desarrollo grfico y de cdigo, la ventana
documento se partir a la mitad mostrando la vista cdigo y vista diseo en
el orden mencionado.
En la ventana documento tienes el nombre de la pagina actual, despus del
nombre del archivo, Dreamweaver despliega un asterisco si tienes cambios
que aun no has guardado.
Cuando la ventana Documento es restaurada en todo el entorno de trabajo,
esta no tiene un titulo de barra, en este caso el titulo de la pgina y los
archivos aparecen en el titulo de la barra de la ventana de entorno de
trabajo.
Adicionalmente, cuando la ventana Documento es maximizada, las pestaas
de arriba del rea de la ventana documento muestran los nombres de los
archivos de todos los documentos que se encuentran abiertos. Para acceder
al documento, dar un clic en la pestaa.
La Barra de Herramientas del Documento.
La barra de herramientas del Documento contiene botones que se muestran
entre las diferentes vistas de tu documento: Cdigo y Diseo, y una vista
total que muestra la Vista Cdigo y la Vista Diseo.
La barra de herramientas tambin contiene algunos de los comandos ms
comunes y opciones relacionadas para ver el documento y transferirlo entre
el sitio local y el remoto.
Las siguientes opciones aparecen en la barra de herramientas del
Documento:
Vista Cdigo: Despliega solo el cdigo en la ventana Documento.
Vista Cdigo y Diseo: Despliega la vista Cdigo en parte de la ventana
Documento y la vista Diseo en otro parte. Cuando seleccionas esta vista
combinada, la opcin de Vista Diseo est disponible sobre la vista de
opciones del men.
Vista Diseo: Despliega solo el diseo en la ventana Documento.
Titulo del Documento: Puedes aadir un titulo para tu documento, para que
se despliegue en la barra de titulo del explorador. Si tu documento ya tiene
un ttulo, aparecer en el campo.
Sin Explorador/Verificar Errores: Habilita la verificacin de tu
compatibilidad de explorador.
Marca de Validacin: Valida lo que ocurre en el documento o una pestaa
seleccionada.
Administrador de Archivos: Despliega el men para administrar los
archivos.


Diseo de Sitios Web Pgina 4




U

P

T




Vista Previa/Compilar en el Explorador: Muestra una vista previa o
compilada de tu documento en el explorador. Selecciona un explorador en el
men.
Actualizar la vista Diseo: Actualiza la vista diseo del documento despus
de hacer cambios en la vista Cdigo.
Opciones de Vista: muestra las opciones para la vista Cdigo y Diseo,
incluyendo que vistas deben aparecer sobre la otra.
Ayudas Visuales: Le da diferentes ayudas visuales para disear sus
pginas.

La barra de Estado.
La barra de estado, est en la parte de bajo de la ventana documento y
provee informacin adicional acerca de la documentacin que estas
creando.


Diseo de Sitios Web Pgina 5




U

P

T




Selector de tags (etiquetas): Muestra la jerarqua de las pestaas
agrupando la seleccin escogida. Al dar clic en cualquier etiqueta se muestra
la jerarqua de esta etiqueta y todo su contenido. Dar clic en <body> para
seleccionar el cuerpo entero del documento.

Herramienta Seleccionar: Para deshabilitar la herramienta mano y la
herramienta Zoom.
Herramienta de Zoom y el men desplegable de Zoom: Te permite Agrandar
el nivel de visualizacin para tu documento.
Men desplegable de Tamao de la Ventana: (visible solo en Vista Diseo)
te permite cambiar el tamao de la ventana Documento para predeterminar
nuestras dimensiones. Y para estimar el tiempo de descarga de la pgina,
incluyendo todos los archivos dependientes como imgenes y otros archivos
multimedia.
Inspector de Propiedades
El Inspector de Propiedades permite examinar y editar las propiedades ms
comunes de elementos seleccionados en la pgina, como son texto, o un
objeto insertado tal como una imagen, tabla, frames, div.
El contenido del inspector de propiedades vara dependiendo sobre que
elemento se haya seleccionado. Por ejemplo, si seleccionas una imagen en
la pgina, el inspector de propiedades cambia las propiedades que mostrara
para la imagen.
El Inspector de Propiedades esta en el espacio de trabajo por default, pero
puedes quitarlo si lo deseas. O puedes hacer que este flotando por el
espacio de trabajo.

Panel de Archivos.
Puedes usar el Panel de Archivos para ver y
administrar los archivos en tu sitio de
Dreamweaver.
Cuando ves tus sitios, archivos o carpetas en
el Panel de Archivos, puedes cambiar el
tamao de rea de vista, o bien expandir o
colapsar el Panel de Archivos. Cuando el
Panel de Archivos es expandido despliega los
contenidos de un sitio local, el sitio remoto, o
examina el servidor como una lista de
archivos. El Panel de Archivos puede tambin
desplegar un mapa visual del sitio.


Diseo de Sitios Web Pgina 6




U

P

T




Para los sitios de Dreamweaver, puedes usar el Panel de Archivos para los
cambios de vista- de local a remoto- por default aparece el panel colapsado.

Cuando entramos a Dreamweaver lo primero que vemos es esta pantalla:

1) Esta va a ser nuestra primera pgina web. Lo primero va a ser ponerle un
ttulo. Para ello vamos a seguir los siguientes pasos:
Pulsar con el botn derecho sobre cualquier parte de la hoja en blanco y
seleccionar la opcin Propiedades de la pgina.

Aparecer la siguiente ventana, en ella pondremos el ttulo que tenemos
aqu y como color de fondo pondremos el naranja.



Diseo de Sitios Web Pgina 7




U

P

T




a. Hasta ahora deberamos tener una pgina web donde arriba del
todo ponga el ttulo que hemos introducido y como color de fondo tengamos el
color naranja. Ahora vamos a introducir el siguiente texto:


b. Para conseguir los efectos que hay en el texto que acabas de copiar
(negritas, letras en colores, cursivas, etc.) se debe recurrir a la ventana
de propiedades. Para ello seleccionaremos el texto deseado (por
ejemplo: botn derecho del ratn debe ir en negrita) y se pone
pulsando sobre


4) Crear dentro de vuestra carpeta de alumno una carpeta llamada DREAM
y dentro guardar esta pgina con el nombre pagina1.htm


Prctica 2 -

Configuracin de un sitio local
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s,
con un diseo similar o un objetivo comn. Es necesario disear y planificar
el sitio web antes de crear las pginas que va a contener.

Por ejemplo si vamos a crear una pgina web sobre un equipo de ftbol, lo
primero es crear un sitio web (por ejemplo que se llame ftbol) y dentro de
ese sitio ya irn las diversas pginas que formen parte de l. Como por
ejemplo presentacion.htm, palmares.htm, plantilla.htm, etc.

La forma habitual de crear un sitio web consiste en crear una carpeta en el
disco local. Los documentos HTML normalmente se crean dentro de dicha
carpeta, mientras que para contener las imgenes, las animaciones, las
hojas de estilo, etc., se deben crear nuevas carpetas dentro de sta, con el
objetivo de tener una mejor organizacin de los archivos a la hora de
trabajar.

Diseo de Sitios Web Pgina 8




U

P

T





Es muy importante que la pgina principal del sitio tenga el nombre
index.html, ya que los navegadores buscan una pgina con ese nombre
cuando se intenta acceder a una URL genrica. Por ejemplo, si
escribiramos la direccin genrica http://www.petrer.es/ en el navegador,
ste intentara cargar la pgina http://www.petrer.es/index.html, por lo que
se producira un error en el caso de que no existiera ninguna pgina con el
nombre index.html


Crear o editar un sitio web
Una vez creadas las carpetas que formarn un sitio local, ya es posible
definir el sitio en Dreamweaver. Para ello hay que seguir los siguientes
pasos:

1) Deberis tener creada dentro de vuestra carpeta de alumno una carpeta
llamada DREAM
2) Dirigirse al men Sitio, a la opcin Nuevo sitio. All veremos la siguiente
pantalla:




Cuando aceptamos nos aparecer una nueva ventana que ser el sitio web.

3) Ahora nos vamos a la otra ventana, la que est toda en blanco y vamos a
definir tal y como hicimos en la prctica anterior las propiedades de la
pgina (se haca pulsando con el botn derecho y seleccionando la
opcin Propiedades de pgina). Introduciremos los siguientes valores:

Titulo: Primera pgina del sitio web
Color de fondo: Azul claro






Diseo de Sitios Web Pgina 9




U

P

T




5) Utilizando los elementos de la barra de propiedades, escribir el siguiente
texto en la pgina que tenis abierta:





6) Guardar la pgina con el nombre index.html dentro del sitio web
DREAM






Diseo de Sitios Web Pgina 10




U

P

T




Prctica 3 -
1) Vamos a crear dos pginas web nuevas, para ello nos
vamos al men Archivo/ Nuevo.

La primera la guardaremos con el nombre prueba1.htm dentro del sitio
web DREAM y dentro tendr el siguiente texto:

Texto de la pgina prueba1.htm

La segunda la guardaremos con el nombre prueba2.htm dentro del
sitio web DREAM y dentro tendr el siguiente texto:

Texto de la pgina prueba2.htm

2) Ahora vamos a abrir la pgina index.html y en ella escribiremos al final
de la pgina el siguiente texto:
Acceso a prueba1
Acceso a prueba2

Queremos establecer hipervnculos para que cuando pulse sobre Acceso a
prueba1 pase a la pgina prueba1.htm. El proceso para realizar esto es
muy sencillo:


- Se abrir una ventana donde especificaremos el destino del hipervnculo.
En este caso seleccionaremos la pgina prueba1.htm
- Realizar este mismo proceso con Acceso a prueba2 y guardar los
cambios

Vistas del sitio
Es posible visualizar un sitio en el panel Sitio o en una ventana. El panel
Sitio se puede abrir a travs del men Ventana, opcin Sitio. Tambin
pulsando F8 o sobre el botn del lanzador.

3) Vamos a hacer la prueba con nuestro sitio web DREAM. Si todo ha ido
bien hasta el momento deberamos tener 3 pginas web: index.html,
prueba1.htm y prueba2.htm.

Diseo de Sitios Web Pgina 11




U

P

T






En esta imagen se visualizan el mapa del sitio y el sitio local.
En este caso los documentos prueba1.htm y prueba2.htm cuelgan del
documento index.html, ya que ste ha sido definido como pgina principal
del sitio y contiene vnculos hacia los otros dos.

Si los archivos se mueven de una carpeta a otra, o se cambian de nombre,
desde fuera de Dreamweaver, las pginas no se mostrarn correctamente:
no aparecern imgenes, no funcionarn enlaces, etc.

En cambio, si estas modificaciones se hacen desde dentro de
Dreamweaver, a travs del sitio, es posible actualizar automticamente
las pginas para que si hacen referencia a un objeto que ha cambiado,
despus no se produzcan problemas al visualizarlas.

Al modificar algn objeto que es referenciado por algn otro documento, se
muestra una ventana similar a esta, que indica los documentos que hacen
referencia a dicho objeto, y que pueden ser actualizados para que no se
produzcan los problemas antes mencionados.

Simplemente hay que pulsar sobre el botn Actualizar.

4) Cambiar las propiedades de pgina de las pginas prueba1.htm y
prueba2.htm (se haca pulsando el botn derecho y seleccionando
Propiedades de pgina) y ponerles los siguientes atributos:
prueba1.htm
- Color de fondo de color amarillo
- Color de texto de color verde
- Titulo de pgina: Mi segunda pgina web con Dreamweaver : prueba1
- Escribir al final de la pgina el texto Volver e insertar un hipervnculo para
que vuelva a
index.html

prueba2.htm
- Color de fondo de color naranja
- Color de texto de color azul
- Titulo de pgina: Mi tercera pgina web con Dreamweaver : prueba2
- Escribir al final de la pgina el texto Volver e insertar un hipervnculo para
que vuelva a
index.html

Diseo de Sitios Web Pgina 12




U

P

T





Guardar los cambios y ver si ha cambiado algo en el sitio web.

5) Abrir la pgina index.html y pulsar la tecla F12. Con esto conseguimos
ver una vista previa de cmo quedara esta pgina web en el navegador.

Comprobar que todos los hipervnculos funcionan bien y si alguno falla
corregirlo.




Prctica 4 - Imgenes
En este tema vamos a ver cmo insertar imgenes en un documento.
Tambin veremos cmo crear algunas imgenes especiales, como es el
caso de los Rollovers y los botones flash, que ayudan a mejorar la
apariencia de nuestras pginas.

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

1) Vamos a insertar dentro de la pgina index.html de vuestro sitio web
DREAM unas cuantas imgenes. stas debern guardarse previamente
dentro de una carpeta llamada IMAGENES que deberis crear dentro del
sitio web DREAM. Las imgenes a insertar las tenis dentro de la carpeta
C:\ ALUMNO \ RECURSOS PARA EL ALUMNO \ IMGENES:

AERONAVE.JPG ARCO.JPG AVION.JPG CADENA.JPG

Ponerlas una debajo de la otra centradas, utilizando el botn centrar y
guardar la pgina
index.html


Cambiar el tamao de una imagen

Dentro de Dreamweaver puede modificarse el tamao de las imgenes.
Dicho cambio de tamao no se aplica directamente sobre el archivo de
imagen, sino que lo que vara es la visualizacin de la imagen dentro de la
pgina (por lo tanto no es recomendable).

Es muy probable que la imagen resultante no sea de buena calidad, en
comparacin de cmo podra quedar modificndola desde un editor externo,
como Photoshop o Gimp.

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

Diseo de Sitios Web Pgina 13




U

P

T







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

Existen dos formas de modificar el tamao:
Una de ellas es, una vez seleccionada la imagen, arrastrar con
el puntero alguno de los recuadros negros que aparecen
alrededor de la imagen.

La otra es a travs de la ventana de propiedades, cambiando los campos
An (anchura) o Al (altura). Estos campos aparecern en el inspector cuando
sea seleccionada alguna imagen.


Para cambiar la alineacin de la imagen (izquierda, centrada, derecha)
podemos hacerlo igual que hicimos con el texto, utilizando las opciones de
alineacin de la ventana de propiedades.

Pueden crearse vnculos y comportamientos sobre partes de una imagen,
sin la necesidad de que sea sobre toda ella. A esto se le conoce como mapa
de imagen.

2) Vamos a abrir la pgina web index.html y modificaremos el tamao de
las imgenes que antes insertamos, de forma que queden con el siguiente
tamao y alineacin:




Diseo de Sitios Web Pgina 14




U

P

T




3) Ahora crearemos dentro de nuestro sitio web DREAM, tres pginas ms,
llamadas valencia.htm, andalucia.htm y madrid.htm. stas tendrn el
siguiente texto dentro:

- valencia.htm = Pgina principal de la Comunidad Valenciana , con fondo
amarillo
- andalucia.htm = Pgina principal de la Comunidad Andaluza, con fondo
rojo
- madrid.htm = Pgina principal de la Comunidad de Madrid, con fondo
naranja

4) A continuacin, guardad las pginas anteriores y cread una pgina web
nueva llamada mapa.htm, donde aadiremos una imagen del mapa de
Espaa (que previamente os deberis bajar de Google).

Seguidamente definiremos sobre ella un mapa de
imagen. Esto significa que dependiendo de la
zona de la imagen donde pinchemos podremos
abrir un hipervnculo diferente. Para ello utilizaremos la herramienta.



Dibujar con esta herramienta el contorno
de la Comunidad Valenciana y luego
donde pone vnculo, estableced la pgina
valencia.htm.

Haced lo mismo con el resto de Comunidades, guardar los cambios y
comprobad que todo funciona correctamente pulsando sobre F12.

Guardad los cambios a la pgina mapa.htm.

Prctica 5

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, Imgenes
interactivas, a 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.


Diseo de Sitios Web Pgina 15




U

P

T




1) Entrar dentro del sitio web DREAM y crear all una nueva pgina llamada
menu.htm y que tenga las siguientes caractersticas (las imgenes deberis
copiarlas previamente a vuestra carpeta:

- Fondo con la imagen NUBES.JPG situada en la carpeta RECURSOS
PARA EL ALUMNO / IMGENES.

- Color del texto amarillo
- Insertar una imagen de sustitucin con las imgenes 8208.jpg y
8223.jpg 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.htm y prueba2.htm. Elegid las 4 imgenes que queris de la
carpeta RECURSOS PARA EL ALUMNO / IMGENES y ponerle debajo los
textos

Acceso a la pgina prueba1 y Acceso a la pgina prueba2.htm
respectivamente.

Guardad la pgina y comprobar que cambian las imgenes en la vista previa
de la pgina.

2) Aadir en la pgina anterior hipervnculos a los textos que habis escrito,
de forma que se pueda acceder a las pginas index.html, prueba1.htm y
prueba2.htm tanto desde las imgenes como desde los textos. Guardar y
comprobar que funcionan los cambios.


Prctica 6 Botones Flash

Existen otra serie de imgenes especiales, similares a los rollovers, que
suelen utilizarse para crear mens, como pueden ser los botones Flash.
Para insertar un botn Flash hay que dirigirse al men Insertar, Imgenes
interactivas, a la opcin Botn Flash.

A travs de Estilo puede seleccionarse uno de los distintos formatos de
botn que se ofrecen. En esta misma ventana hay que especificar tambin el
texto que mostrar el botn, as como el nombre con el que ser guardado y
el vnculo asociado.

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

Recuerda que los botones deben guardarse con la extensin SWF.



Diseo de Sitios Web Pgina 16




U

P

T




3) Crear una nueva pgina web llamada menu2.htm que tenga color de
fondo rojo y donde pongamos 4 botones flash con las siguientes
propiedades:



A travs del inspector de propiedades del botn Flash es posible editar de
nuevo sus atributos. Puede volver a abrirse la ventana anterior pulsando
sobre el botn Editar, y a travs del botn Reproducir es posible probar el
funcionamiento del botn Flash desde Dreamweaver, sin la necesidad de
tener que abrir la pgina con algn navegador.

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



4) Cambiar las propiedades de los botones que antes habis insertado para
hacerlos un poco ms grandes. Tambin podis cambiar alguno de los
estilos anteriores (desde Editar...) si no os gustan. Guardar y probar cmo
han quedado.

5) Aadirles un parmetro para que cada uno de los botones tengan el fondo
transparente. En este caso lo haremos pulsando sobre Parmetros y
poniendo parmetro=wmode y Valor=transparent. Guardar los cambios y
comprobar el efecto producido.










Diseo de Sitios Web Pgina 17




U

P

T




Tablas

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

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

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

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

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


Insertar una tabla

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

En la nueva ventana habr que especificar el nmero de Filas y Columnas
que tendr la tabla, as como el Ancho. El Ancho puede ser definido como
Pxeles o como
Porcentaje.

Borde indica el grosor del
borde de la tabla, Relleno
de celda indica la
distancia entre el
contenido de las celdas y
los bordes de stas, y
Espacio entre celdas
indica la distancia entre
las celdas de la tabla.




Diseo de Sitios Web Pgina 18




U

P

T





Crear la tabla que tenis a continuacin dentro de la pgina index.html:

Poner como colores
de arriba hacia
abajo: marrn,
naranja, rojo,
y amarillo claro.
Guardar los cambios
y comprobar cmo
ha quedado.



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



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

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



La parte superior del inspector de propiedades en este caso sirve para
especificar las propiedades del texto que se insertar dentro de la celda (o
celdas) seleccionada. La parte inferior sirve para especificar valores propios
de la celda, como puede ser el color o imagen de fondo (diferentes de los
especificados para la tabla global), el color del borde de la celda, etc.

2) Crear una pgina web que tenga como ttulo Meses del ao y un
encabezado en la primera lnea que ponga Mes de Abril. A continuacin
deberis definir la tabla necesaria para albergar este mes. Guardar la pgina
con el nombre abril.htm dentro de vuestro sitio web DREAM. Adems la
pgina debe tener las siguientes caractersticas:

Diseo de Sitios Web Pgina 19




U

P

T





- color de fondo verde
- color de fondo de la tabla de color naranja
- letras para cada fila en un color diferente.



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.







Diseo de Sitios Web Pgina 20




U

P

T




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 la pgina web abril.htm situada dentro de vuestro sitio web. Aadir
una columna a la derecha y otra a la izquierda y tambin una arriba y otra
abajo. Deberis poner como color de fondo de las celdas creadas el color
gris. Esto lo podis hacer seleccionando las celdas y pulsando sobre el
botn.

Guardar la tabla resultante con el nombre abril_modificado.htm Debe
haberos quedado algo similar a esto, donde los datos de la tabla son los que
pusisteis en la prctica anterior:



Anidar, dividir y combinar celdas

Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le
llama anidar tablas. A continuacin tienes un ejemplo de anidamiento. Como
puedes ver, en la primera celda de una tabla se a insertado otra tabla.



2) Crear en una pgina web nueva el ejemplo anterior, donde insertaris una
tabla de 2 filas por 2 columnas y en el interior de la primera celda volveris a
introducir una tabla de ese tamao. Poner a la primera tabla el color de
fondo verde claro y a la tabla interior el color naranja.


Diseo de Sitios Web Pgina 21




U

P

T




El ttulo de la pgina ser Tablas anidadas, tendr como color de fondo el
gris y la deberis guardar con el nombre tablas2.htm dentro de vuestro
sitio web DREAM.

Una de las formas de dividir y combinar celdas es a travs del inspector de
propiedades, con los botones.



Si se seleccionan varias celdas pueden combinarse pulsando sobre el
botn del inspector de propiedades. Tienes que tener en cuenta 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 Dividir celda de la opcin Tabla.

3) 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
- insertar una nueva tabla a continuacin de 5 filas x 6 columnas y guardar
los cambios realizados.

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

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

Cada uno de los marcos de una pgina, contiene un documento HTML
individual. Por ejemplo, en la imagen de la derecha puedes ver una pgina
con tres marcos.









Diseo de Sitios Web Pgina 22




U

P

T









Marco izquierdo
- Marco derecho o
principal
- Marco de arriba







Para poder visualizar la pgina de este modo, hemos tenido que abrir en el
navegador una pgina web (index.html) que es la que incluye a todas las
dems.


Crear marcos

1) Para crear un marco, primero hay que abrir algn documento. En este
caso vamos a crear uno nuevo dentro de nuestro sitio web DREAM (Archivo
/ Nuevo).

Lo primero que hay que hacer es dirigirse al men Insertar, a la opcin
Marcos. A travs de esta opcin puede elegirse el tipo de marco que va a
crearse.

Pulsaremos sobre Insertar / Marcos / Izquierda se crear un nuevo marco
a la izquierda del documento actual.
A continuacin pulsaremos sobre Insertar / Marcos / Arriba y se crear un
nuevo marco arriba del documento actual.

Como puedes ver en la imagen, aparecen unas lneas que divide el
documento en tres. El documento de partida era uno nuevo.

En este caso tendremos cuatro documentos: el de la izquierda, el de la
derecha, el de arriba, y el que contiene los marcos. El de la derecha es el
documento que tenamos inicialmente, que est en el marco conocido como
marco padre (MainFrame).

Para diferenciar cada uno de los marcos vamos a cambiar el color de fondo
de cada uno de ellos.






Diseo de Sitios Web Pgina 23




U

P

T




Pulsar el botn derecho encima de cada uno de ellos y en Propiedades de
pgina poned los siguientes colores:

- marco principal = amarillo claro
- marco de arriba = rojo claro
- marco de la izquierda = azul claro

2) Por ltimo guardaremos todos los marcos (recordad que ahora tendremos
4 pginas).

Seleccionar la opcin Archivo / Guardar todos los marcos y poned los
siguientes nombres:

- Al marco que engloba a todos los dems lo llamaremos marcos.htm
- Al marco principal lo llamaremos principal.htm
- Al marco de arriba lo llamaremos arriba.htm
- Al marco de la izquierda lo llamaremos izquierda.htm

Con esto ya tendremos guardados cada uno de los marcos de nuestra
pgina. Probad a ejecutarlos desde el navegador (entrar en Mi PC / Alumno /
etc.) y ver cmo ha quedado cada uno de ellos. Deberis comprobar que el
archivo marcos.htm contiene al resto de marcos.

Modificar marcos

Si en algn momento se necesita modificar alguno de los marcos para
hacerlos ms grandes o ms pequeos se puede hacer accediendo al men
Ver / Ayudas Visuales / Marcos. Entonces solamente con pinchar y arrastrar
en el borde del marco lo podremos agrandar.

3) Abrir la pgina marcos.htm y hacer los marcos de la izquierda y el de
arriba ms grandes.

4) Insertar en el marco izquierda.htm botones flash que contengan
hipervnculos a las siguientes pginas (que ya deberamos tener creadas):

prueba1.htm / prueba2.htm / abril.htm / formulario.htm / reservas.htm /
menu.htm

5) Crear usando el Gimp una imagen de tamao 250x75 que tenga el texto
Mi primera pgina de Prueba, guardar esta imagen con el nombre
Imagen1.jpg en vuestra carpeta DREAM. A continuacin insertarla en el
marco de arriba.

6) Guardar la imagen DISPARO.JPG dentro de la carpeta DREAM y a
continuacin insertarla en la pgina principal junto al texto PGINA
PRINCIPAL.

7) Guardar todos los marcos y probar si funcionan bien los hipervnculos.




Diseo de Sitios Web Pgina 24




U

P

T




Modificar propiedades de los marcos

Si en algn momento se necesita modificar las propiedades de los marcos
como puedan ser sus nombres o el de los hipervnculos, se puede hacer
siguiendo las siguientes indicaciones:

8) A travs del men Ventana / Marcos se puede acceder a las propiedades
de cada marco, aprovecharemos para cambiar al nombre a cada marco,
llamndolos respectivamente principal, izquierda y arriba








9) Si en algn momento una pgina no se abre en el marco correcto es
porque debemos indicarle en las propiedades del hipervnculo el destino
hacia dnde va a abrirse la nueva pgina. Por ejemplo, en el ejercicio
anterior puede que se os haya abierto los enlaces en el marco de la
izquierda, cuando nosotros queramos que se abriera en el principal. Para
ello hay que cambiar el destino en las propiedades del botn flash: