Dreamweaver 8

Dreamweaver 8 Simposium XVI Dreamweaver 8. Introducción. Etapas en la creación de la Web.

Las etapas fundamentales para crear y colocar las páginas en Internet son:

1. Planificar la creación de la Web. La primera etapa es pensar por anticipado y realizar un diseño preliminar.

2. Creamos un directorio para guardar las páginas. Creamos una nueva carpeta (fólder) para guardar los ficheros de nuestra página de forma ordenada en el disco duro de nuestro ordenador.

3. Creamos las páginas. Construimos las páginas incorporando el texto, las imágenes y los demás accesorios.

4. Guardamos en el disco duro de nuestro ordenador los archivos creados. Es importante guardarlos ordenados y con nombres adecuados.

5. Comprobamos que las páginas no tienen errores.

A) Utilizamos la función de verificación de Dreamweaver

B) Vemos las páginas con los navegadores para comprobar que se ven como esperamos.

6. Enviamos los ficheros al servidor de Internet. Mediante un programa FTP específico o Local / red utilizando el propio sistema que incorpora el DreamWeaver enviamos los ficheros al servidor de Internet al que accederán los visitantes.

Dreamweaver es una herramienta de diseño de sitios o páginas Web profesionales ahora es

el mejor instrumento para crear potentes aplicaciones en Internet. Por primera vez, puede trabajar en un único entorno para crear, desarrollar y administrar sitios Web y aplicaciones en Internet rápidamente.

Instructor: Juan José Pérez González Asistente: Juan Armado Pérez Lara Página 1 de 61

Dreamweaver 8 Simposium XVI Comenzando con dreamweaver 8: El entorno de trabajo.

Para comenzar a trabajar con el programa, hacemos clic en inicio, pulsamos todos los programas y elegimos Macromedia y ahora elegimos Macromedia dreamweaver 8 como esta en la figura:


Dreamweaver 8 Simposium XVI

Ahora que ya esta cargado el programa nos aparecerá la ventana de configuración del espacio de trabajo, esta ventana aparece cuando usted carga por primera dreamweaver 8, en esta seleccionaremos el espacio de trabajo que deseemos diseño o código.

Después de que haya elegido un espacio de trabajo que iniciará cada vez que usted cargue dreamweaver 8, usted puede cambiar este espacio de trabajo en el menú Ventana > Diseño del espacio de trabajo. Como se muestra en la figura, modificando el espacio de trabajo que deseemos programador (código), diseñador, pantalla doble.


Dreamweaver 8 Simposium XVI El primer elemento que destaca en el entorno de trabajo de dreamweaver 8 es la ventana de Bienvenida, que ofrece las opciones de abrir un documento reciente, crea un documento nuevo, crear un documento a partir de ejemplos, también tiene las opciones de ver un tour de dreamweaver donde explica las características de este, aprenda sobre recursos donde explicara más sobre cada recurso que ofrece dreamweaver, y buscar un entrenamiento autorizado.

Esta ventana se puede deshabilitar dando clic en no mostrar esta ventana otra vez,

posteriormente si usted la quiere volver activar tendrá que ir a la ventana de preferencias siguiendo los siguientes pasos dar clic en el menú Edit > Preferencias como se muestra en la figura, seleccionar la casilla mostrar página de inicio.


Dreamweaver 8 Simposium XVI La ventana de Entorno de Trabajo.

Ventana documento

Inspector de propiedades Selector de etiquetas

Barra de estado Panel de archivos

Barra de menús Barra de titulo Barra insertar

Grupo de paneles

Barra de herramientas documento

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 aplicación.

En la ventana de entorno de trabajo tienes una barra de titulo, la barra de titulo despliega los títulos de las páginas, y en paréntesis la dirección del nombre del archivo.


Dreamweaver 8 Simposium XVI La Ventana Documento

La ventana Documento muestra lo que le ocurre a nuestro documento. Puedes seleccionar

cualquiera de las siguientes vistas:

Vista Diseñador es un entorno de desarrollo grafico visual, edición, y entornos de aplicación rápidos. En esta vista, Dreamweaver se despliega completamente editable, con representación visual del documento, similar a como se puede mirar en el explorador.

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

Vista doble es un entorno de desarrollo gráfico y de código, la ventana documento se partirá a la mitad mostrando la vista código y vista diseño en el orden mencionado.

En la ventana documento tienes el nombre de la pagina actual, después 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 página 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 pestañas 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 pestaña.


Dreamweaver 8 Simposium XVI La Barra de Herramientas del Documento.

La barra de herramientas del Documento contiene botones que se muestran entre las diferentes vistas de tu documento: Código y Diseño, y una vista total que muestra la Vista Código y la Vista Diseño.

La barra de herramientas también contiene algunos de los comandos más 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 Código: Despliega solo el código en la ventana Documento.

Vista Código y Diseño: Despliega la vista Código en parte de la ventana Documento y la vista Diseño en otro parte. Cuando seleccionas esta vista combinada, la opción de Vista Diseño esta disponible sobre la vista de opciones del menú.

Vista Diseño: Despliega solo el diseño en la ventana Documento.

Titulo del Documento: Puedes añadir un titulo para tu documento, para que se despliegue en la barra de titulo del explorador. Si tu documento ya tiene un titulo, aparecerá en el campo.

Sin Explorador/Verificar Errores: Habilita la verificación de tu compatibilidad de explorador.

Marca de Validación: Valida lo que ocurre en el documento o una pestaña seleccionada.

Administrador de Archivos: Despliega el menú para administrar los archivos.

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 Diseño: Actualiza la vista diseño del documento después de hacer cambios en la vista Código.

Opciones de Vista: muestra las opciones para la vista Código y Diseño, incluyendo que vistas deben aparecer sobre la otra.



Ayudas Visuales: Le da diferentes ayudas visuales para diseñar sus páginas.

Administrador de archivos

Vista previa / depurar en navegador

Actualizar vista diseño

Ayudas visuales

Vista código

Vista código y diseño

Vista diseño

Título del documento

No hay errores de comprobación

Validar formato Opciones de

vista La barra de Estado. La barra de estado esta bajo de la ventana documento y provee información adicional acerca de la documentación que estas creando. Instructor: Juan José Pérez González Asistente: Juan Armado Pérez Lara Página 8 de 61


Selector de tags (etiquetas): Muestra la jerarquía de las pestañas agrupando la selección escogida. Al dar clic en cualquier etiqueta se muestra la jerarquía 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 visualización para tu documento.

Menú desplegable de Tamaño de la Ventana: (visible solo en Vista Diseño) te permite cambiar el tamaño de la ventana Documento para predeterminar nuestras dimensiones. Y para estimar el tiempo de descarga de la página, incluyendo todos los archivos dependientes como imágenes y otros archivos multimedia.

Inspector de Propiedades

El Inspector de Propiedades permite examinar y editar las propiedades más comunes de elementos seleccionados en la página, como son texto, o un objeto insertado tal como una imagen, tabla, frames, div.

El contenido del inspector de propiedades varía dependiendo sobre que elemento se haya

seleccionado. Por ejemplo, si seleccionas una imagen en la página, 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.


Dreamweaver 8 Simposium XVI 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 tamaño 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 también desplegar un mapa visual del sitio.

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.


Dreamweaver 8 Simposium XVI Configuración de un sitio y los archivos de un proyecto. Aprenda sobre los sitios de Dreamweaver

En Dreamweaver, el término "sitio" puede referirse a un website o a una localización de almacenaje local para los documentos que pertenecen a un website. Esto último es lo que usted necesita establecer antes de que usted comience a construir su website. Un sitio de Dreamweaver organiza todos los documentos asociados a su website y le deja seguir y mantener acoplamientos, manejar archivos, compartir archivos, y transferir sus archivos del sitio a un Web Server

Un sitio de Dreamweaver consiste en tres partes, dependiendo de su ambiente de computadora y del tipo de website que usted está desarrollando:

La carpeta local es su directorio de funcionamiento. Dreamweaver refiere a esta carpeta como su sitio local. La carpeta local es generalmente una carpeta en su disco duro.

La carpeta remota es donde usted almacena sus archivos, dependiendo de su ambiente, para probar, la producción, la colaboración, y la publicación. Dreamweaver refiere a esta carpeta como su sitio remoto. La carpeta remota es una carpeta en la computadora que está funcionando su Web Server. La computadora que funciona el Web Server es a menudo (pero no siempre) la computadora que hace su sitio público disponible en la red.

La carpeta para las páginas dinámicas (carpeta de prueba del servidor) es la carpeta donde Dreamweaver procesa las páginas dinámicas (ASP, JSP, PHP). Esta carpeta es a menudo la misma carpeta que la carpeta remota. Usted no necesita preocuparse de esta carpeta a menos que usted esté desarrollando un uso de la red. En esta configuración se da la opción de proteger y desproteger archivos estas opciones se utilizan cuando se esta haciendo un proyecto WEB colectivo o en grupo.

Usted puede instalar un sitio de Dreamweaver usando el ayudante de la definición del sitio, que le dirige en el proceso de la operación, o usando los ajustes avanzados del sitio, que le dejaran instalar carpetas local, remota, y la carpeta de prueba individualmente, como fuera necesario.

Esta configuración esta disponible en menú Sitio > Nuevo sitio / administrar sitio o bien en

el panel de archivos seleccionar el combobox examinador de carpetas dando clic en la opción administrar sitios.

Ahora nos aparece el cuadro de dialogo administrar sitios, donde las opciones de nuevo y

modificar nos proporcionara la ayuda necesaria para crear nuestro sitio o bien editarlo, también nos da las opciones de quitar sitio, duplicarlo, exportar e importar.



Después de que hayamos seleccionado alguno de estos botones nos aparcera la siguiente

ventana de Definición de Sitio.

Donde nos muestra las características a configurar para nuestra carpeta local, datos de

carpeta remota, servidor de prueba, mapa de diseño de sitio, entre otros.



Si usted ha elegido proteger / desproteger archivos en los datos de carpeta remota, aquí mismo en el menú sitio podrá dar un informe a sus colegas que verán al intentar obtener un archivo que esta protegido. Después de que usted haya configurado las propiedades o categorías de su sitio web, usted podrá utilizar todas las herramientas que le ofrece dreamweaver 8


Dreamweaver 8 Simposium XVI El Texto

La barra de insertar texto: Te permite insertar varios formatos de textos como párrafos, cabeceras, caracteres, negrita, itálica, etc.

Botón itálica Listas desordenadas, ordenadas, elementos de lista

Botón abreviación

Caracteres

Editor de etiquetas (tags) fuente

Botón negrita

Botón párrafo

Comillas en vérsatela

Encabezados

Las características del texto seleccionado también 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. El formato preformateado sirve para que el texto aparezca tal cual ha sido

escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno,

pero al establecer el formato preformateado se respetará que hayan varios espacios en lugar de

solo uno.


Dreamweaver 8 Simposium XVI 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. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no

tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvética,

Sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvética.

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. A través

del menú Texto también se puede, entre otras cosas, subrayar el texto. Esta opción no aparece en

el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen

subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un

vínculo.

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.


Dreamweaver 8 Simposium XVI 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.

Listas

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con

viñetas.

Para que un texto que ya ha sido introducido en el documento se convierta en una lista,

simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a

través del inspector de propiedades, o a través del menú Texto.

La lista con viñetas (desordenada) se selecciona a través del botón , mientras que la

lista numerada (ordenada) se selecciona a través del botón .

Ejemplo de lista numerada (ordenada):

1. Preparar la mochila

1. Sacar los libros de ese día

2. Introducir los libros del día siguiente

2. Ponerme el pijama

3. Lavarme los dientes

4. Poner el despertador

Ejemplo de lista con viñetas (desordenada):

• Perro

• Gato

• Aves

o Canario

o Loro

• Hamster



Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es

necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de

la lista anidada.

A través del menú Texto, opción Lista, es posible acceder a las propiedades de la lista

seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar

de la lista para que se active este submenú.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con

viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de

las listas ordenadas, el número por el que comenzará el recuento.


Dreamweaver 8 Simposium XVI Ejemplo de texto:

Hola esta es una prueba de manipulación de texto

1. Introducción

• Misión de la empresa

• Visión de la empresa

2. Contenido

• Sistema de control administrativo

o Ingreso a inventario

o Registro de entrada

3. Marco teórico

• Lenguajes de programación

• Base de datos

• SQL

Que onda como estas (centrado)

Si aquí estoy todavía (izquierda)

En este curso veremos herramientas básicas de dreamweaver 8 (justificado)


Dreamweaver 8 Simposium XVI Imágenes

En este tema vamos a ver cómo insertar imágenes en un documento. También veremos

cómo crear algunas imágenes especiales, como es el caso de los Rollovers y los botones flash, que

ayudan a mejorar la apariencia de nuestras páginas.

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten

mejorar su apariencia, o dotarla de una mayor información visual.

Existen una serie de formatos de imagen más recomendables que otros para ser

introducidos en una página web.

Formatos de imagen

Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos

estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que

no son compatibles con algunos navegadores.

Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor

calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria.

Vamos a ver un poco más sobre estos formatos:

Formato GIF:

Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas

de un mismo color o de tonos no continuos. 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.



Puedes incluir imágenes en otros formatos a través de Dreamweaver, que podrán ser

visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG.

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.

Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la

hora de modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las

imágenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.

Insertar una imagen

Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después

de esto, ya es posible seleccionar una imagen a través de la nueva ventana.

En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del

sitio. Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicación

diferente, la imagen puede no verse al estar siendo buscada en la ubicación anterior.



Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.

La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el

campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha

sido insertada como relativa a la carpeta raíz del sitio o relativa al documento.

Cambiar el tamaño de una imagen:

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen dentro de la página.

Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Fireworks.

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

Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad.

Existen dos formas de modificar el tamaño:

1. Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen.

2. 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 este seleccionada alguna imagen. Hay que tener en cuenta que para cambiar la alineación de la imagen hay que hacerlo a través del campo Alinear del inspector de propiedades. La alineación de las imágenes ofrece más posibilidades que la del texto: superior, medio, medio absoluta, línea de base, etc.

Imagen de sustitución. Rollover



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.

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.

Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa,

la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras

debidas a la descarga de la imagen cuando llega el momento de que aparezca.

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 algún motivo ésta no pueda ser mostrada en

el navegador.

El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a

través del campo Alt del inspector de propiedades de la imagen seleccionada.


Dreamweaver 8 Simposium XVI La barra de Insertar Común.

La barra de Insertar contiene botones para crear e insertar objetos como tablas, capaz e imágenes.

Los botones son organizados dentro de varias categorías, pueden elegirse sobre el lado izquierdo de la barra de Insertar. Las categorías adicionales aparecen cuando en el código del documento ocurren cambios, como en los documentos ASP o CFML.

• Cuando Dreamweaver comienza, muestra la ultima categoría con la que trabajaste. • Algunas categorías tienen botones con menús desplegables. • Cuando seleccionas una opción de un menú desplegable, comienza con la acción por default

del botón.

La barra de Insertar esta organizada en las siguientes categorías:

Habilita la creación e inserción de los objetos más comúnmente usados, como imágenes y tablas, hipervínculos, comentarios, medios, etc.

:


Dreamweaver 8 Simposium XVI Hipervínculos

Hipervínculos son enlaces a otras páginas del proyecto o Internet, incluso a archivos

contenidos en nuestro sitio web.

Los hiperenlaces en dreamweaver son muy sencillos de aplicar, tan solo tienes que

seleccionar el objeto, o texto, e ir al menú insertar > hipervínculos.

Nos mostrara el siguiente cuadro de dialogo donde usted escogerá la pagina para dar

el enlace, o bien para un archivo para su previa descarga.

Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

Pasos para crear un hipervínculo:

1. Sitúe el punto de inserción en el documento donde desea que aparezca el hipervínculo. 2. Realice una de estas operaciones para mostrar el cuadro de diálogo Insertar hipervínculo

• Elija Insertar> Hipervínculo. • Seleccione la ficha Común de la barra Insertar y, a continuación, haga clic en el

botón Hipervínculo.

Aparecerá el cuadro de diálogo Hipervínculo.

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo.

Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.



Pasos para crear un hipervínculo:

1. Sitúe el punto de inserción en el documento donde desea que aparezca el hipervínculo. 2. Realice una de estas operaciones para mostrar el cuadro de diálogo Insertar hipervínculo

• Elija menú Insertar> Hipervínculo o • Seleccione la ficha Común de la barra Insertar y, a continuación, haga clic en el

botón Hipervínculo.

Aparecerá el cuadro de diálogo Hipervínculo.



3. Seleccione las opciones deseadas en l cuadro de diálogo.

como hipervínculo en el documento.

el cuadro de texto Vínculo, escriba el nombre del archivo de destino del vínculo o haga clic en el icono de carpeta para localizar y seleccionar un archivo de imagen.

n la que deberá abrirse el archivo.

nk carga el archivo vinculado en una ventana de navegador nueva y sin nombre. • _parent carga el archivo vinculado en el conjunto de marcos padre o en la ventana

• .

** En el campo Índice de fichas, introduzca un número para el orden de fichas.

do (una letra) para seleccionar el hipervínculo en el navegador.

Crear

o Google la que sea de su agrado.

Pasos:

bir un texto significativo ala pagina.

e

** En el campo Texto, introduzca el texto que deberá aparecer

** En

** En el campo Destino del menú emergente Destino, elija la ventana e

• _bla

del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el archivo vinculado se cargará en la ventana completa del navegador. _self carga el archivo vinculado en el mismo marco o ventana que el vínculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo

• _top carga el archivo vinculado en la ventana completa del navegador, quitando así todos los marcos.

** En el campo Título, escriba un título de página para el hipervínculo.

** En el campo Clave de acceso, introduzca un equivalente de tecla

4. Haga clic en Aceptar.

un hipervínculo.

Hipervínculo a la página de Yahoo

1. Escri

2. Crear el hipervínculo.


Dreamweaver 8 Simposium XVI Multimedia

a insertar Elementos Flash: Te permite insertar elementos de Macromedia Flash.

Seleccionamos un archivo que se encuentra fuera del sitio y le damos clic a Aceptar.

La barr



Y Macromedia Dreamweaver nos va a hacer una pregunta que si lo deseamos a agregar a nuestra carpeta local de nuestro sitio y le damos clic al botón de Si.

Por cuestiones de organización es recomendable crear una carpeta que se llame “mis flash” para que se guarden este tipo de archivos. La seleccionamos, le damos clic y clic en el botón de guardar.



El inspector de propiedades de las películas Flash es prácticamente igual que el de los botones y el texto Flash, pero existen dos opciones nuevas que hacen referencia a la visualización de la película

.

La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio.

La otra es la opción Rep. autom. (Reproducción automática), que al estar marcada indica que nada más cargarse la página comenzará a reproducirse la película Flash.

Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la película.

Sonidos

El incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más atractiva. Muchas de las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan desactivarlo.

Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden


Dreamweaver 8 Simposium XVI utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

Para insertar un archivo de audio en un documento tienes que dirigirte al menú Insertar,

Medía, opción Plug-in.

Seleccionamos un archivo que se encuentra fuera del sitio y le damos clic a Aceptar


Crear una carpeta que se llame “mi música” para que se guarden este tipo de archivos. La seleccionamos, le damos clic y clic en el botón de guardar.



En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarán los controles de audio, mediante Al y An.

En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la página, pero que no se muestren los controles de audio, los campos Al y An deben valer cero.

Los sonidos se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores no pueden cambiarse a través del inspector de propiedades, pero sí a través del código.

Pero para que no se reprodujera automáticamente se ha añadido autostart="false", y para que se reprodujera continuamente se ha añadido loop="true".

Modificar código original a:

Si quieres poner música de fondo en una página web, sin que aparezcan los controles de audio, puedes escribir este código directamente en la vista Código.

Insértalo después de la etiqueta </title> Con el parámetro loop puedes decidir cuantas veces quieres que se reproduzca, 1, 2, 3... (Con -1 se reproduce de modo continuo).

Videos

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.

Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú Insertar, Medía, opción Plug-in.



Seleccionamos un archivo que se encuentra fuera del sitio y le damos clic a Aceptar


Crear una carpeta que se llame “mi videos” para que se guarden este tipo de archivos. La seleccionamos, le damos clic y clic en el botón de guardar.



El inspector de propiedades para los archivos de audio insertados de esta forma es el mismo que el de los archivos de video, ya que ambos se insertan como Plug-in.

Los videos también se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores pueden cambiarse a través del código, del mismo modo que en el caso de los archivos de audio, añadiendo autostart="false" y loop="true".

Todos los objetos insertados a través de la opción Plug-in precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos. En el campo Origen del inspector de propiedades se establece el archivo vinculado (el archivo de audio o de vídeo) que ha de reproducirse.

En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede establecerse en el campo URL plg una página en la que pueda encontrarlo.


Dreamweaver 8 Simposium XVI 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.

Aquí tienes un ejemplo de botón Flash. Sitúa el puntero sobre él para ver qué es lo que

ocurre.

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:

A través de Estilo puede seleccionarse uno de los distintos formatos de botón que se

ofrecen.

En esta misma ventana hay que 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:).

Es preferible guardar los botones Flash en el mismo directorio que los documentos

HTML, en lugar de la carpeta destinada a almacenar imágenes, ya que de no ser así es posible que


Dreamweaver 8 Simposium XVI al intentar asignar un vínculo dentro del propio sitio, Dreamweaver no permita guardar el botón

con ese vínculo en una ubicación diferente de la de dicho documento.

Recuerda que los botones deben guardarse con la extensión SWF.

A través del inspector de propiedades del botón Flash es posible editar de nuevo sus

atributos:

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)

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.

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.

Aquí tienes un ejemplo de texto Flash. Sitúa el puntero sobre él para ver qué es lo que

ocurre.



El inspector de propiedades del texto Flash es igual que el de un botón Flash.

Barra de navegación

Una barra de navegación es un conjunto de imágenes que se utilizan como opciones de

menú para navegar dentro de una web. La barra de navegación te permite definir unos botones

para ir a diferentes páginas pero de forma que cambie el aspecto del botón según muevas el ratón

sobre él y según sea el último botón pulsado.

Una página web solo puede contener una única barra de navegación.

Para insertar una barra de navegación hay que dirigirse al menú Insertar, Objetos de

imagen, a la opción Barra de navegación.



En la nueva ventana pueden especificarse cuatro imágenes diferentes para cada uno de los

botones, el vínculo para cada uno de ellos, etc.

A través de los botones superiores de la ventana es posible crear y eliminar botones de la

barra de navegación, así como reordenarlos. Con se crea un botón nuevo, con se elimina el

botón seleccionado, y con se puede modificar la posición del botón seleccionado.

En Imagen Arriba pones la imagen que quieres mostrar inicialmente

(cuando todavía no se ha hecho clic).

En Sobre imagen, pones la imagen que quieres mostrar cuando el

usuario mueva el puntero sobre el botón y éste estaba mostrando la

imagen asignada en Imagen Arriba.

En Imagen abajo, pones la imagen que quieres mostrar después de que

el usuario haya hecho clic en la imagen.



En Sobre mientras imagen abajo, pones la imagen que quieres mostrar

cuando el usuario mueva el puntero sobre el botón y éste estaba

mostrando la imagen asignada en Imagen Abajo.

De esta forma, si asignas imágenes distintas puedes saber cuál es el

último botón que ha sido pulsado (el que tiene Imagen Abajo).

Aquí tienes un ejemplo de barra de navegación. Para su creación se han utilizado las

mismas imágenes para todos los botones, pero como puedes ver, en el botón del medio aparece

inicialmente una imagen diferente de la de los otros dos. Esto se debe a que la opción Mostrar

"Imagen abajo" inicialmente estaba activa para este botón. Sitúa el puntero sobre los distintos

botones, y pulsa sobre alguno, para ver qué es lo que ocurre.

El que existan cuatro imágenes diferentes sirve para identificar cual de los vínculos está

activo, cosa que con un simple rollover no puede hacerse.

A través de la opción Insertar es posible especificar si los botones de la barra de

navegación van a aparecer de forma horizontal o vertical dentro de la página.


Dreamweaver 8 Simposium XVI 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.

Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuación se muestra un ejemplo de una tabla:

Insertar una tabla:

Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.



• En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como el Ancho.

• El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la página y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla.

• Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1).

• Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de éstas.

• Espacio entre celdas indica la distancia entre las celdas de la tabla.

• Encabezado pone un encabezado a la tabla.

EJERCICIO. Crear una tabla.

Agregar una tabla con el siguiente formato

• 2 columnas • 5 filas • 400 píxeles de ancho de tabla • Borde 1 • Espacio entre celdas 1


Dreamweaver 8 Simposium XVI Modificar Tablas

A continuación, se modificará la disposición de la tabla. Se añadirá filas y columnas a la tabla y se aprenderá a combinar y dividir celdas para crear la disposición de página deseada.

1. Haga clic en la celda superior izquierda y arrastre el puntero del ratón hasta la última fila para seleccionar la columna izquierda.

2. Seleccione Modificar > Tabla > Insertar columna

3. Haga clic en la celda inferior izquierda y seleccione Modificar > Tabla > Insertar filas o columnas. Aparece el cuadro de diálogo Insertar filas o columnas.



Sugerencia: Seleccione la opción Insertar filas o columnas si desea añadir un número concreto de filas o columnas o para elegir el lugar en el que debe insertarse una fila o una columna dentro de la tabla.

Combinar o Dividir Celdas

Al igual como en Excel también se pueden combinar o dividir celdas, este se puede hacer desde el inspector de propiedades o del menú modificar > tablas> combinar o dividir celdas dependiendo de la selección de tabla que haya seleccionado. O bien esto también se puede hacer desde el inspector de propiedades, teniendo una selección ya se de celdas de una tabla.



Ejemplo:

• 4 columnas • 4 filas • 400 de píxeles de ancho de tabla • Borde1 • Espacio entre celdas 1

Ahora modificaremos esta tabla con las siguientes especificaciones:

• Seleccionar las primeras 4 columnas de la primera fila • Dar clic en menú modificar > tablas > combinar celdas. • En el inspector de propiedades dar clic en negrita, y escribir

ejemplo de modificación de tablas. • Insertar las siguientes palabras en las siguientes columnas

o columna 2 fila 2 Es, o columna 2 fila 3 mos_, o columna 2 fila 4 ficando, o columna 3 fila 2 ta, o columna 3 fila 3 modi, o columna 3 fila 4 _celdas.

• Seleccionar las celdas modificadas, y dar clic en menú modificar tablas> combinar celdas.


Dreamweaver 8 Simposium XVI Tendremos el siguiente resultado:

Otro sencillo ejemplo:

• Insertar una tabla de 3 columnas por 6 filas. • Seleccionar la primara fila completa, dar clic en menú modificar > combinar celdas, e

insertar el siguiente texto DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE. • Seleccionar las celdas de las filas 2 y 3. • De estas celdas que acabas de dividir seleccionar la primera celda y dar clic en menú

modificar > tablas > combinar celdas, escribir PERRO. • Las celdas que están por debajo de la celda que acabamos de modificar escribir

PEQUEÑO Y GRANDE respectivamente en cada celda. • Ahora seleccionar las 2 primeras celdas de las filas 2 y 3 y combinarlas, insertar

DIFERENCIAS, hacer lo mismo con las del lado derecho y escribir HOMBRE. • En las celdas 3, 4 y 5 escribir Duración crecimiento, Tiempo de gestación, Duración de

vida del pelo / cabello, cada una en la celda correspondiente. • Dividir la celda 4 de la fila 3 y dividirla, e ingresar 10 meses, 18 a 24 meses

respectivamente en cada celda. • En las celdas debajo de la que acabamos de modificar escribir lo siguiente 58 a 63 días,

1 ano respectivamente. • Combinar las celdas de la columna 3 y filas 2 y3, y escribir HOMBRE. • En las celdas debajo de la que acabamos de modificar escribir lo siguiente 16 años, 9

meses, 2 a 7 años. • Ver los resultados esperados.


Dreamweaver 8 Simposium XVI Capas (layers)

• Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño.

• Las capas pueden moverse de una posición a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición.

• También pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrándolos hasta conseguir el tamaño deseado.

• Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes, animaciones flash, y todos los elementos que puede contener un documento HTML.

• La capa no solo aparece representada por el recuadro anterior, sino que también aparece la imagen en el documento, cuando está abierto en Dreamweaver.

• Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina también la capa.

Insertar una Capa

• Las capas pueden insertarse en una página a través del menú Insertar, Capa.

• Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero.

• Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono correspondiente, pero esto no resulta útil cuando existen muchas capas en un mismo

documento, ya que todas las capas tienen asociada una imagen igual a esta, y no es fácil seleccionar la deseada a la primera.

• Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a través de la pestaña Capas del panel Diseño, que puede abrirse a través del menú Ventana opción Capas. Si la opción Capas no te aparece directamente en este menú, posiblemente esté dentro de la opción Otros. También puedes abrir el panel pulsando F2.



• En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el panel.

Formato de una capa.

Las propiedades de la capa se especifican a través de su inspector de propiedades.

• ID de capa es el nombre de la capa. También puede ser cambiado a través del panel Capas, haciendo doble clic sobre él.

• Iz y Sup indican la distancia en píxeles que hay entre los límites izquierdo y superior del documento y la capa.

• An y Al indican la anchura y la altura de la capa.

• Índice Z es el número de orden de colocación de las capas. Este valor también puede cambiarse a través del panel Capas. Una capa será solapada por aquellas capas cuyo índice Z sea mayor que el suyo.



• Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos: o Default (visibilidad según el navegador). o Inherit (se muestra la capa mientras la página a la que pertenece también se esté

mostrando), o Visible (muestra la capa, aunque la página no se esté viendo) y o Hidden (la capa está oculta).

• La visibilidad también puede cambiarse a través del panel Capas, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.

• A través de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.

• Desb. (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.

• Hidden (oculto) especifica que el contenido adicional no se mostrará en el navegador.

• Scroll (desplazamiento) especifica que el navegador deberá añadir barras de desplazamiento a la capa tanto si se necesitan como si no.

• Auto (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).


Dreamweaver 8 Simposium XVI Disposición (layout)

En la parte inferior de este panel flotante se encuentran los botones para cambiar entre el Diseño Layout y el Estándar.

Barra de insertar Diseño: Te permite que insertes tablas, capaz y tramas. Puedes elegir los tipos de vistas de las tablas.

Datos de tabla

Tabla diseño (solo disponible en modo diseño)

Dibujar celda de diseño (solo disponible en modo diseño)

Insertar fila arriba/debajo

Botón tabla Botón insertar div

Botón dibujar capa

Modo estándar

Modo tablas expandidas

Modo diseño

Frames (marcos)

Insertar celda izquierda/derecha

Podemos trazar celdas dentro de la tabla. Incluso podemos trazar celdas fuera de una tabla y el programa genera la tabla que contiene la celda.



Podemos fácilmente modificar las dimensiones de las celdas pulsando sobre la línea y manteniendo pulsado el botón del ratón nos movemos.

En nuestro ejemplo hemos modificado las celdas para que todas tengan un ancho de 100, tal como se muestra.

Una forma rápida para crear varias celdas es manteniendo pulsada la tecla Control "Ctrl".

Muchas páginas se organizan mediante tablas dentro de tablas. Podemos insertar una tabla dentro de otra para organizar el contenido y facilitar el diseño de la página.


Dreamweaver 8 Simposium XVI Comportamientos

En este tema vamos a ver las características básicas de los comportamientos, así como un par de ejemplos de entre sus posibles aplicaciones.

• Los comportamientos son acciones que suceden cuando los usuarios realizan algún evento sobre un objeto.

• Los comportamientos no existen como código HTML, se programan en JavaScript. Dreamweaver permite insertarlos a través del panel Comportamientos, por lo que no es necesario escribir ninguna línea de código JavaScript para programarlos.

• El panel Comportamientos se puede abrir a través del menú Ventana, opción Comportamientos. También pulsando Mayús+F3.

• En este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos para elegir una versión de la lista de navegadores.

Es posible definir ciertos comportamientos por ejemplo que al acceder a una página se active una ventana flotante.

• Pulsamos sobre Window en la barra superior.

En el menú que aparece pulsamos sobre Behaviors o comportamientos

• Nos aparece el cuadro que nos permite definir las acciones.



• Activar una ventana flotante con un mensaje. En nuestro ejemplo escribimos la palabra Pulsar y la marcamos

• En el Cuadro de Comportamientos pulsamos sobre el botón + para activar las opciones.

• Entre las opciones que aparecen seleccionamos una ventana de Mensaje.

• Aparece el Cuadro en el que escribimos el mensaje que aparece en la ventana flotante.



• Pulse sobre "Pulsar" para comprobar el resultado de nuestro ejemplo.

• Tenemos otras posibilidades entre las acciones. A continuación vemos otro ejemplo.

• Y seleccionamos el enlace a una página por ejemplo AulaFacil.com. Escribimos la dirección en el Cuadro que aparece.

• Y definimos que tiene que hacer el visitante para que se active la nueva ventana. Pulsamos sobre el botón tal como muestra la siguiente imagen.

• Entre las opciones seleccionamos "onclick" de forma que la nueva ventana se activa al pulsar.



• Pulsando sobre la siguiente frase se muestra el resultado.

Al pulsar se abre un nuevo navegador

HTML

La barra insertar HTML. Te permite insertar tags (etiquetas) en HTML para reglas

horizontales, cabeceras de contenido, frame y scripts.

La barra de herramientas de Codificación.

La barra de codificación contiene botones que te permiten estandarizar varios condiciones

de código, como colapsar y expandir selecciones de código, resaltando código invalido, aplicando y removiendo comentarios, código independiente, e insertando código usado recientemente. La barra de herramientas esta visible solo en Vista Código y aparece verticalmente sobre la parte izquierda de la Ventana Documento.


Dreamweaver 8 Simposium XVI Marcos (frames) Cuándo utilizar marcos

El uso más común de los marcos es la navegación. Una página Web puede utilizar un marco para albergar el menú de navegación y otro marco para el contenido de la página. Dado que el menú de navegación se encuentra en un marco, los visitantes pueden hacer clic en un elemento del menú y el contenido aparecerá en el marco de contenido sin que cambie el menú de navegación. De este modo, el visitante podrá orientarse perfectamente en el sitio.

Mediante la utilización de Marcos o Frames podemos dividir una página en varias áreas. De esta forma podemos gestionar de forma independiente las distintas zonas. Permitiendo que una parte cambien en función de los enlaces que pulsamos mientras que otras permanecen fijas. Por ejemplo queremos que a la izquierda se muestre un índice de enlaces que permanezca mientras que el resto de la página cambia.

1. Activamos el panel de marcos. Puede que se encuentre ya activada, si no así de clic en menú ventana > marcos

2. Cambiamos la barra de insertar a barra diseño. Y seleccionamos el menú de Marcos o Frames. Aparece un menú que nos permite seleccionar el Marco deseado. En nuestro ejemplo elegimos la primera opción para tener un marco vertical a la izquierda Y aparece la página dividida en dos partes tal como se muestra a continuación.



La imagen anterior nos muestra la página dividida entre el marco de la izquierda y el resto de la página. Podemos modificar el ancho del marco de forma sencilla pulsando sobre la línea de división y manteniendo el botón pulsado nos movemos.

Al crear el marco anterior se generan tres ficheros o documentos, el que contiene el marco, el resto de la página y un documento que contiene la estructura de la página. Si creamos dos marcos se generan cuatro ficheros, el que contiene la estructura, dos ficheros de marcos y otro que contiene el resto de la página. En la siguiente imagen se muestra el botón que genera dos marcos uno superior y otro a la izquierda.

Podemos modificar las características del marco en el inspector de propiedades. En el siguiente ejemplo hacemos visible la división, definimos el tamaño de la línea de separación y seleccionamos el color rojo para la separación. En Borders cambiamos a si, en Ancho de borde ponemos 1 y en color de borde seleccionamos negro.



Y en la vista de diseño se verá como se muestra en la siguiente imagen.

Al definir un marco se genera un fichero que contiene la estructura del marco y otro fichero por cada parte en la que se divide la página. En nuestro primer ejemplo seleccionamos un marco a la izquierda por lo que se generan tres ficheros uno que contiene la estructura, otro el marco izquierdo y otro la zona principal de la página.

Una vez hemos añadido los elementos deseados al marco y al resto de la página es preciso guardar los ficheros.

Podemos guardar los ficheros "uno a uno"

• Pulsamos Archivo o "File" en la Barra superior • Pulsamos sobre Guardar Marco o "Save Frames"



• Podemos guardar todos los ficheros generados a la vez. • Pulsamos Archivo o "File" en la Barra superior. • Y seleccionamos Guardar Todos los Marcos.

Nos aparece el Cuadro Guardar. Seleccionamos el directorio donde guardar los ficheros. Lo normal es guardar los ficheros en el directorio que hemos definido anteriormente como el Sitio para la Web. Es importante recordar que si guardamos los ficheros en un directorio del disco duro y luego los movemos, copiándolos en otro, puede afectar a los enlaces.

Nos aparece por defecto un nombre de archivo en la parte inferior del Cuadro. Lo normal es borrarlo y sustituirlo por el nombre que deseemos para ese marco.

En nuestro ejemplo el nombre que ponemos al fichero que contiene la estructura es Marco1, tal como se muestra a continuación.


Dreamweaver 8 Simposium XVI Panel de Estilos CSS. Que es CSS

Hojas de estilo en cascada (CSS) son una colección de reglas de formato que controlan la apariencia de contenido en una página Web. Cuando usted use CSS para dar formato a una pagina, usted separa el contenido de presentación. El contenido de su pagina, el código HTML, reside en el archivo mismo de html, mientras las reglas CSS que definen la presentación del código reside en otro archivo (en una hoja de estilo externa) o en otra parte de código en el documento HTML (usualmente en la sección <head>). Con CSS usted tiene flexibilidad y control sobre la apariencia exacta de su página, de la colocación exacta de la disposición a las fuentes específicas y a los estilos.

El CSS le deja controlar muchas propiedades que no se puedan controlar con el HTML solo. Por ejemplo, usted puede especificar diferentes tamaños de fuente y unidades (píxeles, puntos, y otros) para el texto seleccionado. Usando el CSS para ajustar tamaños de fuente en píxeles, usted puede también asegurar un tratamiento más constante de su disposición de página y aspecto en navegadores múltiples.

Una regla de formato CSS consiste en dos partes, el selector y la declaración. El selector es un termino (por ejemplo P, H1, una clase de nombre, o una id) que identifican el elemento a darle formato, y la declaración define que estilo de elemento es. En el siguiente ejemplo, H1 es el selector, y todo lo que este entre llaves ({ }) es la declaración:

H1 {font-size: 16 píxeles; Font-family: Helvética; Font-weight: bold;}

La declaración consiste en dos partes, la propiedad (por ejemplo font-family), y el valor (por

ejemplo Hevéltica). El ejemplo anterior crea un estilo para la etiqueta (tag) H1: el texto para todos las etiquetas H1 es de tamaño 16 n píxeles, y usa la fuente Hevéltica y negrita.

La conexión en cascada del término se refiere a su capacidad de aplicar estilos múltiples al mismo elemento o pagina Web. Por ejemplo, usted puede crear una regla de CSS para aplicar color y otra regla para aplicar márgenes, y los aplica ambos al mismo texto en una página. Los estilos definidos " cascada" se conectan a los elementos en su página Web, creando en última instancia el diseño que usted desea.

Una mayor ventaja de CSS es que puede actualizarlo fácilmente; cuando usted actualiza una regla CSS en un lugar, el formato de todo el documento que usa la definición de estilo se actualizara automáticamente al nuevo estilo.

Usted puede definir los siguientes tipos de reglas en Dreamweaver:

• Ajuste reglas CSS, también llamadas clase de estilos, aplique los atributos del estilo a cualquier rango o bloque del texto. Todos los estilos empiezan con un periodo (.). Por ejemplo, usted podría crear un estilo de la clase llamado red, ajustar el atributo color de la regla a rojo, y aplicar el estilo a una porción del texto del párrafo.

• Las reglas de la etiqueta del HTML redefinen el formato para una etiqueta particular, tal como p o h1. Cuando usted crea o cambia una regla del CSS para la etiqueta h1, todo el texto ajustado a formato con la etiqueta h1 es inmediatamente actualizado.



• El selector de reglas del CSS (estilos avanzados) redefinen el formato para una combinación particular de elementos, o para el otro selector forman según lo permitido por CSS (por ejemplo, el td h2 del selector se aplica siempre que una cabecera h2 aparezca dentro de una célula de la tabla.) Los estilos avanzados pueden también redefinir el formato para las etiquetas que contienen un atributo especifico id (por ejemplo, los estilos definidos por # myStyle se aplican a todas las etiquetas que contengan el id="myStyle del par atribuir-valor").

El panel de Hojas en Cascada permite probar las reglas y propiedades de las CSS en los

elementos seleccionados, o afectar las reglas y propiedades de un documento entero.

Puedes cambiar el tamaño de cualquier panel arrastrando los bordes entre las ventanas.

En todos los modos, el panel de Hojas en estilo de cascada despliega dos ventanas: una con todas las reglas y una con todas las propiedades. En la ventana de todas las reglas despliega en una lista de reglas definidas en el documento, o bien como todas las reglas definidas en la hoja de estilo del documento. En la ventana de propiedades puedes editar la CSS seleccionando cualquier regla de la ventana.

Los cambios que hagas en la ventana de propiedades son aplicados inmediatamente para la vista previa con la que estas trabajando.


Dreamweaver 8

Documents

Transcript of Dreamweaver 8