Без заголовка
21-01-2015 20:03
к комментариям - к полной версии
- понравилось!
Это цитата сообщения Tanja_7 Оригинальное сообщение
Как создать меню
[показать]Как создать меню
Меню, как и всё в этой жизни, нужно делать с душой и любовью :)
Если возня с цифрами вас изматывает, непонятные слова, записанные "вражьими буквами" пугают, а работа с кодом кажется неприятной - не нужно этим заниматься.
Меню - не самое главное в этой жизни, можно обойтись и без него.
Но когда странные буквы и цифры вдруг начинают вам подчиняться и превращаются в что-то осмысленное, когда код, который вы создали сами начинает работать - это чудо, эйфория и полный восторг!!!
Давайте попробуем сделать меню сообщества, оно же бродилка в блоге, оно же таблица HTML с кликабельными кнопками :)
Для этого нам нужно будет научиться делать три вещи:
1) кликабельные кнопки;
2) таблицу HTML;
3) запихнуть эти кнопки (п.1) в эту таблицу (п.2) Приступим :)
Делаем кликабельную кнопку
Кликабельная кнопка (она же баннер) - это картинка при щелчке по которой можно куда-нибудь попасть.
Любая кнопка состоит из двух вещей: ссылки и картинки
Код ссылки:<a target="_blank" 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>
Начало и конец строки:...
Начало и конец ячейки:...
Как видите, все теги парные. Первый тег называется открывающий, второй - точно такой же но с косой чёрточкой вначале - закрывающий.
Теги размещаются друг у друга внутри, т.е. тег строки внутри тега таблицы, а теги ячейки внутри тега строки.
Создадим небольшую таблицу, из двух строк и двух столбцов. Её код:
В результате должно получиться что-то вроде этого:
Эта таблица - основа нашего будущего меню. В ней всего две строки и два столбца, но если вы сумели создать такую таблицу, то увеличение количества строк и столбцов проблемы не составит.
Теперь осталось внутри каждой ячейки разместить коды кнопок.
Создаём меню
Если есть таблица и есть коды кнопок дальше совсем просто - расположить код каждой кнопки внутри одной из ячеек.
Что касается ссылок - решать вам, куда должны вести кнопки вашего меню. А вот по поводу картинок для кнопок посоветую.
Нарисуйте как должно выглядеть ваше будущее меню в каком-нибудь графическом редакторе: с фоном, кнопками, надписями на них. То есть у вас должна быть полностью картинка как должно выглядеть готовое меню. Затем разрежьте её на части в каком-нибудь графическом редакторе(проще, если это будут равные части), чтобы разделить кнопки и в каждой части была только одна кнопка.
Каждую из этих частей используйте как изображение для кнопки.
В результате у меня получилась вот такая таблица:
Её код:
Как говорил Козьма Прутков: "Нельзя объять необъятное", тем более в одном посте :)
Разумеется, обо всём рассказать не получилось, есть ещё много деталей, которые желательно знать и учитывать. Если тема вас заинтересовала и будут вопросы, для этого есть комментарии. Или, можно будет сделать ещё пост на эту же тему, остановиться в нём на каких-то подробностях или рассказать о других способах создания меню. Хотя этот, делать меню из картинки - один из наиболее простых и в то же время результативных. Всё зависит от вашего вкуса и дизайнерских талантов - меню будет точно таким, каким вы его нарисуете и будет одинаково отображаться во всех браузерах.
Несколько образцов бродилок, которые можно сделать таким способом:
Это цитата сообщения Tanja_7 Оригинальное сообщение
Как создать меню
[показать]Если возня с цифрами вас изматывает, непонятные слова, записанные "вражьими буквами" пугают, а работа с кодом кажется неприятной - не нужно этим заниматься.
Меню - не самое главное в этой жизни, можно обойтись и без него.
Но когда странные буквы и цифры вдруг начинают вам подчиняться и превращаются в что-то осмысленное, когда код, который вы создали сами начинает работать - это чудо, эйфория и полный восторг!!!
Давайте попробуем сделать меню сообщества, оно же бродилка в блоге, оно же таблица HTML с кликабельными кнопками :)
Для этого нам нужно будет научиться делать три вещи:
2) таблицу HTML;
3) запихнуть эти кнопки (п.1) в эту таблицу (п.2)
Кликабельная кнопка (она же баннер) - это картинка при щелчке по которой можно куда-нибудь попасть.
Любая кнопка состоит из двух вещей: ссылки и картинки
Код ссылки:
Код картинки:
Кликабельная кнопка - это картинка внутри ссылки. Вот так:
Адрес ссылки копируем в адресной строке браузера.
С адресом картинки чуть сложнее.
Если с адресом картинки и адресом ссылки разобрались, можно попробовать сделать кликабельную кнопку.
Я сделаю баннер нашего сообщества - кнопку, при щелчке по которой откроется главная сообщества.
Для этого мне нужен адрес сообщества: http://my.mail.ru/community/compi./
И адрес изображения: http://content.foto.mail.ru/mail/irbris/_blogs/i-5618.jpg
Готовый код выглядит так:
А вот и результат - кликабельная кнопка. Даже если эта кнопка не особо похожа на кнопку, и кажется обычной картинкой, при наведении на неё курсора он превращается в ладошку. Это означает, что перед нами ссылка, по которой можно перейти.
[показать]Попробуйте сделать кликабельную кнопку сами, убедитесь, что вы со всем разобрались, посмотрите на результат.
Если всё получилось так как нужно, идём дальше...
Одна кнопка - это, безусловно, хорошо! Можно даже сказать, замечательно!!!
Но одна кнопка, это ещё не меню... Для меню нужно хотя бы две кнопки... Или три... Или больше
Для того, чтобы расположить кнопки в определённом порядке, нужно создать таблицу.
Начало и конец таблицы:
Начало и конец строки:
Начало и конец ячейки:
Как видите, все теги парные. Первый тег называется открывающий, второй - точно такой же но с косой чёрточкой вначале - закрывающий.
Теги размещаются друг у друга внутри, т.е. тег строки внутри тега таблицы, а теги ячейки внутри тега строки.
Создадим небольшую таблицу, из двух строк и двух столбцов. Её код:
В результате должно получиться что-то вроде этого:
Эта таблица - основа нашего будущего меню. В ней всего две строки и два столбца, но если вы сумели создать такую таблицу, то увеличение количества строк и столбцов проблемы не составит.
Теперь осталось внутри каждой ячейки разместить коды кнопок.
Если есть таблица и есть коды кнопок дальше совсем просто - расположить код каждой кнопки внутри одной из ячеек.
Что касается ссылок - решать вам, куда должны вести кнопки вашего меню. А вот по поводу картинок для кнопок посоветую.
Нарисуйте как должно выглядеть ваше будущее меню в каком-нибудь графическом редакторе: с фоном, кнопками, надписями на них. То есть у вас должна быть полностью картинка как должно выглядеть готовое меню. Затем разрежьте её на части в каком-нибудь графическом редакторе(проще, если это будут равные части), чтобы разделить кнопки и в каждой части была только одна кнопка.
Каждую из этих частей используйте как изображение для кнопки.
В результате у меня получилась вот такая таблица:
| [показать] | [показать] |
| [показать] | [показать] |
Её код:
Как говорил Козьма Прутков: "Нельзя объять необъятное", тем более в одном посте :)
Разумеется, обо всём рассказать не получилось, есть ещё много деталей, которые желательно знать и учитывать. Если тема вас заинтересовала и будут вопросы, для этого есть комментарии. Или, можно будет сделать ещё пост на эту же тему, остановиться в нём на каких-то подробностях или рассказать о других способах создания меню. Хотя этот, делать меню из картинки - один из наиболее простых и в то же время результативных. Всё зависит от вашего вкуса и дизайнерских талантов - меню будет точно таким, каким вы его нарисуете и будет одинаково отображаться во всех браузерах.
Несколько образцов бродилок, которые можно сделать таким способом:
 [показать] |  [показать] |  [показать] |  [показать] |  [показать] |
Вы сейчас не можете прокомментировать это сообщение.
Дневник Без заголовка | Игрушки-подушки - Игрушки-подушки |
Лента друзей Игрушки-подушки
/ Полная версия
Добавить в друзья
Страницы:
раньше»