Группа: Пользователи
Сообщений: 15
Награды: 1
Статус: Offline
| Здравствуйте всем, эта тема посвящена для новичков ucoz'a а так же новичков в html. Для этого урока, вам нужно знать хотя бы азы html.
Сегодня мы рассмотрим табличную верстку шаблонов для "Конструктор шаблонов", ucoz'a.
Итак, начнем.
Сначала пишем теги юкоза, они нужны для деления вашего шаблона на части после создания шаблона. Делит он на: header (Верхняя часть сайта); middle (Страница сайта); container (Левый контейнер) P.s если вы прописывайте еще раз контейнер, то будет два контейнера, т.е (Левый контейнер, правый контейнер), подробности смотрите внизу; footer (нижняя часть сайта); popupe (профиль пользователя).
Пишем
Code <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> -->
Итак, мы написали каркас для нашего дизайна.
Теперь вставляем код.
Code <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> -->
Внимание! Если вы хотите сделать второй контейнер, то просто скопируйте теги. В самом низу кода мы расположили эти теги, смотрите ниже код.
Code <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> -->
Теперь мы пишем код футера и код профиля.
Code <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>Desing by <a href="http://ucodes.ru/"><b><i>uCodes</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>
Спасибо за внимание!  |
  |
Группа: Пользователи
Сообщений: 4
Награды: 0
Статус: Offline
| Хоть и знал это, но все равно СПАСИБО!  |
|
Группа: Координатор
Сообщений: 186
Награды: 7
Статус: Offline
| Первые мои азы знаний лет этак 5 назад xD... Теперь же Webmaster по юкозу и не только...
Напишем ваш сайт, скрипт - любой тематики и сложности, в макс. быстрые сроки!.. Предоставляем SEO услуги для продвижения групп и сайтов!. За подробностями обращайтесь по Контактам: vk.com//id308213563 | Skype: spammrac ... |
|
