Главная   Ссылки    Код баннера   

Редакторы:    Текстовые    Визуальные    Графические    Векторные    3D-графика
Самоучители:     GoLive    Homesite     Amaya   

Учебник Adobe Golive


1 2 3 4 5 ... 7 8 9 10 11 12 13 14 15 16 17 18 19



Редактирование HTML-кода


В режиме Source (Исходный код) вы можете просматривать HTML-код своего документа, проверять синтаксис HTML, исправлять ваш код или строить Web-страницы с самого начала, используя только HTML. Работа в режиме исходного кода подобна работе в текстовом редакторе HTML. Вы можете создавать новый документ и открывать уже существующие в Adobe GoLive, HTML или текстовые документы. Вы можете печатать или вставлять текст из других документов, а также производить и сохранять изменения.


Во время работы в режиме Source (Исходный код), вы можете отбуксировывать пиктограммы HTML-элементов из Objects Palette (Палитра объектов) в текст вашего HTML-кода и использовать их как редактируемые теговые шаблоны. После того как вы вставали элемент, вы можете редактировать его атрибуты и значения атрибутов, в то время как в окне будут отображаться вводимые данные и основные ошибки.

Точно также можно перетягивать страницы или URL из окна сайта, чтобы создать ссылку. В режиме Source (Исходный код) нужно применять базовые команды для форматирования текста из меню Туре (Тип) к выделенному тексту на вашей странице. Чтобы отформатировать текст, в режиме Source (Исходный код) —— реализуйте одно из перечисленных действий:

  • - либо выделите абзац и потом выберите команду из одного из подменю Туре (Тип);
  • - либо дважды щелкните мышью на тексте, чтобы высветить одно слово, или же удерживая нажатой левую кнопку мышки, потащите ее, чтобы выделить большую область текста. Выберите нужную форматирующую команду из меню Туре (Тип).

    Есть несколько кнопок, которые отвечают за выделение синтаксиса и перенос текста. Возможно, вы уже видели их, путешествуя по рабочему окну. Давайте познакомимся с ними поближе.

  • - Кнопка Colorize Nothing (Выключение выделения синтаксиса) —— деактивирует выделение синтаксиса, показывая исходный код HTML в заданном по умолчанию цвете текста.
  • - Кнопка Colorize Detailed(Детальное выделение синтаксиса) —— активирует выделение синтаксиса.
  • - Кнопка Colorize Media and Links (Выделение средств информации и ссылок) —— высвечивает только графические изображения и ссылки на них.
  • - Кнопка Colorize URLs (Подсвечивание URL) —— высвечивает сноски на другое страницы и ресурсы в Web.
  • - Кнопка Colorize Server Side Code (Подсвечивание кода, выполняющегося на сервере) высвечивает на Web-странице текст кода, который выполняется на стороне сервера, например ASP-код.
  • - Кнопка Line Numbers (Отображать номера строк) —— показывает номера строк кода.


    В режиме исходного кода вы можете убедиться, что ваши Web-страницы содержат верный HTML-код. Встроенная проверка синтаксиса делает грамматический разбор вашего HTML-кода сообразно стандарту HTML и высвечивает предполагаемые ошибочные элементы.

    Если вы выбираете специфический HTML-код и начинаете проверку синтаксиса, вы можете отметить, какие теги и атрибуты не поддерживаются установками браузера или специфичны для Adobe GoLive. Когда вы выбираете установку браузера из меню согласования браузеров, лист несогласованности появляется в поле ошибок, выделяя потенциальные проблемы.

    Нажатием кнопки Start Check Syntax (Проверка синтаксиса) —— на панели инструментов исходного режима вы проверяете синтаксис на всей странице. В том случае, если ошибки в HTML-коде будут обнаружены, Adobe GoLive выделит их цветом.

    После правки кода еще раз нажмите на кнопку Check Syntax (Проверить синтаксис), чтобы удостовериться, что ни одной ошибки на вашей странице не осталось.
    Adobe GoLive позволяет вам обрабатывать HTML-код, который вы ввели сами, переформатируя его автоматически с абзацами и переносами строк, изменением положения тегов и атрибутов, и расставляя кавычки для значений атрибутов в соответствии с установками Web (о том, какую роль в Adobe GoLive играют "установки Web" будет рассказано немного позже).

    Чтобы обработать HTML-код, переключитесь в режим Layout (Макет) и выполните команду меню Edit | Rewrite Source Code (Редактирование | Перепиcать исходный код).


    Режим Source (Исходный код) обладает рядом свойств, которые влияют на проведение проверки HTML-кода, методы работы с ним и его внешний вид в окне редактора.

    Доступ к основным свойствам режима Source (Исходный код) можно получить из меню Edit | Preferences (Правка | Свойства), открыв вкладку Source (Исходный код).
    Установки, доступные на данной вкладке, включают и выключают поддержку drag and drop (режима перетаскивания объектов мышью) и контролируют, каким образом HTML-код появляется в Окне исходного кода. Панель предварительного просмотра в диалоговом окне показывает вам, как будет выглядеть текст с установками, которые, вы выбрали.


    Помимо вкладки основных свойств существуют еще ряд вкладок, предоставляющих доступ к свойствам режима редактирования исходного кода.

  • Browser Sets (Установки браузера) позволяют вам комбинировать браузеры и пересмотры спецификаций HTML в комплексных установках правил синтаксиса HTML. Установки, которые вы объединяете здесь, появляются в окне совместимости браузеров в режиме Source. Основанные на описаниях тегов в установках Web Adobe GoLive, эти свойства инструктируют встроенную проверку синтаксиса, указывают, какие правила ей использовать при проверке синтаксиса вашего исходного кода.
  • Colors (Цвета) позволяют вам включать и выключать подсвечивание синтаксиса и контролировать, как отдельные тега HTML и вложенный в них текст отображены в режиме редактирования исходного кода, когда пользователь активирует подсветку синтаксиса.


    Чтобы установить правила подсветки синтаксиса, выполните команду меню Edit| Preferences (Правка | Свойства) и щелкните мышью по пиктограмме Source (Исходный код). Затем следует выбрать пункт Colors (Цвета). Если, например, вы не хотите использовать подсветку синтаксиса, активируйте пункт None (He подсвечивать) в группе переключателей Code Coloring (Подсветка кода). Если же вы хотите, чтобы синтаксис все-таки выделялся редактором, используйте любой другой переключатель из этой группы, в зависимости от того, какую именно часть кода необходимо выделять цветом.


    Adobe GoLive позволяет вам работать как в режиме макета, так и в режиме редактирования исходного кода одновременно. Чтобы осуществить это, находясь в режиме макета, откройте окно исходного кода, выполнив команду меню Window | Source Code (Окно | Исходный код). Изменения, которые вы делаете в окне документа в режиме макета, немедленно отображаются в окне исходного кода и наоборот.


    Выпадающее меню окна. исходного кода предоставляет самые различные возможности.

  • Local Mode (Локальный режим) -отображает код только для текущего выделенного элемента на вкладке Layout (Макет) окна документа. Обычно окно исходного кода отображает код всего документа сразу. Локальный режим позволяет вам ограничить объем отображенного кода для более легкой правки.
  • Word Wrap (Перенос слов)- осуществляет перенос слов на границе окна исходного кода. Если вы измените размер окна, когда эта опция активирована, то содержимое строк будет переноситься в соответствии с новыми размерами палитры.
  • Display Line Numbers (Отображать, номера строк) доказывает номера строк кода.
  • Dim When Inactive (Затенить, когда неактивно) -делает содержимое окна нежадного кода затемненным, когда вы работаете на вкладке Layout (Макет) в окне документа. Затемнение выключается, когда вы возвращаетесь в окно исходного кода для дальнейшего редактирования.


    Окно исходного кода отображает лежащий в основе вашего документа HTML-код только тогда, когда режим макета окна документа активен.
    Для редактирования HTML-кода, помимо выше изложенных способов, вы можете воспользоваться вкладкой Outline Editor (Редактор эскиза). Он отображает элементы HTML-кода в иерархическом структурированном виде. Используя этот режим, вы можете генерировать чистый, правильный HTML не набирая ни единого элемента кода. Вы выбираете теги и атрибуты из меню или панели инструментов, перетягиваете объекты из палитры и используете кнопку Fetch URL (Пойти за URL), чтобы соединять страницы и графику. Вы можете построить Web-страницы с самого начала, улучшить ваш код и даже установить новые теги и атрибуты.


    Режим Outline Editor (Редактор эскиза) имеет свою панель инструментов. Используйте ее для вставки и редактирования HTML-элементов.

  • Кнопка New Tag (Новый тег) —— вставляет новый HTML тег под текущим выбранным тегом.
  • - Кнопка New Attribute (Новый атрибут) —— добавляет новый HTML атрибут в текущий выбранный тег.
  • - Кнопка New Text (Новый текст) —— вставляет новый блок текста HTML под выбранным тегом.
  • - Кнопка New Generic Item (Новый объект) —— вставляет пустой тег, так что вы можете ввести не HTML-код в ваш документ. Чаще всего эта возможность применяется для вставки тегов XML.
  • - Кнопка New Comment (Новый комментарий) —— вставляет новый комментарий HTML под выбранным тегом.
  • - Кнопка Toggle Binary (Переключить на парный формат) —— переключает формат тега с одиночного на парный и наоборот. Напомню, что парный тег содержит начальный и конечный теги, а непарный только начальный.



    Вы можете перетаскивать часто используемые элементы HTML из Objects Palette (Палитра объектов) и помещать их в окне Outline Editor (Редактор, эскиза), как вы бы сделали в режиме макета. После вставки элемента можете редактировать его атрибуты.

    Эскиз, доступный в режиме Outline Editor (Редактор эскиза)-содержит все элементы страницы HTML. Вы можете использовать эту структуру как шаблон и наполнять его своим содержанием.





    Вперёд


  • Используются технологии uCoz