Создание сайтов

Создание сайта в WordPress, или советы самоучки

пример рамочки

Совет первый

Рано или поздно автор сайта столкнется с необходимостью привести картинки в достойный вид: рамка и отступ от текста. Оказалось, все проще, чем кажется. Картинку можно вставить традиционным способом (выбрать картинку из библиотеки, нажав Add Media). Потом перейти во вкладку Text и пошалить в запретной зоне HTML. Не торопясь, находим набор символов, который “описывает” картинку. Например: <p class=””><a href=”http://www.mostymira.ru/bruklinskiy.php”><img class=” alignleft wp-image-280″ style=”border: 10px #CEE3F6 solid; margin: 20px 20px 20px 20px;” src=”http://esl-bridges.ru/wp-content/uploads/бруклинский-мост.jpg” alt=”бруклинский мост” width=”199″ height=”150″ /></a></p> и в нужное место просто вставляем текст: style=”border: 10px #CEE3F6 solid; margin: 20px 20px 20px 20px;”

Рамочка получится сплошная размером 10 пикселей (можно поменять). Код цвета можно выбрать на сайте: http://html-color-codes.info/Cvetovye-kody-HTML/. Размер отступа от текста в данном случае 20 пикселей, но можно поменять. Если сразу сложно разобраться в коде, то сигнал – слово “alt=”, код можно вставить перед ним, а оно там потом само на место переместится. Вернуться в режим Visual, убедиться, что все красиво. Обновить страницу.

Совет второй

crow_new2Чтобы картинка была не только в рамочке, но и с тенью, можно еще “подшаманить”. Теперь в то же место, что и команду для рамочки нужно вставить команду “тень”. Находим: <p class=””><a href=”http://www.mostymira.ru/bruklinskiy.php”><img class=” alignleft wp-image-280″ style=”border: 10px #CEE3F6 solid; margin: 20px 20px 20px 20px;” src=”http://esl-bridges.ru/wp-content/uploads/бруклинский-мост.jpg” alt=”бруклинский мост” width=”199″ height=”150″ /></a></p> и размещаем команду box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5); перед закрывающими кавычками после размеров рамки.

Получится:

<p class=””><a href=”http://www.mostymira.ru/bruklinskiy.php”><img class=” alignleft wp-image-280″ style=”border: 10px #CEE3F6 solid; margin: 20px 20px 20px 20px; box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5);” src=”http://esl-bridges.ru/wp-content/uploads/бруклинский-мост.jpg” alt=”бруклинский мост” width=”199″ height=”150″ /></a></p>

Прочие тени есть здесь: http://htmlbook.ru/css3-na-primerakh/teni.