Познавательное чтиво

17 Июн

Оформление исходного кода

Работая в текстовом режиме со встроенным редактором, мы можем изменять принципы, которыми руководствуется Dreamweaver при оформлении кода. Можно изменить цветовые оттенки, которыми выделяются служебные слова, можно настроить автоматический перенос строк и многие другие параметры. Речь идет только о том, что видим мы — создатели и разработчики. Все, о чем мы сейчас будем говорить, никоим образом не отразится на внешнем виде страницы, на том, что будут видеть ее посетители. Это только для нас, чтобы нам было удобно при работе с исходным кодом в Dreamweaver.

Для начала займемся подсветкой. Чтобы изменить цвета, назначенные по умолчанию, надо зайти в настройки Dreamweaver. Они вызываются по команде меню Edit | Preferences или с помощью комбинации клавиш <Ctrl>+<U>. Я думаю, что вы уже выучили эту команду наизусть. Если нет, у вас еще будет возможность это сделать — слишком много полезных свойств программы настраивается с помощью этого диалогового окна. Для настройки цвета кода в редакторе Dreamweaver выберите в диалоговом окне настроек Preferences категорию Code Coloring в списке слева. После этого справа появятся необходимые нам параметры (рис. 4.11).

clip_image002

Рис. 4.11. Цветовое оформление исходного кода можно подобрать по своему вкусу

в настройках Dreamweaver

Представьте себе, сколько различных документов можно создавать и редактировать в Dreamweaver MX! От ASP до WML — всего 23 типа, включая привычный и родной HTML. И для каждого из них программа способна поддерживать уникальный набор цветов для оформления.

Примечание

Формат WML (Wireless Markup Language) — язык разметки для мобильных устройств. Это специальная разновидность формата XML, которая используется для создания Web-страниц, которые можно просматривать с помощью сотовых телефонов, карманных компьютеров и других мобильных устройств.

Сейчас мы пока можем только выбрать любой тип документа и назначить ему цвет фона с помощью кнопки Default Background. Надо ли говорить, что сегодня, в век торжества Windows, по умолчанию таким цветом является белый? Существует мнение, что для человеческого глаза на самом деле более приятным и полезным является другой вариант — синий. Разумеется, на синем фоне лучше всего будут смотреться буквы не черного, а белого или какого-нибудь яркого оттенка. Но для этого надо копнуть глубже, то есть изменить цветовую схему. Чтобы отредактировать цвет букв для тегов и других служебных слов, выберите тип документа в списке Document Туре, а затем нажмите кнопку Edit Coloring Scheme. Откроется окно Edit Coloring Scheme for HTML (рис. 4.12). Имейте в виду, что вместо HTML в заголовке окна может стоять обозначение другого формата — в зависимости от того, для какого типа документов вы настраиваете цветовую схему.

clip_image004

Рис. 4.12. Для различных типов документа можно настраивать свой набор цветов, которыми будут выделяться различные служебные слова

Отметьте, что в списке Styles for в левом верхнем углу можно выбрать различные группы слов для данного типа документов. К примеру, для HTML- страницы такими группами считаются теги ColdFusion, комментарии CSS, свойства CSS, селекторы CSS, функции JavaScript — и так далее, всего 34 вида. Различные теги HTML, к примеру, комментарии и ссылки, также относятся к разным группам. Чтобы посмотреть на параметры их оформления, выберите нужную группу в списке Styles for и взгляните на ее настройки справа от списка:

□ Text Color — цвет текста для этой группы. Его можно изменить, щелкнув по кнопке-индикатору и выбрав оттенок из раскрывающейся палитры. А можно набить шестнадцатеричное значение цвета в текстовом поле.

□ Background Color — цвет фона для данной группы. По умолчанию, все теги имеют один и тот же фон, являющийся общим фоном для всего документа. Но, благодаря параметру Background Color, его можно назначать индивидуально — для пущего шика или выделения особо важных тегов.

□ Три кнопки В, I и U позволяют выбирать начертание текста — полужирное, курсивом и подчеркнутое соответственно.

Посмотреть на общее действие параметров можно в текстовой области Preview, которая расположена в нижней части экрана. Там находится образец кода, в котором можно найти все или практически все группы слов, для которых возможно отдельно настраивать оформление. Кстати, если щелкнуть мышью на любом слове в этом образце, то в списке Styles for будет автоматически выделена группа, к которой относится это слово. Используйте этот прием для быстрого опознания нужных групп!

Leave a Reply

© 2012 Познавательное чтиво | Entries (RSS) and Comments (RSS)