ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 18.07.2024
Просмотров: 111
Скачиваний: 0
ПОЗИЦІОНУВАННЯ І ВІЗУАЛІЗАЦІЯ
Застосування позиціонування припускає використання ряду понять:
Обмежена область (блок) – невидима прямокутна область, визначена браузером. Таблиці стилів дозволяють управляти цією областю, встановлюючи її положення на сторінці з використанням абсолютних або відносних значень позиціонування.
Абсолютне позиціонування – технологія, що дозволяє задавати координати блоку щодо верхнього лівого кута браузера.
Відносне позиціонування – технологія, що дозволяє задавати координати блоку щодо зовнішнього блоку.
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.Відкривання та створення сайтів і веб-сторінок