Giáo trình môn Thiết kế web
lượt xem 169
download
Việc đầu tiên của bạn trên hành trình trở thành một nhà thiết kế trang web không gì khác chính là phát triển những kiến thức tin học cơ bản sơ đẳng hiện bạn đang có.
Bình luận(0) Đăng nhập để gửi bình luận!
Nội dung Text: Giáo trình môn Thiết kế web
- Thi t k Web
- N i dung Khám phá trang ch (Home Page)............................................ 1 Internet - m t t p h p các ph n c ng..................................................... 1 Khái ni m v trang Web ........................................................................ 1 Web site là gì?........................................................................................ 2 B n ch t c a các trang web ................................................................ 3 Hãy th t o t p tin HTML.................................................................. 5 Tìm hi u v HTML ................................................................................ 5 Các siêu liên k t và các web sites....................................................... 6 Tóm t t s l c ................................................................................... 7 Máy ch trên Internet ......................................................................... 7 T ng k t bài h c ..................................................................................... 8 Câu h i ki m tra..................................................................................... 9 Th c hành .............................................................................................. 9 T o và nh d ng trang Web ................................................... 11 Các y u t v n b n c a m t trang Web ............................................... 11 Thanh tiêu .................................................................................... 11 N i dung ........................................................................................... 12 Siêu liên k t ...................................................................................... 13 Bi u tr ng, v n b n h a và WordArt .......................................... 13 Các l a ch n chuy n h ng v n b n thu n túy................................ 13 Thông tin v ngày tháng ................................................................... 14 Thông tin b n quy n ......................................................................... 14 Các yêu c u thi t k n i dung trang Web ............................................ 14 T ng k t bài h c ................................................................................... 15 Câu h i ki m tra................................................................................... 16 Th c hành ............................................................................................ 16
- Thi t k Web S d ng h a trên trang Web .............................................. 18 C ch h a c a Web ....................................................................... 18 nh i m, b ng màu và màu s c ...................................................... 18 Các d ng t p tin h a .................................................................... 21 Các màu s c “an toàn” cho Web.......................................................... 22 nh JPEG ......................................................................................... 23 Kích c nh....................................................................................... 24 Thay i kích c h a ................................................................... 24 nh kích c hình nh.......................................................................... 25 C t xén hình nh............................................................................... 26 S d ng hình thu nh ....................................................................... 27 S d ng nh ch p ............................................................................. 27 T ng k t bài h c................................................................................... 28 Câu h i ki m tra................................................................................... 29 Th c hành ............................................................................................ 29 Không gian l u gi ................................................................... 30 K t n i Internet và không gian máy ch .............................................. 30 Không gian tr c tuy n mi n phí....................................................... 31 Mua không gian máy ch ................................................................. 32 ng ký a ch! Web............................................................................ 32 Tìm không gian cho trang Web c a b n .............................................. 33 Các công c t o trang Web .................................................................. 33 Trình so n th o v n b n và trình so n th o HTML.......................... 34 Trình so n th o v n b n và HTML c b n .......................................... 34 Trình so n th o v n b n và HTML thông th "ng ............................... 37 Các trình so n th o HTML chuyên sâu ............................................... 37 Các ng d ng h a ........................................................................ 38 Các ti n ích FTP................................................................................... 39 Các trình duy t ..................................................................................... 40 T ng k t bài h c................................................................................... 41 Câu h i ki m tra................................................................................... 41 Th c hành ............................................................................................ 41 ii
- N i dung L p k ho ch cho Website........................................................ 43 Xác nh các m c tiêu.......................................................................... 44 Tìm hi u v ng "i xem ........................................................................ 44 V# thi t k chi ti t cho trang Web........................................................ 46 L u gi$ các t p tin ............................................................................... 47 %t tên cho hình nh......................................................................... 48 Danh sách ki m tra l p k ho ch cho trang Web ............................. 50 %t n n t ng cho trang ch .................................................................. 51 Danh sách ki m tra l p k ho ch cho trang ch ............................... 52 T p h p công c và chu&n b xây d ng ............................................... 53 Danh sách ki m tra công c .............................................................. 54 T ng k t bài h c ................................................................................... 54 Câu h i ki m tra................................................................................... 54 Th c hành ............................................................................................ 55 Tìm hi u ngôn ng HTML....................................................... 57 T p h p các “d ng c ” c a d án ........................................................ 57 T i sao dùng HTML?........................................................................... 58 C b n v HTML ................................................................................. 58 S d ng các th' HTML .................................................................... 59 X lý các tài li u HTML và các h a Web ...................................... 64 L u và xem tr c các tài li u HTML............................................... 64 L p k ho ch cho trang HTML............................................................ 65 S p x p các th m c và các h a...................................................... 67 Chu&n b t p tin trang ch .................................................................... 68 Ch n màu n n và màu s c liên k t ....................................................... 70 T o b ng............................................................................................... 71 Chèn các liên k t bi u tr ng................................................................. 74 Chèn h a bi u ng$ trang ch .......................................................... 76 Thêm các liên k t chuy n h ng ......................................................... 77 Chèn thông tin vào cu i trang .............................................................. 80 Sao chép khung trang ch vào các trang ph ....................................... 83 Chèn v n b n vào thân trang ch ......................................................... 88 T o các u .................................................................................. 88 Thêm o n v n b n .......................................................................... 90 iii
- Thi t k Web nh d ng các khóa trích d(n và tô màu v n b n ............................. 91 T o danh sách các liên k t ................................................................ 93 Chèn m t b c nh có liên k t............................................................... 96 Hoàn t t trang ch ................................................................................ 97 S d ng m t trang ã có làm khung trang m(u ................................... 97 Các ngu n tài li u b sung................................................................... 99 Câu h i ki m tra................................................................................. 101 T o trang Web v i FrontPage ............................................... 103 L p k ho ch cho trang Web ............................................................. 104 T o m t trang Web m i ..................................................................... 106 T o b trí dàn trang cho trang ph ..................................................... 107 Thi t %t Page Properties................................................................ 107 L u công vi c c a b n .................................................................... 109 Thêm bi u tr ng và h a bi u ng$ tiêu .................................. 109 Chèn b ng....................................................................................... 112 Thêm nút chuy n h ng................................................................. 116 Thêm thông tin cu i trang phía d i b ng ..................................... 120 S d ng khuôn m(u trang ph xây d ng trang Web..................... 122 Chu&n b t o các trang ph ........................................................ 123 Thêm v n b n và h a thanh tiêu ........................................... 124 Chèn m t hình nh thu nh ............................................................ 128 T ob n nh ............................................................................... 130 T o bi u m(u .................................................................................. 132 Chu&n b trang Liên h ....................................................................... 132 Chèn m t vùng bi u m(u và thêm nhãn............................................. 133 T o tr "ng bi u m(u.......................................................................... 134 nh c u hình thu c tính tr "ng bi u m(u ........................................ 135 %t tên các tr "ng.............................................................................. 137 Hoàn thành trang liên h ................................................................. 138 T o m t trang ch trong FrontPage ................................................... 139 Thi t %t khung làm vi c c a Trang ch ........................................ 139 L p ráp h a chính ...................................................................... 141 T o liên k t bên trong h a chính ............................................... 143 iv
- N i dung Thêm HTML ng vào h a chính ............................................. 143 Chuy n trang Web lên Internet............................................. 149 Chuy n các t p tin c a b n lên Internet. ............................................ 150 Các trình ng d ng FTP ................................................................. 150 Các th m c Web và My Network Places...................................... 153 T om t a i m m ng s d ng My Network Places ................... 155 To a i m m ng t) trong Word ................................................. 156 Các l a ch n FTP khác................................................................... 158 Xem l i công trình c a b n ................................................................ 158 v
- Khám phá trang ch (Home Page) Sau khi hoàn thành bài h c này, các b n có th : S khác nhau gi a Internet và World Wide Web C u trúc c a m t trang web i n hình T o m t trang HTML n gi n và xem trang web Vi c u tiên c a b n trên hành trình tr* thành m t nhà thi t k trang web không gì khác chính là phát tri n nh$ng ki n th c tin h c c b n s ng b n hi n ang có. Ví d , ngoài nh$ng kh n ng s d ng vi tính "khiêm t n" mà b n s* h$u lúc này thì b n còn ph i tìm hi u m t chút m i liên h gi$a Internet, m ng thông tin toàn c u web và các trang web khác nhau. Vì v y, trình bày m t cách n gi n và d hi u, chúng tôi s# c t g n bài h c này và s# ch! miêu t s l c nh$ng nhân t chính c a m ng thông tin l n nh t th gi i - m ng Internet, web và các trang web. Sau khi gi i quy t xong nh$ng v n c b n nh t, chúng ta s# giành ph n còn l i c a các bài h c t p trung vào vi c l p k ho ch và xây d ng trang web c a riêng b n. Internet - m t t p h p các ph n c ng Nói m t cách n gi n Internet hay Net th c ra là các ph n c ng, r t nhi u các ph n c ng c k t n i v i nhau t o nên m ng toàn c u r ng l n. Ph n c ng Internet bao g m t t c các thi t b mà m t ng "i có th ch m vào c nh máy tính, các router (B nh tuy n), cáp, "ng dây i n tho i, m ch d$ li u t c cao và các thi t b m ng khác n$a. V y y, ó là t t c nh$ng gì b n c n bi t v Internet, Internet là ph n c ng. N u b n mu n tìm hi u v l ch s ra "i c a Internet thì xin m"i tìm hi u thông tin trên m ng và n hi u sách hay th vi n n i b n s ng. (B n c+ng có th ghé th m m t a ch! tài nguyên thông tin theo a ch! www.creationguide.com/resources, trang web này s# cung c p cho b n m t s "ng links h$u ích). Sau khi ã bi t Internet chính là ph n c ng, gi" chúng ta s# ti p t c m t lôgic khác. C+ng gi ng nh t t c các ph n c ng máy tính khác (ví d nh máy tính bàn hay máy tính xách tay), Internet c+ng c n ph n m m; n u không thì ph n l n các thi t b ph n c ng Internet trên toàn th gi i s# ch! n,m cho b i ph ngày qua ngày mà thôi. Vì th chúng ta s# chuy n sang tìm hi u v World Wide Web. Khái ni m v trang Web World Wide Web (c+ng c g i là WWW hay n gi n web) không n gi n và d hi u nh Internet. ó là b*i vì web bao g m các ph n m m
- Thi t k Web (ch ng trình, tài li u, và t p tin) cho phép thông tin có th c luân chuy n trong các ph n c ng Internet. Nh ã nói * trên, th c ch t Internet là c s* h t ng ph c v cho vi c truy n tin - ó là c s* h t ng c t o nên b*i máy tính, router, cáp, "ng dây i n tho i, m ch d$ li u t c cao và các ngu n thông tin c g i là máy ch . Nh ng c s* h t ng này l i có c u trúc r t khác nhau, không ph i máy tính nào c+ng ch y c t t c các nh d ng t p tin. Vi c áp d ng t t c các ph ng pháp hi n có (hay các c u hình hi n có) hi u c t t c các nh d ng t p tin trên t t c các máy tính là m t vi c làm không kh thi. Vì th nên c ng ng Internet ã sáng ch ra m t s n ph&m mang tính toàn c u cho riêng mình, th "ng c bi t n v i cái tên World Wide Web. Lúc u, Tim Berners-Lee ã nh n th c c v n và phát tri n m t web (m ng l i) nh th * phòng thí nghi m CERN * Thu- S. nh,m ph c v cho c ng ng v t lý n ng l ng cao. Web này ã nhanh chóng thu hút c s chú ý r ng rãi và t m nh h *ng v t ra ngoài gi i v t lý. V l ch s Internet thì b n có th tìm th y hàng lo t thông tin trên m ng hay trong r t nhi u sách v vi tính. Còn v i m c ích c a chúng ta thì ch! c n bi t Internet là ph n c ng còn Web là ph n m m th là . Qu là n gi n! Nào, chúng ta cùng chuy n sang m t trình cao h n - tìm hi u v các t p tin, các h/ tr ph n m m c a Web trên ph n c ng Internet. Web site là gì? Chúng ta hãy b t u i tìm hi u nh$ng trang web. Nói n gi n, khi bóc i t t c cái l p v t) ng$ chuyên ngành thì các trang web chính là các t p tin. C th h n, chúng là các t p tin HTML. Các b n )ng ý n "HTML" làm gì vì trong bài sau, chúng ta s# khám phá nh$ng bí m t v HTML. Còn lúc này b n ch! c n nh m t i u: trang web chính là các t p tin mà web l u gi$; c+ng gi ng nh các t p tin v n b n (.doc) c Microsoft Word s d ng. Do trang web chính là t p tin nên ch0ng c n ngh. sâu xa b n c+ng bi t r,ng thi t k 1 trang web n gi n là thi t k m t lo i t p tin nh t nh trong máy tính c a b n. Có nh$ng lo i t p tin nào? V n b n Word, b ng tính, c s* d$ li u, các trang web - t t c chúng u là t p tin. Nh v y là trang web c+ng ch0ng ph i là cái gì quá khó hi u. i m khác bi t gi$a trang Web và các t p tin thông th "ng là trang web th "ng luôn bao g m r t nhi u t p tin và các siêu liên k t và các trang web th "ng c nhóm vào các nhóm g i là các web sites. 2
- Khám phá trang ch (Home Page) B n ch t c a các trang web Chúng ta v)a kh0ng nh r,ng trang web n gi n ch! là các t p tin. Nh ng chúng ta c+ng nên tìm hi u xem nh$ng t p tin ó thu c lo i nào. Tr c khi i xa h n thì ít nh t b n c+ng ph i có m t chút hi u bi t (không nh t thi t ph i n m ch c) v các y u t c u thành và các t ng tác trong trang web. Tr c tiên, * c p c b n nh t, m/i m t trang web là m t tài li u v n b n. V n b n text là m t t p tin bao g m t), ch$ cái và s không kèm theo nh d ng nào. Nh ng ây ch a ph i là trang web âu, ây m i ch! là m t tài li u v n b n mà thôi. Hình 1-1 là m t ví d n gi n v m t tài li u v n b n m* trong Notepad. Hình 1-1. M t tài li u v n b n trong Notepad. nâng c p tài li u v n b n này thành m t trang web ti m n ng, b n ch! c n thêm vào các l nh HTML c th nh trong Hình 1-2. Hình 1-2. Tài li u v n b n này bao g m l nh HTML c b n cùng v i v n b n tiêu và m t dòng trong v n b n thân bài. 3
- Thi t k Web Sau khi b n ã thêm vào các câu l nh HTML, b n ph i l u tài li u v n b n nói trên v i uôi .html ho%c .htm thay cho uôi .txt hay .doc. Gi" thì b n có th m* tài li u nói trên b,ng trình duy t r i, ví d m* tài li u v i Internet Explorer. Hình 1-3 cho th y tài li u v n b n cùng v i các câu l nh HTML trong Hình 1-2 c th hi n th nào trong trình duy t. Hãy ý, trong hình 1-3 ch! xu t hi n thanh tiêu và ph n v n b n thân bài. ó là vì các l nh HTML ch! là các ch! d(n v cách th c th hi n thông tin ch không ph i là n i dung c th hi n. Hình 1-3. Trong trình duy t này, b n có th xem tài li u v n b n ch a các câu l nh HTML c c u trúc m t cách úng ki u. Chúng ta s# cùng tìm hi u quá trình thi t k m t web site s d ng HTML trong Notepad và Wordpad trong bài sau. Khi ó các b n s# th y HTML th c ra r t d hi u n u ta tìm hi u t) t) t)ng b c m t. (N u b n mu n m t thông tin áng khích l h n thì chúng tôi có th cho b n bi t r,ng b n hoàn toàn có th l p trang web mà ch0ng c n bi t gì v HTML c .) Lúc này thì b n c n ph i nh n ra r,ng: Trang web chính là các tài li u v n b n. Ch c ch n nhi u b n s# th c m c v m t i u h i trái ng c * ây khi chúng tôi tuyên b ch c n ch r,ng: trang web chính là tài li u v n b n. Nhi u b n s# v%n r,ng: N u v y t i sao trên web l i tràn ng p nh$ng hình nh ho ? ây chính là m t i u thú v , trên web b n hoàn toàn có th k t h p c t p tin tài li u v n b n v i các t p tin hình nh c th khác. i m m u ch t là ây: th hi n m t hình nh trên trang web, tài li u v n b n HTML s# ch a các câu l nh h ng d(n trình duy t tìm m t hình nh nào y và ch! cách th hi n nó trên trang web (v v trí, kích th c, ...). n ây, ch c b n ã th y rõ b n ch t nhi u t p tin c a trang web. Thông th "ng khi b n xem m t trang web trên m ng là b n ang xem m t s t p tin nh t nh - bao g m t p tin v n b n HTML và m t s t p tin hình nh khác. 4
- Khám phá trang ch (Home Page) Hãy th t o t p tin HTML B n có th t mình th y c tác d ng c a các câu l nh HTML. ánh o n v n b n trong Hình 1-2 vào Notepad. L u tài li u Notepad này lên màn hình (Desktop) ( sau này có th xoá i d dàng) * d ng t p tin HTML (.html) b,ng cách gõ: “tên t p tin.html” trong h p File name, và óng Notepad. Và bây gi" b n hoàn toàn có th xem v n b n ó b,ng trình duy t web theo nh$ng b c sau: B m chu t vào tên t p tin HTML v)a t o. M* trình duy t và kéo bi u t ng t p tin HTML th vào c a s trình duy t. Ho%c M* trình duy t, trong thanh a ch! ánh "ng d(n t i t p tin HTML. Chú ý s d ng tài li u v n b n nh ngu n thông tin n n cho tài li u HTML, b n có th i tên t p tin v n b n. th c hi n i u này, hãy nh p ph i vào tên tâp tin, và ch n Rename. Thay th uôi .txt b,ng .htm ho%c .html. Khi Windows hi n th h p thông i p h i b n có ch c mu n thay i lo i t p tin (và c nh báo b n v nh$ng "nguy hi m" ti m tàng), nh p Yes - b n không ti n hành b t k1 vi c phá h y t p v n b n nào * th"i i m này. Tìm hi u v HTML V n b n và các câu l nh HTML dùng t o trang web nh trình bày * trên c g i chung là mã ngu n c a trang web ó. (Mã ngu n * ây ch! c v n b n và các câu l nh HTML c dùng t o nên trang web.) H u h t các trình duy t u cho phép b n xem mã ngu n. Ví d : trong Internet Explorer, mu n xem mã ngu n, b n ch n Source * m c View trên thanh th c n. Sau khi ã xem hình 1-4, b n có th i n m t k t lu n “bao quát” nh sau: Khi xem m t trang web trên trình duy t Internet là b n ang xem r t nhi u t p tin ph i h p v i nhau t o ra m t trang web duy nh t. Sau khi ã hi u r,ng m t trang web bao g m nhi u t p tin, bây gi" ch c b n ã t!nh táo mà nh n ra r,ng, m t trang web không ng n c m t mình mà nó luôn dùng các siêu liên k t n i v i các trang web khác. 5
- Thi t k Web Hình 1-4: Xem th m c t p tin c a trang ch c a Hi p h i i n nh Arizona; ta có th th y rõ ràng có ba t p tin k t h p l i th hi n trang web này trên m ng. Các siêu liên k t và các web sites Nh tình hu ng gi nh ban u, ó là các b n ang mu n t o m t trang web và các b n v)a l t Net xong. Khi l t trên m ng, ch c b n ã b m vào r t nhi u siêu liên k t. Siêu liên k t là nh$ng v n b n hay nh$ng hình nh cho phép b n i ti p n nh$ng tài nguyên Internet và nh$ng trang web khác khi b n b m vào v n b n hay hình nh này. Dùng thu t ng$ chuyên ngành thì siêu liên k t là nh$ng nhân t có trong v n b n HTML, nh$ng nhân t d(n n nh$ng trang web hay nh$ng v n b n Internet khác (t ng t nh cách m t s câu l nh HTML s# d(n n các t p tin hình nh) hay nh$ng khu v c khác trên cùng m t trang web. Hình 1-5 cho th y m t s siêu liên k t (hyperlinks) trên trang ch c a Hi p h i i n nh Arizona a n các trang web khác. Khi b m vào m t trong nh$ng siêu liên k t này, trình duy t s# th hi n m t khu v c khác trên chính trang web ó ho%c m t trang web khác, có th ó là b t c trang nào trên Internet t i b t c n i nào trên th gi i ch không ph i ch! có m/i m t trang web b n v)a m i làm c. Là m t ng "i thi t k web, n u b n dùng siêu liên k t thì b n s# m%c nhiên s d ng nhi u trang web. Tâm lý chung là b n s# không thích a t t c thông tin lên m t trang ch v)a r ng l i v)a dài. Thay vào ó, b n có th mu n t o ra nhi u trang web nh h n có liên quan và c k t n i v i nhau. T p h p nh$ng trang web có liên k t nh th t o nên m t web site. 6
- Khám phá trang ch (Home Page) Hình 1-5. Siêu liên k t a ng i duy t web t i nhi u trang web khác, t i nh ng khu v c khác trên cùng m t trang web hay t i nh ng tài nguyên Internet khác. Tóm t t s l c n ây, các b n ã c bi t v : Internet, web, các trình duy t web, siêu liên k t và các trang web. Tuy nhiên, n ây thì chúng ta l i g%p ph i m t th c m c, ó là làm sao m t t p tin v n b n và m t s t p tin hình nh mà chúng ta v)a t o ra trên máy có th tr* thành m t trang web trên Internet. Tr c khi i quá sâu vào v n truy n thông tin trên trang web, chúng ta c n tránh m t s nh m l(n r t ph bi n là: Nh$ng ai xem trang web c a b n u có th xâm nh p vào máy vi tính c a b n. i u này không úng âu vì các trang web không c l u trên máy tính c a b n, mà chúng cl u trong máy ch . Máy ch trên Internet Máy ch n gi n là nh$ng chi c máy tính có c u hình m nh c dùng l u tr$ các t p tin Internet và ch y m t s ch ng trình ph n m m %c bi t tr l"i yêu c u c a khách hàng. Bây gi" chúng ta s# n v i thu t ng$ "khách". 7
- Thi t k Web V c b n, các t p tin web c truy n i thông qua mô hình khách/ch . Trong mô hình này, m t h th ng (máy ch ) k t n i m ng s# ph c v yêu c u c a m t h th ng khác (khách hàng). Trong vi c thi t k web, "khách hàng" là tên khác cho m t trình duy t web (ví d nh Internet Explorer) ch y trên máy tính c a ng "i s d ng, và m t máy ch là s k t h p gi$a m t máy tính c u hình m nh l u gi$ các trang web và các ph n m m áp ng nhu c u v th hi n các trang web c l u gi$. Vì th khi b n truy c p m t trang web, s# di n ra m t quá trình sau: 1. K t n i máy tính c a b n v i Internet và m* trình duy t. Nh p vào thanh a ch! m t a ch! web (URL) nào ó, nh n Enter ho%c nh n vào m t siêu liên k t trên trang u trình duy t c a b n. 2. "Khách hàng" (trình duy t c a b n) s# g i URL v)a c nh p vào h p Address ho%c URL ó cùng v i siêu liên k t qua "ng dây i n tho i, cáp, và có th là router n nhà cung c p d ch v Internet (ISP). ISP là công ty b n tr ti n có th truy c p Internet. 3. ISP c a b n sau ó l i g i yêu c u URL c a b n thông qua Internet, qua nhi u "ng dây cáp h n, nhi u router và các m ch d$ li u t c cao khác t i h th ng l u gi$ trang web c yêu c u (h th ng máy ch ) 4. T) h th ng máy ch thông tin v trang web yêu c u c g i qua Internet t i ISP c a b n và cu i cùng ISP c a b n s# chuy n l i nh$ng thông tin ó t i máy tính c a b n. V i vai trò c a m t ng "i thi t k trang web, sau khi t o ra m t trang web, b n s# sao chép các t p tin * trang web ó sang h th ng máy ch n i s# l u gi$ trang web c a b n. Vi c này c+ng n gi n nh thao tác sao chép t p tin t) c ng sang m m. N u b n dùng các ng d ng giao th c chuy n giao t p tin (FTP), Web Folders và My Network Places hay các trình cài %t web thì vi c sao chép các t p tin c a trang web b n t làm ch! n gi n là kéo các t p tin ó t) th m c g c sang th m c c a máy ch n i s# ch a trang web c a b n. Vì v y khi có ai ó xem trang web mà b n xu t b n, h s# truy c p vào h th ng máy ch có l u nh$ng t p tin trong trang web c a b n ch không ph i là truy c p tr c ti p vào máy c a b n. Nh v y là chúng ta ã k t thúc ph n t ng h p v nh$ng thành t c b n nh t v Internet và Web. Lúc này, ch c h0n b n ã s2n sàng i ti p v i vi c thi t k và v n hành trang web c a riêng b n, nh$ng v n s# c trình bày trong nh$ng ph n ti p theo. T ng k t bài h c Sau khi h c bài này chúng ta ã tìm hi u và n m c m t s khái ni m sau: Internet là ph n c ng. Web là ph n m m (bao g m các ch ng trình và tài li u). 8
- Khám phá trang ch (Home Page) Trình duy t là các ng d ng giúp b n xem các trang web. H u h t các trang web c b n u bao g m nhi u t p tin: m t t p tin v n b n HTML và các t p tin hình nh. Web site là m t nhóm các trang web có liên quan và k t n i v i nhau. Siêu liên k t giúp truy c p các trang web khác, các khu v c khác trên cùng m t trang và các ngu n tài nguyên khác trên Internet. Internet s d ng mô hình khách/ch (client/server) trong ó h th ng máy ch áp ng các òi h i c a khách v thông tin. Ng "i dùng Internet truy c p các trang web c l u trên h th ng máy ch . N u b n dùng c máy tính thì )ng b n kho n, b n hoàn toàn có th thi t k c m t trang web c a riêng mình. Câu h i ki m tra 1. Có gì khác bi t chính gì gi$a Internet và World Wide Web? 2. B n ch t nhi u trang c a trang Web ngh.a là gì? 3. Trang Web là gì? 4. Th nào là m t trình duy t Web? 5. M c ích c a siêu liên k t trên trang Web là gì? 6. Mô hình khách/ch c a Internet ho t ng nh th nào? Th c hành Bài t p 1: Bài h c này khái quát m t s khái ni m v trang Web, bao g m ph n chúng c t o ra v i các t p tin HTML. B n có th xem mã ngu n HTML c a trang Web sau khi hi n th trang trong trình duy t. Trình bày quá trình hi n th mã ngu n HTML c a trang Web b,ng cách hi n th trang Web www.creationguide.com và sau ó hi n th mã ngu n HTML c a trang. Sau khi xem mã ngu n, óng trình biên t p v n b n và duy t các c a s . th c hành l u tài li u v n b n d i d ng t p tin HTML, t o Bài t p 2: m t tài li u v n b n n gi n, gõ v n b n, và l u t p tin. Trong bài t p này, m* Notepad và gõ m t câu n gi n trong tài li u v n b n. L u tài li u v n b n d i d ng t p tin HTML trên máy tính c a b n và sau ó óng tài li u l i. b t u tìm hi u thêm v HTML, hãy thêm các th' HTML Bài t p 3: vào tài li u v n b n b n ã t o và l u trên máy tính c a b n. làm i u này, m* Notepad, và sau ó m* tài li u v n b n b n ã t o. Ti p theo, gõ 9
- Thi t k Web v nb n c hi n th trong Hình 1-2, ngo i tr) vi c b n t t o dòng tiêu c a riêng b n và chèn v n b n c a b n vào v trí c a v n b n Thông th ng, n c s t cà chua n m ch nên cho vào m t ít thôi. L u nh$ng thay i c a b n, óng Notepad, và sau ó m* trang Web trong trình duy t c a b n. Xem mã ngu n trang Web c a b n, và sau ó óng Notepad và duy t các c a s . 10
- T o và nh d ng trang Web Sau khi hoàn thành bài h c này, b n s bi t: Nh ng i u ki n m t trang Web có th c cho là t t. Xác nh các y u t v n b n ch y u c a m t trang Web Ch n các k thu t khác nhau trang trí trang Web. Khi ai ó suy tính v chuy n xây d ng trang Web, h th "ng ngh. n thi t k u tiên - t c là trông trang Web s# nh th nào ch không ph i là nó s# nói i u gì. Tuy nhiên, thành công trang Web c a b n ph i cung c p nh$ng thông tin nhanh chóng thu hút c s chú ý c a ng "i xem; n u không, ng "i xem s# không * l i thêm b t k1 giây phút nào và có th s# không quay l i n$a. Do v y, b n nên b t u ngh. v n i dung c a trang Web tr c khi b n i quá sâu vào thi t k c a nó. N u b n theo dõi bài h c này, b n s# có th xây d ng n i dung trang Web y và rõ ràng.. Nh ng th m chí n u b n ch a xây d ng n i dung cho m t trang Web c th nào n m c ó, nhìn chung b n v(n có th xác nh và xây d ng n i dung Web t t. H n n$a, b n s# bi t cách t i a hóa l i ích c a v n b n trong trang Web t ng lai c a b n. N u b n nh rõ nh$ng bí quy t này, b n s# có th d dàng ph i h p n i dung và thi t k khi b n b t u xây d ng trang Web. Bây gi" tr* l i v i v n tr c m t ó là b n ang ph i thi t k m t v n b n tr c tuy n. V n b n tr c tuy n t hi u qu hay không b n ph i quan tâm n tính ch t: rõ ràng, ti p th , h p d(n v hình nh, gi i h n công ngh , và m t chút tâm lý c gi . Các y u t v n b n c a m t trang Web H u h t các trang Web u s d ng nhi u thành t v n b n, nh minh h a trong Hình 2-3. Nh b n có th th y trong hình (c+ng nh h u h t các trang Web), các y u t v n b n xu t hi n trên các trang Web c mô t trong ph n sau ây. Thanh tiêu Khi b n t o m t trang Web, ph i t o v n b n xu t hi n trên thanh tiêu c a c a s trình duy t. Y u t c n b n c a tiêu là rõ ràng, chính xác và h$u ích. L u ý r,ng khi b n m* m t trang Web, tiêu c a trang Web xu t hi n trên thanh tác v c a Windows. N i dung tiêu trên thanh tác v giúp ng "i dùng có th d dàng h n khi h chuy n i gi$a m t s c a s ang m*. Do v y, m%c dù b n có th chèn vào các n i dung tiêu thông minh ho%c dí d m, song b n nên d a vào các y u t h$u ích và rõ ràng. Hãy xem l i các n i dung tiêu không h p lý trong các Hình 2-1 và 2-2.
- Thi t k Web Hình 2-3. Các trang Web hi u qu có m t s y u t v n b n chung. N i dung N i dung c a m t trang Web c p n th c ch t v n c a nó - lý do khi n m i ng "i ghé th m trang web. N i dung c a m t trang Web ph i rõ ràng, ng n g n, d l t, nhi u thông tin, có tính c p nh t và không có l/i chính t ,…. Luôn ghi nh r,ng dù m t trang Web trông có 3p m t n âu, %c tính h p d(n c a Internet v(n là v n b n. 12
CÓ THỂ BẠN MUỐN DOWNLOAD
-
Giáo trình Thiết kế Web - CĐ Nghề Công Nghiệp Hà Nội
278 p | 84 | 24
-
BÀI GIẢNG MÔN THIẾT KẾ WEB: NGÔN NGỮ JavaScript
9 p | 121 | 17
-
Giáo trình Thiết kế web (Nghề: Quản trị mạng máy tính - Trung cấp) - Trường CĐ Nghề Kỹ thuật Công nghệ
112 p | 62 | 17
-
Giáo trình môn học/mô đun: Lập trình PHP căn bản (Ngành/nghề: Thiết kế trang web) - Phần 2
115 p | 66 | 16
-
Giáo trình môn học/mô đun: Thiết kế đa phương tiện – Flash (Ngành/nghề: Thiết kế trang web) - Phần 2
60 p | 61 | 16
-
Giáo trình môn học/mô đun: Thiết kế đa phương tiện – Flash (Ngành/nghề: Thiết kế trang web) - Phần 1
110 p | 52 | 15
-
Giáo trình môn học: Lập trình web nâng cao (XML) - Trường CĐN Đà Lạt
255 p | 65 | 15
-
Giáo trình môn học/mô đun: Khai thác phần mềm quản lý dự án (Microsoft Project): Phần 2
94 p | 59 | 14
-
BÀI GIẢNG MÔN THIẾT KẾ WEB :Chuyển màn hình qua trang Data
10 p | 79 | 14
-
Giáo trình môn học: PHP và MySQL (Ngành/nghề: Thiết kế trang web) - Trường CĐN Đà Lạt
42 p | 54 | 13
-
Giáo trình môn học: Thiết kế giao diện web (Ngành/nghề: Thiết kế trang web) - Trường CĐN Đà Lạt
63 p | 60 | 12
-
Giáo trình môn học/mô đun: Tối ưu hóa cho tìm kiếm thông tin - Trường CĐN Đà Lạt
32 p | 73 | 12
-
Giáo trình môn học/mô đun: Lập trình web với ASP.NET: Phần 2
42 p | 55 | 10
-
Giáo trình môn học/mô đun: Công cụ thiết kế và vẽ đồ họa (Ngành/nghề: Thiết kế trang web) - Phần 2
72 p | 34 | 9
-
Giáo trình môn học/mô đun: Phân tích và thiết kế hướng đối tượng (Ngành/nghề: Thiết kế trang web) - Phần 2
98 p | 59 | 5
-
Giáo trình môn học/mô đun: Phân tích và thiết kế hướng đối tượng (Ngành/nghề: Thiết kế trang web) - Phần 1
140 p | 53 | 5
-
Giáo trình Đồ họa thiết kế web (Nghề: Tin học ứng dụng - Cao đẳng) - Trường Cao đẳng Bách khoa Nam Sài Gòn (2023)
261 p | 13 | 4
Chịu trách nhiệm nội dung:
Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA
LIÊN HỆ
Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM
Hotline: 093 303 0098
Email: support@tailieu.vn