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


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

Урок 5. Создаём модуль для ссылок



Громким названием "модуль" я называю маленькую табличку, в которую будут помещены ссылки. Поскольку эту маленькую табличку легко будет вставить в любое нужное место страницы, назовём её модулем.
Определение слова "модуль": Понятие модуль (от лат. modulus в?" "маленькая мера") в общем означает составную часть, отделимую или хотя бы мысленно выделяемую из общего. Модульной обычно называют вещь, состоящую из чётко выраженных частей, которые нередко можно убирать или добавлять, не разрушая вещь в целом.
Так что слово "модуль" как раз хорошо подойдёт для обозначения той таблички, в которую будут помещены ссылки, поскольку она будет легко заменяемая и её можно будет по желанию переставлять, убирать, переносить в другие части страницы и даже на другие страницы, если потребуется.

Для того, чтобы создать модуль, в котором будут помещаться наши ссылки, которые мы делали на третьем уроке, пропишем под него маленькую табличку вот такого вида:



1. Пишем код для такой таблички по принципу всех предыдущих кодов. Но в данном случае, кроме ячеек у нас появились ещё и строки, которые обозначаются тегом <tr>
Строка - это пространство между двумя горизонтальными линиями таблицы:



Ячейка - это пространство между двумя вертикальными линиями таблицы:



То есть, у нас в табличке должно быть две горизонтальные строки по две ячейки каждая.

<table border="1">
<tr>
<td> Кнопка </td>
<td> Ссылка </td>
</tr>
<tr>
<td> Кнопка </td>
<td> Ссылка </td>
</tr>
</table>


Получится вот такая табличка: Модуль для ссылок

2. Теперь зададим нужные параметры нашей табличке, чтобы получилась вот такая, как мы видим на Главной странице сайта, в левом верхнем углу, под логотипом.

"Всё течёт, всё меняется..." На данный момент (2 января 2010 года) в правом верхнем углу страниц нашего сайта уже стоит не модуль со ссылками, а поисковая форма Google. А модуль со ссылками окончательно переселился в левый угол, под логотип. Тем не менее, вообразите себе, что модуль со ссылками стоит именно в правом верхнем углу - и пойдём дальше.

Нам нужны атрибуты, отвечающие за ширину ячеек с кнопками, а так же атрибуты выравнивания текста по ширине и по верхнему краю ячейки:
align="center" - выравнивание по центру.
WIDTH=19px - ширина ячейки (в данном случае наша кнопка сделана 20рх, но если задать ширину ячейки под кнопку 20рх, будет смотреться менее аккуратно. Поэтому рекомендую всегда задавать в таких случаях ширину ячейки на 1рх меньше).
VALIGN=top - выравнивание по верхнему краю ячейки.
А так же зададим ширину таблицы - 100%.

Пояснение: ширина таблицы 100% - это не значит, что ваш модуль займёт в ширину 100% экрана. Это значит, что когда вы вставите модуль во вторую ячейку вашей таблицы сайта, которая у вас задана в 200рх, он займёт по ширине 100% от этих 200рх. В противном, если вы не зададите конкретную ширину, ваша табличка будет масштабироваться в зависимости от того, какой длинны ваши ссылки. Это будет некрасиво и непредсказуемо.
Поставим в те ячейки, где будут ссылки, выравнивание по левому краю (align="left"), чтобы текст ссылок начинался от самой границы ячеек.
Теперь вставим эти атрибуты в соответствии с тем, что нам нужно задать в ячейках:

<table width="100%" border="1">
<tr>
<td align="center" WIDTH=19px> Кнопка </td>
<td align="left" VALIGN=top> Ссылка </td>
</tr>
<tr>
<td align="center" WIDTH=19px> Кнопка </td>
<td align="left" VALIGN=top> Ссылка </td>
</tr>
</table>


3. Теперь сделаем необходимые для модуля действующие кнопки и ссылки.

<a href="http://dugward.ru/Sod.html"> <img src="pa1.jpg" border="0"> </a>
<a href="http://dugward.ru/Sod.html"> Читать книгу </a>
<a href="http://septemberfox.ucoz.ru/publ/"> <img src="pa1.jpg" border="0"> </a>
<a href="http://septemberfox.ucoz.ru/publ/"> Статьи </a>


4. Теперь все эти кнопки и ссылки ставим на места наших надписей в таблице:

<table width="100%" border="1">
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://dugward.ru/Sod.html"> Читать книгу </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://septemberfox.ucoz.ru/publ/"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://septemberfox.ucoz.ru/publ/"> Статьи </a> </td>
</tr>
</table>


5. Поставим получившуюся конструкцию всю как есть в ячейку 200рх рядом с логотипом, на место слова "Ссылки":

<table width="100%" border="1">
<td align="left"> <img src="logo.jpg" border="0"> </td>
<td WIDTH=200px>

<table width="100%" border="1">
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://dugward.ru/Sod.html"> Читать книгу </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://septemberfox.ucoz.ru/publ/"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://septemberfox.ucoz.ru/publ/"> Статьи </a> </td>
</tr>
</table>


</td>
</table>

<table width="100%" border="1">
<td WIDTH=200px> Ссылки<br> 200рх</td>
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </td>
<td WIDTH=200px> Баннеры <br> и реклама </td>
</table>

<table width="100%" border="1">
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br> Место для рекламных баннеров. </td>
</table>


Красным цветом обозначен вставленный модуль. Теперь поставим всё это на нашу страницу и посмотрим, что получилось:
Таблица сайта с логотипом и модулем со ссылками.
Чтобы оживить страничку, я поставила на неё несколько баннеров

6. Как видите, у нас получилось не совсем так, как на Главной сайта "Созвездие Близнецов". Там модуль в рамочке, но внутри ссылки и кнопки рамочкой не разделены. Это происходит потому, что во внутренней табличке (которую мы делали на этом уроке), стоит border="0". Но если поставить таким же образом и здесь, получится, что рамочка пропадёт совсем. Потому что рамочка у нас задана на всю табличку модуля, а задать рамочку только на внешнюю границу таблички у нас не получится.
От такой беды есть очень простой способ: надо окружить весь модуль ещё одной табличкой на одну ячейку, поставить в этой табличке border="3" (или такой, какой устроит вас), а в самой табличке модуля сделать border="0". И вся конструкция будет выглядеть так:

<table width="100%" border="3" VALIGN=top> <td> <table width="100%" border="1">
<td align="left"> <img src="logo.jpg" border="0"> </td>
<td WIDTH=200px>

<table width="100%" border="3" VALIGN=top>
<td>


<table width="100%" border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://dugward.ru/Sod.html"> Читать книгу </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://septemberfox.ucoz.ru/publ/"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://septemberfox.ucoz.ru/publ/"> Статьи </a>
</td>
</tr>
</table>

</td> </table>

</td>
</table>

<table width="100%" border="1">
<td WIDTH=200px> Ссылки<br> 200рх</td>
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </td>
<td WIDTH=200px> Баннеры <br> и реклама </td>
</table>

<table width="100%" border="1">
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br> Место для рекламных баннеров. </td>
</table>



Я обозначила синим цветом табличку на одну ячейку, в которую вставила наш модуль.
Теперь наша таблица с модулем выглядит так:
Таблица сайта с логотипом и модулем со ссылками, готовая

7. А теперь повторим этот увлекательный процесс ещё раз и вставим в левую ячейку второй таблицы, на место слова "Ссылки", ещё один такой же модуль, но с другими ссылками:

<table width="100%" border="3" VALIGN=top> <td> <table width="100%" border="1">
<td align="left"> <img src="logo.jpg" border="0"> </td>
<td WIDTH=200px>

<table width="100%" border="3" VALIGN=top>
<td>


<table width="100%" border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://dugward.ru/Sod.html"> Читать книгу </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://septemberfox.ucoz.ru/publ/"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://septemberfox.ucoz.ru/publ/"> Статьи </a>
</td>
</tr>
</table>

</td> </table>

</td>
</table>

<table width="100%" border="1">
<td WIDTH=200px>

<table width="100%" border="3" VALIGN=top>
<td>


<table width="100%" border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://forum.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://forum.dugward.ru"> Форум </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://lezione.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://lezione.dugward.ru"> Как мы делали этот сайт </a>
</td>
</tr>
</table>

</td> </table>

</td>

<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </td>
<td WIDTH=200px> Баннеры <br> и реклама </td>
</table>

<table width="100%" border="1">
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br> Место для рекламных баннеров. </td>
</table>



И смело загружаем всю конструкцию на нашу страницу. Получается вот что:
Таблица сайта с логотипом и двумя модулями со ссылками, почти готовая

Не обязательно делать и кнопки, и ссылки рядом с ними. Вы вполне можете обойтись либо одними ссылками в модуле, либо кнопками, на которых будет написано, куда они ведут.
Однако, вы видите, что здесь не хватает одной детали - цвета фона в модулях. Из-за этого текст на полосатом фоне несколько теряется. Зададим напоследок цвет фона, как мы это делали на четвёртом уроке. Но не для всей страницы, а для маленьких внутренних табличек модулей. Код будет выглядеть так:

<table width="100%" border="3" VALIGN=top> <td> <table width="100%" border="1">
<td align="left"> <img src="logo.jpg" border="0"> </td>
<td WIDTH=200px>

<table width="100%" border="3" VALIGN=top>
<td>


<table width="100%"
bgcolor=#e5e5e7
border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://dugward.ru/Sod.html"> Читать книгу </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://septemberfox.ucoz.ru/publ/"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://septemberfox.ucoz.ru/publ/"> Статьи </a>
</td>
</tr>
</table>

</td> </table>

</td>
</table>

<table width="100%" border="1">
<td WIDTH=200px>

<table width="100%" border="3" VALIGN=top>
<td>


<table width="100%"
bgcolor=#e5e5e7
border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://forum.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://forum.dugward.ru"> Форум </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://lezione.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://lezione.dugward.ru"> Как мы делали этот сайт </a>
</td>
</tr>
</table>

</td> </table>

</td>

<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </td>
<td WIDTH=200px> Баннеры <br> и реклама </td>
</table>

<table width="100%" border="1">
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br> Место для рекламных баннеров. </td>
</table>



Я взяла не c0c0c0, а более светлый серый цвет e5e5e7. Зелёным цветом я обозначила, куда вставляется цвет фона. Теперь загружаем всё это на нашу страницу и получается вот что:
Таблица сайта с логотипом и двумя модулями со ссылками, готовая

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


Перейти к уроку 6


© М.В. Гуминенко. 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 на платный хостинг