Новая схема размещения жидкостной сетки Dreamweaver CS6

• May 1, 2024

Если вы разрабатываете простые веб-сайты или сложные CMS, у вас всегда возникает этот мучительный вопрос - делаю ли я все возможное, чтобы ориентироваться на все типы аудиторий и разрешения экрана? Ну, Dreamweaver^р CS6 имеет новые функции, которые облегчают эту задачу.

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

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

1. Просто нажмите File - New Fluid Grid Layout из меню.
   
   
2. В диалоговом окне «Новый документ» вы увидите значения по умолчанию для этой новой адаптивной веб-страницы. Ширина фиксирована для каждого разрешения экрана.
   
   Мобильный 480px
   Таблица 768 пикселей
   Рабочий стол 1232px
   
   
3. У вас есть возможность изменить количество столбцов по умолчанию и процент ширины столбца для каждого разрешения экрана. Значения по умолчанию:
   
   Мобильные 5 колонок - 91%
   Таблетка 8 колонок - 93%
   Рабочий стол 10 колонок - 90%
   
   
4. В рабочем пространстве по умолчанию могут отображаться код и виды дизайна. Как вы можете видеть в режиме конструктора, новый файл уже имеет один тег div. Вы можете изменить идентификатор по умолчанию и класс для div на панели свойств.
   
   Конечно, вашей веб-странице потребуется более одного div. Таким образом, мы можем добавить больше div для заголовка, навигации, основного, бокового и нижнего колонтитула.
   
   
5. Чтобы добавить новый элемент Div, выберите «Вставить тег Div макета сетки жидкостей» на панели «Вставка».
   
   
6. В диалоговом окне вы можете назвать идентификатор тега.
   
   
7. Когда мы добавили все основные элементы div для нашей страницы, мы можем щелкнуть и перетащить их, чтобы переместить их в сетку.
   
   

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

Когда мы сохраняем наш макет, мы получаем один файл HTML5 и CSS3, который будет работать для всех трех разрешений экрана. Если мы посмотрим на эти файлы, мы сможем найти информацию о том, как эти файлы работают для создания нашей адаптивной веб-страницы.

* Adobe предоставила мне копию этого программного обеспечения для ознакомления.

Copyright 2018 Adobe Systems Incorporated. Все права защищены. Снимки экрана продукта Adobe перепечатаны с разрешения Adobe Systems Incorporated. Adobe, Photoshop, альбом Photoshop, элементы Photoshop, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, фейерверки, содействие, увлечение, Flash Catalyst и Flash Paper является или является [a] зарегистрированным товарным знаком (-ами) или товарным знаком (-ами) Adobe Systems Incorporated в США и / или других странах.