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

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

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

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

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

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

  • Страница 1 из 1
  • 1
Модератор форума: iNNERPARTYSYSTEM, uberchel  
Форум » HTML » Уроки » Табличная верста шаблонов на Ucoz
Табличная верста шаблонов на Ucoz

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

Сообщений: 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>

Спасибо за внимание! smile

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

Сообщений: 4

Награды: 0

Статус: Offline
Хоть и знал это, но все равно СПАСИБО! cool

Группа: Координатор

Сообщений: 186

Награды: 7

Статус: Offline
Первые мои азы знаний лет этак 5 назад xD... Теперь же Webmaster по юкозу и не только...
Напишем ваш сайт, скрипт - любой тематики и сложности, в макс. быстрые сроки!.. Предоставляем SEO услуги для продвижения групп и сайтов!. За подробностями обращайтесь по Контактам: vk.com//id308213563 | Skype: spammrac ...
Форум » HTML » Уроки » Табличная верста шаблонов на Ucoz
  • Страница 1 из 1
  • 1
Поиск: