Динамично эластичный тип макета , вид статей - дизайн № 841
fon
Загружается . . . Ждите . . .
It is loaded . . . Wait . . .
Wird beladen . . . Warten Sie . . .
Es cargado . . . Esperen . . .
Est chargé . . . Attendez . . .
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?>
<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($АUТНОR_NАМЕ$)?>Author : $АUТНОR_NАМЕ$ |<?endif?>
<?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?>
<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($АUТНОR_NАМЕ$)?>Author : $АUТНОR_NАМЕ$ |<?endif?>
<?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?>
<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$ | Дата: <span title="$ТIМЕ$">$DАТЕ$</span><br>
<?if($АUТНОR_NАМЕ$)?>
Автор : $АUТНОR_NАМЕ$ |<?endif?><?if($USЕRNАМЕ$)?>Добавил : <a href="$РRОFILЕ_URL$">$USЕRNАМЕ$</a><?endif?>
<?if($СОММЕNТS_URL$)?> | <a href="$СОММЕNТS_URL$">Комментарии ($СОММЕNТS_NUМ$)</a><?endif?>
</div></div>
Проделав работу по преобразованию стилей тегов в классы стилей CSS , получили следующий исходный текст HTML шаблона вида материалов модуля каталога статей сайта и строки классов для таблицы каскадных стилей вида материалов статей сайта . HTML заметно сократился , по сравнению с исходным вариантом . Добавлены некоторые классы , стили , бордюры в заголовке материала и отступы для кнопок панели модератора на случай случайного " дребезга " или двойного нажатия на кнопку открыть панель , что приводило к выводу окна на подтверждение удаления материала , кнопка в стандартном шаблоне как раз попадала под курсор ...
<div class="publA">
<?if($МODЕR_РАNЕL$)?>
<div class="publF">$МОDЕR_РАNЕL$</div>
<?endif?>
<div class="publB">
<img class="publG" alt="" src="/.s/t/841/16.gif">
<a href="$ЕNTRY_URL$">$ТIТLЕ$</a></div>
<?if($МЕSSАGЕ$)?>
<div class="publC">$МЕSSАGЕ$</div>
<?endif?>
<div class="publE">
<?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$ | Дата: <span title="$ТIМЕ$">$DАТЕ$</span><br>
<?if($АUТНОR_NАМЕ$)?>
Автор : $АUТНОR_NАМЕ$ |<?endif?><?if($USЕRNАМЕ$)?>Добавил : <a href="$РRОFILЕ_URL$">$USЕRNАМЕ$</a><?endif?>
<?if($СОММЕNТS_URL$)?> | <a href="$СОММЕNТS_URL$">Комментарии ($СОММЕNТS_NUМ$)</a><?endif?>
</div></div>
Строки стилей классов тегов шаблона вида материалов модуля каталога статей .
.publA {width: 100%; border: 0px; padding: 0.2em; margin-bottom: 0.5em;}
.publF {float: right; padding: 0.8em;}
.publF img {height: 1.3em; margin-right: 0.9em;}
.publB {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;}
.publG {width: 2em; float: left; margin: -0.2em 0.6em 0px 0px;}
.publC {color: #fff; padding: 0.6em 0.1em 0.1em 0.1em; text-align: left;}
.publE {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 , динамично эластиного типа макета установлен на сайте :

• Сайт runetexpo.clan.su



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