Конспекти, плани уроків: Web-дизайн

Меточний посібник по Web-дизайну 

для ОКНАР

для ОП

http://ito.vspu.net/vidkr_zan/files/2010_2011/Kytsak/plan_konspekt.htm

Лабораторная работа

"Создание веб-страниц средствами MS Office "

Лабораторна робота "Створення веб-сторінки власної родини за зразком" Інструкція (відеопояснення виконання роботи)

Практическая работа

Тема: Средства создания и сопровождения сайта. (Создание web-сайта с помощью Word).
Цель: освоить приемы создания web-страниц и web-сайтов с помощью текстового процессора MS Word; оформление дизайна страницы; организация внутренних и внешних гиперссылок.

Выполнение работы:

Задание 1. Создайте с помощью текстового процессора MS Word web-сайт «Мой сайт», состоящий из пяти страниц:

Страница 1 должна содержать:

·        заголовок;

·        гиперссылки: «Обо мне», «Моя семья», «Друзья», «Мои увлечения».

Страницы 2, 3, 4 и 5 должны содержать:

·        заголовок;

·        по два или более отформатированных абзаца текста (один абзац не менее трех полных строк);

·        фотографии (минимум по одной на каждой странице).

Сайт должен содержать информацию о вас, а также ваших родственниках, друзьях и т.п.

Требования к сайту:

·        заголовки и гиперссылки выравнивать по центру;

·        для абзацев текста использовать различные варианты выравнивания (по ширине, по левому краю, по правому краю);

·        использовать разные способы выравнивания фотографий;

·        обязателен фоновый цвет страницы;

·        на каждой странице должен быть заголовок окна;

·        для заголовков использовать шрифт Arial, для основного текста – Verdana (размеры подобрать самостоятельно).

Задание 2. Протестируйте работоспособность сайта в браузере (по возможность в двух различных). Протестируйте работоспособность сайта при выключенной графике.

Задание 3. Измените в настройках браузера шрифт по умолчанию на Courier New, размер 14 и убедиться, что это не повлияло на внешний вид страниц сайта.

Задание 4. Разместите созданный сайт на любом бесплатном хостинге. Проверьте работоспособность.

Задание 5.
Выполните отчет о работе  (название работы,  цель работы. задание и порядок его выполнения. вывод по работе).

6. Контрольные вопросы

1.     Что такое web-сайт?

2.     Что такое web-страница?

3.     Как создать web-страницу с помощью текстового редактора MS Word?

4.     Как в MS Word непосредственно отредактировать HTML-код?

Лабораторная работа № 

Создание Web-страницы с помощью MS Word.

Термин «живой журнал» (с английского - livejournal) означает документ – дневник, в котором автор описывает события своей жизни, свои интересы, свою работу, так, чтобы друзья автора, даже если они находятся далеко, смогли бы быть в курсе всех его новостей.

Пример живого журнала группы авторов можно посмотреть здесь:

http://www.livejournal.com/users/5tv/

Пример живого журнала одного автора можно посмотреть здесь:

http://www.livejournal.com/users/pikasol/

Как правило, живой журнал состоит из нескольких связанных документов, каждый из которых посвящен какой-то одной теме: работа, увлечения, друзья и т.п.

Для того, чтобы установить связи между отдельными документами, служба WWW (World Wide Web) в сети Интернет использует гиперссылки. Документы, содержащие гиперссылки, называются гипертекстами, или гипертекстовыми документами.

Таким образом, любой живой журнал – это, прежде всего,– набор гипертекстовых документов, с таблицами, изображениями, текстом и гиперссылками. Для его создания можно использовать любые текстовые редакторы, в том числе, MS Word.

1. Создайте на диске D: папку ZaoMSem3. В этой папке создайте папку LabWeb.

2.  Запустите программу «Microsoft Word» (меню Пуск/Программы/Microsoft Word).

3.       Создайте новый документ с именем ЖивойЖурнал. Сохраните ее в папке LabWeb и дайте расширение файлу - html. Этот документ будет основным.

По умолчанию MS Word сохраняет документы с расширением .doc Стандартное расширение для гипертекстовых документов - .html (или .htm). Чтобы сохранить файл с таким расширением, в меню Файл/Сохранить как… в списке «Тип файла» выберите Веб-страница (.html, .htm).

