Шаблоны и Стили. Что InstantCMS нам выдает...

1897
Зайдите на страничку вашего сайта InstantCMS. Через контекстное меню откройте код HTML страницы... Понятно что-нибудь?? Сомневаюсь...
Придется поработать ручками: откройте файл стандартного шаблона "template.php" в текстовом редакторе, предварительно забакапив его.
Теперь нам придется немножко отредактировать его...
Я не знаю о чем думали разработчики InstantCMS когда создавали код шаблона, но мне кажется совсем не о людях, которые потом этот код будут разбирать...
Итак главное правило хорошего тона при верстке html-кода:
Вложенные открывающие html-тэги ставятся с новой строки со смещением вправо... Смещение делается с помощью пробелов или табуляции. Закрывающие данные тэги ставятся однозначно под открывающими...
Исключения:
1. Если код внутри открывающего и закрывающего тэга короткий (ячейка таблицы, ссылка) и не уходит далеко за пределы экрана, то закрывающий тэг можно оставить на этой же строке.
2. Внутри ячеек таблиц иногда бывает недопустимо оставлять пробелы (а равно и переносы строк) между тэгами "<td>, </td>" и содержимым ячеек. Если внутри ячейки находится картинка или другая таблица приходится ставить их рядом.
Иногда можно не трогать php-вставки, html-формы, комментарии и другие подобные вещи. Также обычно не трогают тэг "<span>...</span>" если он просто задает стиль без разрыва абзацев. Если абзац все-таки разрывается уже обычно ставят "<div></div>"

Например:
Код PHP:
<body>
    <table>
            <tr><td><a href="..."></a></td></tr>
            <tr>
                 <td><table>
                     </table></td>
            </tr>
    </table>
</body>
А теперь пробегаем по всему коду "template.php" и расставляем пробелы, табуляции и переносы строк в соответсвии с данным правилом... Серьезно данный код пострадать не должен, в крайнем случае кое-где кое-что может начать разъезжаться, но на большом экране все элементы должны остаться на своих местах. Зато код теперь будет значительно более читаемый. Заодно попытайтесь посчитать сколько уровней вложенных таблиц получилось у разработчиков в шаблоне...
Замучались? Я тоже...

Закачиваем "template.php" обратно туда где он рос и смотрите результат... Если все совсем не так, восстанавливаете из бакапа "template.php" и делаете всю процедуру заново... Возможно где-то съели угловые скобки от тэга или тэг целиком... Внимательность и аккуратность... У меня вроде бы все на месте...

Предварительная работа сделана. Снова заходим на страничку, снова лезем в контекстное меню в браузере, смотрим еще раз html-код. Легче стало?? Не на много... У нас примешались еще таблицы выдаваемые модулями...

Шапку и подвал я сейчас обсуждать не буду. Смотрим что у нас с модулями.
С помощью поиска находим строки содержащие id="left", id="center", id="right"...
Таким образом вы получаете начала соответствующих разделов и после этого сразу получаем начало соответсвующего модуля
Код PHP:
<td width="235" valign="top" id="left"><table class="module" width="100%" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
		<td class="modulebody">
			<div style="text-align:center;margin-bottom:5px;">
Код конечно тоже не подарок для того чтобы разбирать, но теперь вы можете отследить конец таблицы модуля и начало следующего, заодно посмотреть html-код содержимое модуля, посмотреть какие классы и "id" там назначаются элементам, найти соответствующие элементы в CSS файле и начать править при желании...

Вот здесь мы уже создали себе временный шаблон, с которым можем работать дальше...
Скопируем в папочке "/templates" стандартный шаблон в другую папочку и начнем над ним издеваться...
В админке в "Настройках сайта - Дизайн" выберем нужную папочку и зальем туда наш недоделанный "template.php".
Исправим в строках
Код PHP:
<link href="/templates/_default_/css/styles.css" rel="stylesheet" type="text/css" />
<link type='text/css' href='/templates/_default_/basic/css/basic.css' rel='stylesheet' media='screen' />
текст "_default_" на название вашей папочки, где лежит ваша копия шаблона для издевательств, и можно потихоньку начинать курочить css-файл, который лежит в вашей папочке в поддиректории "CSS".
Залили?? Теперь снова заходите на страницу, смотрите html-код, радуетесь насколько там стало меньше мусора в коде... не понравилось, можете залить в свою папочку копию стандартного шаблона, не забыв исправить подключение css-файлов в шаблоне, и снова там же издеваться над css-файлом...

Удачных вам экспериментов... Не забывайте бакапиться )))
Шаблоны и стили. Пролог
Теги: шаблон
Комментарии (8)
Anabiotick 28 апреля 2010 в 16:30 0
     А вот мне не нравится такой подход. Он конечно лучше структурирует код, но вот воспринимается достаточно тяжело. Я использую мини елочки, то есть минимально необходимые отступы делаю, не везде. просто отдельной строкой отделяю разные структуры, одна таблица отделена от другой, один див от другого, либо использую комментарии, а вот если в одну таблицу вложена другая, то ее можно и с отступами. Но это мой подход, я не говорю, что он самый удачный. Кстати, есть хороший редактор кодов - Notepad++, который очень хорошо работает с структурами, можно один контейнер закрыть пока он не нужен, а другой оставить открытым и работать с ним.
lezginka.ru 2 июня 2010 в 16:53 0
это код шапки шаблона(дефолт). Как сделать картинку по центру, а фоном для яйчейки другую картинку ?
-----------------

        &nbsp;
        
&nbsp;

        &nbsp;
      
-----------
Львенок 2 июня 2010 в 17:04 +1
ну здрасьте... это уже знание html и css.
бакграунд прописываешь либо в атрибутах "td background=img1.jpg align=center valign=middle"
либо задаешь и присваиваешь стилем... Стиль прописываешь в css-файл
ну и задаешь как обычно картинку "img src=pic2.jpg" ну и выравниваешь...
вместо кавычек угловые скобки, а то вырежет...

Стилем правильнее.
lezginka.ru 2 июня 2010 в 17:06 0
это код шапки шаблона(дефолт). Как сделать картинку по центру, а фоном для ячейки, другую картинку ?
Львенок, укажи где конкретно ?

Код PHP:
         
        
		 
		 
         
      
lezginka.ru 2 июня 2010 в 17:07 0
что-то с кодом тут проблемы.
Код PHP:
        &nbsp;
        
		&nbsp;
		 
        &nbsp;
      
lezginka.ru 2 июня 2010 в 17:08 0
короче, на форум вывел вопрос
Львенок 2 июня 2010 в 18:24 0
хде? не нашел
0 19 ноября 2010 в 17:00 0
Это из раздела "поэзия кода"
Если интересно вот тут __http://framework.zend.com/manual/ru/coding-standard.php-file-formatting.html
про php написано