Scribd Logo
Upload

Welcome to Scribd!

  • Diseño Web - Taller 4

    Uploaded by

    jeckson_loza
    134 views5 pages
    Cuarto taller del curso de páginas web

    Original Title

    Diseño web - taller 4

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Cuarto taller del curso de páginas web

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    134 views5 pages

    Diseño Web - Taller 4

    Uploaded by

    jeckson_loza
    Cuarto taller del curso de páginas web

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL AREA: TEMA: Tecnologa e Informtica Grado 11 Diseo Web - Editores web

    Introduccin Para el diseo de pginas web es necesario contar con un editor web. Hasta el momento, se ha empleado un editor de texto como Bloc de Notas para desarrollar los ejercicios escribiendo directamente cdigo HTML. Tambin es posible construir pginas web sin necesidad de conocer a fondo sobre lenguaje HTML y es a travs del uso de Editores Web WYSIWYG (What You See Is What You Get), los cuales ayudan al diseo de una pgina en muchos aspectos. Hoy aprenderemos cmo descargar e instalar un editor web gratuito y reconoceremos su entorno de trabajo y algunas funciones bsicas.

    1. Qu es un editor Web?
    Un editor es cualquier aplicacin que nos permita crear, editar y guardar una pgina Web. Podemos considerar tres categoras de editores Web: Editores de texto: Nos permiten editar el cdigo fuente, como puede ser el bloc de notas. Editores de HTML: Funcionan como los editores de texto, pero con funciones extra, como mostrar las etiquetas de colores, o cerrarlas automticamente. Editores WYSIWYG: Por un lado, nos permiten editar el cdigo fuente como los editores de HTML. Y por otro, nos permiten trabajar en vista de diseo. Es decir, ver la pgina como se vera en un navegador mientras la editamos. Editores de este tipo pueden ser Dreamweaver (editor pago) o KompoZer (gratuito).

    2. El Entorno de KompoZer
    El aspecto general de KompoZer es el siguiente:
    Barra de Ttulo Barra de Men Barra de Redaccin Barra de Formato Barra de Navegacin con pestaas Panel Lateral rea de Edicin

    Barra de estado

    Barra de modo de Edicin

    En la parte superior encontramos la barra de ttulo, donde se ve el ttulo de la hoja. Debajo, encontramos una barra de mens, desde la que podemos acceder a todas las opciones del programa. Las opciones ms comunes, como Guardar, Nuevo, o insertar Enlaces o Imgenes las encontramos en la llamada barra de redaccin. Debajo de esta barra, encontramos las barras de formato, pensadas para formatear el documento. Encontramos dos desplegables. El primero, que en la imagen muestra Texto en el cuerpo, permite elegir el elemento que contienen el texto que escribimos (encabezado o prrafo). El segundo, que en la imagen muestra (sin clase) permite asignar una clase al texto. Si seleccionamos un fragmento de texto, y le asignamos una clase, encerrar el texto en una etiqueta <span> con la clase dada. En la parte central, encontramos el rea de edicin, donde podemos editar el contenido de nuestra pgina. Podemos tener varias abiertas en distintas pestaas. En la parte inferior, en la barra de estado, encontramos una barra que muestra la jerarqua de etiquetas que hay sobre el lugar donde est el punto de insercin. Es decir, lo que aqu vemos son todas las etiquetas que contienen a lo que tenemos seleccionado, desde la ms inmediata a la derecha del todo, a la primera, que suele ser el <body>. Esto nos permite seleccionar cualquier etiqueta y todo su contenido slo haciendo clic sobre ella.

    Actividad Abra KompoZer y responda en su cuaderno las siguientes preguntas acerca de su entorno de trabajo. Puede hacer uso de la ayuda de la aplicacin. 1. 2. 3. En el rea de edicin se observan tres pestaas: Diseo, Dividir y Cdigo fuente. Describa la utilidad de cada una. Cuntas opciones hay en la barra modo de edicin? Nmbrelas. Relacione las teclas de atajo para las siguientes acciones: a. Nuevo archivo _________ f. Insertar enlace _________ b. c. d. e. Abrir archivo Guardar archivo Cerrar archivo Buscar y Reemplazar _________ _________ _________ _________ g. h. i. j. Editor CSS Deshacer Revisar ortografa Visualizar pgina en navegador _________ _________ _________ _________

    3. Opciones de configuracin
    Vamos a cambiar algunas de las opciones que vienen por defecto en KompoZer antes de comenzar a crear nuestras pginas. La ventana de Opciones es accesible a travs del men Herramientas Preferencias.... La ventana aparece dividida en cuatro secciones: En General, nos aseguraremos de que est marcada la opcin Usar estilos CSS en lugar de elementos y atributos HTML. En Config. Nuevas pginas, si no lo est, en Conjunto de caracteres, seleccionaremos Occidental (ISO-8859-1). En Avanzado, vamos a cambiar las siguientes opciones: o En la seccin Marcado, vamos a configurar el Lenguaje como XHTML1 (XHTML obliga a cerrar todas las etiquetas correctamente, y escribir etiquetas y atributos en minsculas) y el DTD como Estricto (Indica que el documento est diseado completamente para el uso de CSS, por lo que no se admiten las etiquetas o atributos ya en desuso). Nos aseguraremos de que est marcada la opcin Dentro de un prrafo, pulsar Enter lo cierra y crea uno nuevo. En Mostrar los siguientes caracteres como entidades, seleccionaremos Los anteriores y las letras Latin-1, para que al introducir caracteres, como letras acentuadas, KompoZer los sustituya por la entidad correspondiente. Al terminar, haga clic sobre el botn Aceptar.

    o o

    4. Crear y guardar una pgina


    Para crear una nueva pgina, basta con pulsar el botn Nuevo. Esto crear una pgina. Con las opciones que hemos configurado, el cdigo de la pgina tendr el siguiente aspecto en el modo Cdigo fuente:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title></title> </head> <body> <br /> </body> </html>

    Cuando realicemos cambios en la pgina, y no los hayamos guardado, aparecer un pequeo icono en la pestaa desde el modo Diseo.

    Para guardar los cambios, podemos pulsar la combinacin de teclas Ctrl + S, o el botn

    La primera vez que guardemos la pgina, deberemos indicar el ttulo que le queremos dar (el contenido de la etiqueta title en la cabecera), y su ubicacin.

    5. Escribir texto en KompoZer


    La forma de escribir el texto, utilizar el teclado, etc. es la misma que con cualquier editor de texto. Es importante saber en qu elemento estamos escribiendo. Normalmente lo haremos dentro de prrafos y encabezados, incluso en divisiones. Esto podemos seleccionarlo en el primer desplegable de la barra de herramientas. En otras ocasiones, utilizaremos otros elementos como listas o tablas. Recuerda, que siempre puedes saber en qu etiqueta estamos mirndolo en la barra de estado. A la hora de escribir dentro de un prrafo, cuando pulsemos la tecla Enter crearemos un salto de lnea. Esto se debe a que cerramos el prrafo y comenzamos uno nuevo, porque as lo hemos elegido en las opciones. Si lo que queremos es crear un salto dentro del prrafo, lo que equivaldra a una etiqueta html del tipo <br />, tenemos que mantener pulsada la tecla Maysculas (Shift) mientras pulsamos Enter.

    6. Hojas de estilo en KompoZer


    Ya vimos cmo podemos definir un estilo incrustado para el elemento. Vamos a ver ahora como crear y definir una hoja de estilo. Todo lo referente a la hoja de estilo, se gestiona utilizando el Editor CSS, accesible a travs del botn .

    CREAR O ADJUNTAR UNA HOJA DE ESTILO

    Desde la ventana del editor, pulsamos sobre el desplegable de arriba a la izquierda, y seleccionamos Hoja de estilos enlazada, ya que una hoja es eso, un archivo externo que se enlaza. La zona de la derecha cambiar como se ve en la imagen: Si ya tenemos creada la hoja, solo tenemos que seleccionarla pulsando en Escoja archivo. Si la hoja an no existe, basta con introducir el nombre que queramos, para crear una hoja en la misma carpeta que la pgina. En ambos casos, pulsamos en Crear hoja de estilos. Si no exista an, el archivo no se crear hasta que no definamos algn estilo. Para cerrar la ventana, pulsamos Aceptar. Con esto, lo que hemos hecho realmente es incluir en la cabecera de la pgina la llamada a la hoja de estilo. Puedes comprobarlo en la vista Cdigo fuente.

    DEFINIR Y EDITAR UN ESTILO

    Podemos definir un estilo desde el mismo Editor CSS, pero seleccionando en el men la opcin Regla. Lo primero que tendremos que elegir ser el selector que queremos utilizar. Podemos seleccionar una de las opciones, segn el tipo de selector, pero es ms cmodo escribir directamente el selector que nos interesa, por ejemplo body; o .miclase; o div#principal p... etc, cualquier selector vlido.

    Cuando lo tengamos, pulsamos en Crear regla de estilo. Nos encontraremos con una serie de pestaas:

    La pestaa General nos permite editar el estilo directamente, escribiendo propiedades y valores. El resto de pestaas se refieren a categoras de propiedades, y en ellas podremos definir el estilo de forma grfica, lo que puede resultarnos ms cmodo e intuitivo. Los distintos selectores que definamos, aparecern "colgando" de la hoja de estilo, en el panel de la izquierda, para que podamos editarlos. Si queremos borrar el estilo seleccionado, debemos pulsar el icono , y para cambiar el selector pulsamos en editar las propiedades del estilo, no tenemos ms que cambiar lo que queramos en las distintas pestaas. Por ejemplo, la categora de Texto tiene el siguiente aspecto: Podemos elegir el tipo de letra o fuente desde los desplegables, as como el color, tamao y otras caractersticas. En la parte inferior de la ventana podemos previsualizar el aspecto del texto segn los valores que hayamos elegido. Para elegir un color para el texto podemos escribir su valor en el campo Color o hacer clic en el botn de la derecha para que se abra una ventana donde podremos seleccionar el color deseado. Ejericicio: definir y aplicar estilos a una pgina web. 1. 2. Haga una copia en el escritorio del archivo itsi.html que se encuentra en la carpeta d:\web. Abre con KompoZer (men Archivo Abrir archivo), la pgina itsi.html que copiaste en el escritorio. Vamos a aplicarle estilos. En KompoZer, pulsa el botn CSS de la parte superior para acceder al editor CSS. . Para

    3.

    4. 5. 6. 7. 8. 9.

    Pulsa en el icono de la paleta (arriba a la izquierda) y selecciona la opcin regla de estilo. Escribe body como nombre de la regla y pulsa en Crear nueva regla de estilo. Pulsa en la pestaa Texto En Tipo de letra, marca Usar tipo de letra personalizado y escribe Verdana, Arial, sans-serif. En Tamao de la letra, escribe 15px. En Color, introduce #111111.

    10. En Alineacin, selecciona Justificado. 11. Ve a la pestaa Fondo, y en Color introduce #065006. 12. Vuelve a pulsar el icono de la paleta a la izquierda, para definir una nueva regla. 13. Dale el nombre h1 y pulsa crear regla. 14. En la pestaa Texto, asgnale el Color #338433 y el Tamao de letra 180%. 15. Haz clic en la pestaa Caja. Dale mrgenes Superior de 20px e Izquierdo de 80px. 16. Siguiendo los pasos anteriores, crea una nueva regla con el nombre h2, h3. 17. En la pestaa Texto, establece el Tipo de letra personalizado Georgia, Times, serif, tamao 150% y color #A52A2A. 18. En la pestaa Caja, establece el margen Superior a 0px y el Izquierdo a 30px. 19. Define una nueva regla para el elemento h3, que cambie su Color de texto a #916908. 20. Define un nuevo estilo para los prrafos (p). 21. En la pestaa Texto, cambia la altura de lnea a 1.5em. En la pestaa Caja, establece los mrgenes a 35px. 22. Crea una nueva regla para la imagen (img). 23. Desde la pestaa Bordes establece el estilo del borde, con Estilo slido, Anchura 2px y Color #005b00. Solo es necesario que rellenes la primera fila, a no ser que quieras bordes distintos para cada lado. Desde la pestaa Caja dale un margen de 10px. En esa misma pestaa, en el desplegable Flotar selecciona derecha. Esto mostrar al imagen a la derecha de la pgina.

    24. Crea una nueva regla para .cuerpo (observa que es la clase que tiene aplicada el div donde est todo el texto. 25. Asgnales un margen de 0 en la parte superior, y de 20px al resto. Adems dale el Color de Fondo #f3f3f3. 26. Al terminar, observa el resultado. Si deseas hacer un retoque adicional en las propiedades de los estilos CSS, adelante! 27. Al terminar, muestra el resultado al profesor.

    Ejercicio Propuesto Haga una copia en el escritorio del archivo nuestra_institucin.html que se encuentra en la carpeta d:\web. Empleando la herramienta CSS del editor Kompozer, modifquela para que tenga el siguiente aspecto:

    You might also like