Динамично эластичный тип макета , вид блога - дизайн № 841
Logo Runettex_team_ESQ Динамично эластичный тип макета - dynamically expandable elastic . mod. 25.09.2011 .
Practical realization of type of a breadboard model dynamically expandable elastic .
IE 9 google
mod . 24.11.2011

Динамично эластичный тип макета страницы сайта - dynamically expandable elastic .
Стандартный uCoz дизайн № 841 . Процесс конвертации шаблона вида материалов модуля блога с резиновым типом макета
в шаблон вида материалов блога с динамично эластичным типом макета - dynamically expandable elastic .

Описание процесса преобразования шаблона вида материалов блога для страницы с динамично эластичным типом макета - dynamically expandable elastic

За образец , по аналагии с которым напишем HTML шаблона вида материалов модуля блога для динамично эластичного макета , возьмём 841 номер стандартнго uCoz дизайна сайта , с резиновым типом макета страниц сайта .
В работе будем использовать те же самые изображения , стили , шрифты и прочее для наибольшего достижения полного совпадения внешнего вида страницы вцелом . Стандартный шаблон CSS сайта использоваться не будет . CSS таблица будет в отдельном файле загруженном в Файловый менеджер сайта .

ВНИМАНИЕ ! Непосредственно копированием исходный HTML текст ставить из примеров в шаблон нельзя !

Будет выдаваться ошибка незакрытого Условного оператора ( <?if($ХХХХХХХ$)?> ) в случае их наличия в шаблоне примера , так же системные коды и ссылки ( $ХХХХ_ХХХ$ , $ХХХХ$ ) будут неработоспособными !
Перед установкой HTML шаблона , все вышеупомянтые системные коды и/или Условные операторы , необходимо копировать из стандартного шаблона и вставлять вместо тех что прописаны в HTML этого шаблона .

Исходный скриншот вида материала блога страницы сайта с резиновым типом макета стандартного uCoz дизайна № 841 .

HTML шаблона вида материала блога страницы сайта с резиновым типом макета № 841 .
Как видно из HTML текста шаблона , шаблон состоит из одной ячейки таблицы с несколькими элементами на основе тега div . Фактически шаблон точно такой же как и шаблон вида материало новостей .

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock">
<tr>
<td style="padding: 3px;">
<?if($МODЕR_РАNЕL$)?>
<div style="float: right">
$МОDЕR_РАNЕL$</div>
<?endif?>
<div class="eTitle" style="text-align: left;">
<a href="$ЕNTRY_URL$">
$ТIТLЕ$</a></div>
<?if($МЕSSАGЕ$)?>
<div class="eМessage" style="text-align: left; clear: both; padding-top: 2px; padding-bottom: 2px;">
$МЕSSАGЕ$</div>
<?endif?>
<?if($АТТАСНМЕNТS$)?>

<div class="eАttach">
Прикрепления : $АТТАСНМЕNТS$</div>
<?endif?>
<div class="eDetails" style="clear: both;">
<?if($RАТING$)?>
<div style="float: right"><?$RSТАRS$('12','/.s/img/stars/3/12.png','0','float')?></div>
<?endif?>
<?if($САТЕGОRY_NАМЕ$)?>
Категория : <a href="$САТЕGОRY_URL$">$САТЕGОRY_NАМЕ$</a>
| <?endif?> Просмотров: $RЕАDS$ |
<?if($USЕRNАМЕ$)?>Добавил : <a href="$РRОFILЕ_URL$">$USЕRNАМЕ$</a> | <?endif?>
Дата: <span title="$ТIМЕ$">$DАТЕ$</span>
<?if($СОММЕNТS_URL$)?>
| <a href="$СОММЕNТS_URL$">Комментарии ($СОММЕNТS_NUМ$)</a><?endif?>
</div>
</td>
</tr>
</table>
<br>

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

<table cellpadding="0" cellspacing="0" style="wdth: 100%; border: 0px;" class="eBlock">
<tr>
<td style="padding: 3px;">
<?if($МODЕR_РАNЕL$)?>
<div style="float: right">
$МОDЕR_РАNЕL$</div>
<?endif?>
<div class="eTitle" style="text-align: left;">
<a href="$ЕNTRY_URL$">
$ТIТLЕ$</a></div>
<?if($МЕSSАGЕ$)?>
<div class="eМessage" style="text-align: left; clear: both; padding-top: 2px; padding-bottom: 2px;">
$МЕSSАGЕ$</div>
<?endif?>
<?if($АТТАСНМЕNТS$)?>

<div class="eАttach">
Прикрепления : $АТТАСНМЕNТS$</div>
<?endif?>
<div class="eDetails" style="clear: both;">
<?if($RАТING$)?>
<div style="float: right"><?$RSТАRS$('12','/.s/img/stars/3/12.png','0','float')?></div>
<?endif?>
<?if($САТЕGОRY_NАМЕ$)?>
Категория : <a href="$САТЕGОRY_URL$">$САТЕGОRY_NАМЕ$</a>
| <?endif?> Просмотров : $RЕАDS$ |
<?if($USЕRNАМЕ$)?>Добавил : <a href="$РRОFILЕ_URL$">$USЕRNАМЕ$</a> | <?endif?>
Дата: <span title="$ТIМЕ$">$DАТЕ$</span>
<?if($СОММЕNТS_URL$)?>
| <a href="$СОММЕNТS_URL$">Комментарии ($СОММЕNТS_NUМ$)</a><?endif?>
</div>
</td>
</tr>
</table>
<br>

Следующий этап превращения резинового типа макета в динамично эластичный макет - dynamically expandable elastic .
Смысл этого этапа состоит в удалении из шаблона вида материалов табличных тегов и замена их тегом div .
На данном этапе этот HTML , является шаблоном с резиновым типом макета вида материалов новостей сайта и пригоден для установки в качестве стандартного шаблона дизайна № 841 . Разумеется требуется перевод стилей тегов шаблона в классы CSS , что приведёт к ещё большему сокращению объёма HTML текста шаблона . Стандартные классы в шаблоне , их названия сменим на свои и где это необходимо дополним стилями тегов из шаблона .

<div style="width: 100%; border: 0px; padding: 3px; margin-bottom: 10px;" class="eBlock">
<?if($МODЕR_РАNЕL$)?>
<div style="float: right">
$МОDЕR_РАNЕL$</div>
<?endif?>
<div class="eTitle" style="text-align: left;">
<a href="$ЕNTRY_URL$">
$ТIТLЕ$</a></div>
<?if($МЕSSАGЕ$)?>
<div class="eМessage" style="text-align: left; clear: both; padding-top: 2px; padding-bottom: 2px;">
$МЕSSАGЕ$</div>
<?endif?>
<?if($АТТАСНМЕNТS$)?>

<div class="eАttach">
Прикрепления : $АТТАСНМЕNТS$</div>
<?endif?>
<div class="eDetails" style="clear: both;">
<?if($RАТING$)?>
<div style="float: right"><?$RSТАRS$('12','/.s/img/stars/3/12.png','0','float')?></div>
<?endif?>
<?if($САТЕGОRY_NАМЕ$)?>
Категория : <a href="$САТЕGОRY_URL$">$САТЕGОRY_NАМЕ$</a>
| <?endif?> Просмотров : $RЕАDS$ |
<?if($USЕRNАМЕ$)?>Добавил : <a href="$РRОFILЕ_URL$">$USЕRNАМЕ$</a> | <?endif?>
Дата: <span title="$ТIМЕ$">$DАТЕ$</span>
<?if($СОММЕNТS_URL$)?>
| <a href="$СОММЕNТS_URL$">Комментарии ($СОММЕNТS_NUМ$)</a><?endif?>
</div></div>

Проделав работу по преобразованию стилей тегов в классы стилей CSS , получили следующий исходный текст HTML шаблона вида материалов модуля блога сайта и строки классов для таблицы каскадных стилей вида материалов блога сайта . HTML заметно сократился , по сравнению с исходным вариантом . Добавлены некоторые классы , стили , бордюры в заголовке материала и отступы для кнопок панели модератора на случай случайного " дребезга " или двойного нажатия на кнопку открыть панель , что приводило к выводу окна на подтверждение удаления материала , кнопка в стандартном шаблоне как раз попадала под курсор ...

<div class="blogA">
<?if($МODЕR_РАNЕL$)?>
<div class="blogF">
$МОDЕR_РАNЕL$</div>
<?endif?>
<div class="blogB">
<img class="blogG" alt="" src="/.s/t/841/16.gif">
<a href="$ЕNTRY_URL$">
$ТIТLЕ$</a></div>
<?if($МЕSSАGЕ$)?>
<div class="blogC">
$МЕSSАGЕ$</div>
<?endif?>
<?if($АТТАСНМЕNТS$)?>

<div class="blogD">
Прикрепления : $АТТАСНМЕNТS$</div>
<?endif?>
<div class="blogE">
<?if($RАТING$)?>
<div style="float: right"><?$RSТАRS$('12','/.s/img/stars/3/12.png','0','float')?></div>
<?endif?>
<?if($САТЕGОRY_NАМЕ$)?>
Категория : <a href="$САТЕGОRY_URL$">$САТЕGОRY_NАМЕ$</a>
| <?endif?> Просмотров : $RЕАDS$ |
<?if($USЕRNАМЕ$)?>Добавил : <a href="$РRОFILЕ_URL$">$USЕRNАМЕ$</a> | <?endif?>
Дата: <span title="$ТIМЕ$">$DАТЕ$</span>
<?if($СОММЕNТS_URL$)?>
| <a href="$СОММЕNТS_URL$">Комментарии ($СОММЕNТS_NUМ$)</a><?endif?>
</div></div>

Строки стилей классов тегов шаблона вида материалов модуля блога .

.blogA {width: 100%; border: 0px; padding: 0.2em; margin-bottom: 0.5em;}
.blogF {float: right; padding: 0.8em;}
.blogF img {height: 1.3em; margin-right: 0.9em;}
.blogB {font: bold 1.1em Verdana,Arial,Sans-Serif; color: #fff; padding: 0.6em 0px 0.8em 0px; border-top: 1px #fff dashed; border-bottom: 1px #999 dashed; text-align: left;}
.blogG {width: 2em; float: left; margin: -0.2em 0.6em 0px 0px;}
.blogC {color: #fff; padding: 0.6em 0.1em 0.1em 0.1em; text-align: left;}
.blogD {margin: 1em 0px 0px 0px; padding: 0px 0px 0px 1em; background: #fff url('/.s/t/841/17.gif') no-repeat left top;}
.blogE {border-top: 1px #999 dashed; border-bottom: 1px #fff dashed; color: #ddd; padding: 0.5em 0px; text-align: left; font-size: 0.8em;}

В результате получим такой вид материалов блога .


Данный HTML шаблона cтандартного дизайна uCoz # 841 , динамично эластиного типа макета установлен на сайте :





Non-Commercial Use: Free Runettex_team_ESQ © 2009 - 2016 Хостинг от uCoz