Лекция № Тема: «Слои и позиционирование»
Вид материала | Лекция |
- Тимофей чумиков стратегии эффективного позиционирования корпоративных интересов в сети, 938.63kb.
- 7. Выбор целевого рынка. Позиционирование и дифференцирование Тема Выбор целевого рынка., 180.42kb.
- Позиционирование это важный ориентир для маркетинговых действий. От того, как турфирма, 323.46kb.
- М. В. Ломоносова факультет глобальных процессов Кафедра геополитики Сухарева Екатерина, 1896.09kb.
- 1 11 Тема 2 12 тема 3 13 Тема 4 14 Тема 5 15 Тема 6 17 Тема 7 20 Тема 8 22 Тема, 284.17kb.
- Тема Дата проведения, 179.95kb.
- Тематический план дисциплины наименование темы Лекции, 93.8kb.
- Сигментация рынка и позиционирование товара. Выбор рыночной стратегии сбыта, 380.26kb.
- Тема урока: Геоинформационные модели Постановка целей и задач урока, 150.59kb.
- Тема: «Позиционирование предложения товара», 60.66kb.
Лекция №
Тема: «Слои и позиционирование»
Вопросы темы:
- Единицы измерения
- Позиционирование элементов
- Размещение текстовых блоков в документе
- Визуальные эффекты
- Задание расположения слоев
- Единицы измерения
Относительные размеры элементов документа HTML задаются при помощи относительных единиц измерения, которые указывают значение длины относительно других элементов документа. Таблицы стилей, которые используют такой тип единиц, намного легче перенастраиваются с одного типа устройств на другой.
К относительным единицам измерения относятся:
- em - размер, относительно размера буквы "m"
- ex - размер, относительно вертикального размера букв, соответствующего шрифта
- px - размер, использующий пиксели, относительно устройства вывода
- % - размер, использующий процентные значения, относительно основного размера
Пример:
H1 { margin-left: 1.5em }
H3 { margin-left: 2ex }
span { font-size: 16px }
P { font-size: 150% }
Дочерние элементы не наследуют относительные значения, указанные для их родительских элементов.
Абсолютные размеры
Абсолютные единицы измерения полезны только в том случае, когда известны физические параметры устройства вывода. К ним относятся:
- in - размер, в дюймах, 1 дюйм равен 2.54 сантиметрам.
- cm - размер, в сантиметрах
- mm - размер, в миллиметрах
- pt - размер, в точках, 1 точка равна 1/72 дюйма.
- pc - размер, в пиках, 1 пика равна 12 точкам.
Пример:
H1 { margin: 1.5in }
H2 { line-height: 5cm }
H3 { word-spacing: 3mm }
H4 { font-size: 16pt }
H4 { font-size: 2pc }
Если указанное значение длины не поддерживается, то браузеры автоматически замещают его поддерживаемым значением. Кроме рассмотренных абсолютных единиц измерения, существуют еще несколько, предназначенных для голосовых и прочих браузеров. К ним относятся: deg, rad, grad, ms, s, Hz, kHz.
Единицы определения цвета
- ключевое слово - цвет задается, используя пользовательские настройки
- литерал - цвет задается, используя стандартные названия
- шестнадцатеричное - цвет задается, используя значения RGB
- процентное - цвет задается, используя значения
- десятичное - цвет задается, используя значения
Пример:
H1 { color: background }
H2 { color: red }
H3 { color: #ff0033mm }
H4 { color: rgb(100%, 0%, 0%)}
H4 { color: rgb(255, 0, 125)}
- Позиционирование элементов
Каскадные таблицы стилей позволяют автору Web-страницы размещать ее элементы в любом месте документа, т. е. существует возможность свободного позиционирования элементов.
Применение слоев позволяет создать на странице некоторое подобие трехмерного пространства, хотя на самом деле это лишь плоские слои с заданным порядком перекрытия, как в колоде карт. При помощи таблиц стилей CSS мы можем задавать различные свойства слоям и позиционировать их. Это открывает перед web-мастером массу возможностей, позволяет создавать страницы более похожими на типографские и позволяет, в большинстве случаев, отказаться от нежелательного использования таблиц для позиционирования содержимого.
Абсолютное позиционирование
Как и любое другое свойство, свойство Position задается при помощи таблиц стилей CSS.
Синтаксис: {position: absolute}
Оно может принимать следующие значения:
- position:absolute означает, что позиционирование слоя будет происходить относительно левого верхнего угла страницы.
- position:relative означает, что позиционирование слоя будет происходить относительно того места, где в исходном тексте он находится, то есть относительно предыдущего элемента.
- position:static означает, что позиционирование слоя будет происходить относительно фона.
Горизонтальное позиционирование
Позиционирование по горизонтали задается свойством left путем задания отступа по оси X левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position
Синтаксис: {left: значение}
задается:
- n px
- n %
- auto
Вертикальное позиционирование
Позиционирование по вертикали задается свойством top, атрибут позволяет задать Y-координату левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position
Синтаксис: {top: значение}
задается:
- n px
- n %
- auto
Задание высоты слоя
height, это свойство позволяет задать высоту слоя в окне браузера:
Синтаксис: {height: значение}
задается:
- n px
- n %
- auto
Задание ширины слоя
width, это свойство позволяет задать ширину слоя в окне браузера:
Синтаксис: {width: значение}
задается:
- n px
- n %
- auto
Позиционирование в глубину
z-index,это свойство позволяет задать порядок перекрытия слоями друг друга, при этом слой с более высоким индексом будет располагаться над слоем с низким индексом. В случае, если атрибут не задан специально, браузер присваивает более высокий индекс слою, который в исходном коде описан позже:
Синтаксис: {z-index: 2}
- auto
- порядковый номер
Управление видимостью
visibility,это свойство позволяет задать видимость слоя, присвоив ему одно из значений:
Синтаксис: {visibility: inherit}
- inherit
- none
- visible
display,это свойство позволяет задать видимость слоя, визуально отличается от visibility тем, что сдвигает предыдущий и последующий слои вместе:
Синтаксис: {display: none}
- inline
- list-item
- none
- block
overflow,это свойство укажет как будет выглядеть текст, переполнивший границы слоя, присвоив ему одно из значений:
Синтаксис: {overflow: none}
- none
- clip
- scroll
Понятие прозрачности слоя
Поскольку слой на самом деле представляет собой блок содержимого, заключенный в тэгах или
, то при помощи таблиц стилей CSS можно отформатировать его любым из доступных способов: наложить фильтр, задать фоновый цвет или рисунок, задать стили включенным тэгам. Тогда, если слой не будет иметь фоновый цвет или рисунок, мы сможем увидеть сквозь него содержимое того слоя, над которым он позиционирован. Подобного можно достичь, вставив рисунок .gif, у которого один из цветов прозрачный. Используя данное свойство, легко можно добиться интересных эффектов, недоступных другими способами, что в целом улучшает внешний вид и эстетическое восприятие содержимого.
Одно из самых интересных способов применений свойств слоя является одновременное оперирование позиционированием сразу для двух слоев и более. Задав в каждом слое свойствам Position значение absolute и варьируя значения свойств left, top, height, width и z-index, мы получим интересный эффект наложения слоев друг на друга, частичного или полного перекрытия содержимого.
Наложение прозрачного слоя, эффект тени
Позиционирование без таблицы
Декоративное оформление страницы
Данный учебник HTML и CSS поможет начинающему пользователю,
шаг за шагом, от начала и до конца создать свою собственную страницу в интернете,
WEB-узел или их локальную версию на CD, а также может послужить
on-line справочником для более продвинутых юзеров.
По своей сути, этот учебник - сборник неформальных советов по созданию
Web-сайтов, а также довольно подробный on-line справочник
тэгов и их атрибутов.
Контрольные вопросы:
Наложение слоев
Одно из самых интересных способов применений свойств слоя является одновременное оперирование позиционированием сразу для двух слоев и более. Задав в каждом слое свойствам Position значение absolute и варьируя значения свойств left, top, height, width и z-index, мы получим интересный эффект наложения слоев друг на друга, частичного или полного перекрытия содержимого.
Примеры работы со слоями
Наложение прозрачного слоя, эффект тени
Учебник HTML
Учебник HTML
Позиционирование без таблицы
Ячейка1
Ячейка2
Ячейка3
Ячейка4
Ячейка5
Ячейка6
Ячейка7
Ячейка8
Ячейка9
Декоративное оформление страницы
HTML
Учебник
Данный учебник HTML и CSS поможет начинающему пользователю,
шаг за шагом, от начала и до конца создать свою собственную страницу в интернете,
WEB-узел или их локальную версию на CD, а также может послужить
on-line справочником для более продвинутых юзеров.
По своей сути, этот учебник - сборник неформальных советов по созданию
Web-сайтов, а также довольно подробный on-line справочник
тэгов и их атрибутов.
Контрольные вопросы:
- Какие единицы измерения используются в CSS?
- Каким образом можно разместить элемент точно в нужном месте страницы?
- Какие значения имеет свойство position?
- Какие визуальные эффекты задаются с помощью позиционирования?
- Каким образом задается задание расположения слоев?