Шаблон первый ) 3 096 просмотров

ПОКА НЕ ГОТОВО! ) В ПРОЦЕССЕ

"Встречают по одежке… "
— народная мудрость.

Отличный Шаблон — одна из важнейших составляющих "хорошего" сайта. Именно он в больший степени составляет общее впечатление. Плохой Шаблон — Плохой Сайт.

Перед многими возникает вопрос — "Где достать Шаблон для Своего Детища?"
Есть возможность воспользоваться готовыми шаблонами — но при этом будет потеряна оригинальность сайта, так как этот шаблон могут использовать и другие. Можно заказать за н-ное количество денег у тех, кто их делают из денюжку (если есть лишние денюжки). А можно сделать самому! )

Хороший и Красивый Шаблон сделанный своими руками — Это Клева!
У меня и возникла идея — начать их делать самому! )

Вот и решил посвятить пару уроков этому занятию (Для ЧАйников, коим и я являюсь ))), по совету futuristian

Пожалуй начнем!

Урок самый первый и самый простой… Поэтому не будем сильно замарачиваться.
Шаблонов готовым самых разных и для самых разных Движков очень много. Поэтому думаю проще найти готовый и переделать под Instant.

Возьмем готовый Шаблон от Джумлы design4free.org/templates/tp-jobs-plazza.html, предложенный товарищем necromanc. Он довольно-таки прост и думаю нам подойдет (в смысле Шаблон прост а не necromanc)

Добавлю еще… Бывает Верстка Табличная и Верстка Блоками(Блочная или Слоями кто как называет, div — ами проще говоря )))

Будем использовать Табличную Верстку — Как простой вариант реализации(только знание HTML все-равно необходимо). Правда у этого способа есть много Недругов, которые считают этот способ Варварским. )

"Табличная верстка" — название говорит само за себя.
Возьмем наш сайт и представим, что он состоит из таблиц.

В нашем случае шаблон "нерезиновый".
Я представил что Шаблон состоит из такой вот таблицы

Писать весь Шаблон с Нуля не имеет смысла и Задача наша стоит в "Натягивании" всей "Визуальный красоты" на шаблон что стоит по умолчанию в Instante (проще говоря делаем так, чтоб Дефолтный шаблон выглядил не как дефолтный, а так как нам надо, то есть изменяем его до неузнаваемости =))

Я ставлю на своем компе Денвер(тот кто не знает — это такая штучка, для создания Сайтов на своем компьютере локально) и устанавливаю Instant.
Теперь можно начать Менять Шаблон так, как мы хотим.

Все шаблоны Instanta хранятся в Папке templates там мы и находим нашу папку с дефолтным шаблоном _default_
В папке с шаблоном Много файлов и папок, Которые видимо много для чего нужны )))
Самый главный Файл — template.php его менять мы и будем )

Есть много редакторов PHP, при желании можно использовать и блокнот (но лучше не надо) Я использую программу PHP Expert Editor.

Открываем template.php и видим код. Все что есть — нам не надо, у нас будет свое.
Удаляем весь Текст между Тэгами <body> и </body>. Сохраняем. Смотрим на наш сайт, что у нас получилось.

Видим голубенький фон. Откуда он? Ведь мы же все удалили? Петрушка в том что в нашем шаблоне Подключен Файл со стилями

 
<link href="/templates/_default_/css/styles.css" rel="stylesheet" type="text/css" />

а в этом файле сказано что Фон у нас Голубой!
Находим этот файл styles.css
и заменяем в нем следующую строчку

background:url(/templates/_default_/images/bg.jpg) repeat-x #BECFDF;

на

background:url(/templates/_default_/images/bgbody.gif) repeat-x #FFFFFF;

Сохраняем. И закидываем файл bgbody.gif из взятого для примера шаблона в наш, в папку images.
Тем самым мы зададим фон всему нашему сайту. Вникать в подробности стилей пока не будем, скажу только что наш рисунок bgbody.gif размножается по горизонтали (repeat-x) и вся область, которую не заполняет этот рисунок, имеет белый цвет (#FFFFFF)

Получаем

Теперь между тегами <body> и </body> создадим нашу таблицу

<table width="970px" height="100%" border="1" cellpadding="0" cellspacing="0" align="center">
	<tr> <!--  Первая строчка !-->
		<td colspan="3" height="30px">
		</td>
	</tr> <!-- Конец. Первая строчка !-->
	<tr>  <!-- Вторая строчка !-->
		<td colspan="3" height="120px">
		</td>
	</tr>  <!-- Конец Вторая строчка !-->
	<tr> <!-- Третья Строчка!-->
		<td colspan="3" height="30px">
		</td>
	</tr> <!-- Конец. Третья строчка !-->
	<tr> <!-- Пятая Строчка!-->
		<td>
		</td>
		<td>
		</td>
   		<td>
		</td>
	</tr> <!-- Конец. Пятая строчка !-->
	<tr> <!-- Шестая Строчка!-->
		<td colspan="3"height="130px">
		</td>
	</tr> <!-- Конец. Шестая строчка !-->
	<tr> <!-- Седьмая Строчка!-->
		<td colspan="3" height="50px">
		</td>
	</tr> <!-- Конец. Седьмая строчка !-->
</table>

Думаю все знают html и все поняли как я создал эту таблицу.

Сохраняем и смотрим.

Это я вижу в своей Мазиле, в експлорере картина будет немного другая, но нам это не помешает.

Теперь сделаем так чтоб у нас отображалась хоть какая-то информация.

Все знают что модули отражаются в своих позициях left, right, top, footer и прочих.
Сделаем так чтоб модули позиции left, right отображались в пятой строчке в первой и третьей ячейке, а во второй информация сайта.

Для этого в первую ячейку вставляем код

<?php cmsModule("left"); ?>

во вторую ячейку вставляем код

<?php cmsBody(); ?>

в третью ячейку вставляем код

<?php cmsModule("right"); ?>

И устанавливаем ширину для второй ячейки 100% и выравнивание для этой всей строчки сверху valign="top"
Получаем такой код

<table width="970px" height="100%" border="1" cellpadding="0" cellspacing="0" align="center">
	<tr> <!--  Первая строчка !-->
		<td colspan="3" height="30px">
		</td>
	</tr> <!-- Конец. Первая строчка !-->
	<tr>  <!-- Вторая строчка !-->
		<td colspan="3" height="120px">
		</td>
	</tr>  <!-- Конец Вторая строчка !-->
	<tr> <!-- Третья Строчка!-->
		<td colspan="3" height="30px">
		</td>
	</tr> <!-- Конец. Третья строчка !-->
	<tr> <!-- Четвертая Строчка!-->
		<td colspan="3" height="120px">
		</td>
	</tr> <!-- Конец. Четвертая строчка !-->
	<tr valign="top"> <!-- Пятая Строчка!-->
		<td>
			<?php cmsModule("left"); ?>
		</td>
		<td width="100%">
			<?php cmsBody(); ?>
		</td>
   		<td >
	   		<?php cmsModule("right"); ?>
		</td>
	</tr> <!-- Конец. Пятая строчка !-->
	<tr> <!-- Шестая Строчка!-->
		<td colspan="3"height="130px">
		</td>
	</tr> <!-- Конец. Шестая строчка !-->
	<tr> <!-- Седьмая Строчка!-->
		<td colspan="3" height="50px">
		</td>
	</tr> <!-- Конец. Седьмая строчка !-->
</table>

Смотрим:

И видим что модули какие-то нетакие хоть и отображаются.
Дело в том что для модулей должны задаваться свои стили. Поставим те что стоят у шаблона по умолчанию. Для этого в тегах ячеек вставим следующие коды id="left", id="center" и id="right" (как сделать свои стили для модулей — рассмотрим в следующих уроках)

<tr valign="top" > <!-- Пятая Строчка!-->
		<td id="left">
			<?php cmsModule("left"); ?>
		</td>
		<td width="100%" id="center">
			<?php cmsBody(); ?>
		</td>
   		<td id="right">
	   		<?php cmsModule("right"); ?>
		</td>
	</tr> <!-- Конец. Пятая строчка !-->

Смотрим

точно также расставим позиции top (4 строка таблицы), hmenu (3 строка таблицы), bottom (6 строка)
Можно самим придумать новые позиции, достаточно лишь дописать их названия в файле positions.txt

10 комментариев

Реклама #

14 лет назад #

отлично тоже хочу научится шаблоны делать

welldi 14 лет назад #

div грузится быстрее %:)

[ECHO]ALiDozer 14 лет назад #

Я требую продолжения банк... тьфу, урока

Anabiotick 14 лет назад #

Табличная верстка - это не варварский метод, он просто не совсем правильный. Самый правильный - divный метод? а таблицы в нем можно использовать как раз по назначению, именно для оформления таблиц, хотя некоторые чрезмерно усердные divники для оформления таблиц стараются использовать контейнеры, а это тоже не верно smile

. Divная верстка не только правильная, но и более легкая, стили браузер на сеанс грузит лишь один раз и по этой причине кода страниц ему приходится подгружать меньше, отсюда и размеры самих шаблонов меньше, а следовательно и скорость подгрузки, как правильно заметил welldi.
Но вот заковыка, divная верстка требует большой кропотливости, отличного знания css и html (практически всех его версий), то есть под силу не каждому с наскоку. А вот верстка страниц с помощью таблиц, хоть и неправильная, но подойдет для любого новичка smile

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

InstantCMS 14 лет назад #

совсем наоборот, таблицы везде выглядят одинаково, в отличии от div+css
например при указании ширины (width:100px) и отступов (padding:10px) для дива, в IE он будет иметь ширину 100px, а в Firefox 120px.

Anabiotick 14 лет назад #

Просто попробуйте один и тот же каркас просмотреть под гекой, осликом и оперой и увидите разницу, особенно в опере. В дивах легче (именно это имел в виду) добиться того, чтобы все было одинаково везде, всего лишь правкой css. Да и вообще задумывалось, что верстка как раз будет контейнерной, а не табличной. Сама таблица предназначена для форматирования текста. Ну, впрочем, каждый выбирает себе по вкусу, тут спорить не о чем smile

. на просторах инета давно идут споры (и как-то не угасают почему-то) между divниками и табличниками smile

и до сих пор нет победивших joke

. Но никто не станет отрицать, что divный шаблон получается много легче табличного.

InstantCMS 14 лет назад #

да я не агитирую за таблицы :)
но то что они выглядят одинаково, это факт

pasplus 14 лет назад #

Полностью согласен с админом по поводу Возможно я и не прав. Лично я дивы использую только в качестве каркаса и контейнеров......

LonelyCat 14 лет назад #

Комментарий удален

-=NEXT=- 14 лет назад #

А я вот полностью согласен с Anabiotick, ни одной таблицей не получится делать как на div smile

Шаблон первый )

Реклама #

14 лет назад #

welldi 14 лет назад #

[ECHO]ALiDozer 14 лет назад #

Anabiotick 14 лет назад #

InstantCMS 14 лет назад #

Anabiotick 14 лет назад #

InstantCMS 14 лет назад #

pasplus 14 лет назад #

LonelyCat 14 лет назад #

-=NEXT=- 14 лет назад #

InstantCMS Team

О проекте

Поддержка

Дополнения