(NB) Mục tiêu của Giáo trình Thiết kế web là Biết các kiến thức và kỹ năng để có thể thực hiện các website tĩnh. Biết những kiến thức nền tảng vững chắc về lập trình Web bắt đầu từ HTML đến HTML5, từ CSS đến CSS3 và từ Javascript đến jQuery để có thể nhúng các xử lý vào các trang HTML, lập trình Web ở mức clientside. Biết những kiến thức nền tảng về thiết kế 1 website tĩnh để tự tin tham gia các mô đun về xây dựng web động như PHP, Asp.Net.
Ủ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ố: 01/QĐ-CĐN, ngày 04 tháng 01 năm 2016 của 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, năm 2016 TUYÊN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình 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 LỜI GIỚI THIỆU Giáo trình “Thiết kế web” được biên soạn với mục tiêu cung cấp cho người học các kiến thức và kỹ năng cần thiết để thiết kế trang web 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 giúp cho người học dễ tiếp thu các kiến thức cần thiết và hình thành được kỹ năng nghề 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 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 xây dựng giáo trình này Bà Rịa – Vũng Tàu, ngày …… tháng …… năm 2016 Tham gia biên soạn 1 Phan Hữu Phước – Chủ biên MỤC LỤC 7 MÔ ĐUN THIẾT KẾ WEB Vị trí, tính chất, ý nghĩa và vai trò của mô đun: − Được giảng dạy sau khi học xong Đồ họa ứng dụng − Môn học chuyên ngành, 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 Mục tiêu của mô đun: − Biết các kiến thức và kỹ năng để có thể thực hiện các website tĩnh − Biết những kiến thức nền tảng vững chắc về lập trình Web bắt đầu từ HTML đến HTML5, từ CSS đến CSS3 và từ Javascript đến jQuery để có thể nhúng các xử lý vào các trang HTML, lập trình Web ở mức clientside − Biết những kiến thức nền tảng về thiết kế 1 website tĩnh để tự tin tham gia các mô đun về xây dựng web động như PHP, Asp.Net − Sử dụng thành thạo các tag HTML để xây dựng trang Web − Nhúng xử lý Javascript, jQuery trực tiếp vào các trang HTML làm cho trang Web ấn tượng, sinh động hơn − Truy cập và thiết lập thuộc tính các đối tượng trong mô hình đối tượng của trang HTML, làm chủ các đối tượng và điều khiển trang Web theo ý muốn − Xây dựng layout cho Website − Xây dựng được một website tĩnh với giao diện chuyên nghiệp, có các xử lý và các hình ảnh sống động trên trang web − Thực hiện các bài thực hành đảm bảo đúng trình tự, an toàn Nội dung của mô đun: T T 1 2 3 4 5 6 Tên các bài trong mô đun Môi trường tạo trang web tĩnh DreamWeaver Tạo trang web bằng HTML Tạo trang web bằng HTML5 Kiểm tra bài 1 3 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 bài 4 5 Xử lý tương tác với Javascript Thời Hình thức gian 5 15 13 2 15 14 2 14 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 8 7 8 9 Xử lý nâng cao với các đối tượng trong Javascript Tạo giao diện chuyên nghiệp bằng jQuery Kiểm tra Publish website Tổng cộng 13 20 2 5 120 Tích hợp Tích hợp Thực hành Tích hợp 9 10 2.3 Form selector 2.4 Chọn theo thuộc tính Thay đổi nội dung, thuộc tính 3.1 Duyệt danh sách các element Cách 1: 70 Cách 2: 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 71 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ị 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 72 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ụ: 73 Xử lý sự kiện 5.1 Quy tắc chung Ví dụ 1: Ví dụ 2: 5.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ỏ 74 − keypress: nhấn phím trong khi control đang nhận con trỏ − change − 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 75 5.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) − Cho biết phím (hoặc nút chuột) nào được nhấn (event.which) Tạo hiệu ứng và hoạt ảnh 5.1 Ẩn, hiện − Ẩn 76 − 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) 5.2 Fade-in, Fade-out − Hiện lên (fadeIn) 77 − Ẩ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 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 78 8.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 8.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 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” 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 79 TÀI LIỆU THAM KHẢO [1] http://w3schools.com 80 ... 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... ý 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 2016 Tham gia biên soạn Phan Hữu Phước – Chủ biên MỤC LỤC MÔ ĐUN THIẾT KẾ WEB Vị trí, tính chất, ý nghĩa vai