Adobe Dreamweaver. Справка и учебные материалы. Официальное руководство пользователя Dreamweaver CC (Бонус - Глава 15)

Citation preview

---

ВЕРСТКА КОДА

15

Краткий обзор урока В ходе этого урока вы узнаете, как правильно верстать код и научитесь следующему:

•

выбирать элементы кода другим способом;

•

разворачивать и сворачивать записи кода;

•

верстать код с помощью подсказок;

•

использовать навигатор по коду, чтобы изучать и редактировать код каскадных таблиц стилей;

•

использовать представление Live Code (Интерактивный код), чтобы тестировать и обнаруживать ошибки динамического кода;

•

использовать режим Inspect (Проверка) для определения HTML-элементов и связанного форматирования;

•

открывать и редактировать связанные файлы.



2

Выполнение заданий займет около двух часов. Прежде чем приступить к работе, убедитесь, что вы скопировали папку Lesson15 на жесткий диск, как указано в начале книги.

Программа Dreamweaver известна как визуальный редактор HTML-кода, но инструменты верстки кода не остались без внимания и предлагают профессиональным программистам и разработчикам несколько компромиссных решений.

3

Обзор инструментов для работы с кодом •

Примечание. Если вы еще не скопировали файлы проекта с компакт-диска на компьютер, сделайте это сейчас. См. раздел «Начало работы» в начале книги.

•

Примечание. Если вы выполняете данный урок независимо от остальных, см. раздел «Быстрый старт» в начале книги. Затем выполняйте шаги этого упражнения.

4

УРОК 15

Верстка кода

Будучи лидером в области визуальной верстки HTML-кода, программа Dreamweaver позволяет пользователям создавать сложные веб-страницы и приложения, не касаясь и даже не видя кода, который выполняет всю работу «за кадром». Но для многих дизайнеров работа с кодом не только желание, но и необходимость. Но программа Dreamweaver также упрощает работу в представлении Code (Код), так же как и в режиме Design (Дизайн). Хотя в первую очередь программа ориентирована на визуальный дизайн, в ней доступны производительные инструменты для профессиональных верстальщиков и разработчиков. Фактически она помогает объединить всю команду веб-разработчиков, предоставляя единую платформу, которая позволяет справиться практически с любой необходимой задачей. Вы обнаружите, что зачастую конкретные задачи гораздо проще решить в представлении Code (Код), чем исключительно в режиме Design (Дизайн). В этом упражнении вы узнаете больше о том, как программа Dreamweaver упрощает работу с кодом. 1 В программе Dreamweaver откройте файл tips.html из корневой папки сайта. 2 Перейдите в представление Code (Код).

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 Прокрутите окно документа вниз и найдите следующий фрагмент кода:

Wash clothes in cold water

2 Нажав и удерживая кнопку мыши в начале строки кода, перетащите мышь по коду. Используя текстовый курсор описанным выше способом, вы можете выделить часть фрагмента кода или весь фрагмент. Однако данный способ может привести к ошибкам, в результате которых вы пропустите жизненно важные части кода. Иногда для выделения строк кода проще использовать нумерацию строк. 3 Щелкните мышью по номеру рядом со строкой кода

Wash clothes in cold water

.

6

УРОК 15

Верстка кода

Вся строка кода будет выделена. 4 Нажав и удерживая кнопку мыши на номере строки кода, перетащите мышь вниз, выделив четыре строки кода. Программа Dreamweaver выделит все четыре строки. Использование нумерации строк может сэкономить много времени и избежать ошибок при выделении, но не учитывает структуру элементов кода, которые могут начинаться и заканчиваться в середине строки. Селектор тегов обеспечивает лучший способ логического выделения структуры кода. Использование селектора тегов Один из самых простых и наиболее эффективных способов выделения кода, которым вы часто пользовались во время выполнения предыдущих уроков, состоит в использовании селектора тегов. 1 Прокрутите окно документа вниз и найдите фрагмент кода

Wash clothes in cold water

2 Установите текстовый курсор в любой позиции элемента

. Рассмотрите селектор тегов в нижней части окна документов.

Селектор тегов в представлении Code (Код) отображает тег

и все его родительские элементы так же, как и в режиме Design (Дизайн). Обратите внимание, что некоторые элементы отображаются серым цветом, что указывает на то, что они являются частью шаблона, вследствие чего заблокированы. 3 Выберите элемент 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 ⇒ Coding (Просмотр ⇒ Панели инструментов ⇒ Создание кода), чтобы отобразить одноименную панель. 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 Выделите первые три элемента неупорядоченного списка, начиная со строки

Wash clothes in cold water

. Эти элементы являются частью длинного списка советов в неупорядоченном списке виджета Accordion. Обратите внимание на маркеры выделения правее от номеров строк. Маркер ( ) означает, что выделенная область в настоящий момент развернута. 2 На панели Coding (Создание кода) щелкните мышью по значку ( ) или нажмите кнопку Collapse Selection (Свернуть выделенный код) ( ), чтобы свернуть выделенный фрагмент кода.

ADOBE DREAMWEAVER CC. ОФИЦИАЛЬНЫЙ УЧЕБНЫЙ КУРС

9

Выделенный фрагмент кода свернется, отображая только тег

. Вы также можете свернуть код на основе логических элементов, таких как ul или div. 3 Установите текстовый курсор в тег

. Нажмите кнопку Collapse Full Tag (Свернуть весь тег) ( ). Весь элемент ul в окне представления Code (Код) будет свернут, отображая только тег
и часть следующего тега. В любом случае код не будет удален или поврежден. Он все еще продолжает работать должным образом. Кроме того, в свернутом режиме код отображается только в представлении Code (Код) программы Dreamweaver. Во Всемирной паутине или другом приложении код отобразится без изменений. Чтобы развернуть фрагменты кода, воспользуйтесь обратным процессом, как это описано в следующем разделе.

Разворачивание фрагмента кода Свернутый код вы можете скопировать, вырезать или переместить, как и любой другой выделенный элемент. Вы можете развернуть элементы по отдельности или все вместе. 1 При необходимости установите текстовый курсор в свернутый элемент ul.  Совет. Вы также можете дважды щелкнуть мышью по свернутому коду, чтобы развернуть его.

10

УРОК 15 Верстка кода

Появится значок плюс/стрелка ( ), означающий, что код был свернут. Чтобы развернуть код, вы можете щелкнуть мышью по этому значку. 2 Щелкните по значку плюс/стрелка ( ) левее свернутого кода, чтобы развернуть его.

Windows

Macintosh

Элемент ul развернется, но три элемента li, свернутые ранее, останутся свернутыми. Программа Dreamweaver также позволяет развернуть весь код одновременно. 3 На панели Coding (Создание кода) нажмите кнопку Expand All (Развернуть все) ( ). Все свернутые элементы будут развернуты. В представлении Code (Код) код может быть добавлен, изменен или удален.

Добавление нового кода Представление Code (Код) используется не только для коррекции или поиска ошибок в коде. Это полностью функциональная среда, которая обладает множеством инструментов для профессиональных верстальщиков кода. Представление Code (Код) допускает не только цветовую дифференциацию разметки для упрощения чтения кода, но также поддерживает систему подсказок по коду на 10 различных веб-языках разработки, включая HTML, CSS, JavaScript и PHP. Подсказки по HTML-коду обширны и включают в себя поддержку каскадных таблиц стилей. В этом упражнении вы создадите гиперссылку для перехода к верхней части страницы, как это делали в уроке 10. 1 Откройте файл news.html. При необходимости перейдите к представлению Code (Код). 2 Прокрутите окно документа и вставьте текстовый курсор перед строкой кода Shopping green saves energy.

ADOBE DREAMWEAVER CC. ОФИЦИАЛЬНЫЙ УЧЕБНЫЙ КУРС

11

3 Введите символ . Открытый тег

завершен. Теперь вы можете создать гиперссылку. 8 Введите код