Создание горизонтального меню с картинками

Сегодня я вам покажу еще один вариант горизонтального меню на основе HTML тегов для создания таблиц.



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

А теперь по теме... Сейчас я вам приведу HTML-код, который поможет вам сделать горизонтальное меню более интересным. Я попробую создать его вместе с вами, расскажу все подробно.

Итак, приступим. Вот, собственно, и сам код:

1. Для начала создадим таблицу:

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

Создание таблицы

Вставка изображений

<table border="1" cellpadding="5" cellspacing="0"><tbody><br /> <tr align="center"> <td>Форматирование текста<br /> </td><td><br /> </td><td>Создание таблицы<br /> </td><td><br /> </td><td>Вставка изображений<br /> </td><td><br /> </td></tr><br /> </tbody></table>

где border - толщина рамки,
cellpadding - расстояние между ячейками,
align="center" - выравние по центру внутри ячеек.

2. Уберем рамку, создадим заливку, сделаем текст в ячейках ссылками

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

Создание таблиц

Вставка изображений

<table border="0" cellpadding="10" cellspacing="0" style="background: url('http://foto.planetadruzey.ru/th_2130794.jpeg')"><tbody><br /> <tr align="center"> <td><a href="http://ty-blogger.blogspot.com/2009/08/html_12.html">Форматирование текста</a><br /> </td><td><br /> </td><td><a href="http://ty-blogger.blogspot.com/2009/08/html_24.html">Создание таблиц</a><br /> </td><td><br /> </td><td><a href="http://ty-blogger.blogspot.com/2009/08/html_1519.html">Вставка изображений</a><br /> </td><td><br /> </td></tr><br /> </tbody></table>

где style="background: url('http://foto.planetadruzey.ru/th_2130794.jpeg') поменяйте на свой адрес картинки, а ссылки на ty-blogger.blogspot.com на адреса разделов, которые будут у вас в меню.

3. Поменяем шрифт ссылок и вставим картинку

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

Создание таблиц

Вставка изображений

<table border="0" cellpadding="5" cellspacing="0" style="background: url('http://foto.planetadruzey.ru/th_2130794.jpeg')"><tbody><br /> <tr align="center"> <td><img alt="myspace layouts" border="0" src="http://media.bigoo.ws/content/christmas/gif_snowflakes/snowflakes_1.gif"><p style="margin-top: 0; margin-bottom: 0"><br /> <a href="http://ty-blogger.blogspot.com/2009/08/html_12.html"><b><font face="Monotype Corsiva" size="+1" font color="#003366">Форматирование<br>текста</font></b></a><br /> </td><td><br /> </td><td><img alt="myspace layouts" border="0" src="http://media.bigoo.ws/content/christmas/gif_snowflakes/snowflakes_1.gif"><p style="margin-top: 0; margin-bottom: 0"><br /> <a href="http://ty-blogger.blogspot.com/2009/08/html_24.html"><b><font face="Monotype Corsiva" size="+1" font color="#003366">Создание<br>таблиц</font></b></a><br /> </td><td><br /> </td><td><img alt="myspace layouts" border="0" src="http://media.bigoo.ws/content/christmas/gif_snowflakes/snowflakes_1.gif"><p style="margin-top: 0; margin-bottom: 0"><br /> <a href="http://ty-blogger.blogspot.com/2009/08/html_1519.html"><b><font face="Monotype Corsiva" size="+1" font color="#003366">Вставка<br>изображений</font></b></a><br /> </td><td><br /> </td></tr><br /> </tbody></table>

где img alt="myspace layouts" border="0" src="http://media.bigoo.ws/content/christmas/gif_snowflakes/snowflakes_1.gif" - адрес картинки в интернете;
face="Monotype Corsiva" - шрифт;
size="+1" - увеличение шрифта;
color="#003366" - цвет шрифта;
<b>- жирный шрифт;
<br> - с новой строки.

Внимание!

1. При копировании кода в конце строки убирайте тег <br/>, поскольку я разделял на отдельные строки для удобства. Если вы оставите с этими тегами, то таблица расползется по высоте.

2. В качестве фона выбирайте рисунки с мелким узором, чтобы не был заметен переход между кусочками картинки, как в моем случае

3. В качестве рисунка выбирайте изображение на прозрачном фоне. Адрес сайта с большой коллекцией таких рисунков найдете в теме "Вставка линий с помощью HTML тегов"

Желаю удачи в оформлении блогов и сайтов!

Добавлено

Так как в первый раз блин получается комом, то решил добавить сюда такое же меню, но более респектабельное, так сказать ;))) Если правильно подобрать картинки, то можно получить очень неплохое меню. Например:

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

Создание

Вставка

В общем, если поработать с цветами, картинками и шрифтом,то можно создать вполне приемлемое меню. В данном случае я внес картинку под ссылку, убрал подчеркивание и соединил картинку и ссылку тегом <nobr>вот здесь все будет в горизонтальной строке и не перенесется на след.строку</nobr>

Короче,главное - фантазия и желания,тогда у вас все получится!
______________________________________________

На сайте Туристер.ру представлена подробная информация о городе Нью-Йорк. Вы найдете не только общие сведения, но и узнаете как до него добраться и как развлечься в городе.

В Вуд Маркете вы можете купить дсп 16мм. ДСП - современный мебельный и строительный материал, который привлекает своими доступными ценами, высокой надежностью и экологически чистым составом.

Читайте на tourister.ru отзывы туристов об отдыхе в самых интересных уголках планеты. Вы узнаете, где отдыхать вдвоем, а где все семьей; узнаете особенности кухни различных стран и степень обслуживания персонала в отелях. С нами вы будете знать об отдыхе ВСЕ!
______________________________________________

С этой темой еще читают:

.