Các tính năng khác

Một phần của tài liệu Bai giang mon tk web 1 docx (Trang 38 - 42)

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. đặ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ế độ Designview, ta phải chè vào bằng code. 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. </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 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.

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. 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 Welcome to Dogs and Cats

<img src="images/logo_animales.gif"></marquee> </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ườixem trang web sẽ biết lần cuối dữ liệu của trang được cập nhậ là khi nào. 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 Dreaweavertự động cập nhật khi file được sửa chữa và lưu lại. 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. Để 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 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ươngtự 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 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. 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ửasổ trình duyệt như sau: 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() function scroller()

window.status=mensaje.substring(strcnt++,mensaje.length+1);if(strcnt>mensaje.length) 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()"> <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. 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ọcqua JavaScript hay một ngôn ngữ lập trình nào khá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. đ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ácnhau với màn hình có kích cỡ, độ sâu màu, độ phân giải khác nhau. 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ầnlàn cho chúng càng giống nhau càng tốt. 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ềunà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 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. Khichỉ đị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 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ảithấp, với kích thước tương đương với cửa sổ trình duyệt được mở ở chế độ maximized. 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 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 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 đốimà 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ổ 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ảngtrố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 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. 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 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 đượ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.

CHƯƠNG III – CSSI. GIỚI THIỆU I. GIỚI THIỆU

1. CSS là gì?

Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất, trong lĩnh vực thẩm mỹ - làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS. ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS.

CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,… HTML, XHTML, XML, SVG, hay UML,…

2. Tại sao CSS?

Ngôn ngữ HTML cũng có số thuộc tính định dạng cơ bản cho text, picture, table, … nhưng nó không thật sự phong phú và chính xác như nhau trên mọi hệ thống. CSS cung cấp cho bạn hàng trăm không thật sự phong phú và chính xác như nhau trên mọi hệ thống. CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo trong kết hợp các thuộc tính giúp mang lại hiệu quả cao. Ngoài ra, CSS đã được hỗ trợ bởi tất cả các trình duyệt, nên bạn hoàn toàn có thể tự tin trang web của mình có thể hiển thị “như nhau” trên mọi hệ điều hành.

Sử dụng các mã định dạng trực tiếp trong HTML tốn hao nhiều thời gian thiết kế cũng như dung lượng lưu trữ. Trong khi đó CSS đưa ra phương thức áp dụng một khuôn mẫu chuẩn từ một file CSS ở lượng lưu trữ. Trong khi đó CSS đưa ra phương thức áp dụng một khuôn mẫu chuẩn từ một file CSS ở ngoài. Có hiệu quả đồng bộ khi bạn tạo một website có hàng trăm trang hay cả khi bạn muốn thay đổi một thuộc tính trình bày nào đó.

CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.

3. Học CSS cần những gì?

Một phần của tài liệu Bai giang mon tk web 1 docx (Trang 38 - 42)

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

(70 trang)
w