Ново оформление на флуидната мрежа Dreamweaver CS6

• Може 5, 2024

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

В миналото би трябвало да се създаде различен CSS файл за всяка различна разделителна способност на екрана и да се използва медийна заявка, за да се назначи необходимия CSS файл. Това отне много време и добави към общите разходи за разработване на сайта, което беше лоша новина както за разработчика, така и за клиента. Dreamweaver CS6 отне голяма част от труда от създаването на адаптивни уебсайтове.

Този нов процес на работа зависи от новата схема на Fluid Grid, която донякъде е като стартов шаблон с подредби и типография за всяка резолюция на екрана за вашия уебсайт.

1. Просто щракнете върху File - New Fluid Grid Layout от Menubar.
   
   
2. В диалоговия прозорец Нов документ ще видите настройките по подразбиране за тази нова адаптивна уеб страница. Ширината е фиксирана за всяка от различните резолюции на екрана.
   
   Мобилен 480px
   Таблица 768px
   Работен плот 1232px
   
   
3. Имате възможност да промените броя на колоните по подразбиране и процента на ширината на колоните за всяка разделителна способност на екрана. По подразбиране са:
   
   5 колони за мобилни устройства - 91%
   Таблет 8 колони - 93%
   Настолни 10 колони - 90%
   
   
4. Работното пространство по подразбиране може да показва кода и дизайнерските изгледи. Както можете да видите в изгледа на дизайна, новият файл вече има един div tag. Можете да промените ID и клас по подразбиране за div в панела Properties.
   
   Разбира се, вашата уеб страница ще се нуждае от повече от един div. Така че можем да добавим още divs за заглавието, навигацията, main, отстрани и долен колонтитул.
   
   
5. За да добавите нов div, изберете Insert Fluid Grid Layout Div Tag в панела Insert.
   
   
6. В диалоговия прозорец можете да дадете име на идентификатора за маркера.
   
   
7. Когато добавим всички основни divs за нашата страница, можем да ги щракнем и плъзнем, за да ги препозиционираме в рамките на мрежата.
   
   

Предлага се да започнем да изграждаме мобилната версия на нашия сайт и да преминем към по-големите размери. Можете лесно да сравнявате визуалните резултати, докато работите, като използвате превключвателя на разделителната способност за мобилни, таблетни и настолни резолюции.

Когато запишем нашата подредба, получаваме един HTML5 и CSS3 файл, който ще работи за трите резолюции на екрана. Ако разгледаме тези файлове, можем да намерим информация за това как работят файловете, за да създадат нашата адаптивна уеб страница.

* Adobe предостави копие на този софтуер за мен за преглед.

Copyright 2018 Adobe Systems Incorporated. Всички права запазени. Екран (и) на екрана с продукти на Adobe препечатани с разрешение от Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst и Flash Paper е или са [a] регистрирана търговска марка (и) или търговска марка (и) на Adobe Systems Incorporated в Съединените щати и / или други страни.

Инструкции Видео: Leap Motion SDK (Може 2024).