Міністерство загальної та професійної освіти

Російської Федерації

Новосибірський державний педагогічний університет

Куйбишевський філія

Курсова робота з інформатики

Web-Дизайн і програми для створення web-сторінок.

Студента 4 курсу факультету

математики та інформатики

Леута Сергія Олександровича

Куйбишев

2001 р

Зміст

Вступленіе______________________________________________________________ 2

1. World Wide Web_________________________________________________________ 3

1.1 Поширення Internet_____________________________________________ 3

1.2. Концепція WWW___________________________________________________ 4

2. Створення Web-сторінки за допомогою мови HTML__________________________ 6

2.1 Мова HTML_________________________________________________________ 6

2.2. Структура HTML документа_________________________________________ 7

2.3 Форматування текста______________________________________________ 9

3. Програми для створення Web-страніц___________________________________ 13

3.1 HTML-редактори___________________________________________________ 13

3.2 Графічні редактори_____________________________________________ 16

А) Редактори растрової графікі________________________________________ 18

B) Редактори векторної графікі________________________________________ 20

4. Створення WEB-сторінок в WORD'97______________________________________ 22

4.1 Способи створення WEB-сторінок в WORD'97___________________________ 22

4.2 Створення маркованих і нумерованих спісков____________________ 22

4.3 Горизонтальні лініі______________________________________________ 23

4.4 Додавання фона___________________________________________________ 23

4.5 Робота з табліцамі_________________________________________________ 23

4.6 Робота з рісункамі_________________________________________________ 24

4.7 Створення гіперссилок______________________________________________ 24

4.8 Вставка відеозапису в Web-страніцу_________________________________ 25

Виводи_________________________________________________________________ 26

Список використовуваної літератури_______________ Помилка! Закладка не визначена. Вступ

World Wide Web - глобальна комп'ютерна мережа на сьогоднішній день містить мільйони веб-сайтів, на яких розміщена будь-яка інформація. Люди отримують доступ до цієї інформації за допомогою використання технології Internet. Для навігації в WWW використовуються спеціальні програми - Web-браузери, які істотно полегшують подорож безкрайніх просторах WWW. Вся інформація в Web-браузері відображається у вигляді Web-сторінок, які є основним елементом байтів WWW.

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

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

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

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

Також в даній роботі мною розглянуті основи мови програмування Web-сторінок - HTML, який є загальноприйнятим стандартом WWW. Це дасть нам можливість ознайомитися зі структура Web-сторінки і прийомами її правильного оформлення. 1. World Wide Web 1.1 Поширення Internet

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

Рис. 1

На рис.1 країни, позначені чорним кольором, мають зв'язок по Internet. Кількість людей, які мають такий доступ, в цих країнах стає все більше і більше. Країни, позначені білим кольором можуть працювати по e-mail, в локальних мережах або не мають нічого подібного взагалі. 1.2. Концепція WWW

Так що ж таке World Wide Web, або, як кажуть в просторіччі, WWW, the Web, або ще простіше - 3W? WWW -- це розподілена інформаційна система мультимедіа, заснована на гіпертексті. Давайте розберемо це визначення по порядку.

Розподілена інформаційна система: інформація зберігається на величезній безлічі так званих WWW-серверів (servers). Тобто комп'ютерів, на яких встановлене спеціальне програмне забезпечення і що об'єднані в мережу Internet. Користувачі, які мають доступ до мережі, отримують цю інформацію за допомогою програм-клієнтів, програм перегляду WWW-документів. При цьому програма перегляду посилає по комп'ютерній мережі запит серверу, що зберігає файл з необхідним документом. У відповідь на запит сервер висилає програмі перегляду цей необхідний файл або повідомлення про відмову, якщо файл по тих або інших причинах недоступний. Взаємодія клієнт-сервер відбувається за певними правилами, або, як кажуть інакше, протоколу. Протокол, прийнятий в WWW, називається HyperText Transfer Protocol, скорочено - HTTP.

Мультимедіа: інформація включає в себе не тільки текст, але і двох-і тривимірну графіку, відео та звук.

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

Такі посилання називають гіперпосиланнями або гіперзв'язками. На екрані комп'ютера у вікні програми перегляду посилання виглядають як виділені яким-небудь чином (наприклад, іншим кольором і/або підкресленням) дільниці тексту або графіки. Вибираючи гіперпосилання, користувач програми перегляду може швидко переміщатися від однієї частини документа до іншої, або ж від одного документа до іншого. При необхідності програма перегляду автоматично зв'язується з відповідним сервером в мережі і запитує документ, на який зроблене посилання. До речі, ідея гіпертекстового представлення інформації повинна вже бути добре знайома користувачам різних версій системи Microsoft Windows. Саме за цим принципом побудована в Windows система підказок (Help), з тією лише різницею, що гіпертекстова система підказок Windows не є розподіленою.

Отже, Web-сторінка може містити стилізований і форматованого текст, графіку і гіперзв'язки з різними ресурсами Internet. Щоб реалізувати всі ці можливості, був розроблений спеціальна мова, названа HyperText Markup Language (HTML), тобто, Мова Розмітки Гіпертексту. Документ, написаний на HTML, являє собою текстовий файл, що містить власне текст, несучий інформацію читачеві, і прапори розмітки. Останні є певні послідовності символів, що є інструкціями для програми перегляду; згідно з цими інструкціями програма розташовує текст на екрані, включає в нього малюнки, що зберігаються в окремих графічних файлах, і формує гіперзв'язки з іншими документами або ресурсами Internet. Таким чином, файл на мові HTML набуває вигляд WWW-документа тільки тоді, коли він інтерпретується програмою перегляду. Про мову HTML буде детально розказано в наступному розділі, оскільки без знання основ цієї мови неможливо створити Web-сторінку для публікації в WWW. Створення Web- сторінки за допомогою мови HTML 2.1 Мова HTML

Web-сторінки можуть існувати в будь-якому форматі, але як стандарт прийнятий Hyper Text Markup Language -- мова розмітки гіпертекстів, призначений для створення форматованого тексту, насиченого зображеннями, звуком, анімацією, відео та гіпертекстовими посиланнями на інші документи, розкидані як по всьому Web-простору, так і що знаходяться на цьому ж сервері або що є складовою частиною цього ж Веб-проекту.

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

Мова HTML існує в декількох варіантах і продовжує розвиватися, але конструкції HTML швидше за все будуть використовуватися і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати Web-сторінки, які можуть бути переглянуті багатьма броузерами Web, як зараз, так і в майбутньому. Це не виключає можливості використання інших методів, наприклад, метод розширених можливостей, що надається Netscape Navigator, Internet Explorer або деякими іншими програмами.

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

HTML був ратифікований World Wide Web Consortium. Він підтримується декількома широко поширеними броузерами, і, можливо, стане основою майже всього програмного забезпечення, яке має відношення до Web. 2.2. Структура HTML документа

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

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

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

Інформація

Тут стартовим тегом є тег

, а завершальним - . Завершальний тег відрізнятись від стартового лише тим, що в нього перед текстом в дужках стоїть символ '/' (слеш).

Браузер, який читає HTML-документ, відображає його у вікні, використовуючи структуру HTML-тегів. У кожному HTML-документі повинні бути присутніми три головні частини:

A) Оголошення HTML;
B) Заголовачная частина;
C) Тіло документа.

A) Оголошення HTML

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

.
.
.

B) заголовної частини.

і . Між цими тегами розташовується інформація про документ (назва, ключові слова для пошуку, опис і т.д.). Однак найбільш важливим є назва документа, який ми бачимо у верхній частині вікна браузера і в списках "Избранное (BookMark)". Спеціальні програми-спайдер пошукових систем використовують назву документа для побудови своїх баз даних. Для того щоб дати назву своєму HTML-документу текст поміщається між тегами і .

Моя перша сторінка
 

C) Тіло документа.

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

Моя перша сторінка
 

......................................

 

Тепер ми можемо написати HTML-код нашої сторінки:

Моя перша сторінка
 


Тут будуть мої сторінки!


  2.3 Форматування тексту

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

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

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

(англ. paragraph - абзац). Цей тег, крім початку нової рядки, вставляє одну порожню рядок. Але багаторазове повторення

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

Усередині дужок тега крім його назви можуть розміщуватися також атрибути (англ. atributes - атрибути). Вони відокремлюються від назви і між собою пропусками (одним або декількома), а пишуться у вигляді імя_атрібута = "значення". Якщо значення не містить пробілів, то лапки можуть бути опущені, але так робити не рекомендується. Тег

може містити атрибут ALIGN, визначає вирівнювання абзацу. За замовчуванням абзац вирівнюються вліво ALIGN = "left". Можливі також вирівнювання вправо ALIGN = "right" і по центру ALIGN = "center". При використанні атрибутів, після форматіруемого тексту слід вживати закриває тег . Якщо його немає, то новий тег

означає закриття попереднього, відповідно вкладені

неможливі. Вирівняти текст по центру можливо також тегом.

Тепер ми можемо помістити на нашу Web-сторінку деякий текст з різним вирівнюванням:

Моя перша сторінка

Тут будуть мої особисті сторінки!

На них Ви зможете знайти:
- розповідь про мене і про мої захоплення;
- мої фотографії.

З одного з моїх сторінок можна буде
відправити мені електронний лист.

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

Наприклад:

Це текст написаний
в два строки.

У HTML-документі, крім тексту, може містити горизонтальні розділові лінії. Вони, як і текст, не вимагають ніяких зовнішніх файлів. Тег виведе горизонтальну лінію одиничної товщини вздовж всієї ширини сторінки. Горизонтальна розділова лінія завжди призводить до розриву рядка, але порожніх рядків між лінією і текстом не з'являється. Тег можнт містити кілька атрибутів. і дають контурну лінію з тривимірним ефектом поглиблення. дає суцільну чорну лінію. Лінія може не тягнутися під всю ширину сторінки, а складати лише деяку частину. Атрибут WIDTH задає ширину лінії, у відсотках від ширини всієї сторінки або в пікселях. Наприклад, 50% - Половина ширини сторінки, 400 - ширина в 400 пікселів. Атрибут ALIGN може приймати значення, аналогічні його значенням для тегу

, але вирівнювання за замовчуванням - по центру. Атрибут SIZE задає товщину лінії в пікселях від 1 до 175; за замовчуванням 1, але якщо, (лінія - контурна), то додається товщина, необхідна для тривимірного ефекту поглиблення.

Лінії, поряд з абзацами, дозволяють виділити логічні фрагменти тексту. Але велика кількість горизонтальних ліній неприємно для відвідувача вашої Веб-сторінки, тому після кожного абзацу їх ставити не слід. Вони більше підходять для виділення цілих розділів. 3. Програми для створення Web-сторінок 3.1 HTML-редактори

Кожен вибирає свій інструмент для створення Web-сторінок. Це може бути MS FrontPage або Macromedia DreamWeaver, Allaire HomeSite або 1st Page 2000. А хтось користується простим текстовим редактором, наприклад Блокнотом (Notepad).

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

Основним недоліком MS FrontPage є те, що він генерує дуже великий HTML-код (занадто багато зайвого), тому сторінки виходять великими, що позначається на швидкості завантаження. Більш того, при створенні Web-сторінок в цьому редакторі бачиш одне, а у вікні браузера - зовсім інше (особливо це стосується Netscape Navigator). Сторінки виходять якимись кривими, тому для створення якісних Web-сторінок рекомендується використовувати пакунки, які будуть розглянуті нижче.

Почнемо ми з популярного Macromedia DreamWeaver. Компанія Macromedia вважається лідером по виробництву програм для створення веб-сайтів, а також законодавцем моди в цій області.

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