PROFdistosvita - Урок 2

Перебіг уроку

Виконати онлайн вправу
Виконати практичне завдання 2

Пригадати. Онлайн вправа

Практичне завдання

Завдання: створити сторінки сайту з графічними об’єктами - галерея

Перебіг виконання практичного завдання № 2.

1.) Зайти за посиланням https://jsfiddle.net/ , пропишемо код для утворення галереї зображень, який потім можна вставити у код вебсторінки.

1. Тут https://docs.google.com/document/d/1n7ePp_kCG0jQLB-Iock2XOjT2vTtBk9mdi-lvM6vU1A/edit?usp=sharing скопіювати HTML код, для створення галереї зображень.

Cкопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область HTML (CTRL+V) і натиснути RUN, щоб переглянути результат у області перегляду

код містить заголовок <h1> і основний блок

<div> з ідентифікатором #gallery.

Усередині блоку галереї знаходиться шість HTML5-тегів

<figure> з класом .photo, кожен з яких містить тег <img> з

мініатюрою зображення і тег <figcaption> з підписом до фото.

Крім цього, кожне зображення обгорнуте в тег <a>, який

містить посилання на відповідний повнорозмірний графічний

файл.

<h1>Photo Gallery</h1>

<figcaption>Перукар</figcaption>

</figure>

<figcaption>Адміністратор</figcaption>

</figure>

<figcaption>Кравець</figcaption>

</figure>

<figcaption>Радіомеханік</figcaption>

</figure>

<figcaption>Електромонтер</figcaption>

</figure>

<figcaption>модельєр-конструктор"</figcaption>

</figure>

</div>

2. Тут https://docs.google.com/document/d/1CBzaQQFnUsHGB87c_QO0xVP-_TToAbmOWN6sgFEoE4o/edit?usp=sharing копіюємо перший код для CSS

Cкопіювати код (CTRL+C) та вставити його у онлайн редактор коду у область CSS (CTRL+V) і натиснути RUN, щоб переглянути результат у області перегляду

.container {

width: 100%; /* ширина блоку-контейнеру */

max-width: 960px; /* максимальна ширина контейнера */

margin: 0 auto; /* этот стиль центрирует контейнер */

}

.photo {

float: left; /* говоримо елементам шикуватися один за другим */

width: 33.333333%; /* встановлюємо ширину елементу */

padding: 10px; /* додаємо відступи з кожної сторони */

box-sizing: border-box; /* змінюємо спосіб обчислення ширини */

}

2.) Знайти в Інтернеті фото / ПКМ / копіювати адресу зображення https://docs.google.com/document/d/1PfPACXVEShY6MRSMDTMRFiedn85nwPzrI07R17HG66M/edit?usp=sharing

та вставити адресу у код HTML на місце червоної адреси <img src="img/p5.jpg"> два рази однакові адреси: для мініатюр і для збільшеної копії . Натиснути RUN, щоб переглянути результат у області перегляду (не лякайтесь від отриманого результату) робота ще не завершена!

модельєр https://www.ipkprom.com.ua/wp-content/uploads/2018/08/shveya.jpg

кравець https://www.ipkprom.com.ua/wp-content/uploads/2018/08/shveya-34c46d9d-large.jpg

адміністратор https://biznesua.com.ua/wp-content/uploads/2017/08/Profesiya-administrator.jpg

перукар https://fakty.com.ua/wp-content/uploads/2021/01/18/stryzhka-zachiska-perukarnya-volossya.png

радіомеханік https://www.profguide.io/images/article/a/5/WkZ7EJ27Fh.jpg

електромонтер https://don.dcz.gov.ua/sites/don/files/poshuk_roboty_1.jpg

3. Додамо наступний стиль для забезпечення адаптивності картинок: скопіювати код https://docs.google.com/document/d/19s32NNvU9YNXjexOS181dBOSy0fc8mpStOiDquFg6-4/edit?usp=sharing і вставити його у область CSS

Натиснути RUN, щоб переглянути результат у області перегляду та Save, щоб згенерувати URL адресу вебсторінки

.photo img {

display: block;

max-width: 100%;

height: auto;

}

4. Оформлення мініатюр на CSS.

СПОСІБ I: ВЛАСТИВІСТЬ BORDER

border: 10px solid #eee;

box-sizing: border-box;

4. Оформлення мініатюр на CSS.

СПОСІБ II: властивості BACKGROUND-COLOR І PADDING https://docs.google.com/document/d/14AfYEmJDWDSjyrLh8iNbyduwVOeRFVxY0DXJy9NYUw8/edit?usp=sharing

padding: 10px;

background-color: #eee;

box-sizing: border-box;

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

ІІІ КРОК: Оформлення мініатюр на CSS

Кожна мініатюра повинна бути обрамлена в рамку світло-сірого кольору. Ширина рамки з кожного боку становить 10 пікселів.

Реалізувати цю рамку можна двома способами, і візуально вони нічим не відрізнятимуться. Розглялянемо обидва способи.

СПОСІБ I: ВЛАСТИВІСТЬ BORDER

Перший спосіб - створити рамку необхідного кольору і ширини для кожного тега <img>.

1. Додайте цей код до селектору .photo img:

СПОСІБ II: властивості BACKGROUND-COLOR І PADDING

Другий спосіб полягає в тому, щоб імітувати вигляд рамки за

допомогою створення 10-піксельних внутрішніх відступів і

зафарбовування фону в світло-сірий колір. Замініть код з

першого способу на наступний:

Зробити вибір на користь другого способу можна, якщо вам необхідно, щоб фон, який відображається в «рамці», також був і під фотографією. Навіщо це може знадобитися?

Наприклад, в разі, коли в галереї присутні зображення з прозорими або напівпрозорими областями, і вам потрібно, щоб з-під цієї прозорої області переглядав фон.

5.Оформити cтиль при наведенні курсору. Запишемо стиль для псевдокласу .photo a: hover: на CSS https://docs.google.com/document/d/1lgfyd8iBDtT56SWTM5E_-FNRcoesrTmM7fIFBLbNvSA/edit?usp=sharing

Натиснути RUN, щоб переглянути результат у області перегляду та Save, щоб згенерувати URL адресу вебсторінки

.photo a:hover {

opacity: 0.5;

}

6. Заставимо тег <a> поводитися як блок, інакше ми не побачимо, як попередній код спрацьовує на мініатюрі:

https://docs.google.com/document/d/13rI8DGNsnAxn-xLWadCX15M6nh_NWJz_W73AHJUzGAU/edit?usp=sharing

Натиснути RUN, щоб переглянути результат у області перегляду та Save, щоб згенерувати URL адресу вебсторінки. Прозвітувати посиланням

.photo a {

display: block;

position: relative;

}

.photo a:after {

content: '';

background: transparent url(../img/icons/eye-icon.png) no-repeat center;

width: 52px;

height: 35px;

position: absolute;

margin: auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

visibility: hidden;

}

.photo:hover> a:after {

visibility: visible;

}

.photo figcaption {

color: #999999;

text-align: center;

margin-top: 20px;

}

h1 {

font-size: 36px;

text-transform: uppercase;

color: #cccccc;

text-align: center;

margin: 30px 0;

}

body {

font-family: 'Open Sans', sans-serif;

}

#gallery {

margin-bottom: 60px;

}

#gallery:after {

content: '';

display: block;

height: 0;

clear: both;

}