Не просто просто— очень просто!№26(145)/25.06.2001

Многие хотели бы создать свой сайт или страничку и разместить
где-нибудь в Сети на всеобщее обозрение. Однако занимаются подобными
вещами отнюдь не все. Одних останавливает незнание языка разметки
гипертекста, других — отсутствие навыков веб-дизайна, а кого-то
пугает необходимость осваивать целый ряд программ, использующихся
при создании и поддержке сайта. Но все не так сложно, как может
показаться… Давайте посмотрим, как, используя редактор Macromedia
Dreamweaver 4, можно создать свой сайт, не прилагая при этом
титанических усилий.
(Конечно, если правильно подобрать инструмент)
Итак, перед нами стоит задача: создать сайт и разместить его в сети
Интернет. Для размещения сайта воспользуемся услугами одной их
бесплатных хостинговых служб, которых в последнее время даже более
чем достаточно. В нашем случае это будет WallSt, чей сетевой адрес
http://www.wallst.ru, а все примеры будут расположены по адресу
http://dsound.wallst.ru.
Кроме редактора Dreamweaver вам могут понадобиться графические
редакторы, чтобы придать страницам более привлекательный вид. Для
этой цели хорошо подходят Adobe Photoshop и Macromedia Fireworks.
Полезно также установить на своем компьютере один из текстовых
процессоров, позволяющих автоматически проверять орфографию. В
Dreamweaver есть встроенная проверка орфографии, но словарь русского
языка отсутствует.
Установка и настройка
Перед установкой редактора убедитесь в том, что на диске, куда он
будет установлен, присутствует 70-80 Мб свободного пространства.
Инсталлированный редактор занимает порядка 54 Мб, но в зависимости
от файловой системы, которая применяется в вашей ОС, реальный размер
может значительно превысить указанную цифру. Очень хорошо, если на
вашем компьютере установлено 64 Мб ОЗУ или даже больше; работать
можно и на 32 Мб, но с меньшим комфортом, а при интенсивных
операциях с большим количеством файлов тут же превращается в
непрерывную дисковую операцию.
Перед началом работы редактор нуждается в небольшой настройке. В
меню выберем Edit > Preferences (или Ctrl+U) и на вкладке Fonts >
Encoding в поле выбора Font Setting указываем Cyrillic, в поле
Default Encoding устанавливаем Cyrillic (Windows 1251) (см. рис. 1).
Вид кодировки зависит от сервера, на котором будут находится
страницы, и в некоторых случаях может понадобиться другая кодировка,
например KOI8-R. Как правило, службы, бесплатно раздающие место на
своих серверах, указывают, в какой кодировке необходимо загружать
страницы на их сервер. В нашем случае это именно Windows 1251.
Переходим на вкладку Prewiev in Browser. Как известно, хорошая
страничка должна одинаково выглядеть не только во всех основных
браузерах, но и на разных платформах. Dreamweaver при установке
автоматически находит Internet Explorer, другие браузеры придется
подключать вручную. По умолчанию горячие клавиши доступны только для
вызова двух браузеров: Primary — F12 и Secondary — Ctrl+F12. Если у
вас более двух браузеров, то для просмотра страниц можно назначить
свои комбинации, также можно воспользоваться командой File > Preview
in Browser > [имя подключенного браузера].
Следующая наша остановка — вкладка Status Bar. Редактор всегда
рассчитывает полный размер страницы (включая графику, скрипты и
прочее), а также время загрузки страницы исходя из указанной
скорости соединения. Поэтому, установив в поле Connection Speed
значение 14.4 Kilobits per Second, мы всегда сможем «держать руку на
пульсе». Информация о размере страницы и времени загрузки
отображается в строке состояния Рабочего поля (рис. 2).
Создаем новый проект
Для хранения созданных страниц, а также для рисунков, апплетов,
анимации и других составляющих нашего сайта понадобится отдельная
папка. Отметим, что в процессе создания сайта эта папка совершенно
бесконтрольно наполняется новыми файлами — вы пробуете различные
варианты дизайна, один рисунок сменяет другой, подходящие рисунки
оптимизируются и изменяют форматы, создаются промежуточные и
страховочные страницы, соответственно размеры этой папки растут в
геометрической прогрессии. И если структура сайта (древовидная
структура папок) не продумана с самого начала, то ориентироваться в
этом ворохе файлов и папок становится все труднее и труднее. И не
исключено, что по ошибке на сервер вместе с нужными страницами и
файлами отправится масса бесполезного хлама.
Итак, папка создана, рисунки разделены по группам и помещены в
специально созданные папки. Определим новый проект, для чего в
Dreamweaver выберем команду Site > New site…, на вкладке Local Info
в поле SiteName указываем имя сайта (это внутреннее имя редактора,
которое поможет ориентироваться в ваших проектах, если их у вас
несколько), а в поле ввода Local Root Folder указываем путь к той
папке, которую мы создали и в которую уже помещены рисунки. В поле
HTTP Address указываем адрес, по которому будет размещен наш сайт.
Этот адрес редактор использует для проверки корректности ссылок;
применительно к нашему сайту это будет http://dsound.wallst.ru. На
вкладке Remote Info указываем тип соединения с удаленным сервером, а
также необходимые параметры этого соединения. Практически все
бесплатные хостинги предоставляют доступ по протоколу FTP, но у
разных служб настройки FTP-клиента могут несколько отличаться, как
то: использование специальных папок для хранения файлов, работа в
режиме Passive FTP либо через Firewall, а у некоторых служб и вовсе
не получится работать по FTP без специальных ухищрений. Поэтому
перед тем как настраивать удаленное соединение, необходимо
ознакомиться с рекомендациями хостинговой службы по настройке
FTP-клиентов.
Итак, необходимые параметры указаны, остальные мы оставим без
изменения. После установок мы попадаем в окно Site Management. В
правой части этого окна расположены файлы и папки нашего сайта,
находящиеся на локальном диске, в левой части будут отображаться
файлы, расположенные на удаленном хосте. Работа в окне Site
Management аналогична работе в Проводнике ОС Windows: можно
создавать файлы и папки, переносить их, переименовывать и удалять.
Все эти операции осуществимы различными способами, но удобнее всего
это делать из контекстного меню (рис. 3).
Первая страница
Создание нашей первой страницы начнем с выбора File > New File,
после чего попадаем в окно редактирования документа — Рабочее поле.
Сначала изменим параметры отображения нашей страницы. Для этого
выбираем Modify > Page Properties (или Ctrl+J), в появившемся окне
изменяем поля Left Margin, Top Margin, Margin Width и Margin Height
— устанавливаем их равными нулю (рис. 4). Тем самым мы заставим
браузеры отображать нашу страницу без отступов вверху и слева. В
этом же окне можно изменить и другие параметры страницы: поменять
название, которое отображается в верхней строке браузера, изменить
цвет фона или добавить фоновый рисунок, изменить цвета ссылок или
кодировку символов для этой страницы.
Следующим шагом будет небольшая правка кода нашей страницы: нужно
убрать явное указание кодировки Windows 1251. Да, мы уже настроили
редактор на нужную кодировку, но если в теле страницы оставить
описание кодовой страницы, то велика вероятность того, что страница,
проделав путь с дисков сервера на экраны пользователей, несколько
раз пройдет через всевозможные шлюзы и proxy-сервера, а ее
содержимое не один раз подвергнется различным перекодировкам. И в
итоге текст, размещенный на странице превратится в нечитаемую
«абракадабру». Чтобы не допустить этого переключаемся в режим
отображения кода с дизайном при помощи View > Code and Design, в
заголовке страницы между тэгами <head> и </head> находим тэг <meta
http-equiv="Content-Type" content="text/html; charset=windows-1251">
и удаляем его.
Переходим к компоновке нашего документа. Для этого воспользуемся
режимом Layout View — все страницы, скомпонованные в этом режиме
строятся на основе таблиц, что обеспечивает им одинаковое
отображение во всех браузерах. Переключение между режимом Layout
View и обычным режимом отображения происходит при помощи иконок на
панели Objects, находящихся в подгруппе View (см. рис. 5). При
работе в режиме Layout View вставка обычных слоев (Layer) и таблиц
(Table) невозможна, а все операции по созданию структуры документа
выполняются при помощи двух инструментов, которые доступны из панели
Objects (подгруппа Layout) (см. рис. 5). Draw Layout Table позволяет
рисовать специальные области расположения Layout Table, которые
могут находиться либо на пустом поле страницы, либо на таких же
областях расположения. Допускается любой уровень вложения, по
крайней мере в документации упоминания о каких-либо ограничениях
отсутствуют. На этих областях расположения размещаются специальные
ячейки Layout Cell, которые строятся при помощи инструмента Draw
Layout Cell. В этих ячейках и размещают все необходимые объекты:
формы, текст, графику…
Существенное ограничение — внутри ячейки уже невозможно разместить
ни область Layout Table, ни ячейку Layout Cell; кроме того, эти
области и ячейки не могут перекрываться. Их можно передвигать при
помощи клавиатуры и мыши, а также изменять их размеры — правда, уже
только при помощи мыши.
Рисуем на странице три элемента Layout Table, один под другим. О
размерах сейчас заботиться не стоит — в процессе работы они будут по
необходимости изменяться. В верхней области мы разместим
навигационное меню и логотип, в среднем элементе будет находиться
основная часть страницы, то есть информационное наполнение. В нижней
области размещения будет текстовое меню для ускорения навигации по
сайту, а также для тех, кто имеет привычку работать с отключенным
отображением графики.
Теперь внесем некий элемент дизайна — изменим цвет фона для элемента
Layout Table, в котором будет размещено текстовое меню: выделяем
нужную область и в плавающей панели Properties указываем необходимый
цвет для параметра Bg (рис. 5).
Для того чтобы поместить текст в эту область инструментом Draw
Layout Cell, рисуем ячейку, затем печатаем нужный текст (или
копируем его из буфера). То, что получилось, можно увидеть на
рисунке 6.
Переходим к навигационному меню.
В левом верхнем углу страницы (а значит, и верхнего элемента Layout
Table) создадим ячейку, в которую и поместим рисунок с изображением
логотипа. Вставить рисунок можно разными способами, например,
командой Insert > Image или при помощи соответствующей иконки на
панели Objects, но мы воспользуемся для выполнения этой задачи
специальным средством Assets. В этом окне Assets, которое
открывается командой Window > Assets (или F11) собраны все ресурсы,
используемые в текущем проекте. Итак, указываем на иконку Images,
отвечающую за графические ресурсы, находим логотип и мышкой
перетаскиваем в созданную ячейку (рис. 7).
Теперь добавим графическое меню, состоящее из ролловеров. Ролловер —
это интерактивный элемент, состоящий из двух рисунков; пока курсор
находится вне области ролловера, на экране отображается первый
рисунок, как только курсор входит в область ролловера, отображается
второй рисунок. Снова рисуем ячейку Layout Cell, затем выбираем
Insert > Interactive Image > Rollover Image (или соответствующую
иконку на панели Objects). В появившемся окне вводим имена файлов, в
которых находятся соответствующие рисунки (рис. 8).

Поле When Clicked Go To URL пока оставляем незаполненным, так как
неизвестно, какие имена будут у наших страниц. Повторяем эту
операцию вставки ролловеров для всех элементов нашего навигационного
меню.
Итак, все, что остается сделать в верхней части, это разместить код
баннера. Для баннера используем все оставшееся пространство в
верхней части страницы: инструментом Draw Layout Table создаем
дополнительную область, в этой области строим ячейку Layout Cell.
Вообще-то можно было бы обойтись без дополнительной области
размещения, но в таком случае Netscape Navigator может неверно
отображать цветовое оформление этой части страницы. Помещаем курсор
в созданную ячейку, вызываем окно быстрой вставки тэгов (Ctrl+T) и
вводим в появившемся окне необходимый html-код или скрипт — в
зависимости от того, какая система предоставляет баннеры (рис. 9).
Загружаем нашу страничку в браузер, чтобы убедиться, что все
работает как надо (рис. 10).
Вполне логично было бы таким же образом заполнить информационную
часть страницы, указать необходимые ссылки в ролловерах и текстовом
меню и сохранить ее на диске под именем index.htm. Затем изменить
информационное наполнение, сохранить ее под другим именем — и так
далее до тех пор, пока не будет готов весь сайт.

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

Перейти на главную страничку раздела "Интернет"