HYPERLINK «http://www.ukrreferat.com/» www.ukrreferat.com – лідер
серед рефератних сайтів України!

КУРСОВА РОБОТА

на тему:

“Розробка веб-сайту”

(сайт “Працівники організації”)

ПЛАН

ВСТУП

1. ГОЛОВНІ ЗАСАДИ СТВОРЕННЯ САЙТУ

1.1. Основні етапи створення сайту

1.2. Реєстрація та вибір домену для сайту

1.3. Хостинг для сайту

1.4. Огляд програм, які можуть бути використані при створенні сайту

2. РОЗРОБКА ВЕБ-САЙТУ “ПРАЦІВНИКИ ОРГАНІЗАЦІЇ”

2.1. Контент — зміст сайту

2.2. Використання програм для розробки веб-сайту

2.3. Графіка на веб-сторінці

ВИСНОВКИ

СПИСОК ВИКОРИСТАНОЇ ЛІТЕРАТУРИ

ДОДАТОК

ВСТУП

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

Internet сьогодні це найбільш розвинена у світі інформаційна система, за
допомогою якої здійснюється комунікація між мільйонами користувачами. За
допомогою мережі Internet забезпечується доступ до більш як п’яти
мільйонів інформаційних Web-сайтів. Якщо прийняти до уваги кількісні
показники українського сегменту Internet, то вони налічують 200-300
тисяч користувачів, загальна кількість Web-серверів на сьогодні досягла
позначки 4,5 тисяч.

З самого початку розвитку Internet, а особливо з появою Web-технологій,
мережа орієнтована на інформаційне забезпечення своїх користувачів.

Метою даної наукової роботи є дослідження розвитку сучасних
Web-технологій та їх ефективного застосування на прикладі створення
Web-сайту “Працівники організації”

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

Саме тому темою наукової роботи було обрано використання Web-технологій
для створення сайту організації, зокрема її кадрового складу.

1. ГОЛОВНІ ЗАСАДИ СТВОРЕННЯ САЙТУ

1.1. Основні етапи створення сайту

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

Розробка структури сайту:

визначення початкових даних для сайту;

визначення вимог до зовнішнього вигляду і функціональності;

формування структури сайту — розділів меню;

Розробка концепції дизайну:

створення дізайн-макета головної сторінки сайту;

затвердження концепції дизайну — макету головної сторінки;

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

Html-верстка, дизайн і створення внутрішніх сторінок:

розробка наповнення внутрішніх сторінок;

розробка додаткових сторінок (карта сайту, результати пошуку і т.п.);

оптимізація зображень;

Програмування:

визначення завдань програмування;

розробка структури баз даних;

написання скриптів адміністрування.

1.2. Реєстрація та вибір домену для сайту

Є два основні кроки до отримання домена, реєстрація нового домена або
покупка вже існуючого.

Доменне ім’я складаєть з адреси вашого сайту і може закінчуватися на
.ua, .com.ua, .ru, .com, .net, .org, .info, .biz, .tv та інші.

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

Спершу, давайте зосереджуватися на відборі кращого доменного імені для
вашого сайту…

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

Але, як завжди, є виключення…

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

Підказки для вибори кращого доменного імені:

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

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

2) Дефіси доречно використовувати, якщо ваше ім’я складається більш ніж
з 3 слів.

3) Захистіть своє ім’я, зареєструвавши його в різних зонах (.net, .org,
і т.п.), Це утримує людей від копіювання вашого імені.

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

Немає ніякого значення, через кого Ви реєструєте домен — через крупну
компанію за 20$ або через маленьку за 10$. Є тільки істотна економія на
реєстрації і обслуговуванні домена.

Якщо Ви переживаєте про те, чи на Ваше ім’я буде зареєстрований домен —
не бійтеся звернутися в службу підтримки реєстратора доменів.

1.3. Хостинг для сайту

Після того, як вибрали і зареєстрували доменне ім’я, потрібно вибрати
хостінг-провайдера.

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

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

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

Залежно від виду сайту, який Ви розміщуватимете, залежить вибір
тарифного плану. Головний параметр тарифних планів — розмір дискового
простору, що надається Вам для розміщення сайту. Ми радимо користуватися
простою формулою: помножити розмір сайту на 2 і підібрати відповідний
тарифний план по цій цифрі.

1.4. Огляд програм, які можуть бути використані

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

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

# 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 кнопок.

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

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

Інші необхідні програми, фони для створення сайту.

Для доступу до сервера Провайдера Вам знадобиться програма FTP-клієнт.
FTP (File Transfer Protocol) — означає протокол передачі файлів.
Призначений для того, щоб переносити і додавати на сервер Провайдера
різні файли (сторінки Вашого сайту, матеріали, програми для скачування,
архіви і т.д.), розміщувати їх. Через протокол FTP передаються будь-які
файли.

# «Total Commander v.6.03a» — найзручніший файловий менеджер (підтримує
FTP-протокол)

# SmartFTP Client — один з найбезпеніших ФТП — клієнтів.

# Якщо у Вас виникнуть проблеми при розпаковуванні файлів, викачайте
архіватор — WINRAR.

2. РОЗРОБКА ВЕБ-САЙТУ “ПРАЦІВНИКИ ОРГАНІЗАЦІЇ”

2.1. Контент — зміст сайту

Контент сайту – це та інформація, яку Ви бачите на сторінці сайту.

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

До контенту сайту потрібно підходити серйозно.

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

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

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

Для ефективного просування сайту, існують певні вимоги до контенту
сайту:

1. У контенті сайту повинні бути ключові слова, які на сторінках сайту
виделені.

2. На сайті і в самому контенті сайту, повинні існувати перехресні
посилання між сторінками сайту.

2.2. Використання програм для розробки веб-сайту

Як вже було сказано вище, веб-сторінки кодуються на мові гіпертекстової
розмітки — HTML. Взагалі кажучи, щоб написати HTML-файл, досить мати
будь-який текстовий редактор, лише б він умів не додавати в текст свої
спеціальні символи. Найпростіший варіант — це редактор Notepad
(Блокнот), що входить в стандартне постачання Windows (мал. 2.1). Власне
кажучи, це саме те, що потрібне, — проста програма, що зберігає
написаний текст саме в тому вигляді, в якому він був введений, і нічого
зайвого. (Тим, хто не працює під Windows, як заміна Блокноту підійде
майже “все що завгодно”: Edit — для MS-DOS, vi або jed — для Linux,
Kedit — для Linux/KDE і т. д.)

Мал. 2.1. Код HTML в текстовому редакторові Блокнот

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

Веб-сервер-редактор TextPad

Отже, почнемо. Тим, хто вважає за краще набирати код HTML уручну, але
кому не вистачає функціональності Блокнота і подібних до нього програм,
можна порадити програму під назвою TextPad, яку можна завантажити,
звернувшись за адресою www.textpad.com. Ця програма по суті вельми схожа
на Блокнот, проте розробники спеціально передбачили деякі зручності для
того, щоб писати код HTML (а також мов Java, З, C++, Perl і ще деяких).
Це виражається в тому, що при написанні HTML -документа все теги
автоматично підсвічують синім кольором, їх атрибути — темно-синім, а
значення атрибутів — зеленим (кольори можна набудувати за власним
бажанням, так само, як і шрифт). Це дуже зручно. Наприклад, якщо автор
випадково помилиться в імені тега або атрибуту, то воно залишиться
чорним, і він відразу зрозуміє, що тут щось не те. Правда, перевірка не
є “ інтелектуальною”: програма може спокійно “дозволити” приписати тегу
яка-небудь властивість, якої у нього в принципі бути не може (спокійно
підсвічує абракадабру типу
або
).

На відміну від Блокнота, TextPad — редактор багатовіконний. У нім можна
відкрити відразу декілька документів і працювати, легко перемикаючись
між ними за допомогою списку в лівій частині вікна або вкладок в нижній
частині.

Веб-сервер-редактор TextPad дозволяє автоматизувати набір багатьох
тегов. Якщо не хочеться набирати їх уручну (багато цього не люблять
просто через те, що доводиться перемикатися на латинський шрифт), то
звернете увагу на ліву нижню частину вікна програми. Там приведений
список найбільш поширених HTML-тегов, які можна вставляти в свій
основний текст подвійним клацанням миші. Правда, в списку вказані не
самі теги, а їх опис. Наприклад, щоб вставити тег
, потрібно вибрати
із списку пункт Block > Break Line. Проте до цього швидко звикаєш. Майже
всі пункти списку вставляють теги разом з тим, що закриває парним тегом.
Наприклад, якщо вибрати пункт Block > Preformatted, в текст автоматично
будуть додані теги і

 і 
. Деякі пункти додають відразу цілі
блоки-заготовки. Якщо, наприклад, вибрати пункт Table (Таблиця), в текст
буде вставлений такий код:

?
? ?

Значення цих тегов і їх атрибутів ми розглянемо пізніше, а поки звернемо
увагу на те, що окрім списку тегов TextPad надає нам також можливість
вибирати із списку спеціальні символи (список HTML Characters), а також,
якщо буде потрібно, будь-який символ, що управляє, наприклад символи
псевдографіки DOS та інші. Ті, хто часто вводять які-небудь
послідовності символів, що при написанні веб-сторінок не рідкість,
можуть полегшити своє завдання, записавши в TextPad відповідні макроси.
Для запису макросу треба натиснути комбінацію клавіш CTRL+SHIFT+R (або
вибрати з меню Macros пункт Record). При цьому почнеться запис макросу,
тобто все подальші дії запам’ятають. Щоб закінчити запис, треба знову
натиснути комбінацію клавіш CTRL+SHIFT+R, після чого привласнити ім’я
файлу макросу, а також дати назву для уявлення макросу в меню. Тут можна
також дати, якщо потрібно, короткий опис макросу і вказати ім’я його
автора. Після натиснення на кнопку ОК назва макросу з’явиться в меню
Macros. Вибравши його, можна ввести відразу всю задану послідовність
символів.

Для зручності відладки можна встановити прапорець в пункті Line Numbers
(Нумерація рядків) в меню View (Вигляд), — в цьому випадку всі рядки
тексту будуть пронумеровані. Хочеться відзначити, що якщо в меню
Configure (Настройка) включений пункт Word Wrap (Перенос по словах) для
автоматичного перенесення кінців довгих рядків у видиму частину екрану,
то кожна такий довгий рядок все одно нумеруватиметься одним номером, а
не двома або трьома (до речі, така нумерація чомусь недоступна в чудовій
програмі Homesite, про яку мова піде нижчим). А якщо в меню View
(Вигляд) включити прапорець Visible Spaces (Відображати пропуски), то
можна побачити на екрані і “невидимі символи”, такі, як пропуски,
символи табуляції та інші.

У програмі TextPad можна легко порівняти два файли, вибравши з меню
Tools (Сервіс) пункт Compare Files (Порівняти файли). А якщо є два (або
більш) схожі файли, в деяких місцях яких треба внести зміни, зручно
використовувати функцію Synchronize Scrolling (Одночасна прокрутка) з
меню Configure (Настройка). В цьому випадку можна відкрити відразу
декілька файлів, наприклад, вибравши з меню Windows (Вікна) пункт Tile
Vertically (Розташувати по вертикалі), і тоді при прокрутці одного з них
інші прокручуються синхронно. Серед інших корисних функцій програми
TextPad варто відзначити можливість автоматичної зміни клавіатурного
регістра командою Edit >

Change Case (Правка > Змінити регістр), автоматичного копіювання в буфер
слова або рядка, на якому знаходиться курсор, за допомогою команд Edit ”
Cut Other (Правка > Вирізувати) і Edit > Сміттю Other (Правка >
Копіювати), а також функцію перевірки орфографії Tools > Spelling
(Сервіс > Правопис). І, звичайно, тут присутня можливість проглядання
створеного файлу в броузере View > In Web Browser (Вигляд > У броузере).

Веб-сервер-редактор Arachnophilia

Завершивши короткий огляд можливостей програми TextPad, давайте
розглянемо іншу програму для написання .HTML-кода — Arachnophilia, яку
можна отримати за адресою www.arachnoid.com/arachnophilia.

Як і у попередньому випадку, програма автоматично підсвічує синім
кольором теги і атрибути, а значення атрибутів — зеленим, що покращує
зорове сприйняття, хоча перевірка правильності тегів і відсутній. Зате
якщо випадково забути закрити тег, то все подальший вміст файлу
підсвітить бордовим кольором, так що помилка відразу кинеться в очі. У
програмі Arachnophilia передбачена автоматизація введення тегов HTML. У
нижній частині вікна є кнопки, кожна з яких відкриває відповідну
кнопкову панель. На цих панелях розташовані кнопки для швидкого введення
тегов. Наприклад, якщо натиснути кнопку Styles (Стилі), то відкриється
панель управління, що містить кнопки для введення тегов форматування
тексту . Натиснення на будь-яку з них вводить тег або блок-заготівку.
Наприклад, після натиснення на кнопку BR в тексті з’явиться тег
, а
після натиснення на кнопку HR — з’явиться відразу ціла заготівка:


.

Натиснення деяких кнопок викликає появу діалогових вікон. Наприклад,
натиснувши на кнопку Color (Колір), можна відкрити стандартне діалогове
вікно вибору кольору, а за допомогою кнопки TableWiz (Майстер таблиць)
відкривають діалогове вікно Table Wizard (Майстер таблиць), засобами
якого можна заздалегідь задати кількість рядків і стовпців в таблиці, а
також визначити її ширину, колір ліній і деякі інші параметри .

z

°

8рах, для чого в меню Preview (Попередній перегляд) передбачений пункт
Identify Browser (Вказати Лроузер). Тут можна призначити до шести різних
броузеров, в кожному з яких легко відкрити створюваний HTML-файл для
перегляду, навіть не зберігаючи його на диску.

Проте найчудовішою властивістю програми, мабуть, є функція Instant View
(Негайний перегляд), яка доступна в меню Preview (Попередній перегляд).
Якщо вона включена і внутрішній броузер, який також є в програмі,
відкритий, то всі зміни, що вносяться до тексту HTML, негайно
відображаються на екрані! Правда, в деяких випадках, програма не встигає
за введенням даних і зображення у вікні броузера може зникати. Але не
хвилюйтеся, а введіть наступний символ, і зображення знову з’явиться.

У програмі Arachnophilia існує безліч додаткових корисних функцій.
Наприклад, в меню Selection (Фрагмент) є команда Find/Replace/Count
(Поиск/Замена/Пересчет), яка дозволяє швидко знайти або замінити
потрібні слова у виділеній області, що часто дуже виручає при створенні
веб-сторінок. Команда Tag Delimiters (Обмежувачі тегов) з того ж меню
дозволяє перетворити кутові дужки, що є загальноприйнятими обмежувачами
тегов HTML, в спеціальні символи &lt і &gt, що необхідне, коли треба
показати код HTML на самій веб-сторінці. Можна також здійснити зворотне
перетворення. У цьому ж меню є команда Strip all HTML tags (Приховати
теги HTML), за допомогою якої можна швидко звільнити текст від
HTML-тегов, наприклад, для перенесення його в іншу програму. Програма
Arachnophilia, до речі кажучи, здатна читати і записувати файли формату
RTF(Rich TextFormat). При відкритті RTF-файлу пропонується конвертувати
його у формат HTML, але його можна редагувати і в звичайному вигляді.

Цікаво, що програму Arachnophilia 4.0 можна завантажити як в повному
вигляді (це настановний файл розміром півтора мегабайти), так і в
скороченому (1 Мбайт), якщо в системі встановлені необхідні бібліотеки.
Можна також завантажити тільки виконуваний файл, а решта дозавантажувати
по мірі необхідності.

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

Веб-редактори типу WYSIWYG

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

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

Взагалі кажучи, для редагування HTML-тексту в режимі WYSIWYG можна
використовувати навіть такий текстовий процесор, як Microsoft Word.
Починаючи з версії MS Word 97 він дозволяє набрати деякий текст,
відформатувати його і зберегти у форматі HTML. Якщо будете це робити, не
забудьте видалити коментарі…

Редактор Star Office

Могутніші засоби редагування HTML-файлів має в своєму розпорядженні
програма StarOffice. Тут при відкритті або створенні HTML- файлу
відповідно міняється вміст деяких меню, що дозволяє достатньо ефективно
працювати з HTML кодом. Найприємнішим моментом тут, мабуть, є можливість
встановити прапорець HTML Source (Початковий код HTML) в меню View
(Вигляд), який відключає режим WYSIWYG і дозволяє працювати з початковим
HTML-текстом, в якому всі теги і їх атрибути підсвічуються червоним
кольором. На свій розсуд можна редагувати як початковий текст, так і
результат, що відображається, перемикаючись між режимами командою HTML
Source (Початковий код HTML) з меню View (Вигляд). На відміну від інших
WYSIWYG-редакторів, StarOffice досить коректно видаляє непотрібні
елементи при відміні користувачем яких-небудь дій і не вставляє зайвих
коментарів. При цьому він досить активно використовує каскадні таблиці
стилів (CSS).

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