Механізм створення динамічних Web-сторінок

 












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

по дисципліні:

"Програмування та підтримка Web-застосувань"

-й семестр

на тему:

"Механізм створення динамічних Web-сторінок "

Анотація


В курсовій роботі був розроблений web-сайт "Творча майстерня SakhNYAsha design studio". Цей web-сайт може зацікавити багатьох, адже пропонує широкий вибір хенд-мейд виробів із полімерної глини.

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

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

Зміст


Вступ

1. Опис предметної області

2. Реалізація поставленого завдання

2.1 Структура клієнтської частини

2.2 Вибір елементів HTML4 і HTML5 для представлення контенту

2.2.1 Структурування інформаційного наповнення сайту

2.2.2 Стилізація

2.2.3 Використання форм

2.2.4 Введення елементів HTML5 та CSS3

2.2.5 Використання svg-графіки

2.3 Забезпечення взаємодії серверної частини web-додатків з клієнтською частиною

2.3.1 Програмування скриптів на стороні клієнта засобами JavaScript

2.3.2 Серверна частина web-додатку

2.3.2.1 Використання PHP та бібліотек jQuery і Ajax

Висновки

Посилання та література

Додатки

Вступ


До теперішнього часу існує безліч технологій створення web-сторінок, без яких не може обійтися web-майстер. Але основою при розробці web-документів є, звичайно, мова розмітки HTML з використанням JavaScript, мови web-програмування PHP і Ajax.

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

Отримати уявлення про те, як виглядає код HTML можна якщо відкрити в браузері будь-яку web-сторінку і переглянути код HTML. При цьому можна побачити, як створена та чи інша сторінка - це стане в нагоді при розробці HTML документів. Однак не варто захоплюватися тільки цією стороною навчання HTML, щоб створювані документи не були погіршеним варіантом чужих сторінок.(англ. PHP: Hypertext Preprocessor - PHP: гіпертекстовий препроцесор), попередня назва: Personal Home Page Tools - скриптова мова програмування, була створена для генерації HTML - сторінок на стороні web-сервера.- мова, яка може бути вбудована безпосередньо в HTML-код сторінок, які, в свою чергу коректно будуть оброблені PHP-інтерпретатором. Механізм РНР просто починає виконувати код після першої екрануючої послідовності (<?) і продовжує виконання до того моменту, коли він зустріне парну екрануючу послідовність (? >).- назва реалізації стандарту мови програмування ECMAScript компанії Netscape, базується на принципах прототипного програмування.має низку властивостей обєктно-орієнтованої мови, але завдяки концепції прототипів підтримка обєктів в ній відрізняється від традиційних мов ООП. Крім того, JavaScript має ряд властивостей, притаманних функціональним мовам, - функції як обєкти першого рівня, обєкти як списки, каррінг (currying), анонімні функції, замикання (closures) - що додає мові додаткову гнучкість.(Asynchronous JavaScript And XML) - підхід до побудови користувацьких інтерфейсів web-додатків, за яких web-сторінка, не перезавантажуючись, у фоновому режимі надсилає запити на сервер і сама звідти довантажує потрібні користувачу дані. AJAX - один з компонентів концепції DHTML.

сайт інформація стилізація елемент

1. Опис предметної області


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

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

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

2. Реалізація поставленого завдання


2.1 Структура клієнтської частини


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

Сайт складається з головної сторінки та меню яке має посилання на інші сторінки: "Головна", "Новини", "Майстер-класи", "Каталог виробів", "Контакти", "Блог майстра" (Рисунок 1).


Рисунок 1. Структурна схема сайту


"Головна" - стартова сторінка, на які розміщені посилання на інші розділи та присутні посилання на сторінки "ВКонтакте", посилання на ресурс "Вікіпедія" та вхід для адміністратора сайту (Рисунок 2).

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

Сторінка "Блог майстра" має таку ж структуру що і сторінка "Новини" (Рисунок 3).

Рисунок 2. Макет головної сторінки


Рисунок 3. Макет сторінки новин


Сторінка "Каталог виробів" містить в собі посилання на такі підрозділи (категорії): Сережки, Кулони і буси, Персні, Брошки, Браслети, Різне. Кожен підрозділ представлений тематичним набором ілюстрацій. Таку ж саму структуру має і сторінка "Майстер-класи" (в ролі підрозділів - назви майстер-класів) (Рисунок 4, Рисунок 5).


Рисунок 4. Макет сторінки


Рисунок 5. Макет сторінки


"Каталог виробів" "Майстер класи"

Сторінка "Контакти" містить посилання на зовнішні ресурси (пошту майстра) (Рисунок 6).


Рисунок 6. Макет сторінки "Контакти"


2.2 Вибір елементів HTML4 і HTML5 для представлення контенту


2.2.1 Структурування інформаційного наповнення сайту

В мові розмітки HTML був визначений стиль заголовків і розміщений на сторінках сайту. Використовувались теги <H3>, <Cite>, <P>, <Font>, які були необхідні для редагування тексту.

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

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

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

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

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

Сторінка "Блог майстра" представляє собою online-щоденник майстра, тобто інформаційне наповнення залежить від майстра.

Текстове наповнення сторінки контактів - це посилання на групу ВК та e-mail майстра.


2.2.2 Стилізація

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

На основі банерів було реалізовано карти-зображення (верхній банер - посилання на головну сторінку сайту, нижній банер - посилання на групу ВК та пошту).

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

Сторінки "Новини", "Майстер-класи" та "Блог майстра", "Каталог виробів" містять окремі блоки (таблиці) з інформацією, посиланнями та зображеннями.

Сторінки контактів повністю реалізована за допомогою однієї таблиці, в комірках якої розміщені інші елементи (таблиці, зображення, текст і т.д.)


.2.3 Використання форм

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

На сторінці "Контакти" було реалізовано форму "Звяжіться зі мною", яка включає такі поля: "Прізвище", "Імя", "E-mail", "Пароль", "Рік народження", Стать, поле вводу повідомлення та кнопок "Відправити", "Відмінити".

Поля "Прізвище", "Імя", "E-mail", "Пароль", "Рік народження" є обовязковими для заповнення. Якщо хоча б одне з полів не заповнене, то браузером видається повідомлення про обовязковість цього поля. Поле "Рік народження" дає змогу вибрати дату свого народження за допомогою спеціальних кнопок. Значення цього поля від 1910 до 2013 року. При вводі неправильних даних браузер видає відповідне повідомлення.


2.2.4 Введення елементів HTML5 та CSS3

В даній роботі використовувалися такі теги як <header>, <navigation>, <section>, <article>, <footer>, які є елементами HTML5. За допомогою них було розбито на секції сторінку новин. Це потрібно для того, щоб було набагато легше орієнтуватися в коді сторінки та полегшити процес внесення змін у певні блоки сторінки.

Значення тегів:

·<header> містить в собі верхній банер сторінки

·<navigation> - панель навігації

·<section> - блок новин в якому кожна новина міститься в тегу <article>

·<footer > - нижній банер сторінки



2.2.5 Використання svg-графіки

Svg-графіка - це векторна графіка, яка досить часто використовується при створенні web-сторінок. Задається тегом <object>. Може створюватись за рахунок прописання параметрів в файлі з розширенням *. svg або ж за допомогою спеціальних конверторів.

На сторінці "Блог майстра" реалізована заливка фона градієнтом та присутні svg-зображення.

Верхній, нижній банери та обрамлення - це png-зображення які були конвертовані в svg-зображення за допомогою рекомендованих конверторів.

Інші зображення створювалися безпосередньо в svg-редакторах


.3 Забезпечення взаємодії серверної частини web-додатків з клієнтською частиною


2.3.1 Програмування скриптів на стороні клієнта засобами JavaScript

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

Щоб потрапити на сторінку адміністратора потрібно ввести:

Логін: aurum Пароль: potestas Ключове слово: est

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

На сторінці адміністратора присутні блоки "Реєстрація", "Коментарі", верхній та спрощений нижній банери.

Додано форми реєстрації та введення коментарів.

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

Проект був успішно розміщений та протестований на Денвері власного ПК.

2.3.2 Серверна частина web-додатку


2.3.2.1 Використання PHP та бібліотек jQuery і Ajax

Було створено вхід до сторінки адміністратора сайту та безпосередньо сторінка самого адміністратора за допомогою функцій бібліотеки Ajax.

На сторінці входу присутні верхній банер з посиланням на головну сторінку та спрощений нижній. Також присутня форма входу: поля "Логін", "Пароль" та кнопка підтвердження вводу. Якщо дані невірні, то виводиться відповідне повідомлення.

Щоб потрапити на сторінку адміністратора потрібно ввести:

Логін: aurum Пароль: potestas

На сторінці адміністратора присутній блок "Розмістити новину", верхній та спрощений нижній банери.

Введені новини відображаються у спеціально відведеній частині сторінки "Блог майстра" (основного сайту) та у текстовому файлі. Адміністратор може видаляти ці коментарі безпосередньо з текстового документу. На сторінці "Каталог виробів" замінено звичайне меню на меню-гармошку, яке включає всі основні розділи та дозволяє переглянути підрозділи. На головній сторінці замість gif-зображень було реалізовано слайд-зміну зображень за допомогою функцій бібліотеки jQuery.


Висновки


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

При розробці web-сайта були проаналізовані сучасні web-технології, що дозволяють створювати інтерактивні web-сторінки. Найбільш відповідними для виконання поставленого завдання виявилися мова розмітки HTML, мова web-програмування PHP, JavaScript та бібліотеки jQuery, Ajax.

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

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

У додатках вибірково наведені лістинги програмного коду сторінок web-сайту.

Посилання та література


1.Творча майстерня "Lollipop" #"justify">2.Все про створення сайтів та web-програмування для початківців #"justify">3."Веб Database Application with PHP and MYSQL", 2nd Edition By David Lane, Hugh E. Williams. © O'Reilly, May 2004. ISBN: 0-596-00543-1.

.CMS List. Огляд cms. Сайт про системи управління сайтом

5.#"justify">.Joomla CMS по-російськи

.#"justify">8.Content management system

.#"justify">10.CMS огляд: CMS, движок сайту, система управління сайтом, mambo, php nuke, netcat, phpbb, invision power board, vbulletin

11.#"justify">12."Dreamweaver MX 2004 для "чайников"." Уорнер, Джанни, Гарднер, Сюзанна. Пер. с англ. - М.: Издательский дом "Вильямс", 2004. - 352 с.

13."PHP, MySQL и Dreamweaver MX 2004. Разработка интерактивных Web-сайтов." Дронов В.А. - СПб.: БХВ-Петербург, 2010. - 448 с: ил.

14."PHP and MySQL Web Development (4th Edition)", Luke Welling, Laura Thomson 848 стр., с ил.; ISBN 978-5-8459-1574-0, 978-0-672-32916-6.

15.Авторські права на фото належать Творчій майстерні "SakhNYAsha design studio"

Додатки


У додатках вибірково представлені лістинги програмного коду сторінок web-сайту.

Сторінка входу до сторінки адміністратора index. php

<? header ("Content-Type: text/html; charset=utf-8");? >

<! DOCTYPE html>

<html>

<head>

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

<script type="text/javascript">

function fun () {name = document. getElementById ('name'). value;password = document. getElementById ('password'). value;(name == '' || password == '')

{. getElementById ('rename'). style. display = 'block';

}

{

$. ajax ({: 'POST',: 'api. php',: ({: name,: password

}),: function (html) {

$ ('#rename'). show ().html (html);

},: function (html) {('error');

}

});

}false;

}

</script>

<style>{background: #FFE6CC; font-family: "PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 20px; overflow: hidden; outline: none! important; }

. main{background: #B77171; margin: 100px auto; padding: 0px 20px 10px 20px; width: 215px; }

. label{color: #fff; padding: 5px; }

. input{padding: 5px; border: 1px solid #924949; outline: none! important; }

. input: focus{background: #924949; color: #fff; }

#login{background: #924949; color: #fff; font-weight: bold; padding: 4px 10px; border: 0px; margin-top: 5px; }

#login: hover{background: #5F3030; cursor: pointer; }

</style>

</head>

<body>

<div>

<div style="font-weight: bold; background: #924949; color: #fff; padding: 10px; text-align: left; width: 235px; margin-left: - 20px; margin-bottom: 10px; ">Вход</div>

<form onsubmit="fun (); return false; " method="get" action="">

<table style="" cellpadding="0" cellspacing="0">

<tr><td>

<td><input type="text" id="name">

<tr><td>

<td><input type="password" id="password">

<tr><td colspan="2"><input type="submit" id="login"></td></tr></table>

</form>

<div id="rename" style="display: none; ">

Все поля обязательны для заполнения

</div></div>

</body></html>

Сторінка адміністратора admin. php

<? session_start ();("Content-Type: text/html; charset=utf-8");(! isset ($_SESSION ['name']) ||! isset ($_SESSION ['password']) ||! isset ($_SESSION ['role'])) {("Location: #"justify">}

? >

<! DOCTYPE html>

<html>

<head>

<link rel="icon" href="favicon. ico" type="image/x-icon"/>

<link rel="shortcut icon" href="images/favicon. ico" type="image/x-icon"/>

<title>Админпанель</title>

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

<script type="text/javascript">

function addNews () {name = document. getElementById ('name'). value;area = document. getElementById ('area'). value;(name == '' || area == '')

{. getElementById ('rename'). style. display = 'block';

}

{

$. ajax ({: 'POST',: 'addnews. php',: ({: name,: area}),: function (html) {

$ ('#rename'). show ().html (html);

},: function (html) {('error'); }

});

}false;

}

</script>

<style>{background: #FFE4E1; font-family: Gabriola,sans-serif; font-size: 24px;! important; }

</style>

</head>

<body>

<img src="border. png" border="0" width="100%" height="35">

<h3>Приветсвую, <? echo $_SESSION ['name'];? ></h3>

<div style="background: #fff; color: #000; font-weight: bold; padding: 10px; border-radius: 10px; width: 30%">Добавить новость</div>

<img src="lep. png" border="0" width="31%" height="30">

<form onsubmit="addNews (); return false; " method="POST" action="">

<blockquote>

<p><table style="border-radius: 10px; color: #000; " cellpadding="3" cellspacing="3" bgcolor="white" >

<tr><td>

<td><input type="text" id="name">

<tr><td>

<td><textarea id="area">

<tr><td colspan="2"><input type="submit" id="login"></td></tr>

</table>

</form>

<p><div id="rename" style="display: none; background: #fff; border-radius: 10px; width: 30%; padding: 10px; ">

Все поля обязательны для заполнения

</div>

</blockquote>

<p><img src="border. png" border="0" width="100%" height="35">

</body>

</html>

Функції php, які відносяться до сторінок index. php та admin. php

addnews. php

<? header ("Content-Type: text/html; charset=utf-8");(isset ($_POST ['name']) && isset ($_POST ['text']))

{$name = mysql_real_escape_string ($_POST ['name']);

$text = mysql_real_escape_string ($_POST ['text']); }

$fp = fopen ('news. txt', 'a');($fp)

{fwrite ($fp, $name. "#". $text. "#1\n");($fp);'Новость добавлена'; }

{echo 'Ошибка прочтения файла'; }

? >

api. php

<?("Content-Type: text/html; charset=utf-8");(isset ($_POST ['name']) && isset ($_POST ['password']))

{$name = mysql_real_escape_string ($_POST ['name']);

$password = mysql_real_escape_string ($_POST ['password']); }_start ();

$fp = fopen ('login. txt', 'r');($fp)

{while (! feof ($fp))

{$mytext = fgets ($fp, 4096);

$loginForm = explode ('#', $mytext);($name == $loginForm ['0'] && $password == $loginForm ['1'] && $loginForm ['2'] == "admin")

{$_SESSION ['name'] = $name;

$_SESSION ['password'] = $password;

$_SESSION ['role'] = "admin";('<script>window. location = "admin. php"; </script>'); }}($noAdmin == 0)

{ echo 'Неверные данные'; }}

{echo 'Ошибка прочтения файла'; }

? >

add. php

<?

$fp = fopen ('news. txt', 'r');($fp)

{while (! feof ($fp))

{$mytext = fgets ($fp, 4096);($mytext == '') {echo ''; }else{

$loginForm = explode ('#', $mytext);'

<ARTICLE>

<br><table border="0" align="center" cellpadding="5" cellspacing="0" width="90%" bgcolor="white" style="border-radius: 20px; ">

<tr><th align="left" colspan="3"><font size="5" color="black" face="Gabriola" >'. $loginForm ['0']. '</th></tr>

<tr><td align="left" colspan="3"><font size="5" color="black" face="Gabriola" >'. $loginForm ['1']. '</td></tr>

</table>

</ARTICLE>

'; }}}

{echo 'Ошибка прочтения файла'; }

? >

Головна сторінка сайту index1. php

<? header ("Content-Type: text/html; charset=utf-8");? >

<! DOCTYPE html>

<head>

<link rel="icon" href="images/favicon. ico" type="image/x-icon"/>

<link rel="shortcut icon" href="images/favicon. ico" type="image/x-icon"/>

<title>SakhNYAsha design studio</title>

<meta content="SakhNYAsha Design Studio" name="Sakhnyasha design studio - Творческая мастерская">

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

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta http-equiv="pragma" content="no-cache">

<meta name="revisit-after" content="7 days">

<meta name="author" content="www.sdws.ru">

<meta name="Content-language" content="ru">

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

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

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

<script language="JavaScript" type="text/javascript">

<! - -

$ (document). ready (function ()

{

$ ('#slider'). cycle ({: 3000,pause: 1,});

});

>

</script>

</head>

<body bgcolor=#FFE4E1 text=black alink=#000000 link=#000000>

<img src="images/logo. png" border="0" width="100%" height="190" usemap="#logo">

<map name="logo">

<area shape="rect" coords="0,0,330,140" title="SakhNYAsha design studio" href="index1. php" target="_top">

<div align="right"><br><a href="index. php">Вход</a></div>

<p ><table border="0" align="center"cellpadding=3 cellspacing=0 bgcolor="white" style="border-radius: 10px; ">

<tr><th align="center"><a href="index1. php"><font size="5" color="black" face="Gabriola">Главная</a></th><th>|</th>

<th><a href="news. php"><font size="5" color="black" face="Gabriola">Новости</a></th><th>|</th>

<th><a href="mks. php"> <font size="5" color="black" face="Gabriola">Мастер-классы</a> </th><th>|</th>

<th><a href="album. php"><font size="5" color="black" face="Gabriola">Каталог изделий</a></th><th>|</th>

<th><a href="kontakt. php"><font size="5" color="black" face="Gabriola">Контакты</a></th><th>|</th>

<th><a href="other. php"><font size="5" color="black" face="Gabriola">Блог мастера</a></th></tr>

</table>

<table border="0"align="center" cellpadding=0 cellspacing=0>

<tr><td align="center" ><img src="images/lep. png" border="0" width="75%" height="35"></td></tr>

</table>

<br><br><table border="0" align="center" cellpadding=5 cellspacing=0 width="90%" bgcolor="white" style="border-radius: 10px; ">

<tr><th align="left" colspan="2"><font size="5" color="black" face="Gabriola">Добро пожаловать! </th>

<th align="left" colspan="2"><font size="5" color="black" face="Gabriola">О материалах</th></tr>

<tr><td valign="top"><a href="#"justify"><td valign="top"><font size="5" color="black" face="Gabriola">Добро пожаловать в мастерскую SakhNYAsha design studio! Здесь вы можете найти замечательные подарки ручной работы себе и своим близким! </td>

<td valign="top"><img src="images/material. jpg" height="120" width="90" align="left"></td>

<td valign="top"><font size="5" color="black" face="Gabriola">Пластика (полимерная глина) - это материал из которого изготавливаются изделия. Изделия с такого материала достаточно прочны и долговечны=) </td>

</tr>

</table>

</table>

<table border="0" align="center" cellpadding=0 cellspacing=0>

<tr><td align="center"><img src="images/lep. png" border="0" width="80%" height="40"></td></tr>

</table>

<br><br><table border="0" align="center" cellpadding=3 cellspacing=3 width="90%" bgcolor="white" style="border-radius: 10px; ">

<tr><th align="left" width="50%"><font size="5" color="black" face="Gabriola">Новинки! Только все свежее! =) </th>

<th align="left"><font size="5" color="black" face="Gabriola">Акции! Спешите преобрести со скидкой! </th></tr>

<tr><td align="left"><font size="5" color="black" face="Gabriola">Все новинки можна посмотреть в разделе <a href="album. php" >"Каталог изделий"</a> </td>

<td align="left"><font size="5" color="black" face="Gabriola">Все акции можна посмотреть в разделе <a href="news. php">"Новости"</a> </td></tr>

<tr> <td id="slider">

<img src="images/031. jpg" alt="" width="550" />

<img src="images/032. jpg" alt="" width="550" />

<img src="images/033. jpg" alt="" width="550" />

<img src="images/034. jpg" alt="" width="550" />

<img src="images/035. jpg" alt="" width="550" />

<img src="images/036. jpg" alt="" width="550" />

</td><td align="left"><img src="images/021. gif" alt="" width="550" > </td></tr>

</table>

<table border="0" align="center" cellpadding=0 cellspacing=0>

<tr><td align="center" ><img src="images/lep. png" border="0" width="80%" height="40"></td></tr>

</table>

<p><br><img src="images/down. png" border="0" width="100%" height="160" usemap="#down">

<map name="down">

<area shape="rect" coords="14,100,406,62" title="Загляните в мою группу ВК!" href="#"justify"><area shape="rect" coords="14,130,406,92" title="Пишите сюда=)!" href="#"justify"></body>

</html>

Сторінка "Каталог виробів" album. php

<? header ("Content-Type: text/html; charset=utf-8");? >

<! DOCTYPE html>

<html xmlns="#"justify"><head>

<link rel="icon" href="images/favicon. ico" type="image/x-icon"/>

<link rel="shortcut icon" href="images/favicon. ico" type="image/x-icon"/>

<title>SakhNYAsha design studio</title>

<meta content="SakhNYAsha Design Studio" name="Sakhnyasha design studio - Творческая мастерская">

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

<script type='text/javascript' src='#"justify"><script type="text/javascript">

$ (document). ready (function ()

{$ (". accordion h1: first"). addClass ("active");

$ (". accordion p: not (: first)"). hide ();

$ (". accordion h5"). click (function () {

$ (this). next ("p"). slideToggle ("slow")

. siblings ("p: visible"). slideUp ("slow");

$ (this). toggleClass ("active");

$ (this). siblings ("h5"). removeClass ("active"); });

});

</script>

<style type="text/css">

. accordion {width: 200px; border-bottom: 0px #ffffff; }

. accordion h5 {background: #ffffff url (images/arrow-square. gif) no-repeat right - 51px; padding: 7px 15px; margin: 0; border: #ffffff; border-bottom: none; cursor: pointer; }

. accordion h5: hover {background-color: #ffffff; }

. accordion h5. active {background-position: right 5px; }

. accordion p {background: #ffffff; margin: 0; padding: 10px 15px 20px; border-left: 0px #ffffff; border-right: 0px #ffffff; }

</style>

</head>

<body bgcolor="#FFE4E1" text="black" alink="#000000" vlink="#000000">

<img src="images/logo. png" border="0" width="100%" height="190" usemap="#logo">

<map name="logo">

<area shape="rect" coords="0,0,330,140" title="SakhNYAsha design studio" href="index1. php" target="_top">

<p><table border="0" align="center" cellpadding=3cellspacing=0 bgcolor="white" style="border-radius: 10px; ">

<tr><th align="center"><a href="index1. php"><font size="5" color="black" face="Gabriola">Главная</a></th>

<th>|</th><th><a href="news. php"><font size="5" color="black" face="Gabriola">Новости</a></th><th>|</th>

<th><a href="mks. php"> <font size="5" color="black" face="Gabriola">Мастер-классы</a> </th><th>|</th>

<th><a href="album. php"><font size="5" color="black" face="Gabriola">Каталог изделий</a></th><th>|</th>

<th><a href="kontakt. php"><font size="5" color="black" face="Gabriola">Контакты</a></th><th>|</th>

<th><a href="other. php"><font size="5" color="black" face="Gabriola">Блог мастера</a></th></tr>

</table>

<table border="0" align="center" cellpadding=0 cellspacing=0>

<tr><td align="center" ><img src="images/lep. png" border="0" width="75%" height="35"></td></tr>

</table>

<br><table border="0" align="center" cellpadding=3 cellspacing=3 width="90%" style="border-radius: 10px; ">

<tr valign="top">

<td align="left" width="15%">

<table border="0" align="center" cellpadding=3 cellspacing=3 width="100%" style="border-radius: 10px; "bgcolor=white>

<tr><th align="left"><font size="5" color="black" face="Gabriola" >Каталог изделий</th></tr>

<tr><td align="left"><font size="5" color="black" face="Gabriola" >

<div>

<h5>Серьги</h5>

<p><a href="album. php">Вишенки</a>

<br><a href="album. php">Сакура</a>

<br><a href="album. php">Лимонки</a></p>

<h5><a href="kylon. php">Кулоны</a></h5>

<h5>Кольца</h5>

<p><a href="album. php">Сердце</a>

<br><a href="album. php">Секреты благородных</a>

<br><a href="album. php">Суши</a></p>

<h5>Броши</h5>

<p><a href="album. php">Олень</a>

<br><a href="album. php">Сёдзе</a>

<br><a href="album. php">Совушка</a></p>

<h5>Браслеты</h5>

<p><a href="album. php">Фиолетовый бум</a>

<br><a href="album. php">Кислинка</a>

<br><a href="album. php">Ассорти</a></p>

<h5><a href="album. php">Разное</a></h5>

</div>

</td></tr></table></td>

<td><table border="0" align="center" cellpadding=3 cellspacing=3 width="100%" style="border-radius: 10px; "="white">

<tr align="center">

<td valign="top"><a href="koltso. php" alt="Кольца" target="_top"><img src="images/001. jpg" height="250" align="center"></a></td>

<td valign="top"><a href="sergi. php" alt="Серьги" target="_top"><img src="images/002. jpg" height="250" align="center"></a></td>

<td valign="top"><a href="kylon. php" alt="Кулоны" target="_top"><img src="images/003. jpg" height="250" align="center"></a></td></tr>

<tr align="center">

<th align="center"><font size="5" color="black" face="Gabriola" >Кольца</th>

<th align="center"><font size="5" color="black" face="Gabriola" >Серьги</th>

<th align="center"><font size="5" color="black" face="Gabriola" >Кулоны</th></tr>

<tr align="center">

<td valign="top"><a href="brosh. php" alt="Броши" target="_top"><img src="images/004. jpg" height="250" align="center"></a></td>

<td valign="top"><a href="braslety. php" alt="Браслеты" target="_top"><img src="images/005. jpg" height="250" align="center"></a></td>

<td valign="top"><a href="raznoe. php" alt="Разное" target="_top"><img src="images/006. jpg" height="250" align="center"></a></td></tr>

<tr align="center">

<th align="center"><font size="5" color="black" face="Gabriola" >Броши</th>

<th align="center"><font size="5" color="black" face="Gabriola" >Браслеты</th>

<th align="center"><font size="5" color="black" face="Gabriola" >Разное</th></tr>

</table></td></tr>

</table>

<table border="0" align="center" cellpadding=0 cellspacing=0>

<tr><td align="center" ><img src="images/lep. png" border="0" width="80%" height="40"></td></tr>

</table>

<p><br><img src="images/down. png" border="0" width="100%" height="160" usemap="#down">

<map name="down">

<area shape="rect" coords="14,100,406,62" title="Загляните в мою группу ВК!" href="#"justify"><area shape="rect" coords="14,130,406,92" title="Пишите сюда=)!" href="#"justify"></body>

</html>

Сторінка "Блог майстра" other. php

<? header ("Content-Type: text/html; charset=utf-8");? >

<! DOCTYPE html>

<html xmlns="#"justify"><head>

<link rel="icon" href="favicon. ico" type="image/x-icon"/>

<link rel="shortcut icon" href="images/favicon. ico" type="image/x-icon"/>

<title>SakhNYAsha design studio</title>

<meta content="SakhNYAsha Design Studio" name="Sakhnyasha design studio - Творческая мастерская">

<style> /*Заливка фона градиентом*/{background: #FFE4E1; /* Для старых браузров */ }

</style>

</head>

<body bgcolor="#FFE4E1 " text="black" alink="#000000" link="#000000">

<HEADER >

<img src="logo. png" border="0" width="100%" height="190" usemap="#logo">

<map name="logo">

<area shape="rect" coords="0,0,330,140" title="SakhNYAsha design studio" href="index1. php" target="_top">

</HEADER>

<navigation>

<p><table border="0" align="center" cellpadding=3 cellspacing=0 bgcolor="white"style="border-radius: 10px; ">

<tr><th align="center"><a href="index1. php"><font size="5" color="black" face="Gabriola">Главная</a></th><th>|</th><th><a href="news. php"><font size="5" color="black" face="Gabriola">Новости</a></th><th>|</th><th><a href="mks. php"> <font size="5" color="black" face="Gabriola">Мастер-классы</a> </th><th>|</th><th><a href="album. php"><font size="5" color="black" face="Gabriola">Каталог изделий</a></th><th>|</th><th><a href="kontakt. php"><font size="5" color="black" face="Gabriola">Контакты</a></th><th>|</th><th><a href="other. php"><font size="5" color="black" face="Gabriola">Блог мастера</a></th></tr>

</table>

</navigation>

<SECTION>

<table border="0" align="center" cellpadding=0 cellspacing=0>

<tr><td align="center" ><img src="lep. png" border="0" width="75%" height="35"></td></tr>

</table>

<?_once ('add. php');

? >

<ARTICLE>

<p><table border="0" align="center" cellpadding="5" cellspacing="0"width="90%" bgcolor="white" style="border-radius: 10px; ">

<tr><th align="left" colspan="3"><font size="5" color="black" face="Gabriola" >"Дело было вечером, делать было нечего. "</th></tr>

<tr><td align="left" colspan="3"><font size="5" color="black" face="Gabriola" >Вот такая странная родилась картинка после похода в цирк=) </td></tr>

<tr><td align="center"><object data="svg/1. svg" height="100%" align="lcenter"></object></td></tr>

</table>

</ARTICLE>

</section>

<p><br><img src="down. png" border="0" width="100%" height="160" usemap="#down">

<map name="down">

<area shape="rect" coords="14,100,406,62" title="Загляните в мою группу ВК!" href="#"justify"><area shape="rect" coords="14,130,406,92" title="Пишите сюда=)!" href="#"justify"></map>

</body>

</html>

Сторінка новин news.html

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"

"#"justify"><html xmlns="#"justify"><head>

<link rel="icon" href="images/favicon. ico" type="image/x-icon"/>

<link rel="shortcut icon" href="images/favicon. ico" type="image/x-icon"/>

<title>SakhNYAsha design studio</title>

<meta content="SakhNYAsha Design Studio" name="Sakhnyasha design studio - Творческая мастерская">

</head>

<body bgcolor=#FFE4E1 text=black alink=#000000 link=#000000>

<HEADER id="header" >

<img src="images/logo. png" border="0" width="100%" height="190" usemap="#logo">

<map name="logo">

<area shape="rect" coords="0,0,330,140" title="SakhNYAsha design studio" href="index.html" target="_top">

</HEADER>

<navigation id="navigation" >

<p><table border="0" align="center" cellpadding=3 cellspacing=0 bgcolor=white>

<tr><th align="center"><a href="index.html"><font size="5" color="black" face="Gabriola">Главная</a></th><th>|</th><th><a href="news.html"><font size="5" color="black" face="Gabriola">Новости</a></th><th>|</th><th><a href="mks.html"> <font size="5" color="black" face="Gabriola">Мастер-классы</a> </th><th>|</th><th><a href="album.html"><font size="5" color="black" face="Gabriola">Каталог изделий</a></th><th>|</th><th><a href="kontakt.html"><font size="5" color="black" face="Gabriola">Контакты</a></th></tr>

</table>

</navigation>

<SECTION>

<table border="0" align="center" cellpadding=0 cellspacing=0>

<tr><td align="center" ><img src="images/lep. png" border="0" width="60%" height="30"></td></tr>

</table>

<ARTICLE>

<br><table border="0" align="center" cellpadding=5 cellspacing=0 width="90%" bgcolor=white>

<tr><th align="left" colspan="3"><font size="5" color="black" face="Gabriola" >10 октября</th></tr>

<tr><td valign="top" width="15%"><img src="images/10. jpg" height="190" align="left"></td>

<td valign="top"><font size="5" color="black" face="Gabriola">Акция!

<br>Что может быть теплее чем вязаный свитерок? А вязаное сердце??? =)))

<br>Не упустите свой шанс приобрести брошку "Тёплые чувства"!

<br>Найти можно здесь: <a href="album.html" target="_blank">"Каталог изделий"</a></tr></table>

</ARTICLE>

</SECTION>

<footer id="footer" >

<table border="0" align="center" cellpadding=0 cellspacing=0>

<tr><td align="center" ><img src="images/lep. png" border="0" width="80%" height="40"></td></tr>

</table>

<p><br><img src="images/down. png" border="0" width="100%" height="160" usemap="#down">

<map name="down">

<area shape="rect" coords="14,100,406,62" title="Загляните в мою группу ВК!" href="#"justify"><area shape="rect" coords="14,130,406,92" title="Пишите сюда=)!" href="#"justify"></footer>

</body>

</html>

Сторінка контактів kontakt.html

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"

"#"justify"><html xmlns="#"justify"><head>

<link rel="icon" href="images/favicon. ico" type="image/x-icon"/>

<link rel="shortcut icon" href="images/favicon. ico" type="image/x-icon"/>

<title>SakhNYAsha design studio</title>

<meta content="SakhNYAsha Design Studio" name="Sakhnyasha design studio - Творческая мастерская">

</head>

<body bgcolor=#FFE4E1=black=#000000=#000000>

<table border="0"=0=0="100%">

<thead><tr><td>

<img src="images/logo. png" border="0" width="100%" height="190" usemap="#logo">

<map name="logo">

<area shape="rect" coords="0,0,330,140" title="SakhNYAsha design studio" href="index.html" target="_top"></td></tr>

<tr><th>&#160; </th></tr>

<tr><td>

<table border="0"="center"=3=0="white">

<tr><th align="center"><a href="index.html"><font size="5" color="black" ace="Gabriola">Главная</a></th><th>|</th>

<th><a href="news.html"><font size="5" color="black" face="Gabriola">Новости</a></th><th>|</th>

<th><a href="mks.html"> <font size="5" color="black" face="Gabriola">Мастер-классы</a> </th><th>|</th>

<th><a href="album.html"><font size="5" color="black" face="Gabriola">Каталог изделий</a></th><th>|</th>

<th><a href="kontakt.html"><font size="5" color="black" ace="Gabriola">Контакты</a></th></tr></table></td></tr>

<tr><td align="center"><img src="images/lep. png" border="0" width="40%" height="30"></td></tr></thead>

<tbody><tr><td><br>

<table="0"="center"=3=3="90%"="white">

<tr><th align="left" width="50%"><font size="5" color="black" face="Gabriola">Пишите сюда! </th>

<th align="left"><font size="5" color="black" face="Gabriola">Где мы находимся: </th>

<tr><td align="left"><font size="5" color="black" face="Gabriola">e-mail: [email protected]</td>

<td align="left"><font size="5" color="black" face="Gabriola">Ст. м. "Святошино"</td>

<tr><th align="left"><font size="5" color="black" face="Gabriola">Загляните в мою группу ВК! </th>

<td valign="top" rowspan="16"><img src="images/map. jpg" border="0" width="600" align="top">

<tr><td valign="top"><font size="5" color="black" face="Gabriola">#"justify"><tr><th align="left"><font size="5" color="black" face="Gabriola">Свяжитесь со мной! </th></tr>

<tr><td>

<form action = "''#"justify"><table>

<tr align=left>

<td><font size="5" color="black" face="Gabriola"><lable>Фамилия: </lable> </td> <td><input type="text" name="firstname" autofocus required></td></tr>

<tr align=left>

<td><font size="5" color="black" face="Gabriola"><lable>Имя: </lable> </td> <td><input type="text" name="lastname" autofocus required></td></tr>

<tr align=left>

<td><font size="5" color="black" face="Gabriola"><lable>E-mail: </lable></td> <td><input type="text" name="email" autofocus required></td></tr>

<tr align=left>

<td><font size="5" color="black" face="Gabriola"><lable>Пароль: </lable> </td> <td><input type="password" name="pass" value="NOPASS" size="6" maxlength="12" ></td></tr>

<tr align=left>

<td><font size="5" color="black" face="Gabriola"><lable>Год рождения: </lable> </td> <th><input type="number" min="1910" max="2013" size="8" required></td></tr>

<tr align=left>

<td><input type="radio" name="sex" value="Male"> Male </td> </tr>

<tr align=left>

<td> <input type="radio" name="sex" value="Female"> Female</td></tr>

<tr align=left>

<td><font size="5" color="black" face="Gabriola">Сообщение: </td></tr>

<tr align=left><td colspan=4><textarea name = "thetext" rows = "10" cols = "35" wrap="virtual"></textarea></td></tr>

<tr align=left>

<td><font size="5" color="black" face="Gabriola"><input type="submit" value="Отправить">

<input type="hidden" name="recipient" value="[email protected]"></td> <td><input type="reset" value="Отменить"></td><td colspan=2> </td>

</tr>

</table>

</form>

</td></tr>

</table></td></tr>

<tr><td align="center"><img src="images/lep. png" border="0" width="60%" height="40"></td></tr></tbody>

<tfoot><tr><td><p><br><img src="images/down. png" border="0" width="100%" height="160" usemap="#down">

<map name="down">

<area shape="rect" coords="14,100,406,62" title="Загляните в мою группу ВК!" href="#"justify"><area shape="rect" coords="14,130,406,92" title="Пишите сюда=)!" href="#"justify"></table>

</body>

</html>

Приклад тексту svg-зображень 1. svg

<? xml version="1.0" standalone="yes"? >

<! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.1 // EN" "#"justify"><svg width="1172px" height="586px" viewBox="0 0 1172 586" xmlns="#"justify"><path d="M14.167032967032966,33.48571428571429 L17.386813186813185,34.77362637362637 L20.606593406593408,36.06153846153846 L23.182417582417585,34.77362637362637 Q25.75824175824176,33.48571428571429 27.046153846153846,32.84175824175824 L28.334065934065933,32.1978021978022 L29.621978021978023,31.553846153846152 L30.90989010989011,30.90989010989011 L32.1978021978022,30.90989010989011 L33.48571428571429,30.90989010989011 L34.77362637362637,30.90989010989011 L36.06153846153846,30.90989010989011 L37.99340659340659,30.90989010989011 L39.925274725274726,30.90989010989011 L41.21318681318681,30.90989010989011 L42.5010989010989,30.90989010989011 L44.43296703296703,30.26593406593407 L46.36483516483516,29.621978021978023 L48.2967032967033,29.621978021978023 L50.22857142857143,29.621978021978023 L52.160439560439556,29.621978021978023 Q54.09230769230769,29.621978021978023 59.24395604395605,29.621978021978023 Q64.3956043956044,29.621978021978023 68.25934065934067,29.621978021978023 Q72.12307692307692,29.621978021978023 74.05494505494505,30.26593406593407 Q75.98681318681318,30.90989010989011 80.49450549450549,30.26593406593407 Q85.0021978021978,29.621978021978023 87.57802197802198,29.621978021978023 Q90.15384615384615,29.621978021978023 96.5934065934066,29.621978021978023 Q103.03296703296704,29.621978021978023 107.54065934065935,29.621978021978023 Q112.04835164835164,29.621978021978023 119.13186813186812,28.978021978021978 Q126.21538461538461,28.334065934065933 131.36703296703297,28.334065934065933 Q136.51868131868133,28.334065934065933 146.178021978022,28.334065934065933 Q155.83736263736265,28.334065934065933 162.92087912087914,28.334065934065933 Q170.0043956043956,28.334065934065933 179.01978021978022,27.690109890109888 Q188.03516483516484,27.046153846153846 200.27032967032966,26.402197802197804 Q212.5054945054945,25.75824175824176 220.87692307692308,25.114285714285714 Q229.24835164835164,24.47032967032967 242.12747252747252,24.47032967032967 Q255.0065934065934,24.47032967032967 262.73406593406594,24.47032967032967 Q270.46153846153845,24.47032967032967 278.832967032967,24.47032967032967 Q287.2043956043956,24.47032967032967 298.1516483516483,24.47032967032967 Q309.0989010989011,24.47032967032967 322.621978021978,25.114285714285714 Q336.14505494505494,25.75824175824176 343.8725274725275,26.402197802197804

Q351.6,27.046153846153846

361.90329670329675,27.046153846153846 Q372.2065934065934,27.046153846153846 381.22197802197803,27.046153846153846 Q390.23736263736265,27.046153846153846 399.8967032967033,27.690109890109888 Q409.55604395604394,28.334065934065933 415.99560439560435,28.334065934065933 Q422.4351648351648,28.334065934065933 432.73846153846154,28.334065934065933 Q443.04175824175826,28.334065934065933 452.0571428571429,28.978021978021978 Q461.0725274725275,29.621978021978023 470.73186813186817,29.621978021978023 Q480.3912087912088,29.621978021978023 486.1868131868132,29.621978021978023 Q491.98241758241755,29.621978021978023 502.2857142857142,29.621978021978023 Q512.589010989011,29.621978021978023 521.6043956043956,30.26593406593407 Q530.6197802197802,30.90989010989011

L204.77802197802197,555.0901098901099 " fill="none" stroke="rgb (0,0,0)" stroke-opacity="0.07" stroke-width="32" stroke-linecap="round" stroke-linejoin="round" /><path d="M211.2175824175824,548.6505494505494 L210.57362637362638,549.2945054945055 L209.92967032967033,549.9384615384615 " fill="none" stroke="rgb (0,0,0)" stroke-opacity="0.07" stroke-width="32" stroke-linecap="round" stroke-linejoin="round" />

</svg>


КУРСОВА РОБОТА по дисципліні: "Програмування та підтримка Web-застосувань" -й семестр на тему:

Больше работ по теме:

КОНТАКТНЫЙ EMAIL: [email protected]

Скачать реферат © 2017 | Пользовательское соглашение

Скачать      Реферат

ПРОФЕССИОНАЛЬНАЯ ПОМОЩЬ СТУДЕНТАМ