web-design-book-

мо їх перед підзаголовками, називаючи кожен якір іншим іменем за допомогою атрибута name=””. Щоб якір не «прилипав» до попереднього абзацу, поставимо тег <br>.

<br>

<A name=”zag1”>

<h3>Заголовок 1</h3>

…

<br><A name=”zag2”>

<h3>Заголовок 2</h3>

Після розстановки якорів, можна приступати до формування змісту на початку сторінки. Використаємо елемент <A> з атрибутом href=””, що вказує на місце, куди потрібно переміститися в тексті. Якщо гіперпосилання вказує на ім’я якоря в межах одного документа, перед ним ставлять значок хеш (Hash ) - #. Між початковим і кінцевим тегом розміщують текст, на який слід натиснути, щоб перейти до якоря.

<H3>Зміст</h3>

<A href=»#zag1»>Перейти до заголовка №1</ a><br>

<A href=»#zag2»>Перейти до заголовка №2</ a><br>

<A href=»#zag3»>Перейти до заголовка №3</ a><br>

Документ має виглядати, як на малюнку №???. Невикористані гіперпосилання підкреслюються і заливаються синім кольором, а використані – фіолетовим. Тепер зі змісту можемо переходити до визначених нами якорів. Щоб повернутися до змісту, на початку сторінки поставити ще один якір:

<A name=”verhivka”>

і прописати після кожного абзацу гіперпосилання, що повертатиме нас нагору:

<br><A href=»#verhivka»>Повернутися до змісту

</a>

Тепер розглянемо створення гіперпосиланнь між документами. Створюємо три html-документи з назвами 1.html, 2.html, 3.html. Щоб розрізняти їх, залийте фон кожного документа іншим кольором.

У четвертому документі (main.html) прописуємо три посилання на наші сторінки.

<A href=»1.html»>Синій документ</a><br> <A href=»2.html»>Жовтий документ</a><br> <A href=»3.html»>Червоний документ</a><br>

Вказуємо лише назву файла (1.html), оскільки документи розташовані у тій самій папці, що і сторінка з гіперпосиланнями, нам би довелося вказувати повний шлях. Посилання на інші сайти інтернету вимагає в адресі URL із зазначенням протоколу (http) на початку. Наприклад, посилання на сторінку vkontakte.ru:

<A href=»http://vkontakte.ru/»> Вконтакте</a>

Після натиснення одного з посилань браузер завантажує відповідну сторінку. Щоб мати можливість повертатися назад, зробимо на кожній кольоровій сторінці посилання назад на головну.

<A href=»main.html»><H1>Повернутися до головної</h1></a>

Як бачимо з цього прикладу, гіперпосиланням може слугувати не тільки простий текст, а й інші елементи, у нашому випадку – заголо-

вок.

Сторінки, на які вказують гіперпосилання, відкриваються у тому самому вікні браузера. Щоб відкривати їх у новому вікні, потрібно додати атрибут target=_blank

<A href=»1.html» target=_blank >Синій документ</a><br>

Тепер можна налаштувати стилі для посилань за допомогою селектора тегів. Як ми вже згадували, браузери автоматично налаштовують їхній колір і вигляд. У веб-дизайні вважається моветоном залишати колір і підкреслення, які браузер надає гіперпосиланням за замовчуванням, тому змінимо колір на той, що відповідає стилістиці нашої сторінки. Також бажано зняти підкреслення за допомогою стилю text-decoration: none

<STYLE>

A {color: black; text-decoration: none } </style>

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

A {color: black; text-decoration: none; background-color: yellow; border: 1px solid black; padding: 10px}

Якщо ви записували все послідовно, то фон гіперпосилань буде перекривати один на одного. Щоб уникнути цього ставимо більше переносів рядка <br> після кожного елемента гіперпосилання.

Можна налаштувати окремий стиль для гіперпосилань, на які наводиться курсор. Для цього використовують селектор тегів A:hover. Відвідані гіперпосилання відповідно налаштовуються селекторами тегів A:visited, а стиль активного гіперпосилання – A:active. Описуємо ці стилі так, щоб вони різнилися, наприклад, тільки кольором фону.

A {color: black; text-decoration: none; background-color: yellow; border: 1px solid black; padding: 10px}

A:hover {color: black; textdecoration: none; backgroundcolor: red; border: 1px solid black; padding: 10px}

A:active {color: black; textdecoration: none; backgroundcolor: black; border: 1px solid

Мал. 20

Гіперпосилання із застосованими стилями, що перекривають одне одного

black; padding: 10px}

A:visited {color: black; text-decoration: none; background-color: white; border: 1px solid black; padding: 10px}

Згідно з цим кодом, гіперпосилання матимуть жовтий фон, при наведенні курсору на них, тло змінюватиметься на червоний, в момент натиснення на посилання – на чорний, а відвідані посилання матимуть білий фон. Щоб дотримуватися цілісності дизайну веб-сторінки стиль A:visited краще взагалі не використовувати, тому видаляємо його з коду.

Проблемою налаштування загальних стилів для гіперпосилань є те, що їх дія розповсюджується на всі гіперпосилання сторінки. Якщо ж ми хочемо звузити використання стилів тільки для посилань меню, нам потрібно створити класи – стилі, що прописуються елементам. Класи застосовують, коли необхідно визначити стиль для індивідуального елемента веб-сторінки. Назвемо клас «b» і додамо його до назви стилів через крапку.

A.b {color: black; text-decoration: none; background-color: yellow; border: 1px solid black; padding: 10px}

A:hover.b {color: black; text-decoration: none; background-color: red; border: 1px solid black; padding: 10px}

A:active.b {color: black; text-decoration: none; background-color: black; border: 1px solid black; padding: 10px}

Щоб клас спрацював, слід вписати його ім’я у тег посилання в атрибуті class=b.

Мал. 20

Вибір форми кнопки у програмі Easy GIF Animator

<A class=b href=»2.html»>Жовтий документ</a>

Гіперпосиланнями можуть слугувати не тільки тексти, й зображення, для цього потрібно помістити зображення всередину елемента

<A>.

<A href=»1.html»><img src=»b1.gif»></a>

У більшості браузерів навколо зображення з’являється синя рамка, якою браузер підкреслює, що це гіперпосилання. Щоб прибрати її прописуємо для зображення стиль, що визначає нульову рамку style=»border:0px».

Використовуючи зображення, можна зробити кнопки для гіперпосилань. Для цього підходить будь-який графічний редактор (наприклад, Adobe Photoshop), головне, щоб кнопки мали однакову ширину, висоту і текст був вирівняний за єдиним принципом. Існують програми, що пропонують заготовки для кнопок. Одна з таких програм – Easy GIF Animator. Встановлюємо програму – заходимо «File» – «New button wizard (Створення нової кнопки)».

Мал. 20

Вікно програми Easy GIF Animator з готовою кнопкою.

Мал. 20

Вигляд кнопок на сторінці та їхній же вигляд у режимі вимкненої графіки

Завдання:

Розробити структуру свого сайту, створити всі файли для сторінок сайту і основну сторінку з гіперпосиланнями на неї. Налаштувати стилі для гіперпосилань цієї сторінки.

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

1)Хто вигадав гіпертекст?

2)Що таке якорі?

3)Що таке атрибут target=’’?

4)Що таке URL?

5)Як посилатися на зовнішній інтернет ресурс?

7Верстка

таблицями та фреймами

Фреймова будова сайту

Таблиці

Використання таблиць для верстки

Елемент iFrame

Тепер ми знаємо основні можливості макетування тексту, графіки та гіперпосилань і час переходити до створення макету сайту. У HTML всі об’єкти додаються один під одним. Така лінійна побудова сайту - незручна для роботи з електронним виданням. Набагато краще, коли елементи сайту розміщуються на сторінці в колонках. Наприклад, ліва колонка під меню сайту, центральна – для інформації і права для новин та рекламних банерів. Для рішення подібних завдань у 1996 році в мову HTML додали специфічні елементи <FRAME>, які розбивають сторінку на частини і дозволяють поміщати туди окремі документи. Щоб протестувати фреймову структуру верстки – створюємо 5 документів з різним за кольором фоном – 1.html, 2.html і тд. А також сторінку з посиланнями на них (main.html). Можна використати файли які ми використовували у попередному уроці з гіперпосиланнями. Створюємо цетральну сторінку сайта, яка повинна називатися index.html. Це обов’язкова вимога до назви сайту, оскільки сервери Інтернету розцінюють її як головну. У цій сторінці замість елементу <BODY> використовуємо <frameset>, який задає нам кількість колонок за допомогою атрибуту cols=»», рядки можна задати його аналогом - rows=»», але використовують або рядки, або колонки, а не обидва атрибута відразу.

<frameset cols=»20%, *»> <frame src=»main.html»> <frame src=»1.html»> </frameset>

Кількість колонок чи рядків зазначається кількістю розмірів, які записуються, у цьому атрибуті через кому. Ширина може зазначатися у відсотках, наприклад 20%. При такому записі останній розмір можна не записувати, а поставити зірочку (*), що означатиме – все інше від 100%. При фіксовній верстці розмір колонок записується пікселями. Однак необхідно зважати, що у комп’ютерів можуть бути різні за шириною екрани, тому одна колонка повинна

зазначатися зірочкою (*), щоб вона могла змінювати розмір залежно від ширини екрану.

В середині елементу <frameset> записуємо елементи <frame>, кожен з яких відповідатиме за одну колонку чи рядок. У нього, як і у елемента <IMG>, є атрибут src=«», який вказує, який саме документ відображати у цьому фреймі. Якщо все написано правильно, вигляд вашого сайту буде як на мал. 21. Щоб стало схоже на справжній сайт

- додайте текст у сторінку 1.html.

Проте, якщо ви почнете натискати на гіперпосилання, вони будуть завантажуватися у лівому фреймі замість правого. Щоб сторінки перезавантажувалися правильно, нам необхідно назвати праву колонку якимсь ім’ям через атрибут name=””, а у файлі main.html гіперпосилання направити до цього імені через атрибут target=””.

Мал. 21

Вигляд сторінки з фреймами

Файл index.html

<frame src=»1.html» name=»prava»>

Файл main.html

<A href=»1.html» target=»prava»><img style=»border:0px» src=»button0.gif» alt=»Головна»></a><br>

<A href=»2.html» target=»prava»><img style=»border:0px» src=»button1.gif» alt=»Галерея»></a><br>

<A href=»3.html» target=»prava»><img style=»border:0px» src=»button2.gif» alt=»Історія видання»></a><br>

<A href=»4.html» target=»prava»><img style=»border:0px» src=»button3.gif» alt=»Гостьова книга»></a><br>

<A href=»5.html» target=»prava»><img style=»border:0px» src=»button4.gif» alt=»Контакти»></a><br>

Щоб прибирати границю між фреймами припишіть атрибут border=0 для <frameset>. А атрибут scrolling=”” для

<frame> додає та прибирає смуги прокрутки. Він може набувати значень yes – смуга прокрутки створюється обов’язково, навіть якщо текст не виходять за межі фрейму; no – смуга прокрутки знімається, навіть якщо інформація не вміщається. Спробуйте поставити цей атрибут у один з фреймів..

У фреймовій структурі сайту є свої переваги і недоліки. Серед основних переваг – те, що частина сайту, яка є незмінною на всіх сторінках (шапка та меню) – не перезавантажується кожного разу, коли ми переходимо по сторінках. Це суттєво пришвидшує роботу з сайтом. Також під час робити над якимось проектом, може

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

Якщо вам необхідно на одній сторінці застосувати і колонки і рядки

– необхідно вписати новий <frameset> замість одного з фреймів. Наприклад створимо місце для шапки сайту за допомогою одного рядк, а в інший впишемо <frameset> з колонками:

<frameset rows=»120px, *» border=0> <frame src=»2.html»>

<frameset cols=»220px, *» border=0> <frame src=»main.html»>

<frame src=»1.html» name=»prava» scrolling=»no» >

</frameset>

</frameset>

Іншим засобом макетування веб-сторінок є таблиці. Розміщуючи об’єкти у різних комірках, можна задавати їм потрібне нам місце на сторінці. За таблиці відповідає елемент <TABLE>, у якому зазначаються рядки <TR>, та комірки <TD>. Створюємо новий документ table.html у якому запишемо такий код:

<body>

<table>

<tr>

<td> Ім’я </td> <td> Прізвище </td>

<td> Рік народження </td>

</tr>

<tr>

<td> Павло </td>

<td> Скоропадський </td> <td> 1873 </td>

</tr>

</table>

</body>

Кожна комірка містить якусь інформацію, комірки згруповані по три у рядки. Щоб додати новий рядок – скопіюйте весь його елемент з вкладеними у нього комірками від початкового <TR> до кінцевого </tr> і вставте після останнього тегу </tr> в таблиці.

<tr>

<td> Іван </td> <td> Мазепа </td> <td> 1687 </td>

</tr>

Вигляд такої таблиці не зовсім красивий, тому давайте застосуємо стилі CSS щоб оформити її.

Щоб зняти подвійну границю між комірками задаємо стиль для елементу <TABLE> - border-collapse:collapse

table {border-collapse:collapse}

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

У ліву комірку вносимо кілька кнопочок-гіперпосилань, в центральну – текст і зображення, а в праву – текст короткої новини.

<table> <tr > <td>

<A href=»1.html»><img style=»border:0px» src=»button0.gif» alt=»Головна»></a><br> <A href=»2.html»><img style=»border:0px» src=»button1.gif» alt=»Галерея»></a><br> <A href=»3.html»><img style=»border:0px» src=»button2.gif» alt=»Історія видання»></ a><br>

<A href=»4.html»><img style=»border:0px» src=»button3.gif» alt=»Гостьова книга»></ a><br>

<A href=»5.html»><img style=»border:0px» src=»button4.gif» alt=»Контакти»></a><br>

</td>

<td>

<p>

БАГАТО ТЕКСТУ <!-- тут вписуємо багато тексту і вставляємо зображення -->

</td>

<td>

НОВИНИ <!-- тут вписуємо новину -->

</td>

</tr>

</table>

Оформіть ваш текст і фони стилями, щоб сторінка вигляділа стильно.

Розглянемо мал.23. Які елементи необхідно підправити, щоб вид сторінки був кращим? Інформація розміщується по середині висоти таблиці. У центральній колонці інформації більше, тому вона займає увесь простір, а бокові колонки висять у повітрі. Щоб закріпити об’єкти в комірці до верхнього (top) чи нижнього (bottom) краю, використовуємо стиль vertical-align:top Також необхідно, щоб наша інформація не прилипала додамо відступ padding:5px

Td {vertical-align:top; padding:5px }

Мал. 23

Таблична верстка сайту з неналаштованими стилями

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

Отже прописуємо точну ширину усім колонкам. Бажано, щоб сумарна ширина усіх колонок не перебільшувала 1024 пікселів, оскільки цей маленький на сьогодні розмір екрану ще досі використовується на комп’ютерах деяких користувачів.

Ширину правої колонки визначають кнопки, які ми створили (200рх). Зважаючи ще на відступ, який ми задали зліва і справа (padding:10px), разом отримуємо 220рх. Центральну колонку виставляємо на 600px – цього достатньо, щоб в тексті не з’являлися дірки при вирівнюванні (text-align:justify). Залишається ще 204 пікселя для правої колонки новин. Це замало для текстів з вирівнюванням по обом колонкам, тому нам доведеться вирівнювати його по лівому боку і меншим розміром шрифта.

Перша комірка

<td style=”width:220px”>

Друга комірка

<td style=»width:600px»>

Третя комірка