Вятський Державний Гуманітарний Університет

Кафедра інформаційних технологій та ТСО

Курсова робота з інформатики

Тема: Візуальний HTML-редактор DreamWeaver. < p> Розробка Web-дизайну.

Виконав: Студент 3 курсу факультету інформатики

Лепешкін Антон Геннад'евіч

Проверила: Пінягіна Юлія В'ячеславівна

Кіров 2003

Зміст.

Зміст. 1

Введення. 2

1. Теорія Web-дизайну. 3

1.1 Поширення Internet 3
1.2. Концепція WWW 3
Створення Web-сторінок. 5

Вимоги до Web-сторінці. 5

Засоби створення Web-сторінок. 7

2. DreamWeaver - один з найбільш зручних HTML -редакторів. 9

Про DreamWeaver-е в цілому. 9
Функціональні можливості DreamWeaver. 11

Про робочу області Dreamweaver. 11

Основні об'єкти Web-сторінки. 15

Робота з текстом. 20

Настройки DreamWeaver. 22

Створення CSS. 26

2. Висновок. 32

Список літератури та сайтів: 33

Введення

Кожен вибирає свій інструмент для створення Web-сторінок. Це можебути MS FrontPage або Macromedia DreamWeaver, Allaire HomeSite або 1st Page
2000. А хтось користується простим текстовим редактором, наприклад Блокнотом
(Notepad).

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

Ми ж розглянемо візуальний HTML-редактор DreamWeaver. Цей програмнийпродукт розрахований на тих, хто погано, або майже не знає мову HTML, хоча вньому можна створювати сайти навіть не володіючи даними знаннями. Dreamweaverмістить все, що необхідно як для візуальної перегляду web-сторінок, такі для роботи з HTML-кодом. Інтуїтивний інтерфейс Dreamweaver настількипростий, що навіть починаючий дизайнер зможе швидко створити професійний
Web-сайт. Безпосередньо в Dreamweaver можна створювати анімації у форматі
Macromedia Flash, використовувати дані з Microsoft Office, легкоімпортувати rollover-графіком, меню і кнопки з Fireworks. Компанія
Macromedia вважається лідером з виробництва програм для створення веб -сайтів, а також законодавцем моди в цій області. Останнім часом вонапочала випускати версію за версією даного продукту, тим самим все більшеудосконалюючи його. DreamWeaver-3, -4, -6 і це ще не межа. Причому в кожнійнової версії додається все більше і більше функціональних можливостей,не по одній, і не на два, а мало не десятками. Багато розроблювачів Web -сайтів вважають DreamWeaver найбільш зручним HTML-редактором як дляпочатківців Web-дизайнерів, так і для досвідчених програмістів.

У цій роботі міститься також додаток, а самерозробка власну невеличку Web-сторінки за допомогою HTML-редактора
DreamWeaver.

Мета: Розглянути можливості візуального редактора DreamWeaver. Длядосягнення цієї мети були поставлені наступні завдання:

1 Познайомитися з теорією Web-дизайну.

2 Познайомитися безпосередньо з редактором DreamWeaver.

3 Розглянути основні вимоги, що пред'являються до Web-сторінки.

4 Розглянути засоби створення Web-сторінок, які передували ібули передумовами виникнення DreamWeaver.

Теорія Web-дизайну

1.1 Поширення Internet

Internet - це найбільша світова комп'ютерна мережа. Тепер Internetмає приблизно 150 мільйонів користувачів більш ніж в 50 країнах.
WWW доступний в основному через Internet; але кажучи WWW і Internet мимаємо не одне і те ж. WWW можна віднести до внутрішнього змісту,тобто це якийсь абстрактний мир знань, в той час як Internetє зовнішньою стороною глобальної мережі у вигляді величезної кількостікабелів і комп'ютерів.

1.2. Концепція WWW

Так що ж таке World Wide Web, або, як кажуть в просторіччі, WWW,the Web, або ще простіше - 3W? WWW - це розподіленаінформаційна система мультимедіа, заснована на гіпертексті. Давайтерозберемо це визначення по порядку.

Розподілена інформаційна система: інформація зберігається навеличезній безлічі так званих WWW-серверів (servers). Тобтокомп'ютерів, на яких встановлене спеціальне програмне забезпечення таякі об'єднані в мережу Internet. Користувачі, які мають доступ домережі, отримують цю інформацію за допомогою програм-клієнтів, програмперегляду WWW-документів. При цьому програма перегляду посилає покомп'ютерній мережі запит серверу, що зберігає файл з необхіднимдокументом. У відповідь на запит сервер висилає програмі перегляду цейнеобхідний файл або повідомлення про відмову, якщо файл по тих або іншихпричинах недоступний. Взаємодія клієнт-сервер відбувається запевними правилами, або, як кажуть інакше, протоколу. Протокол,прийнятий в WWW, називається HyperText Transfer Protocol, скорочено - HTTP.

Мультимедіа: інформація включає в себе не тільки текст, але і двох-ітривимірну графіку, відео та звук.

Гіпертекст: інформація в WWW представляється у вигляді документів, кожний зяких може містити як внутрішні перехресні посилання, так і посилання наінші документи, що зберігаються на тому ж самому або на будь-якому іншомусервер.

Такі посилання називають гіперпосиланнями або гіперзв'язками. На екранікомп'ютера у вікні програми перегляду посилання виглядають як виділені яким -небудь чином (наприклад, іншим кольором і/або підкресленням) дільницітексту або графіки. Вибираючи гіперпосилання, користувач програми переглядуможе швидко переміщатися від однієї частини документа до іншої, або ж відодного документа до іншого. При необхідності програма переглядуавтоматично зв'язується з відповідним сервером в мережі і запитуєдокумент, на який зроблене посилання. До речі, ідея гіпертекстовогопредставлення інформації повинна вже бути добре знайома користувачамрізних версій системи Microsoft Windows. Саме за цим принципомпобудована в Windows система підказок (Help), з тією лише різницею, щогіпертекстова система підказок Windows не є розподіленою.

Отже, Web-сторінка може містити стилізований і форматованийтекст, графіку і гіперзв'язки з різними ресурсами Internet. Щоб реалізувативсі ці можливості, була розроблена спеціальна мова, названий HyperText
Markup Language (HTML), тобто, Мова Розмітки Гіпертексту. Документ,написаний на HTML, являє собою текстовий файл, який міститьвласне текст, несучий інформацію читачеві, і прапори розмітки. Останніявляють собою певні послідовності символів, якіє інструкціями для програми перегляду; відповідно до цихінструкціями програма розташовує текст на екрані, включає в ньогомалюнки, що зберігаються в окремих графічних файлах, і формуєгіперзв'язки з іншими документами або ресурсами Internet. Таким чином,файл на мові HTML набуває вигляд WWW-документа тільки тоді, коли вінінтерпретується програмою перегляду.

Створення Web-сторінок

Вимоги до Web-сторінці

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

Необхідно пам'ятати !!!

. 5-7 пунктів меню - це межа для гарного сприйняття що міститься в меню інформації.

. що оптимальне використання не більше 30-40 кбайт графіки на сторінку.

. що дизайн першої сторінки хоч трохи, але повинен відрізнятись від всіх інших сторінок!

. що ті рядки краще не використовувати або використовувати, але вкрай рідко. Тому що від них тільки очі болять, але якщо в цьому є особлива необхідність, то не слід навантажувати рядок великою кількістю інформації !!!

. що в web-сторінках використовуються тільки формати JPG, JPEG та GIF.

. що користувач знаходиться в середині сервера - міг потрапити в будь-яку точку вашого сайту або сторінки.

. що необхідно розбивати велику кількість інформації!

. що іменувати, створені сторінки слід англійською мовою.

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

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

. що краще за все робити такі сторінки, які можна змінювати. Робіть сторінки, які доступні всім читачам незалежно від того, яким браузером, платформою або екраном вони вирішили або змушені користуватися.

. що, на першій сторінці сайту повинна знаходитися коротка інформація про зміст сайту, представлених матеріалах, авторів сайту.

Відвідувач, що випадково потрапив на сайт, не повинен гадати, що він може на ньому знайти. < p>. вкрай бажано, щоб графіка на сайті мала лише допоміжне значення (за винятком, звичайно, сайтів, присвячених образотворчого мистецтва та інших подібних тематик). Багато користувачів відключають відображення графіки в своїх браузерах для прискорення подорожей по Інтернету.

. Не використовуйте на сайті текст, набраний великими літерами.

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

. Розмір кожної сторінки сайту не повинен перевищувати межу в 80-100 кілобайт разом з графікою (оптимально - 40-50), за винятком сторінок з великою кількістю інформації - електронних книг, наприклад.

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

Засоби створення Web-сторінок

Мова HTML

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

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

Все в мові здійснюється за допомогою тегів, тобто команд, якіукладені в дужки такого вигляду: "<" і ">". Наприклад, Енциклопедія
WEB 2000 Ver. 1.02.

Мова HTML існує в декількох варіантах і продовжує розвиватися,але конструкції HTML швидше за все будуть використовуватися і надалі.
Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTMLі розширюючи його наскільки це можливо, ми маємо можливість створювати Web -сторінки, які можуть бути переглянуті багатьма браузерами Web, якзараз, так і в майбутньому. Це не виключає можливості використання іншихметодів, наприклад, метод розширених можливостей, що надається
Netscape Navigator, Internet Explorer або деякими іншими програмами.

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

HTML був ратифікований World Wide Web Consortium. Він підтримуєтьсядекількома широко поширеними броузерами, і, можливо, станеосновою майже всього програмного забезпечення, яке має відношення до
Web.

HTML-редактор FrontPage

Як результат розвитку мови HTML з'являються HTML-редактори. Одним зперших редакторів є FrontPage. Редактор входить в програмний пакет
MS Office. Цей програмний продукт спрощує роботу з HTML-мовою. Основнимнедоліком MS FrontPage є те, що він генерує дуже великий HTML -код (занадто багато зайвого), тому сторінки виходять великими, щопозначається на швидкості завантаження. Більш того, при створенні Web-сторінок вцьому редакторі бачиш одне, а у вікні браузера - зовсім інше (особливо цестосується Netscape Navigator). Тому для створення якісних Web-сторінокрекомендується використовувати пакет, який буде розглянуто нижче.

HTML-редактор DreamWeaver

Одна з останніх версій HTML-редактора компанії Macromedia-
DreamWeaver 3, який відноситься до категорії WYSIWYG-редакторів (т.е.What
You See Is What You Get), і цей пакет має дуже багато переваг:зручний інтерфейс, настройка функцій, підтримка великих проектів та багато чогоінше. Для роботи в цій програмі не потрібно знати досконально HTML (у цьомуі полягає перевага технології WYSIWYG - що бачу, то і отримую).

Але DreamWeaver на декілька кроків випереджає інші редактори,використовують технологію WYSIWYG, в першу чергу тим, що генерує дужечистий HTML-код. DreamWeaver дозволяє позбутися від однотипної роботи пристворення сторінок (наприклад, верстка тексту) за допомогою використання опції
"запис послідовності команд" ви можете записувати послідовністьвироблених вами команд, потім натискаєте, наприклад, CTRL + P, і DreamWeaverвідтворює всі в тій же послідовності.

Глобальне відміну DreamWeaver від FrontPage у філософії. FrontPageвважає, що користувач абсолютно не здатний породити код HTMLсамостійно, тому програма повинна зробити все за нього. DreamWeaverвважає, що користувач все може зробити сам, а програма повиннастворити максимальні умови для творчості.

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

DreamWeaver - один з найбільш зручних HTML-редакторів

Про DreamWeaver-е в цілому

Macromedia DreamWeaver - професійний редактор HTML для візуальногостворення і управління сайтами різної складності та сторінками мережі
Internet. Чи подобається вам вручну писати код HTML або ви віддаєте перевагупрацювати у візуальній середовищі, Dreamweaver полегшує цю роботу ізабезпечує корисними інструментами і засобами, щоб зробити своївласні проекти неперевершеними.
Dreamweaver включає в себе багато інструментів і засобів для редагуванняі створення професійного сайту: HTML, CSS, JavaScript, редактори коду
(перегляд коду та інспектор коду), що дозволяє вам, редагуватирізні текстові документи, які підтримуються в Dreamweaver. Такожви можете набудувати Dreamweaver, щоб він наводив лад іпереформатував HTML, як ви цього хочете.
Можливість візуального редагування в Dreamweaver також дозволяєшвидко створювати або змінювати дизайн проекту без написання коду. Dreamweaverвідноситься до так званих "візуальним" редакторам, тобто ви відразу можетебачити на екрані (хоча б приблизно) результат своєї роботи. При цьомувін надає повний доступ до джерела коду і не вставляє в ньогонічого зайвого, як це робить, наприклад, FrontPage. Таким чином, можнастворювати свою сторінку і паралельно вивчати HTML, заглядаючи в джерело.
Можна на живому прикладі переконатися, що HTML - це просто. Простота зверненняз редактором DreamWeaver полягає в тому, що можливо розглянути всіцентралізовані елементи і перетягнути їх із зручної панелі безпосередньов документ.
DreamWeaver повністю настроюється. Можна використовувати Dreamweaver, щобстворювати свої власні об'єкти і команди, змінювати "гарячі" клавіші тарозширювати можливості DreamWeaver новими властивостями, інспекторами властивостей іновими звітами про сайт.

