Behaviors là các đoạn kịch bản (Scrip) được thiết kế sẳn bằng chương trình Dreamweaver, có chức năng giúp thêm các điều khiển, hàm kiểm tra trình duyệt; thêm hệ thống liên kết Popup_Menu, chèn âm thanh; kiểm tra form, làm phong phú hơn trang Web của bạn;... Chương này sẽ hướng dẫn cách sử dụng behaviors và form. Mời các bạn cùng tham khảo để biết thêm chi tiết.
CHƯƠNG XII BEHAVIORS - FORM I BEHAVIORS Tổng quan Behaviors Behaviors đoạn kịch (Scrip) thiết kế sẳn chương trình Dreamweaver, có chức năng: – Giúp thêm điều khiển, hàm kiểm tra trình duyệt – Thêm hệ thống liên kết Popup_Menu, chèn âm – Kiểm tra form, làm phong phú trang Web bạn – Mỗi Behaviors gồm yếu tố: Đối tượng chứa Behaviors: đa dạng, trang, form, ảnh, nút, dịng text,… đối tượng phải phù hợp với biến cố hành động Biến cố (Event) xảy tra đối tượng, kiện xãy đối tượng chọn, có nhiều loại biến cố, biến cố khác đối tượng khác trang Web Hành động kèm với biến cố (action): Là đoạn mã lệnh thực nhiệm vụ cho đối tượng Hành động gọi có biến cố tương ứng, điều nói lên mối quan hệ chặt chẽ đối tượng, biến cố hành động – – Một đối tượng trang thường kèm với Behaviors, có trường hợp đối tượng có nhiều biến cố, tuỳ thuộc vào trình tự Behaviors mà chương trình kiểm tra biến cố Nếu đối tượng có nhiều Behaviors mà Behaviors lại có loại biến cố (nhưng khác hành động) biến cố xãy ra, hành động thực Behaviors Panel Mở Behaviors Panel: – Chọn Window Behaviors Xuất Behaviors Panel – Chọn đối tượng gắn Behaviors – Tuỳ thuộc vào việc chọn đối tượng khác mà Behaviors tự chọn loại biếncố phù hợp cho phép thực số hành động tương ứng đối tượng – Đối tượng chọn hiển thị Behaviors Panel dạng Actions, tên thẻ HTML kế bên từ Actions Thêm, xoá Behaviors Thêm Behaviors: − Click nút (+) chọn hành động danh sách − Một biến cố tương ứng xuất (có thể hiệu chỉnh lại) Xố Behaviors: − Chọn dịng Behaviors cần xố danh sách − Click nút (-) Thay đổi trình tự Behaviors Tuỳ thuộc vào trình tự Behaviors mà hành động theo trình tự thực Có hành động ngang cấp khơng cần trình tự Các Behaviors khác biến cố Ví dụ: ảnh có biến cố khác onMouseOut OnMouseOver, khơng cần quan tâm đến trình tự Các Behaviors có biến cố: Trong trường hợp này, phải xếp trình tự có kết mong muốn Cách xếp: Chọn Behaviors cần xếp − Click nút để xếp Thay đổi biến cố: Khi hành động chọn biến cố tương ứng gán cho Behavior Khi biến cố khôngphù hợp, ta thay đổi biến cố khác cách: – Chọn dòng Behaviors chứa biến cố cần thay đổi, – Click chuột vào mũi tên dòng Behaviors − Tên ý nghĩa biến cố • OnAbort: Khi ngưng tải ảnh • OnAfterUpdate: Khi trang thực xong việc cập nhật nguồn liệu • OnBeforeUpdate: trước trang thực cập nhật nguồn liệu • OnBlur: đối tựơng chọn khơng cịn trạng thái hành • OnBounce: Khi nội dung Marquee đến biên Marquee • OnChange: Khi có thay đổi Textfield hay List/menu form d) CHECKBOX: Tạo nhóm tùy chọn, cho phép chọn nhiều tùy chọn lúc không chọn Cách tạo: − Chọn Insert Form Objects Checkbox − Hoặc click nút Checkbox công cụ e) LIST/ MENU (Dropdown menu) Chọn menu Insert/ Form object/ List/ Menu Trong properties : − Mục Type: • Menu : Dropdown menu • List: Listbox − Click nút List Values: Nhập nhãn giá trị cho List/Menu • “+” để thêm mục, “-“ để xố mục chọn f) TEXTAREA: TextArea dùng nhập thông tin, liệu dài gồm nhiều dòng, thường dùng cho ghi chú, ý kiến, cảm nghĩ, thắc mắc… người duyệt web Chọn menu InsertForm object Textarea TextArea Properties: − Text field : tên ô nhập liệu nhiều dòng − Char Width : Số ký tự cho chiều dài − Num lines : Số dịng cần hiển thị − Wrap : Văn tự xuống dòng − Init Value : Giá trị khởi tạo ô g) FILE FIELD:Gửi kèm tập tin:Trong form, ngồi thơng tin ngắn gọn mà người tham quan nhập trực tiếp, họ muốn gởi đoạn văn nhiều dịng, hay hình ảnh minh họa ta nên chèn thêm file field.Đây thành phần form giúp gửi kèm tập tin theo thông tin nhập Chọn menu InsertForm objectsFile field h) BUTTON: − Chọn menu Insert Form objectButton − Các thuộc tính Button: • Button name tên button • Value: Gán nhãn button • Action: Submit form.: nút submit Reset form: nút reset None: button người sử dụng gán action người sử sụng tự tạo i) IMAGE FIELD: − InsertImage field − Hoặc click nút Image field công cụ Image field properties: − ImageField: “Submit” chọn ảnh làm nút submit “Reset” chọn ảnh làm nút reset j) JUM MENU : Chức năng: Công cụ xếp gọn danh sách liên kết lại dòng, cần chọ liên kết nào, người tham quan thả danh sách liên kết xuống, chọn số Cách giúp trang web có nhiều liên kết thu hẹp diện tích, tạo thơng thống cho web Đôi việc chọn liên kết nhạy, nhảy nhanh đến trang liên kết, để khắc phục, ta chèn thêm nút GO kế bên Chọn liên kết danh sách xong phải nhấn nút GO để xác nhận Cách tạo: Chọn thực đơn Insert Form Objects Jump Menu Hộp thoại insert Jump Menu − Text: Đặt nhãn cho jum menu − When selected, Go To URL : Nhập tên trang liên kết Kết xuất hiên Menu Items − Dấu “+” “–“ để thêm xoá Menu Item − Mũi tên lên xuống để thay đổi trình tự Menu Items − Menu itemws: danh sách menu nhập text − Open URL In: Target khung hiển thị trang − Menu name: Tên Jum Menu − Select Frist Item After URL Change: Chọn Item sau liên kết − Insert Go Button After Menu: chèn thêm nút GO Hiệu chỉnh Jump Menu: Khác với thành phần khác form, cần hiệu chỉnh tên Menu Item, hay liên kết tương ứng, ta không xem Properties Inspector mà phải mở Behaviors − Chọn Jump Menu − Chọn menu Window Behaviors xuất Design Panel Behaviors − Double click vào tên Action: Jump Menu − Hộp thoại Jump menu xuất cho phép hiệu chỉnh Kiểm tra liên kết Jump Menu: Để kiểm tra liên kết Jump Menu, ta cần xem trang trình duyệt, ấn vào tên Menu Item Jump Menu để liên kết − File Preview in browser, F12 − Click vào dòng Menu Item, tên trang liên kết đến Sử dụng Behavior cho Textfield: Textfield ô nhập liệu người tham quan, có trường hợp họ khơng nhập liệu cho ô, hoăc nhập giá trị không phù hợp, behavior textfield giúp kiểm tra trường hợp Ví dụ: cần thiết kế form có điều khiển text nhập E-mail số CMND, với yêu cầu E-mail phải có ký tự @, số CMND phải số − − − − Chọn nút Submit, Reset làm đối tượng kiểm tra Trong Behavior Panel, click dấu (+) Chọn chức Validate Form Hộp thoại validate form chứa thông tin giúp điều khiển Text field form Name field: danh sách tất text field có form Nếu muốn đặt điều kiện cho text chọn cho hành − − − − − Value requied: yêu cầu ô text phải nhập liệu, khơng báo lỗi Anything: liệu loại Email address: liệu phải có ký tự @ Number: liệu dạng số Number from…to : liệu số khoảng xác định ... kết lại dòng, cần chọ liên kết nào, người tham quan thả danh sách liên kết xuống, chọn số Cách giúp trang web có nhiều liên kết thu hẹp diện tích, tạo thơng thống cho web Đôi việc chọn liên kết... Behaviors Behaviors đoạn kịch (Scrip) thiết kế sẳn chương trình Dreamweaver, có chức năng: – Giúp thêm điều khiển, hàm kiểm tra trình duyệt – Thêm hệ thống liên kết Popup_Menu, chèn âm – Kiểm tra... hiệu chỉnh Kiểm tra liên kết Jump Menu: Để kiểm tra liên kết Jump Menu, ta cần xem trang trình duyệt, ấn vào tên Menu Item Jump Menu để liên kết − File Preview in browser, F12 − Click vào dòng Menu