Используйте средства визуализации для создания макета в Dreamweaver, а также устанавливайте линейки и направляющие макета, используйте направляющие с шаблонами, сетку макета и изображение-образец.
Линейки позволяют измерять и нужным образом располагать элементы при проектировании макета. Линейки могут отображаться на левой и верхней границах страницы (со значениями в пикселах, дюймах или сантиметрах).
Направляющие — это линии, перетаскиваемые на документ с линеек. Они помогают более точно располагать и выравнивать объекты. Кроме того, с помощью направляющих можно измерять размер элементов страницы или имитировать складки (видимые области) веб-браузеров.
Для выравнивания можно привязывать элементы к направляющим или наоборот. (Для использования функции привязки требуется абсолютное позиционирование элементов.) Кроме того, можно закрепить направляющие от случайного перемещения.
По умолчанию направляющие хранятся в виде абсолютных расстояний в пикселах от верхнего или левого края документа, а отображаются относительно точки отсчета линейки. Чтобы установить направляющую в процентах, удерживайте клавишу Shift во время ее создания или перемещения.
При изменении размеров элементов, например элементов с абсолютным позиционированием, таблиц и изображений, они привязываются к направляющим.
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Направляющие» > «Заблокировать направляющие».
Единица измерения соответствует единице измерения линеек.
Выберите пункт «Просмотр» > «Параметры представления "Дизайн"» > «Направляющие», а затем выберите в меню предустановленный размер окна в браузере.
Выберите команду «Просмотр» > «Параметры представления "Дизайн"» > «Направляющие» > «Изменить направляющие», настройте приведенные ниже параметры и нажмите кнопку «ОК».
Цвет направляющей
Задает цвет направляющих. Щелкните образец цвета и выберите цвет из палитры или введите шестнадцатеричное значение в текстовом поле.
Дистанционный цвет
Указывает цвет линий, отображаемых в качестве индикаторов расстояния при задержании указателя мыши между направляющими. Щелкните образец цвета и выберите цвет из палитры или введите шестнадцатеричное значение в текстовом поле.
Показывать направляющие
Делает направляющие видимыми в представлении «Дизайн».
Привязать к направляющим
Привязывает элементы страницы к направляющим при перемещении их по странице.
Закрепить направляющие
Блокирует положение направляющих.
Привязать направляющие к элементам
Привязывает направляющие к элементам на странице при перетаскивании направляющих.
Очистить направляющие
Удаляет все направляющие со страницы.
При добавлении направляющих в шаблон Dreamweaver эти направляющие будут наследоваться всеми экземплярами шаблона. Однако в экземплярах шаблона направляющие рассматриваются как изменяемые области, поэтому они доступны для редактирования. Измененные в экземплярах шаблона направляющие восстанавливаются в исходном положении каждый раз при обновлении главного шаблона.
К экземплярам шаблона можно также добавлять новые направляющие. Добавленные таким способом направляющие при обновлении главного шаблона не перезаписываются.
Сетка отображается в области «Окно документа» как система горизонтальных и вертикальных линий. Она позволяет размещать объекты с большой точностью. Элементы страницы с абсолютным позиционированием можно автоматически привязывать к сетке при их перемещении, а также изменять сетку или управлять поведением привязки с помощью соответствующих параметров сетки. Привязка работает независимо от того, является ли сетка видимой.
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Сетка» > «Отобразить сетку».
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Сетка» > «Привязать к сетке».
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Сетка» > «Параметры сетки».
Цвет
Задает цвет линий сетки. Щелкните образец цвета и выберите цвет из палитры или введите шестнадцатеричное значение в текстовом поле.
Показать сетку
Делает сетку видимой в представлении «Дизайн».
Привязать к сетке
Привязывает элементы страницы к линиям сетки.
Интервал
Управляет расстоянием между линиями сетки. Введите число и выберите в меню единицу измерения — «Пикселы», «Дюймы» или «Сантиметры».
Отображение
Указывает способ отображения линий: как линии или как точки.
Если пункт меню «Показывать сетку» не выбран, то сетка в документе не отображается, так же как и внесенные изменения.
Изображение-образец можно использовать в качестве направляющей для повторного создания эскиза страницы, созданной в графическом приложении, например в Adobe Freehand или Fireworks.
Образцом может быть изображение формата PEG, GIF или PNG, размещенное в фоне области «Окно документа». Это изображение можно скрыть, задать для него непрозрачность, а также изменить его положение.
Изображение-образец отображается только в Dreamweaver. При просмотре страницы в браузере оно не отображается. Когда изображение-образец видимо, настоящие фоновые изображение и цвет в области «Окно документа» не отображаются. Однако при просмотре страницы в браузере они будут видимыми.
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Загрузить».
Выберите «Файл» > «Свойства страницы», затем в категории «Изображение-образец» нажмите кнопку «Обзор» (возле текстового поля «Изображение-образец»).
Перейдите к своему файлу изображения и нажмите кнопку «ОК».
Чтобы в любой момент переключиться на другое изображение-образец или изменить прозрачность текущего образца, выберите «Файл» > «Свойства страницы».
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Показать».
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Настроить расположение».
Чтобы точно задать положение изображения-образца, введите значения координат в текстовых полях «X» и «Y».
При каждом нажатии клавиш со стрелками изображение будет перемещаться на 1 пиксел.
Для перемещения изображения на 5 пикселов удерживайте клавишу Shift, нажимая клавиши со стрелками.
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Вернуть в исходное положение».
Изображение-образец будет возвращено в левый верхний угол области «Окно документа» (0,0).
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Выровнять по выделению».
Левый верхний угол изображения-образца будет выровнен по левому верхнему углу выделенного элемента.
Вход в учетную запись