Міністерство загальної та професійної освіти
Російської Федерації
Новосибірський державний педагогічний університет
Куйбишевський філія
Курсова робота з інформатики
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 Поширення InternetInternet - це найбільша світова комп'ютерна мережа. Тепер 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 Мова HTMLWeb-сторінки можуть існувати в будь-якому форматі, але в якості стандарту прийнятий 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-код нашої сторінки:
Моя перша сторінка
Тут будуть мої сторінки!
У розділі 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 - що бачу, то й