Создание каркаса является первым шагом при проектировании любого интернет-сайта. И в этом уроке мы создадим каркас для нашего сайта www.plata.ru
Создание каркаса для сайта - важный и очень ответственный процесс, поэтому постарайтесь максимально сосредоточиться при прочтении данного урока.
Виды каркасов для сайта.
При создании сайтов используются несколько типов верстки каркаса:
табличный
блочный
фреймовый
Из всех перечисленных технологий наиболее удобной является табличная верстка, т.к. фреймовые сайты неправильно индексируются поисковыми машинами, а блочная верстка основанна на технологии css, что может привести к совсем неправильному отображению в старых броузерах, например IE6, которым, к сожалению, еще пользуются очень многие.
Табличная верстка делится на несколько основных подвидов:
с абсолютным размером (жесткий каркас)
с относительным размером (резиновый каркас)
Сайты с абсолютным размером имеют фиксированные значения ширины, которая при переходе от одного разрешения экрана к другому не изменяется.
Сайты, основанные на табличном каркасе с относительным размеров имеют ширину, заданную в процентах, тоесть при смене разрешения экрана ширина сайта будет занимать одну и туже область в процентах (тоесть сайт будет расширятся или сжиматься).
У обоих способов есть свои плюсы и минусы, например при относительном размере сайт может деформироваться на нестандартных разрешениях.
Для нашего сайта будем использовать табличный каркас с относительным размером, равным 99%.
Здесь мы указываем ширину таблицы, фоновый цвет и выделяем границы таблицы. Итак код таблицы на которой будет держаться весь сайт выглядит следующим образом:
Затем в этой ячейке создаем еще одну таблицу, которая станет шапкой для нашего сайта. Состоять она будет из одной строки и 3х столбцов, в левом из которых размещаем созданный нами логотип:
В центральной ячейке нашей основной таблицы создаем еще одну таблицу, которая станет основным окном для нашего сайта. Состоять она будет из одной строки и 3х столбцов, в пропорциях 8/83/8. Левой ячейке устанавливаем класс id="td_menu", центральной – id="td_center" и правой – id="td_menu_right", которым, в свою очередь задаем следующие CSS параметры:
Здесь мы создали каркас для нашего сайта, а это значит, что первый большой шаг уже сделан. Данный каркас будет продублирован на все страницы сайта и останется неизменным, изменяться будет только контент.
В следующем уроке мы будем создавать красивое меню навигации для нашего сайта, основанное на технологии CSS.