Вітаю учасників гуртка, читачів та підписників нашого навчального блогу! Сьогодні ми розглянемо і випробуємо на практиці код, за допомогою якого створимо шапку сайту за допомогою семантичного тегу header з логотипом, розміщеним зліва на одній лінії з назвою сайту. Максимально наблизимося до практичної ситуації, коли замовник у технічному завданні вам ставить конкретні вимоги до розміщення елементів у шапці сайту. Цей навчальний матеріал ми будемо відносити до розділу CSS, адже більшу частину завдать ми виконаємо саме завдяки CSS.
Отже переходимо до справи. Ви вперше зустрілися з терміном «технічне завдання» і потрібно розібратися що він означає, хто надає технічне завдання і з якою метою.
Технічне завдання.
Технічне завдання на створення сайту - це список інструкцій та побажань, який містить інформацію про те, який має бути сайт, як він повинен виглядати та які функції має виконувати. Це список, за допомогою якого люди, які створюють сайт, знають, яким має бути кожна сторінка, де мають розміщуватись фотографії, текст, кнопки та інші елементи. Так само в технічному завданні можуть бути вказівки про кольори, які мають використовуватись на сайті та інші деталі. Такий список допомагає зрозуміти, як має виглядати готовий сайт та допомагає відповісти на питання про те, що потрібно зробити, щоб сайт був готовий.
Технічне завдання - це документ, який містить опис того, який сайт або програму має створити розробник. Цей документ може надати замовник, тобто людина або компанія, яка платить розробникам за створення сайту або програми. Мета технічного завдання - допомогти розробникам краще зрозуміти, що саме потрібно створити, і як це має працювати. Таким чином, розробники можуть створити сайт або програму, які відповідають вимогам технічного завдання і задовольняють потреби замовника.У технічному завданні замовника містяться наступні вимоги до шапки сайту:
- Шапка має бути семантичною і не використовувати базовий блочний елемент <div>.
- Шапка має бути гнучким, адаптивним контейнером.
- Розмір логотипу 90 пікселів.
- Логотипом має бути зображення логотипу гуртка «WEB-Miditaur»
- Назва сайту має бути вирівняна по центру шапки header.
- Елементи шапки мають бути вирівняні по центру вертикалі.
- Фон шапки у вигляді градієнту з голубого на жовтий.
- Градієнт має бути горизонтальний зліва на право.
Приймаємо рішення по реалізації кожного пункту технічного завдання.
Шапка має бути семантичною і не використовувати базовий блочний елемент <div>.
Шапку пишемо за допомогою семантичного тегу <header>.
<header></header>
Шапка має бути гнучким контейнером.
Flexbox (гнучкий контейнер) - це механізм управління розміщенням та вирівнюванням елементів внутрішнього контейнеру. З його допомогою можна створювати гнучкий дизайн, який легко адаптується до різних розмірів екрану і пристроїв.
Зокрема, за допомогою Flexbox можна вирівнювати елементи по вертикалі та горизонталі, задавати їхню ширину та висоту, контролювати простір між елементами, змінювати порядок відображення елементів, збільшувати або зменшувати розмір елементів в залежності від доступного простору тощо.
Таким чином, використання Flexbox дозволяє нам виконати пункти 2 і 6.
header {
display: flex; /* Встановлюємо контейнеру з класом header флекс властивості */
align-items: center; /* Вирівнюємо елементи по вертикалі */
justify-content: space-between; /* Розміщуємо елементи між собою зі звичайним відступом */
}Розмір логотипу 90 пікселів.
Для задання розміру логотипу в 90 пікселів, потрібно використати CSS властивість width та вказати в неї значення 90px.
.logo {
margin-right: 20px; /* Додаємо відступ справа до елемента з класом logo */
max-width: 90px; /* Задаємо максимальну ширину для елемента з класом logo */
}Логотипом має бути зображення логотипу гуртка «WEB-Miditaur».
Напишемо рядок коду, який відповідатиме за вставку зображення логотипу в шапку веб-сторінку. Атрибут "class" задає CSS-клас "logo" для цього зображення, щоб можна було стилізувати його за допомогою CSS. Атрибут "src" містить посилання на зображення логотипу гуртка «WEB-Miditaur», яке має відображатисьв шапці сторінки. Атрибут "alt" містить альтернативний текст, який буде відображатись в тому випадку, якщо зображення не завантажиться на сторінку або якщо користувач не може його побачити з якої-небудь причини.
<header>
<img class="logo" src="https://blogger.googleusercontent.com/img/a/AVvXsEhz3frfJE7jFi6lDJmLusWsw6wZP_IUIjEpoSDxc9cszUvRHIsQT76AKhleaJ0ytkYfE9alb8CHT6p4G--nZabwEPFVqsKJpipWRWMtTN6yGkpcTk_oUqrdSZLBrt6fU6XD51Hvf3wVlTZjvcWtD6XoS1KFyDzZjiw0Kocz5JQeZIUnfbeXyJShXqYn=s150" alt="Назва логотипу">
</header>Назва сайту має бути вирівняна по центру шапки header.
.site-title {font-size: 24px; /* Задаємо розмір шрифту для елемента з класом site-title */
font-weight: bold; /* Задаємо товщину шрифту для елемента з класом site-title */
color: #333; /* Задаємо колір шрифту для елемента з класом site-title */
text-align: center; /* Вирівнюємо текст по центру для елемента з класом site-title */
margin: 0; /* Видаляємо відступи з усіх сторін елемента з класом site-title */
flex: 1; /* Задаємо елементу з класом site-title flex-значення 1 */
margin-left: -90px; /* Зміщуємо елемент з класом site-title ліворуч на -90px відносно інших елементів */
}До цього прикладу потрібні додаткові пояснення.
- Значення "flex: 1" в CSS означає, що елемент з цим стилевим правилом буде займати рівностійну частину вільного простору в контейнері, що використовує Flexbox для розташування елементів. У цьому конкретному випадку, елемент з класом "site-title" отримує значення "flex: 1", що дозволяє йому займати всю доступну ширину контейнера, якщо немає інших елементів, які мають конкретну ширину. Таким чином, це дозволяє розтягувати елемент в ширину відповідно до розміру його контейнера та розподіляти вільний простір між елементами, які мають значення "flex: 1".
- У цьому CSS коді ми встановили властивість margin-left: -90px для елемента .site-title, щоб компенсувати зміщення вправо на відстань розміру логотипу (в даному випадку 90 пікселів). За допомогою цього коду назва сайту буде розміщена по центру відносно решти контенту в <header>.
Фон шапки у вигляді градієнту з голубого на жовтий. Градієнт має бути горизонтальний зліва на право.
Сьомий і восьмий пункти технічного завдання ми виконаємо за допомогою одного рядка CSSкоду.
Цей код додасть градієнт з голубого (#00aaff) на жовтий (#ffff00) зліва направо. Ви можете змінювати значення кольорів на ті, які вам потрібні.
/* градієнтний фон елемента з голубого на жовтий зліва направо */
background: linear-gradient(to right, #00aaff, #ffff00);
Повний код, згідно технічного завдання буде виглядати наступним чином:
Таким чином ми виконали технічне завдання, яке нам поставив замовник.
З повагою, Юрій Чернієвський! Керівник гуртка "WEB-Miditaur" науково – технічного напряму «WEB технології» ЦДЮТ Краснопільської селищної ради. Бакалавр, прикладна математика за спеціальним напрямом інформатика, Спеціаліст - інформатика, математик - програміст.
0 Коментарів Підписатися на цей блог