Tableless Layouts отвора нови граници за дизајн
Постојат многу причини зошто да не се користат табели за изгледот . Една од најчестите причини што луѓето ги даваат за да продолжат да ги користат е тоа што е тешко да се направи распоред со CSS. Иако скриптирањето на CSS не вклучува крива на учење, кога разбирате како да направите изглед на CSS, може да бидете изненадени од тоа колку е лесно да биде. И штом еднаш ќе научите, ќе се осврнете на втората најчеста причина што луѓето ја даваат поради тоа што не користат CSS - "Побрзо е да пишувате маси". Побрзо е затоа што знаете табели, но штом ќе научите CSS, може да биде исто толку брзо со тоа.
Поддршка на прелистувачот за позиционирање на CSS
Позиционирањето на CSS е добро поддржано во сите современи прелистувачи . Освен ако не градите веб-страница за Netscape 4 или Internet Explorer 4, вашите читатели не треба да имаат никакви проблеми при гледањето на вашите веб-страници поставени во CSS.
Осмислување како ќе изградите страница
Кога ќе изградите сайт користејќи табели, треба да размислите во табеларен формат. Со други зборови, размислувате во смисла на клетки и редови и колони. Вашите веб страни ќе го рефлектираат овој пристап. Кога ќе се преселите во дизајн за позиционирање на CSS, ќе почнете да размислувате за вашите страници во однос на содржината, бидејќи содржината може да биде поставена каде што сакате во изгледот - дури и слоевит над други содржини.
Различни веб-страници имаат различни структури. За да се изгради ефикасна страница, оцени ја структурата на која било дадена страница пред да и доделите содржина на неа. Пример страница може да вклучува пет различни делови:
- Заглавие . Домот на рекламата за банери, името на сајтот, навигациските врски, насловот на статијата и како и неколку други работи.
- Десна колона . Ова е десната страна на страницата со полето за пребарување, реклами, видео кутии и трговски центри.
- Содржина . Текстот на една статија, блог пост или количка - месо и компири на страницата.
- Вградени реклами . Огласите се вклучени во содржината.
- Footer . Долна навигација, авторски информации, информации за авторски права, пониски рекламни пораки и сродни линкови.
Наместо да ги ставите овие пет елементи во табела, користете елементи за разделување на HTML5 за да ги дефинирате различните делови од содржината, а потоа користете позиционирање на CSS за да ги поставите елементите за содржина на страницата.
Идентификување на вашите секции со содржина
Откако ќе ги дефинирате различните области за содржина на вашиот сајт, треба да ги напишете во вашиот HTML. Иако можете, генерално, да ги ставите вашите секции по кој било редослед, добра идеја е прво да ги поставите најважните делови од вашата страница. Овој пристап ќе помогне во оптимизацијата на пребарувањето.
За да се демонстрира позиционирање, се предвидува страница со три колони, но без заглавие или подножје. Може да користите позиционирање за да креирате било кој тип распоред кој ви се допаѓа.
За распоред со три колона, дефинирајте три дела: лева колона, десна колона и содржина.
Овие секции ќе бидат инстанцирани со користење на елементот ARTICLE за содржината и два елементи на SECTION за двете колони. Сè, исто така, ќе има атрибут што ќе го идентификува. Кога го користите атрибутот id, мора да припишете уникатно име за секој идентификатор.
Позиционирање на содржината
Користејќи CSS, дефинирајте ја позицијата за вашите ID'd елементи. Сочувајте ги информациите за вашата позиција во стилски повик вака:
#содржина {
}
Содржината во рамките на овие елементи ќе потрае колку што е можно повеќе простор, односно 100 проценти од ширината на тековната локација или на страницата. За да влијаете на локацијата на делот без принудувајќи го до фиксна ширина, променете ги пропорциите или маргиналните својства.
За овој распоред, поставете ги двете колони на фиксни ширини и потоа поставете ја нивната позиција апсолутна, така што тие нема да бидат засегнати од тоа каде се наоѓаат во HTML.
# лева колона {
позиција: апсолутна;
лево: 0;
Ширина: 150px;
маргина-лево: 10px;
маргина-врвот: 20px;
боја: # 000000;
Соочувајќи се: 3px;
}
# десна колона {
позиција: апсолутна;
лево: 80%;
нагоре: 20px;
Ширина: 140px;
рампа-лево: 10px;
z-индекс: 3;
боја: # 000000;
Соочувајќи се: 3px;
}
Потоа за областа со содржина, поставете ги маргините на десната и левата страна, така што содржината не би се преклопувала на двете надворешни колони.
#содржина {
нагоре: 0px;
margin: 0px 25% 0 165px;
Соочувајќи се: 3px;
боја: # 000000;
}
Дефинирањето на вашата страница со помош на CSS наместо табела со HTML бара малку повеќе техничка вештина, но отплатата следи од пофлексибилни и реактивни дизајни и поголема леснотија во правењето структурни прилагодувања на вашата страница подоцна.