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

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


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



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

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

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



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

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

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

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

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

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

function showInner (obj,inner)
{
 obj.className = "open";
 inner.className = "vis"; 
}
function hideInner (obj,inner)
{
 obj.className = "exp";
 inner.className = "hide"; 
}

Функция showhideObj также остается - ведь она управляет отображением / скрытием подразделов.

Внутри самих меню у нас добавится еще один уровень вложенных маркированных списков, и теперь код меню в "теле" документа будет выглядеть так *:

<ul>
<li onclick="javascript:showhideObj(In1,Out1)"
class="close" id="Out1">
Первый раздел сайта
<ul id="In1" class="col">
<li onmouseover="javascript:showInner(In1,Inner1)"
onmouseout="javascript:hideInner(In1,Inner1)">
<a href="sample1.html" title="Подраздел первый">Подраздел первый</a>
<ul id="Inner1" class="hide">
<li>
<a href="sample1.html" title="Подраздел первый подраздела первого">
Подраздел первый подраздела первого</a>
</li>
<li>
<a href="sample1.html" title="Подраздел второй подраздела первого">
Подраздел второй подраздела первого</a>
</li>
</ul>
</li>
</ul>
</li>
<li onclick="javascript:showhideObj(In2,Out2)"
class="close" id="Out2">
Второй раздел сайта
<ul
id="In2" class="col">
<li onmouseover="javascript:showInner(In2,Inner2)"
onmouseout="javascript:hideInner(In2,Inner2)">
<a href="sample1.html" title="Подраздел второй">Подраздел второй</a>
<ul id="Inner2" class="hide">
<li>
<a href="sample1.html" title="Подраздел первый подраздела второго">
Подраздел первый подраздела второго</a>
</li>
<li>
<a href="sample1.html" title="Подраздел второй подраздела второго">
Подраздел второй подраздела второго</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Как видите, мы назначили обработчикам событий onmouseover и onmouseout функции, управляющие отображением и скрытием объектов, точно так же, как мы это делали в самом первом примере с графическими меню. Единственное отличие состоит в том, что мы манипулируем свойством display, а не visibility.

Таким образом, при просмотре данного примера в браузере мы получим три варианта отображения. Первый вариант (изначальный, все подразделы спрятаны) не будет отличаться от аналогичного из предыдущего примера. Второй и третий варианты приведены на рисунке. Обратите внимание: маркеры родительских списков (открытые и закрытые папочки) точно отображают состояние вложенных меню. Не забывайте следить за этим при определении стилей классов!

Вместо заключения

В статье о CSS я уже упоминала о преимуществах верстки руками. Теперь вы познакомились еще с одним достоинством данного способа создания страничек. Конечно, вы можете возразить мне, что ваши любимые визуальные редакторы тоже умеют писать скрипты, особенно Dreamweaver (которым и я частенько пользуюсь). Но поверьте, скрипты, создаваемые автоматически, имеют множество недостатков, главный из которых - их весьма и весьма громоздкие размеры. К тому же автоматически создаваемые скрипты не всегда легко приспособить к сиюминутным нуждам, их сложно редактировать, если ваши потребности вдруг изменились. Если же вы пишете код вручную - ваши возможности поистине безграничны! Конечно, поначалу удобно иметь под рукой учебник или справочник, я рекомендую справочник "JavaScript" Рика Дарнелла, вышедший в этом году в издательстве "Питер-Пресс" на русском языке.

Уберите с жесткого диска FrontPage, и удачи вам в web-конструировании!

* Осторожно, не запутайтесь с вложенными списками! Не забывайте закрывать тэги <ul> и <li>.

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



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

Веб-дизайн

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

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

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

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

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

В избранное