Створення індивідуального сайту

[ виправити ] текст може містити помилки, будь ласка перевіряйте перш ніж використовувати.

скачати

МІНІСТЕРСТВО ОСВІТИ

Державна освітня установа вищої НАУКИ

Кемеровський державний університет

Математичний факультет

Кафедра ЮНЕСКО з новим інформаційним технологіям

Реферат

«Створення індивідуального сайту»

студента 5 курсу, групи М-064

Ткаченко Івана Сергійовича

Спеціальність - 010501

«Прикладна математика та інформатика»

Кемерово 2010

Зміст

Мета роботи

Введення

1 Програмне ті засоби, що використовуються при виконанні роботи

2 Структура сайту

3 Основні засоби, що використовуються для створення сайту

4 Мова HTML

5 Структура HTML-документа

6 Таблиця стилів

7 JavaScript

Висновок

Список літератури

Мета роботи

Метою роботи є створення індивідуального сайту з використанням мови гіпертекстової розмітки HTML і мови скриптів JavaScript, а також розміщення його на сервері математичного факультету КемГУ.

Вимоги:

  1. Наявність форматованого тексту, таблиць та інших основних елементів мови HTML;

  2. Наявність резюме про студента;

  3. Відображення ставлення автора до якої-небудь цікавої йому тематики (хобі);

  4. Розмір сайту повинен становити не менше 3-5 HTML-сторінок;

  5. Наявність зрозумілої системи навігації.

Введення

Мета лабораторної роботи полягала в самостійному створенні інформаційного ресурсу та його розміщення на сервері математичного факультету КемГУ. Для дизайну сайту була обраний фон осінньої тематики. Сайт містить інформацію про автора, його резюме і трохи інформації про електрогітарах (загальні відомості, прийоми гри та необхідне обладнання).

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-сторінок:

  1. Головна (index. Html);

  2. Про автора (about _ me. Html);

  3. Резюме (rezume. Html);

  4. Трохи про гітари (hobby. Html);

  5. Прийоми гри на електрогітарі (priem. Html);

  6. Обладнання (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.

Список літератури

  1. Попов Є. - Уроки по створенню сайтів http://ruseller.com/ [електронний ресурс].

  2. Морквин А. - Відеоуроки «Блокова div-верстка сайту» http://www.sdelaysite.com/ [електронний ресурс].

  3. Морквин А. - Відеоуроки «Основи Java Script »http://www.sdelaysite.com/ [електронний ресурс].

  4. Підручник з HTML http://www.postroika.ru/html/ [електронний ресурс].


Посилання (links):
  • http://ruseller.com/
  • http://www.sdelaysite.com/
  • http://www.postroika.ru/html/
  • Додати в блог або на сайт

    Цей текст може містити помилки.

    Програмування, комп'ютери, інформатика і кібернетика | Лабораторна робота
    40.8кб. | скачати


    Схожі роботи:
    Створення сайту знайомств
    Створення Web-сайту
    Створення сайту Бібліотека онлайн
    Створення сайту Дикі кішки
    Створення та просування корпоративного сайту
    Створення сайту на мові ASPNET
    Створення інформаційного сайту Млинець
    Створення сайту Червона книга
    Створення web-сайту Богородського Благочинія
    © Усі права захищені
    написати до нас