Как сделать меню
Меню, как и всё в этой жизни, нужно делать с душой и любовью :)
Если возня с цифрами вас изматывает, непонятные слова, записанные "вражьими буквами" пугают, а возня с кодом кажется неприятной - не нужно этим заниматься. Меню - не самое главное в этой жизни, можно обойтись и без него.
Но когда странные буквы и цифры вдруг начинают вам подчиняться и превращаются в что-то осмысленное, когда код, который вы создали сами начинает работать - это чудо, эйфория и полный восторг!!!
Давайте попробуем сделать меню сообщества, оно же бродилка в блоге, оно же таблица HTML с кликабельными кнопками :)
Для этого нам нужно будет научиться делать три вещи:
Делаем кликабельную кнопку
Кликабельная кнопка (она же баннер) - это картинка при щелчке по которой можно куда-нибудь попасть.
Любая кнопка состоит из двух вещей: ссылки и картинки
Код ссылки: <a href="адрес ссылки">...</a>
Код картинки: <img src="адрес картинки">
Кликабельная кнопка - это картинка внутри ссылки. Вот так:
Адрес ссылки копируем в адресной строке браузера.
С адресом картинки чуть сложнее.
Если с адресом картинки и адресом ссылки разобрались, можно попробовать сделать кликабельную кнопку.
Я сделаю баннер нашего сообщества - кнопку, при щелчке по которой откроется главная сообщества.
Для этого мне нужен адрес сообщества: http://my.mail.ru/community/compi./
И адрес изображения: http://content.foto.mail.ru/mail/irbris/_blogs/i-5618.jpg
Готовый код выглядит так:
А вот и результат - кликабельная кнопка. Даже если эта кнопка не особо похожа на кнопку, и кажется обычной картинкой, при наведении на неё курсора он превращается в ладошку. Это означает, что перед нами ссылка, по которой можно перейти.
Попробуйте сделать кликабельную кнопку сами, убедитесь, что вы со всем разобрались, посмотрите на результат.
Если всё получилось так как нужно, идём дальше...
Создаём таблицу HTML
Одна кнопка - это, безусловно, хорошо! Можно даже сказать, замечательно!!!
Но одна кнопка, это ещё не меню... Для меню нужно хотя бы две кнопки... Или три... Или больше
Для того, чтобы расположить кнопки в определённом порядке, нужно создать таблицу.
Начало и конец таблицы: <table>...</table>
Начало и конец строки: <tr>...</tr>
Начало и конец ячейки: <td>...</td>
Как видите, все теги парные. Первый тег называется открывающий, второй - точно такой же но с косой чёрточкой вначале - закрывающий.
Теги размещаются друг у друга внутри, т.е. тег строки внутри тега таблицы, а теги ячейки внутри тега строки.
Создадим небольшую таблицу, из двух строк и двух столбцов. Её код:
В результате должно получиться что-то вроде этого:
Эта таблица - основа нашего будущего меню. В ней всего две строки и два столбца, но если вы сумели создать такую таблицу, то увеличение количества строк и столбцов проблемы не составит.
Теперь осталось внутри каждой ячейки разместить коды кнопок.
Создаём меню
Если есть таблица и есть коды кнопок дальше совсем просто - расположить код каждой кнопки внутри одной из ячеек.
Что касается ссылок - решать вам, куда должны вести кнопки вашего меню. А вот по поводу картинок для кнопок посоветую.
Нарисуйте как должно выглядеть ваше будущее меню в каком-нибудь графическом редакторе: с фоном, кнопками, надписями на них. То есть у вас должна быть полностью картинка как должно выглядеть готовое меню. Затем разрежьте её на части в каком-нибудь графическом редакторе(проще, если это будут равные части), чтобы разделить кнопки и в каждой части была только одна кнопка.
Каждую из этих частей используйте как изображение для кнопки.
В результате у меня получилась вот такая таблица:
Её код:
Как говорил Козьма Прутков: "Нельзя объять необъятное", тем более в одном посте :)
Разумеется, обо всём рассказать не получилось, есть ещё много деталей, которые желательно знать и учитывать. Если тема вас заинтересовала и будут вопросы, для этого есть комментарии. Или, можно будет сделать ещё пост на эту же тему, остановиться в нём на каких-то подробностях или рассказать о других способах создания меню. Хотя этот, делать меню из картинки - один из наиболее простых и в то же время результативных. Всё зависит от вашего вкуса и дизайнерских талантов - меню будет точно таким, каким вы его нарисуете и будет одинаково отображаться во всех браузерах.
Если возня с цифрами вас изматывает, непонятные слова, записанные "вражьими буквами" пугают, а возня с кодом кажется неприятной - не нужно этим заниматься. Меню - не самое главное в этой жизни, можно обойтись и без него.
Но когда странные буквы и цифры вдруг начинают вам подчиняться и превращаются в что-то осмысленное, когда код, который вы создали сами начинает работать - это чудо, эйфория и полный восторг!!!
Давайте попробуем сделать меню сообщества, оно же бродилка в блоге, оно же таблица HTML с кликабельными кнопками :)
Для этого нам нужно будет научиться делать три вещи:
1) кликабельные кнопки;Приступим :)
2) таблицу HTML;
3) запихнуть эти кнопки (п.1) в эту таблицу (п.2)
Делаем кликабельную кнопку
Кликабельная кнопка (она же баннер) - это картинка при щелчке по которой можно куда-нибудь попасть.
Любая кнопка состоит из двух вещей: ссылки и картинки
Код ссылки: <a href="адрес ссылки">...</a>
Код картинки: <img src="адрес картинки">
Кликабельная кнопка - это картинка внутри ссылки. Вот так:
Адрес ссылки копируем в адресной строке браузера.
С адресом картинки чуть сложнее.
Все мы знаем как не любит спам-бот адреса посторонних сайтов. Поэтому любая картинка, которую мы используем в меню, должна иметь майловский адрес.Для того, чтобы узнать адрес картинки, добавляем её себе в блог, нажимаем "Предпросмотр", наводим курсор на изображение, щёлкаем правой кнопкой мышки и в контекстном меню выбираем "Копировать адрес изображения"
Если с адресом картинки и адресом ссылки разобрались, можно попробовать сделать кликабельную кнопку.
Я сделаю баннер нашего сообщества - кнопку, при щелчке по которой откроется главная сообщества.
Для этого мне нужен адрес сообщества: http://my.mail.ru/community/compi./
И адрес изображения: http://content.foto.mail.ru/mail/irbris/_blogs/i-5618.jpg
Готовый код выглядит так:
А вот и результат - кликабельная кнопка. Даже если эта кнопка не особо похожа на кнопку, и кажется обычной картинкой, при наведении на неё курсора он превращается в ладошку. Это означает, что перед нами ссылка, по которой можно перейти.
Попробуйте сделать кликабельную кнопку сами, убедитесь, что вы со всем разобрались, посмотрите на результат.
Если всё получилось так как нужно, идём дальше...
Создаём таблицу HTML
Одна кнопка - это, безусловно, хорошо! Можно даже сказать, замечательно!!!
Но одна кнопка, это ещё не меню... Для меню нужно хотя бы две кнопки... Или три... Или больше
Для того, чтобы расположить кнопки в определённом порядке, нужно создать таблицу.
Таблицы HTML - основа сайтостроения и веб-дизайна. Все сайты создаются на основе таблиц HTML. Даже на этой странице, где мы сейчас находимся, есть отдельные ячейки, в котрых размещаются различные элементы веб-страницыОсновные теги (команды) которые используются при создании таблиц:
Начало и конец таблицы: <table>...</table>
Начало и конец строки: <tr>...</tr>
Начало и конец ячейки: <td>...</td>
Как видите, все теги парные. Первый тег называется открывающий, второй - точно такой же но с косой чёрточкой вначале - закрывающий.
Теги размещаются друг у друга внутри, т.е. тег строки внутри тега таблицы, а теги ячейки внутри тега строки.
Создадим небольшую таблицу, из двух строк и двух столбцов. Её код:
В результате должно получиться что-то вроде этого:
Эта таблица - основа нашего будущего меню. В ней всего две строки и два столбца, но если вы сумели создать такую таблицу, то увеличение количества строк и столбцов проблемы не составит.
Теперь осталось внутри каждой ячейки разместить коды кнопок.
Создаём меню
Если есть таблица и есть коды кнопок дальше совсем просто - расположить код каждой кнопки внутри одной из ячеек.
Что касается ссылок - решать вам, куда должны вести кнопки вашего меню. А вот по поводу картинок для кнопок посоветую.
Нарисуйте как должно выглядеть ваше будущее меню в каком-нибудь графическом редакторе: с фоном, кнопками, надписями на них. То есть у вас должна быть полностью картинка как должно выглядеть готовое меню. Затем разрежьте её на части в каком-нибудь графическом редакторе(проще, если это будут равные части), чтобы разделить кнопки и в каждой части была только одна кнопка.
Каждую из этих частей используйте как изображение для кнопки.
В результате у меня получилась вот такая таблица:
 |  |
 |  |
Её код:
Как говорил Козьма Прутков: "Нельзя объять необъятное", тем более в одном посте :)
Разумеется, обо всём рассказать не получилось, есть ещё много деталей, которые желательно знать и учитывать. Если тема вас заинтересовала и будут вопросы, для этого есть комментарии. Или, можно будет сделать ещё пост на эту же тему, остановиться в нём на каких-то подробностях или рассказать о других способах создания меню. Хотя этот, делать меню из картинки - один из наиболее простых и в то же время результативных. Всё зависит от вашего вкуса и дизайнерских талантов - меню будет точно таким, каким вы его нарисуете и будет одинаково отображаться во всех браузерах.
Комментариев нет:
Отправить комментарий