Guia de trabajo no.2

Semana No.2

GUIA No.2
TEMATICA UTILIDADES DE DREAMWEAVER
OBJETIVO

Reconocer los componentes del Menú más empleados en
Dreamweaver. Identificar las utilidades del texto y el color de los
objetos. Aprender a insertar y modificar las imágenes. Realizar
mapa de imágenes, Crear y modificar estilos CSS en las Páginas
Web.

METODOLOGIA
1. Lea las orientaciones que aparecen en la guía como son: Menú, color,
texto, insertar imágenes, estilos.
2. Lee y realiza la Actividad No.2 y envíala a tu Tutor como se describe en la
guía.
3. Afianza tus conocimientos con las animaciones que aparece en las sección
de Documentos en el menú de tu curso.

MENÚ

El menú Archivo también contiene otros comandos para la visualización o
manipulación del documento actual, como Vista previa en el navegador e Imprimir
código. El menú Edición incluye comandos de selección y búsqueda, como
Seleccionar etiqueta padre y Buscar y reemplazar, y proporciona acceso al editor
de Métodos abreviados de teclado y al Editor de la biblioteca de etiquetas.

El menú Ver le permite obtener diversas vistas del documento (como la vista
Diseño y la vista Código) y mostrar y ocultar diversos tipos de elementos de página
y herramientas de Dreamweaver.

El menú Insertar ofrece una alternativa a la barra Insertar para la inserción de
objetos en el documento.

El menú Modificar le permite cambiar las propiedades del elemento de página
seleccionado. A través de este menú, puede editar los atributos de etiquetas,
cambiar las tablas y elementos de tablas y realizar diversas operaciones
relacionadas con elementos de biblioteca y plantillas.

Centro Internacional de Producción Limpia Lope SENA Regional Nariño
Diseño Web con Adobe Dreamweaver CS3

Semana No.2

El menú Texto le permite aplicar formato al texto fácilmente.

El menú Comandos proporciona acceso a diversos comandos, entre otros, uno
para aplicar formato al código en función de las preferencias de formato, otro para
crear un álbum de fotos y otro para optimizar una imagen empleando Macromedia
Fireworks.

El menú Sitio proporciona opciones de menú para crear, abrir y editar sitios, así
como para administrar los archivos del sitio actual (en Macintosh)

El menú Ventana proporciona acceso a todos los paneles, inspectores y ventanas
de Dreamweaver.

El menú Ayuda proporciona acceso a la documentación de Dreamweaver,
incluidos los sistemas de ayuda para la utilización de Dreamweaver y la creación
de extensiones para Dreamweaver, además de información de referencia para
diversos lenguajes.

COLOR

Se puede modificar el color de muchos objetos (texto, tablas, fondo de página,
entre otros).

Para la asignación del color se debe desplegar la paleta de colores, se utilizan 256
colores seguros para la Web, estos colores se muestran de la misma forma tanto
en Windows como en Linux.

Pulse sobre el recuadro gris

que se encuentra en el panel de propiedades, de esta forma aparecerá
la paleta de colores con un cursor en forma de gotero para seleccionar el
color deseado, tanto de la paleta de colores o de cualquier otro color que
señale con el cursor en la pantalla.


Semana No.2

