вторник, 12 февраля 2013 г.

Как сделать каталог работ с фотографиями в блоге

Сегодня рассмотрим как сделать интерактивный каталог своих работ с фотографиями и ссылками на посты в блоге. 

У каждой рукодельницы наступает момент, когда работ становится приличное количество и их хочется как-то наглядно структурировать: не каждый заводит магазин на Ярмарке Мастеров, не каждый держит в нем все свои работы (за количество же платить надо), и, что еще немаловажно, - посты, посвященные своим любимым работам, на написание которых потрачено немало времени, канули в лету, и мало кто из читателей будет рыться в архиве. Знакомо?:)

Поэтому мы сделаем интерактивный каталог, который будет одновременно наглядным магазином актуальных работ и архивом любимых постов:)

В этом нам поможет знание HTML, а конкретно работа с таблицами. Таблицы помогут нам поставить несколько картинок в один ряд. Совершенно не нужно разбираться в каждой строчке, нужно просто копировать готовый код:)

Создаем новую страницу "Каталог":

Как создать страницу в блоге
 
На новой созданной странице "Каталог" переходим в режим HTML 

режим html

и вставляем следующий код:

<!---------------------------------   Начало таблицы готовых работ    --------------------------------->
<table>
<tbody>
<!--------------------   первый ряд   -------------------->
<tr>
<td>1.1. Блог. ЯМ.</td>
<td>1.2. Блог. ЯМ.</td>
<td>1.3. Блог. ЯМ.</td>
</tr>
<!--------------------   второй ряд   --------------------->
<tr>
<td>2.1. Блог. ЯМ.</td>
<td>2.2. Блог. ЯМ.</td>
<td>2.3. Блог. ЯМ.</td>
</tr>
</tbody>
</table>
<!---------------------------------   Конец таблицы готовых работ    ---------------------------------->

То, что находится между знаками "<!-- ... -->" является html-комментариями и никак не влияет на код, но очень поможет нам для наглядности, когда таблица будет большой.

Если хотим добавить новый столбец в определенном ряду, просто вставляем новую строчку <td>Блог. ЯМ.</td>. 
Если хотим добавить новый ряд, то копируем все, что между комментариями "первый ряд" и "второй ряд".

Возвращаемся в режим "Создать" и видим: 


Теперь наполняем наш каталог:

Вставляем картинки наших работ, поставив курсор перед цифрами, обозначающими номер ряда и столбца:  
Вместо цифр пишем название (я пишу только обозначение работы: колье/серьги/браслет и т.п). На слово "блог" ставим ссылку на пост, посвященный этой работе. На слово "ЯМ" - ссылку на эту работу на Ярмарке Мастеров (если там имеется магазин):
Само фото делаем кликабельным: на него тоже ставим ссылку (многие привыкли к каталогам в интернет-магазинах, где щелчок по фото приводит к открытию выбранной работы). Как поставить ссылку на фото в блоге? Да очень просто:) Делаем дважды следующее: кликаем на картинку, жмем на "ссылку":

как сделать фото кликабельным

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


Выравниваем везде фото и текст по центру. Получаем, например, следующее:

Как сделать каталог работ с картинками в блоге
 
После заполнения таблицы готовых работ, копируем тот же код таблицы, меняем текст в комментариях названия таблицы, и заполняем таблицу заказов (если работаем на заказ), или таблицу примеров. Либо все можем сделать в одной таблице и писать под каждой работой ее статус "продана", "на заказ", "готовая" и т.п, как сделала Леночка Миронова, уже опробовав этот МК у себя в блоге:))

Если же хочется разделить работы по типам, например, сначала все колье, потом все браслеты и т.д., то нужно создать столько же таблиц. Получается очень наглядно и интерактивно:)

Update: Второй урок - "Как сделать квадратную миниатюру в рамке", если очень хочется, чтобы каталог был похож на Ярмарку Мастеров:)

Буду рада увидеть ваши каталоги:)

