Розробка персонального блогу з використанням технології СSS3 i jQuery

Сутність та атрибути предметної області. Вимоги до програмного забезпечення серверної частини та до клієнтського програмного забезпечення. Встановлення программи Abobe Dreamviewer CS3. Рекомендації для встановлення базового пакету Denwer 3 на комп’ютер.

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

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

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

П'яте правило визначає стиль hover для елементів a. За замовчанням в більшості браузерів текст елементів a підкреслюється. Це забере підкреслення, коли курсор миші перебуває над цими елементами.

Останнє, шосте правило, застосовується для елементів p, що є всередині елемента з атрибутом id, рівним «news»[12].

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

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

JavaScript - назва реалізації стандарту мови програмування ECMAScript компанії Netscape, базується на принципах прототипного програмування. Найпоширеніше і найвідоміше застосування мови -- написання сценаріїв для веб-сторінок, але, також, використовується для впровадження сценаріїв керування об'єктами вбудованими в інші програми.

JavaScript розроблений у компанії Netscape. На сьогоднішній день підтримується більшістю браузерів. Текст програми включається безпосередньо в HTML - документ і інтерпретується самим браузером (точніше, вбудованим у браузер рушієм JavaScript). Застосовується в основному для часткової автоматизації обробки і маніпуляції даними, які використовує сторінка.

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

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

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

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

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

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

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

JavaScript містить декілька вбудованих об'єктів: Global, Object, Error, Function, Array, String, Boolean, Number, Math, Date, RegExp. Крім того, JavaScript містить набір вбудованих операцій, які, строго кажучи, не обов'язково є функціями або методами, а також набір вбудованих операторів, що управляють логікою виконання програм. Синтаксис JavaScript в основному відповідає синтаксису мови Java (тобто, зрештою, успадкований від C), але спрощений порівняно з ним, щоб зробити мову сценаріїв легкою для вивчення. Так, приміром, декларація змінної не містить її типу, властивості також не мають типів, а декларація функції може стояти в тексті програми після неї.

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

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

<script type="text/javascript">

alert('Hello, World!'); </script>

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

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

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

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

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

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

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

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

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

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

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

jQuery -- популярна JavaScript-бібліотека з відкритим програмним кодом. Використовується більш ніж 31% від 10,000 найбільш відвідуваних сайтів. jQuery є найпопулярнішою бібліотекою JavaScript, яка потужно використовується на сьогоднішній день.

jQuery є вільним відкритим програмним забезпеченням з подвійним ліцензуванням під MIT License та GNU General Public License другої версії. Синтаксис jQuery розроблений, щоб зробити орієнтування у навігації зручнішим завдяки вибору елементів DOM, створенню анімації, обробки подій, і розробки AJAX-застосувань. jQuery також надає можливості для розробників, для створення плагінів у верхній частині бібліотеки JavaScript. Використовуючи ці об'єкти, розробники можуть створювати абстракції для низькорівневої взаємодії та створювати анімацію для ефектів високого рівня.

Основне завдання jQuery -- це надавати розробнику легкий та гнучкий інструментарій кросбраузерної адресації DOM об'єктів за допомогою CSS та XPath селекторів. Також даний фреймворк надає інтерфейси для Ajax-застосувань, обробників подій і простої анімації[19].

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

$('#test') //знаходимо елемент з id="test"

.text('Клікни по мені') //встановлюємо текст елемента рівним "Клікни по мені"

.addClass('myAlert') //додаємо клас "myAlert"

.css('color','red') //встановлюємо колір тексту червоним

.attr('alert','Привіт, світе!') // додаємо атрибут "alert" із значенням "Привіт, світе!"

.bind( // додаємо в обробник події click функцію, яка відкриє модальне

'click', // вікно із текстом, що вказаний в атрибуті "alert" ("Привіт, світе!")

function(){alert($(this).attr('alert'))}

);

1.5.2 Аналіз можливостей та вибір оптимального середовища реалізації програмної системи

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

За своєю функціональністю вони діляться (часто вельми умовно) на дві категорії:

- Редактор показує тільки вихідний код.

- Редактор показує готову сторінку в режимі WYSIWYG (Що бачиш, те й отримаєш).

Багато WYSIWYG - редактори дозволяють одночасно працювати і з кодом сторінки.

Серед великої кількості редакторів я вибрав Adobe Dreamweaver (попередня назва Macromedia Dreamweaver).

Остання версія HTML-редактора Adobe DreamWeaver CS 5, що відноситься до категорії WYSIWYG-редакторів, має дуже багато переваг: зручний інтерфейс, настроювання функцій, підтримка великих проектів і ShockWave-технологій, можливість закачування файлів через FTP, підтримка SSI і багато чого іншого. Для роботи в цій програмі не потрібно досконально знати HTML (у цьому і полягає перевага технології WYSIWYG)

Проте DreamWeaver на кілька кроків випереджає інші редактори, що використовують технологію WYSIWYG, у першу чергу завдяки тому, що генерує «чистий» HTML-код. DreamWeaver дозволяє позбутися однотипної роботи при створенні сторінок (наприклад, верстка тексту) за допомогою використання опції «Запис послідовності команд» (записується послідовність вироблених вами команд, після натискаєте, наприклад, CTRL+P, DreamWeaver відтворює їх усі у тій самій послідовності).

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

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

У ній підсвічується код, тобто якщо написали щось не так, відразу буде зрозуміло, де помилка, є можливість роботи з CSS, php, java, вставкою flash об'єктів і ін.

У програмі передбачено три режими кодування: Візуальний, Режим Коду, і Суміщений режим.

1.6 Кодування архітектури програмної системи

Спочатку кодується загальна частина юлогу.

Даний фрагмент коду виконує підключення MySQL сервера та вибарає для роботи потрібну базу даних з допомогою функції mysql_select_db().

<?php

$db = mysql_connect ("localhost","Armorking","worobiiwka");

mysql_select_db("blog",$db);

?>

Щоб не виникало проблем з кодування всюди встановлюється кодування cp1251:

<?php

mysql_query("SET character_set_client='cp1251'");

mysql_query("SET character_set_connection='cp1251'");

mysql_query("SET character_set_results='cp1251'");

mysql_query("SET NAMES 'cp1251'");

?>

Ці команди винесені в окремий файл bd.php щоб неписати код кожен раз в всіх документах прописано:

<?php include ("blocks/bd.php")?>

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

<?php

$result = mysql_query("SELECT title,meta_d,meta_k,text FROM settings WHERE page='index'",$db);

if (!$result)

{

echo "<p>Запит на вибірку данних із бази не пройшов. Зв'яжіться будь-ласка з адміністратором armorking90@mail.ru <br><strong>Код помилки:</strong></br></p>";

exit (mysql_error());

}

if (mysql_num_rows($result) > 0)

{

$myrow = mysql_fetch_array($result);

}

else

{

echo "<p>Інформація по запиту не може бути витягнута в таблиці немає записів.</p>";

exit ();

}

?>

Дана частина коду відповідає за навігацію сайту:

<ul>

<li><a href="index.php">Головна</a></li>

<li><a href="news.php">Новини</a></li>

<li><a href="recall.php">Зворотній звязок</a></li>

<li><a href="aboutme.php">Про мене</a></li>

</ul>

Пошук, категорії, архів, останні записи і інформери винесені в окремий файл bar.php. За вивід пошуку відповідає код:

<div class="text">Пошук</div>

<div class="radius"><form action="view_search.php" method="post" name="form_s" id="sForm">

<p class=" textinput">Для пошуку новини потрібно ввести запит більший за 4 символи</p>

<p><input name="search" type="text" size="25" maxlength="40"></p>

<p>

<input class="submit" name="submit_s" type="submit" value="&#1064;&#1091;&#1082;&#1072;&#1090;&#1080;">

</p></div>

</form>

За вивід категорій відповідає:

<div class="text">Категорії</div>

<div class="radius">

<?php

$result2=mysql_query ("SELECT * FROM categories",$db);

if (!$result2)

{

echo "<p>Запит на вибірку данних із бази не пройшов. Зв'яжіться будь-ласка з адміністратором armorking90@mail.ru <br><strong>Код помилки:</strong></br></p>";

exit (mysql_error());

}

if (mysql_num_rows($result2)>0);

{

$myrow2= mysql_fetch_array($result2);

do

{

printf("<p><aclass='nav_link'href='view_cat.php?cat=%s'>%s</a></p>",$myrow2["id"],$myrow2["title"]);

}

while ($myrow2=mysql_fetch_array($result2));

}

?>

За виведення останіх записів відповідає приблизно такий самий код,але інший запит до БД і інше формування посилання.Запит до БД має вигляд:

$result3 = mysql_query("SELECT id,title FROM data ORDER BY date DESC, id DESC LIMIT 5",$db);

А формування посилання має вигляд:

printf("<p><aclass='nav_link'href='view_post.php?id=%s'>%s</a></p>",$myrow3["id"],$myrow3["title"]);

За вивід інформерів відповідає код:

</div>

<div class="text">Інформери</div>

<div class="radius">

<p><a href="http://2ip.ru/" target="_blank" title="Узнай свой IP адрес"><img src="http://2ip.ru/sbar/2ip1.gif" alt="Узнай свой IP адрес"/></a></p>

<p><a href="http://www.dilovamova.com/"><IMG width=180 height=250 border=0 alt="Календар свят і подій. Листівки, вітання та побажання" title="Календар свят і подій. Листівки, вітання та побажання"src="http://www.dilovamova.com/images/wpi.cache/informer/informer_200.png"></a></p>

</div>

За виведення новин відповідає код:

<?php

printf ("<p class='view_news_title'>%s</p><p>%s</p><p class='view_news_date'>Автор: %s ||Дата: %s ||Переглядів: %s</p>",$myrow["title"],$myrow["text"],$myrow["author"],$myrow["date"],$myrow["view"]);

echo "<p class='post_coments'>Коментрарі до статті:</p>";

$result3 = mysql_query("SELECT * FROM comments WHERE post='$id'",$db);

if (mysql_num_rows($result3) > 0)

{

$myrow3 = mysql_fetch_array($result3);

do

{

printf("<divfclass='radius2'><pfclass='post_coments_add'>Коментарійfдодав(ла):f<strong>%s</strong>f<br>fДата:<strong>%s</strong></p><p>%s</p></div>",$myrow3["author"],$myrow3["date"],$myrow3["text"]);

}

while ($myrow3 = mysql_fetch_array($result3)); }

$result4f=fmysql_query("SELECTfimgfFROMfcomments_settings",$db);

$myrow4 = mysql_fetch_array($result4);

?>

<p class='post_coments'>Додайте свій коментар:</p>

<form action="coment.php" method="post" name="form_com">

<p><label>Вашеfімя:<br><br>f</label><inputfname="author" type="text" size="30" maxlength="30"></p>

<p><label>Текст комментаря: <br><br> <textarea name="text" cols="32" rows="4"></textarea></label></p><p>Введіть сумму чисел с картинки:<br><img style='margin-top:17px;' src="<? echo $myrow4["img"]; ?>" width="80" height="40"><br>

<input style='margin-bottom:16px;' name="pr" type="text" size="5" maxlength="5"></p>

<input name="id" type="hidden" value="<? echo $id; ?>">

<p><inputname="sub_com"type="submit"value="Коментувати"></p>

</form>

В додатку Б буде наведено лістинг головної сторінки, в додатку В,а лістинг пошуку по сайту, а в додатку Г лістинг сторінки style.css

1.7 Розробка користувацьких інтерфейсів програмного забезпечення

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

Щоб надати дизайну веб-сайта бажаний вигляд застосовуються СSS файли. В додатку Г буде наведено лістинг сторінки style.css.

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

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

Копірайт - унікальний текст.

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

Рерайт - відредагована або змінена стаття.

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

1.8 Тестування функціональності роботи ПЗ

Перевірка функціональності роботи ПЗ буде проходити в в браузерах:

1. Opera

2. Mozilla Firefox

3. Google Chrome

В всіх 3 браузерах всі графічні елементи відображають, як і задумано, через те, що браузери підтримують крос-браузерну версту. В браузері Internet Explorer перевірка не проводилася, через відсталість цього браузеру, елементи такі як тіні CSS3 можуть погано відображжатися.

Після перевірки в браузерах проводжу перевірку валідатором коду W3C. Результат: 15 Errors, 8 warning(s), що є досить не погано. Ці помилки не є критичними при роботі сайту, проте для пошукових роботів, тому блог буде важче знайти в пошукових системах(таких як Google).

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

$search = trim($search);

$search = stripslashes($search);

$search = htmlspecialchars($search);

2. СПЕЦІАЛЬНА ЧАСТИНА

2.1 Інструкція з інсталяції та налаштування програмної системи

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

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

Рисунок 2.1 - Параметри безкоштовного хостингу

Рисунок 2.2 - Вікно створення нового акаунта

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

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

Рисунок 2.3 - Вікно завершення створення нового акаунта

Паралельно на електронну пошту приходить лист з реєстраційною інформацією:

1). Адреса вашого сайту: http://armorkingblog.elitno.net/;

2). Панель керування акаунтом: http://cp.topua.net/;

3). Логін: armorkingblog;

4). Пароль: RcTxEnGZ;

5). FTP сервер: ftp://elitno.net;

6). FTP логін: blog;

7). FTP пароль: RcTxEnGZ;

8). MySQL hostname: localhost;

9). MySQL username: armorkingblog;

10). MySQL password: RcTxEnGZ;

11). MySQL database: armorkingblog;

Пароль від панелі керування, FTP-сервера та MySQL бази одинакові, і тому вони змінюються всі разом.

Рисунок 2.4 - Вікно програми Total Commander

Після отримання листа заходжу в програму Total Comander і за допомогою команди “Connect to FTP” заходжу на сервер. Сайт потрібно розмістити в папці site, як зображено на рисунку 2.4.

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

Рисунок 2.5 - Головне меню панелі керування

2.2 Інструкція з інсталяції та налаштування допоміжного програмного забезпечення

Рекомендації для встановлення базового пакету Denwer 3 на комп'ютер.

Скачати потрібний дистрибутив можна з офіційного сайту Denwer. В даному розділі буде розглянений процес установки на прикладі Denwer 3.2.3. На сторінці завантаження вибираю для скачування файл з розширенням *.exe. Зазвичай вказано так: Denwer3_Base_2010-11.

Після скачування на комп'ютері з'явиться файл з розширенням exe, наприклад Denwer3_Base_2010-11-07_a2.2.4_p5.3.1_m5.1.40_pma3.2.3.exe. Базовий пакет Denwer включає в себе:

- Інсталятор (підтримується також інсталяція на flash-накопичувач).

- Apache, SSL, SSI, mod_rewrite, mod_php.

- PHP5 з підтримкою GD, MySQL, sqLite.

- MySQL5 з підтримкою транзакцій.

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

- Система управління запуском і завершенням всіх компонентів Denwer.
- phpMyAdmin - система управління MySQL через Web-інтерфейс.
- Емулятор sendmail і SMTP-сервера .

Щоб запустити установку потрібно два рази натиснути по файлу.

До початку інсталяції звертаю увагу на таке.

- Протокол TCP/IP необхідно встановити і налаштувати відповідним чином.

- З використанням деяких файрволів чи подібного програмного забезпечення слід пам'ятати деякі такі програми некоректно використовують WinSock АПІ, що може спричинити до проблем при встановлення Apache.

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

Після виконаня умов можна переходити до встановлення.

Покроковий опис встановлення базового пакету Denwer 3:

Крок 1 - Підтвердження інсталяції

Рисунок 2.6 - Вікно підтвердження початку інсталяції базового пакету Denwer 3

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

Крок 2 - Початок інсталяції.

Після підтвердження починається інсталяції базового пакету Denwer 3.

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

Рисунок 2.7 - Вікно початку інсталяції базового пакету Denwer 3

Крок 3- Перевірка. Вибір директорії встановлення веб-сервера.

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

1. Пошук директорії Windows і командного інтерпритатора.

2. Перевірка середовище PATH, DCOM, WinSock2 i ODBS.

3. Утиліта Ping.exe і перевірка мережевих протоколів.

Рисунок 2.8 - Вікно вибору директорії встановлення

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

D:\Webservers. Якщо допустите помилку інсталятор виведе на екран помилку:

“Ви повинні задати директорію з міткою диску!”

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

Якщо так потрібно набрати на клавіатурі: Y + Enter, якщо директорію потрібно змінити: N+ Enter.

Крок 4 - Підготовка до створення віртуального диску.

На цьому етапі буде створено віртуальний диск на жорсткому диску.

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

Рисунок 2.9 - Вікно вибіркового типу встановлення

Після натиснення клавіші Еnter відбувається пошук програми subst.

Після запуску програми буде виведене вікно, яке зображене на рисунку 2.10. Потрібно ввести букву, під якою буде створений вірутальний диск.

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

Крок 5 - Створення віртуального диску.

На рисунку 2.11 зображене вікно, яке з'явиться після запуску утиліти subst. Після чого необідно нажати клавішу Enter для копіювання файлів в директорію веб-сервера.

Рисунок 2.11 - Вікно завершення вводу даних про віртуальний диск

Крок 6 - Копіювання файлів в дирикторію вeб-сервера.

На рисунку 2.12 показаний процес копіювання файлів сервера.

Рисунок 2.12 - Процес копіювання файлів в дирикторію вeб-сервера

Залишається лише очікувати закінчення процесу копіювання.

Крок 7 - Режими запуску веб-сервера (див.рис. 2.13).

Рисунок 2.13 - Вікно вибору режиму запуску веб-сервера

На цьому етапі потрібно вибрати один із варіантів запуску веб-сервера:

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

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

Вибираю пункт 1 і нажимаю Enter.

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

Рисунок 2.14 - Закінчення установки базового пакету Denwer 3

Встановлення программи Abobe Dreamviewer CS3.

Для початку інсталяції Adobe Dreamviewer CS3 потрібно запустити файл Setup.exe. Після перевірки системи почнеться інсталяції з прийняття умов ліцензійного договіру.

Рисунок 2.15 - Початок встановлення Adobe Dreamviewer CS3

Для продовження установки погодитеся з ліцензійною угодою натиснувшиAccept. У наступному вікні будуть відображені наявні на комп'ютері жорсткі диски і виділений диск на який буде виконуватися установка

Рисунок 2.16 - Вибір диска для встановлення Adobe Dreamviewer CS3

Можливо змінити місце установки, але деякі файли все одно будуть встановлені на системний диск. Переважно встановити програму в директорію за умовчанням. У правій частині наступного вікна майстра відобразяться відомості про обрані параметри встановлення: папка, мова, встановлювані компоненти програми, диск установки. Для установки з указаннима параметрами потрібно натиснути Install.

Рисунок 2.17 - Інформація при встановлення Adobe Dreamviewer CS3

Всі подальші дії програма виконує автоматично. В останньому вікні майстра установки з'явиться повідомлення «Installation completed» і список встановлених компонентів.

Рисунок 2.18 - Закінчення встановлення Adobe Dreamviewer CS3

2.3 Інструкція з експлуації програмної системи

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

Ввівши в адресній стрічці браузера: http://armorkingblog.elitno.net/ корисутвач потрапляє на головну сторінку блогу

Рисунок 2.19 - Головна сторінка блогу

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

Рисунок 2.20 -Сторінка новин блогу

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

Рисунок 2.21 -Сторінка зворотній звязок

На вкладці Про мене користувач знайде інформацію про власника блогу

Рисунок 2.22 -Сторінка про мене

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

Рисунок 2.23 -Додавання коментаря до новини

Інструкція для адміністратора.

Адміністратраторська частина: http://armorkingblog.elitno.net/admin/

Для початку потрібно аутентифікуватися, в вікні яке зображене на рисунку 2.24.

Рисунок 2.24 -Вікно вводу логіну і паролю для адміністратора

Рисунок 2.26 -Вікно додавання тексту

Рисунок 2.27 -Вікно редагування тексту

Рисунок 2.24 -Вікно видалення тексту

Адміністратор попаде на головну сторінку адміністративного блоку звідси він може добавляти інформацію(рис. 2.25), редагувати вже існуючу(рис. 2.26) і видаляти інформацію(рис. 2.27).

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

ВИСНОВКИ

Під час написання дипломної роботи був розроблений персональний блог за допомогою технологій CSS3 і jQuery.

Для роботи бази даних була обрана СКБД MySQL, що обумовлюється найкращими характеристиками системи безпеки, структури баз даних та кількості ресурсів, що затрачається на СКБД.

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

Сайт складається з двох частин: основної частини та адміністративної

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

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

В адміністративній частині є можливость оновлювати, редагувати чи видаляти інформацію основної частини.

ПЕРЕЛІК ПОСИЛАНЬ

1. PHP: обучение на примерах, А. Кухарчик Новое знание, 2004 г.240 стр.

2. PHP/MySQL для начинающих. Харрис Є. Кудиц-образ 2005 г.384 стр.

3. Основьі програмирования на PHP. Ульман Вільямс Л. 2006р 624 стр.

4. PHP: настольная книга програмиста. А. Мазуркевич, Новое знание2007р.

5. Разработка Web-приложений на PHP і MySQL. Лаура Томсон. Люк Веллинг. СПб: ООО 'ДиаСофтЮП', 2003р.. - 672 с.

6. PHP Профессиональное программирование, Энди Гутманс, Стиг Баккен, Дерик Ретанс Символ 2006р. стр. 700

7. PHP 5. Библиотека профессионала Леон Аткинсон, Зеев Сураски Символ 2006р стр. 350

8. Профессиональное программирование на PHP. Джордж Шлосснейгл. 2006р. стр. 413

9. PHP. В подлиннике. Котеров Д. , Костарев А. БХВ-Петербург 2005р. стр 245

10. HTML и CSS в примерах. Соколов С. А. БХВ-Петербург 2007р. стр. 448

11. Adobe Flash CS3. Самоучитель. Бурлаков М. В. 2007р. Диалектика стр 670

12. CSS-каскадные таблицы стилей. Эрик А. Мейер. Символ-Плюс 2006р. стр.596

13. Навч. посібник для вищих навч. закладів/ В. Ц. Жидецький [и др. ]; ред. В. Ц. Жидецький; Укр. держ. лiсотехнiчний ун-т, Укр. академiя друкарства. - Львiв: Афiша, 2000. - 350 с.: ил. - Библиогр.: с.339

14. Тарасова В.В. Екологічна статистика. Підручник.-К.: Центр учбової літератури,2008.-392 с.

15. Безпека життєдіяльності: Курс лекцій. - Ірпінь: Академія ДПС України, 2001. - 356 с.

16. Валерий Коржов Многоуровневые системы клиент-сервер. Издательство Открытые системы 17 июня 1997р 550с.

17. RFC 2616 [Електронний ресурс]. - Режим доступу: URL: http://tools.ietf.org/html/rfc2616

18. Методика составления спецификаций требований к программному обеспечению (IEEE-830-1998) [Електронний ресурс]. - Режим доступу: URL: http://www.webisgroup.ru/services/programming/srs/ieee-830-1998/

19. Офіційний сайт jQuery [Електронний ресурс]. - Режим доступу:URL: http://jquery.org/

ДОДАТОК А

<?php

include ("blocks/bd.php");

$result = mysql_query("SELECT title,meta_d,meta_k,text FROM settings WHERE page='index'",$db);

if (!$result)

{

echo "<p>Запит на вибірку данних із бази не пройшов. Зв'яжіться будь-ласка з адміністратором armorking90@mail.ru <br><strong>Код помилки:</strong></br></p>";

exit (mysql_error());

}

if (mysql_num_rows($result) > 0)

{

$myrow = mysql_fetch_array($result);

}

else

{

echo "<p>Інформація по запиту не може бути витягнута в таблиці немає записів.</p>";

exit ();

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<metafhttp-equiv="content-type"fcontent="text/html; charset=windows-1251" />

<meta name="description" content="<?php echo $myrow['meta_d']; ?>/">

<meta name="keywords" content="<?php echo $myrow['meta_k']; ?>"/>

<linkfrel="stylesheet"fhref="style.css"ftype="text/css" media="screen, projection" />

<title><?php echo $myrow['title']; ?></title>

<scriptftype="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

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

</head>

<body>

<div id="wrapper">

<div id="header">

<afhref="/"><divfid="logo"><imgfsrc="img/logo.png" alt="Персональний блог Романа Свірського"/></a>

</div>

<div id="menu-facade">

<div id="menu">

<?php include ("blocks/menu.php");?>

</div>

</div>

</div><!-- #header-->

<div id="middle">

<div id="container">

<div id="content">

<?php echo $myrow['text']; ?>

</div><!-- #content-->

</div><!-- #container-->

<div class="sidebar" id="sideRight">

<?php

include ("blocks/bar.php");?>

</div><!-- .sidebar#sideRight -->

</div><!-- #middle-->

</div><!-- #wrapper -->

<div id="footer">

<div id="copy"><?php

include ("blocks/footer.php");?></div>

<p id="back-top">

<a href="#top"><span></span>В верх</a>

</p></div><!-- #footer --></body></html>

ДОДАТОК Б

<?php

include ("blocks/bd.php");

if (isset ($_POST['submit_s']))

{

$submit_s = $_POST['submit_s'];

}

if (isset ($_POST['search']))

{

$search = $_POST['search'];

}

if (isset($submit_s))

{

if(empty($search) or strlen ($search) < 4)

{

exit ("<p>Ви не ввели фразу в пошуковий запит, або запит менший за 4 символи</p>");

}

$search = trim($search);

$search = stripslashes($search);

$search = htmlspecialchars($search);

}

else

{

exit ("<p>Ви звернулися до цього файлу без параметрів</p>");

}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta name="description" content="<?php echo $myrow['meta_d']; ?>"/>

<meta name="keywords" content="<?php echo $myrow['meta_k']; ?>"/>

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

<title><?php echo "Новини виведені по пошуку - $search " ?></title>

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

<scriptаtype="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

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

</head>

<body>

<div id="wrapper">

<div id="header">

<aаhref="/"><divаid="logo"><imgаsrc="img/logo.png" alt="Персональний блог Романа Свірського"/></a>

</div>

<div id="menu-facade">

<div id="menu">

<?php include ("blocks/menu.php");?>

</div>

</div>

</div><!-- #header-->

<div id="middle">

<div id="container">

<div id="content">

<td width="489" valign="top" class="osnova"> <p><?php echo $myrow['text']; ?>

<p>

<?php echo $myrow['text'];

$resultа=аmysql_query("SELECT id,title,description,date,author,mini_img,view FROM data WHERE MATCH(text) AGAINST ('$search')",$db);

if (!$result)

{

echo "<p>Запит на вибірку данних із бази не пройшов. Зв'яжіться будь-ласка з адміністратором armorking90@mail.ru <br><strong>Код помилки:</strong></br></p>";

exit (mysql_error());

}

if (mysql_num_rows($result) > 0)

{

$myrow = mysql_fetch_array($result);

do

{

printf ("<div class='box'><table align='center' class='post'>

<tr>

<td class='post_title'>

<pаclass='post_name'><imgаclass='mini'аalign='left' src='%s'><a href='view_post.php?id=%s'>%s</a></p>

<p class='post_adds'>Дата добавления: %s</p>

<p class='post_adds'>Автор : %s</p></td>

</tr>

<tr>

<td>%s <p class='post_view'>Переглядів: %s</p></td>

</tr>

</table><br><br></div>",$myrow["mini_img"],$myrow["id"],$myrow["title"], $myrow["date"],$myrow["author"],$myrow["description"], $myrow["view"]);

}

while ($myrow=mysql_fetch_array($result));

}

else

{

exit ("<p> Записів звязаних зі словом <strong>$search</strong> не знайдено.</p> <p><br> <input name='back' type='button' value='Повернутися назад' onclick='javascript:self.back();'>");

}

?>

}

?>

</td>

</tr>

</table></td>

</tr>

<tr>

<td><img src="pictures/foot.jpg" width="690" height="25"></td>

</tr>

</table>

</div><!-- #content-->

</div><!-- #container-->

<div class="sidebar" id="sideRight">

<?php

include ("blocks/bar.php");?>

</div><!-- .sidebar#sideRight -->

</div><!-- #middle-->

</div><!-- #wrapper -->

<div id="footer">

<div id="copy"><?php

include ("blocks/footer.php");?></div>

<p id="back-top">

<a href="#top"><span></span>В верх</a>

</p>

</div><!-- #footer -->

</body>

</html>

ДОДАТОК В

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-image:url(img/bg.png);

font-family:Verdana;

font-size:12px;

color: #424242;

width: 100%;

height: 100%;

}

a {

color: blue;

outline: none;

text-decoration: none;

outline:none;

}

a:hover {

text-decoration: none;

color:#CC0000;

}

p {

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

color: #424242;

margin:18px;

}

img {

border: none;

}

input {

vertical-align: middle;

}

#wrapper {

width: 1000px;

margin: 0 auto;

min-height: 100%;

height: auto !important;

height: 100%;

background-color:#ffffff;

}

.tr{border:medium 1px;}

.nav_link{

color:#000000;

font-size:12px;

margin-top:10px;

margin-bottom:10px;}

.credits {

border-bottom: solid 1px #eee;

padding-bottom: 10px;

margin: 0 0 30px;

}

#pagewrap {

margin: 0 auto;

width: 600px;

padding-left: 150px;

position: relative;

}

/*

назад на верх кнопка

*/

#back-top {

position: fixed;

bottom: 30px;

margin-left: -150px;

}

#back-top a {

width: 108px;

display: block;

text-align: center;

font: 11px/100% Arial, Helvetica, sans-serif;

text-transform: uppercase;

text-decoration: none;

color: #bbb;

/* background color transition */

-webkit-transition: 1s;

-moz-transition: 1s;

transition: 1s;

}

#back-top a:hover {

color: #000;

}

/* arrow icon (span tag) */

#back-top span {

width: 108px;

height: 108px;

display: block;

margin-bottom: 7px;

background: #ddd url(img/up-arrow.png) no-repeat center center;

/* rounded corners */

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

/* background color transition */

-webkit-transition: 1s;

-moz-transition: 1s;

transition: 1s;

}

#back-top a:hover span {

background-color: #777;

}

/* Шапка----------------------------*/

#header {

height: 350px;

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

}

.news{ border:1px solid #000000; width:95%;-moz-border-radius:15px;

border-radius:5px;color:#000000;}

.news_title{background-color:#f6f6f6;-webkit-border-radius:15px;

-moz-border-radius:15px;

border-radius:5px;color:#a9a9a9;

padding:5px;

font: 15px times, georgia, serif;

margin:0,25%,25%;}

.news_name{ font-weight:bold; margin-top:7px;margin-bottom:7px;}

.news_date{ font-size: 11px; margin-top:7px; margin-bottom:7px; color:#424242;}

.view_news_title{font-size:26px;

font-family:Georgia, "Times New Roman", Times, serif;

text-align:center;

color:#336600;

padding:12px;}

.view_news_date{ font-size:11px; color:#424242; margin-top:7px; margin-bottom:7px; font-weight:bold;}

.view_image{

max-width:200px;

text-align:center;

}

.post_title{background-color:#f6f6f6;-webkit-border-radius:15px;

-moz-border-radius:15px;

border-radius:5px;color:#a9a9a9;

padding:5px;

font: 15px times, georgia, serif;

margin:0,25%,25%;}

.post_name{ font-weight:bold; margin-top:7px;margin-bottom:7px;}

.post_adds{ font-size: 11px; margin-top:7px; margin-bottom:7px; color:#424242;}

.post_coments{background-color:#f6f6f6;-webkit-border-radius:15px;

-moz-border-radius:15px;

border-radius:5px;color:#a9a9a9;

padding:5px;

font: 15px times, georgia, serif;

margin:0,25%,25%;}

.post_coments_add{

font-size:11px;}

.post_div{

border-top: 1px solid gray;

border-bottom:1px solid gray;

margin:15px;

}

.post_div p{

margin-left:0px;

}

.mini {

border: 1px solid #000000;

margin-right:10px;

margin-top: 2px;}

/* Центр----------------*/

#middle {

width: 100%;

padding: 0 0 40px;

height: 1%;

/*float:left;*/

}

#middle:after {

content: '.';

display: block;

clear: both;

visibility: hidden;

height: 0;

}

#container {

width: 100%;

float: left;

overflow: hidden;

}

#content {

padding: 0 270px 20px 0;

overflow:hidden;font-size:14px;

font-family:Verdana, Arial, Helvetica, sans-serif;

text-align:left;

margin-left:20px;

}

/* Правий бік---------------------*/

#sideRight {

float: left;

margin-right: -3px;

width: 210px;

margin-left: -210px;

background: #f7f9f6;

}

p{font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

margin:15px;

}

.radius{

background:#a9a9a9;

-webkit-border-radius:15px;

-moz-border-radius:15px;

border-radius:15px;color:#a9a9a9;

padding:5px;

color: white;

font: 15px times, georgia, serif;

margin:0,25%,25%;

}

.radius2{

background:#a9a9a9;

-webkit-border-radius:15px;

-moz-border-radius:15px;

border-radius:15px;color:#a9a9a9;

padding:5px;

color: white;

font: 15px times, georgia, serif;

margin:0,25%,25%;

margin-bottom: 10px;

margin-top:10 px;

}

.radius3{

background:#a9a9a9;

-webkit-border-radius:15px;

-moz-border-radius:15px;

border-radius:5px;color:#a9a9a9;

padding:5px;

color: white;

font: 15px times, georgia, serif;}

.informer{

margin:0 25% 0 25%;

width:50%;

}

.pogoda{

margin:0% 40px 0 40px;

width:50%;

}

.text{

font-size:14px;

font-family:Verdana, Arial, Helvetica, sans-serif;

text-align:center

}

.text_osnova{

font-size:14px;

font-family:Verdana, Arial, Helvetica, sans-serif;

text-align:left;

margin-left:20px;

}

.text_verh{

font-size:26px;

font-family:Georgia, "Times New Roman", Times, serif;

text-align:center;

color:#336600;

padding:12px;

}

.text_adresa{

font-size:14px;

font-family:Verdana, Arial, Helvetica, sans-serif;

text-align:left;

font-style:italic;

}

.img_text{

size:150px;

text-decoration:none;

text-align:center;

}

/* Футер---------*/

#footer {

width: 1000px;

margin: -40px auto 0;

height: 40px;

background-image:url(img/footer.gif);

}

#copy {

font: 15px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

color:#000000;

text-align:center;

}

#copy a{

color:#000000;

text-decoration:none;

}

/********************ЛОГО*********************/

#logo{

width:385px;

height:80px;

margin-top:60px;

float:left;

}

#logo img{

width:385;

height:80;

}

#menu-facade {

width:1000px;

height:42px;

/*position:relative;*/

float:left;

margin-top:200px;

background-image:url(img/menu-facade.gif);

}

#menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

#menu ul{

background:#333333;

height:42px;

list-style:none;

margin:0;

padding:0;

}

#menu li{

float:left;

padding:0px;

position:relative;

}

#menu li a{

background:#333333 bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

width:250px;

line-height:42px;

margin:0px;

padding:0px 0px;

text-align:center;

text-decoration:none;

}

#menu li a:hover, .menu ul li:hover a{

background: 2580a2 bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

#menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:250px;

z-index:200;

left:0;

/*top:1em;*/

}

#menu li:hover ul,

#menu li ul:hover{

display:block;

}

#menu li li {

background:url(images/osnova.gif) bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

#menu li:hover li a{

background:none;

}

#menu li ul a{

display:block;

height:35px;

line-height:32px;

font-size:14px;

font-style:normal;

margin:0px;

width:100%!important;

padding:0px 10px 0px 15px;

text-align:left;

}

#menu li ul a:hover, .menu li ul li:hover a{

background:2580a2 center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

#menu p{

clear:left;

}

.box{

margin: 50px;

min-height: 150px;

padding: 0 0 1px 0;

position:relative;

background: #fff;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));

background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);

border-top: 1px solid #ccc;

border-right: 1px solid #ccc;

border-left: 1px solid #ccc;

-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

}

/* Липучка зверху зліва */

.box:before{

content: '';

position:absolute;

width: 130px;

height: 30px;

border-left: 1px dashed rgba(0, 0, 0, 0.1);

border-right: 1px dashed rgba(0, 0, 0, 0.1);

background: rgba(0, 0, 0, 0.1);

background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));

background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

-webkit-transform:translate(-50px,10px)

skew(10deg,10deg)

rotate(-50deg);

-moz-transform:translate(-50px,10px)

skew(10deg,10deg)

rotate(-50deg);

-o-transform:translate(-50px,10px)

skew(10deg,10deg)

rotate(-50deg);

transform:translate(-50px,10px)

skew(10deg,10deg)

rotate(-50deg);

}

/* Липучка справа знизу */

.box:after{

content: '';

position:absolute;

right:0;

bottom:0;

width: 130px;

height: 30px;

background: rgba(0, 0, 0, 0.1);

background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));

background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));

border-left: 1px dashed rgba(0, 0, 0, 0.1);

border-right: 1px dashed rgba(0, 0, 0, 0.1);

-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);

-webkit-transform: translate(50px,-20px)

skew(10deg,10deg)

rotate(-50deg);

-moz-transform: translate(50px,-20px)

skew(10deg,10deg)

rotate(-50deg);

-o-transform: translate(50px,-20px)

skew(10deg,10deg)

rotate(-50deg);

transform: translate(50px,-20px)

skew(10deg,10deg)

rotate(-50deg)

}

/* Поля і кнопки */

input, textarea {

padding: 9px;

border: solid 1px #E5E5E5;

outline: 0;

font: normal 13px/100% Verdana, Tahoma, sans-serif;

width: 200px;

background: #FFFFFF url('bg_form.png') left top repeat-x;

background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));

background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);

box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

}

textarea {

width: 400px;

max-width: 400px;

height: 150px;

line-height: 150%;

}

input:hover, textarea:hover,

input:focus, textarea:focus {

border-color: #C9C9C9;

-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;

}

.form label {

margin-left: 10px;

color: #999999;

}

.submit input {

width: auto;

padding: 9px 15px;

background: #617798;

border: 0;

font-size: 14px;

color: #FFFFFF;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

#sForm input

{ width:150px;}

#contact-wrapper {

width:430px;

border:1px solid #e2e2e2;

background:#f1f1f1;

padding:20px;

}

#contact-wrapper div {

clear:both;

margin:1em 0;

}

#contact-wrapper label {

display:block;

float:none;

font-size:16px;

width:auto;

}

form#contactform input {

border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;

border-style:solid;

border-width:1px;

padding:5px;

font-size:16px;

color:#333;

}

form#contactform textarea {

font-family:Arial, Tahoma, Helvetica, sans-serif;

font-size:100%;

padding:0.6em 0.5em 0.7em;

border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;

border-style:solid;

border-width:1px;

}

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


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

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