Download DREAM-Completo - universitariouhv

DreamWeaver
CS5
PERTENECE A: ___________________________________________________
TEORIAS Y
SISTEMAS
TECNICOCIENTIFICOS
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Configuración Inicial
Primero Configuraremos un sitio para que de forma automática todo se guarde y se extraiga de la
carpeta seleccionada. El proceso es: Panel ArchivosAdministrar sitiosNuevoSitio
1
3
2

Configuramos el nombre del sitio(4), posteriormente seleccionamos la carpeta para el sitio web(5)
4
5
6
Tras guardar y pulsar “Listo”, observamos en el Panel Archivos el resultado (carpeta verde):
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
1
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Trabajando Con Diseño Básico
Para comenzar a desarrollar las páginas en la ventana inicial escogemos Crear nuevoHTML
Listado de
archivos ya
diseñados
Agregar Texto
El área de trabajo tomará la siguiente apariencia, sus componentes son:
Nombre de la página antes de guardar.
Agregar titulo a la página
Probar en Navegador web
Modos de trabajo
Área para diseñar y agregar contenido
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
2
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Cada elemento agregado en el Área de trabajo cuenta con características configurables en el Panel
Propiedades, existen dos modos, el básico de HTML y el avanzado CSS:
Propiedades específicas de la página
Para realizar configuraciones generales en la página entramos dando clic al botón, el resultado es
el siguiente:
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
3
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Agregar Imagen
Seleccionamos en el Panel Insertar Capa Común Imagen (observará varias opciones)
Aparecerá la ventana Examinar, seleccionar la ruta y el archivo que desea insertar en la página.
Nota: primero deberá guardar la página para no generar errores al momento de probar en el
navegador. Tras cargar la imagen, en el Panel Propiedades se cargarán las características
configurables de la misma.
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
4
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Trabajando Con Mapas de Zonas Interactivas
Los mapas de zonas permiten crear áreas como enlaces, se configuran en Ficha ComúnDibujar
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. Después seleccionar la
opción Vínculo en el Panel
de Propiedades
3. Finalmente probar en el
Navegador Web
Ejercicio: En una imagen diseñe unas zonas interactivas poligonales y enlace a páginas Web.
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
5
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Agregar Enlaces
Seleccionar el texto o imagen a convertir en el hipervínculo Vínculo en la ventana propiedades
En la ventana Examinar seleccionar la página 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 página a donde se conectará la
página.
Los vínculos no se limitan a enlazar páginas sino también otros elementos como:
Páginas, imágenes, multimedia, otros
Correo electrónico
Sección dentro de un mismo documento
Practica
Nombre: practica_1.html
Titulo: Mi primer Práctica
Fondo: Imagen
Contenido: 2 imágenes y texto (un pensamiento)
Enlaces: A la siguiente con texto e imagen
A correo electrónico
Nombre: practica_2..html
Titulo: Sigo aprendiendo
Fondo: Color
Texto: Azul y una imagen pequeña
Contenido: imagen
Enlaces: A la anterior y siguiente con texto
Video e imagen
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
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
6
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Trabajando Con Imágenes de Sustitución:
Permiten un intercambio de imágenes al visualizar la página en el navegador. Ficha
ComúnImagen  Imagen de sustitución.
1
2
3
4
1)
2)
3)
4)
Seleccionamos
Seleccionamos
Seleccionamos
Podemos crear
el nombre para el objeto de sustitución.
una primera imagen la cual determinará el tamaño de la segunda.
la segunda imagen que se aparecerá tras mover el mouse sobre el objeto.
un enlace a algún objeto por medio del objeto. Finalmente Aceptamos.
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
7
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Trabajando con Tablas
Al igual que en Word, en Dreamweaver podemos insertar tablas para organizar la información o
contenido de nuestros sitios Web, de esta manera podemos mostrar en el navegador una
apariencia más organizada de componentes que requieren agrupación de este tipo.
Agregar Tabla
Capa InsertarFicha ComúnBotón Tabla
Seleccionar

Ventana de configuración de la tabla
Apariencia de la tabla en el navegador
una vez insertada:
Características en el panel Propiedades
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
8
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Practica
Diseñe ambos ejercicios de tablas con las especificaciones visuales de cada una.
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
9
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Trabajando con Multimedia
La multimedia consiste en agregar animación, sonido, efecto, videos o dinamismo a nuestro sitio
web, en esta lección aprenderá a escribir el código HTML para agregar sonido a sus páginas. 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 DocumentoDividirClic después de la etiqueta <body>
Escriba la etiqueta <bgsound>, de espacio y automáticamente aparecerán 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 ComúnMediaPlugg -in

