Режим разметки страницы Dreamweaver

Да, можем!

Dreamweaver предоставляет нам замечательную возможность. Мы можем точно так же, как наши коллеги-полиграфисты, просто рисовать на странице "рамки" и помещать в них фрагменты текста и графические изображения. При этом Dreamweaver сделает за нас всю остальную работу: создаст таблицу разметки, если ее еще нет, и поместит в ней новую ячейку, произведя все необходимые слияния, если без них не обойтись. Мы можем с легкостью перемещать такие "рамки" с места на место и изменять их размеры, a Dreamweaver "на лету" изменит результирующий HTML-код и пересоздаст результирующую таблицу, чтобы отразить ваши изменения.

Таким образом можно создавать Web-страницы, не отличающиеся по сложности от печатных документов. Для этого нужно только переключиться в так называемый режим разметки страницы (фактически это четвертый режим отображения Web-страницы; три других были описаны в главе 2). В этом режиме Dreamweaver отображает и обрабатывает таблицы особым образом. При этом, находясь в режиме разметки, вы можете переключиться из режима отображения страницы в режим HTML-кода и взглянуть, что натворил Dreamweaver за вашей спиной,

Но как все-таки перейти в режим разметки? И как им пользоваться? Очень просто.

Давайте создадим новый вариант начальной страницы нашего нового сайта. Но, прежде всего, переименуйте файл default.htm сайта Sample site 3 (созданная нами ранее страница), скажем, в default_old.htm. Потом откройте эту страницу в окне документа. Мы будем часто копировать с нее фрагменты содержимого в новую страницу, поэтому лучше держать ее открытой.

Далее создайте в панели Siteновую страницу default.htm, проверьте, является ли она главной страницей, и откройте ее в окне документа. Это и будет новая главная страница нашего сайта.

Чтобы переключиться в режим разметки страницы, нажмите кнопку Layout View,расположенную на вкладке Layoutпанели объектов. Слева от нее находится кнопка StandardView, позволяющая переключиться в обычный режим отображения страницы. Обе эти кнопки показаны на рис. 8.10. Вы также можете выбрать в подменю Table Viewменю Viewпункт Layout Viewили нажать комбинацию клавиш <Ctrl>+<F6>. Для обратного переключения выберите пункт Standard Viewв том же подменю или нажмите комбинацию клавиш<Сtrl>+<Shift>+<F6>.

Рис. 8.10. Кнопки Standard View и Layout Viewпанели объектов

В любом случае после этого Dreamweaver выдаст объемистое предупреждение, описывающее, что вы можете делать в режиме разметки. Прочитайте его, если хотите, и закройте, нажав кнопку Done.Если вы не хотите, чтобы Dreamweaver выдавал это предупреждение в дальнейшем, перед закрытием его включите флажок Don't show me this message again.Автор рекомендует вам так и сделать.

Теперь самое время включить отображение измерительных линеек. Это настоящие линейки, проградуированные в одной из единиц измерения и отображаемые вдоль границ окна документа. Они позволят вам в дальнейшем более точно позиционировать фрагменты содержимого страницы. Чтобы увидеть их, включите в подменю Rulersменю Viewпункт-выключатель Showили нажмите комбинацию клавиш <Ctrl>+<Alt>+<R>. Чтобы убрать линейки, отключите этот пункт. Пункты-переключатели Pixels(пикселы), Inches(дюймы) и Centimeters(сантиметры) того же подменю Rulersменю Viewпозволят вам задать нужную единицу измерения.

Теперь обратите внимание на сами линейки. В месте их пересечения в левом верхнем углу находится точка начала отсчета, "ноль" системы координат, иначе говоря, точка с координатами (0, 0) (см. рис. 8.11). По умолчанию она находится именно там — в левом верхнем углу. Но вы можете переместить ее в любое другое место; для этого достаточно "захватить" ее мышью и перетащить куда надо. Как только вы отпустите кнопку мыши, шкалы на линейках изменятся и станут отсчитывать все координаты от вновь заданного "нуля". Иногда это бывает полезно. А чтобы вернуть начало координат на свое законное место — в левый верхний угол окна, выберите пункт Reset Originподменю Rulersменю View.

Рис. 8.11. Точка начала отсчета в месте пересечения измерительных линеек

Еще одно средство помочь вам разместить фрагменты содержимого в нужном месте — координатная сетка. Чтобы отобразить ее, включите пункт-выключатель Show Gridподменю Gridменю Viewили нажмите комбинацию клавиш <Ctrl>+<Alt>+<G>. Чтобы убрать сетку, отключите этот пункт.

Можно сделать так, чтобы фрагменты содержимого, рисуемые мышью, "прилипали" к линиям сетки. Это поможет вам более точно позиционировать их по делениям шкал. Чтобы включить "прилипание", включите пункт Snap To Gridподменю Gridменю Viewили нажмите комбинацию клавиш <Ctrl>+<Alt>+<Shift>+<G>.

Если вас не устраивает шаг координатной сетки, вы можете его изменить. Для этого выберите пункт Grid Settingsподменю Gridменю View.На экране появится диалоговое окно Grid Settings,показанное на рис. 8.12.

Рис. 8.12. Диалоговое окно Grid Settings

С помощью селектора цвета Colorзадается цвет линий сетки.

Флажок Show Gridвключает или отключает показ сетки. Он аналогичен пункту Show Gridподменю Gridменю View.

Флажок Snap to Gridвключает или отключает "прилипание" фрагментов содержания к линиям сетки. Он аналогичен пункту Snap to Gridподменю Gridменю View.

Поле ввода Spacingзадает шаг линий сетки, то, что нам больше всего нужно. Раскрывающийся список, расположенный справа от него, задает единицу измерения: Pixels(пикселы), Inches(дюймы) или Centimeters(сантиметры). Задайте шаг сетки равным одному сантиметру — привычную для нас единицу измерения. Хотя в Web-дизайне чаще используются пикселы, сантиметры будут вам привычнее на первых порах.

Группа переключателей Displayзадает вид линий сетки. Переключатель Linesделает их такими, какие вы видите сейчас — сплошными линиями. Это поведение Dreamweaver по умолчанию. Переключатель Dotsвключает отображение точечных линий; в таком виде они меньше отвлекают внимание, однако хуже видны на экране.

Закончив настройку сетки, нажмите кнопку ОКдля сохранения заданных установок или Cancel— для отказа от них. Вы можете также нажать кнопку Apply,чтобы применить заданные установки без закрытия диалогового окна Grid Settings.

Внешний вид окна документа в режиме разметки с включенными линейками и координатной сеткой с шагом в один сантиметр показан на рис. 8.13.

Задайте параметры этой страницы как у предыдущей (default_old.htm). Теперь можно приступать к работе над разметкой.

Рис. 8.13. Окно документа в режиме разметки с включенными линейками и сеткой