Отправляет 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 за неделю
←   Все выпуски   →

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


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



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

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

Живые меню" или "Как сделать красиво с помощью CSS и JavaScript



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

Наверное, никто не сможет поспорить с утверждением, что главное в любой web-страничке - удобство для пользователя. После того, как мы выложили наше творение в сеть, мы сразу начинаем предпринимать массу усилий для того, чтобы привлечь на свой сайт максимум посетителей. Но привлечь мало - надо еще сделать все для того, чтобы посетителям наш сайт понравился, чтобы им захотелось остаться, а потом приходить снова и снова. Для этого недостаточно наполнить страницу интересным содержанием, нужно еще сделать ее красивой и, самое главное, удобной в использовании. На Западе для предоставления потребителям максимума удобств существует даже специальная профессия - специалист по usability. Если вас заинтересовало, что это значит, узнать подробности вы можете на страничке Артемия Лебедева http://www.design.ru/kovodstvo. А в нашей статье речь пойдет несколько о другом - о том, как превратить навигацию по вашему сайту в сплошное удовольствие для посетителя.

Хочу заранее предупредить, что все примеры, приведенные в данной статье, предназначены только для браузеров Internet Explorer версии 4.0 и выше, т.к. цель этой статьи - не научить вас кроссбраузерному DHTML, а лишь показать, каких интересных эффектов можно достичь, манипулируя свойствами CSS при помощи JavaScript. Что касается аналогичных эффектов для браузеров Netscape, которые намного меньше распространены в России, упомяну лишь, что для совместимости с ними нужно будет проделать небольшую дополнительную работу - написать скрипт, определяющий версию браузера при загрузке страницы, и несколько изменить функции, управляющие свойствами CSS.

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

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

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

Для начала нужно создать картинки для каждого из разделов. В приводимом примере картинка, изображающая название раздела, будет называться nav1.gif, а картинки подразделов будут пронумерованы - 1.gif, 2.gif и т.д. Теперь создадим для нашей страницы таблицу стилей, в которой зададим специальный класс .hidden для "спрятанных" списков подразделов:

<style>
...
.hidden {position: absolute; visibility: hidden;}
...
</style>

Кроме того, нам понадобится класс .visible для "видимого" состояния этих списков:

<style>
...
.visible {position: absolute; visibility: visible; z-index: 3;}
...
</style>

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

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

<div style="position: absolute; top: 20px; left: 20px;">
<img src="images/nav1.gif" width="110" height="20" border="0">
</div>
<div id="Nav1" class="hidden" style="position: absolute; top: 40px; left: 20px;">
<img src="images/1.gif" width="110" height="20">
<br>
<img src="images/2.gif" width="110" height="20">
<br>
<img src="images/3.gif" width="110" height="20">
<br>
<img src="images/4.gif" width="110" height="20">
</div>

Обратите внимание - для спрятанного слоя обязательно должен быть задан уникальный идентификатор, в нашем случае это - id="Nav1". Идентификатор нужен для того, чтобы программа JavaScript, которую мы напишем чуть позже, могла обратиться к конкретному элементу страницы.

Когда мышка посетителя нашей странички окажется над видимым слоем, для этого слоя произойдет событие MouseOver, а когда курсор вновь уйдет за пределы слоя - произойдет событие MouseOut. Все, что нам осталось теперь сделать, - это создать обработчики для этих событий мышки.

Конечно же, можно записать значения обработчиков событий непосредственно в тэгах слоя, но, во-первых, это удобно лишь до той поры, пока слоев один-два, а если мы собираемся создать полноценную навигационную панель, у нас их будет значительно больше. Во-вторых, правила "хорошего тона" в DHTML предписывают задать программу JavaScript, называемую функцией, в разделе <head> в тэге-контейнере <script>, а в дальнейшем просто вызывать ее из обработчиков событий в теле страницы. Такой подход ускоряет как загрузку страницы в целом, так и обработку конкретных событий, в частности.

Итак, нам понадобится написать две функции - одну для того, чтобы показывать спрятанный список подразделов, и вторую - для того, чтобы вновь его прятать. Так как мы заранее подготовили два класса - .visible и .hidden, то наши функции будут управлять всего лишь сменой одного класса на другой, и, следовательно, состоять всего из одной строчки каждая. При этом раздел <head> нашей страницы будет выглядеть так:

<head>
<title>Пример выпадающего меню</title>
<style>
.hidden {position: absolute; visibility: hidden;}
.visible {position: absolute; visibility: visible; z-index: 2;}
</style>
<script language="JavaScript">
function showObject(obj) 
{
    obj.className
= "visible"
}
function hideObject(obj) 
{
    obj.className = "hidden"
}
</script>
</head>

Атрибут, описывающий язык скрипта, необязателен лишь в том случае, если мы используем язык JavaScript, но те же правила хорошего тона требуют указывать этот атрибут.

Обратите внимание, что при задании функций мы не использовали явных ссылок на уникальный идентификатор слоя, а воспользовались заданием переменной obj. В языке JavaScript можно присваивать значение и тип переменных автоматически, и для каждого нового подменю мы можем использовать новое значение переменной, что позволит нам использовать одни и те же функции для обработки событий в разных слоях.

Добавим теперь атрибуты onmouseover (курсор находится над слоем) и onmouseout (курсор находится вне слоя) в тэг <div>, описывающий видимую часть меню. С помощью onmouseover вызовем функцию showObject для объекта Nav1 (невидимого слоя), а с помощью onmouseout - функцию hideObject для него же. В целом описание видимого слоя теперь будет выглядеть так:

<div style="position: absolute; top: 20px; left: 20px;"
onmouseover="javascript:showObject(Nav1)"
onmouseout="javascript:hideObject(Nav1)">
<img src="images/nav1.gif" width="110" height="20" border="0">
</div>

Но этого недостаточно. Нам нужно еще, чтобы список подразделов оставался видимым, когда наш посетитель захочет нажать на нем одну из ссылок. Для этого нужно прописать невидимому слою абсолютно аналогичные обработчики событий. Вам с первого взгляда может показаться, что при такой постановке вопроса список подразделов может вдруг "возникнуть из ничего", если наш гость случайно заедет курсором в область его расположения, но на самом деле это не так. Логика браузера Internet Explorer такова, что скрытые объекты нечувствительны к событиям мыши, поэтому обработчики событий будут действовать лишь тогда, когда слой станет видимым после наведения курсора на область названия раздела. Окончательная запись кода нашей странички будет выглядеть так:

<HTML>
<HEAD>
<TITLE>Пример выпадающего меню</TITLE>
<style>
.hidden {position: absolute; visibility: hidden;}
.visible {position: absolute; visibility: visible; z-index: 2;}
</style>
<script language="JavaScript">
function showObject(obj) {
    obj.className = "visible"
}
function hideObject(obj) {
    obj.className = "hidden"
}
</script>
</HEAD>

<body topmargin=0 leftmargin=0>
<div style="position: absolute; top: 20px; left: 20px;"
onmouseover="javascript:showObject(Nav1)" 
onmouseout="javascript:hideObject(Nav1)">
<img src="images/nav1.gif"
width="110" height="20" border="0">
</div>
<div id="Nav1" class="hidden" 
style="position: absolute; top: 40px; left: 20px;"
onmouseover="javascript:showObject(Nav1)"
onmouseout="javascript:hideObject(Nav1)">
<img src="images/1.gif" width="110" height="20">
<br>
<img src="images/2.gif" width="110" height="20">
<br>
<img src="images/3.gif" width="110" height="20">
<br>
<img src="images/4.gif" width="110"
height="20">
</div>
</body>
</HTML>

Осталось только прописать ссылки к картинкам, да еще неплохо было бы для видимого слоя, если он по вашему замыслу не будет являться самостоятельной ссылкой, задать свойство cursor: hand; чтобы посетителю стало ясно, что это не просто картинка, а область управления.

Если теперь добавить абсолютно позиционированный баннер в область невидимого слоя и задать ему z-index равным единице, то наше меню будет выпадать поверх баннера.

Вот и все, теперь для создания полноценной навигационной панели вам осталось только добавить нужное количество видимых и невидимых слоев, не забывая прописывать каждому невидимому слою свой уникальный идентификатор и обращаться именно к нему в соответствующих обработчиках событий. Если вам лень высчитывать значения top и left для абсолютного позиционирования элементов страницы, вы можете с успехом поместить слои внутрь ячеек таблицы, но свойство position: absolute; (без значений top и left) должно остаться, иначе ваша табличка расползется!Бандурина Людмила



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

Веб-дизайн

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

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

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

Книга, которую вы держите в руках, - самая известная на сегодняшний день книга по веб-дизайну. Ее автор, доктор физических наук Якоб Нильсен - признанный во всем мире специалист в области интерфейсов и удобства эксплуатации, - делится с читателем своими знаниями и опытом. Им был разработан ряд методик, направленных на быстрое и экономичное усовершенствование пользовательского интерфейса, включая эвристическую оценку. Он является обладателем 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.

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

В избранное