Кот

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

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


Вы здесь » Кот » Архивы » Огненные крылья феникса


Огненные крылья феникса

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

1

http://uploads.ru/i/k/s/p/kspng.png

Привет Аля, очень приятно с тобой познакомиться. Буду рада начать работу с тобой с августа месяца. И надеюсь, что научу тебя многому. Я Тая, рада, что ты выбрала именно меня в учителя.

Твой тестовик - http://designtestovik.mybb.ru/
Связь с тобой - скайп: littlekitty5757

И так приступим.
Чему именно хочешь научиться, какая структура дизайна, может примеры дизайнов?
Если уже что-то знаешь рассказывай.)

Дневник:


Урок№1 - оценка


Комментарии

Отредактировано slastnicova (2012-08-16 08:34:14)

0

2

Привет, очень приятно)

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

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

Примеры:
http://lovelessworld.rolka.su/ -здесь нравятся боковые колонки. Пыталась когда-то сделать такие сама-не вышло.
http://themorion.ru/ -нравится табличка и вообще само оформление)
http://mogila.mybb.ru/ -здесь опять же-табличка)
А на "Коте" мне нравится полосочка вверху, с баннерами и навигация, выплывающая при наведении.

Отредактировано Котёнок (2012-08-15 12:10:48)

0

3

Котёнок написал(а):

http://themorion.ru/ -нравится табличка и вообще само оформление)
http://mogila.mybb.ru/ -здесь опять же-табличка)

по поводу таблиц, это специальные скрипты, они есть и здесь, горизонтальный и вертикальный акордион, вроде так они называются.

Котёнок написал(а):

http://lovelessworld.rolka.su/ -здесь нравятся боковые колонки. Пыталась когда-то сделать такие сама-не вышло.

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

Котёнок написал(а):

А на "Коте" мне нравится полосочка вверху, с баннерами

это опятьже скрипты прописанный через html-верх

Котёнок написал(а):

навигация, выплывающая при наведении.

а это сново скрипт)

Котёнок написал(а):

Я хочу научиться делать таблицы(интересные и красивые..ну и полезные, конечно же)

хорошо, тогда после первого "вводного" урока мы начнём с таблиц, а потом вернёмся к дизайну, если ты конечно не против.

Котёнок написал(а):

правильно вставлять элементы дизайна в структуру.

и этому я тебя научу)

Выбирай что будет первым:
создание таблиц или структура форума?

0

4

Наверное, сначала, лучше структуру))

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

хорошо, тогда после первого "вводного" урока мы начнём с таблиц, а потом вернёмся к дизайну, если ты конечно не против.

Да я буду только за)

0

5

в течении дня напишу урок.

0

6

Хооршо) Жду)

0

7

Помогают во многом следующие ресурсы:
http://lenagold.ru/ - сайт с готовым клипартом (использовано для создания дизайна).
http://artfile.ru/ - на этом сайте выкладываются обои (использовано для создания дизайна).
http://ilovepsd.ru/ - замечательные советы по работе с макетом
http://www.wisdomweb.ru/ - на этом сайте есть отличные учебники по CSS и CSS3 с наглядными примерами
http://htmlbook.ru/ - шпаргалка по тегам HTML и свойствам CSS, всегда в нее подглядываю
http://www.google.com/webfonts - сервис Google для импорта красивых шрифтов на сайты

Эти ресурсы стоить запомнить и переодически мы ими будем пользоваться.


Как работает CSS
Что по сути есть изменение дизайна? Это изменение графической составляющей форума и интерфейса.
Любые форумы и сайты - это таблицы с текстом и ссылками. А дизайн css позволяет этим таблицам принять вид удобный для чтения и восприятия информации. Например: на форумах визуально разделены разные "блоки" - разные посты отделяются визуальными границами, страница тем отделяется от общего фона сраницы, а информация об авторе стоит справа/слева от сообщений - все это заслуга CSS.
Таким образом, у редактирования дизайна есть две миссии: улучшение интерфейса и наведение отличительной красоты. Однако, дизайн css не влияет на содержимое форума: текст сообщений, названия разделов, функционал форума через стиль не поправить.
Чтобы научиться писать сами коды, не надо их зубрить, нужно просто понять как они работают и запомнить написание кодов.
Любой css-код состоит из СЕЛЕКТОРА, СВОЙСТВА и ЗНАЧЕНИЯ.
СЕЛЕКТОР (от англ. select - выбирать; selector - "отборщик") - это "имя" элемента, который меняется. мы указываем (выбираем), что будет изменено. (например: категории форума, форма ответа, поля профиля и т.п.)
селекторы не нужно выучивать наизусть и знать, они на каждом движке свои. Это уникальные идентификаторы и классы элементов, которые можно "подглядеть" в исходном коде.

в коде css идентификаторы указываются решеточкой (#), а классы - точкой (.). Например:

#pun-title {тут будет код}
.title-logo-tdl {тут будет код}

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

#title-logo-table, #title-logo-tr, #title-logo-tdl {тут будет код}


СВОЙСТВО (так же называется "параметр") - это то, что именно будет меняться в выбранном (с помощью селектора) элементе. Например: фон, размер, границы и т.п.
ЗНАЧЕНИЕ (так же называется "аргумент") - это какие именно изменения произойдут с выбранным свойством. Например: указываем цвет, ссылку на фон, размер в пикселях или процентах и т.п.
В отличие от селекторов, которые можно посмотреть в исходном коде сайта, СВОЙСТВА и ЗНАЧЕНИЯ нужно либо знать, либо подглядывать в специальных справочниках по мере необходимости.

Свойства и значения пишутся парами внутри фигурных скобок ({}). Свойство и значение - неразлучная пара: не бывает такого, что указано только свойство без значения, они всегда идут вместе.
После свойства ставится двоеточие и пишется аргумент:

#селектор {свойство: значение;}
пример:
#pun-navlinks {backgroud-color: #FF0000;}
расшифровка:
меню навигации {цвет фона: красный;}

Парочек свойство: значение; у селектора может быть сразу несколько, указываются они через точку с запятой (;)

#селектор {свойство: значение;
свойство: значение;
свойство: значение;
свойство: значение;
свойство: значение;
....
}

Если не соблюдать вышеизложенные правила пунктуации в CSS-кодах, они не будут работать.

0

8

Прочитала. Вроде всё понятно)

0

9

Параметры и значения CSS
Цвета в CSS
для всех параметров, которые требуют указания цвета, например, ФОНА и ЦВЕТА ШРИФТА, необходимо указывать веб-название соответствующего цвета.
Размеры в CSS
для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения

em - высота шрифта (текущий кегль)
ех - высота буквы х для текущего кегля;
рх - пикселы (относительно координат окна).
in - дюймы;
cm - сантиметры;
mm - миллиметры;
pt - пункты;

ШИРИНУ ДОПУСТИМО ОБОЗНАЧАТЬ В ПРОЦЕНТАХ

Красным отмечены те единицы измерения, которые мы вам рекомендуем к применению.
Параметры CSS

ФОН

background-color 
Цвет фона элемента. Значением может быть веб-название цвета.

background-attachment

Определяет, будет ли прокручиваться фон.
Значения:
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.

background-image
Фоновая картинка
Значения:
url ("...") - где в скобках адрес картинки
none - никакой картинки

background-repeat
Определяет, будет ли размножаться фоновая картинка
Значения:
no-repeat - Не размножается
repeat-x - размножается по горизонтлаи
repeat-y - размножанется по вертикали
repeat-xy - размножается в обоих направлениях.

background-position
Расположение фоновой картинки на странице
Сначала указывается расположение по вертикальной оси: top (верх), center(центр) или bottom(низ), затем по горизонтальной: left(слева), center(центр) или right(справа)
Границы (рамки)

border
Все параметры рамки, например, толщина, цвет и т.д.

border-color
Цвет рамки

border-width
Толщина рамки

border-style
Стиль оформления рамки всех сторон рамки
Значения:
none - указывает на то, что рамки нет.
dotted - задает пунктирную рамку из точек
dashed - задает штрих - пунктирную рамку
solid - задает одинарную сплошную рамку
double - задает двойную сплошную рамку
groove - создает трехмерный эффект впадающей рамки
ridge - создает трехмерный эффект возвышающейся рамки
inset - создает трехмерный эффект заглубленности фона
outset - создает трехмерный эффект выпуклости фона

border-top
Все параметры верхней рамки
border-bottom
Все параметры нижней рамки
border-left
Все параметры левой рамки
border-right
Все параметры правой рамки
ШРИФТ И ТЕКСТ

color
Цвет шрифта в элементе

font-size
Размер шрифта.
Размер может быть установлен несколькими способами. Допускается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др.
Или можно использовать константы (стандартные размеры): xx-small, x-small, small, medium, large, x-large, xx-large.

font-style
Начертание шрифта.
Значения:
normal - соответствует основному начертанию
italic - курсив
oblique - чуть менее наклонный, чем курсив

font-weight
Толщина начертания
Значения:
bold — полужирное начертание
bolder — жирное начертание
lighter — светлое начертание
normal — нормальное начертание
число от 100 (минимальная жирность) до 900 (максимальная)
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

font-family
Семейство шрифта
Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
Как это работает: Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

font
Все вышеперечисленные параметры шрифта вместе

text-align
Выравнимание текста внутри элемента.
Значения:
left - по левому краю
right - по правому краю
justify - по ширине
center - по центру

text-decoration

Украшение текста
Значения:
underline - подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание

0

10

Второе окно стиля Структура style_cs.css отвечает за цвета и собственно за всю графику которую мы будем вставлять в код для нашего дизайна.

Разберём первую часть кода: CS1 Background and text colours
Она отвечает за цвета текста и фонов на форуме.

body {
background-color: #FFFFFF;
}
расшифровка:
основной фон {
цвет фона: белый;
}

Эта часть отвечает за задний фон форума, т.е. за тот фон, который находится без содержимого.

Если нам необходимо вставить на задний план форума картинку, то необходимо прописать следующий код:

body {
background-color: #КОД ЦВЕТА;
              background-image: url("КАРТИНКА");
              background-repeat: НУЖНОЕ ЗНАЧЕНИЕ;
              background-attachment: НУЖНОЕ ЗНАЧЕНИЕ;
              background-position: НУЖНОЕ ЗНАЧЕНИЕ;
}


/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: #F1F1F1;
  color: #333333;
  }

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #DEDFDF;
  color: #333333;
  }

Эти два пункта отвечают за "тело" форума, т.е. за ту часть форума, в котором находится содержимое. Кроме шапки, категорий, ленты формы ответа/админки и строки форум|тем|сообщений.
Когда прописываешь фон картинкой необходимо заменить значение фонового цвета на transparent, тогда фон будет прозрачным.

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #1474C3;
  color: #FFFFFF;
  font-weight: normal;
font-style: normal;

  }

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #E1EDF7;
  color: #333333;
  }

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

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-image: url ("КАРТИНКА");
  height: ВЫСОТА ШАПКИ;
  width: ШИРИНА ШАПКИ;
  color: #333333;
  }

Для замены категорий на картинки мы используем код, сам код дам в другом уроке.

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #a11e21;
  color: #333333
  }

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #a11e21;
  color: #333333
  }

Эти два пункта отвечают за полосу легенды в форме ответа/админке и строки форум|тем|сообщений соответственно.
Когда прописываешь фон картинкой необходимо заменить значение фонового цвета на transparent, тогда фон будет прозрачным.

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #E1E1E1;
  color: #333333
  }

Это пункт отвечает за коды и цитаты. Так же можно прописать туда картинку.что вставить думаю понятно уже.

/* CS1.8 */
#pun-navlinks .container {
  background-color: #0F5995;
  color: #FFFFFF;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

Отвечает за главное меню, т.е форум/участники и т.д.

.punbb textarea, .punbb select, .punbb input {
  background-color: #FFFFFF;
  color: #333333
}

Эта часть отвечает за поля ввода сообщений/кнопки/модераторское меню.

Пока всё. Теперь задание:
Изменить цвет фона "тела" сделать его полностью одноцветным, на "задний фон" поставить "безшовный фон", чтобы он повторялся по горизонтали и вертикали и при этом не прокручивался.
Выделить цветом цитаты,коды и форму ответа, помнять в них цвет текста.
Поменять цвет текста категорий.

Отредактировано slastnicova (2012-08-27 19:29:37)

0


Вы здесь » Кот » Архивы » Огненные крылья феникса


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