LUẬN văn sư PHẠM hóa THIẾT kế TRANG WEB GIÁO dục môi TRƯỜNG TRONG hóa PHỔ THÔNG
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.21 MB, 62 trang )
TRƯỜNG ĐẠI HỌC CẦN THƠ
KHOA SƯ PHẠM
THIẾT KẾ TRANG WEB
GIÁO DỤC MÔI TRƯỜNG TRONG HÓA PHỔ THÔNG
Luận văn Tốt nghiệp
Ngành: SƯ PHẠM HÓA HỌC
Giáo viên hướng dẫn:
Sinh viên thực hiện:
Th.s.GVC. Huỳnh Kim Liên
Võ Thị Sơn Ân
MSSV: 2060393
Lớp: Sư phạm Hóa K32
Cần Thơ, 2010
LỜI CẢM ƠN
Sau 10 tháng thực hiện đề tài “Thiết kế trang web giáo dục môi trường trong Hóa
phổ thông” đã được hoàn thành. Ngoài sự nỗ lực của bản thân, tôi đã nhận được sự động
viên giúp đỡ của quí thầy cô và bạn bè. Nay, tôi xin chân thành gửi lời cảm ơn sâu sắc
đến:
- Cô Huỳnh Kim Liên đã tận tình chỉ bảo và tạo mọi điều kiện thuận lợi cho tôi để
hoàn thành đề tài này. Cô đã giúp đỡ, hướng dẫn tôi rất nhiều ngay từ lúc đầu cho đến
cho đến ngày bảo vệ đề tài.
- Quí Thầy, Cô trong bộ môn Hóa, Khoa Sư Phạm đã nhiệt tình giúp đỡ tôi trong
thời gian qua.
- Các thành viên trong lớp Sư Phạm Hóa K32, và những người bạn thân đã nhiệt
tình giúp đỡ và động viên tôi trong suốt thời gian thực hiện luận văn này.
Xin chân thành cảm ơn!
2
TÓM TẮT
Đề tài “Thiết kế trang web giáo dục môi trường trong hóa phổ thông” nhằm giới
thiệu đến giáo viên và sinh viên ngành Hóa học cách thức giáo dục môi trường qua các
bài học trong Hóa phổ thông.
Mục đích của đề tài là thiết kế một trang web hoàn chỉnh. Trang web này có các
môđun giáo dục môi trường khai thác các kiến thức hóa học trong sách giáo khoa có liên
quan đến các hiện tượng, vấn đề ô nhiễm môi trường mà tác nhân gây ô nhiễm có liên
quan đến hóa học và đề ra các biện pháp hạn chế nguyên nhân gây ô nhiễm môi trường.
Qua đó, học sinh sẽ thấy được mối quan hệ giữa Hóa học và các vấn đề môi trường, biết
được các nguyên nhân gây ô nhiễm môi trường để có những biện pháp thái độ và hành
động cụ thể khắc phục sự ô nhiễm, bảo vệ môi trường sống. Ngoài ra, trang web còn có
nhiều thông tin liên quan đến môi trường như: ô nhiễm môi trường, biến đổi khí hậu, môi
trường và sức khỏe con người, những kiến thức về môi trường, các trang web có liên
quan đến môi trường và những video clip về môi trường.
Phần mềm mà tác giả sử dụng làm công cụ cho việc thiết kế trang web là
Macromedia Dreamweaver 8.
3
MỤC LỤC
PHẦN MỞ ĐẦU
1. LÍ DO CHỌN ĐỀ TÀI .................................................................................................5
1.1 Hoàn cảnh thực tế ...................................................................................................5
1.2 Mục đích của đề tài .................................................................................................5
1.3 Giới hạn của đề tài ..................................................................................................5
2. CÁC GIẢ THUYẾT CỦA ĐỀ TÀI..............................................................................6
3. CÁC PHƯƠNG PHÁP VÀ PHƯƠNG TIỆN THỰC HIỆN ĐỀ TÀI..........................6
3.1 Phương pháp thực hiện đề tài.................................................................................6
3.2 Phương tiện thực hiện đề tài ..................................................................................6
4. CÁC BƯỚC THỰC HIỆN ĐỀ TÀI .............................................................................6
5. CÁC THUẬT NGỮ SỬ DỤNG TRONG ĐỀ TÀI ......................................................7
PHẦN NỘI DUNG
1. TỔNG QUAN VỀ MACROMEDIA DREAMWEAVER 8.........................................8
1.1 Giới thiệu về Macromedia Dreamweaver 8............................................................8
1.2 Giới thiệu giao diện làm việc của Macromedia Dreamweaver 8............................9
2. GIỚI THIỆU SƠ LƯỢC VỀ NGÔN NGỮ HỖ TRỢ THIẾT KẾ WEB HTML.........12
2.1 Ngôn ngữ HTML..................................................................................................12
2.2 Ngôn ngữ Javascript.............................................................................................15
3. THIẾT KẾ WEBSITE GIÁO DỤC MÔI TRƯỜNG TRONG HÓA PHỔ THÔNG..16
3.1 Xây dựng mô hình trang web.....................................................................................16
3.2 Tạo website giáo dục môi trường trong Hóa phổ thông.......................................17
3.3 Xây dựng các trang HTML theo chủ đề...............................................................19
3.3.1 Xây dựng trang chủ........................................................................................19
3.3.2 Xây dựng trang mô đun giáo dục môi trường................................................26
3.3.3 Xây dựng trang môi trường............................................................................35
3.3.4 Xây dựng trang nhận thức – kiến thức...........................................................42
3.3.5 Xây dựng trang các trang web môi trường.....................................................45
3.3.6 Xây dựng trang góc giải trí.............................................................................50
PHẦN KẾT LUẬN
1.KẾT QUẢ VÀ Ý NGHĨA THỰC TIỄN CỦA ĐỀ TÀI................................................57
2. NHỮNG HẠN CHẾ CỦA ĐỀ TÀI..............................................................................57
3. HƯỚNG PHÁT TRIỂN CỦA ĐỀ TÀI........................................................................58
TÀI LIỆU THAM KHẢO
PHỤ LỤC
4
PHẦN MỞ ĐẦU
1. LÍ DO CHỌN ĐỀ TÀI
1.1 Hoàn cảnh thực tế
Trong những năm gần đây, công nghệ hóa học cùng với các ngành khoa học khác đã
có những bước phát triển vượt bậc. Cùng với sự phát triển của khoa học thì nhân tố chịu
ảnh hưởng nặng nề nhất phải kể đến môi trường. Ô nhiễm môi trường là một vấn đề nóng
được thế giới quan tâm. Hiện nay, tình hình ô nhiễm môi trường đã diễn ra khắp nơi xung
quanh chúng ta. Hiện tượng mưa axit, hiệu ứng nhà kính, thủng tầng ozon... xuất hiện
ngày càng nhiều và ngày càng nghiêm trọng hơn.
Trước những vấn đề nóng về môi trường, như vậy ngoài những biện pháp, chiến
lược lâu dài của chính phủ thì việc đưa giáo dục môi trường vào trong nhà trường là một
việc làm hết sức cần thiết. Giáo dục môi trường có vai trò quan trọng để hình thành cho
người học không chỉ kiến thức, kĩ năng mà còn hình thành cho họ thái độ hành vi và lối
sống bảo vệ môi trường. Môn hóa học trong nhà trường phổ thông có nhiều thuận lợi để
giáo dục môi trường cho học sinh vì các nguyên nhân, các quá trình gây ô nhiễm môi
trường ít nhiều đều có liên quan đến kiến thức hóa học nói chung và kiến thức hóa học
trong sách giáo khoa nói riêng.
Ý tưởng về việc thiết kế một trang web giáo dục môi trường trong Hóa phổ thông và
sử dụng nó trong giảng dạy là thật sự cần thiết.
Hiện nay có rất nhiều phần mềm hỗ trợ thiết kế web như: Microsoft Office
Frontpage, Macromedia Dreamweaver 8... Trong đó, Macromedia Dreamweaver 8 là một
chương trình thiết kế web khá phổ biên, đơn giản và tiện lợi. Vì thế, tôi đã chọn
Macromedia Dreamweaver 8 làm công cụ cho việc thực hiện đề tài của mình.
1.2 Mục đích của đề tài
Mục đích của đề tài là thiết kế một trang web giáo dục môi trường một cách hoàn
chỉnh. Sau khi hoàn thành sẽ giới thiệu đến những người quan tâm tài liệu hướng dẫn
cách thức thiết kế một trang
web bằng cách sử dụng phần mềm Macromedia
Dreamweaver 8.
1.3 Giới hạn của đề tài
Đề tài chỉ dựa trên phần mềm Macromedia Dreamweaver 8 với ngôn ngữ hỗ trợ là
HTML để thiết kế.
5
2. CÁC GIẢ THUYẾT CỦA ĐỀ TÀI
Đề tài sau khi hoàn thành gồm 2 phần:
- Phần 1: Trang web giáo dục môi trường trong Hóa phổ thông được thiết kế một
cách hoàn chinh, chứa các môđun giáo dục môi trường, các vấn đề có liên quan đế môi
trường như: ô nhiễm môi trường, biến đổi khí hậu, môi trường và sức khỏe con người,
các kiến thức về môi trường, các các trang web về môi trường, các video clip về môi
trường... giúp cho học sinh có nhận thức, thái độ, tình cảm và hành động đúng đắn vì môi
trường sống.
- Phần 2: Tài liệu về cách thức thiết kế trang web giáo dục môi trường trong Hóa
phổ thông giúp các nhà giáo dục và sinh viên Hóa học có thể tham khảo, bổ sung thêm
kiến thức về các vấn đề có liên quan đến môi trường.
3. CÁC PHƯƠNG PHÁP VÀ PHƯƠNG TIỆN THỰC HIỆN ĐỀ TÀI
3.1 Phương pháp thực hiện đề tài
- Tìm hiểu công cụ thiết kế web Macromedia Dreamweaver 8.
- Tìm hiểu ngôn ngữ lập trình HTML.
- Tìm kiếm thông tin, các video clip về các vấn đề môi trường từ sách, báo và
internet.
- Sưu tập các môđun, video clip dùng cho giáo dục môi trường trong giảng dạy hóa
học từ các luận văn ở những khóa trước.
3.2 Phương tiện thực hiện đề tài
- Máy vi tính.
- Phần mềm thiết kế web Macromedia Dreamweaver 8.
- Các phần mềm hỗ trợ khác: Adobe Photoshop CS2, Sothink DHTML Menu 8,
Sothink SWF Easy 5.1.
- Các sách tin học có liên quan đến đề tài, sách giáo khoa và các luận văn tốt
nghiệp...
- Mạng Internet.
4. CÁC BƯỚC THỰC HIỆN ĐỀ TÀI
Đề tài được thực hiện trong 10 tháng: từ 8/2008 đến 5/2009 gồm có 3 giai đoạn sau:
+ Giai đoạn 1: Tham khảo tài liệu, thiết kế website
Thời gian thực hiện từ tháng 08/2009 đến tháng 03/2010.
6
+ Giai đoạn 2: Viết luận văn và bài báo cáo.
Thời gian thực hiện từ tháng 04/2009 đến tháng 05/2010.
+ Giai đoạn 3: Báo cáo luận văn.
Thời gian thực hiện ngày /05/2010.
5. CÁC THUẬT NGỮ SỬ DỤNG TRONG ĐỀ TÀI
WWW (World Wide Web): Mạng thông tin toàn cầu.
HTML (Hyper Text Markup Language) : Ngôn ngữ đánh dấu siêu văn bản.
Mô đun: là một phần hay một bộ phận tổng thể, một hệ thống, nhưng nếu tách riêng
thì nó vẫn có thể tự vận động để thực hiện các chức năng riêng của mình. Mô đun dạy
học là một đơn vị trong chương trình dạy học mang tính độc lập tương đối.
Giáo dục môi trường: là một quá trình thông qua các hoạt động giáo dục chính quy
và không chính quy nhằm giúp con người có được sự hiểu biết, kỹ năng và giá trị tạo
điều kiện cho họ tham gia vào phát triển một xã hội bền vững về sinh thái.
Mô đun giáo dục môi trường: phải thể hiện sự kết hợp hài hòa giữa các việc làm
giáo dục môi trường và nội dung bài giảng. Nói một cách khác, mô đun giáo dục môi
trường là một chuỗi các việc làm được thiết kế nhằm khai thác nội dung bài giảng để đạt
được mục tiêu giáo dục môi trường đề ra trong khi vẫn tuân thủ tiến trình của một bài
giảng thông thường.
7
PHẦN NỘI DUNG
1. TỔNG QUAN VỀ MACROMEDIA DREAMWEAVER 8
1.1 Giới thiệu về Macromedia Dreamweaver 8
Macromedia Dreamweaver 8 là chương trình dùng để thiết kế và quản lý trang web.
Phần cốt lõi của nó là html – một ngôn ngữ chứa đựng hàng loạt các thẻ dùng để định
nghĩa cấu trúc của trang.
Macromedia Dreamweaver 8 là một chương trình thiết kế web, mạnh, giàu tính
năng ,chuyên nghiệp, dễ sử dụng bởi Macromedia Dreamweaver 8 cung cấp 3 chế độ làm
việc ( Code View, Code and Design View và Design View) và thông dụng nhất hiên nay,
không cần phải biết nhiều về html , javascript. Đây là phiên bản mới nhất cùng với các
tính năng hay của chương trình giúp ta có thể dễ dàng thiết kế một trang web.
Macromedia Dreamweaver 8 là một công cụ trực quan mà trong đó ta có thể bổ
sung Javascript, biểu mẫu, bảng và nhiều đối tượng khác mà không cần phải viết một
đoạn mã nào.
Đặc điểm biên soạn trình diễn của Macromedia Dreamweaver 8 là giúp giảm nhẹ
các yêu cầu về viết mã, có khả năng liên kết trực tiếp các chương trình soạn thảo hình
ảnh Macromedia Fireworks và cho phép nhận trực tiếp các tập tin ảnh động từ
8
Macromedia Flash, nghĩa là rất thuận tiện cho việc thiết kế trang web giàu minh họa trình
diễn, là mục tiêu hàng đầu của các trang web giảng dạy Hóa học.
1.2. Giới thiệu giao diện làm việc của Macromedia Dreamweaver 8
Để khởi động Macromedia Dreamweaver 8, ta vào Start/ All Programs/
Macromedia/ Macromedia Dreamweaver 8.
Khi đó giao diện làm việc của Macromedia Dreamweaver 8 có dạng sau:
9
Môi trường làm việc của Macromedia Dreamweaver 8 có dạng như sau:
3
1
7
2
4
5
6
(1) Thanh tiêu đề: chứa tên của trang đang thiết kế.
(2) Thanh Menu: là nơi chứa các lệnh khác nhau, các lệnh này ta có thể truy suất, sử dụng
bằng các phím tắt hoặc bằng bảng kiểm soát.
(3) Thanh Insert: nằm ở dưới thanh Menu. Trong thanh Insert được mặc định ở mỗi thẻ sẽ
hiển thị các chức năng khác nhau và các nút icon tương ứng mà ta có thể sử dụng để chèn
vào trang thiết kế của mình.
(4) Thanh công cụ Documents chứa các nút lệnh:
- Code: Hiển thị ở chế độ viết mã.
10
- Split: Hiển thị đồng thời chế độ viết mã, chế độ thiết kế trực quan.
- Design: Hiển thị chế độ thiết kế trực quan.
Tilte: nơi nhập tiêu đề của trang.
Preview in Iexplore 6.0: xem ở chế độ trình duyệt (phím tắt F12).
(5) Thanh Status Bar (thanh trạng thái): đây là công cụ sử dụng để chọn thẻ trong hồ sơ
trang thiết kế.
(6) Hộp kiểm soát Property (Property Inspector): là hộp kiểm soát ngữ cảnh, các tùy chọn
hiển thị sẽ tùy thuộc vào các phần tử đã chọn.
(7) Bảng điều khiển Panel : bên phải màn hình là bảng điều khiển Panel, bảng này có thể
mở rộng hoặc thu nhỏ khi cần thiết.
11
2. GIỚI THIỆU SƠ LƯỢC VỀ NGÔN NGỮ HỖ TRỢ THIẾT KẾ WEB HTML
2.1 Ngôn ngữ HTML
Để phổ biến thông tin trên toàn cầu, cần một ngôn ngữ phổ biến và dễ hiểu mà toàn
bộ các máy tính có thể hiểu được. Ngôn ngữ phổ biến dùng bởi World Wide Web là
HTML (Hyper Text Markup Language).
HTML cho tác giả các ý nghĩa để:
- Phổ biến các tài liệu trực tuyến với các heading, văn bản, bảng, danh sách, ảnh...
- Truy tìm thông tin trực tuyến theo các liên kết siêu văn bản bằng việc kích vào một
nút.
- Thiết kế các định dạng cho việc kiểm soát các giao dịch (transaction) với các thiết
bị từ xa, đối với người dùng trong việc tìm kiếm thông tin, tạo các sản phẩm, đặt
hàng,.v.v…
- Bao gồm spread-sheets, video clips, sound clips, và các ứng dụng trực tiếp khác
trong các tài liệu của họ.
Sử dụng HTML để soạn thảo các trang siêu văn bản, về nguyên tắc cũng không
khác mấy so với dùng các bộ soạn thảo văn bản thông thường. Có nhiều thẻ, mỗi thẻ
mang ý nghĩa rêng. Cách viết thẻ:
- Thẻ mở: <tên_thẻ>
Ví dụ: <u>,
, <img>…
- Thẻ đóng tương ứng: </tên_thẻ>
Ví dụ: </u>,
Chú ý: luôn có thẻ mở nhưng có thể không có thẻ đóng tương ứng
Ví dụ như: <img> không có thẻ đóng.
Trong Macromedia Dreamweaver 8 cấu trúc cơ bản của một trang html tự động phát
sinh khi tạo một trang html mới:
" /><html xmlns=" /><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
12
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Trong đó:
<html>…</html>: đánh dấu điểm bắt đầu và kết thúc của một tài liệu html.
<title>...</title>: dòng chữ sẽ hiện lên trên thanh tiêu đề của cửa sổ khi trình duyệt đọc tài
liệu. Nếu bỏ trống thì trình duyệt sẽ cho hiện tên tệp thay vào đó.
</head>…</head>: chỉ định phần giới thiệu và tiêu đề trang web.
<body>…</body>: toàn bộ nội dung của tài liệu nằm giữa hai thẻ xác định thân của
trang. Các dòng văn bản, hình ảnh, âm thanh, video, các mối liên kết... tạo nên trang Web
đều phải nằm ở đây.
Một số thẻ thường gặp trong quá trình thiết kế:
- Thẻ tạo bảng: <table></ table>
Dưới đây là bảng tóm tắt liệt kê các thuộc tính của thẻ xây dựng bảng:
Thẻ/Thuộc tính
Ý nghĩa
Table- Bắt đầu bảng
BORDER - Đặt khung nổi 3D xung quanh bảng. Đặt
BORDER=0 sẽ làm mất biên bao quanh.
CELLSPACING=n
CELLSPACING - Đặt độ dày của dòng kẻ ngang trong
CELLPADDING=n
bảng.
BGCOLOR="#rrggbb">
CELLPADDING - Đặt kích thước của một ô.
BGCOLOR - Đặt màu nền của bảng.
<TR>
B3/4t Đầu một dòng của bảng – Table row.
<TD>
B3/4t Đầu một ô của bảng (bắt đầu cột trong một bảng).
Thẻ <TH> giống như <TD> nhưng cho chữ đậm và căn
<TH>
<CAPTION>
chính giữa - (heading).
Đặt tiêu đề (đầu đề) cho một bảng
13
Thuộc tính dùng kèm bên trong các thẻ <TR>, <TH> hay
ALIGN=MIDDLE|RIGHT <TD> để căn lề chữ trong một ô của bảng theo chiều
ngang
Thuộc tính dùng kèm các thẻ <TR>, <TH> hay <TD> để
VALIGN=TOP|BOTTOM
giãn một ô theo chiều ngang chiếm nhiều cột hơn các ô
trên dòng khác.
WIDTH=n%
Thuộc tính dùng kèm các thẻ <TH> hay <TD> để đặt độ
rộng của ô.
Thuộc tính dùng kèm các thẻ <TH> hay <TD> để giãn
COLSPAN=n
một ô theo chiều ngang chiếm nhiều cột hơn các ô trên
dòng khác.
Thuộc tính dùng kèm các thẻ <TH> hay <TD> để giãn
ROWSPAN=n
một ô theo chiều đứng chiếm nhiều dòng hơn các ô ở cột
khác
</TABLE>
Kết thúc bảng
- Thẻ định dạng kí tự:
+ Đậm, nghiêng, gạch chân: <b>...</b>, <i>...<i>, <u>...</u>
+ Chỉ số trên: <sup>...</sup>
+ Chỉ số dưới: <sub>...</sub>
- Font chữ: <font>...</font>
Thuộc tính:
+ face = ”tên font chữ”
+ size = ”kích thước chữ”
+ color = ”màu chữ”
- Thẻ định dạng tiêu đề, đoạn văn, ngắt dòng:
+ Tiêu đề: với kích thước nhỏ dần
...
...
14
...
+ Đoạn văn:
...
+ Ngắt dòng:
- Thẻ tạo ảnh: <img> (không có thẻ đóng).
Thuộc tính:
+ src = “địa chỉ ảnh”: Nếu chèn ảnh trong cùng website thì nên sử dụng đường dẫn
tương đối.
+ alt = “chú thích cho ảnh”: sẽ được hiển thị khi trình duyệt không hiển thị ảnh
hoặc ảnh lỗi hoặc khi di chuyển chuột lên ảnh.
+ width = “rộng”, height = “cao” :độ rộng và độ cao của ảnh:
n: qui định độ rộng, cao là n pixels.
n%: qui định độ rộng, cao là n % độ rộng, cao của đối tượng chứa ảnh.
+ border = “n” : kích thước đường viền ảnh. n=0: ảnh không có đường viền.
+ align = “căn chỉnh ảnh”:left, right, middle, top...
- Thẻ tạo liên kết: <a>...<a>
Thuộc tính:
+ href: chỉ địa chỉ liên kết.
+ target trình duyệt có thể nạp đối tượng liên kết vào một cửa sổ chỉ định bằng thẻ
này. Nếu chưa có cửa sổ, trình duyệt sẽ mở cửa sổ mới.
2.2 Ngôn ngữ JavaScript
JavaScript là một ngôn ngữ lập trình dựa rên trình duyệt. Khi file được load trong
trình duyệt có hỗ trợ JavaScript, trình duyệt sẽ thông dịch các Script và thực hiện các
công việc xác định.
JavaScript có thể được nhúng vào trong tập tin HTML, cú pháp:
Thuộc tính của thẻ Script:
- src: địa chỉ URL đến tập tin chương trình JavaScript (*.js).
- language: chỉ định ngôn ngữ được sử dụng trong script và các phiên bản sử dụng
(JavaScript 1, JavaScript 2...)
15
Ví dụ: Dùng JavaScript, bạn có thể tạo dòng chữ “Chúc các bạn tìm được những thông
tin bổ ích khi đến với Website giáo dục môi trường trong Hóa phổ thông”. Đoạn code sử
dụng:
<script language="JavaScript1.2">
var message="Chúc các bạn tìm được những thông tin bổ ích khi đến với Website Giáo
dục môi trường trong Hóa phổ thông!" //thay đổi message của bạn tại đây
var message=message+"
";
i="0";
var temptitle="";
var speed="150" ;
function titler(){
if (!document.all&&!document.getElementById)
return;
document.title=temptitle+message.charAt(i);
temptitle=temptitle+message.charAt(i);
i++;
if(i==message.length)
{i="0";temptitle="";}
setTimeout("titler()",speed)
}
window.onload=titler
</script>
3. THIẾT KẾ WEBSITE GIÁO DỤC MÔI TRƯỜNG TRONG HÓA PHỔ THÔNG
3.1 Xây dựng mô hình trang web
Trang web được xây dựng bao gồm: một trang chủ chứa liên kết đến các trang con
tương ứng (thông qua các menu):
- Trang “Mô đun giáo dục môi trường” chứa các mô đun giáo dục môi trường
trong chương trình hóa học lớp 10, 11, 12. Có chèn thêm một số đoạn video clip để minh
họa.
16
- Trang “Môi trường” chứa các nội dung về môi trường như: ô nhiễm môi trường,
biến đổi khí hậu, môi trường và sức khỏe, khoa học và công nghệ và các đoạn phim môi
trường.
- Trang “Nhận thức – kiến thức” chứa các kiến thức về môi trường.
- Trang “Các trang web môi trường” chứa địa chỉ của các trang web về môi
trường.
- Trang “Góc giải trí” chứa các nội dung: thiên nhiên kỳ thú, thế giới thực vật và
động vật, album ảnh, bạn có biết, nghe nhạc.
MÔ HÌNH TRANG WEB GIÁO DỤC MÔI TRƯỜNG TRONG HÓA PHỔ THÔNG
Trang chủ
Mô đun giáo dục
môi trường
Lớp
10
Lớp
11
Lớp
12
Môi
trường
Ô nhiễm
môi
trường
Biến đổi
khí hậu
....
Nhận thức –
Kiến thức
Các trang web
môi trường
Thông
tin 1
Web
1
Thông
tin...
Web
...
Góc
giải trí
Album Nghe
ảnh
nhạc...
3.2 Tạo website “Giáo dục môi trường trong Hóa phổ thông”
Site là vùng lưu trữ cục bộ trên máy tính dành cho việc lưu trữ các tập tin của một
website bao gồm các thư mục con chứa hình ảnh, nội dung... nhằm giúp ta dễ dàng quản
lý hơn.
Ví dụ: Khi chèn một đối tượng đang nằm ngoài site LUANVANMT vào trong trang html
sẽ xuất hiện thông báo nhắc ta copy đối tượng đó vào site:
17
Khi khởi động Macromedia Dreamweaver 8 xong, để tạo site mới ta tiến hành:
- Chọn Site/New Site...
- Hộp thoại Site Definition for Unnamed Site 1 hiển thị, trong hộp thoại này có 2
lớp: lớp Basic và lớp Advanced. Ta tạo site theo lớp Advanced, lớp Basic tiến hành
tương tự. Xác định các mục trong hộp thoại như sau:
+ Site name: Nhập tên cho site (LUANVANMT)
+ Local root folder: xác định thư mục trên ổ đĩa cục bộ, là nơi lưu trữ các tập tin,
mẫu tin và các hạng mục của thư viện có trong site. (D:\LUANVANMT).
18
+ Refresh local file lít automatically: chỉ định danh sách liệt kê tập tin cục bộ có
được tự động tinh chỉn mỗi khi ta sao chép các tập tin vào Local site hay không.
+ HTTP address: nhập tên miền hoặc địa chỉ web.
Sau khi đã xác định xong các mục trong hộp thoại, click OK để tạo site LUANVANMT
và bắt đầu đi vào thiết kế các trang HTML tương ứng.
3.3. Xây dựng các trang HTML theo chủ đề
3.3.1 Xây dựng trang chủ (index.html)
Trang chủ index.html là trang giới thiệu về web site giáo dục môi trường trong Hóa
phổ thông. Trang này chứa các menu liên kết đến các trang: Mô đun giáo dục môi trường,
Môi trường, Nhận thức – kiến thức, Các trang web môi trường, Góc giải trí; chứa các
dòng chữ chuyển động,... Dưới đây là trang chủ index.html ở chế độ Design:
19
Các bước tạo trang chủ index.html:
Khi khởi động Macromedia Dreamweaver 8 xong, ta tiến hành:
* Bước 1:
- Tạo trang html: File/New, hộp thoại New Document xuất hiện, chọn General/Basic
page/HTML, chọn nút
để tạo trang mới.
- Lưu trang html: Chọn File/Save, xuất hiện hộp thoại Save as, chọn đường dẫn đến
D:\LUANVANMT, lưu tên là index.html.
20
* Bước 2: Vào chế độ Code, điều chỉnh dòng:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
thành:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
để thể hiện đúng font tiếng Việt.
* Bước 3: Chuyển sang chế độ Design, vào nút
, hộp thoại Page
Properties xuất hiện:
- Ở thẻ Apperance, chọn các thông số mặc định cho trang html như sau:
+Page font: Font chữ mặc định.
+ Size: cỡ chữ.
+ Text color: màu chữ.
+ Background color: màu nền.
+ Background image: hình nền. Nhấp chọn nút
để tạo đường dẫn đến
hình cần chọn làm nền.
+ Repeat: số lần lặp lại của Background image, chọn một trong các giá trị: repeat
(lặp lại), repeat – x (lặp lại theo hàng ngang), repeat – y (lặp lại theo hàng dọc), no –
repeat (không lặp lại).
+ Left margin, right margin, top margin, bottom margin: canh lề trái, phải, trên,
dưới.
21
Ở thẻ Links, chọn các mặc định cho các liên kết khi hiển thị.
Sau đó nhấp chọn nút
/
.
* Bước 4: Tạo Layout Table.
Chọn Insert/ Layout Objects/ Layout Table, Drag vào cửa sổ thiết kế. Điều chỉnh các
thông số trong tùy chọn Properties như sau: Fixed :1024; Height: mặc định
22
Lưu ý: từ bước 1 đến bước 4 lặp lại gần như nhau ở tất cả các trang html. Do đó, tác giả
sẽ không lặp lại các bước này ở các trang sau.
* Bước 5: Tạo banner cho trang chủ.
- Tạo Layout Cell: chọn Insert/ Layout Objects/ Layout Cell. Điều chỉnh các thông số
trong Properties như sau: Fixed :1024; Height: 140.
- Chèn vào đó hình làm banner cho trang chủ: Chọn Insert/ Media/ Flash
Xuất hiện hộp thoại Select file, chọn đường dẫn đến hình cần chèn làm banner.
23
* Bước 6: Tạo dòng chữ chuyển động
- Tạo tiếp Layout Cell với thông số Height: 35.
- Chèn vào đó dòng chữ “Chào mừng các bạn đến với website giáo dục môi trường” (làm
tương tự như bước 5)
* Bước 7: Tạo nút liên kết đến các trang khác.
- Tạo tiếp Layout Cell với thông số Height: 256, Fixed: 317.
- Chèn vào đó nút liên kết đến các trang (nút này được hỗ trợ từ chương trình Sothink
SWF Quicker 3.0, đã xuất ra file dạng flash): Insert/ Media/ Flash. Xuất hiện hộp thoại
Select file, chọn đường dẫn đến nút liên kết.
24
Kết quả thu được nút lên kết sau:
* Bước 8: Tạo dòng chữ giới thiệu.
- Tạo tiếp Layout Cell với thơng số Height: 592, Fixed: 157.
- Chèn vào đó đoạn code:
height=150 scrollAmount=1 class=style23>
<div align="justify">
<div align="justify">
<div align="center">
height="141" border="2" />Website Giáo dục môi trường có chứa các môđun
giáo dục môi trường trong chương trình hóa học lớp 10,11,12. Ngoài ra, trang
Web còn có nhiều thông tin liên quan đến môi trường như: ô nhiễm môi
trường, biến đổi khí hậu ,môi trường và sức khỏe con người...; những kiến
thức về môi trường, các trang Web về môi trường và nhứng đoạn video clip
về môi trường.
</div>
</div>
</div>
</MARQUEE>
25
