Как создать меню

Как создать меню
Меню, как и всё в этой жизни, нужно делать с душой и любовью :)
Если возня с цифрами вас изматывает, непонятные слова, записанные "вражьими буквами" пугают, а работа с кодом кажется неприятной - не нужно этим заниматься.
Меню - не самое главное в этой жизни, можно обойтись и без него.
Но когда странные буквы и цифры вдруг начинают вам подчиняться и превращаются в что-то осмысленное, когда код, который вы создали сами начинает работать - это чудо, эйфория и полный восторг!!!

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

Делаем кликабельную кнопку

Кликабельная кнопка (она же баннер) - это картинка при щелчке по которой можно куда-нибудь попасть.
Любая кнопка состоит из двух вещей: ссылки и картинки

Код ссылки: <a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=адрес ссылки">...</a>
Код картинки: <img src="адрес картинки" />
Кликабельная кнопка - это картинка внутри ссылки. Вот так:

<a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=адрес ссылки"><img src="адрес картинки" /></a>

Адрес ссылки копируем в адресной строке браузера.
С адресом картинки чуть сложнее.
Все мы знаем как не любит спам-бот адреса посторонних сайтов. Поэтому любая картинка, которую мы используем в меню, должна иметь майловский адрес.Для того, чтобы узнать адрес картинки, добавляем её себе в блог, нажимаем "Предпросмотр", наводим курсор на изображение, щёлкаем правой кнопкой мышки и в контекстном меню выбираем "Копировать адрес изображения"
Если с адресом картинки и адресом ссылки разобрались, можно попробовать сделать кликабельную кнопку.

Я сделаю баннер нашего сообщества - кнопку, при щелчке по которой откроется главная сообщества.
Для этого мне нужен адрес сообщества: http://my.mail.ru/community/compi./

И адрес изображения: http://content.foto.mail.ru/mail/irbris/_blogs/i-5618.jpg
Готовый код выглядит так:

<a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://my.mail.ru/community/compi./"><img src="http://content.foto.mail.ru/mail/irbris/_blogs/i-5618.jpg" /></a>

А вот и результат - кликабельная кнопка. Даже если эта кнопка не особо похожа на кнопку, и кажется обычной картинкой, при наведении на неё курсора он превращается в ладошку. Это означает, что перед нами ссылка, по которой можно перейти.



Попробуйте сделать кликабельную кнопку сами, убедитесь, что вы со всем разобрались, посмотрите на результат.
Если всё получилось так как нужно, идём дальше...

Создаём таблицу HTML

Одна кнопка - это, безусловно, хорошо! Можно даже сказать, замечательно!!!
Но одна кнопка, это ещё не меню... Для меню нужно хотя бы две кнопки... Или три... Или больше
Для того, чтобы расположить кнопки в определённом порядке, нужно создать таблицу.
Таблицы HTML - основа сайтостроения и веб-дизайна. Все сайты создаются на основе таблиц HTML. Даже на этой странице, где мы сейчас находимся, есть отдельные ячейки, в котрых размещаются различные элементы веб-страницы Основные теги (команды) которые используются при создании таблиц:

Начало и конец таблицы: <table>...</table>
Начало и конец строки: ...
Начало и конец ячейки: ...

Как видите, все теги парные. Первый тег называется открывающий, второй - точно такой же но с косой чёрточкой вначале - закрывающий.

Теги размещаются друг у друга внутри, т.е. тег строки внутри тега таблицы, а теги ячейки внутри тега строки.

Создадим небольшую таблицу, из двух строк и двух столбцов. Её код:

<table></table>

... ...


... ...

В результате должно получиться что-то вроде этого:



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

Создаём меню

Если есть таблица и есть коды кнопок дальше совсем просто - расположить код каждой кнопки внутри одной из ячеек.
Что касается ссылок - решать вам, куда должны вести кнопки вашего меню. А вот по поводу картинок для кнопок посоветую.
Нарисуйте как должно выглядеть ваше будущее меню в каком-нибудь графическом редакторе: с фоном, кнопками, надписями на них. То есть у вас должна быть полностью картинка как должно выглядеть готовое меню. Затем разрежьте её на части в каком-нибудь графическом редакторе(проще, если это будут равные части), чтобы разделить кнопки и в каждой части была только одна кнопка.
Каждую из этих частей используйте как изображение для кнопки.
В результате у меня получилась вот такая таблица:



Её код:

<table cellspacing="0" cellpadding="0" border="0" align="center"></table>

<a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=https://e.mail.ru/"><img src="http://content.foto.mail.ru/mail/irbris/_blogs/s-5645.jpg" /></a>
<a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://my.mail.ru/"><img src="http://content.foto.mail.ru/mail/irbris/_blogs/s-5646.jpg" /></a>


<a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://blogs.mail.ru/"><img src="http://content.foto.mail.ru/mail/irbris/_blogs/s-5647.jpg" /></a>
<a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://help.mail.ru/my"><img src="http://content.foto.mail.ru/mail/irbris/_blogs/s-5648.jpg" /></a>

Как говорил Козьма Прутков: "Нельзя объять необъятное", тем более в одном посте :)
Разумеется, обо всём рассказать не получилось, есть ещё много деталей, которые желательно знать и учитывать. Если тема вас заинтересовала и будут вопросы, для этого есть комментарии. Или, можно будет сделать ещё пост на эту же тему, остановиться в нём на каких-то подробностях или рассказать о других способах создания меню. Хотя этот, делать меню из картинки - один из наиболее простых и в то же время результативных. Всё зависит от вашего вкуса и дизайнерских талантов - меню будет точно таким, каким вы его нарисуете и будет одинаково отображаться во всех браузерах.
Несколько образцов бродилок, которые можно сделать таким способом:

Всё для дневничка.Чего тут только нет?!!

Всё для дневничка.Чего тут только нет?!!

Серия сообщений "все для днева":

Часть 1 - оформление постов, текстов
Часть 2 - Новагодние часики
Часть 3 - Картинки с животными
Часть 4 - Ссылки по ЛиРу
Часть 5 - Разные ссылки
Часть 6 - Ангелочки и другое
Часть 7 - Полезные ссылки
Часть 8 - Навигатор
Часть 9 - Украшаем дневник
Часть 10 - Фоны
Часть 11 - уроки без фотошопа
Часть 12 - картинки
Часть 13 - Картинки
Часть 14 - Алфавит
Часть 15 - Без заголовка
Часть 16 - Без заголовка
Часть 17 - Без заголовка
Часть 18 - Без заголовка
Часть 19 - Без заголовка
Часть 20 - Без заголовка
Часть 21 - Без заголовка
Часть 22 - Без заголовка
Часть 23 - Оформление
Часть 24 - Сайты
Часть 25 - Картинки
Часть 26 - К 8 Марта
Часть 27 - анимации
Часть 28 - цветы с кодами к 8 Марта
Часть 29 - ссылки
Часть 30 - FAQ по ЛиРу, Rost/
Часть 31 - разделители черные, цитата Мрат
Часть 32 - Коллекция фонов и картинок
Часть 33 - Таблица цветов, всего 140
Часть 34 - Радужный текст
Часть 35 - фоны
Часть 36 - Милолика Покровская
Часть 37 - Альбина Бычкова Часики
Часть 38 - Жагуара фоны для коллажей
Часть 39 - Жагуара Фоны природа
Часть 40 - Ират. Надписи
Часть 41 - Милолика Покровская, Галерея с прокрутклй.
Часть 42 - Валентина Гребенюк. Часики.
Часть 43 - Тэги на ЛиРу
Часть 44 - wa-81 Анимашки с кодами
Часть 45 - Часики для блога
Часть 46 - Иван Победоносов. Часики.
Часть 47 - Alexas. Коды для днева.
Часть 48 - Пасхальные анимационные открытки с кодами
Часть 49 - Часики цветочные
Часть 50 - Полезности для днева
Часть 51 - Супер эффекты за секунду
Часть 52 - Делаем бегущую строку
Часть 53 - Как сделать баннер
Часть 54 - Генераторы надписей
Часть 55 - Цветочные разделители
Часть 56 - Ценные ссылки
Часть 57 - Часики от Гребенюк
Часть 58 - Много ссылок для ведения дневника
Часть 59 - Рамки необычные
Часть 60 - Картинки. Большая подборка
Часть 61 - ссылочная радость
Часть 62 - Двойной текст
Часть 63 - Кнопочки для блога
Часть 64 - Делаем галерею
Часть 65 - Для украшения постов.
Часть 66 - Выбор цвета с кодом
Часть 67 - Найти музыку
Часть 68 - Часики
Часть 69 - Часики
Часть 70 - Разделители розовые
Часть 71 - Делаем слайд-шоу
Часть 72 - Рамки для блога
Часть 73 - Делаем баннеры
Часть 74 - Чудеса на ЛиРу
Часть 75 - Делаем баннеры, анимации...
Часть 76 - Золотой шедевр
Часть 77 - Сайты для украшения дневника
Часть 78 - Красивые надписи
Часть 79 - Золотые фоны
Часть 80 - Добро пожаловать, сайты
Часть 81 - Кладезь ссылок
Часть 82 - Сайт изумительных картинок и не только
Часть 83 - Красивые картинки с кодами
Часть 84 - много часиков
Часть 85 - Рамки для текста
Часть 86 - Разделители
Часть 87 - Как вставить музыку
Часть 88 - Добавляем музыку к открытке
Часть 89 - Рамка-монитор для видео
Часть 90 - Разделители
Часть 91 - Обои для оабочего стола
Часть 92 - 120 разделителей
Часть 93 - Забавные разделители
Часть 94 - Рамочки для объявлений
Часть 95 - Делаем флэшку здесь
Часть 96 - Выделить текст рамкой
Часть 97 - Пишем мигающим текстом
Часть 98 - Делаем флэш подпись
Часть 99 - Программа для анимации
Часть 100 - Объемый текст
Часть 101 - Делаем таблицу
Часть 102 - Делаем видео слайд-шоу
Часть 103 - Пишущий текст на русском
Часть 104 - Летающие шрифты
Часть 105 - Подписываем картинку
Часть 106 - Смайлики
Часть 107 - Фиолетовые разделители
Часть 108 - Разделители с кодами
Часть 109 - Картинки по темам
Часть 110 - подписываем картинку
Часть 111 - Картинки на все случаи
Часть 112 - Полезные коды для днева
Часть 113 - Делаем бродилку по дневнику
Часть 114 - Рамочки для банера
Часть 115 - Загружаем картинки
Часть 116 - Сайты с анимацией
Часть 117 - Новогодние ссылки
Часть 118 - Бродилка по сообществам
Часть 119 - Флэшки с музыкой
Часть 120 - Урок: картинки в ряд
Часть 121 - Полезности на ЛиРу
Часть 122 - Добавляем видео
Часть 123 - Сделать пост со множеством картинок
Часть 124 - Бродилка по открыткам
Часть 125 - Закачиваем музыку
Часть 126 - Генеретор текста и кнопок
Часть 127 - Оформляем посты красиво
Часть 128 - Очень много красоты для днева
Часть 129 - Рамки для выделения текста
Часть 130 - Цветы с кодами
Часть 131 - Коллекция цветов с кодами.
Часть 132 - Уроки по фотошопу и другие
Часть 133 - Великолепный сайт картинок
Часть 134 - Впишите свой текст
Часть 135 - Рамочки от Искательницы
Часть 136 - Изумительный сайт с открытками
Часть 137 - Полезные ссылки. Жми на книгу
Часть 138 - Рамочки овальные
Часть 139 - Пишем текст в программе Хага3D
Часть 140 - Много сайтов по анимашкам
Часть 141 - Кнопка с выпадающим меню
Часть 142 - Пишем на цветных фонах
Часть 143 - Делаем движущуюся галерею
Часть 144 - Как создать плейкаст
Часть 145 - Сайт с красивыми картинками
Часть 146 - Фоны. Ну очень много.
Часть 147 - Красивые тексты для блога
Часть 148 - Текст с прокруткой
Часть 149 - Невероятно красивые разделители
Часть 150 - Кликабельная картинка-ссылка
Часть 151 - Делаем текстовую ссылку
Часть 152 - Полезные ссылки для блога
Часть 153 - Слайд-шоу легко
Часть 154 - Для оформления дневников
Часть 155 - Красивые шрифты
Часть 156 - Энциклопедия ЛиРу
Часть 157 - Разделители с кодами
Часть 158 - Веселые милые картинки
Часть 159 - Программа Poster Forge
Часть 160 - Много сайтов по работе в блоге
Часть 161 - Коллекция картинок. Много сайтов.
Часть 162 - Размещаем картинки в таблице
Часть 163 - Украшаем дневник
Часть 164 - Коллекция хороших сайтов
Часть 165 - Красные красивые разделители
Часть 166 - Сокращаем ссылки. Полезное.
Часть 167 - Кто прислал симпочку, узнай.
Часть 168 - Рамка для видео
Часть 169 - Смайлики. Куча мала.
Часть 170 - Сайты с анимашками. Много.
Часть 171 - Разделители. Целое море.
Часть 172 - Клавиатура на всех языках
Часть 173 - Красота: разделители малиновые, бордо.
Часть 174 - Небольшие рамочки
Часть 175 - Фотография с монитора
Часть 176 - Генераторы. Много интересных.
Часть 177 - Работа с текстом в фотошопе
Часть 178 - Ответы на вопросы
Часть 179 - Основные HTML теги
Часть 180 - Рамка "Дубовые листочки"
Часть 181 - Спец коды в редакторе
Часть 182 - Все для днева
Часть 183 - Текст на фоне
Часть 184 - Загружаем картинки в расширенном редакторе
Часть 185 - Как вставить картинку через редактор
Часть 186 - Программа для анимации
Часть 187 - Вставляем видеоплеер в пост
Часть 188 - Поздравмтельные флэш открытки, сайт
Часть 189 - Огненная картинка в GIMP
Часть 190 - Анимации, поздравления
Часть 191 - Создаем анимацию. Программа.
Часть 192 - Много полезных ссылок
Часть 193 - Графический редактор GIMP
Часть 194 - Разные украшалки
Часть 195 - Инструкция по вставке плеера в пост
Часть 196 - Анимашки с кодами
Часть 197 - Пишем блестящий текст
Часть 198 - Много интересного для оформления блога
Часть 199 - Красивые рамки от Милолики
Часть 200 - Уменьшаем вес картинки.
Часть 201 - Рамочки со знаками зодиака
Часть 202 - Как разместить музыку в пост
Часть 203 - Рамки-занавес
Часть 204 - Огненные буквы
Часть 205 - Плееры для постов
Часть 206 - Добавляем анимацию на картинку
Часть 207 - Все о файлах mp3
Часть 208 - Иллюстрации. Красивые.
Часть 209 - Слайд-шоу. Программа
Часть 210 - Все для блога
Часть 211 - Добавляем видео в блог
Часть 212 - Делаем коллаж
Часть 213 - Программа Auto Painter
Часть 214 - Программа JACS ANIMATIONS SCHOP
Часть 215 - Создаем слайд-шоу и муз. плееры
Часть 216 - Урок по слайд-шоу и музыке(к предыдущему посту)
Часть 217 - Делаем нащписи на картинках
Часть 218 - Пишем красиво свое имя
Часть 219 - Генератор фотографий
Часть 220 - Пейзажи для дневников
Часть 221 - Разделители красные
Часть 222 - Делаем баннер кликабельным
Часть 223 - Бордюры
Часть 224 - Коды для блога
Часть 225 - Для оформления блога, ссылки
Часть 226 - Новое на ЛиРу, сообщения в виде списка
Часть 227 - Делаем баннер кликабельным
Часть 228 - Как сохранить и вставить картинку
Часть 229 - Сундучок подсказок, оформляем блог
Часть 230 - Открыткин склад
Часть 231 - Картинки в линеечку
Часть 232 - Ставим бродилку в блог

