Главная
База знаний "Allbest"
Программирование, компьютеры и кибернетика
Механізм створення динамічних Web-сторінок
Механізм створення динамічних Web-сторінок
Розробка web-сайту "Творча майстерня SakhNYAsha design studio". Сучасні технології розробки Web-додатків. Наповнення сайту інформацією та елементами. Структурування інформації та її стилізація. Введення елементів HTML 5, контроль відповідності стандартам.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | курсовая работа |
| Язык | украинский |
| Дата добавления | 30.01.2014 |
| Размер файла | 992,7 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
КУРСОВА РОБОТА
по дисципліні:
"Програмування та підтримка Web-застосувань"
3-й семестр
на тему:
"Механізм створення динамічних 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 (англ. PHP: Hypertext Preprocessor - PHP: гіпертекстовий препроцесор), попередня назва: Personal Home Page Tools - скриптова мова програмування, була створена для генерації HTML - сторінок на стороні web-сервера.
PHP - мова, яка може бути вбудована безпосередньо в HTML-код сторінок, які, в свою чергу коректно будуть оброблені PHP-інтерпретатором. Механізм РНР просто починає виконувати код після першої екрануючої послідовності (<?) і продовжує виконання до того моменту, коли він зустріне парну екрануючу послідовність (? >).
JavaScript - назва реалізації стандарту мови програмування ECMAScript компанії Netscape, базується на принципах прототипного програмування.
JavaScript має низку властивостей об'єктно-орієнтованої мови, але завдяки концепції прототипів підтримка об'єктів в ній відрізняється від традиційних мов ООП. Крім того, JavaScript має ряд властивостей, притаманних функціональним мовам, - функції як об'єкти першого рівня, об'єкти як списки, каррінг (currying), анонімні функції, замикання (closures) - що додає мові додаткову гнучкість.
AJAX (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.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-редакторах
2.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" http://lollipop. kiev.ua/
2. Все про створення сайтів та web-програмування для початківців http://htmlbook.ru/
3. "Веб Database Application with PHP and MYSQL", 2nd Edition By David Lane, Hugh E. Williams. © O'Reilly, May 2004. ISBN: 0-596-00543-1.
4. CMS List. Огляд cms. Сайт про системи управління сайтом
5. http://www.cmslist.ru
6. Joomla CMS по-російськи
7. http://joomlaportal.ru
8. Content management system
9. http://www.brutto.ru/informacija/uznat-bolshe/content-management-system
10. CMS огляд: CMS, движок сайту, система управління сайтом, mambo, php nuke, netcat, phpbb, invision power board, vbulletin
11. http://cmsobzor.ru/news. php
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 () {
var name = document. getElementById ('name'). value;
var password = document. getElementById ('password'). value;
if (name == '' || password == '')
{
document. getElementById ('rename'). style. display = 'block';
}
else
{
$. ajax ({
type: 'POST',
url: 'api. php',
data: ({
name: name,
password: password
}),
success: function (html) {
$ ('#rename'). show ().html (html);
},
error: function (html) {
alert ('error');
}
});
}
return false;
}
</script>
<style>
body{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 class="main">
<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 class="label">Логин: </td>
<td><input type="text" id="name" class="input" autocomplete="off"></td></tr>
<tr><td class="label">Пароль: </td>
<td><input type="password" id="password" class="input" autocomplete="off"></td></tr>
<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 ();
header ("Content-Type: text/html; charset=utf-8");
if (! isset ($_SESSION ['name']) ||! isset ($_SESSION ['password']) ||! isset ($_SESSION ['role'])) {
header ("Location: http://test1.ru/index. php");
}
? >
<! 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 () {
var name = document. getElementById ('name'). value;
var area = document. getElementById ('area'). value;
if (name == '' || area == '')
{
document. getElementById ('rename'). style. display = 'block';
}
else
{
$. ajax ({
type: 'POST',
url: 'addnews. php',
data: ({
name: name,
text: area}),
success: function (html) {
$ ('#rename'). show ().html (html);
},
error: function (html) {
alert ('error'); }
});
}
return false;
}
</script>
<style>
body{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 class="label">Название: </td>
<td><input type="text" id="name" class="input" autocomplete="off"></td> </tr>
<tr><td class="label">Текст: </td>
<td><textarea id="area" class="input" autocomplete="off"></textarea></td></tr>
<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");
if (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');
if ($fp)
{fwrite ($fp, $name. "#". $text. "#1\n");
fclose ($fp);
echo 'Новость добавлена'; }
else
{echo 'Ошибка прочтения файла'; }
? >
api. php
<?
header ("Content-Type: text/html; charset=utf-8");
if (isset ($_POST ['name']) && isset ($_POST ['password']))
{$name = mysql_real_escape_string ($_POST ['name']);
$password = mysql_real_escape_string ($_POST ['password']); }
session_start ();
$fp = fopen ('login. txt', 'r');
if ($fp)
{while (! feof ($fp))
{$mytext = fgets ($fp, 4096);
$loginForm = explode ('#', $mytext);
if ($name == $loginForm ['0'] && $password == $loginForm ['1'] && $loginForm ['2'] == "admin")
{$_SESSION ['name'] = $name;
$_SESSION ['password'] = $password;
$_SESSION ['role'] = "admin";
die ('<script>window. location = "admin. php"; </script>'); }}
if ($noAdmin == 0)
{ echo 'Неверные данные'; }}
else
{echo 'Ошибка прочтения файла'; }
? >
add. php
<?
$fp = fopen ('news. txt', 'r');
if ($fp)
{while (! feof ($fp))
{$mytext = fgets ($fp, 4096);
if ($mytext == '') {echo ''; }else{
$loginForm = explode ('#', $mytext);
echo '
<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>
'; }}}
else
{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 ({
timeout: 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="http://vk.com/id55852962" alt="Страничка мастера ВК" target="_blank"><img src="images/master. jpg" height="120" width="90" align="left"></a></td>
<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="http://vk.com/sakhnyasha" target="_blank">
<area shape="rect" coords="14,130,406,92" title="Пишите сюда=)!" href="http://my. mail.ru/mail/anya_sakhno" target="_blank">
</body>
</html>
Сторінка "Каталог виробів" album. php
<? header ("Content-Type: text/html; charset=utf-8");? >
<! DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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='http://ajax. googleapis.com/ajax/libs/jquery/1.4/jquery. min. js'></script>
<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 class="accordion">
<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; "
bgcolor="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="http://vk.com/sakhnyasha" target="_blank">
<area shape="rect" coords="14,130,406,92" title="Пишите сюда=)!" href="http://my. mail.ru/mail/anya_sakhno" target="_blank">
</body>
</html>
Сторінка "Блог майстра" other. php
<? header ("Content-Type: text/html; charset=utf-8");? >
<! DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en" lang="en">
<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> /*Заливка фона градиентом*/
body {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>
<?
require_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="http://vk.com/sakhnyasha" target="_blank">
<area shape="rect" coords="14,130,406,92" title="Пишите сюда=)!" href="http://my. mail.ru/mail/anya_sakhno" target="_blank">
</map>
</body>
</html>
Сторінка новин news.html
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en" lang="en">
<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="http://vk.com/sakhnyasha" target="_blank">
<area shape="rect" coords="14,130,406,92" title="Пишите сюда=)!" href="http://my. mail.ru/mail/anya_sakhno" target="_blank">
</footer>
</body>
</html>
Сторінка контактів kontakt.html
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en" lang="en">
<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>
<table border="0"
cellpadding=0
cellspacing=0
width="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>  </th></tr>
<tr><td>
<table border="0"
align="center"
cellpadding=3
cellspacing=0
bgcolor="white">
<tr><th align="center"><a href="index.html"><font size="5" color="black" ace="Gabriola">Главная</a></th><th>|</th>
Подобные документы
Структура клієнтської частини. Вибір елементів HTML4 і HTML5 для представлення контенту. Структурування інформаційного наповнення сайту. Забезпечення взаємодії серверної частини web-додатків з клієнтською. Програмування скриптів засобами JavaScript.
курсовая работа [3,3 M], добавлен 13.01.2014Розробка сайту, який буде мати можливість наповнення інформацією про стан команд та їх гравців у лізі в режимі реального часу. Переваги використання технології web 2.0. Написання програмного коду веб-сайту та його реалізація, головна сторінка Index.php.
дипломная работа [3,4 M], добавлен 18.08.2014Розробка динамічних та статичних зображень для сайту за допомогою відеоредактора Adobe After EffectCS6 та графічного редактора Adobe Photosop CS6. Розробка структури сайту. Багатоваріантний аналіз розв’язку задачі. Створення анімованого логотипу.
курсовая работа [1,8 M], добавлен 07.12.2014Види сайтів та характеристика сайту-візитки, сайту-магазину, новинного сайту та соціальних мереж. HTML та CSS як основа шаблону сайту та стилю оформлення. Розробка структури та вибір дизайну порталу новин, його програмний код та вигляд у браузері.
дипломная работа [2,4 M], добавлен 20.10.2013Опис інформаційного забезпечення системи для розробки сайту. Технічне завдання на розробку web-сторінки. Комплект засобів, проектування та завантаження сторінок. Тестування сайту в різних браузерах. Розрахунок собівартості та ціни програмного продукту.
дипломная работа [1,8 M], добавлен 14.05.2012Загальна характеристика особливостей алгоритму просування сайту. Розробка основних елементів фірмового стилю, що складають пакет рекламної кампанії. Етапи розробки Web-сайту компанії "Гранд Авто". Особливості програмної частини і структури сайту.
дипломная работа [3,3 M], добавлен 26.02.2012Вибір архітектури та інструментальних засобів розробки. Розробка модуля для перегляду сторінок сайту, доступного, зручного інтерфейсу системи адміністрування. Створення бази даних. Опис механізмів передачі даних між сторінками. Реалізація форуму на сайті.
дипломная работа [7,1 M], добавлен 24.09.2012Поняття про сайт, огляд його основних функцій і класифікація видів. Розробка сайту з використанням мов HTML, PHP, CSS та з базою даних MySQL, готового для розміщення в інтернеті. Засоби полегшення спілкування та обміну інформацією між викладачами.
дипломная работа [1,6 M], добавлен 26.08.2014Поняття мови РНР - скриптової мови програмування, яка була створена для генерації HTML-сторінок на стороні веб-серверу. Можливості і використання PHP, її переваги і недоліки. Розроблення сайту для турагенства за допомогою гіпертекстової розмітки HTML.
контрольная работа [11,2 M], добавлен 21.04.2015Проектування технологій навчання з теми "Створення веб-сайту засобами HTML". Організація та методика проведення лекційного, лабораторного та практичного (семінарського) заняття. Розробка дидактичних матеріалів до інноваційних технологій навчання.
курсовая работа [2,3 M], добавлен 21.12.2013
