adsPlace_1

Войти или Зарегистрироваться

adsPlace_3

Макет страницы в две колонки

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

Макет страницы в две колонки

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

Создание двух колонок происходит с помощью стилевого свойства float со значением left, которое применяется для левой колонки. При этом одновременно следует установить отступ слева для правой колонки через margin-left, значение которого равно ширине левой колонки плюс расстояние между ними (пример 1).

#leftcol { /* Левая колонка */
 float: left; /* Обтекание справа */
 width: 200px; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
 margin-left: 220px; /* Отступ слева */
}

Чтобы макет располагался по центру веб-страницы, добавим слой с именем container и колонки расположим внутри него. Для самого container необходимо установить ширину (width) и выравнивание по центру (margin: 0 auto), как показано в примере 2.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Исторический турнир</title>
  <style type="text/css">
   body {
    font: 10pt Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */
    background: #e1dfb9; /* Цвет фона */
   }
   h2 {
    font-size: 1.1em; /* Размер шрифта */
    color: #800040; /* Цвет текста */
    margin-top: 0; /* Отступ сверху */
   }
   #container {
    width: 500px; /* Ширина слоя */
    margin: 0 auto; /* Выравнивание по центру */
    background: #f0f0f0; /* Цвет фона левой колонки */
   }
   #header {
    font-size: 2.2em; /* Размер текста */
    text-align: center; /* Выравнивание по центру */
    padding: 5px; /* Отступы вокруг текста */
    background: #8fa09b; /* Цвет фона шапки */
    color: #ffe; /* Цвет текста */
   }
   #sidebar {
    margin-top: 10px; 
    width: 110px; /* Ширина слоя */
    padding: 0 10px; /* Отступы вокруг текста */
    float: left; /* Обтекание по правому краю */
   }
   #content {
    margin-left: 130px; /* Отступ слева */
    padding: 10px; /* Поля вокруг текста */
    background: #fff; /* Цвет фона правой колонки */
   }
   #footer {
    background: #8fa09b; /* Цвет фона подвала */
    color: #fff; /* Цвет текста */
    padding: 5px; /* Отступы вокруг текста */
    clear: left; /* Отменяем действие float */
   }
  </style>
 </head>
 <body>
  <div id="container">
   <div id="header">Исторический турнир</div>
   <div id="sidebar">
    <p><a href="stat.html">Статистика турнира</a></p>
    <p><a href="interview.html">Интервью с главным судьей</a></p>
    <p><a href="ask.html">Конкурсные вопросы</a></p>
   </div>
   <div id="content">
    <h2>Опрос общественного мнения показал</h2>
    <ul>
     <li>что пароход изобретен: Петром I, А. Эйнштейном и А. Поповым;</li>
     <li>Диего Веласкес писал свои полотна в стиле: империализма, кубизма 
     и империосионизма;</li>
     <li>Фаросский маяк находится в Фаросе;</li>
     <li>конфуцианство возникло в: Италии, Корее и Франции;</li>
     <li>богами торговли и воровства в Древней Греции были: Марс, Меркурий 
     и Дионис;</li>
     <li>Франция – это город;</li>
     <li>богами загробного мира в Египте были: Аид, Анубис и Ассирис;</li>
     <li>столица Золотой Орды — Монголия;</li>
     <li>главные противники Александра Македонского: татаро-монголы, Дедал 
     и Цезарь;</li>
     <li>священными птицами — символами Афин были: ворона и орел;</li>
     <li>в Древней Греции морями повелевали боги: Плутон, Нептун и Тритон.</li>
    </ul> 
   </div>
   <div id="footer">© Влад Мержевич</div>
  </div> 
 </body>
</html>

Источник: htmlbook.ru

Последние из рубрики

Комментарии(2)

    1. Аватар пользователя Лира

      Лира

      20:50 11.05.2012

      Здравствуйте, Максим!
      Мне надо создать продающий мини-сайт.
      Могу ли я создать его в этой программе?
      Эту программу надо купить? Где?
      И могу ли я вставить этот мини-сайт в сайт, созданный с Дримвивере?
      С уважением, Лира.

      ответить
      • Аватар пользователя Максим Никифоров

        Максим Никифоров

        22:53 11.05.2012

        Добрый вечер!
        Хотелось бы узнать, о какой программе идет речь? Если Вы хотите использовать разметку, которая указана в уроке — пожалуйста. Создайте html-файл, и вставьте туда эту разметку. В качестве программы для web-проектов, я использую PHPDesigner. Посмотреть обзор программы Вы можете здесь. Она платная. Скачать демо-версию можно на офф.сайте.

        ответить

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению