Ім'я файлу: Лаб14 РАЗМЕЩЕНИЕ БЛОКОВ НА СТРАНИЦЕ – АБСОЛЮТНОЕ ПОЗИЦИОНИРОВАНИ
Розширення: pdf
Розмір: 613кб.
Дата: 08.12.2023
скачати
Розширення: pdf
Розмір: 613кб.
Дата: 08.12.2023
скачати
ЛАБОРАТОРНАЯ РАБОТА №14
ТЕМА:
РАЗМЕЩЕНИЕ
БЛОКОВ
НА
СТРАНИЦЕ
–
АБСОЛЮТНОЕ
ПОЗИЦИОНИРОВАНИЕ,
ОТНОСИТЕЛЬНОЕ
ПОЗИЦИОНИРОВАНИЕ И ПЛАВАЮЩИЕ БЛОКИ (2Ч)
Цель работы: закрепить знания по пройденной теме; формирование умений и навыков работы с размещением блоков; способствовать формированию соответствующих общих компетенций: ОК01, ОК02, ОК03,
ОК04, ОК09.
Средства для выполнения работы:
аппаратные: ПК;
СЭДО СВФУ (Мoodle) - Портал электронного обучения СВФУ;
ОП.16 Web-программирование
1.
Подготовка к выполнению лабораторной работы:
Повторение теоретического материала работы по тем: «Свойства CSS – цвет и фон, шрифты, текст. Блоки в CSS. Свойства CSS – margin, padding, border. Виды и свойства блоков».
1.1.
Зайти в СЭДО СВФУ (Мoodle) - Портал электронного обучения
СВФУ, 09.02.06. Сетевое и системное администрирование, 16 Web- программирование. Тема: «Свойства CSS – цвет и фон, шрифты, текст. Блоки»
Открыть Лабораторную работу №14.
2.
Теоретическая часть.
Позициционирование блоковю. В HTML для позиционирования элементов на странице мы использовали таблицы. У таблиц есть как преимущества
(легкость использования, одинаковое отображение браузерами), так и недостатки (объемный, нечитабельный код, нелогичность верстки и т.д.).
В CSS для позиционирования элементов используются блоки (div-ы).
Код при этом становится компактным, логичным и легко изменяемым. К недостаткам блочной верстки можно отнести неодинаковую поддержку
браузерами, поэтому приходится писать кроссбраузерный код (т.е. код, который отображается разными браузерами почти одинаково).
Итак, приступим. Предположим, у нас есть вот такая стандартная html- страница (рис. 94): шапка сайта меню контент низ сайта
Рис. 94. Страница
Итак, приступим. Предположим, у нас есть вот такая стандартная html- страница (рис. 94): шапка сайта меню контент низ сайта
Рис. 94. Страница
| шапка сайта | |
| меню | контент |
| низ сайта | |
образом, мы имеем четыре div-а. Давайте напишем html-код страницы с четырьмя div-ами и каждому дадим соответствующий идентификатор (id):
Рис. 95. Результат
Такое позиционирование элементов называется
позиционированием в
нормальном потоке
. Это значит, что все элементы отображаются в окне браузера сверху вниз, по вертикали, в том порядке, в каком они следуют друг за другом в html-коде.
По своей сути нормальный поток ничем не отличается от позиционирования элементов в HTML. И для верстки такой страницы без CSS, нам пришлось бы использовать таблицу, за неимением других вариантов. В
CSS же нам предоставляются и другие схемы позиционирования: абсолютное позиционирование
относительное позиционирование
плавающая блоковая модель
Для определения схемы позиционирования используется свойство
position
, оно может принимать четыре значения, соответствующие выбранной схеме позиционирования:
static
- блок позиционируется в нормальном потоке. Это значение по умолчанию.
relative
- относительное позиционирование (относительно нормального потока).
absolute
- абсолютное позиционирование
fixed
- фиксированное позиционирование
(фиксируется относительно области просмотра).
Сегодня мы рассмотрим
абсолютное позиционирование
, остальные схемы будем рассматривать в следующих уроках.
Абсолютное позиционирование.
При этой схеме позиционирования расположение блока на странице не зависит от того, в каком месте html-кода расположен этот блок. Расположение каждого блока задается указанием, в каком месте экрана отобразить данный блок. Для этого существуют четыре свойства:
left
- указывает на сколько надо сместить блок относительно левого края окна.
right
- указывает на сколько надо сместить блок относительно правого края окна.
top
- указывает на сколько надо сместить блок относительно верхнего края окна.
bottom
- указывает на сколько надо сместить блок относительно нижнего края окна.
Вернемся к нашему примеру. Наши блоки
header
,
menu
и
footer
позиционируются в нормальном потоке, поэтому свойство
position
для них задавать не надо.
А вот блок
content
нужно расположить в другом месте, поэтому для него мы укажем свойство
position:absolute
и зададим смещение: от левого края окна на ширину блока
menu
, т.е. на 190 пикселов, а от верхнего края окна на высоту блока
header
, т.е. на 100 пикселов.
#header{ background:darkred; width:715px; height:100px;
}
#menu{ background:oldlace; width:190px; height:300px;
}
#content{
Рис. 97. Результат
В принципе размеры смещения можно было задать и для каждого блока, иногда это необходимо. Главное, что необходимо запомнить: при абсолютном позиционировании следует задать для блока свойство
position:absolute
и свойства смещения относительно "родительского" элемента. В нашем примере родительским элементом для div-ов было окно браузера, но может быть и по- другому.Предположим, мы решили добавить блок новостей на нашу страницу и разместить его в блоке контента:
Рис. 98. Результат
Тогда в нашу html-страницу, в
div id="content"
мы добавиим
div id="news"
:
шапка сайта
меню
контент
низ сайта
Рис. 95. Результат
Такое позиционирование элементов называется
позиционированием в
нормальном потоке
. Это значит, что все элементы отображаются в окне браузера сверху вниз, по вертикали, в том порядке, в каком они следуют друг за другом в html-коде.
По своей сути нормальный поток ничем не отличается от позиционирования элементов в HTML. И для верстки такой страницы без CSS, нам пришлось бы использовать таблицу, за неимением других вариантов. В
CSS же нам предоставляются и другие схемы позиционирования: абсолютное позиционирование
относительное позиционирование
плавающая блоковая модель
Для определения схемы позиционирования используется свойство
position
, оно может принимать четыре значения, соответствующие выбранной схеме позиционирования:
static
- блок позиционируется в нормальном потоке. Это значение по умолчанию.
relative
- относительное позиционирование (относительно нормального потока).
absolute
- абсолютное позиционирование
fixed
- фиксированное позиционирование
(фиксируется относительно области просмотра).
Сегодня мы рассмотрим
абсолютное позиционирование
, остальные схемы будем рассматривать в следующих уроках.
Абсолютное позиционирование.
При этой схеме позиционирования расположение блока на странице не зависит от того, в каком месте html-кода расположен этот блок. Расположение каждого блока задается указанием, в каком месте экрана отобразить данный блок. Для этого существуют четыре свойства:
left
- указывает на сколько надо сместить блок относительно левого края окна.
right
- указывает на сколько надо сместить блок относительно правого края окна.
top
- указывает на сколько надо сместить блок относительно верхнего края окна.
bottom
- указывает на сколько надо сместить блок относительно нижнего края окна.
Вернемся к нашему примеру. Наши блоки
header
,
menu
и
footer
позиционируются в нормальном потоке, поэтому свойство
position
для них задавать не надо.
А вот блок
content
нужно расположить в другом месте, поэтому для него мы укажем свойство
position:absolute
и зададим смещение: от левого края окна на ширину блока
menu
, т.е. на 190 пикселов, а от верхнего края окна на высоту блока
header
, т.е. на 100 пикселов.
#header{ background:darkred; width:715px; height:100px;
}
#menu{ background:oldlace; width:190px; height:300px;
}
#content{
background:oldlace; width:525px; height:300px; position:absolute; left:190px; top:100px;
}
#footer{ background:darkred; width:715px; height:30px;
}
Теперь наша страница в браузере выглядит так (рис. 96):
Рис. 96. Страница
Наш блок расположился не совсем так, как ожидалось. Это от того, что мы не учли один нюанс: у браузеров есть свои, встроенные таблицы стилей. И, если мы не задали какое-либо свойство, то используется свойство по умолчанию.
Так, по умолчанию для элемента
body
определены поля, а мы их не учитывали при задании свойств смещения. Чтобы решить эту проблему, достаточно задать для
body
свойство
margin:0px
, т.е. явно указать размер полей (в нашем примере - их отсутствие). Добавим это в таблицу стилей: body{ margin:0px;
}
Теперь наша страница выглядит так, как мы и ожидали (рис. 97):
}
#footer{ background:darkred; width:715px; height:30px;
}
Теперь наша страница в браузере выглядит так (рис. 96):
Рис. 96. Страница
Наш блок расположился не совсем так, как ожидалось. Это от того, что мы не учли один нюанс: у браузеров есть свои, встроенные таблицы стилей. И, если мы не задали какое-либо свойство, то используется свойство по умолчанию.
Так, по умолчанию для элемента
body
определены поля, а мы их не учитывали при задании свойств смещения. Чтобы решить эту проблему, достаточно задать для
body
свойство
margin:0px
, т.е. явно указать размер полей (в нашем примере - их отсутствие). Добавим это в таблицу стилей: body{ margin:0px;
}
Теперь наша страница выглядит так, как мы и ожидали (рис. 97):
Рис. 97. Результат
В принципе размеры смещения можно было задать и для каждого блока, иногда это необходимо. Главное, что необходимо запомнить: при абсолютном позиционировании следует задать для блока свойство
position:absolute
и свойства смещения относительно "родительского" элемента. В нашем примере родительским элементом для div-ов было окно браузера, но может быть и по- другому.Предположим, мы решили добавить блок новостей на нашу страницу и разместить его в блоке контента:
Рис. 98. Результат
Тогда в нашу html-страницу, в
div id="content"
мы добавиим
div id="news"
:
шапка сайта
меню
контент
блок новостей
низ сайта
позиционировании), а относительно самого блока в нормальном потоке. Это будет понятнее на примере. Пусть у нас есть html-страница с тремя div-ами:
Теперь наша страница выглядит так (рис. 100):
Рис. 100. Результат
Наш второй блок сместился вниз и вправо относительно того места, где бы он находился в нормальном потоке. Остальные же блоки остались на своих местах. Практически относительное позиционирование применяется достаточно редко, поэтому мы не будем больше уделять этому внимание и рассмотрим плавающие блоки.
Плавающие блоки.
Эти блоки нельзя позиционировать с точностью до пиксела, как в предыдущих схемах, но именно эта схема позиционирования очень распространенна. Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно.
Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помоьщью параметра
align
Плавающие блоки определяются свойством
float
, который определяет будет ли блок плавающим и в какую сторону он будет перемещаться.
Возможны три варианта:
left
- блок прижимается к левому краю, остальные элементы обтекают его с правой стороны.
right
- блок прижимается к правому краю, остальные элементы обтекают его с левой стороны.
none
- блок не перемещается и позиционируется согласно свойству
position
Давайте посмотрим на примере:
Просто какие-то элементы на странице. Это может быть просто текст, ссылки, списки, картинки и т.д.
А что будет, если плавающих блоков на странице несколько?
Просто какие-то элементы на странице. Это может быть просто текст, ссылки, списки, картинки и т.д.
#blok2{ border:1px solid red; width:150px; height:50px; float:left;
}
Тогда второй блок прижмется к правому краю первого блока:
Аналогична будет ситуация при одинаковых значениях
right
:
#blok1{ border:1px solid red; width:150px; height:50px; float:right;
}
#blok2{ border:1px solid red; width:150px; height:50px; float:right;
}
Обратите внимание: сначала к правому краю прижмется блок 1, а уже к нему прижмется блок 2. А что делать, если мы хотим, чтобы блоки были прижаты к правому краю, но располагались бы один под другим. Для этого существует свойство
clear
, которое определяет, какие стороны плавающего блока не могут соседствовать с другими плавающими блоками. У этог свойства может быть задано одно из четырех значений:
left
- блок должен располагаться ниже всех левосторонних блоков.
right
- блок должен располагаться ниже всех правосторонних блоков.
both
- блок должен располагаться ниже всех плавающих блоков.
none
- никаких ограничений нет, это значение по умолчанию.
#blok1{ border:1px solid red; width:150px; height:50px; float:right;
}
#blok2{ border:1px solid red; width:150px; height:50px; float:right; clear:right;
}
Теперь получилось так, как и хотелось: один блок под другим:
В предыдущем уроке, мы с вами с помощью абсолютного позиционирования делали вот такую страницу (рис. 101):
Рис. 101. Результат
Давайте посмотрим, как ее можно сделать с помощью плавающих блоков.
Посмотрим на наш блок новостей, видно, что он располагается ниже текста в блоке
content
. А ведь мы хотели, чтобы блок новостей был справа, а текст обтекал бы его слева.
Почему же у нас так не получилось? Потому что наш блок
news
в html- коде располагается ниже текста и его будет обтекать только тот текст, который расположен ниже его. Чтобы исправить это надо поместить наш
div="news"
выше текста (т.е. до слова "контент"):
#news{ background:yellow; width:150px; height:280px; float:right; margin:10px;
}
Теперь мы добились такого же резельтата, как и при абсолютном позиционировании (рис. 104).
Рис. 104. Результат
Согласитесь, что с помощью плавающих блоков верстать страницу проще: не надо рассчитывать пикселы, да и код короче. К тому же при "резиновой" верстке мы и не можем указать точное расположение блока на экране, а с помощью плавающих блоков нам это и не нужно, достаточно указать лишь ориентир (слева, справа, ниже или в той же линии).
Фиксированные блоки.
Как вы помните при фиксированном позиционировании блок фиксируется относительно области просмотра. В некотором смысле фиксированные блоки похожи на фреймы. Только внутри фрейма доступна прокрутка, а внутри блока нет.
У фиксированных блоков есть один существенный недостаток: они не поддерживаются браузерами Internet Explorer. А потому использовать их пока
Рис. 107. Результат
Контрольные вопросы:
1.
Как задается абсолютное позиционирование? Раскрыть суть.
2.
Понятие относительного позиционирования и способ его задания?
Раскрыть суть.
3.
Позиционирование и какие виды позиционирования существуют?
Перечислить. Раскрыть суть понятий.
Блок 1
Блок 2
Блок 3
Теперь наша страница выглядит так (рис. 100):
Рис. 100. Результат
Наш второй блок сместился вниз и вправо относительно того места, где бы он находился в нормальном потоке. Остальные же блоки остались на своих местах. Практически относительное позиционирование применяется достаточно редко, поэтому мы не будем больше уделять этому внимание и рассмотрим плавающие блоки.
Плавающие блоки.
Эти блоки нельзя позиционировать с точностью до пиксела, как в предыдущих схемах, но именно эта схема позиционирования очень распространенна. Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно.
Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помоьщью параметра
align
Плавающие блоки определяются свойством
float
, который определяет будет ли блок плавающим и в какую сторону он будет перемещаться.
Возможны три варианта:
left
- блок прижимается к левому краю, остальные элементы обтекают его с правой стороны.
right
- блок прижимается к правому краю, остальные элементы обтекают его с левой стороны.
none
- блок не перемещается и позиционируется согласно свойству
position
Давайте посмотрим на примере:
Текст блока 1
Просто какие-то элементы на странице. Это может быть просто текст, ссылки, списки, картинки и т.д.
А что будет, если плавающих блоков на странице несколько?
Текст блока 1
Текст блока 2
Просто какие-то элементы на странице. Это может быть просто текст, ссылки, списки, картинки и т.д.
#blok2{ border:1px solid red; width:150px; height:50px; float:left;
}
Тогда второй блок прижмется к правому краю первого блока:
Аналогична будет ситуация при одинаковых значениях
right
:
#blok1{ border:1px solid red; width:150px; height:50px; float:right;
}
#blok2{ border:1px solid red; width:150px; height:50px; float:right;
}
Обратите внимание: сначала к правому краю прижмется блок 1, а уже к нему прижмется блок 2. А что делать, если мы хотим, чтобы блоки были прижаты к правому краю, но располагались бы один под другим. Для этого существует свойство
clear
, которое определяет, какие стороны плавающего блока не могут соседствовать с другими плавающими блоками. У этог свойства может быть задано одно из четырех значений:
left
- блок должен располагаться ниже всех левосторонних блоков.
right
- блок должен располагаться ниже всех правосторонних блоков.
both
- блок должен располагаться ниже всех плавающих блоков.
none
- никаких ограничений нет, это значение по умолчанию.
#blok1{ border:1px solid red; width:150px; height:50px; float:right;
}
#blok2{ border:1px solid red; width:150px; height:50px; float:right; clear:right;
}
Теперь получилось так, как и хотелось: один блок под другим:
В предыдущем уроке, мы с вами с помощью абсолютного позиционирования делали вот такую страницу (рис. 101):
Рис. 101. Результат
Давайте посмотрим, как ее можно сделать с помощью плавающих блоков.
шапка сайта
меню
контент
блок новостей
низ сайта
левосторонними. А блок
news
должен прижиматься к правому краю, т.е. его мы сделаем правосторонним плавающим блоком:
#header{ background:darkred; width:715px; height:100px;
}
#menu{ background:oldlace; width:190px; height:300px; float:left;
}
#content{ background:oldlace; width:525px; height:300px; float:left;
}
#footer{ background:darkred; width:715px; height:30px;
}
#news{ background:yellow; width:150px; height:280px; float:right;
}
Наша страница в браузере выглядит так (рис. 102):
Рис. 102. Результат
news
должен прижиматься к правому краю, т.е. его мы сделаем правосторонним плавающим блоком:
#header{ background:darkred; width:715px; height:100px;
}
#menu{ background:oldlace; width:190px; height:300px; float:left;
}
#content{ background:oldlace; width:525px; height:300px; float:left;
}
#footer{ background:darkred; width:715px; height:30px;
}
#news{ background:yellow; width:150px; height:280px; float:right;
}
Наша страница в браузере выглядит так (рис. 102):
Рис. 102. Результат
Посмотрим на наш блок новостей, видно, что он располагается ниже текста в блоке
content
. А ведь мы хотели, чтобы блок новостей был справа, а текст обтекал бы его слева.
Почему же у нас так не получилось? Потому что наш блок
news
в html- коде располагается ниже текста и его будет обтекать только тот текст, который расположен ниже его. Чтобы исправить это надо поместить наш
div="news"
выше текста (т.е. до слова "контент"):
шапка сайта
меню
блок новостей
контент низ сайта
#news{ background:yellow; width:150px; height:280px; float:right; margin:10px;
}
Теперь мы добились такого же резельтата, как и при абсолютном позиционировании (рис. 104).
Рис. 104. Результат
Согласитесь, что с помощью плавающих блоков верстать страницу проще: не надо рассчитывать пикселы, да и код короче. К тому же при "резиновой" верстке мы и не можем указать точное расположение блока на экране, а с помощью плавающих блоков нам это и не нужно, достаточно указать лишь ориентир (слева, справа, ниже или в той же линии).
Фиксированные блоки.
Как вы помните при фиксированном позиционировании блок фиксируется относительно области просмотра. В некотором смысле фиксированные блоки похожи на фреймы. Только внутри фрейма доступна прокрутка, а внутри блока нет.
У фиксированных блоков есть один существенный недостаток: они не поддерживаются браузерами Internet Explorer. А потому использовать их пока
не следует. Поэтому здесь мы лишь укажем синтаксис такого правила, если хотите попробуйте сами (например, в браузере Opera).
#blok{ position:fixed; left:0px; top:0px;
}
Блок с идентификатором "blok" будет при прокрутке страницы оставаться на месте.
3.
Правила выполнения заданий:
Для выполнения задания 1 раскрыть суть основных понятий, обосновать верность ответа по пройденным темам «Свойства CSS – цвет и фон, шрифты, текст. Блоки.» теоретической части. Если недостаточно материала теоретической части, то необходимо найти в поисковых системах информацию по теме лабораторной работы и анализировать, выбрать необходимую для выполнения данной работы. Грамотно использовать оптимальные, эффективные методы поиска, анализа и оценки информации в поисковой системе или в СЭДО СВФУ (Moodle). После выполнения заданий сохранить файл в своей папке. Ответы показать преподавателю.
Составить краткий план собственного профессионального и личностного развития
Найти в поисковых системах информацию по теме лабораторной работы и анализировать, выбрать необходимую для выполнения данной работы.
Грамотно использовать оптимальные, эффективные методы поиска, анализа и оценки информации в поисковой системе или в СЭДО СВФУ (Moodle), затем выполните практическое задание (задание 2) на компьютере и представьте преподавателю для защиты.
После проверки ЛР студент должен исправить все недочеты и ошибки и вернуть работу на повторную проверку.
Создать малые группы по 4 человека. Организовать выполнение задания: ответы на контрольные вопросы (задание 3) в группах перекрестным
#blok{ position:fixed; left:0px; top:0px;
}
Блок с идентификатором "blok" будет при прокрутке страницы оставаться на месте.
3.
Правила выполнения заданий:
Для выполнения задания 1 раскрыть суть основных понятий, обосновать верность ответа по пройденным темам «Свойства CSS – цвет и фон, шрифты, текст. Блоки.» теоретической части. Если недостаточно материала теоретической части, то необходимо найти в поисковых системах информацию по теме лабораторной работы и анализировать, выбрать необходимую для выполнения данной работы. Грамотно использовать оптимальные, эффективные методы поиска, анализа и оценки информации в поисковой системе или в СЭДО СВФУ (Moodle). После выполнения заданий сохранить файл в своей папке. Ответы показать преподавателю.
Составить краткий план собственного профессионального и личностного развития
Найти в поисковых системах информацию по теме лабораторной работы и анализировать, выбрать необходимую для выполнения данной работы.
Грамотно использовать оптимальные, эффективные методы поиска, анализа и оценки информации в поисковой системе или в СЭДО СВФУ (Moodle), затем выполните практическое задание (задание 2) на компьютере и представьте преподавателю для защиты.
После проверки ЛР студент должен исправить все недочеты и ошибки и вернуть работу на повторную проверку.
Создать малые группы по 4 человека. Организовать выполнение задания: ответы на контрольные вопросы (задание 3) в группах перекрестным
опросом групп. За группу отвечает лидер либо по решению группы отвечают отдельные студенты. Баллы идут в счет группы.
Задания:
Задание 1.
1.
Абсолютное позиционирование. Дать определение. Раскрыть суть понятий.
2.
Относительное позиционирование. Дать определение. Раскрыть суть понятий.
3.
Плавающие блоки. Дать определение. Раскрыть суть понятий.
Задания 2.
Задание 2.1. Сделайте страницу, как показано на рис. 105. Размеры всех частей заданы в пикселах и не меняются в процессе масштабирования окна.
Для каждой батарейки постарайтесь обойтись одним элементом
Рис.105. Результат
Задание 2.2. Сделайте страницу, как показано на рис. 1. Иконки вокруг изображений являются ссылками, при наведении на них они меняют свой цвет
(рис. 106).
Рис.106. Результат
Задание 2.3. Создать веб-страницу, показанную на рисунке 107
Задания:
Задание 1.
1.
Абсолютное позиционирование. Дать определение. Раскрыть суть понятий.
2.
Относительное позиционирование. Дать определение. Раскрыть суть понятий.
3.
Плавающие блоки. Дать определение. Раскрыть суть понятий.
Задания 2.
Задание 2.1. Сделайте страницу, как показано на рис. 105. Размеры всех частей заданы в пикселах и не меняются в процессе масштабирования окна.
Для каждой батарейки постарайтесь обойтись одним элементом
Рис.105. Результат
Задание 2.2. Сделайте страницу, как показано на рис. 1. Иконки вокруг изображений являются ссылками, при наведении на них они меняют свой цвет
(рис. 106).
Рис.106. Результат
Задание 2.3. Создать веб-страницу, показанную на рисунке 107
Рис. 107. Результат
Контрольные вопросы:
1.
Как задается абсолютное позиционирование? Раскрыть суть.
2.
Понятие относительного позиционирования и способ его задания?
Раскрыть суть.
3.
Позиционирование и какие виды позиционирования существуют?
Перечислить. Раскрыть суть понятий.