Войти
Добро пожаловать, Гость!
Общаться в чате могут только вошедшие на сайт пользователи.
200
В отдельном окне
Скрыть
  • Страница 1 из 1
  • 1
Модератор форума: Darth_LegiON  
Оформление статей и блогов
Darth_LegiON Дата: Вторник, 25.02.2014, 22:56 | Сообщение # 1
33
Не на сайте
Эта тема посвящена тому, как оформлять статьи. Чтобы делать это на уровне, необходимы хотя бы базовые знания языка HTML

Картинки


Картинки в статьи и фанфики всегда заливайте на сайт. Под статью можно загрузить 50 изображений. Если вам внезапно понадобилось MOAR, стучитесь ко мне в личку, залью сразу и много. Минимизируйте количество внешних ссылок.

Чтобы получить ссылку на картинку, придется сначала сохранить материал. А потом около каждой в списке появится кнопка [i]- это и есть ссылка на картинку. Правой кнопкой - скопировать URL картинки - и она у вас в буфере обмена.

Для оформления картинок я сделал специальные стили. Стиль добавляется к коду картинки следующим образом:
Код
<img src="ссылка" (тут могут быть еще параметры) class="класс">

Сейчас есть такие классы:
header - вставляется в "шапку". Автоматически выравнивает ее по левому краю, добавляет отступы, для новостей и файлов свечение, для статей - рамку. Автоматически устанавливает ширину в 180пикс, но если картинка не используется нигде в большем размере, лучше сжать ее самому. Рекомендуемые размеры картинки для шапки - 180x100.
img_left и img_right - выравнивание по левому и правому краю. Автоматически устанавливает ширину в 300 пикс, отступы и границы так, как надо.
img_center - то же самое, что верхние, только не выравнивает слева и справа, и вместо ширины 300 выставляет высоту 170. Можно помещать в отдельный абзац, в котором уже выставлено выравнивание посередине. Такой стиль пригодится, если в текст надо вставить набор картинок.

Превью по клику


В текст старайтесь не вставлять большие картинки. Лучше, чтобы пользователь щелкнул на ней, и она развернулась на весь экран во всей красе. Для этого код картинки надо обернуть в такое вот непотребство:
Код
<a href="ссылка" class="ulightbox" target="_blank"><код картинки></a>

Наиболее часто используемые коды


Код
По правому краю с превью
<a href="ссылка" class="ulightbox" target="_blank"><img src="ссылка" alt="" class="img_right"></a>
По правому краю без превью
<img src="ссылка" alt="" class="img_right">
По левому краю с превью
<a href="ссылка" class="ulightbox" target="_blank"><img src="ссылка" alt="" class="img_left"></a>
Без выравнивания
<a href="ссылка" class="ulightbox" target="_blank"><img src="ссылка" alt=""></a>
По левому краю без превью
<img src="ссылка" alt="" class="img_left">
Для шапки
<img src="ссылка" alt="" class="header">

Кнопки


Вы можете сделать в своей статье или другом материале ссылки в виде кнопок. Для этого нужно приписать ссылке стиль button:
Код
<a href="ссылка" class="button">текст</a>

Текст по ширине


Чтобы по умолчанию текст в материале был выравнен по ширине, нужно вставить в начало HTML-кода такую строку:
Код
<style>p {text-align:justify}</style>

Теги


Всегда проставляйте материалу теги. Это ключевые слова, из текста и заголовка, например, имена персонажей фанфика или то, чему посвящена статья. В фанфиках всегда вписывайте в теги жанры. В картинках желательно перечислить тех, кто/что на ней изображено, в том числе к вам задом, а к лесу передом.
Но не перебарщивайте, тегов должно быть не больше десяти.

Главный администратор.

Если ты не ведаешь за собой ничего достойного сожаления, значит у тебя либо завидно избирательная память, либо жалкая жизнь. © Стэн

Один раз - не саирабаз ©
 
Darth_LegiON Дата: Вторник, 25.02.2014, 22:56 | Сообщение # 2
33
Не на сайте
Наверное, самого главного-то я и не сказал. Исправляюсь.

Загрузка текста в статью


Во-первых, редактируйте текст в ворде. Это позволит избежать самых крупных ляпов. А перед окончанием нажмите на кнопку "показать непечатаемые символы" и посмотрите, нет ли там лишних символов или пробелов. Потом есть два пути.
  • Первый - скопировать весь текст (или кусками, если там есть картинки или разделы) в блокнот. Затем заходите в визуальный редактор и, если статья новая, выбираете пункт меню "Абзац", а в нем "Обычный (тег Р)". Затем вставляете текст из блокнота.
  • Второй - копируете текст прямо из ворда, а затем выделяете его в редакторе и жмете кнопку с ластиком. Визуально все так же, но вот какой гадостью может обернуться куча лишних тегов - неясно, зато у вас будут готовые маркированные/нумерованные списки. Используйте этот способ только если более-менее разбираетесь в HTML и готовы разобраться со всей гадостью, которая у вас появится в тексте.

Так или иначе, у вас будет готовый текст, разделенный на абзацы. Но четверостишия и эпиграфы лучше оформлять монолитным текстом (без увеличенных межстрочных интервалов), для этого встаете курсором в конец строки, нажимаете Delete, а затем Shift-Enter. Новый абзац заменится на простой перенос строки, текст будет монолитным.

Разделение на разделы


Наверняка, добавляя в текст картинки, вы сталкивались с тем, что они наезжают на другие разделы статьи. Чтобы картинка оставалась только в одном разделе, вставьте после него горизонтальную черту, а в начало статьи в HTML поместите вот такой код:
Код
<style>hr{clear:both}</style>

Главный администратор.

Если ты не ведаешь за собой ничего достойного сожаления, значит у тебя либо завидно избирательная память, либо жалкая жизнь. © Стэн

Один раз - не саирабаз ©
 
  • Страница 1 из 1
  • 1
Поиск: