Разделы Сайта АниДо
new posts members rules search rss
  • Страница 1 из 1
  • 1
Форум » Бесплатные конструкторы сайтов » JimDo » Как создать шаблон на JimDo? (Инструкции и список переменных)
Как создать шаблон на JimDo?
ShizukuДата: Среда, 21.08.13, 23:16 | Сообщение #1
Shizuku


Группа: Моск
Сообщений: 8
Репутация: 0

Свой дизайн на JimDo

Здесь можно интегрировать собственный шаблон в Jimdo-сайт, и таким образом, кардинально изменить внешний вид своего сайта.

Так просто это все работает:
  1. Скопируй исходный HTML-код и вставь его во вкладке HTML.
  2. кликни на xhtml - система автоматически вырежет важный код (для Jimdo необходима только Body-область, Head-область можно обработать позже в Настройки » Head-область) и проверит его на корректность.
  3. Скопируй CSS-код своего шаблона и вставь его его во вкладке CSS.
  4. Загрузи необходимые для шаблона изображения во вкладке Файлы.
  5. Не забудь сохранить, и готово!

И просмотри наше демо-видео! В данном видео наглядно объясняется, как перенести дизайн обычной HTML страницы на JimDo:



HTML: переменные шаблона

Как вы наверно уже знаете, каждый шаблон состоит из разных областей. В Jimdo-шаблонах данные области: Content, Navigation, Sidebar и Footer являются обязательными. Области должны быть обязательно определенны в твоем шаблоне, а также соответствовать нашему обозначению (иначе они не будут признаны нашей системой)! Ты должен заменить свои области шаблона следующими Jimdo-областями.

Content-область

Это область содержания, здесь необходимо заменить свою область следующей областью: content

Боковая область

Это вторая область содержания, которую мы обычно интегрируем в боковое меню. В этой области содержится также Jimdo-окошко (Логотип с выпадающим меню). Боковое меню можно увидеть на каждой подстранице.

sidebar

Область навигационного меню

В данную область можно вставить навигационное меню Jimdo. После настройки навигационного меню, можно будет легко добавлять, удалять, переименовывать или переносить желаемые страницы.

navigation[1|2|3]

Навигационное меню, сгенерированное в Jimdo выглядит следующим образом:

<ul id="mainNav1">
<li><a href="/">Page 1</a></li>
<li><a href="/page-2/">Page 2</a></li>
<li><a href="/page-3/" class="current">Page 3</a></li>
<li>
<ul id="mainNav2">
  <li><a href="/page-3/subpage-1/">Subpage 1</a></li>
  <li><a href="/page-3/subpage-2/">Subpage 2</a></li>
</ul>
</li>
<li><a href="/page-4/">Page 4</a></li>
<li><a href="/page-5/">Page 5</a></li>
</ul>

Нижняя область страницы

Это нижняя область Jimdo-страницы, где также находится ссылка для входа на страницу.

footer

CSS

В CSS-область можно вставить свой CSS-код. В следующих подкатегориях можно найти несколько примеров/советов для каждого CSS-элемента.

Навигационное меню

Пример CSS-форматирования навигационного меню:

ul#mainNav1,
ul#mainNav2
{
margin:0;
padding: 0;
}

ul#mainNav1 li,
ul#mainNav2 li
{
display:inline;
margin:0;
padding:0;
}

ul#mainNav1 li a,
ul#mainNav2 li a
{
font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
color:#333;
border-bottom:1px solid #ccc;
}
ul#mainNav1 li a { padding:4px 4px 4px 4px; }
ul#mainNav2 li a { padding:4px 4px 4px 14px; }
ul#mainNav1 a:hover { background:#eee; color:black; }
ul#mainNav1 a.current { font-weight:bold; }

Вот так должен выглядеть путь в CSS-коде для использования фоновых изображений:

background-image: url(test.gif);

Файлы

Начальная страница файлов

Изображения необходимо декларировать в HTML-коде без указания их пути:

<img src="test.gif" />

На данное место можно загрузить другой Javascipt (*.js)-код. Он будет автоматически добавлен в Head-область. Head-область можно отредактировать вручную в Настройки » Head-область.
 
ShizukuДата: Суббота, 31.08.13, 19:24 | Сообщение #2
Shizuku


Группа: Моск
Сообщений: 8
Репутация: 0 		В JimDo всего четыре обязательные переменные, которые обязательно использовать на странице:

<var>content</var>

Содержимое страницы. На каждой странице сайта оно будет разным и полностью зависеть от Вас.
Код
<div id="content_area" data-container="content"><div id="content_start"></div>
<div id="cc-matrix-id"><div class="n j-header"><h1 id="cc-m-header-id">Your Heading</h1></div></div>
</div>


<var>sidebar</var>

Боковой блок. Туда входит логотип сервиса JimDo и реклама.
Код
<div data-container="sidebar"><div id="cc-matrix-id"></div></div>


<var>navigation[1|2|3]</var>

Навигационное меню сайта. Там расположены ссылки на все его страницы.
Код
<div data-container="navigation"><div>
<ul id="mainNav1">
   <li><a href="/">Страница 1</a></li>
   <li><a href="/page-2/">Страница 2</a></li>
   <li><a href="/page-3/" class="current">Текущая страница 3</a></li>
   <li>
   <ul id="mainNav2">
     <li><a href="/page-3/subpage-1/">Дочерняя страница 1</a></li>
     <li><a href="/page-3/subpage-2/">Дочерняя страница 2</a></li>
   </ul>
   </li>
   <li><a href="/page-4/">Страница 4</a></li>
   <li><a href="/page-5/">Страница 5</a></li>
</ul>
</div></div>



<var>footer</var>

Нижний блок сайта. Туда входят несколько ссылок, включая ссылку входа на сайт.
Код
<div id="contentfooter" data-container="footer">
<div class="inforow"></div><div class="leftrow"><a rel="nofollow" href="#">About</a> | <a rel="nofollow" href="#"><img class="inline" height="14" width="18" src="http://s.jimdo.com/s/img/cc/printer.gif" alt="druckversion"/>Print Version</a> | <a href="#">Sitemap</a></div>
<div class="rightrow"><span class="loggedout"><a rel="nofollow" id="login" href="#">Login</a></span> <span class="loggedin"><a rel="nofollow" id="logout" href="#">Jimdo logout</a> | <a rel="nofollow" id="edit" href="#">Edit</a></span></div>
</div>
 
Форум » Бесплатные конструкторы сайтов » JimDo » Как создать шаблон на JimDo? (Инструкции и список переменных)
  • Страница 1 из 1
  • 1
Поиск:

0

Новые Посты АниДо
0

Аниме Наруто Братья Джонас Anime.an70n.com

В этом блоге публикуются полезные заметки о
программировании, дизайне и сайтостроении, а также
переводы манги, видео и электронных книг на русский.
Все права на текстовый контент принадлежат хозяйке сайта. При копировании материалов с этого сайта обязательна активная ссылка на источник!
Google · Автор дизайна Evan Eckard, а Хостинг от uCoz