Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Архивы » `tsunami | Abyss


`tsunami | Abyss

Сообщений 31 страница 40 из 62

31

Abyss
Я люблю, когда ученики разбираются сами х) сейчас посмотрю))

0

32

Ладно, вот новый урок. Вернее, его первая часть, чтобы не откладывать. Потом вторую пришлю, и у тебя будут две оценки.

Добавим чего-то нового
Часть 1. Что именно мы будем добавлять? Иконки. Помнишь, мы убрали последний блок в одном из уроков. Это совсем не случайно, я хочу дать тебе более простой и хороший код, как мне кажется, для этого важного дела. Собственно, вот он. Вставляется в HTML-верх он.

<style>
.punbb table Div.icon {
float: right;
display: block;
width: ширина;
height: высота;
border-style: none;
background-image: url("иконка старых сообщений");
  background-repeat: no-repeat;
position: relative;
}
.punbb table div.inew {background: url("иконка новых сообщений") no-repeat;}
TR.isticky Div.icon {background: url("иконка важных сообщений") no-repeat;}
TR.iclosed Div.icon {background: url("иконка закрытых сообщений") no-repeat;}
</style>

Здесь все, думаю понятно. Ширину и высоту иконок я предпочитаю указывать 100х100. Пикселей, конечно. Если ты будешь делать так же, то тогда на месте моих слов "ширина" и "высота" пишешь 100px и 100px. Ты можешь взять и свои значения, но размер иконок обязательно должен соответствовать размерам, указанным в коде. Иначе ничего не получится.
На месте соответствующих слов ты вставляешь ссылки на соответствующие иконки, которые ты сделала или где-то нашла. Вот и все.

Задание
1. Делаешь или ищешь где-то иконки, подходящие по цвету и стилю к нашему дизайну.
2. Вставляешь в HTML-верх код, данный мной.
3. Делаешь в нем соответствующие исправления, вставляешь иконки.
4. Кидаешь очередной раз ссылку на тестовик мне.

0

33

`tsunami
Сделала. http://zelophone.mybb.ru/

0

34

Abyss
Ага, отлично.

0

35

Добавим чего-то нового
Часть 2. А на сей раз мы будем добавлять картинку в самый низ. Помнишь, мы даже вставляли специально для этого еще один пункт во второе окно стиля? Я очень много где использую такую картинку:
http://s3.uploads.ru/t/9oj0s.png
http://s3.uploads.ru/FgQU4.png
Ее взяла из классного урока на этом же сайте "Делаем дизайн [супернатурал]". Раньше делала каждый раз что-то разное, а теперь просто перекрашиваю такую и ставлю на ней свой копирайт. Копирайт можешь себе придумать и поставить, можешь не придумывать. Только ставь не очень высоко, в самом-самом низу, так как картинка по своему формату не соответствует нашему коду.
Загружаешь картинку через сервер, ссылку в этот код, если не помнишь:

/* CS1.9 */
#pun-about p.container {
background: transparent url("...")
bottom center no-repeat;
  }

Но перед этим в фотошопе ты должна перекрасить картинку, чтобы она соответствовала телу форума. Заливаешь и рамочку (темно-коричневая), и саму картинку (бежевую часть) тем цветом (точно таким же!) каким у тебя залито тело форума. А те уголки светло-серые, которые по бокам, заливаешь цветом своего фона. Запутаться, вроде, не должна. Здесь все предельно просто.

Задание
1. Часть его была в уроке (перекрасить, вставить и пр.)
2. Выполняешь и кидаешь ссылку на исходник опять в тему.

0

36

`tsunami
Готово. Вот картинка- http://s2.uploads.ru/iqLmn.jpg

0

37

Abyss
Ага, молодец, отлично.

0

38

Работаем с первым окном стиля
Почему я оставила его на потом? Оно сложнее, здесь легче запутаться. Но, думаю, ты разберешься, если внимательно читала все мои предыдущие уроки. Отсюда тебе нужно не очень многое, мы даже разбирать подробно всю структуру не будем. Я просто расскажу именно про ее важные части.

1. A3. Text setup
Эта часть отвечает за размеры и шрифты форума, их можно менять, но я редко когда трогаю именно их. Ты можешь посмотреть сам код этой части, видишь там названия шрифтов и величины? Вот они то и изменяются. Но мы на этом подробно останавливаться не будем, ты можешь поэксперементировать, а потом показать мне результат.
2. A5. Basic page layout and borders
Дальше A5 коды трогать не советую, там можно много накосячить, а потом не исправишь.
2.1. A5.1 А вот первый пункт регулирует ширину тела форума (самого форума, считай) и отступы относительно страницы.

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
width : значение ширины;
 
}

На месте слов "значение ширины" ты указываешь свою. Я беру 850px, ибо это стандарт. Под эту ширину должна подходить и шапка.
margin: 0px auto auto auto; отвечает за отступы, но я и это редко трогаю.

2.2. A5.3 Этот пункт отвечает за страницу переадресации. Если тебе эта вещь важна, то можешь изменять. Я на этом форуме даже статью видела хорошую про изменении этой страницы. Почитай, если хочешь, конечно.

/* A5.3 */
#pun-redirect, #pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
  }

margin: 50px 20% 12px 20%; - данная строка отвечает за положение сообщения относительно границ монитора. Попробуй поизменять, может выйти что-то хорошее.
width: auto; - это ширина сообщения. Она указывается автоматически.

2.3. A5.9 Этот пункт отвечает за рамки на форуме. Сейчас стало модно их убирать, так предпочитаю делать и я. В этом коде тебе должно быть все понятно еще из первого урока.

/* A5.9 */
.punbb .container {
  border-style: none;
  border-width: 1px;
  }

Здесь свойство-значение border-style: none; отвечает за стиль рамки, а border-width: 1px; за ширину рамки.
2.4. A5.10 Этот пункт отвечает за те же границы, но для категорий, полей профиля и всех других элементов. Здесь значения и свойства все те же самые, поэтому я даже расписывать про них не буду.

/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
  padding: 0.5em 1em;
  border-style: solid;
  border-bottom: none;
  border-width:1px;
  }

3. B1. Parsed Content, Signatures and Scroll Boxes
Из этого блока нам понадобится только один пункт - B1.2. Этот параметр регулирует отображение границ между постами, а так же между подписями участников. Понятное дело, что здесь ни в коем случае нельзя все эти параметры делать одного цвета, потому что всё сольётся в один фон и выйдет плохо.

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  border-top: 1px solid #888;
  width: 250px;
  margin: 5px 0;
  }

Здесь со свойствами-значениями должно быть все понятно.
4. C2. Table layout
4.1. C2.1, C2.2, C2.3 Пункты C2.1, C2.2 и C2.3 отвечают за строку форума, тем, сообщений. Ее редко меняют, но если вдруг захочется, то:

/* C2.1 */
.punbb .main .tcl {
  overflow: hidden;
  text-align: left;
  width: 50%;
  }

/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
  background-color: transparent;
  text-align: center;
  width: 10%;
  }

/* C2.3 */
.punbb .main .tcr {
  background-color: transparent;
  overflow: hidden;
  text-align: left;
  width: 30%;
  }

...то в этих кодах тебе нужно поменять часть: width: 30%;. Обрати внимание, что размеры нужно указывать в пикселях, если ширина форума тоже в пикселях, и наоборот - используй проценты, если ширина указана в процентах. Строка: text-align: left; - относится к расположению текста (центр, слева, справа).
4.2. C2.12 Этот пункт отвечает за цвет бордера. В таком коде (или том, который стоит у тебя) нужно цвета поменять на свои, понятное дело.

/* C2.12 */
.punbb .main th {
      padding: 7px 1em 7px 1em;
      border-left: 1px solid #шестизнак;
      border-bottom: 2px solid #шестизнак;
      border-top: 1px solid #шестизнак;

      }

Соответственно, если ты хочешь вообще убрать границы, то этот пункт должен выглядеть так:

/* C2.12 */
.punbb .main th {
   border-style: none none none none;
   border-width: 0 0 0 0px;
   padding: 0.4em 1em 0.4em 1em;
  }

4.3. C2.14 Этот немаловажный пункт отвечает за иконки, вернее, за их расположение. Конечно, и в том коде, которые мы добавляли с HTML-верх, есть элементы этого, но все-таки не все.

/* C2.14 */
.punbb td div.tclcon {
margin-left: 45px;
}

Здесь регулируется отступ иконок, то есть чем больше значение, тем больше будет отступ между иконкой и границей форума. Значения указываются в пикселях. И обязательное правило: отступ должен быть либо такой же, как иконка, а лучше даже больше, но ни в коем случае не меньше, иначе иконка "вылезет".
4.4. C2.15 Этот пункт тоже отвечает непосредственно за расположение иконок.

/* C2.15 */
.punbb div.icon {
float: left;
    display: block;
    width: 30px;
    height: 30px;
    margin-right: 7px;
}

Этот параметр обязательно нужно заполнить, теперь объясню почему. float: left; - отвечает за расположение иконок. Можно поставить их либо влево, либо вправо. width: 30px;  height: 30px; - думаю, уже поняла. Размеры иконок. Их мы вписывали и в тот код, который для иконок потом добавляли. Здесь пропиши еще раз те же самые данные, что прописывала и там. Если вы вовсе не поменяешь их, или поставишь неверные, то иконки либо будут обрезаться, либо получатся громадными. margin-right: 7px; - отвечает за расположение иконки относительно названия форума или темы.
5. D1. Logo and discription
Собственно, почти в этой части меняется высота форума (высота шапки). Я думаю, что это не менее важно, чем иконки. Я решила рассказать тебе об этом сейчас, а не в уроке, когда мы работали с шапкой.

/* D1.2 */
#pun-title h1 {
  display : block;
  height: ширина;
margin-bottom: -1px;
}

/* D1.3 */
#pun-title .container {
  border-style: none ;
  padding: 0.2em 1em 0.8em 1em;
  }

/* D1.4 */
#pun-title h1 span {
  display: none;
}

#pun-title TABLE {
  border: none;
  height: ширина;
  width: 100%; margin-bottom: 0px; margin-top: 0px;
}

#pun-title TD.title-logo-tdl {
  border: none;
  width: 100%; height: ширина;
}

#pun-title TD.title-logo-tdr {
  border: none;
  width: высота;
  vertical-align: top;
  padding-right: 0px;
  padding-top: 0px;

}

Думаю, понятно. Везде, где стоит мое слово "ширина" ты прописываешь свое значение в пикселях. Стандарта нет, все зависит от дизайна, но я обычно беру где-то 500. Но заметь, что в этом же блоке второй раз появляется высота. Не забудь изменить ее на свою.
P. S. Хочу заметить, что у фотошопа с форумами представления о единицах измерения немного разные, поэтому пиксели в кодах указывай на 1-3 больше, чем они есть на самом деле, то есть в фотошопе, чтобы картинка не раздваивалась, не обрезалась.

Задание
1. Вообще, это больше теоритическая часть, чтобы ты знала на всякий случай где что менять и как. Только самые важные вещи.
2. Измени форум по своему усмотрению, поменяй,  может быть, комментарии на понятные.

0

39

Боже, мне уже страшно...  o.O  Можно задать несколько вопросов?

`tsunami написал(а):

2.3. A5.9 Этот пункт отвечает за рамки на форуме.

Что за рамки, и где они находятся?

`tsunami написал(а):

4.2. C2.12 Этот пункт отвечает за цвет бордера.

Что это? И для чего оно нужно?

`tsunami написал(а):

D1. Logo and discription
Собственно, почти в этой части меняется высота форума (высота шапки)

То-есть как?

* не знаю даже элементарных вещей*

0

40

Abyss написал(а):

Что за рамки, и где они находятся?

Рамки между всем на форуме... Смотри, поставь в этом месте значение 12 вместо 0 и увидишь:

/* A5.9 */
.punbb .container {
  border-style: dotted;
  border-width: 0px;
  }

Abyss написал(а):

Что это? И для чего оно нужно?

Опять же редактирование границ. Как бы объяснить, чтобы ты поняла. А попробуй-ка опять вместо нулей подставить какие-то значения и посмотри. Так тебе будет понятнее:

/* C2.12 */
.punbb .main th {
  border: none;
  padding: 0px 0em 0px 0em;
  }

К тому же даже я первым окном стиля пользуюсь в очень редких случаях.

Abyss написал(а):

То-есть как?
* не знаю даже элементарных вещей*

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

0


Вы здесь » Кот » Архивы » `tsunami | Abyss


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC