Informatica VI

Adobe Dreamweaver IESTP “UNICENTER”

Jr.Faustino Maldonado 279 Los Olivos Teléf.: 687-4900 /485-3230 Página N° 1

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: [email protected]

Coordinadora General: Lic. Carmen Cueva Garamendi.

Director General: Dr. Odín Huaynalaya Rojas.



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.



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. 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.

a

c

b

d

e

f



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

b



ventana de documento, proporciona información adicional sobre el

documento que está creando.

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

a



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



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 :



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

Digite el nombre

del sitio web

Carpeta donde se

almacenaran los

archivos 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.

Carpeta donde se

almacenaran las

imágenes del sitio

web



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



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">



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 , permite aplicar salto de linea



12. Etiqueta y sus propiedades

face : Tipo de fuente

size: Tamaño de fuente

color : color de fuente

13. Añadir la siguiente etiqueta .





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


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



PRIMERA PRÁCTICA

CALIFICADA



1. ¿Qué es Adobe Dreamwevaer ?

________________________________________________________________

________________________________________________________________

________________________________________________________________

________________________________________________________________

2. Mencione los tipos de páginas web:

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

3. Describa el entorno de Trabajo

a

b

c

d e f



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.

9. Digite Publicidad & Marketing y aplique tamaño de fuente +3 , color de fuente

azul y desplazamiento alternado

Digite SIGNO , aplique

alineación en el centro

y color rojo



10. Aplique la etiqueta <hr>

11. Digite los siguientes textos , aplique la etiqueta y aplique un color

diferente a cada fila del texto digitado

Documents

Informatica VI