Taller de Dreamweaver 8

Dreamweaver 8 Taller Mofonguero Por: Juan C. Peña Martínez

Bienvenida

Bienvenidos al primer Taller de Dreamweaver 8 a darse por este servidor (Juan C. Peña)

Espero que les sea de provecho y que aprendamos mucho juntos.

¿Qué es mofonguero?

Mofonguero = Derivado de el proceso culinario de crear Mofongo. Aplica a la persona que tiene el poder y potestad de aplastar plátanos en el pilón. Implica una posición de poder o superioridad.

Antónimo = Mofongueado receptor de presión aplastante. Posición de derrota o incapacidad de poder hacer algo.

Listado de materiales

Disco USB portátil o disco para salvaguardar su información.

Tema de la página.

Texto del contenido de la página.

Imágenes para la misma.

Contenido

¿Que es Dreamweaver?

¿Que es HTML?

¿Para que sirve?

¿Que es WYSIWYG?

¿Cómo comienzo?

Ejemplo de Flujograma

Interfase (Básica) de Dreamweaver

Editor de texto (HTML- intro. básico)

Editor visual (¿cómo lo hago por aquí?)

Links, botones, texto interactivo y otras chulerías

Frames y su función en la página

¿Que es Dreamweaver?

En esencia Dreamweaver es un editor gráfico de HTML que permite al usuario ver y editar páginas de Web de tipo WYSIWYG.

Fue creado por la compañía 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 computación, hipertexto es un paradigma en la interfaz del usuario cuyo fin es el de presentar documentos que puedan, según la definición de Ted Nelson, "bifurcarse o ejecutarse cuando sea solicitado" ( branch or perform on request ).

¿Qué es HTML?

Suena increíblemente aburrido, ¿no?

La pregunta clave es…

¿De que me sirve toda esa información?

El HTML es el lenguaje utilizado para hacer lo que todos conocemos como páginas de Internet. (Entre otras cosas)

¿Para qué sirve?

Dreamweaver nos permite generar HTML de manera “Fácil” y eficiente.

Crear páginas de Web.

Editar texto, imágenes, layout en páginas 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.

¿Cómo comienzo?

Instalar Dreamweaver.

Instalar Photoshop Elements. (o un faxímil razonable)

Tener una idea de que quiero hacer.

Tema de la página

Contenido textual

Contenido visual (imágenes)

Contenido avanzado (video, sonido, flash)

Mapa de navegación o flujo-grama

¿Cómo comienzo? (preguntas)

Tema de la página =

¿De que quiero que trate mi página?

¿Cuál va a ser el tema principal?

¿Qué vertientes tiene y si las quiero incluir?

Contenido textual =

¿Qué quiero decir en mi página?

¿Cómo quiero decirlo?

Tener el contenido ya escrito y corregido de ser posible ANTES de colocarlo en la página.

Contenido visual (imágenes)=

Imágenes que serán estéticas y complementan el contenido.

¿Qué formato de imagen debo utilizar?

Gif – Formato de compresión de imágenes.

Utiliza 256 colores o menos y puede hacer transparencia.

Este formato es muy utilizado en diseño de páginas por sus capacidades. (transparencia, animación sencilla)

Jpg – Formato de compresión de imágenes

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.

Contenido avanzado (sonido, video, flash)=

¿Cuál de los formatos de sonido debo utilizar?

Los formatos común 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 música como pianos electrónicos 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.

¿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 estándar de los diseños interactivos en Web.

Este formato permite hacer animaciones, incluir texto, video, sonido, música, imágenes y demás sin ocupar el espacio que usualmente estos elementos ocuparían por separado.

HAY páginas completamente hechas en flash o con muchos elementos de flash.(modalidad utilizada comúnmente estos días)(No, no tengo acciones con macromedia.)

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

Mapa de navegación o flujograma=

¿Con que se come eso?

¿Para que me sirve?

Un mapa de navegación nos sirve de referencia para la creación de la página, nos permite planificar de antemano como el usuario se mueve a través 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 cómo se debe ver la pagina y que sección 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 3 Pag 1a Pag 1b Pag 2a Pag 3a Pag 3b De vuelta a inicio Inicio (portada) Menú Pagina1 pagina1a pagina1b Pagina2 pagina2a Pagina3 Pagina4 Programa común Página básica

¡Ahora Si! ¡Dreamweaver!

Bienvenidos al maravilloso mundo de Dreamweaver 8

Luego de haberlo instalado (demo) hace varios “slides” atrás debería correr el programa.

Una ves corra el programa y este abra comenzaremos nuestra presentación 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 presentación 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 prácticas del editor de HTML

¡Ahora Si! ¡Dreamweaver!

Interfase

Editor visual : “Preview” de cómo se ve la página.

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 según sea necesario para el usuario. 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 explicación. Insert Table

Dreamweaver: Interfase Los elementos de edición de texto son estandarizados para dar un sentido de familiaridad sobretodo en elementos de edición de texto que tienen un “look” similar al de Word.

Dreamweaver: Interfase Dreamweaver automáticamente genera el código 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 código básico 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 extraños y situaciones aún mas extrañas.

Dreamweaver: Interfase El darle “right-click” al espacio vacío 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 título, el espacio del margen, el color del texto y otras muchas opciones. También puede poner una imagen de fondo a su página

Dreamweaver: Interfase Estos son los “tools” comunes que permiten al usuario crear mediante unos clics elementos en la pagina de web utilizando Dreamweaver. Note que están divididos por clasificaciones. Common (elementos mas comunes) Image table layer horizontal line Character (caracteres especiales) Line break Space Forms (formas) field checkbox button list box

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 algún disco haga los siguientes Folders.

Página (por favor póngale un titulo corto)

Imágenes

Flash (opcional)

Sonidos (Midi, Wav, MP3 … esto también es opcional)

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 dirección y busca primero ese documento.

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 centralícela.

Dentro de esta tabla estaremos trabajando su portada. Las tablas permiten más control sobre el texto que tiene y las imágenes. Es uno de los elementos más versátiles y utilizados de HTML.

¿Cómo hacer un link?

Para hacer un link debe tener un documento a donde apunta ese link.

Creemos otro documento en blanco por ahora y llámelo pagina1.html o .htm si prefieren… en mi caso mi índice es siempre .html y mis paginas interiores son htm. Probablemente sean manías mías.

Ok, ahora asumiendo que ese documento lo tenga salvado podemos continuar con el link.

Los links meramente hacen lo que la palabra infiere… crean un vínculo entre el botón o texto que se esta utilizando como link y el documento o sección 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.

Añadir una imagen.

Añadir texto… se supone que tengan texto que añadir.

Modificar propiedades del texto y de la página según su preferencia.

Recuerde que los buenos contrastes permiten mejor legibilidad.

Creación de un botón regular.

Un botón regular no es mas nada que una imagen que parezca o se utilice como botón y tenga un link a algún lado.

Creación de un botón con rollover.

Un rollover button es lo mismo pero con otra imagen de igual tamaño y apariencia pero con colores diferentes para dar impresión de que el mismo es presionado o encendido.

Dreamweaver: Guías a seguir.