Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
Не вказано
Факультет:
Не вказано
Кафедра:
Електронні прилади
Інформація про роботу
Рік:
2010
Тип роботи:
Інші
Предмет:
Інші
Група:
ЕПП – 11
Частина тексту файла (без зображень, графіків і формул):
Міністерство освіти та науки України
Національний університет „Львівська політехніка ”
кафедра “Електронні прилади”
/
«Організація роботи в середовищі пакету Dreamweaver»
DreamWeaver – один з найбільш зручних HTML-редакторов
Macromedia DreamWeaver - професійний редактор HTML для візуального створення і управління сайтами різної складності і сторінками мережі Internet. Чи подобається вам уручну писати код HTML або ви вважаєте за краще працювати у візуальному середовищі, Dreamweaver полегшує цю роботу і забезпечує корисними інструментами і засобами, щоб зробити свої власні проекти неперевершеними.
Dreamweaver включає багато інструментів і засобів для редагування і створення професійного сайту: HTML, CSS, JavaScript, редактори коди (проглядання коди і інспектор коди), що дозволяє вам, редагувати різні текстові документи, які підтримуються в Dreamweaver. Також ви можете набудувати Dreamweaver, щоб він наводив лад і переформатував HTML, як ви цього хочете.
Можливість візуального редагування в Dreamweaver також дозволяє швидко створювати або міняти дизайн проекту без написання коди. Dreamweaver відноситься до так званих "візуальних" редакторів, тобто ви відразу можете бачити на екрані (хоч би приблизно) результат своєї роботи. При цьому він надає повний доступ до джерела коди і не вставляє в нього нічого зайвого, як це робить, наприклад, FrontPage. Таким чином, можна створювати свою сторіночку і паралельно вивчати HTML, заглядаючи в джерело. Можна на живому прикладі переконатися, що HTML - це просто. Простота поводження з редактором 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 рекомендується залишати включеним, оскільки можлива поява при наведення мишки на подібний об'єкт порожньої картинки) В основному, подібні об'єкти використовуються для різних навигационых елементів на сайті. При вставці його з'являється вікно діалогу. Ми бачимо чотири основні поля. Зверху-вниз це:
image name - назва картинки (використовується java-скриптом, для розділення різних об'єктів даного типу на сторіночці). Ніколи не робіть назви однаковими!
original image - тут ми указуємо розташування файлу з картинкою "по-умолчанию", тобто тією картинкою яка відображатиметься на початку.
rollover image - а тут указується файл картинки, яка з'являтиметься при наведенні на наш об'єкт мишки.
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 досить написати:
<A HREF="mailto:dab512@mail.ru">e-mail</A>.
Але можна цього і не знати, а просто вказати текст посилання і адресу 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-страницы, реализуется с помощью тэга <frame>. Если страница загружена во фрейм, то она может заменяться на другую без замены содержащей фрейм страницы. Эта возможность - единственное достоинство фреймов. Недостатков же - масса. Во-первых, страницу, загруженную во фрейм, нельзя так просто сохранить на локальном диске. Приходится прибегать к ухищрениям. Во-вторых, на 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), и шрифт с засечками испортит тщательно продуманный дизайн.
Это меню определяет размер шрифта. Размер шрифта определяется в относительных единицах - при данном способе форматирования размер шрифта в окне браузера конечного пользователя будет зависеть от настроек этого самого пользователя (выбираемые в меню браузера "Вид" размеры шрифта - крупный, средний и т.д.). Дальше идет кнопка выбора цвета шрифта (функционирует так же, как описанные выше кнопки выбора цвета элементов), кнопки "bold" (жирный) и "italic" (наклонный), кнопки выравнивания. Автоматическое выравнивание по ширине, к сожалению, не поддерживается, но если в исходном файле для текущего абзаца прописать align="justify", то DreamWeaver легко согласится и будет придавать всем последующим абзацам (после каждого нажатия Enter) аналогичное выравнивание.
У нижньому рядку цієї панелі доступні також кнопки вибору посилання (можна виділити текст, який буде гіперпосиланням, і натиснути на течку поряд з полем "Link" для огляду; або просто ввести адресу в це поле), вибору вікна, в якому відкриватиметься посилання (target, за відсутності посилання кнопка недоступна), маркірованого і нумерованого списків, вертикального і горизонтального відступів. Кнопка із зображенням олівця викликає Quick Tag Editor (якщо знадобилося позначити даний абзац як цитату - натискаєте цю кнопку і з випавшого списку вибираєте blockquote, і тому подібне) Взагалі-то ця панель є панеллю властивостей будь-якого об'єкту, і при використанні таблиці на ній з'являються додаткові кнопки властивостей таблиці, при виділенні малюнка - додаткові кнопки властивостей малюнка, і так далі
Приклад створення Веб-документу в середовищі Dreamweaver
Відкрити пакет Macromedia Dreamweaver
/
Вибрати опцію Create New -HTML та зайти у робоче середовище пакету
/
У рядку МЕНЮ можна вибрати
Опцію CODE (робота в режимі HTML –коду) ,
Опцію DESIGN (робота в режимі перегляду документа),
Опцію SPLIT( на екран виводяться обидва вікна).
/
Вигляд робочого вікна в режимі CODE
/ Вигляд робочого вікна в режимі DESIGN
/
Вигляд робочого вікна в режимі SPLIT
4.Для вставки тегів у ВЕБ-документ можна використовувати опцію Insert – Tag-HTMLTags та вибрати потрібні теги зі списку тегів
/
Для налаштування параметрів сторінки потрібно правою кнопкою мишки відкрити меню Page Properties та вибрати тип, розмір, колір шрифту, задати відступи, колір фону та ін.
/
Для вставки у ВЕБ-документ таблиці потрібно вибрати опцію Insert - Table та вибрати потрібні параметри з контекстного меню (кількість рядків та колонок, назву таблиці та ін.).
Пуста таблиця буде вставлена у ВЕБ-документ (вікно Design), а його HTML-код буде відображений у вікні коду (Code). Розміри таблиці можна змінювати безпосередньо у ВЕБ-документі, після чого можна заповнити поля таблиці. Всі зміни коду автоматично відображаються у вікні коду.
/
Вставка таблиці у ВЕБ- документ ( Опція Insert - Table )-вибір параметрів.
/
Вставка таблиці у ВЕБ- документ ( Опція Insert - Table )-шаблон
/
Вставка таблиці у ВЕБ- документ ( Опція Insert - Table ) - заповнення таблиці
7. Аналогічно можна вставляти ФОРМИ для організації діалогу на ВЕБ-сторінці ( команда Insert – Form)
/
Вставка форми у вигляді текстового поля Form=Text area
/
Вставка форми типу Checkbox
Для організації посилань призначена команда Insert- Hiperlink
/
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора