Tableless Layouts Abre novas frontes de deseño
Hai moitas razóns para non usar táboas para o deseño . Unha das razóns máis frecuentes que a xente dá para seguir usándoas é porque é difícil facer o deseño con CSS. Aínda que a secuencia de comandos CSS implica unha curva de aprendizaxe, cando entenda como facer o deseño de CSS, pode sorprender co sinxelo que pode ser. E unha vez que aprende, abordou a segunda razón máis común pola que a xente dá por non usar CSS: "É máis rápido escribir táboas". É máis rápido porque sabes táboas, pero unha vez que aprende CSS, pode ser tan rápido con iso.
Soporte do navegador de posicionamento CSS
O posicionamento CSS está ben soportado en todos os navegadores modernos . A menos que estea construíndo un sitio para Netscape 4 ou Internet Explorer 4, os seus lectores non deberían ter problemas para ver as páxinas web que posicionan CSS.
Repensando como se compila unha páxina
Cando construes un sitio usando táboas, tes que pensar nun formato tabular . Noutras palabras, estás a pensar en termos de celas e filas e columnas. As túas páxinas web reflectirán este enfoque. Cando se move a un deseño de posicionamento CSS, comezará a pensar nas súas páxinas en función do contido, porque o contido pode ser colocado en calquera lugar do que desexa no deseño, mesmo en capas sobre outro contido.
Os diferentes sitios web teñen diferentes estruturas. Para construír unha páxina efectiva, avaliar a estrutura de calquera páxina antes de asignarlle contido. Unha páxina de exemplo pode incluír cinco seccións distintas:
- Cabeceira . Iníciase a publicidade da bandeira, o nome do sitio, as ligazóns de navegación, o título do artigo e tamén algunhas outras cousas.
- Columna dereita . Este é o lado dereito da páxina coa caixa de busca, anuncios, caixas de vídeo e áreas comerciais.
- Contido . O texto dun artigo, unha publicación de blog ou un carrito de compras: a carne e as patacas da páxina.
- Anuncios en liña . Os anuncios en liña dentro do contido.
- Pé de páxina . A navegación inferior, a información do autor, a información de copyright, os avisos de banners menores e as ligazóns relacionadas.
En vez de poñer eses cinco elementos nunha táboa, use os elementos de sección HTML5 para definir as diferentes porcións do contido e, a continuación, use o posicionamento CSS para colocar os elementos de contido na páxina.
Identificación das seccións de contido
Despois de definir as diferentes áreas de contido do teu sitio, debes escribilas no teu HTML. Aínda que poida, en xeral, colocar as súas seccións en calquera orde, é unha boa idea colocar primeiro as partes máis importantes da súa páxina. Este enfoque axudará tamén coa optimización do motor de procura.
Para demostrar o posicionamento, visualiza unha páxina con tres columnas, pero non hai cabeceira nin pé de páxina. Podes usar o posicionamento para crear calquera tipo de deseño que che guste.
Para un deseño en tres columnas, defina tres seccións: columna esquerda, columna dereita e contido.
Estas seccións serán instanciadas usando o elemento ARTICLE para o contido e dous elementos SECCIÓN para as dúas columnas. Todo tamén terá un atributo que o identifique. Cando usa o atributo id, debe atribuír un nome exclusivo para cada id.
Posicionamento do contido
Usando o CSS, defina a posición dos seus elementos ID. Almacena a información da túa posición nunha chamada de estilo como esta:
#contenido {
}
O contido dentro destes elementos ocupará o máximo espazo posible, a saber, o 100 por cento do ancho da situación actual ou da páxina. Para afectar a localización dunha sección sen forzalo a un ancho fixo, modifique o recheo ou as propiedades da marxe.
Para este deseño, configure as dúas columnas en ancho fixo e, a continuación, estableza a súa posición absoluta, de xeito que non se verían afectadas por onde se atopan no HTML.
# esquerda-columna {
posición: absoluta;
esquerda: 0;
ancho: 150 píxeles;
marxe esquerda: 10 px;
marxe superior: 20 px;
cor: # 000000;
padding: 3px;
}
# columna dereita {
posición: absoluta;
esquerda: 80%;
arriba: 20 px;
ancho: 140 píxeles;
padding-left: 10px;
z-index: 3;
cor: # 000000;
padding: 3px;
}
A continuación, para a área de contido, estableza as marxes á dereita e á esquerda para que o contido non se superpoña ás dúas columnas externas.
#contenido {
arriba: 0px;
marxe: 0px 25% 0 165px;
padding: 3px;
cor: # 000000;
}
A definición da túa páxina usando CSS no canto dunha táboa HTML require un pouco máis de habilidade técnica, pero o beneficio segue a partir de proxectos máis flexibles e sensibles e unha maior facilidade para realizar axustes estruturais na túa páxina posterior.