Петр Ташков - Работа в Интернете. Энциклопедия

Создадим новый пустой HTML-документ, выбрав в разделе Create New (Создать новый) пункт HTML.

Основные элементы интерфейса

Даже при беглом взгляде на рабочее окно программы Adobe Dreamweaver (рис. 11.8) можно заметить, что принципиальных отличий от множества других компьютерных программ здесь нет: та же строка меню, те же панели инструментов и т. д.

Обратим внимание на некоторые моменты. Самое большое по площади место занимает рабочее окно, в котором создаются и редактируются веб-страницы. Отдельного упоминания заслуживают кнопки переключения режимов работы: Code (Код), Split (Разделитель) и Design (Дизайн). Работать над обликом веб-страницы в рассматриваемом пакете можно в режиме дизайна, то есть видя перед собой редактируемую страницу и непосредственно воздействуя на элементы ее оформления, или в режиме ручного написания, так, как если бы пользователь писал HTML-код, например, в Блокноте. Режим дизайна включается кнопкой Design (Дизайн), а режим кода – кнопкой Code (Код). Кнопка Split (Разделитель) включает режим одновременного отображения HTML-кода и дизайна, как показано на рисунке.

Под рабочим окном расположена панель Properties (Свойства). В зависимости от того, с каким объектом в данный момент работает пользователь (таблица, рисунок, текст, гиперссылка), содержимое панели Properties (Свойства) может изменяться, отображая свойства выделенного объекта. Разумеется, эти свойства можно изменять.

Правую сторону основного окна программы занимает панель дополнительных функций и элементов управления.

Создание веб-страницы

Поскольку основная составляющая веб-страниц – это текст, то работа в Adobe Dreamweaver CS3 ничем особо не отличается от работы в текстовом редакторе. Если программа уже запущена и создан пустой HTML-документ, как было описано выше, то можно приступать к работе. Если нет – следует выполнить команду File ► New (Файл ► Новый) – откроется окно New Document (Новый документ) (рис. 11.9).

В разделе Page Type (Тип страницы) следует выбрать пункт HTML и нажать кнопку Create (Создать) – будет создана новая пустая веб-страница.

Прежде чем наполнять страницу содержимым, или, как говорят веб-дизайнеры, контентом, нужно задать некоторые ее свойства. Для этого на панели Properties (Свойства) внизу главного окна программы следует нажать кнопку Page properties (Свойства страницы) – откроется окно (рис. 11.10), в котором можно управлять всеми свойствами редактируемой веб-страницы.

В частности, можно устанавливать основной шрифт страницы, его размер, стиль и цвет; внешний вид гиперссылок; внешний вид заголовков (H1, H2, H3 и т. д.); указать название страницы, фоновый рисунок, кодировку.

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

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

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

• Как правило, сайт состоит из нескольких отдельных страничек, разумеется, все они хранятся в отдельных файлах. Каждому такому файлу также присваивается имя из латинских букв, желательно не очень длинное и по возможности осмысленное (например, для странички Контакты хорошо назвать файл contacts.html).

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

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

Выполнив команду File ► Save (Файл ► Сохранить), нужно присвоить файлу нужное имя и сохранить его в нужной папке.

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

• Common (Общие) – содержит общие элементы оформления, такие как ссылки, таблицы, комментарии и т. п.;

• Layout (Планировка) – включает в себя инструменты, с помощью которых можно управлять расположением тех или иных элементов на странице;

• Forms (Формы) – здесь расположены веб-формы, например текстовое поле, флажок, кнопка и другие;

• Data (Данные) и Spry (Активные) – позволяют использовать в составе страницы базы данных;

• Text (Текст) – как несложно догадаться, предназначена для работы с текстом;

• Favorites (Избранное) – может быть настроена пользователем на свой вкус путем добавления на нее тех или иных наиболее часто используемых кнопок.

Какой-либо элемент интерфейса добавляется на страницу с помощью удобного визуального редактора, где можно задать все параметры этого элемента. Если что-то было указано не так, то любые свойства, например, картинки или гиперссылки всегда можно отредактировать на панели Properties (Свойства). Также не следует забывать, что всегда можно вручную подредактировать HTML-код страницы. Таким образом, понятно, что создать веб-страницу в режиме WYSIWYG намного проще и удобнее, чем вручную писать код. Разумеется, здесь рассмотрены не все аспекты работы с WYSIWYG-редактором, однако, надеемся, основная идея читателю ясна.

Помимо такого рода приложений, есть еще некоторые идеи, позволяющие создавать качественные веб-сайты, имея лишь самые общие представления о языке HTML. К таким идеям относятся, например, CMS (от англ. Content Management System – системы управления содержимым, или, как еще говорят, контентом). Правда, использование таких систем требует знаний и навыков другого рода, понимания тонкостей настройки баз данных, прав доступа, знания языков веб-программирования и т. д. Однако это тема для отдельного разговора.

Размещение сайта в Интернете

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

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

Кроме того, для размещения сайта может потребоваться доменное имя (это интернет-адрес, который будут набирать в своем браузере те, кто хочет попасть на ваш только что созданный сайт). Как правило, на бесплатном хостинге доменное имя предоставляется вместе с самими услугами. Правда, это будет, скорее всего, домен третьего уровня, то есть вида http://www.name.site.com, где вместо name будет выбранное вами имя для сайта, а вместо site – название сайта компании-провайдера услуг хостинга.

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

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