4. Створення власної Web - сторінки
Створення нової порожньої Web- сторінки
Якщо при відкритті вікна додатку FrontPage в ньому відображається нова порожня сторінка, то розробку веб-сервера - сторінки можна здійснювати на базі цієї сторінки. Якщо при відкритті редактора, відображається порожнє головне вікно, то для створення нової порожньої сторінки необхідно виконати команду Файл/Создать і вибрати в області завдань "Порожня сторінка".
У вікні додатку з'явиться нова порожня сторінка. Зберігаємо сторінку, але перед тим, як зберегти її, у вікні «Зберегти» створюємо папку, наприклад EN101, в якій створюємо вкладену папку images для малюнків, а потім зберігаємо сторінку в папці EN101. Ім'я сторінки призначаємо - index, що означає домашня або головна сторінка. Редактор зберігає сторінку з розширенням .htm. Таким чином, в папцітеці EN101 знаходитиметься вкладена папка images і файл index.htm.
Малюнки для веб-сервера - сторінки мають бути заздалегідь підготовлені і вставлені в папку images, причому ім'я малюнка повинне складатися з символів латинського алфавіту. Скопіюємо в папку images малюнки для створення веб-сервера – сторінки, присвяченої вивченню англійської мови в Інтернет.
Далі необхідно здійснити розробку сторінки. Розробка сторінки починається з її розмітки. Для розмітки сторінки використовуються таблиці, можна застосувати Макети сторінки, які розташовані на панелі завдань "Макети таблиці і комірки" в області Завдань. Встановимо в області Завдань "Макетні таблиці і комірки"
Далі клацаємо на необхідному макеті таблиці, внаслідок чого отримаємо розмічену сторінку, яка зображена на малюнку.
1. Встановлюємо ширину (у точках або відсотках) сторінки рівну 900 точок (ширина першого стовпця – 213 точок, ширина другого стовпця – 687 |точок). Для цього підводимо покажчик миші до верхньої межі і коли вона прийме вид нахиленої вліво стрілки, клацаємо лівою кнопкою миші, з'являться списки, що розкриваються, розкривши які можна змінити ширину стовпця.
2. Вирівнюємо сторінку по центру. Встановлюємо розмір межі, колір. Для цього клацаємо на тег таблиці <table|>, що розкривається (на панелі швидкий виклик тега) і вибираємо команду «Властивості тега», потім у вікні діалогу «Властивості таблиці», що відкрилося, встановлюємо: Вирівнювання по центру, Межі: розмір – 1 і колір – темно-синій (код: 000080).
3. У елементах таблиці встановлюємо цифри: 1, 2, 3, 4 (ці цифри будуть замінені вмістом комірок), щоб можна було легко орієнтуватися. Отже, в першу комірку можна встановити малюнок ("Вставка / Малюнок / З файлу", вибираємо малюнок з папки images|). Вставимо, наприклад, логотип компанії EN101, яка веде курси дистанційного навчання іноземних мов в Інтернет.
4. Встановлюємо фон комірки 1 і 2 аналогічний до фону логотипу (існують додатки для підбору кольору, наприклад, «Квіточка ver. 5.1») код кольору - dee7ef. Для заливки комірки кольором необхідно клацнути на тег комірки <td> (на панелі швидкий виклик тега), що розкривається, і вибрати команду «Властивості тега», потім у вікні діалогу «Властивостікомірки», що відкрилося, встановлюємо колір фону – (код: dee7ef).
5. У другукомірку поміщаємо заголовок сайту, наприклад «Англійська мова в Інтернет». У режимі конструктора вводимо текст. Вибираємо шрифт Verdana (найбільш поширений шрифт для веб-сервера - сторінок), розмір 24 пт, колір темно-синій (код кольору: 000080), вирівнювання по центру.
6. У комірці 3 розміщуємо навігацію для переходу на інші (майбутні) сторінки. Вводимо текст НАВІГАЦІЯ шрифтом Verdana, розмір шрифту 12 пт, вирівнювання по центру. Далі вводимо текст (шрифтом Verdana, розмір шрифту 8 пт): Головна, Про компанію En101, Бізнес-огляд проекту, Способи оплати, виділяємо ці рядки і клацаємо на кнопці Маркери на панелі інструментів форматування. Таким чином, створили маркований список для навігації.
7. Встановлюємо гіперпосилання для рядка Головна. Виділяємо рядок Головна, клацаємо правою кнопкою миші і з контекстного меню вибираємо команду Гіперпосилання. Відкриється вікно діалогу, в якому треба в папці EN101 виділити файл index і натиснути ОК.
8. Створюємо посилання на партнерські сайти. Встановлюємо курсор нижче за списком і вибираємо команду "Таблиця / Вставити / Таблиця", у вікні діалогу , що відкрилося, встановлюємо: Рядків – 1, Стовпців – 1; Вирівнювання – по центру; Задати ширину: 98%; Задати висоту: 30 в точках,; Межі: розмір – 1, колір–темно-синій (код: 000080); Фон: колір–темно-синій (код: 000080). Далі клацаємо Застосувати і ОК. Потім в створену таблицю вводимо текст «ПАРТНЕРСЬКІ САЙТИ», шрифтом Verdana| розмір шрифту 10 пт, вирівнювання по центру, колір білий.
Нижче таблиці ПАРТНЕРСЬКІ САЙТИ вводимо адреси потрібних сайтів:
http://lessons-tva.info/
http://tva.jino.ru/
http://vladant.inmarket.biz/
http://tva.en101.com
http://en101.tva.jino.ru/
і створюємо гіперпосилання. Наприклад, виділяємо адресу http://lessons-tva.info і викликаємо контекстне меню, в якому вибираємо команду Гіперпосилання. У вікні діалогу, що відкрилося, в рядку Текст виділяємо http://lessons-tva.info і копіюємо (Ctrl+C), потім встановити курсор в рядок Адреса і вставляємо з буфера обміну (Ctrl+V), клацаємо ОК.
Вміст третьої комірки зображений на малюнку.
9. У комірці 4 розміщуємо текст і малюнки. Текст можна вводити з клавіатури або вставляти скопійований текст з буфера обміну. Текст вводиться, редагується і форматується як в будь-якому текстовому редакторові. Малюнки можна вставляти лише з тпапки images, яку заздалегідь створюємо при збереженні веб-сервер – сторінки.
10. Додаємо таблицю для запису: Copyright| © Англійська мова в Інтернет, 2007. All Rights Reserved, яка призначена для захисту Вашої інтелектуальної власності на дану веб-сторінку. Крім того, в цій таблиці розташовуються лічильники. Для цього встановлюємо курсор нижче сторінки (поза полем сторінки, тобто нижче за третю і четверту комірки) і в області завдань в розділі «Нові таблиці і комірки» вибираємо команду «Вставити макетну таблицю». Розміри цієї таблиці підганяємо під розміри сторінки, наприклад, встановлюємо 900х57 точок, розмір межі - 1, колір - темно-синій (код: 000080), колір фону - білий. У створену таблицю вводимо текст Copyright| © Англійська мова в Інтернет, 2007. All Rights Reserved
11. Додаємо колір фону довкола сторінки. Вибираємо команду Формат / Фон, у вікні діалогу, що відкрилося, на вкладці форматування встановлюємо колір фону – темно-синій (код: 000080)
12. Додаємо і заповнюємо метатеги (між тегами|<head> і </head>) в режимі Код:
<title>Английска мова в Інтернет</title>
<meta name="keywords|" content="EN101| курси англійської мови навчання реєстрація">
<meta name="description|" content="Курсы| дистанційне навчання англійській мові в Інтернет">
<meta NAME="Author|" CONTENT="Володимир Ткаченко">
<meta content="INDEX|, FOLLOW|" name=ROBOTS|>
Внаслідок розробки отримаємо готову веб-сторінку, фрагмент якої зображений на малюнку.
Для розробки власної веб-сторінки скачайте:
· Зразок створеної веб-сторінки - Скачати
· Додатки для підбору кольору - "Color" - Скачати
· Книга Book-html. Ази HTML - Скачати