Планирование веб-сайта
Сначала вам необходимо спланировать веб-сайт. В этом руководстве в качестве примера для создания веб-сайта будет использован следующий рисунок.
рисунка 1
показана ниже:
Рисунок 2
в основном состоит из пяти частей:
1. Основная навигационная панель с эффектами кнопок.
Ширина: 760 пикселей. Высота: 50 пикселей.
2. Заголовок Значок заголовка сайта содержит логотип и название сайта.
Ширина: 760 пикселей. Высота: 150 пикселей.
3. Содержание Основное содержание сайта.
Ширина: 480 пикселей. Высота: меняется в зависимости от содержимого.
4. Граница боковой панели, дополнительная информация.
Ширина: 280 пикселей. Высота: меняется в зависимости от
5. Нижний столбец нижнего колонтитула сайта содержит информацию об авторских правах и т. д.
Ширина: 760 пикселей. Высота: 66 пикселей.
1. Создайте html-шаблоны, каталоги файлов и т. д.
Код выглядит следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<голова>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Название компании – Имя страницы</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Просветить дизайн" />
<style type="text/css" media="all">@import "css/master.css";</style>
</голова>
<тело>
</тело>
</html>
Сохраните его как index.html и создайте папки css и images. Структура сайта следующая:
Рисунок 3
2. Создайте большой блок для веб-сайта .
Создайте блок шириной 760 пикселей, который будет содержать все элементы веб-сайта.
Напишите <div id="page-container"> между <body> и </body> в html-файле.
Привет, мир.
</div>
Создайте файл CSS, назовите его master.css и сохраните в папке /css/. Писать:
#page-container {
ширина: 760 пикселей;
фон: красный;
}
Ширина поля с идентификатором page-container контролируется как html и составляет 760 пикселей, а фон имеет красный цвет. Производительность следующая.
Рисунок 4.
Теперь, чтобы центрировать поле, напишите Margin: auto;, чтобы файл css имел вид:
#page-container {
ширина: 760 пикселей;
маржа: авто;
фон: красный;
}
Теперь вы можете видеть, что между верхней частью окна и браузером есть зазор шириной 8 пикселей. Это связано с отступами и границами браузера по умолчанию. Чтобы устранить этот пробел, нужно в css файле написать:
HTML, тело {
маржа: 0;
заполнение: 0;
}
Разделите веб-сайт на пять разделов
1. Поместите пять частей, упомянутых в «Шаге 1», в поля и напишите в html-файле:
<div id="страница-контейнер">
<div id="main-nav">Главная навигация</div>
<div id="header">Заголовок</div>
<div id="sidebar-a">Боковая панель A</div>
<div id="content">Содержимое</div>
<div id="footer">Нижний колонтитул</div>
</div>
ведет себя следующим образом:
Рисунок 5
2. Чтобы различать пять частей, мы отмечаем эти пять частей разными цветами фона и пишем в css-файле:
#main-nav {
фон: красный;
высота: 50 пикселей;
}
#header {
фон: синий;
высота: 150 пикселей;
}
#sidebar-a {
фон: темно-зеленый;
}
#содержание {
фон: зеленый;
}
#footer {
фон: оранжевый;
высота: 66 пикселей;
}
Производительность следующая:
Рис. 6.
Макет веб-страницы, плавающий элемент div и т. д.
1. Плавающий: сначала позвольте границе перемещаться справа от основного содержимого. Используйте CSS для управления плаванием.
#sidebar-a {
плавать: вправо;
ширина: 280 пикселей;
фон: темно-зеленый;
}
Производительность следующая:
Рисунок 7
2. Напишите текст в поле основного содержимого. Напишите в html файле:
<div id="содержание">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim in lectus.
Donec in sapien in nibh rutrum gradida Sed ut mauris Fusce Malesuada enim vitae lacus.
euismod vulputate. Nullam rhoncus mauris ac metus Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede Nam augue lorem, semper at, porta eget, Placerat eget,
Purus suspendisse mattis nunc преддверие ligula In hac habitasse Platea dictumst.
</div>
Производительность следующая:
Рисунок 8.
Но вы можете видеть, что основное поле содержимого занимает всю ширину контейнера страницы, и нам нужно установить правую границу #content на 280 пикселей. чтобы оно не конфликтовало с границей.
CSS-код выглядит следующим образом:
#содержание {
поле справа: 280 пикселей;
фон: зеленый;
}
В то же время напишите текст в рамке. Напишите в html файле:
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim in lectus.
Donec in sapien in nibh rutrum gradida Sed ut mauris Fusce Malesuada enim vitae lacus.
euismod vulputate. Nullam rhoncus mauris ac metus Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede Nam augue lorem, semper at, porta eget, Placerat eget,
Purus suspendisse mattis nunc преддверие ligula In hac habitasse Platea dictumst.
</div>
ведет себя следующим образом:
Рисунок 9.
Это не то, что нам нужно. Нижняя рамка веб-сайта опустилась ниже границы. Это потому, что мы перемещаем границу вправо. Поскольку она плавающая, можно понять, что она находится на другом слое над всем блоком. Таким образом, нижнее поле и поле содержимого выровнены.
Итак, пишем в css:
#footer {
ясно: оба;
фон: оранжевый;
высота: 66 пикселей;
}
Производительность следующая:
Рисунок 10
Расположение и представление дополнительных структур вне основного фрейма веб-страницы. Представление (Макет) дополнительных структур вне основного фрейма веб-страницы, включая следующие:
1. Основная панель навигации;
2. Название, включая название веб-сайта и название контента;
3. Содержание;
4. Информация в нижнем колонтитуле, включая авторские права, сертификацию и дополнительную панель навигации (необязательно).
При добавлении этих структур, чтобы не разрушить исходную структуру, нам нужно добавить под тегом «body» (TAG) файла css:
.скрытый {
дисплей: нет;
}
«.hidden» — это добавленный нами класс. Этот класс может сделать так, чтобы любой элемент на странице, принадлежащий скрытому классу, не отображался. Они будут использованы позже, поэтому пока забудьте об этом.
Теперь добавим заголовок:
сначала вернитесь к HTML-коду: от <h1> до <h6> — это наши часто используемые коды заголовков HTML. Например, мы обычно используем <h1>название веб-сайта</h1>, <h2>подзаголовок веб-сайта</h2>, <h3>основной заголовок контента</h3> и т. д. Мы добавляем следующее в слой заголовка (Div) html-файла:
<div id="header">
<h1>Просветить дизайн</h1>
</div>
Обновите страницу, и вы увидите огромный заголовок и пустое пространство вокруг него. Это вызвано размером и полем тега <h1>> по умолчанию. Чтобы сначала устранить эти пробелы, вам нужно добавить:
ч1 {
маржа: 0;
заполнение: 0;
}
Далее идет панель навигации :
CSS-код, управляющий работой панели навигации, относительно сложен. Мы подробно представим его на девятом или десятом шаге. Теперь добавьте код навигации в html-файл:
<div id="main-nav">
<ул>
<li id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > О</a></li>
<li id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Службы</a></li>
<li id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Портфолио</a></li>
<li id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Свяжитесь с нами</a></li>
</ul>
</div>
(Примечание: в исходном руководстве использовались dl и dt, в jorux здесь используются более часто используемые теги ul и li)
В настоящее время производительность панели навигации относительно низкая, но ее особая производительность будет представлена в будущих руководствах, поэтому необходимо временно скрыть панель навигации, поэтому я добавил:
<div id="main-nav">
<dl class="скрытый">
<dt id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > О</a></dt>
<dt id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Службы</a></dt>
<dt id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Портфолио</a></dt>
<dt id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Свяжитесь с нами</a></dt>
</дл>
</div>