Вид изображений на страницах сайта uCoz

Все статьи на сайтах uCoz удобнее всего писать в динамических модулях, таких как Каталог статей или Новости сайта. Способов добавления изображений в статью несколько. Подробно об этом я уже писала в Как вставить изображение на сайт .

Для меня, самым удобным является способ через форму добавления материалов. Плюсом этого способа является автоматический эффект Fancybox. Но есть важный минус. Картинки эти в самой форме сложно редактировать: размер, положение на странице и другие нюансы.

Но это очень просто сделать с помощью CSS стилей. Предлагаю Вашему вниманию несколько простых вариантов.

✪ DEMO⇊ СКАЧАТЬ
Эти вариинаты на самом деле являются примером редактирования изображений на сайте. Если Вы знаете CSS стили, то вам не составит труда откорректировать предложенный вариант. Ну а я в свою очередь расскажу как это сделать и какой стиль за что отвечает. В примере везде будет фигурировать серый стиль. Цветовую гамму для других вариантов Вы можете придумать сами или скачать в исходнике, где присутствуют еще голубая и розовая цветовые гаммы.

CSS стили $IMAGE…$

Для того чтобы все изображения в Вашей статье имели один и тот же стиль нужно задать CSS стили для тега img внутри класса eText.

Для этого перейти: Перейти: Панель управления – Дизайн – Управление дизайном (CSS) и в самом конце вставить следующий стиль:

eText a img{  
border: 1px solid #d1d1d1;  
background:#f4f4f4; 
padding: 10px;  
width: 500px;  
margin-left: auto;  
margin-right: auto;}  

где
border – цвет и ширина границы рамки;
background – фон рамки;
padding – ширина рамки;
width – ширина изображения, высота автоматическая;
margin-left: auto; и margin-right: auto; – автоматтческое выравнивание изображения на странице.

Применив этот стиль все изображения в Ваших статьях будут иметь дегкую серую рамку, а ширина всех изображений будет 500 пикселей.

Но, что делать если Вы хотите применить стили только к одной из картинок. Для этого не обойтись уже без HTML

HTML

Для того,чтобы применить стили только к одной картинке, ее нужно вставлять через панель HTML кодов. Изображение $INAME…$ помещаем между двумя тегами <div> с указанием класса.

<div class="vstavit_img">$IMAGE...$</div> 

Номер IMAGE написать тот, который нужен.

CSS

Теперь CSS стили класса vstavit_img будут отвечать за вид этого изображения.

 .vstavit_img img  
{float: left; 
width: 250px; 
margin: 10px; 
border: 1px solid #d1d1d1;  
background:#f4f4f4;  
padding: 10px;} 

Вот так, с помощью CSS стилей Вы можете отредактировать вид изображений. Мой пример самый простой. Добавляйте свои стили и экспериментируйте.