Web-дизайн

:

Введение в стандарты Web
[+]
Опубликован: 28.11.2008 | Уровень: для всех | Доступ: платный
Лекция 32:

Оформление списков и ссылок
A
|
версия для печати
< Лекция 31 || Лекция 32: 123456 || Лекция 33 >

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

Для иллюстрации одного из способов объединения списков и ссылок, ниже представлен простой пример раскрывающегося навигационного меню, показанного на рис. 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.
Дальше >>
< Лекция 31 || Лекция 32: 123456 || Лекция 33 >

Вопросы и ответы

вопросов: 27
Марина Походаева
Марина Походаева

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

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

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

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

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

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

ответить