Како позиционирати елементе у Дреамвеавер-у да бисте креирали три распореда у једној течној мрежи

Оно што чини распореде флуидне мреже тако моћним је то што можете да промените позицију и величину елемената у Дреамвеавер-у тако да буду различито распоређени за сваки од три распореда, креирајући дизајне који су оптимизовани за екране мобилних телефона, таблета и десктопа. Да бисте променили ширину или позицију елемента, користите визуелне алате Дреамвеавер-а.

Како уредити мобилни изглед у Дреамвеавер-у

Дреамвеавер поставља стилове на такав начин да каскадирају кроз сваки од три изгледа. То значи да прво треба да добијете мобилни дизајн онако како желите. Затим пређите на изглед таблета и промените само елементе за које желите да се другачије појављују на таблету. На крају, погледајте изглед радне површине. Опет промените само оне елементе за које желите да буду приказани другачије.

Да бисте уредили изглед мобилног уређаја, пратите ова упутства.

Изаберите опцију Мобиле Сизе на дну радног простора.

Област радног простора се мења да прикаже страницу у мобилном прегледу, форматирану одговарајућим скупом стилова.

Напомена: Три мале иконе у доњем десном углу радног простора омогућавају приступ прегледима мобилног, таблета и десктопа. Када прелазите са једног на други, мењате не само величину области приказа већ и одговарајући скуп стилова примењених на вашу страницу.

Додајте текст и слике елементима у свом флуидном распореду мреже баш као што бисте додали садржај било којој другој страници у Дреамвеавер-у.

Можете да копирате и налепите текст, као и да примените ХТМЛ ознаке и ЦСС форматирање.

Изаберите елемент у области дизајна.

Одговарајући ЦСС стил је приказан на панелу Селектори, где га можете уређивати.

Креирајте, уређујте и примените стилове на текст и слике као у било ком другом дизајну странице у Дреамвеавер-у.

Стилови које желите да примените на сва три изгледа треба да буду креирани када се изабере распоред за мобилне уређаје јер ће се ови стилови применити на сва три дизајна осим ако их не замени неки други стил креиран у изгледима таблета или десктопа.

Како уредити изглед таблета у Дреамвеавер-у

Након што добијете изглед мобилног уређаја онако како желите, пређите на изглед величине таблета и уредите стилове који се примењују на тај изглед.

Да бисте уредили изглед таблета, пратите ова упутства.

Изаберите опцију Величина таблета, у доњем десном углу радног простора.

Област радног простора се мења да прикаже страницу у прегледу таблета, форматирану одговарајућим скупом стилова.

Изаберите елемент који желите да промените у колону и користите ручке на десној страни да превучете колону до жељене ширине.

Дреамвеавер пружа колекцију визуелних алата за уређивање који олакшавају подешавање величине и позиционирања флуидних елемената мреже.

Ако превучете ручицу било ког елемента течне мреже с лева на десно, додајете простор на маргинама који приморава елемент да остане са десне стране распореда. Ако превучете ручицу с десна на лево, мењате величину елемента.

Изаберите елемент са промењеном величином који желите да промените, а затим кликните на стрелицу Помери нагоре за ред.

Елемент се помера нагоре и поравнава се поред елемента изнад њега.

Да бисте померили елемент надоле, кликните на стрелицу Почиње нови ред.

Напомена: Кликните на сваку од четири иконе да бисте сакрили елемент, померили га горе или доле, дуплирали или избрисали.

Како уредити изглед радне површине у Дреамвеавер-у

Након што добијете изглед мобилног и таблета онако како желите, пређите на изглед величине радне површине и уредите стилове који се примењују на највећи од три изгледа.

Да бисте уредили изглед радне површине, пратите ова упутства.

Изаберите опцију Величина радне површине у доњем десном углу радног простора.

Област радног простора се мења да прикаже страницу у прегледу радне површине, форматирану одговарајућим скупом стилова.

Изаберите стрелицу за замену у средини било која два елемента да бисте променили положаје два елемента.

Елементи Артицле1 и Артицле2 се могу заменити једноставним кликом на стрелицу Замени између њих.

Форматирајте текст, слике и друге елементе по жељи за дизајн радне површине.

Доступне су све друге опције визуелног форматирања обухваћене изгледом таблета.

Изаберите Датотека→Сачувај све да бисте сачували све датотеке у распореду течне мреже.

Када уређујете изглед течне мреже, уносите измене у ХТМЛ датотеку као и у екстерни стилски лист. Коришћење опције Сачувај све осигурава да сте сачували све потребне датотеке пре него што их прегледате или објавите своју локацију на веб серверу.

Како се пребацивати између распореда у Дреамвеавер-у

Добра је пракса дизајнирати течне распореде мреже овим редоследом: прво мобилну верзију, затим верзију за таблет и на крају верзију за десктоп. Међутим, можете се пребацивати између ова три изгледа док прецизирате своје дизајне.

Имајте на уму неколико следећих општих правила и најбољих пракси:

• Распореди флуидне мреже се креирају коришћењем медијских упита који делују као разделници између сваког од скупова стилова који форматирају изгледе за мобилне уређаје, таблете и десктопе.

• Када уређујете стилове, морате да водите рачуна о томе да уређујете стилове који одговарају изгледу на коме желите да радите.

• Ако погледате одговарајуће стилове који се аутоматски креирају у приказу кода, видећете да су ширине и друге величине наведене до четврте децимале, на пример, ширина: 48,2758%. Ако промените ове бројеве у приказу кода, Дреамвеавер их више неће аутоматски прилагођавати уместо вас.

• Када креирате стилове које желите да примените на сва три изгледа, прво изаберите Ани Медиа са @Медиа панела у панелу ЦСС Десигнер,