ỨNG DỤNG RESPONSIVE VÀO TRONG XÂY DỰNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN VỚI HTML5 VÀ CSS3 - Full 10 điểm

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.74 MB, 93 trang )

UBND TỈNH QUẢNG NAM
TRƯỜNG ĐẠI HỌC QUẢNG NAM
KHOA: CÔNG NGHỆ THÔNG TIN

----------

TRẦN VĂN QUỐC

Tên đề tài:
ỨNG DỤNG RESPONSIVE VÀO TRONG XÂY DỰNG

WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN
VỚI HTML5 VÀ CSS3

KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC

Quảng Nam, tháng 04 năm 2016

UBND TỈNH QUẢNG NAM
TRƯỜNG ĐẠI HỌC QUẢNG NAM
KHOA: CÔNG NGHỆ THÔNG TIN

----------

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC

Tên đề tài:
ỨNG DỤNG RESPONSIVE VÀO TRONG XÂY DỰNG

WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN
VỚI HTML5 VÀ CSS3

Sinh viên thực hiện:
TRẦN VĂN QUỐC
MSSV: 2112011024
CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN
KHÓA: 2012 – 2016
Cán bộ hướng dẫn:
ThS. DƯƠNG PHƯƠNG HÙNG

MSCB: 21882

Quảng Nam, tháng 4 năm 2016

LỜI CẢM ƠN

Đầu tiên em xin chân thành cảm ơn đến tất cả các thầy cô trong khoa Công Nghệ
Thông Tin trường Đại học Quảng Nam đã giảng dạy tận tình cho em những kiến thức bổ
ích trong 4 năm qua để thực hiện khóa luận này.

Đặc biệt em xin gửi lời cảm ơn đến giảng viên Th.S Dương Phương Hùng – người
đã trực tiếp hướng dẫn em hoàn thành khóa luận này. Bên cạnh đó là những ý kiến đóng
góp của bạn bè, đã cho em nguồn động viên lớn để hồn thành nhiệm vụ của khóa luận.

Qua đó, em đã đạt được nhiều tiến bộ về kiến thức cũng như những kĩ năng làm
việc bổ ích.

Em chân thành gửi lời cảm ơn sâu sắc đến tồn thể thầy cơ và các bạn!

MỤC LỤC

Phần 1. MỞ ĐẦU .................................................................................................................1
1.1. Lý do chọn đề tài .......................................................................................................1
1.2. Mục tiêu của đề tài ....................................................................................................1
1.3. Đối tượng và phạm vi nghiên cứu .............................................................................1
1.3.1. Đối tượng nghiên cứu.........................................................................................1
1.3.2. Phạm vi nghiên cứu ............................................................................................1
1.4. Phương pháp nghiên cứu ...........................................................................................2
1.5. Lịch sử nghiên cứu ....................................................................................................2
1.6. Đóng góp của đề tài ...................................................................................................2
1.7. Cấu trúc đề tài............................................................................................................2

Phần 2. NỘI DUNG NGHIÊN CỨU ...................................................................................3
CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ RESPONSIVE, HTML5 VÀ CSS3 .......3

1.1. Công nghệ Responsive Web Design (RWD) ............................................................3
1.1.1. Lịch sử ra đời của RWD.....................................................................................3
1.1.2. Một số khái niệm ................................................................................................3
1.1.3. Những ưu thế của Responsive Web Design .......................................................4
1.1.4. Khả năng ứng dụng Responsive Web Design hiện nay .....................................5
1.1.5. Cơ chế hiển thị đáp ứng thiết bị người dùng ......................................................5
1.1.6. Những kỹ thuật thiết kế Responsive Web Design............................................18

1.2. HTML5 và CSS3.....................................................................................................20
1.2.1. HTML5.............................................................................................................20
1.2.1.1. Khái niệm ..................................................................................................20
1.2.1.2. Các thẻ mới của HTML5...........................................................................20
1.2.1.3. Ứng dụng ...................................................................................................21
1.2.2. CSS3 .................................................................................................................24
1.2.2.1. Khái niệm ..................................................................................................24
1.2.2.2. Một số ưu điểm của CSS3 .........................................................................24

1.2.3. Sự kết hợp giữa HTML5 và CSS3 ...................................................................24
1.2.4. Những điểm khác và nổi bật của HTML5 và CSS3.........................................25

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG WEBSITE BÁN HÀNG ĐIỆN
TỬ TRỰC TUYẾN ............................................................................................................28

2.1. Khảo sát hiện trạng..................................................................................................28
2.2. Phân tích yêu cầu.....................................................................................................28

2.2.1. Đặt vấn đề.........................................................................................................28
2.2.1.1. Định nghĩa bài toán ...................................................................................28
2.2.1.2. Hệ thống cũ................................................................................................29
2.2.1.3. Mục đích của hệ thống mới .......................................................................29
2.2.1.4. Yêu cầu chức năng ....................................................................................30
2.2.1.5. Yêu cầu phi chức năng .............................................................................30

2.2.2. Tác nhân của hệ thống......................................................................................31
2.2.3. Xác định các ca sử dụng(UC) của các tác nhân ...............................................31
2.2.4. Biểu đồ Ca sử dụng của hệ thống....................................................................33

2.2.4.1. Biểu đồ UC tổng quát ................................................................................33
2.2.4.2. Biểu đồ UC đăng ký ..................................................................................33
2.2.4.3. Biểu đồ UC đăng nhập ..............................................................................34
2.2.4.4. Biểu đồ tìm kiếm sản phẩm .......................................................................34
2.2.4.5. Biểu đồ UC mua hàng ...............................................................................35
2.2.4.6. Biểu đồ UC thanh toán ..............................................................................35
2.2.4.7. Biểu đồ UC nhập hàng ..............................................................................36
2.2.4.8. Biểu đồ UC xuất hàng ...............................................................................36
2.2.5. Đặc tả ca sử dụng..............................................................................................37
2.3. Thiết kế các tương tác của hệ thống ........................................................................52

2.3.1. UC Đăng ký ......................................................................................................52
2.3.2. UC đăng nhập ...................................................................................................53
2.3.3. UC tìm kiếm sản phẩm .....................................................................................54
2.3.4. UC thanh toán...................................................................................................55
2.3.5. UC nhập hàng ...................................................................................................56
2.3.6. UC xuất hàng ....................................................................................................57
2.4. Thiết kế các lớp của hệ thống..................................................................................58
2.4.1. Xác định các lớp biên .......................................................................................58
2.4.2. Xác định các lớp điều khiển .............................................................................59
2.4.3. Xác định các lớp thực thể .................................................................................59
2.4.4. xây dựng thẻ CRC của các lớp thực thể ...........................................................62
2.4.5. Biểu đồ lớp của hệ thống..................................................................................69
2.5. Thiết kế cơ sở dữ liệu của hệ thống.........................................................................70
2.5.1. Biểu đồ mơ hình quan hệ..................................................................................70
2.5.2. Mô tả các bảng..................................................................................................70
2.6. Thiết kế giao diện ....................................................................................................74
2.6.1. Biểu đồ định hướng giao diện người dùng cho chức năng đăng ký.................74
2.6.2. Biểu đồ định hướng giao diện người dùng cho chức năng đăng nhập.............75
2.6.3. Biểu đồ định hướng giao diện người dùng cho chức năng mua hàng..............76
CHƯƠNG 3: XÂY DỰNG HỆ THỐNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC
TUYẾN ............................................................................................................................... 77
3.1. Kiến trúc vật lý của hệ thống...................................................................................77
3.1.1. Biểu đồ thành phần...........................................................................................77
3.1.2. Biểu đồ triển khai .............................................................................................77
3.2. Các chức năng của hệ thống được cài đặt trong chương trình Demo .....................78
3.3. Một số giao diện chính của hệ thống.......................................................................79
3.3.1. Hình ảnh ở thiết bị màn hình lớn hơn 1200px..................................................79
3.3.1. Hình ảnh ở thiết bị màn hình thiết bị từ 767px đến 979px...............................80
3.3.3. Hình ảnh ở thiết bị màn hình thiết bị nhỏ hơn 767px ......................................82
Phần 3. KẾT LUẬN VÀ KIẾN NGHỊ...............................................................................85

Phần 4. TÀI LIỆU THAM KHẢO .....................................................................................86

DANH MỤC CÁC TỪ VIẾT TẮT

HTML HyperText Markup Language
CSS Cascading Style Sheet
RWD Responsive Web Design
UC Use Case

DANH MỤC CÁC HÌNH ẢNH

Hình1.1 Hình Ảnh sản phẩm thu nhỏ...................................................................................7
Hình 1.2 Hình ảnh tin cơng nghệ..........................................................................................8
Hình 1.3 Hình ảnh sản phẩm thu nhỏ .................................................................................10
Hình 1.4 Hình ảnh tin cơng nghệ 3 hàng............................................................................11
Hình 1.5 Hình ảnh form đặt hàng 2 cột ..............................................................................12
Hình 1.6 Hình ảnh sản phẩm thu nhỏ .................................................................................16
Hình 1.7 Hình ảnh tin cơng nghệ 1 cột...............................................................................16
Hình 1.8 Hình ảnh form đặt hàng 1 cột ..............................................................................17
Hình 3.1 Hình ảnh sản phẩm thu nhỏ .................................................................................79
Hình 3.2 Hình ảnh tin cơng nghệ........................................................................................80
Hình 3.3 Hình ảnh sản phẩm thu nhỏ .................................................................................80
Hình 3.4 Hình ảnh tin cơng nghệ 3 hàng............................................................................81
Hình 3.5 Hình ảnh form đặt hàng 2 cột ..............................................................................81
Hình 3.6 Hình ảnh sản phẩm thu nhỏ 1 cột ........................................................................82
Hình 3.7 Hình ảnh tin cơng nghệ 1 cột...............................................................................83
Hình 3.8 Hình ảnh form đặt hàng 1 cột ..............................................................................84

Bài báo cáo “Khóa luận tốt nghiệp”
------------------------------------------------------------------------------------------------------------

Phần 1. MỞ ĐẦU

1.1. Lý do chọn đề tài
Với sự phát triển mạnh mẽ của công nghệ thơng tin và sự lớn mạnh của mạng máy

tính tồn cầu. Công nghệ thông tin đang được ứng dụng rộng rãi trên tất cả các lĩnh vực
của cuộc sống, nó ngày càng được quan tâm và sử dụng hiệu quả về mọi mặt.

Như chúng ta cũng thấy trong thị trường hiện nay thì việc cạnh tranh về kinh doanh
ngày càng trở nên quyết liệt và hầu hết những nhà kinh doanh, những công ty lớn đều rất
chú tâm đến việc làm thoả mãn khách hàng một cách tốt nhất. So với kinh doanh truyền
thống thì việc kinh doanh trực tuyến sẽ tốn chi phí thấp hơn, hiệu quả sẽ đạt cao hơn, với
lợi thế của công nghệ Internet việc truyền tải thông tin về sản phẩm nhanh chóng, thuận
tiện. Kết hợp với bộ phận giao hàng tận nơi, thông qua bưu điện và ngân hàng để thanh
tốn tiền, càng tăng thêm thuận lợi để loại hình này phát triển.

Cùng với sự phát triển mạnh mẽ của cơng nghệ thì các thiết bị điện tử cũng nhanh
chóng phát triển theo, trong lĩnh vực thiết kế và phát triển web, chúng ta nhanh chóng
nhận ra rằng không thể theo kịp với sự phát triển của các thiết bị mới với những độ phân
giải màn hình khác nhau. Đối với các doanh nghiệp, tạo ra từng phiên bản website phù
hợp với mỗi thiết bị có độ phân giải mới là điều khơng thể, hoặc ít nhất là khơng thực tế.
Các trang web cần phải có công nghệ tự độn1g đáp ứng theo thiết bị của người dùng, điều
này sẽ loại bỏ sự cần thiết cho nhiều thiết kế web khác nhau và giảm thiểu thời gian cũng
như chi phí thiết kế web.

Từ nhu cầu thực tế đó em đã chọn đề tài “ Ứng dụng Responsive vào trong xây dựng
website bán hàng điện tử trực tuyến với HTML5 và CSS3”
1.2. Mục tiêu của đề tài

Nắm vững ngôn ngữ HTML5 và CSS3.
Phân tích và thiết kế hệ thống hướng đối tượng để đưa ra một sản phẩm phần mềm có
các chức năng cần thiết.
Xây dựng được một website bán hàng điện tử trực tuyến.
1.3. Đối tượng và phạm vi nghiên cứu
1.3.1. Đối tượng nghiên cứu
Đề tài chủ yếu nghiên cứu về công nghệ Responsive, ngôn ngữ HTML5 và CSS3.
1.3.2. Phạm vi nghiên cứu
Nghiên cứu kiến thức nền tảng về Responsive, HTML5, CSS3.
Nghiên cứu triển khai ứng dụng trên cơ sở đáp ứng nhu cầu của website bán hàng điện
tử trực tuyến.

------------------------------------------------------------------------------------------------------------

SVTH: Trần Văn Quốc Lớp: DT12CTT01

1

Bài báo cáo “Khóa luận tốt nghiệp”
------------------------------------------------------------------------------------------------------------

1.4. Phương pháp nghiên cứu
Khảo sát các cửa hàng bán hàng điện tử.
Tìm hiểu thơng tin trên sách báo, các thông tin từ Internet và các phương tiện truyền

thơng.
Tìm hiểu, học hỏi kiến thức từ giáo viên và bạn bè.
1.5. Lịch sử nghiên cứu

Responsive là công nghệ thiết kế website thế hệ mới đang được phát triển trong

những năm gần đây, đến năm 2015, công nghệ này đã phát triển bùng nổ và trở thành một
trào lưu trong cộng đồng những nhà phát triển web cũng như doanh nghiệp.

Những công ty chuyên thiết kế web Responsive: Công ty TNHH phần mềm Việt
Nhân, công ty EC Việt Nam...

Một số website được ứng dụng công nghệ responsive: Trang web tin tức lớn nhất thế
giới BBC, trang The Google Cultural Institute, công ty Sony Việt Nam.
1.6. Đóng góp của đề tài

Xây dựng được website bán hàng điện tử trực tuyến theo cơng nghệ Responsive.
1.7. Cấu trúc đề tài
Gồm có 3 chương như sau:
Chương 1: Tổng quan về công nghệ Responsive, HTML5 và CSS3
Chương 2: Phân tích và thiết kế hệ thống website bán hàng điện tử trực tuyến
Chương 3: Xây dựng hệ thống website bán hàng điện tử trực tuyến

------------------------------------------------------------------------------------------------------------

SVTH: Trần Văn Quốc Lớp: DT12CTT01

2

Bài báo cáo “Khóa luận tốt nghiệp”
------------------------------------------------------------------------------------------------------------

Phần 2. NỘI DUNG NGHIÊN CỨU

CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ RESPONSIVE, HTML5 VÀ CSS3

1.1. Công nghệ Responsive Web Design (RWD)
1.1.1. Lịch sử ra đời của RWD

Responsive website được nhắc đến lần đầu tiên vào t̀ư năm 2010. Tuy nhiên, phải t́ơi
đầu năm 2012 thı̀ khái niệm ḿơi này ḿơi được để mắt và tiếp cận. Đó là những kỹ thuật
ḿơi được quan tâm, tạo ra một xu hứơng và đã được rất nhiều website thực hiện thành
công.

Responsive Web Design (thiết kế web đáp ứng linh hoạt) ta có thể hiểu là nó như là
một dạng chuẩn, một xu hướng thiết kế mới. Nguyên nhân xuất phát từ việc cùng với sự
phát triển của khoa học công nghệ, các nhà sản xuất trên thế giới cũng không ngừng ra
mắt các sản phẩm thiết bị di động, tablet với đa dạng về độ rộng của màn hình, độ phân
giải…Và để đáp ứng việc thay vì khơng thể nào kịp với việc ứng với mỗi thiết bị di động
có kích cỡ màn hình phân giải khác nhau lại xây dựng một phiên bản cho nó. Điều khơng
thể với khoảng cách lớn về sự phát triển là lý do mà Responsive Web Design xuất hiện.

Nó là sự kết hợp linh hoạt bởi các kỹ thuật flexible grid, responsive image và CSS
media query…để từ đó chỉ với duy nhất một thiết kế website nhưng tương thích ở mọi
chế độ màn hình khác nhau của các thiết bị di động, tablet nhờ sự tự thay đổi co giãn hiển
thị với mọi chế độ.

Hiện nay, cách thức mà Responsive Web Design hoạt động là do những lập trình viên
viết code mà ở đó thiết lập những giá trị quy định để trình duyệt hiểu rồi tự động thực thi
để tương thích với những quy định đó tuy theo kích thước của trình duyệt. Responsive
Web Design đang được ngày càng nhiều hơn sự chú ý đối với cộng đồng phát triển
website cũng như đối với doanh nghiệp.
1.1.2. Một số khái niệm

Responsive website có thể hiểu là khái niệm về một website "phản hồi", một website
có khả năng "tự biến đổi" dựa trên môi trừơng hoạt động của chúng. Cùng một website,

nhưng giao diện và phương th́ưc tương tác của website đó có thể biến đổi khi truy cập
website đó t̀ư các thiết bị khác nhau như điện thoại, ipad, tablet, laptop...

Responsive Web Design là kiểu mẫu phong cách thiết kế với giao diện, bố cục
website thể hiện đẹp, mang tính thẩm mỹ với độ hiển thị nội dung co giãn phù hợp trên tất
cả các màn hình thiết bị như desktop, laptop, tablet, smartphone và duy trì sự hiển thị nội
dung nhất quán thẩm mỹ trên mọi chế độ phân giải, linh hoạt trong chuyển dữ liệu sang
dạng ngang hoặc đứng một cách nhanh chóng và tiện lợi.

------------------------------------------------------------------------------------------------------------

SVTH: Trần Văn Quốc Lớp: DT12CTT01

3

Bài báo cáo “Khóa luận tốt nghiệp”
------------------------------------------------------------------------------------------------------------

 Hiểu một cách đơn giản Web Responsive là phong cách thiết kế website làm sao cho
phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình.
1.1.3. Những ưu thế của Responsive Web Design
 Thân thiện với người dùng

Thiết kế đáp ứng rõ ràng sẽ khiến trang web trở nên thân thiện với người sử dụng bởi
nó có thể “vừa vặn” với bất kỳ màn hình nào của hầu hết các thiết bị. Ngày nay, công
nghệ phát triển không ngừng, smartphone không hề xa lạ với con người. Vì vậy nếu có
một trang web áp dụng giải pháp này, mọi người sẽ ln có khả năng kết nối với trang
web một các hiệu quả nhất.

Với Responsive website sẽ được xử lý nhanh hơn khi người dung truy cập website

những thiết bị di động. Giao diện website được thiết kế tập trung hiển thị cho người dùng
những nội dung quan trọng nhất, tất cả đều được thu gọn trong màn hình của thiết bị, giờ
đây khách hàng truy cập website không phải mất thời gian để điều chỉnh kích thước,
phóng to nội dung để có thể xem rõ hơn. Có responsive website sẽ thật sự trở nên chuyên
nghiệp và hiệu quả.

Đối với website một cột hay nhiều cột thì Responsive Web Design hiển thị vô cùng
ấn tượng. Và thiết kế hiện đại theo xu hướng 2014 và tương lai là flat và trải rộng full
màn hình với các hiển thị theo từng dịng phẳng.
 Có lợi tại phân khúc dành cho điện thoại di động

Nhờ có Responsive web design, có thể tính được tồn bộ số lượt người truy cập trong
một trang web. Có thể có được tất cả các thông tin cần thiết liên quan đến lượt người truy
cập trang web bởi vì giờ đây người dùng trên di động cũng được tính lượt truy cập. Do
đó, lượng người truy cập được tính tốn chính xác sẽ rất hiệu quả cho việc phân tích, đánh
giá chất lượng của trang web hoặc nâng cấp nó.
 Nâng cao khả năng chia sẻ

Responsive web design cũng cho người chủ trang web cơ hội để thu thập tất cả những
chia sẻ của các mạng xã hội chỉ với một đường dẫn URL. Nó sẽ cho phép chúng ta có
những đóng góp hay hơn cho trang web, gần gũi hơn với người dùng.
+ Không phải lo về đổi hướng người dùng

Các lập trình viên sẽ không phải tạo những liên kết ngược hay đổi hướng cho người
dùng điện thoại nữa. Hẳn nhiên là trang web sẽ dễ dàng xuất hiện trên các công cụ tìm
kiếm hơn.
+ Ít phải bảo dưỡng hơn

Phát triển một trang web riêng cho điện thoại di động là thì chúng ta phải bỏ cơng duy
trì cả hai trang web. Nhưng nếu chúng ta chọn Responsive web design, sự bảo hành cho

------------------------------------------------------------------------------------------------------------

SVTH: Trần Văn Quốc Lớp: DT12CTT01

4

Bài báo cáo “Khóa luận tốt nghiệp”
------------------------------------------------------------------------------------------------------------

trang web sẽ rất nhỏ vì chỉ có duy nhất một bản thiết kế cho mọi thiết bị. Điều này sẽ làm

giảm khối lượng cho công việc.

1.1.4. Khả năng ứng dụng Responsive Web Design hiện nay

Vài năm trở lại đây, các ngôn ngữ lập trı̀nh phục vụ cho việc thiết kế website cũng có
những bứơc tiến đáng ngạc nhiên. Các ngôn ngữ lập trı̀nh cập nhật phiên bản ḿơi cho
phép khai thác nhiều tı́nh năng hơn, cung cấp nhiều công cụ hơn cho các lập trı̀nh viên.
HTML5, CSS3, PHP6... ngày càng đượć ưng dụng nhiều hơn trên các website.

Trước đây khoảng 2 năm, để thiết kế một website, lập trình viên thừơng lựa chọn màn
hı̀nh tiêu chuẩn 1024x768 (độ phân giải màn hı̀nh phổ biến trứơc đây) cho máy tı́nh thông
thừơng hay 320x240 cho các điện thoại di động. Website cho máy tı́nh thông thừơng
được thiết kế riêng, website cho điện thoại di động được thiết kế riêng vı̀ những giới hạn
này. Một số công ty chọn giải pháp là viết phần mềm cho các điện thoại di động ch́ư
không thiết kế website b̉ơi sự bất tiện khi lứơt web trên điện thoai di động.

Nhưng hiện nay, màn hı̀nh máy tı́nh thừơng là màn rộng lớn, v́ơi độ phân giải phổ
biến 1366x768, và độ phân giải này cũng đang có xu hứơng nâng cao thêm. Các điện

thoại cũng có độ phân giải rất ĺơn so v́ơi trứơc đây, và khá phong phú: 720x1280,
480x800... Các thiết bị di động tablet mới cũng có đợ phân giải khơng đờng đều:
1024x600, 1024x768,2048×1536... Điều này làm cho việc thiết kế giao diện website tr̉ơ
nên khó khăn hơn, do rất khó để tı̀m ra được một quy chuẩn chung. Chı́nh điều này cũng
thôi thúc sự phát triển của Responsive web design tạo một website có thể thı́ch́ ưng v́ơi tất
cả các độ phân giải màn hı̀nh.

Công nghệ Responsive Web Design có thể nhận diện được thiết bị đang truy cập là
máy tı́nh bảng Ipad hay điện thoại di động thông dụng và trả về giao diện tự động hợp lý
và dễ s̉ư dụng nhất.

Responsive Web Design còn có thể xác định được độ phân giải đưa ra giao diện và
hı̀nh ảnh không bị méo mó hay vỡ giao diện.Và có thể tự động loại bỏ những hı̀nh ảnh
,slide… được phép hiển thị hay không ?. Để thiết bị có thể tải website nhanh nhất và dễ
s̉ư dụng nhất trên những thiết bị có màn hı̀nh hạn chế và tốc độ yếu.
1.1.5. Cơ chế hiển thị đáp ứng thiết bị người dùng

Khi nhận một yêu cầu vào website do người dùng gửi tới, máy chủ chứa website sẽ

phân tích xem người dùng đang sử dụng loại thiết bị gì và trình duyệt web gì và dựa vào

