INSERTAR ICONOS EN LA PRIMERA COLUMNA DE LA PAGINA WEB

Transcripción

1 INSTITUCIÓN EDUCATIVA ABSALÓN TORRES CAMACHO Resolución No de septiembre 6 de 2002 Nit MÓDULO: Dreamweaver GUÍA No. 05 GRADOS: Onces DOCENTE: Yamileth González Peña ÁREA DE TECNOLOGÍA E INFORMÁTICA INSERTAR ICONOS EN LA PRIMERA COLUMNA DE LA PAGINA WEB DESEMPEÑO: Insertar columnas e íconos en una página web. CRITERIOS DE EVALUACIÓN: Adecuado desarrollo de la actividad Puntualidad y cumplimiento en la entrega de la actividad Sustentar de forma idónea el desarrollo de la actividad ACTIVIDAD PRÁCTICA Insertar los íconos de Facebook, Twitter y Youtube en la primera columna de la página web principal, para ello siga los siguientes pasos: 1. Ejecute Dreamweaver 2. De clic en abrir o en archivo abrir 3. En la unidad de memoria USB o en el computador, busque y seleccione el archivo index, y de clic en abrir 4. De clic al lado derecho del menu (por fuera) 5. De clic en insertar y luego seleccione la opción tabla 6. En fila escriba 1 y en columnas escriba 3 7. En ancho de tabla escriba El grosor del borde debe estar en 0, en las demás opciones no se escribe nada, se dejan como están. 9. De clic en aceptar, inmediatamente aparecerán tres rectángulos, de clic dentro del primer rectángulo y oprima la tecla Enter dos veces. 10. Verifique que en la parte inferior de la ventana aparezca la barra de propiedades, como se ilustra en la siguiente imagen.

2 11. Si no aparece la ventana de propiedades de clic en la pestaña ubicada en la parte inferior de la ventana 12. Si la ventana de propiedades no aparece, de clic en propiedades

3 13. Cuando aparezca la ventana de propiedades de clic dentro de la primera columna, luego de clic en el cuadrito Fnd y seleccione un color suave que combine con la página web. 14. Inmediatamente primera columna aparecerá con el color de fondo que escogiste.

4 15. Coloque el mismo color de fondo en la tercera columna, para ello copie el código que se muestra enseguida del cuadrito donde escogiste el color. 16. De clic en la tercera columna y en la zona que se ilustra a continuación pegue el código y oprima la tecla Enter.

5 17. Aplique color de fondo blanco en la en la segunda columna. 18. En la primera columna escriba con letra minúscula Síganos en. 19. Para que el texto suba, seleccione el texto, de clic en la lista desplegable Vert y escoja la opción Superior.

6 20. Inmediatamente el texto subirá. 21. Para que el texto quede centrado, selecciónelo y de clic en el botón alinear al centro

7 22. De clic al final del texto Síganos en y Oprima la tecla Enter dos veces. 23. De clic en Insertar, como se muestra en el óvalo rojo y seleccione la opción imagen. 24. Busque y de clic sobre la imagen de Facebook y de clic en el botón Aceptar. 25. En el siguiente cuadro, de clic en Aceptar nuevamente.

8 26. La imagen aparecerá de un tamaño muy grande, para reducir el tamaño de la imagen se debe modificar el Ancho y Alto de la imagen, para ello de clic en An, borre y escriba 100, y en Alt también borre y escriba 100, luego de clic por fuera de la columna donde está la imagen, si el tamaño para usted no está bien siga reduciendo el tamaño de la imagen, hasta que quede del tamaño que usted desee. 27. La imagen quedará del tamaño deseado. Luego de clic al lado derecho (por fuera) de la imagen, aparecerá el cursor titilando.

9 28. Oprima la tecla enter y escriba con letra minúscula Facebook. 29. De clic al final de la palabra Facebook, oprima la tecla Enter dos veces y repita desde el paso 22 hasta el paso 27 para insertar la imagen de Twitter. 30. De clic al final de la palabra Twitter, oprima la tecla Enter dos veces y repita desde el paso 22 hasta el paso 27 para insertar la imagen de Youtube. 31. Finalmente la primera columna deberá quedar con las imágenes de Facebook, Twitter y Youtube, como se ilustra a continuación.

10 32. Para guardar los cambios y observar cómo quedará la página web, de clic en el botón Vista previa (Ver óvalo rojo) y seleccione la opción vista previa en Iexplore o el navegador que le aparezca. 33. Cuando aparezca el mensaje Guardar Cambios en Index.html?, de clic en si. Inmediatamente aparecerá la página web en el navegador.