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

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

Российской Федерации.

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

Куйбышевский филиал.

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

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) Заголовачная частина; З) Тіло документа..

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 — що бачу, те й.