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 [...]... 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) 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.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... 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... 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 Hình 9.16 Chọn mẫu thiết kế từ Gallery + Chèn Navigation Bar: vào menu Insert/ Navigation Bar/New Chọn chiều hiển thị Navigation Bar Chọn mẫu Navigation Bar Hình 9.17 Chọn mẫu thiết kế từ Gallery... 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... 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 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... 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 Tất cả Từ trang đến trang Trang hiện thời 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... 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 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 Chọn vị trí để lưu Website Đặt tên cho trang chủ (Nên để index.htm) Hình 9.24 Lưu ấn phẩm 18 ...Á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ệ 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) Chiều rộng Chiều cao Lề trên Lề trái Lề dưới Lề phải Hình . 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. 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: . 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 StartPrograms Microsoft Office Microsoft Office Publisher 2007 Cách 2: Nháy đúp chuột