Thiết kế web (Cao đẳng Quản trị mạng máy tính) - Nguồn: BCTECH

Nội dung được tác giả trình bày cô động, dễ hiểu kèm theo các bước hướng dẫn thực hành chi tiết theo nguyên tắc quan tâm đến kết quả đầu ra, khả năng tự học và kỹ năng cần thiết để HSSV [r]

UBND TỈNH BÀ RỊA – VŨNG TÀU

TRƯỜNG CAO ĐẲNG KỸ THUẬT CÔNG NGHỆ

GIÁO TRÌNH MƠ ĐUN THIẾT KẾ WEB NGHỀ: QUẢN TRỊ MẠNG TRÌNH ĐỘ: CAO ĐẲNG

(Ban hành kèm theo Quyết định số: ……/QĐ-CĐKTCN, ngày … tháng … năm 20…… Hiệu trưởng Trường Cao đẳng Kỹ thuật Công nghệ BR-VT)

TUYÊN BỐ BẢN QUYỀN

Nhằm đáp ứng nhu cầu học tập nghiên cứu cho giảng viên sinh viên nghề Công nghệ Thông tin trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu, thực biên soạn tài liệu Thiết kế web

Tài liệu biên soạn thuộc loại giáo trình phục vụ giảng dạy học tập, lưu hành nội Nhà trường 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

LỜI GIỚI THIỆU

Giáo trình “Thiết kế web” biên soạn dựa khung chương trình đào tạo Cao đẳng nghề Công nghệ Thông tin Trường Cao đẳng Kỹ thuật Công nghê Bà Rịa – Vũng Tàu phê duyệt

Tác giả nghiên cứu số tài liệu, công nghệ đại kết hợp với kinh nghiệm làm việc thực tế để viết nên giáo trình Nội dung tác giả trình bày động, dễ hiểu kèm theo bước hướng dẫn thực hành chi tiết theo nguyên tắc quan tâm đến kết đầu ra, khả tự học kỹ cần thiết để HSSV hồn thành thiết kế lập trình nhúng xử lý tương tác trang web với kết hợp HTML5 CSS3, lập trình nhúng xử lý trang web Javascript, thiết kế giao diện trang web chuyên nghiệp với jQuery, … tạo quản lý nội dung website đáp ứng nhu cầu thực tế doanh nghiệp

Nội dung giáo trình chia thành bài, đó:

Bài 1: Mơi trường tạo trang web tĩnh DreamWeaver, thẻ HTML Bài 2: Tạo trang web HTML5

Bài 3: Hoàn chỉnh giao diện trang web với CSS Bài 4: Tùy biến giao diện web với CSS3

Bài 5: Xử lý tương tác với Javascript Bài 6: Một số kỹ thuật thiết kế nâng cao

Bài 7: Tạo giao diện chuyên nghiệp jQuery Bài 8: Publish website

Trong trình biên soạn, chắn giáo trình cịn nhiều thiếu sót Tác giả mong nhận ý kiến đóng góp quý thầy/cô em học sinh, sinh viên để tiếp tục hoàn thiện

Xin chân thành cảm ơn quý đồng nghiệp, bạn bè có ý kiến đóng góp q trình biên soạn giáo trình

Bà Rịa – Vũng Tàu, ngày …… tháng …… năm ……… Tham gia biên soạn

MỤC LỤC

LỜI GIỚI THIỆU

MỤC LỤC

BÀI 1: MÔI TRƯỜNG TẠO TRANG WEB TĨNH DREAMWAVER, THẺ HTML 11

1 Giới thiệu 11

2 Quản lý site 12

3 Quản lý nội dung site 13

4 Chọn vùng nhìn 14

5 Thẻ HTML 14

CÂU HỎI, BÀI TẬP 19

BÀI 2: TẠO TRANG WEB BẰNG HTML5 21

1 Sử dụng thẻ ngữ nghĩa 21

2 Sử dụng thẻ HTML5 Form 22

3 Sử dụng HTML5 GraphicsSVG 24

4 Sử dụng HTML Media 26

CÂU HỎI, BÀI TẬP 27

BÀI 3: HOÀN CHỈNH GIAO DIỆN TRANG WEB VỚI CSS 28

1 Giới thiệu CSS loại CSS 28

2 Tạo sử dụng CSS 29

3 Tạo định dạng chung cho trang web 30

4 Tạo giao diện trang web canh trình duyệt 30

5 Tạo hiệu ứng đổi định dạng cho menu 31

6 Tạo khung viền bo tròn cho nội dung 32

CÂU HỎI, BÀI TẬP 32

BÀI 4: TÙY BIẾN GIAO DIỆN WEB VỚI CSS3 33

2 Border Images 34 Backgrounds 35 Colors 37 Gradients 38 Shadows 39 Text 41 Fonts 42

9 2D Transforms 42

10 3D Transforms 44

11 Transitions 46

12 Animations 47

13 Box Sizing 47

14 User Interface 47

CÂU HỎI, BÀI TẬP 48

BÀI 5: XỬ LÝ TƯƠNG TÁC VỚI JAVASCRIPTS 50

1 Tổng quan Javascript 50

2 Sử dụng cấu trúc điểu khiển 55

3 Sử dụng mảng hàm 57

CÂU HỎI, BÀI TẬP 61

BÀI 6: MỘT SỐ KỸ THUẬT THIẾT KẾ NÂNG CAO 62

1 Template Dreamwaver 62

2 Navigation Menu 66

3 Đối tượng nâng cao Javascript 67

CÂU HỎI, BÀI TẬP 73

BÀI 7: TẠO GIAO DIỆN CHUYÊN NGHIỆP BẰNG JQUERY 74

1 Tổng quan JQuery 74

2 Chọn element 75

4 Xử lý kiện 80

5 Tạo hiệu ứng hoạt ảnh 83

CÂU HỎI, BÀI TẬP 85

BÀI 8: PUBLISH WEBSITE 86

1 Đăng ký web hosting miễn phí 86

2 Publish web lên web hosting miễn phí 86

3 Publish web lên local IIS 87

GIÁO TRÌNH MƠ ĐUN Tên mơ đun: Thiết kế web

Mã mô đun: MĐ18

Vị trí, tính chất, ý nghĩa vai trị mơ đun:

 Vị trí: bố trí sau học xong môn sở Đồ họa ứng dụng  Tính chất: Là module chuyên ngành nghề công nghệ thông tin, cung

cấp kiếnthức kỹ cơng việc quy trình xây dựng ứng dụng web

 Ý nghĩa vai trị mơ đun: cung cấp cho người học kiến thức kỹ để thiết kế lập trình nhúng xử lý tương tác trang web với kết hợp HTML5 CSS3, lập trình nhúng xử lý trang web Javascript, thiết kế giao diện trang web chuyên nghiệp với jQuery, … tạo quản lý nội dung website đáp ứng nhu cầu thực tế doanh nghiệp Mục tiêu mô đun:

Về kiến thức:

 Biết tạo quản lý nội dung website phần mềm DreamWeaver  Biết công dụng thẻ HTML, HTML5, định dạng CSS CSS3

 Có kiến thức JavaScript  Biết công dụng Jquery

Biết quy trình pubish website lên internet Về kỹ năng:

 Chia bố cục, thiết kế trang web thẻ HTML, HTML5, định dạng CSS CSS3

 Lập trình nhúng xử lý tương tác trang web Javascript  Sử dụng Template, Navigation menu Dreamweaver  Thiết kế giao diện trang web chuyên nghiệp với jQuery  Đăng ký web hosting miễn phí

 Publish website lên Web Werver Về lực tự chủ trách nhiệm:

 Có tính chủ động, độc lập công việc, tự học cập nhật kiến thức, nâng cao trình độ chun mơn

 Có khả tổ chức điều hành nhóm, đánh giá thành viên nhóm

 Rèn luyện tính cẩn thận, kiên trì, sáng tạo, độc lập hoạt động nhóm  Bảo đảm an tồn vệ sinh cho người thiết bị phòng máy. Nội dung mô đun:

Số

TT Tên mô đun

Thời gian (giờ) Tổng

số thuyếtLý

Thực hành, thí nghiệm, thảo

luận, tập

Kiểm tra Bài 1: Môi trường tạo trang web tĩnh

DreamWeaver, thẻ HTML

4 1 3 0

1 Giới thiệu 0.4 0.1 0.3

2 Quản lý site 0.7 0.2 0.5 Quản lý nội dung site 0.6 0.1 0.5 Chọn vùng nhìn 0.3 0.1 0.2

5 Thẻ HTML 0.5 1.5

2 Bài 2: Tạo trang web HTML5 15 5 9 1

1 Giới thiệu HTML5 0.7 0.2 0.5 0 Sử dụng thẻ ngữ nghĩa 1.3 0.3 1 0 Sử dụng thẻ HTML5

Form 3.5 1.0 2.5

4 Sử dụng HTML Graphics SVG 4.5 2.0 2.5 0 Sử dụng HTML Media 4 1.5 2.5 0

Kiểm tra 1 0 0 1

3 Bài 3: Hoàn chỉnh giao diện trang web với CSS

13 4 8 1

1 Giới thiệu CSS loại CSS 0.6 0.1 0.5 Tạo sử dụng CSS 0.8 0.3 0.5 Tạo định dạng chung cho trang web 1.6 0.6 Tạo giao diện trang web canh trình

duyệt

1.5 0.5

6 Tạo khung viền bo tròn cho nội dung 1.0

Kiểm tra 0

4 Bài 4: Tùy biến giao diện web với CSS3 14 4 8 2

1 Rounded Corners 0.6 0.2 0.4

2 Border Images 0.6 0.2 0.4

3 Backgrounds 0.6 0.2 0.4

4 Colors 0.6 0.2 0.4

5 Gradients 0.9 0.3 0.6

6 Shadows 0.9 0.3 0.6

7 Text 0.6 0.2 0.4

8 Fonts 0.6 0.2 0.4

9 2D Transforms 0.9 0.3 0.6

10 3D Transforms 0.9 0.3 0.6

11 Transitions 0.9 0.3 0.6

12 Animations 0.9 0.3 0.6

13 Box Sizing 1.5 0.5

14 User Interface 1.5 0.5

Kiểm tra 0

5 Bài 5: Xử lý tương tác với Javascript 12 2 8 2

1 Tổng quan Javascript 0.8 0.2 0.6 Sử dụng cấu trúc điều khiển 6.4 5.4 Sử dụng mảng hàm 2.8 0.8

Kiểm tra 0

6 Bài 6: Một số kỹ thuật thiết kế nâng cao 10 2 6 2

1 Template Dreamweaver 0.5 1.5 Navigation Menu 0.5 1.5 Đối tượng nâng cao Javascript 1.0

Kiểm tra 0

7 Bài 7: Tạo giao diện chuyên nghiệp bằng jQuery

18 3 13 2

1 Tổng quan jQuery 1.2 0.2

2 Chọn element 1.2 0.2

3 Lọc chọn element 1.2 0.2 Thay đổi nội dung, thuộc tính 2.4 0.4

6 Tạo hiệu ứng hoạt ảnh

Kiểm tra 0

8 Bài 8: Publish website 4 1 3 0

1 Đăng ký web hosting miễn phí 1.5 0.5 1 0 Publish web lên web hosting miễn phí 1.5 0.3 1 0 Publish web lên local IIS 1.5 0.2 1 0

BÀI 1: MÔI TRƯỜNG TẠO TRANG WEB TĨNH DREAMWEAVER Mã bài: 18.1

Giới thiệu:

Adobe DreamWeaver ứng dụng thiết kế web sử dụng phổ biến Adobe DreamWeaver hỗ trợ chức mạnh mẽ cho người thiết kế lập trình web

Mục tiêu:

 Biết công dụng thành phần DreamWeaver  Biết tạo quản lý site

 Biết quản lý nội dung site

 Quản lý cẩn thận nội dung site, tránh xóa nhằm nội dung, site Nội dung chính:

1 Giới thiệu 1.1 Khởi động

 Click đôi chuột lên biểu tượng Adobe DreamWeaver desktop  Vào Start  Programs  Adobe DreamWeaver

Hình 1.1 Giao diện Adobe DreamWeaver 1.2 Quản lý palette

Hình 1.2 Vị trí hiển thị palette

 Muốn mở rộng palette click chuột lên biểu tượng palette  Click chuột lên biểu tượng để mở rộng tất palette

2 Quản lý site

Vào menu Site  Manage Sites Xuất hộp thoại quản lý site

Hình 1.3 Hộp thoại Manage Sites 2.1 Tạo site

 Click chuột lên nút New Site

Hình 1.4 Hộp thoại Site Setup 2.2 Xóa site

 Trong hộp thoại Manage Site, chọn site cần xóa danh sách  Click chuột lên biểu tượng Delete the current selected sites ( ) 3 Quản lý nội dung site

3.1 Cấu trúc site

Mở rộng palette Files Cấu trúc site cần tạo có nội dung sau:

Hình 1.5 Cấu trúc site 3.2 Các loại tập tin site

 htm, html: trang web, tài liệu html

 css: tập tin định dạng cho trang web, thường đặt thư mục styles  js: tập tin javascript, chứa đoạn mã thực thi trình duyệt, thường

đượt đặt thư mục scripts 3.3 Quản lý thư mục, tập tin

 Yêu cầu: tạo 03 thư mục images, scripts, styles tập tin index.html site

 Các bước thực

o Click chuột phải lên đối tượng chứa palette Files, chọn New Folder o Đặt tên cho folder cần tạo

o Click chuột phải lên site, chọn New File, đặt tên cho tập tin cần tạo 4 Chọn vùng nhìn làm việc

Hình 1.6 Các tùy chọn vùng nhìn làm việc  Click đơi chuột lên trang web cần thiết kế

 Click chuột lên biểu tượng vùng nhìn cần chọn o Code: thiết kế trang thể HTML

o Design: thiết kế trang cách kéo thả element vào trang web o Split: tách cửa sổ tài liệu thành vùng nhìn Code Design

5 Thẻ HTML

5.1 Tìm hiểu cấu trúc tài liệu HTML

 Hầu hết element bắt đầu thẻ mở kết thúc thẻ đóng Ví dụ: <body> … </body>

 Nội dung đặt thẻ mở thẻ đóng Ví dụ: <p>Đây đoạn văn bản</p>

 Một số thẻ đặc biệt vừa mở đóng o <br />: ngắt xuống dịng

o <img … />: chèn ảnh (sẽ tìm hiểu chi tiết phần sau)  Thuộc tính element đặt thẻ mở

o Ví dụ: <img src=“images/i1.jpg” /> o src: thuộc tính

o images/i1.jpg: giá trị thuộc tính src

o Giá trị thuộc tính ln đặt cặp dấu nháy kép “”  Element mở trước phải đóng sau

5.2 Thiết kế trang web thẻ HTML 5.2.1 META, LINK, STYLE, SCRIPT

 META

o Tạo từ khóa tìm kiếm

o Tạo nội dung mô tả cho trang

5.2.2 TABLE, TR, TD, TH  TABLE: Tạo bảng  TR: Tạo dịng  TD: Tạo dịng

 TH: Tương tự TD tiêu đề, nội dung tự động tô đậm canh ô

5.2.3 DIV, P, BR, HR

 DIV: Chia vùng riêng, chiếm hết chiều ngang vùng chứa Ví dụ:

 BR: Ngắt xuống dòng đoạn văn

 HR: Tạo đường kẻ ngang Ví dụ: <hr />

5.2.4 IMG, A

 IMG: Chèn ảnh vào trang web Ví dụ:

 A: Tạo liên kết đến trang web Ví dụ:

5.2.5 OL, UL, LI

 OL: Tạo danh sách đánh số thứ tự

 UL: Tạo danh sách không đánh số thứ tự  LI: Tạo mục danh sách

5.2.6 FORM, INPUT, SELECT, OPTION

 FORM: Tạo form cho người truy cập nhập thông tin vào trang web

 INPUT: Tạo điều khiển cho phép người dùng nhập/chọn liệu, đặt FORM

 SELECT: Tạo danh sách chọn

 OPTION: Tạo mục danh sách chọn Ví dụ:

CÂU HỎI, BÀI TẬP

2.2 Tạo form điều khiển form

YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP Đúng cấu trúc tài liệu HTML

Đúng quy tắc: mở trước, đóng sau

BÀI 2: TẠO TRANG WEB BẰNG HTML5 Mã bài: 18.2

Giới thiệu:

HTML5 phiên HTML, hỗ trợ element ngữ nghĩa rõ ràng Với HTML5, trang web thiết kế với số lượng element hơn, rõ ràng hơn, chèn multimedia đơn giản

Mục tiêu:

 Biết công dụng tag HTML5  Bố cục, thiết kế trang web HTML5  Cẩn thận, an toàn

Nội dung chính:

1 Sử dụng thẻ ngữ nghĩa

 section: định nghĩa vùng tài liệu Ví dụ:

 article: định nghĩa viết (bài forum, blog, báo) Ví dụ:

 nav, menu: định nghĩa vùng chứa navigation (thường gọi menu) trang

 header: định nghĩa vùng header (banner) trang/bài viết Ví dụ:

 footer: định nghĩa vùng cuối trang (thông tin liên hệ, quyền) Ví dụ:

6 Sử dụng thẻ HTML5 FORM  datalist, keygen, output

 Các type input FORM o color: chọn màu

o time: chọn

o email: nhập email

o month: chọn tháng, năm

o week: chọn tuần năm

o range: chọn giá trị vùng giới hạn

1. Sử dụng HTML Graphics SVG 3.1 SVG gì?

SVGlà viết tắt Scalable Vector Graphics, định dạng hình ảnh (tương tự JPG, PNG, mà thường dùng)

SVG sử dụng để vẽ đồ họa 2D ứng dụng đồ họa website, phần lớn hữu ích cho sơ đồ kiểu vecto biểu đồ Pie, đồ thị hai chiều hệ tọa độ X, Y

SVG chuẩn thức tổ chức web giới W3C Ưu điểm

 Hình ảnh SVG phóng to khơng vỡ ảnh

 Hình ảnh SVG in với chất lượng cao độ phân giải

 Hình ảnh SVG tạo chỉnh sửa javascript  Hình ảnh SVG tìm kiếm, đánh mục, nén,…

 Hình ảnh SVG chuyển động sử dụng thành phần animation xây dựng sẵn

 Hình ảnh SVG chứa liên kết đến tài liệu khác  SVG hỗ trợ tất trình duyệt

Phần tử <svg> HTML vùng chứa để vẽ đồ họa

3.2 Vẽ đường tròn SVG

Để vẽ đường tròn ta dùng thẻ <circle>

Các thuộc tính <circle> là:

 cx: vị trí tâm, tính từ mép trái SVG  cy: vị trí tâm, tính từ mép

 r: bán kính

 fill: xác định màu tô  stroke: đường biên 3.3 Vẽ hình ellipse SVG

Để vẽ hình ellipse ta sử dụng thẻ <ellipse>

ry: bán kính từ tâm đến mép phía 2 Sử dụng HTML Media

Các đặc trưng HTML5, bao gồm hỗ trợ audio video tự nhiên mà không cần Flash

Thẻ HTML5 <audio> <video> làm đơn giản để thêm đa phương tiện tới Website Bạn cần thiết lập thuộc tính src để nhận diện nguồn phương tiện bao gồm thuộc tính control để người sử dụng chơi dừng đa phương tiện

4.1 Nhúng video

Một phần tử video cho phép nhiều phần tử source trình duyệt sử dụng định dạng nhận đầu tiên:

Ví dụ: play video cho

Các định dạng audio sử dụng phổ biến ogg, mp3 wav Một phần tử audio cho phép nhiều phần tử source trình duyệt sử dụng định dạng mà nhận đầu tiên:

CÂU HỎI, BÀI TẬP

BÀI 3: HOÀN CHỈNH GIAO DIỆN TRANG WEB VỚI CSS Mã bài: 18.3

Giới thiệu:

Bất kỳ trang web nào, hiển thị nội dung, phải định dạng, trang trí để thu hút tiện lợi cho người xem Không ngoại trừ có nhiều nội dung định dạng giống Với CSS, người thiết kế web cần viết kịch định dạng lần sử dụng cho nhiều nội dung

Mục tiêu:

 Biết công dụng CSS, loại CSS

 Thiết kế trang web với HTML, HTML5, CSS  Cẩn thận, an tồn

Nội dung chính:

1 Giới thiệu CSS loại CSS 1.1 Giới thiệu

CSS (Cascading Style Sheet) tài liệu định nghĩa quy tắc định dạng cho element trang web

1.2 External

Quy tắc định dạng đặt tập tin css sử dụng trang thông qua thẻ <link … />

Ví dụ:

1.3 Internal

Quy tắc định dạng đặt trang web, đặt thẻ <style> … </style>

Ví dụ:

1.4 Thuộc tính style

Quy tắc định dạng đặt thuộc tính style thẻ mở Ví dụ:

7 Tạo sử dụng CSS

 ID Selector: Dùng dấu # đặt trước tên quy tắc Quy tắc định dạng áp dụng 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 áp dụng element có thuộc tính class phù hợp

Ví dụ:

Nội dung CSS

 Tạo số định dạng thông dụng o font-family, color: font màu chữ

o border[-top/right/bottom/left]: đường viền xung

o padding[-top/right/bottom/left]: khoảng cách đường viền với nội dung bên

o margin[-top/right/bottom/left]: khoảng cách vùng chứa với đường viền

o background-color, background-image: màu nền, ảnh 8 Tạo định dạng chung cho trang web

9 Tạo giao diện trang web canh trình duyệt

Với đoạn mã Cascading Style Sheet (CSS) ngắn gọn, bạn điều chỉnh thiết kế trang web vào vị trí trung tâm hình cho dù hình theo tỷ lệ nằm ngang hay thẳng đứng

Tạo file css sau: để điều chỉnh cho trình duyệt chạy bỏ số hiển thị không cần thiết (bỏ list-style cho <ol> <ul>, bỏ border cho <img />)

10. Tạo hiệu ứng đổi định dạng cho menu

Thêm hiệu ứng cho gNav hover (di chuyển chuột đổi hiệu ứng)

11. Tạo khung viền bo tròn cho nội dung

Bốn giá trị – bán kính đường viền: 15px 50px 30px 5px; (giá trị áp dụng cho góc bên trái, giá trị thứ hai áp dụng cho góc bên phải, giá trị thứ ba áp dụng cho góc bên phải giá trị thứ tư áp dụng cho góc bên trái):

Ba giá trị – bán kính đường viền: 15px 50px 30px; (giá trị áp dụng cho góc bên trái, giá trị thứ hai áp dụng cho góc bên phải bên trái giá trị thứ ba áp dụng cho góc bên phải):

Hai giá trị – bán kính đường viền: 15px 50px; (giá trị áp dụng cho góc bên trái bên phải giá trị thứ hai áp dụng cho góc bên phải bên trái):

Một giá trị – bán kính đường viền: 15px; (giá trị áp dụng cho tất bốn góc, làm tròn nhau:

CÂU HỎI, BÀI TẬP Viết css cho tập học số trang web mẫu: 3.1 Viết css cho phần header

3.2 Viết css cho button phần header

BÀI 4: TÙY BIẾN GIAO DIỆN VỚI CSS3 Mã bài: 18.4

Giới thiệu:

CSS3 tiêu chuẩn CSS, hồn tồn tương thích với phiên trước CSS Với CSS3, định dạng trang web đa màu sắc sinh động, tạo kịch hiệu ứng hoạt hình cho trang web mà không cần phải biết ngôn ngữ lập trình

Mục tiêu:

 Biết thông tin định dạng CSS3

 Thiết kế giao diện trang web với HTML, HTML5 CSS3  Cẩn thận, an tồn

Nội dung chính: 1 Rounded Corners Tạo khung bo trịn góc

Hình 4.1 Kết rcorner1

Hình 4.3 Kết rcorner3

12. Border Images

Dùng ảnh làm đường viền Chuẩn bị ảnh border.png

Hình 4.5 Kết ảnh làm kẻ khung (border images)

13. Backgrounds

Ví dụ 1: Dùng nhiều ảnh làm

Hình 4.7 Kết ví dụ 2

Ví dụ 3: Sử dụng giá trị contain cover để thiết lập kích thước ảnh

Hình 4.8 Kết div1

Hình 4.10 Kết ví dụ 4

14. Colors

 Opacity

 Hệ màu RGBA (Red-Green-Blue-Alpha) Là kết hợp RGB Opactity

 Hệ màu HSLA (Hue-Saturation-Lightness-Alpha) Là kết hợp HSL Opacrity

16. Shadows  Text shadow

Ví dụ 1:

Ví dụ 2:

Ví dụ 3:

Ví dụ 4:

Hình 4.11 Kết ví dụ 4

17. Text

Xử lý hiển thị nội dung vượt q kích thước vùng chứa

Hình 4.12 Kết Text Overflow

 Word Wrapping

Xử lý ngắt xuống dòng với từ dài

Nội dung HTML Nội dung CSS

Kết hiển thị

18. Fonts

19. 2D Transforms

 Tịnh tiến (translate)

 Kéo kích thước (scale)

 Ma trận biến đổi (matrix): kết hợp Scale, Skew Translate matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

20 3D Transforms

 Xoay xung quanh trục Y (rotateY)

21 Transitions

Ví dụ 1: Khi di chuyển chuột lên hình vng chiều ngang thay đổi đến 300px vịng giây

Ví dụ 2: Chiều ngang thay đổi đến 300px giây, chiều cao thay đổi đến 300px giây

Ví dụ 3: Chờ giây, chiều ngang thay đổi đến 300px giây

22 Animations

Ví dụ: Hình vng chuyển từ màu đỏ sang màu vàng giây

23 Box Sizing

Quy định, kích thước element: Rộng = width + padding + border Cao = height + padding + border

 Trở ngại cho người thiết kế web viết CSS

CÂU HỎI, BÀI TẬP

BÀI 5: XỬ LÝ TƯƠNG TÁC VỚI JAVASCRIPT Mã bài: 18.5

Giới thiệu:

Javascript ngôn ngữ lập trình xử lý tài liệu HTML, thực thi trình duyệt Ngồi sử dụng HTML, CSS, người thiết kế 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 Javascript

 Biết lập trình nhúng xử lý tương tác trang web Javascript  Cẩn thận, an tồn

Nội dung chính:

1 Tổng quan Javascript

1.1 Các cách nhúng Javascript vào trang web

Đoạn Javascript đặt <body> … </body> <head> … </head> tài liệu HTML

Cách 1: Viết trực tiếp tài liệu HTML

Cách 2: Viết lệnh Javascript 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 liệu, khai báo biến

 Kiểu liệu: javascript không quan tâm đến kiểu liệu biến khai báo Biến Javascript lưu trữ giá trị kiểu liệu: số (number), chuỗi (string), mảng (array), đối tượng (object), …

 Javascript linh động việc xử lý kiểu liệu thự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 có kiểu số

Ví dụ 1:

 Kiểu luận lý (boolean)

 Kiểu mảng (array)

Chỉ số phần tử mảng  cars[0] “Saab”

 Kiểu đối tượng (object)

Trong ví dụ trên, đối tượng person có thuộc tính: firstName, lastName,

 Tốn tử typeOf: cho biết kiểu liệu biến/biểu thức

 Trong Javascript, biến chưa gán giá trị có giá trị

undefined toán tử typeOf trả undefined  Giá trị rỗng

 Giá trị null

 Sự khác undefined null

1.3 Các toán tử

 Các toán tử số

 Toán tử nối chuỗi

 Nối chuỗi số

 Biểu thức điều kiện Ví dụ:

 Tốn tử kiểu liệu

24 Sử dụng cấu trúc điều khiển 2.1 if, if … else …, switch

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 thuộc tính đối tượng

Ví dụ:

 Vịng lặp do/while

Ví dụ:

 Lệnh break, continue

o break: khỏi vịng lặp

o continue: bỏ qua lệnh bên vòng lặp tại, tiếp tục vòng lặp

25 Sử dụng hàm mảng 3.1 Mảng

 Tạo mảng

Ví dụ:

 Dùng từ khóa new

 Lưu trữ mảng dạng đối tượng Mảng:

Đối tượng:

 Thuộc tính phương thức mảng

o Thuộc tính length: cho biết số phần tử mảng

o Phương thức sort: xếp mảng

 Thêm phần tử vào mảng

 Duyệt phần tử 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ận giá trị ngẫu nhiên đoạn [0, 1)

 Làm tròn đến số nguyên gần

 Làm tròn lên số nguyên gần

 Làm tròn xuống số nguyên gần

 Lấy cấn bậc

 Các số

3.3 Dữ liệu Date

 Tạo đối tượng date: có cách

Ví dụ:

Ví dụ:

3.4 Xây dựng hàm

Hàm định nghĩa khóa function, theo sau tên hàm, sau tham số đặt cặp dấu () Hàm có nhiều tham số khơng có tham số Các lệnh thực thi đặt cặp dấu {}

 Cấu trúc:

Các lệnh thực thi thực có lời gọi hàm (đúng quy tắc) Ví dụ:

CÂU HỎI, BÀI TẬP

5.1 Thiết kế trang web hiển thị số tuổi sau nhập năm sinh 5.2 Thiết kế trang web hiển thị chu vi diện tích hình chữ nhật 5.3 Thiết kế trang web giải 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 tốn

Hướng dẫn: tham khảo hàm getElementById, thuộc tính value, innerHTML

BÀI 6: MỘT SỐ KỸ THUẬT THIẾT KẾ NÂNG CAO Mã bài: 18.6

Giới thiệu:

HTML DOM (Document Object Model) mơ hình đối tượng chuẩn gia diện lập trình cho tài liệu HTML Với HTML DOM, Javascript truy cập, thay đổi tồn (bao gồm nội dung, thuộc tính) element bên tài liệu HTML

Mục tiêu:

 Biết thuộc tính, kiện element trang web  Thay đổi nội dung, định dạng element Javascript

 Lập trình tương tác với người dùng trang web Javascript  Cẩn thận, an tồn

Nội dung chính:

1 Template Dreamwaver

Bạn tạo website template dựng sẵn Dreamweaver Với teamplate, bạn trước bước tận dung ưu điểm site hoàn chỉnh tham khảo code bên

1.1 Chọn template mẫu Dreamwaver

Vào File > New > Tab Generate chọn Page Design (CSS) > Cột chọn Two Column Left Nav > Bấm Create

Xuất CS Copy Dependent Files, CS có chứa files files ảnh, bạn bấm Cancel Hoặc bạn cò thể tạo Folder images để chứa ảnh

Sau tạo xong bạn thấy Cột Quản lý Files có Folder images file index.php Bạn rê files ảnh vào thư mục images Bấm lên file index.php xuất nội dung bên trái Bấm Save All trình duyệt để xem kết

1.2 Chỉnh sửa tên menu

Bước 2: Bấm Code > Nhập TRANG CHỦ

Bước 3: Bấm nút Design, bạn thấy tên TRANG CHỦ

Bước 4: Bạn sửa lại đặt tên: GIỚI THIỆU - TIN TỨC - SẢN PHẨM – LIÊN HỆ Vào trình duyệt bạn thấy tên Menu vừa tạo

1.3 Bổ sung văn vào trang

1.4 Định dạng văn

Trên Thanh chèn (Insert Bar) chọn Text từ Menu bật lên Bạn sử dụng Thanh chèn Hộp Kiểm Properties để định dạng văn

1.5 Bổ sung hình ảnh vào trang

26. Navigation Menu 2.1 Tạo điều hướng

Với CSS, bạn biến menu nhàm chán trở nên đẹp mắt

2.2 Canh chỉnh đường dẫn thêm đường viền cho menu

Thêm text-align:center vào <li> <a> để chỉnh đường dẫn nằm vào khối

Thêm thuộc tính border vào <ul> để viền quanh điều hướng Nếu bạn muốn đường viền bên điều hướng thêm border-bottom vào tất phần tử <li> trừ thẻ cuối cùng:

2.3 Cố định chiều cao điều hướng dọc

27 Đối tượng nâng cao Javascript

HTML DOM (Document Object Model) mơ hình đối tượng chuẩn gia diện lập trình cho tài liệu HTML Với HTML DOM, Javascript truy cập, thay đổi tồn (bao gồm nội dung, thuộc tính) element bên tài liệu HTML

3.1.Xử lý HTML DOM 3.1.1 Tìm element

3.1.2 Cập nhật nội dung, thuộc tính

 Ví dụ 2:

3.1.3 Thêm, xóa element

3.1.4 Xử lý kiện element

Cách 1: Gán thuộc tính kiện cho hàm xử lý

Cách 2: Gán thuộc tính kiện cho lệnh xử lý thẻ mở

Cách 3: Dùng hàm addEventListener

3.2 JS Browser DOM 3.2.1 Window

Đối tượng window hỗ trợ tất trình duyệt, tham chiếu đến cửa sổ trình duyệt

 Đọc kích thước cửa số (khơng bao gồm cuộn, công cụ) o window.innerHeight: chiều cao

 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()

3.2.2 Screen

window.screen trả đối tượng chứa thông tin hình người sử dụng  Chiều rộng hình: screen.width

 Chiều cao hình: screen.height

 Chiều rộng hình (trừ vùng chứa tính hệ điều hành: Windows Taskbar, …): screen.availWidth

 Chiều cao hình (trừ vùng chứa tính hệ điều hành: Windows Taskbar, …): screen.availHeight

Ví dụ:

3.2.3 Location

 Đường dẫn URL trang: window.location.href

 Trả đường dẫn tương đối trang webserver: window.locaiton.pathname

 Trả giao thức truy cập trang: window.location.protocol  Tải trang assign: window.location.assign(URL) Ví dụ:

3.2.4 History

window.history đối tượng chứa lịch sử truy cập trình duyệt Nút Back: window.history.back()

Nút Forward: window.history.forward() 3.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 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)

3.2.6 Timing

 Ngừng trước thực hàm setTimeout

 Lặp lại lệnh hàm khoảng thời gian

CÂU HỎI, BÀI TẬP

6.1 Thiết kế trang web thay đổi màu ngẫu nhiên cho đoạn văn click chuột lên nút

6.2 Thiết kế trang web tự động thêm đường kẻ ngang (màu ngẫu nhiên) click chuột lên nút

6.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” chèn dịng cuối bảng (có input cho người dùng nhập thông tin) Sau nhập thơng tin, người dùng click chuột lên nút “Ghi” hiển thị thơng tin nhập dịng vừa chè (các input khơng cịn)

U CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP

BÀI 7: TẠO GIAO DIỆN CHUYÊN NGHIỆP BẰNG JQUERY Mã bài: 18.7

Giới thiệu:

JQuery thư viện Javascript, dễ học sử dụng Với JQuery, người thiết kế web lập trình xử lý tương tác với trình duyệt dễ dàng Để học sử dụng JQuery, phải có kiến thức HTML, CSS Javascript

Mục tiêu:

 Biết công dụng jQuery

 Thiết kế giao diện trang web chuyên nghiệp với jQuery  Cẩn thận, an tồn

Nội dung chính:

1 Tổng quan JQuery 1.1 Giới thiệu

JQuery thư viện Javascript nhỏ gọn “viết ít, làm nhiều”, giúp việc lập trình xử lý Javascript trở nên đơn giản Để lập trình cho tác vụ phổ biến trang web 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 với vài dòng lệnh

JQuery đơn giản hóa nhiều cơng việc phức tạp từ Javascript, lệnh tải liệu AJAX, thao tác HTML DOM

Thư viện jQuery bao gồm tính sau:  Thao tác HTML DOM

 Thao tác CSS

 Phương thức xử lý kiện HTML  AJAX

 Tiện ích 1.2 Cài đặt

Tải jQuery từ http://jquery.com/download/ thư mục Scripts site

1.3 Sử dụng

Trong đó: x, y, z phiê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 element Ví dụ:

28. Chọn element

2.1 Cú pháp cách chọn tương tự CSS Tất element <p>: $(“p”)

Element có thuộc tính id “test”: $(“#test”)

Tất element có thuộc tính class “test”: $(“.test”)

Tham khảo thêm tại:

http://www.w3schools.com/jquery/jquery_ref_selectors.asp Ví dụ:

2.4 Chọn theo thuộc tính

3 Thay đổi nội dung, thuộc tính 3.1 Duyệt danh sách element Cách 1:

3.2 Tạo element

3.3 Đọc, thay đổi nội dung 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

3.6 Làm việc với CSS

 Thêm/xóa giá trị thuộc tính class o addClass: thêm nhiều class o removeClass: xóa nhiều class o toggleClass: 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()

Hình 8.1 jQuery dimensions Ví dụ:

4 Xử lý kiện 4.1 Quy tắc chung

Ví dụ 1:

4.2 Xử lý số kiện thường gặp  ready: document tải

 focus: control form nhận trỏ

 blur: control form khơng cịn chiếm trỏ

 keypress: nhấn phím control nhận trỏ

 click: click chuột

 mousehover: trỏ chuột element

 mouseout: trỏ chuột di chuyển khỏi element

4.3 Xử lý đối tượng Event

Trong mục 5.2, xây dựng hàm xử lý cho kiện mà không dùng đến tham số kiện Hàm xử lý kiện đầy đủ phải có tham số kiện

 Vị trí tương đối trỏ chuột (event.pageX, event.pageY)

 Cho biết phím (hoặc nút chuột) nhấn (event.which)

5 Tạo hiệu ứng hoạt ảnh 5.1 Ẩn,

 Ẩn

 Hiện: tương tự ẩn, thay hide show

5.2 Fade-in, Fade-out  Hiện lên (fadeIn)

 Ẩn xuống (fadeOut): tương tự lên, thay fadeIn fadeOut  Ẩn chuyển sang hiện, chuyển sang ẩn (fadeToggle)

5.3 Sliding

Cách dùng tham số: speed, easing, callback tương tự mục 5.1 5.2 5.4 Tạo hoạt hình

Trong đó: speed, easing callback tham số tùy chọn Ví dụ:

CÂU HỎI, BÀI TẬP

7.1 Thiết kế trang web thay đổi màu ngẫu nhiên cho đoạn văn 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) 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” chèn dịng cuối bảng (có input cho người dùng nhập thông tin) Sau nhập thông tin, người dùng click chuột lên nút “Ghi” hiển thị thơng tin nhập dịng vừa chè (các input khơng cịn)

U CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP Dùng jQuery

BÀI 8: PUBLISH WEBSITE Mã bài: 18.8

Giới thiệu:

Là trình đưa website thiết kế xong máy tính cục bạn lên môi trường mạng thực , tương tác với người dùng thực

Mục tiêu:

 Làm việc với bước xuất website  Quảng bá website

 Bảo trì website Nội dung chính:

1 Đăng ký web hosting miễn phí 1.1 Giới thiệu

Xuất website chia thành nhiều bước: Lựa chọn tên miền

Lựa chọn web server Uploadn website

Cập nhật chỉnh sửa website Quảng bá website

1.2 Lựa chọn tên miền

2 Publish web lên web hosting miễn phí Bước 1: Đăng ký tài khoản Hostinger:

Bước 2: Điền đầy đủ thông tin bấm vào tạo tài khoản Bước 3: Vào Email để xác nhận tài khoản

 Truy cập vào đường dẫn trên, sau nhấp vào nút đăng kí bảng Free

 Ngay sau danh sách tài khoản xuất tài khoản bạn vừa tạo

Chú ý: thông thường phải 3h để tên miền truy cập.

Để truy cập vào trang quản lý tài khoản hosting gắn với tên miền bạn nhìn sang bên phải tên miền trên, chọn ” Chuyển”

3 Publish lên web local IIS

IIS – Inernet Infomation Service phần mở rộng Microsoft, sử dụng Windows NT IIS dùng để triển khai dịch vụ HTTP, HTTPS, FTP, FTTPS, SMTP NNTP Trong tìm hiểu bước để thiết lập web server với IIS

Mặc định, IIS không tích hợp sẵn, cần sử dụng, người dùng người quản trị phải cài đặt thêm thành phần IIS cài đặt Windows Server Windows Client Windows 7, Windows 8, Windows 10…

Các bước thực hiện:

 Bước 1: Mở Internet Information Services Manager

Hình 8.1: Mở rộng menu dạng bạn thấy Default Web Site

Hình 8.2: Nhấp vào Browse *:80 (http)

Sẽ thấy trang web sau Lưu ý địa có nội dung localhost. Đó địa để nhập vào trang web

Hình 8.3: Địa để nhập vào trang web mới

thiết kế web http://jquery.com/download/ http://www.w3schools.com/jquery/jquery_ref_selectors.asp http://w3schools.com