Создание сайтов в Москве

Создаем макет сайта в 2 колонки на основе блочной верстки (DIV верстки)

Итак, в предыдущей статье мы создали на своем хостинге (хотя для этих целей вполне подойдет и локальный сервер — Денвер (Denwer) — установка, настройка, работа с сайтом и базой данных на локальном сервере, перенос сайта на хостинг) папку TEST, в которую положили два основных файла нашего будущего макета: Index.html и Style.css. Собственно, эти файлы и будут составлять наш простейший вариант макета на Div в 2 колонки.

Как создать каталог в корневой папке сайта и что такое корневая папка (каталог) сайта

Опять, наверное, придется немного отвлечься от непосредственно блочной верстки, т.к. не всем может быть понятно, как создать папку TEST в коревом каталоге (папке) своего сайта, расположенного на реальном хостинге, и что такое, собственно, корневой каталог сайта. А ведь действительно, вопрос не тривиальный для пользователя, впервые столкнувшегося с размещением сайтов на реальном хостинге.

Так вот, вам нужно будет сначала подключиться к своему сайту по протоколу FTP. Данные для подключения по FTP вам должен был сообщить вам хостинг провайдер (читайте подробнее о нюансах получения и работы с хостингом в этой статье).

После того, как вы подключитесь к своему сайту по протоколу FTP (я пользуюсь для этой цели программой FileZilla, и именно на ее примере буду все рассказывать), то в правом окне программы FileZilla вы увидите содержимое каталога, который выделил хостер провайдер под ваши сайты, скрипты и тому подобные вещи. Но этот каталог не будет являться корневой папкой (каталогом) вашего сайта. Корневая папка (каталог) — это та папка, в которой лежит файл Index.php вашего сайта, а так же и все остальные файлы и папки движка сайта.

Для размещения файлов движка вашего сайта (или нескольких сайтов, неважно) хостинг предусматривает отдельную корневую папку (каталог) , правда, ее название, в зависимости от конкретного хостинга может отличаться. Структура внутренних папок в основном каталоге (открывающемся при подключении в сайту по FTP) может отличаться, в зависимости от конкретного хостинга, но суть остается прежней. Например, после подключения к своему сайту по FTP вы можете увидеть следующую картину:

Файлы движка вы должны копировать не в эту, самую верхнюю папку (каталог) доступную вам по FTP, а в так называемую, корневую папку. Как узнать какая именно папка на хостинге является корневой?

Ну, на крайний случай, можно спросить у самого владельца хостинга. А что, они обязаны помогать вам в таких вопросах. Но вообще-то, коневая папка (каталог) чаще всего будет называться либо PUBLIC_HTML, либо HTDOCS. Если вы таких папок после подключения по FTP к вашему сайту, не обнаружили, то нужно задавать вопрос владельцу хостинга, а если такая папка (каталог) есть в наличии, то именно она и будет являться корневой и именно в ней вы должны будете создать нашу многострадальную папку TEST, ради которой я написал, а вы, надеюсь, прочитали эти несколько абзацев.

Как создать папку (каталог) с помощью программы FileZilla? Да, очень просто. Вам достаточно будет открыть в правой части программы FileZilla корневую папку (каталог) вашего сайта (вы уже научились ее идентифицировать) и щелкнуть по пустому месту в этой папке (каталоге) правой кнопкой мыши, а из контекстного меню выбрать пункт «Создать каталог». Уф, создали папку TEST в коревом каталоге сайта. И то, слава богу. В общем-то, папку TEST можно было бы создать и в какой-нибудь внутренней папке сайта, но проще все же будет в корне.

Для локального сервера Денвер (подробнее о нем читаете здесь), вам нужно будет создать папку TEST в следующем каталоге:

Вместо диска «С» вам нужно будет указать диск на вашем компьютере, где установлен локальный сервер Денвер. Тогда, для просмотра создаваемого нами на основе Div верстки макета в 2 колонки, вам нужно будет набрать следующий путь в адресной строке браузера:

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

Продолжим разговор о блочной Div верстке. В файле Index.html мы будем задавать сами DIV-контейнеры, на которых и будет строиться наш макет в 2 колонки на дивах, а в файле Style.css — описывать положение и внешний вид этих DIV-контейнеров. Это в двух словах, а как оно будет на деле, вы увидите немного погодя.

Для того, чтобы наблюдать в браузере результаты наших трудов, мы будем периодически обращаться из адресной строки браузера к папке TEST, расположенной на вашем хостинге или же на локальном сервере. В случае реального хостинга, в адресной строке браузера вам нужно будет набрать что-то вроде этого (если вы создали папку TEST в корне своего сайта):

Но тут есть два «но». Во-первых, вместо http://ktonanovenkogo.ru/ вам нужно будет ввести адрес главной страницы своего сайта, а во-вторых, обратите внимание на регистр латинских букв, которые составляют название вашей папки TEST.

Если вы написали название папки заглавными буквами, то и в адресной строке нужно набирать название папки заглавными буквами (я написал здесь название папки TEST заглавными буквами, только лишь с целью его выделения на фоне остального текста). Дело в том, что на реальном хостинге в большинстве случаев, сервера работают под управление UNIX подобной операционной системы, в которой заглавные и строчные буквы различаются (в отличии, от Windows, работать с которой мы привыкли).

Начинаем верстать макет сайта в 2 колонки на дивах (блочная DIV верстка)

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

Все элементы макета (2 колоночного) мы поместим в один большой Div-контейнер, для того, чтобы можно менять размеры и выравнивание всего макета на основе блочной верстки через свойства этого контейнера. Внутри основного Div-контейнера будут находиться контейнеры, отвечающие за формирование отдельных блоков 2 колоночного макета (шапки, левой колонки, области для контента, футера). Мы зададим им размеры и настроим позиционирование на странице с помощью CSS. Итак, приступим.

Прописываем базовые элементы HTML кода в index.html с указанием пути до каскадных таблиц стилей CSS

Начнем с Index.html в нашем макете на базе блочной Div верстки. Откройте его на редактирование в удобном для вас редакторе (я пользуюсь для этой цели текстовым редактором Notepad++) . Для того, чтобы привыкать к правильному оформлению HTML документов, давайте сразу пропишем стандартную часть любого HTML документа (на этом я как раз останавливался в предыдущей статье — Базовые элементы структуры любого HTML кода). Т.е. вы можете просто скопировать следующий Html код в свой Index.html:

Значение всех строк в этом Html коде я подробно объяснял в предыдущей статье, поэтому сейчас остановлюсь лишь на строке:

Эта строка говорит браузеру, где ему искать и как называется файл каскадных таблиц стилей (эти файлы имеют расширение CSS), который нужен браузеру для корректного отображения нашего макета в 2 колонки на основе блочной верстки. В нашем случае, файл каскадных таблиц стилей называется Style.css, а искать его нужно в той же папке, где лежит Index.html (в котором прописана эта строчка).

Почему именно в этой же папке? Потому, что если вы не прописываете никакого пути до файла (указываете только его название), то браузер будет его искать в той же папке, где лежит исполняемый сейчас файл (в нашем случае это Index.html). Т.е. отсутствие пути до файла CSS будет равносильно тому, как если бы я прописал путь до Style.css в виде:

Но первый вариант записи короче и универсальный, т.к. там напрямую не указывается путь до папки с файлами, а значит можно будет поместить файлы Index.html и Style.css в другую папку, обратиться к Index.html из адресной строки и все равно будет подгружен Style.css, отвечающий за стилевое оформление Html страницы.

В связи с этим, хочу заметить, что вы вообще можете не заморачиваться с хостингом или же с локальным сервером. Просто создайте на своем компьютере любую папку и поместите в нее два файла Index.html и Style.css. Пропишите в Index.html путь до файла Style.css в виде:

И все. Теперь вы сможете открыть Index.html (двойной щелчок мышь по нему) в браузере, назначенном по умолчанию для открывания файлов с расширением HTML у вас на компьютере, и при этом будет автоматически подгружен Style.css. Этот способ удобен на этапе обучения, но все же, все что я вам говорил о работе на реальном хостинге или локальном сервере, вам тоже в дальнейшем обязательно пригодится. А сейчас работа из папки на своем компьютере может быть даже более удобной, чем на хостинге. Хотя, кому как.

Прописываем в index.html Html код нужных нам для создания блочного макета в 2 колонки из DIV контейнеров

Теперь нам нужно будет создать четыре DIV контейнера для всех частей нашего 2 колоночного макета (шапки, левой колонки, области для контента, футера) и заключить их в один большой Div контейнер. Внутрь Div контейнеров для частей макета можно будет заключить для наглядности названия этих блоков макета. Все это мы будет писать между открывающим и закрывающим Html тегами Body. Получится примерно такой HTML код в Index.html:

Т.е. сразу за открывающим Html тегом Body мы прописали открывающий Html тег основного Div контейнера макета:

В котором мы задали ID для этого Div контейнера (в нашем случае id="maket"). В последствии для этого ID, в файле каскадных таблиц стилей Style.css, мы допишем CSS свойства, позволяющие определить размер и выравнивание основного Div контейнера. После открывающего Html тега основного Div контейнера мы прописали HTML код четырех Div контейнеров, которые станут элементами макета в 2 колонки на основе блочной верстки.

Всем этим четырем Div контейнерам мы назначили свои индивидуальные ID, для которых затем в Style.css мы пропишем CSS свойства, помогающие настроить размер и взаимное размещение (позиционирование) этих контейнеров. Для наглядности, внутри этих контейнеров я прописал их назначение. Ну, и перед закрывающим Html тегом Body мы поставили закрывающий тег основного Div контейнера макета в 2 колонки:

Теперь, если открыть созданный нами Index.html в браузере, то мы увидим просто перечисление в столбик названий частей 2 колоночного макета на базе блочной верстки. Если вы откроете файл Index.html в браузере FireFox с установленным плагином Web Developer (Плагин Web Developer для Firefox — установка и предоставляемые возможности) и выберете из меню этого плагина пункты «Контуры» — «Контур элементов уровня блоков», то увидите примерно следующую картину:

Т.е. все получилось именно так, как мы и хотели — четыре Div контейнера заключены в одном основном Div контейнере. Но почему же тогда все выглядит не так, как мы наметили на структурной схеме макета на основе блочной верстке? Просто мы еще ничего не написали в наш файл Style.css, который поможет, чудесным образом (с помощью свойств CSS), расставить все Div контейнеры по своим местам.

Макет в 2 колонки на основе блочной Div верстки — прописываем CSS свойства для Div контейнеров

Открываем в удобном для вас редакторе Style.css и прописываем стили CSS для только что созданных Div контейнеров. Сначала в Style.css стоит прописать CSS правило для тегов Body и Html, которое позволит сбросить отступы макета сайта от внутренних и внешних границ экрана (для соблюдения кроссбраузерности):

Вы, наверное, уже слышали или видели, что макеты для сайта бывают фиксированной ширины (например, 800px), а могут быть или же бывают макеты резиновые — ширина макета на основе блочной Div верстки подстраивается под разрешение экрана посетителя вашего сайта.

Второй вариант (резиновый макет) довольно часто используется на форумах, а для сайтов чаще всего применяют макет фиксированной ширины. Особенно это актуально сейчас, с появление широкоформатных мониторов с большим разрешением экрана (сайт с резиновым макетом будет смотреться на таком мониторе не очень здорово).

Поэтому мы пропишем для нашего основного Div контейнера макета ряд CSS свойств в Style.css, которые позволят создать макет фиксированной ширины (например, 800px) и выровнять макет по центру относительно краев экрана (в файле Index.html для основного контейнера мы прописали ID под названием maket) :

Итак, давайте разберем эту запись. Вы, наверное, уже поняли, что #MAKET (называется это селектор или же по другому — имя стиля) говорит о том, что данная запись в CSS файле будет применена только к Div контейнеру, в котором прописан ID="MAKET" . В фигурных скобках записываются свойства CSS для макета со своими значениями. Общий синтаксис конструкции записи в CSS файле выглядит так:

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

Первое CSS свойство двухколоночного макета на основе блочной Div верстки:

задает ширину для основного Div контейнера (фактически ширину для всего макета), а второе CSS свойство макета на основе блочной верстки:

позволяет выровнять основной Div контейнер посередине относительно левого и правого края экрана. Само свойство Margin предназначено для задания отступов от внешних границ Div контейнера до соседних элементов (блоков или контейнеров) страницы.

В нашем случае основной Div контейнер (блок) является самым внешним элементом нашего двух колоночного макета, поэтому CSS свойство Margin будет задавать отступ от границ основного Div контейнера до границ экрана браузера пользователя.

Первое значение, прописанное в CSS свойстве Margin равно нулю — это означает, что основной Div контейнер (фактически сам двухколоночный макет на блочной верстке) будет вплотную прижат к верхнему и нижнему краю экрана (отступы сверху и снизу равны нулю).

Второе значение в CSS свойстве Margin прописано как Auto — это означает, что отступ от левой и правой границы основного Div контейнера будет равномерно распределен, в результате чего Div основной контейнер (а фактически сам макет в 2 колонки) будет выровнен по центру относительно левого и правого края экрана. Такие вот пироги. Две строчки CSS кода, а сколько текста нужно написать для подробного объяснения их значения (кошмар).

Пропишите данные свойства в ваш файл Style.css

Сохраните изменения и откройте в браузере Index.html. Вы увидите, что теперь ширина двухколоночного макета на основе блочной верстки перестала быть равной ширине экрана и уменьшилась до 800px. При этом наш макет сайта на дивах выровнялся по центру относительно правого и левого краев экрана:

Выравниваем двухколоночный макета на блочной Div верстке по центру в старых версиях браузеров (Internet Explorer 5)

Все хорошо, но есть одно «но». В браузере Internet Explorer 5 (старая версия, но может встречаться у посетителей до сих пор) выравнивание макета на основе блочной Div верстки по центру, описанным выше способом не сработает. Не понимает он этого, поэтому персонально для этого браузера (Internet Explorer 5) нужно будет дописать для Html тега Body CSS свойство:

которое поможет выровнять наш макет на Div верстке по центру в старых версиях браузеров. Но это CSS свойство, прописанное для Html тега Body, задает выравнивание по центру для всего текста на странице, а это нам вовсе не нужно.

Поэтому, мы допишем новое CSS свойство для нашего основного Div контейнера (фактически всего макета на Div верстке), которое задаст выравнивание текста во всем макете по левому краю (это значение используется по умолчанию, но т.к. мы прописали иное CSS правило выравнивания для Html тега Body, то приходится указывать выравнивание по левому краю в явном виде):

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

Задаем в CSS цвет фона для внутренних DIV-контейнеров, формирующих наш двухколоночный макет на блочной верстке

Теперь я предлагаю заняться внутренними Div блоками макета. Для большей наглядности, предлагаю вам подкрасить эти Div блоки разными цветами, с помощью задания фонового цвета для Div контейнеров этих блоков, с помощью специально предназначенного для этого свойства CSS — Background-color.

Цвета в Html обычно задаются в кодовом выражении, которое начинается со знака решетки (для получения Html кода нужного вам цвета можно воспользоваться специальными программами, подробнее о которых вы можете прочитать здесь).

Итак, пропишем для всех названий ID наших внутренних Div контейнеров свойство Background-color с разными значениями фонового цвета, например, так:

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

Теперь для того, чтобы увидеть границы отдельных Div контейнеров, нам не нужно будет прибегать к услугам плагина Web Developer.

Div блок Header, судя по структурной схеме, приведенной в начале статьи, должен у нас занимать всю ширину макета, но Div блок Left должен иметь ограниченную ширину. Задать это можно с помощью уже известного нам CSS свойства Width, например, так:

В результате наш макет на основе блочной верстки примет вид:

Задаем в файле CSS обтекание блока левой колонки другими блоками, расположенными ниже в HTML коде файла index.html

Ну вот, уже гораздо ближе к структурной схеме двухколоночного макета сайта на блочной верстке, но все же еще не совсем то. Нужно еще, чтобы блок Content располагался не снизу, а справа от Div блока Left. Добиться этого не сложно, благо имеется свойство CSS под названием Float, позволяющее прижать Div блок к нужной стороне экрана и задать обтекание этого Div блока с другой стороны, расположенным следом за ним (в HTML коде) Div блоком. Немного не понятно? Не беда, сейчас рассмотрим все на примере.

Добавим CSS свойство для Div контейнера Left, позволяющее прижать его к левому краю и задать обтекание его справа Div контейнерами, расположенными ниже. Выглядеть в CSS коде Style.css это будет так:

Т.е. добавилось всего лишь одно единственное CSS свойство Float со значением Left, предназначенное для Div блока Left. Весь CSS код в Style.css, созданный нами на данный момент будет иметь вид:

А наш макет на блочной Div верстке теперь будет выглядеть так:

Класс! Почти то, что нужно, но опять же есть маленькая неувязочка. Div блок Footer (подвал) не должен обтекать левую колонку справа, он должен располагаться в самом низу макета и занимать всю его ширину.