1. Главная
  2. Гаджеты
  3. Как во frontpage выбрать блюда. Создание Web-страниц при помощи программы FrontPage. Подъезжающее выпадающее меню

Как во frontpage выбрать блюда. Создание Web-страниц при помощи программы FrontPage. Подъезжающее выпадающее меню

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

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

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

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

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

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

Обучение созданию Web - страниц

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

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

Попытаемся создать Главную страницу нашегоWeb -сайта!

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


Рисунки для веб - страницы должны быть заранее подготовлены и вставлены в папку Рисунки. Скопируем в папку Рисунки рисунок Офис ООО Динас для создания веб - страницы, посвященной ООО «Динас».

Чтобы созданный вами документ везде корректно определялся как написанный на русском языке, проделайте следующее:

Выберите команду Файл Свойства. Откроется диалог Свойства страницы.

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

Фон страницы

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

1. Зайти в меню Формат Фон и в окне Свойства страницы выбрать через кнопку Обзор необходимый рисунок.


В итоге наша страница примет следующий вид:


Попробуйте выполнить это, но по окончании отмените это действие!

2. В качестве Фона нашей страницы можно использовать уже готовые Темы. Зайдите в меню Формат Тема. Выберите двойным щелчком Тему Волны.

Таблица в качестве каркаса Web - страницы

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

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

џ В полях ввода со счётчиком Строк и Столбцов группы элементов настройки Размер задаётся количество строк и столбцов, которые будет содержать таблица.

џ Положение находятся элементы управления расположением таблицы на странице и положение содержимого ячеек внутри таблицы.

џ В открывающемся списке Выравнивание можно выбирать способ выравнивания содержимого ячеек. Впоследствии для каждой конкретной ячейки можно отдельно настроить параметры выравнивания её содержимого.

џ Список Обтекание задаёт способ обтекания таблицы текстом и другими элементами страницы.

џ Поле ввода со счётчиком Поля ячеек определяет расстояние между границами ячеек и их содержимым.

џ В поле ввода со счётчиком Интервал ячеек задаёт расстояние между соседними ячейками таблицы.

џ Установив флажок Задать ширину , Вы сможете это сделать в поле, находящемся чуть ниже.

џ Поле Задать высоту аналогично предыдущему.

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

џ Поле ввода со счётчиком Размер задаёт толщину границы таблицы в точках.

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

џ Если установить флажок Свернуть границу таблицы , то граница будет отображаться в виде одиночной линии, иначе она будет принимать псевдо-объёмный вид.

В группе Фон собраны элементы, управляющие фоновым изображением таблицы.

џ Список Цвет позволяет выбрать цвет фона таблицы.

џ Если установлен флажок Использовать фоновый рисунок , то вы сможете задать таблице в качестве фона изображение.

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

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

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

В группе элементов управления Положение находятся элементы управления расположения содержимого ячейки.

  • · В открывающихся списках Выровнять по горизонтали и по вертикали , вы сможете выбрать способ выравнивания содержимого ячейки.
  • · В группе элементов управления Границы , располагаются настройки, связанные с отображением границ таблицы. Список Цвет позволяет выбрать цвет границы ячейки.
  • · В группе Фон собраны элементы, управляющие фоновым изображением ячейки. Список Цвет выбирает цвет её фона. Флажок Использовать фоновый рисунок задаёт в качестве фона изображение.

Имеется также дополнительные возможности: добавить и удалить столбцы, разбить и объединить ячейки . Все эти команды можно найти тоже в контекстном меню при выделении ячеек. Аналогичные команды вы уже встречали в программах Word и Eхcel, поэтому описывать их нет смысла.

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

Должно получиться нечто подобное!

Настало время написать на нашем сайте название фирмы, которой он принадлежит. Но делать мы это будем не в виде обычного текста, а при помощи объекта WordArt (Мы надеемся, что вы знаете, как это сделать!) Таким же образом вставьте слово Акция в третью ячейку нижней таблицы и Вакансия в первую ячейку.. А теперь отделите название фирмы Горизонтальной линией : Вставка Горизонтальная линия.


Текстовое оформление сайта

Существует множество вариантов оформления текстов на Web - страницах. Использование потенциала текстового форматирования позволяет делать тексты более приятными визуально, оформлять их в согласии с вашими авторскими задумками, даёт возможность явно подчёркивать важные слова и мысли.

Поскольку вы решили заняться изучением такого непростого продукта, как создание Web- сайтов, то мы просто уверены в том, что вы знаете, как форматируется текст ну, например, в такой программе, как Microsoft Word. Так вот редактирование текстов в программе FrontPage аналогично этому, поэтому, естественно на этом останавливаться мы тоже не будем.

Скажем только, что для этого используется панель форматирования либо строка меню Формат Шрифт Абзац.

Самостоятельно введите весь текст, который вы видите на рисунке15.При его редактировании можете немного пофантазировать. НО не переусердствуйте!!!


Вставка иллюстраций

Невозможно представить себе HTML - страницу без элементов графики, рисунков и т.д. Умело подобранная графика привлечёт внимание посетителей на страницу, акцентирует их внимание на тех или иных моментах нашей страницы. Поможет выделить логические подразделы и придаст нашей странице особую неповторимость, но при этом при подборе изображений следует учесть следующие моменты. Во-первых, не надо использовать в качестве фона изображение, которое затрудняет чтение текста документа. Например, слишком пёстрые, яркие и т.д. Не надо использовать большие изображения, которые затянут до бесконечности время загрузки. Если всё- -таки надо вставить изображение на страницу, то лучше создать его маленькую копию, и после этого назначить ссылку на страницу с исходным большим изображением, чтобы пользователь мог сам решить, если он очень хочет загрузить изображение в исходном виде. А так размер одного файла изображения не должен превышать 20-25 кб. На Web - страницах обычно помещают изображения двух форматов GIF и JPG. Такие изображения корректно отображаются во всех браузерах, поддерживающих показ графики. Конечно, можно вставить и файлы с другими форматами, например BMP, TIF, но при этом надо учесть, что при записи на диск FrontPage их автоматически превратит в один из двух базовых форматов.

Рассмотрим преимущества и недостатки этих форматов. GIF -это стандартный формат для небольших графических изображений, таких, как кнопки, пиктограммы. Он не поддерживает теней и полутонов и в его основе лежит палитра из 256 цветов. JPG по сравнению с GIF, поддерживает гораздо больше цветов -более 16 млн., что делает его наиболее выгодным для отображения графических изображений с плавными переходами полутонов. Кроме того, размер JPG файла можно уменьшать с различной степенью сжатия, но надо помнить, что в отличии от файлов GIF,сжатие файлов JPG производится с потерей их качества. Чем больше сжатие, тем больше потеря, но надо принять во внимание, что JPG это достаточно хороший формат: он даёт высокую степень сжатия при довольно маленьких потерях, практически не видных на глаз.

Всё, что касается график более подробно мы рассмотрим чуть дальше, пока скажем только, что вставить картинку можно опять же также, как и в других программах.

Давайте попробуем вставить в страницу фото Каталог из папки рисунки.

Подготовка графики с помощью Adobe PhotoShop и Adobe ImageReady

Внешний вид и привлекательность сайта в значительной мере зависят от наполняющей его графики. Графика - это визуальное средство подчеркивания и выделения информации, раскрываемой текстом Web-страницы, которое в то же время не должно отвлекать внимание посетителя от самого текста. Поэтому подготовке графики следует уделить самое серьезное внимание.

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

Adobe PhotoShop и Adobe ImageReady хорошо дополняют друг друга. В Adobe PhotoShop обрабатываются фотографии, создаются графические кнопки, баннеры и другие изображения для Web-сайта. А в ImageReady полученные изображения оптимизируются, разрезаются на фрагменты и т.д.

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

Как сделать горизонтальное выпадающее меню

1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

HTML-разметка горизонтального выпадающего меню отличается от обычного меню тем, что к нужному элементу списка

  • добавляется вложенный список
      или <оl> .

      Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
      — для элемента списка, в который вложен выпадающий список: li {position: relative;} ;
      — для выпадающего меню ul {position: absolute;} , а также значения left и top .

      Для наглядности и удобства форматирования добавим основному меню класс topmenu , выпадающему — submenu .

      Скрыть выпадающее меню можно несколькими способами:
      1) display: none;
      2) visibility: hidden;
      3) opacity: 0;
      4) transform: scaleY(0);
      5) с помощью библиотеки jQuery.

      Способ 1. {display: none;}

      Выпадающее меню скрывается с помощью.submenu {display: none;} , при наведении показывается с помощью.topmenu li:hover .submenu {display: block;} .

      Способ 2. {visibility: hidden;}

      Меню скрывается с помощью.submenu {visibility: hidden;} , показывается — .topmenu li:hover .submenu {visibility: visible;} .

      Способ 3. {opacity: 0;}

      Меню скрывается с помощью.submenu {opacity: 0;} , показывается — .topmenu li:hover .submenu {opacity: 1;} . Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden; , а при наведении меняем на visibility: visible; .

      Способ 4. {transform: scaleY(0);}

      Меню скрывается с помощью.submenu {transform: scaleY(0);} , показывается — .topmenu li:hover .submenu {transform: scaleY(1);} . Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для.submenu {transform-origin: 0 0;} , т.е. из верхнего левого угла.

      Способ 5. С помощью jQuery

      $(".five li ul").hide(); // скрываем выпадающее меню $(".five li:has(".submenu")").hover(function(){ $(".five li ul").stop().fadeToggle(300);} /* отбираем элемент списка, который содержит элемент с классом.submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */);

      2. 3D выпадающее меню

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

      * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { display: block; text-decoration: none; outline: none; transition: .4s ease-in-out; } .topmenu { backface-visibility: hidden; background: rgba(255,255,255,.8); } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { font-family: "Exo 2", sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; } .down:after { content: "\f107"; margin-left: 8px; font-family: FontAwesome; } .topmenu li a:hover { color: #E6855F; } .submenu { background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index: 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; transition: .6s ease-in-out; } .topmenu > li:hover .submenu{ visibility: visible; opacity: 1; transform: perspective(600px) rotateX(0deg); } .submenu li a { color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: "Kurale", serif; }

      3. Разворачивающееся выпадающее меню с логотипом

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

      * { box-sizing: border-box; } body { margin: 0; background: #f2f2f2; } header { background: white; text-align: center; } header a { text-decoration: none; outline: none; display: block; transition: .3s ease-in-out; } .logo { color: #D5B45B; font-family: "Playfair Display", serif; font-size: 2.5em; padding: 20px 0; } nav { display: table; margin: 0 auto; } nav ul { list-style: none; margin: 0; padding: 0; } .topmenu:after { content: ""; display: table; clear: both; } .topmenu > li { width: 25%; float: left; position: relative; font-family: "Open Sans", sans-serif; } .topmenu > li > a { text-transform: uppercase; font-size: 14px; font-weight: bold; color: #404040; padding: 15px 30px; } .topmenu li a:hover { color: #D5B45B; } .submenu-link:after { content: "\f107"; font-family: "FontAwesome"; color: inherit; margin-left: 10px; } .submenu { background: #273037; position: absolute; left: 0; top: 100%; z-index: 5; width: 180px; opacity: 0; transform: scaleY(0); transform-origin: 0 0; transition: .5s ease-in-out; } .submenu a { color: white; text-align: left; padding: 12px 15px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.1); } .submenu li:last-child a { border-bottom: none; } .topmenu > li:hover .submenu { opacity: 1; transform: scaleY(1); }

      4. Увеличивающееся выпадающее меню

      Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера.submenu {transform: scale(.8);} , при наведении размер увеличивается до.topmenu > li:hover .submenu {transform: scale(1);} .

      * { box-sizing: border-box; } body { margin: 0; background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) } nav { background: white; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; outline: none; display: block; transition: .4s ease-in-out; } .topmenu { text-align: center; padding: 10px 0; } .topmenu > li { display: inline-block; position: relative; } .topmenu > li:after { content: ""; position: absolute; right: 0; width: 1px; height: 12px; background: #d2d2d2; top: 16px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); } .topmenu > li:last-child:after { background: none; box-shadow: none; } .topmenu > li > a { padding: 12px 26px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: "Exo 2", sans-serif; } .topmenu li a:hover { color: #c0a97a; } .submenu { position: absolute; left: 50%; top: 100%; width: 210px; margin-left: -105px; background: #fafafa; border: 1px solid #ededed; z-index: 5; visibility: hidden; opacity: 0; transform: scale(.8); transition: .4s ease-in-out; } .submenu li a { padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: "Kurale", serif; } .topmenu > li:hover .submenu { visibility: visible; opacity: 1; transform: scale(1); }

      5. Подъезжающее выпадающее меню

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

      @import url("https://fonts.googleapis.com/css?.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; } body:before { content: ""; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background: linear-gradient(45deg, rgba(0,0,0,0), rgba(255,255,255,.8)); } nav { text-align: center; padding: 40px 0 0; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; display: block; color: #222; } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { position: relative; padding: 10px 15px; font-family: "Kaushan Script", cursive; font-size: 1.5em; line-height: 1; letter-spacing: 3px; } .topmenu > li > a:before { content: ""; position: absolute; z-index: 5; left: 50%; top: 100%; width: 10px; height: 10px; background: white; border-radius: 50%; transform: translate(-50%, 20px); opacity: 0; transition: .3s; } .topmenu li:hover a:before { transform: translate(-50%, 0); opacity: 1; } .submenu { position: absolute; z-index: 4; left: 50%; top: 100%; width: 150px; padding: 15px 0 15px; margin-top: 5px; background: white; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-sizing: border-box; visibility: hidden; opacity: 0; transform: translate(-50%, 20px); transition: .3s; } .topmenu > li:hover .submenu { visibility: visible; opacity: 1; transform: translate(-50%, 0); } .submenu a { font-family: "Libre Baskerville", serif; font-size: 11px; letter-spacing: 1px; padding: 5px 10px; transition: .3s linear; } .submenu a:hover {background: #e8e8e8;}

      Кнопка Удалить… (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) – служит для организации выбора из раскрывающегося списка одного или нескольких вариантов. Заполнение поля (кнопки Добавить… , Изменить… , Удалить , Вверх , Вниз ) и его параметры (имя, высота в строках,

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

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

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

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

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

      Тема 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. Добавляем и заполняем метатеги (между тегами и ) на страницах: "О компани"; "Бизнес-обзор проекта"; "Способы оплаты" в режиме Код.

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

      • О компании En101

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

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

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

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