На цій сторінці, до вашої уваги продовження ряду публікацій “Як створюємо сайт на HTML” мета цих публікацій така, це створити сайт з простенького html шаблону, використовуючи тільки редактор, і не застосовуючи при цьому ніяких спеціальних програм для створення сайтів, на цій сторінці продовження, і далі буде говоритись про такий елемент, як горизонтальне меню.

Зрозуміло, що інформація в принципі розрахована для початківців, це та категорія яка тільки починає вивчати  веб дизайн, хоча  можливо,  також  знайдеться  дуже   цікаваі  інформація, і для будь кого з вас.

А саме, як на раніше створеному сайті, це сайт, про який писалось  минулого разу, і який створювався з звичайного шаблону, звісно що публікація на цій сторінці(створення горизонтального меню), також і для любого сайту може стосуватись.

Отож, інформація яка знаходиться тут, а саме на цій сторінці, це інформація в якій ви дізнаєтесь, як додати красиве горизонтальне меню на сайт, меню у вигляді кнопок.

В загалі то, сама інформація на цій сторінці більше повязана з інформацією  до двох  інших сторінок,  які стосуються створення сайту з нуля, посилання на ті дві сторінки знайдете в самому кінці, а на цій сторінці як вже відзначав, ви знайдете інформацію, (як зробити горизонтальне меню у вигляді красивих кнопок), я звичайно що за приклад буду брати той створений  раніше мною сайт,  про те як створювався такий сайт, також написано в  матеріалах тих сторінок.

Цей сайт складається поки що тільки з шести сторінок, сам виглядає сайт поки що дуже простенько, я взагалі то використовую цей сайт для  опису різних публікацій, а заодно також і практикуюсь, під  час тестування  деяких  цікавих елементів.

Сайт який створений тільки з звичайного html – шаблону, як я сам переконався, також можна робити самому чим  раз кращим, або навіть  і більш функціональнішим, якщо  додавати до нього різні необхідні елементи.

Ну і як ви самі розумієте, горизонтальне меню, такий елемент також повинен  красиво дивитись на сторінці, мати скажем просто належний вигляд, хоча  б  такий  вигляд як  звичайнісінькі кнопки, а не мати саме такий вигляд, як прості  слова з значенням “головна”, “про мене”, “контакти” і т.д.

Звичайно що назва сторінок повинна бути присутня в меню, і в кожного з вас є бажання, створити в себе на сайті красиве горизонтальне меню, щоб було так як на багатьох сайтах, щоб в меню назва сторінки відображалось кнопкою, слова які вказують на сторінку, і знаходяться в середині кнопок, так все ж таки красивіше дивиться на сторінці, ніж меню в котрому виставлено просто пару слів в ряді, і лише їх значення вказує,  що це є сторінки. 

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

Продовжуючи удосконалювати свої навики в веб – дизайні, я винайшов в мережі спосіб, за допомогою якого,  навіть не зважаючи на те, що ви можливо тільки лише починаєте засвоювати ази веб – дизайну, ви всерівно легко зможите на своєму сайті, створити красиве горизонтальне меню у вигляді кнопок.

Беручи за приклад,  публікацію “Як створити кнопки для сайту підключивши стилі CSS”, на цій сторінці також описано як створити таке меню у вигляді кнопок, в себе на тестовому сайті практикуючись, в мене получилось створити красиве меню у вигляді кнопок, і саме таку інформацію я вирішив ще раз викласти на цій сторінці, для вас.

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

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

Користуватись таким меню можна також, тому що не має значення, чи клацнувши на назву сторінки у вигляді слова, чи клацнувши на кнопку в якій також назва тієї сторінки, так чи інакше, всерівно вас перекинить за посиланням  на  сторінку.

Але  кожен з вас погодиться, що меню у вигляді кнопки, набагато краще дивиться, ніж меню у вигляді звичайних слів.

Post-75

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

3html

