Wordpress Russia

Создание прототипа с помощью CSS-фреймворка Grid 960

WP Developer — Sun, 26 Sep 2010 09:22:29 +0000

Grid 960 – это CSS Фреймворк, который позволяет разработчикам быстро конструировать прототипы дизайна. Они являются замечательным инструментом для создания макетов. Почему? Потому что они делают за вас всю тяжелую работу, позволяя получить быстрые результаты.

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

Представьте, что вы получили дизайн, и вам нужно сверстать его для клиента. Из этой статьи вы познакомитесь с основами Grid, проектированием сетки дизайна и кодированием прототипа. Мы будем использовать довольно простой дизайн, использующий большинство возможностей Grid 960, который поможет вам получить основную базу знаний для дальнейшей работы. После того, как вы ознакомитесь с представленным ниже дизайном, давайте начнем изучение принципов работы Grid 960.

Создание Сетки

Grid 960 работает на основе наследования классов. Этот фреймворк предоставляет две сетки: 12 и 16 колонок. Основной контейнер всегда имеет ширину 960px. Использование числа 960 позволяет применять большинство различных комбинаций колонок, без усложнения работы с ними. Для верстки этого дизайна, мы будем использовать сетку из 12-ти колонок, но мы не будем использовать все 12 колонок. Каждой ячейке сетки назначено свойство margin: 0 10px. Это создает промежуток в 20 пикселей. При создании строки, сумма ширины всех элементов добавляется к 960. Взгляните на демонстрационную страницу Grid 960. Вы увидите сетку со всеми видами комбинаций. Каждая ячейка сетки имеет класс, который определяет, какой она будет ширины. Далее представлена разбивка ширины столбцов для 12-ти колоночной сетки:

60px
140px
220px
300px
380px
460px
540px
620px
700px
780px
860px
940px

Каждая ширина соответствует имени класса, оформленного в виде: grid_X, где X это порядковый номер из представленного выше списка. Если вам нужен блок, шириной 940px, используйте класс grid_12. Откуда же Grid 960 знает, какая должна использоваться ширина? Каждый grid_X представляет собой селектор container_Y .grid_X, где значение Y равно 12 либо 16 колонок.

Давайте немного рассмотрим сам код. Вот как можно создать сетку из двух строк в 12-ти колоночном контейнере. Здесь первая строка шириной 940 пикселей, и вторая строка содержит две одинаковых колонки.

Когда вы создаете строку в сетке, убедитесь, что все дочерние номера gird_X в сумме дают число колонок, которое вы используете. Это гарантирует правильную ширину. Два дива с классом grid_6, дают в сумме 12. Вы не ограничены только этими значениями, и также можете использовать 6, 4 и 2. Вот и все, сетка готова для контента. Теперь, после того как вы узнали как работает Grid 960, давайте посмотрим как создается макет.

Макет

Визуализировать сетку дизайна довольно легко. Будет одна строка для картинки заголовка, строка для навигации, строка с двумя колонками для статьи заголовка и постера, разделитель, 4 колонки, затем подвал, состоящий из трех колонок.

После визуализации, вы должны понимать, как создать сетку макета. Используя значения ширины в имени класса, из приведенного списка, давайте вместе составим код. Помните, что необходимо добавлять очищающий div в конце каждой строки. Не забудьте включить CSS-файлы, входящие в состав Grid 960.

Скелет готов. Пришло время накладывать дизайн. Зеленые панели – это просто блоки с фоновым цветом и высотой. У панели навигации высота не задана. Вместо этого, она будет контролироваться размером внутренних ссылок. Не забудьте добавить картинку заголовка.

div.spacer {
    background-color: #8FC73E;
    height: 1em;
}   

div#navbar {
    background-color: #8FC73E;
    padding: 10px 0;
}

Применение классов для корректировки блоков grid_12 и установка ID

Центральным колонкам не требуются никакие эффекты. Добавим немного текста для заполнения дизайна. Прежде, чем приступать к верхней части, взглянем на подвал. На скриншоте подвал однородного цвета. У вас не получится реализовать это с существующим кодом. Оборачивающий div, вокруг этих трех колонок решит проблему. Вы думаете, ничего страшного, просто нужно вставить div. Но этот див поломает сетку, поскольку Grid 960 основывается на родительских и дочерних элементах, при использовании стилей (вспомните селектор container_12 .grid_4 ). В данном случае, проблему поможет решить вложенная сетка, которую Grid 960 позволяет использовать. Создайте вложенную сетку, путем добавления блока grid_12, затем расположите внутри блоки grid_4. При использовании вложенных сеток, дочерние элементы должны иметь специальные классы. Первый дочерний элемент должен иметь класс «alpha», а последний дочерний блок – класс «omega». Отредактируйте разметку для внесения необходимых изменений для подвала.

div#footer {
    background-color: #e5e5e6;
}

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


    
        Articles
        Topics   

        About
        Editors
        Contact

div#navbar ul {
    list-style: none;
    display: block;
    margin: 0 10px;
}   

div#navbar ul li {
    float: left;
    margin: 0 1.5em;
    font: bold 1em Arial;
}

Замечательно. Страница скоро будет готова. Все что нам нужно сделать, это создать эффекты блока в верхней секции. Это не так просто, как кажется. Прежде чем мы начнем, вы должны кое-что понять о Grid 960 и CSS-фреймворках в целом.

CSS-фреймворки не решат всех ваших проблем

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

Например, если бы этот же дизайн был шириной в 1000 пикселей. Grid 960 создает сетку шириной 960 пикселей, так что макеты большего размера уже использовать нельзя. Что если вы захотите расширить макет до 1000 пикселей, вместо 960-ти? Можно с уверенностью сказать, что вы не сможете это сделать без реализации нескольких сложных изменений кода.

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

Есть и другая, еще не выявленная, проблема – колонки одинаковой высоты. Поскольку центральные колонки имеют одинаковый фоновый цвет, они выглядят одинаковыми по высоте. В подвале, содержащий блок, устанавливает одинаковый фоновый цвет, позади трех колонок. Grid 960 не поможет вам в создании одинаковых по высоте колонок. Существуют, конечно, способы реализовать это самостоятельно, но поскольку мы просто создаем прототип дизайна, то не будем тратить время на решение мелких проблем в дальнейшем функционировании сайта. На данном этапе, вам нужно понять саму идею.

Есть еще один аспект Grid 960, который следует принять во внимание, прежде, чем мы перейдем к верхней секции. Grid 960 основывается на размерах элементов и отступов, при создании строки правильного размера. Если вы используете рамку или внутренний отступ (padding), макет сломается. Следовательно, если вам нужно их использовать, вы должны предусмотреть это в размере блока, для отражения изменений. Это очень утомительно. Указание размеров элементов в двух местах, всегда будет приводить к путанице, к тому же макет будет гораздо сложнее в обслуживании. Вот и все. Давайте закончим верхнюю секцию.

Верхняя секция

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

Используйте классы, вместо ID, потому что класс topSection применяется к обоим блокам. Это к тому же, упрощает изменение высоты. Выберите значение высоты, и создайте класс.

div.topSection div {
    border: solid 10px #e5e5e6;
    height: 280px;
}   

div.topSection div p {
    margin: 10px;
}

Отлично! Давайте посмотрим на нашу работу.

Приступаем к наполнению контентом. Заполните левый блок небольшим количеством текста. Только не увлекайтесь, если текста будет слишком много, он вылезет за край блока. Это создает потенциальную проблему в макете. Как вы узнаете, какое количество текста будет слишком большим? В производственном дизайне, для предотвращения этой проблемы, дизайнеру пришлось бы создать функцию, выводящую определенное количество слов.

Теперь, давайте вставим картинку. Только, прежде чем ее вставлять, укажите размеры. Если вы нормальный математик и понимаете боксовую модель, вы, скорее всего, уже знаете, какого размера она должна быть. Если не знаете, запустите Firebug и взгляните на DOM. Включите кнопку Inspect и кликните по блоку, в котором будет размещаться картинка. Откройте вкладку Layout. Firebug отобразит боксовую модель выделенного вами блока.

Скриншот показывает размер картинки 360 x 280. Найдите картинку, и создайте стиль. Я решил позволить картинке целиком заполнить весь блок. Если вы хотите создать 10-ти пиксельные отступы, убедитесь в том, что уменьшили размеры по 20 пикселей с каждой стороны.

img#poster {
    width: 360px;
    height: 280px;
}

У вас должно было получиться следующее. Можете смело менять текст или картинку.

Помните об ограничениях

Теперь, когда прототип готов, давайте подведем итоги проделанной работы. Вы научились быстро создавать прототипы дизайна. Grid 960 легко создает сетку для нас. И что же дальше? Естественно, нужно показать клиенту, и послушать, что он скажет. Хотя, есть несколько предостережений. Тестировался ли дизайн в IE6 и IE7? Нет. Нужно ли это делать? Нет. Это только прототип. Конечно же, все особенности браузеров будут учтены, до производства.

А что если клиенты захотят создать более комплексный дизайн? В таком случае, вы быстро обнаружите ограничения фреймворка. Что если дизайн должен быть резиновым или эластичным? Фреймворк не сможет вам в этом помочь, поэтому вам придется делать все с нуля. Помните, что CSS-фреймворки не решат все ваши проблемы, но они могут помочь с некоторыми. Grid 960 также как и другие фреймворки, замечательно подходит для создания прототипов.

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

Скачать архив с примером.

Перевод статьи «Prototyping With The Grid 960 CSS Framework«, автор Adam Hawkins

Создание формы со скользящими подписями

WP Developer — Sun, 26 Sep 2010 08:35:32 +0000

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

В его статье, меня особенно заинтересовала часть, о расположении подписей внутри текстовых полей:

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

Люк Вроблевски

Эти слова стали хорошим поводом для размышления. Конечно, вы можете взглянуть на поле со значением “Вася Пупкин”, и точно сказать что это поле для ввода имени. Но в случае с длинными формами, очень легко забыть вопросы, на которые вы отвечали.

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

Скользящие подписи

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

HTML


    Контактная информация
    
        
            Имя
        
        
    

    
        
            E–mail
        
        
    

    
        
            Город
        
        
    

    
        
            Улица
        
        
    

    
        
            Индекс

Единственным необходимым элементом, для создания скользящих подписей (в моей реализации), является оборачивающий элемент (в моем примере DIV), и применение к нему класса “slider” (это легко можно изменить в JavaScript).

На этом этапе, у нас получилась очень простая, и некрасивая форма:

CSS

body {
    font: 12px / 1.3 Arial, Sans-serif;
}

form {
    width: 360px;
    padding: 10px 20px 30px 60px;
    margin: auto;
    background: #f7f7f7;
    border: 1px solid #ddd;
}

div {
    clear: both;
    position: relative;
    margin: 0 0 10px;
}

label {
    cursor: pointer;
    display: block;
}

input[type =
"text"] {
    width: 300px;
    border: 1px solid #999;
    padding: 5px;
    -moz-border-radius: 4px;
}

input[type =
"text"]:focus {
    border-color: #777;
}

input[name =
"zip"] {
    width: 150px;
}

/* submit button */
input[type =
"submit"] {
    cursor: pointer;
    border: 1px solid #999;
    padding: 5px;
    -moz-border-radius: 4px;
    background: #eee;
}

input[type =
"submit"]:hover, input[type = "submit"]:focus {
    border-color: #333;
    background: #ddd;
}

input[type =
"submit"]:active {
    margin-top: 1px;
}

Единственный, 100%-необходимый CSS в этом примере – это применение position: relatve, к оборачивающему элементу (DIV). Все остальное используется только для настройки внешнего вида формы, вы можете изменять его по своему вкусу.

Теперь у нас получилась вполне симпатичная форма, в которой подписи расположены сверху непосредственных полей ввода.

jQuery

Теперь, раздел, который все обычно пропускают, переходя к демо-странице:

$('form#info .slider label').each(function(){
	var labelColor = '#999';
	var restingPosition = '5px';

	// стилизация и позиционирование подписей
	$(this).css({
		'color' : labelColor,
		 	'position' : 'absolute',
	 		'top' : '6px',
			'left' : restingPosition,
			'display' : 'inline',
    	               'z-index' : '99'
	});

	// получение введенного в поле, значения
	var inputval = $(this).next('input').val();

	// получение длины подписи, и добавление к ней 5px
	var labelwidth = $(this).width();
	var labelmove = labelwidth + 5;

	//проверяем, если поле заполнено, то сдвигаем подпись за пределы поля
	if(inputval !== ''){
		$(this).stop().animate({ 'left':'-'+labelmove }, 1);
	}    	

	// если значение поля пустое при фокусе, сдвигаем подпись влево
	// если оно осталось пустым, при потере фокуса, возвращаем их обратно
	$('input').focus(function(){
		var label = $(this).prev('label');
		var width = $(label).width();
		var adjust = width + 5;
		var value = $(this).val();

		if(value == ''){
			label.stop().animate({ 'left':'-'+adjust }, 'fast');
		} else {
			label.css({ 'left':'-'+adjust });
		}
	}).blur(function(){
		var label = $(this).prev('label');
		var value = $(this).val();
		if(value == ''){
			label.stop().animate({ 'left':restingPosition }, 'fast');
		}
	});
})

Вот и все, у вас должна получится полностью работающая форма со скользящими подписями.

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

Демонстрационная страница.
Архив с примером.

Перевод статьи “Form Design with Sliding Labels”, автор Tim Wright

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

Создание навигации “волшебная линия” с помощью jQuery

WP Developer — Sun, 26 Sep 2010 08:11:32 +0000

Такой “скользящий” стиль навигации существует довольно давно, мне всего лишь было нужно изменить его немного под собственные нужды, поскольку появилась такая возможность. Это оказалось очень легко. Можете взглянуть на два примера такой навигации на демонстрационной странице.

Идея

Идея состоит в наличие какой-либо подсветки (фонового изображения или подчеркивания), следующей за мышью, при наведении к какому-либо пункту меню. Это реализуется с помощью анимации jQuery. Следовательно, “волшебную линию” можно добавить только с помощью JavaScript. После того, как линия будет добавлена и стилизована, при движении мыши к любому пункту меню, ее ширина и левое позиционирование будет изменятся с анимационным эффектом.

HTML

Здесь обычный маркированный список. Ему назначен класс “group”, так как в примере будет использовано два горизонтальных меню. ID используется для указания элемента JavaScript.


 
    Home
    Buy Tickets
    Group Sales
    Reviews
    The Show
    Videos
    Photos
    Magic Shop

Обратите внимание, что список заключен внутри блока .nav-wrap. Это сделано в связи с особенностями стилизации. Панель, на которой расположена навигация, растянута на всю ширину экрана, но сама навигация центрирована внутри этой панели.

CSS

Здесь мы располагаем список горизонтально, и позиционируем волшебную линию абсолютно, поверх меню. Все остальное – просто наведение красоты.

.nav-wrap { margin: 50px auto;  background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; }
#example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; }
#example-one li { display: inline-block; }
#example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example-one li a:hover { color: white; }
#magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; }

JQuery JavaScript

Когда DOM загружен…
Устанавливаем переменные, включающие текущее левое смещение навигации
Добавляем волшебную линию к навигации
Назначаем позиционирование и ширину волшебной линии равной значению текущего элемента списка
Также назначаем оригинальную ширину и позиционирование в качестве данных, с тем чтобы их можно было использовать для обратной анимации
При наведении мыши, подсчитываем новую ширину и левое позиционирование, и включаем анимацию для изменения этих значений
При отведении мыши от пункта меню, включаем анимацию возвращения линии на исходную позицию.

$(function() {

    var $el, leftPos, newWidth,
        $mainNav = $("#example-one");

    $mainNav.append("");
    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#example-one li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    });
});

Альтернативная версия

На демонстрационной странице, также имеется альтернативная версия “волшебной” линии, использующая фон вместо линии, и анимирующей цвет вместе с шириной и левым позиционированием. В основе все то же самое, отличается разве что CSS и JavaScript, который получает цвет для нового элемента списка, из HTML-атрибута rel. Для анимации цвета, потребуется специальный плагин.

Скачать архив с примером.

Перевод статьи “jQuery MagicLine Navigation”, автор Chris Coyier

Примечение:
После небольшой доработки, скрипт нормально работает в опере и IE7-8, насчет IE6 не знаю, не тестировала.

Открытые платформы совершили революцию в мире смартфонов и планшетных компьютеров. Но финская компания Nokia не считала такие разработки перспективными, в результате чего и потеряла часть рынка. Первая открытая платформа Meego от финнов попытается спасти ситуацию, но гарантий, что это у нее получиться нет никаких.

Интерактивная корзина на основе AJAX, PHP и JQuery

WP Developer — Sun, 26 Sep 2010 07:14:29 +0000

«Какая корзина? И почему вдруг корзина?» – возможно удивитесь вы, прочитав заголовок. Так вот, корзина самая обычная – та, которую все мы используем, покупая что-нибудь в интернет-магазине. А опубликовать статью о ее создании, я решила по одной, единственной причине – не смогла устоять перед замечательным и красивым решением.

Не верите? можете посмотреть результат. А если вам интересно как это делается, читайте далее.

Вступление

В этой статье, мы собираемся создать корзину, работающую на основе технологии Ajax. Все товары будут записываться в базу данных MySQL, данные будут обрабатываться с помощью PHP.

JQuery, будет запускать Ajax на странице, кроме этого, плагин simpletip, добавит всему процессу интерактивности.

Итак, давайте начнем, скачайте демо-файлы, и начинайте чтение.

Шаг 1 – База данных MySQL

Если вы хотите получить рабочую демо-версию, вам понадобится выполнить следующий SQL-запрос в панели управления базой данных (то есть в phpMyAdmin). Этот запрос создаст таблицу, и внесет несколько продуктов. Этот код запроса, также доступен в файле table.sql, в демо-файлах.

table.sql

CREATE TABLE IF NOT EXISTS `internet_shop` (
  `id` int(6) NOT NULL auto_increment,
  `img` varchar(32) collate utf8_unicode_ci NOT NULL default '',
  `name` varchar(64) collate utf8_unicode_ci NOT NULL default '',
  `description` text collate utf8_unicode_ci NOT NULL,
  `price` double NOT NULL default '0',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `img` (`img`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;

INSERT INTO `internet_shop` VALUES(1, 'iPod.png', 'iPod', 'The original and popular iPod.', 200);
INSERT INTO `internet_shop` VALUES(2, 'iMac.png', 'iMac', 'The iMac computer.', 1200);
INSERT INTO `internet_shop` VALUES(3, 'iPhone.png', 'iPhone', 'This is the new iPhone.', 400);
INSERT INTO `internet_shop` VALUES(4, 'iPod-Shuffle.png', 'iPod Shuffle', 'The new iPod shuffle.', 49);
INSERT INTO `internet_shop` VALUES(5, 'iPod-Nano.png', 'iPod Nano', 'The new iPod Nano.', 99);
INSERT INTO `internet_shop` VALUES(6, 'Apple-TV.png', 'Apple TV', 'The new Apple TV. Buy it now!', 300);

После этого, вам нужно заполнить данные вашей учетной записи MySQL, в файле connect.php.

Шаг 2 – XHTML

Сначала мы создадим основную разметку.

demo.php

 
	

Корзина
Лучшие товары, по лучшим ценам


  


    Товары  






// php-код, который генерирует товары

   



	


	

	


   Корзина	



  
         
               	

                	
    

	
    	

     
	

	

	

	


	Оформить

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

Ниже, вы можете увидеть детальное представление структуры нашей секции товаров.

Товары, генерируются с помощью нашего PHP-кода, как можно увидеть в строке 18. Мы разберем это подробнее, через несколько минут. Теперь, давайте взглянем, как мы обработаем XHTML-разметку, для получения финального дизайна.

Шаг 3 – CSS

В этот раз, CSS-код получился очень длинный, поэтому я разделил его на две части.

demo.css

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
/* сброс первоначальных стилей, для совместимости браузеров */
	margin:0px;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;
}

body{
	color:#555555;
	font-size:13px;
	background-color:#282828;
}

.clear{	/*  clear-fix хак для чистки потока от флоатов */
	clear:both;
}

#main-container{	/* это основной контейнер, содержащий две секции */
	width:700px;
	margin:20px auto;
}

.container{	/* основной контейнер для секций контента - товаров и корзины */
	margin-bottom:40px;
}

.top-label{	/* внешний span, включающий в себя название секции*/
	background: url(img/label_bg.png) no-repeat;	/* отображение левой части label_bg.png - широкого изображения с закругленными краями */
	display:inline-block;
	margin-left:20px;
	position:relative;
	margin-bottom:-15px;	/* название секции прилегает к верхнему краю секции товаров*/
}

.label-txt{	/* внутренний span - обведен красной рамкой, на рисунке выше*/
	background: url(img/label_bg.png) no-repeat top right;	/* отображение правой части изображения label_bg.png */
	display:inline-block;
	font-size:10px;
	height:36px;
	margin-left:10px;	/* слева оставлено пустое пространство, чтобы отображить фон внешнего span'а */
	padding:12px 15px 0 5px;
	text-transform:uppercase;
}

.content-area{	/* Верхняя часть изображения с закругленными краями, смотрите на рисунке выше */
	background:url(img/container_top.png) no-repeat #fcfcfc;
	padding:15px 20px 0 20px;
}

.content{	/* общий отступ для обеих секций */
	padding:10px;
}

.drag-desired{	/* индивидуально назначенные свойства */
	background:url(img/drag_desired_label.png) no-repeat top right;
	padding:20px;
}

.drop-here{	/* не предназначено для других секций */
	background:url(img/drop_here_label.png) no-repeat top right;
}

.bottom-container-border{	/* нижняя часть закругленной картинки, которая завершает секцию */
	background:url(img/container_bottom.png) no-repeat;
	height:14px;
}

.product{	/* стили для товаров */
	border:2px solid #F5F5F5;
	float:left;
	margin:15px;
	padding:10px;
}

.product img{
	cursor:move;
}

p.descr{
	padding:5px 0;
}

small{
	display:block;
	margin-top:4px;
}

.tooltip{	/* тултипы, которые создаются с помощью плагина simpletip */
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: none;

	background-color:#666666;
	border:1px solid #666666;
	color:#fcfcfc;

	padding:10px;

	-moz-border-radius:12px;	/* закругленные углы */
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius:12px;
}

Обратите внимание на класс tooltip. Он создается автоматически, плагином simpletip, но не имеет никаких стилей, по умолчанию. Вот почему, мы назначаем ему стиль здесь. Я использовал свойство border-radius, которое еще не поддерживается всеми браузерами, но не принесет сильного ущерба, тем, кто его не поддерживает.

Теперь, давайте взглянем на CSS-стили, для секции корзины.

#cart-icon{	/* div, который содержит иконку корзины */
	width:128px;
	float:left;
	position:relative;	/* устанавливаем относительное позиционирование, так, чтобы ajax-загрузчик позиционировался по отношению к div*/
}

#ajax-loader{
	position:absolute;	/* абсолютное позиционирование располагает элемент на странице, относительно его родительского элемента, которому назначено относительное позиционирование */
	top:0px;
	left:0px;
	visibility:hidden;
}

#item-list{	/* содержимое корзины будет расположено в этом блоке */
	float:left;
	width:490px;
	margin-left:20px;
	padding-top:15px;
}

a.remove,a.remove:visited{	/* Удаление ссылки */
	color:red;
	font-size:10px;
	text-transform:uppercase;
}

#total{	/* блок, с общей суммой */
	clear:both;
	float:right;
	font-size:10px;
	font-weight:bold;
	padding:10px 12px;
	text-transform:uppercase;
}

#item-list table{	/* каждый товар в корзине, позиционируется внутри блока item-list*/
	background-color:#F7F7F7;
	border:1px solid #EFEFEF;
	margin-top:5px;
	padding:4px;
}

a.button,a.button:visited{	/* Кнопка оформления заказа */
	display:none;

	height:29px;
	width:136px;

	padding-top:15px;
	margin:0 auto;
	overflow:hidden;

	color:white;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;

	background:url(img/button.png) no-repeat center top;	/* отображаем только верхнюю часть фонового изображения */
}

a.button:hover{
	background-position:bottom;	/* при наведении, мы показываем нижнюю часть фоногового изображения */
	text-decoration:none;
}

/* Несколько менее интересных стилей */

a, a:visited {
	color:#00BBFF;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

h1{
	font-size:28px;
	font-weight:bold;
	font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}

h2{
	font-weight:normal;
	font-size:20px;

	color:#666666;
	text-indent:30px;
	margin:20px 0;
}

.tutorialzine h1{
	color:white;
	margin-bottom:10px;
	font-size:48px;
}

.tutorialzine h3{
	color:#F5F5F5;
	font-size:10px;
	font-weight:bold;
	margin-bottom:30px;
	text-transform:uppercase;
}

.tutorial-info{
	color:white;
	text-align:center;
	padding:10px;
	margin-top:-20px;
}

Любой разработчик скажет нам, что здесь мы кое-что упустили. Как вы, наверное, догадались – специальные процедуры лечения для IE6.

Лично я, планирую в скором времени прекратить поддержку IE6 во всех своих проектах – если бы не IE6, вышеприведенный код, был бы на четверть короче, и мне не пришлось бы тратить столько времени на его отладку.

Но, в любом случае, вот, что нам нужно, чтобы IE6 понимал, то, что мы от него хотим:

demo.php

Отлично. Теперь, давайте взглянем на окончательный вариант PHP.

Шаг 4 – PHP

Мы используем PHP несколькими способами и в разных местах. Для начала, давайте посмотрим, как формируется список товаров на главной странице.

demo.php

';

?>

Далее, в файле tips.php, мы снова используем PHP, для того чтобы передать в качестве параметра имя файла картинки, проверяя какой товар ассоциируется с этим изображением, и выводим подсказку в виде HTML. Это позднее, будет использоваться плагином simpletip.

ajax/tips.php

'.$row['name'].'
'.$row['description'].'
price: $'.$row['price'].'
Для того, чтобы купить, просто перетащите его в коризну';

 ;?>

Кроме этого, мы используем PHP для получения данных, необходимых для добавления товаров в корзину. Разница в том, что в этот раз мы получаем данные в качестве JSON (javascript-объекта).

ajax/addtocart.php



'.$row['name'].'
$'.$row['price'].'