Els dissenys sense taules obren noves fronteres de disseny
Hi ha moltes raons per no utilitzar taules per al disseny . Una de les raons més freqüents que donen les persones per seguir utilitzant-les és que és difícil fer el disseny amb CSS. Tot i que les seqüències d'ordres CSS impliquen una corba d'aprenentatge, quan enteneu com fer el disseny CSS, és possible que us sorprengui el fàcil que es pot fer. I una vegada que apreneu, haureu abordat la segona raó més comuna que donen les persones per no utilitzar CSS: "És més ràpid escriure taules". És més ràpid perquè coneixeu taules, però una vegada que aprèn CSS, podria ser tan ràpid amb aquest.
Suport del navegador del posicionament CSS
El posicionament CSS és compatible amb tots els navegadors moderns . A menys que estigueu construint un lloc per a Netscape 4 o Internet Explorer 4, els vostres lectors no haurien de tenir cap problema per veure les pàgines web que posseeixin CSS.
Repensant com es crea una pàgina
Quan creeu un lloc amb taules, heu de pensar en un format tabular . En altres paraules, esteu pensant en termes de cel·les i files i columnes. Les vostres pàgines web reflectiran aquest enfocament. Quan aneu a un disseny de posicionament CSS, començareu a pensar en les vostres pàgines pel que fa al contingut, ja que el contingut es pot col·locar en qualsevol lloc que vulgueu al disseny, fins i tot en capes sobre altres continguts.
Els diferents llocs web tenen estructures diferents. Per construir una pàgina eficaç, avaluï l'estructura de qualsevol pàgina abans d'assignar-ne contingut. Una pàgina d'exemple pot incloure cinc seccions diferents:
- Capçalera . Inici a la publicitat de la publicitat, el nom del lloc, enllaços de navegació, un títol de l'article i també algunes altres coses.
- Columna dreta . Aquest és el costat dret de la pàgina amb el quadre de cerca, anuncis, caixes de vídeo i zones comercials.
- Contingut . El text d'un article, publicació de bloc o carro de la compra -la carn i la patata de la pàgina.
- Anuncis en línia . Els anuncis es troben dins del contingut.
- Peu de pàgina . La navegació inferior, la informació de l'autor, la informació de copyright, els anuncis de bàner més baixos i els enllaços relacionats.
En comptes de posar aquests cinc elements en una taula, utilitzeu els elements de secció HTML5 per definir les diferents porcions del contingut i, a continuació, utilitzeu el posicionament CSS per col·locar els elements de contingut a la pàgina.
Identificació de les seccions de contingut
Després d'haver definit les diferents àrees de contingut del vostre lloc, heu d'escriure-les al vostre HTML. Si bé, en general, podeu col·locar les vostres seccions en qualsevol ordre, és una bona idea col·locar primer les parts més importants de la vostra pàgina. Aquest mètode us ajudarà també amb l'optimització del motor de cerca.
Per demostrar el posicionament, imagineu una pàgina amb tres columnes, però no cap encapçalament ni peu de pàgina. Podeu utilitzar el posicionament per crear qualsevol tipus de disseny que vulgueu.
Per a un disseny de tres columnes, defineixi tres seccions: columna esquerra, columna dreta i contingut.
Aquestes seccions es crearan instàncies mitjançant l'element ARTICLE del contingut i dos elements SECCIÓ per a les dues columnes. Tot també tindrà un atribut que ho identifiqui. Quan utilitzeu l'atribut id, heu d'assignar un nom únic per a cada id.
Posicionament del contingut
Mitjançant CSS, defineix la posició dels elements IDD. Emmagatzemi la informació de la posició en una trucada d'estil com aquesta:
#contingut {
}
El contingut d'aquests elements ocuparà tant espai com sigui possible, és a dir, el 100 per cent de l'amplada de la ubicació actual o de la pàgina. Per afectar la ubicació d'una secció sense forçar-la a un ample fix, canvieu el farciment o les propietats del marge.
Per aquest disseny, estableixi les dues columnes en amplades fixes i, a continuació, estableixi la seva posició absoluta, de manera que no es veurien afectats per on es troben en l'HTML.
# left-column {
posició: absoluta;
esquerra: 0;
ample: 150 px;
marge esquerre: 10 px;
marge superior: 20 px;
color: # 000000;
farcit: 3px;
}
# columna dreta {
posició: absoluta;
esquerra: 80%;
top: 20 px;
ample: 140 px;
padding-left: 10px;
z-index: 3;
color: # 000000;
farcit: 3px;
}
A continuació, per a l'àrea de contingut, estableixi els marges de la dreta i l'esquerra perquè el contingut no se superposi a les dues columnes externes.
#contingut {
top: 0px;
marge: 0px 25% 0 165px;
farcit: 3px;
color: # 000000;
}
La definició de la vostra pàgina amb CSS en comptes d'una taula HTML requereix una mica d'habilitat tècnica, però la recompensa es desprèn de dissenys més flexibles i sensibles i una major facilitat per fer ajustos estructurals a la vostra pàgina més endavant.