Все статьи на сайтах uCoz удобнее всего писать в динамических модулях, таких как Каталог статей или Новости сайта. Способов добавления изображений в статью несколько. Подробно об этом я уже писала в Как вставить изображение на сайт .
Для меня, самым удобным является способ через форму добавления материалов. Плюсом этого способа является автоматический эффект Fancybox. Но есть важный минус. Картинки эти в самой форме сложно редактировать: размер, положение на странице и другие нюансы.
Но это очень просто сделать с помощью CSS стилей. Предлагаю Вашему вниманию несколько простых вариантов.
Эти вариинаты на самом деле являются примером редактирования изображений на сайте. Если Вы знаете CSS стили,то Вам не составит труда откорректировать предложенный вариант. Ну а я в свою очередь расскажу как это сделать и какой стиль за что отвечает. В примере везде будет фигурировать серый стиль. Цветовую гамму для других вариантов Вы можете придумать сами или скачать в исходнике, где присутствуют еще голубая и розовая цветовые гаммы.
CSS стили $IMAGE…$
Для того чтобы все изображения в Вашей статье имели один и тот же стиль нужно задать CSS стили для тега img внутри класса eText.
Для этого перейти: Перейти: Панель управления – Дизайн – Управление дизайном (CSS) и в самом конце вставить следующий стиль:
|
1 2 3 4 5 6 7 |
eText a img{ border: 1px solid #d1d1d1!important; background:#f4f4f4!important; padding: 10px!important; width: 500px; margin-left: auto; margin-right: auto;} |
где
border – цвет и ширина границы рамки;
background – фон рамки;
padding – ширина рамки;
width – ширина изображения, высота автоматическая;
margin-left: auto; и margin-right: auto; – автоматтческое выравнивание изображения на странице.
Применив этот стиль все изображения в Ваших статьях будут иметь дегкую серую рамку, а ширина всех изображений будет 500 пикселей.
Но, что делать если Вы хотите применить стили только к одной из картинок. Для этого не обойтись уже без HTML
HTML
Для того,чтобы применить стили только к одной картинке, ее нужно вставлять через панель HTML кодов. Изображение $INAME…$ помещаем между двумя тегами <div> с указанием класса.
|
1 |
<div class="vstavit_img">$IMAGE...$</div> |
Номер IMAGE написать тот, который нужен.
CSS
Теперь CSS стили класса vstavit_img будут отвечать за вид этого изображения.
|
1 2 3 4 5 6 7 |
.vstavit_img img {float: left; width: 250px!important; margin: 10px!important; border: 1px solid #d1d1d1!important; background:#f4f4f4!important; padding: 10px!important;} |
Вот так, с помощью CSS стилей Вы можете отредактировать вид изображений. Мой пример самый простой. Добавляйте свои стили и экспериментируйте.
