Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje11-10-2010, 04:20 (UTC)    
Título del mensaje: [Tutorial]Crear un diseño semi-avanzado con KompoZer

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
Cita:
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
table {margin-left:auto; margin-right:auto;}


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;
______________


Ultima edición por darknet13 el Mar Oct 26, 2010 8:06 pm; editado 4 veces
Mensaje11-10-2010, 17:07 (UTC)    
Título del mensaje:

Muy bueno el tutorial
______________
Luciano Jmz
Luciano Jmz
Mensaje11-10-2010, 17:15 (UTC)    
Título del mensaje:

Holaaa

Buenn tuto 10/10
______________

Ayuda Webmaster - Recursos & Herramientas
Mensaje11-10-2010, 17:37 (UTC)    
Título del mensaje:

jeje habia escuchado de este programa! cuando ya aprenda CSS tratare de hacer algo ahi
Mensaje11-10-2010, 22:54 (UTC)    
Título del mensaje:

gracias por los comentarios, pienso mostrar como crear las estructuras mas comunes en css. Tambien unas muy especiales que son algo engorrosas, pero solo puedo escribir estos tutos en fin de semana

recuerden crear paginas en este programa no es muy dificil, con el primer tutorial que puse yo tenia 3 dias con el programa y ya sabia crear la mayoria de las estructuras

tambien si no pueden (o quieren) adaptarlas suban el html a un servidor y pidan en la seccion de talleres que se las adapten
http://www.paginawebgratis.es/forum/viewforum.php?f=16

y lo que queda es practiquen y ponganle empeño, la practica hace al maestro
______________


Ultima edición por darknet13 el Lun Oct 11, 2010 7:05 pm; editado 1 vez
Mensaje11-10-2010, 23:05 (UTC)    
Título del mensaje:

Muy bueno 10/10

Salu2!

______________
Off
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group