Tutorial Dreamweaver - 2da Clase
-
Upload
deliamontes -
Category
Documents
-
view
231 -
download
1
description
Transcript of Tutorial Dreamweaver - 2da Clase
DREAMWEAVER Prof. Delia Montes
Página | 8
Para dar un formato a la fuente debemos ir a la barra de inspector de propiedades, en caso no
visualices la barra ve al Menú ventana / Propiedades (CTRL + F3)
Si únicamente te aparece el título del panel, es porque está contraído. Para que te aparezca
desplegado debes hacer doble clic en Propiedades.
Selecciona la primera línea de texto. En el inspector de propiedades pulsa HTML y aplica el formato
Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro Formato.
DREAMWEAVER Prof. Delia Montes
Página | 9
Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono CSS a la
izquierda, debemos tomar en cuenta que Dreamweaver, exige la creación de estilos para ser aplicados
a nuestro texto
Si no deseamos crear estilos podemos hacerlo de la siguiente manera:
Clic en “Regla de Destino”
Seleccionar “Nuevo estilo en línea”
Seleccione el color que desee
Tomar en cuenta que si desea volver a modificar o agregar otro formato al texto, deberemos
volver a repetir el procedimiento anterior.
Mediante el inspector de propiedades en Dreamweaver CS4 accedemos tanto a las propiedades de CSS como a
las propiedades de HTML.
Podemos decir que en una página web, HTML se encarga de estructurar el contenido, la información, mientras
que CSS se encarga de mostrar ese contenido con el formato y estilos adecuados.
También podemos aplicar un formato mediante el Menú Formato
DREAMWEAVER Prof. Delia Montes
Página | 10
CREACION DE LISTAS - Listas Desordenadas
- Listas ordenadas
Procedimiento - Podemos realizar el procedimiento de diversas maneras
- Seleccionar todo el contenido de la lista
DREAMWEAVER Prof. Delia Montes
Página | 11
- Clic en la barra de Inspector de propiedades y clic en HTML
DREAMWEAVER Prof. Delia Montes
Página | 12
- Seleccionar des “Windows ” hasta “Internet” e ir al panel de inspector de propiedades nuevamente y
seleccionar Sangría de Texto
- O podemos ir al Menú Formato/ Lista / Propiedades,
- En estilo seleccionaremos el que deseemos
- Realizaremos el mismo procedimiento con el resto de la lista
DREAMWEAVER Prof. Delia Montes
Página | 13
SITIO LOCAL
Dreamweaver exige crear un sitio local donde se almacenará todos los archivos necesarios para la creación de la
página web, es necesario tener en cuenta que si se puede copiar el sitio local en un USB, pero al momento de
acceder a otro equipo, necesariamente se tendrá que volver a crear un sitio y jalar las carpetas copiadas del sitio
creado anteriormente.
CREACION DE SITIO:
Clic en el menú Sitio/ Administrar sitio, o clic sobre el ícono que se encuentra en la barra
superior, /seleccionar la opción Administrar sitios, aparecerá una ventana que permite modificar,
eliminar y crea un nuevo sitio.
Clic en nuevo/Sitio
Aparecerá una ventana, ingresar el nombre del sitio, seleccionar la carpeta principal del proyecto, y
también seleccionar la carpeta donde se almacenará las imágenes a utilizar, clic en aceptar.
El sitio ya aparece creado en la lista.
Clic en listo.
Ahora el sitio esta creado y aparecerá en las ventanas acoplables.
DREAMWEAVER Prof. Delia Montes
Página | 14
Para cambiar la vista del sitio deberá darle clic en el ícono
Muestra la vista más amplia del sitio, para retornar a la ventana anterior, volver a darle clic sobre el
mismo ícono.
Podemos visualizar u ocultar el panel del sitio presionando F8,
ADMINISTRAR SITIO LOCAL: Al administrar un sitio podemos modificar, eliminar el sitio local creado
Clic en el menú Sitio/ Administrar sitio, o clic sobre el ícono que se encuentra en la barra superior, /seleccionar
la opción Administrar sitio
DREAMWEAVER Prof. Delia Montes
Página | 15
CREAR VINCULOS
Tenemos 4 maneras de crear un vínculo:
1. Mediante el panel “Insertar”/ Hipervínculo
Procedimiento: - Clic en la zona a insertar el texto del hipervínculo
- Clic en “hipervínculo”
- Llenar las casillas
cuadro Índice de fichas, permite introducir un número para el orden de fichas.
cuadro Título, permite escribir un título de página para el vínculo. (texto alternativo)
Clave de acceso, Permite introducir un equivalente de teclado (una letra) para seleccionar el vínculo en el navegador.
DREAMWEAVER Prof. Delia Montes
Página | 16
2. Digitando el nombre del archivo HTML o la dirección de la página web
Procedimiento: Insertar un texto
Seleccionarlo
Ir a la ventana de inspector de propiedades
Clic en HTML
En “vínculos” escribir el nombre del archivo HTML o dirección de la página web
Seleccionar el tipo de destino
3. Usando el Señalador de Archivo
Procedimiento: Insertar un texto
Seleccionarlo
Ir a la ventana de inspector de propiedades
Clic en HTML
De un clic sobre el señalador de archivo y arrástrelo hasta la ubicación del archivo en la ventana de sitio.
DREAMWEAVER Prof. Delia Montes
Página | 17
4. Usando el Examinador de Archivo - Clic en el examinador de archivo - seleccionar el archivo HTML a vincular
Vincular a cuenta de correo Electrónico - clic en la zona donde desea insertar el texto del vinculo
- ir al Panel Insertar/ Común/vinculo de correo electrónico
- acepte y pre visualice
DREAMWEAVER Prof. Delia Montes
Página | 18
Nota: para poder enviar el correo, deberá tener instalado el Outlook y contar con una cuenta de correo
privada.
Opción Destino Seleccione una ubicación para abrir el documento:
_blank carga el documento vinculado en una nueva ventana sin nombre del navegador.
_parent carga el documento vinculado en el marco padre o en la ventana padre del marco que contiene el
vínculo. Si el marco que contiene el vínculo no está anidado, el documento vinculado se cargará en la ventana
completa del navegador.
_self carga el documento vinculado en el mismo marco o la misma ventana que el vínculo. Este destino es el
predeterminado, por lo que normalmente no es preciso especificarlo.
_top carga el documento vinculado en la ventana completa del navegador, eliminando de esta forma todos los
marcos.