Создание сайта. Часть 3: HTML, CSS
версия для печатиОчередная статья серии, посвященной сайтострою. Полное содержание серии - в конце статьи.
Сейчас у вас есть схематичный дизайн, разрисованный в одном файле. Прежде чем раскидать его на части, нужно разбораться в HTML и CSS. Это два первых и минимальных знания, которые вам следует получить, занимаясь сайтостроем. По этим темам написаны толстые книги, множество статей в инете, и даже сайты-справочники. Все читать не нужно :) Поехали..
Сначала только HTML. Прочтите любую вводную статью по html или первые пару глав в соответствующей книге. Сейчас вам нужно получить представление о том, как строится html-страница, общие принципы ее создания. Все остальное будете узнавать из справочников по мере необходимости. За справкой я обычно хожу в htmlbook.ru и иногда бываю на xiper.net
Сразу можете почитать про следующие html-теги: html, head, body, table, tr, td, div, img, hr, a, p, i, b, u, span, br. Заучивать все их свойства не нужно, по ходу дела само запомнится.
Про теги почитали, представление об HTML получили. С чего начать свою первую web-страницу? Нет, не с тега <html>, а с указания DOCTYPE. Если еще не знаете, что это, идем в "Верстку веб-страниц" В.Мержевича (см. отсылку в предыдущей статье темы), читаем главу "Режимы браузеров" (с.86). Прочитав, решите, какой доктайп вы будете использовать, пишите его на всех своих страницах и больше не меняйте. Смена доктайпа на уже готовом дизайне может привести к разрыву шаблона.
Кроме доктайпа полезно на своих страницах явно указывать кодировку текста, т.к. не все браузеры одинаково умные. Например, так:
<head>…
<META http-equiv='content-type' content='text/html; charset=utf-8'>
…
</head>
Подробнее о meta-тегах почитайте в Википедии, может сразу еще что-то добавите на свои страницы.
Самые популярные кодировки в рунете: windows-1251 и UTF-8. Об этом тоже немало слов написано, почитайте в инете. Я предпочитаю windows-1251, т.к. текст в этой кодировке меньше места в байтах занимает и мне достаточно поддержки только двух языков.
[UPD] Выбор кодировки в моем случае оказался ошибочным. После смены php-редактора и ОС мне эта win-1251 теперь боком выходит.
Где-то на этом этапе у вас должен возникнуть вопрос "А в чем писать исходный html-код?". Я предлагаю использовать Notepad++. Это обычный блокнот с большими возможностями. Главная его полезность – подсветка кода. По началу разноцветный текст сбивает с толку, но в последствии вы привыкните. На заметку: в сайтостроении вам предстоит пользоваться несколькими языками программирования. У всех свой синтаксис, но просматривать исходники удобно именно с подсветкой кода.
Заниматься просто написанием html-страниц, типа "Hello, word!" скучно и бессмысленно. Можете потренироваться, но не затягивайте.
Двигаемся дальше. Теперь найдите в инете любую вводную статью по CSS. Вам нужно получить общее представление, что это и зачем. В двух словах, CSS нужен, чтобы описывать стилистические свойства html-тегов более компактно и собрать их в одном месте. Получив общее представление, в будущем будете искать нужные данные в справочниках (те же ссылки, что для HTML, см. выше).
Вот теперь открывайте все ту же книгу по верстке и читайте ее полностью, разбирайтесь с примерами и переносите свой схематичный дизайн на HTML/CSS. На данный момент уже достаточно широко используется HTML5 и CSS3. Есть всякие тонкости относительно не полной поддержки браузерами, остаются еще и старые бродилки, не воспринимающие новые плюшки этих стандартов. Но вам полезно знать и применять все, что найдете по последним версиям HTML/CSS. Объемные книги я бы не рекомендовал, достаточно статей типа "Новые теги" и примеров использования. Посмотрите на htmlbook.ru, их там есть несколько :) здесь и здесь
В процесс верстки вероятно у вас возникнет вопрос, что выбрать, таблицы или слои. Это не суть важно :) В книге подробно все рассказано, а я использую то, что удобнее. Основные блоки на слоях, внутри – по обстоятельствам. Можно делать вложенность слоев и таблиц друг в друга по нескольку раз.
Возможно вы еще не знаете, подскажу: все описания стилей можно, и чаще всего нужно, выносить в отдельный файл(ы). Т.е. все, что внутри парного тега <style>..</style> переносите, например, в common.css. Тогда подключение файла стиля к html-странице описывается в секции <head> так:
<link href="common.css" rel="stylesheet" type="text/css" />Расскажу вам еще кое-что о средствах web-дизайнера. В браузерах есть плагины, позволяющие просматривать исходный код страницы и вносить в него изменения. В Opera – Dragonfly (ПКМ по странице > Проинспектировать элемент), в Firefox – Firebug (ставится как отдельный плагин), в IE – IE Developer Toolbar, IE Tester – DebugBar.
Самым удобным является Firebug. Скачивайте, ставьте, разбирайтесь с интерфейсом.
Главным источником информации по теме верстки для вас станут не книги, а чужие сайты 8-). Незаменимый Firebug вам в помощь. Ищите интересующий вас дизайн и разбирайте по полочкам, как он сделан. Учтите, что часть страницы может меняться динамически (через JavaScript) или вообще являть собой Flash-ролик. Тем не менее, я очень многое познал, проведя часы с Firebug под мышкой :-)
Правила хорошего тона в HTML
Из того, что вспомнилось:
- пишите теги маленькими буквами, значения свойств в кавычках. Такой синтаксис воспринимается легче; он ближе к более строгому XHTML. Привыкните, будет легче перейти.
- пишите title в тегах <a>. Это удобно для пользователя. Текст из title показывается во всплывающей подсказке.
- пишите alt в <img>. Пока/если картинка будет грузиться, на ее месте будет этот текст. Так же некоторое удобство для посетителя.
- используйте <strong> и <em> для логического выделения текста, а <b>и <i> — для физического. Это вопрос семантики HTML. Поищите в инете, что это значит.
CSS хаки и условные комментарии IE
Как-то так получилось, что я не сразу узнал об этом. Когда начал сталкиваться в первыми разрушениями дизайна, долго искал решения. Книгу по верстке Мержевич тогда еще не написал. Было много вопросов и проблем, в частности с Этим Самым Конем Ослом Деревянным. Он и сейчас меня раздражает, но уже меньше.
CSS хаки - это специальный синтаксис стиля CSS, который понимает только один определённый браузер. Очень полезная вещь, когда создаешь кроссбраузерный дизайн.
Условные комментарии. Обычный комментарий в коде HTML пишут между элементами <!-- и -->. Браузер Internet Explorer кроме того поддерживает специальный синтаксис вида <!--[if условие]>...<![endif]-->, который называется условным комметарием IE. Подробнее читайте на любом сайте-справочнике из указанных ранее, так же в книге по верстке и на просторах инета.
Я не буду перечислять все известные CSS хаки, поиск по сочетанию выдаст 100500 страниц. Важно знать следующее: хаки не проходят W3C-валидацию, условные комментарии – проходят. Я решил не ориентироваться в разработке дизайна на валидность кода, поэтому успешно применяю все доступные средства.
Организация каталогов сайта
Немного отступим от темы статьи, т.к. с этим моментом желательно определиться уже сейчас. Помню, это был единственный вопрос, на который я не нашел ответ в инете :) Нет жестких требований к организации каталогов сайта, она может быть произвольной до определенной степени. Я предлагаю такую организацию:
| \admin | админка (все, что нужно скрыть от посетителей) |
| \inc | части дизайна (шапка, подвал и т.п.) |
| \css | файлы стилей, вынесенных из html-кода |
| \files | любые файлы контента (картинки, архивы, документы) |
| \images | картинки дизайна |
| \js | пользовательские скрипты JavaScript |
| index.htm | главная страница сайта |
В админку будете складывать свои инструменты для работы на сайте. Как закрыть каталог паролем, расскажу в статье, посвященной Apache. Зачем каталог "inc", прочитаете в следующей части, в разделе "Сборка страниц через SSI". Пока просто заведите его и все.
Внимание: дальнейший текст может оказаться черезмерно сложным для новичка, но нет предела совершенству ;-).
CSS свойство z-index
Пишу о z-index особо, т.к. сам не раз пытался понять причину проблемы с этим свойством, а именно – почему оно не работает?! Все оказалось проще некуда, но я не находил ответа в соответствующих тематике материалах :(
Цитата из книги Дэвида Флэнагана "JavaScript Подробное руководство" (2008), с.378:
"Когда два или более элементов перекрываются, они прорисовываются в порядке от наименьшего к наибольшему значению z-index, т. е. элемент с наибольшим значением z-index перекрывает все остальные. Обратите внимание: порядок наложения определяется значением z-index только для смежных элементов (т. е. для дочерних элементов одного контейнера). Если перекрываются два несмежных элемента, то на основе индивидуальных значений атрибутов z-index нельзя указать, какой из них находится сверху. Вместо этого надо задать атрибут z-index для двух смежных контейнеров двух перекрывающихся элементов (родительских контейнеров)."
Специфичность правил в CSS
По материалам одноименной статьи.
Как вы наверно уже знаете, правила CSS наследуются дочерними элементами. Т.о., например, шрифт описанный для селектора table будет применен для всех ячеек таблицы, если нет других правил. Вообщем полагаясь только на наследование, я получил загадочное поведение в таком стиле:
table.ee td{text-align:center;}
td.leftalign{text-align:left; padding-left:15px;}
Хотел получить выравнивание текста по центру во всей таблице, кроме ячеек с классом "leftalign". И конечно не получил.
Суть в том, что при разборе CSS браузер определяет приоритет конкретного правила в три этапа.
Этап 1, по источнику и важности, в таком порядке:
- user-agent declarations (значения по умолчанию)
- user normal declarations (пользовательские настройки стилей, прописанные в браузере)
- author normal declarations (CSS-файлы и атрибуты в html-тегаx)
- author important declarations (приписка !important после описания свойства)
- user important declarations
Чем правило ниже в этом списке, тем больше у него приоритет. Т.е. заданные стили сайта (автора) перекрывают обычные пользовательские стили, но перекрываются важными стилями автора и пользователя. Стили пользователя (наиболее приоритетные), как правило, никто не использует, но при желании юзер может переключиться на них. Я сам иногда использую такую возможность, если дизайн какого-то сайта совсем уж «вырвиглаз» :D
Этап 2, сортировка по специфичности, которая расчитывается как 4-хзначное число ABCD, где:
- A принимается равной 1, если правило находится в атрибуте style в html-теге и 0 в остальных случаях. Поэтому "inline"-описания стилей имеют больший приоритет, чем отдельные описания в секции <head>.
- B - число id-атрибутов в селекторе.
- C - число других атрибутов (включая классы) и псевдоклассов в селекторе.
- D – число имён элементов и псевдоэлементов в селекторе.
Объединив составляющие, получаем число в СИ с большой базой (понятия не имею, что это значит %)), но смысл такой: 1,0,0,0 приоритетнее чем 0,2,0,0. Т.е. можно было бы просто рассматривать число ABCD, как десятичное, а не вводить новые понятия про базу.
Примеры расчета специфичности:
| * | специфичность = 0,0,0,0 | |
| li | специфичность = 0,0,0,1. Один элемент | |
| li:first-line | специфичность = 0,0,0,2. Один элемент li и один псевдоэлемент first-line | |
| ul li | специфичность = 0,0,0,2. Два элемента | |
| ul ol+li | специфичность = 0,0,0,3 | |
| h1 + *[rel=up] | специфичность = 0,0,1,1.Один элемент h1 и один атрибут rel | |
| ul ol li.red | специфичность = 0,0,1,3. Один класс red и три элемента | |
| li.red.level | специфичность = 0,0,2,1 | |
| #specId | специфичность = 0,1,0,0 |
Стиль описан в html-теге:
style="some:thing;" специфичность = 1,0,0,0
Этап 3, правила с одинаковой важностью и специфичностью сортируются по позиции в CSS-файле. Чем ниже находится правило, тем выше его приоритет.
Исходя из изложенного получается, что мои CSS-правила имеют имеют разный специфический вес:
table.ee td (0,0,1,2)td.leftalign (0,0,1,1)
И получается, что первое правило перекрывает второе по специфичности, поэтому этап 3 (порядок следования) уже неважен. Исправить ситуацию можно так:
table.ee td (0,0,1,2)table.ee td.leftalign (0,0,2,2)
Теперь перевес по специфичности дает желаемый результат :)
Матрица картинок
Количество http-запросов влияет на скорость сборки страницы в браузере. А каждая ссылка на картинку в css-файле или html-коде – это запрос к серверу. Следовательно, чем больше отдельных картинок, тем медленнее собирается страница. Других файлов это тоже касается, но сейчас речь не о них. По возможности объединяйте картинки в одном файле, затем используете css-свойство background-position и явные указания размеров блоков. Тут главное, не перегнуть палку. Для примера, обратите внимание на кнопки свернуть/развернуть в боковом меню этого сайта. Кнопки имеют 4 состояния, но все они нарисованы в одном файле. Так же посмотрите на смайлики комментариев или плагин соц.сетей в конце статьи – куча картинок сложена в два файла. И совсем сложный пример – дизайн сайта udf.su. Большая часть картинок дизайна собрана в один файл – sprites.png.
Такой подход к дизайну имеет обратную сторону: разрабатывать мартицы картинок сложно и долго, редактировать готовый дизайн тоже проблематично.
Есть еще одна тонкость, которую можно учитывать. Если картинки размещать вплотную друг к другу, тогда при масштабировании страницы средствами браузера дизайн может чуть-чуть съезжать. Чтобы этого избежать, делайте между соседними изображениями пробел в 1px. Посмотрите все тот же пример с кнопками меню. В первом варианте картинки были вплотную друг к другу и при масштабе 125% в IE8-9 на кнопке появлялась лишняя полоска слева. Это конечно некритичное замечание, но делать 1-пиксельный зазор не так уж и сложно, если дизайн еще в разработке.
[UPD] Нашел статью по теме ускорения загрузки сайта . Матрица картинок - это только один из способов разгона. Почитайте. Пусть не все будет понятно, но так вы изначально будете делать правильные страницы.
[1oo%, EoF]Остальные статьи серии:
1. Идея
2. Работаем над дизайном
3. HTML, CSS
4. Как работает интернет
5. Apache
6. JavaScript
7. PHP
8. MySQL
9. cookie и сессии
10. mod_rewrite
Понравилась статья? Расскажите о ней друзьям: