Не просто просто— очень просто!№27(146)/02.07.2001

Сергей БОЛАШОВ alz_alz@mail.ru
(Окончание, начало см. МК № 26 (144))
Шаблоны
Следует заметить, что в редакторе Macromedia Dreamweaver 4
предусмотрено не одно, а сразу несколько средств автоматизации
работы: макросы, библиотеки элементов (Library) и шаблоны
(Template). Но мы остановимся только на последних. Шаблоны,
используемые в Dreamweaver’е, во многом похожи на шаблоны,
применяемые в текстовых процессорах, таких как Microsoft Word.
Однако имеется несколько принципиальных отличий. Сначала на чистой
странице размещаются все элементы, которые должны войти в шаблон.
Например, как в нашем случае, навигационные меню вверху и внизу
страницы. Следующим шагом является создание (сохранение) шаблона и
(внимание!) определение в нем зон, доступных для редактирования.
Если в шаблоне не указана ни одна редактируемая зона, то изменение
страницы, созданной по этому шаблону, оказывается невозможным до тех
пор, пока в шаблоне все-таки не будет определена одна или несколько
редактируемых областей.
Но на этом не заканчиваются различия в работе с шаблонами между
Dreamweaver’ом и другими программами. Основное достоинство этого
метода заключается в следующем: если имеется хотя бы одна страница,
построенная таким способом, то при изменении этого шаблона редактор
автоматически внесет изменения во все документы, которые были
созданы по этому шаблону.
Например, создан сайт, состоящий из нескольких десятков страниц, на
каждой странице которого находится меню навигации. В связи с
небольшой «перестройкой» сайта в это меню (на каждой странице!)
необходимо добавить всего один элемент. Вполне очевидно, что это
утомительная и неблагодарная работа. Но если при создании этих
страниц использовался шаблон, то задача сильно упрощается.
Достаточно отредактировать только одну страницу, то есть добавить в
шаблон нужный элемент навигации, и Dreamweaver тут же обновит все
страницы.
Создадим собственный шаблон. Для этого открываем подготовленную нами
страницу (с двумя навигационными меню и одной областью для
информационного наполнения), затем в меню выбираем File > Save as
Template… и после указания имени переходим в режим редактирования
шаблона. Чтобы убедится, что это именно тот режим, что нам нужен,
достаточно посмотреть на строку заголовка окна, в котором
редактируется документ — там должна быть надпись <<Template>>(имя
шаблона) (рис. 1). Теперь можно вносить в шаблон все необходимые
изменения. Но так как изменения сейчас не нужны, определим зону,
доступную для редактирования. Выделяем область Layout Table — ту, в
которой будет находится контент, — далее команда Modify > Templates
> New Editable Region…, указываем имя области (рис. 1) и обязательно
сохраняем шаблон командой File > Save. Вполне возможно, что нам еще
придется изменять существующий шаблон (например, у нас до сих пор
нет ссылок в навигационных меню), но об этом немного позже.
Панель Properties
После того как шаблон (или шаблоны — не суть важно) определен, можно
приступать к клонированию страниц и их информационному заполнению.
Делается это просто: в меню выбираем File > New from Template…,
выбираем имя шаблона, по которому будет построена страница, и
получаем «заготовку». Затем в зоне редактирования инструментами Draw
Layout Table и Draw Layout Cell рисуем ячейки, в которые и помещаем
текст, рисунки и другие объекты.
Немного внимания стоит уделить панели Properties, которая
открывается при помощи комбинации клавиш Ctrl+F3 (рис. 2). С каким
бы объектом вы не работали, на этой панели всегда будут выводится
все доступные свойства этого объекта (другими словами, на этой
панели отображаются параметры тэга, который в данный момент
выделен). Конечно, flash-анимация и текстовая информация — это
абсолютно разные объекты, и параметры у них не совпадают; описывать
же панель Properties применительно ко всем объектам, используемым в
редакторе, не имеет никакого смысла. Рассмотрим основные принципы ее
работы на простом примере. При помощи мышки выделим любой рисунок.
На рисунке 2 можно видеть все свойства изображения, которые можно
изменить. Возможно, на вашем экране эта панель имеет высоту вдвое
меньшую той, что изображена на рисунке, и параметров на ней
значительно меньше. Чтобы исправить это, кликните по маленькой
стрелке в правом нижнем углу панели — эта кнопка отвечает за размеры
окна. Наиболее важные для нас параметры — это W и H, отвечающие за
высоту и ширину области, в которую будет выведен рисунок (эта
область своими размерами может и не соответствовать размеру
рисунка), а также параметр Src, отвечающий за путь к файлу рисунка,
и Alt, отвечающий за текстовую подпись, которая появится на экране
вместо рисунка в том случае, если у пользователя в браузере
отключена загрузка графики.
Особое внимание надо уделить параметру Link, отвечающему за указание
гиперссылок, ведь практически каждый объект, применяемый при
построении веб-страниц, имеет такой параметр. Ссылки можно
устанавливать различными способами. Можно просто напечатать URL в
поле Link, если ссылка указывает на удаленный ресурс. А если ссылка
указывает на какой-либо файл, расположенный внутри сайта, то можно
открыть окно Site Management (F8) и, захватив «прицел», находящийся
возле поля Link, перетащить его в окно Site Management на требуемый
файл (рис. 3).
Текст
Те, кто хоть раз занимался созданием веб-страниц, знает о
неудобствах, возникающих в связи с форматированием текста. Конечно,
указать цвет символов (рис. 4), установить ссылку (выделение текста
и указание URL в поле ввода Link) несложно. Выбор начертания шрифта
тоже не проблема, хотя этот процесс немного отличается от методов,
применяемых в текстовых процессорах. При создании веб-страниц
принято указывать не один конкретный шрифт, а целую схему, например,
Arial, Helvetica, sans-serif. Это значит, что при выводе страницы на
экран браузер сначала ищет шрифт Arial, если не находит его, то ищет
шрифт Helvetica, а если и этот шрифт не установлен в системе, то
текст выводится любым шрифтом без засечек — по-английски sans-serif.
Dreamweaver предлагает несколько готовых схем, но при желании эти
схемы можно редактировать и создавать свои собственные. Все, что для
этого надо — выбрать команду Edit Font List в поле выбора шрифтов на
панели Properties.
Но совсем другое дело — выбор размера символов и выравнивание. При
помощи средств языка HTML доступно только три вида выравнивания: по
левому краю, по центру и по правому краю. А с размерами (параметр
Size) и вовсе плохи дела — хоть их и много, от –7 до +7, указываются
они в относительных единицах и напрямую зависят от установок
браузера на компьютере пользователя.
Таблицы стилей
К счастью, все ограничения языка HTML по разметке текста можно
обойти, применив на своих страницах таблицы каскадных стилей.
Таблицы стилей позволяют оперировать массой параметров: задать
высоту символов, расстояние между строками и символами, отступы,
выравнивание и т. д. Но главное их достоинство заключается в том,
что они позволяют отделить содержание страницы от оформления.
Например, вы создали несколько страниц, в которых все подзаголовки
выводятся шрифтом Arial с выравниванием по центру. И тут вы
обнаружили, что применение шрифта Tahoma с выравниванием по левому
краю значительно улучшает дизайн ваших страниц. Но для того чтобы
изменить описание каждого подзаголовка во всех страницах, придется
немало потрудиться. А примените стили — и гора с плеч долой. Вы
создаете отдельный файл, в котором хранятся описания всех
необходимых стилей, и связываете этот файл со всеми страницами; а в
каждой странице вид заголовка определяется конкретными параметрами,
закрепленными за именем стиля. Желаете изменить начертание шрифта?
Цвет символов? Размер символов, цвет фона? Стоит только «подправить»
описание стиля — и все элементы, определенные этим стилем, изменяют
свой вид.
Еще одно большое преимущество CSS перед другими веб-технологиями,
такими как ActiveX, Java, JS, Flash, заключается в том, что
пользователи, чьи браузеры не поддерживают разметки при помощи
таблиц каскадных стилей, все-таки смогут увидеть информацию на ваших
страницах — правда, без назначенного вами оформления.
При помощи таблиц стилей можно кардинально изменить вид документов,
но мы ограничимся созданием всего лишь двух простеньких стилей.
Стиль normalText будем применять для основных блоков текста, а из
устанавливаемых ему параметров ограничимся схемой шрифтов «Arial,
Helvetica, sans-serif» и фиксированным размером в 12 пикселей.
Второй стиль — specialNote — будем применять для выделения
специальных заметок. Его параметры таковы: та же схема, что и у
предыдущего стиля, но размер символов 10 пикселей.
При создании и связывании таблиц каскадных стилей со своими
страницами необходимо учитывать, что если таблица стилей связана с
неким шаблоном, то во всех документах, построенных по этому шаблону,
применять стили можно без всяких подготовительных операций; в
противном случае необходимо будет связывать таблицу стилей с каждой
страницей, где они будут применяться (делается это с помощью команды
Text > CSS Styles > Attach Style Sheet).
Итак, создадим стили, связанные с шаблоном. Открываем любую
страницу, созданную по шаблону, затем переходим в режим
редактирования шаблона (Modify > Templates > Open Attached
Template). Открываем окно CSS Styles, в котором располагаются
доступные стили (Shift+F11). По умолчанию, пока стили не заданы, в
этом окне присутствует лишь запись (none). Вызываем из этого окна
контекстное меню, в нем выбираем New Style… — создаем новый стиль
(можно выбрать в меню команду Text > CSS Styles > New Style…) В
появившемся окне в поле Name вводим имя нашего стиля, тип (Type)
устанавливаем в значение Make Custom Style (class), Define In — в
(New Style Sheet File) (рис. 5). Затем указываем имя файла, в
котором будет хранится таблица стилей, например, style.css, и
попадаем в окно указания параметров стиля. Здесь на вкладке Type
указываем необходимые параметры, то есть схему шрифтов и размер.
После того как стили определены, их названия будут отображаться в
окне CSS Style. Для того чтобы применить нужный стиль, необходимо
выделить участок текста, к которому будет применен стиль, а затем
кликнуть по названию стиля в окне CSS Style (рис. 6).
Размещение файлов в Сети
Итак, все страницы созданы и сохранены на диске. Осталась мелочь —
установка ссылок в навигационных меню. Для этого открываем любую
страницу, созданную при помощи шаблона, выбираем Modify > Templates
> Open Attached Template. И снова попадаем в режим редактирования
шаблона. Устанавливаем необходимые ссылки (поле ввода Link в панели
Properties) и сохраняем шаблон. Редактор тут же предложит обновить
страницы, созданные при помощи этого шаблона, с чем мы, конечно же,
соглашаемся.
Приступаем к передаче файлов. Открываем окно Site Management (F8) и
для верности убеждаемся в правильности настроек FTP-клиента (Site >
Define Site, выбираем имя проекта, Edit, вкладка Remote Info).
Устанавливаем интернет-соединение, выбираем Site > Connect (или
пиктограмму с двумя разъемами на тулбаре). После удачного соединения
с удаленным хостом в левой части окна Site Management появятся папки
и файлы, находящиеся на удаленном сервере. Их, конечно, может и не
быть — все зависит не только от нашей веб-активности, но и от
«гостеприимства» хостинговой службы, — но предположим, что наша
служба предоставляет возможность использовать CGI и PHP, кроме того,
при регистрации на сервере по умолчанию был сформирован index.html.
Все, что необходимо для передачи файлов, это выделить нужные файлы и
папки в правой части окна, отвечающей за локальные файлы, и выбрать
Site > Put (или синяя стрелка на тулбаре) (рис. 7).

После того как файлы передадутся, выполните команду Site >
Disconnect для разрыва соединения.
И, наконец, последний, но очень существенный момент. Запускаем
браузер, в поле адреса набираем URL нашего сайта. Убеждаемся, что
все в порядке — сайт на месте, все функционирует (рис. 8). Полезно
также немного пройтись по страницам сайта — чтобы посмотреть, все ли
работает так, как планировалось. Все!

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