В принципі, як я вже зазначав  на початку публікації, що такий матеріал (як створити красиве горизонтальне меню у вигляді кнопок), вже присутній на блозі. На цій сторінці, можливо ще більше  доступніше  розяснення, ця сторінка створена з метою, щоб початківцю було як найкраще все зрозуміти.

 

Ну що ж, вже починаемо створювати таке меню, і ще пару слів, розяснення перед початком створювання такого меню.

Ітак, як взагалі можна зробити так, щоб відобразити  кнопки на сторінці в браузері. Кнопки створяться автоматично, якщо вказати в посиланні команду, це прописати “клас” який буде вказувати, щоб відображались саме кнопки, це (class=”button”), а також  кнопку ще  можна відобразити на сторінці, за рахунок графічного файлу.

І про те як відобразити кнопку, вказавши саме в коді “клас” в рядку після посиланння, а також про те як вивести кнопку за рахунок графічного файлу, про такі задачі, говорилось в минулих публікаціях, а саме, інформація як виводився графічний файл  у вигляді “стрілочки”, так само можна зробити і для кнопки, вказавши посилання на графічний файл, в котрому буде красива кнопка.

Щоб кнопка мала красивий вигляд, зокрема скажем, кути підрізані і т.д, тому подібне, графічний файл можна “підшаманити” в графічному редакторі, або можна і скачати такі кнопки з спеціальних ресурсів, звісно що скачати все таки легше, ніж самому зробити,  тим більше якщо не маєте практики роботи з подібними програмами, які призначені для редагування графічних файлів.

Звісно, що якщо графічний файл у вас відсутній, тоді потрібно прописати в коді значення для відображення кнопок, тоді відобразиться кнопка, але буде з дуже скудним видом, зробити вигляд кнопок суперовим за рахунок прописання значення в коді, також можна звичайно.

Але для цього потрібно буде добряче повозитись з стилями css, повозитись ще не все, потрібно знати, а точніше мати вже хорошу практику по цій технології, в іншому випадку не варто самому братись.

Хоча по любому, щоб кнопки в горизонтальному меню відображались як “душа забажає”, всерівно прийдеться повозитись трошки в файлі, саме в кодах цього файлу “buttonize.mim.css”, рідко коли так буває, щоб все на сторінці виставилось, як ви хочите.

Ітак, що далі потрібно зробити, знайти  інформацію на сторінці “buttonize.min.css”, там є в наявності готовий код, скопіювати цей код, і додати, вставивши лінк в потрібне місце.

“buttonize.min.css” — так називається сторінка на Zura — Blog, підвівши курсор миші до кнопок горизонтального меню, шукаємо сторінку яка називається “CSS”, і з випадаючого  списку коли підведемо курсор до “CSS”, появиться саме назва “buttonize.min.css”, клацнувши на яку, ви перейдете на сторінку, і на ній готовий код.

В верху на сторінці “buttonize.min.css”, коротка вказівка що потрібно зробити, зробити щоб горизонтальне меню у вигляді кнопок появилось у вас на сторінці, потрібно всього то створити файл з розширенням css, додати той код, і зберегти, вставити цей файл в кореневу папку сайту.

Не в папку “CSS”, або в якусь іншу, а тільки в кореневу, оскільки в коді прописані посилання з розрахунком на головну папку, якщо додати в якусь іншу, тоді прийдеться в коді міняти рядок, в котрому стоять посилання.

Отож приступаємо, і  “вперед за орденами” .

Створюємо кнопки

1 — переходимо на сторінку  копіюємо код buttonize.mim.css який там знаходиться, відкриваємо редактор, створюємо файл з розширенням css, і назвою “buttonize.min.css” інша назва не підійде, ну і розширення також 😀 .

Розміщуємо скопійований код в кореневій папці, зберігаємо файл з розширенням сss, і розміщуємо збережений файл в кореневій папці сайту, в іншому випадку нічого не появиться.

І звичайно вибираємо місце в рядках коду, де саме знаходяться посилання які зєднюють сторінки, кнопки звісно що зразу не появляться, щоб кнопки появились там де ми плануємо, тай взагалі щоб спочатку появились кнопки, потрібно в кодах для меню зробити зміни.

