Crea tu diseño CSS

Tutorial "¿Cómo crean un diseño CSS-Design?"

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]https://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

ahora debemos copiar la parte del codigo desde <body> hasta el inicio de content, sin copiar este ultimo

esto lo pegaremos en 'texto po encima de la pagina'

para terminar copiamos desde donde termina content hasta el ultimo cierre de contenedor '</div>'

pegamos este ultimo en texto por debajo de la pagina
guardamos y listo,

asi se debe ver nuestra pagina (mas o menos)