Bài thực hành TK website v2

Bai_giang_thiet_ke_website_v2

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>   [...]... việc điều chỉnh các thành phần con bên trong, và cũng để xác định thứ tự ƣu tiên trong CSS ul li { display: inline; } Bộ chọn Ví dụ Mô tả * * Chọn tất cả các thành phần html tag p Chọn tất cả các thành phần cùng loại tag01 tag02 div p Chọn tất cả thành phần bên trong thành phần tag01,tag02 div,p Chọn tất cả thành phần và tag01+tag02 div+p Chọn tất cả thành phần ... được đặt kế và sau thành phần tag01>tag02 div>p Chọn tất cả thành phần có thành phần cha là .class className Chọn tất cả các thành phần có cùng tên class #id #idName Chọn tất cả các thành phần có cùng tên id :active a:active Chọn các liên kết được kích hoạt :after p:after Thêm nội dung ngay phía sau thành phần :before p:before Thêm nội dung ngay phía trước thành phần :first-child... :first-child p:first-child Chọn thành phần đầu tiên của thành phần cha chứa nó :first-letter p:first-letter Chọn ký tự đầu tiên của một thành phần :first-line p:first-line Chọn dòng đầu tiên của một thành phần :focus input:focus Thành phần sẽ focus khi được chọn :hover a:hover Chọn các liên kết được hover (di chuyển chuột lên thành phần) :lang(mã ngôn ngữ) p:lang(vi) Chọn thành phần với thuộc tính ngôn... Định dạng cho các thành phần đã được click [Thuộc tính] [target] Chọn tất cả các thành phần có cùng thuộc tính (attribute) [Thuộc tính|=ngôn ngữ] [lang|=vi] Được sử dụng để chọn tất cả các thành phần với thuộc tính có giá trị = "ngôn ngữ" [Thuộc tính~=giá trị] [title~=myWeb] Chọn tất cả các thành phần với thuộc tính chứa một giá trị [Thuộc tính=giá trị] [target=_blank] Chọn tất cả các thành phần với thuộc... 1em ngang bằng với kích cỡ font hiện hành, 2em = 2 lần kích cỡ font hiện hành vd: một thành phần được thiết lập font là 12pt, vậy 2em bằng với 24pt, ’em‘ là đơn vị rất hữu dụng trong css, nhất là trong trường hợp người dùng sử dụng zoom để phóng to chữ trong trình duyệt, đơn vị em sẽ giãn ra theo tỉ lệ chữ ex 1ex bằng chiều cao của chữ x in thường của font hiện hành Do đó, đơn vị này không những phụ... 2.6.2.6 Phần tử mới của Form trong HTML5 - Thẻ định nghĩa một danh sách tùy chọn, đƣợc sử dụng cùng với các thành phần nhằm xác định giá trị các thành phần có thể có (tƣơng tự nhƣ - ) o Sử dụng thuộc tính list trong để cho biết thành phần nào liên quan đến o Ví dụ: ... cho kết quả của phép tính (giống nhƣ đƣợc thực hiện bởi script) Nó đƣợc sử dụng kèm với tag để nhập giá trị Ví dụ: 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... name="x" for="a b"> 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ể tạo ra file css một lần rồi sử dụng nhiều lần trong các tài liệu web khác 3.1.2 Vai trò của CSS và ứng dụng CSS ra đời đã... 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 là tên phần tử HTML + B{font-style:italic;}... Ngoài các việc triển khai các kỹ thuật và các phƣơng thức của công nghệ HTML5 cho máy tính để bàn, có thể triển khai thực hiện HTML5 trong nhiều trình duyệt điện thoại di động web có tính năng phong phú — một thị trƣờng đang phát triển, khi đã chứng kiến sự phổ biến của các hệ điều hành web Apple iPhone, Google Android, và các điện thoại chạy Palm HTML5 cung cấp: - Các thẻ mô tả chính xác những gì .  + Ưu điểm của website tĩnh -  -  -  -  + Nhược điểm của website tĩnh - . . 39 3.3. Thit k website vi HTML và CSS .