Верстание шаблонов от а до я, Все что знаю - здесь :) Опции

[JIopD]

Здравствуйте ! Вот давно хотелось поведать обычным пользователям АС, основные принципы верстки шаблонов, "без наворотов" так сказать. Без не понятных и не кому не нужных умных терминов и техник. Да я написал пару статей по таблицам, но этого очень мало, да и сразу понять тот материал тоже сложновато. Потому расскажу с самого начала, так ска-ть.
Сам я не претендую не на какие звания, потому что я знаю далеко не все, но то чем я владею — с вами поделюсь. ( Мы не Слаед) Т.е как есть, так и расскажу. Потому как сам осваивал это дело обычным методом тыка и чрезмерным любопытством к созданию сайтов. Просто в один прекрасный момент мне жутко стало интересно — как же оно работает? Я всегда считал что это жутко сложно, что нужно долго и нудно учить и читать. Что, в общем я «не осилю». Это далеко не так, поверьте. Абсолютно нечего страшного в этом нет и не было некогда. Скажу только одно — я освоил верстание ТОЛЬКО МЕТОДОМ НАУЧНОГО ТЫКА! Я не читал не какой литературы вообще! Да признаюсь может я не знаю точных определений и терминологии, да и методы мои может не очень верны.... НО! Поверьте лучше самому разобраться чем спросить у кого-то, да, конечно, это путь не легкий — НО! Опыта вы получите куда больше, да и метод самообразование, все запоминается в отличии от советов знающих, хотя последним тоже стоит пользоваться. Если вы решили разобраться самому, далее не читайте

Ладно не буду больше напрягать, ведь тема совсем не о том... и так, что вам нужно для начала?
Macromedia Dreamweaver MX 2004 (ДА! Можно и старше но сам до сиг пор юзаю именно эту версию, и считаю ее лучшей )
TopStyle3 — отличная программа для работы с Css.

Считаю что начинать учение в обычном блокноте — глупость! Конечно можно, но это очень непросто сделать обычному человеку, не владеющему основными принципами верстки. Ведь согласитесь сложно понять то чего не видишь. Вот и используя визуализацию Дримвивера можно увидеть то что делаешь (это касается только табличной верстки)

Понятие и структура шаблонов Антислаеда.

И так с чего же мне начать, хм... Ах да, давайте начнем с простого понятия - «шаблон» - ЧТО ЭТО ТАКОЕ?
Шаблон — исполняет функцию оболочки(обертки) для генерируемого PHP скриптами контента, в данном случае системой (anti) Slaed То есть это средство стилизации контента.

Что нам говорит всеми нами нелюбимый Педро?
Чтобы создать новый шаблон, рекомендуется скопировать папку Default. И переименовав работать с ее содержимым.
Ну может не совсем дословно но в общем так написано в Html_Content'е.
Слушаясь его совета копируем папку Default, переименовываем ее в любое название. НО! Если название содержит более двух слов, рекомендуется между ними ставить символ _ Пример названия папки шаблона:
Super_duper_design
После этого заходим в папку и смотрим:
В папке содержится несколько хтмл-файлов, один Css и папка images.
Ну если с папкой images вопросы не возникают (это набор графики используемых шаблоном... т.е. Сайтом), да и с Css все ясно (это набор стилей, используемых шаблоном и движком, например: шрифты, их размер, цвет и т.д, вообще сейчас все что только можно туда загоняют для увеличения скорости, ну мы еще к этому вернемся...), то с html файлами есть непонятки. Зачем они? - спросит обычный асовец, а фиг его знает — пошучу я )) Ладно шутки в сторону:
Для начала я приведу обычную схему построения шаблонов(в основном использующую в антислаеде)



(IMG:http://artiver.ru/verstka/m1.gif)


Рисунок 1, показывает весь принцип построения шаблонов, и даже человеку далекому от этого может многое сказать.


Глядя на рисунок откроем файл index.html при помощи предустановленого Дримвивера. Переключаемся на визуальное представление (Кнопочка Design, что находится рядом со Split и Code)
И что в итоге мы видим?


(IMG:http://artiver.ru/verstka/m2.gif)

По большому счету то же, что и на моей схеме, только с тегами и hr-рами, столь любимыми Эдуардом
Итак индекс файл — это общая обертка шаблона, именно в индексе задается общий дизайн, фоны, логотипы...
Вот только понятные нам слова типа: левый блок — заменены тегами {%BLOCKS left%} В общем эти теги, не что иное - как ячейки в которые наш движок помещает информацию отображаемую на сайте в левых, правых и т.д. блоках. Для каждого блока в папке шаблона содержится отдельный html файл, в котором можно описать дизайн сего блока индивидуально. (Об этом подробнее мы еще успеем поговорить)
Для начала объясню за что отвечает каждый тег в файле index.html и привязанные к ним остальные файлы шаблона:
{%BLOCKS banner%} - это системный тег(делее - стег) который в основном используется для вывода верхнего баннера (админка-блоки и баннеры-баннер с верху) Т.е. То что вы напишете в админки для баннера вверху, то и будет выводить этот стег.
{%BLOCKS left%} - тег выводящий контент который описывается в файле block-left.html в папке с шаблоном. Т.е. Все что написано в этом файле будет выводить этот стег:
Что же выводит файл block-left.html? Посмотрим: открываем этот файл в дримвивере и смотрим в код:

<fieldset><legend>$title</legend><table width="165" border="0" cellspacing="0" cellpadding="3"><tr><td>$content</td></tr></table></fieldset><br>

Мы имеем несколько стегов и таблицу, что значят эти теги?:
$title — оглавление блока.
$content — содержание блока.

Выводы видны по рисунках 3-4:

(IMG:http://artiver.ru/verstka/m3.gif)

Один из левых блоков на сайте

(IMG:http://artiver.ru/verstka/m4.gif)

Один из левых блоков, схема согласно кода файла block-right.html

Как вы оформите файл block-left.html - то и получите в итоге на сайте от этих блоков. (об этом позже)


{%BLOCKS right%} - тоже что и {%BLOCKS left%} только файл отвечающий за оформление этого стега block-right.html в папке шаблона.

Знаю что повторюсь, но после рассказа про правый и левый блок, хочу разжевать информацию: итак, движок дает информацию заданную в админке для одного из этих блоков, потом сея инфа обрабатывается файлами block-right.html и block-left.html — где описывается их общий стить, а после этого сами блоки вставляются в шаблон посредством тегов {%BLOCKS left%} и {%BLOCKS right%} в файле index.html... думаю по этой части уже вопросов не будет ))

Идем далее:

{%BLOCKS message%} - это тег выводящий информацию которую пишет администратор в пункте админке движка, Сообщения. Его дизайн описывается в файле message-box.htm и тоже имеет два стега:

$title — оглавление блока.
$content — содержание блока.

{%BLOCKS center%} - этот стег выводит блок по центру. (админка-блоки и баннеры-По центру вверху) Его дизайн описывается в файле block-center.html в папке шаблона. Имеет те же стеги:

$title — оглавление блока.
$content — содержание блока.

{%BLOCKS down%} - этот стег выводит блок снизу. (админка-блоки и баннеры-По центру снизу) Его дизайн описывается в файле block-down.html в папке шаблона. Имеет те же стеги:

$title — оглавление блока.
$content — содержание блока.

{%MODULE%} - это контент который выводится в модулях сайта... Т.е. Например есть модуль файлы, - если вы зайдете в этот пункт на сайте, то вся информация которую вы увидите по центру в нем будет выводится этим тегом. (этот тег относится ко всем модулям) Его дизайн описывается в файлах table-open.html и table-close.html, код этого тега открывается в файле open а закрывается в close ! Не имеет стегов, потому как выводит только контент. (подробнее читайте ниже)
{%BLOCKS foot%} - это стег выводящий в основном нижний баннер. (админка-блоки и баннеры-Нижний баннер)
{%BLOCKS time%} - стег выводит информацию о генерация страницы, и обращениях в базу данных. Этот стег функционален, вы можете включить или выключить вывод этих данных в админке — конфигурации. Многие пользователи для удобности просто «комментируют» этот стег, таким образом скрывая эту инфу со страницы сайта, но она видна только если посмотреть ее код.
За комментированный тег выглядит таким образом: <!-- {%BLOCKS time%} -->
{%LICENSE%} - тег выводящий информацию копирайта. Меняется в админке-конфигурация в самом низу. В случае со Слаедом, не меняется, а взламывается. ))) Подробнее об этом писал Халиф...
Остальные теги в файле index'а вам в общем не нужны.

Теперь объясню предназначения остальных файлов в папке шаблона, которые мы не затронули:

-basic.html — этот файл оформление новостей, статей и файлов. Содержит стеги:

$title — оглавление.
$topicimage — это картинка категории новости\файла\статьи.
$content — вообще по идее тег должен называться precontent, так как это демо текст — т.е. Кусочек текста, который полностью выводится при нажатии на «подробнее».
$morelink — этот тег выводит вышеупомянутую ссылку «подробнее» и другую информацию типа: кто разместил, рейтинг и т.д.

-basic-Shop.html — точная копия basic.html, с той же функциональностью. Файл используется для стилизации модуля магазина.

-comment.html — этот файл шаблона оформляет все комментарии на сайте.

Имеет свои стеги:
$name — имя комментирующего.
$info — дата размещения комментария.
$avatar — аватара комментирующего.
$text — текст комментария.
$rate — рейтинг комментирующего.
$link — функции комментария. ( в основном админ-функции)

Не забывайте! — вы можете избавится от ненужной информации, просто удаляя необходимый стег.

Реализацию подробнее вы можете посмотреть на рисунках, без комментариев — по моему все ясно:

(IMG:http://artiver.ru/verstka/m5.gif)


Вид на сайте.

(IMG:http://artiver.ru/verstka/m6.gif)

Визуальный вид кода в дримвивере.


-search.html — отвечает за дизайн поиска. Кстати используется во всех модулях где присутствует поиск вверху. Таких как: файловый архим, документация, новости и тому подобное. Включает в себя форму поиска и стеги:

$name — имя модуля в котором используется.
$navi — кнопки навигации модуля. Такие как: лучшее, популярное, добавить...

В принципе не вижу смысла опять размещать картинки, откройте файл search.html в дримвивере и посмотрите — все предельно просто. Особенно если вы смотрели текст выше )))


warning.html — этот файл отвечает за дизайн блока предупреждений движка. Сравниваем картинки и делаем выводы (IMG:http://antislaed.net/style_emoticons/default/smile.gif)


(IMG:http://artiver.ru/verstka/m7.gif)

до (IMG:http://antislaed.net/style_emoticons/default/smile.gif)


(IMG:http://artiver.ru/verstka/m8.gif)

после (IMG:http://antislaed.net/style_emoticons/default/smile.gif)

ЗЫ: Если возникнут вопросы по структуре, спрашивайте. Ответы будут идти как Faq к статье.

Начинаем смотреть в код.

Итак, разобравшись со структурой шаблонов АС, начинаем потихоньку смотреть, собственно, в код (IMG:http://antislaed.net/style_emoticons/default/smile.gif) И что мы там видим? Открываем главный файл шаблона... какой? Перечитайте статью сначала (IMG:http://antislaed.net/style_emoticons/default/smile.gif) Подсказка, он начинается на букву i... да - верно!, index.html. ... TypoSlaed — возьми пирожок с верхней полки, протри и положи на место (IMG:http://antislaed.net/style_emoticons/default/smile.gif) Итак, постараюсь обяснить смысл написаного в коде от начала и до конца, именно шаблона Default, позже я научу вас основным функциям программы Дримвивер, мы попробуем переделать шаблон под себя, и научимся оптимизации с помощью Css.
Открытый код индекс странички выглядит следующим образом:

КОД

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
{%HEAD%}
</head>

<script language="JavaScript" type="text/javascript">
<!--
function bookmark() {
    if (window.sidebar) {
        window.sidebar.addPanel("$sitename", "$homeurl","");
    } else if (document.all) {
        window.external.AddFavorite("$homeurl", "$sitename");
    }
}
// -->
</script>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="center" valign="top">
<hr><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
<td height="60" width="50%" valign="middle"><a href="index.php" title="$sitename"><img src="images/logos/$site_logo" border="0" alt="$sitename"></a></td>
<td width="50%" valign="middle" align="right">{%BLOCKS banner%}</td>
</tr></table><hr>
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
<td width="25%"><b>$theuser</b></td>
<td width="75%" align="right"><a href="index.php" title="$s_home"><b>$s_home</b></a> | <a href="index.php?name=Account" title="$s_profil"><b>$s_profil</b></a> | <a href="index.php?name=Recommend" title="$s_recomm"><b>$s_recomm</b></a> | <a href="index.php?name=Contact" title="$s_feed"><b>$s_feed</b></a> | <a href="#" onClick="java script:bookmark();" title="$s_favoriten"><b>$s_favoriten</b></a> | <b>$startseite $s_startseite</b></a></td></tr></table><hr>
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center"><tr>
<td style="vertical-align: top; width: 165px;">
{%BLOCKS left%}
</td><td style="vertical-align: top; width: 100%;">
{%BLOCKS message%}
{%BLOCKS center%}
{%MODULE%}
{%BLOCKS down%}
</td><td style="vertical-align: top; width: 165px;">
{%BLOCKS right%}
</td></tr></table><hr><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
<td align="center"><a href="index.php" title="$s_home"><b>$s_home</b></a> | <a href="index.php?name=News" title="$s_news"><b>$s_news</b></a> | <a href="index.php?name=Album" title="$s_album"><b>$s_album</b></a> | <a href="index.php?name=FAQ" title="$s_faq"><b>$s_faq</b></a> | <a href="index.php?name=Pages" title="$s_pages"><b>$s_pages</b></a> | <a href="index.php?name=Recommend" title="$s_recomm"><b>$s_recomm</b></a> | <a href="index.php?name=Contact" title="$s_feed"><b>$s_feed</b></a></td></tr></table><hr>
{%BLOCKS foot%}
<br /><font class="copyright">
{%BLOCKS time%}
<br />
{%LICENSE%}
</font>
{%BLOCKS variables%}
{%BLOCKS query%}
</body></html>

Итак если со системными тегами мы разобрались и уже ориентируемся где блок слева и справа, то остальной код нам будет непонятен, сейчас постараюсь объяснить его суть:

Для начала запомните что хтмл код — потоковый, т.е. в какой последовательности вы пишите, в такой он и будет отображаться. И еще этот код нечего не рассчитывает в отличии от ПХП, он только выводит заданную информацию, описанную в его коде.
Большую часть текста странички занимает собственно текст, который мы видели в окне браузера. Но что это за слова с символами > (больше) < (меньше) окружающие их?
Эти слова называются тегами. Теги применяются для форматирования текста и вставки в текст нетекстованных элементов: графики, флеш, и другого. Одним словом:
теги - форматируют текст (информацию) внутри хтмл документа.

Самые простые примеры тегов (парные)

Выделение текста жирным: <b>текст</b> - из примера видно что в начале открывается тег <b> (выделение жирным) потом следует текст которому задается это форматирование, и после его окончания, тег </b> закрывается. После закрытия тега </b> весь последующий текст будет иметь свой или стандартный формат. ( текст )

<i>текст</i> - в этом случае текст будет курсивным. (текст )
<u>текст</u> - подчеркнутый текст. (текст)

Если вы до этого обнялись на форумах, например на нашем (IMG:http://antislaed.net/style_emoticons/default/smile.gif) То вам будут знакомы эти теги, бб-теги исполняющиеся на форумах, очень похожи на хтмл, только в хтмл вместо квадратных бб дужек [тег] , используются свои <тег> (Хотя бб код, это не что иное как упрощенный хтмл код)

<a href="http:www.antislaed.net">Ссылка</a> - это просто код ссылки, как мы видим, сам тег ссылки пишется так : <a href="адрес ссылки">Название ссылки</a> Кстати, кавычки можно и не использовать а писать просто: <a href="адрес ссылки">Название ссылки</a> Если вы хотите сделать чтобы при нажатии на ссылку, сайт открывался в отдельном окне, просто прибавте параметр target="blank" Пример:
<a href="http:www.antislaed.net" target="blank">Ссылка</a>

Одним словом парный тег — это тег, каждому открытому тегу которого, должен быть парный, закрывающий его.


Одиночный тег — это тег который не имеет пары, т.е. они не форматируют текст а просто выводят какой то контент и закрываются.

Самые простые примеры тегов (одиночных)

<img src="картинка.gif" /> - этот тег выводит на страничку картинку которая находится в папке со страницей. Знак /> - закрытия можно и не писать. Еще рекомендуется писать параметры
width- ширины и
height - высоты картинки.
Так как говорит добрый дядя Телетехника :

Всё движется в том случае если не верно сделан дизайн. Не поставь размеры на картинку и ты увидиш такое да и загрузка страницы увеличится. А почему? Да потому что браузер 2!!! раза будет смотреть а нет ли размеров на картинку.

С чем я абсолютно согласен ))
Пример:
<img src="картинка.gif" width="100" height="200" /> Да все значения по идее должны идти в лапках, но это не принципиально, хотя и рекомендую писать все таки в них (IMG:http://antislaed.net/style_emoticons/default/wink.gif)

<hr> - это горизонтальная линия, которая кстати используется в этом шаблоне.

<br /> - это переход на следующую строку

и так далее... подробнее на тегах останавливаться не хочется, так как это Огромный объем информации, думаю работающим в ворде, освоится будет очень легко — так как форматирующие теги очень похожи и по смыслу и по виду на обычные вордовские функции, например тег:
<center>текст</center> - просто центрует текст.

Теперь хочется объяснить сам принцип построения хтмл кода:
Смотрим в первые 5 строк нашего кода (index.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> - довольно старый тег, который отсылает нас к правилам построения хтмл страниц, просто игнорируйте его...
<html> - это главный тег хтмл страницы, и весь остальной хтмл код пишется только между этими тегами <html>остальной код</html> (спуститесь в низ странички кода и увидите что в конце страницы тег </html> закрывается)
-А почему в остальных хтмл-файлах шаблона не используется этот тег? В принципе, все кто прочел текст выше, должны бы уже давно знать, но ладно, объясню (IMG:http://antislaed.net/style_emoticons/default/smile.gif) - мы выяснили что в индекс файл шаблона имеются стеги, которые импортируют информацию с других файлов шаблона и вставляют в индексе...потому там и не нужен этот тег.
<head> - это голова сайта, теги между которыми в основном пишется разная мета информация, типа автора сайта, ключевые слова сайта, ссылки на джава скрипты, css файлы и на многое другое...
{%HEAD%} - это стег, который выводит мета-информацию сайта, которая задается в админке.
Кстати, по умолчанию с этого стега, выпадает дефолт ссылка на css файл шаблона:
<link rel="stylesheet" href="templates/Default/style.css" type="text/css"> - вот она эта ссылка в коде уже с генерированной странице, если вы хотите использовать свой css файл то просто исправьте эту ссылку и вставьте ее в индекс файле шаблона, между тегами:
<head>
{%HEAD%}
<link rel="stylesheet" href="templates/$ThemeSel/my.css" type="text/css">
-А что значит templates/$ThemeSel/my.css? - это адрес файла, т.е. корневая папка сайта - templates - «выбраный шаблон» - my.css (ЗАДАЕТСЯ ОБЕЗАТЕЛЬНО!)

</head>

Потом идет небольшой джава-скрипт:

КОД

<script language="JavaScript" type="text/javascript">
<!--
function bookmark() {
    if (window.sidebar) {
        window.sidebar.addPanel("$sitename", "$homeurl","");
    } else if (document.all) {
        window.external.AddFavorite("$homeurl", "$sitename");
    }
}
// -->
</script>

Видно что теги <script> </script> тоже парные (IMG:http://antislaed.net/style_emoticons/default/smile.gif)

<body> - это парный тег, так называемое «тело сайта» В этом теге содержится основной код шаблона. С его помощью когда-то задавали, например беграунд:

<body background="templates/$ThemeSel/images/bg.gif">

или фоновый цвет сайта:

<body bgColor="black">

или даже фоновую музыку! (IMG:http://antislaed.net/style_emoticons/default/smile.gif)

<bgsound src="templates/$ThemeSel/bgsound.mp3" loop=-1> ну по понятным причинам, этого лучше не делать, так как кто захочет ждать пока загрузится фоновая музыка? (IMG:http://antislaed.net/style_emoticons/default/smile.gif) Хотя... если сайт локальный, чем бы и не (IMG:http://antislaed.net/style_emoticons/default/smile.gif)

Да и много чего еще можно реализовать этим тегом, запомните только одно, все функции пишутся только единожды, т.е. например так:

КОД

<body background="templates/$ThemeSel/images/bg.gif" bgsound src="templates/$ThemeSel/bgsound.mp3" loop=-1>
остальной код страницы
</body>

Просто сделали пробел и пошли писать дальше (IMG:http://antislaed.net/style_emoticons/default/smile.gif)

Дальше я просто вставлю текст своих предыдущих статей по таблицам... думаю здесь он будет уже уместным:

Таблицы

Известно что основа вед дизайна состоит из таблиц. Трудно представить каким ещё образом можно реализовать дизайн не используя их. Изначально HTML не поддерживал таблицы ни в каком виде. Несчастные Web-дизайнеры пытались как-то выйти из положения используя текст с за даным форматом и заключая его внутри тегов <PRE></PRE>. Получалось конечно некрасиво но что поделаешь. Теперь же они могут создавать какие угодно таблицы что и делают...
Сейчас таблицы используются не только для представления данных но и как элемент оформления Web-страниц. Благодаря таблицам можно очень точно позиционировать текстовые фрагменты и графику создавать элементы оформления линейки и заливки - отступы и выступы почти как в печатных изданиях. Но пожалуй я больше не буду вас заморачивать всякой чепухой перейдём к практике.
И создадим Web-страницу с таблицей. Пока что достаточно простую.

Самые простые таблицы.

Наша первая таблица будет очень проста: всего несколько строк и столбцов. И будет эта таблица умножения (заодно вспомним правила арифметики...шучу, конечно)

Назовём эту страничку tablo.html
КОД

КОД

<html>
<head>
<title>Таблица умножения</title>
</head>
<body>
<h1>Таблица умножения (от 1 до 5)</h1>
<table border="2">
<tr><td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td</tr>
<tr><td>2</td><td>2</td><td>4</td><td>6</td><td>8</td><td>10</td</tr>
<tr><td>3</td><td>3</td><td>6</td><td>9</td><td>12</td><td>15</td</tr>
<tr><td>4</td><td>4</td><td>8</td><td>12</td><td>16</td><td>20</td</tr>
<tr><td>5</td><td>5</td><td>10</td><td>15</td><td>20</td><td>25</td</tr>
</table>
</body>
</html>

Сохраняем как tablo.html и смотрим результат.
Конечно таблица она не очень красива, но сейчас нам важно уяснить сам принцип. А раскрасить ее мы всегда успеем. Простейшая таблица представляет собой множество вложенных друг в друга тегов, образующих сложную многоуровневую структуру. Сначала парой тегов <table> и </table> определяется сама таблица, потом внутрь вкладываются строки, определяемые парой тегов <tr> и </tr>. Внутрь каждой строчки вкладываются ячейки, определяемые парами тегов <td> и </td>. И если вы внимательно посмотрите на приведенный выше листинг, то увидите все это. Собственно, создавать простую таблицу в HTML ничего не стоит. Единственная проблема которая может при этом возникнуть - вы устаните набирать все эти бесконечные вложенные теги. В самом деле сравните объем текста листинга и размеры получившейся таблички. Но HTML-редакторы, работающие по принципу WYYSIWYG, вам помогут...
Итак, разберемся, какими тегами формируется таблица.

Тег таблиц (<table>)

Тег таблицы имеет следующий формат:
<table border="x"> - атрибут border задает толщину рамки таблицы
в пикселях. Если он отсутствует, рамка не видна, но Web-браузер при
отображении таблицы считает, что она имеется. Если дать параметру "x"
атрибуту значение 0, рамки у таблицы не будет вообще.

<table cellpadding="x"> - атрибут cellpadding позволяет задавать размер
в пикселях свободного пространства между рамкой и содержимым ячейки.
Поумолчанию x=1.

<table cellspacing="x"> - атрибут cellspacing позволяет задавать размер в
пикселах свободного пространства между ячейками таблицы.
По умолчани x="2".

<table width="x" heigh="y"> - атрибуты width и heigh позволяют установить
размеры таблицы. Допускается указывать размер и в виде абсолютной величины,
в процентах относительно размеров окна браузера (только не забывайте
добавлять к числу знак "%")
Пример: <table width="100%" heigh="50%">
Если эти атрибуты пропущены, браузер сам задает размеры таблицы так,
чтобы все содержимое поместилось в ней.
Кстати: width-ширина , heigh-высота.
Пример в пикселях:
<table width="155px" heigh="43px">
(оставлять px необезательно)


<table align="x"> - атрибут align задает "обертание" таблицы текстом.
Значения x бывают:
left - это значение заставляет таблицу прижаться к левой границе окна.
right - таблица будет справа.
center - и таблица в центе.


<table bgcolor="x" background="y"> - атрибуты bgcolor и background задают
соответственно цвет фона и адрес фонового ресунка для таблицы.
Примеры:
<table bgcolor="#000000"> - таблица покрашена в черный цвет.
<table background="images/logo.gif"> - рисунок logo является фоновой
картинкой таблицы.

<table bordercolor="x"> - позволяет задать цвет рамки таблицы.
Пример:
<table bordercolor="#000000"> - опять-же рамка таблицы в черном.

<table frame="x"> - атрибут frame определяет, какие части внешней рамки
таблицы будут рисоваться. Доступны следующие значения x :
void - внешний рамки нет вообще(значение по умолчаеию!)
above - рисуется только верхняя линия внешней рамки.
below - рисуется только нижняя линия внешней рамки.
hsides - рисуются только горизонтальные линии внешней рамки, т.е.
верхняя и нижняя.
lhs - рисуется только левая линия внешней рамки.
rhs - рисуется только правая линия внешней рамки.
vsides - рисуются только вертикальные линии внешней рамки, т.е.
левая и правая.
box - рисуются все линии внешней рамки.

<table rules="x"> - атрибут rules задает, как будут рисоваться внутренние
рамки в таблицы. Здесь доступны следущие значения x:
none - никаких внутренних рамок.
rows - рисуются только горизонтальные линии (между строким)
cols - рисуются только вертикальные линии (между столбцами)
all - рисуются все внутринее рамки.

ЗЫ: Атрибуты пишутся в одной строке отделеные пробелами
Пример таблицы:
<table border="1" cellpadding="0" cellspacing="0" width="100" heigh="50">
<tr><td></td></tr></table>

Тег строки

Каждая строка таблицы начинается с метки <tr> и заканчивается меткой </tr>
Метка <tr> может включать следующие атрибуты:

<tr align="x"> - атрибут устанавливает выравнивание текста в ячейках строки.
Допустимые значения x:
left - выравнивание влево.
center - выравнивание по центру.
right -выравнивание вправо.


<tr valign="x"> - атрибут устанавливает вертикальное выравнивание текста в ячейках
строки. Допустимые значения x:
top - выравнивание по верхнему краю.
middle - выравнивание по центру.
bottom - выравнивание по нижнему краю.


Атрибуты bgcolor, bordercolor, height и width ведут себя так же и выполняют те же
функции, что и одноименные атрибуты тега <table> так что не буду повторятся

Тег ячейки

Каждая ячейка таблицы начинается с метки <td> и заканчивается меткой </td>. Как
раз в ячкйках и находится полезное содержимое таблицы.
Метка <td> может включать следующие атрибуты:

<td colspan="x"> - устанавливает "размах" ячейки по горизонтали. Например, colspan=3 означает,
что ячейка простирается на три колонки.

<td rowspan="x"> - устанавливает "размах" ячейки по вертикали. Например, rowspan=2 означает, что ячейка занимает две строки.

Если ячейка таблицы пуста вокруг нее нерисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект (non-breaking space — не разрывающий пробел). Ячейка по прежнему будет пустой, а рамка вокруг нее будет.
Атрибуты bgcolor, bordercolor, align, height и width ведут себя так же и выполняют те же
функции, что и одноименные атрибуты тега <table> и <tr> так что не буду повторятся опять

Тырим шапку АС (IMG:http://antislaed.net/style_emoticons/default/smile.gif)

Думаю, уже прочтя этот материал вы можете определится в индексе шаблона. Ну по крайней мере работу с таблицами думаю вы усвоили. Теперь хочется показать все это на практике. Для начала хочу объяснить принципы разметки шаблона. Шаблоны бывают:

«Резиновые» - это шаблоны которые растягиваются по всему окну браузера и зависят он разрешения монитора. Т.е. При любом разрешении монитора они всегда будут растягиваться на весь экран, игнорируя количество контента которые они в себя включают. У таких шаблонах все основные таблицы имеют ширину 100% (width=100%)

«Заданные» - это шаблоны которые имеют точно заданную ширину и в основном центрируются. В таком случае, основной фон шаблона, будет растягиваться по ширине экрана, а главная таблица сайта — будет идти по центру.

Ну в том или ином случае все равно для удобности и быстроты будут использоваться — тягучки.
Это картинки-беки которые будут иметь ограничение по широте или высоте и которые повторяются. Да объяснить это довольно сложно, попробую показать...вот например нам нужно сделать шапку сайта:


(IMG:http://artiver.ru/verstka/m9.gif)


ДА! Сначала я тоже думал что нужно тупо вставить вот эту картинку в код и все (IMG:http://antislaed.net/style_emoticons/default/smile.gif) Ну это далеко не так. Для этого нам нужно ровно одна таблица и 3 картинки. Первая картинка — будет логотипом.


(IMG:http://artiver.ru/verstka/m10.gif)

Две остальные картинки будут, верхним и нижним гредиентами, которые будут иметь оригинальную высоту, а ширину в 1 пиксель, - почему? да потому что нам не нужна целая картинка, она будет повторятся по ширине. Потом просто создаем таблицу с двумя строками:

КОД

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="109px" background="m11.gif"><div style="padding-left: 22px;"><img src="logo.gif"></div></td>
  </tr>
  <tr>
    <td height="32px" background="m12.gif"> </td>
  </tr>
</table>

Подробнее ознакомитесь с примером, скачав его.  premer.rar ( 16.15 Кб ) Кол-во загрузок: 192


Вот по такому принципу делается весь шаблон.


Ладно я немного уже под устал, продолжение обязательно будет, я планирую написать примерную статью создания шаблона, а также материал по работе с CSS. Ждите в ближайшее время. Coming Soon...

PS: Задаем вопросы, жмем спасибы =)

[Drozden]

Спсибо огромное!

[SoundLess]

tnx. Слил на винт, огромный респект ;)

[SoundLess]

Надеюсь, пока я рисую макет темы в фотошопе, ты напишешь такойже мануал по CSS и etc. (IMG:http://antislaed.net/style_emoticons/default/wink.gif)

[Yamakasi]

Хорошая штучка, темболее для новичков, будет хорошо если ещё им сюда скинуть словарь тегов )

[bruce]

ребят! объяните, пожалуйста, с чем связан тот факт, что я не могу поставить background на block-left, block-right, comment...
и ещё подскажите, пожалуйста, как можно убрать с модуля News (когда открываешь комментарии) часть, где написано "Файлы Учебники Вопросы и ответы"..... мне это совсем не нужно.... если можно то вообще чтоб сразу "Поиск -> Новость -> Коментарии", т.е. без "Файлы Учебники Вопросы и ответы"
заранее спасибо

[teletehnika]

ребят! объяните, пожалуйста, с чем связан тот факт, что я не могу поставить background на block-left, block-right, comment...

Вообще то это делается в таблице стилей. Для версии 3.2.3 это будет так:
На ходим в left.html строку <table width="165" border="0" cellspacing="1" cellpadding="3" class="bgcolor4">
Вот это класс class="bgcolor4 и отвечает за этот блок (и не только за этот) Что бы изменить только левый блок (фон и др) надо его заменить, ну к примеру на class="bgcolor5 а в таблице стилей добавить .bgcolor5 { background-color: #твой цвет; }
Таким же образом можно сделатьдля правого и центрального блоков.

[bruce]

да нет... с HTML у меня всё хорошо.... учился на "5" =))
я хотел не bgcolor а background image....
но я уже разобрался, всё заработало...
теперь ещё один вопрос... вы будете очень любезны если ответите на него здесь, ибо не знаю куда его написать...
как в блоке Pages сделать так чтобы Статьи отображались в 2 колонки?
СПАСИБО ЗАРАНИЕ!

[JIopD]

bruce
Вопрос абсолютно не поадресу и темболее не к шаблонам относится. В ас технически сделать можно, но нужно кодить в пхп, говори с разработчиками...

[teletehnika]

да нет... с HTML у меня всё хорошо.... учился на "5" =))
я хотел не bgcolor а background image....

Не знаю на что ты учился, я тебе про то и говорил. Там же можно и картинкой ставить background. А если сразу не понял то увы, я не виноват....

[bruce]

я понял... только тупки уже... 3-й день не сплю... =)
но я не каскадными табл делал... а напрямую в коде...
просто у меня опера прожевывала... а ослик нехотел... поэтому кипешь и поднял.. но всё уже благополучно поправлено. =)

[Vix1n]

перезалейте рисунки плз

[JIopD]

Vix1n
Готово (IMG:http://antislaed.net/style_emoticons/default/wink.gif)

[mandriver]

Расскажи пожалуйста как встроить в шаблон вход ? типа чтобы без блока login

[Vix1n]

JIopD
Спасибо (IMG:http://antislaed.net/style_emoticons/default/happy.gif)

[Elf]

JIopD а зачем нужен этот скрипт?

КОД

<script language="JavaScript" type="text/javascript">
<!--
function bookmark() {
    if (window.sidebar) {
        window.sidebar.addPanel("$sitename", "$homeurl","");
    } else if (document.all) {
        window.external.AddFavorite("$homeurl", "$sitename");
    }
}
// -->
</script>

[manyak1988]

Насколько я понял - это java скрипт для добавление сайта в избранное

[QAZ]

вопрос в следующем. Нависовал допустим я для себя дизайн. Но вот с CSS проблемы сколько ни читал нифигакс не понял, мне пример нужен простой.
Вот приклабываю файл BASIC (табличный) и все что нужно для его правильного отображения, пожалуйста кто сможет сделайте для него CSS? просто для примера, чтоб до меня быстрее дошло.

[teletehnika]

Даже при табличной вёрстке тебе никак не обойтись без таблицы стилей CSS потому как туда впихиваем всё что возможно а не оставляем в html файлах. Ещё на заметку. В новых оформлениях от артстудио стали применять несколько файлов CSS, это в корне не верно и сильно тормозит генерирование страниц. Следует использовать ОДИН файл.
QAZ - да почитай повнимательнее, ничего там нет сложного.

[QAZ]

teletehnika блин ну вот такой я человек без конкретного примера не доходит

[GoogleBot]