Кот

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

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


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


атмосферно.

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

1

http://s1.uploads.ru/i/f7Zv8.png
бедная кэти. ахах только я могла превратить её в зомби :D

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

+1

11

теперь дальше.
окошко А5

/* A5 Basic page layout and borders
-------------------------------------------------------------*/

рассмотрим А5.1

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
  width : 889px;
  padding: 0px 10px 0px 10px;
  border: none;
  border-top: none;
}

Вторая строка - #pun – поясняет, что параметры распространяются на все страницы ресурса, эдакую базисную сетку, где располагаются все остальные элементы.
Третья строка – margin. Сверяясь со шпаргалкой, мы понимаем, что это линия отбивки дочернего объекта. Именно этот параметр и обеспечивает положение страницы форума относительно границ окна вашего браузера. Можно задавать значения как в пикселях, так и в процентах, варьируя положение как вашей душе будет угодно.
Четвертая строка – width – ширина. Параметры можно задавать как в пикселях, так и в процентах. Законы веб-дизайна советуют подобный параметры задавать все-таки в процентах – ведь в наше время различия между разрешениями экранов скачут, как белки, у разных пользователей.
border: none;
  border-top: none;

если посмотреть на табличку,которую я тебе довала, border - рамка, border-top: none - значит что параметр верхней кромки(начала контента) в рамки не нуждается,то есть её нет)

/* A5.2 */
.punbb {
  float: center;
  width: 90%;
  height: auto;
  margin-left: 5%;
  }

окошко а5.2 так же очень важное для дизайна.
у стандартных тем такого нет(по-моему),эти элементы можно добавить,если нуждаешься,то есть если без этих тегов у тебя есть проблемы с границами.
width: 90%; - отвечает за границы с правой стороны форума,то есть чтобы текст не заходил за рамку или тело форума с правой стороны.
margin-left: 5%; - отвечает за подобную функцию,но только с левой стороны. чтобы иконки не выходили на рамку и тело)

0

12

Всё ясненько! Так здорово  http://uploads.ru/i/n/Y/J/nYJDI.gif

+1

13

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

Всё ясненько! Так здорово

ахах)) я очень рада,что ты пока всё понимаешь х)
теперь перейдём к самому главному))

В число базовых элементов форума входит все – от мала до велика: логотип, иконки, графы, строки, полоски… В общем. Все, что ты так или иначе видите на страницах форума. И практически все можно извратить и подогнать под свою концепцию дизайна. Работа это увлекательная.
это окошко логотипа. сюда вбиваем параметры шапки.

/* D1 Logo and description
-------------------------------------------------------------*/
Ключевые параметры логотипа: /* D1.2 */
#pun-title h1 {
  display : block;
  height: 120px;
  margin: -1px 0px 0px -43px;
}

Параметры логотипа:  /* D1.4 */
Внимание! Мы разбираем только этот кусок кода

#pun-title TABLE {
  border: none;
  height: 120px;
  width: 100%;
}

Высота в данных участках кодов должна соответствовать высоте изображение, которое ты ставишб. То есть – если высота твоей картинки 200px, в параметре height ты также пропишешь height: 200px.
Объявлению посвящен целый раздел D6:

/* D6 Announcement
-------------------------------------------------------------*/

Мы с тобой можем узреть ровно три кода. Из них нас могут заинтересовать два:
  D6.1 – заголовок объявления
  D6.3 – окно объявления, где на форумах обычно расположена таблица.
Оперируя кодами внутри пунктов, мы добиваемся поставленных перед дизайном задач.

0

14

малефисент написал(а):

Параметры логотипа

Логотип, это, я так понимаю, иконка, которая стоит внизу рядом с "кол-вот тем", "кол-во сообщений" и т.д., верно? Ну а шапка, ясное дело, сама по себе. Или в данном случае логотип и шапка - одно и тоже?

малефисент написал(а):

заголовок объявления

Это, допустим, на ролевых "События в игре", "Погода" и т.д. Так?

малефисент написал(а):

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

Фото игрока дня, активистов, данные о погоде, о событиях.
Я всё правильно понимаю или запуталась? ХД

Отредактировано shadow (2012-08-28 21:59:58)

0

15

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

Логотип, это, я так понимаю, иконка, которая стоит внизу рядом с "кол-вот тем", "кол-во сообщений" и т.д., верно? Ну а шапка, ясное дело, сама по себе. Или в данном случае логотип и шапка - одно и тоже?

не-не-не.
шапка и лого - одно и тоже.
мастера называют "логотип",а в народе просто "шапка".
ахах

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

Это, допустим, на ролевых "События в игре", "Погода" и т.д. Так?

Нет,это мы прописываем в настройках-объявление. там мы записываем текстом всё,а там задаём параметры таблицы.
те же самые границы,или шрифт и так далее. но это же можно сделать и в htlm,лучше второй вариант,так как всё что нам нужно находится,грубо говоря в этом месте. :D
Ну,это ты должна знать на всякий пж.
http://magicps.mybb.ru/admin_options.php
в самом низу есть объявление,вот туда мы пишем,то что нам надо.

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

Я всё правильно понимаю или запуталась? ХД

ещё раз :D
в D6 вводятся параметры таблицы.
а http://magicps.mybb.ru/admin_options.php тут саму таблицу и текст информации.

0

16

малефисент написал(а):

не-не-не.
шапка и лого - одно и тоже.
мастера называют "логотип",а в народе просто "шапка".
ахах

*фейспалм* Позорище, простых истин не знаю.

малефисент написал(а):

Нет,это мы прописываем в настройках-объявление. там мы записываем текстом всё,а там задаём параметры таблицы.
те же самые границы,или шрифт и так далее. но это же можно сделать и в htlm,лучше второй вариант,так как всё что нам нужно находится,грубо говоря в этом месте.

Т.е. получается что, например, в html-верх мы задаём параметры таблицы (длина, ширина, толщина границ и т.д.), вставляем картинку таблицы и называем это в народе "заголовок объявления". Эти же параметры можно прописать в пункте D6.1 и D6.3. Верно? Но лучше это писать в html, поскольку и сам текст объявления мы будем писать там же, но только в другом окне.

малефисент написал(а):

в самом низу есть объявление,вот туда мы пишем,то что нам надо.

А в "Окно объявления" мы заносит данные этой таблицы. Т.е. "Погода" +6/+12, дождик, листики падают и т.д.
Теперь до меня всё правильно дошло? ХД

Отредактировано shadow (2012-08-28 22:23:20)

0

17

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

Т.е. получается что, например, в html-верх мы задаём параметры таблицы (длина, ширина, толщина границ и т.д.), вставляем картинку таблицы и называем это в народе "заголовок объявления". Эти же параметры можно прописать в пункте D6.1 и D6.3. Верно? Но лучше это писать в html, поскольку и сам текст объявления мы будем писать там же, но только в другом окне.

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

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

Теперь до меня всё правильно дошло? ХД

ееес)) правильно)

+1

18

малефисент написал(а):

можно сделать одну и ту же операцию двумя способами))

Всё, теперь поняла. В названиях всех элементов и действий я тоже, пока что, слабо разбираюсь((( Так что, ты уж прости меня за нубские вопросы)))

малефисент написал(а):

ееес)) правильно)

Урраааа!  http://uploads.ru/i/4/D/V/4DVhx.gif

Отредактировано shadow (2012-08-28 22:44:28)

0

19

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

Всё, теперь поняла. В названиях всех элементов и действий я тоже, пока что, слабо разбираюсь((( Так что, ты уж прости меня за нубские вопросы)))

Ничего)) нам,главное,пройти теорию,а когда перейдём к практике всё будет гораздо понятнее)

Основные элементы форума при переработке дизайна
Окно статуса пользователя: /* D5.1 */
Главная страница:
  Графа с описанием и названием локации: /* C2.1 */
  Графа с количеством тем и сообщений в локации: /* C2.2 */
  Графа с указанием последнего сообщения: /* C2.3 */
Страница поиска и списка участников:
  Первая графа – ники: /* C2.4 */
  Вторая графа - /* C2.5 */
Строка со словами «Форум – Тем – Сообщений – Последнее сообщение»: /* C2.12 */
Списки модераторов в описании локаций: /* C2.10 */
Отображение иконок: /* C2.14 */   
Внимание! Параметр margin-left должен иметь значение в пикселях на 5-6 единиц больше, чем ширина ваших иконок!
Параметры иконок: /* C2.15 */ - считайте, что вы забиваете стоянку под будущие иконки.
Сообщение: /* C3.1 */
Черточка-граница между временем отправки сообщения и профилем автора: /* C3.3 */
Форма ввода текста:  /* C1.16 */
Статистика
Статистике форума также посвящен целый раздел D7:

/* D7 Statistics
-------------------------------------------------------------*/

Мы видим в нём пять пунктов. Из них в деле разметки дизайна нас будут интересовать всего лишь сам контейнер (окно) статистики, где размещены все данные: /* D7.1 */. Остальные четыре пункта, при желании, вы можете разобрать сами, но они предусмотрены для более детальной работы даже не с самим оформлением – а с работой статистики.

+1

20

малефисент
Ого, ты прямо по всем-всем пунктикам пробегаешься. Здорово! Всё поняла и, надеюсь, усвоила)))

0


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


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