1. Trang chủ
  2. » Công Nghệ Thông Tin

Chương 3: MỘT SỐ CÔNG CỤ THIẾT KẾ WEBSITE docx

35 382 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 35
Dung lượng 503,82 KB

Nội dung

Chương Chương 3. M 3. M Ộ Ộ T S T S Ố Ố CÔNG CÔNG C C Ụ Ụ THI THI Ế Ế T K T K Ế Ế WEBSITE WEBSITE Chương Chương 3. M 3. M Ộ Ộ T S T S Ố Ố CÔNG CÔNG C C Ụ Ụ THI THI Ế Ế T K T K Ế Ế WEBSITE WEBSITE Bộ môn CNTT – Khoa Tin họcthương mại –Trường ĐH Thương Mại Email: cntt@vcu.edu.vn 9/3/2009 Công cụ thiết kế Web - CSS 2 N N ộ ộ i i dung dung • • Ngôn Ngôn ng ng ữ ữ đ đ á á nh nh d d ấ ấ u u HTML HTML • • PHP, PHP, Javascript Javascript • • M M ộ ộ t t s s ố ố công công c c ụ ụ h h ỗ ỗ tr tr ợ ợ thi thi ế ế t t k k ế ế website website 9/3/2009 Công cụ thiết kế Web - CSS 3 3.1. 3.1. Ngôn Ngôn ng ng ữ ữ đ đ á á nh nh d d ấ ấ u u HTML HTML 3.1.1. 3.1.1. T T ổ ổ ng ng quan quan v v ề ề HTML HTML 3.1.2. 3.1.2. C C á á c c th th ẻ ẻ c c ủ ủ a a HTML HTML 3.1.3. 3.1.3. S S ử ử d d ụ ụ ng ng Frontpage Frontpage thi thi ế ế t t k k ế ế web web t t ĩ ĩ nh nh 3.1.4. 3.1.4. Đ Đ ị ị nh nh d d ạ ạ ng ng website website v v ớ ớ i i CSS CSS 9/3/2009 Công cụ thiết kế Web - CSS 4 CSS CSS • • CSS=Cascading Style Sheet: CSS=Cascading Style Sheet: M M ẫ ẫ u u quy quy đ đ ị ị nh nh c c á á ch ch th th ứ ứ c c th th ể ể hi hi ệ ệ n n c c á á c c th th ẻ ẻ HTML HTML • • Style Style đư đư ợ ợ c c đưa đưa v v à à o o HTML 4.0 HTML 4.0 đ đ ể ể gi gi ả ả i i quy quy ế ế t t m m ộ ộ t t s s ố ố v v ấ ấ n n đ đ ề ề . . • • Gi Gi ú ú p p ti ti ế ế t t ki ki ệ ệ m m đư đư ợ ợ c c r r ấ ấ t t nhi nhi ề ề u u th th ờ ờ i i gian gian v v à à công công s s ứ ứ c c cho cho vi vi ệ ệ c c thi thi ế ế t t k k ế ế web. web. • • C C ó ó th th ể ể đ đ ị ị nh nh ngh ngh ĩ ĩ a a nhi nhi ề ề u u style style v v à à o o m m ộ ộ t t th th ẻ ẻ HTML HTML (Cascading) (Cascading) 9/3/2009 Công cụ thiết kế Web - CSS 5 C C á á c c lo lo ạ ạ i i style style • • C C ó ó 4 4 lo lo ạ ạ i i style: style: – – Inline Style Inline Style (Style (Style đư đư ợ ợ c c qui qui đ đ ị ị nh nh trong trong 1 1 th th ẻ ẻ HTML HTML c c ụ ụ th th ể ể ) ) – – Internal Style Internal Style (Style (Style đư đư ợ ợ c c qui qui đ đ ị ị nh nh trong trong ph ph ầ ầ n n <HEAD> <HEAD> c c ủ ủ a a 1 1 trang trang HTML ) HTML ) – – External Style External Style (style (style đư đư ợ ợ c c qui qui đ đ ị ị nh nh trong trong file .CSS file .CSS ngo ngo à à i i ) ) – – Browser Default Browser Default ( ( thi thi ế ế t t l l ậ ậ p p m m ặ ặ c c đ đ ị ị nh nh c c ủ ủ a a tr tr ì ì nh nh duy duy ệ ệ t t ) ) • • Th Th ứ ứ t t ự ự ưu ưu tiên tiên : : M M ứ ứ c c ưu ưu tiên tiên gi gi ả ả m m d d ầ ầ n n t t ừ ừ trên trên xu xu ố ố ng ng 9/3/2009 Công cụ thiết kế Web - CSS 6 C C á á ch ch ch ch è è n n CSS CSS • • Đ Đ ặ ặ t t trong trong <head> <head> … … </head> </head> • • V V ớ ớ i i Internal style: Internal style: <style type= <style type= “ “ text/ text/ css css ” ” > > <! <! N N ộ ộ i i dung dung đ đ ị ị nh nh ngh ngh ĩ ĩ a a style style > > </style> </style> 9/3/2009 Công cụ thiết kế Web - CSS 7 C C á á ch ch ch ch è è n n CSS ( CSS ( tt tt ) ) • • V V ớ ớ i i External style: External style: – – Đ Đ ị ị nh nh ngh ngh ĩ ĩ a a style style trong trong file file riêng riêng ( ( thư thư ờ ờ ng ng c c ó ó đuôi đuôi .CSS) .CSS) – – Nh Nh ú ú ng ng file CSS file CSS đã đã đ đ ị ị nh nh ngh ngh ĩ ĩ a a v v à à o o trang trang web: web: <link <link href href = = “ “ đ đ ị ị a a ch ch ỉ ỉ file" file" rel rel =" =" stylesheet stylesheet " " type="text/ type="text/ css css "> "> • • V V ớ ớ i i Inline style: Inline style: < < tên_th tên_th ẻ ẻ style= style= “ “ tt1:gt1;tt2:gt2; tt1:gt1;tt2:gt2; …” …” > > Khai Khai b b á á o o v v à à s s ử ử d d ụ ụ ng ng style style 9/3/2009 Công cụ thiết kế Web - CSS 9 Ch Ch ú ú ý ý khi khi vi vi ế ế t t style style • • Style Style phân phân bi bi ệ ệ t t ch ch ữ ữ hoa hoa , , ch ch ữ ữ thư thư ờ ờ ng ng • • Đ Đ ể ể ghi ghi ch ch ú ú trong trong style style s s ử ử d d ụ ụ ng ng : : /* /* Đo Đo ạ ạ n n ghi ghi ch ch ú ú */ */ 9/3/2009 Công cụ thiết kế Web - CSS 10 Khai Khai b b á á o o style style selector { selector { Property1: Value1; Property1: Value1; Property2: Value2; Property2: Value2; } } [...]... 9/3/2009 Công cụ thiết kế Web - CSS 23 CSS và font (tt) 9/3/2009 Công cụ thiết kế Web - CSS 24 CSS và font (tt) 9/3/2009 Công cụ thiết kế Web - CSS 25 CSS và font (tt) 9/3/2009 Công cụ thiết kế Web - CSS 26 CSS và đường viền 9/3/2009 Công cụ thiết kế Web - CSS 27 9/3/2009 Công cụ thiết kế Web - CSS 28 9/3/2009 Công cụ thiết kế Web - CSS 29 9/3/2009 Công cụ thiết kế Web - CSS 30 9/3/2009 Công cụ thiết kế. .. 9/3/2009 Công cụ thiết kế Web - CSS 17 CSS Advanced 1 CSS Dimension 2 CSS Classification 3 CSS Positioning 4 CSS Pseudo-class 5 CSS Pseudo-element 6 CSS Media Types 9/3/2009 Công cụ thiết kế Web - CSS 18 CSS cho nền 9/3/2009 Công cụ thiết kế Web - CSS 19 CSS cho nền (tt) 9/3/2009 Công cụ thiết kế Web - CSS 20 CSS và cho bản 9/3/2009 Công cụ thiết kế Web - CSS 21 CSS và cho bản (tt) 9/3/2009 Công cụ thiết kế. .. Ví dụ: p#doan1{ color:red; } #loai2{ color:blue; } 9/3/2009 Công cụ thiết kế Web - CSS 14 Sử dụng định danh • Mỗi định danh là duy nhất trên trang • Đặt thuộc tính id của thẻ = định_danh • Ví dụ: Đoạn này màu đỏ Tiêu đề xanh 9/3/2009 Công cụ thiết kế Web - CSS 15 Một số trường hợp cụ thể CSS Basic 1 CSS Background 2 CSS Text 3 CSS Font 4... color:green; } 9/3/2009 Công cụ thiết kế Web - CSS 12 Sử dụng lớp • Đặt thuộc tính class của thẻ=“tên_lớp”: • Ví dụ: Đoạn này màu đỏ Style không có hiệu lực Tiêu đề màu xanh 9/3/2009 Công cụ thiết kế Web - CSS 13 Định danh • Tương tự như class Thay dấu chấm (.) thành dấu thăng (#) • Cho thẻ cụ thể: tên_thẻ#định_danh{…}... - CSS 27 9/3/2009 Công cụ thiết kế Web - CSS 28 9/3/2009 Công cụ thiết kế Web - CSS 29 9/3/2009 Công cụ thiết kế Web - CSS 30 9/3/2009 Công cụ thiết kế Web - CSS 31 9/3/2009 Công cụ thiết kế Web - CSS 32 9/3/2009 Công cụ thiết kế Web - CSS 33 Ví dụ A.bar1 { COLOR: #6fa37e; FONT-FAMILY: "verdana"; FONT-SIZE: 12pt; FONT-WEIGHT: bold; TEXT-DECORATION: none } A.bar1:hover { COLOR:... background-color:#FFFFFF; color:blue } colorbook { font-family: Arial; font-size: 16; font-style: normal; background-color:#000000; color:#ffffff } Công cụ thiết kế Web - CSS 34 §¨ng ký 9/3/2009 Công cụ thiết kế Web - CSS 35 ...Style áp dụng cho thẻ cụ thể • Trường hợp 1 thẻ: Đặt selector là tên_thẻ p { color: red; } • Khai báo đồng thời nhiều thẻ: Viết danh sách tên thẻ phân cách bởi dấu phảy h1,h2,h3,h4,h5,h6{ font-family:arial; } 9/3/2009 Công cụ thiết kế Web - CSS 11 Tạo lớp • Gắn với thẻ cụ thể: Đặt selector là tên_thẻ.tên_lớp p.loai1{ color:red; } p.loai2{ color:blue; } • Không gắn với thẻ cụ thể: bỏ phần tên_thẻ . Chương Chương 3. M 3. M Ộ Ộ T S T S Ố Ố CÔNG CÔNG C C Ụ Ụ THI THI Ế Ế T K T K Ế Ế WEBSITE WEBSITE Chương Chương 3. M 3. M Ộ Ộ T S T S Ố Ố CÔNG CÔNG C C Ụ Ụ THI THI Ế Ế T K T K Ế Ế WEBSITE WEBSITE Bộ. Javascript Javascript • • M M ộ ộ t t s s ố ố công công c c ụ ụ h h ỗ ỗ tr tr ợ ợ thi thi ế ế t t k k ế ế website website 9/3/2009 Công cụ thiết kế Web - CSS 3 3.1. 3.1. Ngôn Ngôn ng ng ữ ữ đ đ á á nh nh d d ấ ấ u u HTML HTML 3.1.1 Pseudo - - element element 6. 6. CSS Media Types CSS Media Types 9/3/2009 Công cụ thiết kế Web - CSS 19 CSS CSS cho cho n n ề ề n n 9/3/2009 Công cụ thiết kế Web - CSS 20 CSS CSS cho cho n n ề ề n n ( ( tt tt ) )

Ngày đăng: 05/07/2014, 03:20

TỪ KHÓA LIÊN QUAN

w