Đang tải... (xem toàn văn)
Tài liệu giảng dạy Adobe Dreamweaver gồm có 9 chương như sau: Chương 1: Giới thiệu Dreamweaver, Chương 2: Giới thiệu tag HTML, Chương 3: CSS, Chương 4: Hình ảnh và Hyperlink DW, Chương 5: Form, Chương 6: Bảng và trình bày trang trong DW, Chương 7: Frame, Chương 8: Behaviors – From, Chương 9: Framesets. Mời các bạn cùng tham khảo để biết thêm nội dung chi tiết.
TRƢỜNG CAO ĐẲNG CƠNG NGHỆ THÀNH PHỐ HỒ CHÍ MINH KHOA THIẾT KẾ THỜI TRANG Tài liệu giảng dạy Adobe Dreamweaver THÀNH PHỐ HỒ CHÍ MINH, THÁNG NĂM 2021 Lƣu hành nội TRƢỜNG CAO ĐẲNG CÔNG NGHỆ THÀNH PHỐ HỒ CHÍ MINH KHOA THIẾT KẾ THỜI TRANG Tài liệu giảng dạy Adobe Dreamweaver THÀNH PHỐ HỒ CHÍ MINH, THÁNG NĂM 2021 Lƣu hành nội MỤC LỤC Chương 1: GIỚI THIỆU DREAMWEAVER I GIỚI THIỆU 1 Adobe Dreamweaver .1 Tính Dreamweaver .1 II CÀI ĐẶT III MÀN HÌNH DW Các bƣớc tạo file .6 Giao diện Adobe Dreamweaver IV KẾ HOẠCH THIẾT KẾ MỘT WEBSITE 17 Xác định khách hàng 17 Xác định mục đích thiết kế 18 Xác định đối tƣợng truy cập vào website 18 Xây dựng sơ đồ, bố cục website 19 Chuẩn bị nội dung cho website 19 Chuẩn bị đồ họa, hình ảnh cần thiết 19 Lên kế hoạch thời gian thực 20 Tìm địa cung cấp tên miền, hosting .20 Chương 2: GIỚI THIỆU VỀ TAG HTML 22 I CÁC KHÁI NIỆM CƠ BẢN 22 HTML document 22 HTML tag 22 II GIỚI THIỆU KHÁI QUÁT .23 III TAG HTML .24 IV CẤU TRÚC CƠ BẢN CỦA TRANG WEB 27 Cấu trúc tài liệu html 27 Định dạng văn .27 Các thẻ html cho nội dung in đậm, font chữ lớn 27 Xuống dòng 27 Chèn hình 28 Marquee – tạo chuyển động web 28 V CÁC TAG HTML CƠ BẢN 28 Chương 3: CSS 32 I ĐỊNH DẠNG VĂN BẢN 32 Khái niệm 32 Những lợi điểm từ CSS: 32 Style định dạng cho tag cho toàn trang 32 Style định dạng cho tag cho vùng 33 II SỬ DỤNG CSS 33 Tạo style 33 Định dạng cho đối tƣợng cụ thể có tên 34 Quản lý style 35 Đổi tên style 35 Xóa Style 35 Sao chép style 35 CSS Panel 36 Chương 4: HÌNH ẢNH VÀ HYPERLINK TRONG DW 38 I CHÈN HÌNH ẢNH TRONG TRANG WEB 38 Cú pháp chèn ảnh HTML 38 Các thuộc tính alt 38 Kích thƣớc ảnh – Width Height 38 Sử dụng ảnh nhƣ liên kết (link) 39 II LIÊN KẾT TRANG TRONG DW 39 Tạo siêu liên kết Dreamweaver 39 Tạo liên kết tới tài liệu Word Excel 39 Tạo liên kết email 39 Phân loại đƣờng dẫn đến tài liệu 40 Ƣu điểm & nhƣợc điểm hai loại đƣờng dẫn (xem Bảng 4.3) 40 Download tài liệu ngƣời dùng nhấp vào liên kết 41 Chương 5: FORM 43 I GIỚI THIỆU FORM 43 Form đăng ký thành viên (xem Hình 5.1) 43 Radio group 43 II CÁC PHẦN TỬ CỦA FORM 47 Phần tử 47 Phần tử 47 Nút Submit 48 Thuộc tính Action 48 Nhóm liệu Form với 49 Chương 6: BẢNG VÀ TRÌNH BÀY TRANG TRONG DW 51 I TABLE 51 Các thẻ đƣợc sử dụng việc tạo bảng (xem Bảng 6.1) 51 Cách thức tạo bảng 51 Các thuộc tính đƣợc dùng việc tạo bảng 51 II TRÌNH BÀY TRANG .51 Tạo tiêu đề 51 Các thẻ trình bày trang 52 III TEMPLATE .54 Cách tạo template 54 Tạo trang web từ template 56 Đƣa website lên hosting 57 Chương 7: FRAME .60 I KHÁI QUÁT VỀ FRAME 60 II CÁC TẠO MỘT FRAME LAYOUT .60 Tạo frame 60 Các thuộc tính thẻ 62 Các thuộc tính thẻ 63 Các thuộc tính name target Frame 64 Thuộc tính target nhận giá trị sau 65 Chương 8: BEHAVIORS - FROM .67 I BEHAVIORS 67 Hành vi khách hàng (behaviors) 67 Tầm quan trọng phân tích hành vi khách hàng 68 Phân tích hành vi khách hàng vào website 69 II FORM 71 Ứng dụng form 71 Thành phần form (xem Hình 8.6) 71 Check Box (xem Hình 8.9) 72 Button 72 Chương 9: FRAMESETS 75 I GIỚI THIỆU 75 II CÁCH TẠO TRANG KHUNG VÀ LIÊN KẾT TRANG 75 Cách sử dụng thẻ HTML 75 Các thuộc tính thẻ 76 Tạo kiểu liên kết với pseudo-class 78 Tạo liên kết kích hoạt cho menu điều hƣớng 80 Tạo kiểu cho liên kết kích hoạt 83 Tạo kiểu liên kết điều hƣớng .84 TÀI LIỆU THAM KHẢO 88 Chƣơng 1: Giới thiệu Dreamweaver Chương 1: GIỚI THIỆU DREAMWEAVER Sau học xong chƣơng sinh viên trình bày đƣợc kế hoạch thiết kế website thao tác mở Dreamweaver sử dụng design Sinh viên trình bày đƣợc giao diện Adobe Dreamweaver I GIỚI THIỆU Adobe Dreamweaver - Dreamweaver chƣơng trình phần mềm để thiết kế web, trình soạn thảo lập trình web HTML đầy đủ tính Chƣơng trình cung cấp giao diện WYSIWYG để tạo chỉnh sửa trang web Dreamweaver hỗ trợ nhiều ngôn ngữ đánh dấu, bao gồm HTML, XML, CSS JavaScript Đối với ngơn ngữ ngƣời, hỗ trợ tiếng Anh, tiếng Tây Ban Nha, tiếng Pháp, tiếng Đức, tiếng Nhật, tiếng Trung, tiếng Ý, tiếng Nga nhiều ngôn ngữ khác - Dreamweaver ban đầu đƣợc phát triển xuất Macromedia vào năm 1997 Adobe mua Macromedia (bao gồm quyền Dreamweaver) vào năm 2005 tiếp tục phát triển chƣơng trình Nhiều tính Dreamweaver làm trở thành cơng cụ chỉnh sửa web linh hoạt, đƣợc dùng để tạo trang web phức tạp đơn giản - Dreamweaver CC vừa trình soạn thảo WYSIWYG vừa trình soạn thảo mã cho PC Windows Mac Nó đọc mẫu WordPress, Joomla Drupal bao gồm hệ thống lƣới để thực thiết kế web responsive Dreamweaver cung cấp nhiều công cụ để phát triển web di động bao gồm tạo ứng dụng gốc cho thiết bị iOS Android - Dreamweaver CC khả dụng đăng ký Adobe Creative Cloud gói hàng tháng hàng năm Các gói bao gồm phiên phần mềm, 100GB dung lƣợng lƣu trữ đám mây cho tệp, porfolio, phông chữ cao cấp công cụ truyền thông xã hội Dreamweaver có sẵn nhƣ phần đăng ký Tất ứng dụng bao gồm 20 ứng dụng bao gồm Photoshop CC, Illustrator CC Adobe XD CC Tính Dreamweaver - Adobe thƣờng xuyên bổ sung tính nâng cao cập nhật giao diện Dreamweaver Những cải tiến gần bao gồm: - Bootstrap 4.0.0 - Hỗ trợ đa hình (Windows) - Hỗ trợ cho hình HiDPI Chƣơng 1: Giới thiệu Dreamweaver - Xem trƣớc thiết bị - Xem trực tiếp cz-lekarna.com - Hỗ trợ PHP - Cải tiến hỗ trợ GIT - Cải thiện tìm thay - Trình chỉnh sửa mã đƣợc cải thiện với hỗ trợ Emmet - Thiết kế đáp ứng - Trích xuất với xuất hàng loạt - Kiến trúc 64 bit - Mẫu khởi xƣớng - Hƣớng dẫn trực tiếp - Hỗ trợ chứng - Quản lý trang web Chèn phần tử HTML5 nhanh Phông chữ web Adobe Edge Trình chỉnh sửa CSS trực quan Xem trƣớc trình duyệt thời gian thực - Hỗ trợ mã hóa thơng minh - Hỗ trợ CMS tích hợp II CÀI ĐẶT - Cài sử dụng Adobe dreamweaver thiết kế Web - Bƣớc 1: Trƣớc tiên cần tải phần mềm máy Có thể tải phiên Adobe dreamweaver - Bƣớc 2: Sau tải thành công Mở thƣ mục chứa, tìm đến file cài đặt Sau chuột phải chọn Run as administrations (xem từ Hình 1.1 đến Hình 1.7) - Sau cửa sổ chƣơng trình Hình 1.1 Run as administrator Chƣơng 8: Behaviors - From 74 CÂU HỎI ÔN TẬP Câu 1: Anh chị cho biết behaviors hay gọi hành vi ngƣời dùng gì? Câu 2: Anh chị phân tích hành vi ngƣời dùng website? Câu 3: Anh chị cho biết cách tạo from đăng ký ứng dụng thực thao tác phần mềm Adobe Dreamweaver? Chƣơng 9: Framesets 75 Chương 9: FRAMESETS Sau học xong chƣơng sinh viên trình bày đƣợc trang khung, liên kết trang thao tác đƣợc việc tạo, sử dụng trang khung liên kết trang Dreamweaver I GIỚI THIỆU - Một khung đƣợc chia thành hàng cột Nó đƣợc biểu thẻ làm cho việc sử dụng frameset cụ thể loại tài liệu đặc biệt Thẻ cung cấp đặc điểm kỹ thuật số cột hàng frameset không gian pixel chiếm đóng họ Mục frameset phải có hai cột hàng Tƣơng tự nhƣ phần tử HTML khác, frameset hỗ trợ thuộc tính tồn cầu nhƣ cols đƣợc sử dụng để xác định kích thƣớc số lƣợng khơng gian ngang khung, hàng đƣợc sử dụng để xác định kích thƣớc số lƣợng khơng gian thẳng đứng khung Làm tổ frameset bên frameset mẹ đƣợc cho phép - Tag vùng chứa nội dung frame - Bên chứa nhiều frame khác - Trong có nhiều cột (column) hàng (row), định phần trăm hay pixel chiếm cột hàng - Nếu muốn check lỗi validator bắt buộc phải chỉnh DOCTYPE! Thành Frameset - Một số trình duyệt khơng hỗ trợ frame, phải dùng để hiển thị nội dung thơng báo cần thiết cho ngƣời xem biết - Cấu trúc Tag đƣợc viết kèm với tag - - Chú ý: Không thể sử dụng thành phần với II CÁCH TẠO TRANG KHUNG VÀ LIÊN KẾT TRANG Cách sử dụng thẻ HTML - Thẻ dùng để xác định khung - Trong khung có nhiều khung, khung phần tử Chƣơng 9: Framesets 76 - Phần tử định khung có hàng, cột kích thƣớc phần - Ví dụ 1: - Phần tử bên dƣới xác định khung có hai cột (tƣơng ứng hai phần tử ) (xem Hình 9.1) - Phần tử thứ có chiều rộng 35% chiều rộng phần tử - Phần tử thứ hai có chiều rộng 65% chiều rộng phần tử - - - - Hình 9.1 Ví dụ tạo bảng cột Các thuộc tính thẻ - Thẻ có ba thuộc tính (xem Bảng 9.1) cols Xác định số lƣợng cột chiều rộng cột phần tử rows Xác định số lƣợng hàng chiều cao hàng phần tử noresize Ngăn chặn hành động kéo thả làm thay đổi kích thƣớc phần tử bên phần tử Bảng 9.1 Bảng mô tả sơ lƣợc ba thuộc tính 2.1 Thuộc tính Cols - Thuộc tính cols dùng để xác định số lƣợng cột chiều rộng cột phần tử Chƣơng 9: Framesets 77 - Thuộc tính cols có giá trị tƣơng ứng với nhiêu cột, giá trị xác định chiều rộng cột Lƣu ý, giá trị đƣợc ngăn cách dấu phẩy - Giá trị thuộc tính cols đƣợc xác định ba đơn vị: - px -% - * (tức chiều rộng phần tử trừ tổng chiều rộng cột khác) - Ví dụ: - Phần tử bên dƣới xác định khung có ba cột (tƣơng ứng ba phần tử ) - Phần tử thứ có chiều rộng 20% chiều rộng phần tử - Phần tử thứ hai có chiều rộng 30% chiều rộng phần tử - Phần tử thứ ba có chiều rộng 50% chiều rộng phần tử - - 2.2 Thuộc tính Rows - Thuộc tính rows dùng để xác định số lƣợng hàng chiều cao hàng phần tử - (Thuộc tính rows có bao nhiu giá trị tƣơng ứng với nhiêu hàng, giá trị xác định chiều cao hàng Lƣu ý, giá trị đƣợc ngăn cách dấu phẩy) - Giá trị thuộc tính rows đƣợc xác định ba đơn vị: - px -% - * (tức chiều cao phần tử trừ tổng chiều cao hàng khác) - Ví dụ: Chƣơng 9: Framesets 78 - Phần tử bên dƣới xác định khung có ba hàng (tƣơng ứng ba phần tử ) - Phần tử thứ có chiều cao 20% chiều cao phần tử - Phần tử thứ hai có chiều cao 30% chiều cao phần tử - Phần tử thứ ba có chiều cao 50% chiều cao phần tử - - - - - 2.3 Thuộc tính Noresize - Mặc định, ta dí chuột vào cạnh phần tử lên trỏ giống nhƣ giúp kéo thả để thay đổi kích thƣớc phần tử - Từ đây, thuộc tính noresize dùng để xác dịnh việc ngăn chặn hành động kéo thả làm thay đổi kích thƣớc phần tử - Ví dụ: - Khơng thể kéo thả làm thay đổi kích thƣớc phần tử phần tử bên dƣới - - - - - Tạo kiểu liên kết với Pseudo-class - Theo mặc định, liên kết có màu xanh với gạch chân Khi click vào liên kết này, chuyển sang màu tím Mặc dù dấu hiệu thị giác đƣợc công nhận nhƣng chúng khơng cịn phù hợp với thiết kế đại Giờ đây, liên kết thƣờng bỏ gạch chân thay đổi di chuột qua Để tạo kiểu cho liên kết trạng thái khác nhau, CSS sử dụng pseudo-class Chúng đƣợc gọi pseudo-class Chƣơng 9: Framesets 79 khơng giống nhƣ lớp thơng thƣờng, khơng thể thêm thuộc tính lớp vào phần tử Trình duyệt áp dụng pseudo-class sử dụng kiểu style sheet - Pseudo-class bắt đầu với dấu hai chấm đƣợc gắn trực tiếp vào selector Các pseudo-class đƣợc sử dụng với liên kết nhƣ sau: - :link: Tạo kiểu liên kết với trạng thái không đƣợc truy cập - :visited: Tạo kiểu liên kết đƣợc truy cập - :hover: Tạo kiểu cho phần tử (khơng có liên kết) trỏ chuột di chuyển qua Bạn dùng lớp Phần để thay đổi hình ảnh di chuột qua - :active: Tạo kiểu cho phần tử thời điểm click chuột - :focus: Tạo kiểu cho phần tử đƣợc chọn nhƣ sử dụng bàn phím để điều hƣớng trang - Khi tạo kiểu liên kết, cần sử dụng pseudo-class theo thứ tự đƣợc liệt kê Nếu không thứ tự, áp dụng kiểu Nhiều ngƣời sử dụng cụm từ LoVe-HAte để nhớ thứ tự Gợi ý code Dreamweaver thực cách liệt kê pseudo-class theo thứ tự Nên thêm lớp :focus để ngƣời khơng muốn dùng chuột truy cập duyệt web laptop máy tính để bàn - Bƣớc Chọn liên kết Live View chọn chọn h2 khung Selectors CSS để tạo quy tắc kiểu sau h2, giữ hầu hết chọn chung style sheet Sau click vào nút dấu cộng để tạo chọn Sử dụng mũi tên lên để làm chọn đề xuất cụ thể hơn, nên a Điều tạo kiểu liên kết tất trạng thái - Bƣớc Trong phần văn khung Properties, thiết lập thuộc tính fontweight bold - Bƣớc Chọn icon cho thuộc tính text-decoration thiết lập giá trị none Tất liên kết trang không đƣợc bơi đậm khơng có gạch chân - Bƣớc Tạo selector cho a:link Khi gõ dấu hai chấm, Dreamweaver hiển thị gợi ý code cho pseudo-class - Bƣớc Click vào mẫu màu hồng khung CC Libraries để chép màu #F68979 vào nhớ tạm dán vào trƣờng chỉnh sửa bên phải màu cho thuộc tính color Chƣơng 9: Framesets 80 - Bƣớc Tạo selector cho a:visited, chép màu #FF944C từ mẫu màu cam nhạt đặt làm giá trị thuộc tính color - Bƣớc Tạo selector nhóm cho a:hover, a:active, a:focus, lấy màu (#7F3300) từ mẫu màu cam cháy dán làm giá trị thuộc tính color Đồng thời đặt thuộc tính text-decoration thành underline cách chọn biểu tƣợng thứ hai - Bƣớc Trong Live View, di chuột qua liên kết Nó chuyển sang màu cam cháy đƣợc gạch chân Nếu không, kiểu liên kết bạn sai thứ tự khung Selectors (xem Hình 9.3) Hình 9.2 Thứ tự kiểu liên kết Tạo liên kết kích hoạt cho menu điều hƣớng - Trên hình độ phân giải nhỏ nhƣ điện thoại di động, menu điều hƣớng thƣờng bị ẩn đi, hiển click chạm vào nút menu Trong phần này, cung cấp ID cho danh sách không thứ tự thêm tiêu đề cấp hai cho liên kết danh sách Link menu bị ẩn hình độ phân giải lớn CSS JavaScript điều khiển chuyển động trƣợt menu điều hƣớng hình nhỏ Chƣơng 9: Framesets 81 - Bƣớc Trong Live View, chọn danh sách không thứ tự liên kết điều hƣớng cách click vào liên kết Liên kết có màu cam cháy đƣợc gạch chân để trạng thái kích hoạt Nhấn mũi tên lên vài lần Element Display danh sách đƣợc chọn Tab Element Display hiển thị ul (xem Hình 9.3) Hình 9.3 Danh sách Element - Nhấn phím mũi tên lên trong Live View để di chuyển lựa chọn lên cấu trúc phân cấp HTML Nếu chọn mục danh sách, nhấn lên lần chọn thẻ (siêu liên kết) mục danh sách phía Nhấn lên lần chọn thẻ- - Với phần tử
- đƣợc chọn, click vào nút dấu cộng Element Display gán ID liên kết điều hƣớng cho danh sách không thứ tự cách nhập #navlinks vào trƣờng xuất Nhấn Tab Enter/Return để xác nhận thay đổi Đảm bảo responsive.css đƣợc chọn menu thả xuống Select a source bảng điều khiển bật lên - Bƣớc Vẫn chọn danh sách không thứ tự, chọn Insert > Heading > H2 Chọn Before Position Assist Dialog để chèn tiêu đề cấp hai phía danh sách khơng có thứ tự - Bƣớc Click đúp vào văn giữ chỗ tiêu đề để vào chế độ Edit thay văn giữ chỗ Menu Trong chế độ Edit, chọn Menu click vào biểu tƣợng liên kết để chuyển đổi thành liên kết Nhập #navlinks vào trƣờng liên kết khỏi chế độ Edit (xem Hình 9.4) Hình 9.4 Danh sách tiêu đề menu Chƣơng 9: Framesets 82 - Bƣớc Đảm bảo phần tử đƣợc chọn Live View (bạn cần nhấn mũi tên lên lần phần tử đƣợc chọn) Sau gán phần tử ID menulink nút dấu cộng Element Display - Bƣớc Kiểm tra HTML Code View - - Menu - - - Bƣớc Khi tạo ID lớp Element Display, selector liên quan đƣợc tạo dƣới khung Selectors Để giữ kiểu theo thứ tự hợp lý, chọn #menulink khung Selectors kéo vào vị trí sau kiểu liên kết khác Nhả chuột ngang màu đen nằm dƣới selector nhóm a:hover, a:active, a:focus Hình 9.5 Thứ tự kiểu liên kết ID - Bƣớc Di chuyển selector #navlinks bên dƣới #menulink Chƣơng 9: Framesets 83 Tạo kiểu cho liên kết kích hoạt - Liên kết kích hoạt đƣợc lồng tiêu đề Theo mặc định, trình duyệt hiển thị tiêu đề cấp hai font chữ đậm với kích thƣớc lớn Thiết kế yêu cầu font chữ nhỏ hơn, nhạt Bởi đƣợc sử dụng thiết bị di động, liên kết cần phải dễ chạm, đó, cần phải bao phủ toàn chiều rộng tiêu đề thay văn - Bƣớc Với #menulink đƣợc chọn khung Selectors CSS Designer, bỏ tất lề cho phần tử Có hai cách để làm điều này: - Click vào Set Shorthand, gõ - Click vào biểu tƣợng liên kết công cụ trực quan đặt bên thành 0px Hình 9.6 Biểu tƣợng liên kết cơng cụ trực quan - Bƣớc Cũng đặt thuộc tính giá trị sau: - text-align: center - background-color: #1E1E1E (màu xám đen bảng CC Libraries) - Bƣớc Trong Live View, đảm bảo phần tử liên kết kích hoạt đƣợc chọn Lƣu ý đƣờng viền Element Display bao quanh văn - Bƣớc Tạo selector cháu cho #menulink a Sau đó, phần văn khung Properties, đặt thuộc tính giá trị sau: - color: white - font-weight: 200 - text-decoration: none - text-transform: uppercase - Bƣớc Click vào biểu tƣợng để trở phần bố cục đặt thuộc tính giá trị sau: - display: block - padding-top: 0.1em - padding-bottom: 0.1em - Ngay đặt thuộc tính display thành block, Element Display cho thẻ mở rộng toàn chiều rộng tiêu đề, làm cho tất thuộc tính click đƣợc Chƣơng 9: Framesets 84 Tạo kiểu liên kết điều hƣớng - Các liên kết điều hƣớng nằm danh sách khơng có thứ tự Để tạo kiểu cho chúng, cần xóa dấu đầu dịng, lề phần đệm mặc định mà trình duyệt áp dụng cho danh sách Cũng cần thiết lập để chúng click đƣợc tồn chiều rộng sử dụng kỹ thuật cho liên kết kích hoạt - Bƣớc Với #navlinks đƣợc chọn khung Selectors CSS Designer, đặt thuộc tính giá trị sau phần bố cục khung Properties nhƣ sau: - width: 100% - margin: (tất bên) - padding: (tất bên) - Bƣớc Click vào biểu tƣợng chữ T viết hoa để bỏ qua thuộc tính văn đặt text-align thành center - Bƣớc Cuộn xuống cuối phần văn xóa dấu đầu dịng cách đặt thuộc tính list-style-type thành none - Bƣớc Click vào biểu tƣợng đậm dƣới nhạt để bỏ qua thuộc tính click vào color well cho background-color để mở chọn màu Nó mặc định màu đen nhƣng biến thành màu nửa suốt (xem Hình 9.7) Hình 9.7 Hộp thoại Background-color - Chọn nút RGBa dƣới chọn màu kéo trƣợt Alpha (đó nút thứ ba bên phải) xuống khoảng phần ba Giá trị trƣờng phía dƣới bên trái phải rgba (0,0,0,0,65) xấp xỉ nhƣ Chƣơng 9: Framesets 85 - Bƣớc Các trình duyệt cũ khơng hiểu định dạng màu RGBa, bạn cần đặt màu thay Để làm nhƣ vậy, bạn cần chỉnh sửa style sheet theo cách thủ công Code View (xem Hình 9.8) - Click chuột phải vào selector #navlinks khung Selector chọn Go to Code từ menu ngữ cảnh Hình 9.8 Selector go to Code - Bƣớc Chèn dịng phía định nghĩa background-color thêm đoạn code sau: - background-color: #000000 - Ngay gõ #, chọn màu mở ra, cần nhấn Enter/Return để đóng Dreamweaver chèn code thập lục phân cho màu đen, đừng quên dấu chấm phẩy cuối dịng (xem Hình 9.9) Hình 9.9 Code Adobe Dreamweaver - Việc định màu hai lần nhƣ để tận dụng CSS cascade Giá trị thứ hai ghi đè lên giá trị thứ trình duyệt hiểu định dạng RGBa Các trình duyệt cũ khơng hiểu RGBa cần bỏ qua định nghĩa thứ hai áp dụng đen cách sử dụng giá trị thập lục phân - Bƣớc Đóng Split View cách click vào nút Live - Bƣớc Tạo selector cháu #navlinks a cho liên kết menu điều hƣớng đặt thuộc tính giá trị sau phần bố cục: Chƣơng 9: Framesets 86 - display: block - padding-top: 10px - padding-bottom: 10px - Bƣớc Click vào biểu tƣợng để bỏ qua thuộc tính văn đặt giá trị sau: - color: white - font-weight: 400 - text-decoration: none - text-transform: uppercase Hình 9.10 Kết menu điều hƣớng Chƣơng 9: Framesets 87 CÂU HỎI ÔN TẬP Câu 1: Anh chị cho biết Framesets Adobe Dreamweaver gì? Câu 2: Anh chị cho biết cách sử dụng thẻ HTML phần mềm Adobe Dreamweaver? Câu 3: Vận dụng kiến thức học anh chị tạo trang menu điều hƣớng phần mềm Adobe Dreamweaver? Tài liệu tham khảo 88 TÀI LIỆU THAM KHẢO [1] Lê Minh Hoàng, Thiết kế web với CSS, NXB Lao Động, 2007 [2] FPT Polytechnic, Thiết kế web với Dreamweaver CS4, NXB Tri Thức, 2013 [3] Nguyễn Trƣờng Sinh, Tự học thiết kế trang Web, NXB Giáo Dục, 2009 [4] Nguyễn Gia Tuấn, Thực hành thiết kế web bản, NXB Giao Thông Vận Tải, 2007 ... http://webcoban.vn/css/nhung-kien-thuc-co-ban-trong-viec-viet-macss.html Đƣờng dẫn tƣơng đối default.html php/cach-su-dung-lenh-switch-case.html css/mau-sac-colors-trong-css.html Bảng 4.2 Bảng đƣờng dẫn tuyệt... tài liệu html - - - Tiêu đề trang web - - - Tựa viết, tiêu đề
Đoạn văn bản….
, , ,… thẻ (Tag) - Tài. .. THỜI TRANG Tài liệu giảng dạy Adobe Dreamweaver THÀNH PHỐ HỒ CHÍ MINH, THÁNG NĂM 2021 Lƣu hành nội MỤC LỤC Chương 1: GIỚI THIỆU DREAMWEAVER I GIỚI THIỆU 1 Adobe Dreamweaver