Верстка сайта. Проектирование дизайна, создание навигацииСтраницы сайта разрабатываются с применением технологии блочной верстки и с учетом совместимости с популярными браузерами – 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). Содержимым блока может быть что угодно – кусок текста, картинка, список, форма для заполнения, меню навигации и т. п. Рамка (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 Задание общих правил для страницы сайта
Таблица 17 Оформление «шапки» (header) главной страницы
Теперь снова откроем Главную страницу – файл index.html. Между тегами body добавляем следующий код:
<div id=”container”> <div id=”header”> </div>
В тело страницы здесь добавляется «коробочка» – контейнер, а уже в него помещается шапка, то есть применяется вложенность тегов. Заметим, что закрывающий тег для блока container пока отсутствует и будет закрыт лишь после внедрения всех элементов (блоков) веб-страницы, т. е. после блока footer («подвал»). Продолжим писать код для таблицы стилей (style1.css). После правила для шапки запишем правило для блока навигации. Это третий этап нашего алгоритма. Панель навигации горизонтальная и находится сразу под «шапкой» web-страницы. Для её реализации использован такой элемент, как маркированный список. Таблица 18 Правила для блока навигации
Из табл. 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 Оформление контента сайта
С помощью табл. 20 поясним правила для рисунков сайта (шаг 5) и добавим код, представленный в этой таблице в файл style1.css. Изображения обозначены соответствующими атрибутами img1, img2, venzel. Во всех правилах для каждого рисунка указаны размеры и отступы. Далее перейдем к шестому этапу – «Задание правил для блока «Список стран» (members)» (табл. 21). Отметим, что блок members входит в контейнер text, поэтому наследует правила данного контейнера. В конец файла style1.css добавляем код из табл. 21. Таблица 20 Определение правил для изображений
Таблица 21 Правила для блока «Список стран»
После определения правил для контента сайта (блок text), задания правил для рисунков и «Списка стран» (members) разместим все эти блоки на главной странице, дописав в неё следующий код:
Рис. 14. Фрагмент кода страницы index.html с основным контентом сайта
Перейдем к 7 этапу – оформлению блока новостей (news). Снова вернемся к файлу stile1.css, чтобы определить правила для полосы новостей (табл. 22). Таблица 22 Оформление блока новостей (news)
Теперь согласно заданным в файле 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)
Листинг кода из табл. 23 необходимо поместить в конец файла style1.css, сохранить его, а результаты просмотреть в окне браузера, загрузив в адресной строке файл index.html. Полученный результат должен соответствовать верстке сайта, представленной на рис. 13. |