<
  • Главная
Статьи

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

  1. Курсова робота з інформатики
  2. 2. 2. Структура HTML документа
  3. 2.3 форматування тексту
  4. 3.1 HTML-редактори
  5. А) Редактори растрової графіки
  6. B) Редактори векторної графіки
  7. 4.1 Способи створення WEB-сторінок в WORD'97

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

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

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

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

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

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

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

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

Куйбишев

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-сторінки і прийомами її правильного оформлення.

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

Мал. 1

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

Так що ж таке 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-сторінки можуть існувати в будь-якому форматі, але в якості стандарту прийнятий 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 задаються синтаксис і розміщення тегів, відповідно до яких браузер відображає вміст Веб-документа. Текст самих тегів Веб-браузером не відображається.

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

<P> Інформація </ p>

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

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

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

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

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

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

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

<HTML>
<HEAD>
<TITLE> Моя перша сторінка </ TITLE>
</ HEAD>
</ HTML>

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

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

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

<HTML>
<HEAD>
<TITLE> Моя перша сторінка </ TITLE>
</ HEAD>
<BODY>
Тут будуть мої сторінки!
</ BODY>
</ HTML>

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

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

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

Суцільний текст без проміжків читається не дуже легко, його незручно переглядати і знаходити потрібні місця. Розбитий на абзаци, текст сприймається набагато швидше. Для початку нового абзацу використовується тег <P> (англ. Paragraph - абзац). Цей тег, крім початку нового рядка, вставляє один порожній рядок. Але багаторазове повторення <P>, на відміну від <BR>, не приведе до появи декількох порожніх рядків, залишиться все та ж один порожній рядок.

Усередині дужок тега крім його назви можуть розміщуватися також атрибути (англ. Atributes - атрибути). Вони відокремлюються від назви і між собою пробілами (одним або декількома), а пишуться у вигляді імя_атрібута = "значення". Якщо значення не містить пробілів, то лапки можуть бути опущені, але так робити не рекомендується. Тег <P> може містити атрибут ALIGN, що визначає вирівнювання абзацу. За замовчуванням абзац вирівнюються вліво ALIGN = "left". Можливі також вирівнювання вправо ALIGN = "right" і по центру ALIGN = "center". При використанні атрибутів, після форматируемого тексту слід використовувати закриває тег </ P>. Якщо його немає, то новий тег <P> означає закриття попереднього, відповідно вкладені <P> неможливі. Вирівняти текст по центру можливо також тегом <CENTER>.

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

<HTML>
<HEAD>
<TITLE> Моя перша сторінка </ TITLE>
</ HEAD>
<BODY>
<P align = center> Тут будуть мої особисті сторінки!
<P align = left> На них Ви зможете знайти: <BR> - розповідь про мене і про мої захоплення; <BR> - мої фотографії.
<P align = right> З одного з моїх сторінок можна буде <BR> відправити мені електронного листа.
</ BODY>
</ HTML>

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

наприклад:

<PRE> Це текст написаний
в два рядки. </ PRE>

У HTML-документі, крім тексту, можуть міститися горизонтальні розділові лінії. Вони, як і текст, не вимагають ніяких зовнішніх файлів. Тег <HR> виведе горизонтальну лінію одиничної товщини уздовж всієї ширини сторінки. Горизонтальна розділова лінія завжди приводить до розриву рядка, але порожніх рядків між лінією і текстом не виникає. Тег <HR> можнт містити кілька атрибутів. <HR SHADE> і <HR> дають контурну лінію з тривимірним ефектом поглиблення. <HR NOSHADE> дає суцільну чорну лінію. Лінія може не тягнутися у всю ширину сторінки, а складати лише деяку частину. Атрибут WIDTH задає ширину лінії, у відсотках від ширини всієї сторінки або в пікселах. Наприклад, 50% - половина ширини сторінки, 400 - ширина в 400 пікселів. Атрибут ALIGN може приймати значення, аналогічні його значенням для тега <P>, але вирівнювання за умовчанням - по центру. Атрибут SIZE задає товщину лінії в пікселях від 1 до 175; за замовчуванням 1, але якщо <HR SHADE>, (лінія - контурна), то додається товщина, необхідна для тривимірного ефекту поглиблення.

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

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


отримую).

DreamWeaver 3.0

Альо DreamWeaver на кілька кроків віпереджає інші редактори, Використовують технологію WYSIWYG, в Першу Черга тім, что генерує дуже чистий HTML-код. DreamWeaver дозволяє вам позбавитися від однотипної роботи при створенні сторінок (наприклад, верстка тексту) за допомогою використання опції "запис послідовності команд" ви записуєте послідовність вироблених вами команд, потім натискаєте, наприклад, CTRL + P, і DreamWeaver відтворює все в тій же послідовності.

Наступний редактор - HomeSite 4 - для створення сторінок вручну, т. Е. Для знавців HTML. Ви отримуєте повний контроль над HTML-кодом, причому існує можливість оптимізувати свою сторінку під один з трьох популярних браузерів (MSIE, NN, Opera).

HomeSite містить два основні режими: Edit і Design. Режим Design - це подібність WYSIWYG-редактора, яка видає HTML-код, причому, якщо ви завантажте чужій HTML-код, то HomeSite все перепише по-своєму. Режим Edit дозволяє отримати повний контроль над сторінкою. Тут ви можете налаштувати практично все, зможете прописати функції кожного тега (тоді ваша сторінка в будь-якому


браузері буде виглядати однаково).

HomeSite 4.0

Ще одна відмінна риса HomeSite - це його «склеювання» з Dreamweaver. HomeSite володіє кнопкою «Dreamweaver», а також входить в його стандартний пакет поставки. Втім, і DreamWeaver має можливість підключення HomeSite, як редактора для коректіровкі HTML-коду.


Одним з останніх HTML-редакторів є EVR Soft 1st Page 2000 v2.

Його гасло - "Create 1st class websites!" ( "Створюйте першокласні веб-сайти!"). Редактор має кілька режимів - Normal, Easy, Advanced / Expert і Hardcore, тобто ви можете вибрати свій рівень, а з часом перейти на більш високий. Ще одна особливість - досить велика колекція скриптів на JavaScript і DHTML. Все це досить зручно розбито по категоріях.

Створення та оптимізація графіки - складна і примхлива завдання. Безумовно, можливе створення Web-сторінки і без використання графіки - за допомогою шрифтів, скриптів і таблиць стилів (CSS) - і це буде красиво і стильно. Але ж остаточний вид документа залежить від великої кількості різних факторів, таких як: ширина вікна браузера, попередні налаштування браузера, прийняті за замовчуванням розмір шрифту, його ім'я і колір. До того ж не всі скрипти і стилі підтримуються всіма браузерами. Якщо ж буде використана графіка, то відвідувач вашої сторінки побачить її точно такою, якою зробили і бачите її ви.

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

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

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

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

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

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

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

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

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

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


Microsoft Paint

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

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


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

Пакет пропонує, наприклад, кошти для відновлення пошкоджених зображень, ретушування фотографій або створення найфантастичніших колажів, які тільки може дозволити собі наша уява. Загалом, потенціал цього пакета поістене величезний. Починаючи з версії 5.5 в пакет включена програма Adobe ImageReady, що надають величезні можливості по обробці графіки під WEB (оптимізація зображень, створення анімованих gif, "розрізання" картинок на більш дрібні і т.д.). Девіз розробників Adobe Photoshop - "Camera of your mind" - передбачає не тільки технічну досконалість, але і повну свободу творчості, на яку людина, що працює з цією програмою, просто приречений.

PhotoPaint - ще один не менш відомий графічний редактор (з пакету Corel Draw) для обробки растрової графіки, що конкурує з Adobe Photoshop. Тут також є всі необхідні інструменти для обробки графіки, різноманітні фільтри, текстури. Різниця лише в зручності роботи, інтерфейсі і швидкості накладення фільтрів - накладення відбувається трохи повільніше.

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

Існує ще ряд редакторів (Microsoft Photo Editor, Microsoft Photo DRAW), також дозволяють реалізувати найпростіші завдання, але не задовольняють запитам професіоналів.

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


