Thiết kế website dạy học với microsoft publisher 2007

BỘ GIÁO DỤC VÀ ĐÀO TẠO
DỰ ÁN PHÁT TRIỂN GIÁO VIÊN THPT&TCCN
TRƯỜNG ĐẠI HỌC SƯ PHẠM - ĐẠI HỌC HUẾ
TÀI LIỆU BỒI DƯỠNG CHO SINH VIÊN SƯ PHẠM
VỀ ỨNG DỤNG CNTT TRONG GIẢNG DẠY
CHUYÊN ĐỀ 9:
THIẾT KẾ WEBSITE DẠY HỌC VỚI
MICROSOFT PUBLISHER 2007
HÀ NỘI, THÁNG 8-2011
MỤC LỤC
1. GIỚI THIỆU TỔNG QUAN VỀ MS.PUBLISHER 2007 3
1. 1. Khởi động MicroSoft Office Publisher 2007 3
1.2. Tạo tài liệu mới với MS Publisher 2007 3
1.3. Lưu tài liệu MicroSoft Office Publisher 2007 3
1.4. Mở tài liệu MicroSoft Office Publisher 2007 4
2. QUY TRÌNH XÂY DỰNG WEBSITE 4
2.1. Khái niệm Website: 4
2.2. Qui trình xây dựng Website: 5
3.THIẾT KẾ WEBSITE. 5
3.1.Tạo mới một WebSite với MS.Publisher 2007. 5
3.2.Thiết kế lại website sau khi tạo mới: 8
3.3. Thêm các thành phần vào trang thông tin. 12
3.4. Định dạng các thành phần trên trang thông tin: 15
4. XUẤT BẢN WEB 17
4. 1. Xem trước khi xuất bản. 17
4.2. Xuất bản và đóng gói 18
2
1. GIỚI THIỆU TỔNG QUAN VỀ MS.PUBLISHER 2007
1. 1. Khởi động MicroSoft Office Publisher 2007
Cách 1: Nhấn nút Start\Programs\Microsoft Office\ Microsoft Office Publisher 2007
Cách 2: Nháy đúp chuột vào biểu tượng trên Desktop

Hình 9.1: Giao diện MicroSoft Office Publisher 2007
1.2. Tạo tài liệu mới với MS Publisher 2007
- Vào menu file/New hoặc nhấn tổ hợp phím Ctrl_N
1.3. Lưu tài liệu MicroSoft Office Publisher 2007
- Vào menu file/Save hoặc nhấn tổ hợp phím Ctrl_S
- Lưu với tên mới Vào menu file/Save As
3
Thanh menu
Danh sách m u ẫ
thi t k có s nế ế ẵ
Hình 9.2. Hộp thoại lưu tài liệu
1.4. Mở tài liệu MicroSoft Office Publisher 2007
• Vào menu file/Open
2. QUY TRÌNH XÂY DỰNG WEBSITE
2.1. Khái niệm Website
Website là tập hợp của rất nhiều trang web - một loại siêu văn bản (tập tin dạng
HTML hoặc XHTML) trình bày thông tin trên mạng Internet- tại một địa chỉ nhất định
để người xem có thể truy cập vào xem. Trang web đầu tiên người xem truy cập từ tên
miền thường được gọi là trang chủ (homepage), người xem có thể xem các trang khác
thông qua các siêu liên kết (hyperlinks)
Đặc điểm tiện lợi của website: thông tin dễ dàng cập nhật, thay đổi, người dùng
có thể xem thông tin ngay tức khắc, ở bất kỳ nơi nào, tiết kiệm chi phí in ấn, gửi bưu
điện, fax, thông tin không giới hạn (muốn đăng bao nhiêu thông tin cũng được, không
giới hạn số lượng thông tin, hình ảnh ) và không giới hạn phạm vi khu vực sử dụng
(toàn thế giới có thể truy cập).
Một website thông thường được chia làm 2 phần: giao diện người dùng (front-
end) và các chương trình được lập trình để website hoạt động (back-end). Giao diện
người dùng là định dạng trang web được trình bày trên màn hình của máy tính của
người xem (máy khách) được xem bằng các phần mềm trình duyệt web như Internet
Explorer, Firefox, Tuy nhiên ngày nay người xem có thể xem website từ các thiết bị

4
điện tử khác như điện thoại di động, PDA, Việc trình bày một website phải đảm bảo
các yếu tố về thẩm mỹ đẹp, ấn tượng; bố cục đơn giản, dễ hiểu và dễ sử dụng, các
chức năng tiện lợi cho người xem. Đặc biệt ngày nay, website trở nên sống động với
những hiệu ứng đa dạng của hình ảnh và chữ kết hợp với âm thanh.
Phần Back-end là phần lập trình của website lưu trữ trên máy chủ (Server). Sự
khác nhau ở phần lập trình back-end của website làm phân ra 2 loại website: Website
tĩnh và website động.
- Website động (Dynamic website) là website có cơ sở dữ liệu, được cung cấp
công cụ quản lý website (Admin Tool) để có thể cập nhật thông tin thường xuyên,
quản lý các thành phần trên website. Loại website này thường được viết bằng các ngôn
ngữ lập trình như PHP, Asp.net, JSP, Perl, , quản trị Cơ sở dữ liệu bằng SQL hoặc
MySQL,
- Website tĩnh do lập trình bằng ngôn ngữ HTML theo từng trang như brochure,
không có cơ sở dữ liệu và không có công cụ quản lý thông tin trên website. Chúng ta
cần phải biết kỹ thuật thiết kế trang web (thông thường bằng các phần mềm như
FrontPage, Dreamwaver, Publisher, ) khi muốn thiết kế hoặc cập nhật thông tin của
những trang web này.
Trong tài liệu này chúng tôi chỉ trình bày phần thiết kế một trang web tĩnh bằng
phần mềm thuộc bộ Office 2007 (MS Publisher 2007).
2.2. Qui trình xây dựng Website
Mỗi website được tạo bởi nhiều trang thông tin gọi là Page, các trang thông tin
được quan hệ với nhau thông qua các liên kết. Mỗi trang thông tin phải thể hiện được
đầy đủ nội dung muốn truyền tải cho người đọc và phải có bố cục hợp lý.
Để có một website hoàn chỉnh với đầu đủ thông tin, cần:
- Chuẩn bị thông tin đăng tải trên website.
- Chuẩn bị hình ảnh, ân thanh,
- Chuẩn bị các công cụ biên tập hình ảnh, âm thanh nếu cần
- Xác định mục đích, yêu cầu trang thông tin cần đăng tải
- Chọn bố cục trình bày trang thông tin cho hợp lý.

- Sau khi có hội đủ các điều kiện trên chung ta bắt đầu thiết kế.
3.THIẾT KẾ WEBSITE
3.1.Tạo mới một WebSite với MS.Publisher 2007
Để tạo mới một Web site cần thực hiện theo các bước sau.
- Bước 1: Vào menu file/New
5
Trong cửa sổ Publisher Types chọn Website
Hình 9.3. Chọn mẫu thiết kế cho website
Trong danh sách mẫu thiết kế bạn chọn một mẫu bất kỳ (Hình 3) ví dụ chọn
mẫu Arrows
- Bước 2: Chọn hệ thống bảng màu, Font chữ hiển thị, thiết lập thông tin
cá nhân cho website
Hình 9.4. Thiết lập các thông số chung cho website
- Chọn hệ thống màu: Trong mục Customize chọn Color scheme
6
Danh sách m u ẫ
thi t k có s nế ế ẵ
- Chọn Font chữ cho website: Trong mục Customize chọn Font scheme
- Thiết lập thông tin cá nhân cho Website: trong mục Customize chọn Business
information/Create

Hình 9.5. Thiết lập thông tin cá nhân cho website
- Bước 3: Chọn bố cục sắp xếp thông tin trên Website.
Kiểu menu nằm bên phải
và dưới
Kiểu menu nằm trên và
dưới
Kiểu menu chỉ nằm bên
phải
Kiểu menu chỉ nằm trên

Kiểu menu chỉ nằm dưới
Hình 9.6: Chọn bố cục sắp xếp thông tin trong các trang của website
- Bước 4: Nhấn Create để sang bước tiếp theo.
7
Chọn hết các mục để
hiển thị trên từng
trang thông tin
Hình 9.7. Chọn các thành phần cần thể xuất hiện trên Website
Hình 9.8. Chọn các thành phần cần thể xuất hiện trên Wsite
3.2.Thiết kế lại website sau khi tạo mới
- Bước 1: Tiến hành thay đổi tuần tự nội dung
các trang từ 1 đến 14 bằng cách nhấn chuột vào số
trang trong danh sách các trang thông tin có trong
Website.
- Bước 2: Thiết lập lại các tùy chọn cho từng
trang thông tin:
Page Options: (Hình 9.8)
+ Rename page: Đổi tên, tiêu đề trang thông
tin (Hình 9.10)
+ Backgroud fill and Sound: Thay đổi hình
nền và âm thanh nền (Hình 9.10) cho trang thông tin
+ Layout: Thay đổi bố cục hiển thị trang
thông tin
8
Danh sách các trang thông tin có trong website
Đây là phần nội dung cần
thay đổi cho phù hợp với mục
đích của trang thông tin
Hình 9.9. Thiết lập các tùy
chọn cho trang thông tin

Hình 9.10. Thiết kế tùy chọn chotrang web.
- Color Schemes: Thiết lập lại hệ thống màu cho trang thông tin

Hình 9.11.Thiết lập bảng màu cho trang thông tin
Chú ý: Các thiết lập ở B2 chỉ áp dụng cho một trang thông tin đang được chọn.
9
Thiết lập lại
các tùy
chọn cho
Website
Bạn có thể tạo hệ thống màu
mới bằng cách nhấn vào
Create new color scheme…
- Bước 3: Thiết lập lại các tùy chọn cho Website:
* Add to your Web site
+ Insert a page: Thêm trang thông tin mới vào website
+ Add functionality: Thêm trang theo kiểu Wizard
+ Preview your website: Xem trước nội dung của website trong trình
duyệt web.
* Template: Thay đổi template cho trang thông tin
Chọn Change template (Hình 9.11)
Hình 9.12. Hộp thoại thay đổi template
Chọn một mẫu template bất ky sau đó nhấn OK
Xuất hiện hộp thoại Change template (Hình 9.13)
10
Hình 9.13. Thay đổi nền
Page size: Thay đổi kích thước cho trang thông tin
Chọn ChangePageSize (Hình 11)
Hình 9.14. Hộp thoại thay đổi kích thước trang thông tin
11

Chiều rộng
Chiều cao
Lề trên
Lề trái
Lề dưới
Lề phải
Áp dụng template này cho website hiện hành
Tạo một website mới chứa nội dung của website hiệ
3.3. Thêm các thành phần vào trang thông tin
- Sử dụng thanh công cụ Objects:
Cách thao tác: Chọn đối tượng cần thao tác, drag chuột lên vị trí cần tạo đối
tượng để xác định kích thước của đối tượng.

1 Công cụ dùng để chọn đối tượng
2 Textbox
3 Table
4 Tạo chữ nghệ thuật
5 Chèn hình ảnh
6 Vẽ đường thẳng
7 Vẽ mũi tên
8 Vẽ hình tròn, elip
9 Vẽ hình vuông, chữ nhật
10 AutoShapes
11 Hot spot (tạo liên kết khi nhấn chuột)
12 Chèn form
13 Thêm Bookmark để tạo liên kết đến
Hình 9.15. Thanh công cụ Objects
- Sử dụng menu Insert
Chèn hình ảnh từ thư viện: vào menu Insert/ Design Gallery Opject…
12

1 2 3 4 5 6 7 8 9 10 11 12 13
Hình 9.16. Chọn mẫu thiết kế từ Gallery
+ Chèn Navigation Bar: vào menu Insert/ Navigation Bar/New
Hình 9.17. Chọn mẫu thiết kế từ Gallery
+ Thêm trang thông tin mới vào website: vào menu Insert/Page
+ Nhân đôi trang hiện tại: vào menu Insert/Duplicate Page
+ Tạo một Bookmark (vị trí khi hiển thị khi ta tạo liên kết đến)
• Chọn vị trí, đối tượng hoặc đoạn văn bản cần đặt Bookmark
• Vào menu Insert/ Bookmark
13
Chọn mẫu Navigation Bar
Chọn chiều hiển thị
Navigation Bar
Hình 9.18. Tạo Bookmark
+ Tạo siêu liên kết Hyberlink (Ctrl_K)
• Bước 1: Nhấn vào hình ảnh hoặc chọn khối văn bản bạn muốn kết nối
với 1 trang khác trên trang Web của bạn.
• Bước 2: Trên Insert, nhấn Hyperlink, hoặc nhấn nút Insert Hyperlink
trên thanh công cụ Standard.
• Bước 3: Trong hộp thoại Insert Hyperlink nhấn Place in This
Document.
• Bước 4: Nhấn vào trang hoặc tên Bookmark muốn tạo siêu liên kết đến.
• Bước 5: Nhấn OK.
Hình 9.19. Chèn liên kết trang/Bookmark
+ Tạo siêu liên kết với 1 địa chỉ Internet:
• Bước 1: Nhấn vào hình ảnh hoặc chọn khối văn bản bạn muốn kết nối
với 1 trang khác trên Internet.
• Bước 2: Trên Insert, nhấn Hyperlink, hoặc nhấn nút Insert Hyperlink
14
trên thanh công cụ Standard.

• Bước 3: Trong hộp thoại Insert Hyperlink nhấn Existing file or Web page.
• Bước 4: Trong mục Address, nhập hoặc dán địa chỉ của trang Web mà
bạn muốn tạo liên kết đến đó, hoặc nhấn Browsed Pages để chọn trang Web từ
danh mục.
• Bước 5: Nhấn OK.
+ Tạo siêu liên kết với 1 địa chỉ Email
• Bước 1: Nhấn vào hình ảnh hoặc chọn khối văn bản bạn muốn liên kết
với 1 địa chỉ Email của bạn. Khi người truy cập trang Web của bạn nhấn vào
liên kết này, chương trình Email của người đó sẽ tự động tạo tin với địa chỉ
Email của bạn ở trong dòng To.
• Bước 2: Trên Insert, nhấn Hyperlink, hoặc nhấn nút Insert Hyperlink
trên thanh công cụ Standard.
• Bước 3: Bên dưới Link to, nhấn E-mail Address.
• Bước 4: Hoặc nhập địa chỉ Email của bạn muốn vào hộp E-mail
Address, hoặc chọn một địa chỉ Email từ hộp Recently used email addresss.
Lưu ý: Chữ mail to sẽ được tự động thêm vào trước địa chỉ Email của bạn, đừng
xoá chữ đó.
Bước 5: Nhập chủ đề vào hộp Subject để bạn biết thư gửi đến có liên quan đến
phản hồi trên Web site của bạn.
Bước 6: Nhấn OK.
3.4. Định dạng các thành phần trên trang thông tin
- Sử dụng Master page
Master page là một dạng của Slide Master trong PowerPoint, nội dung trên
trang này sẽ áp dụng cho những trang khác một cách tự động.
+ Bước 1: Vào menu Format/ Apply Master page, hộp thoại Apply Master
page xuất hiện chọn View master page
15
Hình 9.20. Thiết kế trang Master (mẫu áp đặt cho nhiều trang)
Hình 9.21. Thiết kế trang Master
+ Bước 2: Nhấn New Master Page để tạo một master page mới

+ Bước 3: Thiết kế nội dung cho Master page (giống như thiết kế trang thông
tin bình thường)
+ Bước 4: Nhấn Close Master view để hoàn thành việc thiết kế master page.
Sau đó nhấn View puplication pages
+ Bước 5: Áp dụng Master page cho trang thông tin:
+ Nhấn Apply to page Range…
16
Phần thiết kế nội dung của Master page, các nội
dung này sẽ xuất hiện trong các trang thông tin có
áp dụng Master page này
Hình 9.22. Sử dụng trang Master
4. XUẤT BẢN WEB
4. 1. Xem trước khi xuất bản
Sau khi hoàn thành việc thiết kế phần nội dung cho các trang chúng ta lưu nội
dung lại và bắt đầu xuất bản Website.
Trước khi xuất bản ta nên sử dụng chế độ xem trước.
Vào menu File/Webpage Preview.
Lúc bấy giờ trình duyệt Web sẽ cho hiển thị website của mình vừa thiết kế.
Hình 9.23. Xem trang web trước khi đóng gói
17
Tất cả
Từ trang đến trang
Trang hiện thời
4.2. Xuất bản và đóng gói
- Để xuất bản ấn phẩm sang dạng WebSite: vào menu File/Publish to the Web…
- Để đóng gói sản phẩm: vào menu File/Pack and go.
Hình 9.24. Lưu ấn phẩm
18
Đặt tên cho trang chủ (Nên để index.htm)
Chọn vị trí để lưu Website