Приветствую дорогие читатели, в этом выпуске речь пойдет о разновидностях верстки. Все вы, наверное, слышали о блочной верстке и табличной
, сегодня я бы хотел поговорить об этих двух разных подходах к верстке сайта. В предыдущей статье я описывал, как защитить электронный , немного раньше мы рассматривали конкретный пример магазина на современном компоненте virtuemart для бесплатной CMS joomla.
Эта статья будет полезна начинающим вебразработчикам, которые только становятся на тернистый путь "сайтостроителей" и хотят самостоятельно делать сайты
. Вебразработчики со стажем тоже смогут что-то почерпнуть для себя, в частности в статье сравниваются достоинства и недостатки табличной и блочной верстки
.
Пожалуй, нужно начать с того, что такое верстка сайта? Верстальщик получает от дизайнера макет будущего сайта, как правило, макеты предоставляются в формате photoshop. Макет это по сути рисунок, только более детализированный, в нем отдельные элементы (меню, шапка сайты...) разнесены по слоям, это получается естественным путем когда дизайнер рисует макет, кроме того это очень удобно, можно легко скопировать рисунок с нужно слоя, посмотреть параметры шрифта и т.д. Так вот суть верстки в трансформации макета в html документ и составления набора CSS правил.
Следует отметить, что верстка это процесс творческий, не такой конечно как отрисовка макета в фотошоп но, тем не менее, доля творчества в этом есть особенно на начальном этапе, далее с ростом опыта процесс верстки можно механизировать. Качество верстки оценивается по тому, насколько сверстанный сайт отличается от макета.
Виды верстки
Как заявлено в названии верстка бывает блочная или табличная
. В блочной верстке элементы сайта структурируются с помощью блоков (div
), в табличной верстке обходятся таблицами (table
).
Табличная верстка
Табличная верстка
использовалась на заре сайтостроения, она была популярна среди начинающих вебразработчиков. Следует заметить, что многие вебмастера и сейчас достаточно эффективно обходятся версткой таблицами, как говориться - дело мастера боится. Лично я предпочитаю блочную верстку табличной верстке, но мы сейчас не о вкусах. В основу идеи положено представление сайта в виде таблицы. Как известно подавляющее большинство сайтов имеют типовую структуру, которую можно детализировать под конкретную задачу. Рассмотрим для примера типовой вариант сайта
который содержит шапку, область контента, правый сайдбар и футер, такова не хитрая структура моего блога. Реализуем данную структуру таблицей
шапка
контент
сайдбар
футер
таблице следует задавать конкретную фиксированную ширину, если макет имеет фиксированную ширину или 100%, если макет резиновый, в этом случае таблица будет растягиваться по ширине экрана в зависимости от разрешения монитора.
Достоинства и недостатки табличной верстки:
Проста в понимании, не требует более глубоких знаний HTML и CSS (+
)
Интуитивно понятна при построении, минимум CSS правил (+
)
Трудно разбираться в HTML коде при более сложной структуре сайта (-
)
Пока вся таблица не загрузиться она не будет показана на экране (-
)
Сложный дизайн с перекрытием элементов не реализуем (-
)
Остановимся поподробнее на 4-ом пункте. Дело в том, что HTML таблицы устроены таким образом, что браузер не может знать заранее как рисовать таблицу с ее содержимым, пока оно незагружено, до тех пор, пока последний рисунок, находящийся в таблице не будет загружен, таблица не будет показана на экране браузера, что может стать причиной ухода пользователей с сайта не дождавшись отображения страницы, поскольку посетитель не видит ничего на экране некоторое время. Создается впечатление будто сайт тормозит, на самом деле браузер ждет пока все элементы таблицы будут загружены.
блочная верстка
Блочная верстка базируется на том, что блочные элементы HTML, как правило, располагаются по вертикали, сверху вниз друг за другом в том порядке, в котором они встречаются в HTML коде. Кроме этого блокам можно задавать свойство плавучести (float:left | right | none | inherit
). Если блоку указать свойство float:left
, то он будет выровнен по левому краю, а все остальные блоки будут игнорировать его, как будто этого блока нет, за исключение текста, остальные блоки, которым задано это же свойство будут обтекать его справа, на сколько это позволяет ширина экрана или элемента внутри которого они находятся. Следует заметить, что любой элемент можно сделать блочным, заданием ему свойства display:block
, изначально только элементы div
по умолчанию считаются блочными элементами, для не блочных элементов (span, p
) свойство float
игнорируется и такие элементы располагаются как обычно последовательно сверху вниз. Чтобы свойство float
не игнорировалось необходимо задать элементы свойство display:block
.
float:right
выровнит блок по правому краю, а все остальные блоки будут игнорировать его, либо обтекать, если им задано это же свойство и если в коде идут подряд два или несколько блоков с указанным свойством, то первым вправо встанет тот блок, который идет первым в коде, остальные обтекают его слева.
Свойство float:none
отменяет эффект плавучести для блока, но это не значит что блок будет располагаться как обычно сверху вниз, если выше расположен блок с эффектом плавучести, то нижний блок будет игнорировать верхний и встанет под него, чтобы этого не было нужно задать этому блоку свойство clear:both
. Ух, сложно да? Это только, кажется, на первый взгляд, на самом деле все логично и просто, надо только потренироваться.
float:inherit
- задает свойство плавучести, такое же, как у родительского блока (блока в который вложен данный дочерний блок).
Нужны конкретные примеры, чувствую не убедительно, получается. Давайте создадим простой пример, для начала основу, красный блок с шириной 400 пикс. высотой 350 пикс. и выровним его посередине экрана.
теперь нужно добавить в этот блок еще пару блоков, зеленый и серый с высотой и шириной 100 пикс, у серого блока высота 120 пикс.
Видно, что блоки располагаются в общем потоке снизу вверх, в том порядке, в котором они встречаются в коде, сначала зеленый затем серый в конце голубой. Давайте зеленому блоку зададим свойство float:left
, чтобы серый и голубой блоки игнорировали его.
как видно серый блок проигнорировал зеленый блок и встал под него, зеленый блок, как бы сам по себе, голубой блок выстроился за серым. Зададим обтекание всем блокам.
Видно, что блоки выстроились один за другим в том порядке, в котором они идут в коде. Давайте попробуем расположить два блока друг за другом, а третий как обычно ниже. Для этого нужно убрать у третьего блока свойство float:left
, но этого недостаточно, так как он залезет под первые два блока, в чем мы убедились раньше. Чтобы этого не произошло нужно задать третьему блоку свойство clear:both
;
header
контент
сайдбар
foter
Вот такая структура получилась, при задании ширины блокам учитывался тот факт, что рамка 1 пикс. увеличивает размеры блока, поэтому размер хедера задан 398 пикс. а не 400 пикс.
Достоинства и недостатки блочной верстки:
Меньший вес страницы за счет меньшего кода (+
)
Реализация сложного дизайна с перекрывающимися блоками (+
)
Трудно освоить, табличная верстка проще (-
)
Чаще приходится решать вопросы кроссбраузерности. блоки могут перекрываться при изменении разрешения экрана, масштабировании (-
)
Лично я начинал с табличной верстки сейчас пользуюсь блочной, освоил ее достаточно давно, это было легко, хотя она и имеет ряд недостатков мне привычнее и проще пользоваться именно блочной версткой.
На этом все дорогие читатели, заходите по-чаще.
Как запустить видеоурок:
Разархивировать скачанный файл.
Открыть папку index
.
Запустить файл index.html
в браузере.
Добро пожаловать в видеоурок, посвященный табличной верстке
сайта. Изучив 12 урок по , Вы уже должны уметь работать с . Сейчас же, мы познакомимся с табличной версткой. Наш сайт будет основан на большой таблице. Сверху у нас будет шапка сайта (наверняка вы уже видели такие сайты). Там будет располагаться логотип и еще что-нибудь. Внизу будет футер. Там будут и годы жизни сайта. Слева – меню, справа – контент.
Как сверстать сайт? (Табличная верстка)
Давайте перейдем на рабочий стол и создадим еще одну папку. Папка будет называться site2. Поместим в нее два изображения, которые я подготовил для этого видеоурока: footer.png
и logo.png
. Также давайте скопируем файл index.html
из папки site
в папку site2
. Чтобы скопировать, вы можете нажать правой клавишей мыши на файле и выбрать «копировать» либо использовать комбинацию горячих клавиш Ctrl+C. Чтобы вставить, можно нажать правой клавишей мыши и выбрать «Вставить» либо использовать Ctrl+V.
Теперь давайте откроем наш индексный файл через notepad, удалим все лишнее и ненужное нам, начиная с первой строки, размещенной в тегах .
Главная страница
Теперь создадим нашу таблицу. Пропишем ей ширину в 800 пикселей. Можно прописать и в процентах: 100%, 90%, 80% — на ваше усмотрение. Я прописываю 800 пикселей, так как наш логотип будет шириной в 800 пикселей. Далее прописываем первую строку – это будет шапка сайта. Насколько мы помним, после шапки сайта идет меню и контент, то есть два столбца. Поэтому нам сейчас надо прописать один столбец для нашей шапки и, с помощью атрибута colspan разбить его на два. В первую строку помещаем наше изображение. Так как изображение находится в корневой папке, то путь прописываем просто “logo.png
”. Зададим ширину изображения 800 пикселей и высоту – 100 пикселей. Кстати, нашей строке мы тоже можем задать ширину и высоту. Но ширину нет смысла задавать, так как она у нас задана уже в таблице. Зададим просто высоту.
Теперь давайте создадим вторую строку. Это меню и контент. У нас здесь будет два столбца. Мы их оба пропишем. Сначала первый. Это меню. В ссылке я прописываю решетку. Это значит, что наша ссылка никуда не будет нас перенаправлять при нажатии на нее – оставит нас на нашей же странице. Вставим для наглядности несколько ссылок.
Меню:
Кстати, нам нужно задать для левого блока «Меню» ширину. Пусть будет 200 пикселей. Для второго блока ширину можно не задавать.
Меню:
Теперь займемся контентом. Пишем в нем любой текст. Ширину поставим 600.
Читайте наши новости каждый день и получите подарок от автора.
И создаем последнюю нашу строку – футер. Зададим ему высоту 20 пикселей, атрибут colspan =2 и пропишем путь до изображения footer.png
. Не забудьте положить все изображения, которые я добавил к этому видеоуроку в корневую папку сайта, иначе они у вас не отобразятся. Либо вы можете положить их в любую другую папку и указать к ней путь. Только учтите, что придется указывать этот путь перед указанием имени самого изображения. Установим изображению высоту 20 пикселей и ширину 800 пикселей.
Всё. Сохраняем и проверяем в браузере. Как мы видим, у нас табличная верстка
получилась. Давайте создадим рамку, чтобы разделить блоки.
Переходим в код, прописываем таблице рамку.
Сохраняем, проверяем в браузере. Ну вот, более-менее.
Давайте сделаем выравнивание нашего текста по центру с помощью атрибута align. Также отцентрируем нашу табличку.
Меню:
Добро пожаловать на наш сайт.
Сохраняем, проверяем в браузере. Все получилось. Но тексту в контенте можно придать вертикальное выравнивание.
Перейдем в код.
Добро пожаловать на наш сайт.
Сохраним, проверим. Теперь все хорошо.
Хотя задачей данного видеоурока было рассмотрение табличной верстки сайта, мы к тому же отработали теги, которые изучили в прошлом видеоуроке.
Давайте создадим процентную таблицу. Пусть она будет на всю ширину экрана. Скопируем текст контента из прошлой индексной странички. Наша задача – создать таблицу в процентах. Как это сделать? Для начала нужно удалить ширину или просто сделать ее стопроцентной. Но так как мы вверху укажем, что у нас будет 100%-я ширина, то в футере ее прописывать не нужно. Так же с хедером и контентом. Ширину таблицы заменяем на 100%.
А отображение шапки сайта и футера сделаем с выравнивание по левому краю, чтобы смотрелось симпатичнее.
Сохраняем, проверяем в браузере. Всё получилось, разве что изображение не отображается, так как у нас нет папки site
, но это не страшно, потому что мы уже изучили тему «изображения» и можем это исправить.
Давайте сделаем так, чтобы меню было сверху, с помощью вертикального выравнивания.
Меню:
Сохраним. Посмотрим. В принципе, все. В меню вы можете размещать свои на какие-нибудь другие странички, и у вас получится уже полноценный статичный сайт. На этом я завершаю данный видеоурок. А вы приступайте к следующему, в котором мы рассмотрим используя HTML.
CSS
, поэтому у неё давно имеется решение, не основанное на стилях. Любой макет
страницы можно представить как таблицу, ячейки которой имеют требуемые размеры, позиции, оформление и содержание. Метод вёрстки, основанный на таблицах, совершенно универсален, достаточно прямолинеен и прост, он влечёт за собой сравнительно немного трудностей, связанных с кросс-браузерной совместимостью. Большой недостаток всего один: этот метод не даёт никаких средств для поддержки изменчивости дизайна, т.е. смены оформления макета. При табличной вёрстке оформление неразрывно связано с содержанием
документа.
Этих недостатков лишён метод дизайна, основанный на методах позиционирования CSS
, которые были рассмотрены в "Позиционирование средствами CSS" соответствующей лекции. Однако средства CSS
-вёрстки несколько менее очевидны для понимания и требуют большей осторожности по отношению к специфике разных браузеров.
Табличная вёрстка
Рассмотрим сначала пример табличной вёрстки, демонстрирующий основные приёмы разметки - объединение ячеек, установку границ и вертикальное выравнивание.
Листинг
10.1.
Макет страницы, построенный как таблица
Рис.
10.1.
Упражнение
. Текст верхнего колонтитула выровняйте по центру, навигацию перенесите в низ страницы, а ссылки в меню выровняйте по верхнему краю. Введите какой-нибудь текст в правую (пустую) колонку.
Очевидно, что хотя стили в рассмотренном примере и играют существенную роль, но вёрсткой всецело управляет таблица, и нельзя изменить оформления макета, не затронув этой таблицы. Такой способ вёрстки на сегодняшний день считается устаревшим (хотя и может применяться в пределах отдельных блоков).
CSS-вёрстка. Макет с одной колонкой
Перейдём к рассмотрению CSS-вёрстки, начиная с простейшего одноколоночного макета. В этом случае достаточно применить горизонтальное центрирование к единственной колонке (которая обычно представлена в разметке секцией). Вообще говоря, центрирование макета необязательно, но в большинстве примеров данной лекции оно осуществляется (отказаться от него всегда легко).
В примерах рассматриваются два типа разметки - с фиксированной
и непостоянной
шириной - каждый из которых имеет свои плюсы и минусы. Дизайн с фиксированной шириной гарантирует то, что разметка выглядит неизменно при различных размерах мониторов. Однако на очень маленьком мониторе посетителю, возможно, придется горизонтально прокручивать страницу, чтобы просмотреть все содержимое. А на действительно широком мониторе макет с постоянной шириной будет выглядеть затерянной узкой полоской.
Разметки с непостоянной шириной решают эти проблемы, но у них также есть свои собственные ограничения. На маленьком экране свободная разметка может настолько сжаться, что весь дизайн развалится, а при очень широком экране растянется так, что посетителям придётся читать ненормально длинные строки текста.
Есть CSS-свойства, которые предусмотрены для того, чтобы решить эту проблему: min-width
, min-height
, max-width
и max-height
.
Свойства min-
указывают браузеру сделать элемент, по крайней мере, таким же широким или высоким, как указанное значение. Вы можете применить свойство min-width
к элементу body
, чтобы управлять всей шириной содержимого страницы. Если посетитель расширит окно своего браузера до 1000 пикселов, содержимое страницы растянется так, что будет соответствовать всему доступному пространству. Однако если он сделает окно шириной 500 пикселов, то содержимое останется 760 пикселов в ширину, а браузер добавит горизонтальные полосы прокрутки. Свойство min-height
делает то же самое, но для высоты документа.
Свойства max-
задают максимальные размеры. С ними вы будете уверены, что ваши страницы не станут слишком широкими, а значит, непригодными для чтения.
Комбинируя перечисленные свойства, вы можете создать стиль, который изменяет размеры элемента в пределах установленных значений, так что дизайн никогда не станет слишком маленьким или слишком большим. Internet Explorer 6 и ниже полностью игнорирует эти свойства.
В случае одноколоночного макета достаточно применить горизонтальное центрирование
к единственной колонке (которая обычно представлена в разметке секцией).
Дизайн с фиксированной шириной гарантирует то, что разметка выглядит неизменно
при различных размерах мониторов. Однако на очень маленьком мониторе посетителю,
возможно, придется горизонтально прокручивать страницу, чтобы просмотреть
все содержимое. А на действительно широком мониторе макет с постоянной
шириной будет выглядеть затерянной узкой полоской.
Разметки с непостоянной шириной решают эти проблемы, но у них также есть
свои собственные ограничения. На маленьком экране свободная разметка может
настолько сжаться, что весь дизайн развалится, а при очень широком экране
растянется так, что посетителям придётся читать ненормально длинные строки
текста. Есть CSS-свойства, которые предусмотрены для того, чтобы решить
эту проблему: min-width, min-height, max-width и max-height.
Листинг
10.2.
Варианты вёрстки одноколоночного макета при помощи CSS
Рис.
10.2.
Упражнения
.
Поочерёдно откройте оба варианта данного примера в новом окне и, изменяя ширину окна браузера, проследите за поведением макета.
Добавьте к макету нижний колонтитул с тёмно-серым фоном.
или примеры верстки сайта с помощью таблиц
Способ табличной верстки сайта
не является рекомендуемым или семантически правильным, в отличие от того, что был показан в предыдущем уроке, где верстка осуществлялась
обычными контейнерами
со стилевыми описаниями. В современном
XHTML
таблицы рекомендуется использовать только для представления данных, но никак не для верстки сайта
. Невзирая на это, мы все же рассмотрим такой способ как дополнение к урокам, где мы занимались построением таблиц.
Примеры верстки страниц сайтов при помощи HTML таблицы
.
Отметим, что использована структура XHTML
документа, о чем свидетельствует и открывающий тег .
Параграф
Содержит CSS
атрибут class="" , значение которого - селектор описывается в секции .
Дальше вспоминаем уроки по таблицам...... Указываем ширину первой и третьей ячейки среднего ряда: width:120px + padding:15px = 150px (ширина одной ячейки) — умножаем на 2, получаем 300px. Ширина среднего столбца (ячейки) = (равна)
ширина таблицы (860px) - (минус) ширина левого и правого столбца (300px). Что касается высоты, то все ячейки одого ряда автоматически выравниваются по
самой высокой, поэтому в стилях, в описаниях среднего ряда была указана высота только одной — крайней левой. При расчете размеров всегда нужно учитывать значения
padding, margin, border . Значения этих атрибутов задаются так: padding:20px - внутреннее поле элемента по всему своему периметру
равно 20-ти пикселям или так: padding:10px 0 8px 60px - верхнее внутреннее поле равно 10-ти пикселям, правое - нулю, нижнее -
8-ми пикселям и левое - 60-ти пикселям (по часовой стрелке, начиная сверху). Жесткость такой верстки заключается в том, что размеры таблицы
заданы в пикселях, а не в процентах, то есть они не зависят от размера монитора или окна браузера.
Резиновая табличная HTML верстка
Пример резиновой HTML табличной верстки сайта
:
Резиновая HTML табличная верстка сайта
Мой сайт
Меню
Ширина ячейки в данном случае зависит от величины монитора или размера окна браузера.
Ссылки
Все права защищены
Сравните этот код и код из предыдущего примера, и вы увидите, что было изменено значение лишь одного атрибута в теге
. При
горизонтальный размер таблицы напрямую зависит от разрешения монитора. В нашем случае ширина первого и третьего столбцов (ячеек) среднего ряда
установлена жестко, а второй столбец растягивается, обеспечивая 100% ширину таблице. Недостатком такого типа верстки сайта является
непостоянная структура содержимого «резиновых» ячеек, которая изменяется в зависимости от размера окна браузера — при этом изменяется и внешний
вид страницы.
П
одробно взаимодействие основных инструментов сайтостроения: HTML
и CSS
, а также все способы верстки рассматриваются в следующем разделе
самоучителя, в уроке
Табличная верстка
- это условное названия метода верстки страниц сайта.
При табличном методе верстки каркас страниц сайта создается при помощи тега
, то есть структурной основой страницы является таблица, в ячейках которой располагают тот или иной контент.
Это наиболее распространенный способ верстки веб-страниц. Преимущество табличной верстки в том, что она проста и быстра в исполнении. Кроме этого, страницы, имеющие в своей основе таблицу, корректно отображаются в различных браузерах.
Я думаю, что Вы уже знакомы с основными тегами таблиц: это теги
и
, создающие строку и ячейку таблицы соответственно. А также Вы, наверняка, знаете основы работы с таблицами в HTML . Если нет, то советую сначала немного почитать об этом
.
А сейчас давайте перейдем непосредственно к созданию каркаса страницы методом табличной верстки.
В основном верстка с созданием таблиц выполняется так, что границы и таблиц и их ячеек невидимы (атрибут border=
"0"
). Я же буду создавать таблицы, имеющие границы (атрибут border=
"1"
). Так Вам проще будет ориентироваться.
Шаг 1. Основная таблица
Стандартная первоначальная таблица, составляющая основу страницы, обычно состоит из трех строк: верхняя строка предназначена для шапки сайта - это может быть любое изображение, созданное Вами в редакторе Adobe Photoshop или позаимствованное из какого-либо источника; нижнюю строку занимает подвал или так называемый «
футер» сайта (от англ. footer - нижняя сноска
); и основная строка расположена по середине. Далее Вы узнаете для чего она предназначена.
Предлагаю назвать первоначальную таблицу основной
. Делаем это для исключения путаницы, так как далее будут создаваться другие таблицы.
не может существовать сам по себе. Обязательно наличие тега
. То есть строка таблицы создается только при наличии в ней хотя бы одной ячейки.
Фрагмент кода:
> Основная таблица
Шапка сайта
Основная строка
Подвал
Результат:
Что касается ширины основной таблицы, то, как Вы видите, мы ее установили фиксированной: равной 1000 px
. Вы можете установить любую ширину, но делайте ее не более, чем разрешение экрана
. Например, если у Вас установлено разрешение 1280х1024
, то желательно, чтобы ширина основной таблицы не превышала 1280 px
, иначе какая-то ее часть не будет видна, а у окна браузера появиться горизонтальная полоса прокрутки.
А что если у определенного числа пользователей разрешение экрана меньше Вашего, например 1024х768
? В этом случае при ширине основной таблицы более 1024 px
, какой-то части пользователей будет неудобно просматривать страницы Вашего сайта, так как им придется пользоваться горизонтальной полосой прокрутки.
Выход из этого есть. Можно установить значение ширины равным 100%
. Тогда ширина таблицы будет подстраиваться под размеры окна браузера.
Также можно сразу задать значение атрибута height
тега
, устанавливающего высоту таблицы. Пусть высота основной таблицы составляет 700 px
.
Следует знать
, что значения высоты и ширины таблицы не являются постоянными, то есть меньше таблица не станет, а вот больше может - всё зависит от размеров её содержимого.
Шаг 2. Таблица для контента
Создаем в ячейке основной строки еще таблицу. Назовем ее таблица для контента
- в ней будет размещено основное содержимое страницы.
Как правило, таблица для контента состоит из трех столбцов, то есть имеет одну строку и три ячейки, образующие столбцы.
И, как правило, в левой колонке размещают меню навигации, а в правой, например, рекламные блоки, баннеры и т.п. Можно правую колонку временно оставить пустой или не создавать ее (но лучше создайте - по мере наполнения сайта ей найдется применение
). И, наконец, центральная ячейка таблицы для контента является основной
, так как в ней размещают контент: тексты статей, различные графические элементы и т.д.
Фрагмент кода:
"700"
> Основная таблица
Шапка сайта
Начало основной строки
Устанавливаем ширину и высоту таблицы для контента равными 100%
Левая ячейка
таблицы для контента
Центральная ячейка
таблицы для контента
Правая ячейка
таблицы для контента
Конец основной строки
Подвал
Результат:
Ширину и высоту таблицы для контента устанавливаем равными 100%
. Таким образом она сразу растянется на всю ширину основной таблицы и на всю высоту основной строки.
Шаг 3. Вертикальное выравнивание
Как видно из предыдущих шагов, содержимое ячеек таблицы по умолчанию выравнивается в горизонтальной плоскости по левому краю, а в вертикальной - по середине.
Если горизонтальное выравнивание в ячейке, как правило, оставляют по умолчанию, то расположение контента по центру ячейки в вертикальной плоскости редко кого-то устраивает.
Поэтому, при помощи атрибута valign
тега
, устанавливаем вертикальное выравнивание содержимого тех ячеек, для которых это необходимо. В основном для содержимого ячеек устанавливают вертикальное выравнивание по верхнему краю.
Фрагмент кода:
"700"
> Основная таблица
Шапка сайта.
Начало основной строки
Таблицы для контента
Левая ячейка
таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю.
Центральная ячейка
таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю.
Правая ячейка
таблицы для контента
Конец основной строки
Подвал
Результат:
Шаг 4. Заполняем таблицу: шапка, подвал и контент
Итак, на предыдущем шаге мы закончили формировать наш каркас (впрочем его можно переделать и внести какие-то изменения в любое время
).
Сейчас давайте перейдем к заполнению основной таблицы. Начнем с шапки.
Я взял изображение, являющееся шапкой моего сайта и уменьшил его до соответствующего размера: напомню, что ширина основной таблицы, а соответственно, и ячейки под шапку составляет 1000 px
.
Зная высоту изображения, устанавливаем для ячейки, отведенной под шапку, соответствующее значение высоты: 121 px
.
Переходим к подвалу: нижнюю ячейку основной таблицы, являющуюся «футером» страницы, зальем синим цветом (атрибут bgcolor
тега
задает фоновый цвет ячейки
) и сделаем ее по высоте, равной 35 px
.
Далее редактируем таблицу для контента: установим ширину левой ячейки равной 250 px
, а правой ячейки - 150 px
. Центральная ячейка занимает все свободное пространство: ее ширина становится равной 600 px
.
Фрагмент кода:
"700"
> Основная таблица
"121"
>
Шапка сайта.
Начало основной строки
Таблицы для контента
Левая ячейка
таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю.
Центральная ячейка
таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю.
Правая ячейка
таблицы для контента
Конец основной строки
"#6699FF"
>
Подвал. Светло-синий фон
Результат:
В левой ячейке таблицы для контента я разместил меню навигации по сайту, а в центре - текст.
Я поступил следующим образом: для границы шапки сайта и центральной ячейки основной таблицы я выбрал тот же цвет, которым залит «футер», а ячейки таблицы для контента имеют темно-синие границы. Все границы выполнены непрерывной линией и имеют толщину 1 px
.
Фрагмент кода:
"700"
> Основная таблица
"121"
style="
border:
#6699FF solid 1px
">
Шапка сайта. Светло-синяя граница
Начало основной строки
Таблицы для контента.
Светло-синяя граница
Левая ячейка
таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю.
Темно-синяя граница
Центральная ячейка
таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю.
Темно-синяя граница
Правая ячейка
таблицы для контента. Темно-синяя граница
Конец основной строки
Подвал. Светло-синий фон
Результат:
На этом, пожалуй, закончим создание каркаса страницы методом табличной верстки.
Немного позже я продолжу развивать эту тему: немного усложним наш каркас, включив в него еще одну строку для верхнего меню навигации; можно разместить, например, в левой колонке еще одну таблицу, таким образом разбив ее на части и т.п.
Впрочем, Вы можете сделать это самостоятельно. Заодно закрепите пройденный материал!
Резервная копия Iphone необходима для сохранности данных при переустановке ОС, поломке устройства, сбоя ПО или облачного сервиса. Обеспечить синхронизацию информации:
Адресной книги (всех контактов) и истории вызовов.
Полного списка календарей,...
Найти подходящий аккумулятор для планшета непросто для пользователя, который слабо осведомлен о том, где в его таблете находится отсек для АКБ. Впрочем, если гаджет неожиданно «поправился» в размерах и демонстрирует все признаки готовности треснуть...
Информация о марке, модели и альтернативных названиях конкретного устройства, если таковые имеются. ДизайнИнформация о размерах и весе устройства, представленная в разных единицах измерения. Использованные материалы, предлагаемые цвета,...
