Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

  Все выпуски  

Рецепты HTML # 142


Информационный Канал Subscribe.Ru

htmlbook.ru  
Для тех, кто делает сайты Помощь по сайту
СтатьиКнигиФорум

Добрый день.

К новому году сайт htmlbook.ru совместно с компанией PlusWeb делает своим читателям подарок. Те, кто выберет хостинг PlusWeb, получит 20-процентную скидку на услуги хостинга.

Перед тем, как заказать хостинг, заполните небольшую форму на странице htmlbook.ru/hosting.php, где укажите желаемое имя домена и подходящий тарифный план.

Вот что компания PlusWeb.ru говорит о себе.

Центр Хостинга PlusWeb.ru — это российская компания, предоставляющая услуги интернет-хостинга, разработки и поддержки сайтов, а также разработки программного обеспечения.

Наш опыт обслуживания клиентов самого разного профиля — от крупных корпоративных и банковских структур до частных владельцев интернет-ресурсов позволяет нам в оптимальные сроки разрабатывать решения для самых различных проектов.

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

PlusWeb.ru — это лучшие в России условия размещения виртуальных серверов
в интернете. К вашим услугам: гибкие тарифные планы, возможность формирования
индивидуальных тарифных планов, мощная распределенная система серверов,
удобная панель управления, бесплатные консультации технических специалистов.

Если перед вами стоит задача размещения проекта с высокими требованиями
к процессорным ресурсам и к трафику, мы предлагаем аренду серверов и
размещение ваших серверов в Дата-Центре.

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


Информация для всех, кто желает приобрести интересную и полезную книгу. Книга «Ускорение работы сайта» пока доступна только для жителей Санкт-Петербурга и Москвы. В остальные города книга поступит в продажу в январе следующего года. А пока купить можно в любом из трех интернет-магазине на выбор.

 

Эта книга будет полезна всем, кто в той или иной мере интересуется созданием сайтов. Предполагается, что читатель знаком с основами языка HTML, поэтому никакого описания тегов и их параметров не приводится. Тем не менее, если указан листинг примера, то даются необходимые комментарии по используемым параметрам кода.

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

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

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


На мой вопрос, какие еще описания тегов вас интересуют, которых нет на сайте, никто не откликнулся. Посему, будем считать, что необходимые и достаточные теги уже представлены. Теперь вновь возвращаемся к CSS и доделываем оставшиеся свойства. Добавлено два параметра, имеющих отношение к рамкам, в сводной таблице указано, какие стили и в каких браузерах поддерживаются, а также другие особенности отображения границ.

border-style

Устанавливает стиль рамки вокруг элемента. Браузер Netscape 4 понимает только одно значение, которое определяет стиль сразу для всех границ. Для остальных браузеров допустимо устанавливать индивидуальные стили для разных сторон элемента.

border-width

Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа аргументов.


На сайте добавлены две новые статьи. В первую очередь это интересная статья Евгения Неверова о стилях и печати.

Печатаем по-умному или ещё один способ защиты информации

В статье описано, как с помощью CSS сделать так, чтобы на экран выводить одну страницу, а при печати этого документа результат был несколько иным.

Вторая статья посвящена выделению строк таблицы при наведении на них курсора мыши с помощью стилей и скриптов. Адрес статьи на сайте — htmlbook.ru/content/232.html

 

Выделение строк таблицы курсором мыши

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

  2003 2004 2005
Нефть
43 51 79
Золото 29 34 48
Дерево 38 57 36


Создание подсветки происходит с помощью скрипта и CSS. Вначале описываем стиль таблицы. Чтобы применить эффект только для определенных таблиц, им лучше присвоить свой собственный класс. Это делать не обязательно в том случае, если на веб-странице все таблицы предстоит оформить одинаково.

TABLE.ruler {
width: 100%;
padding: 4px;
border: 1px solid navy
}

Для выделенных строк таблицы тоже необходимо указать стиль, определив в нем цвет фона и текста. Имя класса имеет значение, поскольку на него в последующем придется ссылаться.

TR.line {
background: #fc0;
color: #333
}

И, наконец, чтобы не менялся цвет заголовка аналогично другим строкам, ему следует присвоить свой собственный класс.

.header {
background: navy;
color: white
}

Самой таблице требуется установить стилевой класс ruler, как он указан в стиле, а также присвоить заголовку таблицы класс header (пример 1). В остальном готовить таблицу больше не требуется и никаких других ограничений на ее параметры не накладывается.

Пример 1. Код таблицы
<table class=ruler>
<tr class=header>
<th>&nbsp;</th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
</tr>
<tr>
<td><div id=tr1>Нефть</div></td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td>Золото</td>
<td>29</td>
<td>34</td>
<td>48</td>
</tr>
<tr>
<td>Дерево</td>
<td>38</td>
<td>57</td>
<td>36</td>
</tr>
</table>

Теперь переходим к скрипту. Принцип его работы достаточно прост. Вначале просматриваем все таблицы, у которых установлен стиль с именем ruler. Таким образом, остальные таблицы будут отображаться как обычно, без всякой подсветки. Для таблиц с классом ruler вводим цикл по всем строкам таблицы кроме строки заголовка. Если для строки срабатывает событие onMouseOver, отвечающее за наведение курсора мыши, меняем класс строки (тег TR) на line. Событие onMouseOut, которое выполняется в случае вывода курсора из строки, снова меняет класс на предыдущий (пример 2).

Пример 2. Функция для изменения стиля строк таблицы
function tableRuler() {

// Проверяем, поддерживает ли текущий браузер DOM

if (document.getElementById) {
tables = document.getElementsByTagName('table')

// Пробегаемся по всем таблицам на странице

for (i=0;i<tables.length;i++) {

// Работаем только с теми таблицами, у которых установлен класс с именем ruler

if (tables[i].className == 'ruler') {

trs = tables[i].getElementsByTagName('tr')

// Пробегаемся по всем строкам выбранной таблицы

for (j=0;j<trs.length;j++) {

// Для заголовка таблицы цвет не меняется

if (trs[j].className != 'header') {

trs[j].onMouseOver = function() { this.className = 'line'; return false }
trs[j].onMousOout = function() { this.className = ''; return false }
}
}
}
}
}
}

Остается вызвать написанную функцию через событие onLoad в теге BODY и свести воедино код стиля, таблицы и скрипта, как показано в примере 3.

Пример 3. Окончательный код для создания подсветки строк
<html>
<head>
<style type="text/css">
TABLE.ruler {
width: 100%; padding: 4px; border: 1px solid navy
}

TR.line {
background: #fc0; color: #333
}

.header {
background: navy; color: white
}
</style>

<script language="JavaScript">

function tableRuler() {

if (document.getElementById) {
tables = document.getElementsByTagName('table')

for (i=0;i<tables.length;i++) {

if (tables[i].className == 'ruler') {

trs = tables[i].getElementsByTagName('tr')

for (j=0;j<trs.length;j++) {

if (trs[j].className != 'header') {

trs[j].onmouseover = function() { this.className = 'line'; return false }
trs[j].onmouseout = function() { this.className = ''; return false }
} } } } }
}

</script>
</head>

<body onLoad="tableRuler()">

<table class=ruler>
<tr class=header>
<th>&nbsp;</th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
</tr>
<tr>
<td><div id=tr1>Нефть</div></td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td>Золото</td>
<td>29</td>
<td>34</td>
<td>48</td>
</tr>
<tr>
<td>Дерево</td>
<td>38</td>
<td>57</td>
<td>36</td>
</tr>
</table>

</body>
</html>


Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.


http://subscribe.ru/
http://subscribe.ru/feedback/
Подписан адрес:
Код этой рассылки: inet.webbuild.htmlbook
Отписаться

В избранное