Кот

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

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


Вы здесь » Кот » Архив обучения от 03.12 » winter is coming


winter is coming

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

1

http://uploads.ru/i/4/L/j/4Ljg2.png

Привет Ксюша! Какое у тебя красивое имя)) очень приятно познакомится. Рада,что ты записалась ко мне на обучение ;) еее. безумно этому рада) Расскажу немного  о себе. Я живу в солнечном городе Сочи,люблю танцевать,читать,фотографировать,гулять и много другое) В мире ролевых игр я где то года два,а в мире создания дизайнов пол года. Немного не мало,но что то умею. Я меломанка и фильмоманка :D Смотрю фильмы и сериалы в огромном количестве. Буду рада узнать о тебе побольше всего всякого ;)

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

+1

2

а я немножко обозналась, просто мой бывший учитель (по графике и на другом форе) носит точно такой же никXD
прошу прощения:3

априори. написал(а):

Привет Ксюша! Какое у тебя красивое имя)) очень приятно познакомится. Рада,что ты записалась ко мне на обучение ;) еее. безумно этому рада) Расскажу немного  о себе. Я живу в солнечном городе Сочи,люблю танцевать,читать,фотографировать,гулять и много другое) В мире ролевых игр я где то года два,а в мире создания дизайнов пол года. Немного не мало,но что то умею. Я меломанка и фильмоманка :D Смотрю фильмы и сериалы в огромном количестве. Буду рада узнать о тебе побольше всего всякого ;)

Спасибо, мне тоже очень приятно)
Тащемта, я из славного города Подольска, что в Московской области, у нас много лесов, поэтому много насекомых и летом они выползают, поэтому лето я не очень люблюXD
Зато я люблю читать, писать (да, иногда меня пробирает не только на посты, но и на очерки и - о ужас - стихи), фотографировать люблю
Закончила музыкальную школу, играю на фортепиано, так что меломаном быть просто обязана. Фильмы и сериалы тоже очень-очень люблю, если начинаю смотреть, то меня за волосы не оттащитьXD
так что во многом мы похожи)))

априори. написал(а):

Работать мы будем упорно. Много и качественно. Графике мы будем тоже много времени уделять,но основная наша специальность - вёрстка,дизайны. Я постараюсь из тебя сделать хорошего дизайнера. Но и от тебя буду ждать отдачи. Будем учиться креативу и нестандартному мышлению)) . Ты мой первый ученик в этой группе. Так что прости меня,если что-то непонятно и дербань вопросами)) Ты пока рассказывай о себе,а я пошла готовить лекции и основную базу ;)

Вот да, это было бы прекрасно
недавно пришла к выводу, что почему бы и нет?
почему бы и не заняться дизайнами?
почитала то, что нашла и поняла, что без светоча в ночи, то бишь учителя, мне совсем не справиться:3
работать я готова, вопросами заваливать - более чемXD
*ждет*

пы.сы. и раз обознатушки такие вышли, то вот мои реквизиты:
аська - 649595566
скайп - hedgemunk

Отредактировано cantabile (2012-06-06 22:58:26)

0

3

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

прошу прощения:3

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

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

недавно пришла к выводу, что почему бы и нет?
почему бы и не заняться дизайнами?
почитала то, что нашла и поняла, что без светоча в ночи, то бишь учителя, мне совсем не справиться:3

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

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

работать я готова, вопросами заваливать - более чемXD

хоохо)) хорошо))

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

Пункт первый. Азы
CSS расшифровывается как Cascading Style Sheets или Каскадные таблицы стилей. Как и в кодировке HTML, таблицы CSS призваны управлять внешним видом вэб-страниц, но на самом деле задачи и возможности CSS намного шире, они могут управлять отображением не только на визуальные устройство, но и, например, синтезаторы речи, но пока ни один из популярных браузеров не поддерживает эти свойства. Думается, еще парочка лет – и Интернет развернется еще круче.
Для продуктивной работы далее и попросту для того, чтобы вы, читатель, могли, грубо говоря, врубаться в то, что я пишу, нужно заучить несколько простых пунктов, которые – вот увидите! – уже после одного вечера работы над своим собственным дизайном начнут отскакивать от зубов.
*Для удобства информация продублирована в архив на внешнем хранилище. Вы сможете сохранить ее себе на компьютер, как удобную и простую шпаргалку. Лично я записал все в блокнот вручную.
Размерности:
em – высота шрифта
ex – высота буквы
px - пикселы
in - дюймы
cm - сантиметры
mm - миллиметры
pt - пункты
% - проценты
Основные параметры:
Height - высота элемента
Width - ширина элемента
Background (фон)
background-color – цвет заливки (веб-значение)
background-attachment – прокрутка фона
   scroll - фон поддается прокрутке
   fixed - не поддается прокрутке.
background-image – фоновая картинка
   url ("...") – в скобках указываете адрес изображения
   none – отсутствие картинки
background-repeat – автоматическое размножение фона
   no-repeat - не размножается
   repeatx - размножается по горизонтали
   repeaty - размножается по вертикали
   repeatxy - размножается в обоих направлениях.
background-position – расположение фона. Примечание: сначала указывается расположение по вертикальной оси: top, center или  bottom, затем - по горизонтальной: left, center или right.
Border (рамка)
border-color – цвет рамки (веб-значение)
border-width – толщина рамки (px)
border-style – стиль начертания
   none – отсутствие рамки
   dotted – пунктир (точки)
   dashed – штрих-пунктир
   solid - одинарная
   double - двойная
   groove – трехмерный эффект
   ridge - трехмерный эффект возвышения
   inset - трехмерный эффект углубления
   outset - трехмерный эффект выпуклости фона
border-top – параметр верхней кромки
border-bottom – параметр нижней кромки
border-left – параметр левой кромки
border-right – параметр правой кромки
Color (цвет) – цвет шрифта элемента (веб-значение)
Font (шрифт)
font-size – размер шрифта. Можно задавать в размерности, можно – по возрастающим значениям, методом научного тыка:
   xx-small
   x-small
   small
   medium
   large
   x-large
   xx-large
font-style - начертание
   normal - стандарт
   italic - курсив
   oblique - чуть менее наклонный, чем курсив
font-weight – толщина. Значения:
   normal - стандарт
   bold – полужирный
Text (текст)
text-align - выравнивание текста внутри элемента.
   left - по левому краю
   right - по правому краю
   center - по центру
   justify - по ширине
text-decoration - украшение текста
   underline - подчеркивание
   overline - верхнее подчеркивание
   none - никакого
   blink - мигание
Display – отображение элемента. Значения:
   none - отсутствует
   block – обведено рамкой
   list-item – элемент как часть списка, присваивается маркер
   inline – вывод элемента в одну строку
Padding - линия отбивки материнского объекта
padding-top - верхняя отбивка
padding-bottom - нижняя отбивка
padding-left - левая отбивка
padding-right - правая отбивка.
Margin - линия отступа дочернего объекта.
margin-top - верхний отступ
margin-bottom - нижний отступ
margin-left - левый отступ
margin-right - правый отступ
Vertical-align - выравнивание элемента по вертикали
   top - по верхнему краю
   bottom - по нижнему
   middle - посередине
Принцип построение кода:

selector {
property1: value1;
property2: value2;
property3: value3;
property4: value4;
}

Selector – номер и название элемента. Это может быть столбец, логотип, иконка и т.д.
Property – параметр из тех, что рассмотрены выше – фон, шрифт, рамки и т.д.
Value – условие для параметра – ширина, цвет, адрес изображения.
Общий код (Структуры – около 26 страниц WORD, Цвета – чуть меньше) пишется в несколько разделов. Они носят названия, состоящие из латинской буквы и порядкового номера: А3, А4, C1, D2  и так далее. Каждый раздел начинается подобным заголовком
/* A4 Float clearing and hidden items
-------------------------------------------------------------*/
И продолжается вплоть до заголовка следующего раздела. Каждый раздел управляет какими-то параметрами оформления. Это может быть шрифт, рамки, положения различных элементов форума… На основных разделах мы остановимся поподробней чуть ниже. Пока что вам следует четко различать, где находится один раздел, а где искать другой. Это намного проще и не так страшно, как кажется попервой, я вас уверяю.
пойдём дальше?

0

4

априори. написал(а):

думаю,мы с тобой подружимся  и не будет никаких недопониманий))

и я так думаю:3

априори. написал(а):

первое задание

прочел. за два дня вроде даже немного понял о__о
к себе сохранила:3

0

5

дальше будет САМОЕ ВАЖНОЕ. это надо понять и запомнить.

Шрифт
Раздел А3 определяет параметры шрифта на вашем форуме.

/* A3 Text setup
-------------------------------------------------------------*/

Каждый их пунктов – А3.1, А3.2, А3.3 и так далее – отвечает за шрифтовые наборы в определенном элементе или группе элементов форума. Пример:

/* А3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif
  }

Первая строка – как водится – кодировка пункта. В этом случае это – А3.3 .
Вторая строка - .punbb textarea, .punbb input, … - в состоянии показать нам, в каком именно элементе вы нынче можете регулировать шрифт.
Третья строка – уже непосредственно задает параметры шрифтовой схемы. Разберем поподробней:
1em – исходя из размерностей, приведенных в начале урока, это высота шрифта
verdana, arial, helvetica, sans-serif – семейство шрифтов. На данный момент их четыре. Вы можете добавить свои, заменить существующие или вообще – взять и оставить всего лишь одно. Если вы придирчиво произведете усечение всех семейств до одного во всех пунктах раздела A3 Text setur, то ваш форум от начала и до конца будет во всех элементах отображать одинаковый шрифт. Лично мне это кажется весьма удобным и гармоничным.
Разберем еще один случай:

/* A3.4 */
.punbb h1, .punbb h2, .punbb h3 {
  font-size: 1em;
  font-weight: bold;
  }
.punbb th   {
  font-size: 0.9em;
  font-weight: bold;
  }
.punbb h4, .punbb table {
  font-size: 1em;
  font-weight: normal;
  }

Здесь мы видим, как в одном пункте сгруппированы условия для нескольких элементов. Разглядывая код, параллельно косим глазом в ту шпаргалку, что я дал вам в самом начале – с подробной расшифровкой параметров и их значений. Из тьмы разума выплывает осознание, что font-weight: bold; - это утолщенный шрифт, а font-size: 1 em; - всё та же высота буквы
материал взят с http://wolfcentre.mybb.ru/ // http://wolfcentre.mybb.ru/viewforum.php?id=6

0

6

априори. написал(а):

дальше будет САМОЕ ВАЖНОЕ. это надо понять и запомнить.

про шрифт вроде поняла

но меня-таки смущают все эти punbbXD
или я вперед батьки в пекло лезу?:3

0

7

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

или я вперед батьки в пекло лезу?:3

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

Положение страниц и размеры форума
Одним из весьма важных параметров вашего форума будет расположение страниц и их ширина. За сии параметры будет ответственен раздел А5:

/* A5 Basic page layout and borders
-------------------------------------------------------------*/
Первый же код раздела – А5.1 – и будет соответствовать параметрам ширины и расположения ваших страниц.
/* A5.1 */
#pun {
  margin: 20px auto auto auto;
  width : 898px;
  padding: 0px 5px 0px 5px;
}

Разберем поподробней.
Первая строка – что? Верно, кодировка пункта, А5.1.
Вторая строка - #pun – поясняет, что параметры распространяются на все страницы ресурса, эдакую базисную сетку, где располагаются все остальные элементы.
Третья строка – margin. Сверяясь со шпаргалкой, мы понимаем, что это линия отбивки дочернего объекта. Именно этот параметр и обеспечивает положение страницы форума относительно границ окна вашего браузера. Можно задавать значения как в пикселях, так и в процентах, варьируя положение как вашей душе будет угодно.
Четвертая строка – width – ширина. Параметры можно задавать как в пикселях, так и в процентах. Законы веб-дизайна советуют подобный параметры задавать все-таки в процентах – ведь в наше время различия между разрешениями экранов скачут, как белки, у разных пользователей. Скажем, у меня стандартный LG Flatron F700P с разрешением 1024*768. А вот у подруги – плоский монитор с разрешением побольше, следовательно, картинка, которая мне на экране будет в самый раз, у нее будет смотреться заметно меньше по размерам. Чтобы ваш форум одинаково удобен был на экранах у каждого вашего посетителя – следует задавать ширину страниц в процентах. Хотя для установки логотипа или шапки – наиболее прост и удобен метод ширины в процентах. Тогда страница будет жестко закреплена в каждом из разрешений, вместе с установленным графическим элементов (шапкой или лого). Этот способ аккуратней, но опять же – проблемы мониторов и отображений. Выбирайте самостоятельно.
Пятая строка нашего кода – padding – линия отбивки материнского объекта. По сути своей, не углубляясь в ужасы профессиональной верстки – лучше его не трогать. По крайней мере, в данном случае.
Итак, мы смогли с вами соорудить и разместить страницы вашего форума и обработали основные шрифты. Гоним за второй порцией какао и читаем дальше.

0

8

*лихорадочно все записывает*
есть, тиче:3

0


Вы здесь » Кот » Архив обучения от 03.12 » winter is coming


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