Інструкція для проведення лабораторного заняття №17 з предмету “Інформатика “ Тема : Розробка та публікація Web- сайту

Мета: •Набути практичних навичок створення простих Web –сайтів.

•Практичне застосування та засвоєння структури документу та основних елементів мови HTML.

•Набути практичних навичок у розробці Web – сайтів та запуск на безкоштовні .

Робоче місце: Лабораторія інформатики та комп’ютерної техніки

Тривалість заняття: 80 хв.

Матеріальне технічне оснащення робочого місця: ПК, ОС Windows

Правила охорони праці:

1. На робочих місцях розташовано обладнання, яке має складові, що працюють під високою напругою. Необережне поводження з апаратурою може призвести до травм. Тому суворо заборонено:

• вмикати і вимикати апаратуру без вказівки учителя;

• доторкатись до роз'ємів з'єднувальних кабелів та самих кабелів;

• доторкатись до екрану та тильної частини монітора;

• переміщувати увімкнені складові обчислювальної системи (системних блок, монітор тощо),;

• класти будь-які предмети на системний блок, монітор, клавіатуру;

• приносити та використовувати носії даних (дискети, компакт-диски) без дозволу вчителя.

Короткі теоретичні відомості Створення та публікація сайту.

Коли сайт створено, його можна переглянути на власному комп'ютері. Для цього достатньо клацнути на піктограмі файлу index.html – головна сторінка сайту відкриється програмою Internet Explorer. Щоб сайт був доступним для інших користувачів мережі, його потрібно розташувати на сервері. Цей процес називається публікацією сайту, або постінгом. Під час публікування користувач пересилає html-файли з власного комп'ютера на сервер у режимі FTP-з'єднання. Для цього використовують деяку програму класу FTP-клієнт: CuteFTP, Windows Commander, Far Manager тощо. Публікацію можна здійснити автоматично, користуючись FTP-сервісом, вбудованим у програми MS FrontPage, Macromedia DreamWeaver, у середовищі Windows, якщо доступний Майстер Web-видань, а також за допомогою засобів автоматизації процесу публікації, які надають сервери.

Сервер, на якому розміщують сайт, називається хостом, а сервіси, які надають його служби, – хостінгом. Хостінг буває безплатним або платним. Безплатний хостінг передбачає надання поштової web-скриньки і деякого обмеженого дискового простору для розташування сайту, причому на такому сайті автоматично буде розташована чужа реклама у вигляді банерів. Часто тут надаються засоби для створення сайтів на базі готових шаблонів, де-не-де є шаблонні гостьові книги, форуми, чати тощо. Платний хостінг дає змогу не лише уникнути чужої реклами на власному сайті, але й організувати свою рекламу на інших сайтах, використати додаткові сервіси тощо.

Якщо користувач є клієнтом місцевого web-провайдера, то доцільно сайт публікувати на його сервері. Адреса сайту буде такою: www.адреса провайдера/~логін користувача або www.логін користувача.адреса провайдера. Наприклад, сайт авторів цієї книжки у провайдера UarNet у Львові має таку адресу: www. lviv.uar.net/~hlynsky (або www.hlynsky.lviv.ua), a на сервері Narod.ru таку - www.hlynsky.narod.ru.

У мережі є велика кількість серверів, які надають безплатний хостінг. Для україно- чи російськомовних сайтів доцільно вибирати сервер чи портал, розташований в межах країн СНД, наприклад, Яндекс із сервером Narod.ru (www.narod.ru). Увійшовши на деякий сервер, варто ознайомитися зі списком багатьох інших серверів, що надають безплатний хостінг, та умовами співпраці з ними. Для цього потрібно виконати пошук за словами „Бесплатный хостинг" чи „free hosting" - отримаєте не тільки адреси серверів, але й корисну інформацію про обмеження і наявність чи відсутність тих чи інших сервісів на них. Наприклад, безплатний хостінг у багатьох випадках не дає змоги застосовувати FrontPage Extensions, CGI-сценарії, засоби MySQL, SSI тощо.

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

Проектування Web-сайта.

Перш ніж приступити до створення окремих Wеb-сторінок, слід ретельно обдумати структуру майбутнього Web-сайту. При такому підході пізніше вам вдасться уникнути проблем, пов'язаних з необхідністю внесення істотних виправлень. Вирішіть для себе, скільки сторінок повинен містити Web-сайт і яким чином вони будуть взаємозв'язані.

Відвідувачам вашого сайту повинні бути надані відповідні засоби доступу до необхідної інформації. Зручним інструментом проектування структури сайту може послужити попередній ескіз. Після визначення загальних характеристик компоновки сайту вам потрібно буде розміркувати над особливостями його головної сторінки (main page, або home page).

Компоновка Web-сайту:

Лінійна. При використовуванні лінійкої компоновки сторінки Web-сайту розташовуються в одній жорстко обумовленій послідовності. Така структура вельми зручна в тих випадках, коли користувач повинен знайомитися з інформацією в певному порядку — скажімо, читаючи статтю або виконуючи деякі покрокові інструкції. В подібних випадках чергова Web-сторінка звичайно містить гіперпосилання на наступну і попередню сторінки, і користувач отримує зручні засоби швидкого переміщення по вмісту сайту вперед і назад.

Web. Сайт, побудований в стилі Web, взагалі не має чітко обумовленої структури. Кожна сторінка містить численні посилання на інші сторінки сайту. Така компоновка застосовується в тих випадках, коли порядок проглядання інформації неважливий.

Ієрархічна. У разі застосування ієрархічної компоновки всі сторінки Web-сайту пов'язані з його головною сторінкою. Головна сторінка пропонує загальний огляд вмісту сайту, а всі інші містять конкретну інформацію, згруповану за тематичним принципом. Доступ до подібних порцій даних здійснюється за допомогою гіперпосилань, включених в склад головної сторінки.

Комбінована. Підхід з використанням комбінованої компоновки найбільш гнучкий. Наприклад, поєднуючи особливості ієрархічного проектування і компоновки в стилі Web, ви зможете створити сайт, відмінний виразною структурою і разом з тим дозволяючий користувачу переміщатися від однієї сторінки до іншої в довільному порядку.

В ролі головної сторінки звичайно виступає та, яку користувач, що звертається до Web-сайту, бачить в першу чергу. Як правило, файл головної сторінки носить одну з наступних назв: index.html або index.htm. Головна сторінка повинна включати короткий огляд вмісту сайту, його зміст і набір гіперпосилань, за допомогою яких користувач зможе відразу перейти до тем, що цікавлять його.

Обдумуючи структуру головної сторінки, ви повинні забезпечити можливості її коректної взаємодії з рештою частин сайту. Наприклад, головна сторінка сайту, виконаного за правилами лінійної компоновки, зобов'язана містити гіперпосилання на наступну сторінку.

Як створюються Web-сторінки

Приступаючи до створення Web-сторінок, чітко представте собі їх призначення. Вирішіть, якій темі буде присвячений майбутній сайт, і визначите тип інформації, яку належить на ньому представити. Найочевидніший приклад - побудова особистого сайту, що містить інформацію про сім'ю, область професійних інтересів і коло захоплень. Web-сторінки ділового характеру дозволять відвідувачам ознайомитися з особливостями вашого бізнесу, каталогами і оголошеннями. Якщо ви підете приведеним нижче рекомендаціям, ваші Web-сторінки набудуть привабливий зовнішній вигляд і принесуть безперечну користь майбутнім читачам.

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

• Організація даних. Поділіть зібрані дані на групи. Кожна група повинна представлятися окремою Web-сторінкою, присвяченою конкретному предмету або певній темі. Непогано, якщо Web-сторінка буде містити об'єм інформації, достатній для заповнення одного екрану. Майте на увазі, що розміщення надмірного числа інформаційних елементів на одній сторінці приведе до істотного зростання розміру файла цієї сторінки і, як наслідок, до невиправданого збільшення часу пересилки файла на комп'ютер користувача.

• Введення інформації. За допомогою програми текстового редактора або процесора введіть текст, який повинен відображатися на ваших Web-сторінках. Кожну сторінку слід зберегти у вигляді окремого файла-документа. Забезпечте текст дескрипторами HTML, щоб перетворити його у формат Web-сторінок. За допомогою дескрипторів HTML вам, крім того, вдасться доповнити Web-сторінки графічними зображеннями, таблицями, аудіо- і відеозаписами.

• Додавання гіперпосилань. Додавання гіперпосилань — надзвичайно важливий етап проектування Web-сторінок. Гіперпосилання у вікні броузера виглядає як фрагмент тексту або графічне зображення, які дозволяють користувачу переміститися до необхідної сторінки Web одним клацанням кнопки миші.

• Публікація Web-сторінок. Після закінчення роботи над Web-сторінками ви повинні звернутися до однієї з компаній-провайдерів (Web Presence Provider - WlРP), надаючих послуги з публікації Web-сторінок. WPP забезпечить зберігання ваших Web-сторінок на власному сервері і доступ до них ззовні. Після публікації сторінок ви повинні ще раз переконатися у тому, що всі гіперпосилання працюють так, як вами задумано, і інформація у вікні браузера виглядить належним чином.

ЗАВДАННЯ1.

Створити веб-сайт, що містить в собі 2 і більше сторінок. Хоч одна сторінка має містити посилання на іншу сторінку та повернення на головну, фонову картинку, рядок, що біжить.

Кожна стрічка повинна відображатись іншим кольором та розміром. На одній із сторінок слід розмістити графічне зображення та таблицю.