HTML có cấu trúc cơ bản với các tag thẻ và thuộc tính attributes được sử dụng để xác định các phần tử trên trang web.. Nó được sử dụng để kiểm soát định dạng của tất cả các trang web trê
Trang 1TRƯỜNG CAO ĐẲNG BÁCH KHOA NAM SÀI GÒN
KHOA CÔNG NGHỆ THÔNG TIN – KỸ THUẬT ĐIỆN
- -
BÁO CÁO THỰC TẬP THIẾT KẾ ĐỒ HỌA WEB
THIẾT KẾ GIAO DIỆN WEBSITE COFFEE
Sinh viên thực hiện: Nguyễn Thanh Trí
Lớp: CĐ21A-THUD
Khoa: Công Nghệ Thông Tin – Kỹ Thuật Điện
Thành Phố Hồ Chí Minh, tháng 04 năm 2023
Trang 2Thực tập thiết kế đồ họa web
LỜI MỞ ĐẦU
Ngày nay, với sự phát triển mạnh mẽ của khoa học công nghệ, Công nghệ Thông tin là một trong những ngành có vị thế dẫn đầu và có vai trò rất lớn trong sự phát triển chung đó Các ứng dụng của công nghệ thông tin được áp dụng trong mọi lĩnh vực nghiên cứu khoa học cũng như trong mọi lĩnh vực của đời sống Là một phần của Công nghệ Thông tin, Công nghệ web đang có được sự phát triển mạnh mẽ và phổ biến rất nhanh bởi những lợi ích mà nó mang lại cho cộng đồng là rất lớn
Cuộc sống con người ngày càng phát triển, nhu cầu nuôi thú cưng cũng tăng theo Mọi người sẵn sàng chi đến tận vài triệu đồng để rước cho mình những chú thú cưng sịn sò
Bằng việc lựa chọn và thực hiện đề tài “Xây dựng Web bán đồ dùng thú cưng” em
muốn tìm hiểu và đưa ra một giải pháp tốt nhằm giải quyết việc chia sẻ kiến thức, kinh nghiệm chăm sóc thú cưng
Trang 3Thực tập thiết kế đồ họa web
MỤC LỤC
LỜI MỞ ĐẦU 2
DANH MỤC HÌNH ẢNH 5
CHƯƠNG 1: TỔNG QUAN 6
1.1 Tổng quan thông tin trang web, sản phẩm 6
1.2 Tổng quan ngôn ngữ lập trình, thiết kế web 6
1.2.1 Tổng quan về ngôn ngữ thiết kế web html: 6
1.2.2 Tổng quan về ngôn ngữ css: 6
1.2.3 Tổng quan về ngôn ngữ JavaScript: 8
CHƯƠNG 2: THIẾT KẾ WEBSITE 10
2.1 Thiết kế logo 10
2.2 Thiết kế poster, sự kiện, sản phẩm mới 10
2.2.1 Banner web: 10
2.2.2 Poster sản phẩm 12
2.3 Thiết kế layout website 13
2.3.1 Các layout website: 13
2.3.2 Layout trang sản phẩm chi tiết: 14
2.4 Thiết kế sản phẩm 15
CHƯƠNG: XÂY DỰNG WEB SITE 17
3.1 Hiệu chỉnh CSS và JAVASCRIPT 17
3.2 Demo 17
3.3 Xuất bản Trang web 17
CHƯƠNG 4: KẾT LUẬN 18
4.1 Ưu điểm 18
4.2 Khuyết điểm 18
4.3 Hướng phát triển 18
Trang
Trang 4Thực tập thiết kế đồ họa web
Trang 5DANH MỤC HÌNH ẢNH
Hình 1 Logo 9
Hình 2 Hình banner 1 9
Hình 3 Banner 2 10
Hình 4 Banner 3 10
Hình 5 Poster sản phẩm 11
Hình 6 Kết hợp giữa poster và sản phẩm 11
Hình 7 Kết hợp giữa poster và sản phẩm 2 12
Hình 8 Layout trang chủ 12
Hình 9 Layout sản phẩm chi tiết 13
Hình 10 Sản phẩm Coffee 14
Hình 11 Đá xây 14
Hình 12 Nước trái cây 15
Hình 13 Trà sữa và sodaHình 14 Trà trái cây và bánh ngọt 15
Trang 6Thực tập thiết kế đồ họa web
CHƯƠNG 1: TỔNG QUAN
1.1 Tổng quan thông tin trang web, sản phẩm
Trang web được thiết kế để truyền thông về quán coffee mang thương hiệu ThanhTrí Sản phẩm là những thức uống, hạt cà phê,… Mục đích của trang web được thiết kế để thu hút khách hàng
Trang web được xây dựng bằng ba ngôn ngữ chính: html, css, javascript…
1.2 Tổng quan ngôn ngữ lập trình, thiết kế web
1.2.1 Tổng quan về ngôn ngữ thiết kế web html:
HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu được sử dụng để xây dựng các trang web HTML cho phép các nhà phát triển web định dạng văn bản, trình bày hình ảnh, âm thanh và video, tạo liên kết đến các trang web khác và xây dựng các biểu mẫu để tương tác với khách hàng
HTML có thể được tạo ra bằng bất kỳ trình soạn thảo văn bản nào hoặc các cụ phát triển web như Visual Studio Code, Dreamweaver, Notepad++, và nhiều công cụ khác Để hiển thị nội dung HTML trên trang web, các trình duyệt web như Google Chrome, Mozilla Firefox, Safari hoặc Microsoft Edge sẽ hiển thị trang web chứa HTML HTML có cấu trúc cơ bản với các tag (thẻ) và thuộc tính (attributes) được sử dụng
để xác định các phần tử trên trang web Các tag bao gồm thẻ mở và thẻ đóng nhằm đánh dấu phần tử trên trang web HTML5 là phiên bản mới nhất của HTML và cung cấp nhiều tính năng mới cho các nhà phát triển web
1.2.2 Tổng quan về ngôn ngữ css:
CSS - Cascading Style Sheets là một ngôn ngữ lập trình dùng để miêu tả và định dạng kiểu cho các trang web Nó được sử dụng để kiểm soát định dạng của tất cả các trang web trên Internet và là một phần quan trọng của front-end development
CSS được tạo ra như một phần của chuẩn HTML để giúp các nhà thiết kế và nhà phát triển web có thể kiểm soát các định dạng của trang web một cách dễ dàng, hiệu quả, ciu tập trung và tái sử dụng Thay vì phải tạo các kiểu cho từng trang riêng biệt, CSS cho
Trang 7Thực tập thiết kế đồ họa web
phép bạn thiết kế các kiểu định danh cho các phần khác nhau của trang web, chẳng hạn như các đối tượng HTML, văn bản, bảng, khung và nhiều hơn nữa
Các tính năng của CSS bao gồm:
Điều chỉnh kích thước, độ rộng và chiều cao của các phần tử trên trang web Định dạng văn bản, chẳng hạn như font, màu sắc, cỡ chữ, độ đậm, khoảng cách giữa các dòng và nhiều hơn nữa Định dạng khối, chẳng hạn như cách thức hiển thị các phần
tử, màu sắc nền, đường viền, margin và padding Thêm hiệu ứng động vào các phần tử, chẳng hạn như thay đổi màu sắc, kích thước và vị trí của các phần tử khi nhấp chuột vào hoặc di chuột vào đối tượng
Trong CSS, công cụ quan trọng để định dạng kiểu là các Mỗi rule được viết dưới dạng một khối định dạng với các thành phần đầu vào chính là selector, declaration và property Selector là phần của rule mà sẽ được áp dụng định dạng, ví dụ như tên của một phần tử HTML, tên một lớp hay một id của một phần tử
Declaration là phần của rule bao gồm một hoặc nhiều các thông tin định dạng như font size, background color, margin Property là khai báo của Declaration mô tả kiểu định dạng cho Selector, gồm các giá trị do người lập trình được gọi ra trong các tài liệu định dạng CSS
CSS cũng cho phép tái sử dụng các định dạng kiểu bằng cách sử dụng các class để tạo các định dạng chung có thể được áp dụng cho nhiều đối tượng khác nhau Điều này giúp tiết kiệm thời gian và tăng tính linh hoạt trong quá trình phát triển trang web Ngoài ra, CSS còn cho phép kết hợp với các ngôn ngữ lập trình khác như JavaScript
để tạo ra các hiệu ứng động và tương tác trực tuyến
Tuy nhiên, việc áp dụng CSS đôi khi cũng gặp phải những khó khăn nhất định Các lỗi trong việc áp dụng định dạng, hoặc lỗi trong việc chọn phần tử Selector, hoặc các lỗi định dạng khác cũng dễ xảy ra nếu không quen thuộc với ngôn ngữ CSS
Trang
Trang 8Thực tập thiết kế đồ họa web
1.2.3 Tổng quan về ngôn ngữ JavaScript:
JavaScript là một ngôn ngữ lập trình phổ biến được sử dụng phía client để tương tác với các thành phần trên trang web như HTML, CSS Nó là ngôn ngữ lập trình đa nền tảng, có thể chạy trên mọi trình duyệt web phổ biến và cũng được sử dụng để phát triển các ứng dụng web động và cả các ứng dụng desktop thông qua các công cụ như Electron JavaScript được phát triển bởi Netscape vào đầu những năm 1990 và hiện nay đã trở thành một phần không thể thiếu của các ứng dụng web
JavaScript là một ngôn ngữ lập trình thông dịch, nghĩa là các đoạn mã được viết bằng JavaScript sẽ được đọc và thực thi bởi trình duyệt web ngay khi người dùng truy cập vào trang web chứa chúng JavaScript là một ngôn ngữ nhiều mục đích, cho phép thực hiện nhiều loại công việc khác nhau, bao gồm xử lý sự kiện, thao tác với DOM (Document Object Model), tạo ra hiệu ứng động, gửi và nhận dữ liệu từ web server, xử lý kiểu dữ liệu và nhng các thư viện củaên thứ ba
JavaScript còn có thể được sử dụng để phát triển các ứng dụng web đơn giản hay phức tạp, bao gồm các trò chơi trực tuyến, ứng dụng mã hóa, trình duyệt để soạn thảo HTML, và các ứng dụng mạng xã hội Hiện nay, JavaScript đã trở thành một trong các ngôn ngữ lập trình phổ biến nhất trên thế giới, với một cộng đồng sáng tạo và phát triển ngày càng lớn
JavaScript được phát triển dựa trên các chuẩn ECMAScript, là một tập hợp các quy tắc và hướng dẫn để viết và sử dụng JavaScript Từ phiên bản thứ 6 (ES6), JavaScript có thêm rất nhiều tính năng mới, giúp cho ngôn ngữ trở nên linh hoạt và dễ sử dụng hơn ES6 bao gồm các tính năng như khai báo biến mới với let và const, tạo hàm arrow function, lớp class, module exports, viết dài văn bản trong đoạn template literal (backticks) và nhiều tính năng khác
Với việc phát triển Web 2.0, JavaScript đã trở thành một công cụ mạnh mẽ để phát triển các ứng dụng web động, cũng như tạo ra các trang web tương tác giữa trình duyệt web và người dùng Việc sử dụng Frameworks như Angular, React, VueJS cũng giúp cho việc phát triển ứng dụng web trở nên dễ dàng và hoạt hơn
Trang 9Thực tập thiết kế đồ họa web
JavaScript cũng có thể được sử dụng để phát triển các ứng dụng di động thông qua các framework như React Native và NativeScript Ngoài ra, JavaScript còn được sử dụng
để phát triển các ứng dụng desktop thông qua các framework như Electron
Tổng quan về JavaScript cho thấy nó là một ngôn ngữ lập trình mạnh mẽ và phổ biến, đóng vai trò quan trọng trong việc phát triển ứng dụng web và ứng dụng di động
Trang
Trang 10Thực tập thiết kế đồ họa web
CHƯƠNG 2: THIẾT KẾ WEBSITE
2.1 Thiết kế logo
Logo của trang web được lấy ý tưởng từ một thức uống nổi tiếng ở sứ sở thành Rome (Nước ý)
Hình 1 Logo
2.2 Thiết kế poster, sự kiện, sản phẩm mới.
2.2.1 Banner web:
Hình 2 Hình banner 1
Trang 11Thực tập thiết kế đồ họa web
Hình 3 Banner 2
Hình 4 Banner 3
Các banner được thiết kế ở trang chủ tạo sức thu hút đối với khách hàng khi truy cập trang web
2.2.2 Poster sản phẩm
Poster được thiết kế phục vụ cho mục đích làm background cho sản phẩm để trưng bày lên menu quán Các ly nước (hình sản phẩm) được lưu dưới định dạng “png” để kết hợp với poster
Trang
Trang 12Thực tập thiết kế đồ họa web
Hình 5 Poster sản phẩm
Hình 6 Kết hợp giữa poster và sản phẩm
Trang 13Thực tập thiết kế đồ họa web
2.3 Thiết kế layout website
2.3.1 Các layout website:
Trang web sẽ có 2 layout chính: 1 layout trang chủ và 1 layout trang sản phẩm trong đó:
Layout trang chủ:
Hình 8 Layout trang chủ
Trang
Trang 14Thực tập thiết kế đồ họa web
Các thành phần trong layout trang chủ được thiết kế chủ yếu là bố cục đối xứng gồm các thành phần như sau:
- Navbar: được chia làm ba: Logo, Navbar, Searching icon
- Carosuel: là dạng slider mục đích mang đến sự án tượng cho người truy cập
- Introduction: một bài viết ngắn để giới thiệu về quán cà phê
- Menu: Các thức uống được thiết kế theo dang menu slider, mỗi slide là các dạng thức uống khác nhau
- FeedBack: Những đánh giá bình luận của khách hàng
- Footer: Chứa các nav-link và icon social media
1.1.2 Layout trang sản phẩm chi tiết:
Hình 9 Layout sản phẩm chi tiết
Các thành phần trong layout trang chủ được thiết kế chủ yếu là bố cục đối xứng gồm các thành phần như sau:
- Navbar: được chia làm ba: Logo, Navbar, Searching icon
Trang 15Thực tập thiết kế đồ họa web
- Mô tả chi tiết: nguồn gốc và xuất sứ của sản phẩm
- Menu: Các thức uống được thiết kế theo dang menu slider, mỗi slide là các dạng thức uống khác nhau
- Footer: Chứa các nav-link và icon social media
2.4 Thiết kế sản phẩm
Sản phẩm được thiết kế dưới dạng png để phối hợp chèn vào poster
Danh sách hình sản phẩm:
- Cà phê: 21 sản phẩm
- Đá xây: 5 sản phẩm
- Nước trái cây: 9 sản phẩm
- Trà sữa và soda: 8 sản phẩm
- Trà trái cây và bánh ngọt: 8 sản phẩm
Tổng cộng 50 sản phẩm
Quán muốn đánh mạnh vào chủ đề chính là coffee nên các món nước chủ đạo của quán sẽ là những ly cà phê được chế biến với nhiều loại khác nhau
Hình 10 Sản phẩm Coffee
Hình 11 Đá xây
Trang
Trang 16Thực tập thiết kế đồ họa web
Hình 12 Nước trái cây
Hình 13 Trà sữa và soda
Hình 14 Trà trái cây và bánh ngọt
Trang 17Thực tập thiết kế đồ họa web
CHƯƠNG 3: XÂY DỰNG WEB SITE
3.1 Hiệu chỉnh CSS và JAVASCRIPT
Các thuộc tính CSS chính dùng để định dạng file Document HTML
Thuộc tính:
- Position: Thuộc tính dùng để xác định đối tượng cha và con trong một element
- Margin: Thuộc tính canh khoảng cách của các Element với nhau
- Display: Dạng Box Model được hiện thị trong một Element
- Các thuộc tính Text (Font-size, font-family,….): Các thuộc tính css dùng để chỉnh sửa các TextNode trong html
- Trasition: Thời gian khi hover đến đối tượng
- Tranform: Thuộc tính dùng để di vị trí của Element
- CSS Hover: Thuộc tính dùng để định dạng Element khi có thao tác trỏ chuột đến Element
- Background-color: Thay đổi màu nền của một Element
- Background-Image: Thêm hình ảnh cho một Element
- Max-with: Kích thước có thể chứa được trong giao diện
- Width: Chiều dài của Element
- Height: Chiều cao của Element
- KeyFrames: Sự thay đổi của một đối tượng từ vị trí này đến vị trí khác trong một khoảng thời gian
- Color: Màu sắc của text
- Border: Đường viền của Box model
- Box-shadow: Đổ bóng cho Element
- Padding: Khoảng cách của nội dung bên trong Element
- Line-height: Khoảng cách giữa các dòng
- Z-index: Layer
3.2 Demo
3.3 Xuất bản Trang web
Trang
Trang 18Thực tập thiết kế đồ họa web
CHƯƠNG 4: KẾT LUẬN
4.1 Ưu điểm
4.2 Khuyết điểm
4.3 Hướng phát triển