Работа по усовершенствованию дизайна сайта

Создание шаблона для многократного применения

В значительной мере, работа над внешним видом сайта Newland Tours завершена. Как уже говорилось, необходимость в небольших настройках и дополнениях будет возникать на протяжении всего процесса разработки, но в целом дизайн сайта не изменится.

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

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

Прежде чем продолжать, важно уяснить, что шаблон, который будет создан, не является файлом шаблона Dreamweaver. Шаблоны Dream-weaver позволяют дизайнерам создавать шаблоны страниц, а затем закрывать для редактирования определенные области, чтобы другие разработчики не могли модифицировать контент. Прочие области остаются доступными для редактирования, так что при желании любой разработчик может вносить свои коррективы в содержимое, но без изменения внешнего вида сайта или навигационной схемы. Шаблоны Dreamweaver – это мощный инструмент, особенно в сочетании с программой Macromedia Contribute, позволяющей, в частности, технически неподкованным работникам компаний управлять содержимым страницы и поддерживать ее, не имея профессиональных навыков по веб-разработке и не нарушая код.

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

В завершение отметим, что термин "шаблон" используется в широком смысле, а не в контексте готовых шаблонов, встроенных в программу Dreamweaver.

1. Откройте файл about.htm .

   Для создания шаблона следует удалить с одной из страниц сайта весь уникальный контент. Очевидно, что самый быстрый способ это сделать – использовать страницу, на которой меньше всего содержимого. Файл about.htm является самой простой страницей сайта, так что это неплохая отправная точка.
2. В меню File (Файл) выполните команду Save As (Сохранить как) и сохраните файл под именем generic_template.htm.

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

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

   Может оказаться, что после того, как программа Dreamweaver удалила содержимое, она не изменила размер таблицы (хотя программа Dreamweaver MX 2004 гораздо лучше решает эту проблему, чем ее предыдущие версии), вследствие чего на странице появилось много свободного места. Эта проблема связана не с кодом, а с отображением на экране. В браузере страница будет отображаться надлежащим образом.

   Если возникла такая проблема, следует просто щелкнуть на теге <table> в селекторе тегов, чтобы программа Dreamweaver заново отобразила таблицу.

   Примечание.Многие пользователи пытаются решить проблему пустого пространства, перетаскивая нижнюю границу таблицы вверх. Однако вследствие этого Dreamweaver часто изменяет атрибут height для высоты таблицы (или, возможно, высоты ячеек). Другими словами, это попытка устранить проблему отображения путем изменения кода. На самом деле, этот способ приводит к созданию новых проблем, при этом не решая изначальной. Отметим также, что нижнюю границу таблицы перемещать не следует!
   

   
   увеличить изображение
   
4. Выделите текст "About Newland Tours" и замените его текстом "Page Title Goes Here".

   Заменитель текста в шаблонах ускоряет ввод стандартного содержимого и обеспечивает единую структуру страниц. Например, каждая страница должна иметь заголовок, который форматируется тегом <h1>. Если каждое слово заменителя начинается с прописной (заглавной) буквы, это служит напоминанием всем, кто работает с шаблоном, что все слова заголовка начинаются с прописных букв.
5. Замените первый абзац текста в документе текстом "Body text goes here". Несколько раз нажмите клавишу (Del) до тех пор, пока не будут удалены все пустые строки под абзацем.

   Чтобы Dreamweaver заново отобразил таблицу, следует щелкнуть в селекторе тегов на теге <table>.

   Шаблон страницы должен выглядеть так же, как на рисунке.

   

   
   увеличить изображение
   
6. Сохраните документ generic_template.htm.