Шаблоны и стили. Пролог

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

Задачи собственно всего 2 (две):
1. Мы хотим создать свой собственный шаблон с нуля. В худшем случае у нас вообще ничего нету ни в голове, ни в нарисованных макетах. В лучшем случае у нас есть сверстанный макет в html с вынесенными в отдельный файл стили CSS...
2. У нас уже есть готовый шаблон (неважно стандартный или разработанный другим не менее творческим человеком...), и нам нужно кое-где кое-чего подправить… И хорошо если мы хотя бы сами догадываемся где и что нужно подправить…

В процессе решения первой задачи на таких объемных (по количеству модулей) движках как InstantCMS каждая отдельная подзадача будет сводиться уже к решению второй задачи. Т.е. вам каждый раз придется где-то что-то подправлять в уже собственном шаблоне, так что при проектировании собственного шаблона постарайтесь выработать несколько простых правил запихивания нужного кода в нужное место, чтобы вы потом могли быстро находить нужные участки кода, будь то кусок шаблона, кусок модуля или кусок CSS файла опираясь на свои собственные правила… Посмотрите какой логики придерживались разработчики InstantCMS.

За чем вам надо будет следить:
1. Где и как подключаются файлы CSS и где они лежат.
2. Как в выбранном вами элементе назначается стиль:
Стиль элемента может назначаться базовыми стилями и переходить по умолчанию.
Стиль элемента может быть привязан к тэгу (внимательно смотрите на цепочки тэгов в CSS, могут быть сюрпризы),
может быть привязан к id элемента,
может быть назначен через "class=..."
и может быть назначен напрямую через "style=..."
Так же стиль может назначаться через яваскрипты в процессе работы браузера в процессе загрузки странички или уже после загрузки. Почитайте внимательно какую-нибудь книжку по CSS и по ДинамикHTML...
Обычно назначением напрямую через "style=..." пользуются когда нужно управлять видимостью элемента, как в выпадающих или древовидных меню. Все элементы меню загружены, но они скрыты настройками стилей, и после обработки действий мыши настройки отображения необходимых пунктов меню меняются через яваскрипты...
3. Ну и собственно что из себя представляет этот стиль, обращайте внимание на видимость, обращайте внимание на яваскрипты, которые могут управлять стилями

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