BAOCAO

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 trun 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 Để hồn thành đề tài này, tơi 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 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 tơi động viên tinh thần vật chất, đặc biệt Thầy giáo T.S Nguyễn Trung Hịa 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: Tôn Lương Bằng 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 tơi chọn đề tài "Tìm hiểu CSS3 ứng dụng cài đặt website hỗ trợ bán sản phẩm máy tính", 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ẽ, hồn tồ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 hồ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: Ứng dụng, thiết kế 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 Ngồi CSS cịn 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 code 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ệ code-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 cịn 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 code 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 code giúp máy tìm kiếm tìm thấy thơng tin nhanh chóng dễ dàng Các máy tìm kiếm thường coi trọng phần nội dung văn tìm thấy phần tệp tin mã nguồn phần cịn cuối tệp tin Vì thế, có 2000 dịng tệp tin mã nguồn mà nội dung văn quan trọng mà muốn đề cập lại nằm tận dịng thứ 1400 liệu đoán đâu nội dung quan trọng tài liệu khơng ? Máy tìm kiếm thôi, thông qua người quản trị mạng, đốn xem coi đâu phần quan trọng văn Kỹ thuật chia nhỏ mã nguồn HTML làm nhiều phần nhỏ mà vị trí chúng xác định cách độc lập tệp tin định dạng văn Thành phần HTML thông dụng hay dùng thẻ Tối ưu trang Web cho số hóa Khi xem lại ví dụ code phần trên, thấy cac thành phần navigation menu tạo thẻ chuẩn HTML danh sách
siêu liên kết Các thẻ chuẩn giúp cho đường dẫn dễ dàng tìm thấy máy tìm kiếm Và đương nhiên trang Web số hóa dễ dàng Ngược lại liên kết nằm javascript hay mã khác HTML khơng khó tìm thấy máy tìm kiếm, điều làm giảm khả đánh số trang Web Nếu khơng có ý định xây dựng menu chuẩn với CSS phần code giúp làm menu đơn giản CSS giúp làm nhiều thành phần quan trọng Website thay dùng javascript Dàn trang phần nội dung với CSS Khi sử dụng CSS cịn trình bày nội dung với ngữ nghĩa (semantic) (Ví dụ thẻ định nghĩa mức độ quan trọng đoạn văn bản), lại tùy ý hiển thị trang theo thiết kế Người thiết kế trang Web sủ dụng để định dạng tiêu đề, người nhóm lập trình lại dùng font thẻ in đậm để điền nội dung khác Một lần máy tìm kiếm đọc tài liệu cách khác so với người dùng thường Nó khơng đọc nội dung biên dịch (render) khơng hiểu thẻ font sử dụng để nhấn mạnh mức độ quan trọng tiêu đề Mặt khác cơi thẻ tiêu đề Vì việc sử dụng thẻ tiêu đề HTML chuẩn giúp văn hiểu ngữ nghĩa Giảm kích thước văn với CSS Việc sử dụng tệp tin định dạng CSS bên ngồi thay nhúng chúng trực tiếp tài liệu HTML giúp làm giảm kích thước trang Web Tệp tin nhỏ tốc độ tải trang nhanh cho người dùng đương nhiên máy truy tìm Ngoài việc phải tải xuống file HTML nhỏ tệp tin CSS cịn chia sẻ nhiều trang Web cho vào cache trình duyệt cơng cụ tìm kiếm Bởi lần tải trang trình duyệt máy tìm kiếm thấy đường dẫn CSS trùng lặp không tải xuống Số lượng trang phải tải xuống cho phép bạn tận dụng tốt “dung lượng số hóa” Tất nhiên máy tìm kiếm định trước số lượng tài nguyên (thời gian, băng thông, …) định để đánh số trang Web Nếu trang Web dung lượng nhỏ việc đánh số nhanh vấn đề nhiều trang 10