Цитата сообщения Inmira
Делаем таблицы для фонов.
Обещанный код таблицы)))) Не прошло и полгода....
При цитированиии необходимо убрать галочку с "Сохранять переводы строк в тексте".
Пост с фонами у меня состоит из двух таблиц. Первая - маленькая. Ее я размещаю на главной странице.Так она выглядит:
Вся табличка состоит из одной строки ( горизонтали), которая поделена на 4 столбца (вертикали).
Т.е. в результате - однострочная табличка с четырьмя ячейками. Каждую ячейку я подписала. В этих ячейках размещены картинки, паттерны. Картинка 1 - в первой ячейке, картинка 2- соответственно во второй и т.д. )))
Вот код сей таблички:
Что здесь что.))):
Зеленым цветом выделены ссылки на картинку с кнопкой. Кнопка у меня одна на все ячейки - поэтому и ссылка одинаковая. Делая таблицу, можно использовать мою кнопку - тогда в этом коде оставляете эту ссылку в неприкосновенности. Если же есть желание сделать свою кнопку, то делаете, загружаете на ЛиРу, например, и вместо моей (выделенной зеленым цветом) ссылки, ставите ссылку на свою кнопку.
Кнопку я наскоро наваяла в photoshop'е. Если нет желания осваивать фотошоп, - можно делать кнопки, например, в программе DeKnop. Маленькая, легкая, но вполне милые кнопки выходят.
Скачать "DeKnop":
letitbit.net. 954.58 Kb.
Синим цветом выделен цвет таблицы. Такого цвета у вас будут и все полоски между ячейками. У меня стоит серый цвет. Цвет можно менять, подбирать, например, в > "Настройки" > "Настройки дизайна".
Красным цветом обозначена ширина таблицы. Она у меня в процентах. Таблица получается резиновая и растягивается на все ширину поста, независимо от разрешения экрана пост выглядит аккуратно. Естественно, можно писать и в пикселах.
Фиолетовым цветом обозначена ширина ячейки (ширина столбца). У меня 4 ячейки (столбца), все они одинаковые и , естественно, ширина каждого равна 25%.
Цифрой 1 обозначена "высота строки". Просто вводим высоту в пикселах. В моей таблице она равна 200 пкс, и этот кусок кода у меня выглядит так :
<tr style="height: 200px;">
Как Вы заметили, мы вводим по две
одинаковые ссылки на каждую картинку. Первая ссылка
background: url('ссылка на картинку') отвечает за заливку ячейки фоном. Вторая (с тем же адресом) ссылка
<a href="ссылка на картинку" отвечает за открытие самой картинки (в оригинальном размере) в новой вкладке. Со ссылками оченнннь внимательно, чтобы при клике на кнопку "Скачать" у Вас ненароком не открылась другая картинка))).
Собственно с первой маленькой таблицей мы почти разобрались. Сейчас коротко расскажу, как можно менять количество столбцов. Но это необязательно читать, если не стоит задача учиться писать коды, а нужно просто построить наскоро табличку.)))
Покажу наглядно. Вот табличка с одним столбцом:
Вот ее код:
Снова что есть что:
Красным цветом выделен тег tr, их у нас два - открывающий и закрывающий - <tr и </tr>. Тег сей парный, т.е. ежели мы его открыли, то должны закрыть. Наличие всего двух (открывающего и закрывающего) tr в таблице, говорит о том, что у нас всего одна строка. Высоту я задала 100px -
height: 100px;.
Синим цветом выделен тег <td. Их у нас тоже два, тоже открывающий и закрывающий - <td и </td>. Тег тоже парный. В общем, будем считать его за один тег.))) Тег td показывает сколько у нас столбцов в строке. Т.к. у нас один тег td (мы ж решили открывающий и закрывающий тег считать за один?))) - значит - будет один столбец, что мы и видим выше. Ширину я, естественно, поставила 100%. Для наглядности больше.)))
Теперь сделаем табличку с 2-мя столбцами :
Вот ее код:
Красным опять обозначен тег tr он у нас опять один, (открывающий и закрывающий) - значит - одна строка. Синим обозначен тег td, а вот их два (открывающий и закрывающий считаем за один)))), что означает, что у нас в таблице два столбца. Ширину я поставила у каждого - 50%. Можно, например - 30% и 70% ))))
Чтобы сделать три столбца - просто выделяем и копируем все, что в теге td, так:
Вставляем скопированное сюда (выделено желтым):
Теперь у нас три парных тега <td> (выделены синим) и, соответственно, будет три столбца. Не забываем менять ширину (у меня она теперь 33 %).
Код:
Про четыре столбца мы уже знаем))) Для закрепления, можно самостоятельно составить табличку в 5 столбцов, например.
Вот ее код для проверки:
P.S. Не забываем менять ширину))))
Вторая основная таблица.
После всего вышесказанного сделать ее проще простого)))) Копируем код первой таблицы. Вставляем его в пост (я взяла мою первую таблицу с четырьмя столбцами).
В этом коде выделяем и копируем все, что относится к тегу
tr. Так:
Вставляем скопированное столько раз, сколько нам нужно строк. Например на 2 строки выйдет так:
Желтым цветом выделен вставленный код. Красным цветом выделены все мои
tr. Как видите, у меня два парных тега
tr, значит в таблице будет 2 строки.
На всякий случай пишу готовый код на табличку в 10 строк и в 4 ряда. Его можно просто скопировать и вставлять ссылки на Ваши фоны. Только высоту проставьте)))
Собственно пост у нас практически готов. Осталось вставить тег
[more]
После кода первой маленькой однострочной таблицы, пишем
[more=Дальше > > >]. Это я так пишу. Вместо "Дальше" можно написать "Еще фоны" или как Вам нравится. Единственное, что
more=Д это часть должна быть без пробелов. Д - это моя первая буква, какая будет у Вас не знаю, но без пробелов)))
После
[more] у нас идет вторая большая таблица и после нее ставим закрывающий тег
[/more]
Так будет выглядеть Ваш код:
1. Код маленькой, однострочной таблицы.
2. [more=Дальше > > >]
3. Код большой таблицы.
4. [/more]
А теперь маленький, но весьма неприятный нюанс. Пост у Вас готов, если Вы его опубликуете, то у вас все будет смотреться примерно так:
Как видите, приятного здесь мало((( Для себя Вы можете решить проблему быстро. Убираем галочку с "Сохранять переводы строк в тексте":
Выйдет так:
После кода первой маленькой таблицы пишем
<br>, - тег показывающий, что делается перенос на следующую строку. Этим мы переносим
[more=Дальше > > >] под таблицу.
Пост будет смотреться так:
У Вас уже все замечательно))) Но вот при цитировании Вашего поста появятся те самые ненужные пробелы или таблица может поехать. Здесь у нас два решения.
Первое - в конце каждого поста писать "При цитировании убираем галочку с "Сохранять переводы строк в тексте" и
второе, более трудоемкое(((. Подтягиваем весь код, чтобы он был одной сплошной строкой. И оставляем все галочки.
Я, к сожалению, подтянуть ничего не могу, т.к. тогда мне придется подтягивать и тот код, который выложен для копирования, а Вам будет в нем нелегко все искать((( Особенно, если нет привычки к тегам. Поэтому ...
При цитированиии не забываем убирать галочку с "Сохранять переводы строк в тексте".
Ну и напоследок - уже готовый, "подтянутый код, в который надо только вставить ссылки на картинки и опубликовать. Код аналогичен моему - 200 px - высота строки, ширина столбцов - 25 % , столбцов в таблице 4. На главной странице - табличка в одну строку, и вторая табличка в 10 строк.
При публикации этого кода никаких галочек не убираем. Просто копируем, вставляем ссылки и публикуем.
letitbit.net. 954.58 Kb.
