Dreamweaver 8

Universidad Interamericana de Puerto Rico Recinto de Barranquitas Prof. Roberto Vzquez

Listado de materiales
Disco USB porttil o disco para salvaguardar su informacin. Tema de la pgina. Texto del contenido de la pgina. Imgenes para la misma.

Contenido
Que es Dreamweaver? Que es HTML? Para que sirve? Que es WYSIWYG? Cmo comienzo? Ejemplo de Flujograma Interfase (Bsica) de Dreamweaver
Editor de texto (HTML- intro. bsico) Editor visual (cmo lo hago por aqu?) Links, botones, texto interactivo y otras chuleras Frames y su funcin en la pgina

Que es Dreamweaver?
En esencia Dreamweaver es un editor grfico de HTML que permite al usuario ver y editar pginas de Web de tipo WYSIWYG. Fue creado por la compaa Macromedia, los creadores de productos como Flash, Director y otros. Recientemente Adobe, los creadores de Photoshop adquirieron Macromedia.

Qu es HTML?
HTML son las siglas para HyperText Markup Language. En computacin, hipertexto es un paradigma en la interfaz del usuario cuyo fin es el de presentar documentos que puedan, segn la definicin de Ted Nelson, "bifurcarse o ejecutarse cuando sea solicitado" (branch or perform on request).

Qu es HTML?
Suena increblemente aburrido, no? La pregunta clave es De que me sirve toda esa informacin? El HTML es el lenguaje utilizado para hacer lo que todos conocemos como pginas de Internet. (Entre otras cosas)

Para qu sirve?
Dreamweaver nos permite generar HTML de manera Fcil y eficiente. Crear pginas de Web. Editar texto, imgenes, layout en pginas de Internet. Cuando menciono Internet me refiero a solo una de sus capacidades el programa tiene otras aplicaciones posibles.

Qu es WYSIWYG?
WYSIWYG son siglas que representan What you see is what you get Esto aplicado a el editor como Dreamweaver significa que el trabajo que se haga en el programa se ver en el browser como se ve en el editor.

Cmo comienzo?
Instalar Dreamweaver. Instalar Photoshop Elements. (o un faxmil razonable) Tener una idea de que quiero hacer.
Tema de la pgina Contenido textual Contenido visual (imgenes) Contenido avanzado (video, sonido, flash) Mapa de navegacin o flujo-grama

Cmo comienzo? (preguntas)

Tema de la pgina =
De que quiero que trate mi pgina? Cul va a ser el tema principal? Qu vertientes tiene y si las quiero incluir?

Contenido textual =
Qu quiero decir en mi pgina? Cmo quiero decirlo? Tener el contenido ya escrito y corregido de ser posible ANTES de colocarlo en la pgina.

Cmo comienzo? (preguntas)

Contenido visual (imgenes)=
Imgenes que sern estticas y complementan el contenido. Qu formato de imagen debo utilizar?
Gif Formato de compresin de imgenes.
Utiliza 256 colores o menos y puede hacer transparencia. Este formato es muy utilizado en diseo de pginas por sus capacidades. (transparencia, animacin sencilla)

Jpg Formato de compresin de imgenes

Utiliza miles de colores Tiende a crear deformaciones leves pero es el mejor para fotos en el Web.

Existen otros pero estos ya mencionados son los comunes.

Cmo comienzo? (preguntas)

Contenido avanzado (sonido, video, flash)=
Cul de los formatos de sonido debo utilizar?
Los formatos comn mente utilizados son
WAV, MIDI, MPG, MP3 Wav se utiliza para sonidos sencillos ya que de ser muy elaborado tiende a ocupar mucho espacio. Midi se utilizaba para composiciones musicales que tienen la posibilidad de ser editadas e importada en equipos de msica como pianos electrnicos y otros. Estos formatos han sido casi sustituidos por el MPG y MP3 ya que estos permiten mayor calidad de sonido sin ocupar mucho espacio.

Cmo comienzo? (preguntas)

Qu formato de video debo utiizar?
FLASH!!
Por qu tanto enfasis en Flash? Flash (SWF= Shock-Wave Flash) es un formato creado por macromedia que se ha vuelto el estndar de los diseos interactivos en Web. Este formato permite hacer animaciones, incluir texto, video, sonido, msica, imgenes y dems sin ocupar el espacio que usualmente estos elementos ocuparan por separado. HAY pginas completamente hechas en flash o con muchos elementos de flash.(modalidad utilizada comnmente estos das)(No, no tengo acciones con macromedia.)

Otros formatos como Quicktime(Mov), Windows Video (WMV o AVI) son utilizados tambin y recientemente MPG, MPG4, DivX y otros se han unido a la interminable lista de fromatos.

Cmo comienzo? (preguntas)

Mapa de navegacin o flujograma=
Con que se come eso? Para que me sirve?
Un mapa de navegacin nos sirve de referencia para la creacin de la pgina, nos permite planificar de antemano como el usuario se mueve a travs de nuestra pagina.

Por qu hacer uno?

El hacer uno nos permite planificar nuestro trabajo y organizar el proceso de generar los elementos y las paginas. Nos permite llevar un record de cmo se debe ver la pagina y que seccin se conecta con que antes de comenzar, lo cual nos permite no perdernos si estamos siguiendo el mapa.

Ejemplos de Flujograma
Inicio Men Pag 1 Pag 2 Pag 2a Pag 3 Pag 3a Pag 3b Inicio
(portada)

Men Pagina1 pagina1a

Pag 1a Pag 1b

pagina1b Pagina2

pagina2a
De vuelta a inicio Pagina3 Programa comn Pgina bsica Pagina4

Ahora Si! Dreamweaver!

Bienvenidos al maravilloso mundo de Dreamweaver 8 Luego de haberlo instalado (demo) hace varios slides atrs debera correr el programa. Una ves corra el programa y este abra comenzaremos nuestra presentacin formal de la interfase para que se familiarice. Al correr el programa por primera ves el mismo le preguntar que rol usted tendr para efectos de esta presentacin escoja Designer.

Dreamweaver: Interfase
Barra de men

Dreamweaver: Interfase
Men utilitario( este men es cambiante)

Dreamweaver: Interfase
Documento que tiene activo

Dreamweaver: Interfase
Editor de texto HTML

Dreamweaver: Interfase
Layout de pantalla y funciones comunes del editor

Dreamweaver: Interfase
Otras funciones prcticas del editor de HTML

Ahora Si! Dreamweaver!

Interfase

Editor visual : Preview de cmo se ve la pgina.

Dreamweaver: Interfase

Propiedades del elemento activo aqu puede ver que cambios sencillos se le pueden hacer al elemento que tiene activo en el momento.

Dreamweaver: Interfase

Tabs de Funciones adicionales y controles de algunos elementos un tanto mas complejos.

Dreamweaver: Interfase
Nota: Algunos elementos de la interfase no se ven hasta que el objeto sea seleccionado o se activen los mismos segn sea necesario para el usuario.

Insert Table

Nota: Al colocar el cursor sobre algunos de los elementos le aparecer una notita informativa de que es el elemento que esta seleccionando. Esto puede ser muy til y ayuda a explorar la interfase sin necesidad de mucha explicacin.

Dreamweaver: Interfase

Los elementos de edicin de texto son estandarizados para dar un sentido de familiaridad sobretodo en elementos de edicin de texto que tienen un look similar al de Word.

Dreamweaver: Interfase
Dreamweaver automticamente genera el cdigo necesario al crear un documento nuevo. el que no tiene experiencia en HTML puede de manera sencilla hacer su pagina en el editor visual y el programa le generar el cdigo bsico necesario.

Le recomiendo que si no sabe lo que es no lo borre. El lenguaje HTML es bien preciso y estructurado un error puede causar elementos extraos y situaciones an mas extraas.

Dreamweaver: Interfase
El darle right-click al espacio vaco dentro del editor visual le aparecer un men de opciones esto le ser especialmente til mientras usted trabaja.

Si escoge propiedades ver las propiedades de su pagina y podr editarlas.

