02-018
УДК 004.738.5
Л67
Ллойд Йен
Л67 Создай свой веб-сайт с помощью HTML и CSS. — СПб.: Питер, 2013. — 416 с.: ил.
ISBN 978-5-496-00510-4
Благодаря этой книге вы научитесь создавать профессиональные сайты, которые будут легко обнов-
ляться и функционировать в любых браузерах. В этом вам помогут практические авторские примеры
использования популярных инструментов веб-разработки HTML и CSS.
Из книги вы узнаете:
— как профессионально разрабатывать сайты;
— как оформлять текст и управлять макетом страницы с помощью CSS;
— как создавать и оптимизировать графику для работы в Сети;
— как делать сайты интерактивными, добавляя на них формы;
— как внедрять поиск по сайту и страницы для обратной связи с пользователем;
— как отслеживать посетителей с помощью сайта Google Analytics;
— как добавлять на сайт потрясающие возможности благодаря HTML5 и CSS3;
— как применять диагностические и отладочные инструменты для поиска возможных проблем.
ББК 32.988.02-018
УДК 004.738.5
Права на издание получены по соглашению с Sitepoint. Все права защищены. Никакая часть данной книги не
может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских
прав.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как на-
дежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может
гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные
ошибки, связанные с использованием книги.
Предисловие . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
От издательства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Глава 1. Приготовьте инструменты!. . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Глава 2. Ваши первые веб-страницы . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Глава 3. Добавляем стили . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Предисловие . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Что такое браузер?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Для кого эта книга. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Чему вас научит книга. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Как вы будете учиться создавать собственный сайт . . . . . . . . . . . . 25
HTML, CSS, разметка… Азы терминологии! . . . . . . . . . . . . . . 26
Создание учебного сайта. . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Чего нет в этой книге. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Содержание книги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Где получить помощь. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Форумы SitePoint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Сайт книги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Рассылка издательства SitePoint. . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Подкаст SitePoint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Обратная связь . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Благодарности. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Оглавление 7
От издательства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Элемент html. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Элемент head. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Элемент title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Элемент meta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Другие элементы, входящие в head . . . . . . . . . . . . . . . . . . . 60
Элемент body. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Самая простая в мире веб-страница. . . . . . . . . . . . . . . . . . . 61
Заголовки и структура документа. . . . . . . . . . . . . . . . . . . . . 63
Абзацы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Для тех, кто любит списки. . . . . . . . . . . . . . . . . . . . . . . . . . 64
Комментарии в HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Символы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
2.2. Погружение в сайт . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Главная страница: начальная точка всех сайтов . . . . . . . . . 70
Разбивка страниц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Связь между новыми страницами. . . . . . . . . . . . . . . . . . . . . 86
Цитата (А кто это сказал?). . . . . . . . . . . . . . . . . . . . . . . . . . 89
Элемент сite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Элементы strong и em . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Небольшой перерыв . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
2.3. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Веб-доступность . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Форматирование рисунков
с использованием CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 184
идеи с других сайтов. Но затем я обнаружил, что все это было неправильно. Книги
давали мне советы, которые позже оказывались плохими, сайты создавались людь-
ми, изучающими те же книги и, следовательно, использующими подобные плохие
методы. Что же было не так?
В первые годы распространения Интернета, когда люди только начинали осваи-
вать технологии, публикуя свои домашние страницы или создавая сайты-визитки
для своих компаний, все разработчики быстро поняли, что возможности среды
ограничены. Потребность — мать изобретения, поэтому веб-разработчики начали
выдумывать разные трюки и выводить на веб-страницы технологии, совершенно
не предназначенные для этого. Развитие браузеров способствовало этому, добавляя
новые возможности для такой работы.
В то время было написано огромное количество книг на тему веб-дизайна и веб-
программирования. Кроме того, в Интернете предлагалось множество бесплатных
уроков. Многие из них основывались на том, что тогда казалось передовым опытом,
однако авторы были ограничены возможностями браузеров, которые по-разному
отображали одинаково написанные хорошие веб-страницы. Это вынуждало авторов
книг и уроков прибегать к злоупотреблению особенностями браузеров: например,
для верстки страниц использовались таблицы. Конечно, все это помогло многим
разработчикам создать их первую страницу в Интернете, но подобная неправильная
практика, применяемая на ранней стадии изучения, прочно укоренилась, и немало
людей по сей день использует эти неэффективные приемы.
Веб-разработчики во всем мире (включая меня) приобрели эти вредные при-
вычки и сейчас вынуждены отучаться от них. Несмотря на то что уже давно по
явились возможности избежать применения устоявшихся неправильных приемов,
многие люди создают некрасивые, медленно загружающиеся и неудобные в исполь-
зовании страницы, но не хотят менять свои привычки, полагая это слишком труд-
ным. Совсем как ученик плохого инструктора по вождению, который ездит с нару-
шением правил, потому что это долгое время сходило ему с рук.
С тех пор как несколько лет назад у меня на все это открылись глаза, я пытаюсь
переучить столько людей, сколько могу. Но новички по-прежнему учатся по старым
книгам, продвигающим все те же старые и неправильные идеи. Это просто должно
прекратиться, причем здесь и сейчас.
С этой книгой вы не приобретете ни одной плохой привычки.
Моя книга научит вас правильным способам разработки сайтов. Если есть пло-
хой метод решения какой-то задачи — «срезающий углы», чтобы сэкономить время,
но предлагающий неэффективные технологии, — я даже не буду вам о нем расска-
зывать. Даже в виде «впрочем, вы можете попробовать и вот так…». Нет необходи-
мости занимать этим вашу голову — таким образом я забочусь о вас!
Internet Explorer (или IE, как мы будем его сокращать отныне) — наиболее
распространенный браузер, в основном по той причине, что компания Microsoft
включает его в комплект операционной системы, начиная с Windows 95. Именно
через него огромное количество людей стало пользоваться Интернетом, и многие
до сих предпочитают Internet Explorer.
Однако есть и другие браузеры, которые вы можете использовать вместо Inter- ������
net Explorer. В последнее время набирает популярность Firefox1 — альтернативный
браузер c множеством интересных возможностей, отсутствующих в IE (на время
написания книги). Кроме того, он куда лучше Internet��������������������������
����������������������������������
Explorer�����������������
�������������������������
отображает неко-
торые веб-страницы. На момент выхода книги появился и за короткое время стал
очень популярным браузер Chrome компании Google (о которой вы наверняка
слышали). И �����������������������������������������������������������������
Firefox����������������������������������������������������������
, и Google������������������������������������������������
������������������������������������������������������
могут использоваться под операционными система-
ми Windows, Mac OS X и Linux, в отличие от Internet Explorer, который работает
только под Windows.
Скриншоты, которые вы увидите в этой книге, были сделаны из Firefox под
Windows 7, если не указано иное. Я очень рекомендую вам скачать и установить
Firefox���������������������������������������������������������������������
по двум причинам: он является кросс-платформенным и идеально поддер-
живает стандарты. Кроме того, советую вам выполнять в этом браузере упражнения
из книги.
Кроме Firefox или Chrome, можете попробовать и другие браузеры, которые
поддерживают веб-стандарты (о них мы очень скоро поговорим). Для пользовате-
лей Windows браузер Opera2 предлагает идеальную поддержку стандартов и уни-
кальный набор возможностей. Как и Firefox�����������������������������������
������������������������������������������
, Opera����������������������������
���������������������������������
— бесплатный браузер. Люби-
тели Mac также могут установить Opera или просто пользоваться браузером Apple,
установленным по умолчанию, либо Safari, который тоже отлично поддерживает
веб-стандарты. Набор ярлыков браузеров под Mac показан на рис. 0.2.
Возможно, вы полностью довольны своим нынешним браузером. Если вы поль-
зователь Windows и предпочли бы иметь дело с тем, что вам знакомо, то можете
продолжать работать в �������������������������������������������������������
Internet�����������������������������������������������
����������������������������������������������
Explorer��������������������������������������
. Так поступает множество людей, поль-
зующихся Интернетом.
1
http://www.mozilla.com/en-US/firefox/new/.
2
http://www.opera.com/download/.
24 Предисловие
Будьте уверены, что почти все описанное в этой книге будет работать в любых
известных браузерах, по вашему желанию и без каких-либо серьезных проблем.
Я сказал «почти»? Это потому, что до сих пор есть некоторые различия в том,
как в браузерах организована обработка новейших технологий, например CSS3.
Но и это нормально, если вы заранее знаете, где ждать различий. Я расскажу о них
в следующих главах — там не будет неприятных сюрпризов, гарантирую!
1
На момент перевода последняя версия — Firefox 12.0. http://www.mozilla.org/en-US/
firefox/all.html. — Примеч. пер.
Как вы будете учиться создавать собственный сайт 25
РАЗМЕТКА — НЕ КОД!
Разметка — не то же самое, что программный код. Часто люди ошибочно считают разметку
обычным кодом, но понятие кода куда более широкое. Используя программный код, вы мо-
жете создавать программы и делать веб-страницу более динамичной, в то время как размет-
ка просто определяет структуру страницы. Так что, если вы хотите удивить своих друзей и род-
ственников, различайте понятия кода и разметки. Видите, я же говорил, что буду учить вас
хорошим привычкам!
CSS — каскадные таблицы стилей (Cascading Style Sheets). При создании сайтов
мы будем использовать CSS и HTML вместе. CSS — язык, который позволяет
контролировать отображение страницы. Чуть позже мы поговорим о нем подробнее.
Пока достаточно, чтобы вы запомнили расшифровку аббревиатуры. Вы также
узнаете, что CSS, как и HTML, эволюционирует со временем. В этой книге мы
1
На русском языке здесь: http://ru.wikipedia.org/wiki/XHTML. Вообще, HTML и XHTML
основаны на языке XML, но XHTML ближе к нему, он более строгий, в нем не «проща-
ются» некоторые неточности, как в HTML. Например, в XHTML недопустимы незакры-
тые теги, что практически решает проблему кросс-браузерности и кросс-платформенно-
сти. — Примеч. пер.
Чего нет в этой книге 27
Содержание книги
Глава 1. Приготовьте инструменты! В этой главе вы убедитесь, что у вас есть
все инструменты, которые могут понадобиться для создания сайта. Я расскажу,
где вы можете найти нужные средства — совершенно бесплатные! К концу гла-
вы вы будете готовы приступить к работе над своим первым сайтом.
Глава 2. Ваши первые веб-страницы. Здесь вы узнаете, как создаются веб-
страницы. Вы исследуете HTML-код, усвоите базовые требования к каждой
веб-странице и изучите основные элементы, которые можно встретить на боль-
шинстве страниц. Затем вы попробуете создать веб-страницу самостоятельно.
Фактически к концу этой главы у вас будет готова основа вашего первого
сайта.
Глава 3. Добавляем стили. Здесь вы начнете наводить красоту на страницах,
которые создадите в главе 2. Вы узнаете, что такое CSS и чем хороша эта техно-
логия, а затем попробуете ее применить. По мере изучения главы вы увидите,
как преображается учебный сайт благодаря применению фонов и заливок, из-
менению цветов и шрифтов, созданию ссылок, изменяющих свой вид в зависи-
мости от того, открывал ли уже пользователь эти страницы.
Глава 4. Преображение с CSS. В этой главе продолжается изучение возмож-
ностей CSS по изменению цветов и стилей текста. Вы также узнаете, как менять
стили границ и компоновать страницу в целом. Мы рассмотрим все возможные
рамки, которые можно применить к таким элементам, как заголовки и абзацы.
Мы будем экспериментировать с пунктирными и сплошными границами, а так-
же с другими эффектами. Во второй половине главы вы узнаете, как использо-
вать CSS для размещения элементов на веб-странице — включая блоки навига-
ции — в любом месте экрана.
Глава 5. Начинаем рисовать! Используем на сайте изображения. Как понятно
из названия главы, она посвящена рисункам. Мы рассмотрим различия между
Содержание книги 29
Форумы SitePoint
Форумы SitePoint1 — это онлайн-дискуссии, где можно задать вопросы обо всем
связанном с веб-разработкой. Вы можете, конечно, и сами отвечать на вопросы
других. Так и работают форумы — одни люди спрашивают, другие отвечают, боль-
шинство делают и то и другое. Желание людей делиться знаниями делает сообще-
ство более сплоченным. Многие опытные веб-дизайнеры «зависают» здесь. Это
хороший способ изучить новую функцию, быстро найти ответы на вопросы да
и в общем получить удовольствие.
Сайт книги
Сайт размещается по адресу http://www.sitepoint.com/books/html3. Там доступно сле-
дующее.
Архив кода. В процессе обучения по книге вы постоянно будете встречать
ссылки на архив кода. Это простой ZIP-архив, который можно скачать. Там есть
каждая строка кода, приведенного в книге. Если вы хотите смошенничать (или
уберечься от лучезапястного синдрома), то идите по ссылкам и скачивайте ар-
хив2. Он также включает копию сайта Bubble Under, который мы будем исполь-
зовать в качестве примера на протяжении всей книги.
1
http://www.sitepoint.com/forums/.
2
http://www.sitepoint.com/books/html3/code.php.
Благодарности 31
Подкаст SitePoint
Приглашаю вас присоединиться к команде SitePoint ���������������������������
Podcast��������������������
для получения ново-
стей, интервью, мнений и свежих мыслей для веб-разработчиков и дизайнеров.
Мы обсуждаем самые последние новости веб-индустрии, представляем гостей, бе-
рем интервью у лучших специалистов в нашей области. Вы можете найти все под-
касты на сайте или подписаться через iTunes.
Обратная связь
Если не получилось найти ответ на форумах или вы просто хотите связаться с SitePoint
по какой-то другой причине, лучше всего написать по адресу books@sitepoint.com.
Наша система поддержки по электронной почте ответит на ваш вопрос или перешлет
его прямо нам. Предложения по улучшению и указания на любые ошибки, которые
вы найдете, особенно приветствуются. Кроме того, вы можете связаться со мной через
Facebook (но предупреждаю: я бываю там не слишком часто).
Благодарности
Несмотря на то что написание книги кажется сольным проектом, ее выход из печа-
ти стал возможен благодаря большому количеству людей. Ничего этого не было
бы, если бы однажды я не обнаружил сайт http://webmonkey.com — представленные
1
http://www.sitepoint.com/books/html3/errata.php.
2
http://www.sitepoint.com/newsletter/.
32 Предисловие
там обучающие материалы по CSS помогли мне прозреть, а также если бы не Джеф-
фри Зельдман (Jeffrey Zeldman), Молли Хольцшлаг (Molly Holzschlag) и Эрик
Мейер (Eric Meyer), чья новаторская работа очень помогла мне и многим другим.
Однако, если бы я взялся перечислять всех, кто вдохновлял меня последние не-
сколько лет, этот раздел был бы напечатан очень-очень мелким шрифтом. Ребята,
вы знаете, кто вы, продолжайте свое классное дело!
Я хотел бы отметить работу, проделанную Web Standarts Project1 (в которой
я тоже принимал участие), особенно команды InterAct на Web Standarts Curriculum.
Я хочу также передать привет моим коллегам из Britpackers — носите те штаны
Union Jack с гордостью, ребята!
Спасибо всем участникам SitePoint, которые помогали мне с выпусками каж-
дого из изданий этой книги все эти годы: это Саймон Мэки (Simon Mackie), Марк
Гарретт (Marc Garrett), Мэтью Мэгейн (Matthew Magain), Эндрю Тетлоу (Andrew
Tetlaw), Джорджина Лэдлоу (Georgina Laidlaw), Джулиан Кэрролл (Julian Carroll),
Келли Стил (Kelly Steele), Алекс Уокер (Alex Walker), Лиза Лэнг (Lisa Lang) и Том
Мьюсез (Tom Museth).
Наконец, спасибо Манде за понимание во время дедлайнов, когда я практически
выпадал из цивилизации, чтобы сдать главы вовремя. Социальное общение? Ах да,
кажется, припоминаю… В то время казалось, что это никогда не закончится, но в фи-
нале мы оба увидели плоды моего труда.
Обозначения разметки
Любая разметка — ��������������������������������������������������������
HTML����������������������������������������������������
или �����������������������������������������������
CSS��������������������������������������������
— будет показываться с использованием моно-
ширинного шрифта, как здесь:
webpage.html (фрагмент)
<h1>Прекрасный летний день</h1>
<p>Это был прекрасный день для прогулки в парке. Пели птицы,
а все дети еще были в школе.</p>
Если код может быть найден в архиве кода для книги, то название файла будет
отображаться вверху листинга, как здесь:
example.css
.footer {
background-color: #CCC;
border-top: 1px solid #333;
}
1
http://interact.webstandards.org/.
Обозначения, использованные в книге 33
Если показана только часть файла, это будет помечено словом «фрагмент»:
example.css (фрагмент)
border-top: 1px solid #333;
Если в показанный ранее пример нужно внести какие-то дополнения, то новый
код будет выделен полужирным шрифтом:
.footer {
background-color: #CCC;
border-top: 1px solid #333;
padding: 5px;
}
Если приведенный ранее код необходим по контексту, то вместо повторения
всего примера мы заменим второстепенную часть вертикальным многоточием:
.footer {
margin: 5px;
}
Иногда нам нужно будет разделить код, который должен записываться в одну
строку, на несколько из-за ограничения размера страницы книги. Знак будет
означать разрыв строки, который необходим лишь из-за форматирования и должен
быть проигнорирован:
URL.open("http://www.sitepoint.com/blogs/2007/05/28/user-style-she
ets-come-of-age/");
ЭЙ, ВЫ!
Советы, приведенные в таких врезках, послужат для вас полезными ориентирами в опреде-
ленных ситуациях.
ХМ, ПРОСТИТЕ…
Эти примечания приводятся отдельно и не имеют критического значения для рассматрива
емого материала. Их можно считать дополнительной информацией.
БЕРЕГИТЕСЬ!
Такими предупреждениями будут выделяться любые критически важные моменты, с которы-
ми вы можете столкнуться в работе.
От издательства
Ваши замечания, предложения и вопросы отправляйте по адресу электронной поч-
ты vinitski@minsk.piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На сайте издательства http://www.piter.com вы найдете подробную информацию
о наших книгах.
1 Приготовьте
инструменты!
Перед тем как создавать свой первый сайт, вы должны настроить компьютер, под-
готовить для работы, которую предстоит выполнить. Нужно убедиться, что у вас
установлены все инструменты и вы готовы приступать.
Если вы пролистаете несколько компьютерных книг в ближайшем книжном
магазине, то наверняка решите, что программы, нужные для создания сайта, слиш-
ком дороги. На самом деле большинство необходимых инструментов уже установ-
лено на ваш компьютер. Вы не замечали их, потому что не пытались искать. Одна-
ко, если даже их у вас нет, найдется по меньшей мере одна бесплатная программа,
которая поможет решить каждую конкретную задачу.
Я полагаю, что на вашем компьютере настроено подключение к Интернету.
Ничего страшного, если у вас медленное соединение: это не повлияет ни на какие
задания, которые мы будем выполнять по ходу чтения книги. Это всего лишь будет
значить, что некоторые из предлагаемых загрузок в Интернет или из Интернета
займут больше времени.
ПЛАННИНГ, ШМАННИНГ…
В этом месте было бы интересно подумать о ваших мотивах к созданию сайта. У вас есть план
проекта? Каких целей вы хотите достигнуть с помощью сайта?
Вы наверняка уже прикинули, сколько времени понадобится для создания сайта, но пока
отложим основы планирования проектов. Это очень важная тема, но, вероятно, если вы
взяли в руки книгу под названием «Создай свой веб-сайт с помощью HTML и CSS», то снача-
ла хотите как следует разобраться с технической частью.
Поскольку это ваш первый сайт, пусть он будет совсем простым, чтобы не пришлось ломать
голову над некоторыми особенностями планирования. Позже, когда вы усвоите все основы
создания сайтов, вы будете готовы распланировать большой, технически продвинутый сайт.
Когда придет время, правильное планирование станет важнейшей частью работы. Но сейчас
просто приготовимся к созданию первого простого сайта.
1
На жаргоне айтишников (а по-английски — bells and whistles) так называются разные наво-
роты в программах, носящие декоративно-развлекательный характер. — Примеч. пер.
1.1. Основные инструменты, которые вам нужны 37
программы, около логотипа Windows). Скорее всего, ярлык для него на Рабочем
столе уже есть.
Инструменты Windows
NoteTab
Окно этой программы содержит множество вкладок, что позволяет работать с боль-
шим количеством разных файлов одновременно, не открывая несколько окон
(рис. 1.6). Файлы, которые вы открыли, сохраняются, даже если вы закрыли про-
грамму и открыли ее снова позднее. Это очень удобно, если вы работаете с набором
файлов в течение многих дней.
Программу NoteTab (в том числе ее версию Light) можно скачать на сайте
http://www.notetab.com.
Firefox
Firefox — популярная альтернатива браузеру Internet Explorer, и, как вы убеди-
тесь по ходу чтения книги, по многим причинам лучше пользоваться именно им.
1.2. Дополнительные инструменты 41
Инструменты Mac OS
Действительно, бесплатных программ для операционных систем Mac меньше, чем
для Windows. Однако, кроме базовых, есть несколько программ, которые вы може-
те рассмотреть.
TextWrangler
TextWrangler — это бесплатный и простой текстовый редактор, разработанный
BareBones Software. Как и NoteTab для Windows, TextWrangler помогает оптими-
зировать рабочее пространство, позволяя открывать несколько текстовых фай-
лов одновременно (документы отображаются списком справа от окна программы
(рис. 1.8), реже на вкладках). Вы можете загрузить TextWrangler с сайта BareBones
Software1 или из магазина Mac App Store.
1
http://www.barebones.com/products/textwrangler/.
42 Глава 1. Приготовьте инструменты!
Firefox
Firefox популярен и среди пользователей Mac, многие из которых предпочитают
его браузеру Safari (чаще всего благодаря возможности установки дополнительных
функций, называемых расширениями — add-on, которые могут быть загружены
в браузер). Веб-страница, отображаемая в Firefox, должна выглядеть одинаково
в любой операционной системе: Windows, Mac���������������������������������
������������������������������������
или Linux�����������������������
����������������������������
(это бесплатная опера-
ционная система с открытым кодом, чаще всего предпочитаемая людьми с техни-
ческим складом ума, которые любят повозиться со своими компьютерами). Самое
главное достоинство Firefox — предсказуемость. Это еще одна очень важная при-
чина, по которой мы будем использовать в основном Firefox в примерах книги.
ках книги мы рассмотрим только бесплатные программы, которые могут дать вам
представление о возможностях обработки изображений.
Отслеживайте, какие бесплатные редакторы обработки изображений предлага-
ются в Сети, в компьютерных или дизайнерских журналах. Владельцы компаний
обычно раздают таким образом старые версии своего ПО в надежде, что пользова-
тели в дальнейшем захотят обновить версию. Поищите PaintShop Photo Pro X3
(с таким громким именем потеряться нелегко!) или другие редакторы изображений,
которые поддерживают слои (������������������������������������������������
layers������������������������������������������
) — технологию создания картинки путем на-
кладывания нескольких изображений одно на другое. На протяжении книги мы
будем выполнять простую обработку изображений, но на самом деле очень важно
все время отслеживать бесплатные (и полнофункциональные!) программы для
работы с иллюстрациями, так как подобные предложения обычно существуют
недолго.
Инструменты Windows
Стандартный пакет установки �����������������������������������������������
Windows����������������������������������������
не всегда содержал программы для редак-
тирования изображений. Так продолжалось до выхода Windows XP, хотя если вы
покупали компьютер вместе со сканером и цифровой камерой, то у вас могла заод-
но появиться и программа для обработки получившихся изображений (зайдите
в меню ПускВсе программы, чтобы узнать, какие приложения есть у вас).
Приложение Фотогалерея в Windows ��������������������������������������
Vista���������������������������������
значительно расширило свой функ-
ционал по сравнению с предшественником в XP: были добавлены несколько
простых, но полезных инструментов обработки изображений, включая обрезку,
1
http://www.adobe.com/products/photoshop/.
2
http://www.adobe.com/products/photoshopelwin/.
3
http://www.adobe.com/products/photoshopelmac/.
4
http://www.adobe.com/products/fireworks/.
5
http://www.corel.com/servlet/Satellite/au/en/Content/1150905725000.
44 Глава 1. Приготовьте инструменты!
1
http://explore.live.com/windows-live-photo-gallery?os=mac.
1.3. Не только текст 45
Инструменты Mac OS X
Считается, что Mac предпочитают творческие личности, например дизайнеры,
и эта платформа предлагает много инструментов для начинающего художника.
Однако их цена, как правило, превышает стоимость аналогичных средств Windows.
Впрочем, посмотрим, какие бесплатные средства мы можем использовать в Mac,
учитывая, что нам нужна более долговечная программа, чем 30-дневная лицензия
PhotoShop или Fireworks.
Preview
Preview — программа, установленная на любом современном компьютере Mac. Она
выполняет большинство простых задач обработки изображений, таких как обрезка
и повороты (рис. 1.11), хотя, скорее всего, вам она знакома как «приложение, ко-
торое открывает PDF». В главе 5 мы подробно рассмотрим, как с ней работать.
46 Глава 1. Приготовьте инструменты!
iPhoto
Эта прекрасная программа также включена в Mac OS X���������������������������
�����������������������������������
и не нуждается в представ-
лении для опытных пользователей Mac. Ее нельзя назвать полноценным редактором
обработки изображений — она создана для просмотра и сортировки большого коли-
чества изображений, находящихся на компьютере. С ее помощью очень удобно соз-
давать фотоальбомы, но, в принципе, iPhoto имеет и определенные возможности ре-
дактирования, что отличает ее от средств, обеспечивающих лишь каталогизацию.
Изображения можно поворачивать на произвольный угол (с помощью инстру-
мента Straighten в режиме редактирования), доступно несколько инструментов для
работы с цветом (рис. 1.12). iPhoto можно найти в папке Applications (Приложения)
или на панели приложений.
1.4. Online-редакторы
Я рассказал о программах для обработки изображений, которые вы можете скачать
и установить на свой компьютер, но есть и другой путь. Вы поразитесь, какой широ-
кий набор инструментов предоставляют средства редактирования в режиме онлайн1.
Редактор Adobe’s Photoshop Express доступен в навигационном меню в раскрыва
ющемся списке Online Tools (рис. 1.13). Как только вы загрузите изображение, которое
хотите редактировать, вы обнаружите большое разнообразие настроек. Можно
убрать красные глаза, сгладить дефекты, увеличить или уменьшить резкость частей
изображения — и все это доступно в режиме онлайн (рис. 1.14). Затем, если вы удов-
летворены результатом, можете снова сохранить файл на свой компьютер.
1
http://www.photoshop.com/tools?wf=editor.
48 Глава 1. Приготовьте инструменты!
Windows
Лучшее место для хранения файлов вашего сайта — выделенный каталог, кото-
рый можно найти в библиотеке Документы (или Мои документы). Ее легко обнару-
жить, щелкнув на ярлыке Проводника Windows на Панели задач (ярлык представ-
ляет собой желтую папку с вкладками). В Windows Vista папку Документы можно
найти по адресу C:\Users\имя_пользователя, а в XP — в C:\Documents and Settings\
имя_пользователя.
Сейчас создайте новую папку под названием Web, выбрав меню ФайлСоз-
датьПапку (рис. 1.15).
Mac OS X
В Mac OS X уже есть специальное место для хранения ваших файлов: папка Sites
(рис. 1.17). Откройте свой каталог Home (Личное) (из Finder выберите GoHome
(ПерейтиЛичное)).
Очень легко добавить папку Sites (Сайты) на боковую панель (рис. 1.18) для
быстрого доступа: просто перетащите туда папку, как вы добавляете элементы на
панель приложений.
50 Глава 1. Приготовьте инструменты!
1.6. Резюме
Хотите верьте, хотите нет, но теперь у вас есть все, что нужно для создания сай-
та, — и����������������������������������������������������������������������
���������������������������������������������������������������������
совершенно бесплатно! Так произошло не только потому, что вы восполь-
зовались самыми простыми инструментами — текстовым редактором (Блокнот или
TextEdit) и браузером (Internet Explorer либо Safari). Ведь вы уже знаете, где взять
более сложные программы.
Мы рассмотрели также несколько простых и бесплатных программ обработки
изображений, которые могут помочь украсить ваши сайты: Picasa для Windows,
а также Preview и iPhoto в Mac. Упомянули и некоторые более богатые возможно-
стями (и более дорогие) программы, такие как Photoshop или PaintShop Pro X3.
А сейчас, когда у вас есть инструменты, пора начать их использовать!
2 Ваши первые
веб-страницы
Мудрый Лао-Цзы когда-то сказал, что путь в тысячу миль начинается с одного
шага 1. В этой главе вы (метафорически) сделаете первый шаг на своем пути
к просвещению в области веб-разработки и создадите первую веб-страницу.
К концу главы вы сможете ее продублировать, начав создавать многостраничный
сайт.
Анатомия веб-страницы
В предисловии я рассказывал, что изучение HTML������������������������������
����������������������������������
похоже на урок вождения. Про-
должая аналогию, вообразите, что веб-страница — это машина, на которой вы бу-
дете учиться ездить. Некоторые функции очень важны для вождения, в отличие от
других, более декоративных дополнений.
Чтобы ехать на машине, нужны колеса (включая рулевое колесо) и кресло во-
дителя. Для движения автомобиля необходим двигатель, а также кузов (элегантный,
хоть это и несущественно), в котором все это находится. Кроме того, нужна под-
веска, которая крепится к кузову. Удалите что-то одно — и у вас останется лишь
набор красивых, но бесполезных запасных частей.
Как и машина, ваша веб-страница тоже нуждается в чем-то вроде подвески:
нужна базовая структура, к ней будет достраиваться все остальное. Но что может
быть этой гипотетической подвеской? Лучший способ узнать это — засучить рука-
ва и посмотреть, что происходит за кулисами.
1
http://www.quotationspage.com/quote/24004.html.
2.1. Приятно познакомиться, HTML! 53
Рис. 2.1. Выбор команды для просмотра исходного кода в Internet Explorer и Firefox
1
http://webstandards.org/.
2
Позволю себе рекомендовать проделать подобную операцию в Google Chrome, который
успел набрать популярность ко времени перевода книги на русский язык: код отобра-
зится структурированным в виде списка, раскрывающегося на каждом уровне. Кроме
того, щелкнув правой кнопкой мыши на отдельном элементе, можно выбрать команду
Просмотр кода элемента и сразу увидеть строку, относящуюся к нему, а не искать ее по
всему коду. — Примеч. пер.
54 Глава 2. Ваши первые веб-страницы
Doctype
<!DOCTYPE html>
Элемент html
Итак, тип документа сообщил браузеру, какую версию HTML ему ожидать. Что
идет дальше? Сам HTML!
HTML���������������������������������������������������������������
-документ строится с использованием элементов. Помните, элемен-
ты — это кирпичики, которые создают структуру, а она, в свою очередь, обеспечи-
вает целостность веб-страницы. Но что такое элемент? Как элемент выглядит
и какова его цель?
HTML-элемент начинается и заканчивается открывающим и закрывающим
тегами.
Тег состоит из открывающей угловой скобки (<), какого-то текста и закрыва
ющей скобки (>).
Внутри тега находится имя тега. Там также может быть один или несколько
атрибутов.
Посмотрим на первый элемент веб-страницы: элемент html (рис. 2.2).
Одни атрибуты опциональны, а другие обязательны, но все они дают браузеру важную ин-
формацию — куда шире, чем предлагает сам элемент. Например, элемент изображения (о нем
мы еще поговорим) имеет обязательный атрибут "�����������������������������������������
image������������������������������������
source�����������������������������
�����������������������������������
", значением которого являет-
ся путь к файлу изображения. Атрибуты указываются только в открывающих тегах любых
элементов. В дальнейшем, во время разработки проекта, вы увидите много атрибутов, и, по
крайней мере на начальном этапе, я буду обязательно их объяснять, чтобы вы постепенно
с ними знакомились.
Элемент head
Элемент head1 содержит сведения о странице, но ничего из этой информации не бу-
дет показано на самой странице. Например, он включает в себя элемент title
(название), который сообщает браузеру, что нужно отобразить в заголовке веб-
страницы (выводится в строке заголовка — самой верхней части окна браузера, на
которой еще содержатся кнопки Свернуть, Развернуть и Закрыть):
<head>
<title>Untitled document</title>
<meta charset="windows-1251"/>
</head>
Элемент title2
Открывающий <title> и закрывающий </title> охватывают слова Untitled document
в разметке, показанной выше. Обратите внимание: тег <title> означает начало,
а </title> — конец заголовка. Вот так работают закрывающие теги: у них есть слеш
(/) после первой скобки (<).
Заголовок Untitled document (Документ без названия) — просто отправная точка,
с которой вы начинаете творить свою первую веб-страницу; можно изменить эти
слова. Как показано на рис. 2.3, действительно очень важно снабжать веб-страницу
осмысленным заголовком — и не только ради посетителей вашего сайта.
Содержимое элемента title используется и для других целей.
Это название, появляющееся на Панели задач Windows — полоске внизу Рабо-
чего стола, которая отображает открытые в настоящее время окна (рис. 2.4).
То же самое происходит и на панели приложений в Mac (рис. 2.5). Когда у вас
открыто несколько окон, вам очень пригодятся информативные названия!
1
http://reference.sitepoint.com/html/head/.
2
http://reference.sitepoint.com/html/title/.
58 Глава 2. Ваши первые веб-страницы
Элемент meta
Внутри элемента head в нашем простом примере можно увидеть элемент meta, вы-
деленный ниже полужирным шрифтом:
<head>
<title>Untitled document</title>
<meta charset="windows-1251"/>
</head>
ВАЖНОСТЬ КОДИРОВКИ
Если, сохраняя свои файлы, вы не уделяете должного внимания выбору кодировки, то навер-
няка просто не представляете его важности. Но, когда другой пользователь, говорящий на
другом языке, попробует открыть ваш сайт, он, скорее всего, увидит страницу с абракадаброй.
Почему? Потому что его компьютер настроен для отображения текста из символов, свойствен-
ных его языку, в то время как ваш — для отображения текста на английском языке. Кодировка
UTF�������������������������������������������������������������������������������������
-8 справляется с символами практически любого языка (включая специальные), и большин-
ство компьютеров смогут прочитать его. Но для русскоязычных сайтов подходящей будет ко-
дировка windows-1251, которая и будет указываться далее в примерах этой книги.
60 Глава 2. Ваши первые веб-страницы
САМОЗАКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫ
Элемент ���������������������������������������������������������������������������
meta�����������������������������������������������������������������������
— пример самозакрывающегося элемента (также называемого пустым). В от-
личие от title, между закрывающим и открывающим тегами элемент meta может не содержать
вообще ничего, поэтому нужно было бы писать вот так:
<meta charset="windows-1251"></meta>
Язык HTML содержит значительное количество пустых элементов. Разработчики, создававшие
HTML, решили, что все время ставить ненужные закрывающие теги довольно утомительно,
поэтому придумали самозакрывающиеся элементы, которые заканчиваются вот так: />. Наш
пример будет выглядеть таким образом:
<meta charset="windows-1251"/>
Другие элементы,
входящие в head
В head могут присутствовать и другие элементы, например таблицы стилей CSS
или код на языке JavaScript. Мы поговорим о них, когда придет время.
Элемент body
Ура, мы добрались до места! Элемент body содержит почти все, что вы видите, от-
крывая сайт: заголовки, абзацы, изображения, необходимые элементы навигации
и нижние колонтитулы.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled Document</title>
<meta charset="windows-1251"/>
</head>
<body>
</body>
</html>
2.1. Приятно познакомиться, HTML! 61
1
http://reference.sitepoint.com/html/h1/.
2
http://reference.sitepoint.com/html/p/.
2.1. Приятно познакомиться, HTML! 63
РЕГИСТРЫ И РАЗМЕТКА
Теги написаны в нижнем регистре, и имена атрибутов будут писаться так же. Работая с типом
документа HTML5, вы можете вольно обращаться со стилем разметки (например, смешивать
верхний и нижний регистры, не ставить кавычки в атрибутах и многое другое). Ключевое
слово — «можете». Вообще-то, хорошим тоном считается следование строгим правилам раз-
метки XHTML��������������������������������������������������������������������������
�������������������������������������������������������������������������������
, даже если вы не используете тип документа ������������������������������
XHTML�������������������������
, потому что это упорядо-
ченный, логический стиль разметки. Так что в книге, используя тип документа HTML5, мы
будем следовать правилам более скрупулезного XHTML. Подробнее о различиях синтаксиса
HTML и XHTML вы можете почитать на сайте SitePoint1.
1
http://reference.sitepoint.com/html/html-xhtml-syntax.
64 Глава 2. Ваши первые веб-страницы
Абзацы
Конечно, никто не хочет читать документ, который содержит только заголовки,
поэтому нужно вложить в него и какой-то текст. Элемент, который применяется
для выделения текстовых блоков, — p. Просто запомните: р значит абзац (�����
para-
graph). Это важно, потому что вы будете использовать этот элемент куда чаще, чем
остальные. В этом вся прелесть HTML����������������������������������������
��������������������������������������������
: часто используемые элементы очень про-
сты и их легко запомнить.
Что вы об этом думаете? Вы напечатали весь код? Не забывайте, что все при-
меры можно найти в архиве кода. Учтите, однако, что копирование и вставка раз-
метки, а затем сохранение и запуск файла не дадут вам настоящего ощущения, что
вы сами делаете свой сайт; учиться следует на практике. Даже если вы сделали
ошибку — прекрасно, это лучший способ запомнить, как должно быть правильно
(к тому же вы будете довольны собой, найдя и исправив ее самостоятельно).
Посмотрите, как эта разметка должна отобразиться в браузере (рис. 2.9).
Комментарии в HTML
Вернемся к автомобильной аналогии. Вы выполнили для своей «машины» небольшую
работу, и если вы собираетесь прикрутить новые детали к старому каркасу, то за-
метите, что детали не скреплены болтами, а приклеены к автомобилю суперклеем.
66 Глава 2. Ваши первые веб-страницы
1
http://reference.sitepoint.com/html/html-xhtml-syntax#html-xhtml-syntax__sect-comments.
2.1. Приятно познакомиться, HTML! 67
Символы
Порой вам может понадобиться включить в текст веб-страницы символы «боль-
ше» (>) или «меньше» (<). Это проблема, так как эти символы уже применяются
для обозначения тегов в HTML. Что же делать? К счастью, вместо них в тексте
можно использовать специальные кодирующие последовательности. Например,
символ > может быть представлен в виде последовательности &qt;, которую мы
вставляем в текст, как показано в примере ниже. Результат разметки можно уви-
деть на рис. 2.12.
chapter2\examples\05_symbols\entity.html
<!DOCTYPE html>
<html lang="en">
<head>
2.2. Погружение в сайт 69
<title>Магазин: заметка</title>
<meta charset="windows-1251"/>
</head>
<body>
<p>Сейчас в магазине ножей >
НЕТ (могут поступить через 3 дня)</p>
</body>
</html>
Сделаем заголовок
Припомнив изученное ранее, внесите небольшие изменения в этот документ.
1. Поменяйте заголовок веб-страницы на «Bubble Under — дайвинг-клуб на
юго-западе Великобритании».
2. Добавьте заголовок первого уровня «BubbleUnder.com».
3. Сразу после заголовка добавьте абзац: «Дайвинг-клуб на юго-западе Велико-
британии — сделай плюх с нами!» Внимание: это как бы ваш маркетинговый
слоган — теглайн (tagline).
2.2. Погружение в сайт 71
Как только вы внесете эти изменения, ваша разметка должна выглядеть вот так
(новый код выделен полужирным шрифтом):
chapter2\website_files\02_setting_a_title\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bubble Under — дайвинг-клуб на юго-западе
Великобритании</title>
<meta charset="windows-1251"/>
</head>
<body>
<h1>BubbleUnder.com</h1>
<p>Дайвинг-клуб на юго-западе Великобритании — сделай плюх с нами!</p>
</body>
</html>
Сохраните страницу и затем откройте ее в браузере. На рис. 2.13 показан ре-
зультат, который вы должны увидеть.
Ну вот, ваша страница уже почти похожа на множество главных страниц других
сайтов: на ней есть простой текст, приветствующий новых посетителей, но, правда,
больше ничего нет. О чем конкретно этот сайт или, если быть более точным, для
чего именно он создавался?
1
От англ. content — «содержание», в данном случае — наполнение, смысловая часть веб-
страницы. В сфере IT укоренилась практика употребления английских терминов в рус-
ской речи для точности и мгновенного отличия от множества русских синонимов. —
Примеч. пер.
2.2. Погружение в сайт 73
Ничего сверхъестественного, да? Поверьте мне, это еще не все. Сейчас следует
сконцентрироваться на контенте сайта и на том, как он должен быть структуриро-
ван. Мы только подбираемся к обширным вопросам структуры документа, обсудив
лишь использование уровней заголовков. В главе 3 вы увидите, как можно офор-
мить документ, то есть изменить шрифт, цвет, отступы и т. д., но сейчас сосредото-
чимся на содержании и структуре.
2.2. Погружение в сайт 75
Структурирование
Абзацы? Нет проблем. Заголовки? Запросто! Фактически вы уже сейчас можете
создать веб-страницу с простейшей структурой. Небольшой набор элементов, ко-
торые мы сейчас обсуждали, легко запомнить: их наименования очевидны (пом-
ните: p — paragraph?). Но что за зверь — div?
2.2. Погружение в сайт 77
НИКАКИХ ОБЩИХ ID
Атрибут ������������������������������������������������������������������������������
id����������������������������������������������������������������������������
используется в HTML��������������������������������������������������������
������������������������������������������������������������
для уникального обозначения элементов, поэтому два эле-
мента не могут иметь одинаковый id. Когда вы будете работать с CSS и JavaScript, атрибуты
id вам пригодятся.
Чтобы вам проще было начать, я поработал над первой частью страницы. В приме-
ре ниже показан измененный раздел с введенным id-атрибутом для элемента div:
chapter2\website_files\06_adding_structure_with_divs\index.html (фрагмент)
<div id="header">
<h1>BubbleUnder.com</h1>
<p> Дайвинг-клуб на юго-западе Великобритании — сделай плюх с нами!</p>
</div> <!-- Окончание раздела header -->
Сейчас попробуйте сделать то же самое: добавьте элементы div для выделенных
частей контента и идентифицируйте их как site branding или tagline.
Поговорим о вложениях
Вы уже знаете, что элементы div могут содержать абзацы, но, кроме этого, они
могут включать в себя и какое-то количество других элементов div. Тогда они на-
зываются вложенными (nested) div-элементами. Один div просто вкладывается
1
В отличие от текста контента, элементы самой разметки, в том числе атрибуты id, name
и др., следует писать только на английском языке. Исключение можно сделать для ком-
ментариев, да и то это считается дурным тоном, как и запись русских слов латиницей. —
Примеч. пер.
80 Глава 2. Ваши первые веб-страницы
<h3>О нас</h3>
<p>Bubble Under — группа энтузиастов дайвинга, основанная
на юго-востоке Великобритании, которая регулярно встречается
для дайвинг-вылазок в летние месяцы, когда погода хорошая
и по воде плывут барашки. Мы проводим уик-энд, собираясь
небольшими группами, чтобы сократить расходы на проживание
и проезд, а также быть уверенными, что каждый получает
надежного напарника.</p>
<p>Хотя мы располагаемся на юго-западе, мы не ограничиваемся только
нашей территорией: в последних поездках мы посетили реку Скапа
в Шотландии и Мальту.</p>
<p>Когда мы не занимаемся дайвингом, мы часто встречаемся в местных
пабах, чтобы поболтать о грядущих приключениях (на самом деле это
только повод, да?).</p>
<h3>Наши контакты</h3>
<p>Чтобы узнать больше, свяжитесь с секретарем клуба Бобом Добалина
по телефону 01793 641207 или по электронной почте
bob@bubbleunder.com.</p>
</div> <!-- Окончание раздела bodycontent -->
</body>
</html>
В таких случаях будет трудно понять, какой закрывающий тег что закрывает.
Пока вам может быть не совсем понятно, почему это так важно, но когда мы начнем
изучать �������������������������������������������������������������������
CSS����������������������������������������������������������������
, ошибки в �����������������������������������������������������
HTML�������������������������������������������������
-коде будут очень сильно портить вам жизнь. Доба-
вив несколько комментариев, можно значительно упростить себе работу по отлад-
ке в дальнейшем.
</div> <!-- Окончание внутреннего элемента div -->
</div> <!-- Окончание вложенного элемента div -->
</div> <!-- Окончание внешнего элемента div -->
82 Глава 2. Ваши первые веб-страницы
НЕ СТОИТ ПЕРЕБАРЩИВАТЬ
Избегайте излишнего употребления элементов div. Некоторые разработчики увлекаются
секционированием страниц с использованием div, расставляя их и тут и там. Излишний
энтузиазм в использовании этого элемента приведет лишь к тому, что страница будет усея-
на элементами div, как пенек опятами, без всякого практического смысла. Так что будьте
осторожны, не стоит без нужды вводить этот элемент только потому, что теперь вы это
умеете.
Разбивка страниц
На текущий момент вы добились значительного прогресса в создании сайта.
Но что это за сайт, у которого только одна страница? Честно говоря, сайт может
состоять из одной страницы, как и предложение из одного слова. Но вы, навер-
ное, не купили бы эту книгу, чтобы узнать, как создать всего одну страницу сайта,
не правда ли?
2.2. Погружение в сайт 83
ГДЕ ЖЕ РАСШИРЕНИЕ?
Если имя вашего файла отображается в Проводнике просто как �����������������������������
index������������������������
, это значит, что систе-
ма не показывает расширения файлов (с помощью которых Windows определяет их тип).
Чтобы отобразить расширение, сделайте следующее.
1. Откройте Проводник Windows.
2. Если вы пользователь Windows 7 и Vista, выберите СервисКаталоги и поиск. Пользова-
тели XP должны выбрать СервисСвойства папки.
3. Перейдите на вкладку Вид.
4. В области Дополнительные параметры в группе Файлы и папки снимите флажок Скрывать
расширения для зарегистрированных типов файлов.
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Дайвинг-клуб на юго-западе Великобритании — сделай плюх
с нами!</p>
</div>
</div> <!-- Окончание раздела header -->
<div id="bodycontent">
<h2> Мы рады, что вы погрузились на наш классный сайт!</h2>
<p><img src="divers-circle.jpg"
alt=»Группа дайверов тренируется»
width="200" height="162"/></p>
<p>Круто, что вы заглянули и поделитесь с нами воздухом! Благодаря
вашему классному умению ориентироваться под водой вы успешно нашли
путь к стартовой точке — в данном случае к нашей главной
странице.</p>
</div> <!-- Окончание раздела bodycontent -->
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>О BubbleUnder.com: кто мы и о чем этот сайт</title>
<meta charset="windows-1251"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Дайвинг-клуб на юго-западе Великобритании — сделай плюх
с нами!</p>
</div>
</div> <!-- Окончание раздела header -->
<div id="bodycontent">
<h2>О нас</h2>
<p>Bubble Under — группа энтузиастов дайвинга, основанная
на юго-востоке Великобритании, которая регулярно встречается
для дайвинг-вылазок в летние месяцы, когда погода хорошая
и по воде плывут барашки. Мы проводим уик-энд, собираясь
небольшими группами, чтобы сократить расходы на проживание
и проезд, а также быть уверенными, что каждый получает
надежного напарника.</p>
<p>Хотя мы располагаемся на юго-западе, мы не ограничиваемся только
нашей территорией: в последних поездках мы посетили реку Скапа
в Шотландии и Мальту.</p>
<p>Когда мы не занимаемся дайвингом, мы часто встречаемся в местных
86 Глава 2. Ваши первые веб-страницы
Элемент а (где а означает anchor) может быть менее интуитивно понятен, чем
p (paragraph) или li (list item), но вы быстро запомните его — в конце концов,
именно на нем и держится весь Интернет. Элемент а содержит текст ссылки, на
котором можно щелкнуть (по умолчанию он отображается на экране шрифтом
голубого цвета с подчеркиванием).
2.2. Погружение в сайт 87
НЕ ЩЕЛКАЙТЕ ЗДЕСЬ!
Текст ссылки — слова внутри элемента <а>, которые выделяются шрифтом голубого цвета
и подчеркиваются в браузере, — просто краткое указание, куда ведет ссылка (например,
электронная почта bob@bubbleunder.com). Вы, наверное, часто видели ссылки с текстом «Щелк-
ните здесь, чтобы уведомить нас об изменении вашего адреса», или «Загрузить изображе-
ние», или «Предупредите нас об изменении вашего адреса». Никогда не используйте названия
наподобие «Щелкните здесь» — это очень плохо с точки зрения удобства и доступности1.
Нужно сделать простое меню для навигации, с помощью которого можно пере-
ходить со страницы на страницу. Навигация будет представлять собой обычный
маркированный список с использованием элементов ul и li из трех ссылок.
Разметка будет такой:
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="contact.html">Свяжитесь с нами</a></li>
</ul>
Поместите ее внутрь элемента div, чтобы было легко понять, для чего нужен
этот HTML-блок.
<div id="navigation">
<ul>
<<li><a href="index.html">Главная страница</a></li>
<<li><a href="about.html">О нас</a></li>
<<li><a href="contact.html">Свяжитесь с нами</a></li>
</ul>
</div> <!-- Окончание раздела navigation -->
Затем вставьте эту разметку в соответствующее место на каждой странице. Луч-
ше всего добавляйте ее сразу после заголовка, перед началом основного контента.
В приведенном ниже коде блок навигации появляется на главной странице.
chapter2\website_files\07_linking_between_pages\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bubble Under — дайвинг-клуб на юго-западе Великобритании</title>
<meta charset="windows-1251"/>
</head>
<body>
1
Эта проблема подробно рассмотрена в статье Юкка Корпела Why “Click here” is bad
linking practice («Почему “Щелкните здесь” — плохой вариант ссылки») (http://www.
cs.tut.fi/~jkorpela/www/click.html). — Примеч. авт.
88 Глава 2. Ваши первые веб-страницы
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Дайвинг-клуб на юго-западе Великобритании — сделай плюх
с нами!</p>
</div>
</div> <!-- Окончание раздела header -->
<div id="navigation">
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="contact.html">Свяжитесь с нами</a></li>
</ul>
</div> <!-- Окончание раздела navigation -->
<div id="bodycontent">
<h2>Мы рады, что вы погрузились на наш классный сайт!</h2>
<p><img src="divers-circle.jpg" width="200" height="162"
alt="Группа дайверов тренируется"/></p>
<p>Круто, что вы заглянули и поделитесь с нами воздухом! Благодаря
вашему классному умению ориентироваться под водой вы успешно нашли
путь к стартовой точке — в данном случае к нашей главной
странице.</p>
</div> <!-- Окончание раздела bodycontent -->
</body>
</html>
Результат показан на рис. 2.21.
Вы только что прошли важный этап. Отныне вы — создатель работающего сай-
та с навигацией. Обсудим еще несколько HTML-элементов, которые вы можете
добавить на свои страницы.
«Счастье — это поплавать в океане, а затем выпить один или два бокала холодненького
пива! И я разрешаю меня цитировать!»
Элемент сite
Если цитата, на которую вы ссылались, опубликована где-то еще: в журнале,
в книге или даже на вашем собственном сайте, то можете добавить ссылку на
источник. Один из способов — использовать элемент сite (от citation — «цити-
2.2. Погружение в сайт 91
Небольшой перерыв
Осталось рассмотреть всего один элемент — элемент br1, который позволяет до-
бавлять разрыв строки. Представьте, что происходит, когда вы передвигаете ка-
ретку на старинной печатной машинке. Элемент br работает так же. Чтобы начать
новый абзац, вы дважды нажимаете Enter для создания необходимого интервала.
В HTML, создавая абзац с помощью тегов <p> и </p>, вы даете браузеру команду
1
http://reference.sitepoint.com/html/br/.
92 Глава 2. Ваши первые веб-страницы
автоматически создать отступы ниже и выше абзаца. Однако, если вы просто хо-
тите начать новую строку, а не новый абзац, вам нужен элемент <br>. Рассмотрим
его работу на таком примере:
<p>Бедный мальчик из города Тарту<br/>
Всем показывал пальцем на карту<br/>
И аскал на билет,<br/>
Сигарет и котлет,<br/>
Xоть и не был он вовсе из Тарту.</p>1
Запомните, что br — пустой элемент, примерно как meta или img, поэтому он
пишется в HTML так: <br/>.
2.3. Резюме
Ура! Вы неплохо начали. В этой главе вы сделали три связанные друг с другом
страницы из одной. Вы познакомились с большинством основных тегов HTML,
многие из которых применили на новой веб-странице. Но, несмотря на все усердие,
веб-страницы выглядят бледными и скучными. Не расстраивайтесь — это только
вторая глава! Очень скоро вы это исправите. В следующей главе вы все раскрасите,
и ваша страница будет больше похожа на яркий сайт дайверов, чем на скучный
документ Word.
1
Лимерик Ольги Арефьевой: http://www.ark.ru/ins/pocherk/limeriki.html. У Ллойди был
вот такой:
<p>The limerick packs laughs anatomical,<br/>
Into space that is quite economical.<br/>
But the good ones I’ve seen,<br/>
So seldom are clean,<br/>
And the clean ones so seldom are comical.</p>
Примеч. пер.
3 Добавляем
стили
Из глав 1 и 2 вы узнали, как настроить компьютер, чтобы разрабатывать на нем
сайты, и изучили основы создания веб-страниц. Теперь у вас есть чем поразить
друзей и родных! Но вот незадача: посмотрев на творение ваших рук, они почему-
то не выглядят восхищенными. Почему? Что не так?
Действительно, ваш сайт сейчас выглядит не очень впечатляюще, но его внут-
ренняя структура хороша и надежна. Вернемся к автомобильной аналогии: на
данный момент у вас имеется отличное шасси и немного кузовных элементов,
а совсем скоро получится настоящий Maybach. Очень скоро вы покажете знакомым,
во что превратится эта пустая оболочка на колесиках!
В этой главе мы поговорим о том, как сделать сайт ярче, привлекательнее и удоб-
нее. Ваш рабочий инструмент — CSS. Поговорим о его широких возможностях.
Атрибут style может содержать одно или несколько объявлений внутри своего
блока. Объявление состоит из двух частей: свойства и его значения. В примере
выше объявлением можно считать текст color: red, где color (цвет) — это свойство,
а red (красный) — его значение.
Если хотите, можете добавить еще одно объявление в код, приведенный выше.
Например, вы можете сделать так, чтобы шрифт текста стал не только красным, но
и полужирным. Свойство, контролирующее этот эффект, называется font-weight
(вес шрифта). У него есть несколько допустимых значений, но в основном вы
будете использовать normal (обычный) или bold (полужирный). Итак, добавьте
следующую разметку для отображения абзаца полужирным шрифтом красного
цвета:
<p style="color: red; font-weight: bold;"> Съешь еще этих мягких французских
булок да выпей чаю </p>
Обратите внимание, что два объявления сейчас разделяются точкой с запятой.
Можно и дальше применять стили таким способом, но все-таки это не лучший
вариант. Есть другие возможности оформления, и очень скоро вы в этом убеди-
тесь.
Элемент span
Как вы убедились, можно легко раскрасить целый абзац. Но, скорее всего, куда чаще
вам понадобится выделять слова внутри абзаца. Пользуйтесь для этого элементом
span (интервал, диапазон). В отличие от р, выделяющего абзац, или blockquote, выде-
ляющего цитату, тег span не выполняет действий. Он не более чем инструмент для
выделения начала и конца какого-либо раздела, к которому вы хотите применить
стиль. Вместо окрашивания всего абзаца в голубой цвет вам может быть нужно вы-
делить всего два первых слова — Bubble Under — голубым цветом и полужирным
шрифтом. Вот как можно использовать для этого тег <span>:
<p><span style="color: blue; font-weight: bold;">BubbleUnder</span> — группа
энтузиастов дайвинга, основанная на юго-востоке Великобритании,
которая регулярно встречается для дайвинг-вылазок
в летние месяцы, когда погода хорошая и по воде плывут барашки.
Мы проводим уик-энд, собираясь небольшими группами,
чтобы сократить расходы на проживание и проезд,
а также быть уверенными, что каждый получает надежного напарника.</p>
96 Глава 3. Добавляем стили
Непонятно?
Ладно, ладно, до сих пор, наверное, было слишком много страшных непонятных
слов. Рисунок 3.3 все расставит на свои места.
p {
font-weight: bold;
color: blue;
}
1
http://reference.sitepoint.com/html/link/.
3.5. Начинаем строить таблицу стилей 101
на красный, то, открыв страницы заново, увидите, что они снова изменились.
Попробуйте!
Итак, использование голубого полужирного шрифта — хороший способ убе-
диться, что таблицы стилей успешно привязаны, но это не тот дизайнерский
эффект, которым можно гордиться. Удалите правило р (оставив комментарий) из
CSS-файла, и мы начнем делать настоящую таблицу стилей.
body {
font-family: Verdana;
}
Здесь выбран шрифт Verdana. Он применяется к элементу body, так как body
содержит все элементы, отображаемые на странице. Получается, что любой
текст, находящийся внутри тега body, будет выводиться этим шрифтом (разве что
мы установим для отдельных элементов особый шрифт, но об этом поговорим
позже).
Итак, у нас теперь Verdana! Но что, если у пользователя, который захочет по-
смотреть на ваш сайт, на компьютере не установлен этот шрифт? Если кратко —
браузер постарается отобразить страницу наилучшим образом, но, конечно, не
способен догадаться, что получится. Но, к счастью, свойство font-familу может
иметь несколько значений. Можно указать несколько шрифтов, и браузер отобра-
зит первый из имеющихся на компьютере. Поэтому запишем следующее:
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
Переведу: «Стиль всего содержимого body на моей веб-странице: текст отобра-
жается шрифтом Verdana. Если его нет, используй Helvetica. А если и его нет,
то Arial. Если не установлен ни один из этих шрифтов, то используй любой из до
ступных стилей семейства sans-serif».
102 Глава 3. Добавляем стили
1
Вопреки обыкновению, Йен не привел ссылку: http://www.sitepoint.com/eight-definitive-
font-stacks. Статья, конечно, не переводилась на русский язык, но смысл будет понятен
даже тем, кто не знает английского. — Примеч. пер.
3.5. Начинаем строить таблицу стилей 103
Помните: чтобы сослаться на семейство шрифтов без засечек в CSS, надо указать
следующие два слова: sans-serif.
Оформление заголовков
Первый элемент, который мы оформим, — заголовок первого уровня, обозначен-
ный элементами h1. Посмотрим, что можно сделать с заголовками в таблице CSS.
Добавьте в файл style1.css следующий код:
h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
Расширим стилизацию
Внесем изменения в представление файла — добавим больше стиля содержимому
основной части (body) и изменим отображение навигации. Введите приведенный
ниже код в файл style1.css (или скопируйте его из архива кода).
chapter3\website_files\07_blue_background\style1.css
/*
CSS для сайта Bubble Under
*/
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
h1 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
li {
font-size: small;
}
h2 {
color: blue;
font-size: medium;
font-weight: normal;
}
p {
font-size: small;
color: navy;
}
Сохраните CSS-файл, а затем нажмите кнопку Обновить (или Перезагрузить) в брау-
зере. Если все хорошо, то ваша страница должна выглядеть, как показано на рис. 3.7.
Невозможно догадаться, что это значит. Но на самом деле все просто. Эта абра-
кадабра — просто код светло-голубого цвета. Однако нет необходимости гадать,
что значит этот код. К счастью, в Интернете есть множество сервисов, которые
помогут вам выбрать цвет из палитры и затем дадут его код. Поищите эти сервисы,
и вскоре вы сможете легко подбирать шестнадцатеричные коды для создания иде-
альных цветовых схем2.
ШЕСТНАДЦАТЕРИЧНАЯ СИСТЕМА
Итак, цвета в HTML могут быть записаны в шестнадцатеричной системе цветовых кодов.
Шестнадцатеричная система — это система счисления, где цифр 16, а не 10. Вот как в ней
выглядит цифровой ряд:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12 …
Достигнув 9, мы проходим буквенный ряд: A, B, C, D, E, F, прежде чем перейти к 10. Это дает
нам шесть дополнительных цифр, которые можно использовать для записи чисел. Звучит
страшновато? Да, но ничего: в шестнадцатеричной системе компьютеры считают куда лучше
человека!
Запомните главное — любые числа, которые вы хорошо знаете в десятичной системе, напри-
мер 2748, 15 000 000 и 42, могут быть представлены в шестнадцатеричной. Убедитесь в этом
(табл. 3.1)!
1
http://reference.sitepoint.com/html/color-names.
2
Хороший набор ссылок на такие инструменты находится по адресу http://www.clagnut.
com/blog/260/.
3.5. Начинаем строить таблицу стилей 107
Когда цвет записан в шестнадцатеричной системе, как, например, ff0000, фактически это
число означает три величины, соединенные вместе. Эти величины — количество красного
цвета (ff), зеленого (первые два нуля) и голубого (вторые два нуля), которые, соединяясь
вместе, образуют определенный цвет. Эти три основных цвета комбинируются для отобра-
жения на экране абсолютно любого цвета, почти как на экране телевизора1. В нашем приме-
ре ff — это максимальная величина красного цвета, а количество зеленого и синего равны
нулю, так что легко запомнить — код #ff0000 дает красный цвет.
1
Существует ошибочное мнение, что основные цвета — это красный, зеленый и желтый. Это
не так! Ознакомьтесь со статьей в «Википедии»: http://en.wikipedia.org/wiki/Primary_color,
где описаны аддитивные и субтрактивные методы синтеза цветов.
108 Глава 3. Добавляем стили
Вы уже видели, что можно изменить цвет текста в абзаце. Сейчас установлен
синий цвет.
Посмотрим, что изменилось в стиле отображения элементов списка.
chapter3\website_files\07_blue_background\style1.css (фрагмент)
li {
font-size: small;
}
chapter3\website_files\07_blue_background\style1.css (фрагмент)
h1 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
1
По многим причинам, обсуждать которые здесь незачем, определение размеров текста
в CSS вызывает оживленные споры. Начав знакомиться с CSS, вы наверняка захотите
больше узнать о разных техниках установления размеров текста. Начать можно с фору-
ма CSS на сайте SitePoint: http://www.sitepoint.com/launch/cssforum/.
3.5. Начинаем строить таблицу стилей 109
1
Вы точно услышите или уже слышали от веб-разработчиков леденящие душу истории
о поддержке этого старого, проблемного и неповоротливого браузера. Подтверждаю:
я тоже сталкивался с этим, у меня есть доказательства!
110 Глава 3. Добавляем стили
chapter3\website_files\08_emphasis_italics\about.html (фрагмент)
< p>Когда мы не занимаемся дайвингом, мы часто встречаемся в местных пабах,
чтобы поболтать о грядущих приключениях (на самом деле это <em>только
повод</em>, да?).</p>
Зачем знать различия между i/em и b/strong? Может показаться, что не так уж
важно, как именно вы добьетесь отображения текста в браузере курсивом. Но пред-
ставьте, что вы плохо видите и пользуетесь специальной программой, которая
читает для вас текст с веб-страниц вместо того, чтобы выводить его на экране.
Такая программа (она называется «экранный диктор») должна читать текст,
помеченный элементом em, используя эмоциональное выделение, а текст, поме-
ченный strong, — с усилением голоса (хотя это может незначительно варьиро-
ваться в зависимости от вида программы). И что будет, если текст выделен про-
сто i или b? Поскольку никакого эмоционального значения эти элементы не несут,
их содержимое будет прочитано без каких-либо особенностей в интонации, а это
может привести к тому, что потеряются оттенки смысла, который вы пытались
донести.
Поисковая система (например, Google или Yahoo!) может давать больший
приоритет значениям, соответствующим запросу пользователя и заключенным
в эмоциональные элементы, чем просто выделенным полужирным или курсивным
шрифтом (хотя кто знает, как на самом деле работают эти поисковые системы, —
компании не выдают своих секретов!).
Еще один элемент, который вы можете увидеть у других, но сами никогда не
должны использовать, — это u. Если вы запишете какой-то текст в тегах <u></u>, то
он отобразится подчеркнутым, но вы добьетесь только того, что собьете пользова-
телей с толку. В Интернете подчеркнутый текст практически всегда означает, что
это гиперссылка — но элемент u подчеркивает текст, и только!
p {
font-size: small;
color: navy;
}
Все это очень хорошо, но у нас есть один абзац, который отличается от остальных.
Вы не догадываетесь, что это? Это наш первый абзац — слоган. Вот HTML-размет-
ка этого раздела:
<div id="tagline">
<p>Дайвинг-клуб на юго-западе Великобритании — сделай плюх с нами!</p>
</div>
chapter3\website_files\11_styled_tagline\style1.css (фрагмент)
# tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
}
2. Сохраните файл и обновите страницу «О нас» (или любую из трех — это не име-
ет значения) в браузере. Ваша страница должна выглядеть, как показано на
рис. 3.11.
Как это получилось? Наверное, я должен объяснить. Это CSS-правило означа-
ет: «Для всех абзацев, заключенных внутри элемента с идентификатором (атрибу-
том id) tagline, установить курсивное начертание и шрифт Georgia, Times или
любой другой из семейства serif, если нет этих».
Контекстные селекторы
#tagline — это контекстный селектор. Рассмотрим еще несколько примеров.
#navigation a {
text-decoration: none;
}
Перевод: для любой ссылки, находящейся внутри блока навигации — элемента
с идентификатором navigation, — применить нормальное начертание шрифта,
то есть убрать подчеркивание (другие ссылки на этой странице останутся под-
черкнутыми).
#footer p {
line-height: 150%;
}
Перевод: установить отступ между строками в абзацах внутри элементов
с id-атрибутом footer в размере 150 %. Это изменяет параметр 100 %, выстав-
ляемый браузером по умолчанию, или иные величины отступа, которые могли
быть применены ранее, например, для всего содержимого body.
h1 b {
color: red;
}
Перевод: для любого текста внутри заголовка первого уровня, который помечен
как b (то есть должен выделяться полужирным шрифтом), установить красный
цвет шрифта (элементы, помеченные как strong, не будут отображаться красным
цветом).
h2 a {
text-decoration: none;
}
Перевод: не подчеркивать ссылки, находящиеся внутри заголовков второго
уровня (по умолчанию любые ссылки подчеркиваются, так что остальные ссыл-
ки на этой странице будут отображаться с подчеркиванием).
116 Глава 3. Добавляем стили
Объединение стилей
Если вы хотите применить один и тот же стиль к нескольким разным элементам
веб-страницы, то нет необходимости повторяться. Допустим, вам нужно устано-
вить для заголовков с первого по третий уровень желтый цвет шрифта и черный
цвет фона. Вы написали что-то вроде этого:
h1 {
color: yellow;
background-color: black;
}
h2 {
color: yellow;
background-color: black;
}
h3 {
color: yellow;
background-color: black;
}
Это слишком громоздко, пожалуй. Да и стилей на странице многовато, что тя-
жело для восприятия. Можно ли избавиться от части работы? Да, можно! Вот
так:
h1, h2, h3 {
color: yellow;
background-color: black;
}
Перевод: если элемент — заголовок первого, второго или третьего уровня, то
отображать его нужно шрифтом желтого цвета на черном фоне.
1
Marine — «морской». На всякий случай напомню: для названий файлов не надо исполь-
зовать кириллицу или транслитерацию (наподобие morskoi.css), так как это дурной
тон. — Примеч. пер.
118 Глава 3. Добавляем стили
h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}
Поскольку объявление, устанавливающее белый цвет, идет ниже, то оно пере-
определяет более раннее указание о синем цвете. Так что, даже если вы сто раз
указали, что заголовок второго уровня (h2) должен отображаться синим шрифтом,
это не имеет значения, — если последнее объявление говорит о белом, то заголовок
будет белым.
Оценим прогресс
Время для еще одной передышки. Итак, вы изучили еще несколько стилей, которые
можно применить в CSS, увидели, как можно оформлять элементы в зависимости
от контекста, и, наконец, узнали, как группировать элементы, подлежащие одина-
ковому оформлению. Но есть одна вещь, которой мы лишь слегка коснулись, а ведь
ее роль в Интернете невозможно переоценить — она представляет собой просто
фундамент всех функций Сети. Я говорю о ссылках.
Оформление ссылок
Ссылки в Интернете — везде! Они — основа всего, что мы видим в Сети. Сейчас
преобладают замысловато разукрашенные веб-страницы, снабженные огромным
количеством изображений и разных функций. Но, может быть, кто-то еще помнит,
что совсем недавно весь Интернет был чуть более чем собранием документов, свя-
занных друг с другом гиперссылками. Вернитесь к древним браузерам, и вы уви-
дите — ссылки в них подчеркивались, что сохранилось и в наши дни. По умолчанию
большинство браузеров имеют следующую цветовую схему для ссылок:
голубой цвет — ссылка, которую еще не открывали (unvisited);
фиолетовый цвет — ссылка на страницу, которую вы уже посещали (visited);
красный цвет — активная ссылка (active), на которой вы в данный момент щел-
каете кнопкой мыши; на мгновение можно увидеть, как ссылка вспыхивает
красным цветом.
3.5. Начинаем строить таблицу стилей 119
Статус ссылок. Как я уже говорил, есть несколько типов ссылок (непосещенные,
посещенные, активные), отображаемых на веб-странице. Есть еще один статус,
о котором я не говорил, но с которым вы, вероятно, знакомы: статус наведения
(hover), возникающий в тот момент, когда вы наводите на ссылку указатель мыши.
В CSS можно изменить стиль всех этих статусов ссылки, используя так называемые
псевдоклассы. Звучит устрашающе, но на самом деле все очень просто. Это лишь
внутренний класс, который браузер автоматически применяет к ссылке, когда она
находится в том или ином состоянии. Вот как выглядит CSS-код, который задает
цветовую и стилевую схему для разных статусов ссылки:
a {
font-weight: bold;
}
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
120 Глава 3. Добавляем стили
text-decoration: none;
color: white;
background-color: navy;
}
a:active {
color: aqua;
background-color: navy;
}
Различные состояния обрабатываются в CSS с помощью селектора. Для этого
нужно добавить двоеточие (:) и псевдокласс: link (ссылка), visited (посещенная),
hover (наведение), active (момент щелчка кнопкой мыши на ссылке). Добавление
псевдокласса в вашу таблицу стилей означает, что браузер применит установленное
правило, когда элемент будет находиться в состоянии, указанном в псевдоклассе.
1
С англ. — «Любовь? Ха!» — Примеч. пер.
2
Designing With Web Standards (Berkeley: New Riders, 2003).
3.5. Начинаем строить таблицу стилей 121
ОЧИЩАЙТЕ ИСТОРИЮ
Ваш браузер автоматически сохраняет часть истории ваших переходов между страницами
в Интернете и использует эту информацию, чтобы решить, посещалась ссылка либо еще нет
(и, в зависимости от этого, как ее нужно отобразить). Если вы делаете сайт и проверяете
ссылки, то должны посмотреть, как выглядит непосещенная ссылка, но из-за наличия истории
они все будут казаться посещенными! И уж, конечно, это произойдет с нашим трехстраничным
учебным сайтом — скорее всего, все ссылки в вашем навигационном списке светло-серые.
Чтобы это исправить, очистите в браузере историю.
В Internet Explorer выберите меню СервисСвойства обозревателя. Вы увидите кнопку Уда-
лить в области История просмотра. Нажмите ее, откроется диалоговое окно Удаление истории
обзора с большим количеством настроек, как показано на рис. 3.15. Убедитесь, что установ-
лен флажок Журнал (или История в Firefox), и нажмите кнопку Удалить. После этого снова
откройте веб-страницу. В старых версиях браузера процесс удаления истории еще проще —
в окне Свойства обозревателя есть диалог, который так и называется: Удалить историю.
Настройки других браузеров очень похожи. Обычно их можно найти, выполнив примерно такие
команды: ToolsOptions (СервисПараметры) или PreferencesPrivacy (СвойстваБезопас-
ность). Я не буду приводить здесь способы удаления истории для всех браузеров, вы и сами
легко с этим справитесь.
122 Глава 3. Добавляем стили
Селекторы классов
На текущий момент мы рассмотрели способы оформления различных элементов,
например абзацев и заголовков. Вы также увидели, как можно оформлять элемен-
ты в отдельных областях страницы, используя идентификаторы. Однако слиш-
ком широкое применение стиля (как окраска текста во всех абзацах в синий
цвет) — это грубый подход с точки зрения дизайна. Что, если вам нужно выделить
лишь несколько абзацев (или каких-то других элементов)? Используйте селек-
торы классов.
Селектор класса позволяет разработать стиль, который может быть применен
снова и снова ко многим различным элементам. Например, вы хотите выделить
отдельные фрагменты текста, чтобы они выглядели более привлекательно и забав-
но, чем остальная часть документа.
Введите в своем CSS-файле такой код:
.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
Вы только что создали правило стиля для класса fun. Точка перед названием
класса говорит о том, что перед вами селектор класса. В это правило вы добавили
новое свойство letter-spacing , которое задает пробел между буквами. Здесь
установлена величина 0.05 em. Значение 1 em определяет высоту символа М для
любого шрифта, поэтому 0,05 означает 5 % от этой высоты. Казалось бы, это
свойство почти изменит внешний вид текста, но, когда документ отправится
в типографию, самые небольшие изменения будут бросаться в глаза. Впрочем,
вы можете сами попробовать увеличить это значение и посмотреть, что полу-
чится.
Чтобы использовать стиль, после того как он был внесен в таблицу, добавьте
такой атрибут class="fun":
<p class="fun">Парень идет в бар или ноги сами его туда несут?<p>
А сейчас попробуйте применить классы к учебному сайту. Сначала нужно до-
бавить правило стиля, показанное выше, к таблице стилей.
1. Откройте style1.css и добавьте в конце файла код из предыдущего листинга.
2. Сохраните файл и откройте в текстовом редакторе страницу about.html.
3. Найдите абзац, который содержит элемент цитаты (blockquote).
4. Добавьте в открывающий тег абзаца атрибут class="fun".
Разметка будет выглядеть следующим образом:
<blockquote>
<p class="fun">"Счастье — это поплавать в океане, а затем выпить один
или два бокала холодненького пива! И я разрешаю меня цитировать!"</p>
</blockquote>
Заметьте: атрибут class применен на уровне абзаца (не цитаты). Если наш Боб
разговорится на несколько абзацев, это будет выглядеть так:
3.5. Начинаем строить таблицу стилей 123
<blockquote>
<p class="fun">"Счастье — это поплавать в океане, а затем выпить один
или два бокала холодненького пива! И я разрешаю меня цитировать!"</p>
<p class="fun">"Присоединяйтесь к нам на следующих выходных, и вскоре
у вас появится много новых друзей!"</p>
<p class="fun">"По крайней мере на какое-то время я обзавелся
действительно классной работой."</p>
</blockquote>
Получилось много повторов. Наверное, есть более аккуратный способ применить
этот стиль? Да, конечно, вот он:
<blockquote class="fun">
<p>"Счастье — это поплавать в океане, а затем выпить один или два
бокала холодненького пива! И я разрешаю меня цитировать!"</p>
<p>"Присоединяйтесь к нам на следующих выходных, и вскоре у вас появится
много новых друзей!"</p>
<p>"По крайней мере на какое-то время я обзавелся действительно классной
работой."</p>
</blockquote>
В этом примере к элементу применен класс fun, так что теперь все содержимое
элемента будет отображаться в стиле родительского контейнера. Это избавит вас от
необходимости применять разные классы ко всем вашим страницам. В общем, это
очень похоже на логику работы с элементами div, которую мы обсуждали в главе 2.
blockquote.fun {
font-style: italic;
}
Теперь������������������������������������������������������������������������������������
�����������������������������������������������������������������������������������
любой������������������������������������������������������������������������������
�����������������������������������������������������������������������������
текст������������������������������������������������������������������������
�����������������������������������������������������������������������
внутри�����������������������������������������������������������������
����������������������������������������������������������������
тегов�����������������������������������������������������������
<blockquote class=����������������������������������������
"���������������������������������������
fun������������������������������������
"�����������������������������������
> �������������������������������
���������������������������������
</blockquote> �����������������
будет������������
�����������
отображать-
ся курсивом.
Сочетая селектор класса с именем элемента, вы сообщаете браузеру, что нужно применить
следующее объявление стиля только к комбинации этого элемента и класса. Это очень про-
сто: element.class. Помните только, что между их названиями нельзя ставить пробелы.
124 Глава 3. Добавляем стили
И НАКОНЕЦ
Самые наблюдательные из вас, наверное, заметили, что не все правила класса .fun из пре-
дыдущего примера применились к цитате. Правила font-family и letter-spacing сработали, а из-
менение цвета — нет! Почему? Чтобы это понять, рассмотрим феномен «приоритетности».
Эта концепция означает лишь то, что срабатывает самое приоритетное правило. Определе-
ние, какое правило, более приоритетно, вполне доступно для понимания. В вашей таблице
стилей приоритет определить легко: правило .fun применено к цитате, а свойства относят-
ся к абзацам, поэтому они срабатывают только в том случае, если нет других объявлений
для абзацев. А у вас есть другое объявление о цветах на учебном сайте — вы добавили его
еще в начале главы. В нем говорится, что все абзацы должны отображаться синим цветом
(navy):
p {
color: navy;
}
Правило для элемента с селектором p более приоритетно для таких элементов, потому что
селектор обращается к ним напрямую, в отличие от правила класса .fun. Допустим, вы доба-
вили новое правило, к примеру такое:
.fun p {
color: green;
}
В результате синим будет весь текст, кроме находящегося внутри элементов p с классом fun.
Текст, относящийся к этому классу, будет зеленым, так как селектор .fun p более приоритетен
для таких абзацев. Заметьте, что, в отличие от конфликта правил, который мы рассматрива-
ли в подразделе «Какое правило победит?», эту битву выигрывают более приоритетные
правила стилей, независимо от того, в каком порядке они появляются в таблице стилей.
Приоритетность может здорово усложнить жизнь, поэтому хорошенько разберитесь с этим
понятием. Сейчас достаточно лишь усвоить концепцию и понять причину, почему один из
ваших стилей не срабатывает, хотя должен. Приоритетность много обсуждали на фору-
мах SitePoint CSS Reference. Ознакомьтесь с этой информацией, если хотите лучше разо-
браться1.
1
http://reference.sitepoint.com/css/specificity/.
На русском языке можно поискать в Интернете по запросам «приоритетность css» или
«специфичность css». — Примеч. пер.
3.5. Начинаем строить таблицу стилей 125
крывающий тег <span> туда, откуда хотите начать выделение, и закрывающий </span>
туда, где хотите его закончить. Преимущество этого метода перед применением
внутреннего стиля было показано выше: вы можете добавить класс fun любым
элементам на любых страницах с минимальными затратами. Когда вам захочется
иметь различные виды класса fun (если можно так выразиться), то нужно будет
лишь изменить таблицу стилей style1.css, и новый стиль применится к вашему
сайту:
<p><span class="fun">Bubble Under</span> — группа энтузиастов дайвинга,
основанная на юго-востоке Великобритании, которая регулярно
встречается для дайвинг-вылазок в летние месяцы,
когда погода хорошая и по воде плывут барашки.
Мы проводим уик-энд, собираясь небольшими группами,
чтобы сократить расходы на проживание и проезд,
а также быть уверенными, что каждый получает надежного напарника.</p>
Примените элемент span, как показано в этом коде, к вашей странице «О нас».
Если вы сохраните изменения и посмотрите на них в браузере (помните, что нуж-
но нажать кнопку Обновить), ваша страница будет выглядеть, как показано на
рис. 3.16.
3.6. Резюме
Это была еще одна сложная глава, но посмотрите, как преобразился ваш сайт! Гла-
вой или двумя ранее вы не могли даже создать веб-страницу, а сейчас знаете, как
раскрасить ее, как преобразить любой HTML-элемент, любую часть веб-страницы
в зависимости от ее идентификатора или любой объект — иногда в разных мес-
тах — с помощью селекторов классов.
Сайт постепенно становится более ярким, но все же макет пока довольно простой.
В следующей главе вы увидите, как с помощью CSS можно изменить разметку
элементов на веб-странице: их положение, размер, форму и др. Оформление текста?
Плавали, знаем! Перейдем на следующий уровень!
4 Преображение
с CSS
В течение многих лет веб-разработчики относились к CSS как к отличному инстру-
менту для форматирования текста на веб-страницах, а также для их раскрашива-
ния. И долгое время это действительно было так, потому что браузеры не поддер-
живали CSS как следует. К счастью, наконец-то можно отметить прогресс!
В экспериментах с CSS вы сейчас достигли точки, на которой многие способные
веб-дизайнеры останавливаются. Но не вы! В этой главе вы еще подробнее озна-
комитесь с возможностями CSS, чтобы:
изменять размер и форму различных областей содержимого страницы;
изменять вид фона и границ;
располагать элементы в любых местах веб-страницы.
Начнем с первого пункта — посмотрим, как можно использовать CSS для
изменения формы и размера элементов веб-страницы. Однако перед тем, как
изучить эту технику, следует уяснить разницу между встроенными и блочными
элементами.
вкладываться внутрь других, играющих роль контейнеров. Как большая коробка не поместит-
ся в маленькую, так и вы не можете поместить элемент div внутрь p, зато можете поступить
наоборот. Постепенно вы разберетесь в этом, ведь в дальнейшем у вас будет возможность
проверить свои знания.
С блочными элементами разобрались. А что такое встроенные? Думайте о них как о безде-
лушках и других мелочах, которые обычно хранят в таких коробках. Они могут быть встроены
внутрь этих коробок, втиснуты между ними или разбросаны вокруг, но никогда не смогут
содержать в себе коробки — это невозможно. Поэтому, возвращаясь к CSS, встроенные эле-
менты не могут включать в себя блочные.
Подведем итог.
yy Блочные элементы могут содержать в себе другие блочные элементы, а также встро-
енные.
yy Встроенные элементы могут включать в себя только другие встроенные элементы.
Блочные элементы
Блочный элемент — любой, который может включать в себя другие элементы (блоч-
ные или встроенные). Опознать блочные элементы очень легко, так как они:
обычно идут отдельной строкой или занимают несколько строк (другие элемен-
ты располагаются выше или ниже, но не сбоку — по крайней мере по умол-
чанию);
служат контейнерами для других элементов.
Вот несколько примеров блочных элементов:
h1, h2, h3 и т. д. до h6;
p;
div;
blockquote;
ul и ol;
form1.
Когда вы создаете абзац, нет необходимости говорить браузеру, чтобы добавил
разрыв строки. Теги <p> и </p> сделают это за вас. Рассмотрим текст, который ото-
бражается на странице «О нас»:
chapter4\website_files\01_block_level_elements\about.html (фрагмент)
<h2>О нас</h2>
<p><span class="fun">Bubble Under</span> — группа
энтузиастов дайвинга, основанная на юго-востоке Великобритании,
которая регулярно встречается для дайвинг-вылазок
в летние месяцы, когда погода хорошая и по воде плывут барашки.
Мы проводим уик-энд, собираясь небольшими группами,
чтобы сократить расходы на проживание и проезд,
1
Формы мы рассмотрим в главе 7. — Примеч. авт.
4.1. Блочные элементы против встроенных 129
Встроенные элементы
Легкий способ отличить встроенный элемент — запомнить, что он находится
внутри другого элемента. Как вы поняли из аналогии с коробками, можно иметь
коробку с множеством старых фотографий или коробку только с одним снимком,
но нельзя иметь фотографию, полную коробок, — это физически невозможно!
Вообще-то, попытка поместить блочный элемент внутрь встроенного противоре-
чит спецификации. Хороший пример встроенного элемента — span (описанный
130 Глава 4. Преображение с CSS
СЛЕДИТЕ ЗА СИММЕТРИЕЙ
Одно из правил XHTML-синтаксиса — обязательное наличие открывающего и закрывающего
симметричных тегов. Если вы открываете теги, они должны закрываться, причем в обратном
порядке. В примере выше теги правильно открыты и закрыты. Нагляднее видно здесь:
<strong>
<em>
<cite>
<a href="http://www.bubbleunder.com/">
Bubble Under
</a>
</cite>
</em>
</strong>
Правило симметрии применяется к любому типу элементов — блочным или встроенным —
и может быть проверено с использованием валидаторов (см. главу 8).
Установление ширины
Допустим, у вас есть документ с множеством абзацев и вы хотите выделить какой-
то один из них особым способом. Для начала попробуйте изменить ширину абзаца.
Вот как это сделать с помощью CSS (аналогично с установлением полужирного
начертания):
.attentiongrab {
width: 50%;
font-weight: bold;
}
сколько сверх нормы вам придется нести, через пару переправ кто-то все
равно окажется лучше. Возможно, это будет риф.</p>
<p class="attentiongrab">Когда вы будете парковаться впервые, расстояние
между вашей выхлопной трубой и ближайшим пнем окажется равным двум
дюймам, но вы узнаете об этом, только выйдя из машины.</p>
<p>В один из самых жарких вечеров вы будете парковаться за каким-нибудь
круто упакованным красавчиком на дорогущей новой машине. Вы будете
чувствовать себя ужасно, зависть еще больше нагреет жаркий воздух
и даже перегреет жидкость в вашем радиаторе.</p>
Рисунок 4.2 показывает отображение этого текста на экране.
Установление высоты
Установить высоту блока контента так же просто, как и ширину. Впрочем, скорее
всего, вы будете использовать эту функцию реже, чем настройку ширины. Это может
вам понадобиться, например, для блока навигации, если элементов слишком мно-
го и их количество различается для разных страниц.
Посмотрите на эту HTML-разметку:
<div id="mainnavigation">
<h3>Навигация сайта</h3>
<ul>
<li><a href="home.html">Главная страница</a></li>
<li><a href="recent.html">Текущие проекты</a></li>
<li><a href="portfolio.html">Портфолио</a></li>
<li><a href="testimonials.html">Отзывы</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</div>
Как и на учебном сайте, навигация заключена внутри элемента div с идентифи-
катором mainnavigation. Как я уже говорил в начале главы, div — это блочный
134 Глава 4. Преображение с CSS
Казалось бы, поведение Internet Explorer 6, а именно игнорирование заданной высоты div
и растяжение его до размеров содержимого, — более предпочтительная реакция, но при этом
нарушаются CSS-стандарты. Поэтому по возможности просто учитывайте ситуации, когда
содержимое может выйти за пределы контейнеров. С другой стороны, вы можете установить
высоту и забыть об этом, и впоследствии это не причинит вам никакого беспокойства. Вся
прелесть CSS проявится в том, что вы легко сможете все исправить, и структура вашего сай-
та не пострадает1.
1
Существует CSS-свойство, которое вы можете использовать для контроля за поведени-
ем контента, выходящего за пределы области с четко определенными размерами. Луч-
ше всего возможности этого свойства проявляются на разделенной на части веб-стра-
нице, если количество контента в отдельных частях сильно различается. Подробнее об
этом читайте на SitePoint’s CSS Reference по адресу http://reference.sitepoint.com/css/
overflow.
136 Глава 4. Преображение с CSS
Примеры
Рассмотрим несколько примеров в действии.
НАИМЕНОВАНИЯ КЛАССОВ
Вы заметили, что я использовал для названия класса слово highlight (подсветка)? Я выбрал
его потому, что представил себе гипотетическую ситуацию: я хочу подсветить отдельный
абзац, выделить его на странице. Основное правило выбора имен — они должны описывать
цель или значение содержимого класса, к которому применяются.
Напрашивается, конечно, мысль называть класс соответственно внешнему эффекту, который
мы намереваемся создать. В частности, для примера выше я мог бы использовать название
blackborder (черная граница). Почему я этого не сделал? По очень простой причине. Что, если
в один прекрасный день я решу выбрать красный цвет? А используя название highlight, я могу
менять способ подсветки или выделения абзацев как мне угодно и не путаться между именем
класса и его содержимым. Кроме того, не придется создавать новый класс для каждого ново-
го вида дизайна HTML.
Прерывистые границы
Вы вовсе не обязаны применять для границ только сплошные линии. Примеры на
рис. 4.8 и 4.9 показывают, что можно сделать точечную или штриховую границу.
Обе границы фиолетового цвета и толщиной 10 пикселов.
.highlight {
border-width: 10px;
border-style: dotted;
border-color: purple;
}
.highlight {
border-width: 10px;
border-style: dashed;
border-color: purple;
}
Обе границы очень яркие и заметные. Рассмотрим примеры, менее бросающие
ся в глаза.
Двойные границы
Вы можете также заключить блочные элементы в двойную границу, как показано
на рис. 4.14.
140 Глава 4. Преображение с CSS
Оформление отдельных
сторон элемента
В придачу к добавлению границ для каждой стороны блочного элемента вы мо-
жете применить стиль к отдельным его краям, используя свойства border-top,
border-bottom, border-left и border-right. Вот пример блока, у которого в отдельно-
сти оформлена каждая сторона:
.highlight {
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
border-bottom-width: 3px;
border-bottom-style: dotted;
border-bottom-color: blue;
border-left-width: 5px;
border-left-style: dashed;
border-left-color: yellow;
border-right-width: 7px;
border-right-style: double;
border-right-color: fuchsia;
}
Толщина границы
Определяется в следующих единицах измерения: пикселы (px), точки (pt) или em.
Кроме того, вы можете просто указать одно из ключевых слов для толщины грани-
цы: thin — тонкая, medium — средняя или thick — толстая.
Вид границы
Граница может быть одного из следующих видов:
solid — сплошная (по умолчанию);
double — двойная;
dotted — точечная;
dashed — штриховая;
groove — желобок;
ridge — бороздка;
inset — вдавленная;
outset — выпуклая.
Цвет границы
Определяется точно так же, как цвет любого другого элемента — кодом в шестна-
дцатеричной системе или одним из ключевых слов.
До сих пор я использовал обобщенные примеры, чтобы показать все доступ-
ные возможности. А сейчас попробуйте применить некоторые из этих стилей
142 Глава 4. Преображение с CSS
1
В этом месте мне пришлось самовольно увеличить ширину раздела на 20 пикселов
(в оригинале, у Ллойда, было 180), так как русские слова длиннее английских и не по-
мещались. Краткость английских слов — жуткая головная боль всех веб-дизайнеров,
которые имеют счастье работать над обеспечением переключения языка на сайтах. —
Примеч. пер.
144 Глава 4. Преображение с CSS
Здесь выбран другой оттенок голубого цвета (помните, что в главе 3 есть ссыл-
ка на сервисы для определения шестнадцатеричного кода цвета). Результат показан
на рис. 4.18.
Это уже лучше, но выбранный цвет делает посещенную ссылку (visited) труд-
ной для восприятия. Исправьте это, выбрав более темный цвет посещенных
ссылок. Найдите правило для отображения таких ссылок и измените на следу
ющее:
a:visited {
color: navy;
}
Вот так намного лучше! Теперь измените оформление слогана, причем не толь-
ко поменяйте цвет фона и добавьте границу. В таблице стилей найдите разметку,
задающую стиль слогана, и добавьте следующие объявления, показанные ниже
полужирным шрифтом:
chapter4\website_files\05_tagline_border\style1.css (фрагмент)
#tagline p {н
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
}
4.4. Установка форм и размеров для сайта дайверов 145
h1 {
font-size: x-large;
background-color: navy;
color: white;
}
h2 {
color: navy;
font-size: 130%;
font-weight: normal;
}
Здесь для заголовков второго уровня выбрана новая высота шрифта — 130 %,
которая в большинстве браузеров чуть превышает large, но немного меньше, чем
x-large. Новый вид страницы показан на рис. 4.20.
146 Глава 4. Преображение с CSS
Добавление отступов
Если вы внимательно посмотрите на заголовки проектного сайта, которые я демон-
стрировал ранее в этой главе, то заметите, что текст примыкает к границе. Это не
очень красиво, вы согласны? Чтобы исправить это, добавим отступ — дополнитель-
ное пространство между границей и текстом. Это CSS-свойство так и называет-
ся — padding.
Отступы к блочному элементу можно применить тремя различными способами:
используя пикселы, значения em или проценты:
.pixelpadding {
padding: 30px;
border: 1px dashed gray;
}
.empadding {
padding: 2em;
border: 1px dashed gray;
}
.percentagepadding {
padding: 5%;
border: 1px dashed gray;
}
Рис. 4.21. Три способа задания отступа дают один и тот же результат на экране
Поля
Итак, вы уже знаете, как изменить размер блочного элемента, задать для него гра-
ницу по своему вкусу и добавить дополнительные отступы, чтобы сместить со-
держимое элемента от края границы. Рассмотрим еще одно полезное CSS-свой
ство — margin.
Свойство margin позволяет задать величину свободного пространства снаружи
от границы элемента. Единственная разница в CSS-коде для двух абзацев, пока-
занных на рис. 4.23, — добавление свойства margin: 30px для второго из них.
Рис. 4.23. Разница между отступами и полями видна яснее, когда есть граница
Изменим поля для двух элементов: ul и h2. Различные браузеры задают разные
значения по умолчанию для полей этих элементов. Не будем на них полагаться
и зададим собственное значение 15px, одинаковое для обоих элементов.
chapter4\website_files\07_heading_padding\style1.css (фрагмент)
h2, ul {
margin-top: 15px;
}
Блочная модель
Рассмотрим сейчас модель, похожую на вложенные коробки. Вид блочного эле-
мента можно изменять, используя комбинацию свойств margin, border, padding,
height и width. На рис. 4.24 показано, как можно представить их графически.
1
http://www.sitepoint.com/launch/cssforum.
2
http://www.sitepoint.com/books/css2.
4.5. Свободное расположение элементов на странице 151
Отображение структуры
Вспомним, какие разделы есть на нашем сайте:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Свяжитесь с нами через BubbleUnder</title>
<meta charset="windows-1251"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Дайвинг-клуб на юго-западе Великобритании — сделай плюх
с нами!</p>
</div>
</div> <!-- Окончание раздела header -->
<div id="navigation">
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="contact.html">Свяжитесь с нами</a></li>
</ul>
</div> <!-- Окончание раздела navigation -->
<div id="bodycontent">
<h2>Свяжитесь с нами </h2>
<p>Чтобы узнать больше, свяжитесь с секретарем клуба Бобом Добалина
по телефону 01793 641207 или по электронной почте
bob@bubbleunder.com. </p>
</div> <!-- Окончание раздела bodycontent -->
</body>
</html>
СЛЕДИТЕ ЗА ГРАНИЦАМИ
Собираясь «перекроить» свою страницу с помощью CSS, запомните полезное правило: до-
бавьте временную границу к каждому разделу, который планируете передвинуть. С граница-
ми увидеть эффекты от ваших действий будет куда проще. А затем, как только надобность
в них отпадет, вы без труда уберете этот временный стиль.
Здесь���������������������������������������������������������������������
применяются���������������������������������������������������������
��������������������������������������������������������������������
небольшие�����������������������������������������������
��������������������������������������������������������
отступы���������������������������������������
����������������������������������������������
, �������������������������������������
�����������������������������������
также������������������������������
�����������������������������������
нижние�����������������������
�����������������������������
поля������������������
����������������������
, ����������������
делающие��������
отобра-
�������
жение содержимого нагляднее (ведь, например, разделы sitebranding и tagline нахо-
�����
дятся внутри header). На рис. 4.25 показано, как документ выглядит в браузере.
Выглядит немного уродливо. Ничего, скоро будет еще хуже, но ненадолго — пока
мы будем перекомпоновывать текст. Это примерно как переставлять в доме мебель:
в разгаре процесса вы в панике от царящего вокруг хаоса, но конец все же наступа-
ет и воцаряются красота и порядок. Именно так сейчас все и будет на нашем учеб-
ном сайте. Итак, начинаем двигать коробки!
Абсолютное позиционирование
Наверное, самый простой метод размещения элементов на странице с помощью
CSS — абсолютное позиционирование. Используя его, мы определяем позиции
(или координаты) верхней левой точки каждого элемента. Примерно как в мага-
зине. Вам случалось говорить продавцу нечто вроде: «Покажите, пожалуйста, часы
пятые слева и третьи сверху»?
4.5. Свободное расположение элементов на странице 153
1
Хотя разницы никакой нет, 1 фарлонг составляет около 200 м. Эта единица измерения
используется в основном на скачках в Англии, США и Ирландии. — Примеч. пер.
4.5. Свободное расположение элементов на странице 155
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
}
chapter4\website_files\11_absolute_mess\style1.css (фрагмент)
#navigation, #bodycontent, #header {
position: absolute;
}
Ваша страница должна выглядеть так, будто ее подняли высоко в небо, по-
болтали в воздухе и уронили на землю. Все части смешались в кучу (рис. 4.29).
Но не беспокойтесь — это нормально!
#navigation, #bodycontent {
top: 120px;
}
#bodycontent {
left: 220px;
}
Посмотрите в браузере, что получилось. На рис. 4.31 показано, как должна вы-
глядеть ваша страница.
4.5. Свободное расположение элементов на странице 159
#navigation, #bodycontent {
top: 107px;
}
#bodycontent {
left: 200px;
}
#header {
width: 100%;
}
Самый главный вопрос: что эта разметка сделает с сайтом? Посмотрим. Соот-
ветствует ли результат в вашем браузере тому, что показано на рис. 4.32?
Ну, я почти счастлив. А вы? Заголовки и слоган лучше дополняют друг друга
благодаря сочетающимся границам. Задайте для заголовка (header) верхнюю гра-
ницу шириной 3 пиксела и установите для нее какой-нибудь светло-голубой цвет —
например, такой, как использовали для слогана. И, пожалуй, уберите точечную
рамку вокруг навигационного блока — сейчас, с новым красивым дизайном, она
не нужна.
chapter4\website_files\15_final_layout\style1.css (фрагмент)
#navigation {
width: 180px;
background-color: #7da5d8;
}
#header {
border-top: 3px solid #7da5d8;
}
4.5. Свободное расположение элементов на странице 161
Наконец страница выглядит так, как надо. Навигация — слева, именно там, где
все привыкли ее видеть, основное содержимое — справа, а заголовок растягивается
162 Глава 4. Преображение с CSS
сверху на всю ширину окна браузера. Вам удалось создать полноценный CSS-макет,
который очень пригодится вам в будущем, когда захочется изменить вид сайта,
ведь макет применяется к каждой странице.
Вы заметили, что на протяжении всей главы вы не затрагивали ни HTML, ни
содержимое страницы? Все изменения вы выполняли лишь в CSS-коде. Вы убеди-
лись, что можно манипулировать контентом, используя комбинации границ, от-
ступов, ширины, размеров и позиционирования с помощью CSS. Представьте
только, что ваш проект будет существовать несколько лет, иметь много страниц
с разным содержимым — и изменить его дизайн будет все так же просто!
Вы хотите, чтобы блок навигации располагался с правой стороны? Нет проблем.
Просто поменяйте координаты этого раздела в CSS, сдвинув содержимое влево,
как вы меняете местами элементы мозаики, и вид сайта изменится, прежде чем вы
успеете об этом подумать. В этом и заключается могущество CSS в создании сай-
тов — и вы выучили только правильные способы!
left: 200px;
background-color: red;
width: 120px;
height: 120px;
}
#yellowblock {
position: absolute;
top: 25px;
left: 25px;
background-color: yellow;
color: red;
width: 60px;
height: 60px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Абсолютное позиционирование</h1>
<div id="redblock">
<div id="yellowblock">Желтый!</div>
</div>
<p>Абсолютное позиционирование красного квадрата — смещение
на 200 пикселов сверху и 200 слева.</p>
<p>Желтый квадрат расположен внутри красного, на 20 пикселов
сверху вниз от него и на 20 пикселов слева направо.</p>
</body>
</html>
Сейчас мы поместили элемент div с id-атрибутом yellowblock внутрь элемента
div с id-атрибутом redblock, а затем задали для него абсолютное позиционирова-
ние — смещение на 20 пикселов сверху вниз и еще на 20 — слева направо. Как вы
думаете, где окажется желтый квадрат? Результат показан на рис. 4.34.
Относительное позиционирование
Применяя абсолютное позиционирование, мы размещаем все элементы относи-
тельно определенной точки начала координат: левого верхнего угла окна браузера
либо левого верхнего угла родительского элемента. С относительным позициони-
рованием любая величина смещения, которую вы укажете, будет применяться
относительно исходного местоположения элемента, до того, как вы примените
правило стиля. Вот несколько примеров правил стилей. Обратите внимание на
правило, которое применяется к элементам класса nudged:
p {
background-color: #ccc;
}
.nudged {
position: relative;
top: 10px;
left: 10px;
}
Далее я приведу HTML-код, в котором класс под названием nudged применен
к среднему абзацу:
<p>Наконец мы перешли к массажу, которого я ждал. Все началось с висков.
Затем парикмахер принялся перетаскивать верхнюю половину моего лица
к челюстям и обратно своими крупными сильными руками. Это, наверное,
хорошо для вас, но вовсе не подходит для меня, я уверен. Затем он
перешел к моим плечам и принялся скручивать меня так, что я визжал, как
поросенок. Это было отнюдь не расслабляюще, о нет! Мне было больно,
я был практически завязан в узел, но приходилось терпеть — должно быть,
так было нужно.</p>
<p class="nudged">Потом он схватил мою голову и с заметным треском изо всех
сил повернул ее вправо. А затем влево — уже без треска. И это был еще
не конец…</p>
<p>В заключение парикмахер взял большие щипцы, обмотал их ватой,
смоченной в чем-то вроде спирта, поджег и принялся вращать
их вокруг моей головы и ушей. Несколько волосков на голове
и ушах опалило огнем.</p>
Этот класс можно было бы применить к любому абзацу (и вообще к любому
блочному элементу). На рис. 4.35 показан текст с изначальным местоположе-
нием среднего абзаца, а затем — результат применения класса nudged к элемен-
ту р.
4.6. Другие параметры разметки 165
Рис. 4.35. Средний абзац оформлен так же, как остальные абзацы (слева), а затем расположен
относительно предыдущего местоположения (справа)
Заметьте, что разметка сдвинула абзац вниз и вправо на 10 пикселов так, что
левая и правая его границы теперь не соответствуют границам других абзацев. Это
действительно был толчок, а не просто отступ с левой стороны.
Кстати, если вам интересно, текст в этом примере расписывает «прелести» тра-
диционного турецкого бритья. Это приятно… если, конечно, вы любите удоволь-
ствия подобного рода!
Преимущества относительного позиционирования. В некоторых случаях от-
носительное позиционирование может быть лучше абсолютного, которое я пред-
ложил для нашего учебного сайта. Я сказал «в некоторых случаях», ибо это зависит
от компоновки вашей страницы, от браузера. Здесь нет четких правил. Например,
при выборе относительного позиционирования форматирование текста лучше
адаптируется к изменению размера шрифта в браузере (в Internet Explorer ис-
пользуется команда ВидРазмер текстаКрупный или Самый крупный). С фиксиро-
ванным размером области заголовка (в нашем случае 107 пикселов) значительное
увеличение шрифта текста может повредить его, приведя к тому, что текст выйдет
за пределы отведенного ему пространства и «наедет» на область навигации, как
показано на рис. 4.36. Однако, как упоминалось ранее в этой главе, большинство
браузеров в наше время увеличивают всю страницу пропорционально, а не одни
только текстовые области. Если же вы хотите масштабировать только текст, то
нужно залезть немного глубже в настройки браузера, чтобы найти этот параметр.
Посетители сайта также вряд ли будут тратить свое время на поиски способа уве-
личить только текст, так что эта проблема со временем теряет актуальность.
И все-таки почему мы использовали абсолютное, а не относительное позицио-
нирование в нашем учебном сайте? Дело в том, что относительное позициониро-
вание в CSS довольно сложно, и вы могли бы даже оставить свои намерения стать
веб-дизайнером, безрезультатно провозившись с ним долгое время. Опытные веб-
дизайнеры используют в работе сочетание абсолютного, относительного и плава
ющего позиционирования. К каждому проекту необходим свой индивидуальный
подход. С опытом вам достаточно будет взглянуть на макет страницы, чтобы при-
кинуть, какая схема лучше подойдет.
166 Глава 4. Преображение с CSS
chapter4\website_files\16_em_based_positioning\style1.css (фрагмент)
# navigation, #bodycontent {
top: 6.54em;
}
Сохраните файл и обновите страницу в браузере. Видимых глазу изменений вы не заметите
до тех пор, пока не попробуете поменять размер шрифта. Теперь, поскольку div-элементы
позиционированы с использованием em, дизайн намного лучше сохраняет свой вид даже при
очень больших размерах шрифта. Выбор числа 6,54 кажется случайным. Я определил его
методом проб и ошибок, стремясь к сохранению расстояния от верхней части окна браузера
до нижней границы слогана, независимо от используемого размера шрифта.
Ранее в этой главе мы обсуждали тонкости выбора единиц измерения. Это и есть пример,
когда лучшим выбором будет использование em. Вы можете прочитать об этом подробнее
в статье Патрика Гриффита (Patrick Griffith) о резиновом дизайне1.
1
http://www.alistapart.com/articles/elastic.
4.6. Другие параметры разметки 167
Плавающее позиционирование
Техника, любимая многими веб-дизайнерами, — применение плавающих1 эле-
ментов, когда верстка страницы осуществляется с использованием свойства float.
Все просто: когда нам требуется обтекание какого-то элемента остальным содер-
жимым страницы, мы закрепляем одну его сторону, позволяя другим элементам
располагаться вокруг. Точно планируя, можно создать несколько плавающих эле-
ментов на странице и добиться эффекта верстки нескольких колонок, как в газете.
Рассмотрим простой пример:
#nav {
float: right;
width: 300px;
background-color: yellow;
}
Если вы не хотите, чтобы текст принимал форму буквы L и обтекал блок нави-
гации, добавьте в CSS свойство padding. В примере выше для блока навигации
установлена ширина 300 пикселов, так что, если вы добавите отступ шириной
310 пикселов с правой стороны для текста, он должен сделать свое дело. Вот об-
новленная версия файла:
#nav {
float: right;
width: 300px;
background-color: yellow;
}
.contentconstrained {
padding-right: 310px;
}
Значение свойства класса contentconstrained должно применяться к div-элементу,
включающему в себя абзацы, вот так:
<div id="nav">
<ul>
<li><a href="index.html">Это область навигации — плавающий элемент,
зафиксированный справа</a></li>
<li><a href="turkish.html">История бритья по-турецки</a></li>
<li><a href="http://www.bubbleunder.com/">Рассказы дайверов</a></li>
</ul>
</div> <!-- Окончание раздела nav -->
<div class="contentconstrained">
<h1>История бритья по-турецки</h1>
<p>Наконец мы перешли к массажу, которого я ждал. Все началось с висков.
Затем парикмахер принялся перетаскивать верхнюю половину моего лица
4.6. Другие параметры разметки 169
Это, в общем-то, все, что я хотел рассказать вам о плавающих элементах. У них
есть неприятная особенность: приходится повозиться, чтобы добиться корректно-
го отображения нескольких плавающих элементов на странице. Если вы хотите
больше о них узнать, почитайте следующие книги издательства SitePoint: The CSS
Anthology: 101 Essential Tips, Tricks & Hacks1 и в особенности HTML Utopia: Designing
Without Tables Using CSS2.
1
http://www.sitepoint.com/books/cssant2/.
2
http://www.sitepoint.com/books/css2/.
4.7. Оформление списков 171
4.8. Резюме
Итак, это была еще одна очень важная глава. Вы изучили различия между внутрен-
ними и блочными элементами, затем рассмотрели разнообразные способы оформ-
ления блочных элементов, например добавление границ, отступов, изменение раз-
меров. Вы перешли от теории к практике, применив некоторые стили к учебному
сайту. И наконец, вы узнали, как может быть изменена внутренняя структура веб-
страницы с использованием CSS-позиционирования, а также ознакомились с ва-
риантами оформления списков.
Я надеюсь, вы получили личный опыт в использовании всех перечисленных
правил, а сейчас я приготовил для вас небольшой бонус. В следующей главе мы
рассмотрим, как можно быстро и просто применять все эти техники.
Далее мы поработаем с рисунками: вы узнаете, как с помощью CSS установить
фоновое изображение и внутренние изображения, которые могут быть помещены
на страницу как часть ее содержимого (например, фотография с дайверами из
главы 2).
1
http://www.sitepoint.com/books/cssant2/.
5 Начинаем рисовать!
Используем на сайте
изображения
Помните, в главе 2 мы пошли на некоторые компромиссы, чтобы наш сайт не вы-
глядел слишком скучно и бесцветно: добавили фотографию дайверов, используя
элемент img1. Это было сделано не просто так. Сеть — это в первую очередь визу-
альный канал передачи информации. Тексты без оформления могут удержать вни-
мание пользователей, только если они поистине выдающиеся, в то время как изо-
бражение «заменяет тысячу слов». К сожалению, тогда мы лишь слегка затронули
огромный пласт возможностей, связанных со вставкой изображений, чтобы поско-
рее добавить на страницу наш первый визуальный элемент.
В этой главе мы исправим это упущение и обсудим, как с помощью изображений
оживить сайт, а также как работать с фоновыми картинками. Кроме того, я объяс-
ню вам несколько простых техник для организации и обработки изображений
с использованием программ, которые предлагал установить в разделе «Не только
текст» главы 1.
Начнем с того, что рассмотрим внутристрочные изображения.
1
http://reference.sitepoint.com/html/img/.
2
Просматривая исходный код других сайтов, вы можете встретить тег img без закрыва
ющего слеша /. В ранних версиях HTML (4.01, например) не требовалось закрывать тег
таким образом. — Примеч. авт.
174 Глава 5. Начинаем рисовать! Используем на сайте изображения
Веб-доступность1
Практика присвоения элементу img атрибута alt берет свое начало от одного из
главных принципов веб-доступности. Это область веб-дизайна и программиро-
вания, на которой специализируется много людей. Работать с этой областью не-
просто, но я постараюсь дать вам общее представление о ней. По-настоящему
доступный сайт открыт для всех и может быть использован даже людьми с огра-
ниченными возможностями.
Есть несколько категорий пользователей с ограниченными возможностями.
Они могут столкнуться с определенными проблемами.
Слабовидящие люди. Не слишком ли мелок шрифт вашего сайта? Может ли он
увеличиться?
Слепые люди. Присутствуют ли атрибуты alt и достаточно ли исчерпывающе
они описывают изображения?
Глухие люди. Если вы применяете на сайте звуковые элементы, например
аудиоинтервью, есть ли у него альтернативная текстовая версия?
Люди с ограниченными двигательными возможностями. Может ли такой посе-
титель свободно двигать мышью? Если нет, может ли он использовать навигацию
сайта с помощью одной только клавиатуры?
Люди, имеющие проблемы с чтением. Не слишком ли сложны для восприятия
тексты на вашем сайте? Смогут ли их понять люди, страдающие дислексией,
или те, для кого язык сайта — неродной?
1
Web Accesibilty (англ). К сожалению, на русском языке информации по этой теме прак-
тически нет (на момент перевода книги) и искать нужные сведения придется на англий-
ском. — Примеч. пер.
176 Глава 5. Начинаем рисовать! Используем на сайте изображения
Это очень сложная и глубокая тема, выходящая за рамки данной книги, по-
этому я не буду приводить здесь детальные описания решений проблем, пере-
численных выше. Попробуйте подумать над ними сами. Впрочем, достаточ-
но лишь аккуратно использовать атрибуты alt, и это сделает ваш сайт более
доступным.
Если вы хотите больше узнать о веб-доступности, то посетите сайт Dive Into
Accessibility1 — бесплатный и надежный источник знаний.
1
http://www.webaim.org/simulations/screenreader/.
2
http://www.freedomscientific.com/products/fs/jaws-product-page.asp.
178 Глава 5. Начинаем рисовать! Используем на сайте изображения
5.3. Прозрачность
При сохранении изображение становится прямоугольным и заполняет все доступ-
ное пространство. Но представьте, что ваша картинка имеет другую форму — на-
пример, овальную, как логотип компании на рис. 5.5. Прямые углы изображения
не позволят красиво установить его в качестве фонового рисунка, но это можно
сделать с помощью формата GIF. Из 256 цветов, поддерживаемых этим форматом,
один используется для создания прозрачности, как показано на рис. 5.5.
1
Еще известен как маска-канал. — Примеч. пер.
5.4. Создание галереи изображений 181
Обновление навигации
Для того чтобы добавить новый элемент навигации, выполните следующее.
1. Откройте страницу index.html в текстовом редакторе.
2. Найдите блок навигации и добавьте в него еще одну ссылку:
<div id="navigation">
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="contact.html">Свяжитесь с нами</a></li>
<li><a href="gallery.html">Фотогалерея</a></li>
</ul>
</div> <!-- Окончание раздела navigation -->
3. Сохраните файл и проверьте в браузере, что ссылка вставлена правильно.
4. Повторите процедуру для файлов about.html и contact.html.
Навигация на всех ваших страницах должна выглядеть, как показано на
рис. 5.7.
chapter5\website_files\01_link_in_nav\gallery.html (фрагмент)
<p>Здесь представлены самые впечатляющие фотографии, когда-либо сделанные
членами клуба на пленочную или цифровую фотокамеру.</p>
<p>Если вы хотите добавить сюда свое фото,
<a href="mailto:bob@bubbleunder.com"> напишите мне</a> (Боб).</p>
4. Измените содержимое элемента title на: Фотогалерея. Подводные фотографии.
5. Сохраните изменения и проверьте в браузере, что получилось.
Форматирование рисунков
с использованием CSS
При создании галереи изображений многие люди делают одну и ту же распростра-
ненную ошибку: применяют графические программы для создания границ вокруг
изображений. Как вы помните из главы�����������������������������������������
����������������������������������������
3, для создания разнообразных рамок мож-
но использовать CSS. Применим сейчас эту технику! Как насчет тонкой белой
границы, как на снимках Polaroid?
1. Откройте файл style1.css и добавьте новое правило для элементов img.
chapter5\website_files\03_polaroid_effect\style1.css (фрагмент)
img {
border: 15px solid white;
}
Именование изображений
Возьмите любую газету, пролистайте ее, и вы убедитесь, что все фотографии там
снабжены подписями. Это стандартная практика, и сейчас я собираюсь показать
вам, как можно добавить подписи к изображениям на нашем сайте. Сначала по-
думаем, какая информация должна появиться под фотографиями. Наверное,
это должно быть описание снимка, включающее место съемки и имя фотографа.
Все эти элементы нужно единообразно отформатировать, для чего я собираюсь
использовать два новых стиля.
chapter5\website_files\04_unstyled_caption\gallery.html (фрагмент)
<div class="galleryphoto">
<img src="gallery/turtle-bite.jpg" width="400"
height="258" alt=" <img src="gallery/turtle-bite.jpg"
width="400" height="258"
alt="Черепаха отлично себя чувствует, плавая среди кораллов,
несмотря на старую травму от зубов акулы"/>
</div>
3. Добавьте элемент span вокруг имени фотографа, чтобы оформить его от
дельно.
chapter5\website_files\04_unstyled_caption\gallery.html (фрагмент)
<p>Эта черепаха довольно грациозно плавала у Большого Барьерного Рифа
(Квинсленд, Австралия), несмотря на отсутствующий с правой стороны
фрагмент панциря, предположительно после атаки акулы.
<span class="photocredit">[Фотограф: Йен Ллойд]</span></p>
chapter5\website_files\05_styled_caption\style1.css (фрагмент)
.galleryphoto p {
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 430px;
line-height: 1.4em;
}
chapter5\website_files\05_styled_caption\style1.css (фрагмент)
.photocredit {
font-weight: normal;
color: gray;
}
Сейчас вспомним о том, что наша прекрасная белая рамка для фотографий га-
лереи применяется ко всем изображениям на сайте. Эту проблему очень легко
решить. Тег <img> для снимков галереи сейчас размещается внутри элемента div,
у которого есть класс galleryphoto.
Можно использовать это имя класса в селекторе правила, которое применяется
к рамке:
chapter5\website_files\05_styled_caption\style1.css (фрагмент)
.galleryphoto img {
border: 15px solid white;
}
chapter5\website_files\07_custom_divider\style1.css (фрагмент)
.galleryphoto {
padding-bottom: 20px;
border-bottom: 1px solid navy;
margin-bottom: 10px;
}
Picasa
В главе 1 я советовал пользователям Windows скачать и установить программу
Picasa, предназначенную для редактирования изображений (как собственных
снимков, так и фотографий для сайта). Кроме этого, Picasa позволяет одним нажа-
тием кнопки применять к снимкам специальные эффекты. Представьте, что мы
увеличим втрое папку gallery, добавив туда еще два снимка! После того как вы уста-
новите Picasa, любое изображение, добавленное в эту папку, будет автоматически
появляться в библиотеке Picasa (рис. 5.15).
Двойной щелчок кнопкой мыши на любом из изображений откроет панель
инструментов для обработки, расположенную с левой стороны (рис. 5.16).
Наверное, один из самых важных инструментов здесь — Crop (Обрезка). Вы мо-
жете убрать все ненужное по краям фотографии, чтобы выделить основную часть
изображения.
5.5. Основы редактирования изображений 191
Preview
В главе 1 я упоминал небольшую удобную программу для пользователей Mac,
которая называется Preview. Она по умолчанию открывает в Mac PDF-документы,
но также имеет несколько встроенных функций для редактирования изображе-
ний. Я никогда не убираю Preview с панели быстрого доступа — это мое любимое
приложение для обработки изображений. Я просто выделяю в Finder изобра-
жения, которые хочу отредактировать, и перетаскиваю их на ярлык Preview.
Они открываются в этой программе в таком виде: уменьшенные эскизы изобра-
жений справа и выбранное изображение слева. Чтобы обрезать изображение,
я щелкаю на нем кнопкой мыши и выделяю область, которую хочу оставить,
а затем нажимаю сочетание клавиш Command+K (или выбираю меню ToolsCrop
(ИнструментыОбрезка)). Программа Preview обрезает изображение, но — это
важно! — не сохраняет файл. Можете сохранить его, выбрав команду FileSave
(ФайлСохранить). Если же у вас много изображений, требующих обрезки, сде-
лайте следующее.
1. Пройдитесь по всем изображениям, обрезая их, как вам нужно.
2. Как только вся обрезка выполнена, выберите меню FileSave All (ФайлСохра-
нить все). После закрытия Preview вы можете быть уверены, что ничего не по-
5.5. Основы редактирования изображений 193
Специальные эффекты
Программы вроде Photoshop предлагают огромное количество специальных эф-
фектов, а обо всех доступных там техниках написано множество книг. Нужно ли
объяснять, что в этой книге нет возможности дать полное описание таких техник,
но даже те программы, которые мы рассмотрели, располагают подходящими функ-
циями. Исследуем их!
Picasa
На рис. 5.19 показан скриншот нашей успешно обрезанной картинки с рыбкой.
В левой части окна на вкладке Effects (Эффекты) приведен список различных
эффектов, которые можно применить к рисунку. Доступны, например, сепия, чер-
но-белые цвета, мягкий фокус и т. п.
194 Глава 5. Начинаем рисовать! Используем на сайте изображения
Я, пожалуй, оставлю это изображение как есть. Вы теперь знаете, где найти
набор разнообразных эффектов, — попробуйте поэкспериментировать!
Preview
Preview никогда не позиционировалась как графическая программа. Но если в ва-
шем распоряжении нет iPhoto, воспользуйтесь Preview, расположенной в папке
Applications (Приложения). Хотя это и не полноценный графический редактор, про-
грамма имеет некоторые полезные функции, заслуживающие внимания.
Preview отлично справляется с конвертацией файловых форматов. Я часто от-
крываю изображение в Preview и выбираю команду Save As (Сохранить как).
Например, откройте BMP-файл (растровое изображение) и сохраните его как
PDF. Таким образом, если ваше изображение не годится для размещения в Ин-
тернете, с помощью Preview вы можете преобразовать его в GIF, JPG или PNG.
Preview позволяет не только обрезать, но и вращать изображения, поворачивать
их вокруг вертикальной или горизонтальной оси, настраивать цвета (причем на
высоком уровне).
Кроме того, в Preview вы можете аннотировать изображения. Инструменты для
этого незамысловаты, но все же позволяют поместить на изображение текст,
а также выбрать для него шрифт, размер, цвет и другие основные свойства.
Ничего особенного, но минимальными усилиями вы можете добиться неплохих
результатов и сохранить их в формате по своему выбору.
Picasa
Если где-то на жестком диске у вас уже есть изображения, они автоматически по
явятся в библиотеке Picasa. Ниже описан простой способ создать подходящее для
веб-страницы изображение из большой фотографии.
1. Найдите нужное изображение в галерее Picasa и щелкните на нем кнопкой
мыши.
2. Выберите в меню команду FileExport Picture to Folder (ФайлЭкспортировать
картинку в каталог).
3. Откроется диалоговое окно (рис. 5.20), которое позволит вам выбрать ширину
из предлагаемого перечня подходящих для Интернета размеров: 320, 480, 640,
800 и 1024 пикселов. Вместо этого введите в текстовое поле значение 400. Вы мо-
жете также выбрать способ JPEG-сжатия в списке Image Quality control (Управ-
ление качеством изображения). Чем ниже число, тем меньше размер изображе-
ния и… тем хуже выглядит ваша фотография.
4. Нажмите кнопку Browse (Обзор) и выберите папку Web, где лежат файлы для
вашего сайта. Но не выбирайте папку gallery! Если вы это сделаете, Picasa создаст
вторую папку gallery внутри первой.
196 Глава 5. Начинаем рисовать! Используем на сайте изображения
Preview
Для уменьшения снимка в программе Preview нужно выполнить следующее.
1. В меню выберите ToolsAdjust Size (ИнструментыКорректировать размер).
2. Откроется новое диалоговое окно для выбора размеров изображения. В каче
стве единиц измерения могут быть указаны сантиметры или другие единицы.
Но вы работаете с изображениями для Интернета и, в принципе, для отображе-
ния на экране, поэтому выберите в списке пикселы.
3. Введите значение 400 (высота будет уменьшена пропорционально). Нажмите
кнопку OK.
4. Сохраните файл командой FileSave (ФайлСохранить).
1
Хорошие коллекции перечислены здесь: http://freewarehome.com/Graphics/Graphic_
Manipulation/.
198 Глава 5. Начинаем рисовать! Используем на сайте изображения
1
http://www.istockphoto.com/.
2
http://www.fotosearch.com/.
5.8. Фоновые изображения в CSS 199
Повторяющееся изображение
В CSS-файле можно добавить свойство background-image и установить его значе-
ние:
#repeatedclouds {
border: 1px solid black;
padding: 20px;
background-color: #aebbdb;
background-image: url(clouds.jpg);
}
1
http://www.flickr.com/photos/tags/scuba/.
200 Глава 5. Начинаем рисовать! Используем на сайте изображения
Заметьте, что это правило включает также фоновый цвет. Всегда, устанавливая
фоновое изображение, выбирайте также альтернативный фоновый цвет на тот
случай, если изображение не загрузится. Если браузер найдет изображение, кото-
рое вы указали, он использует его; если нет, то вместо него отобразится заданный
фоновый цвет, как показано на рис. 5.23. Это очень важно. Представьте, что в ка-
ком-то месте на вашей странице белый текст располагается на темном фоновом
рисунке. На случай, если изображение повреждено или не загрузилось, вам обяза-
тельно нужен темный фоновый цвет для этого раздела, иначе у пользователей на
белом фоне отобразится белый текст, который невозможно будет прочесть.
Неповторяющиеся изображения
Возможно, вы хотите показать фоновое изображение только один раз. Например,
поместить за текстом логотип компании наподобие водяного знака. Что ж, и это
можно осуществить с помощью CSS так же легко и просто, как в предыдущих при-
мерах. В этом случае вам нужно установить значение no-repeat, чтобы сообщить
браузеру, что картинку не нужно повторять, а также указать место, где изображение
должно появиться.
Вот как это сделать:
#palmtree {
border: 1px solid black;
background-color: white;
background-image: url(palm-trees.jpg);
background-repeat: no-repeat;
background-position: right top;
padding: 60px;
padding-right: 210px;
}
(top — вверху, center — в центре или bottom — внизу). Если вы используете значение
no-repeat без указания background-position, то браузер по умолчанию поместит
изображение в левом верхнем углу.
#palmtree {
border: 1px solid black;
background: white url(palm-trees.jpg) no-repeat right top;
padding: 60px;
padding-right: 210px;
}
Общий тон рисунка довольно темный, поэтому белый шрифт заголовка будет
на нем хорошо читаться, а левая часть незаметно перейдет в синий фоновый цвет,
который использован для заголовка h1. Мы обсуждали эту технику, применяя
градуированный фон для слогана. Лучший способ ее оценить — попробовать на
практике! Напечатайте приведенный ниже код или скопируйте его из архива кода.
Я советую вам попробовать поменять размер окна браузера, чтобы оценить пере-
мены, вызванные применением фоновых изображений.
Здесь выбрано изображение, которое длиннее, чем заголовок главной страни-
цы. Таким образом мы гарантируем, что страница отобразится корректно, даже
если пользователи значительно увеличат шрифт и размер элемента возрастет.
Да-да, нужно учитывать и такую возможность!
Напишите CSS-код для достижения этого эффекта. Убедитесь, что пишете его
после общего правила для заголовков h1, h2, h3, ведь требуется заменить простую
синюю заливку, которую вы применили в главе 4. Дополните правило для заголов-
ка h1 новой строкой.
chapter5\website_files\11_heading_background\style1.css (фрагмент)
h1 {
font-size: x-large;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
background: navy url(backgrounds/header-bg.jpg) repeat-y right;
}
Эффект продемонстрирован на рис. 5.34.
5.9. Резюме
В этой главе вы научились искать бесплатные изображения в Интернете и обраба-
тывать собственные фотографии, чтобы наполнять галерею изображений для
сайта. Мы обсудили процедуру изменения размера изображений и применение
различных эффектов. Я также рассказал, как можно задействовать CSS, чтобы
добавлять разнообразные эффекты к изображениям (например, разноцветные рам-
ки) без применения редакторов для обработки изображений, а также об использо-
вании изображений в качестве фоновых рисунков для украшения страницы.
Правда, впечатляет, как преображается сайт с использованием рисунков? Всего
парой глав ранее это был просто скучный набор текстов, а сейчас он уже немного
похож на настоящий современный сайт, который вы к тому же легко можете пре-
образить, лишь немного изменив CSS-файл.
Из главы 6 вы узнаете все о таблицах. Я покажу, как с их помощью можно вы-
водить данные в аккуратном, простом для восприятия виде.
6 Таблицы: средства
для организации
данных
Название этой книги — «Создай свой веб-сайт с помощью HTML и CSS». Я хотел
бы это подчеркнуть перед разговором о таблицах, так как в недобрые старые вре-
мена именно с таблиц начиналась бы книга об HTML-верстке, а автор учил бы вас,
как с их помощью компоновать страницу! Запомните раз и навсегда: это очень,
очень, очень плохой подход. Тем не менее — что бы вы думали? — и в наше время
выходят книги о том, как использовать таблицы для верстки. Надеюсь, что они не
попали вам в руки!
Как и заявлено в названии, таблицы разработаны для представления упорядо-
ченных данных, например:
календаря событий;
баланса денежных средств;
списка контактов;
и т. д.
Во многих отношениях использование таблиц — наилучший вариант, но ком-
поновка элементов веб-страницы — не тот случай!
1
http://reference.sitepoint.com/html/table/.
2
http://reference.sitepoint.com/html/tr/.
3
http://reference.sitepoint.com/html/th/.
4
http://reference.sitepoint.com/html/td/.
6.3. Оформление таблиц 215
<tr>
<td>Джейн Бредли</td>
<td>02380 123123</td>
<td>02380 577566</td>
<td>Саутгемптон</td>
</tr>
<tr>
<td>Фред Бредли</td>
<td>01273 177166</td>
<td>01273 946376</td>
<td>Брайтон</td>
</tr>
<tr>
<td>Лайонел Рундель</td>
<td>01793 641207</td>
<td>01793 626696</td>
<td>Суиндон</td>
</tr>
</table>
Видите, как все складно? Элементы, составляющие таблицу, на первый взгляд
могут показаться сложными, но их названия легко запомнить, как и названия
большинства других HTML-элементов.
Как мы можем это изменить? Если вы подумали о CSS, ставьте себе пятер-
ку, — именно они нам и помогут!
Наверное, это не то, чего вы ожидали. Интервалы между ячейками могут быть
удалены свойством border-collapse: collapse, добавленным в правило для элемента
table.
Уберем интервалы между ячейками и немного украсим нашу таблицу. Устано-
вим левостороннее выравнивание для заголовков. По умолчанию содержимое
ячеек с заголовками (th) выравнивается по центру, что может выглядеть нелогич-
но по отношению к другим ячейкам, которые изначально выровнены по левому
краю. На рис. 6.5 показаны результаты следующих изменений (и некоторых других
мелких доработок):
table {
border-collapse: collapse;
border: 1px solid black;
}
th {
text-align: left;
background: gray;
color: white;
padding: 0.2em;
}
td {
border: 1px solid black;
padding: 0.2em;
}
Ну что, уже немного получше, не так ли?
table.schedule {
/* объявления для таблиц с расписанием */
}
table.events {
/* объявления для таблиц событий */
}
Затем, когда вы добавите таблицу в HTML-разметку, останется задать соответ-
ствующий атрибут class:
<table class="rates">
Предусмотрительность — очень полезное качество.
Линеаризация
Читая содержимое таблицы, экранный диктор линеаризует ее. Что это означает?
Всего-навсего то, что экранный диктор читает содержимое таблицы ячейка за ячей-
кой в том порядке, в каком они появляются в разметке. В качестве примера рас-
смотрите табл. 6.2, которая представляет собой программу телепередач. Визуально
совсем несложно связать время и соответствующую передачу.
Таблица 6.2. Пример отображения телепрограммы в виде таблицы
21.30–22.00 22.00–23.00 23.00–23.45
Новости регионов «Хор» «Безумцы»
218 Глава 6. Таблицы: средства для организации данных
Summary. Итоги?..
Нет-нет, я не собираюсь подводить итоги до окончания главы! Я просто хочу пред-
ставить вам новый атрибут — summary. Он никак не отображается на экране или,
например, на бумаге при печати веб-страницы, но используется для предоставле-
ния дополнительной информации о таблице для читающих устройств. Вот пример
summary:
<table summary="Региональные представители и их телефонные номера">
Старайтесь, чтобы содержимое summary было кратким, но информативным. Этот
атрибут используется аналогично alt в отношении изображений: будьте лаконич-
ны, но выражайтесь ясно.
Подписи к таблицам
Если вы думаете, что на написание атрибута summary только впустую тратится вре-
мя, так как его содержимое не выводится на экране, то не волнуйтесь. Для отобра-
жения на экране у нас есть элемент caption. Он должен находиться внутри элемен-
та table. Можете использовать CSS, чтобы оформлять этот элемент точно так же,
как и заголовки. Вот как будет выглядеть разметка:
1
http://reference.sitepoint.com/html/th/scope/.
6.4. Веб-доступность таблиц 219
По-моему, результат может быть описан одним словом: тьфу! Как и неоформ-
ленная таблица, которую вы уже видели, получившаяся таблица выглядит очень
некрасиво и воспринимается с трудом. К счастью, у вас есть CSS! И первая ваша
задача — сделать таблицу более читабельной и добавить ей границы.
Откройте файл style1.css и добавьте новые правила для элементов th и td. Вот
как они должны выглядеть.
chapter6\website_files\03_events_table_borders\style1.css (фрагмент)
table.events {
border-collapse: collapse;
}
table.events th {
font-size: x-small;
}
table.events td {
font-size: small;
}
Получилось четыре правила стилей.
Первое касается всех элементов table, которые имеют атрибут class со значени-
ем events. Это правило указывает свойству border-collapse удалить пробелы между
ячейками.
Второе правило использует селекторы: table.events th, table.events td влияет
на все элементы th и td между тегами <tableclass="events"> и </table>. К сожа-
лению, более простое объявление, например table.events th, td повлияет на
элементы th внутри таблицы и на все элементы td. Зато мы здесь убиваем сразу
двух зайцев (второй заяц — граница (border) и отступы (padding) вокруг каждой
ячейки).
Последние два правила устанавливают размер шрифта для ячеек и заголов-
ков.
На рис. 6.7 показан результат работы этого CSS-кода на веб-странице.
Исправим выравнивание заголовков таблицы. Как я уже говорил, по умолчанию
для заголовков задано выравнивание по центру, в то время как для информации
в ячейках — по левому краю. Это нелепо, я знаю. Изменим это.
В файле style1.css исправьте объявление для заголовков.
chapter6\website_files\03_events_table_borders\style1.css (фрагмент)
table.events th {
font-size: x-small;
text-align: left;
}
222 Глава 6. Таблицы: средства для организации данных
Это решит проблему, но пойдем немного дальше и сделаем заголовок еще при-
влекательнее.
1. Добавьте новые объявления в правило стилей для table.events th — измените
цвет текста на белый, добавьте фоновое изображение и отступы.
chapter6\website_files\04_styled_table_header\style1.css (фрагмент)
table.events th {
font-size: x-small;
text-align: left;
background: #241374 url(backgrounds/header-bg.jpg);
color: #ffffff;
padding-top: 0;
padding-bottom: 0;
padding-left: 2px;
padding-right: 2px;
}
2. Заодно оформите подпись таблицы.
chapter6\website_files\04_styled_table_header\style1.css (фрагмент)
table.events caption {
color: #000066;
font-size: small;
6.4. Веб-доступность таблиц 223
text-align: left;
padding-bottom: 5px;
font-weight: bold;
}
3. Сохраните таблицу стилей и обновите страницу в браузере. Сравните вашу
работу с рис. 6.8.
будет вам часто попадаться, — #000000, то есть черный цвет (это значит, что коли-
чество красного, зеленого и синего цветов в нем 0, 0 и 0, другими словами, здесь
вообще нет цвета).
Объединение ячеек
Самое частое усложнение структуры таблиц — объединение ячеек. Снова посмот-
рим на таблицу клубных мероприятий нашего учебного сайта и попробуем пред-
ставить для нее более сложную структуру — как в табл. 6.3 (я временно убрал фор-
матирование для лучшего восприятия).
1
http://reference.sitepoint.com/html/td/rowspan/.
2
http://reference.sitepoint.com/html/td/colspan/.
226 Глава 6. Таблицы: средства для организации данных
</tr>
<tr>
<td>12 июля</td>
<td>Общая встреча, обсуждение планов на следующий год</td>
<td>N/A</td>
<td>Боб Добалина</td>
</tr>
Казалось бы, первая строка состоит из трех ячеек (одна ячейка + две объеди-
ненные + одна ячейка = четыре), а вторая содержит всего два заголовка, но, по-
скольку крайние левая и правая ячейки уже обозначены как объединенные в пре-
дыдущей строке с помощью атрибута rowspan="2" , размеры строк совпадают
и таблица получается верной.
Вам это кажется очень трудным? Не расстраивайтесь, вы не одиноки! Многие
веб-дизайнеры пугались этих сложных конструкций в начале своей карьеры. Если
допустить ошибку в математике rowspan и colspan, то таблица отобразится в непри-
глядном виде. Вот почему я поместил этот пример в отдельном разделе.
Если вы хотите объединить ячейки таблицы, используйте один из двух спо-
собов:
применяйте специальные инструменты для веб-разработки, в которых есть
возможность конструировать таблицы с визуальным контролем (например,
Dreamweaver)1;
просто нарисуйте таблицу на бумаге. Начните с простой таблицы без всяких
объединений, где будут только столбцы и строки в нужном вам количестве.
После того как вы это сделаете, пометьте номера столбцов и строк, которые вам
нужно объединить. Закончив макет на бумаге, переведите его на язык HTML —
и все!
1
http://www.adobe.com/products/dreamweaver/.
2
http://reference.sitepoint.com/html/th/scope/.
6.5. Сложные таблицы 227
сится к ней, не забывай это!» В коде ниже вы можете видеть, как это выглядит
формально:
<tr>
<th scope="col">Дата</th>
<th scope="col">Событие</th>
<th scope="col">Стоимость</th>
<th scope="col">Контакты</th>
</tr>
Таблица нашего проектного сайта содержит заглавные ячейки только для столб-
цов, но вам может попасться и таблица с наименованиями строк, например, пока-
занная на рис. 6.10.
6.6. Резюме
Итак, когда вам нужно представить информацию в аккуратном, упорядоченном
виде, таблица — наилучший вариант, а в HTML есть много важных инструментов
для работы с ней. В этой главе мы рассмотрели, как с помощью простейших HTML-
элементов расположить данные в необходимом порядке, а также использовать CSS
для придания таблицам привлекательного внешнего вида. Мы также затронули
вопрос о том, как сделать таблицу доступной для всех.
Теперь, уделив необходимое внимание таблицам, пора двигаться дальше — к тех-
нологиям, позволяющим людям общаться друг с другом на вашем сайте, а также
взаимодействовать с самим сайтом. Все эти возможности предоставляют формы.
Следующая глава посвящена именно им!
1
http://www.456bereastreet.com/archive/200410/bring_on_the_tables/.
7 Формы: взаимодействие
с аудиторией
Одно из огромных преимуществ Интернета — бесконечный поток информации.
Термин веб-серфинг появился не случайно: как и�������������������������������
������������������������������
настоящие серферы, пользовате-
ли никогда не знают заранее, где они окажутся в конце концов; если тема им инте-
ресна, они продолжают ее изучать. Но простое чтение, переход по ссылкам и снова
чтение, пожалуй, слишком пассивны. Пользователи не вовлечены в процесс непо-
средственно, они просто воспринимают информацию. И в какой-то момент они
понимают: им нужно общение, обмен данными с сайтом.
Представьте ситуацию: вы планируете отпуск, например хотите заказать поезд-
ку на дайвинг или серфинг. Вы приступаете к сбору информации о курортах,
читаете отзывы других людей, знакомитесь с фотообзорами. Выбрав место, вы
отправляетесь на поиски сайта, где можно купить путевку, оплатить перелет
и т. п. В процессе бронирования вы должны ввести данные о себе: имя или адрес.
Скорее всего, вы также выберете даты путешествия из раскрывающегося списка
или укажете какие-то особенности тура, установив нужные флажки. Такие данные
вносятся через HTML-форму.
В этой главе вы познакомитесь с разными элементами форм, узнаете, в каких
случаях те или иные нужно (и не нужно) использовать и как обрабатывать инфор-
мацию, отправленную через форму. Для закрепления материала вы добавите про-
стую форму на проектный сайт клуба дайверов: она позволит посетителям отправ-
лять веб-мастеру запросы о будущих дайверских мероприятиях. Но для начала
просто познакомимся с составляющими формы.
1
http://reference.sitepoint.com/html/form/.
230 Глава 7. Формы: взаимодействие с аудиторией
</head>
<body>
<h1>Простая форма</h1>
<form method="get" action="simpleform.html">
<p>
<label for="yourname">Введите ваше имя:</label>
<input type="text" name="yourname" id="yourname"/>
</p>
<p><input type="submit"/></p>
</form>
</body>
</html>
Введите свое имя в текстовое поле и нажмите кнопку (обычно она помечается
как Submit1 (Отправить запрос)). Страница перезагрузится, а ваше имя исчезнет из
текстового поля. Если вы посмотрите на адресную строку, то увидите, что введен-
ные вами данные появились в адресе страницы. Это должно выглядеть вот так:
file:///C:/Documents%20and%20Settings/Bob%20Dobalina/My%20Document
s/Web/simpleform.html?yourname=Bob
Пока мы никак не используем введенную информацию, но даже на этом пре-
дельно простом примере вы видите, что данные вводятся и доступны для исполь-
зования.
Посмотрим на другие элементы, которые можно поместить в форму.
1
Если вы хотите изменить название кнопки, например, чтобы оно было на русском
языке: Отправить, нужно добавить в тег input атрибут value="name" (целиком получит-
ся: <input type="submit" value="Отправить">). — Примеч. пер.
2
http://reference.sitepoint.com/html/form/method/.
232 Глава 7. Формы: взаимодействие с аудиторией
post — зависит от того, что вы собираетесь делать с данными (см. врезку «Get
или post?» ниже). В примере выше я указал get.
action1 — говорит браузеру, куда отправить данные, собранные в форме. Обыч-
но это другая веб-страница, которая считывает и интерпретирует введенные
данные.
1
http://reference.sitepoint.com/html/form/action/.
2
Methods GET and POST in HTML Forms — what’s the difference? (http://www.cs.tut.
fi/~jkorpela/forms/methods.html).
7.3. Составные элементы формы 233
<p><input type="submit"/></p>
</fieldset>
</form>
На рис. 7.3 показано, как выглядит форма с добавлением этих новых элемен-
тов.
ВЛОЖЕНИЕ FIELDSET
Вы ничем не ограничены в использовании fieldset1 и legend2. В сложной форме вы можете
вкладывать эти элементы друг в друга, чтобы логически поделить ее на области, как показа-
но на рис. 7.4.
Элемент label
Элементы управления — это фрагменты формы, с помощью которых пользователь
может ввести данные (например, текстовые поля ввода) или выбрать параметры.
Элемент label3 подсказывает пользователю, какие данные требуются в каждом из
элементов управления.
1
http://reference.sitepoint.com/html/fieldset/.
2
http://reference.sitepoint.com/html/legend/.
3
http://reference.sitepoint.com/html/label/.
234 Глава 7. Формы: взаимодействие с аудиторией
Элемент input
Итак, вступление закончено, перейдем к практическому использованию элементов
формы. В этом разделе вы научитесь получать данные от пользователей. Первый
элемент, на котором мы остановимся, — input2. К этому типу относятся все элемен-
ты управления, с помощью которых пользователь взаимодействует с формой.
Элементы input очень разнообразны. Их вид и функция сильно меняются в за-
висимости от значения атрибута type3. Вот какие они могут быть:
text — поле ввода текста;
password — поле для ввода пароля;
checkbox — флажок;
radio — переключатель;
hidden — скрытое поле;
submit — кнопка отправки формы.
Каждое из этих значений помещает на страницу уникальный элемент управле-
ния. Начнем с самого часто встречающегося элемента — текстового поля ввода.
1
http://reference.sitepoint.com/html/label/for.
2
http://reference.sitepoint.com/html/input/.
3
http://reference.sitepoint.com/html/input/type/.
7.3. Составные элементы формы 235
Часть yourname взята из атрибута name элемента input и используется для иден-
тификации данных из каждого поля формы.
Атрибут id. На первый взгляд он аналогичен name, и для некоторых элементов
управления это так. Однако, как вы увидите позднее, разные элементы могут
иметь одно и то же имя, поэтому атрибуты id используются для различения
элементов на странице.
Кроме того, с помощью id-атрибута связываются элементы label и input. В об-
щем, он может быть использован для нескольких целей. Вы уже видели в этой
книге, что id-атрибут применяется при оформлении макетов с помощью CSS.
Но в данном примере его основная функция — предоставление ссылки для
связи input и label.
К элементу input можно также применить следующие атрибуты:
size2 — сообщает браузеру, какой длины должно быть текстовое поле, то есть
какое максимальное количество символов должно в нем отображаться (в идеа-
ле, конечно, следует указывать это с помощью CSS);
maxlength3 — устанавливает максимальное количество символов, которое можно
ввести в текстовое поле.
1
http://reference.sitepoint.com/html/input/name/.
2
http://reference.sitepoint.com/html/input/size/.
3
http://reference.sitepoint.com/html/input/maxlength/.
236 Глава 7. Формы: взаимодействие с аудиторией
Флажок1
Элемент checkbox очень хорош, когда нужно получить ответы вида «да/нет». В то
время как текстовое поле ввода доступно для написания любого текста, с флажком
у пользователя есть только два варианта ответа: да или нет (рис. 7.7).
1
В среде разработчиков (не только HTML) принято называть эти термины простой каль-
кой с английского: «чекбокс», «инпут» и т. п., поэтому старайтесь запоминать и англий-
ские термины. — Примеч. пер.
238 Глава 7. Формы: взаимодействие с аудиторией
Переключатель
Флажки применяются, когда вы можете позволить пользователю выбрать несколь-
ко ответов. Но что делать, если допускается выбор лишь одного варианта в каждый
момент времени? В этом случае следует использовать переключатели (рис. 7.8).
Рис. 7.8. Переключатель
Элемент select
Переключатели позволяют выбирать только один вариант из нескольких, что очень
полезно… до какого-то момента. Что, если для выбора предлагается 20 или более
пунктов? Вы на самом деле хотите, чтобы они все отображались на странице, в то
время как выбрать можно только один? Наверное, нет. Гораздо лучше использовать
раскрывающийся список1. Этот элемент управления дает возможность пользова-
телю выбрать один вариант, но занимает на веб-странице куда меньше места. Соб-
ственно говоря, он помещается в одну строку, а пользователь видит все варианты,
когда нажимает маленькую кнопку рядом со списком (обычно в виде треугольни-
ка). Вы тысячи раз видели элемент, показанный на рис. 7.9!
1
http://reference.sitepoint.com/html/select/.
240 Глава 7. Формы: взаимодействие с аудиторией
Элемент select содержит набор элементов option. Каждый элемент option — это
пункт раскрывающегося списка. Вот HTML�����������������������������������
���������������������������������������
-код для этого типа элемента управ-
ления:
<p>
<label for="role">Что лучше всего описывает вас?</label>
<select name="role" id="role">
<option>Секретарь</option>
<option>Веб-разработчик</option>
<option>Менеджер</option>
<option>Уборщик</option>
<option>Другое</option>
</select>
</p>
Выбранный по умолчанию пункт списка. Как и в случае с переключателем или
флажком, можно выбрать по умолчанию один из пунктов раскрывающегося списка.
Для этого понадобится атрибут selected со значением selected.
Вот HTML-код, показанный выше, с выбранным по умолчанию пунктом Веб-
дизайнер:
<p>
<label for="role">Что лучше всего описывает вас?</label>
<select name="role" id="role">
<option>Секретарь</option>
<option selected="selected">Веб-разработчик</option>
<option>Менеджер</option>
<option>Уборщик</option>
<option>Другое</option>
</select>
</p>
Элемент textarea
Текстовое поле ввода хорошо подходит для ввода и отправки кратких сообщений,
но неэффективно для больших текстовых фрагментов. Видимая область поля по-
казывает минимальное количество текста, как вы, вероятно, знаете из опыта ис-
1
Этот термин не имеет однозначного короткого перевода на русский язык и в общем
случае означает удобство использования. Относительно программных продуктов (в част
ности, веб-страниц) он описывает легкость нахождения нужных кнопок или ссылок,
интуитивную понятность интерфейса, приятность в использовании, минимальное ко-
личество ошибок, которые может сделать пользователь. — Примеч. пер.
7.3. Составные элементы формы 241
1
http://reference.sitepoint.com/html/textarea/.
242 Глава 7. Формы: взаимодействие с аудиторией
МЫШИ НЕ ТРЕБУЮТСЯ
Наиболее привычный способ отправки формы — нажатие кнопки с помощью мыши, но он не
единственный. Вместо этого можно просто ввести данные во все поля формы и нажать кла-
вишу Enter.
Стандартное представление
элементов формы
К сожалению, в разных браузерах и разных операционных системах формы ото-
бражаются по-разному. В этой книге для большинства скриншотов я использовал
Firefox и Windows, но вам важно представлять, как будут видеть вашу форму люди,
которые используют другие браузеры или операционные системы. Представьте,
что мы собрали в одной форме все возможные элементы и хотим посмотреть, как
с ней справятся различные браузеры.
На рис. 7.13 показано представление такой формы в Firefox в Windows.
Firefox для Mac OS X напоминает его собрата в Windows, но более изящен, как
и все компоненты в Mac (рис. 7.15)1.
Отображение формы в браузере Safari почти идентично отображению в Firefox
для Mac OS X. Раскрывающийся список также изменен характерным для Mac
образом, а кнопка Submit (Отправить запрос) имеет красивую полукруглую форму
(рис. 7.16).
Как видите, есть небольшие различия в отображении элементов управления
разными браузерами. Хотя можно многое настроить с помощью CSS, отображение
флажков, переключателей и раскрывающихся списков сильно зависит от операци-
онной системы пользователя. Нужно всегда помнить об этой особенности, так как
очень трудно настроить идентичное отображение формы во всех браузерах. Да здрав-
ствуют различия — вот и все.
1
На рис. 7.15 и 7.16 показаны оригинальные варианты форм. — Примеч. ред.
244 Глава 7. Формы: взаимодействие с аудиторией
INTERNET EXPLORER
И ПУСТЫЕ ЭЛЕМЕНТЫ FIELDSET
Если вы используете Internet Explorer старше 8-й версии, скорее всего, у вас не отобразится
граница элемента ����������������������������������������������������������������������������
fieldset��������������������������������������������������������������������
.  ����������������������������������������������������������������
Internet��������������������������������������������������������
Explorer�����������������������������������������������
�������������������������������������������������������
7 и предыдущих версиях граница элемента field-
������
set не выводится, если внутри ничего нет, кроме legend. Другие браузеры будут показывать
границу, даже если элемент fieldset пустой.
Если вы работаете в Internet Explorer 7 (или старше), добавьте любой временный контент в эле-
мент fieldset, чтобы увидеть границу. Примерно так:
chapter7\website_files\03_temporary_form_content\contact.html (фрагмент)
<form action="" method="post" class="contact">
<fieldset>
<legend>Расскажите нам о дайвинг-мероприятии</legend>
<!-- какой-то временный контент -->
<p>Здесь будут элементы формы</p>
</fieldset>
</form>
form.contact legend {
font-weight: bold;
font-size: small;
color: navy;
padding: 5px;
}
CLASS-ИФИКАЦИЯ ФОРМ
Для стилизации элементов формы я использовал класс contact так же, как использовал класс
events�����������������������������������������������������������������������������������
для оформления таблицы в главе 6. Я сделал так на тот случай, если позднее понадо-
бится добавить на сайт другие формы или таблицы. Например, можно создать в будущем
форму поиска, которая внешне должна отличаться от контактной.
margin: 0;
margin-top: -15px;
line-height: 150%;
}
4. Перед элементом input добавьте элемент label со значением Имя контакта. Пом-
ните, что необходимо указать атрибут for c���������������������������������
����������������������������������
о значением, совпадающим с содер-
жимым id-атрибута элемента input.
5. Сохраните веб-страницу и откройте ее в браузере.
Что получилось? Появилось ли текстовое поле? Если нет, проверьте свой
HTML-код.
chapter7\website_files\05_contact_name\contact.html (фрагмент)
<form action="" method="post" class="contact">
<fieldset>
<legend>Расскажите нам о дайвинг-мероприятии</legend>
<div>
<label for="contactname">Имя</label>
<input type="text" name="contactname" id="contactname"/>
</div>
</fieldset>
</form>
Контейнер div будет удерживать все эти элементы вместе и добавит отступы до
и после них. Аналогично мы будем поступать, добавляя на страницу и другие эле-
менты.
<div>
<label for="contactname">Имя</label>
<input type="text" name="contactname" id="contactname"/>
</div>
<div>
<label for="telephone">Номер телефона</label>
<input type="text" name="telephone" id="telephone"/>
</div>
<div>
<label for="email">Адрес электронной почты</label>
<input type="text" name="email" id="email"/>
</div>
<div>
<label for="eventname">Название мероприятия</label>
<input type="text" name="eventname" id="eventname"/>
</div>
<div>
<label for="eventdate">Дата мероприятия</label>
<input type="text" name="eventdate" id="eventdate"/>
</div>
</fieldset>
</form>
252 Глава 7. Формы: взаимодействие с аудиторией
Затем добавьте атрибут class всем элементам label, которые сейчас находятся
в файле contact.html. Ваш HTML-код будет выглядеть так:
chapter7\website_files\07_aligned_inputs\contact.html (фрагмент)
<form action="" method="post" class="contact">
<fieldset>
<legend>Расскажите нам о дайвинг-мероприятии</legend>
<div>
<label for="contactname" class="fixedwidth">Имя</label>
<input type="text" name="contactname" id="contactname"/>
</div>
<div>
<label for="telephone" class="fixedwidth">Номер телефона</label>
<input type="text" name="telephone" id="telephone"/>
</div>
<div>
<label for="email" class="fixedwidth">Электронный адрес</label>
<input type="text" name="email" id="email"/>
</div>
<div>
<label for="eventname" class="fixedwidth">Название мероприятия</label>
<input type="text" name="eventname" id="eventname"/>
</div>
<div>
<label for="eventdate" class="fixedwidth">Дата мероприятия</label>
<input type="text" name="eventdate" id="eventdate"/>
</div>
</fieldset>
</form>
yy Уэльс;
yy Другая страна (детали см. ниже).
Вот каким получится ваш HTML-код:
<div>
<label for="region" class="fixedwidth">В каком регионе будет
мероприятие?</label>
<select name="region" id="region">
<option> Юго-запад </option>
<option>Юго-восток</option>
<option>Мидлендс</option>
<option>Центральный регион</option>
<option>Лондон</option>
<option>Восток</option>
<option>Север</option>
<option>Шотландия</option>
<option>Северная Ирландия</option>
<option>Уэльс</option>
<option>Другая страна (детали см. ниже) </option>
</select>
</div>
На рис. 7.23 показан скриншот получившейся веб-страницы.
Форма почти готова. Честно говоря, это и сейчас достаточно подробная форма
ввода, но лучше увидеть в деле все элементы управления формой, которые мы
рассмотрели; поэтому быстренько выполним последнее задание: добавим флажки
и переключатель.
1
Читайте на сайте http://webstandards.org/learn/tutorials/accessible-forms/01-accessible-
forms.html о том, как расположение меток влияет на веб-доступность формы.
260 Глава 7. Формы: взаимодействие с аудиторией
вам понадобится добавить еще одну форму для других целей, то придется перейти
к платной учетной записи. Такого рода сервисов довольно много, и, если предла-
гаемые ими возможности не устраивают вас, попробуйте поискать в Сети другие
сайты по запросу free form email service.
Сделав это, вы попадете на страницу, где можете начать создание своей формы.
Система управления будет на этой же странице; в противном случае нажмите
кнопку New Form (Новая форма) (рис. 7.28). Если вы начали работу, прервали ее,
не закончив, а затем вернулись на сайт, то увидите свою форму внизу экрана. В этом
7.5. Обработка введенных в форму данных 263
После добавления полей формы нужно будет выбрать еще несколько парамет-
ров. Установите флажок Show our "Thank You" Page (Показать нашу страницу «Спа-
сибо»), что позволит отображать страницу благодарности Feedback. Вместо этого,
впрочем, можно посылать пользователю настроенную вами страницу благодарно-
сти, которую вы сделаете позднее, если захотите. Вы можете также установить
флажок Email (Электронная почта), в результате чего будете получать копию каж-
дого заполнения формы (рис. 7.30), иначе в этой услуге просто нет смысла!
X, Y И Z В ПОЛЯХ ФОРМЫ
Еще один важный момент, который я хотел бы отметить, прежде чем вы начнете ломать го-
лову, что не так с вашей работой, — во всех моих примерах далее значения для полей acctid
и formid заданы как XXXXXXXXXXX, YYYYYYY, ZZZZZZZZZZZZ и т. д. Что это значит? Абсолютно
ничего! Они приведены там только для того, чтобы обратить ваше внимание на необходи-
мость войти в Freedback под своей учетной записью и ввести корректные данные. А это
только примеры для книги! В предыдущих изданиях я использовал реальные данные для
собственной формы, в результате чего получал сотни форм, направленных прямиком мне,
а не их автору. Так и вижу веб-разработчика, проверяющего по книге разметку и удивля
ющегося: «Здесь же все правильно! Почему тогда моя форма не приходит мне?» Да потому,
что в форму были введены не его, а мои входные данные и форма приходила на мою почту.
Внимательно проверяйте все значения!
</tr>
<tr>
<td valign="top">
<strong>Номер телефона</strong>
</td>
<td valign="top">
<input type="text" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" size="40" value=""/>
</td>
</tr>
<tr>
<td valign="top">
<strong>Адрес электронной почты</strong>
</td>
<td valign="top">
<input type="text" name="email" id="email" size="40" value=""/>
</td>
</tr>
<tr>
<td valign="top">
<strong>Название мероприятия</strong>
</td>
<td valign="top">
<input type="text" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" size="40" value=""/>
</td>
</tr>
<tr>
<td valign="top">
<strong>Дата мероприятия</strong>
</td>
<td valign="top">
<input type="text" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" size="40" value=""/>
</td>
</tr>
<tr>
<td valign="top">
<strong>В каком регионе будет мероприятие?</strong>
</td>
<td valign="top">
<select name="field-ZZZZZZZZZZZZZ" id="field-ZZZZZZZZZZZZZ">
<option value="South-west">Юго-запад</option>
<option value="South-east">Юго-восток</option>
<option value="Midlands">Мидлендс</option>
<option value="Central">Центральный регион</option>
<option value="London">Лондон</option>
<option value="East">Восток</option>
<option value="North">Север</option>
<option value="Scotland">Шотландия</option>
<option value="Northern Ireland">Северная Ирландия</option>
7.5. Обработка введенных в форму данных 267
</form>
<br><center><font face="Arial, Helvetica" size="1"><b>
<a href="http://www.freedback.com">create web form</a>
</b></font></center>
<!-- Окончание формы Freedback -->
<div>
<label for="contactname" class="fixedwidth">Имя</label>
<input type="text" name="name" id="name" size="40" value=""/>
</div>
<div>
<label for="telephone" class="fixedwidth">Номер телефона</label>
<input type="text" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" size="40" value=""/>
</div>
<div>
<label for="email" class="fixedwidth"> Адрес электронной почты </label>
<input type="text" name="email" id="email" size="40" value=""/>
</div>
<div>
<label for="eventname" class="fixedwidth"> Название мероприятия </label>
<input type="text" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" size="40" value=""/>
</div>
<div>
<label for="eventdate" class="fixedwidth"> Дата мероприятия</label>
<input type="text" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" size="40" value=""/>
</div>
<div>
<label for="region" class="fixedwidth">В каком регионе
будет мероприятие?</label>
<select name="field-ZZZZZZZZZZZZZ" id="field-ZZZZZZZZZZZZZ">
<option value="South-west">Юго-запад</option>
<option value="South-east">Юго-восток</option>
<option value="Midlands">Мидлендс</option>
<option value="Central">Центральный регион</option>
<option value="London">Лондон</option>
<option value="East">Восток</option>
<option value="North">Север</option>
<option value="Scotland">Шотландия</option>
<option value="Northern Ireland">Северная Ирландия</option>
<option value="International (see details below)">Другая страна (детали
см. ниже)</option>
</select>
</div>
<div>
<p>Здесь можно добавить любые дополнительные детали (введите их в текстовую
область ввода ниже). Укажите их, чтобы избежать дополнительных звонков
или писем с уточнениями, а также любых накладок.</p>
<label for="details" class="fixedwidth">
Больше деталей (указывайте столько, сколько нужно!)</label>
<textarea name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" rows="6" cols="40"></textarea>
</div>
<div>
<p> Мы можем позвонить вам для уточнения информации. Какое время для звонка
270 Глава 7. Формы: взаимодействие с аудиторией
вы предпочитаете?</p>
<input type="radio" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" value="In the morning"/>
<label for="morning">Утром</label>
<br/>
<input type="radio" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" value="In the afternoon"/>
<label for="afternoon">Днем</label>
<br/>
<input type="radio" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" value="In the evening"/>
<label for="evening">Вечером</label>
<br/>
<input type="radio" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" value="No calls please"/>
<label for="never">Не звоните мне, пожалуйста</label>
</div>
<div>
<p>Bubble Under может поделиться вашей информацией с другими
заинтересованными лицами или сайтами для рекламы мероприятия. Подтвердите,
что вы согласны с этим.</p>
<input type="checkbox" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" value="I am happy for this event to
be publicised outside of and beyond BubbleUnder.com where
possible""/>
<label for="publicize">Я согласен на публикацию информации о событии
за пределами Bubble Under, если это необходимо.</label>
</div>
<div class="buttonarea">
<input type="submit" value="Отправить информацию"/>
</div>
</fieldset>
</form>
id="acctid" value="XXXXXXXXXXXX"/>
<input type="hidden" name="formid"
id="formid" value="YYYYYYY"/>
<input type="hidden" name="required_vars"
id="required_vars" value="name,email,field-ZZZZZZZZZZZZZ"/>
</div>
<fieldset>
<legend>Расскажите нам о дайвинг-мероприятии</legend>
<div>
<label for="name" class="fixedwidth">Имя</label>
<input type="text" name="name" id="name" size="40" value=""/>
</div>
<div>
<label for="field-ZZZZZZZZZZZZZ"
class="fixedwidth">Номер телефона</label>
<input type="text" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" size="40" value=""/>
</div>
<div>
<label for="email" class="fixedwidth">Адрес электронной почты</label>
<input type="text" name="email" id="email" size="40" value=""/>
</div>
<div>
<label for="field-ZZZZZZZZZZZZZ"
class="fixedwidth">Название мероприятия</label>
<input type="text" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" size="40" value=""/>
</div>
<div>
<label for="field-ZZZZZZZZZZZZZ"
class="fixedwidth">Дата мероприятия</label>
<input type="text" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" size="40" value=""/>
</div>
<div>
<label for="field-ZZZZZZZZZZZZZ"
class="fixedwidth">В каком регионе будет мероприятие?</label>
<select name="field-ZZZZZZZZZZZZZ" id="field-ZZZZZZZZZZZZZ">
<option value="South-west">Юго-запад</option>
<option value="South-east">Юго-восток</option>
<option value="Midlands">Мидлендс</option>
<option value="Central">Центральный регион</option>
<option value="London">Лондон</option>
<option value="East">Восток</option>
<option value="North">Север</option>
<option value="Scotland">Шотландия</option>
<option value="Northern Ireland">Северная Ирландия</option>
<option value="International (see details below)">Другая страна (детали
см. ниже)</option>
</select>
</div>
272 Глава 7. Формы: взаимодействие с аудиторией
<div>
<p>Здесь можно добавить любые дополнительные детали (введите их в текстовую
область ввода ниже). Укажите их, чтобы избежать дополнительных звонков или писем
с уточнениями, а также любых накладок.</p>
<label for="field-ZZZZZZZZZZZZZ" class="fixedwidth">
Больше деталей (указывайте столько, сколько нужно!)</label>
<textarea name="field-ZZZZZZZZZZZZZ" id="field-ZZZZZZZZZZZZZ"
rows="6" cols="40"></textarea>
</div>
<div>
<p>Мы можем позвонить вам для уточнения информации. Какое время для звонка
вы предпочитаете?</p>
<input type="radio" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" value="In the morning"/>
<label for="field-ZZZZZZZZZZZZZ">Утром</label><br/>
<input type="radio" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" value= "In the afternoon"/>
<label for="field-ZZZZZZZZZZZZZ">Днем</label><br/>
<input type="radio" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" value="In the evening"/>
<label for="field-ZZZZZZZZZZZZZ">Вечером</label><br/>
<input type="radio" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" value="No calls please"/>
<label for="field-ZZZZZZZZZZZZZ">Не звоните мне, пожалуйста</label>
</div>
<div>
<p>Bubble Under может поделиться вашей информацией с другими
заинтересованными лицами или сайтами для рекламы мероприятия. Подтвердите,
что вы согласны с этим.</p>
<input type="checkbox" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" value="I am happy for this event to
be publicised outside of and beyond BubbleUnder.com where
possible"/>
<label for="field-ZZZZZZZZZZZZZ">Я согласен на публикацию информации
о событии за пределами Bubble Under, если это необходимо.</label>
</div>
<div class="buttonarea">
<input type="submit" value="Отправить информацию"/>
</div>
</fieldset>
</form>
Вы наверняка заметили, что ����������������������������������������������
Freedback�������������������������������������
применил к текстовым полям ввода ат-
рибут size="40". Ничего страшного, если вы его уберете, тем более что гораздо
лучше установить ширину полей с помощью CSS, а не атрибута size.
Сохраните страницу и попробуйте открыть ее в браузере — настало время сделать
это по-настоящему! Введите данные и отправьте форму (разумеется, предвари-
тельно подключившись к Интернету). Если вы все сделали правильно, то попаде-
те на страницу подтверждения, показанную на рис. 7.32. И здесь-то вы увидите
единственный весомый недостаток использования такого метода — страница со-
7.5. Обработка введенных в форму данных 273
Мы можем позвонить вам для уточнения информации. Какое время для звонка вы
предпочитаете? Вечером
--
Date/Time: 2008-08-09 11:40:09 PDT
Sender IP: 81.109.255.237 [United Kingdom] | 4784f33t1rcqs0ic
Referrer:1
Вы можете настроить для этого код формы, изменив атрибут value. Сравните
код ниже с предыдущей версией:
<input type="checkbox" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" value="yes"/> <label
for="field-ZZZZZZZZZZZZZ">Я согласен на публикацию информации
о событии за пределами Bubble Under, если это необходимо.
</label>
1
Сервис конвертирует результаты заполнения формы через атрибут value (как будет
видно из текста ниже), а в атрибутах и вообще в разметке, как уже было сказано выше,
нежелательно использовать кириллицу. Поэтому для русскоязычных читателей письма
с информацией будут приходить либо наполовину, либо полностью на английском язы-
ке, увы. — Примеч. пер.
7.6. Резюме 275
7.6. Резюме
В этой главе мы рассмотрели различные типы элементов форм, обсудили, как и за-
чем их можно использовать. Вы шаг за шагом изучили процесс создания формы
вплоть до ее стилизации с помощью CSS�����������������������������������������
��������������������������������������������
. И наконец, вы узнали, что не обязатель-
но быть программистом, чтобы обрабатывать отправленные через форму данные.
Но если вы хотите самостоятельно управлять вашими данными, то можете изучить
какой-нибудь язык программирования, например PHP. В издательстве SitePoint
по этой теме вышла книга Кевина Янка (Kevin Yank) Build Your Own Database
DrivenWebsite Using PHP & MySQL («Создай сайт на основе базы данных, используя
PHP и MySQL»)1 — может быть, она вас заинтересует.
На этом заканчивается огромный кусок работы над проектным сайтом. У вас
есть контент, несколько красивых картинок, информация в таблицах и действующая
форма для обработки данных — и все это стилизовано с помощью CSS с широкими
возможностями для оформления в будущем. Теперь вы можете показать эти фай-
лы всему миру!
1
http://www.sitepoint.com/books/phpmysql1/.
8 Размещение сайта
в Сети
ЗАЙДИТЕ НА ФОРУМ!
Нет нужды «изобретать велосипед», когда это уже сделано. Посетите форумы SitePoint, где
вы найдете тему, посвященную веб-хостингу1.
Бесплатный хостинг
с платным доменным именем
Другой вариант — использовать бесплатный хостинг с условием предварительной
регистрации доменного имени в этой же компании. Это может быть вполне прак-
тично с учетом того, что рано или поздно вам придется развиваться и платить за
доменное имя. Это неизбежно, если только вам не посчастливилось поймать вы-
годное предложение бесплатного хостинга с адекватным доменным именем напо-
добие упомянутых выше.
Здесь есть нюанс. Сервис может предлагать бесплатный хостинг с учетом реги-
страции доменного имени у данного провайдера, но плата за регистрацию может
превышать обычную стоимость оплаты хостинга. В общем, порой слово «бесплат-
но» означает нечто совершенно иное.
1
http://www.sitepoint.com/launch/webhostingforum/.
280 Глава 8. Размещение сайта в Сети
8.4. Веб-переадресация
Если вы выбрали бесплатный или недорогой хостинг, то, наверное, получили, так
сказать, «недружественный для пользователей» адрес, то есть неудобный для
чтения и запоминания (вроде выдуманного мной http://www.freespaceforall.net/
users/~bubbleunder). Язык можно сломать, правда?
Веб-переадресация помогает без оплаты хостинга зарегистрировать приемлемое
доменное имя, указывающее туда, где на самом деле находятся ваши веб-страницы.
Посетителям будет казаться, что адрес вашего сайта короткий и легко запомина
ющийся (например, www.bubbleunder.com), и они будут успешно открывать ваши
страницы. Многие небольшие предприятия (например, семейный бизнес) исполь-
зуют веб-переадресацию, запуская свой первый сайт. Недорогой (или бесплатный)
хостинг, сочетающийся с платным доменным именем, вполне экономичен. Однако,
хоть это и кажется оптимальным решением на первый взгляд, здесь есть несколько
проблем, о которых вы должны знать.
Недостатки веб-переадресации. Часто при веб-переадресации используется
старая функция HTML под названием фрейм (frame — «конструкция, фрагмент»)1.
Обычно она применяется для того, чтобы разделить окно браузера на несколько
областей, примерно как при нарезке пирога. Фреймы используются все реже и реже
и даже не рассматриваются в этой книге (самые компетентные разработчики со-
гласятся со мной, что применение фреймов — это плохой подход, причем по многим
причинам)2. Если вы используете сервисы веб-переадресации, то ваш сайт — неза-
висимо от того, сколько страниц он включает в себя, — отобразится как единая
область, то есть один фрейм. С одной стороны, это удобно для наблюдателя (рис. 8.2).
Но на самом деле вас ждет несколько сюрпризов.
На рис. 8.2 есть несколько дефектов, которые внимательные читатели не могли
не заметить. Посмотрите на URL: как правило, название файла каждой страницы
появляется в конце, после доменного имени. Например, адрес страницы расписания
клубных мероприятий (events.html) будет таким: http://www.bubbleunder.com/events.
html. Однако веб-переадресация с использованием фреймирования будет означать,
что все ваши страницы будут иметь одинаковый адрес: http://www.bubbleunder.com.
Это влечет за собой определенные проблемы:
когда посетитель сохраняет в закладки любую из страниц сайта, вместо них
сохраняется главная страница;
сложно поставить на других сайтах ссылку на определенную страницу вашего
сайта;
когда посетитель нажимает кнопку Обновить, независимо от того, на какой стра-
нице он находился, открывается главная страница.
Другой дефект — заголовок, который мы так старательно прописывали для каж-
дой страницы сайта. Если мы используем сервис веб-переадресации, то посетитель
1
http://reference.sitepoint.com/html/frame.
2
Роджер Йоханссон Who framed the web: Frames and usability («Кто разделил Сеть: Фрей-
мы и юзабилити») (http://www.456bereastreet.com/archive/200411/who_framed_the_
web_frames_and_usability/) — хорошая дискуссия о недостатках фреймов.
8.5. Платный веб-хостинг 281
видит один и тот же заголовок на всех страницах сайта — с этим ничего нельзя по-
делать. Некоторые сервисы могут даже самостоятельно изменить заголовок сайта на
какую-нибудь ерунду, как в нашем примере, — Дешевые домены от $9,95.
И наконец, если еще недостаточно причин, чтобы дважды подумать перед тем,
как использовать веб-переадресацию, то вот вам решающий факт. Некоторые по-
исковые системы могут не индексировать контент вашего сайта, если он представ-
лен в виде фрейма подобным образом, или просто не «доверяют» ему так же, как
тем сайтам, где нет элементов frameset. Поэтому, если вы хотите, чтобы ваш сайт
было легко найти, держите в уме это ограничение.
С учетом всего вышесказанного цена за веб-хостинг уже не кажется такой
высокой.
или обязательной регистрации домена. Пусть вас не пугает, что хостинг — это
очень дорого и только крупные компании могут его себе позволить. Вовсе нет.
В наши дни предлагается много отличных хостинг-планов по вполне разумной
цене (менее $10 в месяц), и вы можете найти для себя подходящий вариант.
Конечно, чем выше цена, тем больше возможностей вам будет доступно, многие
из которых, впрочем, выглядят странными, если вы новичок в этой области.
Однако, как я уже говорил, нет нужды платить за набор функций, большинство
из которых вам никогда не понадобятся (помните — ездить на работу и обратно,
а не водить грузовик!).
Основываясь на том, что вы изучили в этой книге и что может понадобиться
вам с собственным сайтом, я немного расскажу о возможностях, на которые следу-
ет обратить внимание при выборе хостинга.
Серверные включения
(Server Side Includes, или SSIs)
Вы, наверное, уже поняли, что создание сайта требует множества действий по ко-
пированию и вставке — например, изменение навигационного блока в одном фай-
ле требует аналогичных изменений во всех остальных. С этим не будет проблем,
если страниц немного, но, если вы планируете, что ваш сайт будет бурно развивать-
ся, любые изменения могут стать очень трудоемкими.
Одним из решений могут быть серверные включения, которые позволят вам
создать файл, автоматически включаемый во все ваши веб-страницы. Изменение
одного этого файла затронет все страницы вашего сайта. Это очень полезная функ-
ция, помогающая сберечь много времени, но вам придется изучать технологию
настройки вашего персонального компьютера для работы в качестве веб-сервера.
Это не сверхсложная задача, но придется потратить на нее какое-то количество сил
и времени. У пользователей Windows есть хорошая возможность попробовать
такую технологию на примере веб-сервера Apache1. Apache — продукт с открытым
кодом, который применяется для запуска веб-серверов с сайтами любых размеров.
1
http://httpd.apache.org/.
286 Глава 8. Размещение сайта в Сети
Пользователи Mac OS X уже имеют в своем распоряжении Apache. Если у вас Mac,
можете установить флажок Personal Web Sharing (Общий веб-доступ), который
доступен в окне Sharing (Общий доступ) в области System Preferences (Системные
настройки).
Пока просто запомните, что SSI существуют и могут упростить редактирова-
ние. Хорошее описание SSI и технологии их работы в Apache доступны на сайте
yourhtmlsource.com.
САМОСТОЯТЕЛЬНЫЙ CHROME
Большинство браузеров уведомляют пользователей о необходимости обновления и запраши-
вают на это подтверждение. Но Google Chrome обновляется автоматически.
Настройки FTP
Провайдер вашего хостинга пришлет вам FTP-детали, которые будут выглядеть
примерно так, как показано ниже. В этом примере приведены вымышленные настрой-
ки для сайта Bubble Under (помните об этом, вводя реальные данные) (табл. 8.1):
Таблица 8.1. Настройки сайта Bubble Under
По-английски По-русски
Hello Bob Dobalina, Здравствуйте, Боб Добалина.
Your FTP account 'bubbleunder' has just been Ваша учетная запись FTP 'bubbleunder' успешно
activated, and you can begin uploading your активизирована, и вы можете начать загрузку
website's files to it. файлов вашего сайта на сервер. Когда вы
When you have your software and are ready to приготовите ваше ПО, для подключения вам
connect, you will need to provide it with a few понадобятся следующие данные: имя пользо-
settings: your username, password, and where вателя, пароль и точка, к которой вы хотите
you want it to connect to. подключиться.
Hostname: ftp.bubbleunder.com Хостинг: ftp.bubbleunder.com
Username: bobdobalina Имя пользователя: bobdobalina
Password: fl1bbertyg1bbet Пароль: fl1bbertyg1bbet
Path: /home/bobdobalina Путь: /home/bobdobalina
Имя хостинга, имя пользователя и пароль будут указаны всегда, а вот путь —
не обязательно; на самом деле он даже не всегда должен предоставляться. Просто
внимательно следуйте инструкциям вашего хостинга.
Сейчас, когда у вас есть вся нужная информация, загрузите несколько файлов.
1
http://cyberduck.ch/.
8.9. Загрузка ваших файлов на сервер 293
Проверка ссылок
На нашем проектном сайте немного ссылок и изображений, однако совсем ничего
не стоит допустить опечатку, чтобы нарушить связь между ссылками на веб-стра-
ницы или изображения. Многие программы для веб-дизайна или разработки вклю-
чают встроенные проверки ссылок (линк-чекеры), но нет необходимости покупать
1
http://www.adobe.com/products/dreamweaver/.
8.10. Где находится ваш сайт? 295
Сервис проверит все ваши ссылки и составит отчет обо всех найденных ссылках.
И самое главное — там будут указаны все ссылки, оказавшиеся поврежденными.
Валидация веб-страниц
Другой важный шаг, который надо сделать перед тем, как рассказать всем о новом
сайте, — выполнить валидацию веб-страниц. Это процесс проверки вашей размет-
ки на соответствие правилам языка, которые указаны в объявлении типа докумен-
та (иначе говоря, в doctype).
1
http://validator.w3.org/checklink/.
2
http://htmlreferencebook.com/.
296 Глава 8. Размещение сайта в Сети
1
http://reference.sitepoint.com/html/doctypes.
2
http://validator.w3.org/.
8.10. Где находится ваш сайт? 297
Если вы его не увидели (в том числе прокрутив страницу), возможно, ваша веб-
страница содержит ошибки, которые нужно исправить. Хорошая новость — вали-
датор пометит эти ошибки и приведет их краткое объяснение. Типичный вид со-
общения валидации показан на рис. 8.15.
ПРЯМИКОМ НА ВАЛИДАЦИЮ!
С W3C Walidator вы можете проверить свою разметку до того, как она будет загружена
в Сеть и станет общедоступной. Он также содержит функцию Direct Input (Непосредственный
ввод), которая означает, что вы можете скопировать и вставить HTML-код с любой страницы
и валидировать его. Попробуйте валидировать любую страницу проектного сайта, например
галерею. Вот к чему это приведет.
yy Появится сообщение, что страница валидна (это хорошо).
yy Вы получите предупреждение о типе документа HTML: Using experimental feature: HTML5
Conformance�����������������������������������������������������������������������
Checker���������������������������������������������������������������
����������������������������������������������������������������������
(Использование экспериментальной функции: проверка на соответ-
ствие HTML5). Это не значит, что на странице есть ошибки. Может быть, к тому времени,
когда вы будете читать этот текст, такие сообщения уже не будут появляться. Поскольку
HTML5 все еще находится в стадии разработки, валидатор проверяет на соответствие
стандартам и саму разметку. Так что это сообщение означает лишь то, что валидатор
сделал все от него зависящее, но не уверен на 100 %!
298 Глава 8. Размещение сайта в Сети
Проверяйте все!
Валидация касается не только HTML — вы можете (и должны) валидировать CSS,
используя W3C’s CSS Validator1. Вы даже можете запустить автоматический тест,
чтобы убедиться, что ваша страница доступна для людей с ограниченными возмож-
ностями2. Однако хочу заметить, что автоматические тесты лишь обращают ваше
внимание на области возможных проблем, а не подтверждают, что страница на
самом деле доступна.
Если вам покажется, что отчеты слишком подробны и трудны для понимания
(это распространенная проблема), обратитесь за разъяснениями на форум. Форум-
чане SitePoint’s CSS3 могут объяснить вам большинство пунктов в валидационном
отчете по CSS. Для разъяснений проблем, связанных с веб-доступностью, зареги-
стрируйтесь на Accessify Forum4 и разместите там свой вопрос.
1
http://jigsaw.w3.org/css-validator/.
2
Cynthia Says [http://www.contentquality.com/] — самый популярный accessability-вали-
датор.
3
http://www.sitepoint.com/launch/cssforum/.
4
http://www.accessifyforum.com/.
8.11. Раскрутка сайта 299
Если вам все-таки не удается пройти валидацию, направляйтесь на форумы SitePoint, в част-
ности на форум HTML1, и разместите там свои вопросы. Объясните форумчанам, что вы но-
вичок и нуждаетесь в помощи, и тогда обязательно получите ответы на свои вопросы и по-
мощь, чего валидатор, к моему великому сожалению, сделать не может!
Продвигайте сайт
в поисковых системах
Подавляющая часть посетителей моих собственных сайтов приходит туда из по-
исковых систем, таких как Google, Bing или Yahoo! (в этом же порядке), и то же
самое будет справедливо для вашего сайта. Однако поисковые системы пока не
знают о существовании вашего сайта. Вот как это можно изменить.
На других сайтах, известных поисковым системам, есть ссылки на ваш (именно
так поисковики прощупывают Интернет — находят ссылки на страницах, кото-
рые им известны, и добавляют их в свою базу страниц).
Вы можете заполнить форму в поисковых системах, чтобы пригласить их посе-
тить ваш сайт и проиндексировать его контент (Google4, Bing5 и Yahoo!6 пред-
лагают такие страницы).
Другая отличная возможность для начала продвижения — Open Directory Pro
ject7, который претендует на роль всеобъемлющего справочника в Интернете.
Он структурирован иерархически, и вам придется как следует поработать, чтобы
ваш сайт занял высокое место в иерархии8.
1
http://www.sitepoint.com/launch/htmlforum/.
2
http://www.sitepoint.com/books/sem1/.
3
http://www.sitepoint.com/books/freelance1/.
4
http://www.google.com/addurl/.
5
http://www.bing.com/.
6
http://search.yahoo.com/info/submit.html.
7
http://dmoz.org/add.html.
8
http://www.sitepoint.com/forums/internet-marketing-2/.
300 Глава 8. Размещение сайта в Сети
Расскажите о сайте
своим друзьям и коллегам
Эта идея очевидна, но о ней стоит упомянуть. Друзья и коллеги должны быть ва-
шими самыми преданными фанатами, даже если они никогда не видели вашего
сайта. А если вы не сообщите им адрес, то никогда не узнаете, сколько раз они
посетят ваш сайт или в разговоре с кем упомянут его.
--
Боб Добалина
Президент Bubble Under — клуба дайверов на юго-западе Великобритании
Заходите на наш сайт http://www.bubbleunder.com/
Этот метод не потребует никаких дополнительных усилий, кроме добавления
пары строк в подпись, зато теперь любое отправленное вами письмо будет привле-
кать на ваш сайт нового посетителя!
Сообщите о себе
на соответствующем форуме
Аналогично вы можете добавить сайт в подпись к постам, которые пишете, участ-
вуя в дискуссиях на форумах по проблемам, сходным с тематикой вашего сайта.
Она может включать даже активную ссылку на ваш сайт. Преимущество данного
метода в том, что другие посетители, которые пишут и читают посты на этом фо-
руме, имеют подобные интересы. Таким образом реклама сайта сразу попадает
к тем, кто в ней заинтересован.
8.12. Резюме 301
Обмен ссылками
И наконец, я рекомендую вам обратить внимание на обмен ссылками с сайтами
похожей тематики. Будьте хорошим партнером; вряд ли электронное письмо на-
подобие: «Эй, чуваки, поставьте ссылку на мой сайт, он реально классный!» — вы-
зовет интерес. Но если вы уже добавили у себя ссылку на другой сайт, ничто не
мешает попросить его администрацию разместить у себя ссылку на ваш.
Есть программы, которые автоматизируют обмен ссылками, но я не рекомендую
ими пользоваться. Вы не можете быть уверены в качестве ссылок, которые добав-
ляете на свой сайт, как и в репутации сайтов, размещающих у себя вашу ссылку.
Кроме того, такие программы часто требуют от вас размещать безобразные банне-
ры или всплывающую рекламу, отчего сайт выглядит непрофессионально. Лучше
проявить разборчивость и держать свой сайт под личным контролем.
8.12. Резюме
В этой главе мы подробно рассмотрели процесс размещения сайта в Сети: от вы-
бора хостинга для сайта до мельчайших деталей копирования файлов на сервер.
Я объяснил, как вы можете использовать бесплатные онлайн-сервисы для провер-
ки валидности ваших страниц, и предложил несколько способов раскрутить ваш
сайт, после того как он стал доступен в Сети.
Надеюсь, вам было приятно создавать сайт. Возможно, в какой-то момент вам
показалось, что это нелегко, но вы преодолели трудности и каким-то образом до
стигли результата. Но конец ли это разработки сайта? Наверное, нет — через ко-
роткое время после размещения файлов в Интернете вы, без сомнения, задумаетесь
о дополнениях. К счастью, следующая глава целиком посвящена добавлению на
ваш сайт некоторых приятных функций. Итак, чего же мы ждем?
9 Совершенствуем сайт
с HTML5 и CSS3
Может быть, вы не знали или забыли, что на протяжении книги мы уже создавали
HTML5-документы. Но это означает лишь то, что мы указывали тип документа
HTML5. Во всех остальных случаях мы применяли элементы HTML4 (или более
ранних версий) и писали разметку с использованием синтаксиса XHTML. Этот
синтаксис предписывает указывать теги и атрибуты в нижнем регистре, а также
строго соблюдать симметричность открывающих и закрывающих тегов.
Пока мы воздерживались от использования новейших классных элементов
HTML5, но в этой главе все изменится. Кроме того, ранее я избегал упоминания
новых инструментов CSS, которые набрали популярность в мире веб-дизайна,
а именно не рассказывал о CSS3. Как и HTML, весь CSS, что вы изучили до этого
момента, был простым и предсказуемым: в конце концов, это новый для вас мате-
риал. Уж чего я точно не хотел — чтобы на самой ранней стадии вы перегрузились
новым материалом и выкинули книгу в окно.
Но в этой главе мы начнем изучение HTML5 и CSS3 и попробуем применить
их на проектном сайте. Вы также узнаете, как разные браузеры обрабатывают эти
новые элементы и выполняют их функции (и, что важно, вы научитесь сглаживать
различия в отображении элементов в разных браузерах). Начнем с небольшого
обзора — что новенького встретится вам в HTML5?
1
Но если вас интересуют подробности, можете найти их здесь http://diveintohtml5.org/
past.html и http://en.wikipedia.org/wiki/HTML5.
2
Это, кстати, еще одно распространенное заблуждение. На самом деле W3C не создает
стандарты, а лишь разрабатывает «рекомендации», но большинство людей понимает их
именно как законы. С технической точки зрения это неверно, но по крайней мере люди
таким образом понимают друг друга. И это здорово!
9.1. HTML5: краткая история 303