Dreamweaver

1. Prof. Leonel Del Carpio Dreamweaver Edición visual de paginas web Prof. Leonel Del Carpio

2. 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: • Seleccione Archivo> Nuevo. • Aparece el cd Nuevo documento. • 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 • Haga clic en el botón Crear. • El documento nuevo se abrirá en la ventana del documento.

3. Prof. Leonel Del Carpio

4. Prof. Leonel Del Carpio

5. Prof. Leonel Del Carpio

6. Prof. Leonel Del Carpio DW CS5

7. Prof. Leonel Del Carpio El panel Archivos • Conectar al servidor remoto • Actualizar • Obtener archivos • Colocar archivos • Proteger archivos • Desprotecer • Sincronizar • Expandir para mostrar sitios locales y remotos

8. Prof. Leonel Del Carpio El panel Estilos CSS

9. Prof. Leonel Del Carpio • 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.

10. Prof. Leonel Del Carpio 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.

11. Prof. Leonel Del Carpio 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.

12. Prof. Leonel Del Carpio

13. Prof. Leonel Del Carpio 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 Dreamweaverconsiste 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.

14. Prof. Leonel Del Carpio • 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 Dreamweaverorganiza 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.

15. Prof. Leonel Del Carpio • 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.

16. Prof. Leonel Del Carpio • Seleccione Sitio > Administrar sitios. • Aparece el cd Administrar sitios. • Haga clic en el botón Nuevo y seleccione Sitio. • Aparecerá el cd Definición del sitio. • haga clic en la ficha Avanzadas y seleccione Datos locales en la lista Categoría. • En el cuadro de texto Nombre del sitio, introduzca … como nombre del sitio. • 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. • En el cuadro de texto Carpeta predeterminada de imágenes, especifique la carpeta imáges ubicada en la carpeta raiz.

17. Prof. Leonel Del Carpio Trabajando con Marcos (crear galeria)

18. Prof. Leonel Del Carpio

19. Prof. Leonel Del Carpio • Coloque el cursor sobre la linea que divide los marcos y arrastrela hacia arriba valor fila=100

20. Prof. Leonel Del Carpio

21. Prof. Leonel Del Carpio

22. Prof. Leonel Del Carpio

23. Prof. Leonel Del Carpio • Shift+F2 abre el panel Marcos. • Tenemos dos marcos topFrame y mainFrame. • Cada marco se guarda como pagina htmlindependiente: 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

24. Prof. Leonel Del Carpio • 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

25. Prof. Leonel Del Carpio 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

26. Prof. Leonel Del Carpio

27. Prof. Leonel Del Carpio Galería de imágenes con CSS • 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.

28. Prof. Leonel Del Carpio • Para hacer una galería con CSS podemos utilizar diferentes caminos pero en este ejemplo vamos a utilizar listas desordenadas. • 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:

29. Prof. Leonel Del Carpio <ul>  <li><a href="#" title="Ver foto1">Foto1</a></li>  <li><a href="#" title="Ver foto2">Foto2</a></li>  <li><a href="#" title="Ver Foto3">Foto3</a></li>  <li><a href="#" title="Ver Foto4">Foto4</a></li></ul>

30. Prof. Leonel Del Carpio 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.

31. Prof. Leonel Del Carpio • 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.

32. Prof. Leonel Del Carpio <ul><li><a href="#" title="Ver foto1 "><imgsrc="minis/minarbeyal.jpg" alt="Arbeyal"/><imgsrc="fotos/arbeyal.jpg" alt="Playa Arbeyal"/></a></li><li><a href="#" title="Ver foto2">Foto2</a></li><li><a href="#" title="Ver Foto3">Foto3</a></li><li><a href="#" title="Ver Foto4 ">Foto4</a></li></ul>

33. Prof. Leonel Del Carpio • Con esto tenemos lo siguiente: • Foto2 • Foto3 • Foto4

34. Prof. Leonel Del Carpio • 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.

35. Prof. Leonel Del Carpio <ul>  <li>  <a href="#" title="Ver foto1 ">    <imgclass="min"src="minis/minarbeyal.jpg" alt="Arbeyal"/>    <imgclass="gran"src="fotos/arbeyal.jpg" alt="Playa Arbeyal"/>  </a>  </li>  <li><a href="#" title="Ver foto2">Foto2</a></li>  <li><a href="#" title="Ver Foto3">Foto3</a></li>  <li><a href="#" title="Ver Foto4">Foto4</a></li></ul>

36. Prof. Leonel Del Carpio • Ahora defino los estilos para eliminar viñetas y sangría de las listas y ocultar la foto grande. • Para ocultar uso visibility:hidden o display:none. <styletype="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>

37. Prof. Leonel Del Carpio • Con esto tenemos lo siguiente: • Foto2 • Foto3 • Foto4 La imagen grande no se ve,por que estamos usando visibility:hidden;

38. Prof. Leonel Del Carpio • 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.

39. Prof. Leonel Del Carpio • <styletype="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>

40. Prof. Leonel Del Carpio • Con esto tenemos lo siguiente: • Foto2 • Foto3 • Foto4 La imagen grande no se ve,por que estamos usando visibility:hidden;

41. Prof. Leonel Del Carpio • 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 IExploreres :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.

42. Prof. Leonel Del Carpio <styletype="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 ancho de la foto pequeña*/ }a:focus img.gran, a:active img.gran { visibility:visible; } </style>

43. Prof. Leonel Del Carpio • 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;

44. Prof. Leonel Del Carpio • Añade el código para insertar las demás imágenes en la lista. <ul><li><a href="#" title="Ver foto 1"><imgclass="min"src="minis/minarbeyal.jpg" alt="Arbeyal"/><imgclass="gran"src="fotos/arbeyal.jpg" alt="Playa Arbeyal" /></a></li><li><a href="#" title="Ver foto 2"><imgclass="min"src="minis/minestano.jpg" alt="Estaño"/><imgclass="gran"src="fotos/estano.jpg" alt="Playa Estaño"/></a></li><li><a href="#" title="Ver Foto 3"><imgclass="min"src="minis/minprubia.jpg" alt="Rubia"/><imgclass="gran"src="fotos/prubia.jpg" alt="Playa Peña Rubia"/></a></li><li><a href="#" title="Ver Foto 4"><imgclass="min"src="minis/minponiente.jpg" alt="Poniente"/><imgclass="gran"src="fotos/poniente.jpg" alt="Playa Poniente"/></a></li></ul>

45. Prof. Leonel Del Carpio • 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

46. Prof. Leonel Del Carpio Ahora solo nos queda darle un aspecto más elegante, añadiendo colores de fondo, bordes u otros. • Añado que al situar el ratón sobre las miniaturas se vea la imagen grande. • Para Firefox e IExplorer7 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.

47. Prof. Leonel Del Carpio • Esto no es suficiente para IExplorer6 y debo añadir a esta pseudo-clase la propiedad display:inline. • 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 situassobre cualquier otra). Si funcionará si lo hacemos sin utilizar listas es decir con enlaces solamente.

48. Prof. Leonel Del Carpio • dwgalerias\galeria_texto1.htm

49. Prof. Leonel Del Carpio biblio • http://www.sxc.hu • http://blog.tempwin.net/2006/08/31/galeria-de-imagenes-usando-css/ • http://www.flickr.com/