Thiết Kế Website Bán Nhạc Cụ: Hướng Dẫn và Kỹ Thuật Cần Biết

Khám phá đồ án thiết kế website bán nhạc cụ, hướng dẫn chi tiết từ ý tưởng đến triển khai, giúp tối ưu hóa trải nghiệm người dùng.

• Đề tài: Thiết Kế Website Bán Nhạc Cụ: Hướng Dẫn Chi Tiết và Kỹ Thuật

Mục lục chi tiết

• LỜI CẢM ƠN
• 1. CHƯƠNG 1: GIỚI THIỆU VISUAL STUDIO CODE
• 1.1. Giới thiệu Visual Studio Code
• 1.2. Lịch sử Visual Studio Code
• 1.3. Chức năng
• 1.4. Ứng dụng
• 2. CHƯƠNG 2: GIỚI THIỆU ĐỀ TÀI
• 2.1. Tên website
• 2.2. Mô tả website
• 2.3. Lý do chọn thiết kế website
• 2.4. Sơ đồ sitemap
• 2.5. Công nghệ sử dụng
• 2.6. Môi trường thiết kế
• 3. CHƯƠNG 3: XÂY DỰNG WEBSITE
• 3.1. Giao diện
• 3.2. Mô tả
• 3.3. Kỹ thuật thiết kế
• 3.4. Code thiết kế
• 3.5. Trang liên hệ (Contact)
• 3.6. Trang giải đáp thắc mắc (Help / FAQ)
• 3.7. Trang danh sách sản phẩm (Categories)
• 3.8. Trang giới thiệu (Who are we?)
• 4. CHƯƠNG 4: KẾT LUẬN
• 4.1. Hạn chế của đồ án
• 4.2. Hướng phát triển của đồ án
• DANH MỤC TÀI LIỆU THAM KHẢO

Tóm tắt

I. Hướng Dẫn Thiết Kế Website Bán Nhạc Cụ Từ Cơ Bản

Việc thiết kế website bán nhạc cụ không chỉ là xây dựng một gian hàng, mà là tạo ra một không gian trải nghiệm âm nhạc số. Một trang web hiệu quả phải kết hợp giữa thẩm mỹ, chức năng và khả năng tiếp cận khách hàng tiềm năng. Quá trình này đòi hỏi sự thấu hiểu sâu sắc về sản phẩm, đối tượng khách hàng và các công nghệ nền tảng. Sự thành công của một dự án phụ thuộc vào việc lập kế hoạch chi tiết ngay từ giai đoạn đầu, từ việc xác định mục tiêu kinh doanh đến việc phân tích các đối thủ cạnh tranh trên thị trường.

1.1. Tầm quan trọng của một cửa hàng nhạc cụ online

Trong bối cảnh kỹ thuật số, một cửa hàng nhạc cụ online là cầu nối thiết yếu giữa nhà cung cấp và người yêu nhạc. Nó phá vỡ mọi rào cản địa lý, cho phép doanh nghiệp tiếp cận một lượng khách hàng khổng lồ, từ người mới bắt đầu đến các nhạc công chuyên nghiệp. Khác với cửa hàng vật lý, website hoạt động 24/7, cung cấp thông tin sản phẩm chi tiết, so sánh giá cả và đánh giá từ cộng đồng một cách minh bạch. Điều này không chỉ tăng cường uy tín thương hiệu mà còn thúc đẩy doanh số bán hàng một cách bền vững thông qua các kênh marketing trực tuyến.

1.2. Xác định mục tiêu kinh doanh nhạc cụ trực tuyến

Trước khi bắt tay vào thiết kế, việc xác định mục tiêu rõ ràng là yếu tố tiên quyết. Mục tiêu có thể là xây dựng thương hiệu, tăng doanh số bán hàng, hay tạo một cộng đồng người yêu nhạc. Việc xác định rõ đối tượng khách hàng mục tiêu (ví dụ: người mới học guitar, nghệ sĩ piano chuyên nghiệp, phòng thu âm) sẽ định hướng cho toàn bộ cấu trúc và giao diện website nhạc cụ. Một chiến lược kinh doanh nhạc cụ trực tuyến thành công luôn bắt đầu bằng những mục tiêu cụ thể, có thể đo lường và thực tế, làm kim chỉ nam cho mọi quyết định về kỹ thuật và nội dung sau này.

1.3. Phân tích thị trường và các đối thủ cạnh tranh

Nghiên cứu thị trường giúp nhận diện các xu hướng hiện tại và các cơ hội tiềm năng. Việc phân tích website của đối thủ cạnh tranh cung cấp cái nhìn sâu sắc về những điểm mạnh, điểm yếu của họ. Cần chú ý đến các yếu tố như trải nghiệm người dùng (UX/UI), các tính năng web bán nhạc cụ nổi bật, chiến lược giá và chương trình khuyến mãi. Từ đó, doanh nghiệp có thể tìm ra lợi thế cạnh tranh riêng, xác định những gì cần làm tốt hơn để thu hút và giữ chân khách hàng, tạo nên sự khác biệt cho dịch vụ thiết kế web của mình.

II. Thách Thức Chính Khi Thiết Kế Website Bán Nhạc Cụ

Quá trình xây dựng một trang web bán nhạc cụ đối mặt với nhiều thách thức đặc thù. Sản phẩm nhạc cụ có giá trị cao và yêu cầu trải nghiệm cảm nhận trực tiếp, điều mà môi trường online khó có thể tái tạo hoàn hảo. Do đó, việc xây dựng lòng tin, đảm bảo an toàn giao dịch và tối ưu hóa trang web để công cụ tìm kiếm có thể "hiểu" được nội dung là những rào cản kỹ thuật và chiến lược cần được giải quyết một cách bài bản.

2.1. Thách thức trong việc tái tạo trải nghiệm người dùng UX UI

Thách thức lớn nhất là làm sao để khách hàng 'cảm nhận' được sản phẩm khi không thể chạm vào hay nghe thử trực tiếp. Một trải nghiệm người dùng (UX/UI) kém sẽ làm giảm đáng kể tỷ lệ chuyển đổi. Giao diện cần trực quan, hình ảnh sản phẩm phải sắc nét từ nhiều góc độ, và mô tả phải cực kỳ chi tiết. Đặc biệt, việc tích hợp các tính năng như demo âm thanh sản phẩm hay video review nhạc cụ trở thành yếu tố sống còn để bù đắp cho sự thiếu hụt về trải nghiệm vật lý, giúp người mua đưa ra quyết định chính xác hơn.

2.2. Vấn đề bảo mật SSL và thanh toán trực tuyến an toàn

