ВІЗУАЛЬНИЙ
РЕДАКТОР MICROSOFT FRONTPAGE
Приклад:
<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>
Приклад:
<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">
<!--
.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>
ПЛАН
1.Технологія створення вебвузла.
2.Інтерфейс та режими роботи програми.
3.Режими перегляду вебдокументів.
4.Відкриття та створення вебсторінок.
5.Створення сайту за допомогою шаблону.
WEBВУЗОЛ (WEBСАЙТ)
– ЦЕ ГРУПА ВЗАЄМОЗВ’ЯЗАНИХ ВЕБ СТОРІНОК
Елементи вебсторінок:
фон
таблиці
заголовки
списки
текст
графічні зображення
кнопки з гіперпосианнями
відео
звук
форми
ТЕХНОЛОГІЯ СТВОРЕННЯ WEB
УЗЛА
1.Проектування (формування логічної структури сайту вигляді блок схеми)
2.Підготовка текстових, графічних, відео та звукових матеріалів
3.Робота в редакторі
4.Оформлення гіперпосилань
5.Тестування сайту у браузері
У текстовому або HTMLредакторі сторінки не верстаються, а пишуться у текстовому режимі.
Візуальний редактор Webсторінок використовує режим WYSIWYG (What You See Is What You Get – «що бачиш, те й отримаєш»).
На відміну від більшості текстових редакторів, які виводять на екран лише теги HTML, FrontPage відразу інтерпретує їх, і ви бачите сторінку майже такою, як у вікні браузера.
Редактори вебсторінок:
Microsoft FrontPage
Macromedia DreamWeaver
Рядок меню Рядок заголовка
Панель інструментів стандартна Панель інструментів форматування
Панель задач Панель папок і файлів
Режими перегляду Web-сторінки
Рядок стану
МОЖЛИВОСТІ MICROSOFT
FRONTPAGE
створення та редагування Webвузла та окремих Web сторінок у візуальному режимі;
перегляд та редагування HTMLкода Webсторінок;
використання масштабованих шрифтів різноманітних кольорових схем та стилів;
перевірка провопису;
вставка графічних зображень, таблиць, списків, форм, мультимедіа та гіперпосилань;
копіювання та перенесення фрагментів сторінки;
можливість імпорту даних з інших додатків у візуальний редактор;
підтримка фреймової структури Webсторінки;
підтримка динамічних ефектів на Webсторінках;
використання різних тем і шаблонів.