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ệ

KHOA CÔNG NGHỆ THÔNG TIN

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ảng viên hướng dẫn: ThS ĐẶNG ĐỨC TRUNG

Sinh viên thực hiện: TRẦN THU PHƯƠNG-NGUYỄN QUỲNH THẢO CHI

Mã lớp: 22DMK4B

Khoá: 2023-2024

Ngành/ chuyên ngành: MARKETING

TP HCM, tháng 01 năm 2024

KHOA CÔNG NGHỆ THÔNG TIN

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ảng viên hướng dẫn: ThS ĐẶNG ĐỨC TRUNG

Sinh viên thực hiện: TRẦN THU PHƯƠNG-NGUYỄN QUỲNH THẢO CHI

Mã lớp: 22DMK4B

Khoá: 2023-2024

Ngành/ chuyên ngành: MARKETING

TP HCM, tháng 01 năm 2024

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

TRUNG TÂM KHẢO THÍHỌC KỲ ….1.… NĂM HỌC 2023 - 2024KỲ THI KẾT THÚC HỌC PHẦN

PHIẾU CHẤM THI TIỂU LUẬN/ĐỒ ÁN

Môn thi: Thiết kế web Lớp học phần: 22DMK4B Sinh viên thực hiện : TRẦN THU PHƯƠNG-NGUYỄN QUỲNH THẢO CHI

Ngày thi: 29/1/2024 Phòng thi: L.813 Đề tài tiểu luận/báo cáo của sinh viên :Thiết kế website quảng bá làng thủ công mỹ nghệ

Phần đánh giá của giảng viên (căn cứ trên thang rubrics của môn học):

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1

1 Lý do chọn đề tài: 1

2 Mục tiêu của đề tài 1

CHƯƠNG 2 GIỚI THIỆU CHUNG 2

1 Quy trình thiết kế website 2

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

2.2.1Microsoft Visual Studio Code 2

2.2.1.1 Visual Studio Code là gì? 3

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

3 HTML 4

3.1 HTML là gì? 4

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

3.3 Vai trò của HTML trong website 6

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

4.3 Ưu điểm của CSS 15

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

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

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

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

CHƯƠNG 4 CÀI ĐẶT THỰC NGHIỆM 24

Thủ công mỹ nghệ FM - Nghệ thuật Tinh tế, Sáng Tạo, và Mang Đậm Bản Sắc Việt

Trong thế giới ngày nay, khi công nghệ đang phát triển vượt bậc, thủ công mỹ nghệ vẫn giữ vững vị thế của mình, là nguồn cảm hứng không ngừng và là điểm độc đáo trong thị trường nghệ thuật Và giữa những tinh túy đó, Thủ công mỹ nghệ FM tỏa sáng như một ngôi sao, đem đến không gian lưu giữ và phát triển nền văn hóa thủ công Việt.

Thủ công mỹ nghệ FM không chỉ là sản phẩm, mà là biểu tượng của sự tinh tế và sáng tạo Các nghệ nhân tại FM không chỉ là những người làm nghề mà còn là những người truyền cảm hứng, giữ gìn và phát triển những giá trị truyền thống Các sản phẩm thủ công tại FM không chỉ đẹp mắt với đường nét tinh tế, mà còn mang theo chút hồn quê, chất liệu tự nhiên, và câu chuyện của từng sáng tạo.

Thủ công mỹ nghệ FM đặc biệt giới thiệu đến khách hàng không chỉ là sản phẩm mà còn là trải nghiệm nghệ thuật Tại FM, khách hàng sẽ không chỉ là người mua hàng mà là những người đồng hành, đồng cảm với nghệ sĩ và câu chuyện mà sản phẩm mang lại.

Chúng tôi tự hào là người bảo tồn và phát triển nghệ thuật thủ công Việt Nam Qua từng sản phẩm, chúng tôi muốn truyền đạt cái đẹp của nền văn hóa, giữ gìn và phát triển những giá trị truyền thống Thủ công mỹ nghệ FM - Nơi sự tinh tế và sáng tạo gặp gỡ, nơi câu chuyện nghệ thuật được kể bằng đôi bàn tay khéo léo và trái tim đam mê.

Trước hết, em muốn bày tỏ lòng biết ơn sâu sắc và chân thành nhất đến nhà trường và đặc biệt là Thầy Đức Trung từ Khoa CNTT Thầy đã tạo điều kiện và hỗ trợ em một cách tận tâm trong suốt quá trình học tập và nghiên cứu đề tài này.

Trong thời gian em thực hiện đồ án, em nhận được sự quan tâm và giúp đỡ đáng kể từ Thầy cùng các bạn bè Lời hướng dẫn và dạy bảo của Thầy Đức Trung đã đóng góp quan trọng, giúp đỡ em hoàn thiện đề tài một cách xuất sắc.

Bước đầu chân vào thực tế, em nhận thức được mình còn hạn chế và gặp nhiều khó khăn Mong muốn nhận được những ý kiến đóng góp quý báu từ Thầy để cải thiện kiến thức và nâng cao ý thức của mình trong lĩnh vực này Em chân thành mong đợi những góp ý xây dựng từ Thầy để cùng nhau phát triển.

Cuối cùng, em xin kính chúc Thầy Đức Trung năm mới 2024 đầy sức khỏe và công việc suôn sẻ Xin chân thành cảm ơn!

TP.HCM, ngày   tháng 1 năm 2024

Sinh viên thực hiện

Trần Thu Phương-Nguyễn Quỳnh Thảo Chi

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI1. Lý do chọn đề tài:

Nằm ở sự mong muốn góp phần bảo tồn và phát triển di sản văn hóa, giúp thế giới hiểu rõ hơn về những giá trị văn hóa và nghệ thuật độc đáo của Việt Nam Quảng bá thủ công mỹ nghệ không chỉ là việc giới thiệu sản phẩm, mà còn là việc kể chuyện về lịch sử, truyền thống và tâm huyết của những nghệ nhân đằng sau từng tác phẩm.

Đồng thời, nghiên cứu về quảng bá thủ công mỹ nghệ có thể mang lại cái nhìn sâu sắc về thị trường nghệ thuật hiện đại và làm nổi bật vị thế của Việt Nam trong cộng đồng quốc tế Điều này không chỉ tạo cơ hội thị trường mới cho người làm nghệ thuật mà còn giúp đẩy mạnh kinh tế văn hóa của đất nước Như vậy, lựa chọn đề tài quảng bá thủ công mỹ nghệ không chỉ là việc theo đuổi đam mê cá nhân mà còn là sứ mệnh bảo tồn và tôn vinh giá trị văn hóa, làm nổi bật vị thế của nghệ nhân và thủ công mỹ nghệ Việt Nam trên bản đồ nghệ thuật thế giới.

2 Mục tiêu của đề tài

Mục tiêu của việc quảng bá thủ công mỹ nghệ là tạo ra một hình ảnh mạnh mẽ và tích cực về nghệ thuật thủ công Việt Nam trên trường quốc tế Chúng ta đặt ra mục tiêu tăng cường nhận thức về giá trị văn hóa, sự sáng tạo và độ tinh tế của thủ công mỹ nghệ Việt Nam.

Ngoài ra, chúng ta muốn mở rộng thị trường cho thủ công mỹ nghệ Việt Nam, tạo cơ hội kinh doanh cho các nghệ nhân và doanh nghiệp Mục tiêu này không chỉ giúp phát triển nền kinh tế văn hóa mà còn tạo ra nguồn thu nhập ổn định cho cộng đồng nghệ nhân.

CHƯƠNG 2 GIỚI THIỆU CHUNG 1. 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àngBước 2: Lập kế hoạch

Bước 3: Lựa chọn tên miền website và hostingBước 4: Thiết kế giao diện

Bước 5: Xây dựng tính năng và nội dung websiteBước 6: Kiểm tra và chỉnh sửa

Bước 7: Bàn giao và hướng dẫn sử dụngBước 8: Bảo trì, xử lỹ khi có lỗi

2. Các công cụ thiết kế website 2.2.1 Microsoft Visual Studio Code

Hình 2.2.1.:Logo Visual Code

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.

3. HTML

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

3.1HTML là gì?

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…

Nhược điểm:

 Đượ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ẻ” <html> và </html>

- 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:

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

 Các <!DOCTYPE html> 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ử <html> là phần tử gốc của một trang HTML  Phần tử <head> chứa thông tin meta về trang HTML

 Phần tử <title> 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ử <body> 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ử <h1> xác định một tiêu đề lớn  Phần tử <p> 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.

3.4 Kiểu HTML

- 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 :

- 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.

3.7 Image – hình ảnh :Cú pháp:

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

3.8 Audio tag – Âm thanhCú pháp:

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

Thuộc tính:

- 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.

Minh họa Audio tag:

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 :Cú pháp:

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

Thuộc tính:

- 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 -

Pixel)

Minh họa Video tag:

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

3.10 Iframe tag :Cú pháp:

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

Thuộc tính:

- 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

Minh họa Iframe tag:

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

4 CSS

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

4.1 CSS là gì?

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.

4.3 Ưu điểm của CSS

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.