МІНІСТЕРСТВО ОСВІТИ
Державна освітня установа вищої НАУКИ
Кемеровський державний університет
Математичний факультет
Кафедра ЮНЕСКО з новим інформаційним технологіям
Реферат
«Створення індивідуального сайту»
студента 5 курсу, групи М-064
Ткаченко Івана Сергійовича
Спеціальність - 010501
«Прикладна математика та інформатика»
Кемерово 2010
Зміст
Мета роботи
Введення
1 Програмне ті засоби, що використовуються при виконанні роботи
2 Структура сайту
3 Основні засоби, що використовуються для створення сайту
4 Мова HTML
5 Структура HTML-документа
6 Таблиця стилів
7 JavaScript
Висновок
Список літератури
Мета роботи
Метою роботи є створення індивідуального сайту з використанням мови гіпертекстової розмітки HTML і мови скриптів JavaScript, а також розміщення його на сервері математичного факультету КемГУ.
Вимоги:
Наявність форматованого тексту, таблиць та інших основних елементів мови HTML;
Відображення ставлення автора до якої-небудь цікавої йому тематики (хобі);
Розмір сайту повинен становити не менше 3-5 HTML-сторінок;
Наявність зрозумілої системи навігації.
Введення
Мета лабораторної роботи полягала в самостійному створенні інформаційного ресурсу та його розміщення на сервері математичного факультету КемГУ. Для дизайну сайту була обраний фон осінньої тематики. Сайт містить інформацію про автора, його резюме і трохи інформації про електрогітарах (загальні відомості, прийоми гри та необхідне обладнання).
1 Програмні засоби, що використовуються при виконанні роботи
Adobe Dreamweaver CS 3
Adobe Photoshop CS 3
Windows Notepad 6.1
Internet Explorer 9 beta
Internet Explorer 7 .0 (Portable)
Mozilla Firefox 3.6.10
Google Chrome 6.0.472.63
Opera 10.63
Denwer
2 Структура сайту
Сайт створений за допомогою мови розмітки гіпертексту HTML. Також були використані каскадна таблиця стилів CSS і мова скриптів JavaScript. Сайт складається з 6 HTML-сторінок. Кожна сторінка являє собою об'єднання чотирьох логічних блоків: «шапка» сайту (містить назву кожного з розділів), ліва частина (містить меню навігації та години), контентна частина (містить основний контент) і «підвал» (містить інформацію про розробника сайту). Навігація на сайті виконана у вигляді списку гіперпосилань, розташованих в лівому блоці сторінки.
рисунок 1 - Структура сайту
На сторінках сайту міститься інформація про автора, його резюме, а також інформація, що відображає захоплення автора. Реалізовано два сценарії на мові JavaScript: цифровий годинник і відключення правої кнопки миші на деяких сторінках. Для дизайну використані зображення осінньої тематики.
3 Основні засоби, що використовуються для створення сайту
Мова HTML
HTML - це тегів мову розмітки документів. Будь-який документ на мові HTML являє собою набір елементів, причому початок і кінець кожного елемента позначається спеціальними позначками - тегами. Всі теги починаються з відкриваючої дужки "<", за якою слідує текст, що визначає зміст тега. Закінчується тег закривається дужкою ">". Теги бувають початковими (відкривають) і кінцевими (закривають). Кінцеві теги починаються зі знака "/".
Елементи можуть бути порожніми, тобто не містять ніякого тексту та інших даних (наприклад, тег перекладу рядка <br>). У цьому випадку звичайно не вказується закриваючий тег. Крім того, елементи можуть мати атрибути, що визначають будь-які їхні властивості (наприклад, розмір шрифту для елемента font). Атрибути вказуються у відкриває теге. Якщо які-небудь з тегів незрозумілі браузеру, то при аналізі документа вони ігноруються.
4 Структура HTML-документа
Між тегами <html> </ html> знаходиться текст, що визначає вміст HTML-сторінки. Все, що між цими двома тегами інтерпретується браузером відповідно до правил мови HTML. Оригінальний текст сторінки ділиться на заголовок (Head) і тіло (Body). Тема описується двома тегами <head> </ head>, але втім, якщо в ньому немає необхідності, його можна не описувати, тоді початковий текст буде складатися тільки з тіла. Деякі теги можуть розташовуватися тільки в заголовку, наприклад <meta>, <title>. Найбільш часто використовується в заголовку тег - <title> </ title>. Цей тег визначає назву сторінки. Воно пишеться у верхній частині вікна браузера. Також у заголовку підключається таблиця стилів.
Тіло сторінки описується тегами <body> </ body>. У тілі сторінки розташовується змістовна і видима частина документа. Тут можуть бути присутніми наступні елементи:
Форматований текст;
Графічні зображення;
Таблиці;
Гіперпосилання;
Тег блоку <div>;
Скрипти.
У підключається таблиці стилів «style. Css» для всіх елементів тіла сторінки визначено властивості, такі як колір тексту, фон блоків та інші.
Для форматування тексту використовуються наступні теги:
<P> - параграф;
<h1> - заголовок першого рівня;
<ul> - невпорядкований (маркірований) список;
<li> - елемент списку;
<Strong> - жирний текст.
Для додавання зображень використовується тег <img>.
Деякі атрибути тега:
src - UR L-адресу файлу із зображенням;
align - вирівнювання зображення відносно тексту або інших елементів сторінки;
vspace - розмір відступу від зображення по вертикалі;
hspace - розмір відступу від зображення по горизонталі;
width - ширина зображення;
height - висота зображення;
border - товщину рамки навколо зображення.
Таблиці формуються за допомогою тега <table>. Тегом <tr> визначте рядок таблиці, тег <td> визначає окрему клітинку в таблиці. Рядки, стовпці таблиці повинні бути вкладеними в неї. Допускається вкладення однієї таблиці в іншу, з'єднання декількох рядків або стовпців.
Використовувані атрибути, що застосовуються до таблиць:
align - вирівнювання таблиці щодо документа;
width - ширина таблиці;
cellspacing - відстань між осередками таблиці;
cellpadding - відстань між вмістом комірки і її рамкою;
border - ширина рамки в пікселях;
border-color - колір рамки таблиці;
valign - вирівнювання тексту в комірці по вертикалі;
colspan - з'єднання декількох осередків.
У проекті таблиця використовується для розміщення зображень належним чином.
Гіперпосилання - фрагмент HTML-документа і його базовий елемент, який вказує на інший файл, який може бути розташований в Інтернет і містить повний шлях (URL) до цього файлу. Гіперпосилання - для користувача - графічне зображення або текст на сайті, в листі електронної пошти або в будь-якому електронному документі, що встановлюють зв'язок і дозволяють переходити до інших об'єктів Інтернет.
Для визначення посилання використовується тег <a ...> </ a>. Посилання складається з двох частин: вказівника посилання та адресної частини посилання. Покажчиком посилання може бути слово, група слів або зображення. Адресною частиною посилання є адреса Web-сторінки, яка буде завантажена при клацанні кнопкою миші на покажчику.
Тег <div> є елементом рівня блоку, що служить для виділення фрагмента документа. Метою цього виділення є управління параметрами даного фрагмента, яке виконується за допомогою стилів.
5 Таблиця стилів
Для сайту розроблено CSS-файл, так звана таблиця стилів. У ньому описані стилі для кожного з блоку HTML-сторінок. На самому початку задаються загальні параметри для всіх елементів документа:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: url (img / bg.jpg);
margin: 0;
padding: 0;
text-align: center;
color: # 000000;
Параметри "margin: 0;" і "padding: 0;" в даному випадку використовуються для скидання всіляких відступів у документі. Це необхідно для того, щоб уникнути можливих проблем з відображенням сайту в різних браузерах.
Основні блоки сторінок сайту, для яких були задані спеціальні стилі в таблиці стилів: container, header, sidebar 1, coolmenu, mainContent, footer. Для різних елементів основних блоків (заголовків, параграфів і т.д.) також задані власні стилі.
Використання таблиці стилів дозволяє використовувати опис єдиного стилю на декількох HTML-сторінках сайту, а також одночасно змінювати оформлення всіх сторінок, що використовують даний стиль, виправивши лише опис стилю в одному файлі.
6 JavaScript
На сайті реалізовані два сценарії на мові JavaScript: відключення правої кнопки миші і годинник. Сценарії реалізовані в окремих файлах з розширенням ". Js" і підключаються до сторінок в теге <script> </ script> за допомогою використання атрибуту src, значенням якого є URL-адреса підключаються файлів.
У лівому блоці сайту над блоком меню виведені цифрові годинник. За виведення годин відповідає скрипт, описаний у файлі timer. Js:
function timer ()
{
var v_time = new Date ()
var hour = v_time.getHours ()
var min = v_time.getMinutes ()
var sec = v_time.getSeconds ()
var temp = "" + hour
temp + = ((min <10)? ": 0 ":":")+ min
temp + = ((sec <10)? ": 0 ":":")+ sec
f.time.value = temp
setTimeout ("timer ()", 1000)
}
На сторінках «резюме» і «про автора" відключена права кнопка миші за допомогою скрипта, описаного у файлі right _ button. Js:
function click () {
if (event.button == 2) {
alert ('Права кномка миші відключена для цієї сторінки!');
}
}
document.onmousedown = click
Висновок
Результатом даної роботи є створення сайту по заданій тематиці та розміщення його на сервері математичного факультету КемГУ. Сайт відповідає таким вимогам:
Містить форматований текст, таблицю, інші основні елементи мови HTML;
Містить резюме автора;
Відбиває ставлення автора до цікавої йому тематики (інформація про гітари, прийомах гри на гітарі, обладнанні, необхідному для гри на електрогітарі);
Містить 6 HTML-сторінок:
Головна (index. Html);
Про автора (about _ me. Html);
Резюме (rezume. Html);
Трохи про гітари (hobby. Html);
Прийоми гри на електрогітарі (priem. Html);
Обладнання (oborud. Html);
Містить зрозумілу систему навігації.
Для роботи з кодом використовувалися програми Adobe Dreamweaver CS 3 та Windows Notepad 6.1.
Для редагування зображень була використана програма Adobe Photoshop CS3.
Тестування сайту вироблялося в браузерах: Internet Explorer 9 beta, Internet Explorer 7.0 (portable), Mozilla Firefox 3.6.10, Google Chrome 6.0.472.63, Opera 10.63.
Список літератури
Попов Є. - Уроки по створенню сайтів http://ruseller.com/ [електронний ресурс].
Морквин А. - Відеоуроки «Блокова div-верстка сайту» http://www.sdelaysite.com/ [електронний ресурс].
Морквин А. - Відеоуроки «Основи Java Script »http://www.sdelaysite.com/ [електронний ресурс].
Підручник з HTML http://www.postroika.ru/html/ [електронний ресурс].