Bai giang thiet ke website v2

Bai giang thiet ke website v2 đại học công nghệ thông tin thái nguyên

Mục lục Mc lc 1  Tng quan v các dch v trong mng Internet 4 1.1. Mng máy tính và lch s phát trin 4 1.2. Mô hình WWW (world wide web) và các dch v liên quan 4 1.2.1. Mô hình Client-Server và ng dng 4 1.2.2. Mô hình WWW 5 1.2.3. Các dch v liên quan 5 1.3. Phân bing 6 1.3.1.  6 ng 6 ng phát trin ca web 6 1.5. Các công c và công ngh thit k web 7  Ngôn ng kch bn HTML 8 2.1. Tng quan v ngôn ng HTML 8 2.2. Gii thiu v b cc ca trang Web 8 2.2.1. B cc chun ca mt trang tài liu HTML 8 2.2.2. Các thành phn trên trang Web 10 2.3. Mt s th n 11 2.3.1. Các th nm trong th Head 11 2.3.2. Các th nm trong body 11 o bng 14 u khin trên Form 16 2.6. HTML5 17 2.6.1. Gii thiu v HTML5 17 2.6.2. Các th mi trong HTML5 18  S dng HTML và CSS trong thit k Website 22 3.1. Gii thiu CSS 22  CSS 22 3.1.2. Vai trò ca CSS và ng dng 22 3.1.3. Cú pháp CSS 22 3.1.4. Th div và s k tha trong thit k web vi CSS 30 3.2. Các thuc tính trong CSS 34 3.2.1. Tìm hiu thuc tính CSS Font và Text 34 3.2.2. Thuc tính liên kt trong CSS 34 3.2.3. Thuc tính border và background trong CSS 35 3.2.4. Tìm hiu thuc tính padding và margin 36 3.2.5. Tìm hiu danh sách và thuc tính display trong css 37 3.2.6. Tìm hiu thuc tính float và clear 37 3.2.7. Tìm hiu thuc tính position 39 3.3. Thit k website vi HTML và CSS 41 3.3.1. Thit k b cc 41 3.3.2. Gii thiu k thut CSS Sprite 47 3.3.3. K thut tô màu trong layout 48  kch bn JAVASCRIPT 50 4.1. Tng quan v ngôn ng kch bn JavaScript 50 4.1.1. Gii thiu ngôn ng JavaScript 50 4.1.2.  50 4.1.3. Bin và i ng 51 4.1.4. Các toán t 52 4.1.5. Hàm và gi hàm 53 4.1.6. Các hàm có sn 53 4.1.7. Các cu trúc lnh 53 4.1.8. n 55 4.2. Lp trình DOM và qun lý ca s s dng Javascript 69 4.2.1. Gii thiu mô hình DOM 69 4.2.2. DOM HTML 69 4.2.3. DOM CSS 72 4.2.4. DOM event 73 4.2.5. DOM notes 74 4.3. S dn JQuery trong web 74 4.3.1. Gii thiu v Jquery 74 4.3.2. n ca Jquery 76 4.3.3. Mt vài hàm API hay dùng 81 Chương 1. Tổng quan về các dịch vụ trong mạng Internet 1.1. Mạng máy tính và lịch sử phát triển -               hông qua các   -       ng Internet -  1.2. Mô hình WWW (world wide web) và các dịch vụ liên quan 1.2.1. Mô hình Client-Server và ứng dụng Mô hình client-server     -     / Server ng d    c gi là mô hình Web Client/Server. Giao thc chuc s d giao tip gia Web Server và Web Client là HTTP ( HyperTexl Transfer Protocol ).  ng dng Web  1) Phía Client:    2) Phía Server:  IIS,apache )       1.2.2. Mô hình WWW             nii dung Internet quan tâm nhiu nht hin nay Web là mt công c,hay t dch v ca Internet. Web cha thông tin bao gn,   nh,âm thanh và thm chí c c kt hp vi nhau.Web cho phép chúng ta chui vào mi ngóc ngách trên Internet.Nh có Web nên dù không phi là chuyên gia mi có th s dng Internet mt cách d dàng.Phn m xem Web gi là trình duyt (Browser).Mt s trình duyt ph bin hin nay là Internet Explorer ca Microsoft tia Netcape 1.2.3. Các dịch vụ liên quan - HTTP(Hyper Text Transfer Protocol), Email, Chat, FTP(File Transfer Protocol),  - n t (E-mail): Dch v E-mail có th  i thông tin gia các cá nhân vi nhau,các cá nhân vi t chc và gia các t chc vi nhau.Dch v    cho phép t ng gi ni dung thông tin ti ta ch hoc t ng gn tt c a ch cn g a ch c (gọi là mailing list).Ni dung thông tin gn t gm nhiu dng thông tin có th là d bn,     ng thông tin này có th hoà trn,kt hp vi nhau thành mt tài liu phc tp.Li ích chính dch v n t là thông tin g và r. - Dch v truyn File (FTP-File Transfer Protocol):là dch v  i các tp tin t máy ch xung máy trc li. - Telnet: dch v này cho phép truy cp tt TelnetSite tìm ki   thy mt dch v   m thông tin trong . Telnet c bit quan trng trong vic kt ni thông tin t các máy tính xung trung tâm. 1.3. Phân biệt trang web tĩnh, trang web động 1.3.1. Trang web tĩnh Là     web.        + Ưu điểm của website tĩnh -  -  -  -  + Nhược điểm của website tĩnh -     1.3.2. Trang web động                   + Ưu điểm của website động -  -   -  + Nhược điểm của website động  1.4. Xu hướng phát triển của web -   -    -                                   quan. -          1.5. Các công cụ và công nghệ thiết kế web - :  HTML (Hypertext Markup Language)  Javascript  Vbscript  ASP (Active Server Pages), ASP.NET  PHP   - :  Notepad++  Macromedia Dreamweaver  PHPdesigner  Eclipse Chương 2. Ngôn ngữ kịch bản HTML 2.1. Tổng quan về ngôn ngữ HTML HTML (ting Anh, vit tt cho HyperText Markup Language, tc là "Ngôn ng  dn") là mt ngôn ng c thit k  t là các mc trình bày trên World Wide Web. Hình 2.1. Giới thiệu HTML HTML không phi là mt ngôn ng lp trình, do chúng ch có cu trúc mã l không có cu khin. Tuy HTML không phi là ngôn ng l lt quan trng trong các ngôn ng vit web (PHP, ASP, JSP). Vì nhng gì chúng ta nhìn thy (hình nh, kích c, kiu ch, màu sc) và nhng gì chúng ta   u biu, khung tho u c xây dng t HTML. Các phiên bi 2.2. Giới thiệu về bố cục của trang Web 2.2.1. Bố cục chuẩn của một trang tài liệu HTML <!DOCTYPE html> <html> <head> <title> Demo Website </title> </head> <body> </body> </html> - <!Doctype>: Phn khai báo chun ca html hay xhtml. o Ví d:  HTML5  <!DOCTYPE html>  HTML 4.01  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  XHTML 1.0  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> - <head></head>: Phu, khai báo v meta, title, css, javascri  i lu v trang web, nó có th  trang web, mô t v trang web, v tác gi trang web, v thi gian refresh trang, v b gõ ting vit ca trang Nhng ni dung trên s c hin th trên tình duyt ( ngoài ph - s c hin th phía trên ca ch trang web). - <body></body>: Phn cha ni dung cn th ni dung. Phn thân ca trang web có th c b cc thành 3 ph o Header: Là phu ca ni dung trang web (khác vi phu ca trang web trong th    t logo web, tên web site o Body_main: Là phn thân ni dung trang web, nó là pht Menu chính, menu ph ca trang web, các bài vit ca trang web, các liên kt khác o Footer: Là phn chân ca n ghi bn quyn trang web, tác gi trang web, thông tin liên h Mt s u cn thn bng HTML: - Nhiu du cách li có tác dng nht du cách. Phi s dng th  th hin nhiu du giãn cách lin nhau. -  xut d xung hàng thì phi s dng th ng - Có th vit tên th không phân bit ch ng và in hoa. - Bng mã và tên gi trong HTML ca mt s ký t c bit 2.2.2. Các thành phần trên trang Web - Th: + Cú pháp: <tên_th> Giá tr </tên_th>  1 cp th gm th m và th   Th m và th  c + Th rng : <tên_th />  Ch có th m mà không có th  - Thuc tính: là cp giá tr t trong th m hoc th rng + Cú pháp: <tên_th tên_thu</tên_th> - Chú ý: + Có nhi   xây dng trang Web tuy nhiên nên thit k theo chun. W3.org là 1 chun, nu thit k theo chun thì s d dàng SEO trang Web lên v trí Top.  Ví d:  <br> <br />  <font color=red>   [...]... Thẻ xác định một cặp trƣờng khóa chính sử dụng cho Khi đƣợc submit các khoá riêng (private key) đƣợc lƣu trữ tại client, và các khóa chung đƣợc gửi (public key) đến máy chủ o Ví dụ: Username: Encryption: ... Các thẻ mô tả chính xác những gì chúng đƣợc thiết kế - Tăng cƣờng khả năng truyền thông trên mạng - Cải thiện khả năng lƣu trữ chung - Các trình làm việc trên nền Web (Web Workers) để chạy các quá trình nền - Giao diện WebSocket để thiết lập kết nối liên tục giữa các ứng dụng cƣ trú và máy chủ - Truy vấn dữ liệu đã đƣợc lƣu trữ tốt hơn - Cải thiện tốc độ nạp và lƣu trang - Hỗ trợ cho CSS3 để quản lý... oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 100 + = Chương 3 Sử dụng HTML và CSS trong thiết kế Website 3.1 Giới thiệu CSS 3.1.1 Định nghĩa về CSS CSS định nghĩa (hay xác định) cách các thành phần html sẽ đƣợc hiển thị trên các trình duyệt Style cho các thành phần đƣợc lƣu trong các file css Có thể... CSS ra đời đã giải quyết đƣợc một vấn đề lớn, khi các thẻ nhƣ thẻ và các thuộc tính màu đƣợc thêm vào HTML 3.2, đã bắt đầu nảy sinh vấn đề cho các nhà phát triển web Khi phát triển mở rộng các website các thẻ và thuộc tính color đƣợc thêm vào trong mọi trang web đơn, điều đó dẫn đến tiến trình xử lý lâu hơn và tốn kém hơn Để giải quyết vấn đề này W3C (World Wide Web Consortium) đã tạo... trong một file CSS (có phần mở rộng css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link Đây là cách làm đƣợc khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu Các ví dụ trong bài giảng đƣợc trình bày theo cách này Abc.css 3.1.3.2 Các dạng bộ chọn trong CSS - Bộ chọn... Tomato rgb(255,99,71) #FF6347 #FF6347 Turquoise rgb(64,224,208) #40E0D0 #40E0D0 Violet rgb(238,130,238) #EE82EE #EE82EE Wheat rgb(245,222,179) #F5DEB3 #F5DEB3 White rgb(255,255,255) #FFFFFF #FFFFFF WhiteSmoke rgb(245,245,245) #F5F5F5 #F5F5F5 Yellow rgb(255,255,0) #FFFF00 #FFFF00 YellowGreen rgb(145,205,50) #9ACD32 #9ACD32 3.1.4 Thẻ div và sự kế thừa trong thiết kế web với CSS 3.1.4.1 Thẻ Div Thẻ div là thẻ... class=‖alts‖>* : alts{color:red;} 3.2 Các thuộc tính trong CSS Với CSS mọi thứ trở nên đơn giản hơn, chúng ta có thể thiết kế một trang web nhẹ nhàng và tận dụng ít các thẻ HTML, nhƣng kiến trúc và bố cục website không hề đơn giản Vì vậy ngƣời học nên có sự tìm hiểu phối màu và thiết kế bố cục 3.2.1 Tìm hiểu thuộc tính CSS Font và Text 3.2.1.1 Font: + font-family:tahoma, arial, verdana; + font-size: px,