SỰ KIỆN Ý NGHĨA

Một phần của tài liệu BÀI BÁO CÁO-GIÁO TRÌNH THIẾT KẾ WEB (Trang 104)

I have an airplane:

1. Giới thiệu

SỰ KIỆN Ý NGHĨA

Complete

OnReset Khi trả form về các giá trị khởi tạo

OnResize Khi thay đổi kích thước cửa sổ, khung

OnRowEnter Khi nguồn dữ liệu có thêm dòng mới

OnRowExit Khi dòng dữ liệu đã tồn tại

OnScroll Khi cuộn thanh cuộn

OnSelect Khi chọn text, menu item của List/Menu

OnStart Nội dung marquee bắt đầu một vòng

OnSubmit Khi gửi nội dung của form

OnUnload Khi rời khỏi trang

4. Show and Hide layer behavior

Một trong những behavior quen thuộc và thú vị nhất là Show and Hide layers. Hiể nhiên là nếu chúng là muốn áp dụng behavior này, trang web của chúng ta phải có layer.

Chúng ta hãy thiết kế một trang web nhỏ như sau:

Ở bên trái trang web chúng ta có một đối tượng image. Phía bên phải là một layer được đặt tên là textLayer. Nội dung trên layer được nhập vào từ bàn phím.

Đặt thuộc tính Vis của layer là hidden.

Hãy chọn hình và click vào nút . Chọn action Show-Hide layers. Xuất hiện cửa sổ sau:

Sau khi chọn action, chúng ta phải chỉ định layer nào sẽ được hiển thị hay che đi. Hãy chọn layer “textLayer’ và click nút Show. Ấn OK.

Chúng ta hãy cũng trở lại Behaviors panel.

Hãy click vào combo box bên trái action vừa tạo. Chọn mục onMouseOver.

Như vậy, behavior này sẽ làm cho textLayer hiện ra khi trỏ chuột lên hình.

Thực hiện tương tự, nhưng hãy tạo một action có tác dộng Hide textLayer khi con trỏ chuột ra khỏi hình.

Lúc này trên Behaviors panel sẽ có hai action như sau:

5. Sử dụng JavaScript

Một behavior có thể áp dụng lên bất kỳ đối tượng nào là Call JavaScript. Behavior này cho phép chèn code JavaScript vào trong trang web.

Ví dụ, có thể làm cửa sổ trình duyệt đóng lại khi click lên một đối tượng. để làm điều này ta cần chèn vào một dòng lệnh JavaScript như sau:

window.close();

Giống như với ví dụ về layer, chúng ta cũng phải chọn đối tượng sẽ áp dụng behavior. Sau đó, gọi action Call JavaScript thông qua nút .

Một cửa sổ sẽ hiện ra và chúng ta sẽ gõ code JavaScript vào.

Khi behavior đã được chèn vào Behavior panel, chúng ta cần phải chỉ định sự kiện onclick để chạy đoạn JavaScript trên khi click vào đối tượng.

Chúng ta có thể nhắp đúp vào action để sửa code nếu muốn.

XIV. Các tính năng khác 1. Marquee

Marquee là văn bản, hình ảnh, siêu liên kết…, hoặc là kết hợp của những đối tượng như vậy. Điểm đặc biệt ở đây là chúng có thể di chuyển trong trang web theo một đường thẳng.

Marquee không thể được chèn vào Dreamweaver bằng trình soạn thảo trực quan ở chế độ Design view, ta phải chè vào bằng code.

Để tạo một marquee, ta thêm vào code HTML của trang web cặp thẻ <MARQUEE> và </MARQUEE>. Giữa hai thẻ này, chèn vào đối tượng chúng ta muốn cuộn trong marquee.

Ví dụ, đoạn code <marquee>ABC</marquee> sẽ cho phép đoạn text “ABC” chạy ngang trang web.

Chúng ta cũng có thể chỉ định một số thuộc tính của marquee. Marquee sẽ di chuyển từ phải sang trái theo mặc định, nhưng chúng ta có thể thay đổi thuộc tính này theo cách chúng ta muốn.

Chẳng hạn, nếu chúng ta viết <marquee behavior="slide">, marquee sẽ chỉ chạy một lần và dừng lại.

Nếu chúng ta viết <marquee behavior="alternate">, thay vì di chuyển liên lục nối đuôi nhau, marquee sẽ chạy từ bên này sang bên kia cửa sổ, và khi gặp cạnh cửa sổ, nó sẽ quay ngược trở lại.

Đoạn code sau đây sẽ cuộn một dòng chữ và một đối tượng hình ảnh phía sau nó theo dạng alternate:

<marquee behavior="alternate"> Welcome to Dogs and Cats

<img src="images/logo_animales.gif"> </marquee>

2. Thiết lập ngày tháng

Dreamweaver cho phép chúng ta chèn ngày chỉnh sửa các trang vào trang web rất dễ dàng. Người xem trang web sẽ biết lần cuối dữ liệu của trang được cập nhậ là khi nào.

Để thêm vào trang, vào menu Insert > Date.

Trong cửa sổ mới hiện ra ta có thể chọn định dạng ngày tháng, và tùy chọn cho phép Dreaweaver tự động cập nhật khi file được sửa chữa và lưu lại.

3. Đường kẻ ngang (Horizontal Rule)

Đường kẻ ngang là đối tượng được dùng để tách biệt các phần khác nhau trên trang web.

Để chèn đường kẻ ngang vào trang, vào menu Insert > HTML > Horizontal rule.

Properties inspector của đường kẻ ngang có dạng như sau:

Chúng ta có thể thay đổi bề ngoài của đường kẻ ngang thông qua các thuộc tính liệt kê ở đây.

4. Chèn code từ bên ngoài

Đôi khi chúng ta muốn đưa vào trang vài thứ chúng ta thấy đâu đó trên Internet.

Chúng ta có thể nhìn thấy Source code (mã nguồn) của những trang web này bằng cách vào menu View trên Mozilla Firefox, sau đó chọn mục Page Source. Thao tác trên các trình duyệt khác cũng tương tự như vậy, tuy có thể có đôi chút khác biệt. bằng cách này chúng ta có thể tìm đoạn code được sử dụng để xây dựng trang, từ đó sử dụng cho trang của mình.

Xem code của trang là phương pháp hữu ích để xem cấu trúc của trang, cách sử dụng behavior và những thủ tục JavaScript khác.

Chẳng hạn, chúng ta tìm được một đoạn code giúp thay đổi nội dung của thanh trạng thái của cửa sổ trình duyệt như sau:

<SCRIPT language=JavaScript> <!--

strcnt=0;

mensaje=" Chao mung cac ban den voi trang web nghe nhac cua toi "; function scroller() { window.status=mensaje.substring(strcnt++,mensaje.length+1); if(strcnt>mensaje.length) strcnt=0; setTimeout("scroller()",200); } //--> </SCRIPT>

Đoạn code này phải được đặt nằm trong cặp thẻ <HEAD></HEAD>, và ta cũng cần phải thêm onload="scroller()" vào phía trong thẻ <BODY> , kết quả sẽ là:

<BODY onload="scroller()">

Đoạn code này không quá phức tạp, và chúng ta có thể dễ dàng thêm nó vào trang của mình mà không gặp vấn đề gì. Dĩ nhiên chúng ta cần sửa lại thông điệp sẽ hiện ở status bar.

Sẽ có nhiều đoạn code khó hiểu hơn rất nhiều, và sẽ càng khó hiểu hơn nữa nếu chúng ta chưa học qua JavaScript hay một ngôn ngữ lập trình nào khác.

Nếu không hiểu code, chúng ta có thể chép đoạn JavaScript bị sai hoặc thiếu. Việc chèn những đoạn code như vậy vào file HTML sẽ tạo ra lỗi trên trang.

5. Độ phân giải của trang web

Khi thiết kế web site, phải luôn nhớ rằng web site đó sẽ được xem bới rất nhiều người dùng khác nhau với màn hình có kích cỡ, độ sâu màu, độ phân giải khác nhau.

Không thể làm cho web site nhìn giống hệt nhau trên các màn hình khác nhau, nhưng chúng ta cần làn cho chúng càng giống nhau càng tốt.

Độ phân giải thông thường là 800x600, chúng ta nên thiết kế website theo độ phân giải này. Điều này có nghĩa là chúng ta cần tạo ra một web site trên một màn hình có độ phân giải này để nhìn thấy thực tế trang web do mình thiết kế sẽ như thế nào trên trình duyệt, và để có thể truyền đi trang web tốt nhất có thể có.

Table thường được dùng vì chúng rất hữu ích trong việc phân bố nội dung của trang.

Như chúng ta đã biết, kích cỡ của table có thể được thiết lập theo pixel hoặc theo phần trăm. Khi chỉ định theo pixel, table sẽ được nhìn thấy có kích cỡ giống nhau không phụ thuộc vào cửa sổ trình duyệt. Khi kích cỡ của table được chỉ định theo phần trăm, table sẽ được tự động điều chỉnh tùy thuộc vào kích thước của cửa sổ trình duyệt, có khả năng nội dung sẽ không còn ở vị trí chúng ta mong muốn.

Thử tưởng tượng table đã được thiết kế để có thể xem tốt trên một màn hình nhỏ với độ phân giải thấp, với kích thước tương đương với cửa sổ trình duyệt được mở ở chế độ maximized.

Nếu chúng ta thay đổi kích thước của table theo pixel, chúng ta sẽ luôn thấy table có độ rộng như nhau. Điều bất tiện là khi chúng ta phóng to cửa sổ trình duyệt trên một màn hình lớn hơn với độ phân giải cao hơn, phía bên phải table sẽ là một khoảng trống “mênh mông”.

Nếu chúng ta thay đổi kích thước của table theo phần trăm, độ rộng của table sẽ được điều chỉnh. Sử dụng table với kích thước thay đổi có thể gây ra vấn đề khi người dùng phóng to tối đa cửa sổ trình duyệt ở độ phân giải quá cao, hoặc thu nhỏ kích thước cửa sổ trình duyệt tới mức quá nhỏ. Nội dung trong table không còn ở vị trí “có thể chấp nhận được” nữa.

Việc thu nhỏ kích cỡ của cửa sổ trình duyệt không chỉ có tác hại đối với table có độ rộng tương đối mà còn cả với table có độ rộng cố định. Đối với cả hai dạng table này, nội dung được hiển thị trên cửa sổ trình duyệt đều không như ý. Trên thực tế, việc người dùng thu nhỏ quá mức cửa sổ trình duyệt của mình ít khi xảy ra, và họ cũng thường ý thức được kết quả sẽ như thế nào. Chúng ta hãy tập trung giải quyết vấn đề xảy ra với màn hình có độ phân giải cao.

Có thể chúng ta sẽ thấy tốt hơn là dùng table với kích thước cố định, chấp nhận vấn đề về khoảng trống bên cạnh table trên những màn hình có độ phân giải cao. Tuy nhiên hãy thử làm điều này, ngay khi làm việc với table chúng ta có thể

giải quyết vấn đề và định nghĩa độ rộng table theo phần trăm, và tận dụng lợi thế về không gian khi màn hình có độ phân giải cao.

Không chỉ độ rộng của table có thể được chỉ định, chúng ta cũng có thể chỉ định độ rộng của ô. Tương tự như độ rộng của table, độ rộng của ô cũng có thể được định nghĩa theo pixel hay phần trăm.

Kích cỡ của ô được chỉ định bới các tham số W (width) và H (height) trên properties inspector. Thông thường thì chỉ có độ rộng được chỉ định.

Thông số W và H được coi là số pixel. Độ rộng của ô ở hình trênlà 208 pixel. Để làm cho ô có độ rộng là 25% của table, ta phải gõ vào giá trị 25% trong mục W.

Thay đổi kích cỡ của ô trên cơ sở biết rõ nội dung trong ô đó (hình ảnh, text được canh phải, text được canh trái, text có size chữ lớn, chứa menu của trang web, …) sẽ giúp giao diện của trang web trông giống nhau hoặc ít bị ảnh hưởng bởi việc site được xem trên các màn hình có kích cỡ khác nhau và độ phân giải khác nhau.

Một phần của tài liệu BÀI BÁO CÁO-GIÁO TRÌNH THIẾT KẾ WEB (Trang 104)

Tải bản đầy đủ (PDF)

(134 trang)