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

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 - HTML 2 N N ộ ộ i i dung dung • • Ngôn Ngôn ng ng ữ ữ đ đ á á nh nh d d ấ ấ u u siêu siêu văn văn b b ả ả n n 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 - HTML 3 3.1. 3.1. Ngôn Ngôn ng ng ữ ữ 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 - HTML 4 3.1.1. 3.1.1. T T ổ ổ ng ng quan quan v v ề ề HTML HTML • • HTML= HTML= H H yper yper T T ext ext M M arkup arkup L L anguage anguage – – Ngôn Ngôn ng ng ữ ữ đ đ á á nh nh d d ấ ấ u u siêu siêu văn văn b b ả ả n n – – Ngôn Ngôn ng ng ữ ữ đ đ ể ể vi vi ế ế t t c c á á c c trang trang web. web. • • Do Tim Do Tim Berner Berner Lee Lee ph ph á á t t minh minh v v à à đư đư ợ ợ c c W3C (World W3C (World Wide Web Consortium) Wide Web Consortium) đưa đưa th th à à nh nh chu chu ẩ ẩ n n năm năm 1994 1994 • Các trang Web đầysinhđộng mà bạnthấy trên WWW là các trang siêu vănbản đượcviếtbằng HTML • HTML cho phép bạntạo ra các trang phốihợp hài hoà giữavănbản thông thường vớihìnhảnh, âm thanh, video, các mốiliênkết đến các trang siêu vănbản khác 9/3/2009 Công cụ thiết kế Web - HTML 5 3.1.1. 3.1.1. T T ổ ổ ng ng quan quan v v ề ề HTML HTML • HTML là ngôn ngữ củacácthẻđánh dấu-Tag. Các thẻ này xác định cách thức trình bày đoạnvănbản tương ứng trên màn hình. • HTML không phân biệtchữ hoa, chữ thường • Các trình duyệtthường không báo lỗi cú pháp HTML. Nếuviết sai cú pháp chỉ dẫn đếnkếtquả hiểnthị không đúng vớidựđịnh. 9/3/2009 Công cụ thiết kế Web - HTML 6 HyperText Là các vănbản thông minh biết cách tìm kiếmvàcungcấp cho người đọc các tài liệu khác có liên quan Các thông tin mà siêu vănbảnhỗ trợ rất đadạng: văn bản, hình ảnh, âm thanh, Làm thế nào để tra cứu, tìm kiếm thông tin đaphương tiện trên mạng thông tin rộng lớnnhấttoàncầu??? 3 3.1.1. 3.1.1. T T ổ ổ ng ng quan quan v v ề ề HTML HTML 9/3/2009 Công cụ thiết kế Web - HTML 7 HTML là mộtngônngữ tương tự như các ngôn ngữ lập trình Nó có cú pháp chặtchẽđểviết các lệnh thựchiện việctrìnhdiễnvănbản. Các từ khoá có ý nghĩaxác định đượccộng đồng Internet thừanhậnvàsử dụng. Ví dụ b = bold, br=break, Language 3.1.1. 3.1.1. T T ổ ổ ng ng quan quan v v ề ề HTML HTML 9/3/2009 Công cụ thiết kế Web - HTML 8 HTML chophépliênkếtnhiều trang vănbảnrảirác khắpnơi trên Internet. HTML dựatrênnềntảng là mộtvănbản. Các thành phầnkhácnhư hình ảnh, âm thanh, video đềuphải "cắmneo" vàomột đoạnvănbảnnàođó. Text? Hyper? Next 3.1.1. 3.1.1. T T ổ ổ ng ng quan quan v v ề ề HTML HTML 9/3/2009 Công cụ thiết kế Web - HTML 9 Trang mã nguồn HTML và trang Web? + Trang mã nguồn HTML là mộttệpvănbảnbình thường gồmcáckítự ASCII, có thểđượctạorabằng bấtcứ bộ soạnthảo thông thường nào. + Theo quy ước, tấtcả các tệpmãnguồncủatrang siêu vănbảnphảicóđuôi là .html hoặc .htm So So ạ ạ n n th th ả ả o o siêu siêu văn văn b b ả ả n n 9/3/2009 Công cụ thiết kế Web - HTML 10 + Nói soạn siêu vănbảntứclàtạoratrangmãnguồn đúng quy định để bộ duyệthiểu đượcvàhiểnthịđúng. + Khi dùng bộ duyệt - browser đọcnội dung trang mã nguồnvàhiểnthị nó lên màn hình máy tính thì ta thường gọi là trang Web. + Vậy trang web không tồntạitrênđĩacứng củamáy tính. Nó là cái thể hiệncủa trang mã nguồn qua xử lí củabộ duyệt. So So ạ ạ n n th th ả ả o o siêu siêu văn văn b b ả ả n n [...]... HEIGHT=n%> BGCOLOR - đặt màu nền của bảng Bt đầu một ô của bảng(B3/4t đầu cột trong một hàng) 9/3/2009 Bt đầu một dòng của bảng - table row Thẻ giống nh nhng cho chữ in đậm và căn chính giữa (heading) Cụng c thit k Web - HTML 35 Table ALIGN=CENTER|RIG HT Thuộc tính dùng kèm bên trong các thẻ , hay để căn lề chữ trong một ô của bảng theo chiều ngang VALIGN=TOP|BOTTO Thuộc... mục 1 Mục 2: Chú thích rõ mục 2 Mục 3: Chú thích rõ mục 3 Cụng c thit k Web - HTML 30 Lp th to bng Bao gm cỏc th : Gii hn bng : c t cỏc dũng ca bng : c t ụ d liu ca bng : c t ụ tiờu ca bng : c t tờn bng 9/3/2009 Cụng c thit k Web - HTML 31 Table 9/3/2009 Cụng c thit k Web - HTML 32 Table Th - table Thuc... đẻ đặt độ rộng của ô bảng COLSPAN=n Thuộc tính dùng kèm các thẻ hay để giãn một ô theo chiều ngang chiếm nhiều cột hơn các ô trên dòng khác Thuộc tính dùng kèm các thẻ hay để giãn một ô theo chiều đứng chiếm nhiều dòng hơn các ô ở cột khác ROWSPAN=n 9/3/2009 Kết thúc bảng Cụng c thit k Web - HTML 36 ... Square : Chm vuụng m Cụng c thit k Web - HTML 28 Ordered Lists 1 2 3 4 5 6 õy l mt danh sỏch cú th t ! õy l mt danh sỏch cú th t ! Th OL y 9/3/2009 Trong ú: X l Kiu ký hiu c dựng N l giỏ tr bt u ca danh sỏch Cụng c thit k Web - HTML 29 Danh sỏch nh ngha Defined Lists Mc 1: Chỳ thớch rừ mc 1 Mc 2: Chỳ thớch rừ mc 2 Mc 3: Chỳ thớch rừ mc... 9/3/2009 Cụng c thit k Web - HTML 11 3.1.2 Cỏc th HTML Cu trỳc chung ca mt siờu vn bn Tiờu trang Cỏc khai bỏo khỏc õy Ni dung cn th hin õy 9/3/2009 Cụng c thit k Web - HTML 12 3.1.2 Cỏc th HTML Cỏc lp th Cu trỳc (structure) nh dng (formatting) nh (image) Danh sỏch (list) Bng (table) Form Khung hin th (frame) 9/3/2009 Cụng c thit... trựng vi ng c s | biờn di ca dũng hin thi 9/3/2009 Cụng c thit k Web - HTML 24 Lp th õm thanh, hin nh (tt) Chốn file õm thanh th khụng cú th kt thỳc, gm cỏc thuc tớnh: Src: ng dn n file cn chy Width, height: Kớch thc khung iu khin Autoplay: T ng bt hay khụng Controller: Cú hin th bng iu khin khụng Loop: Cú t ng lp li khi ht khụng 9/3/2009 Cụng c thit k Web - HTML 25 Lp th to danh sỏch ... : Danh sỏch khụng cú th t Cỏc loi danh sỏch cú th lng nhau 9/3/2009 Cụng c thit k Web - HTML 26 List Ds cỏc nh ngha Ds khụng th t - ul (unordered lists) - dl (definition lists) - li - dt (title) Ds cú th t - dd (detail) - ol (ordered lists) - li Thuc tớnh - type 9/3/2009 DISC | CIRCLE | SQUARE A | a | I | i | 1 Cụng c thit k Web - HTML 27 Unordered Lists õy l mt danh sỏch khụng cú th t... Leftmargin, topmargin: Cn l trỏi, l trờn ca ti liu theo pixel 9/3/2009 Cụng c thit k Web - HTML 14 Lp th nh dng Cỏc th nh dng vt lý nh , , , , Cỏc th nh dng logic nh , Cỏc th nh dng khi nh 9/3/2009 Cụng c thit k Web - HTML 15 Cỏc th trỡnh by trang trong HTML + To... + Xung dũng: + ng k ngang: + Cn chớnh gia: , , 9/3/2009 Cụng c thit k Web - HTML 16 S m v ch s Superscript text c to ra bng cp th : Subscript text c to bng cp th : Vớ d: 9/3/2009 Cụng c thit k Web - HTML 17 Heading Th - Hn, n (1 6) Thuc tớnh - Align - Title Heading 1... bordercolor - width - cellspacing - height - cellpadding - style - background - align 9/3/2009 Cụng c thit k Web - HTML 33 Table Th Th - td - tr Thuc tớnh Thuc tớnh - align, valign - width, height - background - bgcolor - colspan - rowspan - align, valign - width, height - background - bgcolor 9/3/2009 Cụng c thit k Web - HTML 34 Table TAG/Attribute Mụ t . 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 - HTML 3 3.1. 3.1. Ngôn Ngôn ng ng ữ ữ HTML HTML 3.1.1 mộtmốiliênkết đếncáctrangkhác •Mỗithẻ gồmmộttừ khoá - KEYWORD với cú pháp Hầuhếtcáclệnh thể hiệnbằng mộtcặphaithẻ : thẻ mở <KEYWORD> và thẻđóng </KEYWORD> 9/3/2009 Công cụ thiết kế Web