Реферат: Лабораторна робота №3

ЛАБОРАТОРНА РОБОТА №3

"Візуальне web-проектування в середовищі Macromedia Dreamweaver".

Мета роботи:


Вивчення можливостей та набуття досвіду роботи з web-редактором загальноцільового призначення Macromedia Dreamveawer та опанування методами форматування web-сторінок, правилами розміщення графічної та навігаційної інформації.

Практичне завдання:

Вивчити інтерфейс HTML-редактора Macromedia Dreamveawer, настроювання його параметрів на умови користувача, розміщення файлових об'єктів сайту та створення структури сайту.

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

Опанувати технології каскадних таблиць стилів (CSS) для форматування змістовної частини web-сторінок.

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

Інструментальні засоби:


операційна система Windows XP;

браузер Internet Explorer 6.0 aбо вище;

пакет візуального web-проектування Macromedia Dreamveawer версії 4 та вище.

Необхідні передумови:


опрацьований теоретичний матеріал по мові розмітки HTML та основам візуального проектування в середовищі Macromedia Dreamveawer.

виконані лабораторні роботи № 1 та № 2;

підготовлений у форматі web реферат з відповіддю на теоретичне питання.

Кількість годин:

аудиторних – 6 годин;

самостійно – 8 годин.

^ 4.1. Загальні методичні вказівки

Лабораторна робота є часткою загального лабораторного проекту, який виконується в рамках опанування данного курсу. Для успішного виконання етапів лабораторної роботи треба прослухати лекції та опрацювати першоджерела по наступним темам: мова розмітки HTML та каскадні таблиці стилів CSS; основи роботи з web-редактором Macromedia Dreamveawer .

Для захисту лабораторної роботи студент повинен в срок та в повному об'ємі відпрацювати п.п. 1-4 завдання та представити на захист результати виконання лабораторної роботи у вигляді структури, яка розміщена у папці "Лабораторний проект" і включає головну сторінку та матеріали попередніх лабораторних робот.


Папка лабораторного проекту

Головна сторінка





Лабораторна робота виконується в учбових класах кафедри, які обладнані відповідними до вимог інструментальнмим засобами. У випадку виконання роботи (або окремих її частин) за межами кафедри, слід керуватися наступною таблицею відповідності інструментальних засобів:


^ Кафедральні ресурси

Можливий еквівалент

Macromedia Dreamveawer МХ

Macromedia Dreamveawer 4, MS FrontPage, HomeSite

Браузер Internet Explorer 6.0

Браузер Internet Explorer 5.5 та вище, Mozilla FireFox

^ 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).



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

Зарезервувати для свого сайту головну сторінку з ім'ям іndex.htm:



У вікні збереження файлу ввести ім’я файлу:



Збережена сторінка з’явиться в папці сайту:



Настроїти параметри головної сторінки: назва, кодировка, фон, колір та ін.. Для цього виконати команду Modify(Изменение) - Page Properties…(Свойства страницы…):



Відкриється вікно властивостей сторінки, в якому необхідно встановити її параметри, наприклад, заголовок сторінки, колір фону:



Після натиску на кнопку ОК сторінка відобразиться із зміненим кольором фону та новим заголовком:



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

3.1. Для встановлення на сторінці meta-тега, що містить її опис, необхідно виконати команди ^ Insert(Вставка) - Head Tags (Теги Head) – Description (Описание):




У діалоговому вікні Description(Описание) ввести опис документа, наприклад:



Текст опису сторінки вводиться в область редагування Description. Після натиску на кнопку ОК готовий meta-тег опису сторінки відобразиться на панелі заголовка значком . Для включення або відключення панелі заголовка необхідно виконати команди ^ View(Вид)-Head Content(Содержимое раздела Head). Не рекомендується створювати занадто великий опис сторінки, тому що багато пошукових машин обмежують довжину опису двомастами символів. Якщо вибрати на панелі заголовка meta-тег опису сторінки, відкриється вікно редактора властивостей, в якому можна змінити опис сторінки в області редагування Description:



3.2. Для розміщення на сторінці meta-тега, що містить набір ключових слів, необхідно виберіть пункт Keywords(Ключевые слова) у підменю Head Tags( Теги Head) меню Insert(Вставка):



На екрані з'явиться діалогове вікно Keywords, в якому в області редагування Keywords вводяться ключові слова, розподілені комами:



Тут так само, як і у випадку з описом сторінки, не варто створювати занадто великий набор ключових слів. Доцільно обмежитися тільки тими ключовими словами, що максимально повно описують вашу сторінку. На довжину набору ключових слів також існує обмеження в 200 символів. Після натиснути на кнопку ОК, створений meta-тег ключових слів відображається на панелі заголовка значком . Якщо вибрати на панелі заголовка meta-тег набору ключових слів, відкриється редактор властивостей, в якому можна змінювати набір ключових слів в області редагування Keywords.

4. За допомогою таблиці виконати розмітку сторінки: виділити місце для банера, герба, назви проекта, головного меню та персональних даних.

^ Табличний дизайн - це один зі засобів створення складних Web-сторінок з використанням таблиць мови HTML. Основний принцип табличного дизайну полягає в тому, що весь текст і вся графіка розміщується в комірках таблиці. Як правило, такі таблиці називають таблицями розмітки. Вони мають невидимі границі, а лінійки створюються за допомогою дуже тонких комірок з фоновим заповненням. Таблиці розмітки можуть бути досить складними: можна використовувати різне форматування, багаторазове об'єднання комірок та вкладені таблиці.

Ми будемо використовувати таблицю розмітки для створення головної сторінки лабораторного проекту. Інформація в таблиці повинна буди розміщена наступним чином:

Місце для банера

Назва роботи

Назва дисципліни

Персональні данні про студента

Місце для герба

Головне меню

Корисні посилання

Посилання на сайт КНТЕУ

Посилання на сторінку кафедри ЕКІС сайта КНТЕУ

4.1. В Dreamweaver для створення таблиці необхідно виконати команди Insert(Вставка)-Table(Таблица):



Відкриється діалогове вікно, в якому необхідно встановити параметри таблиці:



Після натиску на кнопку ОК відобразиться пуста таблиця:



4.2. Виконати редагування параметрів таблиці відповідно до вище зазначеної структури. В нашому прикладі в перших трьох строках таблиці повинна бути одна колонка замість трьох. Для виконання цієї операції необхідно виділити спочатку першу строку таблиці та виконати команду Modify(Редактирование)-Table(Таблица) – Merge Cells (Соединение ячеек):



Ті ж самі дії необхідно виконати для 2 та 3 строки таблиці:



4.3. Виділити таблицю та у вікні Properties(Свойства) налагодити параметри форматування таблиці:



4.4. Для вставки малюнка встановити курсор у відведене місце таблиці та виконати команди Insert(Вставка) – Image(Рисунок).



Відкриється діалогове вікно, в якому вибрати необхідний графічний файл:



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



4.3. В зарезервовані місця ввести текстову інформацію:



Примітка: Допускається відхилення від наведеного в прикладі розміщення елементів сторінки, але наявність усіх вищеозначених елементів обов'язкова.

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

Встановити фон сторінки (таблиці) таким, щоб вписати колірну гаму баннера. Для цього відкрити вікно параметрів сторінки за допомогою команд Modify(Изменение)-Page Properties…(Свойства страницы…) і встановити новий фон:



Створити стільовий файл проекту з ім’ям styles.css та встановити в ньому атрибути основних тегів, які використовуються для форматування сторінки.

2.1. Для створення таблиці стилів виконати команди Window(Окно)-CSS Styles( CSS стили):



Після виконання цієї команди відкриється панель Design вкладка CSS Styles (CSS Стили):



2.2. Для створення стилю натиснути на кнопку . Відкриється вікно:



Група перемикачів Тyрe(Тип) задає елементи сторінки, до яких буде застосований новий стиль:

перемикач ^ Make Custom Style (class) (Создать новый стиль (класс)) дозволяє створити новий стильовий клас. Якщо його включити, то в комбінованому списку Name(Имя) вводиться ім'я створюваного стильового класу;

перемикач ^ Redefine HTML Tag (Переделать HTML теги) дозволяє створити стиль перевизначення тега. Якщо обрати цей перемикач, у списку Tag(Тег) вибирається потрібний тег для перевизначення;

перемикач ^ Use CSS Selector (Использовать CSS Selector) дозволяє створити стиль-селектор. Він дозволяє створити псевдостиль гіперпосилань або комбінований стиль. Якщо включено цей перемикач, у комбінованому списку Selector може бути введене ім'я створюваного комбінованого стилю або селектора. Розгорнувши цей список, можна вибрати потрібний псевдостиль.

Друга група перемикачів ^ Define In (Определить в) задає, у якій таблиці стилів буде знаходитися створюваний новий стиль:

якщо обрано верхній перемикач, то у розташованому справа списку, можна вибрати ім'я файлу зовнішньої таблиці стилів, прив'язаної до цієї сторінки. Або можна вибрати пункт (New Style Sheet File), щоб створити нову таблицю стилів. У цьому випадку після натискання кнопки ОК на екрані з'явиться діалогове вікно збереження файлу, де вводиться ім'я файлу нової таблиці стилів;

якщо обрано перемикач ^ This Document Only, стиль буде поміщений у внутрішню таблицю стилів.

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

Відповідно виникає питання у яких випадках доцільно застосовувати той або інший спосіб завдання стилів. Для відповіді на це питання використовується просте правило: з'ясуєте, де і як часто буде використаний той або інший стиль.

Якщо стиль необхідний у багатьох Web-сторінках, то доцільно створити зовнішню таблицю стилів. Наприклад, якщо ви створили стиль основного тексту сторінки, що повинний бути використаний на всіх сторінках сайта, задайте його в глобальній таблиці стилів, одну на весь сайт. Якщо якийсь стиль застосовується не у всіх сторінках, а в їхній невеликій підмножині, визначите його в другорядній таблиці стилів, що буде використана тільки даною підмножиною сторінок. У цьому випадку ви можете визначити весь набір необхідних стилів в одній таблиці, а можете "розкидати" його по декількох.

Якщо стиль повинний бути використаний у декількох місцях одної єдиної Web-сторінки, створюйте внутрішню таблицю стилів. У результаті зовнішні таблиці стилів не будуть заповнюватися стилями, застосовуваними тільки в одній сторінці, і їхні файли збережуть компактність. Можна винести всі такі стилі в зовнішню таблицю, що буде використовуватися єдиною сторінкою, але такий підхід неоптимальний.

Якщо ж стиль повинний бути використаний в одному єдиному місці однієї єдиної Web-сторінки, вбудовуйте його прямо в HTML-тег. Так він буде "ближче до місця дії" і не стане захаращувати таблиці стилів, як внутрішню, так і зовнішні.

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

Спочатку визначаємо стиль для назви роботи і дисципліни. У вікні ^ Новый стиль CSS задаємо тип стилю:



Після натиску на кнопку ОК відкриється вікно для встановлення параметрів стилю, в якому встановлюємо такі значення:



Аналогічним чином створюємо стиль для пунктів меню:



Відформатувати текстові елементи сторінки згідно з створеними стилями. Для цього встановити курсор на необхідний об’єкт і на панелі Design вкладка CSS Styles (CSS Стили) вибрати необхідний стиль форматування:



4. Відформатувати інший текст, враховуючи кольорову гаму використану на сторінці. Ця операція виконується з використанням вікна Properties для кожного текстового об’єкта. Виділити необхідний текст, та встановити необхідні параметри. Наприклад:



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

Встановити гіперпосилання з головного меню на інші сторінки сайту.

1.1. Виділити пункт меню та у вікні Properties (Свойства) у строці Link (Ccылка) натиснути на значок для відкриття вікна вибору необхідного файлу:



Вибрати необхідний файл та закрити вікно кнопкою ОК.

1.2. У вікні властивостей у строці Target(Цель) встановити режим відкриття сторінки, такий щоби вона відкривалася у новому вікні. Для цього у списку справа від строки вибираємо значення _blank:



Аналогічним чином створюємо гіперпосилання для інших пунктів меню.



Створити гіперпосилання на сайт КНТЕУ (http://www.knteu.kiev.ua) та сторінку кафедри ЕКІС (http://www.knteu.kiev.ua/kf_ek_it.php) такими, щоб вони відкривались у іншому вікні браузера.

2.1.Виділити слово "КНТЕУ" та у вікні Properties (Свойства) у строці Link (Ccылка) ввести адресу сайту Університету:



2.2. Аналогічним чином створити гіперпосилання на сторінку кафедри ЕКІС:



2.3. Зберегти сторінку із внесеними змінами.

Відкрити папку лабораторного проекту та протестувати локально працездатність створеного сайту, запустивши файл Index.htm.



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

УВАГА. Методичні вказівки для виконання цієї лабораторної роботи наведено у навчально-методичному виданні "ОСНОВИ WEB – ДИЗАЙНУ. Тема: “Візуальне проектування у середовищі Macromedia Dreameweaver”. Методичні вказівки та завдання до самостійної роботи". Автор: Стратанович Т.Е.

^ РЕКОМЕНДОВАНА ЛІТЕРАТУРА

С. Бэйн, Н. Уилкинсон Эффективная работа: CorelDRAW 12 (Эффективная работа). Питер, 2005 - 736с.

Брент Хислоп, Дэвид Энжелл, Питер Кент Microsoft Office Word 2003. Библия пользователя - Диалектика, 2004 - 784с.

Вандер Вер Э. JavaScript для чайников. - К.: Издательский дом «Вильямс», 2001.

Дебра Литтлджон Шиндер Основы компьютерных сетей. - Вильямс, 2002 – 656с.

Дригалкин В.В. HTML в примерах. Как создать свой Web-сайт. Самоучитель 2005 192 с.

Дуглас Камер Компьютерные сети и Internet. - Вильямс, 2002 – 640с.

Гусев В. С. Поиск в Internet. Самоучитель. Диалектика, 2004 - 336 с.

Костарев А. РНР в Web-дизайне. С.-Петербург.: ВНV, 2002.

В. Кузьмин "Microsoft Office Excel 2003. Учебный курс" - Диалектика, 2003 – 493с.

Мальчук Екатерина Васильевна HTML и CSS. Самоучитель. Вильямс, 2005 - 416с.

Леонтьев Б.К. Web-дизайн: тонкости, хитрости и секреты. - М:СОЛОН-Пресс, 2003 - 640с.

Джозеф В.Ловери Dreamweaver 4. Библия пользователя. - Вильямс, 2002 - 1008с.

Смолина Марина Александровна CorelDRAW 11. Самоучитель - Диалектика, 2003 - 400с.

Спека Марина Владимировна Создание Web-сайтов. Самоучитель. - Диалектика, 2006 - 288с.

Пол Мак-Федрис Microsoft Windows XP SP2. Полное руководство - Вильямс, 2006 - 880с.

технологий. 2005 - 512с.

Роберт Рейнхардт, Джон Уоррен Ленц Flash 5. Библия пользователя, Диалектика 2001, 1200c/ с ил.

Холл М., Браун Л. Программирование для Web.- К.: Издательский дом «Вильямс», 2002.

Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И. Основы web-Джо Хабрейкен Microsoft Office 2003: Word, Excel, Access, PowerPoint, Publisher, Outlook. Все в одном - Вильямс, 2006 - 864c.

Шеперд Д. Освой самостоятельно XML. - К.: Издательский дом «Вильямс», 2002.

Брент Хислоп, Дэвид Энжелл, Питер Кент Microsoft Office Word 2003. Библия пользователя - Диалектика, 2004 - 784с.

Уокенбах Дж. Excel 2003. Библия пользователя/Пер.с англ.-К.;М.:Диалектика;Вильямс,2007 .-766с.-(илл.+CD-ROM).

Фейт Уэмпен Microsoft Office PowerPoint 2003. Библия пользователя - Диалектика, 2005 - 768c.

Основы работы в Excel XP - электронный учебник.

Цвет в Web-дизайне - статья Дмитрия Кирсанова

http://www.artlebedev.ru/kovodstvo2/sections/99 - Законы дизайна от Артемия Лебедева.

http://www.webclub.ru/ - Всероссийский Клуб Веб-разработчиков

http://www.cherry-design.spb.ru/ - Web-студия Михаила Мельникова