Guia de trabajo no.2

Semana No.2

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

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.

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

ESC

RIP

CIÓ

N A

CTI

VID

AD

SEM

AN

A D

OS

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

NO

TA

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

Documents

Transcript of Guia de trabajo no.2