LUẬN văn sư PHẠM hóa THIẾT kế TRANG WEB hóa học lớp 12

TR12NG Đ3I H4C C5N TH6 KHOA S1 PH3M TR12NG Đ3I H4C C5N TH6 KHOA S1 PH3M Tên đ7 tài: THI8T K8 TRANG WEB HÓA H4C L9P 12 Tên đ7 tài: THI8T K8 TRANG WEB HÓA H4C L9P 12 LuAn văn TBt nghiCp Ngành: SD phEm Tên ngành: Hóa hFc LuAn văn TBt nghiCp Ngành: SD phEm Tên ngành: Hóa hFc GV h12ng d3n: ThS GVC Hu6nh Kim Liên Sinh viên th4c hi5n: Nguy7n Th8 Minh Khoa L2p: S1 ph9m Hóa K32 Sinh viên th4c hi5n: Mã sA SV: 2060408 Nguy7n Th8 Minh Khoa L2p: S1 ph9m Hóa K32 Mã sA SV: 2060408 GV h12ng d3n: ThS GVC Hu6nh Kim Liên CBn ThC, 2010 CBn ThC, 2010 L2I CM 6N Sau m1t th2i gian th3c hi4n, đ5 tài: “Thi6t k6 trang web hóa h7c l8p 12” hồn thành theo m9c tiêu yêu cAu đBt ĐC hoàn thành tDt đ5 tài này, s3 nE l3c cFa bn thân, tơi cịn nhn đc rt nhi5u s3 tn tình ch bo cFa quý thAy cô s3 giúp đ cFa bn l8p Nay xin chân thành gi l2i cm n sâu sc nht đ6n: § Cơ Hunh Kim Liên - Thc s, Ging viên b1 mơn Hóa - khoa s phm tr2ng Đi h7c CAn Th ng2i tn tình h8ng dn có nhng ch bo, góp ý sâu sc to m7i đi5u ki4n thun li giúp tơi suDt q trình tơi th3c hi4n đ5 tài § Tt c q thAy b1 mơn Hóa - khoa S phm - tr2ng Đi h7c CAn Th tn tình ch dn, truy5n đt ki6n thc giúp tơi có đc nhng ki6n thc q báu làm n5n tng đC có thC hồn thành đ5 tài ph9c v9 cho công tác sau Và xin chân thành cm n nhng ng2i bn thân toàn thC bn l8p s phm Hóa khóa 32 nhi4t tình giúp đ có nhng ý ki6n đóng góp giúp tơi hồn thành đ5 tài Xin chân thành cm n! Nguy n Th! Minh Khoa TÓM TT Trong giai đon hi4n nay, v8i s3 phát triCn v" bão cFa khoa h7c k thut, nhu cAu trao đ#i chia s$ thông tin ki6n thc ngày tr% nên cp thi6t vô quan tr7ng thúc đ&y nhanh q trình “xã h1i hóa thơng tin” đ1ng l3c rt l8n cho trình đ#i m8i giáo d9c Chính vy, s3 đ2i cFa đ5 tài: “ Thi6t k6 trang web hóa h7c l8p 12” mang ý ngha nh'm gi8i thi4u đ6n quý thAy cô nhng ng2i quan tâm đ6n lnh v3c hóa h7c cách ng d9ng internet, tin h7c vào ging dy hóa h7c m1t cách tích c3c, hi4u qu thơng qua vi4c thi6t k6 m1t trang web v5 hóa h7c Thông qua vi4c s d9ng phAn m5m thi6t k6 web Macromedia Dreamweaver 8, tác gi muDn gi8i thi4u tp tài li4u h8ng dn thi6t k6 trang web hóa h7c l8p 12 trang web tng đDi hoàn chnh v5 chng trình hóa h7c l8p 12 v8i n1i dung: flash hóa h7c; l!ch s hóa h7c; n1i dung hóa h7c chng trình sách giáo khoa, nhng đon video thí nghi4m, hình nh minh h7a; hóa h7c đ2i sDng; trang gii trí trc nghi4m tr3c tuy6n % cuDi mEi chng đC giúp ng2i h7c t3 kiCm tra, đánh giá vi4c h7c nh'm phát huy tính tích c3c, kh tìm tịi, h7c h(i cFa h7c sinh thông qua trc nghi4m t3 đ1ng kiCm tra báo k6t qu làm ĐBc bi4t, trang web hóa h7c l8p 12 đc thi6t k6 v8i banner chF y6u to t) chng trình Sothink SWF Easy v8i file flash hình nh đ1ng sinh đ1ng đ*p mt riêng cho n1i dung t)ng trang Không nhng th6, trang n1i dung hóa h7c có thêm phAn t li4u v8i nhng ki6n thc hóa h7c cung cp nhng thơng tin giúp giáo viên có thêm nhng t li4u đC ph9c v9 cho cơng tác ging dy m1t cách tDt hn Ngồi m1t sD thông tin ki6n thc cp nht cAn thi6t ph9c v9 cho đ2i sDng hàng ngày có liên quan đ6n ng d9ng hóa h7c nhng t li4u b# ích đc đa vào trang hóa h7c đ2i sDng hE tr tDi đa cho giáo viên ph# thơng điCm m8i điCm làm nên s3 khác bi4t cFa đ5 tài thi6t k6 trang web hóa h7c l8p 12 so v8i đ5 tài thi6t k6 trang web hóa h7c l8p 10 l8p 11 Xut phát t) m9c đích trên, n1i dung cFa lun văn đc xây d3ng nh sau: PhAn I: PhAn m% đAu PhAn II: PhAn n1i dung Đây phAn cFa đ5 tài, phAn g+m n1i dung chính: nghiên cu c s% lý thuy6t h8ng dn cách th3c hi4n: - Tìm hiCu m1t cách t#ng quan v5 Macromedia Dreamweaver - Gi8i thi4u s lc v5 ngôn ng hE tr thi6t k6 web HTML Javascript - Cách thc thi6t k6 website hóa h7c l8p 12 PhAn III: K6t lun h8ng phát triCn cFa đ5 tài MC LC PH5N M Đ5U LÝ DO CH,N Đ- TÀI - 1.1 1.2 1.3 Hoàn cnh th3c t6 M9c đích cFa đ5 tài - Gi8i hn cFa đ5 tài CÁC GI THUY/T C0A Đ- TÀI - PH12NG PHÁP VÀ PH12NG TI3N TH4C HI3N Đ- TÀI - 3.1 Phng pháp 3.2 Phng ti4n CÁC B15C TH4C HI3N Đ- TÀI CÁC THU6T NG7 S8 D9NG TRONG Đ- TÀI - PH5N NI DUNG T:NG QUAN V- MACROMEDIA DREAMWEAVER - 1.1.Gi8i thi4u v5 Macromedia Dreamweaver 1.2 Gi8i thi4u giao di4n làm vi4c cFa Macromedia Dreamweaver GI5I THI3U S2 L1;C V- NGÔN NG7 H< TR; THI/T K/ WEB HTML VÀ JAVASCRIPT - 2.1 Ngôn ng HTML 2.2 Ngôn ng JavaSript - THI/T K/ WEBSITE HÓA H,C L5P 12 - 11 3.1 Xây d3ng mơ hình trang web 11 3.2 To website Hóa h7c l8p 12 12 3.3 Xây d3ng trang html theo t)ng chF đ5 13 3.3.1 Xây d3ng trang chF index.html - 13 3.3.2.Xây d3ng trang n1i dung hóa h7c - 19 3.3.3 Xây d3ng trang trc nghi4m 27 3.3.4 Xây d3ng trang l!ch s hóa h7c 34 3.3.5 Xây d3ng trang flash hóa h7c 38 3.3.6 Xây d3ng trang hóa h7c đ2i sDng 42 3.3.7 Xây d3ng trang gii trí 45 PH5N K8T LUN K/T QU VÀ Ý NGH=A TH4C TI>N C0A Đ- TÀI - 54 NH7NG H?N CH/ C0A Đ- TÀI 54 H15NG PHÁT TRI@N C0A Đ- TÀI 54 TÀI LIU THAM KHO PH LC Thi1t k1 trang web hóa h2c l3p 12 PH5N M Đ5U LÝ DO CH4N Đ TÀI 1.1 Hoàn cnh thc t Ngày nay, khoa h7c k thut ngày phát triCn vt bt đBc bi4t % th6 k 21 ng2i ngày chng ki6n s3 phát triCn cFa n5n kinh t6 tri thc ngày h8ng t8i “xã h1i thông tin” thC hi4n rõ nht lnh v3c công ngh4 thông tin làm cho tin h7c, internet tr% thành ni tìm ki6m, trao đ#i, chia s$ thơng tin ki6n thc m1t cách nhanh chóng đem li hi4u qu thi6t th3c ĐBc bi4t, ngày v8i xu th6 quDc t6 hóa n5n kinh t6 th6 gi8i giáo d9c đc xem m1t m"i nh7n mà mEi quDc gia cAn phi đBc bi4t quan tâm Trong đ#i m8i phng pháp giáo d9c m1t vn đ5 then chDt; nht ging dy hóa h7c ngày h8ng đ6n phát huy tính đ1ng, sáng to, t3 khám phá cFa h7c sinh vi4c ng d9ng tin h7c, internet vào ging dy hóa h7c tht s3 cAn thi6t cAn đc khuy6n khích Chính vy, đ5 tài: “Thi6t k6 trang web hóa h7c l8p 12” mà tơi ch7n % đây, ngồi s3 ti6p nDi cFa đ5 tài thi6t k6 trang web hóa h7c l8p 10 l8p 11 đC có thC to trang web tng đDi hoàn chnh v5 chng trình hóa h7c ph# thơng mà cịn nh'm m9c đích to s3 lơi cuDn hp dn, tăng s3 u thích cFa h7c sinh đDi v8i mơn hóa h7c nh'm cung cp nhng thông tin t li4u giúp xây d3ng n1i dung ging sinh đ1ng hE tr cho giáo viên % tr2ng ph# thông, sinh viên, h7c sinh, đBc bi4t nhng đ1c gi u thích mơn hóa h7c nhng thơng tin t li4u hóa h7c đC ging dy h7c tp hóa h7c m1t cách tDt hn Hi4n có rt nhi5u phAn m5m hE tr thi6t k6 web nh: Microsoft Office Frontpage, Macromedia Dreamweaver 8…Trong sD đó, Macromedia Dreamweaver phAn m5m hE tr thi6t k6 web ph# bi6n, đn gin ti4n li Chính vy, tơi ch7n chng trình làm cơng c9 cho vi4c th3c hi4n đ5 tài cFa 1.2 Mc đích ca đ7 tài M9c đích cFa đ5 tài to nên m1t trang web hóa h7c theo chng trình l8p 12 nâng cao Sau đ5 tài hoàn thành sA gi8i thi4u t8i nhng ng2i quan tâm tp tài li4u h8ng dn cách thi6t k6 m1t trang web hóa h7c l8p 12 1.3 Gii hEn ca đ7 tài Đ5 tài th3c hi4n to trang web hóa h7c l8p 12 ch d3a chng trình hE tr thi6t k6 web Macromedia Dreamweaver v8i ngôn ng hE tr HTML Javascript CÁC GI THUY8T CA Đ TÀI Đ5 tài sau hoàn thành sA g+m phAn: § PhAn 1: Trang web hóa h7c l8p 12 cha tồn b1 n1i dung cFa chng trình hóa h7c l8p 12 nâng cao; m1t sD thơng tin t li4u hóa h7c đC giáo viên ging dy mơn hóa h7c có thC tham kho thêm, đon video thí nghi4m; flash hóa h7c; trc nghi4m ki6n thc cuDi mEi chng có thC kiCm tra k6t qu làm bài, báo đáp án, k6t qu làm; chuyên m9c hóa h7c đ2i sDng; trang gii trí có thC giúp ng2i h7c thoi mái có thC v)a h7c v)a th giãn § PhAn 2: Tp tài li4u h8ng dn cách thc thi6t k6 m1t trang web hóa h7c hồn chnh cung cp thêm thông tin đC nhng ng2i quan tâm có thC tham kho, b# sung nhng thơng tin đC vn d9ng tin h7c vào ging dy hóa h7c m1t cách tDt hn PH16NG PHÁP VÀ PH16NG TIN THC HIN Đ TÀI GV h43ng d5n: ThS.GVC Hu6nh Kim Liên SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 3.1 PhD ng pháp - Tìm hiCu phAn m5m thi6t k6 web: Macromedia Dreamweaver ngôn ng hE tr: HTML JavaScript - Tìm hiCu thêm m1t sD phAn m5m hE tr cho vi4c thi6t k6 web nh: Sothink DHTML Menu 8, Sothink SWF Easy - Tìm hiCu cách thc thi6t k6 m1t trang web - Tìm ki6m thơng tin, d li4u son câu h(i trc nghi4m đC đa vào trang web 3.2 PhD ng tiCn - Máy tính - PhAn m5m thi6t k6 web: Macromedia Dreamweaver - Các phAn m5m hE tr khác: Sothink SWF Easy, Sothink DHTML Menu 8… - Các loi sách son câu h(i trc nghi4m, sách giáo khoa l8p 12 nâng cao, loi sách tin h7c hE tr thi6t k6 web… - Mng internet CÁC B19C THC HIN Đ TÀI Đ5 tài th3c hi4n g+m giai đon: - Giai đon 1: Tham kho tài li4u, vi6t đ5 cng thi6t k6 trang web Th2i gian th3c hi4n: t) tháng 8/2009 đ6n tháng 3/2010 - Giai đon 2: Vi6t lun văn vi6t báo cáo Th2i gian th3c hi4n: t) tháng 4/2010 đ6n tháng 5/2010 - Giai đon 3: Báo cáo lun văn Th2i gian th3c hi4n: tháng 5/2010 CÁC THUT NG! S" DNG TRONG Đ TÀI WWW (World Wide Web): Mng thơng tin tồn cAu HTML (Hyper Text Markup Language): Ngơn ng đánh du siêu văn bn GV h43ng d5n: ThS.GVC Hu6nh Kim Liên SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 PH5N NI DUNG T#NG QUAN V MACROMEDIA DREAMWEAVER 1.1.Gii thiCu v7 Macromedia Dreamweaver Có rt nhi5u chng trình thi6t k6 web nhng Macromedia Dreamweaver m1t chng trình thơng d9ng, d dùng rt ti4n ích cho ng2i s d9ng V8i Macromedia Dreamweaver ta có thC d dàng phát triCn m1t trang web hoBc m1t website l8n Ta c"ng có thC m% trang web đc to t) phAn m5m son tho khác đC chnh sa Macromedia Dreamweaver m1t chng trình dùng đC to qun lý trang web PhAn cDt lõi cFa HTML - m1t ngôn ng cha hàng lot th$ dùng đC đ!nh ngha cu trúc cFa trang Ngoài ra, Macromedia Dreamweaver cịn m1t cơng c9 tr3c quan cho phép b# sung JavaScript, biCu mu, bng, hình nh minh h7a nhi5u đDi tng khác mà không cAn phi vi6t m1t đon mã Macromedia Dreamweaver cung cp cho ng2i s d9ng ch6 đ1 làm vi4c: - Code View: ch6 đ1 vi6t mã - Code and Design View: song song ch6 đ1 vi6t mã trình di n tr3c quan - Design View: ch6 đ1 trình di n tr3c quan 1u điCm nht cFa Macromedia Dreamweaver giúp gim nh* yêu cAu v5 vi6t mã, cho phép nhn tr3c ti6p hình nh đ1ng giàu kh liên k6t đ6n chng trình son tho hình nh Chính vy, chng trình phù hp cho vi4c trình di n nhng hình nh, nhng n1i dung có tính cht minh h7a m1t cách sinh đ1ng Đó m9c tiêu hàng đAu cFa vi4c thi6t k6 m1t trang web hóa h7c vDn địi h(i nhi5u % kh minh h7a trình di n đC giúp giáo viên, h7c sinh, đ1c gi có thC tìm thy nhng n1i dung cAn thi6t, nhng thơng tin b# ích, nhng hình nh minh h7a, thí nghi4m flash sinh đ1ng, nhng phút th giãn thoi mái v8i nhng câu chuy4n vui, nhng ăn đBc sc…làm cho hóa h7c tr% nên hp dn, thú v! cAn đc khám phá 1.2 Gii thiCu giao diCn làm viCc ca Macromedia Dreamweaver ĐC kh%i đ1ng Macromedia Dreamweaver 8, ta vào Start/ Programs/ Macromedia/ Macromedia Dreamweaver GV h43ng d5n: ThS.GVC Hu6nh Kim Liên SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 Khi giao di4n làm vi4c cFa Macromedia Dreamweaver có dng nh sau: Mơi tr2ng làm vi4c cFa Macromedia Dreamweaver có dng nh sau: (1) Thanh tiêu đ5: cha tên cFa trang ta thi6t k6 (2) Thanh menu: ni cha l4nh khác nhau, l4nh ta có thC truy xut, s d9ng b'ng phím tt hoBc bng kiCm soát GV h43ng d5n: ThS.GVC Hu6nh Kim Liên SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 (3) Thanh Insert: Insert đc mBc đ!nh % mEi th$ sA hiCn th! chc khác nút icon tng ng mà ta có thC s d9ng đC chèn vào trang thi6t k6 cFa (4) Thanh cơng c9 cha nút l4nh: § Code: hiCn th! % ch6 đ1 vi6t mã nh sau: § Split: hiCn th! % c ch6 đ1: ch6 đ1 vi6t mã ch6 đ1 thi6t k6 tr3c quan: § Design: hiCn th! ch6 đ1 thi6t k6 tr3c quan: GV h43ng d5n: ThS.GVC Hu6nh Kim Liên SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 § Title: ni nhp tiêu đ5 cFa trang § Preview in IExplore 6.0: xem % ch6 đ1 trình duy4t (phím tt F12) (5) Thanh trng thái: công c9 s d9ng đC ch7n th$ h+ s trang thi6t k6 (6) H1p kiCm soát Properties h1p kiCm soát ng cnh, tùy ch7n hiCn th! sA tùy thu1c vào phAn t ch7n (7) Đây bng đi5u khiCn, có thC m% r1ng hoBc thu nh( cAn thi6t ĐC có thC thi6t k6 m1t trang web đòi h(i ng2i thi6t k6 phi có nhng hiCu bi6t nht đ!nh v5 chng trình thi6t k6 web ngơn ng hE tr thi6t k6 web, đBc bi4t có thC x lý đc nhng tình huDng phát sinh trình thi6t k6 m1t trang web Chính vy vi4c tìm hiCu v5 ngôn ng hE tr thi6t k6 web vô quan tr7ng Sau đây, tơi sA trình bày m1t cách s lc v5 hai ngôn ng hE tr thi6t k6 web ph# bi6n hi4n nay: HTML ngôn ng Javascript Đó c"ng hai ngơn ng mà tơi s d9ng tồn b1 q trình thi6t k6 trang web hóa h7c l8p 12 cFa GI9I THIU S6 L1$C V NGÔN NG! H% TR$ THI8T K8 WEB HTML VÀ JAVASCRIPT: 2.1 Ngôn ng& HTML: HTML ngôn ng đánh du chu&n dùng lp trình tài li4u World Wide Web, tài li4u tp tin văn bn đn gin Ngôn ng HTML dùng th$ (tag) hoBc đon mã l4nh đC ch cho trình duy4t cách hiCn th! thành phAn cFa trang nh text… đáp li nhng thao tác cFa ng2i dùng b%i thao tác n phím nhp chu1t Tên tag không phân bi4t ch hoa ch th2ng tag có thC l+ng vào Các trình duy4t th2ng khơng báo lEi cú pháp HTML N6u vi6t sai cú pháp ch dn đ6n hiCn th! không v8i k6t qu d3 đ!nh Sau cu trúc t#ng quát m1t trang web: Tiêu đ5 trang web N1i dung trang web Trong đó: Th$ đAu trang : Th$ % đAu trang web tnh % cuDi trang Trang web đc bt đAu k6t thúc b%i th$ Th$ bt đAu : Th$ đánh du điCm bt đAu phAn đAu heading cFa trang web Th$ có thC b( qua Th$ tiêu đ5 : Th$ ch đ!nh tiêu đ5 cFa trang web Tiêu đ5 sA xut hi4n tiêu đ5 cFa trình duy4t Th$ ch hp l4 đa vào bên phAn Th$ thân trang: dùng ch đ!nh bt đAu k6t thúc phAn n1i dung trang web GV h43ng d5n: ThS.GVC Hu6nh Kim Liên SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 Khi ta thu đc % ch6 đ1 trình duy4t nút l4nh nh sau: * Trang hóa h7c đ2i sDng hhds-index.html: - C ch6 đ1 design, trang hhds-index.html nh sau: - ĐC chèn n1i dung ng d9ng hóa h7c vào đ2i sDng liên k6t đ6n trang con, ta ti6n hành nh sau: Chia dịng phía d8i sau banner làm c1t: + C1t th nht: ta click Insert/ Table đC chèn vào m1t table sau chia table thành Ơ th nht ta ti6p t9c chia thành dòng: Dòng th nht ta ti6n hành chèn vào hình nh minh h7a, dịng th hai chèn vào đon text ghi tiêu đ5 n1i dung cFa thông tin ng d9ng hóa h7c vào đ2i sDng C hình nh đon text đ5u đc liên k6t đ6n trang cha n1i dung ng d9ng hóa h7c tng ng Fng v8i mEi thơng tin ng d9ng hóa h7c đon code thu đc nh sau: GV h43ng d5n: ThS.GVC Hu6nh Kim Liên 43 SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 Lm d9ng vitamin E có thC b! gim tu#i th7 chi ti6t K6t qu thu đc % ch6 đ1 trình duy4t trang hóa h7c- đ2i sDng nh sau: - Chèn vào liên k6t v5 đAu trang web tng t3 nh % trang n1i dung hóa h7c Đon code s d9ng là: V5 đAu trang * Trang hóa h7c đ2i sDng cha thơng tin: Ta ti6n hành chèn n1i dung tng ng vào nh sau: - Chia dịng phía d8i banner thành c1t C c1t th nht, ta ti6n hành chèn vào đon text đc trang trí cha tiêu đ5 cFa thơng tin ng d9ng hóa h7c vào đ2i sDng - Chèn vào dòng ti6p theo m1t table v8i dòng Dòng th nht chèn vào hình nh minh h7a chèn vào dịng th hai n1i dung thơng tin hóa h7c ng v8i tiêu đ5 - To liên k6t v8i v5 đAu trang web ti6n hành tng t3 nh % trang hhdsindex.html Ví d9: v8i trang đeo đá quý đC cha b4nh, ta thu đc % ch6 đ1 design nh sau: GV h43ng d5n: ThS.GVC Hu6nh Kim Liên 44 SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 Và % ch6 đ1 trình duy4t là: 3.3.7 Xây dng trang gii trí Trang gii trí cha n1i dung v5 giai thoi hóa h7c, đD vui hóa h7c, th vui hóa h7c, th6 gi8i nh, &m th3c, nhc flash game giúp ng2i h7c có nhng giây phút th giãn sau nhng căng thBng h7c tp, có thC v)a h7c v)a chi Trang gii trí gtg-index.html trang tng ng đc thi6t k6 m1t giao di4n Trong trang đc chèn thêm n1i dung vào tng t3 nh cách thi6t k6 trang l!ch s hóa h7c * Chèn banner: - Dòng đAu tiên đC chèn banner ti6n hành chia làm +Ơ th nht chèn vào hình nh b'ng cách ch7n: Insert/Image Ch7n hình % th m9c gtg/gtg-index/hinh10 Click OK đC chèn hình cAn chèn vào Chèn vào hình đ1ng hoar.gif % th m9c đC làm background Ch7n màu n5n tng ng màu xanh Đon code s d9ng là: +Ơ th hai: chèn hình flash to t) chng trình Sothink SWF Easy b'ng l4nh: Insert/Media/Flash Khi thu đc giao di4n cFa banner nh sau: * Chèn liên k6t đ6n trang: trang chF, trang n1i dung hóa h7c, trang l!ch s hóa h7c, trang flash hóa h7c, trang hóa h7c- đ2i sDng, trang gii trí tng t3 nh ti6n hành đDi v8i trang l!ch s hóa h7c GV h43ng d5n: ThS.GVC Hu6nh Kim Liên 45 SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 Đon code cAn chèn vào là: Chèn vào gia đon đon code nh sau: Thu đc nút liên k6t nh sau: * Chèn vào hình nh đ1ng trang trí: Chèn hình nh tng t3 ta click ch7n: Insert/Image Sau ch7n hình nh % th m9c gtg/gtg-index: +Hình Fireworks-01-june.gif v8i thơng sD là: width="79" height="100" +Hình Anh_75.gif v8i thơng sD là: width="154" height="109" C hình đ5u đBt th nht cFa dịng th ba * To nút liên k6t đ6n trang cFa trang gii trí: GV h43ng d5n: ThS.GVC Hu6nh Kim Liên 46 SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 Ti6n hành chèn vào nút liên k6t dng flash to t) chng trình Sothink SWF Easy Ch7n Insert/ Media/Flash Ch7n th m9c cha nút l4nh dng flash cAn chèn là: gtg/gtg-index Ch7n hình 10 click ch7n OK đC hồn thành vi4c chèn hình Ta thu đc nút l4nh liên k6t dng flash nh sau: * To phAn n1i dung cho trang: - Trang giai thoi hóa h7c, trang đD vui hóa h7c, trang th vui hóa h7c đc thi6t k6 tng t3 Ch khác hình nh đ1ng chèn vào: + C trang giai thoi hóa h7c trang th vui hóa h7c đ5u chèn vào hình nh đ1ng EC969CBD55D74B5CAE3F2B95E6BFB40B.gif starwars.gif Riêng trang th vui hóa h7c cịn chèn thêm hình nh Picture1.gif vào - Trang nhc flash, th6 gi8i nh &m th3c đc thi6t k6 tng t3 Sau nhúng n1i dung tng ng v8i trang vào ta sA đc trang cFa trang gii trí ` Ví d9: Trang giai thoi hóa h7c % ch6 đ1 Design nh sau: Và % ch6 đ1 trình duy4t nh sau: GV h43ng d5n: ThS.GVC Hu6nh Kim Liên 47 SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 Ví d9: Trang đD vui hóa h7c đc thi6t k6 giDng tng t3 phAn giao di4n nh trang giai thoi hóa h7c nhng % phAn n1i dung đc thi6t k6 % ch6 đ1 design nh sau: Và % ch6 đ1 trình duy4t ta thu đc nh sau: GV h43ng d5n: ThS.GVC Hu6nh Kim Liên 48 SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 ĐC thu đc % ch6 đ1 trình duy4t nh vy, % ch6 đ1 design phAn n1i dung ta ti6n hành thay đ#i nh sau: Click Insert/Table ch7n 17 dòng c1t C1t th hai dòng th nht chèn vào đon text: “ĐG B?N MUGI GÌ?” đc trang trí v8i đon code nh sau:   ĐG B?N MUGI GÌ? C c1t th nht dòng th hai c1t th ba dòng th hai th3c hi4n tng t3 ta ti6n hành chia làm c1t: c1t th nht chèn vào sD th t3 cFa câu đD, c1t th hai chèn vào n1i dung cFa câu đD vui hóa h7c Đon code ta thu đc là:  

1.

MuDi làm b1t n%? Đem tr1n ln b1t nhào Trong sn xut bánh xDp Bánh ph+ng tôm, bánh bao?

 

  2. MuDi làm thuDc nh? Tráng lên mBt cu1n phim D8i tác d9ng ánh sáng Đang trng hóa thành đen Ti6n hành tng t3 nh vy cho dòng ti6p theo đ6n k6t thúc câu đD vui v5 muDi Dòng cuDi % c1t th ba k6t thúc câu đD vui v5 muDi, ta chèn vào liên k6t “Xem đáp án” đC ng2i đ7c có thC kiCm tra k6t qu d3 đốn cFa xem câu đD vui v5 muDi Khi ta thu đc đon code nh sau:     GV h43ng d5n: ThS.GVC Hu6nh Kim Liên 49 SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 Xem đáp án Và câu đD vui v5 khí ta c"ng ti6n hành tng t3 nh giDng nh câu đD v5 muDi Ví d9: Trang th6 gi8i nh % ch6 đ1 design nh sau: Khi % ch6 đ1 trình duy4t ta thu đc là: Ví d9: Trang game.html phAn n1i dung đc thay đ#i nh sau: Chèn vào game flash v8i hình nh thu đc % ch6 đ1 trình duy4t nh sau: GV h43ng d5n: ThS.GVC Hu6nh Kim Liên 50 SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 ĐC chèn game flash này, ta ti6n hành tng t3 giDng nh chèn vào banner dng flash cho trang tr8c đó: click Insert/Media/Flash ch7n game flash tng ng game “game_Tom_and_Jerry” % th m9c game Ví d9: Trang amthuc.html đc thi6t k6 % ch6 đ1 design nh sau: C phAn n1i dung ta ti6n hành chèn table: click Insert/Table v8i c1t 17 dòng Dòng th nht c1t th nht ta ti6n hành ch7n Insert/Image đC chèn vào hình nh ăn đc liên k6t v8i trang tng ng C"ng % dòng th nht c1t th hai ta chèn vào tên ăn l2i gi8i thi4u s lc v5 ăn dịng ch “ chi ti6t” đc liên k6t click ch7n sA hiCn th! n1i dung cách ch6 bi6n ăn Đon code thu đc là: Thnh thong đ#i kh&u v! b'ng sushi thay cm thơng th2ng. SUSHI CUHN THIT XƠNG KHĨI Bn t)ng th%ng thc sushi bao gi2 cha? chi ti6t Ti6n hành tng t3 nh đDi v8i dòng th ba, th năm,… đDi v8i ăn cịn li GV h43ng d5n: ThS.GVC Hu6nh Kim Liên 51 SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 Khi % ch6 đ1 trình duy4t ta thu đc trang amthuc.html nh sau: Và trang sushi cuon thit xong khoi.html % ch6 đ1 trình duy4t nh sau: Ví d9: ĐC to trang nhc Flash % ch6 đ1 Design phAn n1i dung đc thi6t k6 nh sau: Ta ti6n hành chèn vào table b'ng cách ch7n: Insert/table ch7n c1t 12 dòng C dòng th nht % c c1t ta đ5u ti6n hành chèn vào m1t hình nh đ1ng minh h7a cho nhc Flash tên nhc tng ng C hình nh chèn vào tên nhc đ5u đc liên k6t đ6n trang nhc flash v8i nhc tng ng Đon code thu đc % mEi ô nh sau: B.N TÌNH CA MÙA ĐÔNG GV h43ng d5n: ThS.GVC Hu6nh Kim Liên 52 SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 C dịng th 3, th 5… ta ti6n hành tng t3 nh vy cho nhc flash li Ta thu đc % ch6 đ1 design trang nhacflash.html nh sau: Trang nhc Flash % ch6 đ1 trình duy4t nh sau: GV h43ng d5n: ThS.GVC Hu6nh Kim Liên 53 SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 PH5N K8T LUN K8T QU VÀ Ý NGH.A THC TI/N CA Đ TÀI Đ5 tài hoàn thành m9c tiêu ban đAu đ5 ra: - Gi8i thi4u chng trình thi6t k6 web Macromedia Dreamweaver v8i ngôn ng hE tr HTML JavaScript - Đa tp tài li4u h8ng dn cách thi6t k6 trang web Hóa h7c l8p 12 - Thi6t k6 trang web hóa h7c l8p 12 v8i n1i dung: l!ch s hóa h7c, n1i dung hóa h7c, flash hóa h7c, hố h7c đ2i sDng, trang gii trí v8i nhng thơng tin t li4u v5 l!ch s nhà hóa h7c, nhng ng d9ng cFa hóa h7c vào đ2i sDng ĐBc bi4t trang trc nghi4m tr3c tuy6n % cuDi mEi chng có thC giúp ng2i h7c t3 kiCm tra đánh giá k6t qu h7c tp m1t cách nhanh chóng ti4n li Trang gii trí đem đ6n s3 thoi mái, th giãn sau nhng phút giây làm vi4c, h7c tp căng thBng v8i th6 gi8i nhc flash, games, nhng giai thoi vui nhng bc nh ng1 nghnh đ*p mt Ngoài ra, n1i dung hóa h7c cịn mang đ6n cho q thAy cơ, h7c sinh nhng ng2i u thích mơn hóa h7c nhng t li4u v5 hóa h7c, nhng đon video thí nghi4m tht b# ích đC làm t li4u ging dy giúp cho ging phong phú hn NH!NG H3N CH8 CA Đ TÀI Do th2i gian th3c hi4n đ5 tài có hn ki6n thc v5 tin h7c hn ch6 nên cha vn d9ng m1t cách tri4t đC h6t nhng tính cFa chng trình Macromedia Dreamweaver vào vi4c thi6t k6 trang web N1i dung hóa h7c l8p 12 đa vào trang web đBc bi4t nhng đon video, hình nh minh h7a, flash thí nghi4m cha đc phong phú hoàn thi4n H19NG PHÁT TRI0N CA Đ TÀI Đ5 tài cung cp đ6n quý thAy cô, sinh viên, h7c sinh nhng ng2i u thích mơn hóa h7c nhng thơng tin t li4u chng trình hóa h7c l8p 12 tp tài li4u h8ng dn thi6t k6 trang web hóa h7c l8p 12 Do đó, có thC k6t hp v8i chng trình hóa h7c l8p 10, l8p 11 trang web v5 l+ng ghép giáo d9c mơi tr2ng ging dy hóa h7c đC to nên trang web tng đDi hoàn chnh v5 hóa h7c % tr2ng ph# thơng Trong tng lai, có thC xây d3ng thêm di n đàn trao đ#i kinh nghi4m, chuyên m9c nhng ging đi4n t, giáo án đi4n t v5 chng trình hóa h7c ph# thơng m9c đánh giá, góp ý cFa bn đ7c đC cho trang web ngày hoàn thi4n hn GV h43ng d5n: ThS.GVC Hu6nh Kim Liên 54 SV th7c hi8n: Nguy9n ThA Minh Khoa Thi1t k1 trang web hóa h2c l3p 12 TÀI LIU THAM KHO Ngô Ng7c An, Rèn luy8n kB giCi tốn hóa h2c 12, Nhà xut bn giáo d9c, 2008 Nguy n Đc Chuy (chF biên), ĐE Th! Hi, Nguy n Th! Hng, Câu hDi trEc nghi8m nhiFu l7a ch2n hóa h2c 12, Nhà xut bn giáo d9c, 2008 Đoàn Th! Di4p, Nguy n Kim Hnh, Nguy n Tn Trung, Bài t p trEc nghi8m hóa h2c 12, Nhà xut bn giáo d9c, 2008 Quách Tr!nh H+ng Di m, Thi1t k1 trang web hóa h2c l3p 10, Lun văn tDt nghi4p sinh viên tr2ng đi h7c CAn th năm 2008 Nguy n Văn Hùng, GiCi nhanh trEc nghi8m hóa h2c 12, Nhà xut bn giáo d9c, 2008 Nguy n Th! Anh Lng, TrAn Th! Thanh, TrAn Anh Tun, Câu hDi trEc nghi8m hóa h2c phn h u c 12, Nhà xut bn giáo d9c Vi4t Nam, 2009 Nguy n Tr2ng Sinh, Lê Minh Hoàng, Hoàng Đc Hi, Macromedia Dreamweaver MX, Nhà xut bn lao đ1ng - xã h1i, 2004 Lê Anh Th, Thi1t k1 trang web hóa h2c l3p 11, Lun văn tDt nghi4p sinh viên tr2ng đi h7c CAn Th năm 2009 V" B1i Tuy5n, Chuy8n k vF nh ng nhà hóa h2c ni ti1ng th1 gi3i, Nhà xut bn niên, 2005 10 Nguy n Xuân Tr2ng, Nh ... di4n cFa trang web hóa h7c l8p 12 Trang trang gi8i thi4u n1i dung cFa trang web cha liên k6t đ6n trang nh: trang n1i dung hóa h7c, trang l!ch s hóa h7c, trang flash hóa h7c, trang hóa h7c –... truy cp trang web THI8T K8 WEBSITE HÓA H4C L9P 12 3.1 Xây dng mơ hình trang web Trang web hóa h7c l8p 12 đc hình thành g+m trang chF cha liên k6t đ6n trang tng ng: - Trang n1i dung hóa h7c:... Thi1t k1 trang web hóa h2c l3p 12 MƠ HÌNH TRANG WEB HĨA H,C L5P 12 Trang chF N1i dung hóa h7c Chng Bài L!ch s hóa h7c Chng … Bài … Bác h7c Flash hóa h7c Bác h7c … Flash Trang gii trí Hóa h7cđ2i