Bài giảng thiết kế và triển khai website chương 3 GV bùi quang trường

Chng MT S CễNG C THIT K WEBSITE Bựi Quang Trng B mụn CNTT Khoa HTTT.KT Trng H Thng Mi Ni dung Ngụn ng ỏnh du siờu bn HTML PHP, Javascript Mt s cụng c h tr thit k website 11/18/2013 Cụng c thit k Web - HTML 3.1 Ngụn ng HTML 3.1.1 Tng quan v HTML 3.1.2 Cỏc th ca HTML 3.1.3 S dng Frontpage thit k web tnh 3.1.4 nh dng website vi CSS 11/18/2013 Cụng c thit k Web - HTML 3.1.1 Tng quan v HTML HTML (HyperText Markup Language) l ngụn ng ỏnh du siờu bn c thit k to nờn cỏc trang web Tp tin (File) HTML l mt bn cú cha cỏc th ỏnh du (markup tags), cỏc th ỏnh du ny giỳp cỏc trỡnh duyt Web hiu c cỏch trỡnh by v hin th trang Web File HTML cú phn m rng (Extension) l htm hay html v cú th c to bng bt c chng trỡnh x lý bn n gin no 11/18/2013 Cụng c thit k Web - HTML 3.1.1 Tng quan v HTML Trong File HTML cỏc phn t (Element) c ỏnh du bng cỏc th HTML Cỏc th ny c bao bi du < v du > Thụng thng cỏc th HTML c dựng theo mt cp (th bt u) v (th kt thỳc), bn nm gia cp th ny l ni dung ca phn t Cỏc th HTML khụng phõn bit ch hoa v ch thng, cú ngha l cỏc kiu ch u c xem nh 11/18/2013 Cụng c thit k Web - HTML 3.1.1 Tng quan v HTML Cu trỳc c bn Mt document HTML luụn bt u bng v kt thỳc bng (trong ú bn cng cú th vit nh hoc vit hoa v ) Nh cú cp TAG ny m Browser bit c ú l HTML - document dnh cho trỡnh duyt Nhng ch ú ch dnh riờng cho Browser, ngi c ch nhn c nhng gỡ vit gia cp TAG v Trong mt document html, chỳ thớch c dựng nh sau: éõy l dũng chỳ thớch, ch dnh riờng cho bn, browser b qua dũng ny > Nh vy mt trang web vit bng html s cú cu trỳc nh sau: Phn bn cn trỡnh by Vớ d mt bc nh hay li > 11/18/2013 Cụng c thit k Web - HTML 3.1.1 Tng quan v HTML Mt trang web bao gi cng cú hai phn c bn l tiờu v phn thõn Tiờu luụn c vit to Bn cú th dựng size ln hn v cng cú th dựng nhng TAG ó c nh sn cho tiờu Tiờu ca trang web Welcome to my Homepage! Tiờu ca trang web Tiờu ca trang web Tiờu ca trang web Tiờu ca trang web l to nht v l nh nht Tiờu luụn nm trung tõm ca trang, vỡ vy ta phi dựng thờm mt cp TAG na : Tt c nhng gỡ nm gia cp TAG ny u c nh hng vo phớa gia ca trang 11/18/2013 Cụng c thit k Web - HTML 3.1.1 Tng quan v HTML Trong mt HTML Document, ngoi phn body cũn cú phn head, c vit bi cp tag Nu bn s dng cp tag ny, bn bt buc phi vit thờm mt cp tag na, ú l Gia v l tờn ca trang web c browser trỡnh by phớa trờn cựng ca menubar Nh vy mt trang web vi "u" s cú cu trỳc nh sau: Trang web dau tien cua toi Phn bn cn trỡnh by Vớ d mt bc nh hay li Trong "head" ta cũn cú th a rt nhiu thụng tin vo cho browser, search engine Next 11/18/2013 Cụng c thit k Web - HTML 3.1.2 Cỏc th HTML I Các thẻ định cấu trúc tài liệu 1.1 HTML 1.2 HEAD 1.3 TITLE 1.4 BODY 11/18/2013 Cụng c thit k Web - HTML 1.1 HTML Toàn nội tài liệu đợc đặt 11/18/2013 Cụng c thit k Web - HTML 10 Nhúm phn t vi 11/18/2013 Cụng c thit k Web - HTML 73 Nhúm phn t vi 11/18/2013 Cụng c thit k Web - HTML 74 Box Model 11/18/2013 Cụng c thit k Web - HTML 75 Margin & padding Thuc tớnh margin Thuc tớnh padding 11/18/2013 Cụng c thit k Web - HTML 76 Thuc tớnh margin 11/18/2013 Cụng c thit k Web - HTML 77 Thuc tớnh padding Cỳ phỏp: Padding: | | | 11/18/2013 Cụng c thit k Web - HTML 78 Border Thuc tớnh border-width Thuc tớnh border-color Thuc tớnh border-style 11/18/2013 Cụng c thit k Web - HTML 79 Height & width Thuc tớnh width Thuc tớnh max-width Thuc tớnh min-width Thuc tớnh height Thuc tớnh max-height Thuc tớnh min-height 11/18/2013 Cụng c thit k Web - HTML 80 Float & clear Thuc tớnh float Thuc tớnh clear 11/18/2013 Cụng c thit k Web - HTML 81 Thuc tớnh float Thuc tớnh float cú giỏ tr: + Left: C nh phn t v bờn trỏi + Right: C nh phn t v bờn phi + None: Bỡnh thng 11/18/2013 Cụng c thit k Web - HTML 82 Thuc tớnh clear Thuc tớnh clear cú tt c thuc tớnh: left (trn bờn trỏi) right (trn bờn phi) both (khụng trn) none 11/18/2013 Cụng c thit k Web - HTML 83 Position Absolute position Relative position 11/18/2013 Cụng c thit k Web - HTML 84 Absolute position 11/18/2013 Cụng c thit k Web - HTML 85 Relative position S nh v tng i cho mt thnh phn l s nh v c tớnh t v trớ gc ti liu Cỏc thnh phn ó c nh v tng i s li khong khụng ti liu Cỏc thnh phn c nh v tng i s nhn giỏ tr position l relative 11/18/2013 Cụng c thit k Web - HTML 86 Layers #logo1 { position:absolute; top:70px; left:50px; z-index:1 } #logo2 { position:absolute; top:140px; left:100px; z-index:2 } #logo3 { position:absolute; top:210px; left:150px; z-index:3 } #logo4 { position:absolute; top:280px; left:200px; z-index:4 } #logo5 { 11/18/2013 position:absolute; top:350px; left:250px; z-index:5 } Cụng c thit k Web - HTML 87 [...]... trong trang Web 11/18/20 13 Cụng c thit k Web - HTML 19 4 .3 Các ký tự đặc biệt 11/18/20 13 Cụng c thit k Web - HTML 20 4.4 Sử dụng màu sắc trong thiết kế các trang Web Sau đây là một số giá trị màu cơ bản: 11/18/20 13 Cụng c thit k Web - HTML 21 4.4 Sử dụng màu sắc trong thiết kế các trang Web (TT) Cỳ phỏp: 11/18/20 13 Cụng c thit k Web - HTML 22 4.4 Sử dụng màu sắc trong thiết kế các trang Web (TT) Sau... cấp 11/18/20 13 Cụng c thit k Web - HTML 16 3. 1.2 Cỏc th HTML (TT) IV Các thẻ định dạng ký tự 4.1 Các thẻ định dạng in ký tự 4.2 Căn lề văn bản trong trang Web 4 .3 Các ký tự đặc biệt 4.4 Sử dụng màu sắc trong thiết kế các trang Web 4.5 Chọn kiểu chữ cho văn bản 4.6 Khái niệm văn bản siêu liên kết 11/18/20 13 Cụng c thit k Web - HTML 17 4.1 Các thẻ định dạng in ký tự 11/18/20 13 Cụng c thit k Web... 11/18/20 13 Cụng c thit k Web - HTML 11 1 .3 TITLE Tiêu đề của tài liệu 11/18/20 13 Cụng c thit k Web - HTML 12 1.4 BODY phần nội dung của tài liệu đợc đặt ở đây 11/18/20 13 Cụng c thit k Web - HTML 13 1.4 BODY (TT) 11/18/20 13 Cụng c thit k Web - HTML 14 3. 1.2 Cỏc th HTML (TT) II Các thẻ định dạng khối 2.1 Thẻ trình bày một đoạn P 2.2 Các thẻ định dạng tiêu đề H1/H2/H3/H4/H5/H6... 11/18/20 13 Cụng c thit k Web - HTML 35 3. 1 .3 S dng Frontpage thit k web tnh bng HTML 1 Khi ng FrontPage 2 To 1 trang web mi 3 To 1 website mi 4 ét thuc tớnh trang web: tiờu , nh nn, nhc nn, l 5 énh dng on 6 énh dng ký t 7 To hyperlink 8 To cỏc im dng(Bookmark) trong trang 9 Chốn hỡnh nh 10 To table 11 M trang web hoc web site ó cú 11/18/20 13 Cụng c thit k Web - HTML 36 ... chuột trên siêu liên kết TARGET Mở trang Web đợc liên trong một cửa sổ mới (_blank) hoặc trong cửa sổ hiện tại (_self), trong một frame (tên frame) 11/18/20 13 Cụng c thit k Web - HTML 26 3. 1.2 Cỏc th HTML (TT) V Các thẻ chèn âm thanh, hình ảnh 1 Đa âm thanh vào một tài liệu HTML: 2 Chèn một hình ảnh, một đoạn video vào tài liệu HTML: 11/18/20 13 Cụng c thit k Web - HTML 27 Đa âm thanh vào một tài liệu HTML... 11/18/20 13 Cụng c thit k Web - HTML 23 4.5 Chọn kiểu chữ cho văn bản Cú pháp: Cụng c thit k Web - HTML 24 4.6 Khái niệm văn bản siêu liên kết Để tạo ra một siêu văn bản chúng ta sử dụng thẻ Cú pháp: 11/18/20 13 Cụng c thit k Web - HTML 25 4.6 Khái niệm văn bản siêu liên kết (TT) ý nghĩa các tham số: HREF địa chỉ của trang Web đợc liên kết,... của ô 11/18/20 13 = LEFT / CENTER / RIGHT =n = color = color = color = url = color = spacing = pading = LEFT / CENTER / RIGHT = TOP / MIDDLE / BOTTOM = color =n =n Cụng c thit k Web - HTML 31 3. 1.2 Cỏc th HTML (TT) VII FORM 1 HTML Forms: 2 Tạo Form: 3 Tạo một danh sách lựa chọn: 4 Tạo hộp soạn thảo văn bản : 11/18/20 13 Cụng c thit k Web - HTML 32 Tạo Form Cỳ phỏp: 11/18/20 13 Cụng c thit k Web - HTML 33 Tạo một danh sách lựa chọn Cỳ phỏp: Tên mục chọn thứ nhất Tên mục chọn thứ hai 11/18/20 13 Cụng c thit k Web - HTML 34 Tạo hộp soạn thảo văn bản Cỳ phỏp: ... thit k website 11/18/20 13 Cụng c thit k Web - HTML 3. 1 Ngụn ng HTML 3. 1.1 Tng quan v HTML 3. 1.2 Cỏc th ca HTML 3. 1 .3 S dng Frontpage thit k web tnh 3. 1.4 nh dng website vi CSS 11/18/20 13 Cụng... đặc biệt 11/18/20 13 Cụng c thit k Web - HTML 20 4.4 Sử dụng màu sắc thiết kế trang Web Sau số giá trị màu bản: 11/18/20 13 Cụng c thit k Web - HTML 21 4.4 Sử dụng màu sắc thiết kế trang Web (TT)... 11/18/20 13 Cụng c thit k Web - HTML 34 Tạo hộp soạn thảo văn Cỳ phỏp: Vn bn ban u 11/18/20 13 Cụng c thit k Web - HTML 35 3. 1 .3 S dng Frontpage