1.BI 7 LM VIC VI THNH PHN FORM, SPY TRONG ADOBE DREAMWEAVER CS4

2. NHC LI BI TRC S dng th vin v cc mu c sn: Thit k da trn module Cc thnh phn module trong Dreamweaver: Snippets Thnh phn th vin Mu (template)Son tho HTML trong mi trng CodeSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS42 3. MC TIU BI HC Lm vic vi web form: Giao din v chc nng ca form Phng php submit thng tin ca form ln server Xc nhn cc thng tin u vo ca form Khi to v sa i form trn Dreamweaver CS4 Lu khi lm vic vi formHiu v cc khi nim lin quan ti web: Web ng pha client XML, AJAX, RIASpry v cch lm vic vi spry trong Dreamweaver CS4 Slide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS43 4. WEB FORM 5. WEB FORM Form (hay cn gi l biu mu, phiu in thng tin, ) l loi giy t cho php ngi dng in thng tin theo cc yu cu c sn Form c dng hng ngy v mi ni trong cc c quan hnh chnh, trong cc ca hng, cng ty, Web form l cc form c a ln trang web, c chc nng tng t nh form thng thng. V d: Form ng nhp Form ci tSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS45 6. WEB FORMSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS46 7. WEB FORM Mt s thnh phn giao din trn form: Textbox/Text field: cho php nhp cc k t Cc loi: 1 dng, nhiu dng, password V d: nhp tn tui, nhp password, nhp kin nh giCheckbox: cc cho php ngi dng click chn mt hoc nhiu la chn t mt danh sch cho trc TextboxCheckboxSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS47 8. WEB FORM Radio button: ging checkbox nhng ngi dng ch c chn mt List: mt danh sch (c hoc khng c thanh ko) cc i tng cho php ngi dng la chn thc hin cng vic g Button: khi ngi cng click, s thc hin mt hnh ng g Ngoi ra cn nhiu thnh phn khc Slide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS48 9. WEB FORM 3 loi nt chun trn form tng ng vi cc gi tr ca thuc tnh type ca th Submit: khi ngi dng nht nt thuc loi ny, thng tin s c gi ln serverbuttonReset: khi ngi dng nhn nt thuc loi reset, tt c cc thng tin trn form s c a v ch mc nh ban u ngi dng nhp liPush: y l loi nt dng x l cc hnh ng thng thng pha client nh : thm/xa cc mc vo/khi danh sch, Slide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS49 10. WEB FORM C ch x l ca web formmrbean9xUsername + PassServer********* ng nhp thnh cng, chuyn sang trang hp thThng tin c nhp form s c bt u x l khi ngi dng nht nt submit no yu cu trnh duyt x lSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS410 11. WEB FORM Phng php submit thng tin ca web form: submitGET: thng tin c gi i s c ghp sn vo URLSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS4POST: thng tin c gi i s nm n trong phn header ca yu cu gi n server11 12. WEB FORM Form Validator: L hnh ng xc nhn/kim tra tnh hp l ca d liu nhp vo Khi d liu khng hp l, phi c thng bo li C th thc hin c : Client ServerSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS412 13. WEB FORM Dreamweaver h tr vic thm cc x l ny thng qua Behavior panel ( Window > Behaviors): Ngi dng khng cn phi bit code javascript Ch cn la chn cc behavior tng ng khi c thay i t pha ngi dng C th thay i th t u tin ca cc behaviorSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS413 14. WEB FORM Lu khi lm vic vi web form: B tr form phi mang li tnh tin li cho ngi dng: V d: Cho php s dng phm tab chuyn i gia cc thnh phn trong form, Form khng nn qu di Thng bo li phi r rng Khng bt ngi dng nhp li mt ni dung nhiu lnSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS414 15. CC KHI NIM LIN QUAN TI WEB 16. CC KHI NIM LIN QUAN TI WEB Web tnh: Trong cc trang web c in, tt c nhng thay i trn trang web u c thc hin di s iu hnh ca server -> Chm -> Kh nng tng tc vi ngi dng kmWeb ng pha client: Khi nim web ng ra i nhm khc phc nhng nhc im ca web tnh, lm cho trang web linh ng hn Cc cng ngh h tr web ng: Java script, DHTML, AJAX, Flash, Slide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS416 17. CC KHI NIM LIN QUAN TI WEB AJAX (Asynchronous JavaScript and XML): l mt thut ng m t s kt hp ca cc cng ngh Javascript, XML, DHTML RIA (Rich Internet Application): l khi nim dng ch cc ng dng web hot ng nh cc ng dng chy trn my AJAX l mt trong nhng cng c chnh xy dng RIASlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS417 18. SPRY 19. SPRY Spry l Ajax framework c pht trin bi Adobe, cho php ngi pht trin thm vo cc ng dng ca mnh nhng thnh phn giao din, thnh phn d liu ca web ng mt cch n gin, linh hot Spry c to ra nh mt th vin Javascript Spry chy c lp, khng ph thuc vo mt plugin no hoc module no pha server Spry c tch hp trong Dreamweaver t bn CS3Slide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS419 20. SPRY Thanh menu Spry: Gip to menu a cp theo c chiu ngang v chiu dc. D dng thm vo trang web tr thnh b iu hng chnh Menu Spry ny c thit k t cu trc HTML c in v n gin Thanh menu Spry c th c chn vo trang web t bng Insert. Ty bin bng bng Properties v bng CSS StylesSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS420 21. SPRY Khi to v ty bin spry menu:Ty chnh ni dung ca spry menuKhi to spry menu thng qua bng INSERTSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS421 22. SPRY Ty bin Spry bng CSS File .css ca spry s hin th trn bng CSS STYLES. Ti y c th la chn tng thuc tnh thay i gi trSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS422 23. SPRY WidgetsSPRY DataSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS4Effects23 24. SPRY Spry widgets: L tp hp cc thnh phn giao din c tnh tng tc cao, d dng ko th vo cc ng dng v d dng thay i Trn Dreamweaver, ngi dng d dng c th ty chnh cc widges vi CSSSlide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS424 25. SPRY Spry Effects: L tp hp cc hiu hng hnh nh cho cc thnh phn trn trang webSpry Data: Spry cung cp cc widget hin th d liu nh: Spry XML data sets HTML data set JSON data setsCc d liu c s dng y phi c lu di dng xml, html list hoc json Slide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS425 26. TNG KT Web form l cc form trn web cho php ngi dng in thng tin theo cc mu c sn Thng tin nhp form s c bt u x l khi ngi dng nht nt submit 2 phng php submit form l GET v POST Form validation l hnh ng xc nhn/kim tra tnh hp l ca d liu nhp vo form Web ng pha client l khi nim dng ch th h web s dng cc cng ngh h tr nh DHML, Javascript, Ajax, em li tnh linh ng, tnh tng tc cao hn Spry l framework h tr web ng pha client Slide 7 - Lm vic vi thnh phn Form, Spry trong Dreamweaver CS426