3.7 Практична робота. Проектування веб-сторінки за допомогою стилів
Зробимо розмітку сайта згідно зразка.
Створюємо файл style.css, в якому зберігаємо зовнішню таблицю стилів для розмітки сторінки.
.cbody #container {
background: #FFFFFF;
position: relative; /* відносна позиція відцентрує блок */
width: 780px; /* на 20px менше від 800px ширини для */
margin: 0 auto; /* auto разом з width центрує сторінку */
text-align: left;
}
.cbody #header {
height: 60px;
padding: 0 10px 0 20px; /* додатк відступи зліва та знизу */
background-color: #33CCFF;
}
.cbody #sidebar1 {
position: absolute;
top: 60px; /* зсув на висоту шапки */
left: 0;
width: 150px; /* ширина колонки, фоновий колір блоку */
padding: 15px 10px 15px 20px; /* відступи */
background-color: #FF99CC;
}
.cbody #sidebar2 {
position: absolute;
top: 60px;
right: 0;
width: 160px;
padding: 15px 10px 15px 20px;
background-color: #FF99CC;
}
.cbody #mainContent {
margin: 0 200px; /* правое и левое поле створюють дві колонки */
padding: 0 10px;
}
.cbody #footer {
text-align: center;
padding: 0 10px 0 20px;
background-color: #336699;
}
Створюємо файл menu.css, в якому зберігаємо зовнішню таблицю стилів для меню.
#vmenu{
margin: 0;
padding: 0;
list-style-type: none;
width: 100px;
}
#vmenu li {
border-left: 10px solid #666;
border-bottom: 1px solid #666;
}
#vmenu a {
background-color: #949494;
color: #fff;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-left: 5px solid #33ADFF;
display: block;
}
#vmenu a:hover {
background-color: #666;
border-left: 5px solid #3333FF;
}
Створюємо файл fonts.css, в якому зберігаємо зовнішню таблицю стилів для шрифтів, що будуть використовуватися для контенту.
.for_header{
font-weight : bold;
font-family: Monotype Corsiva;
color: red;
font-size: 300%;
text-align: center;
}
h1 {text-align:center;
font-size: 150%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #00f
}
p {
font-size: 110%;
font-family: Arial;
color: #000
}
Всі таблиці стилів необхідно помістити в одну папку, давши їй ім'я. Наприклад, CSS.
Створюємо файл index.html. В майбутньому він стане стартовою сторінкою сайту.
В голові файла обов'язково робимо "прив'язку" до таблиць стилів.
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" >
<link rel="stylesheet" type="text/css" href="css/menu.css" >
<link rel="stylesheet" type="text/css" href="css/fonts.css" >
<title>Назва сайта</title>
</head>
В тілі файлу вказуємо, які з описаних у таблиці стилів блоки ми будемо використовувати і що саме буде відображено в цих блоках.
<body class="cbody">
<div id="container">
<div id="header">
<div class="for_header"> Хедер </div>
<! тут можна вставити картинку тегом <img> >
</div>
<div id="sidebar1">
<! лівий сайдбар - сюди вставляють код меню >
</div>
<div id="mainContent">
<! контент - інформація сторінки >
</div>
<div id="sidebar2">
<! правий сайдбар - сюди вставте гаджети >
</div>
<div id="footer">
<! Футер - службова інформація >
</div>
</div>
</body>
При внесенні змін у цей файл треба слідкувати, щоб зміни не пошкодили контейнер
<div>... </div>. Міняємо лише вміст контейнера.
Наприклад, в sidebar1 можна вставити код для вертикального меню.
<div id="sidebar1">
<ul id="vmenu">
<li><a href="index.html">Візитка школи</a></li>
<li><a href="news.html">Новини шкільного життя</a></li>
<li><a href="adm.html">Адміністрація</a></li>
<li><a href="photo.html">Фотоальбом</a></li>
</ul>
</div>
В хедер - доставимо фотографію-логотип висотою 60 пікселів (як передбачено розміткою), при клацанні якої завжди відкриватиметься індексна сторінка.
<a href="index.html"> <img src="images/header.png" height="60"> </a>
Якщо ви хочете, щоб у хедері відображалися і картинка, і напис, необхідно в стилі .for_header{} файла fonts.css дописати:
padding: 0 0 0 300px; // відступ для тексту зліва 300 пікселів
position: absolute; // позиція абсолютна відносно сторінки
Завдання 1. Змініть індексний файл та стилі таким чином, щоб вигляд сторінки максимально відповідав зразку.
Змініть напис в хедері і забезпечте накладення тексту та малюнка (дивіться вище).
Внесіть інформацію в блок Контент, використавши теги <p>, <h1>.
У таблиці стилів fonts.css змініть колір тексту тега <p>.
У таблиці стилів fonts.css задайте вирівнювання "за шириною".
Змініть колір Сайдбар2 (у таблиці стилів style.css)
Вставте у Сайдбар1 меню та змініть ширину сірого фону для цього меню у файлі menu.css.
Змініть футер.
Зайдіть на сайт http://www.loippo.lviv.ua/, збережіть логотип-хедер цього сайту у папці images і вставте його у Сайдбар2 задавши ширину 140 пікселів.
Забезпечте, щоб при клацанні логотипа відкривався сайт ЛОІППО.
10 -12. Поексперементуйте зі вставкою іншої інформації на сторінку.
Завдання 2. Для особливо обдарованих :).