Web дизайн\Учебник по HTML

Глава 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). Весь процесс не представляет собой ничего сложного.

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

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

Рис. З.5. Программа FTP-клиент используется для отправки файлов с винчестера локальной машины (внизу) на серверный компьютер (наверху)

Резюме

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

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