CREANDO UN DISEO CSS CON KOMPOZER

Kompozer tiene una interfaz sencilla (si haz utlizado office o openoffice, lo
sabras) esta dividida en 7 partes
[1]menus desplegables - estos son los fundamentales en cualquier programa
[2]Barra de redaccion - es donde guardamos, agregamos tablas entre otras
cosas, aqui se encuentra el boton mas importante. El boton CSS
[3]Barra de formato 1 - permite la edicion rapida textos, permitiendonos
agregar listas o sangrias a nuestros texto
[4]Barra de formato 2 - esta es una barra de edicion de texto mas sencilla, nos
permite estilizar el texto con fondo, colores, alineacion, ect.
[5]Campo administracion de sitios - ya que PWG no ofrece un servicio de FTP
este campo realmente no nos sirve para nada
[6]Campo de edicion - esta es la zona mas importante ya que desde aqui
visualizaremos nuestro sitio en creacion
[7]Botones del campo de diseo - estos nos permiten cambiar el 'modo de
vista' de nuestro diseo, el boton diseo nos muestra como se veria nuestro
diseo en un navegador normal, fuente html nos muestra todos los codigos de
netra pagina y el boton dividir es una mescla de ambos

ahora que concemos un poco la interfaz vamos a lo bueno, el diseo

PARTE 3 - CREANDO LA ESTRUCTURA
vamos a crear un diseo sencillo como inicio, yo utilizare colores como base
solo para que tengan una idea de como funciona todo esto, luego hare
tutoriales de como hacer plantillas mas avanzadas
presionaremos el boton dividir en la parte de abajo del programa para tener el
codigo y ver el diseo al mismo tiempo

ahora vamos al menu formato parrafo contenedor generico (div) esto creara un
pequeo cuadro rojo

a este demosle click derecho propiedades avanzadas, se abrira el siguiente

cuadro, en este buscamos donde dice atributo y ponemos 'id' y en valor
ponemos 'contenedor' y aceptamos

si me han seguido paso a paso en la parte de abajo se vera un codigo asi

ahora viene nuestro diseo. No se si sea un error en Kompozer, alguien olvido

hacerlo o no lo encuentro pero no se como agregar mas divs desde el modo
grafico asi que lo que haremos es agregarlos desde la zona de codigos
estamos haciendo un diseo que consta de 5 partes
contenedor
cabezal
menu
contenido (este contenedor siempre se llamara content blame PWG)
pie
ahora que tenemos nuestro contenedor copiaremos el mismo div y lo

pegaremos varias veces de esta manera, damos enter <div

id="contenedor"><br>AQUI</div> done esta marcado y empezamos a pegar
los contenedores, ya que los pegamos les cambiaremos el nombre de acuerdo
a su funcion

ahora nuestro diseo esta encerrado dentro del contenedor, vamos a

personalizarlo, les voy a poner nombre para que sepan cual es cada uno (no es
necesario que ustedes lo hagan)

PARTE 4 - PERSONALIZANDO LA ESTRUCTURA

presionamos el boton CSS en la parte superior del programa, si no han
guardado aun aparecera esto

es para poner un titulo a la pagina, si lo hacen o no es opcional ya que no

utilizaremos esto en PWG. presionamos aceptar y pasamos al siguiente cuadro
el cuadro de guardar, ya sebes que hacer. no?, pues guarda tu pagina

al guardar se abrira un nuevo cuadro llamado hojas de estilo CSS, que

explicare basicamente
[1]botones de estilo - con la paleta creamos nuevos estilos, el 2do boton
recarga la hoja de estilos(esto es si se usa una fuera de la pagina, las tipicas
style.css), selector de edicion permite cambiarle el nombre de un estilo ya
creado, el boton eliminar es obvio, y las flechas permiten ordenar los codigos
ya creados
[2]el cuadro hojas y reglas, es donde se alojaran las reglas de estilo, separador
por hojas (es un tanto dificil de eplicar)
[3]cuadro cambiante, este cambiara dependiendo de lo que hagamos

BODY
ahora presionaremos el 1er boton que dice p.e.h2 debajo de el(en la zona de
CSS es mas facil referirse al p.e), y presionamos el boton deslizable para
buscar body (cuerpo de la pagina) y presionamos 'crear regla de estilo'

en esta parte solo nos interesa la pestaa fondo, asi que vamos a ella y
seleccionaremos un fondo, un color por ejemplo

tambien debemos pasar a la pestaa texto a seleccionar el color de este (y si

se desea, el tipo en 'predefinido'), ya que aqui se selecciona como se ve el
texto de default, si no se personaliza, sera el texto normal(negro sin efectos)

CONTENEDOR
ahora presionaremos el boton de la paleta de colores, y seleccionamos la 3ra
opcion que dice debajo p.e. #header, vamos al deslizable y seleccionamos
#contenedor, y 'crear nueva regla de estilo'

este contenedor es el que definira el tamao de nuestro diseo asi que vamos
a la pestaa caja y le damos un tamao yo se lo dare de 900px para que entre
en una resolucion de 1024x768, tambien en la zona margenes, en izquierda y
derecha pondremos auto para que el diseo se centre automaticamente,
tambien se puede pasar a la pestaa borde y seleccionar bordes, es muy
intuitivo, no se perderan

pasamos a la pestaa fondo y le damos un color y aceptamos

este es un buen momento para guardar

CABEZAL
vamos a css de nuevo, 3ra opcion #cabezal 'nueva regla...' pestaa caja, en
este usaremos la opcion altura yo le dare en este tuto un valor de 120px y
para que cuando escriba no se agrande en altura max le dare el mismo valor,

vamos a la pestaa fondo y le damos un color (les daremos colores aleatorios

por el momento, solo para diferenciarlos),

ahora pasamos a la pestaa texto para escojer un color de letra y no se nos

pierda el texto en el encabezado

MENU

CSS, 3ra opcion #menu 'nueva regla...' pestaa caja vamos a darle un valor de
ancho de 200px tambien a altura min. le dare un valor de 100px para que el
menu se vea largo y margen interno superior 1px (si no se agrega este,
cuando se agregue una lista o links, este div se separara, asi que se agregara
en los divs donde vamos a escribir), y ahora usaremos una opcion llamada
'flotar', por que? por que esto nos permitira mantener pegado al lado
seleccionado uno de nuestros div's y asi tener varios div's a la misma altura,
aclarado esto vamos a fondo y le damos color y opcionalmente al texto

CONTENIDO
esta es la zona donde escribes lo que sale en tu pagina, igual que en el
anterior, css, 3ra opcion #content 'nueva regla...' pestaa caja. a este hay que
ponerle la opcion flotar izquierda 1ro para que podamos ajustar bien su
tamao, ya que el menu media 200px, nos quedan 700px libres asi que
pondremos en ancho 700px y altura min 100px,
pestaa fondo y le damos color y aceptamos

PIE DE PAGINA
si no te haz percatado aun, tu pie de pagina no esta, lo que pasa es que esta
detras del menu y del contenido, ahora te dire como ponerlo
css, 3ra opcion #pie 'nueva regla...' pestaa caja., estando aqui usaremos una
nueva opcion llamada 'despejar' que es lo que hace? ni idea, solo se que sirve
para cuando se te queda un div detras de los demas, ya que alineamos los
otros divs a la izq. pondremos izquierda, cuando tengas alineados a la derecha
usaremos derecha, cuando uses ambos pues usaras ambos, a este le damos
una altura de 25px
pasemos a fondo y demosle color, a ese recomiendo que en la pestaa texto en
peso le pongan negrita y alineacion centrada, ahora aceptamos y si no lo han
hecho guardamos

tu diseo se debe ver mas o menos asi

ahora vamos a escribir sobre el contenido para ver como funciona

ya que escribimos un poco sobre el diseo creo que el texto que seala cual es
el contenedor es obsoleto asi que borraremos el texto con todo y enter, para
esto hay 3 maneras
*hay que hacer click antes de la C presionar SHIFT o MANTENER y flecha hacia
abajo y borrar
*desde la caja dividida de abaja (teniendo seleccionado el contenedor)
seleccionamos contenedor<br> y eliminar
*cambiar a modo codigo fuente (en los botones de abajo del programa) y
buscar la linea contenedor<br> y borrarla
solo asegurense de no borrar el cabezal
HIPERVINCULOS = ENLACES = LINK'S
seguramente te preguntaras como pongo los link? pues se hace escribiendo el
texto (por ejemplo link) se selecciona el texto y presionamos el boton
"enlace"(es el 6to boton de derecha a izquierda en el menu de arriba) al
presionarlo aparece la siguiente ventana

donde ubicacion del enlace es donde escribimos la url de nuestro hipervinculo

y destino es la forma en la que se abriran nuestros enlaces generalmente no se

selecciona nada ya ue queremos abrir los link en la misma pestaa del
navegador, pero si se quiere que se abra el link en una nueva se selecciona y
en el menu desplegable selecciona en una nueva ventana

TOQUES FINALES A NUESTRO DISEO

pues lo unico que queda es alinear los textos y colorear como deseen el
diseo, ya conocen las herramientas, yo por ejemplo no me gusta que el texto
de mis links esten tan pegados al borde asi que los voy a mover, para esto
usaremos margenes internos
CSS -> #menu -> pestaa caja margenes internos
le dare a mi ejemplo un margen de 20px pero debo advertirles que cuando
usen margenes deven restar el margen al ancho (o alto) de su diseo, ya que
use 20px cambiare el ancho de 200px a 180px o si no se descuadrara (aqui es
cuando sirven los alto/ancho max y min)

ajusten el texto como deseen para ya tener lista su primera plantilla

tendran algo parecido a esto

http://ferumaxspectral.foro-libre.com/t7-crear-un-diseno-css-con-kompozer