9 программа frontpage.
Редактор страниц Frontpage во многом похож на Word. Но формат HTML имеет свои правила построения файлов, вносящие определенную специфику в процесс создания документов. Вы познакомитесь с основными приемами разработки содержания страниц. В основе практически любой web-страницы лежит текст. Его можно делить на абзацы, оформлять в виде пунктов маркированных списков или помещать в ячейки таблиц. Правильное форматирование текста во многом определяет удобство восприятия информации.
Форматирование текста На страницах, созданных мастером web-узла, расположены комментарии и текстовые местозаполнители, которые нужно заменить реальным содержанием. Давайте приведем к надлежащему виду некоторые страницы узла. Остальные файлы вы можете модифицировать самостоятельно. Чтобы открыть web-узел, созданный на предыдущем занятии, выберите команду Файл > Открыть веб-узел, выделите в окне диалога открытия узла папку Corporate, название которой совпадает с именем, данным узлу, и щелкните на кнопке Открыть. Щелчком на кнопке Переходы панели режимов перейдите в режим переходов. Дважды щелкните на прямоугольнике страницы Товары. Выбранная web-страница откроется в режиме Страница, который позволяет изменять содержание документов Web (Рис. 9.1). Щелчком выделите комментарий, расположенный в верхней части страницы, и введите текст – Товары компании Геркулес отличаются высоким качеством! Выделите слово Геркулес и щелкните на кнопке Полужирный панели инструментов Форматирование. Раскройте палитру кнопки Цвет текста и выберите в ней красный квадрат. Рис. 9.1 Исходный вид страницы Товары В раскрывающемся списке Размер шрифта выберите пункт 4 (14pt). Теперь слово Геркулес выделено жирным крупным шрифтом'красного цвета. Щелкните правее восклицательного знака. Выберите команду Вставка > Горизонтальная линия. Текст первого абзаца окажется отделенным от остального содержания линией. Горизонтальная линия — это единственный графический элемент, который можно «нарисовать» на web-странице. Любые другие фигуры (наклонные линии, окружности, прямоугольники) размещаются только в виде файлов формата GIF или JPG, подготовленных в графическом редакторе или с помощью инструментов Frontpage. Поместите текстовый курсор правее буквы Н слова Название. Введите текст Трубы металлические. Сотрите остатки слов Название продукта!. Поместите курсор в начало строки Описание продукта 1. Введите текст Трубы толстые и тонкие любой длины. Текст Название продукта 1 — это гиперссылка на другую web-страницу. Чтобы заменить ее текст, нужно вставлять новые символы внутрь имеющихся слов (например, правее буквы Н), иначе добавляемые буквы могут оказаться обычным текстом страницы, расположенным за пределами ссылки. Нажатием клавиши Delete сотрите ненужные символы. При редактировании текста будьте внимательны. Удалив целый абзац, вы часто не сможете вернуть прежнее расположение строк нажатием клавиши Enter. Отступы нового абзаца могут оказаться другими. Если по ошибке был стерт нужный блок текста, восстановите его с помощью команды Правка > Отменить. Нажимая клавишу Enter для добавления абзаца, имейте в виду, что отступы новых абзацев часто зависят от того, в каком месте находился текстовый курсор в момент нажатия этой клавиши. Повторяя шаги 10-14, замените текст остальных абзацев страницы, приведя его в соответствие с Рис. 9.2. Рис. 9.2 Обновленное содержание
Таблицы Страница Товары смотрится достаточно хорошо. Теперь стоит подумать о содержании ее дочерних страниц, предлагающих описание и цены конкретной продукции. Давайте приведем в надлежащий вид страницу с описанием ассортимента труб. Чтобы перейти к дочерней странице (или к любой другой странице, ссылка на которую присутствует в текущем документе), не нужно возвращаться в режим переходов. Достаточно активизировать соответствующую ссылку. Удерживая нажатой клавишу Ctrl, щелкните на строке текста Трубы металлические. Откроется страница Трубы, показанная на Рис. 9.3. На ней уже есть маркированный список, в котором по замыслу разработчиков шаблонов Front-Page должны быть перечислены разновидности товара. Предположим, что недавно компания Геркулес расширила ассортимент труб, и вы хотите поместить список новых товаров правее имеющегося списка. Документы формата HTML не поддерживают размещение текста в несколько столбцов, поэтому web-дизайнеры часто пользуются для этих целей таблицами. Рис. 9.3 Описание ассортимента труб Переместите курсор в начало строки Основные выгоды. Выберите команду Таблица > Вставить > Таблица. Вам понадобятся всего две ячейки, расположенные рядом. Поэтому введите в счетчик Число строк открывшегося окна диалога (Рис. 9.4) цифру 2. Чтобы по ширине таблица занимала не всю страницу, введите в поле Задать ширину (Specify Width) число 80, убедившись, что одноименный флажок установлен, а в расположенном рядом переключателе выбрано положение В процентах (In Percent). Рис. 9.4 Параметры таблицы Щелкните на кнопке ОК. Выделите заголовок Основные выгоды и три строки расположенного под ним списка. Для этого протащите мышь слева от указанных абзацев. Разрабатывая web-страницы, не забывайте, что их будут просматривать люди, имеющие компьютеры с самыми разными дисплеями. Поэтому старайтесь задавать размеры элементов в процентах от ширины окна браузера. Если, привыкнув к дисплею с высоким разрешением, вы добавите на страницу рисунок или таблицу шириной 1000 пикселов, то такой объект просто не поместится на экране монитора шириной 800 пикселов. Указывая размеры в процентах, можно избежать подобных неприятностей. Браузер удаленного пользователя сам масштабирует объект надлежащим образом. Нажатием клавиш Ctrl+X вырежьте выделенный текст. Щелкните в левой ячейке новой таблицы правой кнопкой мыши и выберите в контекстном меню команду Вставить. Нажатием клавиши Tab переместите курсор в правую ячейку таблицы. Введите заголовок Новые поступления. Выбором пункта Заголовок 3 в списке Стиль панели инструментов Форматирование измените шрифт нового заголовка. Нажмите клавишу Enter и введите текст Трубы квадратные. Затем введите еще два пункта, отделяя их нажатиями клавиши Enter. Отредактируйте текст левой ячейки таблицы в соответствии с Рис. 9.5.
Рис. 9.5 Добавление таблицы Выше новой таблицы введите абзац с кратким описанием продукции.
Списки Пункты левой ячейки таблицы, добавленной в предыдущем упражнении, оформлены в виде маркированного списка, а правая ячейка содержит простой текст, который смотрится непривлекательно. Давайте назначим пунктам правого списка красочные маркеры. Щелкните в начале строки Трубы квадратные. Нажав клавишу Shift, щелкните в конце строки Трубы гнутые, чтобы выделить все три пункта списка. Щелчком на кнопке Маркеры добавьте выделенным абзацам стандартные маркеры. Чтобы поместить в качестве маркеров другой рисунок, выберите команду Формат > Список. В открывшемся окне диалога (Рис. 9.6) выберите положение переключателя Задать рисунок. Рис. 9.6 Выбор маркера Щелчком на кнопке Обзор откройте окно выбора файла. Затем дважды щелкните на значке файла smallnew.gif в папке images текущего web-узла. Щелчком на кнопке О К закройте окно настройки маркеров. Frontpage, так же как и Word, позволяет формировать не только маркированные, но и нумерованные списки. Чтобы пронумеровать пункты ассортимента стальных труб, выполните следующие действия. Выделите три абзаца левой ячейки таблицы, протащив указатель мыши слева от них. Щелкните на кнопке Нумерация панели инструментов Форматирование. Графические маркеры заменятся на последовательные числа, после чего списки станут такими, как показано на Рис. 9.7. Рис. 9.7 Списки
Гиперссылки
При создании web-узла с помощью мастера приложение Frontpage автоматически размещает на страницах панели навигации с гиперссылками на различные web-страницы узла. Ссылки добавляются и в сам текст страниц. Но для обеспечения правильного функционирования web-узла разработчику часто приходится вставлять дополнительные ссылки или изменять параметры существующих. Предположим, вы не хотите указывать цены прямо на странице Трубы, а планируете представить их на дополнительной странице, организовав соответствующую ссылку. Кроме того, требуется добавить адрес электронной почты менеджера, ответственного за продажу труб, и гиперссылку на полный справочник товаров фирмы. Чтобы соответствующим образом модифицировать web-страницу, выполните следующие шаги. Выделите абзац Цены, щелкнув слева от него. Введите текст Низкие цены, постоянным клиентам скидки. Выберите в списке Стиль панели инструментов Форматирование вариант Обычный (Normal), чтобы отменить шрифт, свойственный заголовкам. Нажмите клавишу Enter напечатайте Дополнительную информацию о трубах можно найти в справочнике товаров или получить у менеджера по адресу info@hercules .corn. Затем снова нажмите Enter. Уберите весь текст и объекты, оказавшиеся ниже этого предложения. Они вам не понадобятся. Для этого выделяйте ненужные объекты и удаляйте их нажатиями клавиши Delete. Frontpage умеет распознавать текст, похожий на адреса электронной почты, и автоматически настраивать ссылки таких адресов. Поэтому символы info@percules.com сразу интерпретируются как электронный адрес. Они будут подчеркнуты и выделены цветом, свойственным гиперссылкам. Выполните команду Вид > Область задач. В появившемся окне в разделе Создать щелкните на значке Пустая страница. Новая страница откроется в окне Frontpage. Щелкните на кнопке Сохранить панели инструментов Стандартная. В открывшемся окне диалога Сохранить как введите имя рriсе01.htm и щелкните на кнопке Сохранить. Сюда вы можете вносить необходимую информацию, касающуюся цен. Вернитесь на страницу prod0l.htm, щелкнув на соответствующей закладке, и выделите слово цены. Щелкните на нем правой кнопкой мыши и выберите в контекстном меню пункт Гиперссылка (Hyperlink).
Обратите внимание на закладки с именами открытых файлов в верхней части окна в режиме страницы. Эта особенность, появившаяся впервые в Office XP, обеспечивает самый быстрый доступ к странице в процессе редактирования. В появившемся окне диалога Добавление гиперссылки, показанном на Рис. 9.8, в поле Текст раздела Связать с (Link to) уже окажется введенным слово цены. Найдите в списке файлов папки Corporate файл с именем priсе01.htm и щелчком выделите его из списка, при этом имя данного файла будет введено в поле Адрес. Щелкните на кнопке ОК. Ссылка готова. Выделите два слова: справочнике товаров. Щелкните на кнопке Гиперссылка (Hyperlink) панели инструментов Стандартная. В списке вновь открывшегося окна диалога настройки гиперссылок дважды щелкните на папке Дополнения, чтобы раскрыть ее.
Рис. 9.8 Настройка гиперссылки
Выделите значок Справочник.htm. Имя этого файла появится в поле Адрес. Щелкните на кнопке ОК. Теперь на странице появились три дополнительные гиперссылки, как показано на Рис. 9.9. Они будут опробованы в конце занятия. С помощью окна диалога Добавление гиперссылки можно создавать ссылки самых разных типов. Для этого достаточно ввести полный указатель ресурса в поле Адрес: этого окна или воспользоваться одной из кнопок, расположенных правее списка файлов. Чтобы ссылка переносила пользователя в определенную точку web-страницы, выберите в раскрывающемся списке Закладка (Bookmark) одну из закладок, имеющихся на целевой web-странице.
Рис. 9.9 Добавление гиперссылок
Рисунки
Одним из основных преимуществ гипертекстовых документов перед более ранними форматами данных, распространявшихся через Интернет, является возможность размещения в HTML-файлах рисунков. Графические объекты web-страниц хранятся в отдельных файлах форматов GIF, JPEG или PNG. Примерами таких объектов могут служить маркеры списка, созданные главе 9.3. Но графические возможности HTML-файлов и редактора Frontpage не ограничиваются этим примером.
Добавление рисунка Чтобы добавить на web-страницу, сформированную в предыдущих главах, логотип компании, выполните следующие шаги. Поместите текстовый курсор в начало первой строки web-страницы. В web-страницах все рисунки привязываются к определенной точке текста, то есть они являются как бы очередным символом. Поэтому для размещения рисунка в произвольных точках страницы web-дизайнерам приходится прибегать к различного рода хитростям, например, размещать графические объекты в ячейках таблиц с невидимыми рамками. В строке меню приложения раскройте подменю Рисунок меню Вставка. Откроются все возможности вставки рисунка, предоставляемые приложением: Картинки (Clip Art) — возможность выбрать рисунок из одноименной библиотеки; Из файла (From File) — при запуске этой команды открывается окно диалога, показанное на Рис. 9.10. Кнопки левого ряда ускоряют доступ к нужным файлам. Например, чтобы вставить рисунок, имеющийся в наборе файлов разрабатываемого web-узла, нужно щелкнуть на кнопке Мои документы и выбрать нужный файл из списка; щелчок на кнопке Рабочий стол облегчает доступ к графическому файлу, расположенному налокальном или сетевом диске; кнопка вебпапки (Web Folders) позволяет просматривать папки и файлы на web-серверах и сетевых устройствах и выбирать нужные графические файлы. В поля Имя файла и Тип файла можно ввести полный указатель ресурса, добавив таким образом объект с заранее известным адресом; Рис. 9.10 Добавление рисунка Со сканера или камеры (From Scanner or Camera) — возможность получать изображение непосредственно со сканера или другого устройства, поддерживающего технологию TWAIN; Создать фотоколлекцию (New Photo Gallery) — выбор этой команды позволяет вставлять фотографии из коллекции фотографий. Давайте воспользуемся первым вариантом. Щелкните на кнопке Clip Art. В области задач в окне Вставка картинки введите в текстовое поле слово Animals (Животные) и щелкните на кнопке Найти (Search). Найдите рисунок тигра, щелкните на нем и с помощью указателя мыши перетащите его на web-страницу. Щелчком выделите рисунок. Перетащите угловой маркер габаритной рамки рисунка, уменьшив изображение до нужного размера. Щелкните на рисунке правой кнопкой мыши и выберите в контекстном меню команду Свойства рисунка. Не размещайте на web-страницах слишком большие рисунки, на их загрузку с удаленного сервера требуется много времени. Это раздражает пользователей. На вкладке Общие, показанной на Рис. 9.11, выберите положение переключателя GIF, чтобы указать формат, в котором должен храниться рисунок. Рис. 9.11 Параметры рисунка Щелкните на кнопке Обзор, расположенной справа от поля Расположение (Location). В открывшемся окне дважды щелкните на файле news.htm, который по замыслу должен содержать общую информацию о компании и основные новости. Теперь щелчок на логотипе будет открывать указанную страницу. Раскройте вкладку Вид. Чтобы текст, расположенный справа от рисунка, выровнялся по середине рисунка, выберите в раскрывающемся списке Выравнивание пункт По центру. Щелкните на кнопке ОК. Чтобы сохранить выполненные изменения, выберите команду Файл > Сохранить. В окне диалога Сохранение внедренных файлов, показанном на Рис. 9.12, щелкните на кнопке Сменить папку. Рис. 9.12 Сохранение внедренного объекта Дважды щелкните в открывшемся окне на папке images, а затем на кнопке ОК, указав этим папку, в которой должен храниться файл добавленного рисунка. Щелкните на кнопке Переименовать и введите имя logo.gif. Затем щелкните на кнопке ОК. Эта операция приведет к преобразованию изображения формата WMF, полученного из библиотеки Clip Art, в формат GIF, который в отличие от WMF может демонстрироваться любым браузером. В итоге логотип будет записан в файл logo.gif. HTML-код Frontpage предлагает разработчику множество разнообразных инструментов, позволяющих конструировать практически любые web-страницы. Однако полное управление форматом отображения информации можно получить, только редактируя исходный код HTML-файла, формирующий изображение страницы. Frontpage предлагает два способа просмотра этого кода. Не выходя из окна web-страницы Трубы, выберите команду Вид > Показать теги. В этом режиме (Рис. 9.13) на экране отображается не только содержимое web-страницы, но и управляющие конструкции — теги, — которые и формируют имеющееся форматирование документа. В HTML-документе все теги заключены в угловые скобки. Они делятся на открывающие и закрывающие, которые отличаются от первых наличием символа «/». Между одноименными открывающим и закрывающим тегами размещается текст, форматирование которого задается этими тегами. Например, между тегами <table> и </table> заключено содержимое таблицы. Некоторые теги, такие как <hr>, который добавляет на страницу горизонтальную линию, не имеют парного закрывающего тега. Многоуровневое вложение подобных конструкций позволяет задавать любые самые сложные варианты форматирования документа. Указанный режим демонстрации страницы помогает понять ее структуру и облегчает поиск ошибок. Переместите указатель мыши на значок тега </а>, расположенный справа от изображения тигра. Появится всплывающая подсказка, демонстрирующая полный текст этого тега. Однако указанный вариант просмотра страницы дает возможность видеть теги,но не позволяет их редактировать.
Рис. 9.13 Теги документа Чтобы получить полный доступ к коду страницы, щелкните на корешке HTML. Вы увидите текстовый документ, на основе которого генерируется web-страница. Давайте попробуем скорректировать его. Прокрутите содержимое окна до текста Тонкие медные трубы. Введите перед словом медные теги <bxfont color=»c90000">. После этого слова добавьте теги </font></b>. Добавление тегов в режиме редактирования кода HTML иногда приводит к нарушению ранее назначенных режимов форматирования и искажению некоторых объектов. Перед изменением кода полезно сохранить на диске копию редактируемой web-страницы, чтобы в случае неудачи иметь возможность возвратиться к исходному варианту. Щелкните на корешке Обычный, чтобы вернуться в обычный режим просмотра страницы. Нажатием клавиш Ctrl+/ отключите демонстрацию тегов. Обратите внимание, что теги, добавленные в режиме редактирования исходного кода, окрасили слово медные в красный цвет и задали ему жирное начертание. Досконально изучив язык HTML, вы сможете корректировать страницы, созданные во Frontpage, добавляя в них самые сложные эффекты, недоступные существующим web-редакторам.
[1] Здесь и далее следует помнить, что в разных версиях Access названия и количество может изменяться. |