Динамично эластичный тип макета , страницы сайта - дизайн № 841
Logo Runettex_team_ESQ Mobilis in mobile

Динамично эластичный тип макета - dynamically expandable elastic . mod. 25.09.2011 .
Practical realization of type of a breadboard model dynamically expandable elastic

.
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>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>$SIТЕ_NАМЕ$ - $МОDULЕ_NАМЕ$</title>
<?$МЕТА_DЕSСRIРТIОN$?>
<link type="text/css" rel="StyleSheet" href="/.s/src/css/841.css">
</head>

<body style="background: #333333; margin: 0px; padding: 0px;">
$АDМIN_ВАR$
$GLОВАL_АНЕАDЕR$
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding: 0 10px 0 10px;">
<tr>
<td width="100%" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" align="right" width="191" style="padding-right: 9px; background: url('/.s/t/841/4.gif') right repeat-y;">
$GLОВАL_СLЕFТЕR$
</td>
<td valign="top" style="padding: 10px;">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td>
$СОNТЕNТ$
</td>
</tr>
</table>
</td>
<td valign="top" align="left" width="191" style="padding-left: 9px; background: url('/.s/t/841/9.gif') left repeat-y;">
$GLОВАL_DRIGНТЕR$
</td>
</tr>
</table>
</td>
</tr>
</table>
$GLОВАL_ВFООТЕR$
</body>

</html>
Далее из исходного текста шаблона страниц сайта , удаляем все устаревшие теги , переводим их в стили тегов которые в последствии будут переведены в классы связывающие теги с таблицей каскадных стилей - CSS , удаляем лишнее и вообще всё переводим в стили тегов .
В результате получаем этот HTML текст . В принципе различий мало .
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>$SIТЕ_NАМЕ$ - $МОDULЕ_NАМЕ$</title>
<?$МЕТА_DЕSСRIРТIОN$?>
<link type="text/css" rel="stylesheet" href="/.s/src/css/841.css">
</head>

<body style="background: #333333; margin: 0px; padding: 0px;">
$АDМIN_ВАR$
$GLОВАL_АНЕАDЕR$
<table cellpadding="0" cellspacing="0" style="width: 100%; border: 0px; padding: 0px 10px 0px 10px;">
<tr>
<td style="width: 100%; text-align: center;">
<table cellpadding="0" cellspacing="0" style="width: 100%; border: 0px;">
<tr>
<td style="width: 191px; text-align: right; padding-right: 9px; vertical-align: top; background: url('/.s/t/841/4.gif') right repeat-y;">
$GLОВАL_СLЕFТЕR$
</td>
<td style="padding: 10px; vertical-align: top;">
<table cellpadding="10" cellspacing="0" style="width: 100%; border: 0px;">
<tr>
<td>
$СОNТЕNТ$
</td>
</tr>
</table>
</td>
<td style="width: 191px; text-align: left; padding-left: 9px; vertical-align: top; background: url('/.s/t/841/9.gif') left repeat-y;">
$GLОВАL_DRIGНТЕR$
</td>
</tr>
</table>
</td>
</tr>
</table>
$GLОВАL_ВFООТЕR$
</body>

</html>
Следующий этап превращения резинового типа макета в динамично эластичный макет - dynamically expandable elastic .
Смысл этого этапа состоит в удалении из шаблона страниц сайта модуля редактора страниц табличных тегов и замена их тегом div . Одну таблицу оставим , как каркас для размещения элементов колонок и содержания страницы .
На данном этапе этот HTML , является шаблоном с резиновым типом макета страниц сайта и пригоден для установки в качестве стандартного шаблона дизайна № 841 . Разумеется требуется перевод стилей тегов шаблона в классы CSS , что приведёт к ещё большему сокращению объёма HTML текста шаблона . Стандартные классы в шаблоне , их названия сменим на свои и где это необходимо дополним стилями тегов из шаблона .
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>$SIТЕ_NАМЕ$ - $МОDULЕ_NАМЕ$</title>
<?$МЕТА_DЕSСRIРТIОN$?>
<link type="text/css" rel="stylesheet" href="/.s/src/css/841.css">
</head>

