2

Управління освіти і науки Хмельницької облдержадміністрації

Кам’янець-Подільський багатопрофільний навчально-реабілітаційний центр

Створення сайтів в системі UCOZ

Практичний посібник

2012

3

Укладач: Боденчук О.В. – вчитель інформатики, інженер-програміст Кам’янець-Подільського багатопрофільного навчально-реабілітаційного центру, магістр педагогічних наук

Рецензенти: Смалько О.А. — викладач фізико-математичного факультету кафедри інформатики Кам’янець-Подільського національного університету імені Івана Огієнка Балюк Л.В. — заступник директора з навчально-виховної роботи Кам’янець-Подільського багатопрофільного навчально-реабілітаційного центру

В даному посібнику подано рекомендації по створенню та редагуванню сайтів в системі ucoz. Користуючись цим посібником кожен бажаючий може створити власний сайт

4

Передмова Сьогодні, коли темп розвитку суспільства надзвичайно

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

Для чого сайт школі? Сучасний навчальний заклад поряд з основним призначенням – навчати та виховувати дітей повинен бути осередком інформації, яка зацікавлює громадськість, батьків учнів, педагогів та школярів. З розвитком глобальної мережі Інтернет школа отримала необмежені можливості представити себе, свій колектив та його досягнення далеко за межами свого регіону. Одночасно з’явилася можливість отримувати додаткову інформацію про навчальні заклади України та зарубіжжя, переймати їх досвід для покращення якості освітніх послуг. Інтернет дозволив вести спілкування між колегами-педагогами на сторінках веб-ресурсів, обмінюватися своїми надбаннями, вирішувати наболілі проблеми, тощо. Перед сучасним навчальним закладом постала вимога сьогодення – мати досконалий шкільний веб-ресурс, який надасть змогу презентувати школу, розмістити свої напрацювання, шкільні новини, створити засіб спілкування у мережі Інтернет.

На даний час у всесвітній мережі існує небагато безкоштовних хостингів, які допоможуть створити повноцінний веб-сайт. Одним з найдосконаліших та найзручніших є безкоштовний хостинг від uCoz. Ця система розміщена за адресою у мережі Інтернет: http://www.ucoz.ua/.

5

Зміст

1. З чого почати створення web сайту.......................................... 6

2. Корисні поради по створенню web сайту ................................ 7

3. Програми для створення сайту. Редактори html ................... 8

4. Програми для роботи з графікою ............................................. 9

5. Створюємо сайт .......................................................................... 10

6. Складові сайту .......................................................................... 11

7. Типи web сайтів. Види веб сайтів ............................................. 11

8. Дизайн веб сайтів ....................................................................... 12

9. Наповнення сайту....................................................................... 12

10. Перші кроки ................................................................................ 14

11. Основні можливості системи UCOZ.UA.................................. 15

12. Реєстрація поштової скриньки ................................................. 16

13. Розробка веб-сайту ..................................................................... 19

14. Мова HTML. Основні теги ........................................................ 28

15. Редагування дизайну .................................................................. 37

16. Просування в пошукових системах ......................................... 48

17. Просування сайту за допомогою Дошок оголошень.............. 49

18. Як обмінюватися посиланнями. Поради і помилки .............. 50

19. Терміни ..................................................................................... 51

6

З чого почати створення web сайту У багатьох користувачів Інтернету через деякий час перегляду

веб-сторінок з’являється думка про створення свого власного сайту. Більшість думає, що без знання мов програмування сайт неможливо створити. Так, колись це було дійсністю, але не тепер. Звичайно, початкове знання html бажано мати, ну хоч у загальних рисах. PHP та інші мови теж бажані, але можу вас запевнити, не знаючи абсолютно жодної мови програмування можна організувати досить цікаві задуми у формі веб-сайтів.

1. Рекомендую Вам спочатку знайти в інеті закачати "Учебник HTML для начинающих". Він написаний дуже доступно і зрозуміло. При читанні обов'язково робіть самі наведені в нім приклади (для цього можете спочатку використовувати навіть звичайний Блокнот, який є на будь-якому ПК), щоб мати уявлення про найнеобхідніші речі: про теги, створення і форматування тексту, вставку картинок і зображень, створення фону і зміну кольору, створенні гіперпосилань і так далі. Після декількох зроблених Вами прикладів, збережете отриманий файл, назвавши його як завгодно, але обов'язково з розширенням .html (наприклад: index.html). Тепер, відкривши Ваш збережений файл, подивитеся, що у Вас вийшло (Ваш файл повинен відкритися у Вашому браузере - Internet Explorer). Потім відкрийте знову Ваш документ за допомогою того-ж блокнота і поекспериментуйте далі, читаючи підручник, не забуваючи зберігати почастіше Ваш файл, при цьому інколи проглядаючи його (что-ж Ви зробили і що в нім змінилося). Повірте - це зовсім не важко.

2. Далі Вам буде потрібно якого-небудь HTML-редактор. Рекомендую Вам скористатися дуже непоганим редактором "HTML-Reader Rus". У нім весь опис російською мовою, одночасно на екрані Ви бачите 2 вікна (у одному вікні Ви створюєте сторінки або їх редагуєте, в другому відразу проглядаєте результат), якщо щось зробили неправильно - натискуєте кнопку "Отмена" і все повертається до первинного вигляду. У панель редактора вбудовані всі необхідні функції (вставка кольору, файлів, картинок, таблиць і багато інших), тобто не треба кожного разу заглядати в Підручник, щоб подивитися потрібний код для якої-небудь дії, за Вас це зробить Редактор, від Вас потрібно буде тільки натискувати потрібну кнопку. Ви самі знатиметеся на його можливостях і налаштуваннях, прочитавши

7

розділ "Справка". 3. Тепер поекспериментуйте. Спробуйте самі вставити декілька

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

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

Корисні поради по створенню web сайту Стежте, щоб Ваші сторінки не були дуже великі за розміром,

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

Уникайте крупних зображень і аплетів, вони дуже довго вантажаться.

Користувачі не люблять, коли сторінку треба прокручувати зліва направо - горизонтальна прокрутка (внизу).

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

8

По можливості, прагніть не використовувати на сайті фрейми (вікно або декілька вікон усередині сторінки), оскільки такі сторінки повільніше індексуються пошуковиками.

Деякі люди не уявляють собі дизайну без величезної кількості картинок (або без Flash-заставок, що ще гірше). Багато хто забуває головне правило дизайну - зробити так, щоб користувачеві було зручно. Якщо користувачеві буде незручно, якщо Ваша сторінка з Flash або безліччю картинок завантажується декілька хвилин, він просто закриє сторінку, не дочекавшись завантаження. І швидше за все вже не повернеться на Ваш сайт - адже сайтів в Інтернеті немало. Пам'ятаєте, що вэб-дизайн - це перш за все правильна подача інформації, він має бути ефективним.

Якщо Ви хочете, щоб Ваш сайт добре ранжирувався пошуковими машинами, прагніть менше використовувати Flash, не дивлячись на її "красоту". Теж саме відноситься і до скриптів.

Не пишіть нічого в статусному рядку, відвідувачеві хочеться знати, куди він потрапить після натиснення на посилання.

Використовуйте CSS. Каскадні таблиці стилів можуть достатньо сильно полегшити сторінку, якщо їх правильно використовувати.

Програми для створення сайту. Редактори html Namo Webeditor - візуальний редактор, включає більше 80

вбудованих скриптів Javascript. Потужні майстри помітно спрощують завдання створення динамічних веб-сторінок з використанням баз даних (підтримує ASP, PHP, і JSP). Для новачків є 200 шаблонів.

Dreamweaver - програма для створення Web-страниц. Її можливості ширше в порівнянні із звичайними функціями подібних редакторів.

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

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

9

з різними браузерамі, функціональний редактор коду веб-сторінок і можливість працювати з такими технологіями, як: XML, Javascript, PHP, Adobe Coldfusion, ASP і ASP.NET.

HomeSite 5.0 - Одна з найпопулярніших програм для створення WWW сторінок. "Сучасний" інтерфейс з красивими кнопочками; зручне введення найбільш поширених тегів; підтримка таблиць, форм, скриптів; шаблони; ведення проектів; проглядання результату у вікні програми (для цього має бути встановлений Internet Explorer) або в зовнішньому браузере і ще купа функцій.

Html-reader 1.7 Rus - хороший редактор для перегляду, коректування і створення нових html-страниц

Міні-сайт - невелика, проста і зручна програма фірми "Kors-soft" для створення сайту про Вашу фірму.

Catshtml 1.5 Rus - редактор html, малий розмір, багато можливостей, вбудовані скрипти і багато др.

Coffeecup DHTML Menu Builder - програма для швидкого створення різних меню для Web-сторінок.

AI HTML Utilities 1.6 - набір утиліт для розробки веб-сайтів: редактор HTML-текстов, CSS-файлов, утиліта для підбору кольорів, оптимізатор коду, що вийшов, збірка корисних кодів HTML і таблиця спеціальних символів.

HTML Optimizer v 2.5 Rus - програма коректно видаляє непотрібні пропуски, лапки, коментарі і тому подібне в HTML-коде, унаслідок чого об'єм сторіночки помітно зменшується (в середньому - на 25 %) і прискорюється її завантаження.

Clear HTML v.1.54 - програма видаляє з коду сторінок непотрібні пропуски і упорядковує вміст.

Програми для роботи з графікою HTML Colors2000 - програма розпізнає колір в будь-якій

крапці і видає код. Color Picker - скрипт для вибору і визначення колірного коду. Deknop 4.3.12 - створення кнопок, не вимагає навиків в

графіці. Free-buttons v.1.15 - програма для швидкого створення 3d

кнопок.

10

deja vu Picture Viewer v.2.70a Rus - маленька, але дуже функціональна гляделка графічних файлів.

Pickup Window v.1.9 - програма для розпізнавання кольорів в будь-якій точці екрану.

Всі ці программи ви можете легко знайти і завантажити за

допомогою пошукової системи

Створюємо сайт

Створення сайтів - це складовий процес, що залучає працю різних фахівців. Це комплексний процес, спрямований на більш повне виконання завдання, що поставлено перед створеним сайтом . Створення (розробка) web сайту включає в себе:

Визначення цілей Web сайту. Збір та аналіз інформації ( до стандартнго пакету не

входить і виконується як окрема послуга ): o аналіз потенційної аудиторії; o аналіз конкурентів; o аналіз і виявлення Ваших конкурентних переваг.

Планування структури сайту, зміст сторінок, компонування.

Проектування дизайну сайту. Розробка і затвердження дизайну. Створення HTML-шаблону web сайту на основі

графічного дизайн-макету. Налаштування кросбраузерності - коректне

відображення сторінок у популярних браузерах: o Internet Explorer 7 й вище; o Opera 9,5 й вище; o Firefox 3, 5 й вище.

Інтеграція системи управління сайтом (CMS). Установка необхідних компонентів. Настройка системи управління сайтом (CMS). Перенесення сайту на хостинг. І перш, ніж визначати вартість та термін створення сайту,

11

треба зрозуміти, що необхідно, щоб сайт існував. То ж, що таке сайт, та з чого складається сайт?

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

Складові сайту дизайн сайту ( оформлення сайту ) - це графічна оболонка

з графіки, скажімо так, «одяг», за яким зустрічають сайт; web програмування - забезпечення працездатності сайту

та направлено на зручність користування сайтом контент сайту - інформаційне наповнення веб сайту:

тексти, графіка, мультимедіа ... доменне ім'я сайту ( домен ) - адреса сайту в мережі

Інтернет хостинг - це "домівка" сайту - сервер, на якому

розташовані всі файли сайту Це основні складові, і перед створенням сайту необхідно для

себе чітко визначити цілі та завдання майбутнього проекту, щоб отримати сайт високого рівня за оптимальну вартість.

Типи web сайтів. Види веб сайтів Ми маємо можливість створення сайтів різних типів – від

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

Залежно від напрямку та поставлених завдань можна виділити такі типи (види або категорії) веб сайтів:

12

Сайт «Візитка» Представницький сайт Корпоративний сайт Інтернет-каталог Інтернет-магазин Промо-сайт Інформаційний портал І це лише основні напрямки при розподілу сайтів на типи та

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

Дизайн веб сайтів

Дизайн - невід'ємна частина будь-якого сайту. Web дизайн ( веб дизайн або web design ) - це комплексне рішення, що спрямоване на створення оригінального дизайну для сайту, розробку графічних елементів, проектування структури та навігації для сайту.

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

Наповнення сайту

Ми пропонуємо інформаційне наповнення сайту. Інформаційне наповнення сайту - це роботи по заповненню

13

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

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

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

контент повністю підготовлений і наданий Замовником: нами проводиться адаптація контенту під сайт та занесення на web сторінку;

контент надано Замовником: нами проводиться обробка контенту (має відношення до графіки та мультимедіа), при необхідності створення таблиць, проводиться адаптація контенту під сайт, після чого він заноситься на web сторінку;

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

Копірайтинг - створення інформаційного контенту в текстовому вигляді: написання статей, описів, текстів рекламних матеріалів, тощо.

Рерайтинг - створення інформаційного контенту в текстовому вигляді шляхом перефразування вже існуючого текстового джерела.

14

Перші кроки І так, щоб створити власний сайт, треба мати: 1. Бажання; 2. Комп’ютер; 3. Підключення до Інтернету. Створити сайт безкоштовно і швидко, при тому не володіючи

досвідом та навичками в створенні сайтів, дозволяє сучасна безкоштовна система управління сайтом uCOZ. В ній ви знайдете дуже зручну панель управління системою управління сайтом (CMS) – uCoz дозволяє швидко зробити сайт для будь-яких потреб.

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

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

uCoz — це безкоштовний веб-хостинг з вбудованою системою керування сайтом. Модулі uCoz можуть використовуватися як у єдиній зв'язці для створення повнофункціонального сайту, так і окремо, наприклад, в якості блог-платформи, веб-форуму і так далі.

На даний момент у системі побудовано більш ніж 1600 тисяч сайтів.

При реєстрації користувачу надається можливість вибрати домен для свого проекту. В системі існують також і домени, спеціально розраховані на українську аудиторію — .ucoz.ua та .at.ua.

Після створення 29 жовтня 2005 року російська версія сервісів побачила світ.

В червні 2007 року відбулося офіційне відкриття англомовної версії, а у серпні старт альфа версії німецької. У березні 2008 року розробники українізували систему. Україномовний варіант доступний за адресою ucoz.ua.

15

Основні можливості системи UCOZ.UA Користувачу пропонується понад 700 дизайнів на вибір, які

можна використати для побудови сайту; Можливість створити власний дизайн (шаблон) або

переробити будь-який зі стандартних; При реєстрації кожен користувач отримує 400 мегабайт

дискового обсягу. Дисковий обсяг постійно збільшується пропорційно зростанню кількості відвідувачів сайту.

Можливість отримати домен третього рівня в 21 різних зонах; Доступ до FTP; Безкоштовна технічна підтримка; WYSIWYG online редактор; Візуальний конструктор блоків; Резервне копіювання. Реєстрація на сайті UCOZ відбувається з використанням

глобальної системи електронної паспортизації uNet; крім того задається окремий пароль для управління сайтом.

При створенні сайту використовуються модулі - веб-додатки, скомбінувавши які можна отримати сайт будь-якої складності:

1. Форум 2. Новини сайту 3. Щоденник (блог) 4. Каталог статей 5. Каталог файлів 6. Каталог сайтів 7. Міні-чат 8. Дошка оголошень 9. Фотоальбом 10. Опитування 11. Гостьова книга 12. FAQ (питання/відповідь) 13. Поштові форми 14. Редактор сторінок сайту 15. Статистика відвідувань Всі модулі можуть бути перероблені під інші, які актуальні для

