Кот

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

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


Вы здесь » Кот » Архив обучения от 03.12 » `tsunami | Nicol.tea


`tsunami | Nicol.tea

Сообщений 21 страница 30 из 35

21

Прости, не тот урок кинула.

0

22

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

23

Я всё-таки сделала немного свой низ (не люблю круглые края)
http://latte.mybb.ru/

Отредактировано Nicol.tea (2013-02-20 20:06:31)

0

24

Nicol.tea
Хорошо, молодец, только переход там резковат. Но так отлично))

0

25

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

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

26

Поменяла только комментарии, разобралась что, как и где.

0

27

Nicol.tea
Хорошо, молодец) но оценки нет, так как и задания почти не было.

0

28

Разные виды дизайнов
Часть 1. Объединенный дизайн.
На основе статьи by `tsunami.
Этот вид дизайнов сейчас довольно популярен, но слишком многие считают, что это трудно, они не справятся и прочее. На самом деле, делается это довольно легко, но работа может казаться сначала трудоемкой (если ты вдруг накосячила где-то). А вот то, что у нас должно получиться: http://obdiz.mybb.ru/

1. Итак, заходим в фотошоп и создаем новый файл (думаю, скрин тут не нужен). Размер можно взять 1900 х 1080 для широкоформатных мониторов, но я обычно беру где-то 1500 х 1080, чтобы дизайн отображался полностью или почти полностью на ноутбуках, планшетах или нетбуках. Тут уже зависит от твоей цели, но мне работу будет удобнее смотреть, если ты возьмешь 1500 (или 1400)х1080.
2. Заливаем этот файл тем цветом, который ты бы хотела видеть фоном форума. Картинку использовать не советую, с этим будет дольше и сложнее, во всяком случае, для начинающих дизайнеров.
3. Создаем еще один файл. Высота его должна быть как и у предыдущего документа (1080 в моем случае), а ширина файла - это ширина нашего форума. Думаю, логичнее будет взять 850 х 1080.
4. Этот файл (который мы создали в пункте 3) заливаете тоже цветом, но другим, чтобы не путаться.
5. Затем этот файл №2 (назовем его так) выделяем (Ctrl + A), копируем (Ctrl + C) и вставляем в файл №1 (Ctrl + V). Если файл №2 встал по центру файла №1, то ты все сделала правильно.
6. Создаем еще один файл (файл №3). Ничем его не заливаем, оставляем белым. Высота файла - это высота твоей шапки. Я беру 500, стандарт - 400. Ширина та же, что и у предыдущего файла (850). В нашем случае надо брать файл (шапку) той велечины, что ты выставила в предыдущем уроке, когда мы первое окно стиля разбирали.
7. Выделяем его (Ctrl + A), копируем (Ctrl + C) и вставляем в два предыдущих совмещенных файла (Ctrl + V).
8. Будущая шапка тоже должна встать по центру. Берем инструмент перемещения и двигаем ее наверх, туда, где и располагается обычно всякая нормальная шапка. Только двигай ее не за пределы второго слоя, можешь взять инструмент масштаб, увеличить и проверить.

Получаем нечто такое

http://s3.uploads.ru/t/4bNsR.jpg

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

У меня вышло вот так

http://s2.uploads.ru/t/lstJQ.jpg

10. Дальше первые два слоя (у меня голубенький и бежевый) объединяем друг с другом и со всем, что сделали. Белый слой остается необъединенным. Его мы перемещаем на самый верх.

Вот так

http://s3.uploads.ru/t/ICjfh.jpg

11. Берем инструмен выделение и аккуратненько выделяем белую область белого слоя, который у нас сверху. Вот здесь обычно и начинаются ошибки, так как выделить надо постараться очень ровно, чтобы не было потом швов.
12. Выделила? Теперь идем в слои и делаем белый слой невидимым (нужно нажать на глазик около этого слоя).
13. Дальше копируем выделенную область (Ctrl + C). Главное, смотри, чтобы у тебя был активным не белый слой, который мы сделали невидимым, а фон - объединенный слой. Иначе ничего не получится.
14. Создаем новый документ (фотошоп сам подгонит его под размер той области, которую ты скопировала).
15. Вставляем в этот новый документ выделенную область (Ctrl + V). Если документ так и остался белым, значит, это сигнал к тому, что ты не объединила слои или белый слой все-таки был активным, а не фон.
16. Сохраняем все отдельно - шапку и фон. Готово.

Шапка

http://s3.uploads.ru/t/jQpDB.jpg

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

Задание
1. Можешь создать новый тестовик, можешь переделывать этот - тебе нужно попробовать сделать объединенный дизайн.

0

29

http://latte.mybb.ru/
переделала, вроде без швов

0

30

Nicol.tea
Да, все супер, мне очень нравится))

0


Вы здесь » Кот » Архив обучения от 03.12 » `tsunami | Nicol.tea


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