Глава 10
Разработка Web-страниц
Ваше первое знакомство с Интернетом уже далеко позади. Вы посетили немало узлов. Папка избранного уже содержит ссылки на сотни жизненно необходимых, познавательных, занятных и абсолютно бесполезных узлов. Вы завели десятки друзей и единомышленников на всех континентах и не представляете себе ни единого вечера без встречи с ними на вашем излюбленном чат-сервере. Жесткий диск вашего компьютера полон загруженными с анонимных FTP-серверов полезными программами...
Итак, каждый уголок Интернета знаком вам не хуже, чем закоулки старенького дворика, в котором вы провели детство. Чего же все-таки вам не хватает, чтобы почувствовать себя хозяином этого электронного мира? Верно, вам не хватает дома, куда можно было бы пригласить друзей и единомышленников, а может быть, и офиса, где можно принимать деловых партнеров. Одним словом, вы созрели для того, чтобы создать собственную страничку в Сети.
Принципы разработки Web-документов
Талант — способность воплотить то, что ты сознаешь.
Фрэнсис Скотт Фицджералъд
С чего же начать создание своего первого сетевого шедевра — домашней странички? Прежде чем сделать что-то своими руками, следует разобраться, а как же устроено это «что-то», что заставляет его тикать, приводит в движение колесики его механизма.
В этом разделе мы попытаемся разобраться, из чего строятся стены виртуальных домов, что скрывается за фасадом и какими инструментами можно воспользоваться для строительства.
Интернет поражает своим разнообразием. Страницы каждого из Web-сайтов имеют собственное лицо. Однако имеется ряд компонентов, без которых не обходится ни одна Web-страница. Опишем вкратце каждый из этих компонентов.
Основу Web составляют документы, называемые Web-страницами. Каждая Web-страница может содержать текстовую информацию, графические элементы, дополнительное оформление, а также гиперссылки, предназначенные для открытия других Web-страниц или прочих ресурсов, содержащихся в Web. Для создания Web-страниц используются специальные языки разметки, позволяющие управлять форматированием, размещением и функциональностью содержащихся на страницах элементов. Наибольшее распространение в Web получил язык HTML (HyperText Markup Language — язык гипертекстовой разметки).
Документы HTML представляют собой текст, в котором содержатся специальные команды (или теги), определяющие форматирование элементов страницы и позволяющие размещать на ней гиперссылки, изображения, специальные элементы оформления и некоторую служебную информацию. Теги HTML заключаются в угловые скобки:
<BR>
Теги HTML могут быть парными или непарными. В первом случае в начале текстового фрагмента, форматирование которого определяется тегом, ставится открывающий тег. Он может содержать дополнительные параметры форматирования, определяющие, например, выравнивание текста в случае тега абзаца:
<Р ALIGN=center>
Значение параметра указывается после символа «=» и может заключаться в двойные (") или одинарные кавычки ('). Использование кавычек является обязательным в том случае, если значение параметра содержит пробелы, например:
<INPUT TYPE=subfnit VALUE="Отпарвить данные">
Закрывающий тег помещается в конце текстового фрагмента, для форматирования которого используется парный тег. Закрывающий тег аналогичен открывающему, но имени тега предшествует символ наклонной черты «/». Кроме того, закрывающий тег не содержит параметров (согласитесь, было бы нерационально повторять одни и те же параметры в начале и в конце форматируемого фрагмента, и уж вовсе лишено логики пытаться оформить один и тот же фрагмент с использованием параметров взаимоисключающих):
</Р>
Непарные теги, как правило, не относятся к каким-либо определенным фрагментам текста страницы и определяют независимые объекты, например, изображения или горизонтальные разделительные линии, и, соответственно, не имеют закрывающих тегов:
<HR>
Непарный тег также может включать в себя параметры:
<HR WIDTH=75%>
Полное описание языка HTML не входит в задачи этой книги, однако отдельные теги мы рассмотрим более подробно.
Приводимое в этом разделе описание тегов HTML носит ознакомительный характер. Здесь представлены лишь наиболее часто используемые параметры тегов HTML. Большинство из описываемых тегов предполагает знакомство с рядом других параметров, рассмотрение которых выходит за рамки этой книги.
Структура страницы
Ряд тегов HTML составляет базовую структуру любой Web-страницы. Эти теги могут определять ее параметры, содержать служебную информацию и ограничивать отдельные части страницы.
Раздел HTML-кода
Весь HTML-код страницы должен заключаться между парой тегов <HTML>... </HTML>. Открывающий тег <HTML> должен помещаться в самом начале каждой страницы, а закрывающий тег </HTML> — в самом конце.
Раздел заголовка
Заголовок HTML-страницы требуется для представления служебной информации, используемой броузерами при отображении страницы, а также поисковыми системами при автоматическом составлении каталогов. Заголовок страницы заключается в пределах парного тега <HEAD>...</HEAD> и помещается в начале кода HTML, непосредственно после открывающего тега <HTML>. В пределах заголовка могут быть определены такие теги, как <TITLE>...</TITLE> и <МЕТА>.
<HEAD>
Теги заголовка
</HEAD>
Парный тег <TITLE>...</TITLE> используется для указания названия страницы Между открывающей и закрывающей частями тега помещается текст названия например:
<TITLE>Очерки по истории Франции</ТIТLЕ>
При просмотре страницы в броузере ее название отображается в строке заголовка окна броузера. Кроме того, название учитывается отдельными поисковыми системами, выполняющими автоматическую каталогизацию страниц в Web. По этой причине следует использовать тег <TITLE> на всех страницах сайта: информативное название страницы обеспечит ей хорошее представление в результатах поиска таких поисковых систем и будет способствовать привлечению к вашему Web-сайту внимания потенциальных посетителей.
Непарный тег <МЕТА> используется для представления различной служебной информации, определяющей режим отображения Web-страницы в броузере. Подробное рассмотрение данного тега выходит за рамки этой книги. Следует лишь отметить, что наиболее важной информацией, для передачи которой применяют этот тег, являются кодировка текста страницы, а также набор ключевых слов и описание страницы, используемые большинством поисковых систем при каталогизации Web-страниц:
<МЕТА HTTP-EQUIV="Content-type" CONTENT="text/html; charset="windows-1251">
<МЕТА NAME="Keywords" СОМТЕNT="программа бесплатная программное обеспечение игра .загрузить скачать">
<МЕТА NAME="Description" CONTENT="Ha этом сайте представлены лучшие игровые программы, доступные в Интернете. Все программы можно загрузить с нашего сайта бесплатно!">
Информация, представляемая тегом <МЕТА>, не отображается при просмотре в броузере.
Раздел основного текста страницы
Область основного текста и разметки страницы заключается в пределах парного тега <BODY>...</BODY>. Этот тег также используется для определения основных параметров форматирования страницы. Тег <BODY> имеет следующий формат:
<BODY BACKGROUND="URL файла фонового рисунка" BGCOLOR=" Код цвета фона" ТЕХТ="Код цвета текста" LINК="Код цвета гиперссылки" VLINK="Кoд цвета просмотренной гиперссылки" ALINK="Код цвета выделенной гиперссылки">
Основной текст и разметка страницы </BODY>
Параметр BACKGROUND тега <BODY> задает URL графического файла, используемого в качестве фона для HTML-страницы. Например:
BACKGROUND=" images/back.gif"
Остальные параметры определяют цвета различных элементов страницы: фона, основного текста, гиперссылки, просмотренной гиперссылки и выделенной гиперссылки соответственно. Код цвета может быть задан в виде одного из стандартных названий цветов, например:
BGCOLOR="indigo" TEXT="white"
Отображение таких цветов обеспечивается большинством современных броузе-ров, однако более универсальным является вариант представления цвета в виде шестнадцатеричных значений интенсивности красной, зеленой и синей составляющих. В этом случае коду цвета должен предшествовать символ «#»:
BGCOLOR="ft4B0082" TEXT="#FFFFFF"
Текст
Для оформления текстовых элементов Web-страниц в языке HTML содержится ряд тегов, определяющих параметры абзацев и заголовков и обеспечивающих включение в текст разрывов строк, выбор гарнитуры, размера и начертания шрифта, используемого для представления текстовой информации.
Абзац
Для выделения абзацев в тексте HTML-документа используется парный тег <Р>... </Р>. Этот тег имеет следующий формат:
<Р ALIGN=center|left|right>Текст абзаца</Р>
Параметр ALIGN позволяет определить режим выравнивания текста абзаца: значение center задает режим выравнивания по центру, left — по левому краю, и right — по правому краю. Если параметр ALIGN опущен, текст абзаца выравнивается по левому краю. Кроме того, этот параметр может принимать значение justify (выравнивание по ширине), однако этот режим выравнивания не поддерживается некоторыми броузсрами.
Для выравнивания текста по центру также может быть использован парный тег <CENTER>... </CENTER>, однако указание режима выравнивания в теге <Р> предпочтительнее.
Тег <Р> также может использоваться как непарный (без закрывающего тега </Р>). В этом случае открывающий тег <Р> ставится в начале каждого абзаца:
<Р>Текст абзаца 1
<Р>Текст абзаца 2
<Р>Текст абзаца 3
Разрыв строки
В отдельных случаях бывает необходимо, чтобы определенный текст в пределах абзаца, заголовка или другого текстового блока отображался в начале строки. Для этой цели можно вставить перед этим текстом разрыв строки. Для вставки в текст разрыва строки может быть задан тег <BR>. Этот тег является непарным и не имеет соответствующего закрывающего тега. Приводимый ниже пример иллюстрирует использование тега <BR> в HTML-коде страницы.
<Р>Использование<ВR>разрыва<ВR>строки</Р>
Обратите внимание, что при просмотре приведенного фрагмента HTML-кода в броузере каждое слово будет отображаться в отдельной строке, несмотря на то что весь.код занимает одну строку.
Заголовок
В полиграфии для выделения логически законченных частей текста (таких как главы и разделы книги) используются заголовки и подзаголовки. Заголовки печатного документа могут иметь несколько уровней, в зависимости от того, какое место в структуре документа занимает обозначаемая тем или иным заголовком часть. Например, для обозначения названия главы книги может быть использован заголовок первого уровня, выделенный крупным шрифтом полужирного начертания. Названия разделов главы можно оформить заголовками второго уровня, имеющими меньший размер шрифта и полужирное курсивное начертание.
Язык HTML позволяет использовать для оформления заголовков документов специальные теги <Hп>...</Hп>, где п — число от 1 до 6, соответствующее уровню заголовка. Тег <Hп> имеет следующий формат:
<Нn ALIGN=center|left|right>Текст заголовка</Hn>
Параметр ALIGN используется для указания режима выравнивания заголовка аналогично соответствующему параметру тега <Р>. В приводимом ниже примере тег <Н1> определяет заголовок первого уровня, выровненный по центру.
<Н1 АLIGN=сепtеr>Бесплатные игровые программы</Н1>
Шрифт
Для выделения определенных фрагментов текста, например, с целью обратить внимание посетителя на важную информацию или указать текст, являющийся примером программного кода, нередко используются такие параметры шрифта, как полужирное или курсивное начертание, подчеркивание или зачеркивание. Кроме того, может возникнуть необходимость во включении в текст документа подстрочных или надстрочных индексов, характерных, например, для математических или химических формул.
Для указания таких параметров форматирования шрифта в HTML предусмотрен ряд тегов. В табл. 10.1 приведены наиболее часто используемые ил этих тегов.
Таблица 10.1. Теги HTML, определяющие параметры шрифта
Тег | Описание |
<В>Символы</В> | Полужирное начертание |
<I>Символы</I> | Курсивное начертание |
<и>Символы</и> | Подчеркнутый текст |
<STRIKE>Символы</STRIКЕ> или <S>Символы</S> | Зачеркнутый текст |
<ТТ>Символы</ТТ> | Моноширинный шрифт |
<SUP>Символы</SUР> | Надстрочный индекс |
<SUВ>Символы</SUВ> | Подстрочный индекс |
<FONT>Символы</FONT> | Параметры шрифта |
Первые семь тегов определяют начертание символов, а также подчеркивание, зачеркивание и положение символов в строке (надстрочные и подстрочные индексы). Все эти теги являются парными и нс предусматривают указания дополнительных параметров. Следует особо отметить, что подчеркивание в HTML-документах, как правило, применяется для обозначения гиперссылок, поэтому во избежание путаницы следует по возможности избегать использования тега <U>...</U>.
Тег <FONT>...</FONT> определяет дополнительные параметры шрифта и заслуживает более подробного рассмотрения. Этот тег имеет следующий формат:
<FONT SIZE=[+|-]1|2|3|4|5|6|7 COLOR="Код цвета шрифта" FACE="Название шрифта">Текст</FОNТ>
Параметр SIZE тега <FONT> определяет размер шрифта в условных единицах от 1 (самый мелкий) до 7 (самый крупный). Кроме того, размер шрифта может быть указан относительно базового размера, для чего перед значением параметра SIZE следует ввести символ <+> или <->. Например, если стандартный размер шрифта равен 3, то при значении параметра SIZE=-2 результат будет таким же, что и при значении SIZE=1. Подобный подход удобен для уменьшения или увеличения размера шрифта, которым оформлен определенный текстовый фрагмент, относительно размера шрифта основного текста Web-страницы. При этом базовый размер шрифта может быть установлен с использованием тега <BASEFONT>.. .</BASEFONT>, имеющего следующий формат:
<BASEFONT SIZE=1|2|3|4|5|6|7>Текст</BASEFONT>
Значения параметра SIZE задаются аналогично абсолютным значениям этого параметра для тега <FONT>. По умолчанию базовый размер шрифта принимается равным 3.
Параметр COLOR тега <FONT> позволяет указать цвет шрифта. Более подробно использование кодов цвета описано в разделе «Раздел основного текста страницы».
Значение параметра FACE определяет гарнитуру, или, проще говоря, внешний вид шрифта в броузере. Например, для отображения текста с использованием шрифта Times New Roman, входящего в комплект стандартных шрифтов Windows, следует указать значение параметра FACE="Times New Roman". Чтобы оформить текст с использованием рубленого шрифта (такой шрифт не имеет засечек на концах букв), например, шрифта Arial, следует указать параметр FACE="Arial".
Значением параметра FACE также может являться список названий шрифтов, разделенных занятыми. В таком случае шрифтом текста будет первый имеющийся в системе, в которой выполняется просмотр Web-страницы, из перечисленных в списке. Использование списка шрифтов является более предпочтительным, поскольку Web-страницы предназначены для просмотра множеством людей, имеющих различные модели компьютеров и различные операционные системы. Указанного в значении параметра FACE шрифта может просто не оказаться в системе, на которой будет выполняться просмотр страницы. В таком случае броузер подставит шрифт по умолчанию или же использует какой-либо другой шрифт, который сочтет наиболее близким к указанному. В результате такой подстановки текст страницы может оказаться нечитабельным. Во избежание подобной ситуации следует использовать список близких по виду шрифтов, являющихся стандартными для различных операционных систем. Например, в то время как шрифт Arial широко распространен на компьютерах, работающих под управлением ОС Windows, на Macintosh стандартным рубленым шрифтом является Helvetica. Чтобы текст Web-страницы, оформленный рубленым шрифтом, правильно отображался в обеих этих системах, можно воспользоваться параметром FACE="Arial, Helvetica".
Графические элементы
Язык HTML позволяет помещать на Web-страницы не только текстовые, но и графические элементы. Для размещения графических объектов используется тег HTML <IMAGE>. Этот тег является непарным и имеет следующий формат:
<IMG SRС="URL графического файла" ALT="Замещающий текст"
ALIGN=bottom|middle|top |left|right НЕIGНТ=высота Width=Ширина Border=Толщина
границы НSРАСЕ=Отступ по горизонтали VSРАСЕ=Отступ по вертикали>
Параметр SRC является обязательным и указывает URL графического файла, который должен отображаться на странице, например:
SRC="">http://www.domain.ru/navigation/home.gif">"
SRC="images/logo.jpg"
Стандартными форматами графических файлов, которые могут отображаться практически всеми Web-броузерами, являются форматы GIF и JPEG. Некоторые броузеры также обеспечивают отображение графики в ряде других форматов, например, PNG или BMP. Однако эти форматы не являются стандартными для Web. Их использование допустимо только в тех случаях, когда создаваемая страница предназначена для просмотра ограниченным кругом людей, заведомо имеющих в своем распоряжении броузеры, обеспечивающие отображение этих форматов. Кроме того, графические файлы в таких форматах, как BMP, имеют значительный объем, поэтому на их передачу через медленные соединения будет затрачиваться много времени.
Параметр ALT позволяет указывать текст, отображаемый вместо графического объекта в броузерах, не поддерживающих отображение графики. Этот параметр рекомендуется указывать, поскольку некоторые пользователи отключают в своих броузерах режим отображения графических объектов в целях сокращения времени загрузки. Ниже приводится пример использования параметра ALT.
<IMG SRC="images/mail.gif" АlТ="Отправить сообщение">
Параметр ALIGN определяет режим выравнивания графического объекта относительно текста. Сводная информация об основных режимах выравнивания приводится в табл. 10.2.
Таблица 10.2. Основные режимы выравнивания графических объектов
Режим | Описание |
| top | Выравнивание по верхнему краю текста |
| middle | Выравнивание по центру текста |
| left | Выравнивание по левому краю страницы |
| bottom | Выравнивание по нижнему краю текста |
right | Выравнивание по правому краю страницы |
Режимы выравнивания top, middle и bottom управляют выравниванием графических объектов относительно текста строки, в то время как режимы left u right обеспечивают выравнивание относительно страницы.
Параметры WIDTH и HEIGHT определяют размеры (ширину и высоту соответственно) графического объекта в пикселах при его отображении на странице. Использование этих параметров является желательным, поскольку при указании высоты и ширины графического объекта броузер имеет возможность выделять пространство на странице для отображения этого объекта еще до завершения его загрузки. При этом остальные элементы страницы могут быть правильно размещены друг относительно друга непосредственно после загрузки HTML-кода.
Параметр BORDER используется для указания ширины границы, отображаемой вокруг графического объекта. Ширина указывается в пикселах. В большинстве случаев отображение границы вокруг графических объектов не требуется. Однако по умолчанию граница отображается вокруг всех графических объектов, на которые назначены гиперссылки. Если этого необходимо избежать, следует явно указать ширину границы равной 0:
<IMG SRC="images/planner.gif" BORDER=0>
Параметры HSPACE и VSPACE используются для указания отступа по горизонтали и вертикали соответственно. Эти параметры определяют расстояние от графического объекта до текста страницы и других объектов.
Гиперссылки
Гиперссылка является основным элементом, которому среда Web обязана как своей популярностью, так и своим существованием. Гиперссылки обеспечивают связь Web-страницы с другими страницами и объектами в Интернете. Кроме того, с использованием гиперссылок можно осуществлять переход между различными частями в пределах одной Web-страницы. Это может оказаться полезным, например, если требуется разместить оглавление документа в начале Web-страницы с возможностью перехода к отдельным разделам этого документа.
Для определения гиперссылки используется тег <А>.. .</А>, имеющий следующий формат:
<А HREF="URLцелевого объекта" ТАRGЕТ="Имя целевого фрейма или окна">Текст или обьект </А>
Параметр НREF используется для указания URL объекта, к которому будет осуществляться переход при щелчке на гиперссылке в окне броузера (целевого объекта), например:
HREF="">http://www.mystery.com/">"
По умолчанию при щелчке на гиперссылке связанный с ней целевой объект отображается в том же окне или фрейме, что и исходная Web-страница, то есть страница, на которой расположена гиперссылка. Однако этот порядок вещей нетрудно изменить. Для этого и служит второй параметр тега <А> — параметр TARGET. В качестве значения этого параметра может быть указано имя фрейма, в котором необходимо открыть целевой объект. Если же окно или фрейм с указанным именем отсутствует, при щелчке на гиперссылке броузер открывает новое окно, отображая в нем объект, на который указывает гиперссылка, и присваивая этому окну указанное имя.
Кроме того, можно сделать так, чтобы броузер отображал целевой объект гипер-ссылки в новом окне в любом случае. Для этого следует указать значение параметра TARGET="_blank". Обратите внимание, что имя начинается с символа подчеркивания. Это указывает на то, что значение параметра TARGET является специальным именем, а не указывает на один из фреймов или окон, созданных явно.
Можно также использовать в качестве значения параметра TARGET еще одно специальное имя — _top. Это имя требуется для открытия целевого объекта не в текущем фрейме, а в главном окне — в том, в котором отображается весь набор фреймов. Более подробное описание фреймов и наборов фреймов ожидает вас далее в этой главе.
Закладки
Как было отмечено в предыдущем разделе, размещаемая на Web-странице гиперссылка может указывать не только на другую Web-страницу, графический файл или иной внешний объект, но и на определенный текстовый фрагмент в пределах исходной страницы. Чтобы сделать возможным переход к этому объекту, необходимо пометить его закладкой.
Для представления закладки в языке HTML, как это ни странно, используется тот же тёг, что и для представления гиперссылки, — тег <А>.. </А>— однако в этом случае он имеет несколько иной формат:
<А NAME="Имя закладки">Текст или обьект</А>
Параметр NAME используется для указания имени, которое следует указывать в параметре HRЕF для создания ссылки на помеченный закладкой объект. Например, если закладка на Web-странице была определена с использованием тега <А NAME= "chapter4">, то тег для создания гиперссылки на эту закладку будет выглядеть следующим образом:
<А HREF="#chapter4">
Обратите внимание, что при определении ссылки на закладку имени этой закладки должен предшествовать символ «#». Этот символ позволяет отличить имя закладки от имени файла.
Гиперссылка также может указывать на закладку, расположенную на другой HTML-странице. Для этого в качестве значения параметра НRЕF тега гиперссылки необходимо указать URL страницы, на которой определена требуемая закладка, затем — символ «#», и после этого — имя закладки, к которой следует осуществлять переход при щелчке на гиперссылке в броузере:
<А HREF="guidance. html#chapter4.">
Горизонтальные линии
В качестве дополнительного элемента оформления Web-страниц можно использовать горизонтальные линии. Этот элемент позволяет отделять друг от друга различные части документа, расположенные на одной странице. Для вставки горизонтальных разделительных линий применяется непарный тег HTML <HR>. Этот тсг имеет следующий формат:
<HR ALIGN=lert|right|center SIZE= Толщина Width =Ширина NOSHADE>
Параметр ALIGN используется для указания режима выравнивания. Линия может быть выровнена по левому краю (значение left), по правому краю (значение right) или по центру страницы (значение center).
Параметр SIZE позволяет указать толщину линии в пикселах.
Параметр WIDTH используется для указания ширины линии. Значение этого параметра может быть задано как в пикселах, так и в процентах относительно ширины страницы. Указание ширины в процентах в большинстве случаев является более предпочтительным, поскольку в этом случае ширина линии будет изменяться в зависимости от размера окна броузера, в котором выполняется просмотр страницы. Если же ширину линии указать в пикселах, то при просмотре страницы в системах с низким разрешением экрана линия может не уместиться в пределах видимого окна броузера.
При использовании параметра NOSHADE линия будет отображаться со сплошной заливкой, в то время как, если этот параметр опущен, броузер будет отображать горизонтальную линию с применением эффекта объема.
В качестве горизонтальных разделительных линий можно также использовать графические элементы. В таком случае линия может стать декоративным элементом, увязанным с общей концепцией оформления свита. Для этой цели можно воспользоваться тегом <IMG>.
Списки
Списки позволяют выделять в тексте документа определенные логические cруктуры, такие как описание последовательности действий, перечни предметов и понятий и т. д. Язык HTML позволяет создавать в Web-документах списки трех различных типов, которые будут рассмотрены в этом разделе книги.
Маркированный список
Маркированные списки служат для оформления перечней различных объектов и понятий, возможных вариантов действий и т. д. Маркированный список представляет собой группу абзацев, в начале каждого из которых ставится специальный символ — маркер.
Для определения маркированного списка язык HTML позволяет использовать тег <UL>...</UL>. Этот тег имеет следующий формат:
<UL ALIGN=center|left|right|justify TYPE=dlsk|circle|square>
<LI ALIGN=center|left| right| justify TYPE=disk|circle|square>ТЕКCT элемента списка</LI>
</UL>
Тег <UL>...</UL> определяет границы списка и общие параметры форматирования всех его элементов. Параметр ALIGN задает режим выравнивания элементов списка аналогично одноименному параметру тега <Р>.. .</Р> (см. раздел «Абзац»). Параметр TYPE определяет тип маркеров списка: при указании значения disk используются круглые закрашенные маркеры, значения circle — круглые незакрашенные маркеры, а значения square — квадратные маркеры.
Текст каждого из элементов списка заключается в пределах парного тега <LI>... </LI>. Параметры этого тега аналогичны параметрам тега <UL>, однако их действие распространяется только на отдельный элемент списка, а не на список целиком.
Нумерованный список
В отличие от маркированного, нумерованный список состоит из набора последовательно пронумерованных абзацев. Для определения маркированного списка в языке HTML применяется парный тег <OL>.. .</OL>. Этот тег имеет следующий формат:
<OL ALIGN=center|left|right|justify SТАRТ=Начальное значение TYPE=A|a|I|i|1>
<LI ALIGN=center|left|right|justify TYPE=A|b|a|I|i|i VALUE=Номер элемента списка>Текст элемента списка</Li>
</OL>
В целом формат этого тега сходен с форматом тега <UL>, требуемого для определения маркированных списков: между открывающей и закрывающей частями тега располагаются элементы списка, каждый из которых определяется с использованием тега <LI>.. .</LI>. Тем не менее тег <01> допускает указание большего количества параметров форматирования, нежели тег <UL>. Рассмотрим эти параметры.
Значение параметра ALIGN определяет режим выравнивания текста в пределах нумерованного списка. Подробнее о режимах выравнивания говорилось в разделе «Абзац».
Параметр START позволяет указать значение, с которого должна начинаться нумерация списка. Этот параметр полезно использовать, если требуется включить в список ненумерованные элементы, например иллюстрации, таблицы с пояснительной информацией или примеры программного кода.
Значение параметра TYPE определяет тип нумерации списка. Элементы списка могут иметь алфавитную нумерацию (латинский алфавит, значение А или а) либо нумероваться римскими (значение I или i) или арабскими (значение 1) цифрами.
Ter <LI> также позволяет указывать ряд параметров форматирования элементов нумерованного списка. Параметры ALIGN и TYPE имеют то же значение, что и в контексте тега <OL>, однако их действие распространяется лишь на отдельный элемент нумерованного списка, а не на весь список. Кроме того, тег <LI> допускает использование параметра VALUE. Этот параметр позволяет явно указать номер элемента списка. Явное указание номера элемента также приводит к изменению последовательности нумерации. То есть, если для определенного элемента списка был указан параметр VALUE=100, то этот элемент получает номер 100, следующий — номер 101 и т. д. Параметр VALUE позволяет продолжить прерванную ранее нумерацию аналогично параметру START тега <OL>, однако последний подход является более предпочтительным, поскольку облегчает восприятие структуры списка при правке HTML-кода страницы.
Список определений
Нередко возникает необходимость в создании списков, содержащих определенные термины или понятия и пояснения к ним. Такие списки называются списками определений. Для их создания в HTML-документах применяется тег <DL>... </DL>, имеющий следующий формат:
<DL>
<DТ>Термин</DТ>
<DD>0пределение</DD>
</DL>
Границы списка определений определяются собственно тегом <DL>...</DL>. Каждый из элементов списка образуется двумя компонентами. Первый из них, тег <DT>... </DT>, ограничивает определяемый термин. При отображении HTML-страницы в броузерах текст, помеченный как термин списка определений, выделяется относительно основного текста страницы (как правило, шрифтом полужирного начертания).
Второй компонент — это определение термина. Для его обозначения используется тег <DD>...</DD>. Текст определения выделяется в броузерах отступом относительно текста термина.
Теги списка определений не имеют параметров, однако для дополнительного форматирования текста элементов списка определения могут быть использованы стандартные теги форматирования HTML.
Допускается использование тегов <DT> и <DD> без соответствующих закрывающих тегов. При этом открывающий тег ставится в начале текстового блока, соответствующего термину или определению, и его действие распространяется вплоть до следующего тега <DT> или <DD> или до закрывающего тега списка </DL>.
Таблицы
Таблицы широко применяются при создании HTML-документов. Причем их применение не ограничивается размещением данных на страницах — внутри таблиц нередко компонуются отдельные элементы оформления, такие как сложные графические элементы, графические рамки вокруг различных объектов, колонки и т. д.
Для создания таблиц в HTML-документах используется тег <TABLE>...</TABLE>, имеющий следующий формат:
<TABLE ALIGN=left|right|center WIDТН="Ширина таблицы BORDER= "Толщина границы" CELLSPACING="Интервал между ячейками" CELLPADDING="Paзмep полей ячеек">
<TR ALIGN=left right|center|justify VALIGN=top|middle|bottorm>
<TD ROWSPAN=Колличество строк COLSPAN=Колличество столбцов ALIGN=left|right|center|justify VALIGN=top|middle|bottom WIDTH=Ширина ячейки BGCOLOR="Код цвета фона ячейки">Текст ячейки</TD>
</TR>
</TABLE> Рассмотрим назначение отдельных параметров тега TABLE.
Параметр ALIGN определяет режим выравнивания таблицы (но не текста в ячейках таблицы!). Таблица может быть выровнена по центру (значение ALIGN= center), по левому краю (значение ALIGN=left) или по правому краю страницы (значение ALIGN=right).
Параметр WIDTH позволяет указывать ширину таблицы в пикселах или процентах от ширины области окна броузера, отведенной под отображение документа. В первом случае достаточно указать значение ширины, например:
WIDTH=200
При этом, если при отображении таблицы в броузере окажется, что рабочая область экрана не способна уместить таблицу указанной ширины, в окне броузера будет-активизирована горизонтальная полоса прокрутки.
Если необходимо, чтобы ширина таб.тацы изменялась в зависимости от ширины рабочей области окна броузера, можно указать значение ширины в процентах:
WIDTH=75%
Параметр BORDER определяет толщину линий границы в пикселах. Если границы необходимо скрыть, следует присвоить этому параметру значение 0:
BORDER=0
Параметр CELLSPACING позволяет указать интервал между ячейками таблицы в пикселах.
Значение параметра CELLPADDING определяет размеры полей ячеек. Это значение также указывается в пикселах.
Следует отметить, что параметр CELLPADDING оказывает влияние на все четыре поля каждой из ячеек таблицы: верхнее, нижнее, левое и правое.
Каждая из строк таблицы определяется тегом <TR>...</TR>. Этот тег позволяет указывать основные параметры форматирования для каждой из строк таблицы в отдельности.
Параметр ALIGN управляет режимом выравнивания текста в ячейках строки по горизонтали. Эти режимы выравнивания аналогичны режимам выравнивания текста основного абзаца документа. В то же время параметр VALIGN позволяет устанавливать режим выравнивания текста по вертикали. Текст может быть выровнен по верхнему (top) или нижнему (bottom) краю ячейки, а также по середине ячейки (middle).
Для определения ячейки таблицы используется парный тег <TD>...</TD>. Между открывающей и закрывающей частями этого тега размещаются данные, которые должны быть отображены в соответствующей ячейке таблицы. В качестве таких данных может выступать не только числовая и текстовая информация, но и графические элементы, гиперссылки и даже формы, содержащие поля ввода, списки, кнопки и другие элементы. Все видимые элементы Web-страницы можно разместить в пределах единственной ячейки таблицы.
Все данные, которые должны отображаться в таблице, необходимо размещать в пределах тегов <TD>...</TD>, между их открывающими и закрывающими частями. Положение на странице остальных данных и объектов, размещенных в пределах тега <TABLE>...</TABLE>, но не заключенных между тегами <TD> и </TD>, при их отображении в броузере окажется неопределенным: они могут быть размещены в любом месте за пределами таблицы, в зависимости от реализации броузера.
Параметр ALIGN и VALIGN тега <TD> имеет то же назначение, что и соответствующий параметр тега <TR>, однако его действие распространяется на отдельную ячейку таблицы.
Параметр WIDTH определяет ширину ячейки. Ширина может быть указана в пикселах или процентах. В первом случае ширина будет установлена вне зависимости от общей ширины таблицы. При отображении в броузере ячейка таблицы будет иметь указанную ширину, если только эта ширина является достаточной для отображения содержащихся в ячейке данных (в противном случае броузер может выбрать ширину ячейки по собственному усмотрению). При указании процентного значения ширина ячейки будет зависеть от ширины таблицы.
Параметр BGCOLOR позволяет указать цвет фона ячейки. Более подробно коды цветов были рассмотрены в разделе «Раздел основного текста страницы». Если этот параметр не указан, для ячейки устанавливается «прозрачный» цвет фона; в таком случае фоном для ячейки будет служить основной фон страницы — цвет или рисунок.
Для создания ячеек, занимающих несколько строк или столбцов таблицы, используются параметры ROWSPAN и COLSPAN. Значение этих параметров определяет, соответственно, сколько строк и столбцов должна охватывать соответствующая ячейка.
Чтобы лучше разобраться в структурной организации таблиц, представим ее в несколько упрощенном варианте:
<TABLE>
<TR>
<TН>Заголовок столбца 1</ТН>
<TH>3аголовок столбца -3</ТН>
<ТН>Заголовок столбца 3</ТН>
</TR>
<TR>
<TD>Текст ячейки 1:1</TD>
<TD>Текст ячейки 1:2</TD>
<TD>ТЕCT ячейки 1:3</TD>
</TR>
<TR>
<TD>Текст ячейки 2:1</TD>
<ТD>Текст ячейки 2:2</TD>
<TD>ТЕКСТ ячейки 2:3</ТD>
</TR>
</TABLE>
Приведенный выше HTML-код представляет собой пример таблицы размером 3х3 ячейки. Каждая из строк таблицы представлена парой тегов <TR>...</TR>. Первая строка содержит заголовки столбцов, для представления которых используются парные теги <ТН>...</ТН>. Остальные две строки содержат обычные ячейки, предназначенные для размещения основных данных таблицы. Каждой из ячеек соответствует пара тегов <TD>.. .</TD>.
Формы
Формы являются основным элементом Web-страниц, позволяющим осуществлять взаимодействие с пользователем. Используя элементы форм, пользователь может передавать автору страницы определенные сведения, передавать данные программам, работающим на сервере, осуществлять переход к определенным страницам Web-сайта и выполнять другие операции, делающие Web действительно интерактивной средой.
Таблица 10.3. Типы элементов форм
Тип | Элемент формы | Описание |
Text | . Поле ввода текста | Используется для ввода произвольных данных |
Password
| Поле ввода пароля
| Используется для ввода пароля. Отличается от поля ввода текста тем, что вместо всех вводимых в это поле символов отображаются символы звездочки (*) |
Checkbox
| Флажок
| Используется для выбора одного из двух вариантов типа «да-нет» |
Radio
| Переключатель
| Используется для выбора одного из нескольких взаимоисключающих вариантов |
submit | Кнопка передачи данных | Используется для передачи данных формы программе-обработчику |
reset
| Кнопка очистки формы
| Используется для очистки формы. При щелчке на этой кнопке все введенные пользователем данные заменяются на принятые по умолчанию |
Параметр NAME позволяет указать имя элемента формы. Это имя используется программой-обработчиком для идентификации получаемых данных.
Параметр VALUE может быть указан для полей ввода текста и пароля, а также для кнопок передачи данных и очистки формы. При указании для полей ввода этот параметр определяет значение поля формы по умолчанию (текст, отображаемый в поле на момент загрузки формы). В случае кнопок параметр VALUE имеет совершенно иное назначение — он определяет текст, отображаемый на кнопке.
Параметр CHECKED используется совместно с флажками и переключателями. Этот параметр указывается в том случае, когда флажок или переключатель должен быть установлен по умолчанию.
Параметр SIZE определяет ширину полей ввода, а параметр MAXLENGTH — максимально допустимую длину строки, которую можно ввести в это поле.
Параметр ALIGN используется для указания режима выравнивания элемента формы. Элементы формы выравниваются аналогично графическим объектам.
Многострочные текстовые поля
Многострочные текстовые поля форм позволяют вводить крупные текстовые фрагменты. Для определения многострочного текстового поля используется тег <TEXTAREA>...</TEXTAREA>, имеющий следующий формат:
<TEXTAREA NAME="Имя поля" ROWS="Количество строк"COLS="Количество столбцов">Текст по умолчанию</ТЕХТАRЕA>
Параметр NAME используется для указания имени, служащего для идентификации текстового поля. Значения параметров ROWS и COLS определяют высоту и ширину текстового поля в строках и столбцах символов соответственно.
Поля списков
Формы могут включать в себя поля многострочных и раскрывающихся списков. Такие списки применяются для выбора одного или нескольких вариантов из предопределенного набора. Для определения этих полей используется тег <SELECT>... </SELECT>, имеющий следующий формат:
<SELECT NАМЕ="Имя поля" SIZE=Размерep списка MULTIPLE ALIGN=top|middle|bottom|left|right>
<OPTION SELECTED VALUE="Зачение">Символы</ОРТION>
</SELECT>
Параметр NAME используется для указания имени поля.
Значение параметра SIZE определяет высоту поля в строках. По умолчанию создается раскрывающийся список. Для создания обычного списка следует указать значение параметра SIZE не менее 2.
Параметр MULTIPLE позволяет выделять в списке несколько различных вариантов. Если этот параметр не указан, пользователь сможет выбирать только один из содержащихся в списке вариантов. И наконец, параметр ALIGN определяет режим выравнивания поля списка.
Каждый из представленных в списке вариантов определяется тегом <OPTION>... </OPTION>. Этот тег допускает задание двух параметров. Параметр SLELECTED указывает на то, что соответствующий вариант выбирается по умолчанию. Параметр VALUE определяет значение, передаваемое программе-обработчику данных формы при выборе соответствующего варианта.
Списки могут включать в себя любое число вариантов, поэтому их рекомендуется использовать в тех случаях, когда количество возможных вариантов выбора слишком велико для их представления переключателями.
Фреймы
Фреймы являются средством отображения нескольких документов в одном окне броузера. При использовании фреймов рабочая область окна броузера разбивается на несколько более мелких областей, в которых отображаются различные HTML-страницы. Фреймы полезны в тех случаях, когда необходимо, чтобы определенная область присутствовала в окне броузера постоянно, в то время как другая область обеспечивала возможность загрузки различных документов. Так, представление панели навигации, которая должна быть доступной при просмотре любой из страниц сайта, в виде отдельного фрейма может сэкономить разработчику массу времени, поскольку без использования фреймов код панели навигации пришлось бы помещать на каждую из страниц сайта вручную. Однако это еще не самое сложное: в конце концов, HTML-код панели навигации можно создать один раз, а затем скопировать его на все остальные страницы сайта. Представьте себе ситуацию, когда на Web-сайте, насчитывающем несколько десятков, а может быть, и сотен HTML-страниц, требуется внести изменения в панель навигации. Без фреймов на эту операцию мог бы уйти не один день. В то время как если панель навигации вынесена в отдельный фрейм, достаточно внести требуемые изменения всего лишь однажды: в HTML-документе, содержащем собственно панель навигации.
Следует отметить, что какой-либо русский аналог английского термина frames нельзя назвать безусловно устоявшимся. В то время как в Microsoft Word 2000 применяется термин «рамки», в Microsoft Internet Explorer 5 можно встретить вариант перевода этого термина «кадры». На наш взгляд, оба эти перевода нельзя назвать удачными. С другой стороны, в русскоязычной литературе нередко употребляется термин «фреймы», который попросту взят из английского языка. В нашей книге будет употребляться именно этот вариант.
HTML-страница с фреймами состоит из нескольких компонентов: страницы, содержащей набор фреймов, и страниц, предназначенных для отображения в каждом из фреймов этого набора. Набор фреймов можно представить себе как своеобразные ячейки, предназначенные для загрузки HTML-документов. Для определения набора фреймов в языке HTML имеется тег <FRAMESET>...</FRAMESET>. Этот тег имеет следующий формат:
<FRAMESET ROWS="Вертикальная структура фрейма" COLS="Горизонтальная структура фрейма">
<FRAME SRC="URL исходной страницы фрейма" NAME="Имя фрейма" MARGINWIDTH="Paзмep левого и правого полей" МАRGINHEIGHT="Размер верхнего и нижнего полей" SCROLLING=yes|no|auto NORESIZE>
</FRAMESET>
<NOFRAMES>
<BODY> Код страницы для отображения в броузерах, не поддерживающих фреймы
</BODY>
</NOFRAMES>
Параметры ROWS и COLS тега <FRAMESET> используются для определения структуры набора фреймов по вертикали и горизонтали. Допустим, необходимо создать набор из двух фреймов, расположенных горизонтально, в верхнем из которых необходимо отображать логотип Web-сайта и ссылки на основные страницы (панель навигации), а нижний предназначен для отображения информационных страниц. Верхний фрейм должен иметь высоту 60 пикселов, а нижний — занимать всю оставшуюся часть рабочей области окна броузера. Для создания такого набора будет использоваться следующий тег:
<FRAMESET ROWS="60,*">
Символ звездочки (*) в данном случае означает, что второй (нижний) фрейм набора занимает по высоте всю рабочую область экрана, не используемую для отображения других фреймов (в данном случае такой фрейм один).
Аналогично, если требуется создать набор, в левом фрейме которого располагается вертикальная панель навигации шириной 100 пикселов, а всю оставшуюся часть справа занимает область для отображения основных страниц сайта, тег <FRAMESET> будет иметь следующий вид:
<FRAMESET COLS="100, *">
</FRAMESET>
После определения общей структуры набора фреймов необходимо описать каждый из фреймов, входящих в набор. Для этой цели служит тег <FRAME>. Этот тег является непарным.
Параметр SRC позволяет указать URL страницы, отображаемой во фрейме непосредственно после загрузки набора (или исходной страницы фрейма).
Параметр NAME определяет имя фрейма. Указание имени фрейма позволяет загружать в него документы по щелчку на гиперссылках, расположенных в других фреймах. Чтобы обеспечить открытие целевого документа гиперссылки в определенном фрейме, имя этого фрейма должно быть указано в качестве значения параметра TARGET этой гиперссылки. Например, при щелчке на гиперссылке, определенной с использованием представленного ниже тега, содержащийся в документе prices, html прейскурант продукции будет отображен с именем information:
<А HREF="prices.html" TARGET="information">Товары и цены</А>
По умолчанию целевой документ гиперссылки отображается в том же фрейме, что и документ, содержащий эту гиперссылку.
Параметры MARGINWIDTH и MARGINHEIGHT определяют размеры полей фрейма.
Для установки режима отображения полос прокрутки во фрейме используется параметр SCROLLING. Если значение этого параметра равно yes, во фрейме отображаются полосы прокрутки. Если значение параметра равно по, полосы прокрутки не отображаются. При указании значения auto (а также если этот параметр не указан) полосы прокрутки отображаются только в том случае, если вся информация документа не умещается в пределах видимой области фрейма, и для просмотра этой ин4юрмации необходима полоса прокрутки.
Указание параметра NO RESIZE запрещает изменение размеров фрейма в ходе просмотра.
Обратите внимание, что тег <FRAMESET> замещает собой тег <BODY>, используемый на всех HTML-страницах, но не в наборах фреймов. Дело в том, что набор фреймов сам по себе не является Web-страницей. Он лишь определяет структуру, в пределах которой будут отображаться другие Web-cтраницы. Таким образом, наборы фреймов не допускают указания каких бы то ни было отображаемых элементов Web-страниц, будь то текст, рисунки, гиперссылки или другие элементы.
Тем не менее в настоящее время по-прежнему используются броузеры, не поддерживающие фреймы. Чтобы в таких броузерах просматривать страницы, содержащие фреймы, язык разметки HTML предоставляет тег <NOFRAMES>.. .</NOFRAMES>. Этот тег должен также включать в себя тег <BODY>...</BODY>, ограничивающий текст и объекты отображения страницы в броузерах, не поддерживающих фреймы.
Великая цель образования — это не знания, а действия.
Герберт Спенсер
Подошло время решать, какая программа будет использоваться для создания Web-сайта. По этому поводу нельзя дать каких-либо однозначных рекомендаций:
«Используйте программу А! Не используйте программу Б!» Следует отметить, что даже маститые разработчики не могут прийти к согласию не только относительно выбора какой-либо конкретной программы, по и относительно самого подхода к созданию Web-страниц: одни утверждают, что эффективной работа с Web-страницами может быть только при непосредственном редактировании HTML-кода; другие же — что удобство и быстрота создания Web-страниц с помощью визуальных средств разработки полностью оправдывают накладываемые такими средствами ограничения. Поэтому мы вкратце рассмотрим возможности ряда наиболее популярных средств разработки.
Вспомним для начала, что HTML-страницы представляют собой документы в обычном текстовом формате, содержащие специальные команды форматирования (теги HTML). Таким образом, эти документы можно открывать и редактировать в любом текстовом редакторе, включая всем известный Блокнот Windows. (Кстати, один из известных разработчиков на просьбу назвать свой любимый HTML-редактор так и ответил: «Блокнот».) Кроме блокнота также существует немало программ, специализирующихся на редактировании HTML-кода. Такие редакторы позволяют вводить HTML-код страницы непосредственно, а также предоставляют в распоряжение разработчика ряд дополнительных средств автоматического создания тегов на основании указанных параметров.
Программы такого рода, хотя и не накладывают никаких ограничений на создаваемый код и позволяют создавать достаточно компактные HTML-страницы (любые теги могут быть введены вручную, причем разработчик может указывать только те параметры, которые считает необходимыми), для их применения необходимо хорошее знание языка HTML. По этой причине их использование на этапе изучения HTML нельзя считать целесообразным.
С другой стороны, существует немало средств визуальной разработки HTML-документов. Такие программы отображают редактируемые Web-страницы в том виде, в котором они представляются в броузере, позволяя разработчику видеть все элементы редактируемого документа, включая форматирование текста, графические элементы, элементы форм и т. д. Наиболее серьезным недостатком всех таких средств разработки является значительный объем получаемого HTML-кода, что отрицательно сказывается на скорости загрузки Web-страниц, публикуемых в Интернете. Тем не менее наглядность и удобство таких средств делает их незаменимыми для новичков (и не только).
Наибольшую популярность завоевали такие программы визуальной разработки Web-документов, как Microsoft FrontPage Express , входящая в состав Microsoft Internet Explorer, и Netscape Composer, являющаяся частью пакета Netscape Communicator.
Обе эти программы предоставляют разработчику примерно одинаковые возможности, тем не менее. Frontpage Express поддерживает ряд дополнительных компонентов и функций, поэтому мы опишем в этой главе именно ее.
Для начинающих Web-разработчиков, привыкших использовать для обработки документов текстовый процессор Microsoft Word, версия 2000 этой программы может стать настоящим кладом. Дело в том, что в этой версии функции работы с Web-документами усовершенствованы настолько, что теперь Word может с успехом конкурировать даже со специализированными пакетами разработки HTML-документов. Еще одним из преимуществ Word 2000 является тот факт, что этот процессор, в отличие от Netscape Composer и Microsoft Frontpage Express, поддерживает работу с одним из популярных элементов HTML — фреймами. Кроме того, в составе Word имеются встроенные средства создания всех элементов, которые могут быть размещены на Web-страницах, включая таблицы, элементы форм и даже графику. Пожалуй, единственным существенным недостатком использования Word для разработки HTML-страниц является значительный объем получаемых файлов, что заметно снижает скорость загрузки страниц.
Если вы готовы подойти к вопросу разработки Web-страниц серьезно, вам стоит обратить внимание еще на один программный продукт Microsoft — Frontpage. И пусть название этого пакета не вводит вас в заблуждение — этот пакет не имеет ничего общего с Microsoft Frontpage Express (кроме общего назначения и, конечно, производителя). Frontpage является профессиональным пакетом разработки Web-страниц, обладает средствами поддержки Web-сайтов (а не только создания отдельных страниц), позволяет создавать на Web-страницах все основные и целый ряд дополнительных элементов, поддерживает работу с фреймами, предоставляет в распоряжение разработчика ряд эффективных средств импорта и обработки графических ф>айлов и к тому же позволяет получать достаточно компактный HTML-код. Frontpage обеспечивает возможность настройки параметров совместимости с наиболее популярными версиями броузеров Microsoft Internet Explorer и Netscape Navigator. Набор функций Frontpage настолько широк, что этот пакет требует отдельного изучения (и, соответственно, отдельной книги). По этой причине его описание не включено в эту главу.
На этом мы закончим сравнение основных средств разработки Web-страниц. Какое из них наилучшим образом подходит вам? Выбор за вами!
Все, что делаешь, надо делать хорошо, даже если совершаешь безумство.
Опоре де Бальзак
Несмотря на то что Microsoft Word 2000 является текстовым процессором, то есть изначально предназначен для обработки текстовой информации, его с успехом можно использовать для создания и поддержки Web-страниц и даже целых Web-сайтов. Этот раздел книги целиком посвящен этому несколько нетрадиционному применению Word.
В спектр задач данной книги не входит обучение работе с Microsoft Word, таким образом, мы будем исходить из того, что вы уже имеете определенный опыт работы с. этой программой.
В Word 2000 реализован режим просмотра Web-документов, что обеспечивает представление редактируемых Web-страниц в том виде, который они будут иметь при отображении в броузере. Для активизации этого режима просмотра используется команда Вид > Web-документ (View > Web Document). Вся работа с HTML-документами производится именно в этом режиме.
В этом разделе речь будет идти исключительно о Word 2000. Именно в этой версии программы был реализован принципиально новый подход к разработке Web-документов. Версия Word 97, хотя и позволяла открывать и редактировать файлы в формате HTML, однако в ней функции Web были реализованы настолько слабо, что нельзя было всерьез говорить об использовании Word 97 даже для внесения незначительных поправок в HTML-документы, В Word 2000 работа с Web-функциями улучшена настолько, что теперь Word вполне может составить конкуренцию даже многим специализированным HTML-редакторам.
Для реализации функций создания и редактирования Web-страниц может возникнуть необходимость в установке ряда дополнительных компонентов с установочного компакт-диска Office 2000.
Любой документ Word можно сохранить как Web-страницу. Соответственно, создавая документ на основе любого шаблона, вы создаете Web-страницу. Для создания нового документа достаточно щелкнуть на кнопке Создать (New), расположенной на панели инструментов Стандартная (Standatd).
Тем не менее в состав дополнительных средств Word входит набор шаблонов, специально предназначенных для создания Web-страниц, то есть идеально соответствующих нашим целям. Кроме того, не исключено, что по мере накопления опыта работы вы будете создавать собственные шаблоны Web-страниц, что, кстати, является желательным. В частности, при создании Web-сайта использование единого шаблона, содержащего все требуемые параметры форматирования (включая цвет текста, фона и гиперссылок, 4юновый рисунок и т. д.), помогает добиться единого оформления всех страниц сайта.
Для создания Web-страницы па основе специализированного шаблона вы должны будете выполнить следующие действия.
Обратите внимание, что использование кнопки Создать (New), расположенной на панели инструментов Стандартная (Standatd), в данном случае неприменимо, поскольку при щелчке на этой кнопке автоматически создается новый документ на основе шаблона Normal и интересующее нас окно диалога Создание документа (New) не отображается.
При создании документов на основе шаблонов Web-страниц Word автоматически переключается в режим просмотра Web-документа. Если вы создаете документ на основе шаблона какого-либо другого типа, для продолжения работы над Web-страницей вам придется переключиться в этот режим просмотра самостоятельно (команда Вид > Web-документ (View > Web Document)).
Кнопка Создать (New) на панели инструментов Стандартная (Standatd) замещается кнопкой Новая Web-страница (Web Page).
Вы можете поэкспериментировать, создавая документы на основе различных шаблонов, а также установить дополнительные шаблоны с компакт-диска Office 2000. Некоторые из этих шаблонов уже содержат определенный текст, который может быть использован в качестве примера при создании собственной Web-страницы.
Как уже было отмечено, гиперссылки являются одним из основных элементов Web-страниц. Гиперссылки позволяют осуществлять переход к различным Web-страницам, отдельным их частям и другим ресурсам Web.
Создание гиперссылок в Word 2000 выполняется с использованием окна диалога Добавление гиперссылки (Insert Hyperlink). Для вызова этого окна диалога необходимо выбрать команду Вставка > Гиперссылка (Insert > Hyperlink) или щелкнуть на кнопке Добавление гиперссылки (Insert Hyperlink) на панели инструментов Стандартная (Standatd).Word 2000 позволяет создавать гиперссылки на ресурсы четырех различных типов:
Для выбора одного из этих типов используются кнопки, расположенные на панели Связать с (Link То) в левой части окна диалога Добавление гиперссылки (Insert Hyperlink). Мы рассмотрим процедуру создания гипсрссылок на ресурсы каждого из этих четырех типов в отдельности.
Создание гиперссылки на имеющуюся Web-страницу или файл
В большинстве случаев ресурсы, на которые должны указывать вставляемые в документы гиперссылки, создаются заранее. В этом случае должен использоваться режим создания гиперссылки на имеющуюся Web-страницу или файл. Для создания гиперссылки в этом режиме необходимо выполнить следующие операции.
Гиперссылка может быть назначена не только на текст документа, но и на графический объект. Для этого перед вызовом окна диалога Добавление гиперссылки (Insert Hyperlink) следует выделить графический элемент, на который необходимо назначить гиперссылку. После создания гиперссылки при щелчке на этом графическом объекте будет открываться целевой документ созданной гиперссылки. Этот прием нередко используется разработчиками Web-страниц для создания графических кнопок.
Создание гиперссылки на определенное место в текущем документе
Можно также создать гиперссылку на какой-либо объект в текущем документе. Word позволяет создавать гиперссылки на имеющиеся в документе закладки и заголовки, а также на начало документа.
При создании гиперссылок на начало и заголовки документа Word создает соответствующие закладки автоматически. Тем не менее, если требуется создать гиперссылку на какой-либо другой фрагмент текста или объект в документе, следует предварительно назначить на этот текст или объект закладку. Для создания закладки в Word необходимо выполнить следующие действия.
Word допускает создание закладок, имена которых содержат буквы русского алфавита. Такие закладки также поддерживаются рядом броузеров. Тем не менее при указании имен закладок для использования в HTML-документах, предназначенных для публикации в Интернете, рекомендуется, чтобы имена закладок содержали только латинские буквы, цифры и символы подчеркивания. Это позволит избежать непредвиденных проблем с совместимостью создаваемых Web-страниц с отдельными броузерами.
Создание гиперссылки на определенное место документа выполняется следующим образом.
Создание гиперссылки на новый документ
При разработке Web-сайтов может возникнуть ситуация, когда документ, с которым необходимо связать создаваемую гиперссылку, еще не создан. В такой ситуации Word позволяет создать новый документ одновременно с созданием гиперссылки на него. Для создания гиперссылки на новый документ нужно выполнить следующие действия.
Создание гиперссылки на адрес электронной почты
Гиперссылки на Web-страницах можно использовать не только для перехода к различным документам или ресурсам, но и для отправки сообщений электронной почты по определенным адресам. При щелчке на такой гиперссылке в броузере на экране будет отображаться окно создания нового сообщения электронной почты. В поле Кому (То) этого окна будет указан адрес электронной почты, на который указывает гиперссылка. Кроме того, в гиперссылке может быть указана тема сообщения, что удобно для автоматической сортировки сообщений, поступающих с Web-сайта (такая сортировка может быть выполнена рядом программ электронной почты). Подобного рода гиперссылки позволяют упростить процедуру передачи той или иной информации по определенному адресу, например, отправку отзывов администратору Web-сайта.
Создание гиперссылки па адрес электронной почты в Word выполняется в соответствии со следующим планом.
Как уже было отмечено, таблицы широко применяются в Web — и не только для размещения данных. Так, к примеру, в ряде шаблонов Web-страниц Word 2000 макет страницы создается с помощью таблиц, например, для размещения текста в нескольких колонках или создания полей. Примером такого шаблона является шаблон Простая Web-страница (Simple Layout).
В Word реализовано множество функций, ориентированных на работу с таблицами. Получить доступ к этим функциям можно посредством меню Таблица (Table) или панели инструментов Таблицы и границы (Tables And Borders). Для отображения этой панели инструментов достаточно щелкнуть на любой из отображаемых на экране панелей инструментов и выбрать команду контекстного меню Таблицы и границы (Tables And Borders).
В этой книге будут рассмотрены лишь вопросы создания таблиц. Тем не менее Word предоставляет разработчику богатейшие возможности по форматированию таблиц. Все эти функции невозможно рассмотреть в рамках одного небольшого раздела. Поэтому мы рекомендуем вам изучить их самостоятельно. В конце этого раздела приводится краткий обзор средств работы с таблицами Word 2000.
Word позволяет создавать таблицы тремя различными способами:
Рассмотрим каждый из этих способов в отдельности.
Рисование таблиц
Наиболее простым и наглядным способом создания таблиц в Word является ри- :
сование. При использовании этого способа построение таблицы выполняется при помощи мыши, аналогично построению геометрических фигур в графических ? пакетах. Чтобы нарисовать таблицу, выполните следующие действия.
Если необходимо объединить несколько ячеек таблицы, выполните следующие действия.
К недостаткам этого способа создания таблиц можно отнести относительно низкую точность построения. Например, при рисовании таблиц сложно добиться равных размеров ячеек. В результате после построения таблицы размер ее ячеек приходится дополнительно настраивать с использованием других инструментов работы с таблицами Word.
Указывая точные размеры таблицы или отдельных ее ячеек, нельзя быть уверенным, что таблица будет отображаться в броузере в полном соответствии с указанными размерами. Окончательные размеры таблиц, размещаемых на Web-страницах, определяются броузером.
Создание таблицы с использованием кнопки Добавить таблицу
В Word имеется еще одно простое и наглядное средство создания таблиц — кнопка Добавить таблицу (Insert Table) на панели инструментов Стандартная (Standatd). Для создания таблицы с использованием этой кнопки необходимо выполнить следующие действия.
Этот способ создания таблиц может быть с успехом использован в большинстве случаев. Он позволяет быстро получать таблицы с ячейками равных размеров. При необходимости любые параметры таблицы, созданной таким способом, можно изменить впоследствии.
Создание таблицы с использованием команды меню
Можно также создавать таблицы с использованием команды меню. Для этого выполните следующие действия.
Обратите внимание, что таблица может быть вставлена в ячейку другой таблицы. Эта возможность нередко используется при создании Web-страниц.
Обзор средств работы с таблицами
Word 2000 предоставляет набор средств для работы с таблицами. Ниже приводится краткое описание этих средств.
Для создания нумерованных и маркированных списков в Word приме няются кнопки Нумерация (Numbering) и Маркеры (Bullets) на панели инструментов Форматирование (Formatting).
.Для изменения параметров маркированных и нумерованных списков используется окно диалога Список (Bullets And Numbering). Для .отображения этого окна диалога выберите команду Формат > Список (Format > Bullets And Numbering). Перед выбором этой команды необходимо установить курсор в пределах списка или выделить несколько абзацев, параметры списка для которых требуется изменить.
Для изменения параметров маркированного списка служит вкладка Маркированный (Bulleted). На этой вкладке представлено 7 ячеек, каждая из которых соответствует определенному типу маркированного списка. Для выбора требуемого типа достаточно щелкнуть мышью в ячейке, содержащей соответствующий образец. При необходимости можно изменить параметры того или иного типа списка, для чего следует щелкнуть в ячейке, представляющий этот тип, а затем щелкнуть на кнопке Изменить (Customize). Для отказа от использования маркеров в выделенных абзацах следует щелкнуть в ячейке Нет (None). По завершении настойки параметров маркированного списка следует щелкнуть на кнопке ОК.
Word позволяет задавать графические маркеры списков. Для выбора графического маркера необходимо щелкнуть на кнопке Рисунок (Picture). В результате Word отобразит на экране окно Рисованный маркер (Picture Bullet).В этом окне следует отыскать требуемый маркер, щелкнуть на нем, а затем щелкнуть на кнопке Вставить клип (Insert Clip).
Выбор типа нумерованного списка выполняется на вкладке Нумерованный (Numbered) окна диалога Список (Bullets And Numbering).Выбор типа осуществляется так же, как и в случае маркированных списков. Кроме того, если требуется продолжить прерванную ранее нумерацию списка, в группе Нумерация (Numbering) в нижней части вкладки можно установить переключатель Продолжить (Continue Previous List). По завершении настройки параметров списка следует щелкнуть на кнопке ОК.
Большинство броузеров поддерживает стандартные типы маркированных списков, представленные в первых трех ячейках: с маркерами в виде закрашенного и незакрашенного кружков и в виде квадрата. Остальные типы списков, как правило, также поддерживаются многими современными броузерами, однако в качестве маркеров эти типы используют символы специальных шрифтов, которые могут быть недоступны в компьютерных системах, применяемых отдельными пользователями Web. Учитывая это, следует воздержаться от задания списков этих типов. Кроме того, отдельные броузеры (в особенности ранние версии) могут не поддерживать определенные параметры форматирования списков, устанавливаемые с помощью кнопки Изменить (Customize). Поэтому после изменения параметров списка рекомендуется сохранить редактируемую страницу и просмотреть ее в различных броузерах, чтобы убедиться в правильности отображения списков.
Задание графических маркеров, как правило, является безопасным с точки зрения совместимости с различными типами броузеров, поскольку в этом случае Word просто вставляет в начало каждого абзаца графический объект. Таким образом, правильное отображение графических маркеров списка обеспечивается практически во всех броузерах, поддерживающих отображение графики.
Добавление графических элементов
Графика является неотъемлемой частью оформления современных Web-сайтов. В настоящее время в Сети практически невозможно найти сайт без графических элементов. Word предоставляет в распоряжение разработчика богатейший набор средств размещения в документах графических объектов. Кроме того, имеется возможность создавать графические элементы непосредственно в Word. В этом разделе мы будем предполагать, что все графические элементы Web-страницы были созданы заранее средствами внешних графических пакетов, и рассмотрим лишь вопросы, касающиеся вставки графики в Web-документы.
Вставка графического объекта в документ выполняется следующим образом.
Следует отметить, что Word также имеет множество встроенных функций, позволяющих создавать графические элементы. При сохранении документа в формате Web-страницы все графические элементы преобразуются в форматы, совместимые с Web.
Большинство средств работы с графикой представлено на панели инс-трумен-тов Рисование (Drawing). Если вы хотите создавать графические элементы Web-страниц непосредственно в Word, вы можете изучить эти функции самостоятельно.
Создание графических карт
Графическими картами (image maps) называются размещаемые на Web-страницах графические объекты, отдельные области которых содержат гиперссылки. Такие области носят название активных областей (hot spots). В Web-документах допускается использование активных обрастей прямоугольной формы, однако большинство современных броузеров также способно обрабатывать активные области, имеющие форму овала и многоугольника. На основе многоугольников можно создавать активные области практически любой формы.
Графические карты широко применяются для облегчения и повышения наглядности навигации по Web-сайту. Например, нередко графические карты создаются на основе изображений географических карт, когда Web-сайт содержит информацию для различных регионов.
Word 2000 позволяет создавать графические карты на Web-страницах и в документах. Создание графических карт в Word выполняется следующим образом.
Рассмотренная выше графическая карта относится к клиентском/типу, поскольку обработка таких графических карт выполняется на стороне клиента (то есть броузера). Кроме клиентских карт существуют также графические карты серверного типа. Такие карты не содержат активных областей. Вместо этого броузер передает серверу координаты точки изображения, на которой был выполнен щелчок мышью. Для обработки таких карт требуется специальное программное обеспечение, размещаемое на сервере. Рассмотрение этого типа графических карт выходит за рамки тематики этой книги. Следует отметить, что серверные графические карты не получили столь широкого распространения, как клиентские, вследствие относительной сложности их обработки и изменения.
В последнее время широкое распространение в Web получили фреймы. Фреймами называются области Web-страницы, предназначенные для отображения «вложенных» Web-страниц. Строго говоря, страница фреймов не является Web-страницей в традиционном понимании, поскольку она не может содержать текста, графики и других стандартных элементов, — на ней размещается только набор фреймов.
В русскоязычной версии Word 2000 фреймы называются «рамками». Следует отметить, что какой-либо русский аналог английского термина frames нельзя назвать безусловно устоявшимся. В то время как в Microsoft Word 2000 применяется термин «рамки», в Microsoft Internet Explorer 5 можно встретить вариант перевода этого термина «кадры». На наш взгляд, оба эти перевода нельзя назвать удачными, С другой стороны, в русскоязычной литературе нередко употребляется термин «фреймы», который попросту взят из английского языка. В нашей книге будет употребляться именно этот вариант.
Word 2000 располагает набором средств по созданию наборов фреймов и работе с фреймами. Для получения доступа к средствам работы с фреймами используется команда Формат > Рамки > Новая страница рамок (Format > Frames > New Frames Page). В результате выбора этой команды на экране отображается панель инструментов Рамки (Frames).
Создание фрейма
Для создания фреймов используются кнопки Новая рамка слева (New Frame Left), Новая рамка справа (New Frame Right), Новая рамка сверху (New Frame Above) и "Новая рамка снизу (New Frame Below), расположенные на панели инструментов Рамки (Frames). Чтобы создать фрейм, следует поместить курсор в пределах фрейма, относительно которого будет размещен вновь создаваемый фрейм (то есть сделать этот фрейм активным), и щелкнуть на одной из этих кнопок. Если активный документ не входит в состав открытого в Word набора фреймов, при щелчке на одной из этих кнопок также будет создан набор фреймов, в который включается активный документ.
Создание фрейма с оглавлением
Word позволяет автоматизировать процесс создания оглавления Web-страницы, которое может быть использовано для навигации по Web-сайту или в качестве отправной точки при создании панели навигации.
Для создания фрейма оглавления используется кнопка Оглавление в рамке (Table Of Contents In Frame) на панели инструментов Рамки (Frames). Если на момент вызова функции создания оглавления активный документ не был сохранен, Word предложит выполнить сохранение и, получив положительный ответ, отобразит окно диалога Сохранение документа (Save As). Непосредственно после сохранения документа будет создан набор из двух вертикально ориентированных фреймов. Активный документ будет размещен в правом фрейме, а созданное оглавление — в левом.
Следует отметить, что в оглавление, создаваемое с использованием кнопки Оглавление в рамке (Table Of Contents In Frame), будут включены только заголовки, оформленные стандартными стилями заголовков Word.
Удаление фрейма
Чтобы удалить фрейм из редактируемого набора фреймов, достаточно поместить курсор в пределах удаляемого фрейма и щелкнуть на кнопке Удалить рамку (Remove Frame) на панели инструментов Рамки (Frames). Если документ удаляемого фрейма был изменен с момента последнего сохранения, Word предложит сохранить изменения перед удалением фрейма. Обратите внимание, что при удалении фрейма из редактируемого набора связанный с этим фреймом документ не удаляется с диска.
Настройка параметров фрейма
Для настройки параметров фрейма используется кнопка Свойства рамки (Frame Properties) на панели инструментов Рамки (Frames). Для изменения свойств определенного фрейма следует установить курсор в пределах этого фрейма и щелкнуть на кнопке Свойства рамки (Frame Properties). В результате Word отобразит на экране окно диалога Свойства рамки (Frame Properties).
В верхней части вкладки Границы (Borders) этого окна диалога представлены параметры набора фреймов (или, в соответствии с терминологией Word, страницы рамок). Расположенная здесь группа переключателей позволяет управлять отображением линий, разделяющих фреймы. По умолчанию устанавливается переключатель Отображать границы всех рамок (Show All Frame Borders). Если необходимо, чтобы границы фреймов не отображались при просмотре страницы, следует установить переключатель Границы отсутствуют (No Borders). Расположенные ниже поля позволяют указать ширину и цвет границы, разделяющей фреймы набора.
В нижней части вкладки Границы (Borders) представлены параметры, относящиеся к отдельным фреймам. Раскрывающийся .список Показывать полосы прокрутки (Show Scrollbars In Browser) позволяет выбирать режим отображения полос прокрутки при просмотре страницы в броузере. При установке флажка Разрешить изменение размеров (Frame Is Resizable) размер фрейма может быть изменен в ходе просмотра страницы в броузере. В противном случае фрейм всегда будет иметь размер, указанный при его создании. Этот параметр не влияет на возможность изменения размера фрейма при редактировании страницы в Word.
Вкладка Рамка (Frame) окна диалога Свойства рамки (Frame Properties) содержит набор параметров активного фрейма набора.
Раскрывающийся список Начальная страница (Initial Page) позволяет указать страницу, отображаемую во фрейме при открытии набора фреймов. Файл начальной страницы может быть выбран непосредственно в раскрывающемся списке или с помощью кнопки Обзор (Browse). Установка флажка Связать с файлом (Link To File) обеспечивает обновление содержимого фрейма при изменении файла начальной страницы.
Раскрывающийся список Имя (Name) позволяет указать имя фрейма. Это имя не отображается в броузере и используется исключительно в целях адресации, например, когда требуется открыть во фрейме документ по щелчку на гиперссылке, расположенной в другом фрейме.
Параметры группы Размер (Size) позволяют указывать ширину и высоту фрейма. Размеры могут быть указаны в пикселах или процентах (раскрывающийся список Единицы (Measure In)); можно также выбрать режим Относительно (Relative), в результате фрейм будет занимать все рабочее пространство окна броузера, не используемое для отображения других фреймов.
Для настройки параметров набора фреймов можно также щелкнуть правой кнопкой мыши на границе фреймов и выбрать команду контекстного меню Свойства рамки (Frame Properties) (в контекстном меню эта команда может быть единственной). В отображаемом в результате такого действия окне диалога Свойства рамки (Frame Properties) будет доступна только вкладка Границы (Borders).
Сохранение документа в формате Web-страницы
Любой документ Word может быть сохранен в формате Web-страницы. Для этого используется команда Файл > Сохранить как Web-страницу (File > Save As Web Page). При выборе этой команды Word отображает на экране окно диалога Сохранение документа (Save As). В поле Имя файла (File Name) требуется указать имя файла для сохранения HTML-страницы. При необходимости можно выбрать папку для размещения файла в раскрывающемся списке Папка (Save In). В области Заголовок (Page Title) отображается заголовок сохраняемой Web-страницы. При необходимости этот заголовок можно изменить, воспользовавшись кнопкой Изменить (Change Title). Для сохранения документа щелкните на кнопке Сохранить (Save).
Использование мастера Web-страниц
Помимо шаблонов Web-страниц в состав Word 2000 входит еще одно средство, облегчающее создание Web-документов. Это средство называется Мастером Web-страниц (Web Page Wizard). Мастер Web-страниц позволяет создавать не только отдельные страницы, но и законченные Web-сайты.
Для создания Web-страницы с помощью мастера выполните следующие действия.
Заканчивая этот раздел, хотелось бы еще раз подчеркнуть, что средства создания и редактирования страниц в Word 2000 не ограничиваются рассмотренными. Ограничения, накладываемые на объем этой книги, не позволяют привести здесь описание всех команд и приемов работы, которые могут быть использованы для создания Web-страниц. Так, в этот раздел не вошла информация о создании форм для Web, о создании графических объектов и ряд других тем. Здесь приведены сведения, имеющие отношение только к основным элементам Web-страниц.
Word 2000 обеспечивает сохранение на Web-страницах почти всех элементов, которые могут быть размещены на страницах стандартных документов Word. Короче говоря, проще перечислить элементы, которые Word поможет сохранить на Web-странице, чем те, которые могут быть сохранены. Чтобы просмотреть список таких элементов и увидеть, как они будут преобразованы при сохранении документа в формате Web-страницы, можно воспользоваться справочной системой Word (раздел «Сохранение документа Word как Web-страницы» в категории «Преобразование файлов»). Кроме того, при попытке сохранения документа, содержащего неподдерживаемое форматирование, в формате Web-страницы Word отображает соответствующее предупреждение.
Делай великое, не обещая великого.
Пифагор
Microsoft Frontpage Express обеспечивает выполнение всех основных функций создания Web-документов в визуальном режиме. Это означает, что создаваемые или редактируемые страницы отображаются в том виде, в котором их увидят посетители, просматривая страницы в своих броузерах. Использование визуального режима значительно экономит время создания страниц. Кроме того, чтобы работать с таким редактором, нс требуется глубокого знания языка HTML, поскольку все теги для создаваемых элементов страниц редактор вставляет автоматически, присваивая параметрам этих тегов требуемые значения. Еще одним достоинством Microsoft Frontpage Express является то, что этот редактор входит в состав Microsoft Internet Explorer, и, если у вас имеется броузер, вам не потребуется даже загружать какие-либо дополнительные программы из Интернета.
Этот раздел поможет вам научиться создавать основные элементы Web-страниц с помощью редактора Microsoft Frontpage Express.
Приступая к работе над новым документом, вы можете уже на этапе создания
определить его тип.
Самый, простой способ создания пустого документа — щелкнуть на кнопке
Создать (New) на панели инструментов.
Однако больше возможностей предоставляет следующий способ.
Как вы уже, наверное, поняли, этот способ можно использовать и для создания HTML-документов другого типа. В списке окна диалога Новая страница (New Page) можно выбрать следующие пункты.
Frontpage Express во многом напоминает Microsoft Word. Например, средства работы Frontpage Express с файлами (открытие, сохранение) аналогичны тем, которые применяются в текстовых редакторах.
Чтобы открыть существующий HTML-документ, выполните одно из следующих действий.
В любом случае в открывшемся окне диалога потребуется уточнить местоположение документа.
Сохранить результаты своей работы в программе Frontpage Express можно точно так же, как практически в любом приложении для Windows, например, Microsoft Word.
Если вы предприняли одно из перечисленных выше действий применительно к новому документу, вы увидите окно диалога Сохранить как (Save As).
Работая над HTML-документами в программе Frontpage Express, вы можете переходить от одной страницы к другой точно так же (или почти так же), как и при просмотре ресурсов Интернета в Internet Explorer.
Щелкните на кнопке Назад (Back) на панели инструментов, чтобы вернуться к последней странице, с которой вы работали, или на кнопке Вперед (Forward), чтобы перейти к странице, которую вы уже открывали после текущей. Кроме того, вы можете выбрать команду Назад (Back) или Вперед (Forward) в меню Переход (Go),
Когда вы просматриваете информационные ресурсы в Интернете, вы переходите по ссылкам простым щелчком на них. В режиме редактирования HTML-документа это невозможно. Щелкнув на ссылке мышью, вы просто выделите ее. Чтобы перейти к тому ресурсу, на который указывает ссылка, щелкните на ней правой кнопкой мыши и выберите команду Перейти по ссылке (Follow Hyperlink) в контекстном меню.
Иногда бывает неудобно работать с графическим представлением страницы. Тогда вам придется обратиться к HTML-коду. Кроме того, есть множество вещей, которые просто невозможно (или сложно) сделать средствами визуального конструирования Frontpage Express.
Для редактирования HTML-кода выберите команду HTML в меню Вид (View). Откроется окно Просмотр или правка HTML (View or Edit HTML), в котором вы можете «вручную» изменить содержание HTML-документа.
Название документа отображается в строке заголовка броузера при просмотре документа.Чтобы изменить название документа, выполните следующие действия.
Вы можете указать, какой звуковой файл должен воспроизводиться при отображении Web-страницы.
Чтобы добавить на Web-страницу фоновое изображение, выполните следующие действия.
Кнопка Свойства (Properties) открывает окно диалога Свойства изображения (Image Properties), которое описано ниже в разделе «Изображения».
Чтобы задать цвет фона Web-страницы, выполните следующие действия.
Фоновое изображение и цвет фона Web-страницы можно комбинировать. Если'задано то и другое, но при этом фоновое изображение содержит прозрачный цвет, вместо него вы увидите цвет фона.
Чтобы указать цвет текста Web-страницы, выполните следующие действия.
Чтобы указать цвет ссылки, выполните следующие действия.
Чтобы задать поля в документе, выполните следующие действия.
Если вы хотите вставить в HTML-документ текст из другого файла, выполните следующие действия.
Ссылка, без сомнения, является одним из главных элементов Web-страницы, поскольку обеспечивает переход к другим страницам. Frontpage Express позволяет создавать ссылки на открытые в данный момент страницы Интернета и даже на те страницы, которые еще не существуют, сразу предлагая средства для их создания.
Чтобы вставить ссылку в документ, выполните следующие действия.
Если вы хотите, чтобы ссылкой служили название страницы, на которую указывает ссылка, или адрес ресурса Интернета, вы можете вставить их в документ автоматически. Для этого перед вставкой просто установите текстовый курсор в нужное место, ничего не выделяя.
Чтобы изменить свойства ссылки, выполните следующие действия.
Если вы хотите, чтобы объект или текст перестали служить ссылкой, выделите их (или просто установите в них текстовый курсор) и выберите команду Расцепить (Unlink) в меню Правка (Edit).
Как мы уже отмечали в ходе рассмотрения HTML-тегов, закладка представляет собой метку в HTML-документе, к которой можно перейти по ссылке. Закладки могут упростить перемещение по большой Web-странице.
Все закладки, имеющиеся на данной странице, перечислены в списке Другие закладки на этой странице (Other bookmarks on this page) окна Закладка (Bookmark). Если вам нужно перейти к одной из них, выделите ее и щелкните на кнопке Перейти (Goto). Закладка будет выделена на странице. Щелкните на кнопке ОК, чтобы закрыть окно Закладка (Bookmark).
Ломать — не строить. Удалить закладку несколько проще, чем создать.
Для вставки разрыва строки (не путать с концом абзаца) выберите команду Разрыв (Break) в меню Вставка (Insert).В окне Свойства разрыва (Break Properties) вы можете выбрать вид разрыва строки
Даже такой банальный элемент, как прямая горизонтальная линия, обладает своими свойствами. Например, можно сделать так, чтобы она выглядела объемной или плоской, задать ее относительную или абсолютную длину.
Чтобы вставить в документ горизонтальную линию, выберите команду Горизонтальная линия (Horizontal line) в меню Вставка (Insert). Изменить свойства линии можно, дважды щелкнув на ней или выбрав команду Свойства горизонтальной линии (Horizontal line properties) в меню Правка (Edit).
В окне Свойства горизонтальной линии (Horizontal line properties) вы можете задать следующие параметры.
Если вы хотите использовать в документе стилизованные разделительные линии, вам помогут графические элементы. При этом стилизованная линия создается средствами какого-либо графического редактора и сохраняется в отдельном файле. После этого линия вставляется в документ как обычное изображение, о чем пойдет речь в следующем разделе.
Редкий HTML-документ не содержит изображений. Помимо того что они вносят приятное разнообразие в безликие массивы текстовых строк, картинки и фотографии могут выполнять полезные функции — например, служить ссылками или использоваться в качестве разделительных линий (см. предыдущий раздел).
Чтобы вставить изображение в HTML-документ, выполните одно из следующих действий.
На вкладке Другое место (Other Location) открывшегося окна диалога вы можете указать местоположение файла с изображением на диске (From File) или в Интер-нете (From Location). На вкладке Картинки (Clip Art) вы можете выбрать готовые изображения из коллекций Frontpage. Там есть (точнее, должны быть) картинки для фона, баннера, кнопки и т. д. В коллекции присутствуют изображения различных форматов, в том числе векторных.
Если вам нужно «объяснить» Frontpage Express, где находится изображение, которое должно быть показано на странице, сделайте следующее.
Самыми рапространенными форматами изображений в Интернете являются JPEG и GIF. Однако при разработке страниц с помощью Frontpage Express вы можете вставить в документ изображения других форматов, например, TIFF или BMP. Затем в окне свойств изображения можно указать, в каком формате — GIF или JPEG — вы хотите сохранить его. При сохранении документа вам будет предложено указать местоположение и название нового файла с изображением.
Если вы хотите вставить в документ изображение формата TIFF, а затем сделать из него GIF или JPEG, используйте формат TIFF без компрессии.
Чтобы изменить формат изображения, выполните следующие действия.
Вы можете не только изменить формат изображения, но и определить его качество. Естественно, смотреть на изображения высокого качества приятнее, чем на низкокачественные картинки. Однако следует учитывать, что чем выше качество изображения, тем больше его объем, а значит, и время загрузки из Интериета.-Для изменения уровня сжатия (и, соответственно, качества) изображения выполните следующие действия.
В формате GIF обычно сохраняются векторные изображения. Для изменения свойств GIF-картинки выполните следующие действия.
Даже сравнительно небольшие по объему изображения обладают способностью загружаться сравнительно долго. Пока длится этот процесс, в броузере может отображаться его «заместитель». Кроме того, некоторые пользователи отключают в своих броузерах режим отображения графических элементов или используют броузеры, работающие исключительно в текстовом режиме, что значительно ускоряет процесс загрузки страниц. По этой причине для каждого графического элемента, несущего на себе определенную информационную нагрузку, необходимо указывать замещающий текст.
Если изображение является ссылкой, вы можете изменить ее свойства следующим образом.
Если изображение — не единственный элемент Web-страницы, значит, нужно определить его положение относительно других элементов, например, текста, то есть переместить изображение. Параметры размещения изображения представлены на вкладке Внешний вид (Appearance) в окне Свойства изображения (Image Properties).
Формы используются для того, чтобы разработчик Web-страницы мог получать информацию от ее посетителей. Например, когда вы хотите загрузить с сайта производителя какой-либо программы ее тестовую версию, вас нередко просят оставить информацию о себе — например, чтобы извещать вас по электронной почте о выходе новых версий программы. Вы вводите ваши данные в текстовые поля, устанавливаете флажки и переключатели — словом, работаете с различными элементами формы.
Вставка элементов формы
Чтобы вставить в HTML-документ элемент формы, можете воспользоваться как меню, так и панелью инструментов. Правда, в последнем случае на экран должна быть выведена панель Панель инструментов форм (Forms). Если вы не видите ее на экране, выберите команду Панель инструментов форм (Forms Toolbar) в меню Вид (View).
Для вставки какого-либо элемента формы щелкните на соответствующей кнопке панели инструментов (или выберите одноименную команду в подменю Поле формы (Form Field) меню Вставка (Insert)).
Свойства однострочного текстового поля
Однострочное текстовое поле позволяет вводить текстовую информацию в одну строку 3'аданной длины.
Для настройки свойств текстового поля выполните одно из следующих действий:
В окне Свойства текстового поля (Text Box Properties) вы можете задать следующие параметры.
Свойства прокручиваемого текстового поля
Многострочное текстовое поле позволяет вводить информацию, которая может быть представлена в виде ряда строк. Это текстовое поле может содержать полосу прокрутки.
Для настройки свойств многострочного текстового поля выполните одно из следующих действий:
В окне Свойства прокручиваемого текстового поля (Text Box Properties) вы можете задать следующие параметры.
Проверка значения текстового поля
Если информация, вводимая пользователем, важна для вас, и для правильной обработки этой информации требуется убедиться в ее корректности, вы можете контролировать правильность ввода данных в текстовое поле.
Для проверки правильности ввода необходимо открыть окно диалога Проверка достоверности текстового поля (Text Box Validation). Для этого выполните одно из следующих действий:
В окне Проверка достоверности текстового поля (Text Box Validation) присутствуют следующие элементы.
Один и тот же символ не может одновременно служить разделителем разрядов и целой/ дробной части числа.
Свойства флажка
Флажок может находиться в одном из двух положений — установленном или снятом. Выбирая положение, вы тем самым задаете значение параметра, связанного с флажком.
Для задания свойств флажка выполните одно из следующих действий:
В окне Свойства флажка (Check Box Properties) вы можете задать следующие параметры.
Свойства переключателя
Переключатель позволяет выбрать один (и только один!) из нескольких параметров. Для задания свойств переключателя выполните одно из следующих действий:
В окне Свойства переключателя (Radio Button Properties) вы можете задать следующие параметры.
Проверка состояния переключателя
Если информация, вводимая пользователем посредством установки переключателя, важна для вас, вы можете указать, является ли установка переключателя обязательной.
Для этого следует открыть окно Проверка достоверности переключателя (Radio Button Validation), что можно сделать одним из следующих способов:
В окне Проверка достоверности переключателя (Radio Button Validation) присутствуют следующие элементы.
Свойства открывающегося меню
Открывающееся меню (его называют также поле со списком) — это один из вариантов списка, с помощью которого вы можете выбрать одно или несколько предлагаемых значений (пунктов списка). Вы можете регулировать его многочисленные настройки, например, порядок расположения пунктов или то, сколько пунктов может быть выбрано одновременно.
Для настройки свойств открывающегося меню выполните одно из следующих действий:
В окне Свойства открывающегося меню (Drop-Down Menu Properties) вы можете задать следующие параметры.
Проверка значения открывающегося меню
Если выбор пользователя важен для вас, вы можете проконтролировать пользовательский ввод.
Для этого следует открыть окно Проверка достоверности открывающегося меню (Drop-Down Menu Validation), что можно сделать, выполнив одно из следующих действий:
В окне Проверка достоверности открывающегося меню (Drop-Down Menu Validation) присутствуют следующие элементы.
Свойства кнопки
Кнопка предназначена для выполнения определенных действий. Это может быть, например, отправка данных формы после ее заполнения или, наоборот, сброс всех значений. Действия, совершаемые при щелчке на кнопке, могут быть определены вами. Для определения свойств кнопки выполните одно из следующих действий:
В окне Свойства кнопки (Push Button Properties) вы можете задать следующие параметры.
Свойства изображения
Изображение тоже может служить элементом формы. Его можно, например, поместить на кнопку. Чтобы задать свойства изображения, выполните одно из следующих действий:
В окне Свойства поля формы изображения (Image Form Field Properties) присутствуют следующие элементы.
Свойства формы
Свойства формы являются определяющими при ее создании. В них, в частности, указывается, какое действие следует выполнить с 4.»ормой. Для задания свойств формы щелкните на элементе формы правой кнопкой мыши и выберите команду Свойства формы (Form Properties) в контекстном меню.
В окне Свойства формы (Form Properties) вы можете задать следующие параметры.
Таблицы позволяют упорядочить информацию на Web-странице. В ячейках таблицы может располагаться не только текст, но также изображения, видео и активные элементы, такие Kaк Java-апплеты или элементы управления ActiveX, и даже другие таблицы, — словом, любые компоненты HTML-документа.
Таблицу можно вставить в документ, нажав кнопку Вставить таблицу (Insert Table) на панели инструментов. Далее, не отпуская кнопку мыши, следует протащить курсор над ячейками открывшейся палитры и определить тем самым количество строк и столбцов таблицы.
Отсчитав нужное их число, отпустите кнопку мыши. В то место документа, где находится текстовый курсор, будет вставлена таблица.Если вы воспользуетесь командой Вставить таблицу (Insert Table) меню Таблица (Table), на экран будет выведено окно Добавить таблицу (Insert Table).
В этом окне вы можете задать следующие параметры.
Для удаления таблицы выделите ее и нажмите клавишу Delete или выберите команду Очистить (Clear) в меню Правка (Edit).
Для настроек свойств таблицы выполните одно из следующих действий:
Для настройки свойств ячейки выполните одно из следующих действий:
В любом случае откроется окно свойств ячейки таблицы.В этом окне вам доступны следующие параметры.
Текст не только несет на себе основную информационную нагрузку, но и играет немалую роль в оформлении Web-страницы. Грамотное форматирование размещаемого на странице текста также облегчает восприятие информации Web-сайта. Этот раздел посвящен вопросам оформления текстовых элементов Web-страниц.
Шрифт
Одним из главных параметров, определяющих общее восприятие и удобство чтения Web-страницы, является выбор шрифта. Чтобы задать шрифт, выделите текст, который вы хотите оформить шрифтовым выделением, и выберите команду Свойства шрифта (Font Properties) в меню Правка (Edit). Кроме того, для открытия этого окна вы можете использовать комбинацию клавиш Alt+Enter.
Для изменения шрифта можно также выбрать команду Шрифт (Font) в меню Формат (Format). Это пригодится, например, если вам нужно изменить шрифт гиперссылки, поскольку в этом случае команды Свойства шрифта (Font Properties) в меню Правка (Edit) не будет.
В окне Шрифт (Font) на одноименной вкладке выберите шрифт (список Шрифт (Font)), его начертание (список Начертание (Font Style)), размер (список Размер (Size)), а также подходящий эффект— подчеркивание (Подчеркнутый (Underline)), зачеркивание (Зачеркнутый (Strikethrough)), одинаковую ширину символов (Машинописный (Typewriter)) и цвет (список Цвет (Color)).
Образец текста, оформленного соответствующим образом, показан в области просмотра в нижней части окна.
Символьные стили
Стили, которые вы можете применить к символам, делятся на физические и логические.
Когда вы применяете к символам физический стиль (например, полужирный), вы можете быть уверены, что большинство броузеров будет отображать их одинаково. Frontpage Express позволяет применять такие физические стили, как полужирный и курсив.
Для изменения начертания выделите текст, вид которого вы хотите изменить, и щелкните на соответствующей кнопке на панели инструментов.
Когда вы применяете к символам логический стиль, вы лишь обозначаете тем самым начало и конец стилевого выделения. Визуальное же воплощение стиля зависит от конкретного броузера. Например, стиль Emphasis может быть интерпретирован разными броузерами как полужирный, курсив или подчеркнутый. Логические стили применяются, когда смыслу стиля придается большее значение, чем его виду.
Чтобы задать логический стиль символов, выделите текст, к которому вы хотите применить специальный символьный стиль, и выберите команду Свойства шрифта (Font Properties) в меню Правка (Edit).
В окне Шрифт (Font) на вкладке Специальные стили (Special Styles) вы можете выбрать один из следующих стилей.
Образец текста показан в области просмотра в нижней части окна.
Другие параметры шрифта
Для изменения цвета текста выполните следующие действия.
Для изменения размера символов текста выделите текст, размер которого вы хотите изменить.
При щелчке на вышеупомянутых кнопках последовательно задаются следующие размеры шрифта: 8, 10, 12, 14, 18, 24, 36 пунктов.
Для снятия форматирования выделите нужный текст и выберите команду Удалить оформление (Remove Formatting) в меню Формат (Format).
Обработка абзацев
Чтобы просмотреть или задать свойства абзаца, выполните одно из следующих действий:
В окне Свойства абзаца (Paragraph Properties) вы можете задать следующие параметры.
Абзац текста, как и любой другой элемент Web-страницы, может быть расположен по-разному. Чтобы задать способ выравнивания абзаца, установите текстовый курсор в любую строку того абзаца, расположение которого вы хотите изменить, и щелкните на соответствующей кнопке.
Одним из способов обратить внимание на абзац является увеличение его отступа от левого края страницы. Для задания отступа слева установите текстовый курсор в любую строку абзаца, отступ которого вы хотите изменить.
Чтобы назначить абзацу тот или иной стиль, установите текстовый курсор в любое место того абзаца, которому вы хотите присвоить стиль, и выберите нужный стиль из списка на панели инструментов.
Вам доступны следующие стили:
Для перечисления понятий или действий принято использовать списки.
Для создания маркированного списка щелкните правой кнопкой мыши на абзаце, который будет пунктом списка, и выберите команду Свойства списка (List Properties) в контекстном меню. Откроется окно свойств списка. На вкладке Маркированный (Numbering), выберите список с подходящим маркером и щелкните на кнопке ОК.
Для создания нумерованного списка щелкните правой кнопкой мыши на абзаце, который будет пунктом списка, и выберите команду Свойства списка (List Properties) в контекстном меню. Откроется окно свойств списка. На вкладке Нумерованный (Numbering) выберите список с подходящим способом нумерации и щелкните на кнопке ОК.
Поле со счетчиком. Начать с (Start At) позволяет задать число, с которого будет начата нумерация списка.
Вы можете настроить стили списков. Для этого щелкните правой кнопкой мыши на пункте списка и выберите команду Свойства списка (List Properties) в контекстном меню. Откроется окно свойств списка. На вкладке Другой (Other) в списке Стиль списка (List Style) перечислены различные форматы представления списка (не слишком отличающиеся друг от друга).
Флажок Компактная разметка (Compact Layout) позволяет уменьшить расстояние между строками списка определений.
Итак, уважаемый Читатель, вы закончили изучение последней главы нашей книги. Если вы подошли к ее изучению серьезно и заинтересованно, то сможете самостоятельно выбрать наиболее соответствующее вашим потребностям средство создания Web-страниц и создать пусть небольшой, но собственный узел в Сети. Вы получили представление о том, как работать с наиболее популярными визуальными редакторами и даже имели возможность узнать, как вносить поправки непосредственно в HTML-код.
Эта глава завершает книгу. Автор надеется, что она поможет вам стать полноправным членом Интернет-сообщества и использовать это богатейшее информационное средство для работы и отдыха с максимальной эффективностью.