66 комментариев:

  1. Галина, спасибо за такой нужный и подробный мастер-класс! Как накопятся работы, обязательно попробую сделать.

    ОтветитьУдалить
    Ответы
    1. Катенька, спасибо! Конечно, попробуй! и ссылкой тут поделись))

      Удалить
  2. Вот спасииибище огромное, Галочка!!! ;-)))) Давно хотела привести в порядок свой "каталог", да только ума не хватало, как правильно всё сделать!!! ;-)))) Как здорово, что ты есть!!! ;-)))))

    ОтветитьУдалить
    Ответы
    1. Леночка, спасибо тебе!!!
      Да ведь это ж не я придумала, все по образу и подобию интернет-магазинов:)))
      Обязательно потом похвались и ссылочку оставь, пусть народ любуется!!

      Удалить
  3. Как здорово ! обязательно надо будет попробовать !еще бы научиться делать приличные фотографии...

    ОтветитьУдалить
    Ответы
    1. Ларочка, и до фото дойдем)) Я просто обещала сначала блоговедение рассказать:))

      Удалить
  4. Галина спасибо большое.Все доступно и понятно.Я как у тебя увидела -заболела этим каталогом.Но мой компьютерный хакер-шучу-не смог это сделать.Конечно хочется фото одного размера.Буду ждать второго мастер класса.

    ОтветитьУдалить
    Ответы
    1. Марина, спасибо! Я не стала уже усложнять и пытаться впихнуть всё в один пост:) К тому же не всем нужны каталоги с фото определенного размера и формы...

      Удалить
  5. Огромнейшее спасибо!!!
    Пошла разбираться...

    ОтветитьУдалить
    Ответы
    1. Леночка, спасибо! И обязательно выкладывай ссылку, когда разберешься))

      Удалить
    2. Галиночка , благодарствую!
      http://rukodelenkino.blogspot.ru/p/blog-page_13.html

      Удалить
  6. Галя, спасибище тебе огромное!!!! Я с огромным нетерпением ждала этого поста! Пойду теперь разбираться :)
    Сюда вопросы, если что, писать можно будет? А то ж я чайник еще тот)))))

    ОтветитьУдалить
    Ответы
    1. Не прошло и пол-года, как я дошла до каталога :) И даже будучи абсолютным чайником в кодах у меня всё получилось!!!!
      Над фотографиями еще конечно работать надо, но главное начало положено!
      Галя, спасибо тебе огромное!!!! Ты прелесть! Целую :)

      Удалить
  7. Галя, спасибо!
    Я теперь в раздумьях-сделать себе такое или нет...

    ОтветитьУдалить
    Ответы
    1. Маша, я как только начала путаться и терять свои же посты - сразу об этом задумалась:)))

      Удалить
  8. Галочка, спасибо тебе большое, обязательно воспользуюсь этой фишкой. У вас с Леной очень красиво и удобно это выглядит!

    ОтветитьУдалить
    Ответы
    1. Леночка, здорово! Кидай ссылку, пусть все любуются!

      Удалить
  9. Галина, спасибо вам за такой труд!!! Очень нужная и полезная информация, я уже не один час ковыряюсь по вашему МК и кое-что получилось))) Конечно все еще сыровато (у меня) и требует доработки, но в целом я довольна, принцип понятен. Вот только у меня возникла проблема с добавлением новых строчек, вроде все сделала , как описано и каталог составила с дополнительными строками, а публиковаться у меня эта страничка не хочет... (публикуется только с первыми двумя строками картинок, и все...)
    http://ru-masters.blogspot.ru/p/blog-page_2210.html
    Спасибо вам еще раз!

    ОтветитьУдалить
    Ответы
    1. Юленька, я не очень поняла проблему)) Не сталкивалась с такой:)) К тому же, когда захожу к вам в каталог - вижу три строчки. Все правильно? Видимо, вы уже сами разобрались в чем было дело:))
      Сейчас у меня срочный заказ и после него сделаю урок как сделать фото квадратным, в рамочке, чтобы всегда знать, что оно уместится в блоге.

      Удалить
    2. Галина, спасибо, что откликнулись! Да, я уже после добавила еще одну строчку, теперь вроде все получилось. Буду ждать следующий урок по фоткам, а то действительно все картинки пляшут...

      Удалить
  10. Галя спасибо, интересный МК. Это много работы конечно, но это нужная вещь.

    ОтветитьУдалить
    Ответы
    1. Оксана, спасибо! Это, кстати, не очень много работы) Копируешь, вставляешь, заполняешь) Магазин на ЯМ раз в 10 дольше заполнять, и посты писать тоже))

      Удалить
  11. Спасибо огромное! Давно мучаюсь вопросом каталогов, очень кстати!-))

    ОтветитьУдалить
    Ответы
    1. Здорово)) Буду ждать ссылку на ваш каталог))

      Удалить
  12. Галочка, ну до чего информативный у тебя блог! Сразу видно, что подход ко всему у тебя основательный! Каждый раз захожу в предвкушении узнать что-то новое и интересное! Очень нужный МК! Не знаю когда, но воспользуюсь обязательно! Спасибо тебе, Девушка-энерджайзер!)))

    ОтветитьУдалить
    Ответы
    1. Динарочка, ну захвалила)) Очень буду рада увидеть твой каталог, уверена, там столько красотищи!!!

      Удалить
  13. Ответы
    1. Рада помочь) Больше каталогов, красивых и разных)))

      Удалить
  14. Боже, Галина, Вы просто волшебница! Это то, что мне было нужно. Спасибо!!! уже пробую, и кажется, у меня даже получается, надо только сесть и основательно этим заняться.

    ОтветитьУдалить
    Ответы
    1. Правильный подход) Танечка, это даже недолго, главное с первой строчкой таблицы разобраться, а дальше все как по маслу пойдет))

      Удалить
    2. Галя, что-то я застопорилась с добавлением рядов, я копирую "все, что между комментариями "первый ряд" и "второй ряд"" вставляю перед , а потом нужно добавлять комментарий "третий ряд" и т.д. Я правильно поняла или нет? И еще, наверное, фото нужно делать все одинакового размера?

      Удалить
    3. вставляю перед "конец таблицы готовых работ"...скопировала с кода не отобразилось

      Удалить
  15. Копировать надо сначала весь код между тегами table и /table, а потом заполнять нужное количество рядов. Между tr и /tr - ряд таблицы, тег tr обозначает ряд (table row).

    Соответственно после закрытия тега /tr можно вставлять новый ряд.

    Скобки <> в тегах опущены, эти теги нельзя использовать в комментариях:)

    ОтветитьУдалить
  16. Все поняла, спасибо огромное!

    ОтветитьУдалить
  17. Галина, спасибо за подробные МК и невероятно красивые украшения!
    Смотришь и не насмотришься!
    Остаюсь у вас в ПЧ!

    ОтветитьУдалить
    Ответы
    1. Оленька, я очень рада. Безумно приятно быть полезной!

      Удалить
  18. Галочка, хочу еще раз сказать спасибо за урок, наконец, сделала себе каталог, действительно, просто и быстро, дольше с фотками провозилась, пока все одного размера сделала:)

    ОтветитьУдалить
    Ответы
    1. Танечка, очень ровно и в одном стиле все смотрится, просто здорово!

      Удалить
  19. Галина спасибо за МК ! много нового и полезного для себя нашла на Ваших страничках Вот только каталог не могу победить до конца( Сначала все получалось, вставила несколько фото с ссылками и сохранила черновиком, а теперь открываю доделать а мне не удается вставить фото( срочка вообще не активная, если правой кнопкой мышки нажать) и весь код выделяется рамочкой с ограничителями
    удалила всю страницу, делаю заново и та же история ((

    ОтветитьУдалить
    Ответы
    1. Ольга, я не очень поняла, вы не кнопкой (которая встроена в редактор блоггера) добавляете картинку, а из контекстного меню мышки? И какая строчка должна быть активной? На словах плохо понятно...

      Удалить
    2. ))) разобралась! как хорошо, что есть кому ответить даже на глупые вопросы! Спасибо!

      Удалить
  20. Галина, спасибо Вам за такое простое и наглядное объяснение! Я как раз сейчас занимаюсь созданием блога и Ваши советы очень кстати!

    ОтветитьУдалить
    Ответы
    1. Юлия, я очень рада, что вам пригодилось!

      Удалить
  21. Спасибо, Галочка!!!
    Только благодаря Вашим блогспотурокам я сделала каталог работ (который будет пополнятся!) и создала свою кнопку. Оказывается это так просто!!!!

    ОтветитьУдалить
  22. Спасибо огромное! Я искала подобный урок, ВЫ мне очень помогли! И хотя работ у меня не так много и они не для продажи, такой католог очень полезен!Буду пробовать!

    ОтветитьУдалить
    Ответы
    1. Элси, спасибо, я рада, что вам пригодилось!

      Удалить
  23. Yees! Я тоже это сделала! Правда, без рамочек)))
    Галина, спасибо большое!
    http://pukhovaek.blogspot.ru/p/1_1.html

    ОтветитьУдалить
    Ответы
    1. Екатерина, мне нравится) Да вам рамочки-то особо и не нужны:))

      Удалить
  24. Галина, спасибо огромное! Благодаря вашему МК получилось очень быстро создать свой каталог.
    Ещё раз спасибо за Ваш труд!!!

    ОтветитьУдалить
    Ответы
    1. Ирочка, круто! Рада, что вам пригодилось!

      Удалить
  25. Галина, спасибо большое!!! Давно хочу сделать себе каталог, обязательно воспользуюсь Вашим МК!!!!!

    ОтветитьУдалить
  26. Галина, большое спасибо! Благодаря Вашей инструкции создала каталог своих путешествий. Получилось, на мой взгляд, очень наглядно и удобно!

    ОтветитьУдалить
    Ответы
    1. Юля, какой чудесный каталог, пойду пропаду там на полдня)) С удовольствием буду вас читать))

      Удалить
  27. Галина, мне очень понравился Ваш МК и я хочу сделать себе тоже каталог. Но когда я скопировала код и, переключившись в HTML, его вставила, он не вставился, а отобразился там в том виде, который должен быть в режиме Создать (1.Блог.ЯМ.) + ссылка на Ваш блог. В чем может быть причина? Спасибо!

    ОтветитьУдалить
    Ответы
    1. Может быть потому что гугл недавно ввел к любому копированию из блога автоматическое добавление строки об авторстве. Обычно я эту строку удаляю и все нормально, но в случае с html кодом, возможно придется сначала скопированное вставить в текстовый документ, оттуда удалить лишнее, снова скопировать (из текстового документа) и уже вставить в режиме html.

      Удалить
  28. Галина скажите, а "You might also like:" этоже как то по другому вставляется? подскажите пожалуйста. мне кажется это удобным когда есть в блоге... но пересмотрела уже что могла, и не нашла как это делать.. я даже не пойму как это "обозвать". спасибо зараннее

    ОтветитьУдалить
  29. Галина, большое спасибо за урок. Правда у меня не получилось изменить ссылки так как пишете Вы, но я с этой задачей справилась)) Нагло сослалась на Вас в своем блоге))) Вот результат http://yutnayjizn.blogspot.ru/2014/12/katalogshemjgutov.html еще раз спасибо!!!

    ОтветитьУдалить
    Ответы
    1. Александра, всегда рада, если что-то пригождается! Жаль, что не все получилось, но результат у Вас классный!

      Удалить
    2. Галина, получилось все, только немного другим путем, не так как Вы рассказали. Но... это не остановило:)

      Удалить
  30. Галина, добрый день! Я очень извиняюсь, а вы не подскажите, как вставить две и более фотографии в одну линию?) Уже во многом разобралась на этой платформе. но не могу пока понять, как это сделать. Моежт подскажите... Благодарю!

    ОтветитьУдалить
    Ответы
    1. В визуальном режиме их можно просто перетащить на одну линию и выровнять.

      Удалить

Related Posts Plugin for WordPress, Blogger...