Б. К. Самсонов доктор физико-математических наук

Скачать 6 Mb.

Название	Б. К. Самсонов доктор физико-математических наук
страница	1/6
Тип	Реферат

rykovodstvo.ru > Руководство эксплуатация > Реферат

1 2 3 4 5 6

Леонид Орлов

Web-сайт без секретов

издание второе, дополненное и исправленное

УДК 004.738.5 ББК 32.973.26-018.2 О66

Рецензенты:

кандидат экономических наук Б. К. Самсонов

доктор физико-математических наук А. В. Наумов

Орлов Л. В.

Web-сайт без секретов. / Л. В. Орлов. — 2-е изд. — М.: Букпресс, 2006. — 512 с.

ISBN 5-9643-0032-4

Создание собственного web-сайта — это прежде всего творчество. В этой сфере можно полностью показать себя, не ограничиваясь ни в содержании, ни в объеме. Почему бы Вам не создать свой собственный web-сайт и не «раскрутить» его во Всемирной компьютерной сети? Тогда воспользуйтесь современными технологиями Интернет и этим достаточно полным пособием, которое написано опытным разработчиком и дизайнером web-приложений.

Одна из «изюминок» книги — описание конкретных приемов работы по созданию web-страниц, публикации их в Интернет и проверке работоспособности всего сайта.

Издание адресовано в первую очередь тем пользователям ПК, которые желают создавать профессиональные сайты в Интернет, а также оно может быть использовано в качестве практического пособия разработчиками web-сайтов, дизайнерами и всеми, кто имеет отношение к web-проектам.

УДК 004.738.5 ББК 32.973.26-018.2

ISBN 5-9643-0032-4

© Орлов Л. В., 2006 © Бук-пресс, 2006

Содержание

Часть 1. Дизайн для Всемирной паутины 4

Глава 1. Пройдемся по «понятиям» 4

Глава 2. «Вид» дизайна 5

Глава 3. Критические ошибки 6

Глава 4. Структура оптимизированных страниц 7

Глава 5. «Непрошеные» окна 7

Глава 6. Студия web-дизайна 8

Глава 7. «Это» — плохо! 9

Глава 8. Дизайн без «дизайна» 10

Глава 9. Гипертекстовый документ 11

Глава 10. Универсальный локатор ресурса 11

Часть 2. Основы создания гипертекстового документа 12

Глава 1. Введение 12

Глава 2. Этикет в «паутине» 12

Глава 3. Структура 13

Глава 4. Внутри документа 15

Глава 5. Тестируйте свой документ 18

Глава 6. Таблица или фреймы 18

Глава 7. Перекодировщики кириллицы 19

Часть 3.Описание языка гипертекстовых документов 20

Глава 1. Гипертекстовый язык 20

Глава 2.Термины гипертекста 21

Глава 3. Использование звуков 23

Глава 4. Создание графического меню 23

Глава 5. Текстовые стили 24

Глава 6. Общий интерфейс и формы языка 25

Глава 7. Фреймы 26

Глава 8.Планирование и взаимодействие фреймов 28

Глава 9.Зарезервированные имена фреймов 29

Глава 10.Создание документа HTML 30

Глава 11. Формы в HTML документах 34

Глава 12. HTML 4.0 37

Глава 13. Тэги 48

Глава 14. Тэг , использование в сценариях 49

Глава 15. Создание документов в формате HTML 4.0 50

Глава 16. SGML и HTML 51

Глава 17. Как читать HTML DTD 53

Глава 18. Представление документа в формате HTML 55

Глава 19. Глобальная структура документа 64

Глава 20. Тело документа 68

Глава 21. Списки 76

Глава 22. Таблицы стилей 80

Часть 4. Редакторы web-страниц 87

Глава 1. Основные требования 87

Глава 2. Adobe ImageReady 92

Глава 3. Corel Xara 93

Глава 4. Macromedia Fireworks 94

Глава 5. Macromedia Dreamweaver 97

Глава 6. Metacreation Headline Studio 98

Глава 7. HomeSite 99

Глава 8. Microsoft FrontPage Express 112

Часть 5. Создание Интернет-портала 121

Глава 1. Что такое портал? 121

Глава 2. Что такое современный корпоративный портал? 121

Глава 3. Для чего нужен корпоративный портал? 123

Глава 4. Использование пакета Cold Fusion 124

Глава 5. Использование пакета Web-Oracle-Web (WOW) 135

Часть 6. CGI, PHP, Perl, MySQL и CMS системы 139

Глава 1. CGI 139

Глава 2. Выбор CMS 163

Глава 3. Серверные скрипты 164

Глава 4. Вступление в PHP и MySQL 165

Глава 5. Написание Гостевой книги на РНР 170

Глава 6. Гостевая книга на PHP — еще один вариант 171

Глава 7. Графический счетчик на PHP 174

Часть 7. Life Site CMS — система создания и развития сайтов 175

Глава 1. Введение 175

Глава 2. Что такое CMS? 176

Глава 3. Функциональность системы 177

Глава 4. Часто задаваемые вопросы 178

Часть 8. «Раскрутка» сайта 178

Глава 1.Выгодность хорошей «раскрутки» 178

Глава 2. Как создать вирусный трафик с помощью бесплатных электронных книг 181

Глава 3.Правильная раскрутка проекта и привлечение нужных посетителей 182

Глава 4. Экономика проекта 184

Глава 5. Стратегия эффективной работы с партнерскими программами 185

Глава 6. Преимущества использования Интернета в сетевом маркетинге 186

Глава 7. Как получить более 20 000 посетителей в день на свой сайт? 188

Глава 8. Банерная реклама 189

Часть 9. Заработок при помощи своего сайта 190

Глава 1. Бесплатное место под ваш сайт 190

Глава 2. Как заработать на своем сайте 192

Глава 3. Банер и оплата его размещения 196

Глава 4. Влияние местоположения банера на его эффективность 198

Глава 5. Банерокрутилка на JavaScript 198

Глава 6. Бесплатное размещение web-страницы на сервере www.geocities.com 199

Часть 10. Уроки мастерства 203

Глава 1. Выбираем и настраиваем домашний Web-сервер 203

Глава 2. Выводим иллюстрации в отдельном окне 204

Глава 3. Добавляем страницу в Избранное 206

Глава 4. «Откат назад» с помощью JavaScript 206

Глава 5. Индикатор состояния ICQ 206

Глава 6. Как поменять цвет скролл-бара 207

Глава 7. Как «обмануть» фреймы 207

Глава 8. Свойства тэга mailto 208

Глава 9. Пример практического создания сайта 208

Часть 11. Тонкости и секреты 209

Глава 1. Фреймы 209

Глава 2. Ускоряем загрузку графики 212

Глава 3. Создаем систему быстрой навигации 213

Глава 4. Защитим страницу паролем 213

Глава 5. Устанавливаем счетчик 214

Глава 6. Десять советов web-дизайнеру 216

Глава 7. Каскадные таблицы стилей — CSS 216

Вопросы и ответы 219

Приложения 228

Арсенал web-строителя 228

Тэги HTML 229

META-тэги 231

Хостинг 231

Бесплатная регистрация в поисковиках 232

Лучшие русскоязычные хостинг-серверы 232

Каталог бесплатного хостинга 233

Краткий словарь Интернета 236

216 web-безопасных цветов 237

Таблица базовых цветов и супер-подбор цветовых оттенков для сайта. 237

Список использованных материалов 239

Часть 1. Дизайн для Всемирной паутины

Глава 1. Пройдемся по «понятиям»

