Бестабличные Макеты Open Новы дызайн Frontiers
Ёсць шмат прычын , каб не выкарыстоўваць табліцы для разметкі . Адной з найбольш частых прычын, чаму людзі даюць для далейшага выкарыстання іх, таму што гэта цяжка зрабіць макет з дапамогай CSS. Хоць CSS сцэнары робяць цягнуць за сабой крывое навучанне, калі вы ведаеце, як зрабіць макет CSS, вы можаце быць здзіўлены тым, наколькі лёгка гэта можа быць. І як толькі вы даведаецеся, вы звярнуліся другі найбольш распаўсюджанай прычынай людзі даюць не выкарыстоўваць CSS- «Гэта хутчэй , каб напісаць табліцы.» Гэта хутчэй , таму што вы ведаеце табліцы, але як толькі вы даведаецеся CSS, вы можаце быць гэтак жа хутка з гэтым.
Браўзэр Падтрымка CSS Пазіцыянаванне
Пазіцыянаванне CSS добра падтрымліваецца ва ўсіх сучасных браўзэрах. Калі вы не ствараеце сайт для Netscape 4 або Internet Explorer 4, вашы чытачы не павінны мець якіх-небудзь праблем з праглядам вашага CSS размешчаны вэб-старонак.
Пераасэнсаванне Як вам пабудаваць старонку
Пры стварэнні сайта з дапамогай табліц, вы павінны думаць у таблічным фармаце. Іншымі словамі, вы думаеце ў тэрмінах вочак і радкоў і слупкоў. Вашы вэб-старонкі будуць адлюстроўваць гэты падыход. Пры пераходзе да канструкцыі пазіцыянавання CSS, вы пачнеце думаць аб вашых старонках з пунктам гледжання зместу, так як змест можа быць размешчаны ў любым месцы вы хочаце ў макеце нават напластоўваюцца-над іншага кантэнту.
Розныя вэб-сайты маюць розныя структуры. Для таго, каб стварыць эфектыўную старонку, ацаніць структуру любой старонкі, перш чым прызначыць у яго змесціва. Прыклад старонкі можа ўключаць у сябе пяць розных раздзелаў:
- Загаловак. Галоўны на сьцяг рэкламу, назва сайта, навігацыйныя спасылкі, назва артыкула і, а таксама некалькі іншых рэчаў.
- Правая калонка. Гэта правая частка старонкі з акном пошуку, аб'явы, відэа-боксаў і гандлёвых раёнаў.
- Змест. Тэкст артыкула, паведамленні ў блогу ці каша пакупак-на мяса-бульба старонкі.
- Убудаваныя аб'явы. Рэклама ўбудоўваць у змесце.
- Footer. Дно рух, аўтар, інфармацыя аб аўтарскіх правах, зніжэнне рэкламных банэраў, а таксама адпаведныя спасылкі.
Замест таго каб гэтыя пяць элементаў у табліцы, выкарыстоўваць HTML5 секционирования элементы, каб вызначыць розныя часткі зместу, а затым выкарыстоўваць пазіцыянаванне CSS для размяшчэння элементаў кантэнту на старонцы.
Вызначэнне вашых змесціва падзелаў
Пасля таго як вы вызначылі розныя ўтрымання абласцей вашага сайта, вы павінны напісаць іх у HTML. У той час як вы можаце, як правіла, размяшчаць свае раздзелы ў любым парадку, гэта добрая ідэя, каб змясціць найбольш важныя часткі старонкі першымі. Такі падыход дапаможа пошукавай аптымізацыі, а таксама.
Для таго, каб прадэманстраваць пазіцыянаванне, уявіце старонку з трыма слупкамі, але без загалоўка або ніжняга калантытула. Вы можаце выкарыстоўваць пазіцыянаванне для стварэння любога тыпу макета вам падабаецца.
Для макета з трох слупкоў, вызначыць тры секцыі: левая калонка, правая калонка, і змест.
Гэтыя секцыі будуць инстанцированы з дапамогай гэтага артыкула элемента для ўтрымання і два элементаў секцыі для двух слупкоў. Усё будзе таксама мець атрыбут, ідэнтыфікавалы яго. Пры выкарыстанні атрыбуту ID, вы павінны прыпісваць унікальнае імя для кожнага ідэнтыфікатара.
пазіцыянаванне Зместу
З дапамогай CSS, вызначыць пазіцыю для вашых апазнаў элементаў. Захоўваеце інфармацыю аб становішчы ў выкліку стылю, як гэта:
#content {
}
Утрыманне ў межах гэтых элементаў будзе займаць столькі месца, колькі гэта можа, а менавіта 100 адсоткаў ад шырыні бягучага месцазнаходжання або старонкі. Для таго, каб уплываць на размяшчэнне ўчастка, не прымушаючы яго фіксаваную шырыню, змяніць водступ або ўласцівасці палёў.
Для гэтай схемы, усталяваць дзве калонкі фіксаванай шырыні, а затым ўсталяваць іх становішча абсалютнай, так што яны не будуць закрануты, дзе яны знаходзяцца ў HTML.
# Левы слупок {
пазіцыя: абсалютная;
Злева направа: 0;
шырыня: 150px;
Левае поле: 10px;
Запас-топ: 20px;
колер: # 000000;
абіўка: 3px;
}
# Правы слупок {
пазіцыя: абсалютная;
злева: 80%;
топ: 20px;
шырыня: 140px;
абіўка налева: 10px;
Z-індэкс: 3;
колер: # 000000;
абіўка: 3px;
}
Тады для вобласці змесціва ўсталюеце поля справа і налева так, каб змесціва не будзе перакрываць два знешніх калонак.
#content {
топ: 0px;
Запас: 0px 25% 0 165px;
абіўка: 3px;
колер: # 000000;
}
Вызначэнне старонкі з дапамогай CSS замест HTML-табліца патрабуе крыху больш тэхнічных навыкаў, але вынік вынікае з больш гнуткіх і рэагуючых канструкцый і большай лёгкасці ў прыняцці структурных пераўтварэнняў на старонку пазней.