Создание гибкого макета с тремя столбцами
Для создания правил стилей с помощью форматирования элементов страницы в представлении Конструктор можно использовать Visual Web Developer. Эти же инструменты можно использовать для создания макета страницы.
В этом пошаговом руководстве будет создан макет с тремя столбцами с помощью правила стиля Float. Сначала установите размер и позицию левой и правой боковой панели, и затем можно подстроить внутренние поля в области основного содержимого, чтобы создать гибкий макет с тремя столбцами.
|
|
|
Чтобы позиции элементов правильно отображались в представлении Конструктор, возможно, потребуется скрыть Панель инструментов. Таким образом будет расширена область для отображения положения элементов на странице. |
Примечание.Создание столбцов боковой панели
Размер боковых столбцов в макете страницы можно изменять так же, как и размер заголовка. При изменении размера столбцов боковых панелей нужно установить только значение ширины без значения высоты, чтобы текст можно было увеличить по ширине столбца, если необходимо. Чтобы задать только ширину элемента div, можно перетащить его правую сторону вместо перетаскивания его угла, как в предыдущем примере.
Изменение размера и положения левой и правой боковой панели элементов div
В представлении Конструктор выберите элемент div левой боковой панели. (Это можно сделать, выбрав div.column#leftsidebar в навигаторе по тегам.)
Перетащите правый край элемента div левой боковой панели, чтобы изменить ширину элемента примерно до 200 точек.
Обратите внимание, что при перетаскивании в круглых скобках отображается значение высоты, которое показывает, что оно не изменяется.
В меню Формат выберите Положение.
Откроется диалоговое окно Положение.
В группе Стиль обтекания выберите Слева и затем нажмите кнопку ОК.
Выберите элемент div правой боковой панели и перетащите ее правый край до ширины примерно 250 точек.
В меню Формат выберите Положение.
В группе Стиль обтекания выберите Справа и затем нажмите кнопку ОК
Создание центрального столбца
Чтобы создать центральный столбец, можно установить внешние и внутренние поля для перемещения содержимого из левого и правого столбцов. Сначала создайте левую границу и затем используйте внутренние поля для перемещения содержимого из-за этой границы.
Применение стиля к центральному столбцу
В представлении Конструктор выберите элемент div основного содержимого.
Удерживая нажатой клавишу CTRL, перетащите правое поле элемента div основного содержимого, чтобы задать для правого поля значение 260 точек. Перетащите левое поле до значения 210 точек.
Пока выбран элемент div основного содержимого, в меню Формат выберите Границы и заливка.
Откроется диалоговое окно Границы и заливка.
В списке Стиль выберите Заливка и в группе Предварительный просмотр нажмите кнопку левой границы.
В текстовом поле Ширина введите 1px.
В группе Внутренние поля в поле Левое введите 10px.
Нажмите кнопку ОК.
Настройка нижнего колонтитула
Если пользователи изменяют размер страницы или страница отображается на мониторе большого формата, нижний колонтитул может сворачиваться и отображаться у края одного из столбцов. Чтобы этого избежать, можно задать правило стиля Clear.