Смысл этого этапа состоит в удалении из шаблона шапки табличных тегов и замена их тегом 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 , динамично эластиного типа макета установлен на сайте :
ВНИМАНИЕ ! Непосредственно копированием исходный HTML текст ставить из примеров в шаблон нельзя !