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

Bootstrap — это популярная бесплатная платформа для HTML, CSS и JavaScript, используемая для разработки динамичных веб-сайтов, оптимизированных для мобильных устройств. Платформа содержит удобные шаблоны HTML и CSS для кнопок, таблиц, переходов, каруселей изображений и других элементов, которые можно использовать на веб-страницах. Доступны несколько дополнительных подключаемых модулей JavaScript, с помощью которых даже начинающие разработчики смогут создавать потрясающие динамичные веб-сайты.

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

Примечание.

На текущий момент поддерживаются версии Bootstrap 4.2.1 и 3.4.0.

Распространенные вопросы

Я использую «резиновые» макеты в Dreamweaver. Как можно начать работу с Bootstrap?

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

Аналогичным образом при работе с документами Bootstrap можно сосредоточить внимание только на содержимом и проекте и возложить задачу обеспечения динамичности веб-страницы на Dreamweaver, который тесно интегрирован с платформой Bootstrap.

В настоящее время Dreamweaver поддерживает версии Bootstrap 3.4.0 и 4.2.1.

«Bootstrap 3.4.0 включает адаптивную структуру сетки для мобильных устройств, которая должным образом масштабирует колонки (до 12) при увеличении размеров устройства или окна просмотра. Он включает предопределенные классы для простых макетов, а также эффективные миксины для создания семантически более сложных макетов» — документация по Bootstrap.

«Претерпевший существенные изменения Bootstrap 4.2.1 включает эффективную сетку flexbox для создания макетов любых форм и масштабов для мобильных устройств. В вашем распоряжении структура из 12 колонок, пять адаптивных уровней, переменные и миксины Sass, а также десятки предопределенных классов.» — Документация по Bootstrap.

Чтобы начать работу с документами Bootstrap в Dreamweaver, рассмотрите возможность использования начальных шаблонов Bootstrap. Dreamweaver содержит множество шаблонов, предназначенных для создания веб-сайтов различных типов, например сайтов электронной коммерции или портфолио.

Если требуется создать документ Bootstrap с нуля, см. описание в разделе Создание документов Bootstrap.

Можно ли перенести существующие документы с «резиновым» макетом в документы Bootstrap в Dreamweaver?

Нет, прямого способа преобразования существующих документов с «резиновым» макетом в документы Bootstrap не существует. Тем не менее работа пользователя в Dreamweaver при создании и разработке документов Bootstrap аналогична работе с документами с «резиновыми» макетами. Например, можно приступить к созданию документа Bootstrap непосредственно в диалоговом окне Создать документ. Создание документов с «резиновым» макетом для трех основных формфакторов (мобильный телефон, планшет и ПК) для Bootstrap начинается с создания документа для основных размеров экрана: малого, среднего, большого и очень большого. Параметры редактирования макета, отображаемые при выборе элементов документов Bootstrap, также аналогичны применяемым для документов с «резиновыми» макетами.

Можно ли импортировать старые сайты в последнюю версию Dreamweaver?

Да, вы можете импортировать старые сайты в последнюю версию Dreamweaver. При этом Dreamweaver ищет CSS-файл Bootstrap в папке site root/css/

  • Если на сайте присутствует CSS-файл Bootstrap v3, то версия Bootstrap в разделе Управление сайтами > Дополнительные параметры > Bootstrap будет установлена в значение 3.4.0.
  • Если на сайте присутствует CSS-файл Bootstrap v4, то версия Bootstrap в разделе Управление сайтами > Дополнительные параметры > Bootstrap будет установлена в значение 4.2.1.
  • Если на сайте в папке site root/css отсутствует CSS-файл Bootstrap, то в разделе Управление сайтами > Дополнительные параметры > Bootstrap будет установлена версия Bootstrap 4.2.1.

Создание документов Bootstrap

Разработку веб-сайта Bootstrap можно начать, выбрав один из следующих вариантов в диалоговом окне Создать документ.

  • Начальные шаблоны Bootstrap (Начальные шаблоны > Шаблоны Bootstrap) — используйте этот вариант, если хотите быстро начать работу, не занимаясь созданием макетов страниц с нуля. Просто отредактируйте текст, при необходимости замените ресурсы, и вы получите динамичный веб-сайт, готовый к работе. См. раздел Использование начальных шаблонов Bootstrap для получения дополнительных сведений.
  • Создать HTML-документ на базе платформы Bootstrap (Создать документ > HTML > Bootstrap) — используйте этот вариант, если хотите построить веб-сайт шаг за шагом, используя компоненты CSS и Bootstrap, доступные в Dreamweaver. Дополнительную информацию см. в разделе Создание HTML-документов на базе платформы Bootstrap.

Использование начальных шаблонов Bootstrap

Начальные шаблоны Bootstrap позволяют моментально создавать веб-страницы на популярные темы. Все зависимые файлы в рамках платформы сохраняются автоматически.

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

  2. В появившемся диалоговом окне Создание документа щелкните Начальные шаблоны, а затем выберите необходимый шаблон из списка шаблонов Bootstrap.

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

    Будет создана HTML-страница на основе выбранного шаблона. Теперь можно изменять страницу путем добавления или удаления компонентов, а также редактирования текста и ресурсов по мере необходимости.

Создание HTML-документов на базе платформы Bootstrap

Разработку динамичного веб-сайта можно начать с создания HTML-документа на платформе Bootstrap. Можно либо создать новый набор файлов платформы Bootstrap, либо использовать уже существующие файлы. После создания документа можно добавлять компоненты Bootstrap, например аккордеоны и карусели, используя панель «Вставка» в Dreamweaver. А если у вас есть файлы Photoshop, используйте функцию Extract, чтобы добавлять в документ Bootstrap изображения, шрифты, стили, текст и многое другое.

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

  2. В открывшемся диалоговом окне Создать документ выберите Создать документ > HTML, а затем щелкните по вкладке Bootstrap.

  3. Чтобы создать новый файл bootstrap.css (и другие файлы Bootstrap), выполните следующие действия.

    Укажите, следует ли создать новый CSS-файл Bootstrap или использовать существующий CSS-файл.

    Если вы решили создать новый CSS-файл, в корневом каталоге сайта будет создана папка css, в которую будет скопирован файл bootstrap.css. В случае использования существующего файла CSS необходимо указать путь или перейти к его расположению.

    1. Нажмите Создать новый.

      Создайте новый документ Bootstrap
      Создайте новый документ Bootstrap
    2. (Необязательно) Если нужно прикрепить к документу любой другой CSS-файл, щелкните значок  в разделе Присоединить CSS. Откроется диалоговое окно Присоединить внешнюю таблицу стилей. Укажите нужные параметры и щелкните ОК.

    3. Параметр «Включить готовый макет» позволяет получить готовую базовую структуру документа Bootstrap.

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

    4. (Необязательно) Макет по умолчанию содержит 12 столбцов с внутренним полем 30 пикселов. Размеры экрана по умолчанию: 576 пикселов, 768 пикселов, 992 пикселов и 1200 пикселов. 

      Если нужно изменить эти параметры, нажмите кнопку Настройка. Файл bootstrap.css будет изменен соответствующим образом.

      Примечание.

      Для Bootstrap версии 3.4.0 размеры экрана по умолчанию будут составлять 768, 992 и 1200 пикселов.

    5. Выберите Использовать Extract для создания страницы на основе композиций Photoshop, если нужно открыть панель Extract (в том случае, если она закрыта). В этом случае можно начать извлечение ресурсов из композиций Photoshop прямо сейчас.

      По умолчанию новый сайт создается на основе Bootstrap версии 4.2.1. После создания документа в корневой папке сайта будут папки css и js. Однако, если вы хотите создать сайт с помощью Bootstrap версии 3.4.0, то выберите вариант Сайт > Управление сайтами. Выберите корневую папку сайта. Щелкните Дополнительные параметры > Bootstrap. В раскрывающемся списке Версия Bootstrap выберите 3.4.0. При использовании Bootstrap 3.4.0 в корневой папке сайта вы найдете папки css, js и fonts.

      Выберите Bootstrap версии 4.2.1
      Выберите Bootstrap версии 4.2.1

      При создании страницы Bootstrap 4.2.1 поддерживается jQuery версии 3.3.1. Начальные шаблоны Bootstrap обновлены до версии Bootstrap 4.2.1.

      При добавлении компонентов Bootstrap на страницу Bootstrap у вас есть возможность обновить страницы Bootstrap 4.0.0 до Bootstrap 4.2.1 и версию jQuery до 3.3.1. Нажмите кнопку Да в диалоговом окне, которое откроется при вставке компонентов Bootstrap на страницу.

      Диалоговое окно подтверждения совместимости версий
      Диалоговое окно подтверждения совместимости версий
      Всплывающее диалоговое окно jQuery
      Всплывающее диалоговое окно jQuery

      При импорте сайта Bootstrap 4.0.0 или при переносе сайта с предыдущих версий на следующую версию релиза Dreamweaver CC версия Bootstrap получает значение 4.2.1 в разделе Настройка сайта > Дополнительные параметры > Bootstrap.

  4. Чтобы использовать существующие файлы платформы Bootstrap, выполните следующие действия.

    1. Щелкните Использовать существующий и укажите путь к файлу bootstrap.css. Также можно перейти в папку, где сохранен CSS-файл.

      Создание документов Bootstrap с использованием существующих файлов платформы
      Создание документов Bootstrap с использованием существующих файлов платформы

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

    3. Параметр «Включить готовый макет» позволяет получить готовую базовую структуру документа Bootstrap. Если вы не хотите использовать базовую структуру и предпочитаете начать с пустого документа, снимите флажок Включить готовый макет.

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

Примечание.

Создаваемый файл bootstrap.css доступен только для чтения. Таким образом, нельзя редактировать эти стили с помощью конструктора CSS; панель «Свойства» в конструкторе CSS в файлах Bootstrap отключена.

Если необходимо изменить стили в документе Bootstrap, создайте другой CSS-файл для переопределения существующих стилей, а затем присоедините его к документу.

Открытие файлов Bootstrap

Примечание.

Рекомендуется открывать и редактировать в Dreamweaver документы, созданные только в Bootstrap версии 3 и выше.

Открыть файлы Bootstrap можно одним из следующих способов:

  • Выберите Файл > Открыть и перейдите к HTML-файлу Bootstrap.
  • (Рекомендуется) Создайте сайт в Dreamweaver и выберите в качестве папки сайта папку, содержащую все необходимые файлы Bootstrap.

При открытии HTML-файла Bootstrap в Dreamweaver происходит следующее.

  • Строки выделяются серыми пунктирными линиями со скругленными углами.
  • Столбцы выделяются синими пунктирными линиями.

Dreamweaver распознает файлы CSS, связанные с имеющимися HTML-файлами Bootstrap, если имя файла CSS содержит слово «bootstrap». Ссылка на CSS-файл может быть представлена следующими способами.

  • Локальный путь:

    свернутый или развернутый CSS-файл, доступный локально. Например:

    <link href="css/bootstrap.css" rel="stylesheet"> или
    <link href="css/bootstrap.min.css" rel="stylesheet">

  • Удаленный путь:
  • свернутый или развернутый CSS-файл, доступный удаленно. Например:

    <link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
    <link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">
    .

  • CDN
  • <link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">

Примечание.

Dreamweaver поддерживает таблицы стилей Bootstrap в тегах ссылок и импорта. Однако вложенные ссылки импорта на таблицу стилей, которая в свою очередь импортирует другую таблицу стилей, не поддерживаются.

Скрытие и показ скрытых элементов Bootstrap и управление ими

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

Чтобы скрыть элемент Bootstrap, щелкните его правой кнопкой мыши и выберите «Скрыть элемент». Элемент будет временно скрыт в представлении.

Скрытие элементов Bootstrap в Dreamweaver
Скрытие элементов Bootstrap в Dreamweaver

Для просмотра и отображения скрытых элементов щелкните правой кнопкой мыши и выберите «Управление скрытыми элементами». Скрытые элементы отображаются на сером заштрихованном фоне. Щелкните значок глаза, чтобы отобразить элемент.

Управление скрытыми элементами Bootstrap
Управление скрытыми элементами Bootstrap

Добавление компонентов Bootstrap

Параметр «Компоненты Bootstrap» на панели Вставка содержит список всех компонентов Bootstrap, которые можно добавить на веб-страницу в Dreamweaver. В зависимости от версии Bootstrap в файле bootstrap.css, подключенном к странице HTML, соответствующие компоненты будут представлены на панели Вставка.  Например, в Bootstrap версии 4.0.0 отображаются такие дополнительные компоненты, как карты и значки. Аналогичным образом, компоненты Glyphicon, панели, колодцы и миниатюры доступны только в Bootstrap версии 3.3.7. В зависимости от версии Bootstrap соответствующие компоненты отображаются на панели Вставка.

Заполнение компонентов на панели Вставка происходит на основе следующих критериев.

  • Документ находится в фокусе: компоненты на панели «Вставка» заполняются в зависимости от версии Bootstrap в файле Bootstrap, привязанном к документу. 
  • «Версия» в настройках сайта. Для документов без bootstrap Dreamweaver ищет номер версии в разделе Настройки сайта > Дополнительно > Bootstrap. В зависимости от версии в данном параметре будет произведено заполнение соответствующих компонентов. По умолчанию для новых сайтов используется версия 4.2.1.
  • Путь сохранения файлов: для документа, не являющегося Bootstrap и не относящегося ни к одному сайту, на панели «Вставка» будут показаны компоненты версии 4.2.1.
Компоненты, поддерживаемые в Bootstrap 4.0.0
Компоненты, поддерживаемые в Bootstrap 4.0.0

Чтобы добавить компонент, перетащите его из панели на свою веб-страницу. При перетаскивании компонента обратите внимание на визуальные подсказки, например интерактивные направляющие, подсказки точной вставки (при использовании DOM) и помощника по выбору положения. Используйте эти средства для быстрого и точного размещения компонентов на странице. Дополнительные сведения о вставке элементов на веб-страницу см. в разделе Обзор панели «Вставка».

Добавление строк

Выберите строку, после которой требуется добавить новую строку. Затем щелкните значок «Добавить новую строку». Будут добавлены строка Bootstrap и два дочерних элемента с шестью столбцами в каждом.

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

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

где «*» соответствует текущему размеру экрана в Dreamweaver.

Добавление столбцов

Выберите требуемый столбец и щелкните значок «Добавить новый столбец». Выбранный столбец будет скопирован без дочерних элементов.

Всем пустым столбцам назначается минимальная высота 20px. Тем не менее она фактически не добавляется на страницу. Она отображается только в интерактивном просмотре для упрощения вставки элементов в столбцы.

Повторяющиеся строки и столбцы

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

Примечание.

Функция «Добавить строку/Добавить столбец» дублирует строку или столбец вместе с классами, но без содержимого.

Изменение размера и смещение столбцов

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

Изменение размера столбцов

Для изменения размера выберите требуемый столбец и перетащите находящийся справа маркер. Для документов с Bootstrap версии 4.0.0: при изменении размера столбца добавляется класс col-*-n, где «*» соответствует текущему медиазапросу (xsm, md, ld, xl), а «n» — количеству занимаемых классом столбцов. Для размера экрана Очень маленький будет добавлен класс col-n.

Для документов с Bootstrap версии 3.3.7: при изменении размера столбца добавляется класс col-*-n, где «*» соответствует текущему медиазапросу (xs, sm, md или lg), а «n» — количеству занимаемых классом столбцов.

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

Смещение столбцов

Чтобы сместить столбец, выберите требуемый столбец и перетащите находящийся слева маркер. Смещение отображается как заштрихованная область. Для документов с Bootstrap версии 4.0.0: при смещении столбца добавляется класс offset-*-n, где «*» соответствует текущему медиазапросу (sm, md, lg или xl), а «n» — количеству занимаемых классом столбцов.

Для документов с Bootstrap версии 3.3.7: при смещении столбца добавляется класс col-*-offset-n, где «*» соответствует текущему медиазапросу (xs, sm, md или lg), а «n» — количеству столбцов, на которое происходит сдвиг.

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

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет