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»