Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>3D Studio Max 5 (Табличная верстка)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table class="main-table" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" class="header-cell">
<h1>3D Studio Max<sup>®</sup> 5</h1>
</td>
</tr>
<tr>
<td class="left-menu">
<ul>
<li>Главная</li>
<li>Учебник</li>
<li>Помощь</li>
<li>Форум</li>
</ul>
</td>
<td class="content">
<h2 class="content-title">О чем и для кого эта книга</h2>
<p>В последнее время появилось очень много программ для моделирования анимации и визуализации трёхмерных миров. Каждая из них по-своему хороша, однако лучшее сочетание простоты управления и эффективности конечного результата удалось создать разработчикам из Discreet, Inc (ранее Kinetix)...</p>
<p>Из названия этой книги следует, что главный упор сделан на ознакомлении начинающего художника с основными возможностями 3D Studio Max и методами быстрой и эффективной работы.</p>
<h3 class="sections-title">Разделы книги:</h3>
<table class="sections-table" cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="icon-cell">
<div class="icon-box">[3D]</div>
</td>
<td>
<b>Моделирование</b><br>
Раздел посвящен созданию и редактированию объектов сцен.
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="icon-cell">
<div class="icon-box">[ANIM]</div>
</td>
<td>
<b>Анимация</b><br>
Существует для придания реализма и оживления миров.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="right-menu">
<h3 class="right-menu-title">Дополнительная литература</h3>
<p><b>Филипп МИЛЛЕР и др.</b><br>«Внутренний мир 3D Studio Max 3»<br>ISBN 985-7393-49-8</p>
<p><b>Тед БРОДМЭН</b><br>«Внутренний мир 3D Studio Max 3: Моделирование»<br>ISBN 985-7393-37-2</p>
<p><b>Геннадий ТЕМИН</b><br>«3D Studio Max 3: Самоучитель»<br>ISBN 985-7393-37-2</p>
</td>
</tr>
<tr>
<td colspan="3" class="footer-cell">
<b>Дополнительные ссылки:</b>
<p class="footer-link">Проекты к книге доступны на сайте: www.dialoft.kiev.ua</p>
<p class="footer-link">Вопросы и замечания присылайте на e-mail: books@dialoft.kiev.ua</p>
</td>
</tr>
</table>
<div class="bottom-copyright">
Создание сайта Москва цена
</div>
</body>
</html>
/* Общие настройки страницы */
body {
font-family: Arial, sans-serif;
background-color: #d3d3d3;
margin: 0;
padding: 20px;
}
/* Главный контейнер-таблица */
.main-table {
width: 850px;
margin: 0 auto;
background-color: #e0e0e0;
border: 1px solid #000;
border-collapse: collapse;
}
/* Шапка сайта */
.header-cell {
text-align: center;
border-bottom: 2px solid #000;
padding: 15px;
}
/* Левое меню */
.left-menu {
width: 100px;
vertical-align: top;
background-color: #666;
color: #fff;
padding: 15px;
}
.left-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.left-menu li {
margin-bottom: 15px;
font-weight: bold;
}
/* Центральный контент */
.content {
vertical-align: top;
padding: 20px;
background: #f5f5f5;
text-align: justify;
}
.content-title {
text-align: center;
margin-top: 0;
}
.sections-title {
text-align: center;
margin-top: 30px;
}
/* Таблица разделов книги (Моделирование / Анимация) */
.sections-table {
width: 100%;
margin-top: 25px;
border-collapse: collapse;
}
.sections-table td {
vertical-align: top;
width: 50%;
padding-right: 15px;
}
.icon-cell {
padding-right: 10px;
}
.icon-box {
width: 45px;
height: 45px;
background: #333;
color: #fff;
text-align: center;
line-height: 45px;
font-size: 10px;
}
/* Правая колонка с литературой */
.right-menu {
width: 200px;
vertical-align: top;
padding: 15px;
font-size: 12px;
border-left: 1px solid #999;
}
.right-menu-title {
text-align: center;
margin-top: 0;
}
/* Подвал (Футер) */
.footer-cell {
border-top: 2px solid #000;
padding: 15px;
text-align: center;
font-size: 12px;
}
.footer-link {
margin: 5px 0;
}
/* Текст под таблицей в самом низу */
.bottom-copyright {
text-align: center;
font-size: 11px;
margin-top: 15px;
}