Навигация
Управляющие структуры Microsoft Office Front Page
27739
знаков
1
таблица
0
изображений
1.2. Управляющие структуры Microsoft Office Front Page
Базовым элементом языка разметки гипертекста является - ТЕГ (дескриптор, маркер). Тег всегда заключен между скобками < > и имеет следующий вид:
<ТЕГ атрибут 1=ЗНАЧЕНИЕ ... атрибут N=ЗНАЧЕНИЕ>
Теги бывают одиночными и контейнерными. Контейнером называется пара: открывающий <ТЕГ> и закрывающий </ТЕГ>.
<ТЕГ> Контейнер </ТЕГ>
Открывающий тег служит для указания программе-браузеру начала какого-либо объекта или задания свойств объектов помещенных в контейнер. Закрывающий тег служит для указания программе-браузеру о конце объекта или окончания применения свойств, заданных в открывающем теге[2].
Атрибуты тега задают значения свойств данного объекта или объектов помещенных в контейнер. Значения свойств, содержащие пробелы, берутся в кавычки, в остальных случаях кавычки можно опустить.
HTML документ представляет собой обычный текстовый файл, содержащий маркированный тегами форматирования текст, а так же заданные специальными тегами ссылки на графические и прочие файлы мультимедиа, ссылки на другие документы HTML и ресурсы Internet.
Документ HTML начинается открывающим тегом <HTML> и заканчивается закрывающим тегом </HTML>. Между данной парой контейнерных тегов располагаются две другие основные части HTML документа: заголовок, заключенный в контейнер <HEAD>...</HEAD> и тело документа в контейнере <BODY>...</BODY>. Таким образом, структура простого HTML документа выглядит так:
Структура HTML документа [1]<HTML> - Начало документа
<HEAD>
ЗАГОЛОВОК ДОКУМЕНТА
</HEAD>
<BODY>
ТЕЛО ДОКУМЕНТА
</BODY>
</HTML> - Конец документа
Ссылки в HTML документахКак было сказано выше, HTML-документ это обычный текстовый файл. Гипертекстовым его делают содержащиеся в нем ссылки на другие документы и ресурсы Internet. Рассмотрим, что такое ссылка, какие бывают типы ссылок и как их задать в документе.
Ссылка состоит из двух компонентов: так называемого якоря (anchor) или элемента привязки и URL (Universal Resurse Locator) связанного с ним ресурса Internet.
Первый компонент ссылки - якорь это текстовый или графический объект, который, как правило, служит органом управления на Web-странице. Каждый раз при просмотре Web-страниц мы видим множество различных элементов-якорей. Это и красочные рекламные баннеры, всевозможные кнопки и иконки, выделенные подчеркнутым курсивом элементы текста, адреса электронной почты.
Второй компонент ссылки не отображается Web-браузером, но служит конкретным указанием, где в Internet найти, и что сделать при активизации пользователем соответствующего ему якоря. Адреса ресурсов бывают относительные и абсолютные.
Относительный адрес это адрес ресурса относительно компьютера и каталога загрузки HTML-документа, если иной базовый адрес не указан в заголовке документа, тег <BASE>. Относительный адрес задается в сокращенной форме (путь/файл). Например, если ваша начальная страница index.htm загружена браузером c httр://www.site.ru, то использование в ней относительной ссылки resume.htm означает загрузку httр://www.site.ru/resume.htm.
Абсолютные адреса используются для привязки к ресурсам других узлов Internet и задаются полным форматом записи (httр://компьютер/путь/файл).
Например: httр://www.sitename.ru/filename.htm.
Ссылки в документах задаются при помощи контейнера <A> ...</A>, следующей структуры:
<A HREF="Ресурс" TARGET="имя окна" TITLE="Подсказка">Элемент - якорь</A>
Атрибут HREF в открывающем теге задает ресурс который необходимо обработать браузеру при выборе на Web-странице, соответствующего ему якоря. Рассмотрим наиболее часто используемые ресурсы:
<A HREF="URL"> - ссылки на другие документы HTML и файлы.
<A HREF="ftр://ftp_server/path/filename"> - ссылки на файлы FTP-сервера.
<A HREF="mailto:e-mail"> - ссылки на адреса электронной почты.
<A HREF="news:newsgroup"> - ссылки на группы новостей.
Атрибут TITLE задает текстовую подсказку в стиле ToolTip, отображаемую браузером при позиционировании указателя-курсора в зоне элемента-якоря.
Заключенный в контейнер элемент-якорь выделяется браузером особым образом (текст-цветом и подчеркиванием, графика-рамкой) при отображении на Web-странице. Можно задать свой способ выделения элемента-якоря в атрибутах тега <BODY> - тела документа.
Теперь рассмотрим несколько конкретных примеров использования ссылок в документах:
<A HREF="httр://www.site.ru" TITLE="Переход на www.site.ru"> Заходите к нам</A> - абсолютная ссылка: переход на сайт www.site.ru, текстовый якорь - Заходите к нам, с подсказкой.
<A HREF="/VW/cars.htm"> Модельный ряд VW </A> - относительная ссылка: открытие станицы cars.htm в подразделе VW относительно раздела основной страницы, текстовый якорь - Модельный ряд VW, без подсказки.
<A HREF="mailtо:webmaster@freemail.ru">Связь с вебмастером</A> - загрузка интерфейса к почтовой системе пользователя с автозаполнением реквизитов получателя, текстовый якорь - Связь с вебмастером, без подсказки.
<A HREF="ftр://ftp.site.ru/soft/driver.zip">Новый драйвер здесь</A> - доступ на FTP-сервере к файлу драйвера, текстовый якорь-Новый драйвер здесь, без подсказки.
При использовании графического файла в качестве элемента-якоря необходимо вместо текста в контейнере <A>...</A> использовать конструкцию <IMG SRC="файл">. Например:
<A HREF="/VW/passat.htm"><IMG SRC="/VW/CARS/passat.gif"> </A> - относительная ссылка: открытие станицы passat.htm в подразделе VW относительно раздела основной страницы, графический якорь-passat.gif, без подсказки.
Кроме вышеперечисленных ссылок существуют еще внутренние ссылки или закладки. Этот тип ссылок используется для удобства перемещения в пределах документа. Для использования в HTML-документе закладок необходимо задать имена тех областей документа, на которые необходимо ссылаться.
Имя закладки в теле документа задается использованием атрибута NAME=ИмяЗакладки в контейнере <A>...</A>. Причем в данном случае текст, заключенный в контейнер, не является элементом-якорем (но выводится).
Например, для перехода на начало документа необходимо поместить там закладку:
<A NAME=DocBegin>Начало документа<A>
Внутренняя ссылка на закладку в документе имеет следующий формат:
<A HREF="URL документа#ИМЯ">Элемент - якорь</A>
Например для размещения в документе ссылки на внутреннюю закладку (содержащуюся в данном документе) необходимо применить:
<A HREF="#DocBegin">Перейти к началу документа</A>
А для размещения в документе ссылки на внешнюю закладку (например содержащуюся в файле Doc1.htm) необходимо применить:
<A HREF="Doc1.htm#DocBegin">Перейти к началу документа Doc1.htm</A>
В заключении надо описать еще один важный атрибут тега ссылки, это атрибут TARGET. Данный атрибут задает окно либо фрейм назначения для документа заданного атрибутом HREF. По умолчанию загрузка происходит в текущее окно браузера, но можно указать имя нового или существующего окна, а так же одно из предопределенных имен объектов браузера: _blank, _self, _parent, _top. Например:
<A HREF="sample/sample.htm" TARGET="new_win">Пример</A> - загрузка документа sample.htm в новое окно браузера с именем "new_win".
Заголовок HTML документаЗаголовок является необязательной частью структуры HTML документа и служит для определения служебной информации и названия документа. В случае использования в документе контейнера заголовка <HEAD>...</HEAD> единственным обязательным его элементом является контейнер <TITLE>...</TITLE>, который задает имя документа. Именно это имя пользователь видит в заголовке окна браузера при просмотре Web-страниц в Internet.
Все остальные элементы заголовка не отображаются браузером и служат для определения различных свойств документа, его взаимосвязи с другими Web-страницами и служебной информации для внешних программ. Попробуем разработать типовой заголовок для ваших документов на примере Web-страницы об автомобилях.
Разложим теперь по полочкам все то, что мы написали в примере. Первый и обязательный элемент заголовка это контейнер <TITLE>...</TITLE>, задающий имя документа, отображаемое в шапке окна браузера.
Далее следует последовательность <META> тегов, задающих так называемую мета (или внешнюю) информацию о документе. У <META> тегов наиболее часто используются следующие атрибуты:
· HTTP-EQUIV - задать имя мета-записи в документе;
· NAME - задать имя дополнительной мета-записи (по умолчанию NAME=HTTP-EQUIV);
· CONTENT - присвоить значение мета-записи заданной атрибутом NAME или HTTP-EQUIV;
· LANG - язык описания значений мета-записи;
В нашем примере первый <META HTTP-EQUIV="Content-Type"> тег описывает тип и кодировку содержимого документа.
Два следующих <META> тега служат для передачи информации о содержании документа поисковым службам Internet.
Таким образом, тег <META NAME="Keywords" LANG=ru CONTENT=" "> задает список ключевых слов, содержащихся в документе, а тег <META NAME="Description" CONTENT=" "> является словесным описанием содержимого документа.
Далее следует тег <BASE HREF="URL">, задающий базовый адрес данного документа. Это необходимо для поддержания работоспособности относительных ссылок, в случае миграции документа в Internet или изменения каталога его загрузки. Как уже говорилось выше, при отсутствии тега <BASE> относительные ссылки в документе определяются от адреса его загрузки.
Завершает наш заголовок тег <LINK>. Данный тег не отображает информацию в окне браузера и предназначен для формирования различных типов отношений между документами и другими объектами. Данные отношения помогают разработчикам ориентироваться в структуре сложного документа и используются поисковыми системами. Рассмотрим, какие бывают отношения и как они задаются. У тега <LINK> наиболее часто используются следующие атрибуты:
· REV - отношение текущего документом с другим, заданным HREF (обратное REL);
· REL - отношение между документом заданным HREF и текущим документом (обратное REV);
· HREF - задает URL документа или объекта;
· LANG - языковая версия;
· MEDIA - назначение документа (Print/Screen);
· TYPE - тип содержимого связанного объекта (листа стилей);
Данный тег довольно редко используется, как правило, его применение ограничивается привязкой листа стилей (stylesheet) к документу но в HTML-документах со сложной иерархической структурой иногда встречается множество тегов <LINK> с довольно запутанным синтаксисом. Наиболее понятные из них связи типа: следующий/предыдущий (next/prev), документ/автор (author), документ/оглавление (index). В нашем примере тег <LINK> использован для формирования связи документ/автор.
Вот еще несколько примеров использования отношений в документах:
<LINK REL=Prev HREF="chapter7.htm"> - означает, что документ chapter7.htm предыдущий по отношению к документу (chapter8.htm) содержащему заданную данным тегом связь;
<LINK REL=Next HREF="chapter9.htm"> - означает, что документ chapter9.htm следующий по отношению к документу (chapter8.htm) содержащему заданную данным тегом связь;
<LINK REV=Next HREF="chapter9.htm"> - обратное отношение, которое говорит о том, что документ (chapter10.htm), содержащий заданную данным тегом связь, является следующим для chapter9.htm;
<LINK REL=stylesheet TYPE="text/css" MEDIA=print HREF="/style/PrnStyle.css"> - означает, что для печати текущего документа использовать лист стилей из style/PrnStyle.css;
Тело HTML документаТело HTML документа располагается после заголовка и ограничено контейнером <BODY>...</BODY>. Содержимое тела документа отображается в окне Web-браузера и состоит из маркированного тегами форматирования текста, таблиц, графических и прочих мультимедиа-элементов, ссылок на другие ресурсы и различных органов управления. В приведенном в предыдущей главе примере, тело документа состоит из одной единственной строки "В разработке".
Так как в контейнере <BODY> нами не были заданы атрибуты внешнего вида документа, то данный текст будет отображен в окне браузера в соответствии с пользовательскими установками. Для обеспечения соответствия между внешним видом документа в браузере пользователя и дизайном разработчика необходимо использовать специальные атрибуты тега <BODY>:
· BGCOLOR - цвет фона документа;
· BACKGROUND - URL графического изображения, для создания фона;
· BGPROPERTIES - режим прокрутки фона по отношению к тексту документа (по умолчанию прокрутка вместе с текстом, BGPROPERTIES=FIXED - стационарный фон);
· TEXT - цвет текста документа;
· LINK - цвет выделения элементов-якорей ссылок;
· ALINK - цвет выделения активных элементов-якорей ссылок;
· VLINK - цвет выделения элементов-якорей просмотренных ссылок;
Для определения цветов в HTML применяются шестнадцатеричные коды RGB компонентов, но стандартные 16 цветов можно задавать по их общепринятым названиям, они представлены на Рис.1:
| BLACK=#000000 | MAROON=#800000 | ||
| GREEN=#008000 | OLIVE=#808000 | ||
| GRAY=#808080 | NAVY=#000080 | ||
| RED=#FF0000 | PURPLE=#800080 | ||
| YELLOW=#FFFF00 | TEAL=#008080 | ||
| BLUE=#0000FF | LIME=#00FF00 | ||
| WHITE=#FFFFFF | FUSHSIA=#FF00FF | ||
| SILVER=#C0C0C0 | AQUA=#00FFFF |
Рис.1 Коды RGB компонентов
Глава 2. Инструкция программиста
Данное методическое пособие должно запускаться на IBM и совместимых компьютерах. Минимальная конструкция: процессор Pentium и выше, объем оперативной памяти 32MB, видеокарта с расширением 1024x768, 256 цветов. Разработанное пособие должно работать под управлением операционных систем семейства WIN-32(WIN-98, MILLENIUM. 200, XP).
Данное методическое пособие состоит из множества файлов, они представлены на Рис.2, которые ссылаются на один файл (Index.html). Рассмотрим эти файлы.
Все они находятся о двух общих папках, которые содержат полный набор аттрибутивов.
Для быстрого изменения описанных выше параметров и базовых размеров, нужно выполнить легкое редактирование основных видов html- тэгов, использую стандартный «Блокнот» (базовый код представлен на Рис.3), но это неудобно и долго, так как нужно изучать алгоритм построения html страницы (см. Приложение).
В комплект к файлам, в каждой папке существуют дополняющие их отдельные, связаннее html страницы.
Для того чтобы быстро и легко внести изменения, необходимо воспользоваться пакетом Microsoft Office Front Page.
Из Рис.4 мы видим рабочую среду Microsoft Office Front Page. Для того чтобы запустить эту систему нужно нажать кнопку Пуск, далее выбрать в пункте \Программы \Служебные \ Microsoft Office\ Microsoft Office Front Page. Зайдя в рабочее пространство, нужно выбрать \Файл \Открыть \ и дальше используя проводник, выбрать файл index, с расширением html. Программа откроет страницу, и автоматически сгенерирует html код. Для визуального просмотра страницы, нужно выбрать \Файл \Просмотреть в обозревателе \Выбрать нужный режим отображения. Данная среда предоставляет пользователю легко откорректировать содержимое страницы и его исходный код.
Далее, мы увидим, что все объекты, используемые для построения html страницы, выделены в отдельные скомпонованные блоки (видно из Рис.5). Нажав правой кнопкой по каждому блоку, выбираем изменяемый параметр.
Выполняя все эти простые действия, мы сможем легко внести изменения, не изучаю внутренний алгоритм построения html станицы.
Все эти описанные выше файлы и папки нужны для запуска проекта и, удалять их не стоит.
Глава 3. Инструкция пользователя
Похожие работы
... для обучения физике и математике, в силу их отсутствия на рынке. Исходя из вышеизложенных соображений, я считаю, что тема моей дипломной работы «Разработка электронного учебника по математике для студентов I курса отделения информатика-иностранный язык» является актуальной в силу того, что потребность в таком электронном учебнике несомненно есть, а самих учебников по данной теме либо совсем нет, ...
... частью, с базой результатов тестирования обучающихся следует использовать нечто более удобное, чем язык разметки гипертекста. Наиболее удобным инструментом для написания самого программного обеспечения электронного учебника является визуальный язык программирования. В настоящее время существует достаточно большое количество визуальных языков таких, как C++, Visual Basic 6.0, Delphi 7.0, C#. C++ ...
... . Существует также ряд послепечатных технологических операций, применяемых только при растровой печати, он включает штамповое высекание, вакуумное формование и тиснение. Глава IV. Методика обучения книжной иллюстрации старших школьников на уроках компьютерной графики 4.1 Эстетическое воспитание ребенка средствами компьютерной графики Ребенок входит в жизнь распахнутый к принятию красоты. ...
... предназначены для повышения резкости изображения. Безусловно, в рамках данной курсовой работы невозможно затронуть и описать все технологические возможности программы (такой задачи и не ставилось). Здесь были обозначены лишь основные принципы работы с графическим редактором CorelDRAW. Но даже описанных здесь операций достаточно, чтобы создавать впечатляющие проекты, в чем мы попробуем убедиться ...
0 комментариев