Дизайн, слои

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

Спасибки.

Значит так, котёнок, по порядку...

Концепцию слоёв тебе объяснять не надо, на примере Фотошопа знаешь. Тут нечто подобное.

Свойства слоёв задаются через стили - CSS.

Можно отдельным слоем настраивать почти любой элемент, но обычно это делают с помощью тэгов

Т.е. всё, что включено внутри div'ов - это отдельный готовый слой. Его параметры задаются, как уже отмечал, через CSS. Обычно проще через ID.



Теперь самое главное - о параметрах слоя.

В начале HTML-документа пишем нечто вроде:


Что у нас в описаниях (параметры):
position: - это как считать координаты твоего слоя. Где он будет расположен. Вообще для твоего случая (и чаще всего, в принципе) удобнее использовать абсолютную систему координат в пикселях: 0,0 - это верхний левый угол окна браузера.

position: absolute; - так и запишем

left: xxxpx; - координаты левого угла тоего слоя
top: yyypx; - координаты верхнего угла твоего слоя
width: wwwpx; - ширина слоя
height: hhhpx; - высота слоя слоя

Ещё немаловажный параметр - "глубина" слоя - его положение относительно других. Или, если точно, то Z-Index в терминологии трёхмерной графики. Так и называется:

z-index: zzz; - у кого это zzz больше, тот располагается "выше" остальных.

Итак, что у нас выходит:

Если внутри одного div'а с position:absolute вставлять другой такой же, то по стандарту, он должен позиционироваться относительно внешнего div'а. Т.е. именно так удобно размещать, скажем, картинку на картинке. Но этот стандарт так понимает только IE4 и выше. Netscape, как обычно, всё делает по-своему, и позиционирует относительно верхнего угла браузера, что делает совершенно бесполезным использование в нём таких стилей.

Так, подготовлю примерчик - продолжу

quote:

---

Originally posted by KRoN:
Можно отдельным слоем настраивать почти любой элемент, но обычно это делают с помощью тэгов

...

---

 

Я не совсем поняла, если честно.....эту фразу.
То есть если почти каждый отдельный элемент мне вдруг вздумается - придётся это делать не через ?

quote:

---

Т.е. всё, что включено внутри div'ов - это отдельный готовый слой. Его параметры задаются, как уже отмечал, через CSS. Обычно проще через ID.

---

 

А что такое ID, если CSS - разновидность стилей, как я поняла? Вот то описание имени (id=my_layer), кот. ты имеешь ввиду, а в другом случае можно через стили CSS другим кодом задавать слой, я правильно поняла???

quote:

---

В начале HTML-документа пишем нечто вроде:

---

 

А потом я уже могу использовать все теги, описывающие картинки, ссылки и проч., как в обычном html?

quote:

---

left: xxxpx; - координаты левого угла тоего слоя

---

 

То есть левого нижнего?

quote:

---

top: yyypx; - координаты верхнего угла твоего слоя

---

 

То есть верхнего правого?

quote:

---

width: wwwpx; - ширина слоя
height: hhhpx; - высота слоя слоя

---

 

Если я всё правильно поняла, то зачем же эти описания, ведь если заданы координаты всех углов - зачем расстояние между ними??? Ещё вариант вижу - я ни черта не поняла .

quote:

---

z-index: 5;

---

 

То есть цифра 5 означает, что данный слой является пятым, а до него обязательно должны быть ещё четыре, или я могу сказать, что пятый, а он у меня будет один из, допустим, двух только, а второй будет четвёртым, например??

quote:

---

Если внутри одного div'а с position:absolute вставлять другой такой же, то по стандарту, он должен позиционироваться относительно внешнего div'а. Т.е. именно так удобно размещать, скажем, картинку на картинке. Но этот стандарт так понимает только IE4 и выше. Netscape, как обычно, всё делает по-своему, и позиционирует относительно верхнего угла браузера, что делает совершенно бесполезным использование в нём таких стилей.

---

 

гм-гм..........вроде бы понимаю, но в принципе можно все слои ровнять относительно верхнего левого угла браузера, тогда это будет работать и в NC тоже без "глюков"?!

quote:

---

Так, подготовлю примерчик - продолжу

---

 

ждём-с.

KRoN>>Можно отдельным слоем настраивать почти любой элемент, но обычно это делают с помощью тэгов

...

Nilli>Я не совсем поняла, если честно.....эту фразу.
То есть если почти каждый отдельный элемент мне вдруг вздумается - придётся это делать не через ?

Гм. Это значит, что в принципе, любой элемент можно позиционировать через стили. Если грубо, то:



Помещаем картинку в абсолютные координаты 123, 100.
Т.е. 123 пиксела слева, 100 - сверху.


Nilli>А что такое ID, если CSS - разновидность стилей, как я поняла? Вот то описание имени (id=my_layer), кот. ты имеешь ввиду, а в другом случае можно через стили CSS другим кодом задавать слой, я правильно поняла???

CSS - cascade style sheets (если не наврал) - каскадные таблицы стилей. Т.е. просто стили

ID - это термин из CSS.

Стили объектов HTML (картинок, ссылок, слоёв, таблиц...) можно описать по-разному:

1. Прямое укзание HTML-тэга

...

Тут мы описали сразу стиль тэга td и таким образом, всё использование таблиц будет подразумевать, что внутири тэга td у нас всё будет так, как мы задали в стилях.

2. Использование понятия ID
ID означает идентификатор



...

В данном случае id=.. однозначно указывает на то, какой стиль применить к этому элементу.

Мы также можем написать:

Это параграф, написанный жирным шрифтом

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

Знак # перед именем стиля означает именно описание ID стиля.

2. Использование понятия класс

Это жирный шрифт

...

Мы указываем описание по имени класса стиля. Тут всё несколько сложнее, т.к. тут допустимо вложение описания и контекстная зависимость. Нам это пока не нужно

Для указания, что это класс, в стилях перед именем пишут точку.

KRoN>>В начале HTML-документа пишем нечто вроде:


Nilli>А потом я уже могу использовать все теги, описывающие картинки, ссылки и проч., как в обычном html?

Да, конечно

KRoN>>left: xxxpx; - координаты левого угла тоего слоя
Nilli>То есть левого нижнего?

Имеется в виду X-координата угла. Т.е. по горизонтали. На сколько пикселей он отстоит от левого края окна вывода. А верхний или нижний тут, понятно, совсем не важно

KRoN>>top: yyypx; - координаты верхнего угла твоего слоя
Nilli>То есть верхнего правого?

Т.е. на сколько пикселей область (объект) отстоит сверху
Аналогично предыдущему пункту.

KRoN>>width: wwwpx; - ширина слоя
KRoN>>height: hhhpx; - высота слоя слоя
Nilli>Если я всё правильно поняла, то зачем же эти описания, ведь если заданы координаты всех углов - зачем расстояние между ними??? Ещё вариант вижу - я ни черта не поняла .

Мы указали только координату верхнего левого угла
Нижний правый же задаётся через высоту и ширину объекта.
Хотя их можно не указывать, тогда они будут сами рассчитаны, если размер объекта фиксированный - скажем, это картинка.

KRoN>>z-index: 5;
Nilli>То есть цифра 5 означает, что данный слой является пятым, а до него обязательно должны быть ещё четыре, или я могу сказать, что пятый, а он у меня будет один из, допустим, двух только, а второй будет четвёртым, например??


Да, это не его номер, а как бы условный вес.
Чем больше номер, тем выше располагается слой.
Как раз их лучше нумеровать не подряд, а хотя бы через десяток, чтобы при необходимости можно было вставить между уже имеющимися солями новый слой, не перенумеровывая всё подряд...

Nilli>гм-гм..........вроде бы понимаю, но в принципе можно все слои ровнять относительно верхнего левого угла браузера, тогда это будет работать и в NC тоже без "глюков"?!

Да, но тогда ты жёстко привязываешься к текущему разрешению.
Ведь даже центровку по середине экрана ты сделать не сможешь.
Ведь она для 800x600 будет по координатам 400x300, а для 1024x768 она будет в 512x384.

KRoN>>Так, подготовлю примерчик - продолжу
Nilli>ждём-с.

Пока нет-с...

Это жирный шрифт

Так оk - http://nilli.al.ru/new/6.htm ?

В каком порядки грузятся слои и их содержимое?!

6.htm - у меня оно центруется вправо

Ну и на счёт слоёв там их особо не применялось, как я погляжу

А грузятся слои в том порядке, как грузится HTML-документ.

Ром, ты код глядел? В стилях я описала два слоя: один за номером 10, второй - 20. А затем в hmtl уже описывала их через div, как ты тут пишешь.
И действительно, второй слой сделал с отступом от левого края, то есть на 200 с лишним пикселей, кажется, так, чтобы быть если не в центре, то несколько правее...а звёздочки - в верхнем левом углу начинаются.