MANUAL DREAMWEAVER CS5 - v.2012

ndice
Presentacin . 3 Contenido.
Captulo 1 .. 4
Novedades de la Versin CS5. Entorno de Trabajo.
Configuracin de un Sitio Local. Creacin de Documentos HTML. Establecer navegador predeterminado. Formatear el diseo de las paginas. Formatear textos en el documento. Uso de Listas. Estilos CSS. Hojas de Estilo.
Captulo 2 .. 29
Hipervnculos. Tipos. Insercin de Imgenes. Mapas de imgenes. Imgenes de Sustitucin. Objetos inteligentes. Tablas.
Captulo 3 .. 47
Maquetacin Web usando divisiones. Divisiones flotantes. Uso de Clear. Otros elementos.
Captulo 4 .. 69
Comportamientos Simples y Avanzados. Publicacin de un Sitio Web.
Captulo 5 .. 88
Instalacin de un Servidor Web Local Apache. Formularios.
Captulo 6 .. 99
Mantenimiento de Bases de Datos Listados simples y complejos usando Juegos de Registros. Repetir regin.
Captulo 7 .. 111
Filtrado avanzado de datos. Imgenes dinmicas. Listas vinculadas a datos. Paginacin de registros. Asistentes para insercin, edicin y borrado de registros.
Captulo 8 .. 124
Creacin de Formularios de Acceso. Restriccin de Pginas. Desconectando la sesin de usuarios.
ADOBE DREAMWEAVER CS 5.5
PRESENTACION
Esta gua didctica es un material de ayuda institucional, perteneciente al rea Tcnica de Computacin, y que tiene por finalidad proporcionar los conocimientos de diseo web usando Adobe Dreamweaver CS5. Adobe Dreamweaver es una aplicacin en forma de estudio (basada en la forma de estudio de Adobe Flash) enfocada a la construccin y edicin de sitios y aplicaciones Web basados en estndares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el programa de este tipo ms utilizado en el sector del diseo y la programacin web, por sus funcionalidades, su integracin con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estndares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edicin de imgenes como para animacin a travs de su integracin con otras. Hasta la versin MX, fue duramente criticado por su escaso soporte de los estndares de la web, ya que el cdigo que generaba era con frecuencia slo vlido para Internet Explorer, y no validaba como HTML estndar. La Organizacin SISE, lder en la enseanza tecnolgica a nivel superior, promueve la elaboracin de estos materiales de aprendizaje, en concordancia a las actuales exigencias tecnolgicas de nuestros tiempos, esperando que sirvan de ayuda para facilitar el proceso de aprendizaje de los estudiantes.
Objetivos
Novedades. Iniciando el Programa. Entorno de Trabajo. Configuracin de un Sitio Local. Creacin de Documentos HTML. Establecer el Navegador predeterminado. Formateando el diseo de las pginas. Formateando el texto del documento. Uso de Listas. Hojas de Estilo.
Qu es Adobe Dreamweaver CS5.5 ?

Adobe Dreamweaver CS5.5 es la aplicacin que lidera el sector de la edicin y creacin de contenidos web. Proporciona funciones visuales y de nivel de cdigo para crear diseos y sitios web basados en estndares para equipos de sobremesa, telfonos inteligentes, tabletas y otros dispositivos.
Novedades
En esta nueva versin Dreamweaver incorpora las siguientes novedades:
HTML5 y CSS3
Permite poder aplicar estilos con el panel CSS, actualizado para cumplir las nuevas normas CSS3. Desde las vistas mltiples se pueden aplicar elementos de css media query, que permite poder crear estilos de CSS segn dimensiones de pantallas y de esa forma poder adaptar un solo diseo a mltiples dispositivos, tales como tlefonos mviles, tablets o computadores de escritorio. Tambin se puede incluir cdigo HTML5, ya que Dreamweaver viene preparado con sugerencias de cdigo y compatibilidad con la representacin de la vista de diseo. Ahora, LiveView (vista de prueba en Dreamweaver) es compatible con (QuickTime) y con etiquetas.
Integracin de jQuery
Dreamweaver permite poder aadir interactividad avanzada con las sugerencias de cdigo de jQuery y JQuery Mobile. jQuery es una biblioteca de JavaScript estndar, que simplifica la adicin de una amplia variedad de interactividades a las pginas web sin la necesidad de utilizar Adobe Flash.
Aplicaciones nativas Android e iOS con PhoneGap
Dreamweaver es capaz de crear aplicaciones nativas para Android e iOS gracias a la nueva funcin PhoneGap. Esta, convierte el cdigo HTML actual en una aplicacin para telfonos mviles, mediante un framework (marco de trabajo) opensource PhoneGap.
Integracin con BrowserLab
BrowserLab, es un servicio de Adobe que permite poder previsualizar pginas web dinmicas y contenido local a travs de distinto navegadores web (browsers), teniendo as una herramienta de diagnstico y comparacin entre ellos. Dreamweaver est integrado en Adobe BrowserLab, servicio en lnea de CS Live que prueba de forma rpida y precisa el contenido web en diferentes exploradores web y sistemas operativos.
Iniciando el programa
Para iniciar el trabajo con el programa de Adobe Dreamweaver CS 5.5, podemos usar cualquiera de las siguientes formas: 1era Forma A travs del Men Inicio.
2da Forma Desde el Men de Inicio > Todos los Programas > Adobe Master Collection CS5.5.
Entorno de Trabajo
La ventana inicial de trabajo, no ha cambiado en nada, presentando las mismas secciones que las versiones anteriores. O sea, Abrir un elemento reciente, Crear nuevo, Elementos destacados y Recursos.
La variacin del aspecto de la mesa de trabajo, ha cambiado ligeramente, pero an se cuenta con las opciones que permiten modificarlo como una versin anterior.
1 2
1. 2. 3. 4. 5.
Barra de Men. Barra Documento Men de Paneles Documento Panel de Propiedades
Aunque esta vista no es definitivo, ya que se puede elegir el rea de trabajo segn sea requerido.
Configuracin de un Sitio Local

Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas que va a contener. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imgenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. Despus se podrn copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podr verlo en Internet. La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc. Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una pgina con ese nombre cuando se intenta acceder a una URL genrica. Por ejemplo, si escribiramos la direccin genrica http://www.peru.com en el navegador, ste intentara cargar la pgina http://www.peru.com/index.htm, por lo que se producira un error en el caso de que no existiera ninguna pgina con el nombre index.htm.
Ejercicio 1: Creando el Sitio Web Instituto.

Ir al Men Sitio > Administrar Sitios. En esta ventana podr eliminar o conservar aquellos Sitios que Ud. desee.
De clic a Nuevo > Sitio. Escriba el nombre del sitio y elija la ubicacin en donde guardar los archivos.
Luego, pasaremos a configurar lo servidores de prueba, por lo pronto, gradamos los cambios.
10
Si se muestra la ventana de Administracin, de clic a Listo.
Observe la Ventana Archivos (si esta oculta pulse F8).
Nombre del Sitio
Tipo de Vista (Local o Remota)
Ubicacin
Desde esta ventana, puede realizar las mismas operaciones que podra hacerlas desde Windows, obviamente con los archivos del sitio (copiar, pegar, eliminar, renombrar, mover, crear carpetas, etc.). La estructura del sitio, ubicacin y contenido, pueden transportarse fcilmente a travs de un archivo que puede ser exportado e importado, para continuar un trabajo desde otro equipo.
11
Creacin de Documentos HTML.

Las pginas que vemos en Internet estn escritas utilizando el lenguaje HTML (Hyper Text Markup Language). Este lenguaje est basado en etiquetas que marcan el inicio y fin de cada elemento de la pgina Web. Por ejemplo, el ttulo de la pgina Web se escribe entre las etiquetas <title> y </title>. Como ves, ambas etiquetas consisten en poner un mismo comando entre los smbolos "<" y ">". La primera etiqueta indica inicio, y la segunda, que incluye el smbolo "/", indica final. Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan. Por ejemplo, <table border="1"> indica que la que se trata de una tabla, y que tendr un borde de grosor 1. Una pgina HTML bsica tendra el siguiente aspecto: <html> <head> <title> Mi primera pgina web </title> </head> <body> <p><a href="http://www.sise.edu.pe/"> Haz clic aqu para ir a la Web del Instituto SISE</a> y conocer acerca de los cursos.</p> </body> </html>
El ejemplo anterior mostrara una pgina con un slo prrafo en el que parte del texto enlaza con la web del Instituto SISE. Puedes probarlo copiando el cdigo y pegndolo en un archivo de texto, que debes guardar con la extensin .htm. Observa que cada etiqueta tiene una apertura y un cierre, y que estn anidadas unas dentro de otras. Las etiquetas que se introducen en un documento HTML no son visibles cuando el documento se muestra en un navegador (IExplorer, Firefox, Opera, Chrome, etc). Cuando un usuario desde Internet solicita ver una pgina el servidor Web enva la pgina al navegador y este interpreta las etiquetas para dar la pgina correctamente formateada. Cuando utilizamos Dreamweaver para crear una pgina Web no tenemos que preocuparnos de todo esto. Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la apariencia y contenido definidos en el editor grfico. Esto nos facilita muchsimo el trabajo.
Ejercicio 2: Creando una pgina web HTML.

Una vez configurado el Sitio, ir al men Archivo > Nuevo, o simplemente pulsar CTRL+N para crear una nueva pgina, En la ventana NUEVO DOCUMENTO, elegir PAGINA EN BLANCO, tipo de pgina: HTML, Diseo: NINGUNO. Clic en CREAR.
12
En la zona superior, si la vista (1) se halla el modo DISEADOR, tendr la siguiente apariencia. Observe los botones CODIGO, DIVIDIR y DISEO (2), el cuadro en donde se puede insertar el TITULO DE LA PAGINA (3) y la DIRECCION (4, nueva caracterstica). .
1
2 4
Activar el botn CODIGO, y escribir las siguientes etiquetas HTML. Podr darse cuenta que a medida que escribe se muestra una ayuda inteligente que le permite completar las etiquetas.
Elegir el color Amarillo
13
Debe quedar de la siguiente manera:
Ir al Men Archivo > Guardar, o simplemente pulse CTRL+S, y colocar por nombre inicio. Por defecto se guarda con extensin html. Active el botn DIVIDIR y DISEO, y observe la vista previa.
VISTA DIVIDIR
VISTA DISEO
14
Establecer el navegador predeterminado

El navegador web es un programa o aplicacin que nos va a permitir movernos por internet y acceder al contenido de las webs, blogs, foros, galeras fotogrficas, etc., de Internet. Posiblemente el navegador Internet Explorer sea el ms conocido por todos al estar integrado en Windows, no obstante, tambin disponemos de otras alternativas como por ejemplo: Mozilla Firefox, Opera, Flock, Chrome, Maxthon, Avant Browser, Kmeleon, etc.
En el Men Archivo > Vista previa en el navegador, puede elegir mostrar su diseo en cualquier navegador instalado en su equipo, o Editar la lista de navegadores para seleccionar uno por defecto.
15
Formateando el Diseo de la Pgina

