Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

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

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Шаблоны » Дизайн » HTML верстка » Создание шаблона для uCoz. Верстка макета.

Создание шаблона для uCoz. Верстка макета.

Опубликовал: artCreative™
Категория: HTML верстка
Дата:Пятница, 14 Июня 2013 в 16:11

1 голос

Немного водной основы

Какими бываю шаблоны? Резиновый - шаблон растягивается по ширине экрана. Фиксированный - ширина шаблона задана и остаётся постоянна при любой ширине экрана пользователя.

Шаблон нужно настроить так, что бы он дополнял контент сайта, а ни в коем случае не сливался и не мешал Вашему пользователю и не отвлекал его внимание от нужного материала. Пытайтесь создать шаблон, уникальный по своей тематике и дизайну, чтобы пользователи запоминали ваш сайт. К примеру, существует огромное кол-во макетов вроде разных, но внешне очень похожих. Когда пользователь будет открывать такой сайт, ему будет казаться, что здесь он уже был. Так что стоит придумать что-то очень выделяющееся из толпы.
Верстка макета

Если у Вас уже есть готовый макет, тогда приступим к его верстке. (если же не готов, то макет стоит подготовить)

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

Сначала нужно нарезать Ваш макет. В зависимости от его устройства, это делается по-разному.

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

Называем мы наши картинки header.jpg footer.png blockhead.png blockcontent.png (обратите внимание на blockcontent, его высота = 600 px)

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

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

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

Код

<html>

<head>

<title>[TITLE]</title>

< ?$META_DESCRIPTION $?>

</head>

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

[TITLE] – зарезервированный код uCoz, система сама ставит заголовок. Там где - указание котировки, - ссылка на css.

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

Код

<body>

$ADMIN_BAR$

</table>

а в css пишем

Код

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

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

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

Код

<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">


<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>


</td>
</tr>
</table>

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. Это значит, что картинка прижимается к нижнему краю блока.

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

Код

<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>

</body>
</html>

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

Код

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

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

Код

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

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

Код

<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$

<table border="0" cellpadding="0" cellspacing="0" class="header" align="center">
<tr><td></td></tr>
</table>


<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">


<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>


</td>
</tr>
</table>


<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>

</body>
</html>


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

Спонсор материала: Дизайн-Ателье по разработке сайтов и граффики RealARTs

Ссылка на источник материала

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 1200 « Назад

Теги материала: верстка, создание, шаблона, uCoz., HTML верстка, макета., для

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Шаблоны » Дизайн » HTML верстка » Создание шаблона для uCoz. Верстка макета.

Создание шаблона для uCoz. Верстка макета.

Комментарии пользователей