10. CSS trong Dreamweaver
11.8.1. it ượng và thuộc tính
- Nhưñã biết, một ñối tượng trong JavaScript có các thuộc tính ñi kèm với nó. Bạn có thể truy nhập ñến các thuộc tính của nó bằng cách gọi : objectName.propertyName
- Cả tên ñối tượng và tên thuộc tính ñều nhạy cảm. Bạn ñịnh nghĩa một thuộc tính bằng các gán cho nó một giá trị. Ví dụ, giả sử có một ñối tượng tên là Mycar (trong trường hợp này giả sửñối tượng này ñã tồn tại sẵn sàng). Bạn có thể lấy các thuộc tính có tên Make, Model và Year của nó như sau:
myCar.make = “Ford“ myCar.model = “Mustang“ myCar.year = 69;
- Có một mảng lưu trữ tập hợp các giá trị tham chiếu tới từng biến. Thuộc tính và mảng trong JavaScript có quan hệ mật thiết với nhau, thực ra chúng chỉ khác nhau về
cách giao tiếp với cùng một cấu trúc dữ liệu. Ví dụ cũng có thể truy nhập tới các thuộc tính của
ñối tượng myCar ở trên bằng mảng như sau:
myCar[make] = “Ford“ myCar[model] = “Mustang“ myCar[year] = 69;
- Kiểu mảng này ñược hiểu như một mảng có khả năng liên kết bởi mỗi một phần tử
trong ñó ñều có thể liên kết ñến một giá trị xâu nào ñó. ðể minh hoạ việc này ñược thực hiện như
thế nào, hàm sau ñây sẽ hiển thị các thuộc tính của một ñối tượng thông qua tham số về kiểu ñối tượng ñó và tên ñối tượng.
function show_props (obj, obj_name) {
var result=”” for (i in obj)
result=result+ obj_name + “.”+ i+ “=” + obj[i] + “\n” return result
}
Khi gọi hàm Show_Props(Mycar,”Mycar”) sẽ hiện lên:
myCar.make = Ford myCar.model = Mustang myCar.year = 69;
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT 11.8.2 TẠO CÁC ðỐI TƯỢNG MỚI
Cả JavaScript Client – Side và Server – Side ñều có một sốñối tượng ñược ñịnh nghĩa trước. Tuy nhiên, bạn cũng có thể tạo ra những ñối tượng của riêng bạn. Trong JavaScript 1.2, nếu bạn chỉ
muốn tạo ra một ñối tượng duy nhất của một kiểu ñối tượng, bạn có thể tạo nó bằng cách sử dụng khởi tạo ñối tượng. Hoặc nếu bạn muốn tạo ra nhiều cá thể của một kiểu ñối tượng, bạn có thể tạo ra một hàm xây dựng trước, sau ñó tạo ra các ñối tượng có kiểu của hàm ñó bằng toán tử New
11.8.2.1 Sử dụng khởi tạo ñối tượng
- Trong những phiên bản trước của Navigator, bạn chỉ có thể tạo ra một ñối tượng bằng cách sử dụng hàm xây dựng chúng hoặc sử dụng một hàm ñược cung cấp bởi một vài ñối tượng khác ñểñạt ñược mục ñích.
- Tuy nhiên, trong Navigator 4.0, bạn có thể tạo ra một ñối tượng bằng cách sử dụng một khởi tạo ñối tượng. Bạn sử dụng cách này khi bạn chỉ muốn tạo ra một cá thể ñơn lẻ chứ không phải nhiều cá thể của ñối tượng.
- Cú pháp ñể tạo ra một ñối tượng bằng cách khởi tạo ñối tượng (Object Initializers):
ObjectName={ Property1: Value1, Property2: Value2, ... , Propertyn: Valuen }
- Trong ñó ObjectName là tên của ñối tượng mới, mỗi Property1 là một xác minh (có thể là một tên, một số hoặc một xâu ký tự) và mỗi Value1 là một biểu thức mà giá trị của nó ñược
gán cho Property1. Có thể lựa chọn khởi tạo bằng tên ñối tượng hoặc chỉ bằng các khai báo. - Nếu như bạn không cần dùng ñến ñối tượng ñó trong mọi chỗ, bạn không cần phải gán nó cho một biến.
- Nếu một ñối tượng ñược tạo bằng cách khởi tạo ñối tượng ở mức cao nhất, mỗi lần
ñối tượng ñó xuất hiện trong các biểu thức, JavaScript sẽ ñánh giá lại nó một lần. Ngoài ra, nếu sử dụng việc khởi tạo này trong một hàm thì mỗi lần gọi hàm, ñối tượng sẽñược khởi tạo một lần
if (condition)
x={hi: ”there.”}
- Trong trường hợp này, JavaScript sẽ tạo ra một ñối tượng và gắn nó vào biến x nếu biểu thức Condition ñược ñánh giá là ñúng. Còn ví dụ sau tạo ra một ñối tượng myHonda với 3 thuộc tính:
myHonda= { Color: “Red”, Wheels: 4, Engine: {Cylinder: 4, Size: 2.2 }}
Chú ý rằng thuộc tính Engine cũng là một ñối tượng với các thuộc tính của nó
- Trong Navigator 4.0, bạn cũng có thể sử dụng một khởi tạo ñể tạo một mảng. Cú pháp ñể tạo mảng bằng cách này khác với tạo ñối tượng:
- Trong ñó, ArrayName là tên của mảng mới, và mỗi Element1 là giá trị của phần tử ở vị trí ñó của mảng. Khi bạn tạo một mảng bằng cách sử dụng phương pháp khởi tạo, thì nó sẽ
coi mỗi giá trị là một phần tử trên mảng, và chiều dài của mảng chính là số các tham số.
- Bạn không cần phải chỉ ñịnh rõ tất cả các phần tử trên mảng mới. Nếu bạn ñặt hai dấu phẩy vào hàng, thì mảng sẽ ñược tạo với những chốn trống cho những phần tử chưa ñược
ñịnh nghĩa như ví dụ dưới ñây:
- Nếu một mảng ñược tạo bằng cách khởi tạo (Initializer) ở mức cao nhất, mỗi lần mảng ñó xuất hiện trong các biểu thức, JavaScript sẽ ñánh giá lại nó một lần. Ngoài ra, nếu sử
dụng việc khởi tạo này trong một hàm thì mỗi lần gọi hàm, mảng sẽñược khởi tạo một lần Tạo một mảng coffees với 3 phần tử và ñộ dài của mảng là 3:
coffees = *“French Roast”,”Columbian”,”Kona”+
Tạo ra một mảng với 2 phần tửñược khởi ñầu và một phần tử rỗng:
fish = *“Lion”, ,” Surgeon”+
Với biểu thức này, fish[0] là “Lion”, fish*2+ là ” Surgeon”, và fish[2] chưa ñược ñịnh nghĩa
11.8.2.2 Sử dụng một hàm xây dựng (Constructor Function)
- Bạn có thể tạo ra ñối tượng của riêng mình với hai bước sau: + ðịnh nghĩa kiểu của ñối tượng bằng cách viết một hàm xây dựng. + Tạo ra một cá thể của ñối tượng ñó bằng toán tử New
- ðể ñịnh nghĩa một kiểu ñối tượng, ta phải tạo ra một hàm ñể chỉ ñịnh rõ tên, các thuộc tính và các cách thức của kiểu ñối tượng ñó. Ví dụ giả sử bạn muốn tạo một kiểu ñối tượng ô tô với tên là car, có các thuộc tính Make, Model, Year và Color, ñể thực hiện việc này có thể viết một hàm như sau:
function car(make, model, year ){ this.make = make
this.model = model this.year = year }
- Chú ý việc sử dụng toán tử this ñể gán giá trị cho các thuộc tính của ñối tượng phải thông qua các tham số của hàm. Ví dụ, bạn có thể tạo một ñối tượng mới kiểu car như sau:
mycar = new car(“Eagle”,”Talon TSi”,1993)
- Câu lệnh này sẽ tạo ra ñối tượng mycar và liên kết các giá trị ñược ñưa vào với các thuộc tính. Khi ñó giá trị của Mycar.Make là “Eagle”, giá trị của Mycar.Model là “Talon Tsi”, và Mycar.Year là một số nguyên 1993....Cứ như vậy bạn có thể tạo ra nhiều ñối tượng kiểu car.
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
- Một ñối tượng cũng có thể có những thuộc tính mà bản thân nó cũng là một ñối tượng. Ví dụ bạn ñịnh nghĩa thêm một ñối tượng khác là Person như sau:
Function person(name, age, sex) { this.name=name
this.age=age this.sex=sex }
Và sau ñó ta tạo ra hai người mới:
Rank = new person(“Rank mckinnon”,33,”M”) Ken = new person(“Ken John”,39,”M”)
Bây giờ bạn ñịnh nghĩa lại hàm xây dựng car như sau:
Function car(make, model, year,owner ) { this.make = make this.model = model this.year = year this.owner = owner } Như vậy bạn có thể tạo ñối tượng kiểu car mới:
Car1 = new car(“Eagle”,”Talon tsi”,1993,rank) Car2 = new car(“Nissan”,”300ZX”,1992,ken)
- Như vậy, thay vì phải qua một xâu ký tự hay một giá trị số khi tạo ñối tượng, ta chỉ
cần ñưa hai ñối tượng ñã ñược tạo ở câu lệnh trên vào dòng tham số của ñối tượng mới tạo. Ta cũng có thể lấy ñược thuộc tính của ñối tượng Owner bằng câu lênh sau: car2.owner.name
- Chú ý rằng bạn cũng có thể tạo ra một thuộc tính mới cho ñối tượng trước khi ñịnh nghĩa nó, ví dụ: Car1.Color=”Black”
- Như vậy, thuộc tính Color của ñối tượng car1 ñược gán là “Black”. Tuy nhiên, nó
sẽ không gây tác ñộng tới bất kỳ một ñối tượng kiểu car nào khác. Nếu muốn thêm thuộc tính cho tất cả các ñối tượng thì phải ñịnh nghĩa lại hàm xây dựng ñối tượng.
11.8.2.3 Lập mục lục cho các thuộc tính của ñối tượng
- Trong Navigator 2.0, bạn có thể gọi thuộc tính của một ñối tượng bằng tên thuộc tính hoặc bằng số thứ tự của nó. Tuy nhiên từ Navigator 3.0 trở ñi, nếu ban ñầu bạn ñịnh nghĩa một thuộc tính bằng tên của nó, bạn sẽ luôn luôn phải gọi nó bằng tên, và nếu bạn ñịnh nghĩa một
thuộc tính bằng chỉ số thì bạn cũng luôn luôn phải gọi tới nó bằng chỉ số.
- ðiều này ứng dụng khi bạn tạo một ñối tượng với những thuộc tính của chúng bằng hàm xây dựng (như ví dụ về kiểu ñối tượng car ở phần trước) và khi bạn ñịnh nghĩa những thuộc tính của riêng một ñối tượng (như Mycar.Color=”Red”). Vì vậy nếu bạn ñịnh nghĩa các thuộc tính của ñối tượng ngay từñầu bằng chỉ số như Mycar*5+=”25 Mpg”, bạn có thể lần lượt gọi tới các thuộc tính khác như Mycar*5+.
- Tuy nhiên ñiều này là không ñúng ñối với những ñối tượng tương ứng của HTML như mảng Form. Bạn có thể gọi tới các ñối tượng trong mảng bởi số thứ tự hoặc tên của chúng. Ví dụ thẻ <Form> thứ hai trong một Document có thuộc tính Name là “Myform” thì bạn có thể gọi tới Form ñó bằng Document.Form*1+ hoặc Document.Form*“Myform”+
hoặc Document.Myform
11.8.2.4 ðịnh nghĩa thêm các thuộc tính cho một kiểu ñối tượng
- Bạn có thể thêm thuộc tính cho một kiểu ñối tượng ñã ñược ñịnh nghĩa trước bằng cách sử dụng thuộc tính Property. Thuộc tính ñược ñịnh nghĩa này không chỉ có tác dụng ñối với một ñối tượng mà có tác dụng ñối với tất cả các ñối tượng khác cùng kiểu.Ví dụ sau thực hiện thêm thuộc tính Color cho tất cả các ñối tượng kiểu car, sau ñó gắn một giá trị màu cho thuộc tính
Color của ñối tượng car1:
Car.Prototype.Color=Null Car1.Color=”Red”
11.8.2.5 ðịnh nghĩa cho cách thức
- Một cách thức là một hàm ñược liên kết với một ñối tượng. Bạn ñịnh nghĩa một cách thức cũng có nghĩa là bạn ñịnh nghĩa một hàm chuẩn. Bạn có thể sử dụng cú pháp sau ñể
gắn một hàm cho một ñối tượng ñang tồn tại: Object.MethodName = Function_Name
- Trong ñó Object là ñối tượng ñang tồn tại, Methodname là tên cách thức và
Function_Name là tên hàm. Bạn có thể gọi cách thức này từñối tượng như sau:
Object.MethodName(<tham số>)
- Bạn có thể ñịnh nghĩa cách thức cho một kiểu ñối tượng bằng cách ñưa cách thức
ñó vào trong hàm xây dựng ñối tượng. Ví dụ bạn có thểñịnh nghĩa một hàm có thểñịnh dạng và hiển thị các thuộc tính của các ñối tượng kiểu car ñã xây dựng ở phần trước:
Function DisplayCar ( ) {
Var result = “ABeautiful”+This.Year+ “ ”+ This.Make + “ ”+ This.Model Document.Write(Result)
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
- Bạn có thể thêm cách thức này vào cho ñối tượng car bằng cách thêm dòng lệnh sau vào hàm ñịnh nghĩa ñối tượng This.Displaycar= Displaycar;
Như vậy có thểñịnh nghĩa lại ñối tượng car như sau:
Function car(make, model, year,owner ) { This.make = make this.model = model this.year = year this.owner = owner this.displaycar= displaycar }
Sau ñó, bạn có thể gọi cách thức Displaycar ñối với mỗi ñối tượng:
car1.displayCar ( ) car2.displayCar ( )
11.8.2.6 Sử dụng cho các tham chiếu ñối tượng (Object References)
- JavaScript có một từ khoá ñặc biệt là this mà bạn có thể sử dụng nó cùng với một cách thức ñể gọi tới ñối tượng hiện thời. Ví dụ, giả sử bạn có một hàm ValiDate dùng ñể xác nhận giá trị thuộc tính của một ñối tượng nằm trong một khoảng nào ñó:
function validate(obj, lowval, hival){
if ((obj.value<lowdate)||(obj.value>hival)) alert(“Invalid value!”)
}
Sau ñó bạn có thể gọi hàm ValiDate từ mỗi thẻ sự kiện onChange: <INPUT TYPE=”TEXT” NAME=”AGE” SIZE=3 onChange=”validate(this,18,99)” >
- Khi liên kết với một thuộc tính Form, từ khoá this có thể gọi tới Form cha của ñối tượng hiện thời. Trong ví dụ sau, Myform có chứa ñối tượng Text và một nút bấm. Khi người sử dụng kích vào nút bấm, trường Text sẽ hiển thị tên Form. Thẻ sự kiện Onclick của nút bấm sử
dụng This.Form ñể gọi tới form cha là Myform. <FORM NAME=”myForm”>
Form name:<INPUT TYPE=”text” NAME=”text1” VALUE=”Beluga”> <P> <INPUT TYPE=”button” NAME=”button1” value=”Show Form Name” onClick=”this.form.text1.value=this.form.name”> </FORM>
11.8.2.7 Xóa ñối tượng
Trong JavaScript cho Navigator 2.0, bạn không thể xoá các ñối tượng-chúng vẫn tồn tại trong khi bạn ñã rời khỏi trang ñó. Trong khi JavaScript cho Navigator 3.0 cho phép bạn có thể
xoá một ñối tượng bằng cách ñặt cho nó trỏ tới giá trị Null (nếu nhưñó là lần cuối cùng gọi tới
ñối tượng). JavaScript sẽñóng ñối tượng ñó ngay lập tức thông qua biểu thức gán.
Sau ñây là các từ ñược ñịnh nghĩa là một phần trong ngôn ngữ JavaScript
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT MỤC LỤC PHẦN I – WEB TĨNH...02 1. Các khái niệm...02 2. Cấu trúc HTML...04 2.1. Tag HTML ...04 2.2. <Title>...04 2.3. <Hn> ...05 2.4. <P> ...05 2.5. <BR> ...06 2.6. <HR>...07 2.7. <FONT>...07 2.8. <BODY> ...08 2.9. <IMG> ...08 2.10. <BGSOUND> ...09 2.11. <EMBED> ...10 2.12. <MARQUEE> ...10 2.13. <!—GHI CHÚ-->...10 2.14. <BIG – SMALL>...11 2.15. <SUP – SUB> ...11 2.16. <STRIKE> ...11 2.17. <CODE> ...11 2.18. <EM> ...12 2.19. <STRONG> ...12 2.20. <BLOCKQUOTE> ...12 2.21. <PRE> ...12 2.22. <DIV – SPAN> ...13 2.23. Các ký tự dặc biệt...14 2.23.1. Lớn hơn: > ...14 2.23.2. Nhỏ hơn: <...14 2.23.3. Cặp nháy: " ...14 2.23.4. Ký tự và &: &...14 2.23.5. Ký tự khoảng trắng: ...14
3. Siêu liên kết – Hình ảnh ...15
3.1. Siêu liên kết...15
3.2. Các loại liên kết...15
3.3. Tạo siêu liên kết ...15
3.4. Liên kết ñến các phần trong cùng 1 trang ...16
3.5. Liên kết với Bookmark của trang khác ...17
3.6. Liên kết ñến hộp thư...18
3.7. Hình ảnh trên trang web...18
3.7.1. Các loại ảnh ...18
3.7.2. Chèn hình ảnh...18
3.7.3. Các thuộc tính của ảnh ...19
3.7.4. Hình nền ...21
4. Danh sách ...22
4.1. Danh sách không có thứ tự (Unorder List – UL) ...22
4.2. Danh sách có thứ tự ( OrderList – OL) ...23
4.3. Danh sách ñịnh nghĩa ...25 5. Bảng – Trình bày ...26 5.1. Bảng ...26 5.1.1. Thuộc tính của bảng ...27 5.1.2. Thuộc tính của cột...28 5.2. Trình bày trang...30 6. Frame ...33
6.1. Giới thiệu Frame (Khung)...33
6.2. Cách tạo một Frame Layout...33 6.2.1. Tạo Frane theo dòng ...33 6.2.2. Tạo Frame theo cột ...34 6.3. Các thuộc tính của Frame...35 6.4. Liên kết Frame ...35 6.5. Phân tử NoFrames...36 6.6. Phân tử Iframe...36 7. Form...37 7.1. Giới thiệu Form...37 7.2. Các phần tử của Form ...37
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT 7.2.1. Input Boxes ...37 7.2.2. Selection List...41 7.2.3. TextArea...43 7.2.4. Nhãn ...44 7.2.5. Fieldset ...44
8. CSS – Cascading Style Sheet ...47
8.1. Giới thiệu...47 8.2. Phân loại – cách tạo ...47 8.2.1. Inline Style...47 8.2.2. Internal Style ...48 8.2.3. External Style ...48 8.3. ðịnh bảng mẫu cho lớp (Class)...49 8.4. ðịnh các tag riêng biệt ...50 8.5. Tạo các tag tùy ý ...51 8.5.1. Tạo Tag cấp khối tùy ý ...51
8.5.2. Tạo tag trong hàng tùy ý...52
8.6. Các thuộc tính ñịnh dạng ...53 9. Dreamweaver ...55 9.1. Giới thiệu...55 9.2. Giao diện ...55 9.2.1. Insert Bar ...55 9.2.2. Document Toolbar...56 9.2.3. Properties Inspector ...56 9.2.4. Panel Groups ...56 9.2.5. Status Bar...56