3.8.3. Макет из трех колонок

Следующий шаг – создание «резинового» макета страницы из трех колонок. Как и в случае макета с двумя колонками сначала создадим HTML-разметку, которую будем в дальнейшем форматировать.

<div id="header">

... шапка страницы ...

</div>

<div id="sidebar">

... колонка меню ...

</div>

<div id="content">

... основное содержимое страницы ...

</div>

<div id="otherbar">

... колонка меню ...

</div>

<div id="footer">

... подвал ...

</div>

и отформатируем ее с помощью следующей таблицы стилей:

#content {

  float:left;

  width:50%;

  background-color:#CCC;

}

#sidebar {

  float:left;

  width:30%;

  background-color:#FFC;

}

#otherbar {

  float:left;

  width:20%;

  background-color:#FFC;

}

#header {

  background-color:#FCF;

  text-align:center;

}

#footer {

  clear:both;

  text-align:center;

  background-color:#CFF;

}

В этом решении все три колонки включены в плавающую модель, выравниваются по левому краю и суммарная их ширина не превышает 100%.

Однако следует очень внимательно относиться к полям, рамкам и отступам этих элементов, поскольку, если суммарная ширина колонок превысит 100%, то одна или две колонки будут расположены друг под другом.

Задания для самостоятельной работы. Задание 1.

• Проделайте все примеры, приведенные в качестве иллюстраций в пункте 2.3 (рис. 2.2 – 2.8). Каждый пример должен быть реализован в виде отдельной страницы.

• По приведенному ниже образцу, используя, где необходимо, элемент <PRE> создайте свое резюме. Рекомендуемые параметры:

  • Цвет фона для документа – голубой.

  • Фамилия, имя – заголовок первого уровня, выравнивание по центру.

  • Слова «Цель», «Опыт работы», «Образование», «Увлечения» - заголовки второго уровня.

  • Для остального текста – выравнивание – по левому краю, шрифт Arial, размер 12пт, параметры начертания (жирный, курсив, подчеркнутый) и отступы от левого края – по образцу.

Сергей Алексеев

ЦЕЛЬ:

Получение высокооплачиваемой работы

ОПЫТ РАБОТЫ:

1990-1994 ТОО «Башмачок» Москва Руководитель планового отдела Введена новая система планирования. Увеличены объемы продаж на 13%. Уменьшены издержки производства на 23%.

1985-1990 ТОО «Башмачок» Москва Заместитель руководителя планового отдела Увеличены объемы продаж на 7%. Организована единая компьютерная сеть. Введены в строй 4 филиала предприятия.

ОБРАЗОВАНИЕ:

1971-1975 Институт легкой промышленности Москва

• Факультет: Экономика легкой промышленности.

Специальность: Экономист.

УВЛЕЧЕНИЯ

Компьютеры, автомобили, теннис, чтение.

Задание 2.

• Проделайте все примеры, приведенные в качестве иллюстраций в пункте 2.4 (рис. 2.9 – 2.13). Каждый пример должен быть реализован в виде отдельной страницы.

• Взяв за основу текст пункта 2.2 (электронный вариант прилагается), создать серию html-страниц, отвечающих следующим требованиям:

  • Страница 1 (index.html) содержит заголовок лекции и оглавление, включающее заголовки параграфов;

  • Каждый параграф должен быть реализован в виде отдельной html-страницы (название — произвольно);

  • Если параграф содержит более мелкие элементы структуры (параграф 2), в начале страницы должно быть создано оглавление, содержащее заголовки этих элементов структуры;

  • Форматирование в html-документе должно соответствовать приложенному электронному варианту лекции;

  • Внедряемые в html-документы рисунки должны храниться в папке с названием img.