Здравствуй, Катя)
И добро пожаловать ко мне на обучение. Будем надеяться, что тебе понравится. Ты когда-нибудь работала ранее со структурами дизайнов?
любовь правит миром
Сообщений 1 страница 17 из 17
Поделиться1Суббота, 17 декабря, 2011г. 18:54:29
Поделиться2Суббота, 17 декабря, 2011г. 20:17:32
гилберт'
Добрый вечер)
Неа, не работала (Вот и стоит начать)
Отредактировано Dance Die (Суббота, 17 декабря, 2011г. 20:18:07)
Поделиться3Понедельник, 19 декабря, 2011г. 16:55:15
Dance Die
И так, давай начнём знакомство с самого малого. С понятиями 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 - посередине
Общий код (Структуры – около 26 страниц WORD, Цвета – чуть меньше) пишется в несколько разделов. Они носят названия, состоящие из латинской буквы и порядкового номера: А3, А4, C1, D2 и так далее. Каждый раздел начинается подобным заголовком
/* A4 Float clearing and hidden items
-------------------------------------------------------------*/
И продолжается вплоть до заголовка следующего раздела. Каждый раздел управляет какими-то параметрами оформления. Это может быть шрифт, рамки, положения различных элементов форума… На основных разделах мы остановимся поподробней чуть ниже. Пока что вам следует четко различать, где находится один раздел, а где искать другой. Это намного проще и не так страшно, как кажется попервой, я вас уверяю.
взяла всё отсюда: http://wolfcentre.mybb.ru/viewtopic.php?id=535
Поделиться4Вторник, 20 декабря, 2011г. 21:41:45
Общий код (Структуры – около 26 страниц WORD, Цвета – чуть меньше) пишется в несколько разделов. Они носят названия, состоящие из латинской буквы и порядкового номера: А3, А4, C1, D2 и так далее. Каждый раздел начинается подобным заголовком/* A4 Float clearing and hidden items
Вот это вот не поняла!
P.S. Если можешь объясни это и давай дальше!!! [взломанный сайт]
Поделиться5Вторник, 20 декабря, 2011г. 21:50:57
Вот это вот не поняла!
Возьмём тот код структуры, что стоял раньше здесь.
И видишь, идут некие подразделения на блоки, разделы. В которых свои пункты. то есть:
/* A1 Import the colour scheme
-------------------------------------------------------------*/
/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/
и подобные
Поделиться6Среда, 21 декабря, 2011г. 15:48:55
Ааа, поняла!(До тупых вроде меня с первого раза не доходит! )
Поделиться7Среда, 21 декабря, 2011г. 18:15:34
Dance Die
не надо так на себя =) Поверь, это не так)
Идём дальше?
Поделиться8Среда, 21 декабря, 2011г. 19:30:44
не надо так на себя =) Поверь, это не так)
Хорошо до "гениев" как я с первого раза не доходит!
Жду продолжения!
Поделиться9Четверг, 22 декабря, 2011г. 17:13:33
Dance Die
точно всё ясно? если что, я получше объясню
Поделиться10Четверг, 22 декабря, 2011г. 19:31:25
гилберт'
да лучше давай ещё раз [взломанный сайт]
Поделиться11Четверг, 22 декабря, 2011г. 20:37:30
Dance Die
окей)
тогда пойдём немного другим путём)
но про пост №3 не забывай - это будет тебе памятка)
закончу уроки делать и буду объяснять)
Поделиться12Пятница, 23 декабря, 2011г. 13:53:54
Очень жду!
Поделиться13Пятница, 23 декабря, 2011г. 15:41:10
Смотрим структуру, что я давала выше. Начнём её разбирать. Структура состоит из двух частей. Первая - сама структура. То есть: как всё будет, размеры, местоположение..в общем - "скелет" форума. Вторая - цвета. То есть: Фоны, картинки и прочее.
Будем разбирать цвета. а оттуда пойдём в структуру)
Поделиться14Пятница, 23 декабря, 2011г. 15:53:44
/* CS1 Background and text colours
-------------------------------------------------------------
*/
Начало раздела) Слова: Background and text colours говорят, что в этом разделе будут решаться цвета границ, фона и текста.
дальше идёт:
#pun-title TABLE {
background : transparent url(http://savepic.net/2193369.png) no-repeat left top;
margin-left : 0px;}
Это шапка. http://savepic.net/2193369.png
Можно заметить параметры no-repeat left top (смотреть "шпаргалку"), но тут я никогда их не меняю и тебе не советую)
Как можно заметить, тут нет значений ни высоты ни ширины.
Высота устанавливается в style.css (Первая часть - структура) в разделе:
/* D1 Logo and description -------------------------------------------------------------*/
в пункте
/* D1.4 */ #pun-title h1 span { font-size: 1.5em; } #pun-title table { border: none; height: 458px; width: 100%; }
где height: 458px; и есть высота нашей шапки.
Ширина делается под ширину форума. Её мы ставим в style.css (напоминаю, что это первая часть) в разделе:
/* A5 Basic page layout and borders -------------------------------------------------------------*/ /* A5.1 */ #pun { margin: 0px auto auto auto; width : 848px; padding: 0px 0px 0px 0px; border: none; border-top: none; }
width : 848px; - это ширина самого форума. У CSS и фотошопа немного разные понятия о пикселях. Тут стоит 848, но на самом деле это 850.
обращаю внимание, что не надо забывать о таком, как:
padding: 0px 0px 0px 0px;
border: none;
border-top: none;
и подобном, т. к в большинстве пунктов встречаются такие поля и многое можно заменить в поисках лучшего результата) но здесь оставляем всё как есть))
Поделиться15Пятница, 23 декабря, 2011г. 20:29:12
О, я всё поняла (Какое счастье! [взломанный сайт] )
О, вообще в конце по этим урокам можно будет диз для юкоза создать?
Жду продолжения!
Поделиться16Пятница, 23 декабря, 2011г. 20:57:33
Dance Die
насколько я знаю, на юкозе другие структуры и вообще всё как-то по-другому делается.. Точно не знаю, никогда не делала для юкоза) Но думаю, что нет. Хотя некоторые знания наверняка понадобятся)
Есть вопросы? Если есть, всегда говори)
Поделиться17Пятница, 23 декабря, 2011г. 22:33:07
в пунктеВыделить код/* D1.4 */
#pun-title h1 span {
font-size: 1.5em;
}
#pun-title table {
border: none;
height: 458px;
width: 100%;
}
Вот это не поняла!