DreamWeaver CS5

TEORIAS Y SISTEMAS TECNICOCIENTIFICOS

PERTENECE A: ___________________________________________________

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Configuracin Inicial
Primero Configuraremos un sitio para que de forma automtica todo se guarde y se extraiga de la carpeta seleccionada. El proceso es: Panel ArchivosAdministrar sitiosNuevoSitio

4 5

Configuramos el nombre del sitio(4), posteriormente seleccionamos la carpeta para el sitio web(5)

Tras guardar y pulsar Listo, observamos en el Panel Archivos el resultado (carpeta verde):

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Trabajando Con Diseo Bsico

Para comenzar a desarrollar las pginas en la ventana inicial escogemos Crear nuevoHTML

Listado de archivos ya diseados

Agregar Texto
El rea de trabajo tomar la siguiente apariencia, sus componentes son: Nombre de la pgina antes de guardar. Agregar titulo a la pgina Probar en Navegador web

Modos de trabajo

rea para disear y agregar contenido

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Cada elemento agregado en el rea de trabajo cuenta con caractersticas configurables en el Panel Propiedades, existen dos modos, el bsico de HTML y el avanzado CSS:

Propiedades especficas de la pgina Para realizar configuraciones generales en la pgina entramos dando clic al botn, el resultado es el siguiente:

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Agregar Imagen
Seleccionamos en el Panel Insertar Capa Comn Imagen (observar varias opciones)

Aparecer la ventana Examinar, seleccionar la ruta y el archivo que desea insertar en la pgina. Nota: primero deber guardar la pgina para no generar errores al momento de probar en el navegador. Tras cargar la imagen, en el Panel Propiedades se cargarn las caractersticas configurables de la misma.

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Trabajando Con Mapas de Zonas Interactivas

Los mapas de zonas permiten crear reas como enlaces, se configuran en Ficha ComnDibujar zonas y seleccionar el tipo de zona a utilizar.

1. En la imagen a convertir en Mapa dibujar el tipo de zona interactiva a utilizar 2. Despus seleccionar la opcin Vnculo en el Panel de Propiedades 3. Finalmente probar en el Navegador Web

Ejercicio: En una imagen disee unas zonas interactivas poligonales y enlace a pginas Web.

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Agregar Enlaces
Seleccionar el texto o imagen a convertir en el hipervnculo Vnculo en la ventana propiedades En la ventana Examinar seleccionar la pgina a donde se conectar el enlace Comprobar observando que la el texto aparece ahora en azul marino Probar en el Navegador Web moviendo el Mouse sobre el texto o imagen el cursor cambiar de icono.

Una vez aplicado el procedimiento aparecer el hombre de la pgina a donde se conectar la pgina. Los vnculos no se limitan a enlazar pginas sino tambin otros elementos como:

Pginas, imgenes, multimedia, otros Correo electrnico Seccin dentro de un mismo documento

Practica

Nombre: practica_1.html Titulo: Mi primer Prctica Fondo: Imagen Contenido: 2 imgenes y texto (un pensamiento) Enlaces: A la siguiente con texto e imagen A correo electrnico

Nombre: practica_2..html Titulo: Sigo aprendiendo Fondo: Color Texto: Azul y una imagen pequea Contenido: imagen Enlaces: A la anterior y siguiente con texto Video e imagen

Nombre: practica_3..html Titulo: Ahora tengo mas experiencia Fondo: Imagen Texto: Rojo Contenido: Sus datos personales Enlaces: Anterior, siguiente e inicio con botones Archivo pdf y sonido

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Trabajando Con Imgenes de Sustitucin:

Permiten un intercambio de imgenes al visualizar la pgina en el navegador. Ficha ComnImagen Imagen de sustitucin.

1) 2) 3) 4)

Seleccionamos Seleccionamos Seleccionamos Podemos crear

el nombre para el objeto de sustitucin. una primera imagen la cual determinar el tamao de la segunda. la segunda imagen que se aparecer tras mover el mouse sobre el objeto. un enlace a algn objeto por medio del objeto. Finalmente Aceptamos.

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Trabajando con Tablas

Al igual que en Word, en Dreamweaver podemos insertar tablas para organizar la informacin o contenido de nuestros sitios Web, de esta manera podemos mostrar en el navegador una apariencia ms organizada de componentes que requieren agrupacin de este tipo.

Agregar Tabla
Capa InsertarFicha ComnBotn Tabla

Seleccionar

Ventana de configuracin de la tabla Apariencia de la tabla en el navegador una vez insertada:

Caractersticas en el panel Propiedades

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Practica
Disee ambos ejercicios de tablas con las especificaciones visuales de cada una.

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Trabajando con Multimedia

La multimedia consiste en agregar animacin, sonido, efecto, videos o dinamismo a nuestro sitio web, en esta leccin aprender a escribir el cdigo HTML para agregar sonido a sus pginas. Al igual que en otros ejemplos primero debe guardar el documento para que el componente imagen, video, audio- se carguen correctamente.

Agregar un Sonido
Barra DocumentoDividirClic despus de la etiqueta <body> Escriba la etiqueta <bgsound>, de espacio y automticamente aparecern las diferentes opciones y configuraciones, seleccione src, luego haga clic en Examinar para cargar el sonido a reproducir en la Web.

En el documento Web no aparecer nada, el sonido se reproduce solo en el navegador web.

Agregar un Video
Puede ser en formato avi, mgp o de youtube. Seleccionamos la Cinta ComnMediaPlugg -in

Ajustar al tamao del video

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

10

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Trabajando con Animacin

Para agregar efectos de animacin al interactuar en una pgina Web se pueden agregar elementos Flash como texto, botones o pelculas animadas, mens interactivos, entre otros.

Elementos Flash: Pelculas / Mens / Botones

ComnMediaSWF

Animacin BsicaAjustar Video de Flash

Java Script
JavaScript es un lenguaje de programacin que se utiliza principalmente para crear pginas web Animadas, Tcnicamente, JavaScript es un lenguaje de programacin interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios. Pasos para su utilizacin: 1. Seleccionar el cdigo JavaScript a utilizar. 2. Insertarlo en el rea adecuada (Head-Body). 3. Observar los resultados en el navegador. En algunos casos se requiere descargar un archivo y ser modificado desde el editor de Dreamweaver CS 5.

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

11

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Trabajando con Anclajes

Son enlaces dentro de las mismas pginas de modo que permiten ir directamente a una area dentro de la misma pgina.

Creacin de un anclaje con nombre

En la vista Diseo de la ventana de documento, coloque el anclaje en el lugar donde desea insertar el anclaje con nombre. Panel InsertarComnAnclaje con nombre

Le daremos un nombre para reconocer el anclaje, el resultado ser algo como esto: y en cdigo <p>soraya web<a name="arriba" id="arriba"></a></p> Ahora estableceremos el enlace hacia el anclaje desde cualquier otro punto de la pgina.

Seleccionamos el texto/imagen que ser el enlace al anclaje

Panel Propiedades En cdigo se genera lo siguiente: <p><a href="#arriba">arriBa <!--para ir arriba -->

</a>

Para establecer un vnculo con un anclaje denominado arriba en un documento distinto de la misma carpeta, escriba nombrearchivo.html#archivo. Nota: Los nombres de anclaje distinguen entre maysculas y minsculas.

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

12

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Trabajando con Etiquetas y Capas Etiqueta Div

Las etiquetas div que tienen una posicin absoluta son capas de Dreamweaver, tienen bordes visibles cuando se les asigna un borde o cuando se selecciona Contornos de diseo CSS. Cuando el puntero se pasa por encima de una etiqueta div, Dreamweaver la resalta.

Cdigo:
<div> <p>Etiqueta de divisin</p> <p><img src="file:///C|/Users/ozKHar/Documents/Practicas/SitioCSS/patycabrera.jpg" width="105" height="82" /> </p> </div>

Capas
Una capa es un elemento de pgina (en concreto, una etiqueta div) que no tiene una posicin absoluta asignada. Son un contenedor mvil de texto, imgenes u otros componentes que se pueden situar en el cuerpo de un documento HTML.

Cdigo:
<div id="apDiv1"> <p>TEXTOY CONTENIDO<img src="file:///C|/Users/ozKHar/Documents/Practicas/SitioCSS/Thalia Mundo_De_Cristal.jpg" width="160" height="141" /></p> </div>

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

13

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Trabajando Con Spry

Un widget de Spry es un elemento de pgina que permite la interaccin del usuario y, por tanto, ofrece una experiencia ms completa. Un widget de Spry consta de las siguientes partes: Estructura de widget: Bloque de cdigo HTML que define la composicin estructural del widget. Comportamiento del widget: JavaScript que controla la respuesta del widget a los eventos iniciados por el usuario. Estilo del widget: CSS que especifica el aspecto del widget. Panel InsertarSprySeleccin del widget deseado

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

14

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Trabajando Con Frames

Ventana Inicial MasPginas de muestra: Seleccin del estilo deseado Crear

Marco de Encabezado Superior Marco Izquierdo

Marco Central

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

15

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Para utilizarles, dar clic sobre cada rea para visualizar en la ficha Nombre el propuesto para el marco, esto facilitar reconocer los archivos al momento de guardar. Para Guardar dar clic en las divisiones de los frames y visualizar el nombre puesto para el archivo que administrar los 3 o mas frames, cambiarlo a index en caso de que sea el principal. Para crear los enlaces tomar en cuenta la seccin donde se descargar la pagina del vnculo.

En una pgina nueva En la misma pgina pero completa Dentro del mismo En la parte superior Marco principal Marco Superior Mismo marco

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

16

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Hojas de Estilo en Cascada (CSS)

La filosofa de las CSS responde a la idea de separar al mximo forma y fondo. Una hoja de estilo en cascada es una plantilla o gua, un conjunto de instrucciones que dicta el navegador cmo debe mostrar el contenido de una o varis pginas Web. Cualquier cambio en la plantilla de estilo se refleja en un cambio inmediato en la apariencia de las pginas relacionadas, sin necesidad de modificar fsicamente stas.

CSS Prediseados
ArchivoNuevoPgina de muestraHoja de estilos CSSSeleccionar deseadoCrear Tras aparecer en pantalla la configuracin lo guardamos y observamos en el panel archivo el aspecto del documento creado con extensin CSS. El siguiente paso es vincularlo a un documento HTML.

Observe los resultados en pantalla

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

17

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Escribiendo CSS
Ejemplo de un CSS en lneas diferentes: ArchivoNuevoPgina en blanco CSSEscribir el cdigo

/* CSS Document */ .miestilo{ font-family:tahoma; font-size:12px;; font-style:normal; color:#FFFFFF; background-color:#000033; list-style-type:disc } .miestilo2{ font-family:ARIAL; font-size:14px;; font-style:normal; color:RED; background-color:GREEN; list-style-type:disc } Lo guardaremos como uno.css y crearemos un archivo html donde cargaremos el CSS.

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

18

LI & MSC OSCAR RAMIREZ CORTS / Diseo Web en Adobe Dreamweaver CS5

Ejemplo de un CSS para todo un documento. Primero diseamos el estilo y lo guardaremos como dos.css , crearemos un archivo html donde cargaremos el CSS.
body { background-color: #DEDECA; } body, td, th { color: #666633; } h1, h2 { color: #663300; } h3, h4, h5, h6 { color: #996633; } a{ color: #336600; }

Despues: ArchivoNuevoPgina en blanco Escribir el cdigo en el Head: <link href="css1.css" rel="stylesheet" type="text/css" /> Observe que el CSS afecta todo el archive. Tambin podemos definir Estilos desde el panel Estilos CSS:

UNIVERSIDAD DE LA HUSTECA VERACRUZANA /

19