Автор работы: Пользователь скрыл имя, 15 Января 2014 в 21:09, курсовая работа
На сучасному рівні розвитку інформаційних технологій використання комп’ютера для збереження будь-яких видів інформації стає єдиним засобом, що надає широкі можливості керування інформацією. Важливу роль у процесі отримання інформації відіграє мережа Інтернет. Сьогодні в Україні послугами Інтернет з різною періодичністю користуються близько 9 млн. жителів України.
Internet сьогодні це найбільш розвинена у світі інформаційна система, за допомогою якої здійснюється комунікація між мільйонами користувачами. За допомогою мережі Internet забезпечується доступ до більш як п'яти мільйонів інформаційних Web-сайтів
ВСТУП
1. ГОЛОВНІ ЗАСАДИ СТВОРЕННЯ САЙТУ
1.1. Основні етапи створення сайту
1.2. Реєстрація та вибір домену для сайту
1.3. Хостинг для сайту
1.4. Оголошення та ідентифікація документа
1.5. Вирівнювання тексту та горизонтальна лінія
1.6. Огляд програм, які можуть бути використані при створенні сайту
2. РОЗРОБКА ВЕБ-САЙТУ “ПРАЦІВНИКИ ОРГАНІЗАЦІЇ”
2.1. Контент - зміст сайту
2.2. Використання програм для розробки веб-сайту
2.3. Етапи розробки сайту
2.4. Графіка на веб-сторінці
2.5.Код створення Web-документу
Робота веб сторінки
ВИСНОВКИ
СПИСОК ВИКОРИСТАНОЇ ЛІТЕРАТУРИ
2.3. Етапи розробки сайту
1 |
Розробка структури сайту | |
Створення карти сайту |
Карта сайту – хребет проекту. Вона відображає список всіх каталогів та документів | |
Створення макета |
Примітивний дизайн для відображення приблизного розташування елементів на сторінці (заголовок статті, список рубрик, номер журналу тощо) | |
2 |
Візуальне оформлення сайту | |
Аналіз цілей сайту |
Дизайн сайту - це не тільки привабливий інтерфейс. Він повинен відповідати всім цілям сайту у відповідності до технічного завдання та бути функціональним. | |
Розробка візуальних концепцій |
Один з найбільш помітних етапів, що включає в себе розробку основної концепції, розробку шаблонів внутрішніх сторінок, розробку спеціальних сторінок | |
3 |
Процес програмування та контроль якості | |
Верстка сайту |
Сайт верстається на базі системи керування контентом, що дозволить користувачу, який володіє базою знань в області комп'ютерних технологій лише зі школи, легко керувати всім умістом сайту, не залучаючи до цього дорогих фахівців. Верстка здійснюється відповідно до стилю оформлення | |
Заповнення сторінок |
Сайт заповнюється сторінками. Перед заповненням вони обробляються редактором і оптимізуються під пошукові запити. Користувачу також доступна автоматизована система, що полегшує процес додавання нових статей журналу до бази даних | |
Перевірка якості |
Контроль якості містить у собі, принаймні , два повних перегляди: перший - для складання докладного списку виявлених дефектів, другий - для ретельної перевірки їхнього усунення. Перевірити відповідність функціональності заданим вимогам і сумісність із різними оглядачами, платформами й операційними системами | |
4 |
Запуск і супровід сайту | |
Створення пакета передачі |
Пакет передачі - це добірка всіх матеріалів і документації проекту. Він включає всі вихідні файли, зображення, шаблони й специфікації, необхідні команді або особі, які будуть супроводжувати сайт після початку запуску. Передача пакета знаменує передачу сайту. Із цього моменту супровід сайту покладається на адміністратора сайту. | |
Завантаження |
Після остаточного затвердження й усунення всіх недоліків, сайт переноситься з локального сервера на сервер хостинга | |
2.4. Графіка на веб-сторінці
На сьогоднішній день в Інтернеті залишилися не так багато сторінок без графічних елементів, оскільки за допомогою графіки можна не тільки проілюструвати пропонований матеріал, але і небагато “пожвавити” загальне оформлення, про що мова піде в цьому розділі.
Фонове зображення
Отже, давайте розберемося, яким же чином можна використовувати графічні елементи на веб-сторінці. Розглянемо такий приклад. Допустимо, ми хочемо, щоб читачі дізналися достоїнства нашого коханого електронного піаніно - клавінови. Ми вже написали відповідний текст, але хочемо його оформити не дуже строго. І тут найпростішим рішенням буде розмістити цей текст не на одноколірному, а на тематичному фоні.
Допустимо, що у нас заготовлено відповідний фоно вий малюнок - він записаний у файлі під ім'ям back1 .jpg (мал. 2.2). Якщо при окремому перегляді цього малюнка він вам подобається, це ще нічого не означає. Щоб визначити, чи підходить малюнок як фон до тексту, його потрібно перевірити “в справі”.
Щоб помістити малюнок на веб-сторінку як фон, потрібно встановити в теге <BODY> атрибут BACKGROUND= із значенням, що містить ім'я файлу малюнка.
<body style="background-color:wheat;
Якщо малюнок менше вікна броузера, то він повторюватиметься по горизонталі і по вертикалі. Це відбувається автоматично, і до недавнього часу це не можна було відмінити. Тепер же, якщо ви не хочете повторення
Мал. 2.2. Фоновий малюнок
Можна вказати або відносне місцеположення файлу малюнка (тобто шлях доступу до нього відносне розташування початкового HTML-файлу), або його повну URL-адресу. Тут і далі ми припускаємо, що ви розмістили в тій же теці, що і HTML-файл, теку, у яку складаєте всі графічні файли.
І, нарешті, можна проілюструвати веб-сторінку, вставивши перед описом необхідну фотографію (наприклад, фото працівника організації). Припустимо, що фотографія у нас вже готова і лежить в папці під ім'ям kadr_1.gif. Вставити її в текст можна з помо щью тега <IMG>, наприклад, от так:
<IMG SRC="Images/kadr_1.gif">
В принципі, це вже достатньо - на місці цього запису броузер відобразить нашу картинку. Проте краще вказати в теге <IMG> ще декілька атрибутів.
По-перше, треба пам'ятати, що картинки завантажуються з мережі завжди набагато повільніше, ніж звичайний текст. Це я говорю не до того, що сам файл картинки повинен бути не дуже великого об'єму (це вірно, але це питання ми обговоримо окремо), а до того, що при такому записі, як вище, багато броузери, почавши завантажувати картинку, припинять завантаження подальшого тексту до тих пір, поки картинка не буде завантажена повністю. Але для читача було б зручніше, якби текст продовжував завантажуватися gараллельно з картинкою: поки вона довантажується, можна було б щось вже читати. Щоб броузер міг це зробити, йому потрібно явно вказати розміри майбутньої картинки за допомогою атрибутів WIDTH= і HEIGHT=:
<IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200">
Взагалі кажучи, за допомогою цих атрибутів можна задати які завгодно розміри картинки, “розтягнувши” або стиснувши її як завгодно. Проте зазвичай цього не роблять, і ось чому. Представляти картинку меншою, ніж вона є, недоцільно, оскільки навіщо тоді вантажити великий файл? Адже файли для картинок великого розміру мають великий розмір і вантажаться з Інтернету, відповідно, набагато довше. Краще вже зробити маленький файл для картинки маленького розміру і швидко завантажити його. А якщо представити картинку більшою, ніж вона є, то, як правило, вона виглядатиме не вельми цікавою за рахунок появи “ступінчастості” як у формах, так і в кольорі.
Далі, хорошим тоном є наявність так званого альтернативного тексту для тих випадків, коли в броузері відключено проглядання графіки. Тоді на місці нашої картинки буде виведений прямокутник, який відповідає розміру, який супроводжується поясненням, що за картинка на цьому місці повинна бути. Альтернативний текст вводиться як значення атрибуту ALT:
<IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200" АLТ="Працівник Петров В.І.">
Нарешті, навколо малюнка можна відобразити рамку. Товщина цієї рамки задається як значення атрибуту BORDER=. Якщо ми, як в даному випадку, не хочемо відображати рамку навколо малюнка, то можемо нічого і не указувати, оскільки більшість броузеров за умовчанням рамку не малюють. Але деякі броузери все ж таки це роблять, і “для вірності” непогано б вказати і відсутність рамки теж:
<IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова" BORDER="0">
Чого ще не вистачає нашому HTML-файлу? Звичайно ж, гіперпосилань! Без них будь-який документ в Інтернеті сприймається набагато нудніше, оскільки відвідувач відразу бачить, що зайшов в безвихідь. Тому обов'язково додайте гіперпосилання скрізь, де це тільки можна. В даному випадку, наприклад, слово “Організація” просто проситься стати гіперпосиланням на сторінку, де розміщено опис відповідної організації. Зробимо це:
<A HREF="http://www.organizaciya.
До речі, картинки теж можуть містити гіперпосилання.
Ще слід відмітити, що ми не дарма визначили в нашому прикладі колір фону (за допомогою атрибуту BGCOLOR=). Адже якщо у користувача в броузері відключено завантаження графіки, то білий текст у нього відображатиметься на заданому за умовчанням білому фоні, і в результаті нічого не буде видно.
До речі, тег <IMG> може мати власний атрибут ALIGN=, який управляє розташуванням малюнка щодо тексту. У нашому прикладі це було не актуально, оскільки малюнок знаходився в окремому блоці <DIV> . Але якщо малюнок “вбудований” в текст, тобто декілька варіантів його розташування:
ALIGN="left" - текст обтікає малюнок, який розташовується зліва;
ALIGN="right" - текст обтікає малюнок, який розташовується справа;
ALIGN="top" - малюнок розташовується
усередині текстового рядка, і
його верхня межа співпадає
з верхньою межею букв тексту
(можна також застосовувати
ALIGN="middle" - малюнок розташовується
усередині текстового рядка,
ALIGN="bottom" - малюнок розташовується
усередині текстового рядка, і
його нижня межа співпадає
з нижньою межею букв тексту
(можна також застосовувати
Крім того, щоб малюнок не дуже “притискався” до тексту, можна залишити між ними трохи “повітря”. Для цього в теге <IMG> використовують атрибути HSPACE= і VSРАСЕ=, значення яких задають відповідно горизонтальне і вертикальне “поля” малюнка.
І ще невелике зауваження: броузер Internet Explorer (версія 4 і вище) дозволяє за допомогою тега <IMG> завантажувати і проглядати також відеофрагменти у форматі AVI (Video for Windows). Для цього можна встановити атрибут DYNSRC=, як значення якого вказати ім'я AVT-файлу. При цьому можна додатково вказати в атрибуті START=, коли слід починати програвання відео: "FILEOPEN" - відразу після завантаження файлу або "MOUSEOVER" - після наведення покажчика миші на зображення. Атрибут LOOP= дозволяє встановити кількість програвань: "О" означає нескінченне повторення, алюбоє інше число указує точна кількість повторів.
Як приклад створення Web-документу наведемо наступний алгоритм.
Перша сторінка—html має наступну структуру:
<html>
<head>
<title>Курсовий проект</title>
</head>
<body style="background-color:wheat;
<h2 align="center" style="color:blue">Microsoft XNA</h2>
<img src="images/2121.jpg" align="left" width="335" height="500" />
<img src="images/222.png" align="right" width="640" height="360" />
<p align="center" style="font-size:18px"> Microsoft XNA - набір інструментів з керованим середовищем часу виконання (.NET), створений Microsoft для полегшення розробки комп'ютерних ігор. Мета XNA в спробі звільнити розробку ігор від написання «повторюваного шаблонного коду» і об'єднати різні аспекти розробки ігор в одній системі. Набір інструментів XNA був анонсований 24 березня 2004 на Game Developers Conference в Сан-Хосе, Каліфорнія. Перший Community Technology Preview XNA Build був випущений 14 березня 2006. </p>
<p align="center" style="font-size:18px"> Пакет Microsoft XNA, за словами представників Microsoft, дозволить розробникам ігор уникнути багатьох технічних труднощів, що виникають при написанні коду, а також забезпечить істотне зниження вартості кінцевої продукції. Крім того, завдяки XNA програмісти зможуть створювати принципово нові ігри з високоякісною графікою. </p>
<p align="center" style="font-size:18px">XNA Framework грунтується на реалізації . NET Framework 2.0 на Windows включає великий набір бібліотек класів, специфічних для розробки ігор, що підтримує максимальне повторне використання коду на всіх цільових платформах. Фреймворк виконується на модифікації Common Language Runtime, що оптимізована для ігор. CLR доступне для Windows XP, Windows Vista, і Xbox 360. Так як ігри XNA пишуться для CLR, вони можуть бути запущені на будь-якій платформі, яка підтримує XNA Framework з мінімальними змінами або взагалі без них. Ігри, які запускаються на фреймворку, технічно можуть бути написані будь-якою .NET-сумісною мовою, але офіційно підтримується тільки мова програмування C# та середовище швидкої розробки XNA Game Studio Express і всі версії Visual Studio 2010</p>
<strong></strong></P>
<h1><bralign="center">
</body>
</html>
При виборі кожної категорії афоризмів, ми отримаємо перехід на нову сторінку з афоризмами певної характеристики.
Робота веб сторінки
Посилання на гіперпосилання на іншу веб сторінку
ВИСНОВКИ
Отже, зі сказаного вище, можна зробити наступні висновки:
Розробка веб-сайту йде поетапно. Головні етапи:
Розробка структури сайту:
Розробка концепції дизайну:
Html-верстка, дизайн і створення внутрішніх сторінок: