10.05.2011

Как создать шаблон на uCoz? Часть 2. Вёрстка

Эта запись написана мною в 2011 году. В те времена деревья были высокими, а доллар стоил меньше 40 рублей. С тех пор прошло много времени и многое изменилось. Учитывайте это, читая.

Вот я и добрался до написания второй и самой главной части инструкции по созданию шаблона на uCoz. Надеюсь, вы уже все прочитали первую часть.

Итак. Вы уже нарисовали макет и собираетесь приступить к вёрстке. Для объяснения всего я тоже буду верстать шаблон, но только для примера, а потому и простейший.
создание шаблона для uCoz

Как видите, макет двух колоночный, фиксированной ширины.

Сначала нужно нарезать ваш макет. В зависимости от его устройства, это делается по-разному. Мой макет вообще можно не резать, а задавать все цвета, рамки и прочее кодом, т.к. на моём нет графики. Но всё-таки нарежем его. У меня получились такие куски: шапка сайта, футер, шапка блока и основа блока. В полноценных макетах обычно частей больше, но от этого суть не меняется.

Не забывайте оптимизировать ваши изображения при сохранении. Для этого сохраняйте их в фотошопе через Файл -> Сохранить для Web, далее выбираете один из форматов (jpg, png, gif), требующий меньше памяти при сохранении, но в котором качество изображения не портится (вес будущего файла можно посмотреть снизу).

Отдельная тема — нарезка блоков, потому что блоки бывают разные. Есть несколько способов верстки:

Шапка блока и основная часть блока отдельной картинкой. Тогда основная часть делается пикселей 600 в высоту, и, при кодировании блока, контент блока располагается внизу картинки, а верх обрезается. Такой способ я и буду использовать при вёрстке в этом уроке, т.к. он наиболее непонятен при устном объяснении.
Блок режется на 3 части — верх, центр и низ. Тогда центр оказывается примерно 20 пикселей в высоту и повторяется по вертикали, а сверху и снизу к нему присоединяются остальные 2 части.
и ещё куча вариантов.

Один из них использован при создании моего блога: весь блок состоит из 3-х полосок, между которыми стоят заглавие и контент блока.

Называем мы наши картинки header.jpg

footer.png

blockhead.png

blockcontent.png (обратите внимание на blockcontent, его высота = 600 px)

Загружаем картинки на сайт в папку img с помощью файлового менеджера или FTP (инструкция)

Открываем ваш любимый html редактор (я предпочитаю Notepad++, также хорош Adobe Dreamweaver, можно открыть просто блокнот) и приступаем к кодированию.

Перед этим на сайте, на котором вы будете проверят шаблон, поставьте # 971 стандартный шаблон. Всё-таки не писать же с 0 весь css файл, а возьмём стандартный и переделаем его. Так гораздо рациональнее и быстрее.

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>[TITLE]</title>
	< ?$META_DESCRIPTION $?> 
	<link type="text/css" rel="StyleSheet" href="/_st/my.css">
</head>

Это самое начало нашего макета. Честно сказать, я не знаю, что значит код < ?$META_DESCRIPTION$? >, но он встречается в шаблонах и по названию его можно подумать, что это что-то связанное с метатегами. Мне кажется, что это код ещё не введённой функции uCoz, ну хуже от него точно не будет. upd: Обнаружил, что сиё чудо работает в интернет магазине (ставит мета тег
DESCRIPTION). Более нигде вроде не работало.

[TITLE] – зарезервированный код uCoz, система сама ставит заголовок. Там где <meta …> — указание котировки, <link type=»text/css» rel=»StyleSheet» href=»/_st/my.css»> — ссылка на css.

Далее начинается основная часть. Админ бар, шапка (как поставить случайную шапку)

<body>
	$ADMIN_BAR$
	<!-- <header> -->
	<table border="0" cellpadding="0" cellspacing="0" class="header" align="center">
	<tr><td></td></tr>
	</table>
	<!-- </header> -->

а в css пихаем

.header {width:1000px; height:200px; background:url('/img/header.png') no-repeat #000000; }

<!— <header> —> и <!— <header> —> — указание системе, где у нас код шапки.

Далее код центральной части, вместе с блоками.

<!-- <middle> -->
<table cellpadding="0" cellspacing="0" class="middle" align="center">
	<tr>
		<td width="750" valign="top">  
			<div class="content">
			[BODY]
			</div>
		</td>
		<td width="250" valign="top" class="blocks">  
			<!-- <container> -->
			<!-- <block> -->
			<div class="block">
			<div class="blockheader"><div style="padding-top:20px;"><strong>TITLE</strong></div></div>
			<div class="blockcontent"><div style="padding:10px;">CONTENT</div></div>
			</div>
			<!-- </block> -->
			<!-- </container> -->
		</td>
	</tr>
</table>
<!-- </middle> -->

TITLE и CONTENT – зарезервированные коды для блоков, а [BODY] – для основной части сайта.

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

В css добавляем ещё несколько строчек:

.middle {width:1000px; background:#e0e0e0;  }
.content {color:#000000; margin:10px; padding:0px;}
.blocks {alogn:center; background:#e9e9e9; margin:0px; padding:0px;}
.block { vertical-align:top; }
.blockheader {width:203px; height:45px; background:url('/img/blockhead.png') no-repeat; padding:0px; margin:10px 10px 0px 20px; text-align:center;}
.blockcontent {width:203px; background:url('/img/blockcontent.png') bottom no-repeat; text-align:left; padding:0px; margin:0px 10px 10px 20px;}

в стиле .blockcontent, как видите, картинка задана с параметром bottom. Это значит, что картинка прижимается к нижнему краю блока.

И почти последняя часть коде – футер:

	<!-- <footer> -->
	<table border="0" cellpadding="10" cellspacing="10" class="footer" align="center">
		<tr>
			<td width="30%"></td>
			<td align="left" style="text-align:center">design by Ваш Ник | $POWERED_BY$ <br> [COPYRIGHT]
			<td align="right">$COUNTER$</td>
		</tr>
	</table>
	<!-- </footer> -->
	</body>
</html>

И снова пишем в css:

.footer {width:1000px;height:150px;background:url('/img/footer.png') no-repeat; }

Остаётся только один небольшой кусок кода – описание всплывающих окон (окна ЛС, профиля и пр). Код добавляется в конце документа, уже после , и для него так же зарезервированы коды [TITLE] и [BODY]. В нашем шаблоне код будет выглядеть так:

<!-- <popup> --> 
<div align="center"><h4>[TITLE]</h4></div>
<br>
[BODY]
<!-- </popup> -->

Всё! Макет готов, вот его окончательный код:

<html> 
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>[TITLE]</title>

		<link type="text/css" rel="StyleSheet" href="/_st/my.css">
	</head>
	<body>
		$ADMIN_BAR$
		<!-- <header> -->
		<table border="0" cellpadding="0" cellspacing="0" class="header" align="center">
			<tr><td></td></tr>
		</table>
		<!-- </header> -->
		<!-- <middle> -->
		<table cellpadding="0" cellspacing="0" class="middle" align="center">
			<tr>
				<td width="750" valign="top">  
					<div class="content">
					[BODY]
					</div>
				</td>
				<td width="250" valign="top" class="blocks">  
					<!-- <container> -->
					<!-- <block> -->
					<div class="block">
						<div class="blockheader"><div style="padding-top:20px;"><strong>TITLE</strong></div></div>
						<div class="blockcontent"><div style="padding:10px;">CONTENT</div></div>
					</div>
					<!-- </block> -->
					<!-- </container> -->
				</td>
			</tr>
		</table>
		<!-- </middle> -->
		<!-- <footer> -->
		<table border="0" cellpadding="10" cellspacing="10" class="footer" align="center">
			<tr>
				<td width="30%"></td>
				<td align="left" style="text-align:center">design by Ваш Ник | $POWERED_BY$ <br> [COPYRIGHT]
				<td align="right">$COUNTER$</td>
			</tr>
		</table>
		<!-- </footer> -->
	</body>
</html>

<!-- <popup> -->
<div align="center"><h4>[TITLE]</h4></div>
<br>
[BODY]
<!-- </popup> -->

Поздравляю!

Категория: Система uCoz Просмотров: 129077 40 комментариев twitter

Вам будет интересно:

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

Как создать шаблон на uCoz? Часть 2. Вёрстка

Вам будет интересно:

Комментарии

Добавить комментарий