Алексей Гладкий - Веб-Самоделкин. Как самому создать сайт быстро и профессионально

Читать онлайн «Веб-Самоделкин. Как самому создать сайт быстро и профессионально». Страница 15

Автор Алексей Гладкий

Товары:

<ul>

<li>промышленные товары</li>

<li>строительные материалы</li>

<li>одежда, обувь</li>

<li>детские игрушки</li>.

</ul><br>

Услуги:

грузоперевозки;

ответственное хранение;

юридическое консультирование.

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

</body>

</html>

Теперь сохраним выполненные изменения и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 2.17.

Рис. 2.17. Создание маркированного списка

Теперь нам нужно перечень предлагаемых компанией услуг представить в виде нумерованного списка. Об этом рассказывается в следующем разделе.

Создание нумерованного списка

Напомним, что нумерованный список задается с помощью тегов <ol> </ol>, причем каждый элемент списка должен помечаться тегами <li> </li>. Теперь доработаем наш программный код так, как показано в листинге 1.4.

Листинг 1.4. Создание нумерованного списка

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<i>Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли»</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>

Товары:

<ul>

<li>промышленные товары</li>

<li>строительные материалы</li>

<li>одежда, обувь</li>

<li>детские игрушки</li>.

</ul><br>

Услуги:

<ol>

<li>грузоперевозки</li>

<li>ответственное хранение</li>

<li>юридическое консультирование</li>

</ol>

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

</body>

</html>

Теперь сохраним выполненные изменения и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 2.18.

Рис. 2.18. Создание нумерованного списка

На рисунке видно, что между списками получился большой промежуток. Чтобы его уменьшить, можно удалить тег <br>, который следует после маркированного списка.

Очевидно, что для улучшения эргономических качеств веб-страницы слова Товары и Услуги лучше представить в виде заголовков – только не первого, а какого-нибудь другого уровня. Ниже приведен программный код, в котором эти слова преобразованы в заголовки второго уровня (листинг 1.5).

Листинг 1.5. Формирование заголовков второго уровня

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<h2>Товары:</h2>

<ul>

<li>промышленные товары</li>

<li>строительные материалы</li>

<li>одежда, обувь</li>

<li>детские игрушки</li>.

</ul>

<h2>Услуги:</h2>

<ol>

<li>грузоперевозки</li>

<li>ответственное хранение</li>

<li>юридическое консультирование</li>

</ol>

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

</body>

</html>

Теперь сохраним выполненные изменения и откроем страницу в окне Интернет-обозревателя – результат показан на рис. 2.19.

Рис. 2.19. Формирование заголовков второго уровня

Далее мы рассмотрим, каким образом можно представить данные на веб-странице в табличном виде.

Представление данных в табличном виде

В рассматриваемом примере мы оформим в виде таблицы перечни товаров и услуг. Для этого изменим программный код таким образом, чтобы они отображались не в виде маркированного и нумерованного списков, а в виде одной таблицы.

Напомним, что для создания таблицы используются теги <table> </table>, <tr> </tr> и <td> </td>. Теперь отредактируем программный код так, как показано в листинге 1.6.

Листинг 1.6. Представление данных в табличном виде

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<table>

<tr>

<td>Товары</td>

<td>Услуги</td>

</tr>

<tr>

<td>промтовары</td>

<td>грузоперевозки</td>

</tr>

<tr>

<td>стройматериалы</td>

<td>ответственное хранение</td>

</tr>

<tr>

<td>одежда, обувь</td>

<td>консультирование</td>

</tr>

<tr>

<td>детские игрушки</td>

<td>кредитование</td>

</tr>

</table>

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

</body>

</html>

Теперь сохраним выполненные изменения с помощью команды главного меню Файл ► Сохранить либо нажатием комбинации клавиш Ctrl+S, и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий представлен на рис. 2.20.

Рис. 2.20. Представление данных в табличном виде

Как видно на рисунке, информация, которая ранее была оформлена в виде маркированного и нумерованного списков, теперь представлена в табличном виде. Перечень товаров содержится в столбце Товары, а перечень услуг – в столбце Услуги.

Однако получившаяся таблица выглядит недостаточно эргономично. В частности, ее неплохо было бы заключить в рамки, а заголовки столбцов каким-то образом выделить.

Первая задача решается с помощью атрибута border тега <table>. Что касается выделения заголовков столбцов, то просто напишем их полужирным шрифтом, а сами эти ячейки выделим желтым цветом.

Для этого нам необходимо отредактировать программный код веб-страницы так, как показано в листинге 1.7.

Листинг 1.7. Форматирование таблицы

<html>

<head>

<title>Компания "Торговый мир"</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<tr>

<td bgcolor="yellow"><b>Товары</b></td>

<td bgcolor="yellow"><b>Услуги</b></td>

</tr>

<tr>

<td>промтовары</td>

<td>грузоперевозки</td>

</tr>

<tr>

<td>стройматериалы</td>

<td>ответственное хранение</td>

</tr>

<tr>

<td>одежда, обувь</td>

<td>консультирование</td>

</tr>

<tr>

<td>детские игрушки</td>

<td>кредитование</td>

</tr>

</table>

Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

</body>

</html>

Рис. 2.21. Форматирование таблицы

Ширина рамки таблицы задается соответствующим значением атрибута border. В нашем примере ему присвоено значение 2, поэтому толщина рамки таблицы составляет 2 пикселя.

Как видно на рисунке, содержимое ячеек слишком близко прилегает к рамке таблицы, из-за чего таблица смотрится не совсем эргономично. Чтобы решить эту проблему, задействуем атрибут cellpadding тега <table>. Напомним, что с помощью данного атрибута можно задать расстояние от содержимого ячеек до линий рамки таблицы. В нашем примере присвоим атрибуту cellpadding значение 10 – в этом случае расстояние от содержимого ячеек таблицы до ее рамок будет составлять 10 пикселей.

Кроме этого, с помощью атрибута align тега <table> мы центрируем таблицу по середине веб-страницы, а этот же атрибут в применении с тегами <td> позволит нам выровнять содержимое ячеек по центру.