1. Skip to Menu
  2. Skip to Content
  3. Skip to Footer

Лекція 5 - CSS, Блочна верстка

Поняття блоку
Верстка горизонтальними шарами
Верстка стовпчиками
Остаточний вид сторінки
Гнучна верстка сторінки

 

Поняття блоку

block

Блочна верстка реалізується за допомогою CSS таблиць, в яких здійснюється форматування блоків за їх характеристиками. Взаємне розташування блоків та їх наповнення визначається в тілі документу.
Блок - це звичайна прямокутна область, володіє рядом властивостей, таких як: рамка, поля і відступи. Вмістом блоку може бути що завгодно - частина тексту, картинка, список, форма для заповнення, меню навігації і т.д.
Рамка (border) - це контур, для якого можна задати такі характеристики як товщина, колір і тип (пунктирна, суцільна, точкова). Поля (padding) - відділяють вміст блоку від його рамки, щоб текст, наприклад, не був "упритул" до стінок блоку. Відступи (margin) - це порожній простір між різними блоками, що дозволяє на заданій відстані розташувати два блоки відносно один одного.
Блоки, як і таблиці - це елементи, що завжди розташовуються на сторінці вертикально. Тобто, якщо в коді сторінки записані підряд два блоки, то відобразяться вони в браузері один під іншим. Якщо нам потрібно розташувати кілька блоків горизонтально, то в їх властивостях задається такий параметр як "обтікання" (float).

Верстка горизонтальними шарами

Розглянемо поетапний процес верстання Веб-сторінки відобразивши її стан на першому та останньому етапах. Як засоби горизонтального верстання використаємо властивості ширини – width, висоти - height, фонового кольору - background-color. Підбір кольорів можна здійснювати на основі зразкових Веб-сторінок за допомогою програмного засобу pixie. Вертикальну розбивку здійснюємо за допомогою властивостей обтікання – float, її заборони – clear та роздільників - border-right, border-left. При цьому підбираючи значення висоти стовпчик можна розбивати на під блоки із можливістю їх виходу за межі блоку при заданні від’ємних значень меж (margin). Розташовувати сторінку по ширині екрану можна за рахунок відсутності жорсткого вказання ширини блоку. Цим процесом керують за допомогою властивостей min-width та max-width. Поетапне верстання сторінки розпочнемо із формування фону:

div#block {width:750px; margin:0 auto; background-color:#dddddd}
……
<div id="block">
<h2 align="center">CSS верстка сайту</h2>
</div>

Лекція 5 - CSS, Блочна верстка

Тепер наповнимо фоновий блок верхнім, середнім та нижнім підблоками.

div.header {width:750px; height:100px; background-color:#717dc9}
div.center_col {width:750px}
div.footer {width:750px; height:70px; background-color:#717dc9}
…..
<div id="block">
<div class="header"><h1 align="center">Верстка сайту</h1></div>
<div class="center_col">
<h2 align="center">CSS верстка сайту</h2>
<h4 align="center">Жорстка верстка блоками</h4>
</div>
<div class="footer"><p>Контакти</p></div>
</div>

Лекція 5 - CSS, Блочна верстка

Верстка стовпчиками

Вертикальна розбивка шарів здійснюється за допомогою параметру обтікання одного блоку іншим, зокрема властивість float:left забезпечує обтікання зліва, а властивість clear:both забезпечує заборону обтікання з обох сторін.

div.left_col {width:148px; height:350px; float:left}
div.center_col {width:450px; float:left}
div.right_col {width:148px; height:350px; float:left}
div.footer {width:750px; height:70px; background-color:#717dc9; clear:both}
</style>
</head>
<body>
<div id="block">
<div class="header"><h1 align="center">Верстка сайту</h1></div>
<div class="left_col"><p align="center">Меню</p></div>
<div class="center_col">
<h2 align="center">CSS верстка сайту</h2>
<h4 align="center">Жорстка верстка блоками</h4>
</div>
<div class="right_col"><p align="center">Про нас</p></div>
<div class="right_col_1"><p align="center">Супутні публікації</p></div>
<div class="right_col"><p align="center">Наші друзі</p></div>
<div class="footer"><p>Контакти</p></div>
</div>
</body>
</html>

Лекція 5 - CSS, Блочна верстка

Доповнимо горизонтальні блоки роздільниками за допомогою атрибутів border-right та border-left в параметрах яких задамо товщину лінії тип-пунктир (dashed) та колір.

div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9; margin-bottom:-15px}
div.right_col {width:148px; height:350px; float:left; border-left:2px dashed #717dc9; margin-bottom:-15px}

Лекція 5 - CSS, Блочна верстка

Підблоки можна розбивати на менші частини. При цьому від’ємне значення меж (margin) дозволяє робити виступи в компонуванні блоків.В результаті отримуємо наступний підсумковий код:

<html>
<head>
<title>Жорстка верстка</title>
<style type="text/css">
div#block {width:750px; margin:0 auto; background-color:#dddddd}
div.header {width:750px; height:100px; background-color:#717dc9}
div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9; margin-bottom:-15px}
div.center_col {width:450px; height:350px; float:left}
div.right_col {width:148px; height:100px; float:left; border-left:2px dashed #717dc9; margin-bottom:-15px}
div.right_col_1 {width:198px; height:200px; float:left; ; background-color:#717dc9; margin-left:-50px}
div.footer {width:750px; height:70px; background-color:#717dc9; clear:both}
</style>
</head>
<body>
<div id="block">
<div class="header"><h1 align="center">Верстка сайту</h1></div>
<div class="left_col"><p align="center">Меню</p></div>
<div class="center_col">
<h2 align="center">CSS верстка сайту</h2>
<h4 align="center">Жорстка верстка блоками</h4>
</div>
<div class="right_col"><p align="center">Про нас</p></div>
<div class="right_col_1"><p align="center">Супутні публікації</p></div>
<div class="right_col"><p align="center">Наші друзі</p></div>
<div class="footer"><p>Контакти</p></div>
</div>
</body>
</html>

Остаточний вид сторінки

Лекція 5 - CSS, Блочна верстка

Гнучна верстка сторінки

Жорстка верстка сайту не дозволяє адаптувати ширини сторінки до ширини екрану дисплея. Це приводить до неекономного використання площі екрану. Для гнучкої верстки В кожному горизонтальному шарі хоча б один блок має нефіксовану ширину. Таку гнучкість рекомендується обмежувати атрибутами min-width та max-width, оскільки вид сайту може руйнуватися при довільних змінах ширини. Для відступу тексту від лівого краю блоку використовується атрибут padding-left:

div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}
div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left}
div.right_col {background-color:#dddddd; height:400px; min-width:380px; max-width:3800px; margin-left:200px; padding-left:20px; margin-top:-20px}

Лекція 5 - CSS, Блочна верстка

 

Додати коментар


Захисний код
Оновити

  •  Facebook 

Обрати мову

Хто на сайті

На сайті 154 гостей та відсутні користувачі