CSS - веб-бет дизайндарын жасаудың ең жақсы тәсілі
CSS- тің макеттерін жазуды үйрену өте қиын болуы мүмкін, әсіресе қиял-ғажайып веб-беттердің орналасуын жасау үшін кестелерді пайдалануды жақсы білетін болсаңыз. HTML5 кестелерді кестеге қоюға мүмкіндік береді, бірақ бұл жақсы идея емес.
Кестелер қол жетімді емес
Іздестіру жүйелері сияқты, экрандағы оқырмандар веб-беттерді HTML-де көрсетілетін тәртіпте оқиды. Сондай-ақ, экрандағы оқырмандарды талдау үшін кестелер өте қиын болуы мүмкін. Өйткені, кестенің орналасуындағы мазмұн, сызықты болса да, солдан оңға және жоғарыдан-төменге дейін оқылғанда әрдайым мағынасы жоқ. Сонымен қатар, кірістірілген кестелермен және кесте ұяшықтарындағы әртүрлі кеңістіктерде бетті анықтау өте қиын болады.
HTML5 спецификациясы орналасу кестелеріне қарсы ұсынылады және HTML 4.01 неге тыйым салады. Қол жетімді веб-беттер көп адамдарға оларды пайдалануға және кәсіби дизайнердің белгісі болып табылады.
CSS-де сіз секцияны беттің сол жағына тиесілі ретінде анықтай аласыз, бірақ оны HTML-ге орналастыра аласыз. Содан кейін экранды оқырмандар мен іздестіру машиналары маңызды бөліктерді (мазмұнды) бірінші және ең аз маңызды бөліктерді (навигация) соңғы оқиды.
Үстелдер Tricky
Веб-редакторы бар кесте жасасаңыз да, веб-беттеріңіз бұрынғысынша күрделі және қиын болуы мүмкін. Ең қарапайым веб-бет конструкцияларынан басқа, көптеген орналасу кестелері көптеген атрибуттарды және кірістірілген кестелерді пайдалануды талап етеді.
Кестені құру сіз оны жасаған кезде оңай көрінуі мүмкін, бірақ содан кейін оны сақтау керек. Алты ай өткеннен кейін, сіз неге кестелерді кірістіргеніңізді немесе қатардағы қанша ұяшықтарды және т.б. Сонымен қатар, веб-беттерді топ мүшесі ретінде сақтасаңыз, әрбір адамға кестелер қалай жұмыс жасайтынын немесе өзгерістер енгізу қажет болғанда қосымша уақытты күтетінін түсіндіріп алуыңыз керек.
CSS-ді де қиындатуы мүмкін, бірақ ол презентацияны HTML-дан бөлек ұстайды және ұзақ уақыт бойы қолдауды әлдеқайда жеңілдетеді. Сонымен қатар, CSS орналасуы арқылы бір CSS файлы жаза аласыз және барлық беттеріңізді осылай іздей аласыз. Егер сіздің сайтыңыздың орналасуын өзгерткіңіз келсе, сіз тек бір CSS файлын өзгерте аласыз, және бүкіл торап - барлық кестелерді жоспарлауға арналған кестелерді жаңартуға арналған кез-келген бетте бір-біріне аудармайды.
Үстелдер икемсіз
Дегенмен, пайыздық ені бар кесте орналасуларын жасауға болады, олар көбінесе жүктеуді баяулатады және орналасуыңыз қалай көрінетінін күрт өзгерте алады. Бірақ егер кестелеріңіз үшін белгілі бір ендерді қолдансаңыз, сіз өзіңізден басқаша мөлшердегі мониторларға жақсы көрінбейтін өте қатаң орналасуымен аяқталады.
Көптеген мониторларға, шолғыштарға және ажыратымдылықтарға жақсы көрінетін икемді макеттерді жасау өте оңай. Шын мәнінде, CSS медиа сұрауларымен түрлі өлшемді экрандар үшін бөлек конструкцияларды жасауға болады.
Кірістірілген кестелер бірдей дизайндағы CSS-нен баяу жүктеледі
Кестелермен безендірілген макеттерді жасаудың ең кең таралған жолы - «ұя» кестелерін жасау. Бұл дегеніміз, бір (немесе одан да көп) кесте басқасына орналастырылады. Инсталляцияланған көбірек кестелер веб-браузерге бетті көрсету үшін соғұрлым ұзақ уақыт алады.
Көптеген жағдайларда, кесте орналасуы CSS дизайнына қарағанда жасау үшін көп таңбаларды пайдаланады. Ал аздаған таңбалар қотару үшін аз.
Кестелер іздеу жүйесін оңтайландыруға зиян тигізуі мүмкін
Ең жиі қолданылатын кесте жасалған орналасуда беттің сол жағындағы навигациялық жол және оң жақта негізгі мазмұн бар. Кестелерді пайдаланған кезде бұл (әдетте) HTML-де көрсетілетін бірінші мазмұн сол жақты навигация жолағы болып табылады. Іздеу механизмдері мазмұнға негізделген беттерді санаттайды және көптеген қозғалтқыштар беттің жоғарғы жағында көрсетілген мазмұн басқа мазмұнға қарағанда маңызды екенін анықтайды. Мәселен, алдымен сол жақ шарлауы бар бет навигациядан кем маңызды мазмұнға ие болады.
CSS-ні пайдаланып, маңызды мазмұнды алдымен сіздің HTML-ге орналастыра аласыз, содан кейін оны дизайнға қайда қою керектігін анықтау үшін CSS-ні қолданыңыз. Бұл дегеніміз, дизайн конструкция беттің төменгі жағында болса да, ең алдымен маңызды мазмұнды көреді.
Әрқашан Дұрыс басып шығару үстелдері
Көптеген кесте дизайны жақсы басып шығарылмайды, себебі олар принтерге өте кең. Мәселен, оларды қолайлы ету үшін браузерлер кестелерді қиып, төменгі бөліктерді басып шығарады, нәтижесінде олар өте жарамсыз беттерде пайда болады. Кейде сіз жақсы көрінетін беттермен аяқталады, бірақ оң жақта жоқ. Басқа беттер түрлі парақтарда бөлімдерді басып шығарады.
CSS көмегімен сіз бетті басып шығару үшін жеке стиль кестесін жасай аласыз.
Орналасу кестелері HTML 4.01 ішінде жарамсыз
HTML 4 спецификациясы: «Кестелер құжаттарды мазмұнды орналастыру құралы ретінде ғана пайдаланылмауы керек, себебі бұл визуалды емес медиаға көрсетілу кезінде қиындық тудыруы мүмкін».
Осылайша, сіз жарамды HTML 4.01 жазғыңыз келсе, кесте үшін орналасу мүмкін емес. Кестелерді кесте деректеріне ғана пайдалану керек. Кестелік деректер әдетте электрондық кестеде немесе мүмкін дерекқорда көрінуі мүмкін нәрсеге ұқсас.
Бірақ HTML5 ережені өзгертіп, енді жоспарлауға арналған кестелер ұсынылмаған болса, қазір жарамды HTML болып табылады. HTML5 ерекшелігі: «Кестелер орналасу құралдары ретінде пайдаланылмауы керек.»
Үстелге арналған кестелер экран оқырмандары үшін жоғарыда айтылғандай, әр түрлі болуы мүмкін.
Беттерді орналастыру және орналасу үшін CSS-ні пайдалану - кестелерді жасау үшін пайдаланылған дизайндарды алудың жалғыз жарамды HTML 4.01 жолы. HTML5 бұл әдісті де қатаң түрде ұсынады.
Орналастыруға арналған кестелер сіздің жұмысыңыздың келешегіне әсер етуі мүмкін
Көптеген жаңа дизайнерлер HTML және CSS-ті үйренетіндіктен, кесте орналасуларын жасаудағы дағдыларыңыз аз талап етіледі. Ия, клиенттер әдетте веб-беттерін жасау үшін қолдануға болатын нақты технологияны айтып бермейді. Бірақ олар сізге мына нәрселер туралы сұрайды:
- Қолжетімді веб-беттер: экрандағы оқырмандарды көруге болатын конструкциялар көптеген елдердің өкілеттігін алады және корпорациялар күнделікті қол жетімділікті барынша маңызды деп санайды.
- Қолжетімді веб-беттер: болашақта оларды сақтамай қалсаңыз да, олармен бірге алуға болатын конструкциялар.
- Икемді конструкциялар: көптеген браузерлерде, ажыратымдылықта және құрылғыларда жұмыс істейтін конструкциялар.
- Жылдам жүктелетін беттер: жылдамдық SEO-ға да барған сайын маңызды.
- Басып шығарылатын конструкциялар: арнайы сценарийлерсіз немесе қосымша беттерсіз басып шығарылатын беттер.
Егер сіз клиенттер сұрайтын нәрселерді жеткізе алмасаңыз, олар дизайны үшін сізге келмейді, бәлкім, бүгінгі емес, келесі жылы немесе келесі жылы болуы мүмкін. 90-шы жылдардың соңынан бері қолданылып келе жатқан техниканы үйренуге дайын болмағандықтан, өз бизнесіңіздің зардап шегуіне мүмкіндік бере аласыз ба?
Мораль: CSS-ды қолдануға үйреніңіз
CSS-ті үйрену қиын болуы мүмкін, бірақ күш-жігердің бәрі құнды. Өз дағдыларыңызды тоқыраудан сақтамаңыз. CSS-ті үйреніп, веб-беттеріңізді құру үшін CSS-ті құру керек.