(NB) Giáo trình “Thiết kế web” được biên soạn để phục vụ cho công tác giảng dạy và học tập của giảng viên, học sinh, sinh viên chuyên ngành Công nghệ thông tin, và là tài liệu tham khảo cho các lập trình web tại các doanh nghiệp. Cấu trúc của giáo trình gồm 10 chương, mời các bạn cùng tham khảo để biết thêm nội dung chi tiết.
TẬP ĐOÀN DỆT MAY VIỆT NAM TRƯỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT VINATEX TPHCM GIÁO TRÌNH MƠN HỌC/MƠ ĐUN: THIẾT KẾ WEB NGÀNH/NGHỀ: CƠNG NGHỆ THƠNG TIN TRÌNH ĐỘ: 12/12 Ban hành kèm theo Quyết định số: /QĐ- ngày ………tháng năm…… ……… …………………… Tháng 08 năm 2019 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính 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 LỜI GIỚI THIỆU Giáo trình “Thiết kế web” biên soạn để phục vụ cho công tác giảng dạy học tập giảng viên, học sinh, sinh viên chuyên ngành Công nghệ thông tin, tài liệu tham khảo cho lập trình web doanh nghiệp Cấu trúc giáo trình gồm 10 chương: Chương : Giới thiệu web Chương : Hyperlink – hình ảnh Chương : Danh sách Chương : Bảng trình bày trang Chương : Form Chương : Casscading style sheet Chương : Giới thiệu Dreamweaver Chương : CSS Chương : Hình Ảnh Hyperlink DW Chương 10 : Bảng trình bày trang DW Trong trình biên soạn, có nhiều cố gắng khơng tránh khỏi hạn chế thiếu sót định, tác giả mong nhận ý kiến đóng góp q đọc giả để giáo trình ngày hoàn thiện Xin chân thành cảm ơn Tp HCM, ngày……tháng……năm……… Biên soạn BỘ MÔN TIN HỌC MỤC LỤC Tên môn học: Thiết kế Web CHƯƠNG 1: GIỚI THIỆU VỀ WEB 11 I CÁC KHÁI NIỆM CƠ BẢN 11 II GIỚI THIỆU KHÁI QUÁT VỀ WEB 12 III TAG HTML 12 IV CẤU TRÚC CƠ BẢN CỦA TRANG WEB 13 Cấu trúc trang web: 13 Hiển thị trang web: 13 V CÁC TAG HTML CƠ BẢN 13 VI MỘT SỐ THẺ ĐẶC BIỆT (THAM KHẢO) 18 Thẻ 18 Thẻ 19 Thẻ 19 Thẻ 19 VII MỘT SỐ THAO TÁC TRONG CỬA SỔ TRÌNH DUYỆT (THAM KHẢO) 20 CHƯƠNG 2: HYPERLINK – HÌNH ẢNH 21 I GIỚI THIỆU HYPERLINK 21 II TẠO HYPERLINK 21 III HÌNH ẢNH TRÊN TRANG WEB 23 CHƯƠNG 3: DANH SÁCH 25 I DANH SÁCH KHƠNG CĨ THỨ TỰ (UNORDER LIST-UL) 25 II DANH SÁCH CÓ THỨ TỰ (OrderList-OL) 26 III DANH SÁCH ĐỊNH NGHĨA 27 CHƯƠNG 4: BẢNG VÀ TRÌNH BÀY TRANG 29 I BẢNG 29 II CÁC THUỘC TÍNH 30 Thuộc tính bảng 30 Thuộc tính cột 31 III TRÌNH BÀY TRANG 33 CHƯƠNG 5: FORM 35 I GIỚI THIỆU FORM 35 Sử dụng Form 35 Cách tạo 35 II CÁC PHẦN TỬ CỦA FORM 35 Input boxes 35 Selection List: 39 TextArea: Hộp văn cho phép nhập nhiều dòng 41 Nhãn: dùng để tạo nhãn liên kết với thành phần kèm 42 Fieldset: Nhóm đối tượng giống vào phần logic 42 Điều khiển phần tử form: 44 CHƯƠNG 6: CASCADING STYLE SHEET-CSS 45 I GIỚI THIỆU VỀ CSS 45 II CÁCH TẠO 45 III ĐỊNH BẢNG MẪU CHO LỚP (CLASS) 47 Định tag riêng biệt: 48 Tạo tag chung 49 Tạo tag cấp khối tùy ý 49 Tạo tag hàng tùy ý: 50 Các thuộc tính định dạng văn bản: 50 Định dạng danh sách 50 Định dạng màu nền: 51 Định dạng Hypertext link 51 CHƯƠNG 7: GIỚI THIỆU DREAMWEAVER 52 I GIỚI THIỆU 52 II CÀI ĐẶT 52 III MÀN HÌNH DREAMWEAVER: 55 IV KẾ HOẠCH THIẾT KẾ MỘT WEBSITE 57 Các yêu cầu thiết kế website 57 Thao tác tạo Web bản: 57 Thiết kế trang Web đơn 60 Tạo liên kết trang Web đơn thành Website 60 CHƯƠNG : ĐỊNH DẠNG VĂN BẢN - SỬ DỤNG CSS 63 I ĐỊNH DẠNG VĂN BẢN 63 II SỬ DỤNG CSS (CASCADING STYLE SHEETS) 64 CHƯƠNG 9: HÌNH ẢNH VÀ HYPERLINK TRONG DW 67 I CHÈN HÌNH ẢNH TRONG TRANG WEB 67 Chèn ảnh vào trang 67 Hiệu chỉnh thuộc tính ảnh 67 Chèn khung ảnh 67 Insert Rellover Image:Chèn ảnh rê chuột vào 68 Chèn Flash 68 Ảnh trang 69 II LIÊN KẾT TRANG TRONG DREAMWEAVER 69 CHƯƠNG 10: BẢNG VÀ TRÌNH BÀY TRANG TRONG DW 74 I TABLE 74 Kẻ bảng 74 Hiệu chỉnh bảng 74 Thuộc tính bảng 75 II TRÌNH BÀY TRANG 75 Layout Table layout cell 75 Thuộc tính Layout Table Layout cell: 76 Các lớp Layer 77 III TEMPLATE 78 Tạo Template: 78 Hiệu chỉnh Template: 79 Tài liệu tham khảo 81 GIÁO TRÌNH MƠN HỌC/MƠ ĐUN Tên mơn học: Thiết kế Web Mã môn học: MH 18 Thời gian thực môn học: 45 giờ; (Lý thuyết: 15 giờ; Thực hành, thí nghiệm, thảo luận, tập: 27 giờ; Kiểm tra: giờ) I Vị trí, tính chất mơn học: Vị trí: học sau mơn Đồ hoạ ứng dụng môn học sở bắt buộc Tính chất: mơn học chun mơn bắt buộc II Mục tiêu môn học: Về kiến thức: + Nhận biết khái niệm thường sử dụng lĩnh vực internet web + Trình bày giai đoạn phát triển website, đặc biệt qui trình thiết kế layout cho website + Trình bày cấu trúc trang HTML cách dùng tag + Trình bày cách kết hợp ngơn ngữ HTML CSS để thiết kế trang web, loại bảng kiểu CSS selector, properties CSS + Trình bày cách làm việc với cơng cụ Dreamweaver Về kỹ năng: + Triển khai bước qui trình thiết kế layout + Xây dựng website tĩnh với HTML CSS + Sử dụng thành thạo phần mềm thiết kế layout Dreamweaver Về lực tự chủ trách nhiệm: + Rèn luyện tính tỉ mỉ, siêng năng, ham học hỏi, … + Hình thành tinh thần tự giác công việc + Tư tự học, học nhóm,… III Nội dung mơn học: Nội dung tổng quát phân bổ thời gian: Thời gian (giờ) Thực hành, Số Tên chương, mục Tổng Lý thí nghiệm, Kiểm TT số thuyết thảo luận, tra tập Chương 1: Giới thiệu web Chương 2: Hyperlink – hình ảnh 3 Chương 3: Danh sách Chương 4: Bảng trình bày trang Chương 5: Form Chương 6: Cascading style sheet 2 Chương 7: Giới thiệu Dreamweaver Chương 8: CSS Chương 9: Hình Ảnh Hyperlink DW 10 Chương 10: Bảng trình bày trang DW Cộng 45 15 27 Nội dung chi tiết: Chương 1: Giới thiệu web Thời gian: Mục tiêu: Trình bày cú pháp HTML Tạo trang web với tag cú pháp Nội dung chương: 2.1 Các khái niệm Thời gian: 2.2 Giới thiệu khái quát web Thời gian: 2.3 Tag html Thời gian: 2.4 Cấu trúc trang web Thời gian: 2.5 Các tag html Thời gian: Chương 2: Hyperlink – hình ảnh Thời gian: Mục tiêu: Trình bày cách tạo Hyperlink Chèn Hyperlink vào trang web Sử dụng hình ảnh để chèn Hyperlink Nội dung chương: 2.1 Giới thiệu hyperlink 2.2 Tạo hyperlink 2.3 Hình ảnh trang web Chương 3: Danh sách Thời gian: Mục tiêu: Trình bày cách tạo dạng danh sách Tạo sử dụng loại danh sach HTML Nội dung chương: 2.1 Danh sách khơng có thứ tự 2.2 Danh sách có thứ tự 2.3 Danh sách định nghĩa Chương 4: Bảng trình bày trang Thời gian: Mục tiêu: Nêu cách tạo bảng, Tạo bảng trang web thực thay đổi thuộc tính bảng Nội dung chương: 2.1 Bảng 2.2 Các thuộc tính 2.3 Trình bày trang Chương 5: Form Thời gian: Mục tiêu: Nêu cách tạo form chèn phần tử form vào trang web Tạo form vào trang web chèn phần tử form vào web Nội dung chương: 2.1 Giới thiệu form 2.2 Các phần tử form Chương 6: Cascading style sheet Thời gian: Mục tiêu: Nêu cách tạo chèn loại CSS vào trang web Tạo loại CSS chế độ code Chèn CSS tạo vào trang web Nội dung chương: 2.1 Giới thiệu 2.2 Cách tạo 2.3 Định bảng mẫu cho lớp Kiểm tra Chương 7: Giới thiệu Dreamweaver Thời gian: Mục tiêu: Mở Dreamweaver sử dụng design Nêu kế hoạch thiết kế website Nội dung chương: 2.1 Giới thiệu 2.2 Cài đặt 2.3 Màn hình DW 2.4 Kế hoạch thiết kế website Chương 8: CSS Thời gian: Mục tiêu: Nêu cách tạo CSS Tạo chèn loại CSS vào trang web Nội dung chương: 2.1 Định dạng văn Thời gian: 2.2 Sử dụng css Thời gian: Chương 9: Hình Ảnh Hyperlink DW Thời gian: Mục tiêu: Nêu cách chèn hình ảnh trang web Chèn hình ảnh vào trang web Nêu thực chèn liên kết trang Dreamweaver Nội dung chương: 2.1 Chèn hình ảnh trang web 2.2 Liên kết trang dw Chương 10: Bảng trình bày trang DW Thời gian: Mục tiêu: Tạo sử dụng bảng Dreamweaver Tạo sử dụng Template Dreamweaver Nội dung chương: 2.1 Table Thời gian: 2.2 Trình bày trang Thời gian: 2.3 Template Thời gian: Kiểm tra Thời gian: IV Điều kiện thực mơn học: Phịng học chun mơn hóa/nhà xưởng: phịng lab tin học Trang thiết bị máy móc: máy vi tính có phần mềm Dreamweaver Học liệu, dụng cụ, nguyên vật liệu: sách, tập, máy tính có phần mềm chun dụng Các điều kiện khác: không V Nội dung phương pháp đánh giá: Nội dung: Kiến thức: + Nêu khái niệm thường sử dụng lĩnh vực internet web + Trình bày giai đoạn phát triển website, đặc biệt qui trình thiết kế layout cho website + Trình bày cấu trúc trang HTML cách dùng tag + Trình bày cách kết hợp ngôn ngữ HTML CSS để thiết kế trang web, loại bảng kiểu CSS selector, properties CSS Kỹ năng: + Xác định bước qui trình thiết kế layout + Sử dụng HTML CSS để xây dựng website tĩnh + Sử dụng thành thạo phần mềm thiết kế layout Dreamweaver Năng lực tự chủ trách nhiệm: + Tích cực tham gia tự học, tham gia xây dựng bài, làm việc nhóm Phương pháp: Các kiến thức kỹ đánh giá qua nội dung tự nghiên cứu, ý thức thực môn học, kiểm tra thường xuyên, kiểm tra định kỳ kiểm tra kết thúc môn học: - Điểm mơn học bao gồm điểm trung bình điểm kiểm tra: tự nghiên cứu, điểm kiểm tra thường xuyên, kiểm tra định kỳ có trọng số 0,4 điểm thi kết thúc mơn học có trọng số 0,6 - Điểm trung bình điểm kiểm tra trung bình cộng điểm kiểm tra thường xuyên, điểm kiểm tra định kỳ tự nghiên cứu theo hệ số loại điểm Trong đó, điểm kiểm tra thường xuyên điểm tự nghiên cứu tính hệ số 1, điểm kiểm tra định kỳ tính hệ số - Hình thức thi: tiểu luận (10 ngày) (được thơng báo vào đầu học kỳ) VI Hướng dẫn thực môn học: Phạm vi áp dụng môn học: Chương trình mơn học sử dụng để giảng dạy cho trình độ Cao đẳng Hướng dẫn phương pháp giảng dạy, học tập môn học: - Đối với giảng viên: Trước giảng dạy cần phải vào nội dung học chuẩn bị đầy đủ điều kiện cần thiết để đảm bảo chất lượng giảng dạy Khi thực chương trình mơn học cần xác định điểm kiến thức bản, xác định rõ yêu cầu kiến thức, kỹ nội dung Cần liên hệ kiến thức với thực tế sản xuất đời sống, đặc biệt phần mềm thực tế sử dụng mạng Internet có hiệu - Đối với người học: Chủ động, tích cực tiếp thu kiến thức, tự nghiên cứu, chuẩn bị theo nội dung giảng viên hướng dẫn, yêu cầu trước đến lớp Cần thực tất tập tự nghiên cứu toán thực tế mơn học có sẵn nhằm mục đích củng cố, ghi nhớ, khắc sâu kiến thức học Xây dựng kế hoạch tự học, tự nghiên cứu cho cá nhân Tham dự 70% thời gian học lý thuyết đầy đủ học tích hợp, học thực hành, thực tập yêu cầu mơn học quy định chương trình mơn học Những trọng tâm cần lưu ý: Hyperlink – hình ảnh Danh sách Bảng trình bày trang Form Cascading style sheet Giới thiệu Dreamweaver CSS Hình Ảnh Hyperlink DW Bảng trình bày trang DW Tài liệu tham khảo: [1] Giáo trình Thiết Kế Web, Nhà xuất thống kê [2] Đề cương giảng Thiết Kế Web, Trường CĐ KT-KT VINATEX TP.HCM [3] Giáo trình thiết kế web, Chu Văn Hồnh [4] Tự học thiết kế trang Web, Nhà xuất thống kê [5] Thực hành thiết kế Web, Nhà xuất ĐH Quốc Gia [6] Thiết kế xuất bảng trang Web, Nhà xuất thống kê CHƯƠNG 9: HÌNH ẢNH VÀ HYPERLINK TRONG DW I CHÈN HÌNH ẢNH TRONG TRANG WEB CHÈN ẢNH VÀO TRANG − Ảnh thư mục Images Site: ▪ Đặt dấu nháy vị trí cần chèn ảnh ▪ Drag chuột kéo tập tin ảnh Site Panel thả vào trang − Ảnh Site: ▪ Chọn Insert -> Image ▪ Xuất hộp thoại Select Image Source ▪ Chọn tập tin ảnh cần chèn -> OK HIỆU CHỈNH THUỘC TÍNH CỦA ẢNH − Chọn ảnh chèn − Window→Properties ▪ ▪ ▪ ▪ ▪ ▪ Image: Đặt tên cho ảnh W (Width), H (Height): Độ rộng chiều cao ảnh, tính Pixel Src: đường dẫn tương đối đến tập tin ảnh Alt: câu thơng báo xuất trình duyệt rê chuột vào ảnh Link: Địa URL nơi cần liên kết đến Edit: Chuyển qua Macromedia Fire Works hiệu chỉnh ảnh − − − Crop : Cắt xén ảnh Brightness/Contrast : Chỉnh độ sáng tối ảnh Sharpen: Chỉnh độ sắc nét cho ảnh − Resample: Lưu lại kích thước điều chỉnh − Optimize in Fireworks: chuyển qua Macromedia FireWorks để hiệu chỉnh Map: bảng đồ liên kế ảnh Vspace, Hspace: Khoảng cách trên, dưới, trái, phải phần nội dung văn đến ảnh Target: Khung chứa trang liên kết đến Low Src: tên tập tin ảnh phụ có độ phân giải thấp, làm ảnh thay chờ hiển thị ảnh trình duyệt Border: đường viền ảnh Align: Canh lề trái, phải, ▪ ▪ ▪ ▪ ▪ ▪ CHÈN KHUNG ẢNH − Trong thiết kế, nhiều lúc cần dự phòng trước cho ảnh trang trí, chưa có ảnh thích hợp, ta chèn trước khung ảnh với kích thước xác định để giữ chổ ▪ Chọn Insert→ Image Objects→ Image Placeholder ▪ Nhập tên, kích thước, màu cho khung ảnh − Chèn ảnh vào khung ảnh: ▪ Double click vào khung cần chèn ảnh ▪ Xuất hộp thoại Select Image Source, chọn tập tin ảnh cần chèn vào khung INSERT RELLOVER IMAGE:CHÈN ẢNH KHI RÊ CHUỘT VÀO − Insert→ Image Objects→ Rollover Image, xuất hộp thoại Rolloveer Image ▪ Origial Image: ảnh gốc ▪ Rollover Image : ảnh rê chuột vào CHÈN FLASH − − − − Insert→ Media→ Swf Chọn tập tin kiểu swf Tại vị trí chèn xuất biểu tượng Flash Hiệu chỉnh thuộc tính Flash ▪ Flash: Tên đối tượng Flash ▪ W (Width) H (Height): Chiều rộng chiều cao ảnh Flash ▪ File: tên tập tin Shockware Flash ▪ Src: tên tập tin gốc Flash ▪ Edit: Hiệu chỉnh Macromedia Flash ▪ Reset size: trả kích thước ban đầu ▪ Loop: Ảnh Flash lập vô tận ▪ AutoPlay: tự động diễn hoạt mở trang ▪ Vspace, Hspace: khoảng cách trên, dưới, trái, phải đối tượng Flash đến văn ▪ Quality: chất lượng hiển thị ▪ Show All: hiển thị tất đối tượng khung ▪ No Border: không giới hạn khung viền ▪ ▪ ▪ Exact fit: vừa khít khung viền Align: canh lề Bg: màu ảnh Flash ẢNH NỀN TRANG − Ảnh ảnh tự động lợp đầy trang Web Khi thiết kế bạn nên chọn mẫu thật nhạt, chữ sậm thật sậm, chữ màu sáng để người xem dễ đọc − Tùy thuộc vào loại mà xác định kích thước ảnh cho phù hợp, tạo ảnh với số Kb nhỏ trang hiển thị nhanh Cách tạo ảnh nền: ▪ ▪ ▪ Đặt trỏ trang Chọn Modify→ Page Properties Bacground Images: nhập đường dẫn đến tập tin ảnh làm II LIÊN KẾT TRANG TRONG DREAMWEAVER Liên kết Một liên kết nối từ trang nguồn đến trang đích gồm thành phần ▪ Đối tượng chọn làm nút liên kết văn (Text), hình ảnh (Image) nút (Button) Trong Macromedia Dreamweaver cung cấp thêm số đối tượng đặc biệt làm nút liên kết Flash Text, Flash Button, Navigation bar, Rollover Images ▪ Địa URL trang cần liên kết đến: Tùy thuộc vào địa URL mà chia làm loại liên kết + Liên kết nội : liên kết nội trang Website + Liên kết ngoại: liên kết đến trang thuộc Website khác + Liên kết Email: liên kết đến chương trình gửi thư tín điện tử Các dạng liên kết − Dạng liên kết vịng: dạng liên kết nối nhau, trang liên kết đến trang 2, trang liên kết đến trang 3, trang n liên kết đến trang 1, dạng liên kết đảm bảo người xem xem tất trang, bất lợi phải duyệt hết vòng − Dạng liên kết đầy đủ: Tại trang tạo liên kết đầy đủ đến tất trang lại, dạng liên kết site có độ phân cấp thấp Nếu Site có nhiều phân cấp nên chọn dạng liên kết phân cấp − Dạng liên kết phân cấp: Trong Site lớn, mức độ quan trọng trang phân cấp theo mức, với trang gốc trang chủ, mức nhóm chủ đề chính, mức nhóm chủ đề con, mức trang chứa thông tin chi tiết, Ở dạng tồn liên kết trang mức (Same level), liên kết mức (Parent level), liên kết mức (Child level) − Dạng liên kết tiện nghi: Ngoài dạng liên kết trên, để thuận tiện cho người xem lật trang, tạo thêm số liên kế phụ, liên kết đến điểm dừng (Bookmark) trang có nội dung dài, nhiều phân đoạn, tạo thêm hệ thống liên kết text cuối trang, người xem đến cuối trang nhanh chóng lật sang trang khác mà không cần trở − Liên kết trang chủ: Trang chủ thường chứa nút liên kết đến trang con, cần phải tạo liên kết từ trang trở trang chủ Cách tạo: − Mở trang nguồn − Chọn Insert → Hyperlink ▪ ▪ ▪ ▪ ▪ Text: nội dung văn làm nút liên kết Link: Địa URL trang cần liên kết đến Target: Khung chứa trang đích Title: Câu ghi chuột chạm vào nút Access Key: xem trang, nhấn tổ hợp phím Alt+ký tự nhập để chọn nút nhấn Enter để liên kết ▪ Tab Index: Trình tự chọn nút nhấn phím Tab a) Tạo liên kết nội: Tạo liên kết trang nội Site, liên kết đơn giản, cần chọn tên tập tin trang đích, sử dụng địa tương đối mục Link nhập tên tập tin đích b) Tạo liên kết ngoại Tạo liên kết đến tập tin site, cần phải nhập địa http://của trang đích thuộc Siet khác Khi tạo liên kết ngoại, người xem qua site khác không tiếp tục xem site bạn nữa, để tránh trường hợp này, thực cách sau: ▪ Liên hệ với người chủ Site ngoài, hợp đồng tạo quan hệ qua lại Website ▪ Đưa Site vào khung (Frame) Site ▪ Mở thêm cửa sổ mới, sau đưa Website vào Cách mở cửa sổ cho liên kết với Website ▪ Trong Properties Inspector, mục Target nhập tên khung chứa trang đích, chọn _blank: mở cửa sổ khung trống để chứa trang đích c) Tạo liên kết địa Email: Đây liên kết đến chương trình gửi nhận thư điện tử, giúp người xem liên hệ, trao đổi với người chủ Website Cách 1: ▪ Chọn đối tượng làm nút liên kết Email ▪ Trong ô Link nhập trực tiếp dòng mailto: theo sau địa Email người chủ Website Cách 2: ▪ Không cần tạo đối tượng làm nút liên kết ▪ Chọn Insert→ Email Link ▪ Trong hộp thoại Email Link: ✓ Text: nhập nội dung văn làm nút ✓ E-mail : nhập địa E-mail d) Tạo liên kết đến tập tin để người xem tải xuống máy cục Có tập tin bạn muốn cung cấp cho người xem trang chúng khơng phải trang HTML, ví dụ số dạng font chữ mới, tập tin nén, chương trình nhỏ EXE Cách tạo: ▪ Mở trang cần tạo liên kết ▪ Chọn đối tượng làm nút liên kết ▪ Trong Properties Inspector, mục link, nhập vào tên tập tin cần liên kết (hoặc click nút để mở hộp thoại Select File tìm tập tin cần cung cấp cho người xem Nếu tập tin khơng Site xuất hộp thoại yêu cầu chép tập tin vào site e) Liên kết điểm dừng (Named Anchor) ❖ Tạo liên kết điểm dừng trang − Đối với trang Web dài, trang có nhiều mục, việc dùng cuộn khơng tiên, giúp người xem đến mục cách nhanh chóng, xác nhờ vào việc đặt sẳn điểm dừng Cách tạo gồm bước: − Đặt tên cho điểm dừng: o Trong Document window, đặt dấu nháy vị trí làm điểm dừng o Chọn Insert→Named Anchor (Ctrl+Alt+A) click nút Insert Named Anchor bảng Common Insert o Trong hộp thoại Insert Anchor: Nhập tên cho Anchor (không thừa khoảng trắng, khơng có ký tự lạ) − Tạo liên kết điểm dừng o Trong Document Windows, chọn đoạn văn hình để tạo link đến điểm dừng o Nếu điểm dừng nằm trang ô link nhập #tên Anchor ❖ Tạo liên kết điểm dừng trang khác: − Thao tác tạo liên kết đến điểm dừng trang khác giống liên kết đến trang khác, mục link phải điểm dừng Theo cấu trúc: # Kiểm tra liên kết a) Kiểm tra liên kết check link Ta sử dụng Check Links để có bảng thống kê tất liên kết Website − Mở trang cần kiểm tra liên kết − Chọn File→ Check Page → Check links − Trong Results inspector → Chọn mục Link Checker − Trong mục Show: Chọn Broken Link → hiển thị danh sách liên kết gãy − Chọn External links: hiển thị danh sách liên kết b) Kiểm tra liên kết trình duyệt − Chọn File→ Preview in Browser − Có thể thay đổi trình duyệt cách chọn File → Preview in Brower → Edit Brower List − Chọn tên trình duyệt phần Brower, chọn Iexplorer Nếu khơng tìm thấy click nút (+) để thêm trình duyệt vào danh sách Brower, click dấu (-) để bỏ bớt trình duyệt danh sách o Default: Mặc định độ ưu tiên trình duyệt xem trang o Option: Preview Using Temporary file: chọn chức để tạo tập tin tam tương ứng với trang cần xem Trình duyệt hiển thị trang tạm, khơng chọn, xem trực tiếp trang trình duyệt Hiệu chỉnh liên kết − Chọn nút liên kết cần thay đổi − Chọn menu Modify→ Change Link − Hộp thoại Select file cho phép chọn tập tin trang cần liên kết đến − Nếu biết rõ tập tin liên kết trực tiếp link Properties Inpector a) Xóa liên kết − Chọn nút muốn loại bỏ liên kết − Chọn Modify→ Remove Link xóa tên trang liên kết link properties Inspector b) Chọn khung cho trang liên kết Khi liên kết thường sử dụng trang khung (Frameset) o Chọn nút muốn thay đổi khung liên kết o Chọn menu Modify→ Link target o Chọn tên khung phù hợp c) Chọn màu cho liên kết Thường liên kết dạng văn gạch có màu xanh, màu không phù hợp với màu sách trang thiết kế, chọn lại màu liên kết cách: o Chọn Modify→ Page properties, mục Category, chọn Link o Links color: chọn màu mặc định cho nút liên kết o Visited links: màu liên kết đến trang xem o Active links: màu nút liên kết chọn Bản đồ ảnh liên kết Khi chọn ảnh làm liên kết, có số ảnh kích thước lớn, thường chia nhỏ ảnh thành nhiều vùng vùng liên kết đến trang Web khác, dạng gọi đồ ảnh liên kết a) Những thuận tiện sử dụng đồ ảnh liên kết − Giúp tạo nhanh liên kết − Hình ảnh trực quan, dễ liên tưởng đến trang tương ứng − Giúp bố cục liên kết nhanh, không chiếm nhiều khu vực nút trang Web b) Cách tạo − Chèn ảnh vào trang, click chọn ảnh − Trong Properties inspector, hiển thị công cụ Map − Chọn công cụ muốn chia vùng − Drap chuột quanh phần hình mà ta muốn chia vùng để tạo liên kết − Trong Properties inspector, mục link, nhập địa trang cần liên kết đến c) Hiệu chỉnh đồ liên kết − Di chuyển vùng liên kết − Click chọn công cụ để chọn vùng cần di chuyển − Drap chuột kéo đến vị trí d) Thay đổi kích thước vùng liên kết − Chọn vùng liên kết − Click vào nút chọn vùng liên kết − Drap chuột để thay đổi kích thước e) Xóa vùng liên kết − Chọn vùng liên kết − Nhấp Delete Nhóm ảnh động làm nút liên kết a) Chèn nút biến đổi hình Trước hết phải có tập tin ảnh, n1.gif màu cam, n2.gig màu xanh folder Images Site − Đặt dấu nháy vị trí cần chèn nút động − Chọn Insert→ Image Objects→ Rollover Image Hộp thoại Insert Rollover Image: o Image Name: Nhập tên ảnh o Original Image: tên tập tin ảnh gốc đại diện hiển thị (ví dụ: n1.gif) o Rollover Image: tên tập tin ảnh hiển thị rê chuột vào (ví dụ: n2.gif) o Preload Rollover Image: đưa ảnh thay vào nhớ trước o Alternate Text: câu ghi kèm theo o When click, go to URL: địa trang liên kết đến CHƯƠNG 10: BẢNG VÀ TRÌNH BÀY TRANG TRONG DW I TABLE KẺ BẢNG Tùy thuộc vào bố cục cụ thể mà định số dòng, cột bảng, dịng có số khác Thường nên chọn dịng có lớn làm chuẩn kẻ bảng - Insert/Table, ấn nhóm Table o Rows: số dòng cần chèn o Columns: số cột cần chèn o Width: chiều rộng bảng theo số điểm pixels phần trăm o Border: độ dầy đường viền bảng o Cell padding: khoảng cách nội dung ô biên ô o Cell Spacing: khoảng cách HIỆU CHỈNH BẢNG a) Chèn thêm dịng, cột vào bảng − Thêm dòng cuối bảng ▪ Định vị trỏ ô cuối bảng ▪ Ấn phím Tab để thêm dịng Cách khác: ▪ Ấn vào viền bảng, hay ấn thẻ chọn bảng ▪ Trong properties inspector nhập số dòng − Chèn thêm cột vào bảng: ▪ Trong poperties inspector nhập số cột b) Xóa dịng, cột, bảng − Chọn dịng, cột, bảng − Chọn thực đơn Edit/Cut (Ctrl+X) c) Nối ô bảng − Chọn ô cần nối − Modify→Table→ Merge Cells d) Tách ô bảng − Chọn ô cần tách − Modify→ Table→ Splits Cell Split Cell into Columns: tách ô thành nhiều ô theo cột Split Cell into Rows: tách ô thành nhiều ô theo dịng Number of columns, Rows: xác định số cần tách theo cột, dịng THUỘC TÍNH CỦA BẢNG − Chọn table→ mở properties inspector − Nhập giá trị Properties inspector ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Rows: số dòng Cols : số cột W (width): chiều rộng theo điểm pixel, theo tỷ lệ hình H (hight): chiều cao mặc định, tùy vào nội dung Cellpad: khoảng cách văn đến ô bảng Cellspace: khoảng cách ô bảng Align: canh lề bảng, phải, trái, Border: độ dày nét đường viền bảng Bg color: màu bảng Bg image: ảnh bảng Brdr color: màu đường viền bảng II TRÌNH BÀY TRANG LAYOUT TABLE VÀ LAYOUT CELL − Trình bày trang cơng đoạn quan trọng thiết kế web, địi hỏi tính mỹ thuật độ xác cao Macromedia Dreamweaver cung cấp công cụ tốt việc thiết kế trình bày trang Layout Table Layout cell a) Layout table: − Layout table dạng biến thể table với thông số kèm khung viền Border=0, khoảng cách ô Cellspace=0, khoảng cách nội dung ô viền ô CellPad=0 − Layout table dùng để phân vùng cho trang, trang có nhiều nội dung với chủ đề khác cần nhập nội dung với dạng cột báo chí dùng layout table để bố cục trang theo chủ đề chuẩn bị trước − Layout Table dùng để bố cục trang, không dùng để chứa liệu, viền khung Layout Talble có màu xanh b) Layout cell: − Layout cell: nằm Layout table, dùng để chứa liệu, liệu layout cell văn bản, hình ảnh thiết kế dạng layout cần lưu ý layout cell phải sát để tránh trường hợp làm chi trang bị nát − Một layout table chứa nhiều layout table Mỗi layout table gồm có nhiều dịng, dịng chứa nhiều Layout cell, số layout cell dòng khác c) Một số cách kết hợp Layout Table Layout Cell: − Vẽ Layout Table có kích thước đầy trang, sau vẽ Layout cell bên Layout Table theo kích thước yêu cầu bố cục − Vẽ nhiều Layout Table cấp o Layout Table chứa Logo, Banner, nút ngang o Layout Table chứa nội dung văn bản, hình ảnh o Layout Table chứa địa liên lạc, phone − Hoặc kết hợp cách trên, dùng Layout table ngang cấp: o Layout Tabe chứa Logo, banner, nút ngang o Layout Table chứa Layout table con, bên trái bên phải Lưu ý: o Khi vẽ Layout Cell bên ngồi Layout Table Dreamweaver tự phát sinh Layout Table chứa Layout Cell o Chế độ Expanded Tables: cho hiển thị khoảng cách từ nội dung ô đến đường viền Table, tiện cho việc hiệu chỉnh độ rộng THUỘC TÍNH CỦA LAYOUT TABLE VÀ LAYOUT CELL: − Có thể hiệu chỉnh kích thước cách drap chuột kéo handle khung cần kích thước xác phải nhập thông số Properties Inspector Layout Table a) Hiệu chỉnh thuộc tính layout table: − Width: o Fixed: số Pixel xác định chiều rộng o AutoStretch: tự động kéo dãn ngang theo nội dung văn hình ảnh chèn vào Layout Table − Height: xác định số Pixel chiều cao, nhỏ 19 Pixel − Bg: màu Layout Table − CellPad: khoảng cách từ nội dung đến biên Layout Table − CellSpace: Khoảng cách Layout Cell − Clear Row Height: tự động thay đổi chiều cao dòng 19 pixel b) Xóa Layout Table: − Chọn viền cho khung Layout Table click thẻ − Nhấn Delete c) Hiệu chỉnh thuộc tính Layout Cell: − Chọn Layout cell − Mở Properties Inspector Layout Cell − Width: − − − − − − o Fixed: số Pixel xác định chiều rộng o AutoStretch: tự động kéo dãn ngang theo nội dung văn hình ảnh chèn vào Layout Cell Height: xác định số Pixel chiều cao, nhỏ 19 Pixel Bg: màu Layout Cell Horz: Canh lề cho nội dung Layout Cell theo chiều dọc No Wrap: nội dung dài kích thước Layout Cell, chọn mục văn khơng xuống dịng mà Layout Cell tự dãn ra, khơng chọn văn tự xuống dòng gặp lề phải Layout Cell Di chuyển Layout Cell: o Chọn Layout Cell (Ctrl+Click chuột vào Layout Cell) cần di chuyển o Drap chuột kéo đến vị trí Xóa Layout Cell o Chọn Layout Cell cần xóa o Nhấn phím delete CÁC LỚP LAYER − Layout thành phần thiết kế web, chứa nội dung văn bản, hình ảnh xếp chồng lên nhau, trang chuyển động linh hoạt − Layer thường sử dụng để thiết kế trang có hiệu ứng đặc biệt chữ rơi, ảnh bay, − Điểm bất lợi Layer không hiển thị trình duyệt cũ IE4.0, Nestcape 4.0, trình duyệt Layer hiển thị cách trung thực a) Cách tạo Layer trang: Có thể tạo Layer cách sau: Cách 1: • • Chọn Standard Mode Click nút Draw Layer, drag chuột vẽ Layer Cách 2: • Chọn menu Insert→ Layout Objects→ Ap div b) Hiệu chỉnh Layer: o Chọn Layer, Layer chọn xuất Handle xung quanh, ta thực thao tác hiệu chỉnh Layer o Di chuyển Layer: + Chọn Layer cần di chuyển + Drag chuột kéo Layer đến vị trí Hoặc nhập giá trị tọa độ Properties Inspector o Thay đổi kích thước Layer: + Chọn Layer cần hiệu chỉnh kích thước + Click chuột vào Handle, Drag chuột để thay đổi kích thước + Hoặc nhập thông số trực tiếp vào Properties Inspector o Chèn nội dung vào Layer + Nếu nội dung văn nhập trực tiếp vào Layer + Nếu nội dung hình ảnh drag chuột chọn hình thư mục Image thả vào Layer (hoặc chọn Insert Image) o Xếp chồng Layer Khi cần hiển thị nhiều ảnh trang, không đủ chổ, ta xếp chồng lên nhau, sau cho xuất lớp cho lớp Layer bay khỏi hình, điều thực kết hợp Layer, Timeline Behaviors o Thứ tự Layer Mỗi lớp Layer có thuộc tính Z-Index hiển thị thứ tự trước, sau lớp Layer, lớp Layer sau che khuất lớp Layer trước có tọa độ, thay đổi trình tự lớp layer cách: + Chọn lớp Layer cần thay đổi thứ tự + Trong Properties Inspector, nhập thứ tự mục Z-index c) Ẩn Layer: Khi khơng muốn xem Layer ẩn Layer cách sau: Trong Properties Inspector, thuộc tính Vis: chọn Hidden III TEMPLATE − Template khơng giúp ta sử dụng thành phần dùng chung mà giữ quan hệ thành phần mẫu trang thiết kế, bố cục sẵn Ta vào mẫu template để tạo nhanh nhiều trang có bố cục thiết kế Thao tác với template, ta cần phân biết rõ trang mẫu trang sử dụng template − Trang mẫu template : tập tin kiểu dwt với phần thiết kế chuẩn cho bố cục dùng chung, trang có loại vùng: vùng khóa vùng khơng khóa − Trang sử dụng template: tập tin kiểu htm có bố cục giống trang mẫu template, ta phép hiệu chỉnh, nhập nội dung cho vùng khơng khóa Khi có thay đổi trang mẫu template vùng khóa trang sử dụng template tự động cập nhật theo TẠO MỚI MỘT TEMPLATE: a) Tạo trang template: − Tạo trang HTML template (mẫu) trang bình thường kẻ layout table, layout cell phù hợp, nhập nội dung, chèn hình cho vùng dùng chung − Lưu trang mẫu template : File → Save as template − Khi lưu trang dạng template (.dwt) mặc định tất vùng trang template bị khóa, phải mở khóa cho vùng khơng dùng chung • Chọn vùng cần mở khóa • Insert→ template objects→ Editable Region→ đặt tên cho vùng mở khóa Các cách khác để tạo Template: • Tạo template theo mẫu có sẵn: • Chọn thực đơn File/New • Chọn Page Designs/Text: Article D with Navigation • Chọn Creat template b) Tạo trang theo mẫu template: − Chọn File/New − Trong hộp thoại New Document, chọn tab template − Chọn mẫu template tạo sẵn → create − Những vùng dùng chung bị khóa, thiết kế người dùng thay đổi nội dung phần mở khóa HIỆU CHỈNH TEMPLATE: a) Hiệu chỉnh template: − Mở template cần hiệu chỉnh − Modify/template/Open Attached template − Xuất trang mẫu template, thực hiệu chỉnh b) Đổi tên template: − Trong Asset Panel, nhóm template − Chọn template cần đổi tên c) Xóa template: − Trong Asset panel, chọn nhóm template − Chọn template cần xóa − Nhấn delete Khi xóa template ảnh hưởng đến tất trang có sử dụng template Nếu thực muốn xóa, trước tiên nên mở trang sử dụng template chọn chức tách khỏi template d) Tách trang khỏi template Modify/Template/Detach from template e) Sử dụng Template cho trang: Sau tạo trang mẫu template, ta dễ dàng sử dụng chúng Áp dụng mẫu template: − File/New/HTML tạo trang − Modify/Template/Apply template to page − Chọn mẫu template − Nhập nội dung, hình ảnh vào vùng khơng khóa Hoặc thực cách khác: − Mở Asset Panel, nhóm template − Chọn danh sách mẫu template − Chọn nút Apply f) Cập nhật trang sử dụng template − Modify/Template/Update current page, cập nhật trang hành − Modify/Template/Update page/Entire site list box look in Tài liệu tham khảo [1] Giáo trình Thiết Kế Web, Nhà xuất thống kê [2] Đề cương giảng Thiết Kế Web, Trường CĐ KT-KT VINATEX TP.HCM [3] Giáo trình thiết kế web, Chu Văn Hồnh [4] Tự học thiết kế trang Web, Nhà xuất thống kê [5] Thực hành thiết kế Web, Nhà xuất ĐH Quốc Gia [6] Thiết kế xuất bảng trang Web, Nhà xuất thống kê ... khảo: [1] Giáo trình Thiết Kế Web, Nhà xuất thống kê [2] Đề cương giảng Thiết Kế Web, Trường CĐ KT-KT VINATEX TP .HCM [3] Giáo trình thiết kế web, Chu Văn Hoành [4] Tự học thiết kế trang Web, Nhà... 55 IV KẾ HOẠCH THIẾT KẾ MỘT WEBSITE 57 Các yêu cầu thiết kế website 57 Thao tác tạo Web bản: 57 Thiết kế trang Web đơn 60 Tạo liên kết trang Web đơn... GIỚI THIỆU Giáo trình ? ?Thiết kế web? ?? biên soạn để phục vụ cho công tác giảng dạy học tập giảng viên, học sinh, sinh viên chuyên ngành Công nghệ thông tin, tài liệu tham khảo cho lập trình web doanh