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