Table Of Content1 5 ВЕРСТКА
КОДА
Краткий обзор урока
В ходе этого урока вы узнаете, как правильно верстать код
и научитесь следующему:
• выбирать элементы кода другим способом;
• разворачивать и сворачивать записи кода;
• верстать код с помощью подсказок;
• использовать навигатор по коду, чтобы изучать
и редактировать код каскадных таблиц стилей;
• использовать представление Live Code (Интерактивный
код), чтобы тестировать и обнаруживать ошибки
динамического кода;
• использовать режим Inspect (Проверка) для
определения HTML-элементов и связанного
форматирования;
(cid:2)• открывать и редактировать связанные файлы.
Выполнение заданий займет около двух часов. Прежде чем
приступить к работе, убедитесь, что вы скопировали папку
Lesson15 на жесткий диск, как указано в начале книги.
2
Программа Dreamweaver известна как визуальный редактор HTML-кода,
но инструменты верстки кода не остались без внимания и предлагают
профессиональным программистам и разработчикам несколько
компромиссных решений.
3
Обзор инструментов для работы с кодом
• Примечание. Будучи лидером в области визуальной верстки HTML-кода, программа
Если вы еще не скопи- Dreamweaver позволяет пользователям создавать сложные веб-страницы
ровали файлы проекта и приложения, не касаясь и даже не видя кода, который выполняет всю
с компакт-диска на
работу «за кадром». Но для многих дизайнеров работа с кодом не только
компьютер, сделайте
желание, но и необходимость.
это сейчас. См. раздел
«Начало работы» в на-
Но программа Dreamweaver также упрощает работу в представлении
чале книги.
Code (Код), так же как и в режиме Design (Дизайн). Хотя в первую оче-
редь программа ориентирована на визуальный дизайн, в ней доступны
производительные инструменты для профессиональных верстальщиков
и разработчиков. Фактически она помогает объединить всю команду
веб-разработчиков, предоставляя единую платформу, которая позволяет
справиться практически с любой необходимой задачей.
• Примечание. Вы обнаружите, что зачастую конкретные задачи гораздо проще ре-
Если вы выполняете шить в представлении Code (Код), чем исключительно в режиме Design
данный урок неза- (Дизайн). В этом упражнении вы узнаете больше о том, как программа
висимо от остальных,
Dreamweaver упрощает работу с кодом.
см. раздел «Быстрый
старт» в начале книги. 1 В программе Dreamweaver откройте файл tips.html из корневой папки
Затем выполняйте
сайта.
шаги этого упраж-
нения. 2 Перейдите в представление Code (Код).
4 УРОК 15 Верстка кода
3 Выберите команду меню View ⇒ Code View Options (Просмотр ⇒ Па- • Примечание.
раметры представления кода) и изучите доступные пункты в открыв- Пункт меню Code
шемся подменю. View Options (Пара-
метры представления
кода) доступен только
в представлении
Code (Код).
Параметры представления кода
В меню Code View Options (Параметры представления кода) доступны сле-
дующие команды:
• Word Wrap (Перенос слов) — Переносит длинные строки кода с целью
заполнения окна документа, что упрощает чтение и редактирование
кода.
• Line Numbers (Номера строк) — Отображает номера у левого края
окна документа, упрощая поиск конкретной строки кода.
• Hidden Characters (Скрытые символы) — Отмечает значками перено-
сы и пробелы в коде, которые по умолчанию скрыты. Очень полезный
параметр для некоторых приложений, для которых переносы строк
и пробельные символы могут влиять на работоспособность кода.
• Highlight Invalid Code (Выделение недопустимого кода) — Визуально
помечает ошибки в коде.
• Syntax Coloring (Окрашивание синтаксиса) — Выполняет цветовую
дифференциацию кода, позволяющую быстро определять теги и про-
чую разметку в контенте.
• Auto Indent (Автоотступ) — Автоматически создает отступ у элементов
дочернего кода, чтобы повысить читабельность разметки.
• Syntax Error Alerts in Info Bar (Оповещение о синтаксических ошибках
в информационной панели) — Отображает предупреждения в верхней
части окна представления Code (Код), определяя и структурируя ошиб-
ки кода и указывая на строку, в которой обнаружена ошибка.
ADOBE DREAMWEAVER CC. ОФИЦИАЛЬНЫЙ УЧЕБНЫЙ КУРС 5
Доступные семь команд упрощают редактирование и повышают произ-
водительность при работе с кодом. Возле названий активных параметров
установлены флажки.
В большинстве случаев вы будете использовать команды Word Wrap
(Перенос слов), Line Numbers (Номера строк), Syntax Coloring (Окра-
шивание синтаксиса) и Syntax Error Alerts in Info Bar (Оповещение
о синтаксических ошибках в информационной панели).
4 При необходимости выберите пункты Word Wrap (Перенос слов),
Line Numbers (Номера строк), Syntax Coloring (Окрашивание син-
таксиса) и Syntax Error Alerts in Info Bar (Оповещение о синтакси-
ческих ошибках в информационной панели) меню, чтобы активиро-
вать соответствующие параметры.
Представления Code (Код) и Design (Дизайн) тесно интегрированы
и многие функции программы Dreamweaver работают идентично в обо-
их режимах. Например, вы можете использовать селектор тегов в режиме
Code (Код), чтобы быстрее и проще выделять элементы кода.
Выделение фрагментов кода
В программе Dreamweaver существует несколько способов взаимодей-
ствия с кодом и выделения его фрагментов в представлении Code (Код).
Использование нумерации строк
Вы можете использовать текстовый курсор, чтобы взаимодействовать
с кодом несколькими способами.
1 Прокрутите окно документа вниз и найдите следующий фрагмент
кода:
<li>Wash clothes in cold water</li>
2 Нажав и удерживая кнопку мыши в начале строки кода, перетащите
мышь по коду.
Используя текстовый курсор описанным выше способом, вы можете вы-
делить часть фрагмента кода или весь фрагмент. Однако данный способ
может привести к ошибкам, в результате которых вы пропустите жизнен-
но важные части кода. Иногда для выделения строк кода проще исполь-
зовать нумерацию строк.
3 Щелкните мышью по номеру рядом со строкой кода <li>Wash
clothes in cold water</li>.
6 УРОК 15 Верстка кода
Вся строка кода будет выделена.
4 Нажав и удерживая кнопку мыши на номере строки кода, перетащите
мышь вниз, выделив четыре строки кода.
Программа Dreamweaver выделит все четыре строки. Использование ну-
мерации строк может сэкономить много времени и избежать ошибок при
выделении, но не учитывает структуру элементов кода, которые могут
начинаться и заканчиваться в середине строки. Селектор тегов обеспечи-
вает лучший способ логического выделения структуры кода.
Использование селектора тегов
Один из самых простых и наиболее эффективных способов выделения
кода, которым вы часто пользовались во время выполнения предыдущих
уроков, состоит в использовании селектора тегов.
1 Прокрутите окно документа вниз и найдите фрагмент кода <li>Wash
clothes in cold water</li>
2 Установите текстовый курсор в любой позиции элемента <li>. Рас-
смотрите селектор тегов в нижней части окна документов.
Селектор тегов в представлении Code (Код) отображает тег <li> и все
его родительские элементы так же, как и в режиме Design (Дизайн). Об-
ратите внимание, что некоторые элементы отображаются серым цветом,
что указывает на то, что они являются частью шаблона, вследствие чего
заблокированы.
3 Выберите элемент li (т.е. щелкните мышью по тегу <li>) в селекто-
ре тегов.
Весь элемент li, включая его содержимое, будет выделен в представле-
нии Code (Код). Теперь его можно скопировать, вырезать, переместить
или свернуть. Селектор тегов отчетливо отображает структуру кода, даже
без использования представления Code (Код). Элемент li является до-
черним по отношению к элементу ul, который в свою очередь является
ADOBE DREAMWEAVER CC. ОФИЦИАЛЬНЫЙ УЧЕБНЫЙ КУРС 7
дочерним по отношению к элементу div, который является дочерним по
отношению к элементу div#Accordion1 и т. д. Последний содержит эле-
мент li и весь код виджета jQuery Accordion со всем его содержимым.
Хотя выделение элемента li вручную в представлении Code (Код) осу-
ществить достаточно легко, выделение всего списка или элемента div,
который его содержит, выполнить труднее. Однако с помощью селектора
тегов эту рутинную работу можно выполнить путем одного лишь щелчка
мыши.
4 Выберите элемент ul в селекторе тегов.
Код списка, расположенного под заголовком «At Home», будет выделен.
5 Выберите элемент div в селекторе тегов.
Код содержимого верхней панели виджета Accordion будет выделен.
6 Выберите элемент div#Accordion1 в селекторе тегов.
Код всего виджета Accordion будет выделен. Используя селектор тегов,
вы можете определять и выделять структуру любого элемента на страни-
це, но выделение родительского тега осуществляется вручную. Програм-
ма Dreamweaver содержит специальный инструмент для автоматическо-
го выполнения данной операции.
Выделение родительских тегов
С помощью кнопки Select Parent Tag (Выделить родительский тег) в ре-
жиме Code (Код) выделить иерархическую структуру вашей страницы
очень просто.
1 При необходимости выберите команду меню View ⇒ Toolbar ⇒ Cod-
ing (Просмотр ⇒ Панели инструментов ⇒ Создание кода), чтобы
отобразить одноименную панель.
2 Установите текстовый курсор в любой позиции текста «Wash clothes
in cold water», заключенного в элемент li.
3 Нажмите кнопку Select Parent Tag (Выделить родительский тег) ( )
на панели Coding (Создание кода).
Элемент li будет выделен.
8 УРОК 15 Верстка кода
4 Нажмите кнопку Select Parent Tag (Выделить родительский тег) ( )
еще раз или нажмите сочетание клавиш Ctrl+[/Cmd+[ (левая квадрат-
ная скобка).
Весь элемент ul будет выделен.
5 Нажмите кнопку Select Parent Tag (Выделить родительский тег) ( )
еще раз.
Весь элемент div будет выделен.
6 Нажмите сочетание клавиш Ctrl+[/Cmd+[ (левая квадратная скоб-
ка), чтобы выделить элемент div#Accordion1.
Каждый раз, когда вы щелкаете мышью по указанной кнопке или нажи-
маете указанное сочетание клавиш, программа Dreamweaver выделяет
родительский элемент выделенного в настоящий момент элемента. Вы-
делив его, работа с длинными фрагментами кода может быть неудобной.
Представление Code (Код) предлагает другие удобные функции, с помо-
щью которых вы можете свернуть объемные фрагменты кода, что упро-
стит работу с ними.
Сворачивание фрагментов кода
Сворачивание кода упрощает процесс копирования или перемещения
больших фрагментов кода. Фрагменты кода также сворачиваются, когда
верстальщики и разработчики ищут конкретные элементы или разделы
страницы и хотят временно скрыть ненужные в данный момент фрагмен-
ты кода. Код можно свернуть либо посредством выделения, либо с по-
мощью логического элемента. Используйте кнопки Collapse Selection
(Свернуть выделенный код) ( ) и Expand All (Развернуть все) ( ) на
панели инструментов у правого края окна представления Code (Код),
чтобы сворачивать и разворачивать фрагменты кода.
1 Выделите первые три элемента неупорядоченного списка, начиная со
строки <li>Wash clothes in cold water</li>.
Эти элементы являются частью длинного списка советов в неупорядо-
ченном списке виджета Accordion. Обратите внимание на маркеры вы-
деления правее от номеров строк. Маркер ( ) означает, что выделенная
область в настоящий момент развернута.
2 На панели Coding (Создание кода) щелкните мышью по значку ( )
или нажмите кнопку Collapse Selection (Свернуть выделенный код)
( ), чтобы свернуть выделенный фрагмент кода.
ADOBE DREAMWEAVER CC. ОФИЦИАЛЬНЫЙ УЧЕБНЫЙ КУРС 9
Выделенный фрагмент кода свернется, отображая только тег <li>.
Вы также можете свернуть код на основе логических элементов, таких
как ul или div.
3 Установите текстовый курсор в тег <ul>. Нажмите кнопку Collapse
Full Tag (Свернуть весь тег) ( ).
Весь элемент ul в окне представления Code (Код) будет свернут, ото-
бражая только тег <ul> и часть следующего тега. В любом случае код
не будет удален или поврежден. Он все еще продолжает работать долж-
ным образом. Кроме того, в свернутом режиме код отображается только
в представлении Code (Код) программы Dreamweaver. Во Всемирной
паутине или другом приложении код отобразится без изменений. Чтобы
развернуть фрагменты кода, воспользуйтесь обратным процессом, как
это описано в следующем разделе.
Разворачивание фрагмента кода
Свернутый код вы можете скопировать, вырезать или переместить, как
и любой другой выделенный элемент. Вы можете развернуть элементы
по отдельности или все вместе.
1 При необходимости установите текстовый курсор в свернутый эле-
мент ul.
(cid:2) Совет. Вы так- Появится значок плюс/стрелка ( ), означающий, что код был свернут.
же можете дважды Чтобы развернуть код, вы можете щелкнуть мышью по этому значку.
щелкнуть мышью по
свернутому коду, чтобы 2 Щелкните по значку плюс/стрелка ( ) левее свернутого кода, чтобы
развернуть его. развернуть его.
10 УРОК 15 Верстка кода
Windows Macintosh
Элемент ul развернется, но три элемента li, свернутые ранее, останутся
свернутыми. Программа Dreamweaver также позволяет развернуть весь
код одновременно.
3 На панели Coding (Создание кода) нажмите кнопку Expand All (Раз-
вернуть все) ( ).
Все свернутые элементы будут развернуты.
В представлении Code (Код) код может быть добавлен, изменен или
удален .
Добавление нового кода
Представление Code (Код) используется не только для коррекции или
поиска ошибок в коде. Это полностью функциональная среда, которая
обладает множеством инструментов для профессиональных верстальщи-
ков кода. Представление Code (Код) допускает не только цветовую диф-
ференциацию разметки для упрощения чтения кода, но также поддержи-
вает систему подсказок по коду на 10 различных веб-языках разработки,
включая HTML, CSS, JavaScript и PHP.
Подсказки по HTML-коду обширны и включают в себя поддержку ка-
скадных таблиц стилей. В этом упражнении вы создадите гиперссылку
для перехода к верхней части страницы, как это делали в уроке 10.
1 Откройте файл news.html. При необходимости перейдите к представ-
лению Code (Код).
2 Прокрутите окно документа и вставьте текстовый курсор перед стро-
кой кода <h2>Shopping green saves energy</h2>.
ADOBE DREAMWEAVER CC. ОФИЦИАЛЬНЫЙ УЧЕБНЫЙ КУРС 11
