Лабораторна робота №4, Середовище для створення сайтів Macromedia Dreamweaver

« Назад

Мета: Знайомство з робітничим середовищем Macromedia Dreamweaver

Завдання до виконання роботи

Завдання 1

Частина 1. Настроювання користувацького інтерфейсу Dreamweaver

Для настроювання користувацького інтерфейсу активізуйте команду Edit/Preferences.

У категорії New Document (Новий документ) для російськомовного сайту в списку Default Encoding (Кодування за замовчуванням) вибирається кодування Кирилиця (Windows) (Windows-1251), для англомовного сайту - Західноєвропейська (Latin1).

Шрифт вибирається в категорії Fonts у списку Font Setting (Установка шрифту). Відповідно вибирається Кирилиця (Cyrillic) або Західноєвропейська (Western).

У категорії General установите прапорець Use <strong> and <em> in place of <b> and <i>, що включає використання тегів логічного форматування замість тегів фізичного форматування, оголошених "не рекомендованими" і прапорець Use CSS instead of HTML tags, який включає використання для форматування стилі CSS замість тегів HTML.

У категорії Code Coloring установите кольору для синтаксичного виділення кольором. Може бути встановлений колір окремих тегів і коментарів html, ключових слів Javascript.

Категорія Code Format служить для вистави коду html на сторінці. Вона дозволяє створити відступи в таблицях і фреймах і задати величини цих відступів, визначити регістр для тегів і атрибутів, а також спосіб центрування об'єктів, для яких переважніше вибрати конструкцію <div align="center>", оскільки тег <center> не входить в існуючий стандарт W3C.

У категорії Code Rewriting вказуються правила виправлення коду html. Познайомтеся із запропонованими опціями й залишіть їх без змін.

У категорії File Types/Editors можна вказати зовнішній редактор коду, а також асоціювати з розширеннями файлів відповідні редактори.

Категорія Invisible Elements аналогічні установки опції " символы, Що Непечатаемые," в Invisible Elements будуть відображені у вигляді маленьких жовтих символів у режимі Design.

Категорія Layers дає можливість установити за замовчуванням параметри шарів, створюваних тегом <div>, який читається й Internet Explorer, і Netscape Communicator.

У категорії Panels можна модифікувати параметри, що задають спосіб вистави панелей на екрані й спосіб доступу до них.

Категорія Preview in Browser дає можливість установити для перегляду сторінок як обоє основних браузера, так і додати новий, а також забезпечити перегляд сторінок на локальному сервері (тільки для Windows). При цьому повинен бути запущений сервер IIS або Personal Web Server.

Настроювання для Status Bar включають вибір розміру вікна й швидкості з'єднання.

Частина 2. Знайомство з вікном і панелями Dreamweaver.

Познайомтеся з основними елементами вікна Dreamweaver.

Угорі розташований рядок меню, інструментарій об'єктів, інструментарій документа, вікно документа з рядком стану.

Унизу вікна розташована панель редактора властивостей (Properties), а праворуч перебуває док із групою плаваючих панелей. Док відділений від іншого вікна товстою сірою смугою, за допомогою якої можна міняти розмір доку. На смузі є кнопка, що дозволяє сховати або відобразити вміст доку.

Для роботи з панелями використовуються команди Window і View. Сховати або відобразити всі панелі можна натисканням клавіші F4.

Познайомтеся з інструментарієм об'єктів. Інструментарій об'єктів жорстко зафіксований уздовж верхнього краю вікна документа й дає можливість швидко вставити елементи на сторінку. Для його активізації слід викликати команду Window-Insert або Ctrl+F2. Інструментарій об'єктів містить набір вкладок із кнопками, кожна з яких призначена для приміщення на сторінку відповідного елемента. Перемикання вкладок здійснюється за допомогою списку, що розкривається, у лівій частині інструментарію. За замовчуванням активна вкладка Common. Познайомтеся із кнопками цієї вкладки, а також з можливостями вкладок Forms, Text, Html, Flash elements, Frameset і Layout.

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

Редактор властивостей повинен бути видний під час роботи постійно. Для його активізації потрібно вибрати команду Window-Properties або Ctrl+F3. Редактор властивостей не може бути поміщений в іншу групу панелей. Для показу всіх доступних властивостей елемента й розгортання панелі редактори властивостей потрібно клацнути на стрілці, розташованої в правому нижньому куті панелі.

Познайомтеся з інструментарієм документа, розташованим під інструментарієм об'єктів. Інструментарій документа активізується при виборі команди Document меню View-Toolbars. Три ліві кнопки панелі інструментарію забезпечують перемикання між основними режимами роботи Dreamweaver. У режимі Code відображається Html-Код створюваної сторінки. Режим Design – WYSIWYG режим, у якім сторінка відображається як у браузері. Кнопка Split дозволяє перемкнутися в режим Code and Design, у якім вікно ділиться на дві частини для відображення коду й самої сторінки. Перемикання між режимами здійснюється кнопками й може відбуватися також з команди View. Режимом за замовчуванням звичайно є режим Design. Редагувати теги в ньому можна за допомогою спеціального засобу Code Inspector, для активізації якого служить команда Window-Code Inspector або F10.

Познайомтеся із вмістом рядка стану. У лівій частині рядка стану перебуває секція тегів коду сторінки. З її допомогою можна вибрати фрагмент тексту, оформлений з використанням того або іншого тегу. Праворуч розташована секція, що відображає розмір вікна документа в пікселях. Можна вибрати будь-який розмір вікна зі списку, що розкривається, і подивитися як буде виглядати в ньому створена сторінка. Сама права секція містить розмір сторінки і час, протягом якого вона буде завантажуватися із сервера. Швидкість завантаження задається в настроюваннях і за замовчуванням рівна 56Кбіт/сек.

Познайомтеся з діалоговим вікном, що дозволяють установити властивості сторінки Page Properties, воно активізується командою Modify-Page Properties.

Познайомтеся з використанням колірних схем. Для цього скористайтеся командою Commands-Set Color Scheme і переглянете кілька варіантів колірних схем, заснованих на обраних фонових квітах.

Завдання 2

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

Створіть кореневу папку, у якій будуть збережені файли і папки нового сайту і виконаєте команду Site-Manage Sites-New, у якій на вкладці Advanced укажіть посилання (шлях) на створену папку в текстовім полі Local root folder. На панелі Files, користуючись контекстним меню і встановивши курсор миші на кореневу папку, виберіть команду File-New File.

У режимі Design створіть текст, що складається із двох заголовків і декількох абзаців. Помістіть в текст чотири короткі фрагменти, які можна буде використовувати для посилань на файли сайту, електронну пошту і зовнішній сайт. Збережіть створений файл у папці сайту під довільним іменем. Скористайтеся папками з малюнками Graphics, Sign_graphics і папкою з html-файлами – Sign_html для ролловера, панелі навігації і карти зображень. Папки з малюнками повинні бути вкладені в папку з вихідним html-файлом.

Перейдіть в режим Code і переглянете html-код створеного файлу. Внесіть довільні зміни в html-код.

Активізуйте панель Code Inspector за допомогоюкоманди Window-Code Inspector або F10. Виділите фрагмент коду й, користуючись контекстним меню, зміните його.

Скористайтеся панеллю Tag Inspector ( вона присутня в правому доці, активізується командою Window-Tag Inspecter або F9) і внесіть довільні зміни в текст сторінки.

У режимі Design внесіть у текст фрази коротке і довге тире. ("Чудовий програмний продукт ¾ Dreamweaver! Ми вивчимо його за 3 - 4 заняття"). Скористайтеся для цього вкладкою Text інструментарію об'єктів.

Перейдіть в режим Code and Design і змініть розміри вікон. Внесіть зміни в одному і іншому режимах відображення.

Поверніться в режим Design і, користуючись панеллю Properties (Ctrl+F3), оформите довільним образом перший заголовок і перший абзац тексту. Створіть список із фрагментів, призначених для посилань на файли і електронну пошту. Перемкнетеся в режим Code і переглянете Html-Код створеного файлу.

