web-design-book-

Завдання:

Створіть власну анкету з максимальним застосуванням елементів HTML та стилів CSS;

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

Запитання для самоперевірки

1)Як зробити текст напівжирним засобами CSS?

2)Що таке селектор тегів?

3)Які форми запису стилів ви знаєте?

4)Як оформити буквицю?

5)Що таке засічки у шрифтах?

6)Які види відступів у стилях ви знаєте?

5Оформлення

зображень

Формати

Засоби оформлення HTML CSS у роботі із зображенями Фон для веб-сторінки Компонування фото і тексту

У попередніх темах ми розглянули, як оформлювати тексти. Однак сайт не буде яскравим і красивим, якщо не міститиме зображень.

Створимо новий документ HTML і підберемо в інтернеті зображення для цієї сторінки, використовуючи пошукові системи Google (images.google.com.ua) або Яндекс (images.yandex.ua). Щоб зберегти фотографію, натискаємо на неї правою клавішою мишки та обираємо пункт меню «Зберегти зображення». Його слід помістити у ту ж саму папку, що й документ HTML. Зайдемо у цю папку через провідник. У ній знаходимо гіпертекстовий документ (у нашому випадку – image.html) зі значком браузера і зображення (наприклад, chris_and_justice.jpg). Якщо на вашому комп’ютері не відображаються розширення файлів .html та .jpg, потрібно увімкнути цю функцію. Windows автоматично приховує розширення від користувачів, щоб ті випадково їх не стерли. Заходимо у вікні папки в меню «Сервіс» – «Властивості папки», обираємо вкладку «Вигляд» і шукаємо пункт «Приховувати розширення для зареєстрованих типів файлів», знімаємо галочку, натискаємо «Ок». Розширення файлів потрібно бачити для того, щоб правильно вписувати їхній формат в HTML-документ. Для веб-сторінки підходять лише формати, призначені для Інтернету, на сьогоднішні це JPEG, GIF та PNG.

GIF – graphics interchange format

Першу версію графічного формату GIF розробbkb в 1987-му році фахівці комп’ютерної мережі CompuServe як простий растровий формат для обміну малюнками в мережі. Згодом у ньому виявили ряд недоліків, що гальмували його ефективне використання. У 1989-му році розробили сучасну версію формату GIF (Gіf89a). Формат має декілька недоліків, що звужують можливості його використання. Однак є і переваги:

1) невеликий розмір файлу;

Мал. 20

Налаштування Windows для перегляду розширень та вигляд файлів з ними

2)можливість задавати зображенню прозорість;

3)підтримка анімації;

4)можливість зменшувати кількість кольорів (відповідно і розміру зображення) від 256-ти до двох,

5)можливість завантажувати зображення черезрядково (interlaced) – спочатку у поганій якості, потім у кращій. Це дає змогу побачити його до остаточного завантаження сторінки.

GIF працює з кольоровою схемою Index, в якій кожен піксель містить лише один байт інформації. Якщо перевести це в десяткову систему, вийде 256 кольорів (від нуля до 255-ти. На фотографіях у форматі GIF стають дуже помітні переходи між кольорами (див мал.), зате для малюнків з малою кількістю кольорів цей формат ідеальний.

JPEG – joint photographic experts group

Мал. 20

Артефакти JPEG

Формат JPEG працює з колірними схемами, що можуть передавати зображення високої якості. Це Grayscale для чорно-білих зображень та RGB (red – червоний, green – яскраво зелений, blue – синій) для кольорових. Схема Grayscale – це шкала 256-ти відтінків сірого, тобто один байт на один піксель. В RGB три канали, у кожному з них – по 256 відтінків трьох базових кольорів – 32 біта на один піксель. При накладанні базових кольорів можна отримати 16,8 млн відтінків. Око людини не здатне розрізнити таку їх кількість, тобто монітори можуть показувати кольори за межею людського сприйняття.

Метод компресії формату JPEG має таку ж саму назву. При його застосуванні програма розбиває зображення на прямокутники, які потім зашифровує за спеціальним математичним алгоритмом. Також JPEG-компресія видаляє з зображення ті кольори, які не сприймає око. Проте з чорно-білого зображення JPEG-компресія не зможе нічого викинути. Загалом можна отримати стискання у пропорціях 50:1 без суттєвих втрат якості.

До недоліків стиснення за методом JPEG слід віднести появу на

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

PNG – portable network graphics

Це растровий формат збереження графічної інформації, що використовує стиснення без втрати якості. PNG створений для заміни формату GIF графічним форматом, який можна використовувати ліцензії. У ньому сполучено можливості JPEG i GIF.

Повертаємося до HTML-сторінки. Спочатку пишемо заголовок, потім додаємо елемент <IMG>, що відповідає за зображення у гіпертекстових документах. Щоб вказати, яке саме зображення потрібно вставити, пишемо його назву в атрибуті src=»». Щоб відцентрувати зображення, оточимо його і заголовок елементом < CENTER ></center>.

<CENTER><H1>Зображення</h1>

<img src=»chris_and_justice.jpg»></center>

Зберігаємо документ і відкриваємо його у браузері. Якщо зображення не видно – перевірте розширення у назві файла, чи розташоване зображення у папці з HTML-документом, чи правильно написане його ім’я і чи збережене воно в RGB (для цього відкриваємо зображення у програмі Adobe Photoshop і заходимо в меню «Зображення (Image)» – «Режим (Mode)»).

Додаємо ще один важливий атрибут alt=»», що відповідає за підписи до зображень.

<img src=»chris_and_justice.jpg» alt=»стара фотографія»>

Мал. 20

Виринаючий текст під курсором у браузері Internet Explorer та вигляд сторінки у режимі без зображень у браузері Opera

Атрибут alt=»» обов’язковий, тому що цей текст високо цінується пошуковими системами і сайт знаходитимуть по словах, які вписані у цей атрибут. Якщо відкрити веб-сторінку у браузері Internet Explorer і навести на зображення курсор мишки та з’явиться наш підпис, як на малюнку №

. В інших браузерах підпис не відображається.

Деякі користувачі працюють в інтернеті у режимі вимкненої графіки. У такому випадку фотографії замінені маленькими квадратиками і це руйнує дизайн сторінки. Тому в елементі <IMG> слід вказувати розміри зображення (ширину – width=”” та висоту height=””), які можна дізнатися у програмі Adobe Photoshop, зайшовши у меню «Зображення (Image)» – «Розмір зображення (Image size)».

<img src=»chris_and_justice.jpg» alt=»стара фотографія»

Мал. 20

Вікно Adobe Photoshop з налаштуванням розміру зображення

width=»335» height=»343»>

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

Якщо ваша фотографія завелика, її слід зменшити у будь-якому редакторі растрової графіки. В Adobe Photoshop це можна зробити через меню «Зображення (Image)» – «Розмір зображення (Image size)». Потрібно пересвідчитись також, що є позначка «Утримувати пропорцію (Constrain Proportions)» – це запобігає деформуванню зображень, а «Роздільна здатність (resolution)» дорівнює 72 ppi – це фактично якість фотографії, що вимірюється у пікселях на дюйм (pixel per inch). Монітори не можуть відображати вищу за 72 ppi якість, тому немає сенсу збільшувати цей показник, це позначиться лише на розмірі, а не якості фотографії.

Тепер спробуємо вставити зображення у колонку тексту. Для цього додаємо у файл великий шматок тексту, розставляємо теги <p> і

Мал. 20

Веб-сторінка з колонкою та обтікаючим зображенням

через селектор тегів прописуємо стиль для колонки: ширину 500 пікселів та вирівнювання по ширині.

<style>

P {width:500px; textalign:justify}

</style>

Шукаємо в інтернеті зображення, що відповідає тематиці тексту. В Adobe Photoshop зменшуємо його ширину до 200 пікселів та зберігаємо у форматі JPEG у ту ж саму папку, що й HTMLдокумент. Назви зображень – виключно латиницею, всі літери прописні та без пробілів. Збережену фотографію можна вставити у код після першого <p> так, щоб вона опинилася між тегом і текстом. Зберігаємо й оновлюємо сторінку. Зображення розмістилось на початку колонки, текст не обтікає його. Для обтікання

використаємо той самий стиль, що і для буквиці (див стр. №) float:left

<img src=»heli.jpg» style=»float:left» alt=»гелікоптер»>

Тепер зображення обтікається текстом, задамо ще й відступи – margin, а щоб застосувати їх лише праворуч – вкажемо напрямок дії стилю: margin-right:10px

<img src=»heli.jpg» style=»float:left; marginright:10px» alt=»гелікоптер»>

У тексті можуть з’явитися «дірки» між словами: великі слова не переносяться на попередній рядок, що при вирівнюванні textalign:justify призводить до появи простору між ними (коридорів). У таких випадках ми можемо розставити м’які переноси, які з’являтимуться тоді, коли потрібно перенести слово і зникатимуть усередині рядка. У мові HTML за м’які переноси відповідає спецсимвол – ­ Наприклад: посту­пово,

нарощу­вання

Зображення можна використовувати як фон для всієї сторінки або тексту. Щоб керувти виглядом усієї сторінки слід додати до коду теги <BODY> та </body>, перший – на початку документу, другий

– у кінці.

У початковий тег вписуємо стиль, який змінить колір усього документу:

<body style=» background-color:green»>

Якщо сторінка залилася зеленим кольором, можна додати стиль, що замостить її зображенням.

Мал. 20

Веб-сторінка з фоном

<body style=»background-image: url(huey_and_tr3.jpg)»>

Якщо фон не з’явився, перевірте наявність файла у папці з HTML-документом, назву файла, розширення та чи немає зайвого пробілу в url().

Сторінка має виглядати як на мал. №

Такі великі картинки для фону використовувати не варто, оскільки на початку WWW-ери цей прийом застосовували надто часто. Тому спробуємо створити файл для фону власноруч. У програмі Adobe Photoshop обираємо «Файл (File)» – «Новий (New)», розмір – 20х20 пікселів, якість зображення – 72 ppi, колірна схема RGB, фон білий «Contents» – «White». Це дуже маленьке зображення, щоб малювати у ньому натиснемо кілька разів сполучення клавіш Сtrl+Плюс. Далі обираємо пензлик, колір і малюємо. Розмір пензлика можна змінити на верхній панелі,

Мал. 20

Вікно створення нового документу у програмі Adobe Photoshop

праворуч від слова «Пензлик (Brush)». Збережемо малюнок у форматі JPEG, під назвою bg у папці з HTML-документом. Записуємо у коді:

<body style=»background-image:url(bg.jpg)»>

Спробуємо застосувати до фону ще кілька стилів. Перейдіть на сторінку і прокрутіть бігунок браузера вгору-вниз, якщо його немає, це значить, що на екрані відображається весь текст. Додайте ще кілька абзаців тексту, щоб він закінчувався за межами екрану. Тепер фон прокручується разом із колонкою. Щоб зафіксувати його, додайте до стилів background-attachment: fixed

<body style=»background-image:url(bg.jpg); background-attachment: fixed»>

Керувати фоном можна також за допомогою стилю backgroundrepeat, що має такі значення no-repeat (не повторювати зображення), repeat-x (повторювати по горизонталі), repeat-y (повторювати по вертикалі). Атрибут background-position керує

Мал. 20

Дрібний фон для сторінки. Колонка додатково оформлення стилями backgroundcolor, margin, padding

місцем, де буде відображатися фон – left (ліворуч), center (по центру), right (праворуч), bottom (внизу), top (зверху).

Спробуємо поставити малюнок знизу сторінки у правому її куті. Для цього потрібно знайти зображення якогось предмета на білому тлі (iroquois1. jpg). Напрямок стилю background-position вказують через пробіл – спочатку по горизонталі (left/ center/ right), а потім по вертикалі (top/ bottom). Якщо не зазначити останній, зображення буде розміщене посередині, якщо зазначити background-attachment: fixed, то зображення відображатиметься у правому нижньому куті вікна браузера, якщо не записувати цей стиль, то зображення з’явиться лише внизу сторінки.

<body style=»backgroundimage:url(iroquois1.jpg);

background-attachment: fixed; background-position: bottom right; background-repeat: norepeat «>

Використовуючи формат GIF, можна значно розширити можливості оформлення веб-сторінки. Такі зображення можуть підтримувати прозорість та анімацію. Розглянути приклади анімованих зображень можна на сайті gifanimation.ru або mirgif.com

Формат GIF може допомогти у складних випадках оформлення. Як уже зазначалося, у веб-дизайні не варто застосовувати екзотичні шрифти, оскільки їх може не бути на комп’ютерах користувачів, які переглядатимуть сайт. Щоб зробити напис екзотичним шрифтом, його доведеться зберегти у растровому форматі, а щоб він, як і текст, міг накладатися на фон,

Мал. 20

Веб-сторінка з однією картинкою на фоні

Мал. 20

Вигляд заголовка, що вставлений як зображення на різних фонах

потрібно обрати формат GIF.

Створюємо у програмі Adobe Photoshop новий документ з параметрами 500х100 пікселів, 72 ррі, колірна схема RGB, прозорий фон (transparent). Обираємо у палітрі інструментів «Письмо (Type Tool)», двічі клацнувши по квадратику з кольором задаємо колір, обираємо екзотичний шрифт у верхньому меню, ставимо курсор на сторінці і пишемо будь-який текст. Якщо на вашому комп’ютері немає красивих кириличних шрифтів, їх можна завантажити з сайтів fontov.net, rusfont.ru. Вони зберігаються на комп’ютері у форматі .ttf. Потім цей файл потрібно підключити за допомогою папки С:\WINDOWS\Fonts , зайшовшо у меню «Файл» – «Встановити шрифт».

Натискаємо «Зберегти як (Save as)», у пункті «Формат» обираємо Computer GIF, називаємо малюнок, наприклад «napys» і тиснемо Ок. При

збереженні з’явиться вікно керування кольором та прозорістю. Palette – Extract означає, що комп’ютер сам визначить кількість кольорів для вашого зображення. У нашому випадку він зупинився на 217-ти відтінках. Щоб зображення було прозорим слід поставити позначку біля пункту «Прозорість (Transparency)».

Вставляємо зображення у документ за допомогою елемента <IMG>. Щоб перевірити прозорість заливаємо фон сторінки червоним кольором:

<body style=»background-color:red»>

<img src=»napys.gif» alt=»екзотичний шрифт»>

</body>

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

Макетуючи зображення на веб-сторінці, слід дотримуватися кількох правил:

1)намагайтеся використовувати ілюстрації однакової ширини;

2)не використовуйте маленьких зображень, вони засмічують сприйняття сайту;

3)не перевантажуйте сторінку пістрявим фоном.

Завдання:

Створіть фотоальбом застосуванням елементів HTML та стилів CSS;

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

Запитання для самоперевірки

1)Які три формати графіки ви знаєте?

2)Чим вигідно використовувати формат GIF?

3)Які стилі можна застосувати до налаштування фону сторінки?

4)Як поставити фонове зображення по середині вебсторінки?

5)Який графічний редактор для обробки фотографій ви знаєте?

6Гiперпосилання

у веб-дизайнi

Основа гіпертексту

Посилання у документі

Зовнішні гіперпосилання

Оформлення гіперпосилань CSS

Кнопки

Основа гіпертексту – гіперпосилання (англ. hyperlink) – це активний (часто виділений кольором) текст, зображення чи кнопка на веб-сторінці, натискання якої (активізація гіперпосилання) викликає перехід на іншу сторінку чи іншу частину поточної сторінки. Гіперпосилання перетворюють Інтернет на одну велику книгу. Вперше термін використав Тед Нельсон у 1965-му році. Його дослідження були спрямовані на те, як уникнути лінійності текстів і дати читачеві вибір, куди просуватися далі по інформації. Спочатку з’явилася можливість пересуватися у межах документу, а згодом і між ними. Практично ці ідеї втілила компанія Apple у 1987-му році, створивши програму HyperCard для комп’ютерів Macintosh.

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

Для початку розглянемо гіперпосилання у межах одного документу. Створіть html-документ і збережіть у ньому кілька сторінок тексту. Далі сформуйте його у колонку за допомогою стилю width: 600px для тегів абзацу <P> Щоб стиль запрацював, розставте по тексту кілька абзаців і перед кожним абзацом пропишіть підзаголовок, наприклад: <h3>Заголовок 1</h3>, <h3>Заголовок 2</h3>

і тд. Відцентруйте сторінку за допомогою елементу <CENTER></ center>.

<head>

<style>

P { width: 600px }

</style>

</head>

<body>

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

За гіперпосилання відповідає елемент <A>. Спочатку розставимо мітки, які в HTML називаються «якорі (anchor)». Якорі зручно застосовувати для великих документів, щоб швидко переходити по гіперпосиланню до потрібного розділу. Стави-