Microsoft PowerPoint Phan1 ppt THIẾT KẾ WEB Mục tiêu môn học • Cung cấp các kiến thức cơ bản về thiết kế web như là HTML, CSS, JavaScript cũng như một số công cụ thiết kế web phổ biến như Dreamwaver,[.]
THIẾT KẾ WEB Mục tiêu mơn học • Cung cấp kiến thức thiết kế web HTML, CSS, JavaScript số công cụ thiết kế web phổ biến Dreamwaver, Photoshop, Flash… • Các thành phần trang web • Các bước xây dựng trang web tĩnh • Xây dựng triển khai trang web tĩnh Nội dung mơn học • Phần 1: Các kiến thức – HTML (HyperText Markup Language) – CSS (Cascading style sheets) – Ngơn ngữ JavaScript • Phần 2: Các cơng cụ thiết kế web – – – – Dreamwaver Photoshop Flash Một số công cụ hỗ trợ thiết kế web khác PHẦN CÁC KIẾN THỨC CƠ BẢN MỤC TIÊU • • • • • Mơ hình lớp thiết kế web Các khái niệm thuật ngữ mạng môi trường Web Cấu trúc cú pháp ngôn ngữ HTML Cú pháp thuộc tính CSS (chuẩn định dạng cách trình bày trang web) Tổng quan ngôn ngữ script, cú pháp, cách xử lý kiện thao tác đối tượng HTML ngôn ngữ JavaScript Mơ hình lớp thiết kế web Lớp nội dung/cấu trúc (Content/Structure Layer) Là lớp cung cấp nội dung (thông tin) cho người truy cập Nội dung bao gồm văn bản, hình ảnh, liên kết… Nội dung tổ chức theo cấu trúc ngôn ngữ đánh dấu siêu văn HTML, XHTML… Lớp trình bày/kiểu mẫu (Presentation/Style Layer) Là lớp quy định trình bày nội dung trang web Lớp định nghĩa định dạng hay kiểu mẫu cho thành phần trang web Các định nghĩa thường lưu trữ tập tin riêng theo cú pháp chuẩn định dạng CSS Lớp hành vi (Behavior Layer) Là lớp cho phép thực số hành vi/thao tác thành phần trang web thông qua ngôn ngữ script (JavaScript, VbScript) Mơ hình lớp thiết kế web • Một số lợi ích mơ hình – Chia sẻ tài nguyên (Share resources) Dùng chung tập tin CSS hay JavaScript cho toàn trang website Khi thay đổi tập tin này, toàn site thay đổi – Tốc độ tải nhanh (Faster downloads) Khi người sử dụng truy cập vào trang web, tập tin CSS JavaScript tải lần truy cập đầu tiên, trình duyệt web lưu lại (cached) cho lần truy cập sau – Làm việc nhóm (Multi-person teams) Thuận tiện việc phân chia công việc Các thành viên nhóm phân cơng việc theo lớp mơ hình cơng việc lớp làm song song với Các khái niệm thuật ngữ (Tham khảo www.w3schools.com/site/site_glossary.asp) • WWW (World Wide Web): Mạng tồn cầu máy tính sử dụng Internet để trao đổi tài liệu web • Protocol (Giao thức): Là tập hợp qui tắc thống hai máy tính nhằm thực trao đổi liệu xác • Một số giao thức thông dụng: TCP, HTTP, FTP, SMTP… Các khái niệm thuật ngữ • Web Page: tài liệu (thường tập tin HTML) thiết kế để phân phối mơi trường web • Web Site: tập hợp web page có liên quan cơng ty hay cá nhân • Home Page: web page có mức cao (trang chủ) web site Các khái niệm thuật ngữ • IP Address (Internet Protocol Address): số xác định cho máy Internet Ví dụ: 192.168.1.1… • Domain name: Tên xác định web site Ví dụ: www.huflit.edu.vn • DNS (Domain Name Service): chương chương trình chạy server, chuyển tên miền sang địa IP ngược lại MƠ HÌNH HƯỚNG ĐỐI TƯỢNG • Tính đóng gói (Encapsulation) function MyClass(){ var m_data = 5; this.SetData = SetData; this.ShowData = DisplayData; function DisplayData() function DisplayText() function SetData( myVal ) function SetText( myText ) } var myClassObj1 = new MyClass(); var myClassObj2 = new MyClass(); myClassObj1.SetData( 10 ); myClassObj2.SetData( 20 ); myClassObj1.ShowData(); myClassObj1.ShowText(); myClassObj2.ShowData(); myClassObj2.ShowText(); var m_text = "Hello World"; this.SetText = SetText; this.ShowText = DisplayText; { alert( m_data ); } { alert( m_text ); return; { m_data = myVal; } { m_text = myText; } } Tất thuộc tính phương thức gói gọn khai báo lớp MyClass myClassObj1.SetText( "Obj1: Hello World" ); myClassObj2.SetText( "Obj2: Hello World" ); // displays: 10 // displays: "Obj1: Hello World" // displays: 20 // displays: "Obj2: Hello World" MƠ HÌNH HƯỚNG ĐỐI TƯỢNG • Sự kế thừa (Inheritance) Sử dụng thuộc tính prototype đối tượng để kết hợp thuộc tính đối tương cha REGULAR EXPRESSION • Biểu thức quy (regular expression, viết tắt regexp, regex hay regxp) chuỗi miêu tả chuỗi khác, theo quy tắc cú pháp định • Biểu thức quy thường dùng trình biên tập văn tiện ích tìm kiếm xử lý văn dựa mẫu quy định • Nhiều ngơn ngữ lập trình hỗ trợ biểu thức quy việc xử lý chuỗi (Perl, PHP, Java, C#, JavaScript ) REGULAR EXPRESSION • Tạo đối tượng Regular Expression – Cách 1: Sử dụng regular expression literal (tạo regexp tĩnh) • Cú pháp: /pattern/flags • Ví dụ: var objRegex = /ab+c/i • Cách sử dụng regular expression giữ nguyên không thay đổi từ lúc tạo sử dụng – Cách 2: Sử dụng hàm tạo RegExp Object (tạo regexp động) • Cú pháp: new RegExp("pattern"[, "flags"]) • Ví dụ: var objRegex = new RegExp("ab+c", "i") • Cách sử dụng regular expression bị thay đổi hay khơng biết xác tạo hay lấy từ nguồn liệu khác (từ tập tin, CSDL hay user nhập từ bàn phím ) REGULAR EXPRESSION • Regular Expression Flags Ký tự Ký tự Mơ tả Mô tả g gobal match m xem chuỗi text có nhiều dịng i ignore case s xem chuỗi text có dịng gi Cả g i x bỏ qua khoảng trắng pattern • Ví dụ – Chuỗi "javascript" "JavaScript" thoả (match) với regexp /JavaScript/i – Chuỗi "abc" thoả với regexp /a b c/x – Chuỗi "ABCDEFABCGHIABCD" với regexp /ABC/g cho kết "ABC", "ABC", "ABC" (nếu khơng có flag g, cho kết "ABC") REGULAR EXPRESSION • Các phương thức sử dụng regexp P.thức Kiểu Mơ tả Tìm kiếm chuỗi thoả điều kiện (được quy định pattern) Trả mảng thông tin thoả điều kiện exec RegExp test RegExp Kiểm tra chuỗi có thoả điều kiện Trả true/false match String Tìm kiếm chuỗi thoả điều kiện Trả mảng thông tin thoả hay trả null khơng thoả search String Tìm vị trí thoả điều kiện chuỗi Trả vị trí thoả điều kiện hay trả -1 khơng có vị trí thoả replace String Tìm thay chuỗi thoả điều kiện chuỗi khác split Sử dụng regexp hay chuỗi cố định để tách chuỗi thành mảng chứa chuỗi String REGULAR EXPRESSION • Cú pháp Pattern Ký tự Ý nghĩa \ Ký tự escape (ký tự phía sau ký tự / trùng với ký tự sử dụng để thiết lập Pattern xem ký tự bình thường) ^ So khớp (match) ký tự vị trí đầu dịng Ví dụ /^A/ không khớp với 'A' "an A", khớp 'A' "An A" $ So khớp ký tự vị trí cuối dịng Ví dụ /t$/ khơng khớp với 't' "eater" khớp với 't' "eat" * So khớp xuất hay nhiều lần ký tự trước dấu * Ví dụ /bo*/ khớp với 'boooo' "A ghost booooed" 'b' "A bird warbled" không khớp với "A goat grunted" REGULAR EXPRESSION Ký tự Ý nghĩa + So khớp xuất hay nhiều lần ký tự trước dấu + Tương đương với \{1,}\ Ví dụ /a+/ khớp với 'a' "candy" tất ký tự 'a' "caaaaaaandy" ? So khớp xuất hay lần ký tự trước dấu ? So khớp ký tự đơn ký tự newline '\n' Ví dụ /.n/ khớp với 'an' 'on' "nay, an apple is on the tree", không khớp với 'nay' (x) So khớp 'x' lưu lại kết so khớp (là chuỗi – substring) vào mảng kết x|y So khớp x hay y {n} So khớp ký tự trước {n} xuất xác n lần (với n số nguyên) REGULAR EXPRESSION Ký tự Ý nghĩa {n,} So khớp ký tự trước {n,} xuất n lần (với n số nguyên) {n,m} So khớp ký tự trước {n,m} xuất n lần nhiều m lần (với n, m số nguyên) [xyz] So khớp với ký tự thuộc tập xyz Có thể dùng dấu – để định nghĩa đoạn ký tự liên tiếp tập Ví dụ [0-9], [a-z], [A-Z] [^xyz] So khớp ký tự không thuộc tập xyz Có thể dùng dấu – để định nghĩa đoạn ký tự liên tiếp tập [\b] So khớp ký tự backspace \b So khớp với ký tự ranh giới (word boundary) ký tự đầu dịng hay ký tự khoảng trắng Ví dụ /\bn\w/ khớp với 'no' in "noonday";/\wy\b/ khớp với 'ly' "possibly yesterday." REGULAR EXPRESSION Ký tự \B Ý nghĩa So khớp với ký tự không ký tự ranh giới (non-word boundary) Ví dụ /\w\Bn/ khớp với 'on' "noonday", /y\B\w/ khớp với 'ye' "possibly yesterday." \cX So khớp với ký tự điều kiển X có chuỗi Ví dụ /\cM/ khớp với ký tự control-M chuỗi \d So khớp ký tự số (tương tự [0-9]) \D So khớp ký tự không ký tự số (tương tự [^0-9]) \f So khớp ký tự form-feed (ký tự có mã ASCII 12 = \x0C hex) \n So khớp với ký tự line feed (ký tự có mã ASCII 10 = \x0A hex) \r So khớp với ký tự đầu dòng (mã ASCII 13 = \x0D hex) \s So khớp với space character, gồm có khoảng trắng, tab, form feed, line feed (tương tự với [\f\n\r\t\v] REGULAR EXPRESSION Ký tự Ý nghĩa \S So khớp với ký tự không space character ([^\f\n\r\t\v]) \t So khớp với ký tự tab (ký tự có mã ASCII = \x09 hex) \v So khớp với ký tự vertical tab (mã ASCII 11 = \x0B hex) \w So khớp với ký tự alphanumeric ký tự gạch (tương tự [A-Za-z0-9_]) \W So khớp với ký tự không alphanumeric (tương đương [^A-Za-z0-9_]) Ví dụ /\W/ khớp với '%' trong"50%." \n Tham khảo lại chuỗi thứ n cặp dấu ngoặc đơn (với n số nguyên dương) Ví dụ /apple(,)\sorange\1/ khớp với 'apple, orange,' "apple, orange, cherry, peach." \xhh So khớp với ký tự có mã ASCII hh hex (2 chữ số hex) \uhhhh So khớp với ký tự có mã ASCII hhhh hex (4 chữ số hex) REGULAR EXPRESSION • Ví dụ 1: Hàm xén khoảng trắng thừa chuỗi function trim(str) { if(!str || typeof str != 'string') Xén khoảng trắng cuối chuỗi return null; return str.replace(/^[\s]+/,'').replace(/[\s]+$/,'').replace(/[\s]{2,}/,' '); } Xén khoảng trắng đầu chuỗi Xén khoảng trắng chuỗi • Ví dụ 2: Kiểm tra chuỗi số hay không function isNumber(number) { var regexp = /^[0-9]+$/; return regexp.test(trim(number)); } REGULAR EXPRESSION • Ví dụ 3: Tìm tất email có đoạn văn bản, kết đưa vào mảng var text = "This text has some email addresses foo@bar.com This text has some email addresses foobar@foobar.com.au"; var regexp = /(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})/g; var arrEmail = text.match(regexp); for (var i=0; i < arrEmail.length; i++) document.write(arrEmail[i] + ""); foo@bar.com foobar@foobar.com.au Kết chạy đoạn mã Có thể truy cập vào trang http://regexlib.com để tham khảo số RegExp định nghĩa sẵn (email, URL, number, string, address, phone, date, time ) TÀI LIỆU THAM KHẢO • HTML – Những thực hành HTML – Đinh Xuân Lâm (VN-GUIDE ®) – HTML and XHTML - The definitive guide (6th Edition 2006) - OReilly • CSS – Thiết kế web với CSS – Lê Minh Hoàng (MK.PUB) – CSS - The definitive guide (3rd Edition 2006) - OReilly – CSS Cookbook (2nd Edition 2006) - OReilly • JavaScript – Hướng dẫn thiết kế trang web tương tác JavaScript – Nguyễn Trường Sinh (MK.PUB) – Javascript – The definitive guide (5th edition 2006) – Oreilly – JavaScript And DHTML Cookbook (2003) - Oreilly TÀI LIỆU THAM KHẢO • Một số địa web thiết kế web – Tiếng Việt • • • • • • http://www.cssyeah.com/ http://dohoavietnam.com/ http://www.dohoavn.net/ http://www.vnfx.com/ http://www.zidean.com/ http://www.bantayden.com/ – Tiếng Anh • http://www.w3schools.com/ • http://developer.mozilla.org/en/docs/Main_Page