Сегодня рассмотрим как сделать интерактивный
каталог своих работ с фотографиями и ссылками на посты в блоге.
У каждой рукодельницы наступает момент, когда работ становится приличное количество и их хочется как-то наглядно структурировать: не каждый заводит магазин на
Ярмарке Мастеров, не каждый держит в нем все свои работы (за количество же платить надо), и, что еще немаловажно, - посты, посвященные своим любимым работам, на написание которых потрачено немало времени, канули в лету, и мало кто из читателей будет рыться в архиве. Знакомо?:)
Поэтому мы сделаем интерактивный каталог, который будет одновременно наглядным магазином актуальных работ и архивом любимых постов:)
В этом нам поможет знание 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>.
Если хотим добавить новый ряд, то копируем все, что между комментариями "первый ряд" и "второй ряд".
Возвращаемся в режим "Создать" и видим:
Теперь наполняем наш каталог:
Вставляем картинки наших работ, поставив курсор перед цифрами, обозначающими номер ряда и столбца:
Вместо цифр пишем название (я пишу только обозначение работы: колье/серьги/браслет и т.п). На слово "блог" ставим ссылку на пост, посвященный этой работе. На слово "ЯМ" - ссылку на эту работу на Ярмарке Мастеров (если там имеется магазин):
Само фото делаем кликабельным: на него тоже ставим ссылку (многие привыкли к каталогам в интернет-магазинах, где щелчок по фото приводит к открытию выбранной работы). Как поставить ссылку на фото в блоге? Да очень просто:) Делаем дважды следующее: кликаем на картинку, жмем на "ссылку":
Первый раз, чтобы убрать предыдущую ссылку (которая ведет на увеличенный размер картинки), второй раз - чтобы поставить новую ссылку (не забываем ставить галочку "открывать в новом окне").
Выравниваем везде фото и текст по центру. Получаем, например, следующее:
После заполнения таблицы
готовых работ, копируем тот же код таблицы, меняем текст в комментариях названия таблицы, и заполняем таблицу
заказов (если работаем на заказ), или таблицу
примеров. Либо все можем сделать в одной таблице и писать под каждой работой ее статус "продана", "на заказ", "готовая" и т.п, как сделала Леночка Миронова, уже опробовав этот МК у себя в
блоге:))
Если же хочется разделить работы по типам, например, сначала все колье, потом все браслеты и т.д., то нужно создать столько же таблиц. Получается очень наглядно и интерактивно:)
Буду рада увидеть ваши каталоги:)