Создание сайтов (самоучитель)
Автоматизация ввода
Теперь давайте обратим внимание на панель инструментов для быстрого ввода тегов (Quick Bar), расположенную в правой верхней части окна программы. Элементы управления, представленные на этой панели, предназначены для автоматизации ввода элементов веб-страницы. Элементы управления сгруппированы в несколько вкладок:
• Linkbot - для автоматической проверки ссылок с помощью внешней программы Linkbot.
Если на панели QuickBar видны не все вкладки, щелкните на ней правой кнопкой мыши, и в открывшемся меню отметьте те вкладки, которые хотите сделать видимыми. Подробно разбирать все вкладки панели Quick Bar мы здесь не будем, но общий принцип работы с ними рассмотрим.
На каждой вкладке представлены командные кнопки, с помощью которых можно быстро ввести нужный тег или целый блок-заготовку. Например, если перед вами совершенно чистая страница, нажмите на самую левую кнопку вкладки Common - это кнопка Quick Start (Быстрый старт). Из открывшегося списка можно выбрать тип документа и быстро сгенерировать его .html-заголовок. А если нажать вторую кнопку той же вкладки - кнопку Body, то откроется диалоговое окно, в котором можно изменить свойства текущей страницы. Наглядно, с помощью раскрывающегося списка, организован выбор цвета текста и фона, а если ни 1 из предложенных цветов не подходит, командой Custom (Настроить) можно открыть полную палитру доступных цветов. В небольшом окне справа можно увидеть, как будет смотреться избранное цветовое сочетание.
Для выбора фонового рисунка служит кнопка, расположенная рядом с полем Background Image (Фоновый рисунок). Она открывает стандартное окно выбора файла с возможностью его предварительного просмотра. Конечно, можно ввести название графического файла и просто с клавиатуры.
Для ввода значения атрибута STYLE= также можно воспользоваться раскрывающей кнопкой соответствующего поля. При этом открывается окно внешней программы TopStyle. Это же окно будет открываться при каждой установке атрибута STYLE= для любого тега или при редактировании стилевого блока. В его правой части находится панель Инспектора стилей (Style Inspector), на которой в алфавитном порядке приведены все доступные свойства стилей. Обратите внимание на то, что набор доступных свойств можно изменять в соответствии со своими запросами. Это может быть полный набор из спецификации CSS уровня 1 или 2, или набор свойств, поддерживаемых различными версиями браузеров. Необходимый набор можно выбрать из раскрывающегося списка в Инспекторе стилей.
Значения доступных свойств стилей можно выбирать в Инспекторе с помощью раскрывающихся списков. Правда, некоторые значения, например цифровые значения параметров в соответствующих диалоговых окнах, лучше все-таки вводить вручную. Все изменения значений тут же отображаются в левой части окна TopStyle. По завершении настройки нажмите кнопку Done (Готово) - и соответствующий текст появится в поле ввода Style (Стиль). Теперь обратите внимание на еще одну особенность окна Body . На его нижней панели (там, где имеются поля Left Margin, Top Margin и Fixed Background) изображен значок браузера Internet Explorer 4. Наличие этого значка означает, что атрибуты, представленные в данном разделе, будут ( работать только в этом браузере.
К этому вопросу мы еще вернемся, а пока нажмите кнопку ОК, и вы увидите, что все установленные атрибуты тега <body> появились в тексте, например, вот так:
<BODY tEXT="Blue" BACKGROUND="arrowl.gif" BGCOLOR="Fuchsia" LINK="Aqua" VLINK="Black" ALINK="Gray" STYLE="background-position: right;
border-style: dotted; background-repeat: repeat-y;>
Диалоговые окна редактирования тегов
О том, что это все означает, мы поговорим в следующих главах, а пока что рассмотрим еще 1 типичное диалоговое окно программы. Откройте вкладку Tables и нажмите кнопку Table dialog - обычно она вторая слева. Откроется диалоговое окно пелактопа тегов ТagEditor - TABLE
- Internet Explorer 3;
- Netscape Navigator 3;
-Internet Explorer 4;
- Netscape Communicator 4;
- браузер Opera (подразумевается версия 3.5).
Как правило, свойства, которые поддерживаются каким-либо типом браузера более низкой версии, поддерживаются и в его дальнейших версиях, то есть, если значок показывает, что тот или иной атрибут поддерживается в браузере Internet Explorer 3, то это означает, что он, скорее всего, будет поддерживаться также и в браузере Internet Explorer 4 или в пятой версии. Однако браузеры других типов, даже более старших версий, поддерживать этот атрибут, скорее всего, не будут.
Кроме того, в подобных диалоговых окнах имеется вкладка html 4.0, на которой можно устанавливать значения новых атрибутов, стандартизированных в четвертой версии языка html. Если какой-либо из этих " новых " атрибутов поддерживался и в более ранних версиях некоторых браузеров, то на этой вкладке вы увидите раздел Also in: (А также в...), в котором эти браузеры обозначены с помощью значков.
Дополнительно, данное диалоговое окно содержит еще 3 вкладки. Средства вкладки Style Sheets/Accessibility (Списки стилей) служат для установки значения атрибута STYLE= (с помощью внешней программы TopStyle, как уже говорилось выше) или для определения стилевого селектора (CLASS) и еще некоторых связанных с этим атрибутов. Средства вкладки Language (Язык) предназначены для установок, связанных с языком текста, и, наконец, средства вкладки Events (События)
Отметим еще одну полезную особенность программы HomeSite. В ней можно щелкнуть внутри любого тега правой кнопкой мыши и выбрать из контекстного меню пункт Edit Tag (Правка тега). После этого открывается диалоговое окно Редактора тегов (Tag Editor), в котором тоже очень удобно устанавливать значения всех доступных атрибутов.
Кстати, еще 1 интересная возможность заключается в том, что теги И можно "сворачивать" командой Collapse Tag (Свернуть тег) из контекстного меню. При этом содержимое тега (все, что находится между его открывающим и закрывающим элементами, например, между <body> и </body> ) свернется в небольшой значок-кнопку. Это полезно при редактировании больших файлов, если надо быстро окинуть взглядом содержимое всей веб.
По крайней мере, они не обязаны этого делать.
границы. В контекстном меню имеется также команда Collapse All Identical QS (Свернуть все идентичные теги), которая сворачивает содержимое всех тегов, идентичных данному по имени. Например, если при подаче этой команды был выделен тег <TR>, то в значки свернется содержимое всех гов <TR>, имеющихся в файле. Чтобы снова развернуть эти значки в текст, щелкните правой кнопкой мыши в любом месте панели редактирования и выберите в контекстном меню пункт Expand All (Развернуть все).
Наконец, прежде чем завершить наш краткий обзор козможностей окна редактирования, отметим еще одну полезную функцию. В программе Homesite имеется очень удобный инструмент для создания так называемых графических карт ссылок (Image map). Вы, наверное, видели на веб-страницах графические изображения, щелчок мыши в разных местах которых выполняет переход к разным веб-страницам. Например, если на рисунке изображен автомобиль, то при щелчке на кабине открывается внутренность кабины, а при щелчке на капоте - двигательный отсек и т.д.
Создание графических карт ссылок
Для создания графической карты ссылок служит кнопка New Image Map (Создать изображение-карту) на верхней панели инструментов. Она открывает диалоговое окно, в котором можно выбрать какое-либо изображение, уже имеющееся на странице, или загрузить новое. После этого открывается окно редактора графической карты ссылок (Image Map Editor)
Здесь можно визуально задать прямоугольные, круглые или многоугольные области, используя соответствующие инструменты. Механика работы подобна рисованию фигур в любом графическом редакторе. А с помощью
инструмента Стрелка можно легко отредактировать местоположение задан ных областей. После определения каждой области автоматически откры вается окно, в котором выбирают URL-адреса гиперссылок (атрибут HREF= тега <AREA>). Таким образом, создание графической карты ссылок пре вращается из сложного и утомительного занятия (каким оно всегда раньше считалось) в легкую и приятную процедуру.
Итак, мы рассмотрели некоторые полезные возможности панели редак тирования. Однако помимо вкладки Edit (Правка) на ней имеются еще две вкладки.
Предварительный просмотр страницы
Вторая вкладка называется Browse (Просмотр). На ней страница отобража ется в том виде, в котором она будет видна в браузере. Собственно говоря, кроме как для просмотра, эта вкладка ни для чего больше не предназна чена. Однако у нее тоже есть несколько особенностей.
Дело в том, что программа Homesite может использовать для отображения содержимого веб-страницы либо свой встроенный браузер, либо браузеры Internet Explorer и Netscape. При этом никакие внешние программы не запус каются - все содержимое отображается в окне редактирования, хотя фак тически при этом могут работать Internet Explorer или Netscape.
Встроенный браузер рекомендуется использовать только в тех случаях, когда нет ни Internet Explorer версии хотя бы 3.01 (более ранние версии этого браузера не способны встраиваться в Homesite), ни Netscape. Встроенный браузер не поддерживает ни фреймы, ни сценарии, ни большинство ново введений html 4.0. Кроме того, у него иногда (хотя и редко) возникают проблемы с отображением русских шрифтов.
Напротив, использовать браузеры Internet Explorer или Netscape в качестве внутреннего средства просмотра очень удобно, поскольку так можно про- сматривать содержимое своей веб-страницы в "настоящем" браузере, не запуская внешнюю программу. Впрочем, просмотр страницы во внешнем браузере тоже предусмотрен. Для этого служит кнопка со значком External Browser (Внешний браузер) на инструментальной панели. Нажав на нее, можно увидеть список внешних браузеров, установленных на компьютере, и, выбрав из списка какой-либо браузер, просмотреть в нем содержимое страницы. Если никаких браузеров в списке нет, их можно добавить вручную командой Options > Configure External Browsers (Параметры > Настройка внешних браузеров). А для того чтобы указать, какой браузер будет использоваться в качестве внутреннего, выберите из меню Options (Параметры) пункт Settings (Настройки) и далее в левой части открывшегося окна - пункт Browse (Просмотр).
Дретья вкладка панели редактирования - Design (Оформление). Ее средства предоставляют редактор кеб-страниц, работающий по принципу WYSIWYG. Поскольку своего встроенного WYSZWYG-редактора в программе Homesite нет, используются средства, встроенные в браузер Internet Explorer 4.01. Если на компьютере нет этой (или более поздней версии) программы, средствами вкладки Design (Оформление) коспользоваться нельзя. Однако мы и так не рекомендуем ими пользоваться, поскольку после этого весь исходный код может быть переформатирован, вплоть до замены одних тегов другими, без козможности восстановления. Кроме того, с отображением русских шрифтов здесь тоже иногда возникают проблемы. Кстати, если выбрать в меню Options (Параметры) пункт Settings (Настройки) и далее пункт Design (Оформление), то можно установить флажок Disable (hide) design tab (Скрыть вкладку Оформление), чтобы вообще убрать эту вкладку с экрана. На всякий случай.
В программе Homesite есть еще много интересных возможностей, таких, как автоматическое изменение размера окна внутреннего браузера (до 640х480 или 800х600), поиск и замена текстовых фрагментов во всех файлах проекта или папки, отображение внутреннего браузера под окном редактирования (с "почти синхронным" отображением вносимых изменений) и пр. Однако обо всем невозможно рассказать в небольшой главе. Мы познакомили вас с основными возможностями этой замечательной программы, а остальные вы легко обнаружите сами в процессе работы.
