10
2012
Вёрстка xhtml/css шаблона. Урок 1
Автор
Всем привет! Как и договаривались, буду писать об вёрстке xhtml/css шаблонов. Возможно Вы не знаете, что такое «вёрстка» и какие обязанности «верстальщика».
Вёрстка веб-страниц — процесс создания веб-страниц в текстовом редакторе, на основе предоставленных дизайнером макетов в формате PSD или CDR. Результат работы, это собственно веб-страница.
Верстальщик — человек, который занимается вёрсткой веб-страниц. В задачи верстальщика входят:
- создание каркаса веб-страницы с помощью соответствующего языка разметки. Таковыми могут быть, например, HTML, XHTML, XML.
- оформление ранее созданного каркаса страницы с помощью встроенных средств языка разметки, либо же с помощью каскадных таблиц стилей CSS, для получения максимально точного отображения web-страницы в соответствии с дизайном.
При этом он часто пользуется следующим ПО:
- текстовый редактор для написания и редактирования кода
- графическая программа для так называемой «нарезки» графического макета, полученного верстальщиком от веб-дизайнера
Что требуется от верстальщика?
- Валидность HTML-вёрстки — это её соответствие стандартам организации World Wide Web Consortium (W3C). Отсутствие ошибок в вёрстке документа — один из основных показателей качества вёрстки. Автоматическая проверка вёрстки на ошибки может быть проведена как с помощью онлайн сервиса W3C, так и различными программами «валидаторами». Разные версии спецификации HTML предполагают различный синтаксис, поэтому тест верстки на валидность должен обязательно учитывать её Document Type (DOCTYPE).
- Кроссбраузерность вёрстки — одинаковое или максимально точное отображение сайта в разных браузерах, таких как Opera, Mozilla FireFox, Google Chrome, Apple Safari и Internet Exlorer. Часто верстальщик использует использует «хаки» — правило стилей, которое предназначено для конкретного браузера или группы браузеров.
- Семантика веб-страницы — интуитивно-понятное отображение элементов интерфейса страницы, при отключении стилей, скриптов и картинок. На данный момент развития Интернета, данное правило не актуально.
- Оптимизация страницы — процесс уменьшения запросов к серверу, размера скриптов и картинок, с целью сэкономить время загрузки страницы.
- СЕО-оптимизация страницы — использование правил СЕО-оптимизации. Например: h1 использовать один раз, тегом h2 и strong выделять ключевые слова, в картинки прописать атрибуты alt и title, и.д.
Возвращусь к DOCTYPE. Что это за магическое слово? Эта аббревиатура расшифровывается как «Document Type», она нужна для определения спецификации страницы. Например Вы хотите создать страницу на html5, то вам нужно в самом начале документа вставить <!DOCTYPE html>. Это поможет браузеру (и валидатору), точно определить какой html и его версию Вы используете. Всего таких спецификаций немного:
| Document Type | Описание |
|---|---|
| XHTML 1.0 | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
Для HTML-документов, в котором применяется строгий синтаксис XHTML. |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Для HTML-документов, в котором применяется переходной синтаксис XHTML. |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
Для XHTML-документа, в котором содержаться фреймы. |
| XHTML 1.1 | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. |
| HTML 4.01 | |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
Для HTML-документов, в котором применяется строгий синтаксис HTML. |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
Для HTML-документов, в котором применяется переходной синтаксис HTML. |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
Для HTML-документа, в котором применяются фреймы. |
| HTML 5 | |
<!DOCTYPE html> |
Для всех документов. |
Я использую XHTML 1.0 Transitional. Проверенный и надёжный. Определившись с типом документа, давайте поговорим о «Фиксированной вёрстке» и «Резиновой вёрстке». В чём отличия? Судя по названию должно быть понятно. Фиксированная вёрстка используется чаще, её суть в том, что сайт имеет одну фиксированную ширину (обычно это ровно 1000 пикселей), и отображается на разных мониторах одинаково. Резиновая вёрстка — понятие совсем иное, суть в том, что сайт отображается на всю ширину монитора. Это удобней, скажете Вы, но не все макеты можно «зарезинить». Это связанно со множеством факторов самого макета. Например неумелый дизайнер сделал фон с тройным градиентом, под углом 34o и сказал заказчику, что макет резиновый... Но вот верстальщика обычно никто не спрашивает, потом сиди и думай, как его сделать «резиновым»! Конечно можно воспользоваться новыми фишками CSS3, но это невалидно (из-за хаков и несовместимости с некоторыми браузерами) и плохо, если человек зашел со старого браузера, ещё такие «фишки» хорошо нагружают процессор пользователя.
Разобравшись с этим, давайте разберём, что такое блочная и табличная вёрстка. Это больная тема для верстальщиков. Одни любят блочную — из-за простоты контроля блоков. А другие — табличную — из-за простоты реализации шаблона. Я лично, когда начинал, использовал табличную вёрстку, так проще. Но со временем понял всю мощь блочной(в ней используют тег DIV, и иногда называют DIV-ная) вёрстки, и уже никуда от неё не отойду. Для начинающих будет сложно реализовать, а особенно понять суть такой вёрстки. Но я постараюсь изложить понятным языком, без терминологии, которой по сути и нет.
Последнее о чём я бы хотел поговорить в этом уроке, это хаки. Хак — уникальное правило в CSS, которое понимает конкретный браузер или группа браузеров. Что это значит? Наверно каждый начинающий верстальщик, смотрит свой сайт в первую очередь Google Chrome или FireFox последних версий. Но вспоминая о кроссбраузерности, откройте то что Вы там «накодили» в IE скажем восьмой версии (главное не IE6, что бы не отбить желание верстать). Возможно где-то, что-то «вылезет», «поплывёт», «пропадёт». Конечно же можно полезть в CSS и поправить, обновить сайт в IE и всё хорошо, теперь откроем Хром, Оперу и ОгнеЛис... Смотрим, везде криво... Знакомая история. Вот зачем нужны хаки, что бы не трогать общий стиль для нормальных браузеров, и указать этому Ослу (ИЕ) то, что несомненно поймёт именно он. Если сейчас Вы что-то не поняли, возникло больше вопросов, чем ответов. Не беспокойтесь, это теория, когда я начну выкладывать практический материал, будет всё намного понятней, ведь главное то, как можно применить всё это на практике. Также можете спросить меня, по поводу вёрстки в комментариях, я отвечу.
Подпишитесь на RSS и ждите новых уроков по вёрстке, будет интересно. Удачи в изучении!
Похожие сообщения
Об авторе:
Люблю программирование, это больше чем хобби. Считаю это искусством. Ведь нужно проявить креативность при решении поставленной задачи. Программист в процессе создания программ или скриптов, должен получать удовольствие от написания кода. В этом случае конечный продукт будет успешным и профессиональным.
Не останавливайтесь, продолжайте писать за верстку — мне нравится Ваш стиль, он очень понятен и создается не такое впечатление как на других сайтах о верстки, что «Все болваны, а я ОДИН буду верстать».
Уверен, что если и будете продолжать писать развернуто и без заумных фраз, то обретете массу читателей.
Спасибо, за блог!
Спасибо за отзыв!