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

Создание динамичных веб-сайтов с помощью Bootstrap

 

 

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

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

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

Примечание.

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

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

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

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

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

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

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

«Претерпев существенные изменения, Bootstrap 4.4.1 включает эффективную сетку flexbox для создания макетов любых форм и масштабов для мобильных устройств. В вашем распоряжении структура из двенадцати столбцов, пять адаптивных уровней, переменные и миксины 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.1.
  • Если на сайте присутствует CSS-файл Bootstrap v4, то версия Bootstrap в разделе Управление сайтами > Дополнительные параметры > Bootstrap будет установлена в значение 4.4.1.
  • Если на сайте в папке site root/css отсутствует CSS-файл Bootstrap, то в разделе Управление сайтами > Дополнительные параметры > Bootstrap будет установлена версия Bootstrap 4.4.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.4.1. После создания документа в корневой папке сайта будут папки css и js. Однако, если вы хотите создать сайт с помощью Bootstrap версии 3.4.1, то выберите вариант Сайт > Управление сайтами. Выберите корневую папку сайта. Нажмите Дополнительные настройки > Bootstrap. В раскрывающемся списке Версия Bootstrap выберите 3.4.1. При использовании Bootstrap 3.4.1 в корневой папке сайта вы найдете папки css, js и fonts.

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

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

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

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

      Диалоговое окно Bootstrap 3.4.1
      Диалоговое окно Bootstrap 3.4.1

      Всплывающее диалоговое окно jQuery
      Всплывающее диалоговое окно jQuery

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

    Примечание.

    В Bootstrap 4.3.1 высота строки сетки со столбцом меняется c 1 до 0 пикс. Чтобы сделать его видимым в режиме интерактивного просмотра, необходимо добавить содержимое, опубликованное в строке сетки со столбцом.

  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 соответствующие компоненты отображаются на панели Вставка. Компонент Spinners также доступен только в Bootstrap версии 4.4.1.

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание.

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

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

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

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

Для изменения размера выберите требуемый столбец и перетащите находящийся справа маркер. Для документов с 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 определяет текущий размер экрана и добавляет соответствующий класс. Чтобы сместить столбцы в соответствии с определенными областями просмотра, измените размер области просмотра, используя настройки в правом нижнем углу или инструмент прокрутки. Затем сдвиньте столбцы.

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

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