Опубликован: 28.11.2008 | Уровень: для всех | Доступ: платный
Лекция 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.
Марина Походаева
Марина Походаева

Помогите мне. Я ничего не понимаю в курсе ((((((   (от слова "совсем") и мне от этого очень грустно. Есть ли какие-нибудь курсы для "чайников", самые простые в объяснении. ПАМАГИТЕ!!!

Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Константин Леденев
Константин Леденев
Россия
Олег Равков
Олег Равков
Россия

( ! ) Warning: include_once(./includes/unicode.entities.inc) [<a href='function.include-once'>function.include-once</a>]: failed to open stream: No such file or directory in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
15.8571105632576watchdog( )../bootstrap.inc:0
25.8573105635040module_invoke( )../bootstrap.inc:967
35.8574105636896call_user_func_array ( )../module.inc:462
45.8574105637232devel_watchdog( )../module.inc:462
55.8575105638080decode_entities( )../devel.module:382
65.8575105640000drupal_error_handler( )../devel.module:340
75.8575105643608watchdog( )../common.inc:663
85.8576105645672module_invoke( )../bootstrap.inc:967
95.8576105647528call_user_func_array ( )../module.inc:462
105.8576105647864devel_watchdog( )../module.inc:462
115.8576105648560decode_entities( )../devel.module:382

( ! ) Warning: include_once() [<a href='function.include'>function.include</a>]: Failed opening './includes/unicode.entities.inc' for inclusion (include_path='.:/usr/local/zend/var/libraries/Zend_Framework_1/default/library:/usr/local/zend/share/pear') in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
15.8571105632576watchdog( )../bootstrap.inc:0
25.8573105635040module_invoke( )../bootstrap.inc:967
35.8574105636896call_user_func_array ( )../module.inc:462
45.8574105637232devel_watchdog( )../module.inc:462
55.8575105638080decode_entities( )../devel.module:382
65.8575105640000drupal_error_handler( )../devel.module:340
75.8575105643608watchdog( )../common.inc:663
85.8576105645672module_invoke( )../bootstrap.inc:967
95.8576105647528call_user_func_array ( )../module.inc:462
105.8576105647864devel_watchdog( )../module.inc:462
115.8576105648560decode_entities( )../devel.module:382

( ! ) Warning: include_once(./includes/unicode.entities.inc) [<a href='function.include-once'>function.include-once</a>]: failed to open stream: No such file or directory in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
15.8571105632576watchdog( )../bootstrap.inc:0
25.8573105635040module_invoke( )../bootstrap.inc:967
35.8574105636896call_user_func_array ( )../module.inc:462
45.8574105637232devel_watchdog( )../module.inc:462
55.8575105638080decode_entities( )../devel.module:382
65.8582105640192drupal_error_handler( )../devel.module:340
75.8582105643880watchdog( )../common.inc:663
85.8582105645944module_invoke( )../bootstrap.inc:967
95.8582105647800call_user_func_array ( )../module.inc:462
105.8582105648136devel_watchdog( )../module.inc:462
115.8583105648912decode_entities( )../devel.module:382

( ! ) Warning: include_once() [<a href='function.include'>function.include</a>]: Failed opening './includes/unicode.entities.inc' for inclusion (include_path='.:/usr/local/zend/var/libraries/Zend_Framework_1/default/library:/usr/local/zend/share/pear') in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
15.8571105632576watchdog( )../bootstrap.inc:0
25.8573105635040module_invoke( )../bootstrap.inc:967
35.8574105636896call_user_func_array ( )../module.inc:462
45.8574105637232devel_watchdog( )../module.inc:462
55.8575105638080decode_entities( )../devel.module:382
65.8582105640192drupal_error_handler( )../devel.module:340
75.8582105643880watchdog( )../common.inc:663
85.8582105645944module_invoke( )../bootstrap.inc:967
95.8582105647800call_user_func_array ( )../module.inc:462
105.8582105648136devel_watchdog( )../module.inc:462
115.8583105648912decode_entities( )../devel.module:382

( ! ) Warning: include_once(./includes/unicode.entities.inc) [<a href='function.include-once'>function.include-once</a>]: failed to open stream: No such file or directory in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
15.8588105633120watchdog( )../bootstrap.inc:0
25.8588105635184module_invoke( )../bootstrap.inc:967
35.8588105637040call_user_func_array ( )../module.inc:462
45.8588105637376devel_watchdog( )../module.inc:462
55.8588105638080decode_entities( )../devel.module:382
65.8589105640000drupal_error_handler( )../devel.module:340
75.8589105643608watchdog( )../common.inc:663
85.8589105645672module_invoke( )../bootstrap.inc:967
95.8589105647528call_user_func_array ( )../module.inc:462
105.8589105647864devel_watchdog( )../module.inc:462
115.8589105648560decode_entities( )../devel.module:382

( ! ) Warning: include_once() [<a href='function.include'>function.include</a>]: Failed opening './includes/unicode.entities.inc' for inclusion (include_path='.:/usr/local/zend/var/libraries/Zend_Framework_1/default/library:/usr/local/zend/share/pear') in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
15.8588105633120watchdog( )../bootstrap.inc:0
25.8588105635184module_invoke( )../bootstrap.inc:967
35.8588105637040call_user_func_array ( )../module.inc:462
45.8588105637376devel_watchdog( )../module.inc:462
55.8588105638080decode_entities( )../devel.module:382
65.8589105640000drupal_error_handler( )../devel.module:340
75.8589105643608watchdog( )../common.inc:663
85.8589105645672module_invoke( )../bootstrap.inc:967
95.8589105647528call_user_func_array ( )../module.inc:462
105.8589105647864devel_watchdog( )../module.inc:462
115.8589105648560decode_entities( )../devel.module:382

( ! ) Warning: include_once(./includes/unicode.entities.inc) [<a href='function.include-once'>function.include-once</a>]: failed to open stream: No such file or directory in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
15.8588105633120watchdog( )../bootstrap.inc:0
25.8588105635184module_invoke( )../bootstrap.inc:967
35.8588105637040call_user_func_array ( )../module.inc:462
45.8588105637376devel_watchdog( )../module.inc:462
55.8588105638080decode_entities( )../devel.module:382
65.8595105640192drupal_error_handler( )../devel.module:340
75.8595105643880watchdog( )../common.inc:663
85.8596105645944module_invoke( )../bootstrap.inc:967
95.8596105647800call_user_func_array ( )../module.inc:462
105.8596105648136devel_watchdog( )../module.inc:462
115.8596105648912decode_entities( )../devel.module:382

( ! ) Warning: include_once() [<a href='function.include'>function.include</a>]: Failed opening './includes/unicode.entities.inc' for inclusion (include_path='.:/usr/local/zend/var/libraries/Zend_Framework_1/default/library:/usr/local/zend/share/pear') in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
15.8588105633120watchdog( )../bootstrap.inc:0
25.8588105635184module_invoke( )../bootstrap.inc:967
35.8588105637040call_user_func_array ( )../module.inc:462
45.8588105637376devel_watchdog( )../module.inc:462
55.8588105638080decode_entities( )../devel.module:382
65.8595105640192drupal_error_handler( )../devel.module:340
75.8595105643880watchdog( )../common.inc:663
85.8596105645944module_invoke( )../bootstrap.inc:967
95.8596105647800call_user_func_array ( )../module.inc:462
105.8596105648136devel_watchdog( )../module.inc:462
115.8596105648912decode_entities( )../devel.module:382