Етапи на оформлението на сайта - оформление стъпка по стъпка

Работа главата

Защо работи главата си? Преди да се пристъпи към оформлението, което трябва да се анализира съществуващото оформление. Например, че е възможно да се направи върху лист бележника неговата структура, за да мисля, че веднага, чрез който свойства могат да направят такава мрежа, която е представена от дизайнер. В лесни стъпки оформлението на сайта може да се раздели на три части.

Това е първата стъпка. стъпка преценка. Трябва да се разбере как да се доближава до общия вид на специално оформление. В съзнанието ми, че вече са изграждане на действия, които ще извършват.

Работа с оформлението

Когато изрязвате всички графики, то ще трябва да се сгъне в папка. Често по-нататък изображения. Всъщност, сега сте готови да започнете да оформлението. Първият етап на мислене ще ви позволи да си представя мислите на някои план, който ще се ръководи.

HTML5 и CSS3 практика от нула до резултата!

Фиг. 1. Работа с оформлението.

След това започва работа незабавно съдържание. Това е всичко, което ще бъде в маркера. Ако започнете от горния ляв ъгъл, се премести в долния десен ъгъл. Това означава, че за първи път описва заглавието (лявата му страна и след това право), след това по-долу описват структурната част и по този начин постепенно прехвърляне на кода на оформление.

Това не е задължително правило. Трябва първо да се наложи на дясната странична лента, а след това на съдържанието, а след това нещо друго. Горното е само един съвет, който е напълно логично от гледна точка на здравия разум на.

Първо, структурата на програмист пише на HTML. В същото време, той просто виси класове елемент и документи за самоличност, за да ги стилизирам-късно в CSS. Нормално програмист трябва да излезе с подходящи имена на класове. Например, меню, главата, джаджа, и други подобни За да стане ясно какъв елемент.

Например, когато за първи път започна, моя код вероятно ще забавлява никого. На нея присъстваха такива имена на класове, като: verh_sayta, Konec и бок. Разбира се, това е по-добре от block1, block3, block459, но тя изглежда като нещо, непрофесионално и не е ясно какво точно въпросният елемент.

HTML5 и CSS3 практика от нула до резултата!

стилизация

Структурата е писано, документи за самоличност и са дадени класове. Това означава, че можете да започнете да използвате CSS. Дори бих казал, че не е задължително напълно предписват структурата и едва след това да се докоснат до стилове. Тя може и трябва да работи в паралел. В един момент вие сте напълно завършена структура и е напълно фокусиран върху стиловете. (Или може би не, всичко зависи от това колко добре всичко първоначално ще пиша).

По-нататъшен процес на сайта оформление основно ще се използва CSS-файл, в който трябва да напишете необходимите качества и правила. Колко дълго може да отнеме време това? Това зависи от вашия професионализъм. Виждал съм хора, които имат един час, за да оформят така, че приличен odnostranichnik. Въпреки това, той е отзивчив и трябваше анимационни ефекти. Професионален може да наложи една проста страница в продължение на 20 минути.

Това е възможно, ако използвате максимално готови решения. Така например, в рамките, на фърмуера всички отдавна са стил, просто трябва да се добавят необходимите класове стил на вашия елемент.

Стайлинг е също да се извършва в ред. Първо трябва да се регистрирате някои общи правила. Например общия фон на страницата, на база шрифт. Не забравяйте да нулирате маржове.

На следващо място, предписани по-специфични свойства. Цветни рамки, стилове за страничната лента, долната част на страницата, лого, местоположението и много повече - това е така наречената втората фаза на стайлинга, когато работите с всяка отделна единица.

Например, може да реши да напише стилове за шапки. Така ги запишете до края, не се премине към други елементи! В края на CSS-файл обикновено се предписва медийни заявки (за адаптивност, ако е необходимо). Тя може да бъде свързано и тук шрифтове и описани различни ефекти, които след това могат да бъдат приложени към блоковете, като се посочва клас стил.

Тук трябва да се знае какви задачи трябва да се изпълняват със скриптове. Ако сайтът Ви има много малко уеб скриптове, трябва да се сведат до минимум библиотеките с код, които не използват огромни отрязъци код за изпълнение на чифт полезни неща.

Предполагам, че оформлението е готова. Остава да я потвърдите. Естествено, за първи път, че е невъзможно да се направи всичко, така че със сигурност не трябва само да отворите файловете за редактиране. Струва си да поглеждате оформлението във всички браузъри, които имате. Можете да използвате онлайн услугите. Също така е полезно да се използват инструменти за тест, който се предлага в тази статия.

Фиг. 2. валидаторите Разпределение на W3C.

Фактът, че има различни видове оформление на сайта, така че последователността, посочена в статията е подходящ за най-популярната технология - на блока. Ако имате таблици за оформление, ще имате повече от калайджия с HTML-структура. Разгледахме основните етапи на оформлението на сайта. Ако искате да научите повече, не забравяйте да се абонирате за блога.

HTML5 и CSS3 практика от нула до резултата!

Най-IT новини и уеб разработки на нашия канал Телеграма