Определение компоновки страницы и размещение элементов управления

Оценить
(0 голоса)

При создании Web-страниц важно решить, как расположить на странице элементы управле­ния. Это большая тема, которая продолжает развиваться. Многие Web-сайты хранят свой макет в таблицах. Каждый элемент страницы находится в таблице, состоящей из столбцов и строк. Другие сайты размещают элементы на странице (так, что они не двигаются). Если элементы накладываются друг на друга (как это бывает при увеличении размера шрифтов), то они так и отображаются наложенными. Есть и такие сайты, которые на стадии конструи­рования создают страницы без всякого реального содержимого. Затем на стадии выполне­ния они используют таблицы стилей (для применения макета элементов управления). И ко­нечно, существуют страницы и сайты, которые используют все эти способы (в зависимости от ситуации). Следующий список описывает имеющиеся у вас варианты более подробно.

□    Flow Layout — если вас устраивает динамический характер Web-страницы в браузере, то, возможно, вы предпочтете управление позиционированием при помощи flow layout ("перетекающее размещение"). Это означает перемещение ваших элементов управления вместе с движением страницы. Это отличная возможность, если вы собираетесь выпол­нить табличную компоновку вашей страницы и разместить ваши элементы управления в ячейках таблицы. Все выравнивается по отношению к соседним элементам. Например, если элемент перемещается вниз, то все, что находится ниже этого элемента, также пе­ремещается вниз. В Visual Studio 2008 это настройка по умолчанию.

3 Absolute Positioning — если вы привыкли создавать формы Windows, то, возможно, вам более привычно управлять позиционированием каждого отдельного элемента. В этом случае вы перетаскиваете элемент на форму и перемещаете его по форме относительно других элементов. Он будет размещен там, где вы его отпустите. Кроме того, при абсо­лютном позиционировании элементы размещаются относительно их родительского контейнера. Например, если вы помещаете кнопку внутрь тега <div> и настраиваете положение кнопки как 5 пикселов от верха и 5 пикселов от левой стороны, то эти 5 пик­селов в обоих случаях будут отсчитываться от границы тега <div> (а не страницы).

□    Relative Positioning— этот способ сочетает перетекающее размещение с абсолютным позиционированием. При относительном позиционировании элементы размещаются по движению страницы. Однако если вы настроите для элемента свойства top и left, то эти расстояния будут отсчитываться в зависимости от относительного расположения элемента на странице.

□    CSS Positioning— это более сложный вариант позиционирования. Элементы обычно раскладываются на странице при помощи перетекающего размещения. Однако каждый элемент имеет специфичный стиль, определенный либо на странице, либо в таблице стилей (это предпочтительный вариант). Стиль имеет информацию позиционирования (в том числе поля, высоту, ширину и т. п.). Настроить это несколько сложнее. Однако после этого вы сможете легко менять раскладку страницы (при помощи изменения таблицы стилей, а не самой страницы).

У вас могут быть такие ситуации, когда вам нужно смешать в одной странице как перете­кающее, так и абсолютное позиционирование. Например, вы можете определить основан­ную на таблицах страницу, которая перетекает. А внутри ячейки таблицы вы можете на­строить элемент управления типа "панель". Этот элемент управления может быть настроен исключительно на абсолютное позиционирование элементов внутри панели. Либо вы може­те добавить изображение на страницу, которая использует перетекающее размещение или CSS-позиционирование. Вы можете указать, что это изображение должно быть позициони­ровано абсолютно или относительно (аналогично тому, как вы встраиваете изображение в документе Word).

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

Настройка позиционирования элементов управления
Создание общего внешнего вида
Стили и основы таблиц стилей
Встроенный стиль
Стили уровня страниц

Добавить комментарий


Защитный код
Обновить

© 2017 www.visualstudios.ru. Все права защищены.