Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Этапы создания сайта

Десять важных шагов

Разработка семантического ядра

Обновление информации

Заголовки

Проверка ссылок

Проверка ошибок в коде

Шрифтовое оформление

Навигация по сайту

Метаданные

Выбор кодировки

Ключевые слова

 
Разработка сайтов под ключ

Ссылки по теме

Blogger: Создайте блог БЕСПЛАТНО

WordPress: Платформа для ведения блога

Online-переводчик :: Компания ПРОМТ

Поисковая оптимизация – все дело в написании текстов

Стратегия продвижения сайтов

Новые исследования поискового поведения пользователей

Орфографические словари

Словарь русских синонимов Абрамова

Орфографический словарь Лопатина

Современный словарь иностранных слов

Толковый словарь русского языка Ожегова

Архивы форума "Говорим по-русски"

FAR — программа управления файлами и архивами

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

UltraEdit-32 - текстовый редактор

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

Основные типы CSS-макетов

Главная « Уроки Web-мастерства « Основные типы CSS-макетов

версия для печати

Плавающее размещение и схема позиционирования

Плавающее размещение и схема позиционирования…

К счастью, в современных браузерах поддержка языка CSS выполнена достаточно высоко, что дает нам возможность найти способ решения всех проблем, возникающих при использовании макетов на основе таблиц.

Все это позволяет применять язык CSS для управления визуальным представлением дизайнов и создавать потрясающие страницы.

Позиционирование относится к схеме языка CSS, которая позволяет использовать элементы для создания блоков и перемещать эти блоки относительно документа или браузера.

Плавающее размещение относится к методике языка CSS, которая позволяет располагать элемент справа или слева. Текст документа может обтекать данный элемент.

Плавающее изображение можно выровнять по правому краю и текст будет обтекать изображение. Добавьте небольшой отступ и получите отличный внешний вид.

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

Комбинация технологий, с которыми я хочу Вас познакомить в этой статье, формирует основу, необходимую для создания великолепных CSS-макетов, а не макетов на основе таблиц. Предлагаю Вам поработать с основными типами CSS-макетов, обычно используемых для получения ряда дизайнов.

Некоторые из этих макетов построены на основе схем позиционирования. В некоторых макетах применяется плавающее размещение, которое не является схемой позиционирования, однако позволяет создавать колоночные макеты.

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

Во всех используемых современных браузерах проблем с отображением представленных макетов не будет.

Необходимость в применении обходных решений возникает в том случае, когда приходится поддерживать:

  • версии 5.0 и 5.5 браузера Internet Explorer для операционной системы Windows;

  • все версии браузера IE для операционной системы Macintosh;

  • все версии браузера Netscape до версии 6.0.

Необходимые свойства языка CSS во всех указанных версиях браузеров реализованы неправильно или частично.

 

Три столбца с обрамляющими меню фиксированной ширины…

 
(рис. 1)
 

Одним из наиболее распространенных макетов для Web-сайтов является трехколоночный макет с обрамляющими столбцами определенной фиксированной ширины и с внутренним столбцом плавающей ширины.

Для создания такого макета используется абсолютное позиционирование для размещения левого и правого столбцов. Затем явно указывается ширина столбцов в пиксела (именно так достигается фиксированная ширина).

 
внимание!

Хитрость здесь в том, что ширина центрального столбца не указывается, благодаря чему она остается плавающей и увеличивается или уменьшается в соответствии с доступным пространством, как показано в примере №1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Трехколоночный макет с обрамляющими столбцами фиксированной ширины и с центральным столбцом плавающей ширины</title>

<style>
<!--
body {
   margin: 0;
   padding: 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
#nav {
   position: absolute;   /* абсолютное позиционирование левого столбца */
   left: 10px;
   top: 50px;
   width: 200px;   /* ширина левого столбца */
}
#content {
   /* ширина центрального столбца не указывается */
   margin-left: 220px;
   margin-right: 220px;
   margin-top: 10px;
}
#sidebar {
   position: absolute;   /* абсолютное позиционирование правого столбца */
   right: 10px;
   top: 10px;
   width: 200px;   /* ширина правого столбца */
}
-->
</style>

</head>
<body>

