Макет страницы в две колонки
Одним из наиболее популярных вариантов верстки веб-страниц выступает двухколоночный макет, где в левой колонке располагаются ссылки, а в правой колонке — основной контент. Такая схема достаточно традиционна и привычна для пользователей, поэтому пользуется признанием среди разработчиков (рис. 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
Лира
20:50 11.05.2012Здравствуйте, Максим!
Мне надо создать продающий мини-сайт.
Могу ли я создать его в этой программе?
Эту программу надо купить? Где?
И могу ли я вставить этот мини-сайт в сайт, созданный с Дримвивере?
С уважением, Лира.
Максим Никифоров
22:53 11.05.2012Добрый вечер!
Хотелось бы узнать, о какой программе идет речь? Если Вы хотите использовать разметку, которая указана в уроке — пожалуйста. Создайте html-файл, и вставьте туда эту разметку. В качестве программы для web-проектов, я использую PHPDesigner. Посмотреть обзор программы Вы можете здесь. Она платная. Скачать демо-версию можно на офф.сайте.