Изработване на уеб сайт „Училищен вестник“

В този урок ще се запознаем с реализацията на един конкретен проект, като създадем уеб сайт „Училищен вестник“. За неговото разработване ще използваме програмата Microsoft Expression Web 4.

В часовете по информационни технологии учениците от 8А клас трябва да разработват проекти. Преподавателката Иванка Николова възложи на екип в състав, включващ учениците Емил, Таня и Катя да разработят проект „Училищен вестник“, посветен на Деня на славянската писменост и култура 24 май. Преподавателката поставила изисквания във вестника да бъдат публикувани материали, свързани с историята на празника, неговото честване, биографични данни за светите братя Кирил и Методий. Задължително трябва да бъде включен и възрожденският всеучилищен химн.

След като задачата бе поставена единодушно за ръководител на екипа бе избран Емил, който има най-големи компетентности в областта на информационните технологии.
Екипът реши уеб сайта (училищния вестник) да се състои от 4 страници и в него да има следните материали:
🟣 първа страница, която да съдържа емблемата на училището, текстов материал, посветен на празника, графично изображение на кирилицата, портрет на Кирил и Методий и кратки факти от живота им. Изготвянето на тази страница бе възложено на Емил като срока за изпълнение е една седмица.
🟣 втора страница, която да съдържа исторически факти за честването на празника в България, отбелязването на празника в училището и снимков материал. Изготвянето на тази страница бе възложено на Таня като срока за изпълнение е една седмица.
🟣 трета страница, която да съдържа текста на възрожденския всеучилищен химн на Св. Св. Кирил и Методий. четвърта страница, която да съдържа любопитни факти от живота на солунските братя. Изготвянето на трета и четвърта страница бе възложено на Катя като срока за изпълнение е една седмица.
Сглобяването и оформянето на вестника бе решено да извърши Емил.

Стартирайте програмата Microsoft Expression Web 4. Най-напред създайте нов уеб сайт като изпълните командата New Site от страница Site (Фиг. 1). В резултат се появява диалогов прозорец New (Фиг. 2), в който може да се избере една от следните възможности:

🟣 създаване на: празен сайт (Empty site); сайт, съдържащ първоначално само една страница (One page site) или чрез използване на помощна програма (Wizard), улесняваща създаването на нов сайт чрез импортиране на файлове от съществуваща папка или сайт;
🟣 създаване на сайт с използване на готов шаблон.
В полето Location задайте пълния път за достъп до папката на сайта (напр. site_vestnik), като за целта използвате бутона Browse, за да зададете нейното местоположение. В резултат се създава папка на сайта с избраното от Вас име.
За да създадете нова интернет страница изпълнете командата File/New/HTML. Създаването на нова интернет страница може да се осъществи и чрез командата File/New/Page, като в появилия се диалогов прозорец изберете възможността HTML, както и чрез директно щракване върху бутона (Фиг. 3). Когато изберете някой от посочените начини, създайте четири празни интернет страници. Съхранете ги с имена index.html, page2.html, page3.html и page4.html в папката на сайта site_vestnik.

Активирайте файла index.html. Най-напред задайте заглавие и фон на интернет страницата. Изпълнете командата Format/Background и в появилия се диалогов прозорец Page Properties задайте следните настройки (Фиг. 4):
🟣 в страница General – в полето Title запишете текста Училищен вестник;

Съставни елементи на интернет страницата са:
🟣 таблица с един ред и една колона.
В нея ще бъдат разположени бутони за навигация между отделните страници на вестника. За да създадем тази таблица трябва да изпълним командата Table/Insert Table. В диалоговия прозорец Insert Table трябва да бъдат зададени следните настройки (Фиг. 5):

🟣 в полето Rows задавате стойност 1;
🟣 в полето Columns задавате стойност 1;
🟣 в полето Alignment избирате Center;
🟣 поставяте отметка в полетата Specify width и Specify height и задавате посочените стойности от Фиг. 5.
В полето Size за дебелина на рамката на таблицата задавате стойност 0. Така таблицата ще се визуализира без рамка.
След това щракнете с десния бутон на мишката вътре в клетката на таблицата и от появилото се контекстно меню изберете команда Cell Properties. Задайте хоризонтално и вертикално центриране на съдържанието на клетката, както е показано на Фиг. 6.

Сега създайте четири интерактивни бутона за навигация към всяка една от страниците на вестника. За да изработите първия бутон, изпълнете командата Insert/Interactive Button. В страниците Button и Image на появилия се диалогов прозорец задайте настройките, показани на Фиг. 7.

Аналогично създайте и останалите три бутона за навигация към страниците page2.html, page3. html и page4.html. Съхранете файла index.html. Всички автоматично изработени графични изображения за бутони съхранeте в нова подпапка с име buttons на папката site_vestnik.
Тъй като такива бутони за навигация трябва да присъстват и в другите три интернет страници, то вместо те да бъдат създавани отново може да се изпълни следното: да се маркира и копира изработената таблица и да се постави в началото на останалите три страници page2.html, page3.html и page4.html. За да съхраните извършената работа до момента във всички отворени интернет страници изпълнете командата File/Save All.
След съхраняването на файловете продължете със структурирането и оформянето на първата страница на вестника.
🟣 таблица с 2 реда и 2 колони

При създаването на тази таблица в диалоговия прозорец Insert Table задайте настройките, посочени на Фиг. 8. След това маркирайте цялата таблица и щракнете с десния бутон на мишката върху нея. От появилото се меню изберете команда Cell Properties. Задайте хоризонтално и вертикално центриране на съдържанието на всички клетки от таблицата. Маркирайте двете клетки от първата колона на таблицата и ги слейте с командата Table/Modify/Merge Cells. Попълнете съдържанието на клетките. Конкретните графични изображения ще намерите в папка на сайта site_vestnik, тъй като вече копирахте и поставихте в нея цялото съдържание на папката Razdel5/site от приложения диск към учебника. Оразмерете отделните клетки на таблицата с подходящи размери. За да добавите допълнителен сив фон на абзаца 24 май 2017 година изпълнете командата Format/Borders and Shading, като преди това е необходимо да селектирате клетката от таблицата чрез команда Table/Select/Cell.
🟣 таблица с 4 реда и 2 колони;
При създаването на тази таблица в диалоговия прозорец Insert Table задайте настройките, посочени на Фиг. 9.

След това маркирайте цялата таблица и щракнете с десния бутон на мишката върху нея. От появилото се контекстно меню изберете команда Cell Properties. Задайте хоризонтално и вертикално центриране на съдържанието на всички клетки от таблицата. Маркирайте клетките от първия ред на таблицата и ги слейте с командата Table/Modify/Merge Cells. След това маркирайте клетките от втория ред на тази таблица и ги слейте. Попълнете съдържанието на клетките. Конкретните графични изображения ще намерите в папката на сайта site_vestnik.