Dreamweaver — это отличный редактор WYSIWYG , но если вы не заинтересованы в написании веб-страниц в среде «то, что вы видите, то и получаете», вы все равно можете использовать Dreamweaver, потому что это также отличный текстовый редактор. Но в редакторе кода Dreamweaver есть множество функций, которые не учитываются, потому что основное внимание уделяется «представлению дизайна» или редактору WYSIWYG.
Как попасть в Dreamweaver Code View
Если вы никогда ранее не использовали Dreamweaver в качестве редактора HTML, возможно, вы даже не заметили три кнопки в верхней части страницы: « Код» , « Разделение» и « Дизайн» . Dreamweaver запускается по умолчанию в режиме «Дизайн» или в режиме WYSIWYG. Но легко перейти к просмотру и редактированию кода HTML. Просто нажмите на кнопку Код . Или перейдите в меню « Вид» и выберите « Код» .
Если вы только учитесь писать HTML или хотите понять, как ваши изменения повлияют на ваш документ, вы можете одновременно открыть представление кода и представление дизайна. Прелесть этого метода в том, что вы можете редактировать и в обоих окнах. Таким образом, вы можете написать код для своего тега изображения в HTML, а затем использовать представление конструктора, чтобы перетащить его в другое место на странице.
Для просмотра обоих одновременно:
- Нажмите на кнопку « Разделить» (между кодом и дизайном ).
- В меню « Вид» выберите « Код и дизайн».
Как только вы сможете использовать Dreamweaver для редактирования своего HTML-кода, вы можете изменить настройки, чтобы открыть Dreamweaver в представлении кода по умолчанию. Самый простой способ — сохранить представление кода в качестве рабочего пространства. Dreamweaver откроется в последнем рабочем пространстве, которое вы использовали. Если этого не произойдет, просто перейдите в меню «Окно» и выберите нужную рабочую область.
Параметры просмотра кода
Dreamweaver настолько гибок, потому что у него так много способов настроить его и заставить работать так, как вы хотите. В окне параметров можно настроить цвета, форматирование кода, подсказки кода и параметры перезаписи кода. Но вы также можете изменить некоторые специальные параметры в самом представлении кода.
Как только вы перейдете в режим просмотра кода, на панели инструментов появится кнопка « Параметры просмотра» . Вы также можете просмотреть параметры, перейдя в меню « Вид» и выбрав « Параметры просмотра кода». Варианты:
- Word Wrap — оборачивает HTML-код, чтобы вы могли просматривать его без горизонтальной прокрутки. Обратите внимание, что эта опция не вставляет возврат каретки в ваш код, она просто отображает код, чтобы его было легче читать.
- Номера строк — отображает номера строк вдоль стороны кода. Он показывает символ переноса строк для строк, которые переносятся дольше, чем окно просмотра.
- Скрытые символы — отображает специальные символы вместо пробелов, которые будут отображаться на веб-странице. Например, точка заменяет пробел, двойной шеврон заменяет каждую вкладку, а маркер пика или абзаца заменяет каждый разрыв строки.
- Выделите неверный код — выделите HTML, который является неправильным, желтым цветом. Если вы выберете желтую метку, инспектор свойств подскажет, как ее исправить.
- Синтаксис Coloring — включает или выключает цветовое кодирование вашего кода. Вы изменяете цвета вашей цветовой кодировки в разделе раскраски кода в настройках.
- Auto Indent — делает ваш код отступом автоматически после возврата каретки, если код над ним имеет отступ. Вы можете изменить размер отступа, изменив размер вкладки в разделе форматирования кода в настройках.
Редактирование HTML-кода в Dreamweaver Code View
HTML-код легко редактировать в представлении кода Dreamweaver. Просто начните вводить свой HTML. Но Dreamweaver предоставляет вам некоторые дополнительные возможности, которые выходят за рамки простого редактора HTML. Когда вы начинаете писать тег HTML, вы набираете < . Если вы сделаете паузу сразу после этого символа, Dreamweaver покажет вам список тегов HTML . Это так называемые подсказки кода. Чтобы сузить выбор, начните вводить буквы — Dreamweaver сузит раскрывающийся список до тега, который соответствует тому, что вы печатаете.
Если вы новичок в HTML, вы можете просмотреть список тегов HTML и выбрать различные, чтобы увидеть, что они делают. Dreamweaver продолжит запрашивать атрибуты после того, как вы введете тег. Например, если вы введете <i , Dreamweaver перейдет к HTML-тегу <i>, а другие теги, начинающиеся с I, будут следовать. Если вы продолжите вводить букву m , Dreamweaver сузит ее до тега <img>.
Но подсказки кода не заканчиваются на тегах. Вы можете использовать подсказки кода для вставки:
Если подсказки кода не появляются, вы можете нажать Ctrl-пробел (Windows) или Cmd-пробел (Macintosh), чтобы отобразить их. Наиболее распространенная причина, по которой подсказка кода может не появиться, — это то, что вы переключились в другое окно перед завершением тега. Поскольку Dreamweaver отключает ввод символа < , если вы выйдете из окна и вернетесь, вам придется заново запускать подсказки кода.
Вы можете отключить меню подсказок кода, нажав клавишу выхода.
После того, как вы ввели открывающий HTML-тег, вам нужно его закрыть. Dreamweaver делает это естественным путем. Если вы введете опцию « Закрыть теги», которая лучше всего соответствует вашим потребностям.
Если вы не совсем готовы переключиться на редактирование своих страниц в HTML, но хотите посмотреть, как код написан, попробуйте инспектор кода. Это открывает HTML-код в отдельном окне. Он работает так же, как представление кода, и, по сути, представляет собой отсоединяемое окно просмотра кода для текущего документа. Чтобы открыть инспектор кода, перейдите в меню « Окно» и выберите « Инспектор кода» или нажмите клавишу F10 на клавиатуре.
Dreamweaver отформатирует HTML-код так, как вы хотите, чтобы он отображался. Например, если вы используете 3 пробела для отступа, но никогда не отступаете от тегов IMG, вы можете указать эту информацию о форматировании в опциях перезаписи кода. Затем перейдите в меню « Команды» и выберите « Применить исходное форматирование» . Это отличный способ перевести код, написанный кем-то еще, в привычный вам формат.
Функция, о которой многие HTML-кодеры не знают или не используют, — это возможность свернуть HTML-код. Это не удаляет теги из документа, а просто удаляет их из поля зрения, чтобы они не отвлекали вас от работы. Чтобы свернуть ваш код:
- Выберите раздел кода, который вы хотите скрыть.
- В Edit меню выберите Collapse Выбор из сворачивание кода подменю
Более простой способ — выбрать код, а затем щелкнуть значки свертывания кода, которые появляются в желобе. Вы также можете щелкнуть правой кнопкой мыши по выбранному коду и выбрать « Свернуть выделение» .
Если вы хотите скрыть все, кроме того, что выделено, выберите Свернуть вне выделения в любом из указанных выше способов.
Чтобы развернуть свернутый код, просто дважды щелкните по нему. Это открывает код и выбирает его. Затем вы можете переместить этот выбор или удалить его или добавить дополнительные теги вокруг него.
Вы можете использовать функцию свертывания и развертывания постоянно на страницах, где вы не хотите редактировать внешний шаблон. Вы просто выбираете область содержимого, которую хотите редактировать, и сверните снаружи. Затем напишите свой HTML. Вы все еще можете просмотреть страницу в режиме конструктора или просмотреть ее в браузере. Свернутый код не удаляется из документа, а просто скрывается от глаз. Вы также можете использовать его, когда работаете над серией предметов. Когда вы закончите один, сверните его. Вы знаете, что вы сделали, когда не отображается код.