ГЛАВНАЯ СТРАНИЦА | ВХОД
Свой блог я хочу посвятить таким же новичкам в сети, каким являюсь и я.
Здесь я буду делиться с вами всем тем, чему я научился за время существования моего блога.
И пусть опытные Веб-мастера не удивляются банальности моих тем, ведь я еще сам "чайник", поэтому и делиться советами буду прежде всего с такими же новичками, как и я.
Надеюсь, что мои советы кому-то помогут.
С уважением, Алексей

Создаем большой новостной блок. Часть 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%" на 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>

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


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


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


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

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

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

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


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

А вы знаете о том, что степень внимания, уделяемого мужчиной жене и детям зависит от мужского гормона тестостерона? Обязательно прочитайте подробнее на detkalin.ru!

Компания "Ты и я" много лет обеспечивает нас качественными и вкусными продуктами питания! Фруктовая консервация - что может быть вкуснее для десерта или закуски к легким напиткам? Приглашаем к партнерству! "Ты и я" - секрет семейного счастья!


На досуге всем предлагаю посмотреть фильм - The Lake House - "Дом у озера" с мировыми звездами Киану Ривз и Сандрой Булок! Теплый нежный фильм о любви!
-------------------------------------------

С этой темой еще читают:

2 комментария:

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

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

    ОтветитьУдалить

В комментариях оставляем мнения и советы к данной статье. Все вопросы задаем ТОЛЬКО на ФОРУМЕ. Отвечаю и стараюсь помочь всем!