Гнезденето е създаването на структурата и елементите на дизайна на уеб-страница. Писането на код на уеб страница се извършва от разработчик на софтуер или разработчик на предния край. Той използва графична програма за нарязване на макети, редактор на код и допълнителни програми за ускоряване на процеса.
Какво е оформление
Кодът на оформлението е скелет на страницата, написана на езика за маркиране html. Състои се от логически счупени елементи на части от страницата - тагове. Всеки от тях е отговорен за своята област: меню, сутерен, медии, форми, карти, търсене в сайта, време. Те имат атрибути, идентифицирайки отделни елементи с тяхна помощ. Cascading style sheets съответстват на дизайна, а динамичните ефекти са java-script. Добре проектираното оформление се показва еднакво във всички браузъри. Резултатът се определя от серия от тестове. Възможността за работа на повече от една хардуерна платформа се нарича crossplatform. Съществуват няколко подхода за прилагане на оформлението, като се използват различни рамки.
Различни методи за адаптивно оформление се използват за създаване на страници според съвременните стандарти. Това осигурява правилното показване на елементите на всички типове екрани.
Видове схеми
Стандартите непрекъснато се подобряват и вследствие на това се променят начините за разработване на планове. В момента има 3 основни типа страници:
статични;
каучук;
е адаптивна.
Статични оформления, които не са способни на страниципроменете дизайна си. Техният дизайн не се променя, а размерите на елементите имат ясен смисъл. Адаптивното оформление означава, че елементите на сайта ще бъдат коригирани според размера на екрана на устройството. При промяна на ширината на документа се извършва реорганизация на блоковете, някои части се заменят с други, някои елементи изчезват. Идеята за адаптивност е заместила мобилните версии на сайта, които живеят на отделни поддомейни. Основният принцип за създаване на адаптивност е дизайнът на дизайна на три екрана: компютър, таблет, смартфон.
При създаването на каучуков шаблон се вземат предвид и промените в размера на екрана и всички елементи могат да се персонализират. Основната разлика от адаптивната е, че оформлението се разширява или стеснява под екрана при всеки момент на смяна. Проверете кои от принципите се използват, както следва. Ако разтегнете страницата с участък от прозореца на браузъра с него, тогава е обвързването на гума. Когато страницата на сайта се променя само на няколко позиции - това е адаптивно.
Размери за адаптивно оформление
За да се създадат адаптивни оформления, се използват относителни мерни единици вместо стандартния статичен px. Най-често срещаните са:
em;
rem;
%.
В адаптивното оформление html em се използва за определяне на размера на шрифта и вдлъбнатините. По подразбиране 1 em е 16 пиксела. Съответно, за да зададете шрифт за параграф p от 32 пиксела, трябва да укажете следното: p {font-size: 2em; } Особеността на използването на единица е, че 1em е равенразмера на шрифта на елемента му. Това означава, че 1em приема различни стойности в различните части на кода. Например, в блок, където размерът на шрифта е 2em (32px), маржът в 1em ще бъде 32 пиксела. Но когато шрифтът е 1em (16px), подложката в 1em ще се равнява на стандартните 16 пиксела. Rem е коренът em, който е дефиниран в маркера. 1 root-em, за разлика от 1em, е равен на броя при никакви обстоятелства. Стойността се променя само когато промените се правят задължително. Процентът обикновено се използва за задаване на ширината на блоковете или изображенията. Независимо от размера на екрана, той ще съответства на зададената стойност, например 80%.
Заявки за медии
CSS поддържа различните технически параметри на устройствата. Определен е смартфон с малък екран, за неговата стойност е посочено свойство стил. Исканията за медии разкриват разлики в ориентацията: портрет и пейзаж. Широко използван за създаване на адаптивно оформление. Оформлението се настройва към зададената разделителна способност на екрана, като променя структурата на документа в съответствие с кода. Определени са типовете устройства:
брайлови уреди и принтери, щамповани за слепите;
отпечатване на обикновени принтери;
екран на екранен монитор;
реч синтезатори на реч;
Телевизионни телевизори
Значението на името на заявката показва няколко условия. Например, извеждайте съдържание само за монитори и само максимална ширина от 600 пиксела. Изглежда така: @media екран и (max-width: 600px) {output code}. Адаптивният дизайн се основава на използването на медийни заявки. Създава оформление за екрани, в коитоМинималната ширина е 1200 пиксела, тялото на кода се поставя в @media екран и (max-width: 1200 px) {}. Следното е блок за @media екран и (min-width: 700px) {} и @media екран и (max-width: 699px) {} мобилни устройства.
Мобилен първи
Според последните данни, мобилните устройства и таблетите стават онлайн много по-често от компютрите. Съответно мобилният трафик става все по-актуален за уебсайтовете. Поради функции като малки размери на екрана, потребителите на притурки предпочитат сайтове с първите линии на търсене, те прекарват по-малко време в търсене на информация. Подходът Mobile First включва показване на най-важното съдържание на лесен и оптимизиран уеб сайт и отказ да се изтеглят други ресурси. Адаптивното оформление на сайта за тази методология включва първоначално създаване на страница за малки екрани и последващо добавяне на елементи, както се изисква от дизайна на страницата за голям монитор. Въпреки прозрачността на подхода, клиентите и изпълнителите полагат големи усилия за пълно преразглеждане на обичайния метод за разработване на сайта.
Bootstrap
Една от популярните рамки, които дадоха прост отговор на въпроса как да се направи адаптивно оформление, е Twitter Bootstrap. С 12-колонна мрежа за първоначално зареждане се създават сайтове, които се показват правилно на екраните на мобилните устройства по подразбиране. Използват се основните инструменти:
предварително дефинирана ширина на колоните, която може да определи ширината на елементите;
фиксирани и гумени компоненти на документа;
вградени шрифтове и класове за тях;
средства за изготвяне на таблици;
класове дизайн меню, ленти с инструменти.
Динамичните ефекти са написани в jQuery, SASS препроцесорът се използва за описване на външния вид и функционалността на популярните уеб шрифтове. Сайтовете, разработени на най-новата версия на bootstrap, не се показват правилно в рядко използвани версии на браузъри, като IE8 IE9 и iOS 6. Забележително е, че корените им се използват като размер на шрифта за някои елементи. Официалният сайт съдържа подробни ръководства на английски и руски език, примери за адаптивно оформление, начини за използване на вградени компоненти.
Фондация
Фондацията е мощна рамка, една от основните конкуренти на Twitter Bootstrap. Поддържа всеки размер на мрежата, има няколко предимства, които не са достатъчни в Bootstrap. Компонентите разполагат с широка гама анимационни ефекти, които могат да бъдат персонализирани. SASS препроцесорът се използва за управление на стиловете. Списъкът с базови шаблони съдържа плъзгачи, навигационни панели и икони за социални медии. Размерите са дадени от стойностите, дадени в таблицата.
0
smedium
420px 63)
среден
640px
голям
1024px )
xlarge
1200 px 1440px
Оформление на решетката
Друга система, която заслужава внимание, е Grid Layout. Това е набор от рутинни вертикални и хоризонтални линии. Те образуват колони и редове. Елементите са в мрежата, техният размерса посочени в съответствие с редовете и таблиците. Възможно е да се използват фиксирани размери като px и гъвкави - проценти, rem и em. Първо трябва да бъде обявен контейнерът на мрежата. display: grid Свойство grid-template-columns се използва, за да се укажат колони с ширина на линията и grid-template-rows. Размерите могат да бъдат определени в едно свойство grid-template-columns. Ширината се измерва в единици fr, което представлява частта от наличното пространство в контейнера. Предполага се, че fx и px могат да се използват в едно свойство. Например, grid-template-column: 500px 1fr 2fr.
Заключение
Пълната практика на адаптивно оформление А до Z включва използването на максималния брой методи. За да разглобите от нулата, какъв вид оформление за всички устройства, трябва ръчно да използвате медийни заявки, да изчислите размера на изображенията и шрифтовете. След като имате правилните умения, можете да започнете да използвате рамките.
