Подготовката за държавния зрелостен изпит по Информационни технологии навлиза в своята финална фаза. В тази статия разглеждаме условията и детайлното изпълнение на последната практическа задача от Модул 2, посветена на уеб дизайна и стилизирането на уеб страници.
Материалите за работа включват:
- Условие на Задача 28 – Музикален свят.
- Ресурсни изображения:
header.png,logo.png,main.png,ornament.pngи изображения за категориите. - Текстов документ с готовото съдържание и списъците за инструментите.
Задача 28: Уеб дизайн (HTML & CSS)
Темата на задачата е "Музикален свят". Фокусът е върху изграждането на семантична HTML структура и прецизното ѝ оформление чрез външен стилов файл (CSS), следвайки зададен графичен макет.
Ключови моменти в решението:
- Обща конфигурация: Създаване на основен контейнер с фиксирана ширина 1200 px, центриран спрямо екрана, със специфичен шрифт "Arial Narrow" или sans-serif, размер на текста 14 pt и тъмен фонов цвят
#1a1a2e. - Блок 1 (Header): Структуриране на горната част с височина 250 px и фоново изображение. Включва позициониране на лого с височина 240 px вляво, голямо заглавие "МУЗИКАЛЕН СВЯТ" (44 px, цвят
#ed2b2b) и навигационно меню горе вдясно с три връзки без подчертаване. - Блок 2 (Основно послание): Внедряване на блок с височина 300 px, съдържащ бяло заглавие "Обичайте музиката" (40 px, с 10 px отстояния) и центрирано тематично изображение под него.
- Блок 3 (Категории инструменти): Позициониране на три паралелни секции (една до друга) с еднаква ширина (33% от контейнера) и височина 650 px. Всеки блок е с индивидуален фонов цвят:
#EFC465(Струнни),#D5D9F4(Духови) и#BCDF95(Ударни). Вътре се зареждат центрирани изображения, заглавия от второ ниво (20 pt, цвят#F5A623) и неномерирани списъци със специфично текстово форматиране (Bold, Italic, Underline). - Блок 4 (Footer): Оформяне на най-долната част с височина 100 px, 15 px отстояния и фоново изображение-орнамент, запълващо целия блок по ширина.
Имате въпрос по задачите?
Ако срещате трудности с подравняването на трите колони, работата с CSS фонове или структурата на менюто, не се колебайте да ми пишете.
Ми пишете тук