ВОПРОСЫ: 1. Позиционирование 2. Иерархия кода страницы 3. Абсолютное позиционирование 4. Относительное позиционирование 5. Смешанное позиционирование. - презентация

1

2 ВОПРОСЫ: 1. Позиционирование 2. Иерархия кода страницы 3. Абсолютное позыционеррование 4. Относительное позыционеррование 5. Смешанное позыционеррование 5.1. Absolute [relative] 5.2. Relative [absolute] 5.3. Absolute [absolute] 5.4. Relative [relative] 5.5. Z-index

3 1. Позиционирование Позиционирование это управление координатами размещения элемента в окне браузера. CSS предлагает для позыционеррования свойство position. У этого свойства могут быть три значения: absolute (абсолютное позыционеррование), relative (относительное позыционеррование) и static (статическое позыционеррование). Значение static размещает элемент на странице так, как он располагался бы без всякого позыционеррования, поэтому использование этого значения не дает ничего нового. Алгоритмы работы значений absolute и relative будут рассмотрены ниже, но сначала одно важное напоминание об иерархической структуре HTML-кода.

4 Иерархия это структура, в которой содержимое «упаковано» по пакетикам, вложенным друг в друга на подобие матрешек. Все элементы страницы расположены внутри блока. Таким образом, элемент является родителем всех других элементов страницы. Пусть, например, страница имеет следующий код. 2. Иерархия кода страницы BODY e01 e011 e012 e02 e021 e В показанном примере элемент имеет два прямых потомка e0l и е 02. В свою очередь эти элементы тоже имеют по два потомка: e011, е 012 и е 021, е 022 соответственно.

5 Абсолютное позыционеррование задается стилевым указанием position: absolute. При этом начало координат элемента находится в верхнем левом углу прямого предка, при условии, что он также позыционеррован (абсолютно или относительно). Если родитель не позыционеррован, то берется его родитель. Если все предки не имеют указаний position, то в качестве точки отсчета принимается левый верхний угол экранного образа тега, т. е. левый верхний угол документа. Горизонтальная и вертикальная координаты задаются свойствами left и top соответственно. 3. Абсолютное позыционеррование

6 Ниже показан пример, в котором картинка позыционерруется в точку (100, 50). Началом координат браузер считает начало документа. Абсолютное позыционеррование Абсолютное позыционеррование В этом примере картинка абсолютно позыционер- рована.Она располагается в 80 пикселах по горизон-тали и в 60 пикселах по вертикали от начала документа.

7 Измените размеры окна и убедитесь,что картинка всегда остается на прежнем месте. ">

8 В следующем примере абсолютно позыционеррованы две картинки. В коде для каждой из них указаны координаты (100, 50), но для одной началом координат является начало документа, а для другой начало таблицы. Абсолютное позыционеррование Абсолютное позыционеррование Обе картинки абсолютно позыционеррованы в точку (100, 50). Начало координат для одной картинки совпадает с началом документа, для второй — с началом таблицы.

Таблица абсолютно позыционеррована. " title="

Таблица абсолютно позыционеррована. " class="link_thumb"> 9

Таблица абсолютно позыционеррована. "> Таблица абсолютно позыционеррована. "> Таблица абсолютно позыционеррована. " title="

10

11 Приведенные выше примеры наглядно показы-вают, что абсолютно позыционеррованные элемен-ты выпадают из процесса обычного последова-тельного форматирования. Браузер не берет в расчет порядок следования кодов, а учитывает только вложенность для определения начала координат. Элементы выводятся в указанном месте, перекрывая при этом другие элементы страницы. Порядок следования кодов абсолютно позыционер-руемых элементов становится важным, если они начинают перекрывать друг друга: «выше» оказывается тот элемент, код которого идет, позже. Рассмотрим еще два примера.

12 Абсолютное позыционеррование Абсолютное позыционеррование В этом примере обе картинки абсолютно позы- цианированы.Так как код “ Мальчик” идет раньше кода “Вышки”,то вторая картинка перекрывает первую. ">

13

14 4. Относительное позыционеррование Относительное позыционеррование задается стилевым указанием position:relative. Такой элемент участвует в обычном последовательном форматировании документа. За начало координат принимается та точка, в которой элемент был бы размещен без позыционеррования. При относительном позыционерровании сначала браузер размещает элемент на странице, выпол-няя обычное форматирование, а затем по ука-заниям left и top смещает его на заданные значения. В приведенном ниже примере документ фор-матируется обычным образом.

15 Обычное построение документа Обычное построение документа Это пример обычного форматирования документа без всякого позыционеррования.

16 В следующем примере на картинку наложено относительное позыционеррование.

В этом примере картинка смещена вниз на 150 пикселов" title="<Относительное позыционеррование Относительное позыционеррование В этом примере картинка смещена вниз на 150 пикселов" class="link_thumb"> 17 <Относительное позыционеррование Относительное позыционеррование В этом примере картинка смещена вниз на 150 пикселов относительно того места, которое она занимала бы на экране при отсутствии позыционеррования. В этом примере картинка смещена вниз на 150 пикселов"> В этом примере картинка смещена вниз на 150 пикселов относительно того места, которое она занимала бы на экране при отсутствии позыционеррования."> В этом примере картинка смещена вниз на 150 пикселов" title="<Относительное позыционеррование Относительное позыционеррование В этом примере картинка смещена вниз на 150 пикселов">

18 Если изменить размер окна, то можно увидеть, что картинка перемещается по экрану вслед за точкой отсчета началом абзаца, которому принадлежит тег в коде документа. Начало абзаца меняет свое положение тогда, когда предшествующий заголовок записывается в одну или две экранные строки.

19 5. Смешанное позыционеррование Рассмотрим четыре варианта смешанного позы-ционирования, условно обозначенных ниже как: absolute [relative] относительно позы-цианированный блок внутри абсолютно позы-ционированного; relative [absolute] абсолютно позы-цианированный блок внутри относительно позы-ционированного; absolute [absolute] абсолютно позы- цианированный блок внутри абсолютно позы-ционированного; relative [relative] относительно позы-цианированный блок внутри относительно позы-ционированного.

20 5.1. Absolute [relative] Код относительно позыционеррваной картинки расположен внутри кода абсолютно позыционер-рваной таблицы. Таблица смещена от начала документа вправо на 50 пикселов, и это поло-жение остается фиксированным при изменении размеров окна. Картинка смещена вниз на 100 пикселов относительно ее «нормального» поло-жения внутри таблицы. При этом в таблице текст расположен так, как будто картинка нахо-дится на своем обычном месте. Смешанное позыционеррование Смешанное позыционеррование

21 Таблица абсолютно позыционеррована в точку (50,0). Внутри кода таблицы расположена картинка с относительным позыционеррованием вниз на 100 пикселов.

Тег IMG размещается внутри таблицы. Для картинки записано относительное позы- ционирование вниз на 100 пикселов.">

22 BODY absolute relative

23 5.2. Relative [absolute] Во втором примере код абсолютно позыционер- рваной картинки расположен внутри кода относительно позыционеррваной таблицы. Таблица смещена относительно своего «нормального» положения вправо на 50 пикселов. Начало координат для картинки связано с левым верхним углом таблицы. Картинка смещается вниз относительно этого положения на 100 пикселов. При этом текст в таблице форматируется без учета тега Смешаннoe позыционеррование Смешанное позыционеррование

24 Таблица относительно позыционеррована вправо на 50 пикселов.Внутри кода таблицы расположена картинка с абсолютным позыционеррованием (0,100)

Тег IMG размещается внутри таблицы.Для картинки записано абсолютное позыционеррование вниз на 100 пикселов.">

25 BODY relative absolute

26 5.3. Absolute [absolute] Код абсолютно позыционеррваной картинки рас-положен внутри кода абсолютно позыционеррован-ной таблицы. Картинка не меняет своего поло-жения на экране при изменении размера окна, потому что координаты таблицы остаются неиз-менными Смешанное позыционеррование Смешанное позыционеррование Таблица абсолютно позыционеррована в точку (50,0). Внутри кода таблицы расположена картинка с абсолютным позыционеррованием в точку (0,120).

Т" title="

Т" class="link_thumb"> 27

Т"> Тег IMG размещается внутри таб-лицы.Для картинки записано абсолютное позыцио-нирование в точку (0,120)."> Т" title="

28 BODY absolute

29 5.4. Relative [relative] Код относительно позыционеррваной картинки расположен внутри кода относительно позыцио-нирваной таблицы. Когда положение таблицы меняется на экране из-за изменения размеров окна, меняется и положение картинки: ведь смещается начало координат, ниже которого на 100 пикселов должна быть расположена картинка Смешанное позыционеррование Смешанное позыционеррование

30 Таблица относительно позыционеррована вправо на 50 пикселов.Внутри кода таблицы расположена кар-тинка с относительным позыционеррованием вниз на 100 пикселов.

Тег IMG размещается внутри таблицы. Для картинки записано относительное позыционеррование вниз на 100 пикселов. ;">

31 BODY relative

32 5.5. Z-index Стилевое свойство z-index позволяет отойти от плоского представления документа на экране. Его значением является целое число, номер плоскости, в которой будет размещаться элемент (вместе со своими потомками). Основной текст имеет нулевой уровень (z- index:0). Положительный z-index размещает элементы над основным текстом, отрицательный под ним. Из двух плоскостей размещения та расположена выше, у которой z-index больше. Z-индекс

33 Z-индекс Этот текст — основной. К нему не приписано никаких стилевых воздействий. Значит, этот текст лежит в нулевой плоскости. ">

34

35

Похожие презентации

---

Каскадные таблицы стилей CSS Блоковая модель. Синтаксис CSS.

1 2 ВОПРОСЫ: 1.Наследование 2. Контекстные селекторы 3. Классы 4. Теги и 5. Z-index 6. Каскадирование.

Вставка изображений в Web-страницы. - тег вставки изображения в документ Изображение появится в том месте документа, в котором записан этот тэг. Команда.

300 200 100 300 200 100 300200100 300 200 100 300 200 100 Форматирование текста Вставка рисунка Таблицы Гиперссылки Круговой сектор Структура документа.

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

Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.

Троицкий Д.И. Интернет-технологии1 ЯЗЫК HTML (продолжение) Лекция 4 Кафедра «Автоматизированные станочные системы» Dept. of Automated Manufacturing Systems.

Тема : Использование различных приемов форматирования. Таблицы в HTML.

Название страницы содержание страницы Структура любого HTML файла.

Слои «Создание Web-сайтов». Тэг-контейнер для создания слоя Содержимое слоя.

Секция «Основы сайтостроения» Кротова Т.В. Овчарова О.П.

Тег - создает таблицу. Все прочие элементы таблицы – текст, рисунки, списки - должны быть вложенными в него. Допускается также вложение таблиц одна в.

Основы языка HTML Теги разметки документа. Тег (tag - указатель, метка) Команда или фрагмент кода, который описывает определенный элемент документа HTML.

Уроки сайтостроения «Структура html- документа». Что такое Интернет? Интернет, словно город, состоит из домиков – сайтов, которые, в свою очередь, состоят.

Графика на гипертекстовых страницах. МОУ СОШ 5. Браузеры понимают два графических формата JPEG – для фотографий и сложных по цветовой гамме рисунков с.

HTML. Добавление графики в WEB-документ.

4.3 Каскадные таблицы стилей. Каскадные таблицы стилей (Cascading Style Sheets, CSS) способ оформления страниц HTML, позволяющий с помощью параметров.

HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.

(HyperText Markup Language) – язык гипертекстовой разметки.

HTML (HyperText Markup Language) - Язык Разметки Гипертекста.

Подбираем похожую презентацию...

Готово:

300 200 100 300 200 100 300200100 300 200 100 300 200 100 Форматирование текста Вставка рисунка Таблицы Гиперссылки Круговой сектор Структура документа.