26 вересня о 18:00Вебінар: Особливості статевого виховання у школах України

Позиціювання елементів веб-сторінки за допомогою стилів

Про матеріал
Мета: Допомогти учням засвоїти факти та основні ідеї позиціювання елементів веб-сторінки за допомогою стилів. Забезпечити якість вивчення нового матеріалу. Формувати вміння виділяти головне, актуалізувати, конспектувати, порівнювати, зіставляти. Забезпечити диференційований підхід. Встановити зв'язки між засвоєними та новими знаннями. Формувати групи компетентностей: соціально-трудову, інформаційну, загальнокультурну, соціально-трудову, уміння вчитися
fly.jpg
fly.jpg
Перегляд файлу

Позиціювання елементів веб-сторінки за допомогою стилів

Розміщувати елементи на сторінці можна не лише за допомогою фреймів і таблиць –каскадні стилі надають для цього додаткові цікаві можливості.

Зокрема, можна обирати один із трьох типів позиціювання елементів на сторінці: статичне, відносне та абсолютне позиціювання. Тег визначається атрибутом POSITION, який може набувати таких значень:

  • static – статичне; задане за умовчанням і передбачає розміщення чергового об’єкта на вільному місці після попереднього;
  • relative – відносне; визначає розташування об’єкта відносно того місця, яке б він зайняв, якби для нього було використане статичне позиціювання;
  • absolute – абсолютне; передбачає розміщення об’єкта шляхом задавання точного місця його розташування на сторінці.

Для відносного та абсолютного позиціювання використовують чотири властивості – left (ліворуч) та right (праворуч), які задають відступи для розміщення об’єкта по горизонталі, і top (згори) та bottom (знизу) – по вертикалі. Необхідно задавати по одному значенню позиції по горизонталі та вертикалі. При цьому елементи можуть накладатися один на інший: нижче буде розташований об’єкт, описаний першим, а зверху – той, який описали останнім.

Якщо потрібна зміна стандартного порядку накладання, застосовують шари. Шар об’єкта задають за допомогою властивості z-index, значенням якої можуть бути лише ціле число та auto (за умовчанням). Об’єкт із більшим значенням z-index розміститься поверх об’єкта з меншим значенням цієї властивості, перекриваючи його. Якщо ж об’єкти матимуть однакові її значення, то зверху розташується об’єкт, описаний нижче за текстом у HTML-документі.

Вправа 1.

Розглянемо, як позицію вати три об’єкти-зображення і два фрагменти тексту. Координати спеціально вибрані так, щоб об’єкти перекривалися. Зауважте, що слід використовувати атрибут STYLE, а не тег <STYLE>

  1. У програмі Блокнот введіть такий текст веб-сторінки:

<HTML>

<HEAD>

<TITLE>Позиціювання</TITLE>

<BODY>

<DIV STYLE=”position: absolute; top: 0; left: 70; width: 50; height: 100”>

<IMG SRC=”1.jpg”></DIV>

<DIV STYLE=”position: absolute; top: 10; left: 15; width: 600; height: 100”>

<H1 STYLE=”color: yellow”> Повій, вітре, до схід сонця, до схід сонця, край віконця.</H1></DIV>

<DIV STYLE=”position: absolute; top: 60; left: 400; width: 50; height: 100”>

<H1 STYLE=”color: blue”>Чайка</H1></DIV>

</BODY>

</HTML>

Тег <DIV> тут виконує роль контейнера: елементи, що містяться в ньому, успадковують його властивості, зазначені в атрибуті STYLE. Перший контейнер містить зображення, тип розташування якого є абсолютним, з нульовим відступом згори, 70 пікселів – відступ зліва; його ширина становить 50, висота – 100 пікселів і т.д.

  1. Збережіть цей документ у файлі з іменем pryklad2.html. Скопіюйте у папку з цим документом зображення 1.jpg.
  2. Продемонструйте вчителю pryklad2.html у браузері

  1. Внесіть зміни у текст веб-сторінки, який стосується першого контейнера (із зображенням):

<DIV STYLE=”position: absolute; top: 0; left: 70; width: 50; height: 100; z-index: 2”>

<IMG SRC=”1.jpg></DIV>

Решту документа залиште без змін. Хоча в тексті HTML-документа зображення описане першим, завдяки тому, що йому присвоєно індекс із більшим номером, воно відобразиться поверх інших об’єктів.

  1. Під час відображення сторінки може статися, що розміри елемента перевищують розміри наданого йому місця. Наприклад, текст і малюнок не вміщуються у виділений для них прямокутник. У таких випадках використовують властивість overflow (переповнення). Вона може мати три значення:
  • none – якщо елемент вийде за межі наданого місця, він все одно буде показаний;
  • clip – об’єкти, що виходять за межі, будуть обрізані;
  • scroll – буде використано прокручування.

Відкрийте HTML-код сторінки та внесіть у другий контейнер, що містить текст «Повій, вітре, до схід сонця, до схід сонця, край віконця», такі зміни:

<DIV STYLE=”position: absolute; top: 10; left: 15; width: 220; height: 120; overflow: scroll”>

<H1 STYLE=”color: yellow”> Повій, вітре, до схід сонця, до схід сонця, край віконця.</H1></DIV>

Перегляд файлу

Позиціювання елементів веб-сторінки за допомогою стилів

Розміщувати елементи на сторінці можна не лише за допомогою фреймів і таблиць –каскадні стилі надають для цього додаткові цікаві можливості.

Зокрема, можна обирати один із трьох типів позиціювання елементів на сторінці: статичне, відносне та абсолютне позиціювання. Тег визначається атрибутом POSITION, який може набувати таких значень:

     static – статичне; задане за умовчанням і передбачає розміщення чергового об’єкта на вільному місці після попереднього;

     relative – відносне; визначає розташування об’єкта відносно того місця, яке б він зайняв, якби для нього було використане статичне позиціювання;

     absolute – абсолютне; передбачає розміщення об’єкта шляхом задавання точного місця його розташування на сторінці.

Для відносного та абсолютного позиціювання використовують чотири властивості – left (ліворуч) та right (праворуч), які задають відступи для розміщення об’єкта по горизонталі, і top (згори) та bottom (знизу) – по вертикалі. Необхідно задавати по одному значенню позиції по горизонталі та вертикалі. При цьому елементи можуть накладатися один на інший: нижче буде розташований об’єкт, описаний першим, а зверху – той, який описали останнім.

Якщо потрібна зміна стандартного порядку накладання, застосовують шари. Шар об’єкта задають за допомогою властивості z-index, значенням якої можуть бути лише ціле число та auto (за умовчанням). Об’єкт із більшим значенням z-index розміститься поверх об’єкта з меншим значенням цієї властивості, перекриваючи його. Якщо ж об’єкти матимуть однакові її значення, то зверху розташується об’єкт, описаний нижче за текстом у HTMLдокументі. Вправа 1. 

Розглянемо, як позицію вати три об’єкти-зображення і два фрагменти тексту. Координати спеціально вибрані так, щоб об’єкти перекривалися. Зауважте, що слід використовувати атрибут STYLE, а не тег <STYLE>

1. У програмі Блокнот введіть такий текст веб-сторінки:

<HTML>

<HEAD>

<TITLE>Позиціювання</TITLE>

<BODY>

<DIV STYLE=”position: absolute; top: 0; left: 70; width: 50; height: 100”> <IMG SRC=”1.jpg”></DIV>

<DIV STYLE=”position: absolute; top: 10; left: 15; width: 600; height: 100”>

<H1 STYLE=”color: yellow”> Повій, вітре, до схід сонця, до схід сонця, край віконця.</H1></DIV>

<DIV STYLE=”position: absolute; top: 60; left: 400; width: 50; height: 100”>

<H1 STYLE=”color: blue”>Чайка</H1></DIV>

</BODY>

</HTML>

Тег <DIV> тут виконує роль контейнера: елементи, що містяться в ньому, успадковують його властивості, зазначені в атрибуті STYLE. Перший контейнер містить зображення, тип розташування якого є абсолютним, з нульовим відступом згори, 70 пікселів – відступ зліва; його ширина становить 50, висота – 100 пікселів і т.д.

2.    Збережіть цей документ у файлі з іменем pryklad2.html. Скопіюйте у папку з цим документом зображення 1.jpg.

3.    Продемонструйте вчителю pryklad2.html у браузері

 

4.    Внесіть зміни у текст веб-сторінки, який стосується першого контейнера (із зображенням): <DIV STYLE=”position: absolute; top: 0; left: 70; width: 50; height: 100; z-index: 2”> <IMG SRC=”1.jpg></DIV>

Решту документа залиште без змін. Хоча в тексті HTML-документа зображення описане першим, завдяки тому, що йому присвоєно індекс із більшим номером, воно відобразиться поверх інших об’єктів.

 

5.    Під час відображення сторінки може статися, що розміри елемента перевищують розміри наданого йому місця. Наприклад, текст і малюнок не вміщуються у виділений для них прямокутник. У таких випадках використовують властивість overflow (переповнення). Вона може мати три значення:

­     none – якщо елемент вийде за межі наданого місця, він все одно буде показаний; ­        clip – об’єкти, що виходять за межі, будуть обрізані; ­     scroll – буде використано прокручування.

Відкрийте HTML-код сторінки та внесіть у другий контейнер, що містить текст «Повій, вітре, до схід сонця, до схід сонця, край віконця», такі зміни:

<DIV STYLE=”position: absolute; top: 10; left: 15; width: 220; height: 120; overflow: scroll”>

<H1 STYLE=”color: yellow”> Повій, вітре, до схід сонця, до схід сонця, край віконця.</H1></DIV>

Перегляд файлу
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Позиціювання елементів веб-сторінки за допомогою стилів
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Позиціювання трьох об'єктів ― зображення і два фрагменти тексту. Тег <DIV> тут виконує роль контейнера: елементи, що містяться в ньому, успадковують його властивості, зазначені в атрибуті STYLE.
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Об'єкт із значенням z-index. Якщо внести зміни:<DIV STYLE=
Використання властивості z-index дає змогу відображати об'єкти незалежно від порядку їх розташування" title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Об'єкт із значенням z-index. Якщо внести зміни:
Використання властивості z-index дає змогу відображати об'єкти незалежно від порядку їх розташування">
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Об'єкт із властивістю overflow Якщо внести зміни:<DIV STYLE=

Повій, вітре, до схід сонця, до схід сонця, край віконця.

" title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Об'єкт із властивістю overflow Якщо внести зміни:

Повій, вітре, до схід сонця, до схід сонця, край віконця.

">
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Продовжіть розробку веб-сторінки «Моя маленька батьківщина»Заповнити словничок Позиціювання елементів веб-сторінки за допомогою стилів
Зміст слайдів
Номер слайду 1

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Позиціювання елементів веб-сторінки за допомогою стилів

Номер слайду 2

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Позиціювання трьох об'єктів ― зображення і два фрагменти тексту. Тег

тут виконує роль контейнера: елементи, що містяться в ньому, успадковують його властивості, зазначені в атрибуті STYLE.

Номер слайду 3

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Об'єкт із значенням z-index. Якщо внести зміни:

Використання властивості z-index дає змогу відображати об'єкти незалежно від порядку їх розташування

Номер слайду 4

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Об'єкт із властивістю overflow Якщо внести зміни:

Повій, вітре, до схід сонця, до схід сонця, край віконця.

Номер слайду 5

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Продовжіть розробку веб-сторінки «Моя маленька батьківщина»Заповнити словничок Позиціювання елементів веб-сторінки за допомогою стилів

Перегляд файлу










Перегляд файлу
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Пригадайте: Проектування та верстка веб-сторінок. Що таке HTML?Що таке структура веб-сторінки?Які Вам відомі теги форматування веб-сторінки?
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Ти дізнаєшся: Проектування та верстка веб-сторінок
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Позиціювання елементів веб-сторінки за допомогою стилів
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Типи позиціювання елементів на сторінці Статичне. Відносне Абсолютне
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилівзадане за умовчанням і передбачає розміщення чергового об'єкта на вільному місці після попередньоговизначає розташування об'єкта відносно того місця, яке б він зайняв, якби для нього було використане статичне позиціюванняпередбачає розміщення об'єкта шляхом задавання точного місця його розташування на сторінці. Тег визначається атрибутом POSITION, який може набувати таких значень:static (статичне) relative (відносне) аbsolute(абсолютне)
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилівleft (ліворуч)right (праворуч, які задають відступи для розміщення об'єкта по горизонталіtop (згори)bottom (знизу) — по вертикаліДля відносного та абсолютного позиціювання використовують властивості Необхідно задавати по одному значенню позиції по горизонталі та вертикалі. При цьому елементи можуть накладатися один на інший: нижче буде розташований об'єкт, описаний першим, а зверху — той, який описали останнім
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Зміна стандартного порядку накладання, застосовують шари. Шар об'єкта задають за допомогою властивості Z-index, значенням якої можуть бути лише ціле число та auto (за умовчанням). Об'єкт із більшим значенням z-index розміститься поверх об'єкта з меншим значенням цієї властивості, перекриваючи його. Якщо ж об'єкти матимуть однакові її значення, то зверху розташується об'єкт. Вправа 5_2. Позиціювання трьох об'єктів – зображення і два фрагменти тексту
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Позиціювання трьох об'єктів ― зображення і два фрагменти тексту. Вправа 5_2. Позиціювання трьох об'єктів – зображення і два фрагменти тексту. Тег <DIV> тут виконує роль контейнера: елементи, що містяться в ньому, успадковують його властивості, зазначені в атрибуті STYLE.
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Об'єкт із значенням z-index. Якщо внести зміни:<DIV STYLE=
Використання властивості z-index дає змогу відображати об'єкти незалежно від порядку їх розташування. Вправа 5_2_п. 4-5. Об'єкт із значенням z-index" title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Об'єкт із значенням z-index. Якщо внести зміни:
Використання властивості z-index дає змогу відображати об'єкти незалежно від порядку їх розташування. Вправа 5_2_п. 4-5. Об'єкт із значенням z-index">
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Під час відображення сторінки може статися, що розміри елемента перевищують розміри наданого йому місця. Наприклад, текст і малюнок не вміщуються у виділений для них прямокутник. У таких випадках використовують властивість overflow (переповнення). Overflow може мати значенняnоnе якщо елемент вийде за межі наданого місця, він все одно буде показанийclipоб'єкти, що виходять за межі, будуть обрізаніscrollбуде використано розкручування
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Об'єкт із властивістю overflow Якщо внести зміни:<DIV STYLE=

Повій, вітре, до схід сонця, до схід сонця, край віконця.

Вправа_5_2_п7. Об'єкт із властивістю overflow " title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Об'єкт із властивістю overflow Якщо внести зміни:

Повій, вітре, до схід сонця, до схід сонця, край віконця.

Вправа_5_2_п7. Об'єкт із властивістю overflow ">
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Продовжіть розробку веб-сторінки «Моя маленька батьківщина»Заповнити словничок Позиціювання елементів веб-сторінки за допомогою стилів
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Працюємо за комп’ютером
Зміст слайдів
Номер слайду 1

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк

Номер слайду 2

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок

Номер слайду 3

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Пригадайте: Проектування та верстка веб-сторінок. Що таке HTML?Що таке структура веб-сторінки?Які Вам відомі теги форматування веб-сторінки?

Номер слайду 4

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Ти дізнаєшся: Проектування та верстка веб-сторінок

Номер слайду 5

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Позиціювання елементів веб-сторінки за допомогою стилів

Номер слайду 6

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Типи позиціювання елементів на сторінці Статичне. Відносне Абсолютне

Номер слайду 7

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилівзадане за умовчанням і передбачає розміщення чергового об'єкта на вільному місці після попередньоговизначає розташування об'єкта відносно того місця, яке б він зайняв, якби для нього було використане статичне позиціюванняпередбачає розміщення об'єкта шляхом задавання точного місця його розташування на сторінці. Тег визначається атрибутом POSITION, який може набувати таких значень:static (статичне) relative (відносне) аbsolute(абсолютне)

Номер слайду 8

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилівleft (ліворуч)right (праворуч, які задають відступи для розміщення об'єкта по горизонталіtop (згори)bottom (знизу) — по вертикаліДля відносного та абсолютного позиціювання використовують властивості Необхідно задавати по одному значенню позиції по горизонталі та вертикалі. При цьому елементи можуть накладатися один на інший: нижче буде розташований об'єкт, описаний першим, а зверху — той, який описали останнім

Номер слайду 9

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Зміна стандартного порядку накладання, застосовують шари. Шар об'єкта задають за допомогою властивості Z-index, значенням якої можуть бути лише ціле число та auto (за умовчанням). Об'єкт із більшим значенням z-index розміститься поверх об'єкта з меншим значенням цієї властивості, перекриваючи його. Якщо ж об'єкти матимуть однакові її значення, то зверху розташується об'єкт. Вправа 5_2. Позиціювання трьох об'єктів – зображення і два фрагменти тексту

Номер слайду 10

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Позиціювання трьох об'єктів ― зображення і два фрагменти тексту. Вправа 5_2. Позиціювання трьох об'єктів – зображення і два фрагменти тексту. Тег

тут виконує роль контейнера: елементи, що містяться в ньому, успадковують його властивості, зазначені в атрибуті STYLE.

Номер слайду 11

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Об'єкт із значенням z-index. Якщо внести зміни:

Використання властивості z-index дає змогу відображати об'єкти незалежно від порядку їх розташування. Вправа 5_2_п. 4-5. Об'єкт із значенням z-index

Номер слайду 12

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Під час відображення сторінки може статися, що розміри елемента перевищують розміри наданого йому місця. Наприклад, текст і малюнок не вміщуються у виділений для них прямокутник. У таких випадках використовують властивість overflow (переповнення). Overflow може мати значенняnоnе якщо елемент вийде за межі наданого місця, він все одно буде показанийclipоб'єкти, що виходять за межі, будуть обрізаніscrollбуде використано розкручування

Номер слайду 13

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПозиціювання елементів веб-сторінки за допомогою стилів. Об'єкт із властивістю overflow Якщо внести зміни:

Повій, вітре, до схід сонця, до схід сонця, край віконця.

Вправа_5_2_п7. Об'єкт із властивістю overflow

Номер слайду 14

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Продовжіть розробку веб-сторінки «Моя маленька батьківщина»Заповнити словничок Позиціювання елементів веб-сторінки за допомогою стилів

Номер слайду 15

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Працюємо за комп’ютером

zip
До підручника
Інформатика (рівень стандарту) 10 клас (Морзе Н.В., Вембер В.П., Кузьмінська О.Г.)
Додано
6 березня
Переглядів
495
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку