Динамично эластичный тип макета , блок колонки - дизайн № 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 текста шаблона , шаблон состоит из таблицы в несколько строк .
<?if($СОUNТЕR$ || $ОNLINЕ_СОUNТЕR$)?>
<table border="0" cellpadding="0" cellspacing="0" style="background: url('/.s/t/841/5.gif') #A4A3A3;" width="191">
<tr>
<td height="29" style="background: url('/.s/t/841/6.gif') #585858; color: #FFFFFF; padding-right: 10px;" align="right"><b>Статистика</b></td>
</tr>
<tr>
<td style="background: url('/.s/t/841/7.gif') top no-repeat;">
$СОUNТЕR$
<?if($ОNLINЕ_СОUNТЕR$)?>
<hr>
$ОNLINЕ_СОUNТЕR$ $ОNLINЕ_USЕRS_LISТ$
<?endif?>
</td>
</tr>
<tr>
<td><img src="/.s/t/841/8.gif" border="0"></td>
</tr>
</table>
<?endif?>
Далее из исходного текста блока контейнера колонки , удаляем все устаревшие теги , переводим их в стили тегов которые в последствии будут переведены в классы связывающие теги с таблицей каскадных стилей - CSS , удаляем лишнее и вообще всё переводим в стили тегов .
В результате получаем этот HTML текст . В принципе различий мало .
<?if($СОUNТЕR$ || $ОNLINЕ_СОUNТЕR$)?>
<table cellpadding="0" cellspacing="0" style="background: #A4A3A3 url('/.s/t/841/5.gif'); border: 0px; width: 191px;">
<tr>
<td style="height: 29px; background: url('/.s/t/841/6.gif') #585858; color: #fff; text-align: right; padding-right: 10px;"><b>Статистика</b></td>
</tr>
<tr>
<td style="background: url('/.s/t/841/7.gif') top no-repeat;">
$СОUNТЕR$
<?if($ОNLINЕ_СОUNТЕR$)?>
<hr>
$ОNLINЕ_СОUNТЕR$ $ОNLINЕ_USЕRS_LISТ$
<?endif?>
</td>
</tr>
<tr>
<td><img alt="" src="/.s/t/841/8.gif" style="border: 0px;"></td>
</tr>
</table>
<?endif?>
Следующий этап превращения резинового типа макета в динамично эластичный макет - dynamically expandable elastic .
Смысл этого этапа состоит в удалении из шаблона блока колонки модуля табличных тегов и замена их тегом div .
Стандартные классы в шаблоне , их названия сменим на свои и где это необходимо дополним стилями тегов из шаблона .
<?if($СОUNТЕR$ || $ОNLINЕ_СОUNТЕR$)?>
<div style="height: 29px; background: url('/.s/t/841/6.gif') #585858; color: #fff; text-align: right; padding-right: 10px;"><b>Статистика</b></div>
<div style="background: url('/.s/t/841/7.gif') top no-repeat;">
$СОUNТЕR$
<?if($ОNLINЕ_СОUNТЕR$)?>
<hr>
$ОNLINЕ_СОUNТЕR$ $ОNLINЕ_USЕRS_LISТ$
<?endif?>
</div>
<div><img alt="" src="/.s/t/841/8.gif" style="border: 0px;"></div>
<?endif?>
Проделав работу по преобразованию стилей тегов в классы стилей CSS , получили следующий исходный текст HTML шаблона блока колонки и строки классов для таблицы каскадных стилей страниц сайта . HTML заметно сократился , по сравнению с исходным вариантом .
<?if($СОUNТЕR$ || $ОNLINЕ_СОUNТЕR$)?>
<div class="boxD"><b>Статистика</b></div>
<div class="boxE">
$СОUNТЕR$
<?if($ОNLINЕ_СОUNТЕR$)?>
<hr>
$ОNLINЕ_СОUNТЕR$ $ОNLINЕ_USЕRS_LISТ$
<?endif?>
</div>
<div><img alt="" src="/.s/t/841/8.gif" class="boxF"></div>
<?endif?>
Строки стилей классов тегов шаблона блока колонки , глобального блока Первый контейнер .
.boxD {height: 29px; background: #585858 url('/.s/t/841/6.gif'); color: #fff; text-align: right; padding-right: 10px;}
.boxE {background: url('/.s/t/841/7.gif') top no-repeat;}
.boxF {border: 0px;}
Завершающий этап конвертации резинового типа макета стандартного uCoz дизайна шаблона блока колонки сайта № 841 в шаблон динамично эластичного типа макета - dynamically expandable elastic .
Заменяем все единицы выражения размеров , PX , отступов и положения элементов на относительную еденицу измерения EM .
В виду того что фоновые изображения изначально не могут быть автомасштабируемыми в динамично эластичном макете , изменяем HTML шаблона , способ создания фона , как для фона заголовка блока , так и для фона центрального блока ( 6.gif , 7.gif , 8.gif ) . Добавлены некоторые теги бордюра и градиентный тёмный фон EER100.png для придания визуальной рельефности блока . Стиль style="text-align: center;" центральной части характерен тольоко для блока статистики .
<?if($СОUNТЕR$ || $ОNLINЕ_СОUNТЕR$)?>
<div class="boxA">
<img class="boxB" alt="" src="/PIC/6.gif">
<img class="boxC" alt="" src="/PIC/7.gif">
<div class="boxD boxG" style="text-align: center;">Статистика</div>
<div class="boxE">
$СОUNТЕR$
<?if($ОNLINЕ_СОUNТЕR$)?>
<hr>
$ОNLINЕ_СОUNТЕR$ $ОNLINЕ_USЕRS_LISТ$
<?endif?>
</div>
<img alt="" src="/.s/t/841/8.gif" class="boxF">
</div>
<?endif?>
Строки стилей классов тегов шаблона блока колонки сайта № 841 , стандартного дизайна , конвертированного в динамично эластичный тип макета . Сохраняем в виде CSS файла , загружаем в файловый менеджер и ссылку выводим в заголовок шаблона страниц сайта .
.boxA {position: relative; top: 0px; left: 0px; width: 19em; margin-bottom: 0.6em;}
.boxB {position: absolute; left: 0px; top: 0px; height: 3em; width: 100%; z-index: 2;}
.boxC {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1;}
.boxD {position: relative; left: 0px; top: 0px; text-align: right; color: #fff; padding: 0.6em 1em 1em 1em; font-weight: bold; font-size: 1.2em; z-index: 3;}
.boxE {position: relative; left: 0px; top: 0.3em; background: #444 url('/PIC/EER100.png') repeat-y scroll right top; border-right: 0.2em #444 solid; padding: 0.4em 0px 1em 0px; z-index: 4;}
.boxG img {width: 8.4em; height: 3em;}
.boxF {position: relative; left: 0px; top: 0px; width: 100%; z-index: 5;}
В результате получим такой вид шаблона блока колонки сайта , Первого глобального контейнера . Внешний вид изменён , модернизирован , добавлен фон под содержание блока для более контрастного отображения текста с белым цветом . Изначально в стандартном блоке этого фона нет и независимо от цвета шрифта , белый он или чёрный , в обоих случаях та или иная часть текста практически сливается с градиентным стандартным фоном . Именно поэтому и применён этот фон для содержания блока .
Стандартный вид блока Модернизированный
Данный HTML шаблона cтандартного дизайна uCoz # 841 , динамично эластиного типа макета установлен на сайте :

• Сайт runetexpo.clan.su



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