Каким бы мощным ни был HTML-редактор, пользователя в первую очередь интересует его основная функция: редактирование кода веб-страниц. Впервые запустив HomeSite, начинающий вебмастер видит рабочую область с двумя вкладками: Edit (Редактировать) и Browse (Просмотр). Интуитивно понятно, что первая вкладка предназначена для ввода и редактирования кода, а вторая позволяет увидеть результат. Но как вводить код? Неужели так же, как в обычный текстовый редактор типа Блокнота Windows? В принципе, можно поступать и так, но HomeSite, к счастью, имеет множество дополнительных функций, облегчающих эту довольно утомительную работу.
Начнем с того, что каждый новый документ создается по некоему шаблону, включающему элементы будущей HTML-страницы. По умолчанию в этом шаблоне присутствуют самые основные теги: <!DOCTYPE>, <HTML>, <HEAD>, <TITLE> и <BODY>. Однако в процессе работы пользователь может сам создавать такие шаблоны, в которые, помимо указанных основных тегов, могут быть включены все обязательные для сайта элементы: логотип, код баннерной сети или счетчика и так далее. Другими словами, сохранив все постоянные элементы в шаблоне, можно в дальнейшем создавать новые и новые страницы, заботясь лишь о том, чтобы вписать необходимый контент в предназначенные для этого области страницы.
Основным инструментом быстрого ввода кода в HomeSite является панель Quick Bar. Панель состоит из нескольких тематических вкладок, на каждой из которых представлены иконки для быстрой вставки тегов соответствующей группы. Так, на вкладке Fonts представлены основные теги форматирования текста, на вкладке Tables — теги, необходимые для создания таблиц, и так далее:
Различные иконки панели Quick Bar ведут себя по-разному после нажатия на них. Например, после клика по иконке, отвечающей за тег перевода строки, тег <br> будет просто вставлен на страницу, поскольку он не поддерживает никаких дополнительных атрибутов и, следовательно, не нуждается в какой-то настройке. Совсем другое дело, если нажата, например, иконка тега гиперссылки (<a>). В этом случае откроется диалоговое окно, в котором можно указать значения всех атрибутов, используемых с этим тегом:
Если заполнить окно так, как это сделано на иллюстрации, то в итоге мы получим следующий код гиперссылки: <a href=»http://hostinfo.ru/» title=»Ссылка на издание Hostinfo.ru»>Hostinfo.ru</a>.
Кроме того, в HomeSite включены несколько мастеров, упрощающих ввод кода таблиц, фреймов, глоссария, страницы с содержанием (картой) сайта. Часть этих мастеров доступна с той же панели Quick Bar, а полный их список откроется после выбора пункта New… меню File. К примеру, Table Wizard (Мастер построения таблиц) позволяет набросать «черновик» таблицы любой сложности и тут же определить атрибуты всей таблицы или отдельных строк, столбцов и даже ячеек. Само собой, мастер не позволит сразу же изготовить таблицу «под ключ», в процессе дальнейшего редактирования придется неоднократно подправлять те или иные значения. Однако если вы серьезно отнеслись к предварительному этапу работы и хорошо представляете себе таблицу, которая должна получиться в результате, исправления сведутся к минимуму.
Прежде чем писать код страницы, стоит хорошо представить себе ее структуру и расположение основных элементов. Совсем не лишним будет предварительно сделать черновой набросок на бумаге
Многие пользователи совершенно справедливо предпочитают для выполнения некоторых операций пользоваться комбинациями клавиш, а не мышью. И при вводе HTML-кода такой метода работы зачастую оказывается более удобным. Например, для вставки тега перевода строки проще и быстрее нажать комбинацию Shift+Ctrl+b, чем кликнуть по соответствующей иконке в панели Quick Bar. Точно так же для выделения фрагмента текста жирным шрифтом удобно выделить его мышью и нажать комбинацию Ctrl+b.
В процессе неизбежного редактирования придется вносить те или иные изменения в имеющийся код. Это можно делать, используя панель так называемого Tag Inspector. Панель несложно отыскать в левой части окна HomeSite. В верхней части панели перечислены использованные на странице теги. Последовательно перемещая по ним курсор, можно видеть в нижней части панели список всех доступных для данного тега атрибутов и тут же редактировать их значения.
Впрочем, HomeSite может подсказать, какие атрибуты допустимы в том или ином теге, непосредственно при наборе кода вручную. За это отвечает встроенная функция Tag Insight List. Работает она очень просто. Если при вводе кода вы набрали открывающую угловую скобку < и сделали секундную паузу, автоматически появится выпадающий список, в котором перечислены наиболее употребляемые теги. Мол, выбирай, что нужно. Допустим, выбран тег font. Вводим пробел и снова делаем секундную паузу. Вновь откроется выпадающий список, в котором перечислены атрибуты, которые можно использовать с данным тегом: class, color, dir, face и так далее. И этот список с доступными атрибутами будет появляться до тех пор, пока тег не будет закрыт скобкой >. В настройках редактора можно указать продолжительность паузы (в секундах), после которой будет появляться список Tag Insight. Да и сам список чаще всего используемых тегов (но не их атрибутов!) можно редактировать, исходя из собственных потребностей.
HomeSite позволяет пользователю самостоятельно определять удобные ему комбинации клавиш. Для этого достаточно выбрать пункт Customize из меню Options и внести нужные изменения в установки, принятые по умолчанию
Но и этим возможности HomeSite в области быстрого ввода и редактирования HTML-кода не исчерпываются. Предусмотрена и мощная функция Auto Completion (Автозавершение). Ее суть объясним на следующем примере. Если необходимо вставить в код страницы комментарий, нужно ввести следующую последовательность символов: <!—текст комментария—>. Если же в настройках редактора включена функция автозавершения, то достаточно набрать только <!— и, разумеется, сам текст комментария, а завершающий тег редактор впишет сам.
Очень удобным и полезным инструментом быстрого ввода кода является так называемая панель Snippets (Фрагменты). Довольно часто на странице используются повторяющийся код. Например, для оформления цитат могут использоваться горизонтальные линии, выделение особым цветом и так далее. Для выполнения подобного форматирования необходимо постоянно записывать одни и те же теги до и после оформляемого фрагмента текста. инструмент Snippets значительно упрощает эту рутинную процедуру. Любой набор тегов и вообще любой код могут быть сохранены в виде отдельного файла, доступ к которому осуществляется из панели Snippets. При необходимости вставить в страницу такой код достаточно выбрать соответствующий snippet в панели и двойным щелчком мыши по нему разместить код на странице. Особенно удобно, что в каждом таком файле можно сохранять два фрагмента кода: открывающий и завершающий.
Отдельного упоминания заслуживает справочник специальных символов. большинство вебмастеров пренебрегают их употреблением: пишут 1/2 вместо ½ или (с) вместо c. Такое пренебрежение объясняется просто: запомнить HTML-коды всех спецсимволов довольно затруднительно. Но страница, текст которой не оформлен по правилам типографики, заметно проигрывает, выглядит как-то легковесно. Поэтому стоит уделять спецсимволам больше внимания. Благо, HomeSite (да и другие HTML-редакторы этого класса) имеет встроенный справочник, с которым очень легко обращаться.
То же самое относится и к цветам различных элементов страницы: ф
