Содержание сайта
Визуальные редакторы
Обзор программ л.1
Xara Web Designer
Обзор

Сайты для разных экранов

Введение
Многократные варианты
Создание вебсайтов RWD от шаблонов  
Создание вебсайтов RWD от существующих сайтов  
Совместное использование объектов в  вариантах 
Варианты и Панели навигации 
Публикация вариантов  


Многократные варианты

Традиционно создание сайтов с отзывчивым размещением (RWD) связано со сложным программированием с использованием Javascript.
Но так как Web Designer Premium - визуальный редактор, то нет необходимости в кодировании.

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

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

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

Когда Вы добавляете или удаляете страницу в одном варианте, это автоматически создает или удаляет страницу в других вариантах. Таким образом у Вашего вебсайта всегда одинаков комплект страниц во всех вариантах.

Web-страницы нужно индивидуально назвать, чтобы быть разделенными на варианты.


Создание вебсайтов RWD от шаблонов

Самый легкий способ создать сайт для разных экранов состоит в том, чтобы использовать один из дизайнов шаблона вебсайта от Галереи Дизайнов (Designs Gallery ) или Довольного каталога (Content catalog )- см. Галерея.

Вы можете видеть, какие шаблоны идут с вариантами (R) рядом с названием папки. Только дважды щелкните шаблоном вебсайта, чтобы открыть это и начать редактировать.
При открытии шаблона Вы будете видеть две вкладки документа, Главный вариант (Main variant), и другой, более узкий шаблон будет Мобильным вариантом (Mobile variant).
Web Designer Premium показывает каждый вариант в отдельной вкладке, таким образом Вы можете быстро и легко переключиться между вариантами.
Вы можете организовать Ваши веб-документы, используя меню Window > "Arrange Views", чтобы расположить Ваши варианты рядом  друг с другом.


Создание вебсайтов RWD от существующих сайтов


Чтобы создать вариант существующего вебсайта, Вы должны будете открыть диалог вариантов Вебсайта (Website variants dialog):
  • Меню "Utilities" > "Website variants" > "Website variants".
  • Щелкните правой кнопкой мыши на вкладке документа и выберите "Website variants".
  • Щелчок правой кнопкой где-нибудь в области работы документа и выбор "Website variants" > "Website variants".
В диалоговом окне вариантов щелкните кнопкой Create и выберите ширину дизайна в пикселях. Эти два варианта выше описывают  страницы (webpages) 760 пикселей (для большого экрана), и Мобильного вариантас шириной по умолчанию 480 пикселей.
Веб - браузер  с шириной 620 пикселей или больше будет показывать Главный вариант (Main variant), браузер с шириной меньше чем 620 пикселей будет показывать Мобильный вариант (Mobile variant).
Вы можете рассмотреть и редактировать размеры существующих вариантов, нажимая на кнопку Свойства..(Properties... ).

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

Подробнее см. Авторскую справку программы.


Совместное использование объектов в  вариантах


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


Варианты и Панели навигации


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


Публикация вариантов

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



Вернуться к Сайты для разных экранов

Последнее обновление: июнь 2015 г.