ОГЛАВЛЕНИЕ

  • Урок 1. Краткий экскурс в теорию сетей
  • Урок 2. Основы web-технологий
  • Урок 3. Введение в web-дизайн
  • Урок 4. Первая web-страница
  • Урок 5. Графика в web-дизайне
  • Урок 6. Специальные возможности HTML
  • Урок 7. Microsoft FrontPage
  • Урок 8. Каскадные таблицы стилей
  • Урок 9. Полезные приемы web-дизайна
  • Урок 10. Обслуживание web-страницы
  • Урок 11. Как стать web-звездой?
  • Урок 12. Деньги и Интернет


Урок 1
Краткий экскурс в теорию сетей

  • Как появился Интернет
  • Как работает Интернет?
  • Принципы работы Интернета
  • Система адресации в Интернете
  • DNS — доменная система имен
  • Электронная почта
  • Сквозные протоколы и шлюзы
  • Протокол передачи данных UDP
  • Протокол передачи файлов FTP
  • Доступ к Интернету
  • Непосредственный доступ
  • Доступ по протоколам SLIP и РРР
  • Доступ UUCP
  • Доступ по вызову (Dial-up Access)
  • Доступ по технологии «coax at a home»
  • Что еще необходимо знать об Интернете
  • Личная свобода
  • Частная собственность
  • Что нового мы узнали?

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

Как появился Интернет

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

В конце далеких семидесятых годов Министерство обороны США задалось идеей создать электронную сеть, с помощью которой компьютеры военных штабов и командных пунктов могли бы успешно обмениваться информацией в случае бомбардировки указанных объектов русскими атомными ракетами. Коммуникации, проложенные между бункерами, должны были, по замыслу министров, выдержать наводнения, цунами, землетрясения, ураганы, прямые по- падания метеоритов и другие неприятные погодные явления. Сеть была спроектирована, исходя из принципа малой надежности, то есть таким образом, что продолжала бы исправно перекачивать информацию между компьютерами, даже когда отдельные ее участки могли неожиданно исчезнуть, превратившись в атомную пыль. Исследования, проведенные в рамках этого проекта, были профинансированы Управлением перспективных научных разработок США(Advanced Research Project Agency, ARPA), и в 1968 году такая система была создана. В честь «спонсоров», вложивших весьма внушительный капитал в развитие первой в мире полнофункциональной вычислительной сети, ей дали краткое и звучное название ARPAnet.

Возникновение данной электронной сети осталось бы не замеченным, или этот факт забылся бы со временем, если бы не несколько концептуальных особенностей, заложенных в ее проект. Во-первых, все компьютеры, входящие в сеть, общались между собой «на равных», то есть в ARPAnet не существовало структуры «главный компьютер — подчиненный компьютер». Во-вторых, в качестве основного сетевого протокола ARPAnet был принят межсетевой протокол IP.

ПРИМЕЧАНИЕ Сетевым протоколом называется согласованный и утвержденный стандарт, содержащий описание правил приема и передачи между двумя компьютерами команд, текста, графики, иных данных и служащий для синхронизации работы нескольких вычислительных машин в сети.

Другими словами, межсетевой протокол — это некий «свод законов для компьютеров», набор правил, позволяющий нескольким машинам обмениваться данными посредством сетевых коммуникаций. Именно протокол IP стал впоследствии главным протоколом Всемирной сети Интернет.

Межсетевой протокол IP (Internet Protocol) является универсальным кроссплатформенным стандартом, позволяющим объединять в сеть разнородные вы- числительные машины, работающие под управлением различных операционных систем. Важно лишь, чтобы все эти системы поддерживали протокол IP.О принципах передачи данных на основе указанного протокола мы подробно побеседуем в следующем разделе этого урока, а пока вернемся к истории создания Интернета.

В начале восьмидесятых годов Национальный научный фонд США (NationalScience Foundation) создал пять локальных сетей, соединив в единый комплекс их центральные компьютеры — сетевые рабочие станции. Эти системы, как иARPAnet, использовали протокол обмена данными IP. Согласно заложенной в данный проект идее планировалось объединить большинство американских исследовательских центров в глобальную информационную систему, создав свое- образную «сеть сетей» (Internetwork, сокращенно — Internet). Эта система должна была содержать самую свежую, постоянно обновляющуюся информацию о научных исследованиях изыскательских учреждений США. По замыслу Национального научного фонда, появление такой сети позволило бы большинству исследовательских институтов Америки иметь быстрый доступ к самым со- временным разработкам ученых. А вот получилось из этой идеи совсем не то, что планировали ее авторы.

Многочисленные коммерческие организации, имеющие к науке отношение весьма далекое, в духе времени стали создавать собственные локальные сети, связывавшие между собой, например, отдел продаж, приемную совета директоров ибухгалтерию. Это было очень удобно: информация передавалась через коммуникационные линии мгновенно и практически никогда не терялась. Ученые же встали перед сложной проблемой: соединять в сеть университеты, находящиеся в разных штатах, было слишком разорительно — чересчур много специального кабеля пришлось бы проложить под землей (к тому времени обычные телефонные линии уже не обеспечивали должной скорости передачи данных). При- шлось, умерив гордыню, идти к коммерсантам с предложением соединить между собой ближайшие, расположенные в соседних домах локальные сети, связав проводом сетевые станции подсетей двух фирм. При такой схеме информация могла бы передаваться от одного компьютера к другому через ближайших соседей. Коммерсанты с радостью согласились — не могли же они упустить уникальную возможность обмениваться документами и биржевыми котировками с партнерами в других городах, причем по цене платы за электроэнергию! Связь быстро была установлена. Кто-то соединил кабелем компьютер, расположенный в США, с сетевой станцией в Канаде, к которой, в свою очередь, стали подключаться местные локальные сети, С появлением специализированных спутников открылась возможность ретранслировать информационный сигнал через океан, благодаря чему вскоре была налажена связь с одним из европейских университетов, с которым соединилась пара сотен местных локальных систем...

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

Тем временем Международная организация по стандартизации (Organizationfor International Standardization, ISO) стала разрабатывать сетевой протокол, который позволил бы «увязать» между собой все компьютеры в разных частях света. Однако пока ISO в муках рождала новый стандарт, пользователи прекрасно договорились между собой сами и установили на своих машинах программное обеспечение, поддерживающее IP. На этом протоколе Интернет работает до сих пор.

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

ПРИМЕЧАНИЕ Единица измерения скорости связи между двумя компьютерами bps (bitper secund) определяется количеством бит передаваемой информации в секунду.

Неуклонный рост подключающихся к Интернету частных пользователей и корпоративных сетей не мог не отразиться на работоспособности системы в целом.Настал момент, когда любители DOOM и самогона перегрузили-таки большинство сетевых узлов. Фирма Merit Network Inc., получившая в 1987 году счастливое право на управление и контроль за аппаратными средствами Интернета, попросту заменила часть коммутационных линий и сетевых станций на более современные, что позволило повысить суммарный трафик Сети более чем в20 раз.

ПРИМЕЧАНИЕ Трафиком называется общий суммарный поток информации через один— сетевой компьютер.

Сетевой узел — это включенная в Интернет машина, которая объединяет несколько локальных сетей, использующих один сетевой протокол.

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

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

Как работает Интернет?

Принципы работы Интернета

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

Протокол IP позволяет только транслировать данные. Для того чтобы управлять этим процессом, служит протокол TCP (Transmission Control Protocol),опирающийся на возможности протокола IP. Как же контролируется передачаи нформации?

Положим, вы хотите переслать по почте вашему другу толстый журнал, не по- тратив при этом денег на отправку бандероли. Как решить эту проблему, если почта отказывается принимать письма, содержащие больше нескольких бумажных листов? Выход простой: разделить журнал на страницы и отправлять их отдельными письмами. По номерам страниц ваш друг сможет собрать журнал целиком. Приблизительно таким же способом работает протокол TCP. Он дробит информацию на несколько частей, присваивает каждой части номер, по которому данные впоследствии можно будет соединить воедино, добавляет к ней «служебную» информацию и укладывает все это в отдельный «IP-конверт».Далее этот «конверт» отправляется по Сети — ведь Интернет умеет обрабатывать IP-информацию. Поскольку в такой схеме протоколы TCP и IP тесно связаны, их часто объединяют в одно понятие: TCP/IP. Размер передаваемых в Интернете TCP/IP-пакетов составляет, как правило, от 1 до 1500 байт, что связано с техническими характеристиками Сети.

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

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

Следует отметить также, что при отправке информационных пакетов протокол TCP требует от компьютера-получателя подтверждения приема информации. Это организуется путем создания временных задержек при приеме-передаче —тайм-аутов, или ожиданий. Тем временем отправитель продолжает пересылать данные. Образуется некий объем уже переданных, но еще не подтвержденных данных. Иными словами, TCP организует двунаправленный обмен информацией, что обеспечивает более высокую скорость ее трансляции.

При соединении двух компьютеров их модули TCP следят за состоянием связи. При этом само соединение, посредством которого осуществляется обмен данными, носит название виртуального канала.

Современная схема передачи данных в Интернете имеет многослойную структуру, включающую несколько уровней. Такая структура называется эталонной моделью ISO OSI (Open Systems Interconnection). Я не стану подробно раскрывать суть данной схемы, поскольку для общего понимания принципов работы Интернета она просто не нужна. Те, у кого возникнет острая необходимость подробно изучить эту абстрактную структуру, могут воспользоваться любым техническим справочником или почерпнуть информацию из самой Всемирной сети, набрав в окне запроса поискового сервера слово «Internet» или «ISOOSI».

Вернемся к передаче данных с вашей машины на какой-либо удаленный компьютер. На самом деле ваша персоналка, естественно, не транслирует информацию непосредственно компьютеру получателя (если, конечно, это не тот сервер, через который вы подключены к Интернету).

Данные, попадая на компьютер, соединяющий вас со Всемирной сетью, передаются на другую машину, с которой соединен этот компьютер, и так — до первого узла. Далее определяется направление, приблизительно соответствующее тому, в котором находится конечный получатель, то есть маршрут информационного пакета. Пакет отправляется дальше до следующего узла, где снова определяется его дальнейший маршрут. Этот процесс называется маршрутизацией.

Для того чтобы пакет с информацией не «заблудился» по дороге, узлы Интернета, через которые он движется, имеют в своем распоряжении так называемые таблицы маршрутизации — электронные базы данных, в которых содержатся указания, куда именно отсылать тот или иной пакет информации, если он следует на такой-то адрес. Таблицы маршрутизации рассылаются на узлы централизованно, периодически меняются и дополняются. Серверы узлов, осуществляющие маршрутизацию, называются маршрутизаторами, или роутерами (отангл, «router» — «маршрутизатор»). Правила маршрутизации описаны в протоколах ICMP (Internet Control Message Protocol), RIP (Routing InternetProtocol) и OSPF (Open Shortest Path First).

Откуда же маршрутизатор узнает, в каком именно направлении следует отсылать отправленный вами пакет данных? Да от вас же самих. Только при пересылке сообщений с почтовыми голубями не нужно указывать адрес назначения. К сожалению, Интернет не пользуется голубиной почтой, и потому для того, чтобы отправить куда-то послание через Сеть, вам нужно указать, куда именно.

Система адресации в Интернете

Каждый человек, живущий на Земле, имеет адрес, по которому его в случае необходимости можно разыскать. Думаю, ни у кого не вызовет удивления то, что каждая работающая в Интернете машина также имеет свой уникальный адрес. Адреса в Интернете разительно отличаются от привычных нам почтовых. Боюсь, совершенно бесполезно писать на отправляемом вами в Сеть пакете информации нечто вроде «Компьютеру Intel Pentium II 400, эсквайру, Пэнни-Лэйн,114, Ливерпуль, Англия». Увидев такую надпись, ваша персоналка в лучшем случае фундаментально зависнет. Но если вы укажете компьютеру в качестве адреса нечто вроде 195.85.102.14, машина вас прекрасно поймет.

Именно стандарт TCP/IP подразумевает подобную запись адресов подключен- ных к Интернет компьютеров. Такая запись носит название IP-адрес.

Из приведенного примера видно, что IP-адрес состоит из четырех десятизначных идентификаторов, или октетов, по одному байту каждый, разделенных точкой. Левый октет указывает тип локальной интрасети, в которой находится искомый компьютер. В рамках данного стандарта различается несколько подвидов интрасетей, определяемых значением первого октета. Это значение характеризует максимально возможное количество подсетей и узлов, которые может включать такая сеть. В табл. 1.1 приведено соответствие классов сетей значению первого октета IP-адреса.

Таблица 1.1. Соответствие классов сетей значению первого октета IP-адреса

Класс сети | Диапазон значений первого октета | Возможное количество подсетей | Возможное количество узлов
А В С D Е | 1-126 128-191 192-223 224-239 240-247 | 126 16382 2097150 --- --- | 16777214 65534 254 2-28 2-27

Адреса класса А используются в крупных сетях общего пользования, поскольку позволяют создавать системы с большим количеством узлов. Адреса класса В применяют в корпоративных сетях средних размеров, адреса класса С — в локальных сетях небольших предприятий. Для обращения к группам машин пред- назначены адреса класса D, адреса класса Е пока не используются. Значение первого октета 127 зарезервировано для служебных целей, в основном для тестирования сетевого оборудования, поскольку IP-пакеты, направленные на .такой адрес, не передаются в сеть, а ретранслируются обратно управляющей над- стройке сетевого программного обеспечения как только что принятые. Кроме того, существует набор так называемых «выделенных» IP-адресов, имеющих особое значение. Эти адреса приведены в табл. 1.2.

Таблица 1.2. Значение выделенных IP-адресов

IP-адрес | Значение
0.0.0.0 Номер сети. 0.0.0 0.0.0. номер хоста 1.1.1.1 Номер сети. 1.1.1 | Данный хост Данная IP-сеть Конкретный компьютер в данной локальной сети Все компьютеры в данной локальной сети Все компьютеры в указанной IP-сети

ПРИМЕЧАНИЕ Хостом принято называть любой подключенный к Интернету компьютер независимо от его назначения.

Последний (правый) идентификатор IP-адреса обозначает номер хоста в дан- ной локальной сети. Все, что расположено между правым и левым октетами в такой записи, — номера подсетей более низкого уровня. Непонятно? Давайте разберем на примере. Положим, мы имеем некий адрес в Интернете, на который хотим отправить пакет с набором свеженьких компьютерных вирусов. В качестве примера возьмем тот же IP-адрес — 195.85.102.14. Итак, мы отправляем пакет в 195-ю подсеть сети Интернет, которая, как видно из значения первого октета, относится к классу С. Допустим, 195-я сеть включает в себя еще 902подсети, но наш пакет высылается в 85-ю. Она содержит 250 более мелких сетей, но нам нужна 102-я. Ну и, наконец, к 102-й сети подключено 40 компьютеров. Исходя из рассматриваемого нами адреса, набор вирусов получит машина, имеющая в этой сетевой системе номер 14.

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

DNS — доменная система имен

Domain Name System (DNS), что переводится на русский язык как «доменная система имен», позволяет значительно облегчить пользователям процесс работы в Интернете тем, что им уже не нужно запоминать цифровые адреса хостов, с которыми общаются их компьютеры. Вот только компьютеру-то как раз много легче работать с набором цифр, что он, собственно, и делает, получая по введенному оператором доменному имени уже знакомый нам IP-адрес удаленной машины. Как это происходит?

В те далекие времена, когда Интернет был крохотной электронной сетью с ограниченным числом пользователей, главные сетевые станции рассылали подключенным к Сети машинам так называемый хост-файл, содержащий базу данных, по которой сам пользователь мог выбрать своему любимому компьютеру имя,никем другим не используемое. Если бы этот подход использовался до сих пор, все ваше рабочее время в Интернете ушло бы только на «перекачивание» хост-файла, который потом все равно не поместился бы на жестком диске. А если бы винчестера и хватило, то, наверное, не хватило бы фантазии, чтобы придумать никем не используемое до сих пор имя. Следующие пять лет ушли бы на регистрацию вашего имени в Интернете — ведь обновленную базу данных следует еще обработать. Слава Богу, DNS обходится без подобных сложностей, избавляя нас от необходимости копировать и обрабатывать многотомные базы данных.

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

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

В мире имеются два Санкт-Петербурга, один из них расположен немного севернее Москвы, другой находится на территории США, в штате Флорида. Однако в данном случае русским почтальонам повезло — в России Санкт-Петербург только один. Итак, далее письмо поступает в более мелкую административную зону — город.

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

В любом доме есть первая квартира, и ни в одном — две таковых. Следователь- но, почтальон опустит письмо именно в тот почтовый ящик, в который нужно. Корреспонденция достигает адресата. Таким образом, путь нашего письма к конечному получателю можно описать следующей строкой: «Квартира 1. Дом № 3.Улица Ленина. Санкт-Петербург. Россия». Скажите, а чем хуже строка виртуального адреса: myhost.mydomain.spb.ru? Да ничем — это практически одно и то же. Такое обозначение принято называть URL (Uniform Resource Locator),что можно перевести на русский язык, как «универсальный определитель местонахождения ресурса». Соответственно, строка вызова размещенной по этому адресу web-страницы будет выглядеть как http://www.myhost.mydomain.spb.ru, где http обозначает протокол передачи гипертекстового документа (Hyper TextTransfer Protocol), a www (World Wide Web — Всемирная паутина) — есть указание на то, что передаваемые данные являются стандартным сервисом Интернета, то есть web-страницами. В некоторых случаях элемент www в записи URL можно опустить.

Таким образом, мы видим, что адрес того или иного ресурса Всемирной сети, записанный в стандарте DNS, дробится на несколько составляющих, отделенных друг от друга точкой. Эти элементы носят название «доменов».

ПРИМЕЧАНИЕ Домен — это некий логический уровень Интернета, то есть группа сетевых ресурсов, имеющая собственное имя и управляемая своей сетевой станцией.

Очевидно, что основная составляющая адреса DNS — это так называемый «домен первого уровня», охватывающий, как правило, некую глобальную географическую зону, например территорию отдельного государства. Примечательно, что собственный территориальный домен США «US» при записи URL обычно опускается, поскольку сам Интернет был некогда американской национальной сетью. Вместо этого несколько учреждений, расположенных в США, владеют определенным количеством «выделенных» доменов первого уровня, трактующихся особо. Полный список доменов первого уровня с их расшифровкой при- веден в табл. 1.3.

Таблица 1.3. Домены первого уровня

Обозначение домена | Расшифровка обозначения | Обозначение домена | Расшифровка обозначения
AM AT BE BI BY СН CN CR DE ЕС FI GF GR GU HR ID IL IR IT JO KR LI LU MX NF NL NZ PH PL PY RU SE SK TW UG US YU ZR | Армения Австрия Бельгия Бурунди Беларусь Швейцария Китай Коста-Рика Германия Эквадор Финляндия Французская Гвиана Греция Гуам Хорватия Индонезия Израиль Иран Италия Иордан Корея Лихтенштейн Люксембург Мексика Норфолкские острова Нидерланды Новая Зеландия Филиппины Польша Парагвай Россия Швеция Словакия Тайвань Уганда США Югославия Заир | AR AU BG BR СА CL СО CZ DK ES FR GG GT НК HU IE IN IS JE JP LB LT LV MY NI NO PE PK PT RO RW SG TH UA UK UY ZA | Аргентина Австралия Болгария Бразилия Канада Чили Колумбия Чешская Республика Дания Испания Франция Остров Гернси Гватемала Гонконг Болгария Ирландия Индия Исландия Остров Джерси Япония Ливан Литва Латвия Малайзия Никарагуа Норвегия Перу Пакистан Португалия Румыния Руанда Сингапур Таиланд Украина Великобритания Уругвай Южная Африка
Выделенные домены
СОМ GOV NET | Всемирная коммерческая зона Интернет Правительства государств и правительственные учреждения Общесетевые ресурсы | EDU MIL ORG | Сеть учебных заведений и учреждений образования Военные организации Некоммерческие организации

Доменам второго уровня (локальная сеть банка, университета, городская муниципальная служба или отдельный сервер, предоставляющий пользователям доступ к какому-либо ресурсу) назначается произвольное имя. Домены третьего уровня являются составляющей частью домена второго уровня, они могут использовать любые имена, не задействованные в рамках вышестоящего домена. Всероссийской зоной RU управляет Российский научно-исследовательский институт развития общественных сетей (РосНИИРОС), официальный сайт которого можно отыскать по адресу http://www.ripn.net. Общемировыми доме- нами управляет организация Internic (http://www.internic.com). Процедура регистрации нового домена второго уровня выглядит достаточно просто: с помощью любой специализированной программы или предназначенного для выполнения подобных задач web-сервера вам следует проверить, свободен ли требуемый домен, и в случае положительного ответа посетить сайт владельцев выбранной вами зоны, на котором необходимо заполнить соответствующую интерактивную форму. После отправки формы останется только уплатить указанный в инструкции регистрационный взнос, и домен — ваш. Естественно, для оформления домена на свое имя вы должны располагать собственным web-сервером с фиксированным IP-адресом, в противном случае регистрация не состоится. Для того чтобы зарезервировать для себя домен третьего уровня, необходимо просто отправить запрос владельцу вышестоящего домена и оговорить с ним условия регистрации.

Рассказывая о технологии адресации данных на основе алгоритма DNS, я предлагаю воспользоваться уже предложенным выше примером передачи информационного пакета по адресу http://myhost.mydomain.spb.ru.Итак, мы видим, что электронный пакет информации, поступая в домен первого уровня .ru, русскую зону Интернета, управляемую своей сетевой станцией, перебрасывается в одну из входящих в нее зон — домен второго уровня .spb, что в нашем примере означает Санкт-Петербург. С этого момента домену .ru становится глубоко безразлична дальнейшая судьба пакета, ее последующей маршрутизацией занимается теперь домен .spb. Домен .spb, избавившись от пакета данных путем передачи его во входящую в Санкт-Петербургскую зону локальнуюсеть my domain, тоже забывает о его существовании. А вот управляющий компьютер сети mydomain получает на свою кремниевую голову следующую проблему: отыскать в подотчетной ему сети машину, на которой расположен web-сервер с именем my host, чтобы передать этот пакет ей и больше никогда о нем не вспоминать. Получив информацию, компьютер, управляющий доменом четвертого уровня my host, просто отправляет ее соответствующей серверной программе. Вот, собственно, и все.

Как видим, при подобном подходе какому-либо домену нет необходимости спрашивать чьего-либо соизволения присвоить входящему в его сеть компьютеру или другой сети определенное имя. Все, что от него требуется, — это проследить, чтобы внутри него самого имена не совпадали, и оставить соответствующую запись на соответствующей странице соответствующего участка всемирной базы данных, которая хранится на сервере американской государственной организации SRI International (город Мэнло-Парк, Калифорния).Искать нужный компьютер в Интернете пользовательским машинам помогают DNS-серверы — программы, которые при обращении к ним выискивают нужный IP-адрес по введенному URL. О технологии поиска рассказывать подробно я не буду, отмечу только, что для повышения скорости этого процесса многие DNS-серверы некоторое время сохраняют на винчестере полученный по запросу адрес, на случай, если вскоре кто-нибудь сделает аналогичный запрос.

Электронная почта

Электронная почта (Electronic Mail, или E-Mail) — одно из самых распространенных на сегодняшний день средств общения между людьми. Она открывает возможность передавать на огромные расстояния — повсюду, где есть Интернет — не только текст, но и web-страницы, а также абсолютно любые файлы в виде вложений в письмо, причем всего лишь за несколько секунд. Ни один из других известных сейчас человечеству способов обмена информацией не позволяет делать это столь же быстро и качественно.

Существует также еще несколько возможностей E-Mail, таких, например, как использование электронной почты в телеконференциях или для обращения за справочной и технической поддержкой на некоторых серверах. В случае если пользователь хочет присоединиться к телеконференции, он отсылает на специальный сервер (mail reflector) заявку на подключение к переписке по какой-либо тематике. После этого сервер автоматически отражает многочисленным абонентам всю почту по соответствующим темам, поступающую на адрес его почтовой программы. Чтобы получить помощь или техническое описание принципов работы с некоторыми из серверов Интернета, иногда достаточно выслать на их адрес письмо, содержащее всего одно слово: help. Протоколы, используемые при работе с электронной почтой, называются SMTPи РОРЗ, первый «отвечает» за отправку исходящей корреспонденции, второй — за доставку входящей.

Входящая почта записывается в «электронный почтовый ящик» — как правило, это просто каталог на винчестере почтового сервера, доступ к которому имеет только абонент этого ящика. Обратившись к серверу и забрав почту, абонент может прочитать ее, уже разорвав соединение с Интернетом. Однако следует помнить, что после того, как почта была извлечена из почтового ящика, на сервере она не сохраняется.

Чтобы отослать обычное письмо другому лицу, нужно указать на конверте адрес. Адреса электронной почты хоть незначительно, но отличаются от адресов, принятых в системе DNS. В целом, адрес электронного почтового ящика (иногда его также называют E-Mail, что не совсем верно, но никаким законам не противоречит) выглядит следующим образом: Имя_абонента@адрес_почтового_сервера. Знак @ («ат», или «собака») служит для того, чтобы компьютер мог отделить адрес сервера, на который следует отправлять письмо, от имени абонента, вернее, его личного каталога, куда это письмо запишет по получении сам сервер. Там оно и будет храниться до тех пор, пока его не заберет пользователь или пока не истечет срок его хранения.

Абонентское имя пользователь выбирает сам. После этого он регистрирует почтовый адрес на сервере, настраивает программное обеспечение и может работать с электронной почтой.

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

Сквозные протоколы и шлюзы

Интернет — это единая глобальная структура, объединяющая на сегодня около13 тысяч различных локальных сетей, не считая отдельных пользователей. Раньше все сети, входившие в состав Интернета, использовали сетевой протокол IP. Однако настал момент, когда пользователи локальных систем, не использующих IP, тоже попросились в лоно Интернета. Так появились шлюзы.

ПРИМЕЧАНИЕ Шлюз — это программа, при помощи которой можно передавать ин- формацию между двумя сетевыми системами, использующими различные протоколы обмена данными.

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

Протокол передачи данных UDP

Протокол передачи данных UDP (User Datagram Protocol) используется на медленных линиях для трансляции данных как дейтограмм.

ПРИМЕЧАНИЕ Дейтаграмма — это пакет, передаваемый через сеть независимо от других пакетов, без образования виртуального канала и подтверждения приема.

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

Схема обработки информации протоколом UDP в принципе такая же, как ив случае с TCP, но с одним отличием: UDP всегда дробит информацию по одному и тому же алгоритму, строго определенным образом. Для осуществления связи с использованием протокола UDP применяется система отклика: получив UDP-пакет, компьютер отсылает отправителю заранее обусловленный сигнал.Если отправитель ожидает сигнала слишком долго, он просто повторяет передачу. На первый взгляд может показаться, что протокол UDP состоит сплошь из одних недостатков, однако есть в нем и одно существенное достоинство: прикладные Интернет-программы работают с UDP в два раза быстрее, чем с его более высокотехнологичным собратом TCP.

Протокол передачи файлов FTP

Завершая тему устройства и принципов работы Интернета, хочу коснуться еще одного сетевого протокола — протокола передачи файлов FTP (File TransferProtocol).

Как следует из названия, FTP предназначен для передачи файлов через Интернет. Именно на базе этого протокола реализованы процедуры даонлоада и аплоада данных во Всемирной сети.

ПРИМЕЧАНИЕ Даонлоад (download) — это процесс копирования файлов с удаленного сетевого компьютера (сервера) на вызывающий его компьютер (клиент).На общепринятом техническом жаргоне эту процедуру называют иногда «скачиванием». Аплоад (Upload) — обратный процесс, загрузка файлов на удаленный компьютер.

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

Доступ к Интернету

Прежде чем перейти к подробному изучению web-технологий, применяющихся в современном Интернете, давайте немного поговорим о том, каким образом можно подключиться к этой замечательной электронной сети. Сразу спешу предупредить внимательного читателя: значительная часть методов подключения к Интернету, описанных в рамках данного урока, больше подходит для юридических организаций, и только два последних вида — доступ по вызову и доступ по технологии «coax at a home» — годятся для частного пользователя, желающего выходить в Сеть с помощью домашнего компьютера. Если вы — не директор банка и не руководитель крупного государственного учреждения, остальные пункты пригодятся вам только в целях расширения кругозора.

Непосредственный доступ

Непосредственный (прямой) доступ к Интернету подразумевает использование самого полного спектра услуг Глобальной сети. Организация (крупная корпорация или большое муниципальное учреждение), имеющая непосредственный доступ, фактически может пользоваться Сетью с высокой скоростью и высокой эффективностью постоянно, круглые сутки и практически 356 дней в году.

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

Доступ по протоколам SLIP и РРР

Для использования такого вида доступа вам необходимо приобрести специальное программное обеспечение, поддерживающее протоколы SLIP (Serial LineInternet Protocol) и РРР (Point to Point Protocol). Договорившись с поставщиком услуг о том, что вы будете работать в Интернете именно по этим протоколам, вы подключаетесь к Сети. После этого, как и при непосредственном доступе, в вашем распоряжении абсолютно все ресурсы Глобальной сети, более того, вы входите в нее составной частью сами, а не через сервер провайдера Интернета, позволившего вам попользоваться его ресурсами (как это происходит в случае доступа по вызову).

ПРИМЕЧАНИЕ Провайдер — это фирма, обладающая специальной лицензией и пре- доставляющая за определенную плату частным лицам и организациям доступ в Интернет с помощью ресурсов собственного сервера или корпоративной локальной сети.

Что самое интересное, при работе со SLIP и РРР вам не надо прокладывать в офис оптоволоконную магистраль, можно использовать выделенную коммутируемую телефонную линию, что гораздо дешевле. Единственным непременным условием для работы является то, что на вашем компьютере должен быть установлен высокоскоростной модем.

SLIP — это сетевой протокол, позволяющий использовать для прямого выхода в Интернет обыкновенную телефонную линию и модем. Он требует специального программного обеспечения и работает совместно с протоколом TCP/IP как протокол более низкого уровня.

Если вы знаете, как работает TCP/IP (то есть если вы прочитали предыдущий тематический раздел), понять принцип работы SLIP не составит ни малейшего труда. Принимаемую через модем кодированную информацию SLIP обрабатывает и преобразует в IP-пакет, который передает программной оболочке более высокого уровня, например приложению класса клиент/сервер, которое, получив его, преобразует этот пакет соответственно директивам протокола TCP. В обратную сторону данная система работает так: SLIP получает от программы клиент/сервер генерированный ею IP-пакет, извлекает из него всю ценную информацию, трансформирует ее в символьный код и отправляет в Интернет. Сложно? По-моему, нет.

РРР — более поздняя и совершенная версия протокола, аналогичного SLIP. Он значительно эффективнее, быстрее и обладает большим количеством полезных функций. Соответственно, РРР более дорог, чем его аналог. Различий в алгоритмах обработки информации между ними практически нет. SLIP и РРР под- ходят для прямого подключения к Интернету как локальных сетей, так и домашних компьютеров, используемых в качестве сервера. Такой доступ несоизмеримо дешевле непосредственного, но и намного дороже доступа по вызову. Тем не менее здесь играет значительную роль скорость модема, пропускная способность вашей телефонной линии и дата последнего капитального ремонта на вашей районной АТС. Именно эти факторы зачастую делают использование SLIP и РРР невозможным.

Однако, если ваша телефонная линия передает данные со скоростью страдающей одышкой черепахи, не стоит отчаиваться. Именно для таких линий фирмой Lawrence Berkley Labs (а точнее ее программистом Ван Якобсоном) был создан протокол CSLIP (Compressed SLIP), который является модификацией SLIP и выигрывает в скорости благодаря универсальному алгоритму сжатия заголовков IP-пакетов. На низкоскоростных линиях этот протокол позволяет увеличить эффективность связи почти в б раз и немного компенсировать ее слабые возможности. Таким образом, CSLIP — это вариант SLIP для медленных телефонных линий. Тем не менее CSLIP гораздо менее надежен, чем его прототип. Он сжимает заголовки IP-пакетов, начиная со второго и используя при этом ин- формацию о заголовке из первого, несжатого пакета. Образуется логическая последовательность IP-информации, и если одна из ее составляющих теряется, то есть один из пакетов последовательности был передан некорректно, CSLIP прерывает передачу и добросовестно начинает все заново. При плохой связи можно потерять на использовании CSLIP больше, чем при применении SLIP и РРР, поскольку этот протокол способен гробить на повторные пересылки данных уйму времени.

Доступ UUCP

Как ни странно, не все пользователи персональных и сетевых компьютеров устанавливают на свои машины в качестве системной платформы Windows 9X,2000 или NT. Есть оригиналы, у которых напрочь отсутствует желание мучиться с этими капризными системами. Дабы не трепать себе лишний раз нервы, они используют UNIX-подобные операционные системы. Вот на них-то и рассчитан доступ UUCP (Unix-to-Unix CoPy), поддерживаемый UNIX по умолчанию, хотя программы, работающие с UUCP, при большом желании можно запустить даже под управлением продукции Microsoft. Данный вид сервиса позволяет отсылать и принимать информацию по обыкновенным телефонным линиям.

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

Доступ по вызову (Dial-up Access)

Помните, в самом начале этого раздела я говорил, что лишь два из всех возможных видов доступа стопроцентно годятся для использования в домашних условиях на обычном персональном компьютере. Это — один из них. Я имею в виду услугу, называемую «доступ по вызову», или «dial-up access», иными слова- ми, связь с поставщиком Интернет-услуг по коммутируемым телефонным каналам при помощи модема.

Для того чтобы в течение месяца получить весьма полный спектр возможностей Интернета, вам понадобится любой компьютер, поддерживающий Microsoft Windows, любой модем (желателен со скоростью не ниже 14 400 bps) и немного денег.

Этот вид доступа предоставляется частным лицам и организациям провайдерами услуг Интернета.

Разумеется, для тех, кто пользовался именно таким методом доступа к ресурсам Всемирной сети, не секрет, что эта технология содержит множество значительных недостатков, хотя они отнюдь не умаляют такие несомненные ее достоинст- ва, как, например, относительно низкая стоимость подобного сервиса. Среди наиболее очевидных «минусов» соединения dial-up можно перечислить низкое качество и скорость канала передачи данных, высокую вероятность разрыва связи в самый неподходящий момент, длительное время, затрачиваемое пользователем на дозвон до провайдерского пула и авторизацию, и, наконец, занятость телефонной линии на протяжении всего сеанса работы в Интернете.

Доступ по технологии «coax at a home»

Технология «coax at a home» подразумевает получение доступа к Интернету с использованием каналов кабельной телевизионной сети. В обобщенном виде такая структура выглядит следующим образом: стандартное оборудование кабельного телевизионного центра, используемое для вещания, через специальное устройство передачи данных, называемое головным модемом, а затем через маршрутизатор подключается к высокоскоростному каналу Интернета. После этого абоненту достаточно лишь установить на своем компьютере любую сетевую кар- ту, поддерживающую протокол 10 Base-T, подключить ее к кабельному модему, а тот, в свою очередь, к расположенному в квартире антенному выходу. Все, компьютер в сети.

Одним из основных элементов клиентской компьютерной системы в схеме кабельной сети является кабельный модем. Как и модем, предназначенный для соединения по коммутируемым телефонным линиям, это устройство представляет собой двунаправленный аналогово-цифровой преобразователь данных, использующий в процессе передачи информации принцип наложения на несущую частоту модулированного аналогового сигнала. Фундаментальным отличием данного аппарата от обыкновенного модема является то, что кабельный модем не требует установки каких-либо драйверов, поскольку он подключается к компьютеру посредством сетевой карты и является абсолютно прозрачным для системы: машина считает, что она работает в локальной сети. Разумеется, отсюда можно сделать абсолютно справедливое заключение о том, что данному устройству совершенно безразлично, какая операционная система проинсталлированана пользовательском ПК. Необходимо лишь, чтобы эта система поддерживала возможность установки сетевой карты и настройки локальной сети. Ясно и то, что для работы в Интернете абонент может применять любое стандартное программное обеспечение.

Среди очевидных преимуществ доступа к Интернету по методу «coax at a home»можно перечислить высокую стабильность соединения, отсутствие непредвиденных разрывов связи, а также то, что на протяжении всего сеанса работы во Всемирной сети телефонная линия остается свободной. К сожалению, данный метод связи пока не получил в нашей стране широкого распространения.

Что еще необходимо знать об Интернете

Личная свобода

Американцы считают, что самая свободная страна в мире — это Америка. Рос- сия тоже свободная страна. Однако никто, наверное, не станет спорить с тем, что самое свободное государство на земле — это необозримый виртуальный мир Интернета.

Находясь в Интернете, вы можете общаться когда угодно и с кем угодно, география уже не имеет значения. Ваш собеседник может находиться в Австралии или в Аргентине, скорость обмена данными или условия связи от этого никак не меняются.

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

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

Частная собственность

При работе с Интернетом, а в особенности при создании собственного web-pe-сурса, часто возникает ситуация, когда пользователь может скопировать себе какую-либо информацию: программу, новую книгу, песню любимой рок-группы либо использовать в своем проекте элементы дизайнерского оформления или комплексное композиционное решение какого-либо сайта. Здесь начинаются взаимоотношения, которые регулируются международными законами об авторских правах. Нельзя, например, сделав копию фантастического романа или рассказа, публиковать его в прессе или на собственной web-странице без согла- сия автора, мотивируя это тем, что, дескать, «там-то она лежит свободно». От- куда вы знаете, какими именно соображениями руководствовался автор, когда выложил свое произведение для всеобщего доступа? Данная книга — его интеллектуальная собственность, и охраняется она законом ничуть не хуже, чем если бы вы приобрели ее в ларьке или книжном магазине.

Многие компании-разработчики программного обеспечения предлагают на своих серверах скопировать демо- или бета-версию, а может быть, и коммерческую копию программы, замененную уже более совершенным ее вариантом. Вы можете использовать эту программу, передавать ее своим друзьям. Но вы не в праве продавать ее без согласия разработчика.

Кроме того, вы не имеете права применять в составе создаваемых вами web-страниц какие-либо элементы другого проекта, если автор данного проекта явно не указывает на возможность такого использования.

Как правило, на всех серверах Интернета указано, что из предложенной там информации разрешено «брать на вооружение», а что — нельзя. Если вы затрудняетесь решить, можно ли сделать с полученной информацией то, что вы задумали, воспользуйтесь расположенной практически на каждом сервере ссылкой на почтовый адрес создателя сервера и напишите ему электронное письмо, где подробно изложите свой вопрос. Владелец сервера вышлет вам ответ, где столь же подробно расскажет, можно это делать или нельзя.

Что нового мы узнали?

В этом уроке мы изучили:

  • Принципы действия сетевых протоколов TCP и IP.
  • Алгоритмы передачи информации в сети Интернет.
  • Назначение основных сетевых протоколов.
  • Возможные виды подключения к Интернету.
  • Правила использования информации, являющейся частной собственностью третьих лиц.


Урок 10
Обслуживание web-страницы

  • Проверка целостности гиперсвязей и работоспособности интерактивных форм
  • Обновление информации и создание новых разделов
  • Обслуживание сайта с помощью Telnet
  • Linux
  • Линус Торвальдс: биографическая справка
  • Архитектура Linux
  • Основные команды Linux
  • Что нового мы узнали?

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

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

  • Проверка целостности внутренних и внешних гиперсвязей ресурса.
  • Проверка наличия на сервере и корректности отображения всех web-страниц сайта.
  • Проверка работоспособности всех интерактивных форм.
  • Обновление опубликованной на сайте информации.
  • Создание новых и расширение существующих разделов ресурса.
  • Рассмотрим каждый из перечисленных пунктов более подробно.

Проверка целостности гиперсвязей и работоспособности интерактивных форм

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

В принципе самый простой способ протестировать ваш ресурс на работоспособность — пройти вручную по всем локальным и внешним гиперсвязям и проверить возможность сбоев при обращении к каким-либо web-узлам или страницам. Однако этот метод хорош лишь тогда, когда ваш ресурс насчитывает пять - шесть html-документов, открыть которые в броузере можно за считанные минуты. А если сайт состоит из нескольких десятков или сотен страниц?

Существует специальное программное обеспечение, предназначенное в первую очередь для администраторов web-серверов, которое позволяет автоматически тестировать гиперсвязи на работоспособность, проверять работу сценариев CGI и корректность отображения других элементов сайта. Однако оно требует не удаленного, а непосредственного доступа к серверному компьютеру, в связи с чем для наших целей, к сожалению, не подходит. Как быть? К счастью, специалисты компании Netscape, видимо, уже когда-то сталкивались с подобными проблемами, поскольку именно они создали и запустили в эксплуатацию интерактивную службу Web Site Garage, которую можно найти по адресу http://www.websitegarage.netscape.com (рис. 10.1).

Рис. 10.1. Интерактивная сервисная служба Web Site Garage

Для того чтобы воспользоваться данной службой, вам необходимо просто навестить указанный сайт, ввести в соответствующее поле URL своей странички, а в поле, расположенное ниже, — ваш адрес электронной почты. Установленный на сервере Netscape сценарий CGI самостоятельно протестирует ваш сайт по десятку основных параметров, среди которых можно перечислить работоспособность внутренних и внешних гипер связей, соответствие ресурса различным версиям броузеров, скорость загрузки страниц при различных видах соединений сразной пропускной способностью канала связи и т. д. Готовый отчет будет выслан на указанный вами адрес электронной почты. Данная услуга является бесплатной, и подобное тестирование можно выполнять произвольное количество раз, в течение любого промежутка времени.

Тем не менее, несмотря на очевидные достоинства и удобство данного сервиса, следует отметить, что установленный на сайте Netscape сценарий CGI небезгрешен, поскольку и в его действиях иногда прослеживаются ошибки. Поэтому не поленитесь хотя бы раз в две недели, не полагаясь на технику, потратить полчаса свободного времени и проверить свой ресурс самостоятельно, «прогулявшись» по всем гиперссылкам и протестировав все интегрированные в страницы вашего сайта интерактивные формы. Этим вы сбережете гораздо больше драгоценных минут, которые понадобятся вам на экстренное устранение как всегда не вовремя возникших неполадок, а также убережете собственные нервы и нервы ваших посетителей от неприятных эмоций.

Обновление информации и создание новых разделов

Любой web-сайт необходимо регулярно обновлять. Владельцы многочисленных ресурсов Интернета ведут в настоящее время ожесточенную борьбу за посетителей: конкуренция в Интернете чрезвычайно высока. Общее количество web-страниц, размещенных во Всемирной сети, непрерывно растет, и статистика показывает, что вскоре оно может превысить значение двух html-документов на каждого пользователя Интернета. А посетители — это главное богатство владельца web-сайта. Это аудитория, это имидж, это реклама, а в ряде случаев - и живые деньги. Хорошо, если пользователь заглянет на вашу страничку и изучит опубликованную на ней информацию, но еще лучше, если он вернется на нее снова. Вот почему регулярное обновление сайта является наипервейшей задачей каждого web-мастера.

Традиционная методика обновления web-сайта и создания на нем новых тематических разделов подразумевает подготовку необходимых файлов и html-документов в режиме offline на локальном компьютере с последующей публикацией их в Интернете либо с помощью броузера, посредством интерактивных средств сервера, предоставляющего вам web-хостинг (если публикация возможна через web-интерфейс), либо с использованием клиентского программного обеспечения, если вы располагаете доступом к удаленному серверу по протоколу FTP. Тем не менее данный процесс является весьма трудоемким и потребует от вас не только кропотливой работы, но и больших затрат времени. Можно ли упростить процедуру внесения тех или иных изменений в содержание вашего web-сайта?

Да, безусловно, это возможно. Обычный механизм автоматизации процесса размещения информационных материалов на удаленном сервере подразумевает использование технологий CGI и SSI. Программные средства CGI берут на себя функции загрузки информации на узел Всемирной сети, а средства SSI динамически встраивают полученную информацию в существующий html-документили в заранее подготовленный шаблон. Очевидно, что данный подход потребует от вас, во-первых, хороших знаний в области программирования, а во-вторых, администраторского доступа к вашему web-сайту для размещения, настройки и запуска соответствующих скриптов, что далеко не всегда возможно на серверах, предоставляющих бесплатный web-хостинг. Как поступить? Выход достаточно прост: в качестве интерактивной системы для получения и преобразования подготовленной вами информации необходимо использовать простые и безотказные программные средства JavaScript.

Для этого создайте пустой шаблон web-страницы и в той строке html-кода, которая определяет положение вставляемого вами в web-страницу текстового содержимого, поместите следующий код:

<SCRIPT LANGUAGE="JavaScript" src="имя_файла.js"></SCRIPT>

Назначьте данному html-документу какое-либо имя и загрузите его на сервер. Теперь вам достаточно создать в редакторе Notepad текстовый файл с указанным в html-коде web-страницы именем и расширением .js, содержимое которого будет выглядеть следующим образом:

document.write "текст, вставляемый вами в страницу"

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

ВНИМАНИЕ Кодировка текста, в которой вы подготавливаете js-фойл, должна совпадать с кодировкой, в которой сохранен на удаленном сервере целевой html-документ.

ПРИМЕЧАНИЕ При использовании данного метода размещения информации на удаленном узле возможно возникновение ошибок при просмотре вашего ресурса в броузерах старых версий и броузерах, в настройках которых отключена функция компиляции JavaScript.

Обратите внимание на то, что с использованием описанного выше способа обновления web-страниц вы сможете изменять только текстовое содержимое, модификация графического наполнения сайта будет для вас недоступна. Безусловно, можно дополнить текст создаваемого вами js-файла директивами Java, которые обеспечат вывод на экран монитора графических файловых объектов. Подробное описание таких команд можно найти в многочисленных справочных пособиях по языку JavaScript либо в технической документации, опубликованной в сети Интернет.

Обслуживание сайта с помощью Telnet

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

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

Для получения администраторского доступа к удаленному серверу была разработана специальная технология, получившая название Telnet. В упрощенном виде механизм ее действия выглядит следующим образом: оператор серверного компьютера открывает для вас так называемый «счет администратора» («root account»), назначая ему логическую учетную запись и пароль для соединения с сервером. Как правило, на большинстве современных серверов Интернета используются UNIX-совместимые операционные системы, на российских же применяется в основном платформа Linux как наиболее надежная и к тому же бесплатная система, оптимальная для организации web-сервера. Вы инсталлируете на свой домашний компьютер специальное программное обеспечение, называемое Telnet-клиент, и, установив связь с удаленным узлом, открываете в клиентском приложении системную консоль операционной оболочки сервера. После этого вы можете управлять серверным компьютером в режиме терминала как своим собственным (естественно, в очерченных администратором рамках). Например, вы получите возможность изменять, удалять, создавать, редактировать файлы и директории, а также запускать на исполнение программы в собственном каталоге на диске серверной машины, сможете просматривать содержимое каталогов других пользователей, но возможность вносить в них изменения будет для вас недоступной. Иногда вы получаете неограниченный доступ к собственной папке на диске, но и только. Перемещаться вне ее пределов вы не сможете. Какую бы операционную систему вы ни использовали, протокол Telnet позволит вам общаться с удаленной машиной «на равных». Например, вы без труда сможете открыть сеанс UNIX на компьютере, работающем под управлением MS Windows.

Наиболее распространенной в современном российском Интернете является одна из разновидностей Telnet, называемая SSH (Secure Shell). Ее основное отличие от традиционного Telnet заключается в большей защищенности сеанса связи с удаленным сервером по сравнению с обычными способами терминального доступа. Самым популярным приложением для работы с удаленным узлом Всемирной сети по технологии Telnet и SSH является программа SecureCRT

SecureCRT — 32-разрядное приложение MS Windows, обеспечивающее терминальный доступ по протоколам Telnet и SSH к серверам, работающим под управлением UNIX-совместимых платформ. Интерфейс данной программы наудивление прост. При запуске приложения на экране появится окно настройки соединения, в котором вам следует указать произвольное название нового соединения, адрес удаленного сервера, порт, через который осуществляется обмен данными, протокол передачи информации, ваш логин и пароль администратора. Затем достаточно лишь нажать кнопку Connect, чтобы установить связь с данным узлом.

Функциональная панель SecureCRT позволяет открыть новое окно для установки следующего соединения, разорвать связь с сервером и восстановить ее, оперировать с буфером обмена вашего компьютера, выводить на принтер протокол текущего соединения, менять настройки сессии связи и вызвать службу интерактивной помощи данной программы. Окно виртуальной клавиатуры позволит вам установить пользовательские «горячие» сочетания клавиш, вводить системные команды с помощью мыши и произвольные символьные последовательности.

Среди прочих функций SecureCRT необходимо отметить следующие: вы можете просмотреть лог-файл текущей сессии и сохранить его на диске (команда File > Log Session), управлять алгоритмом передачи данных (меню Transfer) и запускать на исполнение интерактивные сценарии (меню Script). Основное рабочее пространство SecureCRT отведено для ввода пользователем системных команд и отслеживания откликов сервера. Trial-версия данной программы доступна для бесплатного копирования с сайта разработчиков, расположенного по адресу http://www.vandyke.com.

Из всего сказанного ясно, что управление удаленным узлом с использованием протоколов Telnet или SSH возможно только в том случае, если вы имеете хотя бы приблизительное представление о строении и архитектуре UNIX-совместимых операционных систем. Давайте рассмотрим их чуть подробнее на примере наиболее популярной в нашей стране бесплатной платформы Linux, под управлением которой работает множество российских Интернет-серверов и которая практически полностью повторяет стандартную архитектуру других UNIX-подобных систем.

Linux

В последнее время российские пользователи ПК все чаще и чаще стали говорить о Linux как об операционной системе, способной в ближайшем будущем если не вытеснить с рынка Microsoft Windows NT и Windows 2000 Server, то полноценно заменить их на большинстве серверных и даже настольных компьютеров. Вместе с тем ознакомительной информации о Linux на русском языке крайне мало, большая часть имеющейся в продаже литературы на эту тему стоит дорого, да и рассчитана она в первую очередь на специалистов и опытных пользователей, отпугивая рядового читателя обилием технической терминологии. Документация же, представленная в Интернете, отличается разрозненностью и далеко не исчерпывающей полнотой. Именно поэтому отечественным владельцам ПК Linux представляется чем-то элитным и недоступным. Страх столкнуться с чем-то неизвестным, непонятным, сложным в эксплуатации и настройке останавливает наших соотечественников в установке на своем компьютере этойсистемы хотя бы для изучения. Вместе с тем никакой «высшей математики» здесь нет. Linux — очень простая, надежная и дружественная операционная система. Итак, что же такое Linux?

В далеком 1989 году молодой финский программист, студент Хельсинского университета Линус Торвальдс (Linus Torvalds) впервые столкнулся с компактной UNIX-подобной операционной системой MINIX, разработанной в 1987 году Энди Танненбаумом (Andy Tanenbaum). Эта платформа предлагалась будущим специалистам в качестве наглядного учебного пособия в рамках курса «теория и архитектура операционных систем», поскольку в комплект поставки входили исходные коды ее ядра и большинства базовых утилит. MINIX представляла собой небольшую консольную операционную систему, внешне выглядевшую подобно MS-DOS. Она позволяла использовать ограниченный набор команд и запускать ряд UNIX-ориентированных программ. Впрочем, не все программы работали на ее основе корректно. Ощущался явный недостаток драйверов не только для периферийного, но и для базового оборудования компьютера, не было предусмотрено возможностей гибкой настройки системы: для того чтобы адаптировать MINIX для решения каких-либо специфических задач, приходилось множество раз переписывать и компилировать заново код самого ядра платформы. Интерфейс был крайне неудобен. Не удивительно, что Линус Торвальдс загорелся идеей переписать MINIX, сделать ее более простой, надежной и удобной. На долгие месяцы исправление, дописывание и отладка десятков и сотен килобайт программного кода стало его хобби, поглощавшим все свободное время.

Линус Торвальдс: биографическая справка

Создатель известной во всем мире операционной системы Linux Линус Торвальдс родился в столице Финляндии. В возрасте восемнадцати лет он поступил в университет Хельсинки, где начал серьезно заниматься компьютерными технологиями. Линус решил приобрести какую-нибудь операционную систему, которую он мог бы установить на свой домашний компьютер, но и платформы от Microsoft, и коммерческие реализации UNIX оказались слишком дорогими для его скромной стипендии. В начале 1991 года он принялся писатьсобственную платформу, ориентированную на среднего потребителя, которую можно было бы распространять бесплатно посредством Интернета. Новая система обрела название Linux, полученное из сочетания имени ее создателя с наименованием UNIX. За десять лет Linux стал реальным конкурентом продуктов, выпускаемых Microsoft, способным потеснить монополию этой компании на рынке системного и серверного программного обеспечения. Не так давно Линус Торвальдс перебрался с женой и двумя дочерьми в город Санта-Клара (Калифорния, США), который является частью всемирно известной Силиконовой долины, где сконцентрирована львиная доля предприятий американской компьютерной индустрии. Линус работает в расположенной здесь компании Transmeta, занимающейся разработкой процессоров новых поколений, продолжает трудиться над совершенствованием Linux, а в свободное от работы время ездит по всему миру, выступая перед пользователями созданной им платформы на симпозиумах и конференциях.

По большому счету, Linux 0.01 не являлся даже операционной системой: это был лишь набор заготовок для ядра, драйверов и утилит, которые конечный пользователь мог перекомпилировать и настроить самостоятельно на компьютере под управлением MINIX. В октябре 1991 года Торвальдс выпустил версию Linux 0.02. Она мало чем отличалась от исходного варианта: в ней еще практически ничего не работало, выполнялись далеко не все команды, не было драйверов, а интерфейс отличался таким аскетизмом, что порой ужасал самого создателя системы. После этого Линус обратился через Интернет ко всем заинтересованным программистам с предложением присоединиться к разработке и совершенствованию Linux на добровольных началах.

Тысячи «заинтересованных программистов», хакеров, специалистов по компьютерным сетям с радостью подхватили идею Линуса и принялись дописывать, доделывать, отлаживать то, что предложил им Торвальдс. Почти за десять лет Linux прошел путь от игрушки нескольких сотен фанатов и энтузиастов, выполнявшей пару десятков команд в примитивной консоли, до профессиональной многопользовательской и многозадачной 32-разрядной операционной системы

с оконным графическим интерфейсом, по спектру своих возможностей, стабильности и мощности многократно превосходящей Microsoft Windows 95, 98и NT и способной работать практически на любом современном IBM-совместимом компьютере.

Сегодня Linux — это мощная UNIX-подобная платформа, включающая в себя практически все функции, присущие другим версиям UNIX, и еще целый комплекс собственных, нигде больше не встречающихся свойств. Благодаря высокой производительности и надежности она стала одной из самых популярных платформ для организации http-серверов. Наверное, самая привлекательнаячерта Linux, отличающая эту систему от аналогичных программных комплексов, это ее бесплатность: Linux распространяется свободно в рамках Генеральной общедоступной лицензии (the General Public License GNU), все желающие могут просто взять и установить ее на своем компьютере, не уплатив никому ни цента. Где бы вы ни получили дистрибутив данной системы — загрузили из Интернета, взяли напрокат у знакомых или купили в ларьке вместе с набором других программ на пиратском диске, вы все равно остаетесь легальным, «лицензионным» пользователем Linux. Теперь множество больших корпораций с целым штатом профессиональных программистов стали готовить платные и условно-бесплатные версии Linux, отличающиеся удобными утилитами инсталляции, встроенными функциями автоопределения оборудования и обилием подробной документации, поставляемой вместе с дистрибутивом, а также готовым набором самых необходимых программ. Благодаря этому установить инастроить Linux зачастую становится гораздо проще, чем Windows 95. А розничная стоимость подобных реализаций системы, как правило, не намного выше цены компакт-диска, на котором они записаны.

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

Архитектура Linux

Очевидно, что прежде, чем принять решение пользоваться той или иной операционной системой, необходимо иметь хотя бы приблизительное представление об ее архитектуре и внутренней логике. Логическая структура Linux в значительной степени отличается от строения MS-DOS или Microsoft Windows, о нанаиболее близка к архитектуре другого класса операционных систем — UNIX. Безусловно, большинство российских пользователей, начинавших свой путь с DOS, установленной на примитивной «двушке», и прошедших через эпоху Windows 95, привыкли к логике операционных систем в исполнении Microsoft настолько, что нечто новое, непривычное, выходящее из разряда условных рефлексов и утвердившихся в сознании постулатов о том, «как работает машина», пугает их до дрожи в коленях. Однако Linux устроен ничуть не сложнее любой лакомой всем платформы. Просто он работает немного по-другому.

Если сравнить внутреннюю структуру Linux с анатомией MS Windows, различия становятся очевидны даже на первый взгляд (рис. 10.2).

Рис. 10.2. Архитектура Linux

По умолчанию Windows устанавливается в один логический раздел диска с файловой таблицей FAT 16. Здесь хранится ядро системы, отвечающее за ввод/вывод данных, так называемая оболочка, или shell (файл explorer.exe),определяющая интерпретацию команд и действий пользователя, а также собственно файлы и библиотеки, формирующие оконный интерфейс Windows. Причем эти три составляющие системы настолько тесно интегрированы друг с другом, что при замене одной из них, скажем, на аналогичный файл из другой версии Windows, система работать не будет. Функционально они также в значительной степени смешаны: например, некоторые процедуры по формированию интерфейса в Windows выполняет shell. В том же разделе хранятся дополнительные системные утилиты, такие как дефрагментатор диска, сервер удаленного доступа, драйверы, множество служебных библиотек, а также пользовательские файлы. В этой же области система осуществляет свопинг — кэширование не умещающихся в оперативной памяти данных на диск. Иными словами, все компоненты платформы хранятся в одном разделе, что, естественно, не прибавляет ей надежности: достаточно любого незначительного повреждения таблицы данных, чтобы привести Windows в неработоспособное состояние или испортить хранящуюся на диске полезную информацию. Изменить с помощью стандартных средств Windows внешний вид установленных по умолчанию окон также не представляется возможным. Это вполне осуществимо методом замены имеющейся shell на другую оболочку, например LiteStep, либо с помощью специальных утилит вроде Windows Blinds, которые, загружаясь в фоновом режиме, занимают оперативную память и замедляют работу компьютера. Архитектура Linux подразумевает создание на диске трех независимых разделов: системного, области данных и области свопинга. В системном разделе хранятся ядро Linux, включающее в себя мульти загрузчики, комплекс утилит ввода/вывода и других необходимых скриптов, оболочка, обеспечивающая интерпретацию пользовательских директив, вводимых с командной консоли, и оконный интерфейс. Все эти компоненты независимы друг от друга: вы можете по своему желанию установить новое ядро без переустановки системы в целом, сменить shell и выбрать любой графический интерфейс, отвечающий вашим потребностям и задачам. В области данных располагаются, естественно, файлы пользователей. Следует отметить, что Linux позволяет создать для каждой директории отдельный логический раздел, что еще более увеличивает надежность системы: повредив одну область, вы можете быть полностью уверены, что все другие остались в неприкосновенности. В третьем независимом разделе осуществляется свопинг.

В Windows 95 практически никак не были реализованы разделение доступа и защита данных: любой человек, решивший поработать с таким компьютером, получал практически полные права на изменение хранящейся на дисках информации и настроек системы, мог уничтожать и создавать данные, по собственному желанию инсталлировать и деинсталлировать программы. В Windows 98стало возможным определять права пользователей на доступ к тем или иным ресурсам, ограничивая их в основном элементами рабочего стола и пунктами меню Пуск. Однако при желании все запреты этой версии Windows можно без труда обойти. Из всего семейства операционных систем производства Microsoft наилучшим образом разделение доступа реализовано в Windows NT: имеется возможность запретить вход в систему незарегистрированному пользователю, причем сами пользователи имеют только те права, которые назначил им администратор. Они могут по крайней мере читать содержимое большинства директорий и открывать все имеющиеся в них файлы.

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

Как известно, в MS-DOS и Windows принято соглашение о том, что дисководам персонального компьютера присваиваются имена А: и В:, первый жесткий диск носит название С:, все остальные накопители имеют буквенное обозначение,

следующее по порядку за именем последнего жесткого диска. В Linux соглашение несколько иное: дисководы обозначаются как устройства fd0 и fd1, винчестеры соответственно hda, hdb и т. д. Причем если жесткий диск содержит несколько разделов, то им присваиваются имена hda1, hda2 и т. д. для первого накопителя и hdb1, hdb2 и т. д. — для второго. Порты компьютера также имеют собственные названия: СОМ1 —COM4 именуются в Linux, как ttys0 — ttys5, aLPT1 и LPT2 соответственно как lр0 и lр1. К таким обозначениям надо просто привыкнуть. Более того, в операционных системах от Microsoft любым папкам, кроме, пожалуй, C:\Windows, разрешено назначать произвольные имена, да и этой папке в процессе инсталляции системы можно дать другое название. Linux предусматривает стандартизацию структуры каталогов, содержащих компоненты системы. Директории пользователей хранятся в отдельной папке, называемой home. Им, как правило, назначаются имена учетных записей, зарегистрированных для входа в систему с самого компьютера либо по сети. Жесткий стандарт на названия директорий и их содержимое позволяет избежать множества ошибок и путаницы при сохранении или удалении данных, а также «свалки» из файлов и каталогов на диске, которая часто образуется в процессе эксплуатации MS Windows.

Как известно, Windows поставляется в продажу в виде полностью подготовленного к установке дистрибутива. Пользователи Linux могут сформировать дистрибутив самостоятельно из отдельных компонентов либо воспользоваться стандартными пакетами, содержащими практически все необходимые для работы элементы плюс удобный инсталлятор системы, облегчающий установку Linux на диск.

Из других характерных особенностей Linux необходимо, наверное, упомянуть поддержку национальных клавиатур, в том числе и русской, поддержку множества файловых систем, среди которых, помимо собственной (EXT2FS), имеются FAT16, MINIX-1 и XENIX. Программная поддержка FAT16 позволяет непосредственно обращаться к" гибким дискам MS-DOS, а также к файловым разделам DOS и Windows на винчестере. Имеется возможность работать с сетевыми протоколами TCP/IP, PLIP, РРР и многими другими, в рамках сетевых функций платформы реализован весь спектр клиентов и услуг Интернета: FTP, Telnet, NNTP, SMTP и POPS. Программы загружаются в память постранично, на диск кэшируются только те сегменты данных, которые не используются системой в данный момент, что значительно ускоряет работу приложений. Возможно совместное обращение к страницам памяти разными программами в один и тот же момент времени, это позволяет избежать. повторной загрузки идентичных фрагментов информации в RAM и заметно экономит ресурсы компьютера. Как и Microsoft Windows, в Linux применяется система динамических библиотек, иными словами, несколько приложений могут использовать в своей работе библиотеку, представленную на диске одним физическим файлом.

Из всего сказанного можно сделать вполне справедливый вывод о том, что Linux является более продуманной, систематизированной и качественно организованной операционной системой, нежели MS Windows. Linux создавался с учетом трех основных критериев: максимальных быстродействия, надежности и экономии ресурсов компьютера. Если Windows стремится занять все свободное место на диске, требует как можно больше оперативной памяти и заставляет пользователя ежемесячно переустанавливать систему из-за бесконечных сбоев, Linux позволяет работать с вдвое большей скоростью и схожим графическим интерфейсом на достаточно медленной машине с небольшим количеством RAM, устанавливается весьма компактно и при грамотном обращении может работать годами.

Основные команды Linux

Несмотря на то что Linux является вполне современной 32-разрядной операционной платформой, поддерживающей оконный интерфейс, пользователю достаточно часто приходится работать с так называемой системной консолью —инструментом, аналогичным сеансу MS-DOS в Windows, особенно при взаимодействии с системой при помощи удаленного доступа к серверу по протоколам Telnet или SSH. Поэтому всегда необходимо иметь перед глазами перечень основных команд, чтобы не перерывать многостраничное руководство по Linux, если запись нужной процедуры выпала из памяти. Эта небольшая шпаргалка, содержащая список наиболее употребительных команд Linux, предназначена для вас, начинающие пользователи:

pwd — получить имя текущей директории (в отличие от DOS оно не отображается в приглашении операционной системы);

cd имя Директории — сменить текущую директорию;

ls — вывести на экран содержимое текущей директории (файлы сортируются в алфавитном порядке);

cat файл — отправить файл на стандартный вывод;

cat файл1 файл2 > файл3 — «смешать» содержимое файла! и файла2, поместив результат в файл3;

cat файл1 файл2 — дописать содержимое файла1 в файл2;

ср файл1 [файл2...] каталог — копировать файл или группу файлов в указанный каталог;

mv файл1 [файл2...] каталог — переместить файл или группу файлов в указанный каталог (исходные файлы при этом уничтожаются);

ln файл1 файл2 — создать статическую привязку файла1 к файлу2, то есть для файла1 создается еще одно имя — файл2;

ln -s файл1 файл2 — создать динамическую привязку файла1 к файлу2 (процедура, аналогичная предыдущей, но файл! может физически не существовать на диске);

rm [ключ] файл — удалить файл или группу файлов (среди ключей: -I — просить подтверждения на каждое удаление; -f — удалять сразу без подтверждения; -r — удалять все содержимое директории вместе с поддиректориями);

mkdir имя Директории — создать директорию;

chmod [аргумент] файл1 — определить права доступа пользователей к файлу1 (среди аргументов: a+w — разрешить другим пользователям вносить измененияв файл; u+х — разрешить запуск программы на исполнение);

touch имя_файла — создать пустой файл с указанным именем;

ps — отобразить список всех выполняемых в системе процессов с их номерами;

kill номер_процесса — прервать один из запущенных в системе процессов (аналогично команде «снять задачу» в MS Windows).Следует помнить, что:

  • Linux различает заглавные и строчные буквы в написании команд.
  • Имена директорий, поддиректорий и файлов отделяются друг от друга символом «/».
  • Чтобы запустить программу на исполнение, достаточно набрать в командной строке терминала ее имя.
  • Алгоритм задания маски файла аналогичен таковому в MS-DOS: знак «*» обозначает любую последовательность символов, «?» — один произвольный символ, «.» — текущую директорию, а «..» — над директорию, следующую выше в древовидной структуре диска.

Что нового мы узнали?

В этом уроке мы изучили:

  • Основные понятия о поддержке ресурса Интернета.
  • Возможности автоматического обновления информации на удаленном web-узле с использованием технологий JavaScript.
  • Технологии поддержки удаленного сервера с использованием протоколов Telnet и SSH.
  • Архитектуру и основные принципы работы UNIX-совместимых операционных систем.
  • Основные команды Linux.


Урок 11
Как стать web-звездой?

  • Регистрация в поисковых системах
  • Подготовка к регистрации
  • Регистрация сайта в поисковых системах
  • Стандарт исключения для поисковых систем
  • Список поисковых систем
  • Контроль за состоянием учетной записи
  • Использование рейтинговых счетчиков
  • Службы баннерного обмена
  • Что такое баннер?
  • Эффективность баннера
  • Системы баннерного обмена
  • Зарубежные баннерные сети.
  • Текстовые баннеры
  • Интерактивные баннеры
  • Использование бесплатных досок объявлений
  • Использование подписи к электронным сообщениям
  • Службы редиректа
  • Создаем баннер
  • Простой баннер за несколько минут
  • Сложный баннер
  • Что нового мы узнали?

Популярность... Это емкое слово не дает покоя каждому, кто хоть раз задумывался о своем месте в неспокойном нашем мире. Тем более если речь идет о популярности собственного web-сайта в бескрайнем мире Интернета. Оставим в стороне этические аспекты этой проблемы: о моральном облике владельцев активно раскручиваемых страниц, перманентно находящихся в состоянии «underconstruction», писалось уже достаточно много. Обратимся непосредственно к практике.

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

Регистрация в поисковых системах

Поисковые машины представляют собой специализированные серверы, предназначенные для поиска и аккумуляции информации по запросам пользователя. Следует различать тематические каталоги (рис. 11.1) и собственно поисковые системы. Каталоги содержат обширный список ссылок на другие сайты, разбитых на несколько рубрик по тематической направленности. Общее число таких рубрик может достигать нескольких десятков. Процесс регистрации нового ресурса в информационном каталоге в общем случае выглядит следующим образом: владелец web-страницы заполняет соответствующую интерактивную

Рис. 11.1. Каталог ресурсов «Апорт»

форму, включающую в себя сведения о тематике сайта, его названии, URL и ключевых словах, с помощью которых осуществляется поиск, после чего эта информация заносится в базу данных каталога. В ряде случаев модераторы сервера — сотрудники, призванные следить за соответствием регистрируемых ресурсов общим правилам данной интерактивной службы, — в течение нескольких дней проверяют страничку на предмет отсутствия в ее содержании запрещенной тематики, например, порнографии или призывов к насилию. Если запретные темы обнаружатся, ссылка на ваш ресурс будет безжалостно удалена из базы данных сервера, о чем вы получите соответствующее уведомление по электронной почте. Поиск по запросам пользователей ведется только в пределах базы данных самого информационного каталога. Результат работы системы отображается в файле отчета, который автоматически генерируется установленным на сервере сценарием CGI и содержит ссылки на найденные ресурсы, их названия и краткое описание.

Поисковые системы (рис. 11.2) работают по совершенно иному принципу Используемый поисковой машиной CGI-скрипт, получив пользовательский запрос, обращается к независимым ресурсам Интернета и осуществляет поиск информации в самой Сети по тексту опубликованных на web-серверах html-до-кументов, последовательно проходя все обнаруженные гиперсвязи. Найденные таким образом web-страницы некоторое время сохраняются на диске серверного компьютера на случай, если кто-либо из посетителей подаст поисковой службе аналогичный запрос.

Рис. 11.2. Поисковая система AltaVista

Разумеется, поисковые серверы также располагают собственной базой данных, которая содержит в основном лишь ссылки на ресурсы Интернета. Интерактивные сценарии системы самостоятельно обращаются к каждому сайту, ссылка на который имеется в базе данных, разыскивают в его тексте введенные автором запроса ключевые слова и включают ссылки на данную страницу в файл отчета. Затем робот последовательно проходит по всем гиперссылкам, обнаруженным на этой странице, и если связанные с ней ресурсы отсутствуют в базе данных(индексе) поискового сервера, информация о них автоматически заносится виндекс. Этот процесс называется индексацией сайта. Смысл регистрации в поисковой машине сводится не только к тому, чтобы ссылка на ваш ресурс была внесена в базу данных сервера и прошла процедуру индексации. Желательно, чтобы информация о вашей страничке попала в кэш серверного компьютера, поскольку поиск осуществляется в первую очередь по хранящимся на его дисках данным, затем — по имеющимся в базе ссылкам и лишь в последнюю очередь —непосредственно в Интернете.

Для повышения релевантности поиска, то есть максимального соответствия отчета введенному пользователем запросу, многие поисковые машины применяют так называемые эвристические методы обработки информации. Например, получив пользовательский запрос «Куда пойти сегодня вечером?», поисковая машина самостоятельно просклоняет глагол «пойти», создаст все возможные варианты слова («идти», «иду», «идет», «идешь», «пойдет» и т. д.) и продолжит поиск уже по расширенному подобным образом запросу. Именно поэтому нет смысла указывать в перечне ключевых слов, записываемых в МЕТА-теге вашего документа, решительно все варианты. Этим вы лишь перегрузите суммарный объем html-файла, не добившись никаких премуществ. Пользователь может пожеланию ограничить диапазон поиска, исключив из него ресурсы какого-либо домена или определив в тексте запроса специальные директивы для поисковой машины. Набор таких директив может варьироваться в зависимости от алгоритмов обработки информации, используемых каждым поисковым сервером.

Подготовка к регистрации

Во-первых, обратите пристальное внимание на заголовок страницы, расположенный в коде между ключевыми метками <TITLE> и </TITLE>, поскольку для ряда поисковых систем он играет чуть ли не решающее значение. Заголовок должен быть кратким (в одно—два слова) и притом максимально соответствовать содержимому документа. В любом случае даже самый непродуманный заголовок все же лучше, чем загадочные фразы «MyWeb» или «NewPage», которые так любят автоматически вставлять в страницу всевозможные HTML-редакторы.

Во-вторых, убедитесь в том, что в коде ваших документов присутствуют все необходимые МЕТА-определители (важность этих тегов уже обсуждалась в шестом уроке).

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

того, что слово, набранное пользователем в окне запроса поискового сервера, совпадет с одним из ключевых слов вашего сайта. Как этого добиться? Первый способ весьма прост — составьте перечень ключевых слов, соответствующих тематике вашего сайта, и поместите их в теги комментария в начале и в конце кода страницы, приблизительно так: <!-перечень ключевых слов -->

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

Наиболее грамотным подходом при «раскрутке» ресурса является предварительный анализ популярности ключевых слов, вводимых пользователями в форму интерактивного запроса поисковых систем. Подобные списки периодически публикуются на ряде информационных сайтов. Самыми компетентными из них являются, на мой взгляд, страницы, содержащие статистические отчеты поискового сервера «Яндекс». На страничке «Прямой эфир»(http://www.yandex.ru/last20.html) отображаются последние двадцать запросов данной поисковой системы на текущий момент времени, на странице «НИ-НИ-индекс» (http://www.yandex.ru/nini.html) приводится статистическая еженедельная сводка по наиболее популярным ключевым словам. Согласно сведениям «Яндекс», интересы пользователей русскоязычной части Всемирной сети колеблются в зависимости от происходящих в стране и в мире социальных или политических событий: например, в период с 7 по 13 августа 2000 года, когда произошел взрыв в подземном переходе на Пушкинской площади в Москве, в запросах поисковым системам чаще всего встречались слова «взрыв», «Москва», «пушкинский» и «площадь»; в период с 14 по 21 августа, когда вся страна следила за ходом спасательной операции в Баренцевом море, где потерпел крушение атомный подводный ракетный крейсер «Курск», самыми популярными запросами были «подводная лодка», «субмарина», «Курск», «АПРК» и «спасательная операция». Всегда неизменным остается высокий рейтинг слов «секс», «порно», «знакомства», «работа», «деньги» и «бизнес». Вывод очевиден: если вы разрабатываете новостной ресурс, публикующий горячую информацию обо всем, что творится на нашей планете, почаще меняйте ключевые слова, и ваш сайт всегда будет на вершине популярности. Однако не перегибайте палку: ни в коем случае не употребляйте ключевые выражения, не соответствующие тематической направленности своего ресурса. Этим вы не привлечете, а наоборот, оттолкнете ваших потенциальных читателей, к тому же ощутимо испортите собственную репутацию.

Перед тем как вы перейдете непосредственно к регистрации сайта в поисковых машинах и информационных каталогах, необходимо выполнить следующую последовательность действий. Создайте в текстовом редакторе Notepad и разместите в корневом каталоге своего ресурса текстовый документ с именем robots.txt. Этот файл определяет правила индексации ваших страниц поисковыми серверами, в частности запрещает включение в их базы данных каких-либо папок или документов вашего сайта. Это актуально, например, в случае, если вы используете закрытые паролем тематические разделы, правила создания которых были рассмотрены в девятом уроке. Мнемоника и синтаксис записи команд файла robots.txt подробно разобраны чуть ниже, в разделе «Стандарт исключения для поисковых систем». А сейчас перейдем к процедуре регистрации вашего проекта на различных информационных серверах.

Регистрация сайта в поисковых системах

Итак, вам необходимо «прописать» страничку в поисковой машине. Это можно сделать двумя методами: автоматически и, соответственно, «вручную». Я обычно рекомендую второй. Объясняется это следующими причинами: автоматическая регистрация производится со специализированных серверов (как правило, услуга платная, но существует и множество бесплатных вариантов) путем ввода пользователем URL, описания ресурса, списка ключевых слов в интерактивную форму и передачи этой информации через GCI-скрипт в реестр выбранных из предлагаемого на таком сервере перечня поисковых служб. При этом добрая половина поисковых систем, как правило, по непонятным причинам выдает «отбой», еще половина — тайм-аут, и лишь несколько сообщат о нормально прошедшей регистрации. И даже если вы включите режим слежения за отчетом, заставить поисковые системы правильно проиндексировать ваш ресурс вы все равно не сможете. При «ручной» регистрации в девяноста процентах случаев такие «глюки» не происходят.

Регистрация «вручную» производится достаточно просто. Вы заходите на сервер поисковой службы и ищете ссылку «Добавить URL» («добавить страницу», просто «добавить») для русскоязычных систем и «Add URL» («Add NewPage») для систем с английским интерфейсом. Такие ссылки расположены, как правило, вблизи формы интерактивного запроса. Далее вам останется только перейти по этой ссылке на web-страницу с подробным описанием правил регистрации, а затем ввести URL-адрес стартовой страницы (http://myserver.com/index.html), описание ресурса и ключевые слова в предложенную интерактивную форму. Обратите внимание на то, что в имени файла стартовой странички следует указывать расширение, причем надо различать .htm и .html.

Стандарт исключения для поисковых систем

Все поисковые системы при индексации того или иного сайта берут информацию о разрешениях и запретах на включение в базу данных каких-либо директорий и отдельных html-документов из файла robots.txt, размещаемого web-мастером в каталоге, отведенном на сервере для публикации вашего ресурса. Рекомендуется исключить из списка разрешенных для индексации объектов

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

Общий формат записи директив в файле robots.txt выглядит следующим образом:

ПАРАМЕТР: ЗНАЧЕНИЕ

Символ пробела между полями «параметр» и «значение» является опциональным, то есть его можно опустить без каких-либо последствий. Формат записи в поле «параметр» регистронезависим, то есть серверу все равно, в заглавном или строчном регистре записана директива. Если строка в файле robots.txt начинается с символа «#», поисковый сервер игнорирует ее, воспринимая как комментарий.

В стандарте robots.txt (в отличие от стандартов HTML и CSS) пустые строки, не содержащие ни одного символа, считаются значащими: они отделяют друг от друга разделы описания допусков и запретов, предназначенных для различных поисковых машин.

Первой директивой файла robots.txt является параметр User-Agent. С него же должен начинаться каждый раздел данного файла, отделенный от других разделов пустой строкой. Значением этого параметра служит имя поискового робота, для которого вы устанавливаете права доступа. Если в одном блоке описаний вы хотите задать параметры для нескольких роботов, их имена надо перечислить через пробел. Если значением параметра User-Agent служит символ «*», то следующие далее директивы устанавливаются для всех поисковых систем, независимо от названия и территориальной принадлежности. Второй командой этого своеобразного макроязыка является директива Disallow. Вместо ее значения следует подставить частичный URL документа или директории, не подлежащей индексации, причем записывать этот адрес следует согласно синтаксису обозначения структуры директорий на данном сервере. Например, запись Disallow: /photos запрещает индексировать хранящийся в корневой директории сайта файл photos.html и расположенную там же директорию photos, а команда Disallow: /photos/ — только саму директорию вместе совсем ее содержимым. Если значения команды Disallow не указаны, поисковый сервер индексирует весь сайт целиком. С другой стороны, строка Disallow: /,наоборот, запрещает индексировать данный ресурс — иными словами, вносить информацию о нем в базу данных поисковой системы.

Простые примеры листинга файла robots.txt приведены ниже. Пример 1.

#file-type: robots.txt for site http://www.mysite.ru

User-Agent: Yandex

Disallow: /cgi-bin/

Disallow: /private/myfolder/index

Disallow: /images/

Disallow: not_found.html

Disallow: forbidden.html

User-Agent: AltaVista HotBot Cybermapper

Disallow: /cgi-bin/

Disallow: /private/

Disallow: /hobbies/index.html

Disallow: not_found.html

#End of file

Пример 2.

#file-type: robots.txt for site http://www.mysite.ru

User-Agent: *

Disallow: /cgi-bin/

Disallow: /private/

Disallow: not_found.html

Disallow: forbidden.html

#End of file

Учтите, что файл robots.txt не должен содержать пустых строк, если первой директивой после разрыва строки не является команда User-Agent, а также то, что стандарт исключения для роботов не предусматривает использования масок, содержащих символы «*» и «?». Например, запись Disallow: /folder/*.html запрещает индексацию файлов не с расширением .html, а с именем *, которых просто не существует на сервере. Одна команда Disallow должна содержать только одну ссылку на документ или файл, а для размещения нескольких ссылок надо использовать то же количество команд Disallow. В качестве значения данной команды необходимо указывать относительные пути к файлам и директориям, но ни в коем случае не абсолютные. Иными словами, ссылку на серверную папку следует записывать в виде «/folder», но никак не в виде «http://www.mysite.ru/folder».

Список поисковых систем

Относительно полный список российских и зарубежных поисковых систем, а также тематических каталогов, регистрация в которых может быть вам полезна, приведен в табл. 11.1.

Таблица 11.1. Поисковые машины и тематические каталоги

Название | URL
Российские поисковые системы и каталоги
Яндекс Рэмблер Апорт @Rus List.Ru Созвездие Интернет Russia On The Net MAFIA's TOP 100 Иван Сусанин Улитка OMEN Золотой URL МЕГАПОРТАЛ HI LOOK ПИНГВИН Интернет-столица | http://www.уandex.ru http://www.rambler.ru http://www.aport.ru http://www.atrus.ru http://www.list.ru http://www.stars.ru http://www.ru http://www.mafia.ru http://www.susanin.net http://www.ulitka.ru http://www.omen.ru http://www.goldenurl.radio.ru http://www.megaportal.ru http://www.hi.ru http://www.look.ru http://pingwin.net.ru http://www.yes.ru
Зарубежные поисковые системы и каталоги
AltaVista Yahoo! HotBot Infoseek Webcrawler Excite Inernet.ORG Lucos Opentext Pointcom Who Where | http://www.altavista.com http://www.yahoo.com http://www.hotbot.com http://guide.infoseek.com http://www.webcrawler.com http://www.excite.com http://www.internet.org http://www.lucos.com http://www.opentext.com http://www.pbintcom.com http://www.whowhere.com

Контроль за состоянием учетной записи

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

Ряд современных поисковых серверов располагает специальными службами, помогающими пользователю проверить наличие ссылки на его ресурс в базе данных сервера. Например, поисковая система «Яндекс» предлагает пользователям определить, проиндексирован ли их сайт, на специальной странице, расположенной по адресу http://www.yandex.ru/info/webmaster2.html#status. Аналогичными службами располагают серверы Infoseek (http://www.infoseek.com/FomK?&sv=IS&1k=nofraires&pg=special.htm1) и WebCrawler (http://www.webcrawler.com/WebCrawler/Status.html). Для того чтобы проверить статус вашей ссылки на серверах AltaVista и Апорт, достаточно набрать в строке поискового запроса команду url=адрес_вашего_сайта. На всех остальных поисковых машинах узнать текущее состояние учетной записи можно, просто набрав в строке запроса URL вашего ресурса.

Использование рейтинговых счетчиков

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

Службы баннерного обмена

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

Что такое баннер?

Баннеры бывают разные: синие, желтые, красные... Если говорить серьезно, в последнее время в российском Интернете, да и в зарубежном, пожалуй, тоже, развелось такое обилие баннерных стандартов, что в них может легко запутаться даже профессионал. Современную классификацию баннеров можно представить следующим образом. Во-первых, все баннеры делятся на три основные категории: графические, текстовые и так называемые интерактивные баннеры, созданные с применением технологий Java или Macromedia Flash. Для текстовых баннеров существуют свои баннеро обменные сети, например, популярная система обмена текстовыми ссылками ТХ3, но о них, как и об интерактивных баннерах, мы побеседуем чуть позже. Начнем же мы с графических баннеров, которые представляют собой рисунки стандарта GIF или JPEG, содержащие то или иное рекламное изображение. Данное изображение является гиперссылкой, нажатие на которую приводит к переадресации клиентского броузера на сайт рекламодателя.

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

Наиболее распространенным стандартом графического баннера служит изображение (статическое или анимированное) размером 468x60 пикселов. Баннеры именно такого формата первыми появились во Всемирной сети. На втором месте по популярности следуют так называемые «кнопки», или небольшие баннеры формата 88x31 пиксел. Существуют также баннеры размеров 392x72,100x100, 234x60, 125x125, 120x90, 120x60 и 120x240 точек.

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

Эффективность баннера

Эффективность баннера — понятие не абстрактное, а вполне материальное, поддающееся точной количественной оценке. Единицей измерения эффективности того или иного баннера принято считать соотношение числа нажатий на баннер к числу его показов. Эта величина называется также CTR (Click/ThroughRatio). Вычисляется эффективность баннерных показов очень просто. Если, предположим, вы продемонстрировали свой баннер пользователям Всемирнойсети 1000 раз, и только 10 из них щелкнули на баннере мышью, посетив ваш сайт, CTR такого баннера будет составлять 10 %. Однако не стоит обольщаться этой цифрой в отношении показов ваших баннеров: средний CTR в современном Интернете составляет всего 2,11 %. Это отнюдь не означает, что все остальные показы пропадают впустую: если вам удастся создать интересный и запоминающийся баннер, он станет своего рода носителем имиджевой рекламы для вашего сайта, способствуя запоминанию среди пользователей если не его адреса, то хотя бы названия.

Системы баннерного обмена

Настало время поговорить о так называемых баннерных сетях, или, иначе, системах баннерного обмена. Каков принцип их действия? Вы создаете баннер стандартного размера, который поддерживает нужная вам рекламная служба, и, предварительно зарегистрировавшись на сервере этой баннерообменной сети, загружаете баннер на данный сервер. После этого вы размещаете на своей странице предложенный вам обменной сетью фрагмент кода и начинаете таким образом показывать баннеры других участников сети в определенном числовом соотношении, то есть ваш баннер покажут несколько меньшее количество раз,чем вы продемонстрируете чужой. В этом и кроется коммерческий интерес баннерообменной службы. Положим, на вашем сайте состоялось десять показов чужих баннеров, а ваш баннер продемонстрировали восемь раз. Остаются еще два показа, которые служба использует в своих интересах, то есть вставляет собственную оплаченную рекламу. Именно отсюда берет начало известное пользователям баннерных сетей понятие «соотношение показов». Например, соотношение показов, равное 100:85, означает, что за сто показов на сайте участника обменной системы его баннер будет продемонстрирован 85 раз.

В большинстве баннерных агентств вам предложат также множество бесплатных, но очень привлекательных дополнительных услуг: индивидуальное планирование вашей рекламной кампании (вы можете регулировать не только тематику сайтов, на которых хотите демонстрировать собственные баннеры, но и их территориальный охват, время показов и т. д.), автоматический подсчет CTR. За вас отследят трафик наиболее популярных страниц вашего сайта, а так же список страниц, с которых пользователи чаще всего покидают ваш ресурс.

Положительная сторона такого рода рекламы заключается в том, что CTR и, соответственно, посещаемость вашей странички напрямую зависят от ваших талантов художника, дизайнера и психолога.

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

Russian Link Exchange (RLE) (http://www.linkexchange.ru)

Основными форматами баннеров, принимаемыми данной системой, являются468x60, 100x100 и 120x60. RLE поддерживает также собственный формат RLEStroll — отображение баннеров размером 100x100 точек в отдельном окне, динамически создаваемом на экране компьютера при помощи соответствующего сценария Java. Помимо традиционных графических баннеров RLE принимает иинтерактивные, разрабатываемые с применением технологий Java, CGI, HTMLи Macromedia Flash. Ограничение на объем графических файлов, составляющий баннеры, — 15 Кбайт. Обмен осуществляется в соотношении 2:1, если ваш сайт показывает менее 500 баннеров других участников сети в сутки, и в соотношении до 7:6, если количество осуществляемых вами показов больше. RLE предлагает участникам развернутую статистику по посещениям, гибкое управление баннерными показами и настройку показов баннеров по нескольким параметрам, благодаря чему вы можете самостоятельно планировать собственную рекламную кампанию. Зарегистрироваться в системе Russian Link Exchange может каждый желающий, для этого необходимо лишь заполнить соответствующую интерактивную форму на сервере www.linkexchange.ru.

InterReklama (http://www.ir.ru)

Баннерная сеть InterReklama принимает к показам графические баннеры размером 468x60 пикселов в формате GIF, их размер не должен превышать 12 Кбайт.

InterReklama также дает возможность пользователям планировать и гибко управлять их рекламной кампанией, настраивая показ баннеров по регионам страны, времени суток и тематике страниц, на которых те хотели бы размещатьсвою рекламу. Обмен осуществляется в соотношении 100:85. Регистрация насервере www.ir.ru открыта для всех желающих.

Reklama.RU (http://www.reklama.ru)

В отличие от своих конкурентов баннерообменная сеть Reklama.RU принимает в свои ряды далеко не всех владельцев web-сайтов, а лишь тех, чей ресурс способен показывать от 400 чужих баннеров в сутки, интересен для размещения платной рекламы с точки зрения владельцев Reklama.RU, а также отвечает ряду других весьма высоких требований. Принимаются графические баннеры формата 468x60 точек объемом не более 15 Кбайт, соотношение обмена составляет 100:85.

Одна из положительных черт данной обменной службы — весьма удобный интерфейс работы с учетной записью: если участник сети использует несколько баннеров, он может создать для каждого из них собственный профиль и назначить им различные сценарии показов. Баннеры можно объединять в группы и гибко управлять той частью рекламной кампании, в которой они применяются.

F2 (http://www.f2.ru)

Данная система принимает к показам баннеры размером 468x60, 100x100 и120x60 пикселов, допускается размещение двух баннеров на одной странице, объем графического файла не должен превышать 15 Кбайт. Обмен осуществляется в соотношении 100:95, и оно может изменяться в зависимости от количества показов на сайте баннеров других клиентов системы. В систему не допускаются эротические ресурсы, сборники программного обеспечения и программ для его взлома, а также ресурсы, не интересные по мнению владельцев сети дляразмещения платной рекламы, то есть большинство домашних страничек, так называемые сборники «халявы», и т. д. Комиссия, накладываемая сетью F2 на осуществляемые вами показы, рассчитывается по достаточно сложной системе, учитывающей не только само количество показов, но и средний CTR на вашемсайте, место расположения баннера (в верхней или нижней части страницы), а так же ряд других критериев. Пользователь может индивидуально настраивать сценарии показа собственных баннеров, получить подробную статистику о ходе рекламной кампании, а в случае необходимости взять у сети определенное количество показов в кредит или продать накопленные им показы за реальные деньги. Зарегистрироваться в системе F2 может каждый желающий.

Зарубежные баннерные сети.

Internet Link Exchange (http://www.linkexchange.com)

Это одна из наиболее популярных баннерообменных систем в мире. Если ваш ресурс рассчитан на работу с иностранными посетителями, Internet Link'Exchange — именно то, что вам нужно. К показам принимаются баннеры формата 468x60 точек, обмен осуществляется в соотношении 2:1, объем файла недолжен превышать 14 Кбайт. Имеются система гибкой настройки учетной записи и возможность управления рекламной кампанией.

Banner Exchange Network (http://bannerexchange.mycoinputer.com)

Эта служба баннерного обмена использует графические баннеры размером 468x60пикселов и осуществляет показы в соотношении 2:1. Максимально допустимый объем графического файла составляет 14 Кбайт. Доступны система управления баннерными показами и служба статистики. Одновременно вы можете управлять показами не более трех своих баннеров.

The Hit Exchange (http://www.hitexchange.net)

Баннерообменная сеть Hit Exchange является, пожалуй, одной из самых демократичных систем среди аналогичных зарубежных серверов. Здесь принимаются к показам графические баннеры формата 468x60, 400x40 и 400x50 точек, комиссионное соотношение показов составляет 60:1. Вы можете одновременно управлять показами восьми баннеров, получать подробную статистику по посещениям своего сайта, а также настраивать параметры рекламной кампании с помощью более чем 5 различных опций.

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

Текстовые баннеры

Пока что в российском Интернете существует только одна служба, осуществляющая обмен текстовыми ссылками, чем-то напоминающими газетные рекламные объявления. Вы не умеете рисовать? Не беда: для рекламной кампании вам достаточно будет подготовить в редакторе Notepad короткий рекламный текст и, зарегистрировавшись в текстовой баннерообменной службе ТХЗ (http://www.eye.ru), начинать показывать аналогичные ссылки других участников сети. Увы, сегодня в сеть ТХЗ принимают далеко не все ресурсы, а лишь те, владельцы которых были специально приглашены к сотрудничеству администрацией данной службы, имеют счета в баннерообменной системе RLE

Gold (http://www.linkexchange.ru) или нескольких других обменных сетях, рекомендованы другими участниками системы или прошли строгую проверку в процессе регистрации и были одобрены модераторами сервера. К рассмотрению принимаются сайты на русском, белорусском и украинском языках. Система ТХЗ позволяет размещать одновременно до трех текстовых баннеров в пределах одной web-страницы.

На компоновку текстового баннера также накладывается ряд строгих ограничений: его размер не должен превышать 200 знаков, каждое слово не должно содержать более 15 символов. Вам придется изрядно повозиться, чтобы подготовить грамотный рекламный текст, соответствующий всем этим требованиям. Размер поля, в котором отображается текстовый баннер, поддается гибкой настройке, что является немаловажным достоинством для рекламы такого типа: вы сможете без труда подогнать текстовый рекламный модуль к любому дизайну своего ресурса.

Обмен осуществляется в соотношении 100:80, однако зарегистрировавший сяучастник бесплатно получает от системы своеобразный «стартовый капитал» в размере 20 тысяч показов.

Несколько удивляет тот факт, что, согласно правилам членства в сети ТХЗ, участник не имеет права продавать, дарить или каким-либо иным способом предоставлять баннерные показы другим участниками сети. Даже если вы владеете несколькими популярными сайтами, использующими рекламу ТХЗ, вы не можете рекламировать один из них с помощью показов, накопленных на счете другого. Действует система штрафов за нарушение правил пользования системой, предусматривающая снятие с вашего счета 100 000 показов либо суммы показов в размере вашего недельного трафика, если эта величина больше ста тысяч. Чем обоснованы столь суровые законы участия в ТХЗ, трудно понять: по всей видимости, являясь монополистом в сфере обмена текстовыми ссылками, ТХЗ считает себя вправе диктовать пользователям любые условия. Остается надеяться, что с появлением других конкурентоспособных служб обмена текстовыми баннерами условия членства в данной системе станут более демократичными и уважительными по отношению к владельцам частных и корпоративных ресурсов Интернета.

Интерактивные баннеры

Интерактивные баннеры, созданные с применением технологий Macromedia Flash, CGI, элементов HTML, сценариев Java или VBScript, становятся все более популярными в современном Интернете. Создавая баннеры этого типа, дизайнер проявляет практически все свои художественные способностии навыки в программировании. Интерактивные баннеры оказывают значительно большее воздействие на зрителя, чем образцы традиционной баннерной рекламы, и характеризуются более широким спектром технических возможностей. Ниже перечислены только некоторые из них.

  • Интерактивные баннеры, особенно созданные с применением технологии Macromedia Flash, открывают путь к использованию более сложных анимационных эффектов, чем в случае применения традиционной GIF-анимации. Например, доступны плавное изменение формы объектов (так называемый «морфинг»), управление слоями рисунка с различной степенью прозрачности, задание сложных траекторий движения объектов при относительно небольшом объеме итогового файла.
  • Пространство интерактивного баннера не является однородным: оно может включать в себя несколько гиперссылок, перенаправляющих броузер к различным разделам одного и того же сайта либо к различным ресурсам Интернета.
  • Интерактивный баннер является поистине интерактивным: он «умеет» реагировать на движения курсора мыши пользователя, изменяя при этом анимационные эффекты, надписи, компоновку элементов и другие фрагменты изображения.
  • Интерактивные баннеры могут содержать различные динамические элементы управления, такие как кнопки, меню, текстовые поля и др. Можно организовать загрузку другого баннера через определенный интервал времени, если пользователь не отреагировал на баннер, представленный первым.
  • Интерактивный баннер (в частности, баннер, созданный по технологии Macromedia Flash) может содержать различные звуковые эффекты, от звукового фона в формате MIDI или МРЗ до коротких аудиовставок, воспроизводящихся при каком-либо действии пользователя: наведении курсора мыши на поле баннера, щелчке на нем кнопкой мыши и т. д. Причем различным участкам баннера могут соответствовать разные звуковые эффекты.

В общем случае интерактивный баннер представляет собой текстовый файл с листингом кода на том или ином языке программирования либо с фрагментом кода HTML, обрабатывая который клиентский броузер загружает все недостающие файлы и фрагменты баннера с сервера рекламодателя.

Интерактивные баннеры, созданные с использованием технологии CGI, также представляют собой отрывок HTML-кода. В этом случае при нажатии пользователем на активные элементы, встроенные в баннер, вызывается на исполнение установленный на сервере рекламодателя CGI-скрипт.

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

Не лишены интерактивные баннеры и серьезных недостатков. Главный из них заключается в том, что далеко не все посетители смогут увидеть такой баннер на рекламирующей вас web-страничке, поскольку у некоторых из них установлены старые версии броузеров, не поддерживающие обработку сценариев JavaScript, либо такая поддержка просто отключена. Баннеры, созданные с использованием средств Macromedia Flash, требуют для просмотра специальной надстройки в броузерах пользователей. Если такая надстройка отсутствует, броузер попытается загрузить ее с сайта Macromedia и установить на клиентский компьютер в автоматическом режиме. Однако при появлении страшного на вид окна с восклицательным знаком, предлагающего пользователям загрузить расширения Macromedia, многие из них подсознательно нажимают кнопку «Нет», даже не вчитываясь в текст предупреждения. Таким образом, отказ от инсталляции надстроек не позволит им насладиться созерцанием вашего баннера, а вам, как владельцу рекламируемого ресурса, — получить очередного посетителя и потенциального клиента.

Единственной на сегодня российской баннерной службой, принимающей для обмена интерактивные баннеры, является система Russian Link Exchange. Подробности о правилах использования интерактивных баннеров в этой сети можно узнать на ее сервере, расположенном по адресу http://www.linkexchange.ru.

Использование бесплатных досок объявлений

Реклама на бесплатных досках объявлений, судя по опыту, дает максимальный, хотя и непродолжительный всплеск посещаемости. Электронных досок объявлений и форумов во Всемирной сети — сотни и тысячи, их адреса и количество постоянно меняются, потому приводить здесь ссылки на подобные ресурсы не имеет смысла. Для того чтобы найти нужное количество таких сайтов, воспользуйтесь услугами поисковых машин, набрав в строке запроса фразу «бесплатные доски объявлений» или «каталог досок объявлений». Указанные каталоги обычно представляют собой внушительный список URL и при этом весьма регулярно обновляются. Советую подавать объявление сразу в несколько наиболее близких по тематике разделов электронной доски объявлений, сам же текст объявления в целях экономии времени набрать заранее в любом текстовом редакторе и вставлять затем в форму отправки из буфера обмена. Очень неплохой результат дает организация на сайте собственной доски объявлений с последующей регистрацией ее в подобных каталогах. Это — товар, который всегда пользуется повышенным спросом в Интернете.

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

Возможна также «скрытая» реклама в гостевых книгах. Она выражается в том, что после краткой, но щедрой похвалы в адрес web-мастера, создавшего какой-либо ресурс, вы как бы невзначай оставляете свой URL.

Использование подписи к электронным сообщениям

Достаточно часто владельцы ресурса для его рекламы используют возможности электронной почты, иными словами — включают URL своей странички в подпись (сигнатуру) исходящих сообщений e-mail. Многие web-дизайнеры совершенно необоснованно не придают включению в свои послания подписи с указанием ссылки на их сайт, лишаясь таким образом определенной части своих посетителей. Если вы ведете активную деловую переписку по электронной почте, публикуете адрес e-mail, как способ обратной связи в газетной рекламе или рекламных проспектах, упоминание URL вашего сайта в посланиях e-mail просто необходимо, поскольку любому из ваших респондентов наверняка захочется получше изучить вас как своего виртуального собеседника, если речь идет о домашней страничке, или расценки и перечень товаров вашего предприятия; если речь идет о корпоративном ресурсе.

Как правильно составить подпись к вашим письмам? Существует несколько вариантов. Лично я использую следующий, наиболее распространенный во Всемирной сети формат электронной подписи:

С уважением, Валентин Холмогоров,

---------------------------------------

mailto: alvion@rednet.ru

Домашняя страничка: http://www.smile.pl.ru

ICQ UIN 65064023

Как видите, в нижней части письма указаны три возможных способа обратной связи: электронная почта, адрес страницы в Интернете и номер популярного Интернет-пейджера ICQ. Человек, который прочтет ваше письмо, подписанное таким образом, вправе сам выбрать способ, посредством которого он свяжется с вами.

Вот несколько простых рекомендаций, которых следует придерживаться, разрабатывая подпись к электронным письмам.

  • Отделите адрес электронной почты и URL вашего сервера от текста письма горизонтальной чертой с использованием тега <HR>, если ваши сообщения отправляются в формате HTML, либо с использованием символов «-», «_» или, на худой конец, «~», если письмо отправляется в текстовом формате. Старайтесь не применять других символов для отображения горизонтальной черты: они, безусловно, привлекают внимание читателя, но в ряде случаев способны вызвать у него легкое недоумение или даже негативную реакцию.
  • Представляйте ссылки на адрес электронной почты и URL сайта в виде гиперссылок, тогда пользователю не придется переносить эти данные в броузер или почтовый клиент через буфер обмена, а достаточно будет лишь щелкнуть по такой гиперссылке мышью. Большинство почтовых клиентов автоматически превращают URL и адреса электронной почты в ссылки, однако для полной гарантии используйте префикс mailto: перед записью адреса e-mail и префикс http:// перед записью адреса сайта.
  • Указывайте краткое название вашего ресурса. Это поможет пользователю сориентироваться, что именно он представляет собой и стоит ли тратить время на его посещение. Если получатель письма навестит ваш ресурс, ссылка на который не содержала краткой характеристики, а на деле окажется, что представленная там информация не является для него актуальной, это может вызвать нежелательную для вас негативную реакцию.
  • В некоторых случаях полезно использовать первой строкой подписи какую-либо короткую остроумную фразу или рекламный слоган, привлекающий внимание читателя. Однако не стоит излищне перегружать ее текстом: чтение длинного предисловия к адресу может утомить вашего собеседника. Старайтесь, чтобы общий объем подписи не превышал трех, максимум пяти строк.
  • Подготовьте и применяйте несколько вариантов подписей для различных ситуаций при ответах на деловую и личную корреспонденцию.

Службы редиректа

Данный вопрос является настолько принципиальным, что требует отдельного обсуждения. Речь пойдет об адресе вашего сайта. Если URL вашей странички выглядит следующим образом: http://www.y_4epTa.на.рогах.фиг.знает.где.com/~вася_пупкин (приблизительно такие убогие, не побоюсь этого слова, адреса назначают web-страницам многие серверы, предоставляющие услуги бесплатного хостинга), то это не прибавит авторитета вашему ресурсу. Тем более что в цивилизованном мире уже давно существуют службы переадресации, или редиректа, самая известная из которых расположена на российском сервере http://www.da.ru. Здесь совершенно бесплатно присвоят любому вашему URL, сколь угодно длинному и жуткому на вид, нормальный «человеческий» адрес, вроде http://www.yourname.da.ru или http://yourname.da.ru, причем при желании такой DNS-псевдоним можно назначить даже «голому» адресу IP. Что самое интересное, псевдоним можно прикрепить «намертво», но за это вам придется терпеть на своем сайте рекламу da.ru, которая, скорее всего, существенно испортит вам весь дизайн, либо «наполовину», то есть при обращении к вашей страничке по сокращенному URL в строке адресов броузера будет неожиданно появляться ваш настоящий адрес и пугать посетителей вплоть до инфаркта. Службы редиректа работают бесплатно, получая прибыть за счет рекламы, которая, как правило, автоматически добавляется в структуру вашего ресурса при зарегистрации на их сервере. В чем преимущества переадресации?

  • Во-первых, это короткое имя для вашего сайта. Пользователю труднее запомнить длинный, сложный адрес, тогда как короткий URL, наоборот, быстрее и надежнее отложится у него в памяти.
  • Во-вторых, это значащее имя. В большинстве случаев на сервере, предлагающем владельцам интернетовских ресурсов бесплатные www-псевдонимы,заняты далеко не все доменные имена. Вы сможете выбрать имя, соответствующее тематике вашего сайта, обеспечив тем самым его запоминаемость и немного повысив популярность.
  • В-третьих, это независимость от хостинга. На практике вполне может сложиться ситуация, при которой ваш сайт вынужден будет сменить приютивший его сервер. В большинстве случаев это означает, что все время и усилия, затраченные вами на регистрацию вашего ресурса в поисковых машинах иинформационных каталогах, потрачено впустую. Но только не тогда, когда вы используете службу редиректа: для внесения необходимых изменений вам достаточно будет лишь заглянуть на сайт системы переадресации и исправить вашу учетную запись.

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

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

http://www.ussr.to. Данная служба предлагает не только бесплатные домены третьего уровня, но и бесплатное дисковое пространство объемом до 200 Мбайт. По состоянию на август 2000 года администрация сервера USSR.ТО не требовала от своих клиентов размещения какой-либо рекламы за свои услуги.

http://www.lddl.com. Это еще одна служба бесплатного редиректа. Она предоставляет домены третьего уровня в обмен на рекламную ссылку, ведущую на данный сервер.

http://www.az.ru. Данный российский сервер предоставляет пользователям услуги бесплатной электронной почты, бесплатные гостевые книги, чаты, а также бесплатные домены третьего уровня в зонах az.ru, dk.ru, uk.ru, ec.ru и cf.ru.

http://www.hw.ru. Служба hw.ru предлагает своим клиентам бесплатные доменные имена третьего уровня в зоне своего сервера, иными словами, вы получаете URL вида user.hw.ru. Размещения рекламы за использование данного доменного имени пока не требуется.

Среди других бесплатных систем, предоставляющих подобные услуги, можно упомянуть http://www.4U.ru, http://over.to/, http://come.to/, http://f1y.to/, http://1isten.to/, http://raove.to/, http://start.at/, http://surf.to/, http://travel.to/, http://welcome.to/, http://i.am/, http://message.to/, http://w3.to/.

Создаем баннер

Итак, вы зарегистрировали свой сайт в поисковых машинах и службах баннерного обмена. Что дальше? А дальше необходимо создавать рекламный баннер. Существует множество специализированных серверов и дизайн-агентств, сотрудники которых могут разработать рекламный баннер за вас. Разумеется, не бесплатно. И бутылкой пива вы тут явно не отделаетесь. Предположим, однако, что ваш бюджет не позволяет вам потратить 10 — 30 долларов (именно таков в среднем тариф за разработку одного рекламного баннера), и баннер вам придется создавать собственными силами.

Простой баннер за несколько минут

Подготовка собственного баннера — процесс несложный, при условии, что самбаннер незатейлив и вы не ожидаете от его использования каких-либо сногсшибательных результатов. Очевидно, что создать нечто гениальное в сжатые сроки и без соответствующего опыта решительно невозможно, потому и CTR такого баннера будет весьма невысоким. Однако на безрыбье, как говорится, и самокат — иномарка, посему загружаем любой графический редактор и приступаем к работе. Этапы этой работы будут следующие.

1. Создайте графический файл, совпадающий по размерам с форматом баннера, который вам необходимо разработать, например, 468x60 пикселов.

2. Выберите подходящий на ваш взгляд фоновый цвет и залейте им все пространство рисунка.

3. Разместите в поле баннера URL вашего ресурса. Для того чтобы адрес был читаемым, выделите произвольную область внутри изображения, залейте ее цветом, контрастирующим с фоновым, и поместите туда URL. Признанные мастера рекомендуют использовать для представления адреса так называемые «рубленые» шрифты, символы которых отображаются без концевых засечек. Не стоит применять для записи адреса шрифты типа Brush, имитирующие рукописный текст, либо сложно читаемые шрифты, стилизованные, например, под китайские иероглифы. Будьте проще, и люди к вам потянутся.

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

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

6. Если вы планировали создать статический баннер, то он уже готов. Переведите рисунок в индексированную палитру (Изображение > Режим > Индексированные цвета в редакторе Adobe Photoshop), оптимизируйте его согласно правилам, которые мы подробно изучали в пятом уроке, сохраните на диске в формате GIF и смело отправляйте результат ваших трудов в Интернет.

7. Для создания эффектов анимации вам придется еще немного повозиться. Откройте копию рисунка, не содержащую рекламный девиз, и поместите вего основное поле логотип вашей компании или какой-либо простой, но соответствующий избранному вами девизу рисунок, либо второй слоган, не менее остроумный и интригующий, чем первый. Можно разбить фразу на две части, разместив ее начало на одном изображении, а окончание — надругом. Например, один рисунок будет содержать надпись «Красивая женщина подобна прекрасной картине...», а другой — такое продолжение: «Которую каждый стремится украсть или потрогать руками». Переведите оба изображения в индексированную палитру, оптимизируйте их и сохраните в формате GIF.

8. Откройте программу Ulead GIFAnimator, загрузите в нее последовательно оба рисунка и примените к первому любой из анимационных фильтров, входящих в комплект поставки данного приложения. Осталось лишь повторно оптимизировать получившуюся картинку. Баннер готов.

ПРИМЕЧАНИЕ В большинстве баннерообменных систем практикуется модерация (контроль) баннеров перед включением их в активный обмен. Иными словами, каждый созданный вами баннер будет рассматриваться придирчивым редактором прежде, чем его допустят к использованию. Администрация любой обменной службы заботится об имидже, и ей совершенно не хочется выслушивать претензии обиженных граждан с задетым самолюбием. Поэтому избегайте использования в текстах баннеров оскорбительных высказываний, грубого тона и непристойных выражений, старайтесь не включать в них изображения сомнительного содержания. Скорее всего, вы просто не сможете использовать такой баннер в рекламных целях.

Сложный баннер

Изготовление сложного баннера, эффективность которого должна быть достаточно высока, — процесс весьма трудоемкий. Лично у меня порой уходило несколько дней на оптимизацию цветовой палитры, подбор соответствующих ей полутонов и дорисовку по пикселу участков изображения, на которых появляется «грязь» в результате сокращения числа используемых в рисунке цветов с 256 до 50. Тем не менее игра в большинстве случаев стоит свеч, и высокий

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

  • Относитесь к разрабатываемому вами баннеру как к произведению искусства, создание которого требует кропотливого труда. Уделяйте внимание мелочам. Баннер — это не просто картинка, рекламирующая ваш сайт, это еще и носитель имиджевой рекламы. Малейшая неаккуратность превратит ваш баннер в носитель антирекламы, чего вам, полагаю, всеми силами хотелось бы избежать.
  • Используйте яркие и контрастные цвета, но делайте это в меру. Попугайская раскраска не столько привлекает, сколько раздражает пользователей.
  • Активно применяйте анимацию: движущиеся изображения привлекают внимание. Даже если взгляд пользователя сконцентрирован в данный момент на другом объекте, уловленное боковым зрением движение заставит его отвлечься и посмотреть на движущийся объект.
  • Баннер должен содержать нечто такое, что будет приковывать к себе взгляд пользователя. Читая текст или проглядывая по диагонали заголовок страницы, посетитель рекламирующего вас ресурса должен «зацепиться» за ваш баннер, обратить на него внимание. Однако размещайте этот объект так, чтобы он не мешал восприятию композиции и не перекрывал пояснительные надписи.
  • Помните о владельцах черно-белых мониторов. Содержимое вашего баннера должно быть различимо в режиме grayscale.
  • Лучше всего запоминаются остроумные и смешные баннеры. Ваш баннер как минимум должен вызывать улыбку, Даже если направленность вашего ресурса вполне серьезная, причем желательно, чтобы эта улыбка не была ехидной. Известно множество случаев, когда серьезные организации привлекали на свои страницы огромное количество посетителей и активно «раскручивали» собственную торговую марку, используя смешные баннеры. В качестве наглядного примера приведу имевший весьма высокий CTR баннер сервера iXBT, содержащего техническую информацию о компьютерах, комплектующих и электронных технологиях. На нем был изображен упавший и дымящийся самолет с пояснительной надписью: «Мы испытали горы железа...».Обыграйте ваш слоган забавным анимированным изображением, используйте игру и многозначность некоторых слов, перефразируйте какие-либо известные афоризмы или пословицы. Здесь простор для творчества безграничен.
  • Если с чувством юмора у вас не очень, постарайтесь добавить в баннер интригу. Заставьте пользователя задаться вопросом: «Что именно они имели ввиду? Что же такое может предлагать этот сайт?» Если вам это удастся, можете считать, что посетитель у вас в кармане.
  • Не допускайте в тексте баннера орфографических ошибок. Комментарии здесь, полагаю, излишни.
  • Многие создатели баннеров применяют в их дизайне элементы оконного интерфейса MS Windows или изображения интерактивных форм в расчете на то, что пользователь привык взаимодействовать с объектами, генерируемыми оболочкой этой операционной системы. Действительно, такие баннеры дают более высокий CTR. Однако не обольщайтесь: большое количество посетителей еще не означает большое число ваших потенциальных клиентов. Девяносто процентов таких пользователей — новички в Интернете, пока еще не привыкшие к подобного рода уловкам и хитростям. Как правило, пользователь, щелкнувший на кнопке «Да», расположенной рядом с вопросом «Нравится ли вам этот сайт?», и попавший в результате на домашнюю страничку бухгалтера из Урюпинска, ничего кроме раздражения от этого не испытывает. И, как правило, нажимает в броузере кнопку «Назад» еще до того момента, как данная страничка загрузится до конца. Вам это надо?
  • Согласно статистике более 80 % пользователей Интернета — мужчины. А более 80 % изображений, встречающихся на рекламных баннерах, — женщины. Это вполне логично, поскольку игра на самых сильных инстинктах потенциальной аудитории — верный путь к успеху любого интернетовского проекта. Способ избитый, но действенный. Только не переусердствуйте с эротикой: во-первых, это считается дурным тоном (если только вы не владелец порно-сайта), а во-вторых, такой баннер вряд ли пропустят модераторы баннерообменных систем (если только это не специальная сеть, ориентированная напоказ баннеров непристойного содержания, а такие тоже встречаются).Вот, пожалуй, и все, что касается теории создания баннеров. А практика вносит свои коррективы, поскольку реальное графическое воплощение любого рекламного изображения зависит не только от тематической направленности рекламируемого ресурса, но и от вкуса, таланта и художественных способностей дизайнера.

Что нового мы узнали?

В этом уроке мы изучили:

  • Процесс подготовки проекта к регистрации в поисковых системах.
  • Процедуру регистрации сайта в поисковых машинах.
  • Механизм деятельности служб баннерного обмена.
  • Виды и стандарты рекламных баннеров.
  • Методику использования в рекламных целях бесплатных досок объявлений и подписи к сообщениям электронной почты.
  • Правила использования служб редиректа.
  • Технологию создания рекламных баннеров.


Урок 12
Деньги и Интернет

  • Партнерские программы
  • Продажа баннерных показов
  • Прибыль корпоративных сайтов
  • Виртуальные магазины
  • Что нового мы узнали?

По результатам рейтингов русскоязычных поисковых машин, таких как «Рэмблер» и «Яндекс», одно из самых популярных слов интерактивного запроса, вводимого пользователями, — «работа». Оно и не удивительно: недавний экономический кризис основательно подкосил бюджеты не только государства и регионов, но и простых граждан, то есть нас с вами. В то же время в англоязычной части Интернета вовсю процветает электронная коммерция и торговля. От сумм прибыли, публикуемых в ежегодных пресс-релизах крупнейших компаний, занимающихся Интернет-бизнесом, таких как Amazon, AltaVista и Yahoo!, буквально захватывает дух. Однако оставим крупные корпорации в стороне. Подумаем, может ли простой человек, проживающий в России и не обремененный наличием собственной фирмы и пары-тройки миллионов долларов стартового капитала, заработать деньги в Интернете самостоятельно, опираясь только на собственные знания и навыки. Не найти работу — для этого существует множество электронных агентств по трудоустройству, — а именно заработать, трудясь, что называется, «на себя». Иными словами, можно ли достичь относительного финансового благополучия, используя собственный сайт в Интернете. Иностранцы утверждают, что можно и многие из них успешно занимаются этим уже на протяжении долгих лет. Я же, испытав практически все возможности, имеющиеся в распоряжении простого российского гражданина, осмелюсь утверждать: теоретически это, безусловно, возможно, однако на практике владельцу частного ресурса придется столкнуться с рядом объективных трудностей. И вот почему.

Для того чтобы реализовать свой шанс «сколотить капитал» в Интернете, необходимо как минимум располагать собственным и притом весьма посещаемым сайтом, а во-вторых, в достаточной степени владеть иностранным языком. Нет, безусловно, существуют и российские компании, предлагающие соотечественникам возможность «подработать» в Сети. Но о них речь впереди. Итак, создав около четырех лет назад свой первый web-сайт с десятком тематических разделов и подняв уровень его посещаемости до 60 — 80 человек в день, я начал искать способы получить хоть и небольшую, но прибыль с этого крошечного «частного предприятия».

Партнерские программы

Самый распространенный среди владельцев частных сайтов способ он-лайнового бизнеса — показ рекламных баннеров заинтересованных в этом коммерческих организаций. Безусловно, вы можете пойти по пути «Рэмблера», опубликовав на своей страничке призыв размещать на ней рекламу и платить вам за показы. Как ни странно, даже у такой известной «конторы», как «Рэмблер», дела с этим обстоят, по-видимому, неважно: порядка 50 % публикуемой там рекламы — их собственная. Ну, не развито еще у отечественных Рокфеллеров и Фордов понимание ценности и прибыльности рекламы в Сети, не сформировался еще рынок. Мы догоним в этом отношении богатую и благополучную Америку в лучшем случае лет через пять —семь. Более простой и популярный способ найти рекламодателя в Интернете — подключиться к одной из уже существующих партнерских программ, которые сами изобретатели, американцы, назвали «pay per click». При участии в подобного рода программе вам будут платить за каждого уникального посетителя, пришедшего на сайт рекламодателя с размещенного на вашей страничке баннера. Схема данного вида бизнеса примерно следующая. Вы размещаете на своем сайте баннер рекламодателя, под который «подкладывается» HTML-код, запускающий при открытии страницы в броузере или при нажатии на этот баннер соответствующий обработчик сценария. Данный CGI-скрипт запускается с сервера рекламодателя, поэтому вам, собственно, все равно, поддерживает ли ваш сервер технологию CGI. При нажатии на баннер броузер «отправляет» посетителя на соответствующий сайт, а CGI-скрипт фиксирует IP-адрес пользователя и сравнивает его с имеющейся базой посещений за последние сутки или несколько дней. Если соответствий не выявлено, скрипт динамически записывает на ваш личный счет очередную сумму к оплате. Счет вы можете проконтролировать в любое время суток с сайта рекламодателя, набрав в соответствующей форме свой логин и пароль. После достижения некоторой заранее оговоренной суммы рекламодатель пересылает вам почтой чек, который можно погасить в Сбербанке, либо переводит деньги прямо на ваш банковский валютный счет, если у вас таковой имеется. Вот здесь и начинаются вопросы.

Во-первых, почти половина фирм, готовых платить за показы или посещения и декларирующих, что они принимают в свой «теплый дружеский коллектив» web-страницы со всех концов света, просто отказываются размещать рекламу на русскоязычных сайтах. Оно и понятно: прибыль эти фирмы получают, когда пришедшие по их рекламе посетители оплачивают тот или иной вид предлагаемых ими услуг. Оплачивают, как правило, с помощью пластиковых карт одной или нескольких международных платежных систем, например, «Visa» или«Master». Русские не платят. В нашей стране владельцы таких карт как-то не интересуются возможностью приобретать товары или услуги через Интернет, а вся остальная карточная система сводится исключительно к оплате проезда в метрополитене.

Во-вторых, даже среди рекламодателей иногда встречаются банальные мошенники. Один из них — виртуальное казино «CyberThrill» (http://www.cyberthrill.com).Сам однажды попавшись на их удочку и польстившись на высокую оплату, я накопил уже более тридцати документальных свидетельств от наших соотечественников и зарубежных владельцев сайтов о том, что эта организация заработанных денег не выплачивает никогда. К тому же, по данным тех же зарубежных источников, игорный бизнес в Интернете — явление слегка незаконное.

Справедливости ради отмечу те организации, которые свои обязательства перед владельцами рекламирующих их страничек все-таки выполняют. Одна из них — компания MediaHits (http://www.mediah1ts.com). Фирма предлагает оплату за каждого уникального посетителя сайта их спонсоров в размере пятнадцати центов и, по данным давно сотрудничающих с ней web-мастеров, платит исправно, всегда вовремя и в полном размере. Однако выплата производится только тогда, когда итоговая сумма на вашем счете превысит 100 долларов. Иными словами, размещать рекламу этой фирмы имеет смысл владельцам только тех ресурсов, трафик которых достаточно высок. Иначе придется ждать своих денег десять лет кряду, что, согласитесь, весьма утомительно. Другая компания, хорошо зарекомендовавшая себя на рынке web-бизнеса, — это британский web-брокер ClickTrade (http://www.clicktrade.com). О web-брокерах стоит сказать отдельно. Эти фирмы, в отличие от многих других, сами денег не платят. Зато они приглашают к сотрудничеству рекламодателей и заносят данные обэтих компаниях в каталоги по тематической направленности сайтов, так что каждый клиент (web-мастер) может выбрать для своей страницы десяток—другой подходящих спонсоров. Все платежи проводятся через web-брокера, который, разумеется, имеет на этом свой процент. Функции web-брокера сводятся ктому, что он берет па себя ответственность за своевременность оплаты ваших трудов, а перед рекламодателем — за то, что страницы, где будет размещена его реклама, соответствуют предъявленным требованиям. Этакое виртуальное рекламное агентство. В заслугу ClickTrade можно поставить также то, что на сервере этой организации опубликованы не только подробно изложенные правила размещения рекламы и условия договора, по и исчерпывающая информация о любой заинтересовавшей вас фирме: где она расположена территориально, чем занимается, как долго работает па рынке.

Необходимо сказать также несколько слов о сервере SafeAdudit (http://www.safeadudit.com). Известен он тем, что предлагает по пятнадцать центов за посетителя, но может неожиданно перевести вашу страничку на систему оплаты за каждого зарегестрировавшегося пользователя, причем web-мастеру об этом, что характерно, не сообщается. Удивительно также то, что с регулярностью один раз в неделю этот сервер с грохотом «надает», и все результаты вашей работы, естественно, обнуляются. После этого администратор сайта присылает вам по электронной почте трогательное письмо, где клятвенно обещает, что такого больше никогда не повторится, и слезно просит не разрывать партнерские отношения. Лично мне после пятого раза надоело.

Еще один разряд организаций, охотно расстающихся с деньгами, — это порно-сайты. Самый известный из них и, соответственно, самый аккуратный в оплате — немецкая страничка Adult Friend Finder (http://www.friendfinder.com).Фирма предлагает несколько вполне привлекательных партнерских программ, где сказано, что вам заплатят до тридцати центов за каждого посетителя. Вступив с ними в финансовые отношения, вы с удивлением обнаруживаете, что «до тридцати» на деле означает всего лишь один —пять центов за «клик». Более того, обслуживающий счета партнеров интерфейс FriendFinder отличается чудовищным неудобством и непродумашюстью, а CGI-скрипты работают со скоростью страдающей астмой черепахи.

Достаточно популярны среди владельцев домашних страниц спонсоры, оплачивающие какое-либо действие (например, регистрацию па их сервере бесплатной странички, на которой они потом разместят свою рекламу) или процент от сделки. Недостаток такого рода рекламы очевиден: путешествуя по Интернету, пользователь, скорее всего, поместит закладку на заинтересовавшую его страницу в броузере, чтобы потом, когда он будет располагать достаточным временем, вернуться и внимательно изучить все предлагаемые условия, а не кинется сломя голову сразу где-то регистрироваться или что-то покупать. Между тем CGI-скрипт, отслеживающий вашу прибыль, фиксирует только посетителей, совершивших необходимое действие, перейдя па сервер спонсора непосредственно с вашей странички. Если он обратится к вашему рекламодателю через неделю, вы ничего не получите.

Самой известной организацией, предлагающей процент от сделки, заключенной благодаря вашей рекламе, является питерская книготорговая фирма «Озон» (http://www.o3.ru). По свидетельствам очевидцев, она отличается кристальной честностью. Радует и то, что дизайн сервера «Озона» просто великолепен, а партнерский сервис — прост и удобен.

В принципе, для того чтобы подобрать для своей странички необходимое количество рекламодателей, вполне достаточно набрать в поисковом окне любого поискового сервера фразу «pay per click» или один раз посетить ClickTrade. В любом случае рекомендуется хорошо изучить все предлагаемые потенциальным спонсором условия и задать ему в электронном письме все возникающие попутно вопросы. Кстати, такого рода бизнес даже в нашей стране абсолютно законен — в Гражданском Кодексе РФ подобное партнерство называется «договором оферты», а такой договор, согласно тому же ГК, можно заключать и с лицами — нерезидентами Российской Федерации.

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

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

Продажа баннерных показов

Еще один способ заработка с использованием вашего Интернет-проекта — продажа накопленных вами в одной из баннерообменных сетей показов баннеров за реальные деньги. Баннерные показы скупают у своих пользователей как сами обменные службы, так и независимые организации, проводящие масштабные рекламные кампании. Средняя стоимость баннерных показов колеблется в российском Интернете от 0,5 до 3 долларов за тысячу, в зависимости от того, какой баннерообменной сети принадлежат продаваемые вами показы, и от их суммарного количества.

Отыскать потенциального покупателя на накопленные вами показы баннеров вы можете, воспользовавшись услугами поисковых машин. Для этого достаточно набрать в строке интерактивного запроса поискового сервера фразу «покупка баннерных показов» или «купим (куплю) показы баннеров».

Прибыль корпоративных сайтов

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

Виртуальные магазины

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

Первым и, наверное, самым простым и дешевым способом организации виртуального магазина является так называемая «электронная витрина».

Электронная витрина представляет собой обычный web-сайт, на котором публикуются фотографии предлагаемых предприятием товаров, их описание и, если необходимо, технические характеристики. Для того чтобы приобрести что-нибудь из предлагаемого на витрине ассортимента, посетитель должен связаться с фирмой-продавцом по электронной почте, телефону или факсу, оформить заказ, получить счет и заключить договор поставки. Очевидно, что такой подход не требует от организаторов web-сайта применения каких-либо специальных технологий. Электронную витрину можно создать достаточно быстро и разместить практически на любом узле, предлагающем услуги web-хостинга.Обработка заказов, платежей, сопровождение покупки осуществляется сотрудниками предприятия «вручную». Очевидно и то, что использование электронной витрины не столь удобно для потребителя, как взаимодействие с полноценным виртуальным магазином, где весь процесс совершения покупки полностью автоматизирован, от выбора необходимого пользователю товара до получения оплаченного заказа.

Следующим шагом к созданию полнофункционального виртуального магазина является организация так называемого интерактивного торгового сайта. Такой подход требует уже как минимум использования комплекса технологий CGI,SSI и Java. На web-сайте предприятия-продавца также выставляются изображения образцов товаров, однако при помощи соответствующего сценария CGI пользователь может добавить какое-либо из представленных наименований в виртуальную «корзину покупателя» («shopping-basket»). Сценарий CGI фиксирует при этом название выбранного товара и его стоимость, суммируя все сделанные пользователем покупки. Перед подтверждением заказа у пользователя должна быть возможность отредактировать содержимое «корзины», постоянно отображающейся на web-странице, путем применения соответствующего сценария SSI, чтобы «подогнать» итоговую сумму к его реальным финансовым возможностям. Следующим шагом посетитель виртуального магазина должен выбрать из списка регион своего проживания, и CGI-скрипт динамически высчитывает стоимость доставки заказа в этот регион, добавляя ее к суммарной стоимости товаров.

Затем покупатель выбирает форму оплаты. Вот об этом следует поговорить отдельно. Дело в том, что во всем цивилизованном мире оплата покупок в виртуальных магазинах осуществляется посредством кредитных карт различных платежных систем, из которых наиболее распространены карты «Visa» и «Master». Наверное, не стоит лишний раз упоминать о том, что программные модули приема транзакций с банковских кредитных карт и системы взаимодействия с банком стоят крайне дорого, к тому же среди российских пользователей Интернета клиентов таких платежных систем крайне мало. Поэтому в российских виртуальных магазинах сейчас применяются в основном следующие формы оплаты: банковским или почтовым переводом либо наложенным платежом по факту получения заказа на почте.

Таким образом, пользователь, заполнив несложную анкету с личными данными, нажимает на сайте кнопку «сделать заказ», а CGI-скрипт, сформировав соответствующий отчет в форме специального репорт-файла или электронного письма, направляет его в почтовый ящик компании-продавца. Далее пользователь загружает готовый бланк оплаты заказа, куда уже помещены реквизиты компании, и оплачивает сделанную покупку в варианте предоплаты через банк или отделение связи либо, дождавшись получения товара на почте, оплачивает заказ по факту доставки. Обработка входящих заказов, контроль за прохождением платежей и своевременной доставкой покупок заказчику осуществляются сотрудниками предприятия традиционными методами.

Обратите внимание на то, что организация такого виртуального мини-магазина потребует от вас размещения ресурса на сервере, предоставляющем доступ к использованию технологий CGI. Разработчику же подобного сайта необходимо владеть соответствующими навыками программирования. Безусловно, создания и отладки собственных интерактивных сценариев можно избежать, загрузив набор бесплатных скриптов для организации простого виртуального магазина с одного из серверов, предлагающих бесплатное программное обеспечение. Среди них можно особо порекомендовать службы http://www.freecode.com.http://www.scripts.com и http://www.freeware.ru. Однако на практике в большинстве случаев оказывается, что разработанные сторонними программистами CGI-и SSI-сценарии далеко не всегда соответствуют требованиям и целям, которые ставит перед виртуальным магазином заказчик. Разобраться же в килобайтах созданного независимыми разработчиками кода, несмотря на обилие комментариев и наличие подробных инструкций, зачастую решительно невозможно.

Именно поэтому среди коммерческих организаций в настоящее время практикуется иной подход к созданию собственной интерактивный торговой площадки, а именно — аренда виртуального магазина. Действительно, в Интернете существует ряд серверов, предлагающих своим клиентам услуги по использованию уже готового виртуального магазина. Вы можете применять CGI и SSI-сценарии, запускающиеся с сервера вашего арендодателя, настраивать дизайн магазина на свой вкус, представлять любой ассортимент товаров и, наконец, в случае необходимости проводить платежи через бухгалтерскую систему приютившей вас организации. Специалисты такой службы окажут вам все необходимые консультации и техническую поддержку. Степень интеграции арендованного виртуального магазина с торговой сетью головного предприятия может быть различной: от предоставления дискового пространства, домена и рекламной поддержки (предполагается, что все остальные функции, включая установку, настройку и отладку соответствующего программного обеспечения, арендатор осуществляет самостоятельно) до простой загрузки на удаленный узел изображений товаров и сопроводительной информации. В последнем случае все остальные технические функции реализует торговая сеть.

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

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

Под программным обеспечением здесь подразумеваются специальные программные комплексы, ориентированные на работу в сфере электронной коммерции и позволяющие выполнять полный комплекс функций виртуального магазина от идентификации и авторизации пользователя до подготовки бухгалтерской документации. Среди таких программных пакетов можно перечислить Microsoft Merchant Server для Windows NT и Windows 2000 Server, Netscape Xpert, Oracle Internet Commerce Server и некоторые другие. Существует и отечественная версия полнофункционального виртуального магазина производства известной фирмы «1C», которая называется «1C: Интернет-магазин». В пользу отечественного пакета следует сказать, что его отличает, во-первых, относительно невысокая стоимость по сравнению с его зарубежными аналогами, а во-вторых, возможность интеграции с программными комплексами «1C: Бухгалтерия», «1C: Склад» и «1C: Предприятие», что немаловажно для компаний, работающих на базе этих программных продуктов.

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

Что нового мы узнали?

В этом уроке мы изучили:

  • Основные способы извлечения прибыли из частного web-сайта.
  • Возможности подключения к так называемым партнерским программам.
  • Виды прибыли от разработки коммерческого и представительского ресурса в Интернете.
  • Методики создания электронных витрин, интерактивных торговых сайтов и полнофункциональных виртуальных магазинов.


Урок 2
Основы web-технологий

  • HTML
  • Броузеры
  • Сервер, сайт, домашняя страничка
  • Анатомия сервера
  • Говорим по-русски. О кодировках кириллицы
  • Другие web-технологии
  • JAVA
  • CGI
  • SSI
  • CSS
  • РНР
  • ASP
  • VBScript
  • Macromedia Flash
  • DHTML
  • XHTML и XML
  • Web-хосгинг
  • Путь первый. Бесплатный хостинг
  • Путь второй. Хостинг у провайдера
  • Путь третий. Платный хостинг
  • Путь четвертый. Хостинг у знакомых
  • Что нового мы узнали?

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

HTML

HTML, Hyper Text Markup Language, или, по-русски, «язык разметки гипертекста», является фундаментальной, базовой технологией Интернета. Несмотря на бытующее среди пользователей Всемирной сети мнение, HTML является полнофункциональным языком программирования, обладающим практически всеми чертами, характерными для других аналогичных языков. Практически все содержимое web-узлов, которое отображается на экране подключенных к Интернету компьютеров, является набором документов, содержащих программный код HTML. HTML позволяет формировать на странице сайта текстовые блоки, включать в них изображения, организовывать таблицы, управлять отображением цвета документа и текста, добавлять в дизайн сайта звуковое сопровождение, организовывать гиперссылки с контекстным переходом в другие разделы сервера или обращаться к иным ресурсам Сети и компоновать все эти элементы между собой. Файлы, содержащие гипертекстовый код, имеют расширение .htm или .html.

ПРИМЕЧАНИЕ HTML, Hyper Text Markup Language (язык разметки гипертекста) — язык, используемый для создания документов в Интернете. HTML-документом называется файл, содержащий код HTML. Такие документы являются основным информационным наполнением web-узлов, они позволяют отображать текст, графику, аудио- и видеоинформацию, а также другие компоненты ресурсов Интернета.

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

ПРИМЕЧАНИЕ Гиперссылка (Hyperlink) — базовый функциональный элемент html-доку-мента, представляющий собой реализацию динамической связи какого-либо объекта данной web-страницы с контекстным содержимым другого документа.

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

В отличие от других языков программирования, HTML — язык не транслируемый, но интерпретируемый. Это означает, что для исполнения готового кода его не нужно компилировать, встроенный в специальное программное обеспечение, предназначенное для просмотра web-страниц, интерпретатор «компилирует» код непосредственно в процессе открытия документа. При этом, обнаружив в тексте ошибку, такая программа не выдает соответствующего предупреждения(если страница не содержит встроенных скриптов Java), а попросту игнорирует всю «ошибочную» строку. Это следует иметь в виду, составляя HTML-программу, поскольку можно ненароком пропустить «незаметную» ошибку и выявить ее наличие уже тогда, когда страница будет опубликована в Web.

Подробно о языке HTML будет рассказано в четвертом уроке.

Броузеры

Как уже упоминалось выше, для просмотра html-документов необходимо специальное программное обеспечение, предназначенное для динамической обработки кода HTML и отображения web-страниц. Такие программы называются броузерами.

ПРИМЕЧАНИЕ Броузер — специальная клиентская программа, предназначенная для просмотра содержимого web-узлов и отображения документов HTML. Броузеры содержат встроенный транслятор языка разметки гипертекста, компилирующий html-код в процессе открытия web-страницы.

Существует несколько классов броузеров, различающихся в основном спектром реализуемых ими возможностей. Два основных класса — это броузеры, поддерживающие и не поддерживающие отображение графических элементов web-страниц. Большинство современных броузеров относятся к первому классу. Наиболее распространены среди пользователей Интернета броузеры MicrosoftInternet Explorer и Netscape Navigator, предназначенные для работы в среде Microsoft Windows. Менее распространены Opera, Arachne (работает под управлением DOS) и текстовый броузер для UNIX-совместимых платформ под названием Lynx.

Следует помнить, что интерпретаторы HTML, встроенные в различные броузеры, работают не одинаково, из-за чего один и тот же html-документ может отображаться в них по-разному. Тем не менее все существенные отличия в алгоритмах обработки кода интерпретаторами наиболее популярных броузеров поддаются статистическому анализу, и несоответствия, появляющиеся при открытии ими документов HTML, без труда устраняются. Методики, позволяющие добиться идентичности отображения web-страниц в различных броузерах, мы обсудим в девятом уроке.

Сервер, сайт, домашняя страничка

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

Сервером сети Интернет называется компьютер, на котором установлена специальная программа (она тоже называется сервером, web-сервером или http-cep-вером), которая отображает web-страницы по запросу клиентской машины, атак же выполняет множество других полезных функций, которых мы коснемся чуть позже. Когда ваш домашний компьютер связывается с сервером и получает от него все необходимые данные, например код web-страницы, он выступает в роли «клиента», а всю систему в этом случае принято называть связкой «клиент—сервер». На этот термин следует обратить особое внимание, поскольку в последствии мы часто будем сталкиваться с ним.

ПРИМЕЧАНИЕ Системой «клиент-сервер» называют механизм передачи информации между удаленным компьютером, предоставляющим свои ресурсы в распоряжение пользователей, и пользовательским компьютером, эксплуатирующим эти ресурсы. В данном случае компьютер, открывающий доступ к собственным ресурсам, носит название «сервера», а получающий та- кой доступ — «клиента».

Серверы могут быть разными, причем отличия заключаются, прежде всего, в операционной системе, под управлением которой они работают. В настоящее время на большинстве интернетовских узлов используют два типа серверных программ: либо Internet Information Server, рассчитанный на работу под Windows NT, либо Apache, предназначенный для платформ, совместимых со стандартом UNIX. Как правило, серверы работают на линиях с большой пропуск- ной способностью, например, в сетях с оптоволоконными каналами связи, что по финансовым соображениям доступно лишь крупным предприятиям.

Помимо соответствующей программы настоящий сервер должен иметь собственный домен, то есть адрес DNS, отвечающий стандартам Domain Name System.

Таким образом, сервер — это компьютер с установленным на нем специальнымпрограммным обеспечением, имеющий собственное доменное имя. Владелец и администратор сервера могут гибко менять необходимые настройки, разрешать или запрещать доступ к его ресурсам, подключать, настраивать и запускать ряд дополнительных программ и функций, таких как скрипты CGI или приложения SSI, то есть полностью конфигурировать его работу по мере необходимости.

Тематическое содержание серверов может варьироваться в широком диапазоне в зависимости от целей, ради которых они были созданы, возможностей или фантазии владельца и многих других условий. Объединяет их все, пожалуй, только одно: полноценный сервер должен представлять собой то, что среди пользователей Интернета принято называть термином «информационный портал» , то есть в идеальном случае он является достаточно большим виртуальным пространством, состоящим из множества различных тематических разделов меньшего размера, либо некоторого количества самостоятельных проектов.

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

Универсальных решений относительно того, какие разделы должен включать всебя сайт, увы, нет — все зависит опять же от целей, которые ставит перед со- бой автор, и от выбранных методов их достижения. Какое-то подобие «стандарта», пожалуй, сформировалось в отношении официального сайта коммерческого предприятия — здесь обязательными являются страница «о компании», которая рассказывает об истории создания фирмы, ее профиле, о проектах и планах развития; страница «продукты/услуги», предоставляющая посетителю информацию о том, чем занимается данная организация, и содержащая предложение приобрести или заказать что-либо из производимого ею товара, воспользоваться ее услугами, а также раздел «вакансии» с информацией о требующихся в данный момент специалистах и перечнем условий приема на работу. Но на практике встречается множество прекрасно исполненных сайтов, содержащих не упомянутые выше тематические рубрики.

Домашняя страничка (homepage) в большинстве случаев не располагает даже собственным доменом, и ее адрес обычно выглядит как http://www.domain.zooe/your_name/. Исключения составляют разве что страницы, размещенные на бес- платных серверах, администрация которых охотно выделяет для своих клиентов домены третьего уровня. По содержанию домашняя страничка — это, прежде всего, рассказ о человеке, его семье, образе жизни, хобби и увлечениях. Заводят домашнюю страничку, как правило, по двум причинам: во-первых, в процессе поиска в Интернете новых знакомых неизменно возникает ситуация, когда человеку необходимо рассказать собеседнику о себе, дабы тот получил хоть какое-то представление о том, с кем он общается. В этом случае гораздо удобнее переадресовать его к собственной домашней страничке, нежели в очередной раз подробно излагать одну и ту же информацию. Во-вторых, опубликовав на домашней странице свое резюме, вы можете значительно облегчить процесс поиска работы — у вашего потенциального работодателя появится возможность оценить ваши человеческие качества, ознакомившись с данным документом.

Здесь можно дать несколько советов, касающихся содержания домашней странички, а именно тех ее разделов, без которых ваше творение будет выглядеть незаконченным или малосодержательным. Это, прежде всего, рассказ «о себе», то есть вольное изложение собственной биографии. Затем необходима рубрика, которую можно условно назвать «мои хобби» или «мои увлечения», подробно рассказывающая о том, чем вы любите заниматься в свободное от дел время. Весьма желательна «фото галерея», включающая ваши фотографии, а также страницы, касающиеся вашей семьи и работы. По желанию можно добавить в список разделов страничку с подборкой ссылок, которые по тем или иным причинам кажутся вам интересными.

Теперь давайте разберемся, как устроен сервер «изнутри», что необходимо для понимания ключевых моментов, касающихся публикации web-страниц в сети Интернет.

Анатомия сервера

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

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

Поиск запрашиваемой страницы осуществляется в определенной директории, которая отведена на серверном компьютере под данный сайт — ссылка на эту директорию присутствует во введенном пользователем адресе. В случае когда обращение осуществляется не к конкретному документу, а к сайту в целом, http-сервер автоматически подставляет вместо названия передаваемого файла так называемую «стартовую страницу», которая носит имя index.htm или index.html (в некоторых случаях — default.htm или default.html). Этот документ обязательно должен располагаться в корневом каталоге, отведенном для размещения вашего сайта, либо, если это оговорено особо, в директории с названием WWW. Все остальные файлы можно размещать либо в этом же каталоге, либо во вложенных директориях, что иногда бывает удобным, особенно в случае, когда сайт содержит несколько тематических разделов или рубрик.

Помимо созданных вами вложенных папок, в которые вы вольны помещать практически любое необходимое вам содержимое, серверная директория содержит обычно еще несколько каталогов, которые следует упомянуть отдельно. Во-первых, это папка CGI-BIN, где размещаются CGI-скрипты и другие запускаемые с вашего сайта интерактивные приложения, а также несколько служебных директорий, необходимых для нормальной работы сервера. На начальном этапе на них просто не следует обращать внимания. Иногда в том же ката- логе, где хранится index.html, присутствует ряд дополнительных файлов: not_found.html — документ, который отображается в случае, если http-серверне смог найти запрашиваемый пользователем файл, forbidden.html — отображается в качестве сообщения об ошибке, если доступ к запрашиваемому документу запрещен, и, наконец, robots.txt — файл, в котором специальным образом описываются правила индексации вашего сайта поисковыми машинами.

В большинстве случаев, а особенно при публикации домашней странички на серверах, предоставляющих бесплатный хостинг, к служебным директориям и папке CGI-BIN доступ пользователям закрыт, изменение содержимого файлов not_found и forbidden.html также невозможно. Это следует учитывать, если вы планируете включить в свой ресурс какое-либо интерактивное содержимое, требующее как минимум возможности помещать файлы в одну из служебных папок. В некоторых случаях вам может быть запрещено создавать на сервере вложенные каталоги, тогда пользователю придется довольствоваться исключительно одной директорией, отведенной для ваших нужд.

Из всего сказанного становится ясно, что броузер клиента может только получать и обрабатывать информацию с сервера, а размещать и изменять ее — лишь в том случае, если загрузка файлов на сервер реализована на основе протокола HTTP с помощью специальных CGI-скриптов, включенных в серверный web-интерфейс. Во всех остальных случаях приходится пользоваться так называемым ftp-сервером, на который посредством специального программного обеспечения (подобный рассказ о нем пойдет в уроке 4) можно передать необходимые файлы, автоматически загружая их в отведенную для вашего сайта директорию. В обоих случаях вам потребуется знать свое регистрационное имя и пароль для доступа к системе. Следует также помнить, что большинство серверных программ (в частности, Apache для UNIX-совместимых платформ) различают строчный и заглавный регистр символов, поэтому все имена файлов и их расширения во избежание ошибок следует писать строчными буквами, причем обязательно латиницей. Последнее связано с различиями в обработке кодировок русского языка, характерной для тех или иных серверов.

Говорим по-русски. О кодировках кириллицы

В настоящее время существует пять основных кодировок кириллицы, то есть наборов символов, с помощью которых можно отобразить на web-странице знаки русского алфавита. Они носят названия ISO, KOI8-R, DOS, Windows 1251 и MAC. Имеется также ряд менее распространенных кодировок, так или иначе способных воспроизводить символы кириллицы, они называются Unicode(UTF-8) и транслит.

ПРИМЕЧАНИЕ Кодировкой кириллицы называется общепринятый стандарт, включающий набор символов, который позволяет отображать в документах HTML знаки русского алфавита.

Исторически первой возникла кодировка KOI8 (код обмена информации восьмибитный), соответствующая стандарту ГОСТ 19768-74. Она была разработана в середине семидесятых годов специалистами одного из советских НИИ и к се- редине восьмидесятых стала базовой кодировкой для только что появившихся тогда в нашей стране русифицированных UNIX-совместимых операционных систем. Именно благодаря этому на сегодняшний день KOIS является основным стандартом для серверов, работающих на базе платформы UNIX (например, для http-сервера Apache), а также используется в качестве «формата по умолчанию» при пересылке сообщений электронной почты на русском языке.

Компания Microsoft, создавая программное обеспечение для работы в Интернете, как водится, пошла своим путем, предложив стандарт Microsoft code page1251 (Windows 1251), получивший чрезвычайно широкое распространение благодаря популярности операционной системы Microsoft Windows и http-сервера Internet Information Server, входящего в комплект поставки Windows NT. Именно поэтому и Windows 1251, и KOI8-R входят в тот минимально допустимый набор кодировок, которые должна обязательно поддерживать любая web-страница.

Стандарт Microsoft/IBM code page 866 (альтернативная кодировка DOS) служит базовой кодировкой в операционных системах MS-DOS и OS/2, и потому в настоящее время она медленно, но верно утрачивает свои позиции, поскольку даже сам разработчик и производитель DOS, компания Microsoft, отказалась от дальнейшей поддержки этой линии операционных платформ. Тем не менее кодировка жива и по сей день, прежде всего, благодаря тому, что часть пользователей не намерена пока расставаться с броузерами, работающими в среде MS-DOS, а также по той причине, что данный стандарт принят по умолчанию в некоммерческой сети FidoNet.

Кодировка ISO-8859-5 была разработана Комитетом по международным стандартам (International Standards Organization, ISO) и применяется в основном вUNIX - совместимых операционных системах. Поскольку данный набор символов был создан западными специалистами, плохо знакомыми не только с самим русским языком, но и с уже имеющимся многообразием кодировок кириллицы, ISO не получила широкого распространения, однако все же достаточно часто встречается в Интернете и активно поддерживается рядом русскоязычных серверов.

Macintosh CP (MAC) предназначена для использования на компьютерах AppleMacintosh, оснащенных операционной системой MacOS. Из-за высокой стоимости Apple-совместимые компьютеры не получили в нашей стране широкого распространения, однако они иногда эксплуатируются на крупных отечественных предприятиях.

Универсальный международный стандарт Unicode (UTF-8) был создан с благородной целью объединить все существующие на сегодняшний день национальные кодировки в одну. Поскольку для отображения одного символа в Unicode отводится не один байт, как это принято во всех остальных стандартах, а два, данная кодировка включает в себя 65 536 знаков вместо 256. В это число входят не только буквы всех алфавитов мира как существующих ныне или созданных искусственно, так и уже практически вымерших, но и множество специальных символов — математических, музыкальных, физических. Однако пре- одолеть инертность большинства владельцев интернетовских ресурсов не так-то просто: поддержка Unicode требует замены части программного обеспечения, да и далеко не все клиентские программы умеют распознавать этот стандарт. Именно поэтому сегодня Unicode практически не используется в Интернете —по всей видимости, это кодировка будущего.

Для операционных систем, вообще не поддерживающих кириллицу, существует транслит. Собственно, данный «вариант русского языка» даже трудно назвать кодировкой, поскольку транслит подразумевает всего-навсего запись русских слов символами латинского алфавита. Такой подход связан с определенными трудностями, так как стандартный латинский шрифт не содержит большинства необходимых для полноценного отображения русского текста символов, напри- мер, таких как мягкий и твердый знаки, а также буквы «и», «ш», «щ», «ы»,«ю», «я» и некоторые другие. Поэтому и был разработан набор правил, позволяющих избегать подобных трудностей. Существует также специальное программное обеспечение, облегчающее перевод русского текста на транслит.

Большинство современных серверных программ обладают встроенной функцией автоматического определения кодировки, используемой клиентским программным обеспечением, и перевода текста в необходимый стандарт «на лету». Однако бывают ситуации, когда возможность автоматического распознавания необходимого пользователю набора символов на сервере отключена или попросту отсутствует. Как раз на этот случай существует стандарт, согласно которому для вывода каждой из кодировок русского языка назначается один из портов сервера. Адрес порта записывается через двоеточие после обозначения домена первого уровня в формате http://www.домен.ги:адрес_порта/название документа. Ниже перечислены стандартные адреса портов для большинства используемых в Интернете серверных программ:

8080 - Microsoft code page 1251 (Windows 1251);

8081 - Microsoft/IBM code page 866 (DOS);

8082 - Macintosh CP (MAC);

8083 - KOI8-R;

8084 — транслит.

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

Другие web-технологии

JAVA

Язык программирования Java, разработанный около восьми лет назад компанией Sun Microsystems и напоминающий по структуре и синтаксису хорошо знакомый многим программистам С, существует сегодня в Интернете в двух вариантах: JavaScript и собственно Java. Первый вариант языка является всего лишь надстройкой стандарта HTML и значительно расширяет возможности документа, созданного в этом формате. Модуль, написанный на JavaScript, интегрируется в файл HTML как подпрограмма и вызывается на исполнение из соответствующей строки HTML-кода стандартной командой. Встроенный в броузер интерпретатор языка воспринимает и скрипт, и сам код гипертекста как единый документ, обрабатывая те и другие данные одновременно. Модуль Java в отличие от JavaScript не интегрируется в использующую его страницу, а существует как самостоятельное приложение с расширением .classили, выражаясь научным языком, апплет. При использовании этого варианта языка апплет также вызывается из html-файла соответствующей командой, но загружается, инициализируется и запускается на исполнение в виде отдельной программы, в фоновом режиме.

С помощью технологии Java можно придать своей странице элементы интерактивности, формировать, компоновать и полностью контролировать формат всплывающих окон и встроенных фреймов, организовывать такие активные элементы, как «часы», «бегущие строки» и иную анимацию, создать чат. Большинство web-камер, передающих на сайт «живое» изображение, также работают на базе соответствующих приложений Java.

Среди достоинств этой технологии следует отметить отсутствие необходимости устанавливать и настраивать на сервере какие-либо дополнительные модули, обеспечивающие работу Java-программ. Главный недостаток Java заключается в том, что пользователи броузеров старых версий, не поддерживающих компиляцию данного языка, воспринимать объекты, созданные при помощи Java и JavaScript, не смогут.

CGI

Технология CGI (Common Gateway Interface) подразумевает использование в составе ресурса Интернет интерактивных элементов на базе приложений, обеспечивающих передачу потока данных от объекта к объекту. Именно так организовано во Всемирной сети большинство чатов, конференций, досок объявлений, гостевых книг, поисковых машин и систем подсчета рейтинга. В общем случае принцип работы CGI выглядит следующим образом: пользователь заполняет на web-страничке ту или иную форму и нажимает на кнопку, после чего встроенная в код HTML строка вызова CGI-скрипта запускает соответствующую программу CGI и передает ей управление процессом обработки информации. Введенные пользователем данные отсылаются этой программе, а она, в свою очередь, «встраивает» их в другую страницу, отправляет по почте или

трансформирует каким-либо иным способом, Скрипты CGI размещаются на сервере в специально отведенной для этих целей директории, которой, как правило, назначается имя CGI-BIN. Следует помнить, что подключение, отладка и запуск таких программ требуют соответствующих прав доступа к http-серверу,а также определенных знаний и навыков.

Технология CGI обычно реализуется двумя методами: либо с использованием программ, написанных на языке PERL (Practical Extraction and ReportLanguage), — такие файлы имеют расширение .pi, либо с помощью приложений, созданных обычно с применением языка С и откомпилированных непосредственно на сервере, поскольку большинство UNIX-совместимых платформ включают в себя встроенный транслятор этого языка. Подобные программы имеют расширение .cgi. Необходимо отметить, что PERL, как и HTML, является интерпретируемым языком. Иными словами, для того чтобы запустить подобный скрипт на исполнение, не требуется дополнительной компиляции. Помимо упомянутых возможностей с помощью данной технологии можно организовать систему показа последовательности рекламных баннеров или автозагрузки файлов на сервер, создать форму отправки электронного письма непосредственно со страницы сайта или службу виртуальных открыток. Среди достоинств CGI следует отметить их независимость от клиентского программного обеспечения — эту технологию сможет применять каждый пользователь, просматривающий содержимое сервера при помощи броузера практически любой версии. Главный недостаток заключается в том, что для установки и на- стройки приложений CGI на сервере нужно обладать как минимум правами администратора, поскольку эти программы при запуске способны нарушить нормальное функционирование серверного компьютера и дестабилизировать работу сети.

SSI

SSI (Server Side Includes) — технология, тесно переплетенная с упомянутой выше CGI. На основе макроязыка, очень напоминающего С, SSI позволяет реализовать такие возможности, как вывод в документе того или иного текста в зависимости от определенных условий или согласно заданному алгоритму, формировать файл HTML из динамически изменяющихся фрагментов или встраивать результат работы CGI в какой-либо его участок. Достоинства и недостатки SSI аналогичны описанным в предыдущем абзаце.

CSS

Зачастую у web-дизайнера возникает необходимость применить в процессе создания html-документа сложное форматирование — от абзаца к абзацу менять шрифт, расположение текста, его цвет, формировать различные таблицы данных. Можно решить эту проблему с помощью стандартных средств HTML: описывать каждый абзац отдельным набором команд, но в этом случае итоговый документ будет иметь большой размер, да и само создание кода становится весьма трудоемкой работой. Можно пойти другим путем: подключить к странице внешний файл, выполненный в стандарте CSS — Cascading Style Sheets (каскадные таблицы стилей), в котором с помощью специального макроязыка один раз жестко задать форматирование страницы. Другими словами, файл CSS выполняет роль некоего шаблона, применяемого для форматирования текста, таблиц и иных элементов в документе HTML. Есть возможность подключать один и тот же физический файл CSS к различным web-страницам сайта. CSS можно использовать практически на любом сервере без каких-либо ограничений. Крупные недостатки у данной технологии также практически отсутствуют. О каскадных таблицах стилей CSS мы подробно побеседуем в восьмом уроке.

РНР

РНР (Personal Home Page tools) — это еще один интерпретируемый язык, напоминающий PERL, предназначенный для придания web-страницам элементов интерактивности. Код, написанный на языке РНР, встраивается в документ HTML подобно подпрограмме: в тот участок документа, где необходимо разместить интерактивный элемент, просто вставляется сценарий РНР. Мнемоника данного языка базируется на синтаксисе PERL, Java и С, благодаря чему не вызывает каких-либо трудностей при изучении. Методики, которые позволяют серверам корректно распознавать файлы, содержащие скрипты РНР, различны и зависят в первую очередь от типа конкретного сервера. Считается достаточным назначить такому файлу расширение .php, иногда — с добавлением номера версии используемого языка, например .php2 или .php3.

Технология РНР позволяет организовать на web-странице счетчик посещений, подсчитывать статистику обращений к тем или иным разделам сайта, защитить доступ к какому-либо html-документу паролем и многое другое. Среди недостатков РНР следует отметить то, что данная технология поддерживается далеко не всеми серверами Интернета.

ASP

ASP (Active Server Pages, активные страницы сервера) — еще одна технология, аналогичная JavaScript и РНР. Для того чтобы сделать web-страницуинтерактивной с применением технологии ASP, необходимо встроить в ее код соответствующий скрипт, написанный на макроязыке, отдаленно напоминающем Java и С. Скрипт интерпретируется и исполняется непосредственно на сервере, после чего пользовательскому броузеру отправляется уже готовый html-документ с результатами работы сценария ASP. Отсюда следует вполне справедливое заключение о том, что для страниц, содержащих ASP, не имеет значения, какое программное обеспечение установлено на пользовательском компьютере. Зато принципиальное значение имеет тип сервера, на котором вы планируете использовать ASP, поскольку отнюдь не все они поддерживают данную технологию.

VBScript

VBScript, или Visual BASIC Script (Visual Beginners All-purpose SymbolicInstruction Code Script, визуальный символический универсальный командный код для начинающих) — очередная версия интерпретируемого языка, встраиваемого в html-документ с целью включения в состав web-страницы интерактивных элементов. Честь создания данной технологии принадлежит разработчикам компании Microsoft.

Если сравнить более распространенный стандарт JavaScript с VBScript, обнаружить серьезные различия очень трудно, поскольку мнемоника и синтаксис обоих языков во многом схожи. С помощью VBScript можно реализовать практически весь спектр возможностей, характерных для JavaScript. Обе технологии не зависят от типа сервера, на котором планируется опубликовать включающую их web-страницу. Однако VBScript в настоящее время менее распространен в Интернете, нежели его «конкурент», поскольку он поддерживается только броузерами производства Microsoft, а именно Internet Explorer версий 3.0 и выше. Netscape Navigator не имеет интерпретатора этого языка, поэтому приверженцы этого броузера лишены возможности использовать интерактивные элементы, созданные с применением VBScript, в то время как JavaScript поддерживается и Internet Explorer и Netscape Navigator.

Macromedia Flash

Стандарт Flash был разработан компанией Macromedia в 1996 году. Основное назначение данной технологии — создание высококачественной интерактивной анимации, которую можно представлять при относительно небольшом размере итогового файла. С помощью Macromedia Flash web-мастер имеет возможность изготавливать красочные анимационные заставки, определенные элементы которых могут «реагировать» на движения мыши, а также встроенные в web-страницы мини-игры, озвученные мультипликационные клипы и многое другое. Другими словами, Macromedia Flash способна практически на все, что доступно при применении Java, и даже больше.

Одним из основных отличий Macromedia Flash от всех остальных существующих ныне web-технологий является то, что это единственный стандарт, позволяющий работать не только с растровой графикой, но и с векторной. Помимо этого текст импортируется в среду Flash не как растровое изображение, а именно как текст, в котором один символ кодируется одним байтом информации, что является серьезным оружием в борьбе с излишним объемом результирующих файлов. Немаловажно, что во Flash имеется возможность воспроизведения музыки и звуков в формате МРЗ.

Для создания документов, подготовленных согласно данному стандарту, компания Macromedia выпустила специальную объектно-ориентированную среду разработчика в виде стандартного 32-разрядного приложения Microsoft Windows.Благодаря этому собственно процесс программирования при подготовке интерактивных элементов Flash и анимации сведен к минимуму: пользователю достаточно создать новый проект в удобной и дружественной среде, для чего необходимо лишь разобраться в принципах работы программного пакета и уметь обращаться с мышью, — по окончании работы программа встроит созданные объекты в документ HTML автоматически.

В среду Flash интегрирован специальный язык программирования, немного похожий на Java, но более простой в изучении. Написанные с его помощью программные модули импортируются в документ как апплеты и вставляются в нужный кадр анимации, где должно произойти динамическое изменение изображения. С помощью специального редактора можно написать небольшую программку, управляющую проигрыванием клипа, создать элементы, поддающиеся индивидуальным настройкам посетителями сайта, генерировать заставку с несколькими вариантами продолжения. Способов реализации этой возможности существует множество, но все-таки, чтобы использовать всю мощь встроенного языка, необходимо иметь определенный опыт в программировании. Механизм технологии Macromedia Flash достаточно прост: в общем случае подготовленные разработчиком интерактивные элементы и анимация превращаются в интерпретируемый код, который импортируется в страницу HTML. Для того чтобы клиентский броузер мог распознать объекты Flash, необходимо проинсталлировать на компьютере пользователя специальную надстройку кброузеру (plug-in), которая носит название Macromedia Flash Player. Эта про- грамма распространяется бесплатно фирмой-разработчиком данной технологии. Пользовательский броузер, сталкиваясь с документом в формате Flash, как правило, сам связывается с соответствующим узлом, после чего начинает загрузку и установку Flash Player в автоматическом режиме. Проигрыватель Flash уже интегрирован в броузеры Microsoft Internet Explorer 4.0-5.0 иNetscape Navigator версии 4.01 и выше. Другие броузеры, к сожалению, не уме- ют распознавать данный стандарт, в чем и заключается его основной недостаток.

DHTML

DHTML (Dynamic Hyper Text Markup Language, динамический язык разметки гипертекста) является расширением стандарта HTML и позволяет создавать web-страницы, включающие такие интерактивные элементы, как движущийся фон, расположенный под статичным содержимым документа, движущиеся объекты, выпадающие меню, кнопки, подсвечивающиеся при наведении курсорамыши, анимацию, бегущие титры и многое другое. По большому счету DHTML представляет собой «среднее арифметическое» между технологиями HTML и JavaScript. Этот стандарт использует простые сценарии, подготовленные с по- мощью интерпретируемого макроязыка, обрабатываемого броузером совместно с кодом HTML. Такие сценарии именуются «скриплетами». Для создания скриплетов используются стандартные расширения DHTML и любой макроязык, поддерживающий директивы интерфейса ActiveX. DHTML распознается броузерами Microsoft Internet Explorer, начиная с версии 4.0 ивыше.

XHTML и XML

XML (Extensible Markup Language, расширяемый язык разметки) является принципиально новым стандартом, предложенным в 2000 году создателем языка HTML — консорциумом World Wide Web Consortium (W3C). Это новейшая технология изготовления web-страниц, и ее окончательная спецификация $ настоящий момент еще находится в стадии разработки. По структуре XML представляет собой не собственно язык разметки гипертекста, а так называемый метаязык, предназначенный для описания других языков более низкого уровня. В свою очередь XHTML (Extensible Hypertext Markup Language, расширя емый язык разметки гипертекста) представляет собой промежуточный вариант между XML и HTML 4.O. Именно за счет его широкого применения W3C планирует осуществить постепенный переход от одного стандарта к другому. В спецификацию XHTML заложен принцип обратной совместимости. Иными словами, владельцам web-сайтов, страницы которых выполнены по технологии HTML 4.0или более ранних версий, не придется как-либо изменять формат опубликованных в Интернете документов: все дополнения и расширения нового языка полностью включают в себя предыдущие стандарты.

XML и XHTML значительно расширяют возможности HTML и позволяют web-мастерам использовать практически весь заложенный в современный Интернет потенциал на сто процентов, в первую очередь в сфере электронной коммерции. Поскольку XHTML подразумевает модульную архитектуру построения электронных документов, данный стандарт позволяет создавать механизмы взаимодействия с нетрадиционными для Интернета устройствами, такими как факсы, сотовые телефоны и телевизоры. По мнению аналитиков, в не столь отдаленном будущем XML станет основным стандартом во Всемирной сети, посте- пенно включив в себя большинство других использующихся ныне форматов. Необходимо отметить, что в рамках настоящей работы описанные в этом уроке Интернет-технологии подробно рассматриваться не будут, за исключением ме- тодик применения каскадных таблиц стилей CSS, о которых мы подробно побеседуем в восьмом уроке. Читателям, заинтересовавшимся какой-либо из описанных выше web-технологий, рекомендую обратиться к справочным материалам, опубликованным в Интернете, либо к специализированной литературе, например, книгам издетельства «Питер»: С. Палмер, «VBScript и ActiveX: библиотека программиста»; Дж. Бранденбау, «JavaScript: сборник рецептов для профессионалов»; С. Холзнер, «PERL: специальный справочник»; Р. Дарнелл, «JavaScript: справочник»; А. Хоумер, К. Улмен, «Dynamic HTML: справочник»; Сандра Э. Эдди, «XML: справочник»; С. Джерол, «Секреты разработки Web-приложений на Visual BASIC 5».

Web-хостинг

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

ПРИМЕЧАНИЕ Web-хостингом, или просто хостингом, называется размещение web-страниц в сети Интернет на заранее арендованном дисковом пространстве какого-либо сервера. При этом под хостингом подразумевается не публикация web-страницы, а именно аренда такого дискового пространства.

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

Путь первый. Бесплатный хостинг

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

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

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

ПРИМЕЧАНИЕ Баннером называют рекламное изображение фиксированного размера, как правило, содержащее анимацию, которое выполняет роль гиперссылки на тот или иной ресурс Интернета. Существуют основывающиеся на технологии CGI алгоритмы, позволяющие демонстрировать произвольную или заданную последовательность рекламных баннеров на удаленной web-странице.

Более того, если web-мастер решил использовать, на своем сайте какие-либо CGI-скрипты, в частности доску объявлений, чат, систему автоматического по- иска или гостевую книгу, в большинстве случаев от этой затеи придется отказаться. Почти каждый сервер может предложить вам стандартный набор подобных программ, включающий все упомянутые элементы, но такие скрипты практически не поддаются индивидуальной настройке, либо возможности на- стройки очень ограничены. Использование же CGI, написанных самим пользователем или позаимствованных с серверов freeware, не допускается. И еще один немаловажный недостаток условно-бесплатного хостинга. Все адреса служб, предлагающих подобного рода услуги, обычно широко известны пользователям Интернета, поэтому публиковать там страницы коммерческих организаций считается дурным тоном: если фирма не может разместить свой сайт на платном сервере, значит, у нее нет денег. Иными словами, эта компания ненадежна. Поэтому бесплатная публикация хороша для индивидуальных домашних страничек, а также для некоммерческих организаций и обществ, которые не очень заботятся о собственном имидже. Имена, назначаемые сайтам службами бес- платного хостинга, тоже довольно жуткие на вид, выглядят они приблизительно так: http://www.members.имя_сервера.сот/~ваше_имя. Счастливым исключением являются лишь, пожалуй, службы webjump и newmail.ru. Во всех остальных случаях страничке можно назначить www-псевдоним, воспользовавшись системами da.ru, null.ru или им подобным.

ПРИМЕЧАНИЕ WWW-псевдонимом называют короткий адрес URL, назначаемый специальными серверами странице или сайту с более длинным адресом того же стандарта. Как правило, данная услуга является условно-бесплатной. Более подробно о системе www-псевдонимов рассказано в 11 уроке.

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

Таблица 2.1. Службы, предоставляющие бесплатный хостинг

Название | Размер, Мбайт | Поддержка CGI | Реклама | Вид доступа | Адрес
FortuneCity | 20 | Нет | Нет | FTP, browser | http://www.fortunecity.com
Hypermart | 10 | Да | Баннер, всплы- вающее окно | FTP | http://www.hypermart.net
Virtual Avenue | 20 | Да | Баннер | FTP | http://www.virtualave.net
Xoom | 11 | Нет | Баннер | FTP | http://www.xoom.pom
Tripod | 11 | Нет | Всплы- вающее окно | FTP, Browser, FrontPage | http://www.tripod.com
Webjump | 25 | Да | Баннер | FTP | http://www.web- jump.com
Freeweb | 10 | Нет | Нет | FTP | http://freeweb.digi- web.com
Icestorm | 3 | Нет | Нет | Browser | http://www.icestorm.com
Cybercities | Не ограничено | Нет | Нет | FTP | http://www.cyber- cities.com
Escalix | 6 | Нет | Баннер | Browser | http://www.escalix.com/ freepage
GO.COM | Не ограничено | Нет | Footer | Browser | http://www.homepa- ges.go.com
Codename | 2 | Да | Баннер | FTP | http://www.code- name.com
Homestead | 5 | Нет | Footer | Browser | http://www.home- stead.com
Intel Cities | 3 | Да | Нет | Browser | http://www.intel- cities.com
CONK | 1 | Нет | Всплы- вающее окно | FTP | http://conk.com
B-City | 5 | Нет | Баннер | Browser | http://www.bcity.com
Spaceports | Не ограничено | Нет | Всплы- вающее окно | FTP | http://www.space- ports.com
Freeservers | 12 | Нет | Баннер | FTP | http://www.freeser- vers.com
Span | Не ограничено | Нет | Footer | FTP | http://www.home.ch/ welcome.html
For Free | 2 | Нет | Баннер | FTP | http://www.forfree.at
Халява.ru | 3 | Нет | Ссылка | E-mail | http://www.halyava.ru
Новая почта | 16 | Нет | Нет | FTP | http://www.newmail.ru
Agava | Не огрничено | Да | Баннер | FTP | http://www.agava.ru

Условия публикации web-страниц, как правило, представлены непосредственно на серверах, предлагающих данную услугу. Помимо дискового пространства многие подобные службы предлагают пользователю также бесплатный почтовый ящик (служба «Новая почта» — целых три), некоторые к тому же создают для вашего ресурса полноценный домен третьего уровня, вида http://www.your_site.server.com или .ru. Среди таких служб можно перечислить ХООМ, Webjump, Agava и «Новая почта». Причем последняя регистрирует целых три домена (два из них пользователь может назначить любым вложенным директориям своего ресурса) и, в отличие от своих «конкурентов», не настаивает на включении в состав ваших web-страниц какой-либо посторонней рекламы.

Путь второй. Хостинг у провайдера

Большинство Интернет-провайдеров предлагают вместе с какой-либо из своих услуг дисковое пространство под домашнюю страничку. Этот вариант, безусловно, значительно лучше бесплатного хостинга: во-первых, провайдер несет перед вами ответственность за качество и бесперебойность работы собственного сервера, во-вторых, на вашей страничке не будет чужой и не нужной вам рекламы, а ваш почтовый ящик не станет переполняться нежелательной корреспонденцией, в-третьих, вы всегда можете позвонить в службу технической поддержки и проконсультироваться с дежурным администратором по любому вопросу. Однако не лишен этот подход и очевидных недостатков. Далеко не все провайдеры позволяют использовать на своих серверах CGI-скрипты, имя вашей странички будет достаточно длинным и неудобочитаемым, а самое главное — с момента публикации своего сайта вы будете намертво привязаны к данной конкретной фирме, поскольку стоит вам сменить провайдера или временно прекратить пользоваться Интернетом, как ваша страничка будет незамедлительно удалена. В принципе, несложно перенести ее на другой хост, но тогда все приложенные ранее усилия по ее рекламе будут потрачены впустую. Да и пользователь, реши он обратиться к вашему ресурсу через какое-то время, будет изрядно разочарован, не найдя этой странички по известному ему адресу.

Путь третий. Платный хостинг

Легенда о том, что платный хостинг весьма и весьма дорог, — не более чем миф. В общем случае оплата аренды нескольких мегабайт дискового пространства, достаточных для размещения средних размеров web-сайта, составляет от пяти до десяти долларов в месяц, пятьдесят долларов, как правило, — верхний предел. Причем публикация страницы на иностранных серверах в ряде случаев обходится значительно дешевле, чем на российских. Очевидно, что платный хостинг практически лишен описанных выше недостатков, вы же можете быть уверены, что с сервером, обслуживающим ваш сайт, ничего не случится. Более того, в стоимость услуг зачастую входит регистрация для вашей страницы домена третьего уровня, благодаря чему ее адрес будет выглядеть как http://www.your_site.server.com или .ru, что по всем меркам достаточно прилично и престижно. Однако надо помнить, что услуги различных компаний, предлагающих платный хостинг, значительно отличаются по ассортименту. Чтобы спектр предлагаемых услуг позволил вам достаточно комфортно чувствовать себя в роли web-мастера и ни в чем не ограничивал ваши потребности, он должен как минимум отвечать следующим требованиям.

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

  • Сервер, предлагающий хостинг, должен поддерживать CGI, а также другое дополнительное программное обеспечение, такое как система Real Audio и Real Video, причем за это совершенно не обязательно взимается отдельная плата. Если для подготовки страниц вы используете Microsoft FrontPage, желательно, чтобы сервисная служба установила для вас ее серверную часть. Иначе возможность ее установки должна входить в стоимость услуг.

  • В стоимость хостинга должна входить регистрация доменного имени третьего уровня в зоне сервера, предоставляющего дисковое пространство.

  • Если помимо дискового пространства выбранная вами фирма предлагает какие-либо почтовые услуги, проследите, чтобы они охватывали службы входящей и исходящей почты. Случается, что провайдер хостинг-услуг предлагает вам почтовые адреса, а не почтовые ящики. Это означает, что приходящая на данный адрес почта будет переадресовываться на ящик, арендованный вами на другом сервере, что значительно затрудняет и замедляет работу.

  • Желательно, чтобы для вашего сайта сервисная служба выделила отдельную копию программы-сервера (Internet Information Server для Windows NT илиApache для Unix-систем). Это позволит вам осуществлять индивидуальные настройки сайта на программном уровне. Однако, если стоимость хостинга относительно невелика, добиться этого от владельцев сервера практически невозможно.

Путь четвертый. Хостинг у знакомых

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

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

Что нового мы узнали?

В этом уроке мы изучили:

  • Внутреннее устройство и принципы работы http-сервера.
  • Виды кодировок кириллицы.
  • Теоретические основы ряда применяющихся в современном Интернете web-технологий.
  • Основные принципы публикации web-ресурсов в сети Интернет.


Урок 3
Введение в web-дизайн

  • Что такое web-дизайн?
  • Зачем это нужно?
  • Необходимый инструментарий
  • Основные «постулаты» web-дизайна
  • Технологии web-дизайна
  • Логическая и физическая структура сайта
  • Заглавная страница
  • Динамическая и статическая компоновка сайта
  • Статическая компоновка страницы
  • Динамическая компоновка страницы
  • Элементы web-страницы
  • С чего начать?
  • Что нового мы узнали?

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

Что такое web-дизайн?

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

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

Зачем это нужно?

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

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

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

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

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

Необходимый инструментарий

Для того чтобы web-мастер чувствовал себя максимально комфортно при разработке нового проекта, помимо рабочего места и персонального компьютера ему необходим определенный набор программного обеспечения, базовый инструментарий, без которого создателю web-сайта просто не обойтись. Начинающему web-мастеру порой бывает трудно сориентироваться не только во всем многообразии наименований существующих программ, но даже в списке минимально необходимых для работы приложений. Можно что-либо забыть, упустить или даже просто не знать о том, что впоследствии вам понадобится какая-то про- грамма или утилита. Ниже предложен полный список средств, которыми вы должны располагать перед тем, как возьметесь за разработку своего первого Интернет-проекта. Данные программы рассчитаны на использование под управлением Microsoft Windows 9X. Итак, для полноценной работы web-дизайнеру необходимы:

  • Среда разработчика документов HTML — так называемый WYSIWYG-pe-дактор, рекомендуется программа Microsoft FrontPage версии 98 или 2000, либо FrontPage Express.
  • Редактор векторной графики, рекомендуется CorelDraw Версии 8 или 9.
  • Редактор растровой графики, рекомендуется Adobe Photoshop версии 4.0или выше.
  • Броузер Microsoft Internet Explorer версии 4.0 или 5.0.
  • Броузер Netscape Navigator версии 4.01 или выше.
  • Перекодировщик кириллицы, рекомендуются программы ConvHTML и SNKDECode.
  • Оптимизатор HTML, рекомендуется UtilMind HTML Compressor версии 1.5или выше.
  • Оптимизатор растровых изображений GIF, рекомендуется программа Gif-Clean 32.
  • Оптимизатор растровых изображений JPEG, рекомендуется программа JPEGCleaner версии 2.1 или выше.
  • Редактор GIF-анимации, рекомендуется программа Ulead GifAnimator.
  • Фрагментатор графики, рекомендуется программа PictureDiser.
  • FTP-клиент, рекомендуется программа CuteFTP.

Более подробно данное программное обеспечение будет рассмотрено в после- дующих уроках по мере ознакомления с соответствующими тематическими разделами. Значительная часть этих приложений доступна в Интернете для свободного копирования в виде версий freeware и shareware; их бесплатные реализации представлены на прилагающемся к настоящей книге компакт-диске. Сразу хочу отметить, что описание программных пакетов Adobe Photoshop и CorelDraw выходит за рамки этой книги (предполагается, что читатель уже знаком с этими графическими редакторами и обладает основными навыками обращения с ними). Тем, кто еще не сталкивался с указанными программными средствами, можно порекомендовать следующие руководства издательства «Питер»:А. Тайц, А. Тайц, «CorelDRAW: краткий курс»; Д. Миронов, «CorelDRAW9:учебный курс»; Ф. Кобурн, П. Маккормик, «Эффективная работа с Corel-DRAW9»; М. Стразницкас, «PhotoShop 5.5 для подготовки web-графики, учебный курс». Наконец, в качестве редактора HTML-документов вам понадобится программа Microsoft FrontPage Express, входящая в комплект поставки броузера Microsoft Internet Explorer 5.0 и операционной системы Windows 98. Тем, кто предпочитает пользоваться пакетом Microsoft FrontPage 2000, можно посоветовать обратиться к руководству Дж. Вайскопфа «Microsoft FrontPage 2000:учебный курс», выпущенному издательством «Питер».

Основные «постулаты» web-дизайна

Известно, что любая технология, любой творческий процесс в какой бы то нибыло области подчиняются определенным правилам и законам, несоблюдение которых неизбежно влечет за собой множество неприятных последствий. Web-сайт как комплекс инженерно-художественных решений также подразумевает наличие целого набора определенных «правил хорошего тона», которых следует придерживаться, чтобы ваш ресурс не выглядел непрофессионально и не вызывал нареканий у посетителей. Для простоты понимания и запоминания этих принципов я предлагаю свести их к семи базовым «постулатам», которые мы кратко рассмотрим чуть ниже, после чего вернемся к некоторым из них для более детального анализа в последующих главах книги. Данные правила приведены ниже согласно их объективному приоритету, то есть в порядке убывания их важности.

Итак, при планировании и создании любого web-ресурса важно помнить, что главный критерий, на который следует ориентироваться в процессе разработки страниц, это удобство конечного пользователя, то есть будущих посетителей вашего сайта или домашней странички. Оно и не удивительно: ведь именно для того, чтобы посетители могли ознакомиться с содержимым вашего ресурса, вы и создаете его. Сложность момента заключается в том, что упомянутых выше «потенциальных посетителей» существует великое множество, причем используют они чрезвычайно широкий спектр аппаратных средств и программного обеспечения. Отсюда вытекает необходимость определенной стандартизации подходов к web-дизайну, выработки алгоритмов, которые могли бы удовлетворить всю вашу потенциальную аудиторию, позволяя людям адекватно и с максимальным комфортом воспринимать содержимое вашего сайта. Увы, на практике создание подобных универсальных решений не представляется возможным не только в связи с быстрой эволюцией вычислительной техники и программного обеспечения, но и по причине чрезмерной широты ассортимента уже существующих аппаратных и программных средств. Единственно возможным выходом в этой ситуации было бы адаптировать сайт к тем минимальным параметрам пользовательской системы, ниже которых отображение графической и текстовой информации на экране компьютера будет затруднительно. Такой подход выглядит достаточно привлекательным с точки зрения демократичности по отношению ко всем категориям пользователей: у владельцев устаревших компьютеров со слабыми мониторами и видеокартами в процессе знакомства с вашим ресурсом не возникнет особых сложностей, владельцы же современных машин тем более небудут испытывать каких-либо проблем. Именно отсюда и берет начало первое правило, которое вам следует усвоить и запомнить. Формулируется оно следующим образом.

ВНИМАНИЕ В современном Интернете принято молчаливое соглашение о том, что — профессиональный сайт должен корректно отображаться при экранном разрешении 640x480 точек с цветовой палитрой в 256 цветов.

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

ПРИМЕЧАНИЕ При отображении html-документа, рассчитанного на просмотр с экранным разрешением 800x600 точек, на компьютере, настроенном на разрешение 640x480 точек, в нижней части главного окна броузера появляется горизонтальная полоса прокрутки, что значительно затрудняет изучение документа и вызывает множество нареканий у пользователей.

СОВЕТ Для того чтобы web-страница правильно отображалась при использовании экранной палитры в 256 цветов, в случае включения в состав документа графических элементов старайтесь представлять максимально возможное количество графики в формате GIF и лишь самые необходимые изображения — в формате JPEG.

Разумеется, после подготовки первоначального шаблона будущей web-страницы его необходимо протестировать на соответствие изложенным выше требованиям. Для этого, загрузив страницу в броузер, измените экранное разрешение и используемую цветовую палитру в настройках Windows. Затем щелкните правой кнопкой мыши в любом свободном от ярлыков участке Рабочего стола и, выбрав в появившемся меню пункт Свойства, перейдите на вкладку Настройка диалогового окна Свойства: Экран. Установив соответствующие значения в разделах Цветовая палитра и Область экрана, щелкните мышью на кнопке Применить, после чего согласитесь с изменением параметров экранных настроек без перезагрузки Windows.

СОВЕТ Рекомендуется проверить корректность отображения содержащейся в html-документе информации при изменении экранных настроек в броузерах как Microsoft Internet Explorer, так и Netscape Navigator.

Следующее правило обусловлено тем, что вам неизвестно программное обеспечение, которое используется вашими потенциальными посетителями для просмотра web-страниц. Речь идет о броузерах. Как уже говорилось, согласно статистике самыми популярными броузерами среди пользователей Интернета являются Microsoft Internet Explorer и Netscape Navigator различных версий,все остальные распространены в значительно меньшей степени. Как известно,Microsoft Internet Explorer и Netscape Navigator используют различные алгоритмы обработки HTML-кода, из-за чего один и тот же элемент в этих двух броузерах может отображаться совершенно по-разному. Среди начинающих web-дизайнеров бытует мнение, будто заставить страницу выглядеть одинаковым образом в упомянутых программах решительно невозможно. Однако это совершенно не так: все различия между Netscape и Explorer прекрасно поддаются количественной оценке и анализу, более того, существует множество алгоритмов, применение которых позволяет свести неадекватность отображения страниц к минимуму. О них мы поговорим позже, пока же достаточно запомнить следующее.

ВНИМАНИЕ Web-страница должна идентично отображаться в Microsoft InternetExplorer и Netscape Navigator, причем весьма желательно — в последней и предпоследней версиях данных программ.

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

Не секрет, что подавляющее большинство пользователей используют для выхода в Интернет dial-up соединение, иными словами, работают на «медленных» линиях, подключаясь к провайдерскому пулу при помощи модема. Разумеется, в этом случае скорость передачи данных (как правило, удручающе низкая) играет для них решающую роль: вряд ли кому-то доставит удовольствие дожи- даться загрузки одного html-документа десятки минут. Таким образом, мы при- ходим к следующему очевидному «закону» web-дизайна.

ВНИМАНИЕ Все страницы web-сайта, а также все интегрированные в них графические и интерактивные элементы должны быть минимальными по объему.

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

Другой момент, о котором обязательно следует упомянуть, касается навигации по сайту. У пользователя не должно возникать ни малейших затруднений при переходе от одного раздела вашего ресурса к другому, независимо от модели его компьютера и типа установленного программного обеспечения. Он должен отчетливо представлять себе логическую структуру вашего проекта и, по возможности, иметь доступ ко всем его компонентам в любой момент времени. Именно поэтому необходимо помнить следующее.

ВНИМАНИЕ Созданная вами web-страница должна обязательно включать навигационные элементы, охватывающие все разделы вашего сайта, причем эти элементы должны всегда быть на виду. Их расположение следует выбирать, исходя из максимального удобства для пользователя. Если они размещены в верхней части страницы и пропадают из поля зрения после скроллинга (прокрутки экрана вниз), не забудьте продублировать их в нижней части документа. Графические ссылки и активные элементы следует повторить в тестовой форме в расчете на пользователей, в броузерах которых отключено отображение графики или отсутствует поддержка Java.

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

ВНИМАНИЕ Старайтесь выдержать весь проект в одном дизайнерском стиле, оформляйте различные его разделы таким образом, чтобы общее художественное решение было схожим для всего сайта.

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

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

А также

ВНИМАНИЕ Используйте только корректные цветовые схемы и не применяйте при оформлении документов более трех различных цветов.

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

С точки зрения человеческой психологии сочетание цветов может в значительной степени влиять на восприятие зрителем представленной на картинке информации. Именно поэтому при подборе цветового сочетания, например текста с фоном, рекомендуется исходить из соображений собственного здравого смысла: текст должен без труда читаться, при этом читатель не должен напрягать зрение, его глаза не должны уставать. Далее приведен перечень цветовых сочетаний рисованного объекта или текста с фоном в порядке ухудшения зрительного восприятия:

  • синее на белом;
  • черное на желтом;
  • зеленое на белом;
  • черное на белом;
  • зеленое на красном;
  • красное на желтом;
  • красное на белом;
  • оранжевое на черном;
  • черное на пурпурном;
  • оранжевое на белом;
  • красное на зеленом.

Корректность сочетания друг с другом всех остальных цветов и оттенков проверяется с помощью одного простого правила: переведите ваше изображение в формат «grayscale» (256 оттенков серого) и посмотрите, читается ли в таком виде ваш текст, контрастно ли выглядят нарисованные элементы. Если нет —принятое вами цветовое решение лучше пересмотреть. В любом случае для тек- ста рекомендуется выбирать традиционный, привычный глазу черный цвет, в качестве фона лучше всего использовать тусклую, едва различимую заливку произвольного оттенка. Однако наиболее «правильным», на мой взгляд, решением всегда был и остается «классический» вариант: черным по белому.

Технологии web-дизайна

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

Логическая и физическая структура сайта

Каждый ресурс Интернета, от любительской домашней странички до большого информационного портала, содержит несколько тематических рубрик, соединенных между собой гиперсвязями. Как правило, ссылки на все разделы сайта с краткими анонсами их содержимого приводится на первой, так называемой стартовой странице, которой присваивается имя index.htm (.html). Если тематические рубрики содержат собственные подразделы, каждая из них также имеет свою стартовую страницу, называющуюся index.html.

ПРИМЕЧАНИЕ Такое имя файла рекомендуется присваивать всем стартовым документам сайта, поскольку в противном случае при обращении к какому-либо разделу посредством сокращенного URL без указания названия стартовой страницы (например, http://www.mysite.ru/photos/ вместо http://www.mysite.ru/photos/startpage.html) броузер отобразит не саму web-страницу, а перечень хранящихся в данной папке файлов.

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

Рис. 3.1. Сравнение логической и физической структуры сайта

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

СОВЕТ Рекомендуется размещать все графические изображения, являющиеся элементами проекта, в отдельной папке с названием «Images», расположенной в корневой директории сайта. Такой подход позволит обновлять хранящиеся в других тематических разделах документы HTML без переноса графики, использовать одни и те же графические файлы во всех разделах сайта и при необходимости удалять целые директории.

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

СОВЕТ Назначайте имена директорий, имена и расширения документов HTML и графических файлов с использованием символов только латинского алфавита и только в строчном регистре. Старайтесь, чтобы имена созданных вами файлов и директорий не превышали по длине восьми символов.

СОВЕТ При присвоении имен файлов документам HTML старайтесь следить за тем, чтобы эти имена были «смысловыми»: впоследствии вы легко можете забыть содержимое и назначение какой-либо web-страницы, если имена файлов будут выглядеть, например, как l.htm, 2.htm, 3.htm и т. д.

Для того чтобы облегчить процесс обновления web-страниц, дополнения разделов или создания новых рубрик, заведите средство документирования проекта — любую электронную таблицу, созданную, например, в Microsoft Excel, или просто разграфленную тетрадку, в которую записывайте соответствие элементов физической структуры вашего проекта его логической структуре. До тех пор пока количество составляющих ваш сайт файлов относительно мало, это может показаться излишним, когда же оно перевалит за первые два десятка, в обилии html-документов и графических элементов будет легко запутаться, особенно если вы создаете несколько проектов одновременно. Пример оформления такого средства документирования показан в табл. 3.1.

Таблица 3.1. Пример оформления средства документирования проекта

Имя файла | Директория | Описание | Дата создания/по- следнего изменения
index.html index.html wife.htm son.htm pid-jpg | /mysite /mysite/family /mysite/family /mysite/family /mysite/photos | Стартовая страница сайта http://www.mysite.ru Стартовая страница раздела «моя семья» Рассказ о моей жене Рассказ о моем сынишке Моя фотография на пляже в Сочи | 1.07.2000 5.07.2000 5.07.2000 5.07.2000 6.07.2000

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

Заглавная страница

Один из критериев, руководствуясь которым можно разделить различные web-сайты на две основные категории, — это наличие заглавной страницы (splash)или отсутствие таковой.

Заглавная страница представляет собой html-документ, который не включает всебя какую-либо содержательную информацию и элементы навигации. Файлу заглавной страницы присваивается имя index.html, при этом стартовая страница называется иначе и вызывается посредством организации гиперссылки .с за- главной страницы, загружающейся при обращении к сайту первой. Заглавная страница содержит, как правило, логотип компании-владельца данного ресурса, счетчик посещений и предложение выбора кодировки кириллицы, либо вы- бора между английской и русской версиями сайта. Пример web-ресурса, оснащенного такой страницей, показан на рис. 3.2.

Рис. 3.2. Пример сайта, оснащенного заглавной страницей

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

Рме. 3.3. Пример сайта, не оснащенного заглавной страницей

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

Динамическая и статическая компоновка сайта

Современные видеокарты поддерживают несколько произвольно устанавливаемых видеорежимов, характеризующихся экранным разрешением и количеством цветов, используемых при отображении информации на экране компьютера. С помощью встроенных функций операционной системы пользователь может установить несколько стандартных значений экранного разрешения, например 640x480, 800x600, 1024x768, 1152x864, 1280x1024 или 1600x1200 точек. Разумеется, при открытии в одном и том же броузере какой-либо web-страницыона может отображаться не одинаковым образом в зависимости от используемого посетителем сайта экранного разрешения.

Для того чтобы избежать «съезжания» элементов html-документа друг относительно друга и, как следствие, деформации web-страницы в целом при изменении параметров экрана, применяется достаточно простой и действенный прием: все компоненты web-страницы заключаются в соответствующие ячейки невидимой таблицы, при этом каждому объекту назначается одно, строго определенное положение. Таким образом, появляется второй критерий, по которому можно разделить все существующие web-сайты на две условные категории. Данной таблице можно назначить строго определенную ширину в пикселах, например, 640 точек, после чего жестко позиционировать ее по центру экрана или «прижать» к левому его краю. Такой вариант компоновки сайта можно назвать статическим, поскольку ширина таблицы не меняется в зависимости от экранного разрешения. Разумеется, при изменении параметров экрана не происходит ни малейшего смещения элементов дизайна страницы.

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

Статическая компоновка страницы

Достоинства. Простота алгоритма верстки документа. Оптимизировав страницу для отображения с экранным разрешением 640x480 точек, вы можете быть уверены, что при изменении пользовательских экранных настроек элементы дизайна не «поплывут». Кроме того, данный вариант компоновки сайта в большинстве случаев (при соблюдении ряда дополнительных условий) позволяет добиться идентичности отображения html-документа в броузерах MicrosoftInternet Explorer и Netscape Navigator.

Недостатки. При отображении документа на компьютере с высоким экранным разрешением по краям экрана или с правой его стороны остается заметное пустое поле.

Динамическая компоновка страницы

Достоинства. Документ растягивается по всей ширине экрана, не остается не- использованных пустых полей.

Недостатки. Сложность верстки и отладки страницы, весьма часто проявляется неадекватность отображения таких документов в броузерах Microsoft Internet Explorer и Netscape Navigator.

ПРИМЕЧАНИЕ Используемые в командах HTML значения пикселов (условных точек)подразумевают физические размеры точки экрана пользователя и зависят от типа его монитора.

Примеры реализации сайтов со статической и динамической компоновкой страниц приведены на рис. 3.4 и 3.5. Данные изображения сделаны с фиксированным экранным разрешением 800x600 точек.

Рис. 3.4. Пример сайта со статической компоновкой страниц

Рис. 3.5. Пример сайта с динамической компоновкой страниц

Элементы web-страницы

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

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

Основную часть документа занимает так называемое текстовое поле — участок, где и размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации. Перечисленные элементы еще называют «кон-тент» (от англ, content — содержание). Расположение текстового поля зависит в первую очередь от того, каким образом web-дизайнер разместит остальные элементы документа.

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

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

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

Рис. 3.6. Пример компоновки web-страницы с левым позиционированием элементов навигации

На практике часто встречаются web-сайты, в дизайне которых элементы навигации позиционированы по правой границе экрана. В этом случае текстовое поле смещается налево, остальные компоненты документа располагаются, исходя из принципа максимальной эстетичности их сочетания. Пример такого исполнения сайта показан на рис. 3.7.

Рис. 3.7. Пример компоновки web-страницы с правым позиционированием элементов навигации

Как видно из рисунка, логотип в этом случае помещен на один уровень с заголовком документа, а рекламный баннер позиционирован относительно центра страницы. При таком подходе рекомендуется выдерживать графическое оформление заголовка, логотипа и поля для размещения рекламы в едином цветовом и художественном стиле — тогда несимметричность положения данных объектов будет не столь очевидна и не станет «резать глаз» сторонникам строгой, «табличной» эстетики дизайна.

Элементы навигации можно разместить не только вблизи правой и левой границ страницы, но и в верхней части документа. Такой вариант компоновки наиболее подходит, на мой взгляд, при создании домашних страничек: в этом случае все объекты страницы гармонично «вписываются» в заданную ширину невидимой таблицы, при этом подготовка самой таблицы значительно упрощается. Единственным недостатком подобного подхода является необходимость продублировать элементы навигации в нижней части документа, поскольку при вертикальной прокрутке страницы они исчезают за верхней границей экрана, и, чтобы добраться до них, пользователю придется «отматывать» экран назад, что, согласитесь, весьма неудобно. Пример оформления страницы с верхним расположением элементов навигации показан на рис. 3.8.

Рис. 3.8. Пример компоновки web-страницы с верхним позиционированием элементов навигации

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

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

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

Рис. 3.9. Пример «смешанной» компоновки web-страницы

С чего начать?

Настало время перейти к практическим аспектам web-дизайна. И наиболее насущный вопрос, который возникает обычно при создании первого самостоятельного проекта, вынесен в заголовок этого раздела. Итак, с чего начать? Разумеется, с начала.

Первое, что необходимо сделать, прежде чем браться за разработку любого web-сайта, это заварить чашку крепкого ароматного кофе или чая, сесть за стол и хорошенько подумать. Я не шучу. Подумать следует о целях, которые вы ставите перед собой, создавая новый проект. От выбора целей будут зависеть методы их достижения, в том числе и сам дизайн. От правильной постановки задач будет зависеть успех всего предприятия. Вы хотите домашнюю страничку? Замечательно. Возьмите ручку, лист бумаги и прикиньте, какие тематические разделы должно включать ваше будущее творение, о чем именно вы хотели бы рассказать с его помощью прогрессивной общественности. Вы решили создать некоммерческий информационный сайт? Прекрасно. Определитесь, чему он будет посвящен. Если это развлекательный проект, после того как вы придумаете перечень соответствующих рубрик (например, «анекдоты», «карикатуры» или «юмористические рассказы»), необходимо подобрать для него подходящее дизайнерское решение, более или менее отвечающее содержанию. У посетителей, скорее всего, вызовет легкое недоумение развлекательный проект, выполненный в стиле серьезного информационного или новостного портала. Быть может, вы хотите опубликовать ресурс, посвященный приготовлению домашних вин? Прогуляйтесь по Интернету, посмотрите, что уже создали ваши «коллеги», какие разделы есть на аналогичные сайтах, оцените, какой информации на них не хватает, а какой — наоборот, переизбыток, как эта информация «подается» потребителю, скучно ее читать или, наоборот, интересно и увлекательно.

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

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

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

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

Создание верстальной таблицы — это, пожалуй, одна из наиболее сложных процедур при разработке нового проекта. Начертить таблицу безошибочно с первой попытки практически невозможно. Навык, благодаря которому web-мастер за несколько секунд рисует все необходимые строки и столбцы «на глаз», приходит только с опытом. Здесь трудно дать какие-то конкретные советы, чтобы помочь начинающему дизайнеру. Научиться быстро проектировать верстальную таблицу для нового сайта можно только одним способом: загрузи- те несколько созданных другими авторами web-страниц во FrontPage Express, посмотрите, какие таблицы применяются ими для отображения данных документов, внимательно изучите их, после чего попытайтесь создать пару-тройку своих.

Для построения сложных таблиц можно применять вложение одной таблицы в другую: например, первичная таблица шириной 640 точек задает горизонтальное разбиение страницы, в каждую из ее ячеек вкладывается еще одна, равная ей по ширине невидимая таблица, обеспечивающая вертикальное разбиение. Та- кой подход позволяет дробить различные участки web-страницы независимо друг от друга, создавая, к примеру, в одном ее поле четыре вертикальные колонки различной ширины, а в другом — две, оперируя при этом различными параметрами вложенных таблиц в пределах одного и того же документа — размером пространства между колонками, толщиной границ и т. д.

После того как будут скомпонованы основные элементы документа и размечена невидимая таблица, у вас должен получиться примерный эскиз будущего сайта. Теперь настала очередь подготовки контента.

Сначала рекомендую набрать в любом редакторе все необходимые тексты, причем сохранять их лучше всего в формате plain text, то есть в файле с расширением .txt. Затем надо нарисовать в векторном редакторе (например, в Corel-Draw) необходимые графические элементы, экспортировать их в растровый формат, обработать в редакторе растровой графики (в нашем случае речь идетоб Adobe Photoshop), придав картинкам необходимый размер и разрешение, после чего по мере необходимости оптимизировать их с помощью специальных компрессоров или других аналогичных средств. Подробный рассказ о подготовке графических изображений пойдет в пятом уроке, пока же мы говорим лишь о последовательности действий.

Только после всех описанных выше процедур можно приступать непосредственно к сборке страницы: созданию ее макета в HTML-редакторе, написанию и окончательной отладке кода.

Поскольку дизайн всех документов, составляющих ваш будущий сайт, скорее всего, будет практически идентичным, в первую очередь рекомендуется создать так называемый шаблон. Шаблон представляет собой html-документ, содержащий невидимую таблицу, заголовок, все графические объекты, элементы навигации — иными словами, практически все, за исключением непосредственного информационного наполнения. Если впоследствии у вас возникнет необходимость включить в проект новый документ, вам будет достаточно открыть в html-редакторе готовый шаблон и импортировать в него текст и все необходимые иллюстрации. Советую разработать и сохранить на диске два различных шаблона: для информационной страницы и индексного файла. Когда страница будет готова, ее следует проверить на идентичность отображения в различных броузерах при различных экранных разрешениях и цветовых палитрах. Загрузите созданный вами html-документ в Microsoft Internet Explorer, установите значение цветовой палитры экрана равным 256 цветов, после чего последовательно измените экранное разрешение на 640x480, 800x600 и, на- конец, на 1024x768 точек. Посмотрите, не меняется ли компоновка страницы, не «съезжают» ли ее элементы относительно друг друга. Проделайте ту же процедуру для Netscape Navigator. Если никаких существенных изменений вы не за- метите, можно быть уверенным, что другие документы, созданные с использованием того же шаблона, с вероятностью 95 % будут отображаться столь же корректно.

В итоге последовательность действий по разработке web-сайта сводится к следующему несложному алгоритму:

  • Постановка целей и определение основных задач.
  • Создание списка будущих тематических разделов.
  • Разработка логической и физической структуры ресурса.
  • Подготовка эскиза дизайна, компоновки сайта, невидимой верстальной таблицы.
  • Подготовка текстовых материалов.
  • Подготовка графических материалов в векторной форме.
  • Экспорт векторных рисунков в растровый формат, оптимизация картинок.
  • Создание шаблонов web-страниц.
  • Сборка web-страниц и отладка кода.
  • Проверка идентичности отображения web-страниц с различным экранным разрешением и цветовой палитрой и в различных броузерах.

Что нового мы узнали?

В этом уроке мы изучили:

  • Цели, с которыми создаются сайты.
  • Основные элементы web-страниц.
  • Классификацию web-сайтов по признакам их компоновки.
  • Принципы компоновки web-страницы.
  • Алгоритм создания нового проекта.


Урок 4
Первая web-страница

  • Изучаем HTML
  • Общая структура
  • Несколько предварительных замечаний
  • Теги и атрибуты
  • Регистр записи команд
  • Escape-последовательности
  • Перевод строки, пробелы, табуляция
  • Комментарии
  • Общие рекомендации
  • Цветовые спецификации
  • Базовые теги разметки гипертекста
  • Элемент <FONT>
  • Атрибуты тега <BODY>
  • Заголовки
  • Списки
  • Разделители
  • Гиперссылки
  • Ссылки на документы
  • Ссылки на разделы
  • Ссылки на адрес электронной почты
  • Ссылки на файловые объекты
  • Практикум
  • Размещение страницы в Интернете
  • Что нового мы узнали?

В предыдущих уроках мы подробно изучили теоретические аспекты web-дизайна. Ну, а теперь переходим к практике.

Всевозможных реализаций языка разметки гипертекста существует довольно много, но для изучения лучше всего воспользоваться HTML версии 3.2. Безусловно, сегодня уже существует и широко применяется HTML 4.0, включающий в себя множество дополнений и расширений в части системы команд. По сравнению со своими «младшими» собратьями HTML 4.0 является более совершенным и, если хотите, «современным» вариантом языка. Почему же мы всетаки остановимся на версии 3.2?

Во-первых, HTML 3.2 является более простым в изучении, а с учетом того, что мнемоника и синтаксис обоих языков практически одинаковы, пользователю, знакомому с данной версией, не составит труда быстро освоить новую реализацию HTML, бегло прочитав соответствующую документацию. Во-вторых, с помощью HTML 3.2 можно делать практически то же самое, что и посредством HTML 4.0, особенно на начальном этапе. В-третьих, HTML 3.2 более «демократичен к клиентскому программному обеспечению. Благодаря принципу обратной совместимости, заложенному в более позднюю версию HTML создателями языка (консорциум W3C), HTML 3.2 прекрасно распознается и старым программным обеспечением, и вполне современным. Ну как, достаточно оправданий? Я думаю, да. Тогда несколько слов об истории HTML 3.2.

Если вы, уважаемый читатель, полагаете, что HTML 3.2 есть дополненный и расширенный вариант HTML 3.0, то вы глубоко заблуждаетесь. Совпадение первых цифр в обозначении версий этих двух языков является не то досадным недоразумением, не то удивительным совпадением. Дело в том, что HTML 3.0 существует как бы независимо от других реализаций языка разметки гипер текста и, по всей видимости, на сегодня представляет собой своеобразную «тупиковую ветвь» в эволюции Hypertext Markup Language. HTML 3.2 был создан на основе спецификации HTML 2.0 и вобрал в себя некоторые модифицированные элементы HTML 3.0, плюс определенный набор независимых расширений, разработанных W3C.

Сейчас HTML 3.2 наравне с HTML 4.0 является одним из наиболее распространенных и широко используемых в Интернете языков разметки гипертекста. Подробным изучением его структуры, мнемоники и системы команд мы и займемся. Но сначала — небольшое «лирическое отступление».

В среде web-дизайнеров почему-то принято считать, что на свете существуют всего две методики создания web-страниц. Первая заключается в использовании объектно-ориентированных сред разработки html-документов, так называемых web-редакторов. Web-мастеру, использующему в своей работе подобную программу, по большому счету не нужно знать HTML: достаточно лишь уметь обращаться с данным приложением и щелкать мышью. Весь необходимый код редактор генерирует сам. Не удивительно, что такой подход считается «непрофессиональным», поскольку в данной ситуации создатель web-ресурса не может гибко управлять структурой разрабатываемых им документов, а сами эти редакторы по качеству работы весьма далеки от идеала. Второй подход, считающийся «верхом профессионализма», подразумевает написание всего кода вручную, с применением стандартного текстового редактора MS Windows —программы Notepad, известной также как Блокнот. Скажу по секрету, что раньше я поступал именно так. И не потому, что, пользуясь молодежной терминологией, «косил под профессионала», а просто в силу отсутствия в те времена визуальных редакторов: они получили широкое распространение на российском рынке программного обеспечения чуть позже.

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

На серверах Интернета, содержащих рекомендации по web-дизайну, а также на форумах и конференциях, посвященных той же тематике, постоянно звучит определенный набор «комплиментов» в адрес WYSIWYG-редактора MicrosoftFrontPage. Все они сводятся в основном к тому, что данная программа, мягко говоря, значительно уступает другим аналогичным пакетам, а в ряде случаев вообще непригодна для создания web-страниц. Подозреваю, что общественное мнение сформировалось таким образом в первую очередь потому, что FrontPage является продуктом Microsoft. Смею вас заверить: как инструмент для разработки шаблонов html-документов, которые впоследствии все равно дописываются и отлаживаются вручную, Microsoft FrontPage вполне подходит, поскольку полностью отвечает всем требованиям, предъявляемым обычно к подобным приложениям: эта программа удобна, оснащена достаточно дружественным интерфейсом, проста в установке, изучении и использовании. В принципе для создания шаблонов web-страниц можно использовать любой другой web-редактор, это дело вкуса. Я не стану настаивать на том, чтобы вы непременно сделали Microsoft FrontPage своим основным инструментом: изучив основы разработки html-документов, можно без труда освоить и применять любой редактор. Тем неменее дизайнеры, на чем свет стоит ругающие данный программный продукт и утверждающие, что создают свои проекты исключительно посредством Notepad (тоже, заметьте, продукт Microsoft), на мой взгляд, несколько лукавят. Анализируя код некоторых их творений, я часто видел весьма характерную строку в разделе описания метаинформации: <meta name="GENERATOR" content="MicrosoftFrontPage 3.0">.

Изучаем HTML

Общая структура

Как и любой другой язык программирования, HTML подразумевает некую стандартизированную структуру построения программы — в данном случае, html-документа. Такая структура описывает даже не последовательность команд, а очередность следования ряда обязательных блоков, которые содержат непосредственно программный код. В отличие от иных языков программирования, директивы HTML называются не «командами», «процедурами» или «операторами», а имеют собственное наименование — «теги» (от англ, tag — отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как <тег>. Все объекты, не заключенные в угловые скобки, интерпретатор воспринимает как текстовые элементы, отображая их на экране компьютера «как есть». Итак, упрощенная структура документа HTML выглядит следующим образом (рис. 4.1).

Рис. 4.1. Упрощенная структура html-документа

У HTML имеется еще одна значительная особенность, отличающая его от других языков программирования: практически все теги данного языка, за исключением некоторых отдельно оговоренных случаев, — парные. Такая пара состоит из «открывающего» и «закрывающего» тега, которые отличаются лишь наличием в последнем символа «/» Все, что расположено между открывающими закрывающим тегом, обрабатывается интерпретатором согласно алгоритму, присвоенному данному конкретному тегу. В общем виде программная строка HTML с открывающим и закрывающим тегами выглядит так:

<тег>0брабатываемое значение</тег>

Данное свойство HTML позволяет использовать принцип вложения одного тега в другой, когда обрабатываемым значением одной команды может служить другая команда. Вот простой пример вложения двух тегов друг в друга:

<тег1>

<тег2>0брабатываемое значение</тег2></тег1>

ВНИМАНИЕ При роботе с кодом HTML необходимо запомнить одно простое правило: если где-то в тексте программы встречается открывающий тег, обязательно должен присутствовать и закрывающий. Несоблюдение этого правила вызовет ошибку при обработке такого документа интерпретатором броузера.

Однако вернемся к изображенной на рис. 4.1 структуре документа HTML. Как видно из иллюстрации, основной, глобальной конструкцией внутреннего кода web-страницы является нечто, обозначенное на рисунке прямоугольником с надписью «Документ HTML». Вполне логично было бы предположить, что это «нечто» — какая-то специальная команда, призванная «объяснить» броузеру, что он имеет дело именно с документом HTML, а не с текстовым или, например, графическим файлом. Такая команда действительно есть. Называется она «тег верхнего уровня» и записывается так:

<НТМL>.Содержимое </НТМL>

Тег верхнего уровня, как становится ясно из предложенного примера, — парный, причем его содержимое как раз и есть весь код HTML, составляющий документ. Таким образом, правило применения данной директивы также очевидно: открывающий тег записывается самой первой строкой html-документа, а закрывающий — самой последней.

Следующим на очереди у нас прямоугольник, обозначенный на схеме фразой «Заголовок документа». Для чего нужен этот заголовок?

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

<HEAD> Содержимое </HEAD>

Из приведенной схемы видно, что раздел HEAD следует в html-документе непосредственно за тегом <HTML> и является второй обязательной командой, которую необходимо включать в код web-страницы.

Перейдем к следующему объекту html-документа — разделу «Внешний заголовок», который, как показано на схеме, является вложенной командой тега <HEAD>. Мнемоника внешнего заголовка записывается следующим образом:

<ТITLE>Внешний заголовок</TITLE>

Чем же «внешний заголовок» отличается от просто «заголовка» документа HTML? Все очень просто: именно он отображается в верхнем поле броузера в качестве названия страницы при ее открытии, и именно значение тега <TITLE>подставляется по умолчанию в соответствующее диалоговое окно, когда пользователь заносит документ в папку «избранное». Непонятно? Взгляните на рис. 4.2.

Рис. 4.2. Значение тега <TITLE>

Теперь, уверен, все неясности ликвидированы. Последняя структурна составляющая кода web-страницы — раздел «Тело документа».

Тело документа, описываемое тегами <BODY> </BODY>, включает в себя весь основной код разметки страницы, который и определяет отображение html-документа на экране монитора. Основной текст, иллюстрации, элементы навигации и все, что вы хотите продемонстрировать посетителям вашего сайта, размещается внутри данного тега.

Теперь мы располагаем достаточным объемом информации для того, чтобы представить нашу абстрактную графическую схему в виде вполне конкретного кода HTML:

<HTML>

<HEAD>

<ТITLE>Моя первая web-страничка</TITLE>

</HEAD>

<BODY>

</BOOY>

</HTML>

Создайте с помощью Проводника Windows новую директорию на вашем жестком диске и назовите ее, например, «MySite». Внутри этой папки создайте каталог с названием «images», туда вы будете впоследствии помещать иллюстрирующие ваш проект изображения. Теперь необходимо проделать следующие действия: открыть Блокнот (Пуск > Программы > Стандартные > Блокнот), набрать в нем полученный выше код, сохранить текущий файл в папке «MySite» под именем index.html, воспользовавшись функцией «Сохранить как», и открыть его в броузере путем двойного щелчка мышью на значке данного файла в Проводнике. Вы получили свою первую web-страничку (рис. 4.3).

Рис. 4.3. Первая web-страничка

Постойте, скажете вы, но ведь этот html-документ отображается в главном окне броузера абсолютно пустым! Разумеется, ведь вы еще не внесли в него никакого контекстного содержимого. Для того чтобы это содержимое наполнило вашу страничку, необходимо изучить базовые теги разметки гипертекста. А для начала я предлагаю обратить пристальное внимание на приведенную ниже информацию, которая может пригодиться вам в последующей работе. Итак,

Несколько предварительных замечаний

Теги и атрибуты

Для того чтобы в будущем у вас не возникло каких-либо затруднений, необходимо прежде всего разобраться в понятиях тегов и их атрибутов. Итак, тег —это некая команда HTML, указывающая интерпретатору броузера, каким образом он должен обрабатывать соответствующее каждой конкретной директиве значение. Это значение и называется атрибутом тега.

Тег может иметь атрибут или не иметь его. Например, тег верхнего уровня<HTML> не имеет атрибутов, а в строке создания новой таблицы <TABLE BORDER="1"WIDTH="100"> выражение «BORDER="1" WIDTH="100"» является атрибутом тега <TABLE>.

В общем виде синтаксис записи тега HTML в совокупности с его атрибутами выглядит следующим образом:

<ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ" ИМЯ_АТРИБУТА-2="ЗНАЧЕНИЕ" ...ИМЯ_АТРИБУТА-n="ЗНАЧЕНИЕ">

В данном примере первый атрибут тега <TABLE> — это параметр "BORDER", второй атрибут — параметр "WIDTH", а их значения составляют соответственно "1" и"100". Значения атрибутов заключаются в прямые кавычки, записываемые символом «"». Если внутри атрибута какого-либо тега встречается другое значение, заключенное в кавычки, то есть имеет место вложение одних кавычек в другие, в качестве «внутренних» кавычек рекомендуется использовать одинарные, записываемые символом «'». В общем случае такое выражение выглядит следующим образом:

<ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ-1; 'ЗНАЧЕНИЕ-2'; ЗНАЧЕНИЕ-3">

Спецификация языка HTML позволяет опускать кавычки для следующих видов атрибутов:

  • Атрибуты, записываемые только строчными или заглавными символами латинского алфавита и не включающие иных символов, например, цифр.
  • Атрибуты, состоящие только из цифр от 0 до 9.
  • Атрибуты, обозначающие промежутки времени.

Например, запись атрибутов BORDER="1" или ALIGN="CENTER" допустимо представить как BORDER=1 и ALIGN=CENTER.

Регистр записи команд

HTML является одним из немногих языков программирования, не чувствительных к регистру, в котором вы записываете команды (в данном случае — теги и имена их атрибутов). Интерпретатор броузера одинаково обработает директивы<HEAD>, <head>, <Head> или <hEaD>. Иными словами, вы вольны записывать теги как в строчном, так и в заглавном варианте, на собственный вкус. Однако рекомендуется все же применять для написания тегов HTML заглавный регистр, прежде всего, для улучшения читаемости кода, поскольку в этом случае команды языка будет легко отличить от интегрированного в документ информационного текста. Единственным исключением из этого правила служат два элемента HTML, небезразличных к регистру. Это адреса URL и escape-последовательности, о которых мы подробно побеседуем ниже.

Escape-последовательности

Иногда у web-мастера возникает необходимость использовать в тексте своей web-странички символы, зарезервированные для обозначения элементов кодаHTML. Это могут быть угловые скобки (символы «<» и «>»), в которые обычно заключаются теги, прямые кавычки («"»), употребляемые при задании значений атрибутов, и т. д. Иными словами, web-мастеру необходимо, чтобы данные символы отображались в окне броузера «как есть», то есть как текст, интерпретатор же воспринимает их как часть команд разметки гипертекста. Для того чтобы избежать проблем при отображении подобных элементов, и были придуманы так называемые escape-последовательности, или, как их еще иногда называют, «нотации символьных объектов».

Запись escape-последовательности подразумевает замену служебных символов специальными командами, которые в процессе интерпретации документа замещаются выводимыми на экран искомыми знаками. Все escape-последовательности начинаются с символа амперсанд («&») и заканчиваются точкой с запятой, а между ними размещается сама команда, записываемая в строчном регистре. В табл. 4.1 приведен список наиболее часто используемых escape-последовательностей.

Таблица 4.1. Наиболее распространенные escape-последовательности

Символ | Значение | Команда
< > " & © ® | Символ «меньше, чем»; левая угловая скобка Символ «больше, чем»; правая угловая скобка Прямые кавычки Амперсанд Неразрывный пробел (словосочетания, разделенные таким пробелом, не разрываются при переносе) Символ копирайта Символ зарегистрированной торговой марки | &lt; &gt; &quot; &атр; &nbsp; &сору; &reg;

Escape-последовательности записываются в тексте по тем же правилам, по которым употребляются обозначаемые ими символы, иными словами, нотация символьного объекта просто вставляется в тот участок текста, где по расчетам web-мастера должен следовать соответствующий служебный символ. Например, строка html-кода

На этой страничке изложены мои &quot:мысли вслух&quot; по данному вопросу отобразится в окне броузера следующим образом:

На этой страничке изложены мои "мысли вслух" по данному вопросу

Перевод строки, пробелы, табуляция

При подготовке web-страниц обязательно следует помнить, что введенное пользователем с помощью клавиатуры форматирование текста, включающее в себя пробелы, отступы табуляции и переводы строки, игнорируются броузером при интерпретации html-документа.

Иными словами, такие элементы текста, как

данное словосочетание

или

данное

словосочетание

на экране монитора будут выглядеть одинаковым образом:

данное словосочетание

Таким образом, любое количество пробелов между словами, отступ, выполненный посредством клавиши «Tab», или перевод строки по нажатии клавиши «Enter» преобразуются при компиляции документа в один символ пробела. Поэтому для форматирования основного текста на web-странице применяются специальные теги, которые мы изучим в рамках этого же урока. Исключением из этого правила может служить только текст, помеченный специальным тегом <PRE> — командой предварительного форматирования. Мнемоника записи этого тега выглядит следующим образом:

<PRE>

предварительно отформатированный текст

</PRE>

В этом случае все, что расположено между открывающим и закрывающим тегами <PRE>, а в нашем примере это выражение «предварительно отформатированный текст», отобразится в окне броузера с сохранением всех введенных дизайнером пробелов, переводов строк и отступов табуляции. Однако злоупотреблять применением данной команды не рекомендуется, поскольку в силу несхожести алгоритмов обработки кода HTML различными броузерами возможно искажение отформатированного таким образом текста в зависимости от экранных настроек пользователей. Помните, что внутри тега PRE запрещено использовать другие теги форматирования текста.

Очевидно также, что запись

<ТЕГ>текст

эквивалентна записи

<ТЕГ>текста запись

текст</ТЕГ>

идентична записи

текст</ТЕГ>В указанных случаях переводы строки также игнорируются.

Комментарии

Код HTML может содержать комментарии, предназначенные как для самого web-мастера, создающего документ, так и для постороннего пользователя, читающего листинг чужой странички. И в том и в другом случае комментарии записывают с целью избежать возможной путаницы при изучении кода html-документа. Комментарии не обрабатываются интерпретаторами броузеров, но и не отображаются на экране, они остаются в составе кода web-страницы «как есть». Комментарий открывается символьной последовательностью, начинающейся с открывающей угловой скобки, восклицательного знака и двух знаков тире: <!--, закрывается же несколько иным сочетанием символов: -->. Другими словами, в общем случае синтаксис записи комментария будет выглядеть следующим образом:

<!-текст комментария -->

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

Общие рекомендации

Создатель языка HTML, консорциум W3C, рекомендует включать в качестве первой строки html-кода перед тегом <HTML> так называемый дефинитивныйопределитель, показывающий, что данная web-страница создана именно с использованием HTML версии 3.2, а не какой-либо другой. Определитель не несет явной функциональной нагрузки и не влияет на отображение документа вброузере, однако спецификации требуют его использования. Синтаксис записиданного определителя всегда одинаков:

<! DOCTYPE HTML PUBLIC "-//W3C//DTO HTML 3.2//EN">

Цветовые спецификации

Некоторые элементы языка HTML могут иметь в качестве атрибутов переменные, обозначающие цвета. Эти переменные применяются в основном для определения цвета фона html-документа, цвета текста или цвета, при помощи которого отображаются гиперссылки. Определить тот или иной цвет при создании web-страницы можно двумя методами: посредством задания специальных цветовых меток, обозначающих названия цветов словами, или с помощью шестна-дцатеричного цифрового кода, заменяющего эти метки.

Известно, что для вывода цветных изображений на экран монитора применяется так называемая палитра RGB (Red, Green, Blue). Согласно данному стандарту, теоретические основы которого были разработаны еще в XIX веке известным ученым-физиком Г. Гельмгольцем, можно получить абсолютно любой желаемый оттенок путем смешения всего лишь трех красок: красной, зеленой и синей. При помощи цветовых меток или цифрового кода web-мастер имеет возможность использовать в документе HTML любой цвет, который поддается отображению в рамках стандарта RGB.

Разумеется, цветовые нотации, заданные посредством символьных меток, легче запоминаются и интуитивно понятны любому программисту, хотя бы немного знакомому с английским языком. Существует 140 цветов, для которых приняты стандартные символьные метки. Цветов же, которые возможно отобразить посредством цифрового кода, несоизмеримо больше. Более того, далеко не все броузеры способны отображать некоторые цвета, заданные символьной нотацией. Например, Netscape Navigator распознает их значительно больше, нежели Microsoft Internet Explorer.

Для обозначения цвета шестнадцатеричным цифровым кодом принят следующий синтаксис записи: перед самим кодом ставится символ «#», далее следует набор из шести знаков в шестнадцатеричной системе счисления. Несмотря на точто в распоряжении web-мастера имеется более ста цветовых меток, на практике активно используется лишь шестнадцать из них. Именно эти цвета были приняты в качестве стандарта для шестнадцатицветовой палитры VGA. Обозначение данных цветов приведено в табл. 4.2.

Таблица 4.2. Стандартные цвета

Цвет | Значение RGB | Символьная метка | Цифровой код
Белый Черный Зеленый Светло-зеленый Серый Светло-серый Желтый Темно-бордовый Синий Темно-синий Голубой Изумрудный Красный Пурпурный Розовый Оливковый | 255 255 255 000 0 128 0 0 255 0 128 128 128 192 192 192 255 255 0 128 0 0 0 0 255 0 0 128 0 255 255 0 128 128 255 0 0 128 0 128 255 0 255 128 128 0 | White Black Green Lime Gray Silver Yellow Maroon Blue Navy Aqua Teal Red Purple Fuchsia Olive | #FFFFFF #000000 #008000 #00FF00 #808080 #C0C0C0 #FFFF00 #800000 #0000FF #000080 #00FFFF #008080 #FF0000 #800080 #FF00FF #808000

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

Базовые теги разметки гипертекста

Теперь настало время взяться за изучение основных директив HTML, которые позволят вам поместить в создаваемый документ какое-либо содержательное наполнение. Сначала поговорим о возможностях представления на web-страницетекста.

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

Для того чтобы вывести в составе html-документа текстовый абзац, необходимо заключить соответствующий отрывок текста в теги <Р> и </Р>. Синтаксис записи такой команды выглядит следующим образом:

<Р ALIGN=APГУMEHT>

Текст, заключаемый в абзац

</Р>

Аргументом атрибута «ALIGN» может служить одно из четырех логических выражений, значение которых приведено ниже:
RIGHT — выравнивание текста по правому краю экрана или столбца таблицы;
LEFT — выравнивание текста по левому краю экрана или столбца таблицы;
CENTER — выравнивание текста по центру экрана или столбца таблицы;
JUSTIFY — выравнивание текста по ширине экрана или столбца таблицы.

Таким образом, текст, форматирование которого внутри абзаца задано тегом<Р ALIGN=JUSTIFY>, будет выровнен на экране компьютера по всей его ширине. Если при использовании тега <Р> не задано никаких атрибутов, по умолчанию используется левое выравнивание.

Можно не включать ни один из перечисленных выше аргументов в состав тега форматирования абзаца, поскольку язык разметки гипертекста позволяет использовать некоторые из них как самостоятельные теги, предназначенные для позиционирования нескольких объектов документа в окне броузера. Используются эти теги следующим образом:

<LEFT>

Часть кода HTML

</LEFT>

Все, что заключено между тегами <LEFT> и </LEFT> — текст, таблицы, графические объекты, — будет выровнено по левому краю экрана.

<CENTER>Часть кода HTML</CENTER>

Все, что содержится между тегами <CENTER> и </CENTER>, позиционируется по центру экрана.

<RIGHT>

Часть кода HTML

</RIGHT>

Все, что заключено между тегами <RIGHT> и </RIGHT>, будет выровнено по правому краю экрана.

Если вы хотите, чтобы внутри текстового блока броузер отобразил переводстроки, например, для отделения одного абзаца от другого, в конце строки

следует поместить тег <BR>. Следующее слово, встречающееся за данным тегом, jбудет перенесено на новую строку. Примером использования этой команды мо«жет служить следующий отрывок кода HTML:

<P>

Данный текст находится на одной строке экрана.<BR>

а этот текст отобразится уже с новой строки.

</Р>

Возможно использование нескольких тегов <BR> подряд для задания последовательности из нескольких пустых строк. Примечательно, что команда <BR> неимеет закрывающего тега.

Иногда тег <BR> содержит атрибут CLEAR, который может принимать одно изтрех значений: LEFT, RIGHT или ALL. Указанные параметры позволяют переносить текст со смещением новой строки соответственно к левой, правой или обеим границам экрана одновременно. Синтаксис записи этого тега с атрибутом CLEAR таков:

<BR СLЕАР="значение">.

Некоторые броузеры переносят строки самостоятельно, причем разрывают строку в том месте, где она выходит за границы экрана. Если программисту необходимо отобразить текстовую строку фиксированной длины без переносов, используется тег <NOBR>:

<NORB>строка без переносов</NORB>

При использовании данного тега в случае, если длина строки превышает ширину экрана, в нижней части окна броузера появляется горизонтальная полоса прокрутки.

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

<В>Текст. выделяемый жирным шрифтом</В>

<I>Текст, выделяемый курсивным шрифтом</I>

Данные пары тегов можно вкладывать одна в другую. Например, выделить текст жирным курсивным шрифтом можно так:

<В><I>Текст. выделенный жирным курсивным шрифтом</I></В>

Однако создатели спецификации языка HTML предостерегают программистов от злоупотребления этими тегами, поскольку интерпретаторы далеко не всех современных броузеров умеют их правильно распознавать. Именно поэтому рекомендуется использование аналогичных директив, называемых «командами логического выделения». Они выполняют те же функции, но синтаксис записи у них несколько иной:

<ЕМ>Текст. выделяемый курсивным шрифтом</ЕМ>

<STRONG>Tекст. выделяемый жирным шрифтом</STRONG>

Очевидно, что для выделения текста жирным курсивным шрифтом можно использовать вложение данных тегов друг в друга:

<STRONG>

<ЕМ>Текст, выделенный жирным курсивным шрифтом

</ЕМ></STRONG>

Для выделения текста подчеркиванием используется тег <U>. Синтаксис его записи также достаточно прост:

<U>Подчеркнутый текст</U>

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

Помимо перечисленных тегов выделения текста существует еще несколько текстовых элементов, позволяющих различными методами акцентировать внимание зрителя на тех или иных фразах или словах. Среди подобных команд необходимо отметить следующие:

<STRIKE> — директива, позволяющая отображать в окне броузера зачеркнутый текст. Синтаксис записи:

<STRIKE>Зачеркнутый текст</STRIKE><SUB> — тег, позволяющий отобразить подстрочный текст. Синтаксис записи:

текст 1<SUB>текст 2</SUB>

Результат обработки такой строки кода будет иметь следующий вид:

текст1текст2 — тег, позволяющий отобразить надстрочный текст. Синтаксис записи:

текст1<SUP>текст 2</SUP>

Результат обработки такой строки кода будет иметь следующий вид:

текст1текст2

<ТТ> — тег, позволяющий вывести на экран часть текста фиксированным шрифтом, так называемый телетайпный текст. Используется в основном для отображения листинга программ, экранных форм и команд пользователя. Синтаксис записи:

<ТТ>Текст. отображаемый "телетайпным" шрифтом</ТТ>

<BIG> — тег, позволяющий вывести часть текста крупным шрифтом.

ПРИМЕЧАНИЕ При обработке кода HTML интерпретатором броузера размер шрифта высчитывается не в пикселах, а в условных пунктах нелинейного размера, величина такого «пункта» зависит от используемой вами реализации броузера. «Нормальный» (подставляемый по умолчанию) шрифт имеет высоту три пункта.

Использование тега <BIG> увеличивает «нормальный» размер шрифта на одинпункт. Синтаксис записи этой команды таков:

<BIG>текст</BIG>

Чтобы увеличить размер шрифта более чем на один пункт, можно использовать последовательность из нескольких тегов <BIG>:

<BIG><BIG>тeкст</BIG></BIG>

Аналогично уменьшения размера шрифта на один пункт можно добиться с использованием тега <SMALL>. Мнемоника записи этого тега выглядит следующим образом:

<SMALL>текст</SMALL>

Допустимо также использование нескольких вложенных элементов <SMALL>, подобно тому, как это было показано для тега <BIG>.

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

Элемент <FONT>

Теперь вы знаете, что управлять размером выводимого на экран текста можно при помощи тегов <BIG> и <SMALL>. А как программист может изменять другие параметры шрифта? Для этого и существует директива <FONT>.

Как известно, размер шрифта в стандарте HTML обозначается условными, пунктами, причем всего их насчитывается семь. Однако не все броузеры понимают термин «пункт» одинаково. Например, при отображении документа в Microsoft Internet Explorer размеры всех шрифтов различны, за исключением пунктов 2 и 3 — они отображаются шрифтом одной высоты, которая равна величине, принятой по умолчанию, и зависит от пользовательских настроек броузера. В Netscape Navigator абсолютно одинаково отображаются пункты 4 и 5, а так же б и 7, они больше по высоте, чем пункт 3, который является «нормальным» размером шрифта.

ПРИМЕЧАНИЕ Следует помнить, что некоторые броузеры, например Microsoft InternetExplorer, позволяют настраивать параметры текста, отображаемого всоставе документов HTML, путем изменения размера шрифта, подставляемого интерпретатором броузера по умолчанию. Это значит, что параметры элемента <FONT>, равно как и других тегов, управляющих размером шрифта, могут изменяться в зависимости от пользовательских настроек. По той же причине возможен эффект нарушения компоновки страницы, оптимизированной для просмотра в броузере со стандартными настройками. Избежать этого можно, заключив все элементы документа в невидимую таблицу с фиксированной шириной, заданной в пикселах.

В общем виде синтаксис записи тега <FONT> выглядит следующим образом:

<FONT FACE="значение1" SIZE="значение 2" COLOR="значение 3">текст</FONT>

Значением атрибута FACE является название шрифта, который вы планируете использовать для отображения текста, заключенного в теги <FONT> </FONT>. Если, например, вместо параметра "значение!" в приведенном примере вы подставите "Arial", помеченный тегом <FONT>, текст будет отображаться именно этим шрифтом.

ВНИМАНИЕ Помните, что набор шрифтов, установленных на компьютерах посетите-— " лей вашего сайта, может быть разным, и если вы укажете в атрибуте FACE тега <FONT> шрифт, отсутствующий в системе пользователя, текстна экране его монитора станет нечитаемым. Для того чтобы избежать ошибок при отображении текста в броузерах конечных пользователей, используйте указания только на стандартные шрифты, имеющиеся в составе большинства броузеров: Arial и New Times Roman. А лучше вообще опускать данный атрибут, позволив броузеру подставлять при интерпретации кода тот шрифт, который используется по умолчанию.

Атрибут SIZE указывает на размер шрифта, которым следует выводить текст. Параметр этого атрибута, обозначенный в нашем примере как "значение2", может быть описан либо абсолютной, либо относительной величиной. Абсолютная величина подразумевает использование в качестве параметра целого числа в диапазоне от 1 до 6, указывающего на высоту шрифта в пунктах. Относительная же величина, обозначаемая целым числом со знаком плюс или минус (например, +2 или -1), — это количество пунктов, которые следует прибавить или отнять от размера шрифта, используемого броузером по умолчанию. Так, запись <FONT SIZE="+1"> говорит о том, что размер помеченного таким тегом текста будет на один пункт больше, чем обычный текст документа.

Вместо значения атрибута COLOR подставляется либо цифровой код нужного цвета, либо обозначающая этот цвет символьная метка.

Очевидно, что при использовании тега <FONT> любой из его атрибутов может быть опущен. Примером записи такой команды может служить следующая строка кода HTML:

<FONT FACE="Arial" SIZE="+2" COLOR="#0000FF">

отрывок текста

</FONT>

ВНИМАНИЕ Помните, что некоторые броузеры старых версий не поддерживают директиву <FONT>. Среди них — текстовый броузер для UNIX-совместимыхплатформ, который носит название Lynx.

Атрибуты тега <BODY>

О теге <BODY>, обозначающем тело (основную часть) документа HTML, мы уже говорили в начале этого урока. Необходимо добавить лишь то, что данная команда также может иметь атрибуты, использование которых в ряде случаев бывает весьма полезно, а иногда — просто необходимо.

В общем виде синтаксис записи тега <BODY> со всеми допустимыми атрибутами выглядит так:

<BODY BACKGROUND="URL" BGCOLOR="значение1" ТЕХТ="значение2" LINK="значение3" VLINK="значение4" ALINK="значение5">

тело документа HTML

<BODY>

Атрибут BACKGROUND позволяет дизайнеру поместить на web-страницу некий фоновый рисунок, записав в качестве параметра атрибута URL этого рисунка. URL можно задавать либо в виде полного адреса Интернета (например,"http://www.server.ru/imaes/имя_файла.gif"), либо в виде сокращенного адреса с указанием пути к директории на текущем сервере, в которой хранится данное изображение (например, ".. images/имя_файла.gif"). Допускается просто указывать имя графического файла, если он хранится в той же директории, что и использующий его файл HTML. Данное изображение может иметь любой размер, поскольку при интерпретации кода оно многократно повторяется, заполняя все доступное пространство в окне броузера. Подробно о правилах включения графических файлов в html-документ мы поговорим в ходе следующего урока.

СОВЕТ Для того чтобы избежать неадекватности отображения того или иного цвета различными броузерами, например, когда web-дизайнер решил применить на странице заливку какого-либо редко используемого оттенка, рекомендуется следующий подход: создайте в любом подходящем редакторе графический файл нужного цвета размерами 1x1 пиксел, после чего укажите его в качестве фонового изображения, включив URL этого рисунка в параметр атрибута BACKGROUND тега <BODY>.

Атрибут TEXT позволяет задать цвет текста для всего документа в целом. Но не забывайте, что параметр, назначенный данному атрибуту в теге <BODY>, можетбыть изменен в определенном участке текста путем использования команды<FONT> с атрибутом COLOR.

Для того чтобы назначить фоновый цвет всему документу, используется атрибут BGCOLOR. В этом случае web-страница будет целиком заполнена равномерной заливкой указанного цвета.

ПРИМЕЧАНИЕ Атрибуты BGCOLOR и BACKGROUND не исключают друг друга, однако у последнего имеется приоритет. Это означает, что в случае, когда заданы оба эти атрибута, сначала выполняется заливка web-страницыцветом, назначенным в атрибуте BGCOLOR, поверх которой размещается изображение, заданное атрибутом BACKGROUND.

ВНИМАНИЕ Если вы не используете графических изображений в качестве фонового рисунка, а основным цветом html-документа приняли белый, использование атрибута BGCOLOR с параметром "#FFFFFF" в составе тега<BODY> обязательно. Обусловлено это правило следующей причиной: некоторые броузеры (например, Microsoft Internet Explorer) позволяют пользователям произвольно изменять фоновый цвет загружаемых web-страниц, если он не задан явно. Учтите, что пренебрежение явным указанием фонового цвета может вызвать полное нарушение разработанного вами дизайна.

Атрибут LINK дает web-мастеру возможность назначить цвет, которым отображается не посещенная гиперссылка, то есть ссылка, к которой посетитель данного web-сайта еще не обращался. По умолчанию ей присваивается значение"blue" (IOOOOFF). В свою очередь, атрибут VLINK указывает на цвет посещенной ссылки, значение которой по умолчанию — "purple" (#800080). И наконец, атрибут ALINK определяет цвет активной гиперссылки, то есть цвет, который гиперссылка принимает с момента нажатия на нее курсором мыши до момента загрузки вызываемого ею ресурса. По умолчанию данный атрибут также имеет значение "purple".

Очевидно, что значения всех атрибутов тега <BODY>, кроме атрибута BACKGROUND, представляют собой обозначения цветов символьными метками или шестнадцатеричным цифровым кодом.

ПРИМЕЧАНИЕ При выборе цветов документа, текста и гиперссылок следует соблюдать определенную осторожность, поскольку цвета, контрастно отображаемые на цветном мониторе, могут быть неразличимы на черно-белом. Избежать подобных ошибок можно при помощи несложного приема: сделайте снимок экрана («скриншот») в момент, когда ваша web-страницазагружена в броузер (для этого необходимо нажать кнопку Print Screenна клавиатуре компьютера), загрузите полученное изображение в графический редактор и просмотрите его в режиме grayscale (256 оттенков серого). Если выбранная вами цветовая схема по-прежнему выглядит контрастно, ее можно смело применять, если нет — придется использовать другие цвета.

СОВЕТ Подбирая цвета для web-страницы, помните, что используемая вами цветовая схема должна быть «корректной». Чтение текста не должно вызывать затруднений, глаза посетителей вашей странички не должны уставать. Пожалейте зрение пользователей, не пишите оранжевым по зеленому.

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

Вот пример использования тега <BODY> со всеми допустимыми атрибутами:

<BODY BACKGROUND="http://www.myserver.com/images/back.jpg" BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#008000" VLINK="#800080" ALINK="#FF0000">

Тело документа HTML

</BODY>

Заголовки

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

Аналогия с файлами Microsoft Word приведена здесь не случайно: она поможет вам понять назначение заголовков, применяющихся в документах HTML. Спецификация HTML позволяет программисту использовать шесть различных стилей, или, как их еще принято называть, логических уровней заголовков. Для того чтобы отобразить заголовок на web-странице, необходимо использовать тег <Нn>, где n — целое число от 1 до 6, обозначающее номер уровня заголовка, причем самым верхним уровнем принято считать 1. Синтаксис записи этой команды в общем виде таков:

<Нn АLIGN="параметр">Текст заголовка</Нn>

где n=1...6.

Атрибут ALIGN дает возможность web-мастеру определить расположение заголовка в окне броузера. Параметр этого атрибута может принимать одно из трех возможных значений:

RIGHT — позиционирование заголовка по правой границе документа; LEFT — позиционирование заголовка по левой границе документа; CENTER — позиционирование заголовка по центру документа. По умолчанию заголовки выравниваются по левому краю страницы.Вот пример использования данного тега:

<Н1 ALIGN="CENTER">ДOБPO ПОЖАЛОВАТЬ НА МОЮ СТРАНИЧКУ!</Н1>

К сожалению, не существует каких-либо четко сформулированных правил применения заголовков в документах HTML, за исключением одного и вполне очевидного: они должны следовать в порядке приоритета, то есть с 1 по б, но не наоборот. В принципе данное правило диктуется не внутренними законами языка разметки гипертекста, а элементарной человеческой логикой, его нарушение не вызовет появления ошибок. Не рекомендуется также включать в документы заголовки ниже уровня <Н4>, поскольку они отображаются значительно более мелким шрифтом, нежели основной текст web-страницы, что затрудняет восприятие информации. Во всех остальных случаях использование данной команды — дело вкуса и эстетических предпочтений автора проекта.

Списки

Продолжая параллель с документами MS Word, необходимо сказать еще о двух элементах оформления текстовых файлов, а именно — о нумерованных и маркированных списках. Они были разработаны для отображения упорядоченной информации в виде позиционированных по смыслу вхождений. Вот простой пример организации маркированного списка:

  • Вхождение 1
  • Вхождение 2
  • Вхождение 3
  • Вхождение n.

На языке HTML подобный маркированный список можно представить при помощи команды <UL> следующим образом:

<UL ТУРЕ="параметр">

<LI> Вхождение 1</LI>

<LI>Вхождение 2</LI>

<LI>Обхождение 3</LI>

<LI>Обхождение n</LI>

</UL>

Атрибут TYPE позволяет программисту управлять так называемым «буллет стилем» , то есть внешним видом и формой обозначающих каждое вхождение меток. Параметр этого атрибута может принимать одно из трех значений:

DISC — метки отображаются в виде заполненных черным цветом окружностей;

CIRCLE — метки отображаются в виде полых окружностей;

SQUARE — метки отображаются в виде заполненных черным цветом квадратов.

По умолчанию, то есть в случае, когда в маркированном списке тег <UL> записывается без атрибутов, TYPE="DISC".

Нумерованный список позволяет отображать упорядоченную информацию, которая выводится на экран в виде обозначенного цифрами перечисления, например:

1. Вхождение 1

2. Вхождение 2

3. Вхождение 3

И т. д.

В документе HTML нумерованный список можно представить с использованием тега <OL>:

<OL ТУРЕ="параметр" START="значение">

<LI> Вхождение 1</LI>

<LI>Обхождение 2</LI>

<LI>Вхождение 3</LI>

</OL>

Атрибут TYPE, так же как и в случае с маркированным списком, позволяет изменять буллет-стиль, то есть определять вид маркеров, которыми будут обозначаться составляющие список значения. В составе атрибута TYPE команды <OL>можно использовать один из следующих параметров:

"1" — обычные арабские числа 1, 2, 3 и т. д.

"I" — римские цифры в заглавном регистре I, II, III, IV и т. д.

"i" — римские цифры в строчном регистре i, ii, iii и т. д.

"А" — символьная маркировка в заглавном регистре А, В, С и т. д.

"а" — символьная маркировка в строчном регистре а, b, с и т. д.

Атрибут START позволяет задавать позицию, с которой следует начать маркировку. Например, если атрибут TYPE задан как "1", а атрибут START —как "5", то нумерация начнется с цифры 5. Если же TYPE имеет значение "А", аSTART — "D", то маркировка начнется с символа D.

ВНИМАНИЕ При использовании атрибута START необходимо внимательно следить,— чтобы его значение соответствовало типу маркировки, указанному в атрибуте TYPE. Запись <OL TYPE="I" START="A"> не допускается. Наоборот, запись <OL TYPE="A" START="I"> вполне допустима.

По умолчанию значение атрибута TYPE принимается как "1", нумерация начинается с первого элемента в каждом из типов маркировки.

Возможно создание так называемых вложенных списков, реализуемых посредством размещения одной пары тегов в другой, например, команд создания маркированного списка внутри нумерованного. Простая реализация вложенного списка имеет вид:

  1. Вхождение 1
  • Вхождение 1-а
  • Вхождение 1-6
  2. Вхождение 2
  • Вхождение 2-а
  • Вхождение 2-6

На языке HTML такой список можно представить следующим набором команд:

<OL>

<LI>Обхождение 1</LI>

<UL>

<LI>Обхождение l-a</LI>

<LI>Вхождение 1-б<LI>

</UL>

<LI> Вхождение 2</LI>

<UL>

<LI>Вхождение 2-a</LI>

<LI>Обхождение 2-6</LI>

</UL>

</OL>

Следует отметить, что тег О может включать те же атрибуты, что и теги самих списков <UL> и <OL>. Если, например, вхождения маркированного списка отображаются принятым по умолчанию маркером DISC, но одно из наиболее значимых по контексту вхождений программисту необходимо пометить маркером SQUARE, можно записать тег данного элемента следующим образом: <LI ТYРЕ="SQUARE">Вхождение</1-1>. Аналогично, один из пунктов нумерованного арабскими цифрами списка можно пометить символьным маркером, записав соответствующий тег следующим образом: <LI ТУРЕ="А">Вхождение</LI>. Важно лишь следить за тем, чтобы указываемые в теге О параметры атрибутов совпадали с типом используемого списка.

Помимо нумерованных и маркированных списков язык разметки гипертекста позволяет создавать списки определений, для чего применяются команды <DL>.Внешний вид простого списка определений таков: Заголовок группы вхождений 1

Вхождение 1-а

Вхождение 1-6

Заголовок группы вхождений 2

Вхождение 2-а

Вхождение 2-6

В виде кода HTML этот список можно представить следующим образом:

<DL>

<DТ>Заголовок группы вхождений 1

<DD>Вхождение 1-а

<DD>Вхождение 1-6

<DT>3aголовок группы вхождений 2

<DD>Вхождение 2-а

<DD>Вхождение 2-6

</DL>

Закрывающие теги для команд <ОТ> и <DD> списка определений можно опустить. Данные теги могут использоваться и самостоятельно: <DT> для отображения терминов, выделяемых в тексте шрифтом, a <DD> — для их расшифровки, помеченной отступом. В этом случае наличие соответствующих закрывающих тегов обязательно.

Разделители

Для того чтобы визуально отделить часть объектов html-документа от других, применяется тег <HR>. С его помощью можно отобразить в окне броузера горизонтальную черту заданного размера и цвета. В общем виде синтаксис директивы <HR> выглядит следующим образом:

<HR ALIGN="параметр" WIDTH="значение" SIZE="значение" COLOR="значение">

Атрибут ALIGN вам уже знаком, он определяет положение горизонтальной черты на экране и может принимать одно из трех возможных значений: CENTER, LEFT и RIGHT (выравнивание черты по центру, левой и правой границам экрана). Атрибут WIDTH определяет длину линии, причем его значение можно задавать либо в пикселах простым целым числом, либо в процентах от ширины экрана при помощи числа от 1 до 100 с добавлением символа «%», например, WIDTH="268" или WIDTH="80%". В последнем случае абсолютная длина линии будет меняться в зависимости от установленного пользователем экранного разрешения. Атрибут SIZE, значение которого — простое целое число, задает толщину линии в пикселах. И наконец, атрибут COLOR определяет цвет заливки линии, в качестве его значения указывается либо шестнадцатеричный цифровой код, либо символьная нотация необходимого цвета. Ниже приведен пример записи тега <HR>:

<HR ALIGN="CENTER" WIDTH="80%" SIZE="1" COLOR="#0000FF">

Очевидно, что подобно директиве <BR> команда <HR> не имеет закрывающего тега. По умолчанию, то есть в случае записи команды <HR> без указания каких-либо атрибутов, броузер отобразит двухцветную серо-белую «вогнутую» линию толщиной в три пиксела и длиной во весь экран.

Гиперссылки

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

О правилах представления в качестве гиперссылки графических изображений мы подробно побеседуем в пятом уроке. Что касается текстовых гинерссылок,то их можно разделить на четыре условных категории: ссылки на документы, ссылки на разделы, ссылки на адрес электронной почты и на файловые объекты. Начнем по порядку.

Ссылки на документы

Реализовать простую гиперссылку на другую web-страницу можно путем использования в html-документе тега <А>, синтаксис записи которого в общем виде выглядит следующим образом:

<А HREF="URL" TARGET="параметр" TITLE="альтернативный текст"> текст гиперссылки</А>

В приведенном примере атрибут HREF указывает на адрес страницы, с которой вы планируете установить гиперсвязь. Этот адрес может быть представлен как в виде полного URL (например, "http://www.server.ru/page.htinl"), если целевой документ физически расположен на другом сервере, так и в виде сокращенного URL с указанием пути к искомой странице в пределах локального сервера (например, "/folder/page.html"). Если искомый документ расположен водной директории с текущим, в качестве параметра атрибута HREF достаточно записать его название.

Атрибут TARGET содержит директивы, описывающие правила открытия целевого документа в броузере, эти директивы выделяются в коде символом

подчеркивания. Одно из наиболее часто встречающихся значений атрибута TARGET="_blank" отображает открываемый по ссылке документ HTML в новом окне броузера.

И наконец, атрибут TITLE предназначен для создания так называемого альтернативного текста — всплывающей подсказки, появляющейся в небольшом прямоугольнике, если пользователь задержит курсор мыши над гиперссылкой на несколько секунд. Такая подсказка может содержать, например, более подробное описание вызываемого документа.

Следует помнить, что тег <А> является одной из немногих директив HTML, не позволяющих организовать внутри нее вложение однотипных элементов. Иными словами, одну гиперссылку нельзя размещать внутри другой.

Ссылки на разделы

Иногда возникает необходимость разместить на web-странице гиперссылку не на другой документ, а на расположенный в пределах этой же страницы разделили участок текста. При активизации подобной гиперссылки броузер «отматывает» экран таким образом, что искомый раздел или фраза оказываются в верхней его части. Процесс создания ссылки на раздел можно условно разделить на два этапа. Первый заключается в подготовке, так называемой «закладки» —специальной метки с уникальным в пределах данного документа именем, присваиваемым «закладке» посредством атрибута NAME. Для этого в том участке текста, где необходимо разместить метку, применяется следующая команда:

<А NAME="имя_закладки">ключевое слово или заголовок раздела</А>

Второй этап — создание самой ссылки при помощи такой команды:

<А HREF="#имя_закладки">текст ссылки</А>

Помните, что для задания имени «закладки» лучше использовать латинские символы. При вызове раздела посредством гиперссылки имя «закладки» предваряется символом «#».

Если вы хотите разместить ссылку на раздел какого-либо другого документа, описанный выше алгоритм в целом сохраняется, за исключением того, что в вызывающем теге перед именем «закладки» указывается URL документа. В этом случае рекомендуется также использовать атрибут TARGET с параметром _blank. Подобная команда в обобщенном виде будет выглядеть следующим образом:

<А HREF="http://www.server.ru/document.html#имя_закладки"

TARGET="_blank">текст ссылки</А>

ВНИМАНИЕ Помните, что броузеры не поддерживают режим «отката» при переходе— " по гиперссылке внутри документа. Иными словами, обратившись посредством ссылки к какому-либо разделу одной и той же страницы, при нажатии кнопки «НАЗАД» вы попадете не на тот участок документа, который отображался до активизации гиперссылки, а но ту страницу, которая загружалась в броузер последней.

Ссылки на адрес электронной почты

Наверняка в процессе работы во Всемирной сети вы не раз сталкивались с гиперссылками, при активизации которых автоматически запускается установленная на вашем компьютере почтовая программа и на экране формируется уже готовый к отправке бланк электронного письма с заполненным адресным полем и иногда полем Subject. Подобные гиперссылки также можно реализовать с использованием тега <А>. В виде кода HTML ссылку на адрес электронной почты представляют следующим образом:

<А HREF="mailto:user-l@server.ru?cc=user-2@server.ru, user-3@server.ru&subject=тема_письма" >текст ссылки</А>

Давайте рассмотрим все перечисленные выше параметры атрибута HREF более подробно. Директива mail to: указывает на основной адрес электронной почты, куда следует отправлять созданное автоматически письмо. В минимальной записи атрибута HREF при реализации гиперссылки на адрес электронной почты можно указать только эту директиву и какой-либо адрес e-mail. Функция ?сс позволяет определить адреса пользователей, которым будет отправлена копия сообщения. Если таких адресов больше одного, они записываются подряд через запятую без пробелов. И наконец, с помощью функции Subject можно задать тему отсылаемого сообщения.

Простым примером организации гиперссылки на адрес электронной почты автора этой книги может служить приведенный ниже отрывок html-кода:

<А HREF="mailto:alvion@rednet.ru&subject=комментарии читателей">Жду писем!</А>

Ссылки на файловые объекты

Гиперссылка на некий файловый объект подразумевает организацию гиперсвязи документа HTML с каким-либо файлом, хранящимся на сервере, например архивом ZIP. При нажатии мышью на такой гиперссылке автоматически открывается сессия загрузки данного файла с удаленного сайта на локальный пользовательский компьютер. Мнемоника записи подобной команды выглядит следующим образом:

<А HREF="http://www.myserver.com/fi1es/archive.ziр">текст гиперссылки</А>

Иногда для реализации гиперсвязи с файловым объектом в записи URL этого объекта используется префикс "file://", однако такой подход применяется в основном для организации ссылок на файловый объект, расположенный на локальном компьютере. Если загрузку файла планируется осуществлять по протоколу FTP, используйте префикс "ftp://". Если искомый файл расположен в тойже директории, что и вызывающий его документ, в качестве значения атрибута HREF можно просто указать его имя.

Практикум

Чтобы закрепить в памяти все новые знания, полученные вами в данном уроке, постарайтесь незамедлительно реализовать их на практике, а именно — наполнить разработанную в самом начале урока заготовку для web-страницы текстовым содержимым.

Для этого создайте в текстовом редакторе Блокнот (Notepad) два независимых документа, содержащих информацию, которую вы хотели бы представить на своей домашней страничке. Один из них этих документов разместите на стартовой странице сайта, другой — на странице одного из тематических разделов, например рубрики «мое хобби». В качестве наглядного примера я предлагаю небольшой текст в составе файла index.html. Вот он:

ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!

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

К сожалению, в настоящий момент моя домашняя страничка находится в стадии разработки, потому еще далеко не все ее разделы доступны для просмотра. Я искренне надеюсь, что этот ресурс будет постоянно обновляться и в ближайшем будущем многие из перечисленных рубрик займут свое законное место. Например, в течение ближайшей недели здесь будет опубликовано:

  • Моя биография.
  • Рассказ о моей семье.
  • Несколько фотографий.

Заходите на мою страничку почаще! С уважением, Иван Иванов.

Теперь настало время подготовить рубрику «Мои увлечения». Для этого создайте внутри каталога, в котором хранится содержимое вашего сайта (C:\MySite),вложенную папку, которую озаглавьте «Hobby», а в ней разместите пустой файл с названием index.html, созданный в редакторе Notepad.

Итак, все приготовления закончены. Осталось, воспользовавшись информацией, которую вы почерпнули из этого урока, превратить ваш текстовый файл в полноценный документ HTML:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><HTML><HEAD>

<TITLE>Mоя домашняя страничка</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"ALINK="#FF0000">

<H1 ALIGN="CENTER"> ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!</Н1>

<BR>

<Р ALIGN="JUSTIFY">

&nbsp; &nbsp; &nbsp: Спасибо Вам. уважаемый посетитель, за то, что Вы нашли

время и возможность заглянуть на мою страницу во Всемирной сети. Здесь Вашему

вниманию предложена информация о

<А HREF="/hobby/index.html" TITLE="Рассказ о моем хобби, в частности о

коллекционировании марок">моих увлечениях</А>,

моей биографии, моих друзьях, работе и семье. В отдельной рубрике я предлагаю

Вашему вниманию несколько собственных фотографий. Надеюсь, они Вам понравятся.

</Р><BR>

<Р ALIGN="JUSTIFY">

&nbsp: &nbsp: &nbsp: К сожалению, в настоящий момент моя домашняя страничка

находится в стадии разработки, потому еще

<STRONG>далекр не все ее разделы доступны для просмотра</STRONG>.Я искренне надеюсь, что этот ресурс будет постоянно обновляться и в ближайшем будущем многие из перечисленных рубрик займут свое законное место. Например, в течение ближайшей недели здесь будет опубликовано:</Р>

<UL TYPE="SQUARE">

<LI>Моя биография.</LI>

<LI>Рассказ о моей семье.</LI>

<LI>Несколько фотографий.</LI>

</UL>

<Р ALIGN="CENTER">

Заходите на мою страничку почаще! С уважением.

<EM><STRONG>Иван Иванов.</STRONG></EM>

</Р>

<BR>

<HR>

<Р ALIGN="CENTER">Aвтор страницы Иван Инванов. 2000.

E-mail: <A HREF="mailto:ivan@server.ru&subject=отзывы посетителей">

ivan@server.ru</A>

</Р>

</BODY>

</HTML>

Как становится видно из предложенного выше кода, вступительная фраза «Добро пожаловать на мою домашнюю страничку!» использована в качестве заголовка первого уровня, словосочетание «моих увлечениях» превращено в гиперссылку на заглавный документ рубрики «Хобби», фраза «далеко не все ее разделы доступны для просмотра» выделена жирным шрифтом, маркированный список реализован с помощью меток в виде залитых черным цветом квадратов, а имя разработчика странички помечено жирным и курсивным выделением, имитируя подпись. Более того, нижняя часть документа отделена горизонтальной чертой, под которой размещена ссылка на адрес электронной почты автора данного web-сайта, а в качестве темы сообщения указана строка «отзывы посетителей». Результат ваших трудов будет выглядеть в окне броузера так, как показано на рис. 4.4.

Рис. 4.4. Внешний вид домашней странички

Второй html-документ, составляющий тематический раздел «Мои увлечения», предлагаю вам разработать самостоятельно по аналогии с приведенным примером. Не забудьте включить в текст этой страницы ссылку на заглавную страницу сайта.

Размещение страницы в Интернете

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

Существует множество программ и утилит, облегчающих пользователям размещение web-страниц во Всемирной сети. На мой взгляд, самая удобная, простая в использовании, надежная и дружественная из них — это программа CuteFTP.

CuteFTP представляет собой тридцатидвухразрядное приложение MS Windows, предназначенное для загрузки файлов на удаленный сервер. Эта программа является Shareware-продуктом, рассчитанным на 30-дневный бесплатный период эксплуатации, по истечении которого необходима платная регистрация. Автор данной утилиты — программист из Сан-Антонио Алекс Кунадзе.

При загрузке CuteFTP на экране появляется окно менеджера связи (FTP SiteManager), внешний вид которого показан на рис. 4.5.

Рис. 4.5. Интерфейс менеджера связи

В левом окне менеджера связи отображается список папок, где хранится информация о FTP-сайтах, с которыми устанавливает соединение программа. Вы имеете возможность добавлять, удалять и переименовывать папки по собственному усмотрению при помощи кнопок Add folder, Delete folder и Rename folder.

Для того чтобы внести информацию об используемом вами FTP-сервере в базу данных Cute FTP, необходимо щелкнуть мышью на кнопке Add site, в результате чего на экране появится окно настроек удаленного хоста (Add Host) (рис. 4.6).

Рис. 4.6. Окно настроек удаленного хоста, вкладка General

В поле Site Label вкладки General данного окна необходимо указать краткое название создаваемого вами соединения, в поле Host address — адрес удаленного FTP-сервера, например, в виде ftp.server.ru. В поле User ID записывается ваш логин (учетная запись для доступа к FTP), а в поле Password, соответственно, пароль. Меню Login type предлагает на выбор три режима авторизации на удаленной машине: обычный, анонимный и двойной. Меню Transfer type позволяет пользователю специфицировать режим передачи данных: ASCII для трансфера документов HTML, текстовых файлов и скриптов, Image — для загрузки графических изображений и, наконец, Auto-Detect — для автоматического переключения из одного режима в другой в зависимости от типа загружаемого файла.

В меню Host Type вы должны указать тип операционной системы, установленной на удаленном сервере, выбрав ее название из предложенного списка. Если версия операционной системы вам неизвестна, рекомендую оставить установленный по умолчанию режим Auto-Detect. В поле Initial Remote Directory вносится имя каталога на удаленном сервере, в котором вы должны размещать составляющиеваш сайт файлы. Если они заносятся в корневую директорию, данное поле можно оставить пустым. В поле Initial Local Directory необходимо записать путь к папке на локальном компьютере, в которой хранится загружаемый вами на сервер контент, в нашем случае это C:\MySite.

В общем случае установленные по умолчанию настройки во вкладке Advanced окна настройки удаленного хоста можно оставить без изменений, поскольку они описывают лишь технические параметры соединения, такие как номер порта сервера (пункт Port), количество повторов попыток установки связи в случае возникновения ошибок (поле Connection Retries), временную задержку между повторами (пункт Delay between retries) и некоторые другие. Здесь же можно записать комментарии, которые будут отображаться в поле Comments менеджера связи при выделении мышью одного из пунктов списка доступных FTP-серверов.Внесенные в настройки хоста изменения можно зафиксировать нажатием кнопки ОК, которая возвращает пользователя в окно менеджера связи.

В правом верхнем поле окна FTP Site Manager отображается список доступных вданный момент удаленных FTP-серверов. После закрытия меню Add host в немпоявится новая позиция, озаглавленная так, как было указано вами в поле SiteLabel. Имеется возможность удалять из имеющегося списка FTP-сервера с использованием кнопки Delete site, редактировать текущие настройки при помощи кнопки Edit site и импортировать ранее подготовленные списки сайтов посредством кнопки Import.

После того как все необходимые настройки были вами внесены и в списке окна менеджера связи появился ярлык нового соединения, необходимо выделить его щелчком мыши, установить соединение с Интернетом и нажать на кнопку Connect. Можно передавать файлы.

Если соединение с удаленным FTP-сервером будет установлено успешно, на экране появится всплывающее окно, сообщающее о начале сеанса связи. Чтобы окно исчезло, нажмите кнопку ОК. Лишь после этого пользователь получает доступ к главному окну программы CuteFTP, внешний вид которого показан на рис. 4.7.

Рис. 4.7. Внешний вид главного окна программы CuteFTP

Рабочее пространство приложения CuteFTP разделено на три независимых поля. В верхнем, расположенном непосредственно под панелью инструментов с функциональными кнопками, отображаются отдаваемые программой команды и отклики сервера. В левом поле, размещающемся ниже, показано содержимое директории на локальном компьютере, в которой хранятся объекты, предназначенные для публикации на сайте. Чуть выше имеются средства навигации, позволяющие сменить текущий диск и текущую папку. В правом поле отображается содержимое каталога на удаленном сервере, в который вы будете загружать составляющие ваш проект файлы, причем данное поле также снабжено средствами навигации.

Ниже подробно описано назначение функциональных кнопок, расположенных в панели инструментов (рис. 4.8).

Рис. 4.8. Панель инструментов программы CuteFTP

1 — вызов окна менеджера связи для установки соединения с одним из доступных FTP-серверов;

2 — быстрая установка соединения, вызывает окно Quick Connect, аналогичное диалоговому окну Add Host, но с незаполненными полями настроек, куда пользователь может оперативно внести необходимую информацию и начать сеанс связи;

3 — принудительный разрыв текущего соединения;

4 — возобновление разорванного соединения;

5 — приостановка процесса передачи данных;

6 — загрузка данных с локального компьютера на удаленный сервер;

7 — копирование данных с удаленного сервера на локальный компьютер;

8 — добавление файла в очередь. Процедура, противоположная предыдущей, позволяет установить файл в очередь и указать его приоритет на копирование;

9 — просмотр содержимого выделенного файла;

10 — редактирование выделенного файла. Эта опция позволяет вам вносить изменения в содержимое своего документа HTML без длительной процедуры его повторного копирования. Она применяется в основном в процессе отладки web-страниц непосредственно на сервере. Для того чтобы воспользоваться этой функцией, необходимо указать путь к используемому вами html-редактору в поле HTML Editor панели Options, которая находится в меню FTP Settings командной панели программы. Для того чтобы отредактировать какой-либо файл, отметьте его мышью в правом окне CuteFTP, затем щелкните мышью на данной кнопке и нажмите ОК во всплывающем меню. Запустится ваш html-редактор. Завершив редактирование, сохраните файл стандартными средствами и закройте его. Появившееся на экране меню предложит вам на выбор два варианта действий: UPLOAD или CANCEL. Если вы хотите, чтобы изменения вступили в силу, выбирайте UPLOAD;

11 — переименование выделенного файла.

12 — запуск выделенной программы или скрипта на исполнение;

13 — удаление выделенного файла;

Собственно говоря, уже этого небольшого количества встроенных функций CuteFTP вполне достаточно, чтобы поместить необходимые файлы на сервер.Для этого нужно лишь выделить в левом поле при помощи мыши все содержимое локального каталога (C:\MySite), включая субдиректории, и нажать кнопку загрузки данных на удаленный компьютер, обозначенную на рис. 4.8 цифрой 6. CuteFTP сообщит вам о завершении операции копирования. Затем можно разорвать соединение с FTP-сервером и вызвать свою страничку из адресной строки броузера посредством присвоенного вашему сайту URL.

Несмотря на всю простоту процедуры публикации собственного ресурса в Интернете, я остановлюсь чуть подробнее на других возможностях CuteFTP, которые могут вам пригодиться.

Итак, управлять режимом передачи файлов вручную можно посредством меню FTP > Transfer Type, где вам предлагаются на выбор три варианта пересылки данных: режим ASCII, Binary и Auto. С помощью меню Session можно открыть новыйсеанс CuteFTP (опция Spawn Session), сохранить настройки какого-либо соединения в базе данных менеджера связи (пункт Add to Database), а также сделатьтекущие директории на локальном диске или на удаленном сервере открывающимися по умолчанию при запуске программы (опции Save Local Path и SaveRemote Path). Меню Commands позволяет отдавать серверу не только команды, продублированные на панели инструментов, но и директивы, введенные вами с клавиатуры (меню Custom Commands > Define). И наконец, управлять отображением файлов и директорий в соответствующих окнах CuteFTP вы можете при помощи меню View.

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

Что нового мы узнали?

В этом уроке мы изучили:

  • Общую структуру языка HTML.
  • Понятия тегов и атрибутов, escape-последовательностей, правила записи команд.
  • Цветовые спецификации языка.
  • Базовые теги HTML, позволяющие формировать абзацы, устанавливать стили выделения и форматирования текста.
  • Атрибуты тега <BODY>.
  • Тег управления шрифтом <FONT>.
  • Команды, предназначенные для создания заголовков, списков, разделителей.
  • Правила организации гиперссылок.
  • Программу CuteFTP, предназначенную для публикации web-страниц в сети Интернет.


Урок 5
Графика в web-дизайне

  • Сетевые графические форматы
  • GIF
  • JPEG
  • PNG
  • Оптимизация графических изображений
  • Включение графики в web-страницу
  • GIF-анимация
  • Программа Ulead GIF Animator
  • Стандартное меню
  • Панель инструментов
  • Панель атрибутов
  • Панель палитры
  • Панель статуса
  • Закладки
  • Optimize — оптимизация изображения
  • Практикум
  • Что нового мы узнали?

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

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

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

Графические компоненты web-страниц по назначению можно условно разделить на три обширные категории: иллюстративная графика, включая дополняющие текст фотографии, пояснительные рисунки, чертежи и схемы, функциональная графика, представляющая собой элементы управления сайтом (кнопки навигации, счетчики и элементы интерактивных форм) и, наконец, декоративная графика — элементы дизайна страницы, включенные в нее «для красоты» и не несущие информационной нагрузки (фоновые рисунки, линии-разделители, выполненные в виде графических файлов заголовки и многое другое).

Что же, с лирикой, полагаю, закончим. Пора переходить к прозе жизни. А поскольку проза — стиль весьма и весьма специфический, по закону жанра начнем с обширного раздела

Сетевые графические форматы

Как говорили И. Ильф и Е. Петров, «статистика знает все». Эта самая всезнающая статистика утверждает, что большинство пользователей Интернета на нашей планете применяют для связи со Всемирной сетью соединение по коммутируемым телефонным каналам при помощи модема. Поскольку это весьма медленный способ связи, время загрузки графического изображения в клиентский броузер в данном случае должно быть как можно меньшим. Действительно, длительное ожидание, когда закончится считывание картинки с сервера, занятие не из приятных. Именно поэтому два наиболее популярных стандарта, в которых хранится 90 % всей графики, представленной ныне в Интернете, это GIF и JPEG. В них заложены различные алгоритмы сжатия изображения с потерей качества, благодаря использованию которых удается значительно уменьшить размер целевого файла.

GIF

В далеком 1978 году двое израильских исследователей Якоб Зив (Jacob Ziv)и Абрахам Лемпел (Abraham Lempel) разработали принципиально новый для того времени алгоритм сжатия информации без потери данных, которому, немудрствуя лукаво, дали полученное из сокращения собственных фамилий и даты завершения своего проекта название: LZ78. Информация о принципах построения этого алгоритма была общедоступной, и спустя несколько лет американский программист Терри Уэлч (Terry Welch) усовершенствовал его, добавил в обозначение первую букву своей фамилии и запатентовал новый алгоритм под названием LZW, также предоставив свою разработку для использования всем желающим.

Одним из таких «желающих» оказался сотрудник компании CompuServe Inc.Боб Берри (Bob Berry), взявший LZW в качестве основы для созданного им в 1987 году принципиально нового графического формата GIF (Graphic Interchange Format). Созданная Терри Уэлчем компания Unisys, которой и принадлежали авторские права на алгоритм LZW, взимала плату за его использование только с производителей аппаратного обеспечения для компьютеров, в котором применялся данный стандарт, например, с изготовителей модемов. Разработчики программного обеспечения «комиссионными сборами» не облагались.

Однако зимой 1994 года компания Unisys, начавшая испытывать финансовые проблемы, объявила LZW коммерческим стандартом, использование которого требует оплаты. Это автоматически сделало GIF единственным в мире «платным» графическим форматом, что вызвало волну недовольства среди пользователей Интернета, поскольку практически на всех современных web-сайтах так или иначе применяются элементы GIF. Тем не менее GIF чрезвычайно широко используется в Интернете и сейчас, причем пользователи не обязаны оплачивать кому бы то ни было возможность разместить на своей страничке изображение в данном формате, так как упомянутые выше финансовые претензии касаются, в первую очередь, производителей работающего с GIF программного обеспечения. Ситуация с дальнейшей судьбой этого стандарта до сих пор остается не разрешенной.

Благодаря возможностям алгоритма LZW стандарт GIF позволяет значительно сокращать объем итогового графического файла по сравнению с исходным изображением. Достигается это методом смешения сходных оттенков в один. Если, например, в составе рисунка имеется участок, состоящий из нескольких сходных полутонов, к примеру, голубого, светло-голубого и темно-голубого цвета, они будут кодированы одним оттенком — голубым. Информация об изображении в файле стандарта GIF записывается построчно то есть представляет собой массив описаний строк высотой в один пиксел. Именно это свойство GIF, а также то, что данный формат оперирует фиксированной, так называемой индексированной палитрой, причем число цветов в этой палитре не превышает 256,явилось основой для появления двух простых правил, применяющихся в современном web-дизайне. Вот они.

ВНИМАНИЕ Стандарт GIF используется в документах HTML только для отображения так называемой бизнес-графики: диаграмм, логотипов, кнопок, разделительных линий, других элементов оформления страницы. Для размещения на web-сайте фотографий, репродукций картин и изображений с большим количеством цветов и цветовых переходов используется стандарт JPEG.

В упрощенном виде данный закон «web-мастерства» можно сформулировать так: если изображение рисованное, его следует представлять в стандарте GIF, во всех остальных случаях лучше воспользоваться JPEG.

ВНИМАНИЕ Подготавливая рисунок для сохранения его в формате GIF, необходимо избегать следующих художественных приемов: градиентных заливок, размытий, постепенных цветовых переходов с множеством оттенков, а также графических фильтров, обеспечивающих неравномерное смешение нескольких цветов на одном участке изображения, например, эффектов изменения интенсивности освещения, подобных фильтру «блик» редактора Adobe Photoshop.

Это правило продиктовано тем, что алгоритм замещения схожих оттенков одним в формате GIF далеко не всегда работает корректно. Правильнее было бы, наверное, сказать «работает некорректно почти всегда». Поэтому участки со множеством различных оттенков на небольшом физическом пространстве рисунка после сохранения изображения в индексированной палитре будут выглядеть смазанными и «грязными». Этого можно избежать, применяя в своей иллюстрации по возможности однотонные и контрастные цвета. Одно из замечательных свойств стандарта GIF — его уникальная особенность, названная разработчиками «interlace», или, по-русски, «черессторность». Она позволяет загружать картинку с сервера в клиентский броузер не целиком, а частями, причем процедура считывания файла выглядит следующим образом: сначала на экране отображаются первая, пятая и десятая строки, составляющие изображение, затем — вторая, шестая и одиннадцатая и т. д. Таким образом, для пользователя создается иллюзия постепенной загрузки графического элемента: картинка как бы медленно «проявляется» на странице, что иногда бывает очень полезно при включении в документ изображений большого размера —психологически зрителю легче дождаться полной прорисовки иллюстрации, чем несколько минут скучать перед пустым экраном. К тому же еще до полной загрузки файла пользователь может оценить приблизительное содержимое картинки и решить, стоит ли ему дожидаться ее полной прорисовки или нет.

Через несколько лет после создания стандарта GIF, в 1989 году, компания CompuServe выпустила новую версию этого графического формата, получившую название GIF89a. Данная модификация включает в себя еще две уникальные особенности, широко использующиеся в современном Интернете. Первая называется «transparency» и подразумевает создание для изображения прозрачного фона методом сохранения вместе с файлом так называемого альфа-канала, представляющего собой маску прозрачности рисунка. Цвета, помеченные в альфа-канале как прозрачные, станут невидимы в броузерах и большинстве других программ, предназначенных для просмотра изображений. Эта функция необходима, например, при размещении картинок неправильной геометрической формы на странице со сложным фоновым рисунком, когда корректно «подогнать» части изображений друг к другу не представляется возможным.

СОВЕТ Убрать ненужный фон из файла GIF можно, воспользовавшись встроенной процедурой графического редактора Adobe Photoshop. Для этого вменю «файл» необходимо выбрать пункт «экспорт», среди предложенных вариантов отметить «GIF89a» и в появившемся окне с помощью инструмента «пипетка» указать цвета, в которых вы больше не нуждаетесь.

Другая полезная особенность стандарта GIF89a заключается том, что этот формат позволяет сохранять в файле с одним физическим заголовком несколько разных изображений, демонстрируя их на экране последовательно одно за другим, причем с возможностью специфицировать порядок их чередования и временной интервал между сменами кадра. Именно на этом принципе построена весьма распространенная в Интернете GIF-анимация, о которой мы поговорим подробнее в этом же уроке.

JPEG

JPEG (Joint Photographic Experts Group) — графический стандарт, созданный на основе одноименного алгоритма сжатия изображений с потерей качества, кодирующего не идентичные элементы, как алгоритм LZW, а межпиксельные интервалы. В упрощенном виде механизм сжатия изображения в файл формата JPEG выглядит следующим образом. Первой ступенью компрессии является преобразование изображения в цветовой образ LAB, раскладывающий картинку на три независимых канала, один из которых (Lightness) выделен для сохранения значений интенсивности цветов, а два других (А и В) — для запоминания непосредственно цветовой информации. Причем данные о цветах сохраняются в виде шкалы, организованной по принципу непрерывного спектра. Вторя ступень — собственно компрессия: из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки размером 8x8 точек и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация — менее заметные оттенки. На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хаффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двух битной кодировкой. Декомпрессия файла JPEG происходит в обратном порядке.

Из всего сказанного можно сделать вполне очевидное заключение: JPEG оптимален для передачи фотографических изображений, а также картинок с большим количеством полутонов и цветовых переходов. Максимальное число цветов, которое может содержать изображение в формате JPEG, достигает 16 миллионов. Очевидно также, что чем выше степень компрессии такого изображения, тем ниже его качество. Web-мастеру, создающему для сайта иллюстрации в формате JPEG, необходимо помнить следующее правило.

ВНИМАНИЕ При изготовлении иллюстраций в формате JPEG рекомендуется избегать использования больших участков, заполненных одним цветом, во избежание появления на изображении постороннего цветового «шума» и «грязи».

Несоблюдение этого правила может повлечь за собой ряд неприятных последствий: например, картинка в формате JPEG, содержащая достаточно большое пространство, заполненное одним цветом, будет выглядеть на экране компьютера «грязно» и неопрятно, фон сохраненного в JPEG логотипа, «подогнанный» под фоновый цвет html-документа, «поплывет» при изменении свойств экранной палитры.

Существует несколько разновидностей стандарта JPEG. Среди них — формат JPEG Baseline Optimized, основанный на более совершенном алгоритме компрессии изображений. Недостатком данной реализации JPEG является то, что она не распознается целым рядом часто используемых приложений. Так называемый Progressive JPEG был оптимизирован специально для представления графики во Всемирной сети, изображения в этом формате сжимаются чуть лучше, чем в стандартном JPEG, но хуже, чем в JPEG Baseline Optimized. Отличительная особенность Progressive JPEG — возможность сохранять графику в чересстрочном режиме, как это реализовано в стандарте GIF.

СОВЕТ При работе со стандартом JPEG следует учитывать, что сжатию с наименьшей потерей качества поддаются изображения, сохраненные с высоким разрешением, от 150 до 300 dpi. В процессе обработки иллюстраций лучше всего сохранять картинку в формате TIFF и переводить в JPEG лишь готовый результат, поскольку каждое промежуточное сохранение файла JPEG на диск приводит к удалению второстепенной информации и ухудшению качества рисунка.

PNG

Описанная чуть ранее «криминальная история» с неожиданным изменением статуса алгоритма сжатия LZW с бесплатного на платный спровоцировала стремление пользователей избавиться от формата GIF, дальнейшая судьба которого становилась все более туманной. С этой целью во второй половине девяностых годов была создана инициативная группа программистов и исследователей, которую возглавил американский специалист по электронным технологиям Том Боутелл (Thomas Bowtell). Перед инициативной группой стояла нелегкая задача: разработать стандарт, который не только включал бы в себя все лучшие качества GIF, нo и превосходил бы его по всем характеристикам, оставаясь при этом совершенно бесплатным для пользователей. Основной областью применения данного формата должен был стать Интернет. Такой стандарт был создан и получил название Portable Network Graphics — PNG, хотя многие пользователи Всемирной сети придумали этой аббревиатуре иную расшифровку: Picture is Not GIF.

PNG, как и GIF, поддерживает interlacing (чересстрочность), но в отличие от последнего не только по горизонтали, но и по вертикали. Палитра PNG не ограничивается 256 цветами, данный формат позволяет создавать изображения с глубиной цвета до 48 бит. Весьма любопытные изменения внесены в режим прозрачности графики: PNG также поддерживает альфа-канал, по состоит он не из одного уровня, как альфа-канал файлов GIF, а из 254 уровней для каждого элемента изображения, с диапазоном прозрачности рт 0 до 99 %. Благодаря этому дизайнер получил возможность создавать картинки с переменной прозрачностью, например, логотипы, фон которых плавно сливается с фоновым цветом html-документа, каким бы тот ни был.

Помимо альфа-канала изображения PNG содержат так называемый блок описания гамма-коррекции. Под переменной «гамма» в данном случае подразумевается некая величина, выражающая зависимость яркости свечения каждой точки экрана пользователя от напряжения на электродах кинескопа, которое берется из файлов управления видеоподсистемой компьютера. Таким образом, при открытии изображения, созданного с помощью IBM-совместимой машины, на компьютере другого производителя, например на Apple Macintosh, в яркость цветопередачи вводится соответствующая поправка, и картинка отображается совершенно идентично на разных типах оборудования. Этим стандарт PNG еще более приблизился к основной идее Интернета единообразию отображения web-страниц на компьютерах от различных производителей.

Поскольку данный формат появился на свет относительно недавно, его поддерживают далеко не все броузеры, в отличие от GIF и JPEG, которые распознаются без проблем любыми программами, предназначенными для отображения графики. PNG поддерживается Microsoft Internet Explorer, начиная с версии 4.0, и Netscape Communicator версий 4.04 и выше. Старые броузеры отобразить картинку в формате PNG не смогут.

Оптимизация графических изображений

Несмотря на наличие довольно эффективных алгоритмов сжатия графической информации, при сохранении изображений GIF и JPEG на диск в файлы записывается определенное количество «лишних» данных, таких, например, как невидимые текстовые комментарии, автоматически добавляемые в заголовок файла некоторыми графическими редакторами, ссылки на разработчиков стандарта и соответствующего программного обеспечения и т. д. Все эти дополнения лишь увеличивают физический размер файла и не несут никакой полезной нагрузки. Чтобы сократить время загрузки иллюстраций в клиентский броузер, используют специальные методы оптимизации изображений.

Существуют два способа дополнительной компрессии графических файлов: с использованием специальных утилит, так называемых оптимизаторов графики, и в ручную. Рассмотрим оба варианта. А начнем мы, пожалуй, с небольшой и очень удобной программы-компрессора файлов GIF, разработанной МартиномХарингом (Martin Haring), которая называется GifClean32 (рис. 5.1).

Рме. 5.1. Внешний вид программы GifClean32

Данная программа хороша, прежде всего, тем, что позволяет гибко настраивать список тех компонентов GIF-изображений, которые подлежат удалению, в частности комментарии из самого файла и редко встречающиеся цвета из файловой палитры. Левая кнопка, расположенная на панели инструментов GifClean32,открывает файл GIF для компрессии и редактирования. При помощи следующей кнопки вы можете внести в открытый графический файл собственные комментарии, с помощью третьей кнопки — записать комментарии текущего изображения в отдельный текстовый документ, а посредством четвертой — сохранить само изображение в любую директорию на диске. Функции следующих четырех кнопок (слева направо): удаление всех комментариев из изображения, удаление малоиспользуемых оттенков, отображение извлекаемых комментариев на экране, отображение обрабатываемого изображения. И наконец, последние три кнопки (опять же слева направо) — это вызов справки о программе GifClean32,остановка компрессии после завершения обработки текущего файла и автоматическая перезапись оптимизированного изображения в файл с тем же именем, что и исходный. Все перечисленные процедуры продублированы в командной панели.

Оптимизаторы JPEG, в отличие от компрессоров для файлов стандарта GIF, в большинстве случаев рассчитаны на эксплуатацию под MS-DOS. Среди них —небольшая утилита JPEG Cleaner, предназначенная для удаления из изображений JPEG комментариев, записанных в файл различными графическими редакторами. Это позволяет сократить объем целевого файла на 5-10 %, а если иллюстрация создана с применением редактора Adobe Photoshop, то можно добиться сокращения ее объема вплоть до 45 % без потери качества. Программа имеет русскоязычный интерфейс и работает только с MS-DOS. При ее запуске под Windows возможно появление непредвиденных ошибок.

Для оптимизации графики следует скопировать все необходимые файлы JPEGв тот же каталог, где хранятся файлы jc.exe и jc.cfg, и выполнить из командной строки процедуру jc file.jpg или jc *.jpg. Программа самостоятельно найдет и удалит из предложенных ей файлов всю лишнюю информацию. Для изменения настроек программы необходимо отдать из командной строки DOS команду jc /с.

Универсальным программным продуктом для оптимизации графики, ориентированной на Интернет, является пакет WebGraphics Optimizer производства компании Plenio Software Solutions (рис. 5.2). Данную программу можно бесплатно загрузить с сайта разработчика (http://www.webOpt.com) в виде shareware-версии, доступной для свободного использования в течение 30 дней.

Рис. 5.2. Интерфейс программы WebGraphics Optimizer

WebGraphics Optimizer — 32-рязрядное приложение Windows, содержащее множество функций полноценного графического редактора. Эта программа умеет работать с 24 типами графических файлов, включая PNG, формат Adobe Photoshop PSD и даже MAC (Mac Paint), применяющийся на компьютерах Apple Macintosh.

Интерфейс WebGraphics Optimizer достаточно прост. На панели инструментов расположено всего лишь тринадцать кнопок и меню управления масштабом обрабатываемой картинки (рис. 5.3). Их функции таковы.

Риc. 5.3. Панель инструментов программы WebGraphics Optimizer

1 — создать новый проект WebGraphics Optimizer;

2 — открыть графический файл для редактирования;

3 — сохранить текущий проект;

4 — отменить последнюю операцию;

5 — скопировать выделенные данные в буфер обмена;

6 — вставить данные из буфера обмена;

7 — сделать снимок экрана;

8 — изменить масштаб отображения графики на экране;

9 — отобразить на экране окно инструментов;

10 — кнопки управления глубиной оптимизации изображения.

Окно инструментов включает в себя четыре функциональные вкладки, позволяющие оперировать с исходным изображением, редактируя его параметры. Вкладка Resize (рис. 5.4) дает возможность изменить геометрические размеры исходного изображения или его выделенного участка путем перемещения мышью «ползунков» для ширины (Width) и высоты (Height) картинки.

Рис. 5.4. Окно инструментов, вкладка Resize

Ha вкладке Adjust Color/Intensity (рис. 5.5) можно корректировать цвета, точнее их интенсивность. Рабочее поле данной вкладки содержит выпадающее меню со следующими опциями:

Brightness — управление яркостью;

Gamma correction корректировка гаммы;

Contrast — управление контрастностью;

Histogram contrast — настройка контраста гистограммы;

Stretch Intensity построчная интенсивность отображения иллюстрации;

Invert — инвертирование цветов;

Hue — коррекция оттенков;

Saturation — настройка насыщенности цветов;

Histogram equalize выравнивание цветовой гистограммы;

Fill color заполнение выделенного участка каким-либо цветом.

Рие. 5.5. Окно инструментов, вкладка Adjust Color/Intensity

Каждая опция данного меню, за исключением пунктов Stretch Intensity, Invert и Histogram equalize, имеет в нижней части окна собственный «ползунок» настройки, перемещая который пользователь может задать индивидуальные значения того или иного параметра.

Вкладка Filters содержит различные графические фильтры, повторяющие в основном аналогичные фильтры Adobe Photoshop:

Halftone — «Полутона»;

Blur/Sharpen «Размытие/Резкость»;

Posterize «Пастеризация» («Схематизация»);

Mosaic — «Мозаика»;

Emboss — «Чекан»;

Soften — «Смягчение полутонов»;

Oil Painting — «Масляная живопись»;

Reduce Noise — «Уменьшить шум»;

Add Noise — «Добавить шум»;

Intensity Detect — «Выделение интенсивности»;

Edge Detect — «Выделение краев»;

Line Detect — «Выделение строк».

Каждый из перечисленных фильтров имеет собственные параметры настройки, отображаемые в том же окне чуть ниже основного меню. И наконец, вкладка Special (рис. 5.6) служит для следующих манипуляций с исходным изображением: поворот картинки на любой угол (Rotate), деформация ее в горизонтальной проекции (Parallelogram) и зеркальное отражение по вертикали или горизонтали (Flip Image).

Рис. 5.6. Окно инструментов, вкладка Special

Все команды, вызываемые нажатием кнопок на панели инструментов, продублированы в панели команд. Более того, программа Web Graphics Optimizer позволяет работать с выделенными участками изображения, которые можно задать при помощи пункта системного меню Edit > Select Region, причем выделение фрагментов возможно в виде нескольких геометрических фигур: Rectangle (прямоугольник), Ellipse (овал), Rounded Rectangle (прямоугольник со скругленными углами) и, наконец, Freehand — произвольная фигура. Можно создать копию текущего изображения (команда меню Edit > Duplicdate Image), эта функция применяется в случае, когда пользователь желает поэкспериментировать с дублем, опасаясь испортить исходную картинку.

Основное рабочее поле программы Plenio WebGraphics Optimizer занимает разделенное вертикально окно, отображающее исходное изображение и его оптимизированную копию. В нижней части панели указаны размеры исходного и оптимизированного файла, а также коэффициент сэкономленного на компрессии дискового пространства в процентах. При выборе одного из пяти уровней оптимизации графики (функция вызывается нажатием кнопок, обозначенных на рис. 5.3 цифрой 10) для каждого дубликата картинки открывается новое окно, причем пользователь может выбрать тот вариант изображения, который в наибольшей степени устраивает его по качеству и размеру файла.

Процедура компрессии файлов JPEG вручную выглядит достаточно просто в графическом редакторе, позволяющем обрабатывать изображение, при сохранении картинки в файл обычно появляется меню, содержащее «ползунок» регулятора степени сжатия. Она отображается, как правило, в условных пунктах от 1 до 10, причем максимальному сжатию соответствует минимальное качество картинки. Здесь перед дизайнером стоит только одна задача: найти «золотую середину», компромисс между наименьшим объемом целевого файла и допустимым качеством изображения. В большинстве случаев такой компромисс удается отыскать экспериментальным путем, варьируя настройки компрессора. С GIF все обстоит гораздо сложнее. Оптимизировать файл по размеру с помощью встроенных функций графических редакторов не всегда возможно а использование внешних компрессоров зачастую ведет к нежелательной и неоправданной потере качества изображения. Происходит это, прежде всего, потому что все без исключения программы-оптимизаторы графики используют один алгоритм сжатия GIF для разных картинок, а именно метод удаления из палитры GIF неиспользуемых и малоиспользуемых цветов с подстановкой вместо них цветов, близких по оттенкам, что, как правило, портит изображение. Поэтому, если вы хотите, чтобы ваша страница выглядела качественно и профессионально, лучше всего оптимизировать GIF вручную. Это занимает чрезвычайно много времени и требует большого терпения, но для получения хорошего результата такой способ вполне оправдан.

Поскольку информация об изображении в файле стандарта GIF записывается построчно, чем однороднее будет ваше изображение по горизонтали тем компактнее получится целевой файл. Пример? Пожалуйста. Создадим изображение GIF, состоящее из семи цветов, соответствующих спектру радуги: красная полоса, оранжевая, желтая, зеленая, голубая, синяя и фиолетовая, причем все цветовые полосы иллюстрации разместим на картинке вертикально. Размер изображения составляет 210 на 210 пикселов. Как записывается информация о каждой строке такого рисунка в графический файл? Приблизительно так: «первая строка: тридцать точек красного цвета, тридцать точек оранжевого, тридцать точек желтого» и т. д. При сохранении изображения получится файл объемом 3,9 Кбайт. Теперь развернем картинку на 90° чтобы полосы стали горизонтальными (рис. 5.7). Логическая запись первой строки в этом случае звучит так: «двести десять точек красного цвета». Компактнее? Конечно: файл уменьшился почти в три раза, теперь его объем составляет1,34 Кбайт.

Рис. 5.7. Пример оптимизации файла GIF методом увеличения однотонных горизонтальных участков

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

Следует проследить также за тем, чтобы ваше изображение не содержало большого количества полутонов. Если на вашей картинке синий цвет плавно «перетекает» в белый фон посредством восьми полутоновых переходов голубого оттенка, не проще ли свести этот градиентный участок к трем оттенкам голубого? Теперь, отредактировав вручную палитру файла и удалив из нее все цвета, исчезновение которых не повлияет, по вашему мнению, на качество изображения(пункт Таблица цветов в меню Изображение редактора Adobe Photoshop), вы сократите время загрузки иллюстрации, а также сэкономите определенное количество килобайт на диске сервера, где будет размещаться сайт. Следует помнить, что создание прозрачного фона для GIF также способствует уменьшению его объема. Затем с помощью любой подходящей утилиты, широкий ассортимент которых представлен на серверах, предлагающих бесплатное программное обеспечение, можно удалить из файла все ненужные комментарии, и ваша картинка готова к публикации.

Включение графики в web-страницу

Интеграция графики в html-документ осуществляется с использованием команды <IMG>, синтаксис которой в общем виде записывается следующим образом:

<IMG SRC="URL" ALIGN="значение" WIDTH="значение" HIGHT="значение" ALT="текст">

В качестве параметра атрибута SRC указывается путь к изображению в виде либо полного URL (например, http://www.mysite.ru/images/picture.jpg), либо сокращенного URL с указанием пути к изображению на локальном сервере (например, . ./images/picture.jpg).

ВНИМАНИЕ Указывая URL картинки, внимательно следите за регистром символов, которыми вы записываете расширение файла. Некоторые графические редакторы, такие как Adobe Photoshop, по умолчанию сохраняют изображение в файл с расширением в заглавном регистре, напримерpicture. GIF. Иллюстрация с расширением в URL в строчном регистре(picture.gif) при отображении документа HTML в броузере просто не будет показана на странице.

С помощью атрибута ALIGN картинка позиционируется в документе HTML или в ячейке таблицы. Однако помимо традиционных значений данного атрибута —RIGHT, LEFT и CENTER, — совместно с тегом <IMG> можно использовать и другие параметры атрибута:

ТОР — изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка. Следует учитывать, что различные броузеры интерпретируют данное значение атрибута ALIGN по-разному, в связи с чем при использовании этого параметра возможна неадекватность отображения документа HTML в InternetExplorer и Netscape Navigator.

BOTTOM — изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки.

MIDDLE — центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки.

BASELINE — изображение выравнивается по условной «базовой линии». Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки таблицы. Именно с использованием значения ALIGN="baseline" удается добиться оптимального выравнивания иллюстраций для броузеров всех типов.

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

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

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

Вот пример применения тега <IMG>:

<IMG SRC="/images/sunset.jpg" ALIGN="CENTER" WIDTH="325" HEIGHT="215"А1Т="Красивый закат на берегу Карибского моря">

Для того чтобы превратить интегрированное в html-документ изображение в гиперссылку, необходимо воспользоваться комбинацией тегов <А> и <IMG>, записав ее следующим образом:

<А HREF="URL документа, на который организуется ссылка">

<IMG SRC="URL изображения" ALIGN-''значение" WIDTH="значение" HEIGHT="значение"

АLТ="Альтернативный текст" BORDER="значение"></A>

Как видите, особых отличий в написании этих команд от их традиционного синтаксиса в данном случае нет, за исключением того, что между тегами <А> и </А>вместо текстовой строки вставляется директива <IMG>. Атрибут BORDER управляет толщиной синей рамки, в которую заключается изображение, включенное в тег <А>, при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение BORDER равным нулю.

Отрывок кода HTML, позволяющего использовать изображение в качестве гиперссылки, приведен ниже:

<А HREF="/hobbie/index.html"> <IMG SRC="/images/hobbie.jpg" ALIGN="BASELINE"
WIDTH="315" HEIGHT="226" АLТ="Тематический раздел
"Мои увлечения" BORDER="0"></A>

Помимо описанных атрибутов тега <IMG> в команде вызова изображения иногда используют еще два: HSPACE и VSPACE. Данные атрибуты задают горизонтальные и вертикальные отступы от изображения в пикселах, которые необходимы, например, в случае, когда картинка помещается на web-странице рядом с текстом. HSPACE определяет величину незаполненного пространства справа и слева от картинки, VSPACE соответственно сверху и снизу.

Путешествуя по ресурсам Всемирной сети, вы наверняка неоднократно сталкивались с весьма распространенным дизайнерским приемом использованием графических изображений в качестве своеобразных карт (image map), в которых определенным участкам картинки соответствуют гиперссылки на различные ресурсы сервера. Такие карты можно создать с помощью тега <МАР>, о правилах применения которого мы поговорим в следующем уроке. Однако существует и другой способ реализации этого приема, к которому прибегают в тех случаях, когда включение в код HTML команды <МАР> по каким-либо причинам невозможно. Речь идет о рассечении целого изображения на отдельные фрагменты и «склеивании» его по принципу мозаики в невидимой таблице с назначением отдельным фрагментам картинки свойств гиперссылки при помощи директивы<А>. Иногда данный прием применяется не только при создании элементов, подобных image map, но и при подготовке рисованых заголовков или полей для размещения рекламного баннера.

Однако аккуратно «разрезать» изображение при помощи традиционных графических редакторов, причем так, чтобы готовая «мозаика» правильно вписывалась в таблицу, весьма трудно. В этой задаче web-мастеру помогает специальная утилита — фрагментатор графики ShoeString Picture Dicer (рис. 5.8). Она не только разделит картинку на составляющие так, как это необходимо дизайнеру, но еще и автоматически сгенерирует файл HTML с невидимой таблицей, «склеивающей» изображение в единое целое.

Picture Diser позволяет открывать графические файлы форматов DIB, GIF,JPEG, PCX, TGA и TIFF, сохраняя результат в виде файлов BMP, DIB, PCX,TGA, TIFF, GIF или JPEG. Формат вывода изображений можно задать в меню Output Format.

Рие. 5.8. Интерфейс программы Picture Dicer

После открытия картинки (функция File > Open File) программа спросит вас, в какой директории на винчестере сохранить результат обработки изображения.Левой кнопкой мыши вы можете установить границы вертикального разбиения картинки (они отмечаются на экране линиями с красными стрелками), а правой кнопкой — горизонтальные границы (линии с синими стрелками). Удалить неправильно установленную границу можно щелчком левой кнопки мыши над стрелкой соответствующей линии. После того как все границы размечены, необходимо выполнить команду File > Process Image. Picture Dicer автоматически фрагментирует изображение и сохранит результат в указанной вами директории.

GIF-анимация

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

Во Всемирной сети ныне применяют несколько видов анимации. Среди более или менее современных подходов следует упомянуть технологию Macromedia Flash, оперирующую векторными графическими объектами, и технологию Java, когда графика и текст перемещаются посредством включения в html-документспециального кода, обрабатываемого клиентским броузером совместно с кодом самой web-страницы. Оба эти варианта не лишены целого ряда недостатков. Прежде всего, это пропорциональное увеличение времени загрузки html-доку-мента, которое к тому же чрезвычайно плохо поддается регулировке. Болеетого, для отображения элементов flash требуется специальная надстройка для пользовательского броузера, а скрипт Java не будет обработан броузерами старых версий и броузерами, в которых отключена поддержка компиляции этого языка. Обе технологии подробно рассматриваются в соответствующих справочниках и журнальных публикациях, поэтому я остановлюсь на наиболее традиционном способе передачи движения на web-странице, а именно — на GIF-анимации.

Вскоре после появления стандарта Compu Serve GIF было замечено, что принцип записи графической информации в файл этого формата позволяет помещать под одним заголовком последовательность отдельных кадров, которые можно чередовать на экране с определенным временным интервалом. Именноэта особенность файлов GIF, точнее — модификации данного стандарта, известной под названием GIF89a, и легла в основу анимации, исторически первой появившейся в Интернете. Для того чтобы пользователи Всемирной сети могли наблюдать GIF-анимацию, не требуется какого-либо дополнительного программного обеспечения, помимо любого стандартного броузера, поддерживающего отображение графики.

Процесс подготовки анимированного GIF можно условно разделить на несколько этапов: создание отдельных кадров, генерация движущегося изображения и оптимизация целевого файла. Базовые кадры формируются в любом графическом редакторе и сохраняются на диске в формате GIF, их изготавливают приблизительно по такому же принципу, по которому создается обычная мультипликация (рис. 5.9). Рекомендуется заранее нарисовать соответствующий вашей задумке шаблон — файл, содержащий изображение фиксированного размера суже нанесенным на него неподвижным фоном, однотонным или текстурным, поверх которого будут перемещаться движущиеся объекты. При подготовке рисунков следует обращать внимание на то, чтобы подвижный элемент смещался в каждом кадре на равное расстояние и именно в том направлении, в котором необходимо. Если, например, какой-то объект должен перемещаться строго по горизонтали, но в одном из кадров вы разместите его чуть ниже или выше первоначального положения, траектория его движения получится ломаной. Для того чтобы избежать этого, используют имеющиеся в составе большинства профессиональных графических редакторов линейки и направляющие. Если фон будущей анимации предполагается сделать однотонным, можно нанести на ранее созданную заготовку шаблонную сетку, которая по окончании работы без труда удаляется замещением соответствующей цветовой маски фоновым цветом.

Рис. 5.9. Подготовка кадров GIF-анимации

Уже в процессе работы над исходными кадрами следует подумать о сокращении размера будущего файла. Во-первых, постарайтесь не включать в анимациюбольшое количество цветов: чем меньше их число, тем меньше килобайт необходимо будет впоследствии перекачать пользователю с сервера, на котором размещен ваш сайт. Однако простого сокращения числа оттенков, составляющих изображение, как правило, недостаточно: необходимо уменьшить соответствующее значение в используемой файлом цветовой палитре. Это лучше делать путем редактирования палитры вручную, а не с помощью стандартных средств, поскольку в этом случае автоматическое уменьшение, скорее всего, приведет к некорректной замене некоторых оттенков участком из нескольких используемых цветов. Необходимо на глаз определить количество составляющих рисунок оттенков, при переводе изображения в индексированный формат указать эту цифру в параметрах сохраняемого файла (пункт Цвета диалогового окна Индексированный цвет в меню Изображение/Режим/Индексированные цвета редактора AdobePhotoshop), после чего откорректировать элементы палитры (например, с помощью инструмента пипетка в меню Изображение/Режим/Таблица цветов того же редактора). Использование прозрачного фона также уменьшает размер целевого файла.

Программа Ulead GIF Animator

Анимация собирается из готовых кадров в любой предназначенной для этого специализированной программе, например, с помощью наиболее популярного и удобного инструмента — условно-бесплатной программы Ulead Gif Animator, которую можно загрузить с сайта фирмы-разработчика (http://www.ulead.com).Gif Animator позволяет не только создавать новое анимированное изображение, но и генерировать его из импортированных видео файлов формата AVI, множество дополнительных фильтров позволяют добиться огромного количества различных визуальных эффектов, а встроенный оптимизатор графики — сократить размер целевого файла до возможного минимума. Имеется возможность задавать различные временные интервалы между сменой кадров, записывать в файл комментарии и добавлять произвольный текст.

Оптимизация GIF-анимации достигается удалением из изображения неиспользуемых цветов и замещением статичных участков картинки прозрачным фоном(рис. 5.10). Иными словами, после оптимизации картинки все неподвижные фрагменты изображения остаются только на первом кадре, а остальные кадры содержат лишь динамические объекты, наложенные на прозрачную подложку. Существует множество программ для сжатия анимированной графики, их можно найти на серверах, предлагающих бесплатное программное обеспечение. Однако опыт показывает, что гибко настраиваемый оптимизатор, интегрированный в Ulead Gif Animator, позволяет добиться в этом наилучшего результата.

Рие. 5.10. Замещение статичных участков прозрачным фоном в файле анимации

Внешний вид программы Ulead Gif Animator версии 4.0 показан на рис. 5.11.

Рис. 5.11. Интерфейс программы Ulead Gif Animator .Рассмотрим элементы управления данной программой более подробно (рис. 5.12).

Рис. 5.12. Элементы управления программой Ulead Gif Animator

Стандартное меню

File — работа с файлами

New — создать новый файл;

Open GIF — открыть готовый файл в формате GIF;

Open Video — открыть готовый файл в форматах Microsoft AVI или Autodeskanimation;

Animation Wizard — разработка GIF-анимации из готовых файлов с помощью специального мастера;

Restore — отмена внесенных изменений;

Save — сохранить файл в формате GIF;

Save AS — сохранить файл в формате GIF под другим именем;

Optimization Wizard — мастер оптимизации, автоматически уменьшает размерыфайла;

Batch process — оптимизация в пакетном режиме;

Export — сохранение GIF-файла в виде кода HTML или видеофайла;

Preferences — свойства программы (общие настройки);

Recent — вызвать на редактирование файл, который открывался последним.

Меню Edit — редактирование файлов

Undo moving — отменить перемещение;

Redo moving — повторить перемещение;

Cut — вырезать в буфер обмена;

Сору — скопировать в буфер обмена;

Copy HTML code — копировать в код HTML;

Paste comment — вставить комментарий;

Delete — удалить;

Select all — выделить все;

Invert selection — инвертировать выделение;

Duplicate — создать копию изображения как еще одного кадра анимации;

Crop — создать копию выделенной части изображения как еще одного кадраанимации;

Resample — изменить размеры кадра;

Rotate and flip — развернуть изображение на определенный угол и создать зеркальное отражение кадра;

Regenerate frames — регенерация кадров;

Global attribute change — смена общих атрибутов изображения.

Меню View — просмотр изображения

Actual view — просмотр в масштабе 1:1;

Zoom in — просмотр в увеличенном виде;

Zoom out — просмотр в уменьшенном виде;

Start preview — предварительный просмотр движущегося изображения в окнепрограммы;

Full screen preview — предварительный просмотр изображения в полноэкранномрежиме;

Layer panel — показать/убрать панель слоев;

Thumbnail size — изменить размер изображения для предварительного просмотра;

Previous image — вернуться к предыдущему изображению;

Next image — перейти к следующему изображению;

Properties — ввести свойства изображения (размеры и скорость загрузки);

Standard toolbar — показать/убрать стандартную панель инструментов;

Attribute toolbar — показать/убрать панель атрибутов файла;

Palette toolbar — показать/убрать панель палитры;

Status bar — показать/убрать панель статуса.

Меню Layer — слои анимации

Add blank image — добавить пустой кадр;

Add image — добавить изображение;

Add video — добавить видео;

Add comments — добавить комментарий;

Add banner text — добавить текст поверх изображения;

Add simple transition — смена кадров с эффектом типа «жалюзи»;

Add color animation — появление цветов в заданном порядке;

Add cube effect — смена кадров с эффектом «вращение куба»;

Add scrolling — смена кадров с эффектом «вращение»;

Move layer up — передвинуть слой вверх;

Move layer down — передвинуть слой вниз;

Reverse order — поменять порядок кадров.

Меню Filters — фильтры

About filters — информация о фильтрах, имеющихся в программе.

Меню Video F/X

Включает следующие анимационные графические фильтры.

3D

Gate 3D — эффект «открывание ворот».

Build

Diagonal build — построение изображения по диагонали.

Clock

Sweep clock — смена изображения по (против) часовой стрелки.

F/X

Diamond a-f/x — смена кадров в форме граней алмаза;

Iris f/x — смена кадров в форме раскрывающегося цветка;

Mosaic f/x — смена кадров в форме мозаики;

Power off f/x — смена кадров в виде постепенного гашения экрана.

Film

Flap b-film — смена кадров в виде постепенного «отрывания» частей изображения;

Progressive film — смена кадров в виде постепенного замещения частей изображения;

Turn page film — смена кадров в виде переворачивания страницы.

Peel

Turn page peel — смена кадров в виде переворачивания страницы.

Push

Run and stop push — смена кадров в виде «выталкивания» изображения с экрана.

Roll

Side roll — смена кадров в виде «скатывания» изображения за пределы видимости.

Slide

Bar slide — смена кадров в виде «раздвигания» изображения.

Stretch

Cross zoom-stretch — смена кадров в виде увеличения масштаба изображения.

Wipe

Star wipe — вырезание изображения в форме звезды.

2D mapping

Crop — рамка.

Camera lens

Gradient — изменение оттенков цвета;

Mirror — эффект «отражение в воде (рябь)»;

Zoom motion — приближение изображения в движении.

Dark room

Hue, saturation — смешение цветов.

Natural painting

Charcoal — рисунок углем.

Special

Add noise — добавление «шумовых» пикселов;

Wind — эффект «флаг на ветру»;

About video f/x — меню содержит информацию о видеоэфектах.

Панель инструментов

Add blank image — добавить пустой кадр;

Add image — добавить изображение;

Add video — добавить видео;

Add comments — добавить комментарий;

Move layer up — передвинуть слой вверх;

Move layer down — передвинуть слой вниз;

Preview in Internet Explorer — предварительный просмотр в MS Internet Explorer;

Preview in Netscape Navigator — предварительный просмотр в Netscape Navigator;

Preview in custom browser — предварительный просмотр в любом другом броузере, указанном пользователем в настройках программы.

Панель атрибутов

Image title — наименование изображения;

How to remove — описание правил удаления из изображения лишних компонентов;

Global attribute change — смена общих атрибутов изображения;

Width — ширина изображения;

Height — высота изображения;

Interlace — чересстрочная развертка;

Transparent index — степень прозрачности изображения;

Local palette — применить местную (собственную) палитру;

Wait for user input — ожидать действий пользователя (с).

Панель палитры

Save palette — сохранить палитру пользователя;

Load palette — загрузить палитру пользователя;

Add color — добавить цвет в палитру;

Delete color — удалить цвет из палитры;

Replace color — заменить один цвет в палитре на другой;

Gradient — градиент;

Sort by — тип сортировки;

R — количество красного в цвете;

G — количество зеленого в цвете;

В — количество синего в цвете;

ххх colors — количество цветов, использованных в палитре (от 2 до 256).

Панель статуса

На панели статуса отображаются комментарии к производимым пользователем действиям.

Закладки

Compose — компоновка изображения (произведение изменений в файле);Edit — редактирование изображения;

Crop — создание копии выделенной части изображения как еще одногб кадраанимации;

Paint tool — инструмент «карандаш»;

Resample — изменение размеров изображения;

Flip horizontal — перевернуть изображение по горизонтали;

Flip vertical — перевернуть изображение по вертикали;

Magic wand tool — волшебная палочка (выделение части изображения);

Polygon tool — рисование нестандартных фигур;

Rotate left 90° — развернуть рисунок на 90° влево;

Rotate right 90° — развернуть рисунок на 90° вправо;

Erase tool — инструмент «ластик»;

Zoom in — увеличить изображение;

Zoom out — уменьшить изображение;

Actual view — просмотр в масштабе 1:1.

Optimize — оптимизация изображения

Presets — выбор алгоритма оптимизации;

Save presets — сохранение пользовательского алгоритма оптимизации;

Delete presets — удаление текущего алгоритма оптимизации;

Optimize now — оптимизировать сейчас (запуск оптимизации);

Download time is calculated based on xxx kbps — скорость загрузки изображения,с расчетом на которую производится оптимизация;

Wizard — оптимизация с помощью мастера;

Normal/advanced — просмотр дополнительных параметров оптимизации;

Number of color — количество цветов в палитре (остальные цвета подлежат удалению в процессе оптимизации);

Use palette — выбор используемой палитры;

Preview — предварительный просмотр готового GIF-изображения.

Как видим, разработчики постарались сделать интуитивно понятную, максимально простую в освоении и надежную программу, являющуюся вместе с тем мощным средством разработки анимированной графики. Можно смело сказать, что им это удалось. Ulead Gif Animator позволяет создавать «на лету» как сложные клипы, так и простейшую анимацию, состоящую буквально из двух кадров, с использованием широкого ассортимента входящих в комплект поставки программы визуальных эффектов.

Практикум

Настало время применить полученные вами навыки на практике. Для этого с помощью любого графического редактора, позволяющего оперировать текстурными заливками, например пакета Corel Draw, подготовьте простой файл, заполненный однородной текстурой (рис. 5.13). Сохраните этот файл на диске в директории C:\MySite\Images под именем background.gif. Поместите в ту же папку какую-либо иллюстрацию, например вашу отсканированную фотографию, назвав данный файл mypicture.jpg.

Рис. 5.13. Файл bockground.gif

Теперь откройте файл index.html для редактирования и дополните тег <BODY> атрибутом BACKGROUND. Данная строка будет выглядеть следующим образом:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#OOOOFF" VLINK="#800080"ALINK="#FF0000" BACKGROUND="Images\background.gif">

После тегов <Н1> </Н1>, определяющих стиль заголовка, добавьте еще одну строку кода:

<IMG SRC="C:\MySite\Images\mypicture.JPG" ALIGN="LEFT" WIDTH="150"HEIGHT="223" HSPASE="5" А1_Т="Это моя фотография">

Таким образом, код данного участка нашего html-документа будет иметь следующий вид:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><HTML><HEAD>

<TITLE>Mofl домашняя страничка</TITLE></HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"ALINK="#FF0000" BACKGROUND="Images\background.gif">

<H1 ALIGN="CENTER"> ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!</Н1><BR>

<IMG SRC="C:\MySite\Images\mypicture.JPG" ALIGN="LEFT" WIDTH="150"HEIGHT="223" HSPASE="5" ALT="Этоo моя фотография">

<P ALIGN="JUSTIFY">

и т. д.

Сохраните внесенные в документ изменения и откройте вашу страничку в броузере (рис. 5.14).

Рис. 5.14. Web-страница после внесения изменений в код HTML

Как видите, ваша страница приобрела приятный текстурный фон, в левой части экрана появилась фотография ее владельца. Добавив отображение фона во все остальные документы сайта, сохраните их на диске, после чего заново опубликуйте измененные web-страницы в Интернете, не забыв перенести на сервер используемые вами графические изображения — файлы background.gif иmypicture.jpg.

Что нового мы узнали?

В этом уроке мы изучили:

  • Существующие файловые форматы, применяемые для представления графики в сети Интернет.
  • Методы интеграции изображений в документ HTML.
  • Приемы, позволяющие осуществить фрагментацию изображений.
  • Принципы создания GIF-анимации.
  • Правила работы с программой Ulead GIF Animator.


Урок 6
Специальные возможности HTML

  • МЕТА-определители
  • Формы
  • Типы элементов формы
  • Таблицы
  • Простые таблицы
  • Стандартная таблица с текстовыми ячейками
  • Таблица с параллельными текстами
  • Представление таблиц, элементы которых занимают несколько строк или столбцов
  • Вложенные таблицы
  • Фреймы
  • Элемент <МАР>
  • Практикум
  • Что нового мы узнали?

В четвертом уроке вы изучили некоторые теги и директивы языка разметки гипертекста. Разумеется, описанные команды отнюдь не исчерпывают весь спектр возможностей HTML, и теперь мы рассмотрим еще несколько тегов, которые могут быть полезны вам при создании web-страниц.

МЕТА-определители

МЕТА-определители — это элементы заголовков HTML-документов, несущие исключительно служебные функции. Они не влияют на отображение web-страниц в броузере и не могут каким-либо образом изменить их содержимое. По большому счету, МЕТА-определители описывают свойства документа и потому зачастую игнорируются web-дизайнерами, совершенно, кстати, незаслуженно. Очевидно, что ни в одном языке программирования ни одна команда или директива не создается «просто так», все они несут какую-то функциональную нагрузку. МЕТА-определители также могут быть весьма полезны. Об их пользе и пойдет речь в данном разделе урока.

МЕТА-определители записываются непосредственно в заголовке документа HTML между тегами <HEAD> и </HEAD> после тега <TITLE>. Существуют два разряда МЕТА-определителей, различающихся атрибутами и имеющих, соответственно, разное назначение. К первому разряду относятся определители, использующие атрибут NAME. Синтаксис их записи в общем случае таков:

<МЕТА NAME=''значение1" CONTENT="значение2">

Первый МЕТА-о пределитель, который мы рассмотрим применительно к данному классу команд, записывается в коде html-документа следующим образом:

<МЕТА NAME="description" CONTENT="краткое описание содержимого вашего сайта">Эта директива применяется для облегчения и ускорения процесса индексации вашего ресурса поисковыми машинами. Дело в том, что большинство автоматических поисковых серверов, подобных Alta Vista (http://www.altavista.com) или Yandex (http://www.yandex.ru), оснащены специальными программными модулями, отыскивающими во Всемирной сети web-страницы, соответствующие введенному пользователем тематическому запросу. В этом случае в динамически создаваемый поисковым сервером файл отчета включается либо информация, встречающаяся первой в тексте документа HTML, либо данные, указанные в теге МЕТА. Таким образом, наличие МЕТА-определителя многократно увеличивает шансы вашего ресурса попасть в первую десятку сайтов, которые «найдет» поисковый сервер по требованию пользователя. Разумеется, включение в код вашей web-страницы подобной директивы не гарантирует автоматической индексации страницы поисковым сервером. Для этого необходимо предпринять еще целый ряд действий, например, зарегистрировать ваш сайт в базе данных поисковой машины (о том, как это делается, мы побеседуем в одиннадцатом уроке).

Следующая директива, которую я рекомендовал бы вам поместить в заголовок своей web-страницы, выглядит так:

<МЕТА NAME="keywords" СОМТЕМТ="перечень необходимых ключевых слов через запятую">

Данный тег содержит перечисление ключевых слов, на которые, по вашему мнению, должны «реагировать» поисковые машины, включая ваш сайт в файл отчета. Не рекомендуется указывать в нем более тридцати ключевых слов подряд, равно как и записывать в МЕТА-определителе с параметром «description» описание сайта объемом с «Войну и мир», поскольку многие поисковые серверы имеют ограничения на количество индексируемых слов.

СОВЕТ Поскольку ряд поисковых машин не учитывает регистр, в котором записаны ключевые слова, рекомендуется указывать в поле CONTENT оба варианта их записи: как в строчном, так и в заглавном регистре. Не следует также излишне рассчитывать на абсолютную грамотность пользователей Интернета, и если какое-либо из используемых вами ключевых слов имеет несколько возможных вариантов написания, лучше использовать их все (например, web-дизайн, webдизайн, вэб-дизайн, веб-дизайн, вэбдизайн, вебдизайн). Хорошим тоном считается указывать в атрибуте CONTENT описание сайта на русском и английском языках.

Чтобы пояснить механизм обработки МЕТА-определителей поисковыми машинами, приведу простой пример. Предположим, ваш html-документ содержит следующие МЕТА-теги:

<HEAD>

<ТIТLЕ>Разведение белых медведей в домашних условиях</ТIТLЕ>

<МЕТА NAME="description" СОNTENT="Сайт. посвященный особенностям разведения

белых медведей в домашних условиях средней полосы России">

<МЕТА NAME="keywords" CONTENT="белые медведи. БЕЛЫЕ МЕДВЕДИ, медведь. МЕДВЕДЬ.

разведение. РАЗВЕДЕНИЕ, животные. ЖИВОТНЫЕ">

</HEAD>

Теперь допустим, что пользователь, обратившись к ресурсам поисковой машины, набрал в поле тематического запроса фразу «белые медведи» и нажал кнопку «Искать». Спустя несколько секунд среди списка других ресурсов Интернета, посвященных той же тематике, поисковый сервер выдаст следующий результат:

  • Разведение белых медведей в домашних условиях.
  • Сайт, посвященный особенностям разведения белых медведей в домашних условиях средней полосы России.
  • http://www.Bauj_aдpec.ru.

Приблизительно ту же функцию играет МЕТА-тег, правила записи которого приведены ниже. Точно указать различия в механизме его действия по сравнению с предыдущими МЕТА-определителями трудно, поскольку различные источники дают на этот счет весьма несхожую, а иногда и просто противоречащую информацию. Можно предположить, что данная директива рассчитана на обработку поисковыми серверами, имеющими отличный от стандартного алгоритм индексации html-документов:

<МЕТА NAME="abstract" СОNTENT="описание содержимого сайта и перечень ключевых выражений через запятую">

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

<МЕТА NAME="subject" CONTENT="главная тема вашего сайта, выраженная одним-двумя словами">

Данный МЕТА определитель указывает на тему, которой посвящена ваша страница, что опять-таки важно для регистрации сайта некоторыми поисковыми серверами.

<МЕТА NAME="page-type" CONTENT="Тип к которому относится страница">

Дать какие-либо конкретные рекомендации о правилах записи этого МЕТА-тега невозможно, поскольку каждая поисковая машина использует собственный классификатор ресурсов. В общем случае данная директива применяется с целью автоматического занесения ссылки на ваш сайт в какую-либо тематическую рубрику поискового сервера. Наиболее «нейтральным», на мой взгляд, вариантом представления поля CONTENT указанного МЕТА-определителя является фраза «information resource».

<МЕТА NAME="distribution" CONTENT="Global">

<МЕТА NAME="rating" CONTENT="General">

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

<МЕТА NAME="title" CONTENT="3aголовок web-страницы"><МЕТА NAME="page-topic" CONTENT="3aголовок web-страницы">

Эти МЕТА-определителй предназначены для поисковых машин, не умеющих работать с тегом <TITLE>. В поле CONTENT данных директив можно скопировать текстовое содержимое, записанное вами в заголовке страницы.

<МЕТА NAME="site-created" CONTENT="Дата">

Указанный МЕТА-определитель декларирует дату создания web-сайта, которая иногда отображается в файле отчета некоторых поисковых серверов в качестве дополнительной информации о ресурсе. Дата записывается в формате МЕСЯЦ-ДЕНЬ-ГОД с ведущим нулем, например, 04-08-2000.

<МЕТА NAME="expires" CONTENT="Дата">

Предполагаемая дата закрытия сайта, после которой упоминание о нем будет удалено из базы данных поискового сервера. Дата записывается в том же формате, что и дата создания страницы.

<МЕТА NAME="revisit" CONTENT="N days">

<МЕТА NAME="revisit-after" CONTENT="N days">

Эти теги несут абсолютно идентичную функциональную нагрузку и указывают поисковому серверу, через сколько дней следует вновь обратиться к вашему ресурсу для его переиндексации. Как правило, данные МЕТА-определители применяют, если страница регулярно обновляется, причем эти обновления затрагивают ее тематическое содержание, указанное в других МЕТА-тегах. В такомслучае включением данной команды в код HTML вы можете избежать утомительной процедуры повторной регистрации своего сайта в поисковых машинах сервер сделает это автоматически. Вместо ключа N в поле CONTENT данной команды подставляется любое целое число от 1 до 30.<МЕТА NAME-"robots" CONTENT-"NOINDEX">

Эта директива запрещает поисковым машинам индексировать данную web-страницу.

<МЕТА NAME="robots" CONTENT-"NOFOLLOW">

Тег запрещает поисковому серверу следовать по гиперссылкам, установленным на данной странице.

<МЕТА NAME-"content-language" CONTENT-"язык">

Эта директива декларирует язык, на котором представлена опубликованная насайте информация. В поле CONTENT вносится название языка, написанное в английской транскрипции, например «russian» или «english». Следует помнить, что при внесении ссылки на страницу в базы данных некоторых англоязычных поисковых серверов упоминание о русском языке в данном МЕТА-теге может повлечь за собой отказ от регистрации сайта.

<МЕТА NAME-"resource-type" CONTENT-"document">Указание на тип вашего ресурса. Рекомендуется оставить без изменений.

<МЕТА NAME-"audience" CONTENT-"al1">

МЕТА-тег, определяющий аудиторию вашего сайта. Владельцы порносайтов, не заинтересованные в том, чтобы среди их посетителей встречались несовершеннолетние лица, записывают в качестве значения поля CONTENT параметр «adults», однако необходимо учитывать, что большинство современных поисковых систем, за исключением специализированных, не индексируют страницы с таким параметром.

<МЕТА NAME="robots" CONTENT-"1ndex,air>

Указания на правила регистрации вашего ресурса поисковыми серверами. Например, при указании в поле CONTENT параметра «all» будут проиндексированы все документы сайта, при указании параметра, «index» — только индексные страницы.

<МЕТА NAME="Copyright" CONTENT=''Имя вебмастера. Copyright 2000">

<МЕТА NAME="Autor" CONTENT=''Имя вебмастера. Copyright 2000">

Данные МЕТА-теги декларируют ссылку на авторские права, принадлежащие разработчику проекта. Эта информация отображается в файле отчета некоторых поисковых машин.

<МЕТА NAME="reply-to" CONTENT="aдрес электронной почты">

Указание на адрес электронной почты автора проекта. Иногда показывается в файлах отчета поисковых серверов.

<МЕТА NAME="Owner" СОМТЕМТ="Название компании или имя владельца">

<МЕТА NAME="Address" CONTENT="Адрес офиса">

<МЕТА NAME="Owner-type" CONTENT="corporation, company/small или personal">

Информация о владельце ресурса. В поле CONTENT первого МЕТА-определителя заносится полное название фирмы-владельца ресурса или имя владельца,если он — частное лицо, второй тег содержит адрес офиса, по которому можно обратиться за дополнительной информацией, третий указывает на тип фирмы: corporation — для больших корпораций, company/small — для малых компаний и, наконец, personal — для частных предпринимателей и физических лиц.

<МЕТА NAME="Publisher-name" ОМЕМТ="Название компании или имя лица, опубликовавшего сайт">

<МЕТА NAME="Publisher-type" CONTENT="corporation, company/small или personal"><МЕТА NAME="Publisher-location" CONTENT="RU">

Для первых двух тегов справедливо все то же самое, что и для предыдущих МЕТА-определителей, за исключением того, что они представляют информацию не о владельце ресурса, а о том, кто его опубликовал. В общем случае издатель web-страницы не обязательно должен быть ее владельцем, например, когда какая-либо фирма заказывает себе сайт у стороннего web-мастера или дизайн-агентства. Как раз на такую ситуацию и рассчитаны данные директивы. В поле CONTENT МЕТА-тега с именем «Publisher-location» заносится обычно обозначение домена первого уровня страны издателя сайта или аббревиатура US, если он находится в США.

<МЕТА NAME="home-url" CONTENT="URL">

Здесь указывается адрес ресурса в сети Интернет, который издатель сайта считает своей домашней страничкой. Обычно этот тег используется для представления URL разработчика web-сайта, если сам сайт был создан для сторонней фирмы или частного лица. По указанной в МЕТА-определителе ссылке потенциальные заказчики смогут найти разработчика данного ресурса.

<МЕТА NAME="Generator" CONTENT="Название программы">

Редкий и, пожалуй, единственный в своем роде пример абсолютно бесполезного тега, не несущего ни малейшей смысловой нагрузки. Данный МЕТА-определитель был придуман разработчиками html-редакторов для рекламы собственных программных продуктов. Практически все программы, предназначенные для верстки web-страниц, вставляют этот тег в код HTML автоматически, не спрашивая разрешения у пользователя. В принципе наличие этой команды не наносит html-документу ни малейшего вреда, но и пользы от нее тоже никакой. Можно оставить такой МЕТА-тег в составе вашего сайта только из тщеславия, особенно если вы укажете в качестве названия программного пакета, с помощью которого вы создавали свою страницу, программу Notepad. Тогда пользователи, решившие прочитать код вашего документа HTML, будут несказанно обрадованы тем, что вы готовили свой проект вручную, с помощью Блокнота Windows, без сомнения посчитав вас «крутым» web-дизайнером.

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

<МЕТА HTTP-EQUIV="Refresh" CONTENT="N;

URL=http://www.имя_сайта.ги/имя_страницы.html">

Включение такого тега в заголовок web-страницы обеспечит автоматический переход броузера по указанному в поле CONTENT адресу через N секунд. Данная функция, называемая «редиректом», или «перенаправлением» пользовательского броузера на какой-либо ресурс, применяется в основном тогда, когда ваш сайт сменил адрес, переместился на другой хост. В этом случае на сервере со старым адресом размещается файл index.html, содержащий описанную выше директиву и соответствующую поясняющую надпись, например: «Извините, наш сайт переехал по адресу <адрес>. Через несколько секунд данная страница будет загружена автоматически». Иногда такая команда применяется также для автоматического переключения пользователя с заглавной («splash») на стартовую страницу сервера. Если этот МЕТА-тег записать в виде <МЕТАHTTP-EQUIV="Refresh" CONTENT="N">, текущая web-страница будет автоматически перезагружаться в броузер каждые N секунд.

<МЕТА HTTP-EQUIV="Expires" CONTENT="Tue. 02 Jan 1996 01:00:00 GMT">

МЕТА-тег, определяющий дату «устаревания» страницы для протокола HTTP. Зачастую в данной директиве указывают заведомо устаревшую дату: такой подход позволяет избежать кэширования документа на диск.

ПРИМЕЧАНИЕ Большинство броузеров сохраняют загружаемые из Интернета html-до-кументы в специальную папку на жестком диске пользовательского компьютера и при повторном обращении к сайту открывают эту web-страницу уже с винчестера, что позволяет значительно сократить время ее считывания. Данная процедура называется «кэшированием». Избежать нежелательного кэширования можно указанным выше способом.

<МЕТА HTTP-EQUIV="Content-type" CONTENT="text/html; charset=KOI8-R">

С помощью этого тега осуществляется жесткая установка так называемого «чарсета», или пользовательской кодировки страницы. Встретив в заголовке документа такую команду, пользовательский броузер автоматически переключается на заданную в теге кодировку. Использовать данный МЕТА-определитель следует крайне осторожно. Одной из самых распространенных ошибок начинающих web-дизайнеров является представление на сервере html-документов не в той кодировке, которая указана в МЕТА-теге. Результатом становится полная нечитаемость подобной страницы в броузере, а сама эта ошибка считается в среде web-мастеров верхом непрофессионализма. Более того, практически все современные http-серверы поддерживают функцию автоматического изменения кодировки документов в зависимости от установленных в пользовательском

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

Формы

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

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

Итак, общий вид записи директивы вызова формы можно представить в следующем виде:

<FORM ACTION="URL" МЕТНОD="значение">

Содержание формы, включающее все используемые элементы

</FORM>

В качестве параметра атрибута ACTION в кавычках указывается строка вызова CGI-скрипта, который использует данная форма, например, "http://www.myserver.ru/cgi-bin/имя_сценария.cgi". Значение атрибута METHOD устанавливает метод передачи данных из формы на сервер: «GET» с помощью стандартного интерфейса HTTP или «POST» — по каналам электронной почты. Иногда совместно с тегом <FORM> применяют атрибут ENCTYPE, описывающий механизм кодирования содержимого формы перед отправкой.

Содержание формы описывается тегом <INPUT>, запись которого в общем виде выглядит следующим образом:

<INPUT ТУРЕ="тип элемента" NAME''имя" VALUE="строка" CHECKED="параметр"
SIZE="целое число" MAXLENGTH="целое число"
ALIGN="значение">

Возможные значения атрибута ALIGN вам уже знакомы, он определяет положение элементов формы на web-странице. Атрибут MAXLENGTH определяет максимально возможную длину текстового поля в символах для полей ввода текста, аналогично атрибут SIZE определяет его видимую на экране длину в пикселах. Атрибут CHECKED устанавливает выделенный объект из нескольких в случае, если значением атрибута TYPE является RADIO или CHECKBOX. Атрибут VALUE указывает первоначальное значение текущего поля, а NAME задает уникальное имя для каждого элемента формы, записанное латиницей. Это имя служит для идентификации данных, передаваемых серверу из формы. И наконец, атрибут TYPE задает типы самого элемента, которые мы и рассмотрим подробнее.

Типы элементов формы

TYPE="TEXT"

Представляет собой одностроковое текстовое поле (рис. 6.1), физический размер которого можно установить с использованием атрибута SIZE, а первоначально введенную в него символьную последовательность — с помощью атрибута VALUE.

Рис. 6.1. Элемент формы TEXT

Примером использования данного элемента в коде HTML может служить следующая строка:

<INPUT TYPE='TEXT" SIZE="40" NAME="user_name" VALUE-''Введите ваше имя">TYPE="PASSWORD"

Тип, полностью аналогичный предыдущему, за исключением того, что вводимая пользователем в текстовое поле информация будет отображаться на экране символами «*», чтобы скрыть текст от постороннего зрителя.

TYPE="CHECKBOX"

Элемент, представляющий собой простую форму выбора, принимающую одно из двух устойчивых состояний: «отмечено» — «не отмечено» (рис. 6.2).

Рис. 6.2. Элемент формы CHECKBOX

Данный элемент оперирует так называемыми булевыми переменными, то есть переменными, каждая из которых может принимать значение «ИСТИНА» или «ЛОЖЬ». Каждый элемент формы CHECKBOX создает логическую пару значений вида «имя_элемента—состояние» и передает их на сервер. Для установки первоначального состояния элемента (отмечен, либо нет) используют атрибут CHECKED.

Пример использования:

<INPUT TYPE="CHECKBOX" CHECKED NAME="C01" VALUE="yes">

TYPE="RADIO"

Так называемая радиокнопка (рис. 6.3) применяется в случае, когда какая-либо логическая переменная может принимать только одно значение из множества возможных.

Рис. 6.3. Элемент формы RADIO

Все элементы RADIO одной формы обозначаются одним и тем же значением атрибута NAME. Использование радиокнопок требует явного указания значений атрибута VALUE, одна из кнопок должна быть обязательно выделена атрибутом CHECKED.

Пример использования:

<Р АLIGN="СЕМТЕR">Пожалуйста, укажите ваш возраст</Р>

<CENTER>

<INPUT TYPE="RADIO" NAME= "user-age" VALUE="0-12">

<INPUT TYPE="RADIO" NAME= "user-age" VALUE="13-17">

<INPUT TYPE="RADIO" NAME= "user-age" VALUE="18-25">

<INPUT TYPE="RADIO" NAME= "user-age" VALUE="26-35" CHECKED>

<INPUT TYPE="RADIO" NAME= "user-age" VALUE="36-">

</CENTER>

TYPE="BUTTON"

Отображает обыкновенную кнопку (рис. 6.4), нажатие на которую приводит к какому-либо действию сервера.

Рис. 6.4. Элемент формы BUTTON

С помощью атрибута NAME данному элементу присваивается уникальное имя, атрибут VALUE позволяет изменять надпись, отображаемую на кнопке.

Пример использования:

<INPUT TYPE="BUTTON" VALUE="Button" NAME="B1">TYPE="SUBMIT"

Определяет кнопку, по нажатии которой данные из формы передаются серверу.Так же как и в предыдущем случае, надпись, отображаемая на кнопке, задаетсяатрибутом VALUE.

Пример использования:

<INPUT TYPE="SUBMIT" VALUE="Отправить!">

TYPE="RESET"

Создает кнопку, которая очищает неправильно заполненную текстовую форму. Параметры и значения этой кнопки не передаются на сервер вместе с другими данными формы. Пример использования:

<INPUT TYPE="RESET" VALUE="Очистить форму">TYPE="FILE"

Генерирует на экране кнопку, по нажатии на которую на экране появляется Проводник Windows, позволяющий присоединить к отсылаемым на сервер данным любой файл с локального компьютера пользователя. Данный элемент применяется в основном в формах отправки с сервера сообщений электронной почты для организации вложений, а также для загрузки изображений на сервер. Обычно рядом с кнопкой отображается небольшое текстовое поле, куда автоматически заносится имя отсылаемого файла и путь к нему на локальном диске.

Пример использования:

<INPUT TYPE="FILE" NAME="picture">TYPE="IMAGE"

Создает кнопку отсылки, аналогичную элементу SUBMIT, но с использованием графического изображения, созданного пользователем. Обычно применяется вслучаях, когда стандартная серая прямоугольная кнопка «не вписывается» в дизайн сайта. URL к изображению, играющему роль кнопки, указывается атрибутом SRC, причем сам элемент может содержать собственные атрибуты, аналогичные применяемым в теге <IMG> (см. урок 5), в том числе ALIGN, ALT и др. Атрибуты NAME и VALUE трактуются так же, как аналогичные атрибуты элемента SUBMIT.

Пример использования:

<INPUT TYPE="IMAGE" SRC="/images/button.giГ ALIGN="BOTTOM" NAME="submit" VALUE="Отправить!">

TYPE="HIDDEN"

Данный элемент является скрытым и не отображается на экране монитора пользователя. Применяется он для хранения и передачи на сервер информации о текущем состоянии формы: при нажатии кнопки SUBMIT элемент HIDDEN сформирует логическую пару переменных типа «имя—значение», которые будут отосланы серверу с помощью протокола HTTP. Элементы HIDDEN служат доступной альтернативой файлам cookies — специальным файлам, в которых сохраняются индивидуальные настройки пользователя и позволяющим, например, восстановить последнее состояние формы при повторном посещении пользователем содержащей эту форму страницы.

Пример использования:

<INPUT TYPE="HIDDEN" NAME="forml" VALUE="c3576-236-2113">

Однако с помощью тега <INPUT> можно передать далеко не все доступные web-дизайнеру элементы форм. Например, текстовые поля, задаваемые атрибутами TEXT и PASSWORD, весьма ограничены по количеству символов, которые можно ввести в эти поля. Если перед web-мастером встала задача создать такие текстовое поля, чтобы пользователь мог вводить большое количество символов, используется самостоятельный тег <TEXTAREA>, формирующий на экране одноименный элемент формы (рис. 6.5).

Рис. 6.5. Элемент формы TEXTAREA

Синтаксис записи данного тега выглядит следующим образом:

<TEXTAREA МАМЕ="имя элемента" ROWS-''целое число" СOLS="целое число">

Текст, выводимый в текстовом поле по умолчанию</TEXTAREA>

С атрибутом NAME, определяющим индивидуальное имя каждого элемента формы, вы уже знакомы. Атрибуты ROWS и COLS указывают соответственно максимально допустимое количество строк вводимого текста и символов в строке. В случае если набираемый пользователем текст не умещается в видимую часть текстового контейнера, по краям поля появляются вертикальные и горизонтальные полосы прокрутки для скроллинга содержимого элемента TEXTAREA.

Пример использования:

<TEXTAREA NAME="message" ROWS="25" COLS="40">

Введите сюда текст сообщения

</TEXTAREA>

Для создания меню выбора в форме (рис. 6.6) web-мастер может воспользоваться тегом <SELECT>.

Рис. 6.6. Элемент формы SELECT

Синтаксис записи данного тега в общем виде выглядит так:

<SELECT NAME="имя" MULTIPLE SIZE="целое число">

<OPTION VALUE="Пункт 1">Пункт 1</OPTION>

<OPTION VALUE-''Пункт 2">Пункт 2</OPTION>

<OPTION VALUE="Пункт 3">Пункт 3</OPTION>

OPTION VALUE="Пункт N">Пункт N</OPTION>

</SELECT>

Атрибут MULTIPLE определяет для пользователя возможность отметить не одну, а сразу несколько позиций из предложенного списка. Если данный атрибут задан, можно воспользоваться атрибутом SIZE, определяющим количество позиций, видимых на экране одновременно.

Пример использования:

<Р АLIGN ="CENTER">Пожалуйста, укажите ваш город</Р>

<CENTER>

<SELECT NAME="City" MULTIPLE SIZE="3">

OPTION VALUE="a">Санкт-Петербург</OPTION>

OPTION VALUE="b">Mocква</OPTION>

<OPTION VALUE="c">Екатеринбург</OPTION>

</SELECT>

</CENTER>

Таблицы

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

Для создания таблиц в HTML 3.2 применяется тег <TABLE>, структура записи которого в общем виде следующая:

<TABLE ALIGN="значение" WIDTH="значение" BORDER=''целое число"

CELLSPACING="qenoe число" CELLPADDING=''целое число">

<TR ALIGN="значение" VALIGN="значение">

<TD ALIGN="значение" VALIGN="значение" COLSPAN="целое число"

ROWSPAN="целое число" НЕIGНТ="целое число" NOWRAP> Содержимое ячеек</ТD>

</TR>

</TABLE>

Рассмотрим эту структуру более подробно. Как видите, основополагающим тегом в блоке описания таблицы является директива <TABLE>, в нее вкладываются все остальные команды блока. Данный тег может использовать следующие атрибуты: ALIGN — задает горизонтальное позиционирование всей таблицы в целом, может принимать значения LEFT, RIGHT или CENTER. Атрибут WIDTH определяет ширину всей таблицы и может принимать значение целого числа,если ширина таблицы указывается в пикселах, либо числа от 1 до 100 с символом «%» (например, «60 %»), если ширина таблицы задается в процентах отширины экрана пользователя. Атрибут BORDER указывает на толщину обрамления столбцов и ячеек таблицы в пикселах. Если значение данного атрибута равно нулю, таблица становится «невидимой». Атрибут CELLSPACING позволяет задать промежуток между ячейками в пикселах, a CELLPADDING — промежуток между содержимым ячейки и рамкой вокруг ячейки в пикселах.

В теги <TABLE> </TABLE> вкладываются теги <TR> и </TR>, определяющие строки таблицы. Количество данных тегов зависит от реального количества строк. Команда <TR> может использовать атрибут ALIGN, определяющий горизонтальное

позиционирование содержимого ячейки внутри самой ячейки, а также атрибутVALIGN, задающий вертикальное выравнивание содержимого ячейки. Первый из них может принимать традиционные значения LEFT, RIGHT и CENTER, второй значения TOP, MIDDLE, BOTTOM и BASELINE.

В своеобразный контейнер, образуемый тегами <TR> и </TR>, вкладываются команды <TD>, описывающие сами ячейки. Тег <TD> оперирует атрибутами ALIGN и VALIGN, действие и параметры которых аналогичны таковым для тега <TR>.Они применяются в ситуации, когда горизонтальное или вертикальное выравнивание в какой-либо одной ячейке отличается от выравнивания, заданного для всей строки. Кроме того, тег <TD> оперирует следующими необязательными атрибутами: COLSPAN — число столбцов, перекрываемых ячейкой; ROWSPAN —число строк, перекрываемых ячейкой, HEIGHT — высота ячейки в пикселах и NO WRAP — запрет переноса слов внутри ячейки.

В силу того что тег <TABLE> использует достаточно большое количество вложенных директив, структура данной команды может быть интуитивно непонятна пользователю. Попытаемся освоить принципы создания таблиц на ряде несложных примеров.

Простые таблицы

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

Такая таблица содержит две строки по две ячейки в каждой, или, другими словами, два элемента <TR>, каждый из которых содержит по два элемента <TD>. Отрывок html-кода, описывающего такую таблицу, можно представить следующим образом:

<TABLE>

<TR>

<TD>A</TD>

<TD>B</TD>

</TR>

<TR>

<TD>C</TD>

<TD>D</TD>

</TR>

</TABLE>

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

В представлении такой таблицы в виде кода HTML также ничего сложного нет. Таблица по-прежнему содержит две строки, однако первая из них включает две ячейки, а нижняя — всего одну. Иными словами при описании второй строки мы должны использовать лишь один элемент <TD>:

<TABLE>

<TR>

<TD>A</TD>

<TD>B</TD>

</TR>

<TR>

<TD>C</TD>

</TR>

</TABLE>

Стандартная таблица с текстовыми ячейками

Таблица с ячейками, заполненными текстом, подразумевает использование ряда специфических элементов, таких как заголовок столбца, определяемый тегом <ТН>, или заголовок всей таблицы, задаваемый тегом <CAPTION>.

Директива <ТН> определяет выделенный жирным шрифтом заголовок каждого столбца таблицы, поясняя его содержимое. В общем виде данный тег записывается следующим образом:

<ТН ALIGN="заначение" VALUE="значение" WIDTH="значение" НЕIGНТ="значение" COLSPAN="целое число" ROWSPAN="целое число" NOWRA>содержимое заголовка</ТН>

Все атрибуты этой команды записываются аналогично атрибутам других тегов, определяющих внутреннее наполнение таблиц, их значения идентичны таковым для атрибутов тега <ТО>. Напомню, лишь, что атрибут ALIGN в данном случае определяет горизонтальное выравнивание заголовка столбца в ячейке, атрибут VALIGN — вертикальное выравнивание, WIDTH — ширину ячейки в пикселах, HEIGHT — ее высоту, COLSPAN указывает на число столбцов, охваченных ячейкой, ROWSPAN — на число охваченных ячейкой строк и, наконец, параметр NOWRAP запрещает перенос слов внутри ячейки. По умолчанию значения атрибутов COLSPAN и ROWSPAN равны 1, для заголовка столбцов задается выравнивание по центру ячейки, в отличие от содержимого самих ячеек, определяемых тегом <TD>, оно выравнивается по левому краю столбца. Директива <CAPTION> задает заголовок таблицы в целом. Синтаксис ее записи в общем виде таков:

<CAPTION ALIGN="значение">текст. заголовка</САРТION>

Заголовок таблицы всегда позиционируется относительно ее центра, поэтому в качестве значения атрибута ALIGN в данном случае может быть указан параметр ТОР или BOTTOM, с помощью которого вы можете разместить заголовок либо над таблицей, либо под ней.

Использование заголовков таблиц считается хорошим тоном и принято для представления соответствующей информации в html-дакументах. Заголовок

таблицы должен быть по возможности кратким и содержательным, не следует включать в него развернутое описание представленных в таблице данных. При использовании директивы <CAPTION> следует помнить простое правило: в заголовке надо указывать лишь что показывает данная таблица, а все объяснения, рассказывающие, почему данная таблица включена в документ, лучше приводить отдельным текстом, предваряющим таблицу.

В качестве простого примера, демонстрирующего механизм применения команд<ТН> и <CAPTION>, приведу небольшой отрывок кода HTML:

<TABLE BORDER="1">

<CAPTION А!Л6М="ТОР">Пример перевода ряда английских слов на русский язык</САРТЮМ><TR>

<ТН>Английское написание</ТН>

<ТН>Русское написание</ТН>

<ТН>Часть речи</ТН>

</TR>

<TR>

<TD>To go</TD>

<ТD>Идти</ТD>

<ТD><ЕМ>Глагол</ЕМ></ТD>

</TR>

<TR>

<TD>The table</TD>

<ТD>Стол</ТD>

<ТD><ЕМ>Существительное</ЕМ></TD>

</TR>

<TR>

<TD>To sleep</TD>

<TD>Cnaib</TD>

<ТD><ЕМ>Гла гол</ЕМ></ТD>

</TR>

</TABLE>

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

Рис. 6.7. Внешний вид таблицы с текстовыми ячейками

Таблица с параллельными текстами

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

<TABLE BORDER="0" CELLSPACING="3">

<CAPTION><STRONG>Отрывки из книги Бытия на трех языках</STRONG></САРТION>

<TR ALIGN="LEFT" VALIGN="TOP">

<TH WIDTH="11"></ТН>

<TH WIDTH="223">Латынь</ТН>

<TH WIDTH="271>Английский</ТН>

<TH WIDTH="240">Pyccкий</TH>

</TR>

<TR ALIGN="LEFT" VALIGN="TOP">

<TH WIDTH="11">1</TH>

<TD WIDTH="223">In principio creavit Deus caelum et terram.</TD>

<TD WIDTH="271">In the beginning God created the heaven and the earth.</TD>

<TD WIDTH="240">B начале сотворил Бог Небо и Землю.</TD>

</TR>

<TR ALIGN="LEFT" VALIGN="TOP">

<TH WIDTH="11">2</TH>

<TD WIDTH="223">Terra autem erat inanis et vacua et tenebrae super faciemabyssi et spiritus Dei ferebatur super aquas.</TD>

<TD WIDTH="271">And the earth was without form, and void: and darkness wasupon the face of the deep. And the Spirit of God moved upon the face of thewaters.</TD>

<TD ШОТН="240">Земля же была без видна и пуста, и Тьма над Бездною: и Дух Божий носился над Водою.</TD>

</TR>

<TR ALIGN="LEFT" VALIGN="TOP">

<TH WIDTH="11">3</TH>

<TD WIDTH="223">Dixitque Deus &quot:Fiat lux&quot; et facta est lux.</TD>

<TD WIDTH="271">And God said. Let there be light: and there was "light.</TD>

<TD WIDTH="240">И сказал Бог: &quot;Да будет Свет!&quot: - и стал Свет.</ТD>

</TR>

</TABLE>

После обработки интерпретатором броузера данного кода таблица будет выглядеть на экране монитора так, как показано на рис. 6.8.

Рис. 6.8. Внешний вид таблицы с тремя текстовыми колонками

Представление таблиц, элементы которых занимают несколько строк или столбцов

Иногда в html-документе необходимо представить таблицу, некоторые ячейки которой занимают несколько строк или столбцов по вертикали или горизонтали. Для этого используются атрибуты COLSPAN и ROWSPAN, варьируя параметрами которых можно добиться желаемого результата. В качестве примера применения такой таблицы предлагаю рассмотреть код HTML, представляющий на экране правила спряжения английского глагола to be в настоящем времени:

<TABLE BORDER="1" ALIGN="CENTER" CELLPADDING-"3" WIDTH="252">

<САРТION>Спряжение глагола <EM>to be:</EM></CAPTION>

<TR>

<TH WIDTH="34">&nbsp;</TH>

<TH иттн="198">3начение <EM>to be:</EM></TH>

</TR>

<TR>

<TH WIDTH="34">I</TH>

<TD ALIGN="CENTER" WIDTH="198">am</TD>

</TR>

<TR>

<TH WIDTH="34">You</TH>

<TD ALIGN="CENTER" WIDTH="198" ROWSPAN="3">are</TD></TR><TR>

<TH WIDTH="34">We</TH>

</TR>

<TR>

<TH WIDTH="34">They</TH>

</TR>

<TR>

<TH WIDTH="34">He</TH>

<TD ALIGN="CENTER" WIDTH="198" ROWSPAN="3">is</TD>

</TR>

<TR>

<TH WIDTH="34">She</TH>

</TR>

<TR>

<TH WIDTH="34">It</TH>

</TR>

</TABLE>

На рис. 6.9 показано, как такая таблица отобразится в окне броузера.

Рис. 6.9. Внешний вид таблицы, элементы которой занимают несколько строк

Вложенные таблицы

Команды, управляющие созданием и отображением таблиц, допускают вложение одного тега <TABLE> внутрь другого. Эта особенность языка HTML используется для представления на web-странице так называемых «вложенных» таблиц,пример описания которых вы можете видеть ниже:

<TABLE BORDER="1" CELLPADDING="6" WIOTH="600">

<САРТION>Спряжение стандартного глагола <EM>to invite:</EM></CAPTION>

<TR>

<TH МЮТН="300">Перевод</ТН>

<TH WIDTH="300">Future</TH>

<TH WIDTH="300">Future-in-the-Past</TH>

</TR>

<TR>

<TD COLSPAN="3" WIDTH="527">

<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="588">

<TR>

<TD WIDTH="194">Я (мы) приглашу(-сим)</ТD>

<TD WIDTH="194">I (we) shall invite</TD>

<TD WIOTH="194">I (we) should invite</TD>

</TR>

<TR>

<TD WIDTH="194">OH (вы. они) пригласит (-ите. -ят)</ТD>

<TD WIDTH="194">He (you. they) will invite</TD>

<TD WIDTH="194">He (you. they) would invite</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

Из приведенного отрывка кода HTML ясно, что для создания отображаемой на экране пользователя таблицы спряжения английского глагола to invite использованы две таблицы, вложенные одна в другую. Первая задает форматирование ячеек для заголовков таблицы, а вторая — столбцы со значениями спрягаемого глагола. В окне броузера конструкция из двух вложенных таблиц будет выглядеть так, как показано на рис. 6.10.

Рис. 6.10. Вложенные таблицы

В приведенном примере для разметки внешней таблицы использован атрибутCELLPADDING со значением 6, прежде всего, для того, чтобы вам было легче визуально отличить внешнюю таблицу от внутренней. Если для обеих таблиц установить нулевое значение отступов и толщины рамок, таблицы «слипаются» в окне броузера, что позволяет создать невидимую пользователю конструкцию спроизвольным разбиением. Этот прием часто используется для создания «прозрачных» таблиц, играющих роль верстальной сетки для размещения элементов web-страницы.

Фреймы

Директивы создания фреймов не входят в официальную спецификацию HTML 3.2,поскольку их активное использование началось с появлением языка разметки гипертекста версии 4.0. Однако здесь я сделаю краткий экскурс в теорию использования фреймов, так как полагаю, что данный раздел может заинтересовать ряд начинающих web-дизайнеров, уже сталкивавшихся с этим способом представления web-страниц.

Фреймы — способ организации структуры сайта, при котором web-страницадробится на ряд отдельных составляющих и «собирается» в главном окне броузера из нескольких независимых или вложенных окон. При таком представлении каждый компонент страницы является самостоятельным документом HTML и встраивается в ту область экрана, которая задается директивой<FRAMESET>. Данный способ применяется в основном для дробления web-страницы на логические разделы: например, в верхнем фрейме выводится рекламный баннер, в левом — элементы навигации, в правом — основной текст страницы, в нижнем — сообщение об авторских правах и адрес электронной почты разработчика ресурса. При этом нажатие на любую из навигационных кнопок приводит к изменению содержимого лишь одного окна, все остальные фреймы остаются без изменений. Если содержимое фрейма не умещается в видимые границы окна, броузер отображает полосы прокрутки.

В случае применения фреймов индексный html-файл (index.html) несколько отличается от обычного. Как известно, стандартный документ HTML имеет два логических раздела: раздел заголовков <HEAD> и раздел <BODY>, определяющий тело документа. При использовании фреймов раздел <BOOY> заменяется на раздел <FRAMESET>. Все остальные документы, отображаемые в отдельных фреймах,имеют стандартное представление.

В общем виде синтаксис записи директивы <FRAMESET> выглядит следующим образом:

<FRAMESET ROWS="значение" COLS="значение" FRAMEBORDER="значение"

FRAMESPACING="значение">

<FRAME МАМЕ="имя" TARGET="значение" SCROLLING="yes. no или auto" SRC="URL"

FRAMEBORDER="значение" NORESIZE>

<NOFRAMES>

<BODY>

Текст, отображаемый в броузерах, не поддерживающих фреймы.

</BODY>

</NOFRAMES>

</FRAMESET>

Очевидно, что общая структура представления фреймов во многом схожа с представлением таблиц: тег <FRAMESET>, задающий параметры отображения всех фреймов в документе, содержит необходимое количество тегов <FRAME>, описывающих каждый отдельный фрейм. Причем некоторые атрибуты, применяемые совместно с командой <FRAME>, могут отменять параметры, заданные в атрибутах команды <FRAMESET>. Как и в случае с <ТАВ1Е>, директива описания фреймов допускает вложение одного элемента <FRAMESET> в другой.

Атрибут тега <FRAMESET> FRAMEBORDER определяет, надо ли отображать на экране пользователя границы фреймов. Параметр этого атрибута может принимать одно из двух значений: 1, если разделители нужны (используется по умолчанию), или 0, если программист желает сделать их невидимыми. Атрибут FRAMESPACING указывает на толщину разделителей в пикселах. Атрибуты ROWS и COLS определяют соответственно количество горизонтальных и вертикальных отрезков во фреймовом наборе.

Параметры атрибутов ROWS и COLS можно задавать различными способами: в пикселах, процентах и в относительных длинах. Если атрибут ROWS в теге<FRAMESET> не указан, каждый столбец будет занимать всю длину страницы, если

не указан атрибут COLS, каждая строка растянется на всю видимую ширину экрана. Параметры фреймов задаются слева направо для горизонтальных элементов и сверху вниз для вертикальных. Например, запись <FRAMESET COLS="50*.50Х"> разделит страницу вертикально на две равные части, запись <FRAMESETROWS="250. 10%. *"> задаст горизонтальное разделение страницы на три участка: первый — с фиксированной высотой 250 пикселов, второй — высотой в 10 % от оставшегося пространства, третий же займет все пространство, которое останется свободным после создания первых двух окон. В этом примере при задании параметров атрибута ROWS были использованы все три варианта определения отрезков фреймового набора: в пикселах (250 точек), процентах (10 %) и в относительных длинах (включение символа *). Разделения web-страницы на сетку 2x3 ячейки можно добиться, например, применением следующих значений атрибутов директивы <FRAMESET>: <FRAMESET ROWS="40%. 60%" COLS="33%. 34%. *">.

Команда <FRAME> может включать следующие атрибуты: NAME, в котором задается уникальное имя для данного конкретного фрейма, набранное с использованием символов латинского алфавита, TARGET, содержащий информацию о целевом фрейме (рекомендуется использовать значение по умолчанию — "contents"), SCROLLING, определяющий наличие ("yes"), отсутствие ("по") или отображение по мере необходимости ("auto") полос прокрутки в текущем фрейме, SRC, в котором указывается адрес открываемой в данном фрейме страницы, FRAMEBORDER, правила записи и назначение которого аналогичны таковым в составе тега <FRAMESET>, и, наконец, атрибут NORESIZE, наличие которого устанавливает запрет на изменение пользователем размеров окна фрейма. Тег <FRAME> может также содержать ряд других необязательных атрибутов, таких как MARGINWIDTH, определяющий размер в пикселах пустого пространства, оставляемого во фрейме в качестве правого и левого полей, и MARGIN-HEIGHT, задающий верхний и нижний отступы.

Директива <NOFRAMES>, включающая вложенные теги <BODY> и </BODY>, позволяет записать произвольное количество html-кода, который будет динамически преобразован в самостоятельную web-страницу в случае, если клиентский броузер не поддерживает фреймы.

Представление гиперссылок для страниц, использующих фреймы, также требует определенной модификации, а именно — обязательного использования атрибута TARGET:

<А HREF="URL" ТАР6ЕТ="_значение">Текст или элемент IMG</A>

Допустимые значения атрибута TARGET для применения тега <А> во фреймовых наборах следующие:

_self — документ, с которым установлена гиперсвязь, открывается в текущем фрейме;

_parent — отображение осуществляется в родительском окне фреймов, независимо от того, какие параметры указаны в директиве <FRAMESET>;

_top — при активизации гиперссылки фреймы перестают отображаться, а содержимое целевого документа выводится в отдельном окне.

Если вместо значения атрибута TARGET подставить имя фрейма, заданное вами ранее в качестве параметра атрибута NAME тега <FRAME>, при активизации ссылки целевой документ загружается в окне с указанным именем.

Ярким примером использования директивы <FRAMESET> может служить приведенный ниже листинг индексного документа HTML, использующего фреймы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4:0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>FRAMESET EXAMPLE PAGE</TITLE>

</HEAD>

<FRAMESET FRAMESPACING="0" rows="64.*.64" FRAMEBORDER="0">

<FRAME NAME="top" SCROLLING="no" TARGET="contents" SRC="page_l.htm">

<FRAMESET COLS="150.*">

<FRAME NAME="contents" SRC="page_2.htm" SCROLLING="auto">

<FRAME NAME="main" SRC="page_3.htm" SCROLLING="auto">

</FRAMESET>

<FRAME NAME="bottom" SCROLLING="no" NORESIZE SRO"page_4.htm">

<NOFRAMES>

<BODY>

<P ALIGN="CENTER">Этa страница содержит фреймы, но ваш броузер не поддерживает их отображение.</Р>

</BODY>

</NOFRAME>

</FRAMESET>

</HTML>

Обратите внимание на то, что определитель DOCTYPE в данном случае содержит указание на версию языка HTML 4.O. Это необходимо, поскольку ссылка на HTML 3.2, не позволяющий использовать фреймы, может вызвать в некоторых броузерах ошибку при трансляции кода.

Приведенный выше листинг html-документа делит web-страницу так, как это показано на рис. 6.11.

Рис. 6.11. Внешний вид web-страницы, созданной с применением директивы FRAMESET

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

Во-первых, фреймы весьма сложны в разработке и настройке: достаточно трудно оптимизировать такую страницу для корректного отображения в разных версиях броузеров со всеми допустимыми экранными разрешениями. В некоторых фреймах возможно периодическое появление полос прокрутки, затрудняющих просмотр документа, а жесткий запрет на отображение средств скроллинга может повлечь за собой исчезновение части отображаемых во фреймах страниц заграницей видимой области экрана. Во-вторых, фреймы распознаются далеко не всеми броузерами, в полной мере их поддерживают лишь современные версии Microsoft Internet Explorer и Netscape Navigator. Излишне говорить, что во Всемирной сети достаточно много пользователей, на компьютерах которых установлены старые броузеры. В-третьих, применение фреймов существенно затрудняет управление навигацией сайта при помощи встроенных в броузер кнопок «Вперед» и «Назад», поскольку они рассчитаны, в первую очередь, на работу с документами размером в целый экран, но никак не с отдельными окнами, в которые загружено множество документов. Нажатие на одну из этих кнопок иногда может привести к совершенно непредсказуемым последствиям.

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

Из всего сказанного напрашивается простой и вполне очевидный вывод: использовать фреймы лучше всего только тогда, когда это действительно необходимо, например, при создании web-чата или интерактивной доски объявлений. Во всех остальных случаях от их применения лучше отказаться.

Элемент <МАР>

В четвертом уроке я уже упоминал о том, что язык разметки гипертекста позволяет создавать графические элементы, выполняющие роль карт, определенные участки которых могут реагировать на нажатие кнопок мыши и отправлять пользователя к соответствующим документам или файловым объектам сайта потому же принципу, что и гиперссылки. Рассмотрим правила создания графических карт при помощи команды <МАР>.

Элементы <МАР> динамически связаны с изображениями, вызываемыми директивой <IMG>, и в общем виде описываются следующим образом:

<МАР МАМЕ="имя карты">

<AREA HREF="URL" SНАРЕ="параметр" COORDS="x1. y1. x2. y2"

АLТ="альтернативный текст">

</МАР>

Атрибут NAME тега <МАР> определяет уникальное имя карты, записываемое латинскими символами. Следует учитывать, что при задании имени карты важно соблюдение регистра, поскольку интерпретатор броузера различает в данной команде строчное и заглавное написание. Тег <AREA> определяет непосредственно активную область изображения. Атрибут HREF, как и при использовании его совместно с тегом <А>, указывает на адрес документа, вызываемого при нажатии кнопки мыши над данным участком изображения. Атрибут ALT определяет альтернативный текст, который выводится на экран в специальномвсплывающем прямоугольнике в случае, если пользователь подержит курсор мыши над активным участком карты несколько секунд. Атрибут SHAPE управляет формой активной области и может принимать одно из трех значений: RECT — прямоугольник, CIRCLE — круг или POLY — многоугольник. И наконец, атрибут COORDS позволяет определить относительные координаты вершин активной области. Возможные значения данного атрибута приведены в табл. 6.1.

Таблица 6.1. Значения атрибута COORDS

Значение SHAPE | Форма активной области | Синтаксис записи COORDS | Значения параметров COORDS
SHAPE=RECT SHAPE=CIRCLE SHAPE=POLY | Прямоугольник Круг Многоугольник | COORDS="xl,yl,х2,у2" COORDS="X,Y,R" COORDS="x1, y1, x2, y2, x3, y3, ... xN, yN" | x1 и y1 задают координаты левого верхнего угла фигуры, х2и у2 — правого нижнего X и Y — координаты центра окружности, R — ее радиус в пикселах x1, y1 ... xN, yN -координаты вершин многоугольника

Значения координат активной области отсчитываются в пикселах по длине и ширине картинки от левого верхнего угла изображения, принимаемого за точку с координатами 0,0. Иными словами, значение х возрастает справа налево,

а значение у — сверху вниз. Координаты х и у могут быть также заданы в процентах от реального размера изображения, например: SHAPE="RECT" COORDS="0.0.50Я.50Ж". Необходимо помнить, что если несколько активных областей одного изображения перекрывают друг друга, область, описанная тегом <AREA>первой, имеет приоритет.

При составлении графической карты можно использовать также необязательный атрибут NOHREF, определяющий неактивные участки карты. На практике он используется довольно редко и, как правило, для того, чтобы вырезать в активном участке изображения неактивную «дыру».

Вот несколько простых примеров создания активных областей:

SHAPE=RECT COORDS="0, 0, 20, 20" — создает прямоугольник размером 20x20 пикселов в левом верхнем углу изображения;

SHAPE=CIRCLE COORDS="30, 30, 10" создает круг с центром, расположенном в точке (30, 30) и радиусом 10 пикселов;

SHAPE=POLY COORDS="10, 60, 15, 30, 30, 60" создает треугольник с координатами вершин (10, 60), (15, 30) и (30, 60).

Теперь, когда графическая карта описана вами при помощи тега <МАР>, можно интегрировать ее в web-страницу, подготовив соответствующее изображение влюбом графическом редакторе и вызвав его уже знакомой вам командой <IMG> с атрибутом USEMAP:

<IMG SRC="URL" WIDTH="ширина" HEIGHT-''высота" BORDER="0" USЕМАР="#имя_карты">

Обратите внимание на то, что имя карты, заданное атрибутом NAME тега <МАР>,предваряется в атрибуте USEMAP тега <IMG> символом «#». Все остальные атрибуты данной директивы записываются так,же, как обычно.

Наглядным примером реализации простой графической карты может служить следующий отрывок html-кода:

<IMG SRC="/images/bar.gif" BORDER=0 USEMAP="#ny_map">

<MAP NAME="my_map">

<AREA HREF="help.html" АLT="Полный список разделов сайта" SHAPE=RECT

COORDS="0. 0. 118. 28">

<AREA HREF="about.html" ALT="0 нашей компании" SHAPE=RECT COORDS="184.

0. 276. 28">

<AREA HREF="address.html" АLТ="06ратная связь" SHAPE=RECT COORDS="118.

0, 184. 28">

<AREA HREF="guestbook.htmT' ALT="Haшa гостевая книга" SHAPE=RECT

COORDS="276, 0. 373. 28">

</MAP>

Что же, теперь можно смело сказать, что вы владеете основным запасом команд HTML, необходимым для создания собственного web-проекта средней степени сложности. Описание и правила применения других тегов языка разметки гипертекста приведены в приложении 2, которым вы можете воспользоваться по мере необходимости.

Практикум

Для того чтобы придать вашей страничке более или менее профессиональный внешний вид, давайте создадим невидимую для пользователя таблицу, в которой разместим декоративные графические элементы, выполняющие роль как заголовка документа, так и, например, навигационных кнопок. В первую очередь необходимо представить себе общий дизайн и взаимное расположение будущих графических объектов. Вооружившись карандашом, линейкой и бумагой, набросайте эскиз вашего сайта, визуально «примерив» к нему еще не созданную вами таблицу.

Теперь, руководствуясь уже готовым эскизом, прорисуйте в редакторе векторной графики, например в Corel Draw, основные графические элементы: заголовок странички, внешний вид навигационных кнопок, разделительные линии и кнопку, которая станет впоследствии ссылкой на адрес электронной почты.

Импортируйте получившуюся картинку в редактор растровой графики, например Adobe Photoshop, разрежьте ее на семь частей (заголовок с баннером, разделительная линия, четыре навигационные кнопки и изображение с надписью «E-mail») с помощью встроенной функции редактора «Изображение > Создать копию» и от кадрируйте рисунок с помощью инструмента «Рамка». Теперь сохраните все получившиеся файлы в формате GIF89a в директории C:\MySite\Images,задав для белого фона ваших изображений свойство прозрачности, и оптимизируйте их по объему с применением специального программного обеспечения, которое вы изучили в пятом уроке, либо с использованием встроенного оптимизатора Adobe Photoshop. Настало время внести соответствующие изменения в html-документы, составляющие ваш сайт.

Откройте Блокнот и создайте пустой текстовый файл с названием shablon.html —он станет вашим шаблоном, в который вы впоследствии сможете помещать любое информационное содержимое. Перенесите туда основной код созданного вами ранее файла index.html, удалив из него все информационное наполнение:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><HTML>

<HEAD>

<TITLE>Moя домашняя страничка</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"

ALINK="#FF0000" BACKGROUND="Images\background.gi f">

</BODY>

</HTML>

Теперь запишите между тегами <BODY> и </BODY> код первичной таблицы, в которой вы затем разместите все необходимые элементы:

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="640">

<TR>

<!-Сюда вставляется заголовок странички -->

<TD COLSPAN="2" WIDTH="400">

</TD>

</TR>

<TR>

<!-Пустая строка для разделительной линии -->

<TD COLSPAN="2" WIDTH="400">

</TD>

</TD>

<TR>

<!-Здесь размещается навигация -->

<TD WIDTH="82" VALIGN="TOP" ALIGN="CENTER">

</TD>

<!-Основное поле для текста -->

<TD WIDTH="318" BGCOLOR="#FFFFFF" VALIGN="TOP">

<P ALIGN="JUSTIFY">

</P>

</TD>

</TR>

<TR>

<!-Еще одна пустая строка для разделительной линии -->

<TD COLSPAN="2" WIDTH="400">

</TD>

</TR>

<TR>

<!-E-mail -->

<TD WIDTH="82"></TD>

<!-Copyright -->

<TD WIDTH="318"></TD>

</TR>

</TABLE>

Обратите внимание на то, что для ячейки, определяющей текстовое поле, при помощи атрибута BGCOLOR задан белый фоновый цвет. Поскольку параметр BORDER данной таблицы установлен нулевым, вы не увидите ее в окне броузера, однако ее общий вид выглядел бы на экране компьютера так, как показано на рис. 6.12.

Рис. 6.12. Расположение ячеек невидимой таблицы

В ячейку таблицы, предназначенную для размещения кнопок навигации, вставьте другую «прозрачную» таблицу с одним-единственным столбцом шириной чуть меньше ширины данной ячейки и с количеством строк, большим количества имеющихся у вас кнопок в два раза:

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="80">

<TR>

<TD></TD>

</TR>

<TR>

<TD HEIGHT="20"></TD>

</TR>

<TR>

<TD></TD>

</TR>

<TR>

<TD HEIGHT="20"></TD>

</TR>

<TR>

<TD></TD>

</TR>

<TR>

<TD HEIGHT="20"></TD>

</TR>

<TR>

<TD></TD>

</TR>

<TR>

<TD HEIGHT="20"></TD>

</TR>

</TABLE>

Кнопки навигации будем размещать в таблице через строку. Пустые ячейки между картинками, высота которых принята равной двадцати пикселам, будут играть роль своеобразных разделителей, предназначенных для того, чтобы кнопки не сливались друг с другом по вертикали.

Теперь запустите программу PictureDiser и разрежьте ваш заголовок в соответствии с эскизом таким образом, чтобы рекламный баннер отображался в отдельной ячейке таблицы — туда вы чуть позже включите код динамической загрузки рекламных изображений из баннерообменной сети. Назначьте в качестве директории, в которую будут помещены фрагменты разрезанного заголовка,папку C:\MySite\Images, затем откройте автоматически сгенерированный программой Picture Diser html-документ в текстовом редакторе и скопируйте код созданной им невидимой таблицы в соответствующую ячейку таблицы файла shablon.html. Подправьте пути к фрагментам заголовка, если это необходимо. Осталось только разместить в соответствующих ячейках подготовленной вами таблицы ссылки на все недостающие графические элементы, связать кнопки навигации гиперссылками с соответствующими документами сайта, назначить изображению конверта гиперсвязь с вашим адресом электронной почты и сохранить файл на диске.

В ячейке таблицы, помеченной вами как «основное поле для текста», разместите информационное содержимое вашего документа подобно тому, как мы это делали в предыдущих уроках. Теперь можно повторно сохранить получившийся файл на диске, но уже под именем index.html. Страничка готова. Другие документы сайта модифицируются из файла shablon.html по аналогичной схеме.

Что нового мы узнали?

В этом уроке мы научились:

  • Правильно использовать в заголовках документов МЕТА-определители.
  • Применять интерактивные элементы форм.
  • Создавать различные таблицы с помощью стандартных средств HTML.
  • Использовать директиву <FRAMESET> для представления web-страниц в виде фреймов.
  • Строить реагирующую на нажатие кнопок мыши графическую карту с использованием тега <МАР>.


Урок 7
Microsoft FrontPage

  • Установка FrontPage Express
  • Приступая к работе
  • Размещение текста
  • Списки и разделители
  • Размещение иллюстраций
  • Гиперссылки
  • Таблицы
  • Формы
  • Прочие элементы FrontPage
  • Microsoft FrontPage 98
  • Microsoft FrontPage 2000
  • Типичные ошибки
  • Что нового мы узнали?

Среди начинающих пользователей Интернета бытует мнение, что на практике при создании собственного web-сайта нет необходимости изучать сложные структуры языка разметки гипертекста или его расширений, поскольку помимо «классического» метода подготовки html-документов вручную существует и другой достаточно популярный способ — применение web-редакторов, автоматически генерирующих большую часть необходимого пользователю кода. Можно смело сказать, что это весьма распространенное заблуждение несет в себе малую толику рационального зерна, по крайней мере, в том, что визуальныер едакторы HTML действительно являются весьма удобным средством разработки ресурсов Интернета.

Существует великое множество HTML-редакторов, построенных по принципу WYSIWYG, что расшифровывается как «What You See Is What You Get» (To, что вы видите, вы и получаете). В рамках этого урока я остановлюсь на одном из самых распространенных и популярных из них — на программе Microsoft FrontPage, а именно ее реализации, названной разработчиками FrontPage Express. Это не означает, что другие пакеты плохи, сложны в освоении или неудобны, отнюдь. Дело лишь в том, что FrontPage Express входит в комплект поставки Microsoft Windows 98 и 2000, а также в состав дистрибутивов Microsoft Office 2000 и Microsoft Internet Explorer 5.0. Если вы пользуетесь этими версиями операционных систем или одним из указанных программных продуктов, то автоматически являетесь владельцем копии FrontPage Express и ни малейших проблем с получением и установкой необходимого программного обеспечения у вас уже не возникнет. Освоив базовые принципы работы с FrontPage, вы без труда сможете изучить любой другой визуальный html-редактор, например, Adobe Page Mill, Hot Dog или Homesite, выбрав из них тот, который наиболее соответствует вашим вкусам, потребностям и задачам. Безусловно, я кратко коснусь также известных версий этой программы FrontPage98 и FrontPage2000,поясню их основные достоинства и недостатки.

В отношении Microsoft FrontPage существует расхожее мнение, будто применительно к данному редактору аббревиатуру WYSIWYG можно, не покривив душой, расшифровать как «Не важно, что вы видите, все равно ничего не получите». Уверяю вас, несмотря на то, что, как и любой другой продукт Microsoft, эта программа обладает весьма своенравным «характером», она все же вполне функциональна и работоспособна. Существует множество сайтов, вы полненных с применением Microsoft FrontPage, которые можно назвать вполне профессиональными. К тому же мы все равно не будем использовать данную программу для разработки проекта «от и до»: как уже упоминалось в предыдущих уроках, оптимальный метод работы с визуальными редакторами в процессе подготовки сайта — создание с их помощью сложных таблиц и шаблонов, так сказать, «скелетов» будущих страниц, с последующим редактированием кода вручную. Поэтому в данном уроке мы будем рассматривать FrontPage с точки зрения не столько элементов его интерфейса, сколько реальных приемов, которые можно выполнить с его помощью.

Поддерживая устоявшуюся традицию, я мог бы с пафосом сказать, что FrontPage является наиболее мощным и удобным из всех современных HTML-редакторов, доступных для использования начинающим web-мастером. Разумеется, я не буду делать этого. Хотя бы потому, что Microsoft не платит мне денег за рекламу. Главное достоинство этого пакета по сравнению с другими аналогичными продуктами именно для начинающих web-дизайнеров состоит в том, что он имеет стандартный для программ Microsoft Office интерфейс со стандартным же расположением элементов управления, а потому пользователям, знакомым, например, с Microsoft Word, не придется переучиваться, чтобы освоить данный редактор «с нуля». Опять же, поскольку книга, которую вы держите в руках, рассчитана, прежде всего, на новичков, описывать в ней полуавтоматический редактор с аскетичным, но вполне функциональным интерфейсом, подразумевающий наличие у пользователя хороших базовых навыков html-программиро-вания, было бы несправедливо по отношению к читателю.

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

Итак, переходим к делу. Но прежде, чем мы обратимся непосредственно к правилам разработки элементов web-страниц в программе Microsoft FrontPage, поговорим об установке пакета.

Установка FrontPage Express

Если вы используете Microsoft Windows 98, FrontPage Express является обычно компонентом группы программ Internet Explorer или Средства Интернета, вызываемых через раздел Программы меню Пуск. Если этот компонент не установлен в вашей системе, для его установки необходимо вставить дистрибутивный диск Windows 98 в привод CD-ROM и выполнить следующую последовательность команд: Пуск > Настройка > Панель управления. В открывшемся окне Панели управления необходимо выбрать ярлык Установка и удаление программ (Add/Remove Programs) и в нем открыть вкладку Установка Windows (Windows Setup). Здесь следует выделить мышью пункт Средства Интернета и нажать на кнопку Состав (рис. 7.1).

Рис. 7.1. Установка FrontPage Express с дистрибутивного диска Windows 98

Выделив в окне Средства Интернета пункт Microsoft FrontPage Express, нажмите кнопку ОК. Когда это окно автоматически закроется, в окне Свойства: Установка и удаление программ нажмите кнопку Применить. FrontPage Express будет автоматически установлен на ваш компьютер.

Если компьютер работает не под управлением Windows 98, но вы используете Microsoft Internet Explorer 5.0, для установки FrontPage Express вам потребуется запустить процесс установки Internet Explorer в режиме Добавить/удалить компоненты. Согласившись с условиями лицензионного соглашения и выбрав в перечне компонентов Microsoft FrontPage Express, завершите установку в обычном режиме (рис. 7.2).

I

Рис. 7.2. Установка FrontPage Express с дистрибутивного диска Internet Explorer 5.0

И наконец, если вы пользуетесь офисным пакетом Microsoft Office 2000, установить Microsoft FrontPage можно, повторно запустив программу установки с дистрибутивного диска Microsoft Office и выбрав в списке предлагаемых компонентов пункт Редактор HTML-файлов, содержащийся во вкладке Средства Office(рис. 7.3).

Рис. 7.3. Установка Microsoft FrontPage с дистрибутивного диска Microsoft Office 2000

После нажатия на кнопку Обновить мастер установки Microsoft Office 2000 установит FrontPage на ваш компьютер.

Приступая к работе

Интерфейс программы Microsoft FrontPage Express выглядит так, как показано на рис. 7.4.

Рис. 7.4. Интерфейс программы FrontPage Express

Уже в процессе загрузки редактор FrontPage Express автоматически сгенерирует для вас код пустой web-страницы, включающий элементы <НЕАD> и <BODY>, в чем вы можете убедиться, открыв окно Просмотр или правка HTML (рис. 7.5), которое вызывается на экран при выборе пункта HTML... системного меню Вид. Данное окно играет роль своеобразного «редактора в редакторе», позволяя вам подправлять создаваемый программой FrontPage Express код HTML вручную. По большому счету, окно Просмотр или правка HTML напоминает упрощенную версию текстового редактора Notepad с одним существенным отличием: если в нижней панели окна установлен флажок Показывать цветовую кодировку, редактор станет отображать теги языка разметки гипертекста фиолетовым цветом, их атрибуты — красным, значения атрибутов — синим, а вводимый пользователем текст — черным, что значительно облегчает процесс правки html-кода. Это окно вам предстоит использовать всякий раз, когда будет возникать необходимость внести в листинг редактируемого документа какие-либо изменения.

Рис. 7.5. Окно Просмотр или правка HTML

Прежде чем приступать непосредственно к созданию web-страницы, следует установить начальные значения параметров документа. Для этого необходимо вызвать на экран соответствующее окно (рис. 7.6), воспользовавшись пунктом меню Файл > Свойства страницы или щелкнув в любом месте рабочего окна FrontPage Express правой кнопкой мыши и выбрав пункт с аналогичным названием в появившемся меню.

Рис. 7.6. Окно настроек свойств страницы

Вкладка Общие диалогового окна Свойства страницы содержит следующие настройки, которые пользователь по желанию может изменить. Пункт Папка указывает на директорию, в которой сохранен документ. В поле Заголовок следует ввести название страницы, записываемое программой между тегами <TITLE> и</TITLE> кода HTML web-страницы. В поле Базовое место можно указать URL вашего сайта. В пункте Кадр назначения по умолчанию можно указать имя фрейма,в котором должен загружаться документ. Диалоговое меню Направление чтения документа позволяет вам установить направление движения курсора при вводе текстов, чуть ниже можно задать фоновый звук в формате MIDI, который будет воспроизводиться всякий раз при открытии документа в броузере, отрегулировав его настройки (можно установить количество повторов или заставить звуковой файл воспроизводиться непрерывно). Наиболее важным в окне настроек свойств документа является пункт определения кодировки документа: в меню для сохранения и Для отображения рекомендуется указать пункт Кириллица для кодировки Windows 1251 или Кириллица KOI8-R для кодировки KOI.

Вкладка Фон определяет настройку фонового цвета документа, текста и гиперссылок, эти цвета будут автоматически указаны программой в теге <BODY>. Здесь же можно указать название и адрес размещения фонового рисунка для вашей web-страницы.

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

Установив исходные значения параметров страницы, можно переходить непосредственно к подготовке содержимого документа.

Размещение текста

Текст, помещаемый в документ HTML для отображения в клиентском броузере, набирается в рабочем окне FrontPage Express как в обычном текстовом редакторе. Стиль вводимого текста (обычный стиль, стили заголовка, определяемого тегами <Н1> — <Н7>, стили списков или определений) настраивается в меню Изменение стиля, расположенном в панели управления форматированием текста редактора FrontPage Express. Здесь же можно задать название используемого при наборе шрифта (рекомендуется использовать шрифт, установленный по умолчанию), определить позиционирование текста нажатием кнопок Выравнивание по левому краю, Выравнивание по правому краю или Выравнивание по центру, аналогично тому, как это делается в редакторе Microsoft Word, отрегулировать размер шрифта с использованием кнопок Увеличить размер текста или Уменьшить размер текста и, наконец, задать для выделенного участка текста жирное, наклонное или подчеркнутое написание. Нажатие на кнопки управления величиной шрифта уменьшает или увеличивает размер отображаемых символов выделенного участка текста на один пункт. Следует помнить, что Microsoft FrontPage Express версии 2.0 не поддерживает в составе интерфейса форматирование текста по всей ширине экрана с использованием директивы ALIGN="JUSTIFY", поэтому такое позиционирование можно задать, только записав соответствующий тег вручную в окне Просмотр или правка HTML. Изменить цвет символов, которыми отображается текст в окне броузера, можно, выделив мышью какой-либо отрывок текста, нажав на кнопку Цвет символов и выбрав нужный цвет в предлагаемой программой цветовой палитре.

Текст можно также импортировать в html-документ из буфера обмена с использованием команды Вставить из меню, появляющегося при нажатии правой кнопки мыши в любой точке рабочего окна FrontPage Express, либо воспользовавшись соответствующей кнопкой в системной панели редактора.

СОВЕТ Рекомендуется импортировать текст в html-документ из буфера обмена, предварительно набрав его в редакторе Notepad (Блокнот). При переносе текстов на web-страницу из других текстовых редакторов, например из Microsoft Word, иногда происходит нарушение форматирования текстовых блоков.

Списки и разделители

Нумерованные и маркированные списки создаются в открытом документе FrontPage Express по тому же алгоритму, что и списки, включаемые в документ Word. Для этого можно использовать либо кнопки Нумерованный список и Маркированный список панели форматирования FrontPage Express, либо меню стилей, выбрав в нем соответствующий пункт.

Разрыв текста можно создать, выбрав пункт меню Вставка > Разрыв, указав в появившемся диалоговом окне параметры переноса строк после разрыва абзаца. Горизонтальная разделительная линия вставляется в web-страницу с помощью пункта меню Вставка > Горизонтальная линия. Параметры отображения разделительной линии, такие как цвет, высота, ширина, позиционирование, можно изменить, выделив линию нажатием левой кнопки мыши и выбрав в меню, появившемся по нажатии правой кнопки, пункт Свойства горизонтальной линии (рис. 7.7).Окно настройки свойств выделенной мышью разделительной линии вызывается также нажатием сочетания клавиш Alt+Enter.

Рис. 7.7. Окно настройки свойств разделительной линии

Размещение иллюстраций

Графические изображения включаются в web-страницу нажатием стандартной для приложений MS Office кнопки Добавить рисунок, расположенной в инструментальной панели FrontPage Express, либо с помощью пункта меню Вставка >Изображение. Параметры отображения картинки в броузере можно изменить, выделив изображение нажатием левой кнопки мыши и выбрав нужный пункт выпадающего по нажатии правой кнопки меню Свойства изображения, либо нажатием на клавиши Alt+Enter, если рисунок уже выделен. В появившемся диалоговом окне (рис. 7.8) можно установить практически полный спектр возможных настроек отображения иллюстрации.

Рис. 7.8. Окно настройки свойств изображения

Вкладка Общие диалогового окна Свойства изображения позволяет указать адрес расположения графического файла, его тип и параметры (чересстроность и прозрачность для GIF, качество и разрешение для JPEG), ввести в поле Текст альтернативный текст, отображающийся на web-странице в случае, если клиентский броузер не поддерживает загрузку рисунков, или задать имя фрейма, в котором должна отображаться картинка. Вкладка Видеозапись управляет настройками видео ролика, который можно интегрировать в html-документ вместо картинки, а вкладка Внешний вид открывает возможность установить толщину рамки изображения, если оно предназначено для организации гиперссылки, указать позиционирование картинки на странице, ширину отступов от рисункав пикселах и геометрические размеры изображения.

ПРИМЕЧАНИЕ Если вы планируете использовать изображение, интегрированное в html-документ, в качестве гиперссылки, рекомендуется установить значение толщины рамки картинки (вкладка Внешний вид диалогового окна Свойства изображения) ровной нулю.

Гиперссылки

Для того чтобы организовать гиперссылку с web-страницы на какой-либо другой документ или файловый объект, необходимо проделать следующие действия:

  • Выделите мышью отрывок текста либо изображение, которому вы хотите назначить свойства гиперссылки.
  • Выберите пункт меню Вставка > Гиперссылка либо нажмите кнопку Создать или изменить ссылку инструментальной панели FrontPage Express.
  • Укажите тип протокола, по которому следует транслировать вызываемые при активизации гиперссылки данные, URL ресурса, на который ссылается документ, а при необходимости впишите необходимый параметр в поле Кадр назначения, которое будет подставлено в качестве значения атрибута TARGET.
  • Нажмите ОК.

Ссылку на новую страницу можно указать, открыв в окне, появившемся по нажатии кнопки Создать или изменить ссылку, вкладку Новая страница, где в поле Название страницы следует ввести значение тега <TITLE>, в поле URL-адрес страницы — путь к директории на диске, где будет размещаться создаваемый редактором файл, а в поле Кадр назначения — параметр атрибута TARGET текущей гиперссылки. Как только все значения будут указаны, необходимо нажать кнопку ОК для запуска меню, определяющего тип создаваемого вами html-документа (рис. 7.9).

Рис. 7.9. Меню создания новой страницы

Данное меню содержит шесть пунктов. При выборе пункта Нормальная страница FrontPage Express автоматически создает чистую страницу, не содержащую каких-либо компонентов. Пункт Мастер персональных основных страниц поможет вам настроить параметры создаваемого html-документа в диалоговом режиме(рис. 7.10). Пункт Мастер форм предназначен для облегчения процесса создания web-страниц, содержащих интерактивные формы. Пункт Новая страница папки для Web-представления позволит вам создать документ, который может быть использован как в качестве шаблона для проектирования других документов вашего сайта, так и для оформления системных папок в случае, если ваша операционная система поддерживает функцию web-интеграции. И наконец, пункты Форма обозрения и Форма подтверждения предназначены для организации web-страниц, включающих в себя дополнительные компоненты интерактивных форм, например форму опроса посетителей вашего ресурса или форму, посредством которой пользователи смогут подтвердить введенные ранее данные.

Рис. 7.10. Мастер создания новой домашней странички

Таблицы

Для того чтобы создать новую таблицу в редакторе Microsoft FrontPage Express, необходимо воспользоваться командой Вставить таблицу системного меню Таблица либо нажать одноименную кнопку, расположенную на стандартной панели инструментов (она аналогична соответствующей кнопке текстового редактора Microsoft Word). В результате на экране появится диалоговое окно, которое позволит вам установить параметры создаваемой таблицы (рис. 7.11).

Рис. 7.11. Диалоговое окно Добавить таблицу

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

Управлять параметрами таблицы можно с использованием соответствующих пунктов системного меню Таблица, которое позволит вам копировать ее в буфер обмена, вставлять, удалять и добавлять строки, ячейки и столбцы, включать в таблицу заголовок, объединять или разбивать выделенные ячейки, а также произвольно выделять различные элементы таблицы. Операции удаления и копирования возможны только с выделенными участками таблицы, вставка осуществляется в текущую позицию, указанную курсором.

СОВЕТ Выделить несколько строк таблицы либо снять выделение с какой-нибудь одной строки можно щелчком на них левой кнопкой мыши, удерживая при этом клавишу Shift. Отдельные ячейки выделяются одновременным щелчком левой кнопкой мыши с нажатием клавиши Ctrl.

Помимо средств выделения и преобразования строк и столбцов системное меню Таблица содержит пункт Свойства таблицы, выбор которого вызывает на экран окно настройки параметров текущей таблицы (рис. 7.12).

Рис. 7.12. Окно настройки параметров текущей таблицы

С использованием этого окна можно не только изменить все заданные первоначально значения, такие как размер рамки или экранная ширина таблицы, но и указать фоновое изображение или фоновый цвет, которые будут «подложены» под таблицу, а также установить цвета рамки. Аналогичные параметры можно изменить для каждой отдельно взятой ячейки, отметив ее курсором мыши и выполнив последовательность команд Таблица > Свойства ячейки.

СОВЕТ Если вы хотите сделать границы созданной таблицы невидимыми, установите нулевое значение параметра Размер рамки в диалоговом окне Свойства таблицы системного меню Таблица.

Формы

Для того чтобы включить в разрабатываемый вами HTML-документ интерактивную форму, необходимо проделать следующую последовательность действий:

  • Установите курсор в ту позицию на экране, в которой вы хотели бы разместить интерактивную форму.
  • Выберите пункт Поле формы в меню Вставка и в нем укажите интересующий вас компонент.
  • Установив курсор внутрь поля формы, автоматически созданной программой FrontPage Express, добавьте согласно предложенному выше алгоритму все недостающие компоненты.
  • Поместив указатель мыши внутрь поля созданной вами формы, нажмите правую кнопку мыши и выберите в появившемся на экране меню пункт Свойства формы.
  • В появившемся диалоговом окне Свойства формы (рис. 7.13) выберите из предложенного списка тип используемого вами сценария передачи данных на сервер (по умолчанию предлагается стандартный интерфейс CGI), присвойте форме уникальное имя и при необходимости укажите значения скрытых полей формы.

Рис. 7.13. Окно настроек свойств формы

  • Нажав на кнопку Настройка, укажите в поле Действия появившегося диалогового окна (рис. 7.14) URL, по которому вызывается используемый вами сценарий CGI, а в поле Метод — метод передачи данных серверу (GET илиPOST) и, наконец, в нижнем поле — тип кодировки передаваемой информации.

Рис. 7.14. Окно установок обработчика форм

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

ПРИМЕЧАНИЕ Следует учитывать, что форма, созданная вами с использованием размещенного на удаленном сервере сценария CGI, не будет работать на локальном компьютере. Настройку и окончательную отладку формы вам придется осуществлять непосредственно на сервере в режиме on-line, что может занять чрезвычайно много времени.

Завершая тему создания форм средствами редактора Microsoft FrontPage Express, хочется дать несколько общих рекомендаций, которые позволят вам подготовить формы более грамотно, сделать их простыми в заполнении и популярными у посетителей вашего сайта.

  • Поясните на web-странице, содержащей интерактивную форму, зачем нужна эта форма и почему посетитель должен ее заполнить. Старайтесь не давать пространных объяснений, сформулируйте информацию по возможности кратко, но внятно и исчерпывающе.
  • Не создавайте форму, состоящую из нескольких десятков вопросов и занимающую по объему более двух физических экранов, — посетитель просто устанет ее заполнять. Чем длиннее форма, тем меньше шансов, что пользователи станут тратить на нее время.
  • Включайте в форму вопросы личного характера только тогда, когда это действительно необходимо: пользователи не любят оставлять информацию о себе. Обязательно объясните, зачем вам нужны эти данные. Старайтесь предлагать демографические вопросы в последнюю очередь: если посетитель заполнил все остальные поля формы, психологически ему будет жаль уже потраченного времени, и он скорее заполнит форму до конца, чем покинет страницу.
  • Статистика показывает, что пользователи Интернета читают вопросы интерактивных анкет невнимательно, лишь бегло проглядывая текст. Поэтому чем более кратко будут сформулированы вопросы, тем больше вероятность, что вы получите от посетителей вашей странички достоверные данные.
  • Старайтесь представлять вопросы четко и ясно, избегая пространных и неопределенных формулировок. Если вы напишете в форме «Хорошо ли оформлена моя страничка?», посетитель непременно задумается: «А что значит "хорошо"? Красиво, но медленно загружается? Или загружается быстро, нона вид страшна как атомная война?»
  • Избегайте формулировок, провоцирующих пользователя дать заранее негативный ответ. Если вы спросите, например, «Вызывает ли у Вас цветовое решение моей странички неприятные ассоциации?» в девяноста процентах случаев вы получите утвердительный ответ, даже если это на самом деле не так. Поставьте себя на место читателя и подумайте, как отреагировали бы на каждый вопрос лично вы.
  • Если ответ на какой-либо вопрос пользователь должен выбирать из предложенного списка, такой список должен содержать все возможные варианты ответа: у посетителя должна оставаться свобода выбора. Например, на вопрос «Нравится ли вам музыка the Beatles?» могут быть три варианта ответа: «Да», «Нет», «А что это такое?». С другой стороны, если на вопрос «Ваш пол?» вы предложите на выбор варианты «Мужской», «Женский» и «Не знаю», это будет выглядеть по меньшей мере глупо.

Прочие элементы FrontPage

Помимо перечисленных Microsoft FrontPage Express позволяет оперировать с другими элементами документов HTML. Например, вы можете включить в html-код произвольный комментарий, воспользовавшись пунктом меню Вставка >Примечание. Можно интегрировать в web-страницу элемент управления ActiveX, апплет Java, анимацию PowerPoint или какой-либо иной plug-in, вызвав одну из опций меню Вставка > Другие составляющие. Для того чтобы добавить в html-документ сценарий VBScript или Java Script, необходимо воспользоваться пунктом меню Вставка > Сценарий, набрав в появившемся на экране окне код создаваемого вами скрипта.

Если вы хотите разнообразить свою страницу не функциональным, а чисто декоративным объектом, можете включить в заголовок html-документа бегущую строку, описание которой FrontPage Express автоматически превратит в код Java Script, обрабатываемый интерпретатором броузера одновременно с кодом HTML, либо применит для ее представления теги HTML 4.O. Для этого вам необходимо использовать пункт меню Вставка > Бегущая строка, при выборе которого на экране появится окно настройки свойств бегущей строки (рис. 7.15).

Рис. 7.15. Окно настройки свойств бегущей строки

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

ПРИМЕЧАНИЕ Учтите, что в некоторых случаях бегущая строка корректно отображается только в броузере Microsoft Internet Explorer. Программа Netscape Navigator может вывести ее на экран с ошибками, например, в виде статической текстовой строки, проигнорировав разметку анимации.

Весьма интересны с точки зрения компоновки html-документа так называемые компоненты WebBot, интеграция которых в web-страницу предусмотрена редактором FrontPage Express посредством пункта меню Вставка > КомпонентWebBot (рис. 7.16).

Рие. 7.16. Окно вставки компонентов WebBot

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

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

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

Как вы можете видеть, программа Microsoft FrontPage Express является весьма простым и удобным инструментом для создания шаблонов web-страниц, код которых впоследствии можно оптимизировать вручную в любом текстовом редакторе. Эта несложная программа позволит вам избежать утомительной процедуры написания длинных программных кодов разметки гипертекста, особенно часто повторяющихся его фрагментов, появляющихся, например, при подготовке таблиц. Да и визуальное представление интегрируемых вами в html-документ компонентов значительно упрощает компоновку страницы, поскольку, создавая ее шаблон, вы можете видеть на экране монитора внешний вид всех объектов, из которых состоит разрабатываемый вами ресурс.

Освоив FrontPage Express, вы без труда перейдете к другим, более сложным версиям пакета Microsoft FrontPage, речь о которых пойдет чуть ниже, причем для этого вам не придется переучиваться заново или осваивать принципиально новый интерфейс. Все версии Microsoft FrontPage построены по одному и тому же принципу, просто они обладают различным набором функциональных возможностей.

Microsoft FrontPage 98

Программный комплекс Microsoft FrontPage 98 предназначен не столько для разработки web-страниц, сколько для управления удаленным web-сервером и отладки составляющих сайт документов на локальном компьютере.

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

Вторая программа, входящая в комплект поставки FrontPage 98, называется FrontPage Explorer.

Данное приложение позволяет проверить целостность гиперссылок внутри всего проекта, опубликовать сайт в Интернете при помощи встроенного FTP-клиента или отправить на предоставляющий вам web-хостинг сервер только те документы, которые были изменены вами с момента последней публикации. Доступ к разрабатываемому ресурсу открывается в программе FrontPage Explorer только по паролю, поэтому посторонние пользователи компьютера не смогут каким-либо образом изменить содержимое сайта в ваше отсутствие. Еще одним существенным достоинством FrontPage Explorer является то, что он позволяет открывать, редактировать и сохранять документы не только с использованием локального диска, но и непосредственно на удаленном сервере, где размещается ваш сайт.

И наконец, последняя программа, составляющая пакет FrontPage 98, называется FrontPage Editor. Именно в ней осуществляется редактирование html-документов, причем по своему интерфейсу FrontPage Editor практически идентичен уже знакомому вам редактору FrontPage Express.

Существенным отличием FrontPage Editor от FrontPage Express является то, что рабочее окно данного приложения имеет три вкладки, расположенные в левом нижнем углу. Первая из них представляет разрабатываемую web-страницув виде визуальной структурной разметки элементов документа, таких как заголовки, таблицы и кнопки навигации, вторая позволяет редактировать составляющий документ код HTML, третья демонстрирует страницу в режиме предварительного просмотра, причем так, как она будет выглядеть в броузере Microsoft Internet Explorer.

Пакет Microsoft FrontPage 98 содержит более пятидесяти шаблонов графического оформления web-страниц (так называемые «темы» FrontPage), включающих фоновые рисунки, кнопки, разделительные линии, порядка десяти примеров уже готовых сайтов и домашних страничек, содержащих гостевые книги, формы конференций и локальных поисковых систем, более двадцати шаблонов для отдельных html-документов с уже разработанными таблицами компоновки элементов страниц. Кроме того, редактор FrontPage Editor содержит расширенные средства работы с фреймами, огромный спектр всевозможных интерактивных форм различного назначения, широчайший ассортимент компонентов Web-Bot, внушительную коллекцию уже готовых интерактивных элементов, таких как счетчики посещений, выполненные в виде Java-апплетов кнопки, реагирующие на движения указателя мыши, и др. Здесь же имеются средства для работы с серверными базами данных, инструменты для создания программной анимации, например, бегущих строк, движущихся текстов и картинок, перемещающихся заставок, а также полнофункциональный редактор для подготовки различных сценариев на языке Java.

Иными словами, с применением программного пакета Microsoft FrontPage 98вы сможете создать полноценный web-сайт, самостоятельно разработав практически все необходимые вам интерактивные компоненты — доски объявлений, web-конференции и локальные поисковые системы, либо «собрав» их из форм FrontPage Editor, либо воспользовавшись уже готовыми шаблонами. Единственное, о чем вам следует помнить, так это о том, что используемые в MicrosoftFrontPage скрипты, предназначенные для передачи данных от клиентского компьютера серверу и обратно, входят в специальный пакет утилит, называемый серверными расширениями FrontPage. Если администратор предоставляющего вам web-хостинг интернетовского узла установил этот пакет на серверном компьютере, все интерактивные компоненты будут работать на вашем сайте безпроблем. В противном случае процедура вызова соответствующего сценария, встроенная в созданные с помощью FrontPage формы, будет обращаться при попытке передачи данных «в никуда», что, естественно, приведет к появлению ошибки и полной неработоспособности интерактивных компонентов вашего сайта.

Microsoft FrontPage 2000

Microsoft FrontPage 2000 (рис. 7.17) является более поздней реализацией программного пакета Microsoft FrontPage 98. С одной стороны, редактор стал значительно удобнее, поскольку все три программы, бывшие ранее независимыми приложениями, объединены здесь в одном интерфейсе. Появилась возможность редактировать страницу и шаблоны непосредственно в главном окне программы, настраивать по собственному вкусу панель инструментов, включать проверку орфографии и использовать другие грамматические модули Microsoft Office.

Рис. 7.17. Интерфейс программы Microsoft FrontPage 2000

Стало возможным модифицировать прилагаемые к комплекту поставки «темы» — графические шаблоны web-страниц, а также автоматически проверять документ на корректность отображения в разных типах броузеров. Обеспечена практически полная совместимость программы с другими приложениями Microsoft Office 2000.

С другой стороны, пользователю, привыкшему работать с FrontPage Express или FrontPage 98, где редактирование web-страниц осуществляется «в полный экран», первое время чрезвычайно трудно привыкнуть к созданию документа в оконном режиме. Не очень хорошо продумана система взаимодействия с серверными базами данных. Часть функций предыдущей версии редактора вообще не претерпела изменений. В целом, пакет Microsoft FrontPage 2000 позволяет делать практически то же самое, что и Microsoft FrontPage 98.

Типичные ошибки

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

  1. При переносе проекта на сервер перестают работать интегрированные вweb-страницы сайта интерактивные формы.

Возможных причин данной проблемы может быть три:

  1. На удаленном узле не установлены серверные расширения Microsoft Front Page. ;
  2. Пользователь открывал и изменял в редакторе FrontPage Editor, FrontPage jExpress или FrontPage 2000 содержимое включающих формы web-страниц,уже помещенных на сервер, в результате чего компонентам формы были автоматически присвоены значения по умолчанию. После этой операции форма, как правило, утрачивает работоспособность.
  3. При использовании собственных сценариев CGI, вызываемых в коде формы извне, скорее всего, указаны либо неправильный адрес вызываемогоскрипта, либо неверный метод передачи данных.
  2. После публикации ресурса в Интернете на web-страницах перестают отображаться графические иллюстрации.

Можно назвать две группы наиболее характерных причин этой ошибки:

  3. В вызывающем изображение коде указан неверный путь к графическому элементу, либо при публикации страницы программа «забыла» изменить локальные пути на адрес URL, либо изображение размещено не в той серверной директории, которая указана в вызывающем адресе, либо указан полный (абсолютный) путь вместо короткого (относительного), что также иногда может привести к ошибке. Попробуйте открыть файл на редактирование непосредственно с сервера и интегрировать изображение в страницу заново, указав его расположение в соответствующей серверной директории.
  4. Б. Некоторые графические редакторы при сохранении файла на диске назначают ему расширение, записанное в заглавном символьном регистре, тогда как в коде, вызывающем изображение, оно записано в строчном. В Windows-совместимых платформах это не имеет значения: программы умеют воспринимать оба варианта записи, но в UNIX-совместимых операционных системах, под управлением которых работает большая часть http-серверов,это приводит к ошибкам. Либо исправьте описывающий картинку отрывок html-кода, либо измените запись расширения файла.
  3. При переносе сайта на другой сервер на web-страницах пропадают изображения, фоновые рисунки и нарушается целостность гиперссылок.

Проблема заключается в том, что для некоторых элементов ваших html-доку-ментов, вызываемых непосредственно из кода разметки гипертекста, указаны не относительные пути (../Images/picture.gif), а абсолютные (http://www.server.ru/images/picture.gif). Естественно, что при смене адреса сервера, предоставляющего web-хостинг, эти элементы перестают отображаться в клиентском броузере.

  4. После включения в web-страницу средствами программы Microsoft FrontPage Express заголовка или другого текста, набранного кириллицей, в броузере они отображаются символами «?>, хотя в окне Просмотр или правка HTML все выглядит нормально.

Откройте окно Свойства страницы (Файл > Свойства страницы) и установите в пунктах Для сохранения и Для отображения раздела Кодировка HTML параметр Кириллица.

  5. При наборе текста в редакторе Microsoft FrontPage по нажатии клавиши Enter программа устанавливает слишком большой межстрочный интервал.

Переносите строки нажатием сочетания клавиш Shift+Enter.

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

Это происходит в том случае, если вы используете выравнивание списка по левому или правому краю, либо по центру экрана. Отмените выравнивание вводимого списка либо удалите вручную в коде HTML теги <Р ALIGN="значение"> </Р>, размещенные внутри тегов <LI> и </LI>.

Что нового мы узнали?

В этом уроке мы научились:

  • Устанавливать программу Microsoft FrontPage Express.
  • Подготавливать к публикации тексты и списки с использованием FrontPage.
  • Интегрировать в web-страницу графические иллюстрации инструментальными средствами FrontPage.
  • Создавать при помощи FrontPage таблицы.
  • Создавать интерактивные формы с использованием программных средств FrontPage.


Урок 8
Каскадные таблицы стилей

  • Селекторы
  • Группировка селекторов
  • Принцип наследования
  • Свойства элементов
  • Свойства шрифта
  • Свойства текста
  • Свойства цвета и фона
  • Свойства границ
  • Свойства списков
  • Вспомогательные,свойства элементов
  • Классы
  • Идентификаторы
  • Комментарии
  • Безопасность
  • Подключение к web-странице
  • Маленькие хитрости CSS
  • Пример файла CSS
  • Что нового мы узнали?

Уже изученных нами основ HTML вполне достаточно, чтобы понять простую истину: описание необходимых элементов языка разметки гипертекста — чрезвычайно сложное и утомительное занятие. Представьте себе, что разрабатываемая вами web-страничка содержит десять абзацев текста, которые необходимо расположить по всей ширине окна броузера, и двадцать иллюстраций, которые нужно выровнять по центру экрана. Это означает, что вы должны будете десятьраз записать в коде html-документа теги <Р ALIGN="JUSTIFY"></P> и двадцать раз употребить теги <CENTER> </CENTER> либо столько же раз указывать атрибут ALIGN="CENTER" в директиве <IMG>. А если вы формируете на экране сложную таблицу, каждая из пятидесяти ячеек которой должна иметь высоту ровно 20 пикселов? Представляете, сколько раз вам придется специфицировать атрибут HEIGHT, чтобы получить требуемую высоту ячеек в броузерах всех типов? Копирование команд через буфер обмена и использование WYSIWYG-редакторовв данной ситуации обычно не облегчает задачу, поскольку в первом случае вам, скорее всего, надоест щелкать мышью прежде, чем все необходимые директивы будут помещены в соответствующие строки кода, а во втором случае сгенерированный программой код все равно потребует длительного и тщательного редактирования.

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

Выход нашелся достаточно быстро. Программисты компании-разработчика стандарта HTML, консорциума W3C, задумались: а нельзя ли описать все параметры используемых в коде web-страниц тегов один раз, да так, чтобы больше такой необходимости до момента окончания разработки каждого нового ресурса Интернета не возникало? Оказалось, что можно. Для этого и был создан новый стандарт CSS (Cascading Style Sheets — Каскадные таблицы стилей).

CSS в отличие от HTML использует несколько иной алгоритм описания элементов web-страниц. Один раз указав свойства каждого элемента в текстовом файле с расширением .ess и назначив им свойства стиля, вы можете затем подключить этот файл к html-документу, заставив клиентский броузер считывать значения параметров каждого компонента web-страницы уже оттуда. Более того, поскольку стили описываются вами в отдельном файле, вы можете подключить его к неограниченному количеству различных документов, раз и навсегда отказавшись от необходимости назначать свойства каждому конкретному объекту. Чрезвычайно удобно, не так ли? Есть и еще одно неоспоримое преимущество использования CSS перед традиционным способом подготовки web-страниц, которое кажется неочевидным на первый взгляд: для того чтобы изменить стиль оформления какого-либо элемента всех web-страниц вашего сайта, достаточно немного подправить всего одну строку кода в одном файле. Теперь, полагаю, вы убедились в том, что метод описания стилей с помощью CSS является оптимальным для web-дизайна. Осталось только выяснить, как применить все эти преимущества на практике.

Селекторы

Итак, параметры и директивы CSS описываются по принятым в данном стандарте правилам в специальном файле с расширением .ess. Общий синтаксис записи стилей всех элементов HTML в таком файле выглядит следующим образом:

НАЗВАНИЕ ЭЛЕМЕНТА (свойство: значение:}

В качестве названий элементов принимаются, как правило, теги HTML. Например, если вы хотите, чтобы все заголовки первого уровня в вашем html-доку-менте отображались синим цветом и имели размер в двадцать пикселов, присоединенный к web-страничке файл CSS должен включать следующую запись:

H1 {color: blue: font-size: 20pt;}

Такая директива CSS называется селектором. Все, что содержится в фигурных скобках справа от названия элемента, принято называть для простоты определением селектора. Каждое определение содержит перечисление свойств и значений. Описания всех свойств и значений заключаются в фигурные скобки и разделяются точкой с запятой. Очевидно, что селектор управляет внешней формой отображения объектов HTML и может содержать только те свойства и значения, которые характерны для того или иного элемента языка разметки гипертекста.

Группировка селекторов

Если в нескольких разных селекторах используются одни и те же определения, с помощью языка CSS их можно сгруппировать между собой. Группировка селекторов в единую директиву осуществляется следующим образом: сначала идет перечисление через запятую всех элементов, использующих одинаковое определение, затем в фигурных скобках указываются их свойства и значения. Ниже приведены синтаксис записи и пример использования такой комбинированной директивы.

НАЗВАНИЕ ЭЛЕМЕНТА-1. НАЗВАНИЕ ЭЛЕМЕНТА-2. ... НАЗВАНИЕ ЭЛЕМЕНТА-N {свойство: значение:}

Пример:

H1. Н2. НЗ. Н4 {font-family: Helvetica: color: red: font-size: 30pt:}

Аналогичным образом можно группировать между собой определения, описывая их наподобие некой «подпрограммы»:

НАЗВАНИЕ ЭЛЕМЕНТА {Определение-1:Определение-2: Определение-N;}

На самом деле подобная запись идентична перечислению списка определений подряд, в одну строку, расположенную правее названия элемента и ограниченную фигурными скобками, однако в «развернутом» варианте читать листинг файла CSS гораздо проще и удобнее. Вот пример такого оформления определений:

Н1{

font-family: Helvetica;

font-style: italic:

font-Size: 30pt;

color: black:}

Принцип наследования

Для элементов HTML, описанных в файле CSS, справедлив принцип наследования. Что это означает?

Предположим, в используемом вами файле CSS заголовкам первого уровня составляющих сайт документов присвоен стиль, определяющий отображение элементов <Н1> зеленым цветом. Однако для элемента выделения текста жирным шрифтом <STRONG> никакой цветовой спецификации не было задано. Теперь представим себе, что в коде одной из использующих CSS web-страниц встречается следующая директива:

<Н1>Каскадные таблицы стилей это <STRONG>Kpyтo!</STRONG></Hl>

В окне броузера слово «круто» отобразится жирным шрифтом зеленого цвета. Иными словами, элемент <STRONG> унаследовал присвоенные тегу <Н1> свойства, поскольку в предложенной выше строке последний является «старшим» тегом, директивой более высокого уровня.

Приведу другой пример. Положим, в файле CSS вы установили для элемента<Р> выравнивание по левой границе экрана, не указав каких-либо дополнительных параметров для элемента <IMG>. Если в коде html-документа вы заключите директиву вызова изображения в тег разметки текстового абзаца, как показано в следующем примере, то изображение автоматически будет позиционировано по левому краю окна броузера:

<P><IMG SRC="image.gif" WIDTH="310" HEIGHT="219"></P>

Именно на принципе наследования свойств одного элемента другим строится простой метод описания единых параметров отображения для всех видимых элементов web-страниц. Это описание можно осуществить с помощью всего одной строки кода. Не верите? Напрасно. Включите в листинг вашего ess-файласледующую директиву:

BODY{

background: white:

color: black:

font-family: sans-:erif;

font-size: l0pt:

}

Догадались, в чем кроется секрет? Все элементы web-страниц по умолчанию являются дочерними директивами тега <BODY>, а значит, они будут автоматически

наследовать его свойства. Разумеется, существуют свойства, не наследуемые теми или иными элементами. Например, тег <HR>, отображающий в окне броузера горизонтальную разделительную линию, никоим образом не оперирует параметрами текста, поэтому он не сможет унаследовать, например, значение свойства font-size, определенное для тега <BODY>, даже несмотря на то, что последний является для него родительским.

Свойства элементов

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

Свойства шрифта

Свойства шрифта могут описывать элементы, содержащие текст. Среди них можно перечислить такие, как А, В, BODY, CAPTION, DD, DL, DT, EM,H1-H6, I, LI, P, SMALL, STRIKE, STRONG, TD, TH, U и некоторые другие. Данные элементы могут включать в себя в качестве описаний свойства, перечисленные ниже. Свойство font-family используют для указания шрифта или семейства шрифтов, которыми будет отображаться обрабатываемый элементом текст. Применять данное свойство следует достаточно осторожно, поскольку возможна ситуация, при которой указанного шрифта не окажется на компьютере пользователя. Если вы не уверены в том, что требуемый шрифт установлен в системе всех потенциальных посетителей вашего сайта, поместите на сервер данный шрифт в формате TTF (True Type Font) без использования архиваторов и укажите в значении свойства font-family URL к этому файлу так, как показано в предложенном ниже примере. Если клиентский броузер не обнаружит требуемого шрифта на машине пользователя, он, воспользовавшись указанным вами URL, загрузит и установит шрифт в автоматическом режиме.

Пример:

P {font-family: Aria! Black URL(' . ./fonts/arialblack.ttf'):}

URL шрифта можно указывать в виде как абсолютного адреса (например, http://www.myserver.ru/fonts/font_name.ttf), так и относительного (например, / fonts / f ontjiame. ttf).

Свойство font-size управляет размером шрифта. Значение этого свойства может быть указано как в абсолютных, так и в относительных величинах. Под абсолютными величинами подразумевается размер шрифта в условных пунктах(pt), сантиметрах (cm), миллиметрах (mm) или пикселах (рх). Относительные величины содержат указание на размер шрифта в процентах от высоты символов, принятой по умолчанию, или в виде следующих определений: smaller — самый маленький шрифт по отношению к установленному по умолчанию, small — маленький шрифт, medium — средний, large — большой шрифт и, наконец, larger — самый большой шрифт. Необходимо помнить, что использование абсолютных значений более предпочтительно, поскольку относительные значения броузеры разных версий могут трактовать весьма различным образом.

Пример:

H1 {font-size: 30pt;}

Н2 {font-size: 100рх:}

H4 {font-size: 60%;}

Свойство font-weight оговаривает толщину символов используемого шрифта. Толщина может быть задана следующими определениями: normal — стандартное написание без каких-либо изменений, lighter — тонкий шрифт, bold —жирный шрифт и, наконец, bolder — очень жирный шрифт. Необходимо учитывать, что значения свойства font-weight обрабатываются интерпретаторами различных броузеров по-разному. Например, Microsoft Internet Explorer отображает текст, которому присвоен параметр bolder, так же, как текст, отмеченный значением bold, a Netscape Navigator отобразит его идентично тексту с параметром normal. К тому же Internet Explorer не умеет различать значения normal и lighter, поэтому эти отрывки текста отображаются в нем одинаковым образом.

Пример:

STRIKE {font-weight: bold:}

Свойство font-variant определяет регистр записи символов и может принимать одно из двух значений: normal — стандартное написание без каких-либо изменений и small-caps, когда все символы, описываемые данным элементом, превращаются в заглавные. Учтите, что свойство font-variant поддерживает только Microsoft Internet Explorer.

Пример:

CAPTION {font-variant: small-caps:}

Свойство font-style описывает правила начертания символов: normal — стандартное написание и italic — написание наклонным шрифтом.

Пример:

ЕМ {font-style: italic:}

Свойства текста

Свойства текста применяются практически ко всем элементам CSS, которые могут включать в себя или описывать текст, правда, с учетом некоторых ограничений в каждом отдельном случае.

Свойство text-align задает расположение текста относительно границ рабочего окна броузера или ячейки таблицы, иными словами — отвечает за выравнивание текстового блока. Соответственно, оно применяется совместно с так называемыми «блоковыми элементами», то есть элементами, поддерживающими отображение текстовых массивов: P, H1-H6, TD, TR и некоторыми другими.

Можно использовать одно из четырех значений данного свойства: left — выравнивание по левой границе экрана или ячейки таблицы, right — по правой границе, center — выравнивание по центру и justify — растягивание текста по всей ширине экрана или табличной ячейки.

Пример:

Р {text-align: justify;}

Свойство text-decoration. Управляет начертанием символов: с его помощью можно задать эффекты отображения зачеркнутого или подчеркнутого текста. Данное свойство может принимать одно из следующих значений: попе — отсутствие всяких эффектов, underline — подчеркнутый текст, line-through — перечеркнутый текст, overline — надстрочный текст и blink — мерцающий текст. Обратите внимание на то, что значение overline данного свойства не поддерживается броузером Netscape Navigator, а значение blink — наоборот, программой Microsoft Internet Explorer.

Пример:

A {text-decoration: none:}

ПРИМЕЧАНИЕ Включение в файл CSS элемента А в совокупности с определением «text-decoration: none» отменяет подчеркивание гиперссылок в документах HTML.

ВНИМАНИЕ Элемент А может быть представлен в тексте файла CSS с использованием четырех определений: link — просто размещенная на web-страницессылка, active описывает состояние ссылки, нажимаемой пользователем в данный момент времени, hover — состояние ссылки в момент, когда пользователь навел на нее курсор мыши и visited отображает посещенную ссылку. Определения состояний записываются через двоеточие после названия элемента, например, A: visited{color:2F4F4F;}.

Свойство text-indent, применяемое, как правило, совместно с элементом Р, указывает на отступ первой строки текстового блока в пикселах, сантиметрах, миллиметрах или в процентах от общей длины строки. Например, его используют для организации табулированных абзацных отступов, так называемых «красных строк».

Пример:

Р {text-indent: 30pt;}

Свойство line-height устанавливает межстрочный интервал текста web-страницы в пикселах, сантиметрах, миллиметрах или процентах от интервала, определенного по умолчанию. К этому свойству можно применить значение normal, оставляющее определенный в настройках клиентского броузера межстрочный интервал без изменений.

Пример:

Р { line-height: 5px;}

Свойство letter-spacing устанавливает расстояние между символами текста в пикселах, сантиметрах или миллиметрах, но распознается оно только броузером Microsoft Internet Explorer. Возможно использование атрибута normal, оставляющего межсимвольный интервал, принятый по умолчанию.

Пример:

Р { letter-spacing: Зрх:}

Свойство vertical-align определяет вертикальное выравнивание текста в ячейках таблиц или графических изображений в текстовом блоке и также не распознается броузером Netscape Navigator. Оно может принимать одно из следующих значений: top — позиционирование по верхней границе ячейки, middle — по центру ячейки, bottom — по нижней границе ячейки, baseline — по условной базовой линии, top-text — по верхней точке текстовой строки, bottom-text по нижней точке текстовой строки.

Пример:

ТО {vertical-align: top:}

IMG {vertical-align: top-text;}

Свойство text-transform задает трансформацию определяемого элементом текстового блока: normal — стандартное отображение текста без каких-либо изменений, capitalize — каждое слово абзаца начинается с заглавной буквы, при этом регистр символов, определенный в коде HTML, игнорируется; uppercase — все символы текста становятся заглавными и, наконец, lowercase — все символы становятся строчными. Это свойство поддерживается только броузером Microsoft Internet Explorer.

Пример:

CAPTION {text-transform: capitalize;}

Свойства цвета и фона

Свойство color определяет цвет любого элемента CSS.

Пример:

SMALL {color: red:}

Свойство background-color указывает на цвет фона какого-либо элемента, причем этот цвет устанавливается именно для отображения элемента, а не всего html-документа. Учтите, что интерпретаторы разных броузеров обрабатывают данное свойство неодинаковым образом: например, Netscape Navigator выделяет фоновым цветом сам элемент страницы, причем выделение ограничивается его видимой шириной, a Internet Explorer растягивает выделение на всю ширину страницы.

Пример:

H1 { background-color: #f00000;}

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

Пример:

BODY {background-image: URL(/images/picture.gif):}

Свойство background-repeat определяет параметры повторения (копирования)фонового изображения в разных направлениях видимой части html-документа.Может принимать одно их следующих значений: no-repeat — не повторять изображение; repeat — повторять изображение во всех направлениях; repeat-x —только по горизонтали; repeat-y — только по вертикали.

Пример:

BODY {background-repeat: no-repeat:}

Свойство background-attachment устанавливает правила скроллинга фонового изображения. Может принимать одно из двух значений: scroll заставляет фоновое изображение двигаться вместе с содержимым web-страницы при прокрутке документа, a fixed фиксирует изображение на экране.

Пример:

BODY { background-attachment: scroll:}

Свойство background-position, в случае если значение свойства background-repeat установлено repeat-x или repeat-y, позволяет зафиксировать положение фонового изображения. Оно может принимать следующие значения: top — позиционирование по верхней границе экрана, middle — по центру экрана, bottom — по нижней границе, left — выравнивание по левой границе экрана или ячейки таблицы, right — выравнивание по правой границе, center — выравнивание по центру. Можно также указать в качестве значения этого свойства расстояние от левой и верхней границы видимой части экрана до изображения в пикселах, миллиметрах или сантиметрах.

Пример использования:

BODY {background-position: 30cm 0cm;}

TD {background-position: middle:}

Свойства границ

Свойства margin-left, margin-right, margin-top и margin-bottom определяют значения отступов вокруг содержащего их элемента в пикселах, сантиметрах или миллиметрах соответственно слева, справа, сверху и снизу. Отступ представляет собой пустое пространство, не заполненное никакими другими элементами. Данные свойства могут применяться совместно с элементами изображений, абзацев, таблиц, любых других компонентов, для которых вы хотите указать описанные здесь значения.

Пример:

Р {margin-left: 20px;}

IMG{

margin-top: 10mm:

margin-left: 15mm;

margin-bottom: 10mm:

}

Свойства padding-left, padding-right, padding-top и padding-bottom, аналогично рассмотренным выше, описывают значения отступов от видимых рамок объектов HTML, например таблиц. Величина отступов также определяется в пикселах, сантиметрах или миллиметрах. Они могут применяться как вместе, так и по отдельности.

Пример:

TABLE {

padding-left: 10рх:

padding-right:10px;

padding-top: 15px:

padding-bottom: 15px:

}

Свойства border-top-width, border-bottom-width, border-right-width и border-left-width определяют толщину видимого обрамления объектов, например таблиц и их ячеек, по правилам, аналогичным записи свойств, указанных выше.

Пример:

TD{

border-top-width: 2px:

border-bottom-width: 2px:

border-right-width: 1mm:

border-left-width: 1mm;

}

Свойство border-color описывает цвет видимого обрамления объектов — рамок изображений и бордюров таблиц.

Пример:

TABLE (border-color: blue;}

Свойства списков

Свойства списков применяются для настройки отображения элементов нумерованных и маркированных списков, определяемых в коде HTML тегом <LI>.В языке CSS данному элементу присваиваются следующие свойства. Свойство list-style-type определяет внешний вид маркера нумерованного или маркированного списка и может принимать одно из перечисленных далее значений: попе — маркер списка не отображается; для маркированного списка disc — метка отображается в виде черного круга, circle — в виде полой окружности, square — в виде черного квадрата; для нумерованного списка decimal —метки отображаются в виде последовательности арабских чисел, lower-roman —в виде последовательности римских цифр, записанных в строчном регистре, upper-roman — в виде последовательности римских цифр в заглавном регистре, lower-alpha — в виде последовательности строчных букв, upper-alpha — в виде последовательности заглавных букв.

Пример:

LI {list-style-type: square:}

Свойство list-style-image позволяет назначить в качестве метки маркированного списка произвольное изображение.

Пример:

LI {list-style-image: URL(/images/marker.gif);}

Свойство list-style-position описывает позиционирование элементов списка и может принимать следующие значения: outside — позиционирование осуществляется по умолчанию и inside — позиционирование без отступа от левой границы рабочего окна броузера. Пример:

LI { list-style-position: inside:}

Вспомогательные свойства элементов

Свойства width и height определяют соответственно ширину и высоту объекта в пикселах, миллиметрах, сантиметрах или процентах от значения, принятого по умолчанию. Применяются они в основном для задания геометрических размеров изображений различной величины в случаях, когда их необходимо выровнять по вертикали или горизонтали. Данные свойства можно использовать как вместе, так и по отдельности.

Пример:

IMG {

height: 80%;

width: 120px:

}

Свойство float указывает на расположение какого-либо объекта в окне броузера относительно других объектов, размещенных рядом. Оно может приниматьодно из следующих значений: попе — расположение объекта по умолчанию, left — расположение объекта слева или right — расположение объекта справа.

Пример:

TD {float: left:}

Свойство clear описывает правила расположения других объектов вокруг данного элемента web-страницы. Принимает одно из следующих значений: попе —расположение объектов по умолчанию, left — расположение слева, right —справа и, наконец, both — расположение с двух сторон.

Пример:

IMG {clear: both;}

Свойство white-space применяется для управления отображением пробелов и переносов между элементами html-документа или словами текста. Свойство может использовать одно из следующих значений: normal — стандартное отображение текста, при котором несколько следующих подряд пробелов преобразуются в один, рге — допускается отображение нескольких символов пробела подряд и, наконец, nowrap — запрещен перенос строки в пределах действия элемента.

Пример:

Р {white-space: рге;}

Свойство display применяется для управления взаимным расположением текстовых строк и объектов на экране монитора. Может принимать одно из следующих значений: block — отображает перенос строки до и после объекта; list-item — переносит строку до и после объекта, а кроме того, добавляет в начало строки маркер, как в случае использования маркированного списка; inline —допускается отображение объекта на одной строке с другими элементами; none — объект не отображается.

Пример :

IMG {display: block;}

Классы

CSS является достаточно гибкой структурой, позволяющей описывать не только определенные параметры для каких-либо элементов таблицы стилей, но и назначать различные свойства одним и тем же ее элементам. Предположим, в тексте вашего html-документа встречается несколько вариантов расположения текста: часть абзацев позиционируется по всей ширине страницы, а часть — по ее левому краю. И в том и в другом случае для описания отрывков текста используется тег <Р>. Если вы назначите данному элементу те или иные свойства, представив его в качестве селектора в файле CSS, то все отрывки текста, помеченные в коде web-страницы тегом <Р>, будут представлены на экране одинаковым образом. Чтобы избежать этого, можно использовать в составе ess-файласпециальные кодовые объекты, называемые классами.

Существуют два метода использования классов. В первом случае класс можно представить как придуманное программистом уникальное имя-идентификатор какого-либо перечня свойств, предваряющееся символом точки и записанное исключительно с применением символов латинского алфавита и цифр. Оно ставится между названием элемента и его описанием. В общем виде синтаксис записи такой функции выглядит следующим образом:

НАЗВАНИЕ ЭЛЕМЕНТА. имя класса {свойство: значение;}

Простым примером использования данной функции CSS может служить следующий отрывок текста ess-файла:

P.myclass {text-align: justify;}

В этом случае именем класса у вас служит символьный определитель «myclass». Теперь, если вы вызовете в коде web-страницы тег форматирования абзаца с указанием имени класса, данному абзацу будут присвоены значения, определенные в описании элемента <Р>:

<BODY>

<Р CLASS="myclass">Teкст, отформатированный согласно директивам CSS</P>

<Р>Текст. отформатированный по умолчанию</Р>

</BODY>

Очевидно, что теперь текст, заключенный в первую пару тегов <Р> и </Р>, будет растянут по всей ширине окна броузера, а текст, заключенный во вторую пару этих тегов, останется отформатированным по умолчанию. Таким образом, вы можете придавать одним и тем же элементам разметки гипертекста различные свойства в пределах одного документа.

Во втором случае класс можно использовать без привязки к какому-либо конкретному элементу, правила записи директив CSS допускают такую возможность. В этом случае общий синтаксис описания класса будет выглядеть так:

.имя класса{свойство: значение;}

В качестве примера такого представления класса можно предложить следующий вариант описания свойств элементов web-страниц:

,myclass{color: green;}

Записав предложенную выше строку в файл CSS, вы можете вызывать класс с именем «myclass» из кода html-документа, присваивая его свойства любому тегу. Например, указав в html-коде директиву

<Р CLASS="myclass">TeKCT, отображаемый зеленым цветом </Р>

вы сделаете так, что выводимый в окне броузера текст будет отображаться зеленым шрифтом. В этом же документе вы можете применить такую команду:

<Н3 CLASS="myclass ">текстовый заголовок</Н3>

Заголовок третьего уровня также будет представлен на экране зеленым цветом. Очевидно, что каждый класс можно вызывать в пределах одной web-страницынеограниченное количество раз, равно как каждый файл CSS может содержать неограниченное количество классов.

Создавая классы CSS, следует помнить о том, что для одного элемента каскадной таблицы стилей может быть специфицирован только один класс. Например, запись

A.class-l.c1ass-2{text-decoration: none;}

является в корне неправильной. Учтите также, что для классов, равно как и для селекторов, справедливы свойства группировки и наследования.

Идентификаторы

В отличие от селекторов и классов, идентификаторы представляют собой кодовые объекты CSS, которые позволяют назначать свойства отдельным компонентам HTML без использования прочих стандартных методов. В файле CSS идентификатор обозначается знаком <#», а в документе HTML — атрибутом ID. Он имеет собственное имя, состоящее из цифр и символов латинского алфавита. Общий синтаксис записи идентификаторов можно представить в следующем виде:

НАЗВАНИЕ ЭЛЕМЕНТА#имя идентификатора {свойство: значение;}

Простым примером использования идентификатора может служить такой отрывок файла CSS:

P#qwerty{text-align: left:}

В html-коде web-страницы этот идентификатор можно вызвать с использованием атрибута ID:

<Р ID="qwerty">Teкст. позиционированный по левой границе экрана</Р>Очевидно, что тег <Р>, включающий атрибут ID, в качестве значения которого использовано имя идентификатора, наследует свойства последнего. Если же в записи этого тега вы не укажете данный атрибут, текст будет выровнен по умолчанию либо согласно другим директивам HTML или CSS. Идентификаторы также можно записывать без указания имени элемента, которому они соответствуют. Так, строка

#qwerty{color: #00FF00:}

создает идентификатор, который может использовать любой элемент HTML, например:

<Н1 ID="qwerty">Teкст заголовка</Н1>

Комментарии

Файл CSS может содержать введенные пользователем комментарии, поясняющие назначение тех или иных участков кода. Комментарии в стандарте CSS заключаются в последовательность символов «/» и «*» следующим образом:

/* текст комментария */

Безопасность

Поскольку стандарт CSS окончательно сложился значительно позже стандарта HTML, в полной мере его поддерживают далеко не все версии броузеров, а именно — Microsoft Internet Explorer начиная с версии 4.0 и Netscape Navigator старше четвертой версии. Более того, интерпретаторы данных броузеров работают, как известно, с некоторыми отличиями, а потому одни и те же элементы, специфицированные согласно стандарту CSS, могут отображаться в них совершенно по-разному. Старые броузеры вообще могут обрабатывать команды CSS по абсолютно непредсказуемому алгоритму, превращая содержимое вашей web-странички в некое подобие малоаппетитной на вид манной каши.

Поэтому с объективной точки зрения нецелесообразно использование для представления содержимого web-страниц каскадных таблиц стилей в полном объеме. Наоборот, рекомендуется применять лишь ограниченный набор элементов, заведомо поддерживаемый броузерами большинства версий. Такой набор директив CSS условно называется «безопасным». В него входят, прежде всего, свойства текста font-family, font-weight и font-size, свойства цвета color и background-color, свойства текста text-align, text-indent, text-decoration и line-height и, наконец, свойства границ margin-left, margin-right и margin-top. Это отнюдь не означает, что другие свойства CSS использовать категорически нельзя, просто делать это следует с осторожностью. Подробные таблицы совместимости стандарта CSS с различными версиями броузеров можно найти на сервере http://style.webreview.com.

Подключение к web-странице

Широкие возможности каскадных таблиц стилей можно использовать совместно с html-документом различными способами. Первый из них подразумевает использование нотаций CSS непосредственно в тегах кода web-страницы, помещаемых в тело документа, ограниченное директивами <BODY> и </BODY>. В этом случае общий вид записи тега HTML будет иметь следующий вид:

<ТЕГ STYLE="свойство: значение">Содержимое тега</ТЕГ>

Например, для того чтобы обеспечить вывод текста на экран монитора шрифтом красного цвета, можно использовать следующую запись команды форматирования абзаца:

<Р STYLE="color: геd">Текст, отображаемый красным цветом</Р>Подобная форма представления элементов каскадных таблиц стилей не требует отдельного подключения к web-странице файлов CSS и может использоваться в коде документа наравне с другими тегами HTML.

Второй способ подразумевает включение в html-код web-страницы инструкций CSS наподобие подпрограммы. Он также не требует подключения к странице отдельного ess-файла и применяется в основном в тех случаях, когда созданиетакого файла представляется нецелесообразным, например, если стали используются в пределах лишь одного документа HTML.

Интеграция инструкций CSS в web-страницу осуществляется записью необходимых нотаций CSS в пределах тегов <STYLE TYPE="text/css"> и </STYLE>, которые, в свою очередь, являются составляющими заголовка документа <НЕАD>. Вот простой пример такого использования директив каскадных таблиц стилей:

<HTML>

<HEAD>

<TITLE>3a головок страницы</ТIТLЕ>

<STYLE TYPE="text/css">

P{text-align: justify:}

Hl{color: green:}

</STYLE>

</HEAD>

<BODY>

Тело htrnl документа

</BODY>

</HTML>

Третий метод использования в документе HTML элементов стилей подразумевает подключение к данному документу отдельного файла с расширением .ess, содержащего описания всех элементов стилей и их свойств, который хранится на сервере отдельно от web-страниц. Для этого в заголовок <HEAD> htrol-файланеобходимо включить тег <STYLE>, внутри которого следует записать команду вызова файла CSS. В общем виде процедура подключения ess-файла к web-странице будет выглядеть следующим образом:

<HEAD>

<TITLE>3aголовок страницы</TITLE>

<STYLE TYPE="text/css">

@import url(http://www.myserver.ru/css/fne.ess):

</STYLE>

</HEAD>

Свойства стилей, описанных в файле с именем file.css, импортируются в данном примере с применением нотации@ ^import, использующей аргумент url, значение которого, заключаемое в круглые скобки, и является полным или сокращенным адресом, указывающим на целевой ess-файл. Если файл CSS хранится в той же серверной директории, что и использующий его документ HTML, в качестве URL этого файла можно просто указать его имя.

И наконец, четвертый способ подключения файла CSS к web-странице, наиболее традиционный и часто используемый, подразумевает добавление в заголовок <HEAD> html-документа специального тега <LINK>. Синтаксис записи при этом выглядит следующим образом:

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

Вместо параметра URL атрибута HREF тега <LINK> подставляется полный или сокращенный адрес, указывающий на расположение необходимого ess-файла.Примером использования данной директивы может служить такой отрывок HTML-кода:

<НЕАD>

<ТIТLE>Заголовок страницы</TITLE>

<LINK REL=STYLESHEET TYPE="text/css" HREF=". ../ess/file.css">

</HEAD>

CSS можно применять на всех без исключения типах http-серверов без ограничений. Те или иные ограничения на использование каскадных таблиц стилей может накладывать только клиентское программное обеспечение. Не требуется также никаких надстроек и дополнительных программных модулей для того, чтобы броузеры пользователей могли обрабатывать директивы CSS. Файлы CSS просто загружаются на сервер совместно с web-страницами, а при открытии в броузере посетителя вашего сайта они будут автоматически считаны с удаленного узла и запущены на исполнение.

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

Маленькие хитрости CSS

Как известно, HTML — язык не компилируемый, а интерпретируемый. Причем интерпретируется он весьма любопытным образом: если броузер обнаруживает неточность в записи какого-либо тега HTML, он не выводит на экран сообщение об ошибке, а просто игнорирует всю ошибочную строку, продолжая обработку кода дальше.

Теперь давайте немного задумаемся. Согласно стандартам HTML, тегом данного языка считается какая-либо символьная нотация, заключенная в угловые скобки, а все остальные символьные последовательности распознаются броузером как обычный текст. Спецификация CSS позволяет включать элементы каскадных таблиц стилей в теги <STYLE> и </STYLE>, наподобие обычного кода подпрограммы, но сами директивы CSS записываются без угловых скобок, в виде обычной текстовой строки. Хорошо, если на компьютере пользователя установлен современный броузер, поддерживающий обработку инструкций CSS. Встретив в листинге web-странички такой код, он незамедлительно обработает его, внеся соответствующие изменения в содержимое документа. Но если этот броузер — старой версии, то, посчитав инструкции CSS отрывком содержательного текста, он отобразит их на экране, что, разумеется, совершенно недопустимо.

Метод борьбы с этим досадным недостатком старого программного обеспечения чрезвычайно прост. Нужно всего-навсего «спрятать» встроенные в html-до-кумент директивы CSS внутрь комментария. Современные броузеры проигнорируют синтаксис комментария и станут транслировать содержащиеся в них инструкции CSS по обычному алгоритму, старые же броузеры, наоборот, проигнорируют весь комментарий целиком. Вот пример использования этого незамысловатого приема на практике:

<HEAD>

<TITLE>3aголовок страницы</TITLE>

<STYLE TYPE="text/css">

<!--

P{text-align: justify;}

H1{color: green;}

-->

</STYLE>

</HEAD>

В основе другой примечательной хитрости каскадных таблиц стилей, которую можно с успехом использовать на практике, лежит не то случайное упущение, не то грандиозный творческий замысел разработчиков данного стандарта. Дело в том, что в качестве значений отступов вокруг различных элементов, описываемых CSS, можно, как ни странно, указывать отрицательные величины. Более того, с помощью этого любопытного свойства CSS можно создавать без использования графических изображений текстовые элементы с признаками псевдо трехмерности, например, заголовки, отбрасывающие на web-страницу «тень».Фактически же вы просто располагаете на экране текст в два слоя, один из которых частично «наползает» на другой.

Для этого необходимо создать файл style.ess, описывающий стиль заголовка, и два класса, элементы которых определяют другие параметры отображения текста, в частности его цвет и отступы:

/* File type: CSS; file name: style.ess: file location:

'http://www.mysite.ru/css' */

H1{font-family:Arial; font-size: 70pt: font-weight: bold;}

.abc{color: gray; margin-top: l00px: margin-left: 60px:}

.deffcolor: black; margin-top: -118px; margin-left: 58px:}

/* End of file */

Первой директивой вы определили стиль отображения заголовка первого уровня <Н1>, указав тип, размер и начертание используемого для него шрифта. Теперь, подключив к какому-либо html-документу файл style.ess, запишите в его коде следующие команды:

<Н1 CLASS="аbс">Заголовок</Н1>

<Н1 CLASS="def">3aголовок</Hl>

Варьируя значения свойств margin-top и margin-left классов «abc» и «def», можно добиться ряда интересных и достаточно красивых эффектов.

Пример файла CSS

Завершая тему каскадных таблиц стилей, приведу простой и наглядный пример файла CSS, описывающего стили отображения элементов web-страницы. Данный файл представляет собой обычный текстовый документ, набранный в редакторе Notepad и сохраненный на диске под именем style.ess.

/* File type: CSS;

File name: style.ess:

File location: 'http://www.mysite.ru/css/'

Autor: Ivan Ivanov */

BODY{

background-color: №FFFFFF;

font-size: l0pt;

font-family: Arial;

}

P{

font-size: l0pt:

text-align: justify;

}

Hl{

font-size: 40pt;

font-weight: bold;

color: blue;

}

H2{

font-size: 30pt;

font-weight: bold:

color: red;

}

TD{

font-size: llpt;

font-weight: bold;

border-top-width: 0px;

border-bottom-width: 0px;

border-right-width: 0px;

border-left-width: 0px;

}

LI{

list-style-image: URL(/images/marker.gif);

list-style-position: inside:

}

.form{font-size: l0pt: color: black:}

P.comment {

font-family: Courier New: FONT-SIZE: 8pt:

}

#news{

font-family: Arial: .

font-size: 12pt:

font-weight: bold:

}

/* End of file */

Как становится очевидным из изученного нами материала, в этом файле мы описали свойства всего документа в целом (элемент BODY), свойства форматирования абзацев (элемент Р), свойства заголовков (элементы HI и Н2), свойства таблиц (элемент TD) и списков (элемент LI), создали классы с именами «form» и «comment», а также описали идентификатор с именем «news».

Что нового мы узнали?

В этом уроке мы изучили:

  • Общие принципы использования каскадных таблиц стилей в документах HTML.
  • Правила записи селекторов в коде CSS.
  • Правила построения классов в коде CSS.
  • Правила использования идентификаторов в коде CSS.
  • Ряд практических аспектов применения каскадных таблиц стилей.


Урок 9
Полезные приемы web-дизайна

  • Перекодировщики кириллицы
  • ConvHTML
  • SNK DEcode
  • Exclude Symbols
  • Перекодировка кириллицы
  • Различия популярных броузеров
  • Ускоряем загрузку графики
  • Выводим иллюстрации в отдельном окне
  • Добавляем страницу в Избранное
  • Создаем систему быстрой навигации
  • Защитим страницу паролем
  • Устанавливаем счетчик
  • Гостевая книга
  • Индикатор состояния ICQ
  • Десять советов web-дизайнеру
  • Что нового мы узнали?

Перекодировщики кириллицы

лПДЙТПЧЛБ — ЬФП ЧБЦОП. В смысле, кодировка — это важно. Именно таким образом будет выглядеть данная фраза, будучи записанной в кодировкеKOI8-R. Очевидно, что если разработчик какой-либо web-страницы ненароком спутает кодировку или просто установит ее значение неправильно, посетители будут долго любоваться на подобный бессмысленный набор символов, но прочитать его, увы, не смогут.

Как вы уже знаете, некоторые http-серверы умеют автоматически изменять кодировку web-страниц в зависимости от настроек пользовательского броузера, однако на самом сервере документы хранятся в какой-либо одной кодировке. Если конкретной информации о том, в какой кодировке следует загружать страницы на сервер, администрация узла не предоставляет, в девяноста процентах случаев из ста по умолчанию используется кодовая страница windows-1251, а в остальных это, скорее всего, KOI8-R. Известно, что программное обеспечение, работающее под управлением операционной системы Microsoft Windows, в том числе текстовый редактор Notepad, сохраняет файлы на диск в кодировкеwindows-1251. Как быть, если согласно требованиям сайта, предоставляющего вам web-хостинг, необходимо размещать данные в другой кодировке? Вот для этого и существуют многочисленные программы-перекодировщики кириллицы.

ConvHTML

Программа ConvHTML, разработанная С. Поповым из Усинска, автоматически перекодирует текстовые файлы и документы HTML из Windows 1251 в KOI8-Rи обратно. Интерфейс ее предельно прост (рис. 9.1).

Рис. 9.1. Интерфейс программы ConvHTML

Рабочее окно ConvHTML разделено на две вертикальные части: в левой указывается список документов, подлежащих перекодированию, а в правой отображается результат работы программы. Панель инструментов в интерфейсе ConvHTML отсутствует, вместо нее имеется селектор, с помощью которого можно указать, в какую кодировку вы намерены транслировать файл. Конвертация web-страниц с использованием программы ConvHTML осуществляется достаточно быстро: в меню Файл следует выбрать пункт Открыть и указать нужный документ, после чего программа спросит вас, желаете ли вы перекодировать только этот документ или все файлы, содержащиеся в данной директории. Для того чтобы выполнить конвертацию документа, необходимо выбрать пункт Перекодировать и сохранить в том же меню. Программа сохранит отконвертированный файл под старым именем в исходной папке.

К достоинствам утилиты ConvHTML можно отнести простой и доступный интерфейс, возможность работы с файловыми списками, возможность преобразовывать из кодировки в кодировку как html-документы с расширениями .htm и .html, так и текстовые файлы. Главным недостатком является то, что данная программа умеет обращаться только с двумя кодовыми страницами, которых на практике используется значительно больше, а также то, что она сохраняет файл с использованием его первоначального имени, замещая при этом старый, и не дает возможности сохранить перекодированный документ в другой директории.

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

Программа ConvHTML доступна для свободного копирования на многочисленных сайтах Интернета, предлагающих посетителям бесплатное программное обеспечение. К примеру, ее можно поискать на сервере, расположенном по адресу http://www.freeware.ru.

SNKDEcode

Программа-перекодировщик SNK DEcode (рис. 9.2) была создана специалистами российской компании «Тихая Гавань М», она доступна для бесплатной загрузки на сайте http://www.book.ru/snk. В отличие от утилиты ConvHTML SNKDEcode является полнофункциональным приложением, предназначенным для трансляции кириллицы из одной кодировки в другую. Эта программа поддерживает следующие направления конвертации файлов: KOI8-R -> Windows-1251и обратно, Alt DOS -» Windows-1251 и обратно, KOI8-R -> Windows-1251,ISO - Windows-1251, MAC - Windows-1251 и, наконец, Unicode - Windows-1251. Возможна также конвертация файлов по заданной пользователем схеме, с преобразованием какого-либо файла из одной кодировки в другую в произвольном порядке.

Рис. 9.2. Интерфейс программы SNK DEcode

SNK DEcode поддерживает конвертацию текстовых файлов и документов HTML, файлов RTF, а также текстовых файлов с произвольным расширением. Главная панель содержит стандартные кнопки очистки рабочего пространства программы, открытия файла, копирования и вставки фрагментов кода из буфера обмена, сохранения текущего документа в произвольную директорию, вывода обрабатываемого кода на принтер, а также несколько других весьма полезных кнопок. Функция Перезагрузить в начальном виде позволяет восстановить состояние окон после внесения в документы каких-либо изменений, функция Запомнить — сделать «моментальный снимок» рабочего пространства программы, которое восстанавливается при нажатии кнопки Перезагрузить в начальном виде, и, наконец, функция Поменять местами меняет местами рабочие окна.

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

Рис. 9.3. Диалоговое окно настройки пользовательской схемы трансляции файла

Пользовательская схема перекодировки формируется следующим образом: вменю, появляющемся при нажатии на расположенную в левом верхнем углу окна кнопу, следует выбрать исходную кодировку, а в меню, появляющемся при нажатии на кнопку, расположенную правее, — кодировку, в которую осуществляется трансляция. Включение пары кодировок в список осуществляется нажатием кнопки Добавить, отправка созданного списка на исполнение — нажатием кнопки Выполнить. Сформированный таким образом список кодовых пар отображается в левом поле диалогового окна настройки пользовательской схемы трансляции, правое окно содержит перечень сохраненных на диске схем. Управлять этим перечнем можно с использованием кнопок Сохранить и Удалить. При нажатии на первую из них текущая схема записывается на диск, а при помощи второй можно уничтожить неиспользуемую схему. Кнопка Очистить удаляет все компоненты списка кодовых пар и, наконец, кнопка Закрыть закрывает данное диалоговое окно.

Рабочее пространство программы SNK DEcode разделено на два вертикальных поля аналогично программе ConvHTML: в одном из них отображается исходный текст преобразуемого файла, в другом — его отконвертированная версия.

Помимо основных программных свойств SNK DEcode имеет еще целый ряд полезных дополнительных функций, вызываемых с применением меню Сервис. Для их использования необходимо выделить при помощи мыши в окне исходного текста какую-либо символьную последовательность и выбрать соответствующий пункт указанного меню. Функции Верхний регистр и Нижний регистр преобразуют символы выделенной фразы соответственно в заглавные или строчные, функции Lat - Cyr и Cyr - Lat изменяют латинские символы на символы кириллицы и обратно в соответствии с их расположением на клавиатуре компьютера. Команда Убрать пробелы удаляет все лишние пробелы из выделенного участка преобразуемого документа, сокращая итоговый размер файла, и, наконец, функция Убрать теги удаляет из исходного файла все элементы разметки HTML, оставляя в нем лишь содержательный текст.

Не лишена эта программа и существенных недостатков. Главное упущение разработчиков SNK DEcode заключается в том, что данное приложение умеет открывать файлы с расширением .htm, но, увы, не распознает документы с расширением .html, что вызывает ряд ощутимых неудобств у пользователей.

Exclude Symbols

Небольшая утилита Exclude Symbols, автором которой является Александр Вардугин из Кемерово, отличается поразительной функциональностью и нетрадиционным англоязычным интерфейсом (рис. 9.4).

Данная утилита позволяет работать с файловыми списками, иными словами —перекодировать содержимое целых директорий, а кроме того, умеет автоматически распознавать кодировку исходного текста. Это очень удобно в случае, если какая-либо папка содержит подлежащие обработке файлы в различных кодировках: вам не надо указывать отдельные настройки для каждого из преобразуемых документов, Exclude Symbols самостоятельно определит исходную кодировку и решит, необходимо транслировать файл или нет. Программа поддерживает четыре кодовые страницы: KOI8-R, Windows-1251, DOS-866 и ISO, в пределах этих стандартов возможна трансляция текстовых файлов и документов HTML. Помимо прямых функций Exclude Symbols позволяет выполнять еще целый ряд полезных действий: преобразование всех содержащихся в документе символов в заглавный или строчный регистр, произвольную замену одних символов в исходном файле другими, замену пробелов отступами табуляции и оптимизацию файлов методом удаления из них лишних пробелов. Эту удобную утилиту можно бесплатно загрузить с сервера http://perecod.chat.ru.

Рис. 9.4. Интерфейс программы Exclude Symbols

Перекодировка кириллицы

Небольшая программа Виктора Степанова со скромным названием «Перекодировка кириллицы» (рис. 9.5) доступна для бесплатного копирования с сайта http://perecod.chat.ru или с домашней странички разработчика (http://www.glasnet. ru/~victors). Она не требует инсталляции и готова к запуску сразу после загрузки с удаленного сервера.

Рис. 9.5. Внешний вид программы Перекодировка кириллицы

Среди особенностей этой программы следует отметить расширенные возможности работы с файловыми списками: она позволяет обрабатывать как отдельные файлы формата TXT, HTML и RTF, так и целые каталоги с вложенными подкаталогами. Примечательно, что помимо кодовых страниц Windows-1251,KOI8-R, DOS, ISO и MAC, в которых может быть сохранен исходный файл, Перекодировка кириллицы может преобразовывать текст обрабатываемых документов в Unicode и транслит с сохранением всех правил записи слов русского языка в транслитеральной кодировке. Интерфейс программы (см. рис. 9.5)состоит из трех функциональных полей: в верхнем можно указать исходный файл или директорию (а можно набрать путь с клавиатуры или воспользоваться кнопкой Открыть), в меню Кодировка следует выбрать исходную кодовую страницу преобразуемых файлов из предложенного списка, в поле Результат указывается целевая кодировка. Еще одной полезной особенностью данной утилиты является меню Строки, с помощью которого можно задать преобразование символов переноса строк транслируемого текста в стандарт различных операционных систем.

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

Различия популярных броузеров

На нашей планете нет двух абсолютно одинаковых людей, равно как и нет двух абсолютно одинаковых программ. Если бы все броузеры были совершенно идентичны, web-дизайнеру стало бы просто скучно жить. Причем ощутимые различия наблюдаются не только между клиентским программным обеспечением разных производителей, но и между двумя версиями одной и той же программы. Внешне интерфейс Microsoft Internet Explorer 4.0 и Microsoft InternetExplorer 5.0 может быть схожим вплоть до деталей, однако, уверяю вас, набор «глюков» у них совершенно различен. Однако самые существенные расхождения в алгоритмах обработки кода HTML имеются в двух наиболее популярных броузерах, созданных компаниями, которые никак не могут договориться между собой, чтобы достичь хотя бы приблизительного соответствия в отображении их продукцией интернетовских web-страниц. Разумеется, я имею в виду Internet Explorer и Netscape Navigator.

Начинающих web-мастеров, как правило, несказанно удивляет тот факт, что страничка, созданная ими в Microsoft FrontPage или оптимизированная для Microsoft Internet Explorer, выглядит в Netscape совсем не так, как планировал автор. Происходит это, прежде всего, потому, что, во-первых, интерпретаторы данных броузеров обрабатывают код HTML по-разному, во-вторых, поддерживают различные наборы функций HTML, CSS и Java-скриптов. Директивы каскадных таблиц стилей, которые не распознаются в Netscape Navigator или имеют в перечисленных броузерах различное отображение, были упомянуты в восьмом уроке. Что же касается проблем, возникающих при трансляции кода HTML, они затрагивают в основном размеры и начертание шрифтов, а также процесс распознавания цветов, заданных не шестнадцатеричной цифровой меткой, а символьной нотацией. Некоторые «глюки» Netscape Navigator и InternetExplorer вполне безобидны. Но я остановлюсь в этом разделе книги как раз на обидных «глюках», которые вполне могут испортить тщательно разработанный дизайн ваших web-страниц, а лично вам, естественно, нервы.

Самая распространенная проблема, с которой рано или поздно сталкиваются практически все создатели web-сайтов, заключается в том, что сверстанная в невидимой таблице web-страница отображается в Internet Explorer абсолютно нормально, а вот в Netscape Navigator самым непредсказуемым образом «плывет»: четко и с большим трудом подогнанные друг к другу элементы дизайна разъезжаются в разные стороны.

Происходит это потому, что Netscape Navigator высчитывает ширину таблицы в процентах согласно установленному экранному разрешению либо в пикселах, если данный параметр задан в открывающем таблицу теге. Поэтому, если, например, задать ширину таблицы как 100 % от ширины экрана, а одну из колонок — в пикселах, Internet Explorer отобразит документ корректно, a Netscape Navigator моментально «запутается» в вычислениях размеров столбцов и ячеек. Рецепт борьбы с этой неприятностью достаточно прост: используйте для всей таблицы один и тот же метод указания ширины и высоты различных ее элементов, не смешивайте разные варианты.

Второе досадное недоразумение наблюдается обычно при попытке создать невидимую таблицу, два крайних столбца которой, заполненные одноцветной заливкой, выполняют роль вертикальных ограничительных линий, «отсекающих» содержательную часть документа от расположенного справа и слева пустого поля. Примером реализации такой таблицы может служить следующий отрывок html-кода:

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="640">

<TR>

<TD WIDTH="3" BGCOLOR="#808080"></TD>

<TD WIOTH="3"></TD>

<TD WIDTH="628"><H1 АLIGN="СЕNTER">Различия популярных броузеров</Н1>

</TD>

<TD WIDTH="3"></TD>

<TD WIDTH="3" BGCOLOR="#808080"></TD>

</TR>

<TR>

<TD WIDTH="3" BGCOLOR="#808080"></TD>

<TD WIDTH="3"></TD>

<TD WIDTH="628"></TD>

<TD WIDTH="3"></TD>

<TD WIDTH="3" BGCOLOR="#808080"></TD>

</TR>

<TR>

<TD WIDTH="3" BGCOLOR="#808080"></TD>

<TD WIDTH="3"></TD>

<TD WIDTH="628"><p ALIGN="JUSTIFY">&nbsp:&nbsp:&nbsp:

Текст web-странички

</TD>

<TD WIDTH="3"></TD>

<TD WIDTH="3" BGCOLOR="#808080"></TD>

</TR>

</TABLE>

Как видите, в этом примере была сформирована прозрачная таблица общей шириной 640 точек, состоящая из пяти столбцов. Первый столбец, заполненный серым цветом, играет роль вертикальной ограничительной линии и имеет ширину три пиксела, второй столбец такой же ширины выполняет роль отступа для текста странички от предыдущего, закрашенного столбца, третий столбец шириной 628 точек включает информационное содержимое документа, за ним следует еще один «отступ» и, наконец, вторая вертикальная ограничительная линия. Первая строка таблицы содержит заголовок документа, вторая строка является вертикальным отступом текста от заголовка, а третья выполняет роль контейнера для информационного текста. То, как будет выглядеть данная страничка в броузере Microsoft Internet Explorer, показано на рис. 9.6.

Рис. 9.6. Отображение таблицы с вертикальными ограничительными линиями в Microsoft Internet Explorer

Красиво, не правда ли? Безусловно, красиво: тонкие вертикальные ограничители придают web-страничке определенный шарм и своеобразный запоминающийся стиль. Что же, теперь загрузим html-документ, содержащий тот же самый код, в Netscape Navigator (рис. 9.7).

Рис. 9.7. Отображение таблицы с вертикальными ограничительными линиями в Netscape Navigator

Что случилось? Куда делись наши замечательные вертикальные линии? Нетрудно догадаться, что их «украл» интерпретатор html-кода броузера Netscape Navigator, который попросту игнорирует разметку столбцов и ячеек таблицы, если они ничем не заполнены. Как только в листинге html-документа встречается пустая табличная строка, Netscape Navigator, не мудрствуя лукаво, выбрасывает этот код, посчитав, что подобная строка ровным счетом никому не нужна ивставлена в таблицу явно по недосмотру web-дизайнера, от нечего делать не поленившегося набрать десяток-другой лишних команд.

Означает ли это, что теперь вам нужно отказаться от использования в дизайне вертикальных ограничительных линий? Ничего подобного. От этого серьезного недуга броузера Netscape Navigator излечит простое средство: создайте в любом графическом редакторе файл формата GIF, представляющий собой полностью прозрачный рисунок размерами 1x1 пиксел, и поместите его в каждую не содержащую никакой информации ячейку вашей таблицы. Этот файл будет невидим для пользователя, но он гарантирует вас от неприятностей, связанных с обработкой кода интерпретатором Netscape Navigator. Можно избавиться от этой проблемы еще проще, поставив в коде каждой пустой ячейки таблицы тег <BR>.

Продолжим сравнение броузеров. Следующим номером нашей программы является выравнивание таблиц с помощью тега форматирования абзаца <Р>. Запишем код простой таблицы, позиционированной по центру экрана:

<Р ALIGN="CENTER">

<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="73">

<TR>

<TD WIDTH="82"><P ALIGN="CENTER">A</P></TD>

<TD WIDTH="83"><P ALIGN="CENTER">B</P></TD>

</TR>

<TR>

<TD WIDTH="82"><P ALIGN="CENTER">C</P></TD>

<TD WIDTH="83"><P ALIGN="CENTER">D</P></TD>

</TR></TABLE></P>

Результат обработки этого кода броузерами Internet Explorer и Netscape Navigator вы можете увидеть на рис. 9.8.

Рис. 9.8. Различия в обработке тега <Р> Internet Explorer и Netscape Navigator при выравнивании таблиц

Очевидно, что Netscape Navigator просто проигнорировал директиву <Р ALIGN="CENTER"> при интерпретации кода HTML. Проблема решается просто: не используйте тег <Р> для выравнивания таблиц. Вместо этого будет вполне достаточно добавить атрибут ALIGN="CENTER" в тег описания таблицы, и все различия будут устранены:

<TABLE ALIGN="CENTER" BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="73">

КОД ТАБЛИЦЫ

</TABLE>

И это еще далеко не все. Следует отметить, что Netscape Navigator, по всей видимости, страдает какой-то болезненной аллергией на тег <Р>, используемый совместно с командами разметки таблиц. Представьте себе вполне реальную ситуацию: вы хотите создать невидимую таблицу, содержащую текст, который

должен быть позиционирован по всей ее ширине. Что для этого необходимо сделать? Правильно, указать директиву <Р ALIGN="JUSTIFY"> внутри ячейки, в которой вы размещаете текст:

<TABLE BORDER="0" CELLPADDING="0" CELISPACING="0"><TR>

<TD><H1 ALIGN="СЕNTER">Различия популярных броузеров</Н1>

</TD>

</TR>

<TR>

<TD P ALIGN="JUSTIFY"> Текст таблицы</Р>

</TD>

</TR>

</TABLE>

Итак, необходимый тег <Р>, обеспечивающий «растягивание» текста по всей ширине невидимой таблицы, теперь указан там, где это необходимо. Радостно потирая руки, вы загружаете страничку в Internet Explorer и Netscape Navigator(рис. 9.9).

Рис. 9.9. Различия в обработке тега <Р> броузерами Internet Explorer и Netscape Navigator

Как видите, в Internet Explorer таблица отобразилась на удивление корректно, а вот Netscape Navigator в очередной раз проигнорировал команду <Р>. Самое удивительное заключается в том, что эта проблема исчезает, как только вы укажете в теге <TABLE> атрибут WIDTH, явно задав ширину таблицы в пикселах или в процентах от видимой ширины экрана.

Хотите еще примеров? Пожалуйста. Netscape Navigator терпеть не может, когда web-мастер вставляет пробелы или переносит строку внутри кода HTML, описывающего гиперссылку. Согласно спецификации языка разметки гипертекста, броузеры должны игнорировать пользовательские переносы строк и случайные пробелы в листинге web-страниц. Однако создатели Netscape Navigator спецификацию HTML, видимо, не читали. Поэтому, если вы запишете тег <А>, например, следующим образом:

<А HREF="file.html">

<IMG SRC="link.GIF" WIDTH="166" HEIGHT="42"

ALT="Гиперссылка" BORDER="0">

</A>

Netscape Navigator нарисует чуть ниже гиперссылки некрасивый символ подчеркивания (рис. 9.10). Зачем — непонятно.

Рис. 9.10. Появление нежелательного символа подчеркивания при отображении гиперссылки в броузере Netscape Navigator

Подобный символ возникает при использовании пробелов или переносов строк в коде любой гиперссылки, текстовой или графической. Бороться с этим досадным «глюком» популярного броузера можно лишь одним способом, записывая тег <А> вместе со всеми атрибутами в одну строку:

<А HREF="file.html"><IMG SRC="link.GIF" WIDW166" HEIGHT="42" ALT="Гиперссылка" BORDER="0"></A>

Несколько добрых слов хочется сказать о значениях параметров таблиц, используемых броузерами Internet Explorer и Netscape Navigator по умолчанию.

Возьмем в качестве примера код простой таблицы, состоящей из двух строк и двух столбцов, заполненных черной заливкой, а текст будем выводить на экран белым цветом, использовав для этого тег <FONT>:

<TABLE>

<TR>

<TD BGCOLOR="#000000"><FONT COLOR="|FFFFFF">A</FONT></TD>

<TD BGCOLOR="#000000"><FONT COLOR="#FFFFFF">B</FONT></TD>

</TR>

<TR>

<TD BGCOLOR="#000000"><FONT COLOR="#FFFFFF">C</FONT></TD>

<TD BGCOLOR="#000000"><FONT COLOR="#FFFFFF">D</FONT></TD>

</TR>

</TABLE>

Загрузим файл, содержащий этот код, в оба броузера.

Наблюдается небольшое несоответствие в ширине отступов между ячейками таблицы, которое кажется несущественным на первый взгляд, но может стать камнем преткновения при разработке сложных таблиц для компоновки вашего сайта. Вывод очевиден: необходимо стараться по возможности явно указывать все параметры ячеек, столбцов и таблицы в целом, чтобы избежать разночтений html-кода интерпретаторами различных броузеров.

Разумеется, на этом различия в отображении элементов web-страниц броузерами Microsoft Internet Explorer и Netscape Navigator не исчерпываются: любой web-дизайнер сможет навскидку перечислить вам еще с десяток подобных несоответствий. Однако все наиболее опасные «подводные камни», встречающиеся при создании собственных html-документов и их отладке с целью обеспечить идентичность отображения в броузерах всех типов, мы уже рассмотрели. Остальные «мелкие проблемы» решаются, как правило, традиционным и проверенным методом — практикой.

Ускоряем загрузку графики

Многие начинающие web-дизайнеры, разрабатывая свой первый самостоятельный проект, сталкиваются иногда с весьма трудной задачей, связанной с отображением графики в документах HTML. Проблема заключается в том, что согласно изученным вами ранее «постулатам» web-дизайна каждый html-документдолжен быть максимально компактным, тогда как большое количество иллюстраций, появляющихся, например, при создании виртуального фотоальбома, значительно перегружает файл, пропорционально увеличивая время его считывания с сервера.

Решить эту проблему, оптимизировав объем итогового html-документа, можно двумя методами. Первый метод заключается в следующем. Создавая фотоальбом, подготовьте две копии каждого изображения: одну — нормального размера и качества, такую, которую вы и хотели бы поместить на свою web-страничку, вторую — в уменьшенном масштабе и с низким разрешением. Разместите на web-странице уменьшенные копии картинок, назначив для каждой из них свойства гиперссылки с атрибутом TARGET="_blank", которая перенаправит пользователя к большому графическому файлу. В документ вставьте пояснение для посетителей о том, что щелчок кнопкой мыши на любом рисунке приведет к его загрузке в отдельном окне броузера в увеличенном масштабе. Тогда пользователю, не заинтересованному в разглядывании ваших фотографий, не придется подолгу дожидаться окончания считывания странички с удаленного узла. Если же он все-таки захочет полюбоваться на некоторые из опубликованных вами иллюстраций, ему не составит труда выбрать наиболее интересные из них. Такой подход к представлению графики в Интернете носит название «предварительного просмотра», или, по-английски, «preview».

Если мы назовем файл, содержащий уменьшенную копию картинки, picture1.jpg, а файл нормального размера — picture2.jpg, то html-код гиперссылки, описанной выше, будет выглядеть следующим образом:

<А HREF="picture2.jpg" TARGET="_blank"><IMG SRC="../picture1.JPG" WIDTH="100" HEIGHT="98" АLT="Уменьшенная картинка" BORDER="0"></A>

Второй метод ускорения загрузки графических файлов с сервера несколько отличается от предыдущего. Если, предположим, ваш сайт содержит фото галерею, доступ к которой открывается с пятой — шестой странички по счету, все содержащиеся в ней графические файлы можно загрузить в клиентский компьютер заранее, на предыдущих страницах, выводя их на экран размером 1x1пиксел. Код, осуществляющий подобный вывод графики, выглядит так: <IMGSRC="URL графического файла" WIDTH="1" HEIGHT="1">. Изображение при этом станет невидимым для посетителя сайта, но сохранится в кэше его машины, а при последующем открытии данной картинки она будет загружаться уже с жесткого диска локального компьютера. Таким образом, у пользователя создается впечатление, что изображение выводится на экран очень быстро. Однако за все надо платить: время загрузки предыдущих страниц при этом пропорционально увеличивается. Дабы посетитель вашего сайта не скучал, в процессе выгрузки графики его можно развлечь чем-нибудь другим: например, предложить почитать новости или подборку свежих анекдотов.

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

Иногда необходимо организовать вывод графических изображений в отдельном окне, приблизительно так, как это описано в предыдущем разделе, но вам хотелось бы, чтобы новое окно броузера не содержало кнопок навигации, адресной строки, полос прокрутки и чтобы его заданный первоначально физический размер был фиксированным. Как этого добиться? Достаточно просто: следует использовать несложный сценарий JavaScript, запрещающий изменение пользователем размеров окна и удаляющий из него все ненужные вам компоненты.

Скрипт, написанный на языке Java, интегрируется в web-страницу при помощи тега <SCRIPT> с атрибутом LANGUAGE, который помещается в начало кода html-документа, либо между тегами <HEAD> и </HEAD>, или же сразу после директивы <BODY>. Сам текст сценария не отображается в окне броузера при загрузке документа, он исполняется .подобно подпрограмме в случае определенного действия пользователя, например, открытия или закрытия окна. Встроенные в web-страницу сценарии JavaScript интерпретируются броузером вместе с кодом разметки гипертекста и вызываются на исполнение из тела html-документа специальными директивами. Описание правил записи тега <SCRIPT> включено в спецификацию языка HTML 4.0 и потому здесь не приводится. Поскольку подробный обзор синтаксиса языка JavaScript выходит за рамки этой книги, ниже мы рассмотрим лишь отдельные аспекты его применения.

Итак, для того чтобы организовать вывод графического изображения в отдельном окне фиксированного размера без кнопок навигации и полос прокрутки, в тело html-документа необходимо поместить следующий код:

<BODY>

<SCRIPT LANGUAGE="JavaScript">

function picture( ){

window.open("URL. определяющий адрес расположения картинки",
"newwindow", config=''width-ширина картинки, height-высота картинки,
toolbar=0, location=0, directories=0, status=1, menubar=0, scrollbars=0,
resizable=0");

}

</SCRIPT>

Тело html-документа

</BODY>

Записываемый в коде сценария JavaScript адрес картинки лучше всего приводить в абсолютном виде, с указанием протокола передачи данных и имени целевого графического файла, например, http://www.myserver.ru/images/picture.jpg. Атрибут config определяет конфигурацию создаваемого окна. Значения параметров width и height, устанавливающих ширину и высоту картинки в пикселах, следует увеличить на 10-15 точек, поскольку в новом окне изображение будет иметь отступы сверху и снизу, а значит, определенная его часть может оказаться скрытой за границей окна. Остальные параметры атрибута config принимают одно из двух возможных значений: 0 — определяемый параметром элемент не отображается на экране и 1 — определяемый параметром объект отображается вместе с другим содержимым. Так, параметр toolbar выводит на экран (или не выводит) панель инструментов с функциональными кнопками,параметр location — адресную строку, directories — список директорий, status —строку состояния в нижней части окна, menubar — системную панель, содержащую меню Файл, Правка, Вид и т. д., параметр scrollbars — полосы прокрутки, и, наконец, параметр resizable разрешает или запрещает произвольное изменение размеров окна пользователем.

Определитель picture( ), записанный правее директивы function, является уникальным именем данной функции JavaScript, которое будет использовано в дальнейшем для вызова этой функции на исполнение. Если вы планируете выводить на экран подобным образом несколько разных графических файлов, для каждого из них придется написать отдельную функцию, отличающуюся от предложенной выше лишь именем, адресом расположения целевого файла и значениями размеров картинки.

Для того чтобы активизировать созданный сценарий JavaScript, в теле html-документа необходимо разместить соответствующую гиперссылку, включающую ряд необходимых параметров. Для подготовки такой ссылки можно использовать графическую миниатюру рисунка, отображаемого броузером в отдельном динамически появляющемся окне. Код гиперссылки в этом случае будет выглядеть следующим образом:

<A HREF="javascript:picture()"><IMG SRC="URL миниатюры картинки" WDTH="ширина миниатюры" НЕIGHT="высота миниатюры" BORDER="0"АLT="Альтернативный текст"></А>

где picture() — уникальное имя функции, вызываемой при активизации гиперссылки.

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

Наверняка вы встречали на некоторых сайтах Интернета текстовые или графические гиперссылки, при нажатии на которые данная страничка автоматически добавляется в список ресурсов, расположенный в меню Избранное броузера Microsoft Internet Explorer. Самым простым методом реализации такой функции является использование соответствующего сценария JavaScript.

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

<А HREF="javascript:window. external. AddFavorite (URL вашей web-странички',
'Краткое описание вашей странички')"><IMG SRC="URL расположения файла favorites.gif"
АLT="Альтернативный текст" BORDER="0"
WIDTH="Ширина изображения" НЕIGНТ="Высота изображения"></А>

А вот пример применения подобного сценария JavaScript:

<А HREF="javascript:window. external. AddFavorite ('http://www.smile.pl.ru'.
'Юморная страничка Валентина Холмогорова')"><IMG SRC="../images/favorites.gif"
АLT="Добавить сайт в 'Избранное'" BORDER="0" WIDTH="15" HEIGHT="10"></A>

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

<А HREF="javascript:window. external. AddFavorite

('URL вашей web-странички'. 'Краткое описание вашей странички')">

Добавить сайт в 'Избранное'</А>

Можно реализовать данную возможность иным, менее компактным и более трудоемким способом, а именно — с использованием специальной функции JavaScript, помещенной в заголовок html-документа. Для этого наберите в любой строке html-кода между тегами <HEAD> и </HEAD> следующий текст:

<SCRIPT LANGUAGE="JavaScript">

var url="URL вашего сайта"

var title="Kpaткoe описание вашего сайта "function bookmark(){

if (document.all)

window. external. AddFavorite(url.title)

}

</SCRIPT>

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

<А HREF="javascript:bookmark()">Добавить сайт в 'Избранное'</А>

Вместо текста «Добавить сайт в 'Избранное'» может быть использовано любое графическое изображение, специфицированное тегом <IMG>.

Главным недостатком обоих методов является то, что указанные функции работают только в броузере Microsoft Internet Explorer и не поддерживаются Netscape Navigator.

Создаем систему быстрой навигации

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

Общий вид кода формы меню, выполняющего функции системы быстрой навигации, таков:

<FORM>

<SELECT NAME="forml" SIZE="1"

onchange="top. location. href=this.options[this.selectedindex].value; this.selectedindex=0">

<OPTION SЕLЕСТЕD>Перейти в следующий раздел сайта:</OPTION>

<OPTION VALUE="URL первой странички">Страница 1</OPTION>

<OPTION VALUE="URL второй странички">Страница 2</OPTION>

<OPTION VALUE="URL N-й странички">Страница N</OPTION>

</SELECT>

</FORM>

В качестве значения атрибута value тега OPTION следует указать полный либо сокращенный адрес URL, по которому находится страничка, определяемая каждым пунктом меню. Между тегами <OPTION> и </OPTION> записывается название данной странички. Внешний вид отображенной в окне броузера формы быстрой навигации по сайту показан на рис. 9.11.

Рис. 9.11. Форма быстрой навигации по сайту

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

<SELECT NAME="form1" SIZE="1" onchange="window.open(this.options[this.selectedlndex].value): this.selectedindex=0">

Защитим страницу паролем

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

ПРИМЕЧАНИЕ Авторизацией называется процедура проверки введенного пользователем в какую-либо интерактивную форму пароля или сочетания логического идентификационного имени и пароля на подлинность.

Очевидно, что применение такого метода на практике неизбежно связано с необходимостью размещения сценариев CGI в специальной серверной директории и запуска программ на удаленном узле, что требует как минимум наличия у васправ администратора. Альтернативным путем, не вызывающим необходимости вступать в переговоры с владельцами сервера, предоставляющего вам web-xoc-тинг, для получения у них разрешения на использование технологии CGI, является простая защита вашего сайта от несанкционированного доступа посредством применения JavaScript.

Общий механизм такой защиты действует следующим образом. В одной из директорий вашего сайта с условным названием private создается независимый раздел, содержимое которого и будет составлять вашу защищенную зону. В другой папке с условным названием access содержится пустой html-документ, имя которого совпадает с придуманным вами паролем, а заголовок <HEAD> содержит МЕТА-определитель, осуществляющий автоматическую переадресацию(редирект) броузера на стартовую страницу защищенной зоны. Постараюсь пояснить изложенную здесь методику чуть подробнее. Если, например, стартовый документ закрытого паролем раздела сохранен в файле с именем getting.html, асам пароль представляет собой следующую последовательность цифр и символов: xQ17kDFr4ty, то файл, хранящийся в папке access, должен будет называться xQ17kDFr4ty.html и содержать в заголовке директиву <МЕТА HTTP-EQUIV="Refresh". CONTENT="10: URL=. ./private/getting.html">. Теперь вам осталось только разместить на web-странице, с которой осуществляется доступ в закрытый раздел, содержащую JavaScript форму с предложением ввести в ее текстовое поле пароль. После нажатия на кнопку Отправить JavaScript автоматически добавит вконец заданной пользователем символьной последовательности расширение .html и переадресует броузер к web-странице с получившимся названием, которая, в свою очередь, переадресует его к стартовому документу защищенной зоны. Очевидно, что такой алгоритм позволяет размещать в папке access неограниченное количество страниц с именами, соответствующими различным паролям, благодаря чему вы можете менять число и состав посетителей, имеющих доступ к закрытому разделу.

Следует отметить, что разработка такой элементарной защиты имеет смысл лишь в том случае, когда в настройках web-сервера, предоставляющего вам хостинг, установлена функция отображения файла not_found.html с сообщением об ошибке, если пользователь пытается загрузить страницу с неправильным именем или отсутствующий на сервере документ. Если данная функция отключена, сервер продемонстрирует в рабочем окне броузера список всех файлов, имеющихся в данном разделе его диска, причем каждый из них пользователь сможет открыть по собственному желанию. Администрация многих узлов, предоставляющих бесплатный web-хостинг, понимает, что содержимое пользовательских директорий может являться информацией сугубо конфиденциальной, и потому запрещает посетителям доступ к списку файлов, составляющих сайты своих клиентов.

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

<FORM NAME="access1">

Пожалуйста, введите пароль:

<INPUT NAME="passwd" TYPE="password">

<INPUT TYPE="button" VALUE="Отправить"

onclick=(window. location. href=document. accessl. passwd value +" html")>

</FORM>

Устанавливаем счетчик

Счетчик посещений представляет собой интерактивный графический элемент дизайна web-страницы, управляемый соответствующим сценарием CGI с данного либо с удаленного сервера. Изображение счетчика состоит из набора отдельных графических файлов, каждый из которых содержит символ одной цифры. CGI-скрипт фиксирует открытие документа в клиентском броузере и прибавляет к последнему значению счетчика единицу, соответствующим образом изменяя составляющую его картинку. Таким образом, владелец ресурса может определить количество посещений, или «хитов» (от англ, hit — нажатие), имевших место в течение какого-либо интервала времени.

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

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

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

Таблица 9.1. Перечень серверов, предлагающих установку бесплатных счетчиков

Адрес сервера | Предоставление статистики | Наличие рекламы
http://www.thecounter.com http://www.fastcounter.com http://www.fxweb.com/tracker/ http://www.bytecenter.com/ http://www.sitemeter.com http://counter.digiweb.com http://www.hitbox.com http://www.counter.bloke.com http://www.site-stats.com http://website-designs.com http://www.addzz.com http://www.pagecount.com http://www.jcount.com | Да Нет Да Нет Да Нет Да Нет Да Нет По желанию Да Нет | Нет Нет Да Нет Нет Нет Нет Нет Да Да Нет Да Да

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

Рис. 9.12. Внешний вид счетчиков, предоставляемых поисковыми системами

Для того чтобы получить такой счетчик и установить его на своей страничке, вам необходимо зарегистрироваться в соответствующем разделе выбранной вами поисковой системы, ввести в форму регистрации адрес, по которому размещается ваш сайт (если ресурс еще не создан или не опубликован в Интернете, поисковая система откажется от регистрации), указать внешний вид счетчика, в случае если возможно несколько вариантов, и, наконец, поместить через буфер обмена предложенный вам поисковой машиной код в соответствующую строку листинга html-документа. Счетчик запущен.

Давайте кратко рассмотрим особенности и возможности нескольких наиболее популярных счетчиков данной категории.

Rambler (http://www.rambler.ru). Счетчик, предоставляемый этой поисковой системой, считается на сегодня наиболее популярным и авторитетным в русскоязычной части Интернета. Пользователю предлагаются три основных статистических параметра: количество уникальных хитов, количество уникальных посетителей и количество повторных перезагрузок страницы. На самом сервере www.rambler.ru можно при желании получить более подробную статистику, например, среднее количество посетителей по часам и по дням недели. Возможен выбор из множества вариантов внешнего оформления счетчика, оптимизированных для разного цветового решения страницы. Можно выбрать счетчик, не демонстрирующий посетителю количество хитов, а просто указывающий на то, что данная страница входит в состав пользователей системы рейтинга Rambler.

Aport (http://www.aport.ru). Данный счетчик во многом аналогичен счетчику поисковой системы Rambler и обсчитывает тот же ассортимент статистических параметров. Подробную статистику посещений за истекшие сутки можно также получить на сервере поисковой машины.

SpylLOG (http://www.spylog.ru). Счетчик Spy LOG является наиболее полным из всех счетчиков, предоставляемых другими аналогичными системами. Он отражает количество посетителей, навестивших ресурс с момента установки счетчика на странице, за истекшие 24 часа, а также количество пользователей, присутствуощих на сайте в настоящий момент времени. Имеется широкий выбор из множества вариантов оформления счетчика, причем все они достаточно удачны с тонки зрения дизайна. На сервере http://www.spylog.ru доступна подробная статистика посещений использующей счетчик странички, причем данные обсчитываются более чем по 600 параметрам. Вам продемонстрируют распределение ваших пользователей по регионам, часам и дням недели, предоставят данные о том, каким программным обеспечением они пользуются для выхода в Интернет, покажут наиболее популярные маршруты по ресурсу, наиболее популярные разделы сайта и предоставят множество других полезных данных.

List.RU (http://www.list.ru). Этот счетчик является весьма популярным в российском Интернете. На его изображении индицируется информация о хитах и уникальных посещениях, те же данные можно получить на сервере статистики в сводке за последние 30 суток. Помимо прочего, List.RU помесячно обсчитывает информацию о локации ваших читателей по странам мира и формирует отчет о других web-страницах, на которых размещена ссылка на ваш ресурс.

Count.RU (http://www.count.ru). Статистическая служба Count.RU появилась на свет относительно недавно, но уже завоевала признание многочисленных владельцев интернетовских информационных ресурсов. Помимо традиционной статистики по количеству хитов и уникальных посетителей за сутки и последние 30 дней система Count.RU анализирует информацию о распределении пользователей вашего сайта по странам и регионам России, предлагает отчет о ресурсах, публикующих ссылки на вашу страницу. Так же как и с помощью счетчика List.RU, на сервере Count.RU вы можете узнать данные о типе броузера, установленного на компьютерах ваших посетителей, версию используемой ими операционной системы, значения экранного разрешения и цветовой палитры их мониторов.

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

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

Гостевая книга

Существует мнение, что каждый профессиональный сайт должен иметь гфстевую книгу — снабженный специальной интерактивной формой раздел, в котором посетители данного ресурса могут оставить свои пожелания и предложения разработчикам или владельцам странички. Гостевые книги также работают на основе технологии CGI. Если вы имеете доступ к серверной директории CGI-BIN, вы можете воспользоваться одним из наборов скриптов для создания гостевых книг, которые доступны для загрузки с серверов, предлагающих бесплатное программное обеспечение, например, с сайта http://www.freeware.ru.Там же можно найти подробные инструкции по установке и настройке таких сценариев.

Однако на большинстве интернетовских узлов, бесплатно предоставляющих клиентам web-хостинг, доступ к использованию технологии CGI закрыт. В этом случае вы можете воспользоваться альтернативным вариантом: зарегистрируйтесь на одном из сайтов, специализирующихся на предоставлении всем желающим уже готовых к использованию бесплатных гостевых книг, и установите на своей страничке ссылку на данный сервер. Гостевая книга готова к употреблению.

Практически все серверы, предоставляющие пользователям бесплатные гостевые книги, позволяют вносить в их структуру определенные настройки, посредством которых вы можете «подогнать» гостевую книгу под дизайн своего сайта. Установив на ваших web-страницах гиперссылку, ведущую на гостевую книгу, а в настройках самой гостевой книги — обратную ссылку, вы тем самым замыкаете гостевую книгу и собственный сайт в единую логическую структуру. Многие пользователи даже не заметят, что ваша гостевая книга физически расположена на другом сервере. Платой за право использования данной услуги станет включение в страницы вашей гостевой книги рекламного баннера размещающего ее сервера.

Краткий список сайтов, предлагающих своим клиентам размещение бесплатных гостевых книг, приведен в табл. 9.2.

Таблица 9.2. Сайты, предлагающие размещение бесплатных гостевых книг

Адрес сервера

Возможные настройки параметров гостевой книги

Реклама

http://www.guestbook.ru

http://www.chat.ru/guestbook/

http://www.guestbook.list.ru

http://www.guest.hobby.ru

http://www .guestbook . land .ru

http://www.ipclub.ru

Редактирование записей, оповещение о добавлении новой записи по электронной почте, фоновый цвет и рисунок, изображение в заголовке книги

Редактирование записей, оповещение о добавлении новой записи по электронной почте, фоновый цвет

Редактирование записей, оповещение о добавлении новой записи по электронной почте, фоновый цвет и рисунок, изображение в заголовке книги, добавление пользовательской навигации, графических и текстовых элементов

Доступ к изменению кода HTML составляющих книгу страниц

Настройки фонового цвета книги, возможность редактирования записей, система автоматической блокировки нецензурных выражений

Только редактирование записей

Баннер

Баннер

Ссылка

Нет

Баннер

Целых 4 баннера

Индикатор состояния ICQ

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

<IMG SRC="http://online.mirabilis.com/scripts/online.dll?icq= ВАШ_HOMEP_ICQ&amp:
img=КОД_ИЗОБРАЖЕНИЯ" WIDTH="Ширина картинки"
WIDTH="Высота картинки">

Вместо слов BAIII_HOMEP_ICQ в данный код следует вставить ваш ICQ UIN, строка «код изображения» определяет внешний вид индикатора, а параметры ширины и высоты картинки могут варьироваться в зависимости от выбранного вами графического представления индикатора. Коды изображений, их геометрические размеры и внешний вид показаны в табл. 9.3.

В качестве наглядного примера использования индикатора состояния ICQ в составе web-страницы, если принять, что номер ICQ — 65064023, можно привести следующий отрывок кода:

<IMG

SRC="http://online.mirabilis.com/scripts/online.dll?icq=65064023&arnp:img=3"

WIDTH="249" HEIGHT="17">

Десять советов web-дизайнеру

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

1. Не перегружайте дизайн декоративными элементами. Излишнее количество графики «утяжеляет» страницу, увеличивая время ее загрузки в броузер, усложняет процесс обновления ресурса, делает практически невозможным внесение изменений в компоненты оформления страниц и, наконец, просто затрудняет восприятие информации.

2. Сделайте вашей настольной книгой орфографический словарь русского языка. Обилие ошибок в тексте сайта несказанно раздражает пользователей.

3. Обращайте пристальное внимание на мелкие детали оформления страницы: кнопки навигации, разделительные линии, маркеры списков. Незначительная на первый взгляд неаккуратность в мелочах моментально испортит общее впечатление о ресурсе.

Таблица 9.3. Коды изображений индикаторов состояния ICQ

Код изображения | Высота и ширина картинки
1 2 3 4 5 6 7 8 9 | WIDTH="44" HEIGHT="14" WIDTH="80" HEIGHT="21" WIDTH="249" HEIGHT="17" WIDTH="141" HEIGHT="23" WIDTH="18" HEIGHT="18" WIDTH="98" HEIGHT="34" WIDTH="233" HEIGHT="15" WIDTH="55" HEIGHT="14"

4. Не публикуйте иллюстрации и тексты, взятые с чужих web-страниц, если только на них специально не указано, что данные элементы можно свободно копировать и использовать. То же самое касается и концептуальных дизайнерских решений. Слухи распространяются по Интернету очень быстро, и если неожиданно выяснится, что вы незаконно воспользовались результатами чьих-либо трудов, это испортит вашу репутацию на всю жизнь.

5. Не злоупотребляйте клипартами и шаблонами. Безусловно, возможность воспользоваться готовыми решениями на начальном этапе является тяжелым искушением. Однако где гарантия, что этого не сделает сотня - другая ваших коллег? Если вы используете клипарт или готовый шаблон, внесите в его дизайн или компоновку хотя бы незначительные изменения.

6. Не воруйте сами у себя. Если несколько ваших проектов будут похожи как две капли воды, отличаясь только цветовыми решениями и формой кнопок, у пользователей могут возникнуть нехорошие мысли, касающиеся степени развитости вашей фантазии. Узнаваемый авторский стиль — это одно, слепое копирование дизайнерских решений — совсем другое. Клонирование до добра не доводит.

7. Если посетители вашего сайта присылают вам письма с предложениями, пожеланиями и комментариями, отвечайте на всю приходящую корреспонденцию незамедлительно. Игнорирование читательских писем — кратчайший путь к скатыванию популярности вашего ресурса до нулевого значения. Если занятость не позволяет вам ежедневно отвечать на приходящую почту, заготовьте заранее с десяток шаблонов, содержащих ответы на возможные послания. Эти ответы должны как минимум включать слова благодарности за проявленное беспокойство, обещание рассмотреть все пожелания посетителя и выражение надежды на то, что читатель снова заглянет на вашу страничку. Если вы не имеете возможности даже бегло проглядывать почту, заведите себе секретаря.

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

9. Публикуйте только проверенную информацию. Если, например, вы напишете на своем сайте, что Билл Гейтс - женщина, обосновав данное предположение сотней различных аргументов, вы, безусловно, без труда добьетесь нескольких сотен посещений вашей странички в день. Но при этом вы, во-первых, подвергаете себя опасности получить по голове лично от Билла Гейтса, а во-вторых, ваша репутация распространителя непроверенной информации вряд ли поможет вам в бизнесе, поиске друзей или деловых партнеров.

10. Старайтесь избегать использования в текстах технического и нетехнического сленга, просторечий и ненормативной лексики. Кто-нибудь обязательно не поймет, что именно вы имеете в виду, остальные, скорее всего, поймут вас неправильно. Помните: как вы будете относиться к своим посетителям, в точности так же и они будут относиться к вам.

Что нового мы узнали?

В этом уроке мы научились:

  • Использовать специальное программное обеспечение, предназначенное для перекодировки кириллицы.
  • Оптимизировать наш ресурс для соответствия всем версиям клиентского программного обеспечения.
  • Оптимизировать дизайн нашей web-страницы для ускорения загрузки графических иллюстраций.
  • Выводить графику в отдельном окне фиксированного размера, не содержащем кнопок навигации и полос прокрутки.
  • Организовывать систему быстрой навигации по сайту с использованием функций JavaScript.
  • Защищать определенные разделы нашего ресурса паролем и запрещать доступ к этим директориям неавторизованных пользователей.
  • Размещать на наших страничках счетчики посещений и индикаторы состояния ICQ.
  • Создавать простую гостевую книгу.