А это клавиатура, с помощью которой я творю...
http://kurepin.ru/php/styles/
Rambler's Top100
Пишем на PHP: Таблицы стилей

——
Файлы этого выпуска: /step/148/
——

Ну вот. Появился у нас работающий сайт. Теперь можно вернуться на несколько уроков назад и продолжить работу над сайтом в том порядке, в котором надо было ее вести. Если помните, я чуть форсировал визуализацию, чтобы вы не умерли от удовольствия.

Теперь мы чуток откатимся назад и пройдем еще один подготовительный этап — создание таблицы стилей (CSS).

Для чего нам эти стили и почему надо этим заниматься на начальной стадии создания проекта? Да потому, что на начальной стадии проекта надо планировать буквально все: базу, классы, стили, директории, почтовые адреса, журналы операций и все такое прочее.

Мы не будем заниматься доскональным изучением CSS, мы просто создадим костяк таблицы стилей, чтобы правильно к ней обращаться.

Что же такое CSS? Это набор правил отображения в браузере, устанавливаемых для любого стандартного html-объекта: шрифта, слоя, элемента таблицы или формы и так далее.

Была б моя воля — я бы запретил использование браузеров, не умеющих правильно отображать правила CSS. Очень уж много возможностей у CSS по сравнению со стандартными возможностями форматирования языка html.

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

Когда мы создаем текстовый дизайн, то весь арсенал наших визуальных инструментов составляют: размеры, цвета и отступы. И вот тут CSS равных нет. Чтобы иметь возможность менять оформление дизайна полностью или частично нам надо грамотно заложить в html-код употребление разных классов CSS. Причем, эти классы распланировать и описать надо тоже нам.

Посмотрим, как это делается.

Давайте попробуем перечислить все основные элементы, выделяющиеся на html-странице.

Прежде всего, это ЗАГОЛОВКИ. Заголовки могут быть основные (на всю страницу), могут быть заголовками, разделов, меню, таблиц и так далее.

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

Далее — основной текст. Он может изменяться в зависимости от выполняемых функций: основной текст, меню, сноска, комментарий и так далее.

А таблицы? Таблицы же тоже могут иметь разного цвета и размера ячейки, столбцы, рамки и отступы... я уж молчу про элементы форм (form)...

Что же делать? Кажется, что всего учесть нельзя, что проще описывать прямо на месте тот или иной элемент кода.

Ничего подбного!

Теория CSS гласит, что каждый элемент наследует свои свойства от прародителя, изменяя только то, что было явно изменено. Т.е. CSS — это такое же ООП, как и наш PHP-код. Так давайте этим пользоваться в меру наших потребностей.

Предлагаю разбить первый уровень классов на:

1. Базовый текст
2. Таблицы
3. Формы

И для каждого описать свойства текста, фона и прочего, чего нам захочется.

В свою очередь, текст можно подразделить на:

1. Заголовок (title)
2. Основной (normal)
3. Важный (urgent)
4. Яркий (ошибка)
5. Мелкий (small)
6. Очень мелкий (tiny)

Если этих шести нам не хватит — добавим уже потом.

Вот из этих двух списков и составим нашу CSS.

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

Предлагаю вот такой вариант для начала.


Вот, что у меня получилось.

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

На что хочется обратить внимание. Пожалуй, только на то, что в качестве единицы величины я использовал pt, а не px. Мне кажется это наиболее правильным, учитывая, что люди имеют разное зрение и совсем разные разрешения мониторов.

Для тех, кто не знает разницы между pt и px, я поведаю, что pt пляшет от дюйма или какой-то другой реальной меры длины, а px — от видимой на экране точки. Поэтому, 10pt на всех мониторах будет иметь один физический размер, а 10px от невидимого текста на огромных разрешениях до здоровенных букв на низком разрешении.

Я выбираю pt.

Давайте теперь для примера переделаем одну из наших страниц. Например, /admin/cat/add.php

Вот так она теперь выглядит:


Сравните:

http://php.kurepin.ru/step/146/admin/cat/add.php — это было (хотя было гораздо хуже, ибо даже тут через заголовок мы подхватили контроль за гарнитурой и кеглем шрифта).

http://php.kurepin.ru/step/148/admin/cat/add.php — а это стало.

И нам для этого надо было просто добавить несколько class="" в некоторые тэги нашей страницы.

Отныне мы будем стараться каждому видимому элементу прописывать свой класс. Это позволит нам без лишней мороки менять вид сайта в любом направлении: хоть в размерах, хоть в шрифтах, хоть в цветах.

И еще одна замечательная возможность плывет прямо к нам в руки. Угадайте!

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

Возможно, мы это и сделаем когда-то. А для нетерпеливых я в двух словах поясню, как это сделать:

1. Подключаем CSS прямо в текст каждой страницы, для чего в файле top.inc заменяем

<link rel=stylesheet type="text/css" href="/style.css">

на

<? include(...style.inc); ?>

А в файле style.inc заменяем изменяемые элементы (цвета, размеры и др.) обычными переменными, на которые можно влиять как нам будет угодно.

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

Сегодня это уже не роскошь в Сети, а вполне пользуемая функция многих сайтов. Впервые я увидел это на сайте webclub.ru. Не знаю, какими средствами они этот эффект реализовывали, но полагаю, что какими-то схожими.

За сим прощаюсь до завтра, читайте про CSS.

[шаг назад] [печатать] [в начало сайта]



copyright ©2000-2017 Ruslan Kurepin