Posts Tagged ‘фиксированный дизайн’

Фиксированный дизайн. Основы

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , , ,

Термин «фиксированный дизайн» используется для обозначения макета страницы, который создается на основе слоев заданной ширины. Выбор ширины зависит от ориентации на определенное разрешение монитора пользователей. Так, для разрешения 1024х768 пикселей размер таблицы следует брать не более 1000 пикселей. Такая ширина получается за счет вычитания из значения 1024 ширины вертикальной полосы прокрутки и границ окна браузера. Для всех пользователей, сайт, построенный на таком макете, будет отображаться корректно, но при больших разрешениях оказывается слишком много пустого места. Поскольку наиболее популярным среди пользователей Интернета является разрешение 1024×768, разработчики сайтов ориентируются именно на него и используют общую ширину слоев 900–1000 пикселей.

При фиксированном дизайне блок с материалом размещается обычно у левого края или по центру экрана. Последний вариант предпочтительнее, тогда не так заметны широкие поля вокруг при больших разрешениях монитора (рис. 1). (далее…)

Фиксированный дизайн. Позиционирование

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , ,

Кроме использования свойства float для размещения рядом по горизонтали двух и более слоев, для этой же цели применяется и свойство position. Сложно оценить, какой подход с применением этих свойств лучше, если они в итоге дают одинаковый результат. Однако у позиционирования заведомо больший потенциал, позволяющий не только располагать слои рядом, но и накладывать их друг на друга. С помощью таких «перекрытий» можно создать выразительный дизайн веб-страниц простыми средствами.

Координаты слоя

Положение слоя в документе зависит от заданных значений стилевых свойств left, top, right и bottom, они устанавливают соответственно позицию слоя слева, сверху, справа и снизу. Точка отсчета определяется в зависимости от свойства position, которое принимает обычно значение relative (относительное положение) или absolute (абсолютное положение). (далее…)

Фиксированный дизайн. Размещение трех колонок

Альтернативный подход к созданию макета из трех колонок с помощью слоев состоит в использовании методов позиционирования. Сюда входит применение свойства position совместно с left и top. Аналогично верстке двухколонного макета разделяют два подхода: с абсолютным и относительным позиционированием элементов.

Абсолютное позиционирование

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

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