>>> Перейти на мобильный размер сайта >>>

Учебное пособие

Создание сайта

       

Верстка страниц сайта

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

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

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

Элементы на странице связаны тегами - операторами языка разметки страниц HTML. Язык HTML чрезвычайно прост, поэтому вы очень быстро и легко его освоите. В языке есть несколько сотен тегов, однако, в своей повседневной работе вы вряд ли будете использовать более 70-80 из них. Запоминать теги, конечно не обязательно, - в процессе работы вы, со временем, выучите их, однако знание тегов сделает вашу работу значительно комфортнее. Старайтесь соблюдать стандарт, установленный консорциумом WWW: HTML 4.0 или HTML 3.2, и у ваших посетителей, а значит, и у вас возникнет значительно меньше проблем.

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

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

Внимание! Все названия файлов, каталогов могут писаться только латинскими буквами, без пробелов и знаков препинания. Вы можете использовать неограниченное количество букв и цифр, разделяя их знаками "-" и "_", а также точкой.

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

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

Например, вы хотите поставить ссылку между файлами

www.work/site/about/owner.shtml
www.work/site/advertising/job.shtml

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

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

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

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

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

SSI - это очень мощный инструмент, который способен реально помочь вам в работе над проектом, поэтому нужно сразу ориентироваться на его использование. Следовательно, даже если вы не собираетесь использовать возможности SSI прямо сейчас, все равно имеет смысл дать всем страничным файлам расширение SHTML, а не HTML, чтобы потом не пришлось переправлять все ссылки. Файлы переобозвать, понятно, просто, но ссылки на них стоят на других страницах, а может быть, и на других серверах, - пойди найди их все и исправь. Поэтому лучше сразу использовать SSI, тем более, что это очень просто.

Директивы SSI вставляются в файл в виде служебного тега "комментарии". Самые распространенная директива SSI, которую вы можете начать использовать прямо сейчас это include - которая подставляет кусок вырезанного кода и так-же может вставлять результаты работы сторонней программы.

Кроме того, сам файл стал короче, ведь оглавление - это не одна строка, а мы заменили все одной строкой, убрав нагромождения тегов в отдельный файл (на пример 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 инструкции, чтобы браузеры не сочли их отображаемыми данными. Описания могут, теоретически, находиться в любом месте страницы, но предпочтительно снести все записи в отдельный файл (обычно style.css). В отличие от SSI, CSS - это инструкции для браузера, а не для сервера, причем, далеко не все браузеры в состоянии грамотно отобразить их, а, следовательно, не стоит удивляться тому, что не все пользователи смогут увидеть все красоты вашего сайта. Самая распространенная схема использования CSS - это переопределение стандартного ряда стилей H1-H6 и одновременное создание нескольких дополнительных стилей с собственными названиями. В результате, вы используете при верстке страниц стандартные стили, которые при открывании страницы пользователем выглядят в соответствии с заданными вами директивами. Если же браузер пользователя не в состоянии грамотно интерпретировать CSS инструкции, то человек увидит просто стандартные стили. Таким образом, сайт пострадает не катастрофично и все равно будет вполне читаемым, конечно, если вы использовали стили по назначению: H1 - самый крупный заголовок, H2 - немного помельче и т.д.

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

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

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

 

Top.Mail.Ru
Top.Mail.Ru