Персональный блог Мэдисон

Персональный блог Мэдисон http://anido.3dn.ru/ Форум Sat, 31 Aug 2013 15:24:06 GMT uCoz Web-Service Как создать шаблон на JimDo? https://anido.3dn.ru/forum/15-5-1 Sat, 31 Aug 2013 15:24:06 GMT Форум: <a href="https://anido.3dn.ru/forum/15">JimDo</a><br />Описание темы: Инструкции и список переменных<br />Автор темы: Shizuku<br />Автор последнего сообщения: Shizuku<br />Количество ответов: 1 <p class="c"><img src="https://anido.3dn.ru/_fr/0/5312253.png" alt="Свой дизайн на JimDo" /></p> <p>Здесь можно интегрировать собственный шаблон в Jimdo-сайт, и таким образом, кардинально изменить внешний вид своего сайта.</p> Так просто это все работает: <ol> <li>Скопируй исходный HTML-код и вставь его во вкладке <samp>HTML</samp>.</li> <li>кликни на <samp>xhtml</samp> - система автоматически вырежет важный код (для Jimdo необходима только Body-область, Head-область можно обработать позже в <samp>Настройки</samp> » <samp>Head-область</samp>) и проверит его на корректность.</li> <li>Скопируй CSS-код своего шаблона и вставь его его во вкладке <samp>CSS</samp>.</li> <li>Загрузи необходимые для шаблона изображения во вкладке <samp>Файлы</samp>.</li> <li>Не забудь сохранить, и готово!</li> </ol> <p>И просмотри наше демо-видео! В данном видео наглядно объясняется, как перенести дизайн обычной HTML страницы на JimDo:</p> <object width="640" height="360"><param name="movie" value="http://www.youtube.com/v/SDMvw6fNDR4&hl=en_US&feature=player_embedded&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/SDMvw6fNDR4&hl=en_US&feature=player_embedded&version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></embed></object> <hr /><br /><br /> <h2 class="c">HTML: переменные шаблона</h2> <p>Как вы наверно уже знаете, каждый шаблон состоит из разных областей. В Jimdo-шаблонах данные области: <samp>Content</samp>, <samp>Navigation</samp>, <samp>Sidebar</samp> и <samp>Footer</samp> являются обязательными. Области должны быть обязательно определенны в твоем шаблоне, а также соответствовать нашему обозначению (иначе они не будут признаны нашей системой)! Ты должен заменить свои области шаблона следующими Jimdo-областями.</p> <h4>Content-область</h4> <p>Это область содержания, здесь необходимо заменить свою область следующей областью: <var>content</var></p> <h4>Боковая область</h4> <p>Это вторая область содержания, которую мы обычно интегрируем в боковое меню. В этой области содержится также Jimdo-окошко (Логотип с выпадающим меню). Боковое меню можно увидеть на каждой подстранице.</p> <var>sidebar</var> <h4>Область навигационного меню</h4> <p>В данную область можно вставить навигационное меню Jimdo. После настройки навигационного меню, можно будет легко добавлять, удалять, переименовывать или переносить желаемые страницы.</p> <var>navigation[1|2|3]</var> <p>Навигационное меню, сгенерированное в Jimdo выглядит следующим образом:</p> <code class="codeMessage"><ul id="mainNav1"><br /> <li><a href="https://anido.3dn.ru/">Page 1</a></li><br /> <li><a href="https://anido.3dn.ru/page-2/">Page 2</a></li><br /> <li><a href="https://anido.3dn.ru/page-3/" class="current">Page 3</a></li><br /> <li><br /> <ul id="mainNav2"><br />   <li><a href="https://anido.3dn.ru/page-3/subpage-1/">Subpage 1</a></li><br />   <li><a href="https://anido.3dn.ru/page-3/subpage-2/">Subpage 2</a></li><br /> </ul><br /> </li><br /> <li><a href="https://anido.3dn.ru/page-4/">Page 4</a></li><br /> <li><a href="https://anido.3dn.ru/page-5/">Page 5</a></li><br /> </ul></code> <h4>Нижняя область страницы</h4> <p>Это нижняя область Jimdo-страницы, где также находится ссылка для входа на страницу.</p> <var>footer</var> <hr /><br /> <h2 class="c">CSS</h2> <p>В CSS-область можно вставить свой CSS-код. В следующих подкатегориях можно найти несколько примеров/советов для каждого CSS-элемента.</p> <h4>Навигационное меню</h4> <p>Пример CSS-форматирования навигационного меню:</p> <code class="codeMessage">ul#mainNav1,<br />ul#mainNav2<br />{<br />margin:0;<br />padding: 0;<br />}<br /><br />ul#mainNav1 li,<br />ul#mainNav2 li<br />{<br />display:inline;<br />margin:0;<br />padding:0;<br />}<br /><br />ul#mainNav1 li a,<br />ul#mainNav2 li a<br />{<br />font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;<br />text-decoration: none;<br />display: block;<br />color:#333;<br />border-bottom:1px solid #ccc;<br />}<br />ul#mainNav1 li a { padding:4px 4px 4px 4px; }<br />ul#mainNav2 li a { padding:4px 4px 4px 14px; }<br />ul#mainNav1 a:hover { background:#eee; color:black; }<br />ul#mainNav1 a.current { font-weight:bold; }</code> <p>Вот так должен выглядеть путь в CSS-коде для использования фоновых изображений:</p> <code class="codeMessage">background-image: url(test.gif);</code> <hr /><br /> <h2 class="c">Файлы</h2> <h4>Начальная страница файлов</h4> <p>Изображения необходимо декларировать в HTML-коде без указания их пути:</p> <code class="codeMessage"><img src="test.gif" /></code> <p>На данное место можно загрузить другой Javascipt (*.js)-код. Он будет автоматически добавлен в Head-область. Head-область можно отредактировать вручную в <samp>Настройки</samp> » <samp>Head-область</samp>.</p> JimDo Shizuku https://anido.3dn.ru/forum/15-5-1