Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Рецепты HTML # 116
| Информационный Канал Subscribe.Ru |
| | Руководство
| Дизайн и юзабилити
| Графика
| Создание и раскрутка сайта | | Справочная информация | Инструментарий | Шаблоны | Все статьи | Форум | |
Добрый день.
Сайт htmlbook.ru совместно с компанией RunWeb только до 1 февраля проводит акцию для читателей сайта и его рассылки.Зайдите на сайт RunWeb.ru, укажите в комментарии "от сайта htmlbook.ru" и получите 20% скидки на услуги хостинга.
Возможности радуют — здесь и PHP4, mySQL, SSI, Perl, C, самостоятельная настройка параметров, неограниченный трафик и многое другое. Сам бы выбрал, если бы нуждался в хостинге, так что рекомендую.
На сайте обновились две статьи посвященные JavaScript.
Обращение к данным формы
Для любителей фреймов добавлен способ обращения к форме из разных фреймов.
Отправка формы на сервер
Статья переработана, исправлены недочеты и ошибки, которые в ней содержались.
Также частично изменилась главная страница сайта. Добавлены три новых блока:
10 последних статей, новые сообщения форума и совет дня, где приводятся небольшие
рекомендации.
Сегодня публикуется новая статья "Создание вкладок". Адрес статьи на сайте — www.htmlbook.ru/content/?id=198.
Создание вкладок
Вкладки один из элементов навигации, любимый как пользователями сайта за их наглядность и очевидность действия, так и дизайнерами за то, что вкладкам можно придавать любой подходящий вид, без потери их функциональности. Вдобавок, этот элемент хорошо выделяется на веб-странице и сразу становится понятно, что вкладки нужны для перехода между разделами сайта. На рис. 1 показан один из возможных вариантов создания вкладок.
Рис. 1 Вариант создания и размещения вкладок
Создать графические вкладки можно в любом подходящем графическом редакторе. Ссылки делаются либо с помощью карт-изображений, либо разрезанием одной картинки на фрагменты. Мы, однако, сделаем вкладки исключительно простыми средствами, через стили, например, как показано на рис. 2.
| Чебурашка | Крокодил Гена | Шапокляк | Крыса Лариса |
Рис. 2. Пример вкладок, созданных с помощью стилей
Для создания вкладок потребуется таблица из шести ячеек. Четыре из них образуют сами вкладки, а две крайние ячейки нужны больше для красоты, они формируют горизонтальную линию и служат для отступа от краев.
Потребуется всего два селектора, один изменяет стиль текущей вкладки, назовем его open, а второй селектор с именем close будет управлять видом неактивной вкладки. Рамка создается с помощью атрибута border, он позволяет одновременно задать стиль рамки, ее толщину и цвет. Чтобы не образовывалась двойная рамка в местах состыковки ячеек, следует границу справа убрать. Для этого используется параметр border-right: none. Для текущей вкладки (селектор open) следует спрятать также и нижнюю границу. Стиль самой правой и левой ячеек можно описать прямо в теге TD, но при частом использовании вкладок на сайте, лучше создать отдельный класс.
Пример 1. Использование таблицы<head>
<style>
.open { border: solid 1px black; border-right: none; border-bottom: none; text-align: center; font-weight: bold;}
.close { border: solid 1px black; border-right: none; text-align: center; background: #CFD6D4; }
</style>
</head>
<body>
<table width=100% border=0 cellspacing=0 cellpadding=4>
<tr>
<td width=10 align=center style=""border-bottom:" solid 1px black"> </td>
<td width=25% class=open>Чебурашка</td>
<td width=25% class=close>Крокодил Гена</td>
<td width=25% class=close>Шапокляк</td>
<td width=25% class=close>Крыса Лариса</td>
<td width=10 align=center style=""border-left:" solid 1px black; border-bottom:
solid 1px black"> </td>
</tr>
</table>
</body>
</html>
Использование таблицы имеет несколько преимуществ. При изменении размеров окна, таблица подстраивается под его ширину, поэтому вкладки всегда будут видны и размещаться строго по горизонтали. Впрочем, можно отказаться от таблицы и воспользоваться тегами SPAN или DIV. Но в этом случае возможно появление искажений при уменьшении окна браузера. В примере 2 применяется тег SPAN, с помощью которого создаются вкладки. Чтобы не возникало смещения блоков относительно друг друга, лучше писать код одной строкой.
Пример 2. Использование тега SPAN.open { border: solid 1px black; border-right: none; border-bottom: solid 1px white; text-align: center; font-weight: bold; width: 24%; padding: 4px}
.close { border: solid 1px black; border-right: none; text-align: center; background: #CFD6D4; width: 24%; padding: 4px }
</style>
<span style=""border-bottom:" solid 1px black; width: 10px"> </span><span class=open>Чебурашка</span><span class=close>Крокодил Гена</span><span class=close>Шапокляк</span><span class=close>Крыса Лариса</span><span style=""border-left:" solid 1px black; border-bottom: solid 1px black; width: 10px; padding: 4px"> </span>
Применяя разные рамки и цвет заливки можно создать вкладки самого разнообразного вида. На рис. 3 показан пример инвертирования вкладок, в этом случае активная вкладка выделяется цветом, а остальные — нет.
| Чебурашка | Крокодил Гена | Шапокляк | Крыса Лариса | ||
Рис. 3. Пример инвертированных вкладок
В примере 3 приведен код создания подобных вкладок. В данном случае опять применяется таблица.
Пример 3. Создание вкладок через таблицу<head>
<style>
.open { border: solid 1px black; border-right: none; border-bottom: none; font-weight: bold; text-align: center; background: #CFD6D4; padding: 4px }
.close { border: solid 1px black; border-right: none; text-align: center; padding: 4px}
</style>
</head>
<body>
<table width=100% border=0 cellspacing=0 cellpadding=4>
<tr>
<td width=10 align=center style=""border-bottom:" solid 1px black"> </td>
<td width=25% class=open>Чебурашка</td>
<td width=25% class=close>Крокодил Гена</td>
<td width=25% class=close>Шапокляк</td>
<td width=25% class=close>Крыса Лариса</td>
<td width=10 align=center style=""border-left:" solid 1px black; border-bottom:
solid 1px black"> </td>
</tr>
<tr>
<td bgcolor="#CFD6D4" colspan="6" height=10></td>
</tr>
</table>
</body>
</html>
Таблица имеет почти тот же вид, что и в примере 1, добавляется только новая строка, которая формирует серую полосу. Ее ширина и цвет меняется через свойства ячейки height и bgcolor.
Материалы данного сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.
| http://subscribe.ru/
E-mail: ask@subscribe.ru |
Отписаться
Убрать рекламу |
| В избранное | ||