Nhạc cụ thường có giá trị lớn, do đó an toàn trong giao dịch là ưu tiên hàng đầu. Khách hàng cần cảm thấy tin tưởng khi cung cấp thông tin cá nhân và thẻ tín dụng. Việc trang bị chứng chỉ bảo mật website (SSL) là yêu cầu bắt buộc để mã hóa dữ liệu. Hơn nữa, việc tích hợp các cổng thanh toán an toàn và uy tín sẽ giúp xây dựng niềm tin. Bất kỳ sai sót nào trong khâu thanh toán trực tuyến cũng có thể dẫn đến việc mất khách hàng vĩnh viễn và ảnh hưởng tiêu cực đến danh tiếng thương hiệu.

2.3. Khó khăn khi tối ưu SEO cho website bán sản phẩm đặc thù

Việc tối ưu SEO cho website nhạc cụ phức tạp hơn so với các mặt hàng phổ thông. Người dùng thường tìm kiếm theo tên model cụ thể, thương hiệu, hoặc các thuật ngữ kỹ thuật. Do đó, nghiên cứu từ khóa cần phải rất chi tiết, bao gồm cả các từ khóa đuôi dài. Xây dựng nội dung chất lượng như blog kiến thức âm nhạc, các bài hướng dẫn chọn đàn guitar, hay cách bảo quản piano không chỉ giúp thu hút lưu lượng truy cập tự nhiên mà còn khẳng định chuyên môn và uy tín của cửa hàng trong ngành.

III. Cách Chọn Nền Tảng Tính Năng Web Bán Nhạc Cụ Tốt

Lựa chọn nền tảng công nghệ và xây dựng các tính năng cốt lõi là bước đi chiến lược, quyết định đến khả năng vận hành và mở rộng của website trong tương lai. Một nền tảng phù hợp sẽ giúp quá trình quản lý sản phẩm, đơn hàng và khách hàng trở nên đơn giản. Đồng thời, các tính năng chuyên biệt cho ngành nhạc cụ sẽ nâng cao trải nghiệm mua sắm và tạo ra lợi thế cạnh tranh rõ rệt.

3.1. Lựa chọn nền tảng e commerce phù hợp CMS hay Code tay

Việc lựa chọn nền tảng e-commerce phụ thuộc vào quy mô và yêu cầu kỹ thuật. Các hệ quản trị nội dung (CMS) như WordPress kết hợp Woocommerce cho nhạc cụ, hoặc Shopify bán nhạc cụ là những giải pháp phổ biến, mạnh mẽ, có sẵn hệ sinh thái plugin phong phú và dễ dàng quản trị. Ngược lại, việc tự code tay mang lại sự tùy biến tối đa nhưng đòi hỏi chi phí và thời gian phát triển lớn hơn. Theo tài liệu tham khảo từ Đồ án Thiết kế web của sinh viên Đại học Nguyễn Tất Thành, việc sử dụng các công nghệ nền tảng như HTML, CSS và JavaScript để tự xây dựng là một phương pháp hiệu quả để kiểm soát hoàn toàn giao diện và chức năng.

3.2. Top các tính năng web bán nhạc cụ không thể thiếu

Một website bán nhạc cụ chuyên nghiệp cần nhiều hơn một giỏ hàng. Các tính năng web bán nhạc cụ cần có bao gồm: quản lý sản phẩm chi tiết (thông số kỹ thuật, thương hiệu, xuất xứ), bộ lọc sản phẩm thông minh (lọc theo giá, loại nhạc cụ, hãng sản xuất), và chức năng so sánh nhạc cụ. Đặc biệt, tính năng nghe thử âm thanh (audio demo) và xem video review sản phẩm là cực kỳ quan trọng để tăng cường sự tin tưởng và hỗ trợ quyết định mua hàng của người dùng. Hệ thống đánh giá, bình luận từ khách hàng cũng là một tính năng cần thiết.

3.3. Tầm quan trọng của thiết kế responsive trên mọi thiết bị

Lượng người dùng truy cập internet từ thiết bị di động ngày càng tăng. Do đó, thiết kế responsive (tương thích trên mọi kích thước màn hình) không còn là một lựa chọn mà là yêu cầu bắt buộc. Một website hiển thị tốt trên cả máy tính, máy tính bảng và điện thoại di động sẽ đảm bảo trải nghiệm người dùng liền mạch, giảm tỷ lệ thoát trang và được các công cụ tìm kiếm như Google đánh giá cao hơn. Đồ án tham khảo cũng nhấn mạnh việc xây dựng giao diện linh hoạt, dù vẫn còn hạn chế trong việc tối ưu hoàn toàn cho di động, cho thấy đây là một yếu tố cần được ưu tiên hàng đầu.

IV. Phân Tích Đồ Án Thiết Kế Website Bán Nhạc Cụ Thực Tế

Để hiểu rõ hơn về quy trình kỹ thuật, việc phân tích một dự án thực tế là rất cần thiết. Đồ án môn học "Thiết kế website bán nhạc cụ" của sinh viên Nguyễn Huy Hoàng (Trường Đại học Nguyễn Tất Thành) cung cấp một ví dụ điển hình về việc xây dựng một trang web từ các công nghệ web cơ bản, thể hiện rõ cấu trúc và các chức năng cần thiết của một cửa hàng trực tuyến chuyên ngành.

4.1. Cấu trúc và công nghệ sử dụng trong đồ án tham khảo

Dự án được xây dựng dựa trên các công nghệ nền tảng là HTML5, CSS và JavaScript, sử dụng môi trường phát triển Visual Studio Code. Cấu trúc website được tổ chức logic với các trang chính như: Trang chủ, Liên hệ (Contact), Trợ giúp (FAQ), Danh mục sản phẩm (Categories), Giới thiệu (Who are we?), Trang sản phẩm chi tiết (Product) và Giỏ hàng (Cart). Sơ đồ sitemap rõ ràng cho thấy một luồng điều hướng người dùng hợp lý, từ việc khám phá sản phẩm đến thanh toán, là nền tảng cho một trải nghiệm người dùng (UX/UI) tốt.

4.2. Triển khai các chức năng cốt lõi Trang sản phẩm và giỏ hàng

Trang sản phẩm trong đồ án được thiết kế để hiển thị đầy đủ thông tin: hình ảnh từ nhiều góc độ, mô tả chi tiết và thông số kỹ thuật. Chức năng chuyển đổi giữa các hình ảnh sản phẩm bằng JavaScript là một điểm cộng. Chức năng giỏ hàng được lập trình để xử lý các tác vụ cơ bản như thêm sản phẩm, cập nhật số lượng, và tính tổng tiền. Mặc dù còn đơn giản, nhưng đây là những thành phần cốt lõi chứng minh khả năng xây dựng một hệ thống kinh doanh nhạc cụ trực tuyến hoàn chỉnh, từ việc trưng bày sản phẩm đến khâu hoàn tất giao dịch.

4.3. Đánh giá hạn chế và hướng phát triển của dự án

Đồ án cũng tự nhận định một số hạn chế quan trọng. Thứ nhất là website chưa được tối ưu hoàn toàn cho thiết bị di động (thiết kế responsive). Thứ hai, sự đa dạng về sản phẩm còn hạn chế. Hướng phát triển được đề ra là hoàn thiện các chức năng còn thiếu và mở rộng danh mục sản phẩm để đưa vào vận hành thực tế. Bài học rút ra từ đây là tầm quan trọng của việc tối ưu hóa cho di động và liên tục cập nhật, mở rộng sản phẩm để đáp ứng nhu cầu thị trường, cũng như việc lựa chọn hosting cho web bán hàng có khả năng chịu tải tốt khi quy mô phát triển.

V. Kết Luận Tương Lai Của Việc Kinh Doanh Nhạc Cụ Online

Thiết kế một website bán nhạc cụ thành công là một quá trình tổng hòa giữa nghệ thuật và khoa học. Nó đòi hỏi sự am hiểu về âm nhạc, kỹ năng công nghệ, và tư duy chiến lược marketing. Việc xây dựng một nền tảng vững chắc từ đầu sẽ quyết định khả năng cạnh tranh và phát triển bền vững trong một thị trường ngày càng số hóa.

5.1. Tóm tắt các yếu tố cốt lõi để xây dựng website thành công

Để thành công, một website bán nhạc cụ phải tập trung vào ba yếu tố chính. Đầu tiên là trải nghiệm người dùng (UX/UI) vượt trội, với giao diện đẹp, điều hướng dễ dàng và các tính năng tương tác cao như demo âm thanh sản phẩm. Thứ hai là nền tảng kỹ thuật vững chắc, đảm bảo tốc độ tải trang nhanh, bảo mật website (SSL) tuyệt đối và tương thích trên mọi thiết bị. Cuối cùng là chiến lược nội dung và SEO thông minh, xây dựng các blog kiến thức âm nhạc hữu ích để thu hút đúng đối tượng khách hàng và khẳng định vị thế chuyên gia trong ngành.

5.2. Xu hướng phát triển của các cửa hàng nhạc cụ online

Tương lai của ngành bán lẻ nhạc cụ sẽ chứng kiến sự phát triển mạnh mẽ hơn của các cửa hàng nhạc cụ online. Các xu hướng công nghệ như thực tế tăng cường (AR) cho phép người dùng 'ướm thử' nhạc cụ trong không gian của mình, hay trí tuệ nhân tạo (AI) để gợi ý sản phẩm phù hợp sẽ ngày càng phổ biến. Việc xây dựng cộng đồng trực tuyến, tổ chức các lớp học hay workshop online cũng sẽ là một hướng đi chiến lược để các doanh nghiệp không chỉ bán sản phẩm mà còn bán cả trải nghiệm và kiến thức, tạo ra một hệ sinh thái âm nhạc toàn diện.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Trong xu hướng chuyển đổi số và phát triển thương mại điện tử, trang web đóng vai trò như một cửa hàng ảo, không chỉ phục vụ truyền thông mà còn kiến tạo trải nghiệm mua sắm trực quan, mở rộng cơ hội kinh doanh cho doanh nghiệp. Đối với lĩnh vực nghệ thuật và âm thanh, nhu cầu thưởng thức âm nhạc cũng như nhu cầu sáng tác, sản xuất âm nhạc ngày càng gia tăng trên toàn cầu. Điều này dẫn tới nhu cầu cấp thiết về việc trang bị các loại nhạc cụ, thiết bị âm thanh và phần mềm chuyên dụng.

Đề tài "Thiết Kế Website Bán Nhạc Cụ" (tên thương hiệu website: Seniks Musical Instruments - SMI) được thực hiện bởi sinh viên Nguyễn Huy Hoàng (MSSV: 2200005850, Lớp: 22DKTPMIB, Chuyên ngành Kỹ thuật Phần mềm) dưới sự hướng dẫn của Thầy Đặng Đức Trung tại Khoa Công nghệ Thông tin, Trường Đại học Nguyễn Tất Thành trong khuôn khổ học kỳ 3, năm học 2022 - 2023 (ngày hoàn thành: 26/09/2023).

Mục tiêu và nhiệm vụ của đồ án

1. Nghiên cứu tổng quan và ứng dụng môi trường phát triển mã nguồn Visual Studio Code trong lập trình web.
2. Xây dựng cấu trúc cây điều hướng (sitemap) cho một hệ thống website thương mại điện tử chuyên ngành nhạc cụ.
3. Hiện thực hóa toàn bộ giao diện người dùng (Front-end) bao gồm 8 phân hệ/trang chức năng: Trang chủ, Trang liên hệ, Trang câu hỏi thường gặp, Trang danh mục sản phẩm, Trang giới thiệu, Cửa sổ đăng nhập/đăng ký, Trang chi tiết sản phẩm và Cửa sổ giỏ hàng.
4. Lập trình các tương tác động trên giao diện (chuyển đổi slide, mở rộng accordion câu hỏi, lọc danh mục, đổi ảnh thumbnail sản phẩm, thêm/xóa/tính tổng tiền giỏ hàng) bằng JavaScript thuần.

Đối tượng và phạm vi nghiên cứu

• Đối tượng nghiên cứu: Thiết kế giao diện và xử lý tương tác người dùng phía máy khách (Client-side) cho website kinh doanh nhạc cụ.
• Phạm vi triển khai: Giao diện website hiển thị trên môi trường máy tính để bàn (Desktop layout), tập trung vào cấu trúc HTML5, định dạng CSS3 và tập lệnh tương tác JavaScript, không triển khai phần máy chủ (Backend) hay cơ sở dữ liệu (Database).

---

Cơ sở lý thuyết và phương pháp

Đồ án vận dụng các kiến thức và công nghệ nền tảng của lập trình web giao diện phía máy khách:

• HTML5: Xây dựng cấu trúc ngữ nghĩa cho trang web thông qua hệ thống thẻ chuẩn (<div>, <section>, <form>, <label>, <input>, <table>, <ul>, <li>, <a>, <button>, <span>, <img>, <h3>, <h2>, <p>).
• CSS3: Xây dựng bố cục giao diện, định dạng phong cách trực quan và hiệu ứng hiển thị với các thuộc tính: display, flex-direction, justify-content, align-items, position, float, clear, box-sizing, transition, opacity, z-index, border-radius, object-fit, transform.
• JavaScript (Vanilla JS): Thao tác trực tiếp với mô hình cây đối tượng tài liệu (DOM API) để kích hoạt các sự kiện người dùng (click, change), quản lý mảng dữ liệu giỏ hàng, cập nhật tổng chi phí và xử lý chuyển đổi trạng thái hiển thị.
• Thư viện biểu tượng Font-Awesome-6: Cung cấp hệ thống icon trực quan cho các nút điều hướng, xếp hạng sao đánh giá sản phẩm và các kênh mạng xã hội.
• Môi trường phát triển: Visual Studio Code (VS Code) của Microsoft, tận dụng các tính năng Syntax highlighting, Snippets, IntelliSense và quản lý cấu trúc tệp mã nguồn.
• Nguồn tài liệu đối sánh: Tài liệu hướng dẫn lập trình web chuẩn W3Schools Online Web Tutorials.

---

Thiết kế và triển khai hệ thống

Hệ thống website Seniks Musical Instruments (SMI) được thiết kế xoay quanh cây điều hướng sitemap hoàn chỉnh, hỗ trợ người dùng tiếp cận từ thông tin doanh nghiệp đến quy trình lựa chọn sản phẩm và thanh toán:

Thành phần sitemap	Chức năng chi tiết được phân rã	Tệp mã nguồn tương ứng
Home (Trang chủ)	Banner quảng bá, danh mục nổi bật, sản phẩm mới về, bài viết tin tức, footer chính sách	main.html, main.css, Slide.js
Contact (Liên hệ)	Thông tin địa chỉ, bản đồ, số điện thoại, form gửi góp ý/bình luận	contact.html, contact.css
Help / FAQ (Hỏi đáp)	Danh sách câu hỏi thường gặp dạng accordion thu gọn/mở rộng	faq.html, faq.css, FAQ.js
Categories (Danh mục)	Lưới sản phẩm, bộ lọc theo phân loại & tầm giá, nút uncheck radio, thanh phân trang	categories.html, categories.css, Uncheck.js
Who are we? (Giới thiệu)	Lịch sử thương hiệu, thông tin đội ngũ nhân sự, cam kết chất lượng	about.html, about.css
Login / Sign up (Tài khoản)	Hộp thoại modal đăng nhập và đăng ký thành viên	main.html, main.css
Product Details (Chi tiết)	Thư viện ảnh chuyển đổi, mô tả sản phẩm, bảng thông số kỹ thuật nhạc cụ	product.html, product.css, Product.js
My Cart (Giỏ hàng)	Modal giỏ hàng, thêm sản phẩm, cập nhật số lượng, xóa mục, tính tổng tiền đơn hàng	main.html, main.css, Cart.js

---

Nội dung chính theo từng chương

CHƯƠNG I: GIỚI THIỆU VISUAL STUDIO CODE

Chương I trình bày tổng quan về công cụ soạn thảo mã nguồn Visual Studio Code (VS Code) - nền tảng chính được tác giả sử dụng để phát triển đồ án:

• Khái niệm và đặc tính: VS Code là trình soạn thảo mã nguồn mở miễn phí do Microsoft phát triển, hỗ trợ đa nền tảng (Windows, Linux, macOS) với ưu điểm nhanh, nhẹ, khả năng mở rộng mạnh mẽ qua hệ thống tiện ích (Extensions).
• Lịch sử hình thành:
  • Ngày 29/04/2015: Microsoft ra mắt bản thử nghiệm tại hội nghị Build 2015.
  • Ngày 18/11/2015: VS Code được phát hành dưới giấy phép MIT, đưa mã nguồn lên GitHub và công bố tính năng Extensions.
  • Ngày 14/04/2016: Hoàn tất giai đoạn thử nghiệm và phát hành bản chính thức.
• Tính năng chủ đạo: Làm nổi bật cú pháp (Syntax highlighting), đoạn mã mẫu (Snippets), tự động hoàn thành mã thông minh (IntelliSense), gỡ lỗi (Debugging), tái cấu trúc/cải tiến mã nguồn và tích hợp sẵn hệ thống quản lý phiên bản Git.
• Phạm vi ứng dụng: Phổ biến trong lập trình giao diện Frontend (HTML, CSS, JavaScript), lập trình máy chủ Backend (hỗ trợ nhiều ngôn ngữ như Scala) cũng như hỗ trợ kiểm thử phần mềm và quản lý dữ liệu.

CHƯƠNG II: GIỚI THIỆU ĐỀ TÀI

Chương II định vị thương hiệu và phạm vi chức năng của hệ thống website:

• Tên hệ thống: Seniks Musical Instruments (SMI).
• Mục tiêu hoạt động: SMI là nền tảng thương mại trực tuyến chuyên cung cấp các loại nhạc cụ (Guitar, Drum, Keyboard, Synthesizer...), thiết bị phần cứng âm thanh (Headphone, Microphone, Speaker) và phần mềm (Software) phục vụ quá trình sản xuất âm nhạc.
• Lý do lựa chọn đề tài: Xuất phát từ sự phổ cập của âm nhạc trong đời sống hiện đại và sự gia tăng số lượng cá nhân có định hướng trở thành nhà sản xuất âm nhạc. Việc tạo ra một cổng thông tin và thương mại trực tuyến giúp kết nối người dùng với các sản phẩm nhạc cụ chất lượng một cách thuận tiện.
• Cấu trúc Sitemap: Mô tả liên kết giữa các trang:
  • Nhóm thông tin doanh nghiệp (Information): The Company, Our Story, Address, Request Information.
  • Nhóm thông tin & giao dịch sản phẩm (Products): Product's Information, Add Product to Cart, Delete Product from Cart, Calculate Product Costs.
• Công nghệ và môi trường: Lập trình bằng HTML5, CSS, JavaScript, mã nguồn biểu tượng Font-Awesome-6 trên môi trường Visual Studio Code.

CHƯƠNG III: XÂY DỰNG WEBSITE

Chương III là trọng tâm kỹ thuật của đồ án, mô tả chi tiết giải pháp thiết kế giao diện và hiện thực mã nguồn cho 8 phân hệ chức năng:

1. Trang chủ (Homepage - main.html, main.css, Slide.js):

   • Giao diện & Bố cục: Đầu trang gồm thanh điều hướng (Logo SMI, Home, Contact, Help/FAQ, Categories, Who are we?, My Cart, Login). Phần thân trang gồm banner trượt giới thiệu dòng đàn Fender Player & Player Plus, lưới danh mục phổ biến (8 nhóm: Drum, Guitar, Headphone, Microphone, Keyboard, Software, Speaker, Synthesizer), danh sách sản phẩm mới về (New Arrivals: Ibanez Artwood AW84CE-WK giá $383.99), mục bài viết tiêu biểu (Featured Articles: The Best Pedalboards 2023). Chân trang hiển thị chính sách vận chuyển an toàn, đổi trả trong 30 ngày, bảo hành toàn diện, cùng các biểu tượng thanh toán (Visa, MasterCard...).
   • Kỹ thuật: Sử dụng kết hợp CSS Flexbox và định vị để căn chỉnh thanh điều hướng, bố trí lưới sản phẩm; tập lệnh JavaScript điều khiển hiệu ứng chuyển đổi slide tự động và tương tác.

2. Trang liên hệ (Contact - contact.html, contact.css):

   • Giao diện: Cung cấp thông tin địa chỉ cửa hàng tại khu vực biển Tuy Hòa, số điện thoại liên lạc, cùng biểu mẫu tiếp nhận phản hồi "Send Your Comments" với các trường nhập dữ liệu và nút "Send Message".
   • Kỹ thuật: Sử dụng thẻ <form>, <input>, <button>, kết hợp CSS float, padding, border-radius và hiệu ứng chuyển đổi con trỏ chuột (cursor: pointer, transition).

3. Trang giải đáp thắc mắc (Help / FAQ - faq.html, faq.css, FAQ.js):

   • Giao diện: Trình bày danh sách các câu hỏi phổ biến của khách hàng (What is an FAQ Page?, Why do you need an FAQ page?, Does it improve the user experience of a website?).
   • Kỹ thuật: Ứng dụng tập lệnh JavaScript FAQ.js để bắt sự kiện click chuột vào từng câu hỏi, thay đổi trạng thái hiển thị ẩn/hiện (display: block / none, overflow: hidden) của đoạn văn bản trả lời theo mô hình accordion.

4. Trang danh sách sản phẩm (Categories - categories.html, categories.css, Uncheck.js):

   • Giao diện: Cột bên trái là bộ lọc đa cấp theo danh mục nhạc cụ và khoảng giá (Option 1 đến Option 5). Khu vực bên phải hiển thị lưới sản phẩm Ibanez Artwood AW84CE-WK kèm giá, trạng thái tồn kho ("In stock"), xếp hạng sao và thanh điều hướng phân trang (Previous, trang 1 đến 6, Next).
   • Kỹ thuật: Định dạng lưới sản phẩm bằng CSS; mã nguồn JavaScript Uncheck.js hỗ trợ người dùng hủy chọn (uncheck) các nút tùy chọn radio button khi muốn thiết lập lại bộ lọc.

5. Trang giới thiệu (Who are we? - about.html, about.css):

   • Giao diện: Trình bày thông tin thương hiệu "About Something", tầm nhìn phát triển và cam kết chất lượng dịch vụ của đội ngũ nhân viên.
   • Kỹ thuật: Bố cục văn bản kết hợp hình ảnh sử dụng thuộc tính float, margin, clear: both, và object-fit để tối ưu hóa hiển thị hình ảnh.

6. Cửa sổ đăng nhập / đăng ký (Login / Sign up - main.html, main.css):

   • Giao diện: Thiết kế dưới dạng cửa sổ popup modal nổi bật trên nền mờ. Form Đăng nhập yêu cầu Email và Password; Form Đăng ký yêu cầu bổ sung trường Username cùng nút liên kết chuyển đổi qua lại "Already have an account? Log In".
   • Kỹ thuật: Sử dụng position: fixed/absolute, z-index cao để đè lên các thành phần giao diện khác, kết hợp max-width, min-width, border-radius và hiệu ứng tương tác form.

7. Trang chi tiết sản phẩm (Product - product.html, product.css, Product.js):

   • Giao diện: Trình bày chi tiết sản phẩm đàn Ibanez Artwood AW84CE-WK Acoustic Guitar Weathered Black (đơn giá $389.99). Bên trái là khu vực ảnh sản phẩm lớn kèm hệ thống ảnh thumbnail thu nhỏ; bên phải gồm số lượng đặt hàng, nút "Add to Cart" và bảng thông số kỹ thuật chi tiết.
   • Bảng thông số cấu hình đàn:
     • Dáng đàn (Body Shape): Grand Pacific
     • Vật liệu thân đàn (Body Material): Sitka Spruce (Top), Walnut (Body & Back)
     • Lớp hoàn thiện (Body Finish): Matte
     • Phím đàn & Cần đàn (Fretboard & Neck): Eucalyptus, Scale Length 25.5", 20 phím (Frets), họa tiết 4mm Dots Faux Pearl
     • Hệ thống điện tử (Electronics): Expression System 2, Fishman AEQ-S2
     • Phần cứng & Phụ kiện: Ngựa đàn Eucalyptus, Pickguard đen, Khóa Taylor Nickel Tuners, Hộp AeroCase
   • Kỹ thuật: Đoạn mã JavaScript Product.js cho phép hoán đổi nguồn ảnh chính (src) khi người dùng nhấp vào các ảnh mẫu thumbnail; bảng thông số xây dựng bằng thẻ <table>, <tr>, <th>, <td>.

8. Cửa sổ giỏ hàng (Cart - Cart.js, main.css):

   • Giao diện: Hiển thị danh sách sản phẩm đã được thêm vào đơn hàng, bao gồm hình ảnh thu nhỏ, tên sản phẩm, đơn giá, số lượng (Qty) và dòng tổng tiền (Total: $...). Giao diện hỗ trợ hiển thị các trạng thái: Giỏ hàng trống (Total: $0), giỏ hàng có sản phẩm, cập nhật khi tăng giảm số lượng sản phẩm, hoặc khi thêm sản phẩm trùng lặp.
   • Kỹ thuật: Tập lệnh Cart.js định nghĩa các hàm xử lý mảng giỏ hàng, cập nhật tổng chi phí động khi thay đổi giá trị số lượng, xóa mặt hàng khỏi danh sách và hiển thị giao diện thanh toán ("Pay").

// Trích xuất cấu trúc xử lý dữ liệu tiêu biểu trong Cart.js
// Quản lý thông tin sản phẩm: title, price, img, qty và tính toán Total

CHƯƠNG IV: KẾT LUẬN

Chương IV tổng kết toàn bộ quá trình thực hiện đồ án:

• 4.1. Ưu điểm của đồ án:
  • Hệ thống hình ảnh minh họa phong phú, đa dạng và có tính thẩm mỹ cao.
  • Giao diện trực quan, bố cục rõ ràng, tạo sự thuận tiện cho người dùng khi thao tác.
  • Hiện thực tương đối hoàn chỉnh các phân hệ chức năng tương tác cơ bản của một trang web bán hàng.
• 4.2. Hạn chế của đồ án:
  • Giao diện chưa được thiết kế thích ứng (Responsive Web Design) hoàn chỉnh cho các loại màn hình di động (Smartphones) và máy tính bảng (Tablets).
  • Số lượng danh mục và mặt hàng sản phẩm thực tế còn đơn điệu, chủ yếu sử dụng dữ liệu mẫu.
  • Một số tính năng thương mại điện tử chuyên sâu (xử lý đơn hàng máy chủ, cổng thanh toán trực tuyến thực tế, quản lý cơ sở dữ liệu) chưa thể tích hợp.
• 4.3. Hướng phát triển của đồ án:
  • Hoàn thiện và tích hợp các module chức năng còn thiếu để có thể đưa website vào vận hành thực tế.
  • Mở rộng quy mô hệ thống hướng tới mục tiêu trở thành nền tảng trực tuyến lớn về kinh doanh nhạc cụ tại Việt Nam.

---

Kết quả và đóng góp