4.  Откройте папку LabWeb с помощью программы «Мой компьютер» и откройте документ ЖивойЖурнал.html. Этот документ будет открыт в программе Internet Explorer, которая специально предназначена для просмотра гипертекстовых страниц.

5.       Решите, какие темы у Вас будут в живом журнале. Выберите 2-3 самые любимые темы. Создайте для каждой темы отдельный документ с именем  ЖЖ-название_темы, и сохраните эти документы также с расширением .html в папке LabWeb.

6.       Проверьте правильность создания документов. Они должны открыться в программе Internet Explorer.

7.  Заполните все созданные Вами документы содержимым. Вы можете использовать изображения, таблицы, различные варианты оформления, которые предлагает MS Word, но при этом проверяйте, как выглядит документ в программе Internet Explorer.

8.       Сохраните все файлы и пригласите преподавателя.

9.       Свяжите документы между собой с помощью гиперссылок.

Поскольку главный документ – ЖивойЖурнал.html – должен быть связан с тематическими документами ЖЖ-название_темы.html, необходимо наладить эти связи.

Добавьте в ЖивойЖурнал.html названия выбранных Вами самых интересных тем, например, в виде списка.

На рисунке 1 эти темы – мотоциклы, музыка, вышивка крестиком, а также – официальный сайт Харлей-Дэвидсон.

Рисунок 1.

Для того, чтобы переходить из главного документа в другие документы, поступаем так:

- Выделяем название темы, например, «мотоциклы»

- Вызываем меню Вставка/Гиперссылка

- В списке возможных источников (файл, веб-страница, место в документе, новая страница, электронная почта) выбираем источник – файл.

- В списке доступных файлов выбираем нужный, например, ЖЖ-мотоциклы.html (см. Рис.2) и нажимаем ОК

Рисунок 2.

10. Добавьте в тематические документы ссылку на главный документ, ЖивойЖурнал.html

11. Проверьте работу гиперссылок, из документа в документ.

12. Сохраните все файлы, закройте MS Word и пригласите преподавателя.

Лабораторная работа

«Создание web-публикации в Microsoft Office Publisher»

Учебная цель:научиться создавать веб-публикации в Microsoft Office Publisher.

Студент должен

уметь:

- обрабатывать звуковую, графическую и видеоинформацию;

знать:

- основные понятия и терминологию предметной области мультимедийных технологий;

- практические приемы работы по использованию мультимедийных технологий.

Краткие теоретические и учебно-методические материалы по теме
лабораторной работы

Большим преимуществом приложения MS Publisher перед аналогичными редакторами для создания и вёрстки полиграфии является возможность заниматься в нём интернет-дизайном и разрабатывать веб-сайты. Данный процесс максимально автоматизирован и не потребует от Вас знания кода HTML, так как происходит под руководством Мастера. Эта интегрированная утилита запускает набор команд, которые почти всё быстро сделают за Вас. В предоставленном руководстве мы научим работать с Мастером и рассмотрим оптимальный алгоритм для компоновки простых Web-сайтов, их наполнения контентом и просмотра в сети Интернет.

Порядок работы MS Publisher:

1. Открыть программу MS Publisher.

2. Меню Файл/ Создать/Веб-узлы и электронная почта.

3. Выбрать шаблон макета простых веб узлов.

Любой макет позволяет самостоятельно настроить цветовую палитру сайта и количество страничек, которые хотите создать.

Задания для лабораторной работы:

1. Создайте веб-публикацию «Замки долины реки Луары». Страниц должно быть по количеству замков, а также Главная страница с описанием общей информации о долине реки Луары. Шапка веб-узла и меню должны быть одинаковые на всех страницах. Проверьте ссылки. Сохраните работу в своей рабочей папке. Материал для работы в папке Учебные материалы/ МДК ИТ Мультимедийные технологии/Практическая 6/Замки Луары.

Контрольные вопросы

1. Какую информацию можно разместить в веб-публикации?

2. Как добавить страницу в веб-узел?

3. Запишите трудности с которыми вы столкнулись при работе с веб-публикацией.

Практическая работа № . Создание Веб-документов средствами Microsoft Office.

Цель работы: овладеть способами создания веб-страниц, используя программы MS Word, MS Excel, MS PowerPoint.

                                                                               Теоретическая часть:

С помощью Microsoft Office можно создавать веб-страницы точно так же, как и обычные документов Microsoft Word, MS Excel, MS PowerPoint.
Можно использовать шаблон веб-страницы или сохранить документ в качестве веб-страницы. Для того, чтобы приступить в процессу создания документа, можно воспользоваться меню Формат, Вставка и панелью инструментов Веб-компоненты. Однако не все приёмы форматирования поддерживаются. В частности, таковыми являются таблицы, анимация текста и т.п.

                                                                                  Практическая часть

На рабочем столе создайте папку и переименуйте своей фамилией.

1. Создание веб-страниц в среде текстового редактора MS Word.
Создайте две веб-страницы любыми способами.

Создание веб-страницы на основе шаблона
1.    В меню Файл выберите команду Создать.
2.    В области задач Создание документа в группе Шаблоны выберите параметр На моем компьютере.

На вкладке Общие дважды щелкните шаблон веб-страницы.

Создание пустой веб-страницы
1.    В меню Файл выберите команду Создать.
2.    В области задач Создать документ, в группе Создание щелкните ссылку Веб-страница.

На обеих страницах сделайте красивый фон (Формат -> Фон ->Способы заливки ->Градиентная, Текстура или Узор). На первую страницу вставьте любое изображение и сохраните в виде веб-страницы с фильтром (в этом случае она будет занимать намного меньше места на диске и загрузка будет происходить быстрее). На второй странице создайте надпись «Изображение» и превратите её в гиперссылку на первую созданную нами страницу (выделите надпись -> Вставка Гиперссылка -> Выберите нужный файл).

2. Создание веб-страницы в среде табличного редактора.
Создайте документ Excel. На первый лист поместите небольшую таблицу (3 строки, 2столбца), на второй – диаграмму, созданную на основе этой таблицы. Сохраните документ с расширением .html.

3. Создание веб-страницы средствами программы MS PowerPoint.
Создайте пустую презентацию. Вставьте в неё 3-4 слайда. Придумайте названия полей заголовков и заполните их. В каждый слайд вставьте по 1-2 картинке. Сохраните документ с расширением .html.

 

Практичні роботи 

"Створення та розміщення навчальних сайтів"

Лабораторна робота 

"Робота з сервісом створення сайтів Google Sites"

Лабораторна робота 

"Тема: Розміщення сайту на веб-сервері "

Лабораторная работа

тема

MS Publisher. Створення власного веб-сайту.

Мета

Уміти за допомогою програми MS Publisher створити власний веб-сайт.

План

1.Спланувати дизайн макету та інформаційне наповнення веб-сайту.

2.Розробити веб-сайт за допомогою програми MS Publisher.

3.Розширити вміст сайту шляхом використання звуку, зображень, таблиць.

4.Створити гіперпосилання на інші інформаційні ресурси.

5.Виправити помилки, відредагувати сайт.

Теоретичні відомості

Вдало розробленому веб-сайту притаманні розмаїття ресурсів та динамізм Інтернету. Він може стати місцем зустрічі для спілкування, обговорення різноманітних тем, збирання даних, надання інформації тощо.

Особисті веб-сайти можна з успіхом використовувати як:

►інформаційні ресурси для інших користувачів;

►для встановлення зв'язку з іншими студентами в світі;

►як засіб пошуку партнерів для здійснення власних проектів;

►для демонстрації процесу навчання, який включає вивчення матеріалів з мультимедійної енциклопедії, довідкової бібліотеки, Інтернету та інших джерел;

►для опублікування результатів оглядів та анкетних опитувань;

►для представлення творів, наприклад, віршів, оповідань і наукових робіт;

►для відображення різноманітних подій, що відбуваються на факультеті чи в групі (наприклад, для розміщення матеріалів краєзнавчих експедицій, фотографій з екскурсій);

►для створення інтерактивної газети чи журналу, що відображає події з життя факультету, що дасть можливість заощадити кошти на друк.

Для створення простого веб-сайту, який буде швидко завантажуватися, найкраще використовувати MS Publisher, який дозволяє створювати веб-сайти, що складаються з однієї або декількох сторінок. Проте, слід зауважити, що дану програму не доцільно використовувати для розробки складного сайту або такого, що потребує постійного оновлення.

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

При плануванні змісту веб-сайту необхідно враховувати ряд чинників:

•яке з'єднання з Інтернетом буде мати більша частина відвідувачів майбутнього веб-сайту: швидке чи повільне. Від цього суттєво залежать кількість і розміри зображень на веб-сайті;

•які версії браузерів будуть використовувати відвідувачі веб-сайту: сучасні або старі (що не дають можливості розглядати сторінки з таблицями, фреймами та

анімацією. Не слід забувати, що створений вами веб-сайт можуть відвідувати люди, які працюють з різними браузерами та різним за потужністю комунікаційним обладнанням.

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

На кожній сторінці веб-сайту доцільно розмістити:

♦кнопки або гіперпосилання для переходу на головну сторінку;

♦адресу електронної пошти;

♦дату останньої модифікації веб-сайту;

♦URL-адресу сайту (на даному етапі ви не зможете розмістити URL-адресу на веб-сторінці).

Доки веб-сайт не завершено, його потрібно зберігати як файл MS Publisher. У вигляді веб-сторінок зберігають лише готовий веб-сайт. Крім того, після збереження сайту у вигляді веб-сторінки не потрібно видаляти файли веб-сайту у форматі MS Publisher, щоб мати змогу з часом вносити в нього

зміни.

Заголовки веб-сторінок і пункти навігаційного меню у програмі MS Publisher пов'язані між собою: при редагуванні одного з цих елементів текст автоматично оновлюється і в іншому. Дуже важливо, щоб жодні два елемента на сторінці не накладалися і щоб між текстом та графікою була відстань. Необхідно пам'ятати, що коли рамка текстового поля торкається іншого об'єкта або накладається на нього, напис зберігається як зображення. Таке зображення не може читатися як текстовий документ, а отже, вміст напису не

буде доступним для редагування. Окрім того, це збільшує час завантаження вебсторінок через Інтернет, а також впливає на відображення ефектів анімації.

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

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

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

Xiд роботи

1.Запустіть програму MS Publisher на виконання.

Пуск → Програми → MS Office → MS Publisher.

2.Створіть нову публікацію і виберіть для неї макет веб-сайту.

Вобласті завдань Нова публікація у віконці Почати з макету виберіть тип публікації Веб-вузли та електронна пошта → виберіть посилання Веб-вузли.

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

3. Конкретизуйте мету створення веб-сайту.

Після вибору макету відкриється вікно майстра Зручний конструктор веб-вузлів → встановіть прапорець на закладці Розміщення відомостей про профіль організації → ОК. Отримаєте веб-сайт, що складається з двох сторінок.

4. Внесіть особисті данні.

На екрані відобразиться діалогове вікно Особиста інформація. Заповніть у ньому відповідні поля → ОК. Якщо дане вікно не відобразилось, виконайте наступні дії: Правка → Особисті дані → заповніть відповідні поля власною інформацією → Поновити.

5. Задайте розмітку вашого майбутнього сайту.

Формат → Параметри: веб-вузол → Панель навігації → виберіть варіант Вертикальна та горизонтальна.

6. Виберіть кольорове оформлення сайту.

Клацніть у області завдань Параметри: веб-вузол на посиланні Колірні схеми → Застосувати колірну схему → виберіть один із варіантів кольорового оформлення.

7. Збережіть створений документ у власній папці.

Файл → Зберегти як → знайдіть і відкрийте свою папку → введіть назву свого сайту в поле Ім'я файлу → ОК. Програма автоматично додасть до імені файла розширення .pub.

8. Виберіть заголовок вашої веб-сторінки

У рядку стану внизу екрана клацніть на значку сторінки 1 для переходу на цю сторінку. Клацніть у текстовому полі Домашня сторінка, розташованому у верхній частині веб-сторінки. Введіть з клавіатури основний заголовок веб-сайта. У рядку стану клацніть на значку сторінки 2. Заповніть текстове поле заголовка вгорі сторінки. Вкажіть заголовки для всіх веб-сторінок, що залишилися.

9. Заповніть вашу веб-сторінку необхідною текстовою інформацією.

Потрібну текстову інформацію по можливості доповніть таблицею з відповідними додатковими даними.

10.Доповніть ваш сайт картинками та фотографіями; оберіть логотип.

Вставити → Рисунок → виберіть Картинки з колекції ClipArt або з файлу, якщо потрібно вставити заздалегідь підготовлені логотипи або фотографії.

11.Створіть гіперпосилання на іншу сторінку веб-сайту.

Перейдіть на першу сторінку. Клацніть на зображенні або виберіть блок тексту, який потрібно зв'язати з іншою сторінкою веб-

сайту → Вставка → Гіперпосилання → у діалоговому вікні Додавання гіперпосилання клацніть на панелі Зв'язати з місцем у документі → клацніть на сторінці, з якою потрібно зв'язати це гіперпосилання → ОК.

12.Створіть гіперпосилання на об'єкт, що знаходиться в мережі Інтернет.

Виберіть текст або клацніть на зображенні, яке потрібно зв'язати з іншим сайтом в Інтернеті → Вставка → Гіперпосилання → в діалоговому вікні Додавання гіперпосилання виберіть Зв'язати з файлом, веб-сторінкою → в поле адреси введіть URLадресу веб-сайту, на який створюєте гіперпосилання → ОК.

13.Збережіть веб-сайт у форматі публікації MS Publisher.

14.Перевірте макет сайту за допомогою засобів перевірки макета веб-сайту.

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

15.Перегляньте створений веб-сайт.

Файл → Попередній перегляд веб-сторінки. Після цього автоматично запуститься на виконання MS Internet Explorer або інший заданий за замовчуванням браузер, у вікні якого відображатиметься домашня сторінка веб-сайту.

16.Перевірте, чи правильно працюють всі гіперпосилання.

17.Збережіть веб-сайт в форматі веб-сторінки.

Файл → Помістити на веб-вузол → відкрийте власну папку → в полі Ім'я файлу перевірте написання імені файлу → Зберегти.

Примітка: Оскільки це ім'я стане частиною URL-адреси вашого веб-сайту, необхідно переконатися, що це саме те ім'я, яким би ви хотіли користуватися, і що його легко запам'ятають відвідувачі.

18. Перевірте роботу створеного веб-сайту.

Відкрийте Мій комп'ютер або Провідник і знайдіть папку, в якій зберігається вебсайт → Двічі клацніть на файлі НТМL з потрібним іменем.

19.Продемонструйте готовий веб-сайт викладачу.

20.Захистіть роботу. Здайте звіти.

	Контрольні запитання
1.	Яке призначення MS Publisher?	12.	Як додати до веб-сайту рисунок?
2.	Що таке публікація?	13.	Як вставити таблицю у веб-
3.	Якими способами можна створити		сторінку?
	публікацію MS Publisher?	14.	Для чого використовують гіперпо-
4.	Які ви знаєте види публікацій?		силання?
5.	Як вибрати для публікації макет	15.	Як створити гіперпосилання на пев-
	веб-сайту?		ний файл?
6.	Для чого створюють власні веб-	16.	Як створити гіперпосилання на Ін-
	сайти?		тернет-сторінку?
7.	На що варто звернути увагу, пла-	17.	Як створити гіперпосилання на ін-
	нуючи зміст веб-сайту?		шу сторінку сайту?
8.	Як змінити розмітку сайту?	18.	Яким чином можна змінити кольо-
9.	Як змінити заголовок веб-сторінки?		рове оформлення сайту?
10.	Як додати нову сторінку до веб-	19.	Як зберегти створений сайт в фор-
	сайту?		маті MS Publisher?
11.	Які об’єкти може містити веб-	20.	Як переглянути створений веб-
	сторінка?		сайт?

Тема

Розміщення веб-сайту в мережі Internet.

Мета

Навчитись розміщувати веб-сайти на безкоштовних Web-серверах.

План

1.Реєстрація на Web-сервері.

2.Розміщення сайту з використанням протоколу HTTP.

3.Розміщення сайту з використанням протоколу FTP.

4.Перевірка сайту на наявність помилок шляхом його редагування.

Теоретичні відомості

Створений вами веб-сайт можна розмістити в Інтернеті на Web-сервері. Webсервер виконує збереження, пошук і обмін файлами в WWW. Наприклад, коли клієнт Web запитує файл із WWW, програма браузер відправляє цей запит на Webсервер, на якому знаходиться даний файл. Сервер відшукує файл на свої дисках і відправляє його комп'ютеру-клієнту, від якого був отриманий запит. Обмін інформацією між клієнтом і Web-сервером відбувається відповідно до протоколу HTTP — загального протоколу, що відповідає за функціонування World Wide Web (див. попередні Л/Р.).

Web-сервер — це комп'ютер, що працює під керуванням однієї з операційних систем UNIX, Windows, Macintosh, на який установлена спеціальна програма Webcepeвp. Найбільш поширеною програмою Web-сервер є Apache Server, яка працює швидко і встановлюється безкоштовно (див. вузол www.apache.org). Часто використовуються також програми TomCat, Microsoft IIS, NCSA та ін. За допомогою однієї з таких програм свій Web-сервер може створити будь-яка організація, школа і навіть приватна особа. Однак це не завжди виправдано, оскільки повноцінний Webсервер повинен мати швидке з'єднання з Інтернетом (наприклад, через виділену лінію) і повинен працювати цілодобово. Тому користувачі вирішують проблему Webсерверу за допомогою сторонніх організацій — фірми вашого провайдера чи спеціалізованих фірм, які займаються хостінгом.

Хостінг (від англ. слова hosting — спільне розміщення) — це розміщення Webсайту на обладнанні компанії. Ресурси серверу і лінії зв'язку використовуються спільно безліччю клієнтів.

При виборі стороннього Web-серверу керуються двома основними критеріями: ціною і продуктивністю. У професійних розробників Web-сайтів вибір визначається можливостями замовника і стосунками з компаніями, що володіють Інтернетсерверами.

Нині з'являється усе більше Web-серверів, що здійснюють безкоштовний хос-

тінг (наприклад, російськомовні сервери www.chat.ru, www.narod.ru, www.boom.ru).

Такі сервери не вимагають оплати за підтримку Web-сайтів клієнтів та існують за рахунок рекламодавців. Зареєстрованому клієнту дається обмежений, але достатній простір на диску серверу — від 5 до 50 Мбайт. На ньому клієнт може розмістити як невеликий, так і солідний сайт. Єдине зобов'язання, що бере на себе клієнт безкоштовного Web-серверу, це розміщення на своєму сайті банерів — маленьких помітних зображень (часто анімованих), призначених для реклами. Втім, згоди клієнта на це, як правило, не запитують — банери вставляються й обновляються без участі власника сайту.

Безкоштовні Web-сервери мають також обмеження у наданому сервісі: вони, як правило, не підтримують сучасні Інтернет-технології PHP, JSP, ASP та ін. Однак свій сайт, що містить звичайні файли HTML, ви зможете розмістити на безкоштовному сервері без особливих проблем. До практичного розгляду цього питання ми тепер і перейдемо.

Створений вами сайт почне «діяти», якщо розмістити його на Web-cepвері. Після цього відвідувачі зможуть «заходити» на сайт і знайомитися з поданими на ньому матеріалами. Для передачі файлів на Web-сервер поширені дві можливості:

•з використанням протоколу HTTP;

•з використанням протоколу FTP.

Вобох випадках необхідно зареєструватися на одному з безкоштовних Web-

серверів, наприклад: http://www.hostinger.ru, http://ayola.net, http://www.hut.ru, http://www.topua.net.

Під час реєстрації необхідно заповнити відповідні реєстраційні поля, одне з яких передбачає введення електронної пошти. Після реєстрації автоматично буде відправлено на вказану пошту логін, пароль, адресу для входу в панель керування сайтом, адресу новоствореного вашого сайту (поки що порожнього), FTP сервер, FTP логін, FTP пароль. Ці всі дані потрібні для керування сайтом.

Для передачі файлів за допомогою протоколу HTTP потрібно ввійти у панель управління сайтом, ввівши одержані на пошту логін та пароль. В панелі керування треба знайти вкладку (посилання чи менеджер завантаження файлів). В залежності на якому Web-сервері зареєстровано сайт, зазначена вкладка може називатися порізному. Після цього необхідно там створити папку з назвою index.files (можна ін-

шу назву, але для певності краще цю). У створену папку на Web-сервері завантажити з власної папки свого комп’ютера всі файли, а в кореневий каталог на Webсервері завантажити файл index.html. Після завершення завантаження можна зайти через будь-який Web-браузер на свій сайт за адресою, що вислана вам на пошту.

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

Можливий ще один варіант пересилання — це протокол FTP, що призначений для обміну файлами між комп'ютерами, пов'язаними між собою локальною чи глобальною мережею. В такому випадку комп'ютери взаємодіють один з одним за технологією «клієнт-сервер». Файли зберігаються в центральному комп’ютері (FTPсервері), до якого підключені комп'ютери розподіленої мережі (FTP-клієнти). Клієнт посилає на сервер запит і одержує у відповідь необхідні йому файли. Крім «завантаження» файлів на клієнтський комп'ютер, можна «вивантаження» файлів з комп'ютера клієнта на сервер. Тобто FTP допускає двосторонній обмін файлами між сервером і клієнтом.

Для на комп'ютері-сервері повинна бути встановлена програма FTP-сервер, а на клієнтських комп'ютерах — програма-клієнт. Остання може бути як окремою програмою (наприклад, відома програма CuteFTP), так і модулем, вбудованим в ін-

шу програму (наприклад, FAR, Total Commander).

Алгоритм розміщення сайту за допомогою програми Total Commander (Windows Commander).

1.Запустити Total Commander.

2.Вибрати FTP Æ Соединиться с FTP-сервером…, в результаті чого появиться вікно Соединение с FTP-

сервером. У найбільшій області вікна є перелік створених FTP- з’єднань.

3.Натиснути кнопку Добавить.

4.У нововідкритому діалоговому вікні Настройка FTP-соединения вказати ім'я з'єднання (воно буде відображатися вам у переліку створених FTP-з’єднань) та ввести адресу FTP-сервера, яку було вислано на пошту. Зберегти змі-

ни, натиснувши Ok.

5.Вибрати створене FTP-з’єднання і натиснути кнопку Соединиться.

6.Далі ввести послідовно ім'я користувача FTP (FTP-логін), FTP пароль і дочекатись з'єднання.

7.Після з'єднання на одній з панелей Total Commander буде відображатися вміст папок на Web-сервері (переважно спочатку там нічого немає або є одна папка з назвою сайту).

8.На іншій панелі Total Commander слід перейти у папку, де міститься ваш сайт (на ПК, за яким ви працюєте).

9.Скопіювати потрібні папки та файли.

10.Від’єднатись.

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

Xiд роботи

1.Зареєструйтесь на одному з безкоштовних Web-серверів.

2.Запишіть всю потрібну реєстраційну інформацію у звіт, яка прислана вам на пошту (паролі у звіт не записуйте, бо це ваша конфіденційна інформація).

3.За допомогою Total Commander скопіюйте власний сайт, що створено у попередній лабораторній роботі на Web-сервер згідно вказівок, що є в теоретичних відомостях.

4.Перевірте працездатність вашого сайту в Інтернеті.

5.За вказівкою викладача внесіть деякі зміни у сайт.

6.Перевірте чи зміни вступили в дію.

7.Продемонструйте кінцевий сайт викладачу.

8.Здайте звіти.

Контрольні запитання

1.За яким протоколом відбувається обмін інформацією між клієнтом і Web-сервером?

2.Що таке Web-сервер?

3.Які програми використовуються як Web-сервери?

4.Що таке хостінг?

5.Які переваги безплатних Webсерверів?

6.Способи передачі файлів на Webсервер.
7.Що треба вказувати при реєстрації на Web-сервері?

8.Які дані приходять на електронну пошту після реєстрації і для чого вони потрібні?

9.Який обмін підтримує протокол

FTP?

10.Що необхідно здійснення FTPобміну?

11.Які програми FTP-клієнти вам відомі?