Што такое вёрстка шаблону для сайта

Што такое вёрстка шаблону для сайта

Вёрстка гэта кадаваньне старонак сайта, гэта значыць напісанне кода на мове HTML ў адпаведнасці з зацверджаным дызайнам. На сёння старонка ўяўляе сабой код з некалькіх моў. Звычайна гэта HTML, CSS, і JavaScript.

Працэс вёрсткі сайта гэта складаны многоэтапный працэс і гэта неад'емная частка працэсу вырабу сайта. Вёрстка не ўкладаецца ў паняцце «работы на некалькі дзён», як часам любяць думаць заказчыкі, што гэта лёгка і проста.

Што такое вёрстка

Вёрстка шаблону - гэта працэс фарміравання вэб-старонкі па гатовым макету. Працэс вёрсткі заключае ў сабе стварэнне кода старонкі пры дапамозе зразумелага браўзэрам мовы разметкі гіпертэксту html, і афармленне яе з дапамогай каскадных табліц стыляў (CSS).

Хто выконвае вёрстку шаблону

Вёрстку шаблону або кадаваньне старонак выконвае адмысловы чалавек - вярстальнік.

Вёрстка і дызайн шырыні старонкі

Каб ўвасобіць прадуманы дызайнерам шаблон для сайта трэба памятаць адзін з важных момантаў, які складаецца ў тым, што ўсе прылады, праз якія карыстальнікі Інтэрнэт могуць патрапіць на сайт, маюць розныя экраны з розным дазволам.

Дазвол экрана на прыладзе карыстальніка можа быць ад вялікага, для настольных сістэм, да вельмі малога, у выпадку мабільных прылад. Як вы ўжо напэўна ведаеце, існуе два асноўных моманту або патрабаванні, якія ставяцца ў самым пачатку яшчэ пры распрацоўцы макета сайта.

Дызайн сайта можа быць з фіксаванай шырынёй або з змянянай шырынёй. Вёрстка з змяняецца шырынёй часта называецца «гумовай» вёрсткай.

Вёрстка з фіксаванай шырынёй выбіраецца зыходзячы з сярэдняй шырыні звычайных настольных сістэм. Для манітораў гэта часта дазвол 1024х768 пікселяў. Таму для карэктнага адлюстравання на экранах, без з'яўлення дадатковых палос пракруткі, трэба выбіраць шырыню рабочай плошчы сайта ў межах 800-990 пікселяў.

Часта для гэтых мэтаў, каб не пералічваць шырыню ўнутраных блокаў і зрабіць макет роўным і выразна структураваным выкарыстоўваюць так званыя сеткі. Напрыклад, шырока вядомая сістэма сетак 960, як зразумела з назвы вызначае шырыню асноўны старонкі ў 960 пікселяў.

Вёрстка з выкарыстаннем сістэмы сетак дазваляе паскорыць працэс распрацоўкі сайта і выключыць памылкі пры прызначэнні значэнняў шырыні для ўнутраных блокаў старонкі. Усе значэння для калонак ў ёй ужо вызначаны. Трэба толькі вызначыцца з колькасцю візуальных калонак уздоўж рабочай шырыні сайта.

Недахоп вёрсткі з фіксаванай шырынёй, як правіла, з'яўляецца неэфектыўнае выкарыстанне вольнага пляца экрана. Аднак вёрстка макетаў з фіксаванай шырынёй здольная ўвасобіць у рэальнасць больш смелыя задумкі дызайнераў. Паколькі для такіх сайтаў можна сапраўды «разрэзаць» графіку, часам нават складаную, якую немагчыма паўтарыць пры «гумовай» вёрстцы.

Змяняную шырыню пры «гумовай» вёрстцы ўдаецца атрымаць дзякуючы таму, што замест пэўных адзінак вымярэння, значэння шырыні паказваюцца ў працэнце ад поўнай шырыні экрана. Пры змене шырыні экрана будзе змяняцца і шырыня ўсіх блокаў з працэнтнай шырынёй.

Гумавая вёрстка дазваляе расцягнуць макет на ўсю шырыню акна браўзэра. Вёрстка і дызайн гумовага макета для многіх найбольш пераважная. У ёй ёсць свае перавагі, хоць, як правіла, гумовыя дызайны не адрозніваюцца крэатыўнасцю і прыгажосцю.

Кроссбраузерная вёрстка. Што такое вёрстка сайтаў з улікам кроссбраузерности

Кроссбраузерность гэта асноўная ўласцівасць і патрабаванне сайта. Кроссбраузерность гэта здольнасць сайта адлюстроўвацца аднолькава на ўсіх прыладах карыстальніка, а дакладней ва ўсіх папулярных браўзэрах якія ў гэтых прыладах ўстаноўлены.

Сёння існуе мноства папулярных браўзэраў, якія выкарыстоўваюцца для працы ў сеткі Інтэрнэт. Да іх адносяцца: Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Netscape Navigator, Safari і іншыя.

Мала таго што колькасць гэтых браўзэраў само па сабе з'яўляецца галаўным болем для распрацоўніка, але акрамя гэтага кожны з гэтых браўзэраў мае мноства версій, у якіх адзін і той жа код можа адлюстроўвацца па-рознаму. Розныя браўзэры выкарыстоўваюць розныя рухавікі таму і адлюстроўваць інфармацыю яны могуць па-рознаму. Акрамя таго хто то падтрымлівае апошнія стандарты моў разметкі а хто то яшчэ не падтрымлівае або часткова падтрымлівае гэтыя правілы.

Вядома, стваральнікі браўзэраў спрабуюць прыйсці да адзінага стандарту адлюстравання мовы гіпертэкставай разметкі, але яшчэ існуе шэраг рознагалоссяў, таму вёрстка сайтаў і павінна ўлічваць такое паняцце як кроссбраузерность.

А цяпер уявіце, якая задача стаіць перад вярстальшчыкі, ён павінен зрабіць так каб усе гэтыя браўзэры адлюстроўвалі старонкі сайта аднолькава. Для гэтага ён павінен ведаць не толькі стандарты моў, але і ведаць, як кожны з іх можа адлюстроўваць той ці іншы ўчастак кода, якія правілы для якіх браўзэраў правільна выкарыстоўваць і як вярстаць для тых браўзэраў, якія не падтрымлівае патрэбныя ўласцівасці. Большасць з гэтых ведаў дае вопыт, чым больш праектаў скончыў вярстальнік, тым больш якасны код ён здольны стварыць.

Вёрстка сайтаў з чыстым кодам

Магчыма, нехта скажа што прыгожы і чысты код гэта не самае галоўнае ў стварэнні сайтаў. Але правіла добрага тону пры вёрстцы сайта пазбаўляе ад мноства праблем. Трэба старацца ствараць чысты і прыгожы код. Што значыць чысты і прыгожы код?

Чысты і прыгожы код html разметкі старонкі павінен быць прыгожа адфарматаваны, утрымліваць зразумелыя каментары і выдзеленыя лагічныя блокі. Назва класаў павінна быць таксама зразумелым, ня варта скарачаць назву класаў, выкарыстоўваць літары і спалучэнне літар. Лепш апісваць класы зразумелымі словамі без скарачэнняў.

Выкарыстанне каскадных табліц стыляў (CSS), дазваляе чысціць код ад лішніх тэгаў, і робіць вага старонак сайта і сайта ў цэлым значна менш. Не варта змешваць мовы CSS і HTML у целе дакумента. Лепш выносіць ўсе правілы афармлення ў асобны файл і не выкарыстоўваць ўстаўкі непасрэдна ў кодзе разметкі HTML. Код HTML павінен змяшчаць толькі тэгі з прызначанымі для іх класамі.

Чыстая і прыгожая вёрстка патрэбна для таго, каб не толькі спрасціць і арганізаваць код, але і пазбегнуць сутыкнення з найменшай колькасцю праблем пры яго выпраўленні, мадыфікацыі і дапрацоўцы.

Акрамя таго правільны і чысты код павінен добра праходзіць валідацыю, то ёсць праверку на адпаведнасць стандартам мовы. Валідны і кампактны код аблегчыць індэксацыю сайта пошукавымі сістэмамі, а паменшаны вага старонак памяншае час загрузкі сайта. Пісьменная вёрстка здольная паскорыць прасоўванне сайта ў пошукавай выдачы.

Таблічная і блочная вёрстка сайтаў

Вярстаць сайт можна рознымі спосабамі, але часта любую вёрстку ўмоўна дзеляць на таблічную вёрстку і блокавую вёрстку. Як бачна з назваў, элементы ў такіх вёрстка размяшчаюцца або ў табліцах (<table>) альбо ў блоках (<div>).

Таблічная вёрстка выкарыстоўвае табліцы, то ёсць пазіцыянаванне элементаў на старонцы ажыццяўляюць шляхам размяшчэння ў вочках табліцы. Ўнутры дакумента размяшчаецца нябачная табліца з слупкоў і вочак, у іх і змяшчаюць змесціва.

Семантыка элементаў не адпавядае элементам табліцы, і па змаўчанні не дазваляе атрымаць тыя эфекты якія, якія даюць тэгі мовы разметкі. Табліцы заўсёды служылі для адной мэты, гэта выснова змесціва ў таблічнай форме. Каб пазбегнуць абмежаванняў пры таблічнай вёрстцы, як правіла, даводзіцца ствараць мноства ўкладзеных табліц.

Як бачыце, Таблічная вёрстка ўяўляе сабой укладзеныя адзін у аднаго табліцы.
Такі падыход моцна абцяжарвае апрацоўку табліц на старонцы браўзэрам, павялічвае памер дакумента і зніжае хуткасць загрузкі файлаў. Ну і цалкам відавочная рэч, пры такой грувасткай таблічнай структуры верагоднасць з'яўлення памылак значна ўзрастае.

Як правіла, табліцамі вярстаць раней, калі браўзэры не ўмелі карэктна адлюстроўваць блокі. Зразумела, што жаданне атрымаць чысты і просты код прывяло да з'яўлення блокавай вёрсткі.

Блочная вёрстка выкарыстоўвае блокі, і ўяўляецца больш зручнай і правільнай, з пункту гледжання перакананняў аб падзеле зместу і афармлення. Блочная вёрстка дазваляе вярстаць сайт пры дапамозе слаёў (блокаў).

У параўнанні з таблічнай вёрсткай, блочная вёрстка мае ўсё ж больш пераваг. Як зрэшты, і больш магчымасцяў. Блочная вёрстка дазваляе зрабіць код больш кампактным, але што больш каштоўна, больш лёгкачытальным, а таксама дазваляе павялічыць хуткасць загрузкі вэб-старонкі.

Кіраваць размяшчэннем і афармленнем блокаў вельмі зручна праз стылі, якія лёгка змяняць у файле CSS. Змяняць ўласцівасці слаёў і наладжваць значна зручней у адным месцы. Блочная вёрстка, або вёрстка пластамі дазваляе значна больш эфектыўна распрацаваць сайт, які будзе карэктна адлюстроўвацца ў браўзэрах.

заключэнне

Як бачыце, вёрстка сайтаў, справа не такое простае, як можа здацца на першы погляд, і лепш даверыць гэтую справу прафесіяналам сваёй справы. Вядома, можна вывучыць гэта і самому і выдаткаваўшы шмат часу вярстаць свае праекты. Гэта трэба калі вы хочаце прафесійна займацца распрацоўкай сайтаў. У адваротным выпадку лепш наняць вярстальніка. Прафесійна звярстаны сайт будзе валодаць адзіным стылем і адлюстроўваць элементы задуманага дызайну так як гэта задумаў дызайнер.

Выконваючы якасную вёрстку сайта трэба таксама валодаць добрым веданнем рабочых інструментаў, праграм, якія палягчаюць і паскараюць працэс распрацоўкі. Акрамя таго трэба разбіраецца ў тонкасцях паводзін розных браўзэраў для дакладнага адлюстравання старонак сайта.