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

Начало

Глава 1

Глава 2

Глава 3

Глава 4

Глава 5

Глава 6

Глава 7

Глава 8

Глава 9

Глава 10

Глава 11

Глава 12

Глава 13

Глава 14

Добавить в избранное || Создание подрисуночной подписи || Начало || Отступ первой строки

12. Создание буквицы

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

Пример 12.1. Создание буквицы с помощью рисунка

<img src="n.gif" width="50" height="50" align="left" vspace="2"
hspace="2">необходимо, манипулируя полученными предметами материального мира и
фрагментами информационного поля, эмпирическим путем достигнуть
логического завершения конкурса.

Отступ от буквицы до текста задается параметрами vspace – по вертикали и hspace – по горизонтали.

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

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

Рис. 12. 1. Буквица в тексте

Пример 12.2. Буквица в виде текста

<table align="left" border="0" cellspacing="0" celpadding="0">
<tr>
<td><font size="7">"Д</font></td>
</tr>
</table>
имон, у тебя есть что-нибудь похожее на транплюкатор?". "Что значит похожее?!" - восклицает в ответ Дима -
"У меня есть самый настоящий транплюкатор!". С этими словами лезет на балкон и достает оттуда такую штуку, при виде которой сразу понимаешь - Он.

При желании можно изменить цвет фона и рамки параметрами bgcolor и bordercolor. Отступы от буквицы до текста управляются значением cellpaddingили cellspacing. Для изменения размера и шрифта символа также используются стили. В этом случае код HTML будет незначительно отличаться.

Пример 12.3. Использование стилей

<html>
<head>
<style type="text/css">
.letter { font-family: Arial;font-size: 24pt; color: navy }
</style>
</head>
<body>
<table align="left" border="0" cellspacing="0" celpadding="0">
<tr>
<td><span class="letter">"Д</span></td>
</tr>
</table>
имон, у тебя есть что-нибудь похожее на транплюкатор?". "Что
значит похожее?!" - восклицает в ответ Дима - "У меня есть самый
настоящий транплюкатор!". С этими словами лезет на балкон и достает
оттуда такую штуку, при виде которой сразу понимаешь - Он.
</body>
</html>

Ничто не мешает расположить буквицу слева, четко отделив ее от основного текста. Таким образом можно добиться простого выразительного эффекта (рис. 12.2)

Рис. 12.2. Буквица на поле

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

Пример 12.4. Буквица на поле

<table width="100%" border="0">
<tr>
<td valign="top">
<font size="7">В</font>
или
<span class="letter">В</span>
или
<img src="v.gif" width="50" height="50">
</td>
<td valign="top">ыдалась у меня свободная минутка, открыл я любимый
LINES , сижу, строю пятерки и тихо наслаждаюсь. Заходит девочка и
начинает меня строить: дескать, LINES - это игра детсадовская, и
т.п. "А ты во что играешь?", - спрашиваю очаровательную девочку.
"Конечно, в Quake", - говорит она, - "там такое мясо"!
</td>
</tr>
</table>

Обратите внимание, содержимое обоих ячеек выравнивается по верхнему краю параметром valign="top".

Добавить в избранное || Создание подрисуночной подписи || Начало || Отступ первой строки

top

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

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