2. Вёрстка сайта

Верстка сайта. Проектирование дизайна, создание навигации

Страницы сайта разрабатываются с применением технологии блочной верстки и с учетом совместимости с популярными браузерами – Firefox, Opera, Safari, IE (одинаково и правильно отображаются и работают в них).

Переход на блочную верстку – технологию описания внешнего вида документа с помощью каскадных таблиц стилей (CSS) – упрощает и ускоряет обработку содержимого интернет-ресурсов и является новым шагом в развитии сети Интернет.

В настоящее время критерием качества любого профессионального сайта является его соответствие строгим стандартам W3C – XHTML 1.1 и CSS 2.1, с возможностью проверки на сервисах W3C – Консорциума Всемирной паутины. Для проверки web-документа на соответствие стандартам кода XHTML можно воспользоваться Сервисом проверки разметки от W3C по адресу http://validator.w3.org/ и для проверки стандартам CSS – http://jigsaw.w3.org/css-validator/.

Блочная верстка, в отличие от табличной верстки, соответствует стандарту W3C. Если при табличной верстке большая часть элементов дизайна веб-страниц располагается непосредственно в коде HTML-документа, то с появлением CSS стало возможным разделение содержания и представления документа за счет размещения всех элементов дизайна в отдельном файле каскадных таблиц стилей с расширением css. Это делает возможным применение единого стиля оформления и мгновенное его изменение (по желанию посетителя) для множества страниц одного раздела или веб-ресурса в целом.

При блочной верстке информация отделена от ее представления на странице. Для отображения информационного наполнения страницы используется, в основном, несколько тегов, таких как <div> – блок и <p> – абзац. Тег <div> используют для задания функциональных областей на странице, таких как: «шапка» (header) или верхний колонтитул, блок навигации, блок основного содержимого, «подвал» (footer) или нижний колонтитул.

Размещение текстовой и графической информации производится с помощью каскадных таблиц стилей (CSS). В них определяется, каким образом элемент должен быть расположен в окне браузера (используя абсолютный, относительный, фиксированный или статический тип размещения), какой должен иметь размер шрифта, его цвет, цвет фона и множество других установок стиля. Другими словами, определяются правила для элементов web-страницы.

Для начала разберемся с теорией. Блок – это обычная прямоугольная область, обладающая рядом свойств, таких как рамка, поля и отступы (рис. 12). Содержимым блока может быть что угодно – кусок текста, картинка, список, форма для заполнения, меню навигации и т. п.

                                                                                          Рис. 12. Визуальное представление свойств блока

        Рамка (border) – это контур, для которого можно задать такие характеристики, как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был расположен «впритык» к стенкам блока.

Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Блоки – это элементы, всегда располагающиеся на странице вертикально. То есть если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задается такой параметр как «обтекание» (float).

Приступим к верстке сайта на практике.

Любая грамотно свёрстанная страница должна начинаться с непарного тега doctype, определяющего тип документа. Нужен он для всевозможных устройств вывода информации и браузеров в том числе. Отметим, что в настоящее время браузеры прекрасно обходятся и без указания этого тега, но наступит такой момент, когда страница сайта, сразу начинающаяся с тега <html>, просто не будет прочитана, так как современные стандарты становятся строже. Определим web-страничку в соответствии с самым строгим на данный момент типом документа под названием Strict 1.0. Выглядит это следующим образом:

<!doctype html public "-//w3c//dtd xhnml 1.0 Strict //en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

Этой строкой кода разработчики декларируют, что данный документ будет строго соответствовать стандарту W3C.

Следующая строка кода web-документа, согласно требованиям стандарта W3C, имеет вид:

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

Здесь появились слова lang и ru – это указание на язык документа (не путайте с кодировкой, её мы укажем позднее – в мета-тегах). В этой же строке, в общем-то, и начинается код самой страницы.

Следующий тег <head>. В нём содержится служебная информация: название страницы (то, что входит в тег <title>), кодировка, ключевые слова для поисковых роботов, описание страницы и т. п. Вся эта информация записана в служебных тегах meta, которые также не отображаются на странице в браузере. Выглядит это следующим образом:

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />

<meta name="description" content="сайт туристического агентства 1001 тур, отдых на море, экскурсионные туры, морские и речные круизы, горнолыжные туры, автобусные туры." />

<meta name="keywords" content="1001 тур, vip-тур, горящие туры, отдых, круиз, лечение в санаториях и пансионатах." />

<link rel="stylesheet" href="style1.css" type="text/css" />

<title>туристическое агентство «1001 тур» | главная</title>

</head>

Прокомментируем эту часть кода:

1.       Первый мета-тег указывает на кодировку сайта. В рунете желательно пользоваться все-таки кодировкой windows-1251, чтобы случайно вместо хорошо читаемого и красивого текста не появились нечитаемые символы.

2.       Второй мета-тег – это краткое описание сайта. Именно эта строка первой отобразится в результатах поиска информационно-поисковых систем.

3.       В третьем мета-теге записываются ключевые слова для ИПС.

4.       Cтрока с тегом <link> – это не что иное, как ссылка на внешний файл таблицы стилей CSS (stile1.css), описание которого будет представлено чуть позже.

5.       И, наконец, в <title> указывается текст, который появится в заголовке окна браузера при открытии web-страницы.

Теперь можно дописать код страницы до конца (он ещё будет впоследствии дополнен):

<body>

…

</body>

</html>

Сохраним документ в отдельной папке как index.html. Почему именно index? Любой браузер, зайдя по адресу вашего сайта (например, www.1001tur.ru), станет сразу искать страницу с этим названием, т. к. она является для него стартовой.

Структура web-страниц. В настоящее время сайты, состоящие из одного столбца, принято считать самыми дешевыми. Значительно дороже страницы, макет которых сверстан из двух колонок. Самыми дорогими являются страницы, имеющие трехколоночную структуру (самую сложную для верстки).

Рассмотрим пример верстки сайта с двумя колонками – двумя функциональными областями: основной текст (с картинками и пр.) и блок новостей (рис. 13).

Для написания кода удобнее пользоваться редактором NotePad. Это программа, которой пользуются как программисты, так и верстальщики сайтов.

Итак, перейдем к листингу кода файла style1.css (каскадной таблицы стилей) для сайта, представленного на рис. 13.

Алгоритм кода файла style1.css можно представить в виде следующей последовательности шагов:

1.       Задание общих правил для страницы (табл. 16).

2.       Оформление «шапки» (header) главной страницы (табл. 17).

3.       Определение правил для блока навигации (nav) (табл. 18).

4.       Оформление контента сайта (text) (табл. 19).

5.       Определение правил для изображений (табл. 20).

6.       Задание правил для блока «Список стран» (members) (табл. 21).

7.       Оформление блока новостей (news) (табл. 22).

8.       Определение правил для блока «подвал» (footer) (табл. 23).

 

 

Рис. 13. Блочная верстка сайта с двумя колонками

 Таблица 16

Задание общих правил для страницы сайта 

Листинг кода

Комментарии

*{

margin:0;

padding:0;

border:0;

   }

Звёздочка – это не тег и в коде страницы больше нигде не указывается. Браузеры, понимая её значение, применяют данные с ней правила ко всей странице. В правиле мы указали последовательно: отступы – 0, поля – 0, рамка – 0. Это нужно для того, чтобы ни поля, ни отступы, ни рамки не появлялись там, где нам не нужно.

Значения указываются либо в процентах, либо в пикселях. Если стоит нуль, то единицу измерения можно не указывать.


body {

padding:2% 0 0;

background:#ffa;

color:#363;

font-family:”Comic Sans MS”,Verdana,Arial,sans-serif;

         }

Для тела страницы определили следующие правила: поля – сверху 2 %, с боков по нулям, снизу тоже нуль. Это значит, что данная web-страница не будет «прилипать» к верхушке окна браузера, а отступит от него на 2 % размера окна.

Заметим, что вообще имеются 4 стороны и значения для них задаются по часовой стрелке, начиная сверху, затем правое, низ и левое. Но так как по бокам одинаковые значения, то допускается их не повторять. Поэтому здесь указано всего три значения. Если указано два значения, например, 5px 10px – это означает, что сверху и снизу по 5 пикселей, а с боков по 10. Можно определить поля, указав лишь одно значение, наример, 5px – то есть со всех сторон по 5px.

Далее указаны фон желтого цвета, цвет шрифта тёмно-серого (363), ниже перечислены в порядке предпочтения используемые семейства шрифтов. Причем, если имя шрифта состоит более чем из одного слова, то его нужно взять в кавычки.

#container {

margin:0 auto; width:760px;

border: 1px solid #999;}

Container с решёткой. Решётка означает уникальность атрибута. То есть тег div с данным атрибутом будет использован только один раз на странице.

Этот контейнер нужен для того, чтобы поместить страничку в центр экрана монитора. Для этого указываются у контейнера отступы: сверху и снизу нуль, а с боков auto. Таким образом, при любом размере экрана сайт всегда будет строго по центру. Ширина страницы – 760 пикселей.

Данный блок обрамлен рамкой серого цвета (#999) в виде сплошной линии (solid) толщиной 1 px.

 

Таблица 17

 Оформление «шапки» (header) главной страницы 

Листинг кода

Комментарии

#header {

background-image: url(1001-tur.jpg);

width: 760px;

height: 89px;

               }

«Шапка» заливается фоном-картинкой с размерами 760´89 пикселей.

url(1001-tur.jpg) – это ссылка на картинку.

 

Теперь снова откроем Главную страницу – файл index.html. Между тегами body добавляем следующий код:

 

<div id=”container”>

<div id=”header”>

</div>

 

В тело страницы здесь добавляется «коробочка» – контейнер, а уже в него помещается шапка, то есть применяется вложенность тегов. Заметим, что закрывающий тег для блока container пока отсутствует и будет закрыт лишь после внедрения всех элементов (блоков) веб-страницы, т. е. после блока footer («подвал»).

Продолжим писать код для таблицы стилей (style1.css). После правила для шапки запишем правило для блока навигации. Это третий этап нашего алгоритма.

Панель навигации горизонтальная и находится сразу под «шапкой» web-страницы. Для её реализации использован такой элемент, как маркированный список.

Таблица 18

 Правила для блока навигации 

Листинг кода

Комментарии

#nav {

background: url(nav-bg.jpg) repeat-x;

color: #f00;

font-size: 120%;

font-weight: bold;

line-height: 1.8em;

text-align: center;

          }

Блок навигации назван nav. В качестве фона указан рисунок nav-bg.jpg размером 8´35 пикселей. Чтобы растянуть его по всей полосе навигации, указывают слово repeat-x, что означает «повторить по оси х», т. е. по горизонтали.

Цвет шрифта ярко-красного цвета #f00 для активного раздела. Он не будет ссылкой, а останется простым текстом (делать на Главной странице ссылку на самое себя – тавтология).

Далее в этом правиле указаны: размер шрифта, толщина, высота по вертикали (единица измерения em равна высоте прописной буквы выбранного шрифта). Значение 1.8em показывает, что шрифт увеличен на 1.8 высоты стандартной буквы). В последней строке задано выравнивание текста по центру.

#nav ul {  list-style-type: none;  }

Объявление списка без маркеров. Это задаётся значением none.


#nav li {

            display: inline;

            margin: 0 8px;

            }

 

