Кот

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

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


Вы здесь » Кот » Архив обучения от 03.12 » Заострённые уши.


Заострённые уши.

Сообщений 41 страница 50 из 59

1

http://uploads.ru/i/k/s/p/kspng.png

Привет Лиза, очень приятно с тобой познакомиться. И надеюсь, что научу тебя многому. Я Тая, рада, что ты выбрала именно меня в учителя.

Твой тестовик - http://in.9bb.ru
Связь с тобой - скайп - lizziespring

И так приступим.
Чему именно хочешь научиться, какая структура дизайна, может примеры дизайнов?
Если уже что-то знаешь рассказывай.)

Дневник:


Урок №1 - 5-
Урок №2 - 5+
Урок №3 -


Был забыт сменен фон шапки и меню форума.
Работа выполнена идеально.

Отредактировано slastnicova (2012-08-29 16:08:08)

0

41

Ветвь написал(а):

Готово.

хорошо, ты учишься на лету.

теперь что именно будем разбирать?
несколько задних фонов, картинки в цитаты/коды, категории, шапка-фон?

0

42

Ну... Как сделать несколько задних фонов, я видела, картинки в цитаты/комменты, вроде тоже несложно. Категории, насколько я понимаю, делаются по аналогии с шапкой убирается текст и можно поставить картинку на фон каждой категории, так как у них классы разные.

А про шапку фон вы что-то в этом роде имеете ввиду? Если да, то я очень этому хотела бы научиться.

схематично о том, как я это понимаю

http://s1.uploads.ru/t/sByDj.jpg

А ещё... Текст в шапке делается с помощью div'ов в html-верх с position: absolute?

0

43

Ветвь написал(а):

Категории, насколько я понимаю, делаются по аналогии с шапкой убирается текст и можно поставить картинку на фон каждой категории, так как у них классы разные.

да именно так, но также можно не убирая текста, ээто надо будет просто в фш прозрачность ставить для картинки категории.

Ветвь написал(а):

Как сделать несколько задних фонов, я видела, картинки в цитаты/комменты, вроде тоже несложно.

если нужно будет объяснить, разберем подробнее.

Ветвь написал(а):

Текст в шапке делается с помощью div'ов в html-верх с position: absolute?

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

Ветвь написал(а):

А про шапку фон вы что-то в этом роде имеете ввиду? Если да, то я очень этому хотела бы научиться.

да, я про это)
ну тогда давай делать.

Задание:
В фш рисуешь макет дизайна полностью.
шапка, задний фон, фон форума, категории если нужно, иконки сообщений.
Всё это расставляешь, потом соединяешь это в один слой и выкладываешь сюда.
макет 1920х950рх
я объясню как его резать и что куда проставлять.

0

44

http://s1.uploads.ru/t/Cmixl.jpg

0

45

Ветвь
я надеюсь psd сохранила, открываешь его, скрываешь иконки сообщений.
и потом режишь рамкой следующим образом:
http://s1.uploads.ru/t/eQAUl.jpg
Сверху и до красной границы, будет шапка (советую уменьшить черное размытие слева, чтобы шапка не была такой большой), соответственно тогда граница шапки поднимится.
от красной границы и до синей границы - это будет основной фон, он пойдёт и на тело и на задний фон.
и от зелёной границы и вниз - это будет футер форума, туда прописывается обычно ещё копирайт.
всё вырезанное сохраняешь в формате jpeg, качество хуже не будет, но картинки будут легче, что лучше для прогрузки форума.
иконки если вырезаешь с фоном, то тоже в jpeg, если на прозрачном, то png.

До CS1 Background and text colours
вставляешь следующее:

#pun-title h1 span  {display: none}
HTML, BODY {
background-image: url("ШАПКА");
background-attachment: scroll;
background-repeat: no-repeat;
background-position: top center;
}

HTML {background-image: url("ОСНОВНОЙ ФОН"); background-repeat: repeat-y; background-position: center top;
background-color: ЦВЕТ ПОДБЕРЕШЬ ПОД ЦВЕТ ЗАДНЕГО ФОНА;
}

#pun_wrap {  background-image: url("ФУТЕР"); background-repeat: no-repeat;
background-position: bottom center;
}

также во втором окне все фоны в CS1 прописываешь через:

background: transparent;

кроме цитат, обычно их выделяют другим цветом, также можешь выделить цветом форму ответа и мод.меню.

В первом окне: (иду по коду, который прописан у тебя сейчас на тестовике)

/* A3.2 */
.punbb {
  font: normal 68.75% verdana, arial, helvetica, sans-serif;
  background: #ffffff;
  }

меняешь на:

/* A3.2 */
.punbb {
  font: normal 68.75% verdana, arial, helvetica, sans-serif;
    background: transparent;
  }

дальше это:

.punbb th {
  background-color: #e8f1f6;
  color: #6db2d4;

меняешь на:

.punbb th {
  background-color: transparent;
  color: #6db2d4;


ширину форума настраиваешь сама, по тому сколько у тебя она на шаблоне. (середина)
если иконки справа хочешь:

/* C2.15 */
.punbb div.icon {
float: right;
    display: block;
    width: 100px;
    height: 100px;
padding-right: 50px;

ширина/высота настраиваешь сама.
дальше шапка. это:

#pun-title table {
border-radius: 15px 15px 0px 0px;
border: none;
height: 450px;
width: 900px;
background: url("http://s1.uploads.ru/i/yLzNl.jpg") no-repeat; background-position: center center;
}

меняешь на это:

#pun-title table {background-image : url();
border: none;
height: 0;
width: 100%;
}


размер текста настраиваешь сама, цвета ссылок и т.д. тоже.

0

46

Готово.

0

47

Ветвь
хорошо.
divы и таблицы разбираем?

0

48

Давай. Если таблицы я как-то понимаю, видела коды, как соединять ячейки, то в дивах я разбираюсь намного хуже.

0

49

Само окно divа выглядит следующим образом:

<div>
здесь содержимое блока
</div>

Если мы его просто вставим в нтм1-верх, то мы его увидим над нашей шапкой. лиюо в левом верхнем углу. Чтобы такого не было мы моем прописать:
<div style="position: absolute; width: 320px; height: 200px; top:50px; left:-120px;">
здесь содержимое блока
</div>
в данном случае мы увидим блок прозрачным, но он будет 320х200рх и находиться с отступом сверху в 50рх, и будет находится левее шапки на 120рх.
Для такого рода блоков мы уже на шапке рисуем поле для него, но чтобы постоянно не прорисовывать на каждой шапке под блок поле, мы можем прописать следующее:

<div class="news">
здесь содержимое блока
</div>

Т.е. задать нашему блоку класс и прописать весь его стиль в окне стилей.

.news {background: #d2cdb9 url(); width: 200px; height: auto; border: 3px solid #cdc9a5; position: absolute; z-index: 1000;  top: 0px; right: 310px; left: 840px; box-shadow: 0 0 10px #000000;
  -moz-box-shadow: 0 0 10px #000000;
  -webkit-box-shadow: 0 0 10px #000000; }

Общие характеристики блока, цевт фона, при желании картинка, ширина, высота, границы и отступы, также добавление тени, и скругление углов по желанию.

.news h1 , .news h2 , .news h3 {
background:  #d2cdb9  url(); height: 17px; text-align: center; color: #333333; border: 0px none; width: 90%; margin: auto;}

Это содержимое блока, также можно задать цвет фона/картинку, позиционарование содержимого, границы. и ширина (% от ширины общей характеристики блока), а именно для заголовков заключенных в теги <h1></h1>; <h2></h2> и т.д.

.news p {padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; text-align: center;}

Это отвечает за содержимое блока, а именно за параграфы (<p></p>), отступы от границы прописанной в общей характеристики и позиционирование текста.

Также в divы можно вставлять и ещё divы, с другими функциями, например как навигация здесь.

пробуй на этот же дизайн ставь просто.

+1

50

Сделала.

0


Вы здесь » Кот » Архив обучения от 03.12 » Заострённые уши.


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