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 tD
Trang 1Tê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
ThS GVC Hu6nh Kim Liên Nguy7n Th8 Minh Khoa L2p: S1 ph9m Hóa K32
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
ThS GVC Hu6nh Kim Liên Nguy7n Th8 Minh Khoa L2p: S1 ph9m Hóa K32
Mã sA SV: 2060408
CBn ThC, 2010
Trang 2L2I CM 6N
Sau m1t th2i gian th3c hi4n, đ5 tài: “Thi6t k6 trang web hóa h7c l8p 12” đã hoàn thành theo đúng m9c tiêu và yêu cAu đBt ra ĐC hoàn thành tDt đ5 tài này, ngoài 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ô và s3 giúp đ cFa các bn trong l8p Nay tôi xin chân thành gi l2i cm n sâu sc nht đ6n:
§ Cô Hunh Kim Liên - Thc s , Ging viên chính b1 môn Hóa - khoa s phm - tr2ng Đi h7c CAn Th ng2i đã tn tình h8ng d n và có nh ng ch bo, góp ý sâu sc to m7i đi5u ki4n thun li giúp tôi trong suDt quá trình tôi th3c hi4n đ5 tài
§ Tt c quý thAy cô b1 môn Hóa - khoa S phm - tr2ng Đi h7c CAn Th đã tn tình ch d n, truy5n đt ki6n th c giúp tôi có đc nh ng ki6n th c quý báu làm n5n tng đC có thC hoàn thành đ5 tài và ph9c v9 cho công tác sau này
Và xin chân thành cm n nh ng ng2i bn thân và toàn thC các bn l8p s phm Hóa khóa 32 đã nhi4t tình giúp đ và có nh ng ý ki6n đóng góp giúp tôi hoàn thành đ5 tài này
Xin chân thành cm n!
Nguy n Th! Minh Khoa
Trang 3Thông qua vi4c s d9ng phAn m5m thi6t k6 web là Macromedia Dreamweaver 8, tác gi muDn gi8i thi4u tp tài li4u h8ng d n thi6t k6 trang web hóa h7c l8p 12 và trang web tng đDi hoàn chnh v5 chng trình hóa h7c l8p 12 v8i các n1i dung: flash hóa h7c; l!ch s hóa h7c; n1i dung hóa h7c trong chng trình sách giáo khoa, nh ng đon video thí nghi4m, hình nh minh h7a; hóa h7c và đ2i sDng; trang gii trí và 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 năng tìm tòi, h7c h(i cFa h7c sinh thông qua trc nghi4m t3 đ1ng kiCm tra và báo k6t qu làm bài
ĐBc bi4t, trang web hóa h7c l8p 12 đc thi6t k6 v8i các banner chF y6u to ra t) chng trình Sothink SWF Easy v8i các file flash hình nh đ1ng sinh đ1ng đ*p mt riêng cho n1i dung t)ng trang Không nh ng th6, trang n1i dung hóa h7c có thêm phAn t li4u v8i nh ng ki6n th c hóa h7c cung cp nh ng thông tin giúp giáo viên có thêm nh ng t li4u đC ph9c v9 cho công tác ging dy m1t cách tDt hn Ngoài ra m1t sD thông tin ki6n th c cp nht cAn thi6t ph9c v9 cho đ2i sDng hàng ngày có liên quan đ6n ng d9ng hóa h7c cùng nh ng t li4u b# ích đc đa vào trang hóa h7c và đ2i sDng hE tr tDi đa cho các giáo viên ph# thông chính là điCm m8i và đ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 và 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 là phAn chính cFa đ5 tài, phAn này g+m 3 n1i dung chính: nghiên c u c s%
lý thuy6t và h8ng d n cách th3c hi4n:
- Tìm hiCu m1t cách t#ng quan v5 Macromedia Dreamweaver 8
- Gi8i thi4u s lc v5 ngôn ng hE tr thi6t k6 web HTML và Javascript
- Cách th c thi6t k6 website hóa h7c l8p 12
PhAn III: K6t lun và h8ng phát triCn cFa đ5 tài
Trang 4MC LC PH5N M Đ5U
1 LÝ DO CH,N Đ- TÀI -1
1.1 Hoàn cnh th3c t6 -1
1.2 M9c đích cFa đ5 tài -1
1.3 Gi8i hn cFa đ5 tài -1
2 CÁC GI THUY/T C0A Đ- TÀI -1
3 PH12NG PHÁP VÀ PH12NG TI3N TH4C HI3N Đ- TÀI -1
3.1 Phng pháp -2
3.2 Phng ti4n -2
4 CÁC B15C TH4C HI3N Đ- TÀI - 2
5 CÁC THU6T NG7 S8 D9NG TRONG Đ- TÀI - 2
PH5N NI DUNG 1 T:NG QUAN V- MACROMEDIA DREAMWEAVER 8 - 3
1.1.Gi8i thi4u v5 Macromedia Dreamweaver 8 - 3
1.2 Gi8i thi4u giao di4n làm vi4c cFa Macromedia Dreamweaver 8 - 3
2 GI5I THI3U S2 L1;C V- NGÔN NG7 H< TR; THI/T K/ WEB HTML VÀ JAVASCRIPT - 6
2.1 Ngôn ng HTML - 6
2.2 Ngôn ng JavaSript - 9
3 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 các 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 và đ2i sDng - 42
3.3.7 Xây d3ng trang gii trí - 45
PH5N K8T LUN 1 K/T QU VÀ Ý NGH=A TH4C TI>N C0A Đ- TÀI -54
2 NH7NG H?N CH/ C0A Đ- TÀI - 54
3 H15NG PHÁT TRI@N C0A Đ- TÀI - 54
TÀI LIU THAM KHO
PH LC
Trang 5ĐBc bi4t, ngày nay v8i xu th6 quDc t6 hóa n5n kinh t6 th6 gi8i thì giáo d9c đc xem
là m1t m"i nh7n mà mEi quDc gia cAn phi đBc bi4t quan tâm Trong đó đ#i m8i phng pháp giáo d9c là m1t vn đ5 then chDt; nht là trong ging dy hóa h7c ngày càng h8ng đ6n phát huy tính năng đ1ng, sáng to, t3 khám phá cFa h7c sinh thì vi4c ng d9ng tin h7c, internet vào ging dy hóa h7c là tht s3 cAn thi6t và cAn đc khuy6n khích
Chính vì vy, đ5 tài: “Thi6t k6 trang web hóa h7c l8p 12” mà tôi ch7n % đây, ngoài s3 ti6p nDi cFa đ5 tài thi6t k6 trang web hóa h7c l8p 10 và l8p 11 đC có thC to ra 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 d n, tăng s3 yêu thích cFa h7c sinh đDi v8i môn hóa h7c và nh'm cung cp nh ng thông tin t li4u giúp xây d3ng n1i dung bài ging sinh đ1ng hE tr cho các giáo viên % tr2ng ph# thông, sinh viên, h7c sinh, đBc bi4t là nh ng đ1c gi yêu thích môn hóa h7c nh ng thông tin t li4u hóa h7c đC ging dy và h7c tp hóa h7c m1t cách tDt hn Hi4n nay có rt nhi5u phAn m5m hE tr thi6t k6 web nh: Microsoft Office Frontpage, Macromedia Dreamweaver 8…Trong sD đó, Macromedia Dreamweaver 8 là phAn m5m
hE tr thi6t k6 web khá ph# bi6n, đn gin và ti4n li Chính vì vy, tôi đã ch7n chng trình này làm công c9 cho vi4c th3c hi4n đ5 tài cFa mình
1.2 Mc đích c a đ7 tài
M9c đích cFa đ5 tài là to nên m1t trang web hóa h7c theo chng trình l8p 12 nâng cao Sau khi đ5 tài hoàn thành sA gi8i thi4u t8i nh ng ng2i quan tâm tp tài li4u h8ng
d n cách thi6t k6 m1t trang web hóa h7c l8p 12
1.3 Gi i hEn c a đ7 tài
Đ5 tài th3c hi4n to ra trang web hóa h7c l8p 12 ch d3a trên chng trình hE tr thi6t k6 web là Macromedia Dreamweaver 8 v8i ngôn ng hE tr là HTML và Javascript
2 CÁC GI THUY8T C A Đ TÀI
Đ5 tài sau khi hoàn thành sA g+m 2 phAn:
§ PhAn 1: Trang web hóa h7c l8p 12 ch a toà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, các đon video thí nghi4m; flash hóa h7c; trc nghi4m ki6n th c cuDi mEi chng có thC kiCm tra k6t qu làm bài, báo đáp án, k6t qu bài làm; chuyên m9c hóa h7c và đ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 d n cách th c thi6t k6 m1t trang web hóa h7c hoàn chnh cung cp thêm thông tin đC nh ng ng2i quan tâm có thC tham kho, b# sung nh ng thông tin đC vn d9ng tin h7c vào ging dy hóa h7c m1t cách tDt hn
3 PH16NG PHÁP VÀ PH16NG TIN TH C HIN Đ TÀI
Trang 6- Tìm hiCu cách th c thi6t k6 m1t trang web
- Tìm ki6m thông tin, d li4u và 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 8
- 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, các loi sách tin h7c hE tr thi6t k6 web…
- Mng internet
4 CÁC B19C TH C HIN Đ TÀI
Đ5 tài th3c hi4n g+m 3 giai đon:
- Giai đon 1: Tham kho tài li4u, vi6t đ5 cng và 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 và vi6t bài 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
5 CÁC THUT NG! S" DNG TRONG Đ TÀI
WWW (World Wide Web): Mng thông tin toàn cAu.
HTML (Hyper Text Markup Language): Ngôn ng đánh du siêu văn bn.
Trang 7PH5N NI DUNG
1 T#NG QUAN V MACROMEDIA DREAMWEAVER 8
1.1.Gi i thiCu v7 Macromedia Dreamweaver 8
Có rt nhi5u chng trình thi6t k6 web nhng trong đó Macromedia Dreamweaver 8
là m1t chng trình thông d9ng, d dùng và rt ti4n ích cho ng2i s d9ng V8i
Macromedia Dreamweaver 8 ta có thC d dàng phát triCn m1t trang web hoBc m1t
website l8n Ta c"ng có thC m% ra các trang web đc to ra t) các phAn m5m son tho khác đC chnh sa
Macromedia Dreamweaver 8 là m1t chng trình dùng đC to và qun lý các trang web PhAn cDt lõi cFa nó là HTML - m1t ngôn ng ch a hàng lot các th$ dùng đC đ!nh ngh a cu trúc cFa trang Ngoài ra, Macromedia Dreamweaver 8 còn là m1t công c9 tr3c quan cho phép b# sung JavaScript, biCu m u, bng, hình nh minh h7a và nhi5u đDi tng khác mà không cAn phi vi6t m1t đon mã nào
Macromedia Dreamweaver 8 cung cp cho ng2i s d9ng 3 ch6 đ1 làm vi4c:
- Code View: ch6 đ1 vi6t mã
- Code and Design View: song song ch6 đ1 vi6t mã và trình di n tr3c quan
- Design View: ch6 đ1 trình di n tr3c quan
1u điCm nht cFa Macromedia Dreamweaver 8 là giúp gim nh* các yêu cAu v5 vi6t
mã, cho phép nhn tr3c ti6p các hình nh đ1ng và giàu kh năng liên k6t đ6n các chng trình son tho hình nh Chính vì vy, chng trình này phù hp cho vi4c trình di n nh ng hình nh, nh ng n1i dung có tính cht minh h7a m1t cách sinh đ1ng Đó là m9c tiêu hàng đAu cFa vi4c thi6t k6 m1t trang web hóa h7c vDn đòi h(i nhi5u % kh năng minh h7a trình di n đC giúp giáo viên, h7c sinh, đ1c gi có thC tìm thy nh ng n1i dung cAn thi6t, nh ng thông tin b# ích, nh ng hình nh minh h7a, thí nghi4m flash sinh đ1ng, nh ng phút th giãn thoi mái v8i nh ng câu chuy4n vui, nh ng món ăn đBc sc…làm cho hóa h7c tr% nên hp d n, thú v! cAn đc khám phá
1.2 Gi i thiCu giao diCn làm viCc c a Macromedia Dreamweaver 8
ĐC kh%i đ1ng Macromedia Dreamweaver 8, ta vào Start/ Programs/ Macromedia/ Macromedia Dreamweaver 8
Trang 8Khi đó giao di4n làm vi4c cFa Macromedia Dreamweaver 8 có dng nh sau:
Môi tr2ng làm vi4c cFa Macromedia Dreamweaver 8 có dng nh sau:
(1) Thanh tiêu đ5: ch a tên cFa trang ta đang thi6t k6
(2) Thanh menu: là ni ch a các l4nh khác nhau, các l4nh này ta có thC truy xut, s d9ng b'ng các phím tt hoBc bng kiCm soát
Trang 9(3) Thanh Insert: trong thanh Insert đc mBc đ!nh % mEi th$ sA hiCn th! các ch c năng khác nhau và các nút icon tng ng mà ta có thC s d9ng đC chèn vào trang thi6t k6 cFa mình
(4) Thanh công c9 ch a các nút l4nh:
§ Code: hiCn th! % ch6 đ1 vi6t mã nh sau:
§ Split: hiCn th! % c 2 ch6 đ1: ch6 đ1 vi6t mã và ch6 đ1 thi6t k6 tr3c quan:
§ Design: hiCn th! ch6 đ1 thi6t k6 tr3c quan:
Trang 10§ 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: đây là công c9 s d9ng đC ch7n th$ trong h+ s trang thi6t k6 (6) H1p kiCm soát Properties là h1p kiCm soát ng cnh, các tùy ch7n hiCn th! sA tùy thu1c vào các phAn t đã ch7n
(7) Đây là bng đi5u khiCn, có thC m% r1ng hoBc thu nh( khi cAn thi6t
ĐC có thC thi6t k6 m1t trang web đòi h(i ng2i thi6t k6 phi có nh ng hiCu bi6t nht đ!nh v5 chng trình thi6t k6 web và ngôn ng hE tr thi6t k6 web, đBc bi4t là có thC x
lý đc nh ng tình huDng phát sinh trong quá trình thi6t k6 m1t trang web Chính vì vy vi4c tìm hiCu v5 ngôn ng hE tr thi6t k6 web là vô cùng 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 và ngôn ng Javascript Đó c"ng chính là hai ngôn ng mà tôi s d9ng trong toàn b1 quá trình thi6t k6 trang web hóa h7c l8p 12 cFa mình
2 GI9I THIU S6 L1$C V NGÔN NG! H% TR$ THI8T K8 WEB HTML VÀ JAVASCRIPT:
Sau đây là cu trúc t#ng quát m1t trang web:
Th$ tiêu đ5 <title></title>: Th$ <title> ch đ!nh tiêu đ5 cFa trang web Tiêu đ5 này
sA xut hi4n trên thanh tiêu đ5 cFa trình duy4t Th$ này ch hp l4 khi đa vào bên trong phAn <head>
Th$ thân trang<body></body>: dùng ch đ!nh bt đAu và k6t thúc phAn n1i dung trang web
Trang 11Macromedia Dreamweaver 8 cho phép ng2i s d9ng son tho tr3c quan, k6t qu sinh ra HTML tng ng Cu trúc c bn cFa m1t trang html t3 đ1ng phát sinh tng
ng khi ta to ra m1t trang html m8i
Khi trình duy4t hiCn th! n1i dung m1t trang web, nó sA tìm ki6m trong đó nh ng đon
mã đBc bi4t là các th$ (tag) đc đánh du b%i kí hi4u <>, và căn c vào đó đC thC hi4n
Cú pháp t#ng quát cFa m1t th$ là: <tên th'>chuEi văn bn</tên th'> Trong đó: có 2
v M1t sD th$ khác th2ng gBp trong quá trình thi6t k6:
- Th$ to bng <table><tr><td></td></tr></table>: s d9ng th$ <table> đC bt
đAu và k6t thúc m1t bng S d9ng kèm theo v8i th$ <tr></tr> đC thêm m1t dòng trong bng và th$ <td></td> đC thêm vào m1t ô trên dòng
ĐC thêm vào các ô tri dài trên nhi5u c1t, dòng khác dùng thu1c tính colspan = n
§ n (n là sD):quy đ!nh đ1 r1ng, đ1 cao là n pixels
§ n %: quy đ!nh đ1 r1ng, đ1 cao là n % đ1 r1ng, cao cFa đDi tng ch a bng
+ cellspacing = “sD”: khong cách gi a 2 ô liên ti6p
+ cellpadding = “sD”: khong cách t) góc ô đ6n n1i dung ô
+ bgcolor = “màu”:màu n5n cFa bng
+ background = “đia_ch_nh”: đ!a ch cFa file nh làm n5n cho bng
- Th$ đ!nh dng kí t3:
+ Đm, nghiêng, gch chân: <b></b>,<i></i>,<u></u>
+ Ch sD trên: <sup></sup> Ví d9: % ch6 đ1 code là : Fe<sup>3+</sup> thì ta thu
Trang 12§ color = “màu”
Vi6t b'ng tên ti6ng Anh: red, blue…
Vi6t dng # RRGGBB, RR,…Ví d9: #FFFFFF: trng, #FF0000: đ(
- Th$ đ!nh dng tiêu đ5, đon văn, ngt dòng:
+ Tiêu đ5: v8i kích th8c nh( dAn:
<h1></h1>
…
<h6></h6>
+ Ngt văn bn sang đon (paragraph) m8i: <p></p> Thành phAn </p> cuDi đon
không nht thi6t phi có Th$ này đc đ!nh ngh a nh sau: <p align =align - type>, trong
đó align = type dùng ch đ!nh canh đon m8i: Align-type = left (canh trái), type = right (canh phi) hoBc center (canh gi a)
align-+ Th$ xuDng dòng không sang đon m8i <br></br>: ngt xuDng dòng m8i nhng
v n thu1c cùng m1t đon hi4n hành
+ Thêm đ2ng thBng n'm ngang <hr></hr>: thêm đ2ng thBng n'm ngang trong trang web
+ Width = “ r1ng”, height = “cao”: đ1 r1ng và đ1 cao cFa nh:
§ n (n là sD): quy đ!nh đ1 r1ng, đ1 cao cFa nh là n pixels
§ n %: quy đ!nh đ1 r1ng, đ1 cao là n % đ1 r1ng, đ1 cao cFa đDi tng ch a nh
+ Border = “n”: n là sD, kích th8c đ2ng vi5n nh, n = 0: nh không có đ2ng vi5n
+ Align = “ chnh hình nh”: left, right, top,…
- Th$ to liên k6t <a>đDi tng liên k6t</a>:
* Thu1c tính:
Href: ch đ!nh đ!a ch liên k6t
Target trình duy4t có thC np đDi tng liên k6t vào m1t ca s# ch đ!nh b'ng th$ này N6u cha có ca s#, trình duy4t sA m% ca s# m8i
Chú ý:
Liên k6t v8i đ!a ch email thì đBt href = “mailto:đia_chi_email”
Th3c hi4n l4nh JavaScript khi click chu1t thì đBt href = “javascript: l4nh”
- Th$ to form: <form></form>
* Thu1c tính:
+ Name = “tên form”: không quan tr7ng lm
+ Action = “ đ!a ch nhn d li4u”
Trang 13+ Method = “phng th c gi d li4u”
§ Checked: n6u có thì nút này mBc đ!nh đc ch7n
2.2 Ngôn ng& JavaSript
JavaScript là m1t ngôn ng lp trình đa lên trình duy4t Khi file đc load trong trình duy4t có hE tr JavaScript, trình duy4t sA thông d!ch các Script và th3c hi4n các công vi4c xác đ!nh
JavaScript có thC đc nhúng vào trong tp tin HTML, cú pháp:
<script language = “JavaScript”>
//Javascript có thC đBt % đây
</script>
* Thu1c tính cFa th$ Script:
+ Src: đ!a ch URL đ6n tp tin chng trình Javascript (*.js)
+ Language: ch đ!nh ngôn ng đc s d9ng trong script và các phiên bn s d9ng
Ví d9: Có thC đ6m sD lAn truy cp trang web b'ng cách s d9ng javascript nh sau:
<html>
<head><script LANGUAGE="JavaScript">
<! Begin
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
function SetCookie (name, value) {
var argv = SetCookie.arguments;
Trang 14
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
Trang 153 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 1 trang chF ch a các liên k6t đ6n các trang con tng ng:
- Trang n1i dung hóa h7c: ch a toàn b1 n1i dung chng trình hóa h7c l8p 12 (theo ban nâng cao) v8i các chng, các bài tng ng đóng vai trò nh m1t quyCn sách giáo khoa, các hình nh minh h7a cho n1i dung % t)ng bài, có kèm theo m1t sD đon video thí nghi4m minh h7a cho tính cht hóa h7c cFa các cht % t)ng bài ĐBc bi4t, cuDi mEi
chng có phAn trc nghi4m tr3c tuy6n đC ng2i h7c có thC kiCm tra ki6n th c ti chE, có báo k6t qu làm bài m1t cách t3 đ1ng và có đáp án đC ng2i h7c có thC t3 kiCm tra khi cAn thi6t Ngoài ra, trang n1i dung hóa h7c còn cung cp các t li4u hóa h7c giúp hE tr cho các giáo viên có thC b# sung, tham kho khi cAn thi6t Đây chính là điCm mnh cFa trang web hóa h7c l8p 12
- Trang l!ch s hóa h7c: cung cp hình nh và nh ng thông tin v5 tiCu s hoBc l!ch s v5 phát minh hóa h7c cFa các nhà hóa h7c có liên quan trong chng trình hóa h7c l8p
- Trang gii trí: g+m các giai thoi v5 các nhà hóa h7c, đD vui hóa h7c, th vui v5 hóa h7c, th6 gi8i nhc flash, &m th3c, games…giúp ng2i h7c cm giác thoi mái có thC v)a h7c v)a chi…
Có thC tóm tt mô hình trang web hóa h7c l8p 12 nh sau:
Trang 16MÔ HÌNH TRANG WEB HÓA H,C L5P 12
3.2 TEo website Hóa hFc l p 12
Site là m1t vùng lu tr c9c b1 trên máy tính dành cho vi4c lu tr các tp tin cFa m1t website bao g+m các th m9c con ch a hình nh, n1i dung nh'm giúp ta d dàng qun
lý hn
ĐC to site m8i, sau khi kh%i đ1ng Macromedia Dreamweaver 8, ta ti6n hành:
- Ch7n Site/New Site…
- H1p thoi Site Definition for Unnamed Site 1 hiCn th!, trong h1p thoi có c 2 l8p
đC th3c hi4n to site (Basic và Advanced) Ta to site theo l8p Advanced, l8p Basic ti6n hành tng t3 Xác đ!nh các m9c trong h1p thoi nh sau:
Hóa đ2i sDng
h7c-Trang gii trí
1
Bác h7c
…
Flash 1 Flash
…
Thông tin …
Th
vui …
Bài 1 Bài … Trc
nghi4m
Trang 17- Site name: nhp tên cho site
- Local root folder: xác đ!nh th m9c trên # đ a c9c b1 là ni lu tr các tp tin, m u tin và các hng m9c cFa th vi4n có trong site
- Refresh Local File List Automaticaly: ch đ!nh danh sách li4t kê tp tin c9c b1 có đc t3 đ1ng chnh mEi khi ta sao chép các tp tin vào Local site hay không
- HTTP address: nhp tên mi5n hoBc đ!a ch web
CuDi cùng, click ch7n OK đC to site và bt đAu thi6t k6 các trang html tng ng
3.3 Xây dng các trang html theo t(ng ch đ7
3.3.1 Xây dng trang ch index.html
Trang chF index.html chính là giao di4n cFa trang web hóa h7c l8p 12 Trang này là trang gi8i thi4u n1i dung cFa trang web và ch a các liên k6t đ6n các trang con nh: 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í trong trang web
D8i đây là trang chF index.html - giao di4n cFa trang web hóa h7c l8p 12 % ch6 đ1 trình duy4t:
Và % ch6 đ1 design:
Trang 18ĐC to ra đc giao di4n nh vy cho trang chF index.html ta ti6n hành nh sau: Sau khi kh%i đ1ng Macromedia Dreamweaver 8 xong , ta ti6n hành theo các b8c sau:
K6t qu % ch6 đ1 Code, dòng th$ meta đc đi5u chnh nh sau:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Trang 19+ Text color: màu ch
+ Background color: màu n5n
+ Background image: hình n5n Ch7n hình n5n b'ng cách nhp ch7n Browse sau
đó ch7n đ2ng d n đ6n th m9c ch a hình nh cAn chèn vào làm n5n
+ Repeat: SD lAn lBp li cFa Background image, ch7n m1t trong các giá tr!: repeat (lBp li), repeat-x (lBp li theo hàng ngang), repeat-y (lBp li theo hàng d7c),no-repeat (không lBp li)
+ Left Margin, Right Margin, Top Margin, Bottom Margin: canh l5 trái, phi, trên, d8i
- C m9c Links, ch7n các màu mBc đ!nh cho các liên k6t khi hiCn th!:
Sau đó, ch7n Apply/OK
Trang 20v B8c 4:
C ch6 đ1 Design, ch7n Insert/Table Drag vào ca s# thi6t k6, ta ti6n hành đi5u chnh các thông sD trong tùy ch7n Properties nh sau: Width: 1024 pixel, Height: mBc đ!nh
Ta ti6n hành 4 b8c tng t3 nh vy đDi v8i các trang html
Ta thu đc đon code nh sau:
<td width="180" align="center" valign="middle" bordercolor="#0099FF" bgcolor="#0099FF">
<img src="belflogo.gif" width="216" height="115" /></td>
+ ĐDi v8i c1t th hai:
Ta ti6n hành chèn vào m1t hình nh dng flash to ra t) chng trình Sothink SWF Easy ĐC chèn banner này vào ta ti6n hành nh sau: Click Insert/Media/Flash tng t3 nh bên d8i sau đó ch7n đ2ng d n đ6n th m9c ch a banner đã to và ch7n nh tng ng
Trang 21K6t qu thu đc m1t banner cho trang chF nh sau:
* Chèn dòng ch chuyCn đ1ng:
Dòng ch : “Chào M)ng Các Bn Đ6n V8i Trang Web Hóa H7c L8p 12” đc thi6t k6 t) chng trình Photoshop đc chèn vào gi a th$ <marquee> </marquee> v8i đon code nh sau:
<marquee direction="left" scrollamount="3"><img src="Untitled-2.gif"
width="613" height="49" />
</marquee>
Và thu đc dòng ch chuyCn đ1ng % ch6 đ1 trình duy4t nh sau:
* Chèn các nút liên k6t, hình nh trang trí và l2i gi8i thi4u cho trang web:
- ĐC chèn vào các n1i dung này, ta ti6n hành chèn m1t table vào phía d8i dòng ch chuyCn đ1ng
- Sau đó chia table này thành 3 c1t:
+ C1t th nht: Chèn vào nút liên k6t đ6n trang chF, các nút liên k6t đ6n các trang con cFa trang web: click Insert/Media/Flash và ch7n đ2ng d n đ6n file flash tng
ng Các nút liên k6t này to ra t) chng trình Sothink SWF Easy Ta có hình nh các nút l4nh này nh sau:
Trang 22+ C1t th hai: Chèn vào hình nh đ1ng trang trí hóa h7c và nh ng hình nh trang trí biCu tng đBc trng cho hóa h7c: ch7n Insert/Image và ch7n nh % th m9c tng ng K6t qu thu đc nh sau:
Chèn vào m1t table v8i 2 dòng 1 c1t:
§ Dòng th nht: Chèn vào đon text: “L2i Gi8i Thi4u” đã đc trang trí
và hình nh đ1ng v5 pháo hoa nh sau:
§ Dòng th hai: Chèn vào dòng ch chuyCn đ1ng gi8i thi4u v5 trang web hóa h7c l8p 12 v8i đon code nh sau:
<td style="border:1px #0000FF solid"><div align="left"
class="style32"><marquee direction="up" scrollamount="1">
Trang 23<img src="11x11progress.gif" width="15" height="15" /> <span class="style33"> Ngày nay, khoa h7c k thut ngày càng phát triCn vt bc đBc bi4t là trong l nh v3c công ngh4 thông tin đã làm cho tin h7c, internet ngày càng ng d9ng r1ng rãi trong vi4c ging dy % tr2ng ph# thông nht là nhu cAu trao đ#i thông tin ki6n th c và trong ging dy hóa h7c ngày càng h8ng đ6n phát huy tính năng đ1ng, sáng to, t3 khám phá cFa h7c sinh <br />
<img src="11x11progress.gif" width="15" height="15" /> Chính vì vy, Website hóa h7c l8p 12 đc to nên là nh'm to s3 lôi cuDn hp d n, tăng s3 yêu thích cFa h7c sinh đDi v8i môn hóa h7c và nh'm cung cp nh ng thông tin t li4u giúp xây d3ng n1i dung bài ging sinh đ1ng hE tr cho các giáo viên % tr2ng ph# thông, sinh viên, h7c sinh đBc bi4t là nh ng đ1c gi yêu thích môn hóa h7c nh ng thông tin t li4u hóa h7c đC ging dy và h7c tp hóa h7c m1t cách tDt hn.</span>
</marquee>
</div></td>
K6t qu thu đc % ch6 đ1 trình duy4t nh sau:
* Chèn vào dòng cuDi cùng cFa trang index.html đon code nh sau:
<div align="center" class="style29">Ng2i thi6t k6: Nguy n Th! Minh
Khoa<br />
M7i chi ti6t xin liên h4: ntmkhoa08@student.ctu.edu.vn </div>
K6t qu thu đc nh sau:
3.3.2.Xây dng trang n)i dung hóa hFc
Trang n1i dung hóa h7c ch a toàn b1 n1i dung cFa chng trình hóa h7c l8p 12 ban nâng cao v8i các hình nh minh h7a phong phú, thí nghi4m video minh h7a cho phn ng hóa h7c xy ra Trang n1i dung hóa h7c nd-index.html và các trang con ng v8i n1i dung cFa t)ng bài trong 9 chng cFa chng trình sách giáo khoa l8p 12 đc thi6t k6 tng t3 nhau Trong đó, trang n1i dung ng v8i t)ng bài sA đc nhúng n1i dung vào
Trang 24Khi đó giao di4n cFa trang n1i dung hóa h7c nd-index.html % ch6 đ1 trình duy4t nh sau:
Và trang bai_7.html ch a n1i dung bài 7 nh sau:
ĐC minh h7a cho cách thi6t k6 các trang con ch a n1i dung còn li, sau đây sA gi8i thi4u cách th c thi6t k6 m1t trang con ch a n1i dung cFa bài 7 là trang bai_7.html
* Xây d3ng trang bai_7.html:
Trang 25Trang bai_7.html % ch6 đ1 design nh sau:
- To Banner:
Chèn vào banner to ra t) chng trình Sothink SWF Easy b'ng cách: Click Insert/Media/Flash sau đĩ ch7n hình nh flash % th m9c tng ng K6t qu thu đc hình nh banner nh sau:
- To các liên k6t đ6n các 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í b'ng s3 hE tr cFa chng trình Sothink DHTML Menu 8:
C ch6 đ1 code, ta chèn vào đon code đC to nút liên k6t nh sau:
<script type="text/javascript">
<!
stm_bm(["menu2dd1",820,"","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","",0,0,1,2,"default","hand",""],this);
stm_bp("p0",[0,4,0,0,2,3,16,0,100,"",-2,"",-2,50,0,0,"#999999","#E6EFF9","",3,1,1,"#000000"]);
stm_ai("p0i0",[0,"Trang
chủ","","",-1,-1,0," / /index/index.html","_self","","","icon_16.gif","arrowaa.gif",16,16,0,"","",0,0,0,1,1,"#0099FF",0,"#6633FF",0,"","",3,3,1,2,"#3399ff #3399ff #3399ff #3399ff","#66ccff
#66ccff #66ccff #66ccff","#FFFF00","#FFFFFF","bold 16pt Tekon","16pt Tekon",0,0],165,40);
VNI-stm_aix("p0i1","p0i0",[0,"Lịch sử hóa index.html","_self","","","icon_16.gif","arrowaa.gif",16,16,0,"","",0,0,0,1,1,"#0099FF",0,
học","","",-1,-1,0," / /lshh/lshh-index/lshh-"#6633FF",0,"","",3,3,1,2,"#3399ff #3399ff #3399ff #3399ff","#66ccff #66ccff #66ccff
#66ccff","#FFFF00","#FFFFFF","16pt VNI-Tekon"],170,40);
Trang 26stm_aix("p0i2","p0i1",[0,"Flash hóa
Chèn vào gi a đon <head></head> đon code nh sau:
<script type="text/javascript" src="stmenu.js"></script>
K6t qu thu đc % ch6 đ1 trình duy4t các nút liên k6t nh sau:
- Chèn vào hình flash trang trí phía d8i các nút liên k6t tng t3 nh cách làm đDi v8i vi4c chèn hình flash làm banner và k6t qu thu đc nh hình bên d8i:
- To nút liên k6t đ6n các trang ch a n1i dung cFa t)ng bài ng v8i 9 chng và trang trc nghi4m tr3c tuy6n cuDi mEi chng:
ĐC to các liên k6t này ta ti6n hành tng t3 nh đDi v8i cách to liên k6t v8i trang chF, trang n1i dung, trang l!ch s hĩa h7c…c"ng là nh2 s3 hE tr cFa chng trình Sothink DHTML Menu 8
Ta ti6n hành chèn vào đon code nh sau:
<script type="text/javascript">
<!
stm_bm(["menu6b4e",820,"","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","",0,0,1,2,"default","hand",""],this);
stm_bp("p0",[1,4,0,0,0,5,25,7,100,"",-2,"",-2,90,0,0,"#7F7F7F","transparent","",3,1,1,"#8f7156"]);
stm_ai("p0i0",[0,"CHƯƠNG I:
ESTE-LIPIT","","",-1,-1,0,"","_self","","","icon_02c.gif","icon_02a.gif",25,20,0,"arrow_r.gif","arrow_r.gif",7,7,0,0,1,"#FFFFFF",0,"#0066FF",0,"","",3,3,0,0,"#FFFFFF","#FFFFFF","#0000FF","#FFFFFF"," 13pt VNI-Times","13pt VNI-Times",0,0]);
stm_bpx("p1","p0",[1,2,0,0,0,5,25,0]);
stm_aix("p1i0","p0i0",[0,"Bài 1:
Este","","",-1,-1,0," / /nd/bai%201/bai_1.html","_self","","","icon_02b.gif","icon_02c.gif",25,20,0,"","
Trang 27#FFFFFF","13pt VNI-Times"," 13pt VNI-Times"]);
stm_aix("p1i1","p1i0",[0,"Bài 2: Lipit","","",-1,-1,0," / /nd/bai%202/bai_2.html"]); stm_aix("p1i2","p1i0",[0,"Bài 3: Chất giặt rửa","","",-1,-
1,0," / /nd/bai%203/bai_3.html"]);
stm_aix("p1i3","p1i0",[0,"Bài 4: Luyện tập: Mối liên hệ \r\ngiữa hiđrocacbon và một số\r\n dẫn xuất của hiđrocacbon","","",-1,-1,0," / /nd/bai%204/bai_4.html"]); stm_aix("p1i4","p1i0",[0,"Trắc nghiệm chương I","","",-1,-
Trang 28stm_aix("p5i8","p1i0",[0,"Bài 27: Bài thực hành 4:\r\n Ăn mòn kim
loại.\r\nChống ăn mòn kim loại","","",-1,-1,0," / /nd/bai%2027/bai_27.html"]); stm_aix("p5i9","p1i4",[0,"Trắc nghiệm chương V","","",-1,-
Trang 29stm_aix("p6i3","p1i0",[0,"Bài 31: Một số hợp chất quan trọng\r\n của kim loại kiềm thổ","","",-1,-1,0," / /nd/bai%2031/bai_31.html"]);
stm_aix("p6i4","p1i0",[0,"Bài 32: Luyện tập: Tính chất của\r\n kim loại kiềm, kim loại kiềm thổ","","",-1,-1,0," / /nd/bai%2032/bai_32.html"]);
stm_aix("p6i9","p1i0",[0,"Bài 37: Bài thực hành 6:\r\nTính chất của nhôm
\r\nvà hợp chất của nhôm","","",-1,-1,0," / /nd/bai%2037/bai_37.html"]);
stm_aix("p6i10","p1i0",[0,"Trắc nghiệm chương
VI","","",-1,-1,0," / /tn/chuong%206/chuong_6.html","_self","","","icon_16.gif","icon_02b.gif"]); stm_ep();
stm_aix("p0i6","p0i0",[0,"CHƯƠNG VII: CROM-SẮT\r\n-ĐỒNG"]);
stm_aix("p7i9","p1i0",[0,"Bài 47: Bài thực hành 7:\r\n Tính chất hóa học của crom, sắt, \r\nđồng và những hợp chất của đồng","","",-1,-
1,0," / /nd/bai%2047/bai_47.html"]);
stm_aix("p7i10","p1i4",[0,"Trắc nghiệm chương
VII","","",-1,-1,0," / /tn/chuong%207/chuong_7.html"]);