Информационни технологии · 8 клас · урок 4 от 8

Проектиране на статичен уеб сайт: структура, дизайн, навигация

Преди да създадем сайт, правим неговата карта: схема на страниците и връзките между тях. Началната страница обикновено е index.html, а файловете се подреждат в папки, например images за снимките. Навигационното меню помага на посетителите да преминават между страниците, а еднаквият стил прави сайта цялостен. Добрият сайт е адаптивен (изглежда добре на телефон, таблет и компютър) и има достатъчен контраст между текста и фона.

Работен лист за печат

Какво да запомним

  • Карта на сайта: схема на страниците и връзките между тях.
  • Началната страница: index.html.
  • Навигационно меню, еднакво на всички страници.
  • Адаптивен (responsive) дизайн за всички екрани.
  • Относителен адрес: about.html (в същата папка), images/logo.png (в подпапка).

Пример

Сайт за класа: index.html (начало), klas.html (ученици), proekti.html (проекти), а снимките са в папка images.

Проверете се: 15 въпроса

Натиснете въпроса, за да видите верния отговор и обяснението.

  1. Какво помага на посетителите да преминават между страниците на сайта?
    • Размерът на шрифта
    • Фоновата музика
    • Броят на снимките
    • Навигационното меню

    Отговор: Навигационното меню

    Менюто съдържа връзки към основните страници на сайта.

  2. Как обикновено се нарича файлът на началната страница на статичен сайт?
    • start.doc
    • index.html
    • home.exe
    • main.txt

    Отговор: index.html

    Сървърът отваря index.html по подразбиране, когато се посети адресът на сайта.

  3. Какво е картата (схемата) на сайта при проектирането?
    • Географска карта на училището
    • Схема на страниците и връзките между тях
    • Списък с паролите на администраторите
    • Снимка на сървъра

    Отговор: Схема на страниците и връзките между тях

    Схемата показва йерархията: начална страница, раздели и подстраници.

  4. Какво означава сайтът да е адаптивен (responsive)?
    • Да се зарежда само на компютър
    • Да има само черно-бял дизайн
    • Да сменя езика сам
    • Да се показва добре на компютър, таблет и телефон

    Отговор: Да се показва добре на компютър, таблет и телефон

    Адаптивният дизайн пренарежда съдържанието според ширината на екрана.

  5. Кой принцип на дизайна прави текста в сайта лесен за четене?
    • Достатъчен контраст между текста и фона
    • Много различни шрифтове на всяка страница
    • Светлосив текст на бял фон
    • Мигащ текст навсякъде

    Отговор: Достатъчен контраст между текста и фона

    Тъмен текст на светъл фон (или обратно) се чете най-лесно.

  6. Защо е добре всички страници на сайта да имат еднакъв стил?
    • Така се зарежда без интернет
    • Така не е нужен браузър
    • Така се пази от вируси
    • Сайтът изглежда цялостен и се ползва лесно

    Отговор: Сайтът изглежда цялостен и се ползва лесно

    Еднаквото оформление и меню помагат на посетителя да се ориентира.

  7. Къде обикновено се поставя логото на сайт?
    • Само в края на последната страница
    • Горе, в заглавната част
    • В средата на всеки абзац
    • Никъде, логото е забранено

    Отговор: Горе, в заглавната част

    Логото горе показва чий е сайтът и често е връзка към началната страница.

  8. Какво е вътрешна хипервръзка?
    • Връзка към чужд сайт
    • Връзка към друга страница от същия сайт
    • Връзка към имейл адрес
    • Връзка, която не води никъде

    Отговор: Връзка към друга страница от същия сайт

    Вътрешните връзки свързват страниците на един сайт, а външните водят към други сайтове.

  9. Защо е добре файловете на сайта да са подредени в папки, например images?
    • За да стане сайтът динамичен
    • За да не е нужен домейн
    • За да се зарежда без сървър
    • За по-лесна поддръжка и ясни пътища до файловете

    Отговор: За по-лесна поддръжка и ясни пътища до файловете

    Подредената структура улеснява работата и намирането на файловете.

  10. Страницата about.html е в същата папка като index.html. Какъв относителен адрес се пише в href?
    • about.html
    • C:/Desktop/about.html
    • http://about
    • index.html/about.html

    Отговор: about.html

    При файлове в една папка относителният адрес е само името на файла.

  11. Къде обикновено води щракването върху логото на сайта?
    • Към последната страница
    • Към регистратора
    • Затваря браузъра
    • Към началната страница

    Отговор: Към началната страница

    Логото по навик е връзка към началната страница на сайта.

  12. Как се нарича страницата, която сайтът показва при несъществуващ адрес?
    • Страница 200
    • Начална страница
    • Страница 404
    • Страница за вход

    Отговор: Страница 404

    Кодът 404 означава, че търсената страница не е намерена.

  13. Колко основни цвята е добре да има дизайнът на сайт?
    • Поне 10 цвята
    • 2-3 основни цвята
    • Всяка страница с различни
    • Колкото повече, толкова по-добре

    Отговор: 2-3 основни цвята

    Малко на брой съчетани цветове правят сайта подреден и цялостен.

  14. Как се нарича навигацията „Начало > Новини > Статия“, която показва къде се намираш?
    • Пътечка (breadcrumbs)
    • Падащо меню
    • Карта на сайта
    • Долен колонтитул

    Отговор: Пътечка (breadcrumbs)

    Пътечката показва пътя до текущата страница и позволява връщане назад с едно щракване.

  15. Страница е в папка pages, а index.html е в основната папка. Кой адрес води от страницата към index.html?
    • pages/index.html
    • /pages/index.html
    • index/pages.html
    • ../index.html

    Отговор: ../index.html

    Двете точки и наклонената черта означават една папка нагоре.