Tìm hiểu CSS3 và ứng dụng cài đặt website hỗ trợ bán hàng

MỤC LỤC LỜI MỞ ĐẦU CHƯƠNG I TỔNG QUAN ĐỀ TÀI 1.1 Lý chọn đề tài .5 1.2 Đánh giá thực trạng 1.3 Yêu cầu đề tài .7 1.4 Phương pháp nghiên cứu 1.5 Kết cần đạt .7 1.6 Bố cục đề tài .7 CHƯƠNG II TÌM HIỂU CSS I TỔNG QUAN CSS .9 1.1 Giới thiệu CSS .9 1.2 Một số điểm mạnh CSS 1.3 Cú pháp CSS .13 1.4 Một số thuộc tính thường dùng css 19 II TÌM HIỂU VỀ CSS3 25 2.1 Giới thiệu css3 25 2.2 Một số kĩ thuật sử dụng css3 25 2.3 Những ưu điểm, nhược điểm sử dụng kĩ thuật css3 .31 CHƯƠNG III 36 CÀI ĐẶT WEBSITE HỖ TRỢ BÁN SẢN PHẨM MÁY TÍNH - LINH KIỆN MÁY TÍNH 36 I Mục đích 36 II Ngôn ngữ cài đặt công cụ hỗ trợ xây dựng website 37 III Đặc tả yêu cầu .37 3.1 Yêu cầu chức 37 3.2 Yêu cầu phi chức 38 IV Phân tích thiết kế hệ thống 38 4.1 Mô tả hệ thống 38 4.2 Biểu đồ phân cấp chức 40 4.3 Biểu đồ luồng liệu .40 4.4 Chuẩn hóa liệu 45 4.5 Thiết kế bảng liệu 49 4.5 Thiết kế liệu hệ thống mức vật lý 54 58 V Một số giao diện website .58 5.1 Một số giao diện dành cho người dùng 58 5.2 Giao diện quản trị .66 KẾT LUẬN 67 Đánh giá chung 67 Hướng phát triển 68 TÀI LIỆU THAM KHẢO .69 LỜI MỞ ĐẦU Cùng với nhân loại bước vào kinh tế tri thức, tin học phát triển mạnh mẽ đem lại nhiều thành công rực rỡ cho xã hội, ứng dụng tin học ngày sâu vào sống người trở thành phận thiếu giới văn minh, việc nắm bắt thông tin nhiều, xác trở nên quan trọng Những khả mẻ ưu việt nhanh chóng làm thay đổi cách sống, cách làm việc, cách học tập, cách tư quan trọng cách định người Một thành tựu mạng internet phát triển bùng nổ năm gần trở thành mạnh phương tiện truyên thông có vai trò lớn xã hội, ứng dụng mạng internet trở nên thân thiện với người dân mà tỉ lệ người sử dụng internet tăng lên Việc xây dựng website phục vụ riêng cho tổ chức, công ty, chí cá nhân trở nên quen thuộc Chỉ với vài thao tác đơn giản, người trở thành chủ website giới thiệu thân, gia đình Đối với công ty doanh nghiệp, tổ chức việc xây dựng website riêng ngày trở nên cấp thiết Thông qua website thông báo, công văn, quết đinh thương hiệu đến với dân cách nhanh Với vai trò to lớn vậy, để có chất lượng dịch vụ tốt nhất, giá thành rẻ nhất, điều thúc đầy chuyên gia, nhà phát triển hàng đầu lĩnh vực công nghệ thông tin không ngừng nghiên cứu sáng tạo để phục vụ mục đích chung cách tốt Để hoàn thành đề tài này, xin chân thành cảm ơn ban giám hiệu trường Đại Học Vinh, ban chủ nhiệm khoa Công Nghệ Thông Tin, thầy cô giáo tận tình giảng dạy, trang bị cho kiến thức cần thiết năm học trường Xin gửi lời cảm ơn đến bạn bè, gia đình động viên tinh thần vật chât, đặc biệt thầy giáo Th.s Nguyễn Quang Ninh tận tình giúp đỡ hưỡng dẫn thời gian làm đề tài Mặc dù cố gắng hoàn thành đồ án phạm vi khả cho phép chắn không tránh khỏi thiếu sót Tôi mong nhận thông cảm, góp ý Thầy, Cô bạn Sinh viên thực hiện: Phạm Văn Toàn CHƯƠNG I TỔNG QUAN ĐỀ TÀI 1.1 Lý chọn đề tài Ngày nay, không phủ nhận vai trò tin học lĩnh vực khoa học kĩ thuật đời sống xã hội Tin học ứng dụng nhiều công tác quản lý, phục vụ vui chơi giải trí, nghiên cứu khoa học, đặc biệt mạng internet ngày có hàng chục triệu người truy cập sử dụng Bởi vậy, nhà phát triển, chuyên gia hàng đầu lĩnh vực công nghệ thông tin không ngừng nghiên cứu, xây dựng nhằm đưa sản phẩm tốt nhất, có giá thành thấp lĩnh vực ứng dụng tin học vào đời sống Và việc vận dụng nghiên cứu vào thực tế trở nên quan trọng nhằm đưa công nghệ vào sống cách nhanh Ứng dụng thương mại điện tử phát triển rầm rộ năm gần giới khu vực, không phủ nhận vai trò đời sống Ở Việt Nam bắt đầu ứng dụng thương mại điện tử vài năm gần thực chưa phát triển mạnh nước khu vực giới, để thương mại điện tử đến gần với người dân nhiệm vụ hàng đầu nhà tin học Viêt Nam Nhận thấy tầm quan trọng chọn đề tài "tìm hiểu css3 ứng dụng cài đặt website hỗ trợ bán hàng", CSS kĩ thuật thiết kế giao diện website tổ chức W3C phát triển Các kĩ thuật chưa sử dụng rộng rãi lĩnh vực phát triển website 1.2 Đánh giá thực trạng - Ứng dụng css thiết kế giao diện website: Trong lĩnh vực công nghệ thông tin nói chung, lĩnh vực xây dựng ứng dụng website nói riêng, việc tạo sản phẩm tốt, có chất lượng đáp ứng nhu cầu đạt đạt lên hàng đầu Khi giới web đời người ta thường dùng thẻ HTML để thực việc dàn trang Việc dàn trang bao gồm chia trang web thành bảng, ô, để add text, add ảnh, kiểu chữ, màu sắc Khi mà công nghệ web ngày phát triển người ta nhận thấy việc dàn trang bảng ngày trở nên bất tiện Khối lượng mã HTML lớn với việc khó khăn kiểm soát vùng nội dung trang web lý khiến HTML ngày thất Bởi xu hướng việc dàn trang chuyển sang hoàn toàn thẻ DIV CSS ngày sử dụng nhiều kĩ thuật thiết kế trang web Trong năm trở lại đây, với đời CSS2 phát triển mạnh mẽ, hoàn toàn chiếm lĩnh vị trí số công nghệ thiết kế giao diện website Mặc dù có ưu trổi song nhiều vấn đề chưa hoàn thiện như: giảm chi phí thiết kế, giảm kích thước website nhằm tăng tốc độ tải xử lý, tính đơn giản hóa thiết kế điều quan trọng thân thiện với công cụ tìm kiếm mạng giúp việc quảng bá website tốt - Ứng dụng website thương mại điện tử: nhìn chung giới khu vực thương mại điện tử phát triển trở thành chiến lược nhiều nước Ở Việt Nam vậy, việc đưa ứng dụng website thương mại điện tử khởi sắc vài năm gần đây, song hiệu hoạt động chưa cao, dịch vụ chưa đến với người dân Nguyên nhân phần tin học hóa xã hội chưa đạt kết mong muốn, niềm tin người dân với thương mại điện tử chưa cao Song với quan tâm Đảng Nhà Nước tương không xa tin học nói chung thương mại điện tử nói riêng xã hội hóa Trong lĩnh vực xây dựng ứng dụng website giới thiệu sản phẩm bán sản phẩm qua mạng, nhìn chung nhiều quan doanh nghiệp bước đầu đạt số kết định như: website http://www.trananh.vn/ , http://hongha.asia, http://www.bachphuong.com.vn 1.3 Yêu cầu đề tài - Tìm hiểu nắm rõ kĩ thuật thiết kế giao diện trang web với CSS3 xây dựng ứng dụng website - Tìm hiểu ứng dụng website thương mại điện tử, ứng dụng kĩ thuật thiết kế trang web với CSS3 thực tế 1.4 Phương pháp nghiên cứu - Kết hợp lý thuyết với thực hành học - Tìm hiểu công nghệ web - Tìm hiểu kĩ thuật thiết kế giao diện trang web - Tham khảo quy trình hoạt động hệ thống website hỗ trợ bán hàng hoạt động 1.5 Kết cần đạt - Hiểu rõ kĩ thuật thiết kế giao diện trang web với CSS3 - Cài đặt ứng dụng website hỗ trợ giới thiệu bán sản phẩm máy tính, thể tính ứng dụng điểm mạnh kĩ thuật CSS3 thiết kế giao diện 1.6 Bố cục đề tài Nội dung đề tài gồm có chương: Chương I: Tổng quan đề tài Chương II: Tìm hiểu css3 Chương III: cài đặt website hỗ trợ bán sản phẩm máy tính- linh kiện máy tính CHƯƠNG II TÌM HIỂU CSS I TỔNG QUAN CSS 1.1 Giới thiệu CSS Công nghệ CSS đề cập W3C vào năm 1996 Theo định nghĩa W3C (World Wide Web Consortium) CSS (từ viết tắt Cascading Style Sheet tạm dịch bảng kiểu xếp chồng) ngôn ngữ giúp người thiết kế web add kiểu vào tài liệu web (như kiểu font chữ, màu sắc, khoảng cách v.v ) 1.2 Một số điểm mạnh CSS Để viết ngữ nghĩa đầy đủ, gọn gàng với dung lượng mã nguồn HTML gọn nhẹ theo trình tự tốt nhằm giúp cho máy tìm kiếm đánh số dễ dàng Mặt khác, lại áp dụng tất kiểu định dạng dàn trang mà muốn để thỏa mãn thiết kế CSS công cụ mạnh nhiều lợi Cascading Style Sheets (CSS) sử dụng rộng rãi ngày nhờ khả cho phép thiết kế nhanh, tuân thủ chuẩn HTML, dễ dàng tùy biến thay đổi trình nhanh chóng việc dàn trang Web Ngoài CSS biết đến với nhiều khả khác: CSS mang lại nhiều lợi quảng bá Web, tối ưu hóa cho máy tìm kiếm SEO/SEM Có thể tóm lược vài lợi sau: Chuyển dời nội dung quan trọng, đặt biệt phần chứa văn mà muốn đứng thứ hạng cao, phần nội dung liên quan khác Chúng ta muốn đặt phần nội dung quan trọng đầu trang, phần mã HTML Đây có lẽ điểm quan trọng việc ứng dụng CSS quảng bá Web (SEO/SEM) Nó có nhiều ảnh hưởng nhiều tới thứ hạng trang Web CSS cho phép giảm dung lượng trang, điều đồng nghĩa giảm lệ mã-nội dung (code-to-content ratio) Khi trang Web viết, trình bày giúp cho máy tìm kiếm đánh số dễ dàng nhanh nội dung trang Web Sử dụng thẻ chuẩn HTML, , , giúp cho máy tìm kiếm nhận dạng dẽ dàng nội dung quan trọng trang, thay thẻ định dạng Sử dụng thẻ HTML chuẩn , ,< a> để tạo mục menu bao gồm đường dẫn chuẩn tới thành phần quan trọng khác trang Việc giúp đường dẫn dễ dàng nhận diện máy tìm kiếm Nó giúp việc đánh số thư mục nằm sâu trang chủ hiệu Ngoài lợi ích trực tiếp kể trên, CSS mang lại nhiều lợi khác việc tối ưu hóa cho công cụ tìm kiếm chiến dịch quảng bá khác Việc tách rời nội dung phần trình bày (dàn trang), điều dễ dàng tùy biến nội dung, trình bày, thử nghiệm nhanh để tìm giải pháp tốt Webmaster thời gian để bào trì nâng cấp tài nguyên trang Điều giải phóng thời gian để tập trung vào xây dựng nội dung chiến thuật quảng bá, quảng cáo Website - Một số kĩ thuật ưu css Dàn trang với CSS Với CSS, ta di chuyển thành phần nội dung quan trọng (phù hợp với máy tìm kiếm) lên đầu trang HTML phần mã Di chuyển phần nội dung (unique text để phân biệt với duplicate content) đường dẫn quan trọng khác lên đầu trang mã giúp máy tìm kiếm tìm thấy thông tin nhanh chóng dễ dàng 10 b Bảng danh mục loại sản phẩm c Bảng sản phẩm 55 d Bảng đơn hàng e Bảng chi tiết hóa đơn 56 f Bảng khách hàng g Bảng ý kiến phản hồi h Bảng tin tức 57 i Bảng chi phí j Bảng bình chọn V Một số giao diện website 5.1 Một số giao diện dành cho người dùng a Trang chủ 58 Một số chức giao diện: - Banner thể logo thương hiệu công ty - Hiện thị menu chức như: cho phép đăng kí người dùng mới, đăng nhập tài khoản mới, liên hệ với công ty - Bảng thị số nhà sản xuất, có dòng sản phẩm sử dụng nhiều Việt Nam - Hiện thị tin tức, tin khuyễn từ công ty - Giới thiệu sản phẩm công ty - Hiện thị bảng danh mục sản phẩm - Bảng lấy ý kiến người dùng dòng sản phẩm mà họ ưa thích - Bảng hỗ trợ trực tuyến công ty với khách hàng giao tiếp qua yahoo - Bảng ước chừng giá theo ý muốn người dùng - Phần giỏ hàng, hiển thị thông tin số sản phẩm người dùng đặt mua 59 b Trình bày sản phẩm - Mỗi sản phẩm trình bày khung, thị ảnh minh họa, chi tiết giá ngày cập nhật giá Khi click chuột vào xem chi tiết thị khung chi tiết sản phẩm - Khi người dùng đưa chuột vào sản phẩm, thông tin chi tiết sản phẩm thị, người dùng tham khảo phần thông tin định đặt hàng hay xem chi tiết, bỏ qua sản phẩm 60 c Giao diện chi tiết sản phẩm Trên giao diện mô tả chi tiết sản phẩm mà người dùng chọn 61 d Đăng kí người dùng - Khung đăng kí người dùng, yêu cầu số thông tin quy định hệ thống để thành lập tài khoản e Giao diện đăng nhập 62 - Giao diện đăng nhập cho phép người dùng đăng nhập có tài khoản Sau đăng nhập hệ thống thông báo kết lần đăng nhập f Giao diện trình bày tin tức - Giao diện trình bày tất tin công ty, tin trình bày rõ ràng, với hình ảnh minh họa nội dung tóm tắt 63 g Giao diện đọc tin Trên khung giao diện thị cách trực quan từ chủ đề tin phần nội dung Phía cuối thị tin liên quan, người dùng đọc thêm tin khác 64 h Giao diện giỏ hàng Giỏ hàng cho phép thực chức đặt hàng, khách hàng cập nhật, xóa giỏ hàng i Giao diện đơn đặt hàng 65 Trên đơn hàng, yêu cầu khách hàng số thông tin đẻ thực giao dịch 5.2 Giao diện quản trị Trên giao diện này, ban quản trị thực quản lý thông tin website như, quản lý tài khoản khách hàng, xử lý đơn hàng, nhập sản phẩm mới, sửa thông tin sản phẩm, nhập tin 66 KẾT LUẬN Đánh giá chung Với phát triển mạnh mẽ nghành công nghệ thông tin nói chung, đặc biệt Internet Ngày dịch vụ trực tuyến trở nên quen thuộc sâu vào đời sống người Bởi vậy, Internet trở thành phương tiện quảng bá thương hiệu, giao lưu, giải trí phát triển mạnh thời gian gần Nhằm phục vụ mục đích chung, nhà phát triển công nghệ thông tin không ngừng nghiên cứu, phát triển nhằm đưa sản phẩm tốt Trong xu việc ứng dụng kĩ thuật trở nên cấp thiết nhằm hạ giá thành sản phẩm, nâng cao chất lượng dịch vụ nói chung Nhìn tổng thể đồ án mình, có đánh sau: - Kết đạt được: - Tìm hiểu kĩ thuật css3, nắm bắt mạnh kĩ thuật - Vận dụng mạnh, ưu điểm css3 thiết kế website - Xây dựng chức website " Giới thiệu bán máy tính linh kiện máy tính " - Xây dựng giao diện có tính thẩm mĩ cao, thân thiện với người dùng - Hiểu rõ quy trình xây dựng thành phẩm dự án website - Tích lũy nhiều kinh nghiệm cách giải vấn đề trình gặp phải - Những điều chưa đạt được: 67 - Chưa vận dụng hết mạnh CSS3 thiết kế giao diện - Trong ứng dụng xây dựng website thực chức số chức chưa chứng thực thực tế, phương thức toán giao dịch mang tính thủ công Hướng phát triển - Tiếp tục tìm hiểu vận dụng kĩ thuật css3 áp dụng vào xây dựng website, nâng cao tính thẩm mĩ, cải thiện tốc độ ứng dụng website, đưa website gần gũi với công cụ tìm kiếm mạng - Ứng dụng website " Giới thiệu bán sản phẩm máy tính - linh kiện máy tính" hoàn thành, đảm bảo chức áp dụng cho mô hình thực tế Cuối xin chân thành cảm ơn đến thấy cô khoa công nghệ thông tin tận tình dạy giỗ bảo suốt khóa học Cùng với bạn bè động viên giúp đỡ Đặc biệt quan tâm gia đình hưỡng dẫn tận tình thầy giáo Th.S Nguyễn Quang Ninh giúp hoàn thành đồ án tốt nghiệp 68 TÀI LIỆU THAM KHẢO Tống Phước Hải - Kỹ thuật lập trình PHP & MySQL - NXB Lao động Hà Nội Xây dựng ứng dụng web php&mysql - Phạm Hữu Khang - NXB Mũi Cà Mau Steven Golzer (Biên dịch Gia Việt) - Thiết kế web động với PHP – NXB Thống kê 4/2005 phân tích thiết kế hệ thống thông tin Nguyễn Văn Ba - NXB Đại Học Quốc Gia Hà Nội - 2006 Internet: http://www.w3schools.com/css/ http://www.izwebz.com http://thietkeweb.vn http://phpvn.org http://www.w3.org/Style/CSS/ http://css.maxdesign.com.au/ 69 [...]... Hiện nay mới chỉ có một số trình duyệt hiện đại hỗ trợ css3 như Safari, Chrome, Opera, trong tương lai gần IE 9 cũng hứa hẹn sẽ hỗ trợ chuẩn css3 Do tư hữu của mỗi trình duyệt, nên để thích ứng với mỗi trình duyện lại có một mã riêng biệt mặc dù cùng xử lý một chức năng, điều này làm tăng mã khi thiết kế và xử lý 35 CHƯƠNG III CÀI ĐẶT WEBSITE HỖ TRỢ BÁN SẢN PHẨM MÁY TÍNH - LINH KIỆN MÁY TÍNH I Mục... khi áp dụng cho một phần tử nào đó thì nó sẽ có hiệu ứng xoay 180 độ, và kích thước tăng lên 2 lần 30 2.3 Những ưu điểm, nhược điểm khi sử dụng kĩ thuật css3 - Ưu điểm: Trong khi thiết kế người thiết kế luôn mong muốn rằng website của mình đạt được tính thẩm mỹ cao nhất Website đẹp sẽ thu hút người xem, tạo sự hấp dẫn và cuốn hút về mặt hình thức sẽ dẫn dắt người xem tìm hiểu sâu về nội dung và tạo... viên phải sử dụng nhiều đến các đoạn mã javascript hoặc Flash, điều này sẽ làm mất rất nhiều thời gian để viết mã thêm vào đó việc load và xử lý các đoạn mã cũng tăng theo Việc sử dụng css3 trong kĩ thuật này sẽ giải quyết vấn đề một cách đơn giản hơn rất nhiều Ta xét mộ ví dụ sau, để tạo ra được hiệu ứng khi đưa chuột vào tấm hình, tấm hình sẽ bị đổi màu trong khoảng thời gian do mình đặt trước, kĩ... cho các máy tìm kiếm khi đọc mã và tìm từ khóa, gây ảnh hưởng đến mục đích quảng bá thương hiệu của website trên internet Bởi vậy kĩ thuật này ngày càng được đào thải, thay vào đó các nhà phát triển css đã cho ra đời phiên bản css2, sử dụng các thuộc tính float, clear, thì việc dàn trang trở nên đơn giản hơn, giảm tải được tính phức tạp của mã HTML và kĩ thuật này hiện nay vẫn được sử dụng rộng rãi... cong" là 2px Nếu muốn bo từng góc sử dụng dạng "-moz-border-top-radius" và tương tự Nếu dùng Firefox thì -moz còn nếu dùng Safari, Opera hay Chrome thì dùng -webkit 26 - Tạo hiệu ứng shadow: Ta có thể sử dụng kĩ thuật này đẻ tạo hiệu ứng bóng đổ cho text, cho các block, các element Trong thiết kế đôi khi có một chút hiệu ứng shadow sẽ làm cho website có chiều sâu hơn và cool hơn Ví dụ: text-shadow: 2px... thương mại điện tử, việc quảng bá và giới thiệu đến khách hàng các sản phẩm trong từng thời điểm một cách hiệu quả và kịp thời là yếu tố quan trọng góp phần đưa thương hiệu quảng bá tới đông đảo khách hàng bởi công nghệ máy tính luôn biến đổi và cập nhật Điều quan trọng là thông qua website, Nếu có sự quảng bá kịp thời và gây ấn tượng thì sẽ lấy được thiện cảm từ phía khách hàng, bởi vậy tính thẩm mĩ, sinh... cụ tìm kiếm và các chiến dịch quảng bá, ví dụ như : - Sử dụng thời gian để cung cấp thêm các nội dung mới giúp trang Web của bạn luôn có thứ hạng cao trên máy tìm kiếm - Các thay đổi lớn nhỏ và trình bày đều có tác động nhất định tới hoạt động của khác hàng Vì thế việc thay đổi phông chữ, màu nền hay các thành phần định dạng 12 khác sẽ được tiến hành nhanh chóng và đơn giản nếu chúng ta sử dụng các tệp... quảng bá thương hiệu Css3 mang lại những kĩ thuật thiết kế website trở nên nhẹ nhàng hơn, đơn giản hơn, nó mang lại nhiều ưu điểm nổi bật hơn so với những phiên bản cũ Người thiết kế sẽ không mất nhiều thời gian để đạt được điều mong muốn trong thiết kế giao diện, tránh tính rườm rà trong mã html, giảm tải được việc sử dụng các đoạn mã javascript và flash Hơn nữa sử dụng các kĩ thuật css3 giúp giảm đi... thiệu css3 CSS3 được xây dựng dựa trên các nguồn gốc của các style, selectors và cascade dựa trên phiên bản cũ của CSS 2.0 trước đó Nó cho phép thực thi thêm một số tính năng mới, bao gồm cả mới selectors, pseudo-class và các properties Bằng cách sử dụng các tính năng mới này, việc thiết kế trình bày, dàn trang trong thiết kế giao diện website sẽ trở nên dễ dàng hơn rất nhiều Ngoài ra, việc sử dụng. .. thành phần con là sidebar và maincontent được định nghĩa như là 2 ô của thành phần mẹ 25 - Tạo các hiệu ứng động: với tính năng này, việc sử dụng các đoạn mã flash, javascript trong thiết kế web để tạo nên các hiệu ứng động sẽ được loại bỏ, việc thiết kế cũng trở nên đơn giản hơn,mã HTML cũng gọn gàng hơn, nhằm giảm thời gian hoàn thành dự án và giúp website trở nên sinh động và đẹp mắt hơn Ví dụ: img ... hon thin hn v hot ng ca h thng 39 4.2 Biu phõn cp chc nng WEBSITE Khách hàng Ngi quản trị Truy cập, tìm kiếm Qun lý sn phm Đặt mua hàng Qun lý khỏch hng Đăng kí Tài khoản Qun lý n hng Cập Nhật... rừ cỏc k thut thit k giao din trang web vi CSS3 xõy dng ng dng website - Tỡm hiu ng dng website thng mi in t, v ng dng nhng k thut thit k trang web vi CSS3 thc t 1.4 Phng phỏp nghiờn cu - Kt hp... chn ti "tỡm hiu css3 v ng dng ci t website h tr bỏn hng", CSS l mt k thut thit k giao din website c t chc W3C phỏt trin Cỏc k thut ny hin cha c s dng rng rói lnh vc phỏt trin website 1.2 ỏnh