В этом уроке описано по шагам создание каркаса резинового сайта. Урок состоит из 4 шагов.

1 шаг - Общая концепция. Определяемся с максимальными и минимальным размером сайта, количеством сайдбаров.
2 шаг - Подготавливаем рабочее место. Создаем папку, в которой создаем html и css документ.
3 шаг - в html документе прописываем блоки: header, topNav, leftNav, content, rightNav, footer.
4 шаг - разбираемся с css.


Рассказывать о приоритетах резиновых сайтов, я думаю, нет смысла. В этом уроке мы займемся разработкой каркаса резинового сайта на DIVах с помощью css.

Шаг 1: Разработка сайта начинается с общей концепцией, т.е. верстальщик определяется с общим дизайном сайта. Допустим, нам нужно сверстать сайт с 3 блоками навигации - верхней, левой и правой. Максимальная ширина сайта должна составлять 1660px, а минимальная 990px, на сегодня это оптимальное решение.

Шаг 2: Подготавливаем рабочее место. Создаем папку rubber на локальном сервере (если таков есть, в противном случае там, где вы планируете хранить сайты ), далее в эту папку вставляем эти два документа - http://zauspih.ru/files/rubber.rar (архив следует распаковать). Это файлы html и css.

Шаг 3: Теперь, когда рабочее место готово, открываем index.html любым редактором, лично я пользуюсь phpDesigner 8. Дальше следуя плана (шаг 1), в index.html прописываем следующий код:

Не делайте ctr+c и ctr+v, лучше все прописывайте своими пальцами (то кувалдой по пальцам дам :) )! После написания, сохраните файл (ctr+s).

Шаг 4: В предыдущем шаге мы прописали html каркас, но это ничто. Что бы дать ему все свойства резинового каркаса следует поработать с css, чем мы сейчас и займемся.

Открываем style.css. Сначала давайте дадим outline - линии.

Это правило означает - дать всем div блокам : линии: 1пиксель сплошная черная;. Сохраните файл (ctr+s), запустите index.html с браузером. Если все сделали правильно, то на странице должна быть запись, которая окружена 4 линиями.

Даем высоту и ширину блокам

В этом коде мы дали обвертке (wrapper ) -- ширину (width) 96% так как мы делаем резиновый дизайн, высоту (height) 2300пикселя, отцентрировали обвертку margin: 0 auto. Наверное заметили знакомое свойство outline, сейчас мы отдельно блоку wrapper дали линии красного цвета. Сохраните изменения в файле (ctr+s), обновите страницу в браузере (F5). Вы должны увидеть красные линии. Если это так, двигаемся дальше:



Что мы сделали:
Блок content:
Блоку content дали обтекание с лева (float: left ), внешний отступ margin: 0 255px, это слева и справа 255пикселя. Тексту дали свойство text-align: justify;, чтобы текст был по всему блоку.

Блок leftNav:
margin: 0 -245px 0 -100%; - это означает: с верху 0пикселя, с права -245пикселя, с низу 0пикселя, и с лева -100% (чтобы был левее блока с контентом). Ширину в виде 240пикселя, и высоту которою нужно убрать после появления навигации.

Блок rightNav:
margin-left: -245px - чтобы подняться на блок с контентом. float: right - обтекание с права. Высоту нужно убрать после появления записей в этом блоке.

Блок .clear:
clear: both - очистить поля, т.е. убрать float.. Точка (.) впереди слова clear означает - это класс (class="clear"). Раньше мы пользовались (id="#"). Эти два разные селектра. Отличаются они тем, что разным блокам можно давать один и тот же class, а id категорически только одному блоку.

Теперь в самом верху документа style.css пропишите

min-width - это минимальная ширина сайта.
max-width - максимальная ширина сайта, т.е. сайт будет растягиваться до 1660пикселей в нашем случае.

Если вы все правильно сделали, вот что должно получиться:http://zauspih.ru/files/rubber.png

Скачать каркаса резинового сайта

А вы как делает каркас резинового сайта?