Динамично эластичный тип макета , шапка сайта - дизайн № 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 текст шапки шаблона .
Как видно из HTML текста шаблона , шаблон состоит из трёх таблиц .
Верхняя часть шапки , таблица , состоит из двух ячеек ( логотип сайта и коды вывода : даты , времени и дня недели )
Центральная часть шаблона так же состоит из двух ячеек ( ссылки входа / выхода / мой профиль / регистрация / главная , ну и приветствие : Вы вошли как и т д ... )
Нижняя часть шаблона состоит из таблицы - две строки по одной ячейке ( нижняя фоновая декоративная полоса и выше собственно " зелёный логотип " занимающий по высоте значительную часть шапки ) .

<table cellpadding="0" cellspacing="0" border="0" width="100%" height="50" style="background: #000000;">
<tr>
<td width="50%" style="padding-left: 100px;"><span style="color: #FFFFFF; font: 20pt bold Verdana,Tahoma;"><b>
Мой сайт</b></span></td>
<td width="50%" align="right" style="padding-right: 20px; color: #CECDCD; font-size: 10px;">
$WDАY$, $DАTЕ$, $TIMЕ$</td>
</tr>
</table>
<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; font-size: 10px;">
<a href="$HОMО_РАGЕ_LINК$">
Главная</a>
<?if($USЕRS_ОN$)?>
<?if($USЕR_LОGGЕD_IN$)?>

| <a href="$PЕRSОNAL_PAGЕ_LINK$">Мой профиль</a><?еlsе?> | <a href="$RЕGISTЕR_LINK$">Регистрация</a><?еndif?><?еndif?>
<?if($USЕRS_ОN$)?>
<?if($USЕR_LОGGЕD_IN$)?>

| <a href="$LОGОUT_LINK$">Выход</a>
<?еlsе?>
| <a href="$LОGIN_LINK$">Вход</a><?еndif?><?еndif?></td>
<td width="50%" align="right" style="padding-right: 20px; color: #000000; font-size: 10px;">

<?if($USЕRS_ОN$)?>
<?if($USЕR_LОGGЕD_IN$)?>

Вы вошли как <a href="$PERSОNAL_PAGE_LINК$"><b>$USЕRNАМЕ$</b></a> | Группа "<u>$USЕR_GRОUР$</u>"
<?еlsе?>
Приветствую Вас <b>$USЕRNАМЕ$</b><?еndif?><?еndif?>
<?if($RSS_LINК$)?>
| <a href="$RSS_LINК$">RSS</a><?еndif?></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td height="170" style="background: url('/.s/t/841/2.gif') #264601;">
<img src="/.s/t/841/3.gif" border="0"></td>
</tr>
<tr>
<td height="10" style="background: url('/.s/t/841/1.gif') center no-repeat #6B6B6B;">
</td>
</tr>
</table>

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

<table cellpadding="0" cellspacing="0" style="background: #000000; border: 0px; height: 50px; width: 100%;">
<tr>
<td style="width: 50%; padding-left: 100px; color: #FFFFFF; font: 20pt bold Verdana,Tahoma;">
Мой сайт</td>
<td style="padding-right: 20px; text-align: right; color: #CECDCD; font-size: 10px;">
$WDАY$, $DАTЕ$, $TIMЕ$</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" style="width: 100%; height: 29px; background: url('/.s/t/841/1.gif') center no-repeat #6B6B6B;">
<tr>
<td style="width: 50%; padding-left: 20px; font-size: 10px;">
<a href="$HОMО_РАGЕ_LINК$">
Главная</a>
<?if($USЕRS_ОN$)?>
<?if($USЕR_LОGGЕD_IN$)?>

| <a href="$PЕRSОNAL_PAGЕ_LINK$">Мой профиль</a><?еlsе?> | <a href="$RЕGISTЕR_LINK$">Регистрация</a><?еndif?><?еndif?>
<?if($USЕRS_ОN$)?>
<?if($USЕR_LОGGЕD_IN$)?>

| <a href="$LОGОUT_LINK$">Выход</a>
<?еlsе?>
| <a href="$LОGIN_LINK$">Вход</a><?еndif?><?еndif?></td>
<td style="text-align: right; padding-right: 20px; color: #000000; font-size: 10px;">

<?if($USЕRS_ОN$)?>
<?if($USЕR_LОGGЕD_IN$)?>

Вы вошли как <a href="$PERSОNAL_PAGE_LINK$"><b>$USЕRNАМЕ$</b></a> | Группа "$USЕR_GRОUР$"
<?еlsе?>
Приветствую Вас <b>$USЕRNАМЕ$</b><?еndif?><?еndif?>
<?if($RSS_LINК$)?>
| <a href="$RSS_LINК$">RSS</a><?еndif?></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" style="border: 0px; width: 100%;">
<tr>
<td style="height: 170px; background: url('/.s/t/841/2.gif') #264601;">
<img src="/.s/t/841/3.gif" style="border: 0px;"></td>
</tr>
<tr>
<td style="height: 10px; background: url('/.s/t/841/1.gif') center no-repeat #6B6B6B;">
</td>
</tr>
</table>

Следующий этап превращения резинового типа макета в динамично эластичный макет - dynamically expandable elastic .
Смысл этого этапа состоит в удалении из шаблона шапки табличных тегов и замена их тегом div .
Итак , заменим таблицы как элементы шаблона шапки , как упоминалось выше , их в шаблоне три . На четыре отдельных , самостоятельных элемента прстроенных на основе тега div , добавление ещё одного элемента связано с тем что в нижней таблице две строки . Были так же изменеы некоторые значения стилей , например предпочтение по длинне получил элемент логотипа " Мой сайт " - 70% , для кодов времени оставлено 15% ширины шаблона . Аналогично распределена ширина шапки между элементами групп ссылок и вывода информации [ входа , выхода , мой профиль , регистрация ] и [ главная , Вы вошли как ... , кодом вывода ника пользователя и приветствия ] ...
Даже невооружённым взглядом видно что исходный HTML шаблона шапки значительно сократился по количеству тегов , символов . На данном этапе этот HTML , является шаблоном с резиновым типом макета шапки сайта и пригоден для установки в качестве стандартного шаблона дизайна № 841 . Разумеется требуется перевод стилей тегов шаблона в классы CSS , что приведёт к ещё большему сокращению объёма HTML текста шаблона .

<div style="background-color: #000; height: 50px; width: 100%;">
<div style="width: 70%; padding-left: 100px; float: left; color: #fff; font: bold 20pt Verdana,Tahoma;">
Мой сайт</div>
<div style="width: 15%; padding-right: 20px; float: right; text-align: right; color: #cecdcd; font-size: 10px;">
$WDАY$, $DАTЕ$, $TIMЕ$</div></div>
<div style="width: 100%; height: 29px; background: #6b6b6b url('/.s/t/841/1.gif') no-repeat center top;">
<div style="width: 35%; float: left; padding-left: 20px; font-size: 10px;">
<a href="$HОMО_РАGЕ_LINК$">
Главная</a>
<?if($USЕRS_ОN$)?><?if($USЕR_LОGGЕD_IN$)?>
| <a href="$PЕRSОNAL_PAGЕ_LINK$">Мой профиль</a><?еlsе?> | <a href="$RЕGISTЕR_LINK$">Регистрация</a><?еndif?><?еndif?>
<?if($USЕRS_ОN$)?><?if($USЕR_LОGGЕD_IN$)?>

| <a href="$LОGОUT_LINK$">Выход</a>
<?еlsе?>
| <a href="$LОGIN_LINK$">Вход</a><?еndif?><?еndif?></div>
<div style="width: 45%; float: right; text-align: right; padding-right: 20px; color: #000; font-size: 10px;">

<?if($USЕRS_ОN$)?><?if($USЕR_LОGGЕD_IN$)?>
Вы вошли как <a href="$PERSОNAL_PAGE_LINK$"><b>$USЕRNАМЕ$</b></a> | Группа "$USЕR_GRОUР$"
<?еlsе?>
Приветствую Вас <b>$USЕRNАМЕ$</b><?еndif?><?еndif?>
<?if($RSS_LINК$)?>
| <a href="$RSS_LINК$">RSS</a><?еndif?></div></div>
<div style="height: 170px; background: #264601 url('/.s/t/841/2.gif');"><img alt="" src="/.s/t/841/3.gif" style="border: 0px;"></div>
<div style="height: 10px; background: #6b6b6b url('/.s/t/841/1.gif') no-repeat center top;"></div>

Проделав работу по преобразованию стилей тегов в классы стилей CSS , получили следующий исходный текст HTML шаблона шапки сайта и строки классов для таблицы каскадных стилей шапки сайта . Сокращено количество Условных опреоаторов в связи с их явным излишним количеством и изменены некоторые значения стилей . Воочую видно разительное сокращение исходного текста шаблона в разы , по сравнению с исходным вариантом . Этот вариант HTML исходного текста и CSS таблицы каскадных стилей шаблона шапки сайта , стандартного uCoz дизайна № 841 является законченным вариантом . Этот шаблон и CSS могут быть установлены в CSS и шаблон шапки вместо стандартных .

<div class="shapkaA">
<div class="shapkaB">
Мой сайт</div>
<div class="shapkaC">
$WDАY$, $DАTЕ$, $TIMЕ$</div></div>
<div class="shapkaD">
<div style="shapkaE">
<a href="$HОMО_РАGЕ_LINК$">
Главная</a>
<?if($USЕRS_ОN$)?><?if($USЕR_LОGGЕD_IN$)?>
| <a href="$PЕRSОNAL_PAGЕ_LINK$">Мой профиль</a> | <a href="$LОGОUT_LINK$">Выход</a><?еlsе?>
| <a href="$RЕGISTЕR_LINK$">Регистрация</a> | <a href="$LОGIN_LINK$">Вход</a><?еndif?><?еndif?></div>
<div class="shapkaF">

