2. Теоретичний вступ

Macromedia Dreamweaver – це професійний візуальний HTML-редактор для проектування, написання коду і підтримки сайтів, web-сторінок та мережевих додатків.

Візуальні можливості редагування в Dreamweaver дозволяють швидко створювати сторінки щоб написання коду вручну. При цьому є можливість переглядати усі елементи сайту і швидко редагувати їх безпосередньо в документі.

Dreamweaver забезпечуе швидку й прозору інтеграцію з будь-яким гріфічним редактором, створюючи і редагуючи зображення, а потім імпортуючи їх безпосередньо в Dreamweaver або додаючи об’єкти Macromedia Flash.

Разом із візуальними можливостями, Dreamweaver також забез­печує повнофункціональне середовище для написання коду, що вклю­чає інструментальні засоби редагування коду (наприклад, розфарбу­вання коду або перевірка синтаксису тегов), довідкову інформацію з HTML, CSS, JavaScript, мову розмітки ColdFusion (CFML), Microsoft Active Server Pages (ASP) і сторінки JavaServer (JSP).

Дизайн web-вузлів – це точне розміщення компонентів HTML-сторінок один відносно одного в робочій області вікна браузера. Компонентами сторінки є: блоки тексту, графіка й вбудовані в сторін­ку додатки. Розмір і границі кожного з цих компонентів у рамках HTML-розмітки задаються з різним ступенем точності. Розмір графі­ки і додатків можна задати з точністю до пикселя. Розміри текстових блоків у HTML задати не можна. Вони обчислюються браузером на основі відносного розміру шрифту за умовченням.

Специфікація CSS ( Cascading Style Sheets) дозволяє залишити­ся в рамках декларативного характеру розмітки сторінки і дає повний контроль над формою представлення элеметов HTML-розмітки. Каскадні таблиці стилів мають розв’язати протиріччя між точністю визначення розмірів малюнків і додатків з одного боку, і точністю визначення розмірів блоків тексту та його накреслення – з іншого.

Крім розміру компонентів, таблиці стилів дозволяють визначати колір і накреслення текстового фрагмента, змінювати ці параметри всередині текстового блоку, виконувати вирівнювання текстового бло­ку щодо інших блоків і компонентів сторінки.

Наявність усіх цих можливостей робить CSS засібом поділу логічної структури документа і форми його подання. Логічна струк­тура документа визначається елементами HTML-розмітки, у той час як форма подання кожного з них задається CSS-дескриптором.

3. Практичне завдання та технологія його виконання

Лабораторна робота передбачає виконання таких етапів:

1. Створення моделі сайту в середовищі Dreamveawer.

2. Розробка макету головної сторінки лабораторного проекту.

3. Форматування головної сторінки сайту проекту.

4. Зборка та тестування сайту лабораторного проекту.

I. Створення моделі сайту в середовищі Dreamveawer

1. У своїй папці на файловому сервері створити папку «LabProject», в яку скопіювати:

• результат виконання лабораторної роботи № 1 – lab1.htm;

• підготовлений у веб-форматі реферат – referat.htm;

• поліфігуру, що є результатом виконання п. 1 та п. 3 лабораторної роботи № 2 – polifigura.htm;

• зображення малого герба КНТЕУ, створеного в п. 2.4 лабора­торної роботи № 2 – small.gif;

• банер проекту, створений в п. 2.5 лабораторної роботи № 2 – baner.jpg.

2. Запустити програму Macromedia Dreamweaver та в його сере­довищі зробити новий сайт з ім’ям, наприклад, «LabProject»:

2.1. Для створення нового сайту виконати команди Site-New Site…:

2. У вікні, що відкрилось, ввести ім’я сайту:

2.3. Встановити типи технологій, що будуть використовуватись для створення сайту:

2.4. Встановити режим роботи з сайтом, та локальну папку, в якій зберігаються файли сайту:

2.5. Встановити режим з’єднання та папку, в якій сайт буде збе­рігатися на сервері:

2.6. Встановити режим редагування файлів сайту:

2.7. Після виконання попередніх кроків відкриється вікно із встановленими параметрами сайту:

2.8. За потреби зміни параметрів сайту за допомогою кнопки Назад можна порнутися на попередні кроки та відредагувати необ­хідний параметр. При натисканні кнопки Готово на вкладці Файлы відобразиться файлова структура сайту:

3. Виконати настроювання параметрів Dreamweaver так, щоб він нормально розумів українську та російську мову.

3.1. Настроювання параметрів програми виконується у багато­функціональному вікні, що містить набор вкладок з різними елемен­тами керування. Щоб викликати його, необхідно виконати команду Preferences (Настройки програми) в меню Edit (Прака):

Після виконання цієї команди відкриється вікно настроювання Preferences, в якому у лівій частині відображається список вкладок, а в правій з’являється сам вміст обраної вкладки.

3.2. Вибрати в списку вкладок пункт New Document (Создание документа) та встановити параметри кодування web-сторінки:

3.3. Вибрати вкладку Fonts (Шрифт) та настроїти шрифти, якими буде відображатися текст вашої сторінки. У списку Font Settings (Настройки шрифтов) встановити шрифтовий набір, що буде вико­ристаний для відображення Web-сторінок. Якщо текст сторінки викладений українською або російською мовами, то слід встановити Cyrillic, якщо англійською – то Western (Latin1). Щодо накреслень і розмірів шрифтів, використовуваних для відображення тексту, то це справа смаку. На практиці вважається за краще використовувати, для пропорційного шрифта (список Proportional Font) – Arial, як фіксо­ваного (список Fixed Font) – Lucida Console, а для відображення вихідного HTML-коду в редакторі коду (список Code Inspector) – теж Lucida Console. Розміри шрифтів (списоки Size (Размер) задають равними 10 пунктам (малий розмір, Small).