Из дневника Нина Подольская 4

Всё для оформления и ведения дневников

По лиру ходит очень много подобных постов. Здесь всё необходимое объединено в одном сабже, чтобы не скакать, если возникнет нужда.

очень много информации

тапки из войлока

тапки из войлока

Как то получая дозу впечатлений образами из интернета, мне попались на глаза тапочки. И уж очень мне захотелось их сделать. И так, тапки своими руками оцените что у меня получилось.

Вот мой эталон.

Если вы не выбрали подарок на праздник, то вы можете сваять такие тапки или купить новогодние подарки в мегапортале.

Первое что нужно сделать, это обвести стопу. Определить середину пятки. И снять мерки как описано здесь. От середины пятки верх отложить 6-7 см провести, на этом расстоянии измерить ширину пятки, поделить это измерение пополам. И из точки середины пятки через точку 1/2 ширины пятки провести вверх горизонталь.

Сделать внешний контур  стопы на расстоянии 1-1.2 см.  Отметить (.) 3 на пересечении вертикали и внутреннего контура. От неё вниз, по вертикали, отметить длину верхней детали тапок, это примерно 11-12 см (для размеров 37-39). Чрез эту точку провести перпендикуляр.

И отметить точки (0), (1), (2).

Теперь нужно измерить внутренний контур от (.) 1 до (.) 2. Мои измерения 12,2 см. От (.)  2 до (.)3, мои измерения — 17,3 см. От (.) 3 до (.) 0, мои измерения — 16,7 см От (.) 0 до (.) 1, мои измерения 12.5 см.

