Таким чином, далі йде меню, яке відображається у верхній ділянці вікна.
Для цього меню ви вже виконали попередній роботи. Ви, напевно, пам'ятаєте красивий градієнт, який був збережений як однопіксельна графіка. Саме він зараз використовується. Проте перед цим необхідно створити відповідну HTML-структуру для області меню. Це може виглядати наступним чином:
<div class="header"> <div class="header-top"> <h1>Ваш бухгалтер</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Головна сторінка</a></li> <li><a href="#">Про нас</a></li> <li><a href="#">Як ми працюємо</a></li> <li><a href="#">Контакт</a></li> <li><a href="#">Імпринт</a></li> </ul> </div> <div class="header-img"> </div> </div>
Для оформлення фону використовується однопіксельна графіка, яка вертикально повторюється стільки разів, поки елемент не буде заповнений повністю.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Потім можна відрегулювати оформлення меню. У таких меню фактично немає нічого надзвичайного. Важливі тільки наступні аспекти:
• Приховати маркери списку за допомогою list-style-type: none;.
• Позбутися маркерів списку та вирівняти елементи списку горизонтально.
Тут, насправді, важливий лише ефект при наведенні. Коли відбувається ця подія, відображається інша графіка тла.
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
У браузері ви повинні побачити наступне:
У мене особисто обрано наступний варіант:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
width: 100px;
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Тут важливий фактично лише ефект під час наведення. Якщо відбувається ця подія, відображається інша графіка тла.
Праве меню
Сайт має не тільки верхнє меню, але також показується меню в правій області вікна.
Це меню належить до області div з класом content-right. Я додав туди лише тимчасовий вміст під час розробки сторінки.
<div class="content-right"> <h2>Головне меню</h2> <ul> <li><a href="#">Посилання 1</a></li> <li><a href="#">Посилання 2</a></li> <li><a href="#">Посилання 3</a></li> <li><a href="#">Посилання 4</a></li> <li><a href="#">Посилання 5 </a></li> <li><a href="#">Посилання 6</a></li> <li><a href="#">Посилання 7</a></li> <li><a href="#">Посилання 8</a></li> <li><a href="#">Посилання 9</a></li> <li><a href="#">Посилання 10</a></li> </ul>
Спочатку відповідний регіон розміщується на відповідному місці та в потрібному розмірі.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Далі йде визначення справжнього меню. На цей раз елементи знаходяться один під одним. Вам просто потрібно приховати маркери списку іншого. Остаточно ви залишаєтеся вільними у вигляді меню.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}В браузері ви повинні побачити наступне:
Нижнє меню
В нижній частині веб-сайту буде інше меню. Тут на PSD-Tutorials.de також використовується подібне меню для надання посилань на загальну інформацію.
На нашому сайті також є вказівка про авторське право. Ці дві речі фактично є досить типовими для веб-сайтів. Спочатку знову HTML-структура.
<div class="bottom"> <ul> <li><a href="index.html">Головна</a></li> <li><a href="#">Про нас</a></li> <li><a href="#">Новини</a></li> <li><a href="#">Контрольний центр</a></li> <li><a href="#">Контакт</a></li> <li><a href="#">Імпринт</a></li> <li><a href="#">Карта сайту</a></li> </ul> <p>© Авторські права 2014 від PSD-Tutorials.de</p> </div>
Це простий список ul. Кожен пункт списку містить пункт меню. Під ul знаходиться елемент p, в якому розміщено вказівку про авторське право. Тепер залишається створити синтаксис CSS.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Як саме ви виконуєте дизайн нижньої частини, власне, залишається на ваш розсуд. Я використовую знову градієнт. Проте ви також можете використовувати простий фон або навіть використовувати синтаксис CSS3. Проте в моєму варіанті з графікою важливо, щоб повторення було заборонене за допомогою background-repeat: no-repeat;.
Спочатку подивіться на результат:
У цьому зображенні можна побачити білі лінії, які відображаються поруч із окремими пунктами меню. Вони визначаються за допомогою різних інструкцій border-left, що в кінцевому підсумку означає, що ці інструкції стосуються лівого краю елемента.
Загалом, синтаксис для нижнього меню виглядає наступним чином:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
Є особливість порівняно з верхнім меню. Фактично, в разі наведення курсора не завантажується додаткова графіка. Але для того, щоб все-таки повідомити відвідувачів, що вони навели курсор на посилання, кожне посилання підкреслюється при настанні події "наведення".
В кінці цього посібника базові кроки по створенню веб-сайту виконано. Тепер залишилося прикрасити сторінку. Більше про це в наступних посібниках.
