Giáo trình mô đun Thiết kế web - Nghề: Công nghệ thông tin

đặt ngay trong trang web, đặt trong thẻ  
Ví dụ:
1.4. Thuộc tính style
Quy tắc định dạng cũng có thể đặt trong thuộc tính style của thẻ mở.
Ví dụ:
Tạo và sử dụng CSS
ID Selector: Dùng dấu # đặt trước tên quy tắc. Quy tắc định dạng sẽ áp dụng trên các element có thuộc tính id phù hợp.
Ví dụ:
Nội dung HTML
Nội dung CSS
Class Selector: dùng dấu chấm (.) đặt trước tên quy tắc. Quy tắc định dạng sẽ áp dụng trên các element có thuộc tính class phù hợp.
Ví dụ:
Nội dung HTML
Nội dung CSS
Tạo một số định dạng thông dụng
font-family, color: font và màu chữ
border[-top/right/bottom/left]: đường viền xung
padding[-top/right/bottom/left]: khoảng cách giữa đường viền với nội dung bên trong
margin[-top/right/bottom/left]: khoảng cách giữa vùng chứa với đường viền
background-color, background-image: màu nền, ảnh nền
Tạo định dạng chung cho trang web
CÂU HỎI, BÀI TẬP
4.1. Thiết kế trang chủ của website 
4.2. Thiết kế trang chủ của website 
YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP
Sử dụng tối đa HTML5
Định dạng CSS
BÀI 5.
TÙY BIẾN GIAO DIỆN WEB VỚI CSS3
Giới thiệu:
CSS3 là tiêu chuẩn mới nhất của CSS, hoàn toàn tương thích với các phiên bản trước của CSS. Với CSS3, chúng ta có thể định dạng trang web đa màu sắc sinh động, tạo kịch bản hiệu ứng hoạt hình cho trang web mà không cần phải biết bất kỳ ngôn ngữ lập trình nào.
Mục tiêu:
Biết các thông tin định dạng của CSS3
Thiết kế được giao diện trang web với HTML, HTML5 và CSS3
Cẩn thận, an toàn
Nội dung:
Rounded Corners
Tạo khung bo tròn các góc
Border Images
Dùng ảnh làm đường viền
Chuẩn bị ảnh border.png
Backgrounds
Ví dụ 1: Dùng nhiều ảnh làm nền
Ví dụ 2: Thiết lập kích thước ảnh nền
Ví dụ 3: Sử dụng giá trị contain và cover để thiết lập kích thước ảnh nền
Ví dụ 4: Thiết lập kích thước cho nhiều ảnh nền
Colors
Opacity
Hệ màu RGBA (Red-Green-Blue-Alpha)
Là sự kết hợp giữa RGB và Opactity
Hệ màu HSL (Hue-Saturation-Lightness)
Hệ màu HSLA (Hue-Saturation-Lightness-Alpha)
Là sự kết hợp giữa HSL và Opacrity
Gradients
Shadows
Text shadow
Box shadow
Ví dụ 1:
Ví dụ 2:
Ví dụ 3:
Ví dụ 4:
Text
Text Overflow
Xử lý hiển thị khi nội dung vượt quá kích thước vùng chứa
Word Wrapping
Xử lý ngắt xuống dòng với những từ dài
Word Breaking: xử lý giữ hay ngắt những từ dài
Fonts
2D Transforms
Tịnh tiến (translate)
Xoay (rotate)
Kéo kích thước (scale)
Kéo xiên (skew)
Ma trận biến đổi (matrix): kết hợp Scale, Skew và Translate
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
3D Transforms
Xoay xung quanh trục X (rotateX)
Xoay xung quanh trục Y (rotateY)
Xoay xung quanh trục Z (rotateZ)
Transitions
Ví dụ 1: Khi di chuyển chuột lên hình vuông thì chiều ngang sẽ thay đổi đến 300px trong vòng 2 giây.
Ví dụ 2: Chiều ngang thay đổi đến 300px trong 2 giây, chiều cao thay đổi đến 300px trong 4 giây.
Ví dụ 3: Chờ 1 giây, chiều ngang thay đổi đến 300px trong 3 giây tiếp theo.
Ví dụ 4: Thay đổi chiều ngang, cao trong 2 giây, xoay trong 3 giây.
Animations
Ví dụ: Hình vuông sẽ chuyển từ màu đỏ sang màu vàng trong 2 giây
Box Sizing
Quy định, kích thước của element:
Rộng = width + padding + border
Cao = height + padding + border
à Trở ngại cho người thiết kế web khi viết CSS
à Thuộc tính box-sizing của CSS3 đảm bảo đúng padding, border mà vẫn đảm bảo kích thước đúng với giá trị của width và height.
CÂU HỎI, BÀI TẬP
5.1. Thiết kế trang web có giao diện như hình bên dưới
5.2. Thiết kế trang chủ của website 
5.3. Thiết kế trang chủ của website 
YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP
Sử dụng tối đa HTML5
Định dạng CSS3
BÀI 6.
XỬ LÝ TƯƠNG TÁC VỚI JAVASCRIPT
Giới thiệu:
Javascript là ngôn ngữ lập trình xử lý trên tài liệu HTML, được thực thi trên trình duyệt. Ngoài sử dụng HTML, CSS, người thiết kế cũng phải biết lập trình Javascript để tăng thêm hiệu ứng sinh động cho trang web.
Mục tiêu:
Có kiến thức cơ bản về Javascript
Biết lập trình nhúng xử lý tương tác cơ bản trên trang web bằng Javascript 
Cẩn thận, an toàn
Nội dung:
Tổng quan Javascript
1.1. Các cách nhúng Javascript vào trang web
Đoạn Javascript có thể được đặt trong  hoặc  của tài liệu HTML.
Cách 1: Viết trực tiếp trong tài liệu HTML
Cách 2: Viết các lệnh Javascript trong một tập tin script có phần mở rộng .js sau đó chèn vào tài liệu HTML.
1.2. Kiểu dữ liệu, khai báo biến
Khai báo biến: var ;
Kiểu dữ liệu: javascript không quan tâm đến kiểu dữ liệu của biến khi mới khai báo. Biến trong Javascript có thể lưu trữ giá trị các kiểu dữ liệu: số (number), chuỗi (string), mảng (array), đối tượng (object), 
Javascript linh động trong việc xử lý kiểu dữ liệu khi thực hiện các phép tính.
Ví dụ:
à Kết quả: 16Volvo
à Kết quả: 20Volvo
Kiểu số (numer): Javascript không quan tâm số thực/nguyên. Javascript chỉ có một kiểu số.
Ví dụ 1:
Kiểu luận lý (boolean)
Kiểu mảng (array)
Chỉ số phần tử đầu tiên của mảng là 0
à cars[0] là “Saab”
Kiểu đối tượng (object)
Trong ví dụ trên, đối tượng person có 4 thuộc tính: firstName, lastName, age và eyeColor.
Toán tử typeOf: cho biết kiểu dữ liệu của biến/biểu thức.
Trong Javascript, một biến chưa được gán giá trị thì sẽ có giá trị là undefined và toán tử typeOf cũng sẽ trả về undefined.
Giá trị rỗng
Giá trị null
Sự khác nhau giữa undefined và null
1.3. Các toán tử
Các toán tử trên số
Các toán tử gán
Toán tử nối chuỗi
Nối chuỗi và số
Toán tử so sánh và luận lý
Biểu thức điều kiện
Ví dụ:
Toán tử trên kiểu dữ liệu
Sử dụng cấu trúc điều khiển
2.1. if, if  else , switch
Ví dụ:
Ví dụ:
Ví dụ:
2.2. for, while, break, continue
Vòng lặp for
Ví dụ:
Vòng lặp for/in: duyệt từng thuộc tính trong đối tượng
Vòng lặp while
Ví dụ:
Vòng lặp do/while
Ví dụ:
Lệnh break, continue
break: thoát khỏi vòng lặp
continue: bỏ qua các lệnh bên dưới của vòng lặp hiện tại, tiếp tục vòng lặp tiếp theo
Sử dụng hàm và mảng
3.1. Mảng
Tạo mảng
Ví dụ:
Dùng từ khóa new
Truy cập phần tử trong mảng
Lưu trữ mảng dưới dạng đối tượng
Mảng:
Đối tượng:
Thuộc tính và phương thức trên mảng
Thuộc tính length: cho biết số phần tử trong mảng
Phương thức sort: sắp xếp mảng
Thêm phần tử vào mảng
Duyệt phần tử trong mảng
3.2. Một số hàm toán học
Lấy giá trị tuyệt đối
Tìm giá trị nhỏ nhất
Tìm giá trị lớn nhất
Nhận giá trị ngẫu nhiên trong đoạn [0, 1)
Làm tròn đến số nguyên gần nhất
Làm tròn lên số nguyên gần nhất
Làm tròn xuống số nguyên gần nhất
Lấy cấn bậc 2
Các hằng số
3.3. Dữ liệu Date
Tạo đối tượng date: có 4 cách
Ví dụ:
Các hàm đọc trên date
Ví dụ:
Các hàm ghi trên date
3.4. Xây dựng hàm
Hàm được định nghĩa bắt đầu bằng từ khóa function, theo sau là tên hàm, sau đó là các tham số được đặt trong cặp dấu (). Hàm có thể có 1 hoặc nhiều tham số hoặc không có tham số. Các lệnh thực thi được đặt trong cặp dấ {}.
Cấu trúc:
Các lệnh thực thi sẽ được thực hiện khi có lời gọi hàm (đúng quy tắc).
Ví dụ:
Hàm trả về giá trị
CÂU HỎI, BÀI TẬP
6.1. Thiết kế trang web hiển thị số tuổi sau khi nhập năm sinh.
6.2. Thiết kế trang web hiển thị chu vi và diện tích hình chữ nhật.
6.3. Thiết kế trang web giải và biện luận phương trình ax2 + bx + c = 0.
YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP
Xây dựng hàm tính toán
Hướng dẫn: tham khảo hàm getElementById, thuộc tính value, innerHTML
.
BÀI 7.
XỬ LÝ NÂNG CAO VỚI CÁC ĐỐI TƯỢNG TRONG JAVASCRIPT
Giới thiệu:
HTML DOM (Document Object Model) là mô hình đối tượng chuẩn và gia diện lập trình cho tài liệu HTML. Với HTML DOM, Javascript có thể truy cập, thay đổi toàn bộ (bao gồm nội dung, thuộc tính) các element bên trong tài liệu HTML.
Mục tiêu:
Biết các thuộc tính, sự kiện của các element trong trang web
Thay đổi nội dung, định dạng các element bằng Javascript
Lập trình được tương tác với người dùng trên trang web bằng Javascript
Cẩn thận, an toàn
Nội dung:
Xử lý trên HTML DOM
1.1. Tìm element
1.2. Cập nhật nội dung, thuộc tính
Ví dụ 1:
Ví dụ 2:
1.3. Thêm, xóa element
Ví dụ:
Một số thuộc tính của document
1.4. Xử lý sự kiện của elemen
Cách 1: Gán thuộc tính sự kiện cho hàm xử lý
Cách 2: Gán thuộc tính sự kiện cho lệnh xử lý trong thẻ mở
Cách 3: Dùng hàm addEventListener
JS Browser DOM
2.1. Window
Đối tượng window được hỗ trợ trên tất cả trình duyệt, tham chiếu đến cửa sổ của trình duyệt.
Đọc kích thước cửa số (không bao gồm thanh cuộn, công cụ)
window.innerHeight: chiều cao
window.innerWidth: chiều rộng
Ví dụ:
Mở cửa sổ mới: window.open()
Đóng cửa sổ: window.close()
Di chuyển cửa sổ: window.moveTo()
Thay đổi kích thước cửa sổ: window.resizeTo()
2.2. Screen
window.screen trả về đối tượng chứa thông tin về màn hình của người sử dụng.
Chiều rộng của màn hình: screen.width
Chiều cao của màn hình: screen.height
Chiều rộng của màn hình (trừ đi vùng chứa tính năng của hệ điều hành: Windows Taskbar, ): screen.availWidth
Chiều cao của màn hình (trừ đi vùng chứa tính năng của hệ điều hành: Windows Taskbar, ): screen.availHeight
Ví dụ:
2.3. Location
Đường dẫn URL của trang: window.location.href
Trả về tên miền trỏ đến webserver của trang: window.location.hostname
Trả về đường dẫn tương đối của trang trên webserver: window.locaiton.pathname
Trả về giao thức đang truy cập trang: window.location.protocol
Tải trang mới bằng assign: window.location.assign(URL)
Ví dụ:
2.4. History
window.history là đối tượng chứa lịch sử truy cập của trình duyệt.
Nút Back: window.history.back()
Nút Forward: window.history.forward()
2.5. Popup alert
Thông báo: window.alert(“Nội dung thông báo”)
Ví dụ:
Hộp thoại cho người dùng chọn OK hoặc Cancel: window.confirm(“Thông báo”)
Hộp thoại cho người dùng nhập giá trị: window.prompt(“Thông báo”, “Giá trị ban đầu)
2.6. Timing
Đợi một khoảng thời gian sau đó thực hiện các lệnh trong hàm
Ngừng trước khi thực hiện hàm trong setTimeout
Lặp lại các lệnh trong hàm sao một khoảng thời gian
CÂU HỎI, BÀI TẬP
7.1. Thiết kế trang web thay đổi màu nền ngẫu nhiên cho đoạn văn bản mỗi khi click chuột lên nút.
7.2. Thiết kế trang web tự động thêm đường kẻ ngang (màu ngẫu nhiên) mỗi khi click chuột lên nút.
7.3. Thiết kế trang web hiển thị danh sách HSSV (Mã HSSV, Họ lót, Tên, Giới tính, Năm sinh). Khi click chuột lên nút “Thêm” thì chèn dòng mới ở cuối bảng (có các input cho người dùng nhập thông tin). Sau khi nhập thông tin, người dùng click chuột lên nút “Ghi” thì hiển thị các thông tin đã nhập ngay trong dòng vừa mới chè (các input không còn).
YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP
Lập trình thay đổi nội dung, thuộc tính của element
Lập trình thêm, xóa element
BÀI 8.
TẠO GIAO DIỆN CHUYÊN NGHIỆP BẰNG JQUERY
Giới thiệu:
jQuery là thư viện Javascript, dễ học và sử dụng. Với jQuery, người thiết kế web có thể lập trình xử lý tương tác với trình duyệt dễ dàng hơn. Để học và sử dụng jQuery, chúng ta phải có kiến thức về HTML, CSS và Javascript.
Mục tiêu:
Biết công dụng của jQuery
Thiết kế được giao diện trang web chuyên nghiệp với jQuery
Cẩn thận, an toàn
Nội dung:
Tổng quan về jQuery
1.1. Giới thiệu
jQuery là thư viện Javascript nhỏ gọn “viết ít, làm nhiều”, giúp việc lập trình xử lý bằng Javascript trở nên đơn giản. Để lập trình cho những tác vụ phổ biến trên trang web bằng Javascript, đòi hỏi người thiết kế phải viết nhiều dòng lệnh. Với jQuery, công việc trở nên đơn giản chỉ với một hoặc vài dòng lệnh.
jQuery cũng đơn giản hóa rất nhiều công việc phức tạp từ Javascript, như các lệnh tải dữ liệu AJAX, thao tác trên HTML DOM.
Thư viện jQuery bao gồm các tính năng sau:
Thao tác trên HTML DOM
Thao tác trên CSS
Phương thức xử lý sự kiện trên HTML
AJAX
Tiện ích
1.2. Cài đặt
Tải jQuery mới nhất từ  về thư mục Scripts trong site
1.3. Sử dụng
Khai báo sử dụng thư viện jQuery bằng thẻ script
Trong đó: x, y, z là phiên bản jQuery sử dụng
1.4. Các thành phần
$: dấu báo lệnh sử dụng thư viện jQuery
selector: truy vấn lọc/tìm element
action: hành động trên element
Ví dụ:
Chọn element
2.1. Cú pháp và cách chọn tương tự CSS
Tất cả element : $(“p”)
Element có thuộc tính id là “test”: $(“#test”)
Tất cả element có thuộc tính class là “test”: $(“.test”)
Tham khảo thêm tại: 
Ví dụ:
2.2. Chọn theo mối quan hệ phân cấp
2.3. Form selector
2.4. Chọn theo thuộc tính
Thay đổi nội dung, thuộc tính
3.1. Duyệt danh sách các element
Cách 1:
Cách 2:
3.2. Tạo element mới
3.3. Đọc, thay đổi nội dung trong element
Đọc nội dung text
Đọc nội dung html
Thay đổi nội dung text
Thay đổi nội dung html
3.4. Đọc, thay đổi thuộc tính
Đọc giá trị thuộc tính
Thay đổi giá trị thuộc tính
3.5. Chèn nội dung
append: chèn nội dung vào cuối element
prepend: chèn nội dung vào đầu element
after: chèn nội dung vào sau element
before: chèn nội dung vào trước element
Ví dụ:
3.6. Làm việc với CSS
Thêm/xóa giá trị của thuộc tính class
addClass: thêm một hoặc nhiều class
removeClass: xóa một hoặc nhiều class
toggleClass: lần lượt thêm/xóa class
Ví dụ:
Sử dụng phương thức css
3.7. Thay đổi kích thước
Các phương thức thay đổi kích thước
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
Hình 8.1. jQuery dimensions
Ví dụ:
Xử lý sự kiện
5.1. Quy tắc chung
Ví dụ 1:
Ví dụ 2:
5.2. Xử lý một số sự kiện thường gặp
ready: khi document được tải
focus: khi control trong form nhận được con trỏ
blur: khi control trong form không còn chiếm con trỏ
keypress: nhấn phím trong khi control đang nhận con trỏ
change
click: khi click chuột
mousehover: khi con trỏ chuột ở trên element
mouseout: khi con trỏ chuột di chuyển ra khỏi element
5.3. Xử lý đối tượng Event
Trong mục 5.2, chúng ta đã xây dựng hàm xử lý cho sự kiện mà không dùng đến tham số sự kiện. Hàm xử lý sự kiện đầy đủ phải có tham số sự kiện.
Vị trí tương đối của con trỏ chuột (event.pageX, event.pageY)
Loại của sự kiện (event.type)
Cho biết phím (hoặc nút chuột) nào được nhấn (event.which)
Tạo hiệu ứng và hoạt ảnh
5.1. Ẩn, hiện
Ẩn
Hiện: tương tự như ẩn, thay hide bằng show
Ẩn chuyển sang hiện, hiện chuyển sang ẩn (toggle)
5.2. Fade-in, Fade-out
Hiện lên (fadeIn)
Ẩn xuống (fadeOut): tương tự hiện lên, thay fadeIn bằng fadeOut
Ẩn chuyển sang hiện, hiện chuyển sang ẩn (fadeToggle)
5.3. Sliding
Cách dùng các tham số: speed, easing, callback tương tự như mục 5.1 và 5.2.
5.4. Tạo hoạt hình
Cấu trúc tổng quát:
Trong đó: speed, easing và callback là các tham số tùy chọn.
Ví dụ:
CÂU HỎI, BÀI TẬP
8.1. Thiết kế trang web thay đổi màu nền ngẫu nhiên cho đoạn văn bản mỗi khi click chuột lên nút.
8.2. Thiết kế trang web tự động thêm đường kẻ ngang (màu ngẫu nhiên) mỗi khi click chuột lên nút.
8.3. Thiết kế trang web hiển thị danh sách HSSV (Mã HSSV, Họ lót, Tên, Giới tính, Năm sinh). Khi click chuột lên nút “Thêm” thì chèn dòng mới ở cuối bảng (có các input cho người dùng nhập thông tin). Sau khi nhập thông tin, người dùng click chuột lên nút “Ghi” thì hiển thị các thông tin đã nhập ngay trong dòng vừa mới chè (các input không còn).
YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP
Dùng jQuery
Lập trình thay đổi nội dung, thuộc tính của element
Lập trình thêm, xóa element
TÀI LIỆU THAM KHẢO