Мэтью Мак-Дональд 3-е издание Санкт-Петербург «БХВ-Петербург» 2013 УДК 004.738.5 ББК 32.973.202 М15 Мак-Дональд М. М15 Создание Web-сайта. Недостающее руководство. — 3-е изд.: Пер. с англ. — СПб.: БХВ-Петербург, 2013. — 624 с.: ил. ISBN 978-5-9775-0806-3 Простым и понятным языком написано, как спланировать и создать Web-сайт, разместить его в Интернете. Рассмотрены основы работы с редакторами Web- страниц (Expression Web, Dreamweaver), дан обзор бесплатных редакторов. Под- робно разобраны тонкости создания таблиц стилей, добавления графики, связыва- ния страниц, разработки макета страницы. Также рассмотрены страницы с много- кратно используемыми элементами. В книге уделено пристальное внимание проблеме продвижения сайта: регистрация в поисковиках, каталогах, работа с Google Analytics, сервисом Google Places, Google AdWords, ведение сопровож- дающего блога в Facebook, Twitter, Google Groups. Описано создание собственного блога на платформе Blogger. Показано, как зарабатывать деньги на своем сайте (Google AdSense, Amazon Associates, PayPal). Описаны элементы украшения Web- сайта (добавка интерактивности с помощью JavaScript, привлекательные кнопки и меню, вставка аудио и видео). В книге имеется краткий справочник по основным HTML-элементам. Для начинающих Web-разработчиков УДК 004.738.5 ББК 32.973.202 Группа подготовки издания: Главный редактор Екатерина Кондукова Зам. главного редактора Евгений Рыбаков Зав. редакцией Екатерина Капалыгина Перевод с английского Татьяны Коротяевой Компьютерная верстка Ольги Сергиенко Корректор Зинаида Дмитриева Оформление обложки Марины Дамбиевой Authorized translation of the Creating a Website: The Missing Manual by Matthew MacDonald, ISBN: 978-1-449-30172-9, Copyright © 2011 O'Reilly Media, Inc. This translation is published and sold by permission of O'Reilly Media, Inc., the owner of all rights to publish and sell the same. Авторизованный перевод английской редакции книги: ISBN: 978-1-449-30172-9, Copyright © 2011 O'Reilly Media, Inc. Перевод опубликован и продается с разрешения O'Reilly Media, Inc., собственника всех прав на публикацию и продажу издания. Подписано в печать 31.01.13. Формат 70 1001/16. Печать офсетная. Усл. печ. л. 50,31. Тираж 1500 экз. Заказ № "БХВ-Петербург", 191036, Санкт-Петербург, Гончарная ул., 20. Первая Академическая типография "Наука" 199034, Санкт-Петербург, 9 линия, 12/28 ISBN 978-1-449-30172-9 (англ.) © 2011 O’Reilly Media, Inc. ISBN 978-5-9775-0806-3 (рус.) © Перевод на русский язык "БХВ-Петербург", 2013 Оглавление Об авторе ........................................................................................................................................ 1 Благодарности ............................................................................................................................... 1 Введение ......................................................................................................................................... 3 Что потребуется для того, чтобы начать ............................................................................................... 4 Об этой книге .......................................................................................................................................... 5 Macintosh и Windows ...................................................................................................................... 5 Несколько слов о структуре книги ................................................................................................ 5 Об | этих | разделителях .................................................................................................................. 6 О сетевых ресурсах ................................................................................................................................. 7 Отсутствующий CD ........................................................................................................................ 7 Обратная связь ................................................................................................................................ 7 Список ошибок и опечаток ............................................................................................................ 8 Информационная рассылка ............................................................................................................ 8 Safari® Books Online ................................................................................................................................ 8 Глава 1. Подготовка к вступлению в Web ............................................................................... 9 Введение в World Wide Web .................................................................................................................. 9 Web-браузеры ................................................................................................................................ 10 Web-серверы ................................................................................................................................. 14 Планирование Web-сайта ..................................................................................................................... 15 Виды сайтов .................................................................................................................................. 15 Время жизни вашего сайта........................................................................................................... 17 Приемы хорошего дизайна .......................................................................................................... 18 Компоненты Web-сайта ........................................................................................................................ 20 Глава 2. Создание вашей первой Web-страницы ................................................................. 23 Введение в HTML: язык Всемирной паутины .................................................................................... 23 Как устроен HTML-файл .............................................................................................................. 24 Просмотр HTML-кода реальной Web-страницы ........................................................................ 26 Создание HTML-файла ................................................................................................................. 26 HTML, XHTML и HTML5 ............................................................................................................ 29 HTML-теги ............................................................................................................................................. 30 Что такое тег? ................................................................................................................................ 31 Представление об элементах ....................................................................................................... 32 Вложенные элементы ................................................................................................................... 33 VI Оглавление HTML-документ .................................................................................................................................... 35 Определение типа документа....................................................................................................... 35 Базовая структура ......................................................................................................................... 37 Вставка контента .......................................................................................................................... 39 Структурирование текста ............................................................................................................. 40 А где же все картинки? ................................................................................................................ 45 10 самых важных элементов (и несколько дополнительных) ................................................... 47 Поиск ошибок на ваших страницах ..................................................................................................... 52 Глава 3. Размещение вашей страницы в Web ....................................................................... 55 Как работает Web-хостинг ................................................................................................................... 55 Из чего состоит URL .................................................................................................................... 55 Как браузеры анализируют URL ................................................................................................. 58 Имена доменов ...................................................................................................................................... 60 Выбор удачного имени домена .................................................................................................... 60 Поиск имени .................................................................................................................................. 63 Регистрация вашего имени .......................................................................................................... 64 Бесплатные имена доменов .......................................................................................................... 68 Получение места в Web ........................................................................................................................ 69 Определение ваших потребностей .............................................................................................. 71 Выбор вашего хоста ..................................................................................................................... 74 Бесплатные Web-хосты ................................................................................................................ 79 Перенос файлов ..................................................................................................................................... 80 FTP ................................................................................................................................................. 81 Выгрузка файлов с помощью браузера ....................................................................................... 83 Глава 4. Специализированные средства ................................................................................ 87 Выбор программного средства ............................................................................................................ 88 Разновидности редакторов Web-страниц ................................................................................... 89 Поиск бесплатного редактора Web-страниц .............................................................................. 90 Профессиональные HTML-редакторы ........................................................................................ 95 Работа в HTML-редакторе .................................................................................................................... 96 Запуск ............................................................................................................................................. 97 Множественные режимы отображения ...................................................................................... 97 Создание Web-страницы в режиме отображения исходного кода ........................................... 99 Создание Web-страницы в режиме WYSIWYG ....................................................................... 100 Управление Web-сайтом .................................................................................................................... 103 Задание сайта в Expression Web ................................................................................................ 104 Выгрузка сайта в Expression Web .............................................................................................. 106 Задание сайта в Dreamweaver .................................................................................................... 109 Обновление сайта в Dreamweaver ............................................................................................. 111 Глава 5. Текстовые элементы ................................................................................................ 115 Представление о тексте и Web-пространстве ................................................................................... 115 Логическая структура вместо физического форматирования ................................................. 116 CSS (каскадные таблицы стилей) .............................................................................................. 118 HTML-элементы для основного текста ............................................................................................. 119 Абзацы ......................................................................................................................................... 121 Переносы строк ........................................................................................................................... 122 Заголовки ..................................................................................................................................... 124 Горизонтальные линии ............................................................................................................... 126 Текст в заданном формате.......................................................................................................... 127 Оглавление VII Цитаты ......................................................................................................................................... 128 Разделы и оболочки .................................................................................................................... 130 HTML-элементы для создания списков ............................................................................................ 132 Нумерованные списки ................................................................................................................ 132 Маркированные списки .............................................................................................................. 134 Списки определений ................................................................................................................... 135 Вложенные списки...................................................................................................................... 135 HTML-элементы для таблиц .............................................................................................................. 137 Простая таблица .......................................................................................................................... 137 Охват ячеек .................................................................................................................................. 139 Внутристрочное форматирование ..................................................................................................... 142 Форматирование текста: курсив и жирное начертание ........................................................... 142 Несколько дополнительных элементов форматирования ....................................................... 143 Специальные символы ............................................................................................................... 144 Иностранные языки .................................................................................................................... 147 Глава 6. Таблицы стилей ........................................................................................................ 151 Основы таблиц стилей ........................................................................................................................ 152 Три вида стилей .......................................................................................................................... 152 Анатомия правила ....................................................................................................................... 154 Присоединение таблицы стилей к странице ............................................................................. 155 Применение внутренней таблицы стилей ................................................................................. 159 Применение встроенных стилей ................................................................................................ 159 Каскад .......................................................................................................................................... 161 Наследование .............................................................................................................................. 161 Более мощные селекторы ................................................................................................................... 163 Селекторы классов ...................................................................................................................... 164 Селекторы идентификаторов ..................................................................................................... 165 Цвета .................................................................................................................................................... 166 Задание цвета .............................................................................................................................. 167 Поиск нужного цвета .................................................................................................................. 168 Выравнивание и разгонка текста ....................................................................................................... 170 Выравнивание ............................................................................................................................. 171 Разгонка ....................................................................................................................................... 173 Пробелы ....................................................................................................................................... 174 Основные шрифты .............................................................................................................................. 175 Задание шрифта .......................................................................................................................... 177 Поиск подходящего шрифта ...................................................................................................... 178 Размеры шрифтов ....................................................................................................................... 180 Встроенные шрифты ........................................................................................................................... 184 Web-форматы для шрифтов ....................................................................................................... 184 Применение комплектов шрифтов ............................................................................................ 185 Применение ваших собственных шрифтов .............................................................................. 189 Границы ............................................................................................................................................... 190 Основные границы ...................................................................................................................... 191 Создание улучшенных границ ................................................................................................... 192 Применение границ в таблицах ................................................................................................. 193 Руководство по созданию таблицы стилей ....................................................................................... 195 Создание хорошо структурированной таблицы стилей .......................................................... 195 Сокращение работы с помощью элемента <div> .................................................................... 199 Сокращение работы с помощью контекстного селектора ...................................................... 201 VIII Оглавление Глава 7. Добавление графики ................................................................................................ 203 Основные сведения об изображениях ............................................................................................... 203 Элемент <img> ........................................................................................................................... 204 Альтернативный текст................................................................................................................ 204 Размер изображения ................................................................................................................... 206 Форматы графических файлов................................................................................................... 208 Размещение картинок на цветном фоне .................................................................................... 212 Изображения и стили .......................................................................................................................... 215 Встраивание изображений в текст ............................................................................................ 215 Границы ....................................................................................................................................... 216 Обтекание текста вокруг изображения ..................................................................................... 217 Вставка подписей к изображениям ........................................................................................... 221 Фоновые изображения ................................................................................................................ 222 Приемы работы с графикой ............................................................................................................... 226 Графический текст ...................................................................................................................... 227 Фон для других элементов ......................................................................................................... 228 Графические маркеры в списке ................................................................................................. 230 Поиск бесплатной графики ................................................................................................................ 231 Глава 8. Связывание страниц ................................................................................................ 235 Представление о якоре или точке привязки ..................................................................................... 235 Внутренние и внешние ссылки .................................................................................................. 237 Относительные ссылки и папки ................................................................................................ 239 Изменения цвета ссылок и подчеркивания ............................................................................... 245 Почтовые ссылки ........................................................................................................................ 246 Изображения-ссылки и карты изображений............................................................................. 249 Вставка закладок ................................................................................................................................. 252 Когда хорошие ссылки портятся ....................................................................................................... 254 Управление Web-сайтом ............................................................................................................ 255 Средства проверки ссылок ......................................................................................................... 257 Использование перенаправлений .............................................................................................. 260 Глава 9. Макет страницы ....................................................................................................... 263 Проблемы экранного пространства ................................................................................................... 263 Макет на основе стилей ...................................................................................................................... 267 Структурирование страниц с помощью элемента <div> ........................................................ 267 Плавающие блоки ....................................................................................................................... 268 Фиксированные блоки ................................................................................................................ 269 Создание макета с несколькими колонками ..................................................................................... 271 Построение макета с фиксированной шириной ....................................................................... 272 Создание макета с изменяемым размером ................................................................................ 275 Максимальная ширина: подстраховка ...................................................................................... 277 Увеличение высоты колонки ..................................................................................................... 279 Сверхгибкие сайты: дзэн Web-дизайна ..................................................................................... 281 Несколько дополнительных приемов верстки .................................................................................. 283 Применение слоев ....................................................................................................................... 283 Комбинирование абсолютного и относительного позиционирования ................................... 285 Задание размеров таблиц ........................................................................................................... 287 Глава 10. Страницы с многократно используемыми элементами ................................. 293 Представление о страницах с многократно используемыми элементами ...................................... 293 Серверные включения ........................................................................................................................ 295 Оглавление IX Шаблоны страниц ............................................................................................................................... 299 Общее представление о шаблонах страниц .............................................................................. 299 Создание нового шаблона страницы ......................................................................................... 301 Анатомия шаблона страницы .................................................................................................... 302 Применение шаблона страницы ................................................................................................ 306 Глава 11. Обнародование вашего сайта ............................................................................... 311 План продвижения вашего Web-сайта .............................................................................................. 311 Сделайте ваш сайт удобным для поисковых машин ........................................................................ 313 Выбирайте информативные названия страниц ........................................................................ 314 Вставляйте описание страницы ................................................................................................. 315 Предоставляйте замещающий текст ко всем своим изображениям ....................................... 317 Применяйте информативный текст для ссылок ....................................................................... 317 Не пытайтесь жульничать .......................................................................................................... 318 Регистрация в каталогах ..................................................................................................................... 319 Каталог Open Directory Project ................................................................................................... 319 Каталог Yahoo ............................................................................................................................. 322 Регистрация с помощью поисковых машин ..................................................................................... 323 Повышение ранга в результатах поиска ................................................................................... 325 Как спрятаться от поисковых машин ........................................................................................ 326 Google Webmaster Tools ............................................................................................................. 329 Отслеживание посетителей ................................................................................................................ 332 Описание Google Analytics ......................................................................................................... 333 Регистрация в Google Analytics ................................................................................................. 335 Просмотр вашего Web-трафика................................................................................................. 337 Глава 12. Продвижение Web-сайта ....................................................................................... 345 Рассказать всем ................................................................................................................................... 346 Беззастенчивая самореклама ...................................................................................................... 346 Google Places ............................................................................................................................... 347 Google AdWords .......................................................................................................................... 349 Вернувшиеся посетители ........................................................................................................... 351 Превращение сайта в сообщество ..................................................................................................... 353 Взращивание Web-сообщества .................................................................................................. 353 Инструменты Web-сообществ ................................................................................................... 354 Электронные информационные рассылки ................................................................................ 356 Twitter .......................................................................................................................................... 358 Группы ......................................................................................................................................... 361 Facebook ....................................................................................................................................... 371 Глава 13. Блоги ......................................................................................................................... 383 Общее представление о блогах .......................................................................................................... 383 Популярные блоги ...................................................................................................................... 386 Агрегирование ............................................................................................................................ 387 Хостинг блога и программное обеспечение ............................................................................. 390 Начало работы с Blogger .................................................................................................................... 392 Создание блога ............................................................................................................................ 392 Создание форматированных сообщений .................................................................................. 398 Управление блогом ............................................................................................................................. 400 Настройка общих параметров.................................................................................................... 403 Настройка вашего профиля в Blogger ....................................................................................... 406 Присвоение вашему блогу имени пользовательского домена ................................................ 407