Виробниче навчання 03.03.15

Створення Web-сторінок та Web-вузла. Форматування Web-сторінок.

Створення нового  Web-вузла

Для створення Web-узла скористаємося шаблоном Односторінковий веб-вузол (One Page Web). Цей шаблон зручний для вивчення можливостей, які надає програма FrontPage розробникові. Даний шаблон формує структуру Web-узла і додає в неї однієї порожню сторінку, на якій надалі розміщуватиметься інформація. При цьому до сторінки не пред'являється яких-небудь спеціальних вимог по оформленню або форматуванню. Все, що нам буде потрібно, ми розмістимо на цій сторінці самостійно.

Для створення односторінкового Web-узла виконаєте наступні дії:

1. У меню Файл (File) виберіть команду Створити (New), а потім в тому, що відкрився підміню - опцію Сторінка або веб- вузол (Page or Web). В результаті в головному вікні програми FrontPage з'являється панель Створення веб- сторінки або вузла (New Page or Web).

2. Виберіть на панелі значення Шаблони веб-вузлів (Web Site Templates). Відкривається діалогове вікно Шаблони веб- вузлів.

3. У полі Вкажіть розташування нового веб-вузла (Specify the location of the new web) діалогового вікна Шаблони веб- вузлів введіть місце розташування і ім'я створюваного Web-узла. Наприклад, привласнимо йому ім'я My Test_Web.

4. Двічі клацніть на значку Односторінковий веб- вузол (One Page Web). Починається процес створення шаблону. Через деякий час в головному вікні програми FrontPage відкривається створений Web-узел (мал. 12.1), який ви можете модифікувати. Панель Список тек (Folder List) відображує його структуру, що складається з двох тек _private і images і сторінки index.htm.

Мал. 12.1. Панель Список тік відображує структуру Web- вузла, створеного з використанням шаблону Односторінковій веб- вузол

Зауваження

За умовчанням програма FrontPage має на увазі, що перша розміщена в Web-узле сторінка буде домашньою. У структурі тек вона збережена під ім'ям index.htm.

Двічі клацніть мишею на панелі Список тек (Folder List) на імені файлу index.htm. Дана порожня Web-страница відкриється в робочої області програми FrontPage. Можна приступати до розміщення в ній об'єктів.

Розміщення тексту на сторінці

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

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

Шрифти

Коли говорять про шрифт, використовуваний в оформленні Web- сторінки, то мають на увазі наступне:

• Тип шрифту

• Розмір

• Зображення

• Колір

• Спеціальні ефекти

• Виберіть в меню Формат (Format) команду Шрифт (Font)

• Клацніть правою кнопкою миші на робочої області сторінки і в контекстному меню, що з'явилося на екрані, виберіть команду Шрифт (Font)

• Натискуйте комбінацію клавіш <Alt>+<Enter>

Список	Призначення
Шрифт (Font)	Шрифти, встановлені на комп'ютері
Зображення (Font Style)	Зображення шрифтів. Список містить наступні значення:  Звичайний (Regular) - використовується для основного тексту Курсив (Italic) - призначений для виділення слів, заголовків  Напівжирний (Bold) - використовується для виділення слів, заголовків Напівжірній курсив (Bold Italic) - комбінований стиль, що поєднує обоє попередніх
Розмір (Size)		Розмір шрифту (від 8 до 36 пт)
Колір (Color)		Кольори для оформлення тексту

Прапорець	Призначення
підкреслений  (Underline)	Текст підкреслений суцільною лінією
закреслений (Strikethrough)	Текст перекреслений суцільною лінією
надчеркнутый  (Overline)	Над текстом розташована лінія
мерехтіння  (Blink)	Мерехтливий текст
надрядковий(Superscript)	Текст розташовується по верхньому індексу
підрядковий  (Subscript)	Текст розташовується по нижньому індексу
малі прописні (Small Caps)	Текст відображується прописними буквами, що мають розмір рядкових
всі прописні  (All caps)	Текст відображується лише прописними буквами
перші прописні (Capitalize)	Всі слова тексту починаються з прописної букви
прихований  (Hidden)	Текст не з'являється при друці
жирний  (Strong)	Текст має напівжирне зображення
курсив  (Emphasis)	Текст відображується з ефектом виразності (зазвичай шрифтом, що має зображення курсив)
приклад  (Sample)	Текст відображується шрифтом, що нагадує шрифт машинки, що пише (зазвичай моноширинний шрифт)
визначення  (Definition)	Текст відображується курсивом, використовуваним для виділення термінів
заслання (Citation)	Текст відображується курсивом, використовуваним для виділення цитат
змінна (Variable)	Текст відображується курсивом, використовуваним для виділення змінних
клавіатура  (Keyboard)	Відображує текст, що вводиться користувачем
код (Code)	Текст відображується моноширинним шрифтом, використовуваним для написання код програм

Правка (Edit).

Опція	Призначення
Список, що розкриваєтьсяІнтервал (Spacing)	Встановлює відстань між символами і містить значення:  звичайний  розріджений ущільнений

Список, що розкривається  Зсув

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

у 1 пт.

Існує безліч шрифтів, призначених для самих різних цілей. Для шкірного конкретного випадку прийнято використовувати символи шрифтів певного розміру: для основного тексту зазвичай вибирають розмір 9 або 10 пт, для заголовків - 12 pt і більше, для виносок і приміток - символи менших розмірів.

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

Основні параметри шрифту (тип, розмір і зображення) можна задати за допомогою діалогового вікна Шрифт (Font) і кнопок на панелі інструментів Форматування (Formatting).

Використання діалогового вікна Шрифт

Якнайповніший набір інструментів для роботи з шрифтами надає діалогове вікно Шрифт (Font). У цьому вікні можна вибрати необхідного типа шрифту і встановити всі його параметри, доступні в програмі FrontPage. Для відкриття діалогового вікна Шрифт (мал. 12.2) виконаєте одну з наступних дій:

Мал. 12.2. Вкладка Шрифт однойменного діалогового вікна

Діалогове вікно містить вкладки Шрифт (Font) і Міжзнаковий інтервал (Character Spacing). Призначення списків вкладки Шрифт наведено в таблиці. 12.1.

Таблиця 12.1. Призначення списків вкладки Шрифт

Область Видозміна (Effects) вкладки Шрифт містить прапорці, керівники різними ефектами відображення шрифтів. Призначення даних прапорців представлене в таблиці. 12.2.

Таблиця 12.2. Призначення прапорців вкладки Шрифт

Встановлені вами параметри шрифту відображуються в розділі Зразок (Preview) діалогового вікна Шрифт. Таким чином, ви можете підбирати параметри і переглядати результат, не покидаючи діалогового вікна.

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

Аби відформатувати символи з використанням діалогового вікна Шрифт:

1. Виділите на Web-странице фрагмент тексту, в якому хочете змінити форматування символів.

2. Виберіть в меню Формат (Format) команду Шрифт.

3. Із списку Шрифт виберіть необхідний шрифт.

4. Використовуючи список Зображення (Font Style), вкажіть зображення символів шрифту.

5. Виберіть із запропонованих варіантів списку Розмір (Size) розмір шрифту, що владнує вас.

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

7. Натискуйте кнопку ОК. Діалогове вікно закриється.

 Рада

Для застосування форматування відразу до всього тексту Web-страницы виділите текст за допомогою команди Виділити все (Select All) з меню 

Установка інтервалів і зсуву

Друга вкладка діалогового вікна Шрифт (Font) називається Міжзнаковий інтервал (Character Spacing) (мал. 12.3). За допомогою параметрів, розташованих на цій вкладці, можна встановити міжсимвольні інтервали і розмір зсуву символів відносно базової лінії вгору або вниз.

Призначення параметрів вкладки Міжзнаковий інтервал описано в таблиці. 12.3.

Таблиця 12.3. Параметри вкладки Міжзнаковий інтервал Опція Прізначення

Мал. 12.3. Вкладка Міжзнаковий інтервал діалогового вікна Шрифт

Приклад використання деяких параметрів вкладки Міжзнаковий інтервал представлений на мал. 12.4.

Мал. 12.4. Використання параметрів вкладки Міжзнаковий інтервал

  Список Інтервал (Spacing) задає інтервал між симво лами. Якщо ви хочете використовувати інтервал, встановлений за умовчанням, виберіть звичайний. За допомогою опцій розріджений (Expanded) і ущільнений (Condensed) можна збільшити або зменшити інтервал між всіма символами на величину, що встановлюється лічильником на (By). При виборі будь-якою з цих опцій FrontPage за умовчанням встановлює стандартне значення 

Використання верхнього і нижнього індексів

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

Для установки індексу використовується діалогове вікно Шрифт (Font). У розділі Видозміна (Effects) встановите прапорець надрядковий(Superscript), аби підняти символи, або підрядковий (Subscript) - аби їх опустити.

Установка малих прописних і всіх прописних букв

У розділі Видозміна вкладки Шрифт однойменного діалогового вікна містяться прапорці малі прописні (Small Caps) і всі прописні (All caps). Ці ефекти доцільно використовувати в заголовках.

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

Для форматування декількох фрагментів сторінки не потрібно кожного разу відкривати діалогове вікно Шрифт. Для цього в програмі FrontPage існує панель інструментів Форматування (мал. 12.5). За допомогою кнопок цієї панелі ви можете вибрати типа і розмір шрифту, встановити зображення (напівжирний, курсив, підкреслення), задати колір шрифту або виділити текст кольором, а також використовувати задані стилі.

Мал. 12.5. Панель інструментів Форматування

Три перші елементи на панелі інструментів - списки, що розкриваються Стиль (Style), Шрифт (Font) і Розмір шрифту (Font Size), за допомогою яких ви можете вибрати стиль, типа і розмір шрифту. Кнопки Напівжирний (Bold), Курсив (Italic) і Підкреслений (Underline) дозволяють встановити найбільш часто використовувані зображення. Останні два елементи на панелі, що відносяться до форматування символів, -Виділити (Highlight) і Колір тексту (Font Color). За допомогою цих списків, що розкриваються, ви можете встановити колір фону для виділеного фрагмента і колір шрифту.

Рада

Якщо панель інструментів форматування відсутня на екрані, для її відображення в меню Вигляд (View) головного вікна програми FrontPage виберіть команду Панелі інструментів (Toolbars). Далі в списку панелей інструментів, що відкрився, виберіть Форматування.

Ваші дії з форматування зводяться до виділення необхідного тексту на Web-странице і зміни параметрів шрифту за допомогою відповідних кнопок на панелі інструментів.

Зміна кольору відображення тексту і фону

При оформленні тексту ви можете змінювати колір символів як за допомогою діалогового вікна Шрифт (Font), так і кнопки Колір тексту (Font Color) на панелі форматування. Для установки кольору за допомогою діалогового вікна Шрифт виконаєте наступні дії:

1. Виділите фрагмент тексту, для якого ви передбачаєте змінити колір.

2. Відкрийте діалогове вікно Шрифт.

3. Із списку Колір (Color) виберіть необхідний колір.

4. Натискуйте кнопку ОК для закриття вікна.

Віділення кольором за допомогою панелі інструментів

За допомогою панелі інструментів форматування ви можете не лише поміняти колір шрифту, але і виділити текст, змінивши його фон. Для цього використовуються кнопки Колір тексту (Font Color)  і Виділити (Highlight)  . Обоє ці кнопки відкривають палітри, що дозволяють вибрати потрібний колір з тих, що є.

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

1. Виділите фрагмент тексту, колір шрифту якого ви хочете змінити.

2. Натискуйте стрілку на кнопці Колір тексту (Font Color) і в палітрі, що відкрилася, виберіть потрібний колір.

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

Для зміни кольору фону шрифту виконаєте наступні дії:

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

2. Натискуйте стрілку на кнопці Виділити (Highlight) і в палітрі, що відкрилася, виберіть потрібний колір.