Министерство науки и высшего образования Российской Федерации
ФГАОУ ВО «Северо-Восточный федеральный университет им. М.К. Аммосова»
Колледж инфраструктурных технологий
Кафедра эксплуатации и обслуживания информационных систем
ЛАБОРАТОРНАЯ РАБОТА №14
по дисциплине «Web-програмирование»
на тему: «РАЗМЕЩЕНИЕ БЛОКОВ НА СТРАНИЦЕ – АБСОЛЮТНОЕ ПОЗИЦИОНИРОВАНИЕ, ОТНОСИТЕЛЬНОЕ ПОЗИЦИОНИРОВАНИЕ И ПЛАВАЮЩИЕ БЛОКИ. (2Ч)»
Выполнили: студент гр. СИСА 21-2 КИТ
Фёдоров Алексей
Проверила:
Петрова А.Г.
Якутск 2022г
Задания:
Задание 1.
1. Абсолютное позиционирование. Дать определение. Раскрыть суть понятий
При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Установить этот тип можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера, называемого «видимой областью» или «областью просмотра»
2. Относительное позиционирование. Дать определение. Раскрыть суть понятий
Относительно позиционированный элемент ведёт себя как элемент в потоке за исключением того, что его текущее положение можно при помощи определённых CSS свойств сместить. К этим CSS свойствам относятся left , top , right и bottom
3. Плавающие блоки. Дать определение. Раскрыть суть понятий
Плавающими будем называть такие элементы, которые обтекаются по контуру другими объектами веб-страницы, например, текстом. Правильнее говорить «обтекаемые элементы», но с другой стороны термин «плавающий элемент» давно уже прижился, так что его и буду использовать в дальнейшем.
Задания 2.
Задание 2.1. Сделайте страницу, как показано на рис. 1. Размеры всех частей заданы в пикселах и не меняются в процессе масштабирования окна. Для каждой батарейки постарайтесь обойтись одним элементом
Рис.1
Задание 2.2. Сделайте страницу, как показано на рис. 1. Иконки вокруг изображений
являются ссылками, при наведении на них они меняют свой цвет (рис. 2).
Рис.2
Задание 2.3. Создать веб-страницу, показанную на рисунке
Контрольные вопросы:
1. Как задается абсолютное позиционирование? Раскрыть суть
При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Установить этот тип можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера, называемого «видимой областью» или «областью просмотра»
2. Понятие относительного позиционирования и способ его задания? Раскрыть суть
Если задать значение relative свойства position, то положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
3. Что такое позиционирование и какие виды позиционирования существуют?
Перечислить. Раскрыть суть понятий
Позиционирование — это образ компании или товара, который маркетологи выстраивают в сознании целевой аудитории с помощью разных тактик.
Различают следующие виды стратегии позиционирования.
Позиционирование по атрибуту. Самый распространенный подход. ...
Позиционирование по выгоде. ...
Ценовое позиционирование. ...
Конкурентное позиционирование. ...
Позиционирование по категории. ...
Позиционирование по потребителю.