Кот

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

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


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


атмосферно.

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

1

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

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

+1

2

Приветик))) Спасибо тебе большое за то, что взяла меня в ученики, я очень этому рада)
P.S. Мне кажется, или мы с тобой уже пересекались ранее?) Беда у меня с никами, так что заранее сорри  http://uploads.ru/i/d/I/5/dI5Z1.gif
ICQ - 595777126

http://magicps.mybb.ru/

Я давно мечтаю делать красивые дизайны, разнообразные. Но это касается не только оформления в общем, но так же и технической части. Например, хочу научиться делать различные меню, таблицы, по возможности вообще самой писать коды (это был бы предел мечтаний  http://uploads.ru/i/x/N/w/xNwzY.gif). Вообще хочу научиться делать разные финтифлюшки, благодаря которым можно было  бы делать не шаблонные работы, а всё-таки разнообразные. Ну и конечно хорошо разбираться в основах, чтобы создание самого элементарного дизайна не было для меня проблемой. Вот, как-то так)))

Отредактировано shadow (2012-08-27 20:10:15)

0

3

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

P.S. Мне кажется, или мы с тобой уже пересекались ранее?)

оох) не знаю. возможно на ренессансе. ахах
у меня тоже беда :D
возможно на колорфоруме виделись. боже :D
я тебя помню\знаю,но а пересекались ли,не помню :D

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

Например, хочу научиться делать различные меню, таблицы, по возможности вообще самой писать коды (это был бы предел мечтаний

да,к этому нам идти и идти.) ахах) потому что это трудно,однако) правда))

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

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

Ну,мы будем брать вершины постепенно. От маленькому к большому)) Так что сначала будем учиться делать элементарные дизайны\македы. Будешь знать основы - будешь знать всё,потому что это дело практики и наработки,в принципе)
запомни эту табличку,пожалуйста. Она всегда тебе поможет и выручит)

Размерности:
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
-------------------------------------------------------------*/
И продолжается вплоть до заголовка следующего раздела. Каждый раздел управляет какими-то параметрами оформления. Это может быть шрифт, рамки, положения различных элементов форума… На основных разделах мы остановимся поподробней чуть ниже. Пока что вам следует четко различать, где находится один раздел, а где искать другой. Это намного проще и не так страшно, как кажется попервой, я вас уверяю.

+1

4

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

возможно на ренессансе. ахах

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

возможно на колорфоруме виделись. боже

Думаю, что и там, и там ХД

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

у меня тоже беда

Особенно тяжко, когда по несколько ников *фейспалм*

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

я тебя помню\знаю,но а пересекались ли,не помню

Вот та же история ХДДД

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

Она всегда тебе поможет и выручит)

Тэкс, всё прочла и со всем ознакомилась, вроде бы всё понятно, кроме пары моментов...

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

Display – отображение элемента.

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

list-item – элемент как часть списка, присваивается маркер
   inline – вывод элемента в одну строку
Padding - линия отбивки материнского объекта
padding-top - верхняя отбивка
padding-bottom - нижняя отбивка
padding-left - левая отбивка
padding-right - правая отбивка.
Margin - линия отступа дочернего объекта.

Вот с этим запуталась. Не поняла я про какой элемент говорится (текст, изображение, часть кода или что?), что за такие необычные маркеры, материнские/дочерние объекты и отбивки оО

0

5

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

Вот с этим запуталась. Не поняла я про какой элемент говорится (текст, изображение, часть кода или что?), что за такие необычные маркеры, материнские/дочерние объекты и отбивки оО

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

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

Padding - линия отбивки материнского объекта
padding-top - верхняя отбивка
padding-bottom - нижняя отбивка
padding-left - левая отбивка
padding-right - правая отбивка.
Margin - линия отступа дочернего объекта.

padding и margin
Это два на первый взгляд похожик параметра. Но между ними есть разница:
padding - линия отбивки материнского объекта
margin - линия отступа дочернего объекта.
Для примера представьте себе окно Word. Само окно Word - материнский объект. А текст, который мы пишем - дочерний объект. Теперь, в данном случае линией отбивки для материнского объекта будет расстояние от края окна до краев листа. Потому что писать текст мы в любом случае можем только на листе. Поэтому padding - это некая граница, внутри которой в одном элементе могут распологаться другие элементы. Margin же в данном примере будут поля, которые мы установили для текста. Т.е. это простой отступ на котором располагается элемент.

+1

6

малефисент
Всё, теперь дошло))) Параллель с Word была отличной, очень хорошо помогает) Спасибо за разъяснение, жду дальнейших указаний) http://uploads.ru/i/h/g/Z/hgZes.gif

Отредактировано shadow (2012-08-28 15:18:31)

0

7

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

Всё, теперь дошло))) Параллель с Word была отличной, очень хорошо помогает) Спасибо за разъяснение, жду дальнейших указаний

еее)) очень рада,что поняла)) Этим я и должна заниматься - объяснять тебе пока ты не поймёшь)
Для того,чтобы перейти к работе нужно кое что сделать.
Если тебе дают какие то дизайнеры свои коды,то этого делать не стоит,а если взять стандартный код mybb(когда мы только создали фору) надо это конечно проверить.
Кода мы заходим в админку "Администрирование - свой стиль"
можно выбрать любой ГОТОВЫЙ стиль http://wawo.ru/catalog/ . Это предстоит сделать,если кодов у тебя совсем не будет,и придётся довольствоваться mybbскими темами)

Рассматриваем наш код структуры. Самую верхушку:

/*************************************************************
A - SETUP
**************************************************************/
/* A1 Import the colour scheme
-------------------------------------------------------------*/
/* A1.1 */
  @import url(Mybb_Tiare_cs.css);

Здесь нам следует произвести одну маленькую, но глобально важную замену:

/*************************************************************
A - SETUP
**************************************************************/
/* A1 Import the colour scheme
-------------------------------------------------------------*/
/* A1.1 */
  @import url(style_cs.css);

Теперь смотрим сохраненный код Структуры. Просто смотрим. Считайте, что мы с ним знакомимся. Помни: CSS американец, он говорит по-английски, писать и разговаривать мы с ним тоже будем по-английски, русский шрифт недопустим. Закоротит и покусает.

0

8

Окей, запомнила, сделала)

0

9

и так,идём дальше. сначала изучим структуру,а потом рассмотрим css коды.
Заглянем в структуру "админка-свой стиль"
Раздел А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; - всё та же высота букв.

+1

10

малефисент
Всё понятно)

0


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


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