WEBLEDI.RUВебледи Форум успешных женщин-вебмастеров
26 Май 2017, 12:38:17 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.

Войти
Правила Реклама
 
5
10
15
Свежие ответы
от AdBean (Реклама и доход)
от vsemaykiadmin (CPA-сети)
от Shrem (Раскрутка сайтов в поисковиках)
от KeyAssort (Сервисы и SEO программы)
от lyalechka (Контент, копирайтинг, переводы)
от lx19912411 (Платное размещение статей и ссылок)
от Kludge (Работа и услуги)
от PeterS (Особенности работы с разными CMS)
от HostiMan (Хостинг)
от vkoksmm1 (SMM для сайта)
от Athina (Продвижение, SEO)
от SvetikUA (Сайты)
от Loria (Google AdSENSE)
от fler (Дизайн)
от polyakovka (Новичку)
Свежие темы
Показать ещё
  Печать  
Страниц: 1 2
Автор

Тема: урок как делать фоторецепты  (Прочитано 6402 раз)

0 Пользователей и 1 Гость смотрят эту тему.
verytruth
Симоронка!
Offline Offline

Пол: Женский
Сообщений: 5884


да, я такая :)


Просмотр профиля
« : 20 Июль 2009, 01:11:30 »

У 13-летней сестры моего мужа есть свой блог с фоторецептами, вот как выглядят её фото-рецепты: http://fotorecepti.ru/?p=84 Очень удобно размещать. Если вы хотите чтобы у вас было что-то подобное, в файле css своей темы в самом низу добавьте строчки:

Цитировать
.st img,img.forstep7{border:0;float:right;margin:0;padding-left:10px;width:300px;height:256px}
.st p img {border:0;float:right;margin:0;padding-left:10px;width:300px;height:256px;}
.st p{border-top:1px dotted #DCE7C7;clear:both;margin:0;padding:0;width:100%;display:block;}

Теперь когда размещаете статью, в html-редакторе напишите:

<div class="st" style="text-align: justify;">
далее вставляете фото (всё в том же нтмл-редакторе, в визуальный переходить не надо), ниже него описание или текст, который будет слева и после описания закрытие абзаца - </p>
все. Теперь чтобы продолжить далее, просто вставляйте картинки, пишите текст, ставьте после него </p>, а в самом конце закройте тег div: </div>

Сохраняйте статью и радуйтесь результату.

Все стили можно подделать под себя
Записан

verytruth
Симоронка!
Offline Offline

Пол: Женский
Сообщений: 5884


да, я такая :)


Просмотр профиля
« Ответ #1 : 20 Июль 2009, 01:12:49 »

вот пример кода статьи:

Цитировать
Вечером мы приехали с моря с ведром рыбы, которую в день рыбака, нам подарили самые, что ни на есть морские рыбаки. И мы с мамой голодные (а особенно проголодался папа), решили быстро приготовить вкуснейший пирог с пеленгасом.<!--more-->
</p>
<div class="st" style="text-align: justify;">
<img src="http://fotorecepti.ru/wp-content/uploads/2009/07/2_0-300x225.jpg" alt="пирог с рыбой" title="пирог с рыбой" width="300" height="225" class="alignleft size-medium wp-image-175" />
Опять нам пригодился наш <a href="http://fotorecepti.ru/?p=84">быстрый рецепт теста</a>. </p>
<img src="http://fotorecepti.ru/wp-content/uploads/2009/07/3_0-300x225.jpg" alt="пирог с рыбой рецепт" title="пирог с рыбой рецепт" width="300" height="225" class="alignleft size-medium wp-image-176" />
Тесто мягкое, поэтому смачивая руки маслом мы половину теста равномерно размещаем по форме. Сверху распределяем мелко нарезанный репчатый лук. В пироге с рыбой люблю много лука. Он потом пропитается рыбой, маслом, и становится нежным и  вкусным.</p>
<img src="http://fotorecepti.ru/wp-content/uploads/2009/07/5_0-300x225.jpg" alt="пирог с рыбным филе" title="пирог с рыбным филе" width="300" height="225" class="alignleft size-medium wp-image-177" />
Укладываем филе рыбы, добавляем кусочки сливочного масла. </p>
<img src="http://fotorecepti.ru/wp-content/uploads/2009/07/61-300x225.jpg" alt="рыбный пирог" title="рыбный пирог" width="300" height="225" class="alignleft size-medium wp-image-178" />
Еще добавляем лук. Теперь можно и накрыть пирог оставшимся тестом. </p>
<img src="http://fotorecepti.ru/wp-content/uploads/2009/07/81-300x225.jpg" alt="быстрый пирог с рыбой" title="быстрый пирог с рыбой" width="300" height="225" class="alignleft size-medium wp-image-179" />
В это время у нас уже нагрелась духовка, до температуры 180-200 градусов. Помещаем туда пирог  и выпекаем минут 30-40 (наблюдая, чтоб не сгорел). </p>
<img src="http://fotorecepti.ru/wp-content/uploads/2009/07/91-300x225.jpg" alt="пирог с рыбой и я" title="пирог с рыбой и я" width="300" height="225" class="alignleft size-medium wp-image-180" />
За это время  все успели принять душ и сесть за стол. Я такой пирог люблю есть запивая холодным  молоком, хотя папа это не понимает. Но за пирог нас похвалил и отметил День рыбака. </div>
Записан

delika
Offline Offline

Пол: Женский
Сообщений: 412



Просмотр профиля
« Ответ #2 : 20 Июль 2009, 10:48:32 »

Попробовала, не получается. Кажется  я поняла в чем моя ошибка, завтра еще раз попробую.
« Последнее редактирование: 20 Июль 2009, 20:49:17 от delika » Записан
H2O68
Offline Offline

Пол: Женский
Сообщений: 3554



Просмотр профиля
« Ответ #3 : 20 Июль 2009, 12:30:06 »

Спасибочки  Целующий
сегодня переформатирую свои фоторецепты, на супердекрете, а то прям неразбериха какая то у меня там

Оль, width:300px;height:256px - это можно менять, как я понимаю, если хочу фото других размеров чтоб были, да?

Записан
verytruth
Симоронка!
Offline Offline

Пол: Женский
Сообщений: 5884


да, я такая :)


Просмотр профиля
« Ответ #4 : 20 Июль 2009, 12:34:29 »

Спасибочки  Целующий
сегодня переформатирую свои фоторецепты, на супердекрете, а то прям неразбериха какая то у меня там

Оль, width:300px;height:256px - это можно менять, как я понимаю, если хочу фото других размеров чтоб были, да?



ага Улыбка
Записан

H2O68
Offline Offline

Пол: Женский
Сообщений: 3554



Просмотр профиля
« Ответ #5 : 20 Июль 2009, 19:24:00 »

Цитировать
.st1 img,img.forstep7{border:0;float:right;margin:0;padding-left:10px;width:200px;height:156px}
.st1 p img {border:0;float:right;margin:0;padding-left:10px;width:200px;height:156px;}
.st1 p{border-top:1px dotted #DCE7C7;clear:both;margin:0;padding:0;width:100%;display:block;}

если мне нужно, чтобы где-то фото были другого размера, то я могу так сделать? По-другому стиль обозначить, да?
и вызывать вот так: <div class="st1" style="text-align: justify;">
Правильно?
Записан
verytruth
Симоронка!
Offline Offline

Пол: Женский
Сообщений: 5884


да, я такая :)


Просмотр профиля
« Ответ #6 : 20 Июль 2009, 19:47:56 »

ага, можно и без style="text-align: justify;, просто <div class="st1">
Записан

H2O68
Offline Offline

Пол: Женский
Сообщений: 3554



Просмотр профиля
« Ответ #7 : 21 Июль 2009, 01:57:12 »

Ясненько, новую статью уже так оформила сегодня http://legonko.ru/2009/07/20/chto-delat-so-starym-kompyuterom/
Записан
Нуара
Offline Offline

Пол: Женский
Сообщений: 46



Просмотр профиля
« Ответ #8 : 04 Август 2009, 01:39:45 »

Получилось!!!!!!!!!!!! Быстро и легко! VeryTruth, спасибо тебе! Улыбка
Записан
Zerkalo
Offline Offline

Пол: Женский
Сообщений: 2100



Просмотр профиля
« Ответ #9 : 07 Август 2009, 15:16:44 »

cпасибо большое, вот мой первый фото рецепт http://womendom.ru/content/view/26/1/
Записан
H2O68
Offline Offline

Пол: Женский
Сообщений: 3554



Просмотр профиля
« Ответ #10 : 07 Август 2009, 15:40:57 »

Вот она, загадочная Оля с womendom.ru  Целующий
С новым сайтиком!
Я так и подумала, что это ты (помню, что ты Дева), но вот сомнения все же были   Подмигивающий
Записан
Zerkalo
Offline Offline

Пол: Женский
Сообщений: 2100



Просмотр профиля
« Ответ #11 : 07 Август 2009, 15:42:49 »

хе-хе:) а причем тут Дева?  :D
Записан
H2O68
Offline Offline

Пол: Женский
Сообщений: 3554



Просмотр профиля
« Ответ #12 : 13 Август 2009, 03:07:39 »

хе-хе:) а причем тут Дева?  :D

Это я про коммент о выборе духов по знаку зодиака http://superdekret.ru/?p=2133
Записан
Wisenteta
Offline Offline

Пол: Женский
Сообщений: 4950



Просмотр профиля
« Ответ #13 : 17 Август 2009, 00:46:42 »

А как сделать, чтобы по ширине все были одинаковые фото, по 300 пикселей, а по высоте - разные? 0 пх ставить или это лесом?
Записан
H2O68
Offline Offline

Пол: Женский
Сообщений: 3554



Просмотр профиля
« Ответ #14 : 17 Август 2009, 00:58:09 »

verytruth пока нет, приедет, расскажет
Меня этот вопрос тоже интересует, и еще, можно ли как-то сделать, чтобы фото оставались в своем настоящем размере и не подгонялись под одинаковый размер?
Записан
Страниц: 1 2
  Печать  
 
Перейти в:  

| Sitemap