Кнопка Удалить… (6)
позволяет
выделенный		селектор
	Пользовательские
стили.			на кнопку
Создать...			открывает
диалоговое			Создание
стиля , в котором			создаются
	селекторы. Нажатие
на кнопку Изменить… (8)
открывает диалоговое
Изменение		стиля , которое			Рисунок 5.40 – Диалоговое окно Стиль

полностью совпадает с окном Создание стиля и служит для изменения описания выделенного селектора. В случае изменения стиля для тэга из списка Тэги HTML , этот селектор тэга переносится в список Пользовательские стили .

	При работе с диалоговым окном
	Изменение	(Создание) стиля
	используются следующие поля и кнопки.
	В поле Имя (для выбора) (1) : вводится
	имя селектора (имя селектора тега должно
	совпадать с именем самого тега; имя
	селектора класса начинается с точки (.).
	Кнопка Формат (2) позволяет получить
	доступ к выпадающему списку, в котором
	можно выбрать следующие пункты:
	Шрифт… –		открывает	диалоговое	Рисунок 5.41 – Окно Изменение стиля
		Шрифт,	позволяющее сделать

стилевые настройки шрифта.

Абзац… – открывает диалоговое окно Абзац , которое позволяет установить абзацные отступы (слева и справа) от окна браузера, отступ для первой строки, настроить интервалы между строками и абзацами, настроить интервалы между словами в абзацах;

Граница… – открывает диалоговое окно Границы и заливка , с помощью которого можно установить границу для выделенного абзаца, залить абзац каким-либо

цветом; Нумерация… – открывает диалоговое окно Список , с помощью которого можно

создать нумерованные, маркированные и другие списки; Положение… – открывает диалоговое окно Положение , с помощью которого

можно точно разместить различные элементы на странице.

Поле Образец (3) показывает, как будет выглядеть объект, к которому будет применен созданный стиль.

В поле Описание (4) выводится текстовое описание атрибутов данного стиля.

Выпадающее меню Тип стиля (5) активно в случае создания селектора класса . При выборе типа Знак , в начало имени селектора добавляется слово span .

	селекторы тегов применяются автоматически после выбора
	соответствующих команд;
	путем выбора их из числа прочих стилей в выпадающем
	списке Стиль (рис.5.42) на панели инструментов
	Форматирование;
	путем выбора		из выпадающего окна Класс: диалогового		Рисунок 5.42 –
					Список стилей
		Изменение
	(рис.5.43), которое открывается
	кнопкой Стиль… из различных
	диалоговых окнах (например:
	Свойства рисунка,			Свойства
	таблицы, Свойства ячейки,
	Список, Разрыв, Свойства
	горизонтальной линии).
			использовании
	внедренных		стилей их

необходимо настраивать для каждой

web-страницы.

Рисунок 5.43 – Окно Изменение стиля

5.4.3. Внешние таблицы стилей.

В этом случае для определения стилей CSS отводится отдельный файл, на который будут ссылаться web-страницы. Такой подход:

обеспечивается централизованное управление стилями CSS на всех web-страницах

(внесенные изменения будут автоматически применяться сразу на всех web-страницах, которые ссылаются на файл, содержащий CSS);

уменьшается суммарный размер web-сайта;

увеличивается скорость загр узки web-страниц.

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

Выполнить команду Файл→Создать и выбрать команду Другие шаблоны страниц…

В открывшемся диалоговом окне Шаблоны страниц , выбрать вкладку Таблицы стилей (2), на которой показаны шаблоны таблиц стилей, входящие в состав FrontPage

Для самостоятельного создания таблицы стилей выбрать шаблон Обычная таблица стилей (3) и щелкнуть по кнопке OK.

Рисунок 5.44 – Создание внешнего файла стилей

Полученную страницу с расширением.css необходимо сохранить (команда Файл→Сохранить ) в одну из папок web-сайта с именем заданным обязательно

латинскими буквами и расширением .css .

Создать описание для селекторов тэгов и селекторов классов , используя команду Формат→Стиль… , которая открывает диалоговое окно Стиль (рис.5.40), описанное в предыдущем разделе.

Созданную таблицу стилей нужно связать со страницами web-сайта. Для этого необходимо.

Выполнить команду Формат→Связи с таблицами стилей… .

В открывшемся диалоговом окне Связать с

таблицей стилей		можно установить
следующие параметры:
переключатель все страницы (1) применяет
стили ко всем выделенным страницам web-сайта;
переключатель	выделенные	страницы
применяет стили к текущей странице или к web-
страницам, выделенным на панели Список папок;
кнопка Добавить… (3) служит для добавления
				Рисунок 5.45 – Диалоговое окно
кнопка Удалить (4) служит для удаления файла,				Связать с таблицей стилей

с таблицами каскадных стилей к web-страницам (если используется несколько таблиц каскадных стилей);

Кнопка Изменить (7) открывает выделенный в окне Адрес URL: (8) css-файл для редактирования.

Нажать кнопку OK.

К выделенным объектам селекторы применяются по-разному:

селекторы тегов применяются автоматически после выбора соответствующих команд;

селекторы классов применяются:

Путем выбора их из числа прочих стилей в выпадающем списке Стиль (рис.5.42) на панели инструментов Форматирование :

Путем выбора из выпадающего окна Класс: диалогового окна Изменение стиля

(рис.5.43), которое открывается кнопкой Стиль… из различных диалоговых окнах

(например: Свойства рисунка, Свойства таблицы, Свойства ячейки, Список,

Разрыв, Свойства горизонтальной линии).

5.5. Фреймы (кадры) в приложении FrontPage 2003.

Фреймы - средство для разделения окна браузера на несколько областей

(фреймов), в каждой из которых отображается содержимое отдель ной web-страницы. Каждая область может иметь свои полосы прокрутки и ее просмотр с помощью них, не влияет на остальные области. С помощью программы FrontPage 2003 можно создавать различные фреймовые структуры, вставлять встроенные фреймы и в зависимости от

характера представляемой информации организовывать соответствующие гиперссылки. Все команды связанные с фреймовой структурой переведены со словом рамки .

Для организации фреймовой структуры необходимо (рис.5.46).

Рисунок 5.46 – Создание страницы фреймов Выполнить команду Файл→Создать и выбрать команду Другие шаблоны страниц…

(1) из области задач Создание .

В открывшемся диалоговом окне Шаблоны страниц , выбрать вкладку Страница рамок (2), на которой показаны шаблоны (3) web-страниц c фреймовой структурой,

входящие в состав MS FrontPage 2003.

Выделить наиболее подходящий шаблон и нажать кнопку "OK".

Окно новой web-страницы фреймов (рис.5.47) будет разбито на части в соответствии с выбранной структурой. Эту страницу необходимо сохранить (Файл→Сохранить ) в одну из папок web-узла с именем (1) заданным обязательно латинскими буквами .

Рисунок 5.47 – Новая web-страница фреймов

1) Кнопка Задать начальную страницу… (2) позволяет выбрать уже готовую web- 5