<div id="nav">
   <ul>
      <li><a href="#">раздел №1</a></li>
      <li><a href="#">раздел №2</a></li>
      <li><a href="#">раздел №3</a></li>
      <li><a href="#">раздел №4</a></li>
   </ul>
</div>
<div id="content">
   <h1>Заголовок 1-го уровня</h1>
   <h2>Заголовок 2-го уровня</h2>
   <p>Абзац...</p>
</div>
<div id="sidebar">
   <h2>Заголовок 2-го уровня</h2>
   <p>Абзац...</p>
</div>

</body>
</html>

Обратите внимание, что в ID-селекторе #content для элемента <div> указаны значения левого и правого полей.

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

Верхнее поле используется просто для зрительного баланса и никакая ширина для него не указывается.

 
внимание!

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

 

Три столбца с шапкой и нижним колонтитулом…

 
(рис. 2)
 

Еще одним распространенным макетом является трехколоночный макет с шапкой и нижним колонтитулом.

 
внимание!

Для получения желаемых результатов в этом макете используется плавающее размещение, а не позиционирование, как показано в примере №2.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Трехколоночный макет с фиксированной шириной, с шапкой и нижним колонтитулом</title>

<style>
<!--
body {
   margin: 0;
   padding: 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
#masthead {
   width: 1000px;   /* ширина шапки */
}
#nav {
   float: left;
   width: 200px;   /* ширина левого столбца */
}
#content {
   float: left;
   width: 600px;   /* ширина центрального столбца */
}
#sidebar   {
   float: left;
   width: 200px;   /* ширина правого столбца */
}
#footer   {
   width: 1000px;   /* ширина нижнего колонтитула */
   clear:  both;
}
-->
</style>

</head>
<body>

<div id="masthead">
   <h1>ШАПКА</h1>
</div>
<div id="nav">
   <ul>
      <li><a href="#">раздел №1</a></li>
      <li><a href="#">раздел №2</a></li>
      <li><a href="#">раздел №3</a></li>
      <li><a href="#">раздел №4</a></li>
   </ul>
</div>
<div id="content">
   <h1>Заголовок 1-го уровня</h1>
   <h2>Заголовок 2-го уровня</h2>
   <p>Абзац...</p>
</div>
<div id="sidebar">
   <h2>Заголовок 2-го уровня</h2>
   <p>Абзац...</p>
</div>
<div id="footer">
   <p align="center">НИЖНИЙ КОЛОНТИТУЛ</p>
</div>

</body>
</html>

Это макет с фиксированной шириной - ширина ни одного из его столбцов не будет изменяться динамически.

Обратите внимание, что свойство float для всех столбцов просто установлено в значение left, а сами столбцы размещаются друг за другом по горизонтали.

Обратите также внимание, что для элемента <div> с ID-селектором #footer используется свойство clear со значением both. Это гарантирует, что нижний колонтитул полностью очистит столбцы с плавающим размещением.

 
внимание!

Можно сделать версию этого макета с плавающей шириной, воспользовавшись не фиксированными значениями, а значениями, выраженными в процентах, как показано в примере №3.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Трехколоночный макет с плавающей шириной, с шапкой и нижним колонтитулом</title>

<style>
<!--
body {
   margin: 0;
   padding: 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
#masthead {
   width: 100%;   /* ширина шапки */
}
#nav {
   float: left;
   width: 20%;   /* ширина левого столбца */
}
#content {
   float: left;
   width: 60%;   /* ширина центрального столбца */
}
#sidebar   {
   float: left;
   width: 20%;   /* ширина правого столбца */
}
#footer   {
   width: 100%;   /* ширина нижнего колонтитула */
   clear:  both;
}
-->
</style>

</head>
<body>

<div id="masthead">
   <h1>ШАПКА</h1>
</div>
<div id="nav">
   <ul>
      <li><a href="#">раздел №1</a></li>
      <li><a href="#">раздел №2</a></li>
      <li><a href="#">раздел №3</a></li>
      <li><a href="#">раздел №4</a></li>
   </ul>
</div>
<div id="content">
   <h1>Заголовок 1-го уровня</h1>
   <h2>Заголовок 2-го уровня</h2>
   <p>Абзац...</p>
</div>
<div id="sidebar">
   <h2>Заголовок 2-го уровня</h2>
   <p>Абзац...</p>
</div>
<div id="footer">
   <p align="center">НИЖНИЙ КОЛОНТИТУЛ</p>
</div>

</body>
</html>
 

Вложенный плавающий блок…

 
(рис. 3)
 

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

 
внимание!

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

Чтобы вы лучше представили этот макет, я установил поле и добавил границу для содержимого. Для получения вложенности плавающего блока я использовал дочерний селектор #nav ID-селектора #content, а затем расположил элемент с идентификатором nav по правой стороне элемента с идентификатором content.

Значение свойства margin-left добавляет небольшой промежуток между границей и текстом.

При написании соответствующего кода на языке HTML (что уже сделано в самом шаблоне) необходимо обязательно размесить элемент <div> с идентификатором nav внутри элемента <div> с идентификатором content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Макет с вложенным плавающим блоком</title>

<style>
<!--
body {
   margin: 0;
   padding: 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
#content {
   /* основная область содержимого */
   margin: 10px;
   border: 1px solid #800000;
}
#content #nav {
   /* дочерний селектор */
   float: right;
   width: 200px;   /* ширина вложенного плавающего блока */
   border: 1px solid #800000;
   margin-left: 5px;
}
#nav li {
   margin-bottom: 0.5em;
}
-->
</style>

</head>
<body>

<div id="content">
   <div id="nav">
      <ul>
         <li><a href="#">раздел №1</a></li>
         <li><a href="#">раздел №2</a></li>
         <li><a href="#">раздел №3</a></li>
         <li><a href="#">раздел №4</a></li>
      </ul>
   </div>
   <h1>Заголовок 1-го уровня</h1>
   <h2>Заголовок 2-го уровня</h2>
   <p>Абзац...№1...</p>
   <p>Абзац...№2...</p>
   <p>Абзац...№3...</p>
   <p>Абзац...№4...</p>
</div>

</body>
</html>
 

Макеты с выравниванием по центру…

 
(рис. 4)
 

Чрезвычайно популярным методом создания макетов является метод выравнивания по центру дизайна с фиксированной шириной по горизонтали. Это означает, что дизайн будет всегда отцентрирован по горизонтали, а промежутки с левой и правой стороны будут равномерно изменяться.

Создание такого дизайна требует дополнительных усилий из-за способов центрирования элементов по горизонтали в языке CSS. Существует множество вариантов выравнивания.

 
внимание!

Для центрирования по горизонтали я собираюсь использовать подход с применением отрицательных значений полей. Хотя это и не лучший способ, исходя из практики использования языка CSS, однако он лучше всего поддерживается различными браузерами, как показано в примере №5.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Макет с фиксированной шириной, выровненный по центру</title>

<style>
<!--
body {
   margin: 0;
   padding: 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
#container {
   position: absolute;
   left: 50%;
   width: 1000px;
   margin-left: -500px;   /* метод выравнивания по центру дизайна */
   border: 1px solid #800000;
}
#content {
   margin-top: 100px;
}
* html #content {
   margin-top: 0px;
}
#nav {
   position: fixed;
   top: 0px;
   width: 1000px;
   border-top: 1px  solid #800000;
   border-bottom: 1px solid #800000;
   background-color: #d0d0d0;
}
#nav li {
   margin-bottom: 0.5em;
   list-style-type: none;
}
* html #nav ul {
   margin-top: 10px;
}
-->
</style>

</head>
<body>

<div id="container">
   <div id="content">
      <div id="nav">
         <ul>
            <li><a href="#">раздел №1</a></li>
            <li><a href="#">раздел №2</a></li>
            <li><a href="#">раздел №3</a></li>
            <li><a href="#">раздел №4</a></li>
         </ul>
      </div>
      <h1>Заголовок 1-го уровня</h1>
      <h2>Заголовок 2-го уровня</h2>
      <p>Абзац...№1...</p>
      <p>Абзац...№2...</p>
      <p>Абзац...№3...</p>
      <p>Абзац...№4...</p>
   </div>
</div>

</body>
</html>

Сначала создается контейнер - элемент <div> с идентификатором container - для которого будет использовано абсолютное позиционирование.

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

 
внимание!

Для большей практичности примера, я добавил в него панель навигации с фиксированной шириной и дополнительные стили.

 

Смешанные CSS-макеты…

 
(рис. 5)
 

Сейчас перед нами стоит задача - объединить методики для получения более изысканных макетов. Хорошим примером является дизайн с фиксированной шириной, выравниванием по центру, и состоящий из трех столбцов.

 
внимание!

Мы будем использовать метод позиционирования для дизайнов с фиксированной шириной и выравниванием по центру, а плавающее размещение - для столбцов. В примере №6 показано, как получить такой дизайн.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Смешанный макет с выравниванием по центру, позиционированием и плавающим размещением</title>

<style>
<!--
body {
   margin : 0;
   padding : 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
#container  {
   position: absolute;
   left: 50%;
   margin-left: -500px;   /* метод выравнивания по центру дизайна */
   width: 1000px;
   margin-top: 10px;
}
#masthead  {
   width: 1000px;   /* ширина шапки */
}
#nav  {
   float: left;
   width: 200px;   /* ширина левого столбца */
}
#nav li {
   margin-bottom: 0.5em;
}
#content  {
   float: left;
   width: 580px;   /* ширина центрального столбца */
   margin-right: 10px;
   margin-left: 10px;
}
#sidebar  {
   float: right;
   width: 200px;   /* ширина правого столбца */
}
#footer  {
   clear: both;
   width: 1000рх;   /* ширина нижнего колонтитула */
}
-->
</style>

</head>
<body>

<div id="container">
   <div id="masthead">
      <h1>ШАПКА</h1>
   </div>
   <div id="nav">
      <ul>
         <li><a href="#">раздел №1</a></li>
         <li><a href="#">раздел №2</a></li>
         <li><a href="#">раздел №3</a></li>
         <li><a href="#">раздел №4</a></li>
      </ul>
   </div>
   <div id="content">
      <h1>Заголовок 1-го уровня</h1>
      <h2>Заголовок 2-го уровня</h2>
      <p>Абзац...№1...</p>
      <p>Абзац...№2...</p>
      <p>Абзац...№3...</p>
      <p>Абзац...№4...</p>
   </div>
   <div id="sidebar">
      <h2>Заголовок 2-го уровня</h2>
      <p><a href="#">раздел №1</a></p>
      <p><a href="#">раздел №2</a></p>
      <p><a href="#">раздел №3</a></p>
   </div>
   <div id="footer">
      <p align="center">НИЖНИЙ КОЛОНТИТУЛ</p>
   </div>
</div>

</body>
</html>

Хотелось бы обратить ваше внимание на несколько вещей:

  • для демонстрации основ метода был использован внедренный стиль, а для других стилей была использована связанная таблица стилей;

  • все элементы <div> размещены внутри элемента <div> с идентификатором container.

 
внимание!

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

 
Урок № 7: | Дата: 14.10.2007 | Автор: Коровенков Юрий

Обсудить на форуме…

 
Valid XHTML 1.0! Valid CSS!
Как устроены поисковые системы?

Облик поисковиков

Поисковые системы

Индекс поисковой системы

Полнотекстовый поиск

Учет морфологии

Релевантность

Методы регистрации

Индекс цитирования

 
Заголовки разделов текущей страницы…

Оглавление

Три столбца с обрамляющими меню фиксированной ширины…

Пример №1…

Три столбца с шапкой и нижним колонтитулом…

Пример №2…

Пример №3…

Вложенный плавающий блок…

Пример №4…

Макеты с выравниванием по центру…

Пример №5…

Смешанные CSS-макеты…

Пример №6…

 
Уроки Web-мастерства

Уроки Web-мастерства

Управление web-проектом

Как более эффективно писать для Сети?

Как сделать сайт максимально удобным?

Особенности структуры текста на Web-сайте

Создание компонентов интерфейса в XHTML

Создаем CSS-меню

Раскрывающиеся CSS-меню

Создание многоуровневых раскрывающихся CSS-меню

CSS-методы замены текста изображениями

Прямоугольники с закругленными углами на основе CSS

CSS-методы центрирования web-страницы

CSS-эффекты наведения указателя мыши

CSS-стили для шрифтов и текста

Навигационные CSS-панели на основе списков

Свободное размещение в CSS

Создание эффекта mouseover при помощи CSS

Таблицы для верстки - это не обязательно зло

Внедрение ролика Windows Media на Web-страницу

Добавление Flash на Web-страницу

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov