HomeSite. Редактор HTML страниц.

Примечание от "turboNet":
Несколько лет назад, когда я пытался освоить данную прогу, то оказалось, что найти описание к ней не так уж и просто. Ниже приведено то, что удалось откопать. Автор данной статьи к сожалению не известен.

1.Настройка опций редактирования.
Данные свойства позволяют контролировать изображение тэгов и текста в редакторе.

Color-coding tags (Тэги кодирования цвета) -- HomeSite имеет возможность комбинировать цвета кодов. Используйте панель Color Coding (Кодирования Цвета) в диалоговом окне настройки (F8) для необходимых изменений.
Word wrap (Заворачивание текста) -- Контролирует длину строки текста в редакторе. Щелкните на кнопку Word wrap в панели инструментов.
Gutter (Межстолбцовый промежуток ) -- Поле с левой стороны документа предназначено для закладок, номера строк и отлаживания точек прерывания. Щелкните на кнопку ShowCulter в панели инструментов редактора. Нажмите Ctrl+K для установки или удаления закладок и Ctrl+Shift+K для того, чтобы перейти к следующей закладке.
Convert tag case (Перестройка регистра тэгов ) -- Изменяет по верхнему или нижнему регистру все тэги в текущем документе. Используйте команду меню Edit>Convert Tag Case для полного изменения тэгов в документе.
Indenting code (Кодирование отступов в тексте) -- Для установки отступа в тексте используйте кнопки с изображением стрелок направленных влево и вправо в панели инструментов Редактора. Для автоматического отступа строки на тот же уровень, что и предыдущая строка, выберите команду Auto Indent в панели Editor (Правка) диалогового окна настроек (F8).

2. Работа в режиме правка.
В режиме Правки вы выполняете большую часть вашего редактирования и написания кодов.
Выбор кода и блоков текста.
С помощью мышки или стандартных команд с клавиатуры вы можете выделить части документа, а с помощью ниже перечисленных сокращенных клавишных команд - быстро выбрать и определить блоки тэгов:
· Чтобы выбрать целый блок кода, нажмите Shift+Ctrl и дважды щелкните на первый или последний тэг.
· Чтобы выделить часть текста, щелкните на начало и удерживая Shift щелкните там где вы ходите закончить выделение.
· Нажмите Ctrl + двойной щелчок для выделения тега.

3. Сохранение текста в буфере.
Данная функция позволяет копировать множество текстовых блоков и сохранять их в качестве отдельных записей в буфере.
Скопировав необходимый блок в буфер его можно позднее по необходимости использовать. В буфер можно помещать до 36 фрагментов записей. При необходимости эту настройку можно изменить, выполнив Setting>Editor>Maximun clipboard entries. Когда количество записей в буфере начинает превышать количество записей установленных в настройках, последнее копирование удаляет старейшую запись и добавляет новую в конец буферного окна.
На панели инструментов есть три кнопки для данной функции.
Показать буфер.
Показывает окно прежде с скопированными записями (клипы). Если мышкой навести на пиктограмму клипа, появиться первые строки содержания. Щелкните на пиктограмму клипа для того, чтобы вставить клип в редактор, указав при этом место с помощью курсора.
Вставить все
Все записи (клипы) при щелчке на пиктограмму вставляются в редактор в том же порядке, в котором они были скопированы.
Очистить буфер
Удаляет все текущие клипы из буфера.

4. Настройка команд буфера.
Команды буфера могут быть добавлены в панель инструментов с помощью команд Options>Customize. Кнопки расположены в Toolbuttons разделе Edit.
В Keyboard shortcuts можно назначить сокращенный клавишный набор для функций:
· Show clipboard - Показать буфер
· Paste All - Вставить все
· Clear clipboard - Очистить буфер
Сворачиваемый текст
При редактировании длинных документов и сложных приложений вы можете прятать текстовые и кодовые блоки с тем, чтобы сосредоточиться на какой-либо части контекста. Маркер показывает первые несколько символов свернутой выборки.

