09. Шаблоны страниц

На этой странице:

В рассмотренных ниже примерах рамка и внутренний отступ не задаются, поэтому в трюке Целика необходимости нет.

Вверх Дизайн на позиционированных блоках

Абсолютное позиционирование можно использовать при проектировании дизайна гипертекстовой страницы. Рассмотрим несколько типичных примеров.

Жёсткий дизайн

Страница состоит из четырёх абсолютно позиционированных областей фиксированной ширины:

  1. Заголовок и логотип (фиксирована и высота)
  2. Меню
  3. Основное содержимое
  4. Новости

Пример жёсткого дизайна

Размеры выбраны с учетом размещения без горизонтальной прокрутки в окне шириной в 640 пикселов.

Файл 10p33.css

  
/* 1. Заголовок и логотип  */
.title
{
  position: absolute; 
  left:0px;
  top:0px;
  width: 610px;
  height: 60px;
  background: #06DFE1;  
}
/* 2. Меню                 */
.menu
{
  position: absolute; 
  left:0px;
  top:60px;
  width: 100px;
  background: #FFE3CC;  
}
/* 3. Основное содержимое  */
.contents
{
  position: absolute; 
  left:100px;
  top:60px;
  width: 320px;
  background: #FFF2A6;  
}
/* 4. Новости              */
.news
{
  position: absolute; 
  left:420px;
  top:60px;
  width: 190px;
  background: #E5E5E5;  
}

Файл 10p33.htm

  
Посмотреть

Резиновый дизайн

В предыдущем примере ширина всех блоков на страницы была фиксирована. Вот почему, такой макет был назван “жёстким”.

Рассмотрим пример “резинового” дизайна, при котором ширина области зависит от содержимого и ростом последнего стремится занять всю доступную ширину окна.

Макет состоит из трёх абсолютно позиционированных областей:

  1. Заголовок и логотип (фиксирована высота)
  2. Меню (фиксирована ширина)
  3. Основное содержимое (размеры не фиксированы)

Пример резинового дизайна

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

Файл 10p34.css

  
/* 1. Заголовок и логотип  */
.title
{
  position: absolute; 
  left:0px;
  top:0px;
  height: 60px;
  background: #06DFE1;  
}
/* 2. Меню                 */
.menu
{
  position: absolute; 
  left:0px;
  top:60px;
  width: 100px;
  background: #FFE3CC;  
}
/* 3. Основное содержимое  */
.contents
{
  position: absolute; 
  left:100px;
  top:60px;
  background: #FFF2A6;  
}

Файл 10p34.htm

  
Посмотреть

Вверх Плавающие блоки

Плавающий блок — это блок, с заданным свойством float.

Если задано значение left, блок прижимается к левой границе родительского элемента, остальные элементы обтекают блок справа.

Если задано значение right, блок прижимается к правой границе родительского элемента, остальные элементы обтекают блок слева.

Плавающие блоки

Чтобы прекратить обтекание, нужно после плавающего блока поместить элемент со свойством clear. У этого свойства имеются следующие значения:

Вверх Дизайн на плавающих блоках

Разработчики активно используют плавающие блоки при проектировании дизайна своих страниц. Рассмотрим несколько примеров.

Пример 1

Добавим в рассмотренный ранее макет резинового дизайна плавающий блок для отображения колонки новостей:

Пример 1

Файл 10p35.css

  
/* 1. Заголовок и логотип  */
.title
{
  position: absolute; 
  left:0px;
  top:0px;
  height: 60px;
  background: #06DFE1;  
}
/* 2. Меню                 */
.menu
{
  position: absolute; 
  left:0px;
  top:60px;
  width: 100px;
  background: #FFE3CC;  
}
/* 3. Основное содержимое  */
.contents
{
  position: absolute; 
  left:100px;
  top:60px;
  background: #FFF2A6;  
}
/* 4. Новости              */
.news
{
  float:right;
  width: 190px;
  background: #E5E5E5;  
}

Файл 10p35.htm

  
Посмотреть

Пример 2

Построим макет страницы на 5 блоках. Блоки не будут позиционироваться, но блоки 2, 3, 4 будут плавающие с “прилипанием” слева и с заданием ширины соответственно в 16, 52, 31 процент от ширины окна документа (родительского элемента):

Пример 2

Файл 10p36.css

  
/* 1. Заголовок и логотип  */
.title
{
  background: #06DFE1;  
}
/* 2. Меню                 */
.menu
{
  float:left;
  width: 16%;
  background: #FFE3CC;  
}
/* 3. Основное содержимое  */
.contents
{
  float:left;
  width: 52%;
  background: #FFF2A6;  
}
/* 4. Новости              */
.news
{
  float:left;
  width: 31%;
  background: #E5E5E5;  
}
/* 5. Автор               */
.author
{
  clear:left;
  background: #00FFBF;  
}

Файл 10p36.htm

  
Посмотреть

Вверх вверх

© Александр Александрович Дуванов kurs@robotland.pereslavl.ru