20.12.11. Гуляем, народ! У нас уже наступает Новый Год и обещанный дизайн уже здесь :) За него мы благодарим нашу любимую batman'. Оценить его Вы можете в спец. теме

WORLD'S STYLE

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

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


Вы здесь » WORLD'S STYLE » Школа [CSS & HTML] » любовь правит миром


любовь правит миром

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

1

Здравствуй, Катя)
И добро пожаловать ко мне на обучение. Будем надеяться, что тебе понравится. Ты когда-нибудь работала ранее со структурами дизайнов?

0

2

гилберт'
Добрый вечер)
Неа, не работала (Вот и стоит начать)

Отредактировано Dance Die (Суббота, 17 декабря, 2011г. 20:18:07)

0

3

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

0

4

гилберт' написал(а):

Общий код (Структуры – около 26 страниц WORD, Цвета – чуть меньше) пишется в несколько разделов. Они носят названия, состоящие из латинской буквы и порядкового номера: А3, А4, C1, D2  и так далее. Каждый раздел начинается подобным заголовком/* A4 Float clearing and hidden items

Вот это вот не поняла!
P.S. Если можешь объясни это и давай дальше!!!  [взломанный сайт]

0

5

Dance Die написал(а):

Вот это вот не поняла!

Возьмём тот код структуры, что стоял раньше здесь.

И видишь, идут некие подразделения на блоки, разделы. В которых свои пункты. то есть:

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

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

и подобные

0

6

Ааа, поняла!(До тупых вроде меня с первого раза не доходит! http://www.10pix.ru/img1/600667/3475845.gif )

0

7

Dance Die
не надо так на себя =) Поверь, это не так)
Идём дальше?

0

8

гилберт' написал(а):

не надо так на себя =) Поверь, это не так)

Хорошо до "гениев" как я с первого раза не доходит! http://www.10pix.ru/img1/600667/3475845.gif
Жду продолжения!

0

9

Dance Die
точно всё ясно? если что, я получше объясню

0

10

гилберт'
да лучше давай ещё раз  [взломанный сайт]

0

11

Dance Die
окей)
тогда пойдём немного другим путём)

но про пост №3 не забывай - это будет тебе памятка)

закончу уроки делать и буду объяснять)

0

12

Очень жду!

0

13

Смотрим структуру, что я давала выше. Начнём её разбирать. Структура состоит из двух частей. Первая - сама структура. То есть: как всё будет, размеры, местоположение..в общем - "скелет" форума. Вторая - цвета. То есть: Фоны, картинки и прочее.

Будем разбирать цвета. а оттуда пойдём в структуру)

0

14

/* 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;

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

0

15

О, я всё поняла (Какое счастье!  [взломанный сайт] )
О, вообще в конце по этим урокам можно будет диз для юкоза создать?

Жду продолжения! http://www.10pix.ru/img1/2413/3475909.gif

0

16

Dance Die
насколько я знаю, на юкозе другие структуры и вообще всё как-то по-другому делается.. Точно не знаю, никогда не делала для юкоза) Но думаю, что нет. Хотя некоторые знания наверняка понадобятся)

Есть вопросы? Если есть, всегда говори)

0

17

гилберт' написал(а):

в пунктеВыделить код/* D1.4 */

#pun-title h1 span  {

  font-size: 1.5em;

  }

#pun-title table {

    border: none;

    height: 458px;

    width: 100%;

}

Вот это не поняла!

0


Вы здесь » WORLD'S STYLE » Школа [CSS & HTML] » любовь правит миром


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