paginas web dreamweaver
TRANSCRIPT
![Page 1: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/1.jpg)
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
![Page 2: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/2.jpg)
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
![Page 3: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/3.jpg)
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:
![Page 4: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/4.jpg)
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…………….
![Page 5: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/5.jpg)
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”
![Page 6: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/6.jpg)
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:
![Page 7: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/7.jpg)
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……
![Page 8: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/8.jpg)
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í….
![Page 9: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/9.jpg)
9
![Page 10: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/10.jpg)
10
•Ahora en la ventana de Dreamweaver aparecerá la dirección de la carpeta que escogimos:
![Page 11: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/11.jpg)
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…
![Page 12: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/12.jpg)
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……………
![Page 13: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/13.jpg)
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…..
![Page 14: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/14.jpg)
14
•Después aparecerá un recuadro………………
•Ahora daremos clic en la opción todo…..
![Page 15: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/15.jpg)
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….
![Page 16: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/16.jpg)
16
En la ventana aparecen varias opciones, configuraremos el nombre……
Ejemplo:
Damos Clic en ACEPTAR:
![Page 17: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/17.jpg)
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…..
![Page 18: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/18.jpg)
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:
![Page 19: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/19.jpg)
19
•Damos la opción “ACEPTAR”……
•Ahora vamos a la opción estilos, debe aparecer el nombre de nuestro estilo…..
![Page 20: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/20.jpg)
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….
![Page 21: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/21.jpg)
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….
![Page 22: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/22.jpg)
22
Aparecerá la siguiente ventana….
Cambiaremos el nombre del título…….
![Page 23: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/23.jpg)
23
Por ultimo damos clic izquierdo en “aceptar”
Y en la pantalla se mostrara así:
![Page 24: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/24.jpg)
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”
![Page 25: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/25.jpg)
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:
![Page 26: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/26.jpg)
26
En donde dice vinculo vamos a seleccionar el lugar donde se encuentra nuestra información
almacenada…..
•Ahora daremos clic en “aceptar”
![Page 27: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/27.jpg)
27
•En la pantalla se tendrá que observar así………….
Insertar una imagen…
•Escogeremos de la barra de herramientas la opción “insertar”
![Page 28: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/28.jpg)
28
•Aparecerán opciones de las cuales escogeremos la opción “imagen”
•Automáticamente aparecerá una nueva ventana de donde escogeremos nuestra imagen…
Ejemplo:
![Page 29: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/29.jpg)
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…
![Page 30: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/30.jpg)
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
![Page 31: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/31.jpg)
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
![Page 32: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/32.jpg)
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:
![Page 33: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/33.jpg)
33
Negrita..
Cursiva:
Subrayada:
![Page 34: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/34.jpg)
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”….
![Page 35: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/35.jpg)
35
•Ahora aparecerán varias opciones de las cuales vienen 6 encabezados y depende cual
escojamos pues varia su tamaño….
Ejemplo:
![Page 36: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/36.jpg)
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”………..
![Page 37: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/37.jpg)
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”
![Page 38: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/38.jpg)
38
•Después damos la opción formulario….
• Aparecerán varias opciones de las cuales podemos elegir la que deseamos….
![Page 39: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/39.jpg)
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
![Page 40: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/40.jpg)
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:
![Page 41: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/41.jpg)
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”…..
![Page 42: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/42.jpg)
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….
![Page 43: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/43.jpg)
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……
![Page 44: Paginas web dreamweaver](https://reader036.vdocuments.mx/reader036/viewer/2022062514/559c3f071a28ab273c8b4602/html5/thumbnails/44.jpg)
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