Без табела оформление отвори нов дизайн Frontiers
Има много причини да не използвате таблици за оформление . Една от най-честите причини, които хората дават, че продължават да ги използват, е, че е трудно да се направи оформление с CSS. Въпреки че скриптовете на CSS водят до крива на обучение, когато разберете как да направите CSS оформлението, може да се изненадате колко лесно може да бъде. И след като научите, ще се обърнете към втората по-често срещана причина, поради която хората не използват CSS - "По-бързо е да пишете таблици". По-бързо е, защото знаете таблици, но след като научите CSS, може би сте толкова бързи с това.
Поддръжка на браузъра за позициониране на CSS
CSS позиционирането е добре поддържано във всички съвременни браузъри . Освен ако не изграждате сайт за Netscape 4 или Internet Explorer 4, вашите читатели не би трябвало да имат проблеми с преглеждането на Вашите CSS позиционирани уеб страници.
Преосмисляне на начина, по който изграждате страница
Когато създавате сайт с помощта на таблици, трябва да мислите в табличен формат. С други думи, мислите си по отношение на клетки и редове и колони. Вашите уеб страници ще отразят този подход. Когато преминете към дизайн за позициониране на CSS, ще започнете да мислите за съдържанието на страниците си, защото съдържанието може да бъде поставено навсякъде, където искате, в оформлението - дори да е наслоено върху друго съдържание.
Различните уеб сайтове имат различни структури. За да създадете ефективна страница, преценете структурата на която и да е страница, преди да я присвоите. Примерната страница може да включва пет различни секции:
- Header . Начало на банер рекламата, името на сайта, навигационни връзки, заглавие на статията и още няколко други неща.
- Дясна колона . Това е дясната страна на страницата с полето за търсене, рекламите, кутиите за видеоклипове и зоните за пазаруване.
- Съдържание . Текстът на статия, публикация в блог или пазарска количка - месото и картофите на страницата.
- Вградени реклами . Рекламите са вградени в съдържанието.
- В долния колонтитул . Долната навигация, информация за автора, информация за авторските права, долни реклами с банери и свързани с тях връзки.
Вместо да поставяте тези пет елемента в таблица, използвайте елементите за пречупване на HTML5, за да определите различните части на съдържанието и след това използвайте позиционирането на CSS, за да поставите елементите на съдържанието на страницата.
Идентифициране на разделите на вашето съдържание
След като определите различните области на съдържанието на сайта си, трябва да ги напишете в HTML. Докато можете да поставите разделите си във всякакъв ред, добре е да поставите първо най-важните части на страницата си. Този подход ще помогне и при оптимизирането на търсещите машини.
За да демонстрирате позициониране, си представете страница с три колони, но без заглавие или долен колонтитул. Можете да използвате позиционирането, за да създадете всякакъв вид оформление, което ви харесва.
За оформление в три колони дефинирайте три секции: лявата колона, дясната колона и съдържанието.
Тези секции ще бъдат инстанциирани с елемента ARTICLE (Артикул) за съдържанието и два елемента SECTION за двете колони. Всичко ще има и атрибут, който го идентифицира. Когато използвате идентификационния атрибут, трябва да припишете уникално име за всеки идентификационен номер.
Позициониране на съдържанието
С помощта на CSS дефинирайте позицията за вашите ID'd елементи. Запазете информацията за позицията си в стилно повикване по следния начин:
#content {
}
Съдържанието на тези елементи ще заема колкото се може повече пространство, а именно 100% от ширината на текущото местоположение или страницата. За да повлияете на местоположението на дадена секция, без да я принуждавате да я фиксирате, променете свойствата на подложката или марж.
За това оформление задайте двете колони на фиксирани ширини и след това задайте абсолютната им позиция, така че те да не бъдат засегнати от мястото, където се намират в HTML.
# left-column {
позиция: абсолютно;
ляво: 0;
ширина: 150px;
margin-left: 10px;
горна граница: 20px;
цвят: # 000000;
подложка: 3 пиксела;
}
# right-column {
позиция: абсолютно;
ляво: 80%;
горе: 20px;
ширина: 140px;
подложка-ляво: 10px;
z-индекс: 3;
цвят: # 000000;
подложка: 3 пиксела;
}
След това за областта на съдържанието задайте полетата отдясно и наляво, така че съдържанието да не се припокрива с двете външни колони.
#content {
горе: 0px;
марж: 0px 25% 0 165px;
подложка: 3 пиксела;
цвят: # 000000;
}
Определянето на вашата страница с помощта на CSS вместо HTML таблица изисква малко по-технически умения, но отплатата е резултат от по-гъвкави и по-лесни дизайни и по-голяма лекота при извършването на структурни корекции на страницата ви по-късно.