Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
| ← Декабрь 2004 → | ||||||
|
2
|
3
|
4
|
5
|
|||
|---|---|---|---|---|---|---|
|
6
|
7
|
8
|
9
|
10
|
11
|
12
|
|
13
|
14
|
15
|
16
|
17
|
19
|
|
|
20
|
21
|
22
|
24
|
25
|
26
|
|
|
28
|
29
|
31
|
||||
Статистика
-26 за неделю
Рецепты HTML # 141
| Информационный Канал Subscribe.Ru |
  |
 Помощь по сайту |
   |
|
 |
 |
Добрый день.
Моя книга «Ускорение работы сайта» уже появилась в продаже во всех основных интернет-магазинах.
Книга
хороша тем, что описывает, в какой последовательности происходит загрузка
веб-страниц и как это использовать в своих целях. Подробно рассказывается,
как применять разные схемы верстки, в том числе с помощью слоев, таблиц и
фреймов, так, чтобы отображение содержимого происходило максимально быстро.
Разумеется, не обойдена и тема графики, а также приемы и хитрости с ней связанные
— разрезание изображений, масштабирование, форматы, предварительная
загрузка, ролловеры и многое другое.
Даже если вы никогда не задумывались о том, как сделать ваш сайт быстрее, примите во внимание следующее. Оптимизация сайта для быстрой загрузки - это не просто один из этапов разработки сайта. Все взаимосвязано. Это подход, при котором вы делаете правильный и эффективный сайт:
- верстка с помощью стилей и слоев расширяет возможности оформления веб-страниц;
- использование стилей сокращает объем кода, вдобавок код получается структурированный, что весьма любят поисковые системы;
- оптимизация графики позволяет получить качественные изображения и файлы небольшого объема;
- пользователям нравятся быстро загружаемые страницы, и отмечают этот момент наряду с другими качествами хорошего сайта.
Для тех, кто хотел бы иметь у себя offline-версию сайта htmlbook.ru, приятная новость. В рамках приложения «Мир ПК-диск» в декабрьском номере «Мира ПК» на диске расположена локальная версия сайта. Журнал уже поступил в продажу. Версия обрезанная, но все равно содержит более 200 статей.
Сегодня новая статья связанная со ссылками. Адрес статьи на сайте —
www.htmlbook.ru/content/230.html
Декоративное подчеркивание у ссылок
Можно создать свой собственный вид подчеркивания ссылок, используя для этого графическое изображение. Рисунок подойдет не всякий, он должен обладать двумя качествами:
- картинка должна быть бесшовной, иными словами, состыковываться сама с собой по горизонтали, это необходимо для получения плавной неразрывной линии;
- высота линии не должна превышать 3-5 пикселов, все остальное будет «обрезано».
Высоту линии можно сделать и больше трех пикселов, если добавить к селектору A параметр padding.
На рис. 1 показно исходное изображение, которое годится для создания подчеркивания, а также его увеличенный вариант.
Рис. 1. Картинка для создания подчеркивания у ссылки
После создания рисунка в графическом редакторе, следует определить стиль, как показано в примере 1. Основным элементом для установки линии выступает стилевой параметр background. Это универсальный атрибут, который определяет характеристики фонового изображения, в частности, путь к графическому файл, а также смещение фона относительно левого верхнего угла элемента. В данном случае требуется только сдвинуть фоновый рисунок вниз на высоту текста, для этого используется относительная единица em, равная высоте шрифта элемента. Кроме того, чтобы рисунок повторялся только по горизонтали, добавляем к параметру background аргумент repeat-x.
Пример 1. Добавление графической линии к ссылкам<head>
<style type="text/css">
A { text-decoration: none; padding: 3px }
A:hover { background: url(arrow.gif) 0 1.1em repeat-x }
</style>
</head>
<body>
<p><a href=link1.html>Ссылка 1</a>
<p><a href=link2.html>Ссылка 2</a>
<p><a href=link3.html>Ссылка 3</a>
</body>
</html>
Путь к изображению указывается с помощью ключевого слова url, после которого в скобках пишется адрес рисунка. Число 0 в примере означает смещение изображения по горизонтали, а 1.1em — вниз по вертикали. Вы можете незначительно менять это число в ту или иную сторону, подбирая наилучший вариант в зависимости от используемого рисунка. Окончательный результат использования графической линии в ссылках показан ниже.
| Ссылка 1 | Ссылка 2 | Ссылка 3 |
В примере у ссылок убирается подчеркивание (text-decoration: none), чтобы оно не мешало восприятию. К тому же классическая линия под текстом плохо сочетается с линией декоративной. Значение padding для ссылок не поддерживается в браузере Internet Explorer 5, поскольку он содержит ошибку при работе со встроенными элементами.
Интересный эффект можно получить, если использовать анимированное изображение. Например, в качестве подчеркивания добавить статичный рисунок, а при наведении на ссылку он будет меняться на другой. Для этого уже потребуется две картинки, первая показана на рис. 1, а вторая, статичная приведена на рис. 2.
Рис. 2. Картинка для анимации линии подчеркивания
После чего добавление линии происходит, как уже было описано в примере 1, за исключением того, что фоновый рисунок устанавливается для селектора A и псевдокласса hover (пример 2).
Пример 2. Добавление анимированной линии к ссылкам<head>
<style type="text/css">
A { text-decoration: none; padding: 3px; background: url(arrow1.gif) 0 1.1em repeat-x }
A:hover { background: url(arrow2.gif) 0 1.1em repeat-x }
</style>
</head>
<body>
<p><a href=link1.html>Ссылка 1</a>
<p><a href=link2.html>Ссылка 2</a>
<p><a href=link3.html>Ссылка 3</a>
</body>
</html>
Полученный результат показан ниже.
| Ссылка 1 | Ссылка 2 | Ссылка 3 |
Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.
| http://subscribe.ru/
http://subscribe.ru/feedback/ |
Подписан адрес: Код этой рассылки: inet.webbuild.htmlbook |
Отписаться |
| В избранное | ||
