Сначала вам следует подготовить необходимые меры для создания веб-сайта. Создайте желаемую структуру каталогов. Он может выглядеть, например, так:
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 процентов и выравнивание по левому краю. Преимуществом установленной на 100 процентов ширины является то, что вы можете вставить, например, градиентный цвет фона. Этот фон будет занимать всю ширину экрана.
Я создаю два дополнительных элемента div внутри main-container.
<div class="main-container"> <div class="container"> <div class="page"> </div> </div> </div>
Эти элементы также форматируются. Фактическая область содержимого получает ширину 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"> The top menu </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/menue.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;
Включенный пиксельный график меню.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;
}В конце этого учебника мы имеем основную структуру нашего веб-сайта.
Эту базовую структуру, разумеется, нужно будет заполнить соответствующим содержанием. Это будет сделано в следующем учебнике.
