2. Создание и оформление web-страниц

 

2.1. Создание и форматирование текста

 

Ввод текста на страницу в редакторе FrontPage осуществляется аналогично тому, как это делается в текстовом редакторе, например, в MS Word.

Создайте новую страницу сайта с помощью команды Пустая страница, вызываемой из меню Файл, подменю Создать, командой Страница или веб-узел…. Выберите в меню Файл команду Сохранить. На экране появится стандартный диалог сохранения файлов Сохранить как…. В поле Имя фала введите имя файла страницыindex.htm. Нажмите кнопку Сохранить. Диалог Сохранить как закроется, и страница будет сохранена на диске. Данная страница будет называться домашней страницей (рис. 14).

В строке заголовка введите название страницы Лицей № 1548.

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

Добро пожаловать на страничку лицея № 1548!

Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях

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

Установите курсор на первой строке введенного текста и в открывающемся списке Стиль на панели инструментов Форматирование выберите Заголовок 2. Строка будет отформатирована данным стилем.

Выбранный стиль применяется целиком к текущему абзацу. В формате HTML абзац выделяется специальными тегами. В редакторе FrontPage ввод абзаца завершается нажатием клавиши Enter.

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

В верхней части диалога расположены списки для выбора названия шрифта (Шрифт), стиля шрифта (Начертание) и размера (Размер), которые имеются во всех стандартных диалогах выбора шрифта. Чуть ниже расположен открывающийся список для выбора цвета шрифта (Цвет) и набор флажков для задания различных эффектов(Видоизменение). В нижней части отображается пример текста с выбранными настройками (Образец). Настройки межсимвольных промежутков и положения в строке используются реже и вынесены на отдельную вкладку Межзнаковый интервал.

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

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

Если вы щелкнете на вкладке HTML-код, то увидите, как выбранные атрибуты текста будут сохранены в виде соответствующих тегов.

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

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

Для создания рамок, цвета и выбора способа заливки фона абзаца используется диалог Границы и заливка, вызываемый командой Формат - Границы и заливка… .

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

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

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

Выберите вкладку Заливка для выбора цвета и способа заливки фона абзаца.

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

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

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

Установите курсор ниже, под уже введенным текстом и наберите еще несколько строк, завершая каждую нажатием клавиши Enter:

Чем мы занимаемся?

Изучением физико-математических дисциплин.

Изучение основ современной теоретической и прикладной экономики.

Изучением цикла гуманитарных дисциплин.

Изучением сценического искусства.

Выделите строки введенного текста - со второй по пятую - и выберите в меню команду Формат – Список…. На экране появится диалог Список.

Выберите вкладку Графические маркеры и выберите какой-либо вариант маркеров для списка.

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

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

Чтобы разделить текст на отдельные секции, например, для выделения отдельных тематических фрагментов, на Web-страницах часто используют горизонтальную разделительную линию. Для ее создания установите курсор после слов Чем мы занимаемся? и выберите команду меню Вставка - Горизонтальная линия. На страницу будет вставлена горизонтальная линия.

Дважды щелкните мышью на разделительной линии. На экране появится диалог Свойства горизонтальной линии.

Группа элементов управления Размер позволяет изменить ширину и высоту линии. С помощью переключателя Выравнивание линию можно выровнять по левому краю, по центру или по правому краю. В открывающемся списке Цвет: выберите произвольный цвет для линии и нажмите кнопку ОК. Разделительная линия будет окрашена выбранным цветом.

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

Для этого выделите набранный на странице текст Добро пожаловать на страничку лицея № 1548! и выберите в меню команду Вставка – Веб-компонент… -Бегущая строка. На экране появится диалог Свойства бегущей строки (рис. 15).

В поле ввода Текст: находится текст выделенного фрагмента, который будет выводиться как бегущая строка. С помощью переключателя Направление можно выбрать направление движения строки: справа налево или слева на право. В группе элементов управления Скорость регулируется задержка между последовательными сдвигами текста и величина сдвига в пикселях. Группа элементов управления Поведение задает режим перемещения текста: при установке переключателя прокрутка текст периодически пробегает по экрану как на информационном табло, при установке переключателя сдвиг текст перемещается до противоположной границы, останавливается и остается на экране, при установке переключателя попеременно текст перемещается внутри границ области бегущей строки. Группа элементов управления Размер определяет ширину и высоту прямоугольной области бегущей строки. Если; соответствующие флажки сброшены, то значения определяются по размеру текста. Установленный флажокНепрерывно в группе элементов управления Повторы задает неограниченное число повторений прокрутки строки, если флажок сброшен, в поле ввода со счетчиком задается количество повторений. Открывающийся список Цвет фона: определяет цвет фона в области перемещения бегущей строки.

Нажмите кнопку ОК, чтобы закрыть диалог Свойства бегущей строки. Текст заголовка внешне не изменится, но будет преобразован в отдельный компонент.

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

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

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

Установить курсор на странице в позицию, начиная с которой будет располагаться вставленный текст. Выбрать команду меню Вставка – Файл…. На экране появится стандартный диалог открытия файла Выбор файла. В открывающемся списке Тип файлов выбрать тип Тестовые файлы (*.txt). Найти и выделить нужный текстовый документ.

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

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

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