Кот

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

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


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


фиолетовый закат

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

1

Привет еще раз, Маркус) *наеюсь нет возражений, если я буду обращаться так (: *

Прежде чем мы начнем, я по стандарту задаю два вопроса:

1. Какие браузеры есть в распоряжении?
2. Что хочется изучить "вотпрямщас"?)

0

2

Джонни Д.
Привет! *если не против, перейдем на "ты"*
1. В распоряжении Хром, Опера, Мазила и Эксплорер. Пользуюсь Хромом.
2. Я не имею ни малейшего понятия о том, как делать дизайны. Хотелось бы начать с кодов. То есть, элементарные дизайны состоят из каких кодов, чтобы что-то в них поменять, куда что вставить надо и т.д. Если я не понятно объяснил - переспросите, потому что я не совсем понимаю технологию создания дизайнов.

0

3

:flag:

0

4

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

Пользуюсь Хромом.

Отлично, в будущем тебе это очень сильно пригодится :)

Я, наверно, начну издалека. Ты уже наверняка видел стандартные стили майббов - четкие границы между составляющими, прямые углы везде, где только можно. Очень сильно напоминает таблицы, верно? И это правильно, ведь сам форум в структурном плане и есть ничто иное, как некоторого рода "матрешка", где практически все "вложенные матрешки" представляют собой div-блоки.
Естественно, у тебя может возникнуть вопрос "а что такое эти див-блоки?"
Если судить очень абстрактно:
Представь, что у тебя есть металлический двухмерный каркас для витража. Будем отвлеченно полагать, что этот каркас наша "таблица". В ячейки витража мы начинаем укладывать цветные стекла, какие-то побольше, какие-то - поменьше. Мы можем накладывать стекла одно на другое, двигать их по сетке как угодно, дробить на более мелкие кусочки и т.д. Эти самые стеклышки и есть наши блоки, которыми можно манипулировать как только душе угодно.
А HTMLbook дает более формальное определение вот так:

Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.


Примечательно, что сам форум написан на ХТМЛ, но нам для всех манипуляций не нужно углубляться в дебри всего этого (ну, кроме тех случаев, когда мы создаем сложные таблицы, но это позже), поэтому нам будет вполне достаточно CSS.

Для начала проверим твою наблюдательность: какие три наиболее крупных блока, составляющих форум, ты можешь назвать?

0

5

Джонни Д. написал(а):

какие три наиболее крупных блока, составляющих форум, ты можешь назвать?

хмм.. ну, шапка, форум и, может, задний план? :unsure:

0

6

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

хмм.. ну, шапка, форум и, может, задний план?

В точку :)
Только давай вместо заднего плана говорить фон, чтобы покороче было)

Вопрос на смекалку и сообразительность: у тебя есть форма быстрого ответа *то место, где ты пишешь мне сообщение*, у тебя есть место под шапку, у тебя есть тело поста *то место, где находится твое сообщение после отправки*. Для кого из них ты можешь поставить картинку на задний фон?

0

7

Джонни Д. написал(а):

Только давай вместо заднего плана говорить фон, чтобы покороче было)

;) окей

Джонни Д. написал(а):

Для кого из них ты можешь поставить картинку на задний фон?

ну, по логике, конечно, только под шапку, но вообще, вроде, куда угодно.. :idea:

0

8

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

ну, по логике, конечно, только под шапку, но вообще, вроде, куда угодно..

Умница, точно подметил) Вообще картинку можно подставить фоном к любому блочному элементу)

Кстати, забыла сказать, тебе понадобится чистый тестовый форум)

А теперь рассмотрим стандартный CSS-код в общем виде:

селектор {параметр: аттрибут;}


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

Надо сказать, что параметры одного селектора могут быть записаны друг за другом, т.е. так:

селектор {
параметр1: аттрибут1;
параметр2: аттрибут2;
параметр3: аттрибут3;
}


А еще возможен вариант, когда у тебя для нескольких селекторов одни и те же параметры, тогда можно написать так:

селектор1, селектор2, селектор3 {
параметр1: аттрибут1;
параметр2: аттрибут2;
параметр3: аттрибут3;
}


Если для селектора вначале задается свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже:

p { color: green; }
p { color: red; }


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

Еще одна ассоциация на это же свойство кодов, но уже в более компьютеризированном варианте)
Представь, что код - компьютерная программа, которая берет различные ячейки памяти и записывает в них символы. Тогда пример выше можно трактовать как:
В ячейку Р записать слово "зеленый",
В ячейку Р записать слово "красный".

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

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

0

9

Джонни Д. написал(а):

Кстати, забыла сказать, тебе понадобится чистый тестовый форум)

Платформа не важна?

Джонни Д. написал(а):

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

У меня только один вопрос - среди кодов не важно, в каком порядке они стоят? То есть, можно не искать среди километра кодов цвет шрифта в той же шапке, допустим, а просто в конце приписать новый цвет? :blush:

0

10

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

Платформа не важна?

А на какой хочется?)

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

То есть, можно не искать среди километра кодов цвет шрифта в той же шапке, допустим, а просто в конце приписать новый цвет?

Можно вполне) Есть такие случаи, когда это можно. но сложно, но это позже)

0


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


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