Dreamweaver

Prof. Leonel Del Carpio 1

DREAMWEAVEREdición visual de paginas web

Prof. Leonel Del Carpio


Dreamweaver

Editor visual de LENGUAJE HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web.

Para crear un documento nuevo:

1. Seleccione Archivo> Nuevo. Aparece el cd Nuevo documento.

2. En la lista Categoría, seleccione una: Página blanca, Plantilla en blanco, Página de plantilla, Pagina de muestra u otros.

Por ejemplo, seleccione Página básica para crear un documento HTML

3. Haga clic en el botón Crear. El documento nuevo se abrirá en la ventana del documento.


DW CS5


El panel Archivos

1. Conectar al servidor remoto

2. Actualizar

3. Obtener archivos

4. Colocar archivos

5. Proteger archivos

6. Desprotecer

7. Sincronizar

8. Expandir para mostrar sitios locales y remotos


El panel Estilos CSS


• El panel Estilos CSS permite supervisar reglas y propiedades CSS y HTML que afectan a un elemento seleccionado (modo Actual) o que afectan a un documento (modo Todo).

• Un botón situado en la parte superior del panel Estilos CSS le permite cambiar entre modos.

• El panel Estilos CSS también permite modificar propiedades CSS en ambos modos.


Modo actual

• Muestra tres secciones: • Un resumen del panel Selección que muestra las propiedades CSS de la selección actual,

• Un panel Reglas que muestra la ubicación de las propiedades seleccionadas (o una cascada de reglas para la etiqueta seleccionada) y

• Un panel Propiedades que permite editar las propiedades CSS al definir reglas para la selección.


Modo Todo

• El panel Todas las reglas muestra una lista de reglas definidas en el documento actual, y las reglas definidas en las CSS adjuntas al documento actual.

• El panel Propiedades permite editar propiedades CSS para cualquier regla seleccionada en el panel Todas las reglas.

• Todos los cambios en el panel Propiedades se aplican de inmediato; de este modo, puede pre-visualizar el trabajo.


Sitio web• Conjunto de archivos y carpetas, relacionados entre si, con un diseño similar o un objetivo común.

• Se recomienda diseñar y planificar el sitio, antes de crear los contenidos.

• El método para crear un sitio Web utilizando Dreamweaver consiste en crear y editar páginas en el disco local y, a continuación, cargar copias de esas páginas en un servidor Web remoto para que puedan ser vistas a través de la Web.


• En Dreamweaver, el término sitio se emplea para referirse tanto a un sitio Web (REMOTO)como a una ubicación de almacenamiento local de los documentos que pertenecen a un sitio Web.(LOCAL)

• Esto último es lo que tiene que establecer antes de comenzar a crear su sitio Web. Un sitio LOCAL de Dreamweaver organiza los documentos asociados a su sitio Web y permite controlar y mantener vínculos, administrar y compartir archivos, y transferir los archivos del sitio a un servidor Web.


• Defina una carpeta local de Dreamweaver para cada sitio Web nuevo que cree.

• La carpeta local es la carpeta utilizada para almacenar copias de trabajo de los archivos del sitio en el disco duro.

• Si no define una carpeta local, algunas funciones de Dreamweaver podrían no funcionar correctamente.


1. Seleccione Sitio > Administrar sitios. Aparece el cd Administrar sitios.

2. Haga clic en el botón Nuevo y seleccione Sitio.• Aparecerá el cd Definición del sitio.

3. haga clic en la ficha Avanzadas y seleccione Datos locales en la lista Categoría.

4. En el cuadro de texto Nombre del sitio, introduzca … como nombre del sitio.

5. En el cuadro texto Carpeta raíz local, especifique la carpeta ….

• Puede hacer clic en el icono de la carpeta para examinar y seleccionar la carpeta, o introducir una ruta en el cuadro de texto Carpeta raíz local.

6. En el cuadro de texto Carpeta predeterminada de imágenes, especifique la carpeta imáges ubicada en la carpeta raiz.


Trabajando con Marcos (crear galeria)


• Coloque el cursor sobre la linea que divide los marcos y arrastrela hacia arriba valor fila=100


• Shift+F2 abre el panel Marcos. • Tenemos dos marcos topFrame y mainFrame.• Cada marco se guarda como pagina html independiente: superior.html y contenido.html

• El conjunto de marcos guárdalo como index.html• En el marco topFrame, arrastrando desde el panel sitio ubique las tres miniaturas : Blade_IIpe.jpg, lara.jpg y wolverine-pe.jpg.• Recomendación: inserta una tabla de 3 columnas y 1 fila


• En la pagina contenido.html escribe el texto:

Aquí se mostraran las imágenes grandes• Crea una nueva pagina html, asígnale el mismo color de relleno de la pagina contenido.html y coloca en ella la imagen Blade_II.jpg, centra la imagen. Guarda la pagina como blade_red.html

• Vincula la miniatura Blade_IIpe.jpg con la pagina blade_red.html• Recomendación : Usa el panel propiedades


Tareas• Crea una galería de fotos usando marcos. Minimo 08

fotos. Al clicar sobre la miniatura, debe mostrarse la imagen grande. En tu trabajo crea una carpeta raiz, una carpeta para las fotos y define un sitio.• Presenta dos variantes: una con las miniaturas en la parte superior

y otra con las miniaturas en otro lugar (abajo, derecha o izquierda)

• Crea un sitio similar al modelo de la siguiente diapositiva, debe tener 04 secciones: música, poesía, deportes y una bienvenida. Cada pagina debe tener vinculos. Emplea 04 marcos: encabezado, menu, contenido y pie


Galería de imágenes con CSS

1. Preparamos las imágenes, fotos de dos tamaños diferentes unas pequeñas y otras grandes. En nuestro caso los tamaños de los dos grupos de imágenes son: miniaturas de 120x120px y las grandes de 480x480px.

• Los tamaños dependerán de las imágenes originales y del espacio disponible en la página Web.

• Las imágenes se guardan en la misma carpeta o en carpetas separadas.


2. Para hacer una galería con CSS podemos utilizar diferentes caminos pero en este ejemplo vamos a utilizar listas desordenadas.

3. Como utilizamos listas lo primero será crear (dentro del cuerpo del documento, por supuesto) la lista desordenada con los enlaces que en este caso serán enlaces a ninguna parte. El código será el siguiente:


El resultado será el siguiente:

• Foto 1• Foto 2• Foto 3• Foto 4

utilizo enlaces porque aplico las pseudo-clases y además de funcionar mejor, también es más fácil de entender.

http://www.grafikas.es/web_apuntes/galerias.htm#noir





• Es lo mismo que para crear un menú con listas. Ahora vamos a añadir la foto pequeña en lugar del texto y la foto grande.

• Lo hare sólo para el primer elemento de la lista.

TAREA:

• Añade las imágenes a todos los elementos de la lista.


• Con esto tenemos lo siguiente:

• Foto2• Foto3• Foto4





• Se ven las dos fotos, y aparece la viñeta de las listas. Así que voy a ocultar la foto grande y quitar la viñeta y la sangría izquierda de las listas.

• Para diferenciar la imagen pequeña de las grandes necesito utilizar clases (atributo class) o id's (atributo id). En este caso utilizo clases; la clase "min" para las fotos pequeñas y la clase "gran" para las grandes.


3. Ahora defino los estilos para eliminar viñetas y sangría de las listas y ocultar la foto grande.

4. Para ocultar uso visibility:hidden o display:none.

<style type="text/css">ul { list-style-type:none; /*Quitamos viñeta*/ margin:0px; /*Elimina sangría en IE6*/ padding:0px; /*Elimina sangría */ }img.gran { visibility:hidden; /*Ocultamos la foto*/} </style>




La imagen grande no se ve,por que estamos usando visibility:hidden;





• Como se observa la miniatura esta muy separada del párrafo anterior, eso se debe a que la foto grande, aunque no se ve, sigue estando ahí y ocupa un lugar.

• Si queremos que la miniatura quede más próxima al párrafo anterior tendremos que dar la posición de la foto grande mediante propiedades de posicionamiento, tal y como se muestra a continuación.


• <style type="text/css">ul { list-style-type:none; /*Quitamos viñeta*/ margin:0px; /*Elimina sangría en IE6*/ padding:0px; /*Elimina sangría */ }img.gran { visibility:hidden; /*Ocultamos la foto*/ position:absolute; top:0px; left:220px; /*Algo mayor que el acho de la foto pequeña*/ } </style>


La imagen grande no se ve,por que estamos usando visibility:hidden;







• Sólo falta que al hacer clic sobre la foto pequeña, se haga visible la de mayor tamaño.

• Para hacerlo uso pseudo-clases, la que se corresponde con hacer clic es :focus y para el IExplorer es :active, por lo cual tenemos que utilizar ambas. A continuación el código de los estilos CSS.

• Código a poner en la cabecera (head) del documento XHTML.


• Después de añadir el código anterior a nuestra página el resultado será (probar que se ve la foto al hacer clic sobre la miniatura:

Foto 2

Foto 3

Foto 4

La imagen grande se al hacer clic en la miniatura;


• Añade el código para insertar las demás imágenes en la lista.

<ul><li><a href="#" title="Ver foto 1"><img class="min" src="minis/minarbeyal.jpg" alt="Arbeyal"/><img class="gran" src="fotos/arbeyal.jpg" alt="Playa Arbeyal" /></a></li><li><a href="#" title="Ver foto 2"><img class="min" src="minis/minestano.jpg" alt="Estaño"/><img class="gran" src="fotos/estano.jpg" alt="Playa Estaño"/></a></li><li><a href="#" title="Ver Foto 3"><img class="min" src="minis/minprubia.jpg" alt="Rubia"/><img class="gran" src="fotos/prubia.jpg" alt="Playa Peña Rubia"/></a></li><li><a href="#" title="Ver Foto 4"><img class="min" src="minis/minponiente.jpg" alt="Poniente"/><img class="gran" src="fotos/poniente.jpg" alt="Playa Poniente"/></a></li></ul>


• El resultado de este añadido es el que se muestra:

Al hacer clic sobre cada miniatura se observa la imagen grande en este lugar


Ahora solo nos queda darle un aspecto más elegante, añadiendo colores de fondo, bordes u otros.

7. Añado que al situar el ratón sobre las miniaturas se vea la imagen grande.

8. Para Firefox e IExplorer 7 añado una línea a los estilos CSS, donde defino la propiedad visibility como visible para las imágenes de la clase gran dentro de la pseudo-clase a:hover.


9. Esto no es suficiente para IExplorer 6 y debo añadir a esta pseudo-clase la propiedad display:inline.

10.También es conveniente, poner la imagen grande encima de todas mediante la propiedad z-index con un valor mayor que el que tengan cuando están activas. Esto lo hago para que se vean todas las imágenes al pasar el ratón por encima (probar a no poner z-index y veras lo que pasa si

haces clic en la última imagen y luego te situas sobre cualquier otra). Si funcionará si lo hacemos sin utilizar listas es decir con enlaces solamente.


• dw galerias\galeria_texto1.htm


biblio

• http://www.sxc.hu• http://blog.tempwin.net/2006/08/31/galeria-de-imagenes-usando-css/

• http://www.flickr.com/

http://www.sxc.hu/

http://www.sxc.hu/

http://blog.tempwin.net/2006/08/31/galeria-de-imagenes-usando-css/



http://www.flickr.com/

http://www.flickr.com/

Dreamweaver

Documents

Transcript of Dreamweaver