Каталог статей
Поиск по базе статей  
Статья на тему Интернет » Интересное в сети » Секреты стильного дизайна

 

Секреты стильного дизайна

 

 

W3C logo
Стили пришли в веб-дизайн из полиграфии. Там они использовались уже давно, позволяя добиваться однообразного оформления во всем издании. На сайтах, по мере их разрастания, зачастую возникала такая ситуация, когда на одних страницах сайта ссылки оформлялись одним шрифтом, на других — другим. Смотрелись эти и другие огрехи оформления безобразно, поэтому использование стилей CSS (Cascading Style Sheets, каскадные таблицы стилей) было вполне логичным шагом. Таблицы стилей применяются сейчас очень широко, однако при их использовании необходимо учитывать некоторые нюансы, вызванные тем, что поддержка CSS в разных браузерах реализована в разном объеме.

загрузка...

 

 

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

Оптимальным считается размер файла стилей не более двадцати-тридцати процентов от размера основной страницыТем не менее, как и любым инструментом, таблицами стилей надо пользоваться с головой. Дело в том, что они загружаются до того, как будут загружены страницы сайта, поэтому непомерное раздувание их размера не приветствуется. Тем посетителям вашего сайта, что используют модемный доступ в Сеть (а их в Рунете до сих пор большинство, несмотря на значительный рост пользователей выделенных линий), а тем более — низкоскоростной доступ (не у всех хорошие модемы), важен каждый лишний килобайт, так как при отечественных линиях связи можно вообще не дождаться загрузки основной страницы. Бьет это, в первую очередь, по посещаемости: едва ли кто-то, кто не смог зайти на ваш сайт с первого раза, захочет снова туда заходить.

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

  • Старые браузеры, не использующие таблицы стилей, не будут загружать, файл их описывающий. Если же они включены в код страниц, они будут загружены в любом случае.
  • Реальностью становится упрощение дизайна сайта: используя один файл CSS, вы можете управлять видом всех страниц сайта. Причем, если вы захотите внести изменения в отображение страниц, для этого будет достаточно изменения лишь одного этого файла.
  • Использование внешних стилей оставляет вам возможность переназначения таблиц стилей для некоторых страниц сайта: как раз с помощью внутреннего тега <style>.

W3C — WWW-консорциум, организация, устанавливающая стандарты и спецификации Интернета Доля не поддерживающих CSS браузеров (или позволяющих их отключать) колеблется в зависимости от сайта в пределах от нуля до десяти процентов — не тот объем аудитории, которым следует пренебрегать. Также очень желательно учитывать то, что в браузерах, не поддерживающих таблицы стилей, размещение текста может сильно отличаться от задуманного дизайнером, в том случае если расположение элементов задается в файле CSS. Поэтому такие параметры, как выравнивание объектов по центру и краям, рекомендуется указывать в коде основной страницы. Здесь подход к созданию файла таблиц стилей должен быть следующим: страницы сайта должны быть читабельными и без него. Стили лишь «делают красиво», выделяя заданным образом логические структуры документа. CSS не поддерживают браузеры Internet Explorer до 4.0 и Netscape Navigator до 4.0.

Mozila screenshot
Mozilla наиболее полно поддерживает CSS

В данный момент консорциумом W3C приняты стандарты CSS и CSS2, также в разработке находится третья версия стилей. CSS2 (существующий в данный момент в версии 2.1) сильно опередил время. В полной мере его не поддерживает ни один браузер, даже Mozilla, который традиционно старается придерживаться всех стандартов, установленных W3C. Чаще всего в характеристиках браузеров указывается что-нибудь вроде "поддержка CSS и CSS2 (частично)". Однако то, насколько полно реализована поддержка CSS в браузере, для дизайнера практически не имеет значения; значение имеет только один параметр: насколько полно реализована поддержка используемых стилей в Internet Explorer от Microsoft. Реальность такова, что сайт, использующий всю мощь CSS, без оглядки на самый популярный браузер, обречен на прозябание, так как у его посетителей возникнут большие трудности с восприятием информации и навигацией по сайту.

Какова структура CSS? На самом простом примере:
<style type="text/css">
body { color: black; background: white; }
</style>
Выражение, находящееся между тегами <Style>, написано в соответствии с синтаксисом, который используется при описании стилевых правил. Каждое правило начинается с имени тега, для которого оно действует, затем в фигурных скобках "{" "}" следует список свойств и значений. Значения отделяются от свойств двоеточием, а в том случае если свойств у тега больше чем одно, они указываются вслед за значением предыдущего свойства, при этом отделяются от него точкой с запятой. В данном случае расшифровывается все просто: внутри тега <Body> будет использоваться черный текст на белом фоне.

Listing

Для связывания HTML-страниц с отдельными файлами стилей используется тег <link>. Синтаксис следующий:
<link type="text/css" rel="stylesheet" href="style.css">
При этом можно указывать как абсолютные, так и относительные пути к файлу стилей (в данном примере это style.css).

W3C-консорциум впервые опубликовал рекомендации по CSS еще в 1996 годуК сожалению, объем материала не дает возможности привести список всех возможностей даже CSS первой версии. Полная спецификация CSS level 1 (на английском языке) доступна в соответствующем разделе W3C консорциума. Занимает она 64 печатных листа. Любой файл, соответствующий CSS, будет соответствовать и спецификации CSS2, который не претерпел радикальных изменений, а был лишь дополнен и расширен. В частности, в CSS2 появились стили, учитывающие возможность представления документов в наладонных компьютерах, аппаратах системы Брайля и других. Также, в дополнение к этому, спецификация CSS2 поддерживает подгружаемые шрифты, различные дополнения для локализации страниц, автоматическую нумерацию страниц.

Несмотря на то, что возможности CSS очень широки, есть определенный набор наиболее часто используемых функций, освоить который под силу каждому. Здесь можно уместно провести аналогию с офисным пакетом от Microsoft: девяносто процентов пользователей используют лишь десять процентов функций пакета MS Office. Дело здесь не только в разном уровне поддержки CSS браузерами, но и в том, что отнюдь не все возможности CSS стоит применять. К примеру, это относится к возможности жесткого задания ширины полей, текста, различных отступов — так как посетители сайтов используют различные разрешения экранов, эти функции лучше не использовать. А в остальном, для оптимизации размера страниц, «выравнивания» дизайна CSS практически незаменим.

Ссылки по теме




Статья получена: hostinfo.ru
загрузка...

 

 

Наверх


Постоянная ссылка на статью "Секреты стильного дизайна":


Рассказать другу

Оценка: 4.0 (голосов: 16)

Ваша оценка:

Ваш комментарий

Имя:
Сообщение:
Защитный код: включите графику
 
 



Поиск по базе статей:





Темы статей






Новые статьи

Противовирусные препараты: за и против Добро пожаловать в Армению. Знакомство с Арменией Крыша из сэндвич панелей для индивидуального строительства Возможно ли отменить договор купли-продажи квартиры, если он был уже подписан Как выбрать блеск для губ Чего боятся мужчины Как побороть страх перед неизвестностью Газон на участке своими руками Как правильно стирать шторы Как просто бросить курить

Вместе с этой статьей обычно читают:

Hyundai Elantra: Дизайн говорит о продукте все

В тесте участвуют автомобили: Hyundai Elantra Так что же говорит дизайн новой «Элантры»? Характер стал тверже.

» Корейские автомобили - 2066 - читать


Открытые, культовые, стильные: кабриолеты прошлых лет

Alfa Romeo Spider Alfa Romeo Spider появилась на рынке в 1983 году, частично дизайн перекликается со знаменитым Porsche 911, но тем нее менее все равно индивидуален. Автомобиль выпускался с 1983 по 1992 год. BMW 325i Cabrio Кабриолет не планировался в модельном ряду 3 серии BMW тех лет, однако спустя 4 года после выхода на рынок седана он все же появился.

» Немецкие автомобили - 3541 - читать


Audi S6: Секрет буквы S

В тесте участвуют автомобили: Audi S6 Audi S6 Выпускается с 1999 года. Фейслифт в 2001 году.

» Немецкие автомобили - 2196 - читать


Все секреты нового Rolls-Royce

3 января этого года состоялась презентация одного из самых долгожданных автомобилей за последнее десятилетие. BMW представила совершенно новый Rolls-Royce Phantom, который должен стать гордостью английской и немецкой автомобильной промышленности. Положа руку на сердце, можно сказать, что новый Rolls-Royce станет все-таки гордостью немецкого автопрома, так как из английского в этой машине, пожалуй, осталось только одно название.

» Немецкие автомобили - 1881 - читать


Cougar 2001 стильное купе от Mercury

Первый дебют Mercury Cougar состоялся осенью 1966. Это по существу был модернизированный кузов от Mustang. В 1999 году Cougar дебютирует с более новой моделью небольшого спортивного купе.

» Разное - 1959 - читать



Статья на тему Интернет » Интересное в сети » Секреты стильного дизайна

Все статьи | Разделы | Поиск | Добавить статью | Контакты

© RusAdvice.Org, 2006-2014, при копировании материалов, прямая индексируемая ссылка на сайт обязательна.

Энциклопедия RusAdvice.Org