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

CSS и DHTML для сайтостроительства

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

При закрытии подписчики были переданы в рассылку "Создание сайта и его продвижение" на которую и рекомендуем вам подписаться.

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

←   Март 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
Автор
Наталия

Статистика

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

Выпуск 8.


Количество подписчиков: 491

Выпуск 8 - Клиппинговые стои. CSS Zen Garden. Полировка дизайна

Здравствуйте дорогие читатели!

Клиппинговые слои

По мотивам http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/en/clipping.html

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

Регион клиппинга задаётся четвёркой параметров в пикселах: (top, right, bottom, left), порядок важен.

И синтаксис клиппинга такой:

clip:rect(top,right,bottom,left)

Пример использования:

<DIV ID="blockDiv"
style=""xposition:absolute;" left:50; top:20; width:100; height:50;
clip:rect(-10,110,60,-10); background-color:#FF0000;
layer-background-color:#FF0000;"></DIV>

В результате мы получим вот что:

>>Читать полностью и обсуждать>>

Стандартный CSSфайл для Zen Garden (продолжение)

Первая часть здесь

Познакомившись с CSS селекторами, мы легко можем продолжить изучение стандартного CSS-файла для сайта CSS Zen Garden. В частности, декларации для a:link, a:visited, a:hover, a:active описывают поведение ссылок в зависимости от наведения на них мышки, посещались ли они и т.д.

В частности, в далее следуемом коде

#container {
 background: url(zen-bg.jpg) no-repeat top left;
 padding: 0 175px 0 110px;
 margin: 0;
 position: relative;
 }

#intro {
 min-width: 470px;
 }

Мы видим стиль основного контейнера (#container) и "шапки" сайта (#intro). В стиле последнего min-width - минимальная ширина. То есть как-бы мы не изменяли размеры окна браузера, шапка всегда будет по крайней мере 470 пикселей в ширину.

Далее стиль легко читаем и понятен:

>>Читать полностью и обсуждать>>

Наведение глянца в дизайне

Продолжаем изучать теоретические основы дизайна. Касательно статьи 9 принципов хорошего дизайна, мы пройдёмся подробнее по всем пунктам. Сегодня рассмотрим поподробнее пункт Приоритетность. Заранее оговорюсь, что подробное рассмотрение отдельного пункта может перекликаться с рассмотрением других пунктов и статьи в целом. Тем лучше для нас!

По мотивам http://psdtuts.com/designing-tutorials/elements-of-great-web-design-the-polish/

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

Краткое предисловие

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

Рассмотрим два созданных недавно сайта: Not By The Hour и его блог FreelanceSwitch. (Прим. НМ: Рекомендую, кстати, обратить внимание на первый пост по последней ссылке, 10 фраз, которые каждый фрилансер должен вычеркнуть из своей речи). Прежде, чем перейти к конкретным вещам, посмотрите, пожалуйста, ссылку:

До и после

>>Читать полностью и обсуждать>>

Бесплатные консультации

Дизайн и юзабилити

Как сделать дизайн удобным, понятным и приятным для глаз пользователя. Консультация включает в себя оценку как внешнего вида, так и кода сайта (HTML, CSS, JavaScript). Кроме того будет проведен краткий обзор содержимого сайта (картинки и сайт) на предмет его воспринимаемости и понятности, а также оптимизированности под поисковые системы.

Дружественные рассылки

Мои рассылки

Рассылки Subscribe.Ru
Java Programer&Developer
Фотобанки и микростоки для чайников
Интернет-заработок site free
CSS и DHTML для сайтостроительства
Йога для чайников

Другие рассылки

По вопросам партнёрства рассылок или их рекламы в данной рассылке и блоге рассылки пишите мне на имейл natalia.macheda at gmail.com или в блог

Если у Вас возникли вопросы, пишите мне, я с радостью на них отвечу. Прокоментировать выпуски рассылки можно и в блоге рассылки. Если Вам понравился этот выпуск, пожалуйста, проголосуйте за него. Форма голосования находится внизу письма. Если вы ставите оценку ниже 5, то я буду очень признательна, если вы напишете развёрнутое обоснование мне письмом на адрес natalia.macheda at gmail.com или в блоге рассылки

С уважением,
Наталия Македа
natalia.macheda at gmail.com
2008-03-06

© Наталия Македа, 2008
Все права защищены. Любая перепечатка или использование материалов рассылки в коммерческих целях возможна лишь с письменного согласия автора. При использование материалов рассылки в некоммерческих целях ссылка на рассылку обязательна
В избранное