Главная Коллекция "Revolution" Программирование, компьютеры и кибернетика Проектування та розробка веб-сайту

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

Аналіз способів проектування та засобів розробки сайту. Таблиці каскадних стилів CSS. Розробка головної сторінки, шапки сайту та навігаційної панелі. Розробка інтерактивних сторінок засобами JavaScript та PHP. Виконання підключення до бази даних.

Рубрика	Программирование, компьютеры и кибернетика
Вид	курсовая работа
Язык	украинский
Дата добавления	20.02.2019
Размер файла	3,0 M

посмотреть текст работы

скачать работу можно здесь

полная информация о работе

весь список подобных работ

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Размещено на http://www.allbest.ru/

Міністерство науки й освіти України

ОДЕСЬКИЙ НАЦІОНАЛЬНИЙ ПОЛІТЕХНІЧНИЙ УНІВЕРСИТЕТ

Інститут промислових технологій, дизайну та менеджменту

Кафедра інформаційних технологій проектування в машинобудуванні

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

з дисципліни «Веб-технології та веб-дизайн»

на тему: «Проектування та розробка веб-сайту»

Студента3 курсу МД-161 групи

Мигоренко К.О.

Керівник: Рибак О.В.

Одеса 2018

Зміст

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

Вступ
1. Аналіз способів проектування та засобів розробки сайту

1.1 Мова HTML
1.2 Таблиці каскадних стилів CSS
1.3 Мова програмування JavaScript
1.4 Мова PHP

2. Розробка веб-сайту

2.1 Розробка головної сторінки, шапки сайту та навігаційної панелі
2.2 Розробка форми реєстрації
2.3 Розробка інтерактивних сторінок засобами JavaScript та PHP
2.4 Об'єднання розроблених сторінок
2.5 Виконання підключення до бази даних

Висновок
Джерела інформації

Вступ

У даній роботі розглядаються питання способів розробки та проектування сайту. Проведен аналіз головних способів розробки веб-сторінок: для створення сучасних сайтів зазвичай використовуються: HTML, CSS, JavaScript, PHP і реляційна база даних MySQL.

Клієнтське середовище (браузер, наприклад Internet Explorer) є переднім краєм роботи програми. У цьому середовищі відображаються HTML-сторінки у вікні і обслуговуються історії сеансів HTML-сторінок, що відображаються в браузері протягом сесії.

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

При роботі з сервером необхідні PHP і реляційна база даних MySQL.

1. Аналіз способів проектування та засобів розробки сайту

1.1 Мова HTML

Мова HTML (від англ. HyperText Markup Language - «мова розмітки гіпертексту») служить для створення веб-сторінок. Більшість сайтів створені саме за допомогою HTML.

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

Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами. Під час відображення документа в браузері самих тегів не видно, але вони впливають на зовнішній вигляд документа. Усі теги починаються із символу < і закінчуються символом > -- їх називають кутовими дужками. Після відкритої кутової дужки розміщують ключове слово, яке вказує на призначення тегу. Регістр у назвах тегів не має значення, хоча загальновживаними є великі літери.

Приклади тегів HTML: <TITLE>, <BODY>, <TABLE>, </A>, <IMG>, </CENTER>. Зазвичай тег впливає на певний фрагмент документа, наприклад на абзац. У таких випадках використовують пару тегів (відкривальний і закривальний). Перший із них задає ефект, а другий -- припиняє його дію. Закривальний тег починається з символу / (слеш). Приклади парних тегів: <HTML></HTML>,<В></В>, <HEAD></HEAD>, <НЗ></Н3>, <ADDRESS></ADDRESS>,<LI></LI>. Деякі теги задають разовий ефект у місці своєї появи, тоді закривальний тег не потрібен. Приклади одинарних тегів: <BR>, <HR>,<МЕТА>, <BASEFONT>, <FRAME>, <INPUT>. Якщо між кутовими дужками помилково вказане ключове слово, яке відсутнє в мові HTML, то весь тег буде проігноровано. Відкривальні теги можуть містити атрибути, які впливають на ефект, створюваний тегом.

Атрибути -- це додаткові ключові слова, відокремлені від основного ключового слова тегу та один від одного символами пробілу. Для деяких атрибутів слід задавати значення, яке відділяють від імені атрибута символом =. Значення атрибута беруть у лапки, але в багатьох випадках їх можна і не ставити. Закривальні теги атрибутів не містять. Приклади тегів з атрибутами:

<BODYBGCOLOR="#000000" TEXT="#FFFFFF"BACKGROUND="rain.gif">

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

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

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

* Починається з тегу <HTML>і закінчується відповідним йому тегом </HTML>, Така пара тегів повідомляє браузеру, що це HTML-документ.

* Містить два розділи -- заголовків і тіла документа (розміщуються саме в такому порядку). Розділ заголовків помічений тегами<HEAD> і </HEAD> та містить Інформацію про документ загалом. Зокрема, він повинен містити в собі теги <TITLE> та</TITLE>, між якими розміщено текст, що відображатиметься в заголовку вікна браузера. Крім цього, у розділі заголовків може міститися тег <МЕТА>, призначений для технічного опису документа (це інформація для пошукових програм), а також тег <STYLE> для опису стилів (наборів параметрів форматування), використаних у документі.

* Сам текст документа міститься в його тілі, яке розташоване між тегами <BODY> та </BODY>.

<HTML>

<HEAD>

<ТІТLЕ>Заголовок документа</ТІТLЕ>

</HEAD>

<BODY>

Текст, що відображається на екрані

</BODY>

</HTML>

1.2 Таблиці каскадних стилів CSS

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

Стилі дають змогу позиціювати елементи сторінки (наприклад, тексти і графіку), задаючи координати. Крім того, таблиці стилів часто використовують під час створення так званих динамічних сторінок.

Таблиці каскадних стилів (CSS, Cascading Style Sheets) містять параметри форматування частини або всього тексту веб-сторінки. Якщо таку таблицю підключено, то у тегах можна просто вказувати посилання на неї, а не задавати велику кількість атрибутів. У цьому випадку стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету.

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

Наприклад:

Р {font-size: 40pt; color: green; font-family: "ComicSansMS"}

Таблиці каскадних стилів дають змогу отримати результати, яких неможливо досягнути звичайними засобами HTML. У наведеному прикладі встановлено розмір шрифту 40 пунктів, хоча в мові HTML за допомогою атрибута SIZE можна задати для шрифту максимальний розмір 7, що відповідає 36 пунктам.

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

Параметрів форматування, які можна задавати за допомогою стилів,

досить багато. Це, зокрема:

* background -- колір тла;

* font-family -- стиль шрифту (гарнітура);

* font-size -- розмір шрифту;

* font-weight -- жирність шрифту;

* color -- колір шрифту;

* text-decoration -- оздоблення тексту;

* text-align -- вирівнювання тексту;

* margin-top -- відступ від верхнього рядка абзацу;

* line-height -- міжрядкова відстань.

Застосування каскадних стиліву HTML-документах

Є три способи зв'язку каскадних стилів із HTML-документом: підключення зовнішньої таблиці стилів; розташування опису стилів у розділі HEAD документа; задавання властивостей стилів безпосередньо в тегах абзаців чи заголовків.

Підключення зовнішньої таблиці стилів

Зовнішня таблиця стилів (External Style Sheet) -- це текстовий файл із розширенням.css. Його підключають до HTML-документа за допомогою тегу, який записують у розділі, наприклад:

Атрибути REL та TYPE вказують браузеру на те, що сторінка використовує таблиці каскадних стилів. Атрибут HREF задає адресу файлу (mystyle.css).

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

Використання стилів внутрішньої таблиці

Внутрішню таблицю стилів (Embedded Style Sheet) розміщують безпосередньо в розділі HEAD, у блоці, який обмежений тегами <STYLE> та </STYLE>.

<STYLE>

Тег1 {властивість11: значення11 ; властивість12: значення12 ;...;властивість1n: значенняі1n }

Тег2 {властивість21: значення21 ; властивість22: значення22 ;...;властивість2m: значення2m}

</STYLE>

Вбудовані стилі

Вбудовані стилі (Inline Styles) вставляють у теги заголовків <Н1>...<Нб>, абзацу <Р>, тіла <BODY>, а також у теги <DIV>, <IMG> тощо за допомогою атрибута STYLE, в якому перелічують властивості та їх значення. Наприклад:

<Р STYLE="font-size: 48pt; color: yellow">

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

1.3 Мова програмування JavaScript

Стандартною мовою для веб-скриптів є JavaScript -- мова програмування, яка дає змогу вбудовувати виконувані модулі в документи, написані в кодах HTML. Програму, створену мовою JavaScript, інтерпретує браузер під час завантаження документа, в який вміщено її код.

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

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

Основні області застосування мови JavaScript:

* динамічне створення документа HTML за допомогою скриптів;

* перевірка достовірності полів форм HTML до передавання їх на сервер;

* локальне введення інформації для керування програмою;

* надання користувачу можливості вибору операцій, виконуваних браузером;

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

* локальне опрацювання форм, введення інформації користувачем.

Програмний код JavaScript можна помістити в документ HTML у три способи:

* окремі скрипти розмістити в тілі документа, там, де в їхньому використанні є потреба;

* скрипти (функції, оголошення об'єктів) розмістити у заголовній частині документа між тегами <HEAD>...</HEAD>, а використовувати їх у тілі документа;

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

У першому випадку для того, щоб повідомити браузер про використання JavaScript, у тіло HTML-документа потрібно вставити парний тег <SCRIPT> з атрибутом LANGUGE="JavaScript":

програма на JavaScript

</SCRIPT>Оскільки браузер Internet Explorer здатний розпізнавати програму на JavaScript, вміщену між тегами <SCRIPT>...</SCRIPT>, для нього зазначений атрибут задавати необов'язково. Для відвідувачів сторінки, у яких встановлений браузер, що не підтримує JavaScript, після тегів <SCRIPT>...</SCRIPT> вміщують теги <NOSCRIPT>...</NOSCRIPT>, які описують вміст та вигляд безскриптового варіанта сторінки.

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

1.4 Мова PHP

PHP (PHP Hypertext Preprocessor) - серверна мова створення додатків, орієнтована на веб-розробку. PHP код може бути впроваджений в HTML-сторінку і буде виконуватися при кожному її відвідуванні. Код PHP інтерпретується веб-сервером і генерує HTML код або інший вивід (наприклад, графіку), який відсилається браузеру користувача. Так як PHP інтерпретована мова, вона не вимагає компіляції (перетворення в машинний код у файлі.exe) - програми зберігаються на веб-сервері як звичайні текстові файли.

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

РНР набув великої популярності завдяки наступним перевагам.

· Швидкодія Web-вузлів. Оскільки код РНР вбудовується в HTML-сторінку, час, необхідний для обробки і завантаження Web-сторінки, досить малий.

· Відкритість.

· Простота використання. Синтаксис РНР досить простий для розуміння. При цьому РНР розроблений таким чином, щоб бути легко вбудовуваним у HTML-сторінки.

· Універсальність. PHP можна використовувати під управлінням різних операційних систем, які включають Windows, Linux, Mac OS і більшість систем сімейства Unix.

· Багатостороння технічна підтримка. Ви можете відвідати офіційний Web-вузол РНР (www.php.net), де пропонується великий список тем для обговорення, що покриває різні питання, такі як основи FHP,РНР під Windows або бази даних і РНР.

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

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

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

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

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

РНР є серверною мовою (server-side language) для написання сценаріїв. Це означає, що сценарій виконується на сервері (комп'ютер, на якому встановлений Web-вузол). У цьому полягає відмінність від іншої популярної мови для створення динамічних Веб-сторінок - JavaScript. Сценарій, написаний на JavaScript, виконується клієнтським браузером. Таким чином, JavaScript- клієнтська мова (client-side language).

Оскільки сценарій РНР виконується на сервері, він дозволяє динамічно генерувати HTML код Веб-сторінки. Таким чином, кожен користувач може бачити "свою" Веб-сторінку.

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

· Взаємодія з HTML-формами. РНР дозволяє відображати дані HTML-форм і обробляти інформацію, введену користувачем в браузері.

· Взаємодія з базами даних. РНР дозволяє взаємодіяти з базами даних для зберігання інформації, введеної користувачем, або вилучення інформації для її відображення.

· Створення безпечних Web-сторінок. РНР дозволяє розробникам створювати безпечні Web-сторінки, що вимагають введення достовірних імені користувача і пароля перед виведенням вмісту Web-сторінки.

2. Розробка веб-сайту

2.1 Розробка головної сторінки, шапки сайту та навігаційної панелі

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

Веб-сайти поділяють на статичні та динамічні відповідно до способу наповнення сторінок матеріалом.

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

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

У даній курсовій роботі розроблюється динамічний сайт.

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

1. Планування.

2. Створення інформаційної архітектури.

3. Дизайн.

4. Реалізація.

5. Маркетинг.

6. Оцінювання і підтримка.

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

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

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

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

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

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

Рисунок 1 Вид головної сторінки

Код сторінки:

<html>

<head>

<title>Головна сторінка</title>

</head>

<h1><font face='Tahoma'>Предметна область <font color='#cc2200'>«Друкарня»</font></font></h1>

<h3><i><font face="Lucida Sans Unicode">Види діяльності:</font></i></h3>

<font face='Comic Sans MS'size='+1'>ведення договорів на виготовлення продукції;

<br>

закупівля й витрата сировини;

<br>

розподіл робіт між співробітниками;

<br>

відвантаження готової продукції;

<br>

оплата замовлень і роботи співробітників;

<br>

облік устаткування (закупівля, переоцінка, переміщення, списання).

</font>

<br>

</body>

</html>

Рисунок 2 Шапка сайту

Код сторінки:

<html>

<head>

<title>Файл top.html - шапка сайта</title>

</head>

<h1>Друкарня "Journey"</h1>

<marquee behavior="scroll" direction="left" style="color: #992233; font-size: 20px; font-weight: bolder; text-shadow: #000000 0px 1px 1px;">Виконала Мигоренко К.О.</marquee>

</body>

</html>

Рисунок 3 Навігаційна панель

Код сторінки:

<html>

<head>

<title>Файл menu.html - меню сайта</title>

</head>

<ul>

<li><a target="main" href="content.html">Головна сторінка</a></li>

<li><a target="main" href="tovar.html">Продукція</a></li>

<li><a target="main" href="form.html">Замовлення</a></li>

<li><a target="main" href="http://localhost/K_R/DB.php">База даних</a></li>

</ul>

</body>

</html>

2.2 Розробка форми реєстрації

Рисунок 4 Форма реєстрації

Код сторінки:

<html>

<head>

</head>

var tel = document.getElementById("tel").value;

var mail = document.getElementById("mail").value;

function validate(){

if(tel.length < 10){

window.alert("Введіть, будь ласка, свій телефонний номер");

}

if (mail == "") {

alert("Введіть Адресу електронної пошти");

return false

}

if (mail.indexOf(".") == -1) {

alert("Немає символу\".\"");

return false

}

if((mail.indexOf(",")>=0)||(mail.indexOf(";")>=0)||(mail.indexOf(" ")>=0)){

alert("Адреса електронної пошти була введена неправильно.");

return false

}

dog = mail.indexOf("@");

if (dog == -1) {

alert("Немає символу\"@\".");

return false

}

if ((dog < 1) || (dog > mail.length - 5)) {

alert("Адреса электронної пошти була введена неправильно.");

return false

}

if ((mail.charAt(dog - 1) == '.') || (mail.charAt(dog + 1) == '.')) {

alert("Адреса електронної пошти була введена неправильно.");

return false

}

alert("Адреса електронної пошти була введена ПРАВИЛЬНО!");

}

function checkSymbol(kc)

{

if(kc < 48 || kc >57)

return false;

return true;

}

</script>

<h2>Будь ласка, заповніть анкету</h2>

<p>

</p>

<p>

<label>Прізвище</label>

</p>

<p>

</p>

<p>

<label>Район проживання</label>

<option value="first" selected="selected">Київський</option>

<option value="second">Малиновський</option>

<option value="third">Приморський</option>

<option value="fourth">Суворовський</option>

</select>

</p>

<p>

<label>Email</label>

</p>

<p>

<label>Телефон</label>

</p>

<p>

<label>Пароль</label>

</p>

<p>

<label>Підтвердіть пароль</label>

</p>

<p>

<label>Коментар:</label><br>

</p>

<p>

</p>

</form>

</body>

</html>

2.3 Розробка інтерактивних сторінок засобами JavaScript та PHP

Рисунок 5 Сторінка з розрахунком вартості товару

Код сторінки:

<html>

<head>

output {color:#cc2200}

</style>

</head>

function changeText0(){

var rezult1 = 1;

rezult1 *= parseFloat(document.getElementById('a1').value);

rezult1 *= parseFloat(document.getElementById('b1').value);

document.getElementById('rezult1').innerHTML = rezult1;

var rezult2 = 1;

rezult2 *= parseFloat(document.getElementById('a2').value);

rezult2 *= parseFloat(document.getElementById('b2').value);

document.getElementById('rezult2').innerHTML = rezult2;

var rezult3 = 1;

rezult3 *= parseFloat(document.getElementById('a3').value);

rezult3 *= parseFloat(document.getElementById('b3').value);

document.getElementById('rezult3').innerHTML = rezult3;

var rezult4 = 1;

rezult4 *= parseFloat(document.getElementById('a4').value);

rezult4 *= parseFloat(document.getElementById('b4').value);

document.getElementById('rezult4').innerHTML = rezult4;

var rezult5 = 1;

rezult5 *= parseFloat(document.getElementById('a5').value);

rezult5 *= parseFloat(document.getElementById('b5').value);

document.getElementById('rezult5').innerHTML = rezult5;

var rezult6 = 0;

rezult6 += parseFloat(document.getElementById('rezult1').value);

rezult6 += parseFloat(document.getElementById('rezult2').value);

rezult6 += parseFloat(document.getElementById('rezult3').value);

rezult6 += parseFloat(document.getElementById('rezult4').value);

rezult6 += parseFloat(document.getElementById('rezult5').value);

document.getElementById('rezult6').innerHTML = rezult6;

}

var d=new Date();

var day=d.getDate();

var month=d.getMonth() + 1;

var year=d.getFullYear();

document.write(day + "." + month + "." + year);

function checkTime(i)

{

if (i<10)

{

i="0" + i;

}

return i;

}

var t = new Date();

document.write("<br>");

document.write("Ви зайшли на цю сторінку о ");

document.write(checkTime(t.getHours()));

document.write(".");

document.write(checkTime(t.getMinutes()));

document.write(".");

document.write(checkTime(t.getSeconds()));

</script>

<h1><font face='Tahoma'>Розрахунок вартості товару</font></h1>

<h4>Візитки</h4>

<br>

Ціна <input id="a1" type="number" value="1.5" disabled> Кількість <input id="b1" type="number" value="0">

= <output id="rezult1"></output> грн

<br>

<h4>Плакати</h4>

<br>

Ціна <input id="a2" type="number" value="5" disabled> Кількість <input id="b2" type="number" value="0">

= <output id="rezult2"></output> грн

<br>

<h4>Буклети</h4>

<br>

Ціна <input id="a3" type="number" value="15" disabled> Кількість <input id="b3" type="number" value="0">

= <output id="rezult3"></output> грн

<br>

<h4>Листівки</h4>

<br>

Ціна <input id="a4" type="number" value="7" disabled> Кількість <input id="b4" type="number" value="0">

= <output id="rezult4"></output> грн

<br>

<h4>Календарі</h4>

<br>

Ціна <input id="a5" type="number" value="10" disabled> Кількість <input id="b5" type="number" value="0">

= <output id="rezult5"></output> грн

<br>

<h2>Усього: <output id="rezult6"></output> грн</h2>

</form>

</body>

</html>

Рисунок 6 Сторінка з переліком товару

Код сторінки:

<html>

<head>

td {font-family:Verdana, Arial, Helvetica, Tahoma, sans-serif;font-size:12pt}

th {font-size:14pt; color:#cc2200}

body {background-image: url(jorf.jpg)}

</style>

function showCustomMenu(sign, x, y) {

var cm = document.getElementById("custommenu");

if(sign)

cm.style.visibility = 'visible';

else

cm.style.visibility = 'hidden';

cm.style.position = 'absolute';

cm.style.left = x;

cm.style.top = y;

}

function doAction(actionType)

{

switch(actionType) {

case "copy":

break;

case "close":

window.close();

break;

case "fontIncrease":

document.body.style.fontSize="20pt";

document.body.table.td.style.fontSize = "20pt";

break;

case "fontDecrease":

document.body.style.fontSize="9pt";

document.getElementById("th").style.fontSize = "9pt";

break;

case "changeBkg":

document.body.style.backgroundImage="url('altf.jpg')";

break;

}

</script>

</head>

<body text="#992233" oncontextmenu="showCustomMenu(true,event.clientX, event.clientY); return false;"

onclick="showCustomMenu(false, event.clientX, event.clientY); return false;">

<h1>Наша продукція</h1>

<tr>

<th width="200" height="100">Візитки</th>

<td>

Уявити своє життя без візитних карток сьогодні просто неможливо.

Їх вручають при зустрічах, передають кур'єром, докладають до подарунків, документам.

Така картка одночасно несе інформаційну і рекламну функцію. Вона повинна залучати людей і пропонувати скористатися зазначеною інформацією.

</td>

</tr>

<tr>

<th>Плакати</th>

<td>

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

</td>

</tr>

<tr>

<th>Буклети</th>

<td>

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

</td>

</tr>

<tr>

<th>Листівки</th>

<td>

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

</td>

</tr>

<tr>

<th id>Календарі</th>

<td>

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

</td>

</tr>

</table>

<div style="background-Color: #660000; color: black; font-Size: 10pt; font-family:Verdana, Arial, Helvetica, Tahoma, sans-serif;" onclick="doAction('copy');">Скопіювати вміст документа</div>

<div style="background-Color: #660000; color: black; font-Size: 10pt; font-family:Verdana, Arial, Helvetica, Tahoma, sans-serif;" onclick="doAction('close');">Закрити вікно</div>

<div style="background-Color: #660000; color: black; font-Size: 10pt; font-family:Verdana, Arial, Helvetica, Tahoma, sans-serif;" onclick="doAction('fontIncrease');">Збільшити шрифт</div>

<div style="background-Color: #660000; color: black; font-Size: 10pt; font-family:Verdana, Arial, Helvetica, Tahoma, sans-serif;" onclick="doAction('fontDecrease');">Зменшити шрифт</div>

<div style="background-Color: #660000; color: black; font-Size: 10pt; font-family:Verdana, Arial, Helvetica, Tahoma, sans-serif;" onclick="doAction('changeBkg');">Змінити фон</div>

</div>

<form>

</form>

</body>

</html>

Рисунок 7 Сторінка сортування масиву

Код сторінки:

<html>

<head>

</head>

</html>

<?php

$Mas = array('Візитки','Плакати','Буклети','Листівки','Календарі');

asort($Mas);

print_r($Mas);

Рисунок 8 Сторінка перевертання масиву

Код сторінки:

<html>

<head>

</head>

</html>

<?php

$Mas = array('Візитки','Плакати','Буклети','Листівки','Календарі');

array_reverse($Mas);

print_r($Mas);

Рисунок 9 Сторінка перемішування масиву

Код сторінки:

<html>

<head>

</head>

</html>

<?php

$Mas = array('Візитки','Плакати','Буклети','Листівки','Календарі');

shuffle($Mas);

print_r($Mas);

2.4 Об'єднання розроблених сторінок

Рисунок 10 Об'єднання сторінок за допомогою фреймів

Код сторінки:

<html>

<head>

<title>Фрейми</title>

</head>

</frameset>

<noframes>Ваш переглядач не підтримує відображення фреймів</noframes>

</frameset>

</html>

Рисунок 11 PHP-сторінка з підключеною базою даних

2.5 Виконання підключення до бази даних

Код сторінки:

<html>

<head>

</head>

<?php

header('Content-Type: text/html; charset=utf-8');

$host = 'localhost';

$database = 'mydb';

$user = 'root';

$password = 'root';

$link = mysqli_connect($host, $user, $password, $database)

or die("Ошибка ". mysqli_error($link));

mysqli_set_charset($link,'utf8');

$query = "SHOW TABLES";

$res = mysqli_query($link,$query);

if(!$res) exit("Произошла ошибка: ".mysqli_error());

if(mysqli_num_rows($res))

{

while($result = mysqli_fetch_array($res))

{

echo $result[0]."<br />";

}

$sql = "SELECT * FROM `продукція`";

$result = mysqli_query($link, $sql) or die("Ошибка ". mysqli_error($link));

if($result)

{

echo "<h3>продукція:</h3>";

$rows = mysqli_num_rows($result);

echo "<table><tr><th>Код_Продукції</th><th>Вид_Продукції</th><th>Розмір</th><th>Колір</th><th>Вид_Друку</th><th>Папір</th><th>Вартість_Продукції</th></tr>";

for ($i = 0 ; $i < $rows ; ++$i)

{

$row = mysqli_fetch_row($result);

echo "<tr>";

for ($j = 0 ; $j < 7 ; ++$j) echo "<td>$row[$j]</td>";

echo "</tr>";

}

echo "</table>";

mysqli_free_result($result);

}

$sql = "SELECT * FROM `замовлення`";

$result = mysqli_query($link, $sql) or die("Ошибка ". mysqli_error($link));

if($result)

{

echo "<h3>замовлення:</h3>";

$rows = mysqli_num_rows($result);

echo "<table><tr><th>№_Замовлення</th><th>КЗ</th><th>Дата_Замовлення</th><th>Вид_Оплати</th><th>Менеджер</th><th>Дизайнер</th></tr>";

for ($i = 0 ; $i < $rows ; ++$i)

{

$row = mysqli_fetch_row($result);

echo "<tr>";

for ($j = 0 ; $j < 6 ; ++$j) echo "<td>$row[$j]</td>";

echo "</tr>";

}

echo "</table>";

mysqli_free_result($result);

}

$sql = "SELECT * FROM `замовники`";

$result = mysqli_query($link, $sql) or die("Ошибка ". mysqli_error($link));

if($result)

{

echo "<h3>замовники:</h3>";

$rows = mysqli_num_rows($result);

echo "<table><tr><th>КЗ</th><th>Найменування</th><th>Телефон</th><th>email</th><th>Поштова_Адреса</th></tr>";

for ($i = 0 ; $i < $rows ; ++$i)

{

$row = mysqli_fetch_row($result);

echo "<tr>";

for ($j = 0 ; $j < 5 ; ++$j) echo "<td>$row[$j]</td>";

echo "</tr>";

}

echo "</table>";

mysqli_free_result($result);

}

$sql = "SELECT * FROM `вміст_замовлень`";

$result = mysqli_query($link, $sql) or die("Ошибка ". mysqli_error($link));

if($result)

{

echo "<h3>вміст_замовлень:</h3>";

$rows = mysqli_num_rows($result);

echo "<table><tr><th>№_Замовлення</th><th>Код_Продукції</th><th>Кількість</th></tr>";

for ($i = 0 ; $i < $rows ; ++$i)

{

$row = mysqli_fetch_row($result);

echo "<tr>";

for ($j = 0 ; $j < 3 ; ++$j) echo "<td>$row[$j]</td>";

echo "</tr>";

}

echo "</table>";

mysqli_free_result($result);

}

$sql = "SELECT * FROM `готовність`";

$result = mysqli_query($link, $sql) or die("Ошибка ". mysqli_error($link));

if($result)

{

echo "<h3>готовність:</h3>";

$rows = mysqli_num_rows($result);

echo "<table><tr><th>№_Замовлення</th><th>КЗ</th><th>Офіс</th><th>Дата_Готовності</th><th>Готовність</th></tr>";

for ($i = 0 ; $i < $rows ; ++$i)

{

$row = mysqli_fetch_row($result);

echo "<tr>";

for ($j = 0 ; $j < 5 ; ++$j) echo "<td>$row[$j]</td>";

echo "</tr>";

}

echo "</table>";

mysqli_free_result($result);

}

mysqli_close($link);

</body>

</html>

Висновок

Результатом розробки даної курсової роботи став сайт за предметною областю «Магазин», який було створено на основі базових основ веб-дизайну.

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

Основні складові поняття веб-дизайну:

* Подання -- швидкість та надійність відображення сайту в мережі Інтернет.

* Технологи -- це засоби форматування веб-сторінок та надання їм інтерактивності, наприклад, мови HTML та JavaScript, таблиці CSS, анімація Flash.

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

* Зміст -- форма подання та спосіб організації наповнення сайту: стиль написання тексту, його упорядкування, форматування та структурування за допомогою мови HTML. Веб-дизайн у контексті художнього дазайну 289

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

Сайт налічує 5 сторінок, при створенні яких використовувались HTML,CSS,JavaScript,PHP,MySQL.

Джерела інформації

1. Гончаров А. Самоучитель HTML. Питер. 1999. 239 с.

2. Бернс, Д.JavaScript / Д. Бернс. СПб.: Вильямс, 2001 г. 464 стр.

3. Гудман,Д.JavaScript. Библия пользователя, 5-е издание/ Д. Гудман. М.: «Диалектика», 2006р. 1184 с.

4. Лещев,Д. HTML: [Электрон. ресурс]. Режим доступа: http://www.victoria.lviv.ua/html/km/5.html.

5. Хейз, Д. Освой самостоятельно HTML [Текст] / Д. Хейз. СПб.: Вильямс, 2007р. 272 с.

Размещено на Allbest.ru

...

курсовая работа "Проектування та розробка веб-сайту" скачать

Подобные документы

Розробка мультимедійного web-сайту
Опис інформаційного забезпечення системи для розробки сайту. Технічне завдання на розробку web-сторінки. Комплект засобів, проектування та завантаження сторінок. Тестування сайту в різних браузерах. Розрахунок собівартості та ціни програмного продукту.

дипломная работа [1,8 M], добавлен 14.05.2012
Розробка веб-сайту для ТОВ "Поліська будівельна компанія"
Вибір архітектури та інструментальних засобів розробки. Розробка модуля для перегляду сторінок сайту, доступного, зручного інтерфейсу системи адміністрування. Створення бази даних. Опис механізмів передачі даних між сторінками. Реалізація форуму на сайті.

дипломная работа [7,1 M], добавлен 24.09.2012
Проектування та розробка віджету розкладу занять для ОС Android
Поняття сайту як системи електронних документів (файлів даних, коду) приватної особи або організації в комп'ютерній мережі. Визначення засобів для створення сторінки в Інтернеті, вимоги до зовнішнього вигляду та функцій. Особливості розробки макету сайту.

курсовая работа [2,1 M], добавлен 17.12.2015
Створення веб-сайту інтернет-магазину на базі CMS Joomla
Обґрунтування потреби, поняття, класифікація, проектування та етапи розробки веб-сайту. Вибір програмних засобів, розробка інтерфейса і бази даних. Динамічна мова розмітки гіпертекстових документів DHTML. Розміщення категорій товарів в on-line магазині.

дипломная работа [1,5 M], добавлен 04.08.2009
Розробка web-сайту "Персональний сайт трейдера"
Особливості програмування web-орієнтованих інформаційних систем. Етапи створення web-сайту, вибір домену та хостингу. Опис програмного та апаратного середовища функціонування об’єкта проектування. Аналіз і вибір засобів для проектування web-додатків.

курсовая работа [11,2 M], добавлен 03.06.2019
Розробка сайту-візитки комерційного закладу
Структура, характеристики та принципи розробки сучасного сайту-візитки. Розробка дизайну. Характеристика сайту кав’ярні. Основні вимоги до програми та до інтерфейсу. Опис проектних рішень, інструментів та підходів до розробки з обґрунтуванням їх вибору.

дипломная работа [3,2 M], добавлен 19.03.2017
Розробка сайту "Портал Новин" як віртуальна подія в інформаційному суспільстві
Види сайтів та характеристика сайту-візитки, сайту-магазину, новинного сайту та соціальних мереж. HTML та CSS як основа шаблону сайту та стилю оформлення. Розробка структури та вибір дизайну порталу новин, його програмний код та вигляд у браузері.

дипломная работа [2,4 M], добавлен 20.10.2013
Використання комп'ютерної графіки під час розробки сайту міста Жмеринки
Розробка динамічних та статичних зображень для сайту за допомогою відеоредактора Adobe After EffectCS6 та графічного редактора Adobe Photosop CS6. Розробка структури сайту. Багатоваріантний аналіз розв’язку задачі. Створення анімованого логотипу.

курсовая работа [1,8 M], добавлен 07.12.2014
Розробка Web-сайту компанії "Гранд Авто"
Загальна характеристика особливостей алгоритму просування сайту. Розробка основних елементів фірмового стилю, що складають пакет рекламної кампанії. Етапи розробки Web-сайту компанії "Гранд Авто". Особливості програмної частини і структури сайту.

дипломная работа [3,3 M], добавлен 26.02.2012
Розробка інформаційного веб-сайту з використанням мови програмування PHP
Побудова апаратної структури для серверу, встановлення операційної системи і програмного забезпечення, розробка веб-сайту. Розрахунок річної суми економічного ефекту від впровадження комп’ютерної мережі. Проектування освітлення, засобів пожежогасіння.

дипломная работа [5,6 M], добавлен 02.07.2015
Розробка соціальної мережі "Social network Artput"
Опис механізмів передачі даних між сторінками. Розробка доступного та зручного інтерфейсу веб-сайту компанії "Artput" для відвідувачів сайту і для адміністратора. Установка Apache 1.3.29 та PHP 4.3.4 під Windows XP. Структура веб-сервера та веб-сайту.

дипломная работа [5,0 M], добавлен 24.09.2012
Створення сайту в середовищі розробки CMS Joomla
Характеристика приватного підприємства "ІнтерТех". Опис та оцінка діяльності підрозділів інформатизації підприємства. Розробка і модифікація веб-сайту для рекламування послуг і товарів даної організації. Вибір мови CMS Joomla та установка бази даних.

отчет по практике [1,6 M], добавлен 14.07.2015
Створення Інтернет-ресурсу для інформаційного забезпечення пілотного інвестиційного проекту "Агрогород. Луганск"
Мова розмітки гіпертекстових сторінок HTML. Каскадні таблиці стилів CSS. Розробка інформаційного Web-сайту: меню навігації, структура та інтерфейс сайту. Тестування, впровадження та тестування розробленого проекту. Безпека умов праці при використанні ПК.

дипломная работа [1,3 M], добавлен 20.05.2012
Розробка навчального web-сайту "Learning English"
Вивчення особливостей використання всесвітньої мережі Інтернет, адресації інформації, вірусних загроз. Розробка та підготовка сайту до експлуатації за допомогою візуального редактора Front Page. Характеристика дизайну та структури створеного web-сайту.

курсовая работа [1,4 M], добавлен 22.11.2012
Процес розробки Web-сайту
Internet. Web-сайт та його розробка. Редактор Frontpage. Планування інформаційного потоку. Як побудувати хороший сайт. Планування та розробка сайту intranet. Проблеми планування. Сервери. Безпека. Інформаційне наповнення. Web-сервер та Web-сторінки.

курсовая работа [20,1 K], добавлен 22.08.2008
Розробка динамічного футбольного сайту Української Прем'єр-Ліги
Розробка сайту, який буде мати можливість наповнення інформацією про стан команд та їх гравців у лізі в режимі реального часу. Переваги використання технології web 2.0. Написання програмного коду веб-сайту та його реалізація, головна сторінка Index.php.

дипломная работа [3,4 M], добавлен 18.08.2014
Web-студія "WeZom"
Структурні підрозділі web-студії "Wezom". Програмне забезпечення, що використовується в організації. Послідовність розробки інтернет-сайту "Мир новостей". Велика різноманітність функцій PHP. Проектування бази даних web-сайту, його папки та файли.

отчет по практике [652,3 K], добавлен 04.03.2015
Розробка веб-сайту відеофільмів
Вибір мови програмування та середовища розробки. Основні можливості мови php та сервера MySQL. Основні переваги середовища розробки NetBeans. Macromedia Dreamweaver як один з популярних середовищ розробки сайтів. Розробка програмного коду сайту.

контрольная работа [3,0 M], добавлен 16.02.2013
Розробка бази даних та застосування для Інтернет-магазину комп'ютерної техніки
Основні підходи до проектування баз даних. Опис сайту Інтернет-магазину, характеристика його підсистем для обробки анкет і запитів користувачів. Розробка концептуальної, інфологічної, даталогічної, фізичної моделей даних. Побудова ER-моделі в CASE-засоби.

курсовая работа [2,3 M], добавлен 01.02.2013
Створення веб-сайту засобами HTML
Проектування технологій навчання з теми "Створення веб-сайту засобами HTML". Організація та методика проведення лекційного, лабораторного та практичного (семінарського) заняття. Розробка дидактичних матеріалів до інноваційних технологій навчання.

курсовая работа [2,3 M], добавлен 21.12.2013

Другие документы, подобные "Проектування та розробка веб-сайту"

весь список подобных работ

скачать работу можно здесь

сколько стоит заказать работу?

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.