Деякі властивості css
Властивість color описує колір переднього плану елемента.
Властивість background-color описує колір фону елемента.
Ці властивості можна застосовувати до різних елементів, у тому числі – до заголовків і тексту.
Властивості шрифту (деякі) та їх значення:
Сімейство шрифту [font-family]
Властивість font-family вказує пріоритетний список шрифтів, що використовуються для відображення даного елемента або web-сторінки. Якщо перший шрифт списку не встановлений на комп’ютері, з якого виконується доступ до сайту, шукається наступний шрифт списку, поки не буде знайдений відповідний.
Сімейства шрифтів та їх особливості:
Вказувати шрифти починаєте з пріоритетного шрифту, а потім перераховуєте альтернативні.
Стиль шрифту [font-style]
Властивість font-style може набувати значень normal, italic або oblique.
Властивість font-weight описує, наскільки товстим, або "важким", має відображатися шрифт. Шрифт може бути normal або bold. Деякі браузери підтримують навіть числові значення 100-900 (у сотнях) для опису ваги шрифту.
Властивість font-size встановлює розмір шрифту.
Використовуються різні одиниці вимірювання (наприклад, пікселі і відсотки) для опису розміру шрифту.
Можна використовувати скорочений запис font, де вказати всі властивості шрифту в одному стильовому правилі.
Наприклад, ось чотири рядки опису властивостей шрифту для <p>:
p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } |
Використовуючи скорочений запис, код можна спростити:
p { font: italic bold 30px arial, sans-serif; } |
Порядок властивостей font такий:
font-style | font-weight | font-size | font-family
Властивості та їх значення інших елементів веб-сторінки використовуються аналогічно.
Хід виконання роботи
Завдання 1. Розробіть свій веб-сайт, який би містив головну сторінку index.htm, з якої можна було б переходити на інші сторінки. Назви підлеглим сторінкам надайте самостійно відповідно до їх вмісту.
Логічна структура сайту:
Фізична структура сайту:
Дизайн сторінок оформте, використовуючи засоби мови CSS. Файли сайту розмістіть у папці з ім’ям LR_20 на Робочому столі. У кінці пари створену вами на Робочому столі папку LR_20 заархівуйте та перемістіть її у відповідне обговорення у соц. мережі.
Нижче наведені орієнтовні вправи, виконуючи які послідовно, можна досягти результату, що вимагається.
Вправа 1.
Створення підлеглих сторінок.
Створіть документ програми Блокнот з таким текстом:
<HTML>
<HEAD>
<TITLE> Про себе докладніше </TITLE> </HEAD>
<BODY>
(текст – автобіографічна довідка про себе – не менше 3-х абзаців)
</BODY> </HTML>
Збережіть документ з ім’ям file2.htm у своїй папці LR_20 на Робочому столі (Рис.4.1).
Аналогічно створіть файл з ім’ям file3.htm у своїй папці LR_20 такого змісту:
<HTML>
<HEAD>
<TITLE> Про друзів і мої захоплення </TITLE> </HEAD>
<BODY>
(текст – про своїх друзів і свої захоплення)
</BODY> </HTML>
Перегляньте ці файли. Якщо існують помилки, то необхідно відкрити файли за допомогою редактора Блокнот, виправити їх і зберегти зміни (Файл/Сохранить).
Пам’ятайте: мова HTML використовує латинські символи.
Рис.20.1. Збереження файлу з розширенням .htm.
Вправа 2.
Створення головної сторінки.
Створіть текстовий файл file1.htm такого змісту.
<HTML>
<HEAD> <TITLE> Веб-сторінка Ваше прізвище та ім’я (у родовому відмінку)</TITLE> </HEAD>
<BODY>
<CENTER><H1>Привіт!</Н1>
<H2>Я студент (введіть назву навчального закладу)</Н2>
<P>Навчаюсь на (введіть назву факультету (спеціальності), дайте характеристику факультету, спеціальності, чому ви навчаєтесь саме на цьому факультеті – не менше 10 речень )<HR>
<P>Група (введіть назву групи)
<P>Моя e-mail адреса: s_nesterenko@ukr.net </CENTER><HR>
</BODY> </HTML>
Перегляньте файл як веб-сторінку. Це виглядає десь так:
Через меню Вид=>Просмотр HTML-кода (Для Windows 7 Просмотр кода страницы), перегляньте код файла, потім меню Вид=>Обновить.
Виправте помилки. Збережіть зміни.
Вправа 3.
Доповнення головної сторінки таблицею
Створіть на Web-сторінці таблицю-витяг з табеля успішності за два перші семестри з трьох предметів: інформатика, англійська мова та вища математика, вносячи такі зміни у файл file1.htm перед текстом Моя e-mail адреса.
<center><TABLE>
<TC> <h3>Моя успішність:</h3></TC>
<TR> <TH> Назва дисципліни</TH>
<TH>І семестр </TH>
<TH>II семестр </TH> </TR>
<TR align="center"> <TH align="left">Основи інформатики і ОТ </TH>
<TD>5</TD>
<TD>4</TD></TR>
<TR align="center"> <TH align="left">Англійська мова</ТН>
<TD>4</TD>
<TD>5</TD></TR>
<TR align="center"> <TH align="left">Вища математика</TH>
<TD>4</TD>
<TD>5</TD></TR>
</TABLE></center> <HR>
Збережіть зміни у файлі file1.htm. Перегляньте цей файл, у разі необхідності усуньте помилки. Проаналізуйте зміни.
Тепер це має виглядати десь так:
Вправа 4.
Удосконалення головної сторінки використанням рухомого рядка та фото
У файл file1.htm після першого тегу<CENTER> вставте такий тег:
<MARQUEE> Особиста сторінка Ваше прізвище та ім’я (у родовому відмінку)</MARQUEE>
Розмістіть у папці LR_20 ваше фото у файлі з ім’ям MyFoto.[gif].
У файл file1.htm після тегу</MARQUEE > вставте такий тег:
<IMG SRC="MyFoto.[gif]" ALT= "Моє фото" ALIGN="left" WIDTH=180 HEIGHT=200>
Збережіть зміни у файлі з назвою index.htm. Перегляньте цей файл, у разі необхідності усуньте помилки. Проаналізуйте зміни.
Тепер це має виглядати десь так:
Вправа 5.
Робота з гіперпосиланнями і приєднання підлеглих сторінок до головної різними способами
У папці з ім’ям LR_20 на Робочому столі змініть назви підлеглих файлів у відповідності з логічною схемою сайту.
У тексті коду веб-сторінки у файлі index.htm вставте гіперпосилання на файл friends.htm. Для цього потрібно після тексту про групу вставити рядок
<p><A HREF = "friends.htm"> Про друзів та захоплення </A> <HR>
Тепер розглянемо, як деяке графічне зображення зробити гіперпосиланням. Для цього в середині тега <А>...</А> потрібно використати тег IMG. Наприклад, щоб Ваша фотографія , що є у файлі з ім’ям MyFoto[.gif], була в рамці й стала гіперпосиланням на файл file2.htm, пишуть так:
<A HREF = “file2.htm”> <IMG SRC = “MyFoto.gif” BORDER =4> </A>
Будь-яку піктограму (картинку) можна вставити автономно чи як гіперпосилання, оскільки вона зберігається також у графічному файлі.
У тексті коду веб-сторінки у файлі index1.htm вставте графічне гіперпосилання на файл pro_sebe.htm. Для цього потрібно змінити рядок коду, де міститься зображення, доповнивши його тегами гіперпосилань. Приблизно так:
<A HREF = “pro_sebe.htm”> <IMG SRC = “MyFoto.[gif]”> </A>
Клацнувши на Web-сторінці на фотографії, відкрийте файл pro_sebe.htm з додатковою інформацією, а потім поверніться у файл index.htm.
У тексті коду веб-сторінки у файлі index.htm вставте гіперпосилання на початок веб-сторінки. Код може виглядати так, як на Рис.4.2.
Обов’язково перевірте роботу гіперпосилань!
Рис.20.2. Код веб-сторінки з гіперпосиланнями на файл та на певне місце веб-сторінки.
Наступні вправи допоможуть налагодити дизайн – оформлення створених у попередніх вправах веб-сторінок
Вправа 6.
Організація взаємодії головного файлу і зовнішнього файлу зі стилями оформлення
Створіть документ програми Блокнот і збережіть йогоз ім’ям mystyle.css у своїй папці LR_20 на Робочому столі (Рис.20.3).
Рис.20.3. Збереження файлу з розширенням .css.
У файлі index.htm у тезі <head> вставити рядок для підключення файлу зі стилями:
<link rel="stylesheet" type="text/css" href="mystyle.css" media="all" />
Вправа 7.
Опис зовнішнього вигляду елементів веб-сторінки у файлі mystyle.css
Рис.20.4. Стилі елементів вебсторінки у файлі mystyle.css.
Кольорова гама застосована з сайту
http://webhow.ru/poleznye-servisy/bystryjj-podbor-cvetovojj-gammy-dlya-sajj.html
Рис.20.5. Коди кольорів елементів вебсторінки у файлі mystyle.css.
Вправа 8.
Перегляньте веб-сторінку і зробіть висновки.
На Рис.20.6 наведено вигляд веб-сторінки, код якої міститься у файлі index.htm, а дизайн – у файлі mystyle.css після виконання семи вправ цього завдання.
Рис.20.6. Вигляд веб-сторінки після виконання семи вправ цього завдання.
Завдання 2. Помістіть у звіт тексти кодів Ваших сторінок, скріншоти фізичної схеми Вашого сайту, зовнішнього вигляду Вашої веб-сторінки, кольорової схеми, за якою Ви оформлювали Вашу веб-сторінку.
Завдання 3. Розмістіть на одному з безкоштовних хостингів Ваш сайт і відобразьте у звіті посилання на нього. Також це посилання надішліть особистим повідомленням Вашому викладачу.
Завдання 4. Спробуйте змінити зовнішній вигляд Вашої веб-сторінки відповідно до малюнку 20.7. Помістіть у звіт тексти кодів Ваших сторінок, скріншоти, зовнішнього вигляду зміненої веб-сторінки, кольорової схеми, за якою можна оформити новий дизайн.
Рис.20.7. Зразок для зміни вигляду веб-сторінки.
Завдання 5. Створену вами на робочому столі папку LR_20 заархівуйте та перемістіть її у відповідне обговорення у соц. мережі.