5.2.6 Создание контента web-страницы. Заполнение ячейки News
Займемся ячейкой News. Нужно, чтобы в ней располагались:
Блоки с текстом (т.е., которые с серой окантовкой).
Блок с заголовком «:: NEWS». (рис. 20).
Сделаем эти блоки в виде трех таблиц. Первая и третья таблицы будут иметь «зазор» между ячейками (назовем их NewsItem) в 5 пкс. В HTML это достигается с помощью <table cellspacing="5">
В CSS единственный аналог этой записи: table {border-collapse: separate; border-spacing: 5px;}, но он не работает в IE - в нем расстояние между ячейками при border-collapse: separate всегда будет 2 пкс, какой бы border-spacing вы не прописали. Так что воспользуемся параметром cellspacing.
|
|
|
Рис. 20 Создание контента
У ячеек NewsItem будет серая окантовка толщиной 1 пкс и фон в виде градиента от серого к белому. Текст в них будет выравниваться по ширине. Для заголовка и для ссылки >> в конце каждого текста я указала стиль текста. Вот html-код первой таблицы:
index.html
<table cellspacing="5" class="newstable">
<tbody>
<tr>
<td class="newsitem">
<h2 class="h_red">Contact information</h2>
<Lorem ipsum dolor sit amet... <a href="">>></a>
</td>
</tr>
</tbody>
</table>
style.css
table.newstable {
width: 100%;}
td.newsitem {
background-image: url(newsitem_bg.jpg);
background-repeat: repeat-x;
border: 1px solid silver;
padding: 10px;
text-align: justify;}
h2.hdr2 {
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
color: #c63c3c;
margin-bottom: 7px;}
a {text-decoration: none;
color: #c63c3c;}
Вторая таблица будет содержать всего одну ячейку, которая будет использовать созданный ранее стиль «hdr» (для того, чтобы вставить точки перед «News»):
index.html
<table class="hdrtab">
<tbody>
<tr>
<td class="hdr">News</td>
</tr>
</tbody>
</table>
style.css
table.hdrtab {
background-image: url(hdrtab_bg.jpg);
background-color: #dce1e9;
height: 37px;
width: 100%;
border-collapse: collapse;}
Третью таблицу вы можете сделать сами по аналогии с первой, вставив ее после таблицы hdrtab и добавив еще 2 ячейки.
Чтобы содержимое ячейки News не выходило за серую вертикальную линию (она же - фон News), сделаем отступ от правой границы 6 пкс.
td.news {
padding-right: 6px;}
Ячейка News заполнена. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который добавили в этом разделе (представлено ниже).
Main.html
<html>
<head>
<title>Layout</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class="main">
<tr>
<td class="top" colspan="2">
<table class="main">
<tr>
<td><img src="house.jpg" width="285" height="165" border="0"></td>
<td class="logo"><img src="logo.gif" width="206" height="27" border="0"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="search">
<form action="">
<table class="main">
<tr>
<td class="searchitem hdr">search</td>
<td class="searchitem" width="100%"><input type="text" name="Search" style="width: 100%"></td>
<td class="searchitem"><input type="image" src="button.jpg" width="22" height="39" border="0"></td>
</tr>
</table>
</form>
</td>
<td class="topmenu">
<table class="main">
<tr>
<td class="menuitem"><a class="menu" href="">Home</a></td>
<td class="menuitem"><a class="menu" href="">News</a></td>
<td class="menuitem"><a class="menu" href="">About Us</a></td>
<td class="menuitem"><a class="menu" href="">Catalog</a></td>
<td class="menuitem"><a class="menu" href="">Contacts</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="shadowleft"><img src="shadowleftpic.jpg" width="6" height="5" border="0"></td>
<td class="shadowright"><img src="shadowrightpic.jpg" width="7" height="5" border="0"></td>
</tr>
<tr>
<td class="news">
<table class="newstable" cellspacing="5">
<tr>
<td class="newsitem">
<h2 class="hdr2">Contact information</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
</table>
<table class="hdrtab">
<tr>
<td class="hdr">News</td>
</tr>
</table>
<table class="newstable" cellspacing="5">
<tr>
<td class="newsitem">
<h2 class="hdr2">News title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
<tr>
<td class="newsitem">
<h2 class="hdr2">News title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
<tr>
<td class="newsitem">
<h2 class="hdr2">News title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
</table>
</td>
<td class="text"></td>
</tr>
<tr>
<td class="copyright">
<table class="main">
<tr>
<td class="cprghtitem">Copyright © RealErtateCompany.com</td>
</tr>
</table>
</td>
<td class="bottommenu">
<table class="main">
<tr>
<td class="btmenuitem">
<a class="menu" href="">Home</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">News</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">About Us</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">Catalog</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">Contacts</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
index.html
<html>
<head>
<title>Layout</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class="main">
<tr>
<td class="top" colspan="2">
<table class="main">
<tr>
<td><img src="house.jpg" width="285" height="165" border="0"></td>
<td class="logo"><img src="logo.gif" width="206" height="27" border="0"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="search">
<form action="">
<table class="main">
<tr>
<td class="searchitem hdr">search</td>
<td class="searchitem" width="100%"><input type="text" name="Search" style="width: 100%"></td>
<td class="searchitem"><input type="image" src="button.jpg" width="22" height="39" border="0"></td>
</tr>
</table>
</form>
</td>
<td class="topmenu">
<table class="main">
<tr>
<td class="menuitem"><a class="menu" href="">Home</a></td>
<td class="menuitem"><a class="menu" href="">News</a></td>
<td class="menuitem"><a class="menu" href="">About Us</a></td>
<td class="menuitem"><a class="menu" href="">Catalog</a></td>
<td class="menuitem"><a class="menu" href="">Contacts</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="shadowleft"><img src="shadowleftpic.jpg" width="6" height="5" border="0"></td>
<td class="shadowright"><img src="shadowrightpic.jpg" width="7" height="5" border="0"></td>
</tr>
<tr>
<td class="news">
<table class="newstable" cellspacing="5">
<tr>
<td class="newsitem">
<h2 class="hdr2">Contact information</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
</table>
<table class="hdrtab">
<tr>
<td class="hdr">News</td>
</tr>
</table>
<table class="newstable" cellspacing="5">
<tr>
<td class="newsitem">
<h2 class="hdr2">News title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
<tr>
<td class="newsitem">
<h2 class="hdr2">News title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
<tr>
<td class="newsitem">
<h2 class="hdr2">News title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
</table>
</td>
<td class="text"></td>
</tr>
<tr>
<td class="copyright">
<table class="main">
<tr>
<td class="cprghtitem">Copyright © RealErtateCompany.com</td>
</tr>
</table>
</td>
<td class="bottommenu">
<table class="main">
<tr>
<td class="btmenuitem">
<a class="menu" href="">Home</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">News</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">About Us</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">Catalog</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">Contacts</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
style.css
html, body {
margin:0px;
padding:0px;
}
body, input, select, textarea {
background-color: #ffffff;
}
td, input, select, textarea {
font-family: Tahoma;
font-size: 11px;
color: #000000;
vertical-align: top;
}
td {
padding: 0px;
}
table.main {
width: 100%;
height: 100%;
border-collapse: collapse;
}
td.top {
background-image: url(top_bg.jpg);
height: 165px;
}
td.logo {
width: 100%;
text-align: right;
padding-top: 55px;
padding-right: 55px;
}
td.search {
background-image: url(search_bg.jpg);
background-color: #dce1e9;
height: 39px;
}
td.topmenu {
background-image: url(topmenu_bg.jpg);
background-color: #ff8e51;
}
td.searchitem {
vertical-align: middle;
text-align: center;
padding-right: 11px;
}
form {
margin: 0px;
}
td.hdr {
vertical-align: middle;
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
background-image: url(dots.gif);
background-repeat: no-repeat;
background-position: 10px;
padding-left: 21px;
}
td.menuitem {
vertical-align: middle;
text-align: center;
width: 20%;
background-image: url(menuitem_bg.jpg);
background-repeat: no-repeat;
background-position: right;
}
a.menu {
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
font-size: 10px;
}
td.shadowleft, td.shadowright {
background-image: url(shadow.jpg);
height: 5px;
}
td.shadowleft {
text-align: right;
}
td.news {
background-image: url(news_bg.jpg);
background-repeat: repeat-y;
background-position: right;
width: 30%;
padding-right: 6px;
}
table.newstable {
width: 100%;
}
td.newsitem {
background-image: url(newsitem_bg.jpg);
background-repeat: repeat-x;
border: 1px solid silver;
padding: 10px;
text-align: justify;
}
h2.hdr2 {
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
color: #c63c3c;
margin-bottom: 7px;
}
a {
text-decoration: none;
color: #c63c3c;
}
table.hdrtab {
border-collapse: collapse;
background-image: url(hdrtab_bg.jpg);
background-color: #dce1e9;
height: 37px;
width: 100%;
}
td.text {
background-image: url(text_bg.jpg);
background-repeat: repeat-y;
width: 70%;
height: 100%;
}
td.copyright {
padding-right: 5px;
height: 32px;
}
td.cprghtitem {
border-top: 1px solid #cacaca;
background-color: #f5f5f5;
vertical-align: middle;
text-align: center;
color: #656565;
font-size: 10px;
}
td.bottommenu {
background-image: url(bottom_bg.jpg);
background-color: #ff8e51;
height: 32px;
}
td.btmenuitem {
background-image: url(bottom_shadow.jpg);
background-repeat: no-repeat;
vertical-align: middle;
text-align: center;
}