Tutorial DREAMWEAVER CS3 Prof. Carlos Montiel R

INSTITUTO POLITCNICO NACIONAL
Dreamweaver cs3 Introduccin.

Dreamweaver es un editor grfico de pginas Web, definitivamente una gran ayuda para tal elaboracin, demasiado amigable estoy seguro que con cierto nivel bsico de conceptos de computacin cualquier persona puede accederlo de manera autodidacta, quiz algunas herramientas si se requiera de apoyo de algn guru pero para ello est el tumbaBurros: Internet-Google. En otras palabras no necesitas conocer las latosas etiquetas HTML. En fin sin ms prembulo iniciamos. Paso 1. Creacin del sitio Web. Cada vez que vayas a crear pginas Web ests obligado a crea un sitio Web que no es ms que otra cosa que una mugrosa carpeta, pero ya sabes para espantar al paisanaje se emplea el trmino Sitio Web que efectivamente apantalla ms. Accede al men Sitio y elige la opcin Nuevo sitio, tal como se muestra enseguida:
Obviamente ya debiste haber ejecutado el programa Dreamweaver CS3 y haber elegido la opcin HTML, tal como se muestra en la siguiente imagen:
Responsable: Prof. Carlos Montiel Rentera
Email: ke.tranza.mongol@hotmail.com

Dreamweaver cs3
Despus de haber elegido la opcin Nuevo sitio, debe aparecer la siguiente ventana en la cual debes de hacer clic en la pestaa Bsicas y teclear el nombre del sitio: sesion01, tal como se muestra:
Enseguida haz clic en el botn Siguiente >, debiendo aparecer la siguiente ventana: Como estars observando debes elegir la 1. Opcin (No, no deseo.) y haz clic en el botn Siguiente >, debiendo aparecer la ventana de abajo:
Observa bien, debes de elegir la 1. Opcin (Editar copias locales), y fjate bien en qu lugar se crear el Sitio Web en mi caso y es probable que en el tuyo

Dreamweaver cs3
tambin: en Mis documentos (Documents). Y haz clic en Siguiente > el botn
Deber de aparecer siguiente ventana:
la
En ella debers elegir la opcin Ninguno, tal como lo ests viendo -, enseguida haz clic en el botn Siguiente >.
Ahora observars la siguiente ventana:
La cual simplemente nos muestra lo que hemos elegido, inmediatamente haz clic en el botn Completado, y listo, hemos creado un Sitio Web (uorale!). Este Sitio Web albergar todos

Dreamweaver cs3
los elementos involucrados en las pginas que desarrollaremos ms adelante (por ejemplo: imgenes, videos, msica y las propias pginas Web). Paso 2. Creacin de Marcos. Las pginas Web que desarrollaremos las colocaremos dentro de marcos para su mejor manejo y permitir una navegacin ms agradable para nuestros usuarios o clientes, comnmente muchos de los sitios Web que visitamos va Internet tienen la siguiente estructura:
Iniciamos, elige la subopcin Arriba del men Insertar HTML Marcos, tal como se muestra enseguida:

Dreamweaver cs3
En el rea de trabajo de Dreamweaver se mostrara la siguiente ventana, en la cual debers de elegir topframe (marco superior), tal como se muestra:
Y enseguida haz clic en el botn Aceptar, de inmediato observars una lnea recta que divide el escenario de Dreamweaver, tal como se muestra en la imagen siguiente:
Ahora, haz clic en el rea de abajo y vuelve a insertar otro marco: elige Abajo del men InsertarHTMLMarcos, y aparecer la ventana: Atributos de accesibilidad de la etiqueta de marco en la cual debes de elegir la opcin bottomFrame (marco inferior), tal como se muestra enseguida:

Dreamweaver cs3
Finalmente haz clic en el botn Aceptar, el escenario de Dreamweaver deber mostrarse como sigue:
Paso 3. Colocar una animacin Flash en el marco superior. Haz clic dentro del marco superior y ahora elige la opcin FlasPaper del men InsertarMedia, tal como se muestra enseguida:
Enseguida aparecer la siguiente ventana:

Responsable: Prof. Carlos Montiel Rentera Email: ke.tranza.mongol@hotmail.com 6

Dreamweaver cs3
Haz clic en el botn Examinar, entonces busca la animacin en la carpeta o Sitio Web sesion01, tal como se muestra enseguida:
La animacin Flash que insertaremos se llama banner.swf (que debe de estar contenida en la carpeta sesion01), por lo que haz clic en ella (es decir elgela) y enseguida haz clic en el botn Aceptar, aparecer de inmediato la siguiente ventana:

Dreamweaver cs3
Solo haz clic en el botn Aceptar, ahora aparecer la siguiente ventana:
No tecleamos nada y solo haz clic en el botn Aceptar, debiendo aparecer un rectngulo oscuro que indica que ah se colocar la animacin Flash, observa la siguiente imagen:
Observa bien el rectngulo oscuro que va a contener a la animacin Flash aparece incompleto, por lo cual debers de realizar ciertos ajustes para que se observe de la siguiente manera:
Tips: coloca el cursor del Mouse exactamente en la lnea que separa ambos marcos y en cuanto cambie de apariencia y aparezca una flecha con dos puntas ( ) mueve la lnea hacia abajo y podrs observar en su tamao completo el rectngulo oscuro de la animacin Flash, entonces aprovecha y alarga el rectngulo oscuro hacia la derecha y vuelve a colocar la lnea divisora muy cerca del rectngulo oscuro.

Dreamweaver cs3
Paso 4. Colocar una tabla para el ndice en el marco inferior. inferior y elige la opcin Tabla del men Insertar tal como se observa enseguida: Haz clic dentro del marco
Ahora, teclea 2 para Filas, 2 para Columnas y finalmente 0 para Grosor del borde, tal como se observa en la siguiente imagen:
Y haz clic en el botn Aceptar, y enseguida en el marco inferior observars la tabla como se muestra enseguida:
Ahora debes de seleccionar la tabla para poderla centrar dentro del marco inferior, para ello coloca el cursor en la parte superior de la tabla y en cuanto el cursor cambie de apariencia a una flecha inclinada y una pequea tabla parecida a la imagen siguiente haz clic:
Enseguida elige la opcin Centro del men TextoAlinear, quedando de la siguiente forma:

Dreamweaver cs3
Paso 5. Colocar informacin en el marco central. Simplemente colocamos texto e insertamos una imagen centrando a ambos, tal como se muestra en la siguiente imagen:
Para ello emplea la opcin Imagen del men insertar (usa cualquier imagen), para centrar la imagen debes seleccionarla y con la opcin AlinearCentro del men Texto y finalmente para el texto simplemente teclalo, lo seleccionas y a travs del men Texto, usa las opciones: AlinearCentro, Formato de prrafoEncabezado 1, FuenteCentury Gothic, EstiloCursiva, ColorRojo 0, Verde 0 y Azul 128. Paso 6. Guardar todo lo realizado a la carpeta sitio01 o Sitio Web . El guardado de informacin aparentemente es sencillo pero desgraciadamente la mayora se equivocan (ya sabes la mongoliza es brava), por favor debes de ser muy cuidadoso ok?, bien utilizamos la opcin Guardar todo del men Archivo, observa con detenimiento aparece una lnea achurada en toda la orilla de la pgina principal, si es as llmale index por omisin o default Dreamweaver le aade la extensin html, y haz clic en el botn Guardar. Ahora la lnea achurada comprende al marco inferior, as que llmale: ndice, y oprime el botn Guardar. Ahora la lnea achurada comprende al marco central, por ello llmale central y haz clic en el botn Guardar, finalmente ahora la lnea achurada comprende al marco superior y por ello llmale banner y haz clic al botn Guardar, y listo!. A manera de verificacin haz clic en la pequea flecha ( derecha del escenario de Dreamweaver. ) que se halla en la orilla
10

Dreamweaver cs3
Y podrs observar el panel de la derecha donde se muestran todos los elementos del Sitio Web que se han creado hasta el momento, observa la siguiente imagen:
Paso 7. Vistazo preliminar de las publicaciones de las pginas Web. Para observar las pginas Web que se han estado construyendo, debemos emplear el cono Vista previa/Depurar en explorador, pero antes debers de emplear la opcin: Guardar todo del men Archivo, y al hacer clic en el cono elige la opcin Vista previa en IExplore (es decir Internet Explorer), observa la siguiente imagen:
Internet Explorer nos presentara un mensaje que indica bloqueo de las pginas Web, entonces debes hacer clic en el botn: permitiendo observar correctamente las pginas Web, tal como se observa enseguida:
11

Dreamweaver cs3
Paso 8. Insertar botones en la tabla de la pgina Indice. Haz clic en la 1. Celda de la tabla y elige la opcin Botn Flash del men InsertarMedia, tal como se muestra enseguida:
12

Dreamweaver cs3
Debiendo aparecer la siguiente ventana:
En primer lugar arrastra el botn de desplazamiento vertical hasta al fondo debiendo aparecer el botn tipo Sotf-Raspberry y elgelo, despus teclea: Tema I en el Texto del botn, modifica el tamao a: 10, en Vnculo teclea: tema1.html (pgina que se llamar al oprimir el botn), y en Destino elige la opcin: mainFrame (que vendra siendo el marco central), tal como se muestra en la imagen anterior. Quedando como sigue: No olvides centrar el botn dentro de su celda: Paso 9. Creacin de la pgina Web: tema1.html. Elige la opcin Nuevo del men Archivo enseguida elige HTML y oprime el botn Crear apareciendo otro escenario en blanco, en ste inserta una tabla de 1 fila y 2 columnas, haz clic en la primera celda e inserta una imagen (fotografa de Albert Einstein) y en la 2. Celda haz clic y teclea la informacin que a continuacin se muestra (11 frases clebres de Albert Einstein):
13

Dreamweaver cs3
Finalmente, centra la tabla y el texto dentro de su celda, tal como se mostr en la imagen anterior. Finalmente guardaremos la pgina, para ello simplemente elige la opcin Guardar del men Archivo y teclea en la caja de Nombre: tema1.html y listo. Paso 10. Insertar un Hipervnculo al texto Contctanos. En la pgina de inicio debajo de la imagen que insertamos se coloc el texto Contctanos al cual le asignaremos un hipervnculo y para ello selecciona el texto y en el panel de propiedades (parte inferior de la pantalla), teclea en la caja de texto Vnculo: contactanos.html y el men Dest (Destino) elige la opcin mainFrame, tal como se muestra en la siguiente imagen:
Paso 11. Creacin de la pgina contactanos.html. Elige la opcin Nuevo del men Archivo enseguida elige HTML y oprime el botn Crear y se tendr un nuevo escenario en el cual inserta una imagen y texto tal como se muestra enseguida:
Observa bien, se emple una tabla de 1 fila y 2 columnas. Finalmente guardaremos la pgina, para ello simplemente elige la opcin Guardar del men Archivo y teclea en la caja de Nombre: contactanos.html y listo.
14

Dreamweaver cs3
Paso 12. Vistazo preliminar a todas las pginas Web creadas. Para esto repite el paso nmero 7, enseguida te muestro las diferentes pginas involucradas:
15

Dreamweaver cs3
16

Tutorial DREAMWEAVER CS3 Prof. Carlos Montiel R

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial DREAMWEAVER CS3 Prof. Carlos Montiel R

Uploaded by

Copyright:

Available Formats

INSTITUTO POLITCNICO NACIONAL

Dreamweaver cs3 Introduccin.

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Deber de aparecer siguiente ventana:

Ahora observars la siguiente ventana:

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Enseguida aparecer la siguiente ventana:

INSTITUTO POLITCNICO NACIONAL

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Responsable: Prof. Carlos Montiel Rentera

INSTITUTO POLITCNICO NACIONAL

Responsable: Prof. Carlos Montiel Rentera

You might also like