От (.) 0 вправо отложить высоту тапка 5-6 см, отметить (.) 5.

Вниз из (.) 5 перпендикуляр. Параллельно линии из (.) 5 провести горизонталь — касательную к контуру внешней стопы. Точка касания у меня в (.) 4. Точку пересечения с горизонталью (.) 10.

Из(.) 5 провести касательную к верхней части внешнего контура стопы, (.) 6.

От (.)10 вниз, по вертикали, отложить значение измерения от (.) 0 до (.) 1 — 12.5 см, обозначить (.) 11.

От (.) 11 вниз, по вертикали, отложить значение измерения от (.) 1 до (.) 2.  12,2 см, обозначить (.) 12. Через (.) 12 провести горизонталь.

От (.) 12 вправо отложить измерение с фото 5 в статье про построение тапок, минус высота тапка и минус ширина контура 1 см.

Мои вычисления 21-5-1=15 см, отметить (.) 50. Вниз вертикаль.

От (.) 12 вниз отложить измерение верхней детали 11-12 см, провести вправо горизонталь.

Из нижнего угла провести диагональ или биссектрису, отложить 2.5 см и через эту точку вывести плавную линию.

От точки (.) 12 по получившейся плавной линии отложить измерение от (.)  2 до (.)3,  — 17,3 см, отметить (.) 13.

Линию от (.) 13 до (.) 50 равна измерению от (.) 3 до (.) 0, мои измерения — 16,7 см и угол я получила опытным путём, просто прикладывала сантиметровую ленту и выясняла какой может получиться угол.

Из (.) 6 перпендикуляр. Измерить и сложить расстояния внутреннего контура от (.) 3 до (.) 61 и внешнего от (.) 6 до (.) 5 и отложить получившийся отрезок от (.) 13 вправо по лекальной линии, отметить (.) 16.

