›
›

Giáo trình Thiết kế web - Trình độ: Cao đẳng - Trường Cao đẳng kỹ thuật công nghệ

docx 95 trang Gia Huy 16/05/2022 5090
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Thiết kế web - Trình độ: Cao đẳng - Trường Cao đẳng kỹ thuật công nghệ", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • docxgiao_trinh_thiet_ke_web_trinh_do_cao_dang_truong_cao_dang_ky.docx

Nội dung text: Giáo trình Thiết kế web - Trình độ: Cao đẳng - Trường Cao đẳng kỹ thuật công nghệ

  1. BM/QT10/P.ĐTSV/04/04 Ban hành lần: 3 UBND TỈNH BÀ RỊA – VŨNG TÀU TRƯỜNG CAO ĐẲNG KỸ THUẬT CÔNG NGHỆ GIÁO TRÌNH MÔ ĐUN THIẾT KẾ WEB NGHỀ: CÔNG NGHỆ THÔNG TIN TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định số: /QĐ-CĐKTCN, ngày tháng năm 20 của Hiệu trưởng Trường Cao đẳng Kỹ thuật Công nghệ BR-VT) BÀ RỊA – VŨNG TÀU, NĂM 2020
  2. TUYÊN BỐ BẢN QUYỀN Nhằm đáp ứng nhu cầu học tập và nghiên cứu cho giảng viên và sinh viên nghề Công nghệ Thông tin trong trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu, chúng tôi đã thực hiện biên soạn tài liệu Thiết kế web này. Tài liệu được biên soạn thuộc loại giáo trình phục vụ giảng dạy và học tập, lưu hành nội bộ trong Nhà trường nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm.
  3. LỜI GIỚI THIỆU Giáo trình “Thiết kế web” được biên soạn dựa trên khung chương trình đào tạo Cao đẳng nghề Công nghệ Thông tin đã được Trường Cao đẳng Kỹ thuật Công nghê Bà Rịa – Vũng Tàu phê duyệt. Tác giả đã nghiên cứu một số tài liệu, công nghệ hiện đại kết hợp với kinh nghiệm làm việc thực tế để viết nên giáo trình này. Nội dung được tác giả trình bày cô động, dễ hiểu kèm theo các bước hướng dẫn thực hành chi tiết theo nguyên tắc quan tâm đến kết quả đầu ra, khả năng tự học và kỹ năng cần thiết để HSSV có thể hoàn thành thiết kế và lập trình nhúng xử lý tương tác cơ bản trên trang web với sự kết hợp của HTML5 và CSS3, lập trình nhúng xử lý cơ bản trên trang web bằng Javascript, thiết kế được giao diện trang web chuyên nghiệp với jQuery, tạo và quản lý nội dung của website đáp ứng nhu cầu thực tế của doanh nghiệp. Nội dung giáo trình được chia thành 8 bài, trong đó: Bài 1: Môi trường tạo trang web tĩnh DreamWeaver, thẻ HTML Bài 2: Tạo trang web bằng HTML5 Bài 3: Hoàn chỉnh giao diện trang web với CSS Bài 4: Tùy biến giao diện web với CSS3 Bài 5: Xử lý tương tác với Javascript Bài 6: Một số kỹ thuật thiết kế nâng cao Bài 7: Tạo giao diện chuyên nghiệp bằng jQuery Bài 8: Publish website Trong quá trình biên soạn, chắc chắn giáo trình còn nhiều thiếu sót. Tác giả rất mong nhận được ý kiến đóng góp của quý thầy/cô và các em học sinh, sinh viên để tiếp tục hoàn thiện hơn. Xin chân thành cảm ơn quý đồng nghiệp, bạn bè đã có những ý kiến đóng góp trong quá trình biên soạn giáo trình này. Bà Rịa – Vũng Tàu, ngày tháng năm Tham gia biên soạn 1. Nguyễn Phạm Ái Hương – Chủ biên 1
  4. MỤC LỤC LỜI GIỚI THIỆU 1 MỤC LỤC 3 BÀI 1: MÔI TRƯỜNG TẠO TRANG WEB TĨNH DREAMWAVER, THẺ HTML 11 1. Giới thiệu 11 2. Quản lý các site 12 3. Quản lý nội dung trong site 13 4. Chọn vùng nhìn 14 5. Thẻ HTML cơ bản 14 CÂU HỎI, BÀI TẬP 19 BÀI 2: TẠO TRANG WEB BẰNG HTML5 21 1. Sử dụng các thẻ ngữ nghĩa 21 2. Sử dụng các thẻ mới của HTML5 trong Form 22 3. Sử dụng HTML5 GraphicsSVG 24 4. Sử dụng các HTML Media 26 CÂU HỎI, BÀI TẬP 27 BÀI 3: HOÀN CHỈNH GIAO DIỆN TRANG WEB VỚI CSS 28 1. Giới thiệu CSS và các loại CSS 28 2. Tạo và sử dụng CSS 29 3. Tạo định dạng chung cho trang web 30 4. Tạo giao diện trang web canh giữa trình duyệt 30 5. Tạo hiệu ứng đổi định dạng cho menu 31 6. Tạo khung viền bo tròn cho nội dung 32 CÂU HỎI, BÀI TẬP 32 BÀI 4: TÙY BIẾN GIAO DIỆN WEB VỚI CSS3 33 1. Rounded Corners 33 3
  5. 2. Border Images 34 3. Backgrounds 35 4. Colors 37 5. Gradients 38 6. Shadows 39 7. Text 41 8. Fonts 42 9. 2D Transforms 42 10. 3D Transforms 44 11. Transitions 46 12. Animations 47 13. Box Sizing 47 14. User Interface 47 CÂU HỎI, BÀI TẬP 48 BÀI 5: XỬ LÝ TƯƠNG TÁC VỚI JAVASCRIPTS 50 1. Tổng quan Javascript 50 2. Sử dụng cấu trúc điểu khiển 55 3. Sử dụng mảng và hàm 57 CÂU HỎI, BÀI TẬP 61 BÀI 6: MỘT SỐ KỸ THUẬT THIẾT KẾ NÂNG CAO 62 1. Template trong Dreamwaver 62 2. Navigation Menu 66 3. Đối tượng nâng cao trong Javascript 67 CÂU HỎI, BÀI TẬP 73 BÀI 7: TẠO GIAO DIỆN CHUYÊN NGHIỆP BẰNG JQUERY 74 1. Tổng quan JQuery 74 2. Chọn element 75 3. Thay đổi nội dung, thuộc tính 77 4
  6. 4. Xử lý sự kiện 80 5. Tạo hiệu ứng và hoạt ảnh 83 CÂU HỎI, BÀI TẬP 85 BÀI 8: PUBLISH WEBSITE 86 1. Đăng ký web hosting miễn phí 86 2. Publish web lên web hosting miễn phí 86 3. Publish web lên local IIS 87 CÂU HỎI, BÀI TẬP 89 5
  7. GIÁO TRÌNH MÔ ĐUN Tên mô đun: Thiết kế web Mã mô đun: MĐ18 Vị trí, tính chất, ý nghĩa và vai trò của mô đun: Vị trí: được bố trí sau khi học xong các môn cơ sở và Đồ họa ứng dụng Tính chất: Là module chuyên ngành của nghề công nghệ thông tin, cung cấp kiến thức và kỹ năng của một công việc trong quy trình xây dựng ứng dụng web Ý nghĩa và vai trò của mô đun: cung cấp cho người học kiến thức và kỹ năng để thiết kế và lập trình nhúng xử lý tương tác cơ bản trên trang web với sự kết hợp của HTML5 và CSS3, lập trình nhúng xử lý cơ bản trên trang web bằng Javascript, thiết kế được giao diện trang web chuyên nghiệp với jQuery, tạo và quản lý nội dung của website đáp ứng nhu cầu thực tế của doanh nghiệp. Mục tiêu của mô đun: Về kiến thức: Biết tạo và quản lý nội dung của website trong phần mềm DreamWeaver. Biết công dụng các thẻ HTML, HTML5, định dạng của CSS và CSS3 Có kiến thức cơ bản về JavaScript. Biết công dụng của Jquery Biết quy trình pubish website lên internet. Về kỹ năng: Chia bố cục, thiết kế được các trang web bằng các thẻ HTML, HTML5, và định dạng của CSS và CSS3. Lập trình nhúng xử lý tương tác cơ bản trên trang web bằng Javascript. Sử dụng được Template, Navigation và menu trong Dreamweaver. Thiết kế được giao diện trang web chuyên nghiệp với jQuery. Đăng ký được web hosting miễn phí Publish được website lên Web Werver Về năng lực tự chủ và trách nhiệm: Có tinh thần trách nhiệm, ý thức tổ chức kỷ luật, tác phong công nghiệp, tinh thần hợp tác trong công việc 6
  8. Có tính chủ động, độc lập trong công việc, tự học cập nhật kiến thức, nâng cao trình độ chuyên môn. Có khả năng tổ chức và điều hành một nhóm, đánh giá được các thành viên trong nhóm. Rèn luyện tính cẩn thận, kiên trì, sáng tạo, độc lập và hoạt động nhóm. Bảo đảm an toàn và vệ sinh cho người và thiết bị trong phòng máy. Nội dung của mô đun: Thời gian (giờ) Số Thực hành, thí Tên các bài trong mô đun Tổng Lý Kiểm TT nghiệm, thảo số thuyết tra luận, bài tập Bài 1: Môi trường tạo trang web tĩnh 4 1 3 0 1 DreamWeaver, thẻ HTML 1. Giới thiệu 0.4 0.1 0.3 0 2. Quản lý các site 0.7 0.2 0.5 0 3. Quản lý nội dung trong site 0.6 0.1 0.5 0 4. Chọn vùng nhìn 0.3 0.1 0.2 0 5. Thẻ HTML cơ bản 2 0.5 1.5 0 2 Bài 2: Tạo trang web bằng HTML5 15 5 9 1 1. Giới thiệu HTML5 0.7 0.2 0.5 0 2. Sử dụng các thẻ ngữ nghĩa 1.3 0.3 1 0 3. Sử dụng các thẻ mới của HTML5 trong 3.5 1.0 2.5 0 Form 4. Sử dụng HTML Graphics SVG 4.5 2.0 2.5 0 5. Sử dụng các HTML Media 4 1.5 2.5 0 Kiểm tra 1 0 0 1 Bài 3: Hoàn chỉnh giao diện trang web 13 4 8 1 3 với CSS 1. Giới thiệu CSS và các loại CSS 0.6 0.1 0.5 0 2. Tạo và sử dụng CSS 0.8 0.3 0.5 0 3. Tạo định dạng chung cho trang web 1.6 0.6 1 0 7
  9. 4. Tạo giao diện trang web canh giữa trình 1.5 0.5 1 0 duyệt 5. Tạo hiệu ứng đổi định dạng cho menu 4.5 1.5 3 0 6. Tạo khung viền bo tròn cho nội dung 3 1.0 2 0 Kiểm tra 1 0 0 1 4 Bài 4: Tùy biến giao diện web với CSS3 14 4 8 2 1. Rounded Corners 0.6 0.2 0.4 0 2. Border Images 0.6 0.2 0.4 0 3. Backgrounds 0.6 0.2 0.4 0 4. Colors 0.6 0.2 0.4 0 5. Gradients 0.9 0.3 0.6 0 6. Shadows 0.9 0.3 0.6 0 7. Text 0.6 0.2 0.4 0 8. Fonts 0.6 0.2 0.4 0 9. 2D Transforms 0.9 0.3 0.6 0 10. 3D Transforms 0.9 0.3 0.6 0 11. Transitions 0.9 0.3 0.6 0 12. Animations 0.9 0.3 0.6 0 13. Box Sizing 1.5 0.5 1 0 14. User Interface 1.5 0.5 1 0 Kiểm tra 2 0 0 2 5 Bài 5: Xử lý tương tác với Javascript 12 2 8 2 1. Tổng quan Javascript 0.8 0.2 0.6 0 2. Sử dụng cấu trúc điều khiển 6.4 1 5.4 0 3. Sử dụng mảng và hàm 2.8 0.8 2 0 Kiểm tra 2 0 0 2 6 Bài 6: Một số kỹ thuật thiết kế nâng cao 10 2 6 2 1. Template trong Dreamweaver 2 0.5 1.5 0 2. Navigation và Menu 2 0.5 1.5 0 3. Đối tượng nâng cao trong Javascript 4 1.0 3 0 Kiểm tra 2 0 0 2 8
  10. Bài 7: Tạo giao diện chuyên nghiệp bằng 18 3 13 2 7 jQuery 1. Tổng quan jQuery 1.2 0.2 1 0 2. Chọn element 1.2 0.2 1 0 3. Lọc chọn element 1.2 0.2 1 0 4. Thay đổi nội dung, thuộc tính 2.4 0.4 2 0 5. Xử lý sự kiện 5 1 4 0 6. Tạo hiệu ứng và hoạt ảnh 5 1 4 0 Kiểm tra 2 0 0 2 8 Bài 8: Publish website 4 1 3 0 1. Đăng ký web hosting miễn phí 1.5 0.5 1 0 2. Publish web lên web hosting miễn phí 1.5 0.3 1 0 3. Publish web lên local IIS 1.5 0.2 1 0 Cộng 90 22 58 10 9
  11. BÀI 1: MÔI TRƯỜNG TẠO TRANG WEB TĨNH DREAMWEAVER Mã bài: 18.1 Giới thiệu: Adobe DreamWeaver là ứng dụng thiết kế web được sử dụng phổ biến nhất hiện nay. Adobe DreamWeaver hỗ trợ các chức năng mạnh mẽ cho cả người thiết kế và lập trình web. Mục tiêu: Biết công dụng của từng thành phần trong DreamWeaver Biết tạo và quản lý site Biết quản lý nội dung trong site Quản lý cẩn thận nội dung trong site, tránh xóa nhằm nội dung, site Nội dung chính: 1. Giới thiệu 1.1. Khởi động Click đôi chuột lên biểu tượng Adobe DreamWeaver trên desktop Vào Start Programs Adobe DreamWeaver Hình 1.1. Giao diện Adobe DreamWeaver 11
  12. 1.2. Quản lý các palette Vào menu Window Chọn/bỏ chọn để hiện/ẩn palette. Hình 1.2. Vị trí hiển thị của các palette Muốn mở rộng palette nào thì click chuột lên biểu tượng của palette đó Click chuột lên biểu tượng để mở rộng tất cả palette 2. Quản lý các site Vào menu Site Manage Sites. Xuất hiện hộp thoại quản lý các site. Hình 1.3. Hộp thoại Manage Sites 2.1. Tạo site Click chuột lên nút New Site 12
  13. Đặt tên cho site, chọn ổ đĩa, thư mục chứa site rồi chọn Save trong hộp thoại Site Setup Hình 1.4. Hộp thoại Site Setup 2.2. Xóa site Trong hộp thoại Manage Site, chọn site cần xóa trong danh sách Click chuột lên biểu tượng Delete the current selected sites ( ) 3. Quản lý nội dung trong site 3.1. Cấu trúc site Mở rộng palette Files. Cấu trúc site cần tạo sẽ có nội dung như sau: Hình 1.5. Cấu trúc site 13
  14. 3.2. Các loại tập tin trong site .htm, .html: trang web, tài liệu html .jpg, .png, .gif: tập tin hình ảnh, dùng để chèn, định dạng nền cho trang web, thường được đặt trong thư mục images .css: tập tin định dạng cho trang web, thường được đặt trong thư mục styles .js: tập tin javascript, chứa các đoạn mã thực thi trên trình duyệt, thường đượt đặt trong thư mục scripts 3.3. Quản lý thư mục, tập tin Yêu cầu: tạo 03 thư mục images, scripts, styles và tập tin index.html trong site Các bước thực hiện o Click chuột phải lên đối tượng chứa trong palette Files, chọn New Folder o Đặt tên cho folder cần tạo o Click chuột phải lên site, chọn New File, đặt tên cho tập tin cần tạo 4. Chọn vùng nhìn làm việc Hình 1.6. Các tùy chọn vùng nhìn làm việc Click đôi chuột lên trang web cần thiết kế Click chuột lên biểu tượng vùng nhìn cần chọn o Code: thiết kế trang bằng các thể HTML o Design: thiết kế trang bằng cách kéo thả các element vào trang web o Split: tách cửa sổ tài liệu thành 2 vùng nhìn Code và Design 5. Thẻ HTML cơ bản 5.1. Tìm hiểu cấu trúc tài liệu HTML Hầu hết các element bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng. Ví dụ: 14
  15. Nội dung được đặt giữa thẻ mở và thẻ đóng. Ví dụ: Đây là đoạn văn bản Một số thẻ đặc biệt vừa mở và đóng o : ngắt xuống dòng o : tạo đường kẻ nằm ngang o : chèn ảnh (sẽ được tìm hiểu chi tiết ở phần sau) Thuộc tính của element được đặt trong thẻ mở. o Ví dụ: o src: là thuộc tính o images/i1.jpg: giá trị của thuộc tính src. o Giá trị của thuộc tính luôn được đặt trong cặp dấu nháy kép “” Element nào được mở trước thì phải đóng sau 5.2. Thiết kế trang web bằng các thẻ HTML cơ bản 5.2.1. META, LINK, STYLE, SCRIPT META o Tạo từ khóa tìm kiếm o Tạo nội dung mô tả cho trang 5.2.2. TABLE, TR, TD, TH TABLE: Tạo bảng TR: Tạo dòng trong bản TD: Tạo ô trong dòng TH: Tương tự TD nhưng là ô tiêu đề, nội dung được tự động tô đậm và canh giữa ô Ví dụ: 15
  16. 5.2.3. DIV, P, BR, HR DIV: Chia vùng riêng, chiếm hết chiều ngang của vùng chứa Ví dụ: P: Tạo đoạn văn bản Ví dụ: 16
  17. BR: Ngắt xuống dòng trong đoạn văn bản HR: Tạo đường kẻ ngang Ví dụ: 5.2.4. IMG, A IMG: Chèn ảnh vào trang web Ví dụ: A: Tạo liên kết đến trang web Ví dụ: 5.2.5. OL, UL, LI OL: Tạo danh sách đánh số thứ tự UL: Tạo danh sách không đánh số thứ tự 17
  18. LI: Tạo mục trong danh sách Ví dụ: 5.2.6. FORM, INPUT, SELECT, OPTION FORM: Tạo form cho người truy cập nhập thông tin vào trang web INPUT: Tạo các điều khiển cho phép người dùng nhập/chọn dữ liệu, đặt trong FORM SELECT: Tạo danh sách chọn OPTION: Tạo mục trong danh sách chọn Ví dụ: 18
  19. CÂU HỎI, BÀI TẬP 1.1. Thiết kế một trang web cơ bản theo mẫu: tạo layout cho TrangChu.html 19
  20. 2.2. Tạo form và các điều khiển trong form YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP Đúng cấu trúc tài liệu HTML Đúng quy tắc: mở trước, đóng sau Giao diện đăng ký phải được đặt trong form 20
  21. BÀI 2: TẠO TRANG WEB BẰNG HTML5 Mã bài: 18.2 Giới thiệu: HTML5 là phiên bản mới nhất của HTML, hỗ trợ các element ngữ nghĩa rõ ràng. Với HTML5, các trang web được thiết kế với số lượng element ít hơn, rõ ràng hơn, chèn multimedia đơn giản hơn. Mục tiêu: Biết công dụng các tag mới trong HTML5 Bố cục, thiết kế được trang web bằng HTML5 Cẩn thận, an toàn Nội dung chính: 1. Sử dụng các thẻ ngữ nghĩa section: định nghĩa một vùng của tài liệu Ví dụ: article: định nghĩa một bài viết (bài trên forum, blog, báo) Ví dụ: nav, menu: định nghĩa vùng chứa navigation (thường gọi là menu) của trang Ví dụ: 21
  22. header: định nghĩa vùng header (banner) của trang/bài viết Ví dụ: footer: định nghĩa vùng cuối trang (thông tin liên hệ, bản quyền) Ví dụ: 2. Sử dụng các thẻ mới của HTML5 trong FORM datalist, keygen, output Các type mới của input trong FORM o color: chọn màu o date: chọn ngày 22
  23. o time: chọn giờ o email: nhập email o month: chọn tháng, năm o week: chọn tuần trong năm o number: chọn số o range: chọn giá trị trong vùng giới hạn 23
  24. 3. Sử dụng HTML Graphics SVG 3.1. SVG là gì? SVG là viết tắt của Scalable Vector Graphics, là một định dạng hình ảnh (tương tự như JPG, PNG, mà chúng ta vẫn thường dùng). SVG được sử dụng để vẽ đồ họa 2D và các ứng dụng đồ họa trên website, phần lớn hữu ích cho các sơ đồ kiểu vecto như các biểu đồ Pie, các đồ thị hai chiều trong hệ tọa độ X, Y SVG là chuẩn chính thức của tổ chức web thế giới W3C. Ưu điểm • Hình ảnh SVG có thể phóng to nhưng không vỡ ảnh. • Hình ảnh SVG có thể được in với chất lượng cao ở bất kỳ độ phân giải nào. • Hình ảnh SVG có thể được tạo và chỉnh sửa bằng javascript. • Hình ảnh SVG có thể tìm kiếm, đánh chỉ mục, nén, • Hình ảnh SVG có thể chuyển động sử dụng các thành phần animation đã xây dựng sẵn. • Hình ảnh SVG có thể chứa liên kết đến bất kỳ tài liệu nào khác. • SVG hầu như được hỗ trợ trên tất cả các trình duyệt. Phần tử trong HTML là một vùng chứa để vẽ đồ họa. SVG có một vài phương thức để vẽ như: đường thẳng, hình hộp, hình tròn, văn bản và hình ảnh đồ họa 3.2. Vẽ đường tròn SVG Để vẽ đường tròn ta dùng thẻ 24
  25. Các thuộc tính trong là: • cx: vị trí tâm, tính từ mép trái của SVG. • cy: vị trí tâm, tính từ mép trên. • r: bán kính. • fill: xác định màu tô. • stroke: đường biên. 3.3. Vẽ hình ellipse SVG Để vẽ hình ellipse ta sử dụng thẻ Các tham số tương tự khi vẽ hình tròn, thêm hai thuộc tính: rx: bán kính từ tâm đến mép bên trái. ry: bán kính từ tâm đến mép phía trên. 25
  26. 4. Sử dụng HTML Media Các đặc trưng HTML5, bao gồm sự hỗ trợ audio và video tự nhiên mà không cần Flash. Thẻ HTML5 và làm nó đơn giản để thêm đa phương tiện tới một Website. Bạn cần thiết lập thuộc tính src để nhận diện nguồn phương tiện và bao gồm một thuộc tính control để người sử dụng có thể chơi và dừng đa phương tiện. 4.1. Nhúng video Một phần tử video cho phép nhiều phần tử source và trình duyệt sẽ sử dụng định dạng được nhận ra đầu tiên: Ví dụ: play một video đã cho 4.2. Nhúng audio Các định dạng audio được sử dụng phổ biến nhất là ogg, mp3 và wav. 26
  27. Một phần tử audio cho phép nhiều phần tử source và trình duyệt sẽ sử dụng định dạng mà nó nhận ra đầu tiên: CÂU HỎI, BÀI TẬP Tạo trang web theo mẫu của bài 1 với cách sử dụng tối đa thẻ HTML5 27
  28. BÀI 3: HOÀN CHỈNH GIAO DIỆN TRANG WEB VỚI CSS Mã bài: 18.3 Giới thiệu: Bất kỳ trang web nào, ngoài hiển thị nội dung, nó cũng phải được định dạng, trang trí để thu hút và tiện lợi cho người xem. Không ngoại trừ có nhiều nội dung được định dạng giống nhau. Với CSS, người thiết kế web chỉ cần viết kịch bản định dạng một lần và sử dụng cho nhiều nội dung. Mục tiêu: Biết công dụng của CSS, các loại CSS Thiết kế được trang web với HTML, HTML5, và CSS Cẩn thận, an toàn Nội dung chính: 1. Giới thiệu CSS và các loại CSS 1.1. Giới thiệu CSS (Cascading Style Sheet) là tài liệu định nghĩa các quy tắc định dạng cho các element trong trang web. 1.2. External Quy tắc định dạng đặt trong một tập tin .css và được sử dụng trong trang thông qua thẻ Ví dụ: Hình 3.1. Cấu trúc site 28
  29. 1.3. Internal Quy tắc định dạng được đặt ngay trong trang web, đặt trong thẻ Ví dụ: 1.4. Thuộc tính style Quy tắc định dạng cũng có thể đặt trong thuộc tính style của thẻ mở. Ví dụ: 2. Tạo và sử dụng CSS ID Selector: Dùng dấu # đặt trước tên quy tắc. Quy tắc định dạng sẽ áp dụng trên các element có thuộc tính id phù hợp. Ví dụ: Nội dung HTML Nội dung CSS Class Selector: dùng dấu chấm (.) đặt trước tên quy tắc. Quy tắc định dạng sẽ áp dụng trên các element có thuộc tính class phù hợp. Ví dụ: Nội dung HTML 29
  30. Nội dung CSS Tạo một số định dạng thông dụng o font-family, color: font và màu chữ o border[-top/right/bottom/left]: đường viền xung o padding[-top/right/bottom/left]: khoảng cách giữa đường viền với nội dung bên trong o margin[-top/right/bottom/left]: khoảng cách giữa vùng chứa với đường viền o background-color, background-image: màu nền, ảnh nền 3. Tạo định dạng chung cho trang web 4. Tạo giao diện trang web canh giữa trình duyệt Hầu hết các màn hình LCD phổ biến trên thị trường ngày nay là màn ảnh rộng. Tỷ lệ màn hình rộng này có thể gây ảnh hưởng tới các nhà thiết kế web và cách họ trình bày trang Web. 30
  31. Với một đoạn mã Cascading Style Sheet (CSS) ngắn gọn, bạn có thể điều chỉnh thiết kế trang web vào vị trí trung tâm trên bất kỳ màn hình nào cho dù màn hình đó theo tỷ lệ nằm ngang hay thẳng đứng. Tạo file .css như sau: để điều chỉnh sao cho các trình duyệt chạy như nhau và bỏ đi một số hiển thị không cần thiết (bỏ list-style cho và , bỏ border cho ) 5. Tạo hiệu ứng đổi định dạng cho menu Viết CSS cho 31
  32. Thêm hiệu ứng cho gNav khi hover (di chuyển chuột đổi hiệu ứng) 6. Tạo khung viền bo tròn cho nội dung Bốn giá trị – bán kính đường viền: 15px 50px 30px 5px; (giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai áp dụng cho góc trên cùng bên phải, giá trị thứ ba áp dụng cho góc dưới cùng bên phải và giá trị thứ tư áp dụng cho góc dưới cùng bên trái): Ba giá trị – bán kính đường viền: 15px 50px 30px; (giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai áp dụng cho các góc trên cùng bên phải và dưới cùng bên trái và giá trị thứ ba áp dụng cho góc dưới cùng bên phải): Hai giá trị – bán kính đường viền: 15px 50px; (giá trị đầu tiên áp dụng cho các góc trên cùng bên trái và dưới cùng bên phải và giá trị thứ hai áp dụng cho các góc trên cùng bên phải và dưới cùng bên trái): Một giá trị – bán kính đường viền: 15px; (giá trị áp dụng cho tất cả bốn góc, được làm tròn như nhau: CÂU HỎI, BÀI TẬP Viết css cho bài tập của bài học số 2 của trang web mẫu: 3.1 Viết css cho phần header 3.2 Viết css cho button của phần header 3.3 Viết css cho các đường thẳng đứng trong danh sách link của phần header 32
  33. BÀI 4: TÙY BIẾN GIAO DIỆN VỚI CSS3 Mã bài: 18.4 Giới thiệu: CSS3 là tiêu chuẩn mới nhất của CSS, hoàn toàn tương thích với các phiên bản trước của CSS. Với CSS3, chúng ta có thể định dạng trang web đa màu sắc sinh động, tạo kịch bản hiệu ứng hoạt hình cho trang web mà không cần phải biết bất kỳ ngôn ngữ lập trình nào. Mục tiêu: Biết các thông tin định dạng của CSS3 Thiết kế được giao diện trang web với HTML, HTML5 và CSS3 Cẩn thận, an toàn Nội dung chính: 1. Rounded Corners Tạo khung bo tròn các góc Hình 4.1. Kết quả rcorner1 Hình 4.2. Kết quả rcorner2 33
  34. Hình 4.3. Kết quả rcorner3 2. Border Images Dùng ảnh làm đường viền Chuẩn bị ảnh border.png Hình 4.4. Ảnh border.png 34
  35. Hình 4.5. Kết quả của ảnh làm kẻ khung (border images) 3. Backgrounds Ví dụ 1: Dùng nhiều ảnh làm nền Hình 4.6. Kết quả của ví dụ 1 Ví dụ 2: Thiết lập kích thước ảnh nền 35
  36. Hình 4.7. Kết quả của ví dụ 2 Ví dụ 3: Sử dụng giá trị contain và cover để thiết lập kích thước ảnh nền Hình 4.8. Kết quả của div1 Hình 4.9. Kết quả của div2 Ví dụ 4: Thiết lập kích thước cho nhiều ảnh nền 36
  37. Hình 4.10. Kết quả của ví dụ 4 4. Colors Opacity Hệ màu RGBA (Red-Green-Blue-Alpha) Là sự kết hợp giữa RGB và Opactity Hệ màu HSL (Hue-Saturation-Lightness) 37
  38. Hệ màu HSLA (Hue-Saturation-Lightness-Alpha) Là sự kết hợp giữa HSL và Opacrity 5. Gradients 38
  39. 6. Shadows Text shadow 39
  40. Box shadow Ví dụ 1: Ví dụ 2: Ví dụ 3: Ví dụ 4: Hình 4.11. Kết quả của ví dụ 4 40
  41. 7. Text Text Overflow Xử lý hiển thị khi nội dung vượt quá kích thước vùng chứa Hình 4.12. Kết quả của Text Overflow Word Wrapping Xử lý ngắt xuống dòng với những từ dài Nội dung trong HTML Nội dung CSS Kết quả hiển thị 41
  42. Word Breaking: xử lý giữ hay ngắt những từ dài 8. Fonts 9. 2D Transforms Tịnh tiến (translate) 42
  43. Xoay (rotate) Kéo kích thước (scale) Kéo xiên (skew) 43
  44. Ma trận biến đổi (matrix): kết hợp Scale, Skew và Translate matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) 10. 3D Transforms Xoay xung quanh trục X (rotateX) 44
  45. Xoay xung quanh trục Y (rotateY) Xoay xung quanh trục Z (rotateZ) 45
  46. 11. Transitions Ví dụ 1: Khi di chuyển chuột lên hình vuông thì chiều ngang sẽ thay đổi đến 300px trong vòng 2 giây. Ví dụ 2: Chiều ngang thay đổi đến 300px trong 2 giây, chiều cao thay đổi đến 300px trong 4 giây. Ví dụ 3: Chờ 1 giây, chiều ngang thay đổi đến 300px trong 3 giây tiếp theo. Ví dụ 4: Thay đổi chiều ngang, cao trong 2 giây, xoay trong 3 giây. 46
  47. 12. Animations Ví dụ: Hình vuông sẽ chuyển từ màu đỏ sang màu vàng trong 2 giây 13. Box Sizing Quy định, kích thước của element: Rộng = width + padding + border Cao = height + padding + border Trở ngại cho người thiết kế web khi viết CSS Thuộc tính box-sizing của CSS3 đảm bảo đúng padding, border mà vẫn đảm bảo kích thước đúng với giá trị của width và height. 47
  48. CÂU HỎI, BÀI TẬP 5.1 Thiết kế trang web có giao diện như hình bên dưới 48
  49. 5.2 Thiết kế trang web theo mẫu sau: 49
  50. BÀI 5: XỬ LÝ TƯƠNG TÁC VỚI JAVASCRIPT Mã bài: 18.5 Giới thiệu: Javascript là ngôn ngữ lập trình xử lý trên tài liệu HTML, được thực thi trên trình duyệt. Ngoài sử dụng HTML, CSS, người thiết kế cũng phải biết lập trình Javascript để tăng thêm hiệu ứng sinh động cho trang web. Mục tiêu: Có kiến thức cơ bản về Javascript Biết lập trình nhúng xử lý tương tác cơ bản trên trang web bằng Javascript Cẩn thận, an toàn Nội dung chính: 1. Tổng quan Javascript 1.1. Các cách nhúng Javascript vào trang web Đoạn Javascript có thể được đặt trong hoặc của tài liệu HTML. Cách 1: Viết trực tiếp trong tài liệu HTML Cách 2: Viết các lệnh Javascript trong một tập tin script có phần mở rộng .js sau đó chèn vào tài liệu HTML. 1.2. Kiểu dữ liệu, khai báo biến Khai báo biến: var ; 50
  51. Kiểu dữ liệu: javascript không quan tâm đến kiểu dữ liệu của biến khi mới khai báo. Biến trong Javascript có thể lưu trữ giá trị các kiểu dữ liệu: số (number), chuỗi (string), mảng (array), đối tượng (object), Javascript linh động trong việc xử lý kiểu dữ liệu khi thực hiện các phép tính. Ví dụ: Kết quả: 16Volvo Kết quả: 20Volvo Kiểu số (numer): Javascript không quan tâm số thực/nguyên. Javascript chỉ có một kiểu số. Ví dụ 1: Kiểu luận lý (boolean) Kiểu mảng (array) Chỉ số phần tử đầu tiên của mảng là 0 cars[0] là “Saab” Kiểu đối tượng (object) Trong ví dụ trên, đối tượng person có 4 thuộc tính: firstName, lastName, age và eyeColor. Toán tử typeOf: cho biết kiểu dữ liệu của biến/biểu thức. 51
  52. Trong Javascript, một biến chưa được gán giá trị thì sẽ có giá trị là undefined và toán tử typeOf cũng sẽ trả về undefined. Giá trị rỗng Giá trị null Sự khác nhau giữa undefined và null 1.3. Các toán tử Các toán tử trên số Các toán tử gán 52
  53. Toán tử nối chuỗi Nối chuỗi và số Toán tử so sánh và luận lý 53
  54. Biểu thức điều kiện Ví dụ: Toán tử trên kiểu dữ liệu 54
  55. 2. Sử dụng cấu trúc điều khiển 2.1. if, if else , switch Ví dụ: Ví dụ: Ví dụ: 2.2. for, while, break, continue Vòng lặp for 55
  56. Ví dụ: Vòng lặp for/in: duyệt từng thuộc tính trong đối tượng Vòng lặp while Ví dụ: Vòng lặp do/while Ví dụ: Lệnh break, continue 56
  57. o break: thoát khỏi vòng lặp o continue: bỏ qua các lệnh bên dưới của vòng lặp hiện tại, tiếp tục vòng lặp tiếp theo 3. Sử dụng hàm và mảng 3.1. Mảng Tạo mảng Ví dụ: Dùng từ khóa new Truy cập phần tử trong mảng Lưu trữ mảng dưới dạng đối tượng Mảng: Đối tượng: Thuộc tính và phương thức trên mảng o Thuộc tính length: cho biết số phần tử trong mảng o Phương thức sort: sắp xếp mảng Thêm phần tử vào mảng 57
  58. Duyệt phần tử trong mảng 3.2. Một số hàm toán học Lấy giá trị tuyệt đối Tìm giá trị nhỏ nhất Tìm giá trị lớn nhất Nhận giá trị ngẫu nhiên trong đoạn [0, 1) Làm tròn đến số nguyên gần nhất Làm tròn lên số nguyên gần nhất Làm tròn xuống số nguyên gần nhất Lấy cấn bậc 2 Các hằng số 58
  59. 3.3. Dữ liệu Date Tạo đối tượng date: có 4 cách Ví dụ: Các hàm đọc trên date Ví dụ: 59
  60. Các hàm ghi trên date 3.4. Xây dựng hàm Hàm được định nghĩa bắt đầu bằng từ khóa function, theo sau là tên hàm, sau đó là các tham số được đặt trong cặp dấu (). Hàm có thể có 1 hoặc nhiều tham số hoặc không có tham số. Các lệnh thực thi được đặt trong cặp dấu {}. Cấu trúc: Các lệnh thực thi sẽ được thực hiện khi có lời gọi hàm (đúng quy tắc). Ví dụ: 60
  61. Hàm trả về giá trị CÂU HỎI, BÀI TẬP 5.1. Thiết kế trang web hiển thị số tuổi sau khi nhập năm sinh. 5.2. Thiết kế trang web hiển thị chu vi và diện tích hình chữ nhật. 5.3. Thiết kế trang web giải và biện luận phương trình ax2 + bx + c = 0. YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP Xây dựng hàm tính toán Hướng dẫn: tham khảo hàm getElementById, thuộc tính value, innerHTML . 61
  62. BÀI 6: MỘT SỐ KỸ THUẬT THIẾT KẾ NÂNG CAO Mã bài: 18.6 Giới thiệu: HTML DOM (Document Object Model) là mô hình đối tượng chuẩn và gia diện lập trình cho tài liệu HTML. Với HTML DOM, Javascript có thể truy cập, thay đổi toàn bộ (bao gồm nội dung, thuộc tính) các element bên trong tài liệu HTML. Mục tiêu: Biết các thuộc tính, sự kiện của các element trong trang web Thay đổi nội dung, định dạng các element bằng Javascript Lập trình được tương tác với người dùng trên trang web bằng Javascript Cẩn thận, an toàn Nội dung chính: 1. Template trong Dreamwaver Bạn cũng có thể tạo một website bằng template dựng sẵn của Dreamweaver. Với teamplate, bạn sẽ đi trước một bước và tận dung ưu điểm của một site hoàn chỉnh và tham khảo code bên trong của nó. 1.1. Chọn template mẫu của Dreamwaver Vào File > New > Tab Generate chọn Page Design (CSS) > Cột giữa chọn Two Column Left Nav > Bấm Create. Xuất hiện CS Save As, bạn thấy Dòng Save in đã có tên Site bạn vừa tạo, nhập tên: index bấm Save. 62
  63. Xuất hiện CS Copy Dependent Files, trong CS này có chứa các files nhất là files ảnh, bạn bấm Cancel . Hoặc bạn cò thể tạo Folder images để chứa các ảnh. Sau khi tạo xong bạn thấy trong Cột Quản lý Files đã có Folder images và file index.php. Bạn có thể rê các files ảnh vào thư mục images. Bấm lên file index.php xuất hiện nội dung bên trái. Bấm Save All và trình duyệt để xem kết quả. 1.2. Chỉnh sửa tên menu Bước 1: Bôi đen tên Menu đầu tiên 63
  64. Bước 2: Bấm Code > Nhập TRANG CHỦ Bước 3: Bấm nút Design, bạn đã thấy tên TRANG CHỦ Bước 4: Bạn lần lượt sửa lại đặt tên: GIỚI THIỆU - TIN TỨC - SẢN PHẨM – LIÊN HỆ . Vào trình duyệt bạn thấy các tên Menu vừa tạo. 1.3. Bổ sung văn bản vào trang Bấm chuột chỉ định vị trí nhập hoặc dán văn bản > Nhập văn bản. Văn bản xuất hiện trên trang và canh theo lề trái. 64
  65. 1.4. Định dạng văn bản Trên Thanh chèn (Insert Bar) chọn Text từ Menu bật lên. Bạn sử dụng Thanh chèn và Hộp Kiểm Properties để định dạng văn bản. 1.5. Bổ sung hình ảnh vào trang Chỉ định vị trí chèn hình ảnh > Bật Thanh chèn Common > Bấm nút Image > Đến nơi cần lấy ảnh > Mở trình duyệt xem 65
  66. 2. Navigation và Menu 2.1. Tạo thanh điều hướng Với CSS, bạn có thể biến các thanh menu nhàm chán trở nên đẹp mắt hơn. Cách tạo navigation bằng danh sách sử dụng các thẻ và . 66
  67. 2.2. Canh chỉnh đường dẫn và thêm đường viền cho menu Thêm text-align:center vào hoặc để căn chỉnh đường dẫn nằm vào giữa khối. Thêm thuộc tính border vào để viền quanh thanh điều hướng. Nếu bạn cũng muốn đường viền bên trong thanh điều hướng thì thêm border-bottom vào tất cả phần tử trừ thẻ cuối cùng: 2.3. Cố định chiều cao thanh điều hướng dọc Tạo một thanh điều hướng xác định chiều cao, cố định ở bên trái: 3. Đối tượng nâng cao trong Javascript HTML DOM (Document Object Model) là mô hình đối tượng chuẩn và gia diện lập trình cho tài liệu HTML. Với HTML DOM, Javascript có thể truy cập, thay đổi toàn bộ (bao gồm nội dung, thuộc tính) các element bên trong tài liệu HTML. 67
  68. 3.1. Xử lý trên HTML DOM 3.1.1. Tìm element 3.1.2. Cập nhật nội dung, thuộc tính Ví dụ 1: Ví dụ 2: 68
  69. 3.1.3. Thêm, xóa element Ví dụ: 3.1.4. Xử lý sự kiện của element Cách 1: Gán thuộc tính sự kiện cho hàm xử lý 69
  70. Cách 2: Gán thuộc tính sự kiện cho lệnh xử lý trong thẻ mở Cách 3: Dùng hàm addEventListener 3.2. JS Browser DOM 3.2.1. Window Đối tượng window được hỗ trợ trên tất cả trình duyệt, tham chiếu đến cửa sổ của trình duyệt. Đọc kích thước cửa số (không bao gồm thanh cuộn, công cụ) o window.innerHeight: chiều cao o window.innerWidth: chiều rộng Ví dụ: Mở cửa sổ mới: window.open() Đóng cửa sổ: window.close() Di chuyển cửa sổ: window.moveTo() Thay đổi kích thước cửa sổ: window.resizeTo() 3.2.2. Screen window.screen trả về đối tượng chứa thông tin về màn hình của người sử dụng. Chiều rộng của màn hình: screen.width 70
  71. Chiều cao của màn hình: screen.height Chiều rộng của màn hình (trừ đi vùng chứa tính năng của hệ điều hành: Windows Taskbar, ): screen.availWidth Chiều cao của màn hình (trừ đi vùng chứa tính năng của hệ điều hành: Windows Taskbar, ): screen.availHeight Ví dụ: 3.2.3. Location Đường dẫn URL của trang: window.location.href Trả về tên miền trỏ đến webserver của trang: window.location.hostname Trả về đường dẫn tương đối của trang trên webserver: window.locaiton.pathname Trả về giao thức đang truy cập trang: window.location.protocol Tải trang mới bằng assign: window.location.assign(URL) Ví dụ: 3.2.4. History window.history là đối tượng chứa lịch sử truy cập của trình duyệt. Nút Back: window.history.back() Nút Forward: window.history.forward() 71
  72. 3.2.5. Popup alert Thông báo: window.alert(“Nội dung thông báo”) Ví dụ: Hộp thoại cho người dùng chọn OK hoặc Cancel: window.confirm(“Thông báo”) Hộp thoại cho người dùng nhập giá trị: window.prompt(“Thông báo”, “Giá trị ban đầu) 3.2.6. Timing Đợi một khoảng thời gian sau đó thực hiện các lệnh trong hàm Ngừng trước khi thực hiện hàm trong setTimeout Lặp lại các lệnh trong hàm sao một khoảng thời gian CÂU HỎI, BÀI TẬP 72
  73. 6.1. Thiết kế trang web thay đổi màu nền ngẫu nhiên cho đoạn văn bản mỗi khi click chuột lên nút. 6.2. Thiết kế trang web tự động thêm đường kẻ ngang (màu ngẫu nhiên) mỗi khi click chuột lên nút. 6.3. Thiết kế trang web hiển thị danh sách HSSV (Mã HSSV, Họ lót, Tên, Giới tính, Năm sinh). Khi click chuột lên nút “Thêm” thì chèn dòng mới ở cuối bảng (có các input cho người dùng nhập thông tin). Sau khi nhập thông tin, người dùng click chuột lên nút “Ghi” thì hiển thị các thông tin đã nhập ngay trong dòng vừa mới chè (các input không còn). YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP Lập trình thay đổi nội dung, thuộc tính của element Lập trình thêm, xóa element 73
  74. BÀI 7: TẠO GIAO DIỆN CHUYÊN NGHIỆP BẰNG JQUERY Mã bài: 18.7 Giới thiệu: JQuery là thư viện Javascript, dễ học và sử dụng. Với JQuery, người thiết kế web có thể lập trình xử lý tương tác với trình duyệt dễ dàng hơn. Để học và sử dụng JQuery, chúng ta phải có kiến thức về HTML, CSS và Javascript. Mục tiêu: Biết công dụng của jQuery Thiết kế được giao diện trang web chuyên nghiệp với jQuery Cẩn thận, an toàn Nội dung chính: 1. Tổng quan về JQuery 1.1. Giới thiệu JQuery là thư viện Javascript nhỏ gọn “viết ít, làm nhiều”, giúp việc lập trình xử lý bằng Javascript trở nên đơn giản. Để lập trình cho những tác vụ phổ biến trên trang web bằng Javascript, đòi hỏi người thiết kế phải viết nhiều dòng lệnh. Với jQuery, công việc trở nên đơn giản chỉ với một hoặc vài dòng lệnh. JQuery cũng đơn giản hóa rất nhiều công việc phức tạp từ Javascript, như các lệnh tải dữ liệu AJAX, thao tác trên HTML DOM. Thư viện jQuery bao gồm các tính năng sau: Thao tác trên HTML DOM Thao tác trên CSS Phương thức xử lý sự kiện trên HTML AJAX Tiện ích 1.2. Cài đặt Tải jQuery mới nhất từ về thư mục Scripts trong site 1.3. Sử dụng Khai báo sử dụng thư viện jQuery bằng thẻ script 75
  75. Trong đó: x, y, z là phiên bản jQuery sử dụng 1.4. Các thành phần $: dấu báo lệnh sử dụng thư viện jQuery selector: truy vấn lọc/tìm element action: hành động trên element Ví dụ: 2. Chọn element 2.1. Cú pháp và cách chọn tương tự CSS Tất cả element : $(“p”) Element có thuộc tính id là “test”: $(“#test”) Tất cả element có thuộc tính class là “test”: $(“.test”) Tham khảo thêm tại: Ví dụ: 2.2. Chọn theo mối quan hệ phân cấp 76
  76. 2.3. Form selector 77
  77. 2.4. Chọn theo thuộc tính 3. Thay đổi nội dung, thuộc tính 3.1. Duyệt danh sách các element Cách 1: Cách 2: 78
  78. 3.2. Tạo element mới 3.3. Đọc, thay đổi nội dung trong element Đọc nội dung text Đọc nội dung html Thay đổi nội dung text Thay đổi nội dung html 3.4. Đọc, thay đổi thuộc tính Đọc giá trị thuộc tính Thay đổi giá trị thuộc tính 3.5. Chèn nội dung append: chèn nội dung vào cuối element prepend: chèn nội dung vào đầu element after: chèn nội dung vào sau element before: chèn nội dung vào trước element Ví dụ: 79
  79. 3.6. Làm việc với CSS Thêm/xóa giá trị của thuộc tính class o addClass: thêm một hoặc nhiều class o removeClass: xóa một hoặc nhiều class o toggleClass: lần lượt thêm/xóa class Ví dụ: Sử dụng phương thức css 3.7. Thay đổi kích thước Các phương thức thay đổi kích thước width() height() innerWidth() innerHeight() outerWidth() outerHeight() 80
  80. Hình 8.1. jQuery dimensions Ví dụ: 4. Xử lý sự kiện 4.1. Quy tắc chung Ví dụ 1: Ví dụ 2: 81
  81. 4.2. Xử lý một số sự kiện thường gặp ready: khi document được tải focus: khi control trong form nhận được con trỏ blur: khi control trong form không còn chiếm con trỏ keypress: nhấn phím trong khi control đang nhận con trỏ change 82
  82. click: khi click chuột mousehover: khi con trỏ chuột ở trên element mouseout: khi con trỏ chuột di chuyển ra khỏi element 4.3. Xử lý đối tượng Event Trong mục 5.2, chúng ta đã xây dựng hàm xử lý cho sự kiện mà không dùng đến tham số sự kiện. Hàm xử lý sự kiện đầy đủ phải có tham số sự kiện. Vị trí tương đối của con trỏ chuột (event.pageX, event.pageY) Loại của sự kiện (event.type) 83
  83. Cho biết phím (hoặc nút chuột) nào được nhấn (event.which) 5. Tạo hiệu ứng và hoạt ảnh 5.1. Ẩn, hiện Ẩn Hiện: tương tự như ẩn, thay hide bằng show Ẩn chuyển sang hiện, hiện chuyển sang ẩn (toggle) 84
  84. 5.2. Fade-in, Fade-out Hiện lên (fadeIn) Ẩn xuống (fadeOut): tương tự hiện lên, thay fadeIn bằng fadeOut Ẩn chuyển sang hiện, hiện chuyển sang ẩn (fadeToggle) 5.3. Sliding Cách dùng các tham số: speed, easing, callback tương tự như mục 5.1 và 5.2. 85
  85. 5.4. Tạo hoạt hình Cấu trúc tổng quát: Trong đó: speed, easing và callback là các tham số tùy chọn. Ví dụ: CÂU HỎI, BÀI TẬP 7.1. Thiết kế trang web thay đổi màu nền ngẫu nhiên cho đoạn văn bản mỗi khi click chuột lên nút. 7.2. Thiết kế trang web tự động thêm đường kẻ ngang (màu ngẫu nhiên) mỗi khi click chuột lên nút. 7.3. Thiết kế trang web hiển thị danh sách HSSV (Mã HSSV, Họ lót, Tên, Giới tính, Năm sinh). Khi click chuột lên nút “Thêm” thì chèn dòng mới ở cuối bảng (có các input cho người dùng nhập thông tin). Sau khi nhập thông tin, người dùng click chuột lên nút “Ghi” thì hiển thị các thông tin đã nhập ngay trong dòng vừa mới chè (các input không còn). YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP Dùng jQuery Lập trình thay đổi nội dung, thuộc tính của element Lập trình thêm, xóa element 86
  86. BÀI 8: PUBLISH WEBSITE Mã bài: 18.8 Giới thiệu: Là quá trình đưa website đã được thiết kế xong trên máy tính cục bộ của bạn lên môi trường mạng thực sự , tương tác với người dùng thực sự. Mục tiêu: Làm việc với các bước xuất bản website Quảng bá website Bảo trì website Nội dung chính: 1. Đăng ký web hosting miễn phí 1.1. Giới thiệu Xuất bản website được chia thành nhiều bước: Lựa chọn tên miền Lựa chọn web server Uploadn website Cập nhật và chỉnh sửa website Quảng bá website 1.2. Lựa chọn tên miền 2. Publish web lên web hosting miễn phí Bước 1: Đăng ký tài khoản Hostinger: 87
  87. Bước 2: Điền đầy đủ thông tin rồi bấm vào tạo tài khoản Bước 3: Vào Email để xác nhận tài khoản Truy cập vào đường dẫn trên, sau đó nhấp vào nút đăng kí trong bảng Free Ngay sau đó trong danh sách tài khoản sẽ xuất hiện tài khoản bạn vừa tạo Chú ý: thông thường phải mất ít nhất 3h để tên miền đó có thể truy cập. Để truy cập vào trang quản lý tài khoản hosting gắn với tên miền thì bạn nhìn sang bên phải tên miền ở trên, chọn ” Chuyển” Thông tin của website cũng như các thông số cài đặt 3. Publish lên web local IIS 88
  88. IIS – Inernet Infomation Service là một phần mở rộng của Microsoft, sử dụng trong Windows NT. IIS được dùng để triển khai các dịch vụ HTTP, HTTPS, FTP, FTTPS, SMTP và NNTP. Trong bài này chúng ta đi tìm hiểu các bước cơ bản để thiết lập một web server với IIS. Mặc định, IIS không được tích hợp sẵn, khi cần sử dụng, người dùng hoặc người quản trị phải cài đặt thêm thành phần này. IIS có thể được cài đặt trên Windows Server và các Windows Client như Windows 7, Windows 8, Windows 10 Các bước thực hiện: Bước 1: Mở Internet Information Services Manager Hình 8.1: Mở rộng menu dạng cây cho đến khi bạn thấy Default Web Site Bước 2: Ở bên phải của IIS Manager, hãy xem phần Browse Website. Nhấp vào Browse *:80 (http). Trang web mặc định sẽ mở trong trình duyệt web mặc định. 89
  89. Hình 8.2: Nhấp vào Browse *:80 (http) Sẽ thấy một trang web như sau. Lưu ý thanh địa chỉ có nội dung localhost. Đó là địa chỉ để nhập vào trang web mới. Hình 8.3: Địa chỉ để nhập vào trang web mới CÂU HỎI, BÀI TẬP 8.1. Kiểm tra và cài đặt IIS trên máy tính của mình. 8.2. Publish website lên IIS. 90
  90. TÀI LIỆU THAM KHẢO [1]. 91