- •Лабораторна робота №3 "Візуальне web-проектування в середовищі Macromedia Dreamweaver".
- •4.1. Загальні методичні вказівки
- •4.2. Теоретичний вступ
- •4.3. Практичне завдання та технологія його виконання
- •I. Створення моделі сайту в середовищі Dreamveawer
- •II. Розробка макету головної сторінки лабораторного проекту
- •Iiі. Форматування головної сторінки сайту проекту
- •IV. Зборка та тестування сайту лабораторного проекту
4.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-дескриптором елемента.
4.3. Практичне завдання та технологія його виконання
Лабораторна робота передбачає виконання наступних етапів:
Створення моделі сайту в середовищі Dreamveawer
Розробка макету головної сторінки лабораторного проекту
Форматування головної сторінки сайту проекту
Зборка та тестування сайту лабораторного проекту
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. У вікні, що відкрилось, ввести ім’я сайту:
2.3. Встановити типи технологій, що будуть використовуватись для створення сайту:
2.4. Встановити режим роботи з сайтом, та локальну папку, в якій зберігаються файли сайту:
2.5. Встановити режим з’єднання та папку, в якій сайт буде зберігатися на сервері:
2.6. Встановити режим редагування файлів сайту:
2.7. Після виконання попередніх кроків відкриється вікно із встановленими параметрами сайту:
2.8. При необхідності зміни параметрів сайту за допомогою кнопки Назад можна вернутися на попередні кроки та відредагувати необхідний параметр. При натиску на кнопку Готово на вкладці Файлы відобразиться файлова структура сайту:
3. Виконати настроювання параметрів Dreamweaver так, щоб він нормально розумів українську та російську мову.
3.1. Настроювання параметрів програми виконується у багатофункціональному вікні, що містить набор вкладок з різними елементами керування. Щоб викликати його, необхідно виконати команду Preferences ( Настройки програми) в меню Edit (Прака):
Після виконання цієї команди відкриється вікно настроювання Preferences, в якому у лівій частині відображається список вкладок, а в правій з'являється сам вміст обраної вкладки.
3.2. Вибрати в списку вкладок пункт New Document (Создание документа) та встановити параметри кодування веб-сторінки:
3.3. Вибрати вкладку Fonts (Шрифт) та настроїти шрифти, якими буде відображатися текст вашої сторінки. У списку Font Settings (Настройки шрифтов) встановити шрифтовий набір, що буде використаний для відображення Web-сторінок. Якщо текст сторінки буде на українській або на російській мові, то встановити Cyrillic, якщо англійська мова, то встановити Western (Latin1). Що стосується накреслень і розмірів шрифтів, використовуваних для відображення тексту, то це справа смаку. На практиці вважається за краще використовувати, для пропорційного шрифта (список Proportional Font) - Arial, у якості фіксованого (список Fixed Font) — Lucida Console, а для відображення вихідного HTML-коду в редакторі коду (список Code Inspector) — теж Lucida Console. Розміри шрифтів (списоки Size (Размер)) задають равними 10 пунктам (малий розмір, Small).