Está en la página 1de 2

CREAR PAGINES WEB CON KOMPOZER I CSS

OPCIÓ 1: sense marcs (o contenidors)


1. Selecciona i copia (CTRL+C) el text editat al Writer i enganxa’l (CTRL+V) a la pàgina del Kompozer.
2. Insereix la imatge núvol.png després del 2n títol clicant a la icona imatge i seleccionant-la.
3. Formata el text amb: Encapçalament 1, Encapçalament 2 i la resta (inclosa la imatge) en Paràgraf

4. Observa les 4 diferents vistes: Normal, Marcadors, Codi, Previsualització.


Definirem un full d’estils (CSS)
5. Cliquem a CSS i triem un full extern o Elem. enlace (Linked StyleSheet) i escrivim: estil.css ... i Crear.
6. Seleccionem el full CSS creat i afegim les següents regles per a:
a. Triem.. Body i Crear regla: Fons: crema
b. Triem.. Encap. 1 i Crear regla: Fons: taronja clar/ Text color: vermell / Alineació: centrat
c. Triem.. Paràgraf i Crear regla: Text color: vermell clar

COLOCACIÓN DE LAS REGLAS DE ESTILO:

Las reglas de estilo pueden ir colocadas:

1) Dentro de una etiqueta individual:

<etiqueta STYLE="propiedad1:valor;...;propiedadN:valor"> ...texto... </etiqueta>

Estas reglas sólo afectan a una etiqueta particular. No se utilizan las llaves para escribir las declaraciones sino que
se escriben entre comillas dentro del modificador STYLE. Este tipo de colocación es el que implementa KompoZer
a las capas en cuanto a tamaño y demás cuando las modificamos mediante la interfaz gráfica.

2) Afectando a toda la página:

Van colocadas dentro del HEAD de la página, entre 2 etiquetas <STYLE type="text/css"> ..reglas...</STYLE> y
afectan a todas las etiquetas del mismo tipo que aparezcan a lo largo de la página.
3) En un archivo externo llamado hoja de estilos cuya extensión es .CSS

Lo más interesante es coger todos los estilos que vayamos a utilizar en un web y extraerlos a un archivo externo
en donde almacenamos esas reglas de estilo. Esos archivos tienen extensión CSS.

Para vincular las páginas al formato definido en el archivo CSS hay que colocar en cada una de ellas una etiqueta
como esta dentro del HEAD:

<LINK REL="stylesheet" TYPE="text/css" HREF="archivo.css">

Donde archivo.css contiene las reglas de estilo. De esta forma conseguimos establecer el formato uniforme para
todas las páginas y además cualquier cambio que hacemos en la hoja de estilos se ve reflejado de forma
inmediata en todas las páginas que usen esta hoja de estilos. Es por eso que es la opción más utilizada.

Nota: La versión que hemos utilizado durante este curso (0.7.10) tiene un fallo o bug, que se produce si
intentamos definir estilos para varios selectores sin aceptar los cambios. Por eso, recomendamos definir el
nuevo selector y su estilo, aceptar los cambios, y volver a abrir el editor CSS para crear el siguiente estilo.

También podría gustarte