І знову я вітаю Вас у черговій темі, присвяченій мові JavaScript, в якій ми розберемо методи alert, prompt, confrim. Дані методи є вбудованими в Javascript і допомагають нам взаємодіяти з користувачем.
Alert виводить на екран браузера вікно з певною інформацією, яке призупиняє скрипт до моменту натискання кнопки ОК.
Prompt зазвичай виводить вікно, в якому користувачеві задають питання, на яке він повинен відповісти в певному текстовому полі, після чого натиснути клавішу ОК. Також користувач може нічого не вводити, натиснувши клавішу скасування.
Confirm також виводить вікно, в якому користувач вже не може вводити щось у текстове поле, а може лише натиснути кнопку ОК або скасувати.
А тепер після невеликого вступу перейдемо до розгляду всього сказаного на практиці.

alert, prompt, confirm



alert("Привіт, дорогий користувач!");
var nameUser = prompt("Ваше ім'я?", "name");
var userAnswer = confirm("Ви дійсно хочете залишити сайт?");

В результаті, при оновленні сторінки браузера у нас з'явиться вікно з привітанням користувача. Після натискання кнопки ОК з'явиться наступне вікно, де будуть запитувати ваше ім'я. У цьому методі є два параметри, перший є обов'язковим і відповідає за заголовок, який виводитиметься, у нашому випадку це питання імені користувача. І другий параметр відповідає за значення, яке буде виводитись за замовчуванням у текстовому полі. Якщо Ви введете ваше ім'я та натиснете кнопку ОК, то ваше ім'я поміститися у змінну nameUser . Якщо ви натиснете кнопку скасування, то змінну буде записано null .
І насамкінець вікно, яке запитує у користувача, хоче він покинути наш сайт чи ні. У разі згоди в змінну буде поміщено булеве значення true , і при відмові false відповідно. Ось і все, що слід знати про ці методи, до зустрічі в наступних уроках!

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

Розміри зображення в CSS

.img (
width:200px;
height: 200px;
}

Давайте розберемося, що тут нового, я створив клас img в якому прописав розміри зображення, width це ширина, а height у нас висота, розміри я вказав більше оригінальних, щоб ви могли бачити, як зміниться зображення.

(Це title) Приклад сторінки на HTML5

.img (
width:50px;
height: 50px;
margin: 20px;
}
.img1 (
width:50px;
height: 50px;
}

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

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

У браузері ми бачимо таке:

Відступи від зображення в цьому прикладі я зробив завдяки параметру margin, який задав нам відступи від усіх чотирьох країв по 20 пікселів. Тут можна зробити хитрішу маніпуляцію, можна задавати відступ від конкретного краю, наприклад:

• margin-top – відступ від верхньої сторони
• margin-right – відступ від правої сторони
• margin-bottom – відступ від нижньої сторони
• margin-left – відступ від лівого боку

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

(Це title) Приклад сторінки на HTML5

.img (
width:150px;
height: 150px;
border-width: 10px;
border-style: dotted;
border-color: #ff0000;
}

У браузері:

Задаємо рамку навколо зображення завдяки параметру border для початку задаємо ширину рамки за допомогою border-width задаємо її в пікселях, далі стиль рамки, тобто її вид border-style тут є кілька значень вибирати вам:

І останній параметр, який ми регулюватимемо це колір рамки, який задається параметром border-color.

(Це title) Приклад сторінки на HTML5

body (
background: url(proba.png);
}

У браузері бачимо:

Як ви зрозуміли, ми привласнили фон тегу body завдяки селектору тегів, тому що він у нас займає весь документ, так само ми можемо привласнити і іншим тегам. Параметр background зробив нам фон малюнком адресу, до якої ми прописуємо в дужках. Так само можна і маніпулювати з тлом наприклад:

background: url(proba.png) repeat-x;

Фон буде повторюватися тільки по осі X, тобто горизонтально в одну лінію.

background: url(proba.png) repeat-y;

Фон буде повторюватися тільки по осі Y, тобто вертикально в одну лінію.

background: url(proba.png) no-repeat;

Фон не повторюватиметься, а з'явиться лише одне зображення.

background-size: 500px 200px;

Це додатковий параметр, який визначає розмір зображення для фону, ширина і висота.

Прозорість зображення за допомогою CSS

(Це title) Приклад сторінки на HTML5

.img (
opacity: 0.5;
filter: alpha (Opacity = 50);
}

У браузері бачимо таке:

Ця властивість прийшла з появою CSS3 і власне набула досить широкого застосування. Реалізується за допомогою параметра opacity задає прозорість зображення значення від 0 до 1, а другий параметр filter: alpha(Opacity=50); робить теж тільки для браузера Internet Explorier так як старі версії не підтримують параметр opacity, значення від 0 до 100. У прикладі я спеціально зробив два зображення, щоб наочно було видно різницю.

На цьому урок «CSS властивості зображення» закінчується, я сподіваюся, цей урок був вам корисний і надихнув на подальше вивчення мови та отримання нових знань.

Дата публікації:2014-04-22

Розмір фотографії буде змінено з урахуванням зазначеного розміру в сантиметрах (міліметрах, дюймах), а також з урахуванням зазначеного розміру DPI, відповідно до стандартів паперового друку. Розміри см, мм і дюймах можна вказувати з точністю до тисячних, наприклад, замість формату 15x10 можна виставити 15,201x10,203 см.

Таблиця зі стандартними розмірами фотографій при вертикальному (портретному) положенні:

Формат фото в сантиметрах (cm)	Розмір у міліметрах (mm)	Розмір у пікселях (Для друку 300 dpi)	Співвідношення сторін (При альбомній орієнтації)
3х4 (після ручного обрізання)	30x40	354x472	4:3 (1.33)
3,5х4,5 (після ручного обрізання)	35x45	413x531	4:3 (1.33)
9x13	89х127	1063x1535	10:7 (1.43)
10x15	102х152	1181x1772	3:2 (1.5)
13x18	127х178	1535x2126	7:5 (1.4)
15x20 (≈A5)	152х203	1772x2362	4:3 (1.33)
15x21	152х216	1772x2480	4:3 (1.33)
18x24	178x240	2126x2835	19:14 (1.36)
20x25	203x254	2362x2953	5:4 (1.25)
20x30 (≈A4)	203х305	2362x3543	3:2 (1.5)
30x40	305x406	3543x4724	4:3 (1.33)
30x45	305x457	3543x5315	3:2 (1.5)

Стандартний розмір паперового листа формату A4 – 21x29,7 см або 2480x3508 пікселів при 300 dpi. Розміри інших форматів аркушів можна побачити на сторінці у Вікіпедії, але не забувайте, що там перераховані розміри в міліметрах і дюймах, тобто. у налаштуваннях на цій сторінці потрібно вибрати відповідну величину.

Якщо потрібно змінити розмір фотографії без урахування DPI (точок на дюйм), тобто лише дотримуючись пропорції вказаного формату, то для цього потрібно встановити параметр "Розмір DPI" на "0" в налаштуваннях.

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

1) Вкажіть зображення у форматі BMP, GIF, JPEG, PNG, TIFF:

2) Введіть потрібний формат фото в сантиметрах, міліметрах або дюймах
Потрібний формат: X у міліметрах (mm) сантиметрах (cm) дюймах (inches)
(За замовчуванням вказано формат 15x10, який підходить для альбомної (горизонтальної) фотографії, для портретної (вертикальної) фотографії ці значення потрібно поміняти місцями, тобто вказати 10x15, як і вказано в таблиці) Розмір у DPI: (0 = "не враховувати DPI , зробити за пропорцією на основі зазначеного формату")
(Розмір вихідної jpg-картинки в DPI можна, вважаючи метадані) Тип зміни розміру точно до вказаних розмірів:
З дотриманням пропорцій та обрізанням зайвих країв
Гумове розтягування або звуження, без обрізки
Без обрізки, з додаванням червоного фіолетового рожевого синього бірюзового небесного салатового зеленого жовтого оранжевого чорного сірого білого фону по краях Прив'язатися до: верхньої лівої центральної правої нижньої частини зображення