Giáo trình Thiết kết web cơ bản (Ngành: Thiết kết và quản lý website-Trung cấp) - CĐ Kinh tế Kỹ thuật TP.HCM

Giáo trình Thiết kế web cơ bản được biên soạn nhằm phục vụ cho việc học tập môn học Thiết kế web cơ bản đang được giảng dạy tại khoa Công nghệ thông tin, trường Cao Đẳng Kinh tế Kỹ Thuật TP.HCM. Nội dung giáo trình gồm 5 bài được biên soạn bám sát theo đề cương môn học Thiết kế web cơ bản và dựa theo các tiêu chuẩn thiết kế web hiện hành.

.12 2.2.2 Thẻ .12 2.2.3 Thẻ 12 2.2.4 Thẻ 13 2.2.5 Thẻ .13 2.2.6 Thẻ 13 2.2.7 Thẻ 13 2.2.8 Thẻ 14 2.2.9 Thẻ
.14 2.2.10 Thẻ đến .15 2.2.11 Thẻ .16 2.2.12 Thẻ 16 2.3 Làm việc với danh sách trang web 16 2.3.1 Danh sách khơng có thứ tự 16 2.3.2 Danh sách có thứ tự 17 2.4 Làm việc với đối tượng media trang web 19 2.4.1 Thẻ 19 2.4.2 Thẻ 20 2.4.3 Thẻ 21 2.4.4 Thẻ .22 2.5 Làm việc với liên kết trang web .23 2.5.1 Tạo liên kết đến tài liệu khác 24 2.5.2 Tạo liên kết đến phần tài liệu 25 2.6 Làm việc với bảng biểu trang web 26 2.6.1 Tạo bảng đơn giản .26 2.6.2 Tạo bảng có gộp ô .28 2.7 Làm việc với biểu mẫu trang web 29 2.7.1 Khái quát Form .29 2.7.2 Thẻ .30 2.7.3 Thẻ .32 2.7.4 Thẻ 36 2.7.5 Thẻ 37 2.7.6 Thẻ .39 2.7.7 Thẻ 40 2.8 Tạo Bố cục trang 42 2.8.1 Thẻ 43 2.8.2 Thẻ 43 2.8.3 Thẻ .43 2.8.4 Thẻ 43 2.8.5 Thẻ 44 2.8.6 Thẻ .44 2.8.7 Thẻ .44 2.8.8 Thẻ 44 2.8.9 Thẻ 45 2.9 Bài tập áp dụng 45 BÀI - THIẾT KẾ TRANG WEB VỚI DREAMWEAVER .47 3.1 Tạo quản lý website 47 3.1.1 Tạo website 47 3.1.2 Quản lý website 50 3.1.3 Đưa website lên internet 51 3.1.4 Kiểm tra sửa lỗi trang web 51 3.2 Tạo định dạng đối tượng trang web .53 3.2.1 Môi trường làm việc Dreamweaver 53 3.2.2 Các thao tác 54 3.2.3 Làm việc với văn 55 3.2.4 Làm việc với hình ảnh .57 3.2.5 Làm việc với multimedia 58 3.2.6 Liên kết trang 58 3.2.7 Làm việc với bảng .59 3.2.8 Làm việc với form .63 3.2.9 CSS 68 3.3 Bài tập áp dụng 76 BÀI - ĐỊNH DẠNG TRANG WEB VỚI CSS 77 4.1 Tạo css cho trang web 77 4.1.1 Khái niệm 77 4.1.2 Cú pháp CSS .77 4.1.3 Đơn vị đo CSS 79 4.1.4 Phân loại CSS 80 4.1.5 Tạo sử dụng Internal style sheet 80 4.1.6 Tạo sử dụng External style sheet 82 4.1.7 Tạo sử dụng Inline style .83 4.1.8 Lớp (Class) 84 4.1.9 Định danh (ID) 86 4.2 Định dạng văn css 87 4.2.1 Thuộc tính font 87 4.2.2 Thuộc tính text 90 4.3 Định dạng danh sách css 93 4.3.1 Thuộc tính list-style-type: 93 4.3.2 Thuộc tính list-style-image: 94 4.3.3 Thuộc tính list-style-position: 94 4.4 Định dạng thành phần 95 4.4.1 Thuộc tính background .96 4.4.2 Thuộc tính border 99 4.4.3 Thuộc tính box-shadow 102 4.4.4 Thuộc tính margin 102 4.4.5 Thuộc tính padding 105 4.4.6 Thuộc tính height width .107 4.5 Định dạng hình ảnh css 110 4.6 Tạo bố cục trang web mơ hình hộp .113 4.7 Tạo điều hướng cho trang web 120 4.7.1 Pseudo-classes cho liên kết .120 4.7.2 Tạo điều hướng dọc .122 4.7.3 Tạo điều hướng ngang 123 4.8 Định dạng bảng biểu css .125 4.9 Định dạng biểu mẫu css 127 4.10 Bài tập áp dụng 131 BÀI - Ngôn ngữ JavaScript 132 5.1 Giới thiệu JavaScript 132 5.2 Nhúng JavaScript vào trang web 132 5.2.1 Đặt mã lệnh JavaScript trực tiếp vào trang web .133 5.2.2 Đặt mã lệnh JavaScript bên tập tin js 134 5.3 Tạo tương tác với trang web 134 5.3.1 Hiển thị liệu hình JavaScript 134 5.3.2 Sử dụng biến, kiểu liệu, biểu thức, toán tử JavaScript .137 5.3.3 Sử dụng câu lệnh điều kiện JavaScript 138 5.3.4 Sử dụng câu lệnh lặp JavaScript 140 5.3.5 Sử dụng hàm, mảng JavaScript .142 5.3.6 Sử dụng đối tượng JavaScript 144 5.3.7 DOM 147 5.4 Làm việc với web form 149 5.4.1 Xử lý kiện 149 5.4.2 Kiểm tra tính hợp lệ liệu form JavaScript 152 5.5 Bài tập áp dụng 153 TÀI LIỆU THAM KHẢO 154 PHỤ LỤC 155 DANH MỤC HÌNH 156 DANH MỤC BẢNG 160 GIÁO TRÌNH MƠ ĐUN Tên mô đun: THIẾT KẾ WEB CƠ BẢN Mã mơ đun: MĐ2101411 Vị trí, tính chất mơ đun: - Vị trí: mơ đun bố trí học kỳ II (THCS), học kỳ I (THPT) - Tính chất: mơ đun tích hợp thuộc nhóm mơ đun chuyên ngành Mục tiêu mô đun: Về kiến thức: - Trình bày bước lập kế hoạch thiết kế website - Trình bày cú pháp thẻ lệnh HTML, cú pháp CSS - Trình bày thuộc tính thường dùng CSS để định dạng trang web - Trình bày đối tượng JavaScript Về kỹ năng: - Lập kế hoạch thiết kế website - Sử dụng thẻ lệnh HTML để tạo định dạng văn bản, danh sách, hình ảnh, liên kết, bảng biểu, biểu mẫu trang web - Tạo quản lý website Dreamweaver - Vận dụng Dreamweaver để tạo định dạng đối tượng trang web - Tạo sử dụng kiểu CSS - Vận dụng CSS để định dạng đối tượng văn bản, hình ảnh, liên kết, bảng biểu, biểu mẫu trang web - Tạo bố cục trang web mô hình hộp - Tạo định hướng cho trang web - Nhúng đoạn mã JavaScript vào trang web - Tạo tương tác với trang web JavaScript - Sử dụng JavaScript để viết kịch đơn giản cho trang web Về lực tự chủ trách nhiệm: Bài - Ngôn ngữ JavaScript  Đối tƣợng array: Bảng 5.4 Đối tƣợng array var arr= new Array(3); arr[0]=2, arr[1]=0, rr[2]=1;  Đối tƣợng date: Bảng 5.5 Đối tƣợng date var date= new Date(); KHOA CƠNG NGHỆ THƠNG TIN Trang 146 Bài - Ngơn ngữ JavaScript 5.3.7 DOM JavaScript truy cập thay đổi tất phần tử tài liệu HTML thơng qua DOM (Document Object Model - mơ hình đối tượng tài liệu HTML) JavaScript có khả năng:     Thay đổi nội dung, thuộc tính thẻ HTML Thay đổi định dạng CSS thẻ HTML Xóa, thêm thẻ thuộc tính thẻ HTML Tương tác với kiện thẻ HTML  Truy xuất thẻ HTML - Truy xuất thẻ html thông qua tên id document.getElementById(“tên_id”); - Truy xuất thẻ html thông qua tên class document.getElementsByClassName(“tên_class”); - Truy xuất thẻ html thông qua tên thẻ document.getElementsByTagName(“tên_thẻ”); - Truy xuất thẻ html thông qua chọn css: document.querySelectorAll(“css_selector”);  Xử lý nội dung, thuộc tính thẻ HTML - Xử lý nội dung thẻ document.getElementById(id).innerHTML = “nội dung mới” - Thay đổi giá trị thuộc tính thẻ document.getElementById(id).attribute = “giá trị mới” - Ví dụ 15: thay đổi nội dung hiển thị cho thẻ có id “demo” KHOA CƠNG NGHỆ THƠNG TIN Trang 147 Bài - Ngơn ngữ JavaScript - Ví dụ 16: thay đổi giá trị thuộc tính src cho thẻ có id “myImage”  Xử lý định dạng css - Thay đổi kiểu định dạng cho thẻ: document.getElementById(id).style.thuộc-tính = “giá trị mới” - Ví dụ 17: thay đổi màu chữ cho thẻ có id “demo” KHOA CÔNG NGHỆ THÔNG TIN Trang 148 Bài - Ngôn ngữ JavaScript 5.4 LÀM VIỆC VỚI WEB FORM 5.4.1 Xử lý kiện Sự kiện kết thao tác người dùng tác động lên đối tượng Một kiện bao gồm thông tin:  Kiểu kiện: click, double click, change,  Vị trí trỏ thời điểm xảy kiện  Các kiện thƣờng dùng: Bảng 5.6 Sự kiện Tên kiện Mô tả onblur() Sự kiện xảy phần tử bị focus (khơng cịn chọn người dùng) onchange() Sự kiện xảy phần tử thay đổi (ví dụ, người dùng gõ vào ô nhập liệu) onclick() Sự kiện xảy nhấn chuột vào phần tử ondbclick() Sự kiện xảy nhấn đúp chuột vào phần tử onfocus() Sự kiện xảy phần tử nhận focus (phần tử chọn) onkeydown() Sự kiện xảy phím nhấn phần tử chọn onkeypress() Sự kiện xảy phím nhấn phần tử chọn onkeyup() Sự kiện xảy Một phím nhả phần tử chọn onload() Sự kiện xảy phần tử tải lên trang web (văn bản, frameset hình ảnh) onunload() Sự kiện xảy đóng trang web onmousedown() Sự kiện xảy nhấn chuột onmousemove() Sự kiện xảy di chuyển chuột KHOA CÔNG NGHỆ THÔNG TIN Trang 149 Bài - Ngôn ngữ JavaScript onmouseout() Sự kiện xảy di chuyển chuột phần tử onmouseover() Sự kiện xảy chuột di chuyển phần tử onmouseup() Sự kiện xảy khi nhả chuột onreset() Sự kiện xảy phần tử form reset (như nhấn button reset form) onresize() Sự kiện xảy thay đổi kích thước cửa sổ onselect() Sự kiện xảy nội dung phần tử form chọn onsubmit() Sự kiện xảy form gửi (submit) onunload() Sự kiện xảy văn frameset gỡ bỏ  Bắt kiện JavaScript Trước bắt kiện cần phải xác định rõ ba thành phần:  Phần tử dùng để xảy kiện  Sự kiện xảy  Đoạn mã thực thi kiện xảy - Cú pháp dùng bắt kiện: - Ví dụ 18: người dùng bấm chuột vào nút "Xin chào" hàm hello() thực thi KHOA CƠNG NGHỆ THƠNG TIN Trang 150 Bài - Ngơn ngữ JavaScript - Ví dụ 19: người dùng mở trang hiển thị hộp thơng báo u cầu nhập Tên sau xuất câu chào “Hi tên-nhập, welcome to my pages” Khi đóng trang hiển thị câu thơng báo “Good bye tên-nhập, see you again !” KHOA CÔNG NGHỆ THÔNG TIN Trang 151 Bài - Ngôn ngữ JavaScript 5.4.2 Kiểm tra tính hợp lệ liệu form JavaScript Kiểm tra tính hợp lệ liệu form kiểm tra xem thông tin cần thiết mà người dùng điền vào form có yêu cầu hay chưa Kiểm tra hợp lệ cho form cần thiết để đảm bảo tính đắn liệu mà người dùng nhập * Lưu ý: Trong HTML5 có số thuộc tính cho phép kiểm tra tính hợp lệ liệu nhập cách thiết lập thuộc tính phần tử thuộc tính required, min, max, pattern,… - Ví dụ 20: tạo form cho người dùng nhập Username, Password Username, Password bắt buộc phải nhập phải trùng với Username, Password cho trước KHOA CÔNG NGHỆ THƠNG TIN Trang 152 Bài - Ngơn ngữ JavaScript - Hiển thị trình duyệt: Hình 5.7 Kết ví dụ 20 5.5 BÀI TẬP ÁP DỤNG Hãy hiển thị ngày hệ thống máy tính trang Web nạp Thông tin hiển thị có dạng sau: Tạo form có danh sách cho người dùng lựa chọn gồm có màu: red, blue, brown lavender Khi người dùng chọn màu màu trang web thay đổi tương ứng Kiểm tra liệu nhập cho form với yêu cầu: - Bắt buộc nhập liệu cho Password, Re-enter Password - Password phải có độ dài tối thiểu ký tự - Password phải trùng khớp với Re-enter Password KHOA CÔNG NGHỆ THÔNG TIN Trang 153 TÀI LIỆU THAM KHẢO Tiếng Việt: [I] Thạc Bính Cường, Vũ Thị Hậu Giáo trình thiết kế web, NXB Giáo dục, 2009 [II] Nguyễn Minh Hoàng, Hướng dẫn thực hành Dreamweaver CS5, Hồng Đức, 2011 [III] Nguyễn Trường Sinh, Thiết kế Web động với JavaScript, NXB Tri thức, 2013 [IV] Jeremy Osborn Nhóm AGI Creative, HTML5 CSS3 - Thiết kế trang web thích ứng giàu tính năng, NXB Bách Khoa Hà Nội, 2015 [V] https://hocwebchuan.com Tiếng Anh: [VI] Ebook, CSS Notes for Professionals [VII] Ebook, HTML5 Notes for Professionals [VIII] https://www.w3schools.com PHỤ LỤC BẢNG MÀU CƠ BẢN Màu sắc RGB Mã màu Đỏ rgb(255,0,0) #FF0000 red Đỏ sẫm rgb(139,0,0) #8B0000 darkred Xanh rgb(0,218,0) #00FF00 green rgb(144,238,144) #90EE90 lightgreen rgb(0,0,255) #0000FF blue rgb(255,255,0) #FFFF00 yellow rgb(255,255,224) #FFFFE0 lightyellow rgb(255,215,0) #FFD700 gold rgb(255,255,255) #FFFFFF white Đen rgb(0,0,0) #000000 black Xám rgb(218,218,218) #808080 gray Nâu rgb(165,42,42) #A52A2A brown Cánh sen rgb(165,42,42) #FF00FF magenta Tím rgb(238,130,238) #EE82EE violet Hồng rgb(255,192,203) #FFC0CB pink rgb(255,165,0) #FFA500 orange rgb(0,0,128) #000080 navy rgb(128,128,0) #808000 olive rgb(128,0,0) #800000 maroon rgb(128,0,128) #800080 purple Xanh nhạt Xanh lam Vàng Vàng nhạt Vàng (kim loại) Trắng Da cam Xanh hải quân Xanh olive Nâu sẫm Tía Tên màu DANH MỤC HÌNH Hình 1.1 Sơ đồ website Hình 1.2 Bố cục thơng thường trang web Hình 1.3 Trang web có bố cục thơng thường Hình 2.1 Cấu trúc tài liệu html .8 Hình 2.2 Các ký tự đặc biệt HTML Hình 2.3 Trình soạn thảo Notepad++ .9 Hình 2.4 Hộp thoại Save As Hình 2.5 Menu lệnh Run Hình 2.6 Kết ví dụ 10 Hình 2.7 Kết ví dụ 14 Hình 2.8 Kết ví dụ 14 Hình 2.9 Kết ví dụ 15 Hình 2.10 Kết ví dụ 16 Hình 2.11 Kết ví dụ 17 Hình 2.12 Kết ví dụ 18 Hình 2.13 Kết ví dụ 10 18 Hình 2.14 Kết ví dụ 13 20 Hình 2.15 Kết ví dụ 14 22 Hình 2.16 Kết ví dụ 24 27 Hình 2.17 Kết ví dụ 25 29 Hình 2.18 Ví dụ form 30 Hình 2.19 Kết ví dụ 26 36 Hình 2.20 Kết ví dụ 27 37 Hình 2.21 Kết ví dụ 28 39 Hình 2.22 Kết ví dụ 29 39 Hình 2.23 Kết ví dụ 30 40 Hình 2.24 Kết ví dụ 31 42 Hình 2.25 Bố cục trang 42 Hình 3.1 Hộp thoại Site setup – thẻ Site 47 Hình 3.2 Cửa sổ Files 48 Hình 3.3 Hộp thoại Site setup – thẻ Advanced 48 Hình 3.4 Hộp thoại Site setup – thẻ Server 49 Hình 3.5 Hộp thoại Basic .49 Hình 3.6 Hộp thoại Manage Sites .50 Hình 3.7 Hộp thoại Files 51 Hình 3.8 Lệnh kiểm tra liên kết 51 Hình 3.9 Lệnh sửa lỗi liên kết 52 Hình 3.10 Cửa sổ Validation 52 Hình 3.11 Cửa sổ Browser Compatibility 52 Hình 3.12 Cửa sổ Dreamweaver 53 Hình 3.13 Lệnh kiểm tra trang web trình duyệt 54 Hình 3.14 Cửa sổ Properties 55 Hình 3.15 Lệnh tạo tiêu đề 55 Hình 3.16 Lệnh canh lề 56 Hình 3.17 Lệnh tạo danh sách 56 Hình 3.18 Lệnh định dạnh chữ .57 Hình 3.19 Hộp thoại Select Image Source 57 Hình 3.20 Cửa sổ Properties 58 Hình 3.21 Cửa sổ Properties 59 Hình 3.22 Hộp thoại Table 60 Hình 3.23 Cửa sổ Properties 60 Hình 3.24 Cửa sổ Properties 61 Hình 3.25 Hộp thoại Split Cell .62 Hình 3.26 Lệnh chèn cột/ hàng 62 Hình 3.27 Lệnh tạo Form .63 Hình 3.28 Hộp thoại thuộc tính thẻ input .64 Hình 3.29 Cửa sổ Properties 64 Hình 3.30 Cửa sổ Properties 65 Hình 3.31 Cửa sổ Properties 66 Hình 3.32 Cửa sổ Properties 66 Hình 3.33 Hộp thoại List values 67 Hình 3.34 Cửa sổ Properties 67 Hình 3.35 Cửa sổ Properties 68 Hình 3.36 Cửa sổ CSS Styles .68 Hình 3.37 Cửa sổ New CSS Rule 69 Hình 3.38 Danh sách chọn Selector type 69 Hình 3.39 Danh sách chọn Rule Definition 70 Hình 3.40 Hộp thoại CSS Rule definition 70 Hình 3.41 Hộp thoại Background 71 Hình 3.42 Hộp thoại Block 72 Hình 3.43 Hộp thoại Box 73 Hình 3.44 Hộp thoại Border 73 Hình 3.45 Hộp thoại List 74 Hình 3.46 Hộp thoại Positioning 74 Hình 3.47 Hộp thoại Attach Style Sheet 75 Hình 4.1 Kết ví dụ 81 Hình 4.2 Nội dung file teststyle.css 82 Hình 4.3 Nội dung file test.html 83 Hình 4.4 Kết ví dụ 83 Hình 4.5 Kết ví dụ 84 Hình 4.6 Kết ví dụ 85 Hình 4.7 Kết ví dụ 87 Hình 4.8 Kết ví dụ 12 90 Hình 4.9 Kết ví dụ 13 93 Hình 4.10 Các kiểu list style .94 Hình 4.11 Kết ví dụ 14 95 Hình 4.12 Các vị trí hiển thị ảnh 98 Hình 4.13 Vị trí hiển thị ảnh tính theo khoảng cách x, y .98 Hình 4.14 Các kiểu đường viền 100 Hình 4.15 Kết ví dụ 20 102 Hình 4.16 Các vị trí lề 102 Hình 4.17 Kết ví dụ 21 103 Hình 4.18 Các vị trí padding 105 Hình 4.19 Kết ví dụ 26 106 Hình 4.20 Kết ví dụ 31 110 Hình 4.21 Kết ví dụ 32 112 Hình 4.22 Mơ hình hộp 113 Hình 4.23 Ví dụ minh họa giá trị thuộc tính overflow 115 Hình 4.24 Thứ tự xếp chồng phần tử 116 Hình 4.25 Ví dụ minh họa thuộc tính display 117 Hình 4.26 Ví dụ minh họa thuộc tính box-sizing .117 Hình 4.27 Kết ví dụ 33 118 Hình 4.28 Kết ví dụ 34 120 Hình 4.29 Kết ví dụ 36 123 Hình 4.30 Kết ví dụ 37 124 Hình 4.31 Kết ví dụ 38 125 Hình 4.32 Kết ví dụ 39 127 Hình 4.33 Kết ví dụ 40 130 Hình 5.1 Kết ví dụ 135 Hình 5.2 Kết ví dụ 137 Hình 5.3 Kết ví dụ 11 141 Hình 5.4 Kết ví dụ 12 142 Hình 5.5 Kết ví dụ 13 143 Hình 5.6 Kết ví dụ 14 144 Hình 5.7 Kết ví dụ 20 153 DANH MỤC BẢNG Bảng 2.1 Các thuộc tính thẻ 19 Bảng 2.2 Các thuộc tính thẻ 20 Bảng 2.3 Các thuộc tính thẻ 21 Bảng 2.4 Các thuộc tính thẻ 22 Bảng 2.5 Ký hiệu đường dẫn 23 Bảng 2.6 Các thuộc tính thẻ 24 Bảng 2.7 Các thẻ tạo bảng 26 Bảng 2.8 Các thuộc tính thẻ 31 Bảng 2.9 Các thuộc tính thẻ 32 Bảng 2.10 Các thuộc tính thẻ 36 Bảng 2.11 Các thuộc tính thẻ 37 Bảng 2.12 Các thuộc tính thẻ .38 Bảng 4.1 Cách viết chọn 78 Bảng 4.2 Bảng đơn vị đo 80 Bảng 5.1 Đối tượng string 144 Bảng 5.2 Đối tượng number .145 Bảng 5.3 Đối tượng math 145 Bảng 5.4 Đối tượng array 146 Bảng 5.5 Đối tượng date .146 Bảng 5.6 Sự kiện 149 ... THÀNH PHỐ HỒ CHÍ MINH TRƢỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH  GIÁO TRÌNH MƠ ĐUN: THIẾT KẾ WEB CƠ BẢN NGÀNH: THIẾT KẾ VÀ QUẢN LÝ WEBSITE TRÌNH ĐỘ: TRUNG CẤP THÔNG TIN CHỦ NHIỆM... THIỆU Giáo trình ? ?Thiết kế web bản? ?? biên soạn nhằm phục vụ cho việc học tập môn học ? ?Thiết kế web bản? ?? giảng dạy khoa Công nghệ thông tin, trường Cao Đẳng Kinh tế Kỹ Thuật TP.HCM Nội dung giáo trình. .. Về kỹ năng: - Lập kế hoạch thiết kế website - Sử dụng thẻ lệnh HTML để tạo định dạng văn bản, danh sách, hình ảnh, liên kết, bảng biểu, biểu mẫu trang web - Tạo quản lý website Dreamweaver - Vận

Định dạng
Số trang	171
Dung lượng	4,73 MB