.

Розробка веб-сайту (курсова робота)

Язык: украинский
Формат: курсова
Тип документа: Word Doc
1691 38763
Скачать документ

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).

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

Netscape Composer

Ще одна WYSIWYG-орієнтована програма для редагування .HTML-файлів
вбудована в броузер Netscape. Вона називається Netscape Composer значно
менше, ніж в попередній, проте, оскільки це модуль популярного броузера,
її теж використовують активно. Засоби верхньої інструментальної панелі
дозволяють вставити у файл зображення (Image), горизонтальну лінію
(H.Line), таблицю, гіперпосилання (Link) або якір (Anchor). Нижче
розташована невелика панель для управління зображенням шрифту
(напівжирне, курсивне, підкреслене), а також його розміром, відступом і
виключенням. Тут же можна вибрати колір фону. За допомогою випадних меню
доступні ще декілька HTML-елементів.

Не дивлячись на доступність і популярність програми, ми навряд чи можемо
порадити використовувати WYSIWYG-редактори типу Netscape Composer для
створення веб-сторінок, за винятком яких-небудь дуже простих випадків.
Якщо вам неодмінно хочеться візуально відстежувати всі зміни, що
вносяться, то встановіть програму Arachnophilia і скористайтеся функцією
Instant View.

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

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

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

Фонове зображення

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

Допустимо, що у нас заготовлено відповідний фоно вий малюнок – він
записаний у файлі під ім’ям back1 .jpg (мал. 2.2). Якщо при окремому
перегляді цього малюнка він вам подобається, це ще нічого не означає.
Щоб визначити, чи підходить малюнок як фон до тексту, його потрібно
перевірити “в справі”.

Щоб помістити малюнок на веб-сторінку як фон, потрібно встановити в теге

атрибут BACKGROUND= із значенням, що містить ім’я файлу малюнка.

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

Мал. 2.2. Фоновий малюнок

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

І, нарешті, можна проілюструвати веб-сторінку, вставивши перед описом
необхідну фотографію (наприклад, фото працівника організації).
Припустимо, що фотографія у нас вже готова і лежить в папці під ім’ям
kadr_1.gif. Вставити її в текст можна з помо щью тега , наприклад,
от так:

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

По-перше, треба пам’ятати, що картинки завантажуються з мережі завжди
набагато повільніше, ніж звичайний текст. Це я говорю не до того, що сам
файл картинки повинен бути не дуже великого об’єму (це вірно, але це
питання ми обговоримо окремо), а до того, що при такому записі, як вище,
багато броузери, почавши завантажувати картинку, припинять завантаження
подальшого тексту до тих пір, поки картинка не буде завантажена
повністю. Але для читача було б зручніше, якби текст продовжував
завантажуватися gараллельно з картинкою: поки вона довантажується, можна
було б щось вже читати. Щоб броузер міг це зробити, йому потрібно явно
вказати розміри майбутньої картинки за допомогою атрибутів WIDTH= і
HEIGHT=:

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

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

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

Чого ще не вистачає нашому HTML-файлу? Звичайно ж, гіперпосилань! Без
них будь-який документ в Інтернеті сприймається набагато нудніше,
оскільки відвідувач відразу бачить, що зайшов в безвихідь. Тому
обов’язково додайте гіперпосилання скрізь, де це тільки можна. В даному
випадку, наприклад, слово “Організація” просто проситься стати
гіперпосиланням на сторінку, де розміщено опис відповідної організації.
Зробимо це:

Oрганізація

До речі, картинки теж можуть містити гіперпосилання.

Ще слід відмітити, що ми не дарма визначили в нашому прикладі колір фону
(за допомогою атрибуту BGCOLOR=). Адже якщо у користувача в броузері
відключено завантаження графіки, то білий текст у нього
відображатиметься на заданому за умовчанням білому фоні, і в результаті
нічого не буде видно.

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

. Але якщо
малюнок “вбудований” в текст, тобто декілька варіантів його
розташування:

ALIGN=”left” – текст обтікає малюнок, який розташовується зліва;

ALIGN=”right” – текст обтікає малюнок, який розташовується справа;

ALIGN=”top” – малюнок розташовується усередині текстового рядка, і його
верхня межа співпадає з верхньою межею букв тексту (можна також
застосовувати значення “texttop”);

ALIGN=”middle” – малюнок розташовується усередині текстового рядка, який
вертикально вирівнюється по центру малюнка (можна також при міняти
значення “absmiddle”);

ALIGN=”bottom” – малюнок розташовується усередині текстового рядка, і
його нижня межа співпадає з нижньою межею букв тексту (можна також
застосовувати значення “absbottom” або “baseline”).

Крім того, щоб малюнок не дуже “притискався” до тексту, можна залишити
між ними трохи “повітря”. Для цього в теге використовують атрибути
HSPACE= і VSРАСЕ=, значення яких задають відповідно горизонтальне і
вертикальне “поля” малюнка.

І ще невелике зауваження: броузер Internet Explorer (версія 4 і вище)
дозволяє за допомогою тега завантажувати і проглядати також
відеофрагменти у форматі AVI (Video for Windows). Для цього можна
встановити атрибут DYNSRC=, як значення якого вказати ім’я AVT-файлу.
При цьому можна додатково вказати в атрибуті START=, коли слід починати
програвання відео: “FILEOPEN” – відразу після завантаження файлу або
“MOUSEOVER” – після наведення покажчика миші на зображення. Атрибут
LOOP= дозволяє встановити кількість програвань: “О” означає нескінченне
повторення, алюбоє інше число указує точна кількість повторів.

ВИСНОВКИ

Отже, зі сказаного вище, можна зробити наступні висновки:

Розробка веб-сайту йде поетапно. Головні етапи:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

# 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 – програма видаляє з коду сторінок непотрібні
пропуски і упорядковує вміст.

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

Ботт Эд. Разработка веб-сайтов. – М., 2004.

Гукин Д. – FrontPage для “чайников”. – К.,1996.

Комисаров Д.А., Станкевич А.Г. Персональный учитель по персональному
компьютеру. – М, 2000

Лоу, Дуг. Internet Explorer для Windows для “чайников”: Пер. с англ. –
М.: СПб.; К.: Издательский дом “Вильямс”,2000.

Мансфильд Рон. Делаем качественный сайт. – К., 1997

Муртазин Э.В. Интернет.Учебник. /Муртазин Э.В. – М.: ДМК, 1999.

Пасько В. FrontPage и сайтостроительство. – К., 2000.

Кузнєцов М., Симдянов І. Голишев С. PHP 5. Практика створення
Web-сайтів. – К., 2007.

Лещев Д. Створення інтерактивного Web-сайту. Навчальний курс. – С.-Пб.,
2003.

ДОДАТОК

Таблиця 1

Етапи розробки сайту

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

Створення карти сайту Карта сайту – хребет проекту. Вона відображає
список всіх каталогів та документів

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

2 Візуальне оформлення сайту

Аналіз цілей сайту Дизайн сайту – це не тільки привабливий інтерфейс.
Він повинен відповідати всім цілям сайту у відповідності до технічного
завдання та бути функціональним.

Розробка візуальних концепцій Один з найбільш помітних етапів, що
включає в себе розробку основної концепції, розробку шаблонів внутрішніх
сторінок, розробку спеціальних сторінок

3 Процес програмування та контроль якості

Верстка сайту

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

Заповнення сторінок

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

Перевірка якості

Контроль якості містить у собі, принаймні , два повних перегляди:
перший – для складання докладного списку виявлених дефектів, другий –
для ретельної перевірки їхнього усунення. Перевірити відповідність
функціональності заданим вимогам і сумісність із різними оглядачами,
платформами й операційними системами

4 Запуск і супровід сайту

Створення пакета передачі

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

Завантаження Після остаточного затвердження й усунення всіх недоліків,
сайт переноситься з локального сервера на сервер хостинга

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

PAGE

Нашли опечатку? Выделите и нажмите CTRL+Enter

Похожие документы
Обсуждение

Ответить

Курсовые, Дипломы, Рефераты на заказ в кратчайшие сроки
Заказать реферат!
UkrReferat.com. Всі права захищені. 2000-2020