Тема 1: Изисквания за изработване на уеб-сайт


ТЕМА 13: Добавяне на изскачащо съобщение. Проверка на браузъра. Отваряне на нов прозорец на браузъра



страница3/3
Дата26.08.2016
Размер352.91 Kb.
#7301
1   2   3
ТЕМА 13: Добавяне на изскачащо съобщение. Проверка на браузъра. Отваряне на нов прозорец на браузъра
1. Добавяне на изскачащо съобщение.

1) начертайте правоъгълна гореща точка върху изображението и я селектирайте

2) панел Behaviors, бутон (+), от м. Action избутон Popup Message

3) отваря се диалогов прозорец Popup Message – въведете съобщение; OK

Действието Popup Message и съответстващото му събитие OnClick се появяват в панел Behaviors.

4) щракнете върху събитието OnClick в панел Behaviors. От появилото се меню изберете OnMouseOut.

Можете да определите в какъв тип браузъри да се показват събитията – изберете една от опциите от частта Show Events For на м. Add Behaviors. Ако изберете събитие в панел Behaviors меню Events става достъпно и показва само тези събития, които са достъпни в избрания тип браузър.

2. Показване на съобщения в лентата за състоянието.

а) същност – съобщенията в лентата за състоянието дават на потребителя допълнителна информация за дестинациите на хипервръзките. Те заместват описателното име на URL адреса или пътя до съответната страница;

б) алгоритъм

1) начертайте правоъгълна гореща точка върху изображението и я селектирайте

2) панел Behaviors, бутон (+), от м. Set Text изберете Set Text of Status bar

3) отваря се диалогов прозорец Set Text of Status bar – в поле Message – въведете съобщение (кратко описание на съдържанието, до което отвежда хипервръзката); ОК

4) ОК - действието Set Text of Status bar и съотвестващото му събитие onMouseOver се появяват в панел Behaviors.

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



3. Проверка на браузъра.

1) селектирайте тага body

(цялото съдържание в документа се селектира) от Tag Selector – ще видите body в заглавната лента на панел Behaviors.

2) панел Behaviors, бутон (+), Check Browser

3) отваря се диалогов прозорец Check Browser

- за Netscape 4.0 и Internet Explorer 4.0, както и за по-новите им версии изберете Go To URL от съответното меню

- за по-старите версии на Netscape и Internet Explorer изберете Stay on this page

- за другите браузъри изберете същото бутон Browsе до поле URL – намерете файла, към който ще бъдат насочвани потребителите с по-нова версия на браузъра.

ОК – добавя JavaScript кода в страницата

Действието Check Browser и съответстващото му събитие onLoad се появяват в панел Behaviors.



4. Отваряне на нов прозорец на браузъра.

След зареждане на страницата този прозорец може да се използва за показване на реклама, условия на ползване или на друга информация. Начини:

1н.) използвайте _blank за дестинация (target) заедно със стандартна хипервръзка – няма да имате контрол върху атрибутите на новия прозорец

2н.) чрез опцията Open Browser Window

1) селектирайте дума

2) панел Behaviors, бутон (+), Open Browser Window

3) отваря се диалогов прозорец Open Browser Window

- бутон Browsе - намерете файла, който ще се зарежда в новия прозорец

- Window Width, Window Height – ширина и височина на прозореца – подбират се в зависимост от обема на съдържанието в новия прозорец.

Допълнителни атрибути:

- Navigation toolbar – това е редът с бутони на браузъра – Back, Forward, Home, Reload и т.н.

- Location toolbar – това е редът, на който се намира полето за въвеждане на адреса

- Status bar – лента за състоянието

- Menu bar – лента с менюта

- Scrollbars as needed – определя дали да се добавят ленти за превъртане, ако съдържанието се простира отвъд видимата област

- Resize handles – позволява на потребителите да променят размерите на прозорците чрез издърпване на долния десен ъгъл или чрез натискане на бутон Maximize

- Window name – въведете име на прозорец, ако желаете да го използвате като дистинация на хипервръзка или да го контролирате чрез JavaScript.

Действието Open Browser Window вече се намира в панел Behaviors. Събитието се различава в зависимост от браузъра (on Focus - при кликване в клетка на таблица).



ТЕМА 14: Създаване на слоеве. Именуване на слоеве. Влагане на слоеве
1. Същност.

Слоят (layer) e правоъгълен контейнер за HTML съдържание, който можете да позиционирате на точно място в прозореца на браузъра. Всичко, което можете да разположите в HTML документ (текст, изображения, таблици, други слоеве) можете да поставите и в слой. Слоевете са подходящи за разполагане на елементи един върху друг или така, че да се припокриват. Те се поддържат само от браузъри с версии 4.0 или по-нови. В комбинация със CSS те могат да контролират разположението и външния вид; при използването им заедно с поведения осигуряват интерактивност. Слоят се идентифицира с тага div.



2. Създаване на слой.

1н.) Insert/Layout Objects/Layer

2н.) свойствата на слоевете, определящи разположението и позиционирането им да се включат във външен CSS – използват се чрез експортиране на вътрешни стилове или чрез предварителното им създаване във външен стил.

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

1) Лента Insert, категория Layout, бутон Standard, бутон Draw Layer

При преместване на курсора в прозорец Document той става на знак (+). Издърпайте мишката, за да създадете слоя и отпуснете бутона й – появява се правоъгълник, в който се намира слоя.

2) Edit/Preferences, категория Invisible Elements

□ Anchor Points For Layers (“Точки на закотвяне на слоевете”); ОК

Вижда се маркер за слоя в горната лява част на прозорец Document. Очертанието на слоя се оцветява в синьо при селектирането му.

Кодът на слоя се добавя в горната част на страницата непосредствено след тага body. Dreamweaver използва тага div за създаване на слоеве с абсолютно позициониране спрямо горната и лявата страна на прозореца на браузъра. Тагът div

е блоков елемент, започва на нов ред или с нов блок. Други блокови елементи са p (за абзац) и ul (за неномериран списък). Блоковите елементи могат да съдържат други такива, както и инлайн елементи (обикновено съдържат само текст). Примери за инлайн елементи са span - за обхващане, br

- за край на ред, a - котва или хипервръзка.

За да начертаете няколко слоя последователно натиснете Ctrl докато чертаете първия слой.

3. Добавяне на съдържание в слой.

1) селектирайте слоя и поставете курсора в него

2) вмъкнете съдържание

Слоевете винаги се разширяват, така че да се вижда цялото им съдържание, освен ако не промените настройката Overflow в панел Properties. Ако слоят е по-голям от съдържанието си, той не променя размерите си.



4. Именуване на слоеве.

Dreamweaver автоматично присвоява стандартни имена в числов ред: Layer1, Layer2,...

1н.)

1) отворете панел Layers (Window/Layers или панел CSS, Layers) – той предоставя списък с всички слоеве върху страницата. Ако курсорът се намира в даден слой, името му е удебелено в панел Layers, а маркерът му за селектиране се появява в прозорец Document и показва, че слоят е активен, но не е селектиран.



2) щракнете 2 пъти върху желания слой и въведете име; Enter

2н.) селектирайте слоя и въведете името му в поле LayerID в панел Properties

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

5. Създаване на вложени слоеве.

Това е начин за групирането на слоеве. Вложеният слой се мести заедно с родителския и наследява неговото ниво на видимост.

1н.) чрез панел Layers – селектирайте слоя и издърпайте с мишката името му над слоя, който ще е родителския, като в същото време натискате Ctrl. Отпуснете бутона, когато вложения слой се намира над родителския си. Вложеният слой се извежда под родителския си в панел Layers. При кликване върху знак (+) пред родителския слой се показва списъкът с вложени слоеве.

2н.) начертаване на вложения слой във вече съществуващ

1) Edit/Preferences, категория Layers, □ Nest When Created Within A Layer

2) Лента Insert, бутон Draw Layer




Изготвил: Мехмед Мехмед
Каталог: old -> temi
temi -> Тема 1: Видове изображения, модели и формати
temi -> Утвърждавам: директор: / К. Петрова / професионална гимназия по икономика
temi -> Утвърждавам: директор: / К. Петрова / професионална гимназия по икономика
temi -> Тема компютърни мрежи
temi -> 1. Обща характеристика на информационните системи Същност Съществуват много дефиниции на понятието „информационна система”
temi -> План-конспекти по отчитане на външнотърговски сделки-теория
temi -> Тема проблемен анализ
temi -> Основни понятия при формиране себестойността на изделия в производствени предприятия
temi -> 1. Маркетингови проучвания Marketingsforschungen
temi -> Въпрос 1: организационно-икономически аспекти на информационното общество


Сподели с приятели:
1   2   3




©obuch.info 2024
отнасят до администрацията

    Начална страница