10. CSS trong Dreamweaver
10.4.3. Cách tạo
Ờ Mở trang nguồn Ờ Chọn Insert\Hyperlink
Ớ Text : Nội dung văn bản làm nút liên kết
Ớ Link : địa chỉ URL của trang cần liên kết ựến
Ớ Target : Khung chứa trang ựắch
Ớ Title : Câu ghi chú khi chuột chạm vào nút
Ớ Access Key: Khi xem trang, nhấn tổ hợp phắm Alt + Ký tự nhập ựể chọn nút và nhấn Enter ựể liên kết.
Ớ Tab Index : Trình tự chọn nút khi nhấn phắm Tab
10.4.4. Liên kết ựiểm dừng (Named Anchor)
a) Tạo liên kết ựiểm dừng cùng trang:
đối với các trang Web dài, hoặc trang có nhiều mục, thì nên tạo các ựiểm dừng. Gồm 2 bước:
đặt tên ựiểm dừng: Trong Document Window, ựặt dấu nháy tại vị trắ làm ựiểm dừng
Chọn Insert\Named Anchor (Ctrl+Alt+A) hoặc Click nút Insert Named Anchor trong bảng Common của thanh Insert.
THIẾT KẾ WEB Ờ PHẦN 1 Ờ WEB TĨNH - SANGIT
Trong hộp thoại Insert Anchor: Nhập tên cho Anchor (không thừa khoảng trắng, không có ký tự lạ).
Tạo liên kết ựiểm dừng:
Trong Document Windows, chọn một ựoạn văn bản hoặc một hình ựể tạo Link ựến
ựiểm dừng.
Nếu ựiểm dừng nằm cùng trang thì tại ô Link nhập #Tên Anchor
b) Tạo liên kết ựiểm dừng của trang khác:
Thao tác tạo liên kết ựến ựiểm dừng ở trang khác giống như liên kết ựến trang khác, nhưng tại mục link phải chỉ ra ựiểm dừng nào. Theo cấu trúc: <Tên tập tin>#<Tên ựiểm dừng>
10.4.5. Hiệu chỉnh liên kết:
Ờ Chọn nút liên kết cần thay ựổi Chọn menu Modify\Change LinkẦ
Ờ Nếu biết rõ tập tin liên kết mới thì có thể nhập trực tiếp trong ô Link của Properties Inspector.
10.4.6. Xoá liên kết
Ờ Chọn nút muốn loại bỏ liên kết
Ờ Chọn Modify\Remove Link. Hoặc xoá tên trang liên kết trong ô link của Properties Inspector.
10.4.7. Bản ựồ ảnh liên kết :
Ờ Khi chọn ảnh làm liên kết, thì có một sốảnh kắch thước lớn, thường chia nhỏảnh ựó ra thành nhiều vùng mỗi vùng liên kết ựến một trang Web khác, dạng này gọi là bản ựồ ảnh liên kết. Những thuận tiện khi sử dụng bản ựồảnh liên kết:
Ờ Giúp tạo nhanh các liên kết
Ờ Hình ảnh trực quan, dễ liên tưởng ựến trang tương ứng.
Ờ Giúp bố cục các liên kết nhanh, không chiếm nhiều khu vực nút trên trang Web
a) Cách tạo:
Ờ Chèn ảnh vào trang, click chọn ảnh
Ờ Trong Properties Inspector, hiển thị công cụ Map Ờ Chọn công cụ muốn chia vùng
Ờ Drag chuột quanh phần trên hình mà ta muốn chia vùng ựể tạo liên kết
Ờ Trong Properties Inspector, tại mục Link, nhập ựịa chỉ của trang cần liên kết ựến.
b) Hiệu chỉnh bản ựồ liên kết:
Ờ Di chuyển vùng liên kết
Ờ Click chọn công cụ ựể chọn vùng cần di chuyển Ờ Drag chuột kéo ựến vị trắ mới
THIẾT KẾ WEB Ờ PHẦN 1 Ờ WEB TĨNH - SANGIT c) Thay ựổi kắch thước vùng liên kết
Ờ Chọn vùng liên kết
Ờ Click vào một trong các nút chọn
của vùng liên kết
Ờ Drag chuột ựể thay ựổi kắch thước
d) Xoá vùng liên kết
Ờ Chọn vùng liên kết Ờ Nhấn Delete
10.4.8. Chèn nút biến ựổi hình:
Trước hết phải có 2 tập tin ảnh, n1.gif màu cam, n2.gif màu xanh trong Folder Images của Site
Ờ đặt dấu nháy tại vị trắ cần chèn nút ựộng Ờ Chọn Insert\Image Objects\Rollover Image.
Hộp thoại Insert Rollover Image:
Ớ Image Name : Nhập tên ảnh
Ớ Original Image : Tên tập tin ảnh gốc ựại diện khi hiển thị (vắ dụ n1.gif)
Ớ Rollover Image : Tên tập tin ảnh hiển thị khi rê chuột vào (vắ dụ n2.gif )
Ớ Alternate Text : Câu ghi chú kèm theo
Ớ When Click, go to URL: địa chỉ của trang liên kết ựến
10.4.9. Chèn hệ thống nút biến ựổi hình:
Ờ Dreamweaver có thể giúp bạn cùng một lúc chèn vào cả một hệ thống nút biến hình Ờ Chọn Insert\Image Objects\Navigation Bar
10.4.10. Chèn nút Flash:
Macromedia Dreamweaver và Macromedia Flash là một bộ chương trình có thể sử dụng dữ liệu qua lại với nhau rất thuận tiện, do ựó có thể dùng các nút Flash ựược thiết kế sẵn ựể làm nút liên kết trong Dreamweaver. Chọn Insert\Media\Flash Button
Sample : Vắ dụ mẫu nút Flash
Style : Danh sách tên các nút Flash
Button Text: Văn bản trên nút Flash
Font : Kiểu chữ, Size: Cỡ chữ
Link : địa chỉ liên kết ựến
Target : Tên khung trang liên kết
THIẾT KẾ WEB Ờ PHẦN 1 Ờ WEB TĨNH - SANGIT
10.4.11. Chèn nút Flash Text: Ờ Insert\Media\Flash Text
Ờ Hộp thoại Insert Flash Text, nhập vào các thông số:
Font, Size : Font và cỡ chữ
Color : Màu chữ
Rollover Color: Màu chữ thay ựổi khi rê chuột qua nút
Text : Nội dung văn bản làm nút
Link : địa chỉ trang Web liên kết ựến
Target : Tên khung trang
11. JavaScript
11.1. LỜI NÓI đẦU
- Với HTML and Adobe Dreamweaver bạn ựã biết cách tạo ra trang Web Ờ Tuy nhiên chỉ mới ở mức biểu diễn thông tin chứ chưa phải là các trang Web ựộng có khả năng ựáp
ứng các sự kiện từ phắa người dùng. Hãng Netscape ựã ựưa ra ngôn ngữ Script có tên là LiveScript ựể thực hiện chức năng này. Sau ựó ngôn ngữ này ựược ựổi tên thành JavaScript ựể
tận dụng tắnh ựại chúng của ngôn ngữ lập trình Java. Mặc dù có những ựiểm tương ựồng giữa Java và JavaScript, nhưng chúng vẫn là hai ngôn ngữ riêng biệt.
- JavaScript là ngôn ngữ dưới dạng Script có thể gắn với các File HTML. Nó không
ựược biên dịch mà ựược trình duyệt diễn dịch. Không giống Java phải chuyển thành các mã ựể biên dịch, trình duyệt ựọc JavaScript dưới dạng mã nguồn. Chắnh vì vậy bạn có thể dễ
dàng học JavaScript qua vắ dụ bởi vì bạn có thể thấy cách sử dụng JavaScript trên các trang Web. - JavaScript là ngôn ngữ dựa trên ựối tượng, có nghĩa là bao gồm nhiều kiểu ựối tượng, vắ dụựối tượng Math với tất cả các chức năng toán học. Tuy vậy JavaScript không là ngôn ngữ hướng ựối tượng như C++ hay Java do không hỗ trợ các lớp hay tắnh thừa kế.
- JavaScript có thể ựáp ứng các sự kiện như tải hay loại bỏ các Form. Khả năng này cho phép JavaScript trở thành một ngôn ngữ script ựộng. Giống với HTML và Java, JavaScript
ựược thiết kế ựộc lập với hệ ựiều hành. Nó có thể chạy trên bất kỳ hệ ựiều hành nào có trình duyệt hỗ trợ JavaScript. Ngoài ra JavaScript giống Java ở khắa cạnh an ninh: JavaScript không thểựọc và viết vào File của người dùng.
- Các trình duyệt web như Nescape Navigator 2.0 trở ựi có thể hiển thị những câu lệnh JavaScript ựược nhúng vào trang HTML. Khi trình duyệt yêu cầu một trang, server sẽ gửi
ựầy ựủ nội dung của trang ựó, bao gồm cả HTML và các câu lệnh JavaScript qua mạng tới client. Client sẽ ựọc trang ựó từ ựầu ựến cuối, hiển thị các kết quả của HTML và xử lý các câu lệnh JavaScript khi nào chúng xuất hiện.
- Các câu lệnh JavaScript ựược nhúng trong một trang HTML có thể trả lời cho các sự kiện của người sử dụng như kắch chuột, nhập vào một Form và ựiều hướng trang. Vắ dụ bạn có thể kiểm tra các giá trị thông tin mà người sử dụng ựưa vào mà không cần ựến bất cứ một quá trình truyền trên mạng nào. Trang HTML với JavaScript ựược nhúng sẽ kiểm tra các giá trị ựược ựưa vào và sẽ thông báo với người sử dụng khi giá trịựưa vào là không hợp lệ.
- Mục ựắch của phần này là giới thiệu về ngôn ngữ lập trình JavaScript ựể bạn có thể
THIẾT KẾ WEB Ờ PHẦN 1 Ờ WEB TĨNH - SANGIT 11.2. NHẬP MÔN JAVASCRIPT
11.2.1. Nhúng Javascript Vào File HTML
Bạn có thể nhúng JavaScript vào một file HTML theo một trong các cách sau ựây: Sử dụng các câu lệnh và các hàm trong cặp thẻ <SCRIPT>
Sử dụng các File nguồn JavaScript
Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tắnh HTML Sử dụng thẻ sự kiện (Event Handlers) trong một thẻ HTML nào ựó
Trong ựó, sử dụng cặp thẻ <SCRIPT>...</SCRIPT> và nhúng một file nguồn JavaScript là
ựược sử dụng nhiều hơn cả.
11.2.1.1. Sử dụng thẻ SCRIPT
Script ựược ựưa vào file HTML bằng cách sử dụng cặp thẻ <SCRIPT> và <\SCRIPT>.
Các thẻ <SCRIPT> có thể xuất hiện trong phần <HEAD> hay <BODY> của file HTML. Nếu
ựặt trong phần <HEAD>, nó sẽựược tải và sẵn sàng trước khi phần còn lại của văn bản ựược tải. Thuộc tắnh duy nhất ựược ựịnh nghĩa hiện thời cho thẻ <SCRIPT> là
ỘLANGUAGE=Ộ dùng ựể xác ựịnh ngôn ngữ script ựược sử dụng. Có hai giá trị ựược ựịnh nghĩa là "JavaScript" và "VBScript". Với chương trình viết bằng JavaScript bạn sử dụng cú pháp sau :
<SCRIPT LANGUAGE=ỢJavaScriptỢ> // INSERT ALL JavaScript HERE </SCRIPT>
điểm khác nhau giữa cú pháp viết các ghi chú giữa HTML và JavaScript là cho phép bạn ẩn các mã JavaScript trong các ghi chú của file HTML, ựể các trình duyệt cũ không hỗ trợ cho JavaScript có thểựọc ựược nó như trong vắ dụ sau ựây:
<SCRIPT LANGUAGE=ỢJavaScriptỢ>
<!-- From here the JavaScript code hidden // INSERT ALL JavaScript HERE
// This is where the hidden ends --> </SCRIPT>
Dòng cuối cùng của Script cần có dấu // ựể trình duyệt không diễn dịch dòng này dưới dạng mã JavaScript. đặc ựiểm ẩn của JavaScript ựể mã có thể dễ hiểu hơn.
11.2.1.2. Sử dụng một File nguồn JavaScript
- Thuộc tắnh SRC của thẻ <SCRIPT> cho phép bạn chỉ rõ File nguồn JavaScript
ựược sử dụng (dùng phương pháp này hay hơn nhúng trực tiếp một ựoạn lệnh JavaScript vào trang HTML).
Cú pháp:
<SCRIPT SRC="file_name.js"> ....
</SCRIPT>
- Thuộc tắnh này rấy hữu dụng cho việc chia sẻ các hàm dùng chung cho nhiều trang khác nhau. Các câu lệnh JavaScript nằm trong cặp thẻ <SCRIPT> và </SCRIPT > có chứa thuộc tắnh SRC trừ khi nó có lỗi. Vắ dụ bạn muốn ựưa dòng lệnh sau vào giữa cặp thẻ <SCRIPT > SRC="..."> và </SCRIPT>:
document.write("Không tìm thấy file JS ựưa vào!");
- Thuộc tắnh SRC có thểựược ựịnh rõ bằng ựịa chỉ URL, các liên kết hoặc các ựường dẫn tuyệt ựối
<SCRIPT SRC=" http://cse.com.vn ">
- Các file JavaScript bên ngoài không ựược chứa bất kỳ thẻ HTML nào. Chúng chỉ ựược chứa các câu lệnh JavaScript và ựịnh nghĩa hàm. Tên File của các hàm JavaScript bên ngoài cần có ựuôi .js, và Server sẽ phải ánh xạ ựuôi .js ựó tới kiểu MIME application/x-javascript. đó là những gì mà Server gửi trở lại phần Header của file
HTML. để ánh xạ ựuôi này vào kiểu MIME, ta thêm dòng sau vào file mime.types trong
ựường dẫn cấu hình của Server, sau ựó khởi ựộng lại Server: type=application/x-javascript
- Nếu Server không ánh xạ ựược ựuôi .js tới kiểu MIME application/x-javascript ,
Navigator sẽ tải file JavaScript ựược chỉ ra trong thuộc tắnh SRC về không ựúng cách. Trong vắ dụ sau, hàm Bar có chứa xâu "Left" nằm trong một cặp dấu nháy kép:
function bar(widthPct){
document.write(" <HR ALIGN='LEFT' WIDTH="+widthPct+"%>") }
THIẾT KẾ WEB Ờ PHẦN 1 Ờ WEB TĨNH - SANGIT
11.2.2. Thẻ <NOSCRIPT> và </NOSCRIPT>
Cặp thẻ này dùng ựể ựịnh rõ nội dung thông báo cho người sử dụng biết trình duyệt không hỗ
trợ JavaScript. Khi ựó trình duyệt sẽ không hiểu thẻ <NOSCRIPT> và nó bị lờ ựi, còn
ựoạn mã nằm trong cặp thẻ này sẽựược Navigator hiển thị. Ngược lại, nếu trình duyệt có hỗ trợ
JavaScript thì ựoạn mã trong cặp thẻ <NOSCRIPT> sẽựược bỏ qua. Tuy nhiên, ựiều này cũng có thể xảy ra nếu người sử dụng không sử dụng JavaScript trong trình duyệt của mình bằng cách tắt nó ựi trong hộp Preferences/Advanced.
<NOSCRIPT>
<B> Trang này có sử dụng JavaScript. Do ựó bạn cần sử dụng trình duyệt Netscape Navigator từ version 2.0 trở ựi!
<BR>
<A HREF="http://home.netscape.com/comprd/mirror/index.html"> Hãy kắch chuột vào ựây ựể tải về phiên bản Netscape mới hơn </A>
</BR>
Nếu bạn ựã sử dụng trình duyệt Netscape từ 2.0 trở ựi mà vẫn ựọc ựược dòng chữ này thì hãy bật Preferences/Advanced/JavaScript lên
</NOSCRIPT>
11.2.3. Hiển thị một dòng text:
- Trong hầu hết các ngôn ngữ lập trình, một trong những khả năng cơ sở là hiển thị
ra màn hình một dòng text. Trong JavaScript, người lập trình cũng có thểựiều khiển việc xuất ra màn hình của Client một dòng text tuần tự trong file HTML. JavaScript sẽ xác ựịnh ựiểm mà nó sẽ xuất ra trong file HTML và dòng text kết quả sẽựược dịch như các dòng HTML khác và hiển thị trên trang.
- Hơn nữa, JavaScript còn cho phép người lập trình sinh ra một hộp thông báo hoặc xác nhận gồm một hoặc hai nút. Ngoài ra, dòng Text và các con số còn có thể hiển thị trong trường TEXT và TEXTAREA của một Form.
- Trong phần này, ta sẽ học cách thức Write( ) và Writeln( ) của ựối tượng document. - đối tượng Document trong JavaScript ựược thiết kế sẵn hai cách thức ựể xuất một dòng text ra màn hình client: Write( ) và Writeln( ). Cách gọi một cách thức của một ựối tượng như sau:
Object_Name.Property_Name
Dữ liệu mà cách thức dùng ựể thực hiện công việc của nó ựược ựưa vào dòng tham số, vắ dụ:
Document.Write("Test"); Document.Writeln('Test');
Cách thức Write( ) xuất ra màn hình xâu Text nhưng không xuống dòng, còn cách thức
Writeln( ) sau khi viết xong dòng Text tựựộng xuống dòng. Hai cách thức này ựều cho phép xuất ra thẻ HTML. Cách thức Write( ) xuất ra thẻ HTML <HTML> <HEAD> <TITLE>Ouputting Text</TITLE> </HEAD>
<BODY> This text is plain.<BR> <B> <SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM OTHER BROWSERS
document.write("This text is bold.</B>"); // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT>
</BODY> </HTML>
THIẾT KẾ WEB Ờ PHẦN 1 Ờ WEB TĨNH - SANGIT
Sự khác nhau của Write( ) và Writeln( ): <PRE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS document.writeln("One,");
document.writeln("Two,"); document.write("Three "); document.write("...");
// STOP HIDING FROM OTHER BROWSERS --> </SCRIPT>
</PRE>
11.2.4. Giao tiếp với người sử dụng
- JavaScript hỗ trợ khả năng cho phép người lập trình tạo ra một hộp hội thoại. Nội dung của hộp hội thoại phụ thuộc vào trang HTML có chứa ựoạn script mà không làm ảnh hưởng
ựến việc xuất nội dung trang.
- Cách ựơn giản ựể làm việc ựó là sử dụng cách thức Alert(). để sử dụng ựược cách thức này, bạn phải ựưa vào một dòng Text như khi sử dụng Document.Write( ) và Document.Writeln( ) trong phần trước.
Alert("Nhấn vào OK ựể tiếp tục");
- Khi ựó file sẽ chờ cho ựến khi người sử dụng nhấn vào nút OK rồi mới tiếp tục thực hiện. Thông thường, cách thức Alert( ) ựược sử dụng trong các trường hợp:
Thông tin ựưa và form không hợp lệ Kết quả sau khi tắnh toán không hợp lệ
Khi dịch vụ chưa sẵn sàng ựể truy nhập dữ liệu
- Tuy nhiên cách thức Alert( ) mới chỉ cho phép thông báo với người sử dụng chứ
chưa thực sự giao tiếp với người sử dụng. JavaScript cung cấp một cách thức khác ựể giao tiếp với người sử dụng là Promt( ). Tương tự như Alert( ), Prompt( ) tạo ra một hộp hội thoại với một
dòng thông báo do bạn ựưa vào, nhưng ngoài ra nó còn cung cấp một trường ựể nhập dữ liệu vào. Người sử dụng có thể nhập vào trường ựó rồi kắch vào OK. Khi ựó, ta có thể xử lý dữ liệu do