Урок 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. Зелёным цветом я обозначила, куда вставляется цвет фона. Теперь загружаем всё это на нашу страницу и получается вот что:
Таблица сайта с логотипом и двумя модулями со ссылками, готовая

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

Наверх