Vvedenie_v_Veb_programmirovanien_2 / Vvedenie_v_Veb_programmirovanien_2

Приложение 1. Программное обеспечение Adobe Dreamweaver

Программа Adobe DreamWeaver поддерживает ведущие технологии и позволяет проектировать и создавать код с помощью ведущих технологий веб-разработки, включая HTML, XHTML, CSS, XML, JavaScript, Ajax, PHP, ПО Adobe ColdFusion® и ASP и др. Adobe DreamWeaver поддерживает следующие действия при создании сайта:

Управление сайтом. Подготовка редактора к работе с web-сервером. Работа с локальной и удаленной версией сайта. Работа с картой сайта.

Реализация структуры сайта. Соглашение об именах файлов. Создание главной страницы. Создание навигационной панели. Подготовка шаблонов. Подготовка библиотеки элементов.

Форматирование HTML-страниц. Элементы структурной разметки. Визуальное форматирование текста. Создание гипертекстовых ссылок. Создание списков. Создание и форматирование таблиц. Создание и использование стилей CSS. Импорт текста в формат HTML.

Вставка изображений и других элементов. Использование графических материалов. Создание карты ссылок на изображении. Вставка изменяющегося изображения. Определение интерактивных свойств объектов. Вставка Flash-кнопок. Использование подключаемых модулей.

Adobe Dreamweaver предоставляет веб-дизайнерам такие возможности, как интерактивный просмотр создаваемых страниц в браузере посредством функции интерактивного просмотра с сохранением доступа к коду. Изменения в коде немедленно отображаются на экране.

Dreamweaver позволяет создавать новые правила CSS на панели "Свойства" и получайть пояснения о месте применения каждого свойства в каскаде стилей.

Связанные файлы и навигатор по кодую. Щелкните любой файл на панели связанных файлов, чтобы увидеть его источник в представлении "Код" и родительскую страницу в представлении "Дизайн". Новая функция навигатора по коду показывает исходный код CSS, относящийся к выделенному фрагменту, и позволяет быстро получить к нему доступ.

Интерактивный просмотр, связанные файлы, навигатор по коду и подсказки при работе с JavaScript. Используйте в работе расширенные функции Dreamweaver по созданию кода, применяя популярные каркасы JavaScript, включая jQuery, Prototype и Spry. Просто прикрепите нужные внешние файлы JavaScript, и Dreamweaver автоматически отобразит подсказки по коду. Основные обновления: Подсказки по коду для каркасов Ajax и JavaScript—Эффективнее создавайте код JavaScript с помощью улучшенной поддержки основных объектов и простых типов данных JavaScript.

Adobe InContext Editing—Создавайте страницы в Dreamweaver так, чтобы конечные пользователи могли редактировать их без дополнительного программного обеспечения с помощью онлайн-услуги Adobe InContext Editing. Дизайнеры, работающие в Dreamweaver, могут ограничить возможности внесения изменений отдельными страницами, определенными областями и даже пользовательскими параметрами форматирования.

Интеграция Subversion означает возможность обновления сайта и проверки наличия изменений непосредственно в Dreamweaver. Программа Dreamweaver связана с программным обеспечением Subversion, системой контроля версий с открытым кодом, что позволяет обеспечить более мощные возможности возврата /извлечения документов.

Поддержка авторинга Adobe AIR—Создавайте приложения Adobe AIR на основе HTML и JavaScript непосредственно в Dreamweaver. Просматривайте приложения AIR, не выходя из программы Dreamweaver. Готовьте приложение Adobe AIR к развертыванию с помощью функций компоновки и подписи кода AIR. Новый интерфейс пользователя — Работайте быстрее и эффективнее во всех компонентах Adobe Creative Suite 4 с помощью общего интерфейса пользователя. Переключайтесь между рабочими средами с помощью переключателя рабочих пространств.

Интеграция между продуктами—Воспользуйтесь возможностями интеллектуальной интеграции и мощностью Dreamweaver CS4 и других инструментов Adobe, включая Adobe Flash® CS4 Professional, Fireworks® CS4, Photoshop® CS4 и Device Central CS4, за счет прямого взаимодействия продуктов линии. Вставляйте любые документы Photoshop PSD в Dreamweaver для создания смарт-объекта изображения, связанного с исходным файлом. Вносите изменения в исходное изображение и обновляйте его в Dreamweaver, не запуская программу Photoshop.

Встроенные средства создания кода—Воспользуйтесь встроенными подсказками для более быстрого и аккуратного создания кода в HTML, JavaScript, таких каркасах Ajax, как Spry, jQuery и Prototype, и на некоторых серверных языках.

Поддержка FLV—Легко интегрируйте файлы FLV в любые веб-страницы и создавайте соответствующий стандартам код. Создавайте проекты, воспроизводя фильмы FLV в новом режиме интерактивного просмотра.

Межплатформенная поддержка—Работайте так, как вам удобно: программное обеспечение Dreamweaver CS4 доступно для компьютеров Mac на базе PowerPC® и Intel®, а также для операционных систем Microsoft Windows XP и Windows Vista. Создавайте проекты в предпочитаемой вами системе, а затем передавайте их на другие платформы.

Создавайте веб-проекты нового поколения. Работайте с реалистичными представлениями CSS, JavaScript, SWF и динамического содержимого непосредственно в программе Dreamweaver. Быстро интегрируйте в свои страницы веб-виджеты сторонних производителей из наиболее распространенных каркасов JavaScript.

Dreamweaver позволяет пользователям просматривать веб-сайты в локально установленных веб-браузерах. Она также имеет инструменты управления сайтом таких как FTP / SFTP и WebDAV передачи файлов и синхронизации, возможность найти и заменить строки текста или код поисковые термины и регулярных выражений через весь сайт, и шаблоны функция, которая позволяет из одного источника Обновление общего кода и макета через все сайты без включения на стороне сервера или скриптов. Dreamweaver можно использовать сторонние "Расширения", чтобы расширить функциональные возможности приложения, за счет написанного другими веб-разработчиками (в основном в HTML и JavaScript). Dreamweaver, как и другие редакторы HTML, редактирует файлы локально затем передает их на удаленный веб-сервер FTP, SFTP или WebDAV.

Создание макетов страниц с помощью CSS

В макете страницы CSS для организации содержимого на веб-странице используется формат каскадных таблиц стилей. Основным строительным блоком макета CSS является тег HTML div, который ведет себя как контейнер для текста, изображений и других элементов страницы. При создании макета CSS теги Div размещаются на странице, в них добавляется содержимое, и они позиционируются в различных местах. Теги div можно позиционировать абсолютно (указав координаты x и y) или относительно (указав расстояние от этих тегов до других элементов страницы). Расположить теги div также можно, указав отступы, заполнения и поля, что по современным стандартам является предпочтительным методом.

Создание страниц c помощью CSS

Dreamweaver упрощает построение страниц с помощью макетов CSS, предоставляя заранее спроектированные макеты, которые работают в различных браузерах. Использование заранее спроектированных макетов является самым простым способом создания страницы с макетами CSS. Создавать макеты CSS также можно с помощью элементов Dreamweaver с абсолютным позиционированием (элементов AP). Элемент AP в Dreamweaver это элемент HTML-страницы, а точнее тег div или любой другой тег, которому назначено абсолютное позиционирование. Ограничение элементов AP Dreamweaver заключается в том, что, поскольку они имеют абсолютное позиционирование, их положение на странице не настраивается в соответствии с размером окна браузера.

Следующий пример демонстрирует страницу HTML, содержащую три отдельных тега div. один большой тег-контейнер и два других тега - тег боковой панели и тег основного содержимого внутри тега-контейнера.

А. Тег-контейнер Div B. Тег Div боковой панели C. Тег Div основного содержимого

Далее приведен код для всех трех тегов Div в HTML.

<h3>Sidebar Content</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>

<h1> Main Content </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo

convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo

pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>H2 level heading </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo

convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

В вышеприведенном примере ни к одному из тегов Div не прикреплены стили. Без заданных правил CSS каждый тег Div и его содержимое занимает на странице значение по умолчанию. Если каждый тег Div имеет уникальный идентификатор (как в вышеприведенном примере), то можно использовать идентификаторы для создания правил CSS, применение которых изменяет стиль и позиционирование тегов Div.

Следующее правило CSS, которое может размещаться либо в заголовке документа, либо во внешнем файле CSS, создает правила стилей для первого тега на странице, т.н. ≪тега-контейнера≫.

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

}

Правило #container задает для тега-контейнера ширину 780 пикселов, белый фон, отсутствие полей (с левой стороны страницы), сплошную черную границу, толщиной в 1 пиксел, и текст, выровненный по левому краю.

Результат применения правила к тегу-контейнеру Div следующий.

Тег-контейнер Div, 780 пикселов, без полей

А. Текст выровнен по левому краю B. Белый фон C. сплошная черная граница, толщиной в 1 пиксел

Следующее правило CSS создает правила стилей для тега Div боковой панели.

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

}

Правило #sidebar задает для тега Div боковой панели ширину 200 пикселов, серый фон, верхнее и нижнее

заполнение 15 пикселов, правое заполнение 10 пикселов и левое заполнение 20 пикселов. (Исходный порядок для отступов: сверху-справа-снизу-слева.) Кроме того, правило задает для тега Div боковой панели плавающее позиционирование float: left—это свойство сдвигает тег боковой панели Div налево по отношению к тегу- контейнеру Div. Результат применения правила к тегу Div боковой панели следующий.

тег Div боковой панели, float left

А. Ширина 200 пикселов B. Верхнее и нижнее заполнение, 15 пикселов

Наконец, правило CSS для тега-контейнера Div основного содержимого завершает макет.

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

Правило #mainContent задает для тега Div основного содержимого левое поле 250 пикселов, это означает, что

свободное пространство между левой стороной тега-контейнера Div и левой стороной тега Div основного содержимого равно 250 пикселам. Кроме того, правило задает интервалы в 20 пикселов справа, внизу и слева от тега Div основного содержимого. Результат применения правила к тегу Div основного содержимого следующий.

Тег Div основного содержимого, поле слева 250 пикселов.

А. 20 пикселов заполнения слева B. 20 пикселов заполнения справа C. 20 пикселов заполнения снизу

Полный код выглядит следующим образом.

<head>

<title>Untitled Document</title>

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

}

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

}

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

</style>

</head>

<body>

<h3>Sidebar Content</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>

<h1> Main Content </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo

convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo

pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>H2 level heading </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo

convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

</body>

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

Создание страницы с макетом CSS

При создании новой страницы в Dreamweaver можно создать страницу, которая уже содержит готовый макет CSS. Кроме того, можно создавать собственные макеты CSS и добавлять их в папку конфигураций.

Выберите ≪Файл≫ > /≪Создать≫/ ≪Создать документ≫/≪Пустая страница≫/

≪Тип страницы≫/HTML /≪Макет≫

выберите макет CSS, который планируется использовать. Окно ≪Просмотр≫ показывает макет и дает краткое описание выбранного макета. Предварительно созданные макеты CSS позволяют выбрать следующие типы колонок.

Fixed Ширина столбца задана в пикселях. Размер столбца не изменяется в зависимости от размера браузера или текстовых параметров посетителя сайта.

Liquid Ширина столбца задана в процентах от ширины браузера. Оформление меняется, когда посетитель сайта меняет ширину окна браузера, но не меняется в зависимости от параметров шрифта посетителем сайта.

5 Выберите тип документа из всплывающего меню ≪Тип документа≫.