Modificando el Ttulo de la pgina
En el ejemplo anterior pudo modificar el ttulo del documento en el texto encerrado entre las etiquetas <title> </title>. Esta misma caracterstica se puede hacer directamente desde el cuadro de ttulo.
Vista previa en IE 9.0
Vista previa en Firefox 5.0
Aplicando propiedades al documento

Desde el Panel de Propiedades se pueden modificar las propiedades del documento activo, para esto de clic sobre el botn Propiedades de la pgina
16
Al activar el botn EXAMINAR, en la imagen de fondo, le solicitar una confirmacin para copiar el archivo desde la ubicacin elegida, hacia la carpeta de su sitio web.
Se sugiere que cree una carpeta en donde pueda almacenar las imgenes.
Al aceptar las modificaciones, se podr observar algo como esto:
Esto puede cambiar si el valor de la propiedad repetir es distinto (no-repetir, repetir-x, repetir-y).
17
Si activa la vista dividir o cdigo, podr notar la creacin de estilos.
Los estilos CSS se utilizan para combinar una serie de atributos, como pueden ser el color o el tamao, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignacin de esos mismos valores a otras partes del texto.
Formateando textos en el documento

Las caractersticas del texto seleccionado pueden ser definidas a travs del men Formato, y a travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del Panel de Propiedades, que estn clasificadas en dos categoras HTML y CSS.
Modificando las propiedades HTML
Formato: Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o formato predeterminado. Los encabezados se utilizan para establecer ttulos dentro de un documento. Negrita (B) y Cursiva (I): El botn B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botn I, lo encierra entre <em></em>, que por defecto se ve en cursiva. Listas: Estos botones permiten crear listas con vietas o listas numeradas. Sangras: Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangra a la izquierda del texto.
18
Ejercicio 3: Modificando las propiedades HTML.

Crear un nuevo documento y escribir el siguiente texto:
1
3 4
Seleccionar (1), y en Formato, elegir Encabezado 1. En (2), y aplicar B e I. En (3), y aumentar sangra una vez. En (4), aplicar en Formato, Encabezado 2, y activar I. En (5), aplicar Lista Numerada, y activar I. Una vez completado, la muestra debe quedar as:
Guardar con el nombre de computacion.html
Modificando las Listas.
19
En el botn Elemento de Lista, se puede modificar el estilo de la numeracin o vieta usada en la creacin de la lista.
Modificando las propiedades CSS

Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra pgina y darle el diseo que queramos. Podemos cambiar desde propiedades simples, como el color de fondo, hasta cosas ms vistosas, como hacer que un bloque se muestre en una posicin determinada o que un elemento cambie al pasar el cursor sobre l
Regla de destino: Las reglas CSS sirven para definir a qu elemento aplicamos el estilo, y cmo lo hacemos. Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes de acabar el tema. Editar regla: Mediante este botn accedemos a las opciones para la creacin o modificacin de estilos CSS, de la regla seleccionada. Panel CSS: Este botn abre el panel CSS si no lo tuviramos abierto. Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una nica fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, sans-serif, el texto se ver con la fuente Arial, pero si esta no existe se ver en Helvetica. Estilo: Estos botones ponen el texto en negrita y cursiva respectivamente. Pero en este caso, generan un estilo css en lnea. Alineacin: A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplo sobre un prrafo. Tamao: Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles, porcentajes del tamao base, etc. Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la pgina. Si no se ha establecido ningn color en las propiedades de la pgina ni aqu, el color del texto por defecto ser el negro.
20
Ejercicio 4: Modificando las propiedades CSS.

En el documento computacion.html, modificar lo siguiente.
Seleccionar (1), y Editar regla.
Establecer el nombre: Textos, definida para (Slo este documento), y modificar los siguientes valores: Categora Tipo Font-family: Verdana, Geneva, sans-serif Font-size: 12 px Font-style: italic Color: (azul)
21
Luego de Aceptar, podr modificar cualquiera de los estilos ya creados.
22
Hojas de Estilo
Podemos exportar estilos que se encuentren incrustados en la pgina HTML a una nueva hoja de estilos haciendo clic derecho sobre el estilo en el Panel CSS y seleccionando Exportar. Se abrir el cuadro de dilogo Exportar estilos como archivo CSS que te permitir guardar todos los estilos incrustados en un nuevo archivo CSS. Esta opcin es muy til si tienes los estilos incrustados en una pgina y queremos utilizarlos en otras tambin. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en cualquier pgina que queramos utilizarlos.
Ejercicio 5: Creando una hoja de estilos.

Crear un nuevo documento html, y guardar con el nombre de pagina01. Como necesitamos un texto, usemos un texto aleatorio de los que podemos encontrar en diferentes web, como por ejemplo: http://www.lipsum.com/
Establecer 5 prrafos, y clic en Generar Lorem Ipsum. Luego, copiar el texto mostrado en pagina01.html, y guardar los cambios. Ir al Men Archivo > Guardar como, o pulsar CTRL+S, establecer el nombre pagina02.html. Realizar algunos cambios, para que los documentos sean diferentes.
23
Pulsar CTRL+N para crear un nuevo documento Pgina en blanco > CSS, y guardar con el nombre de estilos.css
24
Para adjuntar la hoja de estilos a la pagina01, solo se debe activar la opcin Adjuntar hoja de estilos, del men contextual Estilos CSS.
Luego, en la ventana Vincular hoja de estilos externa, activar VINCULAR, y desde el botn Examinar elegir el archivo estilos.css.
Se genera la etiqueta HTML <link..> que puede observar en el cdigo.
25
(1) Seleccionar el texto Pagina 1
(3) En la ventana Nueva regla CSS, escribir el nombre Titulo, y en Definicin de regla, seleccionar el archivo CSS creado (estilos.css), luego Aceptar.
(2) Activar las propiedades CSS, y en Regla de destino debe mostrarse <Nueva regla CSS> y activar el botn Editar regla.
En la ventana Definicin de regla, establecer los siguientes valores:
26
Se puede observar el resultado de aplicar el estilo en el documento. Si se quiere modificar, en la ventana Estilos (men Ventana > Estilos CSS), se puede observar el estilo y modificarlo.
Para crear un nuevo estilo desde esta ventana, hacer clic sobre el botn Nueva regla CSS, en la barra de herramientas inferior. Luego se debe mostrar la ventana Nueva regla CSS, en donde escribiremos el nombre MiEstilo_1, estableciendo los siguientes valores:
27
En la Categora Tipo Font-family: Verdana, Geneva, sans-serif Font-size: 12 Color: azul En la Categora Bloque Text-align: center Luego, para aplicar el estilo sobre el texto, se puede hacer de dos formas, una es seleccionando el texto, y desde el men contextual, elegir Estilos CSS > MiEstilo_1, o tambin desde las propiedades CSS.
En la pagina02.html, adjuntar la hoja de estilos: estilos.css, y aplicar los estilos creados.
28
Objetivos Hipervnculos Tipos Destino (self y blank)
Imgenes Tipos compatibles para la Web. Insercin de Imgenes. Mapas de imgenes. Imgenes de Sustitucin (RollOver).
Objetos Inteligentes. Insercin de Tablas.
29
Hipervnculos
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo a otra pgina o archivo. Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen. Para crear un hipervnculo, se puede hacer desde el Men Insertar > Hipervnculo.
Tipos de Hipervnculos
Sitios Externos.
Usan una referencia absoluta, es decir, se debe definir la URL del sitio, incluyendo el http.
Documentos del mismo Sitio.

Usan una referencia relativa, de acuerdo a la ubicacin de los documentos web dentro del sitio.
A un punto especfico del mismo documento ADOBE DREAMWEAVER CS 5.5 30
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello, indicamos el nombre del punto de fijacin a continuacin de la ruta del archivo (relativa o absoluta) separados por una almohadilla (#). El formato sera nombre_de_documento.extension#nombre_de_punto. Si el punto de fijacin est en la propia pgina, basta con indicar nicamente el punto en el enlace, por ejemplo #apartado2 Podemos definir el punto dentro de un documento a travs del men Insertar > Anclaje con nombre. Los nombres no deben de estar repetidos en la pgina.
Especiales
Son enlaces que permiten abrir correos electrnicos (malto:miemail@servidor.com), descarga de archivos del servidor de nuestro sitio web ( misarchivos/file.doc), o desde sitios externos ( http://www.otraweb.com/susarchivos/manual.doc).
Ejercicio 1: Aplicando hipervnculos

En la ventana de Administracin de Sitios, importar el sitio que se encuentra en SEM2_ejer01 (si ya existe, elimnelo), luego en la pgina index.html:
4 3 5 2
31
(1) Enlace a un Sitio Web Externo: Clic a la imagen de Google, ir a las propiedades:
Cuando una imagen se convierte en hipervnculo, se muestra un borde de color azul, si no desea que se muestre establecer la propiedad Borde: 0 (Completar los enlaces para ALTAVISTA, en www.altavista.com, y para YAHOO, en www.yahoo.com). (2) Enlace a una pgina web del mismo Sitio: Clic al texto Ir a la pagina 2:
(3) Seleccionar el texto INSTITUTO SUPERIOR SISE.
(4) Enlace hacia un correo electrnico: Seleccionar Contctenos
(5) Enlace hacia un archivo: Seleccionar aqu.
Destino (self y blank)

La pgina donde se abrir la pgina, que puede ser: _blank: Abre el documento vinculado en una ventana nueva del navegador.
32
_parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. _self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador.
Imgenes
Tipos compatibles para la Web.
El componente grfico de las pginas web tiene mucha importancia, es el que hace que estas sean vistosas y el que nos permite aplicar nuestra creatividad para hacer del diseo de sitios una tarea agradable. Es tambin una herramienta para acercar los sitios al mundo donde vivimos, sin embargo, es tambin el causante de errores graves en las pginas y hacer de estas, en algunos casos, un martirio para el visitante. Cuando usar gif? El formato gif es ideal para imgenes muy simples: trazos de lneas, dibujos y textos en blanco y negro o con pocos colores. Tambin es el nico formato de los 3 que permite animaciones. Y es ampliamente soportado en los browsers. Cuando usar png? Se usa para el mismo tipo de imgenes que los gif, con dos grandes desventajas. La primera es que no permite animaciones y la segunda es que sus caractersticas no son totalmente soportadas por todos los browsers, especialmente en las antiguas versiones de los mismos. Su gran ventaja es que reduce el tamao de las imgenes entre un 5% y 25% ms que los gif. No debemos dudar que en un futuro cercano sea ampliamente soportado por las nuevas versiones de los browsers. Cuando usar jpg/jpeg? Es ideal para fotografas, es decir imgenes con muchsimos colores y pixels. No se les vaya a ocurrir usarlo con imgenes simples porque perderan claridad y nitidez. A continuacin se puede ver una tabla comparativa de las principales caractersticas de los formatos grficos para crear pginas web:
33
Insercin de Imgenes.
Para insertar imgenes de manera sencilla: Guardar la pgina antes de insertar una imagen. Los archivos grficos deben estar dentro de una carpeta determinada en la misma ubicacin del Sitio. Ir al Men Insertar > Imagen, o pulsar CTRL+ALT+I.
Ejercicio 2: Insertando imgenes

En la ventana de Administracin de Sitios, importar el sitio que se encuentra en SEM2_ejer02 (si ya existe, elimnelo), luego en la pgina index.html: Usar cualquiera de las opciones descritas para insertar una imagen, y se debe mostrar una ventana en donde deber seleccionar el archivo (del mismo sitio).
En el cuadro de dilogo Abrir que se muestre, seleccionar el archivo grfico (recordar respecto a los formatos), y elegir Google.jpg que se encuentra dentro de la carpeta imgenes. Luego, definir un texto alternativo (opcional) para la imagen.
34
Observar el resultado, y ver las Propiedades.
3 4
En las propiedades se puede modificar sus dimensiones (1), se muestra el origen de la imagen (2) los botones de la derecha permiten seleccionar directamente la imagen desde la Ventana Archivos o abriendo el Cuadro de Dilogo Abrir, el texto alternativo (3), editarlo usando el programa predeterminado para tratamiento de imgenes (4), establecer un borde y alinearlo (5). La propiedad Alinear permite definir el texto circundante.
Predeterminado (Inferior)
Superior
Medio
Izquierda
35
Derecha
Completar la apariencia siguiente:
Mapas de imgenes.
Los mapas de imagen son partes de una imagen que pueden ser utilizadas para asignarle algn tipo de comportamiento. Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la que se desea crear el mapa, y abrir el inspector de propiedades de dicha imagen.
Estando seleccionada la imagen, ya es posible crear un mapa a travs de los botones del inspector de propiedades que tienen el siguiente aspecto:
36
Los tres ltimos botones son los que se utilizan para crear los mapas. Dichos mapas pueden tener forma rectangular, circular, o libre, dependiendo del botn pulsado.
Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo sobre la imagen. Entonces ya es posible dibujar el mapa sobre la imagen, pulsando sobre los lugares donde se desea que comience y finalice el mapa, as como sobre el resto de lugares (en orden) que se desea que recorra el mapa en el caso de forma libre. Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar un vnculo y un texto alternativo a ese mapa como puedes ver a continuacin:
El primero de los botones, el de la flecha, debe pulsarse al finalizar la creacin de un mapa, para que el puntero recupere su forma original al situarse sobre una imagen. De este modo, es posible mover los puntos del mapa, en el caso de que no hayan sido creados en los sitios deseados, para ajustarlos mejor a la imagen.
Ejercicio 3: Insertando Mapas de Imgenes

En la ventana de Administracin de Sitios, importar el sitio que se encuentra en SEM2_ejer03 (si ya existe, elimnelo), luego en la pgina index.html:
37
De un clic sobre la imagen, luego, en el inspector de propiedades clic sobre el botn Zona Interactiva Poligonal, y seleccione el departamento de Lima, y en vinculo elegir lima.html, y en el destino _self.
lima.html
De la misma manera, trazar la zona que corresponde al departamento del Cuzco y vincularlo con cuzco.html, destino _blank.
38
Imgenes de Sustitucin (RollOver).

La imagen de Sustitucin describe un comportamiento interactivo que se activa simplemente al pasar el cursor del mouse encima de la imagen en cuestin, es decir, cuando usted desliza por encima el cursor del mouse sobre la imagen sta cambiar por otra imagen. Para este efecto se requieren dos imgenes, una para el estado Off y otra para el estado On.
Para insertarla, podemos acceder al Men Insertar > Imagen de Sustitucin, luego en la ventana que se muestra a continuacin se debe seleccionar la imagen original o inactiva y la imagen de sustitucin o aquella que se mostrar cuando el puntero del mouse se halle encima de la imagen, un texto alternativo y el hipervnculo.
Ejercicio 4: Insertando Imgenes de Sustitucin

En la ventana de Administracin de Sitios, importar el sitio que se encuentra en SEM2_ejer04 (si ya existe, elimnelo), luego en la pgina index.html, en las celdas ubicadas debajo del logo, agregar las imgenes de sustitucin.
39
El documento debe quedar de la siguiente manera:
Objetos inteligentes
Los objetos inteligentes son imgenes que obtenemos directamente desde un archivo de Photoshop (.psd). Al insertarlo, lo hacemos igual que con cualquier imagen, eligiendo el archivo de Photoshop.
Pero una archivo .psd no es un archivo que podamos mostrar en una pgina web. Por eso, lo que har Dreamweaver es convertirlo a un formato estndar. Por eso, tras abrirlo, Dreamweaver nos pedir que elijamos uno de los formatos gif, png o jpg y lo guardemos, con las mismas opciones que encontrbamos al pulsar el botn del panel de propiedades. Qu ventajas obtenemos con todo esto? Si observas la esquina superior izquierda del objeto inteligente encontrars un icono como ste . Las dos flechas verdes indican que el archivo est sincronizado, es decir, la imagen est generada a partir del ltimo archivo de Photoshop.
40
Pero puede que en cualquier momento queramos modificar la imagen. Podemos hacerlo abriendo el archivo .psd, o pulsando el icono abrir el archivo fuente de Photoshop. del panel de propiedades, que
Tras guardar los cambios, vemos que el icono de la imagen en Dreamweaver ha cambiado, mostrando ahora una flecha roja: . Esto indica que la imagen que estamos viendo en Dreamweaver (jpg, psd, png) no es la misma que el original (psd) ya que se ha modificado. Podemos volverla a generar pulsando el icono Actualizar desde origen.
Ejercicio 5: Insertando Objetos inteligentes

En el mismo sitio del ejercicio anterior, en la celda inferior, insertar el archivo body.psd, que se encuentra dentro de la carpeta imgenes.
En la ventana que se activa, se podr elegir el formato y calidad del archivo seleccionado, luego solicitar seleccionar la ubicacin del archivo al que ser exportado.
41
Insercin de Tablas
Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran imposibles de realizar. La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividindolos en filas y columnas. Hasta hace poco, y todava hoy es fcil encontrar diseos web basados en tablas. Esto es debido a la facilidad que nos ofrecen estos elementos para organizar contenidos y repartir el espacio. No obstante, esta no es una prctica recomendable, ya que las tablas no fueron pensadas para ello, y si no estn bien anidadas pueden ocasionar problemas al analizar nuestra web con herramientas automticas, como los bots que indexan el contenido para los buscadores. Para maquetar nuestras pginas, lo recomendado es emplear capas (div) y CSS. Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuacin tienes un ejemplo de tabla.
Para insertar una tabla, ir al Men Insertar > Tabla, o pulsar CTRL+ALT+T. En el cuadro de dilogo Tabla, establecer el nmero de Filas y Columnas, el ancho de la tabla en pixeles o en porcentaje de acuerdo al tamao de la ventana del navegador, grosor del borde, relleno de celda (atributo cellpadding), espacio entre las celdas (atributo cellspacing), etc.
42
Se pueden establecer los valores para especificar: o o o o o Filas :3 Columnas :2 Grosor del borde : 1 Ancho de la tabla : 500 Colocar los textos correspondientes.
Seleccionar la primera fila, y luego centrar usando cualquiera de las dos propiedades:
Dependiendo de los elementos seleccionados, las propiedades pueden variar:
Fila
Columna
Celda
2 6 7
43
1. 2. 3. 4. 5. 6. 7.
Indica el elemento seleccionado: Fila, Columna o Celda Combinar o Dividir celdas. Alineacin del contenido: Horizontal o Vertical. Ancho y alto del elemento seleccionado. Imagen de fondo. Color de fondo. Color del borde.
Modificar propiedades de la tabla.

Para el caso de la tabla:
1 2 3 4
5 6
1. 2. 3. 4. 5. 6. -
Modificar el nmero de filas y columnas. Ancho de la tabla en pixeles o en porcentaje. Relleno y espaciado de las celdas. Alineacin del contenido. Grosor del borde. Color de Fondo, Color del borde e Imagen de fondo.
Segn esto, modificar la tabla anterior y obtener:
Insertar filas y columnas.

Si requiere insertar filas o columnas, lo que puede hacer es ubicarse en la celda cercana a donde desea hacer la modificacin, y hacer clic derecho para seleccionar la opcin adecuada desde el men contextual.
44
Insertar 2 columnas, despus de la columna actual, y completar la tabla.
En las opciones del men contextual tambin puede encontrar la forma de combinar celdas o dividirlas.
Eliminar filas y columnas.

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opcin Eliminar fila o Eliminar columna del men Tabla.
Tambin se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr)
45
Combinar y dividir celdas.

Si se seleccionan varias celdas pueden combinarse pulsando sobre el botn del inspector de propiedades (lo encontrars en la parte inferior izquierda del panel Propiedades, o pulsando sobre la opcin Combinar celdas de la opcin Tabla, que como ya has visto puedes dirigirte a ella a travs del men contextual de la tabla y a travs del men Modificar. Para dividir una celda hay que pulsar sobre el botn sobre la opcin Dividir celda de la opcin Tabla. del inspector de propiedades, o
En ambos casos, aparece una ventana como sta, en la que hay que especificar si la celda se va a dividir en filas o columnas, y el nmero de stas.
Ejercicio 6: Insertando Tablas

En el mismo sitio anterior, crear un nuevo documento HTML, de nombre tablas.html, y crear la siguiente tabla:
46
Objetivos Maquetando pginas web. Uso de divisiones o capas. Aplicando formato a las divisiones. Divisiones flotantes. Uso de Clear.
Insercin de elementos multimedia: audio y video. Otros elementos: Marquesinas, Widgets y elementos Spry.
47
Maquetado de Pginas Web

En pocas palabras, maquetar una pgina web es pasar el diseo a cdigo HTML, poniendo cada cosa en su lugar (una cabecera, un men, etc.). Hasta hace unos aos la nica manera de maquetar una pgina web era mediante tablas HTML (<table>), pero esto tiene muchas desventajas y limitaciones, por eso la tcnica de maquetacin fue evolucionando con los aos hasta llegar al punto donde no se usan tablas, si no capas (los famosos DIVs) a las que se le dan formato mediante CSS.
Uso de Divisiones, Capas o Layouts

Las capas, layouts o divs son la misma cosa con distinto nombre, para tener un concepto mental ms fuerte de lo que son, podemos imaginarlos como contenedores o bloques donde podemos insertar lo que queramos dentro (imgenes, texto, animaciones, otro bloque, o todo al mismo tiempo) a los que se le asigna un ancho, alto y posicin, de esta manera se van a ir posicionando consiguiendo la estructura que queremos. Veamos un ejemplo grfico:
Como podemos ver, tenemos 3 capas estructuradas de la siguiente manera: Capa 1: es la capa principal y contenedora Capa 2: capa dentro de la capa contenedora 1 y alineada a la izquierda (float:left;) Capa 3: igual que la capa 2, solo que tiene un margen con respecto a esta ltima (float:left; margin: 10px; ya veremos esto ms en detalle).
48
Aplicando formato a las Divisiones

Esto se hace con estilos CSS. Para darle formato a un DIV tenemos que identificarlo de alguna forma, para esto existe el atributo ID, en el pondremos el nombre del DIV para luego llamarlo desde la hoja de estilos, la forma de escribirlo es as: Ir al Men Insertar > Objetos de Diseo > Etiqueta DIV.
Luego, activar Nueva regla CSS, para crear los estilos CSS, en un Nuevo archivo de hoja de estilos.
49
Luego de solicitar el nombre y guardarlo en la misma ubicacin en donde se halla el documento html, se procede a definir los estilos: El color de fondo Verde.
El ancho de 210 y el alto de 300.
50
Proceda a guardar los cambios, y puede abrir la hoja de estilos creada y observar:
#capa1{ width:210px; height:300px; background-color:green; }
Con esto ya tendremos una especie de rectngulo verde donde podremos agregar texto como queremos.
Uso de divisiones flotantes

La maquetacin por divs CSS se basa en "flotar" unas capas dentro de otras para conseguir la estructura que queremos, para esto se utiliza la propiedad float. Esta propiedad se utiliza para flotar los bloques, podemos utilizarla con los siguientes valores: none: no flota la capa. left: flota la capa hacia la izquierda. right: flota la capa hacia la derecha.
Siguiendo con el ejemplo anterior, vamos a crear otra capa #capa2, le vamos a aplicar otro color de fondo con el mismo alto y ancho pero vamos a flotar ambas capas. Comenzamos agregando la siguiente divisin luego de la capa1.
51
Agregar en el estilo de la capa1, float en left.
Esto se debera ver ms o menos as:
52
Y el estilo debera de verse as: #capa1{ width:210px; height:300px; background-color:green; float:left; } #capa2{ width:210px; height:300px; background-color:gray; float:left; } y el cdigo HTML sera este: <html> <head> <title>Curso de maquetacion CSS</title> <link href="estilos.css" type="text/css" rel="stylesheet"> </head> <body> <div id="capa1">Esta es mi primer capa</div> <div id="capa2">Esta es mi segunda capa</div> </body> </html>
En la capa 2, incluiremos un margen izquierdo de 10 px.
El cdigo CSS debe quedar as:
53
#capa2{ width:210px; height:300px; background-color:gray; float:left; margin-left:10px; } y se vera as:
Uso de Clear
Seguramente cuando ests maquetando tu sitio web necesitars tener una capa o bloque que no tenga capas a sus lados, para eso se usa la propiedad CSS Clear. Esta propiedad se utiliza en conjunto con float y sirve para evitar que una capa se posicione a cualquiera de los lados, los valores que admite son estos: left: no deja que una capa flote a la izquierda right: evita que una capa flote a la derecha both: evita que haya capas flotantes en cualquiera de sus lados
Nosotros lo usaremos para crear, por ejemplo, el pie de pgina. Siguiendo con el ejemplo que hicimos en la leccin anterior vamos a crear una tercer capa #capa3 y le aplicaremos esta propiedad, aadiremos un ancho de 430 pixeles y un alto de 30 pixeles, tambin le aplicaremos un color de fondo naranja.
54
Establecemos color de fondo naranja.
Ancho de 430 y Alto de 30, en Float seleccionamos Left, y Clear, both. Margen superior de 10.
55
Esto quedara as:
#capa3{ width:430px; height:30px; background-color:orange; float:left; clear:both; margin-top:10px;
Iniciando la estructura
En el tema anterior vimos los conceptos bsicos para crear y poder flotar capas entre otras cosas, ahora vamos a tratar de poner en prctica lo que aprendimos para maquetar una pgina con la siguiente estructura: Cabecera: ac puede ir un logo o el nombre de tu pgina web Barra lateral: podemos poner un men vertical con listas HTML Contenido: donde ir el contenido de la web Pie de pgina: podemos poner lo que necesitemos, desde el copyright hasta los enlaces recomendados
La estructura deber quedar as:
56
Lo recomendable sera que hubiera una divisin contenedora que encierre a las otras divisiones, sobre todo, si lo que se desea es centrar el contenido en la pgina.
Ejercicio 1: Construyendo divisiones en Dreamweaver CS5.5

En la ventana de Administracin de Sitios, importar el sitio que se encuentra en SEM3_ejer01 (si ya existe, elimnelo), luego en la pgina index.html, crear las siguientes divisiones:
LOGO (ancho: 1000, alto: 130) (clear: both, float: left) MENU (ancho: 1000, alto: 27) (clear: both, float: left)
LOGO1 (ancho: 250, alto: 137) (float: left)
FLASH (ancho: 750, alto: 410) (float: left)
LOGO2 (ancho: 250, alto: 137) (float: left)
LOGO3 (ancho: 250, alto: 137) (float: left) PIE (ancho: 1000, alto: 33) (clear: both, float: left)
Primero, se debe crear un estilo para el cuerpo del documento (BODY), que solamente afecte al documento actual:
A continuacin, agregar una divisin de nombre contenedor, con las siguientes especificaciones:
57
Luego, agregar las otras divisiones, tal y como se trabajaron anteriormente.
Multimedia
Los elementos multimedia que pueden ser insertados en documentos web pueden ser animaciones Flash (aplicacin que forma parte de Adobe Master Collection), videos flash (FLV), entre otros.
Pelculas de Flash
Cualquier animacin creada en Flash tiene extensin SWF, el cual puede ser insertado en un documento HTML. Para incluir una animacin de Flash, ir al Men Insertar > Media > SWF.
Como en otros elementos, como las imgenes, podemos asignarle el ancho (An.) y alto (Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.
58
Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), nos resultar muy til indicar su ubicacin en Origen. As, para editarlo, bastar con pulsar Editar. La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio. La otra es la opcin Rep. autom. (Reproduccin automtica), que al estar marcada indica que nada ms cargarse la pgina comenzar a reproducirse la pelcula Flash. Si esta opcin no estuviera marcada, se mostrara nicamente el primer fotograma de la pelcula hasta que el usuario la activase. Por tanto interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada por algn comportamiento. La Calidad, cuanto ms baja, antes se cargar el archivo pero peor se ver. Conviene dejarla en Alta para verlo tal cul se cre. La Escala permite elegir cuanto se ver del archivo. Las pelculas Flash no siempre son del tamao exacto del contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se ver todo la pelcula. En cambio, si elegimos Ajuste exacto, se vern slo los objetos, omitiendo el escenario de fondo. Alinear funciona como con las imgenes, y nos permite alinear la pelcula en relacin con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un prrafo) empleando CSS. Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el Flash. En cambio, si es Transparente, el fondo se ver transparente (a no ser que se haya especificado un color de fondo en el Flash). El botn Reproducir nos permite ver la pelcula. Al insertarse la pelcula, veremos la ubicacin en la vista de diseo con el siguiente aspecto:
Al insertarse animaciones Flash, es frecuente que Dreamweaver aada algunos archivos que nos permitirn reproducir los elementos, normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se vern. De todas formas, Dreamweaver nos avisar cuando incluya archivos.
59
Sonido
No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen estar escuchando su propia msica cuando navegan en Internet, por lo que el escuchar tambin sonido en cada pgina que se visita puede resultar algo molesto. A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la pgina, puede hacerla ms atractiva. Las pginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la pgina puedan desactivarlo. Siempre es mejor que el usuario abandone la pgina. Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. Para insertar un archivo de audio en un documento tienes que dirigirse al Men Insertar > Meda > Plug-in. A continuacin, para que se muestren los controles de audio se puede reproducir pulsando sobre los controles, aunque podra mostrarse algunos de los siguientes: Si tu navegador tiene instalado el plugin necesario para reproducir el archivo, se mostrar un control similar a este:
En cambio, si el plugin necesario no est instalado, el navegador ofrecer la posibilidad de hacerlo, como en esta imagen de Firefox.
60
Un plugin es un aadido al navegador, que nos permite realizar funciones extra, como en este caso, reproducir un archivo de msica. Al insertar un elemento como plug-in lo que indicamos es que el navegador debe de intentar abrir el archivo empleando los pluigns que tenga para tal fin. Por eso, si no lo tiene, nos invitar a instalarlo. En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son insertados como plugin aparecen representados dentro de Dreamweaver por una imagen como la de la izquierda. En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarn los controles de audio, mediante Al y An. En el caso de no especificar ningn tamao, se mostrar el tamao por defecto de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la pgina, pero que no se muestren los controles de audio, los campos Al y An deben valer cero. Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores no pueden definirse como propiedades a travs del inspector de propiedades, pero si los conocemos podemos empelar el botn Parmetros....
Por ejemplo, para que el archivo se reproduzca continuamente se hemos aadido loop="true". Si no queremos que se reproduzca automticamente, podemos aadir tambin autostart="false" La lnea de cdigo del archivo de audio nos quedara del siguiente modo: <embed src="media/audio.mid" autostart="false" loop="true"></embed> Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles de audio, puedes escribir este cdigo directamente en la vista Cdigo. <bgsound src="cancion1.wav" loop="-1"> Insrtalo despus de la etiqueta </title> Con el parmetro loop puedes decidir cuntas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo). No obstante, insistimos en que no es recomendable poner msica sin controles de reproduccin. Lo ms habitual en la web es insertar el sonido empleando Flash. Esto hace que no se necesiten plugins, slo poder reproducir Flash. Adems, nos permite crear los controles personalizados.
61
Video
En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV. Para insertar un archivo de vdeo en un documento, se debe ir al Men Insertar > Meda > Plug-in. El inspector de propiedades para los archivos de vdeo insertados de esta forma es el mismo que el de los archivos de audio, ya que ambos se insertan como Plug-in.
Hay que prestar especial atencin al ancho y alto. Por defecto, si Dreamweaver no puede obtener el tamao del archivo lo fijar a 32 x 32, insuficiente para ver un vdeo. Es mejor borrarlos, y as el vdeo se mostrar con su tamao original. Si conocemos el tamao del vdeo, podemos pensar en insertarlo directamente, pero hay que tener en cuenta el tamao de los controles de reproduccin, que depende de cada navegador. Los vdeos tambin se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores pueden cambiarse a travs botn Parmetros, del mismo modo que en el caso de los archivos de audio, aadiendo autostart="false" y loop="true". Como ya hemos dicho, todos los objetos insertados a travs de la opcin Plug-in precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos. En el campo Origen del inspector de propiedades se establece el archivo vinculado (el archivo de audio o de vdeo) que ha de reproducirse. En el caso de que el usuario no tenga instalado ningn plug-in adecuado, puede establecerse en el campo URL plg una pgina en la que pueda encontrarlo. No ser necesario en los archivos ms comunes de audio y vdeo, pero s si intentamos cargar un archivo ms raro.
Ejercicio 1: Insertando elementos multimedia

En la ventana de Administracin de Sitios, importar el sitio que se encuentra en SEM3_ejer01 (si ya existe, elimnelo), luego en la pgina index.html, puede encontrar una tabla en donde se halla numeradas las celdas en donde deber colocar los elementos multimedia requeridos.
62
En la celda 1, insertar la pelcula de flash desde Men Insertar > Media > SWF. Archivo: media/flash/principal.swf. En la celda 2, insertar el video de flash desde Men Insertar > Media > FLV. Archivo: media/flash/video.flv. En la celda 3, insertar un video desde Men Insertar > Media > PLUGIN. Archivo: media/video/ Enamorado de un angel.mpg. Esta debera ser la apariencia final del documento desde el navegador.
63
Insertar el archivo de audio: media/audio/fondo.mid, como msica del documento.
Otros elementos
Marquesinas
Las marquesinas son texto, imgenes, o una mezcla entre texto e imgenes, que pueden desplazarse de un lado a otro de la ventana en forma de lnea. Las marquesinas no se pueden insertar a travs del editor grfico de Dreamweaver, es necesario hacerlo a travs del cdigo mediante las etiquetas <marquee> y </marquee>. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina. Tambin es posible especificar algunas caractersticas de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen. Por ejemplo, <marquee behavior="slide">, la marquesina har el desplazamiento una sola vez y se detendr. En cambio <marquee behavior="alternate">, en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se desplazar de lado a lado de la ventana, como si rebotara en los extremos. <marquee behavior="alternate"> Bienvenid@s a PerrosGatos <img src="imagenes/logo_animales.gif" alt="PerrosGatos" /> </marquee> No conviene abusar de estos elementos, que ya que distraen la atencin del visitante. Cada vez se emplea menos este elemento, ya que si se quiere animar texto, se suele utilizar Flash que nos ofrece mucha ms posibilidades.
Widgets
Es un componente de pgina Web formado por cdigo HTML, CSS y JavaScript. Ejemplos de widgets Web son los acordeones, los paneles en fichas y los calendarios. Puede establecer su propia seleccin personal de widgets Web disponibles en Dreamweaver usando el Navegador de widgets de Adobe (una aplicacin de AIR que le permite examinar, configurar y obtener una vista previa de widgets empleando una interfaz visual). Para insertar un widget en un documento, se debe ir al Men Insertar > Widget. En el cuadro de dilogo, seleccione un widget y un valor preestablecido (si resulta aplicable) y haga clic en Aceptar.
64
Si no tiene instalado algn widget previamente, se le pedir que acepte una Licencia de uso.
Seleccione alguno de los widgets mostrados..
65
Uso de la Barra de Men Spry: Paneles de Ficha, Acorden.