Створіть посилання з елементів списку. Перше посилання на довільний файл створіть, користуючись зображенням папки на панелі Properties, попередньо виділивши текст посилання. Друге посилання створіть, користуючись кнопкою Point-to-File, попередньо виділивши текст посилання, активізуйте панель Files, а потім перетягнете значок Point-to-File на цільовий документ. Поле Link при цьому обновиться. Збережіть файл і перевірте правильність роботи посилань у браузері, скориставшись командою File-Preview in Browser. Створіть посилання на електронну пошту, користуючись вкладкою Common інструментарію об'єктів або командою Insert-Email Link, і перевірте правильність роботи посилання в браузері. Перейдіть в режим Code і переглянете Html-Код створеного файлу.

Створіть зовнішнє посилання на обраний вами сайт. Використовуйте поле Link редактори властивостей Properties. Відкрийте цільовий файл у новому вікні, використовуючи атрибут target=_blank і перевірте правильність роботи посилання в браузері.

Встановіть якір на початку тексту сторінки і зробіть посилання на нього з останнього абзацу тексту. Для створення якоря скористайтеся вкладкою Common інструментарію об‘єктів і виберіть кнопку Named Anchor, дайте ім'я якорю і натисніть ОК, при цьому в місці вставки якоря повинен з'явитися маркер якоря. Після цього виконаєте прив'язку якоря, тобто створіть посилання на нього. Перевірте правильність роботи посилання в браузері. Перемкнетеся в режим Code і переглянете Html-Код створеного файлу.

Вставте на сторінку ролловер, користуючись кнопкою Images-Rollover Image вкладки Common інструментарію об'єктів і парою файлів з папки Sign_graphics із суфіксами up і over або будь-якими іншими файлами. Перевірте правильність роботи ролловера в браузері.

Вставте на сторінку "панель навігації", користуючись відповідною кнопкою вкладки Common інструментарію об'єктів і файлами з папок Sign_graphics і Sign_html. Використовуйте три стани кнопок і 4-5 елементів навігації. У їхніх назвах утримуються суфікси up, down і over. Установите вертикальне положення панелі і попереднє завантаження зображень за допомогою відповідних елементів вікна Insert Navigation Bar. Перевірте правильність роботи в браузері.

Створіть "меню переходу" ("Jump menu"). Використовуйте команду Insert-Form -Jump menu або кнопку Jump menu вкладки Forms інструментарію об'єктів. У поле Text уведіть текст першого рядка меню ("Виберіть свій знак"), потім клацніть на знаку + і введіть текст у поле Text, заповните інші поля, на свій розсуд установите прапорець Insert Go Button After Menu, і повторите ці дії відповідно до кількості переходів вашого меню. Перевірте правильність роботи меню в браузері.

Створіть карту-зображення, використовуючи файли папок Sign_graphics і Sign_html. У якості карти використовуйте зображення yoursign.gif з папки Sign_graphics. Вставте це зображення у свій файл. Для створення використовуйте панель Properties. Перевірте правильність роботи карти в браузері. Перемкнетеся в режим Code і переглянете Html-Код створеного файлу.

Покажіть створені сторінки викладачеві.

Завдання 3

Ціль: Знайомство з використанням CSS.

Створення впровадженого стилю.

Завантажте документ, створений на минулому занятті.

Активізуйте панель стилів Window-css Styles і створіть новий стиль, користуючись кнопкою внизу вікна.

У діалоговім вікні New CSS Syle установите перемикач Selector Type у положення Class ( для створення класу) і задайте ім'я класу, наприклад, с1. Для створення впровадженого стилю c збереженням його в Web-Сторінці (використання стилю тільки для даного документа), установите перемикач Define in у положення This document only.

Задайте параметри форматування: font - Verdana, size - 14pt, letter-spacing - 2ems, text-align - center, background - #c0c0c0, border - top, bottom, користуючись категоріями вікна CSS Style Definition, і застосуєте створений клас до одного із заголовків сторінки. Для цього виділіть цей заголовок і використовуйте текстове поле style панелі Properties.

Створіть новий стиль для перевизначення тегу, установивши перемикач Selector Type у положення Tag, і збережіть його в документі. Виберіть тег <р> і встановите для нього властивості стилів, що визначають фон і відступи від границі тіла до тексту (padding) за своїм розсудом. Перевірте, як стиль застосувався до обраного тегу.

Створіть зв'язування із зовнішнім css-файлом.