Web-дизайн — это прежде всего творчество, в котором тебя никто не ограничивает. Только в этой сфере вы можете полностью показать себя, не ограничиваясь, ни в содержании, ни в объеме. Если например брать корреспондентов и журналистов. Они написали материал, долго трудились, и подали его редактору, а редактор взял и выбросил статью, ссылаясь на то, что они написали несколько слов про знаменитого «жулика», который занимает высокий пост в местной Думе. А вам предоставляются все возможности (естественно это не значит, что вы можете материть каждого попавшегося депутата), для того чтобы писать, рисовать и т.д. Потом вывесить это все на сайте и пусть все любуются.

Но в основном web-дизайн означает умение красиво оформить web-страничку на сайте. Если вы написали несколько слов, на обычном default'ном фоне, это не дизайн. Не ограничивайтесь этим. Старайтесь, пытайтесь и у вас все получится.

Причины, по которым люди решают подготовить и опубликовать во Всемирной сети собственный web-ресурс, могут быть совершенно различными. Если речь идет о домашней страничке, то основным движущим фактором для web-мастера является стремление разместить в сети информацию, которую впоследствии можно использовать при поиске работы или интерактивном общении с другими людьми посредством Интернета. Иногда домашняя страничка служит средством для публикации, например литературных произведений, рисунков, музыки или научных исследований автора. Таким способом владелец странички может найти издателя для своих рассказов, организаторов выставки для своих картин, продюсера для музыкального проекта или спонсора, готового финансировать его разработки. В ряде случаев посредством домашней странички можно просто зарабатывать деньги.

Некоммерческий сайт, представляющий посетителям информацию по какой-либо конкретной тематике, вырастает, как правило, хорошо продуманной, грамотно выполненной и регулярно обновляемой домашней странички. Каким бы ни был подобный ресурс — развлекательным порталом, музыкальным сайтом или проектом, посвященным съемке и монтажу любительского видео, он создается обычно с теми же целями, что и домашняя страница. Иногда помимо чисто практических интересов, которыми руководствуется владелец некоммерческого сайта, им движет честолюбие в лучшем смысле этого, то есть стремление обрести популярность и признание у сетевой аудитории. По статистике большинство талантливых и популярных проектов российского Интернета было создано именно честолюбивыми авторами. Не стоит забывать о том, что web-дизайн — это весьма молодая и быстро развивающаяся сфера Интернет-технологий, в которой всегда найдутся высокооплачиваемые вакантные места для толковых специалистов. Налицо тенденция активного освоения Интернета малым и средним бизнесом, в русскоязычную часть Всемирной Сети стали вливаться большие деньги, поскольку данный вид капиталовложений является сегодня одним из наиболее перспективных. По мере насыщения рынка сформируется повышенный спрос на web-дизайнеров и программистов Интернет приложений, а спрос, как известно, рождает предложение.

Что же представляет собой тот «полигон», на котором начинающий web-мастер может испытать собственные силы и способности? Разумеется, это собственная домашняя страничка, ваш первый самостоятельный проект или первый любительский некоммерческий сайт, который вы создаете своими руками.

Коммерческие интернет-проекты организуются с расчетом на получение финансовой прибыли, причем эта прибыль может быть как прямой, так и косвенной. Под косвенной прибылью подразумеваются те неоспоримые преимущества, которые дает грамотно подготовленный web-сайт его владельцам: по сравнению со стоимостью традиционной рекламы, реклама в Интернете практически бесплатна, что с учетом огромной аудитории Всемирной Сети является огромным плюсом. Более того, компания-владелец web-ресурса получает в свое распоряжение именно целевую аудиторию, поскольку ее сайт будут посещать лишь те пользователи, которые нашли его по набору ключевых слов, введенных в форму запроса поисковых машин или в соответствующем тематическом разделе интерактивных каталогов. Web-страница является лучшим и наиболее выгодным решением при поиске как отечественных, так и партнеров и потенциальных клиентов. Никакой иной способ рекламы не даст вам такой приток заинтересованных лиц и заказчиков, как хорошо продуманный и правильно разработанный web-сайт. Получение прямой прибыли подразумевает создание проекта, изначально рассчитанного на привлечение финансовых средств непосредственно из Интернета. Существуют компании, живущие только за счет, созданных силами их сотрудников, web-ресурсов. Это могут быть поисковые машины или информационные порталы, продающие на своих страницах рекламное пространство; Интернет магазины, посетители которых могут заказать какой-либо товар прямо в режиме on-line, получив его впоследствии по почте; система интерактивных аукционов или виртуальное рекламное агентство. Возможностей зарабатывать деньги в Интернете такое множество, что их трудно было бы даже кратко описать. Как бы то ни было, разработка коммерческого проекта, безусловно требует большого времени и продолжительного, кропотливого труда.

