Блочная верстка. Урок 2. Макет и структура web-документа.

Прежде чем приступить к верстке веб-страницы, нужно определиться, что именно должно получиться в итоге. Для этого необходимо подготовить макет страницы. Вообще, лучше чтобы эту часть работы сделал профессиональный дизайнер. Если вы и сами неплохой дизайнер, можно сделать его самостоятельно в редакторе Adobe Photoshop. В крайнем случае, просто нарисовать эскиз на листе бумаги.

Если вы все же решили нарисовать макет самостоятельно, обратите внимание на следующие моменты:

• В макете веб-страницы всегда самое важное место занимает текст. Любой текст в макете, не относящийся к графическим элементам, должен быть создан без использования сглаживания, это предотвратит искажение первоначального вида макета при верстке.
• Если макет предполагает резиновую верстку, обратите внимание на элементы, за счет которых будет заполняться освободившееся пространство.
• Не стоит забывать, что дизайн сайта это не только красивая картинка. Особое внимание следует уделить оформлению контента.

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

Давайте начнем писать HTML-код страницы. Для его написания можно пользоваться абсолютно любым удобным для вас текстовым редактором, даже блокнотом. На мой взгляд, наиболее удобной программой для этих целей является GridinSoft Notepad. Для написания HTML-кода вполне хватит и бесплатной Lite версии. Правда, Lite версия, в отличие от профессиональной версии, не имеет русского интерфейса, но это не критично. Впрочем, профессиональная версия стоит всего $5, это не так уж много.

Вначале укажем, какого стандарта мы придерживаемся. Любая страница, сверстанная блочным методом, должна в самом начале содержать определение типа документа, указанное в тэге DOCTYPE. Как я писал ранее, это нужно, чтобы «браузер» знал, как читать и отображать веб-страницу. Исходя из учебных целей, мы выберем урезанную версию самого строгого стандарта, совместимую с наибольшим количеством устройств (программ) отображения информации – XHTML 1.1 Basic.

Выглядит сие определение следующим образом:

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

В стандарте определена структура веб-документа. Согласно ей, впишем ещё одну хитрую строчку:

Впрочем, атрибуты тэга указывать необязательно, но все же это является хорошим тоном. Немного поясню. Атрибут lang указывает язык содержимого веб-страницы, в двухбуквенном формате, соответствующем стандарту ISO 639-1. Так как мы придерживается формата XHTML, мы должны указать язык в соответствии с этим форматом, т.е. записать атрибут xml:lang="ru", который относится к пространству имен, определенному в документе, расположенном по адресу http://www.w3.org/1999/xhtml, указанном нами в атрибуте xmlns. Учитывая, что старые браузеры, не поддерживающие XML, не поймут и попросту проигнорируют этот атрибут, специально для них, впишем еще и атрибут lang, с тем же значением.

Вообще, учитывая, что мы используем формат XHTML, первой строкой нашего документа, должна была бы быть строка, содержащая нечто вроде <?xml version="1.0" encoding="windows-1251"?>, которая определяла бы номер версии XML и кодировку документа, а записанная нами строка – второй. Однако, такие браузеры, как замечательный Internet Explorer 6, а также работающие в режиме совместимости с ним, требуют, чтобы в первой строке веб-документа, придерживающегося стандарта, был именно тэг DOCTYPE. В противном случае, браузер попросту перейдет в режим совместимости с дикими стандартами второй половины 90х.

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

Мы впишем в документ следующую информацию о нашей страничке:

Первый мета-тэг указывает кодировку документа. Рекомендую всегда указывать его первым, во избежание проблем с безумными браузерами. В Рунете желательно использовать кодировки Windows-1251 или UTF-8. Иначе, какой-нибудь Вася Пупкин, с его Internet Explorer’ом 6 версии, вместо красивого и грамотно написанного текста увидит непонятные кракозябры.

Тэг title содержит заголовок веб-странички. Именно его содержание будет написано на вкладке браузера, когда пользователь будет просматривать нашу страничку. Замечу, что поисковые системы более уважительно относятся к страницам, в которых присутствует этот тэг, и в нем указан вменяемый текст, а не название файла, такое как, например, index.html.

Второй мета-тэг задает описание веб-страницы. Содержание этого тэга должно быть показано в результатах поиска, выдаваемых поисковыми системами, такими как Яндекс или Google. Впрочем, иногда поисковые системы могут проигнорировать эту информацию.

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

Последние два тэга link указывают связь с файлами, описывающими стили CSS, которые будут созданы нами позднее. Атрибут media, определяет тип устройств, которым следует использовать указанный файл стилей, будь то экран монитора, принтер, либо какой-нибудь шпионский телетайп. Если этот атрибут не указан, то считается, что устройством вывода является монитор. Атрибут media может содержать следующие значения:

• all – всех типов устройств;
• print – для принтера;
• handheld – для портативных устройств;
• screen – для монитора, значение по умолчанию;
• projection – для проектора;
• braille – для устройств, выводящих информацию по системе Брайля, которые предназначены для слепых людей.
• speech – для синтезаторов речи.

Можно указывать несколько значений через запятую. Вообще, написание различных стилей для разных устройств, очень важная вещь. Например, если кто-то хочет распечатать нашу страничку, то ему, в большинстве случаев, нужна только полезная информация, а не навигация, рекламные баннеры, или картинки для кнопок и заголовков. Атрибут rel указывает, что подключаемый файл является таблицей каскадных стилей. Атрибут type обозначает тип файла, записанный в формате MIME, для файлов стилей это text/css.

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

Здесь мы вписали открывающий и закрывающий тэги body. Этот элемент является контейнером, содержащим все элементы, которые имеют визуальное представление. Позднее, мы разместим между этими тэгами код остальной код нашего документа.

Теперь структура нашего веб-документа соответствует определенной в стандарте. Осталось лишь сохранить наш документ. При сохранении дадим ему имя index.html. Почему именно index.html? Не вдаваясь в подробности, скажу, страницу именно с таким именем начнет искать сервер в первую очередь, если пользователь в браузере укажет только адрес нашего сайта.