(NB) Giáo trình Thiết kế web (Nghề Lập trình máy tính): Phần 1 trang bị cho học sinh những kiến thức cơ bản về kiến thức chung về phác thảo web sites, thiết kế tổng thể một web sites, xây dựng prototype, thiết kế web với các đối tượng đơn giản và thiết kế web với các đối tượng phức tạp. Mời các bạn tham khảo!
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 Chọn hình kéo lên hình kia, chúng kết nối thành Thao tác hình: +Modify\Shape\Convert lines to fills: chuyển đường nét thành hình dạng tơ màu +Modify\Shape\Expand fill: mở rộng vùng tơ hình (expand: mở ngoài, Inset: mở vào trong, Distance: khoảng mở) +Modify\Shape\Soften fill edges: làm mềm đường biên hình(Distance: khoảng cách biên mềm biên ngoài; Step: số bước biên mềm) +Modify\Transform\Scale: co dãn +Modify\Transform\Rotate: xoay +Modify\Transform\Flip…: lật ngang dọc +Modify\Transform\Edit Center: chỉnh tâm hình che phủ Đặt thuộc tính cho khung: Modify\Movie hộp thoại: +Frame rate: chứa tốc độ hoạt cảnh cho frame +Dimension: kích thước ngang dọc cho frame +Match: khung vừa với máy in nội dung +Background color: chọn màu cho frame +Rulers unit: chọn đơn vị đo thước làm việc Thao tác văn bản: chọn, menu Text chọn mục sau: +Font: chọn font +Size: chọn kích thước +Style: chọn kiểu +Align: canh biên +Tracking: co dãn cỡ chữ +Character: cửa sổ thành phần Character +Paragraph: cửa sổ thành phần Paragraph +Tách rời văn bản: chọn, Modify\Break Apart (có thể sửa ký tự, tô màu… Canh biên: cho sổ thành phần Align (Window\Panels\Align | Ctrl + K) Chọn trong: Align left edge: canh cạnh trái Align horizontal center: canh (ngang) Align right edge: canh cạnh phải Align top edge: canh cạnh đầu Align vertical center: canh (dọc) Align bottom edge: canh cạnh đáy Distribute top edge: canh đầu Distribute vertical center: Distribute bottom edge: Distribute left edge: Distribute horizontal center: Distribute right edge: 32 Giáo trình thiết kế web Match width: Match height: Match width and height: Space evenly vertically: Space evenly horizontally: 5.1.4 Ảnh +Flash chèn vào tập tin ảnh dạng: BMP, JPG, GIF (tĩnh), PNG +Chèn ảnh: menu File\Import chọn tên tập tin ảnh.(là đối tượng che phủ thao tác đối tượng hình vẽ) +Phân rã ảnh: chọn ảnh, Modify\Break Apart +Sử dụng cửa sổ thành phần Library: Window\ Library +Tối ưu ảnh: Mở cửa sổ Library, Right click, chọn Properties, xác lập tính chất (Allow smoothing: cho phép làm mềm đường nét, Compression: chọn phương pháp nén, Quality: nhập chất lượng nén) +Lấy từ Library: Drag từ khung Library +Ảnh động Gif: nạp quan sát tiến trình (Timeline) 5.1.5 Âm (SOUND) +Flash cho phép chèn vào tập tin âm dạng Wav, Mp3 +Chèn âm thanh: File\Import chọn tên tập tin âm (âm đưa vào Library) Hoạt hình Tạo Hoạt hình: Cách 1_ Tạo hoạt hình khung hình nối tiếp: cách cho liên tiếp khung hình biến đổi nối tiếp +Tạo hình khung làm việc +Click chọn khung hình TimeLine, chọn Insert\KeyFrame (ta khung hình hố giống với khung trước đó), thực thêm, bớt, thay đổi khung hình tùy ý +Lập lại bước kết thúc hoạt hình +Nhấn Enter để kiểm tra Cách 2_Tạo hoạt hình cách biến đổi hình dạng: cách cho hình biến đổi dạng thành hình khác Flash sử dụng phép biến hình theo cách lơgic (có thể tạo dạng hình ngồi ý muốn) Khơng thể biến đổi hình dạng biểu tượng, ảnh, nhóm +Tạo hình khung làm việc +Click chọn khung hình Timeline, chọn Insert\Blank Key Frame (ta khung hình khố rỗng), Tạo dạng hình khác +Trở khung hình 1, chọn Window\Panels\Instance chọn thẻ Frame qui định sau: 33 Giáo trình thiết kế web Label: nhập tên (sẽ tiến trình, tuỳ chọn) Tweening: chọn Shape (biến hình theo nét) ++Easing: chỉnh tốc độ (Easing in: hoạt hình chậm, Easing Out: hoạt hình nhanh) ++Blend: chọn cách thiết lập cho biến hình (Angular: tốt cho góc đường thẳng, Distribute: tốt cho đường cong, trơn) + Lập lại bước kết thúc hoạt hình +Nhấn Enter để kiểm tra Định điểm biến hình: +Chức Shape Hint: co