Lista de tutoriales
Crear un diseño sencillo con KompoZer
Crear un diseño semi-avanzado con KompoZer
tiempo de creacion
yo creo que unos 10 minutos sin crear imagenes
creando las imagenes, puede que alrededor de 1/2 hora dependiendo de sus imagenes
Ahora vamos a crear un diseño semi-avanzado con este genial programa. Para esto espero que hayan practicado con el tutorial anterior, ya que algunas pares me las voy a saltar por que ya estan explicadas en el tutorial anterior
este es el diseño que trataremos de hacer
explicado lo anterior vamos a ver lo que trataremos de hacer esta vez, seleccione este diseño por que es una estructura que agrada bastante en PWG
PASO 1 - CREANDO CONTENEDORES PRINCIPALES
1ro vamos a presionar el boton dividir que se encuentra hasta abajo
ahora si, vamos a formato -> parrafo -> contenedor generico (div)
ya que esta creado le damos al div click derecho -> propiedades avanzadas e igual al tuto anterior le ponemos en atributo 'id' y en valor 'contenedor'
copiamos el div creado y lo pegamos para crear 5 contenedores, cambiemosle los nombres para que se vea asi
he puesto un div extra llamado 'legal' por que a varios les gusta poner su firma en la plantilla
vamos a CSS y presionamos el boton de la paleta de colores y seleccionamos el 3er boton para crear una nueva regla de estilos para #contenido
estan seran las medidas
anchura: 990px
margen derecha e izquierda: auto
pasamos a la pestaña fondo y le ponemos el color blanco(por si ponemos una imagen de fondo)
de esta forma nuestro diseño ocupara toda la ventana en una resolucion de 1024x768
el cabezal ocupara las siguientes medidas
altura:202px(como ahora utilizaremos imagenes, generalmente los contenedores deben tener el mismo tamaño a menos que desees que se repita la imagen)
vamos a la pestaña fondo y en la seccion imagen pegamos la url en la caja de texto, utilizemos esta en el tutorial
http://wimg.co.uk/Eol.jpg
ya que esta es una nueva opcion voy a explicarla,
[1]imagen: aqui es donde va nuestra imagen de fondo, dependiendo de nuestro explorador es la compatibilidad de las imagenes
[2]repetir: estas son las opciones para repetir la imagen
[3]la imagen se desplaza con la pagina: al des-seleccionar este boton nuestra imagen se movera junto con la pagina, si se mueve la pagina hacia abajo las imagenes se moveran junto con ella(no recomendado para botones o cabezales, recomendado para los fondos)
[4]posicion izquierda centrada derecha: esta zona (cuando la imagen es pequeña o el div es muy grande) sirve para posicionar la imagen dentro del div de forma horizontal (de lado a lado)
[5]posicion superior centrada inferior: posiciona la imagen de forma vertical (de arriba hacia abajo)
ya que utilizamos el div entero no se neesita mover ninguna de las opciones de imagen asi que aceptamos y listo
creamos una regla de estilo para #contenedor con las siguientes medidas
~pestaña caja
anchura: 770px
flotar: izquierda
ahora crearemos una regla para #sidebar
~pestaña caja
anchura: 200px
flotar: izquierda
esto deja un pequeño espacio de 20px asi que regresamos a contenido y agregamos lo siguiente
~pestaña caja
margenes - derecha: 20px
IMAGEN4
creamos una nueva regla de estilo para #pie
~pestaña caja
despejar: izquierda
altura: 34px
~pestaña imagen
imagen:
http://wimg.co.uk/UrA.jpg
repetir: horizontalmente
Poscicion: centrada - inferior
por ultimo creamos una regla para #legal y modificamos lo siguiente
~pestaña texto
alineacion: derecha
tamaño de letra: small
y le agregamos al div la informacion que queramos
tendremos algo asi
CREANDO EL CONTENIDO
ya tenemos la mitad del diseño creado ahora falta la otra mitad
copiamos un contenedor y lo pegamos dentro del div llamado contenedor 3 veces, este sera nuestro contenido(cuidado con los nombres, sobre todo el de content, este debe llamarse asi siempre)
ahora vamos a personalizarlo
vamos a CSS y creamos las siguientes reglas, ya que sabemos como no necesito explicarlo mucho
#contstart
~Pestaña caja
altura: 30px
~Pestaña fondo
Imagen:
http://wimg.co.uk/nrj.png
repetir: no repetir
posicion: centrada inferior
de esta forma la imagen se quedara pegada al contenido no imaportando que tan grande sea el div
#content
~pestaña caja
altura min: 300px
~Pestaña fondo
imagen:
http://wimg.co.uk/CvU.png
repetir: verticalmente
posicion: centrada superior
#contend
~pestaña caja
altura: 58px
~pestaña fondo
imagen:
http://wimg.co.uk/YBR.png
repetir: no repetir
posicion: centrada superior
asi la imagen se quedara pegada al contenido no importa el tamaño del div
el color, posicion, margen, tamaño y alineacion la dejo a su criterio
al final tendremos algo parecido a este (ya con los margenes, texto coloreado entre otros)
MODIFICANDO EL SIDEBAR
copiaremos uno de los divs y lo pegamos dentro del sidebar 3 veces para crear nuestro menu(modificamos los nombres)
ya tenemos nuestro 1er menu, si deseamos mas menues, solo copiamos los 3 div y los pegamos de nuevo, dependiendo de cuantos menues deseemos, haciendolo de esta forma cuando editemos el css cambiaran todos juntos
en este tutorial usaremos 3, asi que pegaremos el codigo 2 veces mas
vamos a CSS y creamos una regla de estilo para #menuup
~pestaña caja
altura: 41px
~pestaña fondo
imagen:
http://wimg.co.uk/Jlw.png
#menumid
altura min:200px(opcional, no es necesaria)
#menuend
altura:esta depende de que tan separados desees que esten tus menus
igual que el anterior, la personalizacion de los textos los dejo a su discrecion
por peticion popular agregaremos fondo a este diseño asi que vamos por ultima vez a CSS y presionamos el boton de la paleta de colores, seleccionamos la primera de las opciones y en el menu desplegable seleccionamos 'body' y en la pestaña fondo ponemos esta imagen
http://wimg.co.uk/T4X.jpg
solo nos resta pasar a 'Codigo fuente'(en los botones de abajo) y borrar todos los enters "<br>" que estan de sobra
al terminar esto hemos terminado este diseño
solo queda adaptarlo a PWG
en el tuto anterior les he mostrado como se adaptan los diseños de KompoZer, para simplificar
se agrega el siguiente code
todo lo que esta entre
<style type="text/css">
y
</style>
va en CSS sin styletags
todo lo que esta entre
<body>
y
<div id="content">
va en texto por encima de la pagina
todo lo que esta entre
</div> (este es el div final de content)
y
</body>
va en texto por debajo
debo remarcar que algunas veces el contenido crea una separacion entre el div de arriba y abajo, esto se arregla agregando al #content la siguiente linea
margin-top:-20px;
tambien al div de abajo debemos agregar el mismo code (en este caso seria a #menuend)
margin-top:-20px;
______________