3176

Розробка мультимедійного веб-сайту

Дипломная

Информатика, кибернетика и программирование

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

Украинкский

2012-10-26

5.08 MB

37 чел.

Вступ

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

В повсякденній мові слово Інтернет найчастіше вживається в значенні Всесвітньої павутини і доступної в ній інформації, а не у значенні самої фізичної мережі. Також вживаються терміни Всесвітня мережа, Глобальна мережа чи навіть одне слово Мережа, Іне́т, Тенета, Міжмережжя, Інтерне́трі або Не́трі. Все частіше Інтернет вживається і з малої літери, що можна пояснити паралелями з термінами «радіо», «телебачення», які пишуть з малої.

Історія Інтернету сягає досліджень 1960-х років, які проводилися на замовлення уряду США і мали на меті створення надійних розподілених комп'ютерних мереж, стійких до пошкоджень. Попередницею Інтернету стала мережа ARPANET (англ. Advanced Research Projects Agency Network), яка почавши функціонувати в кінці 1960-х, в кінці 1970-х об'єднувала близько 200 вузлів.

Урядове фінансування магістральної мережі Національного наукового фонду США в 1980-х, а також приватне фінансування для інших комерційних магістральних мереж в усьому світі призвело до участі в розробці нових мережевих технологій і злиття багатьох мереж.

Комерціалізація в 1990-х міжнародної мережі привела до її популяризації та впровадження в практично кожен аспект сучасного життя людини. З 2011 року більше 2,1 мільярда людей користуються послугами Інтернету.

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


1
 Загальний розділ

1.2 Опис інформаційного забезпечення системи для розробки сайту

На початковому етапі свого розвитку портал розваг " Portal-media " являє собою невеличкий сайт на якому розміщено: відео, музіка та різні новини. Портал розваг " Portal-media "  будь-хто зможе знайти найсвіжіші новинки mp3 музики 2012 року, скачати нові пісні безкоштовно без реєстрації. Всі музичні новинки додаються нашими релизерами без вихідних, так що ви завжди будете в курсі останніх оновлень! На сайті всі композиції абсолютно безкоштовні. Тематики пісень найрізноманітніші: від нових хітів . Якщо перед скачуванням ви захочете прослухати сподобався трек, скористайтеся зручним mp3 плеєром. У величезному архіві музики обов'язково знайдете новинки собі до смаку, а нові пісні, викачані в форматі mp3, розфарбують нудні будні в усі кольори веселки.

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

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

По-перше, у зв'язку з великою швидкістю розвитку мережі Інтернет , відбувається втягування усе більшої кількості людей у середовище використання Інтернет-технологій і ресурсів. Якщо влаштувати опитування на тему " чи потрібний Інтернет?", то 62% від усього населення відповідять ствердно, і багато хто з них скажуть, що вже не представляють свого життя без його використання, як без  чи телевізора телефону. Тому не дивно, що за допомогою сайта про нас довідаються більшу кількість потенційних клієнтів, ніж з газети.

Для рішення поставленої задачі використано мову гіпертекстової розмітки HTML і мову опису Web-сценаріїв Java.

Створення Web-сторінки за допомогою мови HTML

Як  стандарт прийнята Hyper Text Markup Language - мова розмітки гіпертекстів, призначена для створення форматированного тексту, насиченого зображеннями, звуком, анімацією, відеокліпами і гіпертекстовими посиланнями на інші документи, розкидані як по всьому Web-просторі, так і на цьому ж  чи сервері який являється складовою частиною цього ж Веб-проекта.

Можна працювати на Web без знання мови HTML, оскільки тексти HTML можуть створюватися різними спеціальними редакторами і конвертерами. Але писати безпосередньо на HTML неважко.

Мова HTML існує в декількох варіантах і продовжує розвиватися, але конструкції HTML, швидше за все, будуть використовуватися і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати Web-сторінки, що можуть бути, переглянуті багатьма браузерами Web, як зараз, так і в майбутньому. Це не виключає можливості використання інших методів, наприклад, метод розширених можливостей, що надається Netscape Navіgator, Іnternet Explorer чи деякими іншими програмами.

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

HTML був ратифікований World Wіde Web Consortіum. Він підтримується декількома широко розповсюдженими броузерами, і, можливо, стане основою майже всього програмного забезпечення, що має відношення до Web.

Структура HTML документа

Оскільки HTML-документи записуються в ASCІІ-форматі, то для її створення може бути використаний будь-який текстовий редактор.

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

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

<p>Інформація</p>

Тут стартовим тегом є тег <P>, а завершальним - </P>. Завершальний тег відрізняться від стартового лише тим, що в нього перед текстом у дужках <> стоїть символ '/' (слэш).

Браузер, що читає HTML-документ, відображає його у вікні, використовуючи структуру HTML-тегів. У кожному HTML-документі повинні бути присутніми три головних частини:

а) Оголошення HTML;

б) Заголовок;

в) Тіло документа.

Оголошення HTML

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

<HTML>

.

</HTML>

Заголовна частина.

<HEAD> і </HEAD>. Між цими тегами розташовується інформація про документ (назва, ключові слова для пошуку, опис і т.д.). Однак найбільш важливим є назва документа, що ми бачимо у верхньому рядку вікна браузера. Спеціальні програми-спайдеры пошукових систем використовують назву документа для побудови своїх баз даних. Для того щоб дати назву своєму HTML-документу текст міститься між тегами <TІTLE> і </TІTLE>.

<HTML>

<HEAD>

<TІTLE>Моя перша сторінка</TІTLE>

</HEAD>

</HTML>  

Тіло документа.

Третьою головною частиною документа є його тіло. Воно випливає відразу за заголовком і знаходиться між тегами <BODY> і </BODY>. Перший з них повинний стояти відразу після тега </HEAD>, а другий - перед тегом </HTML>. Тіло HTML-документа - це місце, куди автор поміщає інформацію, отформатовану засобами HTML.

<HTML>

<HEAD>

<TІTLE> Моя перша сторінка</TІTLE>

</HEAD>

<BODY>

......................................

</BODY>

</HTML>

Форматування тексту

У розділі BODY усі символи табуляції і кінця рядків браузером ігноруються і ніяк не впливають на відображення сторінки. Тому переклад рядка у вихідному тексті HTML-документа не приведе до початку нового рядка у відображуваному оглядачем тексті при відсутності спеціальних тегів. Це правило дуже важливо пам'ятати і не забувати ставити поділяючі рядки теги, інакше в тексті не буде абзаців.

Для початку нового рядка використовується тег <BR> (скор. від англ. break - перервати). Цей тег приводить до відображення браузером подальшого тексту з початку наступної рядка. Закриваючий для нього тег не використовується. Він зручний, якщо потрібно з якогось місця писати з нового рядка без початку нового абзацу, наприклад, у вірші. Повторне його використання дозволяє вставити одну чи кілька порожніх рядків, відсунувши наступний фрагмент сторінки вниз.

Суцільний текст без проміжків читається не дуже легко, його незручно переглядати і знаходити потрібні місця. Розбитий на абзаци, текст сприймається набагато швидше. Для початку нового абзацу використовується тег <P> (англ. paragraph - абзац). Цей тег, крім початку нового рядка, вставляє один порожній рядок. Але багаторазове повторення <P>, на відміну від <BR>, не приведе до появи декількох порожніх рядків.

Всередині дужок тега крім його назви можуть розміщатися також атрибути (англ. atrіbutes - атрибути). Вони відокремлюються від назви і між собою пробілами (одним чи декількома), а пишуться у виді ім'я_атрибута="значення". Якщо значення не містить пробілів, то лапки можуть бути опущені, але так робити не рекомендується. Тег <P> може містити атрибут ALІGN, що визначає вирівнювання абзацу. За замовчуванням абзац вирівняний уліво ALІGN="left". Можливі також вирівнювання вправо ALІGN="rіght" і по центру ALІGN="center". При використанні атрибутів, після форматуємого тексту варто використовувати закриваючий тег </P>. Якщо ні, то новий тег <P> означає закриття попереднього. Вирівняти текст по центру можливо також тегом <CENTER>.

Крім використання цих тегів, для розриву рядків можливе використання символів кінця рядків і табуляцій у самому HTML-документі. Для цих цілей існує тег <PRE>. Весь текст, поміщений між тегами <PRE> і </PRE>, буде виводитися без змін, тобто  з усіма кінцями рядків і табуляціями.

Наприклад:

<PRE>Це текст написаний

у двох рядках</PRE>

У HTML-документі, крім тексту, можуть міститися горизонтальні розділові лінії. Тег <HR> виведе горизонтальну лінію одиничної товщини уздовж усієї ширини сторінки. Горизонтальна розділова лінія завжди приводить до розриву рядка, але порожніх рядків між лінією і текстом не з'являється. Тег <HR> може містити кілька атрибутів. <HR SHADE> і <HR> дають контурну лінію з тривимірним ефектом поглиблення. <HR NOSHADE> дає суцільну чорну лінію. Лінія може не простиратися у всю ширину сторінки, а складати лише деяку частину. Атрибут WІDTH задає ширину лінії, у відсотках від ширини всієї  чи сторінки в пикселах. Наприклад, 50% - половина ширини сторінки, 400 - ширина в 400 пикселов. Атрибут ALІGN може приймати значення, аналогічні його значенням для тега <P>, але вирівнювання за замовчуванням - по центрі. Атрибут SІZE задає товщину лінії в пикселах від 1 до 175; за замовчуванням 1, але якщо <HR SHADE>, (лінія - контурна), те додається товщина, необхідна для тривимірного ефекту поглиблення.

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

JavaScrіpt

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

Сценарії JavaScrіpt звичайно поміщають безпосередньо в документ HTML. Вони можуть  чи знаходитися в чи заголовку в тілі документа. В один документ можна помістити кілька сценаріїв. Приклад синтаксису:

<SCRІPT LANGUAGE="JavaScript">

Тут знаходиться сценарій

</SCRІPT>

JavaScript має низку властивостей об'єктно-орієнтованої мови, але завдяки концепції прототипів підтримка об'єктів в нім відрізняється від традиційних мов ООП. Крім того, JavaScript має ряд властивостей, властивих функціональним мовам, — функції як об'єкти першого рівня, об'єкти як списки, каррінг (currying), анонімні функції, замикання (closures) — що додає мові додаткову гнучкість.

JavaScript має C-подібний синтаксис, але в порівнянні з мовою Сі має наступні корінні відмінності:

об'єкти, з можливістю інтроспекції і динамічної зміни типу через механізм прототипів

- функції як об'єкти першого класу

- обробка винятків

- автоматичне приведення типів

- автоматичне прибирання сміття

- анонімні функції

Семантика мови схожа з семантикою мови Self.

Приклад оголошення і використання класу в JavaScript (клас є одночасно функцією, оскільки функції — це об'єкти першого рівня):

function MyClass()

{

  this.myValue1 = 1;

  this.myValue2 = 2;

}

var mc = new MyClass();

mc.myValue1 = mc.myValue2 * 2;

Одна з популярних технологій, що дозволила зробити сторінки динамічнішими і забезпечити нові можливості — це динамічне завантаження і вставка даних в документ, що отримала назву AJAX.

Використання в HTML

При використанні в рамках технології DHTML JavaScript код включається в HTML-код сторінки і виконується інтерпретатором, вбудованим в браузер. Код JavaScript вставляється в теги <script></script> з обов'язковим по специфікації HTML 4.01 атрибутом type="text/javascript", хоча в більшості браузерів мова сценаріїв за умовчанням саме JavaScript.

Скрипт, що виводить модальне вікно з класичним написом «Hello, World!» усередині браузера:

<script type="text/javascript">

 alert('Hello, World!');

</script>

Слідуючи концепції інтеграції JavaScript в існуючі системи, браузери підтримують включення скрипта, наприклад, в значення атрибуту події:

<a href="delete.php" onclick="return confirm('Ви впевнені?');">Видалити</a>

Тут при натисненні на посилання функція confirm('Ви впевнені?'); викликає модальне вікно з написом «Ви впевнені?», а return false; блокує перехід за посиланням. Зрозуміло, цей код працюватиме тільки якщо в браузері є і включена підтримка JavaScript, інакше перехід за посиланням відбудеться без попередження.

Є і третя можливість підключення JavaScript — написати скрипт в окремому файлі, а по тому підключити його за допомогою конструкції:

<script type="text/javascript" src="http://Шлях_до_файла_зі_скриптом"></script>

При розробці великих і нетривіальних веб-застосунків з використанням JavaScript, критично важливим є доступ до інструментів зневадження. Оскільки браузери від різних виробників дещо відрізняються у поведінці JavaScript і реалізації Об'єктної Моделі Документа, треба мати в руках зневаджувач для кожного браузера, якщо веб-застосування орієнтовано на нього.

На данний час Internet Explorer, Firefox, Opera, Google Chrome та Safari мають зневаджувачі для себе.

Internet Explorer має три : Microsoft Visual Studio є найпотужнішим з цих трьох, слідом йде Microsoft Script Editor (компонента Microsoft Officeі нарешті існує безплатний Microsoft Script Debugger з базовими функціями. Веб-застосування для Firefox допоможе привести до ума додаток Firebug (зручно вбудований безпосередньо в браузер), або давніший відладчик Venkman, котрий також працює з браузером Також існують кілька інструментів, як вільних, наприклад JSLint інструмент перевірки якості коду, що сканує JavaScript програму, шукаючи проблеми коду, так і комерційних продуктів типу інструменту з назвою JavaScript Debugger.

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

Кожен блок сценарію інтерпретатор розбирає окремо. На веб-сторінках, коли треба комбінувати блоки JavaScript та HTML, синтаксичні помилки найти легше, якщо тримати функції сценарію в окремому блоці коду, або (ще краще) використовувати багато малих пов'язаних .js файлів. В такий спосіб синтаксична помилка не спричинятиме «падіння» цілої сторінки, і можна надати допомогу, елегантно вийшовши зі сторінки.

CSS

Каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) — спеціальна мова, що використовується для відображення сторінок, написаних мовами розмітки даних. Найбільш часто CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.

Специфікації CSS були створені та розвиваються Консорціумом Всесвітньої павутини.

CSS має різні рівні та профілі. Наступний рівень CSS створюється на основі попередніх, додаючи нову функціональність або розширюючи вже існуючи функції. Рівні позначаються як CSS1, CSS2 та CSS3. Профілі — сукупність правил CSS одного або більше рівнів створені для окремих типів пристроїв або інтерфейсів. Наприклад, існують профілі CSS для принтерів, мобільних пристроїв тощо.

CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки — розділення змісту сторінки (даних) та їх візуальної презентації.

CSS використовується авторами та відвідувачами веб-сторінок для того щоб визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки. Одна з головних переваг — можливість розділити зміст сторінки (або контент, наповнення, зазвичай HTML, XML або подібна мова розмітки) від вигляду документу (що описується в CSS).

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

Один і той же HTML або XML документ може бути відображенний по-різному в залежності від використаного CSS. Стилі для відображення сторінки можуть бути:

Стилі автора (інформація надана автором сторінки):

- зовнішні таблиці стилів (англ. stylesheet), частіше за все окремий файл або файли .css

- внутрішні таблиці стилів, включені як частина документу або блоку

- стилі для окремого елементу

Стилі користувача:

- локальний .css-файл, вказаний користувачем для використання на сторінах і вказаний в налаштуваннях броузера (наприклад Opera)

Стилі переглядача (броузера):

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

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

Переваги:

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

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

- сторінки зменшуються в об'ємі та стають більш структурованими, за рахунок того що інформація про стилі відділена від тексту та має певні правила застосування і сторінка побудована з їх урахуванням;

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


2
 Спеціальний розділ

2.1 Постановка задачі

Необхідно розробити веб-сайт щоб створити неповторне обличчя й імідж порталу, розмістити необмежений обсяг усіх своїх пропозицій у самому привабливому виді і змінювати їхній усякий раз, коли це необхідно. Сайт повинен містити повну інформацію про портал з адресою. На сайті можна розмістити яку-небудь інтересну інформацію про новинки та різні жанри пісень. Але, саме головне на ньому повинні постійно бути присутнім свіжі музичні та відео композіції, повинні обновлятися постійно. Всі сторінки повинні бути добре оформлені, та зрозумілі для користувача.
    Головні вимоги:
    -чіткий план викладу матеріалу
    -логічна послідовність висновків
    -стилістична єдність тексту
    -відсутність штампів, «побитих" виразів
    -відсутність тавтології - частого повторення одних і тих же слів
    -легкість і читабельність
    -наявність ключових слів в тексті
    -поділ тексту на абзаци
    -смислові виділення курсивом і жирним шрифтом
    -серйозно і продумано складений перший абзац тексту
    -мінімум складносурядних і складнопідрядних пропозицій
    -розмір до 4000-5000 знаків без пробілів
Обгрунтуємо кілька вимог, наприклад, останнє - розмір тексту. Оптимальний розмір статті для веб - близько 2500-3000 знаків без пробілів - це трохи більше листа а4, написаного 14 шрифтом. Стаття такого розміру, якщо вона буде написана цікаво, читається дуже легко, можна сказати «в літ». Але, ось більший обсяг вже читати важче.
З точки зору власника ресурсу великі статті абсолютно не рентабельні. По-любому краще більше статей на сайті, причому, бажано, що розглядають різні аспекти проблеми. Тобто, так, можна, звичайно, поділити статтю на дві частини, але і, орієнтуючись на пошукові системи, і, думаючи про зручність користувачів, краще, щоб кожна зі статей була цільна, незалежна і повноцінна. При професійному, відповідальному ставленні до наповнення та розвитку сайту таке, звичайно, неприпустимо.

2.2 Технічне завдання на розробку веб-сторінки

Вимоги до графічного дизайну сайту:

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

- вітається застосування невеликих гріфних елементів.

- вітається застосування невеликих флеш-елементів.

Вимоги до засобів перегляду сайту:

Сайт повинен забезпечувати коректне відображення даних в наступних браузерах:

- Internet Explorer (версія6 та вище);

- Mozilla Firefox (версія3.0 та вище)

- Opera

-Google Chrome

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

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

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

- додавання і видалення текстів (статей);

- редагування текстів (статей);

- додавання і видалення новин;

- редагування новин;

- управління відображенням новин;

- Додавання та видалення музики та відео.

Вимоги до компоновки сторінок сайту

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

Структура сайту:

Головна сторінка є основною точкою входу на сайт.

Призначення головної сторінки:

- ідентифікувати сайт, як представництво порталу в інтернеті;

- інформувати про основні можливості;

- забезпечити доступ до всіх основних розділів сайту(розділів 1-го рівня);

- інформувати про новини компанії.

Головна сторінка повинна містити наступні основні елементи:

а) Ідентифікаційні дані:

- логотип;

- назва компанії;

- слоган компанії(текст);

б) Навігація по розділам 1-го рівня

На сторінці повинні бути посилання на наступні розділи 1-го рівня:

Горизонтальне меню:

- «Зарубежная»;

- «Русская»;

- «Украинская»;

- «Главная»;

- «Новости»;

- «Новинки»;

- «Контакты»;

- «Зарубежная»;

- «Русская»;

- «Украинская»;

Внутрішністорінки (загальні вимоги).

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

Ідентифікаційні дані:

- логотип компанії;

- слоган компанії;

- копірайт.

Навігація по розділам 2-го рівня

На сторінках розділів, що мають внутрішні підрозділи, повинні бути присутні посилання на розділи 2-го рівня, що відповідають даному розділу 1-го рівня. Посилання на обраний розділ повинне бути візуально відокремлене відносно інших.

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

Необхідно передбачити ситуацію, коли розділи 2-го рівня відсутні.


  
2.3 Опис комплекту технічних засобів

  Графічні редактори Створення й оптимізація графіки - складна і примхлива задача. Безумовно, можливе створення Web-сторінки і без використання графіки - за допомогою шрифтів, скриптів і таблиць стилів (CSS) - і це буде красиво і стильно. Але остаточний вид документа залежить від великого числа різних факторів, таких як: ширина вікна браузера, попередні настроювання браузера, прийняті за замовчуванням розмір шрифту, його ім'я і колір. До того ж не всі скрипти і стилі підтримуються всіма браузерами. Якщо ж буде використана графіка, то відвідувач вашої сторінки побачить її точно такою. Основна складність роботи з Web-графікою полягає в тому, що пропускна здатність каналів Інтернету, у більшості випадків, дуже низька і відразу постануть проблеми - як зробити графічний файл невеликий по обсягу, але гарної якості, які програми і прийоми використовувати для його оптимізації.

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

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

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

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

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

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

Рисунок 2.1-Photoshop CS5

Пакет пропонує, наприклад, засоби для відновлення ушкоджених зображень, ретушування  чи фотографій створення самих фантастичних колажів, що тільки може дозволити собі наша уява. Загалом , потенціал цього пакета величезний. Починаючи з версії 5.5 у пакет включена програма Adobe ІmageReady, що надає величезні можливості при обробці графіки під WEB (оптимізація зображень, створення анімованих gіf, "розрізування" картинок на більш дрібні і т.д.). Девіз розроблювачів Photoshop CS5- "Camera of your mіnd" - припускає не тільки технічну досконалість, але і повну волю творчості, на яку людина, що працює з цією програмою.

PhotoPaіnt - ще один не менш відомий графічний редактор (з пакета Corel Draw) для обробки растрової графіки, що конкурує з Photoshop CS5. Тут також є всі необхідні інструменти для обробки графіки, різноманітні фільтри, текстури. Різниця лише в зручності роботи, інтерфейсі і швидкості накладення фільтрів - накладення відбувається небагато повільніше.

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

Існує ще ряд редакторів (Mіcrosoft Photo Edіtor, Mіcrosoft Photo DRAW), що також дозволяють реалізувати найпростіші задачі, але не задовольняючим запитам професіоналів.

   KoolMoves 7.0 - програма призначена для створення веб-анімації, при використанні різноманітних інструментів для роботи з Flash елементами і анімованими файлами формату GIF.
       KoolMoves нагоді веб-дизайнерам, як новачкам, так і професіоналам, так як вона відрізняється своєю простотою та зручністю. Для створення web-анімації високої якості варто скористатися саме нею, інструменти, які увійшли до її складу, допоможуть вам досить ефективно працювати з файлами формату Flash і анімаційними GIF.
       KoolMoves 7.0 дозволяє здійснювати різні дії з анімацією, наприклад градієнтну заливку створеної кривої. Додатковою зручністю є можливість присвоїти дії кнопками до створених вами зображенням. Так само ви зможете озвучити, як би оживити створену вами анімацію, записавши аудіо файл wav. формату. Навіть якщо ви не має досвіду роботи з flash додатками, нічого страшного, KoolMoves настільки проста, що ви без зусиль зможете створити високоякісні анімаційні ролики. Створені вами ролики можна спокійно експортувати в різні web-банери або мультимедійні слайд-шоу. Що дуже зручно при створенні сайтів, вам не доведеться користуватися різними громіздкими програмами, це допоможе прискорити процес створення та оптимізувати вашу роботу.

Рисунок 2.2- KoolMoves 7.0

     123 Flash Menu- програма надає швидкий спосіб для створення професійних Flash-меню і підтримує всі популярні Web-браузери, причому офіційні користувачі разом з реєстрацією отримують більше 100 шаблонів.
Назва 123 Flash Menu програма отримала на підставі того, що керівництво користувача пропонує створити меню за три простих кроки: вибір шаблону, модифікація шаблону, опублікування. Програма дозволяє створювати динамічні ефекти (анімація, звуки, прозорість), але при цьому від користувачів не вимагається знання програмування. Сотні заздалегідь підготовлених шаблонів дають можливість швидко створити персоналізовані меню. Рublish Wizard допомагає згенерувати досконалий HTML-код. Flash-меню буде працювати при перегляді різними браузерами. Зареєструвавшись одного разу, можна періодично отримувати шаблони з сайту розробника.
        Робота з програмою досить проста. На першому етапі у вікні Wizard Window потрібно вибрати категорію шаблону (Тemplate Сategory) в лівій панелі (рис. 1), після чого відповідні шаблонні файли (Тemplate Files), що мають розширення * fmp, будуть перераховані в правій панелі. При листанню шаблонів можна переглядати їх вид у вікні Рreview Рane.

Рисунок 2.3- 123 Flash Menu

        Adobe Dreamweaver cs5 - Розширене рішення по роботі та створенні власних сайтів! Нові можливості втілені в новій версії Web редактора Adobe Dreamweaver cs5. Adobe Dreamweaver це відмінне рішення для Web-майстра в галузі створення сайтів і реалізації будь-яких можливостей в області верстки дизайну (шаблону)! Посравненію з попередніми версіями доданий дуже багато: расшіріна база команд коду, поліпшений дизайн, вікно для CSS, Допомога при роботі з Java Script і Ajax. У програмі є вбудована система управління сайтом, яка включає в себе: FTP-клієнт, функцію управління посиланнями і візуальну карту сайту, на якій графічно відображається структура сайту. Adobe Dreamweaver може працювати зі скриптами, оптимізувати сторінки для різних браузерів, перевіряти посилання на працездатність і знаходити непотрібні файли. Відмінна риса цього редактора - коректна робота з HTML кодом. Російська та Повна версія!
        Програма Adobe (Macromedia) Dreamweaver забезпечує функціональну середу написання коду, яка включає інструментальні засоби редагування коду (розмальовка коду або перевірка закриття тегів). HTML-редактор Adobe (Macromedia) Dreamweaver має повну підтримку формату CSS, з функцією перевірки його сумісності з різними браузерами, функціональний редактор коду веб-сторінок і можливість працювати з такими технологіями, як: XML, javascript, PHP, Adobe ColdFusion, ASP і ASP . NET.
         Adobe (Macromedia) Dreamweaver - потужний професійний HTML-редактор для візуального створення та управління web-сайтами різної складності. Програма Adobe (Macromedia) Dreamweaver включає самі прогресивні інноваційні технології і можливості, за допомогою яких можна створювати динамічні і сучасні веб-сайти, відповідні сьогоднішнім стандартам.
Також присутній середу для розробки сучасних Ajax-додатків, які сьогодні набувають все більшої популярності.
        Adobe (Macromedia) Dreamweaver на сьогоднішній день є одним з кращих і відомих HTML-редакторів, що дозволяє без особливих зусиль створювати сучасні барвисті веб-сайти, а також керувати Інтернет-проектами.
Інструменти в Adobe Dreamweaver розташовані так, що б розробнику було зручно. Це прискорює процес від початку створення сторінки і до її публікації або підтвердження замовником. Крім того, нова версія програми допоможе командам і розробникам-одиначкам вийти на новий рівень в розробці і функціональності.
Допомога при роботі з Java Script і Ajax:
         При написанні ява скриптів, ви полчіте швидку і якісну підказку, що значно полегшить вашу роботу. Вам підкажуть ка краще працювати з певними об'єктами і різними типами даних. Ви зможете працювати з популярними базами javascript, наприклад, з jQuery, Prototype, і Spry.
Налаштування HTML:
        Ви можете використовувати всі функии html, створювати стандартні таблиці, серії div-тегів, ненумерование списки, а потім просто вибрати в меню Insert> Spry> Spry Data Set щоб інтегрувати ваші дані в динамічну таблицю з отсортірованності рядками, професійно деталізація шарами або виконати інші складні завдання.
Краща практика для CSS:
        У новій версії программи есть вікно для CSS. У ньому відображаються всі правила і стилі. При наведенні на рядок, ви отримаєте підказку, яка буде написана жаргонним англійською мовою, що допоможе вам швидше разобратся і зрозуміти css. Створення нових правил і стилів дуже просте, через панель можна побачити де зберігаються ці стилі, в цьому ж документі або в окремій таблиці.

Рисунок 2.4- Adobe (Macromedia) Dreamweaver

2.4 Проектування веб-сайту

Розробка меню навігації інформаційного web сайта

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

Поняття системи навігації

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

Типи навігації

Існує кілька типів організації навігації по Web-сайту. Розглянемо основні:

- Текст

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

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

- Графіка

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

Вимоги до системи навігації

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

Рисунок 2.5- Компонування блоків Web-сайта

Розробка графічного макета майбутнього web-сайта.Компонування макета Під компонуванням макета прийнято розуміти умовне (схематичне) розташування блоків інформації на майбутньому Web-сайті. Усього можна виділити чотири блоки інформації. Розглянемо кожний з них:

1. "шапка" - займає верхню частину сайта у вікні браузера (як правило, не більше 1/4 видимої частини екрана без прокручування) і може містити:

- логотип;

- слоганы, гасла, девізи;

- рекламну інформацію (банери і текстові блоки) та ін.;

2. Меню навігації- воно може бути вертикальним, горизонтальним, містити підменю і т.д.  і т.п..

3 . Змістовна частина - тут відображається основна і сама головна складова будь-якого Web-сайта - інформація: новини і каталог продукції, контактні дані і гостьова книга і т.д. ;

4 ."Підвал" - нижня частина сайта у вікні браузера, не є обов'язковим блоком, він лише підкреслює чітку структуру. Він може містити:

-  інформацію про авторське право розроблювачів Web-сайта (повний  чи текст посилання на нього);

- координати для зв'язку;

- дублюючу навігацію (текстову);

- рекламну інформацію (баннеры і текстові блоки) і ін.

Ще одним важливим моментом, що передує початку роботи над графічним макетом, є вибір типу верстки. Усього існує два типи:

- "фікс" - у цьому випадку сайт "затачивается" під конкретний мінімальний розмір екрана і при зміні розмірів вікна браузера його компонування залишається фіксованим;

- "гума" - структура сайта змінюється пропорційно змінам розмірів вікна браузера (тобто  сайт "розтягується").

Логічно припустити, що при виборі типу верстки варто виходити з мінімального розміру екрана. У даному випадку вибраний перший тип верстки – "фікс".

3 Екслуатаційний розділ

3.1 Завантаження сторінок сайту. Робота із сайтом

Опис меню "Главная страница"Коли заходимо на наш сайт то потрапляємо прямо на головну сторінку. Головна сторінка складається з "шапки", меню навігації, змістовної частини і "підвалу".

На "шапці" розташований логотип порталу та інформація про контакти.

Меню навігація складається з кнопок( «Зарубежная»,«Русская», «Украинская», «Главная», «Новости» ,«Новинки», «Контакты», «Зарубежная», «Русская» ,«Украинская» )для зручного і швидкого переходу на сторінку яка цікавить.Змістовна частина несе в собі новини про музикальні композиції.

Рисунок3.1- Головна сторінка сайту

Опис сторінки "Контакты"Зайшовши на сторінку " Контакты " побачимо інформацію як зв’язатися з керівниками сайту.

Сторінка " Контакты " складається з "шапки", меню навігації,  змістовній частині і "підвалу".

На "шапці" розташований логотип сайту .Меню навігація складається з кнопок ( «Зарубежная»,«Русская», «Украинская», «Главная», «Новости» ,«Новинки», «Контакты», «Зарубежная», «Русская» ,«Украинская» )для зручного і швидкого переходу на цікавлячу сторінку.

Рисунок3.2- Сторінка " Контакты "

Опис сторінки "Новости"Зайшовши на сторінку "Новости" побачимо новини пісень та відео на сайті.

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

Меню навігація складається з кнопок ( «Зарубежная»,«Русская», «Украинская», «Главная», «Новости» ,«Новинки», «Контакты», «Зарубежная», «Русская» ,«Украинская» ), для зручного і швидкого переходу на цікавлячу сторінку.

Рисунок3.3- Сторінка "Новости"

Опис сторінки «Зарубежная»Зайшовши на сторінку «Зарубежная» побачимо пісні закордонних виконавців.

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

На "шапці" розташований логотип сайту.Меню навігація складається з кнопок ( «Зарубежная»,«Русская», «Украинская», «Главная», «Новости» ,«Новинки», «Контакты», «Зарубежная», «Русская» ,«Украинская» ), для зручного і швидкого переходу на цікавлячу сторінку.

Рисунок3.4- Сторінка «Зарубежная»

Опис сторінки «Русская»Зайшовши на сторінку «Русская» побачимо пісні російських виконавців. Всі новинки та популярні пісні.

Сторінка «Русская»  складається з "шапки", меню навігації, змістовній частині і "підвалу".

На "шапці" розташований логотип сайту.Меню навігація складається з кнопок ( «Зарубежная»,«Русская», «Украинская», «Главная», «Новости» ,«Новинки», «Контакты», «Зарубежная», «Русская» ,«Украинская» ), для зручного і швидкого переходу на цікавлячу сторінку.

Рисунок3.5- Сторінка «Русская»

        Опис сторінки «Украинская»Зайшовши на сторінку «Украинская» побачимо пісні українских виконавців. Всі новинки та популярні пісні.

Сторінка «Украинская» складається з "шапки", меню навігації, змістовній частині і "підвалу". На "шапці" розташований логотип сайту.

Меню навігація складається з кнопок ( «Зарубежная»,«Русская», «Украинская», «Главная», «Новости» ,«Новинки», «Контакты», «Зарубежная», «Русская» ,«Украинская» ), для зручного і швидкого переходу на цікавлячу сторінку.

Рисунок3.6- Сторінка «Украинская»

       Опис сторінки «Новинки»Зайшовши на сторінку «Новинки» побачимо пісні та відео різних виконавців які вийшли нещодавно.

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

Меню навігація складається з кнопок ( «Зарубежная»,«Русская», «Украинская», «Главная», «Новости» ,«Новинки», «Контакты», «Зарубежная», «Русская» ,«Украинская» ), для зручного і швидкого переходу на цікавлячу сторінку.

Рисунок3.7- Сторінка «Новинки»

       Опис сторінки «Новости»Зайшовши на сторінку «Новости» побачимо новості про виконавців та різні новинки.

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

Меню навігація складається з кнопок ( «Зарубежная»,«Русская», «Украинская», «Главная», «Новости» ,«Новинки», «Контакты», «Зарубежная», «Русская» ,«Украинская» ), для зручного і швидкого переходу на цікавлячу сторінку.

Рисунок3.8- Сторінка «Новости»

Опис сторінки «Зарубежная»Зайшовши на сторінку «Зарубежная» ми побачимо відео закордонних виконавців.

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

Меню навігація складається з кнопок ( «Зарубежная»,«Русская», «Украинская», «Главная», «Новости» ,«Новинки», «Контакты», «Зарубежная», «Русская» ,«Украинская» ), для зручного і швидкого переходу на цікавлячу нам сторінку.

Рисунок3.9- Сторінка «Зарубежная»

Опис сторінки «Русская»Зайшовши на сторінку «Русская» ми побачимо відео російських виконавців. Всі новинки та популярні відео.

Сторінка «Русская»  складається з "шапки", меню навігації, змістовній частині і "підвалу". На "шапці" розташований логотип сайту.

Меню навігація складається з кнопок ( «Зарубежная»,«Русская», «Украинская», «Главная», «Новости» ,«Новинки», «Контакты», «Зарубежная», «Русская» ,«Украинская» ), для зручного і швидкого переходу на цікавлячу нам сторінку.

Рисунок3.10- Сторінка «Русская»

           Опис сторінки «Украинская»Зайшовши на сторінку «Украинская» ми побачимо відео українских виконавців. Всі новинки та популярні відео.

Сторінка «Украинская» складається з "шапки", меню навігації, змістовній частині і "підвалу". На "шапці" розташований логотип сайту.

Меню навігація складається з кнопок ( «Зарубежная»,«Русская», «Украинская», «Главная», «Новости» ,«Новинки», «Контакты», «Зарубежная», «Русская» ,«Украинская» ), для зручного і швидкого переходу на цікавлячу нам сторінку.

Рисунок3.11- Сторінка «Украинская»

3.2 Тестування веб-сайту в різних браузерах

Кросбраузерність сайту (від cross-browser - англ.) Має на увазі під собою однакове (або з незначними спотвореннями) відображення та функціонування сайту в різних Інтернет-браузерах. Проблема на сьогоднішній день є непростим завданням, а тому вважається одним з ознак професійного створення сайтів і веб-дизайну. Перед розробником сайту стоїть завдання: він повинен забезпечити максимальну сумісність сайту з різними браузерами, щоб користувач міг з однаковим комфортом переглядати і працювати з сайтом як в Internet Explorer, так і в Opera та інших браузерах.
Тестування сайту на кросбраузерність є обов'язковим завданням, адже відмінності в особливостях кожного з браузерів вельми великі, а розробник не може передбачити, чим користується відвідувач для перегляду сайту. Серед особливостей сайту можуть бути такі, як різні способи виведення шрифтів або їх розміри, а також можливу відсутність деяких з них на комп'ютері користувача. І це самі незначні проблеми, які можуть виникнути.

Рисунок3.12-  Браузер  Mozilla Firefox

Рисунок3.13- Браузер  Internet Explorer

Рисунок3.14- Браузер  Opera

Рисунок3.15- браузер Google Chrome

          

          3.3 Реєстрація сайта в мережі Інтернет

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

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

Хостинг баз даних, розміщення файлів, хостинг електронної пошти, послуги DNS можуть надаватися окремо як самостійна послуга, або входити в поняття послуги.

Види хостинга

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

Також можна розділити послуги хостинга по типі наданого ресурсу:

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

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

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

г) колокация (Collocatіon) - надання місця в датацентрі провайдера для устаткування клієнта (звичайно шляхом монтажу в стійці) і підключення його до Інтернету.

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

 Існує кілька способів опублікувати вашу інформацію в Інтернеті. Перший і найпростіший  - скористатися тим дисковим простором, що провайдер надає безкоштовно (більшість провайдерів при підключенні через них безкоштовно дають 5-10 Мб). Для "домашньої сторінки", прайс-листа і тому подібних речей цього місця цілком вистачить. Є тільки один мінус - адреса такої сторінки буде виглядати якось так: http://www.ho.ua//guest/newbe/іndex.html. Запам'ятати, продиктувати по  телефону подібну адресу досить складно. Крім того, замість того, щоб рекламувати вашу фірму така адреса, у першу чергу, рекламує провайдера... Це не означає, що користатися такими адресами не можна - вони цілком годяться для багатьох потреб.

 Наступна можливість - це створення "домена третього рівня". Виглядає така адреса як "http://назва сайту.provіder.ru" і значно легше запам'ятовується, диктується і т.п. Домени третього рівня досить часто можна одержати безкоштовно чи за дуже малі гроші на якому-небудь сервері, що надає безкоштовний хостинг, наприклад, на Narod.ru.

Допустимо, ви вирішили зареєструватися на Narod.ru. Шукаємо на Народ.ру посилання на розділ Реєстрація (Створити сторінку, Зареєструвати сайт - це може називатися по-різному), читаємо уважно правила й угоду з користувачем, заповнюємо уважно запропоновану форму (анкету).

Після реєстрації адреса вашого сайта буде, допустимо, vasya.narod.ru - це називається домен третього рівня.

 До речі, питання про те, що вибрати: безкоштовний Web-хостинг чи хостинг у вашого провайдера теж має деяке значення. По великому рахунку, у безкоштовного хостинга перевага тільки одна: ваша адреса не буде мінятися при зміні провайдера. Це досить важливо, тому що в більшості випадків відвідувачі знаходять вас через пошукові  системи чи дивлячись на візитку, що ви дали, можливо, рік назад. Якщо за цей час змінили провайдера, то потенційний відвідувач побачить повідомлення про те, що "документ не знайдений" і піде до ваших конкурентів. Однак безкоштовні хостери теж хочуть їсти, тому як  плату за надання місця жадають від вас розмістити їхні банери на сторінках або навіть розміщають їх автоматично. Крім того, безкоштовний хостер не гарантує безупинну роботу - у будь-який момент він може "закритися на ремонт", щось поміняти в конфігурації і т.п.

Подальший розвиток сайта вимагає реєстрації власного "домена другого рівня", при якому ваша адреса в Інтернеті виглядає як www.ваше_ім'я.ru Це робиться теж порівняно нескладно і недорого - типова вартість це 35 доларів у рік за реєстрацію імені і 10 доларів на місяць за місце на диску і підтримка сервера. При цьому при переході до іншого провайдера ваша адреса зберігається, просто дані фізично переносяться на інший сервер. В абсолютній більшості випадків для такого хостинга досить віртуального сервера (це коли на одному комп'ютері розташовано небагато сайтів з різними іменами), але якщо сайт буде занадто великим чи матиме велику популярність, то через якийсь час прийдеться задуматися про власний виділений сервер. По великому рахунку, різниця між віртуальним і виділеним сервером не дуже велика і виявляється тільки в тому випадку, якщо треба робити щось відносно нестандартне, наприклад, запускати довгопрацюючі або скрипты, що сильно завантажують процесор. Крім того, плюсом виділеного сервера є те, що одержуєте над ним повний контроль - у будь-який момент можете доставити ті програми, що потрібні, змінити конфігурацію і т.п. Правда, абсолютній більшості сайтів це не потрібно...

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

 Фізичне розташування сервера має досить істотне значення, особливо якщо сайт займає багато місця. Чим ближче до розташований сервер, тим швидше зв'язок і тем простіше його обновляти. Якщо ж сервер розташований в одному місті, то у випадку великих змін зможете банально приносити дані на вінчестері. Швидкість зв'язку із сервером можна подивитися за допомогою команди pіng, а "відстань" за допомогою команди tracert. Обидві ці команди вже є в Wіndows, а відкривши вікно ДОС і набравши "pіng /?" чи "tracert /?" ви довідаєтеся як ними користатися.

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

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

При виборі хостера варто не полінуватися і подивитися різні варіанти. Обов'язково поцікавтеся можливими обмеженнями на трафік (кількість переданих/прийнятих даних), на розмір сайта, на завантаження сервера (наприклад, багато провайдерів обмежують максимальний час виконання скрипта і сумарний час виконання усіх скриптів) і т.п. Довідайтеся,  чи можна установлювати свої скрипти, чи надає хостер набір готових CGІ, які програми і мови встановлені на сервері, чи є telnet доступ, чи можна заводити власні домени третього рівня,  чи можна заводити власні поштові скриньки і скільки, автовідповідачі і т.п. Запитуючи про обмеження трафіка і почувши "необмежено" у відповідь, поцікавтеся що значить "необмежено" і якою цифрою воно виражається. Якщо ж обмеження є, то довідайтеся скільки буде коштувати їхнє перевищення. Врахуйте, що ті речі, що зараз вам здаються незначними, наприклад, наявність бази даних чи підтримка PHP можуть знадобиться незабаром - сайт-то буде розвиватися і захочеться чогось нового... А зміна хостера в реальному житті - це як мінімум тиждень нервування і хитливої роботи сервера...

Згідно завдання було обрано хостинг  http://www.ho.ua/  тому що безкоштовний хостинг, професійний хостинг безкоштовно при підключенні свого доменукомпанія надає безкоштовний хостинг і комплекс додаткових послуг, здатних задовольнити будь-який проект.


            
4. Економічний розділ

                                          3о=Т*Ч                                                                (4.1)

де 3о - витрати на основну заробітну плату; гон;

    Т - сумарна трудомісткість програмного продукту; год;

    Ч – 8,30 грн .

                               Зо=160*8,30=1328 грн

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

Таблиця 4.1 — Ефективний фонд часу за травень

Назва

Значення

Одиниці виміру

Кількість календарних днів

31

Дні

Вихідні дні

8

Дні

Святкові дні

3

Дні

Тривалість робочого дня, год

8

год

Ефективний фонд часу

208

год

        Ефективний фонд часу = (31-8-3) * 8=208  (год);

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

                                               ТСПф                                                  (4.2)

де  Тс - тарифна стайка;

ЗП - заробітна плата;

Еф - ефективний фонд часу.

Приймаємо заробітну плату, яка становить 1500 грн на місяць                               

                                        Тс=1500/208=7,21(грн).

Тепер розрахуємо витрати на основну заробітну плату.

                           3о=64*7.21=461,44 (грн).

                                       Зд= Зод/*100%                                                                  (4.3)

Зе Зд - Додаткова заробітна плата

Кд – відсоток додаткової  ЗП, 20%;

                                   3д=1328*20/100=133,24 (грн).

                                  Нз=(Зо+Зд)* 36,76/100                                            (4.4)

де: Нз - відрахування від заробітної плати,грн.

                         Нз = (1328+133,24)* 36,76/100 = 537,15(грн).;

                                           М квпмн* Цк,                                         (4.5)

де  Мкв — матеріальні і комплектуючі вироби, грн.,

     Цп- ціна паперу, грн.

     Цмн - ціна лезерних носіїв, грн. (2 диска).

      Цк - ціна канцтоварів грн..

                                          Мкв=45+5+28=78 (грн).

                                            ВсвТ*п,                                               (4.6)

де Всв - витрати на службові відрядження, грн;

    ВТ — вартість одного службового відрядника;

    п - кількість службових відряджень.

Приймаємо, що на відрядження працівника повинно затратити такі кошти: добові 20,00 грн, проїзд 45,00 грн, вартість телефонних переговрів 15,00 грн, вартість проживання в готелі 200,00 грн, тривалість відрядження становить 2 дні.

Тепер можна вирахувати вартість одного службового відрядника

                  Вт=20,00*2+45,00 *2+15,00+200,00=501 (грн).

Визначаємо витрати на службові відрядження.

                             Всв=501*1=501(грн).

                                       Омвм.                                           (4.7)

де 0м - оренда машинного часу, грн,

Мв,— величина машинного часу необхідного для розробки та налагодження   програмного продукту. год;

    Чм - вартість оренди машинного часу грн./гад.

Чмеомр*n*I,

     Де  ЦЕ0М - ціна ЕОМ, грн.;

     Нр - коефіцієнт ефективної роботи 0.9%;

     п - кількість робочих дній;

      І- тривалість зміни, год.

Чм=4000/(0,9*230*8)=2,4 грн/год

0м=64*2,4=153,6 (грн)

                                         Взго*25/100,                                            (4.8)

Де Взг — загальногосподарські витрати, грн.

                                 ВЗГ=1328*25/100=332(грн)

Таблиця 4.2- Виробничі Витрати

Назва

Значення

Одиницівиміру

Витрати на основну ЗП

1328

Грн.

Додаткова ЗП

133,24

Грн.

Відрахування від ЗП

299,80

Грн,

Матеріальні і комплектуючі вироби

78,00

Грн.

Витрати на службові відрядження

501

Грн.

Оренда машинного часу

153,6

Грн

Загальнозаводські витрати

332

Грн

Всього

2825,64

Грн.

                                   Вгав*10/100.                                                  (4.9)

, де Впв - поза Виробничі Витрати, грн.

                    Впв=2825,64*10/100=282,56(грн)

  4.1.10 Калькуляція собівартості програмного продукту

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

Таблиця 4.3 - Калькуляція

Назва

Значення

Одиниці иміру

Витрати на основну ЗП

1328

Грн.

Додаткова ЗП

133,24

Грн.

Відрахування від ЗП

299,80

Грн.

Матеріальні і комплектуючі вироби

78,00

Грн.

Витрати на службові відрядження

501

Грн.

Оренда машинного часу

153,6

Грн

Загальнозаводські витрати

332

Грн

Позавиробничі витрати

282,56

Грн.

Всього

3187

Грн.

           4.2 Розрахунок ціни програмного продукту

                                              Ц=С+П,                                                        (4.10)

де Ц — оптоба ціна програмного проЗукшу. грн.;

    С — собівартість програмного продукту, грн.

    П — Величина проЗукшу. грн.

                                                 П=С*25/100                                           (4.11)

П=565,12* 25/100=с (грн.)

Ц=565,12+141,28 =  706,4(грн)

                                               Р=П/С*100%                                           (4.12)

Р=141,28 /565,12*100%=25%


5 Охорона праці

5.1 Загальні питання охорони праці на обчислювальному центрі

Правила охорони праці під час експлуатації електронно-обчислювальних машин поширюються на всі підприємства, установи, організації, юридичні особи незалежно від форми власності, відомчої належності, видів діяльності та на фізичних осіб (що займаються підприємницькою діяльністю з правом найму робочої сили), які здійснюють розробку, виробництво та застосування електронно-обчислювальних машин і персональних комп'ютерів  у тому числі й на тих, які мають робочі місця, обладнані ЕОМ, або виконують обслуговування, ремонт та налагодження ЕОМ. Правила встановлюють вимоги безпеки та санітарно-гігієнічні вимоги до обладнання робочих місць користувачів ЕОМ і працівників, що виконують обслуговування, ремонт та налагодження ЕОМ, та роботи із застосуванням ЕОМ, відповідно до сучасного стану техніки та наукових досліджень у сфері безпечної організації робіт з експлуатації ЕОМ та з урахуванням положень міжнародних нормативно-правових актів з цих питань (директиви Ради Європейського союзу 90/270/ ЄЕС, 89/391/ЄЕС, 89/654/ЄЕС, 89/655/ЄЕС, стандарти І5О, МРРІІ).

Облаштування робочих місць повинно забезпечувати:

  •  належні умови освітлення приміщення і робочого місця,

відсутність відблисків;

  •  оптимальні параметри мікроклімату (температура, відносна

вологість, швидкість руху, рівень іонізації повітря);

  •  належні ергономічні характеристики основних елементів

робочого місця.

Потрібно враховувати такі небезпечні і шкідливі фактори:

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

5.2 Електробезпека на обчислювальному центрі

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

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

Для ділянки персональних комп'ютерів основним технічним засобом, що забезпечує безпеку є захисне заземлення. Захисне заземлення - це навмисне з'єднання з землею або з її еквівалентом металевих не струмоведучих частин, котрі можуть опинитись під напругою. Призначення захисного заземлення - усунення небезпеки ураження людей електричним струмом при появі напруги на конструктивних частинах електрообладнання, тобто при замиканні на корпус. Принцип дії захисного заземлення - зниження до безпечних значень напруг дотику та кроку, зумовлених замиканням на корпус. Заземленню підлягають корпуса ЕОМ, металеві оболонки кабелів і проводів, металеві огородження.

Для електроустановок малої потужності з напругою до 1000 В опір пристрою, що заземлює, повинен бути не більше 10 Ом.

На ПК існують спеціальні клеми для підключення заземлення. До кожного робочого місця проведене електроживлення ~ 220 В, частотою 50 Гц, з робочим заземленням. Перед введенням електроживлення в приміщення встановлені автомати, що відключають електроживлення у випадку короткого замикання. Також окремо проведене захисне заземлення.

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

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

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

  •  ізоляція;
  •  контроль стану ізоляції електротехнічних пристроїв і ділянок живильної їхньої мережі;
  •  огороджувальні електрозахистні засоби;
  •  оптимальне розташування устаткування, що забезпечує розриви між струмоведучими частинами;
  •  сигналізація безпеки (світлова, звукова), маркірування і попереджувальні плакати;
  •  захист від переходу  високої напруги на сторону  низької напруги;
  •  застосування низьких напруг 42 і 12 В;
  •  застосування індивідуальних захисних ізолюючих засобів.

У ЕОМ присутня небезпечна для життя напруга 220 Вт та частота 50 Гц. Ця напруга живить трансформаторний блок. В інших блоках ПЕОМ напруги не перевищують 27 вольт, що не є небезпечним. У блоці стабілізатора і блоці навантаження відбувається тепловиділення. Температура частин цих блоків не перевищує 50° С, що не представляє небезпеки для людини.

Корпус блоку трансформатора виконаний з діелектричного матеріалу. Шасі виконано з дюралюмінію. Клема заземлення шасі повинна бути виведена на корпус. До цієї клеми повинне бути підключене заземлення.

Шнур живлення і вилка не повинні мати зламів і порушень в ізоляції.

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

ЕОМ є електроустановкою і до неї пред'являються вимоги дотримання всіх параметрів електробезпечності.

Шкідливими факторами для людини є:

  •  м'яке рентгенівське випромінювання екрана;
  •  мерехтіння екрана з частотою кадрового розгорнення;
  •  електростатичне поле навколо екрана; ультрафіолетове випромінювання екрана.

5.3 Техніка безпеки при роботі з пристроєм

Перед початком роботи:

   -перед початком роботи на ПК користувач повинен:

 -пересвідчитися у цілості корпусів і блоків (обладнання) ПК;

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

  -забороняється вмикати ПК та  починати  роботу  при  виявлених несправностях.

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

  Забороняється:

  •  замінювати   і  знімні  елементи  або  вузли  та  проводити

перемонтаж при ввімкненому ПК;

  •  з'єднувати  і роз'єднувати вилки та розетки первинних мереж

електроживлення, які знаходяться під напругою;

  •  знімати  кришки,  які  закривають доступ до струмопровідних

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

обладнанні;

             -    користуватися паяльником з незаземленим корпусом;

-    замінювати запобіжники під напругою;

-    залишати ПК у ввімкненому стані без нагляду.

По закінченні робочого дня:

  •  кнопкою "ВИМК"   відключити   електроживлення   ПК  згідно  з

інструкцією  експлуатації,  вийнявши  вилку  кабелю   живлення   з

розетки;

-  впорядкувати робоче   місце   користувача    ПК,    прибравши використане обладнання та матеріали у відведені місця;

-    про виявлені недоліки у  роботі  ПК  протягом  робочого  часу необхідно повідомити відповідним посадовим особам та спеціалістам.

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

-     зачинити вікна, кватирки;

-     перевірити приміщення та переконатися у відсутності тліючих

предметів;

  •  відключити    від    електромережі    всі   електроприлади,

електрообладнання та вимкнути освітлення;

  •   зачинити  вхідні  двері  приміщення  на  замок і ключ здати

черговому охорони.

Робота на комп'ютері потребує постійної уваги, чітких дій і самоконтролю. Через це на комп'ютері не можна працювати при недостатньому освітленні. Напруга живлення ПК (220 В) є небезпечною для життя людини. Тому, незважаючи на те що в конструкції комп'ютера передбачена достатня ізоляція від струмопровідних ділянок, необхідно знати та чітко виконувати ряд правил техніки безпеки.

Забороняється:

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

Під час роботи комп'ютера екран дисплея є джерелом електромагнітного випромінювання, яке руйнує зір, викликає втому, знижує працездатність. Через це треба, щоб очі користувача знаходилися на відстані 60 - 70 см від екрана, а безперервна робота за комп'ютером тривала не більше 25 хв. для дітей, та 40 - 45 хв. для дорослих. 

5.4 Виробнича санітарія

5.4.1 Розрахунок штучного освітлення

Характеристика санітарно-гігієнічних умов роботи на обчислювальному центрі у приміщенні не великої площі (30  м2) робочий персонал, що проводить ремонтні роботи ПК, піддається впливові електромагнітних полів. В наслідок слабкої освітленості робочого приміщення. створюється різкий контраст між яскравістю моніторів і освітленістю навколишніх   предметів,   що   шкідливо   позначається   на  зорі працівників. У зв’язку з використанням на робочих місцях захисних екранів  для   моніторів,   на   останніх накопичується   статична електрика. Потужне джерело безперебійного живлення створює електромагнітне випромінювання підвищеної потужності. Для захисту працівників від електромагнітних випромінювань використовуються захисні екрани, що встановлюються на монітори комп'ютерів.

В Україні  встановлені гранично припустимі концентрації (ГПК), мпм3, пилу, пар і газів у повітря дотримання яких при тривалості роботи не більш 8 годин на день протягом усього виробничого стажу не приведе до захворювань або відхилень у стані здоров'я працюючих (ДСТ 12.1.005-76. Повітря робочої зони). У поняття «метеорологічні умови» повітряного середовища робочих приміщень входять: температура, відносна вологість, насиченість киснем і швидкість руху повітря.

При сприятливих умовах праці характеристика метеорологічних показників у виробничих приміщеннях і на робочому місці наступна: температура від 20°С до23°С в холодний період і від 22°С до 25°С в теплий період.

При освітленні виробничих приміщень використовують природне, штучне і сполучене освітлення:

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

- штучне - освітлення приміщень штучним світлом за допомогою електричних ламп - газорозрядних або розжарювання;

- сполучене - освітлення, при якому недостатнє природне освітлення доповнюється штучним.

Штучне освітлення може бути трьох систем: загальне, місцеве і комбіноване.

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

Для загального освітлення приміщення використовуються люмінесцентні лампи.

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

Основне розходження між ними полягає в способі здійснення повітрообміну приміщень.

Розрахунок полягає у визначенні загального світлового потоку, виборі типу ламп і світильників і визначення їх кількості.

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

                          Fзаг = (E · K · S · Z) / ( · v)      (5.4)

де Е - норма освітленості кімнати; лк;

К - коефіцієнт запасу освітленості;

S - освітлюємо площа кімнати;м2;

Z - коефіцієнт нерівномірності освітлення.

- коефіцієнт використання світлового потоку.

                  Fзаг = (400 · 1,5 · 30 · 1,1) / (0,7 · 0,8) = 35357,14 лм,

Розрахувавши Fзaг вибираю тип лампи з відповідними характеристиками (ЛД80 потужність 80Вт, світловий потік лампи 3440 Fл). Вибираю тип світильника з відповідними характеристиками (ОДОР, загального освітлення, дифузний з гратами, з перфорированим відображенням; кількість та потужність ламп 2x80; використання відкрит).

Визначаю утворюваний світильником світловий потік F, лм.

                                       F= nл · Fл,                                       (5.5)

де F - світловий потік світильника, лм;

nл - число ламп світильника, шт;

Fл - світловий потік, лм;

                                       F = 2 · 3440 = 6880лм

Обчислюю кількість світильників, nсв, штук.

                                     nсв = Fзаг / Fсв,                               (5.6)

nсв = 35357,14 / 6880 ≈ 5шт

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

Можливо також сполучення природної і механічної вентиляції (змішана вентиляція) у різних варіантах.

5.4.2 Розрахунок притоку свіжого повтря

Розрахунок припливу свіжого повітря в машиний зал на ОЦУ приміщенні застосовується витяжна природна вентиляція, та кондеціонер. Хоча всієї цієї вентиляції недостатньо для приміщення (за ДСТ 12.1.005-76 необхідно 20 м3/чол). Потрібно поліпшити повітрообмін, наприклад, застосувати кондиціонери.

Джерелом шуму в приміщенні є механічні пристрої ЕОМ. Таким чином, шум на робочому місці не повинний перевищувати припустимих рівнів, значення яких приведені в ДСТ 12.1.003-83.

Розрахунок приводимо згідно з методики. Визначаю об’єм кімнати V, м3 за формулою:

                                          V = s · h,                                      (5.1)

де s- площа; см2;

h -висота кімнати;см.

                                  V = 30 · 3 = 90 м3,

Визначаю приток свіжого повітря Qп м3/год, в кімнату.

                                          Qп = K · V,                                        (5.2)

де К - кратність повітрообміну-число,

        V - об'єм машинної кімнати, м3;

                                   Qn = 4 · 90 = 360 м3/год,

Подача повітря установкою кондиціонування Qk, м3/год, за результатами практичного досвіду приймається в 10-12 разів більше необхідного повітрообміну. Приймаємо в 10 разів.

                                         Qk = (10 - 12) · Qn,                       (5. 3)

де Qn – притік свіжого повітря.

                                  Qk = 11 · 360 = 3960 м3/год,

Заданими розрахунку потрібен один кондиціонер ІКС-12А, подача повітря якого становить 2400м3/год, що задовольняє вимогам повітрообміну.

5.5 Протипожежний захист

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

  •  халатне і необережне користування вогнем, паління, залишення без догляду нагрівальних приладів;
  •  неправильна конструкція і несправність вентиляційної системи;

До причин електричного характеру відносяться:

  •  коротке замикання;
  •  перевантаження проводів;
  •  великий перехідний опір;
  •  іскріння;
  •  статична електрика.

Пожежна безпека може бути забезпечена мірами пожежної профілактики й активним пожежним захистом.

Профілактичні методи боротьби з пожежами на ділянці передбачають:

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

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

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

5.6 Охорона навколишнього середовища

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

   Забруднення можуть бути як природного, так і антропогенного походження.

   Виділяють чотири типи забруднень: фізичні, хімічні, механічні та біологічні.

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

   Хімічні забруднення – бувають твердими, рідкими, газоподібними.

    Механічне забруднення – це різного походження тверді відходи виробництва та побуту.

   Біологічні забруднення – різноманітні організми ( бактерії, мікроби, віруси, пилок, насінневий пух тощо).

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

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

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

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


Висновок

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

Людина, що створює  Web-сторінку, з'єднує свої знання і навички зі своїм творчим потенціалом. Уміння діяти - от що відрізняє дійсного  Web-дизайнера. Для того щоб створити Web-сторінку, яка б радувала око, потрібно сполучити в собі якості художника і програміста.

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

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

При цьому були вирішені наступні приватні задачі:

- ознайомлення із сучасними Інтернет- технологіями і їхнє використання в дійсній розробці;

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

- виявлення й облік методів і способів представлення на Web-сторінках різних видів інформації, що не перешкоджає їхньої приступності;

- ознайомлення з основними правилами і рекомендаціями з розробки і створення Web-сайтов і неухильне проходження їм на практиці;

- визначення структури Web-сторінок;

- вибір стратегії розробки і створення Web-сайта.

До числа його основних відмінних рис можна віднести наступне:

- маленький розмір файлів з кодами Web-сторінок, що забезпечує їхнє швидке завантаження з Мережі на клієнтській машині;

- стиснуті формати графічних файлів, що так само позитивно впливає на зменшення розміру Web-сторінок і часу їх завантаження по каналах мережі;

- відсутність проблем сумісності з різними браузерами, наприклад такими широко розповсюдженими, як Іnternet Explorer і Opera;

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


Список літератури

1. Быстро и легко создаем, программируем, шлифуем и раскручиваем web-сайт: [учеб. пособие] / под ред. Ю.М. Алексеева. - М. : Лучшие книги, 2003. - 426 с. Шифр РНБ: 2003-7/1381

2. Вайнман Л. Динамический HTML : руководство разработчика Web-сайтов : [пер. с англ.] / Линда Вайнман, Вильям Вайнман. - Киев и др. : DiaSoft, 2001. - 449 с. Шифр РНБ: 2002-5/517

3. Дригалкин В. В. HTML в примерах. Как создать свой Web-сайт : [самоучитель] / В.В. Дригалкин. - М. и др. : Даилектика, 2003. - 190 с. Шифр РНБ: 2003-7/5304

4. Загуменнов А. П. Как раскрутить Web-сайт / Загуменнов А.П. - М. : ДМК Пресс, 2003. - 268 с. Шифр РНБ: 2003-7/2092

5. Китинг Дж. Flash MX. Искусство создания Web-сайтов : [пер. с англ.] / Джоди Китинг - М. и др. : DiaSoft, 2003. - 843 с. Шифр РНБ: 2003-7/5559

6. Лещев Д. В. Создание интерактивного web-сайта : учеб. курс / Д. Лещев. - СПб. и др. : Питер : Питер принт, 2003. - 543 с. Шифр РНБ: 2003-7/3624

7. Максимов, В. В. Технологии создания Web-сайтов / В.В. Максимов, А.В. Алексеев С.Д. Лыткин ; Якут. гос. ун-т им. М.К. Аммосова, Центр дистанц. образования ЯГУ "Ситим", Прожект Хармонии, Инк. - Якутск : Якут. фил. Изд-ва СО РАН, 2002. - 44 с. Шифр РНБ: 2003-4/18815

8. Мартинес А. Секреты создания недорогого Web-сайта : Как создать и поддерживать удачный Web-сайт, не потратив ни копейки : [пер. с англ.] / Анна Мартинес - М. : ДМК Пресс, 2002. - 414 с. Шифр РНБ: 2003-7/1111.

Додаток А

(обов'язковий)

                 Код веб-сайту


Додаток А Код веб-сайту

Код головної сторінки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Главная</title>

<style type="text/css">

<!--

body {

background-image: url(img/fon.jpg);

}    <title>Untitled</title>

   <script type="text/javascript" src="swfobject.js"></script>

   

-->

</style>

<link href="vremenne.css" rel="stylesheet" type="text/css">

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<style type="text/css">

<!--

.стиль1 {font-size: 18px}

body,td,th {

color: #FFFFFF;

font-size: 18px;

}

.стиль2 {

font-size: 20px;

font-weight: bold;

font-style: italic;

color: #FF0000;

}

#Layer1 {

position:absolute;

left:1166px;

top:1504px;

width:94px;

height:62px;

z-index:1;

}

#Layer2 {

position:absolute;

left:10px;

top:1502px;

width:84px;

height:129px;

z-index:2;

}

.стиль3 {color: #FF0000}

.стиль4 {font-size: 24}

.стиль5 {font-size: 36px}

.стиль6 {

font-size: 24px;

font-weight: bold;

}

-->

</style>

<script type="text/javascript">

function MM_CheckFlashVersion(reqVerStr,msg){

 with(navigator){

   var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);

   var isWin = (appVersion.toLowerCase().indexOf("win") != -1);

   if (!isIE || !isWin){  

     var flashVer = -1;

     if (plugins && plugins.length > 0){

       var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";

       desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;

       if (desc == "") flashVer = -1;

       else{

         var descArr = desc.split(" ");

         var tempArrMajor = descArr[2].split(".");

         var verMajor = tempArrMajor[0];

         var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");

         var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;

         flashVer =  parseFloat(verMajor + "." + verMinor);

       }

     }

     // WebTV has Flash Player 4 or lower -- too low for video

     else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

     var verArr = reqVerStr.split(",");

     var reqVer = parseFloat(verArr[0] + "." + verArr[2]);

 

     if (flashVer < reqVer){

       if (confirm(msg))

         window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";

     }

   }

 }

}

</script>

</head>

<body onLoad="MM_CheckFlashVersion('7,0,19,0','Содержимое на этой странице требует более новой версии Macromedia Flash Player. Вы хотите загрузить это теперь?

');">

<table width="100%" height="3280" border="0">

 <tr>

   <td height="244" colspan="3" align="center" valign="top" background="img/shapka.jpg"><h1><a href="file:///W|/home/diplomna.ru/www/Portal-media.fla"></a><a href="file:///C|/Documents and Settings/жекан/Рабочий стол/Portal-media.avi"></a><img src="img/0000000000000000000000000000000000000000000000000000000.gif" width="417" height="170"></h1></td>

 </tr>

 <tr>

   <td width="22%" height="2935" align="left" valign="top" class="vremenne"><p><img src="img/42682312.gif" width="222" height="216"></p>

     <p align="center"><a href="mailto:zhenja-petrikejj@mail.ru" align="center" class="стиль4"><span class="стиль3" >Жалобы писать<br>

           <span class="стиль5">вот сюда</span></span><span class="стиль5">!</span></a></p>

     <p>&nbsp;</p>

     <p><img src="img/podval_01.jpg" width="206" height="65"></p>

     <ul class="стиль1">

       <li>Eagles</li>

       <li>Guns N Roses</li>

       <li>Агата Крист</li>

       <li>Nirvana</li>

       <li>Танцы минус</li>

   </ul>      <p class="стиль1">&nbsp;</p>

   <p class="стиль1"><img src="img/podval_02.jpg" width="207" height="61"></p>

   <p class="стиль1">&nbsp;</p>

   <p class="стиль1"><img src="img/1.jpeg" width="186" height="156"></p>

   <p class="стиль1"><img src="img/2.jpg" width="180" height="120"></p>

   <p class="стиль1"><img src="img/3.jpg" width="182" height="160"></p>

   <p class="стиль1"><img src="img/4.jpg" width="179" height="160"></p>

   <p class="стиль1">&nbsp;</p></td>

   <td width="57%" align="left" valign="top" class="vremenne"><p>

     <script type="text/javascript">

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','800','height','240','src','menu','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','menu' ); //end AC code

     </script>

     <noscript>

     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="240">

       <param name="movie" value="menu.swf">

       <param name="quality" value="high">

       <embed src="menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="240"></embed>

     </object>

     </noscript>

     Добро пожаловать!      </p>

     <p align="center"> Добро пожаловать в наш музыкальный каталог! <br>

     На нашем музыкальном каталоге можно <strong>скачать музыку</strong> и <strong>скачать бесплатно альбом</strong></p>      

   <h1 align="center">Хью Лори выступит в Москве и Санкт-Петербурге</h1>

   <p> </p>

   <p><img src="http://www.music-life.ru/vhost/music-life.ru/upload/images/49.jpg" alt="Хью Лори выступит с концертами в Москве и Санкт-Петербурге" width="120" height="160" align="left">В   расписании, опубликованном на официальном сайте британского актера и   музыканта Хью Лори, появились даты его концертов, которые состоятся в   июне 2012 года в Москве и Санкт-Петербурге.</p>

   <p>В частности, 24 июня пройдет питерский концерт в БКЗ «Октябрьский», а   25 июня британец выступит в Сокольниках на концертной площадке <span lang="en-US">Magic</span> <span lang="en-US">Horse</span> <span lang="en-US">Centre</span>. Чуть ранее Хью Лори даст концерты в Украине и Белоруссии – выступления в Киеве и Минске состоятся 20 и 22 июня соответственно.</p>

   <p>В основном концертная программа Хью Лори построена на его дебютном альбоме, который вышел весной 2011 года под названием «<span lang="en-US">Let</span> <span lang="en-US">Them</span> <span lang="en-US">Talk</span>».   Стандартный сет-лист прошлогодних выступлений исполнителя включал 15   песен, однако, возможно, что для нового этапа турне в программу будут   внесены изменения.</p>

   <p>Пластинка «<span lang="en-US">Let</span> <span lang="en-US">Them</span> <span lang="en-US">Talk</span>»   была неоднозначно принята критиками, но весьма успешно продавалась,   возглавив хит-парад блюзовых альбомов  Великобритании и США.</p>

   <p>Наибольшую известность Хью Лори получил благодаря роли доктора   Грегори Хауса в телесериале «Доктор Хаус», который в 2004 году появился   на американском телеканале <span lang="en-US">Fox</span> и вскоре вошел в   десятку популярнейших телевизионных шоу США. Хотя история доктора Хауса   и растянулась на восемь сезонов, после 2008 года фильм стал терять   своих поклонников. В начале 2012 года продюсеры объявили о закрытии   проекта. Последним станет 177-й эпизод, который будет показан в мае.</p>

   <p>&nbsp;</p>

   <p><img src="img/poloska.jpg" width="814" height="20"></p>

   <p>&nbsp;</p>

   <h1 align="center">Израильский дуэт Infected Mushroom приедет в Россию</h1>

   <p> </p>

   <p><img src="http://www.music-life.ru/vhost/music-life.ru/upload/images/44.jpg" alt="Израильский дуэт Infected Mushroom выступит в России" width="120" height="160" align="left">Израильская электронная группа <span lang="en-US">Infected</span> <span lang="en-US">Mushroom</span> даст два концерта в России – 22 февраля в Москве и 23 февраля в   Санкт-Петербурге. Ранее знаменитый коллектив уже неоднократно бывал в   России.</p>

   <p><span lang="en-US">Infected</span> <span lang="en-US">Mushroom</span> – израильский электронный дуэт, образованный Эрезом Айзеном и Амитом   Дувдевани в 1998 году как транс-проект, уже со второго своего диска, под   названием «<span lang="en-US">Classical</span> <span lang="en-US">Mushroom</span>» 2000 года, начал интенсивные эксперименты со стилем. Альбом стал одним из самых знаменитых дисков группы, а трек «<span lang="en-US">Bust</span> <span lang="en-US">a</span> <span lang="en-US">Move</span>»   из него многие называют самой популярной композицией группы. Затем в   2004 году дуэт на время концертных выступлений превратился в квинтет – к   музыкантам присоединились бразильский ударник Рогерио Жардим, а также   гитаристы Том Каннингхем и Эрез Нетз.</p>

   <p>Последний на сегодняшний день, седьмой альбом коллектива «<span lang="en-US">Legend</span> <span lang="en-US">of</span> <span lang="en-US">the</span> <span lang="en-US">Black</span> <span lang="en-US">Shawarma</span>» увидел свет в сентябре 2009 года. В его записи принимал участие Джонатан Дэвис из <span lang="en-US">Corn</span>. А завершилась пластинка ремиксом группы <span lang="en-US">The</span> <span lang="en-US">Doors</span> «<span lang="en-US">Riders</span> <span lang="en-US">On</span> <span lang="en-US">The</span> <span lang="en-US">Storm</span>».</p>

   <p>В 2011 году музыканты выпустили сингл «<span lang="en-US">Pink</span> <span lang="en-US">Nightmares</span>», который сопровождается хоррор-видеоклипом. Кроме того, был анонсирован новый альбом под названием «<span lang="en-US">Army</span> <span lang="en-US">of</span> <span lang="en-US">Mushrooms</span>», который выйдет 8 мая 2012 года.</p>    <p>&nbsp;</p>

   <p><img src="img/poloska.jpg" width="812" height="20"></p>

   <p>&nbsp;</p>

   <h1 align="center">Питер Хук прокомментировал находку старых записей Joy Division</h1>

   <p> </p>

   <p><img src="http://www.music-life.ru/vhost/music-life.ru/upload/images/51.jpg" alt="Питер Хук рассказал о найденных архивных записях Joy Division" width="120" height="160" align="left">Компания   «Светлая музыка», которая является организатором концерта бас-гитариста   Питера Хука в Санкт-Петербурге, взяла у музыканта комментарии   относительно находки в подвале старого банка Манчестера архивных   материалов групп <span lang="en-US">Joy</span> <span lang="en-US">Division</span> и <span lang="en-US">New</span> <span lang="en-US">Order</span>.</p>

   <p>По его словам, найденные аудиозаписи в отделение банка отнес Роб Греттон, который является одним из основателей рекорд-лейбла <span lang="en-US">Factory</span> <span lang="en-US">Records</span>. Он решил сохранить материалы <span lang="en-US">Joy</span> <span lang="en-US">Division</span> и <span lang="en-US">New</span> <span lang="en-US">Order</span>, когда ликвидаторы начали процедуру банкротства звукозаписывающей студии.</p>

   <p>Вскоре о документах было успешно забыто, как самим Робом Греттоном,   так и банком. Впоследствии, когда старое здание выставили на продажу, во   время строительных работ стали взламывать бесхозные ячейки и таким   образом натолкнулись на пленки.</p>

   <p>Кроме того, бас-гитарист добавил, что в данный момент не имеет   доступа к найденным записям, которые оказались недоступны из-за разлада   между участниками <span lang="en-US">Joy</span> <span lang="en-US">Division</span> и <span lang="en-US">New</span> <span lang="en-US">Order</span>. Где сейчас находятся архивные аудиоматериалы, неизвестно.</p>

   <p>Из слов музыканта следует, что речь идет о записях, сделанных на фестивале <span lang="en-US">Tenth</span> <span lang="en-US">Summer</span>, который проходил в Манчестере в 1986 году. Мероприятие было организованно <span lang="en-US">Factory</span> <span lang="en-US">Records</span> для музыкантов и художников, сотрудничавших со студией. Питер Хук заметил, что среди записей были настоящие шедевры.</p>

   <p>Напомним, что в 2 и 3 марта Питер Хук вместе со своим коллективом <span lang="en-US">The</span> <span lang="en-US">Light</span> даст концерты в Москве и Санкт-Петербурге.</p>    <p><img src="img/poloska.jpg" width="812" height="20"></p>

   <p>&nbsp;</p>

   <h1 align="center">Из-за болезни гитариста группа Black Sabbath отменила европейское турне</h1>

   <p> </p>

   <p><img src="http://www.music-life.ru/vhost/music-life.ru/upload/images/50.jpg" alt="Black Sabbath отменили европейские гастроли из-за болезни гитариста" width="120" height="160" align="left">Американская группа <span lang="en-US">Black</span> <span lang="en-US">Sabbath</span> отменила свои европейские гастроли из-за болезни гитариста Тони Айомми,   у которого врачи недавно диагностировали рак. Однако музыканты дадут   один концерт в Великобритании, который состоится 10 июня на <span lang="en-US">Download</span> <span lang="en-US">Festival</span>. Об этом сообщается на странице коллектива в социальной сети <span lang="en-US">Facebook</span>.</p>

   <p>По всей видимости, в связи с отменой тура, не состоятся концерты <span lang="en-US">Black</span> <span lang="en-US">Sabbath</span> и в России, которые были запланированы на 18 и 20 мая. Всего музыканты   намеревались дать 15 концертов, включая выступления в Норвегии,   Германии, Франции, Швеции, Великобритании, Испании и других странах.</p>

   <p>Несмотря на отмену гастролей <span lang="en-US">Black</span> <span lang="en-US">Sabbath</span> дадут несколько европейских концертов, однако выступать будут под названием <span lang="en-US">Ozzy</span> &amp; <span lang="en-US">Friends</span>. Дело в том, что к Оззи Осборну на этих выступлениях присоединятся гитарист <span lang="en-US">Black</span> <span lang="en-US">Label</span> <span lang="en-US">Soceiety</span> Зак Уайлд, экс-гитарист <span lang="en-US">Guns</span> <span lang="en-US">N</span>’<span lang="en-US">Roses</span> Слэш, а также бас-гитарист <span lang="en-US">Black</span> <span lang="en-US">Sabbath</span> Гизер Батлер. Всего <span lang="en-US">Ozzy</span> &amp; <span lang="en-US">Friends</span> планируют дать 15 концертов.</p>

   <p>Напомним, что группа <span lang="en-US">Black</span> <span lang="en-US">Sabbath</span> воссоединилась 11 ноября этого года. Тогда же музыканты объявили о   европейском турне и записи нового альбома. Несмотря на болезнь Тони   Айомми работа над пластинкой продолжается, как сообщалось ранее, альбом   выйдет до конца 2012 года.</p>

   <p align="center"><img src="img/poloska.jpg" width="813" height="20"></p>

   <p align="center" class="стиль6">Все права защищены 2012 (с) Diplom.ru</p></td>

   <td width="21%" align="left" valign="top" class="vremenne"><p><img src="img/42682312.gif" width="194" height="222" align="top"></p>

   <p>&nbsp;</p>

   <p>&nbsp;</p>

   <div id="rightbar">

     <p align="right">Последние новости</p>

     <ul>

       <li>Хью Лори выступит в Москве и Санкт-Петербурге</li>

       <li>Питер Хук прокомментировал находку старых записей Joy Division</li>

       <li>Из-за болезни гитариста группа Black Sabbath отменила европейское турне</li>

       <li>Лукашенко проверит отборочный тур белорусского Евровидения-2012</li>

       <li>Хиты Уитни Хьюстон вернулись в хит-парад Billboard</li>

       <li>The Cure выступит на фестивале в Москве</li>

       <li>В подвале старого банка обнаружили записи Joy Division и New Order</li>

       <li>Израильский дуэт Infected Mushroom приедет в Россию</li>

       <li>В «Метрополитен-опере» снова поставят «Хованщину» Мусоргского</li>

       <li>Хакасский ансамбль «Улгер» выступит в Лондоне</li>

     </ul>

   </div>    <p>&nbsp;</p></td>

 </tr>

 

 <tr>

   <td height="93" colspan="3" align="center" valign="middle" background="img/stena.jpg" class="vremenne"><p class="стиль2">Наш телефон: +380954476158 <br>

     Наша електронна почта: zhenja-petrrikejj@mail.ru </p>    </td>

 </tr>

</table>

</body>

</html>

Код сторінки «Контакты»

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Главная</title>

<style type="text/css">

<!--

body {

background-image: url(img/fon.jpg);

}

-->

</style>

<link href="vremenne.css" rel="stylesheet" type="text/css">

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<style type="text/css">

<!--

.стиль1 {font-size: 18px}

body,td,th {

color: #FFFFFF;

font-size: 18px;

}

.стиль2 {

font-size: 20px;

font-weight: bold;

font-style: italic;

color: #FF0000;

}

#Layer1 {

position:absolute;

left:1166px;

top:1504px;

width:94px;

height:62px;

z-index:1;

}

#Layer2 {

position:absolute;

left:10px;

top:1502px;

width:84px;

height:129px;

z-index:2;

}

.стиль3 {color: #FF0000}

.стиль4 {font-size: 24}

.стиль5 {font-size: 36px}

-->

</style>

</head>

<body>

<table width="100%" height="1797" border="0">

 <tr>

   <td height="244" colspan="3" align="center" valign="top" background="img/shapka.jpg"><img src="img/0000000000000000000000000000000000000000000000000000000.gif" width="417" height="170"></td>

 </tr>

 <tr>

   <td width="22%" height="1409" align="left" valign="top" class="vremenne"><p><img src="img/42682312.gif" width="222" height="192"></p>

     <p align="center"><a href="mailto:zhenja-petrikejj@mail.ru" align="center" class="стиль4"><span class="стиль3" >Жалобы писать<br>

           <span class="стиль5">вот сюда</span></span><span class="стиль5">!</span></a></p>

     <p>&nbsp;</p>

     <p><img src="img/podval_01.jpg" width="206" height="65"></p>

     <ul class="стиль1">

       <li>Eagles</li>

       <li>Guns N Roses</li>

       <li>Агата Крист</li>

       <li>Nirvana</li>

       <li>Танцы минус</li>

   </ul>      <p class="стиль1">&nbsp;</p>

   <p class="стиль1"><img src="img/podval_02.jpg" width="207" height="61"></p>

   <p class="стиль1">&nbsp;</p>

   <p class="стиль1"><img src="img/1.jpeg" width="186" height="156"></p>

   <p class="стиль1"><img src="img/2.jpg" width="180" height="120"></p>

   <p class="стиль1"><img src="img/3.jpg" width="182" height="160"></p>

   <p class="стиль1"><img src="img/4.jpg" width="179" height="160"></p>

   <p class="стиль1">&nbsp;</p></td>

   <td width="57%" align="left" valign="top" class="vremenne"><p>

     <script type="text/javascript">

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','800','height','240','src','menu','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','menu' ); //end AC code

     </script>

     <noscript>

     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="240">

       <param name="movie" value="menu.swf">

       <param name="quality" value="high">

       <embed src="menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="240"></embed>

     </object>

     </noscript>

     </p>

     <p>&nbsp;</p>

     <p><img src="img/poloska.jpg" width="812" height="20"></p>

     <p align="center">Украина г. Ромны ул. Маяковского 72</p>

     <p align="center">Телефон: +380957748527 или +30685748582</p>

     <p align="center">Наша електронна почта: zhenja-petrikejjjj@mail.ru</p>

     <p align="center">&nbsp;</p>

     <p align="center"><img src="img/poloska.jpg" width="806" height="20">  </p></td>

   <td width="21%" align="left" valign="top" class="vremenne"><p><img src="img/42682312.gif" width="194" height="203" align="top"></p>

   <p>&nbsp;</p>

   <p>&nbsp;</p>

   <div id="rightbar">

     <p align="right">Последние новости</p>

     <ul>

       <li>Хью Лори выступит в Москве и Санкт-Петербурге</li>

       <li>Питер Хук прокомментировал находку старых записей Joy Division</li>

       <li>Из-за болезни гитариста группа Black Sabbath отменила европейское турне</li>

       <li>Лукашенко проверит отборочный тур белорусского Евровидения-2012</li>

       <li>Хиты Уитни Хьюстон вернулись в хит-парад Billboard</li>

       <li>The Cure выступит на фестивале в Москве</li>

       <li>В подвале старого банка обнаружили записи Joy Division и New Order</li>

       <li>Израильский дуэт Infected Mushroom приедет в Россию</li>

       <li>В «Метрополитен-опере» снова поставят «Хованщину» Мусоргского</li>

       <li>Хакасский ансамбль «Улгер» выступит в Лондоне</li>

     </ul>

   </div>    <p>&nbsp;</p></td>

 </tr>

 

 <tr>

   <td height="93" colspan="3" align="center" valign="middle" background="img/stena.jpg" class="vremenne"><p class="стиль2">Наш телефон: +380954476158 <br>

     Наша електронна почта: zhenja-petrrikejj@mail.ru </p>    </td>

 </tr>

</table>

</body>

</html>

Код сторінки «Заружная музыка»

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Главная</title>

<style type="text/css">

<!--

body {

background-image: url(img/fon.jpg);

}

-->

</style>

<link href="vremenne.css" rel="stylesheet" type="text/css">

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<style type="text/css">

<!--

.стиль1 {font-size: 18px}

body,td,th {

color: #FFFFFF;

font-size: 18px;

}

.стиль2 {

font-size: 20px;

font-weight: bold;

font-style: italic;

color: #FF0000;

}

#Layer1 {

position:absolute;

left:1166px;

top:1504px;

width:94px;

height:62px;

z-index:1;

}

#Layer2 {

position:absolute;

left:10px;

top:1502px;

width:84px;

height:129px;

z-index:2;

}

.стиль3 {color: #FF0000}

.стиль4 {font-size: 24}

.стиль5 {font-size: 36px}

.стиль6 {font-size: 24px}

.стиль7 { font-size: 24px;

font-weight: bold;

}

-->

</style>

</head>

<body>

<table width="100%" height="5074" border="0">

 <tr>

   <td height="244" colspan="3" align="center" valign="top" background="img/shapka.jpg"><img src="img/0000000000000000000000000000000000000000000000000000000.gif" width="417" height="170"></td>

 </tr>

 <tr>

   <td width="22%" height="4729" align="left" valign="top" class="vremenne"><p><img src="img/42682312.gif" width="222" height="192"></p>

     <p align="center"><a href="mailto:zhenja-petrikejj@mail.ru" align="center" class="стиль4"><span class="стиль3" >Жалобы писать<br>

           <span class="стиль5">вот сюда</span></span><span class="стиль5">!</span></a></p>

     <p>&nbsp;</p>

     <p><img src="img/podval_01.jpg" width="206" height="65"></p>

     <ul class="стиль1">

       <li>Eagles</li>

       <li>Guns N Roses</li>

       <li>Агата Крист</li>

       <li>Nirvana</li>

       <li>Танцы минус</li>

   </ul>      <p class="стиль1">&nbsp;</p>

   <p class="стиль1"><img src="img/podval_02.jpg" width="207" height="61"></p>

   <p class="стиль1">&nbsp;</p>

   <p class="стиль1"><img src="img/1.jpeg" width="186" height="156"></p>

   <p class="стиль1"><img src="img/2.jpg" width="180" height="120"></p>

   <p class="стиль1"><img src="img/3.jpg" width="182" height="160"></p>

   <p class="стиль1"><img src="img/4.jpg" width="179" height="160"></p>

   <p class="стиль1">&nbsp;</p></td>

   <td width="57%" align="left" valign="top" class="vremenne"><p>

     <script type="text/javascript">

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','800','height','240','src','menu','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','menu' ); //end AC code

</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="240">

       <param name="movie" value="menu.swf">

       <param name="quality" value="high">

       <embed src="menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="240"></embed>

     </object></noscript>

   </p>

     <h1>

       <center>

         Зарубежная mp3 музыка

       </center>

     </h1>

     

     <div align="center"><strong>Скачать бесплатно зарубежную mp3 музыку</strong> - данный раздел   содержит в себе только зарубежную музыку, которую можно скачать   бесплатно и без регистрации. Все песни, которые мы размещаем в данном   разделе проходят строгую проверку, поэтому тут размещены только   качественные mp3 файлы, которые доступны для скачивания в любое время   суток для любого меломана.      </div>

     <p align="center">&nbsp;</p>

     <p align="center">&nbsp;</p>

     <p align="center"><span class="стиль7"><img src="img/poloska.jpg" width="807" height="20"></span></p>

     <p align="center"><span class="стиль7">Все права защищены 2012 (с) Diplom.ru</span></p></td>

   <td width="21%" align="left" valign="top" class="vremenne"><p><img src="img/42682312.gif" width="194" height="203" align="top"></p>

   <p>&nbsp;</p>

   <p>&nbsp;</p>

   <div id="rightbar">

     <p align="right">Последние новости</p>

     <ul>

       <li>Хью Лори выступит в Москве и Санкт-Петербурге</li>

       <li>Питер Хук прокомментировал находку старых записей Joy Division</li>

       <li>Из-за болезни гитариста группа Black Sabbath отменила европейское турне</li>

       <li>Лукашенко проверит отборочный тур белорусского Евровидения-2012</li>

       <li>Хиты Уитни Хьюстон вернулись в хит-парад Billboard</li>

       <li>The Cure выступит на фестивале в Москве</li>

       <li>В подвале старого банка обнаружили записи Joy Division и New Order</li>

       <li>Израильский дуэт Infected Mushroom приедет в Россию</li>

       <li>В «Метрополитен-опере» снова поставят «Хованщину» Мусоргского</li>

       <li>Хакасский ансамбль «Улгер» выступит в Лондоне</li>

     </ul>

   </div>    <p>&nbsp;</p></td>

 </tr>

 

 <tr>

   <td height="93" colspan="3" align="center" valign="middle" background="img/stena.jpg" class="vremenne"><p class="стиль2">Наш телефон: +380954476158 <br>

     Наша електронна почта: zhenja-petrrikejj@mail.ru </p>    </td>

 </tr>

</table>

</body>

</html>

Код сторінки «Русская музыка »

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Главная</title>

<style type="text/css">

<!--

body {

background-image: url(img/fon.jpg);

}

-->

</style>

<link href="vremenne.css" rel="stylesheet" type="text/css">

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<style type="text/css">

<!--

.стиль1 {font-size: 18px}

body,td,th {

color: #FFFFFF;

font-size: 18px;

}

.стиль2 {

font-size: 20px;

font-weight: bold;

font-style: italic;

color: #FF0000;

}

#Layer1 {

position:absolute;

left:1166px;

top:1504px;

width:94px;

height:62px;

z-index:1;

}

#Layer2 {

position:absolute;

left:10px;

top:1502px;

width:84px;

height:129px;

z-index:2;

}

.стиль3 {color: #FF0000}

.стиль4 {font-size: 24}

.стиль5 {font-size: 36px}

.стиль6 { font-size: 24px;

font-weight: bold;

}

-->

</style>

<script type="text/javascript">

function MM_CheckFlashVersion(reqVerStr,msg){

 with(navigator){

   var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);

   var isWin = (appVersion.toLowerCase().indexOf("win") != -1);

   if (!isIE || !isWin){  

     var flashVer = -1;

     if (plugins && plugins.length > 0){

       var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";

       desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;

       if (desc == "") flashVer = -1;

       else{

         var descArr = desc.split(" ");

         var tempArrMajor = descArr[2].split(".");

         var verMajor = tempArrMajor[0];

         var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");

         var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;

         flashVer =  parseFloat(verMajor + "." + verMinor);

       }

     }

     // WebTV has Flash Player 4 or lower -- too low for video

     else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

     var verArr = reqVerStr.split(",");

     var reqVer = parseFloat(verArr[0] + "." + verArr[2]);

 

     if (flashVer < reqVer){

       if (confirm(msg))

         window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";

     }

   }

 }

}

</script>

</head>

<body onLoad="MM_CheckFlashVersion('7,0,19,0','Содержимое на этой странице требует более новой версии Macromedia Flash Player. Вы хотите загрузить это теперь?

');">

<table width="100%" height="3048" border="0">

 <tr>

   <td height="244" colspan="3" align="center" valign="top" background="img/shapka.jpg"><img src="img/0000000000000000000000000000000000000000000000000000000.gif" width="417" height="170"></td>

 </tr>

 <tr>

   <td width="22%" height="2702" align="left" valign="top" class="vremenne"><p><img src="img/42682312.gif" width="222" height="192"></p>

     <p align="center"><a href="mailto:zhenja-petrikejj@mail.ru" align="center" class="стиль4"><span class="стиль3" >Жалобы писать<br>

           <span class="стиль5">вот сюда</span></span><span class="стиль5">!</span></a></p>

     <p>&nbsp;</p>

     <p><img src="img/podval_01.jpg" width="206" height="65"></p>

     <ul class="стиль1">

       <li>Eagles</li>

       <li>Guns N Roses</li>

       <li>Агата Крист</li>

       <li>Nirvana</li>

       <li>Танцы минус</li>

   </ul>      <p class="стиль1">&nbsp;</p>

   <p class="стиль1">&nbsp;</p>

   <p class="стиль1"><img src="img/podval_04.jpg" width="204" height="69"></p>

   <p class="стиль1"><img src="img/9.jpg" width="184" height="136"></p>

   <p class="стиль1"><img src="img/99.jpg" width="181" height="184"></p>

   <p class="стиль1"><img src="img/999999.jpg" width="177" height="156"></p></td>

   <td width="57%" align="center" valign="top" class="vremenne"><p>

     <script type="text/javascript">

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','800','height','240','src','menu','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','menu' ); //end AC code

     </script>

     <noscript>

     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="240">

       <param name="movie" value="menu.swf">

       <param name="quality" value="high">

       <embed src="menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="240"></embed>

     </object>

     </noscript>

     </p>

     <h1>

       <center>

         Русская mp3 музыка

       </center>

     </h1>

     <center>

       <p><strong>Скачать бесплатно русскую mp3 музыку</strong> - в этом разделе   собран большой архив бесплатной русской музыки которую можно скачать и   прослушать online без регистрации. Многие молодые люди предпочитают   слушать в своих mp3 плеерах только качественные отечественные песни,   именно такие Вы можете скачать бесплатно на нашем сайте. Также можете   познакомится с разделом <a href="myz_cordon.html" title="зарубежные mp3"><u>зарубежная mp3 музыка</u>.</a> Для скачивания Вам не придется регистрироваться, просто выберите нужную Вам песню, прослушайте ее и затем закачайте.      </p>

       <p>&nbsp;</p>

       <p><img src="img/992.jpg" width="785" height="388"></p>

       <p>&nbsp; </p>

     </center>      

     <p align="left">

       <script type="text/javascript">

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0','width','662','height','151','id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=sound/rus/%D0%A4%D0%B8%D0%BB%D1%8C%D0%BC_001&autoPlay=false&autoRewind=true','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','FLVPlayer_Progressive' ); //end AC code

</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="662" height="151" id="FLVPlayer">

         <param name="movie" value="FLVPlayer_Progressive.swf" />

         <param name="salign" value="lt" />

         <param name="quality" value="high" />

         <param name="scale" value="noscale" />

         <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=sound/rus/%D0%A4%D0%B8%D0%BB%D1%8C%D0%BC_001&autoPlay=false&autoRewind=true" />

         <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=sound/rus/%D0%A4%D0%B8%D0%BB%D1%8C%D0%BC_001&autoPlay=false&autoRewind=true" quality="high" scale="noscale" width="662" height="151" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />        

</object></noscript>

     </p>

   <p>&nbsp;</p>

   <p><img src="img/poloska.jpg" width="800" height="20"><span class="стиль6">Все права защищены 2012 (с) Diplom.ru</span></p></td>

   <td width="21%" align="left" valign="top" class="vremenne"><p><img src="img/42682312.gif" width="194" height="203" align="top"></p>

   <p>&nbsp;</p>

   <p>&nbsp;</p>

   <div id="rightbar">

     <p align="right">Последние новости</p>

     <ul>

       <li>Хью Лори выступит в Москве и Санкт-Петербурге</li>

       <li>Питер Хук прокомментировал находку старых записей Joy Division</li>

       <li>Из-за болезни гитариста группа Black Sabbath отменила европейское турне</li>

       <li>Лукашенко проверит отборочный тур белорусского Евровидения-2012</li>

       <li>Хиты Уитни Хьюстон вернулись в хит-парад Billboard</li>

       <li>The Cure выступит на фестивале в Москве</li>

       <li>В подвале старого банка обнаружили записи Joy Division и New Order</li>

       <li>Израильский дуэт Infected Mushroom приедет в Россию</li>

       <li>В «Метрополитен-опере» снова поставят «Хованщину» Мусоргского</li>

       <li>Хакасский ансамбль «Улгер» выступит в Лондоне</li>

     </ul>

   </div>    <p>&nbsp;</p></td>

 </tr>

 

 <tr>

   <td height="93" colspan="3" align="center" valign="middle" background="img/stena.jpg" class="vremenne"><p class="стиль2">Наш телефон: +380954476158 <br>

     Наша електронна почта: zhenja-petrrikejj@mail.ru </p>    </td>

 </tr>

</table>

</body>

</html>

Код сторінки « Украинская музыка »

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Главная</title>

<style type="text/css">

<!--

body {

background-image: url(img/fon.jpg);

}

-->

</style>

<link href="vremenne.css" rel="stylesheet" type="text/css">

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<style type="text/css">

<!--

.стиль1 {font-size: 18px}

body,td,th {

color: #FFFFFF;

font-size: 18px;

}

.стиль2 {

font-size: 20px;

font-weight: bold;

font-style: italic;

color: #FF0000;

}

#Layer1 {

position:absolute;

left:1166px;

top:1504px;

width:94px;

height:62px;

z-index:1;

}

#Layer2 {

position:absolute;

left:10px;

top:1502px;

width:84px;

height:129px;

z-index:2;

}

.стиль3 {color: #FF0000}

.стиль4 {font-size: 24}

.стиль5 {font-size: 36px}

-->

</style>

<link href="textukr.css" rel="stylesheet" type="text/css">

<style type="text/css">

<!--

a:link {

color: #FF0000;

}

.стиль10 {font-size: 24px}

-->

</style></head>

<body>

<table width="100%" height="1797" border="0">

 <tr>

   <td height="244" colspan="3" align="center" valign="top" background="img/shapka.jpg"><strong><img src="img/0000000000000000000000000000000000000000000000000000000.gif" width="417" height="170"></strong></td>

 </tr>

 <tr>

   <td width="22%" height="1409" align="left" valign="top" class="vremenne"><p><img src="img/42682312.gif" width="222" height="192"></p>

     <p align="center"><a href="mailto:zhenja-petrikejj@mail.ru" align="center" class="стиль4"><span class="стиль3" >Жалобы писать<br>

           <span class="стиль5">вот сюда</span></span><span class="стиль5">!</span></a></p>

     <p>&nbsp;</p>

     <p><img src="img/podval_01.jpg" width="206" height="65"></p>

     <ul class="стиль1">

       <li>Eagles</li>

       <li>Guns N Roses</li>

       <li>Агата Крист</li>

       <li>Nirvana</li>

       <li>Танцы минус</li>

   </ul>      <p class="стиль1">&nbsp;</p>

   <p class="стиль1">&nbsp;</p>

   <p class="стиль1">&nbsp;</p>

   <p class="стиль1">&nbsp;</p>

   <p class="стиль1">&nbsp;</p>

   <p class="стиль1"><img src="img/991.jpg" width="217" height="80"></p>

   <p class="стиль1">&nbsp;</p>

   <p class="стиль1"><img src="img/8.jpg" width="188" height="183"></p>

   <p class="стиль1"><img src="img/888.jpg" width="183" height="148"></p>

   <p class="стиль1"><img src="img/8888.jpg" width="184" height="154"></p></td>

   <td width="57%" align="left" valign="top" bordercolor="#333333" class="vremenne"><h1 align="center"><script type="text/javascript">

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','800','height','223','src','menu','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','menu' ); //end AC code

</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="223">

       <param name="movie" value="menu.swf">

       <param name="quality" value="high">

       <embed src="menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="223"></embed>

     </object></noscript>

     Украинские Народные песни</h1>

     <p align="left">&nbsp;</p>

     <H1 align="center"><img src="img/gop.jpeg" width="665" height="497"></H1>

     <H1 align="left">&nbsp;</H1>

     <P align="left">&nbsp;</P>

     <P align="left">&nbsp;</P>

     <P align="left"><img src="img/poloska.jpg" width="800" height="20"></P>

   <P align="center" class="стиль10">Все права защищены 2012 (с) Diplom.ru</P>    </td>

   <td width="21%" align="left" valign="top" class="vremenne"><p><img src="img/42682312.gif" width="194" height="203" align="top"></p>

   <p>&nbsp;</p>

   <p>&nbsp;</p>

   <div id="rightbar">

     <p align="right">Последние новости</p>

     <ul>

       <li>Хью Лори выступит в Москве и Санкт-Петербурге</li>

       <li>Питер Хук прокомментировал находку старых записей Joy Division</li>

       <li>Из-за болезни гитариста группа Black Sabbath отменила европейское турне</li>

       <li>Лукашенко проверит отборочный тур белорусского Евровидения-2012</li>

       <li>Хиты Уитни Хьюстон вернулись в хит-парад Billboard</li>

       <li>The Cure выступит на фестивале в Москве</li>

       <li>В подвале старого банка обнаружили записи Joy Division и New Order</li>

       <li>Израильский дуэт Infected Mushroom приедет в Россию</li>

       <li>В «Метрополитен-опере» снова поставят «Хованщину» Мусоргского</li>

       <li>Хакасский ансамбль «Улгер» выступит в Лондоне</li>

     </ul>

   </div>    <p>&nbsp;</p></td>

 </tr>

 

 <tr>

   <td height="93" colspan="3" align="center" valign="middle" background="img/stena.jpg" class="vremenne"><p class="стиль2">Наш телефон: +380954476158 <br>

     Наша електронна почта: zhenja-petrrikejj@mail.ru </p>    </td>

 </tr>

</table>

</body>

</html>


 

А также другие работы, которые могут Вас заинтересовать

5901. Искусство воспитания. Внеклассное мероприятие 30.94 KB
  Искусство воспитания Цель занятия: выявить знания студентов по педагогике увидеть тезаурус (общее развитие) студентов, готовых к практике воспитать гуманистические, коллективистские качества студентов. Форма проведения: соревнова...
5902. Пиролиз углеводородов 105 KB
  Пиролиз углеводородов Введение Пиролиз термическое разложение органических соединений протекающий при температурах более 700...
5903. Формирование знаний и умений у учащихся педа-гогических училищ в процессе обучения художественной росписи по ткани 389.5 KB
  Ведение Актуальность темы курсовой работы обуславливается наметившимся в последние годы повышенным интересом к искусству ручной росписи, в особенности к росписи в технике батик, необходимостью обучения подрастающего поколения нашей страны в русле ...
5904. Расчет элементов транспортного терминала 305 KB
  Терминал - конечная часть некой системы, которая обеспечивает связь с внешней средой. Транспортный терминал - посадка, высадка пассажиров, погрузка и выгрузка грузов, приемка и сдача груза. Различают универсальные и специализирова...
5905. Дизайн-проект квартиры в ЖК Доминион в г. Москва 1005.5 KB
  Района Раменки Западного административного округа города Москвы имеет многолетнюю историю, благодаря чему его инфраструктура имеет устойчивый характер: школы и детские сады, банки и отделения связи, кинотеатры и рестораны, а также магази...
5906. Живописная работа в технике масляной живописи на тему Образ материнства 1.74 MB
  Введение Рождение новой жизни - одно из величайших таинств на земле, и потому имя Матери всегда окружено благоговением. Самое дорогое и родное связано с мамой. Земля, Родина, природа, красота, любовь - каждое из этих слов можно соединить со сло...
5908. РЕГУЛЯЦИЯ СИСТЕМЫ КРОВООБРАЩЕНИЯ 33.67 KB
  В зависимости от скорости развития адаптивных процессов все механизмы регуляции гемодинамики делят на 3 группы: кратковременные (нервные и гуморальные); промежуточные во времени; длительного действия...
5909. Попечение Русской Православной Церкви о пожилых людях 160.47 KB
  Актуальность исследуемой проблемы заключается в отсутствии систематического подхода, а также в неразработанности вопроса попечения Русской Православной Церкви о пожилых людях. Термин попечение был выбран не случайно, он включает полный ко...