Giáo trình Thiết kế web (Nghề Lập trình máy tính)

BỘ LAO ĐỘNG - THƯƠNG BINH VÀ XÃ HỘI TỔNG CỤC DẠY NGHỀ Dự án giáo dục kỹ thuật dy ngh (VTEP) trình độ đào tạo cc GIO TRèNH Mơ đun: THIẾT KẾ WEB Mã số:ITPGR13 NGHỀ: LẬP TRÌNH MÁY TÍNH Trình độ (lành nghề) Đ Đà lạt- 2007 Giáo trình thiết kế web Tuyên bố quyền : Tài liệu thuộc loại sách giáo trình Cho nên nguồn thơng tin phép dùng ngun trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác có ý đồ lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm Tổng Cục Dạy nghề làm cách để bảo vệ quyền Tổng Cục Dạy Nghề cám ơn hoan nghênh thông tin giúp cho việc tu sửa hoàn thiện tốt tàI liệu Địa liên hệ: Dự án giáo dục kỹ thuật nghề nghiệp Tiểu Ban Phát triển Chương trình Học liệu ……………………………………………… Giáo trình thiết kế web LỜI TỰA Đây tài liệu xây dựng theo chương trình dự án giáo dục kỹ thuật dạy nghề, để có đươc giáo trình dự án tiến hành theo hai giai đoạn Giai đoạn : Xây dựng chương trình theo phương pháp DACUM, kết gian đoạn khung chương trình gồm 230 trang cấp độ 170 trang cấp độ Giai đoạn : 29 giáo trình 29 tài liệu hướng dẫn giáo viên cho nghề lập trình máy tính cấp độ Để có khung chương trình chúng tơi mời giáo viên, chuyên gia làm việc lĩnh vực công nghệ thông tin xây dựng chương trình Trong giai đoạn viết giáo trình chúng tơi có điều chỉnh để giáo trình có tính thiết thực phù hợp với phát triển lĩnh vực công nghệ thông tin Ngày Internet phổ biến rộng khắp toàn giới ,thơng tin mà truy nhập dịch vụ World Wide Web trang Web Trang Web tài liệu dịch vụ World Wide Web.Vì nhu cầu thiết kế web ngày phát triển rộng rãi toàn giới.Nhiều trường học nhận điều tạo khố học thiết kế web phần yếu hệ thống thơng tin tin học hố chương trình khoa học máy tính.Giáo trình dự kiến cung cấp số kiến thức tảng thiết kế website.Mục tiêu giáo trình cung cấp cho sinh viên kỹ thiết kế web bản,chu trình thiết kế tạo website theo trình tự phương pháp Trong trình biên soạn, cố gắng tham khảo nhiều tài liệu giáo trình khác tác giả khơng khỏi tránh thiếu sót hạn chế Tác giả chân thành mong đợi nhận xét, đánh giá góp ý để giáo trình ngày hồn thiện Tài liệu thiết kế theo mô đun/ môn học thuộc hệ thống mô đun/môn học chương trình, để đào tạo hồn chỉnh nghề Lập trình máy tính cấp trình độ bậc cao dùng làm Giáo trình cho học viên khố đào tạo, sử dụng cho đào tạo ngắn hạn cho công nhân kỹ thuật, nhà quản lý người sử dụng nhân lực tham khảo Đây tài liệu thử nghiệm hồn chỉnh để trở thành giáo trình thức hệ thống dạy nghề Đà lạt tháng 10 năm 2007 Giáo trình thiết kế web MỤC LỤC ĐỀ MỤC TRANG 1.- -Lời tựa -3 Mục lục -4 Giới thiệu mô đun Nội dung mơ đun -5 Liệt kê nguồn lực cần thiết cho mô đun -6 Kế hoạch cách thức đánh giá kết học tập mô đun Bài – Phác Thảo Web Sites Bài - Thiết Kế Tổng Thể Một Web Sites -12 Bài – Xây Dựng Prototype 21 10 Bài - Thiết Kế Web Với Các Đối Tượng Đơn Giản -23 11 Bài - Thiết Kế Web Với Các Đối Tượng Phức Tạp -28 12 Bài - Giới Thiệu Các Công Cụ Thiết Kế Và Tổ Chức File Của Site Map 47 13 Bài - Kiểm Thử Và Chuyển Tải Trang Web Lên Server -50 14 Bài -Thiết Kế Web Theo Chủ Đề -60 15 Đáp án câu hỏi kiểm tra 139 16 Các thuật ngữ chuyên môn -154 17 Tài liệu tham khảo 155 Giáo trình thiết kế web GIỚI THIỆU VỀ MƠ ĐUN/MƠN HỌC Vị trí, ý nghĩa, vai trị mơ đun/mơn học : Ngày internet phổ biến rộng khắp toàn giới,là kênh thơng tin,giải trí,mua bán,học tập đa số dân chúng giới sử dụng.Vì mơn thiết kế web môn thiếu ngành tin học Mục tiêu mô đun: Sau học xong môn học học viên có khả năng: Xác định yếu tố cấu thành Web site, xác định mục đích yêu cầu Web khung site, đặt Web Site vào đời công nghệ Web site Biết thiết kế Web site bắt mắt , dễ dàng sử dụng thoả mãn yêu cầu thực tế Mục tiêu thực mô đun: Học xong mơn học học viên có khả năng: - Thiết kế trang web trình bày tổng hợp trang web bao gồm thơng tin, hình ảnh, âm liên kết với kiểu định dạng khác - Sử dụng kỹ thuật màu sắc - Xây dựng hệ thống tổ chức thông tin từ yêu cầu thực tế Xây dựng hệ thống Site Map phục vụ việc xây dựng trang Web Lập hồ sơ thiết kế thi cơng trang Web Nội dung mơ đun (Có thể danh sách học) : Chủ đề : - Phác thảo kế hoạch xây dựng Web Site - Thiết kế hệ thống thông tin Web Site - Xây dựng Prototype đánh giá hệ thống Web Site - Tích hợp phần tử Web Site - Tích hợp phần tử Multimedia cùa Web Site - Chọn công cụ tổ chức Files - Kiểm thử chuyển tải Web Site lên Server - Sử dụng cơng cụ thiết kế Web - Tích hợp phần tử có Web Site (hình ảnh, âm thanh, chữ từ form, database ) có hiệu tạo tính logic tính hấp dẫn Web Site Giáo trình thiết kế web Sơ đồ quan hệ theo trình tự học nghề Hệ thống máy tính Giao diện người máy Lập trình nâng cao Lập trình Lập trình hướng đối tượng Mạng Cấu trúc liệu thuật giải Kỹ tin học văn phịng Cơng nghệ phần mềm Internet & WWW Thiết kế Web Công nghệ Đa phương tiện Quản lý dự án phần mềm Lập trình Visual Basic Mơi trường PT Phần mềm Phần cứng máy tính Thiết kế hướng đối tượng Cơ sở liệu Kỹ Anh văn cho tin học Phân tích thiết kế hệ thống Ứng dụng CNTT doanh nghiệp Kỹ Giao tiếp Cơ sở tốn học Lập trình Web Hệ sở liệu Hướng dẫn đồ án tốt nghiệp An tồn lao động Thi tốt nghiệp Giáo trình thiết kế web Ghi chú: Thiết kế web mô đun bắt buộc Mọi học viên phải học đạt kết chấp nhận kiểm tra đánh giá thi kết thúc đặt chương trình đào tạo Những học viên qua kiểm tra thi mà không đạt phải thu xếp cho học lại phần chưa đạt phải đạt điểm chuẩn phép học tiếp mô đun/ môn học Học viên, chuyển trường, chuyển ngành.nếu học sở đào tạo khác phải xuất trình giấy chứng nhận; Trong số trường hợp phải qua sát hạch lại Giáo trình thiết kế web CÁC HÌNH THỨC HỌC TẬP CHÍNH TRONG MƠ ĐUN/MƠN HỌC Học lớp : - Phác thảo kế hoạch xây dựng Web Site - Thiết kế hệ thống thông tin Web Site - Xây dựng Prototype đánh giá hệ thống Web Site - Chọn công cụ tổ chức Files - Học phòng học thực hành trường về: - Tích hợp phần tử Web Site - Tích hợp phần tử Multimedia cùa Web Site - Sử dụng công cụ thiết kế Web - Kiểm thử chuyển tải Web Site lên Server YÊU CẦU VỀ ĐÁNH GIÁ HOÀN THÀNH MÔ ĐUN/MÔN HỌC Kỹ thực hành: - Học viên xây dựng bảng thiết kế tổng thể Web Sites từ yêu cầu thực tế - Xây dựng Site map mô tả cấu trúc tổng thể Web sites làm sở cho việc xây dựng WEB - Tích hợp phần tử có Web Site (hình ảnh, âm thanh, chữ từ form, database ) có hiệu tạo tính logic tính hấp dẫn Web Site Thái độ học viên: - Cẩn thận lắng nghe ý kiến thảo luận nhóm thiết kế Học viên cần tuân thủ tập thực hành theo thứ tự chương, từ dễ đến khó Đánh giá học viên thơng qua kiểm tra: Phần kiến thức chung : học viên thiết kế ý tưởng mơ hình hệ thống Web sites giấy, qua thuyết minh mục đích, ý nghĩa Web sites tính Phần thực hành Mỗi học viên tham gia vào nhóm Thiết kế Websites với chủ đề Nhóm có sản phẩm :  Hồ sơ thiết kế Web  Thể Web sites phần mềm xây dựng Web Điểm TB=(Lý thuyết+thực hành*2) Giáo trình thiết kế web BÀI PHÁC THẢO WEB SITES Mã bài : ITPRG13.1 Giới thiệu  Khi xây dựng website nào, bước xác định rõ mục đích mình.Khơng có mục đích nhiệm vụ rõ ràng, dự định khó đạt kết mong muốn.Lập kế hoạch cẩn thận kết hợp với việc đề mục tiêu rõ ràng chìa khóa để xây dựng web site thành công Mục tiêu thực -Nắm cấu trúc tổng thể Web Site -Xác định mục đích Web Site -Xác định đối tượng trang Web Nội dung 1.1 Một số kiến thức Web World Wide Web (WWW) World Wide Web có nhiều tên tài nguyên khác Internet, gọi WWW hay W3 Để hiểu Web, bạn cần phải bắt đầu tìm hiểu tư tưởng Hypertext Hypertext liệu gồm phần liên kết với liệu khác Một ví dụ đơn giản Hypertext bách khoa toàn thư Bạn đọc phần tử “những cây” cuối báo bạn thấy phần tham khảo nói “để biết thêm thông tin liên quan, xem thực vật (plants)” Dòng cuối liên kết, từ báo “cây” (trees) đến báo “thực vật” (plant) Trong ngôn ngữ Web, tài liệu Hypertext gồm phần liệu phần liên kết với tài liệu khác Chương trình mà bạn dùng để đọc tài liệu Hypertext gọi Browser Khi bạn theo liên kết đến phần khác chúng tơi nói bạn định vị (Navigate) Web Điều làm cho Web có khả liên kết với loại tài nguyên Internet: file văn bản, phiên kết nối Telnet, Gopher, nhóm tin Usenet v.v… Chức Browser bạn giống cửa sổ vào Internet cách vào phần liên kết mà bạn muốn việc truy cập vào tài liệu dùng phương pháp thích hợp Như đặc điểm Web xác Web cố gắng tổ chức tất thông tin Internet (thêm vào số thông tin địa phương mà bạn muốn thêm chúng vào) việc cài đặt tài liệu dạng Hypertext Mặc dù giấc mơ xa rời thực tế, Web cho phép bạn truy cập vào loại tài nguyên Internet, cách dùng Browser để đọc tài liệu thích hợp Tại phải dùng Web? Web phát triển Thụy Sĩ, trung tâm nghiên cứu CERN Tư tưởng đưa nhằm giúp nhà vật lý học CERN chia sẻ công việc họ dùng chung thông tin nhóm Chẳng sau, tư tưởng Web mở rộng áp dụng vào Internet kỹ xảo việc truy cập thông tin dịch vụ Internet Điều làm cho Hypertext có giá trị văn bình thường có phần liên kết Vấn đề nảy sinh phải đặt phần liên kết vào Hypertext cho hợp lý Điều nhiều công sức Hypertext làm tốt điều Đã có vài chương trình cố gắng tự động xử lý điều này: có chương trình đọc văn bình thường cố gắng tìm nơi để đặt liên kết Giáo trình thiết kế web Tuy nhiên khơng có chương trình thực thay suy luận người Giá trị liên kết Hypertext thêm vào văn bình thường phụ thuộc vào cách dùng phần liên kết hữu dụng Mỗi liên kết phần cho biết nhảy đến văn khác để đọc Nhưng đáng tiếc thay nhiều loại văn khơng thích nghi cho việc chúng tự nhảy Hơn nhảy được, khơng phải lúc biết xác nơi mà liên kết nhảy đến Việc nhảy đến nhảy lui tài liệu Hypertext phụ thuộc nhiều suy nghĩ người đặt phần liên kết vào tài liệu Điều quan trọng thứ hai việc dùng Web truy cập vào tài nguyên Internet Cách tốt để bạn dùng tài ngun thích hợp nhiều lần Web khơng hồn hảo Đôi lúc bạn thấy dùng công cụ thiết kế riêng cho loại liệu tốt Ví dụ, bạn dùng Web để đọc báo Usenet, bạn dùng chương trình Newsreader tốt Tuy nhiên, Web xác định công cụ mềm dẻo để bạn thám hiểm Internet 1.2 Cấu trúc tổng thể Web Site Để xác định cấu trúc tổng thể website điều cần xác định mục đích website cần thiết kế: Bước cơng đoạn thiết kế Web site có định chắn việc "xuất bản" với Web site Khơng có chủ định mục tiêu rõ ràng web site trở nên lan man, sa lầy cuối đến điểm khó quay trở lại Thiết kế cẩn thận định hướng rõ chìa khố dẫn đến thành cơng việc xây dựng Web site Trước xây dựng Web site, nên:  Xác định đối tượng độc giả web site  Web site có mục đích rõ ràng  Thiết lập chủ đề web site  Thiết kế khối thông tin chủ yếu mà web site cung cấp Chúng ta nên bắt đầu với việc xác định nguồn tài ngun nội dung, hình ảnh thơng tin mà cần đến để tạo web site phù hợp với mục đích đề - nguồn thơng tin trì cho web site hoạt động sau 1.3 Phân tích, xác định đối tượng Web Site Để định hình cho website cần thiết kế,đối tượng quan trọng chi phối cho cấu trúc toàn website cần thiết kế đối tượng độc giả, việc phân tích xác định đối tượng độc giả điều bắt buộc trình thiết kế website Xác định độc giả web site, để thiết kế cấu trúc phù hợp với nhu cầu, mong muốn họ Sự hiểu biết, trình độ, sở thích yêu cầu độc giả thay đổi từ người đọc hồn tồn khơng có kinh nghiệm, người cần đến dẫn dắt cẩn thận, đến người đọc thành thục, người giận với mang vẻ chiếu cố tới họ, làm chậm trễ việc truy nhập thông tin họ Một hệ thống thiết kế tốt thích hợp cho dải rộng trình độ, nhu cầu độc giả Ví dụ, mục đích web site chuyển tải thơng tin tình hình nội công ty, tài liệu nhân lực, hay tài liệu khác dùng cho việc in hướng dẫn thích hợp cho độc giả đọc hàng ngày, cho độc giả truy nhập lần 10 Giáo trình thiết kế web Hình 9.4: Chèn Banner Nếu ta chèn hình chữ vào trang chủ người dùng khơng thề di chuyển đến trang khác Muốn tạo đồi tượng bấm chuột vào được, ta phải gán liên kết vào đối tượng Một liên kết địa cuả trang khác phạm vi Web site Internet Tạo liên kết có nghiã cho phép người dùng di chuyển đến trang khác cách bấm chuột Tạo liên kết từ hình ảnh Trên trang chủ, bấm chọn hình thêm vào Vào menu Insert, chọn Hyperlink ( bấm Ctrl+K) FrontPage hiển thị hộp thoại Insert Hyperlink Trong hộp thoaị ta đưa vào đích cuả liên kết Trong hộp Address, nhập http://www.hsph.edu.vn Chú ý o Frontpage tự động thêm tiếp đầu ngữ http HTTP tên tắt cuả Hypertext Transfer Protocol Đây giao thức Internet 142 Giáo trình thiết kế web trình duyệt truy xuất thơng tin từ Web server o Trong ví dụ người dùng bấm vào hình họ chuyển đến trang chủ cuả trường Đại Học Y Tế Công Cộng Chọn OK để kết thúc tạo liên kết Kế tiếp ta học cách đưa thêm hình vào trang chủ Chèn hình vào trang chủ Nhấn CTRL+HOME để trở đấu trang Trong menu Insert, Chọn Picture, chọn From File Nhấp đúp vào tên tệp cần chọn FrontPage chèn hình vào vị trí hành Nhấn ENTER để đưa dòng tiêu đề xuống hàng Hình 9.5: Chèn hình vào trang chủ Đế kết thúc taọ trang chủ canh văn hình ảnh Canh thành phần trang Vào menu Edit, chọn Select All Vào menu Format, chọn Paragraph Trong danh sách Alignment, chọn Center, sau nhấn OK Bấm taị vị trí trang để thối chọn 143 Giáo trình thiết kế web Lưu trang hành Vào menu File, chọn Save As Trong hộp thoại Save As, chọn My Documents thư mục Kế hộp Page title, bấm nút Change title Trong hộp Set Page title, gõ Home Page bấm OK Trong hộp File name, gõ homepage, bấm Save Các tùy chọn cuả Page View Hiển thị thẻ HTML trang hành • Trong Page view , chọn Reveal Tags menu View • FrontPage hiển thị cách biểu diễn thẻ HTML Điều có ích người sử dụng biết HTML • Để che giấu thẻ, bấm Reveal Tags menu View lần Hiển thị mã nguồn HTML trang hành • Trong Page view, bấm chọn nút HTML đáy trang Chế độ dành cho nhà thiết kế quen với mã HTML chỉnh sửa code để thay đổi thiết kế • Chọn nút Normal đáy trang để trở khung Normal Tip Khi làm việc khung HTML , bạn sử dụng lệnh menu công cụ giống khung Normal Chế độ xem trước trang Web (preview) • Chọn Preview để xem trước trang Web Chú ý : Bạn cần có Microsoft Internet Explorer để dùng chức Xem trước trang Web cách nhanh chóng để hình dung kết thiết kế đến với người đọc • Bấm nút Normal đáy trang để trở khung Normal lần 144 Giáo trình thiết kế web Bài2: Mục đích thực hành: Sau thực hành, sinh viên thực website gồm nhiều trang web đạt yêu cầu sau: • Tạo liên kết đến trang khác Web site • Tạo lề chung di chuyển • Tạo hiệu chỉnh theme • Xem thử Web site • Tổ chức thư mục tập tin • Xuất lên World Wide Web Tăng cường định dạng cho Web site Mở Web site Trong menu File, chọn Recent Webs, chọn Hsph để mở lại trang web Thanh tiêu đề trở thành Microsoft FrontPage – :\My Documents\My Webs\Hsph Chú ý chương 1, ta chưa tạo liên kết trang web site Taọ liên kết đến trang khác Trên công cụ, bấm Toggle Pane , sau bấm Folder List Nhấp đúp chuột váo trang index.htm danh sách trang xem Folder List Khi trang chủ hiển thị Page view, nhấn CTRL+END để đưa nháy cuối trang chủ Tìm trang About_Us.htm danh sách Folder List Bây ta kéo About us phía trang chủ FrontPage tạo hyperlink đến About Us trang chủ Bấm giữ chuột About_Us.htm Folder List, kéo thả vào trang chủ FrontPage hiển thị liên kết đến trang About Us Lập lại bước để tạo liên kết khác đến Products.htm, Links.htm, Photo_gallery.htm Đặt liên kết Nhấn DOWN ARROW để chọn hyperlink Trang bạn có dạng sau : 145 Giáo trình thiết kế web Hình 10.1:Tạo mẫu trang chủ Dĩ nhiên bạn thực với trang khác Web site, việc nhiều thời gian có nhiều trang Ngồi ra, ta định thêm hay xoá trang khỏi Web site, ta phải cập nhật lại liên kết cách thủ cơng FrontPage có cách làm hay để khởi tạo, quản lý tự động cập nhật liên kết toàn bột Web site Bây giờ, bạn xoá liên kết vừa tạo chức Undo (bấm nút Undo trạng thái ban đầu) công cụ nhiều lần trả Tạo Shared Borders di chuyển (Navigation Bar) Shared borders (biên dùng chung) vùng trang Web dùng để chứa nội dung xuất cách ổn định tất trang Web site.Các biên chứa banner , quảng cáo nút di chuyển Banner trang có` thể tiêu đề trang sinh tạo trang, di chuyển hàng cột chứa liên kết Web site FrontPage tự động cập nhật shared borders navigation bars, cho cấu trúc Web site luôn hoạt động tốt, thêm, di chuyển, xoá trang.Tạo shared border Web site Chuyển qua chế độ Navigation view 146 Giáo trình thiết kế web Tắt hiển thị Folder List chế độ làm việc Trong menu Format, chọn Shared Borders FrontPage hiển thị hộp thoại Shared Borders Chú ý có loại di chuyển gắn vào Trong hộp thoại Shared Borders , tạo tuỳ chọn cho tất trang Chắc chắn All pages chọn Đánh dấu Top đánh dấu tiếp Include navigation buttons để định cho hiển thị đầu trang Đánh dấu Left đánh dấu tiếp Include navigation buttons để định cho hiển thị bìa trái trang Bỏ trống Right Bottom , sau bấm OK FrontPage tạo shared borders di chuyển cho tất trang Sau đây, ta học cách sửa đổi hình thức di chuyển cho phù hợp Thử nghiệm hyperlink liên kết Trong chế độ Navigation view, Nhấp đúp chuột vào trang chủ Home Page (index.htm) Tắt hiển thị Folder List chế độ làm việc Giữ CTRL sau bấm hyperlink có tên About Us lề trái FrontPage mở trang đích liên kết Trong trang About Us , shared borders di chuyển chèn thêm vào Tuy nhiên, trang này, liên kết tới trang khác hiển thị lề (top) Đó FrontPage sử dụng cấu trúc site để xác định cấp (level) trang hành Mặc nhiên, shared border tới trang cấp, shared border bên trái tới trang cấp Hiệu chỉnh liên kết (link bar) Mở trang index.htm FrontPage mở lại trang chủ Trong phần thân cuả trang chủ nhấp đúp chuột lên dòng chữ màu đỏ Edit properties for this Link Bar to display hyperlinks here Nhấp đúp chuột lên liên kết để mở hộp thoại Link Bar Properties Trong hộp Link Bar Properties , bấm Child level, xoá hộp kiểm Home page Parent page, sau bấm OK FrontPage tạo navigation bar đến tất trang cấp trang chủ Trang bạn có dạng sau : 147 Giáo trình thiết kế web Hình 10.2:Hiệu chỉnh liên kết Chú ý lề trái chứa liên kết tương tự lề Ta học cách sửa hình thức liên kết lề Trong lề trái trang chủ, bấm đúp navigation bar Trong hộp Link Bar Properties, chọn Same level, đành dấu chọn Home page, nhấn OK FrontPage hiển thị Edit properties for this link bar to display hyperlinks here Để lưu trang chủ, Chọn Save menu File Trang bạn có dạng sau : 148 Giáo trình thiết kế web Vào menu Window , chọn About_Us.htm FrontPage mở lại trang About Us Chú ý tất thay đổi liên kết đề tự động phản ánh trang này, trang khác Chủ đề định dạng (theme) Trong Web site chúng ta, hình ảnh, danh sách, form shared border, liên kết có đủ tạo nên sắc thái đa dạng Tuy nhiên, hình thức trang Web site trình bày cách quán, Frontpage sử dụng khái niệm theme (tạm gọi chủ đề định dạng hay mẫu định dạng), giúp nhà thiết kế tiết kiệm nhiều thời gian FrontPage 2002 có 50 theme thiết kế sẵn cách chuyên nghiệp Mỗi theme bao gồm thành phần trang : danh sách (list), font, ảnh nền, hình trang trí, di chuyển,… làm cho hình thức Web site thêm sống động quán Để áp đặt theme Web site Chọn Page tab index.htm Trong menu Format, chọn Theme FrontPage hiển thị hộp thoại Themes Tại đây, bạn chọn theme tuỳ thích Mỗi lần bấm chọn tên theme, hình mẫu để bạn xem trước có ưng khơng trước định chọn Trong phần Apply theme to,để xác lập cho tất trang chọn, chắn bạn đánh dấu All pages Trong phần cài đặt themes, chọn Blends Bỏ chọn Active graphics, Chọn OK to để xác lập lại theme Chọn Yes để khẳng định xác lập theme Trang bạn có dạng sau : 149 Giáo trình thiết kế web Như bạn thấy, áp đặt định dạng theo chủ đề làm thay đổi hồn tồn hình thức Website Thật đáng ngạc nhiên Hiệu chỉnh Theme Mặc dù tiêu đề trang (page banner) tương đối đẹp, có lẽ chưa phù hợp với nội dung web site Chúng ta tạo banner khác dựa vào việc sửa đổi theme chọn Mở lại trang chủ Trên menu Format, bấm Theme FrontPage hiển thị hộp thoại Themes Trong hộp thoại Themes, đánh dấu All Pages Kế tiếp, bấm Modify Dưới câu hỏi What would you like to modify? bấm Graphics FrontPage hiển thị hộp thoại Modify Theme Tại bạn thay đổi hình ảnh thành phần đồ hoạ khác Trong Item list, bấm Banner Trên thẻ Picture , bấm Browse tên file hình FrontPage hiển thị hộp thoại Open File hiển thị hình ảnh Web site Vì hình ảnh ta muốn dùng chưa phải phần web site, ta tìm thư mục Chuyển tới thư mục tên FPTutor2002 Bấm đúp file czbanner FrontPage thay banner hình nhập 10 Bấm OK Modify Theme , sau bấm OK Themes 11 Chọn Yes để tái xác nhận FrontPage hiển thị hộp thoại Save Theme với thông báo This theme is readonly Please enter a new theme title to save as: 12 Nhập Hsph làm tiêu đề theme sửa, chọn OK 13 Chọn Yes để xác lập theme 14 Bấm Save menu File Trang bạn có dạng sau : 150 Giáo trình thiết kế web Tip Trong ví dụ này, ta thay đổi hình đơn giản để minh hoạ việc sửa đổi theme Bằng cách đó, ta tạo theme dễ dàng hình ảnh riêng Xem trước Web site Xem trước Web site Web browser Trong menu File , chọn Preview in Browser FrontPage hiển thị hộp thoại Preview in Browser để bạn lựa chọn trình duyệt cài đặt máy (Trong WinXP, có sẵn IE6) Web site bạn sẵn sàng xem thử trình duyệt Hình 10.4: Xem trước website Bấm liên kết để kiểm tra đích Trên trang Photo Gallery, bấm hình thu nhỏ (thumbnail) để kiểm tra liên kết tới hình thực Dùng nút Back trình duyệt để trở Photo Gallery Đóng cửa sổ Web browser sau kiểm tra xong 151 Giáo trình thiết kế web Tổ chức file web site Bây Web site chứa nhiều trang tập tin, bạn dùng chế độ Folders view để quản lý chúng Tương tự Windows Explorer, Folders view cho phép thực thao tác quản lý tập tin thư mục phạm vi Web site Bạn thêm, bớt, thay đổi, xếp lại tài nguyên mà không phá vỡ liên kết cấu trúc Hình 10.5:Tổ chức thư mục web Trong bước sau, thực hành chuyển tệp ảnh từ Hsph Web site vào thư mục Pictures FrontPage tạo thành phần Web site Chú ý bạn dùng Explorer hay trình quản lý file khác để thực thao tác file, bạn bẻ gẫy liên kết trang Web Di chuyển file hình ảnh vào thư mục Pictures Trên Views bar, bấm Folders FrontPage chuyển qua chế độ Folders view Trong Folder List khung, bấm thư mục :\My Documents\My Webs\Hsph Trong khung Contents , bấm cột Type Danh sách file nhóm theo loại (GIF, JPEG, ) Trong khung Contents, bấm file GIF (czbanner.gif) để chọn Giữ SHIFT, bấm file GIF cuối danh sách (frontpage.gif) Kéo thả (nút phải) vào thư mục Pictures Folder List Khi thư mục pictures chọn, thả chuột , bấm Move Here menu tắt FrontPage hiển thị hộp thoại Rename trình di chuyển Lặp lại bước cho tệp JPG (FPTutor003.jpg ->FPTutor006.jpg) 10 Trong khung Contents , bấm cột Name để xếp lại theo tên 152 Giáo trình thiết kế web Tạo thư mục ( folder) Trong danh sách thư mục , chọn thư mục chưá thư mục cần tạo Trong menu File , chọn New chọn tiếp Folder FrontPage tạo thư mục có tên tạm “new folder” Gõ tên nhấn ENTER Trong thư mục, Nhấp phải chuột vào thư mục vừa tạo Trong menu shortcut, chọn Delete Trong hộp Confirm Delete , chọn Yes FrontPage xoá folder khỏi Web site Xuất (publishing) Web site Hsph Khi xuất Web site lên INternet Intranet, FrontPage tự động kiểm tra liên kết , địa trang đường dẫn địa Xuất Web site làm việc Đóng tất trang Page view Trên menu File, bấm Publish Web, bấm nút Publish Web button công cụ Hình 10.6:Xuất web Nhập địa URL Web server , (ví dụ http://example.microsoft.com/~myweb), sau bấm Publish Tip Sau xuất lần đầu, bạn bỏ qua hộp thoại Publish Web cách bấm nút Publish Web toolbar Nếu FrontPage phát bạn xuất lên Web server không hỗ trợ FrontPage Server Extensions, liền chuyển qua chế độ file transfer protocol (FTP) 153 Giáo trình thiết kế web Tip Khi xuất Web site, tất trang hình tải lên mạng Để loại trừ số file không muốn xuất bấm Don’t Publish Khi FrontPage xuất thành cơng, xuất hộp thoại chứa địa URL , qua mở Web site trình duyệt Web để xem lại 154 Giáo trình thiết kế web                    CÁC THUẬT NGỮ CHUYÊN MÔN HTML: Hypertext markup language-Ngôn ngữ liên kết siêu văn Dynamic HTML: Là ngôn ngữ HTML mở rộng làm tăng hiệu ứng cho văn Active Data Objects(ADO): Các thành phần giúp ứng dụng người dùng truy cập chế tác liệu Active server page: Là tài liệu chứa sript nhúng server Active X: Là tập hợp kỹ thuật cho phép thành phần phần mềm tương tác với thành phần khác môi trường mạng URL(Uiform Resource Locator): địa tới trạm Internet hay mạng nội Bookmark:Một vị trí trang web đích Hyperlink Web Browser: Phần mềm biên dịch đánh dấu file HTML,định dạng chúng sang trang web hiễn thị chúng cho người dùng xem Script:Là tập lệnh dùng để báo cho chương trình biết cách thực thủ tục quy định Structured Query Language-SQL:Là ngôn ngữ vấn đáp hệ sở liệu IBM soạn thảo Hyperlink:Siêu liên kết HTTP Adrress:là địa HTTP Database:Cơ sở liệu,kho liệu Hypertext:Văn tài liệu truy tìm khơng theo tuần tự,người đọc tự đuổi theo dấu vết liên quan suốt tài liệu Multimedia:Đa phương tiện,đa truyền thông World wide web-www:Là dịch vụ Internet File Transfer Protocol-FTP:Là giao thức truyền tệp Internet:Một hệ thống gốm mạng máy tính liên kết với phạm vi toàn giới Password:Mật khẩu,mật lệnh 155 Giáo trình thiết kế web TÀI LIỆU THAM KHẢO Giáo trình thiết kế web-Bùi Huy Quỳnh-Đại học sư phạm Kỹ Thuật TPHCM,2004 Ngắn gọn Microsoft Frontpage 2000-Đinh Văn Bình-Nhà xuất khoa học kỹ thuật 2001 Thực hành thiết kế trang web Microsoft Frontpage 2000,Nhà xuất giáo dục 2000 Thiết kế web với Frontpage 2000,Trương Quang Thiện,Nhà xuất thống kê Tự học Frontpage 2002 24h,Lữ Đức Hào,Nhà xuất thống kê 2002 156 ... chương trình khoa học máy tính .Giáo trình dự kiến cung cấp số kiến thức tảng thiết kế website.Mục tiêu giáo trình cung cấp cho sinh viên kỹ thiết kế web bản,chu trình thiết kế tạo website theo trình. .. tạo tính logic tính hấp dẫn Web Site Giáo trình thiết kế web Sơ đồ quan hệ theo trình tự học nghề Hệ thống máy tính Giao diện người máy Lập trình nâng cao Lập trình Lập trình hướng đối tượng Mạng... 20 Giáo trình thiết kế web BÀI Tên bài : XÂY DỰNG PROTOTYPE Mã bài : ITPRG13.3 Giới thiệu  Sau lập kế hoạch cho website,bước xây dựng chi tiết hồ sơ thiết kế thiết lập prototype cho trang web, bước