Простое выпадающее меню. Создание Web-страниц в прикладной программе FrontPage Как сделать горизонтальное выпадающее меню
В предыдущих главах мы рассмотрели создание сайта, содержащего одну страницу. Но, как правило, сайт состоит из нескольких страниц. Для добавления в сайт новых или созданных ранее страниц используются команды меню, комбинации клавиш, кнопка Создать (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. В сайт добавлена новая страницы, созданная с использованием шаблона "Обычная страница"
С развитием Интернета появился протокол обмена информацией,протокол называется HTTP (HyperText Transfer Protocol – протокол передачи гипертекста).Вместе с этим протоколом появилась и служба World Wide Web (часто называемая WWW или просто Web ), которая подставляет собой обширную сеть серверов HTTP , передающих файлы через Интернет .
Основную часть этих файлов представляют собой Web-страницы
– специальные файлы, написанные на языке HTML (HyperText Markup Language
– язык разметки гипертекста). Web-страницы
публикуются в Интернете
путем размещения таких файлов на серверах HTTP (Web-узлах)
. Содержание Web-страниц
может быть разным и посвященным совершенно произвольным темам, но все они используют одну и тужу основу – язык HTML
.
Большинство людей желающих создать свой собственный сайт или страничку, знакомы с языком HTML
только понаслышке. Поэтому им на помощь может придти программа Microsoft FrontPage
,один из самых известных конструкторов сайтов.
FrontPage, входит в пакет приложений Microsoft Office , стал первым продуктом широкого использования для Internet , сочетающим в себе клиентскую и серверную части и обеспечивающим возможность разработки сайта в целом и установки его на большинство популярных серверов. FrontPage способен взять на себя всю необходимую работу по программированию. Однако FrontPage станет достаточно серьезным помощником и для профессиональных разработчиков, предпочитающих держать в руках полный контроль над творческим процессом.
Окно программы FrontPage 2003.
Программа FrontPage выпущена компанией Microsoft и выполнена в едином стиле продуктов, входящих в пакет Microsoft Office , поэтому внешний вид программы практически не отличается от текстового процессора Word .
В верхней части окна располагается строка меню и две панели инструментов: Стандартная и Форматирование
. Включать или отключать отображение панелей инструментов позволяет меню Вид
.
В левой части находится Панель представлений
, при помощи которой можно переключать режимы документа.
Основную часть окна занимает рабочая область, в которой могут быть открыты одно или несколько окон, содержащих отдельные документы.
В нижней части окна располагается строка состояния
, содержащая справочную информацию
. Так же в нижней части окна находятся три кнопки просмотра документа.
Отображение панелей инструментов.
Для управления панелями инструментов во FrontPage
можно воспользоваться теми же способами, как в Microsoft Word
. А именно:
в меню Вид
надо выбрать пункт Панели инструментов
, а в открывшемся новом подменю - установить флажки
напротив тех панелей инструментов, которые вам нужны; или щелкнуть правой кнопкой мыши
по какой-либо панели управления
(или по области рядом с ней) и точно так же воспользоваться контекстным меню.
FrontPage
, как и другие приложения Microsoft Office
, позволяет добавлять, удалять, менять местами пункты меню и кнопки на панелях инструментов. Также существует возможность создавать полностью свои панели.
Для этого надо:
В меню Сервис
выбрать пункт Настройка
…
или
в меню Вид
выбрать пункт Панели инструментов
, а в появившемся каскадном меню - пункт Настройка
…
В результате ваших действий откроется диалоговое окно Настройка
, где можно установить необходимые панели.
Создание новой Web-страницы .
Если вы запустили FrontPage
, значит, новая Web-страница
у вас уже создана (при запуске FrontPage
сразу открывается новая пустая Web-страница
, готовая для размещения текста и любых других элементов).
Создать новую Web-страницу
можно и другими способами:
С помощью кнопки Новая страница
на Стандартной панели
инструментов.
меню Файл
выбрать подменю Создать
, а затем – Страница
или Web-узел
;
с помощью комбинаций Ctrl+N
;
с помощью контекстного меню
(работает во всех режимах, кроме режимов Задачи и Отчеты
) - для этого внутри Списка папок
данного Web
) надо щелкнуть правой кнопкой мыши и в появившемся контекстном меню выбрать пункт Создать Страница
.
Создание станиц при помощи мастера и шаблонов.
Как уже говорилось выше, если для создания новой страницы вы воспользовались меню Файл Создать Страница или Web-узел
, то FrontPage
предложит вам воспользоваться шаблоном для создания новой страницы.
Для этого он откроет диалоговое окно, внешний вид которого приведен ниже:
На вкладке Общие
данного диалогового окна выводится перечень шаблонов FrontPage
, доступных в настоящий момент. Выбрав любой из шаблонов, можно посмотреть его описание в поле Образец
.
Создание FrontPage Web
.
Microsoft FrontPage Web
- это набор Web-страниц
, файлов с изображениями и других компонентов, которые можно рассматривать как единое целое.
Если делать сайт во FrontPage
, то для его хранения удобней всего использовать FrontPage Web
.
самый главный плюс - это возможность переименовывать файлы, входящие в состав FrontPage Web
.
Представьте себе, что перед публикацией вашего сайта в Интернет
вы вдруг заметили, что пара файлов у вас названа русскими именами. - «Теперь по всем файлам придется лазить и ссылки ручками менять!» дуамете Вы.Вот тут-то и поможет FrontPage Web
- вы можете покойно переименовать файлы, а FrontPage
самостоятельно пройдется по всем другим файлам, входящим в FrontPage Web
и переименует все ссылки на исправленный вами файл.
все остальные преимущества описывать не буду, но хочется сказать, что для использования всех возможностей FrontPage
, то лучше использовать FrontPage Web
.
Итак, чтобы создать новый FrontPage Web
нажмите на стрелочку, расположенную слева от кнопки Новая страница на панели инструментов и в появившемся выпадающем меню выберите пункт Веб-узел…
Открытие Web-страниц.
Очень часто при создании сайта приходится редактировать уже созданные Web-страницы . К одной и той же странице можно возвращаться сколько угодно раз, чтобы ее отредактировать или использовать ее части для создания новых Web-страниц .
Открыть уже существующую Web-страницу можно в любом из существующих режимов.
Из режима Page Views есть четыре способа открыть существующую страницу:
1 способ
Если вы работаете с FrontPage Web , то просто выберите нужный файл в Списке папок и дважды щелкните по нему мышью.
2 способ
В меню Файл выберите пункт Последние файлы . Из появившегося каскадного меню выберите нужный файл.
3 способ
С помощью диалогового окна Открытие файла: Файл Открыть .
Предварительный просмотр.
Для того чтобы посмотреть, как ваша страница выглядит непосредственно в браузере можно воспользоваться вкладкой Просмотр в режиме редактирования Web-страницы
. Но в данном случае может оказаться, что браузер FrontPage
не вполне корректно отобразит некоторые элементы вашей страницы
, поэтому лучше всего:
воспользоваться кнопочкой на панели инструментов
или в меню Файл
выбрать пункт Предварительный просмот
р в обозревателе.
Если вы воспользовались первым способом, то содержимое вашей страницы отобразиться во встроенном браузере FrontPage
.
Если же вы воспользовались вторым способами, то FrontPage
выведет диалоговое окно Просмотр в обозревателе…
Здесь можно:
Выбрать обозреватель, в котором вы хотите просмотреть свою Web-страницу
. Как правило, первоначально здесь отображается браузер
, который по умолчанию установлен на вашей машине.
Добавить любой другой обозреватель, для чего необходимо воспользоваться кнопкой Добавить
.
Редактировать или удалить установленные обозреватели.
Установить размер экрана, на котором будет просматриваться ваша Web-страничка
Сохранение Web-страниц .
По умолчанию FrontPage вместо названия страницы берет первую строку текста с вашей страницы . Это не всегда то, что надо. Изменить название страницы можно с помощью кнопки Изменить - нажатие на эту кнопку открывает диалоговое окно Название страницы , в котором вы можете изменить название страницы .
Удаление Web-страниц.
При работе с Web-сайтом рано или поздно случиться так, что какие-то страницы вам будут больше не нужны и вам захочется их удалить.
Существует три способа удаления Web-страницы .
1 способ
В панели Список папок выделите файл, который необходимо удалить и нажмите кнопку Delete на клавиатуре.
2 способ
В панели Список папок щелкните правой кнопкой мыши по файлу (или значку файла ), который необходимо удалить и в появившемся контекстном меню выберите пункт Удалить .
3 способ
В панели Список папок выделите файл , который необходимо удалить и затем выберите пункт Удалить в меню Правка .
Работа с текстом.
На первый взгляд, ввод текста во FrontPage
ничем не отличается от ввода текста в любом текстовом редакторе (например, в Microsoft Word
).
Для того чтобы набрать текст, достаточно щелкнуть мышью в любом месте страницы, и курсор будет помещен в ближайшую точку, в которую можно ввести текст.
Набор прописных букв, редактирование текста (удаление символов, вставка текста и т.д.) производится точно также, как в Microsoft Word.
Есть только одно небольшое НО: при нажатии клавиши Enter
во FrontPage
осуществляется принудительный переход курсора на новую строку, при этом до и после абзаца ставятся фиксированные абзацные отступы.
Если вам не надо создавать абзацы, то для перехода на новую строку лучше всего использовать комбинацию клавиш Shift +Enter.
Работа с изображениями.
Графически форматы в Web .
Все компьютерные изображения, все форматы для их хранения (а, следовательно, и все программы для их обработки) делятся на два больших класса - векторные и растровые
. Векторное изображение
состоит из объектов - геометрических форм, составленных из прямых, дуг, окружностей и кривых Безье. Достоинств у векторной графики
немало. С точки зрения дизайнера, самое главное ее достоинство состоит в том, что векторную графику можно «вертеть» как угодно, не боясь «протереть дырку» в изображении или потерять часть информации. Другое достоинство - небольшой объем файлов (в сравнении с растровыми изображениями) и независимость от разрешения устройств вывода (будь то принтер или экран монитора). Эти факторы сделали векторную графику
вероятным кандидатом для использования в Internet
. Правда стоит оговориться, что на сегодняшний момент векторная графика встречается не так уж часто, как хотелось бы.
Тем не менее, среди реально применяемых векторных форматов хотелось бы отметить формат Shockwave Flash фирмы Macromedia
. Для просмотра этого формата в браузере
нужен подключаемый модуль (plug-in
), бесплатно распространяемый фирмой Macromedia
. На сегодняшний день существуют как сайты целиком и полностью созданные по этой технологии, так и сайты, используемые Flash-формат
лишь частично.
Растровое представление графики базируется на понятии растра. Растр
– это совокупность объектов (в данном случае пикселей), размещенных в одинаковые строки и столбцы. Т.е. растровый компьютерный файл
можно рассматривать как набор маленьких цветных или серых квадратиков, образующих мозаику изображения. Т.к. размер этих квадратиков заведомо мал, то при просмотре растровой графики эти квадратики сливаются друг с другом, образуя непрерывную смену цветов.
Растровый формат хранения изображения имеет как свои преимущества, так и недостатки. Одним из больших плюсов растровой графики является возможность работы с полутонами, т.е. возможность передавать изображение точно также, как оно выглядит в жизни. А вот среди недостатков основной проблемой является размер файла. Естественно, чем больше пикселей отведено для формирования изображения
, тем выше качество передаваемого изображения
, но, тем самым больше будет и размер файла.
Если мы теперь вернемся к браузерам, то можно сказать следующее, что большинство браузеров без проблем могут отображать графические файлы четырех форматов (*.gif, *.jpg, *.png, *.bmp
), использовать из которых на сегодняшний момент лучше всего два - *.gif и *.jpg
. Да и то после предварительной оптимизации.
Вставка изображений на Web-страницу
.
Вставлять изображение на вашу Web-страницу
можно несколькими способами:
1. Перетащить изображение из Windows Explorer
(то есть прямо из проводника).
2. Перетащить изображение из Internet Explorer
.
3. Перетащить файл с изображением с панели Список папок
, прямо на страницу.
4. С помощью буфера обмена
- скопировать изображение в буфер обмена из любой другой программы, а затем на странице вставить его из буфера обмена.
5. С помощью кнопки Добавить
рисунок из файла на панели инструментов Стандартная
.
6. С помощью меню Вставка Рисунок.
Рассмотрим эти способы более подробно:
Способ 1
Windows Explorer
(то есть прямо из проводника) надо:
во FrontPage
открыть окно проводника;
в окне проводника выделить файл с картинкой, которую вы хотите вставить на свою страницу;
левой клавишей мыши перетащить файл-картинку на свою Web-страницу
картинка вставиться в то место, где на странице находился курсор вставки.
Способ 2
Для того чтобы перетащить изображение из Internet Explorer
надо:
во FrontPage
открыть страницу, на которую вы хотите добавить изображение;
в браузере
откройте то изображение, которое вы хотите поместить на своей Web-странице
браузера
название файла должно оканчиваться на jpg, jpeg, gif
);
левой клавишей мыши перетащите выделенную картинку на свою Web-страницу
;
Способ 3
Для того чтобы перетащить файл
с изображением с панели Список
папок, прямо на страницу надо:
во FrontPage
открыть страницу, на которую вы хотите добавить изображение
;
выбрать необходимый файл с картинкой на панели Список папок
;
левой клавишей мыши
перетащите выделенную картинку на свою Web-страничку
;
выбранная картинка вставиться в то место, где на странице находился курсор вставки.
Способ 4
Для того чтобы вставить изображение на свою Web-страницу
с помощью буфера обмена, надо:
в том приложении, из которого вы хотите скопировать картинку, выделить изображение и при помощи клавиш Ctrl + C
скопировать рисунок в буфер обмена;
на своей Web-странице
вставить это изображение из буфера обмена при помощи клавиш Ctrl + V
Способ 5
Web-страницу
вы решили воспользоваться кнопкой Добавить изображение
из файла на панели инструментов Стандартная
, то FrontPage
откроет диалоговое окно Рисунок
.
В данном диалоговом окне укажите тот файл с картинкой, который вы хотели бы добавить на свою Web-страницу
и нажмите кнопку Вставить.
Способ 6
Если для вставки изображения на свою Web-страницу
вы решили воспользоваться меню Вставка Рисунок
, то FrontPage
предложит сделать вам дальнейший выбор:
Картинки
… – выбор того пункта меню предоставляет вам возможность воспользоваться готовой библиотекой картинок.
Из файла
… – выбор данного пункта меню предоставляет вам возможность самостоятельно указать местонахождение файла с картинкой, который вы хотите добавить на свою Web-страницу
(использование этого пункта приведет к открытию диалогового окна Рисунок
, работа с которым была описана выше).
Создать фото коллекцию
… - при помощи этого пункта меню можно создать коллекцию изображений в определенном стиле. Для это в открывшемся окне Свойства
коллекции фотографий при помощи кнопки Добавить
на вкладке Рисунки
выбрать изображения, а на вкладке Макет
выбрать формат оформления.
Добавление файлов мультимедиа.
Помимо простой графики, как – изображения в форматах *.gif, *.jpg, *.png и т.д. FrontPage позволяет размещать на ваших Web-страницах файлы мультимедиа. К ним относятся: видеоклипы, звуки…
Для вставки видеоклипа надо в меню Вставка выбрать пункт Рисунок , а затем Видеозапись.. .
Откроется диалоговое окно Видео , в нем будут отображаться видеоклипы в формате *.avi, *.asf, *.ram, *.ra .
Добавить звук на Web-страницу можно на вкладке Общие диалогового окна Свойства страницы .
Работа с таблицами.
Таблица
- одно из наиболее мощных инструментов используемых при создании сайтов.
Изначально таблицы
применялись только для представления структурированных данных. Однако постепенно они превратились в мощное универсальное средство для компоновки Web-страниц.
Создание таблиц
Самый простой способ создания таблицы
– использовать кнопку Добавить таблицу
, расположенную на панели инструментов Стандартная.
Еще один способ – при помощи пункта меню Таблица Вставить Таблица
.
А так же таблицу
можно нарисовать и вставить при помощи буфера обмена.
Ввод данных и навигация по таблице.
Одной из замечательных особенностей таблиц является то, что введенный текст форматируется внутри ячейки точно так же, как мы привыкли форматировать его в пределах всего документа. Помещенный в ячейку текст автоматически переносится на новую строку, если его длина превышает ширину столбца. При нажатии клавиши Enter , как обычно, вставляется новый абзац. Текст или числа вводятся в таблицу с клавиатуры.
Перед тем, как заносить данные в таблицу , необходимо поместить текстовый курсор в нужную ячейку таблицы . Это можно сделать, щелкнув на ней мышью.
Однако более удобно для перемещения между ячейками использовать комбинации клавиш:
Сочетания клавиш: Действие:
Tab
в любом месте таблицы,кроме конца последней строки перейти в соседнюю ячейку и выделить ее содержимое
Tab
в конце последней строки добавить новую строку в низ таблицы
Shift +Tab
перейти в предыдущую ячейку и выделить ее содержимое
Enter
начать новый абзац
Enter
в начале первой ячейки добавить текст перед таблицей в начале документа
Создание и применение форм.
Формы представляют собой текстовые поля, переключатели, флажки, кнопки и многие другие элементы управления. Посетителю сайта достаточно ввести какую-нибудь информацию в то или иное текстовое поле, выбрать какие-нибудь данные из предложенного списка, нажать на кнопочку Отправить, чтобы данные отправились на Web-сервер для обработки (или обработались тут же на странице).
Давай познакомимся с тобой - пожалуйста, заполни следующие поля:
Твое имя:
Твоя фамилия:
Дата твоего рождения: год месяц число
Спасибо! А теперь - в путь!
1. Мала, а проворна.
Где бывает, там повелевает.
В шатер зайдет -
Богатыря перевернет.
Кто это?
Муха Блоха Капризный ребенок
2. Выпуча глаза сидит,
По-французски говорит,
По-блошьи прыгает,
По-человечьи плавает.
О ком идет речь?
Кот Лягушка Попугай
3. Чем дышит тюлень, нырнув под лед?
4. Почему плачут большие черепахи?
5. Какую одежду может и селедка носить?
Шубу Пальто Тельняшку
6. Кого называют «речной лошадью»?
Выдру Бегемота Крокодила
7. Какие птицы не высиживают птенцов?
8. Какие птицы не умеют летать?
Если вам необходимо выберать несколько ответов - нажмите и не отпускайте клавишу Ctrl и щелкайте левой клавишей мыши по нужному ответу
Но создание форм
на самой страничке
это только половина работы. Так как обязательно должна существовать программа, которая сможет обработать данные, введенные пользователем с помощью форм.
Такая программа может быть расположена на сервере; она может находиться в вашем Web-сайте
в виде отдельного файла, а может быть просто прописана в коде html
на вашей Web-страничке
.
Именно она определяет - что же произойдет с той информацией, которую ввел пользователь:
информация
может быть добавлена в базу данных и на ее основе могут быть построены различные графики, рейтинги…;
информация
может быть переправлена по электронной почте (это часто используют для получения информации о пользователе в анкетах различного рода);
информация
может быть обработана прямо на месте и посетитель вашего сайта тут же получит ответную информацию (например - получит баллы за тест, увидит введенную им информацию в гостевую книгу…).
В отношении форм существует несколько основных правил:
1. Каждая форма
занимает определенный участок Web-страницы
. На одной Web-страничке
может быть расположена одна или несколько форм.
2. Внутри каждой формы должен размещаться, по крайней мере, один из элементов форм (хотя, как правило, их несколько).
3.Каждый элемент формы
имеет имя и значение. Имя идентифицирует поле для ввода информации, а значение приравнивается к значению, выбранному пользователем.
4. Один из элементов формы (им может быть обычная кнопка или любой рисунок) должен выполнять функцию кнопки Отправить.
Создание форм во FrontPage
.
Чтобы добавить форму на Web-страницу
, надо:
Установить курсор в то место, где вы хотите вставить форму.
В меню Вставка
выбрать пункт Форма
, в открывшемся меню снова выбрать пункт Форма
. Форма
будет помещена на вашу Web-страницу
- появиться область, помеченная пунктирной рамочкой, с двумя кнопками: Отправить и Сброс
.
Пользуясь все тем же пунктом меню Вставка Форма
последовательно вставить необходимые вам элементы форм
, выбирая их из раскрывающегося каскадного меню (при этом необходимо помнить, что все элементы формы вставляются внутри области формы, помеченной пунктирной рамочкой).
После того, как форма
создана, остается только наполнить ее содержанием - элементами форм
, текстом, изображениями, таблицами… (при этом размеры формы
будут меняться автоматически).
Добавлять содержание форм
можно обычным образом. Например, текст можно набирать, а можно вставлять из буфера обмена… Все действия с добавленными объектами аналогичны.
Однако создание формы
- это только начало работы. После ее создания необходимо настроить свойства, как самой формы
, так и ее элементов.
Настройка свойств формы.
Для обработки или сохранения данных, вводимых посетителями Web-странички
, необходимо либо воспользоваться возможностями, предоставляемыми FrontPage Server Extensions
, либо какой-нибудь другой программой, работающей на Web-сервере
.
Но какую бы программу вы не выбрали, вам все равно придется настроить свойства формы и элементов в ней.
Чтобы открыть окно свойств формы, надо:
в меню Вставка
выбрать пункт Форма
, а затем -
или
вызвать контекстное меню к форме и в открывшемся контекстном меню выбрать пункт Свойства формы
.
В результате откроется диалоговое окно Свойства формы
.
1. В поле Сохранение
результатов необходимо указать, что надо будет сделать с данными, введенными в форму
. Вы можете выбрать следующие варианты:
o Отправка Имя файла
- данные будут помещены в указанный файл на Web-сервере
. Этот файл может быть Web-страницей
, которая со временем будет становиться все длиннее и длиннее, или файлом данных, который потом можно будет обработать в Excel, Access
или любой другой программой;
o Отправка Адрес почты
- в этом случае каждый раз при нажатии посетителем Web-странички
кнопки Отправить на форме
будет генерироваться электронное сообщение, которое будет отправляться по указанному вами адресу. В этом сообщении будут содержаться все данные, которые были введены пользователем на Web-страничке.
o В базе данных
- в этом случае данные формы
будут отправлены в базу данных. База должна находиться на Web-сервере
(или быть доступной для него).
2. В поле Свойства
формы необходимо указать имя формы
Режимы просмотра во FrontPage
.
FrontPage
предлагает шесть различных режимов для просмотра содержимого Web-сайта:
Страница,
Папки,
Отчеты,
Переходы,
Гиперссылки,
Задачи.
Для выбора нужного режима можно воспользоваться панелью Представления
, расположенной в левой части экрана, или в меню Вид
на панели инструментов Стандартная
выбрать соответствующий пункт меню.
Страница
В этом режиме осуществляется создание и редактирование Web-страниц.
Здесь можно создавать пустые Web-страницы
и страницы, базирующиеся на шаблонах, назначать страницам темы (набор стилей представления страницы на экране). В этом режимы можно добавлять и форматировать текст, оформлять страницы
с использованием графических и видеоизображений (поддерживается преобразование ряда графических форматов в форматы *.gif, *.jpg и *.png
), добавлять к странице звуковое сопровождение, представлять информацию в таблицах, кадрах и формах и, наконец, создавать гиперссылки. Таков далеко не полный перечень возможностей FrontPage
по редактированию содержимого Web-страниц
.
Папки
В этом режиме можно просматривать структуру Web-узла
(файлы и папки) и управлять ею аналогично тому, как вы это делаете в Windows
, данный режим дает возможность получить более подробные сведения о файлах и папках, чем это предусмотрено в режиме просмотра Страница.
Отчеты
Предоставляет вашему вниманию более десятка отчетов, содержащих разнообразную информацию о Web-узле
, открытом во FrontPage.
Переходы
Предназначен для просмотра иерархии сайта. В этом режиме можно управлять иерархией, перетаскивая прямоугольники (каждый из которых представляет определенную Web-страницу
).
Гиперссылки
Демонстрирует систему гиперссылок, которыми связаны между собой страницы Web-узла
(а также систему гиперссылок на другие узлы), обеспечивает проверку их целостности и возможность изменения.
Задачи
Этот режим предназначен для управления задачами Web-узла
(добавления, удаления, выполнения, установления приоритета выполнения, а также отслеживания состояния задач).
Скачать БЕСПЛАТНО FrontPage можно по следующей ссылке:
http://letitbit.net/download/28576.28615a37d4f2a575882748541adf3bf00/Microsoft_Office_FrontPage_2003.rar.html
Создание новой пустой 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 полученные изображения оптимизируются, разрезаются на фрагменты и т.д.
Простая Веб страницав программе Frontpage представляет собой обыкновенную таблицу со множеством ячеек. В этих ячейках и располагаются тексты, картинки, видео и все то, что мы видим на сайтах. Например, если изобразить эту страницу в виде блок-схемы, то выглядеть она будет так.
Простая Веб страницав программе Frontpage
Структура веб страницы несложная. Вверху располагается название сайта, сразу под ним - горизонтальное меню. Справа - вертикальное меню, а внизу - " подвал" . По центру же находится " тело" сайта. Это и есть основные элементы самой обычной страницы сайта.
Кстати, Вы сейчас находитесь на точно такой же веб странице. Как видите, ее структура очень проста. Здесь все под рукой. Кликнув на горизонтальное или вертикальное меню, Вы перенесетесь на другие страницы сайта.
Они тоже созданы по подобию самой простой веб страницы, о которой мы говорили выше. Найдите время, чтобы просмотреть бесплатный курс Школы Продающих Сайтов и Вы узнаете, как быстро и легко можно создать страницу, и даже сайт!, за один вечер.
Шапка для сайта
В шапке сайта обычно располагается заголовок сайта, рисунок или логотип. Назначение шапки сайта - информировать посетителя, на какой сайт он зашел. Очень важно, чтобы название точно соответствовало содержанию сайта.
Шапка для сайта
Меню для сайта
В горизонтальном меню располагаются тематические разделы или рубрики. По своей сути это ссылки, которые ведут на другие страницы сайта.
Горизонтальное меню сайта
Тело сайта
Это основная часть сайта , в которой размещается вся основная информация. Именно в теле сайта вы сейчас читаете эту статью.
Вертикальное меню для сайта
Вертикальное меню , также как и горизонтальное, служит для навигации по сайту. Вертикальное меню делается в виде вопросов или любой интересной и полезной информации, которые могут заинтересовать посетителей.
Подвал сайта
Подвал сайта находится в самой нижней части веб страницы. Здесь располагается информация об авторских правах и контактная информация.
Подвал сайтав программе Frontpage
Подведение итогов
Сейчас Вы узнали из чего состоит простая веб страница . В структуре страницы нет сложных и непонятных элементов. Теперь полученные знания пора воплотить в практику. Давайте двигаться вперед. В следующем разделе Вы создадите
