Apuntes Dream Weaver

Tema4-Dreamweaver 2008
TEMA 4.- DREAMWEAVWR 2008
1. INTRODUCCIÓN
Se puede establecer una división en dos grupos de los tipos de aplicaciones que permiten
desarrollar páginas web: los editores de texto, en las cuales utilizaremos el lenguaje de HTML
y las aplicaciones WYSIWYG acrónimo de What You See Is What You Get, lo que ves, es lo que
obtienes.
Las páginas web son muy sencillas y generalmente están formadas por 4 elementos básicos.
Texto, imágenes, enlaces y formularios. A éstos luego se le pueden añadir, tablas, marcos ,
hojas de estilo, scripts, animaciones...
Todo esto lo podemos realizar con editores de textoo de forma más sencilla utilizando
aplicaciones. Algunas de ellas NVU, Adobe GoLive, FrontPage, Dreamweaver.
Dreamweaver es una aplicación WYSIWYG que ofrece diferentes herramientas para poder
trabajar de una forma fácil y sencilla sin necesidad de programar en HTML ya que éste se crea
de forma automática.
2. INTERFAZ DREAMWEAVER.
La primera vez que se ejecuta Dreamweaver aparecerá una ventana que nos permite indicar
como queremos trabajar (diseñador o codificador).
Indicaremos diseñador , ya que codificador es para crear las páginas web de forma manual
(programación).
4
1
1.-
Tema4-Dreamweaver MX 2004
Esta ventana está formada por 4 partes:
1. La página web. Aquí se creará la página web. Inicialmente sale un menú para seleccionar
lo que se quiere hacer.
2. Propiedades. Se visualiza las propiedades del elemento seleccionado.
3. Barra de menús y herramientas.
4. Paneles. Sirven para gestionar las hojas de estilo, las bases de datos y efectos
dinámicos, entre otras. Para abrir o cerrar un panel es suficiente con hacer clic sobre
él.
3. CREACIÓN DE UN SITIO WEB.
Cuando se vaya a crear el diseño de una o varias páginas web puede ser de gran ayuda pensar
con detenimiento en los siguientes pasos:
• Seguramente se querrá transmitir una información que se considera valiosa o

interesante por tanto, la claridad, sencillez, una presentación sobria y de descarga
rápida puede atraer y retener a los visitantes de tu página web. Esto implica una
distribución cuidada y organizada de los elementos que se van a usar en la composición
de cada página, como el texto, dibujos, colores de fondo, imágenes, vídeos...
• El diseño de varias páginas requerirá gran cantidad de archivos: de texto, imágenes,
dibujos,.. etc. En este caso es imprescindible que se guarde todos ellos de una forma
organizada y eficaz, es decir, se necesitará crear lo que se llama un SITIO WEB.
3.1.- Simulación de un sitio Web
Para que las aplicaciones WYSIWYG funcionen tenemos que tener instalado un simulador del
Sitio Web. Para ello tenemos que realizar la instalación de un servidor web. Existen diversos
servidores web, como websphere, iplanet o los mas conocidos: IIS y Apache.
3.2.- Instalación de IIS en Windows XP Profesional
Primeros pasos para la instalación de IIS en Windows XP Profesional.

Internet Information Server (IIS) es el servidor de páginas web avanzado de la plataforma
Windows. Se distribuye gratuitamente junto con las versiones de Windows basadas en NT,
como pueden ser Windows 2000 Profesional o Windows 2000 Server, así como Windows XP,
también en sus versiones Profesional y Server.
Estas normas de instalación son aplicables, a nivel general, a las que podemos encontrarnos en
las distintas versiones de los sistemas operativos comentados antes, si bien hemos tomado
Windows XP profesional para relatar los pasos y tomar las imágenes de las pantallas.
2.-
Nota: Windows 95, 98, las versiones Home, de Windows XP, y ME, de Windows 2000, no se admite la instalación de
IIS. En su lugar podemos probar a instalar el Personal Web Server, que se explica en el artículo Instalación de
Personal Web Server.
Agregar componentes adicionales de Windows
IIS se puede encontrar en el propio CD de instalación de Windows XP Profesional. Hay que

acceder a la opción de "Instalar componentes opcionales de Windows" para poder cargarlo en
nuestro sistema. Para ello tenemos dos opciones:
1) Insertar el CD de instalación de Windows y en la ventana de autoarranque que se muestra,

seleccionar la opción que pone "Instalar componentes opcionales de Windows"
2) En el Panel de control, seleccionar la opción de "Agregar o quitar programas" y en la ventana

que sale, pulsar sobre el icono de la izquierda marcado como "Seleccionar o quitar componentes
de Windows".
3.-
Ahora nos muestra la ventana para seleccionar los componentes adicionales de Windows que
hay disponibles. En la lista, marcamos la opción "Servicios de Internet Information Server
(IIS)". Por defecto se seleccionan unos cuantos componentes, dentro de los que ofrece la
instalación de IIS. Nosotros podemos elegir qué componentes deseamos instalar apretando el
botón marcado como "Detalles". Entre los componentes posibles se encuentran las extensiones
de Frontpage, documentación, servicios adicionales de IIS, un servidor de FTP (para la
transferencia de ficheros con el servidor por FTP), incluso uno de SMTP (para el envío de
correos electrónicos).
Si no sabemos qué componentes instalar podemos dejar las opciones como aparecen en un
principio, pues para la mayoría de los casos serán válidas. Sólo un detalle: puede ser adecuado
no instalar las extensiones de Frontpage en caso de que no pensemos que se vayan a utilizar.
4.-
Una vez hemos instalado los componentes deseados, podemos y apretar el botón de "Siguiente"
para comenzar la instalación, que se alargará unos minutos.
Acceder al servidor web
Podemos acceder al servidor web para comprobar si se ha instalado correctamente IIS. Para
ello simplemente debemos escribir http://localhost en Internet Explorer y debería aparecer
una página web informando que IIS está correctamente instalado. Además, aparecerá la
documentación de IIS en una ventana emergente, si es que fue instalada.
Sitio web predeterminado en IIS
Qué es el sitio web predeterminado de IIS. Cómo colocar los archivos en el sitio
predeterminado para probar si está funcionando IIS y para introducir nuestros propios
sitios web.
Lo que se muestra cuando accedemos a http://localhost es el sitio web predeterminado, que se

guarda en nuestro disco duro, concretamente en la carpeta C:\Inetpub\wwwroot
Si accedemos a dicha carpeta desde Mi PC podremos ver los archivos que se están sirviendo
como sitio web predeterminado. Encontraremos, entre otros archivos uno llamado "iisstart.asp"
que es el que se pone en marcha al acceder a este directorio.
Colocar nuestras propias páginas
Lo lógico ahora es que deseemos colocar nuestras propias páginas web para que las sirva IIS.
Si nuestro sitio web es bastante simple podríamos colocar todos los archivos dentro de la
5.-
carpeta del sitio web predeterminado.
Por ejemplo, para hacer una prueba, podríamos colocar un archivo llamado "hola.html" en la
carpeta C:\Inetpub\wwwroot. Para acceder a este archivo desde nuestro explorador
deberíamos escribir la dirección http://localhost/hola.html
Atención: No se debe acceder al archivo utilizando una ruta como esta: C:\Inetpub\wwwroot\hola.html
pues de esa manera no se estaría pasando a través del servidor web y la página html no se ejecutaría.
Si tuviéramos un sitio medianamente complejo, convendría crear una carpeta dentro de

