guiadetrabajono sdfhfgd

7/26/2019 Guiadetrabajono sdfhfgd

1/14

Semana No.2

Centro Internacional de Produccin Limpia Lope SENA Regional NarioDiseo Web con Adobe Dreamweaver CS3

GUIA No.2

TEMATICA UTILIDADES DE DREAMWEAVER

OBJETIVO

Reconocer los componentes del Men ms empleados enDreamweaver. Identificar las utilidades del texto y el color de losobjetos. Aprender a insertar y modificar las imgenes. Realizarmapa de imgenes, Crear y modificar estilos CSS en las PginasWeb.

METODOLOGIA

1. Lea las orientaciones que aparecen en la gua como son: Men, color,texto, insertar imgenes, estilos.

2. Lee y realiza laActividad No.2y envala a tu Tutor como se describe en lagua.

3. Afianza tus conocimientos con las animaciones que aparece en las seccinde Documentos en el men de tu curso.

MEN

El men Archivo tambin contiene otros comandos para la visualizacin omanipulacin del documento actual, como Vista previa en el navegador e Imprimircdigo. El men Edicin incluye comandos de seleccin y bsqueda, comoSeleccionar etiqueta padre y Buscar y reemplazar, y proporciona acceso al editorde Mtodos abreviados de teclado y al Editor de la biblioteca de etiquetas.

El men Ver le permite obtener diversas vistas del documento (como la vistaDiseo y la vista Cdigo) y mostrar y ocultar diversos tipos de elementos de pgina

y herramientas de Dreamweaver.

El men Insertar ofrece una alternativa a la barra Insertar para la insercin deobjetos en el documento.

El men Modificar le permite cambiar las propiedades del elemento de pginaseleccionado. A travs de este men, puede editar los atributos de etiquetas,cambiar las tablas y elementos de tablas y realizar diversas operacionesrelacionadas con elementos de biblioteca y plantillas.


2/14

Semana No.2


El men Textole permite aplicar formato al texto fcilmente.

El men Comandos proporciona acceso a diversos comandos, entre otros, unopara aplicar formato al cdigo en funcin de las preferencias de formato, otro paracrear un lbum de fotos y otro para optimizar una imagen empleando MacromediaFireworks.

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

El men Ventanaproporciona acceso a todos los paneles, inspectores y ventanasde Dreamweaver.

El men Ayuda proporciona acceso a la documentacin de Dreamweaver,incluidos los sistemas de ayuda para la utilizacin de Dreamweaver y la creacinde extensiones para Dreamweaver, adems de informacin de referencia paradiversos lenguajes.

COLOR

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

Para la asignacin del color se debe desplegar la paleta de colores, se utilizan 256colores seguros para la Web, estos colores se muestran de la misma forma tantoen 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 elcolor deseado, tanto de la paleta de colores o de cualquier otro color queseale con el cursor en la pantalla.


3/14

Semana No.2


Los colores se expresan en forma de valoreshexadecimales despus del carcter #, los dosprimeros valores equivalen al rojo, los dossiguientes al verde y los 2 restantes al azul (#FF0000).

En la parte superior de este recuadro muestra el valor hexadecimal delcolor. Si conoce el valor hexadecimal del color debe introducirlo elrecuadro blanco. Otro mtodo para cambiar el color es ingresar en el

recuadro blanco el nombre en ingls del color.

TEXTO

El Texto es una de las utilidades ms importantes que trae la herramienta de

diseo Dreamweaver, a continuacin revisaremos sus principales opciones yaplicaciones.

Permite establecer el estilo de prrafo para el texto seleccionado, puede serPrrafo, Encabezado y Predeterminado

Permite especificar el conjunto de fuentes que se emplean en Dreamweaver. Seencuentran fuentes, por la posibilidad que al establecer un tipo determinado de

letra no la tenga instalada su computador.


4/14

Semana No.2


Al ineacin

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

Sangra

Estos botones permiten insertar o anular la sangra en el texto.

Listas Se puede insertar el texto en forma de lista ya sea con vietas o connumeracin. Para realizar este cambio se debe desplazar a las propiedades de laLista que se encuentran en el Men Texto o en el Inspector de Propiedades.

INSERTAR IMGENES

Para incluir una imagen en la pgina, deber estar guardada en la carpeta delsitioque fue creado anteriormente, sino lo est Dreamweaver le preguntar si desea copiarel archivo en el sitio, es importante guardar las imgenes en la carpeta del sitio paraposteriormente ser enviadas al tutor.

Para insertar una imagen:

Coloque el punto de insercin en el lugar de la ventana de documento en el quedesea que aparezca la imagen y, a continuacin, siga uno de estosprocedimientos:

En la categora Comn de la barra Insertar, haga clic en el icono Imagen.En la barra de mens Seleccione Insertar > imagen.

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


5/14

Semana No.2


En la parte inferior podrn observar que aparece el campo URL localizador uniformede recurso (Uniform Resource locutor), es aqu donde se encuentra la ruta deubicacin de la imagen, la misma que aparece en el Inspector de Propiedades en elcampo Origen.

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

Modificar el tamao 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 recuadrosnegros que aparecen alrededor de la imagen.


6/14

Semana No.2


Para cambiar el tamao de manera proporcional, seleccione algn recuadroubicado en las esquinas y al mismo tiempo mantenga oprimido la tecla Shiftmientras modifica la imagen.

2. Seleccione la imagen, a travs del inspector de propiedades, modifique loscampos An (anchura) o Al (altura).

Para alinear las imgenes hay que hacerlo por medio del campo Alinear desde el

Inspector de Propiedades.

ESTILOS

Una de las opciones ms interesantes que posee la herramienta Dreamweaver son los

estilos CSS (Hojas de Estilo en Cascada), que nos permite crear formatos quecontrolan de una forma flexible los contenidos de una pgina Web(texto, imgenes,formato de la pgina, listas, bloques, entre otros).

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

La ventaja de la utilizacin de CSS, es que permite una actualizacin automtica en eldocumento de los cambios que se generen en ellos.

La desventaja de los estilos es que algunos navegadores antiguos no puedensoportarlos 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 estilosdeferentes a un mismo texto.


7/14

Semana No.2


ACTIVIDAD No. 2

Crear estilo CSS nuevo

1. Antes de comenzar a realizar el trabajo correspondiente a la gua de trabajoNo.2 creamos un nuevo sitio con el nombre que tu prefieras, ten en cuentaguardar las imgenes en la carpeta del sitio creada.

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

2.Aparecer el cuadro de dilogo Nuevo estilo CSS.

Defina el tipo de estilo CSS que desea crear:

Escribimos un nombre a nuestro estilo pero ten en cuenta los nombres declase deben comenzar por un punto (.) y pueden contener cualquiercombinacin alfanumrica (por ejemplo .myhead1). Si no introduce el puntoinicial, Dreamweaver lo har de forma automtica. En nuestro casoescribimos de nombre .Titulo

En la opcin TipoSeleccione Clase(puede aplicarse a cualquier etiqueta)En la opcin Defini r en seleccionamos slo este documento.


8/14

Semana No.2


Cuando creamos por primera vez un estilo aparece la opcin Guardararchivo de hojas de estilo guardamos nuestros estilos con el nombre queprefieras pero ten en cuenta guardarla en la carpeta del sitio.

Haga clic en Aceptar. Aparecer el cuadro de dilogo Definicin de estilos.

3. Seleccione las opciones de estilo que desea establecer para el estilo CSSnuevo como tipo fuente, tamao, color, etc. Sigamos los siguientesparmetros si no los encuentras escoge uno similar

Fuente : Arial, Helvetica, sans-serifTamao : 16Estilo : CursivaColor : Verde (Oscuro) cualquier verde.

Damos clic en Aceptar.


9/14

Semana No.2


4. Escribimos en nuestra pgina, el texto LOS PERROS y seleccionamos lapalabra con clic sostenido.

5. Nos dirigimos al inspector de propiedades y en estilos elegimos el estilotitulo realizado. (Nota: Tambin encontramos esta opcin en Textos>Estilos CSS)

6. Como vemos ya aplicamos el estilo a nuestro ttulo y cada vez que lonecesitemos lo buscamos en la opcin Estilo.

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

8. Creamos otro estilo llamado .Texto (ten en cuenta las anterioresinstrucciones). Con las siguientes caractersticas:

Fuente : Verdana, Arial, Helvetica, sans-serifTamao : 14Estilo : NormalColor : Azul


10/14

Semana No.2


9. Escribimos un texto alusivo a los felinos; si gustas copia otro; bjalo deInternet como ms fcil te parezca

El perro es un mamfero carnvoro domstico de la familia de los cnidos, su tamao o talla, suforma y pelaje es muy diverso segn la raza. Posee un odo y olfato muy desarrollados, siendoeste ltimo su principal rgano sensorial. En las razas pequeas puede alcanzar unalongevidad de cerca de 20 aos, con atencin esmerada por parte del propietario, de otraforma su vida en promedio es alrededor de los 15 aos.

10. Le aplicas el estilo Texto.

11. Insertamos una imagen de razas de perros (bjala de Internetbscala engoogle con el nombre razas de perros, te en cuenta guardarla en la carpetadel sitio). Seguimos la opcin Insertar> Imagen.


11/14

Semana No.2


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

Cambiamos el color de fondo de la pgina y la guardamos en el sitio con elnombre de PracticaEstilos y la visualizamos en el navegador con F12Archivo> Vista previa en el navegador.

MAPA DE IMGENESEl mapa de imagen es una imagen que se ha dividido en regiones o zonasinteractivas. Cuando el usuario hace clic en una zona interactiva, se realiza unaaccin (se abre un archivo nuevo, por ejemplo).


12/14

Semana No.2


Para crear un mapa de imgenes, primero que todo hay que seleccionar en lapgina la imagen sobre la que se va a trabajar. Al hacer esto inmediatamenteaparecer en el Inspector de Propiedades los tres botones que se utilizan paracrear los mapas; tienen la forma rectangular, circular y libre. Cuando se pulsaalguno de estos botones la apariencia del puntero cambia al situarlo sobre laimagen.

a. Damos clic en la imagen y seleccionamos el botn rectngulo de la opcinmapas y seleccionamos a uno de los perros en nuestro caso el perro Labrador.


13/14

Semana No.2


b. Ahora vamos a realizar un enlace a este perro por lo cual vamos a google ybuscamos perro labrador, luego ingresamos a la pgina y copiamos el URL de lapgina.

c. Copiamos el URL en la opcin vinculo para realizar un enlace con la imagenperro: NOTA: No olvides borrar el signo # antes de copiar la direccin.

d. Guardamos nuevamente los cambio y la visualizamos en el navegador conF12Archivo > Vista previa en el navegador, al acercar el curso por el perrolabrador aparece una manito que nos indica que hay un vinculo el cual al darleclic nos lleva a la pagina asignada, realiza el mismo proceso con dos razas deperro ms y guarda el documento para posteriormente ser enviado al tutor.


14/14

Semana No.2


ACTIVIDAD COMPLEMENTARIA

ESCRIPCIN

ACTIVIDAD

SEMANA

DOS

Usted ya ha sido contratado por la empresa, ysu primer proyecto esta orientado a la definicinde la pgina web para la empresa, la cualpermitir promocionar todos los productoscomercializados ( imgenes de los productos,descripcin y precios), publicacin de ladescripcin de la empresa (ubicacin,experiencia, persona de contacto), utilizando losestilos, importacin de imgenes y mapas deimagenes, debers disear durante estasemana, la pgina de inicio del portal de laempresa, publicando una imagen en donde se

encuentren asociados los diferentes productoscomercializados por la empresa ( productospara adelgazar, productos para cuidadocorporal, productos para el cuidado del cabello,Maquillaje, entre otros) el nombre de la empresay una breve descripcin de la empresa sideseas cambia la temtica de la empresa lopuedes hacer lo importante es realizar lapresentacin de la misma. No olvides incluirestilos y las imgenes antes de ser utilizadasguardarlas en el sitio creado.

NOTA

Es importante tener en cuenta guardar todoslos archivos en la carpeta del sitio porqueposteriormente ser comprimida y enviada con todos los archivos por el enlaceEVIDENCIAS DE APRENDIZAJE SEMANA DOS, se debe comprimir la carpeta del sitiopara incluir las imgenes trabajadas en el sitio de trabajo, los archivos a enviar en lasemana uno son:

PracticaEstilos.html: Referente a la prctica de estilos e imagen de los perros.Empresa.html: Referente a la actividad de presentacin de la empresa.

ENVIO DE ACTIVIDADES

Enviamos el la prctica de este trabajo al tutor siguiendo el siguiente procedimiento:

1. Elegimos la opcinACTIVIDADESdel men denuestro curso.

2. Damos clic en la carpetaActividades Semana No.23. Elegimos la opcin Ver/Completar actividad:

Actividad 1: Pgina Web - Semana 24. Realizamos un comentario de actividad.5. Adjuntamos el archivo realizado a enviar en nuestro

caso la carpeta comprimida del Sitio y damos clic enenviar.

6. Damos clic en Enviar.

guiadetrabajono sdfhfgd

Documents