Giá thành rẻ và được hỗ trợ rất nhiều trên mạng sẽ giúp ta nhanh chóng Thiết kếcác website bán hàng thân thiện và dễ sử dụng với người dùng.. + Trang liên hệ: Đây là trang mà khách hàng
GIỚI THIỆU CÔNG NGHỆ
HTML là gì?
HTML (Ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ chuẩn dùng để tạo và soạn thảo các tài liệu trên World Wide Web, giúp xác định cách hiển thị của một trang web trong trình duyệt.
Ngôn ngữ HTML sử dụng các thẻ và đoạn mã lệnh để hướng dẫn trình duyệt web hiển thị các thành phần của trang như văn bản và đồ họa HTML là nền tảng quan trọng để xây dựng các website, giúp trình duyệt hiểu và trình bày nội dung chính xác Các thẻ HTML đóng vai trò xác định cấu trúc và định dạng của các thành phần trên trang web, đảm bảo trải nghiệm người dùng tốt hơn.
HTML là ngôn ngữ xác định cấu trúc của thông tin.
HTML là ngôn ngữ sử dụng một loạt các thẻ và thuộc tính để hiển thị văn bản và các thông tin khác trên trang web Nó cung cấp khả năng tạo siêu liên kết, cho phép liên kết tới các tài liệu và trang web khác một cách dễ dàng Nhờ vào HTML, nội dung trên website trở nên phong phú, trực quan và dễ truy cập hơn cho người dùng.
Công dụng của HTML
Thiết kế được nội dung và hình thức của trang web.
Xuất bản được các tài liệu trực tuyến hay truy xuất các thông tin trực tuyến bằng cách dùng các liên kết được chèn vào trang web.
Tạo ra các biểu mẫu trực tuyến nhằm thu thập các thông tin người dùng, quản lý giao dịch….
Thêm vào đối tượng các hình ảnh video, âm thanh,
Định dạng của HTML
Là một tập tin có phần mở rộng là htm hoặc html
Là một tập tin văn bản thuần túy, có chứa các mã đặc biệt gọi là Tag(thẻ), thường được đặt xung quanh một khối văn bản nào đó.
Có thể viết trên nhiều trình soạn thảo: Microsoft Fontpage, notepad…và được sử dụng nhiều nhất đó là adobe dreamweaver.
2 Giới thiệu về Adobe Dreamweaver
Macromedia Dreamweaver 8 là trình biên soạn HTML chuyên nghiệp, giúp bạn thiết kế, viết mã và phát triển website cùng các ứng dụng web một cách dễ dàng và hiệu quả Phần mềm phù hợp cho cả những người yêu thích viết mã HTML thủ công và những ai thích làm việc trong môi trường biên soạn trực quan Dreamweaver cung cấp các công cụ hữu ích để nâng cao trải nghiệm thiết kế web, hỗ trợ quá trình tạo ra các trang web chuyên nghiệp và tối ưu hóa hiệu suất làm việc của nhà phát triển.
Các tính năng biên soạn trực quan trong Dreamweaver giúp bạn tạo nhanh các trang web mà không cần viết mã, nhờ vào khả năng xem và chỉnh sửa tất cả các thành phần một cách dễ dàng Tiện ích này tối ưu hóa quá trình thiết kế web, giúp người dùng dễ dàng tạo ra các trang web chuyên nghiệp mà không cần có kỹ năng lập trình Với Dreamweaver, bạn có thể quản lý các thành phần trang web một cách trực quan, nhanh chóng và hiệu quả, nâng cao năng suất làm việc của mình trong quá trình thiết kế web.
Bạn có thể tích hợp hai website của mình trực tiếp từ một panel dễ sử dụng vào văn bản để nâng cao hiệu quả công việc Để tăng tính chuyên nghiệp cho sản phẩm, bạn có thể tạo và chỉnh sửa hình ảnh trong Macromedia Fireworks hoặc các ứng dụng chỉnh sửa ảnh khác, sau đó chèn trực tiếp vào Dreamweaver Dreamweaver còn cung cấp các công cụ hỗ trợ giúp đơn giản hóa quá trình chèn Flash vào trang web của bạn, tiết kiệm thời gian và công sức.
Dreamweaver cho phép bạn thiết kế các ứng dụng web động dựa trên dữ liệu bằng các công nghệ máy chủ như CFML, ASP.NET, ASP, JSP và PHP, giúp phát triển website linh hoạt và hiệu quả Nếu bạn thích làm việc với dữ liệu XML, Dreamweaver cung cấp các công cụ hỗ trợ tạo trang XSLT, chèn file XML và hiển thị dữ liệu XML trực quan trên trang web của bạn, tối ưu hóa quá trình phát triển nội dung số.
Dreamweaver có khả năng tùy biến cao, cho phép bạn tạo các đối tượng và yêu cầu riêng, chỉnh sửa phím tắt để tối ưu hóa công việc Bạn có thể mở rộng chức năng của Dreamweaver bằng cách viết mã JavaScript, giúp thêm các hành vi mới, chuyên môn về Property và báo cáo site tùy chỉnh Điều này giúp nâng cao hiệu quả phát triển web và phù hợp với nhu cầu cá nhân hoặc doanh nghiệp.
CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML, …
CSS cung cấp nhiều thuộc tính trình bày đa dạng cho các đối tượng, cho phép người dùng sáng tạo trong việc kết hợp các thuộc tính để tối ưu hiệu quả thiết kế Việc sử dụng linh hoạt các thuộc tính CSS giúp tạo ra các giao diện hấp dẫn, chuyên nghiệp và phù hợp với mục đích sử dụng Nhờ đó, trình duyệt trở nên linh hoạt hơn trong việc thể hiện nội dung, nâng cao trải nghiệm người dùng Các thuộc tính CSS không chỉ giúp bố cục rõ ràng hơn mà còn tối ưu hóa khả năng tương thích trên nhiều thiết bị khác nhau Tối ưu hoá bộ thuộc tính này mang lại hiệu quả cao trong việc thiết kế web chuyên nghiệp và sáng tạo.
CSS đã được hỗ trợ bởi tất cả các trình duyệt và hiển thị “như nhau” trên mọi hệ điều hành.
CSS cho phép áp dụng các định dạng từ một file CSS bên ngoài, giúp quản lý dễ dàng và hiệu quả hơn khi xây dựng website lớn với hàng trăm trang hoặc khi cần thay đổi thuộc tính trình bày của nhiều trang cùng lúc Việc sử dụng file CSS ngoài góp phần tối ưu hoá quá trình duy trì, nâng cao tính đồng bộ và giảm thiểu công sức chỉnh sửa trong quá trình phát triển website Đây là phương pháp tối ưu cho các dự án web đòi hỏi sự linh hoạt và dễ quản lý về mặt thiết kế giao diện.
CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.
Với HTML chỉ biểu diễn thông tin chứ chưa phải là các trang Web động có khả năng đáp ứng các sự kiện từ phía người dùng.
Hãng Netscape đã phát triển ngôn ngữ script có tên là LiveScript để thực hiện các chức năng tương tác trên trình duyệt Sau đó, ngôn ngữ này được đổi tên thành JavaScript nhằm tận dụng độ phổ biến và tính ứng dụng của ngôn ngữ lập trình Java JavaScript nhanh chóng trở thành ngôn ngữ lập trình web phổ biến nhất, đóng vai trò quan trọng trong việc tạo ra các trang web động và tương tác cao.
JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn.
JavaScript là ngôn ngữ lập trình dựa trên đối tượng, bao gồm nhiều kiểu đối tượng như Math với các chức năng toán học phong phú Tuy nhiên, JavaScript không phải là ngôn ngữ hướng đối tượng truyền thống như C++ hoặc Java.
SVTH: PHAN THẾ NHỰT – LỚP D18PM03 4
GIAO DIỆN CHƯƠNG TRÌNH
Giao diện trang chủ
Mục đích: Chức năng này cho phép người dùng xem danh sách Sản Phẩm nổi bật và mới nhất.
Trong giao diện cho người dùng, chọn kiểu hiển thị từng theo Loại Sản Phẩm.
Mô tả chức năng: Trang này cho phép người dùng xem thông tin sản phẩm ngoài ra còn có thể sử các menu dọc, ngang để sang trang khác,
Hình 1.1.1.1 Giao diện trang chủ
Trang web được chia làm 7 phần:
- Phần 1: Logo của trang web.
Phần 2 - Menu ngang gồm các mục chính như trang chủ, danh mục, thương hiệu, tìm kiếm, đăng ký và đăng nhập, giúp người dùng dễ dàng truy cập các nội dung khác nhau trên website Mỗi mục trong menu liên kết đến một trang riêng biệt với nội dung phù hợp, tăng tính thuận tiện và tối ưu trải nghiệm người dùng Menu ngang là phần quan trọng trong thiết kế giao diện web, đóng vai trò quan trọng trong việc điều hướng và nâng cao khả năng tìm kiếm thông tin Việc bố trí các mục rõ ràng, hợp lý giúp cải thiện SEO và giữ chân khách truy cập lâu hơn trên trang của bạn.
- Phần 3: Hình chạy bằng lệnh carousel in bootstrap.
- Phần 4: Bên trái là danh mục các sản phẩm, thương hiệu được liên kết với các trang khác nhau và lịch ngày tháng năm.
- Phần 5: Bên phải hiển thị sản phẩm bán nhiều nhất.
- Phần 6: Ở giữa chứa các sản phẩm nổi bật và mới nhất được liên kết với trang chi tiết sản phẩm.
SVTH: PHAN THẾ NHỰT – LỚP D18PM03 6
Giao diện trang đăng ký
Mục Đích: Người dùng đăng ký tài khoản để trở thành khách hàng của trang.
Chức năng: Cho phép khách hàng có thể đăng ký thông tin để trở thành khách hàng.
Hình 1.1.1.2 Giao diện trang đăng ký
Giao diện trang đăng nhập
Mục Đích: Người dùng đăng nhập tài khoản để đặt mua sản phẩm của trang.
Hình 1.1.1.3 Giao diện trang đăng nhập
Giao diện trang danh mục sản phẩm
SVTH: PHAN THẾ NHỰT – LỚP D18PM03 8
Thanh menu chứa danh sách các loại sản phẩm của cửa hàng, giúp khách hàng dễ dàng tìm kiếm và lựa chọn sản phẩm phù hợp Đây là công cụ tiện lợi để khách hàng nhanh chóng truy cập vào các danh mục sản phẩm mong muốn Mục đích của thanh menu là nâng cao trải nghiệm người dùng và tối ưu hóa quá trình mua sắm trực tuyến.
Sử dụng danh mục sản phẩm để chọn loại sản phẩm mà mình cần.
Hình 1.1.1.4 Giao diện trang danh mục sản phẩm
Giao diện sản phẩm trái cây nổi bật
Hình 1.1.1.5 Giao diện trái cây nổi bật
SVTH: PHAN THẾ NHỰT – LỚP D18PM03 10
Giao diện mua hàng
Hình 1.1.1.6 Giao diện mua hàng 1.6.1 Giao diện mua hàng trái dâu tây
Hình 1.1.1.7 Giao diện mua hàng trái dây tây
1.6.2 Giao diện mua hàng trái chuối
Hình 1.1.1.8 Giao diện mua hàng trái chuối
1.6.3 Giao diện mua hàng trái dưa hấu
Hình 1.1.1.9 Giao diện mua hàng trái dưa hấu
SVTH: PHAN THẾ NHỰT – LỚP D18PM03 12
1.6.4 Giao diện mua hàng trái măng cụt
Hình 1.1.1.10 Giao diện mua hàng trái măng cụt 1.6.5 Giao diện mua hàng trái sầu riêng
Hình 1.1.1.11 Giao diện mua hàng trái sầu riêng
1.6.6 Giao diện mua hàng trái xoài
Giao diện trang chi tiết sản phẩm
Mục đích: Chức năng này cho phép người dùng xem Tên sản phẩm, giá, thông tin chi tiết về sản phẩm.
Trong giao diện cho người dùng, chọn hiển thị theo Sản Phẩm đã được kích chọn ở trang chủ.
SVTH: PHAN THẾ NHỰT – LỚP D18PM03 14
Hình 1.1.1.13 Giao diện trang chi tiết dâu tây
Hình 1.1.1.14 Giao diện trang chi tiết chuối
SVTH: PHAN THẾ NHỰT – LỚP D18PM03 16
Hình 1.1.1.15 Giao diện trang chi tiết dưa hấu
Hình 1.1.1.16 Giao diện trang chi tiết măng cụt
SVTH: PHAN THẾ NHỰT – LỚP D18PM03 18
Hình 1.1.1.17 Giao diện trang chi tiết sầu riêng
Hình 1.1.1.18 Giao diện trang chi tiết xoài
SVTH: PHAN THẾ NHỰT – LỚP D18PM03 20
Giao diện thanh toán
1.8.1 Giao diện thanh toán dâu tây
Hình 1.1.1.19 Giao diện thanh toán dâu tây
1.8.2 Giao diện thanh toán chuối
Hình 1.1.1.20 Giao diện thanh toán chuối
SVTH: PHAN THẾ NHỰT – LỚP D18PM03 22
1.8.3 Giao diện thanh toán dưa hấu
Hình 1.1.1.21 Giao diện thanh toán dưa hấu
1.8.4 Giao diện thanh toán măng cụt
Hình 1.1.1.22 Giao diện thanh toán măng cụt
SVTH: PHAN THẾ NHỰT – LỚP D18PM03 24
1.8.5 Giao diện thanh toán sầu riêng
Hình 1.1.1.23 Giao diện thanh toán sầu riêng
1.8.6 Giao diện thanh toán xoài
Hình 1.1.1.24 Giao diện thanh toán xoài