Как да подравните елементи с поплавъци в Dreamweaver

Дизайнерите често подравняват изображение, а

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

Кредит: Изображение от istockphoto.com

CSS предлага много предимства, когато става въпрос за подравняване на елементи като това, но начинът, по който настройвате тези стилове, не е толкова очевиден, колкото може да очаквате в началото, защото използвате опцията float.

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

CSS оформленията, включени в Dreamweaver CC, вече имат плаващи стилове, които можете да използвате за подравняване на елементи отдясно и отляво. Тези стилове на класа се наричат ​​.fltlft (защото, както се досещате, float вляво) и .fltrt (за float вдясно).

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

Щракнете върху знака плюс в панела CSS Designer Selectors.

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

Щракнете двукратно, за да изберете името, което Dreamweaver е добавил към панела и да го промените на името, което искате за вашия нов стил, или щракнете, за да изберете празното поле и въведете име.

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

Щракнете двукратно върху новото име и го редактирайте по желание.

Въпреки че можете да наименувате тези стилове, както предпочитате, стиловете за подравняване обикновено се наричат ​​със съкратените fltrt и fltlft, които означават float вдясно и float вляво съответно.

Например, ако създадете стил за подравняване на елементите вляво, ще го наречете .fltlft.

В панела Properties щракнете върху иконата, която задава Float наляво.

Използвайте настройките за полета в панела Properties, за да създадете поле около плаващия елемент.

Добра практика е да добавите пространство на полето към противоположната страна от настройката за плаване. Ако създавате стил за плаване на изображение вляво, добавете 5 или 10 пиксела пространство към полето за дясно поле. Когато подравните изображение в лявата част на страницата, ще се създаде поле между изображението и всеки друг елемент, който се обвива до изображението.

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

Изберете името на стила, който сте създали от падащото меню Клас в инспектора на свойства.

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

Повторете стъпки 1–7, веднъж с плаващата стойност, зададена на дясно и 5 до 10 пиксела пространство за полета в полето Ляво поле в категорията Box, и отново с Float, зададено наляво и 5 до 10 пиксела поле пространство в дясно поле за поле в категорията Box.