Како поравнати елементе са пловцима у Дреамвеаверу

Дизајнери често поравнавају слику, а

таг, или други елемент лево или десно од веб странице у Дреамвеавер-у, а затим умотајте било који текст или други садржај око тог елемента. Слика је поравната десно од колоне тако да се текст прелама поред ње са леве стране. У корацима који следе сазнаћете како да креирате стилове попут овог.

Кредит: Слика са истоцкпхото.цом

ЦСС нуди многе предности када је у питању поравнавање оваквих елемената, али начин на који постављате ове стилове није тако очигледан као што бисте у почетку очекивали јер користите опцију флоат.

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

ЦСС распореди укључени у Дреамвеавер ЦЦ већ имају флоат стилове које можете користити за поравнавање елемената десно и лево. Ови стилови класе се зову .флтлфт (за, погађате, флоат лево) и .флтрт (за флоат десно).

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

Кликните на знак плус на панелу ЦСС Десигнер Селецторс.

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

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

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

Двапут кликните на ново име и уредите га по жељи.

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

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

У панелу Својства кликните на икону која поставља Флоат на лево.

Користите подешавања маргине на панелу Својства да бисте направили маргину око лебдећег елемента.

Добра је пракса да додате простор на маргини на супротној страни од поставке флоат. Ако креирате стил за померање слике на леву страну, додајте 5 или 10 пиксела простора у поље десне маргине. Када поравнате слику са леве стране странице, створиће се маргина између слике и било ког другог елемента који се премотава поред слике.

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

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

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

Поновите кораке 1–7, једном са плутајућим постављеним на десно и 5 до 10 пиксела простора на маргини у пољу лева маргина у категорији Бок, а поново са плутајућим постављеним на лево и 5 до 10 пиксела простора на маргини у десној поље маргине у категорији Бок.