
- •Д. О. Булавін Інтернет-комунікації та web-дизайн
- •Передмова
- •Тематичний план курсу «Інтернет-комунікації та web-дизайн» Загальна схема та структура курсу
- •Види і форми контролю знань з курсу «Інтернет-комунікації та web-дизайн» для студентів денної форми навчання
- •Види і форми контролю знань з курсу «Інтернет-комунікації та web-дизайн» для студентів заочної форми навчання
- •Критерії оцінювання письмової екзаменаційної роботи
- •Правила переведення оцінок у систему ects
- •Зміст лекційних занять Модуль 1 Основи роботи в Інтернет. Інтернет-браузери. Інтернет в бізнесі.
- •Тема 1. Інтернет та його розвиток. Типи Інтернет-браузерів, їх переваги та недоліки. Основи роботи с поштовими службами
- •Тема 2. Використання Інтернету в бізнесі. Типи Інтернет-сайтів та їх можливості.
- •Модуль 2 Інтернет-сайти та їх типи. Розробка Інтернет-ресурсів.
- •Тема 3. Web-сторінки, гіперссилки, клієнти та сервери Інтернету
- •Тема 4. Типові системи розробки Інтернет-ресурсів. Середа Dreamweaver mx. Базові основи роботи з середою.
- •Тема 5. Створення Web-сторінки, структура сайту, робота зі стилями.
- •Тема 6. Робота з графічними зображеннями, графіка Macromedia Flash, мультимедиа.
- •Тема 7. Використання таблиць при розробці Інтернет-сторінок. Публікація web-сторінки
- •Приклади тестових питань
- •Питання для самоконтролю
- •Тема семінару 5 Створення стартової сторінки з гіперпосиланнями, поштою і текстом.
- •Теоретичні відомості виконання практичного семінару.
- •Питання для самоконтролю
- •Тема семінару 6 Створення всіх сторінок сайту, наповнення їх звичайними і змінними зображеннями.
- •Питання для самоконтролю
- •Методичні поради для виконання індивідуального навчально-дослідного завдання (індз) Загальні положення
- •Структура письмової роботи індз
- •Вимоги до змісту
- •Вимоги до оформлення
- •Оформлення списку використаних джерел
- •Питання до іспиту
- •Основна література:
- •Додаткова література:
- •Іноземна література:
- •Словник основних термінів
- •Булавін Дмитро Олексійович
- •61077, Харків, пл. Свободи, 4,
- •61077, М. Харків, пл. Свободи, 4.
Приклади тестових питань
Який протокол є загальновизнаним для обміну електронною поштою? «Питання першого типу – одна вірна відповідь з декількох»
а. TCP/IP;
b. SNMP;
c. SMTP;
d. CMIP.
Які з цих сфер належать до сфер електронної комерції? «Питання другого типу – декілька вірних відповідей з багатьох»
Електронний обмін капіталом;
Електронний маркетинг;
Електронна пошта;
Електронні гроші;
Електронне навчання.
Модуль 2
Інтернет-сайти та їх типи. Розробка Інтернет-ресурсів.
Тема семінару 4
Загальні відомості по роботі в середі Macromedia Dreamweaver MX. Створення мапи Інтернет-сторінки.
Мета семінару: знайомство з інтерфейсом Macromedia Dreamweaver MX, настройка программы и создание карты сайта
План
Ознайомитися з програмою, вивчити основні панелі інструментів.
Налаштувати зручний для себе програмний інтерфейс.
Створити Web-вузол.
Створити мапу Інтернет-сайту.
За результатами семінарів 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.
Створення карти сайту.
Мапа сайту – це повний каталог всіх розділів сайту, з коротким описом кожного розділу. Картою зручно користуватися для швидкого пошуку інформації, що цікавить і переходу по посиланнях.
Мапа сайту повинна містити: коротку анотацію до сайту, в якій будуть використані основні ключові слова текстові посилання на основні сторінки вузла (знову таки, насичені ключовими словами) стандартну навігаційну панель, де будуть інші посилання до всіх сторінок вузла.