Міністерство освіти і науки України
Національний університет „Львівська політехніка”
Кафедра електронних
обчислювальних машин
Звіт
про виконання лабораторної роботи № 6
з курсу „ Глобальні інформаційні мережі ”
Тема:
Створення індивідуального Web-сайту
Мета роботи: Ознайомитись із основними підходами до створення Web-сторінок. За допомогою одного із спеціалізованих HTML-редакторів (Microsoft FrontPage або Macromedia Dreamweaver) створити індивідуальний Web-сайт.
Теоретична частина
Основні принципи створення Web-сайтів
Зміст або контент - є однією з найважливіших складових. Якщо на сайті немає корисної інформації, що здатна зацікавити певне коло людей, то можна поставити питання про необхідність існування цього сайту взагалі.
Дизайн -друга за важливістю складова добре розробленого сайту. Від дизайну залежить, наскільки привабливими будуть сторінки, тобто, в кінцевому рахунку, скільки людей додатково захочуть прийти і проглянути цей сайт. Для того, щоби створити сайт, необов'язково навіть використовувати графіку. Для Web-сайтів, як і для інших дизайнерських проектів, дуже важливим є стиль сайту, що надає йому власне обличчя.
Швидкість завантаження сторінок - сторінки потрібно оптимізувати для отримання їх найменшого розміру (звичайно, в межах розумного).
Розкрутка Web-сайта - мова йде не тільки про реєстрування у всіх можливих пошукових системах світу, але і про такі засоби, як розміщення інформації в засобах масової інформації (URL - в газеті), а також згадування про цей сайт на визитках, рекламках, газетних та журнальних статтях і т.п. Крім того, на Web-сайті обов'язково повинен бути вказаний e-mail для зв'язку з автором.
Зрозуміла і логічна структура розміщення інформації на Web-сайті - ніщо не втомлює так при пошуку потрібної інформації, як погано структуровані сайти.
Відсутність орфографічних та граматичних помилок - необхідно перечитувати написану інформацію перед виставленням сайту на публіку.
Процес створення Web-сайту
Починати роботу слід з ретельного продумування концепції і складення структури майбутнього сайту. На основі цієї інформації підбирають необхідні матеріали. Відомо, що необхідно розмістити на сайті, але важливо представити всю інформацію зручним і зрозумілим чином. Структурованість сайту забезпечує половину успіху при його створенні.
Коли структура і тексти написані, можна переходити до створення дизайну. На цій стадії дуже важливо вибрати інструмент, з яким працювати. Попередній варіант можна накидати олівцем на листку паперу, але його все одно необхідно буде перенести в електроний вигляд. Більшість Web-дизайнерів надають перевагу для макетування растровим або текстовим редакторам, які дозволяють вільно маніпулювати об'єктами на майбутній сторінці. Результатом цього етапу повинен бути готовий ескіз.
Тільки тепер варто переходити до HTML-кодування. Попередні кроки можуть зайняти більшу частину часу, відведеного на створення сайту. Створення HTML-коду є справою техніки, в той час, коли вищеописані кроки є процесом творчим.
Характеристика пакету Macromedia Dreamweaver
Система Dreamweaver - це візуальний редактор гіпертекстових документів. Професійна програма Dreamweaver володіє всіма необхідними засобами для генерації сторінок HTML будь-якої складності і масштабу. Вона забезпечує режим візуального проектування (WYSIWYG), відрізняється дуже чистою роботою з вихідним текстом Web-документів, володіє вбудованими засобами підтримки великих мережевих проектів.
Відомо, що багато візуальних редакторів HTML вельми нераціонально поводяться з кодами гіпертекстової розмітки. Це означає, що часто вони породжують надмірний, громіздкий вихідний текст, перевантажений складними мовними конструкціями. Серед інших програм даного класу система Dreamweaver виділяється своїм коректним поводженням з кодами HTML. Вона породжує чистий лаконічний вихідний текст, в якому майже немає допоміжних дескрипторів і громіздких службових коментарів.
Пакет Dreamweaver - це багатоцільова програма. Його можна використовувати як простий редактор гіпертекстових документів для створення окремих сторінок. Крім того, програма має в своєму розпорядженні необхідний інструментарій, що дозволяє проектувати і підтримувати Web-вузли будь-якої складності.
Порядок роботи
Для створення індивідуального Web-сайту я вибрати редактор Macromedia Dreamweaver.
Розробив структуру та дизайн індивідуального Web-сайту згідно з вимогами:
структура сайту повинна містити мінімум 5 сторінок
всі сторінки повинні мати засоби навігації, що забезпечать переходи між ними;
домашня сторінка сайту (Home Page) повинна називатись index.htm і містити індивідуальну інформацію про студента-розробника сайту;
домашня сторінка сайту index.htm і повинна містити гіперпосилання на окрему сторінку із заповненою анкетою (див приклад), причому:
файл з анкетою є звичайним HTML-документом,
відкриття документу анкети повино відбуватись в окремому вікні броузера, для чого в гіперпосилання в тег <a href ...> додається параметр target="_blank", наприклад: <a href="Form/ivanov.htm"target="_blank">приклад</a>
файли з анкетою та з фотографією повинні називатись у відповідності із прізвищем студента і міститись в піддиректорії Form індивідуальної директорії,
рядки анкети "тема дипломного проекту", "керівник дипломного проекту" та "анотація до дипломного проекту" залишаються незаповненими;
зміст інших сторінок сайту визначається студентом-розробником.
Розмістив розроблений Web-сайт на svm-070 в директорії, вказаній викладачем.
Структура розробленого індивідуального Web-сайту
Опис основних файлів сайту
index.htm – стартова сторінка, містить структуру фреймів сайту (lftmenu.htm, btmmenu.htm та основний фрейм – по замовчуванню main.htm);
lftmenu.htm– ліве навігаційне меню;
btmmenu.htm – нижнє навігаційне меню;
main.htm – основна сторінка сайту, відкривається при вході на сайт;
links.htm – містить відібрані посилання на деякі корисні ресурси інтернету;
images.htm – містить фото та інші графічні файли;
form/sorokevych.htm – містить інформацію про розробника сайту;
info.htm – містить додаткову інформацію про розробника сайту;
extra.htm – інше…;
styles.css – таблиці стилів сайту (дизайн та оформлення).
Вміст сторінок розробленого індивідуального Web-сайту
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Сорокевич Максим Ігорович</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="../styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="99%" height="90%" align="center" style="
background-color:#44A5D5; border:1px dashed #306BA2;">
<tr>
<td width="28%" rowspan="13" align="center"><a href="../info.htm">
<img src="sorokevych.jpg" alt="Сорокевич М.І." width="130"
height="157" border="2"></a></td>
<td width="28%">прізвище</td>
<td width="44%">Сорокевич</td>
</tr>
<tr>
<td>ім'я</td><td>Максим</td>
</tr>
<tr>
<td>побатькові</td><td>Ігорович</td>
</tr>
<tr>
<td>дата народження</td><td>20.08.1985</td>
</tr>
<tr>
<td>група</td><td>КСМ-44</td>
</tr>
<tr>
<td>рік вступу до НУ "ЛП"</td><td>2002</td>
</tr>
<tr>
<td>тема дипломного проекту</td><td></td>
</tr>
<tr>
<td>керівник дипломного проекту</td><td></td>
</tr>
<tr>
<td>анотація до дипломного проекту</td><td></td>
</tr>
<tr>
<td>адреса</td><td>79044, м.Львів</td>
</tr>
<tr>
<td>контактний телефон</td><td>(066) 777-04-92</td>
</tr>
<tr>
<td>e-mail</td><td><a href="mailto:maqs@ukr.net">maqs@ukr.net</a></td>
</tr>
<tr>
<td>участь в конференціях, олімпіадах, науковій роботі</td><td>не приймав</td>
</tr>
</table>
</body>
</html>
Висновки: на даній лабораторній роботі я навчився розробляти зрозумілу структуру та дизайн для невеликих Web-сайтів. Для створення власного сайту, а зокрема для написання HTML-файлів, я використовував програму Macromedia Dreamweaver.