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

Вопреки вашим ожиданиям я не стану сразу переходить к средней части с боковыми панелями и контентом. Выстроим низ сайта – подвал (footer). В данном подвале можно разместить всю второстепенную информацию: рекламные баннеры, счетчики, копирайт и все, что не должно отвлекать посетителей сразу при загрузке страницы. Пусть он обратит внимание на содержимое, а потом, если захочет, ознакомится и с тем, как связаться с администратором сайта, с разработчиком дизайна, или посмотреть успехи сайта по показаниям статистики.

У нас уже создан общий контейнер с айдишником footer, следует его разбить на необходимые части. Такие моменты мы можем организовать с помощью таблицы. В данном курсе не совсем уместно использование таблиц для дизайна, так как и поисковыми системами, и всемирным консорциумом это не восхваляется, но для организации контента таблицы никто не отменит. Внизу у нас какой-никакой, а контент, и, чтобы развить в вас дополнительные навыки верстки мы изучим часть свойств таблиц на примере.

Для себя на листке бумаги или в фотошопе набросайте план информации. Я бумагу не использую (использую, но не скажу как), поэтому для эскиза мне поможет продукт компании Adobe.

image11

Макет подвала сайта

Как видите, я исходил от общего дизайна сайта: трехколоночный макет, цвета, центрирование – все должно быть в одном духе. Право я оставил для таблеток-счетчиков и рекламы, лево – для реквизитов и центр для копирайта.

Как это будет выглядеть в html. Я опубликую код, а потом мы его разберем.

         <div id="footer">
                <table id="tabfoot" width="100%" cellpadding="10px" cellspacing="0" border="1">
                    <tr>
                        <td rowspan="2" width="200px" style="text-align:right;">
                            <span>Связь с администратором:</span><br />
                            <span><a href="mailto:адрес почты" title="Написать администратору">адрес почты</a></span><br />
                            <span>Design by <a href="http://seoskop.ru" title="Design by YuGenn" target="_blank"><strong>YuGenn</strong></a></span><br />
                        </td>
                        <td rowspan="2">
                            &copy;2009-2011 COFEMIR.RU Все права защищены
                            <br />Использование материалов должно сопровождаться обратной ссылкой
                        </td>
                        <td>
                            <img src="/images/schet.png" alt="schet"/>
                        </td>
                        <td>
                            <img src="/images/schet.png" alt="schet"/>
                        </td>
                    </tr>
                    <tr>
                        <td width="200px" colspan="2">&nbsp;</td>
                    </tr>
                </table>
          </div>

CSS-файл дополняем строками:

#tabfoot{
    text-align:center;
    color:#ff0000;
    font:11px Tahoma,arial,serif;
}
#tabfoot a{
    color:#ff0000;
    text-decoration:none;
}
#tabfoot a:hover{
    font-weight:bold;
    text-decoration:underline;
}

Обновите браузер и посмотрите результат, теперь вооружимся firebug-ом и будем разбирать код.

image12

Исследование кода подвала

Для начала отметьте для себя ключевые теги <table></table>. Именно они задают основной контейнер таблицу. Внутри него составляющие контейнеры <tr></tr> — контейнеры строк, и <td></td> — контейнеры ячеек, которые уже располагаются внутри строки. Иерархия понятна?

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

<table id="tabfoot" width="100%" cellpadding="10px" cellspacing="0" border="1">

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

Потом мы объявили начало строки тегом <tr>, а еще ниже наш первый столбец.

<td rowspan="2" width="200px" style="text-align:right;">

Этот столбец очень не простой. Основная его черта — он занимает место нижней ячейки в следующей строке. Мы привыкли говорить, что происходит объединение ячеек вертикально. Для такого дела есть атрибут rowspan. Его значение показывает распространение ячейки вниз на количество строк.

Совет: Обратите внимание, что распространение идет только вниз, а не вверх. Если указать во второй строке у ячейки такое свойство, но нужного результата мы не получим. Тоже самое происходит и с горизонтальным объединением ячеек – указывается левая ячейка, которая растягивается на энное количество ячеек вправо.

Ширину ячейки приравняли ширине боковой панели. А в стилях элемента (style) указали центрирование текста.

Совет: Постарайтесь запомнить свойство для текста text-align и его возможные значения: left, right, center и justify (по левому краю, по правому краю, по центру и по ширине соответственно). В оформлении страничек это свойство сыграет не последнюю роль.

Затем идет содержимое ячейки. Здесь я решил поместить три строки в три спана и разделить их разрывами br. Ваше внимание должны привлечь две различные ссылки во втором и третьем блоке. Гиперссылка обозначается парным тегом <a></a> и является контейнером. Ей нужен обязательный атрибут – href, который содержит путь, направление ссылки. В первом спане ссылка имеет метод mailto, что означает написать письмо, при активировании такой ссылки запустится почтовый клиент. Во втором блоке ссылка ведет по протоколу передачи гипертекста прямиком на мой блог. Необязательный параметр title выводит подсказку при наведении, а атрибут target=”_blank” откроет новое окно или вкладку браузера и загрузит указанный сайт туда. Более подробно будем знакомиться со ссылками по мере изучения материала.

Совет: Не все контейнеры являются блоками! Так span и a контейнеры, но блоками станут, если указать свойство display:block; в таблицах стилей. Именно тогда контейнер становится неким кирпичиком и рассматривается как блок браузером.

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

Две крайние правые ячейки имеют в себе по картинке. Стандартный размер такой таблетки 88x31px. Многие кнопки на сайт как правило таких величин. С одинарным тегом img мы вскользь знакомились, и теперь не будем на нем останавливаться. Тут нужно знать, что путь до картинки указывается в атрибуте src, а описание картинки alt служит для пользователей с отключенной графикой в навигаторе и для поисковой оптимизации. Не забывайте оба атрибута указывать.

Во второй строке у нас всего одна ячейка, так как она объединяет две ячейки справа, а первые ячейки заняли верхние столбцы, берущие начало в первой строке.

Теперь разберем css. Обратимся к таблице по идентификатору и назначим центрирование для всего текста свойством text-align. Так же зададим цвет текста и параметры шрифта. Это вы уже знаете, я полагаю, из прошлых занятий.

Подробнее остановимся на настройках ссылок. Можно было задать их для всего документа, но это мы сделаем потом в следующих темах. По умолчанию цвет всех ссылок синий, имеется нижнее подчеркивание (text-decoration:underline;), после перехода ссылка будет фиолетовой, а при наведении красной.

Для всех ссылок данной таблицы я убрал подчеркивание и определил их красным цветом. А вот интересная настройка a:hover задает изменение ссылки при наведении курсора. Я присвоил здесь подчеркивание и жирность. Посмотрите, как меняется ссылка. Это можно очень гибко использовать. Я покажу как, но потом.

Напоследок, я бы убрал рамку (border) для всей таблицы, уж она совсем тут не к месту. Для этого измените строку таблицы в индексном файле:

<table id="tabfoot" width="100%" cellpadding="10px" cellspacing="0" border="0">

Вот и опять статья получилась длинной, и я уже устал ее сочинять. Давайте еще отложим завершение цикла «Основы блочной верстки» еще на несколько статей. Я не знаю на сколько, так что удачи. Никто не обещал, что постигать верстку такими ударными темпами легко, но вы справитесь, а если что – я всегда на связи и помогу, когда надо. Обращайтесь.

Добавить комментарий

Защитный код

Введите код с картинки в текстовое поле