Как да позиционирате елементи в Dreamweaver, за да създадете три оформления в една течна мрежа

Това, което прави оформленията на течната мрежа толкова мощни, е, че можете да промените позицията и размера на елементите в Dreamweaver, така че да са подредени по различен начин за всяко от трите оформления, създавайки дизайни, оптимизирани за екрани на мобилни устройства, таблети и настолни компютри. За да промените ширината или позицията на елемента, използвате визуалните инструменти на Dreamweaver.

Как да редактирате мобилното оформление в Dreamweaver

Dreamweaver настройва стиловете по такъв начин, че да преминават през всяко от трите оформления. Това означава, че първо трябва да получите мобилния дизайн по начина, по който го искате. След това преминете към оформлението на таблета и променете само елементите, които искате да се показват по различен начин на таблета. Накрая вижте оформлението на работния плот. Отново променете само елементите, които искате да се показват по различен начин.

За да редактирате мобилното оформление, следвайте тези инструкции.

Изберете опцията Mobile Size в долната част на работното пространство.

Областта на работното пространство се променя, за да се покаже страницата в мобилната визуализация, форматирана със съответния набор от стилове.

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

Добавете текст и изображения към елементите във вашата течна мрежа, точно както бихте добавили съдържание към всяка друга страница в Dreamweaver.

Можете да копирате и поставяте текст, както и да прилагате HTML тагове и CSS форматиране.

Изберете елемент в областта на дизайна.

Съответният CSS стил се показва в панела Селектори, където можете да го редактирате.

Създавайте, редактирайте и прилагайте стилове към текст и изображения, както бихте направили при всеки друг дизайн на страници в Dreamweaver.

Стиловете, които искате да приложите и към трите оформления, трябва да бъдат създадени, когато е избрано мобилното оформление, тъй като тези стилове ще се прилагат и към трите дизайна, освен ако не бъдат отменени от друг стил, създаден в оформленията на таблета или настолния компютър.

Как да редактирате оформлението на таблета в Dreamweaver

След като получите мобилното оформление по желания от вас начин, преминете към оформлението на размера на таблета и редактирайте стиловете, които се прилагат към това оформление.

За да редактирате оформлението на таблета, следвайте тези инструкции.

Изберете опцията Размер на таблета в долния десен ъгъл на работното пространство.

Областта на работното пространство се променя, за да се покаже страницата в предварителния преглед на таблета, форматирана със съответния набор от стилове.

Изберете елемент, който искате да промените в колона, и използвайте манипулаторите от дясната страна, за да плъзнете колоната до желаната ширина.

Dreamweaver предоставя колекция от инструменти за визуално редактиране, които улесняват регулирането на размера и позиционирането на елементите на течна мрежа.

Ако плъзнете манипулатора на който и да е течен елемент от мрежата отляво надясно, добавяте пространство за полета, което принуждава елемента да остане отдясно на оформлението. Ако плъзнете манипулатор отдясно наляво, преоразмерявате елемента.

Изберете елемент с преоразмерени размери, който искате да препозиционирате, и след това щракнете върху стрелката Преместване нагоре на ред.

Елементът се придвижва нагоре и се подравнява до елемента над него.

За да преместите елемент надолу, щракнете върху стрелката Стартира нов ред.

Забележка: Щракнете върху всяка от четирите икони, за да скриете елемент, да го преместите нагоре или надолу, да го дублирате или изтриете.

Как да редактирате оформлението на работния плот в Dreamweaver

След като получите оформленията за мобилни устройства и таблети по желания от тях, преминете към оформлението с размер на работния плот и редактирайте стиловете, които се прилагат за най-голямото от трите оформления.

За да редактирате оформлението на работния плот, следвайте тези инструкции.

Изберете опцията Размер на работния плот в долния десен ъгъл на работното пространство.

Областта на работното пространство се променя, за да се покаже страницата в предварителен преглед на работния плот, форматирана със съответния набор от стилове.

Изберете стрелка за размяна в средата на всеки два елемента, за да превключите позициите на двата елемента.

Елементите Article1 и Article2 могат да бъдат разменени, като просто щракнете върху стрелката за размяна между тях.

Форматирайте текста, изображенията и други елементи, както желаете за дизайна на работния плот.

Всички други опции за визуално форматиране, обхванати в оформлението на таблета, са налични.

Изберете File→Save All, за да запазите всички файлове в оформлението на течната мрежа.

Когато редактирате течно оформление на мрежата, правите промени в HTML файла, както и във външната таблица със стилове. Използването на опцията Save All гарантира, че сте запазили всички необходими файлове, преди да ги прегледате или да публикувате сайта си на уеб сървър.

Как да превключвате между оформления в Dreamweaver

Добра практика е да проектирате течни оформления на мрежата в този ред: първо мобилната версия, след това версията за таблет и накрая версията за настолни компютри. Можете обаче да превключвате между тези три оформления, докато прецизирате дизайна си.

Имайте предвид следните няколко общи правила и най-добри практики:

• Оформленията на течна мрежа се създават с помощта на медийни заявки, които действат като разделители между всеки от наборите от стилове, които форматират оформленията за мобилни устройства, таблети и настолни компютри.

• Когато редактирате стилове, трябва да внимавате да редактирате стиловете, които съответстват на оформлението, върху което искате да работите.

• Ако прегледате съответните стилове, които се създават автоматично в кодов изглед, ще видите, че ширините и другите размери са посочени до четвъртата десетична запетая, например ширина: 48,2758%. Ако промените тези числа в кодовия изглед, Dreamweaver вече няма да ги коригира автоматично вместо вас.

• Когато създавате стилове, които искате да приложите и към трите оформления, първо изберете Any Media от панела @Media в панела CSS Designer,