Розробка інформаційного веб-сайту з використанням мови програмування PHP

rm /etc/apparmor.d/usr.sbin.named

Перезапускаю apparmor:

/etc/init.d/apparmor restart

Запускаємо bind9:

/etc/init.d/bind9 start

Якщо все зроблено правильно, то помилок бути не повинно. Якщо bind раптом не запустився, то варто перевірити /var/log/syslog на наявність помилок:

tail/var/log/syslog

Якщо все працює правильно, то потрібно приступити до налаштування зони для мого домену domain.com

Створюю файл конфігурації зон:

nano /var/lib/named/etc/bind/zones.conf

З наступним змістом:

zone " domain.com " {

type master;

file " /etc/bind/domain.com " ;

} ;

Встановлюю його власника:

chown bind:bind/var/lib/named/etc/bind/zones.conf

Редагую файл конфігурації bind, щоб він чіпляв конфігурацію зон:

nano/var/lib/named/etc/bind/named.conf

Додаю в нього рядок include " zones.conf " ;

Залишилося лише створити файл зони domain.com:

nano/var/lib/named/etc/bind/domain.com

З наступним змістом:

$ TTL 86400

@ IN SOA ns1.domain.com . root.domain.com . (

2010081301 ; Serial

3600 ; Refresh

900 ; Retry

604800 ; Expire

86400 ; Minimum

) ;

@ IN NS ns1.domain.com .

@ IN A 192.168.1.1

ns1 IN A 192.168.1.1

ns2 IN A 192.168.1.1

www IN CNAME @

domain.com - відповідно ім'я вашого домену. Поміняйте значення перед параметром; Serial на поточну дату. Останні цифри в рядку з датою (01) позначають скільки разів раз зона редагувалася за поточну добу. Так само не забудьте поміняти IP адреса, з яким ви пов'язуєте свій домен (192.168.1.1).

Після збереження файлу виставляємо його власника:

chown bind:bind/var/lib/named/etc/bind/domain.com

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

rndc reload

І перевірити роботу сервера:

nslookup domain.com 127.0.0.1

Якщо все працює вірно, то відповідь сервера буде виглядати:

Server : 127.0.0.1

Address: 127.0.0.1 # 53

Non- authoritative answer :

Name: domain.com

Address: 192.168.1.1

На цьому налаштування DNS серверу завершена.

1.4.10 Встановлення серверу електронної пошти sendmail

Поштовий сервер, сервер електронної пошти -- в системі пересилки електронної пошти так зазвичай називають агент пересилання повідомлень (англ. mail transfer agent, MTA). Це комп'ютерна програма, яка передає повідомлення від одного комп'ютера до іншого. Зазвичай поштовий сервер працює "за лаштунками", а користувачі мають справу з іншою програмою - клієнтом електронної пошти (англ. mail user agent, MUA).

Наприклад, в поширених конфігураціях клієнтом пошти користувача є Outlook Express, повноцінна версія Microsoft Outlook, або Mozilla Thunderbird. Коли користувач набрав повідомлення і посилає його одержувачу, поштовий клієнт взаємодіє з поштовим сервером, використовуючи протокол SMTP. Поштовий сервер відправника взаємодіє з поштовим сервером одержувача (безпосередньо або через проміжний сервер -- релей). На поштовому сервері одержувача повідомлення потрапляє в поштову скриньку, звідки за допомогою агента доставки повідомлень (англ. mail delivery agent, MDA) доставляється клієнту одержувача. Часто останні два агенти суміщені в одній програмі (наприклад, sendmail), хоча є спеціалізовані MDA, які в тому числі займаються фільтрацією спаму. Для фінальної доставки отриманих повідомлень використовується не SMTP, а інший протокол -- часто POP3або IMAP -- який також підтримується більшістю поштових серверів. Хоча у найпростішій реалізації MTA досить покласти отримані повідомлення в особисту теку користувача уфайловій системі центрального сервера ("поштова скринька").

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

Sendmail -- один з найстаріших агентів передачі пошти (MTA -- mail transfer agent). Програма розробляється Sendmail Inc. та розповсюджується безплатно разом з сирцевим кодом. Існують версії програми для практично всіх операційних систем іапаратних платформ.

Delivermail, програма, яка послужила основою для sendmail, була створена в 1979 і йшла в комплекті з 4.0 і 4.1 BSD і дещо пізніше дороблена Еріком Оллманом (Eric Allman).

Sendmail вперше був включений до складу 4.1c BSD (перша версія BSD, в яку був включений стек протоколів TCP/IP).

Встановлення серверу електронної пошти відбувається наступним чином:

Ввожу команду

sudo apt-get install sendmail

Рисунок 1.61 -- Встановлення сервера електронної пошти

Потім ввожу команду

sudo sendmailconfig

після цього вводяться зміни в наступні файли

/etc/mail.sendmail.conf

/etc/cron.d/sendmail

/etc/mail/sendmail.mc

1.4.11 Встановлення FTP серверу

Протокол передачі файлів (англ. File Transfer Protocol, FTP) -- дає можливість абоненту обмінюватися двійковими ітекстовими файлами з будь-яким комп'ютером мережі, що підтримує протокол FTP. Установивши зв'язок з віддаленим комп'ютером, користувач може скопіювати файл з віддаленого комп'ютера на свій, або скопіювати файл з свого комп'ютера на віддалений.

При розгляді FTP як сервісу Інтернет мають на увазі не просто протокол, а саме сервіс -- доступ до файлів, які знаходяться у файлових архівах.

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

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

Не зважаючи на розповсюдженість, у FTP є багато недоліків. Програми-клієнти FTP не завжди зручні і прості у користуванні. Користувач не завжди може зрозуміти який файл перед ним, чи той що необхідно, чи ні. Окрім того, не існує простого і універсального засобу для пошуку на серверах anonymous FTP, -- хоча для цього і існує спеціальний сервіс archie, але це незалежна програма, вона не універсальна і не завжди її можна ефективно застосовувати. Програми FTP доволі старі і деякі їхні особливості, які були потрібні в часи їхнього створення, не зовсім зрозумілі і потрібні зараз. Наприклад, для передачі файлів існує два режими -- двійковий та текстовий, і, якщо користувач неправильно обрав режим передачі, то файл, який необхідно передати, може бути пошкодженим. Опис файлів на сервері видається у форматі операційної системи серверу, а список файлів операційної системи UNIX не завжди з розумінням сприймається користувачами DOS. Сервери FTP нецентралізовані, -- звідси випливають ще деякі проблеми. Але незважаючи на все це, сервери anonymous FTP сьогодні -- це стандартний шлях організації публічних файлових архівів в Інтернеті.

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

Встановлення та налаштування:

1. Встановлюється пакет proftpd за допомогою команди

sudo aptitude install proftpd

Рисунок 1.62 -- Встановлення ftp

Якщо FTP-сервер не використовуватиметься постійно відповісти на питання, що з'явилося, про спосіб запуску, необхідно: "самостійно".

2. Відкриваю файл /etc/shells командою:

sudo nano/etc/shells

3. Додаю в нього рядок

/bin/false

4. Створюю в /home каталозі папку FTP-shared командою:

sudo mkdir /home/FTP-shared

5. Створюю користувача з ім'ям userftp командою

sudouseradd userftp - p pass - d /home/FTP - shared - s /bin/false

де "pass" -- пароль.

6. В папці FTP-shared створюю дві вкладені папки:

sudo mkdir /home/FTP-shared/public

sudo mkdir /home/FTP-shared/upload

7. Присвоюю потрібні права створеним текам командами

sudo chmod 755 /home/FTP-shared

sudo chmod 755 /home/FTP-shared/public

sudo chmod 777 /home/FTP-shared/upload

8. Переіменовую наявний конфігураційний файл proftpd.conf і створюю новий:

sudo mv /etc/proftpd/proftpd.conf

/etc/proftpd/proftpd.conf.old

sudo nano/etc/proftpd/proftpd.conf

9. Якщо треба зробити анонімний доступ, слід закоментувати обидві секції для donet і розкоментувати секцію для аноніма.

10. Cервер вже запущений, але з параметрами за замовчуванням. Його необхідно перезапустити:

sudo /etc/init.d/proftpd restart

11. Для перевірки синтаксису створеного конфіг-файлу можна виконати:

sudo proftpd - td5

12. Щоб взнати, хто підключений до фтп-серверу в даний момент використовується команда ftptop (клавіша t міняє відображення, q - вихід) можна також використати команду ftpwho

13. Фтп-сервер з двома папками, одна з них (public) доступна тільки для читання, інша (upload) - для запису.

1.5 Створення інформаційного веб-сайту

Сайт або веб-сайт (від англ. website, місце, майданчик в інтернеті) -- сукупність веб-сторінок, доступних у мережі (Інтернеті), які об'єднані як за змістом, так і навігаційно. Фізично сайт може розміщуватися як на одному, так і на кількох серверах.

Сайтом також називають вузол мережі Інтернет, комп'ютер, за яким закріплена унікальна ІР-адреса, і взагалі будь-який об'єкт в Інтернеті, за яким закріплена адреса, що ідентифікує його в мережі (FTP-site, WWW-site тощо).

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

1.5.1 Розробка структури веб-сайту

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

Структурне розположення усіх php, javascript, html, css-файлів та зображень:

Папка public_html - коренева папка

· index.php - головна сторінка

· about.php - про компанію

· services.php - послуги компанії

· contact.php - контакти

· help.php - FAQ

· addmessage.php - скрипт додавання нового коментаря

· favicon.png - іконка, яка відображається поряд із заголовком сайту

Папка css - папка для збереження файлів css

· general-style.css - головний CSS-стиль сайту

· menu-style.css - CSS-стиль головного меню сайту

Папка javascript - папка для збереження файлів javascript

· welcome.css - скріпт привітання на сайті

Папка include - папка для збереження підключаючих файлів

· footer.php - підвал сайту

· general-menu.php - головне меню сайту

· header.php - шапка сайту

· left-block.php - ліва частина сайту

Папка images - папка для збереження картинок

· back-to-top.png - кнопка підняття на початок сайту.

· polytech-logo.png - логотип сайту

Даний сайт містить 6 php-сторінок, 3 CSS-файли, 1 javascript-код, 3 зображення, 4 підключаючі файли.

1.5.2 Створення нового віртуального хоста

Починаю створення сайту.

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

1. Добавляю відруальний хост. Для цього відкриваю файл зі списком віртуальних хостів:

sudo gedit /etc/apache2/httpd.conf

і додаю наступний запис:

NameVirtualHost 127.0.0.5

<VirtualHost 127.0.0.5>

ServerName mylocalhost

DocumentRoot "/home/user/webservers/mylocalhost"

</VirtualHost>

2. Записую новий хост до списку хостів. Відкриваю файл:

sudo gedit /etc/hosts

і додаю наступний рядок:

127.0.0.5 mylocalhost

3. Заходжу в каталог /home/user/webservers/ та створюю нову папку mylocalhost.

4. Тепер необхідно перезапустити сервер Apache. Робиться це наступною командою:

sudo sudo /etc/init.d/apache2 restart

Новий сайт доступний у браузері за адресою: http://mylocalhost/

1.5.3 Веб-сторінка

Веб-сторінка (англ. Web-page) -- інформаційний ресурс доступний в мережі World Wide Web (Всесвітня павутина), який можна переглянути у веб-браузері. Зазвичай, інформація веб-сторінки записана в форматі HTML, XHTML, або рідше wml (для wap-сторінок).

HTML -- Мова розмітки гіпертекстових документів. Cтандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді.

HTML є похідною мовою від SGML, успадкувавши від неї визначення типу документу та ідеологію структурної розмітки тексту.

HTML разом із каскадними таблицями стилів та вбудованими скриптами -- це три основні технології побудови веб-сторінок.

Типовий Web-документ складається з текстових блоків, рисунків, таблиць, ліній, гіперпосилань. Більш складні Web-документи містять фрейми (вкладені Web-сторінки), елементи керування та вводу інформації(кнопки, перемикачі, поля вводу тексту), динамічні об'єкти (Java Applet, Java Script, ActiveX).

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

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

HTML (англ. HyperText Markup Language -- Мова розмітки гіпертекстових документів) -- стандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді.

HTML є похідною мовою від SGML, успадкувавши від неї визначення типу документу та ідеологію структурної розмітки тексту.

HTML разом із каскадними таблицями стилів та вбудованими скриптами -- це три основні технології побудови веб-сторінок.http://uk.wikipedia.org/wiki/HTML - cite_note-w3-1

Перша сторінка буде написана на мові гіпертекстової розмітки HTML. Для початку запускаю звичайний текстовий редактор. Оскільки я користуюся операційною системою Ubuntu, тому я користуюся текстовим редактором Gedit.

Отже запускаю текстовий редактор і зберігаємо його в папці проектку з іменем index, та задаю розширення .html.

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

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

Усі документи починаються і закінчуються тегами, які позначають його початок та кінець: <HTML> та </HTML>. Тому все що я напишу в тегах <html></html> бравзер буде сприймати, як HTML. Усе що написано за цими тегами, не буде сприйматися браузером.

Пишу перші рядки коду:

<html>

</html>

В межах документу виділяються дві області - "заголовок" та власне "тіло документу". Заголовок оголошується тегами <HEAD> та </HEAD>. У межах заголовку можуть розміщуватись власне заголовок документу (відображається у верхній стрічці вікна браузера), він створюється тегами <TITLE> та </TITLE>; крім цього у заголовку документу може міститися тег <META>, який використовується для технічного опису документу (інформація для пошукових програм), а також тег <STYLE>, який використовується для опису стилів, які використовуються у документі.

Наступним розділом документу HTML є розділ "тіла документу". Він починається тегом <BODY>, а закінчується тегом </BODY>. Все що буде написане між цими тегами буде відображатися на екрані браузера.

Тепер наший код набув нового вигляду:

<html>

<head>

</head>

<body>

</body>

</html>

Спочатку пропишу в верхній частині сайту такий код:

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

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

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

Тепер закінчу працювати із тегом <head> і запишу усі теги із якими буду працювати. А працювати я буду із тегами <title></title>, які відповідають за заголовок сторінки, який відображається у стрічці браузера. А ще скористаюся тегом <meta>. В цей тег можна прописувати багато речей, таких як ключові слова для пошуку, опис сайту, тип кодування та інше.

Оновлений код буде мати вигляд:

<html>

<head>

<title>ІТ-компанія "Політех"</title>

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

<meta name="description" content="Офіційний сайт компанії Політех"/>

<meta name="keywords" content="хостинг, адміністрування"/>

</head>

<body>

</body>

</html>

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

Тепер можна приступати до роботи з тегами <body> </body>.

Отже, вирішено, що сайт буде складатися з верхньої частини, нижньої частини, а також лівою і основної частини. "Розбивання" сайту на "блоки" буду робити тегами <div>. Після змін, код сайту набуде таких змін:

<html>

<head>

<title>ІТ-компанія "Політех"</title>

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

<meta name="description" content="Офіційний сайт компанії Політех"/>

<meta name="keywords" content="хостинг, адміністрування"/>

</head>

<body>

<div><!--Головний блок-->

<div><!--Верхня частина сайту-->

Верхня частина сайту

</div>

<div><!--Ліва частина сайту-->

Ліва частина сайту

</div>

<div><!--Робоче поле-->

Робоче поле

</div>

<div><!--Нижня частина сайту-->

Нижня частина сайту

</div>

</div>

</body>

</html>

Оскільки код уже є досить великим, то я код коментую, використовуючи спеціальний коментар, який має вигляд: <!--Коментар-->.

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

Свій звичний вид цей блок отримає коли в код будуть вставлені зображення та прописані CSS-стилі, але перші записи робляться на HTML.

<div class="leftmenu"><!--Ліва частина сайту-->

<center><b>Головне меню:</b></center><br>

<center><b>Навігатор:</b></center><br>

<center><b>Статистика:</b></center><br>

<center><b>Друзі сайту:</b></center><br>

</div>

А тепер трошки вдосконалю HTML-код. Оформлення задам за допомогою CSS:

<div class="leftmenu-block"><b>Головне меню: </b></div><!--Блок -->

<br><div class="leftmenu-block"><b>Навігатор: </b></div><!--Блок -->

<br><div class="leftmenu-block"><b>Статистика: </b></div><!--Блок -->

<br><div class="leftmenu-block"><b>Друзі сайту: </b></div><!--Блок -->

Тепер необхідно створити пункти головного меню. Виглядати головне меню буде так:

<div class="leftmenu-block"><b>Головне меню:</b></div><!--Блок-->

<div class="diva">

<p><div class="menu-point"><a class="menu" href="http://melkiy.te.ua/">Головна сторінка</a></div></p>

<p><div class="menu-point"><a class="menu" href="http://melkiy.te.ua/">Послуги</a></div></p>

<p><div class="menu-point"><a class="menu" href="http://melkiy.te.ua/">Про Компанію</a></div></p>

<p><div class="menu-point"><a class="menu" href="http://melkiy.te.ua/">Контакти</a></div></p>

<p><div class="menu-point"><a class="menu" href="http://melkiy.te.ua/">Питання-відповіді</a></div></p>

<p><div class="menu-point"><a class="menu" href="http://melkiy.te.ua/">Сторінка 6</a></div></p>

</div>

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

Категорію Друзі сайту створюю за допомогою маркерованого списку. Виглядати код буде так:

<br><div class="leftmenu-block"><b>Друзі сайту: </b></div><!--Блок -->

<ul>

<li><a href="http://melkiy.te.ua/" target="_blank"> [melkiy] corporation</a></li>

<li><a href="http://melkiy.bz.ua/" target="_blank"> Офіційний melkiy сайт</a></li>

<li><a href="http://vmn70.te.ua/" target="_blank"> Блог Володимира Melkiy.te.uaа</a></li>

<li><a href="http://mi.ucoz.org/" target="_blank"> [melkiy] - інформаційний портал</a></li>

<li><a href="http://melkiy.at.ua/" target="_blank"> melkiy сайт</a></li>

</ul>

І ще необхідно доробити вигляд робочої області. Допишу заголовок та абзаци:

<div class="workarea"><!--Робоче поле-->

<center><h1>Заголовок</h1></center>

<p>Абзаци</p>

<p>Абзаци</p>

</div>

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

Наступним кроком, треба прописати у нижній частині сайту copyleft, та посилання на автора сайту. Код нижної частини сайту буде виглядати так:

<div class="footer"><!--Нижня частина сайту-->

<p>

Компанія "Політех" <a href= "http://melkiy.te.ua">Розробив Володимир Melkiy.te.ua</a> Усі права вільні

<span style="-webkit-transform: rotate (180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -khtml-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); display: inline-block;">&copy;</span><!--Copyleft-->

</p>

</div>

На цьому можна вважати, що каркас сайту готовий.

Сайт набув сирого вигляду.

Рисунок 1.63 -- Вигляд сайту, написаного на HTML

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

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

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

Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.

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

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

Наприклад, існують профілі CSS для принтерів, мобільних пристроїв тощо.

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

Тег у CSS має такий запис:

тег

{

властивість1:значення1;

властивість2:значення2;

}

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

background -- колір фону;

font-family -- вид шрифта;

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

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

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

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

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

margin-top -- відстань від верхнього рядка;

line-height -- висота рядка.

Перше, що треба зробити, це в робочій папці створити ще одну папку і задати їй ім'я CSS. У цю папку будуть зберігатися усі CSS-файли. Для цього запускаю блокнот і зберігаю його з іменем general-style і розширенням .css. У цей файл буду записувати теги для форматування зовнішнього вигляду сторінки.

Створюю перший стиль, який застосовую до усієї сторінки:

body

{

}

Внесу перші властивості та значення. Фонова заливка має бути світло персиковою, тому пишу властивість background-color: та задаю значення у шістнядцятковому форматі, який означатиме фоновий колір: faf3ba;. В результаті код набуде вигляду:

body

{

background-color: faf3ba;

}

Тепер задаю колір тексту. Із стандартного чорного виберу зелений. Запишу властивість color: та задам йому значення green або 005906;, що означатиме колір.

Тепер код набуває вигляду:

body

{

background-color: faf3ba;

color: 005906;

}

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

<head>

<title>ІТ-компанія "Політех"</title>

<link href="/css/general-style.css" rel="stylesheet" type="tsxt/css">

</head>

Стиль body застосовується автоматично до "робочої області" сайту. Інші стилі необхідно підключати вручну. Робиться це так:

<div class="mainframe">вміст блоку</div>

mainframe -- це назва стилю і вона повинна бути унікальною.

Тепер, по аналогії до стилю mainframe, створюю інші стилі для кожного div-блоку. Усього буде п'ять схожих між собою стилів.

Стиль загального блоку:

.mainframe/*головний блок ||| усі блоки взяті в один загальний блок*/

{

border: 1px solid black;/*бордюр ||| потім видалити. потрібен для розмітки*/

width: 900px;/*ширина головного блоку = ширина сайту*/

margin: 10px auto 20px;/*10px = відступ з верху, auto (center) з ліва/з права, 20px = з низу*/

}

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

Стиль верхнього блоку (шапка сайту):

.header

{

border: 1px solid red;/*бордюр ||| потім видалити. потрібен для розмітки*/

text-align: center;/*розміщення тексту = по центру*/

}

Стиль лівого блоку:

.leftmenu

{

border: 1px solid blue;/*бордюр ||| потім видалити. потрібен для розмітки*/

float: left;/*розміщення блоку = з ліва. обтікання з правого боку*/

overflow: hidden;/*заборона показувати контент, якщо він виходить за межі блоку (щоб не з'їхав шаблон)*/

width: 200px;/*ширина блоку*/

padding: 20px;/*відступ вмісту блоку від границь блоку*/

}

Стиль робочого поля:

.workarea

{

border: 1px solid green;/*бордюр ||| потім видалити. потрібен для розмітки*/

overflow: hidden;/*заборона показувати контент, якщо він виходить за межі блоку (щоб не з'їхав шаблон)*/

padding: 20px;/*відступ вмісту блоку від границь блоку*/

}

Стиль нижньої частини сайту:

.footer

{

border: 1px solid red;/*бордюр ||| потім видалити. потрібен для розмітки*/

overflow: hidden;/*заборона показувати контент, якщо він виходить за межі блоку (щоб не з'їхав шаблон)*/

text-align: center;/*розміщення тексту = по центру*/

}

Тепер коли сайт набув необхідного вигляду, необхідно дописати блоки лівого меню. Задаю йому заокруглені рамки, колір тексту, та фон.

Код матиме такий вигляд:

.leftmenu-block

{

border: 1px solid red;/*бордюр*/

overflow: hidden;/*заборона показувати контент, якщо він виходить за межі блоку (щоб не з'їхав шаблон)*/

padding: 10px;/*відступ вмісту блоку від границь блоку*/

text-align: center;/*розміщення тексту = по центру*/

border-radius: 8px;/*заокруглені краї*/

color:black;/*колір тексту*/

background-color: gold;/*колір заливки*/

}

На цьому робота із каркасом закінчена. Ще кілька дописів і шаблон сайту буде готовий.

Окремо варто виділити головне меню сайту. Я його css-стиль роблю окремим файлом. Для цього треба в папці створити ще один CSS-файл. Запускаю блокнот і зберігаю його з іменем menu-style і розширенням .css. У цей файл буду записувати коди для форматування головного меню сайту.

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

<head>

<title>ІТ-компанія "Політех"</title>

<link href="/css/menu-style.css" rel= "stylesheet" type="tsxt/css">

</head>

В створену таблицю стилів ввожу коди для форматування пунктів головного меню:

.menu

{

border: 1px solid green;

padding: 5px;

text-decoration: none;/*підкреслення*/

color: red;

}

.menu:hover

{

color:black;

background-color: gold;

}

.diva

{

align: center;

}

Із підключеними стилями сайт має вигляд.

Рисунок 1.64 -- Вигляд сайту з використанням CSS

В результаті було створено і підключено дві каскадні таблиці стилів.

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

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

Незважаючи на схожість назв, JavaScript та мова програмування Java мають дуже мало спільного. Права на назву Java належать компанії Sun Microsystems.

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

Тепер напишу маленький JavaScript-код і підключу його до сайту.

В першу чергу, що я зроблю, це в робочій папці створюю ще одну папку і задаю їй ім'я javascripts. У цю папку будуть зберігатися усі скріпти. Для створення першого скрипту, запускаю блокнот і зберігаємо його з іменем welcome і розширенням .js. У цей файл запишу один простенький javascript-код, який буде виводити вітання відвідувачам на сайті і розказувати про послуги, які надає компанія.

Код має вигляд:

function message() {window.alert('Вітаю Вас на сайті ПОЛІТЕХУ. У нас Ви можете замовити послуги: хостингу, адміністрування, створення та розкрутка сайту. Детальніше в розділі "Послуги"')}

Для того, щоб побачити роботу коду, його необхідно підключити до сторінки. Підключаються скріпт в "шапку" сайту. Виглядає цей код так:

<head>

<title>ІТ-компанія "Політех"</title>

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

</head>

Скріпт уже написаний і підключений. Тепер його треба тільки вставити в код сторінки.

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

У код сайту пишемо:

<div class="leftmenu-block"><b>Інформація: </b></div><!--Блок -->

<p onclick="return message()">Вітання!!!</p>

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

function message2() {window.alert('Ви знаходитеся на шаблоні сайту')}

Код розміщується в шапці сайту, між тегами <head></head> і має вигляд:

<script type="text/javascript">

<!--

function message2() {window.alert('Ви знаходитеся на шаблоні сайту')}

-->

</script>

А тепер необхідно вставити код в сторінку сайту.

<div class="leftmenu-block"><b>Навігатор: </b></div><!--Блок-->

<center><p onclick="return message2()">Щоб дізнатися на якій Ви сторінці, просто натисніть тут</p></center>

Із підключеними скраптами сайт має вигляд.



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

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

1.5.3.4 Створення та вставка графічних об'єктів

Тепер треба в сторінку сайту вставити зображення, які би доповнили дизайн сайту.

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

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

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

Рамстрова грамфіка (англ. Raster graphics) є частиною комп'ютерної графіки, який має справу зі створенням, обробкою та зберіганням растрових зображень. Растрове зображення є масивом кольорових точок (пікселів). Обробка растрової графіки здійснюється растровими графічними редакторами. Растрові зображення зберігаються у різних графічних форматах.

Я ж буду користуватися векторною графікою.

Три найпопулярніші типи зображення які використовуються в WEB: jpg, gif i png.

JPEG (Joint Photographic Experts Group) -- растровий формат збереження графічної інформації, що використовуєстиснення з втратами.

При необхідності дуже сильного стиснення втрати можуть бути переглянуті за допомогою модуля Matrixmuster (матричний зразок, матричний малюнок). Втрати і спотворення інформації через ступінь стиснення можуть проявлятися вже в призначених для користувача програмах. Допустимий рівень стиснення залежить від характеру зображення та існує, як правило, в межах 1:10. Формат JPEG часто використовується як формат даних в цифрових камерах. У Інтернеті формат JPEG застосовується для відображення напівтонових ілюстрацій та графічної інформації з плавним переходом тонів. Формат JPEG, на відміну від GIF і PNG, не підтримує ні анімацію, ні прозорість. Область застосування формату досить вузька -- розповсюдження високоякісної напівтонової графіки в Інтернеті. Формат підтримується практично всіма сучасними графічними програмами та веб-браузерами.

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

Найбільша роздільна здатність,яку підтримує формат JPEG/JFIF є 65535Ч65535.

PNG (Portable Network Graphics) -- растровий формат збереження графічної інформації, що використовує стиснення без втрат. PNG був створений для заміни формату GIF, графічним форматом, який не потребує ліцензії для використання. Зазвичай файли формату PNG мають розширення .png і використовують позначення MIME-типу image/png.

Формат PNG зберігає інформацію у стиснутому вигляді, при чому стиснення проводиться без втрат якості, на відміну від формату JPEG. Формат PNG спроектований для заміни застарілого і простішого формату GIF, а також у деякій мірі, для заміни складнішого формату TIFF.

GIF (від англ. Graphics Interchange Format -- "формат обміну зображеннями") -- 8-бітний растровий графічний формат, що використовує до 256 чітких кольорів із 24-бітного діапазону RGB. Формат було розроблено компанією CompuServe у 1987 році, і з того часу набув широкої популярності у всесвітній павутині завдяки своїй відносній простоті та мобільності. Одними із головних особливостей формату є підтримка анімаціїта прозорості.

Для стискання файлів використовує LZW-компресію.

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

GIMP (The GNU Image Manipulation Program) -- растровий графічний редактор, із деякою підтримкою векторної графіки. Проект розпочали 1995 року Spencer Kimball і Peter Mattis як навчальний проект в Берклі. В 1997, після закінчення нимиуніверситету GIMP став частиною проекту GNU. Програма підтримується та розвивається товариством добровольців, ліцензована за умовами GNU General Public License версії 3+, починаючи з релізу 2.8. Символом GIMP є койот Вілбер (Wilber). Програма працює на системах Microsoft Windows, Gnu/Linux, FreeBSD (або OpenBSD), MacOS X, OpenSolaris.

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

Першим створеним малюнком необхідно створити favicon.

Favicon ("вибрана позначка"; цей термін походить від слова "Favorites" -- меню вибраних посиланнь) -- спеціальна іконка, котра відображається поряд з адресою сайту в адресному рядку браузера, закладках (favorites)

Традиційно використовується зображення розміром 16Ч16 пікселів формату ICO, яке розташоване в корені сайту під назвою favicon.ico, хоча розширення можна задати різні (png, jpg чи навіть анімований gif).

Для створення зображення favicon необхідно запустити графічний редактор GIMP і створити нове зображення. Задамо розмір зображення 16 на 16 пікселів.

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

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

Тепер збережу зображення з іменем favicon, та задам йому розширення .png.

Перше зображення створено і воно має наступний вигляд

Рисунок 1.66 -- Вигляд зображення favicon

Підключається favicon-зображення спеціальним тегом, який розміщується між тегами <head> і </head>:

<link rel="shortcut icon" href=" favicon.png" type= "image/png">

Обновляю сторінку і дивлюся на закладку у браузері. Біля назви сайту появився синьо-жовтий прапор України.

Тепер малюю логототип компанії.

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

Для цього запускаю графічний редактор GIMР. Створюю нове зображення і зберігаю з назвою polytech-logo та задаю розширення PNG.

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

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

Результат роботи буде мати вигляд.

Рисунок 1.67 -- Логотип

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

Логотип поміщується у папку images.

На сайті логотип розміщується у шапці сайту.

Код матиме вигляд:

<div class="header"><!--Верхня частина сайту-->

<a href="http://melkiy.te.ua/"><img src= "images/polytech-logo.png" alt="logo"></a>

</div>

Тепер малюємо стрілку "back to top", яка буде піднімати на початок сайту, якщо відвідувач буде низько на сторінці сайту і захоче перейти на початок сайту.

Для цього запускаю графічний редактор GIMР. Створюю нове зображення і зберігаю з назвою back to top та задаю розширення PNG.

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

Зберігаю зображення.

Виглядає зображення так.



Рисунок 1.68 -- Зображення back to top

Отримане зображення переміщую в папку сайту у папку images.

Тепер необхідно вставити картинку в сторінку сайту. Робиться це тегом картинки, який поміщений у тег посилання. Код матиме вигляд:

<div style="position: fixed; bottom: 40px; right: 80px;">

<a href="template.php#top" title="Піднятися до верху">

<img src="images/back-to-top.png" alt="back-to-top">

</a>

</div>

Даний блок знаходиться у самому низу сайту після div-блоку footer.

Більше не рекомендовано використовувати зображення, тому що вони впливають на швидкість завантаження сторінки.

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

PHP (англ. PHP: Hypertext Preprocessor -- PHP: гіпертекстовий препроцесор), попередня назва: Personal Home Page Tools -- скриптова мова програмування, була створена для генерації HTML-сторінок на стороні веб-сервера. PHP є однією з найпоширеніших мов, що використовуються у сфері веб-розробок (разом із Java, .NET, Perl, Python, Ruby). PHP підтримується переважною більшістю хостинг-провайдерів. PHP -- проект відкритого програмного забезпечення.

PHP інтерпретується веб-сервером в HTML-код, який передається на сторону клієнта. На відміну від скриптової мовиJavaScript, користувач не бачить PHP-коду, бо браузер отримує готовий html-код. Це є перевага з точки зору безпеки, але погіршує інтерактивність сторінок. Але ніщо не забороняє використовувати РНР для генерування і JavaScript-кодів які виконуються вже на стороні клієнта.

У шаблон запишу кілька кодів PHP. Так, як каркас, шаблон і дизайн пишуться на HTML i CSS, то PHP-коди виводитимуть тільки додаткову інформацію. Перший запис запишу в лівий блок в категорію Інформація, яку ще можна назвати Статистика. Перший такий код виводитиме поточний час. Виглядає код так:

<div class="leftmenu-block"><b>Інформація:</b></div> <!--Блок -->

<?

echo 'Зараз ';

echo date('H:i');

echo ' година';

?>

Для того, щоб код виводив на екран монітора точну годину, треба сторінку зберегти з розширенням .php.

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

<p><?php

$counter = 0;

$counter++;

echo "Сьогодні було відвідувачів: $counter";

?></p>

Решта кодів можна буде дописати згодом.

1.5.3.6 Створення веб-сторінки із використанням бази даних

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

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

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

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

Спочатку створюю нову базу даних з іменем guestbook і створюю в ній таблицю. Це можна зробити за допомогою додатку, для керування базою даних phpmyadmin, а можна зробити безпосередньо в командному рядку. Код запису буде мати вид:

create table guestbook

(

guestbook_id integer not null auto_increment primary key,

guestbook_user_name varchar(100),

guestbook_message_text text,

guestbook_data date

);

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

<center><h1>Книга відвідувачів</h1></center>

<div style="width: 600px; margin: 0 auto;">

<form action="addMessage.php" method="post">

Ваше ім'я:<br>

<input type="text" name="guestName" placeholder="Ваше ім'я" style="width: 100%;"><br><br>

Текст Вашого повідомлення в книзі відвідувачів:<br>

<textarea name="messageText" placeholder="Текст повідомлення" style="width: 100%; height: 100px;">

</textarea><br><br>

<input type="submit" value="Залишити повідомлення в книзі відвідувачів!" style="width: 100%;">

</form>

<?php

// подключення до бази даних

$connect = new mysqli('localhost', 'root', '', 'guestbook');

// отримуємо список всіх повідомлень

$result = $connect->query("select * from guestbook");

// вираховуємо кількість отриманих записів

$countMessage = $result->num_rows;

// якщо кількість записів в базі даних більше, то її виводимо

if($countMessage > 0)

{

// переглядаємо весь масив отриманих даних

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

{

echo '<div style="border: 1px solid green;">';

// витягаю дані

$message = $result->fetch_object();

// виводжу дані у потрібному виді

echo "<b>".$message->guestbook_user_name.": </b><br>";

echo $message->guestbook_message_text."<br>";

echo "Дата: ".$message->guestbook_data."<br>";

echo '</div><br>';

}

}

?>

</div>

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

Код матиме вид:

<?php

// отримую і обролюю ім'я і текст коментаря

$guestName = addslashes(htmlspecialchars($_POST['guestName'], ENT_QUOTES));

$messageText = addslashes(htmlspecialchars($_POST['messageText'], ENT_QUOTES));

// виведення сьогодньошньої дати

$date = date("Y.m.d");

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

if($guestName != "" && $messageText != "")

{

// з'єднуємо з базою даних

$connect = new mysqli('mylocalhost', 'root', '', 'guestbook');

// якщо запит виконаний успішно, то вивести повідомлення "повідомлення відправлено"

if($connect->query("insert into guestbook values (0, '$guestName', '$messageText', '$date')"))

echo "<center><a href='index.php'>Повідомлення відправлено.</a></center>";

// якщо при виконанні запиту є помилка, то вивести повідомлення про неї

else

echo "<center><a href='index.php'>Виникла помилка при відправленні повідомлення. Спробуйте пізніше.</a></center>";

}

// якщо користувач не ввів своє ім'я, або текст повідомлення

else

echo "<center><a href='index.php'>Необхідно заповнити усі поля! Поверніться на попередню сторінку.</a></center>";

?>

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

Рисунок 1.69 -- Результат роботи книги гостей

1.5.4 Створення шаблону

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

Як правило, шаблони сайтів складаються з графічних файлів дизайну поширених форматів (PNG, JPEG, GIF), поміщених в окрему папку; статичних html-сторінок і файлів таблиці стилів (CSS), а в деяких випадках ще й Flash.

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

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

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

Тепер відкриваю в новостворену папку і створюю нові PHP-файли:

· header.php - тут будуть зберігатися коди, які зберігаються у div-блоці, що відповідає за шапку сайту;

· general-menu.php - тут будуть зберігатися коди, які зберігаються у div-блоці, що відповідає за головне меню сайту;

· left-block.php - тут будуть зберігатися коди, які зберігаються у div-блоці, що відповідає за ліву частину сайту;

· footer.php - тут будуть зберігатися коди, які зберігаються у div-блоці, що відповідає за нижній блок сайту.

Тепер необхідно вирізати блок верхньої частини сайту і помістити його у файл header.php.

Файл header.php має вид:

<div class="header"><!--Верхня частина сайту-->

<a href="http://melkiy.te.ua/"><img src="images/polytech-logo.png" alt="logo"></a>

</div>

Далі вирізую головне меню сайту і поміщую його у файл general-menu.php.

Файл general-menu.php має вид:

<div class="leftmenu-block"><b>Головне меню:</b></div><!--Блок-->

<div class="diva">

<p><div class="menu-point"><a class="menu" href="http://melkiy.te.ua/">Головна сторінка</a></div></p>

<p><div class="menu-point"><a class="menu" href="http://melkiy.te.ua/">Послуги</a></div></p>

<p><div class="menu-point"><a class="menu" href="http://melkiy.te.ua/">Про Компанію</a></div></p>

<p><div class="menu-point"><a class="menu" href="http://melkiy.te.ua/">Контакти</a></div></p>

<p><div class="menu-point"><a class="menu" href="http://melkiy.te.ua/">Питання-відповіді</a></div></p>

<p><div class="menu-point"><a class="menu" href="http://melkiy.te.ua/">Сторінка 6</a></div></p>

</div>

Далі вирізую лівий блок сайту і поміщую його у файл left-block.php.

Файл left-block.php має вид:

<div class="leftmenu-block"><b>Інформація:</b></div><!--Блок -->

<p>

<?

echo 'Зараз ';

echo date('H:i');

echo ' година';

?>

</p>

<p>

<?php

$counter = 0;

$counter++;

echo "Сьогодні було відвідувачів: $counter";

?>

</p>

<div class="leftmenu-block"><b>Друзі сайту:</b></div><!--Блок -->