Глава 2. «Вид» дизайна

Итак, уважаемые сайтостроители, скажите мне, сколько видов дизайна вы знаете? А? Так, слышу справа кричат — жесткий... Верно! А еще? Резиновый... Так! А какой лучше? Ой! Не надо так кричать... Давайте разбираться.

Давайте дадим определения, чтобы не было разногласий.

Жесткий дизайн — табличный дизайн, в котором величина каждой ячейки либо задана в пикселях, либо задается картинкой или другим элементом, помещенной в эту ячейку.

Резиновый дизайн - табличный дизайн, в котором ширина одной или нескольких ячеек задается в процентах от ширины окна.

Ну мы с вами, как образованные люди, сразу понимаем, что жесткий дизайн гораздо проще разрабатывать! А что? Все элементы фиксированной ширины, расположены статически друг от друга... Так что тем, кто хочет иметь больший контроль над разметкой страницы, следует разрабатывать страницы фиксированной ширины, которая будет оставаться постоянной для всех пользователей, независимо от размера монитора или изменений размеров окна. Этот подход основан на принципах создания страниц в издательском деле, таких как поддержание постоянной сетки, отношений элементов, расположенных на странице, и удобные длины строк. Красота... Как в журнале!

В этом месте давайте остановимся и пораскинем мозгами, что нам это сулит.

Достоинства:

Страница будет выглядеть одинаково независимо от разрешения монитора. Это представляет огромный простор для создания сложных и стильных дизайнов.
Страницы и столбцы с фиксированной шириной обеспечивают лучшее управление длинами строк. Слишком длинные строки неудобны для чтения.

Недостатки:

У жесткого дизайна есть только одно оптимальное разрешение экрана. Если при разработке упор был сделан на совместимость (оптимальный размер 640х480), то уже на 1024х768 поля занимают почти половину ширины страницы — и чем дальше, тем хуже.
Если при разработке акцент был сделан на «среднее» разрешение (800х600), то у пользователей маленьких мониторов появляется горизонтальная полоса прокрутки, и часть содержания им становится не видна. Некоторые разработчики ориентировались по своему монитору (1024х768), и у них даже для 800х600 (а это почти 50% всех пользователей!) страница выглядит плохо — а для 640х480 обычно нечитабельна.
Стремление полностью контролировать отображение страницы означает своего рода выступление против среды. Web — это не печатное издание; у него нет «правильных стандартов», а HTML — язык универсальный с логической разметкой!

М-да... куда ни кинь — всюду клин...

Тут на помощь приходит гибкий дизайн. Web-страницы по умолчанию гибкие. Текст и элементы HTML-файла попадают в окно браузера, заполняя все доступное пространство, вне зависимости от размеров монитора. Если размер окна браузера изменяется, элементы повторно выводятся, чтобы настроиться на новые размеры. В этом и проявляется сущность Web.

Разработчиков поначалу шокирует непредсказуемость места появления элементов страницы, но потом они обычно обучаются обходиться без полного управления страницей.

Итак, что мы имеем?

Достоинства:

Страницы будут отображаться на мониторах с разным разрешением; гибкую страницу можно настроить для выводов на любом дисплее.
Заполнено все пространство монитора, отсутствует нежелательное свободное место.
Дизайн наиболее близок по духу к HTML.
Недостатки:
На больших мониторах длина строки может оказаться чрезмерной, что ухудшает условия для чтения.
Результаты гибкого дизайна часто непредсказуемы.
Браузерам (всем, но особенно Нетскейпу версии 4) очень тяжело переваривать ячейки переменной ширины. Каждому, кто писал совместимый HTML, знакомы ячейки шириной 100%, которые не занимают всю свободную площадь; ячейки фиксированной ширины, которые занимают больше, чем им положено; ячейки с заданной одинаковой шириной, но неизменно выходящие разной ширины и т.д. — перечислять фокусы каждого из браузеров можно очень долго.
Отливка «резиновой» страницы занимает вдвое-втрое больше времени от аналогичной «жесткой».

Так что теперь видно, что однозначно ответить, какой дизайн подходит именно вам, должны вы сами. Если ваша страница имеет фиксированный размер, то в этом нет ничего страшного! Если она рассчитана на разрешение 800х600, и отцентрирована по центру экрана, то даже на больших мониторах она будет смотреться очень прилично, так как не будет наблюдаться эффекта пустого экрана справа. (Но учтите, что при использовании этого метода невозможно точно расположить таблицу относительно фонового изображения.) Единственным недостатком (притом очень крупным) являются шрифты фиксированного размера. В связи с этим дизайн сайта имеет полностью гибкую структуру. Вы должны всегда помнить, что выбор размера шрифта — право пользователя! Ведь страницу вы делаете для него? Тогда пользователь должен выбирать как ему удобно смотреть вашу страницу. Можно использовать также комбинированный подход, когда страница состоит из столбцов (или фреймов), заданных комбинациями абсолютных и относительных размеров. В этом случае при изменении размера окна один столбец сохраняет прежнюю величину, в то время как остальные изменяют размер и заполняют свободное место. В большинстве случаев наиболее предпочтительно использовать именно этот метод. Подводя итог, еще раз напомним, что выбор в любом случае за вами. В web-дизайне нет строгих законов и правил. Но все же рекомендуется, если есть возможность, использовать блочный, а лучше резиновый дизайн. Да, это дольше и сложнее, но это наиболее удобно пользователю, и близко по духу идее Web.

Глава 3. Критические ошибки

Ниже приводятся 10 ошибок дизайнеров (даже, скорее, верстальщиков), которые способны отпугнуть посетителя с вашей страницы.

Долгая загрузка страниц. Пользователь не будет по полчаса ждать загрузки ваших страниц, даже если находит их интересными. Согласитесь, обидно потерять целевого посетителя из-за пары неоптимизированных картинок... Уделите особое внимание оптимизированию размера документов! Первым делом решите, нужны ли картинки эти или нет? Затем все что осталось хорошо оптимизируйте. Вероятно, вам следует использовать специальные программы для оптимизации кода; можно использовать возможности сервера по архивации данных перед отправкой клиенту (но это должен поддерживать ваш хостинг). В конечном счете, конечно скорость загрузки зависит от множества факторов — от канала хостера и скорости сервера, до пропускной способности модема конечного пользователя; но вы, в любом случае, должны сделать все от вас зависящее, чтобы страница грузилась не больше 20 секунд...
Неудачная цветовая схема, шрифт, кривая навигация и верстка сайта. С этим все понятно и добавить нечего. Все, к сожалению, с этим встречались...
Использование новейших технологий. Недостаточное тестирование. Пользователь, столкнувшись с ошибкой JavaScript или SSI, вряд ли будет разбираться в чем дело, он просто уйдет. Прежде чем что-то использовать, кроме HTML, обязательно протестируйте, лучше неоднократно! Еще лучше на локальном сервере. Это касается директив SSI, скриптов, CSS, да и «битые ссылки» очень раздражают...
Перегрузка апплетами, скриптами, анимацией, флешем. Многие, особенно начинающие, думают, что чем больше всяких наворотов, тем «круче». Поверьте, это совсем не так! Можно иногда видеть страницы, где каждый апплет по минуте грузится... Это никуда не годно, пользователь даже не увидеть вашего наворота, он просто уйдет.
Всплывающие окна. Если пользователю понадобится открыть новое окно, он это сделает сам, не стоит делать всплывающие окна (popup) с рекламой, это только раздражает.
Много банеров. Реклама не только раздражает пользователей, но еще и портит дизайн и «утяжеляет» страницу. Помните золотое правило — не больше двух банеров на страницу: один вверху, один внизу. Если посетитель попадет в «засаду диких банеров», то он, скорее всего, даже не станет разбираться, интересная статья или нет, он просто уйдет.
Редкое обновление. Людям нужна достоверная информация. Если дата последнего обновления — полтора года назад, то посетитель может посчитать сайт мертвым, а информацию неактуальной и даже не станут ничего читать... Обновляйте сайт как минимум раз в 2 недели, лучше чаще. Если не будет новых материалов, пользователи не будут возвращаться.
Грамматические ошибки. Если пишете на русском языке, то будьте любезны писать грамотно! Люди не любят грамматических ошибок, если ошибок много, пользователи не будут к вам возвращаться. Понятно, что не у всех лады с правописанием, но пользуйтесь, хотя бы, проверкой орфографии в Ворде... Не забывайте и про пунктуацию — расставляйте хотя бы очевидные знаки препинания. Соблюдение этого нехитрого правила повысит ваш авторитет в глазах читателя и облегчит чтение и восприятие информации.
Отсутствие старой информации. Старая информация не значит ненужная! Не прячьте старые статьи от посетителя — сделайте архив, это может повысить посещаемость ресурса.
Оформление текста. Здесь все огрехи верстальщика — неудачный шрифт, слишком длинные абзацы, отсутствие вразумительных заголовков, отсутствие выделения ключевых моментов, и прочее и прочее...

Глава 4. Структура оптимизированных страниц

Ключевые слова на странице играют решающую роль в позиционировании сайта в результатах поисковых систем. Основополагающими факторами ранжирования в поисковых системах являются следующие моменты:

Плотность ключевых слов на странице. Оптимальный вариант частоты ключевых слов — 3-10%, а также присутствие ключевых слов в тэгах «keywords» и «description».
Наличие ссылок на ваш сайт извне с использованием ключевых слов в описании.

При оптимизации страницы под определенное ключевое слово вам следует учесть, что поисковая система рассматривает вашу страницу не как отдельный элемент, а как часть организма вашего сайта в целом, т.е. учитывается наличие данного ключевого слова не только на определенной странице, но и на других страницах сайта. При этом, учитываются повторяющиеся элементы на сайте, т.е. панель навигации на сайте с ключевым словом и ссылкой на одну и ту же (оптимизированную) страницу №1 не играет весомой роли, зато наличие на страницах №2, №3 разных текстов с этим ключевым словом учитывается и поднимает вес оптимизированной страницы №1.

В целом, формируйте страницы №2 №3 №..., исходя из следующих правил:

Эксклюзивный материал каждой страницы (не повторяйте какой-либо текст, уже опубликованный в сети)
Присутствие ключевого слова в мета-тэгах и title. Надеюсь, здесь все понятно.
Наличие слов-синонимов на страницах.
Простой, соответствующий языковым нормам текст. Исключите всевозможный спам (бессмысленное нагромождение глаголов или существительных), используйте только нормальный язык.

В чем же разница между вашей оптимизированной страницей №1 и страницами №2,№3...?

Самое главное — это присутствие на странице №1заголовка