IESTP “UNICENTER”
Adobe Dreamweaver
EL IESTP “UNICENTER”, saluda a toda la comunidad educativa que le conforma y pone a su disposición el primer libro teórico practico de Adobe Dreamweaver, elaborados por los especialistas del área de Diseño Web. Dreamweaver CS3 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Nuestro objetivo institucional en la elaboración de este material, es desarrollar en nuestro alumnos competencias técnicas, comunicacionales y sociales que contribuyan a su información integral y mejorar su nivel de empleabilidad. Autor:
Lic.: Juan Carlos Araujo H e-mail: c_araujoherrera@yahoo.es
Coordinadora General: Director General:
Lic. Carmen Cueva Garamendi. Dr. Odín Huaynalaya Rojas.
Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 1
IESTP “UNICENTER”
Adobe Dreamweaver
INTRODUCCIÓN AL DISEÑO WEB. CAPACIDADES A LOGRAR Conoce el Entorno de trabajo y los Elementos de Dreamweaver. Identifica los Conceptos básico, como barra de Insertar, vistas, ventana de documento, barra de estado e Inspector de propiedades. Crea página web html Personaliza el entorno de trabajo Trabaja con diferentes páginas, Abrir y Guardar.
Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 2
IESTP “UNICENTER”
Adobe Dreamweaver
Entorno de Trabajo Vamos a ver cuáles son los elementos básicos de Dreamweaver CS3 , la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web.
a b
e
c
f
d
a. Barra de insertar : La barra de insertar contiene botones para la creación e inserción de diversos tipos de objetos, como tabla, capas e imágenes. Al pasar el puntero sobre un botón, aparece una descripción de la herramienta con el nombre de botón. Los botones están organizados en fichas, a las que se pueden cambiar dando clic sobre las fichas.
Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 3
IESTP “UNICENTER”
Adobe Dreamweaver
b. Vistas en dreamweaver Dreamweaver le permite trabajar en su documento de 3 diferentes maneras: vista código, vista diseño y vista dividir la cual muestra el diseño y el código del documento
c. Ventana del documento En la vista de diseño, la ventana de documentos muestra el documento aproximadamente igual a como aparecerá en un navegador web.
d. Inspector de Propiedades El inspector de propiedades permite examinar y editar las propiedades más comunes del elemento de página seleccionado actualmente, como texto o un objeto insertado .El contenido del inspector de propiedades es distinto en función del elemento seleccionado.
e. Paneles Flotantes acoplables La mayoría de los paneles de Dreamweaver pueden acoplarse (es decir, combinarse en un único panel flotante con múltiples fichas).Esto facilita al acceso a la información sin saturar el espacio del trabajo.
f. Barra de estado La barra de estado, situada en la parte inferior de la Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
b
Página N° 4
IESTP “UNICENTER”
Adobe Dreamweaver
ventana de documento, proporciona información adicional sobre el documento que está creando.
a
a. Selector de etiqueta Muestra la jerarquía de etiquetas que rodea a la selección actual. b. Tamaño de ventana y zona de visualización Permite cambiar el tamaño de la ventana de documento para que adopte dimensiones predeterminadas y contiene botones de visualización, como mano, zoom y herramienta de selección. 1. Aceptar 2. Guarde los cambios 3. Cierre la página index ,menú archivo cerrar o CTRL + W
Abrir Documentos Esta opción permite abrir diversos tipos de documentos web tales como archivos: *.html,*.css,*.js,*.asp.net vb.*.php,*.jsp,*.xml,etc Pasos: 1. Dar clic en el menú archivo / abrir 2. Seleccione la página index.html 3. Dar clic en el botón abrir
Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 5
IESTP “UNICENTER”
Adobe Dreamweaver
Creación de sitios web locales CAPACIDADES A LOGRAR Identifica el concepto de sitio web Crea sitio web local Configura la propiedades de la página Añade etiquetas html
Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 6
IESTP “UNICENTER”
Adobe Dreamweaver
Sitio Web Un sitio web es un conjunto de documentos vinculados con atributos compartidos, tales como temas relacionados ,un diseño similar o un objetivo común. Creación de un sitio local La carpeta local , es el directorio de trabajo.Esta carpeta es llamada tambien “sitio local”.Esta capeta puede colocarse en el equipo local o en un servidor de red. En ella se almacenaran los archivos con los que están trabajando en un sitio de dreamwevaer.Para definir un sitio de Dreamweaver , tan sólo debe configurar una carpeta local.Para transferir archivos a un servidor web o desarrollar aplicaciones web , también necesita añadir datos para un sitio remoto y un servidor de prueba 1. Menú sitio /Administrar sitio , se mostrar el siguiente cuadro
2. Haga clic en el botón nuevo , elegir la opcion sitio.
3. Seleccionar la ficha avanzadas en el cuadro de diálogo definición de sitio que aparece,estará seleccionada la categoría Datos Locales.introduzca las opciones siguientes :
Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 7
IESTP “UNICENTER” Carpeta donde se almacenaran los archivos del sitio web
Adobe Dreamweaver
Digite el nombre del sitio web
Carpeta donde se almacenaran las imágenes del sitio web Introduzca el URL que utilizará el sitio web finalizando, de modo que dreamweaver pueda verificar los vínculos del sitio que utilicen URL absolutos.
4. Dar clic en el botón listo
5. Dar clic en el botón aceptar 6. Se mostrar en el panel de archivos ,como la imagenen siguiente
7. Crear una página html nueva , menú archivo / nuevo y guarde la página con el nombre index Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 8
IESTP “UNICENTER”
Adobe Dreamweaver
Configurar las Propiedades del Documento 1. Dar clic en el botón propiedades de la página 2. Seleccione la categoría aspecto 3. Aplique siguientes propiedades ,como la imagen siguiente
4. Dar clic en la categoria titulo/codificación ,digite el titulo aroni_sa
5. Cambie a la vista de codigo , se mostrara como la imagen siguiente
Etiquetas Html 1. Etiquetas principales de una página web
Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 9
IESTP “UNICENTER”
Adobe Dreamweaver
2. Ahora en la vista de código ,en el cuerpo de la página digite ARONI S.A.
3. Ahora en la vista de código ,en el cuerpo de la página digite ARONI S.A.
4. Cambie a la vista de diseño
5. Cambie a la vista de codigo y agregue a la etiqueta de texto la siguiente propiedad.
6. Añadir línea horizontal , agregue a la etiqueta <hr color="#CC3300">
Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 10
IESTP “UNICENTER”
Adobe Dreamweaver
7. Cambie a la vista de diseño y presione la tecla F12 , para tener una vista previa de la página web
8. Digite el siguiente texto , como la imagen siguiente Dreamweaver CS3 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.
9. Cambie a la vista de diseño , sevisualizara como la imagen siguiente
10. Cambie a la vista de código 11. Añada la siguiente etiqueta <br>, permite aplicar salto de linea
Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 11
IESTP “UNICENTER”
Adobe Dreamweaver
12. Etiqueta <font> y sus propiedades face : Tipo de fuente size: Tamaño de fuente color : color de fuente 13. Añadir la siguiente etiqueta . <font color="#006633" face="Verdana, Arial, Helvetica, sans-serif" size="+1">
</font> 14. Cambie a la vista de diseño se mostrara como la imagen siguiente
15. Cambie a la vista de código 16. Digite el siguiente texto Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual 17. Añadir la siguiente etiqueta ,<marquee> sus propiedades
18. Guarde los cambios 19. Cambie a la vista diseño y presione la tecla F12 , para tener una vista previa de la página web , se visualizara el desplazamineto del texto 20. Cierre la ventana del navegador
Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 12
IESTP “UNICENTER”
Adobe Dreamweaver
PRIMERA PRÁCTICA CALIFICADA
Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 13
IESTP “UNICENTER”
Adobe Dreamweaver
1. ¿Qué es Adobe Dreamwevaer ? ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________
2. Mencione los tipos de páginas web: _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ 3. Describa el entorno de Trabajo
c
b
a f
Jr.Faustino Maldonado 279 Los Olivos
e
Teléf.: 687-4900 /485-3230
d
Página N° 14
IESTP “UNICENTER”
Adobe Dreamweaver
a. _____________________________ b. _____________________________ c. _____________________________ d. _____________________________ e. _____________________________ f. _____________________________
4. ¿Qué es un sitio web? ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________
5. Cree el sitio web SIGNO, dentro de su memoria UBS o el disco C:\ 6. Inserte una nueva página y guarde con el nombre index 7. Cambie el color de fondo por ,F3F3F3 8. En la vista de diseño, digite el texto signo, aplique alineación en el centro y color de fuente rojo.
Digite SIGNO , aplique alineación en el centro y color rojo
9. Digite Publicidad & Marketing y aplique tamaño de fuente +3 , color de fuente azul y desplazamiento alternado
Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 15
IESTP “UNICENTER”
Adobe Dreamweaver
10. Aplique la etiqueta <hr>
11. Digite los siguientes textos , aplique la etiqueta <br/> y aplique un color diferente a cada fila del texto digitado
12. Guarde los cambios
Jr.Faustino Maldonado 279 Los Olivos
Teléf.: 687-4900 /485-3230
Página N° 16