- Страница 1 из 1
- 1
| Форум Уроки html для новичков Табличная верста шаблонов на Ucoz |
| Табличная верста шаблонов на Ucoz |
Здравствуйте всем, эта тема посвящена для новичков ucoz'a а так же новичков в html. Для этого урока, вам нужно знать хотя бы азы html.
Сегодня мы рассмотрим табличную верстку шаблонов для "Конструктор шаблонов", ucoz'a. Итак, начнем. Сначала пишем теги юкоза, они нужны для деления вашего шаблона на части после создания шаблона. Делит он на: header (Верхняя часть сайта); middle (Страница сайта); container (Левый контейнер) P.s если вы прописывайте еще раз контейнер, то будет два контейнера, т.е (Левый контейнер, правый контейнер), подробности смотрите внизу; footer (нижняя часть сайта); popupe (профиль пользователя). Пишем Код <html> <header> <title>[TITLE]</title> <link type="text/css" rel="StyleSheet" href="[CSS_URL]" /> </header> <body> - начало самой начинки сайта. Если хотите сделать фон цветом, то нужно писать так <body background="#FF8000">, а если картинку, то <body background="ссылка на картинку"> <!-- <header> --> <!-- </header> --> <!-- <middle> --> <!-- <container> --> <!-- <block> --> <!-- </block> --> <!-- </container> --> <!-- </middle> --> <!-- <footer> --> $POWERED_BY$ - копирайт юкоза, его нужно ставить обязательно, иначе вы не создадите дизайн. <!-- </footer> --> </body> </html> <!-- <popupe> --> <!-- </popupe> --> Итак, мы написали каркас для нашего дизайна. Теперь вставляем код. Код <html> <header> <title>[TITLE]</title> <link type="text/css" rel="StyleSheet" href="[CSS_URL]" /> </header> <body> <!-- <header> --> <table cellpadding="0" cellspacing="0" width="Размеры ширины шапки" height="Размеры высоты шапки"> <tr> <td background="ссылка на картинку шапки"> </tr> </table> <!-- </header> --> <!-- <middle> --> <table cellpadding="0" cellspacing="0"> <tr> <td valign="top"> <!-- <container> --> <!-- <block> --> <table cellpadding="0" cellspacing="0"> <tr> <td width="Размер ширины картинки блока" height="Размер высоты картинки блока" background="Ссылка на картинку блока верхушки">TITLE</td> </tr> <tr> <td width="Размер ширины картинки блока" background="Ссылка на картинку блока центра">CONTENT</td> </tr> <tr> <td width="Размер ширины картинки блока" height="Размер высоты картинки блока" background="Ссылка на картинку блока низа"></td> </tr> </table> <!-- </block> --> <!-- </container> --> </td> <td valign="top"> <table cellspacing="0" cellpadding="0"> <tr> <td width="Размер ширины картинки контента" height="Размер высоты картинки контента" background="Ссылка на картинку контента верх"></td> </tr> <tr> <td width="Размер ширины картинки контента" background="Ссылка на картинку контента середины">[BODY]</td> </tr> <tr> <td width="Размер ширины картинки контента" height="Размер высоты картинки контента" background="Ссылка на картинку контента низа"></td> </tr> </table> </td> </tr> </table> <!-- </middle> --> <!-- <footer> --> $POWERED_BY$ <!-- </footer> --> </body> </html> <!-- <popupe> --> <!-- </popupe> --> Итак, мы написали таблицу шапки в теги <!-- <header> --><!-- </header> --> Написали так же блок, т.е левый контейнер в тегах <!-- <container> --><!-- <block> --><!-- </block> --><!-- </container> --> Внимание! Если вы хотите сделать второй контейнер, то просто скопируйте теги. В самом низу кода мы расположили эти теги, смотрите ниже код. Код <table cellpadding="0" cellspacing="0"> <tr> <td valign="top"> <!-- <container> --> <!-- <block> --> <table cellpadding="0" cellspacing="0"> <tr> <td width="Размер ширины картинки блока" height="Размер высоты картинки блока" background="Ссылка на картинку блока верхушки">TITLE</td> </tr> <tr> <td width="Размер ширины картинки блока" background="Ссылка на картинку блока центра">CONTENT</td> </tr> <tr> <td width="Размер ширины картинки блока" height="Размер высоты картинки блока" background="Ссылка на картинку блока низа"></td> </tr> </table> <!-- </block> --> <!-- </container> --> </td> <td valign="top"> <table cellspacing="0" cellpadding="0"> <tr> <td width="Размер ширины картинки контента" height="Размер высоты картинки контента" background="Ссылка на картинку контента верх"></td> </tr> <tr> <td width="Размер ширины картинки контента" background="Ссылка на картинку контента середины">[BODY]</td> </tr> <tr> <td width="Размер ширины картинки контента" height="Размер высоты картинки контента" background="Ссылка на картинку контента низа"></td> </tr> </table> </td> </tr> </table> <!-- <container> --> <!-- </container> --> Написали код контейнера в тегах <!-- <middle> --><!-- </middle> --> Теперь мы пишем код футера и код профиля. Код <html> <header> <title>[TITLE]</title> <link type="text/css" rel="StyleSheet" href="[CSS_URL]" /> </header> <body> <!-- <header> --> <table cellpadding="0" cellspacing="0" width="Размеры ширины шапки" height="Размеры высоты шапки"> <tr> <td background="ссылка на картинку шапки"> </tr> </table> <!-- </header> --> <!-- <middle> --> <table cellpadding="0" cellspacing="0"> <tr> <td valign="top"> <!-- <container> --> <!-- <block> --> <table cellpadding="0" cellspacing="0"> <tr> <td width="Размер ширины картинки блока" height="Размер высоты картинки блока" background="Ссылка на картинку блока верхушки">TITLE</td> </tr> <tr> <td width="Размер ширины картинки блока" background="Ссылка на картинку блока центра">CONTENT</td> </tr> <tr> <td width="Размер ширины картинки блока" height="Размер высоты картинки блока" background="Ссылка на картинку блока низа"></td> </tr> </table> <!-- </block> --> <!-- </container> --> </td> <td valign="top"> <table cellspacing="0" cellpadding="0"> <tr> <td width="Размер ширины картинки контента" height="Размер высоты картинки контента" background="Ссылка на картинку контента верх"></td> </tr> <tr> <td width="Размер ширины картинки контента" background="Ссылка на картинку контента середины">[BODY]</td> </tr> <tr> <td width="Размер ширины картинки контента" height="Размер высоты картинки контента" background="Ссылка на картинку контента низа"></td> </tr> </table> </td> </tr> </table> <!-- </middle> --> <!-- <footer> --> <table cellpadding="0" cellspacing="0" width="размеры ширины картинки футера" height="размеры высоты картинки футера" background="ссылка на картинку футера"> <tr> <td>Design by <a href="http://in.ucoz.org"><b><i>in.ucoz.org</i></b></a></td> <td>$POWERED_BY$</td> </tr> </table> <!-- </footer> --> </body> </html> <!-- <popupe> --> <table cellpadding="0" cellspacing="0"> <tr> <td>[BODY]</td> </tr> </table> <!-- </popupe> --> Итак, мы написали футер в тегах <!-- <footer> --><!-- </footer> --> А так же написали код для профиля в тегах <!-- <popupe> --><!-- </popupe> --> Мы сверстали наш первый шаблон! Если у вас все получилось радуйтесь и экспериментируйте. Если же я где-то ошибся просьба подправить. А в следующем уроке, я научу Вас верстать блочной версткой тобишь <div></div> Спасибо за внимание! 
|
Т.е. если я правильно понял, то без тегов <!-- <header> --> <!-- </header> --> и прочих, конструктор не будет работать? Или работать не корректно.
|
Prosvetekvator, просто будет легче редактировать дизайн, когда он разбит на куски.
|
- Страница 1 из 1
- 1