Проектиране на статичен уеб сайт: структура, дизайн, навигация
Преди да създадем сайт, правим неговата карта: схема на страниците и връзките между тях. Началната страница обикновено е index.html, а файловете се подреждат в папки, например images за снимките. Навигационното меню помага на посетителите да преминават между страниците, а еднаквият стил прави сайта цялостен. Добрият сайт е адаптивен (изглежда добре на телефон, таблет и компютър) и има достатъчен контраст между текста и фона.
Какво да запомним
- Карта на сайта: схема на страниците и връзките между тях.
- Началната страница: index.html.
- Навигационно меню, еднакво на всички страници.
- Адаптивен (responsive) дизайн за всички екрани.
- Относителен адрес: about.html (в същата папка), images/logo.png (в подпапка).
Пример
Сайт за класа: index.html (начало), klas.html (ученици), proekti.html (проекти), а снимките са в папка images.
Проверете се: 15 въпроса
Натиснете въпроса, за да видите верния отговор и обяснението.
Какво помага на посетителите да преминават между страниците на сайта?
- Размерът на шрифта
- Фоновата музика
- Броят на снимките
- Навигационното меню
Отговор: Навигационното меню
Менюто съдържа връзки към основните страници на сайта.
Как обикновено се нарича файлът на началната страница на статичен сайт?
- start.doc
- index.html
- home.exe
- main.txt
Отговор: index.html
Сървърът отваря index.html по подразбиране, когато се посети адресът на сайта.
Какво е картата (схемата) на сайта при проектирането?
- Географска карта на училището
- Схема на страниците и връзките между тях
- Списък с паролите на администраторите
- Снимка на сървъра
Отговор: Схема на страниците и връзките между тях
Схемата показва йерархията: начална страница, раздели и подстраници.
Какво означава сайтът да е адаптивен (responsive)?
- Да се зарежда само на компютър
- Да има само черно-бял дизайн
- Да сменя езика сам
- Да се показва добре на компютър, таблет и телефон
Отговор: Да се показва добре на компютър, таблет и телефон
Адаптивният дизайн пренарежда съдържанието според ширината на екрана.
Кой принцип на дизайна прави текста в сайта лесен за четене?
- Достатъчен контраст между текста и фона
- Много различни шрифтове на всяка страница
- Светлосив текст на бял фон
- Мигащ текст навсякъде
Отговор: Достатъчен контраст между текста и фона
Тъмен текст на светъл фон (или обратно) се чете най-лесно.
Защо е добре всички страници на сайта да имат еднакъв стил?
- Така се зарежда без интернет
- Така не е нужен браузър
- Така се пази от вируси
- Сайтът изглежда цялостен и се ползва лесно
Отговор: Сайтът изглежда цялостен и се ползва лесно
Еднаквото оформление и меню помагат на посетителя да се ориентира.
Къде обикновено се поставя логото на сайт?
- Само в края на последната страница
- Горе, в заглавната част
- В средата на всеки абзац
- Никъде, логото е забранено
Отговор: Горе, в заглавната част
Логото горе показва чий е сайтът и често е връзка към началната страница.
Какво е вътрешна хипервръзка?
- Връзка към чужд сайт
- Връзка към друга страница от същия сайт
- Връзка към имейл адрес
- Връзка, която не води никъде
Отговор: Връзка към друга страница от същия сайт
Вътрешните връзки свързват страниците на един сайт, а външните водят към други сайтове.
Защо е добре файловете на сайта да са подредени в папки, например images?
- За да стане сайтът динамичен
- За да не е нужен домейн
- За да се зарежда без сървър
- За по-лесна поддръжка и ясни пътища до файловете
Отговор: За по-лесна поддръжка и ясни пътища до файловете
Подредената структура улеснява работата и намирането на файловете.
Страницата about.html е в същата папка като index.html. Какъв относителен адрес се пише в href?
- about.html
- C:/Desktop/about.html
- http://about
- index.html/about.html
Отговор: about.html
При файлове в една папка относителният адрес е само името на файла.
Къде обикновено води щракването върху логото на сайта?
- Към последната страница
- Към регистратора
- Затваря браузъра
- Към началната страница
Отговор: Към началната страница
Логото по навик е връзка към началната страница на сайта.
Как се нарича страницата, която сайтът показва при несъществуващ адрес?
- Страница 200
- Начална страница
- Страница 404
- Страница за вход
Отговор: Страница 404
Кодът 404 означава, че търсената страница не е намерена.
Колко основни цвята е добре да има дизайнът на сайт?
- Поне 10 цвята
- 2-3 основни цвята
- Всяка страница с различни
- Колкото повече, толкова по-добре
Отговор: 2-3 основни цвята
Малко на брой съчетани цветове правят сайта подреден и цялостен.
Как се нарича навигацията „Начало > Новини > Статия“, която показва къде се намираш?
- Пътечка (breadcrumbs)
- Падащо меню
- Карта на сайта
- Долен колонтитул
Отговор: Пътечка (breadcrumbs)
Пътечката показва пътя до текущата страница и позволява връщане назад с едно щракване.
Страница е в папка pages, а index.html е в основната папка. Кой адрес води от страницата към index.html?
- pages/index.html
- /pages/index.html
- index/pages.html
- ../index.html
Отговор: ../index.html
Двете точки и наклонената черта означават една папка нагоре.