Изображение-подложка (Tracing image)

Tracing image (изображение-подложка) используется в качестве подсказки, чтобы создать или восстановить дизайн html-документа. Изображение-подложка - это изображение в формате JPEG, GIF или PNG, которое помещается на задний план окна Document (Документ) в Dreamweaver. При необходимости такое изображение можно скрыть, сделать непрозрачным и изменить его положение. Изображение-подложка отображается только в Dreamweaver и не отображается при просмотре документа в браузере. Рассмотрим различные способы добавления подложки к документу, отображения и т.д.

  1. Чтобы добавить изображение-подложку к web-странице выполните следующие шаги:
    • Выполните команду View | Tracing Image | Load (Вид| Изображение подложка| Загрузить).
    • В появившемся диалоговом окне выберите файл изображения, и нажмите кнопку Select (Выделить).
    • Далее в диалоговом окне Page Properties (Параметры страницы) установите с помощью ползунка Image Transparency (Прозрачность изображения) прозрачность изображения и нажмите на кнопку ОК.

    Кроме данного способа можно добавить изображение-подложку непосредственно через окно параметров страницы. Для этого следует выполнить команду Modify| Page Properties (Изменить | Параметры страницы) и в появившемся окне внести необходимые изменения.

  2. Чтобы отобразить при открытиии документа уже добавленное изображение-подложку, следует выполнить команду View | Tracing Image | Show (Вид | Изображение-подложка | Показать).
  3. Для изменения положения подложки следует выполнить:
    • Чтобы определить размещение подложки, выполните команду View | Tracing Image | Adjust Position (Вид | Изображение-подложка | Настроить расположение) и введите значения координат X и Y. Чтобы переместить изображение на 1 пиксел, пользуйтесь клавишами перемещения курсора, а на 5 пикселов клавиши перемещения курсора при нажатой кнопке Shift.
    • Для перемещения изображения назад в верхний угол документа, выполните команду View | Tracing Image | Reset Position (Вид | Изображение-подложка | Восстановить положение).
      Для выравнивания подложки по выделенному объекту выполните команду View | Tracing Image | Align with Position (Вид | Изображение-подложка | Выровнять по выделению). Верхний левый угол подложки выровняется по левому верхнему углу объекта.

     

    Слои

Слой представляет собой контейнер для того или иного содержимого. В слоях можно размещать любые элементы (текст, рисунки, формы, подключаемые модули, другие слои и т.д.), а также использовать их для создания анимационных эффектов с помощью временной диаграммы Timeline. Слои удобный инструмент для создания макета страницы, позволяющий позиционировать элементы на странице с точностью до одного пиксела. Для расположения содержимого на странице Dreamweaver поддерживает два формата слоев CSS-слои и Netscape-слои:

    • CSS-слои размещают содержимое страницы с помощью тегов <div> и <span> и поддерживаются Internet Explorer 4.0 и выше и Netscape Navigator 4.0 и выше.
    • Netscape-слои размещают наполнение старницы с помощью тегов <layer> и <ilayer>; поддерживаются только Netscape Navigator.

ПРИМЕР
Использование изображения-подложки и слоев для разметки макета старницы в Dreamweaver

Файлы-заготовки: [tracing.jpg] [logo1.jpg] [logo2.jpg] [button.gif] [button_over.gif]

Рис. 1

1. Создайте новый документ, выполнив команду File | New (Файл | Создать). Определим параметры документа. Для этого выполните команду Modify | Page Properties (Параметры | Параметры страницы). При определении параметров документа важно корректно определить заголовок документа, так как он отражает основную суть и идею вашего документа. Поскольку наш первый документ - общая информация о компании, то в строке Title (Заголовок) введите текст: ООО "Наша компания". Данный текст будет отображаться в строке заголовка браузера.

В соответствии с рисунком 1 введите следующие параметры документа:
1. Background (Цвет фона): #B4D0C8;
2. Text (Цвет текста) : #475C3F;
3. Links (Цвет ссылок) : #333318;
4. Visited Links (Цвет посещенных ссылок): #666600.

Поля Left Margin (Левое поле) и Top Margin (Верхнее поле) определяют размеры отступов для атрибутов тега <BODY>. Netscape игнорирует эти значения, а Internet Explorer использует их для определения размеров отступов от левой и верхней границ листа документа, т.е. для определения размеров левого и верхнего полей документа. Поля Margin Width (Ширина поля) и Margin Height (Высота поля) определяют размеры отступов для атрибутов тега <BODY>, которые поддерживает Netscape Communicator. В частности поле Margin Width (Ширина поля) определяет размеры левого поля, а Margin Height (Высота поля) - размеры верхнего поля. Internet Explorer игнорирует значения в данных полях. Для получения одинаковых результатов при просмотре вашего документа как в Netscape, так и Internet Explorer, желательно указывать одинаковые значения в соответствующих полях. В нашем случае укажем нулевые значения для каждого из полей (см. рис. 1).

В поле Document Encoding (Кодировка документа) укажите Cyrillic (Windows-1251). В поле Tracing Image (Изображение-подложка) щелкните по кнопке Browse (Выбрать). В окне Select Image Source (Выбрать файл изображения) перейдите в папку images вашего web-узла и выберите файл tracing.jpg. В поле Image Transparency (Прозрачность) установите 40% прозрачности для изображения-подложки (см. рис. 1). Щелкните по кнопке ОК, чтобы вернуться в окно документа и перейти к разметке документа.

Рис. 2

Рис. 3

Рис. 4

Перейдем к разметке нашего макета в Dreamweaver с помощью технологии слоев. Так как для описания слоев в стандарте языка HTML, поддерживаемом Netscape, и в стандарте, поддерживаемом Internet Explorer, используются различные теги, Dreamweaver предлагает технологию преобразования слоев в таблицу. Так что результатом нашей работы со слоями будет макет документа в виде таблицы.
Инструмент создания слоя присутствует на панели Objects (Объекты) (рис. 2). Если панель инструментов Objects (Объекты) у вас не активизирована, то для ее вывода на экран выполните команду Window | Objects (Окно | Объекты).

Используя инструмент Draw Layer (Нарисовать слой) или команду Insert | Layer (Вставка | Слой), создайте слой для первой части нашего логотипа (номер 1, см. рис. 3) .

Выведите на экран палитру слоев, выполнив команду Window | Layers (Окно | Слои). В окне палитры (см. рис. 4) на данный момент отображается текущий слой под именем Layer 1. Он видим, и имеет значение Z-индекса равное 1. Z-индекс определяет уровень слоя в группе накладывающихся друг на друга слоев. Если Z равен 1, то слой находится на первом уровне, 2 - на втором и т.д. Если установить флажок в поле Prevent Overlap (Перекрытие), то этой операцией запрещается перекрытие слоев. Перекрывающиеся слои преобразуются в таблицу с перекрывающимися ячейками, которые не поддерживаются браузерами 3-ей версии. Если вы учитываете в качестве будущих посетителей web-узла и посетителей, имеющих браузеры 3-ей версии, желательно флажок в данное поле установить.

Рис. 5

 Первый слой создан, видим (рис. 5). Вставим в него изображение с первой частью логотипа. Для этого выполните команду Insert | Image (Вставка | Изображение) или щелкните по кнопке Insert Image (Вставить изображение) на палитре Objects (Объекты) (см. рис. 2). В окне Select Image Source (Выбрать изображение) откройте папку images вашего web-узла и в списке файлов выберите файл с именем logo1.jpg. Чтобы вернуться в окно документа, щелкните по кнопке Select (Выбрать). Постарайтесь откорректировать размеры слоя и изображения, так чтобы размеры изображения совпадали с размерами изображения. Если расположение слоя не соответствует макету, выделите его и, используя клавиши перемещения курсора, подкорректируйте расположение слоя в соответствии с макетом.
Создайте второй слой (номер 2, рис. 3) и вставьте в него изображение с именем logo2.jpg. Используя клавиши перемещения курсора, подкорректируйте его размещение по отношению к изображению в первом слое так, чтобы изображения в двух слоях представляли цельную картину. Третий слой спроектируйте для меню, четвертый - для вспомогательного меню, пятый - для кнопки переключения на другую языковую версию документа, шестой - для текстового блока. В результате у вас должна получиться разметка как на рисунке 3. Сохраните изменения в документе, выполнив команду File | Save (Файл | Сохранить), задав имя документу tracing.html.

рис. 6

Рис. 7

 Переходим к этапу преобразования слоев документа в таблицу. Выполните команду Modify | Layout Mode | Convert Layers to Table (Свойства | Режим разметки | Преобразовать слои в таблицу). В окне Convert Layers to Table (Преобразовать слои в таблицу) настраиваются параметры преобразования слоев в таблицу (см. рис. 6). В частности, параметр Most Accurate (Максимальное соответствие) создает ячейку таблицы для каждого слоя и дополнительные ячейки, чтобы заполнить пространство между слоями. Параметр Smallest: Collapse Empty Cells (Изменить: Пустые ячейки в пределах) определяет, что края слоев должны быть выровнены, если они позиционируются в пределах указанного числа пикселов. При выборе данного параметра количество пустых строк и столбцов уменьшается. Параметр Transparent GIFs (Прозрачный GIF) позволяет заполнить некоторые ячейки таблицы прозрачным рисунком, чтобы она корректно отображалась в разных браузерах. Параметр Center on Page (Центрировать) определяет расположение страницы по горизонтали страницы. Если параметр включен, то таблица центрируется. В обратном случае - располагается по левому краю страницы. Следующие три параметра определяют:
1) Show Layer Palette (Показать палитру слоев) - отобразить палитры слоев на к экране;
2) Show Grid (Показать сетку) - отобразить сетку разметки;
3) Snap To Grid (Привязать к сетке) - привязать таблицу к сетке разметки.
Установите параметры в соответствии с рисунком 6. Щелкните по кнопке ОК для преобразования слоев в таблицу. Если на экране появится сообщение с предупреждением, что слоя с таким-то и таким-то номером перекрываются, выделите один из этих слоев в палитре (см. рис. 4) и переместите его или измените его размеры так, чтобы он не перекрывал другой слой. Если процесс преобразования прошел удачно, у вас получиться документ как на рисунке 7. Сохраните изменения. На следующем шаге начнем создание шаблона на основе данного документа и создание двуязычной версии документа.