создание и продвижение сайтов

О проекте

Мы рады приветствовать на нашем портале pastukhova.com! Наша компания предлагает комплексные услуги по созданию интернет-сайтов с уникальным дизайном и интерфейсом. Удобные и изящные сайты-визитки и мощный многофункциональные порталы – мы можем всё! На нашем сайте представлены бесплатные готовые шаблоны сайтов, полезные статьи и советы из области сайтостроения, а также последние новости IT-индустрии и интернет-технологий. Веб-дизайн – это целое искусство, в котором есть своим мастера, ценители и бездарности. Последних лучше обходить стороной.

Реклама



webmarket / Уроки

HTML верстка. Урок 5: Ячейки Copyright и Bottom

Еще раз вспомним наш макет. Две нижние ячейки довольно простые для верстки, но и здесь есть свои тонкости.

Сначала сверстаем левую ячейку.

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

index.html

<td class="copyright">
<table class="main">
    <tbody>
    <tr>
        <td class="cprghtitem">Copyright © RealErtateCompany.com</td>
    </tr>
    </tbody>
</table>
</td>

style.css

td.copyright {
padding-right: 5px;
height: 32px;}

td.cprghtitem {
border-top: 1px solid #cacaca;
background-color: #f5f5f5;
font-size: 10px;
color: #656565;
vertical-align: middle;
text-align: center;}

Теперь правая ячейка (BottomMenu).

Для нее мы сделаем повторяющийся оранжевый фон. Внутри BottomMenu будет вложенная таблица - как и в первом случае, всего с одной ячейкой. Это сделано для того, чтобы в этой ячейке указать в качестве фона изображение тени. Можно было бы поступить по-другому: сделать вложенную в BottomMenu таблицу с двумя ячейками. В левую вставить тень, в правую - собственно ссылки нижнего меню. Но html-код в этом случае был бы тяжелее.

В ячейку со ссылками - назовем ее BtmenuItem - вставим ссылки, разделенные изображение точек (dots2.gif). У dots2.gif я выставила величины:

  • hspace="12". Это отступ по горизонтали от картинки до текста. Он нужен, чтобы точки находились на расстоянии от букв (Как вариант можно было бы поставить пару пробелов:   ).
  • vspace="1". Отступ по вертикали - для того, чтобы точки были повыше, как бы посередине букв (по вертикали).

index.html

<td class="bottommenu">
<table class="main">
    <tbody>
    <tr>
        <td class="btmenuitem">
        <a href="" class="menu">Home</a>
        <img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" />
        <a href="" class="menu">News</a>
        <img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" />
        <a href="" class="menu">About Us</a>
        <img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" />
        <a href="" class="menu">Catalog</a>
        <img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" />
        <a href="" class="menu">Contacts</a>
        </td>
    </tr>
    </tbody>
</table>
</td>

style.css

td.bottommenu {
background-image: url(bottom_bg.jpg);
background-color: #ff8e51;
height: 32px;}

td.btmenuitem {
background-image: url(bottom_shadow.jpg);
background-repeat: no-repeat;
vertical-align: middle;
text-align: center;}

Ячейка с копирайтом и нижнее меню готовы. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили на этом уроке.


Урок 1 | Урок 2 | Урок 3 | Урок 4 | Урок 5 | Урок 6 | Урок 7 | На главную страницу

%LINKS%
email: info@pastukhova.com
 
copyright © 2003-2007 www.pastukhova.com
Rambler's Top100