На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » CSS

Верстаем в рамках стандартов

One True Fit - standards design

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 в элементе <body>. Так я получил возможность задать основные стили для всех страниц, а затем переопределить их и добавить дополнительные стили для каждой страницы в отдельности. Для блоков сайта я использовал стандартные элементы <div>, присвоив их атрибутам 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:

Все стили были разделены на несколько файлов, чтобы с ними было легче работать:

  • global: самые основные стили для всех страниц, включая стили для форм (<form>).
  • page: цвета и общие элементы для всех страниц; например, для навигациия
  • layout_home: позиционные стили для главной страницы
  • layout_internal: позиционные стили для внутренних страниц
  • content: специфические стили для контента каждой страницы
  • popup: стили для каждого всплывающего окна

Все стили кроме global "обёрнуты" в файл, который импортирует с помощью @import уже реальный файл со стилями. Таким образом стили прячутся от Netscape 4 и IE 4 на MacOS 9. Пользователи таких броузеров увидят лишь слегка оформленные полностью работающие страницы, но без красот дизайна. А вот фрагмент @import, который отфильтровывает IE 4.5:

@import 'page.css';     /* for everyone but mac ie - note single quotes */
@im\port "page.css";    /* for mac ie5 but not mac ie4.5 */

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

Так как данный сайт не предполагалось делать полностью адаптированным для инвалидов (accessibility), в большинстве случаев я использовал фиксированный размер шрифта в пикселях. Однако для аккуратного позиционирования с учетом изменения размера шрифта в броузере я использовал комбинацию пикселей и em.

Прочее

К сожалению сайт использует PHP на IIS, поэтому мне не удалось поиграться с mod_rewrite.

Достижения

Счастлив отметить, что сайт выглядит прекрасно в:

  1. IE 5 на OSX
  2. Camino на OSX
  3. Safari на OSX
  4. OmniWeb 4.5 на OSX
  5. IE 6 на Windows
  6. IE 5 на Windows
  7. Opera 7 на Windows
  8. Netscape 6.2 на Windows
  9. Прочие броузеры семейства Mozilla - Netscape 7, Firebird, и т.д..
  10. С основным стилем - Netscape 4
  11. С основным стилем - IE 4.5 на MacOS9

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

Больше всего мне в сайте нравятся: результаты опроса ("8,217 Women said they love their One True Fit Jeans" - посмотрите на главную страницу с css, и без css, а также на сам файл, на ту часть текста, что идет под комментарием "Stats"), а также эти маленькие скругленные уголки, что вы видите на внутренних страницах сайта. Предоставляю вам возможность самим узнать, как я это сделал :)

Заключение

Я мог бы перечислить тысячу причин, по которым сайт должен быть сделан в XHTML/CSS, но главная из них - это видимость сайта на поисковых серверах. Именно из-за этого заказчик согласился на сайт, требующий последних версий броузера. Я не эксперт по поисковым системам, но считаю, что результаты у нас будут неплохие, так как у нашего сайта: минимальное количество кода разметки, присутствуют семантические элементы (такие как тег <h*>) и содержимое страницы расположено близко к началу файла.

Надеюсь, данный сайт послужит примером того, что с помощью правильного кода разметки и стилей можно создать не только простой блог-сайт. Хоть я и являюсь поклонником блогов, а также других информационных сайтов, думаю, что One True Fit открыл для вас другую сторону Луны.

Присылайте свои комментарии и вопросы на мой email.

Aвтор: Ryan Carver
Источник: webmascon
Перевод: Алекс Качанов

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100