Semana No.2                                   GUIA No.2TEMATICA        UTILIDADES DE DREAMWEAVEROBJETIVO                Re...
Semana No.2El menú Texto le permite aplicar formato al texto fácilmente.El menú Comandos proporciona acceso a diversos com...
Semana No.2Los colores se expresan en forma de valoreshexadecimales después del carácter #, los dosprimeros valores equiva...
Semana No.2AlineaciónEl texto puede ser alineado a la izquierda, centrado, derecha y justificado.SangríaEstos botones perm...
Semana No.2En la parte inferior podrán observar que aparece el campo URL localizador uniformede recurso (Uniform Resource ...
Semana No.2Para cambiar el tamaño de manera proporcional, seleccione algún recuadroubicado en las esquinas y al mismo tiem...
Semana No.2                                                               ACTIVIDAD No. 2Crear estilo CSS nuevo1. Antes de...
Semana No.2   •   Cuando creamos por primera vez un estilo aparece la opción Guardar       archivo de hojas de estilo guar...
Semana No.24. Escribimos en nuestra página, el texto “LOS PERROS” y seleccionamos la   palabra con clic sostenido.5. Nos d...
Semana No.2    9. Escribimos un texto alusivo a los felinos; si gustas copia otro; bájalo de       Internet como más fácil...
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 ...
Semana No.2Para crear un mapa de imágenes, primero que todo hay que seleccionar en lapágina la imagen sobre la que se va a...
Semana No.2b. Ahora vamos a realizar un enlace a este perro por lo cual vamos a google y   buscamos perro labrador, luego ...
Semana No.2                                                         ACTIVIDAD COMPLEMENTARIA                              ...
Próxima SlideShare
Cargando en…5
×

Guia de trabajo no.2

3.345 visualizaciones

Publicado el

guia de trabajo numero 2

3 comentarios
1 recomendación
Estadísticas
Notas
Sin descargas
Visualizaciones
Visualizaciones totales
3.345
En SlideShare
0
De insertados
0
Número de insertados
19
Acciones
Compartido
0
Descargas
245
Comentarios
3
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Guia de trabajo no.2

  1. 1. Semana No.2 GUIA No.2TEMATICA UTILIDADES DE DREAMWEAVEROBJETIVO 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 omanipulación del documento actual, como Vista previa en el navegador e Imprimircódigo. El menú Edición incluye comandos de selección y búsqueda, comoSeleccionar etiqueta padre y Buscar y reemplazar, y proporciona acceso al editorde 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 vistaDiseño y la vista Código) y mostrar y ocultar diversos tipos de elementos de páginay herramientas de Dreamweaver.El menú Insertar ofrece una alternativa a la barra Insertar para la inserción deobjetos en el documento.El menú Modificar le permite cambiar las propiedades del elemento de páginaseleccionado. A través 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. Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3
  2. 2. Semana No.2El menú Texto le permite aplicar formato al texto fácilmente.El menú Comandos proporciona acceso a diversos comandos, entre otros, unopara aplicar formato al código en función 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, asícomo para administrar los archivos del sitio actual (en Macintosh)El menú Ventana proporciona acceso a todos los paneles, inspectores y ventanasde 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ónde extensiones para Dreamweaver, además de información de referencia paradiversos lenguajes.COLORSe 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 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 el color deseado, tanto de la paleta de colores o de cualquier otro color que señale con el cursor en la pantalla. Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3
  3. 3. Semana No.2Los colores se expresan en forma de valoreshexadecimales después del carácter #, 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 método para cambiar el color es ingresar en elrecuadro blanco el nombre en inglés del color.TEXTOEl Texto es una de las utilidades más importantes que trae la herramienta dediseño Dreamweaver, a continuación revisaremos sus principales opciones yaplicaciones.Permite establecer el estilo de párrafo para el texto seleccionado, puede serPárrafo, Encabezado y PredeterminadoPermite especificar el conjunto de fuentes que se emplean en Dreamweaver. Seencuentran fuentes, por la posibilidad que al establecer un tipo determinado deletra no la tenga instalada su computador. Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3
  4. 4. Semana No.2AlineaciónEl texto puede ser alineado a la izquierda, centrado, derecha y justificado.SangríaEstos 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 connumeración. 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 IMÁGENESPara incluir una imagen en la página, deberá estar guardada en la carpeta del sitioque fue creado anteriormente, sino lo está Dreamweaver le preguntará si desea copiarel archivo en el sitio, es importante guardar las imágenes en la carpeta del sitio paraposteriormente ser enviadas al tutor.Para insertar una imagen:Coloque el punto de inserción en el lugar de la ventana de documento en el quedesea que aparezca la imagen y, a continuación, siga uno de estosprocedimientos: 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. Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3
  5. 5. Semana No.2En la parte inferior podrán observar que aparece el campo URL localizador uniformede recurso (Uniform Resource locutor), es aquí donde se encuentra la ruta deubicación 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 situación se debe actualizar la ruta para que la imagen vuelvaaparecer.Modificar el tamaño de la ImagenExisten 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. Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3
  6. 6. Semana No.2Para cambiar el tamaño de manera proporcional, seleccione algún recuadroubicado en las esquinas y al mismo tiempo mantenga oprimido la tecla Shiftmientras 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 elInspector de Propiedades.ESTILOSUna de las opciones más interesantes que posee la herramienta Dreamweaver son losestilos CSS (Hojas de Estilo en Cascada), que nos permite crear formatos quecontrolan 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 defuente, 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 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. Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3
  7. 7. Semana No.2 ACTIVIDAD No. 2Crear estilo CSS nuevo1. 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. Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3
  8. 8. 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. Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3
  9. 9. Semana No.24. 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 Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3
  10. 10. 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 parezcaEl perro es un mamífero carnívoro doméstico de la familia de los cánidos, su tamaño o talla, suforma y pelaje es muy diverso según la raza. Posee un oído y olfato muy desarrollados, siendoeste último su principal órgano sensorial. En las razas pequeñas puede alcanzar unalongevidad de cerca de 20 años, con atención esmerada por parte del propietario, de otraforma 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. Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3
  11. 11. 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 elnombre de PracticaEstilos y la visualizamos en el navegador con F12 ó Archivo> Vista previa en el navegador.MAPA DE IMÁGENESEl 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 unaacción (se abre un archivo nuevo, por ejemplo). Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3
  12. 12. Semana No.2Para crear un mapa de imágenes, primero que todo hay que seleccionar en lapágina 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 botón rectángulo de la opción mapas y seleccionamos a uno de los perros en nuestro caso el perro Labrador. Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3
  13. 13. Semana No.2b. 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. Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3
  14. 14. 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 productosESCRIPCIÓ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 ACTIVIDADESEnviamos 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. Centro Internacional de Producción Limpia Lope SENA Regional Nariño Diseño Web con Adobe Dreamweaver CS3

×