<body style="background: #333333; margin: 0px; padding: 0px;">
$АDМIN_ВАR$
$GLОВАL_АНЕАDЕR$
<div style="width: 100%; border: 0px; padding: 0px 10px;">
<table style="width: 100%; border: 0px; border-collapse: collapse;">
<tr>
<td style="width: 191px; text-align: left; padding-right: 9px; vertical-align: top; background: url('/.s/t/841/4.gif') right repeat-y;">
$GLОВАL_СLЕFТЕR$
</td>
<td style="padding: 10px; vertical-align: top;">
$СОNТЕNТ$
</td>
<td style="width: 191px; text-align: right; padding-left: 9px; vertical-align: top; background: url('/.s/t/841/9.gif') left repeat-y;">
$GLОВАL_DRIGНТЕR$
</div>
$GLОВАL_ВFООТЕR$
</body>

</html>
Проделав работу по преобразованию стилей тегов в классы стилей CSS , получили следующий исходный текст HTML шаблона страниц сайта и строки классов для таблицы каскадных стилей страниц сайта . HTML заметно сократился , по сравнению с исходным вариантом .
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>$SIТЕ_NАМЕ$ - $МОDULЕ_NАМЕ$</title>
<?$МЕТА_DЕSСRIРТIОN$?>
<link type="text/css" rel="stylesheet" href="/.s/src/css/841.css">
</head>

<body>
$АDМIN_ВАR$
$GLОВАL_АНЕАDЕR$
<div class="indexA">
<table class="indexB">
<tr>
<td class="indexC">
$GLОВАL_СLЕFТЕR$
</td>
<td class="indexD">
$СОNТЕNТ$
</td>
<td class="indexE">
$GLОВАL_DRIGНТЕR$
</div>
$GLОВАL_ВFООТЕR$
</body>

</html>
Строки стилей классов тегов шаблона страниц сайта модуля редактора страниц .
body {background-color: #333; margin: 0px; padding: 0px; width: 100%; height: 100%;}
.indexA {width: 100%; border: 0px; padding: 0px 10px;}
.indexB {width: 100%; border: 0px; border-collapse: collapse;}
.indexC {width: 191px; text-align: left; padding-right: 9px; vertical-align: top; background: url('/.s/t/841/4.gif') right repeat-y;}
.indexD {padding: 10px; vertical-align: top;}
.indexE {width: 191px; text-align: right; padding-left: 9px; vertical-align: top; background: url('/.s/t/841/9.gif') left repeat-y;}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>$SIТЕ_NАМЕ$ - $МОDULЕ_NАМЕ$</title>
<?$МЕТА_DЕSСRIРТIОN$?>
<link type="text/css" rel="stylesheet" href="/.s/src/css/841.css">
</head>

<body>
$АDМIN_ВАR$
$GLОВАL_АНЕАDЕR$
<div class="indexA">
<table class="indexB">
<tr>
<td class="indexC">
<div class="indexF">
<img class="indexM" alt="" src="/PIC/4.gif">
 <div class="indexG">
$GLОВАL_СLЕFТЕR$
</div></div>
</td>
<td class="indexD">
$СОNТЕNТ$
</td>
<td class="indexE">
<div class="indexF">
<img class="indexN" alt="" src="/PIC/9.gif">
<div class="indexL">
$GLОВАL_DRIGНТЕR$
</div></div>
</td>
</tr>
</table>
</div>
$GLОВАL_ВFООТЕR$
</body>

</html>
Строки стилей классов тегов шаблона страниц сайта модуля редактора страниц .
body {background-color: #333; margin: 0px; padding: 0px; width: 100%; height: 100%;}
.indexA {width: 100%; border: 0px; padding: 0px 1em;}
.indexB {width: 100%; border: 0px; border-collapse: collapse;}
.indexC {width: 18.5%; text-align: left; padding-right: 1em; vertical-align: top;}
.indexF {position: relative; left: 0px; top: 0px; width: 100%;}
.indexM {position: absolute; right: 0px; top: 0px; width: 1em;}
.indexG {position: absolute; left: 0px; top: 0px; width: 100%; z-index: 2;}
.indexD {padding: 1em; vertical-align: top;}
.indexE {width: 18.5%; text-align: right; padding-left: 1em; vertical-align: top;}
.indexN {position: absolute; left: 0px; top: 0px; width: 1em;}
.indexL {position: absolute; left: 0px; top: 0px; width: 100%; z-index: 2;}
В результате получим такой вид шаблона страниц сайта .
Данный HTML шаблона cтандартного дизайна uCoz # 841 , динамично эластиного типа макета установлен на сайте :

• Сайт runetexpo.clan.su

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