Складываем кубики
Верстка

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

Сначала следует разобраться в структуре сайта. Узел состоит из отдельных страниц, где каждая страница описывается одним персональным файлом-сборкой и некоторым количеством дополнительных файлов-включений (структура очень похожа на файл Quark). То есть, для каждой страницы у вас должен быть один общий файл (Htm, Html, Shtml, Dhtml, Xml и т.д.), который описывает структуру страницы, а к нему прилагаются картинки, возможно, программные модули, дополнительные модули, таблицы стилей и прочее, что может понадобиться на этой странице. Очень важно - на каждую страницу сайта должен быть создан свой, отдельный и единственный файл-сборка, - именно этот файл и будет выдаваться сервером в ответ на запрос от браузера, именно на него вы будете ставить ссылки в навигации по сайту.

Элементы на странице связаны тегами - операторами языка разметки страниц HTML. В отличие от других языков описания страниц (PostScript, PCL и пр.), HTML чрезвычайно прост, поэтому вы очень быстро и легко его освоите. В языке есть несколько сотен тегов, однако, в своей повседневной работе вы вряд ли будете использовать более 70-80 из них. Запоминать теги, конечно не обязательно, - в процессе работы вы, со временем, выучите их, однако знание тегов сделает вашу работу значительно комфортнее. Куда печальнее другое: язык HTML имеет несколько стандартных версий, из которых самые распространенные сейчас - это 3.0, 3.2 и 4.0. Следует учитывать, что чем старше версия языка, теги которого вы используете, тем старше версия брузера нужна для его корректного восприятия (номер версии браузера соответствует номеру версии понимаемого им HTML), конечно, пользователей IE 3 и NN 3 уже практически не осталось, но они, тем не менее, есть. В связи с этим, старайтесь соблюдать стандарт, установленный консорциумом WWW: HTML 4.0 или HTML 3.2, и у ваших посетителей, а значит, и у вас возникнет значительно меньше проблем.

Между собой отдельные страницы узла связаны гиперссылками, которые задаются специальными тегами. С помощью гиперссылок можно связать не только любые две страницы, но и вообще два произвольных объекта, так, чтобы при щелчке на первом, браузер переходил на второй. Именно таким образом организуется оглавление, если оно расположено на одной странице с текстом.

Сайт в Интернете практически всегда располагается на удаленном сервере, который может работать под одной из версий Unix или под NT, причем первый вариант встречается значительно чаще. То есть, если вы покупаете хостинг, о чем я расскажу несколько позже, или располагаетесь на бесплатном, не оговаривая ОС сервера, то, с вероятностью 99%, ваш сайт будет располагаться на сервере с ОС Unix. Если ваш сервер расположен на Unix-сервере, то следует быть очень внимательным с названиями файлов и ссылками на них, поскольку Unix различает прописные и заглавные буквы и воспринимает их, как разные, следовательно, ссылка на страницу Beretta.html, записанная как beretta.html, будет неработоспособной.

Существует два основных варианта создания HTML-страниц. Первый - это работа с техническими редакторами, такими как Home Site, Hot Dog, Ultra Pad и др. (при необходимости можно использовать любой текстовый редактор, но по ряду причин удобнее использовать специализированные) В таких редакторах вы самостоятельно пишете код, видя перед собой именно текстовую страничку с тегами. Конечно, редактор поможет вам в написании тегов, проверит за вами строгость кода, даст посмотреть, ваше творение в окне браузера, однако основная работа будет состоять именно из скрупулезного написания, проверки и подгонки тегов. Второй вариант - это WYSIWYG редакторы, с помощью которых вы создаете визуальную картинку вашей страницы, то есть, имеете дело непосредственно с блоками информации, которые произвольно располагаете на странице, как это делается, например, в Word или Page Maker. Самым известным в этой области редактором является, пожалуй, Front Page производства Microsoft, а самым лучшим (по отзывам многих дизайнеров) - Macromedia Dream Weaver. Последний значительно менее популярен в силу своей дороговизны: в сравнении с бесплатным Front Page (версии '98 и старше уже не бесплатны), Dream Weaver стоимостью более 200 долларов выглядит очень дорогой игрушкой.

Принципиальная разница между этими двумя методами только в подходе: вы либо "делаете" страницу, либо "программируете" ее. Соответственно, дизайнерские вещи, наверное, проще делать в WYSIWYG редакторах, тогда как скоростная верстка - это удел Home Site и подобных ему. Отсюда вытекают и особенности той или иной верстки: программирование всегда более точная, более структурированная работа, чем визуальное редактирование. Споры по поводу того, какой редактор лучше использовать, вспыхивают каждые насколько месяцев с новой силой, однако разницы между подходами, кроме вышесказанной нет, поэтому выбирайте тот редактор, который вам больше по вкусу. На мой взгляд, будущее за визуальными редакторами, как это произошло в допечатной подготовке (кто помнит сейчас первую Ventura, которая именно программировала странички?), и со временем редакторы типа Home Site будут вытеснены с рынка, как это произошло с DOS Ventura и др. С другой стороны, сам я работаю именно в Home Site, потому что в свое время мне это показалось более удобным.

Кроме двух вышеописанных способов для создания HTML-страницы можно использовать множество "посторонних" программ, которые умеют сохранять свои данные в этом формате. Из известных мне программ такой возможностью обладают: Page Maker 6-6.5, Corel 8-9, Office 97, Office 2000 (все программы). Пользоваться подобными возможностями следует с большой осторожностью, и, в любом случае, после программной генерации нужно вручную проверять получившийся код.

Какой бы способ вы ни избрали для дальнейшей работы (а может быть, и все сразу), я рекомендую вам обзавестись книжкой по языку HTML, а также книжкой по программе верстки, ежели таковая имеется (книжки можно посмотреть в разделе "Книжная полка"). Несмотря на наличие в Сети большого количества справочников и вспомогательных страниц, книгой почти всегда пользоваться значительно удобнее. В конце лекции вы найдете список рекомендованной литературы, я же в рамках этого курса не буду касаться непосредственно описания языка HTML, тем более, что руководств по нему более чем достаточно.

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

Файл титульной страницы должен называться index.html (или index.htm, shtml, dhtml и т.д.), т.к., именно файл с таким названием будет загружаться на компьютер пользователя при наборе в адресной строке адреса вашего сайта (вы же набираете, фактически, адрес директории, а не конкретный файл с путем). В очень редких случаях хостинг-провайдер может настраивать свой сервер на выдачу по умолчанию файла default.html, но это бывает так редко, что не стоит серьезного рассмотрения.

Некоторые трудности может вызывать гиперссылка, если файлы, между которыми нужно ее поставить, находятся в разных директориях. В этом случае нужно указать либо относительный путь по дереву каталогов к файлу, на который вы ссылаетесь или абсолютный путь (url). Первый вариант обычно предпочтительнее.

Например, вы хотите поставить ссылку между файлами
work/site/about/owner.shtml
и work/site/advertising/job.shtml
относительная ссылка будет ../advertising/job.shtml, то есть, мы сначала выходим из директории about, потом входим в директорию advertising, где лежит нужный нам файл. Если же путь получается очень длинный с большим количеством переходов, то, может быть, проще поставить абсолютную ссылку или ссылку от корня сайта (той директории, где лежит файл индекса), в последнем случае, перед первым каталогом ставиться прямой слеш:
/advertising/job.shtml (в данном случае предполагается, что каталог advertising является поддиректорией корневой директории сайта).

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

Кроме собственно языка HTML существует еще большое количество дополнений, которые призваны облегчить жизнь веб-мастеру и немного навести порядок на сайте. Есть среди них полезные, есть и вредные, но есть два дополнения, которые нужно использовать обязательно, даже если сейчас вы не видите, как они могут вам пригодится. Эти два дополнения - SSI (Server Side Inclusions) и CSS (Cascade Stile Sheets), оба они довольно простые, хоть и обладают совсем недетскими возможностями.

С помощью SSI вы можете включать в свою страницу любые необходимые вам фрагменты (тексты, картинки, счетчики, результаты работы программы и пр.) непосредственно на сервере. Это дает вам возможность загружать в заданное место страницы повторяющиеся элементы по всему сайту из одного источника. Хороший пример - оглавление - оно обычно повторяется на всех страницах узла и всегда одинаковое. Поставив директиву SSI, вы сможете хранить оглавление в отдельном текстовом (или HTML) файле, который сервер будет вставлять на каждой странице в указанное вами место. Такой файл гораздо легче исправить, если возникает такая необходимость. Представьте, что у вас 200 файлов, в каждом надо исправить оглавление и положить на сервер, а тут - поменял текст в одном файле и положил на сервер за несколько секунд. Кроме того, при большом объеме сайта можно значительно выиграть в дисковом пространстве, которое вам потребуется, оно, конечно, сейчас почти ничего не стоит, но вам, например, потребуется меньше времени на "заливку" файлов на сервер.

Как это делается? Существует ряд базовых директив (исполняемых команд) SSI, которые вы специальным образом включаете в свои страницы, а при запросе страницы компьютером пользователя, сервер сканирует ее на наличие директив и, если находит, то подставляет вместо них требуемые значения. Для того, чтобы сервер сканировал документ необходимо ему дать на то указание. Некоторые сервера сканируют все документы без разбора, другие - только те файлы, которые имеют расширение SHTML, причем, последних - большинство. Что именно будет сканировать сервер, зависит от его настроек, поэтому если у вас есть доступ к серверному ПО, то вы можете сделать так, как пожелаете, но если вы планируете арендовать хостинг, то рассчитывайте, что сканироваться будут только SHTML файлы.

Директивы SSI вставляются в файл в виде служебного тега "комментарии"

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

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

<table ...> (тег таблицы с параметрами - шириной, толщиной линий, фоном и пр.)
<tr><td> (открываем строку, потом ячейку)
Основной текст страницы
</td> (закрываем ячейку)
<td> (открываем ячейку)
Оглавление
</td> (закрываем ячейку)
</tr> (закрываем строку)
</Table> (закрываем таблицу)

Теперь, если оглавление у нас везде одинаковое, мы можем подставить его с помощью директивы SSI, а само оглавление поместим в файл ogl.txt, который будет вставляться в файл непосредственно перед его открытием на компьютере пользователя. В этом случае страница будет выглядеть следующим образом:

<table ...> (тег таблицы с параметрами - шириной, толщиной линий, фоном и пр.)
<tr><td> (открываем строку, потом ячейку)
Основной текст страницы
</td> (закрываем ячейку)
<td> (открываем ячейку)
<!--#include virtual = "ogl.txt"-->
</td> (закрываем ячейку)
</tr> (закрываем строку)
</Table> (закрываем таблицу)

И к этому будет прилагаться файл ogl.txt, хранящийся в той же директории, что и файл рассмотренной нами только что странички. Если же файл будет храниться в отдельной директории, то надо указывать относительный путь, как и при обычной гиперссылке - это мы уже разбирали выше. Посмотрим на получившийся результат: казалось бы ничего не изменилось, только поменялась одна строка, но теперь у нас оглавление в отдельном файле и, если нам придется добавить в него одну строку, то нужно будет поменять только один файл. Кроме того, сам файл стал короче, ведь оглавление - это не одна строка, а мы заменили все одной строкой, убрав нагромождения тегов в отдельный файл - с получившимся файлом будет гораздо легче работать.

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

<table ...> (тег таблицы с параметрами - шириной, толщиной линий, фоном и пр.)
<tr><td> (открываем строку, потом ячейку)
Основной текст страницы
<!--#include virtual = "ogl.txt"-->

Здорово, не правда ли?! А в файле ogl.txt у нас теперь храниться много всякой ерунды:

</td> (закрываем ячейку)
<td> (открываем ячейку)
Оглавление
</td> (закрываем ячейку)
</tr> (закрываем строку)
</Table> (закрываем таблицу)

Причем, обратите внимание, что и тег, закрывающий таблицу, тоже здесь. В итоге, у нас есть один файл шаблона, в который осталось только поместить основной текст и отформатировать его (расставить абзацы, выключки, ссылки и пр.), объем кода на странице сократился заметно. Такой файл будет сделан для каждой страницы, а также один файл ogl.txt, который содержит единое для всех оглавление и некоторое количество служебных тегов.

Второе важное дополнение - это каскадные таблицы стилей - CSS. Они позволяют определять и переопределять стили оформления текста, а также других элементов на странице. На самом деле, возможности CSS очень велики: используя эту систему вы можете задать оформление всего сайта, описав его параметры в одном единственном файле, а потом несколькими движениями мыши переделать все оформление, просто поставив другие параметры в файле-описании. Более того, существуют системы на основе CSS, позволяющие то же самое проделывать не только издателю, но и посетителям. Это немножко похоже на фокус. Если вы когда-нибудь игрались с Desktop Themes (штука такая в Control panel, меняющая оформление win) или загружали себе на компьютер шкурки (skins), то здесь нечто похожее: поменял один файл-описание на другой, и на тебе: совершенно другой сайт.

CSS оформляются в виде описаний: {название стиля = его значение} и точно также обрамляются знаками примечания, как и SSI инструкции, чтобы браузеры не сочли их отображаемыми данными. Описания могут, теоретически, находиться в любом месте страницы, но предпочтительно их размещать все вместе в заголовке станицы между тегами <head></head>. В отличие от SSI, CSS - это инструкции для браузера, а не для сервера, причем, далеко не все браузеры в состоянии грамотно отобразить их, а, следовательно, не стоит удивляться тому, что не все пользователи смогут увидеть все красоты вашего сайта. Самая распространенная схема использования CSS - это переопределение стандартного ряда стилей H1-H6 и одновременное создание нескольких дополнительных стилей с собственными названиями. В результате, вы используете при верстке страниц стандартные стили, которые при открывании страницы пользователем выглядят в соответствии с заданными вами директивами. Если же браузер пользователя не в состоянии грамотно интерпретировать CSS инструкции, то человек увидит просто стандартные стили. Таким образом, сайт пострадает не катастрофично и все равно будет вполне читаемым, конечно, если вы использовали стили по назначению: H1 - самый крупный заголовок, H2 - немного помельче и т.д.

При желании, если вы определяете большое количество стилей, вы можете снести все записи в отдельный файл (обычно default.css), который браузер будет автоматически забирать при заходе на сайт. Это, кстати, реально увеличивает скорость загрузки, при длительном нахождении на сайте, поскольку файл описания стилей загружается один раз и только в самом начале сессии, а вот подставляется оно во все страницы, следовательно, при указывании стилей в заголовке каждой страницы, вы каждый раз увеличиваете объем файла на лишний 1-2 килобайта. В случае, если вы используете отдельный файл стилей, он вызывается строкой в заголовке страницы <link rel="STYLESHEET" type="text/css" href="../css.css">, причем, если ваш файл стилей называется default.css, то IE 5 автоматически "выцепит" его и подставит ко всем вашим страницам на любую глубину от корня, где был найден файл стилей.

Ну вот, теперь вы можете менять стилистику всего файла, редактируя один текстовый файл. Кроме того, вы автоматически применяете один и тот же стиль оформления по всему сайту, пользуясь при этом привычными тегами. Использование CSS тем более желательно, что при оформлении заранее заданными тегами гораздо сложнее ошибиться и поставить кегль, например, на единицу меньше. Таким образом, используя CSS, вы можете не задумываться, какой именно тег здесь поставить, поскольку все шрифты и размеры у вас уже определены в таблице стилей и расписаны в макете!

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

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

[Назад] [Содержание] [Вперед]