8/2/2019 Diseo web - taller 4

1/5

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL

AREA: Tecnologa e Informtica Grado 11

TEMA: 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 IsWhat 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 porotro, 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 KompoZerEl aspecto general de KompoZer es el siguiente:

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 dosdesplegables. 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 con la clase

dada.

En la parte central, encontramos el rea de edicin, donde podemos editar el contenido de nuestra pgina. Podemos tenervarias 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 ellugar 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 . Esto nos permite

seleccionar cualquier etiqueta y todo su contenido slo haciendo clic sobre el la.

Barra de

Redaccin

Barra de TtuloBarra de Men

Barra de Formato

Panel

Lateralrea de

Edicin

Barra de estado

Barra de

Navegacin con

pestaas

Barra de modo

de Edicin

8/2/2019 Diseo web - taller 4

2/5

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. En el rea de edicin se observan tres pestaas: Diseo, Dividir y Cdigo fuente. Describa la utilidad de cada una.2. Cuntas opciones hay en la barra modo de edicin? Nmbrelas.3. Relacione las teclas de atajo para las siguientes acciones:

a. Nuevo archivo _________b. Abrir archivo _________c. Guardar archivo _________d. Cerrar archivo _________e. Buscar y Reemplazar _________

f. Insertar enlace _________g. Editor CSS _________h. Deshacer _________i. Revisar ortografa _________

j. Visualizar pgina en navegador _________

3. Opciones de configuracinVamos 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 deelementos 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).

o Nos aseguraremos de que est marcada la opcin Dentro de un prrafo, pulsar Enter lo cierray crea uno nuevo.

o En Mostrar los siguientes caracteres como entidades, seleccionaremos Los anteriores y lasletras Latin-1, para que al introducir caracteres, como letras acentuadas, KompoZer los sustituya por la entidad

correspondiente.

o Al terminar, haga clic sobre el botn Aceptar.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:

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.

8/2/2019 Diseo web - taller 4

3/5

5. Escribir texto en KompoZerLa 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 unsalto dentro del prrafo, lo que equivaldra a una etiqueta html del tipo
, tenemos que mantener pulsada la teclaMaysculas (Shift) mientras pulsamos Enter.

6. Hojas de estilo en KompoZerYa 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 ESTILODesde 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 opcinRegla.

Lo primero que tendremos que elegir ser el selector que queremos utilizar. Podemos seleccionaruna de las opciones, segn el tipo de selector, pero es ms cmodo escribir directamente el selectorque nos interesa, por ejemplo body; o .miclase; o div#principal p... etc, cualquier selector vlido.

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

8/2/2019 Diseo web - taller 4

4/5

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

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 yaplicar estilos a una pgina web.

1. Haga una copia en el escritorio del archivo itsi.htmlque se encuentra en la carpeta d:\web.2. Abre con KompoZer (men Archivo Abrir archivo), la pgina itsi.htmlque copiaste en el escritorio. Vamos a aplicarle

estilos.

3. En KompoZer, pulsa el botn CSS de la parte superior para acceder al editor CSS.

4. Pulsa en el icono de la paleta (arriba a la izquierda) y selecciona la opcin regla de estilo.5. Escribe bodycomo nombre de la regla y pulsa en Crear nueva regla de estilo.6. Pulsa en la pestaa Texto7. En Tipo de letra, marca Usar tipo de letra personalizado y escribe Verdana, Arial, sans-serif.8. En Tamao de la letra, escribe 15px.9.

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 letra180%.15. Haz clic en la pestaa Caja. Dale mrgenesSuperior de 20pxe 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 letrapersonalizadoGeorgia, Times, serif, tamao 150% y color #A52A2A.18. En la pestaa Caja, establece el margen Superior a 0pxy 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 Estiloslido, Anchura2pxy 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.

8/2/2019 Diseo web - taller 4

5/5

24. Crea una nueva regla para .cuerpo (observa que es la clase que tiene aplicada el divdonde est todo el texto.25. Asgnales un margen de 0en la parte superior, y de 20pxal 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.htmlque se encuentra en la carpeta d:\web. Empleando la herramienta CSS del editor Kompozer, modifquela para que tenga el siguiente aspecto: