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 US 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+ВВЕДЕННЯ
Вставлення фрагментів коду - CTRL+>
Вставка тега, що закриває - 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+ВВЕДЕННЯ
Вставка розриву рядка - CTRL+SHIFT+ПРОБІЛ
Виділення тексту та малюнків - SHIFT+СТРІЛКА ВПРАВО
Виділення одного символу праворуч - SHIFT+СТРІЛКА ВЛІВО
Виділення одного символу зліва - CTRL+SHIFT+СТРІЛКА ВПРАВО
Виділення слова до кінця - CTRL+SHIFT+СТРІЛКА ВЛІВО
Виділення рядка до кінця - SHIFT+HOME
Виділення рядка з початку - SHIFT+СТРІЛКА ВГОРУ
Виділення одного рядка вгорі - SHIFT+СТРІЛКА Вниз
Виділення одного рядка знизу - CTRL+SHIFT+СТРІЛКА Вниз
Виділення параграфа до кінця - CTRL+SHIFT+СТРІЛКА ВГОРУ
Виділення одного екрана знизу – SHIFT+PAGE UP
Виділення одного екрана зверху - CTRL+A
Виділення всієї сторінки - ALT+ВВЕДЕННЯ
Вставка таблиці - TAB
Виділення всіх осередків рядка при знаходженні курсору в осередку.
Створення авто- ескізувиділеного малюнка - CTRL+K
Доступ та робота з областю задач Довідка та вікном довідка - SHIFT+CTRL+ALT+T
Вставка таблиці - TAB
Виділення вмісту наступного осередку таблиці - SHIFT+TAB
Виділення стовпця при знаходженні курсору у верхньому або нижньому осередку - CTRL +T
Створення авто- ескізувиділеного малюнка - CTRL+K
Ви можете встановити тип даних та інші параметри, дозволені для текстових полів та текстових областей. Наприклад, для збору номерів учасників або серійних номерів слід дозволити вводити лише цифри в текстовому полі та заборонити використання будь-яких інших знаків. Можна також вказати потрібну кількість знаків, щоб відвідувач вузла помилково не пропустив цифру або букву. Можна вимагати, щоб у групі перемикачів один перемикач було встановлено.
Наприклад, якщо у формі є два перемикачі: «Так» та «Ні», і відвідувач вузла намагається надіслати форму, не встановивши один із них, з'явиться повідомлення. Можна вимагати, щоб відвідувач вузла вибирав елемент у списку, вказати мінімальне і максимальне дозволене число елементів і заборонити вибір першого елемента, якщо це інструкція, така як «Виберіть елемент». Після встановлення правил введення даних слід вирішити, як результати мають оброблятися формою. Після відправки форми відвідувачем вузла необхідно зібрати введені дані - результати форми, можна їх переглянути, відобразити відвідувачу вузла або певним чином обробити.
Коли відвідувач вузла надсилає форму в браузері, значення всіх її полів, укладені
відправляються в обробник форм (Обробник форм. Програма на сервері, яка виконується при надсиланні форми відвідувачем вузла. Кожна форма Microsoft FrontPage пов'язана з певним обробником форм.). Наприклад, якщо поле форми є текстовим полем, то значенням, яке відправляється в обробник форм, є текст, введений у поле. У Microsoft FrontPage є кілька обробників форми, які приймають результати форми та виконують різні операції. Щоразу під час надсилання форми у FrontPage зберігає інформацію у базі даних. Наприклад, при використанні форми для збору відомостей про контакти можна зберігати результати форми безпосередньо в базі даних замовника. Можна зберігати результати в базі даних або створити нову за допомогою програми FrontPage. При надсиланні форми відвідувачем вузла FrontPage додає до файлу результати, які можна переглянути при наступному відкритті файлу. Наприклад, можна встановити гостьову книгу для відвідувачів веб-сайту та вибрати збереження результатів у HTML-файлі, а також створити посилання на цей файл, щоб відвідувачі вузла могли подивитися, що написали інші. У разі збереження результатів у XML-файлі можна використовувати результати в FrontPage або експортувати їх у будь-яку програму, яка підтримує дані у форматі XML, наприклад в Office Excel 2003. Щоразу при надсиланні форми відвідувачем вузла автоматично надсилатиметься повідомлення електронної пошти на задану адресу, що містить результати цієї форми.Можна також використовувати налаштовані сценарії для обробки результатів форми. Процес публікації веб-сайту супроводжується копіюванням всіх складових даний вузол файлів та папок з вихідного розташування у певне місце. У Microsoft FrontPage публікація вузла виконується, щоб зробити його доступним для відвідувачів, щоб створити резервну копію вузла та оновити опублікований раніше веб-сайт. Зазвичай створення файлів та папок веб-сайту відбувається на локальному комп'ютері. Після створення вузла він публікується в Інтернеті або локальній інтрамережі, щоб відвідувачі могли переглядати його веб-сторінки за допомогою веб-браузера. Іноді виникає необхідність створення копії веб-сайту та збереження цієї копії у певному місці на жорсткому або мережному диску. Засіб публікації Microsoft FrontPage надає зручний спосіб створення такої копії. Під час оновлення файлів або папок веб-сайту у програмі FrontPage використовуються спеціальні терміни, щоб розрізняти вихідний та кінцевий вузол. Локальний веб-сайт - це вихідний веб-сайт, відкритий у програмі FrontPage, а віддалений веб-сайт - це кінцевий вузол, на який проводиться публікація.
Подання Видалений веб-сайт дозволяє створювати публікацію у двох напрямках, тобто легко переміщати файли між віддаленими та локальними розташуваннями. Це найкорисніше при оновленні раніше опублікованого вузла. У розділі Видалений веб-сайт на панелі «Локальний веб-сайт» та «Віддалений веб-сайт» відображаються піктограми з описом, який показує стан публікації файлів. У спільних робочих середовищах оновлення як локальних, так і віддалених веб-вузлів можуть займатися кілька авторів. Програма Microsoft FrontPage порівнюватиме файли на локальному веб-сайті з опублікованими файлами на віддаленому веб-сайті. Далі наведено описи випадків, коли може бути потрібна синхронізація локальних та віддалених версій файлів.
Якщо на локальному веб-сайті буде виявлено нову версію файлу, буде проведено синхронізацію для оновлення локального та віддаленого веб-вузла (якщо вручну не вказати інші дії). Ви також можете вибрати публікацію з віддаленого веб-сайту на локальний вузол. При синхронізації файлів за допомогою представлення «Видалений веб-сайт» на локальний веб-сайт можуть завантажуватися файли з віддаленого веб-сайту. Якщо файли на віддалений вузол помістив зловмисник, під загрозою може бути локальний вузол. Перед синхронізацією файлів перевірте, що лише довірені користувачі мають доступ до віддаленого веб-сайту.
Корпорація Майкрософт, творець цієї програми, підтверджує свою відданість політиці посилення безпеки щодо особистих відомостей користувачів. Для цього використовуються різноманітні технології та процедури захисту особистих відомостей від несанкціонованого доступу, використання та розголошення. Корпорація Майкрософт має право на свій розсуд оновлювати цю заяву про конфіденційність. При кожному оновленні змінюється дата оновлення у верхній частині заяви. Оновлена заява про конфіденційність буде включена в черговий пакет оновлень (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
FrontPage – це редактор, який призначений для створення сторінок із гіпертекстовим кодом. Ця програма забезпечує створення HTML – тегів, списків, тем оформлення та незвичайних стилів для веб-сайтів.
FrontPage вважається софтом старого покоління та його практично не використовують. Наразі є більш просунута програма для створення гіпертексту – Adobe Dreamweaver.
Багато веб-дизайнерів також використовують SharePoint Designer, який змінив «старий» FrontPage. У FrontPage можна створювати веб-сторінки з неактуальними стандартами гіпертексту. Програма оснащена «деревоподібною структурою» та відображає підказки під час введення тегів.
Функціонал
Цей HTML – редактор знадобиться веб-дизайнерам-початківцям, які тільки вчаться створювати сайти початкового рівня. У софті є багато інструментів, які забезпечують створення сторінок з гіпертекстом. Використовуючи FrontPage, ви оформите їхнє графічне оформлення та відповідні теги сайту, які вказав замовник.Плюс цього редактора – контроль помилок, які допускає користувач під час введення тегів і команд. Програма знайде всі теги, які неправильно введені, і покаже варіанти для виправлення.
FrontPage оснащений інтегрованим набором шаблонів. Не важливо, чи новачок ви чи професіонал, скористайтеся шаблоном і створіть сторінки, заощадивши час. Програма працює як менеджер і забезпечує швидку публікацію створеної сторінки. Якщо у вас виникнуть складні питання щодо роботи з софтом – відкрийте довідку, увійшовши до Google.
Режими роботи
У редакторі гіпертексту є режими роботи, що відрізняються можливостями. Режим конструктора показує вікно редактора та код із додатковими опціями. Увійшовши в режим «коду», ви працюєте лише з гіпертекстом.У «перегляді результатів» ви перегляньте заготівлю створеного сайту. Використовуючи «комбінований» режим, ви побачите основну область для створення коду та перегляду «заготівлі».
Працюючи у «конструкторі», ви побачите усі помилки. У цьому режимі можна працювати з картинками та додавати їх у різні місця. Ви можете додавати всі посилання, рамки та інші елементи. Режим коду підходить для перегляду гіпертексту, але не для його редагування.
Ключові особливості
- обробка та створення веб-сторінок з подальшим оформленням;
- перегляд готового гіпертексту за допомогою режиму конструктора;
- вбудована база із заготовками, яка спрощує роботу з проектом;
- менеджер із зручним режимом публікації;
- у програмі є вбудована довідка;
- пошук даних та корекція помилок;
- графічне оформлення редактора локалізовано російською мовою.
Microsoft FrontPage 2003 включає засоби для професійного проектування, розробки, роботи з даними та публікації, які необхідні для створення динамічних веб-вузлів.
FrontPage дозволяє розробляти web-сайти в режимі візуального конструктора, без редагування HTML-коду, так і отримувати доступ до відповідного коду, що створюється під час роботи.
Для FrontPage існує велика кількість платних і безкоштовних додаткових модулів (plug-ins), що розширюють його можливості. Наприклад, оптимізатори графіки Ulead SmartSaver та Ulead SmartSaver Pro вбудовуються не тільки у Photoshop, а й у FrontPage.
Крім того, існує ціла індустрія фірм, які розробляють та випускають теми для FrontPage. Теми – це стиль оформлення, набір фонів, навігаційних кнопок і т.д., які можна застосувати до сторінки або сайту, значно прискоривши процес розробки.
FrontPage включає шаблони сайтів і шаблони сторінок. Інструмент Майстер сайтів на основі вибраного користувачем шаблону сайту формує набір сторінок із посиланнями між ними. Користувачеві залишається заповнити сторінки створеного шаблону сайту інформацією. Шаблон сторінки дозволяє вибрати з бази шаблонів потрібний вид сторінки та заповнити його інформацією.
Головною особливістю FrontPage є те, що цей редактор працює в режимі WYSIWYG (що бачиш – те й отримаєш), тобто дозволяє створювати HTML-сторінки у візуальному режимі. Для створення сторінок користувач використовує ті самі прийоми та навички, що й при роботі в Microsoft Word. При цьому необхідний код на мові HTML генерується автоматично.
Веб-вузол
Веб-вузол – набір пов'язаних між собою інформаційних онлайнових ресурсів, призначених для перегляду через комп'ютерну мережуза допомогою спеціальних програм – веб-браузерів. Веб-сайт може бути набір документів в електронному вигляді, онлайнову службу.
Веб-браузер (browser, браузер) – програма, яка використовується для навігації та перегляду різних інтернет-ресурсів. Веб-браузер зчитує HTML-документ і форматує його для представлення користувачеві. Найбільшого поширення набули браузери Microsoft Internet Explorer, Netscape Navigator, Mozilla, Opera.
Веб-сайт складається з окремих веб-сторінок. Структура кожної веб-сторінки визначається її внутрішнім HTML-кодом. Користувач може переглядати цей код і працювати з ним на панелі Код або на панелі З розділенням режиму перегляду сторінок, проте більша частина роботи виконується на панелі Конструктор. Для роботи з програмою FrontPage не обов'язково знати, як створюється HTML-код.
Веб-сайт спочатку розробляється на локальному комп'ютері, а потім публікується в Інтернеті. Користувач не зможе отримати доступ до багатьох функцій, доки вузол не буде опублікований на сервері, де запущено пакет FrontPage Server Extensions.
Типи вузлів
Розглянемо типи вузлів, які можна готувати за допомогою FrontPage 2003.
Є два види вузлів: дискові вузли та серверні вузли. Дискові вузли можна запускати на будь-якому комп'ютері або навіть з гнучкого або компакт-диска. Дискові вузли підтримують лише базові функції HTML. Багато веб-компонентів, що підтримуються програмою FrontPage, не діють на дисковому вузлі.
Серверні вузли запускаються на веб-сервері, тобто на комп'ютері, який спеціально налаштований для розміщення (хостингу) вузлів. У разі невеликих масштабів веб-сервером може бути локальний комп'ютер або сервер внутрішньої мережі. За більших масштабів веб-сервери, на яких розміщуються корпоративні вузли інтернету, зазвичай включаються до професійних пулів серверів, якими управляє провайдер (постачальник) послуг інтернету (ISP) або компанія з надання веб-хостингу.
Більшість вузлів зазвичай розробляють як дискові вузли. Це означає, що вони розробляються на комп'ютері. Потім вони публікуються на веб-сервері або всередині організації, або на зовнішньому хостингу.
Деякі веб-компоненти FrontPage – це готові елементи, такі як панелі гіперпосилань та таблиці змісту. Вони діють лише за умови розміщення на сторінці, яка є частиною вузла, створеного на основі FrontPage .
Для деяких компонентів потрібно, щоб вузол або веб-сторінка знаходилися на веб-сервері, де запущено пакет Microsoft SharePoint Services.
Інші спільні веб-компоненти діють лише на серверному вузлі, розміщеному на веб-сервері з комплектом розширених серверів FrontPage Server Extensions.
Деякі компоненти отримують свій вміст безпосередньо з інших вузлів, тому їм потрібна візуалізація інтернет-з'єднання.
Можливості серверного адміністрування доступні лише для серверних вузлів, розміщених на веб-серверах, де запущено пакет Windows SharePoint Services або FrontPage Server Extensions.
Щоб відображати інформацію баз даних, вузол повинен бути розміщений на
До складу комплексу програм Microsoft Office входить кілька програм, які дозволяють створювати, редагувати та розміщувати на сервері Web-сторінки. Однією з них є порівняно проста програма FrontPage . З її допомогою можна створювати складні сторінки, які задовольнять запити навіть професійного Web-дизайнера.
При створенні Web-сторінки слід прагнути надання їй привабливого зовнішнього вигляду, тому що приваблива сторінка частіше відвідується. При цьому у сторінці слід поєднати дві суперечливі властивості – привабливість та мінімум пам'яті. Можна обмеженою кількістю малоємних засобів, наприклад квітами замість малюнків, створити небагату, але дуже привабливу сторінку і, навпаки, можна оснастити її безліччю малюнків, кольорів, форматів та інших елементів розмітки, набір та розміщення яких дадуть сторінку, яка може розглядатися як зразок багатої несмаку. . Процес створення Web-сторінки є творчим, тому його називають Web-дизайном. Відомо, що деякі Web-дизайнери витрачають на створення не найскладнішої сторінки по кілька місяців, повертаючись до неї багато разів, у пошуках найбільш виразного способу її втілення, у той час як сторінку з тим же змістом можна було б створити не більше ніж за годину роботи. Якщо одного разу пошитий костюм важко перешити кілька разів, то Web-сторінку можна "перешивати" і покращувати стільки, скільки потрібно точно відповідно до того, як поет покращує свій твір, доводячи його до вершини досконалості.
Втім, не всі дотримуються такої думки, резонно помічаючи, що Web-сторінка – це інформація для поширення, і для цього зовсім не обов'язково перетворювати її на витвір мистецтва, тим більше, що це вимагає багато часу.
Звідси випливає практичний висновок – головні, титульні, рекламні сторінки слід виконувати привабливими, а сторінки, призначені поширення " сухої " інформації, наприклад, текстів наказів, посадових інструкцій, будь-яких планів та іншого, – з мінімумом розмітки.
1. Інтерфейс FP
Програма створення та редагування Web-сторінок Front Page знаходиться у папці офісних програм Microsoft Office.
Після запуску FP на екрані з'являється вікно, вигляд якого показано на мал. 1. Для цього прикладу у вікні програми відкрито для редагування цей методичний посібник, написаний за допомогою FP.
|
|
| Рис. 1. Вікно програми Front Page |
Програма містить меню та кілька панелей інструментів. На той час, коли користувач FP вирішує взятися за Web-дизайн, він, як правило, добре володіє навичками роботи з програмою Word із сімейства Microsoft Office, тому інтерфейс FP, складений у стилі Microsoft-дизайну і дуже схожий на інтерфейс програми Word, не створить особливих труднощів у роботі.
Інтерфейс програми – меню, панелі, кнопки та інші елементи – зручніше пояснювати в міру потреби у його елементах у ході створення або редагування Web-сторінок, приклади яких будуть розглянуті у цьому розділі.
При розробці сторінки програма автоматично створює файл розмітки, текст якого FP пише мовою HTML (мова гіпертекстової розмітки). У цей файл можна вносити зміни вручну (більше того, текст програми можна скласти у звичайному текстовому редакторі, навіть найпростішому, наприклад, як Notepad, однак це занадто обтяжливо). Для переходу до вбудованого текстового редактора FP потрібно клацнути в нижній частині вікна по ярлику Код, а потім в редакторі тексту внести зміни. Якщо розробник не впевнений у своєму професіоналізмі, то краще в HTML-текст не вносити, тому що помилки редагування буде важко виправити. Для повернення на сторінку слід клацнути по ярлику Конструктор.
Для того, щоб подивитися як сторінка буде виглядати в браузері, слід клацнути на ярлику. Перегляд. Слід зазначити, що коректно в цьому режимі відображаються лише дуже прості сторінки. Тому краще сторінку переглядати у професійному браузері, наприклад Firefox. Для цього слід знайти файл сторінки в папці та відкрити його у браузері (зазвичай усі Web-сторінки відкриваються у браузері).
2. Створення нової Web-сторінки
Для створення нової Web-сторінки слід натиснути на кнопку Створення нової звичайної сторінки, розташованої на панелі Стандартна. Деякі кнопки цієї панелі з відповідними коментарями показано на мал. 2.
Можна створити нову сторінку інакше. У меню Файлклацніть на рядку Створити. Програма справа видасть вікно із шаблонами стандартних сторінок. З нього можна вибрати якийсь шаблон і використовувати його як основу майбутньої сторінки. Якщо потрібна чиста сторінка, потрібно клацнути на шаблоні Порожня сторінка.
У FP можна також створювати кадри, які дозволяють бачити одночасно кілька веб-сторінок на екрані монітора. Фрейми – це багатовіконні веб-сторінки. Web-дизайнеру-початківцю від використання фреймів слід утриматися.
Тепер можна зберегти сторінку. Для цього слід натиснути на кнопку Зберегтипотім зберегти сторінку як файл на диску свого комп'ютера. При збереженні сторінки краще відразу створити окрему папку з тим ім'ям, яке Ви збираєтеся давати файлу. Web-сторінки зазвичай зберігають у файлах із розширенням .htmабо .html(від назви мови HyperText Markup Language – мова гіпертекстової розмітки). Наприклад, якщо Ви маєте намір зберегти файл під ім'ям about.htm, слід створити папку з ім'ям about, в області диска, в якій будуть розміщуватися Ваші Web-сторінки. Перед збереженням першої сторінки краще створити таку область у вигляді папки, наприклад, папки з ім'ям Web-сторінки Федорової. Тепер у ній слід створити згадану папку about, а в ній – зберегти сторінку about.htm.
3. Властивості Web-сторінки
Далі необхідно заповнити значеннями деякі важливі властивості сторінки. Для цього слід клацнути правою клавішею миші у зоні сторінки, потім у контекстному меню – на рядку Властивості сторінки. Відобразиться діалогове вікно для введення властивостей сторінки (рис. 3). Вікно має 5 закладок
Загальні, Форматування, Додатково, Інші, Мова .На рис. 3 у вікні активізована закладка
Загальні. У рядкуНазва необхідно внести заголовок сторінки.Тут можна підключити звуковий файл у зоні
Фоновий звук. Звук супроводжуватиме перегляд цієї сторінки на комп'ютері, який її відкрив. Зрозуміло, щоб прослуховувати фоновий звук на комп'ютері користувача має бути встановлений динамік. Зазвичай фоновий звук відтворюється прокручуванням звукового файлу з розширенням .wav. Для підключення файлу потрібно натиснути кнопку Оглядта за допомогою діалогового вікна підключити такий файл. Для звичайної сторінки не потрібно підключати звуковий файл.для створення підкладки сторінки. Підкладкою називається основне тло сторінки. Фоном може бути колірабо малюнок. Вигляд вікна властивостей сторінки на закладці Background показано на рис. 4.Якщо потрібно вибрати фон у вигляді кольору, то потрібно натиснути на кнопку списку Фон
та вибрати колір зі стандартного набору кольорів. У початковому стані встановлено колір за промовчанням. Зазвичай кольором за промовчанням є білий колір.Якщо пропоновані кольори Вас не влаштовують, слід клацнути на кольорі
Custom(Користувачський). У діалоговому вікні можна вибрати колір будь-якого з 16 "777" 216 відтінків. Вигляд вікна вибору кольору користувача показана на рис. 5.Для вибору кольору користувача слід спочатку призначити базовий колір з основної палітри, потім праворуч у квадраті палітри клацнути на приблизному кольорі (ця точка відзначена хрестом), потім у стовпці праворуч вибрати бажаний відтінок (він позначений трикутником поряд з курсором миші). У квадратику "Колір/Заливка" можна оцінити вибраний колір візуально. Справа від нього показані спектральні характеристики вибраного кольору. Ці параметри можна змінювати вручну.
Якщо вибраний колір є нестандартним (відтінок) і його необхідно в сеансі редагування використовувати кілька разів, можна його помістити в список "Додаткові кольори", розташований під основною палітрою. Для цього потрібно перед вибором клацнути на вікні додаткового кольору, вибрати відтінок і клацнути на кнопці "Додати в набір". Для виходу з вікна потрібно натиснути кнопку ОК.
Якщо фоном сторінки повинен бути малюнок, слід на цій закладці відкрити потрібний малюнок.
. Бажано, щоб цей файл знаходився в тій папці, де зберігається файл сторінки. На рис. 6. показаний приклад фону як малюнка, що зберігається у файлі butterfly.gif.Як видно із рис. 6, фоном є багаторазово повторений малюнок із зображенням метелика ( butterfly).
Для порівняння на рис. 7 окремо показано сам малюнок.
Відразу зазначимо, що наведений приклад – це приклад поганого вибору підкладки, тому що зображення затуляє поле сторінки і від нього, що називається "рябить в очах". Перевага його лише в тому, що він показує як малюнок створює тло на сторінці.
Якщо необхідно, щоб фон був статичним, тобто щоб при прокручуванні довгої сторінки в браузері фон залишався нерухомим, потрібно встановити опцію Зробити підкладкою.
На практиці як фон зазвичай вибирають слабонасичені малюнки для того, щоб створити бажаний фон, але не фокусувати на ньому увагу переглядає сторінку. Втім, вибір фону – справа смаку
Web- дизайнера.Зазвичай фонові малюнки мають формати
bmp, gif, jpg , png .Слід пам'ятати, що малюнок – зазвичай найємніший по пам'яті елемент Web-сторінки. Тому його завантаження браузером із сервера займає найбільш тривалий час. Якщо швидкість з'єднання невелика, а сторінка, що завантажується, містить кілька об'ємних малюнків, то завантаження цієї сторінки може затягнутися. Той, хто переглядає таку сторінку, може втомитися від очікування кінця завантаження та скасувати його. Тому слід прагнути максимально мінімізувати обсяг малюнків та їх кількість на сторінці.
Вважається, що фон має прийнятні розміри, якщо об'єм малюнка не перевищує 1-5 кілобайт (К). Краще, якщо він менший за кілобайт. Для порівняння скажемо, що обсяг самої Web-сторінки зазвичай не перевищує 10-20 К. Лише сторінки з великою кількістю тексту мають великі розміри. Причина в тому, що Web-сторінка – це програма (інструкція) про те, як і що розміщувати на екрані браузера користувача. Наприклад, якщо в такому місці екрана потрібно помістити малюнок розміром 150 К, то в Web-сторінці інструкція з цього приводу може займати всього 50 байт, тобто в 3000 разів менше самого малюнка, який передається в комп'ютер переглядає окремо від Web -Сторінки. Оскільки кількість таких інструкцій невелика, то розмір самої сторінки також порівняно невеликий.
На закладці
Форматуваннятакож можна встановити колір тексту. Тут же можна встановити кольори текстових гіперпосилань, які відображатимуться в браузері сторінки, що переглядає: колір всіх текстових гіперпосилань, колір гіперпосилань, до яких користувач вже звертався, колір гіперпосилання, на яку наведено курсор миші.На закладці Додатковоможна встановити відступи сторінки від верхнього лівого кута вікна перегляду в браузері. За замовчуванням встановлено відступи по 8 пікселів.
На закладці
Моваможна встановити спеціальні мови кодування тексту для збереження та завантаження сторінки.4. Використання таблиць
Таблиці є, мабуть, найефективнішим та незамінним засобом розмітки Web-сторінок. Якщо без фону можна обійтися, то без таблиці це зробити практично неможливо.
Кожна таблиця складається з осередків, які розташовуються по рядках та стовпцях. Окремі осередки можна об'єднувати, встановлювати відступи внутрішнього вмісту від її меж, задавати відстань між осередками, встановлювати положення елементів, що розміщуються всередині них, створювати окремі від інших осередків підкладки, створювати контури, вставляти всередину осередків інші таблиці і багато іншого.
Вставка таблиці
Щоб вставити таблицю на сторінку, потрібно виконати команду меню
Табліця/Вставити/Таблиця. У вікні, яке показано на рис. 8, слід встановити кількість рядківта стовпців. Також можна встановити положення таблиці на сторінці. Зазвичай положення за умовчанням є лівим. Однак, якщо необхідно, щоб у вікні браузера при перегляді таблиця завжди орієнтувалася посередині в горизонтальному напрямку, потрібно встановити опціювирівнювання по центру.Опція розміру межі призначена для завдання товщини ліній, що обмежують таблицю та комірки. Якщо вона встановлена в нуль і стоїть галочка Згорнути межу таблиці, то в браузері кордону не буде видно. Це дозволяє використовувати невидиму таблицю для розмітки сторінки.
Властивість
Поле осередківпризначений для вказівки відступів у пікселах від внутрішнього вмісту для всіх осередків таблиці. Властивість Інтервал осередківдозволяє встановити відстань у пікселах між усіма суміжними осередками таблиці. Задати ширинупризначена для завдання ширини таблиці у пікселах або у відсотках по відношенню до ширини вікна перегляду незалежно від розмірів вмісту. За замовчуванням вона вимкнена. Це означає, що розмір таблиці визначається розмірами її вмісту.Якщо необхідно встановити стильову та фонову розмітку таблиці, це можна зробити в цьому ж вікні.
Після закінчення розмітки таблиці необхідно натиснути кнопку ОК.Розмітка осередків таблиці
Операції над окремими осередками чи всією таблицею слід розпочати з виділення осередків. Виділити можна мишею, з клавіатури або за допомогою інструментарію
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:
- Розрив . Перехід до нового абзацу без спеціального інтервалу (те, що Shift + Enter);
Розглянемо деякі особливості вставки цих елементів.
Горизонтальна лінія
Для її вставки клацніть на потрібне місце сторінки, виберіть з меню рядок Вставка/Горизонтальна лініяі клацанням по ній вставте елемент. Якщо необхідно змінити атрибути лінії, наведіть на неї курсор миші, клацніть правою клавішу, викличте контекстне меню і клацніть по рядку Звластивості горизонтальної лінії . З'явиться вікно з такою самою назвою, в якому можна змінити атрибути лінії: ширину, висоту, колір та інші атрибути.
Нерідко виникає потреба вставки лінії з призначеними атрибутами в різні місця сторінки. Для цього потрібно клацнути по лінії, потім по кнопці
копіювання на панелі Стандартнадля копіювання лінії у буфер обміну. Тепер потрібно натиснути на потрібне місце сторінки, потім по кнопці вставкищоб вставити вміст буфера у вибране місце. У такий спосіб можна вставляти лінію багаторазово в різні місця сторінки.П р і м е ч а н е. Описаний спосіб може бути використаний для копіювання будь-яких елементів 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-сторінках для анімації ("жвавлення") її вмісту. Анімаційні ефекти, безсумнівно, прикрашають сторінку, часто служать засобом залучення уваги до окремих її фрагментів. Зворотною стороною є підвищені обсяги файлів, що містять анімовані малюнки. Для створення анімаційних 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-сторінок з фреймовою структурою, що входять до складу 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) введено її заголовок Історія кафедри ТМС. На закладці Іншіпроти кожної з опцій відступу меж сторінки поставлена галочка, які значення встановлені в нуль. Це означає, що при зчитуванні в браузер сторінку слід відображати без відступів від верхньої та лівої меж вікна перегляду. Клацніть по кнопці Зберегтисторінку збережено на диску під ім'ям 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 для вставки порожніх абзаців.
У перший абзац осередку набрано з клавіатури верхню частину тексту (вона передує списку співробітників, які у різний час обіймали посаду завідувачів кафедри ТМС).
Нижче вставлено таблицю з одного рядка та двох стовпців. У лівий стовпець запроваджено прізвища співробітників, у правий – роки їхнього завідування кафедрою. Осередки таблиці відформатовані так, що властивість вертикального положеннямає значення вгорі, властивість горизонтальне становище – по лівому краю. Така організація дозволить позиціонувати у браузері прізвища та періоди у двох сусідніх колонках точно один під одним.
Нижче таблиці набрано текст, який завершує опис історії.
Весь текст набраний шрифтом Arialдеякі його фрагменти виконані напівжирним накресленням. До них належать дати, прізвища, шифри спеціальностей та інші елементи, на які потрібно звернути увагу переглядає сторінку.
Не втрачено можливість підкреслити цікаву особливість одного з фрагментів тексту: якщо з перших літер найменувань спеціальностей, яким навчають на кафедрі ТМС, скласти абревіатуру, то вона повторить абревіатуру, складену з перших літер найменування кафедри, тобто знову вийде "ТМС" (на 20 і 21 ця частина тексту не видно, ця особливість підкреслена тим, що перші літери в найменуванні спеціальностей виділені напівжирним накресленням і червоним кольором.
Нарешті, всі осередки нижнього рядка великої таблиці об'єднані і в осередок, що вийшов, дрібнішим шрифтом внесені вихідні дані кафедри - адреса, телефони, адреса e-mail.
