Стаття знайдена мною на просторах Інтернету присвячена створенню меню і містить посилання на робочий зразок і посилання на архів з вихідними кодами. Я опишу як покроково створити аналогічне меню для будь-якого блогу приділивши вивченню HTML мінімум часу.
Для простоти розуміння розділю виконання робіт на кілька етапів, і по можливості по завершенню кожного з них приведу результат виконання.
Етап 1. Структура меню
Пропоную розглянути створення меню на конкретному прикладі. В якості прикладу я використаю блог учителя історії для якого (на мій суб'єктивний погляд) доцільно використати замість гаджета "Сторінки" випадаюче меню.Нижче по тексту я розмістив: з лівого боку - екранна копія гаджета, а з правого я на основі цього "списку" створив структуру майбутнього меню. В моєму варіанті елементи першого рівня починаються від початку стрічки, елементи другого починаються з дефісу. Моє меню буде дворівневим. Звичайно своє меню Ви можете групувати так як вважатимете за потрібне, а кількість рівнів вибрати на свій розсуд (5 рівнів цілком можливий варіант).
Зауваження. Продумуючи структуру головного меню (тобто перший рівень) враховуйте ширину свого блогу. Велика кількість пунктів чи занадто довгі назви пунктів призведуть до того, що меню не поміститься в одну стрічку.
На головну
Все про історію
-Історія в школі
-Історія для допитливих
-Історичні відео матеріали
-Презентації
Наші діти
-Наші таланти
-Класне життя
-Проектна діяльність
Нормативні документи
-Права та обов'язки учнів
-Новини в освіті
-Методична сторінка (критерії оцінювання)
-Запрошуємо до обговорення
-ЗНО = ДПА
Корисні посилання
-Сайт гімназії
Етап 2. "Опишемо" меню за допомогою мови розмітки (HTML)
На даному етапі нам знадобиться хоча б мінімальне розуміння основних понять HTML. З цією метою пропоную ознайомитись із коротким описом HTML, та переглянути інформацію про деякі елементи мови розмітки, які ми використаємо в подальшій роботі.Свою структуру меню я набрав у блокноті, тепер я модифікую її наступним чином:
- На початку кожної стрічки вставимо комбінацію символів:<li><a href="#">
- В кінці кожної стрічки вставимо комбінацію символів: </a></li>
- Перед кожною групою стрічок у яких попереду стоїть дефіс вставимо комбінацію символів: <ul>
- Після кожної групи стрічок у яких попереду стоїть дефіс вставимо комбінацію символів: </ul>
- Перед списком вставимо комбінацію символів: <ul>
- Після списку вставимо комбінацію символів: </ul></div>
- Для кожного пункту меню першого рівня (без дефіса на початку), після якого ідуть вкладені пункти з дефісом, модифікуємо початок стрічки. У тег <li> вставимо параметр class="parent", після чого він матиме вигляд: <li class="parent">
- Для всіх пунктів меню, що мають підпорядковані пункти, символи у кінці стрічки </li> вирізати (Ctrl+X), та вставити (Ctrl+X) перед наступним пунктом того ж рівня.
В результаті описаних маніпуляцій я отримав таку структуру:
| <div id="mainmenu"> <ul> <li><a href="#">На головну</a></li> <li class="parent"><a href="#">Все про історію</a> <ul> <li><a href="#">-Історія в школі</a></li> <li><a href="#">-Історія для допитливих</a></li> <li><a href="#">-Історичні відео матеріали</a></li> <li><a href="#">-Презентації</a></li> </ul> </li> <li class="parent"><a href="#">Наші діти</a> <ul> <li><a href="#">-Наші таланти</a></li> <li><a href="#">-Класне життя</a></li> <li><a href="#">-Проектна діяльність</a></li> </ul> </li> <li class="parent"><a href="#">Нормативні документи</a> <ul> <li><a href="#">-Права та обов'язки учнів</a></li> <li><a href="#">-Новини в освіті</a></li> <li><a href="#">-Методична сторінка (критерії оцінювання)</a></li> <li><a href="#">-Запрошуємо до обговорення</a></li> <li><a href="#">-ЗНО = ДПА</a></li> </ul> </li> <li class="parent"><a href="#">Корисні посилання</a> <ul> <li><a href="#">-Сайт гімназії</a></li> </ul> </li> </ul> </div> |
Етап 3. Перевірка працездатності HTML-коду
Прийшов час перевірити працездатність нашого творіння. Для цього я використаю онлайн HTML-редактор.- Відкриваємо редактор.
- Копіюємо отриманий нами код та вставимо його в ліву верхню область екрана підписану "HTML".
- Натиснемо кнопку "Tidy", щоб програма відформатувала наш код.
- Натиснемо кнопку "Run", і переглянемо результат роботи в правій нижній області де має з'явитись наше меню, поки що у вигляді дворівневого, вертикального списку посилань (див. нижче). Тепер якщо із структурою меню все добре можна видалити дефіси у вкладених пунктах меню.
Попередній результат
Етап 4. Застосування стилів оформлення
Для подальшої роботи скачайте та розпакуйте архів із початковими даними меню (посилання на сайт автора на початку цієї публікації). В архіві знаходяться два файли:- index.html - містить HTML-текст меню, саме його ми і намагались наслідувати своїми маніпуляціями.
- style.css - стилі, що визначають оформлення та ефекти меню.
- Відкрийте style.css за допомогою Блокнот (Notepad) або іншого текстового редактора та скопіюйте весь його вміст у буфер обміну. Перейдіть у HTML-редактор та вставте скопійоване у праву верхню область підписану "CSS".
- Натисніть кнопку "Run", і перегляньте результат роботи в правій нижній області екрану.
Результат після застосування стилів
Меню працює аналогічно до оригіналу. Тепер можна переходити до прив'язки сторінок блогу (сайту) до пунктів меню.
Етап 5. Виконаємо прив'язку сторінок до пунктів меню.
Якщо говорити про блог, щоб виконати цю задачу а також мати можливість перевірити результат відповідні, сторінки мають існувати і бути опублікованими.В нашому прикладі так і є. Почнемо з першого пункту меню, який у нашому випадку має вести на головну сторінку. Відкриємо блог, що взяли за приклад, на головній сторінці.
Тепер у адресній стрічці браузера виділимо та скопіюємо адресу цієї сторінки:
Далі використовуючи HTML-редактор, яким ми користувались на попередніх етапах знаходжу в HTML-коді стрічку, в якій описано пункт меню "На головну":
<li><a href="#">На головну</a></li>
В параемтрі href="#", цієї стрічки, замість символу # вставляю адресу головної сторінки сайту:
<li><a href="http://tzariuk.blogspot.com/">На головну</a></li>
Аналогічним чином пройдемось по всіх пунктах меню, що мають відкривати деякі сторінки та вставимо адреси цих сторінок.
Єдине відхилення від описаного я допустив у пункті "Корисні посилання - Сайт школи", де вставив пряме посилання на сайт школи, а не адресу відповідної сторінки блогу автора, я у його рішенні.
Для пунктів, що нічого не відкривають залишимо тег <a> без змін.
Перевірку результату можна виконувати відразу після вставки адреси відповідної сторінки, попередньо натиснувши кнопку "RUN", або ж вставити всі адреси і виконати перевірку кожного пункту меню. Для перевірки працездатності посилань натисніть кнопку "RUN", а потім виконайте команду, контекстного меню "Відкрити в новій вкладці" на відповідних пунктах нашого меню.
Готове меню:
Етап 6. Інтеграція меню в блог.
Як і створення меню, його інтеграція відбуватиметься окремо для HTML та CSS.Почнемо зі стилів (CSS), скопіюємо та вставимо їх у блог.
Зайдіть в обліковий запис Google, та відкрийте свій блог. У меню зліва виберіть пункт "Шаблон", потім у області "Зараз у блозі" натисніть кнопку "Налаштувати".
Після цього, виберіть меню "Додаткова", прокрутіть список до кінця та
виберіть "Додайте CSS", потім вставте CSS-код у спеціально відведену
область справа. Потім натисніть кнопку "Зберегти у блозі" а потім "Назад
до Blogger". Усі описані дії відмічено цифрами на малюнку нижче.
Тепер виконаємо інтеграцію HTML-коду.
!!! Всі подальші дії над своїм блогом описані в даній публікації Ви виконуєте на свій страх та ризик. Пам'ятайте, некоректні дії з Вашого боку можуть призвести до проблем у роботі вашого блогу. Тому завжди залишайте собі можливість повернути все в попередній стан.
- Зробіть резервну копію вашого шаблону. Для цього в меню "ШАБЛОН" натисніть кнопку "Резервне копіювання/відновлення".
- Виберіть "Завантажити шаблон повністю", запам'ятайте ім'я файлу, згадайте куди завантажуються файли вашим браузером, і перемістіть файл архіву в надійну папку (щоб випадково не видалити).
- У меню "Шаблон" виберіть"Редагувати HTML". У вікні, що відкрилось натисніть "Перейти до віджета" та виберіть "Header1". В результаті цієї дії курсор переміститься на текст тега <header>.
- Знайдіть такий код як показано на картинці (нижче) зверніть увагу, що текст деяких тегів можна звернути в одну стрічку (приховати) клацнувши на номер стрічки початкового тега.
- Вставте коментарі як показано на рисунку нижче. Це в майбутньому полегшить Вам пошук вставленого меню.
- Скопіюйте HTML-код нашого меню та вставте між коментарями (там де на малюнку написано "меню вставляємо тут").
- Натисніть кнопку "Зберегти шаблон", а потім кнопку "Назад"
Тепер можна переглянути результат роботи, перевірити все, можливо внести деякі зміни. І насолоджуватись.
Немає коментарів :
Дописати коментар