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/CHUN NGÀNH: CƠNG NGHỆ THƠNG TIN (Lưu hành nội bộ) Dùng cho đào tạo: Cao đẳng Nam Định, năm 2020 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: CÔNG NGHỆ THÔNG TIN (Lưu hành nội bộ) CHỦ BIÊN: LÊ HỮU TOẢN Nam Định, năm 2020 LỜI GIỚI THIỆU Trong khoảng thời gian gần đây, lập trình di động ngành hot Các mẩu tin tuyển dụng gần đọc thường tuyển Android developer, iOS developer, … với mức lương cao, không thua lập trình web hay lập trình hệ thống nhúng Ngồi ra, biết cách lập trình ứng dụng, bạn làm freelance, tự phát triển ứng dụng kiếm tiền thông qua ứng dụng Để 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, chúng tơi 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ể: Chương Tổng quan Chương Định dạng CSS Chương 3: Adobe DreamWeaver 2019 Chương 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 hồn chỉnh Nam Định, 27 tháng 04 năm 2020 Chủ biên Lê Hữu Toản MỤC LỤC LỜI GIỚI THIỆU MỤC LỤC DANH MỤC CHỮ VIẾT TẮT DANH MỤC BẢNG, HÌNH VẼ Chương TỔNG QUAN 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 1.1.1.2 Địa IP 1.1.1.3 Tên miền (Domain name) 10 1.1.1.4 World Wide Web (WWW) 11 1.1.2 Giao thức truyền siêu văn 12 1.1.3 Web tĩnh, Web động 13 1.1.3.1 Trang web 13 1.1.3.2 Web tĩnh 14 1.1.3.3 Web động 14 1.1.4 Ngôn ngữ kịch 15 1.2 NGÔN NGỮ HTML 15 1.2.1 Giới thiệu HTML 15 1.2.2 Cấu trúc trang HTML 15 1.2.3 Thẻ cấu trúc thẻ 16 1.2.3.1 Các thẻ trang web 16 1.2.3.2 Thẻ định dạng kí tự 18 1.2.3.3 Thẻ đường kẻ ngang 20 1.2.3.4 Chèn hình ảnh 21 1.2.3.5 Định dạng đoạn 22 1.2.3.6 Tạo bảng (Table) 23 1.2.3.7 Tạo liên kết (Hyperlink) 24 1.2.3.8 Tạo khung (Frame) 24 1.2.3.9 Tạo Form 25 TÓM TẮT NỘI DUNG CHƯƠNG 28 BÀI TẬP CHƯƠNG 29 BÀI THỰC HÀNH CHƯƠNG 30 HƯỚNG DẪN TỰ HỌC Ở NHÀ 39 NỘI DUNG THẢO LUẬN 40 Chương ĐỊNH DẠNG BẰNG CSS 42 2.1 KHÁI NIỆM CSS 42 2.2 QUY ƯỚC VỀ CSS 43 2.2.1 Cú pháp CSS 43 2.2.2 Đơn vị CSS 44 a Đơn vị chiều dài 44 b Đơn vị màu sắc 44 2.2.3 Vị trí đặt CSS 45 2.3 SỬ DỤNG STYLE TRONG CSS 46 2.3.1 Mức độ ưu tiên style 46 2.3.2 Cách khai báo style 47 2.3.3 Một số Style 47 2.3.3.1 Background 47 2.3.3.2 Font Chữ 48 2.3.3.3 Text 49 2.3.3.4 Định dạng liên kết 49 2.3.3.5 Span & Div 50 2.3.3.6 Margin & Padding 50 2.3.3.7 Border 51 2.3.3.8 Height & Width 51 TÓM TẮT NỘI DUNG CHƯƠNG 53 BÀI TẬP CHƯƠNG 54 BÀI THỰC HÀNH CHƯƠNG 55 HƯỚNG DẪN TỰ HỌC Ở NHÀ 61 NỘI DUNG THẢO LUẬN CHƯƠNG 62 Chương ADOBE DREAM WEAVER 2019 63 3.1 MỘT SỐ CÔNG CỤ THIẾT KẾ WEB 63 3.1.1 Notepad++ 63 3.1.2 Microsft FrontPage 63 3.1.3 Adobe DreamWaver 64 3.2 THIẾT KẾ VỚI ADOBE DREAMWAVER 67 3.2.1 Teamplate trang Web 67 3.2.2 Tạo bảng (Table) trang khung (Frame) 68 3.2.3 Multimedia trang web 71 3.3 LÀM VIỆC VỚI FORM 73 3.3.1 Các đối tượng Form 73 3.3.2 Thuộc tính đối tượng 73 TÓM TẮT NỘI DUNG CHƯƠNG 75 BÀI TẬP CHƯƠNG 75 BÀI THỰC HÀNH CHƯƠNG 76 NỘI DUNG THẢO LUẬN CHƯƠNG 79 Chương SCRIPT TRONG TRANG WEB 81 4.1 TỔNG QUAN VỀ SCRIPT TRONG TRANG WEB 81 4.2 CƠ BẢN VỀ JAVASCRIPT 81 4.2.1 Khái niệm JavaScript 81 4.2.2 Một số đối tượng có sẵn JavaScript 82 4.2.3 Xây dựng hàm xử lý kiện 89 4.3 CƠ BẢN VỀ VBSCRIPT 91 4.3.1 Khái niệm VBScript 91 4.3.2 Hàm thủ tục VBScript 91 4.3.3 Đối tượng VBScript 95 TÓM TẮT NỘI DUNG CHƯƠNG 97 BÀI TẬP CHƯƠNG 98 BÀI THỰC HÀNH CHƯƠNG 98 HƯỚNG DẪN TỰ HỌC 98 NỘI DUNG THẢO LUẬN CHƯƠNG 98 PHỤ LỤC 98 TÀI LIỆU THAM KHẢO 103 DANH MỤC CHỮ VIẾT TẮT ARPA Advanced Research Projects Agency TCP/IP Transmission Control Protocol/Internet Protocol WWW World Wide Web HTML HyperText Markup Language SGML Standard Generalized Markup Language CGI Common Gateway Interface ISP Internet Service Provider URL Uniform Resource Locator HTTP HyperText Transfer Protocol RFC Request For Comments IETF Internet Engineering Task Force MIME Multipurpose Internet Mail Extensions URI Uniform Resource Identifier URN Uniform Resource Name UA User Agent SMTP Simple Mail Transfer Protocol NNTP Network News Transfer Protocol FTP File Tranfer Protocol DNS Domain Name System HTTPS Hypertext Transfer Protocol Secure SSL Secure Socket Layer TLS Transport Layer Security CSS Cascading Style Sheets GUI Graphical User Interface STL Standard Template Library DWT Dynamic Web Templates SEO Search Engine Optimization 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 10 Hình 1- Phân cấp tên miền 11 Hình 1- Thống kê trình duyệt sử dụng 12 Hình 1- Tiêu đề trang web xuất trình duyệt 16 Hình 1- Tiêu đề hình ảnh di chuột 22 Hình 1- Form đăng kí thơng tin .28 Hình 1- Mơ tả thực hành 30 Hình 1- Mơ tả thực hành 31 Hình 1- 10 Mơ tả thực hành số 32 Hình 1- 11 Mô tả thực hành số 33 Hình 1- 12 Mô tả thực hành số 35 Hình 1- 13 Mơ tả thực hành số 36 Hình 1- 14 Mơ tả thực hành số 38 Hình 1- 15 Mơ tả thực hành số 10 39 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 Hình 2- Minh họa CSS 42 Hình 2- Minh họa tác dụng thuộc tính Margin 51 Hình 2- Các kiểu đường viền thiết kế 51 Hình 2- Minh họa thực hành số 55 Hình 2- Minh họa thực hành số 57 Hình 2- Minh họa thực hành số 58 Hình 2- Minh họa thực hành số 58 Hình 2- Minh họa thực hành số 59 Hình 2- Minh họa thực hành số 60 Bảng 2- Bảng đơn vị chiều dài 44 Bảng 2- Bảng đơn vị màu sắc 44 Bảng 2- Thuộc tính định vị ảnh 48 Hình 3- Phần Footer giúp định hướng chức Error! Bookmark not defined Hình 3- Trang web bán hàng trực tuyến Error! Bookmark not defined Hình 3- Trang web mơ hình B2B Error! Bookmark not defined Hình 3- Trang web cổng thông tin điện tử tỉnh Nam ĐịnhError! Bookmark not defined Hình 3- Màn hình làm việc NotePade++ 63 Hình 3- Màn hình làm việc Microsoft FrontPage 64 Hình 3- Màn hình làm việc Dreamwave 65 Hình 3- Các chức mục Insert DreamWave 65 Hình 3- Chế độ Split lập trình DreamWave 66 Hình 3- 10 Các đối tượng bảng Insert chia thành nhóm 67 Hình 3- 11 Màn hình làm việc Photoshop Error! Bookmark not defined Hình 3- 12 Các nhóm chức cơng cụ PhotoshopError! Bookmark not defined Hình 3- 13 Màn hình làm việc Macromedia Flash Error! Bookmark not defined Hình 3- 14 Minh họa thực hành số 76 Hình 3- 15 Minh họa thực hành số 77 Hình 3- 16 Minh họa thực hành 78 Hình 3- 17 Màn hình làm việc DreamWave 79 Hình 3- 18 Thanh cơng cụ Macromedia Dreamwave 79 Hình 3- 19 Thanh cơng cụ Macromedia Dreamwave 80 Hình 3- 20 Thanh công cụ Macromedia Dreamwave 80 Hình 4- Bố cục trang web thiết kế vẽ tay Error! Bookmark not defined Hình 4- Bố cục trang web thiết kế phần mềmError! Bookmark not defined Hình 4- Layout cột với kích thước cố định Error! Bookmark not defined Hình 4- Layout cột có kích thước khác Error! Bookmark not defined Hình 4- Layout cột layout kết hợp Error! Bookmark not defined Hình 4- Các thành phần thiết kế Error! Bookmark not defined Hình 4- Hình ảnh tạo file tài liệu Photoshop Error! Bookmark not defined Hình 4- Tạo layer để thay đổi background Error! Bookmark not defined Hình 4- Tạo màu cho layer Error! Bookmark not defined Hình 4- 10 Lựa chọn vùng làm header cho trang web Error! Bookmark not defined Hình 4- 11 Thay đổi màu cho header Error! Bookmark not defined Hình 4- 12 Vùng lựa chọn làm điều hướng Error! Bookmark not defined Hình 4- 13 Thiết lập thơng số Error! Bookmark not defined Hình 4- 14 Kết thu Error! Bookmark not defined Hình 4- 15 Phần hiển thị header điều hướng Error! Bookmark not defined Hình 4- 16 Tạo tên website vào header Error! Bookmark not defined Hình 4- 17 Nhập danh mục chức Error! Bookmark not defined Hình 4- 18 Tạo nút Hover button Error! Bookmark not defined Hình 4- 19 Giao diện thu Error! Bookmark not defined Hình 4- 20 Thiết kế chức tìm kiếm Error! Bookmark not defined Hình 4- 21 Tạo layer khung hình Error! Bookmark not defined Hình 4- 22 Thiết kế layer hình ảnh Error! Bookmark not defined Hình 4- 23 Hình ảnh chèn vị trí Error! Bookmark not defined Hình 4- 24 Tạo nội dung cho khung hình Error! Bookmark not defined Hình 4- 25 Thiết kế dải dây băng chứa tiêu đề Error! Bookmark not defined Hình 4- 26 Nội dung chèn vào trang thiết kế Error! Bookmark not defined Hình 4- 27 Thiết kế layer footer Error! Bookmark not defined Hình 4- 28 Thiết kế layer footer Error! Bookmark not defined Hình 4- 29 Hình ảnh trang web thiết kế hồn thiện Error! Bookmark not defined Hình 4- 30 Hình ảnh trang web sau định dạng HTML CSSError! Bookmark not def Hình 4- 31 Trang chủ website bán hàng kĩ thuật số Error! Bookmark not defined Hình 4- 32 Trang chủ website bán đồ trang sức Error! Bookmark not defined Hình 4- 33 Trang chủ website cơng ty Error! Bookmark not defined Hình 4- 34 Trang chủ website Business Co Error! Bookmark not defined 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 ngồi 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ử mousedown Sự kiện xẩy người dùng nhấn nút chuột lên phần tử 89 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 hoà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 animationend Sự kiện xẩy q trình hoạt hình CSS hồn thành 90 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 khơng thể 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 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ụ: *) 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 : =, >,