Кот

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

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

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

`tsunami | Киви

Страница:   1 2 3 4 5 6  
Тема закрыта

Сообщений 11 страница 20 из 53

11

  • Автор: Киви
  • Участник
  • Киви
  • Зарегистрирован: 2012-11-29
  • Приглашений: 0
  • Сообщений: 63
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 12 часов
  • Последний визит:
    2014-11-13 11:45:52

А если на шапке есть место под новости... сможешь объяснить как туда вставить контейнер для текста?

0

12

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56
Киви написал(а):

А если на шапке есть место под новости... сможешь объяснить как туда вставить контейнер для текста?

Да, смогу, конечно, но потом)) сначала нам надо научиться базе, хорошо?) как сделаешь задание, отпишись.

0

13

  • Автор: Киви
  • Участник
  • Киви
  • Зарегистрирован: 2012-11-29
  • Приглашений: 0
  • Сообщений: 63
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 12 часов
  • Последний визит:
    2014-11-13 11:45:52
`tsunami написал(а):

Да, смогу, конечно, но потом)) сначала нам надо научиться базе, хорошо?)

Хорошо))
Задания с кодами я сделала, а исходники вот:

клик*

http://s2.uploads.ru/t/yUkwu.jpg
http://s3.uploads.ru/t/JXgiV.png

Тема: Коты воители. Цвета... тёплые бежевые оттенки, с добавлениями коричневого.

0

14

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56

Киви
Отлично))

0

15

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56

Работаем с кодом
Вернее, пока с нижним окном стиля, так как оно почти полностью отвечает за графику.
По-идее, весь этот урок будет представлять собой задание. На всякий случай я буду давать коды и показывать на них, где что изменять. Если ты все знаешь и без этого, я буду только рада.
1. Тело форума
Изменяешь на свой цвет. Можешь поставить картинку, но пока лучше цвет.

/* CS1.1 */
#pun { background-color: #шестизнак;
background-repeat: repeat;
background-position : center;}

Слово "шестизнак" меняешь на свой цвет.
2. Фон форума
Тоже меняшь на свой цвет. Картинку лучше пока не ставь, этим мы займемся позже.

/* CS1.2 */
body {background-color: #шестизнак;
background-repeat: no-repeat;
background-position : top center;
overflow-x: hidden;
}

Слово "шестизнак" меняешь на название своего цвета.
3. Категории форума
Я думаю, нам стоит сделать дизайн не аляповатым и ярким, а красивым и спокойным, поэтому цвет категорий ты меняешь на тот же, каким заливала тело форума.

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #шестизнак;
  color: #шестизнак;
  }

Цвет после свойства background-color означает цвет фона. Это ты знаешь (первое слово "шестизнак" меняешь как я написала раньше).
Цвет после свойства color означает цвет текста именно этой области (в данном случае - цвет текста, которым будет написано название категорий). Здесь тоже выбираешь свой, но обязательно такой, чтобы сочетался с фоном форума и не очень резал глаза. То есть не надо делать красное на синем или малиновое на зеленом, ладно?)
4. Шапка форума
А здесь мы напрямую сталкиваемся с графикой. Пока (для начала) ты можешь просто загрузить через какой-нибудь сервер и вставить в шапку пустую картинку, подогнав в фотошопе или любом другом графическом редакторе ее под размеры 850 х 500. Ты можешь сделать коллаж (если умеешь) опять же в любом графическом редакторе, но я этого не требую прямо в этом уроке. Если хочешь, этому мы научимся потом. Вот каким должен быть окончательный код для шапки:

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-image : url("...");
  }

Замени тот код, который у тебя стоит, на такой. Там мы просто изменяем свойство backround-color на свойство backround-image и убираем свойство color за ненадобностью. Можешь оставить последнее, конечно, это свойство не помешает.
5. Полосы легенд
Здесь опять та же штука, что и с категориями. Цвет фона ставим тот же, что и тело форума. Цвет текста выберешь сама, но опять же обязательно, чтобы сочетался с цветом форума. Можешь взять тот же, что и в категориях.

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #шестизнак;
  color: #шестизнак
  }

Первый "шестизнак" заменяешь на цвет фона опять же, второй на цвет текста. Тут все понятно.
6. Строки форум|сообщений|тем
Ту все то же самое - цвет фона тот же, что и тело. Цвет текста выбираешь сама.

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #шестизнак;
  color: #шестизнак;
  }

Первый "шестизнак" - цвет фона, второй - цвет текста.
7. Коды и цитаты
Здесь немного по-другому. Вместо цвета поля кодов или цитат можно ставить и картинки, но мы пока ограничимся цветом. Цвет ты выбираешь немного отличающийся от цвета тела форума, чтобы было заметно, где у нас цитата или код, а где нет. Но опять же все должно сочетаться.

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #шестизнак;
  color: #шестизнак;
  }

Первый "шестизнак" - на тот выбранный тобой цвет, второй - на цвет в поле цитаты или кода, но обязательно следи, чтобы было все видно.
8. Главное меню (форум, участники и т.д.)
Цвет фона выбираешь тот же, каким заливала тело форума. Цвет надписей выбирай сама.

/* CS1.8 */
#pun-navlinks .container {
  background-color: #шестизнак;
  color: #шестизнак;
  }

На месте первого "шестизнака" - цвет фона, на месте второго - цвет текста.
9. Картинка в самый низ
Помнишь, мы добавляли этот пункт? Но сейчас он нам не понадобится, пока мы не будем его трогать, а позже я пришлю тебе стандартную картинку в самый низ, которую использую я, ты сделаешь свой копирайт.
10. Поле ввода
И этот пункт мы тоже добавляли к исходному коду. Цвет фона, думаю, стоит выбрать тот же, что и тело форума.

.punbb textarea, .punbb select, .punbb input {
  background-color: #шестизнак;
  color: #шестизнак;
}

Первый "шестизнак", как обычно, - фон, второй - цвет текста.
11. Границы
Я уже писала в прошлом уроке, что в них нужды нет, поэтому после всех свойств border-color: везде нужно подставлять transparent; во всем блоке. Так и сделай.
12. Все ссылки в неактивном состоянии
Нужно выбрать какой-нибудь цвет, который будет выделяться, но сочитаться с цветом тела форума.

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #шестизнак
  }

Слово "шестизнак" меняешь на выбранный цвет.
13. Все ссылки в активном состоянии
Выбираешь цвет еще более светлый или просто ярче, чем в прошлом пункте.

.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #шестизнак;
  }

Слово "шестизнак" меняешь на этот цвет.
14. Главное меню без наведения
Здесь цвет лично я предпочитаю брать тот же, что мы брали для неактивных ссылок, но ты можешь взять какой-то другой на свое усмотрение.

/* CS3.3 */
#pun-navlinks a {
  color: #шестизнак;
  text-decoration: значение;
  }

Вместо слова "шестизнак" - выбранный цвет, вместо слова "значение" выбираешь какое-либо украшение текста (см. первый урок).
15. Главное меню при наведении
Здесь все просто.

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #шестизнак;
  text-decoration: значение;
  }

Вместо слова "шестизнак" - выбранный цвет, вместо слова "значение" - выбранное украшение текста.

Задание
1. Собственно, весь наш этот урок состоял из задания. Как сделаешь, отпишись и скинь мне повторно ссылку на тестовик.

0

16

  • Автор: Киви
  • Участник
  • Киви
  • Зарегистрирован: 2012-11-29
  • Приглашений: 0
  • Сообщений: 63
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 12 часов
  • Последний визит:
    2014-11-13 11:45:52

Готово)
http://testovik699.mybb.ru/

0

17

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56

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

Добавим чего-то нового
Часть 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

18

  • Автор: Киви
  • Участник
  • Киви
  • Зарегистрирован: 2012-11-29
  • Приглашений: 0
  • Сообщений: 63
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 12 часов
  • Последний визит:
    2014-11-13 11:45:52

Готово.
http://testovik699.mybb.ru/

0

19

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56

Киви
Молодец, отлично))

0

20

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56

Добавим чего-то нового
Часть 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

Тема закрыта
Страница:   1 2 3 4 5 6  

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

Рейтинг форумов | Создать форум бесплатно