|
Darth_LegiON
|
Дата: Вторник, 25.02.2014, 22:56 | Сообщение # 1
|
Не на сайте
|
Эта тема посвящена тому, как оформлять статьи. Чтобы делать это на уровне, необходимы хотя бы базовые знания языка 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
|
|
Не на сайте
|
Наверное, самого главного-то я и не сказал. Исправляюсь.
Загрузка текста в статью
Во-первых, редактируйте текст в ворде. Это позволит избежать самых крупных ляпов. А перед окончанием нажмите на кнопку "показать непечатаемые символы" и посмотрите, нет ли там лишних символов или пробелов. Потом есть два пути.
- Первый - скопировать весь текст (или кусками, если там есть картинки или разделы) в блокнот. Затем заходите в визуальный редактор и, если статья новая, выбираете пункт меню "Абзац", а в нем "Обычный (тег Р)". Затем вставляете текст из блокнота.
- Второй - копируете текст прямо из ворда, а затем выделяете его в редакторе и жмете кнопку с ластиком. Визуально все так же, но вот какой гадостью может обернуться куча лишних тегов - неясно, зато у вас будут готовые маркированные/нумерованные списки. Используйте этот способ только если более-менее разбираетесь в HTML и готовы разобраться со всей гадостью, которая у вас появится в тексте.
Так или иначе, у вас будет готовый текст, разделенный на абзацы. Но четверостишия и эпиграфы лучше оформлять монолитным текстом (без увеличенных межстрочных интервалов), для этого встаете курсором в конец строки, нажимаете Delete, а затем Shift-Enter. Новый абзац заменится на простой перенос строки, текст будет монолитным.
Разделение на разделы
Наверняка, добавляя в текст картинки, вы сталкивались с тем, что они наезжают на другие разделы статьи. Чтобы картинка оставалась только в одном разделе, вставьте после него горизонтальную черту, а в начало статьи в HTML поместите вот такой код:
Код <style>hr{clear:both}</style>
Главный администратор.
Если ты не ведаешь за собой ничего достойного сожаления, значит у тебя либо завидно избирательная память, либо жалкая жизнь. © Стэн
Один раз - не саирабаз ©
|
| |
|
|
Войти
