Графіка та трафік
Вимоги до краси та виразності оформлення Web-сторінок перебувають у постійному суперечності з технічними можливостями сучасного Web-хостингу. Тому проектувальник сайту повинен стати посередником між дизайнером та користувачем і суворо витримувати рівновагу між візуальною привабливістю та розумною швидкістю доставки інформації в Мережі. Щоб успішно вирішувати цю проблему, необхідно знати всі графічні формати, що використовуються в Інтернеті, розуміти відмінності між ними, області застосування та особливості використання.
Щоб розібратися з великою кількістю форматів та протоколів, прийнятих в Інтернеті, та побудувати власну сторінкунеобхідно відібрати те, що є найбільш підходящим для ваших конкретних цілей. Деякі формати можуть бути специфічні лише для одного браузера, інші потребують спеціального зовнішнього модуля. Ми вибрали з усього різноманіття форматів ті, які найчастіше використовуються авторами популярних сайтів і приймаються користувачами.
GIF і JPEG - це два найбільш популярні графічні формати, які давно стали фактичними стандартами для використання на WWW. Обидва досить універсальні, читаються більшістю браузерів і не вимагають спеціального програмного забезпечення(або додаткових модулів). GIF та JPEG - растрові формати зображення, що, відповідно, визначає фіксований формат (дозвіл) при відображенні таких картинок на екрані. При спробі масштабування (передбаченого в деяких браузерах), растрові (піксельні) зображення значно втрачають як. Для 8-розрядного (256-колірного) формату GIF, крім того, серйозною проблемою є вибір палітри кольорів.
Векторні графічні формати є значно привабливішими для використання в Мережі. На відміну від точкових малюнків векторна графіка ґрунтується на математичному (геометричному) поданні даних. Такі зображення значно менші за обсягом зберігання/передачі, легко масштабуються і практично не втрачають при будь-яких перетвореннях. На жаль, векторні формати ще маловживані в Інтернеті, але стандарти вже сформовані та мають зацікавити проектувальників.
Декілька векторних стандартів було запропоновано порівняно недавно, а формати PGML і VML в даний час розглядаються консорціумом W3C (World Wide Web Consortium). Проте фірма Macromedia, що просуває VML, давно відкрила свій векторний формат Shockwave Flashіншим розробникам та реалізувала додаткові модулі для перегляду графіки в цьому форматі для популярних браузерів.
Проте не для всіх застосувань нові засоби – обов'язково найкращі. Найпоширенішими зображеннями, що публікуються в Інтернеті, є цифрові фотографії, малюнки і відскановані картинки, які дуже трудомістко, та й навряд чи доцільно переводити у векторний формат.
Тому вибір формату в кінцевому рахунку залежить від ваших завдань, і те, які зображення більше відповідають вашому цільової аудиторіївирішувати тільки вам.
GIF – формат для дизайну
Фірма CompuServe спочатку призначала свій формат GIF для інтерактивних програм в умовах обмежених можливостей стандартної графіки на персональному комп'ютері. Це був спочатку 4-, а потім і 8-розрядний растровий формат із завданням палітри кольорів, який підтримував максимум 256 кольорів. Однією з істотних переваг формату є те, що зображення можуть бути індексовані до певної палітри (набору кольорів), у той час як JPEG-зображення не можуть «прив'язуватися» до палітри та їхнє «правильне» відображення не завжди можливе. Ця властивість особливо важлива для тих розробників, які використовують індексацію палітри, щоб оптимізувати передачу зображень для всіх без винятку платформ (чи PC, Mac, Web-TV або інші), незалежно від того, з якою глибиною кольору працює та чи інша система. Досягти подібної універсальності дозволяє обмежена палітра в 216 кольорів, яка включає всі загальні кольори, що використовуються як у Windows, так і, наприклад, MacOS. Проектування сайту в універсальній палітрі гарантує несуперечливе, кросплатформне відображення, що не залежить від використовуваного обладнання. Крім того, GIF-формат використовує схему стиснення без втрат (з простим алгоритмом кодування повторів: послідовність байтів одного кольору замінюється на слово з двох байтів, один з яких містить зразок забарвлення, а другий визначає кількість повторень), тому графічні дані в цьому форматі не втрачають інформації у процесі стиснення та відновлення.
Однак саме через такі вбудовані колірні обмеження формат GIF може застосовуватися тільки для тих зображень, які мають обмежену кількість кольорів, - типу чорно-білих схем або тих, що містять великі області одного кольору, - типу мультиплікаційних кадрів або цифрових малюнків з однотонною заливкою. Звичайно, ви можете зберегти будь-яке зображення у форматі GIF, застосувавши так зване згладжування колірних тонів (dithering) і отримати таким чином досить пристойну якість, але в цьому випадку ви ризикуєте «нарватися» на значне збільшення розміру файлу після застосування компресії з запам'ятовуванням вище. повторів (у виродженому випадку, коли в зображенні немає жодного суміжного повтору, ви отримаєте збільшення файлу рівно в два рази в порівнянні з некомпресованим оригіналом).
Таким чином, основні переваги GIF-формату - це використання стиснення без втрат та економне збереження суцільних областей кольору з чітким кордоном та строгими переходами. Формат JPEG відрізняється від того, що описується тим, що в залежності від рівня стиснення суцільні області там руйнуються і різкі переходи кольорів згладжуються або розмиваються.
Основний критерій вибору формату GIF: якщо ви самі намалювали в графічному пакеті типу Photoshop або Painter картинку, яка має великі області одного кольору, або обробили існуюче зображення і хочете зберегти високу контрастність (необхідну, наприклад, при відображенні тексту), то зберігайте саме в цьому форматі (насамперед це стосується чорно-білих або бідних кольором малюнків).
Для фотографій, відеокадрів або інших повнокольорових зображень за допомогою гладких переходів (градієнтів) використовуйте формат JPEG.
Важливо не забувати ще й те, що якщо ви намагаєтеся зберігати зображення з безперервним тоном у форматі GIF, то вам, ймовірно, доведеться відкинути так багато інформації в процесі підготовки зображення (при перетворенні його до фіксованої палітри), а метод компресії, що застосовується в GIF, виявиться настільки неефективним, що ви програєте ще й матеріально (і за трудовитратами, і за обсягом файлу).
Крім усього іншого у форматі GIF передбачено так звану надрядкову появу (Interlaced), яка допомагає користувачам з повільними каналами на самому початку прийому оцінити зміст картинки (ефект схожий на поступове промальовування нерізкої картинки) і час, необхідний на її повну передачу, і в результаті прийняти рішення, чи варто продовжувати прийом чи краще відмовитися. Втім, на відміну прогресивного JPEG тут ефект, швидше, психологічний, ніж реальний (див. рис.).
Також слід пам'ятати про одну важливу перевагу GIF-формату, без якої в деяких випадках неможливо обійтися навіть при всіх його недоліках, - це підтримка прозорості (розширення GIF89a), яка дає змогу відображати силует з непрямокутними контурами на існуючому фоні. Прозорість у форматі GIF реалізована примітивно – один колір (зазвичай фоновий) призначається прозорим. Ця перевага часто використовується для створення кнопок і піктограм при оформленні сторінки (JPEG не пропонує жодної підтримки прозорості).
На закінчення можна сказати наступне: GIF - найкращий вибірдля досягнення ефективного компромісу між існуючим обладнанням та програмним забезпеченням, а можливість індексування 8-розрядного GIF-зображення до 216 універсальних кольорів має істотне значення, коли ваші зображення призначені для показу на різноманітних браузерах та невідомих платформах.
JPEG - формат для фотографій та відеокадрів
Формат JPEG отримав свою назву від абревіатури Joint Photographic Experts Group committee (об'єднаного комітету експертів з фотографії), який і створив цей стандарт наприкінці 80-х – на початку 90-х років. Формат JPEG заснований на алгоритмі стиснення з втратами (дискретному косинусоїдальному перетворенні), засобами якого ваше зображення розбивається на області (зазвичай це квадрати 8×8 пікселів), всередині яких розподіл кольорів замінюється на математичну функцію та зберігаються лише коефіцієнти цієї функції, що дозволяють відновити її вигляд. Звичайно, ви зіткнетеся з деякою втратою якості (залежно від складності функції, що застосовується для заміни зображення) і після відновлення отримаєте вже не реальну картинку, а її математичний сурогат. Однак залежно від якості вашого оригіналу і ступеня стиснення втрата якості може бути непомітною глядачеві. Але головна перевага JPEG-формату в порівнянні з GIF полягає в тому, що, в той час як GIF – лише 8-розрядний (256-кольоровий), JPEG – 24-розрядний і може відображати до 16,7 млн. колірних відтінків.
Тому повнокольоровий JPEG, природно, відтворює значно більше відеоінформації, ніж GIF. Цей формат найкраще підходить для зображень реального життя - відсканованих картинок або цифрових фотографій, а також оцифрованих відеокадрів або відрендерених сцен тривимірної комп'ютерної графіки.
Інша перевага JPEG полягає в наступному: на відміну від GIF, він дозволяє самостійно задавати ступінь стиснення, що застосовується до вихідного зображення, що дає можливість витримувати необхідну рівновагу між розміром та якістю.
Коефіцієнти стиснення змінюються для JPEG в широких межах - залежно від програми редагування зображення, проте на Web-сторінках зазвичай застосовуються співвідношення 10:1 або 20:1 (виражене в пропорції за обсягом по відношенню до вихідного зображення), що зазвичай забезпечує прийнятну якість . Проте стискати зображення можна і до екстремальних значень 100:1 (звісно, зі значною втратою якості).
Отже, працюючи з фотографією в JPEG-форматі, ви маєте можливість зберегти 24-розрядне зображення з 16,7 млн. колірних відтінків, і, незважаючи на втрату якості при стисненні, воно все ж таки значно більше відповідає оригіналу, ніж 256-кольорове GIF- уявлення. При цьому неминучі втрати якості залежать від розміру, якості та типу вихідного зображення.
Крім того, JPEG дозволяє визначати так зване прогресивне відображення, тобто таке, коли при завантаженні на екрані відразу з'являється «грубе» уявлення картинки, яке, у міру отримання додаткової інформації, поступово покращується (при цьому ви можете отримати необхідне уявлення про суть матеріалу, що подається) ще до завершення завантаження та перервати процес на будь-якому етапі, що значно заощаджує час перегляду мережного контенту).
Ці засоби ви можете використовувати за бажанням, і подібний поетапний прояв може стати гарною підмогою у боротьбі із завантаженістю каналів. Єдина проблема із прогресивним JPEG (на відміну від черезрядкового GIF) полягає в тому, що старі версії браузерів можуть його не підтримувати.
PNG – універсальна растрова новинка
Представник наступного покоління растрових форматів, PNG, взяв найкращі властивості і від JPEG, і від GIF і додав свій унікальний підхід до подачі зображення, який дає можливість вбудувати в один файл різні версії того ж самого зображення для низької, середньої та високої роздільної здатності.
Формат PNG (Portable Network Graphics) - відносно новий растровий графічний формат, який був схвалений як стандарт консорціумом W3C і повинен поступово замінити обидва «застарілі» формати: як GIF, так і JPEG. PNG пропонує і колірну індексацію (до 256 кольорів), і підтримку як 24-, так і 48-розрядного кольору (True-Color), і роботу з каналом прозорості (альфа-каналом), до того ж він значно ефективніший, ніж традиційні формати зберігання растрових зображень.
Алгоритм стиснення для повнокольорової картинки перевершує JPEG за якістю, а за підтримки обмеженої індексованої палітри (до 256 кольорів) новий формат здійснює компресію без втрат на 10-30% краще, ніж та, що реалізована в GIF-форматі, що робить його оптимальним для використання у будь-яких випадках. На жаль, новий формат не дозволяє жертвувати якістю зображення в обмін на більш високий ступінь стиснення, як форматі JPEG.
Підтримка прозорості у форматі PNG на відміну від GIF - повноцінна, тобто ви можете будувати і напівпрозорі зображення або межі, тому проблема «чистих» кордонів, яка так важко вирішується при використанні прозорості в GIF-файлі, тут легко переборна.
Однак, незважаючи на всі удосконалення, пропоновані в PNG, новий формат «заживе» тільки після того, як до нього звернуться проектувальники Web-сайтів та виробники програмного забезпечення як для візуалізації зображень у новому форматі, так і для їх підготовки для публікації. А поки що досить важко знайти PNG-зображення десь в Інтернеті, незважаючи на недавнє включення підтримки цього формату як у Netscape Navigator, так і в Microsoft Internet Explorer.
І хоча їх останні версіїі підтримують PNG, вони роблять це обмеженим способом. В даний час єдиним рішенням для користувачів, які бажають бачити повноцінний PNG-файл, є самостійне встановленнязовнішнього модуля (подібного до PNG Live).
Мабуть, розробники зволікають, чекаючи на повний переход користувачів до нових форматів. Що ж, здоровий консерватизм ніколи не завадить, але все ж таки ми настійно рекомендуємо вам поступово переходити до PNG, замінюючи їм, принаймні, всі існуючі застосування GIF-формату.
Векторна вистава
І JPEG, і GIF, і PNG – растрові формати, засновані на дискретному (піксельному, або точковому) поданні зображення, тоді як векторні формати засновані на математичних формулах (геометричному поданні фігур). Векторна графіка забезпечує значні переваги порівняно з растром, особливо коли йдеться про схеми, текст і промислову графіку (а економічність форматів має велике значення для Інтернету).
Отже, перша перевага - це значно менший розмір векторних зображень у порівнянні з точковими малюнками, тому що описується не кожен окремий піксел зображення, а вся фігура цілком (наприклад, для завдання кола необхідно передати 3-4 числа: радіус, координати центру і може бути, тип або товщину лінії та її атрибути). Математичні формули, які описують векторне уявлення, займають набагато менше місця, ніж індивідуальні пікселі та їх атрибути.
Інша важлива перевага векторного уявлення - здатність практично необмеженого масштабування зображення (або деталізації його частин) без будь-яких втрат у роздільній здатності або ясності зображення. Для адаптації векторного представлення до тієї чи іншої палітри, платформи, обладнання або особливостей дизайну не потрібно жодних зусиль; а узгодження схеми стиснення та якості відображення відбувається без будь-яких проблем.
Однак не всяке растрове зображенняможна перевести у векторну форму (наприклад, погано піддаються векторизації фотографії, відскановані зображення або растрові малюнки). Але спеціально підготовлені векторні малюнки (типу штрихової графіки, піктограм, технічних ілюстрацій, карт, інформаційної графіки та інших, які є історично векторними) просто безглуздо переводити в растрову форму для публікації в Інтернеті, що відбувається сьогодні.
Проблеми з відображенням векторної графіки у всесвітній Мережі виникли тому, що не було жодного іншого способу відображення, крім растрового, а модуль, що з'явився, для показу файлів у PDF-форматі не забезпечував належної гнучкості роботи і вимагав зберігання всього контенту в одній формі - PDF.
Для забезпечення можливості органічно вбудовувати векторну графіку в традиційний HTML-формат без будь-якого додаткового програмного забезпечення в даний час на розгляді комітету за стандартами W3C знаходяться два нові векторні стандарти: PGML (Precision Graphics Mark-up Language) та VML (Vector Mark -up Language). PGML підтримується фірмами Adobe Systems, IBM, Netscape та Sun Microsystems, а VML – Microsoft, Hewlett-Packard, Autodesk, Macromedia та Visio. Обидва стандарти засновані на розширеннях мови розмітки XML, що пропагується для застосування в мережі як наступника HTML та рекомендованого W3C для використання в майбутньому.
Але нині жоден з браузерів не підтримує жодних стандартів векторної графіки, хоча додаткові модулі (Plug-ins) вже є. Серед найбільш популярних способів показу статичних векторних зображень на Web сьогодні можна виділити формат SWF (Shockwave Flash), що належить фірмі Macromedia, і недооцінений поки що формат Xara Flare.
Flare - хороше рішення, що дозволяє включення векторних зображень, які дозволяють практично необмежено збільшувати рівень деталізації сторінки, при цьому їх розміри можна порівняти з Shockwave Flash. Не можна сказати, що застосування додаткових модулів для перегляду зображень так незручно, але коли ви використовуватимете подібні засоби на ваших сторінках, не забудьте попередити про це користувача і дати йому можливість завантажити відповідний модуль, перш ніж він перейде до тієї сторінки, яка буде включати ці елементи. У найближчій перспективі це, звичайно, уповільнить процес перегляду нових користувачів, Але поступово ви придбаєте все більше прихильників, поки відповідні кошти нарешті не будуть включені в чергову версію браузера і додатковий модуль новачкам вже не знадобиться.
Анімація, інтерактивність та взаємодія
Взагалі, і GIF-зображення можна оформити у вигляді спеціального стека в одному файлі, і отриманий «фільм» (flipbook) можна відтворити, створивши просту растрову анімацію. І Netscape і Microsoft забезпечили підтримку «жвавого» GIF-формату, починаючи ще з третіх версій своїх браузерів, так що їхньої присутності на Web тепер важко уникнути. Численні GIF-аніматори, що дозволяють формувати подібні GIF-стеки, поширені (причому як комерційні, і загальнодоступні). Однак «оживлення» GIF-формату може призвести до некерованих розмірів файлів, Бо кожен "рівень" такого стека - це індивідуальне GIF-зображення, так що типові 15 кадрів в секунду для комп'ютерної анімації можуть "наплодити" незліченну кількість кілобайтів.
У комбінації з Java або JavaScript можна створювати інтерактивну анімацію, яка буде реагувати на користувача.
А тепер розглянемо інші рішення для Web-анімації та інтерактивної взаємодії з користувачем, причому основну роль тут продовжує грати фірма Macromedia, що давно вийшла на ринок зі своїми програмами Shockwave та Flash і безперервно покращує свої вироби, підвищуючи їх ефективність відповідно до запитів користувачів та проектувальників. .
Спочатку створений як формат для Macromedia Director, Shockwave – це сімейство протоколів, націлених насамперед на виробництво інтерактивного та графічного змісту, що створюється спеціально для використання в мережі Інтернет. А Shockwave Flash – це взагалі унікальний інструменті один із самих найкращих способівдля створення анімації та публікації її на Web-сторінці. Shockwave Flash утворює дуже маленькі файли (оскільки використовує переважно векторний формат уявлення) і в порівнянні з іншими форматами найбільш зручний з точки зору підготовки.
При публікації такої анімації на ваших сторінках не забудьте повідомити про це користувача, щоб він заздалегідь запасся додатковим модулем і приготувався до очікування завантаження. Однак останні версії – і Netscape Navigator, і Internet Explorerмають модулі перегляду для Flash-анімацій навіть у базовій поставці. Фірма Netscape підтвердила, що наступні версії Navigator будуть мати таку підтримку для Flash навіть на рівні коду.
Остаточне рішення за вами
Отже, змінюється ставлення до представлення Web-контенту, з'являються нові формати даних і засоби розробки. Проте старі формати (для представлення графіки – це GIF та JPEG) все ще досить популярні. Вони підтримуються практично всіма браузерами, більшість розробників мають великий досвід роботи саме з ними. Важливо використовувати правильний формат для конкретних цілей, щоб гарантувати рівновагу між якістю зображення та розмірами файлів. Наприклад, одне зображення у форматі GIF може займати більший обсяг та давати нижчий якісний результат, ніж у форматі JPEG, а для іншого все буде навпаки.
Однак при поданні растрових зображень більш кращим стає PNG, а якщо ви підете ще далі і спробуєте використовувати векторне зображення, то вже сьогодні до ваших послуг - формат Shockwave Flash фірми Macromedia.
Формат SWF (Shockwave Flash) – це не загальновживаний, а внутрішній векторний формат програми Flashфірми Macromedia (див. уроки Macromedia Flash на CD-ROM), тому для того, щоб отримати власне зображення або анімацію, вам доведеться придбати відповідний мультимедійний пакет від фірми Macromedia, а користувачеві необхідно буде поставити додатковий модуль для візуалізації результату. Таким чином, для того щоб просто помістити векторний малюнок на вашу Web-сторінку, вам доведеться подолати цілу низку незручностей.
Тим не менш, на підході й інші векторні формати, які незабаром стануть стандартними.
Комп'ютерПрес 5"1999
Для вставки зображення в текст Web-сторінки використовується одинарний тег (Табл. П 1). Атрибути цього тегу встановлюють всі параметри зображення на сторінці. Обов'язковим є атрибут SRC, який визначає адресу та ім'я графічного файлу. Якщо атрибут SRC не встановлено, відображається лише значок порожнього зображення.
Структура тега з атрибутом SRC має вигляд:
.
Якщо графічний файлз ім'ям Інститут знаходиться в тій же папці, що і Web-сторінка, то для його розміщення слід записати:
.
Ім'я файлу Формат
Для розміщення графічного файлу з ім'ям МІНСЬК, що знаходиться за адресою D:\Колекція\Міста\МІНСЬК.GIF, слід записати .
За допомогою тега на Web-сторінці розміщується графічний файл, що знаходиться на іншому комп'ютері в глобальній мережі Інтернет.
Щоб створити Web-сторінку із фотографією нашого інституту, яка наведена на рис. 4.1, потрібно ввести наступний HTML-код:
Наш інститут
Рис. 4.1. Web-сторінка з фотографією інституту
У наведеному прикладі висота фотографії (HEIGHT) становить 200 пікселів, а ширина (WIDTH) – 300 пікселів. Для розміщення фотографії створюється абзац із вирівнюванням у центрі.
Горизонтальні лінії
Розміщення на Web-сторінці горизонтальних ліній здійснюється за допомогою одинарного тегу
. За допомогою атрибутів SIZE, WIDTH, COLOR та ALIGN змінюються відповідно товщина, ширина, колір та спосіб вирівнювання ліній.
Розглянемо кілька прикладів, що пояснюють розміщення горизонтальних ліній:
1.
- горизонтальна лінія на всю сторінку завтовшки 2 пікселі.
2.
WIDTH = "200" ALIGN = "RIGHT"> - горизонтальна лінія зеленого кольору товщиною 15 пікселів, шириною 200 пікселів і вирівнюванням по правому краю.
3.
– горизонтальна лінія синього кольору на всю сторінку завтовшки 25 пікселів.
4.
WIDTH = "300" ALIGN = "LEFT"> - горизонтальна лінія червоного кольору товщиною 20 пікселів, шириною 300 пікселів та вирівнюванням по лівому краю.
Відображення ліній для чотирьох записаних прикладів показано на рис. 4.2.
Рис. 4.2. Лінії на Web-сторінці
ТАБЛИЦІ
Створення таблиць
Створення таблиці здійснюється за допомогою парного тегу
у коді HTML.
Будь-яка таблиця складається з рядків, а рядки – з осередків. Для формування рядків та осередків таблиці використовуються наступні теги:
Ці теги записуються всередині парного тега
Формування таблиці відбувається за рядками – спочатку задається один рядок і у ній вказується необхідну кількість осередків, потім другий рядок тощо.
Щоб на Web-сторінці отримати таблицю, представлену на рис. 5.1, необхідно набрати наступний HTML-код:
| Автомобілі | Ціна | Форд | 5000 | Гольф | 6000 |
|---|
то товщина зовнішнього кордону дорівнюватиме 6 пікселям. Щоб межі таблиці не відображалися, необхідно атрибуту BORDER надати значення, що дорівнює 0, або просто цей атрибут опустити.
Графічні зображення, розміщені на Web-сторінці, не тільки сприяють кращому сприйняттю інформації, але й дозволяють зробити сторінки яскравішими і такими, що запам'ятовуються. Графічні зображення можна підготувати самі або скористатися послугами дизайнерів. Також можна використовувати бібліотеки графічних файлів програмних продуктів, таких як Microsoft Office, CorelDraw і т.д.
Розмістимо на домашній сторінці Web-вузла створюваного графічне зображення з бібліотеки Clip Art, що входить до складу Microsoft Office. Для цього виконайте такі дії:
- Відкрийте створений веб-сайт.
- Відкрийте домашню сторінку, двічі клацнувши мишею на ім'я файлу index.htm на панелі Список папок(Folder List).
- У меню Вставка(Insert) виберіть команду Малюнок Картинки(Clip Art). У вікні FrontPage з'являється панель Вставка картинки(Insert Clip Art).
- Виберіть команду на цій панелі Колекція картинок(Media Gallery). Відкривається діалогове вікно, що дозволяє вибрати графічне зображення (рис. 15.8).
Рис. 15.8.
У верхній частині діалогового вікна крім кнопок, що управляють відображенням об'єктів, що показуються у вікні, а також копіюванням і видаленням об'єктів, містяться кнопки призначення (див. таблицю).
- Панель Список колекціймістить папки комп'ютера з мультимедійними файлами, а також файли картинок бібліотеки Clip Art. Відкрийте папку категорії картинок, що цікавить вас. В робочої областівікна з'являться зображення цієї категорії. При встановленні курсору на зображення видно підказку із зазначенням імені, розміру зображення та файлу, в якому він міститься, а також формату графічного зображення (рис. 15.9).
- Натисніть кнопку зі стрілкою з правого боку вибраного зображення. Відобразиться контекстне меню.
- Виберіть у контекстному меню команду Копіювати(Сміття).
- Перейдіть на Web-сторінку та вставте на неї з буфера обміну зображення, використовуючи для цього будь-який зручний засіб. Наприклад, натисніть комбінацію клавіш
+. - Збережіть Web-сторінку з розміщеним у ній графічним зображенням, натиснувши кнопку Зберегти(Save) на стандартній панелі інструментів. З'являється діалогове вікно Збереження впроваджених файлів(Save Embedded Files) (рис. 15.10), що пропонує зберегти розміщене на сторінці зображення в папці imagesВеб-вузла під ім'ям, з яким файл знаходився в бібліотеці. Це вікно містить кнопки наступного призначення:
- Перейменувати(Rename) – дозволяє перейменувати файл.
- Змінити папку(Change Folder) – відкриває діалогове вікно Зміна папки(Change Folder), що містить папки поточного Web-вузла, дозволяючи вибрати іншу папку для збереження файлу.
- Дія(Set Action) відкриває діалогове вікно Завдання діїщо дозволяє змінити значення Зберегти(Save) стовпця Дія (Action) на Не зберігати(Don"t Save). При виборі значення Зберегтималюнок зберігається у вказаній вами папці Web-вузла, інакше на Web-сторінці залишиться посилання на зображення, що знаходиться у бібліотеці Clip Art.
Область Малюнок(Picture preview) показує розміщене зображення. Встановивши у діалоговому вікні Збереження впроваджених файлівпотрібні параметри, натисніть кнопку ОК.Графічний файл буде збережено у вказаній папці Web-вузла.
Рис. 15.10.
Розміщення графічного зображення із файлу
Ми розглянули розміщення на веб-сторінці графічного зображення бібліотеки Clip Ait. Для розміщення на сторінці графічного зображення з файлу виконайте одну з таких дій:
- У меню Вставка(Insert) виберіть команду Малюнок(Picture), а потім у підменю, що відкрилося - опцію З файлу(From File)
- Натисніть кнопку Додати малюнок із файлу(Insert Picture From File) на стандартній панелі інструментів
- Натисніть кнопку Додати малюнок із файлу(Insert Picture From File) на панелі інструментів Малюнки(Pictures)
Під час виконання будь-якої з цих дій відкривається діалогове вікно Малюнок(picture) (рис. 15.11). Знайдіть за допомогою цього вікна потрібний графічний файл та для його розміщення на Web-сторінці натисніть кнопку Вставити(Insert). Діалогове вікно закриється, а зображення буде розміщено на сторінці.
Рис. 15.11.
Налаштування властивостей зображення
Після розміщення зображення на Web-сторінці необхідно налаштувати його властивості, використовуючи діалогове вікно Властивості малюнка(Picture Properties) (рис. 15.12). Щоб відкрити його, клацніть на зображенні, а потім виконайте одну з таких дій:
- У меню Формат(Format) виберіть команду Властивості(Properties)
- Виберіть команду контекстного меню Властивості малюнка(Picture Properties)
- Натисніть комбінацію клавіш
+
Діалогове вікно Властивості малюнкамістить три вкладки: Загальні(General), Відеозапис(Video), Вид(Appearance). Розглянемо докладніше можливості налаштування з допомогою даного диштогового вікна.
Кольори у таблиці
Як побудувати на сторінці таблицю
Списки у списках
Списки визначень
Нумерований перелік
Маркований список
Як створити на сторінці список
Існує три основні типи списків: марковані, нумеровані та списки визначень. Головна відмінність перерахованих типів полягає у способі нумерації та структурі.
Найчастіше використовується ненумерований, або маркований список.Маркований список задається тегами, а пункти списку між цими тегами - за допомогою тега
Нумерований перелікдуже нагадує маркований. Єдиною відмінністю є те, що в нумерованому списку перед кожним пунктом замість графічних маркерів автоматично розміщуються послідовні номери або літери.
Нумерований список задається за допомогою тегів. Як і в маркованому списку, кожен пункт задається тегом
- ключове слово TAPE.
- . Тег
- задає окремий елемент, тобто термін, що визначається, а тег
- - решту інформації, що виводиться на наступному рядку з відступом. Другий рядок інформації називається визначенням.Задається список визначень, як і інші списки. Єдина відмінність - для кожного елемента потрібні два теги.
Одна з чудових властивостей списків – це можливість вкладати їх один в одного. Вкладення списку в список проводиться так само, як і просте створення списку. Для цього не існує спеціальних тегів HTML. Щоб не заплутати браузер, переконайтеся, що ви закрили кожний внутрішній список за допомогою тега. Вкладати один в одного можна навіть різні типисписків.
Відтворіть усі перелічені списки
У списків є одна вада - вони одномірні. Це означає, що ви можете розташовувати інформацію тільки на наступних рядках. Таблиці ж дозволяють розташовувати дані не тільки по рядках, а й по стовпчикам.
Для завдання таблиць використовується цілий ряд тегів. Теги
і
обрамляють таблицю цілком, а низку інших тегів визначають, як буде виводитися інформація. У таблиці наведено повний опистеги таблиці.Теги HTML для побудови таблиць:
Теги Опис
та Ці теги охоплюють таблицю. Тег
повідомляє браузерам, що далі слідує опис таблиці. Якщо ви бажаєте, щоб була видна сітка, що розділяє рядки та стовпці, додайте ключове слово BORDER.
та Текст, зазначений цими тегами, виводиться як заголовка. Для завдання заголовка також можна застосовувати теги
і .і Теги відображають текст заголовками рядка або стовпця трохи більшим жирним шрифтом.і Теги визначають кожен рядок таблиці. Тегнеобов'язковий, але він робить Ваш HTML-код повнішим і зрозумілішим.і Ця пара тегів відокремлює текст кожного осередку таблиці.Створіть файл, у якому побудуйте таблицю з п'яти рядків та п'яти стовпців.
Існує ряд тегів, які дозволяють ставити кольори фону та сітки таблиці. У першому випадку ключове слово BGCOLOR вставляється у тег
наступних образів:
Крім ключового слова BGCOLOR, існують інші способи керувати кольором:
BORDERCOLOR Змінять колір сітки таблиці
BORDERCOLORDARK/ Використовується для зміни сітки з
BORDERCOLORLIGHT додатковим ефектом тривимірності
Змініть колір сітки таблиці з ефектом тривимірності.
Урок 12-13.Використання графіки
Малюнки та графіка дуже важливі для WWW. Це єдиний засіб Інтернету, який дозволяє переглядати на екрані одночасно зображення та текст.
Щоб помістити зображення на Web-сторінці, потрібно знати, як застосовувати тег
. Введіть тег
та ключове слово SRC= для вказівки, яку графіку завантажити.
Вводячи цей тег, зверніть увагу, що файл повинен знаходитися в тій же папці, що і ваш HTML-файл.
HTML-зображеннядодаються на веб-сторінки за допомогою тега
. Використання графіки робить веб-сторінки візуально привабливішим. Зображення допомагають краще передати суть та зміст веб-документа.
За допомогою HTML-тегів
Вставка зображень у HTML-документ
1. Тег
Елемент
представляє зображення та його резервний контент, який додається за допомогою атрибута alt . Оскільки елемент
є малим, то рекомендується розташовувати його всередині блокового елемента, наприклад,
Або
.Тег
має обов'язковий атрибут src значенням якого є абсолютний або відносний шлях до зображення:
Для тега
доступні такі атрибути:
Таблиця 1. Атрибути тега
Атрибут Опис, прийняте значення alt Атрибут alt додає альтернативний текст зображення. Виводиться на місці появи зображення до його завантаження або при відключеній графіку, а також виводиться підказкою при наведенні курсору миші на зображення.
Синтаксис: alt="(!LANG:опис зображення" . !}crossorigin Атрибут crossorigin дозволяє завантажувати зображення із ресурсів іншого домену за допомогою CORS-запитів. Зображення, завантажені в полотно за допомогою CORS-запитів, можна використовувати повторно. Допустимі значення:
anonymous — Cross-origin запит виконується за допомогою заголовка HTTP, при цьому облікові дані не передаються. Якщо сервер не дає облікові дані серверу, з якого запитується контент, зображення буде зіпсовано і його використання буде обмежено.
use-credentials — Cross-origin запит виконується з передачею облікових даних.
Синтаксис: crossorigin="anonymous" .height Атрибут height задає висоту зображення px .
Синтаксис: height = "300".ismap Атрибут ismap вказує на те, що зображення є частиною зображення-карти, розташованого на сервері (зображення-карта - зображення з інтерактивними областями). При натисканні на карту координати координати передаються на сервер у вигляді рядка запиту URL-адреси. Атрибут ismap допускається лише у випадку, якщо елемент є нащадком елемента з дійсним атрибутом href.
Синтаксис: ismap.longdesc URL розширеного опису зображення, що доповнює атрибут alt.
Синтаксис: longdesc="http://www.example.com/description.txt".src Атрибут src визначає шлях до зображення.
Синтаксис: src="flower.jpg".sizes Встановлює розмір зображення залежно від параметрів відображення. Працює лише при заданому атрибуті srcset. Значенням атрибута є один або кілька рядків, вказаних через кому. srcset Створює список джерел зображення, які будуть вибрані, виходячи з роздільної здатності екрана. Може використовуватись разом або замість атрибута src. Значенням атрибута є один або кілька рядків, розділених комою. 
usemap Атрибут usemap визначає зображення як карту-зображення. Значення повинно починатися з символу # . Значення асоціюється зі значенням атрибуту name або id тега width Атрибут width задає ширину зображення px .
Синтаксис: width = "500".1.1. Адреса зображення
Адреса зображення може бути вказана повністю (абсолютна URL), наприклад:
url(http://anysite.ru/images/anyphoto.png)Або через відносний шлях від документаабо кореневого каталогусайту:
url(../images/anyphoto.png) - відносний шлях від документа,
url(/images/anyphoto.png) - відносний шлях від кореневого каталогу.Це інтерпретується так:
../ - означає піднятися вгору на один рівень, до кореневого каталогу,
images/ — перейти до папки із зображеннями,
anyphoto.png - вказує на файл зображення.1.2. Розміри зображення
Без визначення розміру зображення малюнок відображається на сторінці в реальному розмірі. Відредагувати розміри зображення можна за допомогою атрибутів width та height. Якщо буде заданий лише один з атрибутів, другий обчислюватиметься автоматично для збереження пропорцій малюнка.
1.3. Формати графічних файлів
Формат JPEG (Joint Photographic Experts Group). JPEG-зображення ідеальні для фотографій, вони можуть містити мільйони різних кольорів. Стиснуть зображення краще за GIF, але текст і великі площі з суцільним кольором можуть покритися плямами.
Формат GIF (Graphics Interchange Format). Ідеальний для стиснення зображень, в яких є області суцільного кольору, наприклад, логотипів. GIF-файли дозволяють встановити один із кольорів прозорим, завдяки чому фон веб-сторінки може виявлятися через частину зображення. Також GIF-файли можуть включати в себе просту анімацію. GIF-зображення містять лише 256 відтінків, через що зображення виглядають плямистими і нереалістичного кольору, як плакати.
Формат PNG (Portable Network Graphics). Включає кращі риси GIF- і JPEG-форматів. Містить 256 кольорів і дає можливість зробити один із кольорів прозорим, при цьому стискає зображення в менший розмір, ніж GIF-файл.
Формат APNG (Animated Portable Network Graphics). Формат зображення на основі PNG. Дозволяє зберігати анімацію, а також підтримує прозорість.
Формат SVG (Scalable Vector Graphics). SVG-малюнок складається з набору геометричних фігур, описаних у форматі XML: лінія, еліпс, багатокутник тощо. Підтримується як статична, і анімована графіка. Набір функцій включає різні перетворення, альфа-маски, ефекти фільтрів, можливість використання шаблонів. Зображення у форматі SVG можуть змінюватись у розмірі без зниження якості.
Формат BMP (Bitmap Picture). Являє собою нестиснене (оригінальне) растрове зображення, шаблоном якого є прямокутна сітка пікселів. Bitmap-файл складається із заголовка, палітри та графічних даних. У заголовку зберігається інформація про графічне зображення та файл (глибина пікселів, висота, ширина та кількість кольорів). Палітра вказується лише у тих Bitmap-файлах, які містять палітрові зображення (8 і менше біт) і складаються не більше ніж 256 елементів. Графічні дані представляють саму картинку. Глибина кольору в цьому форматі може бути 1, 2, 4, 8, 16, 24, 32, 48 біт на піксель.
Формат ICO (Windows icon). Формат збереження піктограм файлів у Microsoft Windows. Також, Windows icon, використовується як іконка на веб-сайтах в інтернеті. Саме картинка такого формату відображається поруч із адресою сайту або закладкою у браузері. Один файл ICO містить один або кілька значків, розмір і кольоровість кожного з яких задається окремо. Розмір значка може бути будь-яким, але найбільш уживані квадратні значки зі сторонами 16, 32 та 48 пікселів.
2. Тег
Тег
Для тега доступний атрибут name, який визначає ім'я карти. Значення атрибут name для тега
Елемент
3. Тег
Тег описує лише одну активну область у складі карти зображень за клієнта. Елемент не має тега, що закриває. Якщо одна активна область перекриває іншу, буде реалізовано перше посилання зі списку областей.
Таблиця 2. Атрибути тега
Атрибут Короткий опис alt Задає альтернативний текст для активної області картки. coords Визначає розташування області на екрані. Координати задаються в одиницях довжини і поділяються комами:
для кола- координати центру та радіус кола;
для прямокутника- координати верхнього лівого та правого нижнього кутів;
для багатокутника- координати вершин багатокутника у потрібному порядку, також рекомендується вказувати останні координати, рівні першим, для логічного завершення фігури.download Доповнює атрибут href і повідомляє браузеру, що ресурс повинен бути завантажений у момент, коли користувач клацає посилання, замість того, щоб, наприклад, попередньо відкрити його (як PDF-файл). Задаючи ім'я для атрибута, ми таким чином задаємо ім'я об'єкту, що завантажується. Дозволяється використовувати атрибут без зазначення його значення. href Вказує URL-адресу для посилання. Може бути вказана абсолютна або відносна адреса посилання. hreflang Визначає мову зв'язаного веб-документу. Використовується лише разом з атрибутом href. Значення, що приймаються, — абревіатура, що складається з пари літер, що позначають код мови. media Визначає, для яких типів пристроїв буде оптимізовано файл. Значенням може бути будь-який медіа-запит. rel Доповнює атрибут href інформацією про відношення між поточним та пов'язаним документом. Значення, що приймаються:
alternate — посилання на альтернативну версію документа (наприклад, друковану форму сторінки, переклад або дзеркало).
author – посилання на автора документа.
bookmark — постійна URL-адреса, яка використовується для закладок.
help – посилання на довідку.
license — посилання на інформацію про авторські права на цей веб-документ.
next/prev – вказує зв'язок між окремими URL-адресами. Завдяки цій розмітці Google може визначити, що вміст сторінок пов'язаний з логічною послідовністю.
nofollow - забороняє пошуковій системіпереходити за посиланнями на цій сторінці або за конкретним посиланням.
noreferrer - Вказує, що переході за посиланням браузер не повинен надсилати заголовок HTTP-запиту (Referrer), в який записується інформація про те, з якої сторінки прийшов відвідувач сайту.
prefetch - Вказує, що цільовий документ повинен бути кешований, тобто. браузер в фоновому режимізавантажує вміст сторінки себе в кеш.
search — вказує на те, що цільовий документ містить інструмент для пошуку.
tag – вказує ключове слово для поточного документа.shape Задає форму активної області на карті та її координати. Може приймати такі значення:
rect - активна область прямокутної форми;
circle – активна область у формі кола;
poly - активна область у формі багатокутника;
default – активна область займає всю площу зображення.target Вказує, куди буде завантажено документ під час переходу за посиланням. Приймає такі значення:
_self — сторінка завантажується у поточне вікно;
_blank - сторінка відкривається у новому вікні браузера;
_parent - сторінка завантажується у фрейм-батько;
_top — сторінка завантажується у повне вікно браузера.type Вказує MIME тип файлів посилання, тобто. розширення файлу. 4. Приклад створення карти-зображення
1) Розмічаємо вихідне зображення активні області потрібної форми. Координати областей можна обчислити за допомогою програми обробки фотографій, наприклад, Adobe Photoshop або Paint.
Рис. 1. Приклад розмітки зображення для створення картки 2) Задаємо ім'я картки, додавши його в тег
Jpg" alt="(!LANG:flowers_foto" width="680" height="383" usemap="#flowers"> !}
Рис. 2. Приклад створення карти-зображення, при натисканні курсора миші на квітку здійснюється перехід на сторінку з описом
TAPE = 1 - Стандартна нумерація (1,2,3,4,5, ...)
TAPE=A – Великі літери(A, B, C, D, …)
TAPE=a – Термінові літери(a, b, c, d, …)
TAPE = I - Римські цифри (I, II, III, IV, ...)
TAPE=i – Римські рядкові цифри(i, ii, iii, iv, …)
Списки визначень виглядають дещо інакше, ніж інші типи списків. Для опису кожного пункту списку в цьому випадку застосовується два теги, а не один тег
