ТЕМА 7: Използване на Image Viewer. Вграждане на QuickTime филми

a) същност - Image Viewer създава интерфейс за разглеждане на слайдове, който можете да използвате за представяне на серия от изображения. Този интерактивен презентационен формат има възможност за добавяне на надиалогов прозорец иси и хипервръзки към всяко от изображенията в серията.

б) създаване

1) отварете файла, в който ще вмъквате

2) лента Insert, категория Flash Elements, бутон Image Viewer

3) отваря се диалогов прозорец Save Flash Element - в поле File Name – въвеждате име на файла с разширение .SWF

Ако новият файл не се покаже веднага в панела Files, натиснете бутон Refresh, за да актуализирате списъка. Image Viewer се показва в прозореца Document във вид на голямо сиво запазено място, в центъра на което стои иконата на Flash.

4) панел Properties - бутон Play - Image Viewer се появява в прозореца Document, с подразбиращите се настройки. В горната му част е разположена контролна лента, съдържаща празна област за заглавието вляво. Има текстово поле за номера на текущото изображение. Може да въведете и число в него, като по този начин се преминава директно на съответната картина. Има и 3 бутона: Back, Play/Stop, Forward, под контролната лента се намира областта за изображението.

в) промяна на настройките на Image Viewer

Извършват се в панела Tag Inspector (в заглавния ред се изписва Flash element), който се отваря автоматично при вмъкването на Image Viewer:

- frameColor – цвят на рамката, ограждаща Image Viewer

- frameShow – Yes – за да са достъпни бутоните на менюто

- frameThickness – дебелина на рамката

- bgColor – фонов цвят на Image Viewer

- imageURLs – избор на изображения, които ще съдържа Image Viewer. Използва се и за местоположението им. 1) бутон Edit Array Values

2) отваря се диалогов прозорец Edit ‘imageURLs’ Array

3) кликате под Value и след това върху иконата-папка

4) отваря се диалогов прозорец Select File – избирате файла. Стойностите, които представляват пътищата до изображенията, са поместени в апострофи – те се включват задължително.

Ако диалогов прозорец Edit ‘imageURLs’ Array съдържа изображения в списъка Value при първото му отваряне, трябва да ги изтриете, преди да добавите изображения като натисните бутон (–)

5) добавяне на нов елемент към списъка с изображения – бутон (+)

- imageCaption – бутон Edit Array Values – поставяте надиалогов прозорец иси на изображенията, които трябва да са в апострофи. Те трябва да бъдат в същия ред, в който са изображенията. В противен случай, може да не отговарят точно на съответните им изображения.

- captionColor – цвят на надиалогов прозорец исите

- captionFont – шрифт на надиалогов прозорец исите

- captionSize – размер на надиалогов прозорец исите

- title – заглавие на Image Viewer

- titlecolor, titlefont, titlesize – цвят, шрифт и размер на заглавието

- transitionsType – ефект на преминаване между отделните изображения

- imageLinks – за добавяне, промяна и отстраняване на хипервръзки, асоциирани с изображенията. бутон Edit Array Values – отваря се диалогов прозорец Edit ‘imageLinks’ Array. Всеки URL адрес трябва да бъде заграден в апострофи. Хипервръзките трябва да са добавени в последователността на вмъкване на изображенията, така че да им съответстват.

- imageLinkTarget – определя мястото на отваряне на хипервръзките.

г) промяна на размера на Image Viewer - панел Properties

а) същност - QuickTime е популярен, широко използван формат за видеоклипове в Интернет. Филмите на QuickTime могат да бъдат типични видеоклипове или да съдържат интерактивни елементи, включително Flash, както и интерактивни QTVR (QuickTime Virtual Reality) филми с панорамни, 360-градусови картини.

б) вграждане

1) лента Insert, категория Common, меню Media, Plugin – Dreamweaver третира филмите на QuickTime като плъгин-модули

2) отваря се диалогов прозорец Select File – избирате плъгин-модула. Той се вгражда в страницата с помощта на тага embed, с подразбиращ се размер 32х32 пиксела и се появява в прозореца Document като сив на цвят квадрат с централно разположена характерна икона. Стандатрните размери на малките филмчета на QuickTime създадени за Интернет са W – 320, H – 240 пиксела. Контролната лента на QuickTime е висока 16 пиксела и затова е необходимо да ги добавите към височината на филмовата картина (Н +16)

3) докато е селектиран плъгин-модула, бутон Parameters в панел Properties

4) отваря се диалогов прозорец Parameters – в колона Parameter въведете свойство и стойност

Controller true/false – за да се добави или не контролната лента на QuickTime

Autoplay true/false – дали филмите да се стартират след зареждане на страницата или когато натиснете бутон Play

За да разгледате страницата в браузъра е необходимо да имате инсталиран плеър QuickTime.

Стъпка 1 - Отворете си някоя от вашите страници в Dreamweaver.

Стъпка 2 - Трябва да си създадете специална папка за вашите снимки. Найменовайте я албум, фотоалбум, или както ви дойде на ум.

Стъпка 3 - Сега се пренасяме в Dreamweaver , отидете на Commands --> Create Web Photo Album. Ще се появи една кутия, с много опции и настройки вътре в нея; Ето лист, със значението на всяка една от тях:

А. Photo Album Title - Тук попълнете името на вашия уеб албум.

Б. Subheading Info - Това поле не е задължително, но каквото напишете в него, това и ще се появи в уголемената снимка.

В. Other Info - Каквото напишете тук, това и ще се появи на страницата на уголемената снимка.

Г. Source Images Folder - Тук натиснете Browse и посочете папката със всички снимки.

Д. Destination Folder - Тази папка е специална, споменахме за нея в 2-ра стъпка. Така, че кликнете Browse и я посочете

Е. Thumbnail Size - Това поле ви позволява да изберете размера на thumbnail-ите на страницата, така че изберете желания от вас размер (Препоръка: 100 x 100 е най-добрия размер)

Ж. Columns - Ето го и полето с колоните, тук попълнете желаната от вас цифра , затова колко колони искате да има с Thumbnails. (Препоръка: 4 или 5 е добро число)

З. Thumbnail Format - Това поле тук ви позволява да използвате JPEG или GIF за вашите Thumbnails.

Й. Photo Format - Това поле ви дава право да използвате JPEG или GIF за вашите големи снимки.

Веднъж свършейки с тези настройки, натиснете Ок. Сега Fireworks създава онези малки снимчици, за които говорихме в началото и ги нарекохме Thumbnails. Това ще отнеме няколко минути, в зависимост от това колко снимки сте сложили в папката и какъв е бил тяхния размер. Веднъж Fireworks да си свърши работата и вие вече може да видите вашия уеб албум.

Step 4 - Нов прозорец ще се появи на вашата страница с Thumbnails. Тази страница ще се казва index.html. Сега ще трябва да поставите вашия шаблон /template/ на страницата с Thumbnails-ите.

Step 5 - Под името на вашия албум ще има още три папки: Thumbnails, Images, and Pages.

А. Thumbnails - всички малки иконки са в тази папка.

Б. Images - всички снимки (оригиналните им размери) са там.

В. Pages - всички страници, които съдържат линковете към Thumbnails.

ТЕМА 9: Използване на библиотеки. Създаване на библиотечен елемент
1. Същност и предназначение.

Библиотечният елемент (library item) представлява част или фрагмент от съдържание, което може да се използва многократно в голям брой страници. Създаването на библиотечен елемент позволява бързо и лесно добавяне на еднакво съдържание в повече от един документ. При промяна на дадена информация, библиотечните елементи дават възможност за редактиране на съдържанието и актуализиране на всички документи, които го включват наведнъж. Библиотечният елемент е отделен от страниците на съответния сайт и се съхранява във файл с .lbi в библиотеката (library). Библиотечният елемент включва само кода за конкретното съдържание. Сам по себе си, той не представлява HTML страница.

Това става чрез избиране на един или повече елементи в даден документ и добавянето им към library. Dreamweaver конвертира селектираните елементи в неподлежащо на редактиране съдържание, свързано със съответния библиотечен елемент.

Библиотечните елементи включват само съдържанието, заградено в двойката тагове body и /body.

1н.)

2) панел Assets, бутон Library – отваря се категория Library, която служи за управление на всички библиотечни елементи

3) издърпайте с мишката селектирания елемент в панел Assets

2н.)

2) Modify/Library/Add Object to Library

В категория Library на панел Assets се появява икона за нова библиотека, разположена до текстово поле, в което е маркирано стандартното име Untitled. Въведете ново име и Enter.

При създаване на библиотечен елемент, Dreamweaver създава папка с име Library. Тя се намира непосредствено в локалната коренова папка и в нея се съхранява всеки създаден библиотечен елемент. Панел Library задължително трябва да запази оригиналното си местоположение като подиалогов прозорец апка на корена на сайта, за да функционират библиотечните елементи. Тази папка и библиотечните файлове, които съдържа, се съхраняват само локално.

Най-отгоре в панела има предварителен изглед на библиотечния елемент. За да актуализирате изгледа, щракнете върху иконата на библиотечния елемент.

3. Разполагане на библиотечен елемент върху страница.

Това означава вмъкване на съдържанието на файла на елемента и създаване на обръщение към него.

1н.) селектирайте библиотечния елемент в категория Library на панел Assets и бутон Insert

2н.) издърпайте с мишката иконата на файла от категория Library до мястото в прозорец Document. Библиотечният елемент е показан на жълт фон. Той не може да се модифицира директно от страницата. В панел Properties може да се види името на сорс файла и да се променят следните свойства:

• 
  Scr – показва името и местоположението на сорс файла на съответния библиотечен елемент. Бутон Open – за да го редактирате. Файлът трябва да бъде записан – в противен случай няма да се запазят направените промени.
  
• 
  Detach from original – прекъсва връзката между селектирания библиотечен елемент и сорс файла му. Съдържанието на елемента става достъпно за редактиране, но се губи възможността за актуализиране от съответните библиотечни функции.
  
• 
  Recreate – презаписва оригиналния библиотечен елемент с текущо селектирания. Тази опция служи за създаване на библиотечен елемент повторно, когато сорс файлът липсва, името на елемента е променено или той е бил редактиран.
  

Фреймовете разделят прозореца на браузъра на две или повече части, всяка от които има отделно от другите HTML съдържание.

Използват се за отделяне на областите за навигацията и съдържанието на дадена страница, като областта остава непроменена, а тази за съдържанието се променя при всяко щракване върху навигационната хипервръзка.

а) предимства

- улесняват навигацията в сайта

- улесняват модифицирането на сайта, тъй като обикновено е необходимо да се обнови само навигационната страница

б) недостатъци

- невъзможност за постигане на пълна достъпност

- нарушаване на функционирането на бутона Back в браузърите

- проблеми с отпечатването и поддръжката на лошата използваемост

Наборът от фреймове (frameset) определя цялостния външен вид на дадена страница. Това включва броя на фреймовете й, размерите на всеки от тях и атрибутите на рамката. Самият набор от фреймове не включва съдържание. Той определя кой документ на HTML да бъде използван във всеки фрейм. Документът на набора от фреймове е файла, с който е свързана съответната хипервръзка при извикване на уеб страница с фреймове. Даден набор от фреймове може да се състои от редове или колони, но не и от двете едновременно. За да се постигне комбинация от редове и колони трябва да се използват вложени набори. Вложеният набор от фреймове е такъв, който се съдържа във фрейм, дефиниран от друг, по-рано създаден набор. Част от готовите набори на Dreamweaver включват вложени набори. Границите между отделните фреймове са маркирани с тънки сиви линии.

1н.) Modify/Frameset – избираме желания набор

2н.) използване на предварително дефиниран набор от фреймове, който заедно с фреймовете ще се конфигурира автоматично.

Създаване на набор от фреймове по 2н.)

1)

1н.) File/New, страница General, категория Framesets, избирате набора от фреймове, Create

3н.) лента Insert, категория Layout, бутон Frames

2) отваря се диалогов прозорец Frame tag Accessibility Attributes с полета (попълват се за всеки фрейм поотделно):

Frame – избирате фрейма

Title – задавате заглавие на фрейма. То осигурява контекста за съдържанието и това позволява на потребителите бързо да открият фрейма с информацията, която им е необходима. Можете да го добавяте и редактирате и по-късно, като го селектирате и в панела Tag, секция Attrributes, CSS/Accessibility – модифицирате атрибута Title.

Атрибутът Title не е взаимозаменяем с name. Първият определя името на фрейма за потребителите, а вторият – за скриптове и др. Посетителите на страницата виждат само атрибута Title.

Ако диалогов прозорец Frame tag Accessibility Attributes не се появи: Edit/Preferences, категория Accessibility, □Frames – поставяте отметка.

ТЕМА 11: Създаване на формуляри. Добавяне на текстови полета. Добавяне на полета за отметка. Добавяне на бутони
1. Предназначение.

Използват се както за отправяне на запитвания за конкретна информация (мнения за сайта, потребителски регистрации, отговори на анкети) към потребителите, така и за предоставяне на възможност за обратна връзка, за изпращане на въпроси и искания. Формулярите (Forms) служат като контейнери за обекти, които потребителя използва за въвеждане или селектиране на информация; също така определят какво става с данните при изпращането им.

Формулярите съдържат полета за въвеждане на информация. Те могат да бъдат текстови полета, радиобутони, полета за отметка, менюта, списъци и др. Данните от Forms обикновено се изпращат до БД на сървър, до email адрес или до приложение, което ги обработва. Обработката на Forms може да се осъществи чрез динамични страници (които използват езици като PHP, JSP, ColdFusion) или чрез CGI (Common Gateway Interface) скриптове. CGI е стандартен протокол, който служи като комуникационна връзка между данните от Forms и сървъра.

1) Лента Insert, категория Forms, бутон Form (Insert/Form/Form)

Областта, която заема Forms, е обозначена с червени пунктирани линии в прозореца Document. Тя е дефинирана от двойката тагове form и /form в кода. Големината на областта за Forms зависи от съдържанието му и може да се разширява хоризонтално до пълния достъпен размер, а вертикално толкова, колкото е необходимо, за да се събере съдържанието. Forms се разширява така, че да изпълни ширината на контейнера, независимо дали той е div, клетка на таблица или самата страница.

- View/Visual Aids/Invisible Elements – за да се покаже червената пунктирана линия

- Edit/Preferences, категория Invisible Elements, избутон Form delimiter

На една страница могат да се разположат повече от един Form. В HTML не е възможно да се влагат Forms.

2) селектирайте Forms (щракнете върху червената пунктирана линия; ако курсорът е във Forms може да използвате Tag Selector)

3) панел Properties, поле Form Name – задайте име на Form (уникално име без специални знаци)

4) вмъкнете таблица във Form – тя улеснява подравняването на текст и изображения с полетата на Form, които ги идентифицират.

Възможно е таблицата да се разположи във Form, както и обратното. Условието е таблицата да бъде изпълнена изцяло от Form или от своя страна да го запълва изцяло.

Всички обекти трябва да бъдат разположени в пространството, заградено от червените пунктирани линии. Те трябва да бъдат вмъкнати в набора от полета, но не и в легендата. Затова селектирайте тага legend в Tag Selector, натиснете клавиш стрелка надясно, натиснете клавиш Enter. Обектите на Forms не работят в прозореца Document. За да се провери ефекта Form трябва да се отвори в браузър.

а) предназначение – служат за събиране на информация, която потребителят въвежда в тях. Използват се за кратки, точни отговори, състоящи се от една дума или фраза. Използват се за въвеждане на имена, адреси, email адреси; търсене на проста информация по въведена дума.

б) добавяне

1) лента Insert, категория Forms, бутон TextField (Insert/Form/TextField)

2) отваря се диалогов прозорец Input Tag Accessibility Attributes

Ако диалогов прозорец не се отвори: Edit/Preferences, категория Accessibility, □Form Objects; OK

3) ОК – текстовото поле се разполага във Form заедно с текстовия етикет. И двата са селектирани автоматично.

4) селектирайте само текстовото поле

5) панел Properties

поле TextField – въведете име. Не използвайте интервали и специални знаци, имената са чувствителни към регистъра на буквите, когато се използват заедно със скриптове.

поле Char Width – брой видими знаци в текстовото поле

поле Max Chars – максималния брой знаци, които потребителят може да въведе. Ако е празно текстовото поле могат да се въведат неограничен брой знаци. Ако Max Chars>Char Width потребителите могат да въвеждат и извън видимата част на полето. Въвеждането приключва при достигане на стойността на Max Chars.

6) панел Properties, поле Init Val (първоначална област) – текст, който се появява в текстовото поле при зареждане на страницата в браузър. Дава на потребителя пример за типа информация, която се изисква. Оказва се недостатък, ако потребителят се обърка и пропусне полета, които изглеждат вече попълнени.

За да приложите CSS към текстовото поле, изберете желаният стил от меню Class на панел Properties при селектирано поле.

1) добавете едноредово текстово поле

2) панел Properties, опция Type - ○ Password

При въвеждане на данни в полето на екрана се появяват * или ●

