Авто/Мото Бизнес и финансы Дом и семья Интернет Компьютеры Культура и искусство Медицина и Здоровье Наука и образование Туризм и путешествия Спорт Строительство и ремонт Дети и их родители
Интернет » Веб-дизайн » One True Fit - верстаем в рамках стандартов

One True Fit - верстаем в рамках стандартов

Главная




Introduction

 На данной странице я попытаюсь рассказать о том, как я создал сайт Lee Jeans - One True Fit.

Я представлю обзор главных технических моментов, которые я разделю на категории, хотя в некоторых случаях они перекрывают друг друга.

Совет: чтобы посмотреть, как сайт выглядит без использования CSS, добавьте ?css=false к URL-у любой страницы сайта. Чтобы снова включить CSS, добавьте ?css=true, либо щелкните на ссылке, что размещена внизу каждой страницы.

Дизайн

Дизайн сайта выполнен на основе рекламной серии the One True Fit Commercials. Мне очень нравится эта реклама, но здесь я буду рассказывать только о технической стороне задачи.

В разумных пределах на сайте использовался Flash для создания простой анимации с целью оживления сайта и приближения его внешнего вида к стилю того рекламного ролика. Я воспользовался отличным Flash-сниффером Travis-а (a) для того, чтобы избежать использования невалидного кода в тегах OBJECT и EMBED, и (b) для того, чтобы предоставить контент для старых версий Flash и для тех пользователей, у которых выключен JavaScript. Можно спорить о том, стоит ли использовать Javascript для генерации невалидных тегов, но это пока самое наилучшее решение на сегодняшний день.

PHP/MySQL

Сайт работает на собственной системе шаблонов. Эта система - объектно-ориентированная и модульная, благодаря чему для генерации разных страниц сайта широко используются одни и те же куски кода. Дизайн шаблонной системы немного повторяет известные шаблонные системы Tiles и Tapestry, которые выполнены на Java. Такая комбинация единого кода и различных CSS позволила создать очень мощную систему. Например, рекламные блоки на главной странице и внутрненние страницы сайта используют один и тот же код разметки, но с помощью CSS их внешний вид сделан различным.

На сайте лишь некоторые элементы связаны с базой данных: это блок "отзывы покупателей", что идёт в правой колонке, и система голосования. Эти два элемента были созданы на основе шаблонного решения Data Access Object (DAO). Благодаря этому логика базы данных удобно отделена от кода сайта.

Благодаря такому многоуровневому подходу дизайн сайта получился очень гибким: уровни дизайна, структуры, доступа и хранения данных связаны только со своими ближайшими соседями. Это означает, что любое изменение на одном уровне потребует изменений только на соседних уровнях; например, изменение дизайна (css) может потребовать лишь изменений на уровне разметки (html).

Разметка

Весь сайт проходит успешно валидацию по спецификации "XHTML 1.0 Strict". Для того, чтобы придать по необходимости индивидуальность дизайну каждой страницы, я использовал комбинацию атрибутов id и class в элементе Так я получил возможность задать основные стили для всех страниц, а затем переопределить их и добавить дополнительные стили для каждой страницы в отдельности. Для блоков сайта я использовал стандартные элементы , присвоив их атрибутам id значения "header", "content", "navigation", "footer", чтобы было ясно видно логическое значение каждого блока страницы. Атрибут class использовался по-минимуму. Вместо него для разметки текста на странице я полагался на структурные и семантические элементы-теги.

CSS

CSS сайта проходит полную валидацию за исключением одного хака Star-7, который использован на главной странице.

Я думаю мне удалось справиться с задачей без использования большого числа CSS-хаков. Большая их часть связана с проблемами в различных версиях броузера IE, например: 

/* "* html" targets only versions of ie */
* html body#internal #content {

\width: 429px;/* set for all ie */

w\idth: 400px;/* ie5win will ignore this  */

/* backslash hack hides from ie5mac \*/
width: 200px;
/* end hack */
}

Другие приемы CSS: