Configuración inicial
•
Menú Herramientas > Preferencias > General
. Desactivar la casilla:
Usar estilos CSS en
lugar de aytributos y elementos HTML
.
•
Menú Herramientas > Preferencias > Config. Nuevas páginas.
Autor:
Nombre y apellido
del alumno
. Elegir idioma:
Español [es]
.
•
Menú Herramientas > Preferencias > Avanzado.
Marcado: a) Lenguaje:
XHTML 1
;
b)DTD:
Transitional
.
Crear un documento nuevo
•
Cada vez que abrimos el programa nos aparece un documento nuevo.
•
Si necesitamos abrir otro documento nuevo, tenemos varias opciones:
1.
Pulsar sobre el botón
Nuevo.
2.
Menú
Archivo > Nuevo.
3.
Control + N
.
Guardar un documento
•
Si es la primera vez que lo guardamos, tenemos varias opciones:
1.
Pulsar sobre el botón
Guardar.
2.
Menú
Archivo > Guardar
3.
Control + S
.
En cualquiera de los casos, en la ventana que se abre buscamos y abrimos la carpeta donde
queremos guardarlo, escribimos en Nombre:
nombre_archivo.html
, y pulsamos el botón
Guardar
.
•
Si no es la primera vez que lo guardamos, el procedimiento es el mismo que el anterior, pero
en esta ocasión no aparece ninguna ventana, puesto que el archivo se guarda con el mismo
nombre que ya tiene y en el mismo lugar.
•
Si queremos guardar el documento con otro nombre, en otro lugar, o ambas cosas: menú
Archivo > Guardar como...
En la ventana que se abre buscamos y abrimos la carpeta
donde queremos guardarlo, escribimos en Nombre:
nombre_nuevo_archivo.html
, y
pulsamos el botón
Guardar
.
Abrir un documento
•
Si se trata de un archivo almacenado en nuestro ordenador, tenemos varias posibilidades:
4.
Pulsar sobre el botón
Abrir.
© Pedro J. Castela
1
/
6
Guía rápida para KompoZer
5.
Menú
Archivo > Abrir archivo
.
6.
Control + O
(letra O de
Open
).
En cualquiera de los casos, en la ventana que se abre buscamos y abrimos la carpeta donde
esté el archivo, hacemos clic sobre el mismo y pulsamos en el botón
Abrir
.
4.
Si se trata de un archivo usado recientemente podemos abrirlo mediante el menú
Archivo > Páginas recientes
y en la lista que se despliega elegimos el archivo.
Crear un contenedor DIV con un atributo ID
•
Desde la vista Código
: sitúa el cursor en el lugar en el que quieras insertar el
div
y escribe
el siguiente código:
<div id=”identificador”>Contenido</div>
Sustituye
“identificador”
por el nombre del
div
que corresponda. El texto Contenido
es para que el div no esté vacío; después se cambia por el contenido real.
•
Desde la vista Normal
: sitúa el cursor en el punto en el quieras insertar el
div
y escribe
cualquier texto, por ejemplo
Contenido
. A continuación, haz clic en el menú
Formato >
Párrafo > Contenedor genérico (DIV)
, o elige esa opción en la lista desplegable
correspondiente al formato de párrafo.
Para asignarle el atributo
id
desde la
vista Normal
:
1.
Coloca el cursor dentro del contenedor
div
correspondiente.
2.
Haz clic sobre la etiqueta
<div>
correspondiente en la barra de estado (parte inferior)
3.
Pulsa en el
botón derecho
del ratón y en el menú de contexto selecciona
Propiedades avanzadas
.
© Pedro J. Castela
2
/
6
Guía rápida para KompoZer
4.
En la ventana que se abre, selecciona el atributo
id
y escribe el valor que
corresponda, por ejemplo:
encabezado
.
Nota
: como puedes observar, es mucho más fácil realizar esta tarea desde la
vista código
.
Crear varios contenedores DIV dentro de otro contenedor DIV
Supongamos que queremos crear los contenedores
div
con
id=”hijo1”
y con
id=”hijo2”
dentro del
div
con
id=”padre”
.
•
Desde la vista Código
: sitúa el cursor en el lugar en el que quieras insertar el
div
y escribe
el siguiente código:
<div id=”padre”>Padre
<div id=”hijo1”>Hijo 1</div>
<div id=”hijo2”>Hijo 2</div>
</div>
•
Desde la vista Normal
: sitúa el cursor en el punto en el quieras insertar el
div
y crea un
primer
div
con
id=”padre”
como se indica en el apartado anterior. Como contenido inicial
escribe el texto
Padre
. Después, pulsa la tecla
Intro
para pasar a la línea siguiente. En ese
punto, crea el segundo
div
con
id=”hijo1”
incluyendo como contenido inicial el texto
Hijo
1
. Después, pulsa la tecla
Intro
para pasar a la línea siguiente. En ese punto, crea el tercer
div
con
id=”hijo2”
incluyendo como contenido inicial el texto
Hijo 2
. Por último, en la
vista código
, elimina en el primer
div
el salto de línea
<br>
.
Nota
: también en este caso resulta más sencillo realizar todo el proceso desde la
vista código
.
Asignar un ID a un elemento HTML
Supongamos que queremos asignar el ID
"inicio"
al elemento
<body>
:
•
Desde la vista Código:
modifica la etiqueta de la siguiente manera:
<body id="inicio">
.
•
Desde la vista Normal
: puedes ver cómo se hace en el apartado
"Crear un contenedor
DIV con un atributo ID"
. Simplemente sustituye la etiqueta
<div>
por
<body>
(o la que
sea).
© Pedro J. Castela
3
/
6
Guía rápida para KompoZer
Vincular una página web con una hoja de estilos externa
Supongamos que queremos vincular la página web
index.html
con la hoja de estilos
estilos.css
.
1.
Abre la página web
index.html
, o elige su pestaña si ya está abierta.
2.
Pulsa sobre el botón
CaScadeS
para abrir el
editor CSS
de KompoZer.
3.
En la parte superior izquierda de la ventana del editor CSS, pulsa primero sobre el pequeño
triángulo
que contiene el botón de la izquierda y, a continuación selecciona
Elem. Enlace
en el menú que se despliega.
4.
En la zona derecha del editor CSS, pulsa sobre el botón
Escoja archivo
. El programa nos
advierte que la página web debe estar
guardada
antes
de vincularla con una hoja de estilos
local y que usemos el botón
Recargar
si la hoja de estilos no se descarga inmediatamente.
5.
En la ventana que se abre, busca y abre la carpeta en la que se encuentre el archivo
estilos.css
y haz
doble clic
sobre el mismo (o bien un clic y después pulsa en el botón
Abrir
).
6.
En el campo
URL
aparecerá la ruta completa del archivo
estilos.css
. Pulsa sobre el botón
Crear hoja de estilos
y la nueva hoja de estilos aparecerá en la zona izquierda de la ventana
del editor CSS. En la siguiente imagen puedes ver también la función de cada botón.
7.
Por último, pulsa en el botón
Aceptar
y después en el botón
Guardar
.
© Pedro J. Castela
4
/
6
Guía rápida para KompoZer
Si observas la
vista código
, verás que se han añadido varias líneas en en el
<head>
, tras las
etiquetas
<meta>
. Se refieren a las dos hojas de estilos vinculadas a la página web
index.html
, una
interna
, cuyas reglas sólo afectan a esa página web, y otra
externa
(en esta caso
estilos.css
) cuyas
reglas afectarán a todas las páginas web con las que las vinculemos.
Crear una hoja de estilos externa
En el apartado anterior se ha explicado cómo vincular una página web a un hoja de estilos externa
que ya existe. Si lo que queremos es crear una nueva hoja de estilos externa vincula da a una página
web, el procedimiento es casi idéntico.
Supongamos que queremos crear la hoja de estilos
estilos2.css
vinculada a la página web
index.html
:
1.
Realiza los tres primeros pasos indicados en el apartado anterior para que aparezca la
ventana
Nueva hoja de estilos enlazada
.
2.
En el campo
URL
escribe el nombre completo del archivo CSS que quieres crear, en este
caso
estilos2.css
. Es fundamental que no se te olvide la extensión
.css
, o no funcionará.
3.
Pulsa sobre el botón
Crear hoja de estilos
. La nueva hoja de estilos aparecerá en la
columna de la zona izquierda del editor CSS.
8.
Por último, pulsa en el botón
Aceptar
y después en el botón
Guardar
.
Nota
: el procedimiento anterior crea el archivo de hoja de estilos
en la misma carpeta en la que
esté la página web
y solamente cuando creemos alguna
regla
de estilo. Sin embargo, a veces las
hojas de estilo se guardan en una carpeta aparte. Supongamos que creamos la carpeta
css
en la
misma carpeta de la página web
index.html
. Para que la hoja de estilos
estilos2.css
se guarde en la
carpeta
css
, en el campo
URL
(paso 2) debemos escribir:
css/estilos2.css
. Pero, repito,
la carpeta
css debe existir ya
.
Eliminar una hoja de estilos
1.
Pulsa en el botón
CaScadeS
para abrir el editor CSS.
2.
Selecciona la hoja de estilos en el panel de la izquierda.
3.
Pulsa el botón
Eliminar
que está en la parte superior del panel.
Nota
: A veces se produce un
error
en el programa y la operación no se lleva a efecto. Si el
problema persiste, deberás tratar de eliminar las líneas de
código
correspondientes a esa hoja de
estilos.
Crear una regla de estilos
1.
Pulsa en el botón
CaScadeS
para abrir el editor CSS, si no lo está ya.
2.
Selecciona la hoja de estilos en el panel de la izquierda.
3.
Pulsa en el botón
Nueva regla
que está en la parte superior del panel.
© Pedro J. Castela
5
/
6
No hay comentarios:
Publicar un comentario