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

О проекте

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

Реклама



webmarket / Уроки

HTML верстка. Урок 4: Ячейки News и Text

Посмотрите на рисунок: я специально убрала содержимое в ячейках News и Text, т.к. заполнять их мы будем позже. Сейчас сделаем "каркас" ячеек.

Макет создан таким образом, чтобы на странице была иллюзия объема: ячейки Search, Topmenu отбрасывают тень вниз, а News, в свою очередь, затеняет Text. При этом на границе всех четырех ячеек есть маленький, но важный для нас участок пересечения теней. Он должен отображаться в браузере точно так же, как на макете. Есть несколько как минимум два варианта верстки в этом случае:

1) Сделать тени в виде полупрозрачных изображений, растянутых по всей ширине ячеек News и Text, а также по всей высоте ячейки Text:

Однако чтобы реализовать такое решение, придется потрудиться. Единственный формат для веб-изображений, который поддерживает градиентную прозрачность - это .png, но он некорректно отображается в Internet Explorer. С другой стороны, для IE есть фильтр alpha, который придает изображению прозрачность, но не работает в Opera и Firefox. Можно совместить оба способа: к png-изображению добавить фильтр для IE.

<img style="" src="pic1.png" alt="" /><!-- вертикальный градиент -->
<img style="" src="pic2.png" alt="" /><!-- горизонтальный градиент -->

Но самое сложное - это наложить друг на друга 2 изображения (pic1.png и pic2.png), да еще и поверх содержимого ячейки Text. Можно попытаться сделать это с помощью слоев тегом <div>).

<div style="width: 100%;"><img width="100%" src="pic1.png" alt="" /></div>
<div style="height: 100%;"><img height="100%" src="pic2.png" alt="" /></div>

Однако в Fifefox не растягивается на 100%-ю высоту, а нам это необходимо для отображения вертикальной тени. Если Вам интересно, можете позже попробовать самостоятельно решить эту задачку, а пока рассмотрим второй способ.

2) Сделать в нашей главной таблице еще одну строку с двумя ячейками (они будут располагаться между строками Search&Topmenu и News&Text). Назовем их ShadowLeft и ShadowRight. В них не будет никакой прозрачности - только градиент от серого к белому в качестве фона. В месте пересечения теней будут вставлены соответствующие изображения.

Фоном ячейки News будет изображение вертикальной полосы, а фоном Text - градиент от серого к белому (без прозрачности).

index.html

    <tr>
        <td class="shadowleft"><img width="6" height="5" border="0" src="shadowleftpic.jpg" alt="" /></td>
        <td class="shadowright"><img width="7" height="5" border="0" src="shadowrightpic.jpg" alt="" /></td>
    </tr>
    <tr>
        <td class="news"></td>
        <td class="text"></td>
    </tr>

style.css

td.shadowleft, td.shadowright {
background-image: url(shadow.jpg);
height: 5px;}

td.shadowleft {
text-align: right;}

td.news {
background-image: url(news_bg.jpg);
background-repeat: repeat-y; 
background-position: right;}

td.text {background-image: url(text_bg.jpg); 
background-repeat: repeat-y;}

Каркас для ячеек готов. Посмотрите 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