Создаем большой новостной блок. Часть 2.

Я в прошлом своем сообщении писал о том, как создать блок из одной новости, сегодня мы попробуем модернизировать его и создать большой новостной блок.

Для начала я вам напомню предыдущий блок и его код, а после этого приступим к более расширенному блоку. Сегодня попробуем составить более объемный и официальный блок новостей. Составлять новый будем на основе предыдущего. Вот что у нас было до этого:



Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

А код для него вот такой:

<a href="http://ty-blogger.blogspot.com/"><table border="0" width="50%" bgcolor="#000066"><tbody><tr><td bgcolor="#CCCCCC"><img vspace="8" hspace="10" style="border: 2px solid #000066; width: 80px; height: 80px;" src="http://……………….jpg" align="left"/>Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!</td></tr></tbody></table></a>

Будем делать большой новостной блог в более официальном стиле. Сделаем его без внешней рамки на фоне странице в два столбца и две строки. Все опишу, поэтому поменять количество столбцов и строк не составит труда.

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

1. Сначала создадим саму таблицу.

Тег <tr> означает строки. Начало – <tr>, конец – </tr>. В пределах этих тегов создаем необходимые нам ячейки. Раз у нас только два столбца, значит и повторяться коды ячеек внутри каждого тега должны два раза. Раз у нас две строки, то будет два набора этих тегов.

Тег <td> означает поле каждой ячейки, значит у нас их будет четыре. Начало ячейки – <td>, конец – </td>

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

Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая! Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!
Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая! Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

Меняем width="50%&quot на 100%, чтобы таблица была на всю ширину страницы. Я пишу весь код без разделения на новые строки, потому что в таблицах этого делать нельзя, так как программа учитывает каждую новую строку. В данном случае это приведет к широкой рамке. Разной толщиной выделил разные ячейки. Вот какой код у нас сейчас получается:

<a href="http://ty-blogger.blogspot.com/">

<table border="0" width="100%" bgcolor="#000066"><tbody><tr><td bgcolor="#CCCCCC"><img vspace="8" hspace="10" style="border: 2px solid #000066; width: 80px; height: 80px;" src="http://……..jpg" align="left"/>Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!</td><td bgcolor="#CCCCCC"><img vspace="8" hspace="10" style="border: 2px solid #000066; width: 80px; height: 80px;" src="http://…………jpg" align="left"/>Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!</td></tr><tr><td bgcolor="#CCCCCC"><img vspace="8" hspace="10" style="border: 2px solid #000066; width: 80px; height: 80px;" src="http://…………jpg" align="left"/>Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!</td><td bgcolor="#CCCCCC"><img vspace="8" hspace="10" style="border: 2px solid #000066; width: 80px; height: 80px;" src="http://………jpg" align="left"/>Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!</td></tr></tbody></table></a>

2. Делаем ссылку на каждый текст ячейки. Я для простоты буду вносить везде любые ссылки на страницы моего блога.

Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая! Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!
Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая! Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

Код для ссылки вставляем вокруг каждого текста. В моем случае он примет вот такой вид:

<table border="0" width="100%" bgcolor="#000066"><tbody><tr><td bgcolor="#CCCCCC"><img vspace="8" hspace="10" style="border: 2px solid #000066; width: 80px; height: 80px;" src="http://……..jpg" align="left"/><a href="http://ty-blogger.blogspot.com/">Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!</a></td><td bgcolor="#CCCCCC"><img vspace="8" hspace="10" style="border: 2px solid #000066; width: 80px; height: 80px;" src="http://…………..jpg" align="left"/><a href="http://ty-blogger.blogspot.com/2009/08/blog-post_12.html">Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!</a></td></tr><tr><td bgcolor="#CCCCCC"><img vspace="8" hspace="10" style="border: 2px solid #000066; width: 80px; height: 80px;" src="http://…………jpg" align="left"/><a href="http://ty-blogger.blogspot.com/2009/07/blog-post_8461.html">Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!</a></td><td bgcolor="#CCCCCC"><img vspace="8" hspace="10" style="border: 2px solid #000066; width: 80px; height: 80px;" src="http://……………jpg" align="left"/><a href="http://ty-blogger.blogspot.com/2009/08/grj.html">Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!</a></td></tr></tbody></table>

Жирным пометил места вставки ссылок.

3. Убираем большую рамку и заливку внутри каждой ячейки. Для этого просто удаляем bgcolor="#000066" и bgcolor="#CCCCCC". Вот , что получаем:

Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая! Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!
Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая! Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

4. Теперь сделаем вид картинки более официальным. Для этого сделаем рамку тоньше и черного цвета. Для этого поменяем border: 2px solid #000066 на border: 1px solid #000000

Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая! Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!
Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая! Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

5. Для пуще красоты немного отформатируем ссылку. Добавим перед ней тег новой строки <br/> а сам текст сделаем помельче на 1 размер. Для этого окружим текст тегами <font size="-1"> и </font>. Вот, что получается:


Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

Вот какой код получится:

<table border="0" width="100%"><tbody><tr><td><img vspace="8" hspace="10" style="border: 1px solid #000000; width: 80px; height: 80px;" src="http:……..jpg" align="left"/><br/><a href="http://ty-blogger.blogspot.com/"><font size="-1">Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!</font></a></td><td><img vspace="8" hspace="10" style="border: 1px solid #000000; width: 80px; height: 80px;" src="http://………….jpg" align="left"/><br/><a href="http://ty-blogger.blogspot.com/2009/08/blog-post_12.html"><font size="-1">Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!</font></a></td></tr><tr><td><img vspace="8" hspace="10" style="border: 1px solid #000000; width: 80px; height: 80px;" src="http://……….jpg" align="left"/><br/><a href="http://ty-blogger.blogspot.com/2009/07/blog-post_8461.html"><font size="-1">Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!</font></a></td><td><img vspace="8" hspace="10" style="border: 1px solid #000000; width: 80px; height: 80px;" src="http://…………..jpg" align="left"/><br/><a href="http://ty-blogger.blogspot.com/2009/08/grj.html"><font size="-1">Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!</font></a></td></tr></tbody></table>

Ну еще раз напомню какие преобразование мы делали. Это то, что мы имели:



Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

А это то, что мы получили:


Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

Вот все бы попадали на такую рыбалку! Ловись рыбка только большая и большая!

А о том, что можно заменить в каждой ячейке читайте в предыдущей статье "Создаем новостной блог"!
Надеюсь, что у всех получилось также. Также верб в то, что эта информация будет полезна не только владельцам блогов, но и сайтов. Спасибо за внимание, вопросы приветствуются!

This entry was posted on Пятница, Сентябрь 18th, 2009 at 8:31 пп and is filed under HTML теги. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Создаем большой новостной блок. Часть 2.”

  1. Наталия:

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

  2. Лиса:

    Классный совет! Но пока я тоже воздержусь. Мне бы запомнить всё то, чему я на этой неделе научилась. Благодаря Вам, Алекс! Так что жду Ваших новых постов. Не знаю о чём, но всё равно жду… :-)

Прокомментировать запись: