Справочник по Windows Server 2003 (MCSE)
         

Текст

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

 

Упражнение 1. Форматирование текста

На страницах, созданных мастером web-узла, расположены комментарии и текстовые местозаполнители, которые нужно заменить реальным содержанием. Давайте приведем к надлежащему виду некоторые страницы узла. Остальные файлы вы можете модифицировать самостоятельно.

    Чтобы открыть web-узел, созданный на предыдущем занятии, выберите команду Файл > Открыть веб-узел (File > Open Web), выделите в окне диалога открытия узла папку Corporate, название которой совпадает с именем, данным узлу, и щелкните на кнопке Открыть (Open). Щелчком на кнопке Переходы панели режимов перейдите в режим переходов. Дважды щелкните на прямоугольнике страницы Товары. Выбранная web-страница откроется в режиме Страница, который позволяет изменять содержание документов Web (рис. 23.1).  Щелчком выделите комментарий, расположенный в верхней части страницы, и введите текст То в ары компании Геркулес отличаются высоким качеством!  Выделите слово Геркулес и щелкните на кнопке Полужирный (Bold) панели инструментов Форматирование (Formatting). Раскройте палитру кнопки Цвет текста (Font Color) и выберите в ней красный квадрат.

Рис. 23.1. Исходный вид страницы Товары

  1.  В раскрывающемся списке Размер шрифта (Font Size) выберите пункт 4 (14pt). Теперь слово Геркулес выделено жирным крупным шрифтом'красного цвета. Щелкните правее восклицательного знака.  Выберите команду Вставка > Горизонтальная линия (Insert > Horizontal Line). Текст первого абзаца окажется отделенным от остального содержания линией. Горизонтальная линия — это единственный графический элемент, который можно «нарисовать» на web-странице. Любые другие фигуры (наклонные линии, окружности, прямоугольники) размещаются только в виде файлов формата GIF или JPG, подготовленных в графическом редакторе или с помощью инструментов Frontpage. Поместите текстовый курсор правее буквы Н слова Название.  Введите текст Трубы металлические.  Сотрите остатки слов Название продукта!.  Поместите курсор в начало строки Описание продукта 1. Введите текст Трубы толстые и тонкие любой длины.
Примечание

Текст Название продукта 1 — это гиперссылка на другую web-страницу. Чтобы заменить ее текст, нужно вставлять новые символы внутрь имеющихся слов (например, правее буквы Н), иначе добавляемые буквы могут оказаться обычным текстом страницы, расположенным за пределами ссылки.

Рис. 23.2. Обновленное содержание

  1. Нажатием клавиши Delete сотрите ненужные символы. При редактировании текста будьте внимательны. Удалив целый абзац, вы часто не сможете вернуть прежнее расположение строк нажатием клавиши Enter. Отступы нового абзаца могут оказаться другими. Если по ошибке был стерт нужный блок текста, восстановите его с помощью команды Правка > Отменить (Edit > Undo). Нажимая клавишу Enter для добавления абзаца, имейте в виду, что отступы новых абзацев часто зависят от того, в каком месте находился текстовый курсор в момент нажатия этой клавиши. Повторяя шаги 10-14, замените текст остальных абзацев страницы, приведя его в соответствие с рис. 23.2.

Упражнение 2. Таблицы

Страница Товары смотрится достаточно хорошо. Теперь стоит подумать о содержании ее дочерних страниц, предлагающих описание и цены конкретной продукции. Давайте приведем в надлежащий вид страницу с описанием ассортимента труб. Чтобы перейти к дочерней странице (или к любой другой странице, ссылка на которую присутствует в текущем документе), не нужно возвращаться в режим переходов. Достаточно активизировать соответствующую ссылку.
     Удерживая нажатой клавишу Ctrl, щелкните на строке текста Трубы металлические. Откроется страница Трубы, показанная на рис. 23.3. На ней уже есть маркированный список, в котором по замыслу разработчиков шаблонов Front-Page должны быть перечислены разновидности товара. Предположим, что недавно компания Геркулес расширила ассортимент труб, и вы хотите поместить список новых товаров правее имеющегося списка. Документы формата HTML не поддерживают размещение текста в несколько столбцов, поэтому web-дизайнеры часто пользуются для этих целей таблицами.

Рис. 23.3. Описание ассортимента труб

  1.  Переместите курсор в начало строки Основные выгоды.  Выберите команду Таблица > Вставить > Таблица (Table > Insert > Table).  Вам понадобятся всего две ячейки, расположенные рядом. Поэтому введите в счетчик Число строк (Rows) открывшегося окна диалога (рис. 23.4) цифру 2. Чтобы по ширине таблица занимала не всю страницу, введите в поле Задать ширину (Specify Width) число 80, убедившись, что одноименный флажок установлен, а в расположенном рядом переключателе выбрано положение В процентах (In Percent).

Рис. 23.4. Параметры таблицы

  1.  Щелкните на кнопке ОК.  Выделите заголовок Основные выгоды и три строки расположенного под ним списка. Для этого протащите мышь слева от указанных абзацев.
Примечание

Разрабатывая web-страницы, не забывайте, что их будут просматривать люди, имеющие компьютеры с самыми разными дисплеями. Поэтому старайтесь задавать размеры элементов в процентах от ширины окнабраузера. Если, привыкнув к дисплею с высоким разрешением, вы добавите на страницу рисунок или таблицу шириной 1000 пикселов, то такой объект просто не поместится на экране монитора шириной 800 пикселов. Указывая размеры в процентах, можно избежать подобных неприятностей. Браузер удаленного пользователя сам масштабирует объект надлежащим образом.

  1. Нажатием клавиш Ctrl+X вырежьте выделенный текст. Щелкните в левой ячейке новой таблицы правой кнопкой мыши и выберите в контекстном меню команду Вставить (Paste).  Нажатием клавиши Tab переместите курсор в правую ячейку таблицы.  Введите заголовок Новые поступления.  Выбором пункта Заголовок 3 (Heading 3) в списке Стиль (Style) панели инструментов Форматирование измените шрифт нового заголовка.  Нажмите клавишу Enter и введите текст Трубы квадратные.  Затем введите еще два пункта, отделяя их нажатиями клавиши Enter.  Отредактируйте текст левой ячейки таблицы в соответствии с рис. 23.5.

Рис. 23.5. Добавление таблицы 

  1. Выше новой таблицы введите абзац с кратким описанием продукции.

Упражнение 3. Списки

Пункты левой ячейки таблицы, добавленной в предыдущем упражнении, оформлены в виде маркированного списка, а правая ячейка содержит простой текст, который смотрится непривлекательно. Давайте назначим пунктам правого списка красочные маркеры.
     Щелкните в начале строки Трубы квадратные.  Нажав клавишу Shift, щелкните в конце строки Трубы гнутые, чтобы выделить все три пункта списка.  Щелчком на кнопке Маркеры (Bullets) добавьте выделенным абзацам стандартные маркеры.  Чтобы поместить в качестве маркеров другой рисунок, выберите команду Формат > Список (Format > Bullets And Numbering).  В открывшемся окне диалога (рис. 23.6) выберите положение переключателя Задать рисунок (Specify Picture).

Рис. 23.6. Выбор маркера

  1.  Щелчком на кнопке Обзор откройте окно выбора файла. Затем дважды щелкните на значке файла smallnew.gif в папке images текущего web-узла. Щелчком на кнопке О К закройте окно настройки маркеров. Frontpage, так же как и Word, позволяет формировать не только маркированные, но и нумерованные списки. Чтобы пронумеровать пункты ассортимента стальных труб, выполните следующие действия. Выделите три абзаца левой ячейки таблицы, протащив указатель мыши слева от них. Щелкните на кнопке Нумерация (Numbering) панели инструментов Форматирование. Графические маркеры заменятся на последовательные числа/после чего списки станут такими, как показано на рис. 23.7.

Рис.23.7. Списки

 

Упражнение 4. Гиперссылки

При создании web-узла с помощью мастера приложение Frontpage автоматически размещает на страницах панели навигации с гиперссылками на различные web-страницы узла. Ссылки добавляются и в сам текст страниц. Но для обеспечения правильного функционирования web-узла разработчику часто приходится вставлять дополнительные ссылки или изменять параметры существующих. Предположим, вы не хотите указывать цены прямо на странице Трубы, а планируете представить их на дополнительной странице, организовав соответствующую ссылку. Кроме того, требуется добавить адрес электронной почты менеджера, ответственного за продажу труб, и гиперссылку на полный справочник товаров фирмы. Чтобы соответствующим образом модифицировать web-страницу, выполните следующие шаги.
    Выделите абзац Цены, щелкнув слева от него.  Введите текст Низкие цены, постоянным клиентам скидки. Выберите в списке Стиль панели инструментов Форматирование вариант Обычный (Normal), чтобы отменить шрифт, свойственный заголовкам.  Нажмите клавишу Entern напечатайте Дополнительную информацию о трубах можно найти в справочнике товаров или получить у менеджера по адресу info@hercules .corn. Затем снова нажмите Enter. Уберите весь текст и объекты, оказавшиеся ниже этого предложения. Они вам не понадобятся. Для этого выделяйте ненужные объекты и удаляйте их нажатиями клавиши Delete.
Frontpage умеет распознавать текст, похожий на адреса электронной почты, и автоматически настраивать ссылки таких адресов. Поэтому символы info@percules.com сразу интерпретируются как электронный адрес. Они будут подчеркнуты и выделены цветом, свойственным гиперссылкам.
  1.  Выполните команду Вид > Область задач (View > Task Pane). В появившемся окне в разделе Создать (New) щелкните на значке Пустая страница (Blank Page). Новая страница откроется в окне Frontpage.  Щелкните на кнопке Сохранить (Save) панели инструментов Стандартная (Standard). В открывшемся окне диалога Сохранить как (Save As) введите имя рп -се01 .htm и щелкните на кнопке Сохранить. Сюда вы можете вносить необходимую информацию, касающуюся цен.

Рис. 23.8. Настройка гиперссылки

  1.  Вернитесь на страницу prod0l. htm, щелкнув на соответствующей закладке, и выделите слово цены. Щелкните на нем правой кнопкой мыши и выберите в контекстном меню пункт Гиперссылка (Hyperlink).
Примечание

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

В появившемся окне диалога Добавление гиперссылки (Insert Hyperlink), показанном на рис. 23.8, в поле Текст (Text to display:) раздела Связать с (Link to) уже окажется введенным слово цены.
  1.  Найдите в списке файлов папки Corporate файл с именем pri се01. htm и щелчком выделите его из списка, при этом имя данного файла будет введено в поле Адрес: (Adress:).  Щелкните на кнопке ОК. Ссылка готова. Выделите два слова: справочнике товаров.  Щелкните на кнопке Гиперссылка (Hyperlink) панели инструментов Стандартная.  В списке вновь открывшегося окна диалога настройки гиперссылок дважды щелкните на папке Дополнения, чтобы раскрыть ее.

Рис. 23.9. Добавление гиперссылок

  1.  Выделите значок Справочник.htm. Имя этого файла появится в поле Адрес:. Щелкните на кнопке ОК. Теперь на странице появились три дополнительные гиперссылки, как показано на рис. 23.9. Они будут опробованы в конце занятия.
С помощью окна диалога Добавление гиперссылки можно создавать ссылки самых разных типов. Для этого достаточно ввести полный указатель ресурса в поле Адрес: этого окна или воспользоваться одной из кнопок, расположенных правее списка файлов. Чтобы ссылка переносила пользователя в определенную точку web-страницы, выберите в раскрывающемся списке Закладка (Bookmark) одну из закладок, имеющихся на целевой web-странице.

 

Рисунки

Одним из основных преимуществ гипертекстовых документов перед более ранними форматами данных, распространявшихся через Интернет, является возможность размещения в HTML-файлах рисунков. Графические объекты web-страниц хранятся в отдельных файлах форматов GIF, JPEG или PNG. Примерами таких объектов могут служить маркеры списка, созданного в упражнении 3. Но графические возможности HTML-файлов и редактора Frontpage не ограничиваются этим примером.

 

Упражнение 5. Добавление рисунка

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

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

  1. В строке меню приложения раскройте подменю Рисунок (Picture) меню Вставка (Insert) Откроются все возможности вставки рисунка, предоставляемые приложением:
Картинки (Clip Art) — возможность выбрать рисунок из одноименной библиотеки;

Рис. 23.10. Добавление рисунка  Из файла (From File) — при запуске этой команды открывается окно диалога, показанное на рис. 23.10. Кнопки левого ряда ускоряют доступ к нужным файлам. Например, чтобы вставить рисунок, имеющийся в наборе файлов разрабатываемого web-узла, нужно щелкнуть на кнопке Мои документы и выбрать нужный файл из списка; щелчок на кнопке Рабочий стол (Desktop) облегчает доступ к графическому файлу, расположенному налокальном или сетевом диске; кнопка вебпапки (Web Folders) позволяет просматривать папки и файлы на web-серверах и сетевых устройствах и выбирать нужные графические файлы. В поля Имя файла (File Name) и Тип файла (FileType) можно ввести полный указатель ресурса, добавив таким образом объект с заранее известным адресом;  Со сканера или камеры (From Scanner or Camera) — возможность получать изображение непосредственно со сканера или другого устройства, поддерживающего технологию TWAIN;  Создать фотоколлекцию (New Photo Gallery) — выбор этой команды позволяет вставлять фотографии из коллекции фотографий.

  1.  Давайте воспользуемся первым вариантом. Щелкните на кнопке Clip Art.  В области задач в окне Вставка картинки (Clip Art Gallery) введите в текстовое поле слово Am ma Ls (Животные) и щелкните на кнопке Найти (Search).  Найдите рисунок тигра, щелкните на нем и с помощью указателя мыши перетащите его на web-страницу.  Щелчком выделите рисунок.  Перетащите угловой маркер габаритной рамки рисунка, уменьшив изображение до нужного размера.  Щелкните на рисунке правой кнопкой мыши и выберите в контекстном меню команду Свойства рисунка (Picture Properties).
Примечание

Не размещайте на web-страницах слишком большие рисунки, на их загрузку с удаленного сервера требуется много времени. Это раздражает пользователей.

Рис. 23.11. Параметры рисунка

  1. На вкладке Общие (General), показанной на рис. 23.11, выберите положение переключателя GIF, чтобы указать формат, в котором должен храниться рисунок.  Щелкните на кнопке Обзор, расположенной справа от поля Расположение (Location). В открывшемся окне дважды щелкните на файле news.htm, который по замыслу должен содержать общую информацию о компании и основные новости. Теперь щелчок на логотипе будет открывать указанную страницу.  Раскройте вкладку Вид (Appearance). Чтобы текст, расположенный справа от рисунка, выровнялся по середине рисунка, выберите в раскрывающемся списке Выравнивание (Alignment) пункт По центру (Center).  Щелкните на кнопке ОК.  Чтобы сохранить выполненные изменения, выберите команду Файл > Сохранить (File> Save). В окне диалога Сохранение внедренных файлов (Save Embedded Files), показанном на рис. 23.12, щелкните на кнопке Сменить папку (Change Folder).

Рис. 23.12. Сохранение внедренного объекта

  1.  Дважды щелкните в открывшемся окне на папке images, а затем на кнопке ОК, указав этим папку, в которой должен храниться файл добавленного рисунка.  Щелкните на кнопке Переименовать (Rename) и введите имя logo.gif.  Затем щелкните на кнопке ОК.
Эта операция приведет к преобразованию изображения формата WMF, полученного из библиотеки Clip Art, в формат GIF, который в отличие от WMF может демонстрироваться любым браузером. В итоге логотип будет записан в файл logo.gif.

 

Упражнение 6. Фон страницы

Хорошо подобранный фон помогает пользователю воспринимать информацию. С помощью фона можно выделить определенные области страницы и просто при  

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

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

Чтобы изменить фон, выполните следующие действия.

     Выберите команду Формат > Тема.  В открывшемся окне диалога Темы, показанном на рис. 22.18, установите флажок Фоновый рисунок и щелкните на кнопке Изменить, а затем на кнопке Графика.  В открывшемся окне диалога Изменение темы (Modify Theme) в раскрывающемся списке Элемент выберите Фоновый рисунок (Background Picture) и щелкните на кнопке Обзор, как показано на рис. 23.13.  В появившемся окне диалога Открытие файла (Open) раскройте папку Offi-ceXP\OfficelO\Bitmaps\Styles и дважды щелкните на значке файла acblends.gif.  Щелкнув на кнопке ОК, перейдите к окну диалога Темы. В окне Образец темы (Sample of Theme) посмотрите на результат сделанных изменений.  Убедитесь, что переключатель Применить тему (Apply Theme to) установлен в положение К выбранным страницам и щелкните на кнопке ОК.

Рис. 23.13. Изменение фона страницы

Теперь web-страница будет выглядеть так, как показано на рис. 23.14.

Рис. 23.14. Web-страница с рисунком и измененным фоном

  1.  Щелкните на странице правой кнопкой мыши и выберите из контекстного меню пункт Свойства страницы (Page Properties) В открывшемся одноименном окне диалога раскройте вкладку Общие. В поле Название (Title) введите текст Трубы от компании Геркулес. При загрузке страницы этот текст будет появляться в заголовке окна браузера. Щелкните на кнопке ОК.
Если для страницы тема не установлена, то изменение фона можно произвести с помощью команды Формат > Фон (Format > Background), в появившемся окне диалога установить флажок Фоновый рисунок, щелкнуть на кнопке Обзор и в окне диалога Выбор рисунка фона (Select Background Pictures) выбрать файл с расширением GIF, например тот, что использован в этом упражнении.

 

Специальные объекты

Упражнение7. Панель навигации

Панели навигации — это особые объекты Frontpage, которые позволяют автоматически добавлять и обновлять ссылки на страницы, иерархически связанные с текущей. Из упражнения 7 предыдущего занятия вы уже узнали, как добавлять и убирать панели навигации с помощью команды Общие границы (Shared Borders). Теперь пришло время научиться настраивать панели навигации конкретных страниц. В левой части web-страницы Трубы есть местозаполнитель [Измените свойства этой панели для отображения на ней гиперссылок (Editthe properties forthis Link Bar to display hyperlinks here)], представляющий собой ненастроенную панель навигации. Давайте изучим ее свойства.

Рис. 23.15. Вкладка Общие окна диалога Свойства панели ссылок

     Щелкните на указанном местозаполнителе правой кнопкой мыши и выберите команду Свойства панели ссылок (Link Bar Properties). Откроется окно диалога с двумя вкладками, показанное на рис. 23.15. Вкладка Общие дает возможность указать, какие гиперссылки должны появляться в панели ссылок.
Положения переключателя раздела Добавляемые гиперссылки (Hyperlinks To Add То Page) позволяют добавлять следующие группы гиперссылок:  Родительский уровень (Parent Level) — на страницы, расположенные в навигаторе на уровень выше текущей;  Тот же уровень (Same Level) — на страницы того же уровня подчиненности, связанные в навигаторе с одной и той же родительской страницей;  Назад и далее (Back And Next) — на предыдущую и последующую страницы той же группы подчиненности, что и текущая;  Дочерний уровень (Child Level) — ссылки на дочерние страницы относительно текущей;  Глобальный уровень (Top Level) — ссылки на страницы самого верхнего уровня иерархии навигатора;  Дочерние страницы домашней (Child Page Under Home) — ссылки на страницы второго уровня иерархии навигатора.
Кроме того, флажки Домашняя страница (Home Page) и Родительская страница (Parent Page) позволяют независимо от положения переключателя помещать в панель навигации ссылки соответственно на домашнюю и родительскую web-страницы узла.
  1.  Выберите положение переключателя Назад и далее.

Рис. 23.16. Панели навигации

  1. Установите флажки Домашняя страница и Родительская страница.
На вкладке Стиль (Style) приводятся образцы стандартных стилей оформления гиперссылок и предоставляется возможность установить их ориентацию.
  1.  С помощью полосы прокрутки в разделе Выберите стиль выберите подходящий стиль оформления гиперссылок и щелкните на нем. Щелкните на кнопке ОК.  Прокрутите web-страницу вниз. Вы увидите в ее нижней части еще одну панель навигации с текстовыми ссылками.  Выделите эту панель и, чтобы открыть окно параметров панели, нажмите клавиши Alt+Enter.  Выберите положение переключателя Same Level. Установите флажки Home Page и Parent Page. Щелкните на кнопке ОК. Теперь ссылки панелей будут выглядеть так, как показано на рис. 23.16.
Примечание

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

 

Упражнение 8. Закладки

Закладки позволяют формировать гиперссылки на определенную точку конкретной web-страницы. С помощью таких ссылок пользователь может одним щелчком прокрутить страницу к нужному месту. Чтобы добавить закладку, выполните следующие шаги.
     Выберите команду Вид > Список папок (View > Folder List), чтобы вывести в окно Frontpage панель списка файлов и папок web-узла.  Дважды щелкните на значке файла prod04.htm, чтобы открыть его в окне редактора.  Прокрутите web-страницу в самый низ и щелкните в начале слов Phone.  Выберите команду Вставка > Закладка (Insert > Bookmark).  В поле Имя закладки (Bookmark Name) открывшегося окна диалога (рис. 23.17) введите слова end_of_page.

Рис. 23.17. Добавление закладки

  1. Щелкните на кнопке ОК.  Закройте файл prod04.htm.  При появлении соответствующего запроса подтвердите необходимость со хранения выполненных изменений.
Теперь давайте добавим на страницу Трубы ссылку, указывающую на только что созданную закладку.
  1. Введите в конце страницы Трубы фразу Обратите внимание на наши дешевые гвозди.  Выделите слово г возди, затем щелкните на нем правой кнопкой мыши и выберите команду Гиперссылка.  В списке открывшегося окна диалога создания гиперссылки щелкните на значке файла prod04.htm. В том же окне щелкните на кнопке Закладка (Bookmark), а затем на имени закладки в появившемся окне диалога Выделить место в документе (Select Place in Document) и щелкните на кнопке ОК. В поле Адрес: окна диалога Добавление гиперссылки будет введено имя prod04.htm#end_of_page, как показано на рис. 23.18.

Рис. 23.18. Ссылка на закладку

  1.  Щелкните на кнопке ОК.
Действие полученной гиперссылки вы сможете оценить, выполняя последнее упражнение занятия.

 

Просмотр страницы

Окно режима просмотра Страница имеет три вкладки, открывающие доступ к трем различным вариантам демонстрации web-страницы. Первый из них — Обычный (Normal) предназначен для разработки страниц с помощью средств редактирования приложения Frontpage. Второй режим — HTML — позволяет просматривать и корректировать код web-страницы, сгенерированный редактором. Наконец, третья вкладка дает возможность, не выходя из Frontpage, предварительно просмотреть построенную web-страницу.

 

Упражнение 9. HTML-код

Frontpage предлагает разработчику множество разнообразных инструментов, позволяющих конструировать практически любые web-страницы. Однако полное управление форматом отображения информации можно получить, только редактируя исходный код HTML-файла, формирующий изображение страницы. Frontpage предлагает два способа просмотра этого кода.
     Не выходя из окна web-страницы Трубы, выберите команду Вид > Показать теги (View > Reveal Tags).

Рис. 23.19. Теги документа В этом режиме (рис. 23.19) на экране отображается не только содержимое web-страницы, но и управляющие конструкции — теги, — которые и формируют имеющееся форматирование документа. В HTML-документе все теги заключены в угловые скобки. Они делятся на открывающие и закрывающие, которые отличаются от первых наличием символа «/». Между одноименными открывающим и закрывающим тегами размещается текст, форматирование которого задается этими тегами. Например, между тегами <table> и </table> заключено содержимое таблицы. Некоторые теги, такие как <hr>, который добавляет на страницу горизонтальную линию, не имеют парного закрывающего тега. Многоуровневое вложение подобных конструкций позволяет задавать любые самые сложные варианты форматирования документа. Указанный режим демонстрации страницы помогает понять ее структуру и облегчает поиск ошибок.

  1. Переместите указатель мыши на значок тега </а>, расположенный справа от изображения тигра. Появится всплывающая подсказка, демонстрирующая полный текст этого тега. Однако указанный вариант просмотра страницы дает возможность видеть теги,но не позволяет их редактировать.  Чтобы получить полный доступ к коду страницы, щелкните на корешке HTML. Вы увидите текстовый документ, на основе которого генерируется web-страница. Давайте попробуем скорректировать его. Прокрутите содержимое окна до текста Тонкие медные трубы. Введите перед словом медные теги <bxfont color=»c90000">.
  2.  После этого слова добавьте теги </font></b>.
Примечание

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

  1. Щелкните на корешке Обычный, чтобы вернуться в обычный режим просмотра страницы.  Нажатием клавиш Ctrl+/ отключите демонстрацию тегов. Обратите внимание, что теги, добавленные в режиме редактирования исходного кода, окрасили слово медные в красный цвет и задали ему жирное начертание.
Досконально изучив язык HTML, вы сможете корректировать страницы, созданные во Frontpage, добавляя в них самые сложные эффекты, недоступные существующим web-редакторам.

 

Упражнение 10. Предварительный просмотр

Режим предварительного просмотра показывает web-страницу такой, какой она будет в окне браузера.
    Чтобы включить такой просмотр, щелкните на корешке Просмотр (Preview). Теперь на странице отсутствуют пунктирные линии, показывающие границы разделов страницы. Изменилась рамка таблицы, стали другими шрифт и интервалы между строками. Для активизации гиперссылок теперь не нужно нажимать клавишу Ctrl. Достаточно просто щелкнуть на ссылке. В целом обычный режим просмотра очень похож на результирующую страницу, он позволяет достаточно точно оценивать расположение объектов и оформление текста. Но, редактируя документ, не забывайте периодически обращаться к вкладке Просмотр, которая точнее показывает общий вид элементов страницы. Перед публикацией web-узла обязательно просмотрите его страницы в окне браузера. Если на вашем компьютере установлено несколько браузеров, откройте узел в каждом из них, внимательно изучите все детали и убедитесь, что все браузеры корректно отображают введенную информацию и графические объекты. Имейте в виду, что Frontpage позволяет оперативно загружать web-страницы в любой браузер.  Щелчком на кнопке Сохранить панели инструментов Стандартная сохраните измененный вариант страницы Трубы.  Выберите команду Файл > Просмотр в обозревателе (File > Preview In Browser). В открывшемся окне диалога выберите пункт Internet Explorer, а затем щелкните на кнопке Просмотр (Preview). Страница Трубы, сформированная в упражнениях этого занятия, появится в окне Internet Explorer . Давайте проверим работу ссылок, добавленных на эту страницу. Переместите указатель на слова справочник товаров, чтобы значок указателя принял форму ладони, и щелкните мышью. Страница Трубы сменится страницей Справочник товаров. Чтобы вернуться обратно, щелкните на кнопке Назад на Трубы от компании Геркулес панели инструментов Internet Explorer.
  1.  Повторяя шаги 5 и 6, проверьте действие ссылки цены. Щелкните на гиперссылке гвозди. Обратите внимание, что это действие не только открывает страницу Гвозди, но и прокручивает ее до закладки end_of_ page, вставленной в конец этой страницы. В текстовой панели навигации, расположенной в нижней части страницы Гвозди, щелкните на ссылке Up, чтобы переместиться к странице Товары — родительской по отношению к трем web-страницам, рассмотренным выше.  Чтобы вернуться на страницу Трубы, щелкните на ссылке Трубы металлические.  Щелкните на ссылке info@hercules. corn. Эта операция запустит Outllook и откроет окно нового сообщения, в поле Кому (То) которого уже будет добавлен электронный адрес получателя. Чтобы отослать письмо по адресу, указанному в гиперссылке, останется только ввести текст и щелкнуть на кнопке Отправить (Send).  Закройте окно Internet Explorer.  В приложении Frontpage выберите команду Файл > Закрыть веб-узел (File > Close Web). При появлении запросов о необходимости сохранения изменений щелкайте на кнопке Да.

 

Контрольное упражнение

Чтобы закрепить навыки, полученные на этом занятии, выполните следующие действия.
    Откройте web-узел, созданный в предыдущем упражнении. Как быстро открыть web-узел, с которым вы недавно работали?
  1.   Выведите в режиме Страница содержимое файла Справочник.htm, сохраненного в папке Дополнения. Добавьте на страницу Справочник товаров таблицу с тремя столбцами.  Введите в эту таблицу названия, цены и минимальные партии поставок товаров, освещаемых web-узлом Corporate. Назначьте ячейкам таблицы желтый фон.  Как изменить фон ячеек таблицы?
  2.  Добавьте на web-страницу тот же логотип, который был вставлен на страницу Трубы.  Назначьте фон страницы, идентичный выбранному в упражнении 6.  Название каждого товара, расположенное в левой ячейке таблицы, свяжите со ссылкой на web-страницу, содержащую подробное описание этого товара.  Измените расположенную слева панель навигации так, чтобы в нее выводились кнопки страниц того же уровня, а также ссылки на домашнюю и родительскую страницы.  В качестве текста, выводимого в заголовке браузера при открытии данной страницы, назначьте предложение Справочник товаров компании Геркулес.  Как настроить текст заголовка окна?
  3.  Просмотрите HTML-код полученной страницы. Откройте страницу Справочник товаров в окне браузера Internet Explorer и проверьте работу гиперссылок. Сохраните изменения и закройте web-узел.

Подведение итогов

На этом занятии был рассмотрен интегрированный в приложение Frontpage модуль редактирования web-страниц. Вы научились строить таблицы, создавать маркированные и нумерованные списки, добавлять рисунки, задавать рисунок для фона, настраивать гиперссылки на другие web-страницы и ресурсы Интернета. Следующее занятие рассказывает о методах создания web-страниц с кадрами и способах анимации объектов страниц. На нем также будет рассмотрено назначение некоторых дополнительных элементов и расширений, предлагаемых компанией Microsoft.