đó gửi xuống một file trình bày kiểu (style sheet) tương ứng. File style sheet này sẽ quyết

định việc hiển thị nội dung web theo cách phù hợp nhất với màn hình của thiết bị và

khung nhìn khiến cho người dùng có được một trải nghiệm thân thiện nhất.

Ta có thể minh họa như sau:

------------------------------------------------------------------------------------------------------------

SVTH: Trần Văn Quốc Lớp: DT12CTT01

5

Bài báo cáo “Khóa luận tốt nghiệp”
------------------------------------------------------------------------------------------------------------

Để nhận biết thiết bị nào đang truy cập vào trang web, người ta có rất nhiều cách. Thứ
nhất, mỗi trình duyệt đều có một chuỗi kí tự cụ thể để xác định tên, bộ nguồn dựng trang
của chính nó. Các website được phép đọc chuỗi này để biết được rằng người dùng đang
dùng trình duyệt nào, thậm chí là thiết bị nào, tên gì để vào web. Ví dụ, UserAgent của IE
10.0 là: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0),
còn của Safari trên iPad là: Mozilla/5.0(iPad; CPU OS 6_0 like Mac OS
X)AppleWebKit/536.26 (KHTML, like Gecko)Version/6.0 Mobile/10A5355d
Safari/8536.25.

Khi biết được máy nào đang truy cập website, người ta có thể dễ dàng xác định kích
cỡ màn hình và nhiều thơng tin khác liên quan đến thiết bị, từ đó dùng mã tinh chỉnh lại
bố cục web ngay khi người dùng mới truy cập vào. Khi bạn truy cập vào một số trang
web nhất định, nó cũng dùng UserAgent để biết bạn đang dùng máy nào và đưa ra đề xuất
tương ứng (ví dụ, vào bằng máy
Macbook thì nút download là dành cho Macbook, vào bằng máy Windows thì nút
dowload lại cho phép tải file exe của Windows).

Ngoài ra, việc nhận biết thiết bị cịn có thể được tích hợp vào ngay trong file CSS và
đây là cách mà người ta thường dùng. Nhà thiết kế web có thể đặt ra các “luật”, ví dụ như
nếu thiết bị truy cập vào web có độ phân giải chiều ngang thấp hơn 700px thì khơng tải
thành phần A, sắp xếp lại thành phần B và C. Cịn nếu thiết bị có màn hình từ 700px trở
lên, thành phần A sẽ xuất hiện, B và C giữ nguyên vị trí ban đầu.

Ở phần này chúng ta sẽ tìm hiểu về “Media Query”.
Media Query là cú pháp của CSS3 giúp ta có thể phân các đoạn CSS chúng ta ra
nhiều phần khác nhau tương ứng với kích thước của các loại thiết bị. Kích thước chúng ta
đang cần phân chia chính là độ rộng của màn hình.
Cú pháp của Media Query như sau:

- @media screen and (max-width: “kích thước lớn nhất mà chúng ta xét(px)”){
Kiểu CSS hiển thị.

}
- @media screen and (max-width: “kích thước lớn nhất mà chúng ta xét(px)”){

Kiểu CSS hiển thị.
}
Để hiểu rõ hơn về cơ chế hiển thị đáp ứng thiết bị người dùng chúng ta sẽ đi vào phần
Demo trang web bán hàng điện tử như sau:
+ Đối với màn hình có giá trị cao nhất là 1200px:
@media (max-width: 1200px) {
.span4 {

------------------------------------------------------------------------------------------------------------

SVTH: Trần Văn Quốc Lớp: DT12CTT01

6

Bài báo cáo “Khóa luận tốt nghiệp”
------------------------------------------------------------------------------------------------------------

width: 300px;
}
}
Thì trang web sẽ hiển thị:
+ Phần hình ảnh sản phẩm thu nhỏ với giá trị chiều rộng là 300px…vv:

Hình1.1 Hình Ảnh sản phẩm thu nhỏ kích thước lớn

------------------------------------------------------------------------------------------------------------

SVTH: Trần Văn Quốc Lớp: DT12CTT01

7

Bài báo cáo “Khóa luận tốt nghiệp”
------------------------------------------------------------------------------------------------------------

+ Tin cơng nghệ sẽ hiển thị thành 3 cột hình lớn:

Hình 1.2 Hình ảnh tin cơng nghệ 3 cột lớn

+ Đối với màn hình thiết bị từ 767px đến 979px
@media (max-width: 979px) {
body {
padding-left:0;
padding-right:0;
}
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
margin-left: 0px;

margin-right: 0px;

}
.navbar .nav > li > a {

line-height: 20px;
vertical-align: middle;

------------------------------------------------------------------------------------------------------------

SVTH: Trần Văn Quốc Lớp: DT12CTT01

8

Bài báo cáo “Khóa luận tốt nghiệp”
------------------------------------------------------------------------------------------------------------

}
.section {

padding-left:20px;
padding-right:20px;
}
.nav-collapse .nav {
float: none;
margin: 0 0 10px;
}
.nav-collapse .nav > li {
float: none;
}

.nav-collapse, .nav-collapse.collapse {
width: 100%;
display: inherit;
clear: both;
}
.thumbnail .more {
margin-left:-21px;
width:40px;
height:40px;
border-radius:30px;
line-height: 40px;
}
.thumbnail:hover .more {
margin-top:-20px;
}
.newsletter form {
text-align:center;
}
.project-infoinfo span {
width: 154px;
display: inline-block;
margin-top: 12px;
color: gold;
font-size: 25px;

------------------------------------------------------------------------------------------------------------

SVTH: Trần Văn Quốc Lớp: DT12CTT01

9

Bài báo cáo “Khóa luận tốt nghiệp”
------------------------------------------------------------------------------------------------------------

margin-left: 22%;
}
.project-infoinfo div {
margin-bottom: 3px;
font-size: 14px;
}
.popup-inner{

top:60%;
}
.span4 {
width: 228px;
}
}
Thì các thành phần sẽ bị thay đổi như:
+ Phần nội dung( thẻ .body), phần menu( .navbar-fixed-top, .navbar-fixed-bottom)... và
hình ảnh sản phẩm thu nhỏ khi đó sẽ có giá trị chiều rộng là 228px…vv

Hình 1.3 Hình ảnh sản phẩm thu nhỏ

------------------------------------------------------------------------------------------------------------

SVTH: Trần Văn Quốc Lớp: DT12CTT01

10

Bài báo cáo “Khóa luận tốt nghiệp”
------------------------------------------------------------------------------------------------------------

+ Tin công nghệ sẽ hiển thị 3 cột giống màn hình lớn hơn 1200px nhưng kích thước
nhỏ hơn:

Hình 1.4 Hình ảnh tin cơng nghệ 3 cột

------------------------------------------------------------------------------------------------------------

SVTH: Trần Văn Quốc Lớp: DT12CTT01

11

Bài báo cáo “Khóa luận tốt nghiệp”
------------------------------------------------------------------------------------------------------------

+ Form đặt hàng sẽ hiển thị 2 cột:

Hình 1.5 Hình ảnh form đặt hàng 2 cột

+ Đối với màn hình nhỏ hơn767px:

@media (max-width: 767px) {

body {

padding-right: 20px;

padding-left: 20px;

}

.info-mail {

width:90%;

padding:15px 0px;

}

.project-description {

------------------------------------------------------------------------------------------------------------

SVTH: Trần Văn Quốc Lớp: DT12CTT01

12

Bài báo cáo “Khóa luận tốt nghiệp”
------------------------------------------------------------------------------------------------------------

padding-left:20px;
}
.row-fluid {

width: 100%;
}
.row,
.thumbnails {

margin-left: 0;
}
.thumbnails > li {

float: none;
margin-left: 0;
}
[class*="span"],
.uneditable-input[class*="span"],
.row-fluid [class*="span"] {
display: block;
float: none;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.span12,
.row-fluid .span12 {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
.input-large,

.input-xlarge,

------------------------------------------------------------------------------------------------------------

SVTH: Trần Văn Quốc Lớp: DT12CTT01

13

ỨNG DỤNG RESPONSIVE VÀO TRONG XÂY DỰNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN VỚI HTML5 VÀ CSS3 - Full 10 điểm

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về