ГЛАВНАЯ СТРАНИЦА | ВХОД
Свой блог я хочу посвятить таким же новичкам в сети, каким являюсь и я.
Здесь я буду делиться с вами всем тем, чему я научился за время существования моего блога.
И пусть опытные Веб-мастера не удивляются банальности моих тем, ведь я еще сам "чайник", поэтому и делиться советами буду прежде всего с такими же новичками, как и я.
Надеюсь, что мои советы кому-то помогут.
С уважением, Алексей

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

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



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

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

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

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

Форматирование текста
Создание таблицы
Вставка изображений



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

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

Форматирование текста
Создание таблиц
Вставка изображений



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

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

myspace layouts

myspace layouts

myspace layouts





где 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 отзывы туристов об отдыхе в самых интересных уголках планеты. Вы узнаете, где отдыхать вдвоем, а где все семьей; узнаете особенности кухни различных стран и степень обслуживания персонала в отелях. С нами вы будете знать об отдыхе ВСЕ!
______________________________________________

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

6 комментариев:

  1. А куда вставлять эти коды в гаджет или в шаблон

    ОтветитьУдалить
  2. Здравствуйте,может Вы подскажите.Сделал флеш меню для сайта в программе:Flash Menu Labs Pro v2,а как установить на сайт сообразить не могу,где должны распологаться папки которые создает программа и куда вставлять код?Благодарю за помощь!

    ОтветитьУдалить
  3. Извините, но я не пользовался этой программой. В основном все мои темы основаны на HTML-кодах. Если у вас есть готовый код, то я бы вставил в верхний горизонтальный гаджет или в вертикальный боковой.
    Просто я не знаю, что программа дает на выходе ((

    ОтветитьУдалить
  4. Спасибо за таблицу. Теперь я пользуюсь ею, заливаю разными фонами. Не зная толком HTML, использую визуальный редактор. Очень помогает. Спасибо, еще раз. Надежда

    ОтветитьУдалить
  5. Здравствуйте, Алексей! Давно хотела поблагодарить Вас за таблицу. Я теперь везде пользуюсь вашим кодом. Спасибо. С уважением, Надежда.

    ОтветитьУдалить

В комментариях оставляем мнения и советы к данной статье. Все вопросы задаем ТОЛЬКО на ФОРУМЕ. Отвечаю и стараюсь помочь всем!