а) предназначение – използват се когато от потребителя се изисква да избере само една от няколко предварително определени възможности. При избор на една от тях, останалите автоматично се деактивират. б) добавяне

1) лента Insert, категория Forms, бутон RadioGroup (Insert/Form/RadioGroup)

2) отваря се диалогов прозорец Radio Group - поле Name – въвеждате име за групата

Всички радиобутони от дадена група трябва да имат еднакви имена

- в областта на списъка Radio buttons въведете едно и също име в Label и Value за всяка инстанция Radio.

- Добавяне и изтриване на записи – чрез бутони (+) и (-)

- Промяна на последователността на записите – чрез бутони (▲) и (▼)

- Област Lay out using

o Line breaks – радиобутоните се поставят в документа на отделни редове

o Table – всеки бутон е на отделен ред от таблицата

3) ОК

а) предназначение – позволяват на потребителите да избират една или повече опции от група свързани обекти. Използват се, когато целта е потребителят да има възможност да избере толкова от изброените опции, колкото пожелае.

б) добавяне

1) лента Insert, категория Forms, бутон Checkbox (Insert/Form/Checkbox)

2) отваря се диалогов прозорец Input Tag Accessibility Attributes

- поле Label – въведете етикет

- секция Style – избирате ○Wrap with label tag

- секция Position – избирате ○ after from item

3) ОК – във Form се добавя поле за отметка, заедно със съответния етикет

4) селектирайте само полето за отметка

5) панел Properties, поле Checkbox Name – въведете име

6) панел Properties, поле CheckedValue – въведете стойност

Обединяването в група на определен брой полета се извършва чрез въвеждане на едно и също име за всяко от тях. Задължително е полетата да имат различаващи се, ясни и точни стойности. Ако в Tag selector се вижда само тагът , може да добавите знак за край на ред (Shift+Enter), като част от подготовката за следващото поле за отметка.

ТЕМА 12: Добавяне на потребителска интерактивност. Вмъкване на роловър изображения
Интерактивните елементи и обратната връзка с потрбителя са важни компоненти на уебсайтовете. Интерактивността изисква изпълнение на дейсвие и отговор, тя е двупосочен комуникационен процес.

1. Предимства.

а) по-добро възприятие на целта и съдържанието на сайта;

б) по-лесна и по-директна навигация до страниците му.

2. Инструменти за добавяне на интерактивни елементи.

а) динамични страници и използване на БД;

б) Macromedia Flash;

в) Quick Time Virtual Reality (QTVR) – формат, поддържащ 360-градусови панорамни изгледи и интерактивни компоненти;

г) JavaScript – използва се за скриптове, изпълнявани от браузъра на клиента;

д) Java Server Pages (JSP) – скриптове, които се обработват от сървъра и резултатът се изпраща на потребителя;

е) поведения на Dreamweaver – подиалогов прозорец рограми с код на JavaScript, които лесно можете да включите в уебсайт.

Поведението е комбинация от действие или серия от действия и събитие.

Действието (action) е това, което се извършва в резултат от намесата на потребителя (например размяна на едно изображение с друго).

Събитието (event) е това, което предизвиква възникването на дейсвието (например преместване на мишката над изображение или натискане на бутон).

- предварително дефинирани поведения

- добавяне на допълнителни поведения

- създаване на собствени поведения

3. Добавяне на роловър изображениe (rollover).

Изображениe, което се променя, когато потребителят премести курсора на мишката над него. Използват се 2 изображения, поставени на едно и също място.

1) лента Insert, категория Common, меню Images, бутон Rollover Image (или Insert/Interactive Image/Rollover Image)

2) отваря се диалогов прозорец Insert Rollover Image

Image Name – име на изображение (по подразбиране имената са Image1, Image2, …..). Не използвайте интервали и специални знаци и не започвайте името с число.

Бутони Browse – изберете файлове за оригиналното (първото) и алтернативното (второто) изображение. Необходимо е двете изображения да имат еднакви размери.

Preload Rollover Image – предизвиква зареждане на второто изображение още при зареждане на страницата в браузъра. Ако тази опция не е включена второто изображение няма да се зареди, докато потребителя не премести курсора на мишката над първото.

Alternate Text – въведете Alt текст

When Click Go to URL – чрез бутон Browse намерете файла, с който ще се свърже роловър изображениeто. Този файл се появява в поле Link на панел Properties при селектиране на изображението.