[показать] | [показать] | [показать] | [показать] |
Сделать рамку такого вида? Нет ничего проще!
[показать] Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля! |
Возьмем 3 рисунка
Первый рисунок будет использован для рамки, второй - фон текста и третий просто рисунок :)
Теперь, что бы сделать рамку нам нужны ссылки на эти рисунки. Их можно глянуть зайдя в редактирование простым редактором или если кликнуть на рисунках правой кнопкой мыши и посмотреть свойства рисунка
Вот ссылки на наши рисунки.
Все что осталось что бы получить код рамки это зайти на http://vln.dp.ua/cart.php и заполнить все поля формы
[694x518]
Если картинка в рамке не нужна то оставьте поле не заполненым и получите код рамки с текстом
Жмем на "получить код" и получаем код для вставки в дневник
Важно! Не забываем убирать галочку с "Сохранять переводы строк в тексте." в редакторе поста
Див <div></div> предназначет для выделения фрагмента документа. Содержимое дива всегда начинается с новой строки и заканчивается переносом строки.
Для того что бы сделать видимыми границы дива я добавлю к нему рамку
Див занимает всю ширину пространства. Что бы изменить ширину нужно добавить в стили width и указать ширину или в пикселях или в процентах
Сделаем див шириной в половину доступного пространства.
Теперь наш див занимает половину пространства. Но он расположен слева что не всегда красиво.
Окружим див тегами <center> и </center>
Теперь наш див расположен в центре, но и текст выровнен по центру! Для того что бы текст размещался с левой стороны нужно в стиль дива прописать text-align: left;
Значения text-align могут быть:
Тест прилегает вплотную к границам дива. Если граница невидима то в это нет ничего страшного, но в нашем примере это выглядит некрасиво. Сделать отступы от содержимого дива до границ дива можно указав в стиле параметр padding. Если отступ нужен только с одной стороны то можно использовать:
Теперь текст выглядит более красиво
Что бы добавить еще красоты зададит цвет и размер шрифта текста и цвет фона
color - цвет текста, background-color - цвет фона, font-size - размер шрифта
Сделаем этот рисунок фоновым для нашего дива
Добавим к стилю дива параметр background и укажем в нем ссылку на фоновый рисунок
Разместим изображение в дневнике. Для этого просто прикрепим файл изображения к сообщению
[680x680]
Код солнышка:
Сделаем всплывающую подсказку к рисунку. Для этого допишем в код рисунка title.
Теперь при наведении мышки на рисунок будет появляться подсказка с нашим текстом
[680x680]
Есть еще один параметр рисунка который можно использовать для удобства при редактирования постов с рисунками. Это alt. Alt - Это текст который будет виден вместо картинки, если невозможно её показать.
Изначально в нем прописан размер рисунка, но этот текст можно изменить на любой другой. Например можно подписать рисунок.
width и height это ширины и высота рисунка. Можно показать рисунок другого размера просто указав в коде width и height
Мы получили рисунок уменьшеного размера, но реальный размер рисунка не изменился! Вы можете в этом убедиться если сохраните рисунок у себя на компьютере и посмотрите его
Рисунки можно использовать и в ссылках. Для примера загружу уменьшиную копию солнышка
Код маленького солнышка:
Для того что бы картинка была ссылкой сделаем вот такой код ( код я показал в сокращенном виде для простоты чтения)
Сделаем код что бы видно было маленькое солнышко, а при клике на нем в новом окне выводилось солнышко в полном размере.
Для этого веред кодом маленького солнышка вставим код <a href="сслыка на большое солнце">, а после кода маленького солнышка - </a>
Обратите
Сделаем список песен в дневнике. Если есть прямая ссылка на музыкадьный файл можно в дневник добавить код
Вместо MP3_URL нужно прописать ссылку на mp3 файл!!!!!!
Например ссылка на музыкалный файл:
код должен выглядеть следущим образом
Вот какой вид плеера мы получим
Можно сделать что бы плеер открывался в новом окне при нажатии на кнопку "слушать":
Название песни: real_snow_white
[показать]
Но для этого нужно разрешить в Вашем браузере всплывающие окна с сайта vln.dp.ua.
Код для такого варианта:
Не забываем вместо MP3_URL прописывать ссылку на mp3 файл, а вместо NAME - название песни!!!!!!
Ну и для тех кто не хочет возится с кодом, зайдите на http://vln.dp.ua/mp3.php, заполните два поля с названием песни и ссылкой на файл и вы получите готовые коды для вставки в дневник
Сделаем открытку со стихами. Ввиду того что я ленивый и мне лень искать для примера фоны и текст стихов, я позаимствовал все это у
inmira с её поста http://www.liveinternet.ru/users/inmira/post99542587/.
[показать] - Фон для рамки
[показать] - Фон для текста и картинки
[показать] - Картинка.
Коды картинок ( видны при редактировании черновика или поста )
Размеры картинок уменьшены что бы они не занимали много места в посте
Сделаем рамку для открытки. Для этого построим таблицу 1х1 - одна строка, один столбец. Для таблицы пропишем background.
В background укажем ссылку на фоновую картинку для рамки
Что бы получилась рамка нужно "лишнее" пространство залить фоном для текста и рисунка.
Что бы это сделать нужно указать background для ячейки тяблицы
Получилось не совсем то что мы хотели. Это потому что мы "забыли" указать отступ от границы таблицы до ячейки таблицы.
Исправим это дописав в тег <table> параметр cellspacing
И все равно ничего не получилось. Все это потому что в дневнике, для таблицы в глобальных стилях указано border-collapse: collape и из-за этого cellspacing игнорируется
Что бы это исправить нужно к <table> добавить стиль style="border-collapse: separate;"
Ура! У нас есть рамка :). Все что нам осталось это вставить в ячейку таблицы рисунок и текст
Иногда нужно выложить код в дневник. Для этого используют тег .
Можно в добавить 2 параметра cols="30" - ширина области вывода 30 символов и rows="4" - высота области вывода 4 строки. Значение параметров взято для примера 30 и 4.
"Разукрасить" вывод кода можно если добавить к стилевые параметры. Например цвет текст, фоновый цвет, размер шрифта, цвет и толщина рамки и тд.
Вот и все :)
Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взял 6 анимированных смыйликов
Для того что бы рисунки располагались горизонтально необходимо убрать галочку с "Сохранять переводы строк в тексте.".
Я специально взял смайлы разного размера. Попробуем теперь сделать вывод рисунков более логичным.
Большие смайлы в одной колонке, маленькие - в другой
Для этого построим таблицу из двух колонок и трех строк ( по количеству смайлов одного размера )
Коды рисунков смайлов ( видны при редактировании черновика или поста )
Что бы не гадать где какой рисунок я в кодах рисунков, в alt подписал рисунки. alt - это альтернативный текст который виден в том случае если рисунок по какой то причине не может быть показан
Все что теперь осталось это разместить рисунки каждый в своей ячейке таблицы
|
|
|
|
Создадим таблицу 4 строки 2 колонки
В первой строке текст размещен слева, в последней строке - справа, а в централной строке - посредине
| Первая строка. Текст1 | Первая строка. Текст2 |
| Последняя строка. Текст1 | Последняя строка. Текст2 |
| Текст1 | Текст2 |
Добавим заголовок к нашей таблице. Для этого используем тег . Для этого тега есть два параметра align - задает выравнивание заголовка и valign - определяет вверху таблицы или внизу будет выводится заголовок.
допустим только внутри тега сразу после открывающего тега.
Вид заголовка в зависимости от align будет отличаться в разных браузерах.
| Первая строка. |