Эпиграф в стиле tumblr (перевод windymind)
Сколько раз я сталкивался с тем, что люди, пытающиеся в первый раз сделать дизайн форума, задавали кучу вопросов, ответ на которые нельзя было найти, не обидев при этом бедных юзеров. Поэтому мне хочется рассказать о структуре форума (может быть даже доступным и понятным языком).
Люди, которые впервые открывают страницу «Свой стиль» и видят кучу страшного и непонятного текста, приходят в ужас – это совсем не соотносится с тем, с чем они привыкли работать. Особенно страшно лезть туда фотошоперам. Именно для них будет проходить мое краткое объяснение.
В фотошопе работающие с ним привыкли видеть простую картину – холст и слои на холсте. Вроде бы все понятно. Форум – тоже штука многослойная, но у ее слоев есть неприятное свойство. Это свойство – родительско-дочерние отношения. Но об этом позже.
Основной слой любой страницы, который всегда по высоту и ширине соответствует окну браузера, это body.
Чтобы хорошо его себе представлять, можно взять большой лист, скажем, прозрачного пластика, как в аниматорском искусстве.
Первичному слою можно задавать css-свойства фона. И хватит с того. Для body все прочие элементы являются дочерними, то есть располагаются только внутри него.
Следующий слой, который есть у нас на странице – блок с уникальным идентификатором pun_wrap. В css к любому элементу можно обратиться по селектору id - #индентификатор. Запомните – id уникален, на странице не может быть нескольких элементов с одинаковым id. #pun_wrap, если вы не меняли настроек, занимает всю область body (то есть, фактически, всю страницу). Ему тоже можно задавать свой собственный фон. Конечно, при особом желании можно применить другие свойства, но, поверьте, пользы лично вам это не принесет. Одни хлопоты.
Мы кладем на большой лист с подписью body еще один, такой же большой, и подписываем его #pun_wrap.
Внутри #pun_wrap находится тело форума – блок с id #pun. Ему можно задавать ширину, при желании – отступы от верха и самого низа страницы, и, конечно же, прописывать ему фон.
Поверх листа с подписью #pun_wrap мы кладем листок уже меньшей ширины, и его подписываем #pun. У нас уже три прозрачных листа, и каждому мы при желании можем назначить собственные фоны.
Внутри #pun находится элемент с классом .punbb . Класс у него всегда один и тот же, а вот уникальные индентификаторы могут быть разными: например, для главной страницы это #pun-index, для страницы со списком тем в форуме - #pun-viewforum, для страницы темы - #pun-viewtopic, для страницы со списком участников - #pun-userlist, для страницы поиска - #pun-search и так далее, потому что остальное умные люди посмотрят в коде форума, а не слишком находчивые просто спросят. К чему я это веду. Да просто к тому, что им всем можно прописывать разные фоны. От слова совсем. Тем не менее, они останутся элементами с классом .punbb, и к ним ко всем будут применяться его свойства – например, ширина, отступы, закругленные края и прочее.
.punbb – родительский элемент для всех последующих. Даже если вы поставите какому-то из следующих блоков ширину больше, чем у .punbb, он все равно левым краем будет ровно по левому краю родительского элемента. Вот такое вот уважение к отцам.
Вот и положили мы уже четвертый листок поверх всех тех. Пока мы видим – они все являются единственными дочерними элементами для своих родителей, поэтому по умолчанию заполняют всю их высоту. Дальше мы начнем складывать детишек в один блок, и потому они будут располагаться друг под другом, если только добрый дизайнер не начнет с ними шаманить и прописывать им position: absolute, то есть абсолютное позиционирование на странице, и абсолютные отступы от верха и от края.
#html-header – блок с html-кодами, который люди обычно не трогают. Ну, этикет такой. Можно, конечно, заменить им шапку, если присвоить ему нормальную высоту, ширину и фон.
↓
#pun-title – блок, соответствующий шапке форума. Все помнят – он не шире, чем .punbb. Самый верхний из всех блоков. С ним все просто и как всегда – фон, высота и прочие радости жизни.
↓
Под #pun-title находится #pun-navlinks – контейнер с основной форумной навигацией. Все то же самое.#pun-ulinks – полезные юзерские ссылки.
↓
#pun-status – полезная информация.
↓
Дальше идет невидимые и чаще всего никому не нужные разделители, внутри которых находится так называемая строка пути, которая указывает человеку, где внутри форума он примерно по глубине находится - #pun-crumbs1. Вторая такая же находится внизу, о ней позже.
↓
Дальше находится #pun-main – основной контейнер. Он либо содержит в себе список категорий, либо список форумов, либо сообщения в теме.
Детально разбирать о том, что находится в #pun-main я пока не буду. Попросят – сделаю и объясню, а пока, думаю, можно остановиться на том, что в ней находится основной контент страницы.
↓
Под #pun-main, опять же, внутри разделительных блоков находится вторая строка пути - #pun-crumbs2. На главной же странице форума после блока основной информации находится блок статистики - #pun-stats, и только потом - строка пути.
↓
Следующий за этим контейнер, содержащий, скажем так, рекламу от платформы (типа «Рейтинг форумов | Создать форум бесплатно») это #pun-about.
↓
И последний контейнер на странице всегда #html-footer. В него люди обычно запихивают скрипты, баннеры и счетчики, которые отображаются внизу.
В общем-то, у нас получилась неплохая картина: два слоя на весь экран, два слоя под тело форума, а последний содержит по порядку верхний, кучу средних и самый нижний блок. Как разрезать теперь вам макет, который вы создавали в фотошопе, вроде бы должно стать чуть-чуть понятнее. Если все еще непонятно – просто попробуйте на самом деле взять листы бумаги. Объемное мышление и воображение – прекрасная вещь, присущая человеку.