Ajustar al tamaño del video
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
10
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Trabajando con Animación
Para agregar efectos de animación al interactuar en una página Web se pueden agregar
elementos Flash como texto, botones o películas animadas, menús interactivos, entre otros.
Elementos Flash: Películas / Menús / Botones
ComúnMediaSWF
 Animación BásicaAjustar
Video de Flash
Java Script
JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web
Animadas, Técnicamente, JavaScript es un lenguaje de programación 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 utilización:
1. Seleccionar el código 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 CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Trabajando con Anclajes
Son enlaces dentro de las mismas páginas de modo que permiten ir directamente a una area
dentro de la misma página.
Creación de un anclaje con nombre
En la vista Diseño de la ventana de documento, coloque el anclaje en el lugar donde desea
insertar el anclaje con nombre.
Panel InsertarComúnAnclaje con nombre
Le daremos un nombre para reconocer el anclaje, el resultado será algo como esto:
y en código <p>soraya web<a name="arriba" id="arriba"></a></p>
Ahora estableceremos el enlace hacia el anclaje desde cualquier otro punto de la página.
Seleccionamos el texto/imagen que será el enlace al
anclaje
Panel Propiedades
En código se genera lo siguiente: <p><a href="#arriba">arriBa
<!--para ir arriba -->
</a>
Para establecer un vínculo con un anclaje denominado “arriba” en un documento distinto de la
misma carpeta, escriba nombrearchivo.html#archivo. Nota: Los nombres de anclaje distinguen
entre mayúsculas y minúsculas.
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
12
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Trabajando con Etiquetas y Capas
Etiqueta Div
Las etiquetas div que tienen una posición absoluta son capas de Dreamweaver, tienen bordes
visibles cuando se les asigna un borde o cuando se selecciona Contornos de diseño CSS. Cuando
el puntero se pasa por encima de una etiqueta div, Dreamweaver la resalta.
Código:
<div>
<p>Etiqueta de división</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 página (en concreto, una etiqueta div) que no tiene una posición
absoluta asignada. Son un contenedor móvil de texto, imágenes u otros componentes que se
pueden situar en el cuerpo de un documento HTML.
Código:
<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 CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Trabajando Con Spry
Un widget de Spry es un elemento de página que permite la interacción del usuario y, por tanto,
ofrece una experiencia más completa. Un widget de Spry consta de las siguientes partes:
 Estructura de widget: Bloque de código HTML que define la composición 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 InsertarSprySelección del widget deseado
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
14
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Trabajando Con Frames
Ventana Inicial MasPáginas de muestra: Selección del estilo deseado Crear
Marco de
Encabezado
Superior
Marco
Izquierdo
Marco Central
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
15
LI & MSC OSCAR RAMIREZ CORTÉS / Diseño 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 sección donde se descargará la pagina del vínculo.
En una página nueva
En la misma página 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 CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Hojas de Estilo en Cascada (CSS)
La filosofía de las CSS responde a la idea de separar al máximo forma y fondo. Una hoja de estilo
en cascada es una plantilla o guía, un conjunto de instrucciones que dicta el navegador cómo debe
mostrar el contenido de una o varis páginas Web. Cualquier cambio en la plantilla de estilo se
refleja en un cambio inmediato en la apariencia de las páginas relacionadas, sin necesidad de
modificar físicamente éstas.
CSS Prediseñados
ArchivoNuevoPágina de muestraHoja de estilos CSSSeleccionar deseadoCrear
Tras aparecer en pantalla la configuración lo guardamos y observamos en el panel archivo el
aspecto del documento creado con extensión 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 CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Escribiendo CSS
Ejemplo de un CSS en líneas diferentes:
ArchivoNuevoPágina en blanco CSSEscribir el código
/* 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 CORTÉS / Diseño Web en Adobe Dreamweaver CS5
Ejemplo de un CSS para todo un documento. Primero diseñamos 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: ArchivoNuevoPágina en blanco Escribir el código en el Head:
<link href="css1.css" rel="stylesheet" type="text/css" />
Observe que el CSS afecta todo el archive.
También podemos definir Estilos desde el panel Estilos CSS:
UNIVERSIDAD DE LA HUSTECA VERACRUZANA /
19