Los colores se expresan en forma de valores
hexadecimales después del carácter #, los dos
primeros valores equivalen al rojo, los dos
siguientes al verde y los 2 restantes al azul (
#FF0000).

En la parte superior de este recuadro muestra el valor hexadecimal del
color. Si conoce el valor hexadecimal del color debe introducirlo el
recuadro blanco. Otro método para cambiar el color es ingresar en el
recuadro blanco el nombre en inglés del color.

TEXTO

El Texto es una de las utilidades más importantes que trae la herramienta de
diseño Dreamweaver, a continuación revisaremos sus principales opciones y
aplicaciones.

Permite establecer el estilo de párrafo para el texto seleccionado, puede ser
Párrafo, Encabezado y Predeterminado

Permite especificar el conjunto de fuentes que se emplean en Dreamweaver. Se
encuentran fuentes, por la posibilidad que al establecer un tipo determinado de
letra no la tenga instalada su computador.


Semana No.2

Alineación

El texto puede ser alineado a la izquierda, centrado, derecha y justificado.

Sangría

Estos botones permiten insertar o anular la sangría en el texto.

Listas Se puede insertar el texto en forma de lista ya sea con viñetas o con
numeración. Para realizar este cambio se debe desplazar a las propiedades de la
Lista que se encuentran en el Menú Texto o en el Inspector de Propiedades.

INSERTAR IMÁGENES

Para incluir una imagen en la página, deberá estar guardada en la carpeta del sitio
que fue creado anteriormente, sino lo está Dreamweaver le preguntará si desea copiar
el archivo en el sitio, es importante guardar las imágenes en la carpeta del sitio para
posteriormente ser enviadas al tutor.

Para insertar una imagen:

Coloque el punto de inserción en el lugar de la ventana de documento en el que
desea que aparezca la imagen y, a continuación, siga uno de estos
procedimientos:

En la categoría Común de la barra Insertar, haga clic en el icono Imagen.
En la barra de menús Seleccione Insertar > imagen.

Busque y seleccione el origen de imagen o contenido que desee insertar.


Semana No.2

En la parte inferior podrán observar que aparece el campo URL localizador uniforme
de recurso (Uniform Resource locutor), es aquí donde se encuentra la ruta de
ubicación de la imagen, la misma que aparece en el Inspector de Propiedades en el
campo Origen.

Si aparece un cuadro gris o un recuadro en blanco con una X roja, significa que la ruta
esta de forma incorrecta, o puede ser que se ha modificado el nombre de la imagen,
para solucionar esta situación se debe actualizar la ruta para que la imagen vuelva
aparecer.

Modificar el tamaño de la Imagen

Existen 2 formas para realizar el cambio de dimensiones en una imagen:

1. Seleccione la imagen y arrastre con el puntero alguno de sus recuadros
negros que aparecen alrededor de la imagen.


Semana No.2

Para cambiar el tamaño de manera proporcional, seleccione algún recuadro
ubicado en las esquinas y al mismo tiempo mantenga oprimido la tecla Shift
mientras modifica la imagen.

2. Seleccione la imagen, a través del inspector de propiedades, modifique los
campos An (anchura) o Al (altura).

Para alinear las imágenes hay que hacerlo por medio del campo Alinear desde el
Inspector de Propiedades.

ESTILOS

Una de las opciones más interesantes que posee la herramienta Dreamweaver son los
estilos CSS (Hojas de Estilo en Cascada), que nos permite crear formatos que
controlan de una forma flexible los contenidos de una página Web(texto, imágenes,
formato de la página, listas, bloques, entre otros).

Por medio de los CSS podemos combinar atributos de color, de tamaño, de tipos de
fuente, o de fondo; buscando la forma de no repetir asignaciones de estos atributos.

La ventaja de la utilización de CSS, es que permite una actualización automática en el
documento de los cambios que se generen en ellos.

La desventaja de los estilos es que algunos navegadores antiguos no pueden
soportarlos y a veces los ignoran, aunque esto puede ocurrir solo en casos contados.

Nota: Para evitar que ocurra un conflicto en los CSS creados, evite aplicar dos estilos
deferentes a un mismo texto.


Semana No.2

ACTIVIDAD No. 2

Crear estilo CSS nuevo

1. Antes de comenzar a realizar el trabajo correspondiente a la guía de trabajo
No.2 creamos un nuevo sitio con el nombre que tu prefieras, ten en cuenta
guardar las imágenes en la carpeta del sitio creada.

2. Seguimos la ruta Texto > Estilos CSS > Nuevo estilo CSS.

2. Aparecerá el cuadro de diálogo Nuevo estilo CSS.

Defina el tipo de estilo CSS que desea crear:

• Escribimos un nombre a nuestro estilo pero ten en cuenta los nombres de
clase deben comenzar por un punto (.) y pueden contener cualquier
combinación alfanumérica (por ejemplo .myhead1). Si no introduce el punto
inicial, Dreamweaver lo hará de forma automática. En nuestro caso
escribimos de nombre .Titulo
• En la opción Tipo Seleccione Clase (puede aplicarse a cualquier etiqueta)
En la opción Definir en seleccionamos sólo este documento.


Semana No.2

• Cuando creamos por primera vez un estilo aparece la opción Guardar
archivo de hojas de estilo guardamos nuestros estilos con el nombre que
prefieras pero ten en cuenta guardarla en la carpeta del sitio.

Haga clic en Aceptar. Aparecerá el cuadro de diálogo Definición de estilos.

3. Seleccione las opciones de estilo que desea establecer para el estilo CSS
nuevo como tipo fuente, tamaño, color, etc. Sigamos los siguientes
parámetros si no los encuentras escoge uno similar

Fuente : Arial, Helvetica, sans-serif
Tamaño : 16
Estilo : Cursiva
Color : Verde (Oscuro) ó cualquier verde.

Damos clic en Aceptar.


Semana No.2

4. Escribimos en nuestra página, el texto “LOS PERROS” y seleccionamos la
palabra con clic sostenido.

5. Nos dirigimos al inspector de propiedades y en estilos elegimos el estilo
titulo realizado. (Nota: También encontramos esta opción en Textos>Estilos CSS)

6. Como vemos ya aplicamos el estilo a nuestro título y cada vez que lo
necesitemos lo buscamos en la opción Estilo.

7. Nos dirigimos al inspector de propiedades y en estilos elegimos el estilo
titulo realizado.

8. Creamos otro estilo llamado .Texto (ten en cuenta las anteriores
instrucciones). Con las siguientes características:

Fuente : Verdana, Arial, Helvetica, sans-serif
Tamaño : 14
Estilo : Normal
Color : Azul


Semana No.2

9. Escribimos un texto alusivo a los felinos; si gustas copia otro; bájalo de
Internet como más fácil te parezca

El perro es un mamífero carnívoro doméstico de la familia de los cánidos, su tamaño o talla, su
forma y pelaje es muy diverso según la raza. Posee un oído y olfato muy desarrollados, siendo
este último su principal órgano sensorial. En las razas pequeñas puede alcanzar una
longevidad de cerca de 20 años, con atención esmerada por parte del propietario, de otra
forma su vida en promedio es alrededor de los 15 años.

10. Le aplicas el estilo Texto.

11. Insertamos una imagen de razas de perros (bájala de Internet búscala en
google con el nombre razas de perros, te en cuenta guardarla en la carpeta
del sitio). Seguimos la opción Insertar> Imagen.


Semana No.2

12. Damos clic a la imagen y la centramos como lo indica la imagen.

Cambiamos el color de fondo de la página y la guardamos en el sitio con el
nombre de PracticaEstilos y la visualizamos en el navegador con F12 ó Archivo
> Vista previa en el navegador.

MAPA DE IMÁGENES

El mapa de imagen es una imagen que se ha dividido en regiones o zonas
interactivas. Cuando el usuario hace clic en una zona interactiva, se realiza una
acción (se abre un archivo nuevo, por ejemplo).


Semana No.2

Para crear un mapa de imágenes, primero que todo hay que seleccionar en la
página la imagen sobre la que se va a trabajar. Al hacer esto inmediatamente
aparecerá en el Inspector de Propiedades los tres botones que se utilizan para
crear los mapas; tienen la forma rectangular, circular y libre. Cuando se pulsa
alguno de estos botones la apariencia del puntero cambia al situarlo sobre la
imagen.

a. Damos clic en la imagen y seleccionamos el botón rectángulo de la opción
mapas y seleccionamos a uno de los perros en nuestro caso el perro Labrador.


Semana No.2

b. Ahora vamos a realizar un enlace a este perro por lo cual vamos a google y
buscamos perro labrador, luego ingresamos a la página y copiamos el URL de la
página.

c. Copiamos el URL en la opción vinculo para realizar un enlace con la imagen
perro: NOTA: No olvides borrar el signo # antes de copiar la dirección.

d. Guardamos nuevamente los cambio y la visualizamos en el navegador con
F12 ó Archivo > Vista previa en el navegador, al acercar el curso por el perro
labrador aparece una manito que nos indica que hay un vinculo el cual al darle
clic nos lleva a la pagina asignada, realiza el mismo proceso con dos razas de
perro más y guarda el documento para posteriormente ser enviado al tutor.


Semana No.2

ACTIVIDAD COMPLEMENTARIA
Usted ya ha sido contratado por la empresa, y
su primer proyecto esta orientado a la definición
de la página web para la empresa, la cual
permitirá promocionar todos los productos
ESCRIPCIÓN ACTIVIDAD SEMANA DOS

comercializados ( imágenes de los productos,
descripción y precios), publicación de la
descripción de la empresa (ubicación,
experiencia, persona de contacto), utilizando los
estilos, importación de imágenes y mapas de
imagenes, deberás diseñar durante esta
semana, la página de inicio del portal de la
empresa, publicando una imagen en donde se
encuentren asociados los diferentes productos
comercializados por la empresa ( productos
para adelgazar, productos para cuidado
corporal, productos para el cuidado del cabello,
Maquillaje, entre otros) el nombre de la empresa
y una breve descripción de la empresa si
deseas cambia la temática de la empresa lo
puedes hacer lo importante es realizar la
presentación de la misma. No olvides incluir
estilos y las imágenes antes de ser utilizadas
guardarlas en el sitio creado.

Es importante tener en cuenta guardar todos los archivos en la carpeta del sitio porque
posteriormente será comprimida y enviada con todos los archivos por el enlace
EVIDENCIAS DE APRENDIZAJE SEMANA DOS, se debe comprimir la carpeta del sitio
para incluir las imágenes trabajadas en el sitio de trabajo, los archivos a enviar en la
NOTA

semana uno son:

PracticaEstilos.html: Referente a la práctica de estilos e imagen de los perros.
Empresa.html: Referente a la actividad de presentación de la empresa.

ENVIO DE ACTIVIDADES
Enviamos el la práctica de este trabajo al tutor siguiendo el siguiente procedimiento:

1. Elegimos la opción ACTIVIDADES del menú de
nuestro curso.
2. Damos clic en la carpeta Actividades Semana No.2
3. Elegimos la opción Ver/Completar actividad:
Actividad 1: Página Web - Semana 2
4. Realizamos un comentario de actividad.
5. Adjuntamos el archivo realizado a enviar en nuestro
caso la carpeta comprimida del Sitio y damos clic en
enviar.
6. Damos clic en Enviar.


Guia de trabajo no.2

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (15)

En vedette

En vedette (20)

Similaire à Guia de trabajo no.2

Similaire à Guia de trabajo no.2 (20)

Guia de trabajo no.2