Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Октябрь 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML # 100


Информационный Канал Subscribe.Ru
 | Руководство | Дизайн и юзабилити | Графика | Создание и раскрутка сайта |
| Справочная информация | Инструментарий | Шаблоны | Все статьи | 

Добрый день.

Сегодня юбилейный, сотый выпуск рассылки. Не так уж много за два года, но если учесть, что все статьи были исключительно авторскими, получается, что мне удалось написать более сотни статей за время существования рассылки. На сайте htmlbook.ru общее количество статей уже приближается к двум сотням.

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

  • Способы выделения
  • Создаем эффект свечения или сияния
  • Иллюзия акварельной живописи

    Сегодня я предлагаю вам новую статью Фиксированный дизайн. Несмотря на обобщенное название статьи, она посвящена исключительно слоям. Из-за большого объема статья приводится в сокращенном виде. Адрес статьи на сайте - www.htmlbook.ru/content/?id=172

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

    Термин «фиксированный дизайн» используется для обозначения макета страницы, который создается на основе слоев заданной ширины. Выбор ширины зависит от ориентации на определенное разрешение монитора пользователей. Так, для разрешения 640х480 пикселей размер таблицы следует брать не более 619 пикселей. Для всех пользователей, сайт, построенный на таком макете, будет отображаться корректно, но при больших разрешениях оказывается слишком много пустого места. Поскольку наиболее популярным среди пользователей Интернета является разрешение 800x600, разработчики сайтов ориентируются именно на него и используют общую ширину слоев 700-770 пикселей. И хотя тенденция идет в сторону увеличения разрешения, появление наладонных компьютеров, у которых количество пикселей как раз составляет 640х480, говорит о возврате на тот же этап.

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

    1
    2 3
    4
    Рис. 1. Типичная модульная сетка при фиксированном дизайне

    Числовые обозначения, используемые в рисунке: 1 – заголовок сайта; 2 – левый слой, обычно содержит элементы навигации; 3 – правый слой, содержит информационное наполнение страницы; 4 – <подвал>, самый низ веб-страницы, в нем, как правило, размещают контактную информацию.

    Макет с двумя колонками

    Для создания макета подобного рис. 1, следует продумать некоторые предварительные моменты – какова будет общая ширина всех элементов; где будет размещаться макет – по центру страницы или у левого края; какие цвета и шрифты будут использоваться и т.д. Шаги, которые предстоит сделать перед написанием кода, описаны ниже.

    Ширина слоев

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

    Итак, вся ширина известна, теперь надо поделить ее на две части. Слой, обозначенный цифрой 2 (рис. 1), отводится под меню, ширина его должна быть минимальна, но достаточна для комфортного чтения текста. Сделаем ее круглым числом, например, 200 пикселов. Все остальное будет занимать контент.

    Высота слоев

    Высота слоя меняется динамически в зависимости от его содержимого. Если хочется установить высоту слоя самостоятельно, можно воспользоваться параметром height и задать высоту в пикселях, процентах или других единицах CSS. Учтите, что при таком подходе выравнивание содержимого слоя происходит всегда по его верхнему краю, поэтому слишком большую высоту задавать не стоит (пример 1).

    Пример 1. Задание высоты слоя
    #top {
      text-align: left;
      width: 750px;
       background-color: #800000;
       padding: 0px;
       height: 50px;
    }

    Аналогично, высоту слоя можно менять и отступами, изменяя значение padding-top и padding-bottom (пример 2).

    Пример 2. Задание высоты слоя с помощью отступов
    #top {
      padding-top: 15px;
       padding=bottom: 15px;
    }

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

    • Copyright 2002, 2003 Влад Мержевич, e-mail: vlad@htmlbook.ru
    Материалы данного сайта охраняются законом об авторском праве.
    Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.
    http://subscribe.ru/
    E-mail: ask@subscribe.ru     		Отписаться
    Убрать рекламу
    В избранное