Създаване на структура, визуален дизайн и навигационна система

1. Създаване на файлова структура

  • 4 етап: Реализация
  • Преди да започнете сайта е необходимо да се подготви файловата му структура.
  • Създайте необходимите папки – главната папка на проекта с име my_site, съдържаща две подпапки pages (за страниците на сайта) и images (за изображенията)

2. Програмата Microsoft Expression Web 4

  • Използването на редактор от вида WYSIWYG при създаването на първия ви сайт е добро решение
  • Чрез него може да се работи в режим дизайн (Desing), да се подреждат елементите по познатия начин, а в същото време да се разглежда и кода на страницата (в режим Code).
  • Стартирайте програмата Microsoft Expression Web 4 и разгледайте прозореца и.

  • Визуализирането и скриването на панелите се извършвано от меню Panels. В панела Folder List се показва файловата структура на сайта.
  • За създаването на нов сайт са избира меню Site командата New Site. Може да се подходи по два начина:
  • създаване на изцяло нов сайт – избира се General, Empty Site и в Location  се посочва главната папка на сайта.
  • Изграждане на сайта на базата на шаблон – избира се Templates, след което се активира някой от предложените шаблони.
  • В долната част на работното поле са разположени три бутона за отделните режими на работа:
  • Design – за автоматично изграждане на страниците
  • Split – дава възможност да се работи едновременно с HTML кода в режим Desing
  • Code – показва HTML кода на страницата

3. Елементи на структурата на сайт

  • На структурно ниво всеки сайт може да има начална страница, входни страници за всеки отделен модул и вътрешни страници.
  • Най-важна е началната страница (Home Page, файл с име index.html ),
  • която има за цел да впечатли посетителите. Началната страница е централния елемент в структурата на сайта и от нея се организират връзките към другите страници.
  • Главни елементи в началната страница са: името на сайта, меню за навигация и кратка въвеждаща информация.

Задача създайте началната страница на сайта на хотел лунна нощ.

  • За улеснение на потребителя се предлага възможност за изграждане на сайт чрез рамки (Frames).
  • С помощта на рамки лесно могат да се отделят основните части на страницата – заглавна част (Baner), част за навигация(Menu) и основна част (Main).
  • Уеб банера е предназначен за реклама на сайта и целта му е да привлече вниманието на потребителите. В него се въвежда темата на сайта и неговото лого.
  • Навигационната система (Navigation System) и така нареченото меню (Menu) съдържа хипервръзки към отделните вътрешни страници. Могат да се добавят бутони (Buttons) и хипервръзки към други страници.
  • Основната страница се използва за зареждане на съдържанието на началната и вътрешните страници.
  • За създаване на нова страница от меню File се задържа върху New и се избира Page… Отваря се диалогов прозорец с име New.
  • За избор на начална страница, разделена с рамки се активира Frames Pages, посочва се един от вариантите и се натиска ОК.

  • По този начин страницата се разделя на отделни части.
  • Началната страница се съхранява (задължително) в главната папка (my_site) с име index.html.
  • Чрез задаване на команда Save As, освен име на файл и избор на място за съхранение, е препоръчително да се зададе подходящо наименование на страницата чрез бутон Change Title… То се визуализира в заглавния ред на браузъра при зареждане на страницата.

  • Както видяхте всяка част има два бутона:
  • Set Initial Page…
  • New page
  • Тъй като няма предварително подготвени файлове за отделните области във всички части се избира New Page.
  • При повторно съхраняване на началната страница първо се съхраняват промените в index файла. Избира се папка pаges отделните части с имена banner.html (горна част), menu.html (долна лява част) и home.html (долна дясна част).

Задача: Въведете съдържанието на началната страница. Подгответе графичните файлове и ги поставете в папката images

  • При запълване на страниците със съдържание е добре да се използват следните препоръки:
  • Разпределение на информацията (например разделяне по категории)
  • Използване на графични елементи в списъците (булети)
  • Добавяне на изображения, съобразено със съдържанието в един стил
  • Прилагане на избраната организация на елементите при изграждане на всички страници на сайта
  • Вмъкване на изображение се извършва от меню Insert, подменю Picture с команда FromFail
  • Добавяне на аудио и видео се извършва от Insert, подменю Media с избор на съответния обект.
  • Характеристиките на страницата се задават от контекстното меню чрез команда Page Properties.
  • Големината на файла се показва в лентата на състоянието в долната част на работното поле
  • От меню File с подменю Рreview in Browser може да се види страницата в избран браузър

Ресурси