Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Веб-дизайн1.doc
Скачиваний:
0
Добавлен:
01.03.2025
Размер:
1.54 Mб
Скачать

Приклади тестових питань

  1. Який протокол є загальновизнаним для обміну електронною поштою? «Питання першого типу – одна вірна відповідь з декількох»

а. TCP/IP;

b. SNMP;

c. SMTP;

d. CMIP.

  1. Які з цих сфер належать до сфер електронної комерції? «Питання другого типу – декілька вірних відповідей з багатьох»

    1. Електронний обмін капіталом;

    2. Електронний маркетинг;

    3. Електронна пошта;

    4. Електронні гроші;

    5. Електронне навчання.

Модуль 2

Інтернет-сайти та їх типи. Розробка Інтернет-ресурсів.

Тема семінару 4

Загальні відомості по роботі в середі Macromedia Dreamweaver MX. Створення мапи Інтернет-сторінки.

Мета семінару: знайомство з інтерфейсом Macromedia Dreamweaver MX, настройка программы и создание карты сайта

План

  1. Ознайомитися з програмою, вивчити основні панелі інструментів.

  2. Налаштувати зручний для себе програмний інтерфейс.

  3. Створити Web-вузол.

  4. Створити мапу Інтернет-сайту.

  5. За результатами семінарів 4 – 8 сформувати звіт.

Теоретичні відомості виконання практичного семінару.

Інтерфейс представлений основним вікном документа, де ми виробляємо всі основні дії та допоміжними панелями. Насправді, можна (якщо у вас, наприклад дозвіл екрану менше 1024x768) згорнути деякі панелі. Всі необхідні функції продубльовані в головному меню (File, Edit, View і т.д.)

Почнемо робір інтерфесу з панелі об’єктів (рис. 1).

Рис.1 Панель об’єктів

За умовчанням завжди стоїть палітра common objects (основні об'єкти). У неї включено практично все, що вам потрібно (зліва-навправо):

  • Hyperlink – вставляє гіперпосилання на сторінку;

  • E-mail Link – вставляє посилання на електронну адресу;

  • Named Anchor – вставляє якоря;

  • Table (таблица) – вставляє таблиці;

  • Div Tag – вставляє тег div;

  • Images:

  • Image – вставляє на сторінку графічний елемент;

  • Rollover Image – вставляє змінне зображення (зміна трапляється при наведенні на зображення миші)4

  • Fireworks HTML – вставляє об’єкт Macromedia FireWorks;

  • Navifgation Bar – вставляє навигаційну панель, яка состоїть з декількох кнопок;

  • Media

  • Flash – вставляє флеш-анімацію на сторінку;

  • Flash Button – вставляє флеш-кнопку;

  • Flash Text – вставляє флеш-текст;

  • Flash Video – вставляє флеш-відео;

  • ShockWave – вставляє Shockwave-анімацію;

  • Applet – вставляє ява-апплет;

  • ActiveX – вставляє ActiveX;

  • Plugin – вставляє об’єкт, що програється плагіном;

  • Date – вставляє до сторінки поточні дати (можна з автооновленням);

  • SSI – вставляє інклюд (зовнішній HTML файл, що підключається);

  • Comment – вставляє коментарій до сторінки;

  • Шаблоны – створення шаблону;

  • Tag Chooser – бібліотека тегів.

Далі розглянемо палітру layout (рис.2)

Рис.2 Панель об’єктів – палітра layout

  • Standard View – перехід в стандартний режим роботи з документом;

  • Layout View – перехід в режим макетування документа;

  • Draw Layout Table – доступ до інструменту створення макетної таблиці;

  • Draw Layout Cell – доступ до інструменту створення макетної клітинки.

  • Tabular data – вставляє готову таблицю з готовими даними (наприклад з MS Excel);

  • Frames – допоможе зробити, одним натисканням на кнопку, складну фреймову структуру.

Палітра forms (рис.3) служить для візуального створення форм.

Рис.3 Панель об’єктів – палітра forms

  • Form – сама форма;

  • Text Field – текстове поле;

  • Hidden Field – приховане поле;

  • Textarea – текстова область;

  • Checkbox – чекбокс (місце для галочки при виборі);

  • Radio Button – забезпечує вибір одного з варіантів;

  • Radio Group – група radio button;

  • List / Menu – робить список, що випадає або меню;

  • Jump menu – для переходу, по кліку, на іншу сторінку;

  • Image Field – поле зображення;

  • File Field – форма для закачування файлів;

  • Button – кнопка.

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

Рис.4 Панель об’єктів – палітра text

  • Bold, strong – напівжирний текст;

  • Italic, emphasis – курсив;

  • Heading 1, Heading 2, Heading 3 – заголовки;

  • Unordered List, Ordered List, List Item – список, пронумерований список, пункт списку;

  • Abbreviation, Acronym – абревіатура;

  • Characters – спеціальні символи.

І останньою розглянемо інструменти палітри html (рис.5)

Рис. 5 Панель об’єктів – палітра html

  • Horizontal Rule (лінійка) – вставляє декоративний елемент – лінійку (зазвичай використовується, як роздільник абзаців);

  • Head – допомагає додавати різні описи та властивості сторінки, такі як:

  • мета-теги;

  • ключові слова;

  • описи сторінки;

  • встановлювати параметри оновлення сторінки;

  • вказувати базові посилання;

  • вказувати посилання;

  • Script - вставляє java, vbasic скрипти.

Трохи нижче знаходиться панель інструментів (рис.6), вона виконує функції основного диспетчерського пульта програми. Вона об'єднує кнопки виклику найбільш затребуваних команд і ресурсів редактора. (зліва-направо)

Рис.6 Панель інструментів

  • Code View – кнопка переходу в режим відображення вихідної гіпертекстової розмітки документа;

  • Code and Design View – кнопка переходу в комбінований режим роботи, коли вікно документа розщеплюється на дві частини: в одній виводяться коди розмітки, в іншій відображається зовнішній вигляд гіпертекстової сторінки;

  • Design View – кнопка переходу в візуальний режим роботи редактора - режим WYSIWYG;

  • Title – текстове поле, призначене для введення заголовка документа;

  • Check browser support – тестує на сумісність з браузерами: Firefox, Internet Explorer, Mozilla, Netscape Navigator, Opera, Safari;

  • Validate markup – перевірка коду поточного документа або всього сайту на помилки;

  • File Management – кнопка відкриває меню, що містить файлові команди мережевого обміну і контролю обігу;

  • Preview / Debug in Browser - дозволяє переглянути гіпертекстовий документ у вибраному браузері;

  • Refresh Design View – за цією командою всі зміни, зроблені в початковому тексті документа, переносяться в режим планування. При цьому виконується перевірка синтаксису та інтерпретація кодів. Коректні фрагменти відображаються на сторінці, помилкові позначаються жовтим кольором;

  • View Options – кнопка відкриває меню з командами, які управляють візуалізацією допоміжних елементів вікна документа;

  • Visual Aids – в це меню входять команди, які керують поданням кодів.

Друга панель, що має заголовок Properties(рис. 7), - це редактор властивостей, один з найважливіших і незамінних інструментів Dreamweaver. Редактор властивостей служить для завдання параметрів того чи іншого елемента Web-сторінки (фактично - значень атрибутів відповідного HTML-тега).

Рис.7 Панель Properties

На вкладці Налаштування (Рис.8) ви зможете налаштувати шрифти, якими буде відображатися текст вашої сторінки. У списку Font Settings виберіть шрифтової набір, який буде використаний для відображення ваших Web-сторінок. Тут все просто: якщо текст російський - вибирайте Cyrillic, якщо англійський - Western (Latinl).

Рис. 8 Налаштування

Цей розділ один з найважливіших. Досить часто, через неправильні настроювання саме тут і виникають проблеми. Зверніть увагу на пункт - Default Encoding в категорії New Document. Саме його потрібно ОБОВ'ЯЗКОВО налаштувати правильно. Якщо ви є користувачем Windows, то вибираємо кодування Кирилиця (Windows-1251). Якщо ви налаштуєте не так як потрібно DreamWeaver просто почне автоматично переганяти набраний вами текст в коди. Тобто ваш текст може виглядати ось так: "iieiue eca?".

Для визначення нового локального вузла потрібні наступні дії.

1. Виконайте команду Site> New Site. На екрані з'явиться діалогове вікно Site Definition.

2. Editing files, Частина 1. В першій строчці вписуємо назву сайту. У другій сходинці майбутній адресу вашого сайту. Тиснемо Next.

3. Editing files, Частина 2. Якщо ви не збираєтеся використовувати ColdFusion, ASP.NET, ASP, JSP або PHP, то залишаємо все як є і тиснемо Next.

4. Editing files, Частина 3. Тут вказуємо, де на вашому комп'ютері буде зберігається локальна версія сайту.

5. Sharing files, Частина 1. Вибираємо спосіб зв'язку з сервером (наприклад FTP), далі вписуємо адресу сервера (наприклад ftp.narod.ru, набір імені у вигляді ftp://ftp.narod.com або narod.ru буде вважатися помилкою), в рядках login і password вписуємо своє ім'я користувача та пароль (потрібно попередньо зареєструватися на www.narod.ru або на іншому хостингу).

6. Sharing files, Частина 2. Залишаємо, як є. Тиснемо далі.

7. Summary. Перевіряємо чи все правильно і тиснемо Done.

Створення карти сайту.

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

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