16

навчальних закладів. Зрозуміло, що власники хостингу турбуються про власну безпеку та заробіток від реклами, тому розробники сайтів у системі uCoz повинні погодитись з деякими умовами, які обумовлені на сайті http://www.ucoz.ua/, та систематично виконувати їх. При невиконанні цих умов, власники хостингу можуть видалити ваш сайт назавжди, тому перед початком конструювання сайту необхідно обов’язково прочитати угоду.

Отже, щоб створити шкільний сайт, спочатку необхідно ознайомитись з аналогічними розробками, які успішно діють у мережі Інтернет та створити свій проект. Ознайомитись з численними шкільними веб-ресурсами можна у найбільшому в Україні каталозі освітніх сайтів за адресою: http://chutovo.at.ua/dir, де розміщено посилання на більш як 330 веб-сайтів навчальних закладів з різних куточків України. Також обов’язковою умовою є наявність робочої електронної поштової скриньки.

Реєстрація поштової скриньки Для створення сайту потрібно мати електрону поштову

скриньку. Для її реєстрації є багато безкоштовних сервісів. Зареєструємося на одному з таких сервісів, наприклад i.ua. Для цього в адресні строці вводимо www.i.ua. Відкривається вікно:

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

поля.

17

Натискаємо «Продовжити» і заповняємо поля відмічені знаком

оклику «!». Обов’язковим є підтвердження дотримання умов «Угоди користувача».

Натискаємо зареєструватися і отримуємо поштову скриньку.

Відкривається вікно в якому показані усі сервіси, які надає даний

18

сервер. Вибираємо «Пошта».

Автоматично відбувається вікно папки «Вхідні», тут ми

бачимо три листи-рекомендації, надіслані поштовим сервісом, по використаню і безпеці поштової скриньки.

19

Тепер у нас є усе необхідне і ми можемо приступити до

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

Розробка веб-сайту Розробка веб-сайту розпочинається з уведення в адресну

строку www.ucoz.ua. У відкритому вікні вибираємо «СТВОРИТИ САЙТ»:

З’явиться реєстраційна форма, яку необхідно заповнити, щоб

20

стати користувачем системи uCoz:

Коли поля заповнені натискаємо «Реєстрація». Якщо усе

правильно заповнено з’являється вікно:

21

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

Після цього з’явиться вікно у якому необхідно ввести код з

цифр, які зображені біля порожнього поля та натиснути кнопку «Send»:

Після підтвердження електронної адреси, відкриється вікно в

якому вам пропонують авторизуватися в системі uNet.

22

Увійшовши у систему uNet вам пропонується заповнити

«Установки администратора». У спеціальній реєстраційній формі потрібно ввести новий пароль для веб-топа (він також буде використовуватись для входу у панель управління сайту) та ввести відповідь на секретне питання (необхідно його запам’ятати, щоб пізніше використовувати для зміни паролів):

Натиснувши кнопку «Сохранить», з’явиться вікно

23

“Управление сайтами», де необхідно ввести адресу майбутнього сайту та вибрати безкоштовний домен з переліку. Адреса повинна складатись з латинських літер та цифр і бути короткою, щоб її було легко запам’ятати і вона має відповідати назві навчального закладу. Приклад вибрана нами: «bnrc.ucoz.ua» (назва нашого закладу БНРЦ).

Натиснувши кнопку «Продолжить» ви побачите вікно про

успішну реєстрацію адреси вашого сайту у системі uCoz: Натиснувши кнопку «Панель управления сайтом»

здійснюється перехід до майстра настройки вашого сайту. У ньому необхідно вибрати назву сайту (буде з’являтися на верхній панелі браузера під час відвідування сайту), мову сайту та дизайн сайту.

Дизайн сайту вибирається натиснувши відповідне посилання

«Выбрать дизайн», з’являється каталог дизайнів, переглянувши який,

24

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

Оскільки ми створюємо шкільний сайт, то вивираємо категорію «Бизнес і образование». Відкриваються шаблони з цієї категорії:

25

Вибираємо зацікавивший нас шаблон. Про те, що шаблон

вибраний нас повідомляє вікно:

Знову відкриється попереднє вікно майстра настройки

конфігурації сайту, де вже буде вказано номер вибраного вами дизайну.

Натиснувши кнопку «Продолжить» відбудеться перехід до

вікна вибору модулів сайту:

26

Поставивши прапорці навпроти бажаних модулів, та

натиснувши кнопку «Продолжить» ви ввійдете у панель управління сайтом. На даній сторінці представлені усі операції, які ви можете здійснювати над своїм сайтом.

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

Першим у списку по центру є розділ «Управление дизайном»,

27

перейшовши по даному посиланю ви попадаєте на сторінку:

Дана сторінка дає змогу відредагувати вам вигляд вибраного

дизайну. Переглянути створений нами сайт можна увівши в адресній

строці браузера адресу створеного сайту, в даному випадку це: www.bnrc.ucoz.ua або «Общие» — www.bnrc.ucoz.ua.

28

Натиснувши посилання «Верхняя часть сайта» у розділі «Глобальные блоки» відкриється поле відображення цієї частини сайту мовою HTML.

Тут у багатьох може виникнути запитання: «А як далі? Я ж не занаю мови HTML.» Не потрібно лякатися. В мові HTML немає нічого складного. В інтернеті можна знайти багато літератури про цю мову і її використання. Тут лише наведу основні поняття, які будуть зустрічатися підчас роботи.

