Кухня HTML-верстальщика

    Начало
    Глава 1
    Глава 2
    Глава 3
    Глава 4
    Глава 5
    Глава 6
    Глава 7
    Глава 8
    Глава 9
    Глава 10
    Глава 11
    Глава 12
    Глава 13
    Глава 14

7. Вертикальные линии

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

Пример 7.1. Линия сделанная с помощью рисунка 1 на 1 пиксел

<img src="red1x1.gif" width="1" height="100" hspace="10"
align="left">

или для указания относительной высоты можно указать ее в процентах

<img src="red1x1.gif" width="1" height="50%" hspace="10" align="left">

В примере, файл с именем red1x1.gif представляет собой рисунок, состоящий из одного пиксела красного цвета.
Для изменения цвета такой линии придется делать новый рисунок в каком-нибудь графическом редакторе. Кроме того, высота линии фиксирована и ее сложно привязать к тексту, чтобы она изменялась вместе с ним. В этом случае, на помощь нам придет таблица. Создаем таблицу, одна из ячеек которой имеет ширину 1-2 пиксела. Параметры cellpadding и border должны быть равны нулю, а cellspacing определяет расстояние от текста до линии. А затем в этой ячейке указываем фон нужного цвета: <td width="1" bgcolor="#ff0000">
Чтобы такая линия была видна в браузере Netscape, в ячейку нужно что-нибудь поместить. Неразделяемый пробел & nbsp; для этой цели не очень годится, он может сделать линию слишком толстой, что нам не нужно. Самое идеальное – прозрачный рисунок размером 1 на 1 пиксел (в примере 7.2 он именуется spacer.gif).

Пример 7.2. Линия созданная с помощью таблицы

<table width="600" cellpadding="0" cellspacing="12" border="0"
align="center">
<tr>
<td width="4" bgcolor="#990000"><img src="spacer.gif" width="4"
height="1"></td>
<td>Каждый из рефлексирующих субъектов виртуального мира может
находиться в двух основных состояниях: стационарном и мобильном, при
котором они или сводят передвижение в трехмерном Евклидовом
пространстве с декартовой системой координат к абстрактному
минимуму, или ограничиваются формальными перемещениями массы в
некоторой части пространственного континуума.</td>
</tr>
</table>

Линия созданная с помощью таблицы, работа для мужчин

Рис. 7.1. Результат выполнения примера 7.2.

Этим же самым способом можно воспользоваться для создания декоративных линий, например, как на рисунке 7.2 или 7.3.

Декоративные вертикальные линии с помощью таблицы, работа для студентов

Рис. 7.2.

Создание линий с помощью таблицы, работа в свободное время

Рис. 7.3.

Для этого в ячейку таблицы помещаем фоновый рисунок с помощью параметра background тега TD.

Пример 7.3. Декоративные вертикальные линии с помощью таблицы

<table width="600" cellpadding="0" cellspacing="12" border="0"
align="center">
<tr>
<td width="4" background="line.gif"><img src="spacer.gif" width="4"
height="1"></td>
<td>Каждый рефлексирующий субъект обладает набором знаний и имеет
позитивные возможности оказания влияния на информационное поле для
взаимодействия с субъектами виртуального мира, но в то же время
наделен плюралистическим мировоззрением, позволяющим ему при
необходимости достижения или сохранения собственных материальных
благ пренебрегать законами логики и здравого смысла.</td>
</tr>
</table>

Файл line.gif представляет собой изображение линии, как, например, показанное на рис. 2.5.

top

Rambler's Top100

Кухня HTML-верстальщика © Copyright 2008г.

графика, хтмл, для, начинающий, начинающих, чайников, новичков, просто, основа, основы, графика, страница, домашний, домашняя, сайт, новый, новичок, html, обучение, учеба, пример, веб, мастер, веб-мастер, дизайн, веб-дизайн, вебдизайн, дезайн, веб-дезайн, вебдезайн, дезайнер, дизайнер, ступени, тэги, тэг, теги, тег, аттрибут, атрибуты, парамет, design, web, help, помощь, icq, e-mail, guest, book, guestbook, гостевая, книга, форум, аська, контакт, ссылка, link, links, banner, обмен, баннер, баннерами, банер, baner, друзья, friends, почитать, написать, вопросы, вопрос, ответ, проект, ступени, словарь

Используются технологии uCoz