Руководство пользователя Отмена

Создание веб-приложений для мобильных устройств с помощью Dreamweaver

  1. Руководство пользователя Dreamweaver
  2. Введение
    1. Основы гибкого веб-дизайна
    2. Новые возможности Dreamweaver
    3. Веб-разработка с помощью Dreamweaver: обзор
    4. Dreamweaver / распространенные вопросы
    5. Сочетания клавиш
    6. Системные требования Dreamweaver
    7. Обзор новых возможностей
  3. Dreamweaver и Creative Cloud
    1. Синхронизация настроек Dreamweaver с Creative Cloud
    2. Библиотеки Creative Cloud Libraries в Dreamweaver
    3. Использование файлов Photoshop в Dreamweaver
    4. Работа с Adobe Animate и Dreamweaver
    5. Извлечение файлов SVG, оптимизированных для Интернета, из библиотек
  4. Рабочие среды и представления Dreamweaver
    1. Рабочая среда Dreamweaver
    2. Оптимизация рабочей среды Dreamweaver для визуальной разработки
    3. Поиск файлов по названию или содержимому | Mac OS
  5. Настройка сайтов
    1. О сайтах Dreamweaver
    2. Настройка локальной версии сайта
    3. Подключение к серверу публикации
    4. Настройка тестового сервера
    5. Импорт и экспорт параметров сайта Dreamweaver
    6. Перенос существующих веб-сайтов с удаленного сервера в корневой каталог локального сайта
    7. Специальные возможности в Dreamweaver
    8. Дополнительные настройки
    9. Настройка установок сайта для передачи файлов
    10. Задание параметров прокси-сервера в Dreamweaver
    11. Синхронизация настроек Dreamweaver с Creative Cloud
    12. Использование Git в Dreamweaver
  6. Управление файлами
    1. Создание и открытие файлов
    2. Управление файлами и папками
    3. Получение файлов с сервера и размещение их на нем
    4. Возврат и извлечение файлов
    5. Синхронизация файлов
    6. Сравнение файлов
    7. Скрытие файлов и папок на сайте Dreamweaver
    8. Включение заметок разработчика для сайтов Dreamweaver
    9. Предотвращение использования уязвимости Gatekeeper
  7. Макет и оформление
    1. Использование средств визуализации для создания макета
    2. Об использовании CSS для создания макета страницы
    3. Создание динамичных веб-сайтов с помощью Bootstrap
    4. Создание и использование медиазапросов в Dreamweaver
    5. Представление содержимого в таблицах
    6. Цвета
    7. Гибкий дизайн с использованием «резиновых» макетов
    8. Extract в Dreamweaver
  8. CSS
    1. Общие сведения о каскадных таблицах стилей
    2. Создание макетов страниц с помощью конструктора CSS
    3. Использование препроцессоров CSS в Dreamweaver
    4. Установка настроек стиля CSS в Dreamweaver
    5. Перемещение правил CSS в Dreamweaver
    6. Преобразование встроенного CSS в правило CSS в Dreamweaver
    7. Работа с тегами div
    8. Применение градиентов к фону
    9. Создание и редактирование эффектов перехода CSS3 в Dreamweaver
    10. Форматирование кода
  9. Содержимое страницы и ресурсы
    1. Задание свойств страницы
    2. Задание свойств заголовка CSS и свойств ссылки CSS
    3. Работа с текстом
    4. Поиск и замена текста, тегов и атрибутов
    5. Панель DOM
    6. Редактирование в режиме интерактивного просмотра
    7. Кодировка документов в Dreamweaver
    8. Выбор и просмотр элементов в окне документа
    9. Задание свойств текста в инспекторе свойств
    10. Проверка орфографии на веб-странице
    11. Использование горизонтальных линеек в Dreamweaver
    12. Добавление и изменение сочетаний шрифтов в Adobe Dreamweaver
    13. Работа с ресурсами
    14. Вставка и обновление даты в Dreamweaver
    15. Создание и управление избранными ресурсами в Dreamweaver
    16. Вставка и редактирование изображений в Dreamweaver
    17. Добавление мультимедийных объектов
    18. Добавление видео Dreamweaver
    19. Добавление видео HTML5
    20. Вставка файлов SWF
    21. Добавление звуковых эффектов
    22. Добавление аудио HTML5 в Dreamweaver
    23. Работа с элементами библиотеки
    24. Использование текста на арабском языке и иврите в Dreamweaver
  10. Создание ссылок и навигация
    1. О создании ссылок и навигации
    2. Создание ссылок
    3. Карты ссылок
    4. Устранение неполадок со ссылками
  11. Графические элементы и эффекты jQuery
    1. Использование пользовательского интерфейса и графических элементов jQuery для мобильных устройств в Dreamweaver
    2. Использование эффектов jQuery в Dreamweaver
  12. Написание кода веб-сайтов
    1. О программировании в Dreamweaver
    2. Среда написания кода в Dreamweaver
    3. Настройка параметров написания кода
    4. Настройка цветового оформления кода
    5. Написание и редактирование кода
    6. Подсказки по коду и автозавершение кода
    7. Свертывание и развертывание кода
    8. Повторное использование фрагментов кода
    9. Анализ Linting для проверки кода
    10. Оптимизация кода
    11. Редактирование кода в представлении «Дизайн»
    12. Работа с содержимым заголовков для страниц
    13. Вставка серверных включений в Dreamweaver
    14. Использование библиотек тегов в Dreamweaver
    15. Импорт пользовательских тегов в Dreamweaver
    16. Использование вариантов поведения JavaScript (общие инструкции)
    17. Применение встроенных вариантов поведения JavaScript
    18. Сведения об XML и XSLT
    19. Выполнение XSL-преобразования на стороне сервера в Dreamweaver
    20. Выполнение XSL-преобразования на стороне клиента в Dreamweaver
    21. Добавление символьных сущностей для XSLT в Dreamweaver
    22. Форматирование кода
  13. Процессы взаимодействия продуктов
    1. Установка и использование расширений в Dreamweaver
    2. Обновления в Dreamweaver, устанавливаемые через приложение
    3. Вставить документы Microsoft Office в Dreamweaver (только для Windows)
    4. Работа с Fireworks и Dreamweaver
    5. Редактирование содержимого на сайтах Dreamweaver с помощью Contribute
    6. Интеграция Dreamweaver с Business Catalyst
    7. Создание персонализированных кампаний почтовой рассылки
  14. Шаблоны
    1. О шаблонах Dreamweaver
    2. Распознавание шаблонов и документов на их основе
    3. Создание шаблона Dreamweaver
    4. Создание редактируемых областей в шаблонах
    5. Создание повторяющихся областей и таблиц в Dreamweaver
    6. Использование дополнительных областей в шаблонах
    7. Определение редактируемых атрибутов тега в Dreamweaver
    8. Создание вложенных шаблонов в Dreamweaver
    9. Редактирование, обновление и удаление шаблонов
    10. Экспорт и импорт XML-содержимого в Dreamweaver
    11. Применение или удаление шаблона из существующего документа
    12. Редактирование содержимого в шаблонах Dreamweaver
    13. Правила синтаксиса для тегов шаблона в Dreamweaver
    14. Настройка предпочтений выделения для областей шаблона
    15. Преимущества использования шаблонов в Dreamweaver
  15. Мобильные и многоэкранные устройства
    1. Создание медиазапросов
    2. Изменение ориентации страницы для мобильных устройств
    3. Создание веб-приложений для мобильных устройств с помощью Dreamweaver
  16. Динамические сайты, страницы и веб-формы
    1. Общие сведения о веб-приложениях
    2. Настройка компьютера для разработки приложений
    3. Устранение неполадок подключений к базам данных
    4. Удаление сценариев подключения в Dreamweaver
    5. Дизайн динамических страниц
    6. Обзор динамических источников содержимого
    7. Определение источников динамического содержимого
    8. Добавление динамического содержимого на страницы
    9. Изменение динамического содержимого в Dreamweaver
    10. Отображение записей баз данных
    11. Введение интерактивных данных и устранение неполадок с ними в Dreamweaver
    12. Добавление заказных вариантов поведения сервера в Dreamweaver
    13. Создание форм с помощью Dreamweaver
    14. Использование форм для сбора информации от пользователей
    15. Создание и включение форм ColdFusion в Dreamweaver
    16. Создание веб-форм
    17. Расширенная поддержка HTML5 для компонентов формы
    18. Разработка формы с помощью Dreamweaver
  17. Визуальное построение приложений
    1. Создание главной страницы и страницы сведений в Dreamweaver
    2. Создание страниц поиска и результатов поиска
    3. Создание страницы для вставки записи
    4. Создание страницы обновления записи в Dreamweaver
    5. Создание страниц удаления записей в Dreamweaver
    6. Применение ASP-команд для изменения базы данных в Dreamweaver
    7. Создание страницы регистрации
    8. Создание страницы входа
    9. Создание страницы с доступом только для авторизованных пользователей
    10. Защита папок в ColdFusion с помощью Dreamweaver
    11. Использование компонентов ColdFusion в Dreamweaver
  18. Тестирование, просмотр и публикация веб-сайтов
    1. Предварительный просмотр страниц
    2. Предварительный просмотр веб-страниц Dreamweaver на нескольких устройствах
    3. Тестирование сайта Dreamweaver
  19. Устранение неполадок
    1. Исправленные ошибки
    2. Выявленные неполадки

 

 

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

Создание веб-приложения с помощью jQuery Mobile

Открытие начальной страницы jQuery Mobile или создание страницы HTML5

Используете начальные страницы jQuery Mobile в Dreamweaver, чтобы создать приложение. Вы также можете начать создание веб-приложения с новой страницы HTML5.

На начальных страницах jQuery Mobile имеются файлы HTML, CSS, JavaScript, а также графические файлы, позволяющие быстро приступить к разработке приложения. Вы можете использовать файлы CSS и JavaScript, размещенные на CDN, на собственном сервере или файлы, установленные вместе с Dreamweaver.

Примечание.

Чтобы узнать, где расположены связанные файлы, см. теги <link> и <script src> в представлении кода.

Вставьте компоненты jQuery Mobile из панели «Вставка»

Вставьте компоненты jQuery Mobile из панели «Вставка» на HTML-страницу. Файлы jQuery Mobile CSS и JavaScript определяют стиль и поведение компонентов.

Сведения о CDN и локальных файлах jQuery Mobile

CDN

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

Кроме того, вы также можете использовать URL-адреса сетей с других сайтов, например Microsoft и Google. Измените расположение сервера с файлами CSS и JavaScript, указанными в тегах <link> и <script src>, в представлении кода.

Файлы, загружаемые из сети CDN, доступны только для чтения.