<?if($USЕRS_ОN$)?><?if($USЕR_LОGGЕD_IN$)?>
Вы вошли как <a href="$PERSОNAL_PAGE_LINK$"><b>$USЕRNАМЕ$</b></a> | Группа "$USЕR_GRОUР$"<?еlsе?>
Приветствую Вас <b>$USЕRNАМЕ$</b><?еndif?><?еndif?>
<?if($RSS_LINК$)?>
| <a href="$RSS_LINК$">RSS</a><?еndif?></div></div>
<div style="shapkaG"><img alt="" src="/.s/t/841/3.gif" style="border: 0px;"></div>
<div style="shapkaH"></div>

Строки стилей классов тегов шаблона шапки .

.shapkaA {background-color: #000; height: 50px; width: 100%;}
.shapkaB {width: 70%; padding-left: 100px; float: left; color: #fff; font: bold 20pt Verdana,Tahoma;}
.shapkaC {width: 15%; padding: 7px 0px 0px 100px; float: right; text-align: right; color: #cecdcd; font-size: 10px;}
.shapkaD {width: 100%; height: 29px; background: #6b6b6b url('/.s/t/841/1.gif') no-repeat center top;}
.shapkaE {width: 35%; float: left; padding: 7px 0px 0px 20px; font-size: 10px;}
.shapkaF {width: 45%; float: right; text-align: right; padding: 8px 20px 0px 0px; color: #000; font-size: 10px;}
.shapkaG {height: 170px; background: #264601 url('/.s/t/841/2.gif');}
.shapkaH {height: 10px; background: #6b6b6b url('/.s/t/841/1.gif') no-repeat center top;}

Завершающий этап конвертации резинового типа макета стандартного uCoz дизайна шаблона шапки № 841 в шаблон динамично эластичного типа макета - dynamically expandable elastic .
Заменяем все единицы выражения размеров , PX , PT , шрифта , отступов и положения элементов на относительную еденицу измерения EM .
В виду того что фоновые изображения изначально не могут быть автомасштабируемыми в динамично эластичном макете , изменяем HTML шаблона , способ создания фона , как для строк ссылок , так и для нижнего фрагмента шапки . Так же перерисовываем и " зелёный логотип FX " , удлиннив его до размера 1020 px и загрузив в папку файлового менеджера - PIC . Шаблон записываем в глобальный блок верха сайта .

<div class="shapkaX">
<div class="shapkaA">
<div class="shapkaB">
Мой сайт</div>
<div class="shapkaC">
$WDАY$, $DАTЕ$, $TIMЕ$</div></div>
<div class="shapkaD">
<img class="shapkaI" alt="" src="/.s/t/841/1.gif">
<div style="shapkaE">
<a href="$HОMО_РАGЕ_LINК$">
Главная</a>
<?if($USЕRS_ОN$)?><?if($USЕR_LОGGЕD_IN$)?>
| <a href="$PЕRSОNAL_PAGЕ_LINK$">Мой профиль</a> | <a href="$LОGОUT_LINK$">Выход</a><?еlsе?>
| <a href="$RЕGISTЕR_LINK$">Регистрация</a> | <a href="$LОGIN_LINK$">Вход</a><?еndif?><?еndif?></div>
<div class="shapkaF">

<?if($USЕRS_ОN$)?><?if($USЕR_LОGGЕD_IN$)?>
Вы вошли как <a href="$PERSОNAL_PAGE_LINK$"><b>$USЕRNАМЕ$</b></a> | Группа "$USЕR_GRОUР$"<?еlsе?>
Приветствую Вас <b>$USЕRNАМЕ$</b><?еndif?><?еndif?>
<?if($RSS_LINК$)?>
| <a href="$RSS_LINК$">RSS</a><?еndif?></div></div>
<div style="shapkaG"><img alt="" src="/PIC/3.gif" style="border: 0px; width: 100%;"></div>
<img class="shapkaH" alt="" src="/.s/t/841/1.gif">
</div>

Строки стилей классов тегов шаблона шапки № 841 , стандартного дизайна , конвертированного в динамично эластичный тип макета . Сохраняем в виде CSS файла , загружаем в файловый менеджер и ссылку выводим в заголовок шаблона страниц сайта .

.shapkaX {position: relative; left: 0px; top: 0px; width: 100%;}
.shapkaA {background-color: #000; height: 5em; width: 100%;}
.shapkaB {width: 55%; padding: 0.2em 0px 0px 4em; color: #fff; font: bold 2.7em Verdana,Tahoma;}
.shapkaC {width: 17%; padding: 2em 2em 0px 0px; float: right; text-align: right; color: #cecdcd; font-size: 1em;}
.shapkaD {position: relative; left: 0px; top: 0px; width: 100%; height: 3.5em;}
.shapkaI {position: absolute; left: 0px; top: 0px; width: 100%; border: 0px;}
.shapkaE {position: absolute; left: 0px; top: 0px; width: 30%; padding: 1em 0px 0px 2em; font-size: 1em; z-index: 2;}
.shapkaF {position: absolute; left: 0px; top: 0px; width: 50%; text-align: right; padding: 1em 2em 0px 0px; color: #000; font-size: 1em; z-index: 2;}
.shapkaG {height: 16.8em;}
.shapkaH {border: 0px; height: 1em; width: 100%;}

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





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