Динамично эластичный тип макета , низ сайта - дизайн № 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 . Процесс преобразования шаблона низа сайта ( footer ) с резиновым типом макета
для страницы с динамично эластичным типом макета - dynamically expandable elastic .
• Главная страница сайта .

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

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

Будет выдаваться ошибка незакрытого Условного оператора ( <?if($ХХХХХХХ$)?> ) в случае их наличия в шаблоне примера , так же системные коды и ссылки ( $ХХХХ_ХХХ$ , $ХХХХ$ ) будут неработоспособными !
Перед установкой HTML шаблона , все вышеупомянтые системные коды и/или Условные операторы , необходимо копировать из стандартного шаблона и вставлять вместо тех что прописаны в HTML этого шаблона .
Исходный скриншот низа ( footer ) страницы сайта с резиновым типом макета стандартного uCoz дизайна № 841 .
HTML шаблона низа страницы сайта с резиновым типом макета № 841 .
Из текста за ненадобностью удалены все теги - управляющин комментарии визуального конструктора сайта , остался только чисто HTML текст низа страницы шаблона .
Как видно из HTML текста шаблона , шаблон состоит из одной таблицы .
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="29" style="background: url('/.s/t/841/1.gif') center no-repeat #6B6B6B;">
<tr>
<td width="50%" style="padding-left: 20px;">Copyright MyCorp © $YЕАR$</td>
<td width="50%" align="right" style="padding-right: 20px; color: #000000;">$PОWЕRЕD_BY$</td>
</tr>
</table>
Далее из исходного текста шаблона низа , удаляем все устаревшие теги , переводим их в стили тегов которые в последствии будут переведены в классы связывающие теги с таблицей каскадных стилей - CSS , удаляем лишнее и вообще всё переводим в стили тегов .
В результате получаем этот HTML текст .
<table cellpadding="0" cellspacing="0" style="background: #6b6b6b url('/.s/t/841/1.gif') no-repeat center top; width: 100%; height: 29px; border: 0px;">
<tr>
<td style="width: 50%; padding-left: 20px;">Copyright MyCorp © $YЕАR$;</td>
<td style="width: 50%; text-align: right; padding-right: 20px; color: #000;">$PОWЕRЕD_ВY$;</td>
</tr>
</table>
Следующий этап превращения резинового типа макета в динамично эластичный макет - dynamically expandable elastic .
Смысл этого этапа состоит в удалении из шаблона низа табличных тегов и замена их тегом div .
Даже невооружённым взглядом видно что исходный HTML шаблона низа сократился по количеству тегов , символов . Значение длинны эдемента содежащего копирайт системы сократим до 30% . На данном этапе этот HTML , является шаблоном с резиновым типом макета низа сайта и пригоден для установки в качестве стандартного шаблона дизайна № 841 . Разумеется требуется перевод стилей тегов шаблона в классы CSS , что приведёт к ещё большему сокращению объёма HTML текста шаблона .
<div style="background: #6b6b6b url('/.s/t/841/1.gif') no-repeat center top; width: 100%; height: 29px;">
<div style="width: 50%; float: left; padding-left: 20px;">Copyright MyCorp © $YЕАR$</div>
<div style="width: 30%; float: right; text-align: right; padding-right: 20px; color: #000;">$PОWЕRЕD_ВY$</div>
</div>
Проделав работу по преобразованию стилей тегов в классы стилей CSS , получили следующий исходный текст HTML шаблона низа сайта и строки классов для таблицы каскадных стилей низа сайта . Воочую видно сокращение исходного текста шаблона , по сравнению с исходным вариантом . Этот вариант HTML исходного текста и CSS таблицы каскадных стилей шаблона низа сайта , стандартного uCoz дизайна № 841 является законченным вариантом . Этот шаблон и CSS могут быть установлены в CSS и шаблон низа вместо стандартных .
<div class="footerA">
<div class="footerB">Copyright MyCorp © $YЕАR$</div>
<div class="footerC">$PОWЕRЕD_ВY$</div>
</div>
Строки стилей классов тегов шаблона блока низа сайта .
.footerA {background: #6b6b6b url('/.s/t/841/1.gif') no-repeat center top; width: 100%; height: 29px;}
.footerB {width: 50%; float: left; padding-left: 20px;}
.footerC {width: 30%; float: right; text-align: right; padding-right: 20px; color: #000;}
Завершающий этап конвертации резинового типа макета стандартного uCoz дизайна шаблона шапки № 841 в шаблон динамично эластичного типа макета - dynamically expandable elastic .
Заменяем все единицы выражения размеров , PX , PT , шрифта , отступов и положения элементов на относительную еденицу измерения EM .
В виду того что фоновые изображения изначально не могут быть автомасштабируемыми в динамично эластичном макете , изменяем HTML шаблона , способ создания фона , для строки Copyright MyCorp © $YЕАR$ и кода вывода копирайта $PОWЕRЕD_ВY$ . Шаблон записываем в глобальный блок низа сайта .
<div class="footerA">
<img class="footerD" alt="" src="/.s/t/841/1.gif">
<div class="footerB">Copyright MyCorp © $YЕАR$</div>
<div class="footerC">$PОWЕRЕD_ВY$</div>
</div>
Строки стилей классов тегов шаблона шниза сайта № 841 , стандартного дизайна , конвертированного в динамично эластичный тип макета . Сохраняем в виде CSS файла , загружаем в файловый менеджер и ссылку выводим в заголовок шаблона страниц сайта .
.footerA {position: relative; left: 0px; top: 0px; width: 100%; height: 3.5em;}
.footerD {position: absolute; left: 0px; top: 0px; width: 100%; border: 0px;}
.footerB {position: absolute; left: 0px; top: 0px; width: 40%; padding: 1em 0px 0px 2em; font-size: 1em; z-index: 2;}
.footerC {position: absolute; right: 0px; top: 0px; width: 20%; float: right; text-align: right; padding: 0.2em 1em 0px 0px; color: #000; z-index: 2;}
Данный HTML шаблона cтандартного дизайна uCoz # 841 , динамично эластиного типа макета установлен на сайте :

• Сайт runetexpo.clan.su



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