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

Presentación del tema: "DREAMWEAVER Edición visual de paginas web Prof. Leonel Del Carpio 1."— Transcripción de la presentación:

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

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

3 3

4 4

5 5

6 6 DW CS5

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

8 El panel Estilos CSS Prof. Leonel Del Carpio 8

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

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

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

12 Prof. Leonel Del Carpio 12

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

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

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

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

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

18 Prof. Leonel Del Carpio 18

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

20 Prof. Leonel Del Carpio 20

21 Prof. Leonel Del Carpio 21

22 Prof. Leonel Del Carpio 22

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

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

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

26 Prof. Leonel Del Carpio 26

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

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

29 Foto1 Foto2 Foto3 Foto4 Prof. Leonel Del Carpio 29

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

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

32 Foto2 Foto3 Foto4 Prof. Leonel Del Carpio 32

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

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

35 Foto2 Foto3 Foto4 Prof. Leonel Del Carpio 35

36 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. 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*/ } Prof. Leonel Del Carpio 36

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

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

39 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*/ } Prof. Leonel Del Carpio 39

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

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

42 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; } Prof. Leonel Del Carpio 42

43 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 Prof. Leonel Del Carpio 43 La imagen grande se al hacer clic en la miniatura;

44 Añade el código para insertar las demás imágenes en la lista. Prof. Leonel Del Carpio 44

45 El resultado de este añadido es el que se muestra: Prof. Leonel Del Carpio 45 Al hacer clic sobre cada miniatura se observa la imagen grande en este lugar

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

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

48 dw galerias\galeria_texto1.htm Prof. Leonel Del Carpio 48

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