Кот

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

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


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


без души.

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

1

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

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

0

2

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

Если ты согласна со всеми пунктами

Согласна, на все согласна!

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

ставь мне тут свою связь и внимательно слушай.

Ася 579381451
http://designn.rusff.me/

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

асскажи чему хочешь научится.

Ну, хочу научится делать дизайны, таблица и все такие примочки. О кодах я ничего не знаю, и из-за этого бывает туго доходит, если выражаться дизайнерскими словечками. Как-то так хД

Отредактировано эвердин (2012-08-29 00:18:21)

0

3

эвердин написал(а):

Ну, хочу научится делать дизайны, таблица и все такие примочки. О кодах я ничего не знаю, и из-за этого бывает туго доходит, если выражаться дизайнерскими словечками. Как-то так хД

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

Размерности:
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

малефисент
Хорошо,поняла. Табличку прочитала и сохранила.

0

5

эвердин написал(а):

Хорошо,поняла. Табличку прочитала и сохранила.

ооокей)) умница))
Сначала будет разбирать css
Как было сказано, менять дизайн всех элементов мы будем при помощи css кодов для этих элементов.
Что проедставляет собой css код для какого либо элемента?
Он состоит из СЕЛЕКТОРА, ПАРАМЕТРА и АРГУМЕНТА.
Стандартный css код выглядит следующим образом.
#element1 {parameter: argument;}
#element1 - это ИМЯ элемента, который мы собрались менять
parameter - это любое СВОЙСТВО этого элемента. Например, фон, высота, ширина, цвет, поля и т.д.
argument - это ЗНАЧЕНИЕ свойства. Наприимер, у свойства "фон" может быть значение голубой, оранжевый, прозрачный и т.д.
Вот пример того, как выглядит код для меню навигации
Код:

Код:
#pun-navlinks {backgroud-color: #FF0000;}

где #pun-navlinks - название элемента, background-color - свойство, ЦВЕТ ФОНА в даном случае, а #FF0000 - само название цвета.

+1

6

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

Сначала будет разбирать css

Прочитала и запомнила, вопросов пока нет.)

0

7

таак)) поплыли дальше))
Мы можем прописать в одном коде несколько параметров для одного элемента. Например, фон, высоту и ширину.
Параметры между собой разделяются точкой с запятой, а параметр и его значение разделяются двоеточие.
Пример:
Код:

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

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

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

Таким образом, например, мы придадим одинаковые фон, высоту и ширину меню навигации и меню пользовательских ссылок.
Далее следует список наиболее часто используемых ПАРАМЕТРОВ. Вы не обязаны прописывать их все для каждого элемента, а только те, которые собрались менять.

+1

8

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

таак)) поплыли дальше))

поплыли и снова все без вопросов)

0

9

эвердин написал(а):

поплыли и снова все без вопросов)

структуру css мы прошли,остальное рассмотрим на практике))

Для того,чтобы перейти к работе нужно кое что сделать.
Если тебе дают какие то дизайнеры свои коды,то этого делать не стоит,а если взять стандартный код 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

10

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

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

А у меня почему-то уже он стоит...

/*************************************************************
A - SETUP
**************************************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
  @import url(style_cs.css);

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

0


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


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