Функціональні можливості DreamWeaver

Про робочу області Dreamweaver

Робоча область Dreamweaver настроюється під різні стилі роботи тарівні знань. Ось деякі найбільш використовувані компоненти:

- Вікно документа відображає поточний документ, який ви створюєте іредагуєте.

- навігатор панелей внизу вікна Document містить кнопки для відкриття ізакриття найбільш часто використовуваних інспекторів та панелей. Можнавстановити, які значки з'являються в навігаторі панелей у налаштуванніпанелей.

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

- контекстне меню дозволяє швидко звертатися до корисних командам,що мають відношення до поточного вибору чи області. Щоб відобразитиконтекстне меню, необхідно натиснути правою кнопкою мишки на елементі ввікні.

- панель об'єктів містить кнопки для створення і вставки різних?? іповоб'єктів, зображень, таблиць, шарів, фреймів. Можна також перемикатиміж стандартним різними видами подання документів.

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

- DreamWeaver забезпечує використання багатьох інших інспекторів, панелейі вікон, які не показані тут, типу панелі History та інспектора Коду.
Щоб відкрити вікна Dreamweaver, інспектори і панелі, використовують меню
Window. Відмітка поруч з елементом в меню Window вказує, що данийелемент в даний час відкрито (хоча він може бути прихований позаду іншихвікон). Щоб відобразити елемент, який в даний час не відкрито, потрібновибрати назву елемента в меню. Якщо панель або інспектор відзначений, але нез'являється, вибирають Window> Arrange Panels.
При цьому в DreamWeaver розрізняють два види вікон: вікно сайту і вікнодокумента.
Вікно сайту призначений для роботи з сайтом в цілому. Воно викликаєтьсяклавішею F8 і дозволяє перемикатися між сайтами, створювати нові папкиі файли, публікувати сайт в мережі і керувати ним на сервері.
Вікно документа призначене для безпосереднього редагування сторінки.
Воно має три режими роботи: код, код і дизайн, дизайн, причому другий --дуже зручний для вивчення HTML.
Панель інструментів вікна документа містить:

- 3 кнопки перемикання режимів вікна;

- поле введення заголовка сторінки;

- File Management - для публікації сайту в Мережі;

- кнопку перегляду в зовнішньому браузері. Зручніше це робити клавішею F12;

- 4 кнопки управління редактором: оновлення сторінки, опис тега,установка закладок, настройка вікна. Найкраще включати режим Word Wrap
(перенесення слів) для HTML-коду.
Рядок стану вікна документа містить:

- кнопки для виділення тегів - дуже зручні;

- визначити розмір області перегляду;

- розмір документа і час його завантаження на швидкості, визначеної внастройках (Edit - Preferences - Status Bar);

- панель швидкого доступу до: вікна сайту, менеджера об'єктів (Assets -
Активи), двох вікон стилів, вікна поведінки об'єктів (Behaviors), віконісторії команд та інспектора коду.
Плаваючі панелі призначені для керування різними елементамисторінки. Одинадцять панелей згруповані в 5 блоків. Панелі можна швидкоприховувати/викликати всі відразу клавішею F4 або вибірково через меню Windows.
Панель властивостей (Properties) розміщується в нижній частині екрана, викликаєтьсяпоєднанням клавіш Ctrl + F3 і призначена для настройки всіх параметрівоб'єктів, вибрані у вікні редактора. Кнопка в правому нижньому кутку панелідозволяє зменшити її розміри.
Вікно сайту викликається клавішею F8. Схема сайту відкривається поєднаннямклавіш Alt + F8. На відміну від FrontPage, не можна перетягуванням змінюватиструктуру сайту, проте, створювати посилання можна, перетягуючи значок "Point
To File "з вікна властивостей до потрібного файлу у вікні сайту (прийом, придуманийдля власників 21-дюймових моніторів). Можна виконувати і зворотну діюдля створення посилання - перетягувати файли з вікна сайту в поле введення посиланняу вікні властивостей при виділеному об'єкті у вікні редактора.

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

File - Revert - дозволяє видалити всі зроблені зміни і повернутися доостанньому записаного варіанту документа;

File - Check Links - пошук непрацюючих посилань;

File - Destination Notes - запис нотаток для сайту або сторінки (простіше церобити двічі клацнувши по відповідній колонці у вікні сайту);

Edit - Preferences - налаштування (русифікація, перегляд позначень тегів іін);

View - Design - View on Top - переміщує вікно дизайну вгору;

View - Visual Aids - вкл./викл. "помічників": меж об'єктів, невидимихелементів і ін

View - Code View Options - включення переносу слів, підсвічування неправильнихпосилань, підсвічування коду для режиму HTML);

View - Rulers і Grid - висновок лінійок та сітки;

Insert - вставка об'єктів і різних HTML-тегів;

Modify - Page Properties - висновок вікна властивостей сторінки, в т.ч. фон іфоновий малюнок, кольори посилань та ін;

Modify - Selection Properties - висновок вікна властивостей виділеного об'єкта;

Modify - Quick Tag Editor - швидке редагування тега в окремому вікні;

Modify - Make Link - створення гіперпосилання для об'єкта;

Modify - Library - додавання об'єкта в бібліотеку для подальшоговикористання;

Text - форматування тексту;

Commands - Clean Up HTML - очищає документ від "зайвих", з точки зору
DreamWeaver, тегів;

Commands - Clean Up Word HTML - очищає документ, створений у Word-е від
"зайвого";

Commands - Optimize Image In Fire Works - оптимізація графіки (привстановленому FireWorks);

Commands - Set Color Scheme - зміна схеми кольорів сайту.

Основні об'єкти Web-сторінки

Основні об'єкти, які можна вставити на власну Web -сторінкупредставлені на панелі об'єктів.
Панель об'єктів розташована в лівій частині екрана, викликається поєднаннямклавіш Ctrl + F2 і містить палітри:

- Common - загальні об'єкти (малюнок, навігаційна панель, лінія, таблиця,дата, поштова посилання та ін);

- Charset - символи;

- Forms - форми для заповнення на сторінках;

- Frames-створення фреймової структури ;

- Head - опису і властивості сторінки;

- Invisibles - невидимі об'єкти (якір, коментар);

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

. Image (картинка) - вставляє на сторінку графічний елемент.