Оформить прогиб на вертикали из (.) 5 равный о.5 см и вывести последнюю лекальную линию от (.) 0.5 до (.) 50. Выкройка тапок своими руками готова.

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

Разрез стельки начинается в (.) Р. Сколоть макет совмещая точки.

Вот что в итоге получилось. Меня всё устроило, кроме того, что пятка сильно отстаёт. Заколола лишнее на макете в пятке. 

Корректировка в пятке. Из (.) 11 перпендикуляр. Сделать вытачку на ширину лишних 1.5 см. Разрезать по одной из граней вытачки, соединить грани вместе, скрепить скотчем или клеем. Фото нет.

Из войлока вырезать две детали получившейся выкройки. Из кожи или кож зама вырезать подошву по внутреннему контуру стопы. Наклеить при помощи любого резинового клея. Дать возможность схватиться и если позволяет машина пришить. У меня позволяет. Или пришить вручную, а ещё можно отнести в сапожную мастерскую, прошьют, я думаю при вас.

В качестве соединительного материала я использовала косую бейку, в оригинале шнурок от кроссовок. Что бы протиснуть иглу я сначала делала дырку при помощи строительного ножа, если вы найдёте другой способ соединения, буду рада, если поделитесь. Наверное можно соединить цветным вощённым шнурком и прокладывать стежки чаще, но мне хотелось получить что то похожее на оригинал. Вкалывать иглу на расстоянии от края на 1 см не забывая совмещать контрольные точки, которые, я надеюсь вы перенесли при раскрое.

Иногда приходилось вынимать иглу с помощью пассатижей.

Ну вот и результат. Очень удобные, симпатичные и теплые тапки своими руками.

Уютных и теплых тапочек на ваши ножки, дорогие рукодельницы!         Мастерская рукоделия Алёны Масловой:-http://alyonamaslova.ru/shitie-kroi/obuv/eshhyo-odni-tapki-iz-voyloka

Шьем комнатные теплые тапочки.Выкройка в натуральную величину

Шьем комнатные теплые тапочки. Выкройка в натуральную величину

Читать подробнее →

/static.mtml.ru/images/v4/bg-social-buttons-big.png" target="_blank">http://static.mtml.ru/images/v4/bg-social-buttons-big.png); background-position: 0px 0px;">   /static.mtml.ru/images/v4/bg-social-buttons-big.png" target="_blank">http://static.mtml.ru/images/v4/bg-social-buttons-big.png); background-position: -120px 0px;">   /static.mtml.ru/images/v4/bg-social-buttons-big.png" target="_blank">http://static.mtml.ru/images/v4/bg-social-buttons-big.png); background-position: -80px 0px;">   /static.mtml.ru/images/v4/bg-social-buttons-big.png" target="_blank">http://static.mtml.ru/images/v4/bg-social-buttons-big.png); background-position: -240px 0px;">  

Шьем ботики для дома

Время работы:

3 часа

Найдено на сайте  Ярмарка Иастеров

Здравствуйте, меня зовут Марина. Я люблю домашние уютные вещи. Я шью вот такие тапки-ботики. И сегодня решила поделиться с Вами как это делать:)    Выкройка универсальная для разных моделей.  Дело только в отделочных деталях и Вашей фантазии :)
Выкройку в натуральную величину  я не смогу привести, только ее формы, как она должна выглядеть, плюс некоторые размеры (сантиметры) , а также подскажу как ее построить самому и по своей ножке. На миллиметровой бумаге выкройка дана для размера 37-38 двух основных деталей. Размеры остальных деталей есть здесь  в описании.

Вот так выглядит сама выкройка:

 Стопа-подошва, носочно-пяточная часть, кружок - цветок (с бусиной в центре) для отделки. Вытянутая деталь - это ушко зайчика  для тапок "Зайчиков"

Внимание!  Этот же кружок является и заячим хвостиком, если кто-то захочет сшить тапки "Зайчики", основная выкройка та же.

Читать далее...