Для строк списка задается расположение по горизонтали, то есть в линию, чтобы не получился обыкновенный столбец. Определены отступы: сверху и снизу по нулям, с боков по 8 пикселей.

#nav li a {

                color: #0c0;

               }

Определяется правило для меню сайта, которое будет реагировать на наведение мышкой на его разделы. Обозначен цвет ссылки в исходном состоянии.

#nav li a:hover { color: #f00; }

Установлен цвет ссылки при наведении мыши.

a { text-decoration: none; }

Указание на то, что все ссылки на странице по умолчанию не используют подчёркивание. Согласитесь, в меню навигации это выглядит необычно. При необходимости это правило можно изменить.

 

Из табл. 18 видно, что в правилах для блока навигации вначале указаны настройки для всего блока, затем для маркированного списка, обозначенного тегом ul, далее заданы правила для строк li. Каждое последующее правило «наследует» характеристики предыдущего: от nav к ul, от ul к li. Все вместе они являются вложенными в тег контейнера и получают от него часть правил (в частности, центрирование посередине экрана и заданную ширину в 760 пикселей). Это и является своеобразным каскадом.

Итак, правила для блока навигации заданы, осталось разместить этот блок на главной странице. Для этого следом за шапкой (после тега <div id="header"> </div>) добавляем блок навигации:

 

<div id="nav">

<ul>

<li><a href="#">главная </a></li>

<li><a href="hotels.html">отели</a></li>

<li><a href="http://www.1001-tur.ru/search-tour.html">

              возможные туры </a></li>

<li><a href="http://www.1001-tur.ru/contact.html">контакты

         </a></li>

<li><a href="http://www.1001-tur.ru/company.html">о компании

         </a></li>

</ul>

</div>

 

Далее необходимо сохранить страницу index.html, а результат проверить в окне браузера.

Переходим к 4 этапу верстки сайта – наполнению web-страницы контентом. Чтобы оформить контент сайта, вернемся к файлу style1.css и добавим в него код, представленный в табл. 19.

 

Таблица 19

 Оформление контента сайта 

Листинг кода

Комментарии

#text {width: 545px;

           font-size: .8em;

           color: #333;

           margin: 10px auto;

           float: left;

         }

Ширина области текста – 545 пикселей. Размер шрифта 0.8em (в правиле нуль можно не писать, .8em обозначает то же самое).

Отступы пояснялись ранее – верх и низ по 10 пикселей, по бокам браузер выберет автоматически. Последняя строчка задаёт местоположение блока текста с левой стороны. Слово float переводится как «обтекание». Т. о., другие блоки будут «обтекать» блок #text справа. В правой части страницы будет помещена полоса новостей, и в правилах к блоку новостей будет присвоено значение right для свойства float.

#text p {text-align: justify;

             text-indent: 1.5em;

             margin: 0;

             padding: 0 15px; }

Для абзацев текста задается выравнивание по ширине, text-indent – красная строка, а также – отступы и поля.

#text a { color: #396; }

Для неактивной ссылки задан салатовый цвет.

#text a:hover {color: #f36;

border-bottom: #f36 dotted 1px;

                          }

Для активной ссылки определен красный цвет с подчёркиванием точечной (dotted) линией в 1 пиксель толщиной.

 

С помощью табл. 20 поясним правила для рисунков сайта (шаг 5) и добавим код, представленный в этой таблице в файл style1.css. Изображения обозначены соответствующими атрибутами img1, img2, venzel. Во всех правилах для каждого рисунка указаны размеры и отступы.

Далее перейдем к шестому этапу – «Задание правил для блока «Список стран» (members)» (табл. 21). Отметим, что блок members входит в контейнер text, поэтому наследует правила данного контейнера.

В конец файла style1.css добавляем код из табл. 21. 

Таблица 20

 Определение правил для изображений 

Листинг кода

Комментарии

.img1 {

width: 176px;

height: 281px;

margin: 0 0 0 15px;

float:right;

           }

Отступы и поля удобнее подбирать опытным путём. То есть вначале просто без них вставить блоки или рисунки на страницу, а затем корректировать, добавляя или убавляя отступы и поля, где это необходимо. Значения можно указывать и с минусом. Например, –10px. Рисунок в этом случае сдвинется в противоположную сторону.

 

Все рисунки в правилах имеют обтекание в соответствии с их расположением на странице. Первый рисунок будет справа от текста, второй – слева, и вензель тоже слева.

 

Как видно, данные правила начинаются не с решётки #, а с точки. Это признак того, что правило относится не к атрибуту ID, а к атрибуту class.

.img2 {

width: 200px;

height: 200px;

margin: 10px 10px 0 15px;

float: left;

          }

.venzel {

width: 325px;

height: 40px;

margin: 10px 10px 0 15px;

float: left;}

 

Таблица 21

Правила для блока «Список стран»

Листинг кода

Комментарии

#members {width: 300px;

                    height: 190px;

                    float: right;  }

Задание блоку определенного размера с указанием ширины и высоты, а также размещение справа от рисунка.

#members h2 {color: #f60;

font-size: 120%; font-weight: bold; text-align: center;}

Обозначено правило для заголовка второго уровня.

#members ol { color: #f60;

font-size: 120%; margin:10px;

float: left;   }

#members li {margin: 0 5px;}

Для самого списка, определенного тегом ol, определено обтекание слева. Таким образом, оба списка будут располагаться один возле другого.

#members li a {

color: #4c1e0e;

                        }

#members li a:hover {

                     color: #f00 }

Страны, которые находятся в списке, созданы в виде ссылок. Здесь определены для них цвета и подчеркивание точечной линией – это следствие каскада. Список лежит в разделе, где действует контейнер text, поэтому с него берется и часть правил.

 

После определения правил для контента сайта (блок text), задания правил для рисунков и «Списка стран» (members) разместим все эти блоки на главной странице, дописав в неё следующий код:

 

1.  <div id="text">

2.  <img class="img1" src="palma.jpg" alt="морской пейзаж" />

3.  <p>Мы предлагаем: отдых на море, экскурсионные туры, круизы…</p>

4.  <p>Сегодня совместную четкую и отлаженную работу компании «1001 Тур» и туроператора Tez Tour отмечает не только конечный потребитель – турист, но и сам Tez Tour... </p>

5.  <p>Компания «1001 Тур» входит в пятерку крупнейших сетевых образований России ...</p>

6.  <img class="venzel" src="zavitok.jpg" alt="вензель" />

7.  <img class="img2" src="town_and_Country.jpg" alt="курорт" />

8.  <div id="members">

9.  <h2>Список стран:</h2> <ol>

10.     <li><a href="#">Абхазия</a></li>

11.     <li><a href="#">Австрия</a></li>

12.     <li><a href="#">Болгария</a></li>

13.     <li><a href="#">Великобритания</a></li>

14.     <li><a href="#">Венгрия</a></li>

15.     <li><a href="#">Греция</a></li>

16.     </ol>

17.     <ol>

18.     <li><a href="#">Доминикана</a></li>

19.     <li><a href="#">Египет</a></li>

20.     <li><a href="#">Индия: Гоа</a></li>

21.     <li><a href="#">Италия</a></li>

22.     <li><a href="#">Кипр</a></li>

23.     <li><a href="#">Китай</a></li>

24.     </ol>

25.     </div>

26.     </div>

 

Рис. 14. Фрагмент кода страницы index.html с основным контентом сайта

 

Перейдем к 7 этапу – оформлению блока новостей (news).

Снова вернемся к файлу stile1.css, чтобы определить правила для полосы новостей (табл. 22).

Таблица 22

 Оформление блока новостей (news)

Листинг кода

Комментарии

#news {background: #aec;

             width: 185px;

             color: #655;

             margin: 10px 5px;

             float: right; }

#news h3 { color: #f60;

                  font-size: 120%;

                  font-weight: bold;

                  text-align: center;}

#news ul {

list-style: url(marker.jpg) inside;

               }

#news li {font-size: 75%;

                padding: 5px 10px; }

Изменили фон для визуального разделения колонки с новостями от остальных блоков. Немного подправили и уточнили ширину блока, а также шрифт и порядок обтекания (float: right).

Кроме того, определили стиль маркеров для используемого списка новостей. Любой браузер нарисует на месте маркеров кружки черного цвета. Но для придания странице лучшего вида стандартные маркеры можно поменять на самостоятельно созданный маркер. Для этого нужно нарисовать красивый маркер, и указать на него ссылку в виде url(marker.gif). Следом стоит приписать inside, это делается для размещения маркера именно в колонке с текстом, потому что изначально маркеры не состоят в самом блоке.

 Теперь согласно заданным в файле css правилам для полосы новостей, добавим блок news на главную страницу. После 26 строки кода (рис. 14) вставляем следующие теги (рис. 15): 

              <div id="news">

<h3> Новости туризма:</h3>

<ul> <li> Арабские туристы едут в Европу за …. </li>

<li>Нидерланды: владельцы кафе против запрета на прием туристов…</li>

<li>Египет: у побережья Шарм-эль-Шейха замечена акула... </li>

</ul>

              </div>

Рис. 15. Добавление полосы новостей

 

Фактически верстка сайта готова. Cохраните страницу index.html и просмотрите результат обработки кода в браузере.

Осталось оформить нижний колонтитул («подвал») главной страницы. «Подвал» (footer) является, несмотря на расположение, довольно важной частью сайта. Как правило, в этом месте размещаются авторские права и контакты организации, которой принадлежит сайт. Здесь же для удобства повторяются ссылки на различные страницы сайта.

Добавим в конец главной страницы следующий код (рис. 16): 

<div class="clearfloat"> </div>

<div id="footer">

<p>Главная |

<a href="http://www.1001tur.ru/about.html"> О турах </a> |

<a href="#"> О нас </a> |

<a href="http://www.1001tur.ru/contact.html">Контакты</a>|</p>

<p>© 1001 TUR.RU, 2012|All right reserved.|

<a href="http://validator.w3.org/check?uri=http://www.dizweb.ru/1001-tur/index.html"> XHTML</a>|

<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dizweb.ru/1001tur/style.css"> CSS</a> | e-mail:

<a href="mailto:1001tur@mail.ru">1001tur@mail.ru Данный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра.</a></p>

</div>

</div>  <!-- Закрытие тега для блока container -->

Рис. 16. Оформление нижнего колонтитула главной страницы

 

Определим правила для блока footer (табл. 23).

 Таблица 23

 Определение правил для блока «подвал» (footer)

Листинг кода

Комментарии

#footer {background : #485;

color : #fff; font-size : 70%;

padding : 5px;

clear : both; }

 

#footer a {color : #ff0;}

#footer a:hover {color : #f00; }

#footer p {padding : 2px;

                 text-align : center;}

 

.clearfloat {clear : both;}

Задан контрастный фон с оттенком зеленого цвета, текст – белым цветом. Самая нижняя строчка, в которую вписано (clear: both;) определяет, что обе стороны подвала должны быть пустыми. Поэтому «подвал» будет занимать всю ширину контейнера, которая расположена в нижней части. Изменен и цвет ссылок: они желтые в неактивном состоянии, но если навести курсор – становятся красными. Текст несколько мельче, поскольку нижняя часть, хоть и важна, не должна быть приоритетной.

Листинг кода из табл. 23 необходимо поместить в конец файла style1.css, сохранить его, а результаты просмотреть в окне браузера, загрузив в адресной строке файл index.html. Полученный результат должен соответствовать верстке сайта, представленной на рис. 13.

Comments