Elaboró: Prof. Carlos Montiel Rentería Dreamweaver es uno de los principales editores de sitios web en el mercado. Ofrece soporte para la mayoría de tecnologías Web, como: XHTML, CSS, JavaScript, AJAX, PHP, ASP, ASP.NET, JSP, ColdFusion y otros lenguajes. Utiliza una interfaz visual del tipo WYSIWYG (What You See Is What You Get, -lo que observas es lo que obtendrás-). Dreamweaver CS3 - Introducción Dreamweaver es sumamente amigable, es decir muy sencillo de usar, no requieres de una preparación exhaustiva o de las enseñanzas de un gurú de la Web para empezar a crear páginas Web.

Elaboró: Prof. Carlos Montiel Rentería Es requisito indispensable antes de iniciar con el desarrollo de páginas Web crear un Sitio Web, ¿y que diablos es un Sitio Web?, a pues un Sitio Web es un conjunto de carpetas que contienen páginas Web y multimedia (texto, imágenes, sonidos, vídeos, animaciones flash, etc.) y las cuales se hallan específicamente en la “ World Wide Web, - www -)”. Dreamweaver nos da la facilidad de crear nuestro propio “Sitio Web” ya sea en un Servidor Web o en nuestra PC, recuerda un servidor Web es una computadora de mayores prestaciones que precisamente contiene las páginas Web que tú diariamente visitas cada vez que andas navegando (es decir “perdiendo el tiempo”). Dreamweaver CS3 – Crear un Sitio Web

Elaboró: Prof. Carlos Montiel Rentería Dreamweaver CS3 – Acceder a Dreamweaver Para emplear el Dreamweaver te sugiero lo siguiente, localiza el archivo “ Adobe Dreamweaver CS3.exe ”, elígelo y haz clic con botón derecho y escoge la opción: “ Ejecutar como administrador ”, tal como se muestra abajo. Enseguida deberá de aparecer la pantalla inicial de Dreamweaver de donde deberás de hacer clic en el ícono “ HTML ” en la sección “ Crear nuevo ”, tal como se observa a un lado.

Elaboró: Prof. Carlos Montiel Rentería Para crear el Sitio Web en nuestra PC elige la opción “ Nuevo sitio ” del menú “ Sitio ”, tal como se muestra enseguida: Dreamweaver CS3 – Crear un Sitio Web Enseguida aparecerá la ventana “ Definición del sitio ”, en la cual elegirás la cejilla “ básicas ” donde teclearemos el nombre del sitio, tal como se muestra abajo: Teclea “ practica 1 dw ” (sin comillas), y después haz clic en el botón “ siguiente ”.

Elaboró: Prof. Carlos Montiel Rentería En la parte 2 de la ventana “Definición del sitio”, solo asegúrate que la opción “ No, no deseo….. ” este habilitada, tal como se muestra abajo: Dreamweaver CS3 – Crear un Sitio Web Enseguida has clic en el botón “ Siguiente ”, debiendo aparecer la parte 3 de la “Definición del sitio”, donde debes de asegurarte que la 1ª. Opción debe de estar habilitada y además nos muestra la ubicación exacta dentro de nuestra PC del sitio Web que hemos creado, observa abajo: Y enseguida has clic en el botón “ Siguiente ” apareciendo la sección: “ compartiendo archivos ”.

Elaboró: Prof. Carlos Montiel Rentería En esta última parte debemos de elegir la opción: “ Ninguno ”, tal como se indica abajo: Dreamweaver CS3 – Crear un Sitio Web Enseguida has clic en el botón “ Siguiente ” mostrándonos un resumen de este diálogo que hemos terminado.

Elaboró: Prof. Carlos Montiel Rentería Resumen de la creación del Sitio Web: Dreamweaver CS3 – Crear un Sitio Web Cabe señalar que no utilizaremos un servidor web, todo será en nuestra PC y sólo utilizaremos el aspecto de creación de páginas Web que ofrece Dreamweaver. Para finalizar solo haz clic en el botón “ Completado ” (deberá de aparecer en el panel de la derecha la referencia del sitio)

En este momento vamos a empezar con la elaboración de las páginas Web, lo anterior no lo olvides es de suma importancia que siempre lo realices antes de iniciar el Diseño. Actualmente en el ámbito profesional los diseñadores Web desarrollan su trabajo mediante los editores de páginas Web, así que vamos en buen camino. Todas las páginas Web que visitas tienen en su diseño el uso de Marcos ( Frames en inglés), por ejemplo: la información publicitaria (logo, nombre de la empresa, mensajes “subliminales”) que esta colocada en la parte superior de las páginas Web se conoce como banner y se emplea un Marco superior para contenerla. la información que aparece en la parte media de la página Web es dinámica, es decir es cambiante y ahí se emplea un Marco intermedio para contener c/u de las páginas Web que se desee revisar (navegar) del mismo Sitio Web. la parte inferior se emplea un Marco inferior para colocar botones para navegar dentro de este Sitio Web a manera de índice. Dreamweaver CS3 – Diseño Elaboró: Prof. Carlos Montiel Rentería

Definición de Marcos. Como ya se menciono, emplearemos tres Marcos, empezamos insertando el Marco Superior: Localiza el menú “ Insertar ”, de ahí señala la opción “ HTML ”, enseguida señala la opción “ Marcos ” y finalmente haz clic en la opción “ Arriba ”, tal como se muestra abajo: Dreamweaver CS3 – Diseño Elaboró: Prof. Carlos Montiel Rentería Enseguida aparecerá la ventana para etiquetar el marco, donde deberás de elegir la opción; “ topFrame ” y haz clic en “ Aceptar ”:

Definición de Marcos. Ahora toca crear el Marco Inferior, pero fíjate bien antes de insertarlo deberás de hacer clic dentro del área de abajo del Marco “Arriba” (o topFrame), tal como se observa enseguida: Dreamweaver CS3 – Diseño Elaboró: Prof. Carlos Montiel Rentería Ahora, haz clic en la opción “ Abajo ” de la misma opción “ Marcos ” que hemos usado y elige como etiqueta del Marco la opción: “ bottomFrame ” y finalmente haz clic en “ Aceptar ”.

La imagen de la derecha te muestra los dos Marcos ya insertados en la página activa. Ahora es momento de salvar todas estas acciones, y para ello empleamos la opción “ Guardar todo ” del menú “ Archivo ”. En la siguiente diapositiva, te mostrare como Dreamweaver señalará c/u de las páginas Web a salvar a través de una línea con sombra achurado en su perímetro. Elaboró: Prof. Carlos Montiel Rentería Dreamweaver CS3 – Guardar todo

Dreamweaver señala a toda la página, por ello teclea: index, recuerda es la página principal. Elaboró: Prof. Carlos Montiel Rentería

Dreamweaver señala a la siguiente página a salvar, en este caso corresponde a la página que contendrá botones para permitir el navegar en el Sitio Web, teclea: pagIndice, tal como se indica abajo: Elaboró: Prof. Carlos Montiel Rentería Dreamweaver CS3 – Guardar todo

Dreamweaver señala a la siguiente página a salvar, en este caso corresponde a la página que contendrá información inicial del Sitio Web, teclea: pagInicio, tal como se indica abajo: Elaboró: Prof. Carlos Montiel Rentería Dreamweaver CS3 – Guardar todo

Elaboró: Prof. Carlos Montiel Rentería Dreamweaver señala a la siguiente página a salvar, en este caso corresponde a la página que contendrá la página publicitaria, por ello teclea: pagBanner, tal como se indica abajo: Dreamweaver CS3 – Guardar todo

Elaboró: Prof. Carlos Montiel Rentería Como evidencia del guardado de las páginas Web antes tratadas se tiene el panel de la derecha donde se encuentran tales páginas, observa la imagen de abajo: Dreamweaver CS3 – Guardar todo En este panel se irán observando todos los elementos incorporados al Sitio “ practica 1 dw ”.

Elaboró: Prof. Carlos Montiel Rentería Ahora crearemos el contenido de la página: “ pagBanner.html ”, en ella simplemente insertaremos una animación Flash llamada: “ banner.swf ” la cual se encuentra en la carpeta “ recursos pw* ”, para ello haz clic dentro del marco de arriba y elige la opción “ Flash paper ” de la opción “ Media ” del menú “ Insertar ” y te solicitara la animación flash, tal como se observa enseguida: Dreamweaver CS3 – Página Banner Definimos su ancho de 1200 px y su altura de 100 px, y hacemos clic en “ Aceptar ”. (*) La carpeta “recursos pw” te la entregará tu profesor y deberás de grabarla en la carpeta asignada al sitio Web (practica 1 dw).

Elaboró: Prof. Carlos Montiel Rentería Debemos modificar las fronteras de la animación Flash que hemos insertado, coloca el puntero del ratón en la parte inferior del marco superior ( ), para que la arrastres y le des más espacio a la animación Flash, de igual manera haz clic en la “ pequeña flecha ” ( ), del panel de la derecha para que puedas darle más espacio a su anchura, tal como se observa abajo: Dreamweaver CS3 – Página Banner Procura dejar el mismo margen dentro del marco de “Arriba” para la animación Flash.

Elaboró: Prof. Carlos Montiel Rentería Procura darle el espacio que a continuación te mostramos: Dreamweaver CS3 – Página Banner A continuación, probaremos si lo efectuado ha sido correcto, para ello solo haz clic en la opción “ Guardar todo ” del menú “ Archivo ” y enseguida haz clic sobre el ícono “ Vista previa/Depurar en explorador ” ( ), y deberá mostrarse tal como se vería a través de algún Navegador, vea la siguiente diapositiva. Comúnmente elegimos IExplore.

Elaboró: Prof. Carlos Montiel Rentería Dreamweaver CS3 – Página Banner Si empleas IExplorer éste te mostrara el siguiente mensaje (en la parte inferior de la página): Obviamente deberás de hacer clic sobre este “ botonsote ” para poder permitir el contenido o sea la página, mostrándose tal como se observa abajo:

Elaboró: Prof. Carlos Montiel Rentería Dreamweaver CS3 – Página Índice Ahora nos toca atender el contenido del marco inferior, es decir la página que fungirá como índice, y lo haremos a través de imágenes de botones, para ello emplearemos la opción “ Imagen de sustitución ” de la opción “ Objetos de imagen ” del menú “ Insertar ”, pero antes insertaremos una tabla (1 fila y 4 columnas) centrada, para que dichas imágenes podamos colocarlas ordenadamente. En primer lugar haz clic en el marco inferior, enseguida elige la opción “ Tabla ” del menú “ Insertar ”, y asigna 1 fila y 4 columnas, en el panel de propiedades (abajo) especifica en la opción Alinear : “ Centro ” y en Borde : 0, tal como se observa enseguida:

Elaboró: Prof. Carlos Montiel Rentería Dreamweaver CS3 – Página Índice, botón Inicio Ahora insertaremos en cada celda de la tabla un botón (que estará formado por dos imágenes muy parecidas), primero creamos el botón Inicio, haz clic en la 1ª. Celda, y enseguida elige la opción “ Imagen de sustitución ” de la opción “ Objetos de imagen ” del menú “ Insertar ”, en la siguiente imagen observarás los valores que deberás especificar (recuerda en la carpeta “ recursos pw ” hallarás ambas imágenes): Página a invocar

Elaboró: Prof. Carlos Montiel Rentería Dreamweaver CS3 – Página Índice botón Inicio Al insertar ambas imágenes debemos obtener algo muy semejante a lo siguiente: Definiendo en Vínculo: “ paginaInicio.html”, y con Destino a: “ mainFrame ”.

Elaboró: Prof. Carlos Montiel Rentería Dreamweaver CS3 – Página Índice botones restantes Ahora deberás de crear los siguientes tres botones, en las celdas restantes de la tabla, las imágenes de los tres botones son: Vínculo: “ paginaMusica.html”, Destino: “ mainFrame ”. Vínculo: “ paginaVídeo.html”, Destino: “ mainFrame ”. Vínculo: “ paginaAnimacionFlash.html”, Destino: “ mainFrame ”.

Dreamweaver CS3 – Página Índice botón Inicio Los botones de la “ pagIndice.html ” deben mostrarse como sigue: Elaboró: Prof. Carlos Montiel Rentería Ahora procedemos a crear las páginas Web que son invocadas por cada uno de estos botones ( paginaInicio.html, paginaMusica.html, paginaVideo.html y paginaAnimacionFlash.html ).

Dreamweaver CS3 – Página Web Inicio Para crear una página Web nueva empleamos la opción “ Nuevo ” del menú “ Archivo ”, en “ Tipo de página ” elegimos “ HTML ” y finalmente hacemos clic en el botón “ Crear ” (que se encuentra en la parte inferior derecha de la pantalla). Inserta el siguiente texto: “ Esta es la página de Inicio ”, oprime la tecla Enter y enseguida inserta una imagen a través de la opción “ Imagen ” del menú “ Insertar ” (imagen1.jpg), tal como se muestra enseguida: Elaboró: Prof. Carlos Montiel Rentería Selecciona tanto el texto como la imagen: En el panel de propiedades haz clic en el icono de “ centrar ” ( ), cambia la fuente por “ Century Gothic ”, el tamaño por “ Muy grande ”, y el color por “ # ” (guinda).

Dreamweaver CS3 – Página Índice botón Inicio Guarda la página con el nombre: “ paginaInicio.html ” (usa la opción “ Guardar ” del menú “ Archivo ”) Elaboró: Prof. Carlos Montiel Rentería

Dreamweaver CS3 – Página Índice botón Música Ahora creamos la página que contendrá música ( mp3 ). Igual, opción “ Nuevo ” del menú “ Archivo ” y hacer clic en el botón “ Crear ”. Inserta el texto: “ Esta es la página de Música ” seguido por un “ Enter ”, inserta la imagen “ beatles.jpg ” y oprime la tecla “ Enter ”, ahora elige la opción “ plug-in ” de la opción “ Media ” del menú “ Insertar ”, localiza el archivo “ imagine.mp3 ” en la carpeta de recursos, y finalmente graba la página con el nombre de “ paginaMusica.html ”, tal como se muestra abajo. Elaboró: Prof. Carlos Montiel Rentería Plug-in para el MP3

Dreamweaver CS3 – Página Índice botón Música Selecciona todos los elementos de la página y en el panel de propiedades haz clic en el icono de “ centrar ” ( ), cambia la fuente por “ Century Gothic ”, el tamaño por “ Muy grande ”, y el color por “ # ” (guinda) y deberás de obtener algo muy parecido a lo de abajo. Elaboró: Prof. Carlos Montiel Rentería

Dreamweaver CS3 – Página Índice botón Música A través del ícono “ Vista preliminar ”, pídele al Explorador de Internet la interprete y mostrará su contenido, por lo que escucharemos el archivo “ imagine.mp3 ”, observándose como la de abajo: Elaboró: Prof. Carlos Montiel Rentería Controles para el sonido

Dreamweaver CS3 – Página Índice botón Vídeo Elaboró: Prof. Carlos Montiel Rentería Ahora creamos la página que contendrá vídeo ( avi ). Igual, opción “ Nuevo ” del menú “ Archivo ” y hacer clic en el botón “ Crear ”. Inserta el texto: “ Esta es la página de Vídeo ” seguido por un “ Enter ”,, ahora elige la opción “ plug-in ” de la opción “ Media ” del menú “ Insertar ”, localiza el archivo “ El oído.avi ” en la carpeta de recursos, y finalmente graba la página con el nombre de “ paginaVideo.html ”, e interprétala con tu navegador, y deberá mostrarse como sigue:

Dreamweaver CS3 – Página Índice botón Animación Flash Elaboró: Prof. Carlos Montiel Rentería Ahora creamos la página que contendrá una animación flash ( swf ). Igual, opción “ Nuevo ” del menú “ Archivo ” y hacer clic en el botón “ Crear ”. Inserta el texto: “ Esta es la página de Vídeo ” seguido por un “ Enter ”,, ahora elige la opción “ Flash paper ” de la opción “ Media ” del menú “ Insertar ”, localiza el archivo “ tattoo Montiel.swf ” (Ancho: 550, Altura: 300 ) en la carpeta de recursos, y finalmente graba la página con el nombre de “ paginaAnimacionFlashVideo.html ”, e interprétala con tu navegador, y deberá mostrarse como sigue:

Dreamweaver CS3 – Página de “ Bienvenida ” Ahora si, ya estamos listos para probar nuestro sitio Web a partir del archivo “ index.html ”, para ello haz clic en la cejilla pagInicio.html, o pagIndice.html, o pagBanner.html (dependerá de la posición del ratón), enseguida haz clic en el marco que contenga la página: “ pagInicio.html ”, y teclea el texto e inserta la imagen “ ” mostrados abajo: Elaboró: Prof. Carlos Montiel Rentería

Dreamweaver CS3 – Página index.html Al interpretar la pagina “ index.html ” mediante el navegador que quieras (yo empleare el “ Safari ”), se deberá de mostrar como sigue: Elaboró: Prof. Carlos Montiel Rentería Primer momento:

Dreamweaver CS3 – Página Índice botón Música Elaboró: Prof. Carlos Montiel Rentería Al hacer clic en el botón “i nicio ”, deberá mostrarse como sigue: Segundo momento:

Dreamweaver CS3 – Página Índice botón Música Elaboró: Prof. Carlos Montiel Rentería Al hacer clic en el botón “ música ”, deberá mostrarse como sigue: Tercer momento:

Dreamweaver CS3 – Página Índice botón Música Elaboró: Prof. Carlos Montiel Rentería Al hacer clic en el botón “ vídeo ”, deberá mostrarse como sigue: Cuarto momento:

Dreamweaver CS3 – Página Índice botón Animación Flash Elaboró: Prof. Carlos Montiel Rentería Al hacer clic en el botón “ animación flash ”, deberá mostrarse como sigue: Quinto momento:

Dreamweaver CS3 – Se acabo. Elaboró: Prof. Carlos Montiel Rentería Ahí la llevamos!!!!