Работа в Microsoft FrontPage XP

         

Форматирование текста


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

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

GardenCo

Для этого упражнения используется рабочая папка Office XP SBS\FrontPage\Chap18\FormatText.

Выполните следующие шаги.

Откройте сайт GardenCo, который находится в этой рабочей папке. Откройте файл index.htm (домашняя страница) в окне просмотра и редактирования страниц. Выделите и удалите три блока комментариев, чтобы сделать страницу более удобной для чтения. В первом абзаце выделите имя компании. В панели инструментов Форматирование щелкните на кнопке Увеличить размер шрифта (Increase Font Size)

. Отметим, что размер шрифта, показанный в раскрывающемся списке Размер шрифта (Font Size), изменится с 3 (12 pt) на 4 (14 pt). Выделите последнее предложение в первом абзаце (начинается с "Если вы заглянули:") и щелкните на кнопке Курсив (Italic)
, чтобы получить курсивное начертание текста. Щелкните на кнопке просмотра
внизу окна просмотра и редактирования страниц, чтобы перейти в панель просмотра, и найдите значок электронной почты в секции Контактная информация. Отметим, что при текущем размере этот значок плохо различим. Вернитесь к панели Обычный и выделите значок почты. В панели инструментов форматирования щелкните на стрелке справа от поля Размер шрифта (Font Size) и выберите в раскрывающемся списке размер 6 (24 pt), чтобы увеличить размер значка почты. Совет. Размеры шрифтов выражаются в программе FrontPage двумя способами: в пунктах [pt] (как в других приложениях, таких как Word и Microsoft Excel) и в единицах от 1 до 7.


В раскрывающем списке размеров шрифта содержатся восемь вариантов: обычный, 1 (8 pt), 2 (10 pt), 3 (12 pt), 4 (14 pt), 5 (18 pt), 6 (24 pt) и 7 (36 pt). Для аккуратности вставьте пробел между этим значком и смежным текстом и затем перейдите в панель просмотра, чтобы увидеть результаты этого изменения.


увеличить изображение

Откройте файл services.htm (страница Учебные курсы) в режиме просмотра страниц. Отметим, что текст на этой странице представлен шрифтом, отличающимся от шрифта по умолчанию, используемого на домашней странице. Выделите первый абзац. Щелкните на стрелке справа от поля Шрифт (Font) и выберите в раскрывающемся списке шрифт Arial. Отметим, что размер шрифта все еще отличается от размера шрифта на домашней странице. Продoлжая работать с выделенным первым абзацем, нажмите клавиши (Ctrl) + (Spacebar), чтобы восстановить исходное форматирование страницы. Повторите этот шаг для каждого из трех абзацев с описанием курсов. Для каждого абзаца поместите точку ввода в конец абзаца и нажмите клавишу (Enter), чтобы вставить признак конца строки. Во вводном абзаце выделите слова географических районах. В панели инструментов Форматирование щелкните на стрелке кнопки Цвет шрифта (Font Color)
и измените цвет шрифта на cиний. Повторите эту процедуру, чтобы заменить цвет слов общему и сезонному уходу на зеленый и дополнительных мероприятий на красный. Ваша страница будет выглядеть как показано ниже.



Откройте файл serv01.htm (страница "Весенняя радость") в окне просмотра и редактирования страниц. Отметим, что шрифт на этой странице отличается от используемого по умолчанию шрифта на домашней странице. Нажмите клавиши (Ctrl)+(A), чтобы выделить все содержимое страницы. В раскрывающемся списке шрифтов выберите шрифт по умолчанию. Шрифт всех элементов данной страницы изменится на используемый по умолчанию шрифт. Выделите абзац, где приводятся сведения об учебных курсах. В панели инструментов Форматирование щелкните на стрелке кнопки Границы (Borders)
, чтобы появилась панель инструментов границ.


Эту панель инструментов можно отсоединять и закреплять где угодно или перемещать независимо. Выберите вариант Внешние границы (Outside Borders), чтобы применить его к данному абзацу. Продолжая работать с выделенным абзацем, выберите пункт Абзац (Paragraph) в меню Формат (Format). В диалоговом окне Абзац (Paragraph) выполните следующее: В раскрывающемся списке Выравнивание (Alignment) выберите вариант По центру (Center).В секции Отступ (Indentation) введите в полях Перед текстом (Before text) и После текста (After text) значение 15.В секции Интервал (Spacing) введите в полях Перед (Before) и После (After) значение 0.

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



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



Повторите шаги 18-25, чтобы переформатировать serv02.htm (страница Насекомоядные растения) и serv03.htm (страница Органика). В меню Файл (File) выберите пункт Сохранить все (Save All), чтобы сохранить все открытые файлы. Щелкните на пункте Закрыть веб-узел (Close Web) в меню Файл (File), чтобы закрыть данный сайт.


Каскадные таблицы стилей


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

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

Чтобы создать встроенную каскадную таблицу стилей в программе FrontPage, выберите пункт Стиль (Style) в меню Format (Формат) и затем определите свои собственные стили. Ваши определения сохраняются в HTML-коде данной страницы.

Чтобы создать внешнюю каскадную таблицу стилей в программе FrontPage, выберите тип CSS среди вариантов, которые имеются во вкладке Style Sheets (Таблицы стилей) диалогового окна Шаблоны страниц (Page Templates), щелкните на кнопке OK, чтобы создать CSS-файл, и затем определите свои стили в этом файле.

Чтобы присоединить таблицу стилей в программе FrontPage, выберите пункт Связи с таблицами стилей (Style Sheet Links) в меню Формат (Format) и перейдите к CSS-файлу на вашем компьютере или (если вы подсоединены к Internet) в сети.

В качестве альтернативного варианта вы можете выбрать вариант Применить с помощью CSS (Apply using CSS) в диалоговом окне Тема: (Themes), когда применяете какую-либо тему к вашей странице или сайту.

Первоначально каскадные таблицы стилей разработал консорциум W3C (World Wide Web Consortium). Более подробные сведения о текущих и будущих спецификациях CSS, а также о поддержке CSS различными браузерами см. на сайте www.w3c.org.



Вставка и редактирование комментариев


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

Для вставки комментария выберите пункт Примечания (Comment) в меню Вставка (Insert). Затем введите свои замечания в текстовом поле и щелкните на кнопке OK.

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





Вставка и редактирование текста


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

GardenCo

Для этого упражнения используется рабочая папка Office XP SBS\FrontPage\Chap18\InsertText.

Выполните следующие шаги.

В стандартной панели инструментов щелкните на стрелке кнопки Открыть (Open)

и затем щелкните в раскрывающемся списке на пункте Открыть веб-узел (Open Web). В диалоговом окне Открытие веб-узла (Open Web) перейдите к сайту GardenCo, который находится в рабочей папке, и щелкните на кнопке Открыть (Open), чтобы открыть данный сайт в программе FrontPage. В панели Список папок (Folder List) дважды щелкните на index.htm, чтобы открыть домашнюю страницу в окне просмотра и редактирования страниц, затем щелкните на кнопке Закрыть (Close)
, чтобы закрыть список папок и увеличить рабочую область экрана. В теле домашней страницы щелкните на вводном примечании и нажмите клавишу (End), чтобы поместить точку ввода в конец абзаца. Введите следующий текст: Добро пожаловать в компанию "Все для сада"! Мы занимаемся садовыми работами на северо-западе Тихоокеанского побережья. На этом сайте представлены наша продукция и услуги. Если вы заглянули к нам на сайт или в магазин, ощутите всю свободу выбора и дайте нам знать, если вам нужна наша помощь! Поместите точку ввода в конец комментария под заголовком "Наши задачи" и затем введите следующий текст:

В компании "Все для сада", мы предлагаем только высококачественные растения и садовый инвентарь для своих покупателей.

После комментария под заголовком "Контактная информация" введите следующий текст:




Пожалуйста, связывайтесь с нами по факсу или e-mail 24 часа в сутки, или звоните, а также приходите в наш магазин в следующее время: Понедельник - Пятница 9:00 - 21:00, Суббота и Воскресенье 10:00 - 17:00.

Ваш экран будет выглядеть как показано ниже.


увеличить изображение

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

Вы можете в любой момент изменить введенный вами текст или добавить новый текст.

Поместите точку ввода в конец абзаца под заголовком "Наши задачи". Нажмите клавишу (Enter), чтобы создать новый абзац, и затем введите следующий текст:

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

Теперь вам нужно поместить значок электронной почты рядом с заголовком Электронная почта (Electronic mail) в секции "Контактная информация" данной страницы. Поместите точку ввода слева от буквы "E" в "Electronic mail". В меню Вставка (Insert) выберите пункт Символ (Symbol), чтобы вызвать диалоговое окно Символ (Symbol). В раскрывающемся списке Шрифт (Font) выберите вариант Webdings. Выполните прокрутку, пока не увидите три почтовых значка, и щелкните на первом из них, как это показано ниже.



Щелкните на кнопке Вставка (Insert) и затем щелкните на кнопке Закрыть (Close). В панели Обычный вид (Normal) ваша контактная информация будет выглядеть как показано ниже.


увеличить изображение

Это явно не тот значок почты, который вы только что ввели! Щелкните на кнопке Просмотр (Preview)
внизу окна просмотра и редактирования страниц, чтобы перейти к панели просмотра. Теперь данный символ будет представлен в том виде, как его увидят посетители.



В стандартной панели инструментов щелкните на кнопке Сохранить (Save)
, чтобы сохранить вашу веб-страницу. В панели представлений щелкните на значке Задачи (Tasks), чтобы перейти в режим просмотра задач. Щелкните правой кнопкой на первой задаче и выберите из контекстного меню пункт Пометить как завершенную (Mark Complete), чтобы эта задача была отмечена как выполненная. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть текущий сайт.


Вставка существующего текста


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

Вы можете даже выполнять вставку целых файлов.

Вы можете копировать или вырезать различные фрагменты содержимого из файлов в различных программах Microsoft Office и затем вставлять их в ваши веб-страницы. Область задач Буфер обмен Office (Office Clipboard) может содержать тексты, графику и другие элементы файлов в удобном и доступном виде и может включать в себя до 24 различных элементов из всех приложений Office.
При каждой вставке содержимого буфера обмена в файл программы FrontPage появляется плавающая кнопка Параметры вставки (Paste Options)
, с помощью которой вы можете выбирать между применением целевых стилей, сохранением исходного форматирования или сохранением при вставке только текста. По умолчанию сохраняется исходное форматирование. Вы можете игнорировать кнопку параметров вставки, если не хотите выбирать что-то отличное от исходного форматирования.

Чтобы кнопка параметров вставки не появлялась на экране, выберите пункт Параметры страницы (Options) в меню Сервис (Tools) и сбросьте флажок Показать кнопки параметров вставки (Show Paste Options button).

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


Вы также обновите страницу "Услуги", используя текст из документа Microsoft Word. Затем вы обновите заголовок каждой страницы, чтобы отразить новое содержание.

GardenCo, PR2.doc, Classes.doc

Для этого упражнения используется рабочая папка Office XP SBS\FrontPage\Chap18\InsertExist.

Выполните следующие шаги.

Откройте сайт GardenCo, находящийся в этой рабочей папке. Перейдите в режим просмотра задач. Важно. Вы можете отображать на экране выполненные ранее задачи, щелкнув правой кнопкой на фоновой части списка задач и щелкнув затем в контекстном меню на пункте Показать журнал (Show History). Дважды щелкните на задаче Customize News Page (Настроить страницу News), чтобы открыть ее. Назначьте эту задачу самому себе, и затем щелкните на кнопке Запустить задачу (Start Task), чтобы открыть файл news.htm. Дважды щелкните на заголовке "Изменения на сайте", чтобы выделить его, и введите Публикации в прессе. Текст заголовка изменится, но формат останется прежним. Замените заданный по умолчанию текст вводного абзаца следующим текстом:

Ознакомьтесь с новостями! Прочтите здесь то, что пишут о нас в газетах.

Выделите комментарий под абзацем, который вы только что ввели. В меню Вставка (Insert) выберите пункт Файл (File), чтобы открыть диалоговое окно Вставка файла (Insert File). Перейдите в папку Office XP SBS\FrontPage\Chap18\InsertExist. В раскрывающемся списке Тип файлов (Files of type) выберите вариант Word 97-2002 (*.doc). Выберите из списка имеющихся файлов PR2.doc и затем щелкните на кнопке Открыть (Open), чтобы вставить весь текст этого документа на вашу веб-страницу.

Текст этого документа будет преобразован в формат RTF и затем в HTML, после чего произойдет его вставка на странице "Новости", как если бы вы ввели его вручную. Исходное форматирование текста сохраняется.

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



Контактная информация вверху импортированного текста содержится в таблице. Таблица и ее ячейки указываются пунктирными линиями. Щелкните на таблице. В меню Таблица (Table) укажите пункт Выделить (Select) и затем выберите пункт Таблица (Table). Будет выделена таблица и ее содержимое. Щелкните правой кнопкой на этой выделенной части и выберите в контекстном меню пункт Удалить (Delete), чтобы удалить эту таблицу. Трижды щелкните на заголовке Публикации в прессе, чтобы выделить весь абзац, и затем нажмите клавишу (Del), чтобы удалить его из веб- страницы. Щелкните на кнопке Сохранить (Save), чтобы сохранить вашу веб- страницу. FrontPage попросит вас обновить список задач. Щелкните на кнопке Да (Yes) и затем щелкните на кнопке Закрыть (Close)

в верхнем правом углу рабочей области, чтобы закрыть файл этой страницы. В панели представлений щелкните на значке Задачи (Tasks)
, чтобы открыть режим просмотра задач. Задачи Настроить домашнюю страницу и Настроить страницу новостей теперь будут показаны как выполненные. Далее вы добавите текст на странице Услуги. Назначьте задачу Настроить страницу услуг самому себе и запустите эту задачу. Появится страница Услуги. Теперь нужно настроить объявление на этой странице. Щелкните правой кнопкой на объявлениии страницы Услуги и выберите из контекстного меню пункт свойств объявления.



Появится диалоговое окно Свойства объявления на странице (Page Banner Properties). В поле Текст объявления (Page banner) выделите и удалите текущий текст и затем введите Учебные курсы, как это показано ниже.



Щелкните на кнопке OK, чтобы закрыть это диалоговое окно и изменить заголовок страницы. Это изменение повлияет на заголовок страницы как в объявлении страницы, так и в режим просмотра. В окне Windows Explorer перейдите в папку Office XP SBS\FrontPage\Chap18\InsertExist и дважды щелкните на файле classes.doc, чтобы открыть его в программе Word. Трижды щелкните в любом месте вводного абзаца, чтобы выделить его, и нажмите клавиши (Ctrl)+(C), чтобы скопировать текст в буфер обмена Office. На странице services.htm щелкните на тексте примечания, чтобы выделить его, и затем нажмите клавиши (Ctrl)+(V), чтобы скопировать текст из буфера обмена.


Скопированный текст заменит текст комментария. Выделите и удалите лишний (пустой) абзац, вставленный вместе с этим текстом. В панели списка папок откройте serv01.htm, serv02.htm и serv03.htm (три файла отдельных услуг) для редактирования. В каждом файле повторите шаги 17 и 18, чтобы заменить заголовки страниц на следующие краткие варианты, описанные в документе Учебные курсы: Измените Service 1 (Услуга 1) на Весенняя радость.Измените Service 2 (Услуга 2) на Насекомоядные растения.Измените Service 3 (Услуга 3) на Органика.

Отметим, что по мере обновления баннеров страниц одновременно изменяются навигационные гиперссылки под баннерами страниц и заголовки страниц в режиме просмотра.

Вернитесь к файлу services.htm и обратите внимание, что вертикальные гиперссылки навигации вдоль левого края также изменились, отражая новые заголовки страниц. Для каждой из трех гиперссылок Услуга дважды щелкните на гиперссылке, чтобы выделить ее, и введите полное имя соответствующего курса из документа Учебные курсы. Замените Name of service 1 (Имя услуги 1) на Планируем осенью весеннюю роскошь.Замените Name of service 2 (Имя услуги 2) на Насекомоядные растения: вредные или прекрасные?Замените Name of service 3 (Имя услуги 1) на Органические отходы: используйте их, чтобы от них избавиться!

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


увеличить изображение

На каждой из трех страниц описания отдельных курсов (serv01.htm, serv02.htm и serv03.htm) щелкните в любом месте тела страницы, нажмите клавиши (Ctrl)+(A), чтобы выделить все содержимое, и затем нажмите клавишу (Del). В документе Учебные курсы выделите и скопируйте в буфер обмена описательный текст, цели обучения и расписание курсов для каждого курса, а затем выполните вставку содержимого буфера обмена на соответствующих страницах. В меню Файл (File) выберите пункт Сохранить все (Save All), чтобы сохранить все изменения, и пометьте задачу как выполненную, когда получите соответствующий запрос. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть данный сайт.