Поточний час:
Сьогодні 22 листопада, середа 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 3 дня

Ваш ip адрес:54.80.169.119

Доброї ночі!
Ви обновили сторінку в 3 : 56
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 27
Кількість міток на блозі: 3

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

 

Post_75aПривет сегодняшняя публикация будет касаться создания такого элемента для сайта как кнопки. Кнопки которые должны быть расположены в зоне горизонтального меню.

В предыдущих публикациях расположенных в категории “Все о html” говорилось как создать горизонтальное меню, как создать ссылку на каждую страницу, однако название страницы в меню выводилась обычным надписью.

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

Я долгое время искал каким образом возможно создать подобное меню для сайта. Ведь такой вид который вы видите на фото тяжело назвать горизонтальным меню, конечно нажав на надпись с подчеркнутым словом, произойдет переход на нужную страницу, но если браться создавать хотя бы более менее нормальный дизайн, то меню в виде кнопок просто необходимо.

batton1

⇑горизонтальне меню

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

Взятые данные из библиотеки стилей CSS. Собственно из папки где находятся все стили я вытащил один файл и прописал ссылку на него. В результате получилось меню с красиво оформленными кнопкам.  

 

Далее действия, которые нужно сделать для того чтобы добавить кнопки в меню . [/ stextbox]

1 – Для начала открываем текстовый редактор, не у каждого присутствует Dreamweaver, но каждый может установить себе Notepad ++, также очень хороши редактор, редактор который я не раз рекомендовал в предыдущих постах, который сможет восстановить такой же код, который был до того когда вы открыли его в редакторе.

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

2 – Что нужно сделать в текстовом редакторе это скопировать сначала данный код который  находится в здесь и поместить строки кода в редактор, далее дать имя файла и расширение CSS. Как вы видите код большой склаждаеться из 292 строк.

3 – после того как мы скопировали код и сохранили в файл с расширением CSS, помещаем этот файл в корневой каталог папки сайта. Не требуется Файл вставлять в папку CSS.

4 – теперь нужно подключить файл в html-страницы, для этого прописываем ссылку

 <Ссылка отн = тип “таблица стилей” = “текст / CSS” HREF = “buttonize.min.css”>

batton2

подключить файл в html-страницы

buttonize.min.css  – как вы догадались пожалуй, это название файла, вы можете внести дать любую другую название, но расширение должно быть css, ну и прописываете конечно, не buttonize.min.css а ваше название.

href = дальше пишите название вашего файла.

Где прописывается ссылку в области между тегами <head> </ head> я стараюсь всегда прописывать перед закрывающим тегом </ head>.

5 -С алишилось только добавить кнопку к вашему меню

<a href=”#” class=”button”> </a> Кнопка

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

например в 

<a href=”index.html”> <сильный> Головна </ сильный> </a>

додаетться

“#” Класс = “Кнопка”   <a href=”index.html””#” class=”button blue”> <сильный> Головна </ сильный> </a>

где <a href = – значит прописываем ссылки. “index.html” – главная страница сайта “#” class = “button blue” – добавляем код кнопки, если удалить “blue” кнопка будет серой.

Если хотите чтобы внутри кнопки кроме названия отображалась иконка, вместо “blue” прописываете название иконки, например “star” или “heart” а иконку сохраняем в папке images.

batton3

⇒ “#” класс =

Которые подойдут изображения, это иконки 16х16 пикселей в формате .png Например <a href=”href.html””#” class=”button heart”> Ссылка </a> – в середине кнопки появится сердечко. <A href = “video .html “” # “class =” button star “> Мои видео </a> – в середине кнопки появится звездочка.

meniu3

⇑Все кнопки при условии выполнения всех действий появятся на экране

Все кнопки при условии выполнения всех действий появятся на экране при открывании страницы сайта, или просто html-страницы, ничего сложного в том, чтобы добавить в меню кнопки нет, обычно для этого нужно практиковаться.

В принципе ниже я размещу ссылки с какого ресурса код кнопок.

http://css3framework.co.uk/v3/

На этом все к встрече, собственно если хочет узнать как создать сайт на языке html и css тогда можит перейти по ссылке ниже и прочитать публикации “Как создать сайт на html”

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *