Работа с картинками

ДОБАВЛЯЕМ КАРТИНКУ В ПОСТ, НЕ КОПИРУЯ ЕЁ СЕБЕ В КОМПЬЮТЕР

Нажимаете правой кнопкой на картинку, "свойства" ("информация об изображении"), копируете адрес (ссылку), потом вставляете в эту формулу:

<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ" border="0" />

Серия сообщений "Шаблоны":
Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - Делаем рамочку с картинками
...
Часть 38 - Создание таблиц и картинки в ряд
Часть 39 - КРАСИВЫЕ ШАБЛОНЫ ДЛЯ ВСТАВКИ МУЗЫКАЛЬНЫХ ПЛЕЕРОВ ОТ lana lanochka
Часть 40 - Работа с картинками
Часть 41 - СОЗДАЁМ СЛАЙД ШОУ
Часть 42 - КАРТИНКА И ФЛЕШКА ПОСЕРЕДИНЕ РАМОЧКИ
Часть 43 - Делаем разноцветное, движущиеся ПРИВЕТСТВИЕ. Урок от SvetlanaT.

Как расположить текст справа и слева от картинки и т.д

По многочисленным просьбам читателей объясню еще раз, как расположить текст справа и слева от картинки, внизу картинки, вверху и посредине.

Серия сообщений "Уроки для блогов":

Часть 1 - Как скопировать текст с сайта, который защищен от копирования.
Часть 2 - Как взять картинку с альбомов Яндекс -фото
...
Часть 34 - Как процитировать пост и сохранить в рубрике.
Часть 35 - Вставляем музыку в дневник из компьютера
Часть 36 - Как расположить текст справа и слева от картинки и т.д

Пишем ТЕКСТ В ДВА СТОЛБЦА

ТЕКСТ В ДВА СТОЛБЦА
ЕСТЬ ФОРМУЛА:
<table width="100%"><tr><td width="50%">текст левой колонки<td width="50%">текст правой колонки</td></td></tr></table>

Главное, текст поставить, чтобы ровно лёг, между таким:
<div style="font: 20px Georgia; padding: 0px;"> ТЕКСТ </div>
где можно менять размер текста - цифра 20 (больше/меньше)
и вид шрифта: - Georgia - меняй, как хочешь:
Arial, Garamond, Cambria, Tahoma, Verbana, times new roman, courier new, century gothic
... и т.д., вообще шрифтов навалом.
Тогда сам шрифт и размер его не будут меняться ни при цитировании, ни при смене схемки у вас в дневнике, т.к. в схемах заложен свой шрифт и его размер.

Общий вид такой рамки будет:
<table width="100%"><tr><td width="50%"><div style="font: 20px Georgia; padding: 0px;"> 1 колонка</div><td width="50%"> <div style="font: 20px Georgia; padding: 0px;"> 2 колонка </div></td></td></tr></table>

---

пример
Алексей Апухтин

Ни отзыва, ни слова, ни привета, Пустынею меж нами мир лежит, И мысль моя с вопросом без ответа Испуганно над сердцем тяготит!

Ужель среди часов тоски и гнева Прошедшее исчезнет без следа, Как лёгкий звук забытого напева, Как в мрак ночной упавшая звезда?

---

В примере заменила размер шрифта с 20 на 22, но можно заменить ширину рамки
со 100% в самом начале кода на 90-95 (надо смотреть и подгонять)

---

Баннеры.

делаем ТАБЛИЦЫ на ЛИру

ДОРОГИЕ МОИ!  несколько своих записей я оформляла вот в таких таблицах , как ЗДЕСЬ : http://www.liveinternet.ru/users/4026647/post332951581/ http://www.liveinternet.ru/users/4026647/post332881459/ http://www.liveinternet.ru/users/4026647/post332877016/ такая передача информации очень наглядна и в тоже время лаконична,поэтому многим понравилась и меня просили объяснить,как я это делаю.. ТАК ВОТ,это совсем не сложно и быстро сделать в РЕДАКТОРЕ  CKEditor ЛИру

ЧИТАЕМ ДАЛЬШЕ и ПОВТОРЯЕМ,ЭТО ПРОСТО

Текст с тенью без ФШ (в уроках Сергея)

Обтекание картинки текстом

Чтобы текст обтекал картинку слева, то после размеров картинки или после типа файла (png, jpg, gif) вставляем align="left" hspace="10" space="10", если нужно, чтобы картинка была справа, то вставляем align="right" hspace="10" space="10"

Примеры:
Мужчина, который бреется утром - любит начальство.
Мужчина, который бреется вечером - любит женщин.
Мужчина, который бреется и утром, и вечером - любит и тех, и других.
А вот тот мужчина, который бреется чаще двух раз в день - просто мазохист.


Зима. За окном мороз -35.
Мысли НЕЗАМУЖНЕЙ женщины: теплый плед, свечи, вино... мужчина... Мысли женщины которая ЗАМУЖЕМ: самое время помыть морозилку!
-------------------------------------------
- Почему у женщины длина ступни меньше, чем у мужчины?
- Это произошло в процессе эволюционного развития: чтобы женщина смогла стоять ближе к кухонной раковине при мытье посуды.

Картинки в таблице на Ли ру. С уроком по таблице.

Читать далее...

Все для дизайна сайта! Бесплатно!

Делаем кнопки в ФШ

Серия сообщений "ШПАРГАЛКИ":

Серия сообщений "-уроки фотошоп":

заготовки для творчества

Фотографии в альбоме «Фоны в рамочках», автор A-r-l-e-t-t на Яндекс.Фотках

Запись с "прокруткой" на примере

 

Промотка текста в записи и Путешественник во времени Д.Тайтор

 

Волшебная формула для изменения величины картинки без всяких генераторов.

Для новичков:

1. обычная формула для вставки картинки в пост.
2. если к ней дописать, что подчеркнуто красным , то можно изменить размер картинки, причем любой, даже анимированной.
3. если дописать, что подчеркнуто синим, можно обвести картинку контуром.
4 и 5. - картинка слева или справа
6. если дописать , что подчеркнуто оранжевым, то можно изменить размер и обвести контуром.
Вот как это выглядит:Смотрите далее…

Коды... Для начинающих и не только...

 

htmlka

Хороший сайт для тех, кто учится и  творчески подходит к оформлению постов. 

 

Справочник по html

Читать далее...

Несколько оригинальных формул и ссылок для дневника

Для вашего творчества и фантазии, предлагаю несколько необычных формул и ссылок которые разнообразят ваши посты и рамочки! В МОЙ ДНЕВНИК

Серия сообщений "Шпаргалки":

Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
Часть 3 - Рамочки - линии для выделения текста
Часть 4 - Бродилка по сайтам для вашего творчества
...
Часть 6 - Разлиновка — шаблоны разлинованных листов всех форматов.
Часть 7 - Красивые слайд-шоу в ваш дневник
Часть 8 - Простые ОБЪЕМНЫЕ рамочки разной формы

Цветное окошко для кода

Не мной придумано, но вещь полезная. Без окошек для кодов нам не
обойтись при написании многих постов.

Вот простенькое, с прозрачным фоном:

ВАШ КОД

А это код нашего простого окошка:

<textarea style="text-align: center;" readonly="readonly" cols="15" rows="1" name="S1">ВАШ КОД

При необходимости меняем размер. Атрибут cols="15" отвечает за
ширину окошка. Меняем цифру "15" на нужную нам. Атрибут rows="1" отвечает за высоту. Вместо "1" можем поставить "2", например.

А можно украсить наше окошко цветом, вот так:

ВАШ КОД

Вот код цветного окошка:

<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color:lawngreen; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД

Смотрим дальше

Таблица цветов с названиями по-английски

Огненный текст без фотошопа

Огненный текст
без фотошопа

Сегодня я расскажу, как сделать эффект огня на буквах. Это очень легко. Выбираете нужное "пламя" в рамке ниже. Копируете код из окошечка и вставляете вместо моих слов "Здесь будет Ваш текст" свой текст. Если захотите оформить таким огненным текстом стихи, то оставляйте между строк расстояние. Лучше всего такой текст смотрится на темных фонах. На светлом яркость теряется.

ТЕКСТ 1 <div style="font-size: 20px;color:#000000;font-family: Verdana;text-shadow: rgb(255, 255, 0) 0px -1px 2px, rgb(255, 204, 0) -1px -3px 3px, rgb(255, 153, 0) -1px -5px 4px, rgb(255, 102, 0) -1px -7px 5px, rgb(255, 51, 0) 0px -9px 6px, rgb(255, 0, 0) 4px -11px 7px; ">Здесь будет Ваш текст</div> ТЕКСТ 3 <div style="font-size: 20px;color: #fff799; font-family: Verdana; margin: 10px auto; padding: 70px 0pt 0pt; text-shadow: 0pt 0pt 10px rgb(254, 252, 201), 5px -5px 15px rgb(255, 255, 0), -10px -10px 20px rgb(255, 174, 52), 10px -20px 25px rgb(236, 118, 12), -10px -30px 30px rgb(205, 70, 6), 0pt -40px 35px rgb(151, 55, 22), 5px -45px 40px rgb(69, 27, 14); text-transform: uppercase;">Здесь будет Ваш текст</div> ТЕКСТ 2 <div style="font-size: 20px;color:#3f2305;font-family: Verdana;text-shadow: rgb(255, 255, 0) 0px -2px 4px, rgb(255, 204, 0) -2px -6px 6px, rgb(255, 153, 0) -2px -10px 8px, rgb(255, 102, 0) -2px -14px 10px, rgb(255, 51, 0) 0px -18px 12px, rgb(255, 0, 0) 2px -22px 14px; ">Здесь будет Ваш текст</div> ТЕКСТ 4 <div style="font-size: 20px;color: #ffcc66; font-family: Verdana; margin: 10px auto; padding: 70px 0pt 0pt; text-shadow: 0pt 0pt 20px rgb(254, 252, 201), 10px -10px 30px rgb(254, 236, 133), -20px -20px 40px rgb(255, 174, 52), 20px -40px 50px rgb(236, 118, 12), -20px -60px 60px rgb(205, 70, 6), 0pt -80px 70px rgb(151, 55, 22), 10px -90px 80px rgb(69, 27, 14); text-transform: uppercase;">Здесь будет Ваш текст</div>

Из блога Егоровой Татьяны

На фото ниже выделены параметры, которые можно менять в коде.



Удачи!

еще разные уроки

Обводка для текста

ОБВОДКА ДЛЯ ТЕКСТА
БЕЗ ФОТОШОПА

Кто-то в комментариях попросил меня рассказать как на пестром фоне сделать более видимым текст. Решила дать урок. Может кому-то пригодится.

Посмотрите ниже пример двух рамок с пестрым фоном и текстом. В верхней рамке текст написан с обводкой и поэтому его легче читать, а в нижней рамке текст написан обычным способом и читается с трудом. О том как сделать обводку мы сегодня и поговорим.

Женщина остаётся Женщиной, Неважно, сколько ей лет, И сколько лет ей по паспорту, Замужем или нет. Она может быть молоденькой, И может быть средних лет, И дамой преклонного возраста, У Женщины возраста нет!

Женщина остаётся Женщиной, Неважно, сколько ей лет, И сколько лет ей по паспорту, Замужем или нет. Она может быть молоденькой, И может быть средних лет, И дамой преклонного возраста, У Женщины возраста нет!

Если надо вставить текст в рамку.
Копируем в окошечке код.

<span style="text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">Здесь будет Ваш текст</span>

Код будет выглядеть вот так (см. фото А)



Код дан с обводкой черного цвета. Код цвета обводки выделен красной рамочкой. Вместо цифр 000000 вставляете код(6 знаков) нужного вам цвета. Вместо слов "Здесь будет Ваш текст" вставляете свой текст, всё копируете и вставляете в рамочку.

Если надо вставить текст без рамки.
Копируем в окошечке код.

<span style="text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px; font-size: 17px; color: #fffe9f;">Здесь будет Ваш текст</span>

Код будет выглядеть вот так (см. фото Б)



В код добавился параметр размера (синяя рамочка) и цвета (зеленая рамочка) шрифта. Их нужно заменить на свои.

Вот и всё! Удачи!

еще разные уроки

Все для дизайна

Линейка видеороликов с просмотром на весь экран

Источник

Читать далее...

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

Формулы и способы эксцентричного ввода текста в пост

 

Всё про картинки. Часть 3.

Серия сообщений "Памятка для Лиру":

Часть 1 - Бегущая строка из картинок или текста
Часть 2 - Плееры в дневник
...
Часть 7 - Всё про картинки. Часть 1. Закругляем углы.
Часть 8 - Всё про картинки. Часть 2
Часть 9 - Всё про картинки. Часть 3.
Часть 10 - Всё про картинки. Часть 4. Картинки в ряд и столбик.

Всё про картинки. Часть 2

Серия сообщений "Памятка для Лиру":

Часть 1 - Бегущая строка из картинок или текста
Часть 2 - Плееры в дневник
...
Часть 6 - HTML отображается, как текст
Часть 7 - Всё про картинки. Часть 1. Закругляем углы.
Часть 8 - Всё про картинки. Часть 2
Часть 9 - Всё про картинки. Часть 3.
Часть 10 - Всё про картинки. Часть 4. Картинки в ряд и столбик.

Бегущая строка из картинок или текста

Серия сообщений "Памятка для Лиру":

Часть 1 - Бегущая строка из картинок или текста
Часть 2 - Плееры в дневник
Часть 3 - Рамки для текста
...
Часть 8 - Всё про картинки. Часть 2
Часть 9 - Всё про картинки. Часть 3.
Часть 10 - Всё про картинки. Часть 4. Картинки в ряд и столбик.

Как сделать тени в рамочке и на картинках

Сегодня сделаю рамочки и открыточки с тенью без ФШ, используя

генератор рамок

,

Урок ТуТ

.
Сделали рамочку, но рамочка там плучается плоская, да и цвет фона однотонный...
Чтобы рамочка имела как бы объем, вот и воспользуемся подсказкой сайта

Шпаргалка блоггера

Как сделать бегущий текст на картинке, без всякого редактора

В этом уроке я покажу как сделать бегущий текст на картинке, не прибегая ни к каким редакторам! Выглядит это вот так. Падают с ветки Жёлтые монетки… Под ногами целый клад! Это осень золотая Дарит листья Не считая... Золотые дарит листья дарит листья Вам, и нам, И всем подряд.

Серия сообщений "Уроки для блогов":

Часть 1 - Как скопировать текст с сайта, который защищен от копирования.
Часть 2 - Как взять картинку с альбомов Яндекс -фото
...
Часть 24 - Как быстро вставить в пост на ЛиРу картинку из Интернета
Часть 25 - Рамка для блога, имитирующая картину.
Часть 26 - Как сделать бегущий текст на картинке, без всякого редактора
Часть 27 - Красивое разворачивание картинки в постах и рамках
Часть 28 - Как к каждой записи сделать свой фон.

Работа в расширенном режиме редакторе. Часть I.

Выясняется, что многие читатели не знают как работать в редакторе сообщений. Попробую объяснить это простым языком. В редакторе есть два режима создания и редактирования сообщений. Это 'Простой' режим и 'Расширенный' режим или CKEditor. После нажатия на кнопку

на экране монитора возникнет окно редактирования сообщения в текстовом редакторе. Вид этого окна будет зависеть от того в каком режиме откроется  этот редактор. Чтобы выбрать режим редактирования нужно нажать или на Простой редактор или на CKEditor. Есть еще кнопка FCKEditor, но она является просто разновидностью CKEditor, поэтому мы не будем рассматривать этот вариант редактора. Когда нажата кнопка 'Простой редактор', это будет видно по тому признаку, что его название перестанет быть подчеркнутым, как это показано на следующем рисунке.

читаем дальше...

Работа в расширенном режиме редакторе. Часть II.

Итак, продолжим разбираться в возможностях редактора текстов, используемого на ЛиРу , в расширенном режиме (CKEditor).

Часто при написании после мы используем какие-то списки. Для того, чтобы они были написаны  красиво и имели какой-то стиль написания, ЛиРу предлагает написание списков в виде нумерованных списков или маркированных списков.

познаём непонятное