Организационный момент.

Отметить присутствующих. Сообщить тему урока. Настроить учащихся на восприятие материала.

2. Изложение нового материала.

Разметка веб-страницы

Чтобы все элементы на веб-странице смотрелись эстетично, пространство веб-страницы использовалось максимально, но при этом посетителю на ней было комфортно, чтобы вся веб-страница была красива, надо поработать над правильной и оптимальной разметкой веб-страницы. Ясно, что перед началом работы в Dreamweaver MX 2004 необходимо создать план-макет веб-страницы — что называется, «на бумаге».

Вспомогательные инструменты разметки веб-страницы

В Dreamweaver MX 2004 заложено много средств для того, чтобы сделать вашу работу по созданию красивого и оптимального сайта быстрой и эффективной. Такими вспомогательными инструментами являются среди прочих так называемая модульная сетка и линейка. Основное их назначение — это выравнивание различных объектов на веб-странице.

Сетка

Чтобы включить модульную сетку в Dreamweaver MX 2004, надо выполнить команду меню View • Grid • Show Grid (Вид • Сетка • Показать сетку). Повтор этой же команды приведет к скрытию сетки. В результате на рабочей области веб-страницы сетка. Эта сетка будет видна только в режиме редактирования Dreamweaver MX 2004. По умолчанию линии сетки расположены с интервалом в 50 пикселов. Чтобы изменить интервал следования линий сетки, выполняем команду меню View • Grid • Grid Setting (Вид • Сетка • Настройка сетки). Эта команда открывает диалоговое окно Grid Setting (Настройка сетки). Флажок Show grid(Показать сетку) показывает сетку, а флажок Snap to grid(Привязать к сетке) включает привязку элементов веб-страницы к сетке. Таким образом, действия этих флажков аналогичны соответствующим командам меню. В поле ввода Spacing (Расстояние) устанавливаем значения промежутков между соседними линиями сетки. Здесь же указываем и единицу измерения этих расстояний. Последний переключатель Display(Отображение) включает один из двух возможных режимов отображения сетки на экране: линиями (Lines) или точками (Dots).

Командой меню View • Grid • Snap to Grid (Вид • Сетка • Привязать к сетке) включается так называемая привязка к сетке. В этом случае все помещаемые на веб-страницу объекты будут привязываться («прилипать») к той или иной линии сетки. Это несколько упрощает взаимное размещение и выравнивание объектов.

Линейки

Вспомогательный инструмент линейки (Rulers) присутствует практически везде и работает во всех приложениях одинаково. Основное назначение таких линеек — быстрое и точное определение текущих координат того или иного объекта на веб-странице. Как и сетка, линейки существенно упрощают и ускоряют работу по созданию четко упорядоченной, а если нужно, то и симметричной веб-страницы.

Для включения режима отображения линеек выполняем команду меню View • Rulers • Show (Вид • Линейки • Показать). В этом же меню можно выбрать и единицы измерения на линейках — пикселы (Pixels), дюймы (Inches) или сантиметры (Centimeters).

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

Начальную точку обеих линеек можно совместить (или перенести на новое место). Для этого щелкаем на маленьком белом квадратике у пересечения линеек и, не отпуская левой кнопки мыши, перетаскиваем его в нужное место. А чтобы вернуть начальную точку в первоначальное место, выполним команду меню View • Rulers • Reset Origin (Вид • Линейки • Вернуть в исходное). После этого начала отсчета обеих линеек вернутся в исходное состояние — верхний левый угол.