Giáo trình thiết kế web

BỘ CÔNG THƯƠNG TRƯỜNG CAO ĐẲNG CÔNG NGHIỆP NAM ĐỊNH GIÁO TRÌNH THIẾT KẾ WEB NGÀNH/CHUYÊN NGÀNH: TIN HỌC VĂN PHÒNG (Lưu hành nội bộ) Dùng cho đào tạo: Trung cấp Nam Định, năm 202… BỘ CÔNG THƯƠNG TRƯỜNG CAO ĐẲNG CƠNG NGHIỆP NAM ĐỊNH GIÁO TRÌNH THIẾT KẾ WEB NGÀNH/CHUYÊN NGÀNH: TIN HỌC VĂN PHÒNG (Lưu hành nội bộ) CHỦ BIÊN: LÊ HỮU TOẢN Nam Định, năm 202… LỜI GIỚI THIỆU Trong năm gần đây, với phát triển Cơng nghệ thơng tin mạng máy tính phát triển rộng rãi, kéo theo ứng dụng mạng máy tính internet dịch vụ trở nên thiếu sống đại Để phục vụ việc học tập nghiên cứu sinh viên Công nghệ thông tin, trường Cao đẳng Công nghiệp Nam Định, biên soạn giáo trình Thiết kế Web Giáo trình bao gồm chương, chương có phần kiến thức lý thuyết, câu hỏi phần thực hành cụ thể: Bài Tổng quan WWW ngôn ngữ HTML Bài Thiết kế trang Web Bài 3: Microsoft FrontPage Bài Scripts trang web Giáo trình thiết kế Web hướng dẫn sinh viên xây dựng ứng dụng Web tĩnh từ đến nâng cao công nghệ HTML, CSS Script Được biên soạn với phương châm đảm bảo tính logic, khoa học, thiết thực, dễ hiểu nhằm trang bị sinh viên kiến thức phục vụ cho nghiên cứu, thiết kế ứng dụng Web Tài liệu xây dựng nhằm đáp ứng nhu cầu học tập nghiên cứu sinh viên trường Cao đẳng Cơng nghiệp Nam Định Do thời gian có hạn nên phạm vi giáo trình, khơng thể đề cập tất vấn đề nóng hổi lĩnh vực thiết kế Web Nhóm tác giả mong nhận ý kiến đóng góp từ thầy để tài liệu hoàn chỉnh Nam Định, 27 tháng 04 năm 20 Chủ biên MỤC LỤC LỜI GIỚI THIỆU MỤC LỤC .2 DANH MỤC BẢNG, HÌNH VẼ Bài TỔNG QUAN VỀ WWW VÀ NGÔN NGỮ HTML .6 1.1 KHÁI NIỆM CƠ BẢN VỀ WEB 1.1.1 Giới thiệu world wide web .6 1.1.1.1 Internet 1.1.1.2 Địa IP 1.1.1.3 Tên miền (Domain name) 1.1.1.4 World Wide Web (WWW) .9 1.1.2 Giao thức truyền siêu văn 10 1.1.3 Web tĩnh, Web động .11 1.1.3.1 Trang web .11 1.1.3.2 Web tĩnh 12 1.1.3.3 Web động 12 1.1.4 Ngôn ngữ kịch .13 1.2 NGÔN NGỮ HTML 13 1.2.1 Giới thiệu HTML .13 1.2.2 Cấu trúc trang HTML 13 1.2.3 Thẻ cấu trúc thẻ 14 1.2.3.1 Các thẻ trang web 14 1.2.3.2 Thẻ định dạng kí tự 16 1.2.3.3 Thẻ đường kẻ ngang .18 1.2.3.4 Chèn hình ảnh 19 1.2.3.5 Định dạng đoạn .20 1.2.3.6 Tạo bảng (Table) 21 1.2.3.7 Tạo liên kết (Hyperlink) 22 1.2.3.8 Tạo khung (Frame) 22 1.2.3.9 Tạo Form 23 TÓM TẮT NỘI DUNG .26 BÀI TẬP 27 BÀI THỰC HÀNH 28 HƯỚNG DẪN TỰ HỌC Ở NHÀ .37 NỘI DUNG THẢO LUẬN 38 Bài THIẾT KẾ TRANG WEB 40 2.1 TỔNG QUAN .40 2.2 TRANG VÀ VĂN BẢN TRÊN TRANG 40 2.3 BẢNG BIỂU (TABLE) VÀ TRANG KHUNG (FRAME) 42 2.4 MULTIMEDIA TRÊN TRANG WEB 47 2.5 CÁC YẾU TỐ ĐỘNG TRÊN TRANG WEB .48 TÓM TẮT NỘI DUNG .50 BÀI TẬP 50 BÀI THỰC HÀNH 51 HƯỚNG DẪN TỰ HỌC Ở NHÀ .57 NỘI DUNG THẢO LUẬN CHƯƠNG 58 Bài MICROSOFT FRONTPAGE 59 3.1 TỔNG QUAN 59 3.2 TRANG VÀ VĂN BẢN TRÊN TRANG 60 3.3 TẠO BẢNG (Table) VÀ TRANG KHUNG (FRAME) 61 3.3.1 Làm việc với bảng .61 3.3.2 Làm việc với khung Frame 62 3.4 MULTIMEDIA TRÊN TRANG WEB 64 3.5 CÁC YẾU TỐ ĐỘNG TRÊN TRANG 66 3.6 KHUNG NHẬP - FORM 67 3.6.1 Các đối tượng Form 67 3.6.2 Thuộc tính đối tượng 67 3.7 LIÊN KẾT .68 3.7.1 Liên kết trang 68 3.7.2 Liên kết địa web 68 3.7.3 Liên kết email .68 3.7.4 Liên kết đồ ảnh 68 TÓM TẮT NỘI DUNG .70 BÀI TẬP 70 BÀI THỰC HÀNH 71 NỘI DUNG THẢO LUẬN CHƯƠNG 74 Bài SCRIPT TRONG TRANG WEB 76 4.1 TỔNG QUAN VỀ SCRIPT TRONG TRANG WEB 76 4.2 CƠ BẢN VỀ JAVASCRIPT 76 4.2.1 Khái niệm JavaScript 76 4.2.2 Một số đối tượng có sẵn JavaScript 77 4.2.3 Xây dựng hàm xử lý kiện 84 4.3 CƠ BẢN VỀ VBSCRIPT 86 4.3.1 Khái niệm VBScript 86 4.3.2 Hàm thủ tục VBScript 86 4.3.3 Đối tượng VBScript 90 TÓM TẮT NỘI DUNG CHƯƠNG 92 BÀI TẬP 93 BÀI THỰC HÀNH 94 HƯỚNG DẪN TỰ HỌC .94 NỘI DUNG THẢO LUẬN 95 TÀI LIỆU THAM KHẢO 96 DANH MỤC BẢNG, HÌNH VẼ Hình 1- Mơ hình mạng Internet Hình 1- Minh họa thiết lập giao thức TCP/IP Hình 1- Phân cấp tên miền Hình 1- Thống kê trình duyệt sử dụng 10 Hình 1- Tiêu đề trang web xuất trình duyệt 14 Hình 1- Tiêu đề hình ảnh di chuột 20 Hình 1- Form đăng kí thơng tin .28 Hình 1- Mơ tả thực hành 28 Hình 1- Mô tả thực hành 29 Hình 1- 10 Mô tả thực hành số 30 Hình 1- 11 Mơ tả thực hành số 31 Hình 1- 12 Mơ tả thực hành số 33 Hình 1- 13 Mơ tả thực hành số 34 Hình 1- 14 Mơ tả thực hành số 36 Hình 1- 15 Mô tả thực hành số 10 37 Bảng 1- Thuộc tính thẻ 20 Bảng 1- Kích thước Font chữ 21 Bảng 1- Các kiểu chữ HTML 22 Bảng 1- Các dạng hiển thị văn web 22 Bảng 1- Kí tự đặc biệt 23 Bảng 1- Đánh số đầu cho đoạn văn 24 Bảng 1- Đặt kí hiệu đầu đoạn văn 25 Bảng 1- Cấu trúc thẻ làm việc với bảng 26 Bài TỔNG QUAN VỀ WWW VÀ NGÔN NGỮ HTML MỤC TIÊU: - Trình bày khái niệm web: www, http, url, - Phân tích ưu điểm, nhược điểm phương pháp lập trình web tĩnh lập trình web động - Trình bày khái niệm ngơn ngữ kịch - Thiết kế giao diện số trang web bản: đăng kí, đăng nhập, hiển thị thơng tin thẻ HTML 1.1 KHÁI NIỆM CƠ BẢN VỀ WEB 1.1.1 Giới thiệu world wide web 1.1.1.1 Internet Mạng Internet ban đầu biết tên ARPANET tổ chức Advanced Research Projects Agency (ARPA) Mỹ thiết lập năm 1969 Ngày Internet trở thành mạng toàn cầu kết nối hàng trăm triệu người giới Mạng máy tính tồn cầu Internet xem mạng tất mạng (Network of networks), người dùng máy tính truy cập tới thông tin máy khác (nếu phép) Mục đích lúc mạng kết nối trao đổi thơng tin máy tính nghiên cứu trường đại học Thiết kế ARPANET độc đáo chỗ mạng hoạt động phần bị phá hủy trường hợp chiến tranh thiên tai Ngày mạng Internet mạng công cộng kết nối hàng trăm triệu người giới Về mặt vật lí, mạng Internet sử dụng phần tồn tài nguyên mạng viễn thông công cộng tồn (Public telecommunication networks) Về mặt kĩ thuật, mạng Internet sử dụng tập giao thức gọi chung TCP/IP (Transmission Control Protocol/Internet Protocol) Hai mô công nghệ mạng Internet intranet and extranet sử dụng giao thức Sự đời giao thức HTTP HMTL đánh dấu bước ngoặt việc sử dụng Internet Cho tới năm 1990 dịch vụ Internet email, listserv, telnet ftp Năm 1992, Tim Berners-Lee, nhà vật lí học CERN phát triển giao thức cho World Wide Web (WWW) Trong tìm kiếm cách để liên kết tài liệu khoa học lại với nhau, tạo HyperText Markup Language (HTML), tập Standard Generalized Markup Language (SGML) Từ chuẩn cho tài liệu văn bản, HTML ngày chứa hình ảnh, âm thanh, video, cho phép phát triển ứng dụng thông qua Common Gateway Interface (CGI), ASP, JSP, PHP, Java Servlet Hình 1- Mơ hình mạng Internet 1.1.1.2 Địa IP Địa IP dãy số 32-bit dùng để xác định đối tượng nhận gửi thông tin Internet Khi người dùng yêu cầu trang HTML hay gửi e-mail, địa IP máy tính gửi gói tin đến địa IP người nhận Khi máy tính nhận yêu cầu, địa IP kèm theo để gửi kết trả Để đơn giản hóa người ta phân dãy địa 32-bit thành số bit viết cách dấu chấm “.” Vì máy phần mạng nên người ta chia địa IP thành phần: + Phần mơ tả mạng (network) mà máy thuộc + Phần mô tả máy (local host): Nếu tất bit vùng mô tả máy 0, địa IP dùng để mơ tả địa mạng (network address); Nếu tất bit vùng mơ tả máy 1, địa IP địa broadcast (broadcast address); Nếu khơng thuộc hai trường hợp trên, địa IP dùng để mô tả địa máy (host address) Địa IP tự khơng chứa thơng tin phần mơ tả mạng, phần mô tả máy mà thành phần subnet mask kèm với địa cung cấp thông tin Theo qui ước, vùng bit xác định vùng mô tả mạng, vùng bit xác định vùng mô tả máy Trong subnet mask gồm dãy liên tục bit dãy liên tục bit nằm liên tiếp tính từ trái sang Việc phân chia địa IP Internet ICANN chịu trách nhiệm Địa IP thường quản lí nhà cung cấp dịch vụ Internet (ISP – Internet Service Provider) Các địa IP thường gọi địa IP thực Nếu người dùng muốn thiết lập website để máy tính sử dụng Internet truy cập vào được, máy chủ chứa website phải có địa IP thực Nếu khơng có địa IP thực, người dùng phải sử dụng dịch vụ webhosting để thuê chỗ đặt website máy chủ có địa IP thực kết nối với Internet Hình 1- Minh họa thiết lập giao thức TCP/IP 1.1.1.3 Tên miền (Domain name) Tên miền xem tên giao dịch công ty hay tổ chức Internet Tên miền công ty thương mại thường có dạng yourcompany.com Ví dụ, cơng ty Intel lấy tên miền intel.com; công ty Microsoft lấy tên miền microsoft.com Việc đưa khái niệm tên miền giúp cho việc truy cập đến tài nguyên Internet dễ dàng Việc ánh xạ qua lại tên miền địa IP máy phục vụ thực DNS Server Ví dụ: Một địa www.intel.com cho ta số thông tin sau: + Đây địa máy thuộc tổ chức sở hữu tên miền intel.com + Địa IP máy 192.102.198.160 + Phần "com" tên miền mơ tả mục đích tổ chức (trong trường hợp "commercial" – thương mại) gọi tên miền cấp (top-level domain name) + Phần trước dấu “.” tên miền thơng thường tên tổ chức (ví dụ intel) gọi tên miền cấp (second-level domain name) Tên miền cấp thông thường dùng để định nghĩa máy phục vụ cụ thể tồn chúng ánh xạ tới địa Internet Một địa IP ánh xạ cho nhiều tên miền Điều cho phép nhiều cá nhân, công ty tổ chức chia sẻ Internet server Do tầm quan trọng tên miền nên bước việc xây dựng website thiết lập tên miền cách mua từ công ty ủy quyền bán tên miền Các tên miền có “.com” thơng dụng giao dịch quốc tế Ngồi ra, công ty Việt nam thường hay lấy tên miền có “.com.vn” tới đối tượng Các phương thức Array Dưới danh sách phương thức đối tượng Array với miêu tả chúng Phương thức Miêu tả concat() Trả mảng bao gồm mảng kết hợp với mảng khác và/hoặc giá trị khác every() Trả true phần tử mảng thỏa mãn hàm kiểm tra cho filter() Tạo mảng với tất phần tử mảng này, mà hàm lọc cho trả true forEach() Gọi hàm cho phần tử mảng indexOf() Trả mục (thấp nhất) phần tử mảng tương đương với giá trị cho, -1 khơng tìm thấy join() Kết hợp tất phần tử mảng vào chuỗi lastIndexOf() Trả mục cuối (lớn nhất) phần tử mảng tương đương với giá trị cho, -1 khơng tìm thấy map() Tạo mảng với kết việc gọi hàm cho phần tử mảng pop() Gỡ bỏ phần tử cuối từ mảng trả phần tử push() Thêm nhiều phần tử tới phần cuối mảng trả độ dài mảng reduce() Áp dụng hàm đồng thời với hai giá trị mảng (từ trái qua phải) để giảm tới giá trị đơn reduceRight() Áp dụng hàm đồng thời với hai giá trị mảng (từ phải qua trái) để giảm tới giá trị đơn reverse() Đảo ngược thứ tự phần tử mảng – Đầu tiên trở thành cuối cuối trở thành shift() Gỡ bỏ phần tử từ mảng trả phần tử slice() Extract – trích khu vực mảng trả mảng some() Trả true có phần tử mảng thỏa mãn hàm kiểm tra cho toSource() Biểu diễn code nguồn đối tượng 82 sort() Sắp xếp phần tử mảng splice() Thêm và/hoặc gỡ bỏ phần tử từ mảng toString() Trả chuỗi biểu diễn mảng phần tử unshift() Thêm nhiều phần tử tới phần đầu mảng trả độ dài mảng *) JavaScript - Đối tượng Math Đối tượng Math cung cấp cho bạn thuộc tính phương thức cho số hàm tốn học Khơng giống đối tượng Global khác, Math khơng constructor Tất thuộc tính phương thức Math tĩnh (Static) gọi sử dụng Math đối tượng mà khơng phải tạo Vì thế, bạn tham chiếu số pi Math.PI bạn gọi hàm sin Math.sin(x), với x tham số phương thức Cú pháp Cú pháp để gọi thuộc tính phương thức Math sau: var pi_val = Math.PI; var sine_val = Math.sin(30); Các thuộc tính Math Bảng liệt kê thuộc tính Math miêu tả Thuộc tính Miêu tả E Hằng số E, số thuật toán tự nhiên (ký hiệu: ln), xấp xỉ 2,718 LN2 Logarit tự nhiên , xấp xỉ 0,693 LN10 Logarit tự nhiên 10, xấp xỉ 2,302 LOG2E Logarit số E, xấp xỉ 1,442 LOG10E Logarit số 10 E, xấp xỉ 0,434 PI Hệ số Pi, xấp xỉ 3,14159 SQRT1_2 Căn bậc hai 1/2; xấp xỉ 0,707 SQRT2 Căn bậc hai 2, xấp xỉ 1,414 Các phương thức Math Bảng liệt kê phương thức Math miêu tả Phương thức Miêu tả abs() Trả trị tuyệt đối số acos() Trả arccos (giá trị radians) số 83 asin() Trả arcsin (giá trị radians) số atan() Trả arctan (giá trị radians) số atan2() Trả tang lượng giác ngược ceil() Trả số integer nhỏ lớn số cos() Trả cos số exp() Trả EN, với N tham số, E số Euler floor() Trả số integer lớn nhỏ số log() Trả logarit số e số max() Trả số lớn nhiều số min() Trả số nhỏ nhiều số pow() Trả giá trị (cơ số)(số mũ) random() Trả số ngẫu nhiên hai số round() Làm tròn số Trả giá trị số integer gần sin() Trả sin số sqrt() Trả bậc hai số tan() Trả tan số toSource() Trả chuỗi "Math" 4.2.3 Xây dựng hàm xử lý kiện Sự kiện (event) tín hiệu cho thấy xẩy Chẳng hạn bạn nhấn chuột vào nút (button), bạn đóng trình duyệt, Tất node DOM phát (generate) tín hiệu vậy, có kiện khác DOM chẳng hạn kiện bạn đóng cửa sổ trình duyệt Dưới danh sách kiện DOM hữu ích nhất: Các kiện chuột (Mouse): Sự kiện Mô tả click Sự kiện xẩy người dùng nhấp (click) phần tử (element) contextmenu Sự kiện xẩy người dùng nhấn phải chuột (right-clicks) vào phần tử để mở context-menu dblclick Sự kiện xẩy người dùng nhấn kép (double-clicks) phần tử 84 mousedown Sự kiện xẩy người dùng nhấn nút chuột lên phần tử mouseup Sự kiện xẩy người dùng nhả tay khỏi nút chuột nhấn phần tử mouseenter Sự kiện xẩy trỏ (pointer) di chuyển vào phần tử mouseleave Sự kiện xẩy trỏ (pointer) di chuyển khỏi phần tử mousemove Sự kiện xẩy trỏ di chuyển bề mặt phần tử mouseout Sư kiện xẩy người dùng di chuyển trỏ khỏi phần tử khỏi phần tử mouseover Sự kiện xẩy người dùng di chuyển trỏ vào phần tử di chuyển vào phần tử Sự kiện phần tử Form Event Mô tả submit Khi người dùng submit (Gửi đi) nội dung focus Khi người dùng tập trung (focus) vào phần tử, ví dụ blur Khi người dùng rời khỏi phần tử, ví dụ Sự kiện bàn phím: Event Mô tả keydown Sự kiện xẩy người dùng nhấn phím (key) xuống keyup Sự kiện xẩy người dùng nhả tay khỏi phím keypress Sự kiện xẩy người dùng nhấn (press) vào phím (Hồn thành hành động, nhấn xuống nhả ra) Các kiện Document Event Mô tả DOMContentLoaded Khi mà nội dung HTML tải (loaded) xử lý Mơ hình DOM tạo hồn chỉnh Các kiện CSS: Event Mơ tả animationstart Sự kiện xẩy q trình hồn hình CSS bắt đầu 85 animationend Sự kiện xẩy q trình hoạt hình CSS hồn thành animationiteration Sự kiện xẩy trình hoạt hình CSS lặp lại Xử lý kiện: Để xử lý kiện, bạn cần phải gắn kiện với xử lý (handler), Bộ xử lý hàm Khi kiện xẩy xử lý gọi để hoạt động Bộ xử lý (handler) cách để chạy mã Javascript tương ứng với hành động người dùng Bộ xử lý (handler) sét HTML với thuộc tính (attribute) on{event} Chẳng hạn kiện click: Đối tượng this đại diện cho phần tử phát kiện Khi kiện xẩy ra, Javascript tạo đối tượng event bạn sử dụng giá trị tham số Bạn truy cập vào phần tử phát kiện thông qua đối tượng event var target = event.target; 4.3 CƠ BẢN VỀ VBSCRIPT 4.3.1 Khái niệm VBScript VBScript ngơn ngữ kịch để lập trình ứng dụng web phía server sử dụng cơng nghệ ASP Các định danh VBScript không phân biệt chữ hoa hay chữ thường VBScript cho phép lập trình viên phát triển website tạo trang web động cho người dùng sử dụng trình duyệt web Internet Explorer mà với HTML, ta khơng có nhiều khả VBScript làm việc đơn giản in ngày tháng tại, truy cập vào hệ thống file Server hay web Server cung cấp cơng cụ để ta phát triển ứng dụng web VBScript thành phần thiếu với người học lập trình ASP nên tìm hiểu cách kỹ lưỡng trước phát triển hệ thống ASP phức tạp Những lập trình viên biết ngơn ngữ Visual Basic dễ dàng tiếp cận VBScript Một điều cần người dùng sử dụng trình duyệt IE có khả truy cập mã lệnh VBScript 4.3.2 Hàm thủ tục VBScript a Khai báo hằng, biến, mảng *) Biến VBScript không cần xác định kiểu, biến không cấu trúc xem biến vơ hướng, chứa tự chuyển đổi hầu hết kiểu liệu Khai báo biến từ khóa Dim Ví dụ: 86 *) Hằng khai báo từ khóa Const Ví dụ: - Mảng định nghĩa truy xuất thông qua số Ví dụ : + Để khai báo mãng động (có thể thay đổi kích thước) : Dim A() Sau ta thay đổi kích thức qua lệnh REDIM Ví dụ : ReDim A(6) + Nếu muốn áp đặt phải khai báo biến trước sử dụng (và điều cần thiết) ta khai báo trước thẻ dòng lệnh + Để hiển thị giá trị biểu thức trang web ta dùng hai phương pháp : Sử dụng phương thức Write Object Response: Response Write(bthức) Sử dụng cách viết tắt Response Write(bthức) : *) Chú thích Sử dụng dấu nháy đơn để bắt đầu dịng ghi Ví dụ : *) Các toán tử - Các toán tử số học : +, -, *, / , mod, \ (chia lấy phần nguyên), ^ (lũy thừa) - Các toán tử so sánh : =, >,