Giáo trình Thiết kế web Nghề: Công nghệ thông tin CĐ Kỹ Thuật Công Nghệ Bà Rịa Vũng Tàu

(NB) Mục tiêu của Giáo trình Thiết kế web là Biết các kiến thức và kỹ năng để có thể thực hiện các website tĩnh. Biết những kiến thức nền tảng vững chắc về lập trình Web bắt đầu từ HTML đến HTML5, từ CSS đến CSS3 và từ Javascript đến jQuery để có thể nhúng các xử lý vào các trang HTML, lập trình Web ở mức clientside. Biết những kiến thức nền tảng về thiết kế 1 website tĩnh để tự tin tham gia các mô đun về xây dựng web động như PHP, Asp.Net.

ỦY BAN NHÂN DÂN TỈNH BR – VT

TRƯỜNG CAO ĐẲNG NGHỀ

GIÁO TRÌNH

MÔ ĐUN THIẾT KẾ WEB NGHỀ CÔNG NGHỆ THÔNG TIN TRÌNH ĐỘ TRUNG CẤP, CAO ĐẲNG

Ban hành kèm theo Quyết định số: 01/QĐ-CĐN, ngày 04 tháng 01 năm 2016

của Hiệu trưởng trường Cao đẳng nghề tỉnh Bà Rịa – Vũng Tàu

TUYÊN BỐ BẢN QUYỀN

Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể đượcphép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và thamkhảo

Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinhdoanh thiếu lành mạnh sẽ bị nghiêm cấm

LỜI GIỚI THIỆU

Giáo trình “Thiết kế web” được biên soạn với mục tiêu cung cấp cho ngườihọc các kiến thức và kỹ năng cần thiết để thiết kế trang web

Tác giả đã nghiên cứu một số tài liệu, công nghệ hiện đại kết hợp với kinhnghiệm làm việc thực tế để viết nên giáo trình này Nội dung được tác giả trìnhbày cô động, dễ hiểu kèm theo các bước hướng dẫn thực hành chi tiết giúp chongười học dễ tiếp thu các kiến thức cần thiết và hình thành được kỹ năng nghề.Trong quá trình biên soạn, chắc chắn giáo trình còn nhiều thiếu sót Tác giảrất mong nhận được ý kiến đóng góp của quý thầy/cô và các em sinh viên đểtiếp tục hoàn thiện hơn

Xin chân thành cảm ơn quý đồng nghiệp, bạn bè đã có những ý kiến đónggóp trong quá trình xây dựng giáo trình này

Bà Rịa – Vũng Tàu, ngày …… tháng …… năm 2016

Tham gia biên soạn

1 Phan Hữu Phước – Chủ biên

MỤC LỤC

MỤC LỤC 1

BÀI 1 MÔI TRƯỜNG TẠO TRANG WEB TĨNH DREAMWEAVER 9

1 Giới thiệu 9

1.1 Khởi động 9

1.2 Quản lý các palette 10

2 Quản lý các site 10

2.1 Tạo site 10

2.2 Xóa site 11

3 Quản lý nội dung trong site 11

3.1 Cấu trúc site 11

3.2 Các loại tập tin trong site 12

3.3 Quản lý thư mục, tập tin 12

4 Chọn vùng nhìn làm việc 12

BÀI 2 TẠO TRANG WEB BẰNG HTML 13

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

2 Tìm hiểu cấu trúc chung của thẻ HTML 14

3 Thiết kế trang web bằng các thẻ HTML cơ bản 14

3.1 META, LINK, STYLE, SCRIPT 14

3.2 TABLE, TR, TD, TH 14

3.3 DIV, P, BR, HR 15

3.4 IMG, A 16

3.5 OL, UL, LI 17

3.6 FORM, INPUT, SELECT, OPTION 17

BÀI 3 TẠO TRANG WEB BẰNG HTML5 19

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

2 Sử dụng các thẻ mới của HTML5 trong FORM 20

BÀI 4 HOÀN CHỈNH GIAO DIỆN TRANG WEB VỚI CSS 23

1 Giới thiệu CSS và các loại CSS 23

1.1 Giới thiệu 23

1.2 External 23

1.3 Internal 23

1.4 Thuộc tính style 24

2 Tạo và sử dụng CSS 24

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

BÀI 5 TÙY BIẾN GIAO DIỆN WEB VỚI CSS3 27

1 Rounded Corners 27

2 Border Images 28

3 Backgrounds 29

4 Colors 31

5 Gradients 33

6 Shadows 34

7 Text 36

8 Fonts 38

9 2D Transforms 38

10 3D Transforms 40

12 Animations 43

13 Box Sizing 43

BÀI 6 XỬ LÝ TƯƠNG TÁC VỚI JAVASCRIPT 45

1 Tổng quan Javascript 45

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

1.2 Kiểu dữ liệu, khai báo biến 45

1.3 Các toán tử 47

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

2.1 if, if … else …, switch 50

2.2 for, while, break, continue 51

3 Sử dụng hàm và mảng 52

3.1 Mảng 52

3.2 Một số hàm toán học 53

3.3 Dữ liệu Date 54

3.4 Xây dựng hàm 56

BÀI 7 XỬ LÝ NÂNG CAO VỚI CÁC ĐỐI TƯỢNG TRONG JAVASCRIPT .58

1 Xử lý trên HTML DOM 58

1.1 Tìm element 58

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

1.3 Thêm, xóa element 60

1.4 Xử lý sự kiện của elemen 61

2 JS Browser DOM 61

2.1 Window 61

2.2 Screen 62

2.3 Location 62

2.4 History 63

2.5 Popup alert 63

2.6 Timing 63

BÀI 8 TẠO GIAO DIỆN CHUYÊN NGHIỆP BẰNG JQUERY 65

1 Tổng quan về jQuery 65

1.1 Giới thiệu 65

1.2 Cài đặt 65

1.3 Sử dụng 66

1.4 Các thành phần 66

2 Chọn element 66

2.1 Cú pháp và cách chọn tương tự CSS 66

2.2 Chọn theo mối quan hệ phân cấp 67

2.3 Form selector 68

2.4 Chọn theo thuộc tính 68

3 Thay đổi nội dung, thuộc tính 68

3.1 Duyệt danh sách các element 68

3.2 Tạo element mới 69

3.3 Đọc, thay đổi nội dung trong element 69

3.4 Đọc, thay đổi thuộc tính 70

3.5 Chèn nội dung 70

3.6 Làm việc với CSS 70

4 Xử lý sự kiện 72

5.1 Quy tắc chung 72

5.2 Xử lý một số sự kiện thường gặp 72

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

5 Tạo hiệu ứng và hoạt ảnh 74

5.1 Ẩn, hiện 74

5.2 Fade-in, Fade-out 75

5.3 Sliding 76

5.4 Tạo hoạt hình 76

TÀI LIỆU THAM KHẢO 78

MÔ ĐUN THIẾT KẾ WEB

Vị trí, tính chất, ý nghĩa và vai trò của mô đun:

 Được giảng dạy sau khi học xong Đồ họa ứng dụng

 Môn học chuyên ngành, cung cấp kiến thức và kỹ năng của một công việctrong quy trình xây dựng ứng dụng web

Mục tiêu của mô đun:

 Biết các kiến thức và kỹ năng để có thể thực hiện các website tĩnh

 Biết những kiến thức nền tảng vững chắc về lập trình Web bắt đầu từHTML đến HTML5, từ CSS đến CSS3 và từ Javascript đến jQuery để cóthể nhúng các xử lý vào các trang HTML, lập trình Web ở mức client-side

 Biết những kiến thức nền tảng về thiết kế 1 website tĩnh để tự tin tham giacác mô đun về xây dựng web động như PHP, Asp.Net

 Sử dụng thành thạo các tag HTML để xây dựng trang Web

 Nhúng xử lý Javascript, jQuery trực tiếp vào các trang HTML làm chotrang Web ấn tượng, sinh động hơn

 Truy cập và thiết lập thuộc tính các đối tượng trong mô hình đối tượng củatrang HTML, làm chủ các đối tượng và điều khiển trang Web theo ý muốn

 Xây dựng layout cho Website

 Xây dựng được một website tĩnh với giao diện chuyên nghiệp, có các xử lý

và các hình ảnh sống động trên trang web

 Thực hiện các bài thực hành đảm bảo đúng trình tự, an toàn

Nội dung của mô đun:

T

T Tên các bài trong mô đun

Thời gian

Hình thức giảng dạy

1 Môi trường tạo trang web tĩnh DreamWeaver 5 Tích hợp

6 Xử lý tương tác với Javascript 14 Tích hợp

7 Xử lý nâng cao với các đối tượng trong Javascript 13 Tích hợp

8 Tạo giao diện chuyên nghiệp bằng jQuery 20 Tích hợp

Mục tiêu:

 Biết công dụng của từng thành phần trong DreamWeaver

 Biết tạo và quản lý site

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

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

Nội dung:

1 Giới thiệu

1.1 Khởi động

 Click đôi chuột lên biểu tượng Adobe DreamWeaver trên desktop

 Vào Start  Programs  Adobe DreamWeaver

Hình 1.1 Giao diện Adobe DreamWeaver

1.2 Quản lý các palette

 Vào menu Window  Chọn/bọ chọn để hiện/ẩn palette

Hình 1.2 Vị trí hiển thị của các palette

 Muốn mở rộng palette nào thì click chuột lên biểu tượng của palette đó

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

2 Quản lý các site

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

Hình 1.3 Hộp thoại Manage Sites

2.1 Tạo site

 Đặt tên cho site, chọn ổ đĩa, thư mục chứa site rồi chọn Save trong hộpthoại Site Setup

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 trong danh sách

 Click chuột lên biểu tượng Delete the current selected sites ( )

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

3.1 Cấu trúc site

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

Hình 1.5 Cấu trúc site

3.2 Các loại tập tin trong site

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

 jpg, png, gif: tập tin hình ảnh, dùng để chèn, định dạng nền cho trangweb, thường được đặt trong thư mục images

 css: tập tin định dạng cho trang web, thường được đặt trong thư mục styles

 js: tập tin javascript, chứa các đoạn mã thực thi trên trình duyệt, thườngđượt đặt trong 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 và tập tin index.html trongsite

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

o Click chuột phải lên đối tượng chứa trong 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 bằng các thể HTML

o Design: thiết kế trang bằng cách kéo thả các element vào trang web

o Split: tách cửa sổ tài liệu thành 2 vùng nhìn Code và Design

Mục tiêu:

 Biết công dụng của các tag HTML

 Thiết kế được trang web bằng HTML

 Cẩn thận có thẻ mở mà chưa có thẻ đóng, đảm báo mở trước thì đóng sau

Nội dung:

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

Một trang web gồm nhiều phần tử (element)

 Trang web bắt đầu bằng <html> và kết thúc bằng </html>

 <head> … </head> chứa nội dung khai báo đầu trang của trang web

 <meta charset= “utf-8” />: báo trình duyệt hiển thị nội dung trang web theobảng mã Unicode UTF-8, đặt ở giữa <head> và </head>

 <title> Tiêu đề </title>: tiêu đề trang web, hiển thị trên thanh tiêu đề củatrình duyệt web, đặt ở giữa <head> và </head>

 <body> … </body>: chứa nội dung của trang web được hiển thị trên trìnhduyệt, đặt sau </head>

2 Tìm hiểu cấu trúc chung của thẻ HTML

 Hầu hết các element bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng Ví dụ:

o <hr />: tạo đường kẻ nằm ngang

o <img … />: chèn ảnh (sẽ được tìm hiểu chi tiết ở phần sau)

 Thuộc tính của element được đặt trong thẻ mở

o Ví dụ: <img src=“images/i1.jpg” />

o src: là thuộc tính

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

o Giá trị của thuộc tính luôn được đặt trong cặp dấu nháy kép “”

 Element nào được mở trước thì phải đóng sau

5 Thiết kế trang web bằng các thẻ HTML cơ bản

3.1 META, LINK, STYLE, SCRIPT

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

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

3.2 TABLE, TR, TD, TH

3.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 trong danh sách

Ví dụ:

3.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 các điều khiển cho phép người dùng nhập/chọn dữ liệu, đặttrong FORM

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

 OPTION: Tạo mục trong danh sách chọn

Ví dụ:

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

2.1 Tạo trang web hiển thị danh sách HSSV

2.2 Tạo trang web đăng ký thông tin HSSV

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

Giao diện đăng ký phải được đặt trong form

Mục tiêu:

 Biết công dụng các tag mới trong HTML5

 Bố cục, thiết kế được trang web bằng HTML5

 header: định nghĩa vùng header (banner) của trang/bài viết

Ví dụ:

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

Ví dụ:

6 Sử dụng các thẻ mới của HTML5 trong FORM

 datalist, keygen, output

 Các type mới của input trong FORM

o color: chọn màu

o date: chọn ngày

o number: chọn số

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

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

3.1 Tạo trang web hiển thị danh sách HSSV

3.2 Tạo trang web đăng ký thông tin HSSV

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

Sử dụng tối đa HTML5

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

Giao diện đăng ký phải được đặt trong form

Mục tiêu:

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

 Thiết kế được trang web với HTML, HTML5, và 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

o font-family, color: font và màu chữ

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

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

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

o background-color, background-image: màu nền, ảnh nền

8 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 http://brtvc.edu.vn

4.2 Thiết kế trang chủ của website http://thuvien.brtvc.edu.vn

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

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:

1 Rounded Corners

Tạo khung bo tròn các góc

9 Border Images

Dùng ảnh làm đường viền

10 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

11 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

12 Gradients

13 Shadows

 Text shadow

 Box shadow

Ví dụ 1:

Ví dụ 2:

Ví dụ 3:

Ví dụ 4:

14 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

 Word Breaking: xử lý giữ hay ngắt những từ dài

15 Fonts

16 2D Transforms

 Tịnh tiến (translate)

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

17 3D Transforms

 Xoay xung quanh trục Y (rotateY)

 Xoay xung quanh trục Z (rotateZ)

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

19 Animations

Ví dụ: Hình vuông sẽ chuyển từ màu đỏ sang màu vàng trong 2 giây

20 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 đảmbả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 http://brtvc.edu.vn

5.3 Thiết kế trang chủ của website http://thuvien.brtvc.edu.vn

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

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:

1 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 <body> … </body> hoặc <head> …

</head> 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 <tên_biến>;

 Kiểu dữ liệu: javascript không quan tâm đến kiểu dữ liệu của biến khi mớikhai 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éptính

 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

 Các toán tử gán

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

 Nối chuỗi và số

 Biểu thức điều kiện

Ví dụ:

 Toán tử trên kiểu dữ liệu

21 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

 Lệnh break, continue

o break: thoát khỏi vòng lặp

o 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ònglặp tiếp theo

Ví dụ:

 Các hàm ghi trên date