03 августа 2012 года в03.08.2012 16:42 1 0 10 16

FAQ ПО ОФОРМЛЕНИЮ ПОСТОВ

В блоге важную роль играет не только содержание, но и оформление. Я решила написать подробный FAQ по оформлению постов. Конечно, я не первая, кто пишет подобный пост, но вы можете найти что-то новое для себя. Я собрала самые основные пункты, которые и сама использую. Итак, поехали.

ВЫРАВНИВАНИЕ ТЕКСТА

<p style="text-align: значение" ></p>

center - по центру
left - слева
right - справа
justify - по ширине

ТЕКСТ

Чем удобен html, так это тем, что свое сообщение можно оформить по-своему: выбрать свой шрифт, размер, цвет и далее. Примеры:

VIEWY

<p style= "font-family: 'Arial Rounded MT Bold'; font-size:16pt;" ><a style= "color:#FF7F50" >VIEWY</a></p>

font-family - название шрифта (Arial, Tahoma, Times New Roman и т.д.). В данном случае я использовала Arial Rounded MT Bold;

font-size - размер шрифта (в pt);

"color:#FF7F50" - цвет шрифта. Выбрать цвет можно в любой таблице html-цветов. Просто введите в гугл, и он выдаст сотни вариантов;

VIEWY

<p style="text-align:center; font-family: 'Arial Rounded MT Bold';font-size:16pt;text-shadow: #000000 1px 1px 2px;"><a style="color:#FF7F50">VIEWY</a></p>

Для текста с тенью добавляем в наш код значение text-shadow: #000000 1px 1px 2px

#000000 - цвет тени, 1px 1px 2px - выступ тени.

VIEWY

<p style="text-align:center; font-family:Arial Rounded MT Bold; font-size:16pt;background-color: #FF7F50">VIEWY</p>

Для шрифта с фоном значение background-color.
background-color: #FF7F50 - html цвет фона

РАМКИ

< blockquote style="float: none; padding: 3px 15px; border: thin solid #000000; ">
<p style="text-align: center;font-family: arial;font-size:10pt">Ваш текст</p></ blockquote >

blockquote - цитата. Если не хотите использовать стандартную, присвоив свои значения, вы получите текст в желаемой рамке.

border: thin solid #000000
thin solid - тонкая рамка, solid - "жирная "
#000000 - цвет рамки

<p style="text-align: center; font-family: arial; font-size:10px; border-style: double; color: #000000;">Ваш текст</p>

Для двойной рамки добавляем к другим значениям текста (<p style=""></p> ;) значение border-style: double

ИЗОБРАЖЕНИЯ

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

ОБТЕКАЕМОСТЬ ИЗОБРАЖЕНИЯ ТЕКСТОМ.

<p><img hspace="20" align="right" src="https://static.tumblr.com/a1xj6rw/CbSm7afe5/untitled-6.gif" /></p>

Значение: hspace="20" align="right". Вы можете разместить картинку как справа, так и слева.

ИЗОБРАЖЕНИЕ С ЗАКРУГЛЕННЫМИ КРАЯМИ

<img style= "border-radius: 50px 50px 50px 50px" src="https://25.media.tumblr.com/tumblr_m86mf8bHEA1rbxosuo1_500.gif" height="214" />

Для закругленных краев к img style= добавляем значение "border-radius: 50px 50px 50px 50px".

50px - размер самих краев (острее/круглее).

Надеюсь, моё руководство кому-нибудь поможет. Чаще заходите на вьюи, вдохновляйтесь и пишите замечательные посты! Удачи!

Комментарии

Зарегистрируйтесь или войдите, чтобы добавить комментарий

Новые заметки пользователя

ASTURIA — dream avenue

24

уж очень давно приглядываюсь я к 20 фактам, и вот не выдержала душа поэта. приняла от вас, передаю всем, у кого найдётся желание и вдохно...

22

я наконец-то добралась до нового сезона Doctor Who и только что закончила смотреть пятую серию. с моффатом очень часто возникает ощущение...

23

у меня ломка по Supernatural, всё считаю дни до премьеры следующего сезона. представить, что скоро всему этому придёт конец… почти...

22

к огда нет рамок, границ, препятсвий. возраст - не помеха, никогда не поздно начать заниматься именно тем, чем хочешь. не стоит поддавать...

27

мой прекрасный Нью-Йорк

23

меня здесь долго не было, потому что целыми днями пропадаю в маке, работая по 8 часов в сутки. зато быстрее пролетает время, осталось сов...