wwwroot con el nombre de nuestro sitio y dentro podríamos colocar todos los archivos. Si el
directorio tuviera una ruta como C:\Inetpub\wwwroot\mi_web, accederíamos colocando esta
dirección en nuestro navegador: http://localhost/mi_web.
Cuando se accede a ese directorio se sirve el documento por defecto que se haya configurado
en el servidor web. El documento por defecto es aquel que se sirve si no se ha especificado
ninguno en la ruta de acceso, es decir, si no indicamos ningún archivo en la dirección que
colocamos en Internet Explorer (una dirección como http://localhost/mi_web especifica un
directorio, pero ningún archivo) se sirve el documento por defecto.
Referencia: Se habla más sobre el documento por defecto en un artículo del manual de publicar en
Internet. http://www.desarrolloweb.com/articulos/200.php?manual=3
En principio, el documento por defecto en IIS está configurado a Default.asp o Default.htm.

Esto quiere decir que deberíamos colocar un archivo con uno de esos nombres en nuestro
directorio para que se sirva si el usuario no indica ningún nombre de archivo. Luego veremos
cómo cambiar esta configuración.
Recordar que para ver este archivo habría que componer una dirección como esta
http://localhost/mi_web. Automáticamente se sirve el archivo Default.asp, aunque no se
especifique nada, pues ese es el documento por defecto. También podríamos acceder al archivo
especificando su ruta completa: http://localhost/mi_web/Default.asp
Nota: Podemos llamar al archivo Default.asp o bien default.asp (con mayúscula o minúscula en su inicial). Cualquiera de
las dos opciones es válida, pues en Windows no se tienen en cuenta las mayúsculas y minúsculas en nombres de
archivos.
Administración de IIS
Conceptos a tener en cuenta a la hora de administrar el servidor Internet Information

Server en Windows XP.
Para administrar el servidor Internet Information Server en Windows XP, disponemos de un

panel de control llamado "Servicios de Internet Information Server" al que podemos acceder
de varias maneras.
6.-
1) Pulsando con el botón derecho en MI PC y seleccionando la opción que pone "Administrar".

Esto nos abre "Microsoft Management Console" o, dicho en castellano, la "Administración de
equipos". En la lista de la izquierda, en la parte de abajo aparece "Servicios y aplicaciones",
entre los que encontraremos una opción buscada: "Servicios de Internet Information Server"
2) Podemos acceder desde el panel de control. Si tenemos configurada la vista clásica

encontraremos un icono que pone "Herramientas administrativas" y haciendo doble clic,
encontraremos el icono para administrar IIS. Si teníamos configurada la vista por categorías
del panel de control (la que aparece por defecto en Windows XP) la búsqueda de la opción es un
poco más compleja: Seleccionamos "Rendimiento y mantenimiento" y dentro ya encontraremos
el icono de "Herramientas administrativas", al que teníamos que hacer doble clic para
encontrar, entre otros, el icono para acceder a "Servicios de Internet Information Server".
3) Otra manera de acceder aparece en la ayuda de Internet Information Server. Se trata de

hacer una búsqueda del archivo llamado "inetmgr.exe". Una vez localizado se puede ejecutar y
aparece la consola de administración de IIS. Si se desea, se puede hacer un acceso directo a
dicho archivo para no tener que buscarlo cada vez que se desee ejecutar.
Una vez hemos accedido al panel "Servicios de Internet Information Server" tenemos ante
nosotros la posibilidad de configurar nuestro servidor web en muchos aspectos, por ejemplo
podemos, definir el documento por defecto, crear directorios virtuales, modificar las opciones
de seguridad, etc.
7.-
El Administrador de servicios de Internet
El Administrador de servicios de Internet se divide en dos paneles, el panel de la izquierda se

denomina panel de alcance (scope pane), y el de la derecha panel de resultados. El panel de
alcance presenta una jerarquía en forma de árbol con los componentes (servicios, elementos,
etc.) que se pueden administrar. En la Figura 9 podemos comprobar que se pueden administrar
distintos sitios Web, un sitio FTP, un servidor SMTP (servicio de correo) y un servidor NNTP
(servicio de noticias).
Figura 1
Figura 2
Para gestionar el servidor web debemos seleccionar el sitio web predeterminado y pulsar con el
boton secundario y elegir Propiedades. Esto nos abre la pantalla de la Figura 16.
8.-
Figura 3
En esta ventana dos son las pestañas más importantes:
1. Sitio Web: Aquí podemos asignar un nombre a nuestro sitio web, una direccion IP y un
puerto donde estara escuchando. Tambien podemos establecer un numero maximo de
conexiones y un tiempo maximo de espera ante la inactividad del cliente. Más abajo se
nos permite establecer el registro de las acciones de los clientes. Por defecto guarda
un fichero de texto con las acciones del cliente en la carpeta
C:\windows\system32\Logfiles\W3SVC1.
9.-
Figura 4
2. Directorio particular: Desde aquí podemos establecer la carpeta raíz de nuestro

servidor web. Todos los documentos que se encuentren bajo la carpeta que este
establecida como raíz del servicio web podrán ser accedidas via web. Ademas podremos
establecer permisos de lectura, ejecución, etc.
3.2.- Diseño de las páginas
Cuando vayamos a crear un sitio web tenemos que tener en cuenta si luego vamos a trabajar
con páginas dinámicas, base de datos dinámicas o páginas estáticas.
Hojas estáticas : .html o htm. Es una página cuyos elementos permanecen invariables. Se
almacena en un archivo que siempre muestra la misma información a cualquie usuario que
navegue por ella. Su código fuente es el mismo y no puede ser cambiado por la intervención del
usuario ni tampoco a través de ningún programa.
10.-
Proceso de visualización de una página estática.
1.- El navegador realiza la petición para acceder a la página HTML.

2.- El servidor busca la página deseada. En su equipo o en otro.
3.- El servidor dedevuelve la página HTML solicitada al navegador.
4.- El navegador interpreta el documento y lo presenta en pantalla.
Hojas dinámicas: .asp o php . Es aquella cuyos contenidos permiten la interactividad con el
usuario. La información que muestran puede cambiar en función de dicha interactividad. Es
decir, su código fuente cambia por la intervención de un usuario o programa. Las páginas web
dinámicas ofrecen funcionalidades de cierta complejidad como por ejemplo, acceso a bases de
datos. Como pueden ser base de datos simples (Access) o base de datos complejos (MySQL).
Microsoft Access es un programa que se utiliza para crear bases de datos. Se suele utilizar en
sitios web de tamaño pequeño o intermedio.
MySQL programa es más potente que Access. Este programa funciona como un servidor web.
En vez de escribir o leer un archivo, a través de una canal especial escucha las peticiones de
las páginas web,
Si se va a trabajar con Access se utilizará el lenguaje ASP , pero si se elige MySQL se
utilizará el lenguaje PHP.
11.-
1.- El navegador realiza la petición para acceder a la página

2.- El servidor busca la página deseada.
3.- El servidor pasa la página al interprete PHP para que ejecute los scripts, si es necesario,
utilizando la base de datos asociada. El interprete puede estar en la misma máquina o en otra
distinta.
4.- El interprete PHP devuelve el documento resultante al servidor.
5.- El servidor devuelve la página como HTML al navegador
6.- El navegador interpreta la página y la presenta en pantalla.
12.-
Para aprender la aplicación Dreamweaver, realizaremos una página

web estática de Arte.
Tal y como hemos indicado antes, si no se crea un sitio web, las aplicacones web realizadas en
dreamweaver no funcionarian.
Primer paso a dar y uno de los más importantes, instalar el IIS y realizar un sitio web.
Cada sitio requiere una carpeta independiente en el sistema local. Una para guardar de forma
local y otra en el servidor local:
Ejemplo:
carpeta local d:\dreamweaver\arte

carpeta remota: c:\inetpub\wwwroot\arte
Para configurar el sitio web en el servidor local seguiremos los siguientes pasos:
 Sitio//administrar sitio//nuevo damos un nombre al sitio web (ejemplo: web arte)

Seleccionamos la ficha avanzada.
 Datos locales: crear un sitio local (ejemplo: d:\dreamweaver\arte)
 Datos remotos: local/red
Carpeta remota: c:/inetpub/wwwroot/arte.(ejemplo: sitio arte)
 actualizar lista archivos remotos
 cargar
 Servidor de prueba
Modo de servidor aspvbscript
Acceso local/red
Otra forma de configurar el sitio es a través de la del panel central en crear nuevo sitio de
Dreamweaver. En este caso aparecerá un asistente.
 Indicar el nombre del sitio

 Trabajar con tecnología aspvscript
 Editar y comprobar localmente: crear una carpeta local
 Para comunicarse con el servidor de prueba http://localhost/carpeta creada en
c:\inetpub\wwwroot
 Desea copiar en otro sitio: NO
Una vez configurado cada vez que pulsemos F12 para comprobar como queda la página en el
navegador automáticamente se creará una copia de la página en la carpeta remota
(c:\inetpub\wwwroot\carpeta creada)
13.-
Una vez creado el sitio web ya se puede empezar a crear las páginas .
A lo largo del curso, se va a diseñar una unidad didáctica muy sencilla para explicar el arte
románico y el gótico (por supuesto se podrá ampliar más tarde a otros estilos).
Para organizar mejor el contenido se ha hecho el siguiente esquema del sitio.
Pagina principal.
INDEX.HTML
Románico. Diferencias Gótico.

Romanico.html Diferencias.html Gotico.html
Características Románico. Edificios del románico. Características Gótico. Edificios del gótico.
Caracteristicasromanicas.htm Monumentosromanicas.htm Caracteristicasgoticas.htm Monumentosgoticos.htm
4. CREACIÓN DE UNA PAGINA WEB.
En el panel central seleccionaremos crear nuevo HTML o si no aparece el panel central en el

menú archivo/nuevo seleccionar nuevo documento/página básica.
A la derecha de la ventana, en el panel de archivos (ventana/archivos), se podrá ver los

archivos que hay guardados en la carpeta local o en la carpeta remota.
14.-
La siguiente ventana que se visualizará será:
1. Seleccionaremos la forma trabajar. Modo diseño, modo código (lenguaje HTML) o

modo dividir, en este caso a medida que vamos diseñando vemos el código que se
va generando.
2. Zona de trabajo.
3. Barra de estado: a la izquierda veremos las etiquetas HTML con las que se podrán
seleccionar simplemente haciendo clic sobre ellas sin necesidad de seleccionar el
objeto en el documento activo.
A continuación se verá un cuadro de diálogo con el que se podrá fijar la resolución de
la pantalla.
A continuación lo que ocupa la página en Kb y el tiempo aproximado de descarga de la
misma.
Guardar la página web
Una vez guardada la página (archivo/guardar o guardar como) , ésta aparecerá en el panel de
archivos . Si no es así habrá que actualizar o pulsar el la tecla F5.
Visualizar la página en el navegador
Para visualizar la página en el navegador hay diferentes formas, pulsar la tecla F12 ,
archivo/vista previa en el navegador/iexplore o
15.-
Dependiendo del navegador las páginas se visualizan de forma diferente. Si en el ordenador

hay instalado más de un navegador estos se pueden visualizar y seleccionar el que se quiera
como principal y como secundario. (ver imagen superior)
Al visualizar en el navegador y tal como hemos indicado al crear el sitio web la página se
copiará automáticamente en la carpeta remota.
Siguiendo el ejemplo y antes de comenzar a crear las páginas web vamos a crear las siguientes
carpetas en la carpeta local.
Ventana sitio
En la ventana de archivos hay una opción (expandir/contraer) que permitirá administrar,

borrar, copiar, pegar y abrir los archivos y carpetas que sean necesarios para componer el sitio
como si se estuviera utilizando el explorador de Windows.
Esta ventana sitio tiene dos partes, a la

izquierda titulada sitio remoto a la
derecha archivos locales. Desde esta ventana se puede transferir los archivos del sitio local
al servidor (sitio remoto) para ser publicados en internet.
Crearemos las siguientes carpetas:
Imágenes: se guardarán todas las fotos, dibujos, gifs,.. que se utilicen tanto del románico como
del gótico.
Gótico: se guardarán todas las páginas que tengan que ver con el gótico.
Románico: se guardarán todas las páginas que tengan que ver con el románico.
Se creará un archivo denominado index.htm que contendrá la página principal.
16.-
5. PROPIEDADES DE LA PAGINA
Abrimos la página index.htm y con el botón derecho seleccionamos propiedades de página.
Aparecerá una ventana de diálogo donde habrá 5 opciones en la parte de categoría.
Título/codificación.
En la casilla título escribiremos el románico y el gótico.

Es conveniente escribirlo porque es el que coge la opción Favoritos en Internet Explorer ( o la
de marcador en Netscape) para guardar la página en la carpeta Favoritos.
Esto se puede hacer directamente en la barra de herramientas.
Aspecto
En esta ventana indico la fuente de

página, tamaño, color de texto , color de
fondo o imagen de fondo y los márgenes
de la página se está creando.
Ejemplo: imagen de fondo : fondo.

Al cargar los archivos en el servidor , es
muy importante tenerlos todos
guardados en la sitio local. De esta
forma, Dreamweaver verifica que todos los elementos que componen el sitio web se encuentran
en la capeta local.
Si el archivo fondo se encontrará en otro sitio que no fuera la carpeta local Dreamweaver
preguntará si se quiere copiar en la carpeta local. Se dirá que si.
17.-
Vinculos
Permite definir el tipo de texto y colores para los diferentes tipos de vínculos.
6. TEXTO
La inserción de texto en el documento de una página Web es tan sencilla como escribir texto
en un procesador de textos cualquiera.
Después se pondrá el formato que se quiera. (previamente éste estará seleccionado).
Para cambiar las características hay dos formas, una desde el menú texto y otra a través del
inspector de propiedades (la más usada) y que se encuentra en la parte inferior de la página.
• Formato: aplica un estilo predefinido al texto.

• Fuentes: aplica una combinación de fuentes al texto. Las fuentes están agrupadas por
familias. Si el usuario no tiene instalada la primera fuente del listado, el navegador
buscará la segunda de la lista y luego la tercera. Si ninguna de ella está presente,
mostrará el texto con el tipo de fuente estándar del navegador.
En html <font face=”arial,...”.>
• Tamaño: aplica un tamaño de fuente específico en una escala que va de 1 a 7 o un
tamaño de fuente relativo al tamaño por defecto del navegador. En este caso los
valores van de +1 a –7.Así por ejemplo +3 significa tres grados más grande que lo
normal.
En html <font size=”+2.”.>
• Negrita e itálica.
• Alineación
• Color de texto: define el color de texto seleccionado.
• Viñetas y numeración: coloca viñetas a los párrafos o los enumera. Se puede insertar
listas ejecutando texto/lista y eligiendo el tipo de lista a utilizar.
• Sangría a la derecha y a la izquierda.
Existen dos tipos de saltos que podemos introducir en nuestro texto: el salto de párrafo y
salto de línea.
Cuando pulsamos Enter, insertamos un salto de párrafo.
Cuando pulsamos May+enter, insertamos un salto de línea (más pequeño).
18.-
7. IMÁGENES
Una imagen digital es una imagen que ha pasado por un proceso de conversión, para que pueda
ser almacenada en forma de bits en un computador.
Cuando el ordenador trabaja en modo gráfico (en windows) la pantalla está dividida en pixeles
que pueden tomar distintos colores formando así un dibujo o imagen digital. Cuanto más píxeles
haya y cuantos más colores distintos pueden tomar, mayor será el detalle de las imágenes o
dibujos que se pueden obtener.
Cuando se trabaja en Windows la pantalla puede, por ejemplo, tener 640 columnas por 480
filas de píxeles y cada píxel puede tomar 16 colores. A esto se le llama resolución de pantalla.
Cuanto mayor sea la resolución de una pantalla las imágenes se podrán ver con más calidad pero
se debe tener en cuenta que una imagen con muchos píxeles aumentará el espacio que ocupa en
disco.
Los formatos más usados:
JPEG (Joint Phothografic Experts Group)
Es un formato estandarizado que permite compresión de imágenes. JPEG se diseño con el fin
de poder comprimir imágenes a todo color o en escalas de grises que representaran
fotografías o imágenes del mundo real. Funciona muy bien en fotografías, arte de la
naturaleza, pero no tan bien en caricaturas o dibujos simples.
GIF(Graphic Interchange Format)
El formato gif fue desarrollado por CompuServe para proveer de un formato estándar que
fuera independiente del tipo de máquina que se usara. El formato gif está limitado a un máximo
de 256 colores.
En general se recomienda este formato para imágenes simples. Para los fondos texturizados no
son muy útiles puesto que al tener pocos colores disponibles en el ordenador que las recibe
intenta encontrar el color más cercano, produciéndose distorsiones que impiden que el texto
sea visto de forma adecuada.
Estos son los dos formatos admitidos por la web. Esto quiere decir que si tienes una imagen o
un dibujo en otro formato habrá que cambiarlo. Para ello se utilizará cualquier programa de
diseño.
19.-
Inserción de una imagen
• Colocar el cursor donde se quiere insertar la imagen

• En la barra de herramientas pulsar el botón imágenes y seleccionar imágenes
• Se selecciona la imagen a insertar y aceptar. Si no esta en la carpeta local

Dreamweaver preguntará si la se quiere copiar. Se responderá que si.
En nuestro ejemplo: insertaremos después del título románico la imagen arteromanico.jpg que
se encuentra en la carpeta imágenes.
Propiedades de la imagen
Una vez insertada la imagen se puede cambiar o visualizar sus características. Para ello se
selecciona la imagen y se trabaja con el Inspector de propiedades.
En esta ventana de propiedades se puede:
• Conocer el tamaño de la imagen

• Determinar exactamente el ancho y alto de la imagen.
• Alinearla a la izquierda, centro o derecha con los iconos de alineación.
• Ponerle un borde (se debe indicar el tamaño en pixeles).
• Escribir un texto alternativo en el cuadro Alt (este texto alternativo es el que se verá
en la web si pasas el ratón sobre la imagen descargada o cuando se está descargando).
20.-
Quick Tag Editor: en netscape no se puede utilizar la etiqueta alt para añadir un texto
alternativo , se deberá cambiar por la etiqueta title, una forma de cambiar es a través de
este botón que nos mostrará el código de la imagen seleccionada.
• Alinear el texto alrededor de la misma eligiendo el que se desee en el cuadro alinear

Predeterminado suele especificar una alineación con la línea de base. (El valor predeterminado puede
variar en función del navegador del visitante del sitio.)
Línea de base e Inferior alinean la línea de base del texto (u otro elemento del mismo párrafo) con la
parte inferior del objeto seleccionado.
Superior alinea la parte superior de una imagen con la parte superior del elemento más alto (imagen o
texto) de la línea actual.
Medio alinea la parte central de la imagen con la línea de base de la línea actual.
Texto superior alinea la parte superior de la imagen con la parte superior del carácter más alto de la
línea de texto.
Medio absoluta alinea la parte central de la imagen con la parte central del texto de la línea actual.
Inferior absoluta alinea la parte inferior de la imagen con la parte inferior de la línea de texto (incluidos
los trazos descendentes, como en el caso de la letra g).
Izquierda sitúa la imagen seleccionada en el margen izquierdo, ajustando a la derecha el texto que la
rodea. Si hay texto alineado a la izquierda delante del objeto, los objetos alineados a la izquierda suelen
pasar a una nueva línea.
Derecha sitúa la imagen en el margen derecho, ajustando a la izquierda el texto que la rodea. Si hay
texto alineado a la derecha delante del objeto, los objetos alineados a la derecha suelen pasar a una
nueva línea
• Especificar la separación vertical y horizontal del texto alrededor de la imagen en los

cuadros espacio v y espacio H
• Ponerle un nombre a la imagen en el cuadro que aparece debajo de la imagen.
Imagen de sustitución
Se puede añadir a la página una imagen de sustitución, de manera que cuando se pase el ratón
sobre una imagen ésta queda sustituida por otra.
• Colocar el cursor donde se quiere poner la imagen original y la de sustitución.

• En la barra de herramientas pulsar el botón imágenes y seleccionar imagen de
sustitución.
21.-
• Indicamos la imagen original y la de sustitución. Es recomendable que las dos imágenes

tengan el mismo tamaño.
8. TABLAS
Dreamweaver ha sido especialmente diseñado para trabajar con tablas. Estas son importantes
si se busca un diseño exacto y con precisión de píxeles.
Cuando se inserte una tabla, en la barra de estado aparecerán todas las etiquetas
correspondientes a la misma.
<table> es la etiqueta correspondiente a toda la tabla. Si haces clic sobre ella con el cursor
situado en una celda de la misma se seleccionará toda la tabla y se abrirá su correspondiente
Inspector de propiedades.
Con ayuda del inspector se puede cambiar las propiedades generales de la tabla: añadir filas o
columnas, tamaño, la alineación, espacio celda o cellspacing (distancia que hay entre una celda
y otra), borde y su color, relleno de la celdas o cellpadding (espacio entre el borde y el
contenido de la celda)...
<tr> es la etiqueta de fila de tabla. Si se hace clic en ella, se seleccionará la fila en la que está
situado el cursor y se abrirá el Inspector de propiedades de la fila, en la que se podrá cambiar
el formato del texto de las celdas, unir o dividir las celdas de la misma , fijar el ancho y el alto
de las celdas,...
<td> es la etiqueta de la celda. Si se hace un clic sobre ella con el cursor en el interior de una
celda, ésta quedará seleccionada y se abrirá su correspondiente inspector de propiedades.
22.-
Las propiedades son las mismas que la de la fila.
Ejemplo:
Vamos a insertar una tabla en el archivo index.htm, para ello colocar el cursor debajo del
título “la arquitectura románica y gótica”.
• Insertar una tabla desde la barra de menus insertar/tabla o de la barra de
herramientas comunes pulsando el botón .

• Insertamos dos filas y dos columnas. El ancho de la tabla será de 100 en porcentaje
lo que significa el ancho de la página. El relleno de la celda 5 y el espacio 10.
Al insertar la tabla se visualiza el ancho

de la tabla tanto en porcentaje como en
píxeles. Si pulsamos los triángulos nos
permitirá insertar o borrar columnas.
• Copiar el título Románico y pegarlo en la celda de la izquierda superior. En la celda de

abajo copiar el texto correspondiente. Lo propio con el gótico. De momento no tocar las
imágenes.
• Vamos a dividir una celda en dos. Para ello situar el cursor en la celda donde pone
Románico y en el inspector de propiedades seleccionar dividir columnas . Lo propio con
el gótico.
• Copiar y pegar las imágenes en sus respectivas celdas.
Se habrá observado que las celdas han ido cambiando el tamaño en función del contenido
que tienen dentro, y es por eso que si queremos darle una presentación más proporcionada
se deben arrastrar los bordes de la tabla hasta conseguir el efecto deseado.
23.-
Para conseguir un ajuste perfecto se debe situar el cursor en una celda y poner en el
inspector de propiedades en la casilla an, el valor de porcentaje que deseamos. Por ejemplo
el 25% aunque a veces es mejor entrar en el código html y cambiar su tamaño
<td width=”25%”>.
9. ENLACES
En internet todo está conectado con vínculos. Los exploradores usan identificadores únicos
(url) para acceder a los distintos ordenadores conectados al ordenador.
Un vínculo de texto suele aparecer en la página subrayado y de color azul. Un vínculo de imagen
suele aparecer con un borde azul alrededor de la imagen. No obstante, estos colores
predeterminados se pueden cambiar en las propiedades de la página.
URLs absolutos
Son aquellos en los que se especifica la ruta completa de la página a la que se quiere acceder,
por ejemplo se puede establecer un vínculo a la dirección:
http://www.ikasleak.com/ikasleak/portada.html. En esta ruta se ha especificado el protocolo
de internet que se usará , el dominio en el que está la página (www.ikasleak.com) , la carpeta
donde se halla (ikasleak) y el nombre del archivo que se quiere abrir (portada.html).
URLs relativos
Normalmente se usan para hacer referencia a archivos que se encuentran en el mismo sitio
Web. Por ejemplo, si en el sitio web arte de un hipotético dominio www.educación.com , en el
archivo index.html se define un vínculo de texto y se pone como referencia diferencias.html,
el explorador Web lo interpreta como una dirección relativa y entiende que el archivo está en
la misma carpeta que index.html con lo que si la dirección de entrada es
www.educación.com/index.html , al hacer clic sobre el vínculo a la pagina diferencias.html,
quitará index de la dirección y pondrá diferencias.
Tipos de enlaces
• Anclas o enlaces dentro de una misma página.

• Vínculos con otra página de nuestro sitio.
• Vínculos con una página fuera de nuestro sitio.
• Enlaces con una dirección e-mail.
Ejemplo: abrimos el archivo monumentos gotico.html
Anclas o enlaces dentro de una misma página.
Son vínculos que permiten acceder rápidamente a la información situada en cualquier parte de
la página. Se pueden usar, por ejemplo, para poner un índice al principio de modo que al hacer
clic sobre un tema del mismo la ventana se desplace automáticamente al tema correspondiente.
24.-
Ejemplo:
• Situar el cursor en el título FRANCIA de la tabla.

• Ejecutar insertar/anclaje con nombre (o bien, seleccionar el botón anclaje con nombre
que se encuentra en la barra de herramientas común)
• Escribir el nombre del punto de anclaje (ejemplo FRANCIA)

• Seleccionar el texto o imagen donde se va a proceder el vínculo y escribir en el
inspector de propiedades, en el cuadro de diálogo vínculo, el nombre del anclaje
generado anteriormente precedido de #. (ejemplo seleccionamos la palabra Francia del
comienzo de la página y en el vínculo ponemos #FRANCIA).
• O bien, seleccionar el texto o imagen donde se va a poner el vínculo y haciendo un clic
en el botón señalar archivo del inspector de propiedades arrastrarlo hasta el lugar de
punto de anclaje que se ha creado.
Repetir con el resto de los países y guardar el documento.
También se puede crear un vínculo a un punto de anclaje de otra página del sitio.
Los pasos son los mismos que los descritos arriba con la única diferencia de que en el
cuadro de vínculo se pondrá el nombre de la página seguido del punto de anclaje.
Ejemplo: monumentos goticos.html#francia.
Vínculos con otra página de nuestro sitio.
Son enlaces que permiten abrir otra página de sitio desde la que está situado el vínculo.
Ejemplo: desde el archivo index.html se va a crear un enlace a la página diferencias.html
• Abrir el archivo index.

• Escribir debajo de gótico y de románico la palabra diferencias .
• Seleccionar la palabra diferencias y en la casilla vínculo indicar la página a la que se
quiere acceder.
25.-
Vínculos con una página fuera de nuestro sitio.
Son enlaces a páginas que están fuera del sitio que se ha creado, como la página de un museo,
de un periódico digital, de un portal,.., por lo que es necesario conocer la dirección de la página
en cuestión.
Los pasos son los mismos que los anteriores pero en la casilla vínculo se debe escribir la
dirección url absoluta. http://www.terra.es
Enlaces con una dirección e-mail.
Son vínculos que permiten abrir un programa de correo para enviar un e-mail a la dirección
indicada.
Ejemplo:
• Abrir el archivo index.html

• Introducir la imagen imágenes/recursos/3demail debajo del título principal y
seleccionarla.
• En el cuadro vínculo escribir: mailto:nombre@direccion.com
26.-
10. HOJAS DE ESTILO EN CASCADA (CSS)
Las hojas de estilo me permiten agrupar las propiedades de forma que luego ese estilo se
puede aplicar sobre el elemento que se desee.
Creación de una hoja de estilo
Las hojas de estilo puede ser externas o internas (clases).
• Si no está abierto el panel de diseño abrir y seleccionar CSS.
• Hacer clic sobre el botón Nuevo estilo CSS que se encuentra en la parte inferior del panel.
• En la casilla Definir en: nuevo archivo de hoja de estilos se creará un archivo externo
de extensión .css para poder ser utilizado en otra página.
Solo este documento se creará una hoja de estilo para ser utilizado sólo la página definida.
• En la casilla Tipo de selector: clase para poder ser utilizada en cualquier etiqueta,
etiqueta para ser aplicado en la etiqueta, avanzadas para cambiar el estilo de los vínculos.
• La casilla nombre cambiará en función de el tipo de selector.
Vamos a crear un estilo de hoja externo que guarde el estilo de los enlaces.
Seleccionamos:
• Nuevo archivo de hojas
27.-
• Avanzadas
• Nombre: a:link . Aceptar
• Guardar con el nombre estilo1.css
• Definimos la propiedades para ese enlace. Fuente: verdana, arial,... tamaño 14 y color negro.
En la categoría Fondo en color de fondo verde oliva (#99cc33).
Todas los enlaces tomarán estas características.
Vamos a definir el estilo del enlace a:visited.

Realizamos los pasos anteriores pero en definir en seleccionamos estilo1.css ya que queremos
guardar en ese archivo y no crear uno nuevo.
Las características serán las mismas que a:link pero el fondo será rojo.
Una vez creado el estilo si se quiere cambiar las características lo haremos desde el panel de
diseño seleccionando el estilo a modificar y pulsando el botón editar estilo en la parte inferior
del panel.
Al ser un archivo externo éste puede ser utilizado por cualquier página para ello se abrirá la
página donde se quiere aplicar ese estilo y desde el panel de diseño pulsar el botón adjuntar
que se encuentra en la parte inferior.
Saldrá una ventana de diálogo donde indicaremos donde se encuentra la hoja de estilos externa
y como la queremos adjuntar: vincular o importar (anidar hojas de estilos)
Creación de hoja de estilos para el encabezado. <h3> en el documento.
• Solo en este documento

• Etiqueta
• Nombre: etiqueta h3. Aceptar.
Las características: verdana, ..., tamaño 9 color #cc3399
Creación de clase en una hoja de estilos en el documento. Definiendo una clase puedo aplicar a
cualquier etiqueta del documento.
Clase: color rojo , subrayado.
• Solo en este documento

• Clase
28.-
• Nombre: rojo. Aceptar.
11. FORMULARIOS
Un formulario es un método que permite que los visitantes de la página interactúen con ella.
Es posible enviar información al responsable de la web, ver la información contenida en una
base de datos a partir de una petición concreta del tipo de información deseada e incluso
incluir información en la base de datos residente en el servidor de Internet.
La información se recoge en los campos o registros que se pueden incluir en el formulario y se

envía a una dirección de correo electrónico.
Previamente se debe incluir en la página un formulario vacío. Para ello, se debe seleccionar
formularios de barra de herramientas.
Aparece la barra correspondiente a los elementos de un formulario.
Seleccionamos el botón formulario y automáticamente se creará un formulario vacío. A

continuación se insertarán los elementos del formulario.
Introducción de los elmenentos
Colocar el cursor dentro del formulario
Campo de texto: para que el usuario escriba texto. Se debe especificar un largo (tamaño en
caracteres que se mostrará) y, si se quiere una cantidad máxima de caracteres que podrá
escribir el usuario.
El campo de texto puede ser de una sola línea , de varias ( textarea) o un campo contraseña
(type=passsword), en cuyo caso el usuario verá asteriscos.
Si se quiere se puede dar un valor inicial, es decir, un texto para que aparezca inicialmente en
ese campo.
29.-
Casilla de verificación
Sirve para que el usuario seleccione varios elementos.
Haciendo clic en la casilla de verificación aparece una tílde de selección. Se debe configurar el
estado inicial (activado o desactivado) y qué valor se enviará en caso de que el usuario lo active.
Al campo se le puede dar un nombre para poder acceder luego a él.
Botones de acción
Estos botones permiten al usuario elegir una entre varias opciones posibles. Se debe dar el
mismo nombre a todos los que formen parte del grupo de opciones.
Ejemplo, en la selección de sexo tendremos una selección de hombre, mujer , luego tendremos
dos botones de opción con el nombre sexo, de forma que solamente se podrá seleccionar uno.
Al igual que antes se puede dar un nombre y un estado inicial.
Lista/menu
Permite crear una lista desplegable o un menú. Se deberá indicar si será lista o menú e indicar
que opciones se ofrecerá al usuario pulsando el botón valores de lista
Botón
Sirve para enviar el formulario o borrar su contenido, según el tipo de botón elegido.
30.-
En el campo etiqueta se escribirá lo que aparecerá en el botón.
Inserción de campos de carga de archivos
Puede crear un campo de carga de archivos para que el usuario pueda seleccionar un archivo de
su sistema, como un documento de tratamiento de textos o un archivo gráfico, y cargarlo en el
servidor. Un campo de archivo tiene la apariencia de un campo de texto, pero contiene además
un botón Examinar. El usuario puede introducir manualmente la ruta del archivo que desea
cargar o utilizar el botón Examinar para localizar el archivo y seleccionarlo.
En los campos de archivo, es necesario utilizar el método POST para transmitir los archivos
desde el navegador al servidor. El archivo se envía a la dirección especificada en el cuadro de
texto Acción del formulario.
Nota: póngase en contacto con el administrador del servidor para confirmar si se permite la
carga de archivos anónimos, antes de usar el campo de archivo.
Para crear un campo de archivo en un formulario:
1. Inserte un formulario en la página (Insertar > Formulario).
2. Seleccione el formulario para visualizar su inspector de propiedades.
3. Defina el método del formulario como POST.
4. En el menú Enctype, seleccione multipart/form-data.
5. Sitúe el punto de inserción en el interior del contorno del formulario y seleccione

Insertar > Formulario > Campo de archivo.
Se inserta un campo de archivo en el formulario.
6. En el inspector de propiedades, establezca las propiedades del campo de archivo que

desee.
Para más información, consulte Configuración de las propiedades de un campo de

archivo.
Propiedades del formulario
Acción: se escribirá la dirección del correo donde se quiere recibir el formulario.

Método: POST. De forma que cuando se pulse enviar los datos del formulario serán enviados.
Otra forma de trabajar sería utilizando el script CGI
Para recibir la información de un formulario , el servidor del sitio web deberá poner a
disposición los script CGI, éstos se encargan de poner en el correo electrónico indicado los
datos del formulario.
La mayoría de los servidores ofrecen los script CGI.
Acción: se escribirá la dirección del formulario http del servidor formmail .
31.-
Ejemplo: http://www.rama.es/cgi-bin/formmail/formmail.cgi
Método: POST. De forma que cuando se pulse enviar los datos del formulario serán enviados.
En un campo oculto en valor indicaríamos la dirección de correo.
CGI es una norma para establecer comunicación entre un servidor web y un programa, de tal
modo que este último pueda interactuar con internet. También se usa la palabra CGI para
referirse al programa mismo, aunque lo correcto debería ser script. De todos modos en este
tutorial nos interesa aprender a escribir estos programas por lo cúal usaremos la palabra
indistintamente, como es costumbre en castellano.
Un CGI (Common Gateway Interface) es un programa que se ejecuta en tiempo real en un Web
Server en respuesta a una solicitud de un Browser. Cuando esto sucede el Web Server ejecuta
un proceso hijo queo recibirá los datos que envía el usuario (en caso de que los haya), pone a
diposición del mismo algunos datos en forma de variables de ambiente y captura la salida del
programa para enviarlo como respuesta al Browser.
El propósito de los CGI´s es proveer "inteligencia" e interactividad a un sitio web, por ejemplo
encontrar un sitio en Yahoo utilizando solo los links que se proveen puede ser una labor
frustrante, sin embargo usar el formulario y solicitar una busqueda personalizada suele
frustrarnos (un poco) menos, ya que un CGI nos provee de una respuesta hecha a la medida
(eso dice la teoría) de nuestra consulta.
Existen otras herramientas para lograr esto en cierta medida, tales como Server Side
Includes o JavaScript, no es el proposito de este tutorial tocar en profundidad estos temas.
12. MARC0S
Otra forma de presentación de un sitio web es a través de marcos. Con los marcos dividimos la
página en diferentes partes para poder demostrar en cada parte una página diferente.
Para crear marcos de página:
• Seleccionar Archivo/nuevo. En la ventana de diálogo nuevo documento seleccionar

conjunto de marcos y seleccionar cómo queremos dividir la página. Crear.
Para administrar las propiedades de los distintos marcos se deberá abrir el panel Marcos.
En parte derecha aparecerá el panel de marcos .

Una parte ocupa toda la parte superior (topframe) y otra
la parte inferior que a su vez está dividida en dos partes
(leftframe) y (mainframe).
32.-
Para cambiar las propiedades de los marcos deberemos trabajar con esta ventana y seleccionar
desde aquí el marco a cambiar.
Si se desea cambiar el tamaño del panel inferior éste será seleccionado y desde el inspector
de propiedades se realizarán los cambio. (también se puede hacer con el cursor desde la misma
hoja pero nunca se con exactitud).
Si se quiere cambiar el ancho del marco izquierdo este será seleccionado se cambiara por el
tamaño deseado 150 píxeles.
Para adecuar el tamaño del derecho e indicar que el tamaño sea el resto de la resolución de
pantalla (no todos los ordenadores tienen la misma resolución) éste será seleccionado y en
valor se pondrá 1 en unidades relativo respecto la columna 1.
También se puede expresar el tamaño en porcentajes.
Otras propiedades: color de bode, el ancho de borde . márgenes...
Nota: dependiendo si esta el frameset o frame seleccionado las propiedades de la ventana del
inspector cambian.
Al guardar archivo/guardar todo irá preguntando uno por uno los marcos(páginas) a guardar y
la página que contiene a todas y la que se deberá abrir . En un marco se puede insertar ya una
página creado indicándolo en la casilla origen.
La casilla nombre de marco es importante ya que servirá para hacer referencia cuando se
quiere realizar un vínculo y se quiere que se cargue en un marco concreto.
La opción mismo tamaño permite que el tamaño de los marcos no puedan ser modificados en el
navegador.
33.-
13. CAPAS (layers)
Las capas son objetos que dotan a Dreamweaver de una gran libertad. Se pueden decir que son
páginas Web en miniatura dentro de una página web. Así como una tabla permitía distribuir la
información de una página de manera organizada aunque limitada a las posiciones marcadas por
las celdas, una capa hace posible añadir a la página cualquier objeto en cualquier posición de la
misma con total libertad.
El inconveniente del uso de las capas es que los navegadores más usados las tratan de manera
diferente y lo que funciona para uno de ellos puede que funcione de otra manera o no funciona
para otros. Luego es recomendable visualizar con los dos navegadores (netscape e internet)
para evitar sorpresas.
Para insertar una capa insertar/objetos de diseño/capa o
Una vez creada ésta se puede mover fácilmente por la página y cambiar sus propiedades desde
el inspector de propiedades.
ID de capa permite especificar un nombre para identificar la capa en el panel Capas y en el

código JavaScript.
Introduzca un nombre. Utilice sólo caracteres alfanuméricos; no utilice caracteres especiales

como espacios, guiones, barras ni puntos. Cada capa tiene que tener un ID exclusivo.
Iz y Sup (izquierda y superior) especifican la posición de la esquina superior izquierda de la capa

con respecto a la esquina superior izquierda de la página o de la capa padre, si la capa es anidada.
34.-
An y Al especifican el ancho y el alto de la capa.
Nota: si el contenido de la capa supera el tamaño especificado, el borde inferior de la capa (tal
como aparece en la vista de Diseño en Dreamweaver) se ampliará para dar cabida al contenido.
(El borde inferior no se amplía cuando la capa aparece en un navegador a menos que la propiedad
Desbordamiento esté definida como Visible.)
El píxel (px) es la unidad predeterminada de ubicación y tamaño. También se pueden emplear las
siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm (milímetros), cm (centímetros) o %
(porcentaje del valor del correspondiente de la capa padre). Las abreviaturas deben seguir al
valor sin espacio de separación: por ejemplo, 3mm indica 3 milímetros.
Índice Z determina el índice z, u orden de apilamiento, de la capa.
En un navegador, las capas con números más altos aparecen delante de las capas con números más
bajos. Los valores pueden ser positivos o negativos. Resulta más sencillo cambiar el orden de
apilamiento de las capas mediante el panel Capas que introduciendo valores de índice z
específicos (véase Cambio del orden de apilamiento de las capas).
Nota: las capas Netscape (las que utilizan las etiquetas layer o ilayer) también se pueden apilar
con relación a otras capas de la página. Cuando se selecciona una capa Netscape, aparecen dos
opciones adicionales en la esquina inferior derecha del inspector de propiedades. Elija el nombre
de otra capa en el menú emergente de la esquina inferior derecha (en este menú sólo aparecen
nombres de capas que ya ha definido). A continuación, utilice la opción A/B para indicar si la capa
especificada debe aparecer Encima (delante) de la capa actual o Debajo (detrás) de ella.
Observe que no se puede especificar un orden de apilamiento Encima/Debajo y un índice z para
una determinada capa.
Vis especifica si la capa es visible inicialmente o no. Elija entre las opciones siguientes:
o Predeterminada no especifica una propiedad de visibilidad.
Cuando no se especifica la visibilidad, la mayoría de los navegadores utilizan

Heredada de forma predeterminada.
o Heredada usa la propiedad de visibilidad de la capa padre.
o Visible muestra el contenido de la capa, independientemente del valor de la

capa padre.
o Oculta no muestra el contenido de la capa, independientemente del valor de la

capa padre.
Observe que las capas ocultas creadas con ilayer siguen ocupando el mismo
espacio que si fueran visibles.
Use un lenguaje de scripts, como JavaScript, para controlar la propiedad de visibilidad

y visualizar en forma dinámica el contenido de la capa.
Im. fondo especifica una imagen de fondo para la capa.
Haga clic en el icono de carpeta para localizar y seleccionar un archivo de imagen.
35.-
Col. fondo especifica un color de fondo para la capa.
Deje esta opción en blanco para especificar un fondo transparente.
Etiqueta indica la etiqueta HTML utilizada para definir la capa.
Desbordamiento controla cómo aparecen las capas en un navegador cuando el contenido

excede el tamaño especificado de la capa.
Visible indica que el contenido adicional aparece en la capa. La capa se amplía para darle
cabida. Oculto especifica que el contenido adicional no se mostrará en el navegador.
Desplazamiento especifica que el navegador deberá añadir barras de desplazamiento a
la capa tanto si se necesitan como si no. Automático hace que el navegador muestre
barras de desplazamiento para la capa cuando sean necesarias (es decir, cuando el
contenido de la capa supere sus límites).
Nota: la opción overflow tiene un soporte irregular entre los navegadores.
Utilizar Izda., Superior o PágX, PágY (sólo layer e ilayer) permiten especificar si la
capa se coloca en relación con su capa padre o con la página.
La opción Izda., Superior coloca la capa en relación con la esquina superior izquierda de
la capa padre. La opción PágX, PágY coloca la capa en una ubicación absoluta con
respecto a la esquina superior izquierda de la página, independientemente de la posición
de la capa padre.
Recorte define el área visible de una capa.
Especifique las coordenadas izquierda, superior, derecha e inferior para definir un

rectángulo en el espacio de coordenadas de la capa (contando desde la esquina superior
izquierda de la capa). La capa se "recorta" de modo que sólo sea visible el rectángulo
especificado. Por ejemplo, para hacer que el contenido de una capa sea invisible salvo
un rectángulo visible de 50 píxeles de ancho y 75 de alto en la esquina superior
izquierda de la capa, defina Iz como 0, Sup como 0, Dc como 50 e Inf como 75.
Nota: si bien la especificación de Hojas de estilos en cascada establece una semántica

distinta para clip, Dreamweaver interpreta clip como lo hacen la mayoría de los
navegadores.
Orig. (sólo layer e ilayer) permite visualizar otro documento HTML dentro de la capa.
Haga clic en el icono de carpeta para localizar y seleccionar el documento.
Observe que Dreamweaver no muestra el otro documento en la capa.
A través del panel capas podremos visualizar las capas creadas en la página y seleccionando su
contenido.
Ejemplo: construcción de dos capas en el archivo principal. El contenido de cada capa es una
tabla con tres hipervínculos.
36.-
Se pueden anidar capas creando una capa dentro de otra. Esto se suele utilizar para agrupar
capas. Una capa anidada se mueve con su capa padre. Visualmente se verá que una capa está
anidada a otro porque veremos el siguiente símbolo.
14. COMPORTAMIENTOS
Comportamiento es una combinación de un evento realizado sobre un objeto de la página web

con una acción. Por ejemplo, cuando el usuario mueve el ratón (evento) sobre una imagen
(objeto) y esta cambia (acción).
Una acción consiste en una porción de código Javascript que realiza determinadas tareas como
abrir la ventana del navegador, ejecutar un sonido...
Cuando insertamos un comportamiento a un elemento, especificamos una acción y el evento que

dispara dicha acción. Varias acciones pueden ser realizadas por el mismo evento. Podemos
especificar el orden en el que las acciones ocurrirán.
Utilizaremos la ventana comportamientos.
• Seleccionar el objeto a aplicar el comportamiento.

• Definir el evento a realizar para ello :
Esta ventana permite visualizar los

comportamientos ya establecidos.
37.-
• Asociar a ese evento una acción.
Ejemplo:
Las flechas permiten mover las acciones ya que estas serán ejecutadas por el orden
establecido.
La relación de acciones a realizar variarán en función del objeto seleccionado.
En la lista de comportamientos hay una acción mostrar eventos para que especifica los
navegadores para los cuales el comportamiento funcionará. Seleccionaremos IE 4.0 .
Comportamiento: imagen de sustitución
Al realizar un intercambio de imágenes (imagen de sustitución) automáticamente se genera los

dos comportamientos asociados a ello (al pasar el Morse que aparezca la imagen indicada y salir
que restaure la imagen inicial)
Comportamiento: carga previa de imágenes
Esto se crea automáticamente desde el momento que se inserte una imagen.
A medida que se va leyendo la página se van cargando las imágenes del servidor.
38.-
Comportamiento: texto en la barra de estado.
Mediante este comportamiento podemos conseguir que en la barra de estado aparezca una
línea explicativa cuando el ratón pasa sobre un vínculo o dibujo.
• Seleccionar una imagen o vínculo (ejemplo: página principal /catedral de leon)

• Ventana de comportamiento: onMouseOver como evento definir texto/definir
texto de la barra de estado como acción. Ventana escribiremos el texto
CATEDRAL DE LEON.
• Al retirar el ratón el texto debe desaparecer onMouseOut
Este mismo comportamiento se puede aplicar sobre los enlaces .
Comportamiento: mensaje emergente
Este comportamiento nos permite hacer aparecer sobre nuestra página un mensaje para el
usuario con un botón aceptar que hace desaparecer el mensaje cuando el usuario lo pulsa.
(alert).
Ejemplo: en la página principal sobre la palabra románico al pulsar que aparezca un mensaje que
resume las características del románico.
Seleccionar románico y en la ventana comportamiento: onClick como evento mensaje

emergente como acción.
Comportamiento: mostar-ocultar capas
Permite ocultar o mostrar una capa en función de un evento.
Comportamiento URL
Permite que determinados elementos que no pueden ser utilizados como hipervínculos hagan
ese papel.
Ejemplo: quitar el enlace que abre el formulario e insertar un botón de formulario. A la ventana
agregar etiqueta de formulario responderemos que no ya que este botón no tiene ninguna
función de enviar o borrar.
En el inspector de propiedades seleccionamos ninguno y escribimos como texto sugerencias.
Seleccionar el botón y definimos el comportamiento: evento onClick acción ir a URL
39.-

Apuntes Dream Weaver

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apuntes Dream Weaver

Uploaded by

Copyright:

Available Formats

Tema4-Dreamweaver 2008

TEMA 4.- DREAMWEAVWR 2008

Esta ventana está formada por 4 partes:

3. CREACIÓN DE UN SITIO WEB.

• Seguramente se querrá transmitir una información que se considera valiosa o

3.1.- Simulación de un sitio Web

3.2.- Instalación de IIS en Windows XP Profesional

Primeros pasos para la instalación de IIS en Windows XP Profesional.

Agregar componentes adicionales de Windows

IIS se puede encontrar en el propio CD de instalación de Windows XP Profesional. Hay que

1) Insertar el CD de instalación de Windows y en la ventana de autoarranque que se muestra,

2) En el Panel de control, seleccionar la opción de "Agregar o quitar programas" y en la ventana

Acceder al servidor web

Sitio web predeterminado en IIS

Lo que se muestra cuando accedemos a http://localhost es el sitio web predeterminado, que se

Colocar nuestras propias páginas

carpeta del sitio web predeterminado.

Si tuviéramos un sitio medianamente complejo, convendría crear una carpeta dentro de

En principio, el documento por defecto en IIS está configurado a Default.asp o Default.htm.

Conceptos a tener en cuenta a la hora de administrar el servidor Internet Information

Para administrar el servidor Internet Information Server en Windows XP, disponemos de un

1) Pulsando con el botón derecho en MI PC y seleccionando la opción que pone "Administrar".

2) Podemos acceder desde el panel de control. Si tenemos configurada la vista clásica

3) Otra manera de acceder aparece en la ayuda de Internet Information Server. Se trata de

El Administrador de servicios de Internet

El Administrador de servicios de Internet se divide en dos paneles, el panel de la izquierda se

En esta ventana dos son las pestañas más importantes:

2. Directorio particular: Desde aquí podemos establecer la carpeta raíz de nuestro

3.2.- Diseño de las páginas

Proceso de visualización de una página estática.

1.- El navegador realiza la petición para acceder a la página HTML.

1.- El navegador realiza la petición para acceder a la página

Para aprender la aplicación Dreamweaver, realizaremos una página

carpeta local d:\dreamweaver\arte

 Sitio//administrar sitio//nuevo damos un nombre al sitio web (ejemplo: web arte)

 Indicar el nombre del sitio

Para organizar mejor el contenido se ha hecho el siguiente esquema del sitio.

Románico. Diferencias Gótico.

4. CREACIÓN DE UNA PAGINA WEB.

En el panel central seleccionaremos crear nuevo HTML o si no aparece el panel central en el

A la derecha de la ventana, en el panel de archivos (ventana/archivos), se podrá ver los

La siguiente ventana que se visualizará será:

1. Seleccionaremos la forma trabajar. Modo diseño, modo código (lenguaje HTML) o

Guardar la página web

Visualizar la página en el navegador

Dependiendo del navegador las páginas se visualizan de forma diferente. Si en el ordenador

En la ventana de archivos hay una opción (expandir/contraer) que permitirá administrar,

Esta ventana sitio tiene dos partes, a la

Crearemos las siguientes carpetas:

Se creará un archivo denominado index.htm que contendrá la página principal.

Abrimos la página index.htm y con el botón derecho seleccionamos propiedades de página.

Aparecerá una ventana de diálogo donde habrá 5 opciones en la parte de categoría.

En la casilla título escribiremos el románico y el gótico.

En esta ventana indico la fuente de

Ejemplo: imagen de fondo : fondo.

• Formato: aplica un estilo predefinido al texto.

Los formatos más usados:

JPEG (Joint Phothografic Experts Group)

GIF(Graphic Interchange Format)

Inserción de una imagen

• Colocar el cursor donde se quiere insertar la imagen

• Se selecciona la imagen a insertar y aceptar. Si no esta en la carpeta local

En esta ventana de propiedades se puede:

• Conocer el tamaño de la imagen