Giáo trình Thiết kế web (Nghề Công nghệ thông tin)

Ủ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ố: ……., ngày tháng năm của Hiệu trưởng
trường Cao đẳng nghề tỉnh Bà Rịa – Vũng Tàu

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ể được
phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham
khả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 kinh
doanh 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ười
họ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 kinh
nghiệ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ì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 giúp cho
ngườ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 q 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 đóng
góp trong q 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
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

1


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
11. Transitions.....................................................................................................42
2

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 JAVASCRIPT58
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
3


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
3.7. Thay đổi kích thước......................................................................................71
4. Xử lý sự kiện.................................................................................................72
4


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

5


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ệc
trong 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 gia
cá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 cho
trang 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ủa
trang 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 chun 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 tồn.

Nội dung của mô đun:
T
T
1
2
3
4
5
6
7
8

Tên các bài trong mô đun
Môi trường tạo trang web tĩnh DreamWeaver
Tạo trang web bằng HTML
Tạo trang web bằng HTML5
Kiểm tra bài 1  3
Hoàn chỉnh giao diện trang web với CSS
Tùy biến giao diện web với CSS3
Kiểm tra bài 4  5
Xử lý tương tác với Javascript
Xử lý nâng cao với các đối tượng trong Javascript
Tạo giao diện chun nghiệp bằng jQuery

Thời

Hình thức

gian
5

15
13
2
15
14
2
14
13
20

giảng dạy
Tích hợp
Tích hợp
Tích hợp
Thực hành
Tích hợp
Tích hợp
Thực hành
Tích hợp
Tích hợp
Tích hợp
6


9

Kiểm tra
Publish website
Tổng cộng

2
5
120

Thực hành
Tích hợp

7


8


BÀI 1.
MÔI TRƯỜNG TẠO TRANG WEB TĨNH DREAMWEAVER
Giới thiệu:
Adobe DreamWeaver là ứng dụng thiết kế web được sử dụng phổ biến nhất
hiện nay. Adobe DreamWeaver hỗ trợ các chức năng mạnh mẽ cho cả người
thiết kế và lập trình web.
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

9


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
 Click chuột lên nút New Site
10


 Đặt tên cho site, chọn ổ đĩa, thư mục chứa site rồi chọn Save trong hộp
thoạ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

11


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 trang
web, 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 trong
site
 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

12


BÀI 2.
TẠO TRANG WEB BẰNG HTML
Giới thiệu:
HTML (Hyper Text Markup Language) là ngôn ngữ đánh dấu siêu văn bản.
Một trang web hiển thị trên trình duyệt chính là tài liệu HTML. Do đó, dù là
người thiết kế hay lập trình web, địi hỏi phải có kiến thức về HTML.
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 theo
bả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ủa
trì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ình

duyệt, đặt sau </head>
13


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ụ:
<body> … </body>
 Nội dung được đặt giữa thẻ mở và thẻ đóng. Ví dụ:

Đây là đoạn văn
bản

 Một số thẻ đặc biệt vừa mở và đóng
o
: ngắt xuống dịng
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
o
o
o

Ví dụ: <img src=“images/i1.jpg” />
src: là thuộc tính
images/i1.jpg: giá trị của thuộc tính src.
Giá trị của thuộc tính ln đượ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
 META
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





TABLE: Tạo bảng
TR: Tạo dòng trong bản
TD: Tạo ơ trong dịng
TH: Tương tự TD nhưng là ơ tiêu đề, nội dung được tự động tô đậm và
canh giữa ơ

Ví dụ:
14


3.3. DIV, P, BR, HR
 DIV: Chia vùng riêng, chiếm hết chiều ngang của vùng chứa
Ví dụ:

 P: Tạo đoạn văn bản
Ví dụ:

15


 BR: Ngắt xuống dịng trong đoạn văn bản

Ví dụ:

 HR: Tạo đường kẻ ngang
Ví dụ: <hr />
3.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ụ:

3.5. OL, UL, LI
 OL: Tạo danh sách đánh số thứ tự
16


 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, đặt
trong FORM
 SELECT: Tạo danh sách chọn
 OPTION: Tạo mục trong danh sách chọn
Ví dụ:

17

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

18


BÀI 3.
TẠO TRANG WEB BẰNG HTML5
Giới thiệu:
HTML5 là phiên bản mới nhất của HTML, hỗ trợ các element ngữ nghĩa rõ
ràng. Với HTML5, các trang web được thiết kế với số lượng element ít hơn, rõ
ràng hơn, chèn multimedia đơn giản hơn.
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
 Cẩn thận, an toàn
Nội dung:
1. Sử dụng các thẻ ngữ nghĩa
 section: định nghĩa một vùng của tài liệu
Ví dụ:

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

 nav, menu: định nghĩa vùng chứa navigation (thường gọi là menu) của
trang
Ví dụ:

19


 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

20


o time: chọn giờ

o email: nhập email

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

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

21