Paginas web dreamweaver

1

Colegio de Estudios Científicos y Tecnológicos Del

Estado de México

“Manual de Dreamweaver”

Materia: Creación de Páginas Web

Nombre del alumno: Galván González Itzel Berenice

Ing. Rene Domínguez Escalona

Grupo: 302

Especialidad: Informática

2

Índice:

1. Configurar un nuevo sitio:

•Estilo CSS

2. Insertar marcos

3. Crear Hipervínculos:

•A otra pagina

4. Insertar una imagen:

•Mapa de imágenes

5.Agregar archivo multimedia:

•Sonido

•Animación

•Video

6. Modificar un texto:

•Cursiva, negrita subrayada. Tachada

•Texto de cabecera

•Texto de párrafo

3

7. Formulario:

•Casillas

•Botones

•Área de texto

•Botón de envió y borrado

8. Tablas:

•Definición de filas de una tabla

•Definición de celdas de cabecera

•Definición de celdas

9. Insertar un Banner

Introducción:

4

En este manual que se les presentara se mostrara como

podemos trabajar en el programa Dreamweaver,

Dreamweaver (Macromedia Dreamweaver) Es la aplicación de

este tipo más usada en el sector de diseño y programación

web. Posee, como toda la línea Macromedia/Adobe,

excelentes funcionalidades e integración con otras

herramientas la aplicación permite crear sitios de forma

totalmente gráfica, y dispone de funciones para acceder al

código HTML generado. La característica principal de este

programa es que es más fácil de crear una página aquí que en

bloc de notas donde forzosamente puedes usar solo código

para insertar cada elemento.

La descripción se basa en especificar la estructura adecuada

para la elaboración del documento deseado ya sea formal e

informal o para alguna ocupación importante o de uso común.

Se mostrara paso a paso incluido con imágenes para que no

ocasionar algún problema de mal entendimiento. Así mismo tú

con este manual podrás trabajar en Dreamweaver creando

una página web mucho más sencilla. Daremos ejemplos de

cómo insertar cada cosa así como imágenes, texto, videos,

animaciones etc….

CONFIGURAR UN NUEVO SITIO…………….

5

•Para configurar un nuevo sitio en el programa debes buscar en la barra de menú la opción

“sitio”.

•Después aparecerán varias opciones de las cuales escogerán la de “nuevo sitio”

6

•Enseguida de que demos clic izquierdo en esa opción aparecerá una nueva ventana para

poder configurar……….

Ahora comenzaremos a editar cada dato que se nos pida dar para poder configurar un

sitio………..

•Primero le pondremos un nombre al sitio y tambien el nombre mas la definicion HTTP

Ejemplo:

7

•Una vez puestos los datos damos clic izquierdo en “siguiente”

•Aparecera nuevas opciones en la cual es recomendado escoger “no, no deseo utilizar una

tecnologia de servidor”

•Damos clic en siguiente……

8

•En la siguiente ventana escogeremos donde guardar el sitio, tenemos que dar clic en la

carpeta que aparece ahí para que aparezca la ventana de donde se encuentran las carpetas

•Es recomendable guardarlo en el “Disco C” en el cual debemos de crear una nueva carpeta y

guardarlo ahí….

9

10

•Ahora en la ventana de Dreamweaver aparecerá la dirección de la carpeta que escogimos:

11

•Despues le damos en siguiente……

•Aparecera una ventana en la que ahora pondremos la direccion de donde esta ubicada la

carpeta que hicimos

•Nuevamente le damos clic en la carpeta pequeña que aparece para seleccionar la carpeta, o

solo anotamos correctamente el nombre de la carpeta……

•Despues damos clic en siguiente…

12

•Enseguida aparecera una nueva ventana donde seleccionaremos la opcion que

deseees………….

Demos clic en siguiente………

Aparecera un ultima ventana donde daremos clic en completado y terminaremos con la

creacion del nuevo sitio……………

13

Terminado eso deberá aparecer del lado derecho de la pantalla el nombre del sitio….

ESTILO CSS

•Primero, del lado derecho de la pantalla aparece un opción que se llama CSS, daremos clic

izquierdo en ese opción…..

14

•Después aparecerá un recuadro………………

•Ahora daremos clic en la opción todo…..

15

•Daremos clic izquierdo en la parte de abajo en la opción “nueva regla CSS”….

Automáticamente aparecerá una ventana donde podremos configurar la nueva regla CSS….

16

En la ventana aparecen varias opciones, configuraremos el nombre……

Ejemplo:

Damos Clic en ACEPTAR:

17

Ahora aparecerá una nueva ventana, en la cual seleccionaremos donde guardar el archivo, es

recomendable guardarlo dentro del mismo lugar donde guardamos nuestro sitio.

•Debemos de usar una ruta: “archivo:/ /” al momento de guardar el archivo…..

18

•Después damos clic en guardar…. Y aparecerá una nueva ventana………

•Configuraremos cada casilla a rellenar depende el tipo de letra que deseemos…..

Ejemplo:

19

•Damos la opción “ACEPTAR”……

•Ahora vamos a la opción estilos, debe aparecer el nombre de nuestro estilo…..

20

Insertar marcos……..

•En la barra de herramienta hay una opción que dice “común”, primero vamos a a

cambiar de “común” a diseño….

21

•Cambiaran todas las opciones en la barra de herramientas, escogemos la penúltima opción

que se llama “marcos”

•Damos clic izquierdo en la herramienta y aparecerán varias opciones de las cuales podemos

escoger la que deseamos…..

•Ejemplo:

•Escogemos marco izquierdo….

22

Aparecerá la siguiente ventana….

Cambiaremos el nombre del título…….

23

Por ultimo damos clic izquierdo en “aceptar”

Y en la pantalla se mostrara así:

24

Crear hipervínculos…

Crear un hipervínculos es realizar un enlace hacia otra pagina.

•Hipervínculo a otra pág.

•En la barra de herramientas escogemos la opción “Insertar”…….

Después aparecerán varias opciones, de las cuales escogeremos “hipervínculo”

25

Al darle clic aparecerá una nueva ventana……………….

Editaremos los espacios en blancos que son “Texto:” y “Vinculo:”, en texto pondremos el

nombre de nuestro texto………

Ejemplo:

26

En donde dice vinculo vamos a seleccionar el lugar donde se encuentra nuestra información

almacenada…..

•Ahora daremos clic en “aceptar”

27

•En la pantalla se tendrá que observar así………….

Insertar una imagen…

•Escogeremos de la barra de herramientas la opción “insertar”

28

•Aparecerán opciones de las cuales escogeremos la opción “imagen”

•Automáticamente aparecerá una nueva ventana de donde escogeremos nuestra imagen…

Ejemplo:

29

•Daremos clic en aceptar….

•De nuevo aparecerá una ventana donde nos da la opción de agregar un texto, pero si no lo

deseamos pues no le ponemos nada…y damos clic en aceptar…

30

Y aparecerá la imagen en la pantalla….

•Agregar archivo multimedia……

Agregar un archivo multimedia es anexar videos, animaciones, música etc….

•Sonido

•Animación

•Video

31

•Modificar un texto……..

Negra, cursiva, subrayada y tachada…

•Ya que tenemos insertado nuestro texto en la pagina lo subrayamos..

Ejemplo:

•Después nos vamos a ir a la barra de herramientas y escogeremos la opción texto

•Aparecerán varias opciones y elegiremos la opción estilo

32

•Ahora aparecerá una lista de opciones donde elegiremos la opción que deseamos

El texto se pondrá automáticamente como lo desees ya sea en negrita cursiva subrayado o

tachado.

Ejemplos:

33

Negrita..

Cursiva:

Subrayada:

34

Tachado:

Texto de cabecera….

•Para insertar un texto de cabecera necesitamos ir a la barra de herramientas, y elegir la

opción de “texto”

•Después la opción “formato de párrafo”….

35

•Ahora aparecerán varias opciones de las cuales vienen 6 encabezados y depende cual

escojamos pues varia su tamaño….

Ejemplo:

36

•Texto de párrafo

•Primero vamos a ir a la barra de herramientas…. Escogemos la opción texto

•Después escogemos la opción “formato de párrafo”………..

37

•Y escogemos después la opción párrafo…

Entonces ahora podremos escribir con letra normal en un párrafo normal….

•Formulario

•Para agregar un formulario primero debemos de ir a la barra de herramientas y escoger la

opción “insertar”

38

•Después damos la opción formulario….

• Aparecerán varias opciones de las cuales podemos elegir la que deseamos….

39

Dependiendo de la opción que elegimos aparecerán los resultados…

•Casillas

Esta opción es un recuadrito para agregar opciones al formulario en forma de casilla…

•Debemos primero escoger en la barra de herramientas la opción de formulario

40

•Después que le demos clic en la opción de casilla aparecerá la siguiente ventana:

•Ahora editaremos el recuadro que dice etiqueta y agregaremos el nombre de la opción……

Ejemplo:

41

•Una vez puesto el nombre damos clic en aceptar y se mostrara de la siguiente manera….

•Botones…

•Primero escogeremos la herramienta “insertar” después escogemos la opción “formulario y

de ahí la opción “botón”…..

42

•Ahora aparecerá una ventana donde editaremos igual el nombre que llevara el “botón”

Ejemplo:

•Después damos clic en aceptar y tendrá que mostrarse el botón de la siguiente manera….

43

•Área de texto…

•Para insertar el recuadro del área de texto debemos de ir primero a la opción de “insertar”

después “formulario” y por ultimo damos clic en “área de texto”……..

•Aparecerá una ventana en la cual tendrán que asignarle un nombre a esa área o una

etiqueta…

Ejemplo:

Aparecerá de la siguiente manera……

44

•Botón de envió y Botón de borrado…

•Damos clic en la opción de “insertar” después “formulario” y damos clic en la opción de

botones…

•Después