Bài tập lớn môn Ngôn Ngữ Thiết kế Web

Bài tập lớn môn: Ngôn Ngữ Thiết kế Web Mục lục Nguyễn Văn Quân – 13A1 –HTML 1 Bài tập lớn môn: Ngôn Ngữ Thiết kế Web Phần 1: Đặt vấn đề Ngày nay, với sự phát triển mạnh mẽ của khoa học-kỹ thuật, đặc biệt là Công nghệ thông tin. Công nghệ thông tin đang có những bước phát triển mạnh mẽ theo cả chiều sâu và chiều rộng. Các loại thiết bị điện tử đang dần trở nên quen thuộc hơn với con người, nó trở thành là một công cụ làm việc và giải trí thông dụng của con người. Công nghệ thông tin đã và đang thay đổi thế giới một cách nhanh chóng và từng bước kéo nền tri thức của nhân loại xích lại gần nhau hơn. Đó là nhờ vào việc phát triển hệ thống website trên toàn thế giới. Website đã đóng một vai trò quan trọng đối với con người chúng ta từ giải trí, thương mại, giáo dục đến quân sự, nhà nước. Website sẽ dần dần thay thế những phương thức kinh doanh cũ trong các doanh nghiệp bởi tính ưu việt mà webbsite mang lại như: nhanh hơn, rẻ hơn, tiện dụng hơn và không bị giới hạn không gian và thời gian. Xuất phát từ nhu cầu thực tế hiện nay của thị trường nên em chọn đề tài xây dựng website bán hàng điện tử: Laptop, điện thoại, máy tính bảng…nhằm tạo ra hệ thống bán hàng có tính thực tế và ứng dụng cao trong cuộc sống. 1) Lý do chọn đề tài - Nhu cầu của thị trường hiện nay tăng cao về các mặt hàng điện tử, đặc biệt là các mặt hàng như: laptop, điện thoại, máy tính bảng. - Ở các nước phát triển thì việc xây dựng các website thương mại chưa bao giờ là lỗi thời, bởi nhu cầu các mặt hàng đó luôn tăng và ổn định. - Xem xét vào tình hình thực tế hiện tại ở trong và ngoài ngước thì việc xây dựng website thương mại, bán hàng điện tử là một quyết định đúng đắn. - Bởi em là là một người đam mê công nghệ và sẽ dễ dàng hơn khi thiết website bán mặt hàng điện tử như: Laptop, điện thoại, máy tính bảng… 2) Các chức năng cần đạt được - Website mang tính thẩm mỹ cao, phù hợp với nguyện vọng của mọi người. - Bắt kịp với sự phát triển của thời đại, mang lại doang thu lớn cho công ty, cửa hàng, đơn vị chủ quản. - Tăng tính thuận tiện, nhanh chóng, đem lại nhiều sự lựa chọn cho khách hàng, như một cầu nối kết giữa các công ty với khách hàng. Nguyễn Văn Quân – 13A1 –HTML 2 Bài tập lớn môn: Ngôn Ngữ Thiết kế Web - Tạo ra một website hỗ trợ việc tổ chức bán và mua hàng trực tuyến, hoạt động trên môi trường internet có hiệu quả, độ chính xác cao và xác thực với thực tế. - Làm tiền đề để xây dựng các website bán hàng tiếp theo. Phần 2 – Nội dung I – Cơ sở lý thuyết - Trong bài có bổ sung thêm các kiến thức về javascript như form mua hàng hay form tìm kiếm… II - Cấu trúc thiết kế website - Số lượng trang: 1 Trang chủ và 68 trang con ( 5 trang menu ngang trên, 5 trang menu ngang dưới, 8 trang menu dọc, 12 trang điện thoại, 8 trang laptop, 6 trang phụ kiện, 6 trang máy tính bảng, 3 trang con chi tiết của tin tức, 14 trang con chi tiết ở trang chủ). - Độ sâu nhất của website: 3 mức. - Gam màu chủ đạo: Xanh dương(#1E90FF), trắng và một số màu khác. 1) Sơ đồ phân cấp các liên kết website Nguyễn Văn Quân – 13A1 –HTML 3 PinSạcPK khácThẻ nhớBao daTai ngheHPAsusLenovoDellAppleSonyAcer Samsun g Điện thoại Mua từ xa Máy tính bảng Phụ kiện Mua trả góp Liên hệ Laptop Khuyến mại Trang chủ Bài tập lớn môn: Ngôn Ngữ Thiết kế Web 1) Nguyễn Văn Quân – 13A1 –HTML 4 Bảo hành Tin tức Tin tức 3 Tin tức 2 Tin tức 1 LG Q-mobile HTC Phillips Lenovo Oppo Nokia Asus Sony Apple Samsung BlackBerry Samsung LG Dell Acer Lenovo Asus Bài tập lớn môn: Ngôn Ngữ Thiết kế Web 2) Ý tưởng thiết kế của từng trang  Trang web làm về bán hàng điện tử nên hướng đến mọi đối tượng, trong đó đa phần là giới trẻ, những người yêu công nghệ. - Trang chủ: Giới thiệu cho khách hàng những loại sản phẩm tiêu biểu của công ty. Khách hàng có thể xem chi tiết khi click vào chi tiết. - Laptop: Đưa ra tất cả những dòng sản phẩm là laptop để khách hàng có thể xem. - Điện thoại: Đưa ra tất cả những dòng sản phẩm là điện thoại để khách hàng có thể xem. - Máy tính bảng: Đưa ra tất cả những sản phẩm là máy tính bảng để khách hàng có thể xem. - Phụ kiện: Đưa ra tất cả những dòng sản phẩm là phụ kiện để khách hàng có thể xem. - Khuyến mãi: Đưa ra những chương trình khuyến mãi của các dòng sản phẩm. - Tin tức: Đưa ra những tin tức nống hổi, mới nhất về các loại sản phẩm. - Liên hệ: Để khách hàng có thể gửi những ý kiến phản hồi về cho cửa hảng để cửa hàng phát huy hoặc cố gắng loại bỏ những mặt chưa được, chưa vừa ý khách hàng. - Bảo hành: Là các dịch vụ hậu mãi sau khi khách hàng mua sản phẩm của cửa hàng, ở đây khách hàng có thể xem các chính sách về bảo hành của cửa hàng. - Mua từ xa: Là dịch vụ mua hàng từ xa của cửa hàng dành cho những người không thích đi xa hoặc bận làm việc có nhu cầu mua hàng tại nhà. Tại đây khách hàng có thể xem chính sách mua hàng của cửa hàng để hưởng những ưu đãi dành cho những đối tượng khách hàng từ xa. III – Giao diện chính và chi tiết các trang con * Dưới đây là giao diện của trang chủ và một số trang con cơ bản. 1) Giao diện trang chủ Nguyễn Văn Quân – 13A1 –HTML 5 Bài tập lớn môn: Ngôn Ngữ Thiết kế Web - Trang chủ là trang chính của website. Bố cục trang được chia làm 4 phần rõ ràng. +) Phần 1 ( phần header ): Bao gồm có tên website, ô tìm kiếm và khẩu hiệu của công ty. Phần header có độ cao 190px, độ rộng 980px. Màu sắc chủ đạo là màu trắng kết hợp với tên logo và ô tìm kiếm màu xanh dương. Nguyễn Văn Quân – 13A1 –HTML 6 Bài tập lớn môn: Ngôn Ngữ Thiết kế Web +) Phần 2 ( Phần menu ngang ): là thanh menu ngang ở trên và dưới website được thiết kế có độ rộng bằng nhau. có độ cao 30px, độ rộng 980px. Màu sắc chủ đạo là màu xanh dương. +) Phần 3 ( Phần body ): Là nội dung chính của trang chủ. Được chia làm 2 phần nhỏ hơn. Phần bên trái có độ rộng 200px là các công cụ hỗ trợ điều hướng như menu dọc, công cụ lọc hay hỗ trợ trực tuyến…Phần bên phải có độ rộng 780px là phần nội dung chính nơi trưng bày những dòng sản phẩm tiêu biểu của công ty. Màu sắc chủ đạo của phần này là nền màu trắng kết hợp với màu xanh. +) Phần 4 ( Phần footer ): Có độ rộng là 980px, độ cao là 150px. Là nơi cung cấp các thông tin như bản quyền, địa chỉ công ty Màu sắc chủ đạo của phần này là màu xanh dương. 2) Giao diện trang tin tức Nguyễn Văn Quân – 13A1 –HTML 7 Bài tập lớn môn: Ngôn Ngữ Thiết kế Web - Trang tin tức nhìn chung vẫn lấy khung từ trang chủ. Tuy nhiên phần nội dung có khác đôi chút. +) Có các mục về tin tức. +) Có các hình ảnh minh họa cho tin tức đó. +) Có các dòng tin tức cơ bản. 3) Giao diện trang chi tiết sản phẩm Nguyễn Văn Quân – 13A1 –HTML 8 Bài tập lớn môn: Ngôn Ngữ Thiết kế Web - Trang chi tiết sản phầm: Chia làm 3 cột. +) Cột trái là hình ảnh minh họa về sản phẩm và phụ kiện bao gồm. +) Cột giữa là khuyến mại của sản phẩm và có link mua hàng từ xa. +) Cột phải là cấu hình chi tiết của sản phẩm. 4) Giao diện trang mua hàng Nguyễn Văn Quân – 13A1 –HTML 9 Bài tập lớn môn: Ngôn Ngữ Thiết kế Web - Trang mua hàng là nơi khách hàng đăng ký mua hàng từ xa. Gồm tên trang trang, phía dưới là các mục cần điền của khách hàng khi mua sản phẩm. 5) Giao diện trang phụ kiện Nguyễn Văn Quân – 13A1 –HTML 10 [...]... /> Nguyễn Văn Quân – 13A1 –HTML 16 Bài tập lớn môn: Ngôn Ngữ Thiết kế Web Phần 3 – Kết Luận 1) Các điểm nổi bật của website:     Bố cục rõ ràng Đơn giản, thân thiện, phù hợp với nhiều đối tượng Màu sắc hài hòa, không bị lóa hay rối mắt Tiện lợi, với nhiều tiện ích ngay ở... id="banner"> Nguyễn Văn Quân – 13A1 –HTML 11 Bài tập lớn môn: Ngôn Ngữ Thiết kế Web . Bài tập lớn môn: Ngôn Ngữ Thiết kế Web Mục lục Nguyễn Văn Quân – 13A1 –HTML 1 Bài tập lớn môn: Ngôn Ngữ Thiết kế Web Phần 1: Đặt vấn đề Ngày nay, với sự. 1 LG Q-mobile HTC Phillips Lenovo Oppo Nokia Asus Sony Apple Samsung BlackBerry Samsung LG Dell Acer Lenovo Asus Bài tập lớn môn: Ngôn Ngữ Thiết kế Web 2) Ý tưởng thiết kế của từng trang  Trang web làm về bán hàng điện tử nên hướng đến mọi đối tượng,. 13A1 –HTML 5 Bài tập lớn môn: Ngôn Ngữ Thiết kế Web - Trang chủ là trang chính của website. Bố cục trang được chia làm 4 phần rõ ràng. +) Phần 1 ( phần header ): Bao gồm có tên website, ô tìm