intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE
 » 
 » 

Bài giảng Thiết kế và triển khai Website - Trường đại học Thương Mại

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:43

Thêm vào BST
Báo xấu
39
lượt xem 6
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng "Thiết kế và triển khai Website" có nội dung gồm có 4 chương: Chương 1 - Tổng quan về thiết kế và triển khai website; Chương 2 - Thiết kế và xử lý đồ họa trên website; Chương 3 - Một số ngôn ngữ xây dưng Website 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 6; Chương 4 - Triển khai Website. Mời các bạn cùng tham khảo!

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Thiết kế và triển khai Website - Trường đại học Thương Mại

  1. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT THIẾT KẾ VÀ TRIỂN KHAI WEBSITE Trường Đại học Thương mại Khoa HTTT Kinh tế và THMĐT • Phân phối tiết học Bộ môn Công nghệ thông tin − Lý thuyết:  27 tiết − Thảo luận: 6 tiết − Thực hành: 12 tiết Thực hành: 12 tiết Bài giảng học phần: • Đánh giá kết quả Thiết kế và triển khai Website • ‐ Điểm chuyên cần: 10% • ‐ K/Tra + T/Hành+T/luận: 30% • ‐ Thi cuối kỳ: 60%  8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 1 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 2 MỤC TIÊU CỦA MÔN HỌC MỤC TIÊU CỤ THỂ • Cung cấp những kiến thức cơ bản về Internet, World • Môn học cung cấp những kiến thức cơ bản về wide web, giao thức HTTP, giao thức FTP, ngôn ngữ world wide web, các giao thức, ngôn ngữ đánh dấu HTML,... đánh dấu và một số ngôn ngữ khác dùng để tạo web. web Thông qua việc giới thiệu một số • Một số ngôn ngữ và công cụ trợ giúp thiết kế và xây công cụ thiết kế và trợ giúp việc xây dựng dựng website. website, giúp học viên nắm được những yêu • Qui trình triển khai, nâng cấp, bảo trì, Phương thức cầu, qui trình thiết kế và triển khai một quảng bá trang web trên mạng. website thực tế. • Quy trình thiết kế và triển khai một website TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 3 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 4 TÀI LIỆU THAM KHẢO NỘI DUNG CHƯƠNG TRÌNH • TLTK bắt buộc: • [1] Harvey & Paul, Internet & World Wide Web: How to Program Chương 1. Tổng quan về thiết kế và triển khai (4th Edition), Deitel & Associates (Paperback), 2010 website  • [2] Gerry McGovern, The Website Manager’s Handbook, ISBN:  978‐1‐4116‐8529‐1,  Chương 2. Thiết kế và xử lý đồ họa trên website • Shane Diffily, 2014 Chương 3. Một số ngôn ngữ xây dưng Website • [3] Nguyễn [3] N ễ Trường T ờ Sinh, Thiết Si h Thiết kế Web bằng W b bằ hình hì h minh hoạ, NXB  i h h NXB Minh Khai, 2007 Chương 4. Triển khai Website • [4] Phạm Hữu Khang, Xây dựng và triển khai ứng dụng TMĐT,  NXB Thống kê, 2006 • [5] Lê Tuấn Hùng, Huỳnh Quyết Thắng, Kỹ thuật đồ họa, NXB  KH&KT, 2005 • [6] Giáo trình tự học Photoshop CS6,  Internet 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 5 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 6 Bài giảng Thiết kế và triển khai Website 1
  2. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT Nội dung Chương 1 1.1. Một số khái niệm cơ bản 1.2. Nguyên tắc và quy trình thiết kế Website Tổng quan về thiết kế và 1.3 Nguyên tắc và quy trình triển khai Website triển khai website Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 7 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8 TMĐT 1.1. Một số khái niệm cơ bản 1.1.1. Cơ bản về Internet 1.1.1. Cơ bản về Internet • Mạng máy tính – phân loại theo 1.1.2. World wide web ‐ Website phạm vi địa lý 1.1.3. Giao thức truyền nhận Client/Server  • Hệ điều hành mạng • Môô hình hì h TCP/IP / • Dịch vụ tên miền 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 9 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 10 4 lớp của mô hình TCP/IP  Chồng giao thức TCP/IP • Layer 4: Application (ứng dụng) • Layer 3: Transport (vận chuyển) • Layer 2: Internet  • Layer 1: Network access (truy  cập mạng) 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 11 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 12 Bài giảng Thiết kế và triển khai Website 2
  3. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT DNS: nhớ tên thay vì địa chỉ IP Hệ thống quản lý tên miền • DNS server là một máy trên mạng có nhiệm vụ quản lý tên miền và đáp ứng các yêu cầu của client • Có nhiều DNS server liên kết với nhau, chia sẻ và quản lý truy vấn đến CSDL tên miền • CSDL tên miền có cấu trúc phân cấp 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 13 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 14 Cấu trúc CSDL tên miền DNS: không gian tên miền • Kiến trúc tên miền không bắt buộc các tên miền phải tuân theo quy cách đặt tên, tuy nhiên, chúng được quản lý một cách tập trung . • Cú pháp của tên không cho biết đối tượng được đặt tên là gì: ví gì: ví dụ www.ptithcm.edu.vn www ptithcm edu vn là một máy tính,  tính trong khi ptithcm.edu.vn lại là tên miền com edu gov vn fr uk vnn com edu gov 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 15 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 16 DSN • ví dụ: yêu cầu truy cập đến www.cs.purdue.edu.vn từ it‐ lab.ptithcm.edu.vn sẽ theo tiến trình như sau: 1.1.2. World wide web - Website vn  edu  purdue  cs  8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 17 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 18 Bài giảng Thiết kế và triển khai Website 3
  4. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT WWW • World Wide Web là một bước tiến lớn trong quá trình tìm 1.1.3. Giao thức truyền nhận kiếm thông tin nhanh, đa dạng và mạnh mẽ. Các server WWW khác nhau sẽ thực hiện các trình duyệt (browser) trong Client/Server khác nhau. yệ khác nhau sẽ có những • Các trình duyệt gg giả định ị khác nhau về kết xuất và máy tính của bạn, tuy nhiên tùy thuộc vào thói quen và sở thích bạn có thể dùng chương trình duyệt Web cho thích hợp. Hiện nay các chương trình duyệt Web rất nhiều và đa dạng chẳng hạn như : • Internet Explorer, Fire Fox, … 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 19 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 20 Mô hình Client/Server Mô hình Client/Server • Trong mô hình này, chương trình ứng • Việc giao tiếp giữa client và server được thực hiện dưới hình thức trao đổi các thông điệp (Message). dụng được chia thành 2 thành phần: • Để được phục vụ, client sẽ gửi một thông điệp yêu cầu – Quá trình chuyên cung cấp một số phục vụ (Request Message) mô tả về công việc muốn server thực hiện. nào đó, chẳng hạn: phục vụ tập tin, phục vụ • Khi nhận được thông điệp yêu cầu, server tiến hành máy in, phục vụ thư điện tử, phục vụ Web... phân tích để xác định công việc cần phải thực thi. thi Các quá trình này được gọi là các trình phục • Nếu việc thực hiện yêu cầu này có sinh ra kết quả trả vụ hay Server. về, server sẽ gởi nó cho client trong một thông điệp trả lời (Reply Message). – Một số quá trình khác có yêu cầu sử dụng • Dạng thức (format) và ý nghĩa của các thông điệp trao các dịch vụ do các server cung cấp được gọi đổi giữa client và server được qui định rõ bởi giao thức (protocol) của ứng dụng. là các quá trình khách hàng hay Client. 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 21 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 22 Chế độ nghẽn • Trong chế độ này, khi quá trình client hay server phát ra lệnh gởi dữ liệu, (thông thường g bằngg lệnh ệ send) , sự thực thi của nó sẽ bị tạm dừng cho đến khi quá trình nhận phát ra lệnh nhận số dữ liệu đó (thường là lệnh receive). Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 23 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 24 TMĐT Bài giảng Thiết kế và triển khai Website 4
  5. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT Chế độ không nghẽn • Trong chế độ này, 1.2. Nguyên tắc và quy trình thiết kế Website khi quá trình client 1.2.1. Các nguyên tắc trong thiết kế website hay server phát ra 1.2.2. Quy trình chung thiết kế Website lệnh gởi dữ liệu, sự thực ự thi của nó vẫn được tiếp ế tục mà không quan tâm đến việc có quá trình nào phát ra lệnh nhận số dữ liệu đó hay không. 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 25 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 26 1.2.1. Các nguyên tắc trong thiết kế website 1.2.1. Các nguyên tắc trong thiết kế website • Tổ chức website chặt chẽ và dễ sử dụng 1. Khái quát • Sử dụng từ ngữ dễ hiểu.  2. Các bước tổ chức thông tin • Dễ dàng khám phá các đường link.  3. Các kiểu cấu trúc thiết kế • Thời gian tải về nhanh.  • Tương thích với đa số trình duyệt web.    8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 27 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 28 1. Khái quát 2. Các bước tổ chức thông tin  • Cần phải chia nhỏ các khối thông tin lớn. • Phân chia thông tin thành các đơn vị logic • Các nhà tâm lý học nhận thức • Giúp ghi nhớ dễ hơn bằng việc sử dụng kết hợp giữa thiết kế • Thiết lập hệ thống phân cấp thông tin đồ hoạ, qui ước lớp và biên tập thông tin thành các đơn vị • Tạo mối quan hệ giữa các hệ thống phân cấp riêng rẽ thôngg tin • Thực tế với độc giả các tin ngắn gọn, riêng biệt sẽ chức năng • Phân tích sự thành công về chức năng và thẩm hoá hơn và dễ định vị hơn khối thông tin dài mỹ của các hệ thống thông tin • Tổ chức các đoạn tin nhỏ thành các khối thông tin riêng để tạo nên hệ thống đồng nhất, hình thành nên cơ sở các liên kết hypertext. 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 29 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 30 Bài giảng Thiết kế và triển khai Website 5
  6. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT Sơ đồ phân bố thông tin của website Ngân Hàng Công Thương Sơ đồ hệ thống phân cấp của một website 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 31 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 32 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 33 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 34 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 35 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 36 Bài giảng Thiết kế và triển khai Website 6
  7. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 37 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 38 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 39 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 40 3. Các kiểu cấu trúc thiết kế a. Cấu trúc nối tiếp (Sequence) a. Cấu trúc nối tiếp (Sequence) b. Cấu trúc phân cấp (Hierarchy) c. Cấu trúc ô lưới (Grid) ạ g nhện d. Cấu trúc mạng ệ ((Web)  )  Thể hiển thị thông tin một tin một cách tuần tự, tiếp tự tiếp nối nhau như một bản tường thuật, theo thời gian  Ví dụ như một chuỗi logic các chủ đề được phát triển từ tổng quát đến cụ thể, hoặc cũng có thể theo thứ tự abc, như các chỉ số, tự điển bách khoa, từ điển thuật ngữ 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 41 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 42 Bài giảng Thiết kế và triển khai Website 7
  8. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT b. Cấu trúc phân cấp (Hierarchy) c. Cấu trúc ô lưới (Grid) • Ưu điểm: • Là một trong những – Cấu trúc là cách tốt để phản ánh tương quan các biến số như cách tốt nhất để tổ sự kiện, công nghệ , văn hoá, … chức các khối thông tin  – Các chủ đề không có sự phân cấp về mức độ quan trọng phức hợp. – Rất tốt với các độc giả có kinh nghiệm, những người đã có • Cấu Cấ trúcú phân hâ cấp ấ đặc đặ sẵn ẵ kiến thức về chủ đề và hệ thống biệt thích hợp cho các – Các sơ đồ tổng quát có thể rất hữu ích đối với các site kiểu website vì các website  lưới luôn được thực hiện rẽ • Nhược điểm: nhánh từ một trang chủ – Khó hiểu với độc giả khi độc giả chưa xác định được mối liên duy nhất. quan giữa các loại thông tin 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 43 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 44 d. Cấu trúc mạng nhện Sơ đồ tổng quan cấu trúc ô lưới • Ưu điểm: ‐ Khai thác triệt để năng lực của các trang web trong việc liên kết và kết hợp. ‐ Ý tưởng liên kết giống nhau và tự do.  • Nhược điểm: ‐ Các khối thông tin dễ phát triển thành một mớ hỗn độn, lộn xộn.  ‐ Nhằm vào các độc giả chuyên nghiệp tìm kiếm những kiến thức chuyên sâu. 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 45 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 46 Kết luận Nguyên tắc sử dụng hiệu ứng * Đa số các website đều sử 1. Các nguyên tắc nghệ thuật dụng cả 4 kiểu cấu trúc thông tin trên. 2. Các nguyên tắc sử dụng hình ảnh, đồ hoạ,  * Tuy nhiên hệ thống thông text tin vẫn p phải trình bàyy một ộ cách minh bạch, nhất quán để hỗ trợ cho các mục đích của website.  Sơ đồ phản ánh mối tương quan giữa 4 kiểu cấu trúc 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 47 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 48 Bài giảng Thiết kế và triển khai Website 8
  9. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT 1. Các nguyên tắc nghệ thuật 1. Các nguyên tắc nghệ thuật a. Tính đồng nhất về mặt hình ảnh: b. Phá vỡ các quy tắc thiết kế ‐ sự cân bằng: ‐ Sự cân bằng đối xứng: Không có tính đồng  nhất về mặt hình  ảnh Chỉ có tính đồng  nhất về mặt trí tuệ 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 49 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 50 1. Các nguyên tắc nghệ thuật 2. Nguyên tắc sử dụng hình ảnh, đồ hoạ, text c. Cung cấp một tiêu điểm: • Nên kết hợp giữa đồ họa và văn bản ‐ Sử dụng sự tương phản: • Điều chỉnh kích cỡ sao cho hợp lý Thỏ 1 năm tuổi 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 51 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 52 1.2.2. Quy trình chung thiết kế Website • Khái quát chung  • Thiết kế giao diện • Thiết kế nội dung kế nội dung 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 53 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 54 Bài giảng Thiết kế và triển khai Website 9
  10. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT 1.2.2. Quy trình chung thiết kế Website Các ứng dụng trên công nghệ Web • Thiết kế Website không chỉ chú trọng đến ngôn ngữ HTML, các công cụ phát triển Web mà còn phải tập trung vào việc thiết kế thiết kế đồ hoạ, giao diện • Đào tạo người sử dụng hay những kiến thức về cách thức tổ • Dạy học chức thông tin,… • Giá dục Giáo d • Tham khảo • Trước khi xây dựng một Website, chúng ta cần phải: – Xác định đối tượng độc giả của website – Xác định mục đích của Website – Thiết lập các chủ đề chính của website – Thiết kế các khối thông tin chủ yếu mà website cung cấp 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 55/55 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 56/55 Thiết kế giao diện TK giao diện hướng người sử dụng • Giao diện người dùng đồ hoạ (GUI) của hệ thống tạo • Mục tiêu giúp người sử dụng tự điều khiển nên nét đặc trưng "nhìn thấy và cảm nhận" của các được máy tính của họ trang web • Không thể hoàn toàn tách rời thiết kế đồ hoạ với thiết • Không được đặt bất cứ cản trở nào cho người kế giao diện sử dụngg • Trả lời các câu hỏi: • Cần các kiến thức về tâm lý học khách hàng – Ai? – Cái gì? – Khi nào? – Nơi nào? 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 57/55 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 58/55 Tương thích với các trình duyệt khác nhau Thiết kế nội dung • Các phần nội dung cơ bản trong 1 Webiste • Nhiều độc giả không có chương trình duyệt đồ hoạ • Làm thế nào để các độc giả với web browser không có khả • Một số chức năng thường gặp của website và năng đồ hoạ vẫn hiểu được chức năng của hình ảnh trên trang mục đích sử dụng web (sử dụng nhãn ALT) • Giúp các độc giả khiếm thị có thể nghe các thông báo thay thế • Nội ộ dung cơ g bản của một ộ số website TMĐT mà chúng ta cho hỗ trợ cùng hình ảnh đồ hoạ, do đó không – Trang chủ (home page)  hoàn toàn mất hẳn nội dung của bức ảnh, phím đồ hoạ đi kèm – Trang liên hệ (contact us)  trang web  – Trang thông tin giới thiệu về doanh nghiệp (about us) – Trang giới thiệu về sản phẩm dịch vụ (products/services)  – Trang hướng dẫn hoặc chính sách (Policies)  • 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 59/55 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 60/55 Bài giảng Thiết kế và triển khai Website 10
  11. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT 1.3 Nguyên tắc và quy trình triển Thiết kế nội dung khai Website • Nội dung cơ bản của một số website  • 1.3.1. Các nguyên tắc trong triển khai Website TMĐT: • 1.3.2. Quy trình chung triển khai Website – Giới thiệu về Cty – Quảngg cáo sản pphẩm – Đặt hàng – Thanh toán trực tuyến – Đấu giá trực tuyến – Liên kết với các site thành viên – Liên hệ với doanh nghiệp – … 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 61/55 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 62/55 1.3.1. Các nguyên tắc trong triển khai  1.3.2. Quy trình chung triển khai  Website Website • Kiểm tra thật kỹ website trước khi triển khai • Đưa website lên Internet • Thuê không gian lưu trữ web đủ lớn và nên  • Quảng bá website mua ở các tổ chức đáng tin cậy • Cập nhật và bảo trì website • Nên có quá trình thử nghiệm trước khi đưa  ê ó á ì h hử hiệ ớ khi đ trang web hoạt động chính thức • Nâng cấp và bảo trì trang web thường xuyên 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 63 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 64 Chương 2. Thiết kế và xử lý đồ họa  2.1.1. Khái niệm chung trên website • 2.1. Tổng quan về đồ họa • Đồ họa máy tính là một trong những lĩnh vực  • 2.2. Thiết kế đồ họa cho website hấp dẫn và phát triển rất mau lẹ, nó làm thay  đổi hoàn toàn việc tương tác giữ người và  • 2.3. Công cụ photoshop cho xử lý đồ họa máy.  • Nhờ vào đồ họa máy tính mà một loạt các ứng  dụng máy tính ra đời, đồ họa giúp cho việc  giao tiếp với máy tính trở nên dễ dàng hơn, nó  được ứng dụng trong nhiều lĩnh vực như khoa  học công nghệ, y học, kiến trúc, giải trí…. 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 65 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 66 Bài giảng Thiết kế và triển khai Website 11
  12. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT Phân loại theo các lĩnh vực của đồ hoạ máy  2.1.2. Phân loại về đồ họa máy tính tính • Phân loại theo các lĩnh vực của đồ hoạ máy • Kiến tạo đồ họa: – Các hệ CAD/CAM (Computer Aided Design/Computer  tính Aided Manufacture System): kỹ thuật đồ hoạ tập hợp các  công cụ, các kỹ thuật trợ giúp cho thiết kế các chi tiết và  – Kiến tạo đồ họa các hệ thống khác nhau: hệ thống cơ, hệ thống điện, hệ  – Xử lý đồ họa. họa thống điện tử…. thống điện tử…. – Đồ hoạ minh hoạ (Presentation Graphics): gồm các công cụ  • Phân loại theo hệ toạ độ giúp hiển thị các số liệu thí nghiệm một cách trực quan,  dựa trên các mẫu đồ thị hoặc các thuật toán có sẵn. – Tọa độ 2 chiều(2D)  – Đồ hoạ hoạt hình và nghệ thuật: bao gồm các công cụ giúp  – Tọa độ 3 chiều(3D) cho các hoạ sĩ, các nhà thiết kế phim hoạt hình chuyên  nghiệp làm các kỹ xảo hoạt hình, vẽ tranh... Ví dụ: phần  mềm 3D Studio, 3D Animation, 3D Studio Max. 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 67 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 68 Phân loại theo các lĩnh vực của đồ hoạ  Phân loại theo hệ toạ độ:tọa độ 2  máy tính chiều(2D) và 3 chiều(3D) • Xử lý đồ họa: • Kỹ thuật đồ hoạ hai chiều: là kỹ thuật đồ hoạ  – Kỹ thuật xử lý ảnh (Computer Imaging): sau quá trình xử lý  ảnh cho ta ảnh số của đối tượng. Trong quá trình xử lý ảnh  máy tính sử dụng hệ toạ độ hai chiều (hệ toạ  sử dụng rất nhiều các kỹ thuật phức tạp: kỹ thuật khôi  độ phẳng), sử dụng rất nhiều trong kỹ thuật  phục ảnh, kỹ thuật làm nổi ảnh, kỹ thuật xác định biên ảnh. xử lý bản đồ đồ thị xử lý bản đồ, đồ thị. – Kỹ thuật nhận dạng (Pattern Recognition): từ những ảnh  mẫu có sẵn ta phân loại theo cấu trúc, hoặc theo các tiêu  • Kỹ thuật đồ hoạ ba chiều: là kỹ thuật đồ hoạ  trí được xác định từ trước và bằng các thuật toán chọn lọc  để có thể phân tích hay tổng hợp ảnh đã cho thành một  máy tính sử dụng hệ toạ độ ba chiều, đòi hỏi  tập hợp các ảnh gốc, các ảnh gốc này được lưu trong một  rất nhiều tính toán và phức tạp hơn nhiều so  thư viện và căn cứ vào thư viện này ta xây dựng được các  thuật giải phân tích và tổ hợp ảnh. với kỹ thuật đồ hoạ hai chiều. 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 69 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 70 Hỗ trợ thiết kế (CAD – Computer‐ 2.1.3. Ứng dụng của đồ họa máy tính Aided Design) • Hỗ trợ thiết kế (CAD – Computer‐Aided  • Hỗ trợ thiết kế được xem như một ứng dụng  Design) chính của đồ họa tương tác đối tượng không  • Giao diện người dùng và máy tính gian, trong đó đối tượng được xây dựng trực  • Biểu iể diễn diễ thông hô tin i tiếp như là mô hình thiết kế tiếp như là mô hình thiết kế.  • Lĩnh vực giải trí, nghệ thuật • Ngày nay CAD đã được sử dụng hầu hết trong  việc thiết kế các cao ốc, ô tô, máy bay, tàu  • Giáo dục và đào tạo thủy, tàu vũ trụ, máy tính, trang trí mẫu vải, và  • Bản đồ học rất nhiều sản phẩm khác. 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 71 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 72 Bài giảng Thiết kế và triển khai Website 12
  13. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 73 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 74 Giao diện người  dùng và máy tính • Giao diện đồ họa thực sự là một cuộc cách mạng mang  lại sự thuận tiện và thoải mái cho người dùng ứng  dụng. Các ứng dụng dựa trên hệ điều hành MS  Windows là một minh họa rất trực quan của giao diện  đồ họa. Các chức năng của các ứng dụng này được  thiết kế cho người dùng làm việc thông qua các biểu thiết kế cho người dùng làm việc thông qua các biểu  tượng mô tả chức năng đó. Ví dụ, chức năng lưu tập  tin được hiểu thông qua biểu tượng đĩa mềm, chức  năng in ấn được hiểu thông qua biểu tượng máy in, …  • Các ứng dụng có giao diện đồ họa cho phép người  dùng khả năng làm việc dễ dàng với nhiều cửa sổ với  nhiều dạng tài liệu khác nhau cùng một lúc 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 75 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 76 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 77 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 78 Bài giảng Thiết kế và triển khai Website 13
  14. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT 2.2. Thiết kế đồ họa cho website 2.2.1. Xử lý đối tượng đồ họa • 2.2.1. Xử lý đối tượng đồ họa • 2.2.2. Xử lý ảnh trong website • Ảnh tạo bởi máy tính bao giờ cũng được cấu  trúc từ tập các đối tượng đơn giản hơn 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 79 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 80 Các đối tượng đồ họa cơ sở 2.2.2. Xử lý ảnh trong website • Điểm • Khi lựa chọn hình ảnh để xử lý đưa lên website  – Thông tin: tọa độ (x, y) – Thuộc tính: mầu sắc cần trả lời 03 câu hỏi sau: • Đoạn thẳng, đường gấp khúc – Nó có liên quan không? – Thông tin: điểm đầu (x1, y1) điểm cuối (x2, y2) – Nó có thú vị không? Nó có thú vị không? – Đường gấp khúc là tập các đoạn thẳng nối với nhau một cách  ờ ấ khú là ậ á đ hẳ ối ới h ộ á h tuần tự – Nó có hấp dẫn không? – Thuộc tính: mầu sắc, độ rộng nét vẽ, kiểu nét vẽ • Vùng tô • Lưu ý: – Thông tin: đường biên và vùng bên trong – Nguồn ảnh hợp pháp – Thuộc tính: mầu tô và mẫu tô – Luôn chú ý đến hướng dẫn sử dụng hình ảnh • Ký tự, chuỗi ký tự – Thuộc tính: Font chữ, mầu sắc, kích thước, khoảng cách ký tự … – Trích dẫn nguồn ảnh sử dụng nếu lấy từ nguồn khác 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 81 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 82 2.3. Công cụ photoshop cho xử lý đồ họa 2.3.1. Giới thiệu về photoshop • Adobe Photoshop • 2.3.1. Giới thiệu về photoshop • Phiên bản mới nhất hiện nay là Adobe Photoshop CC. • 2.3.2. Các thao tác cơ bản – – Chỉnh sửa ảnh cho các ấn phẩm, Thiết kế trang web, • 2.3.3. Các hiệu ứng cơ bản – – Vẽ các loại tranh (matte painting và nhiều thể loại khác), Vẽ texture cho các chương trình 3D... – Mọi hoạt động liên quan đến ế ảnh bitmap. • 2.3.4. Xuất dữ liệu và tích hợp lên website • Adobe Photoshop có khả năng tương thích với hầu hết các chương trình đồ họa khác của Adobe – Adobe Illustrator, – Adobe Premiere, – After After Effects – Adobe Encore. 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 83 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 84 Bài giảng Thiết kế và triển khai Website 14
  15. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT Các khái niệm cơ bản 1. Hình ảnh vector và raster 2. Độ phân giải ảnh 3. Quan hệ giữa kích thước ảnh và độ phân giải iải ảnh ả h 4. Độ phân giải màn hình 5. Các chế độ hình ảnh (image modes) 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 85 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 86 Hình bên trái có độ phân giải 72 ppi, hình bên phải 300 ppi Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 87 8/9/2017 88 TMĐT Hình ảnh bitmap 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 89 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 90 Bài giảng Thiết kế và triển khai Website 15
  16. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT Hình ảnh RGB có 3 kênh màu R, G, B Hình ảnh CMYK có 4 kênh màu C, M, Y, K 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 91 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 92 2.3.2. Các thao tác cơ bản • Vùng làm việc • Làm việc với vùng chọn • LAYER • Chỉnh sửa ảnh Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 93 8/9/2017 94 TMĐT 2. CHỌN CÔNG CỤ (Toolbox) THAO TÁC VỚI LAYER • Hiển thị/tắt thanh công cụ (toolbox): • Layer / New / Layer Via Copy: Copy vùng  – Vào windows tools chọn đặt trên 1 layer mới (Ctrl‐J) • Chọn công cụ:  • Layer / New / Layer Via Cut: Cắt vùng  – Nhấn phím tắt của công cụ hoặc Nhấ hí ắ ủ ô h ặ chọn đặt trên 1 layer mới (Shift Ctrl J) chọn đặt trên 1 layer mới (Shift‐Ctrl‐J) – Sử dụng chuột chọn công cụ  • Nhân bản layer: Chọn layer vào menu  – Click chuột phải vào công cụ có tam giác nhỏ phía  layer Duplicate Layer (click chuột phải vào  dưới để hiển thị các công cụ ẩn. layer Duplicate Layer ) 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 95 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 96 Bài giảng Thiết kế và triển khai Website 16
  17. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT CHỈNH SỬA ẢNH CHỈNH SỬA ẢNH • Sử dụng bộ lọc để tạo sự tương phản của  • Điều chỉnh màu cho ảnh với lệnh Curves: biên – Image AdjustmentsCurves – Menu Filter / Sharper / Unsharp Mask – Di chuyển đường thẳng để xem sự thay đổi – Amount: Định gi trị độ sắc nét cho ảnh,  • Thay thế màu trong ảnh: Th thế à t ả h Radius: các điểm biên chịu tác động, Threshold : – Image AdjustmentsReplace Color xác định mức độ khác biệt về độ nét – Sử dụng công cụ chọn màu cần thay đổi – Kéo các thanh trượt để thay đổi 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 97 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 98 2.3.4. Xuất dữ liệu và tích hợp lên  NHÓM CÁC BỘ LỌC website • Nhóm Filter Artistic: • Các định dạng ảnh: – Colored Pencil : Làm cho ảnh hay phần – JPEG: định dạng này có thể thể hiện với hàng triệu  được chọn giống như phần được vẽ mầu bằng chì phấn bằng chì phấn – GIF: ảnh này thể hiện với 256 mầu và hỗ trợ ảnh  GIF: ảnh này thể hiện với 256 mầu và hỗ trợ ảnh trong suốt –… – PNG: có tác dụng nén ảnh có các mảng mầu đặc  • Nhóm Filter Blur: tạo độ nhòe và giữ được độ sắc nét chi tiết • Nhóm FilterPixelate:Phá vở hình ảnh thành  nhiều mảnh 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 99 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 100 Chương 3. Một số ngôn ngữ xây dưng  3.1. HTML (Hyper Text Makup Website Language) • 3.1. HTML (Hyper Text Makup Language) • 3.1.1. Tổng quan về HTML • 3.2. PHP,  Javascript         • 3.1.2. Các thẻ cơ bản của HTML    • 3.3. Môi trường ASP.NET • 3.1.3. Sử dụng Frontpage • 3.4. Một số công cụ soạn thảo mã nguồn  • 3.1.4. Định dạng bằng CSS 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 101 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 102 Bài giảng Thiết kế và triển khai Website 17
  18. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT 3.1.1. Tổng quan về HTML 3.1.2. Các thẻ HTML • HTML=HyperText Markup Language – Ngôn ngữ đánh dấu  • Cấu trúc chung của một siêu văn bản siêu văn bản – Ngôn ngữ để viết các trang web. • Do Tim Berner Lee phát minh và được W3C (World Wide   Tiêu đề trang  Web Consortium) đưa thành chuẩn năm 1994 ... Các khai báo khác ở đây Các khai báo khác ở đây • Các trang Web đầy sinh động mà bạn thấy trên WWW là  các trang siêu văn bản được viết bằng HTML • HTML cho phép bạn tạo ra các trang phối hợp hài hoà  ... Nội dung cần thể hiện ở đây giữa văn bản thông thường với hình ảnh, âm thanh, video,  các mối liên kết đến các trang siêu văn bản khác 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 103 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 104 3.1.2. Các thẻ HTML Font & Color • Các lớp thẻ • Thẻ – Cấu trúc (structure) - font Arial – Định dạng (formatting) – Ảnh (image) • Thuộc tính Size 1 – Danh sách (list) - face Size 7 – Bảng (table) - size Red – Form Blue - color – Khung hiển thị (frame) 72pt - style Bộ môn CNTT - Khoa HTTT Kinh tế 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 105 8/9/2017 106 và TMĐT Link & URL & Bookmark Lớp thẻ âm thanh, hiện ảnh • Chèn hình ảnh vào trang web • Thẻ – thẻ  không có thẻ kết thúc, gồm các thuộc  -a tính: • Thuộc Th ộ tính tí h + WEB Resource • Src: Đường dẫn đến file ảnh Src: Đường dẫn đến file ảnh • Alt: Đoạn văn bản hiển thị khi không có ảnh - href + File System • Width, height: Độ rộng, chiều cao của ảnh khi hiển thị - title • Border: Độ đậm của đường viền xung quanh ảnh - name + Bookmark • Vspace, hspace: Khoảng cách theo chiều dọc và theo  chiều ngang của ảnh với các phần tử khác Bộ môn CNTT - Khoa HTTT Kinh tế 8/9/2017 107 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 108 và TMĐT Bài giảng Thiết kế và triển khai Website 18
  19. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT Lớp thẻ tạo danh sách List • Gồm các loại danh sách • Ds không thứ tự • Ds các định nghĩa –  ... :           Danh sách thư mục - ul (unordered lists) - dl (definition lists) –  ... :             Danh sách được định nghĩa - li - dt (title) – : Danh sách thực đơn  ... : Danh sách thực đơn • Ds có thứ tự - dd (detail) –  ... :             Danh sách có thứ tự - ol (ordered lists) –  ...  :            Danh sách không có thứ tự - li • Các loại danh sách có thể lồng nhau • Thuộc tính DISC | CIRCLE | SQUARE - type A | a | I | i | 1 Bộ môn CNTT - Khoa HTTT Kinh tế 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 109 8/9/2017 110 và TMĐT Lớp thẻ tạo bảng Table • Bao gồm các thẻ TAG/Attribute Mô tả –  ...: Giới hạn bảng TABLE - bắt ®Çu b¶ng b¶ng.. BGCOLOR - ®Æt mμu nÒn cña b¶ng –  ...:  Đặc tả ô tiêu đề của bảng Bắt ®Çu mét dßng cña b¶ng - table –  ...:  Đặc tả tên bảng row.. row Bắt ®Çu mét « cña b¶ng(B b¶ng(B3 3/4t ®Çu cét trong mét hµng). hµng). ThÎ gièng nh- nh-ng cho ch÷ ch÷ in ®Ëm vµ c¨n chÝnh gi gi÷ ÷a - (heading).. (heading) Bộ môn CNTT - Khoa HTTT Kinh tế 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 111 8/9/2017 112 và TMĐT Form Các thẻ trong form • Sử dụng để chứa mọi đối tượng khác • • Không nhìn thấy khi trang web được hiển thị – Trường nhập dữ liệu • Quy định một số thuộc tính quan trọng như  • ... method action method, action. – Danh sách chọn h á h h • Thẻ tạo form: • … … – Mục chọn trong danh sách • Có thể có nhiều form trong một tài liệu •  ...  • Form không được lồng nhau – Trường nhập dữ liệu nhiều dòng 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 113 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 114 Bài giảng Thiết kế và triển khai Website 19
  20. Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017 TMĐT Flash Một số thẻ meta thông dụng – Thường dùng quy định thuộc tính cho trang web > – Có tác dụng lớn với Search Engine Có tác dụng lớn với Search Engine 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 115 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 116 Lớp thẻ tạo khung  … • Chia vùng hiển thị của trang web thành nhiều  • Frameset: dùng để phân vùng hiển thị trên trình  vùng con theo chiều dọc, ngang duyệt – Cols = n | * | n% • Mỗi vùng con là một frame có đặc điểm: – Rows = n | * | n% – Có Có thể truy cập tới một URL độc lập với frame khác. thể truy cập tới một URL độc lập với frame khác – Border, bordercolor Border bordercolor – Mỗi frame có thể được đặt tên. • Frame: Nằm trong frameset dùng để định nghĩa  từng vùng – Có thể thay đổi kích thước khung nhìn, cho phép hay  – Src: URL chứa nội dung của vùng không cho phép người dùng thay đổi kích thước này – Name, bordercolor, noresize, marginwidth,  • Tài liệu có cấu trúc frame, không có phần tử body marginheight – Scrolling = ‘yes|no|auto’ 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 117 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 118 3.2. PHP,  Javascript  Nội dung • 3.2.1.  PHP (Hypertext Preprocessor) • Lập trình Web tĩnh và Web động • 3.2.2. Javascript trong xây dựng website • Cài đặt Apache • MySQL • Ngôn ngữ PHP 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 119 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 120 Bài giảng Thiết kế và triển khai Website 20
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.

 

Đồng bộ tài khoản
2=>2