Покрокове створення сайту html. Частина 2

2

Від автора: здрастуйте, шановні читачі блогу webformyself. У цій статті буде показано покрокове створення сайту html. Ми продовжимо роботу з сайтом, отриманими в результаті дій попередньої статті. Якщо не читали, то нічого, посилання буде дана. Там ми вже розібрали на практиці частина кроків, тому тут вони будуть описані лише в теорії, зате ми доопрацюємо наш простенький сайт. Ви також можете завантажити вихідні файли з кодом.

Планування

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

Підготовка до роботи

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

Створення та оформлення базової структури.

У цій статті ми створили чотири головних структурних блоку простого шаблону – шапку, бічну колонку, основну частину і футер. Ми це зробили з допомогою html-тегів. Після цього потрібно було оформити ці елементи і сайт став набагато привабливіше.

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

Уроки створення сайту html потрібно проходити покроково. Наприклад, на нашому сайті в преміум-розділі вся інформація подається від простого до складного.

Створення і оформлення додаткових елементів

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

Працювати потрібно знизу вгору. Це необов’язково, просто так зручніше. Спочатку займайтеся оформленням шапки. Наприклад, що у нас зазвичай розміщують вгорі сторінки? Правильно, логотип і назва сайту. Давайте ми теж це зробимо. Для шапки у вас уже заданий колір тла, тепер потрібно встановити фонове зображення. Я вибрав в якості фонового зображення файл html5.png, який потрібно скопіювати туди ж, де лежить наша сторінка.

Покрокове створення сайту html. Частина 2

#header{
background: #D2E4AF url(html5.png) no-repeat 10% 50%
}

Дуже складно буде пояснити вам цю сходинку в повній мірі, якщо ви вперше працюєте з CSS. Коротко: дописали після кольору адреса зображення, вказали, що його не потрібно повторювати і поставили позицію щодо блоку: зрушення на 10% ширини блоку вліво від лівого краю по горизонталі і на 50% від висоти вниз від верхнього краю по вертикалі. Нагадую, що все це потрібно прописувати для блоку header. Якщо все зроблено правильно, логотип з’явиться в шапці. Природно, можна використовувати і своє зображення, заодно і потренуєтесь.

Давайте тепер в шапці розмістимо красиву назву сайту. Заголовки в html задаються тегами h1-h6, залежно від розміру та важливості заголовка. Безумовно, заголовок сайту дуже важливий, тому укладаємо його в парний тег h1.

Назва сайту

Відмінно, у нас з’явився новий елемент. Як тепер до нього дотягнутися через CSS? Дуже просто:

#header h1{
color: orange;
text-align: center;
text-shadow: 0 0 2px blue
}

Ми вказали, що дані правила треба застосувати до всіх тегів h1, що знаходяться усередині блоку з id = «header». Тобто до всіх найбільшим заголовків всередині шапки. Я вирішив зробити колір заголовка помаранчевим, відцентрувати його і дати невелику синю розмиту тінь. Вам необов’язково зараз розбиратися в написаному, просто скопіюйте собі на таблицю стилів.

Оновимо нашу сторінку і побачимо, що в цілому шапка стала в рази красивіше, хоча на реальному сайті у ній зазвичай міститься щось ще.

Покрокове створення сайту html. Частина 2

Вставляємо меню в бічну колонку

Бічна колонка часто використовується для того, щоб вивести в ній головну навігацію по сайту. Давайте і ми зробимо також. Нам потрібен список. Яким тегом він задається? Тегом ul, а окремі його пункти полягають в теги li. Простіше показати на прикладі:

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5

Звісно, в реальному проекті будуть назви розділів сайту, а не текст: «Пункт 1». І це будуть посилання. Тобто ось так:

  • Пункт 5
  • За замовчуванням поруч з кожним пунктом списку виводиться маркер. У цьому випадку він нам не потрібен. Прибрати його можна так:

    #sidebar ul{
    list-style: none
    }

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

    #sidebar ul li{
    border-bottom: 2px solid orange;
    width: 55px
    }

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

    #sidebar ul li:hover{
    background: orange;
    color: white
    }

    Вставте цей код і оновіть сторінку. Начебто непогано, так?

    Оформляємо контент

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

    #content{
    padding: 10px
    }

    Ну а над низом сторінки можна довго не мучитися. Вставте туди копірайт, наприклад, та встановіть його. Я пропоную останнє редагування: на самому початку розробки шаблону ми зробили трехпиксельные рамки всім основним структурним блокам. Давайте зменшимо їх до одного пікселя, а то занадто товсті.

    Підсумок

    Покрокове створення сайту html. Частина 2

    Отже, вийшло щось симпатичне. Нашою метою не було створити крутий шаблон – на це може піти багато днів роботи. Моєю метою було показати вам, як взагалі створюється сайт, за якими принципами це робиться. У нас вийшов найпростіший шаблон, який тепер можна допрацьовувати скільки завгодно. Навіть веб-дизайнер нам з вами не знадобився, самі по-швидкому підібрали кольори.

    Це було покрокове створення сайту html для чайників. Простіше вже нікуди. Якщо вам сподобалося, ви можете продовжити вивчати html, css та інші веб-технології на нашому сайті. І одного разу, може бути, створити сайт вам буде простіше, ніж посмажити картоплю.