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

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
Опции темы
Я настройка

  • Страница 1 из 1
  • 1
Модератор форума: iNNERPARTYSYSTEM, uberchel  
Форум » HTML » Уроки » Табличная верста шаблонов на Ucoz (Практика)
Табличная верста шаблонов на Ucoz (Практика)
Reactor
10.10.2012, 12:24
Изменено: Reactor - Среда, 10.10.2012, 12:28

Группа: Пользователи

Сообщений: 15

Награды: 1

Статус: Offline
Здравствуйте всем! Это продолжение урока табличной верстки для ucoz.
В прошлой части урока <a href="#"><b><i>тут</i></b></a>, мы рассматривали теги для создания шаблона а так же писали верстку таблицей. В этой части урока, мы уже перейдем непосредственно к самой верстке на практике, т.е я на личном примере покажу что и как делается.
Итак начнем.

Что нам понадобиться:
Блокнот
Панель Управления вашего сайта. Перейдите во вкладку "Конструктор шаблонов".
тестовый сайт.
Файловый менеджер.

Сначала мы напишем страницу с тегами.

Code
<html>
<head>
<title>Урок №2 (практика)</title>
<link type="text/css" rel="StyleSheet" href="[CSS_URL]" />     
</head>
<body>

<!-- <header> -->     
<!-- </header> -->     

<!-- <middle> -->     
<!-- <container> -->     
<!-- <block> -->     
<!-- </block> -->     
<!-- </container> -->     
<!-- </middle> -->     

<!-- <footer> -->     
$POWERED_BY$
<!-- </footer> -->     

</body>     
</html>     

<!-- <popupe> -->     
<!-- </popupe> -->


1-й этап, это фон. Фон может быть как цветом, как одной картинкой, так и маленькой картинкой, которая будет копироваться, тем самым занимая весь фон страницы одной картинкой.

мы дописываем у тега <body> background, т.е будет выглядеть так: <body background="ссылка на фон">, в моем случаи это <body background="/img/bp.jpg">. Если вы хотите, чтобы ваш фон не копировался, то вам нужно переписать сам body т.е вот так.
<body style="background-image: url('/img/bp.jpg'); background-repeat: no-repeat";>
Если хотите сделать фон цветом, то прописываете так: <body bgcolor="#номер цвета">

Итак, я написал фон.
Code
<html>
<head>
<title>Урок №2 (практика)</title>
<link type="text/css" rel="StyleSheet" href="[CSS_URL]" />     
</head>
<body background="/img/bp.jpg">

<!-- <header> -->     
<!-- </header> -->     

<!-- <middle> -->     
<!-- <container> -->     
<!-- <block> -->     
<!-- </block> -->     
<!-- </container> -->     
<!-- </middle> -->     

<!-- <footer> -->     
$POWERED_BY$
<!-- </footer> -->     

</body>     
</html>     

<!-- <popupe> -->     
<!-- </popupe> -->


2-й Этап. Нам нужно написать таблицу шапки в тегах
<!-- <header> -->
<!-- </header> -->

Вот мы написали таблицу для шапки. Таблицу описывать не буду, т.к в предыдущем уроке я это уже сделал.

Code


<!-- <header> -->     
<div align="center">
<table width="1067" height="300" cellspacing="0" cellpadding="0">
<tr>
<td background="/img/head.jpg"></td>
</tr>
</table>
</div>
<!-- </header> -->


3-й Этап. Мы напишем блоки в
<!-- <middle> -->
<!-- </middle> -->
В тегах
<!-- <container> -->
<!-- <block> -->
<!-- </block> -->
<!-- </container> -->

Вот мы написали блок.

<div align="center"> это выравнивания по центру
<div style="padding-left: ";> я использовал для выравнивания TITLE и CONTENT'a

Code
<!-- <container> -->     
<!-- <block> -->     
<table cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="37" background="/img/block-v.png"><div style="padding-left: 60px";><font color="#fff">TITLE</font></div></td>
</tr>
<tr>
<td width="200" background="/img/block-s.png"><div style="padding-left: 20px";><font color="#fff"><div style="width: 162px";>CONTENT</div></font></div></td>
</tr>
<tr>
<td width="200" height="30" background="/img/block-n.png"></td>
</tr>
</table>
<br>
<br>
<!-- </block> -->     
<!-- </container> -->


4-й этап, пишем таблицу для нашего контента.

в тегах <!-- <middle> --><!-- </middle> -->

Code
<!-- <middle> -->     
<center>
<table cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<!-- <container> -->     
<!-- <block> -->     
<table cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="37" background="/img/block-v.png"><div style="padding-left: 60px";><font color="#fff">TITLE</font></div></td>
</tr>
<tr>
<td width="200" background="/img/block-s.png"><div style="padding-left: 20px";><font color="#fff"><div style="width: 162px";>CONTENT</div></font></div></td>
</tr>
<tr>
<td width="200" height="30" background="/img/block-n.png"></td>
</tr>
</table>
<br>
<br>
<!-- </block> -->     
<!-- </container> -->     
</td>
<td valign="top">
<table cellspacing="0" cellpadding="0">
<tr>
<td width="560" height="43" background="/img/content-v.png"></td>
</tr>
<tr>
<td width="560" height="20" background="/img/content-s.png"><div style="width: 520px; padding-left: 20px";>[BODY]</div></td>
</tr>
<tr>
<td width="560" height="105" background="/img/content-n.png"></td>
</tr>
</table>
</td>
<td valign="top">
<!-- <container> -->     
<!-- </container> -->     
</td>
</tr>
</table>
</center>
<!-- </middle> -->


Считайте больше половину работы сделано.

5-й этап. Пишем footer в тегах <!-- <footer> --><!-- </footer> -->

Мы написали футер

Code
<!-- <footer> -->     
<div align="center">
<table cellspacing="0" cellpadding="0" width="1030" height="145" background="http://quarters-nn.ru/footer.png">
<tr>
<td><center>$POWERED_BY$<br><a href="http://ucodes.ru/index/8-1294"><font color="#fff"><b><i>Desing by Reactor and uCodes</i></b></font></a></center></td>
</tr>
</table>
</div>
<!-- </footer> -->


6-й этап. Осталось написать персональную страницу пользователей в тегах <!-- <popup> -->
<!-- </popup> -->

Code
<!-- <popup> -->     
<table width="1200" height="310" background="/img/prof.png">
<tr>
<td><center><div style="width: 1100px";>[BODY]</div></center></td>
</tr>
</table>
<!-- </popup> -->


Все, наш шаблон готов!

Шаблон конечно не ахти да и верстка не супер, но для новичком сойдет и эта, эксперементируйте, пробуйте, что-то своей дописывайте. В следующем уроке, я расскажу как верстать на <div>.

Тестовый сайт
Скачать шаблон
Спасибо за внимание!
Форум » HTML » Уроки » Табличная верста шаблонов на Ucoz (Практика)
  • Страница 1 из 1
  • 1
Поиск: