Bài giảng Thiết kế web - Phạm Đào Minh Vũ

op border + bottom border + top margin + bottom margin Ví dụ CSS border (1) ü border-style : qui định kiểu border : CSS border (2) ü border-width : qui định chiều dày của border CSS border(3) ü border-color : qui định màu cho border CSS border (4) ü Tiếp đầu ngữ : border-left , border-top, border- right, border-bottom dùng kèm với width, color, style để qui định độ dày, màu sẵc, kiểu của border trái, trên, phải, dưới. CSS border (5) ü Ghi tắt – border : solid 1px red; – border : dotted 5px #FFEE00; CSS margin ü margin-left , margin-top,margin-right, margin-bottom : dùng để qui định margin của bên trái, trên, phải và dưới ü Giá trị của margin : – auto : trình duyệt tự động quyết định – px, em : độ dài bằng pixel hay em – % độ dài bằng phần trăm CSS margin(2) CSS margin(3) – Viết tắt ü margin:25px 50px 75px 100px; – top margin is 25px – right margin is 50px – bottom margin is 75px – left margin is 100px ü margin:25px 50px 75px; – top margin is 25px – right and left margins are 50px – bottom margin is 75px – margin:25px 50px; – top and bottom margins are 25px – right and left margins are 50px – margin:25px; – all four margins are 25px CSS padding ü padding-left , padding-top, padding-right, padding-bottom : dùng để qui định padding của bên trái, trên, phải và dưới ü Giá trị của padding: – px, em : độ dài bằng pixel hay em – % độ dài bằng phần trăm CSS padding (2) CSS padding (3) ü padding:25px 50px 75px 100px; – top padding is 25px – right padding is 50px – bottom padding is 75px – left padding is 100px ü padding:25px 50px 75px; – top padding is 25px – right and left paddings are 50px – bottom padding is 75px ü padding:25px 50px; – top aand bottom paddings are 25px – right and left paddings are 50px ü padding:25px; – all four paddings are 25px CHƯƠNG 5 CSS ADVANCED CSS Display ü Thuộc tính display qui định cách 1 element hiển thị. ü Thuộc tính visibility qui định 1 element sẽ được hiển thị hay ẩn đi Ẩn element ü Ta có thể ẩn 1 element bằng cách sử dụng : – display:none; – visibility :hidden; ü visibility:hidden; ẩn element nhưng khoảng không tại vị trí element vẫn được giữ nguyên ü display:none; element sẽ không chiếm giữ bất kỳ khoảng không nào. Trình duyệt sẽ hiển thị như không có element này. Demo ẩn element ü DisplayHidden.html Demo ẩn element Block và inline element ü Block element là 1 element khi hiển thị sẽ chiếm toàn bộ chiều ngang có thể và có xuống dòng phía trước và phía sau nó. – Ví dụ block element : ,,, ü Inline element là 1 element khi hiển thị chỉ chiếm đủ chiều ngang để hiển thị nội dung, và không có xuống dòng phía trước hay phía sau – Ví dụ inline element : , ü Ta có thể thay đổi cách hiển thị mặc định của 1 element sử dụng display: – display:inline; – display:block; Demo đổi kiểu hiển thị ü DisplayBlockInline.html CSS position ü Các thuộc tính CSS position cho phép : – Qui định vị trí của các Element. Ta có thể đặt vị trí xuất hiện ở bất cứ nơi nào tùy thích. – Thậm chí đặt 1 element phía trên hay phía dưới 1 element khác. – Hoặc qui định cách hiển thị khi nội dung element lớn vượt quá kích thước của element – Thuộc tính Position có 4 kiểu : position-static, position-fixed, position-relative, position- absolute Position-static – position:static : là kiểu hiển thị mặc định của trình duyệt. Các element sẽ hiển thị theo kiểu bình thường. Element nào xuất hiện trước sẽ ở phía trên, rồi đến các element kế tiếp Fixed position Ø position:fixed; => element sẽ có vị trí tương đối so với cửa sổ trình duyệt. Nó thậm chí không bị di chuyển khi cửa sổ bị cuộn ü Lúc này ta kết hợp với các thuộc tính left, right, top, bottom để qui định các element sẽ cách bên trái, phải, trên hoặc dưới của cửa sổ bao nhiêu pixel – Lưu ý : IE chỉ hỗ trợ fixed postioned khi HTML có thẻ !DOCTYPE – fixed element sẽ bị loại khỏi cách hiển thị thông thường. Trình duyệt sẽ hiển thị vị trí các element khác như không có fixed element Demo fixed element ü PositionFixed.html Relative position ü position:relative; => element sẽ có vị trí tương đối so với vị trí của nó lúc hiển thị bình thường (static) ü Nội dung của relative position có thể di chuyển đè lên các element khác (tùy thuộc vào thuộc tính left, right, top, bottom) nhưng khoảng không dành cho element này vẫn được giữ lại. Demo relative element ü PositionRelative.html Absolute position ü position:absolute; => Element sẽ nhận giá trị tuyệt đối và có vị trí không đổi khi thu giảm hoặc tăng kích thướt trình duyệt ü các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu Demo absolute position ü AbsolutePosition.html Overlap element ü Nếu 2 element bị chồng lên nhau(overlap) khi hiển thị thì ta có thể sử dụng thuộc tính z-index để qui định element nào sẽ được nằm trên ü Giá trị z-index là 1 số nguyên (có thể âm) ü z-index càng cao thì sẽ nằm trên. Demo overlap ü PositionOverlap.html CSS Float ü Với CSS float, 1 element có thể trôi về bên trái hoặc bên phải để cho các element khác có thể nằm bao quanh nó CSS Float – Đặc điểm ü CSS float rất hữu ích khi hiển thị ảnh hoặc làm layout ü 1 float element sẽ trôi về bên trái hoặc phải cho đến khi đụng biên hoặc 1 element khác ü Các element phía sau 1 float element sẽ nằm bao quanh nó ü Các element phía trước 1 float element sẽ không bị ảnh hưởng Demo float ü Float.html Tắt float ü Các element phía sau sẽ tự động bao quanh float element. Để tránh chuyện này xảy ra ta có thể thêm thuộc tính clear – clear:left; => không cho float bên trái – clear:right; => không cho float bên phải – clear:both; => không cho float cả 2 bên Demo float clear ü FloatClear.html Align ü Ta có thể align 1 block element sử dụng : – margin – position ü Nếu muốn align text sử dụng thuộc tính text-align Align giữa ü Ta có thể align 1 block element chính giữa bằng cách – Đặt width – Đặt margin-left và margin-right là auto ü Ví dụ : Align trái, phải ü Để align trái 1 element ta : – Đặt position: absolute; – Đặt left : 0px; ü Để align phải 1 element ta : – Đặt position: absolute; – Đặt right: 0px; Demo align block left,right,center Demo cách tạo navigation bar ngang ü Là dạng CSS thông thường dùng để tạo Menu cho trang web. div.horizontal a { ü Code CSS display: block; div.horizontal { width: 86px; width: 100%; } height: 63px; } div.horizontal a:link, div.horizontal a:visited { font-weight: bold; div.horizontal ul { color: #FFFFFF; list-style-type: none; background-color: #98bf21; margin: 0; text-align: center; padding: 0; padding: 4px; } text-transform: uppercase; } div.horizontal li { float: left; div.horizontal a:hover, div.horizontal a:active { } background-color: #7A991A; } Demo cách tạo navigation bar dọc HTML file Demo: Navigation Bar Home News Articles Forum Contact About Làm 1 gallery Image sprite ü Khi 1 trang web sử dụng nhiều ảnh thì cần nhiều yêu cầu gửi tới server để xử lý => làm sao để giảm số lần gửi yêu cầu ảnh về server??? ü Image sprite : Là cách nhóm các ảnh đơn lại với nhau để tạo thành 1 ảnh duy nhất. ü Khi đó chỉ cần 1 yêu cầu là có thể đáp ứng được yêu c Demo image sprite ü ImageSprite.html Opacity ü Ta có thể làm mờ đi 1 hình ảnh bằng cách sử dụng thuộc tính : – opacity :1.0; (cho FF) – filter:alpha(opacity=100); (cho IE) ü 1.0 (100) : Không trong suốt ü 0.0 (0) : Trong suốt hoàn toàn (không thể nhìn thấy) Demo image opacity ü ImageOpacity CHƯƠNG 6 JAVASCRIPT Giới thiệu Javascript ü Javascript là 1 ngôn ngữ hướng đối tượng dùng để xử lý các thành phần HTML trong 1 trang web ü Javascript chạy trên phía client (trên trình duyệt – IE,FF,Opera,Chrome ...) ü Javascript được tạo ra năm 1995 bởi Brendan Eich của Netscape (Mozilla hiện tại) dưới tên Mocha, sau đó đổi thành Livescript rồi Javascript. Đặc điểm javascript ü Là ngôn ngữ hướng đối tượng. Ta có thể tạo, sử dụng các đối tượng ü Javascript sử dụng trình biên dịch được tích hợp với trình duyệt, được hỗ trợ bởi hầu hết các trình duyệt kể cả trên mobile ü Cú pháp Javascript tương đồng với C/C++ và Java nên dễ viết, dễ học Cách viết Javascript ü Có 2 cách viết Javascript : – Cách 1 : Nhúng đoạn javascript vào trong file HTML – Cách 2 : Viết javascript thành 1 file riêng có đuôi .js và liên kết với file HTML Nhúng javascript vào HTML ü Ta sử dụng thẻ có như sau để chèn đoạn mã Javascript vào bất kỳ nơi nào trong file HTML ( và ) : Mã_nguồn_Javascript ü Ví dụ : Tạo file .js ü Ta sử dụng thẻ với thuộc tính src để liên kết 1 file javascript vào HTML : <script language=“javascript” src=“myscript.js”> ü Ví dụ : Cú pháp Javascript ü Lệnh đơn : mỗi lệnh đơn kết thúc bằng ; ü Khối lệnh : được bao bằng { } ü Chú thích : // và /* .. */ ü Cấu trúc điều khiển : – Rẽ nhánh : if, else, switch – Lặp : for, while, do... while, for ... in Biến trong javascript ü Javascript không cần khai báo biến vẫn có thể sử dụng được ü Tên biến phân biệt hoa thường, phải bắt đầu bằng kí tự hoặc gạch dưới ( _ ) ü Biến nếu được khai báo thì không cần khai báo kiểu : – var a; – a = 10; ü Một biến có thể chứa bất kỳ giá trị nào (nguyên, thực , chuỗi ...) Tầm vực của biến ü Tầm vực là tầm ảnh hưởng của biến : – Biến toàn cục : được khai báo ngoài các hàm.Biến có tác dụng từ vị trí khai báo cho đến cuối chương trình – Biến cục bộ : được khai báo trong hàm. Biến chỉ có tác dụng trong hàm được khai báo. ü Nếu trong hàm, biến cục bộ trùng tên với biến toàn cục thì biến cục bộ sẽ được sử dụng Kiểu dữ liệu ü Biến trong javascript không cần khai báo kiểu dữ liệu ü Khai báo biến kiểu số : – a = 1.4; b = 2 ü Khai báo biến kiểu chuỗi : – str = ‘Chuỗi dùng dấu nháy đơn’ ; str2 = “Dấu nháy kép” ü Khai báo biến boolean – var dung = true,sai = fase; ü Khai báo biến null – obj = null Phép toán Phép gán Phép so sánh Phép toán logic Phép toán + ü Phép + trên 1 chuỗi sẽ cho ra chuỗi. ü Ví dụ : s = “Chào các bạn” + “sinh viên ITC” Kí tự đặc biệt ü Các kí tự đặc biệt muốn xuất hiện trong chuỗi phải escape : – \n : new line – \t : tab – \b : BackSpace – \& : dấu & – \”: dấu “ Kí tự đặc biệt Cấu trúc rẽ nhánh ü if , else : if (n % 2 == 0) document.write(“Chẳn”); else document.write(“Lẻ”); ü switch : switch (n) { case 2 : document.write(“Thứ 2”); break; case 3 : document.write(“Thứ 3”); break; } Cấu trúc lặp ü for var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write(""); } ü while var i=0; while (i<=5) { document.write("The number is " + i); document.write(""); i++; } Cấu trúc lặp ü for ... in var x; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars) { document.write(mycars[x] + ""); } Hàm ü Cú pháp : function functionName(var1,var2,...,varX) { //some code } ü Hàm không được thực thi khi trang web được load ü Hàm chỉ thực thi khi được gọi (ví dụ trong sự kiện hoặc trực tiếp) ü Hàm có thể đặt ở trong hoặc nhưng nên đặt trong . Nó sẽ luôn được nạp trước khi gọi Ví dụ hàm Hàm trả về giá trị ü Từ khóa return dùng để trả về giá trị cho hàm ü Cú pháp : function functionName(var1,var2,..., varX) { //some code return value; } Ví dụ hàm trả về giá trị Các hàm thông dụng – hàm alert() ü alert ( “Nội dung thông báo”) : hiển thị hộp thoại thông báo có 1 nút OK. Hàm prompt ü prompt (“Thông báo”, Giá_trị_mặc_định) : hiển thị hộp thoại với câu thông báo và 2 nút OK, Cancel và một textfield cho phép người dùng nhập vào 1 giá trị. ü Nếu người dùng nhấn OK, hàm prompt() sẽ trả về chuỗi được nhập, ngược lại giá_trị_mặc_địch sẽ trả về Hàm Hàm confirm() ü confirm(“Thông báo”) : là hàm dùng để xác nhận lại thông tin, hiển thị câu thông báo với 2 nút OK, Cancel. ü confirm() trả về giá trị true nếu OK được nhấn và false nếu Cancel được nhấn Hàm confirm() – ví dụ Hàm document.write() ü Hàm document.write(“Chuỗi”) : dùng để ghi 1 chuỗi ra trang HTML ü document.writeln(“Chuỗi”) : ghi chuỗi ra và kết thúc bằng ký tự xuống dòng. Hàm này nên đi kèm với thẻ để giữ lại kí tự xuống dòng ü Ví dụ : – document.write(“Hello world”); – document.writeln(“Hello world”); Hàm eval() ü Hàm eval(“Chuỗi”) : Chuyển đổi giá trị chuỗi thành giá trị số ü Ví dụ Hàm parseInt() ü parseInt(“Chuỗi”,[radix]) : hàm đổi chuỗi ra số nguyên với cơ số là tham số radix. ü Nếu Chuỗi gồm các kí số rồi đến kí tự (123abc) thì các kí tự sẽ bị bỏ qua (trả về 123) ü Nếu Chuỗi bắt đầu không phải kí số thì parseInt sẽ trả về NaN (Not a Number) Hàm parseFloat() ü parseFloat (“Chuỗi”) : hàm đổi chuỗi ra số thực ü Nếu Chuỗi gồm các kí số rồi đến kí tự (123abc) thì các kí tự sẽ bị bỏ qua (trả về 123) ü Nếu Chuỗi bắt đầu không phải kí số thì parseFloat sẽ trả về NaN (Not a Number) Hàm isNaN() ü isNaN(“Chuỗi”) : hàm kiểm tra xem 1 chuỗi có phải là số không ? Nếu là số trả về false, ngược lại true Event ü Sử dụng javascript ta có thể tạo các trang web động ü Event là các sự kiện phát sinh khi người dùng tương tác với các element trong trang web ü Mỗi element có 1 số các sự kiện riêng có thể kích hoạt javascript ü Một số các ví dụ : – 1 cú click chuột – 1 trang web hay 1 hình ảnh đang được nạp – Di chuyển chuột lên trên 1 element – Chọn 1 ô text field trong HTML – Gởi dữ liệu trong form HTML – Nhấn phím Event – Cấu trúc phân cấp Ví dụ event ü Một số sự kiện tiêu biểu onBlur Xảy ra khi control mất focus onClick Xảy ra khi người dùng kích vào các thành phần hay liên kết của form. onChange Xảy ra khi giá trị của thành phần được chọn thay đổi onFocus Xảy ra khi thành phần của form được focus. onLoad Xảy ra trang Web được tải. onMouseOver Xảy ra khi di chuyển chuột lên trên control onSelect Xảy ra khi người sử dụng lựa chọn một trường nhập dữ liệu trên form. onSubmit Xảy ra khi người dùng chuyển dữ liệu về server (bấm vào nút submit). onUnLoad Xảy ra khi người dùng đóng trang Các sự kiện của một vài đối tượng Đối tượng Chương trình xử lý sự kiện có sẵn Selection list onBlur, onChange, onFocus Text onBlur, onChange, onFocus, onSelect Textarea onBlur, onChange, onFocus, onSelect Button onClick Checkbox onClick Radio button onClick Hypertext link onClick, onMouseOver, onMouseOut Clickable Imagemap area onMouseOver, onMouseOut Reset button onClick Submit button onClick Document onLoad, onUnload, onError Window onLoad, onUnload, onBlur, onFocus Framesets onBlur, onFocus Form onSubmit, onReset Image onLoad, onError, onAbort Ví dụ event Event Handler <BODY onLoad="alert('Welcome to my page!');" onUnload="alert('Goodbye! ');"> Ví dụ event <input type="text" onblur="alert('Sự kiện ONBLUR')" onclick="alert('Sự kiện ONCLICK');" onchange="alert('Sự kiện ONCHANGE');" onkeypress="alert('Sự kiện KEYPRESS');"/> function a_plus_b(form) { a=eval(form.a.value) b=eval(form.b.value) c=a+b form.ans.value = c } function a_minus_b(form) { a=eval(form.a.value) b=eval(form.b.value) c=a-b form.ans.value=c } CHƯƠNG TRÌNH TÍNH TOÁN Nhập số a : Nhập số b : Kết quả : Ví dụ event CHƯƠNG 7 JAVASCRIPT MÔ HÌNH DOM Nội dung § DOM (Document Object Model) : Là một mô hình chuẩn cho phép ngôn ngữ lập trình có thể truy xuất và thay đổi động nội dung, cấu trúc, định dạng của 1 văn bản. § HTML DOM : là mô hình chuẩn cho văn bản HTML § Toàn bộ trang là document node § Mỗi thẻ là 1 HTML node § Văn bản trong 1 thẻ là text node § Các thuộc tính trong thẻ là các attribute § Thông qua HTML DOM, ta có thể lấy, thay đổi, thêm hay xóa bất kỳ 1 element nào trong trang web 303 Ví dụ HTML DOM My Title my link My header 304 Ví dụ Cây HTML § HTML DOM coi trang HTML là 1 cây 305 Quan hệ giữa các node § Các node trong cây HTML có mối quan hệ phân cấp với nhau § Các từ cha, con, anh em dùng để mô tả các mối quan hệ này. Các node cha có các node con, các node anh em là các node có cùng cấp § Trong 1 cây HTML, node trên cùng là root (gốc) § Mọi node (trừ root) đề có duy nhất 1 node cha § 1 node có thể có nhiều node con § Node lá là node không có node con § Node anh em là node có cùng node cha 306 Mô hình quan hệ giữa các node Quan hệ giữa các node Lấy 1 node Mỗi node trong HTML là 1 đối tượng. Ta có thể lấy đối tượng bằng cách : § X.getElementById ( id) : lấy element có id cung cấp trong node X § X.getElementByTagName( name) : lấy danh sách các element có name cung cấp trong node X 309 Thuộc tính 1 node § X.innerHTML : văn bản trong X § X.nodeName : tên của X § X.nodeValue : giá trị của X § X.parentNode : node cha của X § X.childNodes : các node con của X § X.attributes : các thuộc tính của X § X.firstChild : node con đầu tiên của X § X.lastChild : node con cuối của X Trong đó X là 1 node trong HTML DOM innerHTML vs outerHTML a outerHTML Hello World innerHTML Ví dụ innerHTML Thêm, xóa 1 node § X.appendChild ( Y) : thêm node Y vào làm con node X § X.removeChild ( Y ) : xóa node Y ra khỏi con node X § document.createTextNode(“Text”) : tạo 1 node văn bản § document.createElement(TagName) : tạo 1 node có là thẻ Làm việc với thuộc tính Ta có thể thêm, xóa, cập nhật thuộc tính của 1 node như sau : § X.getAttribute(“Attribute name”) : Lấy giá trị 1 attribute § X.setAttribute(“Attribute name”,”Attribute value”) : Thêm hay set lại giá trị 1 attribute § X.removeAttribute(“Attribute name”) : Xóa 1 attribute Ví dụ Định dạng node § Các node biểu diễn 1 thẻ đều có thuộc tính style dùng để định dạng § Cách thay đổi định dạng 1 node : Thay đổi background Ví dụ Thay đổi border, margin, padding Ví dụ Thay đổi font Kham khảo § Javascript Tutorial : § HTML DOM Tutorial : § Javascript & DOM example : § HTML DOM Style Object : Hàm thiết lập thời gain § setTimeout(“javascript command”, delayTime) : hàm cho phép thực thi 1 lần 1 câu lệnh hay hàm sau 1 khoảng thời gian tính bằng milisecond. Hàm trả về 1 id và id này dùng cho hàm clearTimeOut() để dừng việc thực thi § clearTimeout(id) : dừng việc thực thi § setInterval(“javascript command”, delayTime) : hàm cho phép thực thi liên tục sau 1 khoảng thời gian § clearInterval(id) : dừng việc thực thi liên tục Ví dụ Tài liệu tham khảo ü Phạm Đào Minh Vũ - Giáo Trình bài giảng Thiết kế web – Trường CĐ CNTT TPHCM ü Phạm Thị Nhung - Lập trình web với HTML và JavaScript – NXB ĐH Quốc Gia TPHCM ü Các giáo trình bằng tiếng Anh. ü ü ü ü