10. CSS trong Dreamweaver
10.3.7.Ảnh nền trang
Ờ Ảnh nền là ảnhh tựựộng lợp ựầy trang Web. Khi thiết kế, bạn nên chọn những mẫu nền thật nhạt, chữ sậm hoặc nền thật sậm, chữ màu sáng. Ờ Ảnh nền với số Kb càng nhỏ thì trang hiển thị càng nhanh 10.3.8. Cách tạo ảnh nền: Ờ đặt trỏ trong trang Ờ Chọn Modify\Page Properties
Ờ Background Images : nhập ựường dẫn ựến tập tin ảnh làm nền Ờ Repeat : Chọn kiểu lặp
THIẾT KẾ WEB Ờ PHẦN 1 Ờ WEB TĨNH - SANGIT
10.3.9. Tạo Web Photo Album:
Ờ Chức năng : Tạo bộ sưu tập các hình ảnh hay cuốn Album giúp người sử dụng quản lý và chọn xem từng hình một cách nhanh nhất
Ờ Cách tạo : để thực hiện chức năng này cần phải cài ựặt Macromedia Fireworks và một thư mục chứa các hình photo
Ớ Chọn Commands\Create Web Photo Album
Ớ Xuất hiện hộp thoại Create Web Photo Album
Ớ Nhập các thông số. Click OK, chờ kết quả, xuất hiện thông báo Album ựã ựược tạo. Ớ Trong Site Panel xuất hiện thêm các Folder:
Ờ Folder Thumbnail: chứa các file JPG
Ờ Folder Page chứa các File .HTM cho mỗi Image tương ứng (trang con) Ờ Tập tin Index.htm trong Folder chứa Website, ựây là tập tin Album chắnh.
Ờ Mở tập tin Index.htm và di chuyển giữa các trang bằng các Hyperlink: Next Previous, Home
10.3.10. Tạo Library Item:
a) Khái niệm:
Library chứa các thành phần của trang như hình ảnh, văn bản Ầ có nhu cầu sử dụng lại hoặc cần cập nhật thường xuyên. Các thành phần này gọi là Library Items.
b) Cách tạo:
Trong Assets Panel, Click nút Library.
Chọn thành phần muốn tạo Library Item và thực hiện một trong các cách sau Ờ Drag chuột kéo thành phần ựược chọn thả vào khung Library. đặt tên
Ờ Click nút New Library Item và ựặt tên
Ờ Chọn Modify\Library\Add Object to Library và ựặt tên
c) Nhập Library Item vào trang mới:
Ờ đặt dấu nháy vào nơi muốn nhập Library Item
Ờ Kéo Library Item từ Assets Panel thả vào Document Window
d) Hiệu chỉnh Library Item:
Ờ Chọn Library Item trong khung Library\Edit
Ờ Xuất hiện hộp thoại cho phép hiệu chỉnh Library Item
Ờ Click Save. Cập nhật tất cả trang Web có sử dụng Library trong Site
Ờ Có thể cập nhật bằng cách chọn Modify\Library\Update Pages: cập nhật tất cả những trang có sử dụng Library Item.
e) Tách Library Item trong Document khỏi Library:
Ờ Chọn Library Item trong trang Web hiện hành
Ờ Click nút Detach from Original trên Properties Inspector (adsbygoogle = window.adsbygoogle || []).push({});
f) Tạo lại Library Item bằng một Library ựang sử dụng trong trang
Ờ Có thể dùng Library trong trang ựể tạo lại một Library Item, nếu Library Item bị mất Ờ Chọn Library trên trang Web hiện hành
THIẾT KẾ WEB Ờ PHẦN 1 Ờ WEB TĨNH - SANGIT 10.4. LIÊN KẾT TRANG TRONG DREAMWEAVER
10.4.1. Giới thiệu:
Một liên kết nối từ trang nguồn ựến trang ựắch gồm 2 thành phần:
Ờ đối tượng ựược chọn làm nút liên kết: Text, Image, Button. Trong Dreamweaver cung cấp thêm một số ựối tượng ựặc biệt làm nút liên kết như Flash Text, Flash Button, Navigation Bar, Rollover ImagesẦ
Ờ địa chỉ URL của trang cần liên kết ựến 3 loại liên kết Ớ Liên kết nội
Ớ Liên kết ngoại Ớ Liên kết Email
10.4.2. Các dạng liên kết:
a) Dạng liên kết vòng:
Là dạng liên kết nối ựuôi nhau, trang1 liên kết ựến trang 2,Ầtrang n liên kết ựến trang 1, ựảm bảo người xem có thể xem tất cả các trang, nhưng bất lợi là phải duyệt hết một vòng.
b) Dạng liên kết ựầy ựủ:
Tại mổi trang ựều tạo liên kết ựầy ựủ ựến tất cả các trang còn lại, ựây là dạng liên kết trong site có ựộ phân cấp thấp.
c) Dạng liên kết cây phân cấp:
Trong các Site lớn, mức ựộ quan trong của từng trang ựược phân cấp theo từng mức, với trang gốc là trang chủ, mức 1 là nhóm chủ ựề chắnh, mức 2 là nhóm chủ ựề con, mức 3 là trang chứa các thông tin chi tiết,ẦỞ dạng này tồn tại liên kết giữa các trang cùng mức (Same Level), liên kết về mức trên (Parent Level), liên kết về mức dưới (Child Level).
d) Liên kết tiện nghi:
Ngoài các dạng liên kết trên, ựể thuận tiện cho người xem khi lật trang, có thể tạo thêm một số
liên kết phụ, như liên kết ựến ựiểm dừng (Bookmark).
e) Liên kết trang chủ:
Trang chủ thường chứa các nút liên kết ựến các trang con, do ựó cần phải tạo liên kết từ trang con trở về trang chủ.
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: (adsbygoogle = window.adsbygoogle || []).push({});
đố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 (adsbygoogle = window.adsbygoogle || []).push({});
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ữ (adsbygoogle = window.adsbygoogle || []).push({});
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à (adsbygoogle = window.adsbygoogle || []).push({});
Ộ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 ,