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