Кухня HTML-верстальщика
| Начало |
| Глава 1 |
| Глава 2 |
| Глава 3 |
| Глава 4 |
| Глава 5 |
| Глава 6 |
| Глава 7 |
| Глава 8 |
| Глава 9 |
| Глава 10 |
| Глава 11 |
| Глава 12 |
| Глава 13 |
| Глава 14 |
8. Создание горизонтальных линийГоризонтальные линии, или, на типографский манер, горизонтальные линейки хорошо использовать для отделения одного блока текста от другого. Небольшой по размеру текст, сверху и снизу которого располагаются горизонтальные линии привлекает больше, чем обычно, внимание читателя. Пример создания горизонтальных линий с помощью тега HR Такая линия, однако, может иметь отличия в разных браузерах. Пример 8.1. Создание обычных линий с помощью тега HR
<hr> По умолчанию линия отрисовывается трехмерная, что не всегда вяжется с дизайном сайта. Поэтому, если требуется сделать сплошную линию, следует добавить параметр noshade тега HR. Пример 8.2. Создание сплошной линий
<hr noshade size="2" width="300"> Параметр size определяет толщину линии, а width ее длину в пикселах или процентах. Такая линия всегда размещается по центру экрана, если ее выравнивание специально не задается. В качестве горизонтальных линий также можно использовать любое подходящее изображение, надо лишь растянуть его до нужной ширины. Ниже, в качестве рисунка, использовалась нарисованная буква Н. 
Рис. 8.1. Горизонтальная линия из рисунка Пример 8.3. Создание горизонтальных линий из рисунка
<img src=line.gif width=100% height=10><br> или
<img src=line.gif width=400 height=10><br> При таком растягивании рисунка в нем однозначно появляются искажения. Следовательно, чем абстрактней рисунок, тем лучше; чтобы никто ничего не понял, что на нем изображено. Что делать, если нужна не сплошная линия, а, например, пунктирная? Для этого следует воспользоваться таблицей. Создаем таблицу состоящую из одной ячейки и вставляем в нее фоновый рисунок в виде пунктирной линии. Хитрость состоит в том, чтобы в ячейке кроме фона был еще один рисунок, иначе в браузерере Netscape мы просто ничего не увидим. В качестве такого рисунка традиционно используется прозрачный GIF размером 1 на 1 пиксел. Пример 8.4. Создание горизонтальных линий с помощью таблиц
<table border="0" background="dot.gif" width="100%" height="2"
cellspacing="0" cellpadding="0">
<tr>
<td> Файл dot.gif заранее готовится в графическом редакторе и может представлять, например, вот такой вот рисунок Еще один прием создания линий основан на использовании стилей. Вместо таблицы, описанной в предыдущем примере, используется тег DIV: <div class="dot">& nbsp;</dot> Сам класс dot описан в таблице стилей следующим образом: .dot { width: 100%; background: URL(dot.gif) repeat-x; } где URL определяет имя рисунка, а width - ширину линии. Можно в описание класса заложить еще и вертикальные отступы, что тоже очень удобно: margin-top: 10px; margin-bottom: 10px; Пример 8.5. Создание горизонтальных линий с помощью стилей
<html> Для создания линии с помощью стилей можно также воспользоваться параметром border-bottom. Возможные виды линий показаны на рис. 3.6. Пример 8.6. Создание горизонтальных линий с помощью стилей
<html> В примере создается пунктирная линия красного цвета толщиной один пиксел. |
Кухня HTML-верстальщика © Copyright 2008г.
графика, хтмл, для, начинающий, начинающих, чайников, новичков, просто, основа, основы, графика, страница, домашний, домашняя, сайт, новый, новичок, html, обучение, учеба, пример, веб, мастер, веб-мастер, дизайн, веб-дизайн, вебдизайн, дезайн, веб-дезайн, вебдезайн, дезайнер, дизайнер, ступени, тэги, тэг, теги, тег, аттрибут, атрибуты, парамет, design, web, help, помощь, icq, e-mail, guest, book, guestbook, гостевая, книга, форум, аська, контакт, ссылка, link, links, banner, обмен, баннер, баннерами, банер, baner, друзья, friends, почитать, написать, вопросы, вопрос, ответ, проект, ступени, словарь