tutorial dreamweaver - 2da clase

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

Upload: deliamontes

Post on 24-Dec-2015

246 views

Category:

Documents


1 download

DESCRIPTION

En esta oportunidad aprenderemos a crear:- Formatos de texto- viñetas y numeración- crear y administrar sitios- hipervínculosAtteDelia Montes

TRANSCRIPT

Page 1: 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.

Page 2: Tutorial Dreamweaver - 2da Clase

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

Page 3: Tutorial Dreamweaver - 2da Clase

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

Page 4: Tutorial Dreamweaver - 2da Clase

DREAMWEAVER Prof. Delia Montes

Página | 11

- Clic en la barra de Inspector de propiedades y clic en HTML

Page 5: Tutorial Dreamweaver - 2da Clase

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

Page 6: Tutorial Dreamweaver - 2da Clase

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.

Page 7: Tutorial Dreamweaver - 2da Clase

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

Page 8: Tutorial Dreamweaver - 2da Clase

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.

Page 9: Tutorial Dreamweaver - 2da Clase

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.

Page 10: Tutorial Dreamweaver - 2da Clase

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

Page 11: Tutorial Dreamweaver - 2da Clase

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.