Спочатку вам потрібно підготувати необхідні налаштування для створення веб-сайту. Створіть потрібну структуру каталогу. Вона може виглядати приблизно таким чином:
steuerberater
---images
---css
Це досить типова структура каталогів. На головному рівні розташовуються HTML-сторінки. Файли CSS переїжджають в каталог css-, тоді як усі зображення зберігаються в каталозі images-. Тож в каталозі images- вставте всі зображення, які ви вирізали з макету раніше.
Створення базової структури
Створіть новий CSS-файл всередині каталогу css-. Потім вставте його у свій HTML-файл. (У моєму прикладі HTML-файл матиме назву index.html). Цей файл відтепер є вирішальним для наступних посібників.
Спочатку вставте в index.html відому вам вже базову структуру HTML.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ваш консультант з податків</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Також обережно вставте файл стилів. І тепер можна починати.
Зовнішній елемент - це контейнер div.
<div class="main-container"> </div>
Цей контейнер можна відразу ж форматувати за допомогою CSS-синтаксису.
.main-container {
width: 100%;
float: left;
}
Основний контейнер отримує ширину відсотків і вирівнюється зліва. Перевага заданої на 100 відсотків ширини: наприклад, ви можете вставити фонове зображення з градієнтом кольорів. Цей фон потім був би розташований на всю ширину екрана.
Я створюю ще два елементи div всередині main-container.
<div class="main-container"> <div class="container"> <div class="page"> </div> </div> </div>
Ці елементи також форматуються. Фактично обlaстинформат ширину 1000 пікселів. А вказавши margin: 0px auto;, ви також досягнете горизонтальне центрування цього елемента.
.container {
width: 1000px;
margin: 0px auto;
}
Продовжуємо форматування елемента page.
.page {
width: 1000px;
float: left;
padding: 40px 0px 0px 0px;
}
Цей елемент - основна область вмісту сторінки. Тут розміщуються всі інші елементи. Цей елемент також отримує фіксовану ширину 1000 пікселів. Вказане значення padding визначає внутрішні відступи. Таким чином, верхній внутрішній відступ встановлюється на 40 пікселів, а інші на 0 пікселів.
Отже, ми вже втілили (дуже) загальну структуру макету.
Тепер перейдемо до наповнення цієї структури контентом. Спочатку сторінку розділяють на три рядки.
• Верх
• Вміст
• Низ
Для цього визначаються три додаткові області div.
<div class="top"> </div> <div class="content"> </div> <div class="bottom"> </div>
Ці три області також, звісно, знову форматуються за допомогою CSS.
.top {
background-color: #f6f7f7;
width: 980px;
float: left;
padding: 0px 10px 10px 10px;
}
.content {
width: 980px;
float: left;
padding-top: 8px;
}
.bottom {
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Тепер можна відображати окремі області. Час надавати подальше оформлення кожному із них.
Давайте спочатку розглянемо область верху сторінки. Вона складається також з кількох елементів:
• Логотип/Назва
• верхнє меню
• велике зображення
Ці три елементи визначаються всередині top.
<div class="top"> <div class="header"> <div class="header-top"> <h1>Ваш консультант з податків</h1> </div> <div class="topmenu"> Оберіть меню </div> <div class="header-img"> </div> </div>
Це базова структура верхньої частини сторінки. Також вона тепер форматується за допомогою CSS.
.header {
width: 980px;
float: left;
}
.header-top {
width: 980px;
height: 87px;
float: left;
}
.topmenu {
background-image: url(../images/menu.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
.header-img {
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 980px;
height: 213px;
float: left;
}
Синтаксис містить дві "особливості". Спочатку розгляньте вміст класу topmenu. Тут ви помітите дві відомості щодо фонового зображення.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
Вставляється однопіксельна графіка menue.jpg. Ця графіка відображає вам відому градацію кольорів у верхньому меню. За допомогою вказівки background-repeat: repeat-x; графіка горизонтально повторюється до тих пір, поки елемент не буде повністю заповнений.
Розділіть область вмісту
Продовжуємо з областю сторінки, де відображається вміст. Це відбувається всередині елемента div з класом content. Ця область розділена на різні елементи. Спочатку є малюнок-анонс та привітальне вітання.
Відповідний HTML-синтаксис виглядає так:
<div class="content-left"> <div class="content-image"> <div class="img"><img src="images/img.jpg" alt="" height="100" width="160"></div> <div class="slogan"> <h1 class="title">Ласкаво просимо на наш сайт</h1> <p>Ось текст вітання</p> </div> </div>
Ця область також поділена на дві частини. Зліва показано зображення, справа - вітання. Важливою є клас content-image.
.content-image {
width: 739px;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
}
Цей клас обгортає зображення та вітання. У межах content-image знову є дві інші області.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Ласкаво просимо</div>
Якщо ви хочете відобразити лише велике зображення або щось інше замість такого розділення на дві частини, об'єднайте ці дві області в елемент div. Синтаксис CSS для варіанту з двома елементами виглядає так:
.img {
float: left;
}
.slogan {
width: 560px;
float: right;
}Результат у браузері повинен виглядати наступним чином:
Продовжуємо з трьома іншими елементами:
• лівий текстовий блок,
• правий текстовий блок,
• праве меню.
Синтаксис HTML у цьому випадку виглядає так:
<div class="teaser"> <div class="left"> Контейнер для тексту ліворуч </div> <div class="right"> Контейнер для тексту праворуч </div> </div> </div> <div class="content-right"> Праве меню </div> </div>
І звісно, тут також CSS-синтаксис:
.teaser {
width: 737px;
height: 216px;
float: left;
border: solid 1px #eee;
}
.left {
width: 330px;
height: 180px;
float: left;
padding: 20px;
}
.right {
width: 327px;
height: 180px;
float: left;
padding: 20px;
}
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}На кінець цього посібника ми матимемо основну структуру нашого веб-сайту.
Цю основну структуру, звичайно, ще потрібно заповнити відповідним вмістом. Це буде зроблено в наступному посібнику.