2 — В тому місці де в коді знаходяться  посилання на сторінки сайту, після дужки яка закриває посилання, додаємо значення (решітку) і прописуємо клас ”#” class=”button”>Кнопка</a> до <a href=”index.html”> прописуємо вказане вище.

або замість

<a href=”index.html”><strong>Головна</strong></a>

додаємо, або просто міняємо рядки коду

<a href=”index.html””#” class=”button blue”><strong>Головна</strong></a>

Ті самі дії, до кожного посилання  сторінки.

Потім необхідно вказати,  в області “head”, краще перед закриваючим тегом </head>, для того щоб підєднатись до файлу “buttonize.min.css”, там прописується  такий лінк  

<link rel=”stylesheet” type=”text/css” href=”buttonize.min.css”> 

<link rel="stylesheet" type="text/css" href="buttonize.min.css">

назву файлу “buttonize.min.css”. хоча ви в принципі можите вказати і свою назву, яку ви надасте при створенні файлу CSS, якщо ця чимось не влаштовує.

Якщо все зроблене правильно,  тоді мають зявитись кнопки. Правда розташування кнопок виглядає поки що не дуже, скажем коректно, а саме поки що знаходяться під лінією, звісно що краще було б перенести кнопки на лінію, ну а якщо не получиться, тоді вже можна і поміняти колір, червоний на білий.

meniu1

⇑кнопки  розмістити на даній даній лінії

Зверніть увагу на “срічку”, яка на сторінці знаходиться  між фото “Монстрика” в області “header” і кнопками горизонтального меню, ці кнопки призначені для сторінок сайту.

Саме ці кнопки, нам потрібно розмістити на цій тій лінії. Звідки взялась ця  “стрічка”, на сторінках які присвячені минулим текстам, про такий графічний файл який називається “стрічка” говорилось тоді, файл знаходиться в папці “imeges”.

Для того щоб у вас появилась така “стрічка”, потрібен любий графічний файл, який буде відображати лінію, на нього звичайно що потрібно буде вказати, посилання вказується в кодах сторінок, бажано щоб графічний файл знаходився в спеціально створеній папці, це папка в котрій знаходяться всі графічні файли, які потрібні для вашого сайту.

Дальше, вибираєте місце на сайт, місце де у вас має  відображатись ця “стрічка”, у вигляді  лінії, і прописуєте посилання на нього.

Коли лінія відобразиться, якщо “стрічка”  вас в тому місці влаштовує, тоді міркуєте як розмістити на ній кнопки, щоб в кінцевому підсумку у вас получилось красиве горизонтальне меню з кнопками.

<td height ="40" align="center">
<div id = "header2">
<a href="index.html" "#" class="button blue"><strong>Головна</strong></a>
<a href="video.html""#" class="button">Мої відео</a>
<a href="href.html""#" class="button">Посилання</a>
<a href="imagin.html""#" class="button">Фото</a>
<a href="despre.html""#" class="button">Про мене</a>
<a href="contact.html""#" class="button">Контакти</a>
<a href="programs.html""#" class="button">Програми</a>
</div>

Зараз гляньте на код вище. Порівняйте з попереднім, який знаходиться на сторінці  “Як створюємо сайт на HTML”, уважно придивіться які зміни потрібно зробити. 

<a href="index.html"><strong>Головна</strong></a>
<a href="video.html">Мої відео</a>
<a href="href.html">Посилання</a>
<a href="imagin.html">Фото</a>
<a href="despre.html">Про мене</a>
<a href="contact.html">Контакти</a>
<a href="programs.html">Програми</a>

class=”button blue” —  слово “blue”, додається для того щоб кнопка відображалась синього кольору, вказуючи на сторінку, в яка відкрита в вкладці.

Для того щоб розмістити конпки на “стрічці”, потрібно в стилях css прописати правило.

А на сторінці в кодах, область в якій розміщені посилання на сторінки сайту, власне всі посилання які сторінки сайту зєднються між собою, їх всіх потрібно взяти в блок “div”, і вказати індентифікатор.

 

3 — Отож потрібно розмістити кнопки на  цій  “стрічці”, і що для цього потрібно зробити,

  а) спочатку прописати правило, в папці де розміщені файли стилів css, в файлі style, (в вас може бути і інша назва), хоча як за звичай саме таку назву має файл в котрому розміщують правила для шрифтів, зображень і т.д.

Прописуєте це правило, в котрому вказаний атрибут і посилання на файл.


#header2{
background-image:url(../images/nav.png);
}

#header2{
background-image:url(../images/nav.png);
}

  б)далі шукаємо на  сторінці  область, в котрій розміщені посилання на всі основні сторінки сайту, і їх всіх потрібно взяти в блок “div”, для того щоб вказати, на яким правилом повинен керуватись  даний  блок.

В мене виставлено правило яке має назву “header2”, в кінці всіх посилань закриваємо блок </div>.

meniu2

⇑посилання на сторінки сайту, потрібно взяти в блок div

<div id = “header2”>
<a href=”index.html” “#” class=”button blue”><strong>Головна</strong></a>
<a href=”video.html”“#” class=”button star”>Мої відео</a>
<a href=”href.html”“#” class=”button “>Посилання</a>
<a href=”imagin.html”“#” class=”button “>Фото</a>
<a href=”despre.html”“#” class=”button “>Про мене</a>
<a href=”contact.html”“#” class=”button “>Контакти</a>
</div>

<div id = "header2">
<a href="index.html" "#" class="button blue"><strong>Головна</strong></a>
<a href="video.html""#" class="button">Мої відео</a>
<a href="href.html""#" class="button">Посилання</a>
<a href="imagin.html""#" class="button">Фото</a>
<a href="despre.html""#" class="button">Про мене</a>
<a href="contact.html""#" class="button">Контакти</a>
<a href="programs.html""#" class="button">Програми</a>
</div>

Якщо все зроблено правильно, тоді мають зявитись кнопки в середині фото – стічки.

meniu3

Звичайно, що це ще не все. Потрібно далі над кнопками “пошаманити”. Щоб зробити їх вигляд прийнятнішим. Можна і все залишити сказавши собі “І так зійде”. Але буде як мультфільмі про зайця, чи кота не памятаю вже героя того персонажу.

Як би там не було, а так не підійде,  тому що не дуже красиво ці кнопки дивляться на сторінці. Що можна зробити. Збільшити кнопки, або зменшити, а також зблизити одна з одною, по краях бажано виставити інші розміри.

Все це беспосередньо вже робиться в файлі “buttonize.mim.css”. Відкриваєте файл в текстовому редакторі, і робити зміни в кодах, перезапускаючи сторінку щоб підігнати все під розмір тієї сторінки.  

margin — зблизить або віддалить кнопки між собою.

padding-left, padding-right — виставить кнопки по краям.

В принципі не бачу сенсу детально вказувати на всі  атрибути,  оскільки налаштування кожен з вас всерівно буде робити самостійно на свому сайті, звісно що знання по стилям css потрібне, в кого вони є, то без проблем все підгонить під свій проект, ну якщо хто з вас, зовсім не кумекає в каскадних таблиць стилей.

Screenshot_10

Тоді, робіть таким чином, просто міняючи числа в атрибутах, і зразу перезапускаючи сторінку дивимось на результат, в кінцевому підсумку таким способом також получиться налаштувати кнопки, для свого проекту. 

До зустрічі !


 

На відеоролику у вас є можливість переглянути, як створити красиве горизонтальне меню у вигляді кнопок, це відео додаток до сторінки “Горизонтальне меню з кнопок за допомогою стилів CSS” в який більш детально описана така інформація.


user_97

Сторінки які стосуються створення сайту з звичайного html шаблону на мові гіпертекстової розмітки HTML, застосовуючи тільки редактори, без допомоги спеціальних програм, які призначені для створення сайту.