Adobe Illustrator

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

растровому редактору Adobe Photoshop: має аналогічний інтерфейс, дозволяє підключати різні фільтри і ефекти, розуміє багато графічних формати, навіть такі як .cdr (Corel Draw) і .swf (Flash).

CorelDraw - безумовно, такий відомий графічний пакет не міг обійтися без коштів для обробки векторної графіки. Пакет за своєю потужністю практично не поступається графічним редакторам Adobe Photoshop і Adobe Illustrator. Крім обробки векторної графіки, в цьому пакеті існує обробник растрової графіки (Photo Paint), трассировщик зображень, редактор шрифтів, підготовки текстур і створення штрих кодів, а також величезні колекції із зображеннями


(CorelGallery).

Adobe Streamline - ще один продукт фірми Adobe, призначений для трасування (переведення) растрової графіки у векторну. Це невеликий, але дуже корисний і потужний продукт. Особливо корисний, якщо ви створюєте Web-сторінки з використанням векторної графіки, наприклад, технології Flash.

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

Існують два способи створення Web-сторінок:

· За допомогою майстра або шаблону,

· Перетворити існуючий документ Word в формат HTML.

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

Сторінку Web можна зробити більш цікавою, розмістивши на ній марковані й нумеровані списки, горизонтальні лінії, кольору фону, візерунки, таблиці, малюнки, відеозапису, біжучий рядок і форми. Більшість цих елементів вводяться в сторінку так само, як в документ Word. Однак для спрощення редагування Web-сторінок в Word для цих цілей передбачені деякі нові спеціальні функції і команди.

Основна відмінність полягає в тому, що крім маркерів в списках можна використовувати графічні зображення. Набір таких зображень знаходиться в діалоговому вікні Список (меню Формат). Крім графічних зображень, в діалоговому вікні пропонуються текстові маркери, підтримувані HTML для Web-сторінок. Графічні маркери зберігаються у форматі GIF (з розширенням .gif), в той же каталог, що і Web-сторінка.

Для її створення виберіть команду Горизонтальна лінія в меню Вставка. Зі списку Вид виберіть потрібну лінію. При збереженні Web-сторінки така лінія зберігається разом з Web-сторінкою як графічний файл з ім'ям image.gif, image1.gif і т. П.

Щоб зробити документи Word і Web-сторінки більш привабливими, використайте різноманітні види тла, в тому числі текстурну заливку. Можна створити підкладку, яка буде видна тільки в надрукованому документі.

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

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

Щоб вставити малюнок в Web-сторінку, виберіть команду Малюнок в меню Вставка, а потім команду з файлу або Картинки. Якщо вставляється малюнок записаний у форматі JPG, він зберігається в форматі JPG. Якщо малюнок записаний в іншому форматі, наприклад, TIF, він перетворюється в формат GIF. Якщо малюнок вставляється з файлу, при збереженні він копіюється в ту ж папку, що і Web-сторінка, якщо не встановлено прапорець

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

Графічні об'єкти, - наприклад, авто фігури, написи і фігурний текст - можна використовувати в якості об'єктів типу «Малюнок Microsoft Word». Після закриття документа ці елементи не можна буде знову відредагувати. Вони будуть перетворені в зображення формату GIF.

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

Гіперпосилання можна робити на закладки, поміщені в даному чи іншому документі. Це дозволяє перейти на потрібний розділ, що не перегортаючи документ.

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

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

Таким чином, ми вивчили можливості мови HTML для створення Web-сторінок, дізналися, які HTML- і графічні редактори краще використовувати в Web-дизайні, які переваги і недоліки тих чи інших програмних пакетів. І, нарешті, ми з'ясували, які можливості для створення Web-сторінок має Word'97 з пакету Microsoft Office.

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

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

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

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

Список сайтів інформація, з яких була використана при написанні курсової роботи:

Www.webschool.narod.ru

Www.pronet.ru

Www.education.kulichki.net

Www.gor.h1.ru

Так що ж таке World Wide Web, або, як кажуть в просторіччі, WWW, the Web, або ще простіше - 3W?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью