Структура веб-сайтів. Етапи створення сайту. Засоби автоматизованої розробки веб-сайтів, редактор веб-сайтів з графічним інтерфейсом.

24.04
2013

  Тема уроку: Структура веб-сайтів. Етапи створення сайту. Засоби автоматизованої розробки веб-сайтів, редактор веб-сайтів з графічним інтерфейсом. Хостинг. Створення та наповнення веб-сторінки.  Практична робота № 10 «Автоматизоване створення веб-сайту»

Структура веб-сайтів.

Веб-сторінка— інформаційний ресурс, до­ступний у мережі World Wide Web, який можна переглянути у веб-браузері. Зазвичай ця інформація записана у форматі HTML або XHTML і може містити гіпертекст із навігаційними гіперпосиланнями на інші веб-сторінки.

структура сайту

Веб-сайт— сукупність веб-сторінок, до­ступних в Інтернеті, які об'єднані як за змістом, так і навігаційно. Фізично сайт може розміщуватися як на одному, так і на кількох серверах. Зовнішній вигляд кожного сайту є унікальним, проте в усіх сайтів можна знайти спільні за функціональністю частини. Структура веб-сайтів.

  1. Головна сторінка
  2. Меню сайту
  3. Гіперпосилання на інші сторінки або сайти

На будь-якому сайті першою відкривається головна сторінка.  У верхній частині головної сторінки зазвичай розташована так звана шапка, яку дублюють на інших сторінках сайту. Це роблять спеціально, адже ця частина відображається у вікні браузера пер­шою і відвідувач насамперед звертає увагу на неї. Щоб забезпечити швидкий перехід до основних тематичних роз­ділів сайту, створюють меню сайту — список гіперпосилань на його розділи. Горизонтальне меню зазвичай розташовують у шапці, іно­ді дублюючи його в нижній частині сторінки, а вертикальне — пере­важно в лівій частині сторінки, у місці, звідки відвідувач починає її переглядати. Меню є одним із найважливіших компонентів сайту, користувач постійно звертає на нього увагу, і тому вимоги до ньо­го високі. Меню має бути зручним, помітним і зрозумілим, інакше користувач не знатиме, як перейти до потрібного розділу, і покине сайт. Пункти меню мають бути чітко відділені один від одного. Гіперпосилання, розміщені в тексті чи у вигляді графічних об'єктів, дозволяють переходити на різні сторінки сайту або навіть на інші сайти. На сайтах із дуже великим обсягом інформації є сто­рінки третього рівня, а якщо необхідно — то й четвертого, п'ятого тощо. Виділяють три типи структур веб-сайтів — лінійну, де­ревоподібну та довільну. Подорожуючи сайтом із лінійною структу­рою, з головної сторінки ви перейдете на другу сторінку, з неї — на третю тощо. На сайті з деревоподібною структурою з головної сто­рінки можна потрапити на одну зі сторінок другого рівня, звідти — на одну зі сторінок третього рівня тощо. Сайт із довільною структу­роювидається зовсім неорганізованим, але саме в цьому й полягає принцип його створення. Подорожуючи таким сайтом, ви можете переходити з однієї його сторінки на інші в різні способи, і ваш шлях назад не обов'язково має бути таким самим. Вибір структури визначається особливостями завдань, що розв'язуються за допомогою веб-сайту. Наведемо додатково чотири приклади структур сайту. Кожна із цих структур має свої недоліки та переваги у проектуванні веб­сайту.

приклади структур сайтуприклади структур сайту

Стандартна Основна веб-сторінка містить посилання на інші документи веб­сайту, а документи містять посилання, відповідно, на основну веб-сторінку. Це найпростіший і найпоширеніший спосіб організації веб-сайту. Каскад У цьому випадку посилання в документах задані таким чином, що існує тільки один шлях обходу сторінок веб-сайту. За каскадно­го способу організації сторінок відвідувачі сайту можуть переміщу­ватися тільки в одному з напрямків — вперед або назад. Хмарочос У цій моделі відвідувачі можуть опинитися на деяких сторін­ках, тільки якщо вони йдуть правильним шляхом. Це нагадує під­йом до потрібної кімнати у великому хмарочосі. Павутина У цьому випадку всі сторінки веб-сайту містять посилання на інші сторінки, і користувач може легко перейти з будь-якої сто­рінки практично на будь-яку іншу. Ця схема може перетворитися на лабіринт, якщо вийде з-під контролю, але вона популярна в тих випадках, коли посиланнями на документи користуються не надто часто.

Етапи створення сайту

Створення сайту умовно можна розділити на такі етапи:

1.   Попередній етап розробки сайту (на цьому етапі розв'язуються питання загального характеру. Обговорюється загальна концепція сайту, формулюються та фіксу­ються цілі створення сайту)

2.   Етап проектування сайту (Визначення структури сайту: меню, посилання, розміщення модулів, побудова списку компонентів, що підключаються, тощо)

3.    Етап розробки й тестування сайту.

4.    Розміщення сайту.

5.    Розвиток ресурсу. Створення веб-сайту починається зі створення інформаційної моделі сайту. Будь-яку веб-сторінку можна оцінити за двома пара­метрами: зміст та зовнішній вигляд. Проте спочатку потрібно ви­рішити, яку інформацію потрібно на ній розмістити. Необхідно де­тально проаналізувати, скільки і якої інформації потрібно подати на веб-сторінці. Створюючи проект сайту, потрібно добре продумати його за­гальну структуру, зміст інформації та посилання.

створення сайту

Хостинг. Засоби автоматизованої розробки веб-сайтів

Для того щоб сайт став доступним широкому колу відвідувачів, йому необхідно призначити доменне ім'я і розмістити в мережі Інтернет. Розміщення сайту на сервері та подальше його адміністру­вання називають хостингом. Наданням такої послуги займаються спеціальні організації. Хостинг буває платним і безкоштовним. Можливість створювати веб-сторінки та організовувати форуми й чати в автоматизованому режимі (крім власне розміщення сайту) часто надається на серверах, що забезпечують хостинг. Наприклад, ucoz.ru, mylivepage.com. Веб хостинг UcoZ Ucoz — це безкоштовний веб-хостинг із вбудованою системою керування сайтом. Модулі UcoZ можуть використовуватися як у єдиній зв'язці для створення повнофункціонального сайту, так і окремо, наприклад, як блог-платформи, веб-форуми та ін. Фактично UcoZ — це веб-сервіс, що працює за принципами Веб 2.0 і дозволяє, в першу чергу, створювати сайти різного рівня складності та досить сильно відрізняється від традиційних безко­штовних хостингів. Під час реєстрування користувачеві надається можливість ви­брати домен для свого проекту. В системі існують також і домени, спеціально розраховані на українську аудиторію — name.ucoz.ua, name.at.ua. Під час реєстрування кожен користувач отримує 400 Мб диско­вого обсягу. Дисковий обсяг постійно збільшується пропорційно до зростання кількості відвідувачів сайту. Основні можливості

  1. Користувачу пропонується багато дизайнів на вибір, які мож­на використати для побудови сайту.
  2. Можливість створити власний дизайн (шаблон) або переробити будь-який зі стандартних.
  3. Доступ по FTP.
  4. Безкоштовна технічна підтримка.
  5. WYSIWYG online редактор.
  6. Візуальний конструктор блоків.
  7. Версія сайту для КПК.
  8. Резервне копіювання.
  9. Лайтбокс — рекламний щит.
  10. Загальна авторизація — uID. Модулі системи
  11. Користувачі — керування списком користувачів сайту.
  12. Форум — створення та керування форумами.
  13. Щоденник (блог) — створення та керування блогом.
  14. Фотоальбоми — створення фотоальбомів.
  15. Гостьова книга — керування гостьовою книгою.
  16. Каталог статей — керування статтями на сайті.
  17. Міні-чат — модуль для маленьких повідомлень, які можуть міс­тити смайлики.
  18. Шаблони — модуль містить дизайни на будь-який смак.
  19. Новини сайту — модуль, що дозволяє користувачеві слідкува­ти за оновленням сайту.
  20. Інтернет-статистика — перегляд статистики відвідувань сайту.
  21. Каталог файлів — каталог файлів, які були додані користува­чами сайту.
  22. Каталог лінків — список веб-адрес, які були додані користува­чами сайту.
  23. Оголошення — створення дошки оголошень.
  24. FAQ — список найчастіших запитань та відповідей на них.
  25. Опитування — опитування різного спрямування.
  26. E-mail форми — організація зворотного зв'язку з адміністра­цією сайту.
  27. Онлайн-ігри — модуль, у якому представлені ігри різних на­прямків — від стратегій до настільних ігор.
  28. Інтернет-магазин — модуль системи, який є оптимальним рі­шенням у галузі електронної торгівлі.

Технологія створення сайту в системі UcoZ В Інтернет-браузері відкриваємо сторінку www.ucoz.ua. Натис­каємо на кнопці Створити сайт. Потрапляємо на реєстраційну форму користувача, яку заповнюємо, відповідно до запропонова­них запитань. Наступний крок — натиснути на кнопці Реєстрація. Після заповнення форми ви отримаєте глобальний профіль у системі uNet, що дасть вам можливість створювати будь-яку кіль­кість сайтів у системі UcoZ. Якщо всі дані введено правильно, ви переходите до сторінки, яка вимагає підтвердження e-mail адреси (лист для підтвердження вам надіслано на вашу поштову скриньку, яку ви вказали під час реєстрації). Підтвердивши e-mail адресу, ви переходите до вікна, у якому потрібно ввести секретний реєстраційний код, зображений на кар­тинці поряд. Наступний крок — заповнення веб-топа користувача. Спочатку ви повинні встановити окремий пароль для веб-топа, який знадоби­ться для додаткового захисту вашої інформації. На наступному кроці по­трібно придумати та вписа­ти адресу сайту, вибравши той хостинг, який пропонує UсоZ. До речі, він налічує 18 імен і містить українські до­мени. Усе, ваш сайт успішно створено, про що й повідо­мить система. Щоб створити розділ на Ucoz–сайті потрібно зайти під логіном і паролем адміністратора сайту.  Обрати Пункт «Общее» - «Вход в панель управления». Потім в контекстному меню(рис.1) обрати пункт «Каталог статей» - «Управление категориями» - натиснути кнопку «Добавить категорию».

створення сайту в Ucoz

Після створення категорії обираємо її натискуванням і натискаємо кнопку «Добавить материал». Додавання статті. Післе натискування кнопки  «Добавить материал» в відповідній  категорії перед нами відкриється вікно(рис.2). Тут ми вносимо назву статті, короткий зміст і саму статтю.

створення сайту в Ucoz

Для форматування документа ми використовуємо значки : В –це жирность тексту, U – це підкреслювання, і – це курсив, вирівнювання, нумеровані списки і відступи.  Натиснувши на цей значок  ми відкриємо повну можливіть форматування тексту, вирівнювання тексту, межі і заливки тексту і таблиць, а натиснувши на ці кнопки в панелі   ми змінимо шрифт тексту і розмір. Кнопки  означають відповідно предпросмотр, вставку з буфера обміну, повернення чи повтор дії. Кнопки  означають зміну кольору тексту і фону під текстом відповідно. Кнопки  означають відповідно вставку гіперссилки, картинки, флеш і таблиці. Кнопки  означають відповідно вставку символа з таблиці символів, вставку лінії, видалення текста, видалення форматування тексту, html – код документу.

Для додавання картинки в документ. натискаємо значок  в панелі інструментів, обираємо у новому вікні (рис.4) значок папки  після чого відкривається ще одне вікно окно(рис.5)      

створення сайту в Ucoz

В даному вікні обираємо пункт «Выбирите файл» Після чого обираємо на комп’ютері картинку і натискаємо на кнопку «Загрузить файл». Після цих дій наша картинка з’являється в «Файлах форума.», де ми на неї натискаємо і переходимо знову на рис.4 (автоматно),

створення сайту в Ucoz

після чого ми натискаємо кнопку «Іnsert» і наша картинка автоматично вставляєтся там, де знаходиться ваш курсор. Для збереження документа натискаємо внизу сторінки кнопку «Добавить». Для додавання різних документів в формате word, pdf, exe натискаємо  в меню сайта пункт «Общее» - «Главная страница», вводимо пароль і секретний код, і в меню рис. 6  

створення сайту в Ucoz

обираємо пункт «Файловый менеджер», там обираємо кнопку «Выбрать файл» після чого обираємо файл на комп’ютері, натискаємо кнопку «Загрузить файл», після завантаження на сервер файлу ви можете створити в Каталозі файлів матеріал і додати ваш документ натиснувши кнопку (гіперпосилання), далі натиснувши на значок папки обрати потрібний файл і натиснути кнопку «Іnsert».  

Редактор веб-сайтів з графічним інтерфейсом.

Найпоширенішими візуальними редакторами для створення сайтів є: Frontpage і Dreamweaver.  Програма Frontpage компанії Microsoft, на мою думку, є кращою на сьогоднішній день. 80% сайтів в Інтернеті створено за допомогою цього пакету. Не дивлячись на те, що це наймогутніша програма, майже повна схожість її інтерфейсу з поширеним текстовим редактором Word дозволяє освоїти її легко і швидко. Редактор Frontpage містить великий набір шаблонів і майстрів для створення сайтів з різної тематики. Для форматування тексту можна використовувати всі можливості, передбачені в основному стандарті HTML, а так само застосовувати спеціальні динамічні ефекти і анімацію. Редактор має зручні інструменти для роботи з таблицями, вбудовані засоби для обробки зображень, дозволяє легко розміщувати на сторінках різні мультимедіа-об'єкти: малюнки, відеофільми, анімацію, звукові фрагменти. Тісна інтеграція з пакетом MS Office дозволяє відображати на сторінках документи MS Word, таблиці і графіки MS Excel, динамічно отримувати дані з MS Access, використовувати мову VBA, засоби перевірки орфографії і десятки готових тим для оформлення сторінок сайту. У програмі Frontpage реалізована підтримка сучасних Web-технологій, таких, як каскадні таблиці стилів (CSS), динамічні ефекти (DHTML), фрейми, активні сторінки (ASP), елементи ACTIVEX і Java-апплети. Якщо Web-сервер підтримує технології Frontpage і Sharepoint, то з'являються додаткові можливості при створенні сторінок - форми пошуку, лічильники відвідуваності, зміст сайту та інші. Програма Frontpage є не тільки редактором Web-сторінок, але і містить засоби управління створення сайту, такі, як схема навігації по сторінках, аналіз сайту за допомогою різних звітів, колективна розробка, настроювання на певні браузери, завантаження  сайту на Web-сервер по протоколах НТТР і FTP. Всі ці можливості дозволяють створювати за допомогою Frontpage повноцінні Web-сайти, такі, наприклад, як електронні магазини або ігрові сайти. До недоліків редактора Frontpage можна віднести його переважну орієнтацію на браузер Internet Explorer, тому слід перевіряти роботу створеного сайту в інших браузерах. А також деяку надмірність готового коду HTML. Редактор відстежує зміни в коді сторінок і наполегливо відновлює теги, видалені Web-мастером. Вимоги до комп'ютера для установки і роботи редактора Frontpage такі ж, як у інших додатків MS Office. Для завантаження створеного сайту на Web-сервер знадобиться доступ в Інтернет і модем для передачі даних або мережева карта. Для перевірки сторінок, звук, що містять, або відео, буде потрібно звукову карту.

Відомі безкоштовні візуальні редактори для створення сайтів на сьогоднішній день:

Kompozer - редактор, який годиться як для початківців, так і для професіоналів. Існують його версії для Windows і Linux. Amaya - два в одному, редактор сторінок і одночасно браузер, який схвалений W3C, він правильно підтримує всі стандарти для html. SeaMonkey - набір програм для роботи в інтернеті, що включає браузер, поштову програму, IRC-чат і редактор сторінок. Створений на основі продуктів Mozilla. BlueGriffon - зовсім нова розробка, що з'явилася в 2010 році. Втім, вона вважається наступником редактора NVU, розвиток якого затихнув кілька років тому. Набор платних візуальних редакторів досить великий. Серед них можна виділити такі, як Editor, CoffeeCup HTML, RapidWeaver, Namo WebEditor, Web Builder і ін. Проте найбільш популярними вже довгий час є редактор Dreamweaver і лінійка редакторів від Microsoft.  Dreamweaver - візуальний редактор, що багато років утримує заслужене лідерство серед програм для створення сайтів. Зараз Dreamweaver входить в набір продуктів Adobe Creative Suite, що представляє комплексне рішення для створення веб-сайтів. Довгий час багато вебмастерів користувалися для створення сайтів редактором FrontPage, але потім Microsoft припинила його підтримку, запропонувавши взамін дві нові програми - Microsoft Expression Web (вважається основним html-редактором від Microsoft) і Microsoft SharePoint Designer. Microsoft Expression Web є частиною Microsoft Expression Studio - комплексу програм для розробки сайтів. На сайті Microsoft можна викачати 60-денну пробну версію програми. Microsoft SharePoint Designer є частиною Microsoft SharePoint - комплексу програм для організації спільної роботи.  

Практична робота № 10 «Автоматизоване створення веб-сайту»

Група 1 Завдання: Створити веб-сайт «Модного чоловічого одягу 2012» на UсоZ

Група 2 Завдання: Створити веб-сайт «Модного жіночого одягу 2012» на UсоZ

Група 3 Завдання: Створити веб-сайт «Футбольного клуба «Динамо»» на UсоZ

Група 4 Завдання: Створити веб-сайт «Елітного магазину біжутерії» на UсоZ

 

 

Завантажити  конспект уроку  Структура веб-сайтів. Етапи створення сайту.

Бажаєш отримувати нові та цікаві матеріали з сайту?

Заповни форму, подану нижче, і безкоштовно отримуй в свою поштову скриньку все необхідне для уроків!

Коментарі всього: 4

  • Ничего себе уроки! Понятно, что после таких уроков компьютерные вундеркинды получаются…

  • Очень интересно читать на украинском языке. Это язык моего детства. Некоторые слова уже понимаю не сразу, но в контекте понятно.

  • Мені б такий конспект років 7 тому, коли свій перший (давно закритий) проект про VBA на Ucoz створював…

    З практичною роботою не згідний. Якщо кожного року десятикласники різних шкіл будуть свої сайти про одяг на хостинги «вішати», ми отримаємо замість мережі величезний інфо-смітник.

    А за зібраний матеріал спасибі — візьму за основу для лекції своїм першокурсникам.

    • В шкільній програмі є практична робота по створенню сайту, тому учні і вчаться їх створювати. А з вами згідна, що скоро буде виличезна кількість нікому не потрібних сайтів.

Залишити коментар

Ваш email не буде опублікований. Обов'язкові поля відмічені *

*

до початку