Tiểu luận học phần thiết kế web thiết kế website quảng bá làng nghề thủ công mỹ nghệ

GIỚI THIỆU CHUNG

Quy trình thiết kế website

Để thực hiện thiết kế một website cần rất nhiều bước phức tạp Bên cạnh đó,có rất nhiều yếu tố ảnh hưởng đến việc thiết kế website chuyên nghiệp kết hợp nhiều phương pháp xây dựng một website Trong đó, có các bước xây dựng lên một website như sau:

Bước 1: Thu thập thông tin, tiếp nhận yêu cầu của khách hàng

Bước 3: Lựa chọn tên miền website và hosting

Bước 4: Thiết kế giao diện

Bước 5: Xây dựng tính năng và nội dung website

Bước 6: Kiểm tra và chỉnh sửa

Bước 7: Bàn giao và hướng dẫn sử dụng

Bước 8: Bảo trì, xử lỹ khi có lỗi

Các công cụ thiết kế website

2.2.1.1 Visual Studio Code là gì?

Visual Studio Code chính là ứng dụng cho phép biên tập, soạn thảo các đoạn code để hỗ trợ trong quá trình thực hiện xây dựng, thiết kế website một cách nhanh chóng Visual Studio Code hay còn được viết tắt là VS Code Trình soạn thảo này vận hành mượt mà trên các nền tảng như Windows, macOS, Linux. Hơn thế nữa, VS Code còn cho khả năng tương thích với những thiết bị máy tính có cấu hình tầm trung vẫn có thể sử dụng dễ dàng.

2.2.1.2 Ưu nhược điểm của Visual Studio Code

Visual Studio Code là gì được rất nhiều người tìm hiểu Đây cũng là một trong các ứng dụng được dân IT “săn đón” và tải về và sử dụng rất nhiều Visual Studio Code cũng luôn có những cải tiến và tạo ra đa dạng các tiện ích đi kèm từ đó giúp cho các lập trình viên sử dụng dễ dàng hơn Trong đó có thể kể đến những ưu điểm sau:

 Đa dạng ngôn ngữ lập trình giúp người dùng thỏa sức sáng tạo và sử dụng như HTML, CSS, JavaScript, C++,…

 Ngôn ngữ, giao diện tối giản, thân thiện, giúp các lập trình viên dễ dàng định hình nội dung

 Các tiện ích mở rộng rất đa dạng và phong phú

 Tích hợp các tính năng quan trọng như tính năng bảo mật (Git), khả năng tăng tốc xử lý vòng lặp (Debug),…

 Đơn giản hóa việc tìm quản lý hết tất cả các Code có trên hệ thống.

Visual Studio Code là một trong những trình biên tập Code rất phổ biến nhất hiện nay Ứng dụng này cũng ngày càng chứng tỏ ưu thế vượt trội của mình khi so sánh với những phần mềm khác Tuy bản miễn phí không có nhiều các tính năng nâng cao nhưng Visual Studio Code thực sự có thể đáp ứng được hầu hết nhu cầu cơ bản của lập trình viên.

HTML

Hình 3: Hình mô tả HTML

HTML là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn ngữ đánh dấu siêu văn bản) HTML được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, titles, blockquotes… và HTML không phải là ngôn ngữ lập trình.

3.2 Ưu nhược điểm của HTML

HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ có vai trò xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số

(media) như hình ảnh, video, nhạc Tuy nhiên, HTML có ưu và nhược điểm của riêng nó. Ưu điểm:

 Được sử dụng rộng rãi, có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng lớn.

 Học đơn giản và dễ hiểu.

 Mã nguồn mở và hoàn toàn miễn phí.

 Markup gọn gàng và đồng nhất.

 Tiêu chuẩn thế giới được vận hành bởi World Wide Web Consortium (W3C).

 Dễ dàng tích hợp với các ngôn ngữ backend như PHP, Python…

 Được dùng chủ yếu cho web tĩnh Đối với các tính năng động như update hay realtime thời gian thực, bạn cần sử dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP.

 Một số trình duyệt chậm hỗ trợ tính năng mới.

3.3 Cấu trúc của một tài liệu HTML:

- Luôn tồn tại một “cặp thẻ” và

- Thường gồm có 2 phần: Head và Body

 Head: là sử dụng cho mục đích khai báo thông tin về trang HTML:

 Tiêu đề, loại dữ liệu để hiển thị trong trang, các thành phần hỗ trợ cho định dạng, các script (kịch bản),…

 Body: là phần thể hiện nội dung của trang HTML (người dùng có thể thấy được thông tin của phần này) Thường bao gồm:

 Các thành phần phục vụ cho thu thập dữ liệu

- Minh họa một tài liệu HTML đơn giản:

 Các tuyên bố xác định rằng tài liệu này là một tài liệu HTML5

 Phần tử là phần tử gốc của một trang HTML

 Phần tử chứa thông tin meta về trang HTML

 Phần tử chỉ định tiêu đề cho trang HTML (được hiển thị trong thanh tiêu đề của trình duyệt hoặc trong tab của trang)

 Phần tử xác định nội dung của tài liệu và là vùng chứa tất cả nội dung hiển thị, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng, danh sách,…

 Phần tử xác định một tiêu đề lớn

 Phần tử

xác định một đoạn văn

Hình 3.3:Hình minh hoạ HTML

3.3 Vai trò của HTML trong website

Với những ưu và khuyết điểm trên, điều đó không có nghĩa là chỉ sử dụng HTML để tạo ra một website mà HTML chỉ đóng một vai trò hình thành trên website Một website chuẩn sẽ được hình thành bởi:

 HTML – Xây dựng cấu trúc và định dạng các siêu văn bản.

 CSS – Định dạng các siêu văn bản dạng thô tạo ra từ HTML thành một bố cục website, có màu sắc, ảnh nền,….

 Javascript – Tạo ra các sự kiện tương tác với hành động của người dùng (ví dụ như là chat, update nội dung, hiệu ứng slide).

 PHP – Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trình duyệt.

 MySQL – Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc.

Nếu website là một cơ thể hoàn chỉnh thì HTML chính là bộ xương của cơ thể đó Dù website thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì vẫn phải cần HTML để hiển thị nội dung ra cho người dùng xem.

- Style thuộc tính HTML được sử dụng để thêm kiểu vào một phần tử, chẳng hạn như màu sắc phông chữ, kích thước,

- Thiết lập kiểu của một phần tử HTML, có thể được thực hiện với Style thuộc tính.

Style thuộc tính có cú pháp như sau:

Hình 3.5: Minh họa việc sử dụng kiểu HTML (nguồn: w3schools.com)

3.5 Hình ảnh, liên kết, âm thanh và video :

Hình 3.7: Cú pháp tag link HTML

- href: là thuộc tính cho phép chỉ ra liên kết cần chuyển tới thông qua url (Uniform Resource Locator) được sử dụng như giá trị cho thuộc tính này.

- target: Đây là thuộc tính cho phép quy định nơi sẽ mở liên kết khi người dùng click vào Có khá nhiều giá trị quy ước, có thể sử dụng cho thuộc tính này Tuy nhiên chúng ta chỉ cần thiết ghi nhớ 2 giá trị này để sử dụng. o _self: Mở liên kết ngay trong cửa sổ hiện hành o _blank: Mở liên kết trong một cửa sổ tài liệu mới (hoặc tab mới) của trình duyệt.

Hình 3.8: Cú pháp tag image HTML

Image có 4 thuộc tính, trong đó có 2 thuộc tính bắt buộc phải sử dụng

- src: thuộc tính này cho phép bạn chỉ ra một đường dẫn cùng với tên của hình cần thể hiện Đường dẫn ở đây có thể là một url chứa hình thuộc website hiện tại (trong tình huống này bạn buộc phải sử dụng đường dẫn tương đối, tức là kí hiệu / hoặc để để mô tả vị trí)

- alt: thuộc tính này cho phép gõ vào chuỗi kí tự diễn giải cho ý nghĩa trong của hình Thuộc tính này rất hữu dụng cho việc định hướng tìm kiếm hình ảnh trên website của chúng ta, giúp các search engine tìm thấy hình ảnh cần thiết khi người dùng nhập từ khóa để tìm kiếm dưới dạng ngôn ngữ Trong trường hợp không tồn tại (có thể bị mất hoặc đường chỉ dẫn sai) thì trình duyệt sẽ tự động dùng chuỗi kí tự này để mô tả.

- width: quy định độ rộng của hình

- height: quy định chiều cao của hình

Minh họa anchor & img tag:

Hình 3.8.1 : Minh hoạ cho việc sử dụng A tag và Img tag

Hình 3.9 :Cú pháp tag audio HTML

-src: thuộc tính này cho phép bạn chỉ ra đường dẫn trỏ đến tập tin âm thanh sẽ cung cấp cho tag hoạt động

-controls: đây là thuộc tính cho phép hiển thị giao diện điều khiển đối với âm thanh mà bạn muốn nhúng vào trang web (VD: các nút play, pause, điều chỉnh âm thanh,…)

-autoplay: nếu sử dụng thuộc tính này, file âm thanh sẽ tự động chạy khi trang web được mở ra, nếu ko dùng thuộc tính này, người dùng sẽ phải bấm nút play trên giao diện điều khiển mới có thể nghe âm thanh được.

-loop: cho phép tự động lặp lại quá trình phát âm thanh mỗi khi kết thúc

(VD: tự động chơi lại bài nhạc mà không cần bấm nút play)

-muted: thuộc tính này quy định mặc nhiên sẽ không phát âm thanh mặc dù file audo vẫn được phát trên trang web của bạn.

Hình 3.9.1:Minh họa cho việc sử dụng Audio tag

3.9 Video tag – Video, hoạt cảnh :

Hình 3.10: Cú pháp tag video HTML

-src: thuộc tính này cho phép bạn chỉ ra đường dẫn trỏ đến tập tin video hoặc hoạt cảnh sẽ cung cấp cho video tag hoạt động

-controls: đây là thuộc tính cho phép hiển thị giao diện điều khiển đối với âm thanh mà bạn muốn nhúng vào trang web (VD: các nút play, pause, điều chỉnh âm thanh,…)

-width: quy định độ rộng của video (đơn vị tính bằng chấm điểm - Pixel)

-height: quy định chiều cao của video (đơn vị tính bằng chấm điểm -

Hình 3.10.1: Minh họa cho việc sử dụng Video tag

Hình 3.11: Cú pháp iframe tag HTML

- src: thuộc tính này cho phép bạn chỉ ra đường dẫn trỏ đến tập tin html

(hoặc liên kết trỏ đến một trang web khác) mà chúng ta muốn nhúng vào trang hiện hành.

- width – height: quy định kích thước của iframe

- frameborder: đây là thuộc tính cho phép quy định thể hiện đường viền bao quanh phạm vi của iframe

- name: thuộc tính cở bản dùng để đặt tên cho iframe để nhận biết

- target: đây là thuộc tính cho phép hiể thị giao diện điều khiển đối với âm thanh mà bạn muốn nhứng vào trang web

Hình 3.11.1 Minh họa cho việc sử dụng Iframe tag (nguồn: w3schools.com)

CSS

Hình 4: Minh họa cho việc sử dụng css

CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ thiết kế được sử dụng nhằm mục đích đơn giản hóa quá trình tạo nên một website CSS được ra mắt vào năm 1996 bởi World Wide Web Consortium (W3C)

CSS xử lý một phần giao diện của trang web Sử dụng CSS, bạn có thể kiểm soát màu sắc của văn bản, kiểu phông chữ, khoảng cách giữa các đoạn văn, cách các cột được đặt kích thước và bố cục, hình ảnh hoặc màu nền nào được sử dụng, thiết kế bố cục, các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau cũng như hàng loạt các hiệu ứng khác.

4.2 Mối quan hệ giữa CSS và HTML

CSS và HTML có mối quan hệ mật thiết trong việc xây dựng một website Nếu HTML là các thành phần động cơ của một chiếc xe hơi thì CSS sẽ là kiểu dáng và màu sắc của chiếc xe

Một trang web có thể chạy mà không cần CSS, nhưng nó chắc chắn sẽ không có tình thẩm mỹ CSS làm cho giao diện người dùng của một trang web tỏa sáng và mang đến trải nghiệm người dùng tuyệt vời Nếu không có CSS, các trang web sẽ kém bắt mắt hơn và có thể khó điều hướng hơn nhiều Ngoài bố cục và định dạng, CSS chịu trách nhiệm về màu chữ, kích thước hình ảnh, khoảng cách giữa các đoạn và hơn thế nữa.

Ngôn ngữ CSS có một số ưu điểm như sau:

 Tăng tốc độ tải trang: CSS cho phép bạn sử dụng ít đoạn mã vì vậy tốc độ tải trang sẽ được cải thiện đáng kể Ngoài ra, bạn còn có thể sử dụng một quy tắc CSS và áp dụng nó cho tất cả các lần xuất hiện của một thẻ nhất định trong tài liệu HTML.

 Cải thiện trải nghiệm người dùng: CSS không chỉ làm cho các trang web dễ nhìn hơn, nó còn giúp các website có định dạng thân thiện với người dùng Khi các nút và văn bản ở vị trí hợp lý và được sắp đặt tốt, trải nghiệm người dùng sẽ được cải thiện.

Thời gian phát triển nhanh: Với CSS, bạn có thể áp dụng các quy tắc và kiểu định dạng cụ thể cho nhiều trang bằng một chuỗi mã Một biểu định kiểu xếp tầng có thể được sao chép trên một số trang web Ví dụ: nếu bạn có các trang sản phẩm tất cả phải có cùng định dạng, giao diện, thì việc viết quy tắc CSS cho một trang sẽ đủ cho tất cả các trang cùng loại.

jQuery

Hình 5: Minh họa cho việc sử dụng jQuery

5.1 jQuery là gì? jQuery là thư viện được viết từ JavaScript, jQuery giúp xây dựng các chức năng bằng Javascript dễ dàng, nhanh và giàu tính năng hơn. jQuery không phải là một ngôn ngữ lập trình riêng biệt mà hoạt động liên kết với JavaScript Với jQuery, bạn có thể làm được nhiều việc hơn mà lại tốn ít công sức hơn jQuery cung cấp các API giúp việc duyệt tài liệu HTML, hoạt ảnh, xử lý sự kiện và thao tác AJAX đơn giản hơn jQuery hoạt động tốt trên nhiều loại trình duyệt khác nhau.

5.2 Ưu điểm của jQuery Ưu điểm của jQuery thì vừa quan trọng vừa đáng giá:

 jQuery xử lý code rất nhanh và có khả năng mở rộng.

 jQuery tạo điều kiện cho người dùng viết các mã chức năng bằng các dòng tối thiểu.

 jQuery cải thiện hiệu suất lập trình web.

 jQuery phát triển các ứng dụng có tương thích với trình duyệt.

 Hầu hết các tính năng mới của trình duyệt mới đều được jQuery sử dụng.

JavaScript

Hình 6: Minh họa cho việc sử dụng JavaScript

JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang web tương tác Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động và bản đồ tương tác, các chức năng của JavaScript có thể cải thiện trải nghiệm người dùng của trang web Là ngôn ngữ kịch bản phía máy khách, JavaScript là một trong những công nghệ cốt lõi của World Wide Web

Ví dụ: khi duyệt internet, bất cứ khi nào bạn thấy quảng cáo quay vòng dạng hình ảnh, menu thả xuống nhấp để hiển thị hoặc màu sắc phần tử thay đổi động trên trang web cũng chính là lúc bạn thấy các hiệu ứng của JavaScript.

6.2 Những lợi ích của JavaScript

 Dễ dàng học và sử dụng

Cú pháp của JavaScript được lấy cảm hứng từ ngôn ngữ lập trình Java, rất dễ để học và viết mã Các nhà phát triển sử dụng JavaScript trong hầu hết các trang web và ứng dụng di động để viết tập lệnh phía máy khách Node.js cũng đã trở nên hết sức phổ biến đối với việc viết mã backend trong thập kỷ qua Nhiều nền tảng phát trực tuyến và video phổ biến đã được viết mã bằng Node.js.

 Có thể không phụ thuộc vào nền tảng

Không giống như các ngôn ngữ lập trình khác, bạn có thể chèn JavaScript vào bất kỳ trang web nào và sử dụng với nhiều ngôn ngữ và khung phát triển web khác Sau khi viết, bạn có thể chạy mã JavaScript trên bất kỳ máy nào Do đó, với JavaScript, việc phát triển ứng dụng có thể không phụ thuộc vào nền tảng.

Bạn có thể sử dụng JavaScript để giảm tải máy chủ và tắc nghẽn mạng vì JavaScript có thể chạy các phép toán logic và thực hiện nhiều công việc của máy chủ trên chính máy khách Ví dụ: hãy xem xét quá trình điền một biểu mẫu đăng ký JavaScript nhanh chóng kiểm tra xem bạn đã nhập số có 10 chữ số cho trường điện thoại di động hay chưa Nếu những yêu cầu này được gửi đến máy chủ, trang của bạn sẽ tải lại mỗi khi có lỗi, làm cho quá trình đăng ký rất chậm chạp và tẻ nhạt.

 Cải thiện giao diện người dùng

JavaScript tạo ra các trang web tinh tế giúp thuận tiện trong việc tìm kiếm và xử lý thông tin phức tạp Các nhà phát triển áp dụng JavaScript để mở rộng chức năng và độ dễ đọc cũng như để tương tác giữa người dùng và trang web hiệu quả hơn.

JavaScript có thể chạy song song nhiều tập hợp hướng dẫn khác nhau Về phần backend, Node.js có thể giải quyết và xử lý các phản hồi của máy chủ được mở rộng quy mô mà không tiêu tốn cùng một lượng băng thông để làm việc đó.

Font Awesome

Hình 7: Minh họa cho việc sử dụng Font Awesome

Font Awesome là một thư viện chứa các Font chữ dạng ký hiệu thư viện dựa trên CSS và LESS Được tạo bởi Dave Gandy dùng để sử dụng với Bootstrap, sau đó được tích hợp vào BootstrapCDN Font Awesome 5 được phát hành vào ngày 7/12/2017 với 1.278 biểu tượng Các Font này cũng chính là icon thường được dùng để đưa vào thiết kế web Có nhiều định dạng file khác nhau như otf, eot, ttf, woff, svg…

Dạng Font này có thể hoạt động trên hầu hết mọi trình duyệt như Google Chrome, Firefox, Opera… Tuy nhiên với các phiên bản cũ như IE7 nó không hoạt động Hơn nữa IE7 đã trở nên lỗi thời và hầu như không còn được sử dụng.

7.2 Ưu điểm khi sử dụng Font Awesome

 Nếu trước đây người ta thường dùng hình ảnh để tích hợp vào trang web thì hiện tại Font Awesome đã được thay thế với những điểm mạnh như:

 Giảm thời gian load trang đáng kể Bởi vì nó chỉ có một file CSS và 1 file font chữ, load chỉ một lần duy nhất vì thế sẽ tốt hơn dùng ảnh.

 Với ảnh khi sử dụng width, height chất lượng sẽ bị ảnh hưởng, gây nên sự méo mó Tuy nhiên với Font Awesome chúng ta không phải lo lắng điều này.

 Giúp tiết kiệm thời gian bởi chỉ cần lên thư viện gõ tên là sẽ xuất hiện ký tự mong muốn.

Wireframe

Hình 4:Minh họa cho việc sử dụng Wireframe

Wireframe (khung xương/cấu trúc dây) là một công cụ trực quan để thiết kế web ở cấu trúc cấp độ Một wireframe thường được sử dụng để bố trí nội dung và chức năng trên một trang Wireframe vẫn được sử dụng trong quá trình thiết lập cơ sở cấu trúc của trang web trước khi thiết kế trực quan Tất nhiên, quá trình này cần được tạo các cài đặt, bổ sung và hoàn thiện nội dung

Một cách mô tả khác có thể hiểu Wireframe là các bố cục trắng đen được thảo luận theo kích thước và vị trí công cụ có thể tương thích với từng thành phần trang, tính năng trang, các khu vực chuyển đổi hay từng điều chỉnh hướng dẫn trang web của bạn Chúng đơn giản, không có màu sắc, sự lựa chọn về phông chữ chữ, logo hay bất kỳ yếu tố thiết kế nào Main wireframe control là cấu trúc của trang web

8.2 Ưu nhược điểm của Wireframe

Wireframe cung cấp một hình ảnh tổng thể trong thời gian sớm nhất, được sử dụng để xem xét đàm phán với khách hàng Nhìn vào góc thực tế, wireframe đảm bảo đầy đủ nội dung và chức năng của trang trên cơ sở xác định chính xác dựa trên nhu cầu của người dùng và doanh nghiệp Đây chính là lợi ích lớn nhất mà wireframe cấu trúc mang lại cho người dùng.

Khi phát triển dự án, chúng tôi có vai trò hỗ trợ thiết bị sử dụng giữa các thành viên trong một nhóm, giúp họ làm việc để thống nhất về tầm nhìn và phạm vi hoạt động của dự án.

Vì wireframe không bao gồm bất kỳ thiết kế hoặc yêu cầu kỹ thuật nào nên không phải lúc nào khách hàng cũng dễ dàng nắm bắt được khái niệm/thuật ngữ này Nhà thiết kế web cũng sẽ phải dịch wireframe thành một thiết kế Ngoài ra,cần có sự phối hợp giữa người thiết kế và người viết quảng cáo khi làm việc với phần nội dung trang web cho phù hợp.

PHÂN TÍCH CẤU TRÚC & XÂY DỰNG WEBSITE

Cấu trúc trang & cấu trúc các thành phần ở mỗi trang

3.2.1 Thiết kế các chức năng (wireframe)

3.2.2 Thiết kế các chức năng chi tiết (wireframe)

Hình 3.2.2: Chức nănng chi tiết

Chi tiết các sản phẩm

CÀI ĐẶT THỰC NGHIỆM

Trang chủ

Hình 4.1.1: Giao diện đầu trang chủ

Hình 4.1.3: Văn hoá nghệ thuật

Hình 4.1.4: Hình ảnh nổi bật

Hình 4.1.5: Thao tác khi xem hình ảnh trang chủ

Hình 4.1.6: Thông tin đăng ký

Hình 4.1.7: Phần cuối trang chủ

Trang chủ của website quảng bá làng thủ công được thiết kế với phông nền cam nâu, kết hợp bố cục năm trong không gian ấm cúng Tạo cảm giác gần gũi, thân thiện với người dùng.

Phần chính giữa, phác hoạ sơ lược 4 tiêu chí mà FM muốn mang lại đến người dùng và trải nghiệm kèm video minh hoạ Để thuận tiện trong việc cập nhật thông tin khách hàng, gần cuối giao diện

FM có để lại phần điền thông tin liên hệ để khách hàng có thể điền và để lại thông tin.

Phần cuối cùng của trang chủ là giao diện tổng hợp của web, thông tin cơ bản về FM

- Layout dùng các thẻ HTML: , , , ,

,

, , , , , ,

,
• , ,

  + Hình ảnh: , lệnh CSS @copyright url(), thư viện font-family.+ Liên kết: và lệnh javascript window.location.href

  Giới thiệu

  Hình 4.2.1.1: Giao điện đầu trang

  Hình 4.2.1.2:: Giao điện giữa ttrang

  Hình 4.2.1.3: Nhấp ‘view more’ để xem chi tiết

  Phần giới thiệu về các làng nghề trên trang web "Quảng Bá Làng Thủ Công Mỹ Nghệ" là nơi khám phá và hiểu biết sâu hơn về những cộng đồng nghệ nhân và làng thủ công truyền thống tại Việt Nam Từ các làng nghề nổi tiếng như làng gốm Bát Tràng, làng thủ công mỹ nghệ Hội An, đến những làng nghề nhỏ mà độc đáo khắp nước, phần này cung cấp một cái nhìn tổng quan về sự đa dạng và phong phú của văn hóa thủ công tại Việt Nam.

  Mỗi làng nghề được giới thiệu kèm theo thông tin về lịch sử phát triển, đặc điểm nghề nghiệp chính, và những sản phẩm nổi bật mà làng nghề đó sản xuất Khách hàng không chỉ được khám phá về quá trình sản xuất truyền thống, mà còn hiểu về cảnh quan văn hóa và xã hội của cộng đồng nghệ nhân tại mỗi làng nghề.

  Phần này không chỉ là nguồn thông tin hữu ích cho những người muốn mua sắm sản phẩm thủ công từ các làng nghề, mà còn là một cửa sổ mở ra về văn hóa dân dụ và tinh thần sáng tạo của người dân Việt Nam Đồng thời, phần giới thiệu về các làng nghề cũng thúc đẩy việc bảo tồn và phát triển bền vững của nghệ thuật thủ công truyền thống trong xã hội hiện đại.

  - Layout dùng các thẻ HTML: , , , ,

  ,

  , ,

  ,
  • , , ,

    , , , , ,

    + Hình ảnh, video: , lệnh CSS, url(), thư viện.

    Sản phẩm

    Hình 4.3.1.1 Chi tiết sản phẩm

    Hình 4.3.1.3 Thông tin sản phẩm

    Hình 4.3.1.4 Thông tin đặt hàng

    Hình 4.3.1.6 Giỏ hàng/mã giảm giá

    Phần sản phẩm trên trang web "Quảng Bá Làng Thủ Công Mỹ Nghệ" là nơi tập trung hiển thị và giới thiệu các sản phẩm thủ công mỹ nghệ độc đáo và chất lượng từ các làng nghề truyền thống của Việt Nam Từ các sản phẩm gốm sứ, đồ gỗ, đồ thủ công dân dụ, đến các tác phẩm nghệ thuật thủ công cao cấp như tranh vẽ, tượng điêu khắc, mỗi món đều được chọn lựa kỹ lưỡng để đảm bảo về độc đáo, đẹp mắt và ý nghĩa văn hóa.

    Mỗi sản phẩm được trình bày trong phần này đều đi kèm với thông tin chi tiết về nguồn gốc, quy trình sản xuất, cũng như câu chuyện về nghệ nhân hoặc làng nghề nơi sản phẩm được tạo ra Điều này giúp khách hàng không chỉ hiểu rõ về giá trị và ý nghĩa văn hóa của sản phẩm mà họ quan tâm, mà còn tạo ra một trải nghiệm mua sắm trực tuyến đầy tính nhân văn và kích thích tò mò khám phá về nền văn hóa dân dụ và nghệ thuật truyền thống của Việt Nam.

    Với sự đa dạng và chất lượng của các sản phẩm, phần này là điểm đến lý tưởng cho những người yêu thích và đam mê nghệ thuật thủ công, cũng như những người muốn tìm kiếm những món quà độc đáo và ý nghĩa từ đất nước Việt Nam.Khi nhấn vào sản phẩm thì trang web sẽ nhanh chóng chuyển sang trang chi tiết sản phẩm, nơi đây sẽ cung cấp đẩy đủ thông tin về sản phẩm mà khách hàng đang quan tâm như màu sắc,…

    - Layout dùng các thẻ HTML: , , , ,

    , ,