Создаем каркас для сайта

Создание каркаса является первым шагом при проектировании любого интернет-сайта. И в этом уроке мы создадим каркас для нашего сайта www.plata.ru

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

Виды каркасов для сайта.

При создании сайтов используются несколько типов верстки каркаса:

табличный
блочный
фреймовый

Из всех перечисленных технологий наиболее удобной является табличная верстка, т.к. фреймовые сайты неправильно индексируются поисковыми машинами, а блочная верстка основанна на технологии css, что может привести к совсем неправильному отображению в старых броузерах, например IE6, которым, к сожалению, еще пользуются очень многие.

Табличная верстка делится на несколько основных подвидов:

с абсолютным размером (жесткий каркас)
с относительным размером (резиновый каркас)

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

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

У обоих способов есть свои плюсы и минусы, например при относительном размере сайт может деформироваться на нестандартных разрешениях.

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

Создаем табличный каркас.

Для начала открываем дримвивер, а в нем уже созданную страницу index.html.

Создаем таблицу, состоящую из 3х строк и одного столбца, с заданной шириной 99% и выравниванием по центру страницы.

Задаем значения отступов внутри ячейки и между ячейками таблицы, равными 0px:

cellpadding="0" cellspacing="0"

Значение ширины таблицы мы зададим в нашем CSS файле, для чего установим идентификатор таблицы - id="main_table":

#main_table {width:99%; background – color : #ECECEC; border : 2px solid #696969; }

Здесь мы указываем ширину таблицы, фоновый цвет и выделяем границы таблицы. Итак код таблицы на которой будет держаться весь сайт выглядит следующим образом:

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

Верхней ячейке таблицы присваиваем идентификатор id="td_header", а в таблицах стилей задаем ей фоновое изображение, которое я подготовил заранее

#td_header {

background – image : url(img/plata_header_bg.png);
background – repeat : repeat – x;
background – position : bottom;
}

Затем в этой ячейке создаем еще одну таблицу, которая станет шапкой для нашего сайта. Состоять она будет из одной строки и 3х столбцов, в левом из которых размещаем созданный нами логотип:

В центральной ячейке нашей основной таблицы создаем еще одну таблицу, которая станет основным окном для нашего сайта. Состоять она будет из одной строки и 3х столбцов, в пропорциях 8/83/8. Левой ячейке устанавливаем класс id="td_menu", центральной – id="td_center" и правой – id="td_menu_right", которым, в свою очередь задаем следующие CSS параметры:

#td_menu {
background – image : url(img/plata_menu_bg.png);
background – repeat : repeat – x;
border – right : 1px groove White;
}

#td_center{
background – color : #F5F5F5;
border – right : 1px groove #696969;
border – left : 1px groove #696969;
border – top : 1px groove #696969;
border – bottom : 1px groove #696969;
}

#td_menu_right {
background – image : url(img/plata_menu_bg.png);
background – repeat : repeat – x;
border – left : 1px groove White;
}

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

Нижней ячейке основной таблицы присваиваем идентийфикатор id="td_footer", которому задаем следующие параметры отображения в CSS:

#td_footer{
background – image : url(img/plata_footer_bg.png);
background – repeat : repeat – x;
}

В итоге каркас страницы выглядит следующим образом:

каркас страницы

А вот и полный HTML код каркаса:

Все! Создание каркаса для нашего сайта оконченно.

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

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

Наверх

Источник: Создание сайтов