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

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

TRƯỜNG ĐẠI HỌC CẦN THƠ

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!

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

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

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à

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

- 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

+ 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

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

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:

Môi trường làm việc của Macromedia Dreamweaver 8 có dạng như sau:

(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ã

- 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ể

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>, <p>, <img>…

- Thẻ đóng tương ứng: </tên_thẻ>

Ví dụ: </u>, </p>, </img>…

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<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:

BORDER=0 sẽ làm mất biên bao quanh

CELLSPACING - Đặt độ dày của dòng kẻ ngang trong bảng

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ẻ <TH> giống như <TD> nhưng cho chữ đậm và căn chính giữa - (heading)

ALIGN=MIDDLE|RIGHT

Thuộc tính dùng kèm bên trong các thẻ <TR>, <TH> hay

<TD> để căn lề chữ trong một ô của bảng theo chiều ngang

VALIGN=TOP|BOTTOM

Thuộc tính dùng kèm các thẻ <TR>, <TH> hay <TD> để 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 ô

COLSPAN=n

Thuộc tính dùng kèm các thẻ <TH> hay <TD> để giãn một ô theo chiều ngang chiếm nhiều cột hơn các ô trên dòng khác

ROWSPAN=n

Thuộc tính dùng kèm các thẻ <TH> hay <TD> để giãn một ô theo chiều đứng chiếm nhiều dòng hơn các ô ở cột khác

- 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

<h1> </h1>

+ 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 )

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:

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

- 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

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:

Trang chủ

Mô đun giáo dục

môi trường

Môi trường

Góc giải trí

Các trang web môi trường

Nhận thức – Kiến thức

Biến đổi khí hậu

Thông tin 1

Thông tin

Web

1

Web

Album ảnh

Nghe nhạc

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)

+ 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:

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 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

Ở thẻ Links, chọn các mặc định cho các liên kết khi hiển thị

* 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

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

* 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

Kết quả thu được nút lên kết sau:

* Bước 8: Tạo dòngchữ 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:

<MARQUEE direction=up width=160

height=150 scrollAmount=1 class=style23>

</div>

</div>

</div>

</MARQUEE>

Kết quả thu được như sau:

* Bước 9: Tiếp tục Layout Cell với thông số Height: 61, Fixed: 1024 Chèn vào đó đoạn code:

<span class="style20">Người thiết kế : Võ Thị Sơn Ân <br />

Mọi chi tiết xin liên hệ : vtsan93@student.ctu.edu.vn</span></span></th>

</tr>

Kết quả thu được như sau:

3.3.2 Xây dựng trang mô đun giáo dục môi trường

Trang mô đun giáo dục môi trường gồm một trang chủ mô đun giáo dục môi trường gdmt-index.html liên kết với các trang con 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 Trang mô đun giáo dục môi trường được xây dựng cùng kiểu với cấu trúc với các trang con

Dưới đây là trang gdmt-index.html:

Và trang mô đun giáo dục môi trường lớp 10 index10.html

Và trang mô đun giáo dục môi trường lớp 11 index11.html

Và trang mô đun giáo dục môi trường lớp 12 index12.html

Ở đây chỉ giới thiệu cách thiết kế một trang con để minh họa cho các trang còn lại:

Xây dựng trang bài 11.html (bài 11 Amin trong chương trình Hóa học lớp 12) Trang bài 11.html ở chế độ Design hiển thị như sau:

Các bước tạo trang chủ bai11.html

Bước 1 đến bước 4: lặp lại tương tự như ở phần xây dựng trang chủ index.html, lưu lại với tên bai11.html

* Bước 5: Tạo banner cho trang bai11.html

- 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

* Bước 6: Tạo nút liên kết đến các bài khác

- 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 :200; Height: mặc định

- Chuyển sang chế độ code, chèn vào đoạn code tạo nút liên kết (đoạn code này được xử

lý nhờ sự hỗ trợ của chương trình Sothink DHTML Menu 8):

<script type="text/javascript">

<!

stm_bm(["menu3841",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,2,2,0,7,100,"",2,"",2,100,2,3,"#999999","#FFFFFF","",3,1,1,"#999999"]);stm_ai("p0i0",[0,"Môđunlớp12","","",-

1,1,0,"","_self","","","","",0,0,0,"","",0,0,0,1,1,"#FFFFFF",0,"#FFFFFF",0,"","",3,3,0,0,"

#3399CC","#3399CC","#000099","#0000CC","bold 12pt Aptima","bold 12pt Aptima",0,0]);

VNI-stm_aix("p0i1","p0i0",[0,"ChươngIII.Amin-Aminoaxit-Protein","","",-1,-1,0,"lin1"," _self","","","","",0,0,0,"arrow_r.gif","arrow_r.gif",7,7,0,0,1,"#FFFFFF",0,"#FFFFFF",0,"

","",3,3,0,0,"#3399CC","#3399CC","#FF0099","#009900","12ptVNI-Aptima","12pt VNI-Aptima"]);

stm_bpx("p1","p0",[1,2,0,0,2,2,0,0]);

stm_aix("p1i0","p0i1",[0,"Bài11.Amin","","",-

1,1,0," /bai11/bai11.html","_self","","","","",0,0,0

,"","",0,0,0,0,1,"#FFFFFF",0,"#FFFFFF",0,"","",3,3,0,0,"#3399CC","#3399CC","#FF0000","#0000CC"]);

stm_ep();

stm_aix("p0i2","p0i1",[0,"Chương IV Polime và vật liệu polime"]);

stm_bpx("p2","p1",[]);

stm_aix("p2i0","p1i0",[0,"Bài16.Đạicươngvềpolime","","",-1,1,0," /bai16/bai16 html","_self","","","","",0,0,0,"","",0,0,0,0,1,"#FFFFFF",0,"#FFFFFF",0,"","",3,3,0,0,"#3399CC","#3399CC","#FF0000","#0000CC"]);

stm_aix("p2i1","p1i0",[0,"Bài17.Vậtliệupolime","","",-1,-1,0," /bai17/bai17.html"

,"_self","","","","",0,0,0,"","",0,0,0,0,1,"#FFFFFF",0,"#FFFFFF",0,"","",3,3,0,0,"#3399CC","#3399CC","#FF0000","#0000CC"]);

stm_aix("p3i1","p1i0",[0,"Bài23.Sựănmònkimloại","","",-1,-1,0," /bai23/bai23.html","_self","","","","",0,0,0,"","",0,0,0,0,1,"#FFFFFF",0,"#FFFFFF",0,"","",3,3,0,0,"#3399CC","#3399CC","#FF0000","#0000CC"]);

stm_aix("p3i2","p1i0",[0,"Bài 26 Bài thực hành số 3:\r\nDãy điện hóa của kim loại.\r\nĐiềuchếkimloại","","",-1,-

1,0," /bai26/bai26.html","_self","","","","",0,0,0,"","",0,0,0,0,1,"#FFFFFF",0,"#FFFFFF",0,"","",3,3,0,0,"#3399CC","#3399CC","#FF0000","#0000CC"]);

stm_aix("p4i1","p1i0",[0,"Bài33.Nhôm","","",-1,-1,0," /bai33/bai33.html","_self","","","","",0,0,0,"","",0,0,0,0,1,"#FFFFFF",0,"#FFFFFF",0,"","",3,3,0,0,"#3399CC","#3399CC","#FF0000","#0000CC"]);

stm_aix("p4i2","p1i0",[0,"Bài 34 Một số hợp chất quan trọng của 1,-

nhôm","","",-1,0," /bai34/bai34.html","_self","","","","",0,0,0,"","",0,0,0,0,1,"#FFFFFF",0,"#FFFFFF",0,"","",3,3,0,0,"#3399CC","#3399CC","#FF0000","#0000CC"]);