Слоеве
Слоевете (Layers) се използват за разполагане на обектите на страницата. Те се подържат доколкото ми е известно от IE и Netscape над версия 4.0.
Слой можете да създадете от Insert -> Layer или от Object -> Draw Layer във втория случай щракате върху иконата на слоя и го рисувате на необходимото място. Property inspector ще изглежда така:
От Layer ID задавате име на слоя, от L- отстояние от левия край на прозореца, от Т- отстояние отгоре, от W - ширина на слоя, от Н - височина на слоя, от Bg Image - картинка за фон, от Bg Color - цвят за фон. От Window -> Layers можете да извикате инспектора на слоевете, от там можете да ги изключвате, изтривате, или да определяте кой да е отгоре - маркирате името на слоя и го местите нагоре и надолу, разбира се, ако имате повече от един слой. Ако сложите отметка на Preveht Overlaps не можете да припокривате слоевете при доближаване те се "залепват" един до друг. Слоевете се преместват като ги хванете с мишката за квадратчето в горния ляв ъгъл. Картинка или друг обект се вкарва в слоя като щракнете в него с мишката Insert -> обекта, текст - като щракнете в слоя и пишете. При текста при слоевете маже да се получи един гаден ефект, ако не вземете мерки, ако имате дълъг текст в два или повече слоя при преглед с браузъра може да има проблем виж примера. Този проблем може да се реши по следния начин (поне аз не открих друг) File -> Convert, и конвертирате слоевете до таблици, предишния пример конвертиран. Запазете си копие със слоевете, за да ги редактирате като слоеве, ако се налага. По-точно това важи, ако не искате да се появява лента за придвижване. Ако лентата за придвижване не ви притеснява можете да я зададете от Overflow -> Auto или scroll и въпроса се решава.
Поведения при слоевете. Window -> Behaviors отваря диалоговия прозорец Behaviors
от който се определя поведението на слоевете. Поведение е това, което се случва със слоя при някакво действие на мишка, клавиш или др. Първо ще направим така, че горния слой да се скрива при преминаване на мишката над него. Основната картинка или друг обект може и да не е в слои, но изчезващата задължително е в слой. Виж примера, това става така: вкарвате картинката от Insert -> Image след това въху нея рисувате слой в, който вкарвате друга картинка, маркирите втората картинка от диалоговия прозорец Behaviors натискате + и от подащото меню избирате Show Haide Layers в диалоговия прозорец под Events се появява ка е действието на мишката, клавиш или др., а под Actions какво е поведението на прозореца, между двете имо стрелка и от нея можете да сменяте действията на мишката. В горния пример може да се добави след напускане на картинката от мишката слоя пак да се появи, избирате отново Show Haide Layers, но сега задавате Show за слоя, а след това за действие на мишката избирате on Mouse out. Има още много ефекти, които можете да направите, дори по този начин можете да разделите горната картинка на няколко части и след това всяка част да разположите в отделен слой да зададете поведение за всеки слой - например скриване и при преминаване на мишката долната картика да се открие постепенно. Дори под всеки слой може да има гореща точка с връзка и при скриване на слоя върху нея да може да се щрака. Пробвайте ефектите поред и ще ги разберете.
Сега да раздвижим слоевете.Слоевете могат да се движат чрез диалоговия прозорец Timelines, Window -> Timelines.
Точно с този диалогов прозорец е направен следния пример. Как става? Интересуваме се само от слято или слоевете, които ще се движат, може да са повече от един. Маркирате слоя от стрелката в горния десен край на прозореца изкача меню, избирате Add Timeline и слоя се появява в прозореца. Timeline започва да брои времето от момента на зареждане на страницата в браузъра. Можете да наместите слоя или в началото и движението почва веднага или да го издърпате надясно и да дадете закъснение. След това местите червения маркер да съвпадне с дясната точка. Хващате слоя на листа и го местите в желаната посока и до желаното положение. Програмата показва траекторията с черна линия. Можете да проверите анимацията като натиснете и задържите дясната стрелка. Ако желаете движението на слоя да е по крива линия трябва да вмъкнете ключови кадри Modify>Timeline -> Add Keyframe. Ако сте добавили само един ключов кадър например по средата на времевата линия щракнете върху него за да го маркирате и след това преместете слоя на позицията, на която искате да бъде в този момент от анимацията. Сега, ако положението на слоя не е на една права с началната и крайната точка,при движението си той ще се отклони през третата точка и ще извърши криволинейно движение. Друг начин да зададете криволинейна траектория на слоя е да запишете неговия път. Изберете слоя, който искате да запишете и го завлечете в позицията, от която искате да започне анимацията. Докато слоя още е избран отворете Modify -> Timeline -> Record Path of Layer. Сега движете слоя по страницата като опишете желаната траектория. Тя ще се изчертае като линия следваща слоя. Във времедиаграмата пък се появяват ключови кадри. Колкото по-бавно влачите толкова по-близко са ключовите кадри. Към времедиаграмата можете да задавате и поведения (Behawiors) те се задават в лентата B (над номерата на кадрите). Щракате над някой ключов кадър и избирате Behawiors>Timeline>и каквото ви е нужно. Слоя можете да добавите към Timeline и като го хванете с мишката и го завлечете в прозореца. Ако имате повече от един слой те ще се подредят на следващите редове на прозореца. Ако скороста ви се вижда бавна можете да я промените от полето Fps по-голямо число, по-бързо. Отметка в autoplay - анимацията започва сама, Отметка пред Loop, движението се повтаря постоянно Ако нямате отметка пред autoplay можете да зададете при какво събитие да стартира анимацията от Behaviors-> Timeline обачев слоя трябва да има обект (картинка) иначе не става.
Можем да добавим рамки към страницата от Insert -> Frames или от Objects и избирате какви да бъдат. Рамките разделят страницата на части и всяка част е всъщност е отделна страница, която можете да отворите самостоятелно. Property inspector се променя така
Трябва да отворите и диалоговия прозорец Frames от Windows -> Frames, от тук маркираите всяка рамка и и дайте име. В Src се вижда името на страницата, която е отворена в съответната рамка. От Borders задавате дали рамките да имат очертания или не. Scroll задавате дали рамките да имат ленти за превъртане, ако няма отметка пред NoResise потребителя може да движи рамката в браузера, виж примера отворил съм две от страниците в двата прозореца за пример. Тук рамката е с Border=5. Ако Border=0 и пред No Resise има отметка виж следващия пример рамката не може да се движи, и очертаниятя и не се виждат (границата между двата цвята). Border Color цвят на рамката. От Margin Width и Height отстояние на обектите от ляво и отгоре на рамката.
Даване на връзки в рамките. Връзки се задават по стандартния начин (стр. втора), но има една особеност, ако желаете връзката да се отвори в точно определена рамка задавате връзката към файла и от Property inspector от падащия списък на Target избирате името на съответната рамка (трябваше вече да сте ги именували).
Това са най важните неща в Dreamweaver, с които можете да създадете една прилична, дори прекрасна страница. Сега много накратко ще се спра на другите екстри на програмата които общо взето ще ви облекчат работата.
Шаблони (Templates)
Шаблоните обикновено се използват при многостранични документи, които трябва да изглеждат по един и същи начин. Можете да ги правите и всеки по отделно и пак да постигнете същия ефект, но е трудоемко. Как става. Отваряте страницата, която искате да направите шаблон, след това я запомняте като шаблон File -> Save as Template, задавате име. След това можете да определите кои области ще бъдат редактируеми, маркирате съответната област избирате Modify -> Templates-> Mark selection as editable даваме име и Ok, запомняме файла Save. Имаме готов шаблон, който вече можем да затворим. Шаблона можем да отворим от File -> New from Template, шаблона се отваря и можем да редактираме незаключените области. Шаблоните можете да приложите към отделна страница или към няколко страници. Ако шаблона е бил приложен към няколко страници и се наложи в един момент да го промените то можете автоматично да пренесете промените на всички страници, които го използват.
Стилове (CSS Styles)
Свой стилове можете да създавате от прозореца Windows -> CSS Styles натиснете стрелката в горния десен ъгъл на диалоговия прозорец и от менюто изберете New ще се появи диалогов прозорец, от който можете определите параметри почти за всичко включено в една страница, тези параметри можете да приложите към своите страници.
В диалоговият прозорец HTML Styles има готови стилове, които можете да приложите. Опитайте ги.
Java Script
Скриптовете правят вашата страница по-интерактивна. По своята същност езиците за писане на скриптове са езици за програмиране. Скрипта се намира в HTML кода на страницата, и работи на вашия компютър. Предполагам, че ще ползвате готови скриптове, с които е пълно в Мрежата. Как да добавим скрипт към страницата. Най-сигурния начин е да отворим HTML кода на страницата от Window -> HTML Source и да го копираме на нужното място, Маркирате мястото в страницата и курсорът се появява и в Source така съм поставил часовника в началото на страницата. Dreamweaver сама създава скриптове, например при RolloverImage, при примера с движението на слоевете (погледнете Source - скриптовете започват със <script language=JavaScript> и завършват със </script>) и т.н. В някои случаи езика може да не е JavaScript.
Назад