Табуляциясыз орналасулар жаңа дизайн шекараларын ашыңыз
Кестелерді орналасу үшін пайдаланбауға көптеген себептер бар. Адамдарды пайдалануды жалғастыруға берген ең жиі себептердің бірі - CSS-мен орналасуды жасау қиын. CSS сценарийі CSS-нің орналасуын қалай түсінуге болатындығын түсінген кезде, оқудың қисық сызығына әкеледі, дегенмен, ол қаншалықты оңай болатынына таң қалуы мүмкін. Сіз оқып шыққаннан кейін, CSS-ті пайдаланбаған адамдар үшін ең көп тараған себептерді қарастырасыз: «Кестелер жазу жылдамырақ». Бұл кестелерді білетіндіктен жылдамырақ, бірақ сіз CSS-ті үйренгеннен кейін, сіз тезірек бола аласыз Сонымен бірге.
CSS орналасуын шолғышты қолдау
Барлық қазіргі заманғы браузерлерде CSS орналасуы жақсы қолдау көрсетеді. Netscape 4 немесе Internet Explorer 4 үшін сайт жасамасаңыз, оқырмандарыңыз CSS-ті орналастырған веб-беттеріңізді көруде қандай да бір қиындықтар болмауы керек.
Бетті қалай құрастыруға болады деп ойлайсыз
Кестелерді пайдалана отырып, сайтты құрастырған кезде кестелік форматта ойластыру қажет. Басқаша айтқанда, сіз ұяшықтарды, жолдар мен бағандарды тұрғысынан ойлап отырсыз. Сіздің веб-беттеріңіз осы тәсілді көрсетеді. Сіз CSS орналасу дизайнына ауысқан кезде, сіз мазмұнның мазмұны бойынша беттеріңізді ойлауды бастайсыз, себебі мазмұнды басқа мазмұнның үстіне тіпті қабаттасқан орналасуды қалайтын жерде орналастыруға болады.
Әртүрлі веб-сайттарда әр түрлі құрылымдар бар. Тиімді бетті құру үшін, мазмұнды тағайындалмас бұрын, кез келген беттің құрылымын бағалаңыз. Мысал бетінде бес түрлі бөлік болуы мүмкін:
- Тақырып . Баннер жарнамасы, сайттың атауы, навигациялық сілтемелер, мақаланың атауы және бірнеше басқа заттар бар.
- Оң жақ бағана . Бұл іздеу беті, жарнамалар, бейне жәшіктер және сауда аймақтары бар парақтың оң жағы.
- Мазмұны . Мақала мәтіні, блог жазбалары немесе сатып алу себеті - беттің ет-картоптары.
- Кірістірілген жарнамалар . Жарнамалар мазмұн ішіндегі кірістірілген.
- Төменгі деректеме . Төменгі шарлау, авторлық ақпарат, авторлық құқық туралы ақпарат, төмен баннер жарнамалары және сілтеме сілтемелері.
Бұл бес элементті үстелге қоюдың орнына мазмұнның әртүрлі бөліктерін анықтау үшін HTML5 бөлім элементтерін пайдаланыңыз, содан кейін мазмұн элементтерін бетке орналастыру үшін CSS орналасуын қолданыңыз.
Мазмұн бөлімдерін анықтау
Сайттың әртүрлі мазмұн аумақтарын анықтаған соң, оларды HTML-ге жазуыңыз қажет. Әдетте сіз бөлімдеріңізді кез-келген тәртіпте орналастыра аласыз, ал бірінші кезекте сіздің бетіңіздің маңызды бөліктерін орналастыру жақсы идея. Бұл тәсіл іздеу жүйесін оңтайландыруға көмектеседі.
Орналастыруды көрсету үшін үш бағаннан тұратын бетті қарастырыңыз, бірақ тақырып немесе төменгі деректеме жоқ. Өзіңізге ұнайтын орналасудың кез келген түрін жасау үшін позициялауды пайдалануға болады.
Үш бағанды орналасу үшін үш бөлімді анықтаңыз: сол жақ баған, оң баған және мазмұн.
Бұл бөлімдер контент үшін ARTICLE элементін және екі бағанның екі СЕБЕЙІ элементтерін пайдаланып жасалады. Барлығы да оны анықтайтын атрибутқа ие болады. Id төлсипатын пайдаланғанда, әр идентификатор үшін бірегей атауды белгілеуіңіз керек.
Мазмұнды орналастыру
CSS-ні қолданып, IDd элементтері үшін орынды анықтаңыз. Орналасқан жеріңіз туралы ақпаратты мәнер қоңырауына сақтаңыз:
#мазмұны {
}
Бұл элементтердің ішіндегі мазмұны қаншалықты орын алады, солайша ағымдағы орналасудың немесе бетінің ені 100 пайызды құрайды. Бөлімнің орналасқан жеріне тіркелген енге мәжбүрлеп әсер етпеу үшін, толтырғышты немесе маржа сипаттарын өзгертіңіз.
Бұл орналасу үшін екі бағанды тіркелген ендерге орнатыңыз, содан кейін олардың орналасуын абсолютті етіп орнатыңыз, сонда олар HTML-да табылған жерлерге әсер етпейді.
# сол жақ баған {
лауазымы: абсолютті;
сол: 0;
ені: 150px;
margin-left: 10px;
margin-top: 20px;
түсі: # 000000;
толтыру: 3px;
}
# оң жақ баған {
лауазымы: абсолютті;
сол: 80%;
жоғарғы: 20px;
ені: 140px;
padding-left: 10px;
z-индексі: 3;
түсі: # 000000;
толтыру: 3px;
}
Содан кейін мазмұн аумағы үшін контент екі сыртқы бағанға сәйкес келмейтін етіп, сол және сол жақ шеттерін орнатыңыз.
#мазмұны {
жоғарғы жағы: 0px;
margin: 0px 25% 0 165px;
толтыру: 3px;
түсі: # 000000;
}
HTML кесте орнына CSS-ні пайдаланып, сіздің бетіңізді анықтау сізде біршама техникалық дағдыларды қажет етеді, бірақ шығындар сіздің икемді және жауапты конструкциялардан және кейінгі беттерге құрылымдық түзетулерді жасауда оңайырақ болады.