Изменено: 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>.
Тестовый сайт
Скачать шаблон
Спасибо за внимание! |
  |
