Giáo trình thiết kế và lập trình WEB

Bài tập 1 : Thiết kế trang chủ bằng cách sử dụng table để tạo bố cục có các yêu cầu như sau :




Tìm biện pháp để trang web không bị “gãy chữ” khi cửa sổ trình duyệt bị “resize”
Dùng CSS để định dạng trang web một cách hài hòa, làm nổi bật chủ đề
Các tệp CS, JS để bên ngoài tệp HTML.
Nội dung Menu được xây dựng bằng hàm JavaScript
Trang web của liên kết “Giới thiệu”, “Cơ cấu tổ chức” được hiển thị ở ô bên phải (sử dụng phương pháp nhúng IFRAME )
Trang web của liên kết “Chương trình đào tạo” được mở ở một cửa sổ mới.


Bài tập 2 : Tương tự như bài trên, nhưng dùng FRAME / FRAMESET để tạo bố cục.

Bài tập 3 : Tương tự như bài trên, nhưng dùng DIV để tạo bố cục.






Bài tập 4 : Dùng JavaScript để thiết kế menu co giản được (collapsible/expendable) như trong các trang chủ của VNEXPRESS.NET, VIETNAMNET.VN,….

Ví dụ :

Ở trạng thái collapse





Ở trạng thái expend





Hướng dẫn :
Kết hợp các kỹ thuật dùng Table, CSS, Div, Span để tổ chức và trình bày menu
Sử dụng các bộ xử lý sự kiện (onMouseOver, onMouseOut, onClick), các thuộc tính của đối tượng trong DOM (objVar.style.property) để lập trình xử lý sự kiện bằng JavaScript

Chú ý :
objVar.style.display = “block” : đối tượng được hiển thị trong không gian đã cấp phát theo khai báo.
objVar.style.display = “none” : đối tượng không hiển thị và không gian đã khai báo bị thu hồi.

Trong đó objName là một biến đối tượng, được khai báo :

var objVar = document.getElementById(“objID”)
hay : var objVar = document.getElementByName(“objName”)














Bài tập 5 : Thiết kế trang web chứa form nhập liệu dành cho độc giả phản hồi ý kiến cho webmaster có nội dung, hình thức và các yêu cầu :




Dùng các phương thức của đối tượng RegExp hay String để kiểm tra hợp lệ dữ liệu trước khi người sử dụng gởi ý kiến :
Nội dung : tên người gởi, ý kiến không rỗng
Địa chỉ E-mail hợp lệ theo quy định ( /[email protected]/ )

Các tệp CSS và JS được sử dụng theo phương pháp liên kết
CSS :
JavaScript :

Nút Gởi bài : khi click sẽ kích họat :
Kiểm tra hợp lệ dữ liệu.
Nếu hợp lệ thì cho phép gởi đến server, tệp ASP có nhiệm vụ xử lý dữ liệu : receive.asp. Nếu không thì thiết lập focus ở textfield đầu tiên

Nút Thoát : có chức năng đóng trang web chứa form

Xây dựng CSDL và tệp ASP để có thể lưu trữ các thông tin đóng góp ý kiến của người sử dụng.

Thiết kế trang ASP có chức năng đọc các ý kiến đã lưu trữ.

Ghi chú : Câu 5, 6 sinh viên sẽ thực hiện sau khi học xong chương 7 : ASP và CSDL










Bài tập 6 : Thiết kế trang web cho phép người sử dụng tham quan một phòng triển lãm tranh với hình thức và yêu cầu như sau :
Trang web khi tải xong:




Khi người sử dụng click lên một hình nhỏ, sẽ hiển thị bức tranh tương ứng ở ô quy định ở dưới với kích thước vừa đủ xem.




Tham khảo : - Thiết kế web với JavaScript & Dom (Nguyễn Trường Sinh, nxb Phương Đông, 2005)
- Bài giảng của GV + Mã nguồn (xem trang sau)

Thay đổi phương pháp : không dùng Node, chỉ sử dụng thuộc tính scr của một đối tượng hình ảnh để hiển thị hình ảnh mới. (lập trình đơn giản hơn).



SOURCE CODE
Tệp HTML :

3 mức tiếp cận : Cấu trúc (HTML),