Báo cáo thực tập thiết kế đồ họa web thiết kế giao diện website coffee

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