Локальные файлы jQuery Mobile

При установке Dreamweaver копии файлов jQuery Mobile переносятся на компьютер. HTML-страница, которая открывается при выборе начальной страницы jQuery Mobile, связана с локальными файлами CSS, JavaScript и графическими файлами.

Начальные страницы jQuery Mobile

В Dreamweaver имеются следующие начальные страницы для создания веб-приложения:

jQuery Mobile (CDN)

Используйте эту начальную страницу, если библиотеку jQuery Mobile планируется разместить в сети CDN.

 

jQuery Mobile (локальный)

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

 

jQuery Mobile (PhoneGap)

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

 

 

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

  1. Выберите «Файл» > «Создать».

  2. Выберите один из следующих пунктов, исходя из своих потребностей:

    • «Страница из образца» > «Начальные страницы Mobile» > «jQuery Mobile (CDN)».

    • «Страница из образца» > «Начальные страницы Mobile» > «jQuery Mobile (локальный)».

     

  3. Нажмите кнопку «Создать».

    На открывшейся странице установите флажок «Следовать ссылкам непрерывно» («Вид» > «Параметры интерактивного просмотра») и переключитесь на интерактивный просмотр. Используйте компоненты навигации, чтобы проверить, как работает приложение.

    Чтобы посмотреть, как страница отображается на устройствах разных размеров, воспользуйтесь командами из меню «Многоэкранный». Отключите интерактивный просмотр и перейдите назад в представление дизайна.

  4. На панели «Вставка» («Окно» > «Вставка») выберите jQuery Mobile. Будут отображены компоненты, которые можно добавить в веб-приложение.

  5. В представлении дизайна поместите курсор в то место, куда требуется вставить компонент, а затем щелкните компонент на панели «Вставка». В открывшемся диалоговом окне настройте компоненты с помощью параметров.

  6. (jQuery Mobile — локальный) После сохранения HTML-файла файлы jQuery Mobile, включая графические файлы, будут скопированы в папку, где находится HTML-файл.

Просмотрите страницу в режиме интерактивного просмотра. Некоторые классы CSS применяются только в режиме интерактивного просмотра.

Создание веб-приложения для мобильных устройств с новой страницы

Компонент «Страница» является контейнером для всех остальных компонентов jQuery Mobile. Перед тем как вставлять другие компоненты, добавьте компонент «Страница».

  1. Выберите «Файл» > «Создать».

  2. Выберите «Пустая страница» > «HTML».

    Некоторые компоненты jQuery Mobile используют атрибуты HTML5. Чтобы обеспечить соответствие HTML5 во время проверки, необходимо выбрать HTML5 в качестве DocType.

  3. На панели «Вставка» («Окно» > «Вставка») в меню выберите jQuery Mobile. На панели появится компонент jQuery Mobile.

  4. Перетащите компонент «Страница» в представление дизайна из панели «Вставка».

  5. В диалоговом окне «Файлы jQuery Mobile» выберите один из следующих параметров.

    Удаленный (CDN)

    Если требуется подключиться к удаленному серверу CDN, на котором размещены файлы jQuery Mobile. Используйте параметр сайта jQuery по умолчанию, если сайт с файлами jQuery Mobile задан не был. Также можно использовать другие серверы CDN.

    Локальный

    Будут отображены файлы, которые доступны в Dreamweaver. Чтобы указать другую папку, нажмите кнопку «Обзор» и перейдите в папку, в которой находятся файлы jQuery Mobile.

    Файлы CSS и JavaScript копируются в локальный временный каталог, пока HTML-файл не будет сохранен на компьютере. После сохранения HTML-файла все связанные с ним файлы jQuery Mobile и графические файлы копируются в папку, расположенную в корневой папке сайта.

  6. Введите свойства компонента «Страница».

  7. В представлении дизайна поместите курсор в то место, куда требуется вставить компонент, а затем щелкните компонент на панели «Вставка». В открывшемся диалоговом окне настройте компоненты с помощью параметров.

Просмотрите страницу в режиме интерактивного просмотра. Некоторые классы CSS применяются только в режиме интерактивного просмотра.

Использование пользовательских файлов и папок

Для приложения можно создавать собственные файлы CSS и JS. Файлы должны иметь имена jquery.mobile.js, jquery.mobile.css и jquery.js

При использовании пользовательских папок выполните следующие действия.

  1. Загрузите необработанную версию базовой библиотеки jQuery 1.5 с веб-сайта http://docs.jquery.com/Downloading_jQuery#Download_jQuery.

  2. Сохраните файл в корневой папке, содержащей другие ресурсы.

 

 Adobe

Получайте помощь быстрее и проще

Новый пользователь?

Adobe MAX 2024

Adobe MAX
— творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Adobe MAX

Творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Adobe MAX 2024

Adobe MAX
— творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Adobe MAX

Творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн