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