Опубликован: 28.11.2008 | Доступ: свободный | Студентов: 8045 / 754 | Оценка: 4.49 / 4.28 | Длительность: 37:04:00
Лекция 32:

Оформление списков и ссылок

Объединяем все вместе - простое навигационное меню

Для иллюстрации одного из способов объединения списков и ссылок, ниже представлен простой пример раскрывающегося навигационного меню, показанного на рис. 32.31. Раскрывающиеся меню являются очень распространенной навигационной системой.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv= "Content-Type" content="text/html; charset=utf-8"/>
	<title>Styling Lists example - basic flyout list</title>
	<link rel="stylesheet" href="styling-lists-example-flyout.css" type="text/css" media= "screen, projection"/>
	<script type="text/javascript" src="styling-lists-example-flyout.js"></script>
</head>
<body>
<div id="page">

    <h1 >Home</h1>

	<!-- Обратите внимание, что ID контейнерного списка должен 
соответствовать ID, заданному в Javascript. -- >
    <ul id="nav">
      <li><a href="http://example.com/">Home</a>
      	<ul>
      		<li><a href="http://example.com/">Nested Item</a></li>
      		<li><a href="http://example.com/">Nested Item</a></li>
      	</ul>
      </li>
      <li><a href="http://example.com/">About Us</a>
      	<ul>
      		<li><a href="http://example.com/">Nested Item</a></li>
      		<li><a href="http://example.com/">Nested Item</a></li>
      	</ul>
      </li>
      <li><a href="http://example.com/">Our Products</a >
      	<ul>
      		<li><a href="http://example.com/">Nested Item</a></li>
      		<li><a href="http://example.com/">Nested Item</a></li>
      	</ul>
      </li>
      <li><a href="http://example.com/">Contact Us</a>
      	<ul>
      		<li><a href="http://example.com/">Nested Item</a></li>
      		<li><a href="http://example.com/">Nested Item</a></li>
      	</ul>
      </li>
    </ul>

	<h2>Stuff</h2>

	<p>Text</p>

	<p>Text</p>

</div> <!-- // #page -- >
</body>
</html>
 Снимок с экрана примера раскрывающегося меню

Рис. 32.31. Снимок с экрана примера раскрывающегося меню

Заключение

Хорошие навыки оформления списков и ссылок являются существенно важными для разработчиков Web, так как они используются повсеместно. Они регулярно объединяются для создания навигации сайта; в то же время четкое оформление ссылок является критически важным при использовании любого сайта. Плохое оформление ссылок может серьезно запутать любого, и может даже сделать сайт непригодным для некоторых людей.

Контрольные вопросы

  • Как выбирать оформление базовых списков, например, квадратные маркеры или римские цифры для упорядоченного списка?
  • Что такое спрайт изображения, и зачем он используется?
  • Почему важен цветовой контраст, и как проверить, что ссылки используют подходящие цвета?
  • Что такое правильный порядок задания оформления различных состояний ссылок?

Дополнительное чтение

Об авторе


Бен Бучанан начал создавать Web-страницы более десяти лет назад, получив степень по всем наукам, кроме ИТ. Он работал как в публичном (университет), так и в частном секторах; и работал над реконструкцией крупных Web-сайтов, включая The Australian (http://www.theaustralian.com.au/) и три поколения корпоративного Web-сайта Университета Гриффита (http://www.griffith.edu.au/). Он работает в настоящее время в качестве Архитектора внешнего интерфейса в News Digital Media (http://www.newsdigitalmedia.com.au/) и пишет в блоге 200ok (http://weblog.200ok.com.au/).

Материалы этого курса имеют лицензию Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.
Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Марина Дайнеко
Марина Дайнеко
Россия, Moscow, Nope, 2008
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989