страницу сайта в окне Добавление гиперссылки .

2) Кнопка Создать страницу (3) загружает во фрейм новую пустую web-страницу,

редактирование которой может быть выполнено обычным образом.

Если часть фреймов заполняется с помощью кнопки Создать страницу , то при сохранении страницы фреймов (Файл→Сохранить ) отдельно сохраняется каждая новая web-страница (имена задаются обязательно латинскими буквами ).

При работе со страницей фреймов на панели кнопок представления появляется еще одна кнопка Без рамок (4). В этом режиме редактируется содержимое, которое будет отображаться в браузере, если он не поддерживает показ фреймов.

Работа над web-страницами входящими во фреймовую структуру возможна как по отдельности, так и через страницу фреймов

Для выбора одного из фреймов нужно нажать на него левой кнопкой мыши. Активный фрейм отличается от прочих цветной рамкой (5). Если нажать левой кнопкой мыши на внешнюю рамку страницы фреймов, то выделенной окажется вся фреймовая структура. Границы фреймов можно перемещать нажатой левой кнопкой мыши.

Для работы с выделенным фреймом можно воспользоваться командами меню

Рамки.

Команда Разделить рамку позволяет разбить фрейм на две части по вертикали или горизонтали.

Команда Удалить рамку удаляет фрейм из страницы фреймов. При этом если web-

страница загружаемая в этот фрейм была сохранена ранее, она остается в структуре web-сайта.

Команда Открыть страницу в новом окне открывает web-страницу фрейма для редактирования отдельно от фреймовой структуры.

Команда Свойство рамки… открывает диалоговое окно

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

Рисунок 5.48 – Встроенный фрейм

Еще один вариант использования фреймов – вставка в обычную web-страницу встроенного фрейма (рамки) (рис.5.48) командой Вставка→Встроенная рамка . В

результате в том месте, где был установлен курсор, вставляется рамка, которую можно заполнить двумя способами: Задать начальную страницу… или Создать страницу .

Щелчок левой кнопкой мыши на границу рамки, выделяет фрейм для изменения его размеров. Двойной щелчок левой кнопкой мыши на границу рамки откры вает диалоговое окно Свойства встроенной рамки , в котором можно задавать различные параметры

фрейма: имя фрейма, название, размеры, отступы, выравнивание, замещающий текст.

		организации
гиперссылок
страницами		фреймовой
структуры		необходимо с
	диалоговое
Конечная рамка (рис.5.49)
и указать, куда будет
загружаться		новый объект.
Поле Текущая			страница		Рисунок 5.49 – Диалоговое окно Конечная рамка

рамок (2) позволяет щелчком левой кнопки мыши выбрать фрейм для загрузки нового объекта. В списке (загрузка в тот же фрейм, откуда организовывалась гиперссылка), (загрузка в новое окно браузера), (загрузка во встроенную рамку).

5.6. Формы в приложении FrontPage 2003.

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

В приложении FrontPage 2003 поддерживаются различные обработчики форм, располагаемые на web-серверах, работающих под управлением FrontPage Server

Extensions (серверные расширения Microsoft FrontPage - набор программ и сценариев, поддерживающих создание страниц в Microsoft FrontPage и расширяющих функциональные возможности веб-сервера), SharePoint Team Services версия 1.0 (Microsoft) или Microsoft Windows SharePoint Services 2.0. Эти обработчики принимают результаты форм и производят над ними различные действия. В приложении FrontPage

поддерживаются также сценарии, например ISAPI, NSAPI, CGI и ASP.

Существуют три способа создания формы в MS FrontPage 2003.

1) Добавление пустой формы с кнопками Отправить и Сброс , командой

Вставка→Форма→Форма.

2) Вставка первого поля формы командой Вставка→Форма→Поле формы . Область формы с кнопками Отправить и Сброс добавляется автоматически.

3) Выбор и использование доступного шаблона формы или мастера страницы форм с помощью следующих действий.

В области задач Создание страницы (команда Файл→Создать ) нужно выбрать

команду Другие шаблоны страниц… и вкладку Общие.

Выбор одного из шаблонов Гостевая книга, Регистрационная форма, Страница поиска, Форма обратной связи позволяет создать новую web-страницу с типовой формой.

Выбор шаблона Мастер страницы формы запускает мастер страницы формы для определения количества, типа, содержания элементов формы.

Область формы отображается в пунктирной рамке, которая видна только в режиме Конструктор.

Для задания свойств формы нужно установит курсор внутри формы, и выполнить команду Вставка→Форма→Свойства формы… или щелкнуть правой кнопкой мыши в область формы и выбрать команду контекстного меню Свойства формы… . В результате открывается диалоговое окно Свойства формы (1 рис.5.50), в котором устанавливаются различные параметры формы.

Секция Сохранение результатов (2) определяет конечный сценарий обработки данных формы. В случае использования собственных сценариев необходимо установить переключатель в другом месте (3) и из списка выбрать Настраиваемый сценарий… .

Рисунок 5.50 – Настройка параметров формы

Поле Имя формы: (4) служит

для указания имени формы.

Кнопка Конечная рамка

открывает диалоговое окно

Конечная рамка, в котором

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

Кнопка Параметры… (6)

открывает диалоговое окно

Параметры обработчика

форм (7). В поле Действие:

(8) указывается имя скрипта для обработки формы или mailto: e-mail для отправки данных формы на адрес электронной почты e-mail. В поле Метод: (9) выбирается способ передачи данных (GET способ передачи данных через адресную строку, POST – способ передачи данных в теле HTTP запроса). В поле Тип кодировки: (10)

указывается тип кодировки данных формы при отправке на web-сервер. Возможные типы кодировок: application/x-www-form-urlencoded - данные формы кодируются как пары имени и значения, используется по умолчанию; multipart/form -data - данные формы кодируются как сообщение с отдельными частями для каждого элемента управления на странице, используется для отправки форм, содержащих файлы; text/plain – данные формы кодируются как открытый текст, без управляющих и форматирую щих символов,

используется для отправки данных на адрес электронной почты.

Кнопка Дополнительно… (11) открывает окно Дополнительные свойства формы

для редактирования скрытых полей формы (кнопки Добавить… , Изменить… ,

Удалить).

Чтобы добавить в форму поле формы, нужно выполнить команду Вставка→Форма

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

определяет последовательность заполнения полей формы в браузере. Кнопку Проверить… в этом окне можно использовать только в том случае если используется стандартный обработчики форм FrontPage 2003. Кнопка Стиль…

текстовое

применяется для ввода короткого

сообщения, например имен и

электронной

Параметры

поля (имя, начальное значение,

устанавливаются

диалоговом

окне Свойства текстового поля.

Рисунок 5.51 – Поля формы

Текстовое

используются для ввода одной или нескольких строк текста, например комментария.

Это поле прокручивается, что позволяет вводить в него тексты разного объема. Параметры поля (имя, начальное значение, ширина в знаках, число строк) устанавливаются в диалоговом окне Свойства текстового поля .

Поле отправки файла (3) – служит для отправки файла на web-сервер в указанную папку web-сайта, состоит из поля для ввода имени файла и кнопки обзор, которая позволяет открыть диалоговое окно Выбор файла . Параметры поля (имя, ширина в знаках) устанавливаются в диалоговом окне Свойства поля отправки файла .

Флажок (4) – служит для организации выбора элемента, пользователь может установить или снять флажок по своему усмотрению. Параметры поля (имя, значение, начальное состояние) устанавливаются в диалоговом окне Свойства флажка .

Переключатель (5) – служит для организации выбора из списка, в котором можно выбрать только одно значения (несколько полей переключатель с одним и тем же именем группы). Параметры поля (имя, значение, начальное состояние) устанавливаются в диалоговом окне Свойства переключателя .

Раскрывающийся список (6) – служит для организации выбора из раскрывающегося списка одного или нескольких вариантов. Заполнение поля (кнопки Добавить… , Изменить… , Удалить , Вверх , Вниз ) и его параметры (имя, высота в строках,

разрешение выбора нескольких элементов) устанавливаются в диалоговом окне

Свойства раскрывающегося списка. При заполнение поля (кнопки Добавить…,

Изменить… ) открывается дополнительное диалоговое окно Добавление или

Изменение варианта . В этом окне задается название варианта (поле Вариант: ),

значение, которое будет передано при отправке формы в случае выбора этого варианта

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

Для перемещения по Web-странице, как и в любом текстовом редакторе, можно использовать полосы прокрутки, клавиши со стрелками на клавиатуре и комбинации клавиш. Так, например, для перехода в начало страницы используется комбинация клавиш +, в конец страницы - +. Клавиши И Позволяют переместиться на один экран вверх или вниз, соответственно.

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

Диалоговое окно Шаблоны веб-узлов (Web Site Templates), открываемое при создании нового сайта, содержит шаблоны, предлагающие создать пустой или одностраничный сайт. Необходимое для размещения информации количество страниц вы добавляете в сайт самостоятельно. Это могут быть новые страницы, на которых вы позднее разместите информацию, или Web-страницы, созданные ранее как с использованием программы FrontPage, так и с помощью других программных продуктов.

Замечание

Вопросы импортирования файлов в данном уроке затронуты не будут, так как этому будет посвящен отдельный урок.

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

• Кнопку Создать (New) на стандартной панели инструментов
• Команду Создать (New) меню Файл (File), размещающую в окне программы FrontPage панель Создание веб-страницы или узла (New Page or Web)
• Комбинацию клавиш +

При использовании комбинации клавиш или нажатии кнопки Создать (New) на стандартной панели инструментов в сайт по умолчанию добавляется пустая страница, созданная с использованием шаблона Обычная страница (Normal Page).

В том случае, если при создании новой страницы вы хотите использовать какой-либо иной шаблон, вам необходимо открыть диалоговое окно Шаблоны страниц (Page Templates) (рис. 16.1), содержащее список шаблонов страниц, предлагаемых программой FrontPage. Для открытия этого окна выполните одно из следующих действий:

• В меню кнопки Создать (New) стандартной панели инструментов выберите команду Страница (Page)
• В меню Файл (File) выберите команду Создать (New), а затем из открывшегося подменю - опцию Страница или веб-узел (Page or Web). В окне программы FrontPage появляется панель Создание веб-страницы или узла (New Page or Web), на которой выберите команду Шаблоны страниц (Page Templates)

Рис. 16.1. Диалоговое окно для выбора шаблона создаваемой страницы

Диалоговое окно Шаблоны страниц (Page Templates) содержит список шаблонов. Выберите в нем шаблон, который хотите использовать при создании новой страницы. Используя область Образец (Preview) диалогового окна, просмотрите, какой вид она будет иметь. Нажмите кнопку ОК для закрытия окна и размещения шаблона страницы в сайте.

В результате добавления новой страницы в сайт в рабочей области программы FrontPage появится пустая страница с названием newjage_l.htm (рис. 16.2). Это название указывает на то, что данная страница является первой, создаваемой вами с момента запуска программы. При создании последующих страниц FrontPage присваивает им имена с возрастающими номерами: new_page_2.htm, newjage_3.htm и т. д.

Рис. 16.2. В сайт добавлена новая страницы, созданная с использованием шаблона "Обычная страница"

Тема 3.4: Применение Интернет в экономике и защита информации

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

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

3.3.4. Создание сайта и веб-страниц в FrontPage

Планирование сайта

Планирование сайта является одной из самых сложных задач. Как правильно расположить на страницах будущего сайта имеющуюся у Вас информацию? Какова должна быть структура сайта? Какие страницы должен иметь сайт? Какой дизайн должны иметь страницы сайта? Какая должна быть навигация по сайту?

Эти и многие другие проблемы, связанные с разработкой сайта, должны быть решены до применения прикладных программ для разработки сайтов.

Допустим, что мы решили разработать сайт, на котором будет представлена информация о компании EN101, эту имеющуюся у нас информацию мы можем изложить на четырех страницах:

1. Главная
2. О компании
3. Бизнес-обзор проекта
4. Способы оплаты

Выбираем имя сайта исходя из вида деятельности, например: lessons-en101.

Назначаем имена страницам:

• index – Главная;
• info - О компании;
• business- Бизнес-обзор проекта;
• pay - Способы оплаты.

В качестве главной страницы используем созданную ранее веб-страницу Главная (index). Создаем структуру сайта, которая представлена на рисунке.

Рис. 1.

Подготовим текст в редакторе Word для каждой страницы и рисунки в Adobe Photoshop в форматах GIF, JPEG или PNG с разрешением 72 пикс/дюйм, кроме того, можно использовать скрипты.

Далее можно зарегистрировать домен второго уровня в одной из зон (ua, ru, com, net, info и т.д.) и после разработки сайта выбрать платный хостинг, который устраивает по скорости доступа и предоставляет необходимые услуги для эффективной работы сайта. Если мы будем располагать сайт на бесплатном хостинге, то можно выбрать, например, хостинг на сервере narod.ru. Для этого необходимо будет зарегистрироваться на сервере и получить бесплатный хостинг. В этом случае у Вас будет домен третьего уровня, например: lessons-en101.narod.ru.

Создание сайта с помощью приложения FrontPage

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

Затем выполняем команду Файл / Создать и в отрывшейся области задач «Создание» щелкаем мышью на «Другие шаблоны веб – узлов» в разделе «Создать Веб-узел». Откроется окно диалога «Шаблоны веб – узлов», в котором необходимо выделить «Пустой веб – узел», далее указать расположение нового веб-узла (например, D:\Documents and Settings\ТВА\Мои документы\Мои веб-узлы\lessons-en101) и щелкнуть ОК. На рисунке представлен фрагмент окна диалога «Шаблоны веб – узлов», в котором указан адрес нового сайта.

Рис. 2.

После сохранения сайта на экране в окне приложения FrontPage будет отображаться новый веб-узел в режиме папки.

Рис. 3.

2. Создание в FrontPage домашней страницы для нового сайта. Создание домашней страницы в FrontPage можно осуществлять по-разному. Например, можно щелкнуть на кнопке «Создать страницу» на панели «Содержимое», в результате в окне веб-узла добавится страница index.htm, которая показана на рисунке

Рис. 4.

3. Затем копируем содержимое ранее созданной папки EN101, в которой находятся папка images и страничка index (папка _vti_cnf формируется автоматически при создании веб-страницы). Содержимое папки EN101 представлено на рисунке.

Рис. 5.

Вставляем сохраненное содержание папки EN101 из буфера обмена во вновь созданную папку веб-узла lessons-en101, которая представлена на рисунке.

Рис. 6.

Рис. 7.

Таким образом, в качестве домашней страницы в новом сайте использована ранее созданная страница index.htm (Английский язык в Интернет). Можно создавать главную страницу и другими способами, изложенными в разделе 3.3.2. Знакомство с программой FrontPage.

5. Создаем в редакторе FrontPage структуру сайта, т.е. к главной странице добавим еще три страницы: info - О компании; business - Бизнес-обзор проекта; pay - Способы оплаты. Для этого надо перейти в режим Переходы, выполнив команду Вид/Переходы. Затем необходимо выделить домашнюю страницу и щелкнуть на кнопке Новая страница на панели Переходы или применить контекстное меню, добавится Новая страница 1. Аналогичным образом добавляем еще две новые страницы. Структура сайта представлена на рисунке.

Рис. 8.

6. Переименование Новых страниц в FrontPage. Переходим в режим папки и с помощью контекстного меню меняем имена Новая страница 1 на info , Новая страница 2 на business , Новая страница 3 на pay .

Рис. 9.

7. С целью единства дизайна страниц сайта копируем содержание главной страницы в созданные страницы info, business, pay. Для этого открываем главную страницу в режиме Страница и выполняем команду "Правка / Выделить все", и щелкаем на кнопке Копировать на панели инструментов. Переходим в режим Папки и щелкаем дважды на страничке info, она откроется в режиме Страница, затем щелкаем на кнопке Вставить. Содержимое главной страницы скопируется в страницу info, аналогично копируем содержимое главной страницы в остальные две страницы.

• Главная;
• О компании;
• Бизнес-обзор проекта;
• Способы оплаты.

Например, выделяем пункт навигации "Бизнес-обзор проекта" и с помощью контекстного меню открываем окно диалога Добавления гиперссылки, в котором выделяем business.htm и щелкаем ОК. Аналогично создаем гиперссылки для всех пунктов навигации на всех страницах. На рисунке представлен фрагмент окна диалога Добавления гиперссылки.

Рис. 10.

10. Добавляем и заполняем метатеги (между тегами и ) на страницах: "О компани"; "Бизнес-обзор проекта"; "Способы оплаты" в режиме Код.

Например, для страницы "О компании" теги заполнены следующим образом:

11. Переименование заголовков страниц в режиме Переходы. Выделить страницу и с помощью контекстного меню осуществить переименование:

• новая страница 1 переименовать на "О компании".
• новая страница 2 переименовать на "Бизнес-обзор проекта".
• новая страница 3 переименовать на "Способы оплаты".

В результате разработки получим сайт, который состоит из четырех веб-страниц. Этот сайт, созданный с помощью FrontPage в файловой системе ПК, можно разместить на веб-сервер в сете Интернет или Интранет.

Для разработки собственного сайта в FrontPage скачайте.

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

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

Это простой в освоении и удобный Web-редактор для проектирования, подготовки и публикации Web-сайтов. Благодаря интеграции с семейством продуктов MS Office, привычному интерфейсу и обилию шаблонов программа позволяет быстро освоить работу даже начинающим пользователям, знакомым с основами работы в MS Word. При этом FrontPage нельзя назвать решением для «чайников»: программа предоставляет широкие функциональные возможности и разнообразные средства оптимизации интернет страниц.

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

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

Общий вид программы Microsoft FrontPage

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

Справа на рисунке показан общий вид программы со стандартным набором инструментов, при помощи которых можно сделать шаблон страницы с текстом, ссылками и картинками. Зайдите во вкладку "Вид" далее "Панель инструментов" и убедитесь, что включены "Cтандартная ", "Форматирование " и "Таблицы ", этих инструментов будет достаточно для создания просто страницы. Снизу обратите внимание на вкладки "Конструктор", "Код" и "Просмотр" - это три разных режима в которых можно всё время просматривать, как выгляди создаваемая страница.

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

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

Создаём шаблон для страниц в FrontPage

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

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

1. Чтобы вставить таблицу заходим во вкладку "Таблица" > "Вставить" > "Таблица" и заполняем поля, как это показано на рисунке справа. Фактический можно ввести свои параметры, но данная таблица имеет фиксированную ширину и вытянута на 100% площади экрана. Таким образом таблица компактно будет отображаться в браузере.
2. Затем необходимо настроить все три ячейки, так как они после вставки имеют одинаковую высоту. Нажимаем правой кнопкой мышки на самой верхней ячейки и заходим в "Свойства ячейки" в поле высота вписываем условно "150" и ставим галочку "в точках", т.е. размер ячейки составит 150 пикселей. В этом же меню мы можем выбрать цвет фона ячейки, а нажав в меню "стиль..." можно внести другие настройки ячейки, например выбрать цвет и размер границы ячейки, с этим можете поэкспериментировать и посмотреть результат. В самой ячейке можно вписать название сайта.
3. Далее редактируем вторую ячейку, которая предназначена для ссылок навигации по сайту. Ширину делаем около 40 пикселей, этого будет достаточно, ну и другие настройки, как цвет фона и полей настраиваем на свой вкус. Далее пишем названия самих ссылок разделяя знаками вертикальной линии или другим знаком (просмотреть можете ниже скачав полностью шаблон). Выделяем тест и жмём кнопку выравнивания по центру, также как и в MSWord. Таким же образом можно менять шрифт, размер шрифта и другие настройки текста.
4. Также настраиваем последнюю ячейку. Она предназначена для основного текста, где можно внести текст приветствия.
5. Напоследок можно зайти во вкладку "Файл" > "Свойства", где можно внести название сайта и изменить общий фон страницы и другие общие настройки

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

Такой получаем шаблон для сайта

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

Этот HTML код можно сразу вставить в редактор во вкладке "Код" и сразу увидите готовый шаблон. Его можно менять и редактировать под собственные нужды. Здесь стоит пояснить, что там, где вставляется основной текст и чтобы он не располагался вплотную к полям он был обрамлен в тэг "div", c настройкой отступа, как это показано в примере.

Дополнительные шаблоны

1. Нужно также знать, что в программе FrontPage, да и других подобных программах существуют стандартные шаблоны, по которые можно использовать для создания страниц, они легко редактируются и можно подогнать любой шаблон под свои нужды. Для того, чтобы выбрать стандартный шаблон перейдите во вкладку "Файл" > "Создать..." в открывшимся окне выбрать "Другие шаблоны страниц", где можно выбрать любой понравившейся шаблон.
2. Есть второй вариант - скачать полностью шаблон из интернета. Сайтов предоставляющих такой сервис очень много. шаблоны могут быть как платными, так и бесплатными. Скачав тот или иной шаблон, его можно редактировать в программе, заполнять нужным содержанием и менять стиль того или иного элемента.

Использование стандартных макетов таблиц и тем

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

Нужно знать, что в Microsoft FrontPage есть стандартный набор макетов таблиц и тем, при помощи которых можно неплохо научится искусством создания обычных страниц или сайтов визиток. И так справа вверху есть выпадающее меню (смотрите картинку справа, где также отображён результат использования матектов таблиц и темы оформления), нажав появится меню, в котором нужно выбрать "Макетные таблицы и ячейки" и далее ниже появится много различных макетов таблиц, можно выбрать любой по своему усмотрению и вкусу. Таким образом это освобождает создавать самому таблицу вручную.

И так набрав или вставив свой текст, логотип, ссылки в ячейки таблицы, зайдя в то же меню можно выбрать меню "Тема", где можно выбрать различные темы для оформления страницы, ссылок, фона страницы и многое другое. Такая возможность хороша для тех, кто только учиться создавать интернет страницы и вполне наглядно отражает сам процесс создания сайта. Другими словами, в Microsoft FrontPage можно экспериментировать с различными настройками и видеть наглядно, как преображается та или иная страница. Тут можно дать один совет, изучайте все функции программы и не бойтесь наживать на то или иной меню, так как у каждого инструмента есть своё свойство и предназначение для формирования полноценной страницы

Вставляем картинку и создаём ссылки на страницы

Важно начинающим веб-мастерам знать, как вставлять картинки в страничку и делать ссылки на другие страницы. Например вместо текста названия сайта можно вставить рисунок логотипа сайта. Для этого сначала нажмите в поле, куда необходимо вставить изображение, затем в самом верху нажмите на вкладку "Вставка" > "Рисунок" > "Из файла", выберите нужный рисунок и нажмите "Вставить", после чего рисунок появится на странице. Нажав по рисунку правой кнопкой мышки можно выйти в меню с дополнительными настройками изображения. Важно, чтобы все картинки находились в одной строго определённой папке для всех изображений.

Для перехода на другие страницы сайта необходимо создать ссылки, по которым пользователи смогут посетить все страницы сайта. Для это нужно выделить нужный текст для ссылки и перейти во вкладку "Вставка" > "Гиперссылка", в открывшемся меню нужно указать страницу, на которую создаётся ссылка, и нажать "ок". В этом же окне есть другие настройки для ссылок такие, как открывать ссылку в новом окне или нет. В принципе это можно изучить самостоятельно.

Заключение

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

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

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

Статьи по схожей тематике

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

Простая Веб страницав программе Frontpage

Структура веб страницы несложная. Вверху располагается название сайта, сразу под ним - горизонтальное меню. Справа - вертикальное меню, а внизу - " подвал" . По центру же находится " тело" сайта. Это и есть основные элементы самой обычной страницы сайта.

Кстати, Вы сейчас находитесь на точно такой же веб странице. Как видите, ее структура очень проста. Здесь все под рукой. Кликнув на горизонтальное или вертикальное меню, Вы перенесетесь на другие страницы сайта.

Они тоже созданы по подобию самой простой веб страницы, о которой мы говорили выше. Найдите время, чтобы просмотреть бесплатный курс Школы Продающих Сайтов и Вы узнаете, как быстро и легко можно создать страницу, и даже сайт!, за один вечер.

Шапка для сайта

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

Шапка для сайта

Меню для сайта

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

Горизонтальное меню сайта

Тело сайта

Это основная часть сайта , в которой размещается вся основная информация. Именно в теле сайта вы сейчас читаете эту статью.

Вертикальное меню для сайта

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

Подвал сайта

Подвал сайта находится в самой нижней части веб страницы. Здесь располагается информация об авторских правах и контактная информация.

Подвал сайтав программе Frontpage

Подведение итогов

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