Создать привлекательный Иллюстрированное оглавление для Web

Более длинные статьи / содержимое на веб хорошо обслуживают Содержание. Как и в книге, они повышают удобство, позволяя читателям, чтобы перейти непосредственно к конкретным разделам, а не трудом выделить всю статью, чтобы найти что-то. Типичный Содержание довольно скучно, давайте Spice его немного с немного цвета и рисунка!

Вот что мы будем строить:

1. Исходный материал

Характер иллюстрации мы будем использовать векторные изображения доступны с иллюстратором 9Lives на Istockphoto. Векторный файл был построен очень хорошо, поэтому было легко изолировать женщину графика. Я бросил его в Photoshop, чтобы изменить размер его точный размер пиксела я хотел.

С Photoshop, я использовал "Сохранить для Web & Devices" Экспорт варианта и сохранить с помощью PNG-24 вариант. Это место для полного 32-битного альфа-прозрачный PNG. Единственный браузер, который будет иметь никаких проблем с этим является IE 6, поэтому если это будет проблемой для вас, вы должны изучить, либо используя PNG Hack, сохранив как GIF или 8-битных PNG вместо или с помощью условного стиля, чтобы скрыть от графического IE 6.

2. Дать разметки HTML

Вложенный отсортированы списки мяса Содержание. Наша разметки будут использовать их, но затем обернуть все это в DIV мы будем использовать для создания Тан поле. Мы будем использовать традиционные тэг H1 для заголовка. Простой и понятный.

<div id="ToC"> <img src="images/woman.png" alt="" class="woman" /> <h1>Table of Contents</h1> <ol> <li>Article Heading</li> <li> Article Heading <ol> <li>Article Subhead</li> <li>Article Subhead</li> </ol> </li> <li>Article Heading</li> <li> Article Heading <ol> <li>Article Subhead</li> <li>Article Subhead</li> <li>Article Subhead</li> <li>Article Subhead</li> </ol> </li> <li>Article Heading</li> <li>Article Heading</li> <li> Article Heading <ol> <li>Article Subhead</li> </ol> </li> </ol> </div> 

Заметьте, что мы добавить иллюстрацию женщину здесь на самом верху и дать здесь уникальный класс. Это крючок мы будем использовать для цели и позиции ее с CSS. Это также крючок можно использовать в условных стилей, чтобы скрыть ее, если это будет необходимо.

В живом Содержание, текст в каждом элементе списка будут завернуты в якоря, а также ссылки. HREF атрибута бы указывая на значение хэш URL вроде "# статье два", которая, при нажатии на которую будет прыгать вниз страницы с элементом которых этот идентификатор. В нижней части каждого раздела, можно даже сделать "вверх" ссылки, ссылки на # TOC, которая будет прыгать людям вернуться к к оглавлению.

3. CSS

CSS также довольно проста. Я просто покажу вам все это, а затем указать на несколько вещей ниже.

 *    { margin: 0; padding: 0; } body    { font-size: 62.5%; font-family: Helvetica, sans-serif; padding: 50px; } #ToC    { background: #f4e5b1; border: 1px solid #b1a041; margin: 25px; -moz-border-radius: 12px; -webkit-border-radius: 12px; padding: 10px; width: 260px; position: relative; min-height: 320px; } h1    { font-size: 22px; margin: 5px 0 10px 75px; letter-spacing: -1px; } ol    { margin-left: 100px; font-weight: bold; letter-spacing: -1px; } ol ol    { margin-left: 20px; list-style: lower-alpha;} ol li    { font-size: 18px; margin: 3px 0;} ol li ol li   { font-size: 12px; } .woman    { position: absolute; top: -25px; left: -55px; } 

Things отметить:

- # ToC стилизовано очень просто используете только цвет фона и одного цвета пиксела границе. Браузер конкретные атрибуты добавляются делать закругленными углами. Эта функция будет работать и выглядеть большим во всех браузерах Mozilla (Flock, Firefox и т.д.), а также Webkit браузер (Konqueror, Safari и т.д.). При просмотре страницы в IE 7 или Opera, он деградирует красиво только регулярные прямые углы. Не большое дело.

- Приказал списки оттолкнула от левой части окна (чтобы освободить место для иллюстраций) с левого края. Вложенных упорядоченных списков также оставить значение разницы, к меньшему значению. Без этого они будут иметь отступ еще, но с использованием той же 100px которая была бы слишком далеко. Также обратите внимание на подпункт упорядоченные списки список стиль установлен на нижний-альфа. Для этого используются буквы вместо нумерации затем на вложенные списки, что облегчает просмотр визуально.

- Потому # ToC имеет относительное позиционирование применяется, мы можем использовать абсолютное позиционирование на. Женщине класс получить иллюстрацию, что именно там, где мы хотим. Не надо нервничать об использовании абсолютного позиционирования здесь, это не для разметки. Подробнее об абсолютном позиционировании внутри относительное позиционирование.

Готовая продукция

Просмотреть демо

Download Files