На головну

Трохи про графічних редакторах

  1. Вступ. трохи теорії
  2. Види умовних знаків. Загальні правила читання топографічних карт.
  3. Вплив социодемографических змін розвиток світового ринку туризму
  4. Питання 3 Особливості аналізу звітної інформації в розрізі географічних сегментів
  5. демографічних
  6. Демографічних тенденцій в прогнозному періоді
  7. Динаміка демографічних показників по Республіці Башкортостан

Існує безліч графічних редакторів. З них для WEB-дизайнера можуть представляти інтерес лише деякі.

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

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

Почну з Xara WEBStyle. Тут багато шаблонів двовимірних і тривимірних заголовків, кнопок, покажчиків, роздільників і текстур.

Ви можете взяти будь-якої вподобаної шаблон і поекспериментувати з ним: поміняти колірну гаму, прибрати або накласти тінь, змінити шрифт, поміняти розмір, зберегти як свій шаблон і, звичайно ж, зберегти для самої сторінки в форматі GIF або JPEG. Вона не вимагає специфічних знань, досить лише грамотно підібрати кольори (щоб не було недоладності або не різати око їх несумісність).


ЗБ-графіку також можна створювати за допомогою спеціалізованих програм. Вони теж дуже прості у використанні і не вимагають спеціальних знань. Я говорю про Хага 3D і Ulead Cool 3D.


Обидві ці програми пропонують безліч шаблонів. Ці шаблони також можна редагувати під свої потреби: змінювати шрифт, колірну гамму, розташовувати під різним кутом і міняти сам вид букв.

Ulead Cool 3D має шаблони не тільки на текст, а й на різні картинки, кнопки. Але єдине що в ньому не можна змінити, так це фон. Все завжди розташовується тільки на чорному тлі. Звичайно, можна сказати, що фон - це якась текстура з його колекції (є й таке), але тоді заголовок необхідно зберігати в форматі JPEG. Також Ulead Cool 3D дозволяє створювати анімації. Можливості редактора в цьому вельми неогр-нічени.

Хага 3D буде трохи складніше, але лише в області налаштування виду самого тексту. Текст можна повертати під різними кутами, крутити навколо своєї осі. Можна погратися з джерелами освітлення. Одним словом, простір для фантазії цей редактор не обмежує.

Разом з Microsoft FrontPage 98 в одному пакеті поставляється і графічний редактор - Microsoft Image Composer.У нього багато різних можливостей, він хороший для початківців в графіку тим, що не вимагає абсолютно ніяких знань. Досить розібратися в механізмі роботи з ним, і можна створювати прості заголовки і кнопки.

Спрощений в порівнянні з Adobe Photoshop графічний редактор - це PaintShop Proфірми Jasc. Остання його версія, б-я, стала ще більш просунутою. Тепер в ньому з'явилися верстви, які дозволяють, створювати складну графіку з легким її зміною, розміщуючи окремі еле


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

На мій погляд, Adobe Photoshop- Найбільш зручний і милий редактор для створення всілякої графіки. А версія 5.5 - мрія кожного дизайнера. Хоча обіцяна компанією Adobe версія 6.0 обіцяє надати ще більше зручностей для WEB-розробників.


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

Інструментів у нього безліч. Цим він збільшує можливість обробки будь графіки до неможливого.

А якщо до нього підключити і сторонні фільтри ... І таке Adobe Photoshop підтримує. Кращий набір фільтрів для дизайнерів - це фільтри Ulead (Art.Plugln, Type.Plugln, WEB.Plugln і інші), фільтри Extensis (Mask Pro, Intellihance, PhotoFrame, PhotoGraphics, PhotoTools) і багато інших.

Є у нього і можливість створювати операції - Actions. Тим самим редактор дозволяє механізувати процес створення графіки. У Microsoft Word цьому відповідає таке поняття, як макрос.

І чого немає у інших редакторів, палітра History (Історія). Тепер можна експеріментіровать.над картинкою скільки завгодно, а зайшовши в History, скасувати до 20 проведених операцій (якщо, звичайно, не налаштувати в опціях це число за замовчуванням на своє, більше).


 Для створення анімацій використовуються різноманітні редактори. Я відзначу лише три.

Animator Shop фірми Jasc йде в одному пакеті з PaintShop Pro, починаючи з версії 5.0. Дозволяє створювати досить оригінальні анімашки. У аніматора для цього існують різні ефекти, причому кожен ефект супроводжується коротким описом і демонстрацією типу «що вийде, якщо ви застосуєте цей ефект». Також він дозволяє змінювати розмір вже існуючої анімації, зменшувати число кадрів в анімації. Один лише недолік - якість зберігається графіки дуже посереднє.

Ulead GIF Animator версії 4.0 - мрія будь-якого дизайнера. Попередні версії теж були непогані, але ця - щось!


Дуже зручний дизайн редактора - все на своїх місцях, наочно. Можна створити анімацію з існуючих кадрів; будь-який з кадрів можна відредагувати в GIF Animator, якщо виникає в тому необхідність; провести оптимізацію створюваної анімації і подивитися, що вийде. Для цього служать закладки в центральному вікні - Compose, Edit, Optimize, Preview. Можна існуючу палітру, яку пропонує аніматор, замінити, а можна додати свою (палітру цю можна створити, наприклад, в Adobe Photoshop, в якому створювався кадр анімації). У нього свій набір ефектів, не менше оригінальних (якщо порівнювати з Animator Shop).

Найбільше достоїнство GIF Animatora - дуже зручний інтерфейс.

І простенький аніматор - Animagic GIF Animator.Мінімум можливостей, але дуже простий у використанні.


глава 29

Кілька слів про колір в web-дизайні

Від вибору правильної колірної схеми для вашої WEB-публікації залежить багато і в першу чергу саме популярність вашого творіння. Досягти колірної гармонії не просто. Але саме застосовувані колірні схеми впливають на настрій ваших відвідувачів, залучаючи їх до сторінки або відштовхуючи від неї.

Що нам слід розуміти під колірною схемою? Саме ту комбінацію кольорів, які доповнюють один одного і надають ментальне вплив на глядача.

Чому варто відштовхуватися? В першу чергу від того, для кого - якої аудиторії - ви створюєте вашу WEB-сторінку. Наприклад, яскраві відтінки червоного, жовтого і синього призначаються для маленьких дітей. А світлі відтінки жовтого і зеленого в комбінації з блакитним і білим підкреслюють оновлення, жвавість і оптимізм.

І не слід забувати, що кожна людина має свій, суб'єктивним сприйняттям. У різних людей різняться не тільки улюблені кольори, а й відчуття, пов'язані з тим чи іншим кольором.

Кращий приклад цього, як мені здається, відповідність квітів і знаків Зодіаку: людина інтуі-

---------------------------------- 204 --------------- ---------------------


тивно схильний до свого кольору. Так вважають астрологи. А ось яке відповідність вони пропонують:

- Овен - червоний колір;

- Телець - світло-зелений;

- Близнюки - всі кольори веселки;

- Лев - помаранчевий, жовтий і білий;

- Діви - синій;

- Ваги - темно-зелений;

- Скорпіон - пурпурний;

- Стрілець - всі кольори веселки;

- Козеріг - білий, чорний, ліловий;

- Водолій - фіолетовий;

- Риби - синьо-зелений;

- Рак - зелений.

Не варто забувати і про те, яке фізичний вплив робить той чи інший колір на людину. Збудливо діють червоний, помаранчевий і жовтий; гнітюче - фіолетовий, темно-сірий, чорний; заспокійливо - зелений і блакитний.

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

Помаранчевий супроводжує марнославству.

А жовтий активізує розумову діяльність людини. Зате зеленувато-жовтий і сіро-жовтий є символи заздрості, зради, фальші.

---------------------------------- 205 --------------- ---------------------


Зелений - це не що інше, як самий спокійний колір. При додаванні в зелений жовтого кольору він стає більш живим, активним. А при додаванні синього звучить інакше - серйозніше, вдумливіше. І найголовніше, зелений виступає сполучною ланкою з іншими квітами, дозволяючи нейтралізувати неузгодженість між ними.

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

Фіолетовий має більшу виразністю і глибиною, налаштовуючи на розкішний, торже-стіну лад. Але у великій кількості викликає меланхолію, але легко пригнічується іншими квітами. А ось рожевий викликає ліричний настрій.

Сірий колір (найбільш популярний в WEB-дизай-ні) є рівноважною точкою між білим і чорним. Він абсолютно нейтральний.

Білий сильно контрастує з усіма темними кольорами. В інші кольори він вносить світло, пожвавлення і ліричність. Сприймається нами як мовчання, повне можливостей.

Чорний сприймається (на противагу білому кольору) як мовчання без майбутнього. Він підсилює дію світлих тонів, приносячи строгість, манірність, офіційність. Найбільш колоритні поєднання утворює з помаранчевим і червоним.

Не всі ці кольори добре поєднуються один з одним. При комбінації кольорів часто народжується біль


Шая проблема: чому одні кольори створюють приємне поєднання один з одним, а інші просто ріжуть очі. І в поєднаннях вони вже роблять деякі інші дії (фізичне, емоційне) на людину.

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

Роль WEB-дизайнерів зводиться до того, щоб при оздобленні віртуальних апартаментів досягти гармонії між усіма елементами сторінок. Графічна тема складається з безлічі елементів - це і фон (background), заголовки як графічні, так і текстові, кнопки, маркери, роздільники, фотографії та малюнки, які всі разом повинні забезпечити узгоджений, приємний для ока відвідувача вид. Кольори в графічній темі повинні гармоніювати один з одним, не викликати дисонансу (якщо, звичайно, саме це і хоче отримати дизайнер-авангардист).

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

Почнемо з фону. На тлі, саме на ньому, розташовуються всі інші елементи графічної теми, а також і текст сторінок. Перше, основне правило: колір фону (він може бути один,


 може бути набором квітів з наявністю переважного) повинен контрастувати з кольором тексту. Щоб відвідувач не був змушений сидіти і розбирати по букві - а що ж там написано. Коли ви використовуєте в якості фону якусь свою картинку, то ви повинні забезпечити:

- Колір заднього плану у backgrounds, близьким до основного кольору цієї картинки;

- «Бесшовность» вашої картинки, т. Е. У відвідувача не повинно створюватися враження, що ваш background складається з плиток;

- Ідеальність фону, т. Е. Фон повинен ставати щодо непомітним для перегляду сторінок.

Крім фону важливу роль відіграє колір інших елементів.

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

Кнопки і маркери можуть бути як контрастними до фону сторінки, так і трохи відзначаються окремо від нього (т. Е. Або трохи темніше, або трохи світліше). Тут вже все залежить від того, чого хоче сам WEB-д ізайнер.


глава 30

Робимо наш перший сайт

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

Як приклад сайту візьмемо передостанній дизайн моєї персональної сторінки «СЕЛЕНА» (Http://selena.uralnet.ru).

Структура моєї персональної сторінки наступна:

- Стартова сторінка з привітанням;
 -сторінка «Про мене»;

-сторінка «Хобі»;

-сторінка «Знання»;

-Набір сторінок «Портфоліо»;

- Посилання e-mail;

-сторінки «Гостьова книга».

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

---------------------------------- 209 --------------- ---------------------


Як приклад ми розглянемо створення стартової сторінки та сторінки «Хобі». Також ми ознайомимося з принципом створення «Гостьовий книги».

Відразу ж хочу зауважити: вид вашої персональної сторінки, що на ній буде (які сторінки і тексти) - ви придумаєте самі. Я ж, щоб ознайомити вас з процесом створення сайту у FrontPage, за основу візьму свою персональну сторінку.

Структура всіх сторінок однакова:

- «Шапка» сайту (рис. 129);

- Текстова частина;

- Підпис.

Як ви бачите, в «шапці» сайту я порахувала вигідним поєднати назву (заголовок) самого сайту (моєї персональної сторінки) і назв сторінок, складових сайт, - так би мовити, меню для переміщення по ряду сторінок, складових сайт.

Крім того, нам ще знадобиться текстура (Bkg.gif) - графічний файл, в якому розташована картинка, яку ми заллємо фон наших сторінок (рис. 130). На стартовій сторінці також розташовується картинка (Selena.gif) - Мій портрет (рис. 130). В сторінці «Хобі» ми створимо маркований список - для нього нам понадо-


бится маркер. У його якості ми будемо використовувати зроблений нами графічний символ bul-let.gif (Рис. 130).

Оскільки в книзі все картинки некольоровими, зауважу лише, що в якості основної колірної гами використаний блакитний колір і його відтінки.

Тепер визначимося з текстами. Для стартової сторінки я використала наступний текст:

Мені подобається створювати WWW-публікації. Для мене це найкраща можливість висловити свій внутрішній світ, свій настрій. Та й сидіти склавши руки або просто довго відпочивати я не можу. 'Саме тому мені подобається моя "додаткова робота", на яку я витрачаю вечора, вихідні та відпустку. У моєму віртуальному будиночку Ви знайдете інформацію про мене і моїх роботах. Приємного Вам плавання!

а для сторінки «Хобі» -

Мені подобається читати книги. великим
 перевагою перед іншими жанрами
 володіє ФАНТАСТИКА. Потім слідують Детектив,
 ---------------------------------- 211 --------------- ---------------------


Історико-пригодницькі. Поезія зовсім по-

настрою.

У жанрі Фантастика мої улюблені автори - це:

Айзек Азімов, Кліффорд Саймак, Джон Уиндем,

Роджер Желязни, Саймон Грін, Урсула Ле Гуїн,

Пол Андерсон, Альфред Бестер, Кейт Лаумер,

брати Стругацькі, Андрій Белянин, Іван

Єфремов.

Письменники детективів, яких я ціную:

Агата Крісті, Едгар Уоллес, Елліс Пітері,

Роберт ван Гулик, Джон Кризи.

Історико-пригодницькі романи цікаво

читати мені у - Генрі Хаггарда, Вальтера

Скотта, Олександра Дюма, Генріха Манна.

Ну а вірші - Сергія Єсеніна, Михайла

Лермонтова, Олександра Фета.

З музики я віддаю перевагу Rock'n'Roll. Всі мої

улюбленці - це групи і виконавці 60-70-х

років. Саме в ті часи, як мені здається,

з'явилися справжні монстри (в хорошому сенсі

слова) музики.

The Rolling Stones, David Bowie, Led Zeppelin,

Sweet, Ritchie Blackmore, Elton John, Smokie,

Сергій Захаров, Воскресенье, ЧайФ, Машина

часу, Юрій Антонов.

Ми зібрали всі елементи нашого сайту. Тепер можна приступити до його реалізації.

Насамперед ми запускаємо FrontPage 2000 (його ви знайдете в панелі «Програми», якщо натиснете кнопку «Старт»). На екрані монітора ми побачимо редактор FrontPage (рис. 122).

Тепер ми створюємо наш WEB-сайт, який бу
 дет розташовуватися локально (на комп'ютері, за ко
 менту, котрим ми сидимо). Для цього в меню «File» вибіра-
 ---------------------------------- 212 --------------- ---------------------


ем опцію «New». Редактор пропонує створити нову сторінку на основі шаблонів ( «Page») або новий WEB-сайт, використовуючи готові конструкції ( «Web»). Ми вибираємо опцію «Web».

Редактор завантажує вікно, в якому пропонує нам вибрати конструкцію створюваного сайту (рис. 131). Ми виберемо шаблон «One Page Web» - створити новий WEB-сайт з одного порожньою сторінкою.

Серед інших конструкції FrontPage пропонує також:

- Empty Web- Створити порожній WEB-сайт (без єдиного html-файлу);

- Personal Web- Шаблон вашого персонального сайту з шаблонами сторінок ваших інтересів, фотоальбому і посилань на улюблені сайти;

- Corporate Presence Wizard- Майстер створення сайту-презентації вашої компанії (FrontPage

---------------------------------- 213 --------------- ---------------------


пропонує в кілька кроків сформувати структуру такого сайту шляхом відповіді на ряд питань);

- Discussion Wizard- Майстер створення сайту-
 конференції з необхідними сторінками,
 змістом і повнотекстової пошукової сис
 темою.

Також в цьому вікні (рис. 131)він пропонує ввести імені вашого сайту в рядку «Specify the location on the new web». Зверніть увагу, що сама рядок ;, пропонована FrontPage за умовчанням, складається з трьох елементів:

- Типу протоколу (закінчується двокрапкою і двома косими рисами -: //);

- Імені комп'ютера (закінчується косою рисою - /);

- Імені сайту.

Редактор пропонує нам протокол http - протокол доступу до WEB-сторінок. Цей елемент ми не чіпаємо. Я сиджу за комп'ютером, який звуть «aloha», тому значення елемента «ім'я комп'ютера», правильне для мене, - «aloha». А як звуть ваш комп'ютер? Адже саме це ім'я вкаже редактор як значення елемента «ім'я комп'ютера». І цей елемент ми залишаємо без змін. FrontPage пропонує в якості імені сайту ім'я «myweb». Ось його ми і замінюємо на ім'я «test».

Тепер буде достатньо ввести в рядку запиту URL браузера цю адресу (для мого комп'ютера - http: // aloha / test) і натиснути кнопку «ОК». Тепер редактор буде створювати наш сайт (рис. 132)


Отже, наш WEB-сайт «test» створений. Однак поки ми не забезпечимо хоча б index.htm, браузер буде повідомляти нам про помилку - відсутність файлу. Що ж, збережемо порожню сторінку, створену редактором як index.htm.

В меню «File» виберемо опцію «Save as ...» (рис. 133). У рядку «File name» введемо текст:

index.htm

Щоб виправити заголовок сторінки (цей заголовок буде відображатися в заголовку браузера перед ім'ям самого браузера), натиснемо кнопку «Change ...» і в віконці, що з'явилося введемо текст:

Персональна сторінка

Не забудемо і додати вже готову графіком в каталог images. Скопіюємо графіку в буфер обміну Windows і, клікнувши правою кнопкою миші по назві images в дереві сайту (вікно редактора

---------------------------------- 215 --------------- ---------------------


Folder List), отримаємо контекстне меню. Виберемо опцію Paste, і графіка додана в наш проект.

Мал. 133


Якщо вікно Folder List відсутня в вашому редакторі, то увійдіть у меню «View» і виберіть опцію «Folder List». У цьому вікні FrontPage показує дерево вашого сайту.

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

- вікно Views(Зліва) - дозволяє перемикати
 ся між завданнями. FrontPage підтримує
 наступні завдання (всі або більшу частину ви
 обов'язково використовуєте в процесі створення
 сайту, однак далі ми не будемо останавлі
 тися на них):

- Page- Режим редагування html-стра-ниць (він зараз активний),

- Folders- Режим роботи з каталогами нашого WEB-сайту. Так, будь-який WEB-сайт - це набір файлів (текстових та графічних), які ще можна розкласти по каталогам,

- Reports- Редактор представляє загальний звіт про стан розробляється WEB-сайту,

- Navigation - малює структурну схему
 ¦ сайту,

- Hyperlinks- Виводить стан всіх посилань, які використовуються на сторінках сайту,

- Tasks- Використовується, коли роботу над сайтом ведуть кілька осіб;

- вікно Folder List- В ньому отрісовивается
 структура нашого WEB-сайту;


- Вікно з ім'ям поточного редагованого файлу. У цьому вікні, внизу, ви побачите три закладки:

- Normal- Режим роботи WYSWYG (саме про роботу в ньому ми і будемо говорити),

- HTML- Режим роботи прямо з кодом HTML (тегами і текстами), тобто саме програмування,

- Preview - режим швидкого перегляду нашої сторінки: так вона буде відображатися в браузері.

Давайте ще раз уважно поглянемо на вікно редактора FrontPage. Ми бачимо, що меню редактора і панель інструментів мало відрізняються від тих же меню і панелі інструментів часто використовуваного текстового редактора Windows Word. Основні меню і кнопки, які ми будемо використовувати для створення наших гіпертекстових документів, ті ж самі, що ми використовували в Windows Word для редагування тексту. Тому я лише буду говорити про назву кнопок панелі інструментів і дорозі до потрібної опції через меню.

Що ж, тепер можна почати заповнювати наші сторінки.


глава 31

Використання графіки, кольору і тексту

Насамперед ми встановимо на нашій сторінці фон і задамо основні кольори тексту і посилань.

Фон нашої сторінки може складатися або з полотна, або з комбінації полотно-текстура. Полотно - це колір вашої сторінки в браузері. Ви його можете не змінювати, сподіваючись на те, що відвідувач Інтернету користується стандартною схемою Windows (в ній він білий). Але все ж рекомендується встановити його самому, щоб уникнути непорозумінь, коли колір полотна відвідувача вашого сайту виявиться одним кольором з кольором тексту вашої сторінки. Однак коли ви використовуєте текстуру, ви повинні колір полотна встановити дуже близьким до переважаючому кольору у вашій текстурі.

Зайдемо в меню «Format» і виберемо опцію «Background». У вікні (рис. 135) включимо опцію «Background Picture» і натиснемо кнопку «Browse ...». У вікні, увійдемо в каталог images і виберемо файл bkg.gif, натиснемо кнопку «ОК». Файл, що містить текстуру, ми підключили до нашого гіпертекстових документів.

---------------------------------- 219 --------------- ---------------------


Ми можемо включити опцію «Watermark», якщо хочемо, щоб наша текстура залишалася нерухомою, в той час як текст переміщався в результаті пересування між об'єктами.

Тепер відбудуємо кольору - «Colors». Вони повинні добре читатися на використовуваної нами текстурі (а значить, і полотні). Ми налаштовуємо наступні параметри:

- Background - задаємо колір полотна;

- Text - задаємо колір тексту на сторінці;

- Hyperlink, Visited Hyperlink, Active Hyperlink - визначаємо колір посилань.

Натиснувши на стрілку вниз в кожному з цих параметрів, ми отримаємо контекстне меню, в якому

побачимо:

---------------------------------- 220 --------------- ---------------------


- Standard colors - 16 основних кольорів;

- Document's colors - вже вибрані нами інші кольори;

- «More colors ...» - можливість перейти в вікно з розширеною колірною гамою.

Що ж, текстуру ми розмістили, основні кольори сторінки ми налаштували. Тепер по центру сторінки розмістимо «шапку» гіпертекстового документа.

Будь-який елемент сторінки, будь то текст або графіка, можна вирівняти вліво, вправо, сцентрують. Це дозволяють зробити інструменти форматування FrontPage (вони знаходяться в панелі інструментів редактора або можна завантажити вікно настройки абзацу через меню «Format» опцію «Paragraph»), ті ж самі, що ми використовуємо в редакторі Windows Word для вирівнювання тексту і картинок.

В меню «Insert» виберемо опцію «Picture». Вона запропонує скористатися колекцією графіки Microsoft Office ( «Clip Art») або розмістити графічний файл ( «From File»). Виберемо пункт «From File». Більш короткий шлях до того ж вікна вибору файлів лежить через кнопку «Insert Picture From File», що знаходиться на панелі інструментів редактора.

Отже, ми отримали вікно «Picture», що запрошує нас вибрати файл (рис. 136). Виділяємо файл «titul-map.gif» і натискаємо кнопку «ОК». Тепер на нашій сторінці з'явився «шапка» - заголовок сайту, поєднаний з картою.

У контекстному меню цієї картинки виберемо опцію «Picture Properties ...» (рис. 137, 138).




В закладці General в поле «Text» введемо назву картинки:

Тема і карта сайту

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

У закладці Appearance вкажемо тип вирівнювання картинки: встановимо значення «Alignment» в «Absmiddle» (вирівнювати по центру одночасно по горизонталі і по вертикалі).

Тепер дійшла черга і до тексту. Під час введення тексту ми можемо використовувати:


- Клавішу «Enter» - один абзац від іншого буде відділятися (між ними ви побачите трохи порожнього простору);

- Комбінацією клавіш «Shift-Enter» - новий абзац буде відразу йти за попереднім.

Введений текст для цієї сторінки ми Сцент-рим, для чого натиснемо на кнопку «Center» в панелі інструментів.

Виділимо весь текст і або в контекстному меню, або в меню «Format» виберемо опцію «Font ...». У вікні (рис. 139) виберемо шрифт Arial (параметр «Font») і розмір в 12 пунктів (12 pt, параметр «Size»).


Тут також можна змінити колір символів (параметр «Color») і стиль написання (параметр «Font Style»). Що ми і зробимо для рядки «Приємного Вам плавання!».

Також FrontPage дозволяє застосувати ефекти до виведеним символам (параметр «Effects»).

Що ж, сторінка майже готова. Залишилася лише чергу за двома речами: розміщенням картинки, створенням альтернативної області посилань і підписи.

Розміщення картинки selena.gif нічим не відрізняється від вставки на сторінку «шапки». Розміщуючи курсор на початку першого абзацу і використовуючи меню або панель інструментів, додамо на сторінку картинку. У властивостях цієї картинки ( «Picture Properties ...») в закладці Appearance значення параметра «Alignment» встановимо в «left». Весь текст буде вирівняний щодо картинки праворуч, а сама картинка буде розташовуватися зліва.

З метою експерименту ви можете поміняти значення «Alignment» на будь-яке інше і подивитися, що в підсумку вийде. Тільки врахуйте, що вирівнювання щодо картинки буде розпочато з тієї частини тексту, де розміщувався курсор на етапі додавання цієї картинки на гіпертекстову сторінку.

А я лише коротко охарактеризує основні параметри «Alignment»:

- Left, right - розмістити картинку зліва або
 справа щодо тексту;

* Top, texttop - рядок тексту абзацу, перед до
 торою була розміщена картинка, має в своєму розпорядженні
 ся вгорі, решта тексту цього абзацу йде
 після картинки;

---------------------------------- 225 --------------- ---------------------


- Middle, absmiddle, center - та ж рядок того ж абзацу розташовується вже посередині картинки;

- Bottom, absbottom - та ж рядок того ж абзацу розташовується внизу картинки.

Тепер розмістимо альтернативну область посилань. Для цього введемо наступний рядок:

Сцентрують її і в якості шрифту (вікно Font) вкажемо Courier New розміром 10 pt. Альтернативна область посилань сформована. Навіщо вона потрібна, я розповім в розділі «Гіпертекстові посилання».

Тепер перейдемо до створення підпису. Ми її обмежимо двома роздільниками. А в якості підпису використовуємо рядок:

У цьому рядку я вказую своє ім'я (нік), свою електронну адресу, за якою можна зі мною зв'язатися, і рік або роки існування сторінки. 1998-2000 в моєму прикладі означають, що сторінка була створена в 1998 році і змінювалася (оновлювалася графіка, інформація) до 2000 року включно.

Розміщуємо перший роздільник, для чого в меню «Insert» виберемо опцію «Horizontal Line». FrontPage розміщує на сторінці лінію. Змінимо її небагато: в контекстному меню виберемо опцію «Horizontal Line Properties ...» і в віконці, що з'явилося (рис. 140) змінимо:

------------------------------------------- 226 ------ ---------------------------------------


- Встановлюємо довжину лінії в 500 пікселів (можна і в процентах. Наприклад, 80 percent of window означає, що довжина лінії становитиме 80% від ширини вікна браузера);

- Вирівняємо посередині: параметр «Alignment» встановимо в значення «Center»;

- Змінимо колір і включимо опцію «Solid Line».

Тепер введемо текст підпису і змінимо шрифт і колір. Скориставшись вікном Font, змінимо шрифт на Courier New і розмір встановимо в 10 pt. Колір зробимо світло-синім.

І знову додаємо роздільник. Тепер нам нема
 потреби його редагувати - FrontPage запам'ятав
 наші установки і розмістив на сторінці роздягли
 тель, повністю співпадає з попереднім.
 ---------------------------------- 227 --------------- ---------------------


 Сторінка, взагалі-то, готова. Однак у неї є маленький недолік. У той час як довжина «шапки» фіксована, текст може бути показані по-різному на різних дозволах моніторів (мова йде про найбільш популярних в даний момент: 800x600 і 1024x768). Щоб цього не відбувалося, давайте занесемо текст в таблицю фіксованої ширини - 600 пікселів.

Для цього натиснемо на кнопку «Insert Table» і вкажемо, що в нашій таблиці всього один рядок і один осередок. Потім в контекстному меню виберемо опцію «Table Properties» (рис. 141)

Зробимо зміна наступних параметрів за замовчуванням:


- В розділі «Layout» значення «Alignment» встановимо в «Center»;

- В розділі «Layout» в опції «Specify Width» перемикач встановимо в рядок «In pixels» і в віконці введемо значення «600»;

- В розділі «Borders» значення параметра «Size» встановимо в нуль - тим самим ми отримаємо таблицю з невидимими кордонами.

Ми сформували потрібну нам таблицю. Тепер виділяємо весь текст і просто затягує в цю таблицю.

Все - стартова сторінка закінчена:


Процес створення сторінки «Хобі» майже не відрізняється від створення стартової сторінки. Однак варто звернути увагу на наступне: FrontPage пропонує вже готові шаблони сторінок. Цим варто скористатися і при створенні сторінки «Хобі».

Зайдемо в меню «File» в опцію «New» - виберемо «Page». Редактор пропонує нам свою велику добірку (рис. 143).

Ми зупинимося на шаблоні «Wide Body with Headings» - шаблон створення тексту фіксованої з заголовками (рис. 144).

У цю сторінку нам потрібно буде лише внести деякі зміни, як то:

- Додати текстуру і «шапку»;

- Відредагувати текст;


- Сформувати заголовки самої сторінки і підзаголовки;

- Додати альтернативну область посилань і підпис.

Для цього нам потрібно лише повторити ті ж са
 мие операції по додаванню текстури, графічною
 кого файлу і форматування тексту, які ми
 робили при створенні стартової сторінки нашого
 сайту. В результаті ми повинні отримати подібність
 того, що зображено на малюнку 146. Постарайтеся
 не відходити від цього, щоб формування гіпер
 текстових посилань не викликало в вас труднощів.
 ---------------------------------- 231 --------------- ---------------------


 Bo FrontPage є можливість створення списків. Списки - це інструмент структурування тексту, що дозволяє подати матеріал більш наочно і ефективно.

Існує кілька видів списків. З них найбільшою популярністю користуються:

- Нумеровані списки;

- Марковані списки;

- Списки визначень.

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

Маркери (найпоширеніші в WEB) служать для виведення рядків тексту, яким передують маркери (bullet). Маркери ці можуть бути стандартними (у вигляді кола, кола, квадрата) або призначеними для користувача (будь-яке зображення, яке зберігається в графічному файлі, що підключається до гіпертекстових документів розробником сторінки).

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

Давайте зробимо маркований список з імен музикантів. Кожне ім'я ми напишемо в новому рядку, причому рядки одна від одної відділяються клавішею «Enter» (зверніть увагу). Виділимо весь список і в меню «Format» виберемо опцію «Bullets and Numbering ...». У вікні в закладці Picture Bullets в розділі «Picture» перемкнемо на опцію «Specify picture:» і натиснемо

---------------------------------- 232 --------------- ---------------------


кнопку «Browse ...». Зі списку каталогу images виберемо файл bullet.gif і натиснемо «ОК >> (рис. 145).


глава 32

гіпертекстові посилання

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

Отже, гіпертекстові посилання (hyperlink) - це фрагменти тексту, картинки, логотипи, ділянки карт, клікнувши по яким, відвідувач сайту може перейти на його іншу сторінку або взагалі на інший сайт.

Існує і приватний спосіб реалізації гіпертекстових посилань: використання точок прив'язки (bookmark). Вони дозволяють вам надавати інформацію, розбиту на частини або логічні області. Такі точки прив'язки найчастіше використовуються тоді, коли інформація, викладена на сторінці, досить об'ємна і розбивати її на кілька сторінок недоцільно.

Така інформація б'ється на кілька логічних областей (частин), біля яких проставляються точки прив'язки. На початку або кінці такого до-


кумента розташовуються посилання на ці точки прив'язки. Ось такий підхід.

Давайте почнемо більш докладне знайомство з гіпертекстовими посиланнями з розміщення на сторінці «Хобі» точок прив'язки - bookmarks.

Цю сторінку ми можемо розбити на дві логічні області:

- Область 1 - Література;

- Область 2 - Музика.

Саме це ми і пишемо в порожній рядку після заголовка сторінки (рис. 146):

література | музика

Тепер проіменуем ці дві області. Для цього встановимо курсор в рядку «Література» (це третя сходинка в нашій таблиці) і в меню «Insert» виберемо опцію «Bookmark». Ми отримаємо вікно Bookmark (рис. 147).


У рядку «Bookmark name:» введемо ім'я області

Liter

і натиснемо кнопку «ОК». Поруч зі словом «Література» з'явиться прапорець:

література

Мал. 148 Прапорець - покажчик іменованої області.

Повторимо те ж саме, встановивши курсор в рядку «Музика». Цю область ми назвемо

Music

Логічні області ми створили і обіменовалі. Створимо посилання на ці області. Для цього використовуємо введений нами текст у другому рядку таблиці.

Встановимо курсор в слові «Література» (можна його виділити) і натиснемо на кнопку «Hyperlink» в панелі інструментів (рис. 149). Можна отримати те ж саме вікно, якщо увійти в меню «Insert» і вибрати опцію «Hyperlink ...».

У цьому вікні ми побачимо перелік файлів. Поточний файл (з яким ми зараз працюємо) виділено і прописаний в рядку «URL».

Оскільки нам потрібно задати Bookmark, ми в розділі «Options» встановлюємо значення параметру «Bookmark», вибираючи із запропонованого списку імен логічних областей ім'я «Liter». І говоримо «ОК». Точно так же створюємо посилання для слова «Музика».

Отже, посилання для переміщення по логічним областям ми створили (рис. 150).

---------------------------------- 236 --------------- ---------------------


Використовуючи ту ж саму кнопку, можна сформувати відносні і зовнішні посилання.

Щоб сформувати відносні посилання, потрібно вибрати ім'я файлу, на який ви хочете послатися. Для цього просто виділіть ім'я потрібного html-файлу в списку. Це ім'я ви побачите в рядку «URL». Параметр «Bookmark» вам встановлювати не потрібно.

Давайте сформуємо посилання на сторінку «Гоб
 бі »на стартовій сторінці. Виділимо слово «Гоб
 бі »і натиснемо кнопку« Hyperlink ». У появівшем-
 ---------------------------------- 237 -------------- ¦ -------------------


ся вікні (рис. 150) виділимо ім'я файлу hobbies.htm і натиснемо кнопку «ОК». Посилання створена.

Щоб перетворити кнопку на заслання, потрібно виділити кнопку (картинку) і повторити той же набір дій. Якщо ви не хочете, щоб ваша посилання-картинка мала бордюр навколо себе, у властивостях картинки в закладці «Appearance» (рис. 138) вкажіть параметру «Border ...» значення «0».

Якщо вам потрібно сформувати посилання на ваш e-mail, натисніть третю кнопку від рядка «URL» (на цій кнопці зображений конверт, підпис «Make a hyperlink that sends E-mail»). У виниклому віконці вам всього лише потрібно буде ввести адресу вашого e-mail.

Давайте перетворимо фразу «E-mail» на заслання. У вікні Create Hyperlink натиснемо на кнопку «Make a hyperlink that sends E-mail». У виниклому віконці (рис. 151) введемо наш e-mail. Велике прохання - коли будете створювати свою сторінку, не використовуйте мій e-mail. Використовуйте свій!

Також ви можете сформувати посилання на ще не створений файл - в цьому вам допоможе четверта кнопка (на ній зображений лист з відігнутим куточком, підпис «Create a page and link to the new page»). Вона завантажить вікно New з шаблонами гіпертекстових документів.

Щоб підключити якийсь текстовий документ (файл) до вашої сторінці, вам потрібно натиснути на другу кнопку (на ній зображена папка з лінзою, підпис). Після нажанія на цю кнопку, завантажиться вікно Select File, в якому, переміщаючись по дисках і каталогів на вашому комп'ютері, ви вибираєте потрібний вам файл (рис. 152)




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

Краща пошукова система

Виділимо це словосполучення і натиснемо кнопку «Hyperlink». У вікні (рис. 150) в рядку URL після тексту «http: // » введемо:

www.yandex.ru

Про параметрі «Target name» розділу «Options» (рис. 150) ми детально поговоримо в розділі, присвяченому Image Map.

На закуску я розповім трохи про принципи формування посилань.

У будь-якому випадку, будь то текстова посилання, будь то графічна, вам дуже ретельно потрібно вибирати фразу, яку ви зробите посиланням. Якщо ви формуєте посилання по сторінці у вигляді кнопок, то назва такого посилання може складатися з одного слова, рідше двох (але тоді вони повинні утворювати словосполучення, наприклад, «Про мене»). У кнопках ви можете перед текстом розміщувати маленькі картинки - іконки, що пояснюють призначення ваших посилань.

Якщо ви створюєте текстові посилання, то в їх якості ви можете використовувати як одне слово (або словосполучення), так і ціле речення. Однак фрази, що утворюють текст вашого посилання, повинні бути короткими, ємними і влучними. Вони повинні залучати користувача, змушуючи його натиснути на посилання. Немає нічого гіршого, ніж використання в якості посилання фрази «Клацніть тут». побачивши


таку фразу, відвідувач вашої сторінки думає: «А навіщо мені клацати тут? Куди я потраплю? »

Трохи складніше буде підібрати фразу для кнопки - графічний текст змушує писати фрази якомога коротше. А значить, їх потрібно підбирати ще ретельніше. Зате, використовуючи рядок «Text» в закладці General вікна Picture Properties (рис. 137), ви можете написати текст, який роз'яснює, куди веде ця посилання.

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

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

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

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


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

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

Така навігаційна панель може являти собою:

- Графічну карту, продубльовані однойменними текстовими посиланнями, які виводять на ті ж сторінки;

- Текстовий блок, оформлений з використанням таблиці.

Графічна карта може бути вузькою горизонтальною смужкою, вертикальним прямокутником, де посилання розташовані одна під інший, або «шапкою» сайту, поєднуючи в собі логотип сайту, назва і основні посилання.

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


глава 33 додаємо фрейми

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

Але ми розглядали процес створення сторінок без використання фреймів (кадрів).

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

Такий підхід дозволяє зменшити час, що витрачається браузером на перерисовку сторінки. В чому це проявляється? Будь-яка WEB-сторінка, крім статичної області, містить і динамічно оновлювану. Статична область - це блок навігації по сайту (наприклад, навігаційна панель; в нашому прикладі - «шапка» сайту). Динамічно оновлювана частина сторінки - ця область інформації, змінюється від сторінки до сторінки. Таку сторінку можна розбити на два кадри:

- Статистичний, в якому буде знаходитися блок навігації по сайту;

- Динамічно оновлюваний, який складуть ряд сторінок з різною інформацією і різними іменами.

---------------------------------- 243 --------------- ---------------------


 Тим самим, натискаючи на будь-яке посилання в статистичному кадрі, ми будемо лише змінювати вміст динамічно оновлюваного кадру.

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

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

Кращі способи застосування фреймів:

- Створення статистичного блоку навігації по сайту, розташованого в окремому фреймі. Дуже зручно тим, що відвідувач сайту може звернутися до нього в будь-який момент, особливо коли інформаційні сторінки досить довгі;

- Для роботи з формою, коли в одному кадрі знаходиться форма, а в іншому - результати її заповнення;

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

Давайте тепер познайомимося з фреймовим способом формування сторінок і створимо одну таку сторінку (для прикладу).

---------------------------------- 244 --------------- ---------------------


Але щоб ми могли познайомитися з двома способами включення файлів в фреймової структуру, давайте створимо файл frame_map.htm.

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

Як ви могли помітити, в вікні New (рис. 143), в якому ми вибирали шаблон для створюваної сторінки «Хобі», крім закладки General є ще закладки Frame Pages і Style Sheets. Давайте знову запустимо це віконце і увійдемо в закладку Frame Pages (рис. 153).

FrontPage пропонує багато різних шаблонів сторінок фреймової структури. Для нашого прикладу нас цікавить шаблон «Header», що складається з двох кадрів - верхнього вузького і нижнього.

---------------------------------- 245 --------------- ---------------------


У нижньому кадрі натиснемо на кнопку «New Page», тим самим створимо нову сторінку в кадрі.

Збережемо його як файл frame.htm (Рис. 155). Як ви бачите, при збереженні FrontPage виділяє зберігається область синім кольором. Після того як ми натиснемо кнопку «Save», FrontPage запропонує також зберегти створений нами новий файл. Цей кадр він заллє синім кольором (рис. 156). Ім'я нового файлу буде frame_hob-bies.htm.


Тепер у верхньому кадрі натиснемо на кнопку «Set Initial Page». FrontPage завантажить вікно Create Hyperlink, в якому запропонує вибрати підключається до кадру файл (рис. 157). В якості такого файлу ми вибираємо тільки що створений нами файл frame_map.htm.


Давайте трохи налаштуємо показ фреймів: приховуємо розділову лінію між фреймами (бордюр, border) і змінимо висоту верхнього кадру. Тому активуємо верхній кадр (достатньо клікнути по ньому мишкою). Активний кадр в редакторі показується синьою рамкою. У контекстному меню виберемо опцію «Frame Properties ...» (рис. 158). Змінимо наступні параметри:

- Параметр «Name» - дамо йому значення «title-map»;

- Параметр «Height» розділу «Margins» встановимо в значення 65 pixel;

- Включимо опцію «Resizable in Browser».


Ширину і висоту кадрів FrontPage за умовчанням пропонує виставляти в пікселях (pixel). Однак можна використовувати і інші значення -

- Percent - у відсотках від поточної ширини (висоти) вікна браузера;

- Relative - це значення вказується в тому кадрі фрейму, у якого розмір не зафіксовано.

Натиснемо на кнопку «Frame Page ...». У вікні (рис. 159) відключимо опцію «Show Borders». Більше ми не будемо бачити бордюр між фреймами.


Завантажимо вікно настройки параметрів і для нижнього кадру фрейма (рис. 158) і змінимо значення параметра «Name» в «text». Це нам ще стане в нагоді в подальшому.

Тепер оформимо нижній кадр: перетворимо його в сторінку «Хобі», у якій немає «шапки».

Тепер, якщо ви в вікні Normal переведіть закладки на Preview, ви побачите наступне:

---- 250




глава 34 Створення Image Map

Ми використовували в якості «шапки» сайту заголовок з поєднаною з ним навігаційною панеллю. Тепер треба перетворити його з просто картинки в засіб навігації по сайту. Оскільки він поєднує в собі найменування всіх розділів персональної сторінки, ми не можемо виділити картинку і натиснути кнопку «Hyperlink». Адже тоді наша навігаційна панель буде посилатися тільки на один файл, а вона повинна посилатися на кілька.

Для здійснення цього потрібно перетворити її в карту посилань - Image Map (його ще називають активним зображенням, сенсорної картою).

Карта посилань - це таке зображення, яке відчуває клацання мишки. Карта посилань може містити будь-яке число гіпертекстових посилань, пов'язаних з областю картинки. Тим самим на мапі посилань створюється активна область (зона), яка сприймає клік мишки, і цей клік мишки нічим не відрізняється від кліка по будь-якому посиланню.

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


Існує два типи карти посилань:

- Оброблювані на стороні клієнта (тобто у відвідувача вашого сайту);

- Оброблювані на стороні сервера.

Ми познайомимося з картою посилань, оброблюваних на стороні клієнта. Саме такі карти користуються найбільшою популярністю серед розробників WEB-сайтів. Саме тому, що:

- Вони більш доброзичливі до браузеру відвідувача;

- Можуть підказувати йому місце розташування посилань на карті;

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

- Зменшується навантаження на WEB-сервер, оскільки сервера не потрібно обробляти одержувані з карти посилань запити;

- Не потрібно обходити адміністратора сервера, щоб розмістити свій сценарій обробки запитів з карти посилань в спеціалізованому каталозі (що необхідно для карт, оброблюваних на стороні сервера).

Для створення карти посилань нам потрібна картинка. Вона вже є - це «шапка» сайту.

Для створення карт посилань у FrontPage існує панель інструментів Picture:


Ми використовуємо маску «Rectangular Hotspot».

Завантажимо в режимі «Normal» файл frame.htm. На панелі інструментів «Picture» виділимо маску «Rectangular Hotspot». За допомогою курсору миші обведемо текст «Хобі» верхнього кадру фрейма (поки не доведете прямокутну область до логічного кінця, ліву кнопку на мишці краще не відпускати). Після того як ми сформуємо навколо графічного тексту прямокутну область, FrontPage запропонує у вікні Create Hyperlink вибрати ім'я файлу, на яке дана область буде посилатися (рис. 162).

Оскільки ми працюємо з фреймової структурою, ми повинні вказати ім'я кадру фрейма, в якому повинен відмалювати гіпертекстовий документ (рис. 163). У розділі «Optional» того ж вікна, в рядку «Target Name» натиснемо на кнопку «Change Target Frame». Редактор запропонує в ок-, що не Target Frame вибрати кадр. У розділі «Current frames page» кликнемо по нижньому кадру фрейма. FrontPage в рядку «Target setting» пропише ім'я кадру - «text».




У розділі «Common targets» ви можете побачити ряд можливих варіантів отрісовок:

- Page Default - в кадрі, який оголошений сторінкою за замовчуванням. Якщо ви включите опцію «Set as page default» (рис. 163), то кадр на ім'я «text» буде оголошений сторінкою за замовчуванням;

- Same Frame - в тому ж кадрі, в якому знаходиться активується посилання;

- Whole Page - сторінка, яка викликається за посиланням, буде отрісовиваться у всьому вікні браузера. Якщо вона викликається з сторінки фреймової структури, то таке подання сторінки не збережеться;

- New Window - намалювати сторінку, викликану посиланням, в новому вікні. Цей варіант від-хизування може використовуватися на будь-які посилання, навіть у вікні не фреймової структури;

- Parent Frame - сторінка відкривається в кадрі батьківського вікна. Під батьківським вікном розуміють кадр фрейма, чиє опис слід безпосередньо перед описом фрейма, в якому знаходиться активується посилання. Якщо такого кадру немає, то цей варіант відтворення стає тотожним варіанту відтворення Same Frame.

Таким чином налаштовується карта посилань у FrontPage.

---------------------------------- 256 --------------- --------------------


глава 35 Впроваджуємо таблиці стилів

Таблиці стилів (CSS - Cascading Style Sheets) були запропоновані W3C ще при розробці специфікації HTML 3.0. Однак фактично вони стали доступні в четверте версіях Internet Explorer і Netscape Navigator.

В основу таблиць стилів була покладена проста ідея: HTML дозволяє описувати мову, використовуючи різні теги. Ці теги (більшу частину) можна налаштовувати. Наприклад, тег Р описує абзац. Для нього в листах стилів можна задати:

- Шрифт;

- Його розмір;

- Стиль (напис - звичайний, курсив, напівжирний, напівжирний курсив);

- Ефекти (підкреслений, перекреслений, без ефектів);

- Колір;

- Вирівнювання (ліворуч, праворуч, по центру).

Те ж саме можна зробити для заголовків (HI, Н2 ... Н6), для гіпертекстових посилань А і багатьох інших елементів.

---------------------------------- 257 --------------- --------------------


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

Завдяки CSS ви можете створити один файл, в якому досить описати стилі тегів так, як ви хотіли б бачити це все на своїх сторінках, а потім лише застосувати його до всіх сторінок WEB-публікації. Будь-яка зміна в цьому CSS-файлі викличе миттєве зміна візуального вигляду всіх ваших сторінок.

Давайте створимо свої таблиці стилів тими способами, що пропонує FrontPage.

Найпростіше - це включити CSS в кожен файл. Для цього в меню «Format» треба вибрати опцію «Style» (рис. 164).


У ньому ви можете вибрати будь-яке ім'я стилю (Р - це текст абзацу, А - посилання, В і STRONG - це напівжирний, I і ЕМ - це курсив, HI, H2 і так далі - це заголовки) і, натиснувши на кнопку «Modify », перейти в вікно Modify Style. Натиснувши кнопку «Format» ви зможете налаштувати:

- Pont - параметри шрифту (з цим вікном ми познайомилися);

- Paragraph - параметри абзацу (відступи, вирівнювання, червона лінія);

- Border - обтікання тексту рамкою або бордюри таблиці;

- Numbering - параметри списків (маркованих, нумерованих);

- Position - вирівнювання малюнка щодо тексту.

Ми налаштуємо параметри шрифту для наступних імен пропонованих стилів: Р, A, HI, H2 на сторінці «Хобі» (Hobbies.htm). Причому наші настройки залишаться тими ж, що ми застосовували до цього при налаштуванні текстури і основних кольорів (вікно Page Properties закладка Background) і при зміні параметрів шрифтів для заголовка «Мої захоплення» і підзаголовків «Література» і «Музика» на сторінці «Хобі» .

Тепер можна в налаштуваннях вікна Page-Properties в закладці Background до установок «Colors» встановити кольори за умовчанням (значення «Automatic»).

Виділимо словосполучення «Мої захоплення» і в панелі інструментів в списку «Style» виберемо стиль «Heading 1». Виділимо слово «Література» і


в списку «Style» виберемо стиль «Heading 2». Виділимо перший абзац тексту і натиснемо на кнопку «Align Left» в панелі інструментів. І так далі.

Також таблицю стилів, яка використовується на сторінках сайту, можна зберігати в окремому файлі.

Я знову повертаюся до вікна New, але вже закладці Style Sheets (рис. 165).

У цьому вікні FrontPage пропонує порожній бланк і багато своїх вже сформованих таблиць стилів. Ми виберемо порожній бланк - «Normal Style Sheet».

У редакторі з'явиться нове вікно, в центрі якого буде розташовуватися менюшка «Style»:


Досить натиснути на опцію «Style ...», як ми побачимо звичну нам вікно Style (рис. 164). Давайте в ньому тим же іменах стилів точно так же (як і в попередньому варіанті створення CSS) змінимо параметри шрифту.

Після натискання кнопки «ОК» в цьому вікні порожня сторінка заповниться текстом, який і являє собою код CSS-файлу (рис. 168)


Збережемо цей файл, вибравши для цього в меню «File» опцію «Save as ...» (рис. 169). Файл наш ми назвемо «main». Розширення CSS редактор пропонує сам.

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

Розмістимо посилання на наш CSS-файл в сторінці index.htm. Для цього в меню «Format» виберемо опцію «Style Sheet Links ...».

У віконці, що з'явилося переконаємося, що обрана опція «Selected page (s)» і натиснемо на кнопку «Add ...». Редактор завантажить вікно Select Hyperlink, в якому ми вибираємо файл main.ess (рис. 170).

Після цього у вікні Link Style Sheet ми натискаємо на кнопку «ОК».


Щоб побачити, що сторінка залишилася без змін, в настройках вікна Page Properties в закладці Background до установок «Colors» встановити кольори за умовчанням.



Попередня   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   Наступна

ICQ - кращий друг сетевика | AOL Instant Messenger | MSN Messenger Service | Розміщення реклами на сторінках свого сайту | Перегляд реклами | Участь в маркетингових опитуваннях | Російське Інтернет-агентство зайнятості | категорії сайтів | Рекламні та пошукові сервери | Персональні сторінки |

© um.co.ua - учбові матеріали та реферати