Bài giảng Thiết kế Website: Chương 1 - ThS. Dương Thành Phết

Bài giảng Thiết kế Website - Chương 1 giới thiệu tổng quan về thiết kế Website. Các nội dung chính được trình bày trong chương này gồm có: Các khái niệm cơ bản, các công nghệ phát triển Website, thiết kế trang Web đầu tiên, làm tươi trang Web và xem mã nguồn. Mời các bạn cùng tham khảo để nắm bắt các nội dung chi tiết.

KHOA CAO ĐẲNG THỰC HÀNH THIẾT KẾ WEBSITE (Chuyên ngành: Quản trị mạng máy tính) Chƣơng TỔNG QUAN VỀ THIẾT KẾ WEBSITE © Dương Thành Phết http://www.thayphet.net NỘI DUNG Các khái niệm Các công nghệ phát triển Website Thiết kế trang Web Làm tươi trang Web xem mã nguồn © Dương Thành Phết http://www.thayphet.net CÁC KHÁI NIỆM 1.1 Khái niệm Web tĩnh, Web động  Web tĩnh: - Được xây dựng ngôn ngữ HTML, CSS, Javascript, Website có nội dung cần thay đổi cập nhật - Thích hợp với cá nhân, tổ chức, doanh nghiệp nhỏ làm quen với môi trường Internet - Các trang web tĩnh có phần mở rộng htm html © Dương Thành Phết http://www.thayphet.net CÁC KHÁI NIỆM 1.1 Khái niệm Web tĩnh, Web động (tt)  Web động: - Web có kết nối CSDL, thơng tin gọi từ CSDL - Phát triển công nghệ tiến PHP, ASP.NET, Java, sử dụng hệ quản trị CSDL như: Access, My SQL, MS SQL, Oracle…  Tất website TMĐT, mạng thông tin, website tổ chức, doanh nghiệp hoạt động chuyên nghiệp sử dụng công nghệ web động © Dương Thành Phết http://www.thayphet.net CÁC KHÁI NIỆM 1.2 Mạng Internet: - Mạng máy tính tồn cầu – Hệ thống mạng mạng - Tiền thân ban đầu mạng ARPANET(Tổ chức Advanced Research Projects Agency) Mỹ sáng lập 1969 Phục vụ trao đổi liệu trường đại học & Bộ quốc phòng © Dương Thành Phết http://www.thayphet.net CÁC KHÁI NIỆM 1.3 Các dịch vụ Internet  WWW-Wold Wide Web: Dịch vụ trao đổi,tìm kiếm truy cập thơng tin mạng theo giao thức HTTP Được sử dụng thông qua trình duyệt Web  HTTP-Hyper Text Tranfer Protocol: Giao thức dùng để giao tiếp với trang Web © Dương Thành Phết http://www.thayphet.net 1.1 CÁC KHÁI NIỆM 1.1.3 Các dịch vụ Internet (tt)  Email – Eletronic Mail-Thƣ điện tử: Dịch vụ trao đổi thông điệp cho nhau, quản lý mail server  Chat –Tán gẫu: Dịch vụ trao đổi trực tuyến với qua mạng internet văn bản, âm thanh, hình ảnh như: AOL, Yahoo messenger, © Dương Thành Phết http://www.thayphet.net CÁC KHÁI NIỆM 1.3 Các dịch vụ Internet (tt)  FTP – File Transfer Protocol – Truyền tải tập tin : Dịch vụ trao đổi tập tin máy Internet thường dùng để Download & Upload trang web từ người thiết máy chủ thơng qua chương trình FTP FTP Explorer, FlashFXP © Dương Thành Phết http://www.thayphet.net CÁC KHÁI NIỆM 1.4 Các thuật ngữ HTML-Hyper Text Makeup Language: Ngôn ngữ đánh dấu siêu văn dùng để thiết kế trang Web WebPage-Trang Web: Là tập tin soạn thảo theo ngơn ngữ HTML có phần mở rộng HTML HTM © Dương Thành Phết http://www.thayphet.net CÁC KHÁI NIỆM 1.4 Các thuật ngữ (tt) Web Site: Tập hợp trang web thuộc chủ thể Home Page: Trang đầu tiên-Trang chủ Website(Index.htm, Default.htm ) 10 © Dương Thành Phết http://www.thayphet.net CÁC KHÁI NIỆM 12 1.4 Các thuật ngữ (tt)  Tên miền-Domain Name-Web Server Name: - Để phân biệt Web Server có địa IP ánh xạ tên (VD:www.vietnamnet.vn) - Được xem tên giao dịch tổ chức Internet Theo mã quốc gia như: Việt Nam(.VN), Anh(.UK), Mỹ(.US), Nhật(JP) Theo lĩnh vực như: Thương mại(.Com); Tổ chức giáo dục(.Edu); Các mạng thông tin(.Net, Info); Các tổ chức khác(.Org)… Theo kết hợp như: www.nld.com.vn  Để sở hữu tên miền phải trả chi phí hàng năm © Dương Thành Phết http://www.thayphet.net CÁC KHÁI NIỆM 1.4 Các thuật ngữ (tt) URL-Uniform Resource Location: Địa truy cập trang Web - tập tin Website http://Webservername/……/File.html Trang chủ mặc định không cần khai báo truy cập VD:http://www.thoitrangtre.com.vn Tức là: http://www.thoitrangtre.com.vn/Index.htm 13 © Dương Thành Phết http://www.thayphet.net CÁC KHÁI NIỆM 1.4 Các thuật ngữ (tt) Browser: Trình duyệt Web dùng để đọc hiển thị trang Web Phổ biến là: Google Chrome, FireFox, InternetExplorer, Netscape,… 14 © Dương Thành Phết http://www.thayphet.net CÁC KHÁI NIỆM 1.4 Các thuật ngữ (tt) Seo gì?:  SEO chữ viết tắt cụm từ (Search Engine Optimization)  Là trình tối ưu hóa câu trúc website, nội dung text web thân thiện với google với việc tạo link cho website  Để web đạt thứ hạng cao tìm kiếm từ khóa định Google, Yahoo, Bing… Và thuật ngữ khác dễ dàng tìm hiều từ Internet : http://www.google.com.vn 15 © Dương Thành Phết http://www.thayphet.net CÁC CƠNG NGHỆ PHÁT TRIỂN WEB 16 © Dương Thành Phết http://www.thayphet.net CÁC CÔNG NGHỆ PHÁT TRIỂN WEB PHP - Tốc độ xử lý nhanh, hiệu cao - Chi phí thấp (ngơn ngữ free khơng tốn chi phí mua quyền) ASP.NET - Tốc độ xử lý nhanh, hiệu cao ASP JSP/ java - Tốc độ xử lý chậm - Chi phí giá - Chi phí giá thành trung thành cao (do bình (do một phần phải mua quền) phần phải mua quền) - Thời gian - Thời gian code - Thời gian code triển triển nhanh, code triển khai phức khai trung bình đơn giản tạp, chậm - Số lượng nhà - Số lượng nhà - Số lượng nhà cung cấp cung cấp cung cấp hosting khơng hosting khơng hosting nhiều, nhiều, khó cho nhiều, khó cho dễ lựa chọn việc lựa chọn việc lựa chọn - Hơi chậm - Chi phí giá thành cao - Thời gian code triển khai phức tạp, chậm - Số lượng nhà cung cấp hosting ít, khó tìm 17 © Dương Thành Phết http://www.thayphet.net CÁC CƠNG NGHỆ PHÁT TRIỂN WEB PHP - Số nhà cung cấp website nhiều, khả chọn lựa tốt - Khả mở rộng phát triển dễ dàng nhanh chóng - Các công cụ công nghệ hỗ trợ phong phú, đa dạng Cơng nghệ làm cho q trình duyệt web nhanh thân thiện với người dùng ASP.NET - Số nhà cung cấp website nhiều, khả chọn tốt ASP JSP/ java - Số nhà cung cấp website ít, khả chọn lựa khó - Số nhà cung cấp website - Mở rộng phát triển website dễ dàng - Khả mở rộng phát triển khó khăn - Khả mở rộng phát triển website khó khăn - Các cơng cụ cơng nghệ hỗ trợ phong phú, đa dạng Công nghệ làm cho trình duyệt web nhanh thân thiện với người dùng - Công cụ công nghệ hỗ trợ ít, khó tìm - Cơng cụ cơng nghệ hỗ trợ ít, khó tìm 18 © Dương Thành Phết http://www.thayphet.net CÁC CƠNG NGHỆ PHÁT TRIỂN WEB Mỗi cơng nghệ có ƣu khuyết tƣơng ứng Tùy tầm vực cần chọn công nghệ phù hợp:  Đối với đa số website tầm trung nên chọn ngôn ngữ phát triển web PHP/MySQL giá thành tương đối thấp, tốc độ xử lý nhanh, dễ lựa chọn nhà cung cấp  Một số website cung cấp dịch vụ mang tầm quan trọng trung cao cấp nên sử dụng công nghệ ASP.NET/MS SQL Server  Đồi với Website cao cấp, đòi hỏi tính bảo mật cao nên sử dụng cơng nghệ Java/ Oracle 19 © Dương Thành Phết http://www.thayphet.net THIẾT KẾ TRANG WEB ĐẦU TIÊN 3.1 Chƣơng trình soạn thảo - Trang web tập tin văn không định dạng, chứa thẻ(Tag), Viết mã HTML - Các chương trình soạn thảo văn khơng định dạng như: NotePad chương trình thiết kế web MS Frontpage, Adobe Dreamweaver 20 © Dương Thành Phết http://www.thayphet.net THIẾT KẾ TRANG WEB ĐẦU TIÊN 3.1 Chƣơng trình soạn thảo(tt)  Chƣơng trình soạn thảo Nodepad Khởi động : Start/Program/Accessories/NotePad 21 Ghi chú: Nếu sử dụng chữ có dấu, phải thiết lập bảng mã Unicode chọn Font Unicode trình soạn thảo (Format / Font  Arial , Tahoma, ) © Dương Thành Phết http://www.thayphet.net THIẾT KẾ TRANG WEB ĐẦU TIÊN 3.2 Đặt tên, lƣu, mở, xem tập tin Web Tập tin lưu trữ có phần mở rộng là: htm html  Lƣu tập tin: Tại cửa sổ soạn thảo: File/Save Filename: Tên.html (VD: VD01.html) Save as type: AllFiles Encoding: UTF-8 (Nếu nội dung có dấu)  Save 22 © Dương Thành Phết http://www.thayphet.net THIẾT KẾ TRANG WEB ĐẦU TIÊN 3.2 Đặt tên, lƣu, mở, xem tập tin Web(tt) Lưu với tên khác: Tại cửa sổ soạn thảo File/Save As Mở tập tin soạn thảo: Tại cửa sổ soạn thảo: File/Open  Chọn tập tin cần mở  Open 23 © Dương Thành Phết http://www.thayphet.net THIẾT KẾ TRANG WEB ĐẦU TIÊN 3.2 Đặt tên, lƣu, mở, xem tập tin Web(tt)  Xem trang Web sau soạn thảo: Cách 1: Mở thư mục lưu  Double Click tập tin htm Cách 2: Khởi động trình duyệt  File/Open  tìm tập tin cần mở  Ok  Kết thị 24 © Dương Thành Phết http://www.thayphet.net 1.4 LÀM TƢƠI TRANG WEB VÀ XEM MÃ NGUỒN 1.4 Làm tƣơi trang web xem mã nguồn 1.4.1 Làm tƣơi nội dung trang web Khi thị trang web trình duyệt xem điều chỉnh nội dung mã nguồn từ trình soạn thảo Khi lưu lại nội dung điều chỉnh, từ trình duyệt ta xem lại kết theo nội dung Làm tươi: Click biểu tượng Refesh (Hoặc F5) 1.4.2 Xem mã nguồn: Từ trình duyệt xem mã nguồn trang Web: Click Menu View/Source (tuỳ theo trình duyệt) 25 © Dương Thành Phết http://www.thayphet.net KHOA CAO ĐẲNG THỰC HÀNH Chƣơng TỔNG QUAN VỀ THIẾT KẾ WEBSITE THE END 26 © Dương Thành Phết http://www.thayphet.net ... thơng số hỗ trợ mà chi phí khác 11 © Dương Thành Phết http://www.thayphet.net CÁC KHÁI NIỆM 12 1. 4 Các thuật ngữ (tt)  Tên miền-Domain Name-Web Server Name: - Để phân biệt Web Server có địa... http://www.google.com.vn 15 © Dương Thành Phết http://www.thayphet.net CÁC CÔNG NGHỆ PHÁT TRIỂN WEB 16 © Dương Thành Phết http://www.thayphet.net CÁC CƠNG NGHỆ PHÁT TRIỂN WEB PHP - Tốc độ xử lý nhanh, hiệu cao - Chi... Oracle 19 © Dương Thành Phết http://www.thayphet.net THIẾT KẾ TRANG WEB ĐẦU TIÊN 3 .1 Chƣơng trình soạn thảo - Trang web tập tin văn không định dạng, chứa thẻ(Tag), Viết mã HTML - Các chương trình