En esta unidad veremos algunos controles basados en JavaScript que Dreamweaver pone a nuestra disposicin utilizando su librera Spry. Estos controles harn que tus pginas se muestren de una forma ms profesional, vistosa y ordenada. Podrs encontrarlos bajo el Men Insertar > Spry, al final del desplegable o desde el panel Insertar, seleccionando Spry:
66
Barra de Mens La creacin de elementos es bastante sencilla. Este men admite hasta 3 niveles diferentes, as que en principio la primera tarea ser definir el primer nivel. Esto lo haremos desde el primer cuadro de listado. Aadir y quitar elementos es tan fcil como utilizar los botones , y podemos reorganizarlos luego utilizando las flechas . Cada uno de estos elementos puede ser modificado para que muestren el texto que queramos, lo haremos desde las cajas de texto que encontramos a la derecha. Ir al Men Insertar > Spry > Barra de mens de Spry Seleccionar el diseo.
Modificar los elementos y subelementos del Men. Establecer una URL para el vnculo de cada elemento.
Paneles de Ficha Puedes crear un control como el que mostramos a continuacin haciendo clic en EL Men Insertar > Spry > Paneles en fichas de Spry. Estas fichas son contenedores que admiten todo tipo de elementos HTML. Facilitan la navegacin y son muy tiles para organizar la informacin y no congestionar la pgina ni al usuario.
Seleccionando el control haciendo clic en la cabecera azul vers lo siguiente en el panel Propiedades:
67
Desde aqu podrs aadir tantas fichas como desees y ordenarlas utilizando los botones y . Luego selecciona el Panel predeterminado que es el que se mostrar por delante cuando se visualice la pgina en el explorador, antes de que el usuario haya pulsado alguna de las fichas. Acorden Otro control avanzado que utiliza las ventajas de AJAX y que Spry nos permite utilizar es el Acorden:
68
Objetivos
Manejo de capas flotantes usando Comportamientos. Comportamientos. Uso de Comportamientos Avanzados. Publicacin de Sitios Web.
69
Uso de Capas Flotantes con Comportamientos

a. Elementos DIV PA
Un elemento PA (posicin absoluta) es un elemento de pgina HTML que tiene una posicin absoluta asignada. Los elementos PA pueden contener texto, imgenes u otros contenidos que se pueden situar en el documento HTML. Se pueden colocar elementos PA delante o detrs de otros elementos PA, ocultar algunos PA mientras se muestran otros y mover elementos PA por la pantalla. Puede colocar una imagen de fondo en un elemento PA y, a continuacin, insertar un segundo elemento PA, con texto y un fondo transparente, delante del primero, etc. Crear una nueva pgina de nombre index.html. Ir a la Barra Insertar > Diseo > Dibujar Div PA
Establecer las propiedades ancho (An.), alto (Al.), Color de fondo y Visibilidad (Vis).
70
b. Trabajar con elementos PA

Insertar otras dos Div PA con las siguientes apariencias. Puede mostrar u ocultar las PA desde la Ventana PA (Men Ventana > Elementos PA).
c. Manejando el Panel de Comportamientos.

Los comportamientos son acciones que suceden cuando los usuarios realizan alguna accin sobre un objeto, como por ejemplo, mover el puntero sobre una imagen, hacer clic sobre un texto, hacer doble clic sobre una zona interactiva de un mapa de imagen, etc. Los comportamientos se programan en JavaScript. Adobe Dreamweaver CS3 permite insertarlos a travs de la ventana Comportamientos, por lo que no es necesario escribir el cdigo JavaScript para programarlos. Abrir la pgina index.htm, y hacer clic sobre una de las zonas, luego ir a la ventana Comportamientos (Men Ventana > Comportamientos).
Agregar comportamiento Eliminar comportamiento
Agregar un comportamiento > Mostrar/Ocultar elementos
71
Seleccionar div apDiv1 y luego clic al botn Ocultar. En la ventana Comportamientos, seleccionar el evento onMouseOut (cuando el puntero se halle fuera de la zona).
Agregar otra vez el mismo comportamiento (Mostrar/Ocultar elementos) y seleccionar div apDiv1 y luego clic al botn Mostrar. En la ventana Comportamientos, seleccionar el evento onMouseOver (cuando el puntero se halle dentro de la zona).
Repetir el mismo procedimiento con div apDiv2 y div apDiv3. Agregar otra vez el mismo comportamiento (Mostrar/Ocultar elementos) y seleccionar div apDiv1 y luego clic al botn Mostrar. En la ventana Comportamientos, seleccionar el evento onMouseOver (cuando el puntero se halle dentro de la zona).
Comportamientos
Los comportamientos integrados permiten mejorar el aspecto, la funcionalidad y el atractivo de su sitio Web. Puede asociar estos comportamientos a los elementos de sus pginas Web sin necesidad de conocer JavaScript. Los comportamientos de Adobe Dreamweaver CS4 colocan cdigo JavaScript en los documentos para que los visitantes puedan cambiar una pgina Web de diversas formas o iniciar determinadas tareas. Un comportamiento es una combinacin de un evento y una accin que desencadena ese evento. En el panel Comportamientos, un comportamiento se aade a una pgina especificando en primer lugar una accin y, a continuacin, el evento que desencadena esa accin.
a. Insertar comportamientos.
Se pueden adjuntar comportamientos al documento completo (es decir, a la etiqueta <body>) o a vnculos, imgenes, elementos de formulario o cualquier otro elemento
72
HTML. El navegador de destino que elija determina los eventos compatibles con un elemento determinado. Se puede especificar ms de una accin para cada evento. Las acciones tienen lugar en el orden en el que se enumeran en la columna Acciones del panel Comportamientos, pero puede cambiar dicho orden. Seleccione un elemento de la pgina, como una imagen o un vnculo. Para adjuntar un comportamiento a la pgina completa, haga clic en la etiqueta <body> en el selector de etiquetas, situado en la esquina inferior izquierda de la ventana de documento. Ir al Men Ventana > Comportamientos. Haga clic en el botn ms (+) y seleccione una accin en el men Aadir comportamiento. No se pueden seleccionar las acciones que aparecen atenuadas en el men. Pueden mostrarse atenuadas porque no exista un objeto necesario en el documento actual. Por ejemplo, la accin Controlar Shockwave o SWF aparece atenuada si el documento no contiene ningn archivo Shockwave o SWF. Cuando se selecciona una accin, aparece un cuadro de dilogo que muestra parmetros e instrucciones para dicha accin. Introduzca los parmetros de la accin y haga clic en Aceptar. Todas las acciones proporcionadas con Dreamweaver funcionan con los navegadores modernos. Algunas acciones no funcionan en los navegadores antiguos, pero no provocan errores. El evento predeterminado que desencadena la accin aparece en la columna Eventos. Si no es ste el evento de desencadenamiento que desea, seleccione otro en el men emergente Eventos. (Para abrir el men Eventos, seleccione un evento o una accin en el panel Comportamientos y haga clic en la flecha negra que seala hacia abajo y que aparece entre el nombre del evento y el nombre de la accin.)
b. Ejecutar rutinas de Javascript.

El comportamiento Llamar JavaScript ejecuta una funcin personalizada o lnea de cdigo JavaScript cuando se produce un evento. (Puede escribir el script usted mismo o usar el cdigo que tiene a su disposicin en diversas bibliotecas JavaScript de acceso gratuito en la Web.)
73
En este ejemplo, escribiremos una rutina que permita mostrar una ventana de bienvenida al cargar la pgina. Antes, asegurarse de que el objeto desde donde ser llamada la rutina de Javascript, este seleccionado.
A continuacin, seleccionamos el evento en que ser llamado.
74
Comportamientos avanzados
a. Mensajes emergentes.
Seleccionar el objeto desde donde ser llamado el javascript. Puede hacerlo desde el selector de etiquetas, o haciendo clic sobre el objeto en el Panel de Diseo. Elegir el Comportamiento Mensaje emergente.
Seleccionar el evento Load (carga de la pgina).
Lo que se visualizar al mostrar la pgina en el navegador, ser:
75
b. Controlar el texto de la barra de estado.

Seleccionar el objeto (imagen, capa, pgina, etc.), luego aadir el Comportamiento Establecer texto > Establecer texto en la barra de estado.
Digitar el texto que se visualizar en la barra de estado.
76
c. Intercambiar imagen.
Insertar una imagen, y establecer un ID (por ejemplo, carita) en el Panel de Propiedades.
Seleccionar la imagen, luego aadir el Comportamiento Intercambiar imagen.
Ubicar la imagen que va a intercambiarse.
Se generan dos eventos, uno restaura la imagen al alejar el puntero del mouse de la imagen (onMouseOut), y el otro cambia la imagen original por la seleccionada (onMouseOver).
77
d. Abrir una ventana del navegador.

Seleccione el texto Contctenos que se encuentra en la parte inferior izquierda.
Elija el Comportamiento Abrir ventana del navegador y en el evento onClick, y establecer:
78
Previsualizar en el navegador.
Publicacin de un Sitio Web.

La publicacin del Sitio Web viene a ser la etapa en la que son enviados los archivos a un servidor web. El Servidor Web, usualmente, pertenece a una empresa que consta de una infraestructura tecnolgica para poder brindar dicho servicio, el que puede ser gratuito (free) o de pago (dedicado). Una vez que el sitio ha sido cargado al servidor web, este debe ser reconocido o llamado desde el navegador a travs de una URL, para lo que se debe adquirir un dominio.
a. Hosting
El alojamiento web (en ingls web hosting) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar informacin, imgenes, vdeo, o cualquier contenido accesible va Web. Los Web Host son compaas que proporcionan espacio de un servidor a sus clientes. Servicios pagados Este tipo de obtencin, por lo general viene dado por el contrato de un proveedor de internet, el cual junto con dar conexin, entre la posibilidad de almacenamiento mediante disco virtual o espacio web o combinacin de ambos. Otro medio de obtencin es contratando algn servicio de una empresa no dependiente de la conexin a internet, las cuales ofrecen segn las capacidades de sus servidores o de su espacio. Casi siempre a la par, entregan servicios aadidos, como la ejecucin de tareas automticas o cuentas de correo electrnico gratuitas. Normalmente las transacciones son electrnicas, por tarjeta de crdito o por sistemas de pagos como PayPal.
79
Servicios gratuitos. Este tipo de servicio viene dado por la base de ser gratuito, y sin costo alguno al suscriptor. Sin embargo, quienes usan este servicio, por lo general son pginas de bajos recursos de mantencin o aquellas que los dueos no poseen suficiente dinero para ser mantenida. Como medio de financiamiento, el servidor coloca avisos de publicidad de Adsense u otras empresas, haciendo que la pgina se llene de publicidad en algn punto. Otra limitacin de estas ofertas es que tiene un espacio limitado y no se puede usar como almacn de datos, ni pueden alojar pginas subversivas o de contenido adulto o no permitido. De todas maneras, existe una amplia oferta de alojamientos gratuitos con caractersticas muy diferentes y que pueden satisfacer las necesidades de programadores que desean un lugar donde hacer pruebas o que mantienen una web con un nmero no muy elevado de visitas.
De acuerdo a la plataforma del servidor web, podramos decir que se tienen: Hosting Linux: manejan pginas PHP y bases de datos MySQL/Postgree. Por lo general son ms econmicas. Hosting Windows: pginas ASP, ASP.NET y bases de datos Access y SQL Server.
b. Dominio
Un dominio de Internet es una red de identificacin asociada a un grupo de dispositivos o equipos conectados a la red internet. El propsito principal de los nombres de dominio en internet y del sistema de nombres de dominio (DNS), es traducir las direcciones IP de cada modo activo en la red, a trminos memorizables y fciles de encontrar. Esta abstraccin hace posible que cualquier servicio (de red) pueda moverse de un lugar geogrfico a otro en la red internet, aun cuando el cambio implique que tendr una direccin IP diferente. Sin la ayuda del sistema de nombres de dominio, los usuarios de internet tendran que acceder a cada servicio web utilizando la direccin IP del nodo (Ej. Sera necesario utilizar http://74.125.45.100 en vez de http://www.google.com). El siguiente ejemplo ilustra la diferencia entre una URL (Uniform Resource Locator) y un nombre de dominio: URL : Nombre de dominio : Nombre de dominio registrado: http://www.example.net/index.html www.example.net example.net
Ejemplos de dominios: .es : para servicios de Espaa. .eu : para servicios de Europa. .mx : para servicios de Mxico. .pe : para pginas de Per .com : comerciales .org : organizaciones .net : redes o grupos de usuarios. Ventajas: Su dominio acta como Vitrina y es la direccin donde las personas de todo el mundo pueden conocer sus servicios o adquirir sus productos.
80
Le ayuda a crear y promover la identidad de su empresa en Internet, posicionando su marca ante una audiencia de millones de clientes potenciales. Establece un punto de contacto, un lugar donde los clientes pueden obtener informacin sobre sus productos y servicios las 24 horas del da. Da prestigio a su empresa frente a los competidores que todava no gozan de presencia en Internet o que utilizan alojamientos gratuitos. Como herramienta de marketing y estrategia comercial, equipara a las pequeas y grandes empresas.
c. Publicar un sitio web en un servidor gratuito.

Ya que contratar un hosting dedicado requiere realizar un pago, usaremos uno de los tantos servicios gratuitos que son ofrecidos en la web. Nota: El Instituto Superior SISE no tiene ningn tipo de contacto comercial con el servicio que ser descrito a continuacin, su utilizacin ser solamente con fines didcticos. Para este ejemplo nosotros utilizaremos el servicio de MiArroba. Registro de la Cuenta. Ingresar a http://miarroba.com
Ingresar al enlace para crear un nuevo usuario.
Rellenar los datos del formulario de registro.
81
xxxxxxxxx xxxxxxxxx
Ingresar a la cuenta de correo con la que se registro.
xxxxxxxxx
xxxxxxxxx
miclave 6666
Introducir los datos solicitados y el cdigo de activacin en la pgina de arroba.com
cyberfox2010
6666
82
Se pedir que ingrese los datos de acceso.
Observar que ya est conectado y puede utilizar los servicios brindados por arroba.com, entre ellos el de Espacio web. Configurar la creacin del Espacio Web Activar el enlace Espacio Web, luego Nuevo espacio.
Llenar el formulario en donde detalle la informacin del sitio web: Nombre del Sitio Web (1), Ttulo (2), Descripcin del Sitio (3), Categora (4), Zona Horaria (5), contrasea (6), Aceptar las condiciones de uso (7) y verificar el cdigo de seguridad (8).
83
1 2
4 5 6
7 8
Luego, se debe mostrar una pgina confirmando la creacin del espacio web. Ingresar al enlace mostrado.
1234567
1234567
84
A continuacin podr observar los servicios ofrecidos, active INFORMACION y tome nota de los datos del cliente FTP.
De clic en Desconectar para cerrar su sesin.
Publicacin. Copiar la carpeta SISECURSOS a su Escritorio, y configure un Sitio Local del mismo nombre apuntando a esta carpeta, en modo Avanzado, primero los Datos locales y luego los Datos remotos.
85
Una vez que haya aceptado, observar la ventana Archivos.

Obtener (descargar) Actualizar Conectar/desconectar Ver sitios locales y remotos Colocar (upload) Sincronizar
86
Desde esta ventana puede elegir una pgina (ejm: index.html), varios de ellos o todo el sitio completo, y luego hacer un upload (Colocar) hacia el servidor remoto. Tambin puede activar Ver sitios locales y remotos y se muestra una ventana de donde podr cargar o descargar los archivos.
87
Objetivos
Instalacin de un Servidor Web Local
Instalacin de un Servidor Web Apache. Configuracin de un Sitio Web Dinmico. Concepto de Pginas Dinmicas. Demos de Sitios PHP y ASP/ASP.NET Elementos del formulario. Creacin de formularios. Envo de datos entre pginas: Mtodos GET y POST
Formularios
88
Instalacin de un Servidor Web Local

a. Instalacin de un Servidor Web Apache.
La instalacin del servidor web es uno de los pasos ms importantes, ya que si no se realiza, no se podrn hacer las pruebas al disear las pginas dinmicas. Ejecutar el instalador del AppServ.
Seguir el procedimiento de instalacin.
89
Definir: Server Name: localhost.com Administrator email: admin@localhost.com
90
Definir una contrasea para el Administrador de MySQL (estamos estableciendo de manera estndar el password 123).
Completar el proceso de instalacin.
Abrir el navegador y cargar la pgina de inicio.
91
b. Configuracin de un Sitio Web Dinmico

Realizar la configuracin bsica estableciendo el nombre del sitio (1) y la ubicacin de los archivos (establecer la ruta en C:\AppServ\www\CINEPLANET) (2).
Seleccionar SERVIDORES, y agregar (+) un servidor de prueba, para poder visualizar los documentos creados.
92
Establecer el nombre del servidor, el tipo de conexin (LOCAL/RED), la ubicacin de la carpeta en donde se almacenan los archivos y la URL de prueba.
La muestra final de la ventana debe ser similar a la captura:
Luego de GUARDAR los cambios, procedemos a elaborar las pginas dinmicas.
c. Concepto de Pginas Dinmicas.

Una aplicacin Web es un sitio Web que contiene pginas con contenido sin determinar, parcialmente o en su totalidad. El contenido final de una pgina se determina slo cuando el usuario solicita una pgina del servidor Web. Dado que el contenido final de la pgina vara de una peticin a otra en funcin de las acciones del visitante, este tipo de pgina se denomina pgina dinmica. Las aplicaciones Web pueden tener numerosos usos tanto para los visitantes como para los ingenieros de desarrollo, entre otros:
93
Permitir a los usuarios localizar informacin de forma rpida y sencilla en un sitio Web en el que se almacena gran cantidad de contenido. Este tipo de aplicacin Web ofrece a los visitantes la posibilidad de buscar contenido, organizarlo y navegar por l de la manera que estimen oportuna. Algunos ejemplos son: las intranets de las empresas, Microsoft MSDN (www.msdn.microsoft.com) y Amazon.com (www.amazon.com). Recoger, guardar y analizar datos suministrados por los visitantes de los sitios. En el pasado, los datos introducidos en los formularios HTML se enviaban como mensajes de correo electrnico a los empleados o a aplicaciones CGI para su procesamiento. Una aplicacin Web permite guardar datos de formularios directamente en una base de datos, adems de extraer datos y crear informes basados en la Web para su anlisis. Ejemplos de ello son las pginas de los bancos en lnea, las pginas de tiendas en lnea, las encuestas y los formularios con datos suministrados por el usuario. Actualizar sitios Web cuyo contenido cambia constantemente. Una aplicacin Web evita al diseador Web tener que actualizar continuamente el cdigo HTML del sitio. Los proveedores de contenido, como los editores de noticias, proporcionan el contenido a la aplicacin Web y sta actualiza el sitio automticamente. Entre los ejemplos figuran Economist (www.economist.com) y CNN (www.cnn.com).
Formularios
Cuando un visitante introduce informacin en un formulario Web visualizado en un navegador Web y hace clic en el botn de envo, la informacin se transfiere al servidor, donde ser procesada por una aplicacin o un script del lado del servidor. El servidor responde devolviendo la informacin procesada al usuario (o cliente) o bien realizando alguna otra accin basada en el contenido del formulario. Puede utilizar Dreamweaver para crear formularios que enven datos a la mayora de servidores de aplicaciones, entre ellos PHP, ASP y ColdFusion. Si utiliza ColdFusion, tambin podr aadir a los formularios controles de formulario especficos de ColdFusion. Los formularios pueden tener campos de texto, campos de contrasea, botones de opciones, casillas de verificacin, mens emergentes, botones en los que puede hacerse clic y otros objetos de formulario. Con Dreamweaver tambin se puede escribir cdigo que valide la informacin proporcionada por un visitante. Por ejemplo, se puede comprobar que una direccin de correo electrnico especificada por un usuario contenga un smbolo @ o que un campo de texto obligatorio contenga un valor.
a. Elementos del formulario.

En Dreamweaver, los tipos de entrada de los formularios se denominan objetos de formulario. Los objetos de formulario son mecanismos que permiten a los usuarios introducir datos. Puede aadir a un formulario los siguientes objetos de formulario: Campos de texto Aceptan cualquier valor alfanumrico. El texto se puede visualizar como una sola lnea, como varias lneas y como un campo de contrasea en el que el texto introducido se sustituye por asteriscos o vietas para ocultar el texto a otras personas que puedan estar mirndolo.
94
Nota: Las contraseas y el resto de datos que se envan a un servidor mediante campos de contrasea no estn cifrados. Los datos transferidos pueden ser interceptados y ledos como texto alfanumrico. Por esta razn, debe facilitar siempre el cifrado de los datos que desea que permanezcan seguros.
Campos ocultos Permiten almacenar informacin introducida por el usuario, como un nombre, una direccin de correo electrnico o una preferencia de visualizacin, y utilizarla la prxima vez que el usuario visite el sitio. Botones Realizan acciones cuando se hace clic en ellos. Puede aadir una etiqueta o un nombre personalizado a un botn, o bien usar una de las etiquetas predefinidas, Enviar o Restablecer. Utilice un botn para enviar datos de formulario al servidor o para restablecer el formulario. Tambin se pueden asignar otras tareas de proceso definidas en un script. Por ejemplo, el botn puede calcular el coste total de elementos seleccionados, basndose en los valores asignados. Casillas de verificacin Admiten mltiples respuestas en un solo grupo de opciones. Un usuario puede seleccionar tantas acciones como sean necesarias. El siguiente ejemplo muestra tres casillas de verificacin seleccionadas: Surfing, Mountain Biking y Rafting.
Botones de opcin Representan opciones que se excluyen mutuamente. Cuando se selecciona un botn de un grupo de botones de opcin, se desactivan todos los dems botones del grupo (un grupo est formado por dos o ms botones que comparten el mismo nombre). En el ejemplo anterior, Rafting es la opcin seleccionada en este momento. Si el usuario hace clic en Surfing, el botn Rafting se deselecciona automticamente.
95
Lista/men Muestra valores de opciones en una lista de desplazamiento que permite a los usuarios seleccionar varias opciones. La opcin Lista muestra los valores de las opciones en un men que permite a los usuarios seleccionar una sola opcin. Utilice los mens si dispone de una cantidad de espacio limitada pero necesita mostrar muchos elementos, o bien para controlar valores devueltos al servidor. A diferencia de los campos de texto, en los que el usuario puede escribir todo lo que desea, incluso datos no vlidos, usted establece los valores exactos que debe devolver un men.
Nota: Un men emergente de un formulario HTML no es igual que un men emergente grfico. Para informacin sobre cmo crear, editar, mostrar y ocultar un men emergente grfico, consulte el vnculo situado al final de esta seccin.
Mens de salto Listas de navegacin o mens emergentes que permiten insertar un men en el que cada opcin se vincula a un documento o archivo. Campos de archivo Permiten al usuario examinar los archivos de su ordenador y cargarlos como datos de un formulario. Campos de imagen Permiten insertar una imagen en un formulario. Utilice los campos de imagen para crear botones grficos, como Enviar o Restablecer. El uso de una imagen para llevar a cabo tareas distintas del envo de datos requiere adjuntar un comportamiento al objeto de formulario.
d. Creacin de formularios.
Abra una pgina y site el punto de insercin donde desee que aparezca el formulario. Seleccione Insertar > Formulario o seleccione la categora Formularios en el panel Insertar y haga clic en el icono Formulario. En la vista Diseo, los formularios se indican con un contorno de lnea de puntos rojos. Si no ve dicho contorno, seleccione Ver > Ayudas visuales > Elementos invisibles. Establezca las propiedades del formulario HTML en el inspector de propiedades (Ventana > Propiedades): o En la ventana del documento, haga clic en el contorno del formulario para seleccionarlo.
96
En el cuadro Nombre del formulario, escriba un nombre exclusivo para identificar el formulario.
La asignacin de nombre al formulario permite hacer referencia a l o controlarlo con un lenguaje de scripts como JavaScript o VBScript. Si no asigna un nombre al formulario, Dreamweaver genera uno mediante la sintaxis formn e incrementa el valor de n para cada uno de los formularios que se aadan a la pgina. En el cuadro Accin, especifique la pgina o el script que va a procesar los datos del formulario introduciendo la ruta o haciendo clic en el icono de la carpeta para desplazarse hasta la pgina o el script correspondiente. Ejemplo: processorder.php.
e. Envo de datos entre pginas: Mtodos GET y POST.

En el men emergente Mtodo, seleccione el mtodo mediante el cual se transmitirn los datos del formulario al servidor. Defina cualquiera de las opciones siguientes: Predeterminado Utiliza el valor predeterminado del navegador para enviar los datos del formulario al servidor. Normalmente, el valor predeterminado es el mtodo GET. GET Aade el valor al URL que solicita la pgina. POST Incrusta los datos del formulario en la peticin HTTP. No utilice el mtodo GET para enviar formularios largos. Los URL tienen una limitacin de 8.192 caracteres. Si el tamao de los datos enviados es demasiado grande, los datos se truncarn, lo que puede producir resultados de procesamiento inesperado o errneos. Las pginas dinmicas generadas por parmetros proporcionados por el mtodo GET pueden guardarse como marcadores porque todos los valores necesarios para regenerar la pgina estn incluidos en el URL que se muestra en el cuadro Direccin del navegador. En cambio, las pginas dinmicas generadas por parmetros proporcionados por el mtodo POST no se pueden guardar como marcadores. Si rene contraseas y nombres de usuario confidenciales, nmeros de tarjetas de crdito u otros datos confidenciales, el mtodo POST puede parecer ms seguro que el mtodo GET. Sin embargo, la informacin enviada por el mtodo POST no se cifra y un hacker puede recuperarla fcilmente. Para garantizar la seguridad, utilice una conexin segura con un servidor seguro.
97
Ejemplo. 1. Definir un sitio dinmico de nombre FORMULARIOS, ubicado en C:\AppServ\www, que soporte tecnologa PHP. 2. Crear una pgina PHP de nombre promedios.php, con el siguiente diseo:
3. Los nombres de los campos de texto son txtalumno, txtep y txtef. 4. Establecer la propiedad ACCION y METODO al formulario.
5. Crear una pgina PHP de nombre resultados.php. Active la vista cdigo y escriba el siguiente script que permita mostrar el promedio de las notas ingresadas.
98
Objetivos
Conexin con Bases de Datos - Mantenimiento. Copias de Seguridad. Estableciendo una conexin a la Base de Datos desde Adobe Dreamweaver CS5. Listados simples y complejos usando Juegos de Registros. Repetir regin.
99
Conexin con Bases de Datos

a. Mantenimiento. Copias de Seguridad.
MySQL es un sistema de administracin de bases de datos relacionales que proporciona a los usuarios una potente solucin de bases de datos SQL (Structured Query Language). Es rpida, robusta y fcil de utilizar. Una de las grandes posibilidades de PHP es la posibilidad de manejar bases de datos alojadas en servidores remotos. Las bases de datos contienen tablas, las tablas contienen registros, los registros estn formados por campos de distintos tipos y dentro de los campos se almacenan datos que pueden aadirse, modificarse, consultarse, actualizarse y borrarse, adems de ordenarse de distintas formas.
CAMPOS (columnas)
REGISTROS (filas)
Creacin de Bases de Datos y Tablas.

Abrir el navegador de Internet e ingresar a la URL: http:// localhost, luego ir al vnculo phpMyAdmin Database Manager.
Ingrese los datos Usuario: root y Contrasea: la que ingreso al momento de instalar.
100
Crear la base de datos CINEPLANET. Ingresar el nombre (1) y luego clic a CREAR.
Crear la tabla GENEROS.
Definir la estructura de la tabla GENEROS.
Una vez creada la tabla, se muestra el cdigo SQL generado.
101
Para agregar datos a la tabla, d clic al enlace Insertar.
Para ver los datos a la tabla, d clic al enlace Examinar.
El cono ELIMINAR.
permite EDITAR el registro seleccionado, mientras que
permite
Para crear otra tabla, d clic sobre el enlace de la izquierda para seleccionar la base de datos, y luego crear la tabla como lo hizo con la tabla Generos.
102
Crear la tabla TIPOS con la siguiente estructura y datos: NOMBRE DEL CAMPO tipoID Nombre Imagen TIPO DE DATO Int Varchar Varchar LONGITUD PREDETERMINADO EXTRA Auto_increment 50 50 no_foto.jpg
tipoID 1 2 3
Nombre DVD ORIGINAL DVD COPIA VHS
Imagen dvd_original.jpg dvd_copia.jpg no_foto.jpg
103
Exportar e importar Scripts.

Una vez creada la base de datos se puede crear el SCRIPT que permita llevarlo a otro equipo, para lo cual debe activar la base de datos y hacer clic sobre Exportar.
En la ventana siguiente, seleccionar la tabla o tablas que sern exportadas en el script (1), activar las opciones de los INSERTS (2) y Enviar (3) para generar un archivo.
Gurdelo en alguna ubicacin, a partir de donde lo pueda encontrar para restaurar la base de datos. Retornar a la base de datos y eliminar.
Confirme el mensaje que se muestra.
104
Crear nuevamente la base de datos CINEPLANET, y luego elija IMPORTAR.
En EXAMINAR, seleccionar el archivo cineplanet_real.sql (1).
105
Estableciendo una conexin a la Base de Datos desde Adobe Dreamweaver CS5.

Ahora que ya est configurado el servidor de pruebas en donde pueda ejecutarse el cdigo que introduzcamos en nuestras pginas y permita la creacin de bases de datos para almacenar informacin pasaremos a crear nuestras propias pginas dinmicas de acceso a datos. Crear una nueva pgina PHP y guardar como lista_generos.php, luego ir al Men Ventana > Base de datos (o pulsar CTRL+SHIFT+F10).
Definir el nombre de la conexin y los datos de configuracin de la base de datos.
En Seleccionar podr elegir la base de datos CINEPLANET.
106
Se puede observar la estructura de la conexin.
a. Listados simples y complejos usando Juegos de Registros.

Una vez creada la conexin podremos insertar en cualquier pgina informacin almacenada en la base de datos, slo tenemos que decidir qu datos vamos a mostrar. Crearemos un juego de registros (RecordSet) donde almacenaremos los datos que se van a mostrar. Ir a la barra Insertar > Datos > Juego de registros.
Definir el nombre del recordset, el nombre de la conexin y las columnas que se van a mostrar. Observar que se ha seleccionado Todo para definir todas las columnas de la tabla.
107
Crear una nueva pgina PHP de nombre lista_actores.php, y definir un juego de registros que muestre las columnas ActorID y Nombres de la tabla Actores.
Mostrar datos dinmicos.

Una vez creado el Juego de Registros, procedemos a mostrar los datos en la pgina. Abrir la pgina lista_generos.php e ir a la barra Insertar > Datos > Texto dinmico.
108
Se mostrar el campo.
b. Repetir regin.
Al mostrarse los resultados en el navegador, solo se muestra un solo dato. El siguiente paso sera el de repetirlo para observar todos los datos. Seleccionar la zona que desea repetir, y luego ir a la barra Insertar > Datos > Repetir regin.
En la ventana siguiente, puede establecer los valores la repeticin de los datos.
Se debe mostrar algo similar a la siguiente imagen.
109
Lo anterior tambin pudo haber sido creado si hubiramos usado una Tabla Dinmica. Abrir la pgina lista_actores.php, luego ir a la Barra Insertar > Datos > Tabla dinmica.
Aplicndole formato a la tabla creada quedar de la siguiente manera:
Previsualizar en el navegador.
110
Objetivos
Manejo avanzado de datos I. - Filtrado avanzado de datos. Imgenes dinmicas. Listas vinculadas a datos. Paginacin de registros. Asistentes para insercin, edicin y borrado de registros.
111
Manejo avanzado de datos I.

a. Filtrado avanzado de datos.
Los juegos de registros creados pueden ser filtrados de acuerdo a determinados criterios, como valores introducidos por el usuario, parmetros de URL, variables de sesin, etc. Copiar a la carpeta Apache\www la carpeta AMBROSIA. Definir un sitio, de la misma forma que lo hizo con cineplanet. Abrir la imagen ambrosia.png desde Fireworks, y exportarla a PHP con imgenes hacia la carpeta. Definir el nombre de la pgina como index. Crear la conexin a la base de datos AMBROSIA de MySQL (restaurar a partir del script que se halla dentro de la carpeta). Crear un juego de registros de nombre rsCategorias, que devuelva todos los datos de la tabla Categorias.
Crear otro juego de registros (rsNovedades).
La instruccin SQL es una consulta que permite mostrar el ISBN, Titulo y Portada de la tabla LIBROS, que cumplan con la condicin de que el COD de la tabla novedades sea igual al del ISBN de la tabla Libros.
112
Insertar una divisin, y dentro de ella una tabla de 2 columnas y 2 filas.
b. Imgenes dinmicas.
En la tabla inserte una imagen cualquiera de un libro y una lista con los tems Impreso y Digital. Modificar el cdigo de la imagen insertando el campo Portada.
Ahora la informacin del archivo grfico se obtiene del nombre almacenado en la tabla. Acabamos de crear una Imagen dinmica.
Seleccionar la divisin (lo puede hacer desde el selector de etiquetas) y aplicar repetir la regin para rsNovedades cada 3 registros.
113
Al Previsualizar en el navegador se deber mostrar:
114
En la categora que se muestra a la izquierda, estableceremos un vnculo hacia la pgina listado.php, y enviar un parmetro URL que se define por el campo CategoriaID.
listado.php?categoria=<?php echo $row_rsCategorias['CategoriaID']; ?>
Pulsar CTRL+SHIFT+S o ir al Men Archivo > Guardar como, y guardar la pgina con el nombre de listado.php, y eliminar el juego de registros rsNovedades y crear otro de nombre rsListado con los siguientes valores:
Aqu es donde aplicamos el filtrado de los datos que se van a mostrar, de acuerdo al parmetro que ser enviado a travs de la URL, de nombre categora.
115
c. Listas vinculadas a datos.

Primero crearemos una tabla Distritos con la siguiente estructura:
Y vamos a insertar algunos datos de prueba
En una nueva pgina PHP, insertamos un formulario y dentro de ella, una tabla que contenga una Lista/Men.
116
Crear un juego de registros para la tabla Distritos.
Hacer clic sobre el botn DINAMICO, en el Panel Propiedades de la lista.
117
En Valores se establece el nombre de la columna que identificara a cada elemento seleccionado de la lista, mientras que en Etiquetas se establece el nombre mostrado en cada elemento del listado.
d. Paginacin de registros.
Abrir la pgina listado.php. Al establecer el comportamiento Repetir regin, se haba configurado para que se muestre en bloques de 3 registros. Para habilitar la navegacin por los otros registros usaremos los contadores de pginas. Insertar una divisin con un estilo definido en Fuente: Verdana, Tamao:12, Color: Amarillo, Fondo: Azul.
Seleccionar el texto que aparece dentro y luego ir a la Barra Insertar > Datos.
118
rsListado
Al lado derecho insertaremos el Estado de navegacin de juego de registros.
rsListado
Quedara algo como esto.
e. Asistentes para insercin, edicin y borrado de registros.

Abrir la pgina listado.php y hacer ciertas modificaciones en el diseo.
Zona Central
119
Guardar con el nombre de mant_categorias.php. En la Zona Central insertar dos divisiones.
1 3
En la primera divisin (1) escribir el texto MANTENIMIENTO: CATEGORIAS. En la segunda divisin (2) insertaremos los siguientes elementos: (3) Un formulario que contenga un botn de tipo enviar con el valor Agregar categora. Definir en las propiedades Accin: mant_categorias_nuevo.php y Mtodo: Post. (4) Una tabla de 4 columnas y 2 filas. Crear un Juego de Registros para mostrar todos los datos de la tabla Categoras, luego insertar los campos a las celdas mostradas. Insertar las imgenes en forma de lpiz (Alt: Modificar) y en forma de aspa (Alt: Eliminar). Seleccionar la segunda fila y adicionar el comportamiento Repetir regin.
Al Previsualizar se debe observar.
Establecer los vnculos en las imgenes.
120
mant_categorias_editar.php?CategoriaID=<?php echo $row_rscategorias['CategoriaID']; ?>
mant_categorias_borrar.php?CategoriaID=<?php echo $row_rscategorias['CategoriaID']; ?>
Disear la pgina mant_categorias_nuevo.php, a partir de la pgina anterior, dejar la conexin creada. Borrar el contenido de la segunda divisin, y ubicar el cursor en esa zona, luego ir a la Barra Insertar > Datos > Asistente de formulario de insercin de registros
Aadir un botn con las propiedades Accin: Ninguno, y Valor: Cancelar. En la vista cdigo aadir una rutina JavaScript que permita volver a la pgina anterior.
<input type=button name=button value=Cancelar onclick=history.back(); />
Se crea un formulario listo para agregar nuevos datos a la tabla Categoras.
121
Disear la pgina mant_categorias_editar.php, a partir de la pgina anterior, dejar la conexin creada. Borrar el contenido de la segunda divisin, y ubicar el cursor en esa zona, luego ir a la Barra Insertar > Datos > Asistente de formulario de actualizacin de registros
Se crea un formulario listo para modificar el dato seleccionado en la pgina mant_categorias.php.
122
Crear una nueva pgina PHP de nombre mant_categorias_borrar.php. Crear la conexin a la base de datos, y luego ir a la Barra Insertar > Datos > Eliminar registro.
Para poder probar esta accin, se aconseja que primero agregue algunos datos adicionales, y luego los elimine. Para mejorar la apariencia de esta accin, vamos a insertar una rutina JavaScript en la imagen Eliminar para que muestre un mensaje de confirmacin.
<a href="mant_categorias_borrar.php?CategoriaID=<?php echo $row_rscategorias['CategoriaID']; ?>" onclick="return confirm('Est seguro que desea eliminar el registro?');"> <img src="img/btnEliminar.jpg" alt="Eliminar" width="20" height="20" border="0" /> </a>
123
Objetivos
Manejo avanzado de datos II. Creacin de Formularios de Acceso. Restriccin de Pginas. Desconectando la sesin de usuarios.
124
Manejo avanzado de datos II.

a. Creacin de Formularios de Acceso.
Para restringir el acceso a ciertas pginas, primero disearemos una pgina de error, llamada error.php.
Otra pgina de nombre login.php con un formulario que contenga los elementos para ingresar el nombre de usuario y password.
125
Ir a la Barra Insertar > Datos > Conectar usuario
Previsualizar y probar ingresando datos errneos, y datos correctos.
b. Restriccin de Pginas.
El siguiente paso de seguridad, es evitar que se ingrese a una pgina restringida, si esta es llamada directamente desde la barra de direccin del navegador. Para evitar esto, primero abrir la pgina a restringir (mant_categorias.php), luego ir a la Barra Insertar > Datos > Restringir acceso a pgina
126
Puede repetir este procedimiento en todas las pginas que para ser mostradas deban ingresar con un nombre de usuario y password vlidos.
c. Desconectando la sesin de usuarios.

Para terminar, una vez ingresada a una pgina segura, esta debe mostrar un enlace para cerrar la sesin actual. Abra la pgina mant_categorias.php, e insertar un texto Cerrar sesin.
Seleccionar el texto, y luego ir a la Barra Insertar > Datos > Desconectar usuario.
d. Previsualizar en el navegador y comprobar el funcionamiento.
127

MANUAL DREAMWEAVER CS5 - v.2012

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

MANUAL DREAMWEAVER CS5 - v.2012

Diunggah oleh

Hak Cipta:

Format Tersedia

ndice

ADOBE DREAMWEAVER CS 5.5

ADOBE DREAMWEAVER CS 5.5

ADOBE DREAMWEAVER CS 5.5

Qu es Adobe Dreamweaver CS5.5 ?

ADOBE DREAMWEAVER CS 5.5

Aplicaciones nativas Android e iOS con PhoneGap

Integracin con BrowserLab

ADOBE DREAMWEAVER CS 5.5

ADOBE DREAMWEAVER CS 5.5

ADOBE DREAMWEAVER CS 5.5

Barra de Men. Barra Documento Men de Paneles Documento Panel de Propiedades

Configuracin de un Sitio Local

ADOBE DREAMWEAVER CS 5.5

Ejercicio 1: Creando el Sitio Web Instituto.

ADOBE DREAMWEAVER CS 5.5

Si se muestra la ventana de Administracin, de clic a Listo.

Observe la Ventana Archivos (si esta oculta pulse F8).

Nombre del Sitio

Tipo de Vista (Local o Remota)

ADOBE DREAMWEAVER CS 5.5

Creacin de Documentos HTML.

Ejercicio 2: Creando una pgina web HTML.

ADOBE DREAMWEAVER CS 5.5

Elegir el color Amarillo

ADOBE DREAMWEAVER CS 5.5

Debe quedar de la siguiente manera:

ADOBE DREAMWEAVER CS 5.5

Establecer el navegador predeterminado

ADOBE DREAMWEAVER CS 5.5

Formateando el Diseo de la Pgina

Vista previa en IE 9.0

Vista previa en Firefox 5.0

Aplicando propiedades al documento

ADOBE DREAMWEAVER CS 5.5

Al aceptar las modificaciones, se podr observar algo como esto:

ADOBE DREAMWEAVER CS 5.5

Si activa la vista dividir o cdigo, podr notar la creacin de estilos.

Formateando textos en el documento

Modificando las propiedades HTML

ADOBE DREAMWEAVER CS 5.5

Ejercicio 3: Modificando las propiedades HTML.

Guardar con el nombre de computacion.html

Modificando las Listas.

ADOBE DREAMWEAVER CS 5.5

Modificando las propiedades CSS

ADOBE DREAMWEAVER CS 5.5

Ejercicio 4: Modificando las propiedades CSS.

Seleccionar (1), y Editar regla.

ADOBE DREAMWEAVER CS 5.5

Luego de Aceptar, podr modificar cualquiera de los estilos ya creados.

ADOBE DREAMWEAVER CS 5.5

Ejercicio 5: Creando una hoja de estilos.

ADOBE DREAMWEAVER CS 5.5

ADOBE DREAMWEAVER CS 5.5

Se genera la etiqueta HTML <link..> que puede observar en el cdigo.

ADOBE DREAMWEAVER CS 5.5

(1) Seleccionar el texto Pagina 1

En la ventana Definicin de regla, establecer los siguientes valores:

ADOBE DREAMWEAVER CS 5.5

ADOBE DREAMWEAVER CS 5.5

En la pagina02.html, adjuntar la hoja de estilos: estilos.css, y aplicar los estilos creados.

ADOBE DREAMWEAVER CS 5.5