Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 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. Оформити звіт.
| <== предыдущая | | | следующая ==> |
| Короткі теоретичні відомості | | | Частка головних галузей господарства у ВВП країн |
Date: 2016-11-17; view: 211; Нарушение авторских прав; Помощь в написании работы --> СЮДА... |