Мова HTML. Основні теги

Базові елементи

Тип документа <HTML></HTML> Початок і кінець файла

Імя документа <TITLE></TITLE> Має бути в заголовку

Заголовок <HEAD></HEAD> Опис документа

Тіло <BODY></BODY> Вміст сторінки

Заголовок <H?></H?>

Заголовок з вирівнюванням

<H? ALIGN=LEFT|CENTER|RIGHT> </H?>

Секція <DIV></DIV>

Секція з вирівнюванням

<DIV ALIGN=LEFT|RIGHT|CENTER> </DIV>

Цитата <BLOCKQUOTE></BLOCKQUOTE>

Виділення <EM></EM>

Додаткове виділення <STRONG></STRONG>

Код <CODE></CODE>

Адреса автора <ADDRESS></ADDRESS>

Великий шрифт <BIG></BIG>

Маленький шрифт <SMALL></SMALL>

29

Зовнішній вигляд

Жирний <B></B>

Курсів <I></I>

Підчеркнутый <U></U>

Перечеркнутый <STRIKE></STRIKE>

Перечеркнутый <S></S>

Верхній індекс <SUP></SUP>

Нижній індекс <SUB></SUB>

Форматірований <PRE></PRE> Зберігає формат тексту «як є»

Ширина <PRE WIDTH=?></PRE> в символах

Центрувати <CENTER></CENTER>

Мигающий <BLINK></BLINK>

Размер шрифта <FONT SIZE=?></FONT> від 1 до 7

Змінити розмір шрифта

<FONT SIZE="+|-?"></FONT>

Базовий розмір шрифта

<BASEFONT SIZE=?>

от 1 до 7; по умолчанию 3

Колір шрифта <FONT COLOR="#$$$$$$"></FONT>

Вибір шрифта <FONT FACE="***"></FONT>

Многоколоночный текст

<MULTICOL COLS=?></MULTICOL>

Пробел между колонками

<MULTICOL GUTTER=?></MUL

по умолчанию 10 точек

30

TICOL>

Ширина колонки <MULTICOL WIDTH=?></MULTICOL>

Пустой блок <SPACER>

Тип пустого блока

<SPACER TYPE=horizontal|vertical| block>

Величина пустого блока <SPACER SIZE=?>

Розміри пустого блока

<SPACER WIDTH=? HEIGHT=?>

Вирівнювання <SPACER ALIGN=left|right|center>

Силки і графіка

Силка <A HREF="URL"></A>

Силка на закладку <A HREF="URL#***"></A> в іншому

документі

<A HREF="#***"></A> в тому ж документі

На інше вікно <A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"> </A>

Графіка <IMG SRC="URL">

Вирівнювання <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT| RIGHT>

Вирівнювання <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE| BASELINE|ABSBOTTOM>

Альтернатива <IMG SRC="URL" ALT="***">

Карта <IMG SRC="URL" ISMAP>

31

Розмір <IMG SRC="URL" WIDTH=? HEIGHT=?>

Рамка <IMG SRC="URL" BORDER=?>

Відступ <IMG SRC="URL" HSPACE=? VSPACE=?>

Размір об'екту <EMBED SRC="URL" WIDTH=? HEIGHT=?>

Параграф <P></P>

Вирівнювання <P ALIGN=LEFT|CENTER|RIGHT> </P>

Новий рядок <BR>

Горизонтальний разділитель <HR>

Вирівнювання <HR ALIGN=LEFT|RIGHT|CENTER>

Толщина <HR SIZE=?>

Ширина <HR WIDTH=?>

Ширина в процентах <HR WIDTH="%">

Суцільна лінія <HR NOSHADE>

Перенос <WBR>

Списки

Неупорядкований <UL><LI></UL>

Компактний <UL COMPACT></UL>

Тип мітки <UL TYPE=DISC|CIRCLE|SQUARE>

<LI TYPE=DISC|CIRCLE|SQUARE>

Нумерованый <OL><LI></OL>

32

Компактний <OL COMPACT></OL>

Тип нумерації <OL TYPE=A|a|I|i|1>

<LI TYPE=A|a|I|i|1>

Перший номер <OL START=?>

<LI VALUE=?>

Меню <MENU><LI></MENU>

Компактне <MENU COMPACT></MENU>

Каталог <DIR><LI></DIR>

Компактний <DIR COMPACT></DIR>

Фон і колір

Фонова картинка <BODY BACKGROUND="URL">

Колір фону <BODY BGCOLOR="#$$$$$$">

Колір текста <BODY TEXT="#$$$$$$">

Колір Силки <BODY LINK="#$$$$$$">

Пройденна Силка <BODY VLINK="#$$$$$$">

Активна Силка <BODY ALINK="#$$$$$$">

Специальный символ &#?;

< &lt;

> &gt;

& &amp;

" &quot;

Торгова марка ТМ &reg;

Copyright &copy;

Неразділяючий пробіл &nbsp;

33

Таблиці

Определить таблицу <TABLE></TABLE>

Окантовка таблицы <table border=?></TABLE>

Расстояние между ячейками <TABLE CELLSPACING=?>

Дополнение ячеек <TABLE CELLPADDING=?>

Желаемая ширина <TABLE WIDTH=?>

Ширина в процентах <TABLE WIDTH="%">

Строка таблицы <TR></TR>

Вирівнювання <TR ALIGN=LEFT|RIGHT| CENTER| MIDDLE|BOTTOM>

Ячейка таблицы <TD></TD>

Вирівнювання <TD ALIGN=LEFT|RIGHT|CENTER| MIDDLE|BOTTOM>

Без перевода строки <TD NOWRAP>

Растягивание по колонке <TD COLSPAN=?>

Растягивание по строке <TD ROWSPAN=?>

Желаемая ширина <TD WIDTH=?>

Ширина в процентах <TD WIDTH="%">

Колір ячейки <TD BGCOLOR="#$$$$$$">

Заголовок таблицы <TH></TH>

Вирівнювання <TH ALIGN=LEFT|RIGHT|CENTER| MIDDLE|BOTTOM>

Без перевода строки <TH NOWRAP>

34

Растягивание по колонке <TH COLSPAN=?>

Растягивание по строке <TH ROWSPAN=?>

Желаемая ширина <TH WIDTH=?>

Ширина в процентах <TH WIDTH="%">

Колір ячейки <TH BGCOLOR="#$$$$$$">

Заглавие таблицы <CAPTION></CAPTION>

Вирівнювання <CAPTION ALIGN=TOP|BOTTOM>

Фрейми

Документ с фреймами

<FRAMESET></FRAMESET>

(вместо <BODY>)

Высота строк <FRAMESET ROWS=,,,></FRAMESET> (точки или %)

Высота строк <FRAMESET ROWS=*></FRAMESET>

(* = относительный размер)

Ширина колонок

<FRAMESET COLS=,,,></FRAMESET> (точки или %)

Ширина колонок

<FRAMESET COLS=*></FRAMESET>

(* = относительный размер)

Ширина окантовки <FRAMESET BORDER=?>

Окантовка <FRAMESET FRAMEBORDER="yes|no">

Колір окантовки

<FRAMESET BORDERCOLOR="#$$$$$$">

Определить <FRAME> (содержание

35

фрейм отдельного фрейма)

Документ <FRAME SRC="URL">

Имя фрейма <FRAME NAME="***"|_blank|_self| _parent|_top>

Ширина границы

<FRAME MARGINWIDTH=?>

(правая и левая границы)

Высота границы

<FRAME MARGINHEIGHT=?>

(верхняя и нижняя границы)

Скроллинг? <FRAME SCROLLING="YES|NO|AUTO">

Постоянный размер <FRAME NORESIZE>

Окантовка <FRAME FRAMEBORDER="yes|no">

Колір окантовки

<FRAME BORDERCOLOR="#$$$$$$">

Содержание без фреймов

<NOFRAMES></NOFRAMES>

(для просмотрщиков не поддерживающих фреймы)

Язык JAVA

Applet <APPLET></APPLET>

Applet - имя файла <APPLET CODE="***">

Параметры <APPLET PARAM NAME="***">

Applet - адрес <APPLET CODEBASE="URL">

36

Applet - имя <APPLET NAME="***"> (для ссылок из других частей страницы)

Альтернативный текст <APPLET ALT="***">

(для программ не поддерживающих Java)

Вирівнювання <APPLET ALIGN="LEFT|RIGHT|CENTER">

Размеры <APPLET WIDTH=? HEIGHT=?> (в точках)

Отступ <APPLET HSPACE=? VSPACE=?> (в точках)

Разное

Комментарий <!-- *** --> (игнорируется просмотрщиком)

Пролог HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Поиск <ISINDEX> (означает начальную точку поиска)

Приглашение <ISINDEX PROMPT="***"> (текст приглашения для поля ввода)

Запустить поиск <A HREF="URL?***"></a>

(используйте действительно знак вопроса)

URL этого файла <BASE HREF="URL"> (должно быть в

заголовке)

Имя базового окна <BASE TARGET="***"> (должно быть в

заголовке)

Отношение <LINK REV="***" REL="***" HREF="URL">

(должно быть в заголовке)

37

Метаинформация <META> (должно быть в

заголовке)

Стили <STYLE></STYLE>

Программа <SCRIPT></SCRIPT>

Редагування дизайну Тепер, коли ми маємо поняття про мову HTML, повернемося

до оформлення дизайну сайту.

Напис цього скрипту «Мій сайт» (шаблон) змінюємо на

офіційну назву сайту, яка буде постійно відображатись у верхній частині. Наш приклад: «Сайт БНРЦ». Після кожної зміни скрипту необхідно обов’язково натиснути кнопку «Сохранить» та зачекати кілька секунд, щоб система зберегла зміни шаблону дизайну. Для перевірки зовнішнього вигляду вашого сайту необхідно натиснути кнопку панелі меню «Общее»:

38

Натиснувши у меню «Общее» кнопку «bnrc.ucoz.ua», у окремій

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

Щоб внести зміни до меню сайту необхідно відкрити знову

попередню вкладку браузера, що містить панель управління сайтом, та натиснути кнопку меню «Дизайн»:

39

Натиснувши кнопку «Конструктор меню» відкриється вікно

конструктора меню:

Натиснувши кнопку з значком «Х» навпроти відповідного

пункта меню ви його ліквідуєте. Натиснувши кнопку з зображенням олівця ви перейдете до вікна редагування відповідного пункту меню:

40

Для прикладу змінемо пункт меню «Головна сторінка» на

«Наші новини» ввівши нову назву у відповідне поле. Натиснувши кнопку «Применить» ви повернетесь у попереднє вікно конструктора меню. Для збереження змін необхідно обов’язково натиснути у цьому вікні кнопку «Сохранить». Меню сайту змінено.

Наша система дозволяє створювати випадаюче меню. Для цього нам потрібно додати сторінку. Вибираємо Додавання — Редактор сторінок.

У відкритому вікні заповняємо усі поля, ввівши назву сторінки

і матеріал, який має бути на ній розміщений (якщо матеріалу іще не має, а сторінку потрібно створити, то в полі вміст сторінки можна ввести будь-який текст, а потім змінити його, вибравши редагування сторінки). В кінці нажимаємо «Сохранить».

41

Тепер заходимо Дизайн — конструктор меню.

Додана нами сторінка буде відображатися в самому низу.

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

42

Натискаємо «Сохраніть». Перейшовши на сайт ми можемо

побачити створене нами випадаюче меню.

Перейдемо до налаштування користувачів сайту. Натиснемо на

посилання «Пользователи», відкривається вікно:

Натискаємо на «Группы пользователей». Відкриється нове

вікно з зображенням переліку всіх груп користувачів.

43

Натиснувши кнопку «Установка прав для всех груп»,

перейдемо до вікна встановлення прав для всіх груп. У ньому зображено перелік діючих модулів:

Відкривши кожен модуль по черзі, ви зможете змінити права груп користувачів у цьому модулі:

44

Поставивши відповідні прапорці навпроти груп у кожному модулі, та натиснувши кнопку «Сохранить», ви збережете ці настройки.

На сайті необхідно встановити інформер статистики сайту у блоці «Статистика сайту» (див. сайт). Для цього перейшовши у панель управління, необхідно відкрити пункт меню «Статистика сайту»:

Відкриється вікно активації модуля «Статистика сайту»:

45

Активувавши модуль на сайті у блоці «Статистика сайту»

з’явиться інформер статистики, натиснувши який, можна переглядати розширену статистику вашого сайту.

Аналогічно можна налаштувати будь-який модуль сайту у панелі управління, при цьому з’являється окреме меню управління модулем. Відкривши відповідні пункти меню можна змінити категорії, дизайн, загальні настройки модуля, при цьому слід не забувати натискати кнопку «Сохранить».

Основні налаштування сайту завершено. Закривши всі вкладки браузера, та ввійшовши через деякий час до електронної скриньки ви побачите e-mail з повідомленням про завершення реєстрації у системі uCoz:

46

Після цього ваш сайт можна знайти у мережі Інтернет, ввівши

адресу у адресну строчку браузера. У пошукових системах ваш сайт поки що не знаходитиметься. Для цього необхідна «розкрутка сайту» у мережі Інтеренет.

Щоб увійти на сайт як адміністратор (з метою внесення змін, додавання матеріалів, тощо) необхідно відкрити сайт та заповнити відповідні поля у блоці «Форма входу»:

Після введення E-mail та пароля (відповідає паролю введеного

під час початкової реєстрації) та натиснувши кнопку «Вхід».

47

На порожніх сторінках сайту з’являться посилання на додавання матеріалів. Наприклад, щоб додати новину на головну сторінку, необхідно натиснути посилання «Додати новину», з’явиться сторінка додавання матеріалів та відповідними полями для заповнення:

Необхідно ввести назву матеріалу, повний текст, теги (ключові

слова для пошукових систем) та натиснути кнопку «Додати»:

Матеріал з’явиться на сайті (переглянути можна після

повторного входу на головну сторінку через меню сайту):

48

Аналогічно додаються матеріали на інших сторінках сайту.

Налаштуваннями прав користувачів можна заборонити будь-кому крім адміністратора додавати матеріали на сайт. У іншому випадку, коли матеріали на сайт додають інші користувачі, адміністратору після перегляду необхідно активувати ці матеріали натиснувши кнопку «V». В інакшому разі, для відвідувачів сайту ці матеріали не будуть видимі, їх може переглядати тільки адміністратор.

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

пошуку інформації в Інтернеті. Саме реєстрація сайту в пошукових системах дає до 80% трафіку на Ваш сайт. Тому після створення і перевірки сайту насамперед зареєструйте його в пошукових системах. Найпопулярніші в Росії - RAMBLER.RU, YANDEX.RU, APORT.RU, GOOGLE.COM, MAIL.RU і ін. Англомовне населення Інтернету використовує Yahoo.com, Google.com і Altavista.com. У перерахованих вище пошукачах, і взагалі у всіх найбільш популярних системах, рекомендую реєструватися уручну, не дивлячись на те, що існує безліч сайтів і програм, що дозволяють автоматично реєструватися в десятках і сотнях пошукових систем. Реєструється уручну в найбільш популярних пошукачах і каталогах, не перешкодить ще і зареєструвати свій сайт за допомогою спеціальних сайтів і служб автоматичній реєстрації, через дані служби розкручувати сайт набагато легко, ніж вручну. Проблема пошукових

49

систем полягає в тому, що в їх базах даних містяться сотні тисяч документів. Тому по будь-якому запиту пошукова машина видасть користувачеві величезну кількість ресурсів (сайтів) по даній темі. Якщо врахувати, що на кожній сторінці розміщується в середньому 10 посилань, шансів, що хто-небудь прогляне, наприклад, тридцяту сторінку і побачить посилання номер 301, практично немає. За статистикою близько 10% користувачів проглядають результати свого запиту далі третьої сторінки. Таким чином, Ваше завдання - добитися того, щоб Ваш ресурс показувався одним з перших. Підвищена значущість документа визначається посиланнями ззовні на сайт, що містить цей документ. Розміщуючи посилання на інший сайт, його как-би рекомендують відвідувачам свого сайту. Проте, посилання теж бувають разниє. Кількість зовнішніх посилань на сайт не годиться для уявлення "цитируемости". Важливість посилань з сайтів на безкоштовних хостінгах і з низьким тіц нікчемна в порівнянні з посиланнями з відомих ресурсів. "Цитируемость" і є такий параметр важливості, який виражає авторитетність сторінки. Всі пошукачі враховують "цитируемость", але бази у них разниє - тому цитований сайт для одного пошукача може не бути цитованим для іншого. Тому, дуже важливе те, щоб посилання на Ваш сайт були з найбільш цитованих ресурсів. Нижче Ви можете зареєструвати свій сайт в найпопулярніших пошукових системах.

Реєстрація в пошукових системах:

Просування сайту за допомогою Дошок оголошень Плюси: вони безкоштовні, їх багато, оголошення зберігається

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

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

50

mail. Можете викачати нижче і прочитати невелику статтю по даній темі.

Як обмінюватися посиланнями. Поради і помилки Не мале значення в процесі просування сайту займає Обмін

посиланнями. Це теж дуже хороший спосіб розкручування. Обмін посиланнями - це коли Ви ставите посилання на інший сайт, а він ставить у відповідь посилання на Ваш. По цих посиланнях до Вас приходять відвідувачі. Кількість сайтів росте в геометричній прогресії, і все складніше стає знаходити своїх відвідувачів. Та і відвідувачам складніше стає шукати Ваш сайт. Не всі мають правильне уявлення, яку мету переслідує за собою процес Обміну посиланнями. Більшість новачків думають, що це дасть моментальний ефект і збільшить відвідуваність сайту. Для цього створюють барвисті, анімовані сайти, що збільшує вагу сторінок і робить їх погано доступними. Здійснивши обмін з двома-трьома сотнями подібних сайтів, отримавши величезну насолоду від виконаної роботи, Ви починаєте чекати ефекту. Проходить день, місяць, два - ефект мінімальний. З сайтів або каталогів, з якими був здійснений обмін посиланнями приходять 1-2 людини в день (очевидно, сам господар сайту або каталога, перевіряючи своє посилання і його декілька друзів). Перевіряючи статистику в Яндексе, Ви починаєте помічати, що всіх, з ким Ви мінялися, немає в списках сторінок, що посилаються (а багато таку інспекцію взагалі не проводять, деколи по незнанню). Ось тут і виникає питання, для чого виконана вся ця робота і коли буде ефект.

Пам’ятайте!

Важливою умовою надійної роботи сайту є його відвідуваність. Якщо сайт не відвідується 40 днів – система uCoz його закриває (важливо це знати під час літніх відпусток педагогів). Також ви повинні тримати паролі для входу на сайт та панель управління, а також відповідь на секретне питання у таємниці від інших (бажано записати їх на зовнішній носій – СD диск, флешку). При вході на сайт сторонньої особи як адміністратора, сайт можна ліквідувати натисканням однієї кнопки.

Успіхів у цій нелегкій, але цікавій справі. Майбутнє школи тільки з веб-сайтом!

51

Терміни

Аккаунт (англ.- account) - обліковий запис, реєстраційний запис. Часто під аккаунтом мають на увазі логін.

Бази даних - БД, SQL - спеціальне програмне забезпечення, призначене для організації зберігання і доступу до даних (інформації). Використовуються при створенні програмних рішень для автоматизації сайту.

Дисковий простір - сумарний розмір всієї інформації, що зберігається на сервері провайдера в мегабайтах (Мб). Зазвичай в нього включаються також розміри файлів журналу звернень (Log Files), поштових скриньок і баз даних.

Домен (англ. domain name) - більш практичний аналог IP-адреса. Доменна адресація виникла в Internet для зручності користувачів: легко запам'ятати доменну адресу (наприклад, www.microsoft.com), чим чотири числа IP-адреса. Домен може містити латинські букви, цифри і деякі інші знаки.

Контент - наповнення сайту, образно і логічно пов'язане з графічними елементами і системою навігації.

Основний каталог - кореневий каталог для публікації файлів на сервері.

Піддомени - домени 3 рівня. Відвідувачі - кількість унікальних відвідувачів що побували на

сторінках Вашого ресурсу. Трафік (traffic) - потік (об'єм) інформації, що проходить через

канал зв'язку, що доводиться на сайт (аккаунт). Може бути витікаючим і таким, що входить.

Хіти - кількість проглядань сторінок зі встановленим лічильником на яких побували відвідувачі ресурсу.

Хостер (hoster) - організація, що надає послуги Хостингу, синонім слова Хостинг-провайдер.

Хостинг-провайдер (hosting provider) - організація, що професійно займається наданням послуг Хостингу. Краще вибирати послуги професійних Хостеров, тобто Компаній, основною діяльністю яких є Хостинг, а не звичайних Інтернет-провайдерів, для яких Хостинг додаткова послуга до основної.

52