Итак, для начала я предлагаю Вам скачать шаблон сайта, с которым мы и будем работать.
Скачать шаблон сайта вы можете по этой ссылке.
Открываем Панель управления сайтом, далее переходим в Редактор Страниц - Управление Дизайном модуля.
В результате у Вас откроется по умолчанию шаблон "Страницы сайта", он то как раз нам и нужен, с ним мы и будем работать.
Сейчас в шаблоне "Страницы сайта" у Вас должен быть следующий код (который мы с Вами подготовили в прошлом уроке)
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>PS-Studio.Info: Портал веб-решений</title>
<meta name="description" content="решения на css, бесплатные шаблоны сайтов, уроки Adobe Photoshop"/>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
</head>
<body>
$ADMIN_BAR$
$CONTENT$
$COUNTER$
$POWERED_BY$
</body>
</html>
Скопируйте этот код и сохраните где-нибудь на рабочем столе, он нам пригодится чуть позже.
Теперь удалите весь код из шаблона "Страницы сайта", у Вас должно остаться пустое поле.
Теперь открываем скачанный архив с шаблоном сайта, что мы видим внутри:
А внутри мы видим папку img, в которой находятся используемые в шаблоне сайта изображения, html-файлы страниц сайта - index,archives,comments,empty,page, файлы css-стилей - ie_fixes,reset,style.
Нас интересует в данный момент файл index.html - главной страницы шаблона сайта. С него и начнём работу.
Откройте файл index.html с помощью программы "Блокнот" (правой кнопкой мыши на файл index, в контекстном меню выбрать "Открыть с помощью - Блокнот")
Комбинацией клавиш CTRL+A выделяем весь имеющийся в файле html-код, комбинацией CTRL+C копируем этот выделенный код и вставляем (CTRL+V) в шаблон "Страницы сайта" в Панели управления нашим сайтом
Смотрим код, который мы скопировали и вставили в шаблон "Страницы сайта", в коде имеется привязка трёх внешних файлов стилей css:
<link rel="stylesheet" type="text/css" href="reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="ie_fixes.css" media="screen" /><![endif]-->
Что такое reset.css и для чего этот файл нужен, читаем .
В файле style.css находятся основные css-стили страницы шаблона, ну а в файле ie_fixes.css находятся css-стили специально для Internet Explorer, чтобы страница шаблона отображалась корректно и в нём в том числе.
Загружаем все эти три файла через файловый менеджер в Панели управления сайтом в корневую папку:
Теперь создадим в файловом менеджере одноимённую папку img, в которую загрузим все файлы изображений из папки img скачанного шаблона сайта:
Вам уже не терпится посмотреть, что же мы за всё это время сделали?) давайте посмотрим, только предварительно в код шаблона "Страницы сайта" добавим системный код $PОWERED_BY$, без которого нам не получится сохранить сделанные нами изменения в шаблоне "Страницы сайта".
Давайте добавим его вот сюда, в самый низ:
<div class="left">© 2008 Website name</div>
Примерно так:
<div class="left">$POWERED_BY$ © 2008 Website name</div>
Теперь мы можем сохранить изменения в шаблоне и посмотреть, что же у нас получилось с главной страницей нашего сайта.
А получилось у нас всё замечательно: дизайн скачанного шаблона появился во всей красе, оно и не удивительно - мы прописали код, загрузили изображения, ничего сложного, правда?
Осталось только сделать так, чтобы этот шаблон начал работать, используя функционал системы uCoz.
Этим мы и займёмся. Для начала заполняем пустующие поля у мета-тегов:
Строку с мета-тегом авторских прав
можете просто удалить из шаблона, она нам не понадобится, теперь перепишем как нам нужно содержимое тега title
Теперь добавим в html-код шаблона сразу после открывающего тега body второй системный код системы $АDMIN_BAR$
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content="решения на css, бесплатные шаблоны сайтов, уроки Adobe Photoshop"/>
<meta name="keywords" content="css,adobe photoshop,бесплатные шаблоны" />
<link rel="stylesheet" type="text/css" href="reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="ie_fixes.css" media="screen" /><![endif]-->
<title>PS-Studio.Info: Портал веб-решений</title>
</head>
<body>
$ADMIN_BAR$
Cохраняем изменения в шаблоне "Страницы сайта" и смотрим, что получилось:
У нас появился системный админ-бар) ура, как говорится, товарищи! если Вы предварительно забыли авторизоваться на своем сайте, не беда, наберите в адресной строке браузера
http://адрес вашего сайта/index/1
авторизуйтесь и попадёте на главную страницу, где и увидите появившийся админ-бар.
Идём далее по коду шаблона. Вот эту строку:
переписываем в виде
Как Вы заметили, мы заменили символ # на системный код $HОME_PAGE_LINK$, теперь при клике на ссылку с названием Вашего сайта можно будет попасть на главную страницу с любой другой страницы.
Чуть ниже в заголовке второго уровня
нам нужно поправить текст на свой:
Что мы видим далее в нашем шаблоне? А далее у нас расположено горизонтальное меню, которое нам нужно сделать работающим.
Вот код этого меню
<ul>
<li class="current_page_item"><a href="index.html">Posts page</a></li>
<li><a href="comments.html">Post comments</a></li>
<li><a href="page.html">Sample test page</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="empty.html">Empty page</a></li>
</ul>
Мы просто заменим эти ссылки на свои, ничего сложного. В зависимости от того, какие модули системы Вы будете использовать на своём сайте, будут и Ваши ссылки в меню, я же для примера напишу следующее:
<ul>
<li class="current_page_item"><a href="/load/">Каталог файлов</a></li>
<li><a href="/publ/">Каталог статей</a></li>
<li><a href="/blog/">Блог</a></li>
<li><a href="/forum/">Форум</a></li>
<li><a href="/photo/">Фотоальбомы</a></li>
</ul>
Попробуйте, меню уже работает!
А вот теперь начинается самое интересное: дальше в шаблоне идёт какой-то контент (содержимое), в данном случае это три добавленных материала с заголовками Porttitor posuere, Adipiscing, Interdum.
Оформление материалов (или как принято обозначать в системе uCoz - "Вид материалов") одинаковое, поэтому нам нужно найти в коде шаблона повторяющийся одинаковый html-код, отвечающий за оформление этих материалов,а вот и он:
<div class="post">
<div class="post_top">
<div class="post_title"><h2><a href="#">Porttitor posuere</a></h2></div>
<div class="post_date">Jun 13, 2006 by Vulputate</div>
</div>
<div class="post_body">
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
<blockquote>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
</blockquote>
<h2>Sollicitudin</h2>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.</p>
</div>
<div class="post_metadata">
<div class="content">
<span class="comment"><a href="#">2 Comments</a></span>
</div>
</div>
</div>
<div class="post">
<div class="post_top">
<div class="post_title"><h2><a href="#">Adipiscing</a></h2></div>
<div class="post_date">Jun 11, 2006 by Laoreet</div>
</div>
<div class="post_body">
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi.</p>
<ul>
<li>Tristique</li>
<li>Aenean</li>
<li>Pretium</li>
</ul>
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
</div>
<div class="post_metadata">
<div class="content">
<span class="comment"><a href="#">11 Comments</a></span>
</div>
</div>
</div>
<div class="post">
<div class="post_top">
<div class="post_title"><h2><a href="#">Interdum</a></h2></div>
<div class="post_date">May 24, 2006 by Lectus</div>
</div>
<div class="post_body">
<p>Praesent nisi sem, bibendum in, ultrices sit amet, euismod sit amet, dui. Donec varius tincidunt nisi. Ut ut sapien. Integer porta. Fusce nibh. Curabitur pellentesque, lectus at <a href="index.html">volutpat interdum</a></p>
<h3>Sem justo</h3>
<p>Placerat elit, eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie. Nullam semper massa eget ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque a nibh quis nunc volutpat aliquam</p>
<code>
margin-bottom: 12px;<br/>
font: normal 1.1em "Lucida Sans Unicode",serif;<br/>
background: url(img/quote.gif) no-repeat;<br/>
padding-left: 28px;<br/>
color: #555;<br/>
</code>
<p>Eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie.</p>
</div>
<div class="post_metadata">
<div class="content">
<span class="comment"><a href="#">6 Comments</a></span>
</div>
</div>
</div>
Чтобы нам было проще ориентироваться, удалим два ненужных материала и оставим код первого материала за основу:
<div class="post">
<div class="post_top">
<div class="post_title"><h2><a href="#">Porttitor posuere</a></h2></div>
<div class="post_date">Jun 13, 2006 by Vulputate</div>
</div>
<div class="post_body">
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
<blockquote>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
</blockquote>
<h2>Sollicitudin</h2>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.</p>
</div>
<div class="post_metadata">
<div class="content">
<span class="comment"><a href="#">2 Comments</a></span>
</div>
</div>
</div>
Cохраним изменения в шаблоне "Страницы сайта" и смотрим, что у нас получилось. А получилось у нас вот что: дизайн страницы остался тем же, только материалов новостей стало на два меньше.
Теперь нужно понять, что вместо материала новости, имеющегося в шаблоне, должны быть наши новости, которые мы сами будем добавлять на свой сайт!
А как мы помним, за вывод материалов новостей у нас отвечает системный код $CОNTENT$, значит мы должны вставить этот системный код в наш шаблон вместо демо-материала.
Что мы и делаем. Вместо:
<div class="post">
<div class="post_top">
<div class="post_title"><h2><a href="#">Porttitor posuere</a></h2></div>
<div class="post_date">Jun 13, 2006 by Vulputate</div>
</div>
<div class="post_body">
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
<blockquote>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
</blockquote>
<h2>Sollicitudin</h2>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.</p>
</div>
<div class="post_metadata">
<div class="content">
<span class="comment"><a href="#">2 Comments</a></span>
</div>
</div>
</div>
Вставляем:
Cохраняем изменения и смотрим, что получилось:
Отлично, всё работает. Наш системный код выдал нам, что: Добавленных материалов на данный момент нет и дал нам ссылку на добавление этих самых материалов.
Чтож, добавим какую-нибудь тестовую новость.
Теперь у нас есть тестовый материал новостей сайта и оформлен он в соответствии со стандартным кодом системы uCoz для выбранного нами в самом начале дизайна # 971
Нам же необходимо, чтобы оформление новостей было как в скачанном шаблоне сайта. Нет ничего проще: помните повторяющийся код демо-материалов? именно его мы и вставим в шаблон "Новости -Вид материалов"!
Открываем шаблон "Новости сайта - Вид материалов" и заменяем имеющийся там стандартный код на наш, предварительно скопировав и сохранив стандартный код в файл "Блокнот" на компьютере (мы туда потом будем подглядывать)
<div class="post">
<div class="post_top">
<div class="post_title"><h2><a href="#">Porttitor posuere</a></h2></div>
<div class="post_date">Jun 13, 2006 by Vulputate</div>
</div>
<div class="post_body">
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
<blockquote>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
</blockquote>
<h2>Sollicitudin</h2>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.</p>
</div>
<div class="post_metadata">
<div class="content">
<span class="comment"><a href="#">2 Comments</a></span>
</div>
</div>
</div>
В продолжении нашего урока мы проинспектируем вставленный код и заставим его работать по-нашему, по юкозовски!)
Скачать шаблон сайта вы можете по этой ссылке.
Открываем Панель управления сайтом, далее переходим в Редактор Страниц - Управление Дизайном модуля.
В результате у Вас откроется по умолчанию шаблон "Страницы сайта", он то как раз нам и нужен, с ним мы и будем работать.
Сейчас в шаблоне "Страницы сайта" у Вас должен быть следующий код (который мы с Вами подготовили в прошлом уроке)
Code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>PS-Studio.Info: Портал веб-решений</title>
<meta name="description" content="решения на css, бесплатные шаблоны сайтов, уроки Adobe Photoshop"/>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
</head>
<body>
$ADMIN_BAR$
$CONTENT$
$COUNTER$
$POWERED_BY$
</body>
</html>
Скопируйте этот код и сохраните где-нибудь на рабочем столе, он нам пригодится чуть позже.
Теперь удалите весь код из шаблона "Страницы сайта", у Вас должно остаться пустое поле.
Теперь открываем скачанный архив с шаблоном сайта, что мы видим внутри:
А внутри мы видим папку img, в которой находятся используемые в шаблоне сайта изображения, html-файлы страниц сайта - index,archives,comments,empty,page, файлы css-стилей - ie_fixes,reset,style.
Нас интересует в данный момент файл index.html - главной страницы шаблона сайта. С него и начнём работу.
Откройте файл index.html с помощью программы "Блокнот" (правой кнопкой мыши на файл index, в контекстном меню выбрать "Открыть с помощью - Блокнот")
Комбинацией клавиш CTRL+A выделяем весь имеющийся в файле html-код, комбинацией CTRL+C копируем этот выделенный код и вставляем (CTRL+V) в шаблон "Страницы сайта" в Панели управления нашим сайтом
Смотрим код, который мы скопировали и вставили в шаблон "Страницы сайта", в коде имеется привязка трёх внешних файлов стилей css:
Code
<link rel="stylesheet" type="text/css" href="reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="ie_fixes.css" media="screen" /><![endif]-->
Что такое reset.css и для чего этот файл нужен, читаем .
В файле style.css находятся основные css-стили страницы шаблона, ну а в файле ie_fixes.css находятся css-стили специально для Internet Explorer, чтобы страница шаблона отображалась корректно и в нём в том числе.
Загружаем все эти три файла через файловый менеджер в Панели управления сайтом в корневую папку:
Теперь создадим в файловом менеджере одноимённую папку img, в которую загрузим все файлы изображений из папки img скачанного шаблона сайта:
Вам уже не терпится посмотреть, что же мы за всё это время сделали?) давайте посмотрим, только предварительно в код шаблона "Страницы сайта" добавим системный код $PОWERED_BY$, без которого нам не получится сохранить сделанные нами изменения в шаблоне "Страницы сайта".
Давайте добавим его вот сюда, в самый низ:
Code
<div class="left">© 2008 Website name</div>
Примерно так:
Code
<div class="left">$POWERED_BY$ © 2008 Website name</div>
Теперь мы можем сохранить изменения в шаблоне и посмотреть, что же у нас получилось с главной страницей нашего сайта.
А получилось у нас всё замечательно: дизайн скачанного шаблона появился во всей красе, оно и не удивительно - мы прописали код, загрузили изображения, ничего сложного, правда?
Осталось только сделать так, чтобы этот шаблон начал работать, используя функционал системы uCoz.
Этим мы и займёмся. Для начала заполняем пустующие поля у мета-тегов:
Code
<meta name="description" content="решения на css, бесплатные шаблоны сайтов, уроки Adobe Photoshop"/>
<meta name="keywords" content="css,adobe photoshop,бесплатные шаблоны" />
<meta name="keywords" content="css,adobe photoshop,бесплатные шаблоны" />
Строку с мета-тегом авторских прав
Code
<meta name="author" content="" />
можете просто удалить из шаблона, она нам не понадобится, теперь перепишем как нам нужно содержимое тега title
Code
<title>PS-Studio.Info: Портал веб-решений</title>
Теперь добавим в html-код шаблона сразу после открывающего тега body второй системный код системы $АDMIN_BAR$
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content="решения на css, бесплатные шаблоны сайтов, уроки Adobe Photoshop"/>
<meta name="keywords" content="css,adobe photoshop,бесплатные шаблоны" />
<link rel="stylesheet" type="text/css" href="reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="ie_fixes.css" media="screen" /><![endif]-->
<title>PS-Studio.Info: Портал веб-решений</title>
</head>
<body>
$ADMIN_BAR$
Cохраняем изменения в шаблоне "Страницы сайта" и смотрим, что получилось:
У нас появился системный админ-бар) ура, как говорится, товарищи! если Вы предварительно забыли авторизоваться на своем сайте, не беда, наберите в адресной строке браузера
http://адрес вашего сайта/index/1
авторизуйтесь и попадёте на главную страницу, где и увидите появившийся админ-бар.
Идём далее по коду шаблона. Вот эту строку:
Code
<h1><a href="#">Grunge Superstar</a></h1>
переписываем в виде
Code
<h1><a href="$HOME_PAGE_LINK$">ЗДЕСЬ НАЗВАНИЕ ВАШЕГО САЙТА</a></h1>
Как Вы заметили, мы заменили символ # на системный код $HОME_PAGE_LINK$, теперь при клике на ссылку с названием Вашего сайта можно будет попасть на главную страницу с любой другой страницы.
Чуть ниже в заголовке второго уровня
Code
<h2>A dirty, monochrome, single-column website template.</h2>
нам нужно поправить текст на свой:
Code
<h2>Это демо-сайт, созданный по урокам адаптации PS-Studio.Info</h2>
Что мы видим далее в нашем шаблоне? А далее у нас расположено горизонтальное меню, которое нам нужно сделать работающим.
Вот код этого меню
Code
<ul>
<li class="current_page_item"><a href="index.html">Posts page</a></li>
<li><a href="comments.html">Post comments</a></li>
<li><a href="page.html">Sample test page</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="empty.html">Empty page</a></li>
</ul>
Мы просто заменим эти ссылки на свои, ничего сложного. В зависимости от того, какие модули системы Вы будете использовать на своём сайте, будут и Ваши ссылки в меню, я же для примера напишу следующее:
Code
<ul>
<li class="current_page_item"><a href="/load/">Каталог файлов</a></li>
<li><a href="/publ/">Каталог статей</a></li>
<li><a href="/blog/">Блог</a></li>
<li><a href="/forum/">Форум</a></li>
<li><a href="/photo/">Фотоальбомы</a></li>
</ul>
Попробуйте, меню уже работает!
А вот теперь начинается самое интересное: дальше в шаблоне идёт какой-то контент (содержимое), в данном случае это три добавленных материала с заголовками Porttitor posuere, Adipiscing, Interdum.
Оформление материалов (или как принято обозначать в системе uCoz - "Вид материалов") одинаковое, поэтому нам нужно найти в коде шаблона повторяющийся одинаковый html-код, отвечающий за оформление этих материалов,а вот и он:
Code
<div class="post">
<div class="post_top">
<div class="post_title"><h2><a href="#">Porttitor posuere</a></h2></div>
<div class="post_date">Jun 13, 2006 by Vulputate</div>
</div>
<div class="post_body">
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
<blockquote>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
</blockquote>
<h2>Sollicitudin</h2>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.</p>
</div>
<div class="post_metadata">
<div class="content">
<span class="comment"><a href="#">2 Comments</a></span>
</div>
</div>
</div>
<div class="post">
<div class="post_top">
<div class="post_title"><h2><a href="#">Adipiscing</a></h2></div>
<div class="post_date">Jun 11, 2006 by Laoreet</div>
</div>
<div class="post_body">
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi.</p>
<ul>
<li>Tristique</li>
<li>Aenean</li>
<li>Pretium</li>
</ul>
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
</div>
<div class="post_metadata">
<div class="content">
<span class="comment"><a href="#">11 Comments</a></span>
</div>
</div>
</div>
<div class="post">
<div class="post_top">
<div class="post_title"><h2><a href="#">Interdum</a></h2></div>
<div class="post_date">May 24, 2006 by Lectus</div>
</div>
<div class="post_body">
<p>Praesent nisi sem, bibendum in, ultrices sit amet, euismod sit amet, dui. Donec varius tincidunt nisi. Ut ut sapien. Integer porta. Fusce nibh. Curabitur pellentesque, lectus at <a href="index.html">volutpat interdum</a></p>
<h3>Sem justo</h3>
<p>Placerat elit, eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie. Nullam semper massa eget ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque a nibh quis nunc volutpat aliquam</p>
<code>
margin-bottom: 12px;<br/>
font: normal 1.1em "Lucida Sans Unicode",serif;<br/>
background: url(img/quote.gif) no-repeat;<br/>
padding-left: 28px;<br/>
color: #555;<br/>
</code>
<p>Eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie.</p>
</div>
<div class="post_metadata">
<div class="content">
<span class="comment"><a href="#">6 Comments</a></span>
</div>
</div>
</div>
Чтобы нам было проще ориентироваться, удалим два ненужных материала и оставим код первого материала за основу:
Code
<div class="post">
<div class="post_top">
<div class="post_title"><h2><a href="#">Porttitor posuere</a></h2></div>
<div class="post_date">Jun 13, 2006 by Vulputate</div>
</div>
<div class="post_body">
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
<blockquote>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
</blockquote>
<h2>Sollicitudin</h2>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.</p>
</div>
<div class="post_metadata">
<div class="content">
<span class="comment"><a href="#">2 Comments</a></span>
</div>
</div>
</div>
Cохраним изменения в шаблоне "Страницы сайта" и смотрим, что у нас получилось. А получилось у нас вот что: дизайн страницы остался тем же, только материалов новостей стало на два меньше.
Теперь нужно понять, что вместо материала новости, имеющегося в шаблоне, должны быть наши новости, которые мы сами будем добавлять на свой сайт!
А как мы помним, за вывод материалов новостей у нас отвечает системный код $CОNTENT$, значит мы должны вставить этот системный код в наш шаблон вместо демо-материала.
Что мы и делаем. Вместо:
Code
<div class="post">
<div class="post_top">
<div class="post_title"><h2><a href="#">Porttitor posuere</a></h2></div>
<div class="post_date">Jun 13, 2006 by Vulputate</div>
</div>
<div class="post_body">
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
<blockquote>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
</blockquote>
<h2>Sollicitudin</h2>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.</p>
</div>
<div class="post_metadata">
<div class="content">
<span class="comment"><a href="#">2 Comments</a></span>
</div>
</div>
</div>
Вставляем:
Code
$CONTENT$
Cохраняем изменения и смотрим, что получилось:
Отлично, всё работает. Наш системный код выдал нам, что: Добавленных материалов на данный момент нет и дал нам ссылку на добавление этих самых материалов.
Чтож, добавим какую-нибудь тестовую новость.
Теперь у нас есть тестовый материал новостей сайта и оформлен он в соответствии со стандартным кодом системы uCoz для выбранного нами в самом начале дизайна # 971
Нам же необходимо, чтобы оформление новостей было как в скачанном шаблоне сайта. Нет ничего проще: помните повторяющийся код демо-материалов? именно его мы и вставим в шаблон "Новости -Вид материалов"!
Открываем шаблон "Новости сайта - Вид материалов" и заменяем имеющийся там стандартный код на наш, предварительно скопировав и сохранив стандартный код в файл "Блокнот" на компьютере (мы туда потом будем подглядывать)
Code
<div class="post">
<div class="post_top">
<div class="post_title"><h2><a href="#">Porttitor posuere</a></h2></div>
<div class="post_date">Jun 13, 2006 by Vulputate</div>
</div>
<div class="post_body">
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
<blockquote>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
</blockquote>
<h2>Sollicitudin</h2>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.</p>
</div>
<div class="post_metadata">
<div class="content">
<span class="comment"><a href="#">2 Comments</a></span>
</div>
</div>
</div>
В продолжении нашего урока мы проинспектируем вставленный код и заставим его работать по-нашему, по юкозовски!)
Всего комментариев: 2
Ок,спасибо,исправлю
В статье вставляем код не
Code
$CONTENT
а $CONTENT$. А то ничего не работает )))
И убери тег альт на кнопке Добавить комментарий!!!