Таблелесс Лаиоутс отвара нове дизајнерске границе
Постоји много разлога да не користите табеле за изглед . Један од најчешћих разлога који људи дају за наставак коришћења је то што је тешко направити распоред ЦСС-а. Иако ЦСС скриптирање подразумева криву учења, када схватите како да урадите ЦСС изглед, можда ћете бити изненађени колико је лако. И када једном научите, обратићете се другом најчешћи разлог због којег људи не дају за коришћење ЦСС-а - "Брже је писати табеле." Брже је зато што знате табеле, али једном када научите ЦСС, можда ћете бити бржи с тим.
Бровсер подршка ЦСС позиционирања
ЦСС позиционирање је добро подржано у свим модерним претраживачима . Осим ако не изграђујете сајт за Нетсцапе 4 или Интернет Екплорер 4, ваши читачи не би требали имати проблема са приказивањем Веб страница постављених на ЦСС-у.
Поново размишљаш како градиш страницу
Када изградите сајт користећи табеле, морате размишљати у табеларном формату. Другим речима, размишљате у смислу ћелија и редова и колона. Ваше веб странице ће одражавати овај приступ. Када пређете на дизајн позиционирања ЦСС-а, почећете да размишљате о својим странама у смислу садржаја, јер се садржај може поставити било гдје желите у изгледу - чак и слојевитом на другом садржају.
Различите странице имају различите структуре. Да бисте направили ефикасну страницу, процените структуру било које странице пре него што јој доделите садржај. Примерна страница може укључивати пет различитих секција:
- Хеадер . На почетку рекламе за банере, име локације, линкове за навигацију, наслов чланка и као и неколико других ствари.
- Десна колона . Ово је права страна странице са оквиром за претрагу, огласима, видео кутијама и трговачким местима.
- Садржај . Текст чланка, блог поста или корпа за куповину - месо и кромпир на страници.
- Инлине огласи . Огласи су у линији садржаја.
- Фоотер . Доња пловидба, информације о аутору, информације о ауторским правима, ниже рекламе и сличне везе.
Уместо стављања ових пет елемената у таблицу, користите елементе за раздвајање ХТМЛ5 да дефинишете различите дијелове садржаја, а затим користите позиционирање ЦСС-а да бисте поставили елементе садржаја на страници.
Идентификовање ваших секција садржаја
Након што дефинишете различите садржаје на вашој веб локацији, морате их написати у свој ХТМЛ. Док можете, уопштено, поставити своје секције у било који поредак, добра је идеја да прво поставите најважније делове ваше странице. Овај приступ ће помоћи у оптимизацији претраживача.
Да бисте приказали позиционирање, замислите страницу са три колоне али без заглавља или подножја. Можете да користите позиционирање како бисте креирали било коју врсту приказа који вам се свиђа.
За табелу са три колоне, дефинишите три секције: лијево ступце, десну колону и садржај.
Ови сектори ће бити инстанцирани коришћењем елемента АРТИЦЛЕ за садржај и два СЕЦТИОН елемента за две колоне. Све ће такође имати атрибут који ће га идентификовати. Када користите атрибут ид, морате приписати јединствено име за сваки ид.
Позиционирање садржаја
Користећи ЦСС, дефинишите позицију за ваше ИД'д елементе. Чувајте своје податке о положају у оваквом стилу:
#цонтент {
}
Садржај унутар ових елемената заузима што више простора колико може, односно 100 посто ширине тренутне локације или странице. Да бисте утицали на локацију одељка без присиљавања на фиксну ширину, промените паддинг или својства маргине.
За овај изглед поставите две колоне на фиксне ширине а потом поставите њихову позицију апсолутно, тако да на њих не би утицали гдје се налазе у ХТМЛ-у.
# лефт-цолумн {
позиција: апсолутно;
лево: 0;
ширина: 150пк;
маргин-лефт: 10пк;
маргин-топ: 20пк;
боја: # 000000;
паддинг: 3пк;
}
# десна колона {
позиција: апсолутно;
лево: 80%;
топ: 20пк;
Ширина: 140пк;
паддинг-лефт: 10пк;
з-индекс: 3;
боја: # 000000;
паддинг: 3пк;
}
Затим за област садржаја поставите маргине на десно и лево тако да се садржај не би преклапао два спољна ступца.
#цонтент {
топ: 0пк;
маргин: 0пк 25% 0 165пк;
паддинг: 3пк;
боја: # 000000;
}
Дефинисање ваше странице помоћу ЦСС-а умјесто ХТМЛ таблице захтијева мало више техничке вјештине, али исплата иде из флексибилнијих и одговарајућих дизајна и лакше је учинити структурне прилагодбе на вашој страници касније.