CREANDO UN DISEÑO CSS CON KOMPOZER Kompozer tiene una interfaz sencilla si !az utliza"o office o openoffice# lo sa$ras% esta "i&i"i"a en ' partes ()*menus "esple+a$les , estos son los fun"amentales en cual-uier pro+rama (.*/arra "e re"accion , es "on"e +uar"amos# a+re+amos ta$las entre otras cosas# a-ui se encuentra el $oton mas importante0 El $oton CSS (1*/arra "e formato ) , permite la e"icion rapi"a te2tos# permitien"onos a+re+ar listas o san+rias a nuestros te2to (3*/arra "e formato . , esta es una $arra "e e"icion "e te2to mas sencilla# nos permite estilizar el te2to con fon"o# colores# alineacion# ect0 (4*Campo a"ministracion "e sitios , 5a -ue P67 no ofrece un ser&icio "e 89P este campo realmente no nos sir&e para na"a (:*Campo "e e"icion , esta es la zona mas importante 5a -ue "es"e a-ui &isualizaremos nuestro sitio en creacion ('*/otones "el campo "e "ise;o , estos nos permiten cam$iar el
a!ora -ue concemos un poco la interfaz &amos a lo $ueno# el "ise;o PAR9E 1 , CREANDO =A ES9RUC9URA &amos a crear un "ise;o sencillo como inicio# 5o utilizare colores como $ase solo para -ue ten+an una i"ea "e como funciona to"o esto# lue+o !are tutoriales "e como !acer plantillas mas a&anza"as presionaremos el $oton "i&i"ir en la parte "e a$a>o "el pro+rama para tener el co"i+o 5 &er el "ise;o al mismo tiempo
a!ora &amos al menu formato parrafo contene"or +enerico "i&% esto creara un pe-ue;o cua"ro ro>o
a este "emosle clic? "erec!o propie"a"es a&anza"as# se a$rira el si+uiente cua"ro# en este $uscamos "on"e "ice atri$uto 5 ponemos
si me !an se+ui"o paso a paso en la parte "e a$a>o se &era un co"i+o asi
a!ora &iene nuestro "ise;o0 No se si sea un error en Kompozer# al+uien ol&i"o !acerlo o no lo encuentro pero no se como a+re+ar mas "i&s "es"e el mo"o +rafico asi -ue lo -ue !aremos es a+re+arlos "es"e la zona "e co"i+os estamos !acien"o un "ise;o -ue consta "e 4 partes contene"or ca$ezal menu conteni"o este contene"or siempre se llamara content $lame P67% pie a!ora -ue tenemos nuestro contene"or copiaremos el mismo "i& 5 lo
pe+aremos &arias &eces "e esta manera# "amos enter @"i& i"Bcontene"orB@$rAUI@"i& "one esta marca"o 5 empezamos a pe+ar los contene"ores# 5a -ue los pe+amos les cam$iaremos el nom$re "e acuer"o a su funcion
a!ora nuestro "ise;o esta encerra"o "entro "el contene"or# &amos a personalizarlo# les &o5 a poner nom$re para -ue sepan cual es ca"a uno no es necesario -ue uste"es lo !a+an%
PAR9E 3 , PERSONA=IZANDO =A ES9RUC9URA presionamos el $oton CSS en la parte superior "el pro+rama# si no !an +uar"a"o aun aparecera esto
es para poner un titulo a la pa+ina# si lo !acen o no es opcional 5a -ue no utilizaremos esto en P670 presionamos aceptar 5 pasamos al si+uiente cua"ro el cua"ro "e +uar"ar# 5a se$es -ue !acer0 FnoG# pues +uar"a tu pa+ina
al +uar"ar se a$rira un nue&o cua"ro llama"o !o>as "e estilo CSS# -ue e2plicare $asicamente ()*$otones "e estilo , con la paleta creamos nue&os estilos# el ."o $oton recar+a la !o>a "e estilosesto es si se usa una fuera "e la pa+ina# las tipicas st5le0css%# selector "e e"icion permite cam$iarle el nom$re "e un estilo 5a crea"o# el $oton eliminar es o$&io# 5 las flec!as permiten or"enar los co"i+os 5a crea"os (.*el cua"ro !o>as 5 re+las# es "on"e se alo>aran las re+las "e estilo# separa"or por !o>as es un tanto "ificil "e eplicar% (1*cua"ro cam$iante# este cam$iara "epen"ien"o "e lo -ue !a+amos
/ODH a!ora presionaremos el )er $oton -ue "ice p0e0!. "e$a>o "e elen la zona "e CSS es mas facil referirse al p0e%# 5 presionamos el $oton "esliza$le para $uscar $o"5 cuerpo "e la pa+ina% 5 presionamos
en esta parte solo nos interesa la pesta;a fon"o# asi -ue &amos a ella 5 seleccionaremos un fon"o# un color por e>emplo
tam$ien "e$emos pasar a la pesta;a te2to a seleccionar el color "e este 5 si se "esea# el tipo en
CON9ENEDOR a!ora presionaremos el $oton "e la paleta "e colores# 5 seleccionamos la 1ra opcion -ue "ice "e$a>o p0e0 !ea"er# &amos al "esliza$le 5 seleccionamos contene"or# 5
este contene"or es el -ue "efinira el tama;o "e nuestro "ise;o asi -ue &amos a la pesta;a ca>a 5 le "amos un tama;o 5o se lo "are "e Jp2 para -ue entre en una resolucion "e ).32':L# tam$ien en la zona mar+enes# en iz-uier"a 5 "erec!a pon"remos auto para -ue el "ise;o se centre automaticamente# tam$ien se pue"e pasar a la pesta;a $or"e 5 seleccionar $or"es# es mu5 intuiti&o# no se per"eran
pasamos a la pesta;a fon"o 5 le "amos un color 5 aceptamos
este es un $uen momento para +uar"ar
CA/EZA= &amos a css "e nue&o# 1ra opcion ca$ezal
a# en este usaremos la opcion altura 5o le "are en este tuto un &alor "e ).p2 5 para -ue cuan"o escri$a no se a+ran"e en altura ma2 le "are el mismo &alor#
&amos a la pesta;a fon"o 5 le "amos un color les "aremos colores aleatorios por el momento# solo para "iferenciarlos%#
a!ora pasamos a la pesta;a te2to para esco>er un color "e letra 5 no se nos pier"a el te2to en el enca$eza"o
MENU
CSS# 1ra opcion menu a &amos a "arle un &alor "e anc!o "e .p2 tam$ien a altura min0 le "are un &alor "e )p2 para -ue el menu se &ea lar+o 5 mar+en interno superior )p2 si no se a+re+a este# cuan"o se a+re+ue una lista o lin?s# este "i& se separara# asi -ue se a+re+ara en los "i&s "on"e &amos a escri$ir%# 5 a!ora usaremos una opcion llama"a
CON9ENIDO esta es la zona "on"e escri$es lo -ue sale en tu pa+ina# i+ual -ue en el anterior# css# 1ra opcion content a0 a este !a5 -ue ponerle la opcion flotar iz-uier"a )ro para -ue po"amos a>ustar $ien su tama;o# 5a -ue el menu me"ia .p2# nos -ue"an 'p2 li$res asi -ue pon"remos en anc!o 'p2 5 altura min )p2# pesta;a fon"o 5 le "amos color 5 aceptamos
PIE DE PA7INA si no te !az percata"o aun# tu pie "e pa+ina no esta# lo -ue pasa es -ue esta "etras "el menu 5 "el conteni"o# a!ora te "ire como ponerlo css# 1ra opcion pie a0# estan"o a-ui usaremos una nue&a opcion llama"a <"espe>ar< F-ue es lo -ue !aceG ni i"ea# solo se -ue sir&e para cuan"o se te -ue"a un "i& "etras "e los "emas# 5a -ue alineamos los otros "i&s a la iz-0 pon"remos iz-uier"a# cuan"o ten+as alinea"os a la "erec!a usaremos "erec!a# cuan"o uses am$os pues usaras am$os# a este le "amos una altura "e .4p2 pasemos a fon"o 5 "emosle color# a ese recomien"o -ue en la pesta;a te2to en peso le pon+an ne+rita 5 alineacion centra"a# a!ora aceptamos 5 si no lo !an !ec!o +uar"amos
tu "ise;o se "e$e &er mas o menos asi
a!ora &amos a escri$ir so$re el conteni"o para &er como funciona
5a -ue escri$imos un poco so$re el "ise;o creo -ue el te2to -ue se;ala cual es el contene"or es o$soleto asi -ue $orraremos el te2to con to"o 5 enter# para esto !a5 1 maneras !a5 -ue !acer clic? antes "e la C presionar SI89 o MAN9ENER 5 flec!a !acia a$a>o 5 $orrar "es"e la ca>a "i&i"i"a "e a$a>a tenien"o selecciona"o el contene"or% seleccionamos contene"or@$r 5 eliminar cam$iar a mo"o co"i+o fuente en los $otones "e a$a>o "el pro+rama% 5 $uscar la linea contene"or@$r 5 $orrarla solo ase+urense "e no $orrar el ca$ezal IPERINCU=OS EN=ACES =INKemplo lin?% se selecciona el te2to 5 presionamos el $oton BenlaceBes el :to $oton "e "erec!a a iz-uier"a en el menu "e arri$a% al presionarlo aparece la si+uiente &entana
"on"e u$icacion "el enlace es "on"e escri$imos la url "e nuestro !iper&inculo
5 "estino es la forma en la -ue se a$riran nuestros enlaces +eneralmente no se selecciona na"a 5a ue -ueremos a$rir los lin? en la misma pesta;a "el na&e+a"or# pero si se -uiere -ue se a$ra el lin? en una nue&a se selecciona 5 en el menu "esple+a$le selecciona en una nue&a &entana
9OUES 8INA=ES A NUES9RO DISEÑO pues lo unico -ue -ue"a es alinear los te2tos 5 colorear como "eseen el "ise;o# 5a conocen las !erramientas# 5o por e>emplo no me +usta -ue el te2to "e mis lin?s esten tan pe+a"os al $or"e asi -ue los &o5 a mo&er# para esto usaremos mar+enes internos CSS , menu , pesta;a ca>a mar+enes internos le "are a mi e>emplo un mar+en "e .p2 pero "e$o a"&ertirles -ue cuan"o usen mar+enes "e&en restar el mar+en al anc!o o alto% "e su "ise;o# 5a -ue use .p2 cam$iare el anc!o "e .p2 a )Lp2 o si no se "escua"rara a-ui es cuan"o sir&en los altoanc!o ma2 5 min%
a>usten el te2to como "eseen para 5a tener lista su primera plantilla ten"ran al+o pareci"o a esto
http://ferumaxspectral.foro-libre.com/t7-crear-un-diseno-css-con-kompozer
