ArtShok. Сайтостроение и немного SEO

Если вы еще не забили на отображение сайта (вашего или клиента) в Internet Explorer 6 (имеется в виду ie6, версии ниже в данной статье рассматриваться не будут), то наверняка уже сотню раз сталкивались с тем, что какой-нибудь мелкий “косяк” там да вылезет. Кроссбраузерная верстка, легко реализуемая в Opera, FireFox и Chrome, у вебмастеров порождает только чувство ненависти к Эксплореру, для коего приходится придумывать всякие ухищрения.

Вообщем, будьте готовы занести эту статью в закладки, ибо она будет предельно информативной и полезной:)

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

1. условные комментарии
2. хаки для CSS

Список условных комментариев и хаков для IE и CSS

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

Demo и Скачать

5 способов оформления ссылок…

Думаю все уже выучили, что семантически правильно представлять меню на сайте в виде списка. Собственно поэтому мы и продолжаем дальше практиковаться в его оформления (первая статья на эту тему была про древовидный список).

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

Как сделать красивое меню на CSS

Не скажу, что мне каждый раз приходиться устанавливать вид курсора. Нет, за последние полгода данная техника пригодилась только два раза. Один раз - при работе с jQuery галереей, вторая раз - при работе уже со второй галереей (опять на jQuery), но это было больше для красоты.

Привожу подборку стилей по определению вида курсора. Вдруг кому понадобится.

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

Ну что? Уже успели оценить ссылочки в виде текста с градиентом?:) Еще нет? Видимо, вы читаете данную статью через ридер. Если так, то предлагаю сначала ознакомиться с примером.

Как видите, текст ссылки на демо тоже украшен градиентом. И самое важно, из того что уже было сказано - это “текст“. Так что закрываем фотошоп, если вы его уже запустили - ничего рисовать не будем. Знание flash и JavaScript тоже не понадобится.

Потребуется только пустой тэг <span> и фоновая картинка (в нашем случае - прозрачный png).

Что нам это дает:

• Чистый код и использование ТОЛЬКО CSS. Повторюсь - никаких JavaScript или flash
• Красивое оформление заголовков СТАНДАРТНЫМИ шрифтами. Никаких рисунков (не забываем про семантическую верстку и seo-оптимизацию), никаких работ в фотошопе или других графических редакторах. Один раз прописали стиль и забыли.

Демо | Скачать

А теперь о том, как сделать градиентный текст на css

1.1 Кодинг: Начинаем

• Когда дизайн готов, начните с пустой страницы. Добавьте заголовки, навигацию, пример содержимого, и футер, потом добавьте html разметку и только после этого CSS.
• Сначала сбросьте стили по умолчанию. Часто нет необходимости задавать значение какого либо свойства, потому что есть значение по умолчанию. Некоторые любят делать Global white space reset, обнуляя отступы и поля всех элементов в самом начале файла стилей.
• Используйте главный файл стилей. Одна из наиболее распространенных ошибок новичков в том, что они забывают сбросить стили по умолчанию, это является причиной несоответствия оформления в различных браузерах. Браузеры тут не причем, прежде чем начать писать CSS следует сбросить стили по умолчанию.

master.css

@import url("reset.css");
@import url("global.css");
@import url("flash.css");
@import url("structure.css");

<style type="text/css" media="Screen">
    /*\*/ @import url("css/master.css"); /**/
</style>

• Создайте библиотеку вспомогательных классов. Полезные для отладки они должны быть исключены в окончательной версии (разделяйте разметку и оформление). Можно использовать сразу несколько имен классов (<p class="floatLeft alignLeft width75">...</p>)

.width100 {width: 100%;}
.width75 {width: 75%;}
.width50 {width: 50%;}
.floatLeft {float: left;}
.floatRight {float: right;}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}

остальные советы по улучшению CSS кода »

Сегодня урок будет коротким, но полезным:) Почему полезным? Ну хотя бы потому, что мало кто уделяет достаточно внимания оформлению форм. И, кстати, зря.

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

Как изменить дизайн форм, используя css и jQuery