| |
Пол редакцией
В.Н. Печникова
Создание
Web-страниц и Web-сайтов
ЩШ
i //7/4
44I
«Издательство Триумф»
Москва
УДК 004.738.52(075.4)
ББК 32.973.202я78-1
С54
С54 Создание Web-страниц и Web-сайтов. Самоучитель : [учеб. пособие]/
под ред. В. Н. Печникова. — М.: Изд-во Триумф, 2006.— 464 с. : ил. + [1] CD. —
(Серия «Современный самоучитель»). — ISBN 5-89392-143-7.
I. Печников, В. Н., ред.
Агентство CIP РГБ
Эта книга научит вас реализовать заветную мечту Web-путешественника:
самовыразиться на нескольких ярких Web-страницах собственного сайта. Вы узнаете,
как устроены Web-страницы, какие программы применяются для их создания и как
с ними работать.
Отличительная особенность книги - использование методики настоящего самоучителя.
С самых первых страниц книги, руководствуясь пошаговыми инструкциями,
вы научитесь размещать на Web-страницах текст и графику, создавать собственные
рисунки и анимацию, оптимальные для Web, компоновать Web-сайт с помощью
суперпопулярной программы FrontPage, а также выгружать свой сайт на бесплатные
серверы Web, и Ваше творение легко найдут все остальные обитатели Web.
Вы станете настоящим Web-дизайнером, способным воплотить все свои творческие
способности в виде блистательного Web-сайта!
Посетите наш Интернет-магазин
«Три ступеньки®»: www.3st.ru
E-mail: [email protected]
ISBN 5-89392-143-7 ® ООО «Издательство ТРИУМФ», 2006
© Обложка ООО «Издательство ТРИУМФ», 2006
© Верстка и оформление ООО «Издательство ТРИУМФ», 2006
Краткое содержание
ГЛАВА 1. Web-странииа изнутри 8
Краткий экскурс в язык HTML; создание первой Web-страницы;
форматирование текста, вставка рисунков, таблиц, списков, гиперссылок,
форм и фреймов.
ГЛАВА 2. Размещение страниц в Интернете 47
Размещаем свою Web-страницу на бесплатных серверах в Интернете.
ГЛАВА 3. Графика для Web-страниц 68
Форматы рисунков на Web-страницах; выбор оптимального формата
графического изображения.
ГЛАВА 4. Подготовка графики с помощью
Adobe Photoshop и Adobe ImageReady 93
Подготовка изображений к публикации на Web-страницах: расширение
тонового диапазона, установка яркости, контрастности, резкости;
ретуширование изображений; изменение размера изображений; сохранение
изображений в оптимальном формате; текст в изображениях; создание
анимационного баннера.
ГЛАВА 5. Анимация на Web-странииах 234
Форматы анимационных изображений и программы подготовки анимации.
ГЛАВА 6. Создаем анимацию с помощью
Adobe ImageReady 238
Пошаговое создание анимационных баннеров и изображений.
ГЛАВА 7. Создание Web-сайта
с помощью Microsoft FrontPage 2003 252
Создание макета Web-сайта. Включаем в Web-страницы текст, видео,
формы, фреймы, счетчики. Проверяем и анализируем структуру сайта,
просматриваем результаты и выгружаем в Web.
ГЛАВА 8. Раскрутка вашего Web-сайта в Интернете 386
Оптимизируем Web-сайт для его раскрутки. Регистрация сайта на поисковых
машинах и в каталогах. Анализ посещаемости сайта. Обмен баннерами,
регистрация сайта в баннерной сети и анализ статистики посещаемости.
Приложение 1. Содержание компакт-диска 460
Приложения 2 и 3 записаны в формате PDF на CD-ROM-диске. Чтобы прочитать
приложения, установите программу Acrobat Reader, которая находится в папке
Acrobat CD-ROM-диска.
Приложение 2. Краткий справочник по HTML Pril HTML.pdf
Приложение 3. Краткий справочник по CSS.. Pril CSS.pdf
Содержание
ГЛАВ А 1. Web-страница изнутри ........8
Опыт №1. Смотрим устройство Web-страницы Э
Опыт №2. Создаем первую Web-страницу 13
Опыт №3. Задаем стили текста 16
Опыт №4. Вставляем рисунок 24
Опыт №5. Создаем список •. 26
Опыт №6. Создаем форму 29
Опыт №7. Вставляем гипертекстовые ссылки 32
Опыт №8. Создаем таблицу 37
Опыт №9. Создаем страницу с фреймами 42
ГЛАВ А 2. Размещение страниц в Интернете 47
Опыт №1. Создание адреса вашего сайта в Интернете 49
Опыт №2. Размещение Web-страниц с помощью менеджера файлов
бесплатной службы .3
Опыт №3. Размещение Web-страниц с помощью Netscape Composer .6
Опыт №4. Размещение Web-страниц по FTP-протоколу 60
Опыт №5. Просмотр своих страниц в Интернете .7
ГЛАВ А 3. Графика для Web-страниц 68
Цифровые изображения 68
Особенности Web-графики ' 70
Графические форматы для Интернета 71
Какой формат использовать? 74
Возможности оптимизации 75
Опыт №1. Вставляем графику в HTML-код 79
Опыт №2. Графика большого размера 85
Опыт №3. Графический фон 86
Опыт №4. «Прозрачная» графика 90
Графический текст 92
ГЛАВ А 4. Подготовка графики с помощью
Adobe Photoshop и Adobe ImageReady 93
Опыт №1. Знакомство с рабочим окном программы 94
Опыт №2. Создание нового рисунка 103
Опыт №3. Рисуем геометрические фигуры 106
Опыт №4. Удаление объектов и отмена действий 115
Содержание 5_
Опыт №5. Начинаем изготовление баннера 118
Опыт №6. Текст для баннера 123
Опыт №7. Создаем новые слои 128
Опыт №8. Работаем со слоями 137
Опыт №9. Эффекты тени и выпуклости 141
Опыт №10. «Живые» кнопки 147
Опыт №11. Оптимизируем и сохраняем графику 154
Опыт №12. Обрабатываем фото 165
Опыт №13. Выполняем тоновую коррекцию 168
Опыт №14. Повышаем резкость изображения 174
Опыт №15. Комбинируем фотографии 176
Опыт №16. Уменьшаем и обрезаем фото 185
Опыт №17. Сохраняем фото для Web 188
Опыт №18. Прозрачные изображения 191
Опыт №19. Бесшовный фон 207
Шероховатость 214
Шлифованная плитка 215
Облицовочная плитка 215
Опыт №20. Разрезаем изображения и создаем изображения-карты 217
Опыт №21. Создаем карту навигации ; 228
ГЛАВА 5. Анимация на Web-страницах 234
Структура файла GIF89a 235
Использование GIF-анимации 236
ГЛАВА 6. Создаем анимацию с помощью Adobe ImageReady 238
Опыт №1. Знакомство с палитрой «Анимация» 238
Опыт №2. Сменяющиеся кадры 241
Опыт №3. Просмотр и настройка параметров «ролика» 243
Опыт №4. «Бегущие», постепенно появляющиеся и исчезающие рисунки 245
Опыт №5. Оптимизация и сохранение анимации ...248
ГЛАВ А 7. Создание Web-сайта
с помощью Microsoft FrontPage 2003 ..252
Опыт №1. Знакомство с рабочими окнами программы 253
Опыт №2. Создаем макет Web-сайта 264
Опыт №3. Создаем текст и списки. Бегущая строка 275
6 Создание Web-сайтоЕ
Опыт №4. Добавляем страницы в макет сайта.
Структура навигации и общие границы 287
Опыт №5. Применяем тему для оформления страниц 295
Опыт №6. Создаем таблицу 302
Опыт №7. Вставляем рисунки и фото 307
Опыт №8. Вставляем ссылки 32С
Опыт №9. Создаем меняющиеся кнопки и динамические эффекты 326
Опыт №10. Вставляем звук и видео 332
Опыт №11. Создаем формы 338
Опыт №12. Добавляем счетчик посещений, поиск по сайту
и другие компоненты 348
Опыт №13. Отображаем на странице информацию из базы данных 353
Опыт №14. Создаем страницу с фреймами 361
Опыт №15. Использование переменных и формирование оглавления сайта 368
Опыт №16. Проверяем ссылки и орфографию, анализируем структуру сайта 372
Опыт №17. Просматриваем Web-сайт в браузере 378
Опыт №18. Закачиваем Web-сайт на Web-сервер 380
ГЛАВА 8. Раскрутка вашего Web-сайта в Интернете 386
Опыт №1. Регистрация в поисковых системах и каталогах 387
Подготовка к регистрации в поисковой системе 389
Создаем файл robots.txt 393
Регистрация сайта в поисковой системе 394
Регистрация Web-сайта в каталогах 398
Опыт №2. Регистрация в рейтингах 400
Установка счетчика 406
Опыт №3. Анализируем посещаемость сайта 409
Опыт №4. Баннерный обмен 414
Создание эффективного баннера 416
Использовать ли баннеры вообще? 419
Баннерообменные сети ...420
Регистрация в баннерной службе 423
Размещение кода баннеров на страницах сайта 425
Входим в раздел участника баннерной сети ; 427
Добавление вашего баннера в систему 428
Просмотр статистики по баннеру 431
Другие настройки баннерной системы 433
Статистика Web-страниц 435
Опыт №5. Создаем гостевую книгу, форум и чат 435
Создаем гостевую книгу 437
Содержание
Читаем и редактируем гостевую книгу , 442
Создаем форум 446
Администрируем форум 451
Создаем чат 453
Опыт №6. Делаем сайт популярным 458
Приложение 1. Содержание компакт-лиска 460
Приложения 2 и 3 записаны в формате PDF на CD-ROM-лиске. Чтобы прочитать
приложения, установите программу Acrobat Reader, которая находится в папке
Acrobat CD-ROM-диска.
Приложение 2. Краткий справочник по HTML Pril HTML.pdf
Приложение 3. Краткий справочник по CSS Pril CSS.pdf
ГЛАВА 1.
Web-страница изнутри
Как известно, основной объем информации, доступной в сети Интернет, размещается
во
«всемирной паутине» - World Wide Web (WWW) - информационной системе, подобной
гигантской библиотеке. В этой библиотеке информация представлена в виде
связанных
между собой документов, которые называются Web-страницами. Каждая Web-страницд
может содержать текст, рисунки, видео, звукозаписи, объемные миры и др. Такие
страницы
могут размещаться на компьютерах в любой части света. При подключении к
WWW вы получаете равный доступ к сведениям, разбросанным по всему миру.
Собрание
страниц, объединенных некоторой общей темой и помещенных, как правило, на одном
компьютере, называется Web-узлом или сайтом. Узлы Web подобны книгам, а
Webстраницы
- страницам этих книг. Компьютеры, на которых размещаются сайты, а такж•.;
программы, обеспечивающие поддержку сайтов, называются серверами. На одном
сервере
может размещаться множество Web-узлов или сайтов.
Просмотреть любую Web-страницу можно с помощью специальных программ - браузеров,
наиболее популярные из которых - Internet Explorer, Opera, Mozilla и Netscape.
На Web-страницах обычно, кроме основного текста, всегда присутствуют выделенные
другим цветом и подчеркнутые слова или фразы и активные изображения, которые
изменяются
при установке на них указателя мыши. Например, кнопка может стать рельефной
или изменить свой цвет. Это - гипертекстовые ссылки, предназначенные для связи
:
другими страницами, раскрывающими содержание ссылок. Если щелкнуть мышью на
такой ссылке, то произойдет переход на другую Web-страницу, имеющую отношение к
рассматриваемой или родственной теме, даже если страница помещена на сайте в
другой
части планеты.
Во «всемирной паутине» вы можете найти огромный массив данных - биржевые
котировки
и предложения работы, электронные доски объявлений, анонсы новых фильмов,
литературные, экономические и политические обзоры, игры и многое другое.
Но WWW - это не только сведения от организаций, компаний или фирм. Поскольку
информацию
в Web очень легко опубликовать, многие пользователи создают свои личные
«домашние» страницы, где помещают информацию о себе, своих интересах, своих
друзьях с фотографиями и другими сведениями.
Чтобы опубликовать в Интернете документ, содержащий некоторую информацию,
достаточно
поместить файл с этим документом на сервер, постоянно подключенный к Интернету.
Сервер должен «уметь» общаться с другими серверами с помощью специального
протокола передачи гипертекста HTTP - HyperText Transfer Protocol. Множество
таких
серверов и образует «всемирную паутину» - World Wide Web.
Разработку Web-документов, однако, можно проводить и на компьютере, не имеющем
выхода в Интернет. Создать собственную Web-страницу совсем не сложно. Это можно
сделать или «вручную» или с помощью специальной программы для создания
Webстраниц.
О том, как использовать программы, мы поговорим в следующих главах книги,
а сейчас разберемся с «внутренним устройством» Web-документов и создадим
собственные
страницы «вручную».
Web-страница изнутри
JV&1. Смотрим устройство Web-страницы
Чтобы проще было понять, как «устроена» Web-страница, загрузим какой-нибудь
документ
из WWW и рассмотрим его строение. Загрузим в качестве примера главную страницу
сайта www.3st.ru
>• Установите связь с вашим провайдером Интернета.
> Загрузите в браузер главную страницу сайта www.3st.ru (Рис. l.l).
адрес; |;Й Мр:11пш1.3st.ru/
ШЕЛКНИ ЗДЕСЬ , чтобы купить км>
в розницу ПО UEHC НИЖЕ ОПТОВО
КНИГИ ОТ ИЗДАТЕЛЕЙ
Телефон для оптовых покупателей (095) 720-07-65
ff (^ 1JEE S3
[самоучитель работы на компьютере
Автор(ы): А. Ю. Гаевский
Бестселлер -В книге изложены основы работы на
персональном компьютере. Подробно и доступно описана
«линейка» операционных систем Windows 9S/98/ME/2000,
подробнее ...
Цена 157Р. | 544 стр, | Обложка
[интернет с нуля! Книга + Видеокурс
Рис. 1.1. Главная страница сайта www.3st.ru
> Прервите связь с провайдером.
Когда вы загружаете из WWW любой документ, то его текст в окне вашего браузера
отображается
в хорошо отформатированном, удобном для просмотра виде. Это значит, что
Web-страницы представляют собой не простой текст, а содержат также некоторую
вспомогательную
информацию для управления представлением документа в окне вашего
браузера. Поскольку при создании документа не известно, на компьютере какого
типа
пользователь будет его просматривать, то Web-страницы не могут готовиться и
храниться
в формате, разработанном для конкретной компьютерной платформы, например,в
формате Microsoft Word для Windows XP. Для того, чтобы пользователь, работающий
на
компьютере любого типа, видел документ, отформатированный надлежащим образом,
используется специально разработанный для этого язык HTML. Что же представляет
собой язык HTML?
> Если вы работаете с браузером Internet Explorer, то выберите команду меню Вид
•
Просмотр HTML-кода (View • Source). На экране появится окно с исходным кодом
этой страницы на языке HTML (Рис. 1.2).
Создание Web-сайтов
Файл Правка Формат Вия Справка
ODOCTYPE HTML PUBLIC "-//V3C//DTD HTML 4.01 Tr ansiti onal//EM">
! — InstanceBeg1nEd1table name-"doct1tle" —>
title>KHM*Hu(i интернет-магазин три ступены<и<ЛЮе>
Рис. 1.2. Код "Web-страницы наязыке HTML
Возможно, код, который вы увидите на своем экране, будет несколько отличаться
от кода,
показанного на рисунке. Вид Web-страниц в Интернете очень часто меняется. Но
для
нас сейчас это не существенно.
HTML - HyperText Markup Language (Язык разметки гипертекста) представляет собог
довольно простой набор команд, описывающих структуру документа. Этот язык
разметки
позволяет выделить в документе отдельные логические части - заголовки, абзацы,
таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты
форматирования.
Конкретный вид форматирования определяет сам браузер при чтении документа, я
именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.
Как уже отмечалось, создавать Web-страницы можно с помощью специальных
программ-
редакторов, автоматически генерирующих код HTML, работа с которыми не требует
знания языка разметки. Однако эти программы часто ограничены в своих возмож
ностях, содержат ошибки и нередко создают плохой HTML-код, который работает не
на
всех платформах. Поэтому, если вы хотите серьезно освоить Web-дизайн и понять
принципы
создания Web-документов, вам не обойтись без знания основ языка HTML, тем
более, что создавать Web-страницы на нем совсем не трудно. Возможно, это даже
легче,
чем освоить программу для создания HTML-страниц.
Язык HTML существует в нескольких вариантах, или спецификациях. Как и версии
программных
продуктов, спецификации пронумерованы: 2.0, 3.0, 3.2, 4.0. Каждая последующая
спецификация представляет собой расширение и дополнение предыдущей. В этой
книге
мы будем использовать конструкции последней спецификации HTML 4.0, которые
поддерживаются
последними версиями большинства распространенных браузеров.
Web-страница изнутри
Как видите, документ в окне с кодом HTML - это текстовый документ специального
формата. Все файлы этого формата имеют расширение .html или .htm. В документе
HTML обычный текст сочетается с элементами разметки, заключенными в угловые
скобки < и >, например, , , , . Такие элементы
разметки
называются тегами. Теги бывают одиночными, открывающими и закрывающими и
состоят
из следующих друг за другом в определенном порядке элементов:
• левой угловой скобки <;
• необязательного символа слэш /, который означает, что тег является конечным
тегом, закрывающим некоторую структуру, например, . В этом смысле
можно читать символ / как конец некоторого элемента разметки, например,
строки или абзаца;
• имени тега, например, html;
• необязательных атрибутов. Тег может быть без атрибутов или сопровождаться
одним
или несколькими атрибутами, например, align="center";
• правой угловой скобки >.
Таким образом, открывающий тег , стоящий в начале документа HTML и
означающий
его начало, состоит из имени html и двух угловых скобок < >, а тег ,
находящийся в конце Web-документа, кроме указанных элементов содержит также
символ слэш /, означающий закрывающий тег и указывающий на конец документа.
Тег |
