Что такое HTTP 2 страница

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

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

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

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

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

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

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

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

Газетное оформление предполагает использование заголовков, подзаголовков, боковых колонок, а изображения обычно обтекаются текстом. Все это делается для того, чтобы разместить как можно больше "информации на ограниченном пространстве. Вы можете привести к подобному виду свою веб-страницу с использованием XHTML (рис. 2.2). Подобный газетный вид страниц, правда, встречается в Интернете довольно редко. Но среди них — официальные сайты крупных изданий, таких как, например, New York Times (http://nytimescom/). При таком оформлении гиперссылки указывают на более подробное изложение новостей.

Рис. 2.1. Сверху — страница без разбиения текста; снизу — разделенная подзаголовком и маркированным списком

Рис. 2.2. При «газетном» подходе к оформлению используются XHTML-элементы — таблицы. С их помощью страница разбивается на несколько колонок и строк

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

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

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

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

При экспортировании изображения вы сохраняете его в новом файловом формате. Пока что большинство браузеров не могут отображать, например, родные форматы Excel, поэтому нужно экспортировать таблицы и графики в JPEG или GIF Это делается обычно с помощью специальной команды приложения (зачастую Файл > Экспорт).

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

Рис. 2.3. Использование графики улучшает внешний вид страницы, ее восприятие

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

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

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

Это означает, что мультимедиа следует использовать только в тех случаях, когда это жизненно важно для передачи информации. Ну, или если весь сайт посвящен мультимедийным элементам, которые с него обычно и скачивают (В рунете это, например, http://www.mult.ru с мультиками про Масяню или http://www.bards.ru, где можно найти записи бардов в формате трЗ). В общем случае нужно стараться делать так, чтобы пользователь мог выбрать, хочет он скачивать мультимедиа-содержимое или нет. Просмотр элементов мультимедиа является привилегией пользователей с большой пропускной способностью канала.

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

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

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

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

Рис. 2.4. Для взаимодействия с пользователями используются элементы форм

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

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

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

Чтобы вписаться в эту категорию дизайна, необходимо четко придерживаться рекомендаций W3C, в которых кодифицирован HTML и родственные спецификации. Примером может служить официальный сайт W3C. На нем размещено много информации, которая разделяется заголовками, гиперссылками и представляется не в виде единого текста, а в виде блоков и параграфов (рис. 2.5).

Рис. 2.5. На сайте WSC представлена страница, изобилующая текстом и в то же время хорошо организованная (показана страница http://www.w3.org/markup/)

Рис. 2.6. Обратите внимание на то, как размещены изображения на странице. Их мало, они не мешают восприятию текста

Большинство сайтов не ориентировано на представление такой тяжелой и емкой информации, как стандарты веб-публикации, поэтому скорее всего вам будут встречаться более простые сайты. Сайты C|Net — это еще один пример прекрасного оформления веб-страниц. На них всегда существует очень четкая навигация и представление информации. Каждая новость начинается с заголовка, с которого можно перейти к подробностям, имеется краткое содержание каждой статьи. Даже беглый взгляд на страницу позволяет определить, какого рода информация на нем содержится и как она организована. На рисунке 2.6 представлена заглавная страница http: //www news com — основного сайта технических новостей C|Net.

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

В этом параграфе мы обсудим некоторые моменты, которые следует учитывать при планировании сайта.

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

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

Звучит слишком вычурно и нереально? А всего-то для этого требовалось следующее.

Рис. 2.7. На страницах Yahoo! размещается очень много информации, при этом она доступна с любых браузеров

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

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

Рис. 2.8. Такая простая организация дает возможность на каждой странице иметь ссылки на все остальные

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

Итак, организация немного усложнилась, и карта сайта стала выглядеть так, как показано на рис. 2.9.

Рис. 2.9. По мере усложнения схемы сайта может усложняться и интерфейс пользователя

Рис. 2.10. Наверху расположены стандартные ссылки на основные разделы сайта; на самой странице сделаны ссылки в виде пути к текущей странице

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

С другой стороны, можно сделать прямые ссылки с каждой страницы описания на контактные адреса и телефоны и страницы закладных стоимостей, хотя это может несколько смутить пользователя Еще один способ: можно сделать так, как сделано на Yahoo! Вырисовывать полный путь от главной страницы до текущего описания дома, как показано на рис. 2.10. На самом деле на показанной странице используется смешанный подход — показан путь к текущей странице, но еще и удобные ссылки на все разделы (наверху). Эти элементы могут присутствовать на каждой странице, что максимально упрощает навигацию.

Сайт может разрастаться и становиться все сложнее. Соответственно, может вырасти пирамида страниц. Но данный подход является универсальным, не нужно от него отказываться. Так сделано на сайтах Yahoo! и Aboutcom, а это одни из самых больших сайтов.

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

Кроме организации сайта есть еще два момента, где применимо слово «устойчивость».

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

Во-вторых, последовательность внешнего вида. Это проще организовать с помощью таблиц стилей (если вы пользуетесь стандартом XHTML). Таблицы стилей подробно обсуждаются в главах 10 и 14. Вы задаете семейство шрифтов, цвет текста и многие другие атрибуты элементов страницы. Удобство этого подхода заключается в том, что можно определить все эти параметры один раз для всего сайта. Во время чтения данной книги и изучения приемов оформления страниц не забывайте про эту возможность.

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

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

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

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

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

XHTML имеет ряд инструментов, облегчающих создание страниц для мировой аудитории. Например, многие элементы поддерживают атрибут lang, с помощью которого можно указать используемый в этом элементе язык. Он интерпретируется браузером, и текст корректно отображается Атрибут 1 ang и элемент <q> (служащий для вывода цитат в различных национальных форматах) рассматриваются в главе 5, «Форматирование текста».

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

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

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

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

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

Глава 3. Что необходимо для начала работы

Основной инструментарий

Текстовые редакторы
Редакторы HTML

Другой инструментарий

Программы создания анимации
Инструментарий мультимедиа
Ресурсы для написания скриптов

Поиск веб-сервера

Что такое веб-сервер
Отношения с поставщиками услуг Интернета
Программы, устанавливаемые на сервере
Доступ к дисковому пространству сервера

Файловая структура сайта

Типы файловой организации
Создание файловой иерархии
Как именовать файлы
Обновление веб-сайта

Резюме

Технологии публикации в Сети не требуют наличия дорогостоящего инструментария. В самом деле, вы вскоре обнаружите, что вполне можно обойтись любым текстовым редактором. Причем чем проще он будет, тем лучше. Обычно такие редакторы поставляются в комплекте с операционными системами типа Windows, Unix, Mac OS. Кроме текстовых редакторов могут понадобиться программы для работы с HTML, изображениями и мультимедиа. Всегда можно найти в Интернете бесплатные версии этих приложений Кроме этого, если вы хотите разместить свои веб-страницы в Сети, нужно озаботиться поиском поставщика услуг Интернета. В этой главе мы обсудим следующие вопросы:

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

Основной инструментарий Как уже говорилось в главе 1, «Основы технологии публикации в Сети документы HTML не представляют собой ничего, кроме самых обычных текстовых файлов, содержащих текст и команды разметки, размещения изображений, гипертекста и мультимедиа на странице. Все эти команды — текстовые, они интерпретируются браузером. Текстовая природа документов HTML означает, что для их написания вполне достаточно обычного текстового редактора. Причем это может быть самый простой редактор типа Windows Notepad (рис. 3.1) или Mac SimpleText. В других операционных системах у вас в любом случае будет текстовый редактор В Unix-системах это, к примеру, vi или emacs. Следует помнить, что сохранять файл следует в виде обычного текстового или ASCII-документа, не обращая внимания на то, какие еще варианты предлагает редактор (это может быть, например, формат Word или RTF). Только с учетом этого можно использовать текстовые процессоры для создания HTML-документов. ПРИМЕЧАНИЕ ASCII расшифровывается как American Standard Code for Information Interchage (Американская стандартная кодировка обмена данными) и является основным методом представления букв и цифр в ЭВМ ASCII является самой распространенной кодировкой, которую понимают практически все компьютеры, поэтому любые текстовые файлы, в том числе HTML-документы, будут восприняты адекватно.

Рис. 3.1. HTML-страницы можно создавать в простейших текстовых редакторах типа Windows Notepad Если вы предпочитаете использовать для написания кода HTML текстовые процессоры (большие текстовые редакторы), чего я, кстати, не советую делать, то имейте в виду, что они обычно имеют много возможностей по сохранению файлов в самых разных форматах. Например, в формате HTML. He следует поддаваться соблазну, потому что в этом случае все, что вы написали, будет воспринято просто как текст, а теги будут добавлены автоматически. Но вы уже вставили свои теги, зачем вам эта самодеятельность редактора? Можете посмотреть (рис. 3.2), какая «замечательная» страница получится в итоге при просмотре в браузере. Итак, сохранять файл следует в текстовом формате, но при этом с расширением htm или html (подробности о различии — позже). ПРИМЕЧАНИЕ Где найти эти программы? В следующих параграфах вы найдете ссылки на веб-сайты, с которых можно скачать отдельные редакторы из тех, что мы рекомендуем. Но если вы сами хотите попробовать поискать для себя что-то подходящее, загляните на wwwdownloadcom/, там вы найдете ссылки на огромное количество самых разнообразных программ (бесплатных, демо-версий), предназначенных для разных типов платформ. В идеале, конечно, нужно использовать либо простой текстовый редактор, либо уж HTML-редактор, который имеет совсем иные возможности. Сейчас мы рассмотрим оба варианта.

Рис. 3.2. Если вы используете текстовый процессор, сохраняйте файлы в текстовом формате, а не в виде HTML. Иначе все ваши теги появятся в виде элементов страницы Текстовые редакторы Итак, вы предпочли использовать обычный текстовый редактор, который поставляется вместе с операционной системой. В Microsoft Windows это Notepad; в Mac OS это SimpleText или TextEdit. В Unix и Linux есть множество различных текстовых редакторов. Если вы хотите использовать редакторы более высокого уровня, обратите внимание на следующие. Для Microsoft Windows — TextPad (www.textpad.com), BltraEdit (www.ultraedit.com показан на рис. 3.3), EditPlus (www.editplus.com). Для Macintosh выбор поменьше: BBEdit и BBEdit Lite (www.barebones.com), но они пользуются большой популярностью и применяются как в Mac OS 9, так и в Мае OS X (Mac OS X может работать с Unix-редакторами спомощью приложения Terminal). Все эти редакторы могут быть полезными при создании и отладке HTML-кода. Большинство текстовых редакторов, с которыми вы встретитесь, очень неплохо подходят для редактирования HTML-кода, да и для программирования на других языках. Некоторые из них способны автоматически распознавать разметку как таковую, раскрашивать ее в разные цвета. В некоторых есть кнопка просмотра HTML-документа в веб-браузере (для тестирования внешнего вида и корректности ссылок), проверка орфографии и другие полезные функции. Поэкспериментируйте и найдите подходящий редактор для ваших задач.

Рис. 3.3. В UltraEdit можно работать сразу с несколькими текстовыми файлами, HTML-код выделен особым цветом, а сбоку имеется удобная панель, где отображаются все элементы HTML Редакторы HTML Вы можете воспользоваться и другим типом редакторов, созданных специально для редактирования HTML-документов. Они бывают двух основных типов: редакторы кода и редакторы, построенные по технологии WYSIWYG (What You See Is What You Get, «что видишь, то и получаешь»). Последнее означает, что вы редактируете веб-страницу сразу в том виде, в каком она предстанет в браузере. В этом случае вы не пишете вручную разметку, команды и элементы HTML, а печатаете текст, вставляете картинки и перемещаете элементы по странице, как в текстовом процессоре или настольной издательской системе Поскольку эта книга посвящена, по большей части, редактированию исходного кода XHTML (то есть ручному описанию команд и элементов), то до редакторов, работающих по технологии WYSIWYG, мы дойдем только в главе 20, «Графические редакторы». Эти редакторы — хорошее подспорье при написании веб-сайтов Но прежде, чем их использовать, нужно изучить, что они делают, какой код генерируют и как его расшифровать. Профессиональный веб-дизайнер никогда не станет пользоваться HTML-редактором, потому что совершенных программ не бывает и добиться нужной гибкости при их использовании просто не удается. Кроме того, они не успевают за изменениями стандартов, их применение оказывается нецелесообразным при решении комплексных задач, где требуется применение скриптов или интерактивных элементов, иногда приходится «зарываться» в код, чтобы заставить автоматически сгенерированную страницу работать так, как нужно. Если уж вы решили воспользоваться HTML-редактором, советую обратить внимание на редакторы кодов. Для Microsoft Windows существуют такие программы, raiiHotDog Professional и HotDog PagcWiz (www.sausagetools.com), HandyHTML (www.silveragesoftware.com) и CoffeeCup HTML Editor (www.coffeecup.com). Для Macintosh можно порекомендовать PageSpirmer (www.optima-system.com) и WebDe-sign (www.ragesw.com). Если вы хотите подыскать для себя HTML-редактор, обращайте внимание на то, что он должен соответствовать современным стандартам и позволять редактировать HTML (или XHTML) на том уровне, который вам требуется. Для тех задач, которые решаются в этой книге, необходимо, чтобы редактор поддерживал HTML 401 Transitional (то есть переходный вариант) или XHTML 16 Transitional (Если вы намерены создавать документы в строгом варианте нового стандарта, ищите редакторе поддержкой XHTML 10 Strict). Старые редакторы, скорее всего, поддерживают старые стандарты и создают элементы, не отвечающие современным требованиям Вы, в принципе, можете использовать их, но будьте внимательны. ПРИМЕЧАНИЕ Некоторые редакторы поддерживают несколько режимов совместимости, поэтому среди настроек редактора можно найти свойства, позволяющие форматировать страницы как строгие, переходные, XHTML 10 или HTML 401 В некоторых случаях редактор может поддерживать только одну спецификацию, тогда неплохо бы знать, какую именно. Другой инструментарий Кроме основных программ, необходимых для написания кода HTML, в арсенал веб-дизайнера входит еще ряд вспомогательных средств. В частности, наверняка потребуется хороший редактор изображений, поскольку очень сложно отыскать такую картинку, которую сразу можно вставить на страницу. Обычно нужно что-нибудь подретушировать, изменить цветовую гамму, вырезать часть изображения и т. д. Редактор изображений должен уметь делать все это. Таким требованиям отвечают прежде всего дорогостоящие программы, такие как Adobe Photoshop и Macromedia Fireworks. Если у вас нет возможности приобрести их, воспользуйтесь бесплатными версиями других программ. Самыми популярными из них являются следующие. Для Microsoft Windows — Paint Shop Pro (http://www.jasc.com) и Lview Pro (http://www.lview.com/). Для Macintosh существует бесплатный конвертер GraphicConverter (http://www.lemkesoft.com/). Для Linux и других открытых ОС можно порекомендовать популярную программу GNU linage Manipulation Program, или GIMP (http://www.gimp.org). Какую бы программу для обработки изображений вы ни предпочли, вам в основном придется выполнять с ее помощью следующие действия:

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

Все эти нюансы описаны более подробно в главах 6 и 11. Программы создания анимации Веб-анимация бывает разных видов. Можно «оживлять» изображения с использованием спецификации Animated GIF, которая недостаточно интерактивна (она не отвечает на пользовательский ввод, например на нажатие кнопки мыши), но широко используется в Сети, например в веб-рекламе. Очень немногое число приложений для создания анимированных GIF-изображений доступно в бесплатном варианте, при этом коммерческие версии программ, созданных для разработки рекламных баннеров, обычно стоят даже дороже, чем программы обработки изображений. Попробуйте поработать с программой Ulead GIF Animator (http://www.ulead.com) и Animagic GIF Animator (http://www.rtlsoft.com/ animagic/index.html). Это для Microsoft Windows. Для Macintosh можно посмотреть программу GifBuilder (http://homepage.mac.com/piquet/gif.html) или VSE Animation Maker (http://vse-online.com/animation-maker/index.html). На ступеньку выше, чем анимированные GIF-изображения стоят анимации Macromedia Flash. Флэш-технологии становятся все более популярными, частично из-за того, что анимации могут быть интерактивными. Пользователь с помощью мыши! может осуществлять выбор дальнейшего сценария анимации. Эта технология особенно популярна среди производителей автомобилей, в веб-бизнесе и у всех, кто хочет создавать мультимедиа-презентации. Кроме собственного проигрывателя фирмы Macromedia (http://wwwmacromediacom/ flash/), который продается всего лишь за несколько сотен долларов, существуют и другие. Например, CoffeeCup Firestarter (http://www.coffeecup.com/) для Microsoft Windows и ez-Motion (http://www.beatware.com/) для Macintosh. В главе 13 флэш-технология обсуждается более детально. Инструментарий мультимедиа Редакторы и приложения работы с изображениями являются основными приложениями для автора веб-публикаций. Но если вы создаете страницу с мультимедиа, вам потребуются некоторые дополнительные инструменты. Вам может понадобиться создать видеоряд с использованием QuickTime, Windows Media или других мультимедийных программ Или, например, необходимо будет создать или отредактировать звуковые файлы — все что угодно, начиная от midi-мелодии, звучащей в качестве фона вашей странички, и заканчивая музыкой в МРЗ. В этом случае надо поискать приложения, которые позволяют создавать и редактировать такие данные. Однако прежде, чем залезать так глубоко, вспомните о том, что многие приложения такого рода поставляются вместе с операционной системой, будь то Microsoft Windows или Macintosh OS. Это, конечно, зависит от версии ОС. Вместе с Microsoft Windows ME и последующими версиями поставляется программа Windows Movie Maker, позволяющая редактировать видео, снятое на DV-совместимую камеру. Затем можно перевести его в формат Windows Media или подобный ему, который можно проигрывать в Сети. Подобным образом в Macintosh можно использовать поставляемую со многими версиями ОС программу iMovie, позволяющую редактировать DV и экспортировать его в формат QuickTime. QuickTime Pro существует как для Windows, так и для Macintosh и позволяет осуществлять некоторые операции редактирования видео и перевода его в формат QuickTime. ПРИМЕЧАНИЕ DV означает Digital Video, то есть «цифровое видео». Это формат видеоданных, записанных с помощью DV-камеры (часто на специальных кассетах miniDV). Такое видео просто редактировать с использованием популярных программ типа Movie Maker или Apple's iMovie. Этот стандарт становится все более распространенным и уже может соперничать с VHS. Имеется множество приложений для редактирования и конвертирования звуковых файлов в разные веб-совместимые форматы. Среди irtix можно выделить Sound Forge XP (http://www.sonicfoundry.com) для Microsoft Windows, а для Macintosh — Sound Studio (http://www.felttip.com/). Программа iTunes, поставляемая со многими Мас'ами имеет возможность создания МРЗ и других звуковых файлов, а проигрыватель QuickTime Pro может быть использован для преобразования из одного формата в другой. Ресурсы для написания скриптов Некоторые из веб-редакторов, которые мы обсудили, могут быть использованы для работы с популярными языками типа JavaScript и JScript. В то же время можно поискать программы, предназначенные специально для написания скриптов, можно найти даже готовые скрипты, которые можно вставлять в своп страницы. Назовем следующие приложения для Microsoft Windows: iCoder (http://wwweportBe6hostercouk/ iCoder/), JavaScript Tools (http://www.sausagetools.com/) и JavaScript Developer (http:// www.liquidsoftwarecjb.net/). Поиск веб-сервера Для того чтобы получить возможность отображения своих HTML-страниц в Сети, необходимо найти сервер, на котором можно их разместить. Об этом, возможно, уже позаботилась организация, для которой вы создаете сайт. При обновлении сайта вам нужно знать, как и куда загружать документы HTML и связанные с ними файлы, а может быть, вам понадобится скопировать их по сети на свой веб-сервер. Если же вы работаете в небольшой организации, которая еще не озаботилась поиском сервера, или вообще творите сами для себя, вам необходимо предпринять некоторые шаги, чтобы найти веб-сервер и разместить на нем свои файлы. Что такое веб-сервер? Веб-сервер — это просто компьютер, на котором запущено программное обеспечение, предназначенное для передачи HTML-страниц и других файлов. Сервер должен иметь высокоскоростной доступ к Интернету (более быстрый, чем обычное модемное соединение) и быть высокопроизводительным, чтобы обрабатывать одновременно множество запросов В общем случае серверному программному обеспечению требуется достаточно мощная операционная система (Unix, Linux, Windows NT/2000 или Mac OS X). Тем не менее есть ПО и для других версий Windows, и для более ранних версий Macintosh OS. Но в этом случае и сервер должен обслуживать небольшие сайты, с которыми не может возникнуть серьезных проблем. Отношения с поставщиками услуг Интернета Так или иначе, при установке любого типа соединения с Интернетом вам придется искать поставщика услуг Интернета и работать с ним. Провайдеры обычно предлагают свои услуги высокоскоростного доступа к Интернету, а также услуги вебсервера или других Интернет-серверов. СОВЕТ Список мировых провайдеров можно найти на thelist.com или на www.yahoo.com/Business_and_Economy/ Companies/Internet_Services/Web_Presence_ Providers/. Также можно попробовать узнать, какие услуги предлагает ваш провайдер, поскольку многие из них предоставляют бесплатное или довольно дешевое дисковое пространство на сервере. Для типичного небольшого веб-сайта вам нужно то, что называют хостингом или разделяемым хостингом Это означает просто-напросто то, что вы разделяете дисковое пространство сервера провайдера с другими клиентами, пользующимися услугами хостинга. Обычно при этом ваш URL состоит из имени вашего провайдера (как бы называния серверного компьютера) и имени каталога, в которой хранятся ваши файлы. Например, ваш адрес в Сети может выглядеть так: http://www.isp.com/username/index.html Цены на такой хостинг колеблются от нуля (особенно если вы уже являетесь клиентом данного поставщика услуг Интернета) до $25, в зависимости от размера заказанного дискового пространства и количества мегабайт входящего трафика, на которое может рассчитывать ваш сайт. Чем больше этот трафик, тем дороже обходится сайт. Если у вас имеется какой-то серьезный сайт или официальный сайт фирмы, вы, возможно, захотите иметь домен более высокого уровня. В этом случае у вас будет следующий URL: http://www.yoursitename.com (как, например, http://fakecorp.com) Это актуально в основном для фирм и организаций, хотя вы можете тоже заказать себе такой домен, это ваше законное право. Поставщик услуг Интернета может помочь вам зарегистрировать свой домен, но прибегать для этого к его услугами не является такой уж необходимостью. Это можно сделать и самому, для этого нужно зайти на какой-нибудь сайт типа Registercom (http://www.register.com/) или Network Solutions (http://www.networksoutions.com/). Стоимость регистрации домена колеблется обычно от $25 до $35 в год. После регистрации домена ваш провайдер разрешает использование имени домена (DNS). Это означает, что любые другие серверы DNS во всем мире должны обращаться именно к компьютеру провайдера, увидев указанное название домена. Поэтому, например, http://www.fakecorp.com указывает на сервер того провайдера, который предоставляет дисковое пространство под этот сайт. А вы уже зарезервировали себе место на сервере? Если у вас есть провайдер, то вполне возможно, что для вашего сайта уже зарезервировано определенное количество мегабайт на его сервере. Большинство крупных провайдеров предлагают услугу по бесплатному предоставлению места на сервере. Если это так, все, что вам нужно сделать, — это понять, сколько мегабайт вам доступно, и понемногу начинать занимать их. Нелишне также узнать, что вообще предлагает ваш провайдер. В большинстве случаев, правда, наличие собственного имени домена связано с дополнительными расходами на его регистрацию. В главе 22 рассказано подробнее о бесплатных и коммерческих веб-серверах. Программы, устанавливаемые на сервере Для нужд размещения HTML-документов, изображений и мультимедиа используемое на сервере вашего провайдера программное обеспечение не играет большой роли. Зато когда возникают более сложные задачи, например связанные с реализацией интерактивности на вашем сайте, тип ПО, который использует провайдер, оказывается крайне важен Вот какие вопросы в связи с этим стоит задать своему поставщику услуг Интернета.

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

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

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

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

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

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

Каков URL моего сайта? Он должен состоять из адреса провайдера и имени каталога, в котором хранятся ваши файлы. Например, если вы выберете в качестве своего имени пользователя vpupkin, то URL вашего сайта будет выглядеть так: www.fakeco.net/vpupkin/, или так: members.fakeco.net/vpupkin/, или похоже. Разные провайдеры предоставляют разные адреса, поэтому этот вопрос всегда нужно уточнять.

ПРИМЕЧАНИЕ Большинство серверных программ по умолчанию при входе на сайт загружает файл index.html или index.htm. Именно такое имя файла следует использовать для начальной страницы. Как отсылать свои файлы на сервер? Необходимо получить от провайдера инструкции, каким образом осуществляется доступ к вашему каталогу на сервере. Для этого обычно используется протокол FTP. Более подробно этот вопрос мы рассмотрим в параграфе «Обновление веб-сайта» в этой главе. Каковы ограничения на имена файлов? Операционная система, установленная на сервере, может быть хорошо вам знакома. В этом случае на такой вопрос вы можете ответить сами. В противном случае лучше спросить, из скольких букв должно состоять имя файла и из скольких — расширение. СОВЕТ Чтобы не ошибиться, используйте нотацию DOS (83), когда имя файла может состоять максимум из 8 букв, а расширение — из 3.

Можно ли создавать подкаталоги в моем каталоге на сервере? Большинство серверов позволяют это делать, но все же лучше уточнить.

Получив ответы на все интересующие вас вопросы, можете начинать пересылку файлов на сервер, после чего они становятся доступны Интернет-общественности. Файловая структура сайта Вспомните, что мы говорили про URL в главе 1 URL состоит из протокола, адреса сервера и пути к конкретному документу. Все эти компоненты одинаково важны. Тем не менее, в процессе создания сайта на первое место выходит забота о правильности путей к файлам. Если вы заранее продумаете систему именования файлов и каталогов на своем локальном компьютере, то впоследствии у вас будет меньше проблем при размещении сайта на веб-сервере. Хотя файловая структура сайта может быть разной, всегда нужно помнить некоторые базовые правила. Учитывайте возможность простого обновления сайта в дальнейшем. Если вам придется заменять при этом все файлы, значит, придется менять и все ссылки, а это может отнять много времени и сил. Продумывать файловую организацию следует всегда, даже если сайт состоит из двух-трех страничек. Если ссылки на них не будут работать, будет тем более обидно: всего-то, мол, три странички, и те работают криво. То же самое касается файлов с изображениями, мультимедиа и т. п. Типы файловой организации Известны такие типы организации веб-сайтов: Все файлы в одном каталоге. Маленькие сайты с несколькими HTML-страничками и несколькими изображениями могут позволить себе хранить все свое содержимое в одном каталоге. Одним из самых больших достоинств такой системы является то, что в локальных ссылках не нужно указывать путей. Недостаток состоит в том, что такая система оказывается перегруженной, если сайт разрастается: в этом одном каталоге, как на какой-то свалке, невозможно ничего найти. Обновлять такой сайт непросто. Функциональные каталоги. Одним из способов организации сложных сайтов является следующий. В каждом из каталогов хранятся файлы, относящиеся к одной и той же функциональной части системы. На верхнем уровне, например, будет только index.htm и относящаяся к нему графика. В каталогах следующего уровня будут содержаться файлы, относящиеся к какому-либо разделу сайта: «О фирме «Продукция «Поддержка» и т.д. В каждом из каталогов могут быть собственно HTML-файлы и относящиеся к ним графические или мультимедиа-файлы. Каталоги по типам файлов. Некоторые веб-дизайнеры предпочитают хранить в каждом из каталогов файлы одного типа, независимо от того, какой функциональной части сайта они принадлежат. В главном каталоге сайта при этом будет только index.htm. Прочие каталоги могут содержать, например, все изображения сайта, HTML-странички, скачанные файлы и т. д. Главным достоинством такого подхода является то, что файлы при обновлении необходимо заменять только один раз. Что это значит? Например, если одна и та же картинка используется на нескольких страницах, вам достаточно будет заменить ее только в одном месте: там, где хранятся изображения. При этом все ссылки на всех стра ницах будут указывать на обновленный файл (надо, конечно, не забыть назват его так же, как старый). Комбинированный подход. Как всегда, можно использовать комбинацию разных подходов. Это — лучший способ организации больших сайтов. При этом создаются отдельные подкаталоги для уникальных файлов (например, веб-страниц каждой категории) и отдельные — для элементов, которые используются несколько раз (например, для графики.) Такая файловая организация показана на рис 3.4.

Рис. З.4. Здесь различные файлы функциональных разделов расположены в соответствующих каталогах, но есть и один каталог, содержащий всю графику сайта Еще один нюанс, о котором нужно помнить при планировании организации каталогов: каталоги сами по себе становятся частью путей, включаемых в состав URL. Поэтому, если уж вы используете комбинированный подход, то нужно стараться делать так, чтобы URL имел осмысленное имя. Например: www.fakecorp. com/products/mousetrap html Такая организация противопоставляется сугубо функциональной, при которой URL будет выглядеть так: www. fakecorp. com/webpages/mousetrap. html Каталог products все-таки более информативен, на мой взгляд/ Увидев такое название, пользователь сразу поймет, что он попадет на страничку, где представлена продукция, а кроме того, сразу станет понятно, как организован сайт. Создание файловой иерархии После того как вы определились с тем, какой подход к файловой организации будете использовать, нужно создать все необходимые каталоги, как на сервере, так и на своем компьютере. То есть если вы используете каталог images, то как на сервере, так и на локальной машине должен существовать относительный путь, содержащий этот каталог. ПРИМЕЧАНИЕ В некоторых операционных системах каталоги принято называть папками. Эта разница проявляется только в терминологии, сами по себе понятия совершенно идентичны. Чаще всего вам будет встречаться термин папка, когда речь будет идти о локальном жестком диске (особенно в применении к Windows и Mac OS), и каталог, когда будет иметься в виду серверный компьютер (на котором обычно установлена Unix-подобная ОС). Для каждого сайта создавайте свою папку на компьютере, это понятно. Ее имя не имеет большого значения, так как она все равно будет эквивалентна безымянному каталогу, играющему роль корневого (/) на сервере. Ну, скажем, если вы создаете персональный сайт, назовите папку mysite. В ней будет храниться заглавный файл сайта: index.html. Внутри этой папки создайте вложенные папки в соответствии с выбранной стратегией файловой иерархией^ images, products и т. д. Помните, что эти панки должны иметь одинаковые имена на сервере и на локальной машине. Хорошим тоном считается использовать всегда и везде строчные буквы для имен папок, чтобы избежать проблем с регистрозависимыми серверами. Такая организационная структура выполняет две функции. Во-первых, уберегает вас от случайных ошибок размещения файлов в неправильных каталогах на сервере. Во-вторых, облегчает процесс создания относительных URL, речь о которых пойдет в главе 7, «Создание гипертекстовых ссылок». Как именовать файлы Вы, наверное, уже обратили внимание на то, что расширения являются важной частью любых файлов, используемых в веб-сайтах. Это объясняется тем, что браузеры при определении типа файла полагаются именно на расширения. Заглавная страница сайта почти всегда именуется index.html или index.htm. Большинство серверов автоматически загружают именно этот файл, если в URL не указан какой-то другой конкретный файл. Например, если вы напишете в строке адреса: http: //www. fakecorp.com/, то, скорее всего, загрузится файл http://www.fakecorp.com/index.html. Об этом свойстве веб-серверов нужно всегда помнить при написании сайтов. Примите к сведению еще один совет: если уж вы решили хранить все файлы, составляющие сайт, в одном каталоге, давайте им максимально логичные имена, отражающие их принадлежность к тому или иному разделу. Например, about_company.html, about_headerjpg или about_ceo_photosjpg. В этом случае вам впоследствии при обновлении сайта будет проще разобраться в собственных файлах. Это при их создании вы помните, к чему они относятся, а через месяц-другой, я уверяю вас, скорее всего, забудете, к чему относится какой-нибудь. sl2.html или 438952.jpg. Если же вы создаете функциональные или типовые каталоги, более логично давать несколько другие имена, потому что принадлежность файлов к тому или иному разделу или типу определяется именем каталога, например about\com.pany.html. Обновление веб-сайта Если вы правильно организовали свой сайт, то его поддержка и обновление сводится к замене устаревшего файла новым с тем же именем. Всегда нужно быть уверенным в том, что вы делаете все правильно при загрузке файлов на сервер, поэтому перед началом обновления сайта следует проконсультироваться с техническим персоналом фирмы-провайдера (В большинстве случаев, когда вы подписываете контракт, вы получаете письменную инструкцию). Для осуществления обновления файлов нужно использовать программу работы с протоколом FTP. Пример такой программы показан на рис 3.6 (Некоторые редакторы HTML имеют встроенную возможность загрузки файлов на сервер по FTP). Весь процесс не представляет собой ничего сложного.

Программа, установленная на сервере, попросит вас ввести имя пользователя и пароль для открытия доступа к своей части дискового пространства. В большинстве случаев вы указываете в FTP-программе адрес своего сервера (например, www.isp.com), хотя иногда требуется обращаться к компьютеру, адрес которого начинается с ftp. Если у вашего сайта есть собственное имя домена, вам может потребоваться зайти примерно на такой URL: www.fakecorp.com или ftp.fakecorp.com.
Если сервер распознает ваше имя пользователя и пароль, соединение с ним будет установлено. Скорее всего, вы окажетесь в главном каталоге своего сайта (В противном случае потребуется сменить каталог, чтобы попасть в главный. Это можно сделать с помощью команды cd или еще каким-нибудь образом).
Добавлять файлы можно с помощью команды put, которую нужно найти в программе FTP-клиента. Когда вы загружаете новые файлы, не забывайте переносить их таким образом, чтобы относительные пути к ним сохранялись такими, как на вашем локальном диске (Скажем, изображения переносите в каталог images и т. д.). Вам может понадобиться создать некоторые каталоги, особенно если вы впервые заходите на сервер.
Чтобы заменить существующий файл, опять же, нужно использовать команду put, на сей раз необходимо помнить о том, что заменяемый и новый файл должны иметь одинаковые имена, вплоть до регистра букв. При этом старый файл будет уничтожен, поэтому следует вначале подумать, не хотите ли вы сделать резервную копию. В противном случае восстановить его не удастся.

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

Рис. З.5. Программа FTP-клиент используется для отправки файлов с винчестера локальной машины (внизу) на серверный компьютер (наверху) Резюме В этой главе мы рассмотрели некоторые инструменты, которые вам понадобятся при создании веб-сайтов. Некоторые из них действительно необходимы, без некоторых можно вполне обойтись. Также вы получили представление о программах несколько иного рода: редакторах изображений, анимации и мультимедиа. Затем мы обсудили технологию получения дискового пространства на сервере, включая список вопросов, которые следует задать представителю поставщика услуг Интернета. Глава закончилась обсуждением всевозможных файловых структур сайта. Вы узнали, каким образом лучше размещать файлы на сервере и локальном диске, как их именовать, как обновлять сайт. В главе 4, которая называется «Создаем первую веб-страничку», вы научитесь создавать простейшие страницы и шаблоны, включающие в себя основные структурные элементы, которые понадобятся в любом документе XHTML.