OsnovyWebDis
.pdfО. Г. ПАСІЧНИК, О. В. ПАСІЧНИК, І. В. СТЕЦЕНКО
Основи веб-дизайну
Серія «Інформатика. Профільне навчання» За загальною редакцією доктора технічних наук, професора,
академіка АПН України А. М. Гуржія
Рекомендовано Міністерством освіти і науки України
Київ Видавнича група BHV
2009
УДК 004.7 ББ К 32.973
П-19
Рецензенти: О. В. Дерев'янченко, доцент Київського національного університету ім. Тараса Шевченка, кандидат фіз.-мат. наук.
Д. І. Кожем'яка, вчитель інформатики Фінансово-право вого ліцею Фінансово-правового коледжу КНУ ім. Т. Шев ченка.
Гриф |
наданий |
Міністерством |
освіти |
і |
науки |
України, |
|
лист |
№ 1/11-988 |
від 31.03.2008 р. |
|
Пасічник О. Г., Пасічник О. В., Стеценко І. В.
П-19 Основи веб-дизайну / О. Г. Пасічник, О. В. Пасічник, І. В. Стеценко : [Навч. посіб.]. — К.: Вид. група BHV. — 2009. — 336 с: іл.
ISBN 978-966-552-228-7
У посібнику в доступній формі описані основні методи та засоби веб-дизайну. Розглядаються мови HTML і JavaScript, автоматизовані та візуальні засоби розробки веб-сайтів, зокрема програма FrontPage, служби хостингу та популяризації сайтів, а також художні аспекти веб-дизайну. Книжка містить теоретичний матеріал, практичні роботи, вправи, завдання для самостійного виконання і тести.
Посібник призначено для учнів та учителів середніх загальноосвітніх шкіл, ліцеїв і гімназій. Він може використовуватися під час вивчення базового курсу інформатики і курсу за вибором. Видання також стане
внагоді всім, хто прагне опанувати веб-дизайн самостійно.
ББК 32.973
Усі права захищено. Жодна частина цієї книжки не може бути відтворена в будь-якій формі будь-якими засобами без письмового дозволу власників ав торських прав. Інформація, що міститься в цьому виданні, отримана з надій них джерел і відповідає точці зору видавництва на обговорювані питання на поточний момент. Проте видавництво не може гарантувати абсолютну точність та повноту викладених відомостей і не несе відповідальності за можливі по милки, пов'язані з їхнім використанням. Наведені у книжці назви продуктів або організацій можуть бути товарними знаками відповідних власників.
ISBN 978-966-552-228-7 |
© Видавнича група BHV, 2009 |
Зміст
Передмова |
7 |
Від видавництва |
8 |
Розділ 1. Автоматизоване створення |
|
й підтримка веб-ресурсів |
9 |
Основи Інтернету |
9 |
Передавання даних в Інтернаті |
9 |
Адресація в Інтернеті |
10 |
Веб-сторінка та веб-сайт |
12 |
Домашні сторінки |
13 |
Структура веб-сайтів |
14 |
Створення та підтримка веб-ресурсів в автоматизованому режимі |
16 |
Безкоштовний хостинг веб-сайту |
16 |
Форуми та чати на веб-сайтах |
20 |
Створення та ведення блогів |
24 |
Практична робота № 1 |
28 |
Практична робота № 2 |
37 |
Самостійна робота |
40 |
Тест |
41 |
Розділ 2. Основи мови HTML |
45 |
Базові конструкції мови HTML |
45 |
Поняття тагу |
46 |
Структура НТМL-документа |
47 |
Теги форматування тексту |
49 |
Нумеровані й марковані списки |
54 |
Текстові гіперпосилання |
57 |
Використання таблиць у HTML-документах |
61 |
Створення таблиці |
61 |
Об'єднання комірок |
64 |
Встановлення ширини таблиці та комірок |
67 |
Форматування тексту та оформлення рамок таблиці |
68 |
Колірне оформлення таблиць |
69 |
Використання таблиць для розміщення об'єктів на веб-сторінці |
70 |
HTML-документи, які містять фрейми |
74 |
Фрейми, їхні теги й атрибути |
75 |
Використання посилань у фреймах |
78 |
Недоліки використання фреймів |
80 |
Практична робота № З |
81 |
Практична робота №4 |
84 |
Практична робота №5 |
86 |
Самостійна робота |
89 |
Тест |
91 |
Розділ 3. Графіка, аудіота відеоінформація |
|
на веб-сторінках |
95 |
Використання зображень у веб-документах |
95 |
Формати зображень, які використовують в Інтернеті |
96 |
Розміщення і вирівнювання зображень на веб-сторінках |
97 |
Створення GIF-анімації |
109 |
Карти посилань |
113 |
Розміщення та відтворення на веб-сторінках мультимедійних даних |
119 |
Формати аудіота відеофайлів |
119 |
Технології та засоби відтворення мультимедіа |
121 |
Використання мультимедіа на веб-сторінках |
123 |
Практична робота № 6 |
126 |
Самостійна робота |
131 |
Тест |
132 |
Розділ 4. Візуальний редактор веб-сайтів |
135 |
Інтерфейс та режими роботи програми |
135 |
Вікно програми |
136 |
Режими перегляду веб-документа |
137 |
Робота з веб-сторінками |
138 |
Відкривання та створення сайтів і веб-сторінок |
138 |
Форматування тексту |
140 |
Розміщення і настроювання зображень |
141 |
Створення таблиць |
145 |
Створення гіперпосилань |
147 |
Створення веб-сайту за допомогою майстра або шаблону |
150 |
Використання майстрів та шаблонів для сайтів |
151 |
Шаблони веб-сторінок |
153 |
4 |
Зміст |
Практична робота № 7 |
157 |
Самостійна робота |
165 |
Тест |
165 |
Розділ 5. Таблиці каскадних стилів |
|
і динамічні веб-сайти |
169 |
Використання таблиць каскадних стилів |
169 |
Поняття про таблиці каскадних стилів |
170 |
Застосування каскадних стилів у НТІУІІ-документах |
171 |
Позиціювання елементів веб-сторінки за допомогою стилів |
178 |
Застосування стилів у програмі FrontPage |
182 |
Створення та підключення зовнішньої таблиці стилів |
183 |
Внутрішня таблиця стилів та вбудовані стилі |
186 |
Поняття об'єктної моделі |
189 |
Властивості, методи та події |
190 |
Об'єктна модель браузера Internet Explorer |
193 |
Сценарії |
198 |
Мова програмування JavaScript |
199 |
Використання форм |
204 |
Створення форм та динамічних ефектів у FrontPage |
212 |
Шаблони та майстри для створення форм |
213 |
Елементи форм |
218 |
Ефекти динамічної HTML у FrontPage |
222 |
Практична робота № 8 |
229 |
Практична робота № 9 |
234 |
Самостійна робота |
242 |
Тест |
242 |
Розділ 6. Хостингта популяризація сайтів |
247 |
Розміщення веб-сайту в мережі Інтернет |
247 |
Вибір URL-адреси |
248 |
Хостинг на безкоштовному сервері |
249 |
FTP-3'єднання з хостом |
256 |
Рекламування сайту в Інтернеті |
258 |
Банеритабанерні мережі |
258 |
Реєстрація ресурсу в пошукових системах |
262 |
Практична робота № 10 |
268 |
Самостійна робота |
272 |
Тест |
272 |
Зміст |
5 |
Розділ 7. Дизайн веб-сайтів |
|
276 |
Типи сайтів та їх особливості |
|
276 |
Статичні та динамічні сайти |
|
277 |
Тематична класифікація |
|
277 |
Візуальна класифікація |
|
279 |
Планування веб-сайту та етапи роботи над ним |
|
282 |
Веб-дизайн у контексті художнього |
дизайну |
285 |
Основні поняття дизайну |
|
285 |
Ергономіка |
|
288 |
Основні складові веб-дизайну |
|
289 |
Проектування структури сайту |
|
291 |
Вибір інформаційної архітектури |
|
291 |
Засоби навігації |
|
295 |
Проектування гіперпосилань |
|
299 |
Просторовий дизайн веб-сторінок |
|
301 |
Вибір розмірів веб-сторінок |
|
302 |
Компонування та визначення набору сторінок сайту |
304 |
|
Розміщення елементів на сторінці |
|
306 |
Інформаційне наповнення веб-сторінки |
|
311 |
Підготовка текстів |
|
311 |
Вибір шрифтового оформлення |
|
311 |
Графічне оформлення веб-сторінки |
|
314 |
Сприйняття людиною форм та фігур |
|
315 |
Коліру веб-дизайні |
|
318 |
Текстури у веб-дизайні |
|
322 |
Типові помилки дизайнерів-початківців |
|
323 |
Практична робота № 11 |
|
326 |
Самостійна робота |
|
330 |
Тест |
|
331 |
6 |
Зміст |
Передмова
Уміння створювати якісні й цікаві веб-сайти наразі стає однією з найважливіших складових інформаційної культури людини, адже від того, як вона зможе представити у світовому інфор маційному просторі себе, коло своїх професійних та особистих інтересів або ж реалізувати в Інтернеті той чи інший проект, пов'язаний із професійною діяльністю, багато в чому залежить успішність її кар'єри. Такі вміння вже не пов'язані з певною професією, вони необхідні для будь-якого активного члена сучас ного суспільства, і тому навчання основам веб-дизайну має ста ти однією зі складових базового курсу інформатики в середній школі. Проте у більшості діючих програм з інформатики відпо відної теми не передбачено, а отже, найпоширенішою формою викладання у школі основ веб-дизайну може стати проведення курсу за вибором. Видання, яке ви тримаєте в руках, містить повний комплект навчально-метотидчних матеріалів, необхідних для організації такого курсу, хоча може використовуватися і для викладання основ веб-дизайну в будь-якій іншій формі.
Посібник розрахований на проведення 35-годинного навчально го курсу, протягом якого учні мають виконати 11 практичних робіт (на кожну з них слід відвести 20-25 хвилин). Крім цих робіт, які підсумовують результати вивчення тієї чи іншої теми, передбачені численні вправи з покроковим описом дій, виконуваних учнями за комп'ютером. Кожний розділ книжки також містить тест із дванадцяти запитань та завдання для са мостійного виконання. Отже, посібник є практично спрямова ним, але попри це автори прагнули викласти й теоретичний матеріал, в обсязі, достатньому для наповнення лекційної скла дової курсу та самостійного вивчення предмета.
Слід зазначити, що у навчальній літературі поняття веб-дизай ну часто підмінюється поняттям веб-програмування та супутніх технологій. Наш посібник у цьому контексті є винятком, адже
в ньому значну увагу приділено просторовому і колірному офор мленню веб-сторінок, дизайну інформаційного наповнення сайту та іншим питанням, пов'язаним із художніми аспектами розробки веб-ресурсів. Звичайно, робота веб-дизайнера неможлива без воло діння певним технічним мінімумом. Тому у виданні детально й ґрунтовно висвітлюються такі теми, як основи мови HTML, графіка, подання на веб-сторінках аудіота відеоінформації, ви користання графічного редактора веб-сайтів тощо.
Модульна структура посібника дозволяє поділити матеріал за рів нями складності, гнучко пристосовуючи обсяг та глибину курсу до специфіки навчального закладу. Так, для закладів гуманітар ного профілю курс може бути обмежений вивченням 1 і 7 роз ділів посібника, в яких розглядається процес автоматизованого створення веб-ресурсів та художній дизайн сайтів. Для більшості інших закладів доцільним буде також вивчення розділів 2-4 та 6, де описується мова HTML, використання графіки, звуку та відео на веб-сторінках і робота з Microsoft FrontPage — графіч ним редактором веб-сайтів. Для закладів інформаційно-техно логічного профілю призначено ще й розділ 5, у якому викла дено основи динамічного HTML.
Акумулювавши власний та чужий досвід викладання веб-ди- зайну, спрямувавши значні зусилля на те, щоб зробити мате ріал посібника доступним, сучасним і необхідним українській школі, автори водночас усвідомлюють, що як перше видання ця книжка є далекою від досконалості, й тому сподіваються на активну співпрацю з тими, хто використовуватиме посібник у своїй педагогічній роботі та навчальній практиці.
Бажаємо нашим читачам натхнення та успіху в освоєнні курсу «Основи веб-дизайну» і сподіваємося, що наш посібник буде на дійною опорою та помічником на нелегкому шляху пізнання.
Від видавництва
За докладною інформацією про видання серії «Інформатика. Профільне навчання» звертайтеся на сайт Видавничої групи BHV (http://www.bhv.kiev.ua) та на сайт «Онлайнова освіта. Профільне навчання» (http://osvitaonline.googlepages.com). На них ви також знайдете навчально-методичні матеріали до посібників серії.
8 |
Передмова |
Розділ 1
Автоматизоване створення й підтримка веб-ресурсів
Перш ніж ви почнете вивчати веб-дизайн, тобто проектування та розробку інтернет-ресурсів, слід ознайомитися з деякими загаль ними поняттями, які стосуються мережі Інтернет та служби Веб. у цьому розділі йтиметься про передавання даних через Інтернет, способи адресації його ресурсів та особливості Веб. Зокрема, ви ді знаєтеся, що таке гіперпосилання, веб-сторінка і веб-сайт. На вас також чекають цікаві практичні заняття, під час яких ви навчи теся використовувати автоматичні засоби створення веб-ресурсів та побачите, як за їх допомогою створити веб-сторінки різних типів і організувати на веб-сайті форум та чат.
Основи Інтернету
Сьогодні у світі є сотні тисяч великих та малих комп'ютерних мереж. Багато з них з'єднані між собою й утворюють єдиний ін формаційний простір, який складається з мільйонів комп'ютерів. Цей єдиний віртуальний простір називають Інтернетом.
За кількістю комп'ютерів та охоплюваною територією Інтернет є найбільшою у світі мережею. За типом вона належить до клі- єнт-серверних мереж, тобто в Інтернеті є комп'ютери-сервери, які зберігають інформацію та надають її комп'ютерам-клієнтам.
Передавання даних в Інтернеті
Обмін інформацією між серверами та клієнтами здійснюється за певними правилами, які називають протоколами. Всі дані, що цир кулюють у глобальному інформаційному полі, розбито на невеликі
блоки і вкладено в пакети. Кожний пакет окрім даних має заго ловок, де зберігаються адреса відправника, адреса одержувача та інша інформація, необхідна для збирання пакетів у пункті призна чення. Теоретично можливо, що різні пакети одного повідомлен ня пройдуть різними шляхами, але все одно досягнуть адресата і будуть зібрані в повне повідомлення.
Поділ даних на пакети та їх збирання у пункті призначення здій снюється під керуванням протоколу TCP (Transmission Control Protocol — протокол керування передаванням), а власне переда вання пакетів мережею та досягнення ними адресата забезпечує протокол IP (Internet Protocol — міжмережний протокол).
У Інтернеті використовується велика кількість протоколів, завдя ки чому існує широкий спектр служб, які надаються та підтриму ються за допомогою цієї глобальної мережі.
Найпопулярнішою зі служб є Всесвітня павутина (World Wide Web — WWW), або просто Веб. Це розповсюджена по всьому світу інформаційна мультимедійна система, яка об'єднує в єдиному про сторі інформацію різних типів. Робота у Веб подібна до віртуальної подорожі світом з відвідуванням цікавих місць. Ця служба базуєть ся на протоколі HTTP (Hyper Text Transfer Protocol — протокол передавання гіпертексту).
Іншою службою, з якою вам доведеться працювати під час вив чення матеріалу посібника, є FTP (File Transfer Protocol — прото кол передавання файлів). Як ви, напевно, здогадалися, назва цієї служби збігається з назвою протоколу, який вона використовує. Сервери, що підтримують цей протокол, називають FTP-сервера- ми. Частина дискового простору таких серверів доступна через Інтернет.
Крім того, до служб Інтернету належать електронна пошта, служ би миттєвого передавання повідомлень (наприклад, ICQ), служба новин Usenet та інші.
Адресація в Інтернеті
Усі комп'ютери, підключені до Всесвітньої мережі, працюють в ав томатичному режимі, без участі людей. Для того щоб такий ком п'ютер мав змогу передавати та приймати дані з використанням протоколу IP, він повинен мати унікальну адресу, яку називають
10 |
Розділ 1. Автоматизоване створення й підтримка веб-ресурсів |