Thiết kế web

1 Mục tiêu  Kiến thức: Cung cấp kiến thức thiết kế website ở mức độ căn bản và nâng cao.  Kỹ năng: Giúp sinh viên làm việc tốt và khai thác các hỗ trợ trong môi trường làm việc chuyên nghiệp Visual Studio.Net, Dreamweaver 2 2 3TT Nội dung môn học Tổng Số tiết Phân bổ thời gian Ghi chúLý thuyết Thực hành Tự học 1 Giới thiệu WWW và các khái niệm cơ bản 1 1 0 10 2 Ngôn ngữ HTML 16 5+2 9 30 3 Javascript 6 2+1 3 25 4 Cascading Stylesheet 7 2+2 3 15 5 Dreamwave 13 5+2 6 30 6 ASP.NET 17 5+3 9 30 TỔNG 60 18+10 30 150 Nội dung 3 Kiến thức tiên quyết  Đã học qua nhập môn tin học và lập trình căn bản  Kiến thức về kỹ thuật lập trình C, C++, C#. 4 4 Tài liệu  [1] JonDuckett ,Beginning Web Programming with HTML, XML and CSS, John Wiley & Sons, Ltd., 2010  [2] WallPeart, Simple CSS Standard Edition, WallPeart, WallPearl’sBlog, 2008  Source code mẫu ở website:  Các ví dụ ở website: hay  Các sách tiếng Việt về Thiết kế Web, ASP.Net với C#, Dreamweaver  Sách tiếng Anh: Beginning ASP.Net, Professional ASP.Net (nhà xuất bản WROX), Dreamweaver 8  Slide bài giảng và bài tập thực hành 5 5 Tiêu chuẩn đánh giá Kiểm tra và Thi Điểm Tuần Kiểm tra thường xuyên Bất kỳ Thi giữa kỳ 20% Tuần5 Thi cuối kỳ 50% Tuần 10 (LT+TH) Báo cáo tiểu luận 30% Hàng tuần Yêu cầu đối với sinh viên: • Dự lớp: lý thuyết trên 75% • Bài tập: hoàn thành các bài tập trên lớp và ở nhà • Tham gia đầy đủ các buổi thảo luận của nhóm 6 6 Trao đổi thông tin Địa chỉ mail: • Kimchi_12041972@yahoo.com Địa chỉ download tài liệu: • https://kimchidhcn.wordpress.com 7 7 CHƯƠNG I 8 Nội Dung Các bước thiết lập một Website Các dịch vụ cơ bản của Internet Giới thiệu Web Lịch sử phát triển của Internet Các khái niệm cơ bản về Internet 9 CÁC KHÁI NIỆM CƠ BẢN VỀ INTERNET  Internet: mạng máy tính toàn cầu, các máy truyền thông với nhau bằng giao thức chung là TCP/IP (Transfer Control Protocol/Internet Protocol)  Intranet: là mạng cục bộ không nối vào Internet, truyền thông bằng giao thức TCP/IP.  Mô hình Client-Server: mô hình khách-chủ. Server chứa tài nguyên dùng chung cho nhiều máy Client  Ưu điểm của mô hình này là tiết kiệm về thời gian, tài chính, dễ quản trị hệ thống.  Cách hoạt động của mô hình này là máy Server ở trang thái hoạt động(24/24) và chờ yêu cầu từ phía Client. Khi Client yêu cầu thì máy Server đáp ứng yêu cầu đó.  Internet Server: là các Server cung cấp các dịch vụ Internet (Web Server, Mail Server, FTP Server)  Internet Service Provider (ISP): Nhà cung cấp dịch vụ Internet cho khách hàng. Mỗi ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau.  Internet Protocol: nghi thức truyền thông tin giữa các máy tính trong mạng  World Wide Web (WWW): còn gọi là Web, là một dịch vụ phổ biến nhất hiện nay trên Internet. Web là một ứng dụng chạy trên mạng Client-Server, khách và chủ web liên lạc nhau bằng giao thức http (HyperText Transfer Protocol). Các web server cung cấp thông tin được định dạng theo ngôn ngữ HTML CÁC KHÁI NIỆM CƠ BẢN VỀ INTERNET  Phương thức truyền thông tin trong Internet: Khi một máy tính có địa chỉ IP là x (máy X) gửi tin đến máy tính có địa chỉ IP là y (máy Y) thì phương thức truyền tin cơ bản diễn ra như sau:  Nếu máy X và máy Y cùng nằm trên một mạng con thì thông tin sẽ được gửi đi trực tiếp.  Còn máy X và Y không cùng nằm trong mạng con thì thông tin sẽ được chuyển tới một máy trung gian có đường thông với các mạng khác rồi mới chuyển tới máy Y. Máy trung gian này gọi là Gateway CÁC KHÁI NIỆM CƠ BẢN VỀ INTERNET LỊCH SỬ PHÁT TRIỂN CỦA INTERNET  Mạng Internet xuất phát từ mạng ARPANET của Mỹ (1969) – mạng giữa các trường ĐH.  Năm 1989 - Tim Berners Lee phát minh ra World Wide Web, sau đó tạo ra ngôn ngữ Hypertext Markup Language – HTML  Năm 1990 – Tim viết trình duyệt (Web Browser) và Web server đầu tiên (info.cern.ch). Ngày 30 tháng tư năm 1993, CERN thông báo rằng World Wide Web sẽ được miễn phí để sử dụng cho bất cứ ai.  Web đã bùng nổ vào năm 1993 khi sinh viên Marc Andreessen tốt nghiệp trường Đại học Illinois phát triển thành công một phần mềm giúp hiển thị các trang Web dưới dạng đồ họa.  Việt nam có Internet vào tháng 11/1997 GiỚI THIỆU VỀ WEB  World Wide Web(WWW): Là dịch vụ phân tán cung cấp thông tin dạng đa phương tiện (multimedia) dựa trên hypertext  Phân tán: thông tin được đặt trên nhiều máy chủ khắp thế giới  Multimedia: thông tin bao gồm text, graphics, sound, video  Hypertext: là kỹ thuật được sử dụng để truy cập thông tin Để sử dụng dịch vụ này máy Client cần có một chương trình gọi là Web Browser. • Web Browser: trình duyệt Web. Dùng để truy xuất các tài liệu trên các Web Server. Các trình duyệt hiện nay là Internet Explorer, Nestcape, GiỚI THIỆU VỀ WEB  Website: Một tập hợp nhiều web page, thể hiện thông tin của một tổ chức hoặc một chủ đề nào đó  Web Page: là một file văn bản chứa những tag HTML hoặc những đọan mã đặc biệt mà trình duyệt web có thể hiểu và thông dịch được, file được lưu với phần mở rộng là .html hoặc htm.  Home page: là trang web đầu tiên trong web site  Hosting provider: là công ty hoặc tổ chức đưa các trang của chúng ta lên mạng  Publish: Xuất bản trang web  Web server: là một chương trình đáp ứng yêu cầu truy xuất tài nguyên  URL(Uniform resource locator): một địa chỉ chỉ đến một file cụ thể trong nguồn tài nguyên mạng.  Ví dụ: 207.46.130.149 được biểu diễn trong URL là www.microsoft.com  URL tuyệt đối: là địa chỉ Internet đầy đủ của một trang hoặc file, bao gồm giao thức, vị trí mạng, đường dẫn tuỳ chọn và tên file. Ví dụ, http:// www.microsoft.com/ms.htm.  URL tương đối: mô tả ngắn gọn địa chỉ tập tin kết nối có cùng đường dẫn với tập tin hiện hành, URL tương đối đơn giản bao gồm tên và phần mở rộng của tập tin. Ví dụ: index.html GiỚI THIỆU VỀ WEB GIỚI THIỆU KHÁI QUÁT VỀ WEB  HTML (HyperText makup Language) gồm các đoạn mã chuẩn được quy ước để thiết kế Web và được hiển thị bởi trình duyệt Web – Hypertext (Hypertext link) là một từ hay một cụm từ đặc biệt dùng để tạo liên kết giữa các trang web – Mark up: là cách định dạng văn bản để trình duyệt hiểu và thông dịch được. – Language: tập những quy luật để định dạng văn bản trên trang web.  Trình soạn thảo trang web: Có thể soạn thảo web trên bất kỳ trình soạn thảo văn bản nào: Notepad, FrontPage hoặc Dreamweaver. GiỚI THIỆU VỀ WEB  Tên miền (domain): địa chi website, trên Internet chỉ tồn tại một địa chỉ. Có hai loại:  Tên miền quốc tế: là tên miền có dạng .com, .net, .org, .biz.  Ví dụ: www.google.com, www.idvn.net,...  Tên miền việt nam: là tên miền có dạng .vn, com.vn, .net.vn,  Ví dụ: www.hui.edu.vn CÁC THÀNH PHẦN CHÍNH CỦA WEB  Nơi lưu trữ Website (hosting): dữ liệu Website được lưu trữ trên một máy gọi là máy chủ-server luôn hoạt động và kết nối với mạng Internet.  Một server có thể lưu trữ nhiều Website, nếu server bị sự cố như tắt máy trong một thời điểm nào đó thì không ai có thể truy cập được các Website trên server này tại thời điểm bị sự cố.  Dung lượng host là nơi để lưu trữ CSDL cho một Website. Đơn vị đo là Mb hay Gb. Dung lượng đường truyền là tổng số Mb dữ liệu tải lên máy chủ hoặc tải về máy chủ. Đơn vị đo là Mb/tháng.  Nội dung các trang Web CÁC THÀNH PHẦN CHÍNH CỦA WEB Tại sao một website lại giống như 1 căn hộ bạn đang ở ??? Các thành phần chính của một Website? Thảo luận 22  Website như một tòa nhà nơi bạn đang ở. Nó bao gồm các thành phần sau: 1. Địa chỉ: (là 1 cái tên miền, ví dụ: www.AhuyWeb.com) 2. Một chỗ ở với đủ không gian (Hosting – không gian để lưu trữ website) 3. Các căn phòng khác nhau như phòng ngủ, nhà bếp (Các trang web khác nhau) 4. Một cái cửa đủ lớn để cho mọi người có thể ra vào (Bandwidth – băng thông) 5. Một người cai quản, chăm sóc (nhà thiết kế web / Quản lý web) Các thành phần chính của một Website? 23 KHÁCH VIẾNG THĂM  Khách ghé thăm bạn cần một phương tiện để đưa họ đến. Ví dụ xe bus. Trong trường hợp của website người ta cần đến các ISP – nhà cung cấp dịch vụ mạng ( VietTel, VDC, FPT, VNPT ) Các thành phần chính của một Website? 24 CÁC THÀNH PHẦN KHÁC  Các thành phần sau đây bạn cũng mong muốn căn hộ của mình có được 1. Hòm thư ( email với tên miền của bạn ban@tenmien.com ) 2. Máy trả lời tự động ( autoresponder – cài đặt cho email của bạn ) 3. Người đưa thư ( mã lệnh và form để gửi thư ) 4. Đồ nội thất tiện nghi, thoải mái ( các thành phần trang trí trên website ) 5. Bản đồ định hướng nếu ở 1 tòa nhà lớn ( sitemap hoặc các menu định hướng thật tốt trên website ) Các thành phần chính của một Website? 25 THẾ CÒN VIỆC KINH DOANH? Nếu bạn muốn kinh doanh tại đây bạn cần có 1. Những xe đẩy hàng (Giỏ hàng) 2. Quầy thanh toán 3. Hệ thống an ninh (đường truyền bảo mật SSL) 4. Quảng cáo thật tốt ( quảng bá web – tối ưu hóa công cụ tìm kiếm ) 5. Đặt biến cho nơi của bạn ( quảng cáo banner ) 6. Tổ chức sự kiện ( PR cho website, cập nhật tin tức, thông cáo báo chí ) 7. Chú ý đến những người gần cận ( mạng internet toàn cầu ) Các thành phần chính của một Website? 26 HOẠT ĐỘNG CỦA WEB  World Wide Web – WWW  Thư điện tử – Email (Electronic mail)  Truyền, tải tập tin – FTP – File Transfer Protocol  Tán gẫu – Chat,...  ... CÁC DỊCH VỤ CƠ BẢN CỦA WEB  IAP (Internet Access Provider): Nhà cung cấp đường truyền Internet.  ISP (Internet Service Provider): Nhà cung cấp dịch vụ Internet. Một số ISP hiện nay ở Việt Nam: VDC,FPT, SaigonNet, NetNam, Viettel, ... CÁC DỊCH VỤ CƠ BẢN CỦA WEB 1. Thu thập thông tin khách hàng  Tìm hiểu yêu cầu thực tế của khách hàng  Xác nhận các yêu cầu của khách hàng về trang Web và các thông tin khách hàng cung cấp. 2. Giai đoạn phân tích  Phân tích rõ ràng mục đích, yêu cầu, nguyện vọng của khàch hàng.  Lập kế hoạch thực hiện dự án  Thiết kế lập cấu trúc cho website và thiết kế chung cho toàn hệ thống. CÁC BƯỚC THIẾT LẬP MỘT WEB SITE 3. Giai đoạn thiết kế  Xem xét chi tiết yêu cầu và tiến hành thiết kế website  Tiến hành xử lý hiệu ứng ảnh, thu thập tài liệu liên quan  Kiểm tra sản phẩm để đảm bảo tính thẩm mỹ và thống nhất. 4. Giai đoạn xây dựng  Xây dựng cơ sở dữ liệu dựa trên thiết kế.  Soạn thảo nội dung tài liệu, chỉnh sửa hoàn thiện nội dung rồi đưa lên trang web.  Tích hợp hệ thống: lắp ghép phân tích thiết kế, nội dung lập trình thành một sản phẩm.  Tiến hành kiểm tra, chỉnh sửa và thực hiện nghiệm thu nội bộ CÁC BƯỚC THIẾT LẬP MỘT WEB SITE 5. Giai đoạn chạy thử  Tổng hợp nội dung, xây dựng hệ thống theo thiết kế.  Kiểm tra và sửa lỗi  Lắp ghép thiết kế với phần mềm.  Chạy thử hệ thống trong vòng 01 tuần.  Kiểm tra và sửa. 6. Giai đoạn nghiệm thu  Khách duyệt chất lượng dự án.  Đăng tải hệ thống: đảm bảo hệ thống chạy tốt. CÁC BƯỚC THIẾT LẬP MỘT WEB SITE 7. Giai đoạn chuyển giao  Bàn giao cho khách hàng (có đĩa CD mã nguồn) Đào tạo và huấn luyện khách hàng quản trị website một cách hiệu quả  Đánh giá, bảo trì. CÁC BƯỚC THIẾT LẬP MỘT WEB SITE