vamos a aprender a crear un diseño CSS desde scratch en unos minutos utlizando un programa gratuito llamado Kompozer
Tiempo estimado de creacion la 1ra vez = como 10 a 15 minutos, dependiendo de tu comprencion
Tiempo estimado al entender como funciona = depende del diseño, uno sencillo puede llevar hasta unos 3 o 4 minutos
Si no desean conocer el programa o de donde descargarlo salten hasta la seccion 3 del tuto
este tuto puede parecer largo peo no lo es, pero necesite explicar algunas partes para que no se confundan mucho
lo que vamos a crear es algo parecido a esto
[img]http://img.webme.com/pic/d/darknet13/tuto-komp01-Final
PASO 1 - DESCARGANDO KOMPOZER
1ro entraremos a la seccion de descargas de Kompozer
http://kompozer.net/download.php
y seleccionaremos el idioma y el tipo de ejecutable (Kompozer viene en dos sabores, instalable y portable), por ejemplo yo seleccione este:
Spanish - ZIp FIle
despues de instalar (o descomprimir) abriremos Kompozer.
PARTE 2 - ANALIZANDO EL PROGRAMA
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 diseño - estos nos permiten cambiar el 'modo de vista' de nuestro diseño, el boton diseño nos muestra como se veria nuestro diseño 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 diseño
PARTE 3 - CREANDO LA ESTRUCTURA
vamos a crear un diseño 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 diseño al mismo tiempo
ahora vamos al menu formato
parrafo
contenedor generico (div) esto creara un pequeño 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 diseño. 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 diseño 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 diseño 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 pestaña fondo, asi que vamos a ella y seleccionaremos un fondo, un color por ejemplo
tambien debemos pasar a la pestaña 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 tamaño de nuestro diseño asi que vamos a la pestaña caja y le damos un tamaño 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 diseño se centre automaticamente, tambien se puede pasar a la pestaña borde y seleccionar bordes, es muy intuitivo, no se perderan
pasamos a la pestaña 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...'
pestaña 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 pestaña fondo y le damos un color (les daremos colores aleatorios por el momento, solo para diferenciarlos),
ahora pasamos a la pestaña texto para escojer un color de letra y no se nos pierda el texto en el encabezado
MENU
CSS, 3ra opcion
#menu
'nueva regla...'
pestaña 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...'
pestaña caja. a este hay que ponerle la opcion flotar izquierda 1ro para que podamos ajustar bien su tamaño, ya que el menu media 200px, nos quedan 700px libres asi que pondremos en ancho
700px y altura min
100px,
pestaña 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...'
pestaña 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 pestaña texto en peso le pongan negrita y alineacion centrada, ahora aceptamos y si no lo han hecho guardamos
tu diseño 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 diseño creo que el texto que señala 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 pestaña 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 DISEÑO
pues lo unico que queda es alinear los textos y colorear como deseen el diseño, 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 -> pestaña 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 diseño, 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
guarden, por que es hora de ir a PWG
PARTE FINAL - ADAPTANDO EL DISEÑO EN PAGINAWEBGRATIS
entramos a nuestra cuenta -> editar diseño y seleccionamos CSS design - no tan popular
debajo hay 2 pestañas seleccionamos la que dice "configuraciones avanzadas"
agregamos el siguiente codigo a "CSS sin style tags" para eliminar los menus y espacior invisibles
este codigo es mio (a excepcion del de centrar la publicidad ese es de buzzdungeon) y funciona muy bien ya que el que usamos normalmente deja unas separaciones en los diseños con Kompozer, tambien puede usarse con plantillas normales
parrafo 
