Язык создания  Web-страниц HTML

Занятие 5. Работа в конструкторе  «Microsoft FrontPage»

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

            После запуска, прежде всего, зайдите в пункт меню «Сервис», где выберите «Настройка», а там активизируйте вкладку «Панели инструментов». Должны быть выбраны панели: Стандартная, Форматирования, WordArt, Область задач, Строка меню и Таблицы.

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

            Маркированный и нумерованный списки выполняется так же, как и в Word («Формат», «Список»). Аналогичным образом работается с панелью WordArt.

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

Для вставки изображения в пункте «Вставка» выбираются пункты «Рисунок» и «Из файла», если изображение, например, сохранено в виде файла на носителе.

            Для задания таблицы в пункте меню «Таблица» выбирается «Вставить», а далее «Таблица». Затем следует задать нужные параметры. В панели «Таблицы» с помощью пиктограммы «Ластик» возможно стирать границы между ячейками, а с помощью пиктограммы «Нарисовать таблицу» прорисовывать границы «карандашом». В той же панели полезны пиктограммы для выравнивания текста, выравнивания ширины столбцов и высоты строк, добавления строк или столбцов, удаления ячеек.

            Для удобного размещения информации на странице используется следующий прием. Вставляется таблица, в ячейках которой размещается информация. А затем границы таблицы делают «невидимыми». Можно для простоты перейти по вкладке в режим «Код» и в теге «table», задающий таблицу, задать атрибут border="0".

Пример.

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

Создайте папку, в которую скопируйте файлы формата jpg: risunok7 (ручное счетное устройство), risunok8 (механическая машина Паскалина), risunok9 (электромеханический табулятор), risunok10 (современный ПК) , risunok11 (наскальные рисунки), risunok12 (памятник первопечатнику Федорову), risunok13 (оптический диск), risunok14 (портрет фон Неймана).

Создайте в этой же папке, где и рисунки, папке ПЯТЬ  файлов сайта:

Главная страница INDEX.HTM и «подчиненные» страницы 01.HTM, 02.HTM, 03.HTM, 04.HTM, 05.HTM. 

Работайте во вкладке Конструктор. На главной странице INDEX.HTM с помощью пункта «Добавить объект WordArt» задайте заголовок «История развития средств вычислительной техники». Ниже с помощью маркированного списка пункты выполните меню-ссылки:

• Этапы эволюции вычислительных средств
• Хранение информации
• Принципы работы ЭВМ 
• Элементная база ЭВМ

Выберите фон страницы («Формат», «Тема», задайте нужное). Сохраните эту страницу под именем  INDEX.HTM.

Создайте «подчиненные» файлы.

Файл 01.HTM

В центре выполните заголовок: Этапы эволюции вычислительных средств

Далее добавьте таблицу (4 столбца, 4 строки), занесите текст и вставьте рисунки:

            Далее перейдите во вкладку «КОД» и теге «table», определяющий таблицу, задайте атрибут border="0". Выберите фон страницы («Формат», «Тема»). Сохраните этой файл под именем 01.HTM.

Файл 02.HTM

В центре выполните заголовок: Хранение информации

Вставьте и заполните таблицу, вписав текст и вставив рисунки.                                 

Далее перейдите во вкладку «КОД» и теге «table», определяющий таблицу, задайте атрибут border="0". Выберите фон страницы («Формат», «Тема»). Сохраните этой файл под именем 02.HTM.

Файл 03.HTM

В центре выполните заголовок: Принципы фон Неймана

Далее впишите текст: Были сформулированы в 1945 году, и  с тех пор они не изменялись, кроме последнего принципа.

Создайте таблицу:

Далее перейдите во вкладку «КОД» и теге «table», определяющий таблицу, задайте атрибут border="0". Выберите фон страницы («Формат, Тема»). Сохраните этой файл под именем 03.HTM

Файл 04.HTM

В центре выполните заголовок: Элементная база ЭВМ

Создайте таблицу:

Далее перейдите во вкладку «КОД» и теге «table», определяющий таблицу, задайте атрибут border="0". Выберите фон страницы («Формат», «Тема»). Сохраните этой файл под именем 04.HTM.

Файл 05.HTM

В центре выполните заголовок: Историческая справка о фон Неймане.

Далее введите текст, оформив ключевые моменты контрастными шрифтами:

Джон  фон Нейман (28.12.1903-8. 2. 1957) был американским математиком, логиком, физиком, инженером-изобретателем. Он являлся членом Национальной Академии Наук США (1937г.) и Американской академии наук и искусств. Имеет многочисленные труды по теории множеств, алгебре, теории игр и теории автоматов. Большое влияние на развитие квантовой механики и ее математического аппарата имела книга Неймана "Математические основы квантовой механики". Под его руководством была разработана вычислительная машина "Джониак". Посмертно изданы 6 томов трудов Неймана. Ему присуждались премии: имени М. Бохера (1938г.), А. Эйнштейна. (1956г.) и им. Э. Ферми (1957г.).

Выберите фон страницы («Формат, Тема»). Сохраните этой файл под именем 05.HTM

            Свяжите теперь страницы ссылками. После внесения изменений, необходимо обязательно пересохранять страницы под теми же самыми именами. На странице INDEX.HTM выполните ссылки, согласно меню, на файлы 01.HTM, 02.HTM, 03.HTM, 04.HTM. На соответствующих страницах добавьте фразу «Вернуться к началу» и выполните по ней ссылку на файл INDEX.HTM.  Добавьте на странице 03.HTM ссылку, которая позволит переходить по щелчку  на портрете фон Неймана к его краткой биографии, для чего щелкните  на портрете, далее в пункте меню «Вставка» выбрать «Гиперссылка» и сослаться на файл 05.HTM, а в файле 05.HTM выполнить обратную ссылку на файл 03.HTM по ключевой фразе «Вернуться назад».

            Запустите файл INDEX.HTM и проверьте правильность работы.