Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 4. Как сделать так, чтобы вас уважали и ценили?
Как сделать лучше себе и другим людям
Как сделать свидание интересным?
Категории:
АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника
|
Короткі теоретичні відомостіПрактична робота №6 Тема роботи: Розміщення на веб-сторінці графічних об`єктів з використанням CSS. Мета роботи: навчитися виконувати тло веб-сторінки у вигляді малюнка, вміщувати на веб-сторінку графічні об`єкти, налаштування атрибути графічних об`єктів, використовувати зображення як посилання. Короткі теоретичні відомості Зображення. Формати зображення Найбільш розповсюдженими форматами для веб-графіки стали — gif та jpeg. Їх багатофункціональність, універсальність, невеликий об'єм, при достатній для сайту якості визначили їх стандартом для веб-зображень. Формат gif GIF (Graphics Interchange Format) — формат графічних файлів, широко вживаний при створенні сайтів. GIF використовує 8-бітовий колір і ефективно стискує суцільні кольорові області, при цьому зберігаючи деталі зображення. Формат gif застосовується при створенні, логотипів, ілюстрацій з чіткими краями, анімованих малюнків, зображеннь з прозорими ділянками, банерів. Формат jpeg JPEG (Joint Photographic Experts Group) — популярний формат графічних файлів, широко пріменямий при створенні сайтів і зберігання зображень. JPEG підтримує 24-бітовий колір і зберігає яскравість і відтінки кольорів у фотографіях незмінними. Даний формат називають стискуваним з втратою якості оскільки алгоритм JPEG відкидає дані, що не сприймаються людським оком. Формат JPEG не підтримує прозорість. Формат jpeg застосовується переважно в фотознімках. Властивість background-image За допомогою властивості background-color, зображення можна не тільки помістити на задній план елементу або зробити фоном веб-сторінки, але задати його положення на веб-сторінці. Щоб зробити зображення фоном веб-сторінки достатньо в файлі style.css застосувати параметри тега <body> body{ background-image: url("../images/ball.jpg"); } Властивість background-repeat Результатом виконання попереднього прикладу було повторення зображення шару, як по вертикалі так і по горизонталі, щоб керувати цим повторенням застосовується властивість background-repeat. body{ background-image: url("../images/ball.jpg"); background-repeat: repeat-x; } Властивість background-attachment Властивість background-attachment надає можливість фіксування фонового зображення або прокручувати його разом з текстом. body{ background-image: url("../images/ball.jpg"); background-repeat: repeat-x; background-attachment: fixed; } Властивість background-position За умовчанням фонове зображення розміщається у лівому куті екрану. За допомогою властивості background-position зображення можна розміщати у будь-якому місці екрану. Значення властивості background-position являють собою вісь координат. body{ background-image: url("../images/ball.jpg"); background-repeat: no-repeat; background-position: 5cm 5cm } Після виконання цього прикладу ми побачимо, що зображення розташовано на 5 см зліва та на 5 см зверху. В якості значень властивості background-position можна використовувати значення у процентах, ключові слова (right, left, top, bottom). body{ background-image: url("../images/ball.jpg"); background-repeat: no-repeat; background-position: 100% 25% } Властивість background-clip Для того, щоб накласти будь-який фон/зображення на текст, межі та навіть тінь, при цьому не перекриваючи їх, а реалізуючи щось схоже на функцію накладання "маски" в Photoshop, використовується властивість background-clip. У файлі style.css створимо для оформлення абзацу на який буде накладено фон з рамкою таке правило: .example { background: #c0c0c0; background-image: url(../images/blot.png); border: 10px dotted red; background-clip: padding-box; padding: 10px; color: #8B0000; } .example1 { background: #c0c0c0; background-image: url(../images/blot.png); border: 10px dotted red; background-clip: border-box; padding: 10px; color: #8B0000; } .example2 { background: #c0c0c0; background-image: url(../images/blot.png); border: 10px dotted red; background-clip: content-box; padding: 10px; color: #8B0000; } В html-файлі створимо 3 абзаци з власними класами. <html> <head> <title>Приклад№3,1</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> <p class="example">У цьому прикладі використовується властивість background-clip: padding-box</p> <p class="example1">У цьому прикладі використовується властивість background-clip: border-box</p> <p class="example2">У цьому прикладі використовується властивість background-clip: content-box</p> </body> </html> Властивість background-origin Властивість background-origin визначає область позиціонування фонового малюнка. Ця властивість не застосовується, коли значення background-attachment задано як fixed. Хід роботи 1. Розробити веб-сайт відповідно до заданого варіанту. 2. Створити папку для розміщення файлів, необхідних для роботи сайту. 3. Придумати текстове наповнення для тематичних сторінок основих розділів веб-сайту. 4. Створити або використати готові малюнки, що ілюструватимуть основні розділи сайту — малюнки, що будуть гіперпосиланнями на тематичні веб-сторінки, а також малюнки, що будуть супроводжувати текстове наповнення тематичних веб-сторінок сайту. Ці малюнки мають бути розміщені у папці сайту. 5. Встаномити фоновий колір, або фонове зображення для тла кожної веб-сторінки. 6. Створити веб-сторінки кожного розділу сайту, використовуючи налаштування тла, друк тексту, розміщення малюнків-ілюстрацій. 7. Створити веб-сторінку. яка буде використовуватися, як навігаційна панель, що складається з графічних посилань. 8. Створити головну сторінку, розділену на два фрейми. У лівий фрейм помістити навігаційну панель, а правий призначити як місце для відкривання веб-сторінок розділів. 9. Виконати тестування роботи сайту — відкрити головну сторінку, відповідність всіх гіперпосилань. При необхідності внести зміни в HTML-коди сторінок 10. Оформити звіт.
|