Опис програми microsoft office frontpage. Використання шаблонів і майстрів Microsoft FrontPage Призначення редактора візуального проектування microsoft frontpage

Microsoft Office FrontPage 2003 - унікальна програма, за допомогою якої з легкістю можна створити сайт. Наявність Довідки, безлічі простих, можна сказати стандартних програм, роблять її незамінною помічницею для новачків. Для того, щоб детальніше ознайомитися з можливостями Microsoft Office FrontPage ми розглянемо набір можливих команд.

Щоб виконати оптимізацію HTML-тексту при публікації сторінки, необхідно налаштувати віддалений веб-вузол.

1. У поданні Віддалений веб-вузол на вкладці Веб-вузол натисніть кнопку Оптимізувати опублікований HTML-текст.

2. На вкладці Оптимізація HTML виберіть варіант При публікації оптимізувати код HTML, видаливши наступні елементи.

3. Виберіть потрібні параметри.

Примітки

· Програма Microsoft FrontPage не застосовує ці параметри до веб-сторінок, раніше опублікованими на веб-сайті. Щоб застосувати ці параметри на сторінку, опублікуйте її на веб-сайті.

· Оптимізацію HTML-тексту можна виконати при публікації з локального веб-вузла на віддалений, але не навпаки.

· Якщо встановлений прапорець Усі примітки HTML або Примітки в динамічних веб-сторінках, при оптимізації HTML-тексту програма FrontPage видаляє весь код динамічних веб-шаблонів для цієї сторінки. Тому весь вміст сторінки, пов'язане з динамічним веб-шаблоном, що не буде більше відображатися для відвідувачів вузла. За допомогою веб-компонентів в програмі Microsoft FrontPage в веб-вузол можна включити широкий спектр функціональних можливостей, починаючи від лічильників відвідувань, які реєструють число відвідувачів на сторінці, до фотоколекцій, що представляють собою набори графічних зображень. Існує два види веб-компонентів: компоненти часу розробки і компоненти часу перегляду. Компоненти часу розробки є засобами створення і розробки веб-сторінок. Вони доступні в програмі FrontPage. При додаванні компонента часу розробки в веб-вузол - наприклад, фотоколекції або панелі посилань - не потрібно встановлювати додаткове програмне забезпечення або серверні технології на веб-сервері, на якому розміщений на веб-сайті. Компоненти часу перегляду доступні на веб-вузлах, розміщених на веб-серверах, на яких запущені серверні розширення Microsoft FrontPage Server, служби SharePoint Team Services (Microsoft) або Microsoft Windows SharePoint Services.

· Гіперпосилання - це зв'язок між веб-сторінками або файлами. При натисканні гіперпосилання відвідувачем вузла вказаний в ній об'єкт відображається в браузері, відкривається або запускається в залежності від типу цього об'єкта. Наприклад, при натисканні гіперпосилання на сторінку ця сторінка відображається в браузері, а при натисканні гіперпосилання на avi-файл цей файл відкривається в програвачі Windows. Способи застосування гіперпосилань:

Перехід до файлу або веб-сторінці в локальній мережі, в інтрамережі або в Інтернеті

Перехід до файлу або веб-сторінці, які будуть створені в майбутньому

Відправлення повідомлення по електронній пошті

Запуск передачі файлу, наприклад завантаження файлу або відправки файлу по протоколу FTP

Перехід до закладці

Створивши гіперпосилання, перейдіть по ній до об'єкта призначення, щоб переконатися, що вона веде до потрібної сторінки, програмою, файлу, адресу електронної пошти. При наведенні покажчика миші на текст або малюнок, які містять гіперпосилання, він набуває вигляду руки з піднятим вказівним пальцем, що означає, що цей елемент можна клацнути. У програмі Microsoft FrontPage перехід за гіперпосиланнями і їх відображення виконується по-різному в залежності від об'єкта призначення. При створенні гіперпосилання її призначення кодується в форматі URL (Uniform Resource Locator - універсальний покажчик ресурсів). Адреса URL задає протокол (наприклад, HTTP або FTP) і містить ім'я веб-сервера або місця в мережі, а також шлях і ім'я файлу, як показано в таблиці.

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

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

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

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

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

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

Перевірка спеціальних можливостей: в Microsoft Ресурси Office FrontPage 2003 представлено новий засіб перевірки спеціальних можливостей на веб-сторінках. Перевірка спеціальних можливостей дозволяє виявити невідповідність певних можливостей методичних рекомендацій по спеціальним можливостям для веб-вмісту (Web Content Accessibility Guidelines, WCAG) WWW-консорціуму (W3C) або вимогам статті 508 закону США про реабілітацію (Section 508 of the U.S. Rehabilitation Act). WCAG закладає основи створення веб-сторінок зі спеціальними можливостями для людей з порушеннями рухливості, зору та слуху. Стаття 508 встановлює стандарти уряду США для спеціальних можливостей широкого спектра інформаційних джерел і технологій.

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

Управління та робота з веб-сторінками - F8

Запуск засобу перевірки доступності - CTRL + N

Створення нової веб-сторінки - CTRL + O

Відкриття веб-сторінки - CTRL + F4

Закриття веб-сторінки - CTRL + S

Збереження веб-сторінки - CTRL + P

Друк веб-сторінки - F5

Оновлення веб-сторінки; оновлення списку папок - CTRL + TAB

Перехід між відкритими веб-сторінками - CTRL + SHIFT + B

Перегляд веб-сторінки в браузері - ALT + F4

Завершення роботи Microsoft FrontPage - CTRL + SHIFT + 8

Відображення недрукованих знаків - CTRL + /

Показ тегу HTML в режимі конструктора - CTRL + F

Пошук тексту або коду HTML на веб-сторінці - CTRL + H

Заміна тексту або коду HTML на веб-сторінці - F7

Перевірка орфографії на веб-сторінці - SHIFT + F7

Пошук слова в довіднику - ESC

Скасування дії - CTRL + Z або ALT + ПРОБІЛ

Скасування останньої дії - CTRL + Y або SHIFT + ALT + ПРОБІЛ

Повернення або повторення дії - DEL

Видалення веб-сторінки або папки зі списку папок або будь-якого діалогового вікна - ПРОБІЛ

Доступ і використання уявлень - F12

Попередній перегляд поточної сторінки в браузері CTRL + PAGE DOWN або CTRL + PAGE UP

Переміщення між уявленнями Код, Конструктор, З поділом і Перегляд - ALT + PAGE DOWN або ALT + PAGE UP

Переміщення між областями Код і Конструктор в поданні З поділом - ALT + F1

Показ або приховування списку папок - Кнопка зі стрілкою ВГОРУ

Перехід по вузлах гіперпосилань в поданні Гіперпосилання - зі стрілкою вгору, вниз, вліво або вправо

Розгортання поточного вузла і перехід направо в поданні Гіперпосилання - SHIFT + СТРІЛКА ВЛІВО

Робота із засобами кодування

Швидкий редактор тегів - CTRL + F2

Вставка тимчасової закладки - F2

Наступна тимчасова закладка - SHIFT + F2

Попередня тимчасова закладка - CTRL + G

Перехід до рядка - CTRL + L

Автозавершення - CTRL + ENTER

Вставка фрагментів коду - CTRL +\u003e

Вставка закриває тега - CTRL +<

Вставка відкриваючого тега - CTRL + /

Вставка приміток HTML - CTRL + ПРОБІЛ

Форматування тексту і параграфів - CTRL + SHIFT + F

Зміна шрифту - CTRL + SHIFT + P

Зміна розміру шрифту - CTRL + B

Застосування напівжирного форматування - CTRL + U

Застосування підкреслення - CTRL + I

Застосування похилого форматування - SHIFT + TAB

Використання піпетки - CTRL + знак «плюс»

застосування надрядкового форматування - CTRL + знак «мінус»

застосування підрядкового форматування - CTRL + SHIFT + C

Копіювання форматування - CTRL + SHIFT + V

Вставка форматування - CTRL + SHIFT + Z або CTRL + ПРОБІЛ

Видалення форматування вручну - CTRL + E

Вирівнювання параграфа по центру - CTRL + L

Вирівнювання параграфа по лівому краю - CTRL + R

Вирівнювання параграфа по правому краю - CTRL + M

Завдання лівого відступу для абзацу - CTRL + SHIFT + M

Завдання правого відступу для абзацу - CTRL + SHIFT + S

застосування стилю - CTRL + SHIFT + N

Застосування стилю «Звичайний» - CTRL + ALT + 1

Застосування стилю «Заголовок 1» - CTRL + ALT + 2

Застосування стилю «Заголовок 2» - CTRL + ALT + 3

Застосування стилю «Заголовок 3» - CTRL + ALT + 4

Застосування стилю «Заголовок 4» - CTRL + ALT + 5

Застосування стилю «Заголовок 5» - CTRL + ALT + 6

Застосування стилю «Заголовок 6» - CTRL + SHIFT + L

Редагування і переміщення тексту і малюнків - BACKSPACE

Видалення одного символу зліва - DEL

Видалення одного символу праворуч - CTRL + BACKSPACE

Видалення одного слова зліва - CTRL + DEL

Видалення одного слова праворуч - CTRL + C або CTRL + INS

Копіювання тексту або малюнків - CTRL + X або SHIFT + DEL

Вирізання виділеного тексту в буфер обміну Microsoft Office - CTRL + V або SHIFT + INS

Вставка вмісту буфера обміну - SHIFT + ENTER

Вставка розриву рядка - CTRL + SHIFT + ПРОБІЛ

Виділення тексту і малюнків - SHIFT + СТРІЛКА ВПРАВО

Виділення одного символу праворуч - SHIFT + СТРІЛКА ВЛІВО

Виділення одного символу зліва - CTRL + SHIFT + СТРІЛКА ВПРАВО

Виділення слова до кінця - CTRL + SHIFT + СТРІЛКА ВЛІВО

Виділення рядка до кінця - SHIFT + HOME

Виділення рядка з початку - SHIFT + СТРІЛКА ВГОРУ

Виділення одного рядка вгорі - SHIFT + СТРІЛКА ВНИЗ

Виділення одного рядка знизу - CTRL + SHIFT + СТРІЛКА ВНИЗ

Виділення параграфа до кінця - CTRL + SHIFT + СТРІЛКА ВГОРУ

Виділення одного екрану знизу - SHIFT + PAGE UP

Виділення одного екрану зверху - CTRL + A

Виділення всієї сторінки - ALT + ENTER

Вставка таблиці - TAB

Виділення всіх осередків рядка при знаходженні курсору в осередку.

створення авто- ескізу виділеного малюнка - CTRL + K

Доступ і робота з областю завдань Довідка і вікном довідка - SHIFT + CTRL + ALT + T

Вставка таблиці - TAB

Виділення вмісту наступної комірки таблиці - SHIFT + TAB

Виділення стовпця при знаходженні курсору у верхній або нижній його осередку - CTRL + T

створення авто- ескізу виділеного малюнка - CTRL + K

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

Наприклад, якщо в формі є два перемикача: «Так» і «Ні», і відвідувач вузла намагається відправити форму, не встановивши один з них, з'явиться повідомлення. Можна вимагати, щоб відвідувач вузла вибирав елемент в списку, вказати мінімальне і максимальне дозволене число елементів і заборонити вибір першого елемента, якщо це інструкція, така як «Виберіть елемент». Після установки правил введення даних слід вирішити, як результати повинні оброблятися формою. Після відправки форми відвідувачем вузла необхідно зібрати введені дані - результати форми, можна їх переглянути, відобразити відвідувачеві вузла або певним чином обробити.

Коли відвідувач вузла відправляє форму в браузері, значення всіх її полів, укладені

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

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

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

Корпорація Майкрософт, творець даної програми, підтверджує свою прихильність політиці посилення безпеки щодо анкетних даних користувачів. Для цього використовуються різноманітні технології та процедури захисту особистих відомостей від несанкціонованого доступу, використання і розголошення. Корпорація Майкрософт має право на свій розсуд поновлювати дійсну заяву про конфіденційність. При кожному такому оновленні змінюється дата поновлення у верхній частині заяви. Оновлене заяву про конфіденційність буде включено в черговий пакет оновлень (SP) для програми Microsoft Ресурси Office FrontPage 2003. Продовження використання програми Microsoft Ресурси Office FrontPage 2003 означає згоду користувача з даною заявою про конфіденційність і всіма її оновленнями. Корпорація Майкрософт з вдячністю прийме будь-які зауваження щодо цієї заяви про конфіденційність.

Microsoft FrontPage - програма являє собою редактор, що дозволяє використовувати верстку на мові HTML. ПО працює за принципом "Що робите, то і отримуєте". В основі движка утиліти включена технологія, яка використовується також у відомому браузері IE. Розробник відзначає, що в разі роботи з оглядачами, в яких застосовуються сторонні движки, відображення буде виглядати інакше.

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

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

Завантажити безкоштовно повну російську версію Microsoft FrontPage з офіційного сайту без реєстрації і смс.

Системні вимоги

• Підтримувані ОС: Windows 7, 10, 8, 8.1, Vista, XP
• Розрядність: 32 bit, 64 bit, x86

1. Інтерфейс FP

2. Створення нової Web-сторінки

3. Властивості Web-сторінки

Web- дизайнера.

Зазвичай шпалери мають формати

bmp, gif, jpg , Png.

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

Вважається, що фон має прийнятні розміри, якщо обсяг малюнка не перевищує 1-5 кілобайт (К). Краще, якщо він менше кілобайт. Для порівняння скажемо, що обсяг самої Web-сторінки зазвичай не перевищує 10-20 К. Лише сторінки з великою кількістю тексту мають великі розміри. Причина в тому, що Web-сторінка - це програма (інструкція) про те як і що розміщувати на екрані браузера користувача. Наприклад, якщо в такому-то місці екрану потрібно помістити малюнок розміром 150 К, то в Web-сторінці інструкція на цей рахунок може займати всього 50 байт, т. Е. В 3000 разів менше самого малюнка, який передається в комп'ютер переглядає окремо від Web -сторінки. Оскільки кількість таких інструкцій невелика, то і розмір самої сторінки також порівняно невеликий

на закладці

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

на закладці додатково можна встановити відступи сторінки від лівого верхнього кута вікна перегляду в браузері. За замовчуванням встановлено відступи по 8 пікселів.

на закладці

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

4. Використання таблиць

Таблиці є, мабуть, найефективнішим і незамінним засобом розмітки Web-сторінок. Якщо без фону можна цілком обійтися, то без таблиці це зробити практично неможливо.

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

вставка таблиці

Для того щоб вставити таблицю на сторінку потрібно виконати команду меню

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

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

властивість

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

Якщо необхідно встановити стильову і фонову розмітку таблиці, то це можна зробити в цьому ж вікні.

Після закінчення розмітки таблиці потрібно натиснути кнопку ОК.

Розмітка елементів таблиці

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

FP. Для виділення мишею потрібно встановити курсор миші на якусь клітинку, натиснути ліву кнопку миші і, утримуючи клавішу плавно провести нею по осередках. Щоб виділити клавіатурою потрібно встановити клавіатурний курсор в осередок, натиснути клавішу Shift і, утримуючи клавішу натискати потрібні клавіші руху клавіатурного курсора (вгору, вниз, вліво, вправо) до тих пір, поки бажана область вічок не буде виділена. Можна виділяти окремий стовпець або рядок, а також всю таблицю.

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

Якщо необхідно розбитиодну або кілька осередків на кілька рядків або стовпців, потрібно їх виділити (при розбитті одного осередку виділення не потрібно), виконати команду розбити осередки. У вікні розбивки потрібно вказати як виробляти розбивку - на стовпці або на рядки. Потім слід вказати число стовпців або рядків. Це вікно показано на рис. 9.

Тут можна встановити положення її вмісту по горизонталі або по вертикалі. Для цього слід вибрати бажане горизонтальне положення (по центру, зліва, справа) або вертикальне положення (Вгорі, по середині, в самому низу, щодо осі). На рис. 10 вертикальне положення осередку - зверху (При розміщення внутрішні елементи будуть притиснуті до верхнього краю комірки), горизонтальне - по центру (Вміст буде центрироваться).

ожно встановити ширину висоту комірки в пікселах або відсотках.

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

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

5. Вставка і форматування тексту

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

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

Відмінність від редактора Word полягає лише в тому, що при натисканні клавішіEnter (З метою вставки нового абзацу) між абзацами утворюється занадто великий інтервал. Якщо потрібно щоб інтервал між абзацами був таким же, як між рядками одного абзацу, слід натиснути клавішуShift і, не відпускаючи її, клавішуEnter.

6. Вставка гіперпосилань

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

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

Shift. Якщо гіперпосиланням буде малюнок, то для виділення досить просто клацнути по ньому., Вид якого показаний на рис. 12.

Якщо гіперпосиланням повинен стати покажчик на іншу сторінку, яка знаходиться на диску Вашого комп'ютера, то потрібно клацнути у вікні рис. 12 по кнопці з зображенням папки і вибрати на диску Web-сторінку (зазвичай це файл з розширенням htmlабо

htm ). При цьому в рядку адреси з'явиться відносний адреса файлу з Web-сторінкою. Відносною адресою сторінки, яка знаходиться в тій же папці, що і створювана сторінка, є просто ім'я файлу, наприклад "photo2.htm". Якщо посилання вказує на файл за межами цієї папки, то гіперпосилання може прийняти вид рядка "../../ HomePage.htm", т. Е. Посилання на сторінку HomePage.htm в тому ж комп'ютері, але в іншій папці, яка знаходиться на два рівні вище поточної папки. Відносні адреси дуже зручні при створенні групи Web-сторінок, які знаходяться на одному сервері але в різних папках і пов'язані гіперпосиланнями. Після підготовки сторінок на звичайному комп'ютері можна відправити їх на Web-сервер, не побоюючись, що буде порушений зв'язок між сторінками і гіперпосиланнями, т. К. На сервері відносна структура їх розміщення залишиться колишньою і, отже, гіперпосилання будуть "працювати".

Для створення абсолютного

адреси слід ввести повну адресу сторінки. Наприклад, якщо необхідно створити гіперпосилання на адресу сайту Московського державного університету, то в рядку URL потрібно внести текст доменного імені http://www.msu.ru. Можна внести текст із зазначенням IP-адреси, наприклад http://192.206.228.46.

Для створення такої гіперпосилання слід в рядку адреси внести текст виду mailto: адреса. Наприклад, якщо необхідно щоб після клацання по посиланню був запущений поштовий клієнт для відправки листа за адресою o [Email protected] .ru, То в рядку введення адреси потрібно внести текст mailto:o [Email protected] .ru . Можна також клацнути по кнопці з зображенням конверта і у вікні, внести цю ж адресу без вказівки префікса mailto :.

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

Перед створенням гіперпосилання на закладку, останню необхідно попередньо створити. Для цього потрібно виділити майбутню закладку (фрагмент тексту, малюнок і т. Д.) І виконати команду Вставка / Закладка. У вікні, вид якого показаний на рис. 13, слід в рядку введення внести ім'я закладки і клацнути по кнопці ОК. У наведеному прикладі рис. 13 сторінка вже має одну раніше створену закладку Закладка 1, А у вікні введення підготовлений текст Закладка 2 інший закладки. Далі слід вийти з вікна створення закладки, виділити у вікні створення сторінки елемент гіперпосилання на закладку, кнопкою Закладка (Рис. 12) вибрати зі списку потрібну закладку. Її текст буде поміщений в рядок адреси. Наприклад якщо обрана закладка Закладка 2, То гіперпосилання в рядку адреси набуде вигляду рядки # Закладка 2. Після натискання кнопки ОК гіперпосилання на закладку буде створена.

Програмування вікна відображення

Після клацання по посиланню на Web-сторінку починається її завантаження в браузер. Зазвичай вона завантажується в той же вікно, в якому знаходиться викликає сторінка. Якщо потрібно щоб сторінка завантажилася в нове вікно, слід у вікні рис. 12 клацнути по кнопці праворуч від напису введення вибір рамки. У вікні, слід вибрати рядок нове вікно. Тепер після клацання по такій гіперпосиланням в браузері буде запущено одне вікно і в ньому з'явиться завантажувати вміст.

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

7. Вставка нетекстових елементів

Для вставки нетекстових елементів на сторінку слід використовувати позицію меню вставка. Ця ж операція для частини елементів може бути продубльована з панелей FP.

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

Рис. 14. Основною список меню Insert

Наведемо деякі найбільш часто використовувані нетекстові елементи меню Insert:

• розрив
. Перехід до нового абзацу без спеціального інтервалу (то ж, що Shift + Enter);

Горизонтальний рядок. Вставка горизонтальній лінії;

Символ.

Вставка нестандартного символу, т. Е. Символу, якого немає на клавіатурі;

Дата і час. Стандартний штамп для виведення дати і часу поновлення редагованої сторінки. Розробник може встановити режим виведення тільки дати або дати і часу доби. На вибір пропонується кілька варіантів представлення штампа. Наприклад, "14 лютого 2001 12.02.25". Якщо такий штамп вставлений на сторінку, то це означає, що останній раз вона піддавалася редагування 14 лютого 2001 року в 12 год. 2 хв. 25 сек. за таймером комп'ютера;

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

малюнок

. Вставка малюнка з файлу;

Розглянемо деякі особливості вставки цих елементів.

горизонтальна лінія

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

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

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

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

Малюнок є найважливішим елементом Web-сторінки. Рідко можна знайти сторінку, на якій не було б малюнка. Крім основної ролі - нести зображення, малюнки використовують для стилізації написів, створення різноманітних ліній, рамок, зображення графіків, т. Е. Усюди, де необхідно представити інформацію у вигляді графічного образу.

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

/ Малюнок / З файлу або клацнути по кнопці Вставити малюнок з файлу на панелі стандартна (Рис. 5.2). У вікні слід вибрати на диску файл з малюнком і натиснути кнопку ОК.

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

властивості малюнка. У діалоговому вікні, вид якого показаний на рис. 15, можна виконати розмітку малюнка.

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

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

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

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

формати малюнків

Розрізняють малюнки, виконані в форматі растрової графіки і в форматі векторної графіки.

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

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

CAD.

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

В даний час серед розробників Web-сторінки за допомогою два широко популярних растрових формату - GIF (Graphics Interchange Format - формат обміну графікою), розроблений в 1987 р і вдосконалений в 1989 р фірмою CompuServe, і JPEG, Який отримав скорочена назва групи розробників Joint Picture Experts Group.

В GIF-форматі (файли з розширенням

.gif) Зображення кодується блоковим методом. Після отримання на комп'ютер воно декодується і відтворюється на екрані монітора. GIF-формат дає найменші обсяги пам'яті файлів для малюнків, що мають обмежену кількість кольорів.

Застосування формату GIF дозволяє створювати безліч ефектів, включаючи прозорість

(Transparency). Цей ефект широко використовується, коли малюнок потрібно представити у вигляді, відмінному від прямокутного. У цих випадках частина прямокутного зображення закрашивается спеціальним кольором прозорості, а інша звичайними квітами. Після розміщення на сторінці малюнок в тих пікселах, які зафарбовані кольором прозорості, заміщається пікселями кольору підкладки, а інші пікселі відтворюються звичайним способом, створюючи таким чином ефект прозорості. Тепер один і той же малюнок можна класти на підкладки різних кольорів, не побоюючись, що при розбіжності квітів будуть відтворені небажані прямокутні контури малюнка. Для створення прозорих GIF-малюнків можна використовувати безліч графічних редакторів, наприклад Photo Shop.

Інший ефект полягає в способі відтворення завантажується GIF-малюнка в браузері. Якщо малюнок збережений у форматі interlaced (Чергується), то при передачі на браузер він завантажується з різних частин зображення. При низькій швидкості з'єднання створюється ефект поступового прояви малюнка від розмитого на початку завантаження до чіткого по її закінченні. Переваги малюнків з чергується форматом очевидні, т. К. Часто задовго до закінчення завантаження сторінки з небажаним малюнком користувач може припинити її, заощадивши тим самим на часі, яке йому довелося б витратити, чекаючи в невіданні передачі всього малюнка звичайного формату. Програма FP дозволяє створювати ефект чергування для будь-яких GIF-малюнків.

GIF-малюнки можна використовувати для створення примітивної мультиплікації, яка використовується на Web-сторінках для анімації ( "пожвавлення") її вмісту. Анімаційні ефекти безсумнівно прикрашають сторінку, часто служать засобом залучення уваги до окремих її фрагментів. Зворотним боком є \u200b\u200bпідвищені обсяги файлів, що містять анімовані малюнки. Для створення анімаційних GIF-малюнків можна використовувати багато програм - від простих до дуже складних, що дозволяють створювати в одному файлі цілі мультиплікаційні фільми. Прикладом простої програми анімації є MP Gif Animator (автор В. Фам). Потужною програмою анімації є Ulead GIF Animator Lite (продукт компанії Ulead Systems).

У форматі JPEG (файли з розширенням .jpg, рідше .jpe або jpeg) Переважно зберігати в стислому вигляді багатобарвні малюнки, наприклад фотографії природи, високоякісні зображення багатої кольорової палітри. При збереженні малюнка в графічних редакторах (наприклад, Photo Shop) можна управляти об'ємом файлу і якістю малюнка, які знаходяться в зворотній залежності по відношенню один до одного. Цим властивістю часто користуються розробники Web-сторінок для того, щоб гранично мінімізувати файли з малюнками, кілька втративши в їх якості. Нерідко такі зображення практично не відрізняються візуально, але можуть в 1,5-3 рази відрізнятися за обсягом відповідних файлів.

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

Нещодавно спеціально для Web розроблений новий PNG-формат малюнків, який повинен замінити GIF-формат.

Серйозним ресурсом зменшення розмірів графічних файлів є спеціальна обробка зображень в графічних редакторах. Вельми часто вдається практично без погіршення якості малюнка зменшити файл в декілька разів. На рис. 5.16 показаний приклад правки зображення за допомогою графічного редактора Photo Shop.

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

Зліва на рис. 16 показана панель інструментів графічного редактора, в середині знизу - фотографія, зверху - збільшений фрагмент фотографії (права частина комірця), праворуч - збільшений вигляд відретушованого фрагмента. Ретуш полягала в тому, щоб зробити однотонним комірець сорочки. Зрозуміло, що якщо зробити одноколірними пікселі, що відображають названий фрагмент, то якість фотографії не погіршиться, проте при збереженні шляхом стиснення інформація про всіх одноколірних пікселах буде зафіксована один раз, внаслідок чого обсяг файлу став менше. Подібна операція була застосована до різних фрагментів фотографії, що дозволило зменшити обсяг файлу в 2,5 рази. Ретуш виконана за допомогою різних інструментів панелі, в тому числі інструменту

Pencil Tool (Олівець), який на панелі виділений активним кольором.

Для мінімізації розмірів рісуночних файлів можна також використовувати спеціальні програми, які прибирають з них неграфічні інформацію, що розміщується графічними редакторами при розробці та збереженні малюнка. Наприклад, автор цих рядків користується програмою Advanced GIF Optimizer фірми Gold Software. Використання оптимізаторів часто дозволяє зменшити обсяг GIF-файлу ще на 10-60%.

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

8. Сторінки з фреймами

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

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

Рис. 17. Приклад фреймовой Web-сторінки

Сторінка організована у формі меню і складається з трьох фреймів

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

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

При розробці фреймової сторінки спочатку окремо створені такі сторінки:

• header.htm - сторінка, яка буде представляти заголовок фреймовой сторінки;
• menu.htm - сторінка для відображення меню в лівому фреймі;
• informatique.htm - сторінка для відображення списку методичних матеріалів з дисципліни Інформатика;
• certificate.htm - сторінка для відображення списку методичних матеріалів по спеціальності сертифікація;
• tms_metod.htm - власне фреймова сторінка.

Для створення останньої сторінки організований новий файл за допомогою меню файл /

створити і вибрати команду інші шаблони сторінок... в галузі завдань створення.
У діалоговому вікнішаблони сторінок, Вибрати вкладку сторінкарамок , На якій показані шаблони W eb-сторінок c фреймовою структурою, що входять до складу FP (рис. 18).

Вікно нової web-сторінки фреймів (рис.19) буде розбито на частини відповідно до обраної структурою.

Клацанням правої клавіші миші викликаємо контекстне меню, вікно властивостей сторінки і вводимо в титульну рядок текст

Методичні матеріали кафедри, Яка зазвичай відображається у верхній частині браузера, і зберігаємо сторінку tms_metod.htm.

Далі послідовно проводимо клацання на кнопці Задати початкову сторінку в верхньому і лівому фреймах і встановлюємо зв'язок відповідного фрейму зі своєю сторінкою за допомогою стандартного вікна створення гіперпосилання, представленого на рис. 12. Після клацання по кнопці верхнього фрейма призначена адреса header.htm, лівого - menu.htm, правого - порожня сторінка (кнопкою створити сторінку на рис. 19).

Для того щоб файли informatique.htm і certificate.htm після виклику їх гіперпосиланнями відображалися в правому фреймі, в файлі menu.htm гіперпосиланнями на ці Web-сторінки присвоєно значення за замовчуванням - головна.

9. Приклад розробки Web-сторінки

На рис. 20 представлена

Web-сторінка history.htm , Що відображає коротку історію кафедри ТМС КДТУ.

Рис. 20. Вид Web-сторінки в браузері

Вид розміченій сторінці в редакторі FP показаний на рис. 21. Спочатку створена нова стрніци. Далі клацанням правої клавіші миші викликано контекстне меню, в якому ви клацнули по рядку властивості сторінки. У вікні властивостей сторінки (рис. 3) введено її заголовок Історія кафедри ТМС. на закладці інші проти кожної з опцій відступу кордонів сторінки поставлена \u200b\u200bгалочка, а їх значення встановлені в нуль. Це означає, що при зчитуванні в браузер сторінку слід відображати без відступів від верхньої і лівої меж вікна перегляду. Клацанням по кнопці зберегти сторінка збережена на диску під ім'ям history.htm.

Далі командою вставки таблиці на сторінку покладена таблиця з чотирьох стовпців і чотирьох рядків. В осередку верхнього рядка послідовно зліва направо покладені три малюнки h1.gif, h2.gif, h3.gif (малюнки попередньо розроблені в графічному редакторі Photo Shop). Перший малюнок (КДТУ) має розмір 4 К, другий (ТМС) - 3,6 К, останній - 1,4 К. Всі малюнки є написи, виконані на бордовому тлі. Останній малюнок (він з написом ІСТОРІЯ КАФЕДРИ ТЕХНОЛОГІЯ МАШИНОБУДУВАННЯ) з метою скорочення пам'яті виконаний меншої ширини.

Рис. 21. Вид розміченій Web-сторінки в редакторі FP

Далі клацанням в осередок першого рядка і командою Таблиця / Виділити рядок перший рядок осередків була виділена. Потім на неї був наведений курсор і виконаний клацання правої кнопки миші. У контекстному меню обрана команда властивості комірки і у вікні (рис. 10) всіх виділених комірок призначена підкладка у вигляді малюнка bg.gif (він також підготовлений в редакторі Photo Shop). Цей малюнок є однотонне зображення розміром 8x8 пікселів з однаковими характеристиками. Розмір файлу підкладки складає всього 46 байтів. Підкладка необхідна, щоб вся перший рядок таблиці зафарбувати однаковим кольором (малюнки виконані на тлі цього ж кольору).

Для того щоб більш вузький малюнок h3.gif розмістився в вертикальному напрямку по середині осередка, її властивості вертикальне положення присвоєно значення По центру. Горизонтальне положення залишено за замовчуванням, т. Е. Притиснути до лівого краю осередку. Для останньої клітинки першого рядка таблиці (вона порожня) властивості Ширина присвоєно значення 600. Це необхідно для того, щоб вся перший рядок таблиці гарантовано розміщувалася на всю ширину вікна (і навіть забезпечувала деякий запас), що при перегляді сторінки створить ефект однотонної кольоровий зафарбовування заголовка (банера) в браузері (рис. 20).

Далі були призначені дві гіперпосилання - на сайт КДТУ і сайт кафедри ТМС. Вони необхідні для того, щоб переглядає сторінку міг при бажанні перейти до перегляду цих сторінок. Першому малюнку (h1.gif) була призначена гіперпосилання http://www.kgtu.runnet.ru на сайт КДТУ (рис. 5.12). Другому (h2.gif) - гіперпосилання на сайт кафедри ТМС http://tms.kgtu.runnet.ru. У рядку Text властивостей малюнків першому призначений текст До сайту КДТУ, Другого - До сайту кафедри ТМС. Ці рядки необхідні для того, щоб переглядає сторінку при наведенні курсору на малюнок зміг прочитати на підказках призначення гіперпосилань. Щоб в браузері не були видні контури малюнків-гіперпосилань їх властивості товщини кордонів присвоєно значення нуль і кордон згорнута (рис. 15). На цьому розмітка першого рядка таблиці закінчена.

У другому рядку таблиці в перші два осередки покладено один і той же малюнок з файлу arrow.gif. Малюнок являє спрямовану вістрям вгору стрілку. Розмір файлу складає всього 324 байта. Малюнки призначені для того, щоб підказати переглядає сторінку, що над ними знаходяться гіперпосилання, якими він може скористатися. Щоб стрілки були розташовані точно під відповідними малюнками, властивості горизонтального положення осередків присвоєно значення по центру.

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

У перший абзац осередку набрана з клавіатури верхня частина тексту (вона передує списку співробітників, в різний час обіймали посаду завідувачів кафедрою ТМС).

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

Нижче таблиці набраний текст, завершальний опис історії.

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

Чи не упущена можливість підкреслити цікаву особливість одного з фрагментів тексту: якщо з перших букв назв спеціальностей, яким навчають на кафедрі ТМС, скласти абревіатуру, то вона повторить абревіатуру, складену з перших букв назви кафедри, т. Е. Знову вийде "ТМС" (на рис. 20 і 21 ця частина тексту не видно. ця особливість підкреслена тим, що перші літери в найменуванні спеціальностей виділені жирним шрифтом і червоним кольором.

Нарешті, всі осередки нижнього рядка великий таблиці об'єднані і в вийшла осередок більш дрібним шрифтом внесені вихідні дані кафедри - адреса, телефони, адреса e-mail.

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

Коротко про програму Microsoft FrontPage

Це простий в освоєнні і зручний Web-редактор для проектування, підготовки і публікації Web-сайтів. Завдяки інтеграції з сімейством продуктів MS Office, звичному інтерфейсу і достатку шаблонів програма дозволяє швидко освоїти роботу навіть початківцям користувачам, знайомим з основами роботи в MS Word. При цьому FrontPage можна назвати рішенням для «чайників»: програма надає широкі функціональні можливості і різноманітні засоби оптимізації інтернет сторінок.

Слід зазначити, що назва Microsoft FrontPage існувало до 2003 року, а далі доповнювалася новими функціями і змінювалося сама назва програмного забезпечення. У 2007 програма FrontPage була перейменована на Microsoft Expression Web, а в 2010 в Microsoft Office SharePoint Designer. Фактичний в нові версії були додані деякі доповнення, але основний вид програми зберігався.

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

Загальний вигляд програми Microsoft FrontPage

Програма Microsoft FrontPage має багато спільного з інструментами MS Word, тому багато кнопки і вкладки меню також інтуїтивно зрозумілі і це полегшує процес створення сторінки. Багато хто вже знає, як набирати і форматувати простий текст, створювати таблиці в Microsoft Word, за таким же принципом редагується сторінка і в FrontPage.

Справа на малюнку показаний загальний вид програми зі стандартним набором інструментів, за допомогою яких можна зробити шаблон сторінки з текстом, посиланнями і картинками. Зайдіть у вкладку "Вид" далі "Панель інструментів" і переконайтеся, що включені " Стандартні", "форматування"І" таблиці", Цих інструментів буде досить для створення просто сторінки. Знизу зверніть увагу на вкладки" Конструктор "," Код "і" Перегляд "- це три різних режиму в яких можна весь час переглядати, як вигляди створювана сторінка.

• У Конструкторі вводяться всі правки, набирається і форматується текст, вставляються картинки, створюються посилання, змінюються кольори фону і шрифту таким же чином, як і в Microsoft Word.
• У вкладці "Код" можна переглянути, так званий, HTML-код. HTML - це стандартна мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок створюються за допомогою мови HTML. У цій вкладці теж можна здійснювати редагування сторінки, але потрібно знати цю мову розмітки. Однак всі зміни початківцям слід робити в конструкторі і всі зміни в HTML відбуватимуться автоматичний.
• У вкладці "Перегляд" можна побачити, як виглядає сторінка безпосередньо в браузері (в такому, як Internet Explorer)

Детальний опис інших меню, кнопок і функцій Microsoft FrontPage представлені в довідці програми. Для цього потрібно натиснути клавішу "F1".

Створюємо шаблон для сторінок в FrontPage

Вставляємо основну таблицю в редакторі

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

1. Щоб вставити таблицю заходимо у вкладку "Таблиця"\u003e "Вставити"\u003e "Таблиця" і заповнюємо поля, як це показано на малюнку справа. Фактичний можна ввести свої параметри, але дана таблиця має фіксовану ширину і витягнута на 100% площі екрану. Таким чином таблиця компактно буде відображатися в браузері.
2. Потім необхідно налаштувати всі три осередки, так як вони після вставки мають однакову висоту. Натискаємо правою кнопкою мишки на самому верхньому осередку і заходимо в "Властивості осередку" в поле висота вписуємо умовно "150" і ставимо галочку "в точках", тобто розмір осередку складе 150 пікселів. В цьому ж меню ми можемо вибрати колір фону комірки, а натиснувши в меню "стиль ..." можна внести інші настройки осередки, наприклад вибрати колір і розмір кордону осередки, з цим можете поекспериментувати і подивитися результат. У самій клітинці можна вписати назву сайту.
3. Далі редагуємо другий осередок, яка призначена для посилань навігації по сайту. Ширину робимо близько 40 пікселів, цього буде достатньо, ну і інші настройки, як колір фону і полів налаштовуємо на свій смак. Далі пишемо назви самих посилань розділяючи знаками вертикальної лінії або іншим знаком (переглянути можете нижче скачавши повністю шаблон). Виділяємо тест і тиснемо кнопку вирівнювання по центру, також як і в MSWord. Таким же чином можна змінювати шрифт, розмір шрифту та інші настройки тексту.
4. Також налаштовуємо останній осередок. Вона призначена для основного тексту, де можна внести текст привітання.
5. Наостанок можна зайти у вкладку "Файл"\u003e "Властивості", де можна внести назву сайту і змінити загальний фон сторінки і інші загальні налаштування

Тепер шаблон готовий. Він є каркасом для всіх наступних сторінок сайту. Ось як сайт виглядає в HTML коді:

Такий отримуємо шаблон для сайту

< html > < head > < meta http-equiv = "Content-Language" content = "ru" > < meta http-equiv = "Content-Type" content = "Text / html; charset \u003d windows-1251"> < title > Назва сайту < body bgcolor = "#F8F3FE" > < div align = "center" > < table border = "0" width = "800" cellspacing = "4" cellpadding = "0" height = "100%" > < tr > < td height = "150" bgcolor = "#4A4A4A" style = "border: 1px solid #000000" > < p align = "center" >< font face = "Verdana" size = "6" color = "#FFFFFF" > Назва сайту < tr > < td height = "40" bordercolor = "#4A4A4A" style = "border: 1px solid #4A4A4A" bgcolor = "#FBFBFB" > < p align = "center" >< font face = "Verdana" size = "2" > < b > Головна | < b > сторінка 2 | < b > сторінка 3 | < b > сторінка 4 | < b > сторінка 5 | < b > Контакти < tr > < td valign = "top" style = "border: 1px solid #4A4A4A" bgcolor = "#FFFFFF" >< div style = "padding: 6px;" > < font face = "Verdana" size = "2" > Текст головної сторінки. Тут можна вставити текст привітання та коротко написати чому присвячений сайт.

Цей HTML код можна відразу вставити в редактор у вкладці "Код" і відразу побачите готовий шаблон. Його можна змінювати і редагувати під власні потреби. Тут варто пояснити, що там, де вставляється основний текст і щоб він не розташовувався впритул до полів він був обрамлений в тег "div", c налаштуванням відступу, як це показано в прикладі.

додаткові шаблони

1. Потрібно також знати, що в програмі FrontPage, та й інших подібних програмах існують стандартні шаблони, по які можна використовувати для створення сторінок, вони легко редагуються і можна підігнати будь-який шаблон під свої потреби. Для того, щоб вибрати стандартний шаблон перейдіть у вкладку "Файл"\u003e "Створити ..." в вікні, вибрати "Інші шаблони сторінок", де можна вибрати будь-якої вподобаної шаблон.
2. Є другий варіант - завантажити повністю шаблон з інтернету. Сайтів які надають такий сервіс дуже багато. шаблони можуть бути як платними, так і безкоштовними. Завантаживши той чи інший шаблон, його можна редагувати в програмі, заповнювати потрібним змістом і міняти стиль того чи іншого елемента.

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

Microsoft FrontPage дає хороші Інстурмент готових макетів таблиць і тим оформлення для створення сайтів

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

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

Вставляємо картинку і створюємо посилання на сторінки

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

Для переходу на інші сторінки сайту необхідно створити посилання, за якими користувачі зможуть відвідати всі сторінки сайту. Для це потрібно виділити потрібний текст для посилання і перейти у вкладку "Вставка"\u003e "Гіперпосилання", в меню потрібно вказати сторінку, на яку створюється посилання, і натиснути "ок". У цьому ж вікні є інші настройки для посилань такі, як відкривати посилання в новому вікні чи ні. В принципі це можна вивчити самостійно.

висновок

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

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

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

Статті за схожою тематикою

FrontPage - це програма для створення HTML-сторінок і їх подальшої "публікації". Це досить старе програмне рішення, яке давно не підтримується. На зміну йому прийшла програма.

функціонал

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

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

Режими роботи

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

Ключові особливості

• створення веб-сторінок, їх оформлення і наповнення;
• візуальний перегляд коду за допомогою режиму конструктора (WYSIWYG);
• інтегрована бібліотека шаблонів;
• вбудований менеджер для швидкої і зручної публікації кінцевого результату;
• можливість звернутися до довідника;
• автоматичні пошук і виправлення помилок;
• наявність російської версії графічної оболонки.