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)  Xoá Behaviors: − Chọn dòng Behaviors cần xoá 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 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, “-“ để xoá 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 InsertForm 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, 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 InsertForm objectsFile field h) BUTTON: − Chọn menu Insert Form objectButton − 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: − InsertImage 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 thoá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 [...]... danh sách các liên kết lại trên một dòng, khi cần chọ liên kết nào, người tham quan thả danh sách liên kết xuống, rồi chọn trong số đó Cách này giúp những trang web có quá nhiều liên kết có thể thu hẹp diện tích, tạo thông thoáng cho web hơn Đôi khi việc chọn liên kết này rất nhạy, nó sẽ nhảy nhanh đến các trang liên kết, để khắc phục, ta có thể chèn thêm nút GO kế bên Chọn liên kết trong danh sách... Menu Item trong Jump Menu để liên kết đi − File Preview in browser, hoặc F12 − Click vào dòng Menu Item, tên trang liên kết đến Sử dụng Behavior cho Textfield: Textfield là ô nhập liệu của người tham quan, nhưng 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 của textfield có thể giúp kiểm tra các trường hợp này Ví dụ: cần thiết kế form có các điều khiển text nhập... Nhập tên trang liên kết Kết quả sẽ xuất hiên trên Menu Items − Dấu “+” hoặc “–“ để thêm hoặc xoá một Menu Item − Mũi tên lên hoặc xuống để thay đổi trình tự các Menu Items − Menu itemws: danh sách các menu được nhập trong text − Open URL In: Target của khung chính hiển thị trang − Menu name: Tên của Jum Menu − Select Frist Item After URL Change: Chọn Item đầu tiên sau khi liên kết − Insert Go Button... form, khi 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 hiện Design Panel của Behaviors − Double click vào tên Action: Jump Menu −  Hộp thoại Jump menu xuất hiện cho phép hiệu chỉnh Kiểm tra liên kết của Jump Menu: Để kiểm tra liên kết của Jump Menu, ta cần xem trang trong trình duyệt,... các loại mật mã, khi nhập liệu từng ký tự nhập được thay bằng dấu “ * ” b) RADIO BUTTON : Trong 1 nhóm các nút chọn chỉ được chọn 1 tùy chọn Các nút radio thuộc cùng nhóm phải có cùng tên nhóm (Group), nhưng khác nhau về giá trị(value)  Cách tạo: − Đặt dấu nháy tại vị trí muốn chèn − Chọn insert Form radio Button  Thụôc tính của Radio button: − Checked value : Giá trị từng nút đơn trong nhóm − Initial... onMouseOut II FORM 1 TẠO FORM:  Chọn menu Insert/ Form   Đường khuôn viền không liền nét màu đỏ đại diện cho giới hạn trong form Mọi thành phần của form đều phải nằm trong khuôn viên này Trong form cần thiết phải có 2 nút đặc biệt “SUBMIT” và “RESET” CÁC ĐỐI TƯỢNG TRÊN FORM Có 2 cách để chèn các đối tượng vào form  Cách 1:Chọn tab form trên Insert Panel  Cách 2:Chọn menu Insert FormChọn đối tượng... mắc… của người duyệt web  Chọn menu InsertForm 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 bản tự xuống dòng − Init Value : Giá trị khởi tạo của ô g) FILE FIELD:Gửi kèm tập tin:Trong form, ngoài các thông tin ngắn gọn mà người tham quan có thể nhập trực tiếp, nếu họ muốn gởi ... 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... 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 thoáng... tích, tạo thông thoá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