5. Настройка опций.
Откройте панель Editor>Collapsed Text в диалоговом окне Settings (F8) для установки опций. Используя настройки, вы можете:
· Настроить маркер свернутого текста включая шрифт, цвет и количество текста отображенного внутри маркера.
· Запустить выпадающее окно показа целого текста при движении мыши по маркеру свернутого текста. Вы можете установить максимальное число строк для отображения в выпадающем окне.
· Запустить автоматическую выборку текста при разворачивании свернутого текста. Это позволит развернуть свернутый участок текста для обзора содержания и затем снова его можно свернуть.
· Установить опции сохранить/открыть файл для свернутого текста.
Для сворачивания текста в текущем документе, используйте одну из ниже перечисленных команд:
· Выделите часть текста в и щелкните одну из кнопок (-) ноходящихся на панели редактирования. Правой кнопкой мышки щелкните на текст и выберите команду Collapse из выпадающего меню.
· Щелкните правой кнопкой мыши на начало или конец тега и выберите Collapse Tag. Эта команда сворачивает тег полностью.
· Щелкните правой кнопкой мыши на начало или конец тега и выберите Collapse All IndTag. Это позволит свернуть все теги схожие с текущим.
· Щелкните на знак плюс голубого цвета в верхней части панели Tag Inspector. Таким образом свернется текст, основанный на текущем инспекторе тегов.

6. Работа со свернутым текстом.
· Двойным щелчком на маркер разверните текст.
· Для разворачивания всего текста щелкните правой кнопкой в любом месте документа и выберите команду Expand All из выпадающего меню.
· Вы можете перемещять мышкой свернутый текст, так же как и любой другой текстовый блок.
· Блоки свернутого текста могут быть размещены один в одном.
· При запуске поиска или проверки орфографии свернутый текст разворачивается в случае обнаружения результата поиска или ошибки.

7. Инструменты редактирования.
Панель редактирования предоставляет все необходимые инструменты, которые могут понадобиться для работы:
· Tag Editors (Редактор тегов) -- специальное диалоговое окно для редактирования атрибутов
· Tag Tree (Древо Тега) -- конфигурируемый навигационный помощник, для обзора и навигации иерархии тега документов
· Tag Inspector (Инспектор Тега) -- теговый редактор листа стилей
· Design Mode (Режим Дизайн) -- режим, позволяющий визуально редактировать элементы страниц
· CodeSweeper (Метла) -- конфигурируемый форматизатор кода
· TopeStyle -- позволяет создавать, редактировать и присоединять листы стилей к документам

8. Визуальное редактирование в режиме Desing View (Дизайн).
HomeSite предоставляет дополнительную опцию по визуальному редактированию кода, так называемый Desing View. Данная опция работает по принципу WYSIWYG ("what-you-see-is-what-you-get" - "что-видите-то-получаете"). Страница создается так, как она будет выглядеть на экране броузера, а программа записывает ее в виде HTML-кода.
Desing View может быть полезен при размещении изображений на странице, и для создания комплексных таблиц и форм. Код для этих элементов генерируется автоматически и обновляется по мере появления каких-либо изменений.
Функция Desing View предполагает наличие браузера IE v4.01 или более позднею версию. Если у вас не установлен данный браузер или вы не не намерены использовать данную функцию, вы можете отключить ее, для этого зайдите в меню Options > Settings > Desing и поставте галку напротив Disable (hide) desing tab.
Редактирование страниц в режиме Desing View:
1. Если документ открыт в режиме Editor (Редактор), сохраните ваши изменения и затем щелкните на закладку Desing. Откроется окно Desing view позволяющий просматривать вид документа, а так же текст, стили и графику.
2. Используйте команды панели инструментов Desing view для редактирования текста, изменения стилей, добавления цветов или создания таблиц и формирования элементов форм.
3. Если вы открыли Desing view и хотите отменить все сделанные изменения, нажмите на Cancel Desing View и вернитесь в режим Edit view.
4. Используйте закладки Edit и Browse, для перехода в эти режимы.

9. Преобразование содержания Word и Excel.
Вы можете преобразовывать содержание, то есть листы, таблицы и ячейки рабочего листа в эквивалентный формат HTML, путем копирования из Word и Excel.
1. Выделите содержание в Word(е) или Excel(е).
2. Вставьте выделенный фрагмент в окно Desing в то место, где вы хотите, чтобы этот фрагмент размещался на странице.
3. Отредактируйте новое содержание. Например вы можете щелкнуть на границу таблицу таблицы и потянув изменить ее размер.
4. Для работы непосредственно с кодом перейдите в режим Editor.
Для изучения данной функции попробуйте поэкспериментировать, вставляя разные типы содержания из документов Office или других программ Windows.
Редакторы тегов
Редакторы - это специальные диалоговые окна, которое содержат атрибуты и значения выделенного тега. Каждый редактор содержит встроенную справку (Help).
Отрыть окно редактора можно любым из ниже перечисленных способов:
· Кликните в теге правой кнопкой мышки и выберите Edit Tag (Редактор Тега).
· Поставте курсор внутрь тега и нажмите Ctrl+F4.
В окне редактора нажмите на кнопку Toggle Embedded Help и вы увидите синтаксис и пользовательскую справку.

10. Редакторы тегов.
Редакторы - это специальные диалоговые окна, которое содержат атрибуты и значения выделенного тега. Каждый редактор содержит встроенную справку (Help).
Отрыть окно редактора можно любым из ниже перечисленных способов:
· Кликните в теге правой кнопкой мышки и выберите Edit Tag (Редактор Тега).
· Поставте курсор внутрь тега и нажмите Ctrl+F4.
В окне редактора нажмите на кнопку Toggle Embedded Help и вы увидите синтаксис и пользовательскую справку.

11. Древо Тегов.
Закладка Tag Inspector, находящаяся на панели Resource содержит два инструмента: Tag Tree и Tag Inspector. Используя эти инструменты, вам будут доступны только коды HTML без текста документа, что упрощает создание и редактирование тегов.
Дерево Тегов, расположенное в верхней части панели, позволяет легко перемещаться и проверять структуру кода документа. Так же с его помощью можно отображать только те теги, которые вам нужны.
Использование Древа тегов
1. Пользуйтесь "выпадающим" списком для фильтрации показов кодов древа.
2. Щелкните на знаках плюс и минус для раскрытия и сокращения узлов (блоков) древа тегов.
3. Щелкните на тег в древе для быстрого перехода к нему в документе. Используйте команду Shift + Ctrl + double-clik (двойной щелчок мыши) для выделения блока тега.
4. Кликните на кнопку Refresh для обновления документа после его правки.

12. Сохранение форматов кода с помощью CodeSweepers.
Функция CodeSweeper позволяет автоматизировать процесс форматирования HTML-кода, что может быть полезным в ряде случаев:
· Визуальное редактирование элементов страницы в режиме Design view может изменить форматирование кода. Вы можете настроить CodeSweeper так, чтобы форматирование кода производилось при выходе из режима Design.
· Вы легко можете усилить стили кодирования для многочисленных developers, просто установив для них такие же настройки.
· Вы можете легко подчистить форматирование кода при просмотре документов существующих проектов.
HomeSite включает в себя несколько видов CodeSweeper. Вы можете также создавать свои собственные CodeSweeper или править уже существующие. В HomeSite имеется следующие CodeSweeper:
· HTML и CFML теги (по умолчанию) - форматирует прикладные программы GoldFusion.
· HTML теги - оптимально подходит для стандартных Web - страниц.
· My CodeSweeper - копия CodeSweeper (установленного по умолчанию), которую можно использовать для тестирования.
· WDDX Sweeper - копия CodeSweeper форматирует код написанный в WDDX, например, .apd файлы используемые для хранения информации проекта.
· WEB-XML CodeSweeper - только в HomeSite v 4.5.2.
· JSP CodeSweeper - только в HomeSite v 4.5.2.
· HTML Tidy - независимый верификатор и форматизатор кода HTML, который можно использовать как альтернативный CodeSweeper. Он так же позволяет преобразовывать HTML в XHTML сочетающийся с XML.
Настройка и использование CodeSweeper по умолчанию
Щелкните на кнопку CodeSweeper из режима Edit и Design с тем, чтобы запустить CodeSweeper в текущем документе. Вы так же можете настроить CodeSweeper на автоматический запуск при выходе из режима Design.
10. Редакторы тегов.
Редакторы - это специальные диалоговые окна, которое содержат атрибуты и значения выделенного тега. Каждый редактор содержит встроенную справку (Help).
Отрыть окно редактора можно любым из ниже перечисленных способов:
· Кликните в теге правой кнопкой мышки и выберите Edit Tag (Редактор Тега).
· Поставте курсор внутрь тега и нажмите Ctrl+F4.
В окне редактора нажмите на кнопку Toggle Embedded Help и вы увидите синтаксис и пользовательскую справку.

13. Создание нового CodeSweeper. Удаление. Настройки.
1. Откройте диалоговое окно Setting (F8).
2. Щелкните CodeSweeper, появиться окно CodeSweepers.
3. Выберите CodeSweeper, который вы бы хотели использовать по умолчанию из списка и щелкните на команду Set As Default (Установить по умолчанию).
4. Щелкните Ok.
Автоматический запуск CodeSweeper после выхода из режима Design:
1. В диалоговом окне Settings (Настройки) выберете Design.
2. Щелкните на команду Apply CodeSweeper при возращении из просмотра в режиме Desing.
3. Щелкните Ok.
Использования какого-либо другого CodeSweeper отличного от CodeSweeper установленного по умолчанию
При использовании CodeSweeper отличного от CodeSweeper установленного по умолчанию изменения сохраняются только в текущем документе.
Использование другого CodeSweeper:
1. Щелкните на стрелку указывающую вниз на кнопке CodeSweeper или выберите Tools > CodeSweeper и из списка выберите необходимый вам CodeSweeper.
Имейте в виду, что CodeSweeper форматирует целый документ и произведенные действия уже нельзя отменить.
2. Щелкните Run CodeSweeper. Документ отформатирован.
Создание, редактирование и удаление CodeSweeper
Вы можете создавать новые CodeSweepers, редактировать существующие CodeSweepers и удалять устаревшие CodeSweepers, используя при этом диалоговое окно Setting (F8).
Создание нового CodeSweeper:
1. Откройте диалоговое окно Setting (F8).
2. Щелкните CodeSweeper, появиться окно CodeSweepers.
3. Щелкните New Profile (Новый Профиль), появиться диалоговое окно New CodeSweeper Profile.
4. Введите имя CodeSweeper и выберите тип: Allaire CodeSweeper или HTML Tidy CodeSweeper.
5. Щелкните Ok. CodeSweeper добавлен в список.
6. Следуйте нижеперечисленному руководству для редактирования CodeSweeper.
Редактирование:
1. В диалоговом окне Setting (F8) разверните CodeSweeper.
2. Разверните тот тип CodeSweeper, который вы хотите отрекдактировать: Allaire CodeSweeper или HTML Tidy CodeSweeper.
3. Выберите CodeSweeper, который вы хотите отредактировать и сделайте необходимые изменения в настройках.
4. Щелкните Ok.
Удаление:
1. В диалоговом окне Setting (F8) щелкните на CodeSweeper.
2. Выберете CodeSweeper, который вы хотите удалить из списка и щелкните Remove Profile. CodeSweeper будет удален без предупреждения.
Настройки CodeSweeper
Существует три вида настроек для CodeSweeper:
· Общие настройки (General Settings) и Специальные настройки (Tag-Specific Settings) могут быть установлены для каждого Allaire CodeSweeper.
· HTML Tidy настройки относятся только к HTML Tidy CodeSweeper.
Общие настройки (General Settings)
Вы можете установить ниже следующие правила форматирования для каждого Allaire CodeSweeper.
· Установите регистр для тега и атрибутивные имена. Вы можете выбрать как верхний или нижний регистр, так и сохранить регистр без изменений.
· Настройка имен событий формата включает дополнительную опцию, а именно смешанный регистр, который применим для имен событий JavaScript, таких как OnMouseOver. Если данный код в вашем документе правильный, выберете команду Preserve Case.
· Установите кавычки для значений.
· Пробелы между кодами убираются с помощью инструментов кода, установленных по умолчанию. Рекомендуется оставлять их как есть, отключая только при необходимости для отдельных тегов.
· Работайте в режиме "Silent Mode" во избежание предупреждений, которые может генерировать CodeSweeper. Вы можете использовать эту опцию для работы CodeSweeper в автоматическом режиме.
· Проверьте Write Errors в системном журнале Log Fife c целью обнаружения каких-либо ошибок, найденных CodeSweeper. Вы можете сами определить место системного журнала.
Щелкните Ok для сохранения настроек.

14. Специальные настройки (Tag-Specific Settings).
Широкий выбор опций существует для индивидуальных тегов, содержащихся в каждом Allaire CodeSweeper. Если вы устанавливаете форматирование "All Other Tags", то это правило будет действовать в отношении каждого тега, появляющегося в документе и не состоящего в списке.
· Вставка команды с новой строки для первого и последнего тегов.
· Установка отступа с помощью таба или пробелов - разделитель строк вставиться автоматически для каждой новой строки.
· Запуск разделителя строк для вложенных под - тегов (sub tags).
· Override the general trim white space setting by preventing trimming of white space around the selected tag.
· Оставляет выбранный тег неизмененным при активизации CodeSweeper.
· Отделение, удаление тега из документа - это удобно для избавления от ненужных тегов, вставленных генератором кода.

15. Установка правил для тега.
1. Выберите тег из списка Tag Specific Settings в диалоговом окне CodeSweeper Settings.
2. Измените специальные настройки.
3. Щелкните Update Tag (Обновить Тег) для сохраннения настроек данного тега.
Добавление тега:
1. Щелкните кнопку Add Tag в диалоговом окне CodeSweeper Settings.
2. Введите имя тега и щелкните Ok.
3. Измените настройки тега и щелкните Update Tag для сохранения настроек.
Удаление тега:
1. Выберите тег из списка Tag Specific Settings в диалоговом окне CodeSweeper Settings.
2. Щелкните Remove Tag (Удалить Тег).
3. Щелкните Ok для закрытия диалогового окна.
Настройки HTML Tidy
Адрес веб-сайта автора HTML Tidyhttp://www.w3.org/People/Raggett/tidy/.Вы можете войти на этот веб-сайт из панели HTML Tidy Setting. Обратитесь к данному сайту за более подробным описанием настроек HTML Tidy.
Создание собственного профиля
Вы можете создать ваш собственный настроечный конфигурационный файл и сохранить его с расширением .tdy в вашу папку \extensions\Codesweepers.

16. Форматирование страниц с помощью CSS.
Каскадные листы стилей (CSS) становятся все более важным компонентом веб-сайтов, поскольку они предоставляют много возможностей для дизайна и управления содержанием. Спецификация HTML-4.0 постоянно поддерживает их использование не смотря на огроничения поддержки Каскадных листов стилей броузерами.
Листы стилей могут быть добавлены на любом этапе разработки сайта, но в идеале спецификация дизайна для сайта вводиться посредством листов стилей при этом отпадает необходимость кодирования и форматирования индивидуальных тегов. Еще более важным является то, что каскадные листы стилей позволяют разработчикам и авторам содержания, сконцентрироваться на проблемах организации и навигации путем отделения форматирования от содержания. По мере разработки сайта стили могут быть коренным образом изменены, добавлены и удалены, давая разработчику больше свободы (и времени) для достижения более высоких результатов в дизайне.

17. Терминология CSS.
Если вы новичок, то первое, что вам необходимо узнать - это термины используемые в работе со стилями. Правила стилей совпадают с HTML элементами, но между ними не всегда есть полное соответствие.
HTML теги содержат атрибуты со значениями, например:
<h1 align="center"><font size="+2" color="green">Some Text</font></h1>
Теги h1и fontсодержат атрибуты, чьи значения определяют место размещения, размер шрифта и цвет текста.
Листы стилей содержат правила, которые применяются к селекторам (selectors), использующим описания (declarations) для определения форматирования:
h1 { text-align : center; font-size : larger; color : Green; }
В данном примере селектор h1содержит описание, которое определяет расположение, размер шрифта и цвет текста. Если это единственное правило для h1, то каждый тег <h1>;будет отображать данное форматирование.
Каскадные листы стилей - сложный инструмент для четкого контроля за видом веб страниц, однако их правильное применение требует определенных навыков.
Вы можете начать с простых правил для общих элементов страниц и постепенно перейти к созданию более сложных стилей, по мере овладения техническими приемами. HomeSite Style Editor дает предварительный просмотр правил и их определения перед тем, как вставить их в документ. Вы можете посмотреть страницы целиком в броузере с тем, чтобы наглядно увидеть как взаимодействуют стили.
Использование редактора стилей (Style Editor)

<< назад...