Giáo trình Thiết kế web (Nghề Công nghệ thông tin)

ỦY BAN NHÂN DÂN TỈNH BR – VT TRƯỜNG CAO ĐẲNG NGHỀ GIÁO TRÌNH MƠ ĐUN THIẾT KẾ WEB NGHỀ CƠNG NGHỆ THƠNG TIN TRÌNH ĐỘ TRUNG CẤP, CAO ĐẲNG Ban hành kèm theo Quyết định số: ……., ngày tháng năm Hiệu trưởng trường Cao đẳng nghề tỉnh Bà Rịa – Vũng Tàu Bà Rịa – Vũng Tàu TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Giáo trình “Thiết kế web” biên soạn với mục tiêu cung cấp cho người học kiến thức kỹ cần thiết để thiết kế trang web Tác giả nghiên cứu số tài liệu, công nghệ đạ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ội dung tác giả trình bày động, dễ hiểu kèm theo bước hướng dẫn thực hành chi tiết giúp cho người học dễ tiếp thu kiến thức cần thiết hình thành kỹ nghề Trong q trình biên soạn, chắn giáo trình cịn nhiều thiếu sót Tác giả mong nhận ý kiến đóng góp q thầy/cơ em sinh viên để tiếp tục hoàn thiện Xin chân thành cảm ơn quý đồng nghiệp, bạn bè có ý kiến đóng góp q trình xây dựng giáo trình Bà Rịa – Vũng Tàu, ngày …… tháng …… năm Tham gia biên soạn Phan Hữu Phước – Chủ biên MỤC LỤC MỤC LỤC BÀI MÔI TRƯỜNG TẠO TRANG WEB TĨNH DREAMWEAVER Giới thiệu .9 1.1 Khởi động .9 1.2 Quản lý palette .10 Quản lý site 10 2.1 Tạo site .10 2.2 Xóa site .11 Quản lý nội dung site 11 3.1 Cấu trúc site 11 3.2 Các loại tập tin site 12 3.3 Quản lý thư mục, tập tin .12 Chọn vùng nhìn làm việc 12 BÀI TẠO TRANG WEB BẰNG HTML 13 Tìm hiểu cấu trúc tài liệu HTML 13 Tìm hiểu cấu trúc chung thẻ HTML .14 Thiết kế trang web thẻ HTML 14 3.1 META, LINK, STYLE, SCRIPT .14 3.2 TABLE, TR, TD, TH 14 3.3 DIV, P, BR, HR 15 3.4 IMG, A 16 3.5 OL, UL, LI 17 3.6 FORM, INPUT, SELECT, OPTION 17 BÀI TẠO TRANG WEB BẰNG HTML5 19 Sử dụng thẻ ngữ nghĩa 19 Sử dụng thẻ HTML5 FORM 20 BÀI HOÀN CHỈNH GIAO DIỆN TRANG WEB VỚI CSS 23 Giới thiệu CSS loại CSS 23 1.1 Giới thiệu 23 1.2 External 23 1.3 Internal 23 1.4 Thuộc tính style 24 Tạo sử dụng CSS 24 Tạo định dạng chung cho trang web 25 BÀI TÙY BIẾN GIAO DIỆN WEB VỚI CSS3 27 Rounded Corners 27 Border Images .28 Backgrounds 29 Colors 31 Gradients .33 Shadows 34 Text 36 Fonts 38 2D Transforms .38 10 3D Transforms .40 11 Transitions 42 12 Animations 43 13 Box Sizing 43 BÀI XỬ LÝ TƯƠNG TÁC VỚI JAVASCRIPT 45 Tổng quan Javascript 45 1.1 Các cách nhúng Javascript vào trang web 45 1.2 Kiểu liệu, khai báo biến 45 1.3 Các toán tử 47 Sử dụng cấu trúc điều khiển 50 2.1 if, if … else …, switch .50 2.2 for, while, break, continue 51 Sử dụng hàm mảng 52 3.1 Mảng 52 3.2 Một số hàm toán học 53 3.3 Dữ liệu Date .54 3.4 Xây dựng hàm 56 BÀI XỬ LÝ NÂNG CAO VỚI CÁC ĐỐI TƯỢNG TRONG JAVASCRIPT58 Xử lý HTML DOM 58 1.1 Tìm element 58 1.2 Cập nhật nội dung, thuộc tính 58 1.3 Thêm, xóa element .60 1.4 Xử lý kiện elemen 61 JS Browser DOM 61 2.1 Window 61 2.2 Screen 62 2.3 Location 62 2.4 History 63 2.5 Popup alert 63 2.6 Timing 63 BÀI TẠO GIAO DIỆN CHUYÊN NGHIỆP BẰNG JQUERY 65 Tổng quan jQuery 65 1.1 Giới thiệu 65 1.2 Cài đặt 65 1.3 Sử dụng .66 1.4 Các thành phần 66 Chọn element .66 2.1 Cú pháp cách chọn tương tự CSS 66 2.2 Chọn theo mối quan hệ phân cấp .67 2.3 Form selector 68 2.4 Chọn theo thuộc tính 68 Thay đổi nội dung, thuộc tính .68 3.1 Duyệt danh sách element .68 3.2 Tạo element 69 3.3 Đọc, thay đổi nội dung element 69 3.4 Đọc, thay đổi thuộc tính .70 3.5 Chèn nội dung 70 3.6 Làm việc với CSS .70 3.7 Thay đổi kích thước 71 Xử lý kiện .72 5.1 Quy tắc chung .72 5.2 Xử lý số kiện thường gặp .72 5.3 Xử lý đối tượng Event 74 Tạo hiệu ứng hoạt ảnh 74 5.1 Ẩn, 74 5.2 Fade-in, Fade-out 75 5.3 Sliding 76 5.4 Tạo hoạt hình 76 TÀI LIỆU THAM KHẢO 78 MÔ ĐUN THIẾT KẾ WEB Vị trí, tính chất, ý nghĩa vai trị mô đun:  Được giảng dạy sau học xong Đồ họa ứng dụng  Môn học chuyên ngành, cung cấp kiến thức kỹ công việc quy trình xây dựng ứng dụng web Mục tiêu mô đun:  Biết kiến thức kỹ để thực website tĩnh  Biết kiến thức tảng vững lập trình Web HTML đến HTML5, từ CSS đến CSS3 từ Javascript đến jQuery để nhúng xử lý vào trang HTML, lập trình Web mức client-side  Biết kiến thức tảng thiết kế website tĩnh để tự tin tham gia mô đun xây dựng web động PHP, Asp.Net  Sử dụng thành thạo tag HTML để xây dựng trang Web  Nhúng xử lý Javascript, jQuery trực tiếp vào trang HTML làm cho trang Web ấn tượng, sinh động  Truy cập thiết lập thuộc tính đối tượng mơ hình đối tượng trang HTML, làm chủ đối tượng điều khiển trang Web theo ý muốn  Xây dựng layout cho Website  Xây dựng website tĩnh với giao diện chuyên nghiệp, có xử lý hình ảnh sống động trang web  Thực thực hành đảm bảo trình tự, an tồn Nội dung mơ đun: T T Tên mô đun Môi trường tạo trang web tĩnh DreamWeaver Tạo trang web HTML Tạo trang web HTML5 Kiểm tra  Hoàn chỉnh giao diện trang web với CSS Tùy biến giao diện web với CSS3 Kiểm tra  Xử lý tương tác với Javascript Xử lý nâng cao với đối tượng Javascript Tạo giao diện chuyên nghiệp jQuery Thời Hình thức gian 15 13 15 14 14 13 20 giảng dạy Tích hợp Tích hợp Tích hợp Thực hành Tích hợp Tích hợp Thực hành Tích hợp Tích hợp Tích hợp 7.1 Thiết kế trang web thay đổi màu ngẫu nhiên cho đoạn văn 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) 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” chèn dịng cuối bảng (có input cho người dùng nhập thơng tin) Sau nhập thông tin, người dùng click chuột lên nút “Ghi” hiển thị thơng tin nhập dịng vừa 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 element Lập trình thêm, xóa element 64 BÀI TẠO GIAO DIỆN CHUYÊN NGHIỆP BẰNG JQUERY Giới thiệu: jQuery thư viện Javascript, dễ học sử dụng Với jQuery, người thiết kế web lập trình xử lý tương tác với trình duyệt dễ dàng Để học sử dụng jQuery, phải có kiến thức HTML, CSS Javascript Mục tiêu:  Biết công dụng jQuery  Thiết kế giao diện trang web chuyên nghiệp với jQuery  Cẩn thận, an toàn Nội dung: Tổng quan jQuery 1.1 Giới thiệu jQuery thư viện Javascript nhỏ gọn “viết ít, làm nhiều”, giúp việc lập trình xử lý Javascript trở nên đơn giản Để lập trình cho tác vụ phổ biến trang web 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 với vài dịng lệnh jQuery đơn giản hóa nhiều cơng việc phức tạp từ Javascript, lệnh tải liệu AJAX, thao tác HTML DOM Thư viện jQuery bao gồm tính sau:      Thao tác HTML DOM Thao tác CSS Phương thức xử lý kiện HTML AJAX Tiện ích 1.2 Cài đặt Tải jQuery từ http://jquery.com/download/ thư mục Scripts site 65 1.3 Sử dụng Khai báo sử dụng thư viện jQuery thẻ script Trong đó: x, y, z phiê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 element Ví dụ: 24 Chọn element 2.1 Cú pháp cách chọn tương tự CSS Tất element

: $(“p”) Element có thuộc tính id “test”: $(“#test”) Tất element có thuộc tính class “test”: $(“.test”) Tham khảo thêm tại: http://www.w3schools.com/jquery/jquery_ref_selectors.asp Ví dụ: 66 2.2 Chọn theo mối quan hệ phân cấp 67 2.3 Form selector 2.4 Chọn theo thuộc tính 25 Thay đổi nội dung, thuộc tính 3.1 Duyệt danh sách element Cách 1: 68 Cách 2: 3.2 Tạo element 3.3 Đọc, thay đổi nội dung element  Đọc nội dung text  Đọc nội dung html  Thay đổi nội dung text  Thay đổi nội dung html 69 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ụ: 3.6 Làm việc với CSS  Thêm/xóa giá trị thuộc tính class o addClass: thêm nhiều class o removeClass: xóa nhiều class o toggleClass: thêm/xóa class Ví dụ:  Sử dụng phương thức css 70 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() Hình 8.1 jQuery dimensions Ví dụ: 71 26 Xử lý kiện 5.1 Quy tắc chung Ví dụ 1: Ví dụ 2: 5.2 Xử lý số kiện thường gặp  ready: document tải  focus: control form nhận trỏ  blur: control form khơng cịn chiếm trỏ 72  keypress: nhấn phím control nhận trỏ  change  click: click chuột  mousehover: trỏ chuột element  mouseout: trỏ chuột di chuyển khỏi element 73 5.3 Xử lý đối tượng Event Trong mục 5.2, xây dựng hàm xử lý cho kiện mà không dùng đến tham số kiện Hàm xử lý kiện đầy đủ phải có tham số kiện  Vị trí tương đối trỏ chuột (event.pageX, event.pageY)  Loại kiện (event.type)  Cho biết phím (hoặc nút chuột) nhấn (event.which) 27 Tạo hiệu ứng hoạt ảnh 5.1 Ẩn,  Ẩn 74  Hiện: tương tự ẩn, thay hide show  Ẩn chuyển sang hiện, chuyển sang ẩn (toggle) 5.2 Fade-in, Fade-out  Hiện lên (fadeIn) 75  Ẩn xuống (fadeOut): tương tự lên, thay fadeIn fadeOut  Ẩn chuyển sang hiện, chuyển sang ẩn (fadeToggle) 5.3 Sliding Cách dùng tham số: speed, easing, callback tương tự mục 5.1 5.2 5.4 Tạo hoạt hình Cấu trúc tổng quát: Trong đó: speed, easing callback tham số tùy chọn Ví dụ: CÂU HỎI, BÀI TẬP 76 8.1 Thiết kế trang web thay đổi màu ngẫu nhiên cho đoạn văn click chuột lên nút 8.2 Thiết kế trang web tự động thêm đường kẻ ngang (màu ngẫu nhiên) click chuột lên nút 8.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” chèn dịng cuối bảng (có input cho người dùng nhập thơng tin) Sau nhập thông tin, người dùng click chuột lên nút “Ghi” hiển thị thơng tin nhập dịng vừa 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 element Lập trình thêm, xóa element 77 TÀI LIỆU THAM KHẢO [1] http://w3schools.com 78 ... LỜI GIỚI THIỆU Giáo trình ? ?Thiết kế web? ?? biên soạn với mục tiêu cung cấp cho người học kiến thức kỹ cần thiết để thiết kế trang web Tác giả nghiên cứu số tài liệu, công nghệ đại kết hợp với kinh... văn Một trang web hiển thị trình duyệt tài liệu HTML Do đó, dù người thiết kế hay lập trình web, địi hỏi phải có kiến thức HTML Mục tiêu:  Biết công dụng tag HTML  Thiết kế trang web HTML  Cẩn... chung cho trang web CÂU HỎI, BÀI TẬP 4.1 Thiết kế trang chủ website http://brtvc.edu.vn 4.2 Thiết kế trang chủ website http://thuvien.brtvc.edu.vn YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP Sử