В этом разделе мы поэтапно расскажем, как делался сайт "Созвездие Близнецов"


НазадСодержаниеВперёд

Урок 13. Масштабирующаяся рамка в обрамлении страницы, картинки, логотипа, таблиц, текста и пр.: общий принцип



Создание масштабирующихся рисунков для страницы сайта достаточно актуально. Ведь часто для того, чтобы украсить свои страницы, мы вставляем в них рисунки. Если рисунок не масштабируется, то на мониторах с разным разрешением он будет выглядеть непредсказуемо. К примеру, растягивать таблицу или выезжать за край монитора, от чего снизу появляется горизонтальная полоса прокрутки, что для вас, как для дизайнера - существенный минус.
О масштабирующихся логотипах поговорим в другой раз, начнём с более простого: масштабирующейся рамки. Допустим, мы хотим, чтобы по периметру нашей страницы стояла красивая декоративная рамочка. Что нужно делать?

1. Для начала нужно подобрать соответствующий рисунок, или нарисовать его. У такого рисунка будут некоторые закономерности. Рассмотрим на примере:







Детали 01, 02, 03, 04, 05, 06, 07, 08 - это и есть части для нашей рамочки. Их нужно нарисовать или вырезать из готового рисунка вот по какому принципу:
стороны "а" каждой детали должны совпадать по конфигурации со сторонами "а", а стороны "в" - соответственно, со сторонами "в". Если вы внимательно присмотритесь, то поймёте, почему это необходимо: этими сторонами наши детали будут соприкасаться друг с другом и рисунок на них должен точно совпадать.
Например, правая сторона "а" детали "02" - это зеркальное отражение левой стороны "а" той же детали "02".

Для создания таких рисунков есть много способов, всё это можно сделать в графической программе типа "фотошоп" или той, которая имеется у вас.

2. Теперь, когда у нас есть рисунок, надо прописать для него табличку такого вида:



То есть, нам нужна табличка на три строки, по три ячейки в каждой строке, с заданным размером ячеек под детали 01, 03, 06 и 08. А масштабирующиеся детали 02, 04, 05 и 07 нужно прописать как фоновое изображение в соответствующие ячейки. Пишем код этой таблицы:

<table align="center" width="95%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="21" height="22"> <img src="01.jpg" border="0"> </td>
<td style="background:url('02.jpg');"> </td>
<td width="21" height="22"> <img src="03.jpg" border="0"> </td>
</tr>
<tr>
<td style="background:url('04.jpg');" > </td>
<td align="center" body bgcolor=#000000>

<FONT COLOR=#ffffc9 STYLE="font-size:24pt"> СОДЕРЖИМОЕ ТАБЛИЦЫ (пустая ячейка в центре) </font>

</td>
<td style="background:url('05.jpg');" > </td>
</tr>
<tr> <td width="21" height="22"> <img src="06.jpg" border="0"> </td>
<td style="background:url('07.jpg');" > </td>
<td width="21" height="22"> <img src="08.jpg" border="0"> </td>
</tr>
</table>


width="21" height="22" - это высота и ширина наших деталей 01, 03, 06 и 08. <img src="06.jpg" border="0"> - адрес рисунка. Поскольку рисунок я в данном случае кладу в ту же папку, где будет лежать сама страница сайта, я прописываю только название рисунка - "06.jpg". Если же вы положите рисунки для таблички, к примеру, на фоторадикал, вам нужно будет ввести вместо "06.jpg" - полный url-адрес рисунка , который выглядит к примеру: http://fotoradical.ru/0123456.jpg

Детали, которые должны размножаться, вы прописываете в соответствующие ячейки как фоновое изображение: style="background:url('07.jpg');" и точно так же, если будете класть рисунки на фоторадикал, вместо 07.jpg - полный url-адрес рисунка.

В данном случае, поскольку мы взяли рисунок с преобладающим чёрным цветом, я поставила фон внутри центральной ячейки - чёрный: body bgcolor=#000000

Общая деталь для всей таблицы - cellpadding="0" cellspacing="0" - очень важна, потому что между ячейками не должно быть зазоров, иначе рисунки будут не совпадать.

Ширину таблицы с рамочкой и выравнивание вы задаёте в процентах, как вы хотите, чтобы она располагалась в том месте страницы, в каком вы пожелаете. Я поставила: table align="center" width="100%"
И, чтобы табличка гармонично смотрелась на странице, я задала цвет всей страницы тоже чёрный. Теперь вся страница html будет выглядеть так:

<html> <head> <title> Наша первая страница с рамочкой </title> </head> <body bgcolor="#000000">

<table align="center" width="95%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="21" height="22"> <img src="01.jpg" border="0"> </td>
<td style="background:url('02.jpg');"> </td>
<td width="21" height="22"> <img src="03.jpg" border="0"> </td>
</tr>
<tr>
<td style="background:url('04.jpg');" > </td>
<td align="center" body bgcolor=#000000>

<FONT COLOR=#ffffc9 STYLE="font-size:24pt"> СОДЕРЖИМОЕ ТАБЛИЦЫ (пустая ячейка в центре) </font> <br> <br> <br> <br> <br> <br> <br> <br> <br>

</td>
<td style="background:url('05.jpg');" > </td>
</tr>
<tr> <td width="21" height="22"> <img src="06.jpg" border="0"> </td>
<td style="background:url('07.jpg');" > </td>
<td width="21" height="22"> <img src="08.jpg" border="0"> </td>
</tr>
</table>


</body>
</html>


В готовом виде выглядит так:
Наша первая страница: чёрный фон, масштабирующаяся табличка в обрамлении страницы

В тело таблички, на место моей надписи (выделено зелёным цветом), можно поставить любое содержимое, например все другие таблицы вашей страницы сайта.

Урок окончен.


Перейти к Уроку 14


© М.В. Гуминенко. 2008 г.
По вопросам использования материалов сайта обращаться по адресу: Kippari2007@rambler.ru



Навигация по урокам

Работа с хостингом

Регистрация на Narod.ru

Регистрация на платном хостинге

Переход с одного платного хостинга на другой


Вопросы по таблицам

Таблица как основа для страницы сайта: табличные теги "width", "border"

Таблица как модуль для ссылок: ячейки и строки ("td" и "tr"), значения атрибута "align"

Атрибут "VALIGN" и его значения. Атрибуты "cellpadding" и "cellspacing"

Сложные таблицы. Атрибуты атрибуты "colspan" и "rowspan"


Форматирование текста

Выравнивание текста (атрибут "align"). Имя, цвет, размер шрифта (font: family, face, color, size). Абзац ("p"). Как задать отступ красной строки (немного о стиле CSS)

Как прописать шрифты и заголовки в стилях CSS

Амперсанды. Текстовые теги. Специфические символы


Делаем ссылки

Как написать код ссылки

Как задать внешний вид ссылки (шрифт, цвет, размер и пр.) в стилях CSS

Что нужно сделать, чтобы на одной странице они были разного цвета, шрифта, размера и пр. (в CSS)

Внутристраничные ссылки или закладки (якоря)

Ссылка "Наверх"


Картинки (логотипы, баннеры, фон)

Загрузка изображений на Radikal.ru

Картинки в тексте

Как сделать работающую кнопку (баннер)

Как установить логотип, задать цвет фона (таблицы, страницы сайта), установить фоновое изображение. Атрибуты bgcolor и background

Как установить логотип через документ стилей CSS

Масштабирующиеся логотипы

Масштабирующиеся рамки в обрамлении таблицы (страницы)

Размещение картинки на странице с текстом

Неподвижный фон


Вопросы по JavaScript и динамическому html

Скрытый текст с помощью JavaScript и динамического html

Бегущая строка

Простейшие фотоальбомы

Сменяющийся логотип


Несколько советов по установке форумного движка SMF на платный хостинг