Языки HTML и CSS. Занятие 10.

Начнём строить сайт. Делаем "подвал". Заключение.

Здгавствуйте догогие дгузя! Пгодолжим гассмотгение темы.

Теперь открываем предпоследнюю, нижнюю строку большой, главной таблицы. Будем ставить нижние картинки – 3 штуки.

<td height="186" colspan="3" align="center"> <!-- Открыли объединённую из трёх ячейку на всю ширину главной таблицы, как мы это уже делали раньше. -->

<table width="100%" border="0" cellspacing="0" cellpadding="0"> > <!-- В эту большую ячейку помещаем новую таблицу в одну строку и пять ячеек для наших трёх картинок и двух пробелов между ними, шириной в 1% от ширины этой таблицы. Хотя это можно сделать и просто параметрами отступ внутри ячейки cellpadding или полями между ячейками cellspacing. Ладно, оставим так. Пусть у вас на вооружении будет ещё один приём. -->

<tr> <!-- Открыли строку в новой таблице -->
<td width="250" height="186" background="images/Saimaa2.jpg">;</td> <!-- Открыли ячейку 250 на 186 пикселей (помните, да?), поместили картинку, закрыли ячейку. -->

<td width="1%"></td> <!-- Открыли ячейку шириной в 1% от ширины этой таблицы. Это промежуток между фотографиями. -->
<td width="250" height="186" background="images/Saimaa3.jpg"></td>
<td width="1%"></td> <!-- Аналогично. -->

<td width="250" height="186" background="images/Saimaa6.jpg"></td> <!—- Все картинки и промежутки между ними размещены, можно закрываться. -->
</tr>
</table>
</td>
</tr> <!-- Всё закрыли. -->

<tr> <!-- И наконец мы добрались до самого подвала, нижняя полоса с копирайтом. Открываем последнюю, самую нижнюю строку. -->

<td height="38" colspan="2" align="left" background="images/BottomBar.jpg"> <!-- Ставим фоновый рисунок с полоской и грузовой маркой нашего корабля. -->

<p class="style=4 style36 style37"><span class="style38">- Copyright
© 2010 Harry Mets Rro Co.</span></p></td> <!-- Пишем текст копирайта и закрываемся. -->

<td height="38" align="right" valign="middle" back-ground="images/BottomBar.jpg"><p align="center" class="style36"></p> <!-- Ставим фоновый рисунок с полоской в самой правой ячейке строки. Почему так вышло, не знаю…. Вы поищите ответ сами, это будет полезное упражнение. Можете переделать, как посчитаете нужным. -->
</td>
</tr>
</table>
</td>
</tr>
</table> <!-- Всё и вся закрыли. -->

</body> <!-- Закрыли «тело» страницы. -->
</html> <!-- Закрыли саму страницу. Всё! Ура, мучения кончились. Получилась страничка сайта на языке html. Поздравляю! Довольно муторно, но в принципе, как вы убедились, просто. Надо только быть внимательным. -->

Вот мы и закончили написание первой и достаточно сложной страницы. Её оригинал вы сможете увидеть по адресу: http://www.saimaa.sobdelo.ru/index.html, это вообще целый сайт. Посмотрите, потрогайте руками, покопайтесь во внутренностях. Будет полезно для понимания вопроса.

Наверное, вам бросилось в глаза слишком уж обильное употребление таблиц. Сплошные таблицы! Без них сложно «расчертить» пространство страницы так, как мы хотели бы. Это существенный недостаток этого метода. К тому же поисковым машинам сложно проникнуть в такой частокол таблиц и «видимость» вашего сайта для них ухудшается.

Выход из этой ситуации такой. Делать блочную вёрстку с помощью  пары тэгов <div> и </div>. Они описывают некий контейнер, в который вы можете положить любое содержание. Это сравнительно новый и прогрессивный метод вёрстки. И его приветствуют организации, стандартизирующие Сеть, а  так же разработчики поисковых роботов, которые ищут сайты в И-нете.

Но об этом мы поговорим позже. А сейчас попрактикуйтесь в написании собственных страничек на html.

Назад