Thiết kế website với HTML và CSS - Bai giang thiet- 123docz.net

3.3.1. Thiết kế bố cục

Việc sử dụng DIV kết hợp với CSS để làm layout (bố cục) cho một trang web đã trở lên phổ biến và đạt hiệu quả cao. Ví dụ thiết kế một trang có giao diện đƣợc thiết kế với layout nhƣ sau:

Với layout nhƣ trên hoàn toàn bạn có thể sử dụng table (bảng) cho việc thiết kế, tuy nhiên table lại bộc lộ khá nhiều nhƣợc điểm khi sử dụng làm layout cho một trang web có cấu trúc nhƣ trên. Các nhƣợc điểm có thể gặp phải với table với những dạng layout này là chậm, khó tùy chỉnh và khó kết hợp với CSS\Javascript để tạo lên sự linh hoạt cho trang web.

Sau đây là các bƣớc căn bản nhất để có thể tạo đƣợc các layout với DIV và CSS. Trƣớc hết cần tạo mới một trang HTML với cấu trúc chuẩn (gồm đầy đủ các phần html, head, title, body). Tiếp theo bạn code đoạn mã HTML sau vào phần body của trang.

Các cặp thẻ trong đoạn mã trên giúp tạo ra các phân vùng khác nhau trên trang HTML của mình, mỗi phân vùng đƣợc đánh ID riêng biệt (các ID này sẽ dùng để định nghĩa CSS), chi tiết nhƣ sau:

1. main: Phân vùng chứa toàn bộ nội dung của trang.

2. head: Phân vùng chứa nội dung đầu tiên của trang (theo VD trên đó là phần logo + banner)

3. head-link: Phân vùng chứa các liên kết đầu trang (ở VD trên: Home, Students, Course, v.v.)

4. left: Phân vùng chứa các nội dung bên trái (ở VD trên là các liên kết trái)

5. content: Phân vùng chứa các nội dung chính của trang (ở VD trên là các phân vùng thông tin nhƣ: Hot news, Photo Slide, News 1, v.v.)

6. right: Phân vùng chứa các thông tin bên phải trang (ở VD trên là lịch, biểu đồ, bản đồ)

7. footer: Phân vùng chứa các thông tin cuối trang (ở VD trên là thông tin về chủ sở hữu và các liên kết)

Tiếp theo code các bộ chọn CSS (selector) để phân vùng rõ ràng cho các DIV đã tạo ở trên:

1. Tạo bộ chọn body để cố định phông chữ cho cả trang và bộ chọn #main để cố định độ rộng vùng thông tin và trang sẽ chiếm và căn chỉnh vùng này nằm giữa màn hình.

1. Tạo bộ chọn #head xác định chiều cao, màu nền, đƣờng viền và khoảng cách so với các vùng khác (khoảng cách so với vùng bên dƣới – margin-bottom).

2. Kiểm tra lại trang trên trình duyệt bạn sẽ có kết quả sau (phần div với id là head đã đƣợc xác định):

3. Tiếp tục với định nghĩa bộ chọn #head-link, để xác định vùng đặt các liên kế đầu trang:

4. Quan sát lại trang trên trình duyệt, bạn sẽ thấy vùng liên kết đầu trang hiển thị ngay dƣới phần head.

5. Định nghĩa tiếp bộ chọn #left để xác định vùng cho nội dung bên trái, với độ rộng là 200px, chiều cao tối thiểu là 400px và đặc biệt chú ý tới mô tả float: left; mô tả này làm cho vùng bên trái (DIV với ID là left) sẽ dạt sang bên trái nhƣờng chỗ cho các phân vùng khác: content và right).

8. Bổ sung tiếp các selector cho vùng giữa và vùng phải lần lƣợt là #content và

#right:

10.Cuối cùng, định nghĩa bộ chọn cho phân vùng cuối trang với id là #footer

11.Quan sát lại trang trên trình duyệt bạn sẽ thấy các phân vùng cần thiết đã vào đúng vị trí cần đặt:

Nhƣ vậy qua các bƣớc ở trên chúng ta đã thử nghiệm với các phƣơng pháp cơ bản để dàn trang sử dụng thẻ Div có sự kết hợp với CSS. Điều quan trọng nhất là biết

cách áp dụng những kỹ thuật cơ bản này để tạo ra các trang web có layout mà khách hàng mong muốn.

3.3.2. Giới thiệu kỹ thuật CSS Sprite

Kỹ thuật này sẽ giúp chúng ta có cách nhìn đầy đủ hơn về quy trình xây dựng một trang web lớn nhƣ thế nào bởi việc tối ƣu hóa dữ liệu, giúp tăng tốc website và đồng thời nâng cao khả năng chịu đựng của webserver trƣớc những lƣợt truy cập lớn.

Thƣờng các trang Web nhỏ và vừa, các nhà thiết kề thƣờng cắt nhỏ các icon, tuy nhiên với các trang web lớn, có lƣợng truy cập nhiều việc làm này khá nguy hiểm vì gây nghẽn mạng. Chúng ta cần giải pháp để khắc phục để đảm bảo tối ƣu khi sử dụng css, sử dụng 1 tấm hình lớn và sử dụng background-position để lấy vị trí các tầm hình.

Kỹ thuật CSS Sprite là kỹ thuật gom tất cả icon về một tấm hình, sau đó sử dụng background- position để lấy từng tầm hình. Cách sử dụng - Lấy icon:  Cần 1 tầm hình trắng blank.gif  Tấm hình có nhiều icon Ví dụ: <!DOCTYPE html> <html >

</html>

Mỗi tấm hình có chiều rộng và chiều dài là 32px. Chỉ cần thay đổi tọa độ, chúng ta có thể lấy đƣợc các icon.

Cách tạo hình có chứa icon bằng sprite me. Sử dụng trình duyệt Firefox, truy cập vào website

http://spriteme.org/ sử dụng spriteme để tạo tấm hình có chứa các icon.

3.3.3. Kỹ thuật tô màu trong layout

Sử dụng background tùy biến dựa theo nội dung trong một layout thiết kế bởi CSS. Ví dụ:

Chương 4. Ngôn ngữ kịch bản JAVASCRIPT 4.1.Tổng quan về ngôn ngữ kịch bản JavaScript

4.1.1. Giới thiệu ngôn ngữ JavaScript

Javascript là ngôn ngữ kịch bản phổ biến nhất trên thế giới hiện nay. Nó là ngôn ngữ chuẩn đƣợc sử dụng trong các trang web cũng nhƣ cho các ứng dụng desktop, mobile. Javascript đƣợc thiết kế thêm các tƣơng tác tới các trang html.

Vậy thế nào là ngôn ngữ kịch bản? Ngôn ngữ kịch bản là ngôn ngữ lập trình nhẹ hỗ

trợ việc viết kịch bản. Kịch bản ở đây là các dòng code có thể đƣợc thông dịch và thực thi nhanh chóng với các bƣớc liên kết và biên dịch rõ ràng.

Javascript có thể làm những gì?

- Javascript cung cấp 1 công cụ lập trình cho các nhà thiết kế web html. - Javascript có thể thao tác html (đọc và thay đổi nội dung của các thẻ html). - Javascript có thể thao tác với CSS (đọc và thay đổi định dạng của các thẻ html). - Javascript có thể xác định tính hợp lệ của dữ liệu (validate data).

- Javascript có thể lƣu trữ dữ liệu.

- Javascript có thể thực hiện lại các sự kiện

Javascript và Java

Javascript và java là 2 ngôn ngữ hoàn toàn khác biệt cả về khái niệm và thiết kế. Java do Sun phát triển và là ngôn ngữ lập trình phức tạp giống nhƣ C và C++. Javascript là ngôn ngữ đơn giản đƣợc tạo ra bởi Brendan Eich ở Netscape, hiện đƣợc tiếp tục phát triển.

4.1.2. Đưa mã JavaScript vào trang HTML

Nội dung của javascript đƣợc đặt trong cặp thẻ <script></script>.

Nội dung của javascript có thể đƣợc đặt trong thẻ <body> và phần <head> của trang web, hay có thể đƣợc đặt riêng ra 1 file .js

Ví dụ:

- Nội dung của javascript được đặt trong phần <head> của trang html: <html>

<head>

function myFunction(){

document.getElementById("demo").innerHTML="My First JavaScript Function";

}

</script> </head> (adsbygoogle = window.adsbygoogle || []).push({});

<body>

<p id="demo">A Paragraph</p>

</body> </html>

- Nộidung của javascript được đặt trong phần <body> của trang html: <html>

<body>

<p id="demo">A Paragraph</p>

function myFunction() {

document.getElementById("demo").innerHTML="My First JavaScript Function"; }

</script> </body> </html>

- Nội dung được lưu vào file .js và được nhúng vào trang:

</html>

4.1.3. Biến và đối tượng

 Khai báo không tường minh: ten_bien = bieu_thuc;

 Khai báo tường minh:

- Khai báo biến và không khởi tạo giá trị: var ten_bien;

- Khai báo biến và khởi tạo giá trị ban đầu: var ten_bien = bieu_thuc; Quy tắc đặt tên biến:

- Ký tự bắt đầu phải là một chữ cái hoặc dấu gạch dƣới ―_‖ - Trong tên biến không chứa khoảng trắng và các kỹ tự đặc biệt

Các biến phân biệt chữ hoa, chữ thƣờng. Ví dụ:

var answer1="He is called 'Johnny'"; var answer2='He is called "Johnny"'; var pi=3.14;

var x=123; var y=123e5; var z=123e-5;

var cars=new Array("Saab","Volvo","BMW");

4.1.4. Các toán tử - Gán (=)

Ví dụ: x = a+b

Kiểu gán thông thường Kiểu gán rút gọn

x = x+y x+=y x = x-y x-=y x = x/y x/=y x = x%y x%=y - So sánh Toán tử Ý nghĩa = = So sánh bằng != So sánh không bằng > So sánh lớn hơn >= So sánh lớn hơn hoặc bằng < So sánh nhỏ hơn <= So sánh nhỏ hơn hoặc bằng - Số học (adsbygoogle = window.adsbygoogle || []).push({});

Cộng(+), trừ (-), nhân (*), chia(/), lấy phần dƣ (%)

 bien++ (hoặc: ++bien) tăng giá trịcủa bien lên 1

bien - -(hoặc: - -bien) giảm giá trị của biến đi 1

- Chuỗi

Để nối chuỗi sử dụng toán tử ―+‖ Ví dụ: ―Hà‖+‖ ‖+‖Nội‖ đƣợc ―Hà Nội‖ - Logic - Phép && (phép và) - Phép || (phép hoặc) - Phép ! (phủ định) - Đối tượng

new: toán tử khai báo biến kiểu đối tƣợng

- Các toán tử trên bit (Bitwise)

Với các toán tử thao tác trên bit, đầu tiên giá trị đƣợc chuyển dƣới dạng số nguyên 32 bit, sau đó lần lƣợt thực hiện các phép toán trên từng bit.

& Toán tử bitwise AND, trả lại giá trị 1 nếu cả hai bit cùng là 1.

| Toán tử bitwise OR, trả lại giá trị 1 nếu một trong hai bit là 1.

^ Toán tử bitwise XOR, trả lại giá trị 1 nếu hai bit có giá trị khác nhau

Ngoài ra còn có một số toán tử dịch chuyển bitwise. Giá trị đƣợc chuyển thành số nguyên 32 bit trƣớc khi dịch chuyển. Sau khi dịch chuyển, giá trị lại đƣợc chuyển thành kiểu của toán hạng bên trái. Sau đây là các toán tử dịch chuyển:

<< Toán tử dịch trái. Dịch chuyển toán hạng trái sang trái một số lƣợng bit bằng toán hạng phải. Các bit bị chuyển sang trái bị mất và 0 thay vào phía bên phải. Ví dụ: 4<<2 trở thành 16 (số nhị phân 100 trở thành số nhị phân 10000)

>> Toán tử dịch phải. Dịch chuyển toán hạng trái sang phải một số lƣợng bit bằng toán hạng phải. Các bit bị chuyển sang phải bị mất và dấu của toán hạng bên trái đƣợc giữ nguyên. Ví dụ: 16>>2 trở thành 4 (số nhị phân 10000 trở thành số nhị phân 100)

>>> Toán tử dịch phải có chèn 0. Dịch chuyển toán hạng trái sang phải một số lƣợng bit bằng toán hạng phải. Bit dấu đƣợc dịch chuyển từ trái (giống >>). Những bit đƣợc dịch sang phải bị xoá đi. Ví dụ: -8>>>2 trở thành 1073741822 (bởi các bit dấu đã trở thành một phần của số). Tất nhiên với số dƣơng kết quả của toán tử >> và >>> là giống nhau.

Có một số toán tử dịch chuyển bitwise rút gọn:

Kiểu bitwise thông thường Kiểu bitwise rút gọn

x = x << y x << = y x = x >> y x - >> y x = x >>> y x >>> = y x = x & y x & = y x = x ^ y x ^ = y x = x | y x | = y 4.1.5. Hàm và gọi hàm Cú pháp:

function ten_ham(các tham số){ //các câu lệnh trong hàm

[return bieu_thuc;] //kết thúc và trả về giá trị cho hàm } 4.1.6. Các hàm có sẵn - eval(st) - Number(st) - parseInt(st, radius) - parseFloat(st, radius) 4.1.7. Các cấu trúc lệnh 4.1.7.1.Câu lệnh rẽ nhánh (1)Câu lệnh if Cú pháp: if (dieu_kien) {

//các câu lệnh nếu dieu_kien đúng; }

else {

//các câu lệnh nếu điều kiện sai; } Ví dụ: var a=3;b=2; var max; if (a>b) { document.write("Số lớn là: " + a); } else { document.write("Số lớn là: " + b); }

(2) Câu lệnh lựa chọn switch

Cú pháp:

switch (bieu_thuc){ case gia_tri_1:

//mã lệnh thực hiện khi bieu_thuc= =gia_tri_1 break;

case gia_tri_2:

//mã lệnh thực hiện khi bieu_thuc= =gia_tri_2 break;

……. (adsbygoogle = window.adsbygoogle || []).push({});

case gia_tri_n:

//mã lệnh thực hiện khi bieu_thuc= =gia_tri_n break;

default:

//mã lệnh thực hiện khi không có giá trị nào phù hợp }

4.1.7.2.Câu lệnh lặp

(1) Câu lệnh for (số lần lặp xác định trước)

Cú pháp:

for (khởi tạo biến đếm; điều kiện; thay đổi giá trị biến đếm){ //các câu lệnh thực hiện trong khi lặp

} Ví dụ: for(i=1;i<=10;i++) { document.writeln(i+"<br>"); }

(2) Câu lệnh lặp while (số lần lặp không xác định trước)

Cú pháp:

while (dieu_kien){

//các câu lệnh thực hiện trong khi lặp } Ví dụ: var i=1; while(i<=10) { document.write(i +"<br>"); i++; }

Trong sơ đồ phân cấp này, các đối tƣợng con chính là các thuộc tính của một đối tƣợng cha. Ví dụ nhƣ một form tên là form1 chính là một đối tƣợng con của đối tƣợng document và đƣợc gọi tới là document.form1

Tất cả các trang đều có các đối tƣợng sau đây:

- navigator: có các thuộc tính tên và phiên bản của Navigator đang đƣợc sử dụng, dùng cho MIME type đƣợc hỗ trợ bởi client và plug-in đƣợc cài đặt trên client.

- window: là đối tƣợng ở mức cao nhất, có các thuộc tính thực hiện áp dụng vào toàn bộ cửa sổ.

- document: chứa các thuộc tính dựa trên nội dung của document nhƣ tên, màu nền, các kết nối và các forms.

- location: có các thuộc tính dựa trên địa chỉ URL hiện thời

- history: Chứa các thuộc tính về các URL mà client yêu cầu trƣớc đó. Sau đây sẽ mô tả các thuộc tính, phƣơng thức cũng nhƣ các chƣơng trình xử lý sự kiện cho từng đối tƣợng trong JavaScript.

Window Texturea Text FileUpload Password Hidden Submit Reset Radio Checkbox Button Select Plugin Mime Type Frame document Location History Layer Link Image Area Anchor Applet Plugin Form navigator Option

4.1.8.1.Đối tượng navigator

Đối tƣợng này đƣợc sử dụng để đạt đƣợc các thông tin về trình duyệt nhƣ số phiên bản. Đối tƣợng này không có phƣơng thức hay chƣơng trình xử lý sự kiện.

Các thuộc tính

appCodeName Xác định tên mã nội tại của trình duyệt (Atlas).

AppName Xác định tên trình duyệt.

AppVersion Xác định thông tin về phiên bản của đối tƣợng navigator.

userAgent Xác định header của user - agent.

Ví dụ

Ví dụ sau sẽ hiển thị các thuộc tính của đối tƣợng navigator <HTML> (adsbygoogle = window.adsbygoogle || []).push({});

<HEAD>

<TITLE> Navigator Object Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript">

document.write("appCodeName = "+navigator.appCodeName + "<BR>"); document.write("appName = "+navigator.appName + "<BR>"); document.write("appVersion = "+navigator.appVersion + "<BR>"); document.write("userAgent = "+navigator.userAgent + "<BR>"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>

4.1.8.2.Đối tượng window

Đối tƣợng window nhƣ đã nói ở trên là đối tƣợng ở mức cao nhất. Các đối tƣợng document, frame, vị trớ đều là thuộc tính của đối tƣợng window.

CÁC THUỘC TÍNH

- defaultStatus - Thông báo ngầm định hiển thị lên trên thanh trạng thái của cửa sổ

- Frames - Mảng xác định tất cả các frame trong cửa sổ. - Length - Số lƣợng các frame trong cửa sổ cha mẹ. - Name - Tên của cửa sổ hiện thời.

- Parent - Đối tƣợng cửa sổ cha mẹ - Self - Cửa sổ hiện thời.

- Status - Đƣợc sử dụng cho thông báo tạm thời hiển thị lên trên thanh thạng thái cửa sổ. Đựơc sử dụng để lấy hay đặt lại thông báo tr ạng thái và ghi đè lên defaultStatus.

- Top - Cửa sổ ở trên cù ng. - Window - Cửa sổ hiện thời. CÁC PHƢƠNG THỨC

- alert ("message") -Hiển thị hộp hội thoại với chuỗi "message" và nỳt OK. - clearTimeout(timeoutID) -Xóa timeout do SetTimeout đặt. SetTimeout trả lại

timeoutID

- windowReference.close -Đóng cửa sổ windowReference.

- confirm("message") -Hiển thị hộp hội thoại với chuỗi "message", nút OK và nút Cancel. Trả lại giá trị True cho OK và False cho Cancel.

- [windowVar = ][window]. open("URL", "windowName", [ "windowFeatures" ] ) - Mở cửa sổ mới.

- prompt ("message" [,"defaultInput"]) - Mở một hộp hội thoại để nhận dữ liệu vào trƣờng text.

- TimeoutID = setTimeout(expression,msec) - Đánh giá bi ểu thức expresion sau thời gian msec.

Ví dụ: Sử dụng tên cửa sổ khi gọi tới nó nhƣ là đích c ủa một form submit hoặc trong một Hypertext link (thuộc tính TARGET của thẻ FORM và A).

Trong ví d ụ tạo ra một cửa sổ thứ hai, nhƣ nút th ứ nhất để mở một cửa sổ rỗng, sau đó m ột liên kết sẽ tải file doc2.html xuống cửa sổ mới đó rồi một nút khác d ựng để đóng của sổ thứ hai lại, ví dụ này lƣu vào file window.html:

<TITLE>Frame Example </TITLE> </HEAD>

<P>

<A HREF="doc2.html" TARGET="window2"> Load a file into window2 </A>

</P>

</FORM> </BODY> </HTML>

CÁC CHƢƠNG TRÌNH XỬ LÝ SỰ KIỆN (adsbygoogle = window.adsbygoogle || []).push({});