diseño web, taller 4 editor web

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL

AREA: Tecnología e Informática – Grado 11TEMA: Diseño Web - Editores web

IntroducciónPara el diseño de páginas web es necesario contar con un editor web. Hasta el momento, se ha empleado un editor de textocomo Bloc de Notas para desarrollar los ejercicios escribiendo directamente código HTML. También es posible construir páginasweb sin necesidad de conocer a fondo sobre lenguaje HTML y es a través del uso de Editores Web WYSIWYG (What You See IsWhat You Get), los cuales ayudan al diseño de una página en muchos aspectos.

Hoy aprenderemos cómo descargar e instalar un editor web gratuito y reconoceremos su entorno de trabajo y algunas funcionesbásicas.

1. ¿Qué es un editor Web?Un editor es cualquier aplicación que nos permita crear, editar y guardar una página Web. Podemos considerar tres categorías deeditores Web:

Editores de texto: Nos permiten editar el código 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, ocerrarlas automáticamente.

Editores WYSIWYG: Por un lado, nos permiten editar el código fuente como los editores de HTML. Y porotro, nos permiten trabajar en vista de diseño. Es decir, ver la página como se vería en un navegadormientras la editamos. Editores de este tipo pueden ser Dreamweaver (editor pago) o KompoZer (gratuito).

Ejercicio:Descargar e Instalar KompoZer. Ir al sitio web http://kompozer.net/ y sigue las siguientes instrucciones:

1. Haz clic en el botón Download.2. Escoge la versión del sistema operativo apropiado (Windows en la mayoría de los casos).3. Al pulsar, se abrirá la ventana con el diálogo de descarga. Debemos de seleccionar dónde descargar el archivo, y elegir la

opción Guardar, no Abrir.4. El archivo descargado es un archivo comprimido que contiene una carpeta con el programa. Así que tendremos que

descomprimirlo, por ejemplo haciendo clic derecho y seleccionando Descomprimir o extraer aquí (esta dependerá delprograma para descomprimir instalado).

5. Ahora, tenemos el programa en una carpeta. Basta con que la movamos a la carpeta donde queramos ubicar el programa,como por ejemplo Archivos de programas o Mis Documentos.

6. Si ahora quieres crear un acceso directo en el Escritorio, basta con abrir la carpeta, hacer clic derecho sobre el archivokompozer.exe, y elegir la opción Enviar a → Escritorio (crear acceso directo).

2. El Entorno de KompoZerEl aspecto general de KompoZer es el siguiente:

En la parte superior encontramos la barra de título, donde se ve el título de la hoja.

Barra deRedacción

Barra de TítuloBarra de Menú

Barra de Formato

PanelLateral

Área deEdición

Barra de estado

Barra deNavegación con

pestañas

Barra de modode Edición

















Barra deRedacción


Barra de Formato

PanelLateral

Área deEdición

Barra de estado


pestañas


















Barra deRedacción


Barra de Formato

PanelLateral

Área deEdición

Barra de estado


pestañas


















Barra deRedacción


Barra de Formato

PanelLateral

Área deEdición

Barra de estado


pestañas


http://kompozer.net/




Debajo, encontramos una barra de menús, desde la que podemos acceder a todas las opciones del programa. Las opcionesmás comunes, como Guardar, Nuevo, o insertar Enlaces o Imágenes las encontramos en la llamada barra de redacción.

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 textoque escribimos (encabezado o párrafo). 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 clasedada.

En la parte central, encontramos el área de edición, donde podemos editar el contenido de nuestra página. Podemos tenervarias abiertas en distintas pestañas.

En la parte inferior, en la barra de estado, encontramos una barra que muestra la jerarquía de etiquetas que hay sobre ellugar donde está el punto de inserción. Es decir, lo que aquí vemos son todas las etiquetas que contienen a lo que tenemosseleccionado, desde la más inmediata a la derecha del todo, a la primera, que suele ser el <body>. Esto nos permiteseleccionar cualquier etiqueta y todo su contenido sólo 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 laayuda de la aplicación.

1. En el área de edición se observan tres pestañas: Diseño, Dividir y Código fuente. Describa la utilidad de cada una.2. ¿Cuántas opciones hay en la barra modo de edición? Nómbrelas.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 ortografía _________

j. Visualizar página en navegador _________

3. Opciones de configuraciónVamos a cambiar algunas de las opciones que vienen por defecto en KompoZer antes de comenzar a crear nuestras páginas.

La ventana de Opciones es accesible a través del menú Herramientas → Preferencias.... La ventana aparece dividida en cuatrosecciones:

En General, nos aseguraremos de que está marcada la opción Usar estilos CSS en lugar deelementos y atributos HTML.

En Config. Nuevas páginas, si no lo está, en Conjunto de caracteres, seleccionaremos Occidental(ISO-8859-1).

En Avanzado, vamos a cambiar las siguientes opciones:

o En la sección Marcado, vamos a configurar el Lenguaje como XHTML1 (XHTML obliga a cerrartodas las etiquetas correctamente, y escribir etiquetas y atributos en minúsculas) y el DTDcomo Estricto (Indica que el documento está diseñado completamente para el uso de CSS, porlo que no se admiten las etiquetas o atributos ya en desuso).

o Nos aseguraremos de que está marcada la opción Dentro de un párrafo, pulsar Enter lo cierray crea uno nuevo.

o En Mostrar los siguientes caracteres como entidades, seleccionaremos Los anteriores y las letras Latin-1, para que alintroducir caracteres, como letras acentuadas, KompoZer los sustituya por la entidad correspondiente.

4. Crear y guardar una página

Para crear una nueva página, basta con pulsar el botón . Esto creará una página. Con las opciones que hemos

configurado, el código de la página tendrá el siguiente aspecto:

<!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 página, y no los hayamos guardado, aparecerá un pequeño icono

en la pestaña.

Para guardar los cambios, podemos pulsar la combinación de teclas Ctrl + S, o el botón .

La primera vez que guardemos la página, deberemos indicar el título que le queremos dar (el contenido de la etiqueta titleen la cabecera), y su ubicación.

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 párrafos 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 mirándolo enla barra de estado.

A la hora de escribir dentro de un párrafo, cuando pulsemos la tecla Enter crearemos un salto de línea. Esto se debe a quecerramos el párrafo y comenzamos uno nuevo, porque así lo hemos elegido en las opciones. Si lo que queremos es crear unsalto dentro del párrafo, lo que equivaldría a una etiqueta html del tipo <br />, tenemos que mantener pulsada la teclaMayúsculas (Shift) mientras pulsamos Enter.

6. Hojas de estilo en KompoZerYa vimos cómo podemos definir un estilo incrustado para el elemento. Vamos a ver ahora como crear y definir una hoja deestilo.

Todo lo referente a la hoja de estilo, se gestiona utilizando el Editor CSS, accesible a través del botón .

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/1999/xhtml

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 aún no existe, basta conintroducir el nombre que queramos, para crear una hoja en la misma carpeta que la página. En ambos casos, pulsamos enCrear hoja de estilos. Si no existía aún, el archivo no se creará hasta que no definamos algún estilo. Para cerrar la ventana,pulsamos Aceptar.

Con esto, lo que hemos hecho realmente es incluir en la cabecera de la página la llamada a la hoja de estilo. Puedescomprobarlo en la vista Código fuente.

Definir y editar un estilo

Podemos definir un estilo desde el mismo Editor CSS, pero seleccionando en el menú la opciónRegla.

Lo primero que tendremos que elegir será el selector que queremos utilizar. Podemos seleccionaruna de las opciones, según el tipo de selector, pero es más cómodo escribir directamente el selectorque nos interesa, por ejemplo body; o .miclase; o div#principal p... etc, cualquier selector válido.

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

La pestaña General nos permite editar el estilo directamente,escribiendo propiedades y valores. El resto de pestañas serefieren a categorías de propiedades, y en ellas podremosdefinir el estilo de forma gráfica, lo que puede resultarnosmás cómodo e intuitivo.

Los distintos selectores que definamos, aparecerán "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 . Paraeditar las propiedades del estilo, no tenemos más que cambiar lo que queramos en las distintas pestañas.

Por ejemplo, la categoría de Texto tiene el siguiente aspecto:

Podemos elegir el tipo de letra ofuente desde los desplegables, asícomo el color, tamaño y otrascaracterísticas.

En la parte inferior de la ventanapodemos previsualizar el aspecto deltexto según los valores que hayamoselegido.

Para elegir un color para el textopodemos escribir su valor en elcampo Color o hacer clic en el botónde la derecha para que se abra unaventana donde podremosseleccionar el color deseado.

Ejericicio: definir y aplicar estilos a una página web.

1. Copie el archivo primera.htm que se encuentra en la carpeta \\profesor\web y guárdela en la carpeta web de sucomputador.

2. Abre con KompoZer (menú Archivo → Abrir archivo), la página primera.htm que encontrarás en la carpeta web. Vamos aaplicarle estilos.

3. En KompoZer, pulsa el botón CaScadeS de la parte superior para acceder al editor CSS.

4. Pulsa en el icono de la paleta (arriba a la izquierda) para definir una nueva regla.

5. Escribe body como nombre de la regla y pulsa en Crear nueva regla de estilo.

6. Pulsa en la pestaña Texto.

7. En Tipo de letra, marca Usar tipo de letra personalizado y escribe Verdana, Arial, sans-serif.

8. En Tamaño de la letra, escribe 15px.

9. En Color, introduce #111111.

10. En Alineación, selecciona Justificado.

11. Ve a la pestaña Fondo, y en Color introduce #063306.

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 pestaña Texto, asígnale el Color #338433 y el Tamaño de letra 180%.

15. Haz clic en la pestaña Caja. Dale márgenes Superior de 20px e Izquierdo de 80px.

16. Siguiendo los pasos anteriores, crea una nueva regla con el nombre h2, h3.

17. En la pestaña Texto, establece el Tipo de letra personalizado Georgia, Times, serif, tamaño 150% y color #A52A2A.

18. En la pestaña Caja, establece el margen Superior a 0 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 párrafos (p).

21. En la pestaña Texto, cambia la altura de línea a 1.5em. En la pestaña Caja, establece los márgenes a 35px.

22. Crea una nueva regla para la imagen (img).

23. Desde la pestaña Bordes establece el estilo del borde, con Estilo solid, Anchura 2px y Color #005b00. Solo es necesario querellenes la primera fila, a no ser que quieras bordes distintos para cada lado. Desde la pestaña Caja dale un margen de 10px.En esa misma pestaña, en el desplegable Flotar selecciona derecha. Esto mostrará al imagen a la derecha de la página.

24. Crea una nueva regla para .cuerpo (observa que es la clase que tiene aplicada el div donde está todo el texto.

25. Asígnales un margen de 0 en la parte superior, y de 20px al resto. Además dale el Color de Fondo #f3f3f3.

26. Crea una última regla para la clase .azul.

27. En la pestaña Texto, en Peso de la fuente elige Negrita, y en Color #3333ff.

diseño web, taller 4 editor web

Documents