Đồ án đã hoàn thành đầy đủ các yêu cầu của môn học Thiết kế Web chuyên ngành Kỹ thuật Phần mềm:

• Kết quả cụ thể:
  • Hoàn thành bộ mã nguồn giao diện Front-end gồm các tệp cấu trúc HTML (main.html, contact.html, faq.html, categories.html, about.html, product.html), hệ thống tệp định dạng giao diện CSS (main.css, contact.css, faq.css, categories.css, about.css, product.css) và các tệp script JavaScript (Slide.js, FAQ.js, Uncheck.js, Product.js, Cart.js).
  • Xây dựng thành công 8 màn hình chức năng liên kết chặt chẽ với nhau thông qua sitemap logic.
  • Hiện thực thành công logic giỏ hàng ở Client-side: thêm sản phẩm từ trang chi tiết, xử lý cộng dồn khi trùng sản phẩm, cập nhật số lượng trực tiếp và tính toán tự động tổng số tiền cần thanh toán.

---

Hạn chế và hướng nghiên cứu tiếp

Căn cứ theo đánh giá tự thân của tác giả trong đồ án, hệ thống còn tồn tại các giới hạn kỹ thuật và hướng mở rộng như sau:

• Hạn chế:
  • Đồ án chưa tối ưu hóa giao diện đa kích thước màn hình (chưa hỗ trợ Mobile/Tablet Responsive).
  • Dữ liệu sản phẩm hiển thị còn mang tính chất tĩnh, chưa phong phú về chủng loại thiết bị âm nhạc.
  • Thiếu hệ thống quản trị nội dung (CMS/Admin) và hệ thống xử lý phía máy chủ (Backend/Database).
• Hướng phát triển:
  • Nghiên cứu áp dụng CSS Media Queries hoặc các CSS Framework để hoàn thiện tính năng Responsive cho mọi thiết bị di động.
  • Lập trình hệ thống máy chủ và cơ sở dữ liệu để quản lý sản phẩm, tài khoản người dùng và đơn hàng động.
  • Kết nối các cổng thanh toán điện tử thực tế nhằm nâng cấp SMI thành nền tảng kinh doanh hoàn chỉnh.

---

Giá trị tham khảo

Đồ án là tài liệu tham khảo phù hợp cho:

• Sinh viên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm: Dùng làm mẫu tham khảo khi thực hiện đồ án môn học Thiết kế Web cơ sở, học hỏi phương pháp tổ chức cấu trúc tệp mã nguồn HTML/CSS/JavaScript thuần không qua framework trung gian.
• Người học lập trình Front-end cơ bản: Tham khảo cách thức xây dựng các thành phần tương tác UI/UX thông dụng như Slide banner, Accordion FAQ, Modal Login/Register, Image Gallery Switcher và Shopping Cart logic bằng DOM JavaScript thuần.

---

Câu hỏi thường gặp

1. Website Seniks Musical Instruments (SMI) cung cấp những danh mục sản phẩm chính nào?
Website SMI được thiết kế để phân phối 8 nhóm sản phẩm chính bao gồm: Trống (Drum), Đàn Guitar, Tai nghe (Headphone), Micro (Microphone), Đàn phím (Keyboard), Phần mềm âm nhạc (Software), Loa (Speaker) và Đàn tổng hợp âm (Synthesizer).

2. Công cụ và bộ công nghệ nào đã được sử dụng để phát triển đồ án này?
Đồ án sử dụng trình soạn thảo mã nguồn Visual Studio Code (VS Code) và bộ công nghệ nền tảng Front-end bao gồm HTML5 (xây dựng cấu trúc), CSS3 (định dạng phong cách, bố cục), JavaScript thuần (xử lý tương tác logic) và thư viện biểu tượng Font-Awesome-6.

3. Phân hệ giỏ hàng (Cart) trong đồ án có thể xử lý những thao tác nào?
Tập lệnh Cart.js của phân hệ giỏ hàng hỗ trợ các thao tác: hiển thị danh sách sản phẩm đã chọn kèm hình ảnh và đơn giá, tính tổng tiền đơn hàng, thông báo khi giỏ hàng trống (Total: $0), xử lý khi có sản phẩm trùng lặp, thay đổi số lượng đặt hàng (Qty) và chuyển hướng giao dịch thanh toán.

4. Chức năng tương tác tại trang Help / FAQ được xây dựng như thế nào?
Trang Help / FAQ sử dụng tập lệnh JavaScript FAQ.js để lắng nghe sự kiện nhấp chuột của người dùng vào các câu hỏi thường gặp, từ đó kích hoạt chuyển đổi trạng thái ẩn/hiện của khối nội dung câu trả lời tương ứng theo định dạng accordion.

5. Đồ án còn những hạn chế kỹ thuật lớn nào theo tác giả trình bày?
Đồ án còn ba hạn chế chính: giao diện chưa được tối ưu hóa cho màn hình điện thoại và máy tính bảng (chưa responsive); dữ liệu sản phẩm hiển thị còn hạn chế; và chưa tích hợp được các tính năng xử lý dữ liệu phía máy chủ (Backend/Database).

---

Kết luận

Đồ án môn học "Thiết Kế Website Bán Nhạc Cụ" của sinh viên Nguyễn Huy Hoàng đã hoàn thành trọn vẹn mục tiêu xây dựng giao diện Front-end cho nền tảng thương mại điện tử Seniks Musical Instruments. Bằng việc ứng dụng thuần thục HTML5, CSS3, JavaScript trên nền tảng Visual Studio Code, tác giả đã hiện thực hóa 8 phân hệ chức năng từ điều hướng, giới thiệu, chi tiết cấu hình nhạc cụ đến logic tính toán giỏ hàng. Mặc dù còn hạn chế về khả năng đáp ứng đa thiết bị di động và thiếu hệ thống cơ sở dữ liệu động, đồ án vẫn cung cấp một cấu trúc tham khảo chuẩn mực cho sinh viên chuyên ngành Kỹ thuật Phần mềm trong học phần Thiết kế Web.

Trích đoạn nội dung tài liệu

CHƯƠNG I:GIỚI THIỆU VISUAL STUDIO CODE.--2- 2 22Scc2222 22224 11 Ilinc on n .--cccccncnn xnHH 1 HH HH1 ng He re 13 CHƯƠNG II: GIỚI THIỆU ĐỀ, TẢ I.s- 5-5° 5£ 5 s22 eSs£se se sex se eesesee 14 2.3 Ly do chon thidt ké Website. HH HH nh HH Hường 15 PA ©® s2 á nẽ.6 Môi trường thiết k. S1 1121121211211 211 2121 1 1 E121 1211 nga 15 CHƯƠNG II: XÂY DỰNG WEBSITE.- c1 1212111221211 1111110112111 111120111 kh 16 BLL Gao an cccccccceseeccccencccccccevsececsestetsceececcceccseecececcceeeuusesssttesersececs 16 3.3 Kỹ thuật thiết kế.4 Code thiết kế. co 2t r2re eườg 13 3.2 Trang liên hệ (Contacf).- c1 12211121 22111121111 1281151511155 1 11 H1 xxx 35 “ác na an cc ccccccccceseececsccceccccccecsesecsestttscceueccecccsseccccecceeeeususetesessececs 35 EWAvib:hcadaẳđaẻ444.3 Kỹ thuật thiết kế.4 Code thiết kế.

co 2t tt ghe ườg 36 3.3 Trang giải đáp thắc mắc (Help / FAQ).1 Giao an cccccccccceceecccsccccccccccevsececeestetsceeueccccccsseccccccceeeeususesttesessecess 39 E1. Kỹ thuật thiết kế.4 Code thiết kế.4 Trang danh sách sản phâm (CategOTi€S).--- 5 SE EEE1EE1121E1121111 1.A] Giao an an.3 Kỹ thuật thiết kế.4 Code thiết kế.5 Trang giới thiệu (Who are W€?). c1 ng HH nhe Hee 50 “cốc na an cccccccccceecececsnccccccccevsececstsettsceaceccceccssececcccceeeuuaesssttesersececs 50 KV /hõ: eense eee e eens eects ee eeteeecend ee cee ESctGE CEH GE en dae ets GeeEaGeeEtdaeees 50 3.3 KY thuat thiet ke.4 Code thiết kế.6 Ctra s6 dang nhap / dang ky (Login/ Sign up).1 Giao an ccccccccccceceececscccccccccevsesecststttsceeueccceccusececcccceeeeuausssttesessececs 54 “1 ae.3 KY thuat thiet ke.4 Code thiết kế.7 Trang san pham (Product).cccccccsccsccssescssssessessesscecssesecevssvsscsscsesensevsesevevevsvsevecees 38 “1c na an eee cccccccccceceecccenccccccccevsesecsettttsceececcccccssececcccceeeeuaesssttesersececs 58 mẽ.3 Kỹ thuật thiết kế. - 5s tt E111 21121111111 212 1101212211 1tr rrye s9 3.4 Code thiết kế.8 Cửa sô gid hang (Cart).

ool cc ccceccccceceecccccccccccccevsesecststttsceeeeccccccssecececcceeeeusussstteseesececs 65 c1: .3 Kỹ thuật thiết kế. - 5s sTt 121211211 111111 22T 1101212211 12tr re 67 3.4 Code thiết kế. 5s 2 2211 211221122112112112111211221211 111 re 68 CHUONG IV: KET LUAN 74 4.2 Hạn chế của đồ án. ST ng nnnn TT ng HH nen re rree 74 4.3 Hướng phát triển của đồ án.

- s1 E1 1E 211012222211 1 ngu 74 DANH MỤC TÀI LIỆU TAM KHẢO „. T5 DANH MUC HINH 5ì 1n. 24 Hanh BKNN NiưỶỶ$3ỶÝÝ. 25 Hin KP NdddddÝŸ3ẺŸ3ỐÕ.

LH HT HT HT TH HT HT TH HH TH TH TH TH HH 44 Hanh E66. LH HH HH HT TH HT HH TH HT TT HH TH TH HH 46 5c nn. nh HT HT HT HT HH TH Tnhh 47 5ì c8. LH HH HT HT HT HT HT TH TH TH TH TH HH 72 5ì n0 ma.

73 LOI MO DAU Trong thời đại số hóa mà chúng ta đang sống , một trang web không chỉ là một công cụ truyền thông, mà còn là cửa hàng ảo, một nơi đề tạo ra trải nghiệm cho người dùng và mở ra cơ hội kinh doanh mới. Trong bồi cảnh này, môn học Thiết kế web và đề tài Trang web bán trà xuất hiện như một sự kết hợp hoàn hỏa giữa sáng tạo và kỹ thuật, nơi chũng ta sẽ học cách tạo ra không gian trực tuyến độc đáo đề thẻ hiện dang cap va gia tri cua san pham. Thiét ké web không chỉ liên quan đến việc tao ra giao diện đẹp mắt. Đó là về việc xây dựng trải nghiệm người dùng thú vị, làm cho việc tìm kiếm và mua sắm đễ dàng và tạo ra không gian trực tuyến phản ánh độc đáo thương hiệu.

Nó cũng liên quan đến việc đảm bảo tính bảo mật và hiệu suất của trang web. Thiết kế web và buôn bán nhạc cụ , hấp dẫn, từ việc lên kế hoạch và thiết kế giao diện đến quan lý sản phâm và giao dịch trực tuyến. Kết nối thế giới thiết kế web và nhạc cụ thông qua đề tài này. LOI CAM ON Đề hoàn thành được đồ án, em biết ơn sâu sắc đối với sự hướng dẫn và hỗ trợ của Thầy Đặng Đức Trung trong môn học Thiết kế web.

Cảm ơn thầy đã hướng dẫn các kiến thức về chuyên môn và kỹ năng làm web. Cảm ơn sự kiên nhẫn của Thầy khi giải đáp các câu hỏi và thắc mắc hỗ trợ trong suốt khóa học. Cảm ơn Nhà trường và đặc biết là khoa Công nghệ thông tin đã cho một cơ hội học tập tại đây, với môn học đầy hữu ích, đóng góp sự phát triển sau này cho sinh viên. Các khóa học, chương trình đào tạo đã giúp cho sinh viên như em chuẩn bị tốt cho tương lai Sau nảy.

Sinh viên thực hiên Nguyễn Huy Hoàng 10 CHUONG I GIOI THIEU VISUAL STUDIO CODE 1. Giới thiệu: + Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo mã nguồn phô biến nhất được sử dụng bởi các lập trình viên. Nhanh, nhẹ, hỗ trợ đa nên táng, nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trội khiến VS Code ngày càng được ứng dụng rộng rãi.1: Hinh Visual Studio Code lãi o80øœ a Hinh 1.2: Giao dién chinh 1. Lịch sử: + Visual Studio Code được công bó, ra mắt phiên bản thử nghiệm vào ngày 29 tháng 4 năm 2015 bởi Microsoft tại hội nghị Build 2015.

Vào ngày 18 tháng 11 năm 2015, Visual Studio Code được phát hành dưới giấy phép MIT và mã nguồn của nó được đưa lên GitHub. Chức năng Extesion (tiện ích mở rộng) cũng được công bố. Vào ngày l4 tháng 4 năm 2016 Visual Studio Code hoàn tất thử nghiệm và được phát hành chính thức. Chức năng: + Syntax highlighting, Snippets, Ty déng hoan thanh ma thong minh, Debugging, cải tiền mã nguôn 12 1.

