Опорний_кнспект
.pdf
1. Зв’язування
Приклад:
Файл з ім’ям my_style.css містить опис стилів: body { background:#000000; color:#ffffff; } a { color:#ff0000; text-decoration:none; }
Документ HTML, який посилається на цей файл, повинен містити в розділі head наступне посилання:
<head>
<link rel="stylesheet" type="text/css" href="my_style.css">
</head>
3. Вбудовування
Приклад:
<html> <head><title>Web-документ</title>
Приклад 1
<p style="font-family:verdana;font-size:14pt">Для виведення тексту абзацу застосований шрифт verdana розміром 14 пунктів</p>
Приклад 2
<div style="font:14pt garamond">Для виведення тексту розділу застосований шрифт garamond розміром 16 pt</div>
Приклад 3
<span style="color:#336666; font-size:22">Для виведення фрагмента тексту використовується колір,</span> цей текст виводиться без оформлення
</body>
</html>
КЛАСИ
Використовуються у випадку, коли необхідно для одного і того ж тегу визначити різні правила форматування.
Якщо треба створити клас, який не належить ні одному із тегів, то необхідно в описі класу опустити визначення тегу, а потім в самому документі використовувати будь-які теги з атрибутом class.
Приклад:
.green { color:green; }
.red { color:red; }
<div class="green">Блок тексту, який написаний зеленим кольором.</div>
<p class="red">Абзац, який написаний червоним кольором.</p>
КЛАСИ
Приклад:
<html>
<head><title>Web-
документ</title> <style type="text/css"> <!--
p.big
{
text-align:center; font-style:italic; font-size:50;
}
p.middle
{
text-align:left; color:green; font-size:40;
}
p.small
{
text-align:right; text-decoration:underline; font-size:30;
} --> </style> </head> <body> <b>Приклад<b/>
<p class="big">Великий абзац</p>
<p class="middle">Середній абзац</p>
<p class="small">Малий абзац</p>
</body>
</html>
ІДЕНТИФІКАТОРИ
Ідентифікатори. Окрім класів стилі можна описувати з використанням ідентифікаторів (#id). Параметр id задає унікальне ім‘я елемента, яке використовується для посилань на нього у сценаріях та таблицях стилів. Для цього перед ім‘ям записується символ #.
Слід зауважити, що при використанні ідентифікаторів необхідно також застосовувати закриваючі теги, оскільки якщо залишити їх відкритими, можна абсолютно несподівано оформити текст, який знаходиться нижче, до якого слід було застосувати інший стиль.
Приклад
<html> <head><title>Web-документ</title> <style type="text/css">
<!-- #iddate
{ font-size:30; font-weight:bold; font-style:italic; color:black; }
#idivent
{ |
font-size:20; |
|
|
color:black; |
|
|
margin-left:30; |
} --> |
</style>
</head>
<body> <b>Приклад<b/>
<p id="iddate">Дата написана одним шрифтом.</p>
<p id="idivent">А подія - іншим.</p> <p id="iddate">Зима.</p>
<p id="idivent">Святкування Нового року.</p> <p id="iddate">Літо.</p>
<p id="idivent">ВІДПОЧИВАТИ!!!</p>
</body>
</html>
ТЕКСТОВІ ВЛАСТИВОСТІ
text-align – вирівнювання тексту.
Можливі значення: left – по лівому краю, right – по правому краю, сеnter – по центру, justify – з обох боків.
text-indent – відступ в першому рядку блоку (абзацу, розділу) із стандартними значеннями довжини (pt, px, cm, mm).
text-decoration – оформлення тексту підкресленням.
Можливі значення: none – відсутній (за умовчанням); underline – підкреслення; overline – лінія над текстом; line-through – перекреслювання; blink – мерехтіння.
text-transform – переведення букв у верхній або нижній регістр. Можливі значення: none – відсутній (за замовчанням);
capitalize – перша буква кожного слова стає прописною; uppercase – переводить всі букви у верхній регістр; lowercase – переводить всі букви в нижній регістр.
text-shadow –ефект затінювання тексту.
Можливі значення: none – відсутній (за замовчанням);
color left top radius – колір затінювання з відстанями зліва (справа), вниз (вгору) від тексту і радіусом нерізкості.
letter-spacing – відстань між символами тексту із стандартними значеннями довжини (pt, px, cm, mm, em,ex).
word-spacing – відстань між словами із стандартними значеннями довжини (pt, px, cm, mm).
Окрім стандартних одиниць вимірювання довжини px, pt (рівний 0,36 мм), mm, cm, може використовуватися em (1em рівний ширині букви m в шрифті, що використовується), ex (1ex рівний висоті шрифту), px (1px рівний ширині пікселя).
Приклад:
<html> <head><title>Web-документ</title> <style type="text/css">
<!—
p.class1
{
text-align:justify; text-indent:20pt; color:#c0c0c0; background-color:#000000;
}
.class2 { text-decoration:underline; }
.class3 { letter-spacing:5; }
.class4 { text-transform:uppercase; } -->
</style>
</head>
<body> <b>Приклад</b>
<p class="class1">Текст абзацу вирівнюється з обох боків, має відступ першого рядка 20 пунктів і використовує білий колір символів на чорному фоні.</p>
<p>В тексті абзацу <span class="class2">використовується підкреслення, </span> <span class="class3"> збільшення відстані між символами</span>
<span class="class4">, а також переведення символів у верхній регістр.</span></p> </body>
</html>
КОЛІР І ФОН
color – колір тексту – будь-яке значення, відповідне стандарту.
background-color – колір фону – будь-яке значення, відповідне стандарту.
background-image:URL("URL") – фонове зображення – будь-яке значення URL, відповідне стандарту.
background-repeat – напрям повторення фонового зображення.
Можливі значення: repeat – повторення по горизонталі і вертикалі (за замовчанням); repeat-x – повторення тільки по горизонталі; repeat-у – повторення тільки по вертикалі; no-repeat – відсутність повторення.
background-position – положення фонового зображення щодо верхнього лівого кута елемента, що містить його.
Можливі значення: відстань по горизонталі, відстань по вертикалі в стандартних одиницях довжини або в процентному співвідношенні. Значення 50% по горизонталі і 50% по вертикалі дає той, що розташовує фонового зображення по центру. Розміщення фонового зображення може бути також top – по верхньому краю; center – по центру; bottom – по нижньому краю; left – по лівому краю; right – по правому краю.
background-attachment – прокрутка фонового зображення разом з документом.
Можливі значення: scroll – прокрутка (за замовчанням); fixed – фіксація зображення у вікні браузера.
Для опису відразу всіх параметрів фону можна використовувати властивість background: background-color background-image background-repeat background-attachment background-position
Приклад
<html> <head><title>Web-документ</title>
<style type="text/css">
<!--
body {background-color: pink;} p
{
color:#ffffcc;
background-image: url("64.jpg");
}
--> </style>
</head>
<body> <b>Приклад</b>
<p>Текст абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body -синій. Текст абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body - синій. Текст абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body - синій. Текст абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body - синій. Текст абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body - синій. Текст абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body - синій.
</p>
</body>
</html>
ШРИФТИ
font-family – сімейство шрифтів. Може бути декілька сімейств, відокремлених один від одного комами. Пріоритет визначається порядком в списку. Значенням може бути ім‘я типового шрифту (serif/sans-serif/cursive/fantasy/monospace), а
також шрифту, що належить одному з типів.
font-style – зображення шрифту. Можливі значення: normal – звичайне (за замовчанням); italic – курсив; oblique – похиле зображення.
font-variant – у вигляді малих прописних букв. Можливі значення: normal – звичайне (за умовчанням); small-caps – у вигляді малих прописних букв.
font-weight – товщина шрифту, що виводиться. Можливі значення: normal – звичайна (за замовчанням); bold – напівжирний; bolder – жирний; lighter – світлий; числові значення: 100 – світлий, 400 – звичайний, 700 – напівжирний, 900 – жирний.
font-size – висота символів (кегль). Значенням є будь-яка, відповідна стандартам висота або процентне значення, що визначає зменшення або збільшення у відсотках від кегля батьківського елемента. Значення абсолютного розміру можуть бути записані у вигляді ключових слів: xx-small – дуже малий; small – малий; medium – середній (за замовчанням); large – великий; x-large – дуже великий; xx-large – украй великий.
Значення відносного розміру можуть бути записані у вигляді ключових слів: larger – більше; smaller – менше.
Для опису відразу всіх параметрів шрифту можна використовувати властивість
font: font-style font-variant font-weight font-size font-family
Приклад:
<html> <head><title>Web-документ</title> <style type="text/css">
<!--
body {font:italic bold 18pt impact;} p1 {font: oblique xx-large impact;} -->
</style>
</head>
<body> <b>Приклад</b>
<p>Для виведення тексту абзацу застосований шрифт із зображенням italic, товщиною bold, розміром 18 пунктів і типом impact</p>
<p class="p1">Шрифт impact, oblique, xx-large</p> </body>
</html>
ВЛАСТИВОСТІ БЛОКІВ ТЕКСТУ
margin-top, margin-right, margin-bottom, margin-left – ширина верхнього,
правого, нижнього і лівого поля. Значення за умовчанням – 0.
margin – ширина полів для всіх сторін елемента. У цієї властивості може бути від одного до чотирьох значень. Одне значення привласнюється всім полям, з двох значень перше привласнюється верхньому і нижньому полю, а друге – лівому і правому. При трьох: перше – верхньому полю, друге – лівому і правому, а третє – нижньому.
padding-top, padding-right, padding-bottom, padding-left – ширина проміжку між вмістом елемента і певною ділянкою його межі. Значення за умовчанням – 0.
padding – ширина проміжку для всіх сторін елемента. У цієї властивості може бути від одного до чотирьох значень. Одне значення привласнюється всім проміжкам, з двох значень перше привласнюється верхньому і нижньому проміжку, а друге – лівому і правому. При трьох: перше – верхньому полю, друге – лівому і правому, а третє – нижньому.
border – рамка.
Для опису всіх властивостей рамки можна використовувати конструкцію: border: border-width border-style border-color.
border-width – ширина рамки.
Можливі значення: thin – тонка лінія; medium – середня (за умовчанням); thick – товста, а також стандартні значення ширини.
Можна також встановлювати значення ширини рамки для певної сторони:
border-top-width, border-right-width, border-bottom-width, border-left-width з
аналогічними значеннями.
border-style – стиль рамки.
Можливі значення: none – відсутність (за умовчанням); hidden – прихована; dotted – пунктир; solid – суцільна; double – подвійна; dashed – штрих-пунктир; groove – подвійна борозна; ridge – гребінь; inset – врізка; outset – орнамент.
Можна також встановлювати значення стилю рамки для певної сторони: border-top-style, border-right-style, border-bottom-style, border-left-style.
border-color – колір рамки. Значенням є будь-хто, відповідний стандарту. Можна також встановлювати значення кольору рамки для певної сторони: border-top-color, border-right-color, border-bottom-color, border-left-color
Приклад:
<html> <head><title>Web-документ</title>
<style type="text/css"> <!--
P{
border: 10 double red;
margin: 50px 100px 100px 50px; padding: 20px 20px 20px 20px
}
--></style>
</head>
<body> <b>Приклад</b>
<p>Текст абзацу поміщений в подвійну рамку червоного кольору, завтовшки 10 пікселів. Встановлені поля шириною 100 пікселів справа і знизу і 50 пікселів зверху і зліва, а проміжок між текстом абзацу і рамкою встановлений 20 пікселів з усіх боків.</p>
</body>
</html>
ПОЗИЦІОНУВАННЯ І ВІЗУАЛІЗАЦІЯ
Застосування позиціонування припускає використання ряду понять:
Обмежена область (блок) – невидима прямокутна область, визначена браузером. Таблиці стилів дозволяють управляти цією областю, встановлюючи її положення на сторінці з використанням абсолютних або відносних значень позиціонування.
Абсолютне позиціонування – технологія, що дозволяє задавати координати блоку щодо верхнього лівого кута браузера.
Відносне позиціонування – технологія, що дозволяє задавати координати блоку щодо зовнішнього блоку.
position – метод позиціонування блоку, за умовчанням має значення static,
інші значення: absolute (абсолютне) relative (відносне)
Fixed - блок фіксується у вікні браузера і не переміщається при прокрутці вікна.
top – величина зміщення вниз (вгору) щодо точки відліку, left (ліворуч, праворуч). Значеннями є будь-які, відповідні стандарту довжини, а також процентне значення: відношення у процентах довжини зміщення до ширини (висоти) блоку.
width – ширина блоку. Значеннями є будь-які, відповідні стандарту довжини, а також процентне значення: відношення у процентах довжини зміщення до ширини вікна.
height – висота блоку. Значеннями є будь-які, відповідні стандарту довжини, а також процентне значення: відношення у процентах довжини зміщення до висоти вікна.
z-index – z-индекс визначає порядок розташовує блоків. Значеннями є цілі числа (позитивні і негативні), причому блоки з великими значеннями z-индекса з‘являтимуться над блоками з меншими значеннями.
visibility – видимість. Визначає, чи є елемент видимим – visible або прихованим – hidden.
overflow – управління переповнюванням. Має три значення: visible – елемент видимий; hidden – частина, що перекривається, відсікається; scroll – використовується механізм прокрутки для візуалізації елемента.
clip: rect (top right bottom left) – відсікання. Визначає вирізувані області. Вирізувана область визначається значеннями зміщення відповідно зверху, праворуч, знизу і ліворуч.
Приклад:
<html> <head><title>Web-документ</title> <style type="text/css">
<!--
.revers {font-weight:bold; color:blue; text-align:сеnter;}
.bluetext {font-weight:bold; color:darkblue; text-align: justify; margin:20;}
--></style> </head> <body> <b>Приклад</b>
<!--вертикальний шар-->
<div style="position:absolute; top:0; left:250; width:200; height:300;background:'deeppink'">
<img src="p1.gif" style="position: relative; top:20; left:25;">
<p class="revers">ЗАО Повітряний шар</p></div> <!--горизонтальний шар-->
<div style="position:absolute; top:150; left:10; width:400; height:90; background:'mistyrose' ">
<p class="bluetext">Шар кольору mistyrose з абзацом лежить поверх правої колонки (шару кольору deeppink) з логотипом. Логотип позиціонується відносно шару, що його містить.</p>
</div></body></html>
Приклад:
<html> <head><title>Web-документ</title></head> <style type="text/css">
<!--
.overflow
{
position: absolute; top:190;left: 50; width:80;
height:80;
border:2 solid black; overflow:hidden;
}
-->
</style>
</head>
<body> <b>Приклад</b><br><br>
<img src="flower.gif" width=150 height=150 alt=flower border=1>
<img class="overflow" src="flower.gif" width=150 height=150 alt=flower>
</body>
</html>
Приклад:
<html> <head><title>Web-документ</title> <style type="text/css">
<!-- .clip
{position: absolute; top:50; left: 230;
width:150;
height:150;
color:yellow; background-color:black; clip:rect(25px 125px 125px 25px);
}
.clip1
{position: absolute; top:50; left: 30;
width:150;
height:150;
color:yellow; background-color:black; } -->
</style>
</head>
<body> <b>Приклад</b>
<div class="clip1">Текста абзацу обрізатиме за допомогою відсікання, застосованого до даної квадратної області розміром 150 на 150 пікселів.</div>
<div class="clip">Текста абзацу обрізатиме за допомогою відсікання, застосованого до даної квадратної області розміром 150 на 150 пікселів.</div>
</body>
</html>
Лекція 10
Тема: Візуальний редактор веб-сайтів
Мета: познайомитися з візуальним редактором для створення веб-сторінок та сайтів FrontPаge, розглянути інтерфейс та режими роботи, вивчити команди завантаження та створення нових вебсторінок, форматування тексту, створення таблиць та гіперпосилань, створення сторінок з фреймовою структурою.
План
1.Технологія створення веб-вузла.
2.Інтерфейс та режими роботи програми.
3.Режими перегляду веб-документів.
4.Відкриття та створення веб-сторінок.
5.Створення веб-сторінки за допомогою шаблона.
1.Технологія створення веб-вузла.
1.Проектування (формування логічної структури сайту вигляді блок схеми)
2.Підготовка текстових, графічних, відеота звукових матеріалів
3.Робота в редакторі
4.Оформлення гіперпосилань
5.Тестування сайту у браузері
Тепер, коли ви вмієте наповнювати веб-документи текстовою інформацією та володієте засобами їхнього художнього оформлення, можна подумати про створення першого повноцінного сайту. Та чи приваблює вас перспектива вручну вводити у текстовому редакторі всі теги — від першого до останнього! — і при цьому не бачити відразу результат своєї праці, оскільки його видно лише у браузері? Мабуть, що ні.
Тому у даній лекції ми розглянемо програму Microsoft FrontPage, адже це потужний засіб для візуального створення веб-сторінок та їхньої публікації. Ви ознайомитеся з інтерфейсом програми, засобами форматування тексту, формування гіперпосилань, створення таблиць і розміщення зображень, а також можливостями щодо автоматизованого створення веб-сайтів та окремих сторінок за допомогою майстрів і шаблонів. Набуті знання будуть використані у практичній роботі для створення сайту про рослини.
2. Інтерфейс та режими роботи програми
Звичайно, було б зручно форматувати веб-сторінки так, як у текстових процесорах, коли на екрані документ має приблизно такий самий вигляд, як і після друку. Цей підхід, який називають WYSIWYG (What Your See Is What Your Get — що бачиш, те й отримаєш), реалізовано у програмі Microsoft FrontPage — візуальному редакторі веб-сторінок. На відміну від більшості текстових редакторів, які виводять на екран лише теги HTML, FrontPage відразу інтерпретує їх, і ви бачите сторінку майже такою, як у вікні браузера. Завдяки цьому відпадає потреба у постійному перемиканні між браузером та редактором для перегляду веб-сторінки. У програмі FrontPage є все необхідне для роботи з веб-сайтом:
засіб для навігації FrontPage Explorer,
редактор веб-сторінок FrontPage Editor,
засоби для роботи з графікою та публікації документів.
ВІКНО програми
На рис. 1. зображене вікно програми FrontPage 2003. Воно оформлене в єдиному для всіх програм Microsoft Office 2003 стилі. У верхній частині вікна міститься рядок меню і дві панелі інструментів — Стандартная (Стандартна) та Форматирование (Форматування). Основна частина вікна відведена під робочу область, в якій можна відкрити один або кілька документів. Знизу розташований рядок стану, що містить довідкову інформацію.
Рис 1. Вікно програми FrontPage 2003.
Можливості програми FrontPage:
створення та редагування Web-вузла та окремих Web-сторінок у візуальному режимі;
перегляд та редагування HTML-кода Web-сторінок;
використання масштабованих шрифтів різноманітних кольорових схем та стилів;
перевірка провопису;
вставка графічних зображень, таблиць, списків, форм, мультимедіа та гіперпосилань;
копіювання та перенесення фрагментів сторінки;
можливість імпорту даних з інших додатків у візуальний редактор;
підтримка фреймової структури Web-сторінки;
підтримка динамічних ефектів на Web-сторінках;
використання різних тем і шаблонів.
Програма FrontPage пропонує сім режимів для роботи з веб-документами. Для переходу у потрібний режим використовують команди меню Вид (Вигляд), призначення яких описано у таблиці.
|
Страница (Сторінка) |
Створення, перегляд та редагування веб-сторінок |
|
|
|
|
Папки (Папки) |
Перегляд структури папок створюваного веб-сайту |
|
|
|
|
Удаленный веб-узел |
Робота з віддаленим веб-сайтом, розміщеним на |
|
(Віддалений веб-вузол) |
веб-сервері. |
|
Отчеты (Звіти) |
Формування та перегляд звітів про веб-сайт |
|
|
|
|
Переходы (Навігація) |
Проектування структури веб-сайту |
|
|
|
|
Гіперссылки |
Перегляд гіперпосилань веб-сайту |
|
(Гіперпосилання) |
|
|
Задачи (Завдання) |
Формування та перегляд завдань, які потрібно |
|
|
виконати під час створення веб-сайту. |
Поки що для роботи нам буде достатньо лише режиму Страница (Сторінка). |
||
3.Режими перегляду веб-документа
Урежимі Страница (Сторінка) в нижній частині робочої області є чотири вкладки, які дають змогу переглядати веб-сторінку в різних режимах.
• Конструктор (Конструктор) — звичайний режим роботи, в якому створюють або редагують сторінку за допомогою візуальних засобів, розміщуючи на ній текст, лінії, кнопки, посилання та інші об'єкти.
• Код (Код) — режим перегляду і створення сторінки в HTML-кодах. Його можна використовувати як для формування сторінки через уведення HTML-кодів у веб-документ, так і для перегляду, редагування та доповнення кодів сторінки, створеної у звичайному режимі роботи.
• С разделением (З розподілом) — комбінований режим, у якому робоча область поділена на дві частини: у верхній відображені HTML-коди сторінки, а в нижній — її вигляд у режимі конструктора.
• Просмотр (Перегляд) — попередній перегляд сторінки у тому вигляді, в якому вона відображається у вікні браузера.
4.Відкривання та створення сайтів і веб-сторінок