Пошаговое выполнение работы

В приложении FrontPage можно создать веб-страницы на основе:

· пустой страницы (страницы без содержания);

· текстового файла (текстового файла аналогичного файлу созданному в редакторе Блокнот);

· имеющейся страницы (из любой веб-страницы, имеющейся на данном ПК);

· других шаблонов страниц (встроенных шаблонов страниц, которые можно выбрать в окне диалога «Шаблоны страниц»).

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

Рис.1. Окно приложения FrontPage 2003

2. Далее необходимо выполнить команду Файл/Создать и выбрать в области задач Пустая страница. В окне приложения появится новая пустая страница нов_стр_1.htm.

3. Сохраните страницу, но перед тем, как сохранить страницу в окне «Сохранить» создайте папку, например EN101, в которой создайте вложенную папку images или logo для рисунков, а затем сохраните страницу в папке EN101. Имя страницы назначьте - index, что означает домашняя или главная страница. Редактор сохраняет страницу с расширением.htm. Таким образом, в папке EN101, будет находиться вложенная папка images и файл index.htm.

4. В папку images скопируйте подготовленные рисунки для веб-страницы.

5. Далее необходимо осуществить разработку страницы. Разработка страницы начинается с ее разметки. Для разметки страницы используются таблицы (Таблица / Вставить / Таблица), но можно применить Макеты страницы, которые расположены на панели задач "Макеты таблицы и ячейки" в области задач. Установите в области задач "Макетные таблицы и ячейки"

6. Далее щелкните мышью на требуемом макете таблицы, представленном на рис.2, в результате чего получим размеченную страницу. Цифры в ячейки таблицы введены только для пояснения технологии заполнения ячеек.

7. Установите ширину таблицы (в точках или процентах) странички равную 900 точек (ширина первого столбца – 213 точек, ширина второго столбца – 687 точек). Для этого подведите указатель мыши к верхней границе и когда от примет вид наклоненной влево стрелки щелкните левой кнопкой мыши, появятся раскрывающиеся списки, раскрыв которые можно изменить ширину столбца. Можно установить ширину таблицы с помощью раскрывающегося тега таблицы <table> на панели «Быстрый вызов тега». Для этого щелкните на раскрывающийся тег таблицы <table> (на панели быстрый вызов тега) и выберите команду «Свойства тега», затем в открывшемся окне диалога «Свойства таблицы»: задайте ширину, высоту не устанавливайте. Кроме того, установите: Выравнивание по центру, Границы: размер – 1, цвет границы – темно-синий (код: 000080) или любой другой цвет.

8. Установите в первую ячейку любой рисунок ("Вставка / Рисунок / Из файла", выберите рисунок из папки images). Вставьте, например, логотип компании EN101, которая ведет курсы дистанционного обучения иностранных языков в Интернет.

9. Установите фон ячеек 1 и 2 аналогичный фону логотипа или любой фон (существуют приложения для подбора цвета, например, «Цветик ver. 5.1»). Для заливки ячейки цветом необходимо щелкнуть на раскрывающийся тег ячейки <td> (на панели быстрый вызов тега) и выбрать команду «Свойства тега», затем в открывшемся окне диалога «Свойства ячейки» устанавливаем: цвет фона.

10. Во вторую ячейку поместите заголовок сайта, например «Обучение английскому языку». Текст вводите в режиме конструктора. Выберите шрифт Verdana (наиболее распространенный шрифт для веб - страниц), размер 24 пт, цвет темно-синий (код цвета: 000080) или любой другой цвет, выравнивание по центру.

11. Разместите в ячейке 3 навигацию, для перехода на другие (будущие) странички. Введите текст НАВИГАЦИЯ шрифтом Verdana, размер шрифта 12 пт, выравнивание по центру. Далее введите текст (шрифт - Verdana, размер шрифта - 8 пт): Главная, О компании En101, Способы оплаты, выделите эти строки и щелкните на кнопке маркеры на панели инструментов форматирования. Таким образом, Вы создадите маркированный список для навигации.

12. Установите гиперссылку для строки Главная. Выделите строку Главная, щелкните правой кнопкой мыши и из контекстного меню выберите команду Гиперссылка. Откроется окно диалога, в котором надо в папке EN101 выделить файл index и нажать ОК.

13. Создайте ссылки на партнерские сайты. Установите курсор ниже пунктов навигации и выберите команду "Таблица / Вставить / Таблица", в открывшемся окне диалога установите: Строк – 1, Столбцов – 1; Выравнивание – по центру; Задать ширину: 98%; Задать высоту: 30 в точках; Границы: размер – 1, цвет–темно-синий (код: 000080); Фон: цвет - темно-синий (код: 000080). Далее щелкните Применить и ОК. Затем в созданную таблицу введите текст «ПАРТНЕРСКИЕ САЙТЫ», шрифтом Verdana, размер шрифта 10 пт, выравнивание по центру, цвет белый.

14. Ниже таблицы ПАРТНЕРСКИЕ САЙТЫ введите адреса требуемых сайтов, например: http://lessons-tva.info/, http://tva.jino.ru/

15. Создайте гиперссылки для партнерских сайтов. Например, выделите адрес http://lessons-tva.info и вызовите контекстное меню, в котором выберите команду Гиперссылка. В открывшемся окне диалога в строке Текст выделите http://lessons-tva.info и скопируйте (Ctrl+C), затем установите курсор в строку Адрес, вставьте в нее из буфера обмена (Ctrl+V) http://lessons-tva.info и щелкнуть ОК.

16. В ячейке 4 разместите текст и рисунки. Текст можно вводить с клавиатуры или вставлять скопированный текст из буфера обмена. Текст вводится, редактируется и форматируется как в любом текстовом редакторе. Рисунки можно вставлять только из папки images (logo), которую Вы предварительно создали при сохранении веб – страницы и наполнили ее рисунками.

17. Добавьте таблицу для записи: Copyright © Английский язык в Интернет, 2007. All Rights Reserved, которая предназначена для защиты Вашей интеллектуальной собственности на данную веб-страницу. Кроме того, в этой таблице располагаются счетчики. Для этого установите курсор ниже страницы (вне поля страницы, т.е. ниже третьей и четвертой ячеек) и в области задач в разделе «Новые таблицы и ячейки» выберите команду «Вставить макетную таблицу». Размеры этой таблицы подберите под размеры страницы, например, установите 900х57 точек, размер границы - 1, цвет - темно-синий (код: 000080), цвет фона - белый. В созданную таблицу введите текст Copyright © Английский язык в Интернет, 2007. All Rights Reserved

18. Добавьте цвет фона вокруг страницы. Выберите команду Формат / Фон, в открывшемся окне диалога на вкладке форматирование установите цвет фона – темно-синий (код: 000080) или любой другой цвет фона.

19. В режиме Код добавьте на страницу отсутствующие на ней метатеги и заполните нижеуказанные метатеги (между тегами <head> и </head>):

Образец заполнения:

<title>Английский язык в Интернет</title>

<meta name="keywords" content="EN101 курсы английского языка обучение регистрация">

<meta name="description" content="Курсы дистанционного обучения английскому языку в Интернет">

<meta NAME="Author" CONTENT="Владимир Ткаченко">

<META content="INDEX, FOLLOW" name=ROBOTS>

20. Сохраните созданную веб-страницу, с целью использования ее при создании веб-сайта.

Поиск по сайту: