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