Автор работы: Пользователь скрыл имя, 04 Марта 2013 в 23:10, курсовая работа
Актуальність теми. Internet — це найшвидший засіб мовлення в історії людства, де кількість користувачів, за оцінками експертів, подвоюється кожні півроку. Користувачі мережі являють собою область підвищеного інтересу для більшості рекламодавців. Ні друкована продукція, ні тим більше радіо чи телебачення не можуть подавати інформацію в такому зручному, презентабельному та примушуючому вигляді, як це робить WEB-сайт.
WEB-сайту для державної установи або комерційної організації продиктоване сучасною необхідністю. Метою роботи є створення WEB-сайту для державної установи - Луганського обласного краєзнавчого музею здатного представляти текстову і графічну інформацію користувачеві та здійснювати доступ до інформації, яка цікавить.
ВСТУП……………………………………………………………………………..6
1. Опис предметної області……………………………………………..…..……9
1.1. Передбачуваний варіант функціонування Web-сайту . ………..….9
1.2. Дослідження предметної області ……………………………...……14
1.3. Постановка завдання ………………………………………...………15
2. Вибір програмного забезпечення ……………………………….…….……..19
2.1. Мова розмітки гіпертекстових сторінок HTML ………...…………19
2.2. Каскадні таблиці стилів CSS ... …………………………….……….24
2.3 Бібліотека функцій jQuery……………………………………………26
3. Розробка інформаційного Web-сайту ………………………...….….………27
3.1. Меню навігації ………………………………..……..……......……..27
3.2. Структура сайту ………………………………………………….…..30
3.3. Інтерфейс сайту ……………………………………………..………32
4. Впровадження розробленого проекту ………………………………………35
4.1. Тестування проекту на працездатність ……………………….……35
4.2. Впровадження сайту в мережу Інтернет ………………………..…38
4.3. Просування Web-сайту …………………………………...…………41
5. Охорона праці…………………………………………………………………45
5.1. Правові основи охорони праці……………………………………......45
5.2. Класифікація причин і методи аналізу виробничого травматизму та профзахворювань…………………………………………………………...48
5.3. Основи фізіології, гігієни праці та виробничої санітарії……………50
5.4. Основи техніки безпеки на виробництві…………………………......55
5.5. Основи пожежної безпеки…………………………………………….56
Висновок………………………………………………………………………….60
Література…………………………………………………………..…………….61
Стартовий тег <HEAD> покласти
прямо перед тегом <TITLE> та іншими
тегами, описують документ, а завершальний
тег </ HEAD> розміщується відразу після
закінчення опису документа.
Більшість WEB-браузерів відображають вміст
тега <TITLE> в заголовку вікна. Тема, обмежений
тегами <TITLE> і </ TITLE>, розміщується
всередині <HEAD>-тегів.
Тіло документа перебувати між тегами
<BODY> і </ BODY>. Це та частина документа,
яка відображається як текстова та графічна
(смислова) інформація документа.
Як будь-яку мову, HTML дозволяє вставляти
в тіло документа коментарі, які зберігаються
при передачі документа по мережі, але
не відображаються браузером. Синтаксис
коментаря: <! - Це коментар ->.
Гіпертекстові посилання є ключовим компонентом,
що робить WEB привабливим для користувачів.
Додаються гіпертекстові посилання, створюють
набір документів пов'язаним і структурованим,
що дозволяє користувачеві отримувати
необхідну йому інформацію максимально
швидко і зручно.
Посилання мають стандартний формат, що
дозволяє браузеру інтерпретувати їх
і виконувати необхідні функції (викликати
методи) залежно від типу посилання. Посилання
можуть вказувати на інший документ, спеціальне
місце даного документа або виконувати
інші функції. URL може вказувати на спеціальне
місце за абсолютним шляхи доступу, або
вказувати на документ у поточному шляху
доступу, що часто використовується при
організації великих структурованих WEB-сайтів.
HTML використовує URL (Uniform Resource Locator) для
подання гіпертекстових посилань і посилань
на мережеві сервіси усередині HTML-документа.
Перша частина URL (до двокрапки) описує
метод доступу або мережевий сервіс. Інша
частина URL (після двокрапки) інтерпретується
в залежності від методу доступу. Зазвичай,
два прямих слеша після двокрапки позначають
ім'я машини.
Для того щоб браузер відобразив
посилання на URL, необхідно відзначити
URL спеціальними тегами в HTML-документі. Синтаксис HTML, що дозволяє
це зробити - наступний:
<A HREF="URL"> текст-який-буде-підсвічений-
Тег <A HREF="URL"> відкриває опис посилання,
а тег </ A> - закриває його. Будь-який
текст, що знаходиться між даними двома
тегами підсвічується спеціальним чином
Web-браузером. Зазвичай цей текст відображається
підкресленим, і виділеним синім (або іншим
заданим користувачем) кольором. Текст,
що позначає URL, не відображається браузером,
а використовується тільки для виконання
запропонованих ним дій при активізації
посилання (зазвичай при клацанні миші
на підсвіченому або підкресленому тексті).
У HTML можна робити посилання на різні ділянки
або розділи одного і того ж документа,
використовуючи спеціальний прихований
маркер для цих розділів. Це дозволяє швидко
переходити від розділу до розділу всередині
документа, не використовуючи прокручування
екрану.
Одна з найбільш привабливих рис WEB - можливість
включення посилань на графічні й інші
типи даних в HTML-документ. Робиться це
за допомогою тега <IMG...ISMAP>. Використання
даного тега дозволяє значно поліпшити
зовнішній вигляд і функціональність
документів.
Колір задається шестизначним числом
в шістнадцятковому форматі за схемою
RGB (Red, Green, Blue). Колір # 000000 відповідає чорному,
а колір # FFFFFF - білому.
Деякі браузери дозволяють користувачеві, заповнивши спеціальну форму, що повертає отримане значення, виконувати деякі дії на WEB-сервері. Коли форма інтерпретується WEB-броузером, створюється спеціальні екранні елементи GUI, такі, як поля введення, checkboxes, radio buttons, що випадають меню, скролліруемие списки, кнопки і т.д. Коли користувач заповнює форму і натискає кнопку "Підтвердження" (SUBMIT –
спеціальний тип
кнопки, який задається при описі
документа), інформація, введена користувачем у форму, надсилається
HTTP-сервера для обробки та передачі іншим
програмам, що працюють під сервером.
HTML дозволяє створювати таблиці. Основні
теги таблиці: <TABLE> ...</ TABLE>. Всі елементи
таблиці повинні знаходитися всередині
цих двох тегів. За замовчуванням таблиця
не має обрамлення і роздільників. Обрамлення
додається атрибутом BORDER.
Атрибут BORDER використовується в тегу TABLE.
Якщо цей атрибут присутній, межа таблиці
промальовується для всіх осередків і
для таблиці в цілому. BORDER може приймати
числове значення, що визначає ширину
межі.
На даний момент у WEB використовується
два типи растрових файлів: у форматах
JPEG і GIF. JPEG-формат добре передає колірні
й тонові розкати, розмиті границі (наприклад,
фото). JPEG-файл добре масштабується в браузері.
Погано передає рівні площини кольору,
в компресії поступається GIF-формату. GIF-формат
добре передає рівні площини кольори,
жорсткі межі (наприклад, векторну графіку,
логотипи). Має максимальну компресію,
допускає прозорий фон. Погано масштабується
в браузері, спотворює колірні й тонові
розкати.
2.2. Каскадні таблиці стилів CSS
У стандартному
мовою HTML для присвоєння якому-небудь
елементу певних властивостей, - таких
як колір, розмір тощо - доводиться щоразу
їх заново описувати. Застосовуючи технологію CSS, достатньо буде
один раз описати властивості елементів
і визначити цей опис як стиль.
Завжди необхідно витримувати прийнятий
стиль. Якщо сайт з розгалуженою структурою,
необхідно оформити його сторінки однаково,
тобто витриманими в межах одного стилю.
На всіх сторінках повинні бути одні й
ті ж керуючі елементи, однакові інтервали
і подібні шрифти.
Застосовуючи
текстові фільтри, можна добитися хорошого
дизайну сайту навіть без використання
«наворочених» зображень. До того ж,
на відміну від зображень, ці фільтри не ускладнюють
завантаження сторінок.
Основним поняттям CSS є стиль - тобто набір
правил оформлення й форматування, що
може бути застосований до різних елементів
сторінки. У стандартному HTML для присвоєння
якому-небудь елементу певних властивостей
(таких, як колір, розмір, положення на
сторінці й т.п.) доводилося щораз описувати
ці властивості, навіть якщо на одній сторінці
повинні розташовуватися 10 або 110 таких
елементів, нітрохи не відрізняються один
від іншого. Необхідно було десять чи сто
десять разів вставити той же шматок коду
HTML сторінку, збільшуючи розмір файлу
і час завантаження на комп'ютер переглядає
її користувача.
CSS діє іншим, більш зручним і економічним
способом. Для присвоєння якому-небудь
елементу певних характеристик потрібно
один раз описати цей елемент і визначити
цей опис як стиль, а надалі просто вказувати,
що елемент, який необхідно оформити відповідним
чином, повинен прийняти властивості стилю.
Більш того, можна зберегти
опис стилю не в тексті сторінки,
а в окремому файлі - це дозволить
використовувати опис стилю на будь-якій
кількості Web-сторінок. Приголомшливо
зручно. І ще одне, пов'язане з цим, перевага
- можливість змінити оформлення будь-якої
кількості сторінок, виправивши лише опис
стилю в одному (окремому) файлі.
Крім того, CSS дозволяє працювати зі шрифтовим
оформленням сторінок на набагато вищому
рівні, ніж стандартний HTML, уникаючи зайвого
обважнення сторінок графікою.
Розташування опису стилів в окремому
файлі має сенс, якщо планується застосовувати
ці стилі до більшого, ніж одна, кількості
сторінок. Для цього потрібно створити
звичайний текстовий файл, описати за
допомогою мови
CSS необхідні стилі, помістити цей файл на Web-сервер, а в коді Web-
сторінок, які
будуть використовувати стилі з
цього файлу, потрібно буде зробити
посилання на нього. Робиться це за допомогою
тега <LINK>, розташованого усередині
тега <BODY> WEB-сторінок.
Перші два параметри цього тегу є зарезервованими
іменами, що вимагаються для того, щоб
повідомити браузеру, що на цій сторінці
буде використовуватися CSS. Третій параметр
- HREF = «URL» - вказує на файл, який містить
описи стилів. Цей параметр повинен містити
або відносний шлях до файлу - у випадку,
якщо він знаходиться на тому ж сервері,
що і документ, з якого до нього звертаються
- або повний URL («http:// ...») у разі, якщо файл
стилів знаходиться на іншому сервері.
Другий варіант, при якому опис стилів
розташовується в коді Web-сторінки, всередині
тега <BODY>, у тегу <STYLE type="text/css">
... </ STYLE>. У цьому випадку можна використовувати
ці стилі для елементів, розташованих
в межах сторінки. Параметр type = "text /
css" є обов'язковим і служить для вказівки
браузеру використовувати CSS.
І третій варіант,
коли опис стилю розташовується безпосередньо
всередині тега елемента, який описується. Це
робиться за допомогою параметра STYLE, використовуваного
при застосуванні CSS з більшістю стандартних
тегів HTML. Цей метод небажаний, і зрозуміло
чому: він приводить до втрати одного з
основних переваг CSS - можливості відділення
інформації від опису оформлення інформації.
Втім, якщо необхідно описати лише один
елемент, цей варіант розташування опису
стилів також цілком застосуємо.
Також елементи сторінок, створені з використанням
CSS, використають механізм спадкування:
тобто якщо ви маєте в своєму розпорядженні
зображення всередині тега <P> ...</
P>, оформленого за допомогою CSS, з відступами,
так, щоб параграф займав тільки певну
частину ширини сторінки, зображення також
успадкує значення відступів, зазначені
для цього
параграфа. CSS реалізує можливість привласнювати стилі не всім однаковим
елементам сторінки,
а вибірково - для цього використовується
параметр CLASS = "ім'я класу" або
ідентифікатор ID = «ім'я елемента», привласнюються
будь-якому елементу сторінки. Параметр
CLASS застосовується у разі, якщо
необхідно створити однаковий стиль для
декількох, але не всіх елементів сторінки
(однакових або різних).
Присвоєння стилів за допомогою ідентифікаторів
застосовується у разі, якщо цим ідентифікатором
відповідає тільки один елемент на сторінці.
Якщо елементів, яким необхідно присвоїти
такий стиль, декілька - це вже клас.
В даний час мова CSS налічує досить велику
кількість властивостей елементів HTML,
якими він може керувати.
2.3 Бібліотека функцій jQuery
jQuery - бібліотека JavaScript, що фокусується на взаємодії JavaScript і HTML. Бібліотека jQuery допомагає легко отримувати доступ до будь-якого елементу DOM, звертатися до атрибутів і вмісту елементів DOM, маніпулювати ними.
Можливості jQuery
•Движок кросбраузерність CSS-селекторів Sizzle [2], що виділився в окремий проект;
•Перехід по дереву DOM, включаючи підтримку XPath як плагіна;
події;
•Візуальні ефекти;
•AJAX-додатки;
•JavaScript-плагіни.
3. РОЗРОБКА ІНФОРМАЦІЙНОГО WEB-САЙТУ
3.1. Меню навігації
На нашому web-сайті буде розташовуватися вся
інформація про державну установу Луганскького
обласного краєзнавчого музею, а саме:
загальна інформація музею, историю, екскурсії,
галереї, експозиції музею, його філіали,
публікації співробітників музею, контактна
інформація.
Розглянемо кожну сторінку окремо і її
змістовну частину.
Опис меню «О музеї»
Коли ми заходимо на наш сайт то потрапляємо
прямо на головну сторінку. Головна сторінка
складається з верхньої частини, меню
навігації, змістовної частини і нижній
частині. На верхній частині фото будили
музею виконаного в старовинному стилі
у рамці, та експонати музею. Меню навігація
складається з кнопок (О музеї, історія,
екскурсії, виставки, галерея, експозиції,
філіали, новини, контакти), для зручного
та швидкого переходу на цікаву нам сторінку.
Змістовна частина несе в собі загальну
інформацію про музей, штат робітників,
будівлю, та має картинки. Нижня частина
на всіх рівнях сайту однакова і не містить
інформації.
Опис меню «Істория»
Сторінка «Істория» складається з верхньої частини, меню навігації, змістовної частини і нижній частині. На верхній частині фото будили музею виконаного в старовинному стилі у рамці, та експонати музею. Меню навігація складається з кнопок (О музеї, історія, екскурсії, виставки, галерея, експозиції, філіали, новини, контакти), для зручного та швидкого переходу
на цікаву нам
сторінку.
Змістовна частина несе в собі загальну інформацію про історію
музею, його розвитку та важливі події
в його жити також у тексти присутні
фотографії які відносяться до історії
музею.
Опис меню «Екскурсії»
Сторінка «Екскурсії» складається з верхньої частини, меню навігації, змістовної частини і нижній частині. На верхній частині фото будили музею виконаного в старовинному стилі у рамці, та експонати музею. Меню навігація складається з кнопок (О музеї, історія, екскурсії, виставки, галерея, експозиції, філіали, новини, контакти), для зручного та швидкого переходу на цікаву нам сторінку.
Змістовна частина несе в собі інформацію Вартість квитків на відвідування постійно діючих експозицій музею, Вартість екскурсійного обслуговування однієї групи відвідувачів, перелік оглядових екскурсій.
Опис меню «Виставки»
Сторінка «Виставки» складається з верхньої частини, меню навігації, змістовної частини і нижній частині. На верхній частині фото будили музею виконаного в старовинному стилі у рамці, та експонати музею. Меню навігація складається з кнопок (О музеї, історія, екскурсії, виставки, галерея, експозиції, філіали, новини, контакти), для зручного та швидкого переходу на цікаву нам сторінку.
Змістовна частина несе в собі інформацію про діючи виставки у приміщенні Луганського обласного краєзнавчого музею, ціни на їх відвідування. Також інформацію про заплановані виставки в майбутньому.
Опис меню «Галерея»
Сторінка «Галерея» складається з верхньої частини, меню навігації, змістовної частини і нижній частині. На верхній частині фото будили музею виконаного в старовинному стилі у рамці, та експонати музею. Меню навігація складається з кнопок (О музеї, історія, екскурсії, виставки, галерея, експозиції, філіали, новини, контакти), для зручного та швидкого переходу на цікаву нам сторінку.
Опис меню «Експозиції»
Сторінка «Експозиції» складається з верхньої частини, меню навігації, змістовної частини і нижній частині. На верхній частині фото будили музею виконаного в старовинному стилі у рамці, та експонати музею. Меню навігація складається з кнопок (О музеї, історія, екскурсії, виставки, галерея, експозиції, філіали, новини, контакти), для зручного та швидкого переходу на цікаву нам сторінку.
При наведенни на копку меню «Експозиції» відкривається список, що випадає з переліком постійних експозиція представлених в Луганському обласному краєзнавчому музеї, при виборі потрібного меню з випадаючого списку ми переходимо на цікаву для нас експозицію.