Верстка сторінкиє процесом розробки структури html-документа, результатом якого є веб-сторінка. Структура веб-сторінки визначається відповідними html-тегами. Теги – прямокутні блоки-контейнери для вмісту – не відображаються у вікні браузера. Вони повідомляють браузеру про тип контенту, а браузер виходячи з цієї інформації виводить на екран їх вміст - текст чи медіа-файли.

Як створити структуру сторінки за допомогою блоків (блокова верстка)

1. Як розбити макет сторінки на секції

Щоб створити макет сторінки, необхідно виділити основні розділи документів. Докладніше про секційні елементи ви можете прочитати у статті.

Стандартна веб-сторінка містить такі секції:

Мал. 1. Основні секції сторінки

Ми не використовуватимемо елемент, оскільки він підтримується не всіма браузерами.

Елементи,

і - блокові, тому вони займатимуть усю ширину їхнього блоку-контейнера - елемента. Сторінка з такою розміткою добре виглядатиме на невеликих екранах, але на пристроях з великою роздільною здатністю текст таких сторінок буде незручно читати. Тому необхідно додати тег-контейнер для контенту – вмісту кожної секції:

Мал. 2. Основні секції сторінки з тегом-контейнером

і задати для нього максимальну ширину, внутрішні відступи, які будуть відокремлювати контент від країв екрана пристроїв з невеликою роздільною здатністю, а також зовнішні відступи, що дозволяють вирівняти контейнер посередині батьківського блоку:

Container ( width: 100%; max-width: 1024px; /*максимальна ширина може мати інше значення*/ padding: 0 15px; margin: 0 auto; )

Таким чином, ми отримали каркас для нашої сторінки (висота секцій у даному випадку віртуальна, оскільки без вмісту секції мають нульову висоту).

2. Розмітка шапки сайту та позиціонування її елементів

Розпочнемо розмітку першої секції, так званої шапки веб-сторінки. Елемент призначений для угруповання вступної інформації та навігаційних засобів по сторінці/сайту. Додамо всередину тега логотип сайту та навігаційні посилання:

Мал. 3. Шапка сайту з доданими логотипом та посиланнями

Logo ( float: left; ) nav ( float: right; ) nav ul ( margin: 0; padding: 0; list-style: none; ) nav li ( display: inline-block; /*один із способів розмістити елементи в рядок */ )

Існує кілька способів розмістити блокові елементи у рядок. Усі вони наведені у уроці.

Мал. 4. Ефект схлопування блоку-контейнера

Зверніть увагу, що після того, як ми застосували обтікання, шапка зникла. Це сталося тому, що плаваючі елементи (для яких задано властивість float) вилучаються з нормального потоку і батьківський контейнер більше не бачить їх висоту, тому елемент і елемент усередині нього з класом. Щоб виправити цю ситуацію, скористаємося очищенням потоку елемента з класом.container:

Container:after ( content: ""; display: table; clear: both; )

Також додамо йому вертикальні відступи, що відокремлюють елементи всередині нього від країв шапки. У результаті стилі матимуть такі види:

Container ( width: 100%; max-width: 1024px; padding: 15px; margin: 0 auto; )

Мал. 5. Очищення потоку

Розглянемо ситуацію, коли як логотип виступає картинка. Вона може бути додана безпосередньо всередину тега або як фонове зображення. Картинка матиме свою висоту, яка може відрізнятися від висоти меню навігації, тому перед нами постає проблема вертикального вирівнювання елементів шапки.

Мал. 6. Логотип-картинка

У нашому прикладі висота логотипу дорівнює 38px, тому щоб вирівняти посилання меню по висоті посередині шапки, потрібно задати для них відповідну висоту рядка:

Nav a (text-decoration: none; line-height: 38px; ) Мал. 7. Вирівнювання посилань меню шапки

3. Створення сітки для основної частини сторінки

Основна частина сторінки найчастіше є сіткою з блоків різної ширини. Позиціонування таких блоків здійснюється також за допомогою властивості float. Кожен рядок блоків обернемо додатковим блоком із класом.

Мал. 7. Сітка основної частини сторінки.col-1-2 ( width: 50%; float: left; ). %; float: left;) .col-2-3 (width: 66.6666666667%; float: left; )

Для елемента з классом.row також застосуємо очищення потоку:

Container:after, .row:after ( content: ""; display: table; clear: both; )

Щоб відокремити ряди один від одного, можна додати нижній зовнішній відступ:

Row ( margin-bottom: 15px; )

Висота блоків сітки визначається висотою їхнього вмісту, тому вона може бути різною:

Мал. 8. Різна висота елементів сітки

Висоту блоків можна зафіксувати, вказавши її очевидно, наприклад, .row div (height: 100px) . Але в цьому випадку потрібно бути впевненим, що при додаванні адаптивності макету вміст блоків не виходитиме за край блоку.

Якщо необхідно задати фоновий колір для блоків ряду, то це можна зробити наступним чином: для елемента з класом.row додамо новий клас, який дозволить стилізувати тільки цей ряд (виходить. , а для високого блоку поставимо його власний колір, тобто таким чином ми зробимо фонову підкладку.

Lorem ipsum dolor sit amet.

Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.

Row-one ( background: lightblue; ) .col-2-3 ( width: 66.6666666667%; float: left; background: seashell; )

Мал. 9. Фонова підкладка

Якщо основна секція сторінки містить лише два блоки, то додатковий ряд-обертку можна не додавати:

4. Розмітка підвалу сторінки

Підвал сторінки, або нижній колонтитул, зазвичай містить інформацію про копірайті, додаткові посилання тощо. Вся ця інформація також розміщується в стовпцях, які можуть бути однаковими або різними ширинами.

Я думаю, що багато хто з Вас уже помітив, що зараз в тенденцію входять все більше липких елементів дизайну, які залишаються на увазі при прокручуванні сторінки користувачем. Як на мою думку, це дуже зручно, особливо якщо це навігація сайту. Ось саме такий приклад ми сьогодні робитимемо. Ми дізнаємось як зробити анімовану шапку сайту на JQuery та CSS3 з анімацією.

Як завжди це, виявляється, робиться мінімум рядків коду і дуже просто, і в той же час дуже ефективно. Ну а тепер давайте приступимо до уроку.

Але для початку хочеться сказати велике спасибі http://www.webdesignerdepot.com ну а тепер давайте точно почнемо.

Ι

HTML

HTML код дуже і дуже простий, нам просто потрібно задати теги для, і далі між ними написати вміст сайту:

Прикріплена шапка сайту

Так як це найпростіший приклад, ми додали просто текст між тегами h1, але там також можна використовувати зображення, або ж, наприклад, навігацію по сайту.

Код jQuery

CSS є найкращим способом реалізації анімації та переходів в даний час. Так що скриптів ми будемо використовувати мінімум, і то для того, щоб задати визначення спрацювання анімації при прокручуванні сторінки.

Коли значення сторінки при прокручуванні більше 1, це означає, що користувач прокрутив сторінку і потрібно додати клас «sticky» до тега шапки сайту. Таким чином спрацьовує та фіксується шапка сайту.

А ось і сам код:

$(window).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("sticky"); ) else( $("header").removeClass ("sticky"); )));

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

CSS

CSS код буде складатися з двох частин. Перший код відповідатиме за стандартну шапку сайту, яка знаходиться за умовчанням. Другий код відповідатиме за відображення шапки, коли користувач прокручуватиме сторінку. Давайте подивимося як виглядає код за замовчуванням:

Header( position: fixed; width: 100%; text-align: center; font-size: 72px; line-height: 108px; height: 108px; background: #335C7D; color: #fff; font-family: "PT Sans ", sans-serif; )

Тепер найцікавіший момент: коли користувач прокручує сторінку вниз, тоді буде застосовуватися клас.sticky, якому ми можемо задати абсолютно різноманітне відображення, на яке здатне CSS. Ми також встановимо фіксовану позицію, щоб наша шапка сайту була завжди на увазі.

За допомогою цих CSS правил, які нижче, ми хочемо зменшити площу самої шапки при прокручуванні, змінити колір і зменшити шрифт. Ось сам код:

Header.sticky ( font-size: 24px; line-height: 48px; height: 48px; background: #efc47D; text-align: left; padding-left: 20px; )

Це найпростіший приклад, за допомогою якого Ви повинні зрозуміти суть роботи. Все залежить від конструкції вашого сайту.

Ну а зараз давайте додамо трохи анімації нашому переходу за допомогою. Ось код:

Transition: all 0.4s ease;

Ι

Висновок

Я сподіваюся, що цей спосіб вирішить безліч питань щодо реалізації зручної та простої навігації для сайту. До того ж ця реалізація дуже проста і зрозуміла.

Основна складність із гумовим макетом – це забезпечити коректне відображення на різних дозволах, від високого до низького. Оскільки ми обмежили ширину контенту 760 пікселами, картинку в шапці варто розмістити так, щоб більша частина зображення вписувалася в цей розмір. На рис. 6.3 показано, як це зробити. Темним кольором виділена центральна частина шириною 760px, буквою А позначені однакові по ширині фрагменти, що залишилися.

Мал. 6.3. Ширина шапки

Саме додавання картинки в шапці робиться через малюнок фону, який необхідно вирівняти по центру елемента.

Header ( display: block; /* Для старих браузерів */ height: 405px; /* Висота шапки */ background: url(images/header-bg.png) no-repeat center bottom; )

В ідеалі малюнок повинен мати велику ширину від 2000 пікселів, тоді практично за будь-якої роздільної здатності монітора малюнок буде показувати центральну частину, обрізаючи все, що не поміщається у вікно. Але біда в тому, що спочатку картинка не настільки широка, а малювати чорні смужки, що нескінченно тягнуться з боків, не хочеться. Один із варіантів вирішення це включити повторення фону по горизонталі. Ті, у кого роздільна здатність 1280 пікселів за шириною і менше, побачать єдину картинку, а власники широких моніторів зможуть помилуватися відразу кількома тваринами і сонцями, що одночасно заходять. Тут важливо підредагувати малюнок так, щоб він без стиків поєднувався сам із собою по горизонталі (рис. 6.4). Градієнт для наочності захований.

Мал. 6.4. Поєднання зображення по горизонталі

На цьому малюнку місце стику позначено стрілкою та проміжком, щоб стик можна було помітити. Якщо правильно відредагувати праву і ліву частину фонової картинки, вона повторюватиметься по горизонталі без видимих ​​стиків, як суцільний малюнок. Залишається трохи підправити стиль, замінивши значення no-repeat (без повторення) на repeat-x (повторення по горизонталі).

Header ( display: block; height: 405px; background: url(images/header-bg.png) repeat-x center bottom; )

Мал. 6.5. Фонова картинка для шапки

У форматі PNG-24 файл з фоном розміром 1325х405 пікселів займає близько 32 Кб, а в PNG-8 з 256-колірною палітрою, де якість градієнта дещо гірша - близько 15 Кб. Можна розбити фон на дві складові частини – градієнт та картинку та зберегти кожне зображення у своєму форматі, що має призвести до підвищення якості відображення градієнта. Втім, 32 Кб для такого великого зображення це трохи і додаткову оптимізацію хтось вважатиме за «економію на сірниках». Проте альтернативний підхід до створення шапки сайту комусь виявиться корисним, а за бажання ви можете його пропустити.

Оптимізація шапки

Оскільки градієнт у шапці повторюється по горизонталі, його можна вирізати з макета та встановити як фонову картинку. На рис. 6.6 показано градієнт висотою 405 пікселів, підготовлений для цієї мети. Формат PNG-24 не вносить спотворення зображення, а градієнти добре стискає (підсумковий обсяг 402 байти), так що в цьому випадку однозначно слід використовувати саме його. Рамка навколо малюнка додана для наочності.

Мал. 6.6. Градієнтний малюнок (header-gradient.png)

Картинка з силуетними тваринами робиться на прозорому фоні та висотою 198 пікселів, немає сенсу робити її на всю висоту шапки, оскільки вона займає лише частину. Фрагмент зображення показано на рис. 6.7. Шахове поле означає прозорість.

Мал. 6.7. Фонове зображення з прозорістю (header-animal.png)

Оскільки збереження цієї картинки йде у форматі PNG-8, який має лише один рівень прозорості, на відміну від 256 рівнів формату PNG-24, важливо забезпечити коректне накладення на градієнтний фон. Для цього при збереженні у Photoshop потрібно вказати колір країв (Matte) близький до середньої частини градієнта, де йде накладення силуету. Приблизно це колір #9de1f0. В цьому випадку не виникне брудних контурів навколо дерев та тварин, а картинка при накладенні на градієнт сприйматиметься як єдине ціле.

Два малюнки для фону шапки підготовлені, пишемо код HTML.

І стиль для елемента та шару header-bg.

Header ( background: #00b0d8 url(images/header-gradient.png) repeat-x; ) .header-bg ( background: url(images/header-animal.png) repeat-x center bottom; height: 405px; )

У результаті обсяг файлів виявився 12,5 Кб, що навіть менше за очікуване.

Назва сайту

Назва написана на хмарі з розгашеними краями, що має створити труднощі при накладенні на градієнт. Є два способи, як їх обійти.

1. Використовувати формат PNG-24 для збереження прозорості.
2. Зберегти малюнок у форматі GIF або PNG-8 із фрагментом градієнта, а потім накласти малюнок на градієнт так, щоб збіг був з точністю до пікселя.

Очевидно, що другий спосіб має ряд недоліків - зображення не можна зрушити навіть на пару пікселів, воно прив'язане до градієнта, і якщо його градієнт змінити, доведеться міняти картинку. Отже, зберігаємо заголовок у форматі PNG-24. Код HTML залишиться незмінним, а стилі розширяться.

Header (background: #00b0d8 url(images/header-gradient.png) repeat-x; ) .header-bg (background: url(images/header-animal.png) repeat-x center bottom; height: 405px; /* Висота шапки */ text-align: center; /* Вирівнювання по центру */ .

Вирівнювання по центру робиться через властивість text-align додається до батька тега а зсув вниз через властивість top . Щоб ця властивість спрацювала, необхідно для зображення задати відносне позиціонування за допомогою властивості position зі значенням relative .

На головній сторінці сайту картинка з назвою виводиться як завжди, на решті сторінок вона є посиланням на головну сторінку. Для цього достатньо трохи змінити код:

Значення / атрибута href вказує на головну сторінку і працює тільки на веб-сервері, але ніяк не локально.

Остаточний код для шапки наведено у прикладі 6.14.

Приклад 6.14. Шапка сайту

HTML5 CSS 2.1 IE Cr Op Sa Fx

Як упіймати лева в пустелі?

Найчастіше начебто прості завдання верстки вимагають складної структури HTML-розмітки та використання CSS-трюків. Центрування елементів або вирівнювання контенту може бути дуже стомлюючим. Одне з таких завдань – це вирівнювання елементів верхньої частини сайту так, щоб логотип був ліворуч, а пункти меню – праворуч. Можна використовувати float і position:absolute, а для вирівнювання по вертикалі - додавати margin та padding різним елементам. Начебто нічого складного. Але якщо сайт повинен коректно відображатись і на мобільних пристроях, виникає багато проблем.

Нижче описаний лаконічний спосіб вирішення цієї проблеми.

HTML-розмітка максимально проста:

Super Bad

First Link Second Link Third Link

Висота шапки фіксована, додаємо text-align: justify, для дочірніх елементів:

Header (text-align: justify; letter-spacing: 1px; height: 8em; padding: 2em 10%; background: #2c3e50; color: #fff; )

Додаємо display: inline-blockдля всіх елементів navщоб можна було розташувати їх один за одним:

Header h1, header nav ( display: inline-block; )

Щоб атрибут text-align: justifyпрацював, як ми хочемо, потрібно використовувати невеликий трюк із псведоелементами, який був знайдений у статті Perfectly justified CSS grid technique using inline-block, автор Jelmer de Maat:

Header::after ( content: ""; display: inline-block; width: 100%; )

В результаті вийшло вирівнювання по горизонталі, без використання floatі position:absolute. Тепер потрібне вирівнювання елементів по вертикалі. При використанні vertical-alignдля елементів navбуде залежність від висоти батьківського блоку – шапки. А це не дуже вірно. Приклади використання vertical-align: top та vertical-align: middle на jsbin. Нижче представлений найбільш зручний спосіб вертикального вирівнювання.

Використовуємо знову псевдоелементи. використовуючи приклад із статті Centering in the Unknown , згаданий Michał Czernow:

Header h1 ( height: 100%; ) header h1::before ( content: ""; display: inline-block; vertical-align: middle; height: 100%; )
В результаті виходить те, що потрібно:

Залишилося вирішити два завдання: коректне відображення при великій кількості тексту в шапці та адаптивність. Якщо заголовок сайту буде занадто довгим, верстка почне з'їжджати:

Використовуємо трюк із псевдоелементом на header:

CSS-код

header ( text-align: justify; height: 15em; padding: 2em 5%; background: #2c3e50; color: #fff; ) header::after ( content: ""; display: inline-block; width: 100%; ) header > div, header nav, header div h1 ( display: inline-block; vertical-align: middle; ) header > div ( width: 50%; height: 100%; text-align: left; ) header > div: :before ( content: ""; display: inline-block; vertical-align: middle; height: 100%; )

Виглядає набагато краще:

Тепер перейдемо до адаптивності. Є кілька способів вирішення цього завдання, можна просто не задавати висоту шапці, і всі внутрішні елементи будуть адаптивні до висоті. При цьому не знадобиться другий трюк із псевдоелементами, живий приклад на jsbin.

CSS-код

header ( text-align: justify; padding: 2em 5%; background: #2c3e50; color: #fff; ) header::after ( content: ""; display: inline-block; width: 100%; ) header h1, header nav ( display: inline-block; vertical-align: middle; ) header h1 ( width: 50%; text-align: left; padding-top: 0.5em; ) header nav ( padding-top: 1em; )

Якщо необхідно задати висоту шапки, то доведеться використовувати і другий трюк з псевдоелементами, і додавати media query для екранів різних розмірів:

@media screen and (max-width: 820px)( header ( height: auto; ) header > div, header >

Результат адаптивний і на мобільних пристроях виглядає так:

У прикладі використовується 820px для наочності, на живому сайті значення, звичайно, має бути інше, відповідно до вимог. Для підтримки Internet Explorer 8 потрібно замість “::” використовувати “:” для псевдоелементів.

Фінальний CSS-код

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * ( padding: 0; margin: 0; ) body ( background: #1abc9c; font-family: "Lato", sans-serif; text-transform: uppercase; letter-spacing: 1px;) header ( text-align: justify height: 8em; padding: 2em 5%; background: #2c3e50; color: #fff; ) header::after ( content: ""; display: inline-block; div::before, header nav, header > div h1 ( display: inline-block; vertical-align: middle; text-align: left; ) header > div ( height: 100%; ) : ""; height: 100%; ) header > div h1 ( font-size: 3em; font-style: italic; ) -child ( padding-right: 0; ) @media screen and (max-width: 720px)( header ( height: auto; ) header > div, header > div h1, header nav ( height: auto; width: auto; display : block;text-align: center; ) )

Результат:

Всім привіт. Сьогодні переглянув статистику пошукових запитів, за якими люди переходять на блог і виявив, що є зовсім не релевантні. Ні, не блозі, а статтям.

Один з них Як зафіксувати шапку сайту? Я відразу вирішив виправити становище і написати статтю, оскільки тема актуальна, і є питання у цій галузі.

Взагалі, існує кілька способів при прокручуванні сторінки. Можна скористатися JavaScript, але я не дуже сильний у цій темі і тільки вивчаю її. Тому поки що обходимося css. Слава Богу, зафіксувати шапку сайту(та й не тільки шапку, а будь-який інший елемент), можна «малою кров'ю»:)

Насправді метод фіксації елемента при прокручуванні сторінки дуже простий, і ви здивуєтеся, як просто вирішується дана проблема.

Фіксація шапки під час прокручування сторінки

Для того, щоб зафіксувати шапку, доведеться створити два блоки. Один – для того, щоб була можливість центрувати шапку. А в ньому дочірній, який і фіксуватиметься. Почнемо…

Ось така проста html структура! Тепер додамо стилі!

#headerMain ( width:920px; height: 195px; margin:0px auto; z-index:0; ) #header ( width:920px; height: 195px; background: url(../img/bg-header.jpg) no -repeat;position:fixed;z-index:9999;

Тепер шапка буде зафіксована вгорі екрана і буде нерухома під час прокручування.

У цій статті розглянемо, як зробити шапку сайту, та розмістити на ній заголовок, та опис сайту

Насамперед для шапки сайту потрібна картинка. Її найкраще зробити у фотошопі.

А тим, хто не володіє цим редактором, я пропоную найпростіший спосіб, що є на всіх Windows за замовчуванням Paint.

Ширину картинки зробимо 900px, по ширині сайту, висоту - 200px. У Вас звичайно можуть бути свої розміри, аби ширина картинки збігалася з шириною сайту (оболонка wrapper), висота на Ваш розсуд

Як тільки картинка буде готова, і розміщена в папці images, візьмемо , створений на попередній сторінці, і приступимо до встановлення шапки на сайт.

У селекторі #header прибираємо задану йому висоту і прописуємо ширину і висоту зробленої картинки.

#header (
width: 900px; - ширина
height: 200px; - Висота
background-color: #25B33f; - фон
margin-bottom: 10px; - Відступ знизу
}

Потім вставляємо саму картинку.

#header (
width: 900px;
height: 200px;
background-color: #25B33f;
margin-bottom: 10px;
background-image : url(images/i8.png) - зображення
}

Властивість background-color вказується на той випадок, якщо картинка раптом, в якомусь браузері відвідувача, не відобразиться.

Якщо картинка розмістилася з будь-яким зміщенням, і потрібно її підправити, то сюди додається властивість

Тепер дійшла черга до заголовка та опису сайту. Для цього прописуємо в тезі body блок div з ідентифікатором id="header" , і в ньому два заголовки h1 і h3 , в які вставляємо назву сайту та його опис

Подивимося, що в нас виходить.

Тепер, надамо вигляд заголовку та опису. Створюємо для них два селектори, і прописуємо такі властивості:

Для h3 поставимо ширину в 200 пікселів, щоб він не розтягнувся на всю картинку. Відступами можна маніпулювати залежно від того, де шапки буде зручніше розмістити текст.

Подивимося результат.

На мою думку, дуже симпатично.

Узагальним код цієї сторінки.

Есть ещё один вариант вставки картинки в шапку сайта. Можно вставить адрес картинки в блок