На этом этапе мы будем готовить "детали" для нашего будущего дизайна. Не ну чо эт самое сложное и вместе с тем интересное занятие) думаю многие уже знают где искать то что им нужно, но для тех кто не знает дам откуда я беру исходники на свободную тематику (ну не беру дизайны рол по фильмам и тэпэ). раз и двас. Надеюсь все умеют пользоваться семи ресурсами и открывать на них всю галлерею понравившегося исха. так вот для начала попробуем найти и сделать что то совсем простенькое)) совсем! исходники могут быть с лесами, полями, озерами, городами, что то нейтральное).о да, открыли эту всю найденную красоту в фотошопе. новый док создаем размером 1700х1000 (ну я таким его делаю, а вы смотрите сами но учтите что у всех экраны разные и лучше взять нууу не сильно но поболее. я беру почти оптимальный оо) и переносим все) делаем фон) пока без шапки! у нас другой вид дизайна на котором мы и будем надрачиваться хд
хочу видеть красивый качественный фон) ну относительно конечно раз уж мы учимся)) без всяких там мутных текстур, коллоров) все таки меня тож нужно жалеть хДД если фон не помещается - можно клонировать, размножать, делать из нескольких, стирая края мягким ластиком. и упаси вас бог не сохранить псд) заставлю переделывать!
сохраняем его в jpg, бережем свои нервы и трафик тех людей кто будет видеть сие великолепие. пока откладываем фон, почитайте чисто для пищеварения хдд
дизайн можно прописывать в двух местах и на двух языках. хтмл и цсс) они очень похожи, но цсс считается дополнением к хтмлу, так как мнгое в нем прописать нельзя. МЫ БУДЕМ ПРОПИСЫВАТЬ ВСЕ ЧТО МОЖНО В СТИЛЬ, А ЗНАЧИТ НА ЦСС. структура ту что нам дают великие создатели муба собстно не принципиальна, они лишь поделили для нас с вами это все на два больших раздела - цвета и структура. и на много-много маленьких. вы можете все удалить и прописать там как вам вздумается (не нужно это делать сейчас ептить хд). главное что нужно соблюдать это вид и все знаки иначе все у вас полетит хд
- Структура отвечает за расположение элементов, ее размеры, виды, ширину, длину и так далее, ее мы оставим на последок как самое-самое проблематичное.
- Цвета отвечают как раз за стиль.
Стандартно:

    #element {parameter: argument;}
    #element - это ИМЯ элемента, который мы собрались менять. Оно прописывается в начале, сопровождая элементом #. После него идут фигурные скобки, терять которые НЕЛЬЗЯ ни в коем случае {}.
    parameter: - это любое СВОЙСТВО этого элемента. Например, фон, высота, ширина, цвет, поля и т.д. Оно прописывается после открывающейся фигурной скобки, а после следует тире.
    argument- это ЗНАЧЕНИЕ свойства. Например, у свойства "фон" может быть значение голубой, оранжевый, прозрачный и т.д.

Все нужные (это не значит что все все оо) нам селекторы, параметры и аргументы мы будем разбирать постепенно, потому чтоих крайне много. желательно как я уже говорила делать справку.
возвращаясь к фону, заливаем его на хостинг и вставляем. для этого в любой части графы "цвета" лучше всего в начале самом в стиле прописываем следующий код:

body {
background-color: #ХХХХХХ;  background-image: url(адрес); background-position: top center; background-attachment: fixed;
}
Немного о коде, чтобы вы разобрались и постарались понять.  я расскажу о тех аргументах что нам встретилось.
- body - это имя элемента, который находится непосредственно на "дне" форума. Сверху прописываются таблицы и прочее. В этот боди чаще всего прописывают фон и только.
- background-color: #ХХХХХХ - сюда я всегда ставлю цвет области пун, чтобы сочиталось. этот цвет будет всегда на страницы переадресации и только (если конечно все остальное мы не будем делать прозрачным)
- background-image: url(адрес); - сюда прописываете картинку, то есть все что задается таким параметром должно содержать картинку фона, будь то таблицы, шапки, фона или еще чего нибудь.
- background-position: top center; - этот параметр отвечает за расположение твоего фона, в данном случае картинки по форуму.  Сначала указывается расположение по вертикальной оси:  top, center или  bottom, затем по горизонтальной: left, center или right. Здесь у нас по вертикали - топ, что значит фон ровняется поверху, а по горизонтали центр.
- background-attachment: fixed; - так как фон у нас не бесшовный то мы просто обязанны поставить этот параметр отвечающий за то, чтобы фон стоял на месте и не размножался, иначе будут видны стыки.
Главное не терять знаков препинания!
нажимаем да где вас спрашивают использовать ли свой стиль и сохраняем
чо не видно да?хдд ну и ладно) сейчас мы уменьшим ширину форума
#pun - это область отвечающая за расположение таблиц, за ширину, местоположение и так далее. Наверное, самый важный элемент, если такие вообще существуют.
находим у вашего браузера функцию поиск и вводим туда: pun. таким образом мы всегда ищим нужные нам теги! он должен найти это в /* A5.1 */. там мы и прописываем ширину!
width ширина элемента.  для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения
em - текущий кегль (высота шрифта);
ех - высота буквы х для текущего кегля;
рх - пикселы (относительно координат окна).
in - дюймы;
cm - сантиметры;
mm - миллиметры;
pt - пункты;
Мы будем обозначать ее только в пикселях, чтобы потом не мучатся с шапкой. Установите напротив "width" ширину равной ширине твоей области.
она обычно колеблется от 700-950 но каждый делает какая ему нравится. здесь стоит 800, я меньше не делаю. где-то 800-900 в зависимости от заказчиков. и обязательно дописать px.
в итоге получается:
/* A5.1 */
#pun {
  margin: 30px;
  position: relative;
width: 900px;
  }
я не знаю за каким, миль пардон, хером разработчики ставят в коде   margin: 30px. по мне так он совсем не нужен. ставим там auto. хотя можете попробовать поиграть с этим маргином и посмотреть что он делает ставя значение больше меньше)) кто мне скажет первый получит что нибудь в подарок хдд есть еще свойство padding - родной брат маргина) но между ними есть отличие) попробуйте тож поиграть, но аккуратно) в конце концов верните все на место а мне скажите что они делают и в чем отличие)

ребят, просто еще двоих нет. я думала подождать их, хотя ладно. и никто мне так не сказал что же делает маргин и пандин  и чем ониразличаются. а разливаются вот чем: маргин двигает элемент (в нашем случае пун) вместе с текстом, а пандин двигает ТОЛЬКО текст а основу оставляет отдельно хдд пошла себе сделаю ав* какая юля молодец)
итак, едем дальше))
для того чтобы сделать пун, нам нужно все-все сделать прозрачным) я обещала что не дам ни одной структуры и не дам хдд Для начала нужно расчистить саму область, а потом уже рамки. Для первого пункта мы заходим в админка - стиль - цвета и смотрим на самый первый пункт, который называется /* CS1 Background and text colours */. Начинаем рассматривать все это ближе. Скажу сначала что в этой первой части задается Цвет текста и фон всех элементов. Расскажу на примере первой части, а потом уже попробуете сами:

    /* CS1.1 */
    .punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
    .punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
    .punbb .info-box, .punbb #pun-main .info-box .legend {
      background-color: transpanent;
      color: #333;
      }

.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend - это все перечень селекторов. каждый из них что-то обозначает, но если они все выделены в одну группу, значит можно смело все это делать прозрачным не вникая в каждый элемент. Честно говоря вряд ли кто знает кроме самих разработчиков где находится каждый элемент, ну я конечно тоже не знаю хД Перечень всех нужных элементов есть тут. Поэтому нет смысла капаться глубже чем все есть на самом деле. А вот ссылочку запомним, она очень пригодится, когда мы станем более опытными и сможем менять элементы как нам вздумается.
  background-color: transpanent; - вот именно на это мы и меняем наш код, то есть вместо имеющегося цвета ставим "transpanent".
  color: #333; - а это текст который расположен на этом элементе, точнее его цвет. Его тоже меняем на тот который подойдет.
Везде кроме 7 части ставьте прозрачно. Цвет текста пока не меняйте. Удачи.