Отправляет email-рассылки с помощью сервиса Sendsay

О веб-дизайне - из личного опыта.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Май 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

5.797 подписчиков
-1 за неделю
←   Все выпуски   →

О веб-дизайне - из личного опыта.


Спонсор Рассылки: Клуб Желающих Создать И Развивать Свой Сайт



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

С Вами вновь "Веб дизайн из личного опыта". И сегодня вас ждёт очередная порция полезной информации. Встречайте.

"Живые меню" (часть II)



Источник: http://dweb.ru/articles/index.php?idart=43

Текстовое меню с раскрывающимися списками подразделов

Как уже говорилось выше, графические выпадающие меню хороши лишь в том случае, если на сайте относительно мало разделов с несложной внутренней структурой. А как быть, если ваш сайт является чем-то вроде электронной книги со сложной системой разделов, глав и параграфов? И в этом случае вам на помощь при создании удобной навигации может прийти динамический HTML. Попробуйте сделать содержание сайта раскрывающимся по желанию посетителя.

В предыдущем примере мы оперировали свойством CSS visibility, теперь же нам больше подойдет свойство display, которое может принимать значения none и block. На первый взгляд свойства visibility и display ничем не отличаются - и то, и другое отображает или прячет элемент в зависимости от нашего желания. Но это только на первый взгляд. На самом деле у них имеется очень важное отличие. Если мы используем конструкцию visibility: hidden, то элемент не отображается на экране, но место, занимаемое этим элементом, оставляется пустым. Создается впечатление, что браузер не отобразил элемент, но "на всякий случай" ничем не занял его место. Если же мы напишем display: none, то браузер полностью изымет элемент из потока отображения, а на его месте отобразит следующий видимый относительно позиционированный элемент. Таким образом, свойство display как нельзя лучше подходит для создания текстовых меню с расширяемым по желанию пользователя содержимым. Обратите внимание: если мы собираемся динамически изменять свойство display, позиционировать динамические элементы мы должны относительно! Иначе открывающиеся блоки меню будут частично или полностью перекрывать друг друга.

Безусловно, удобнее всего воспользоваться для создания таких меню маркированными списками, содержащими вложенные списки. Каскадные таблицы стилей посредством свойства list-style-image позволяют переопределить стандартные маркеры списков на собственные, хранящиеся в файлах изображений. Создадим три небольших графических файла - для маркера, обозначающего раздел со скрытым содержимым ("закрытый" раздел), для маркера раздела с развернутым содержимым ("открытый" раздел) и для маркера собственно содержимого раздела. В нашем примере это будут файлы close.gif, open.gif и mark.gif.


Для начала следует создать единые стили для всех элементов основного и вложенного списков, определив при этом файлы маркеров для "открытых" (класс .open) и "закрытых" (класс .close) разделов, для маркеров содержимого, а также цвет ссылок и все остальные параметры, какие захотите. Естественно, для манипулирования свойством display также следует назначить разные классы (в примере - классы .col и .exp). Таблица стилей при этом должна выглядеть приблизительно так:

<style>
...
body {color: #940122; background: white;}
.close {cursor: hand; list-style-image: url(images/close.gif);}
.open {cursor: hand; list-style-image: url(images/open.gif);}
.col {position: relative; display: none;}
.exp {position: relative; display: block; list-style-image: url(images/mark.gif);}
...
</style>

В предыдущем примере вы уже познакомились с функцией, которая выполняется выборочно для того или иного объекта в зависимости от того, какой аргумент ей присвоен. Теперь же мы будем использовать функцию с двумя аргументами, что позволит нам изменять посредством одной функции одновременно свойства двух взаимосвязанных объектов (менять изображение закрытой папочки на открытую и одновременно отображать вложенный список).

Так как для сложных текстовых меню неудобно использовать обработчик события onmouseover (возможно, наш посетитель хочет, чтобы открытое меню было постоянно у него перед глазами), мы используем обработчик onclick, написав для него более интеллектуальную функцию. Наша функция будет автоматически определять, какой класс присвоен объекту, и заменять его на альтернативный. То есть, если пользователь щелкнет мышкой по заголовку "открытого" списка подразделов, то список закроется, и маркер заголовка сменится на картинку с закрытой папкой. А если, наоборот, клик будет произведен по заголовку "спрятанного" списка - список откроется, одновременно "откроется" и папочка рядом с заголовком. Записывается нужная нам функция следующим образом:

<head>
...
<script language="JavaScript">
function showhideObj(obj,expand)
{
 obj.className = obj.className == "col" ? 
 "exp": "col";
 expand.className = expand.className == "close" ? 
 "open": "close";
}
</script>
...
</head>

Сопоставив названия классов с таблицей стилей, вы, наверное, догадались, что объект obj - это вложенный, изначально спрятанный от посетителя список подразделов, а объект expand - это внешний элемент списка с визуально значимым маркером. Главное, не перепутайте последовательность аргументов при обращении к функции в обработчике событий, и не забудьте правильно задать идентификаторы динамическим элементам!

Код самих меню в "теле" страницы будет выглядеть приблизительно так:

<body>
<ul>
<li onclick="javascript:showhideObj(In1,Out1)"
class="close" id="Out1">Первый раздел сайта
<ul id="In1" class="col">
<li>
<a href="sample1.html" title="Подраздел первый">Подраздел первый</a>
</li>
<li>
<a href="sample2.html" title="Подраздел второй">Подраздел второй</a>
</li>
<li>
<a href="sample3.html" title="Подраздел третий">Подраздел третий</a>
</li>
<li>
<a href="sample4.html" title="Подраздел четвертый">Подраздел четвертый</a>
</li>
</ul>
</li>
<li onclick="javascript:showhideObj(In2,Out2)"
class="close" id="Out2">Второй раздел сайта
<ul id="In2" class="col">
<li>
<a href="sample1.html" title="Подраздел первый">Подраздел
первый</a>
</li>
<li>
<a href="sample2.html" title="Подраздел второй">Подраздел второй</a>
</li>
<li>
<a href="sample3.html" title="Подраздел третий">Подраздел третий</a>
</li>
<li>
<a href="sample4.html" title="Подраздел четвертый">Подраздел четвертый</a>
</li>
</ul>
</li>
</ul> 
</body>

Если вы используете одно и то же меню на разных страницах сайта, то так же, как и в случае с таблицами стилей, вы можете записать код функции в отдельном файле с расширением .js (например, my.js), а затем связать этот файл с каждой из ваших страниц с помощью атрибута src тэга <script>, значением которого будет являться URL-адрес внешнего файла:

<head>
...
<script language="JavaScript" src="my.js">
</script>
...
</head>

Содержимое файла my.js должно содержать только код функции (или нескольких функций). Тэги <script> и </script> в этом файле отсутствуют. Если вы на всех страницах сайта используете одновременно несколько сценариев (например, вверху страницы у вас располагаются графические меню из предыдущего примера, а слева - обсуждаемые сейчас текстовые меню), то вы можете включить в один внешний файл скрипта все три используемые функции, при этом лишь нужно следить за тем, чтобы имена функций (showObject, hideObject, showhideObj) различались.

Бандурина Людмила



Нужны навыки Веб-Дизайна?Профессионалы с Радостью Вам ПОМОГУТ!

Веб-дизайн

Книга адресована специалистам-практикам - дизайнерам, программистам, вебмастерам, менеджерам, маркетологам, но не меньшую пользу извлекут из этого руководства и те, кто платят им деньги. Судьба современной крупной (и не только!) компании во многом зависит от привлекательности, доступности и полезности ее сайта. Однако топ-менеджеры не всегда достаточно компетентны в вопросах юзабилити, которые в последнее время приобрели решающее значение. Стив добавил три главы, выдержав их в том же иронически-юмористическом ключе, и изложил в них свое понимание предмета и практические рекомендации, адресованные в равной степени и новичкам, и ветеранам. Если прочитанное изменит ваши взгляды на веб-дизайн, то в этом не будет ничего удивительного. Освоение принципов успешного веб-дизайна поможет вам задавать экспертам правильные вопросы и получать ответы, которые позволят находить решения трудных технических, эстетических и структурных проблем разработки сайтов.

Получить в своё распоряжение

Веб-дизайн: книга Якоба Нильсена

Книга, которую вы держите в руках, - самая известная на сегодняшний день книга по веб-дизайну. Ее автор, доктор физических наук Якоб Нильсен - признанный во всем мире специалист в области интерфейсов и удобства эксплуатации, - делится с читателем своими знаниями и опытом. Им был разработан ряд методик, направленных на быстрое и экономичное усовершенствование пользовательского интерфейса, включая эвристическую оценку. Он является обладателем 38 патентов США на разработки, ориентированные, главным образом, на повышение удобства работы пользователей с Интернетом. Книга содержит исчерпывающее руководство по построению эффективного взаимодействия с любым пользователем в любой ситуации: от подготовки информационного наполнения и оформления страниц до упрощения структуры навигации и создания профессиональных сайтов. В книге вы не найдете описаний каких-то конкретных программ и кодов на HTML. Она отвечает на самый главный вопрос дизайна: «Что именно нужно сделать, чтобы посетителям сайта было удобно с ним работать? »

Получить в своё распоряжение

Веб-дизайн: книга Дмитрия Кирсанова

Книга автора бестселлера «Факс-модем: от покупки и подключения до выхода в Интернет» - Дмитрия Кирсанова (www.kirsanov.com) - первый полный курс веб-дизайна на русском языке, написанный профессиональным дизайнером. От теоретических основ визуального дизайна до интернетовских технологий и приемов практической работы над сайтом - все это есть в книге, написанной понятно, подробно и увлекательно. Издание будет полезно не только начинающим создателям сайтов, но и дизайнерам, работающим в более традиционных областях, специалистам по рекламе и маркетингу, художникам, программистам, - и, конечно же, всем творческим и любознательным людям.

Получить в своё распоряжение

Веб-дизайн: книга Джесса Гарретта. Элементы опыта взаимодействия

По-настоящему эффективный сайт должен служить вашим стратегическим целям, одновременно удовлетворяя потребности ваших пользователей. Даже самый интересный контент и самые передовые технологии не помогут вам сбалансировать эти две задачи без поддержки последовательного и непротиворечивого опыта взаимодействия. Однако создание опыта взаимодействия кажется невообразимо сложным делом, ведь приходится учитывать массу вопросов - юзабилити, идентичность бренда, информационную архитектуру, дизайн взаимодействия. Книга Джесса Гарретта раскрывает сложную тему веб-дизайна, ориентированного на пользователя, при помощи понятных объяснений и четких иллюстраций, сосредоточиваясь на общих идеях, а не на инструментах и технических приемах. Автор рисует перед читателем полную картину разработки опыта взаимодействия на веб-сайте - от стратегии и требований к контенту до информационной архитектуры и визуального дизайна. Эта вводная информация позволит любой команде веб-разработчиков, независимо от ее размеров, спроектировать успешный опыт взаимодействия.

Получить в своё распоряжение

CD-ROM (MP3). Бизнес-путь: AMAZON.COM: секреты самого успешного в мире веб-дизайна

Какое название первым приходит на ум при словах “Интернет-магазин”? Правильно, «Amazon.com» - один из пионеров в этой области, до сих пор удерживающий в ней лидирующие позиции. Однако оптимистично ли будущее этого патриарха сетевой торговли? Несомненно. Ведь какие бы кризисы и «коррекции рынка» ни потрясали электронный бизнес, Джеф Безос не позволит своей компании остаться без прибыли. Гигантский магазин по продаже книг онлайн дополнят сетевые аукционы, продажа медикаментов и мультимедиа и многое другое - так Amazon ищет свое место в изменившейся реальности электронного бизнеса. Новая бизнес-модель для предпринимателей, множество ранее не известных тайн, сделок, альянсов и планов суперзвезды электронного бизнеса - в книге, которая станет для вас настольной, если вы захотите повторить успех создателя «Amazon.com».

Получить в своё распоряжение

По ту сторону веб-страницы

От замысла до запуска: весь процесс разработки сайта. Проблемы современного веб-дизайна и нестандартные пути их решения. Что модно и что можно: осмысленный подход к дизайну. Станьте профи: избавьтесь от признаков "вечного начинающего". Почему 95% дизайнеров рисуют похожие сайты? Потому что не хватает фантазии или знаний? Или потому что так предписывает Нильсен? Но существуют типы верстки, совершенно не похожие на привычные, но не менее удобные. Что такое "мода в веб-дизайне"? Так ли необходимо ей следовать? И всегда ли нужно использовать инструменты, которые используют все? Не всегда для хранения информации удобны базы данных, и не для всех типов графики идеально подходит Adobe Photoshop. А знаете ли вы, что языки серверного программирования - это пластилин, из которого можно лепить любые фигуры, были бы умения и фантазия. Создатели этих языков сами не догадывались, какие возможности заложены в их детища. В книге рассказывается о небольшой части этих возможностей. Знания языков HTML, XHTML, CSS, JavaScript, PHP и технологий SSI и RSS (их описания есть в книге) недостаточно: в первую очередь нужно понимать, что вы собираетесь сделать, а инструмент найти - дело второе. Книга - по большому счету - об одном. Прежде чем сделать сайт, нужно подумать, зачем он нужен и как его задачи соотносятся с его внешним видом и его работоспособностью.

Получить в своё распоряжение

Веб-редизайн: книга Келли Гото и Эмили Котлер

Основной постулат этой книги - веб-дизайн находится в постоянном движении - со временем подтверждается все убедительнее. В первом издании говорилось, что цикл дизайна занимает 12 месяцев, а во втором он сократился до полугода и даже трех месяцев. Именно поэтому сейчас как никогда остро ощущается потребность в толковом и практичном руководстве, которое помогло бы составить план и бюджет, организовать процесс веб-редизайна (или создания сайта с нуля) и управлять им. Это руководство перед вами! Веб-дизайнер экстра-класса Келли Гото и ее соавтор Эмили Котлер делятся своим опытом, предлагая эффективный подход к процессу веб-редизайна, учитывающий как приоритеты бизнеса, так и интересы хорошего дизайна. Келли и Эмили сосредотачивают внимание на пересечении этих сфер, попадая прямо в «яблочко». Каждая глава содержит наглядный пример, иллюстрирующий ключевые стадии процесса. В книге много форм, контрольных списков и рабочих листов, которые помогут извлечь практическую пользу из полученных знаний.

Получить в своё распоряжение

Современный дизайн

Современный дизайн

Получить в своё распоряжение

Цифровой дизайн

Если у вас есть персональный компьютер, вы можете с его помощью создавать самые разные проекты графического дизайна: от собственных фирменных бланков, логотипов и визитных карточек до пригласительных билетов, флаеров, а также обложек CD- и DVD-дисков, портфолио, веб-сайтов, газет и брошюр. Эта книга подведет вас к самым основам профессионального дизайна: от использования цветов и шрифтов до выбора бумаги, создания полиграфической сетки и ее наполнения фотографиями и графикой. Авторы на ваших глазах создадут ряд простых проектов в самых различных стилях. Приведенные подробнейшие проекты вдохновят вас начать творить самим. Так что, ведете ли вы бизнес, семейный бизнес или просто развлекаетесь, эта книга станет вашим помощником в мире цифрового дизайна. Она откроет для вас целый мир дизайна, который вы будете чувствовать кончиками пальцев, создавая вслед за авторами различные творческие проекты.

Получить в своё распоряжение

Web-дизайн: справочник

Книга «Web-дизайн: справочник» - уже третье издание, выпущенное в США издательством O'Reilly. В нынешнем своем виде она полностью переработана в соответствии с Web-стандартами, особое место среди которых занимают стандарты CSS 2.1 и XHTML 1.0. Автор Д.Н. Роббинс поделилась с читателем многолетним опытом, вобравшим в себя современные реалии интенсивно развивающейся области Web-технологий. Справочник содержит ценную информацию по созданию Web-страниц, обеспечению доступности сайта для устройств и пользователей, использованию JavaScript и скриптов DOM, созданию изображений GIF, JPEG, PNG, подходящих для размещения в Web-окружении, а также охватывает новые подходы к печати материалов из Web-пространства.

Получить в своё распоряжение

Философия CSS-дизайна

В этой книге на примере широко известного сайта CSS Zen Garden рассматривается применение каскадных таблиц стилей. Здесь нашли отражение такие вопросы, как подготовка HTML-разметки для последующего применения стилей, синтаксис языка CSS, принципы верстки, методы работы с графикой, особенности использования цвета, типографские эффекты и многое другое. Не осталась без внимания проблема неодинакового уровня поддержки CSS разными браузерами; авторы рассказывают о приемах, с помощью которых можно добиться межбраузерной совместимости. Эта книга не является учебником по CSS, но представляет несомненный интерес для различных категорий пользователей: от новичков до маститых профессионалов. Издание состоит из 7 глав, предметного указателя и приложения.

Получить в своё распоряжение

Моя жизнь в дизайне

Книга воспоминаний Юрия Соловьева уникальна. О своей жизни рассказывает человек, создавший в Советском Союзе собственную империю промышленного дизайна. Блестящий менеджер и авантюрист, художник и свидетель кремлевских интриг, баловень судьбы и человек, большинство проектов которого осталось известно лишь партийным бонзам и ведущим дизайнерам мира. Конструктор, который пытался сделать фасад социализма человеческим. Друг Василия и Светланы Сталиных, входивший в узкий круг советской «золотой молодежи» конца 30-40-х гг. и чудом уцелевший в годы массовых репрессий рассказывает о совершенно другой, параллельной стране, которую он во многом создал для себя сам. Людям, знакомым с книгами Солженицына и Шаламова, воспоминания Соловьева покажутся «Алисой в стране чудес». Насколько невероятной была его жизнь, настолько невероятными были и его проекты, как реализованные, так и те, что остались на бумаге. Это одновременно книга мемуаров и единственный в своем роде альбом по истории советского дизайна. Здесь и послевоенные пассажирские вагоны, на которых до сих пор ездит полстраны; и дизайн-проект первого атомного ледокола «Ленин» и первой атомной подводной лодки; и закрытый конкурс на лучшую яхту для Эйзенхауэра... И др.

Получить в своё распоряжение

CD-ROM. Web-дизайн для гуманитариев

Всеобщая компьютеризация коснулась не только фирм и банков, но и редакций, библиотек и научных институтов. Современному гуманитарию необходимо уметь обращаться с компьютером, ведь работать над электронным документом гораздо удобнее. Люди гуманитарного склада ума подчас теряются, читая объемные учебники, перенасыщенные техническими терминами и схемами. Именно в расчете на таких людей создан курс "Web-дизайн для гуманитариев". Все необходимые знания можно почерпнуть в пошаговых инструкциях с наглядными примерами и приятным звуковым сопровождением. Несколько коротких уроков - и вы станете уверенным пользователем! Ведь компьютер уже давно не роскошь, а замечательный помощник в работе и учебе.

Получить в своё распоряжение

Мультимедиа-дизайн во Flash 8

Данная книга является полным и подробным руководством по использованию Flash 8. Пошаговая программа обучения позволяет, не теряя времени, приступить к созданию Flash-роликов. Изучив главы, посвященные созданию анимации, читатель без труда сможет в считанные минуты создать свою первую Flash-анимацию. В книге раскрыты все аспекты работы с Flash: работа с панелью инструментов, монтажной линейкой и панелью Library, создание динамического текста и полей ввода, импорт графических элементов, работа с видео и звуком, все аспекты создания анимации движения и анимации форм, анимированных movie-клипов и кнопок. В книге объясняются основы создания расширенной интерактивности в ActionScript, также дан краткий курс по этому современному языку программирования. Книга является важным источником знаний в области создания современных мультимедиа-презентаций, игр и Web-дизайна с использованием Flash.

Получить в своё распоряжение

В избранное