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

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 tran

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

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

Thanh menu

Danh sách m u ẫu thi t k có s nết kế có sẵn ết kế có sẵn ẵ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-(front-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ị đ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

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

- Chọn Font chữ cho website: Trong mục Customize chọn Font scheme

Danh sách m u ẫu thi t k có s nết kế có sẵn ết kế có sẵn ẵn

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

Hình 9.7 Chọn các thành phần cần thể xuất hiện trên Website

Chọn hết các mục để hiển thị trên từng trang thông tin

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

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.

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)

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

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

11 Hot spot (tạo liên kết khi nhấn chuột)

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…

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

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

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

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…

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

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

Đặt tên cho trang chủ (Nên để index.htm)

Chọn vị trí để lưu Website