6 Выберите положение макета CSS в ≪Макет CSS≫ во всплывающем меню.

Добавить в заголовок Добавляет таблицу стилей CSS для макета в заголовок создаваемой страницы.

Создание нового файла Добавляет CSS для макета в новую внешнюю таблицу стилей CSS и прикрепляет новую таблицу стилей к создаваемой странице.

Ссылка на существующий файл Позволяет указать существующий файл CSS, содержащий правила CSS, необходимые для макета. Этот параметр особенно полезен, если необходимо использовать один и тот же макет CSS (правила CSS, содержащиеся в одном файле) в нескольких документах.

7 Выполните одно из следующих действий.

• Если во всплывающем меню ≪Макет CSS≫ выбрано ≪Добавить в заголовок≫ (параметр по умолчанию), то щелкните ≪Создать≫.

• Если во всплывающем меню ≪Макет CSS≫ выбрано ≪Создать новый файл≫, то щелкните ≪Создать≫, а потом укажите имя для нового внешнего файла в диалоговом окне ≪Сохранить файл таблицы стилей как≫.

• Если во всплывающем меню ≪Макет CSS≫ выбрано ≪Ссылка на существующий файл≫, то добавьте внешний файл в текстовое поле ≪Присоединить файл CSS≫, щелкнув значок ≪Добавить таблицу стилей≫. По окончании нажмите кнопку ≪Создать≫ в диалоговом окне ≪Создать документ≫.

Примечание. Если выбран параметр «Ссылка на существующий файл», то в указанном файле должны содержаться правила для файла CSS.

Если поместить макет CSS в новый файл или привязать к существующему файлу, Dreamweaver автоматически привяжет файл к создаваемой HTML-странице.

8 При создании страницы, не связанной с макетом CSS, к ней также можно присоединить таблицы стилей CSS (необязательно). Для этого щелкните значок ≪Присоединить таблицу стилей≫ над областью ≪Присоединить CSS-файл≫ и выберите существующую таблицу стилей CSS.

Добавление заказных макетов CSS в список вариантов для выбора

1 Создайте HTML-страницу, содержащую макет CSS, который вы хотите добавить в список вариантов для выбора в диалоговом окне ≪Создание документа≫. CSS для макета должен размещаться в заголовке HTML- страницы.

Чтобы согласовать заказной макет CSS с другими макетами, которые поставляются с Dreamweaver,необходимо сохранить HTML файл с расширением «.htm».

2 Добавьте HTML-страницу в папку Adobe Dreamweaver ≪CS4\Configuration\BuiltIn\Layouts≫.

3 (необязательно) Добавьте изображение для просмотра макета (например файл с расширением ≪.gif≫ или ≪.png≫) в папку Adobe Dreamweaver ≪CS4\Configuration\BuiltIn\Layouts≫. Изображения по умолчанию,

поставляемые с Dreamweaver, это PNG-файлы шириной в 227 пикселов и высотой в 193 пиксела.

Назовите файл предварительного просмотра так же, как и HTML-файл, чтобы его можно было легко отследить. Например, если HTML-файл называется «myCustomLayout.htm», то назовите изображение для просмотра «myCustomLayout.png».

Работа с тегами Div

Вставка тегов Div

Теги Div можно использовать для создания блоков макета CSS и расположения их в документе. Это удобно, если существует таблица стилей СSS со стилями позиционирования, прикрепленная к документу. Dreamweaver позволяет быстро вставлять теги Div и применять к ним существующие стили.

1 В области ≪Окно документа≫ установите курсор вставки там, где необходим тег Div.

2 Выполните одно из следующих действий.

• Выберите меню ≪Вставка≫ > ≪Объекты макета≫ > ≪Тег Div≫

• Выберите категорию ≪Макет≫ на панели ≪Вставка≫, затем нажмите на кнопку ≪Вставить тег Div≫ .

3 Задайте любой из следующих параметров.

Вставка Позволяет выбрать местоположение для тега div и имя тега, если он не является новым тегом.

Класс Отображает класс стиля, примененного к тегу. При присоединении таблицы стилей классы, определенные в ней, появятся в списке. Используйте это всплывающее меню для выбора стиля, который нужно применить к тегу.

Идентификатор Позволяет изменять название, используемое для идентификации тега Div. ID, определенные в таблице стилей, появятся в списке при присоединении таблицы стилей. Коды тегов для блоков, содержащихся в документе, не входят в список.

Примечание. Dreamweaver предупреждает о введении кода тега, имеющегося в документе.

Создать правило CSS Открывает диалоговое окно создания правила CSS.

4 Нажмите кнопку ≪ОК≫.

Тег Div появляется в документе в качестве окна с текстом местозаполнителя. При наведении курсора на это окно Dreamweaver подсвечивает его. Если тег Div абсолютно позиционирован, он становится элементом АР. (Можно редактировать те теги Div,

которые не являются абсолютно позиционированными.)

Редактирование тегов Div

После вставки тега Div можно управлять им и добавлять к нему содержимое.

Примечание. Абсолютно позиционированные теги Div становятся элементами AP.

Границы тегов Div видимы в момент их назначения и при выбранном параметре ≪Контур макета CSS≫.

(Параметр ≪Контур макета CSS≫ выбран по умолчанию в меню ≪Просмотр≫ > ≪Вспомогательные элементы≫.)

При наведении курсора на тег divDreamweaver подсвечивает этот тег. Цвет подсветки можно изменить, а также можно отключить выделение цветом.

При выделении тега Div можно просмотреть и изменить правила для него на панели стилей CSS. Также можно добавить содержимое к тегу Div, просто поместив курсор вставки внутрь тега div и добавив содержимое таким же образом, как добавляется содержимое в страницу.

Отображение и изменение правил, применяемых к тегу Div

1 Выберите одно из следующих действий для выделения тега Div.

• Нажмите на границу тега Div.

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

• Щелкните внутри тега Div и дважды нажмите ≪Ctrl≫+≪A≫ (Windows) или ≪Command≫+≪A≫ (Macintosh).

• Щелкните внутри тега Div, затем выделите тег Div из селектора тегов, расположенного внизу области

≪Окно документа≫.

2 Если панель стилей CSS не открыта, выберите меню ≪Окно≫ > ≪Стили CSS≫ и откройте ее. На панели появятся правила, применимые к тегам Div.

3 Внесите необходимые изменения.

Для добавления содержимого поместите курсор вставки в тег Div

❖ Щелкните в любом месте внутри тега.

Измените текст местозаполнителя в теге Div

❖ Выделите текст, затем печатайте поверх него или нажмите клавишу ≪Delete≫.

Примечание. Добавлять содержимое к тегу Div можно точно таким же образом, как к странице.

Изменение цвета подсветки тегов Div

При перемещении курсора за край тега Div в представлении ≪Дизайн≫ Dreamweaver выделяет границы тега .

При необходимости можно включать/отключать подсветку и изменять ее цвет в диалоговом окне

≪Настройки≫.

1 Выберите ≪Правка≫ > ≪Настройки≫ (в Windows) либо Dreamweaver > ≪Настройки≫ (в Macintosh).

2 Выберите меню ≪Выделение цветом≫ из списка категорий слева.

3 Внесите любые из следующих изменений и нажмите кнопку ≪ОК≫.

• Для изменения цвета подсветки тегов Div выберите поле цвета по наведению указателя мыши, затем выберите цвет выделения из палитры цветов (или введите шестнадцатеричное значение цвета в текстовом поле).

• Для включения или выключения подсветки тегов Div поставьте или уберите флажок ≪Наведение мыши≫.

Примечание. Эти параметры влияют на все объекты, например на таблицы, подсвечиваемые Dreamweaver при наведении на них курсора.

Блоки макета CSS

Визуализация блоков макета CSS

Работая в представлении ≪Дизайн≫, можно делать видимыми блоки макета CSS. Блок макет CSS — это элемент HTML-страницы, который можно расположить в любом ее месте. Точнее блок макета CSS представляет собой либо тег Div, в котором отсутствует display:inline, или любой элемент страницы, содержащий объявления

CSS display:block, position:absolute или position:relative. Далее следует несколько примеров

элементов, считающихся блоками макета СSS в Dreamweaver.

• Тег Div

• Изображение с прикрепленным абсолютным или относительным положением_

• Тег a с прикрепленным стилем display:block

• Параграф с прикрепленным абсолютным или относительным положением_

Примечание. В целях улучшения изображения блоки макета CSS не содержат внутренних элементов (элементов, код которых включен в текстовую строку) или простых элементов блока, таких как параграфов.

Dreamweaver предоставляет вспомогательные элементы для отображения блоков макета CSS. Например, в процессе дизайна можно включить контуры, фон и модель окна для блоков макета CSS. Также можно отобразить подсказки, отображающие свойства выбранного блока макета CSS при наведении на него курсора.

Следующий список блоков макета CSS описывает то, что Dreamweaver отображает как вспомогательные элементы в каждом случае.

Контур макета CSS Отображает контуры всех блоков макета CSS на странице.

Фон макета CSS Отображает текущие цвета фона отдельных блоков макета CSS и скрывает остальные фоновые цвета и изображения, находящиеся на странице.

Всякий раз при применении наглядных пособий для отображения фона блоков макета CSS, Dreamweaver автоматически присваивает каждому блоку макета CSS собственный цвет фона. (Dreamweaver выбирает цвета с помощью алгоритма - назначить цвета самостоятельно невозможно.) Присвоенные цвета визуально различаются, они были разработаны для того, чтобы помочь дифференцировать блоки макета CSS.

Модель макета CSS Отображает модель фрагмента (с полями) выбранного блока макета CSS.

Визуализация блоков макета CSS

Вспомогательные элементы блоков макета CSS можно включать и отключать по мере необходимости.

Визуализация контуров блоков макета CSS

❖ Выберите меню ≪Просмотр≫ > ≪Вспомогательные элементы≫ > ≪Контур макета CSS≫

Отображение фона блоков макета CSS

❖ Выберите меню ≪Просмотр≫ > ≪Вспомогательные элементы≫ > ≪Фон макета CSS≫

Отображение модели фрагмента блока макета CSS

❖ Выберите меню ≪Просмотр≫ > ≪Вспомогательные элементы≫ > ≪Модель макета CSS≫

Также параметры вспомогательных элементов блока макета CSS можно вызвать, нажав кнопку ≪Вспомогательные элементы≫ панели инструментов документа.

Использование вспомогательных элементов с элементами блоков, не связанных с

макетом CSS

Таблицы стилей времени разработки можно использовать для отображения фона, границ или модели конфигурации для элементов, которые обычно не считаются блоками макета CSS. Для этого следует сначала создать таблицу стилей времени разработки, придающую атрибут display:block соответствующему элементу страницы.

1 Создайте отдельную таблицу стилей CSS (для этого выберите меню ≪Файл≫ > ≪Создать≫, в столбце категорий выберите ≪Базовый≫, в столбце страницы ≪Базовый≫ выберите ≪CSS≫, затем нажмите кнопку ≪Создать≫).

2 В новой таблице стилей создайте правила, присваивающие атрибут display:block тем элементам страницы, которые должны отображаться как блоки макета CSS.

Например, для отображения цвета фона параграфов и пунктов списка можно создать таблицу стилей со следующими правилами.

display:block;

}

li{

display:block;

}

3 Сохраните файл.

4 В представлении ≪Дизайн≫ откройте страницу, к которой хотите прикрепить новые стили.

5 Выберите меню ≪Формат≫ > ≪Стили CSS≫ > ≪Время разработки≫.

6 В диалоговом окне ≪Таблицы стилей времени разработки≫ нажмите на кнопку со знаком ≪Плюс≫ (+) над текстовым полем ≪Показывать только во время разработки≫, выберите только что созданную таблицу стилей и нажмите кнопку ≪ОК≫

7 Нажмите кнопку ≪ОК≫, чтобы закрыть диалоговое окно ≪Таблицы стилей времени разработки≫.

Теперь таблица стилей прикреплена к документу. Если таблица стилей была создана с использованием

предыдущего образца, всем параграфам и элементам списка в ней будет задан атрибут display:block, что позволит включать и отключать вспомогательные элементы блока макета для параграфов и элементов списка.

Работа с элементами AP

Сведения об элементах AP в Dreamweaver

Элемент AP (элемент с абсолютным позиционированием) - это элемент HTML-страницы, а точнее тег div или любой другой тег, которому назначено абсолютное позиционирование. Элементы AP могут содержать текст,изображения или любое другое содержимое, которое помещается в тело документа HTML.

В Dreamweaver можно использовать элементы AP при создании макета страницы. Можно размещать элементы AP впереди или позади друг друга, скрывать некоторые элементы AP, в тоже время отображая другие элементы, а также перемещать элементы AP по экрану. Можно разместить фоновое изображения в одном элементе AP, а потом поместить впереди его другой элемент AP, содержащий текст с прозрачным фоном.

Элементами AP обычно являются теги Div с абсолютным позиционированием. (Это виды элементов AP, которые Dreamweaver добавляет по умолчанию). Важно помнить, что любой элемент HTML (например, изображение) можно сделать элементом AP, назначив ему абсолютное позиционирование. Все элементы AP (а не только теги Div с абсолютным позиционированием) появляются на панели элементов AP.

Код HTML для элементов AP Div

Dreamweaver создает элементы AP с помощью тега Div. При рисовании элементов AP с помощью инструмента

≪Рисовать слой AP≫, Dreamweaver добавляет в документ тег Div и назначает значения Div и id (по умолчанию

≪apDiv1≫ для первого нарисованного объекта Div, ≪apDiv2≫ для второго и т.д.). Позже можно переименовать элемент AP Div с помощью панели элементов AP или инспектора свойств. Dreamweaver также использует встроенный CSS в заголовке документа, чтобы позиционировать элементы AP Div и назначать им точные измерения.

Ниже приведен пример HTML-кода для элемента AP Div.

<head>

<title>Sample AP Div Page</title>

<!--

#apDiv1 {

position:absolute;

left:62px;

top:67px;

width:421px;

height:188px;

z-index:1;

}

-->

</style>

</head>

<body>

</div>

</body>

</html>

Можно изменять свойства элементов Div AP (или любого элемента AP) на странице, в т.ч. числе координаты x, y, z-index (называемым также порядком наложения) и видимость.

Вставка слоя AP

Dreamweaver позволяет легко создавать и позиционировать на странице элементы AP Div. Можно также создавать вложенные элементы AP Div. При вставке элемента AP Div Dreamweaver по умолчанию отображает контур элемента AP Div в представлении ≪Дизайн≫ и подсвечивает блок, если навести на него курсор. Отключить наглядное пособие, показывающее контуры элемента AP Div (или любого элемента AP), можно в меню в меню ≪Просмотр≫ >

≪Вспомогательные элементы≫ > ≪Структуры элементов AP≫ и ≪Контур макета CSS≫. Также включить такие наглядные пособия, как модели фона и рамок для элементов AP.

После создания элемента AP Div добавить к нему содержимое можно, просто поместив курсор вставки в элемент AP Div, а потом добавить к нему содержимое таким же образом, каким добавляется содержимое на страницу.

Рисование одного или нескольких последовательных элементов AP Div

1 Нажмите кнопку ≪Рисовать слой AP≫ в категории ≪Макет≫ панели ≪Вставка≫ .

2 В представлении ≪Дизайн≫ области ≪Окно документа≫ выполните одно из следующих действий.

• выполните перетаскивание, чтобы нарисовать одиночный элемент AP Div.

• Выполните перетаскивание, удерживая клавишу ≪Control≫ (Windows) или ≪Command≫ (Macintosh), чтобы нарисовать несколько последовательных элементов AP Div. Пока клавиша ≪Ctrl≫ или ≪Command≫ нажата, можно продолжить рисование новых элементов AP Div.

Вставка элемента AP Div в определенное место документа

❖ Поместите курсор вставки в область ≪Окно документа≫, а потом выберите ≪Вставка≫ > ≪Объекты макета≫ >

≪Слой AP≫

Примечание. С помощью этой процедуры можно поместить тег элемента AP Div в любом месте области «Окно документа». Таким образом, визуализация элемента AP Div может влиять на другие элементы страницы, окружающие его (например, текст).

Поместите курсор вставки в элемент AP Div.

❖ Щелкните внутри границ элемента AP Div.

Границы элемента AP Div подсвечиваются, появляется маркер выделения, но сам элемент AP Div остается невыделенным.

Отображение границ элемента AP Div

❖ Выберите ≪Просмотр≫ > ≪Вспомогательные элементы≫ и установите флажок ≪Структуры элементов AP≫

или ≪Контур макета CSS≫.

Примечание. Выбор обоих параметров одновременно имеет один и тот же эффект.

Скрытие границ элемента AP

❖ Выберите ≪Просмотр≫ > ≪Вспомогательные элементы≫ и снимите оба флажка ≪Структуры элементов AP≫ и ≪Контур макета CSS≫.

Работа с вложенными элементами AP Div

Вложенный __________элемент AP Div - это элемент AP Div, код которого содержится внутри тегов другого элемента AP

Div. Например, следующий код показывает два невложенных и два вложенных элемента AP Div.

</div>

Графическое представление для любого набора элементов AP Div может выглядеть следующим образом:

В первом наборе тегов Div один Div размещается на вершине второго на странице. Во втором наборе apDiv4 находится внутри apDiv3. (Порядок наложения элементов AP Div можно поменять на панели элементов AP.) Вложение часто используется, чтобы сгруппировать вместе элементы AP Div. Вложенный элемент AP Div перемещается вместе с родительским Div и может быть настроен так, чтобы наследовать видимость родителя.

Можно включить параметр ≪Вложение≫, чтобы вложение происходило автоматически, если рисование элемента AP Div начинается внутри другого элемента AP Div. Чтобы рисовать внутри или над AP элементом Div, необходимо также отменить выбор параметра ≪Избегать перекрытия≫.

Рисование вложенного элемента AP Div

1 Убедитесь, что на панели ≪Элементы AP≫ снят флажок ≪Избегать перекрытия≫ (≪Окно≫ > ≪Элементы AP≫).

2 Нажмите кнопку ≪Рисовать слой AP≫ в категории ≪Макет≫ панели ≪Вставка≫ .

3 В представлении ≪Дизайн≫ области ≪Окно документа≫ выполните перетаскивание, чтобы нарисовать элемент AP Div внутри существующего элемент APа Div.

Если в установках элементов AP отключена ≪Вложенность≫, то выполните перетаскивание, удерживая клавишу ≪Alt≫ (Windows) или ≪Option-≫ (Macintosh), чтобы вложить AP Div внутри существующего AP Div.

Вложенные элементы AP Div могут выглядеть по-разному в различных браузерах. При создании вложенных AP Div в процессе разработки стоит часто проверять внешний вид страницы в различных браузерах.

Добавление вложенного элемента AP Div

1 Убедитесь, что флажок ≪Избегать перекрытия≫ снят.

2 Поместите курсор вставки внутрь существующего слоя AP в представлении ≪Дизайн≫ области ≪Окно документа≫, затем выберите ≪Вставка≫ > ≪Объекты макета≫ > ≪Слой AP≫.

Вложение существующего элемента AP внутрь другого с использованием панели ｫЭлементы APｻ

1 Выберите меню ≪Окно≫ > ≪Элементы AP≫, чтобы открыть панель ≪Элементы AP≫.

2 Выберите элемент AP на панели ≪Элементы AP≫, затем выполните перетаскивание элемента AP в элемент

AP назначения, удерживая клавишу ≪Ctrl≫ (Windows) или ≪Command≫ (Macintosh) .

3 Отпустите кнопку мыши, когда имя элемента AP назначения будет подсвечено.

Автоматическое вложение элементов AP Div при рисовании одного элемента AP Div внутри другого

❖ Выберите параметр ≪Вложенность≫ в установках элементов AP.

Просмотр или настройка установок элемента AP

Используйте категорию ≪Элементы AP≫ в диалоговом окне ≪Настройки≫, чтобы задать параметры по

умолчанию для новых элементов AP.

1 Выберите ≪Правка≫ > ≪Настройки≫ (в Windows) либо Dreamweaver > ≪Настройки≫ (в Macintosh).

2 Выберите элементы AP из списка ≪Категория≫ слева и укажите одну из следующих установок, затем нажмите кнопку ≪ОК≫.

Visibility Определяет, будут ли видимы по умолчанию элементы AP. Параметры на выбор: Default, Inherit, Visible и Hidden.

Width и Height Задайте стандартную ширину и высоту (в пикселях) для элементов AP, созданных с помощью команды ≪Добавить≫ > ≪Объекты макета≫ > ≪Слой AP≫.

Background Color Задает цвет фона по умолчанию. Выберите цвет из палитры.

Background Image Задает фоновое изображение по умолчанию. Нажмите кнопку ≪Обзор≫, чтобы найти файл изображения на вашем компьютере.

Вложение: вкладывать при создании внутри контейнера AP Div Задает, должен ли быть вложенным элемент AP Div, нарисованный начиная с точки в предела границ существующего элемента AP Div. Удерживайте клавишу ≪Alt≫ (Windows) или ≪Option≫ (Macintosh), чтобы временно изменить эту установку при рисовании элемента AP Div.

Просмотр или настройка свойств одиночного элемента AP

При выделении элемента AP инспектор свойств отображает его свойства.

1 Выделите элемент AP.

2 Чтобы просмотреть все свойства, в инспекторе свойств (≪Окно≫ > ≪Свойства≫) щелкните стрелку

разворачивания в нижнем правом углу, если свойства еще не развернуты.

3 Задайте любой из следующих параметров.

Элемент CSS-P Указывает идентификатор (ID) выбранного элемента AP. ID идентифицирует элемент AP на панели элементов AP и в коде JavaScript.

Используйте только стандартные символы (буквы алфавита и цифры), не используйте специальные символы, такие как пробел, дефис, косая черта и точка. Каждый элемент AP должен иметь свой собственный уникальный ID.

Примечание. Инспектор свойств CSS-P отображает те же самые свойства для элементов с относительным позиционированием.

L и T (слева и вверх) Указывает позицию верхнего левого угла элемента AP относительно верхнего левого угла страницы или относительно родительского элемента, если имеется вложение.

W и H (ширина и высота) Задает ширину и высоту элемента AP.

Примечание. Если содержимое элемента AP превышает указанный размер, нижняя граница элемента AP (так, как она выглядит в представлении «Дизайн» в Dreamweaver) растягивается, чтобы охватить содержимое. (Нижняя граница элемента AP не растягивается при отображении элемента AP в браузере, только если свойство «Overflow» не установлено в значение «Visible».)

Единица измерения по умолчанию для позиционирования и размера - это пиксел (px). Вместо пиксела можно задать следующие единицы: пк (пики) тчк (точки), дюймы, мм (миллиметры), см (сантиметры) или % (процентное отношение к соответствующему значению родительского элемента AP). Аббревиатура должна следовать за значением без пробела. Например, 3mm означает 3 миллиметра.

Z-Index Определяет положение элемента AP по оси Z, т.е. порядок наложения.

Элементы AP с большим номером отображаются в браузере впереди элементов AP с меньшим номером. Значения могут быть положительными и отрицательными. Проще изменить порядок наложения элементов AP на панели элементов AP, чем вводить определенные значение положения по оси Z.

Vis Задает, является ли элемент AP первоначально видимым. Выберите из следующих параметров.

• ≪Default≫ не задает свойство видимости. Если свойство видимости не указано, большая часть браузеров

используют ≪Inherit≫.

• ≪Inherit≫ использует свойство видимости родительского элемента AP.

• ≪Visible≫ отображает содержимое элемента AP вне зависимости от родительского значения.

• ≪Hidden≫ скрывает содержимое элемента AP вне зависимости от родительского значения.

Используйте язык сценариев, например JavaScript, чтобы управлять свойством видимости и настраивать динамическое отображение содержимого элементов AP.

Bg Image Задает фоновое изображение для элемента AP.

Щелкните значок папки, чтобы просмотреть и выбрать файл изображения.

Bg Color Задает цвет фона для элемента AP.

Оставьте этот параметр пустым, чтобы задать прозрачный фон.

Class Задает класс CSS, используемый для добавления стиля к элементу AP.

Overflow Управляет тем, как выглядят элементы AP в браузере, если размер содержимого превышает заданный размер элемента AP.

≪Visible≫ означает, что лишнее содержимое появляется в элементе AP. Элемент AP растягивается, чтобы охватить его. ≪Hidden≫ означает, что лишнее содержимое не отображается в браузере. ≪Scroll≫ означает, что браузер добавляет к элементу AP полосы прокрутки, не зависимо от того, необходимы они или нет. ≪Auto≫

заставляет браузер отображать полосы прокрутки для элемента AP, только если они необходимы (то есть в том случае, если содержимое элемента AP выходит за границы).

Примечание. Параметр overflow по-разному поддерживается в различных браузерах.

Clip Задает видимую область элемента AP.

Укажите левую, верхнюю, правую и нижнюю координаты, чтобы задать положение прямоугольника в координатах элемента AP (координаты отсчитываются от левого верхнего угла элемента AP). Элемент AP ≪обрезается≫, так что видимым остается только указанный прямоугольник. Например, чтобы сделать

невидимым все содержимое элемента AP, за исключением прямоугольника в левом верхнем углу шириной 50 пикселов и высотой 75 пикселов, установите ≪Л≫ в значение 0, ≪В≫ в 0, ≪П≫ в 50 и ≪Н≫ в 75.

Примечание. Хотя CSS задает различную семантику для вырезанного фрагмента («картинки»), Dreamweaver интерпретирует фрагмент тем же способом, что и большинство браузеров.

4 Если вы ввели значение в текстовое поле, нажмите клавишу ≪Tab≫ или ≪Ввод≫ (Windows) или ≪Return≫

(Macintosh).

Просмотр и настройка свойств для нескольких элементов AP

Если выбрать два или более элемента AP, инспектор свойств отображает текстовые свойства и подмножество

всех свойств элемента AP, что позволяет изменять несколько элементов AP одновременно.

Выделение нескольких элементов AP

❖ При выделении элементов AP удерживайте клавишу ≪Shift≫.

Просмотр и настройка свойств для нескольких элементов AP

1 Выделите несколько элементов AP.

2 Чтобы просмотреть все свойства, в инспекторе свойств (≪Окно≫ > ≪Свойства≫) щелкните стрелку

разворачивания в нижнем правом углу, если свойства еще не развернуты.

3 Настройте любые из следующих свойств для нескольких элементов AP.

L и T (слева и вверх) Задает позицию верхнего левого угла элемента AP относительно верхнего левого угла

страницы или относительно родительского элемента, если имеется вложенность.

W и H (ширина и высота) Задает ширину и высоту элементов AP.

Примечание. Если содержимое любого элемента AP превышает заданный размер, нижняя граница элемента

AP (так, как она отображается в представлении «Дизайн» в Dreamweaver) растягивается, чтобы охватить содержимое. (Нижняя граница элемента AP не растягивается при отображении элемента AP в браузере, только если свойство «Overflow» не установлено в значение «Visible».)

(процентное отношение к соответствующему значению родительского элемента AP). Аббревиатура должна

следовать за значением без пробела. Например, 3mm означает 3 миллиметра.

Vis Задает, являются ли элементы AP первоначально видимыми. Выберите из следующих параметров.

• ≪Default≫ не задает свойство видимости. Если свойство видимости не указано, большая часть браузеров используют ≪Inherit≫.

• ≪Inherit≫ использует свойство видимости родительских элементов AP.

• ≪Visible≫ отображает содержимое элемента AP вне зависимости от родительского значения.

• ≪Hidden≫ скрывает содержимое элемента AP вне зависимости от родительского значения.

Tag Задает HTML-тег, используемый для определения элементов AP.

Bg Image Задает фоновое изображение для элементов AP.

Щелкните значок папки, чтобы просмотреть и выбрать файл изображения.

Bg Color Задает цвет фона для элементов AP. Оставьте этот параметр пустым, чтобы задать прозрачный фон.

4 Если вы ввели значение в текстовое поле, нажмите клавишу ≪Tab≫ или ≪Ввод≫ (Windows) или ≪Return≫ (Macintosh).

Обзор панели элементов AP

Панель элементов AP (≪Окно≫ > ≪Элементы AP≫) используется для управления элементами AP в документе.

Используйте панель элементов AP, чтобы избежать перекрытий, изменить видимость элементов AP, выполнить вложение или наложение элементов AP и выделить один или несколько элементов AP.

Примечание. Элемент AP в Dreamweaver это элемент HTML-страницы, а точнее тег div или любой другой тег, которому назначено абсолютное позиционирование. Панель элементов AP не отображает элементы с относительным позиционированием.

Элементы AP отображаются в виде списка имен в порядке z-индекса (положения по оси Z). По умолчанию первый созданный элемент AP (с z-индексом равным 1) появляется внизу списка, последний созданный элемент AP появляется вверху списка. Однако, можно изменить z-индекс элемента AP, изменив его место в порядке наложения. Например, если создано восемь элементов AP, и необходимо переместить наверх

четвертый элемент, ему можно присвоить z-индекс больший, чем у других элементов.

Выделение элементов AP

Можно выбрать один или несколько элементов AP, чтобы управлять ими или изменить их свойства.

Выделение элемента AP на панели элементов AP

❖ На панели ≪Элементы AP≫ (≪Окно≫ > ≪Элементы AP≫) щелкните имя элемента AP.

Выделение элемента AP в области ｫОкно документаｻ

❖ Выполните одно из следующих действий.

• щелкните маркер выделения элемента AP.

Если маркер выделения невидимый, щелкните в любом месте внутри элемента AP, чтобы сделать его

видимым.

• Щелкните границу элемента AP.

• Щелкните область внутри элемента AP, удерживая клавиши ≪Ctrl≫ и ≪Shift≫ (Windows) или ≪Command≫ и

≪Shift≫ (Macintosh) .

• Щелкните область внутри элемента AP и нажмите клавиши ≪Ctrl≫ + ≪A≫ (Windows) или ≪Command≫ + ≪A≫

(Macintosh), чтобы выделить содержимое элемента AP. Снова нажмите ≪Ctrl≫ + ≪A≫ или ≪Command≫ + ≪A≫,

чтобы выделить элемент AP.

• Щелкните область внутри элемента AP, выберите его тег в селекторе тегов.

Выделение нескольких элементов AP

❖ Выполните одно из следующих действий.

• На панели ≪Элементы AP≫ (≪Окно≫ > ≪Элементы AP≫) щелкните два или несколько имени элементов AP,

удерживая клавишу ≪Shift≫.

• В области ≪Окно документа≫ щелкните область внутри или на границе двух или более элементов AP,

удерживая клавишу ≪Shift≫.

Изменение порядка наложения элементов AP

Чтобы изменить порядок наложения элементов AP, используйте инспектор свойств или панель элементов AP.

Элемент AP вверху списка панели элементов AP находится сверху в порядке наложения и отображается

впереди других элементов AP.

В коде HTML порядок наложения, т.е. z-index, элементов AP определяет порядок, в котором они отображаются в браузере. Чем выше z-index элемента AP, тем выше элемент AP находится в порядке наложения. Можно изменить z-index каждого элемента AP, используя панель элементов AP или инспектор свойств.

Изменение порядка наложения элементов AP с использованием панели элементов AP

1 Выберите меню ≪Окно≫ > ≪Элементы AP≫, чтобы открыть панель ≪Элементы AP≫.

2 Перетащите элемент AP вверх или вниз в нужное место в порядке наложения.

При перемещении элемента AP появится линия, которая показывает, где он появится. Отпустите кнопку

мыши, когда линия размещения будет в нужном месте в порядке наложения.

Изменение порядка наложения элементов AP с использованием инспектора свойств

1 Выберите меню ≪Окно≫ > ≪Элементы AP≫, чтобы открыть панель элементов AP и увидеть текущий порядок

наложения.

2 Выберите элемент AP на панели элементов AP или в области ≪Окно документа≫.

3 В инспекторе свойств (≪Окно≫ > ≪Свойства≫) введите число в текстовое поле ≪Z-Index≫.

• Чтобы переместить элемент AP вверх в порядке наложения, введите большее число.

• Чтобы переместить элемент AP вниз в порядке наложения, введите меньшее число.

Отображение и скрытие элементов AP

Во время работы над документом можно вручную отображать и скрывать элементы AP с помощью панели

элементов AP, чтобы увидеть, как страница выглядит при различных условиях.

Примечание. Текущий выделенный элемент AP всегда становится видимым и, пока он выделен, появляется

впереди других элементов AP.

Изменение видимости элемента AP

1 Выберите меню ≪Окно≫ > ≪Элементы AP≫, чтобы открыть панель ≪Элементы AP≫.

2 Щелкните в столбце элемента AP со значком глаза, чтобы изменить его видимость.

• Открытый глаз означает, что элемент AP видим.

• Закрытый глаз означает, что элемент AP невидим.

• Если значок глаза отсутствует, то обычно элемент AP наследует видимость от родительского элемента.

(Если элемент AP не вложенный, то родительским документом является тело документа, которое всегда видимо.)

Также значок глаза не появляется, если видимость задана (в инспекторе свойств это отображается как видимость ≪Default≫).

Изменение видимости всех элементов AP одновременно

❖ На панели элементов AP (≪Окно≫ > ≪Элементы AP≫) щелкните значок глаза в заголовке вверху столбца.

Примечание. С помощью этой процедуры всем элементам AP можно задать параметр «Visible», «Hidden», но не «Inherit».

Изменение размера элементов AP

Можно изменить размер отдельного элемента AP или одновременно нескольких элементов AP, установив для них одинаковую ширину и высоту.

Если установлен параметр ≪Избегать перекрытие≫, то невозможно изменить размер элемента AP так, чтобы он перекрывался с другим элементом AP.

Ознакомтесь с работой Ajax. Пользуясь Adobe Dreamweaver поместите на сайт не менее одного элемента Spry. Например, панель меню Spry, панели со вкладками Spry, набор вкладок Spry, сворачивающаяся панель Spry, подсказка Spry или др. Внимательно изучите .js и .css файлы для вставленных элементов.

Содержание