Пример компоновки заглавной
Шаг 1: Колонки[]
Как правило, код Заглавной страницы довольно сложен, поэтому при редактировании Заглавной страницы вам лучше сразу перейти в режим исходного кода. Это позволит вам видеть и добавлять на страницу теги, которые помогут отформатировать страницу, изменить дизайн элементов и др.
Если ваша вики была создана недавно, то она обладает стандартной Заглавной страницей, на которой вас уже ждут подсказки. В первую очередь, это теги колонок для Заглавной страницы. С их помощью можно легко и просто придать Заглавной странице стройный вид, не вымеряя вручную ширину отдельных разделов. Теги колонок создают на Заглавной странице две колонки: левую, которая имеет динамический размер и изменяет свою ширину в зависимости от разрешения экрана пользователя (минимальный размер колонки — 700рх), и правую, которая имеет стандартную ширину в 300рх. Всё содержимое колонок вам нужно разместить между тегами, как указано ниже. Помните, что эти теги колонок указываются один раз. Не нужно многократно повторять их на странице.
<mainpage-leftcolumn-start /> Содержимое левой колонки <mainpage-endcolumn /> <mainpage-rightcolumn-start /> Содержимое правой колонки <mainpage-endcolumn />
Шаг 2: Оформление текста тегами[]
- Справка:HTML содержит список всех поддерживаемых тегов
Если вы хотя бы раз заглядывали в код Заглавных страниц топовых википроектов, вы наверняка видели теги span и div, а также br. Тег div используется чаще других, так как позволяет разбивать текст и другое содержимое на блоки. Тег br применяется для создания переноса строки. На первый взгляд используемая конструкция выглядит довольно сложно. Давайте разберем её на примере небольшого приветственного сообщения на вики.
- Код
<div style="border:4px solid #00bdbf; background:#f6f6f6; text-align:center; font-size:150%; color:#002a32">'''Добро пожаловать на<br />Вики Сообщества!'''</div>
- Результат
Вики Сообщества!
- Описание
- div — главный тег, чей стиль задет внешний вид содержимого. Обратите внимание на его парность: <div> ставится в начале форматируемой строки, </div> (с косой чертой) — в конце строки;
- border — рисует рамку (в данном случае ширина линии рамки составляет 4 пикселя);
- solid — параметр указывает, что рамка будет сплошной линией; после указан цвет рамки (Подробнее см. Справка:Цвет).
- background — отвечает за фоновый цвет (в данном случае красный);
- text-align — отвечает за форматирование текста (в данном случае по центру);
- font-size — указывает размер шрифта (в данном случае 150%, т.е. на 50% крупнее, чем стандартный шрифт страницы);
- color — указывает цвет текста (в данном случае белый);
- br — перемещает слова «Тест вики!» на вторую строку.
Аналогичный код можно использовать для создания заголовков разделов, что мы рассмотрим далее.
Шаг 3: Навигация[]
Наиболее простой способ создать раздел навигации — это использовать таблицу и списки. Это позволит вам быстро и эффективно рассказать читателям о содержимом вашей вики. Например,
- Код
<div style="border:4px solid #00bdbf; background:#f6f6f6; text-align:center; font-size:150%; color:#002a32">'''Содержание вики'''</div>
{| style="width: 100%"
|
*[[Видеоигры]]
**[[Игра 1]]
**[[Игра 2]]
**[[Игра 3]]
|
*[[Персонажи]]
**[[Персонаж 1]]
**[[Персонаж 2]]
**[[Персонаж 3]]
|
*[[Оружие]]
**[[Оружие 1]]
**[[Оружие 2]]
**[[Оружие 3]]
|}
- Результат
|
|
|
Второй способ — это комбинация из текста и изображений. Данный приём позволит вам разнообразить Заглавную страницу, добавив на неё визуальную составляющую. Простым способом осуществить это является использование галереи. Например,
- Код
<div style="border:4px solid #00bdbf; background:#f6f6f6; text-align:center; font-size:150%; color:#002a32">'''Навигация'''</div> <gallery orientation="portrait" widths="150" position="center" spacing="small" navigation="true" hideaddbutton="true"> TES Obvilion.jpg|link=Игры|[[Игры]] TES Skyrim.jpg|link=Противники|[[Противники]] TES online слайдер.jpg|link=Персонажи|[[Персонажи]] </gallery>
- Результат
Обновляемый контент[]
Интерактивные и автоматически обновляемые разделы — это простой способ добавить на Заглавную страницу свежую информацию без необходимости обновлять страницу вручную. Для этого можно использовать:
- списки блогов,
- галерею со свежими изображениями,
- таймер обратного отсчёта, случайные цитаты и случайное видео.
О тегах и кодах, которые добавляют на страницу эти элементы, вы можете прочитать на соответствующих справочных страницах.
Шаг 4: Правая колонка[]
В правую колонку Заглавной страницы можно поместить второстепенные элементы, которые менее важны для Заглавной страницы. Например, список блогов.
Дополнительные элементы[]
Inputbox[]
С помощью этого тега можно указать новичкам способ быстрого создания новой статьи. Это очень помогает на первых этапах развития вики, когда список требуемых страниц почти пуст и красных ссылок на страницах вики не так много. Лучше поместить этот элемент в правую колонку.
См. статью Справка:Inputbox.
Видео[]
Присутствие видеоролика на Заглавной странице — это ещё один интерактивный элемент, который может привлечь внимание к вики. Лучше размещать видео в левой колонке, чтобы можно было посмотреть его в хорошем качестве, а не вглядываться в мелкие детали, если разместить его в узкой правой колонке.
См. статью Справка:Видео.
Социальные группы[]
Обмен ссылками с другими википроектами и группами в социальных сетях — отличный способ привлечь новых читателей и участников или показать платформы, где могут быть активны участники вики. На Заглавной странице можно выделить специальный раздел для этого, поместив туда виджеты социальных сетей и ссылки на дружественные вики.
Простейшим способом сотрудничества являются межъязыковые ссылки, которые связывают между собой вики на разных языках. Почему они находятся внизу страницы? Потому что, как уже говорилось выше, приоритетом у поисковых ботов должна быть ваша вики, а не другие, даже дружественные, википроекты и группы в социальных сетях.
См. статьи Справка:Виджеты социальных сетей и Справка:Межъязыковые ссылки.