Пошаговый пример
Давайте рассмотрим пошаговый пример, чтобы собрать все это вместе. Рассмотрим следующий сценарий:
Мы создаем небольшой Web-сайт для Кулинарной школы. На основной странице мы покажем список классифицированных рецептов, связанный ссылками со страницами рецептов. Каждая страница рецепта перечисляет требуемые ингредиенты, замечания по этим ингредиентам и метод приготовления. Тремя категориями являются "Cakes" (включающая рецепты для "Plain Sponge", "Chocolate Cake" и "Apple Tea Cake"); "Biscuits" (включающая рецепты "ANZAC Biscuits", "Jam Drops" и "Melting Moments"); и "Quickbreads" (включающая рецепты для "Damper" и "Scones"). Клиенту все равно в каком порядке будут выводиться категории и рецепты, он просто хочет, чтобы люди понимали, какие позиции являются категориями, а какие являются рецептами.
Давайте пройдем через процесс создания этого сайта. В этом разделе мы займемся созданием разметки, а также добавим некоторое стилевое оформление для списков. Стилевое оформление не будет рассматриваться подробно до лекции о стилевом оформлении списков в дальнейшем в этой серии.
Разметка основной страницы
Создайте правильно сформированную страницу HTML, включая doctype, элементы html, head и body, и сохраните его как stepbystep-main.html. Добавьте основной заголовок (h1) "HTML Cooking School", и подзаголовок (h2) "Recipes":
<h1>HTML Cooking School</h1>
<h2>Recipes</h2>
Имеется три категории рецептов для представления, и порядок не важен - для этого больше всего подходит неупорядоченный список, поэтому добавим на страницу следующий код:
<h2>Recipes</h2>
<ul>
<li>Cakes</li>
<li>Biscuits</li>
<li>Quickbreads</li>
</ul>
Отступ для элементов li делает код удобнее для чтения, но не является обязательным.
Теперь нужно добавить рецепты в качестве подпунктов, например, "Plain Sponge", "Chocolate Cake" и "Apple Tea Cake" являются частью категории "Cakes". Для этого необходимо в каждой позиции списка создать вложенный список. Так как порядок неважен, то снова подходит неупорядоченный список. Чтобы упростить материал для учебного руководства, все рецепты можно соединить с одной страницей рецептов:
<h2>Recipes</h2>
<ul>
<li>Cakes
<ul>
<li><a href="stepbystep-recipe.html">Plain Sponge</a></li>
<li><a href="stepbystep-recipe.html">Chocolate Cake</a></li>
<li><a href="stepbystep-recipe.html">Apple Tea Cake</a></li>
</ul>
</li>
<li>Biscuits
<ul>
<li><a href="stepbystep-recipe.html">ANZAC Biscuits</a></li>
<li><a href="stepbystep-recipe.html">Jam Drops</a></li>
<li><a href="stepbystep-recipe.html">Melting Moments</a> </li>
</ul>
</li>
<li>Breads/quickbreads
<ul>
<li><a href="stepbystep-recipe.html">Damper</a></li>
<li><a href="stepbystep-recipe.html">Scones</a></li>
</ul>
</li>
</ul>
Добавление некоторых стилей
Клиенту нравится такая организация, но он хочет, чтобы категории имели небольшие стрелки вместо маркера. Он хочет также сместить категории на странице влево. Чтобы добиться этого, необходимо определить изображение вместо маркера, а затем изменить настройки полей/заполнения.
Чтобы избежать столкновения с другими списками на сайте, необходимо добавить class в охватывающий список, чтобы можно было делать специфические контекстные селекторы в таблице стилей. Класс "recipe-list" кажется подходящим:
<h2>Recipes</h2>
<ul class="recipe-list">
Теперь необходимо создать таблицу стилей, и добавить в нее несколько правил — сначала добавим открывающий и закрывающий теги style в заголовок (head) документа.
Затем удалим пробелы из охватывающего списка. По умолчанию некоторые браузеры используют поля (margin), а некоторые используют заполнение (padding) для разделения элементов, поэтому нужно задать оба эти значения равными нулю - добавьте следующее между тегами style:
ul.recipe-list {
margin-left: 0;
padding-left: 0;
}
Затем создадим специальное изображение маркера - можно использовать, например, такой (см. рисунок 16.1).
Рис. 16.1. Изображение специального маркера
Теперь мы удалим маркеры из элементов списка и зададим маркер как фоновое изображение для элементов списка, добавляя некоторое заполнение, чтобы текст не располагался поверх фонового изображения. Это можно сделать, добавляя следующий CSS сразу перед закрывающим тегом style:
ul.recipe-list li {
list-style-type: none;
background: #fff url("example-bullet.gif") 0 0.4em no-repeat;
padding-left: 10px;
}
Наконец, мы снова разместим маркеры на вложенных элементах списка и зададим фон как чисто белый (второе правило более специфическое, поэтому оно будет переопределять правило фонового изображения). Помните, что первое правило CSS будет наследоваться вложенным списком, поэтому необходимо "отменить" все настройки контейнера. Добавьте следующий код CSS сразу перед закрывающим тегом style:
ul.recipe-list li li {
list-style-type: disc;
background: #fff;
}
Окончательный результат должен быть похож на рисунок 16.2:
Рис. 16.2. Законченная основная страница со специальными изображениями маркеров
Можно также увидеть живой пример страницы здесь (http://dev.opera.com/articles/view/16-html-lists/stepbystep-main.html).