Ứng dụng: + Visual Studio Code là một trình biên tập code được phát triển bởi Microsoft dành cho Windows, Linux va macOS. Nó hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành code thông minh, snippets, và cải tiên mã nguồn. + Hầu hết các lập trình viên Frontend đều ứng dụng trình soạn thảo mã nguồn mở miễn phí này cho việc viết code JavaScript, HTML hoặc CSS. Ngoài ra, trên thực té, cũng có không ít các lập trình viên Backend dùng V§ Code để viết mã Scala.

+ Với VS Code, việc viết mọi loại code trở nên đơn giản và thuận tiện hơn rất nhiều. Ngoài ra, những ai đang làm công việc kiểm thử phần mềm hay quản lý dữ liệu cũng có thê sử dụng trình soạn thảo này.4: Sw dung VS Code Web Design 13 CHUONG II GIOI THIEU DE TAI 2. Tén website: Seniks Musical Instruments ( SMI ). Mô tả website: - SMI là một trang web chuyên cung cấp các loại nhạc cụ, công cụ và phần mềm phục vụ cho công việc sản xuất âm nhạc.

- Chi tiét về sản phẩm. -_ Thông tin liên hệ. - Giai dap thắc mắc. - Cac sản phẩm dang được bày bán.

- Giới thiệu về chúng tôi. Lý do chọn thiết kế website: -_ Hiện nay âm nhạc đã được phố cập ở khắp mọi nơi trên thế giới. Chúng ta có thê bắt gặp được hình ảnh những con người đang nghe những bài nhạc, bài hát yêu thích của mình ở bất cứ đâu, bất cứ khi nào. Điều đó chứng minh rằng nhu cầu về âm nhạc là không hề nhỏ.

Từ đó xuất hiện rất nhiều người có nhụ cầu về việc trở thành một người sản suất âm nhạc và đề làm được điều đó thì nhạc cụ và các công cụ liên quan là không thể thiếu. Và để phục vụ cho nhu cầu đó em đã quyết định chọn đề tài nay. So dé sitemap: Home Contact Help / FAQ Categories Information Products The Company Product's Information Our Story Address Add Product to Cart Delete Request Product from Information Cart Calculate Product Costs Hinh: 2.4: So do sitemap 2. Công nghệ sử dụng: - Sử dụng ngôn ngữ HTMLS, JavaScript, CSS, và mã nguồn Font-Anwsome-6 đề thiết kế giao diện.

Môi trường thiết kế: - Visual Studio Code 15 CHUONG III XAY DUNG WEBSITE 3. Giao diện: WMyCatn LZ Login 5 E n | H 5 HOME CONTACT HELP / FAQ CATEGORIES WHO ARE WE? Se I8] MUSICAL INSTRUMENTS Fender NEW ARRIVALS PLAYER & PLAYER PLUS ELECTRIC GUITARS SHOP POPULAR CATEGORIES me G&G (@ 8 m @ GO Bổ Drum Guitar Headphone Microphone Keyboard Software Speaker Synthesizer Hinh 3. Dau trang chủ 16 NEW ARRIVALS Ibanez Artwood lbanez Artwood lbanez Artwood lbanez Artwood Ibanez Artwood AWB84CE-WK Acoustic AW84CE-WK Acoustic AWB4CE-WK Acoustic AW84CE-WK Acoustic AWB4CE-WK Acoustic Guitar, Weathered Black Guitar, Weathered Black Guitar, Weathered Black Guitar, Weathered Black Guitar, Weathered Black KKK KK) wk K KK (1) wa + *() *w*+«**() *w*+**() 1 stock tock In stock tock 1stock $383.99 FEATURED ARTICLES The Best Pedalboards 2023 The Best Pedalboards 2023 The Best Pedalboards 2023 Thore'’s no easior, neater way to 0. Read Thore’s no easier, neater way to 0.

Road Thore's no easier, neater way to 0. Road more more more Hình 3. Giữa trang chủ RELIABLE MANY 5 WARRANTY 30 BB beuiveries ® ivcennves @® woncruveo @ bars Safe and fast shipping The ji Ì: All pri inclusive of tax ‘Simple satisfied or refunded CUSTOMER SERVICES INFORMATION SOCIAL NETWORK PAYMENT METHODS | ee BS S| LVISAN[i Hinh 3. Cudi trang chit 17 3.

Mô tả: - Trang chủ thể hiện chủ đề của trang web chuyên bán các sản phâm về âm nhạc và trên thanh tùy chọn có các mục là Home, Contact, Help/FAQ, Categories, Who are we?, My Cart va Login. - Trang chi cing trưng bày một số dòng sản phẩm của cửa hàng, các sản phâm bán chạy, đang được ưu đãi và mới lên kệ. Đồng thời cũng có một số thông tin về các chính sách của cửa hàng, các đường dẫn và phương thức thanh toán mà cửa hàng sử dụng. Kỹ thuật thiết kế: - Layout dung thé: <div>, <ul>, <li>, <a>, <button>, <span>,<h2>,<1>,<form>,<label>,<input>,<p> - Ky thuat thiét ke: + Hinh anh: img ser + Lién két: a href + Dinh dang: CSS: margin, padding, box-sizing, font-family,width, background- color, border, list-style-type, display, sustify-content, flex-direction, color, text- decoration, font-size, font-weight, position, float, content, clear, vertical-allign, cursor, transition, opacity, text-allign, max-width, max-height, z-index.

Code thiết kế: S| Wo Otubnre stator CÓ wo UNA cds Bbsued URS h N4. Code JavaScript hiện và chuyển đối Slide ở Homepage (Slide JS) DoD80ø ere to 6 ee ee ee e Hình 3. Code HTML thiết kế nội dụng cho Homepage (main.html) 19 o80øœ DoD80ø oe re to ee ee ee e Hình 3. Code HTML thiết kế nội dụng cho Homepage (main.html) 20 View Go Run Terminal Help € Ø Do-mtiweb, ooon Hình 3.

Code HTML thiết ké néi dung cho Homepage (main.html) ad ei Ceres toc] Hình 3. Code HTML thiết kế nội dung cho Homepage (main.html) 21 Hep : TC hàng 0amøœ hà ete eee Hinh 3. Code HTML thiét ké n6éi dung cho Homepage (main.html) View Go Run Teminal Help ¢ Ø Do-mtiweb. TRE cy e ø LÔ 8 Hình 3.

Code HTML thiết ké n6i dung cho Homepage (main. Code CSS thiét ké giao dién cho Homepage (main.css) Loe Bsie Mức etre ee ee) Hinh 3. Code CSS thiét ké giao dién cho Homepage (main.css) 23 3o Run Teminal Help n-th ooon _ Strang 19 Tab Soe Hình 3. Code CSS thiết kế giao dién cho Homepage (main.

2 #qquuuu# width: auto; Mực a (ete ee ee Hinh 3. Code CSS thiét ké giao dién cho Homepage (main.css) 24 3o Run Teminal Help n-th ooon Pre ee te Hình 3. Code CSS thiết ké giao dién cho Homepage (main.