magic-2018.ru
Магия, здоровье, дети, мой юрист, туризм, уют, кулинар, красота, авто

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

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

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

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

Автор: Галина Дитрих

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

Знакомо?

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

В этом нам поможет знание HTML, а конкретно работа с таблицами.

Таблицы помогут нам поставить несколько картинок в один ряд.

Совершенно не нужно разбираться в каждой строчке, нужно просто копировать готовый код.

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

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

На новой созданной странице «Каталог» переходим в режим HTML.

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

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

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

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

Если хотим добавить новый столбец в определенном ряду, просто вставляем новую строчку Блог.

ЯМ..
Если хотим добавить новый ряд, то копируем все, что между комментариями «первый ряд» и «второй ряд».

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

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

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

Вставляем картинки наших работ, поставив курсор перед цифрами, обозначающими номер ряда и столбца:

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

Вместо цифр пишем название (я пишу только обозначение работы: колье/серьги/браслет и т.п).

На слово «блог» ставим ссылку на пост, посвященный этой работе. На слово «ЯМ» — ссылку на эту работу на Ярмарке Мастеров (если там имеется магазин):

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

Само фото делаем кликабельным: на него тоже ставим ссылку (многие привыкли к каталогам в интернет-магазинах, где щелчок по фото приводит к открытию выбранной работы).

Как поставить ссылку на фото в блоге?

Да очень просто. Делаем дважды следующее: кликаем на картинку, жмем на «ссылку»:

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

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

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

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

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

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

Либо все можем сделать в одной таблице и писать под каждой работой ее статус «продана», «на заказ», «готовая».

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

Получается очень наглядно и интерактивно.

Комментарии закрыты.