Прикладные программы для создания сайта

3.3. Прикладные программы  для создания сайта. FrontPage 2003 – это визуальный html-редактор  для быстрого создания  сайта и Web-страниц 

3.3.2. Знакомство с программой FrontPage 

Прикладная  программа FrontPage 2003 – это визуальный html-редактор для быстрого создания сайта.  Язык HTML является основным языком программирования Web - среды. С помощью FrontPage, можно создавать структуру сайта, формировать страницы, добавлять интерактивные средства и загружать файлы на  сервер в сети Интернет. 
 
Web–страницы основаны на языке описания гипертекстовых документов HTML (Hypertext Markup Language). В HTML для определения содержания и формата гипертекстовых документов используются команды, которые называются  тегами (tags). HTML – страницы представляет собой документы в обычном текстовом формате, содержащие специальные команды форматирования (теги HTML).  
 
Для того чтобы создать сайт при помощи FrontPage, нет необходимости учить HTML. FrontPage позволяет довольно просто набрать текст, который можно поместить на Web - страницу, расположить в нужных местах рисунки. Используя FrontPage, можно создавать эффекты, для которых обычно требуются скрипты или программы DHTML. 
 
Сайт или Web-узел – это набор связанных между собой близких по смыслу Web-страниц и файлов. В программе FrontPage существуют мастера, которые позволяют создавать сайт, и шаблоны или  набор предварительно разработанных текстовых и графических форматов, на основе которых могут создаваться новые веб - страницы. Мастера и шаблоны FrontPage позволяют создавать сайты различных типов. 
 
На каждом сайте существует одна Web-страница, которая называется главной или домашней. Домашняя страница – первая Web-страница, на которую попадает посетитель сайта. Используя навигацию или гиперссылки, пользователи смогут попасть и на другие страницы сайта. 
 
Обычно сайт размещается на Web-сервере – компьютере, который предоставляет доступ к Web-страницам посетителям сайта. FrontPage позволяет создавать сайт непосредственно в файловой системе компьютера пользователя, а затем, когда он будет готов, опубликовать его на Web-сервере.

Окно  прикладной программы FrontPage

После запуска  программы FrontPage (Пуск – программы  – FrontPage) на экране появится окно программы, в котором отображается новая  страница (нов_стр_1.htm). В области  задач отображается панель Приступая к работе.

 
Окно прикладной программы FrontPage состоит: из строки заголовка, строки меню, панелей  инструментов редактирования и форматирования, кнопок быстрого выбора тега (для редактирования и ввода тегов), ярлычков вкладок  выбора страниц (для перехода между страницами), рабочего окна, в котором отображается новая страница, панели рисования, кнопок режимов просмотра, индикатора ожидаемого времени загрузки страниц при скорости 56 кбит/с, индикатора размера страниц, области задач. 
 
В программе FrontPage можно пользоваться одним из четырех режимов просмотра: "Конструктор", "Код", "С разделением" и "Просмотр". В режиме "Конструктора" как в любом текстовом редакторе можно в визуальном режиме создавать, редактировать и форматировать страницу, т.е. вводить текст, добавлять рисунки, таблицы. При этом теги языка HTML автоматически добавляются в фоновом режиме, но кодировка HTML на экране не отображается. 
 
В режиме "Код" на экране будет отображаться вся кодировка и можно напрямую редактировать код HTML, а также вводить новые коды. На рисунке представлен HTML – код новой пустой страницы в редакторе FrontPage .

 

В режиме "С  разделением" - на экране отображается Web-страница одновременно в режиме Код  и в режиме Конструктор. В режиме просмотра  Web–страница имеет вид аналогичный ее отображению в Web–браузере. 

Команды, которые  предназначены для работы с Web–страницами  и Web–узлами, расположены в меню Вид программы FrontPage:

·  Страница – это режим просмотра и разработки страницы.

·  Папки – отображается структура папок текущего сайта.

·  Удаленный узел – узел, который находится на сервере сети Интернет.

·  Отчеты – предоставляется сводка об Web – узле.

·  Переходы – отображается структура переходов между страницами сайта.

·  Гиперссылки – открывает список ссылок текущей страницы.

·  Задачи – открывает список задач для текущего сайта

 

Создание Web-страниц в прикладной программе FrontPage

Создание  новой пустой Web-страницы

Если при  открытии окна программы FrontPage в нем  отображается пустая страница, то разработку веб - страницы можно осуществлять на базе этой страницы. Если при открытии редактора FrontPage, отображается пустое главное окно, то для создания новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в области задач Пустая страница. В окне приложения появится пустая страница. Далее необходимо осуществить разработку страницы, т.е. выполнить разметку (структуру) страницы, ввести текст, рисунки и т.д.

 

Создание  веб–страницы на основе шаблонов FrontPage

Создать новую страницу можно также на базе одного из шаблонов. Для этого необходимо выбрать команду «Другие шаблоны страниц» в области задач. На экране будет отображаться окно диалога Шаблоны страниц, в котором представлены различные шаблоны страниц по категориям.

 

Создание  веб–страницы на основе имеющихся Web-страниц  в ПК

Создать веб–страницу можно и на базе имеющихся, на компьютере веб–страниц. Для этого необходимо в области задач выбрать команду  «Из имеющейся страницы» и  в появившемся окне диалога выбрать  требуемую страницу. Далее можно произвести необходимые изменения на странице и сохранить ее под другим именем.

Создание  сайта в прикладной программе FrontPage

Создание  нового пустого сайта или создание веб-узла без содержимого 
Для создания нового пустого сайта  надо выполнить команду Файл/Создать и выбрать в области задач команду «Другие шаблоны веб–узлов». Откроется окно диалога Шаблоны веб–узлов, в котором необходимо выделить Пустой веб–узел и щелкнуть ОК. В окне приложения FrontPage будет отображаться веб - узел, который представлен на рисунке.

 
Для создания пустой домашней страницы в новом веб-узле необходимо перейти  в режим Переходы и щелкнуть на кнопке Новая страница на панели Переходы, в рабочем поле появится домашняя страница (для создания домашней страницы можно также использовать контекстное меню).

 

Дважды щелкните на домашней странице левой кнопкой  мыши, и она откроется в режиме конструктора для редактирования (страница - index.htm). 

 

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

 

Создание  сайта на основе шаблона редактора FrontPage

Для создания сайта на основе шаблона выполните  Файл/Создать и в области задач  щелкните команду Веб – пакеты, откроется окно диалога Шаблоны веб–узлов.

 
Выберите требуемый шаблон или  мастера для создания нового сайта. Созданный сайт имеет разметку и  дизайн, но в нем отсутствует контент. Далее в страницы этого сайта  необходимо ввести соответствующий  текст, рисунки, скрипты, счетчики и другие элементы сайта.

3.3. Прикладные программы  для создания Веб-сайтов

3.3.3. Обучение созданию 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), щелкнуть ОК.