. rollover image - а тут вказується файл картинки, яка буде з'являтися при наведенні на наш об'єкт мишки (підпункт Preload

Rollover image рекомендується залишати включеним, так як можлива поява при наведення мишки на подібний об'єкт порожній картинки) В основному, подібні об'єкти використовуються для різних навігаційних елементів на сайті. При вставці його з'являється вікно діалогу. Ми бачимо чотири основні поля. Зверху-вниз це:

V image name - назва зображення (використовується java-скриптом, для поділу різних об'єктів даного типу на сторінці). Ніколи не робіть назви однаковими!

V original image - тут ми вказуємо розташування файлу з картинкою "по-замовчуванню", тобто тієї картинкою яка буде відображатися на початку.

V rollover image - а тут вказується файл картинки, яка буде з'являтися при наведенні на наш об'єкт мишки.

V go to url - тут потрібно написати посилання, по якому піде користувач при натисканні на наш об'єкт.

. Table (таблиця) - вставляє на сторінку таблицю. У кожній клітинці таблиці може знаходитися як текст, так і малюнок. Таблиці у побудові сайтів використовуються не тільки як у Word-е або Excel-е, а і як модульні сітки (власне такий собі каркас, на якому як на павутині тримаються всі об'єкти сторінки).

. Tabular data (табличні дані) - вставляє готову таблицю з готовими даними. Об'єкт Tabular Data з'явився тільки в третій версії і являє собою дуже зручний інтерфейс для вставки зовнішніх табличних даних у

Dreamweaver. Наприклад прайсів з Excel.

. Horizontal Rule (лінійка) - вставляє декоративний елемент - лінійку

(зазвичай використовується як розділювач абзаців). Через контекстне меню можна задавати параметри цього елемента.

. Navifgation Bar - вставляє навігаційну панель складається з декількох кнопок

. Draw Layer (намалювати шар) - вставляє на сторінку шар (як у

PhotoShop)

. Line Break (варіант переносу) - вставляє на сторінку (у тексті) варіант переносу

. E-mail Link (посилання на електронну пошту) - вставляє на сторінку посилання на електронну адресу. Для вставки подібної посилання за допомогою

HTML досить написати:e-mail.
Але можна цього й не знати, а просто вказати текст посилання та адресу e-mail.
Що набагато простіше.

. Date (дата) - вставка в документ поточної дати (можна з оновлення). Вставлення поточної дати - дуже зручна річ. У діалоговому вікні достатньо вказати формат дати, часу і, якщо необхідно, вказати пункт Update Automatically on Save (автоматично оновлювати при збереженні).

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

. ShockWave - вставляє Shockwave-анімацію

. Generator - вставляє заготовку Generator

. FireWorks - вставляє об'єкт FireWorks

. Applet - вставляє ява-аплет

. ActiveX - вставляє ActiveX

. Plugin - вставляє об'єкт, що програється плагін

. SSI - вставляє інклюд (підключається зовнішній HTML файл).
Палітра Invisibles возволяет додавати у вихідний код сторінки:

. закладки

. коментарі

. ява-скрипти

. нерозривні прогалини

Палітра head допомагає нам додавати різні опису та властивостісторінки, такі як:

. мета-теги

. ключові слова

. опису сторінки

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

. вказувати основне посилання (посилання за замовчуванням)

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

Палітра Frames (фрейми) допоможе зробити одним натисканням на кнопку фреймової складну структуру.
Фрейм - це спосіб створення всередині web-сторінки вікна для відображення іншийweb-сторінки, реалізується за допомогою тега. Якщо сторінка завантаженау фреймі, то вона може замінюватися на іншу без заміни містить фреймсторінки. Ця можливість - єдина гідність фреймів. Недоліківж - маса. По-перше, сторінку, завантажену у фреймі, не можна так простозберегти на локальному диску. Доводиться вдаватися до хитрощів. По-друге,на web-сторінку у фреймі не можна так просто поставити закладку, - вона будеставитися на головну сторінку сайту. Сторінку у фреймі не можнаперезавантажити кнопкою "Обновити" - доводиться використовувати однойменнийпункт з меню правої кнопки миші.
Зазвичай фрейми використовуються для створення меню навігації, але для цієї метиіснує безліч інших засобів, позбавлених перерахованих вищенедоліків.

Палітра forms (форми) служить для візуального створення форм (того, що мидосить часто заповнюємо на різних сайтах).
Вона складається з об'єктів:

. form - сама форма

. text field - текстове поле

. button - кнопка

. checkbox - чекбокс

. radio button - радіобаттон, забезпечує вибір одного з варіантів

. list/menu - робить список, що випадає або меню

. filefield - форма для завантаження файлів

. imagefield - поле картинки

. hidden filed - прихована поле

. jump menu - для переходу по кліку на іншу сторінку

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

Робота з текстом

У самих нових версіях DreamWeaver все більше удосконалюється текстовийредактор. Так наприклад в DreamWeaver-4 особливу увагу було приділено новомувбудованому текстового редактора. Він набагато більш функціональний, ніж упопередніх версіях Dreamweaver, і дозволяє працювати з текстом на рівнінепоганого текстового процесора. Автовирівнювання, швидка вставка тегів іфункцій JavaScript з випадаючого меню - ось лише деякі з йогоможливостей. Тепер для роботи з ним є навіть спеціальний режим Code
View, в якому DreamWeaver перетворюється на звичайний невізуальних HTMLредактор. А також режим Split View, у якому основне вікно розбивається надві панелі: Code View і Design View.
DreamWeaver має широкий спектр можливостей щодо форматування тексту.
Це меню визначає формат абзацу (заголовок 1, заголовок 2, параграф іт.д.):

Це меню визначає вид шрифту тексту. Слід звернути увагу, щовикористовується визначення групи шрифтів, а не якогось одного найменування
- Якщо перший із зазначених шрифтів відсутній на комп'ютері кінцевогокористувача, браузер автоматично підставить другу, а якщо немає і другого
- То схожий (замість Arial - будь-sans-serif, наприклад), при цьому загальнийдизайн сторінки не втратиться. Якщо ж вказувати конкретний шрифт, то прийого відсутності браузер застосує шрифт, що використовується за замовчуванням (наприклад,замість Arial - Times New Roman), і шрифт sans-зіпсує ретельнопродуманий дизайн.
Це меню визначає розмір шрифту. Розмір шрифту визначається ввідносних одиницях - при даному способі форматування розмір шрифту ввікні браузера кінцевого користувача буде залежати від настройок цьогосамого користувача (обрані в меню браузера "Вид" розміри шрифту --великий, середній і т.д.). Далі йде кнопка вибору кольору шрифту
(функціонує так само, як описані вище кнопки вибору кольору елементів),кнопки "bold" (жирний) і "italic" (курсив), кнопки вирівнювання.
Автоматичне вирівнювання по ширині, на жаль, не підтримується, алеякщо у вихідному файлі для поточного абзацу прописати align = "justify", то
DreamWeaver легко погодиться і буде надавати всім наступним абзаців
(після кожного натискання Enter) аналогічне вирівнювання.
У нижній частині цієї панелі доступні також кнопки вибору посилання (можнавиділити текст, який буде гіперпосиланням, і натиснути на папочкупоряд з полем "Link" для огляду; або просто ввести адресу у це поле),вибору вікна, в якому буде відкриватися посилання (target, за відсутностіпосилання кнопка недоступна), маркованого і нумерованого списків,вертикального і горизонтального відступів. Кнопка з зображенням олівцявикликає Quick Tag Editor (якщо знадобилося позначити даний абзац якцитату - натискаєте цю кнопку і з випав списку вибираєте blockquote, ітощо) Взагалі-то ця панель є панеллю властивостей будь-якого об'єкта, і привикористанні таблиці на ній з'являються додаткові кнопки властивостейтаблиці, при виділенні малюнка - додаткові кнопки властивостей малюнка, тат.д.

Настройки DreamWeaver

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

Так виглядає перша закладка в настройках. DreamWeaver має дуже велику кількість різних налаштувань, настільки велике, що їх довелося розбити на кілька категорій (колонка ліворуч). Але ми торкнемося ті, які дійсно важливі в роботі, тому такі пункти як HTML

Colors або Highlightning ми розглядати не будемо.

На першій закладці необхідно налаштувати тільки 2 речі:
1. Options: Add Extension when saving - якщо робота здійснюється тільки з
. html (. htm) файлів або тільки. shtml файлами, або ще якимись (але тільки зодним типом), то найкраще вказати потрібне розширення. Тоді призбереженні DreamWeaver сам буде додавати потрібне розширення.
2. Збільшити кількість кроків палітри History, наприклад до 100 (Maximum
Number of History Steps). Тоді буде менше шансів, що, допустив помилку,неможливо буде її виправити.
Наступна закладка допоможе налаштувати те, як DreamWeaver працює з CSS (оте, що це таке і як створювати CSS буде вказано нижче). Різницяполягає в тому, що - деякі параметри CSS допускають так звану
"скорочену" запис. Якщо необхідно заощадити місце і кращевикористовувати подібний тип написання CSS, то досить включити всі пунктина цій закладці.
Наступна настройка допоможе настроїти зовнішні редактори. Дуже зручнаріч. Наприклад можна налаштувати окремі редактори для HTML (той же
HomeSite 4.5), GIF, JPG - Adobe ImageReady. І тепер можна відредагуватиодним лише натисканням на потрібну кнопку. Зручно. Слід звернути увагу напункти Reload Modified Files і Save on Launch - краще залишити їх як є
- В положенні Prompt. Тоді кожен раз комп'ютер буде питати зберігатиЧи файл перед відкриттям у новому редакторі і перевантажувати чи файл після йоговідпрацювання в зовнішньому редакторі.
Закладка Floating Pallettes допоможе налаштувати зовнішній вигляд DreamWeaver.
Можна вказати, які з палітр будуть завжди "висіти" над екраном документа,які будуть відображатися в "навігаторі панелей".

Цей розділ одна з дуже важливих. Досить часто, через неправильнінастройок саме тут і виникають проблеми. Слід звернути увагу насамий верхній пункт - Default Encoding. Саме його потрібно ОБОВ'ЯЗКОВОналаштувати правильно. Так, одним з найбільш оптимальних є вибіркодування Windows-1251. Якщо налаштувати не так як потрібно DreamWeaver простопочне автоматично переганяти набраний текст в коди. Тобто текст можевиглядати ось так: "iieiue eca? ao".
Крім того на цій закладці можна налаштувати основні шрифти, якими будевідображатися текст і розміри цих шрифтів.
Одна з дуже важливих закладок - це HTML Format (формат HTML). Тежважливий розділ. Тут настроюється те, як буде виглядати вихідний
HTML код після його збереження DreamWeaver. В основному цей розділналаштовує "зовнішній" вигляд HTML - які остступи використовувати, якогорозміру, після якої колонки обривати рядок. Але є і більш важливіпункти, наприклад пункт Line Breaks налаштовує яким символом повиненпозначатися переклад рядка.
Пункт HTML Rewriting теж важливий. Якщо не правильно налаштувати його, можнаналамати чимало дров. Справа в тому, що DreamWeaver забезпечений парсерів
(перевіреночним модулем) який при відкритті файлу перевіряє оригінальний HTMLкод і робить висновки про помилки в ньому містяться. Іноді, то що
DreamWeaver вважає помилкою такий зовсім не є. Тому краще пункти
Rewrite HTML: Fix Invalidly Nested and Enclosed Tags і Remove Extra Closing
Tags краще прибрати від гріха подалі. Правильно налаштований DreamWeaver всеодно буде відображати "погані" теги жовтим кольором. І при бажанні можна їхвидалити вручну.
Пункт Layers допомагає налаштувати параметри шарів, які створюються в
DreamWeaver. Найкраще включити галочку Netscape 4 Compatibility підуникнути проблем з відображенням у Netscape. Багато Web-дизайнери нерекомендують користуватися шарами взагалі, тому що поки вони доситьнеоднозначно відображаються в різних версіях браузерів.
Налаштування FTP. Без вірної налаштування цього пункту просто неможливокопіювати файли на свій веб-сервер. Практично всі пункти можна залишитияк є, тільки слід звернути увагу на пункт Firewall Host - тутпотрібно вказати адресу свого сервера. Інакше нічого не вийде.

Створення CSS

CSS або Cascading Style Sheets. Що в перекладі означає "каскадні стильовітаблиці ". Такий наближений переклад вказує на головну особливість CSS --каскадне спадкування властивостей об'єкта.
Зліва стандартний діалог, що виникає при створенні нового стилю.
Можливо вибрати один з трьох варіантів - створити новий стиль,перепризначити властивості стандартного HTML-тега та будуть використані спеціальнірозширення CSS.
Після вказівки імені стилю (або вибору стандартного стилю дляперепризначення) ми опиняємося в "настройках" стилю. Робиться тут вседосить просто, за змінами ми можемо спостерігати в режимі realtime.
На першій закладці ми визначаємо, як буде виглядати окрема букванашого тексту:

1. Зазначаємо шрифт, яким буде писатися текст. Ми можемо або вказати конкретний шрифт, хоч FreeSet, але немає шансів, що він є у користувача на комп'ютері (а якщо його немає - відображатися сторінка буде не так). Так що рекомендується користуватися конструкціями, пропонованими самим DreamWeaver - наприклад, Verdana, Arial, Helvetica, sans-serif. У цьому випадку спочатку буде шукатися шрифт Verdana - якщо такого не знайшли, тоді Arial, якщо його немає? Тоді Helvetica, ну а якщо і її немає - тоді будь-який шрифт без зарубок - гротеск.

2. Зазначаємо розмір шрифту - у порівнянні з можливостями HTML тут все просто. Розмір можна вказати практично в чому завгодно, починаючи від% і закінчуючи пікселями і пунктами.

3. Тут настроюється ступінь "ваги" букви або, його товщина. Варіантів теж чимало.

4. Стиль написання - похилий (італлік), стандартний (normal)

5. Варіації написання - наприклад, весь текст набраний тільки малими або тільки великими літерами.

6. Висота базової лінії шрифту в пунктах, поінта або будь-яких інших величинах.

7. Якими літерами ми користуємося - великими, маленькими або стандартно і тим і іншим.

8. Різний декор - підкреслення, миготіння та інше.

9. Колір тексту.
На даній закладці виробляються налаштування фону. Фона всієї сторінки аботільки заданого абзацу тексту - це залежить від того, як вирішили створюватистиль.

1. Колір фону (вибір на