Лабораторна робота № 3
Тема: Створення каскадних стилів CS
Мета: Навчитися створювати та використовувати файли зі стилями CSS та підключати їх до файлів HTML.
Обладнання: ПЕОМ, програма Блокнот.
Хід роботи
Створити макет макет веб-сторінки:
| Головне меню | |
| Заголовок | |
| Основний вміст | Бічна панель |
| Нижній колонтитул | |
Рис.1. Макет сторінки
Будемо вважати, що сайт має фіксовані розміри у вікні браузера і його буде розміщено у центрі по горизонталі. Встановимо розміри кожного із структурних елементів сторінки.
-
Головне меню: ширина – 800 пікселів (далі px), висота – 50px.
-
Заголовок: ширина – 800px, висота – 150px.
-
Основний вміст: ширина – 500px, висота змінюється в залежності від наповнення.
-
Бічна панель: ширина – 300px, висота змінюється в залежності від наповнення.
-
Нижній колонтитул: ширина – 800px, висота – 70px.
Наступним кроком є створення шаблону XHTML-сторінки, який містить визначення документу DOCTYPE, параметри кодування, а також інші мета- теги, необхідні для застосування пошуковими системами (рис.2). Слід зауважити, що у заголовку шаблона присутній елемент <link>, який підключає зовнішній файл стилів main.css, з папки css. Цей файл містить налаштування форматування елементів сторінки, його необхідно використовувати для усіх сторінок сайту для підтримки єдиного стилю відображення (шрифти, кольори тощо).
Рис.2. Шаблон XHTML-сторінки
Оскільки сторінки сайту мають фіксовану ширину (800px), доцільним є створення контейнера для решти елементів сторінки. Тому в середину тегу <body> внесемо наступний запис:
<body>
<div id="container"> //Вміст контейнера
</div>
</body>
Контейнер реалізовано як елемент div (універсальний блок) з унікальним ідентифікатором container. У файл main.css внесемо запис виду:
#container {
width: 800px; margin: auto;
border: 1px solid black
}
Цим записом встановлено ширину контейнера 800 пікселів, границю блока, а також горизонтальне вирівнювання «по центру». Саме властивість margin (поле) зі значенням auto вказує, що поля треба встановлювати автоматично з усіх боків – за замовчуванням це визначає центральне вирівнювання. При цьому висота буде обраховуватись в залежності від вмісту блока (рис.3).
Рис.3. Контейнер сторінки
З рис.3 видно, що верхній бік контейнера має відступ від вікна браузера, щоб його позбавитись необхідно встановити відступи для елементів html та body в 0:
html, body {
margin: 0;
padding: 0;
}
Наступним кроком є ініціалізація основних блоків сторінки: головного меню, заголовку, основного вмісту, бічної панелі та нижнього колонтитула. Як правило, ці блоки записують тегами <div> у XHTML-сторінці всередині контейнера:
<body>
<div id="container">
<div id="nav">Головне меню</div>
<div id="header">Заголовок</div>
<div id="sidebar">Бічна панель</div>
<div id="content">Вміст</div>
<div id="footer">Нижній колонтитул</div>
</div>
</body>
Додамо базові стилі для цих блоків у файл main.css:
#container {
width: 800px;
margin: auto;
}
#nav {
height: 50px;
}
#header {
height: 150px;
}
#sidebar {
float: right;
width: 300px;
}
#footer {
height: 70px;
}
div {
border: 1px solid black;
}
Висоту меню та нижнього колонтитула встановлено в абсолютних одиницях. Для зручності сприйняття усі елементи <div> виводяться з рамкою (останній запис). Особливим блоком є sidebar, оскільки за завданням його треба розмістити праворуч від основного вмісту. Крім того, оскільки sidebar – це додаткова панель, текст основного вмісту має «обтікати» його збоку. Це досягається шляхом використання властивості float: right. Результат ілюструє рис.4.
Рис.4. Результат форматування базових блоків сторінки
У випадку, коли бічна панель буде за висотою більшою, ніж основний вміст, спостерігатиметься ефект накладання тексту бічної панелі на нижній колонтитул. Щоб позбавитись цього, необхідно відмінити «обтікання» для нижнього колонтитула в файлі CSS:
#footer {
height: 70px;
clear: both;
}
Наступним кроком є створення головного меню. Для прикладу оберемо популярні в Web пункти: «Про автора», «Послуги», «Контакти». Для меню будемо використовувати список HTML:
<div id="nav">
<ul>
<li><a href="#">Про автора</a></li>
<li><a href="#">Послуги</a></li>
<li><a href="#">Контакти</a></li>
</ul>
</div>
Застосуємо наступні правила CSS для меню:
#nav ul {
margin: 0 auto;
padding: 2px 0 0 0;
border-top: 1px dotted #AFAFAF;
border-bottom: 1px dotted #AFAFAF;
text-align: center;
width: 100%;
}
У наведеному блоці CSS встановлюються правила для списку (ul) всередині контейнера #nav: центральне вирівнювання, відступ зліва на 2px, верхню та нижню границю шириною 1px, сірим кольором пунктирним стилем. Ширина списку – 100%.
Визначимо стиль елементів списку li:
ul li {
list-style-type:none;
margin:0;
padding:3px 0;
display:inline;
}
В цьому блоці CSS: маркер – відсутній, відступ – 0, поле зліва – 3px, тип елемента – рядковий (щоб розмістити список у вигляді рядка).
#nav ul li a {
padding:0 20px;
line-height:40px;
color:#afafaf;
text-transform:uppercase;
font-weight:bold;
text-decoration: none;
}
Для гіперпосилань меню встановлено відступ з правого та лівого боку 20px, колір – сірий, усі символи – у верхньому регістрі, напівжирні.
При наведенні та натисканні лівої кнопки миші колір тексту пункту меню буде замінено на темно-сірий:
#nav ul li a:hover, #nav ul li a.active {
color: #333;
}
Вміст заголовку сторінки складається з наступного коду:
<div id="header">Привітання <br/> Головна сторінка </div>
Стилеве оформлення CSS при цьому матиме вигляд:
#header {
text-align: center;
font-size: 3em;
color: #AFAFAF;
line-height: 1.1em;
letter-spacing: -0.04em;
background: white;
}
Особливістю наведеного блоку CSS є збільшений втричі шрифт, на 4% зменшена відстань між символами, та збільшена на 10% висота рядка. Ілюструє вигляд головного меню та заголовку рис. 5:
Рис. 5. Зовнішній вигляд меню та заголовку сторінки
Наступний елемент сторінки – бічна панель, стилеве оформлення якої наведено вище. Вміст XHTML виглядатиме наступним чином:
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia, odio in viverra varius, nisl quam laoreet leo, eu pretium nibh sapien eu diam. Etiam interdum lorem eget turpis vehicula euismod. Phasellus vestibulum placerat risus fermentum mollis. Fusce eget pretium eros. Aenean sed laoreet magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p>
</div>
Після бічної панелі розміщено основний вміст. Для прикладу візьмемо 2 інформаційні повідомлення. XHTML-код блоку основного вмісту наведено нижче:
<div id="content">
<ul >
<li>
<a href="#" class="info">
<h2>Інформаційне повідомлення №1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</a>
</li>
<li>
<a href="#" class="info">
<h2>Інформаційне повідомлення №2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</a>
</li>
</ul>
</div>
Контейнер content містить список елементи якого складаються з гіперпосилання, заголовку та тексту повідомлення.
Відповідні стилі вмісту наведено нижче:
a.info {
background: url('../images/info.gif') no-repeat left center;
}
Даним правилом встановлюємо фон гіперпосилання.
h2 {
font-size: 1.4em;
font-weight: bold;
color: #333;
margin: 10px;
}
Зовнішній вигляд заголовку h2 включає налаштування шрифту, кольору та відступу, які розглядались вище.
Наступним правилом знімаємо підкреслення з гіперпосилання, перетворюємо його на блок, дещо збільшуємо розмір шрифту та робимо колір світлішим (в чорно-білій гамі).
#content LI a {
text-decoration: none;
color:#333;
padding:10px 0 10px 40px;
display:block;
color:#afafaf;
font-size:103%;
border-bottom: 1px dotted #CCC
}
Зовнішній вигляд бічної панелі та основного вмісту наведено на рис.6.
Рис.6. Зовнішній вигляд блоків основного вмісту та бічної панелі
Останній елемент сторінки – нижній колонтитул. Як правило, його фон виділяють іншим кольором, а з інформаційної точки зору він містить інформацію про автора сторінки та, за необхідності, дублює деякі частини головного меню:
<div id="footer">
<div id="altnav">
<a href="#">Про автора</a>
<a href="#">Послуги</a>
<a href="#">Контакти</a>
</div>
</div>
Стилеве оформлення нижнього колонтитула:
#footer a
color:#B86443;
margin-top:25px;
display: inline-block;
font-size:90%;
}
При цьому гіперпосилання перетворено на рядковий елемент із властивостями блоку (inline-block), а шрифт зменшено на 10%.
Таким чином, сторінка у цілому виглядатиме як на рис.7:
Рис.7. Результат розмітки сторінки