FREAKSHOW

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

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


Вы здесь » FREAKSHOW » Обучение дизайну » мелонхолия


мелонхолия

Сообщений 1 страница 30 из 53

1

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

0

2

привет)
http://melonydesign.mybb.ru/ - пробник

http://feelme.rusff.ru/- ну здесь мне нравится, то, что он темный, вообще яркие дизайны не люблю. Он скромный, много всего не напихано, ну и в добавок таблица не большая, ее можно перелистывать.

http://feuerblut.rusff.ru/- тут, впринципе тоже самое к тому же я очень люблю черно-белую графику

http://camelot.f-rpg.ru/ - здесь мне нравится шапка и иконки
, в общем обои, которые черный и шапка
http://restart.rusff.ru/- здесь мне нравится...не помню как это называется

в основном это все, сейчас мало дизайнов, который мне нравятся

я давно не играла  и сидела в фш

0

3

'melony написал(а):

привет)
http://melonydesign.mybb.ru/ - пробник

Поставь мне админство на форуме.

Три первых форума у меня не открылись к сожалению.

'melony написал(а):

http://camelot.f-rpg.ru/ - здесь мне нравится шапка и иконки
, в общем обои, которые черный и шапка

Давно видела этот дизайн. Простенько, но очень красиво и цвета приятные. Он мне тоже нравится.

Для начала я напишу тебе несколько уроков из которых ты узнаешь из чего состоит дизайн. Это очень важно.

Дизайны будем прописывать в основном через CSS.

Общие понятия о css
Расшифровка css-кодов и схема их написания.

Что представляет собой css код для какого либо элемента?
Он состоит из СЕЛЕКТОРА, ПАРАМЕТРА и АРГУМЕНТА.
Селектор (от англ. select - выбирать; selector - "отборщик") - это "имя" элемента, который меняется. мы указываем (выбираем), что будет изменено. (например: категории форума, форма ответа, поля профиля и т.п.)
Параметр - это свойство элемента. мы указываем, что в выбранном элементе надо поменять (например: фон, размер, границы и т.п.)
Аргумент - это значение свойства. мы указываем, какие именно изменения произойдут с выбранным свойством. (например: указываем цвет, ссылку на фон, размер в пикселях или процентах и т.п.)
Стандартный css код выглядит следующим образом:

#селектор {параметр: аргумент;}

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

#селектор {параметр: аргумент;
параметр: аргумент;
параметр: аргумент;
параметр: аргумент;
параметр: аргумент;
....
}

Вот пример того, как выглядит код для меню навигации

#pun-navlinks {backgroud-color: #FF0000;}

#pun-navlinks {background-color: #FF0000; width: 400px; height: 200px;}

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

#pun-navlinks, #pun-ulinks {background-color: #FF0000; width: 400px; height: 200px;}

Параметры и значения CSS

О том, как производить изменения в выбранных селекторах.
Цвета в CSS
для всех параметров, которые требуют указания цвета, например, ФОНА и ЦВЕТА ШРИФТА, необходимо указывать веб-название соответствующего цвета.
Веб-названия для различных цветов можно посмотреть тут: таблица хтмл цветов
Например, вот так будет выглядит код для задания цвета:

#селектор {параметр: #FF0000;}

Размеры в CSS
для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения
em - высота шрифта (текущий кегль)
ех - высота буквы х для текущего кегля;
рх - пикселы (относительно координат окна).
in - дюймы;
cm - сантиметры;
mm - миллиметры;
pt - пункты;

ШИРИНУ ДОПУСТИМО ОБОЗНАЧАТЬ В ПРОЦЕНТАХ!!!
Красным отмечены те единицы измерения, которые мы вам рекомендуем к применению.
Например, так мы задаем ширину и высоту элемента

#селектор {height: 200px; width: 70%;}

Параметры CSS

ФОН

background-color 
Цвет фона элемента. Значением может быть веб-название цвета.
background-attachment
Определяет, будет ли прокручиваться фон.
Значения:
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.
background-image
Фоновая картинка
Значения:
url ("...") - где в скобках адрес картинки
none - никакой картинки
background-repeat
Определяет, будет ли размножаться фоновая картинка
Значения:
no-repeat - Не размножается
repeat-x - размножается по горизонтлаи
repeat-y - размножанется по вертикали
repeat-xy - размножается в обоих направлениях.
background-position
Расположение фоновой картинки на странице
Сначала указывается расположение по вертикальной оси: top (верх), center(центр) или bottom(низ), затем по горизонтальной: left(слева), center(центр) или right(справа)
Пример:

#селектор {
background-color: #FF0000;
background-image: url("http://forum.mybb.ru/viewtopic.php?pid=40#p40.jpg");
background-attachment: fixed;
background-repeat: repeat-y;
background-position: top left;
}

расшифровать это можно так:

#элемент форума {
цвет фона: #красный; //(если картинка меньше, чем элемент форума, цвет будет такой)
фоновая картинка: ссылка на картинку;
прокрутка фоновой картинки: не прокручивается, фон зафиксировали;
Повторение фона: Повторить по вертикали;
позиция фона: начинается сверху слева;
}

Пока почитай это, а чуть позже дам тебе еще дополнительное задание.

0

4

заходишь в Администрирование--->Свой стиль. Не забудь поставить галочку что бы использовать свой стиль, иначе он просто не отобразится.

style_cs.css
управляет цветовыми сочетаниями и стилями шрифтов

1. CS1 Background and text colours
управляет цветовыми сочитаниями таблиц форума и текстов
а) Первое, что мы видим там, это код:

body {
background-color: #Цвет;
}

Мы можем вставить свой цвет, но можем вставить какую-либо картинку:

body {
background-image: url(http://Адрес картинки);
}

б) Потому уже идут блоки:

/* 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: #цвет;
  color: #цвет;
  }

это первый блок.

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

background-color: #

этот тег устанавливает цвет фона этих элементов форума. но туда можно вставить фоовое изображение, а не цвет:

background-image: url(http://Адрес картинки);

Вот такой тег устанавливает цвет текста:

color: #

ВАЖНО! Цветом, который вы пропишите в этом теге, будет обладать только тест, находящийся в этих блоках.
ТЕКСТ можно менять по стилистике!

Дописываем:
color: #цвет; - задаете цвет текста
font-weight: bold; - текст станет жирным.
font-style: italic; - текст будет курсивом.

в) Следующий блок:

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #цвет;
  color: #цвет;
  }

меняет цвета таблиц форума и текста форума.
цвет как и всегда можно заменить на картинку:

background-image: url(http://Адрес картинки);

г) Следующий блок:

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #цвет;
  color: #цвет;
  font-weight: normal;
font-style: normal;
  }

этот блог управляет категориями форума:

д) Следующий блок:

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #цвет;
  color: #цвет;
  }

Корректирует шапку

1 - Текст
color: #цвет; - устанавливаете цвет шрифта.
дописываем по необходимости, если надо:
font-weight: bold; - текст станет жирным.
font-style: italic; - текст будет курсивом.

2 - ФОН
background-color: #цвет; - устанавливаем цвет фона.
background-image: url(http://Адрес картинки); - - устанавливает фоновое изображение (например, шапку форума.)

е) далее следует такой блок:

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #FFFFFF;
  color: #000000
  }

Он управляет всяческими замечаниями и приписками форума, которые есть на движке mybb по умолчанию.

ж) далее блок:

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #FFFFFF;
  color: #000000
  }

Он упраыляет шапкой форумных таблиц и теством в этой шапкой.

з) Блок:

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #FFFFFF;
  color: #000000
  }

Управляет "задником" (цвет фона цитаты, кода...) и параметрами его текста:

и) Следующий Блок:

/* CS1.8 */
#pun-navlinks .container {
  background-color: #цвет;
  color: #цвет;
  }
.offline li.pa-online strong {
  font-weight: normal
  }
.punbb textarea, .punbb select, .punbb input {
  background-color: #цвет;
  color: #цвет
}
для удобства я разобью его на 3 части:
и-1)

/* CS1.8 */
#pun-navlinks .container {
  background-color: #цвет;
  color: #цвет;
  }

Управляет меню навигации

.punbb textarea, .punbb select, .punbb input {
  background-color: #цвет;
  color: #цвет

регулирует цвет фона и шрифта в форме ответа (вместе с кнопками "отправить" и "пред. просмотр") и других формах для заполнения.

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

0

5

хм...у меня тоже не открывается
вот еще раз
http://feelme.rusff.ru/
http://feuerblut.rusff.ru/
http://restart.rusff.ru/

0

6

Да, теперь все открылось.

0

7

ультраморин написал(а):

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

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

0

8

Что будем делать дальше напишу вечером.

0

9

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

0

10

Ой, ссори. Я забыла написать задание. Днем сидела с телефона, а с него практически не чего не могу.

Будем ставить шапку и фон.

Заходим в администрирование ---> Свой стиль

Для того что бы дизайн отображался нужно поставить галочку использовать свой стиль. В первом окне стиля не советую бездумно что либо менять. Оно отвечает за структуру форума и можно просто все испортить. Второе окно отвечает за цвета. С ним сейчас и будем работать.

/* CS1 Background and text colours
-------------------------------------------------------------*/

Вставляешь вот это

#pun-title table {
background-image : url("...");}

body {background-color: #цвет переадресации;
background-image : url("ссылка на фон");
background-repeat: repeat;
background-position : top center;}

#pun { background-image : url("ссылка на фон");
background-color : #;
background-position : center;}

#pun_wrap {background-image: url("ссылка на шапку"); background-repeat: no-repeat; background-position: center top; }

Сейчас все нужно будет настроить, это будем делать в 1 окне стиля.

Находим A5 Basic page layout and borders и вставляем следующее:

/* A5.1 */
#pun {
  margin: 0px;
  position: relative;
  width: 800px;
  margin: auto;
  }

800 пикселей это ширина нашего форума.

Теперь настроим шапку. Ищем D1 Logo and description. Теперь находим /* D1.4 */ и меняем на это:

#pun-title h1 span  {
   display: none;
  }

#pun-title TABLE {
  border: none;
  height: 500px;
  width: 800px;
  float: none;
  background-image: url(ссылка на шапку);
  background-position : top center; 
}

#pun-title TD.title-logo-tdl {
  border: none;
  width: 100%;
}

Для этого нужно сделать шапку и фон. Размер шапки (1450х500), фон (1450х200). Тело форума 800 пикселей.

0

11

ультраморин написал(а):

Ой, ссори. Я забыла написать задание. Днем сидела с телефона, а с него практически не чего не могу.

да ничего страшного, сама часто сижу с телефона)

ультраморин написал(а):

Для этого нужно сделать шапку и фон. Размер шапки (1450х500), фон (1450х200). Тело форума 800 пикселей.

окей, завтра послезавтра постараюсь сделать

0

12

Хорошо. Удачи ))

0

13

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

0

14

Я что-то вообще не чего не вижу. Похоже хостинг на который ты загрузила перестал работать.

0

15

У тебя какие размеры шапки и фона? Там кажется больше чем я говорила.

0

16

нет, как раз такие какие ты сказала

'melony написал(а):

Размер шапки (1450х500), фон (1450х200)

0

17

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

0

18

я попробовала на другом тестовике, там вот так вот вышло
http://melony.rusff.ru/

0

19

Теперь вижу, но мой тебе совет лучше не делать настолько широкую шапку. У всех экраны разные и лично у меня пол шапки обрезается. Идеальный вариант 800 пикселей, т.е. на ровне с телом форума.

Да, поставь мне админство коды гляну.

0

20

ультраморин
уже сделала
окей,сейчас буду шапку исправлять

0

21

Когда сделаешь вставь еще сюда ссылку на шапку.

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

#pun-title TABLE {
  border: none;
  height: 500px;
  width: 800px;
  float: none;
  background-image: url(ссылка на шапку);
  background-position : top center; 
}

#pun-title TD.title-logo-tdl {
  border: none;
  width: 100%;
}

0

22

ну все, я вроде исправила и фон и шапку

0

23

Ну вот, так уже намного лучше смотрится. Ты наверное сама видешь, что тело форума у тебя еще не совсем такое как надо.

Когда мы задаем фон картинкой, а именно пишем background-image, то background-color : #0c0c0c; нам совершенно не к чему. Так что в /* CS1 Background and text colours убирай отовсюду цвет. И тогда фон будет отображаться нормально.

0

24

убрала

0

25

Нет, не убрала. Этого бело-голубого фона не должно быть. Убирай в /* CS1.1 */, /* CS1.2 */, /* CS1.3 */, /* CS1.4 */, /* CS1.5 */, /* CS1.6 */, /* CS1.7 */, /* CS1.8 */

0

26

ааа...поняла ядура.хд
теперь все, убрала

0

27

Да, теперь вижу. Чуть позже напишу как убрать границы и вставить иконки. Кстати, пока можешь их сделать.

0

28

ультраморин
окей, а какого они должны быть размера?

0

29

Я обычно делаю 70х70 пикселей. Можно сделать 80х80, это как тебе больше нравится. Главное не делать слишком большими и маленькими тоже не надо.

0

30

ладно
я их сделала
я знаю, что они цветные, но ч\б у меня не получились
вот:

http://www.10pix.ru/img1/1217/6169876.png- new

http://www.10pix.ru/img1/1098/6169880.png- old

http://www.10pix.ru/img1/1170/6169893.png- closer

http://www.10pix.ru/img1/1204/6169894.png- !!!

Отредактировано 'melony (2011-11-20 20:39:31)

0


Вы здесь » FREAKSHOW » Обучение дизайну » мелонхолия