Шаблоны страниц
Что можно найти на этой странице?
Здесь можно найти шаблоны для главных и второстепенных страниц тематических разделов второго порядка. Тематические разделы второго порядка это:
- персональные страницы преподавателей;
- ресурсные страницы курсов;
- публикации в библиотеке.
При разработке тематического раздела второго порядка следует помнить, что все файлы, имеющие отношение к данному разделу, должны хранится в отдельном каталоге. Подробнее о функциональных типах страниц и о принципах размещения файлов по каталогам можно прочитать в разделе информационная схема сайта.
Кроме шаблонов страниц, в этом разделе можно найти конструктор и таблицу стилей, используемую на нашем сайте. Конструктор содержит кусочки кода страниц, которые можно использовать при разработке. Таблица стилей не подлежит изменению и показана только для того, чтобы проинформировать авторов об особенностях оформления элементов и классов элементов.
Как работать с шаблонами?
С шаблонами надо поступать следующим образом.
- Создать пустой текстовый документ с нужным именем в редакторе «блокнот» (notepad).
- Выбрать интересующий вас шаблон.
- Выделить текст кода, заключенный в рамку, и скопировать его в приготовленный файл.
- Используя код как образец, заменить содержимое элементов (в шаблоне выделено красным) на нужный вам материал.
В роли шаблона может выступить любая из уже готовых страниц, имеющихся на сайте. Нет ничего зазорного в том, чтобы взять сделанную коллегой страницу за основу при изготовлении своей. Помните, что ко всем страницам, хранящимся на , сервер добавляет в конец специальный код для всплывающего окна с рекламой. Код окна расположен сразу после закрывающего тэга </html>. Прежде чем использовать файл в качестве шаблона, этот код необходимо удалить.
Вместо notepad можно использовать любой другой более удобный текстовый редактор (Word, Write, текстовый редактор Open Office). Следует учесть, что большинство редакторов производят автозамену кавычек с прямых (") на парные разного рода (например, « или ”), а дефисов--на длинные тире. Если прямые кавычки, входящие в состав элементов HTML кода, заменятся на парные, то эти элементы не будут интерпретироваться правильно. Длинные тире тоже могут отображаться неправильно. О вводе их и ряда других символов подробнее см. в разделе справочные материалы. Чтобы быть уверенным в отображаемости документа, надо после правки в развитых редакторах типа Word «довести» код в notepad. Подробнее об этапах работы над страницей см. раздел план работ.
В каком бы редакторе вы не работали, документ необходимо сохранять в формате «только текст» (text only) с расширением .html
Шаблоны страниц
Обобщенный шаблон главной страницы раздела
При изменении шаблона следует помнить следующее:
- Любой раздел второго порядка может относится к одному и только одному из трех разделов первого порядка: преподаватели, курсы, библиотека.
- Файл, в котором находится главная страница раздела, всегда должен носить имя index.html.
Подробнее обо всем этом см. раздел информационная схема сайта.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Short Title of the Level 2 Division / Department of Humanities :: HSE[StPb]</title>
<link rel="stylesheet" type="text/css" href="../../main.css">
</head>
<body>
<p class="nav"><a href="../../index.html">Кафедра гуманитарных наук СПбФ ГУ ВШЭ</a> » <a href="../index.html">Раздел первого порядка</a> » Раздел второго порядка</p>
<p class="map"><a title="Переход к карте сайта [http://dhhse.narod.ru/sitemap/]" href="../../sitemap/">Карта сайта</a></p>
<div class="corpus">
<h1>Полное название раздела второго порядка</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<p>Просто текст абзаца, <em>эмфазис</em>, <strong>сильный эмфазис</strong>, <a href="path/filename.ext">текст ссылки</a><p>
<ul>
<li>Пункт ненумерованного списка</li>
<li>Пункт ненумерованного списка</li>
</ul>
<ol>
<li>Пункт нумерованного списка</li>
<li>Пункт нумерованного списка</li>
</ol>
<dl>
<dt>Первый определяемый термин</dt><dd>Определение первого термина</li>
<dt>Второй определяемый термин</dt><dd>Определение второго термина</li>
</dl>
<table>
<caption><strong>Таблица 1.</strong> Заголовок таблицы</caption>
<tr><th>Заголовок первого столбца</th><th>Заголовок второго столбца</th></tr>
<tr><td>Первая ячейка таблицы</td><td>Вторая ячейка таблицы</td></tr>
<tr><td>Третья ячейка таблицы</td><td>Четвертая ячейка таблицы</td></tr>
</table>
</div>
<p class="addr">Наш адрес: ул. Союза Печатников, д. 16, С-Петербург, 190008<br>Тел.: +7 (812) 714-25-44<br>E-mail: <a href="mailto:dephuman@hse.spb.ru">dephuman@hse.spb.ru</a></p>
</body>
</html>
Как будет выглядеть главная страница раздела в интернет-браузере?
Помните, что при редактировании на вашем персональном компьютере это страница будет выглядеть так только в том случае, если она правильным образом расположена относительно таблицы стилей. Как это сделать, см. в разделе план работ.
Чем будет отличаться шаблон второстепенной страницы раздела?
Второстепенная страница раздела отличается от главной следующим: в элементе <title>…</title> и в навигационной строке после краткого названия раздела появится краткое название страницы. Разумеется, и заголовок первого уровня (<h1>…</h1>) с полным названием страницы тоже станет другим.
В приведенном ниже шаблоне показаны:
- начало файла второстепенной страницы раздела второго уровня, которое отличается от начала файла главной страницы;
- самый конец файла, который должен напомнить, что все открытые тэги-контейнеры должны быть закрыты.
Середина опущена, поскольку в этом примере она была бы такая же, как и в предыдущем.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Short Title of the Level 2 Division: Short Page Title / Department of Humanities :: HSE[StPb]</title>
<link rel="stylesheet" type="text/css" href="../../main.css">
</head>
<body>
<p class="nav"><a href="../../index.html">Кафедра гуманитарных наук СПбФ ГУ ВШЭ</a> » <a href="../index.html">Раздел первого порядка</a> » <a href="index.html">Раздел второго порядка</a> » Краткое назв. страницы</p>
<p class="map"><a title="Переход к карте сайта [http://dhhse.narod.ru/sitemap/]" href="../../sitemap/">Карта сайта</a></p>
<div class="corpus">
<h1>Полное название второстепенной страницы</h1>
...
</div>
<p class="addr">Наш адрес: ул. Союза Печатников, д. 16, С-Петербург, 190008<br>Тел.: +7 (812) 714-25-44<br>E-mail: <a href="mailto:dephuman@hse.spb.ru">dephuman@hse.spb.ru</a></p>
</body>
</html>
Как будет выглядеть второстепенная страница раздела в интернет-браузере?
Помните, что при редактировании на вашем персональном компьютере это страница будет выглядеть так только в том случае, если она правильным образом расположена относительно таблицы стилей. Как это сделать, см. в разделе план работ.
