Отправляет email-рассылки с помощью сервиса Sendsay

Статьи по web-дизайну и web-программированию

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июль 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

487 подписчиков
0 за неделю
←   Все выпуски   →

Статьи по web-дизайну и web-программированию


Не наступает никогда, не должно наступать никогда то время, когда надо махнуть рукой и сказать, что тут ничего уже не сделаешь. Сделать всегда можно.
Василий Шукшин

Доброго времени суток!

И снова с вами мы с очередной обучающей статьей. Возможно, для кого-то она послужит просто напоминанием. Повторение – Мать учения!  А значит, этот материал придется кстати.

Сегодня поговорим с вами о цвете фона и о цветной полосе прокрутки.

А так же несколько веселых анекдотов и парочка интересных ссылок.

 ИТАК….

      

                ЦВЕТ ФОНА

 

На практике применять все гораздо интереснее, чем читать нудные руководства, инструкции и рекомендации. Ясно дело, когда видишь результат своего труда, на душе становится веселей. Мы с вами сейчас узнаем, как использовать свойства фона по назначению.

Чаще всего  цвет фона задают, используя свойство background-image или же просто background. Вот с него-то мы и начнем.

Замечание
Для тех кто не знает, свойство background является сокращенной формой записи всех возможных свойств фона. Так, например, цвет фона можно записать так background-color: #FFF, а можно и так background: #FFF. Места экономит порядочно, особенно если свойств несколько.

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

<BODY BGCOLOR=#FFFFFF>

Надо написать в стилях

BODY {background: #FFF}

После чего безжалостно убрать все атрибуты BGOLOR из всех тегов BODY всех страниц сайта. Экономия и чистота кода складывается из мелочей подобного рода, так что не стоит ими пренебрегать.

А теперь разберемся со строками и ячейками таблиц. Здесь бывают разные ситуации.

1. Вы верстаете сайт в три колонки, применяя табличную верстку. Левая колонка должна быть серой. Нет особого смысла делать для этого отдельный класс, в котором прописывать цвет фона для этой колонки. Вставлять BGCOLOR=#CCCCCC в этом случае легче, чем запоминать название класса и вставлять CLASS=left-col. Естественно, здесь еще присутствует проблема объновляемости. То есть, если вдруг понадобится изменить цвет фона с серого на белый, придется переделать все странички/шаблоны. Однако в большинстве случаев такие глобальные изменения на сайте не делаются, разве что при редизайне, но тогда все перекодируется с нуля.

2. У вас есть таблица, в которой чередуются светло-серые и серые строки. Тогда вы пишете так:

<TR BGCOLOR=#EEEEEE><TD>контент</TD></TR>
<TR BGCOLOR=#DDDDDD><TD>контент</TD></TR>
...

Для сокращения кода можно ввести два новых класса. Например, eee и ddd. Тогда код станет вот таким:

.ddd {background: #DDD}
.eee {background: #EEE}
...
<TR class=eee><TD>контент</TD></TR>
<TR class=ddd><TD>контент</TD></TR>
...

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

Рекомендация
Легко сообразить, что использование классов особенно полезно в тех случаях, когда они будут использоваться часто. Так что, если класс появится на странице один раз, особого смысла его вводить нет.

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

У неопытного дизайнера при этом возникают определенные проблемы. Допустим, это у нас блок новостей. Замечательно. Мы создаем класс таких блоков и с чистым сердцем называем его news, что вполне логично. Класс и блок будут, например, такими:

.news {color: #000; font-size: 10px; width: 200px}
...
<DIV class=news>
Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.
</DIV>

На практике блок будет выглядеть так:

Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.

 

Надо бы сделать вначале блока красненькую плашечку, ширина которой соответствовала бы слову НОВОСТИ (учитывая тот факт, что дизайнер, по всей видимости, одной плашечкой под новости не ограничился, хотелось бы универсальности, то есть, чтобы ширина плашечки соответствовала ширине контента. Короче, чтобы изменялась при изменении слова). Для этого берем класс title и вставляем его в начало блока:

.title {color: #FFF; background: #E50D0D; font: bold 10px Arial}
...
<DIV class=news>
<DIV class=title>НОВОСТИ</DIV>
Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.
</DIV>

Вот что видим:

 НОВОСТИ  

Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.

Оказывается, наш блок с названием растянулся на всю доступную ему ширину, то есть на 200 пикселей. Теперь надо согласовать ширину блока с шириной контента. Элемент DIV образует блоки структурные, а нам нужен блок строчный. То есть, если использовать DIV, то надо ему прописать display: inline, но старые версии  браузеров  (есть еще те, кто ими пользуется) это объявление не понимают. Выход очевиден, надо использовать элемент строчного уровня, например тот же SPAN.

<DIV class=news>
<SPAN class=title>НОВОСТИ</SPAN><BR>
Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.
</DIV>

НОВОСТИ
Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.

Еще один прием. Маловероятно, что внутри новостной колонки будут использоваться еще какие-либо теги SPAN. Поэтому можно применить контекстный селектор — убрать класс title и вместо него вставить стили на элементы SPAN, которые находятся внутри элемента с классом news. Делается это так:

.news {color: #000; font-size: 12px; width: 200px}
.news SPAN {color: #FFF; background: #E50D0D; font: bold 14px Arial}
...
<DIV class=news>
<SPAN>НОВОСТИ</SPAN><BR>
Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.
</DIV>

Код слегка сократился, что приятно само по себе...

 

А здесь вы можете посмотреть и подобрать цвет , а заодно и узнать его код

http://xhtml.ru/online-tools/webcolors/

http://webmastak.com/article.aspx?id=3

С цветом фона немного разобрались.

Идем дальше…..

 

Как часто Вам доводилось видеть на сайтах не обычную, а цветную полосу прокрутки?

Зайдите вот сюда и посмотрите http://kso.pp.ru/sms.html

Изменение цвета и внешнего вида полос прокрутки (scroll bar) окна браузера последнее время стало очень популярной "фишкой" Web-дизайнеров. Сделать это не трудно , и ниже мы опишем как применить на практике.

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

scrollbar-3d-light-color - цвет контуров трехмерности;
scrollbar-arrow-color - цвет стрелочек;
scrollbar-base-color - базовый цвет (общий фон);
scrollbar-dark-shadow-color - цвет внешней тени;
scrollbar-face-color - цвет ползунков;
scrollbar-highlight-color - цвет контуров подсветки;
scrollbar-shadow-color - цвет внутренней тени;
scrollbar-track-color - цвет полос.

Чтобы изменить цвет прокрутки, поместите данные параметры в тэг <BODY>, а в качестве значений присвойте шестнадцатеричный код цвета или его название на английском языке, например:

<BODY style="scrollbar-3d-light-color: blue; scrollbar-arrow-color: blue; scrollbar-base-color: red; scrollbar-dark-shadow-color: white; scrollbar-face-color: lightgreen; scrollbar-highlight-color: red; scrollbar-shadow-color: red; scrollbar-track-color: green;">

Не обязательно использовать одновременно все атрибуты, иногда достаточно только одного - scrollbar-base-color. Вы вполне можете поэкспериментировать, но не забывайте о тех, кто будет пользоваться полосой прокрутки.

Но не забывайте об общей цветовой гамме вашего сайта. Если полоса прокрутки  не будет вписываться, то, о каком дизайне можно вообще говорить?

На этом все.

Была ли полезна эта статья?

***************************************

- Самое главное, - советует другу многоопытный семьянин, -
никогда не перечить теще.
- А как это сделать?
- Нет ничего проще. Надо проявить терпение. Дай ей возможность
 говорить столько, сколько ей хочется.
 И поверь, через какое-то время она станет сама себе перечить.
 
******************************************
 

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

- Это ещё что, я Вам сейчас про крокодила расскажу!

****************************************

эти ссылки могут вам пригодиться:

http://tvoyweb.ru/practica/faq.php

http://www.denwer.ru/

Удачи Вам во всех начинаниях несущих пользу и благополучие
  

  С уважением
Максим Егоров , Анжела Бабухина
Наши контакты: mailto:angelamax62@gmail.com
ISQ - 400-580-237
наши друзья: www.bookspro.net.ru

В избранное