Створіть новий стиль для перевизначення тегу <a> (наприклад, відключите підкреслення гіперпосилань і створіть збільшений розмір шрифту).

Установите перемикач Define in у положення New Style Sheet File, дайте ім'я файлу стилів my1.css і збережіть його.

Створіть клас с2 з довільно обраними параметрами форматування, збережіть його в зовнішньому файлі my1.css.

Проаналізуйте відображення створених стилів у панелі CSS Styles.

Застосуєте клас с2 до фрагмента тексту сторінки, виділивши цей фрагмент, а потім у вікні CSS Styles у контекстному меню обраного стилю натисніть кнопку Apply.

Створіть вбудований стиль для форматування другого абзацу, використовуючи Tag Editor і додавши атрибут style з властивістю, що дозволяють відобразити текст абзацу збільшеним кеглем (font-size:larger).

Виділите текст другого абзацу і скористайтеся командою Modify-Edit Tag.

Виберіть категорію Style Sheet/Accessibility і введіть у поле Style властивість font-size:larger.

Перевірте дію створеного вбудованого стилю.

Переглянете результат застосування стилів у браузері.

Завдання 4

Ціль: Знайомство із застосуванням інтерактивних ефектів Javascript (Window-Behaviors - Інтерактивні ефекти).

Створення спливаючого повідомлення.

Установите курсор у початок створеного на данім занятті файлу (на тег body).

Активізуйте команду Window-Behaviors (Інтерактивні ефекти), натисніть (+) і виберіть із меню, що розкривається, пункт Popup message (Спливаюче повідомлення).

Уведіть текст повідомлення в діалоговім вікні, що відкрилося.

Зверніть увагу на подію, яка буде пов'язане з даним ефектом. За замовчуванням цією подією повинне бути подію Load.

Переглянете отриманий результат у браузері (F12).

Відкриття нового вікна Web-Браузера.

Додайте на сторінку елемент форми – кнопку. (Скористайтеся контекстним меню для редагування типу кнопки).

Виділите його і активізуйте інтерактивний ефект Open Browser Window. Заповните поля діалогового вікна.

Збережете сторінку і переглянете отриманий результат у браузері.

Використання шарів.

Перед роботою із шарами познайомтеся з установками Edit-Preference-Layers, включите панель Layers і завантажите файл Switches.html з папки Layers. Кожний зразок кольору являє собою шар розміром 60(60 пикселей, який відображається в браузері.

Створіть ", що рухаються" у браузері шари. Виділите в панелі Layers шар red1 і клацніть на зразку виділеного червоного кольору. Активізуйте панель Behaviors і виберіть ефект Drag layer.

На вкладці Basic виберіть ім'я шару, якому призначається ефект, опцію Unconstrained (безумовний), на вкладці Advanced виберіть Entire Layer (увесь шар) і встановите прапорець Bring Layer on Front, Then Leave on Top (Перемістити шар уперед, потім залишити нагорі) і нажати OK.

При виділеному шарі переконаєтеся, що ефект призначений як відгук onmousedown.

Повторите п.3.2-3.4 для всіх зразків кольору.

Збережете результуючий файл і файли зображень і перевірте його роботу в браузері (F12).

Покажіть отриманий файл викладачеві.

Програвання аудиоклипа.

Виберіть ефект Play Sound панелі Behaviors і введіть ім'я аудіофайлу, який повинен бути програний.

Збережете сторінку і прослухайте отриманий результат у браузері. Якщо буде потреба додайте атрибути до створеного тегу або змініть подію, при якій відбувається програвання аудіофайлу.

Перевірка даних, введених у форму.

Завантажите або створіть файл, що містить форму.

Використовуйте ефект Validate Form панелі Behaviors і встановите для текстових полів Value прапорець Required (обов'язковий), а для поля введення адреси електронної пошти – Email address. Перевірте зв'язок ефектів з подіями Blur (втрата полями фокуса).

Збережете сторінку й переглянете отриманий результат у браузері.

Створення багаторівневого меню (меню гіперпосилань).

Створіть нову сторінку і у ньому зображення Студентам, якому дайте ім'я. До цього елемента сторінки буде прив'язано створюване меню.

Створіть п'ять Html-Файлів з довільним змістом і іменами dnev.html, uskor.html, vtor.html, metod.html, raspis.html.

Для створення однорівневого меню, показаного на мал.1, виділите зображення Студентам і активізуйте ефект Show Pop-Up Menu панелі Behaviors.

Використовуйте вкладку Contents і поле Text для створення пункту меню. У поле Link уведіть посилання на відповідний файл. Новий пункт меню створюється при натисканні кнопки зі знаком «+».

Рис.1

Використовуйте інші вкладки діалогового вікна Show Pop-Up Menu для оформлення меню.

Збережете створену сторінку, що містить меню й перевірте працездатність меню в браузері.

Створіть багаторівневе меню, зображене на мал.2. Повторите п.6.1. Для формування вкладеного меню створіть пункт основного меню, при клацанні на якім буде відкриватися підменю, поле Link залишіть незаповненим. Далі створіть пункт підменю і помістіть його за раніше створеним пунктом, а потім виділите його й натисніть кнопку Indent Item. Щоб повернути пункт із підменю в основне меню або підміню більш високого рівня, використовуйте кнопку Outdent Item.

Збережете створену сторінку, що містить меню і перевірте працездатність меню в браузері.

Завдання 5

Ціль: Знайомство з табличним і фреймовим дизайном сторінки. Знайомство з використанням форм, зображень і шарів.

Частина 1. Розміщення матеріалу сторінки за допомогою таблиць.

Створіть календар на грудень у вигляді таблиці з 7 стовпцями і 12 рядками шириною 95%, користуючись кнопкою Table вкладки Common інструментарію об'єктів.

Об'єднаєте гнізда першого рядка, користуючись кнопкою панелі Properties або комбінацією клавіш Ctrl+Alt+М. В об'єднане гніздо вставте таблицю, що складається з одного стовпця і одного рядка. Перейдіть у режим Code і переглянете отриманий код.

Створіть в Photoshop зображення, що служить заголовком календаря на грудень за аналогією зі зразком або скористайтеся файлом dec.gif. Відкрийте файл celtic1.gif і встановите фон для створюваного зображення, відповідний до фону файлу celtic1.gif.

Вставте зображення створеного заголовка у вбудовану таблицю. Установите курсор праворуч вбудованої таблиці і вставте в якості фонового зображення файл celtic1.gif, користуючись панеллю Properties. Скорегуйте висоту гнізда так, щоб можна було побачити файл celtic1.gif. Користуючись мишею, приведіть таблицю до виду, показаного в зразку. Перейдіть у режим Code і переглянете отриманий код.

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

У клітинці таблиці, що відповідають 8, 12 і 23 числам, введіть тексти і вставте фонові зображення так, як показано в зразку. Перейдіть у режим Code і переглянете отриманий код.

Створіть фотоальбом. Використовуйте вихідні зображення папки photo_album. Виберіть команду Commands - Create Web Photo Album.

Заповните поля діалогового вікна даної команди й клацніть OK.

Після формування мініатюр програмою Fireworks збережете створений файл і оформите його за своїм розсудом (додайте колір фону, а також вбудований стиль для заголовка h1). Перейдіть у режим Code і переглянете отриманий код.

Переглянете файл у браузері і перевірте його працездатність.

Створіть зображення-посилання і доповніть відкриттям нового вікна для цільового файлу.

Відкрийте файл wraptext.html з папки moiré. Встановіть курсор у початок тексту перед словом Welcome і вставте таблицю з одного рядком і одним стовпцем шириною 100 пікселей і іншими параметрами, рівними нулю.

Виділите таблицю і у вікні Properties установите в поле Alignment значення Left. Таблиця повинна зміститися до лівого краю, а текст повинен її обтікати.

Клацніть у гнізді таблиці і вставте зображення moirelogo.gif з папки moiré. Задайте горизонтальний зазор 10 пікселей. Якщо текст змістився вниз, вилучить зайві пробіли для досягнення ефекту обтікання. Перейдіть у режим Code і переглянете отриманий код.

Виділите текст і, користуючись Tag Editor (Modify-Edit Tag), додайте вбудований стиль, який буде вирівнювати текст по обом краям. Перейдіть у режим Code і переглянете отриманий код.

Виділите зображення логотипа й у поле посилання встановите "порожнє" посилання за допомогою знака #. При клацанні на зображенні повинне відкритися нове вікно з файлом movie.html. Тому в посиланні повинен працювати оброблювач події onclick. Для цього при активнім зображенні активізуйте панель Behaviors (Інтерактивні ефекти) командою Window- Behaviors. Клацнувши на значку (+) у лівому верхньому куті панелі, виберіть Open Browser Window і заповните поля URL to Display і Window Width, Window Height, рівні 300 пикселей.

У панелі Behaviors переконаєтеся в тому, що вікно відкривається при виборі оброблювача події click і, якщо це не так, встановіть оброблювач цієї події.

Збережіть файл і перевірте його працездатність у браузері. Перейдіть у режим Code і переглянете отриманий код.

Покажіть файли, отримані після виконання пп.1-3 викладачеві.

Частина 2. Розміщення матеріалу сторінки за допомогою фреймів.

Створіть фреймову структуру, показану на мал. 8.8.

Рис. 8.8

Укажіть кореневу папку нового сайту frame_site і довільне ім'я знову створюваного сайту, користуючись командою Site-Manage Sites. У папку frame_site повинні бути вкладені папки Pages і Images, надавані викладачем. Папка Pages містить html-файли, на які здійснюються посилання у відповідних Jump Menu, розташованих у лівому навігаційному фреймі.

Кожний html-файл містить одне графічне зображення (узяте з папки Images), а також посилання переходів на файли з наступним (Next) і попереднім (Back) зображеннями.

Простежите появу кореневої папки сайту і вкладених у неї папок у панелі File. У новому документі створеного сайту створіть фреймову структуру, користуючись вкладкою Layout інструментарію об'єктів і кнопкою Frames.

Активізуйте панель Frames (Window-Frames) і виділите по черзі перший і другий набори фреймів. Для цього потрібно клацнути мишею по потовщених границях фреймів у зображенні фреймів у панелі Frames. Перший набір містить два горизонтальні фрейми, а другий- два вертикальні, на які розділений другий горизонтальний фрейм. При цьому в рядку стану повинні бути виділені відповідні теги frameset.

Встановіть границі фреймів і збережете файли у своїй папці (кореневий для створюваного сайту) за допомогою команди File - Save All. Файл, що містить структуру фреймів, назвіть default.html, файл із заголовком – header.html, сторінку зі списками, що розкриваються, посилань – nav.html, а сторінку, відображувану в центральному фреймі – main.html.

Простежте появу збережених файлів у панелі File і переглянете вміст файлу default.html з набором фреймів, перейшовши в режим Code. Проаналізуйте призначення тегів frameset і frame. Зверніть увагу на загальну кількість файлів (три фрейми й один файл із набором фреймів), призначення тегів noframe і імена фреймів (атрибути name тегів frame).

Виділить по черзі кожний фрейм у панелі Frames і встановіть в редакторі властивостей властивості, властиві фреймам –границі, можливість прокручування вмісту або її відсутність ( для всіх фреймів, крім основного можна задати відсутність прокручування, а в основному використовувати режим Auto). Проаналізуйте інші можливості редактора властивостей фреймів.

Заповните фрейми вмістом. Установка курсору усередині фрейму дозволяє працювати із фреймом у звичайному режимі, користуючись командами панелі Properties. Оформите фрейми за своїм розсудом, але так, щоб призначення їх відповідало зразку: верхній фрейм призначений для заголовка, лівий містить меню, що випадають, а цільовим фреймом є головний середній фрейм. У ньому розташовуються обрані користувачем файли з фотографіями. При створенні Jump Menu зверніть увагу на елемент керування Open URL in і задайте в якості значення ім'я цільового (головного фрейму), так щоб файли по обраних посиланнях відкривалися в ньому.

Покажіть отриману фреймову структуру викладачеві.

Частина 3. Розміщення матеріалу сторінки за допомогою форми.

Створіть форму за зразком, наведеному на мал. 2.10, користуючись категорією Forms інструментарію об'єктів.

Покажіть отриману форму викладачеві.

Завдання 6

Ціль: Знайомство із засобами керування сайтом у середовищі Macromedia Dreamweaver.

Виконаєте реєстрацію сайту в Dreamweaver.

Скопіюйте папку corporate із вкладеними папками гіпотетичного корпоративного сайту з папки "Task 5_Dw" у свою папку, створену в директорії c:/temp.

Скористайтеся командою Site-Manage Sites. У діалоговім вікні Site Definition виберіть на вкладці Advanced категорії Local Info (Інформація Відповідь локальної копії сайту) і Remote Info (Інформація про вилучену копію сайту). У розділі Local Info задайте ім'я сайту в Dreamweaver, локальну директорію, яка буде використовуватися в якості кореневої директорії для сайту, http-Адреса сайту для контролю абсолютних URL усередині сайту, установите також прапорець використання кэша. Розділ Remote Info містить інформацію, необхідну для передачі готового сайту на сервер. Виберіть у списку Access (доступ) Local/Network і встановите гіпотетичну "вилучену" папку Name в c:/temp. Познайомтеся з опціями методу FTP, який є найбільше широко використовуваним методом доставки файлів сайту на сервер. У категорії Site Map Layout укажіть вихідний документ сайту (домашню сторінку). Це файл index.htm з папки corporate.

Познайомтеся з файлами вкладених папок сайту, створеними засобами Dreamweaver, і переглянете роботу сайту у двох браузерах, уважаючи "першим" Internet Explorer, а "другим" - Opera. Доступ до списку браузерів можна одержати, використовуючи команду File - Preview in Browser - Edit Browser List. (Швидке перемикання в режим перегляду основного браузера - F12, другого – Ctrl+F12).

Завантажте файли сайту на "віддалений" комп'ютер. Активізуйте панель Files (Window – Files) і натисніть кнопку Expand/Collapse. У лівій частині буде відображена віддалена копія сайту, а в правій – локальна. Для завантаження файлів на віддалений комп‘ютер виберіть кореневу директорію в області локального сайту у вікні Site і клацніть на кнопці Put Files, наявної на панелі інструментів. ( При реальному процесі завантаження непогано переконатися в тому, що ви підключені до Internet або до локальної мережі).

Відкрийте обраний вами браузер і в діалоговім вікні Open активізуйте вихідний файл свого сайту. Перевірте його працездатність.

Познайомтеся зі створенням карти сайту.

Активізуйте команду View - Site Map додаткового меню панелі File і познайомтеся з картою створеного сайту. Керування картою відбувається за допомогою вікна Site-Manage Sites і категорії Site Map Layout. У цьому вікні можна встановити адреса домашньої сторінки, кількість стовпців (рівне числу сторінок, відображуваних у кожному рядку) і ширину цих стовпців. Тут же можна вказати як будуть відображатися файли сайту – відсортованими по їхніх заголовках або по іменам файлів. Змініть масштаб відображення файлів сайту, користуючись кнопкою Zoom, розташованої в нижньому лівому куті вікна карти сайту. Збережете карту сайту як зображення, користуючись командою Site-Save Site Map.

Перевірте посилання сайту. Для цього скористайтеся командою Site- Check Links Sitewide додаткового меню панелі Files. У діалоговім вікні, що відкрилося, можна вибрати для перевірки варіанти: Broken (Некоректні), External (Зовнішні) або Orphaned (Сироти - файли, на які немає посилань). Для коректування посилань подвійним клацанням миші можна активізувати проблемні файли і у звичайному режимі змінити їх. По закінченню роботи з перевірки посилань можна створити текстовий файл-звіт з даними про всі три типи некоректних посилань.

Складіть звіт по сайту. Для цього виберіть команду Site-Repots і запустите складання звіту по всіх файлах сайту (Entire Local Site), включивши в нього всі п'ять типів Html-Звітів: ( про вкладені теги Font, відсутності альтернативного тексту, про зайві вкладені теги без пари, що підлягають видаленню порожніх тег заголовків документу).

Проаналізуйте час завантаження сторінок створеного сайту при заданій швидкості з'єднання.

Покажіть результати роботи викладачеві.

Питання для самоконтролю:

1. Чим зручні зв'язані стилі?

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

3. У чому зміст каскадирования?

4. Приведіть приклади властивостей елементів, використовуваних в CSS.

5. Як створювати таблицю стилів в Macromedia Dreamweaver?