Dreamweaver: Interfase
Aqu puede manejar la apariencia y detalles de su pagina. Desde el color de fondo, el ttulo, el espacio del margen, el color del texto y otras muchas opciones. Tambin puede poner una imagen de fondo a su pgina

Dreamweaver: Interfase
Common (elementos mas comunes) Image table layer horizontal line Character (caracteres especiales) Line break Space Forms (formas) field checkbox button list box

Estos son los tools comunes que permiten al usuario crear mediante unos clics elementos en la pagina de web utilizando Dreamweaver. Note que estn divididos por clasificaciones.

Dreamweaver: Creemos algo!

Cree un documento nuevo (o utilice el que le genera Dreamweaver al comenzar) Tenga claro como va a organizar su pagina. En un USB o en algn disco haga los siguientes Folders.
Pgina (por favor pngale un titulo corto)
Imgenes Flash (opcional) Sonidos (Midi, Wav, MP3 esto tambin es opcional)

Dreamweaver: Creemos algo!

Salve el primer documento que hizo en dreamweaver como
index.html o index.htm

Por qu? los browsers de Internet identifican index.html como la pagina inicial de cualquier pagina de web de manera que cuando uno escribe www.ragevortex.com por ejemplo, el browser va a esa direccin y busca primero ese documento.

Dreamweaver: Creemos algo!

Este documento es el que estaremos trabajando como portada o pagina de inicio. Coloque en el editor visual una tabla y con los elementos de propiedades centralcela. Dentro de esta tabla estaremos trabajando su portada. Las tablas permiten ms control sobre el texto que tiene y las imgenes. Es uno de los elementos ms verstiles y utilizados de HTML.

Dreamweaver: Creemos algo!

Cmo hacer un link?
Para hacer un link debe tener un documento a donde apunta ese link. Creemos otro documento en blanco por ahora y llmelo pagina1.html o .htm si prefieren en mi caso mi ndice es siempre .html y mis paginas interiores son htm. Probablemente sean manas mas. Ok, ahora asumiendo que ese documento lo tenga salvado podemos continuar con el link.

Dreamweaver: Creemos algo!

Los links meramente hacen lo que la palabra infiere crean un vnculo entre el botn o texto que se esta utilizando como link y el documento o seccin del documento a la que se refiere. SI! Se pueden hacer Links para secciones dentro de un mismo documento esto es particularmente til en documentos extremadamente largos.

Dreamweaver: Creemos algo!

Aadir una imagen. Aadir texto se supone que tengan texto que aadir. Modificar propiedades del texto y de la pgina segn su preferencia. Recuerde que los buenos contrastes permiten mejor legibilidad.

Dreamweaver: Creemos algo!

Creacin de un botn regular.
Un botn regular no es mas nada que una imagen que parezca o se utilice como botn y tenga un link a algn lado.

Creacin de un botn con rollover.

Un rollover button es lo mismo pero con otra imagen de igual tamao y apariencia pero con colores diferentes para dar impresin de que el mismo es presionado o encendido.

Dreamweaver: Guas a seguir.

Guas a seguir cuando cree una pagina.
Trate de mantener el control y el orden
Cada cosa en su lugar. Cada lugar especificado. Cada documento limpio de cdigo innecesario. Revisin de links para que no se rompan. El tema de la pagina o seccin debe ser especfico y no desviarse. Colores contrastantes pero llamativos y placenteros. Es difcil leer si me ceg con colores exagerados.

Otros trminos
Frames (encuadres)
Utilizado comnmente este sistema permite cargar varias pginas a la vez en una sola pantaya para dar la impresin de ser una pgina compleja.

Iframes (frames inclusivos)

Cdigo especial que permite cargar una pgina dentro de una tabla. Este en especial es uno de los mtodos avanzados ms tiles.

Layers (capas)
Permiten hacer efectos, animaciones, cubrir objetos con otros y otras funciones interesantes. Son un tanto inestables e imprecisas.

Dreamweaver: huh?
Preguntas, dudas, sugerencias e incoherencias.

 Gracias por su atencin.