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

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

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

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

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

Итак чтобы решить первую задачу у вас обязательно должен быть макет, сверстанный в html с вынесенными отдельно стилями CSS. Вы должны сами понимать в какой части макета что у вас отображается и какие стили используются: где начинаются и заканчиваются таблицы и их ячейки, divы, ссылки, картинки, куда вы планируете прикручивать модули, и как вы хотите, чтобы модули выглядели… Для этого вам подойдет любой html-редактор, позволяющий работать со стилями… Воздержитесь от забивания в макет форматирования html-тэгов. В некоторых случаях может это и было бы удобно, но потом другим людям, да и вам самим трудно будет разобраться где и каким образом вы задали дизайн тому или иному участку сайта...
Сейчас вот мне как раз и предстоит нарисовать макетик того, чего я хочу, и дальше в процессе его реализации будут рождаться следующие посты…
0
Hmelex Hmelex 13 лет назад #
Кажется совершенно недавно - мясяца 2-3, речь уже шла про описание шаблона, что и из чего состоит.
На моей памяти уже столько про шаблоны написано - хоть книгу пиши. v
От себя: Если есть что сказать - напишите в http://instantcms.ru/wiki/ angel
0
Hmelex Hmelex 13 лет назад #
Плохо что тут нельзя удалить свой пост love
Покопалась по сайту - Что то я как то и не обращала внимание на то, что многие и отличного качества сообщения именно Ваши. Потом посмотрела Ваш блог и поняла, что я немного погорячилась с выводами.zst
======================================
Вы просто молодец v - Да именно Всё, что я помню про описание (шаблонов скриптов и др.) именно к вам и относилось.
+1 angel
0
Львенок Львенок 13 лет назад #
Ну ничо, ничо...))) спасибо на добром слове... )))
Приятно когда оценивают по заслугам )))

Еще от автора

Шаблоны и Стили. Что InstantCMS нам выдает...
Зайдите на страничку вашего сайта InstantCMS. Через контекстное меню откройте код HTML страницы... Понятно что-нибудь?? Сомневаюсь...
А что у нас за Яваскрипты в стандартном шаблоне???
Вот прежде чем начинать возиться со стилями компонентов и шаблона целиком будет полезно посмотреть, а что у нас в шаблоне за Яваскрипты подключаются..
Быстро создаем себе структуру своего шаблона с нуля
Для тех, кто знает и немного работал с HTML и CSS, но пугается огромного объема информации, находящегося в "/templates/_default_/template.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.