Bạn mê tin học? Bạn muốn tìm hiểu về website? Bạn muốn tạo một trang web cho riêng mình? Vậy thì bạn không thể bỏ qua cuốn giáo trình thiết kế website này được. Đây là cuốn giáo trình của GV. Tần Bửu Dung trường ĐH Đà Nẵng. Nội dung đầy đủ, giải thích rõ ràng có thể giúp các bạn hiểu thêm về website và cách tạo lập website
ð I H C ðÀ N NG TRƯ NG CAO ð NG CÔNG NGH KHOA ðI N – B MÔN CNTT GIÁO TRÌNH THI T K WEBSITE Biên so n: GV Tr n B u Dung ðà N ng, tháng 09/2012 Giáo trình Thi t k website ðHðN – Trư ng Cao đ ng Cơng ngh CHƯƠNG 1: GI I THI U CHUNG I.1 Các khái ni m c b n I.1.1 M ng máy tính • M ng (Network) t p h p h th ng máy tính thi t b m ng chia s d li u, chương trình, tài nguyên thơng qua đư ng truy n k t n i truy n thông dùng chung, s h u hành m ng • ðư ng truy n h th ng thi t b truy n d n v t lý ñ chuy n t i tín hi u sóng n t ðư ng truy n v t lý có th phân thành lo i: o H u n: Cáp đ ng tr c, cáp đơi dây xo n, cáp quang, cáp ñi n tho i, cáp ñi n thơng thư ng o Vơ n: Sóng viba, h ng ngo i,… • Có th phân m ng thành lo i: o M ng c c b (LAN: Local Area Network): m ng c c b ph m vi nh o M ng di n r ng (WAN: Wide Area Network): s d ng ñư ng dây ñi n tho i ho c phương ti n liên l c khác ñ liên k t máy tính v i ph m vi t vài ch c đ n vài nghìn d m LAN WAN khác nhi u v qui mô m c ñ ph c t p, m ng LAN ch có th liên k t vài máy tính v i thi t b ngo i vi máy in Các h th ng ph c t p có máy tính trung tâm cho phép ngư i dùng ti n hành thông tin v i thơng qua thư n t đ phân ph i chương trình nhi u ngư i s d ng đ có th s d ng đư c s d li u dùng chung o M ng th (MAN): m ng tr i dài khơng gian đ a lý l n LAN nh WAN MAN thư ng ñư c s d ng m ng c a thành ph hay khu công nghi p o M ng toàn c u (GAN: Global Area Network ): m ng toàn c u bao g m máy tính nhi u nư c khác k t n i v i nhau, ví d m ng Internet o M ng Intranet I.1.2 Internet – Intranet Gi ng viên: Tr n B u Dung Giáo trình Thi t k website ðHðN – Trư ng Cao ñ ng Cơng ngh • Intranet m ng c c b không n i vào Internet cách truy n thông c a chúng theo ngôn ng chung TCP/IP • Internet m t m ng máy tính tồn c u máy truy n thơng v i theo m t ngôn ng chung TCP/IP M ng Internet mang l i r t nhi u ti n ích cho ngư i s d ng h th ng thư n t (email), trị chuy n tr c n (chat), máy truy tìm d li u (search engine), d ch v thương m i chuy n ngân, d ch v v y t , giáo d c ch a b nh t xa ho c t ch c l p h c o…Vì v y, ngày m ng Internet m ng trao đ i thơng tin toàn c u, bao g m hàng trăm tri u ngư i s d ng I.1.3 Mơ hình Client - Server • Request-Reponse (u c u – H i đáp) phương th c b n mà máy tính s d ng đ giao ti p v i • Mơ hình client-server (mơ hình khách - ch ) m t mơ hình n i ti ng m ng máy tính, đư c áp d ng r t r ng rãi mơ hình c a m i trang web hi n o Server s ch a tài nguyên dùng chung cho nhi u máy khách (client) tài li u, máy in, t p tin … o Cách ho t đ ng c a mơ hình server tr ng thái ho t ñ ng 24/24 ch máy (đóng vài trị máy khách) g i m t u c u (request) đ n máy ch (đóng vai trò ngư i cung ng d ch v ), máy ch s x lý tr k t qu v cho máy khách o Ưu ñi m c a mơ hình ti t ki m th i gian, tài chính, d qu n tr h th ng I.1.4 Giao th c m ng TCP/IP • ð m t chương trình server m t chương trình client có th giao ti p đư c v i gi a chúng ph i có m t chu n đ nói chuy n, chu n đư c g i giao th c Giao th c m ng t p h p qui t c truy n thông c a m ng mà t t c th c th tham gia truy n thông ph i tuân theo N u m t chương trình client mu n u c u l y thơng tin t server ph i tn theo giao th c mà server đưa V i s phát tri n m ng hi n có r t nhi u giao th c chu n m ng ñ i nh m ñáp ng nhu c u phát tri n Các giao th c chu n ( t ng m ng v n chuy n) ñư c s d ng r ng rãi nh t hi n như: giao th c TCP/IP, giao th c SNA c a IBM, OSI, ISDN, X.25 ho c giao th c LAN-to-LAN NetBIOS Gi ng viên: Tr n B u Dung Giáo trình Thi t k website ðHðN – Trư ng Cao ñ ng Cơng ngh • TCP/IP đư c vi t t t t Transmission Control Protocol / Internet Protocol (Giao th c u n truy n thơng / Giao th c Internet) • Internet Server Server cung c p d ch v Internet (Web Server, Mail Server, FTP Server…) • Internet Service Provider (ISP): Là nơi cung c p d ch v Internet cho khách hàng M i ISP có nhi u khách hàng có th có nhi u lo i d ch v Internet khác • Hosting Provider cơng ty ho c t ch c ñưa trang web lên m ng • IP (Internet Protocol) : Các máy s d ng m ng Internet liên l c v i theo m t tiêu chu n truy n thông g i Internet Protocol (IP) • IP Address (đ a ch IP): đ vi c trao đ i thơng tin m ng Internet th c hi n ñư c m i máy m ng c n ph i ñư c ñ nh danh ñ phân bi t v i máy khác o M i máy tính m ng đư c đ nh danh b ng m t nhóm s đư c g i ñ a ch IP ð a ch IP g m s th p phân có giá t ñ n 255 ñư c phân cách b i d u ch m o Ví d : 192.168.0.1 đ a ch IP có giá tr tồn m ng Internet o U ban phân ph i ñ a ch IP c a th gi i s phân chia nhóm đ a ch IP cho qu c gia khác Thơng thư ng đ a ch IP c a m t qu c gia quan bưu ñi n qu n lý phân ph i l i cho ISP M t máy tính thâm nh p vào m ng Internet c n có m t đ a ch IP ð a ch IP có th c p t m th i ho c c p vĩnh vi n Thông thư ng máy Client k t n i vào m ng Internet thơng qua m t ISP b ng đư ng ñi n tho i Khi k t n i, ISP s c p t m th i m t IP cho máy Client I.1.5 Phương th c truy n thông tin Khi m t máy tính có đ a ch IP x (máy X) g i tin ñ n máy tính có đ a ch IP y (máy Y) phương th c truy n tin b n di n sau: N u máy X máy Y n m m t m ng thơng tin s đư c g i ñi tr c ti p Còn máy X Y khơng n m m ng thơng tin s ñư c chuy n t i m t máy trung gian có đư ng thơng v i m ng khác r i m i chuy n t i máy Y Máy trung gian g i Gateway I.2 Website khái ni m liên quan I.2.1 World Wide Web Gi ng viên: Tr n B u Dung Giáo trình Thi t k website ðHðN – Trư ng Cao đ ng Cơng ngh • World Wide Web (WWW) ñư c m t k sư ngư i Anh Tim Berners – Lee phát minh hoàn thi n vào năm 1991 Xu t phát t nhu c u h th ng l i nh ng ghi chép l n x n c a mình, nhanh chóng tìm liên k t đư c v i nh ng tài li u tham kh o t i b t c ch m t văn b n, Tim Berners-Lee ñã phát minh m t ph n m m m t giao di n văn b n có th t o liên k t v i file d li u máy tính c a mình, sau phát tri n tính có th liên k t v i b t c file d li u máy tính m ng Internet T p h p trang web kh p nơi th gi i thông qua m ng Internet t o thành World Wide Web • World Wide Web (WWW) ch ph n nh c a Internet m t d ch v ph bi n nh t hi n Internet, m t h th ng siêu văn b n có th liên k t nhi u lo i văn b n nhi u ngu n khác D ch v ñưa cách truy xu t tài li u c a máy client d dàng thơng qua giao ti p đ h a ð s d ng d ch v máy Client c n có m t chương trình g i Web Browser • T ch c W3C (World Wide Web Consortium) ñư c thành l p vào năm 1994 hi p h i l p chu n cho Internet, nh t cho WWW • HTTP (HyperText Transfer Protocol - Giao th c truy n t i siêu văn b n) giao th c Client/Server dùng cho World Wide Web, ñư c dùng ñ liên h thông tin gi a máy cung c p d ch v (Web server) máy s d ng d ch v (Web client) HTTP m t giao th c ng d ng c a b giao th c TCP/IP (các giao th c n n t ng cho Internet) I.2.2 Website a Khái ni m • Web Site m t lo i siêu văn b n có ñ a ch c th nh t, ñó t p h p trang web liên quan đ n cơng ty, m t t p ñoàn, t ch c hay cá nhân ñó Trên trang web có th ñ t liên k t t i trang web khác m t cách ñơn gi n ti n l i • Trang web (Web page) m t file văn b n ch a nh ng th HTML ho c nh ng ñ an mã ñ c bi t mà trình t web có th hi u thơng d ch ñư c, file ñư c lưu v i ph n m r ng html ho c htm Web page ñư c ñ t máy ch Web cho máy khách có th truy c p đư c • Nói cách khác, website tương t qu ng cáo trang vàng, có ñi m khác ch cho phép ngư i truy c p có th tr c ti p th c hi n nhi u vi c website giao ti p, trao đ i thơng tin v i ngư i ch website v i nh ng ngư i truy c p khác, Gi ng viên: Tr n B u Dung Giáo trình Thi t k website ðHðN – Trư ng Cao đ ng Cơng ngh tìm ki m, mua bán ch không ph i ch xem qu ng cáo thông thư ng Hàng tri u ngư i kh p th gi i có th truy c p website - nhìn th y ch không gi i h n ph m vi lãnh th c Khi b n xem thông tin m t trang Web trang Web có th ñ n t M , t Vi t Nam, hay b t c nơi khác th gi i • Các Website đư c s h u b i m t cá nhân ho c t ch c • ð i v i m t doanh nghi p, Website m t c a hàng o v i hàng hố d ch v có th ñư c gi i thi u rao bán th trư ng tồn c u C a hàng m c a 24 gi m t ngày, ngày m t tu n, cho phép khách hàng c a b n tìm ki m thơng tin, xem, mua s n ph m d ch v c a b n b t c lúc h mu n Website m t văn phòng o c a doanh nghi p m ng Internet Website bao g m toàn b thơng tin, d li u, hình nh v s n ph m, d ch v ho t ñ ng s n xu t kinh doanh mà doanh nghi p mu n truy n ñ t t i ngư i truy c p Internet V i vai trò quan tr ng v y, có th coi Website b m t c a cơng ty, nơi đ đón ti p giao d ch v i khách hàng m ng Website không ch ñơn thu n nơi cung c p thông tin cho ngư i xem, cho khách hàng ñ i tác kinh doanh c a doanh nghi p, cịn ph i ph n ánh đư c nh ng nét ñ c trưng c a doanh nghi p, ñ m b o tính th m m cao, ti n l i, d s d ng ñ c bi t ph i có s c lơi cu n ngư i s d ng ñ thuy t ph c h tr thành khách hàng c a doanh nghi p b L ch s phát tri n web • Ngày 6-8-1991: Tim Berners-Lee công b d án “World Wide Web” t i newsgroup alt.hypertext • Ngày 12-12-1991: Paul Kunz, m t nhà khoa h c thu c trung tâm Stanford Linear Accelerator Center (SLAC), sau chuy n thăm phịng thí nghi m Cern (nơi Berners Lee làm vi c) quy t ñ nh l p m t máy ch cho B c M ðây vi c làm c n thi t ñ ñưa web kh p th gi i Máy ch c a SLAC dùng ph n m m Berners Lee phát tri n • Tháng 11-1992: ðã có 26 máy ch web online • Ngày 22-4-1993: Trình t Mosaic đ u tiên cho h u hành Windows đ i • Ngày 30-4-1993: Cơng ngh web mã chương trình mi n phí cho t t c m i ngư i • Tháng 5-1993: Vi n công ngh Massachusetts tung cơng ngh m i, l n đ u tiên đưa m t t báo lên web Gi ng viên: Tr n B u Dung Giáo trình Thi t k website ðHðN – Trư ng Cao đ ng Cơng ngh • Tháng 6-1993: Ngôn ng HTML (Hypertext Mark Language) dùng l p trình web đư c cơng b • Tháng 2-1994: Ti n thân c a Yahoo ñư c đưa lên internet • Ngày 1-7-1995: Hi u sách tr c n Amazon khai trương • Tháng 8-1995: ðã có 18.957 website • Ngày 24-8-1995: Microsoft Internet Explorer (IE) ñư c phát hành m t ph n Windows 95 • Tháng 9-1998: Google m c a văn phịng đ u tiên c a t i m t gara California • Tháng 8-2000: ðã có g n 20 tri u website • Ngày 9-11-2004: Mozilla Firefox m t cơng chúng • Tháng 2-2005: Website chia s video youtube.com đ i • Tháng 11-2006: ðã có kho ng 102 tri u websites • Tháng 12-2009: có kho ng 234 tri u website c Phân lo i • Web tĩnh (static pages): Tính ch t c a lo i trang web ch y u hi n th n i dung cho ngư i dùng xem • Form pages (m u bi u): Ngồi n i dung web tĩnh, cịn ch a m u bi u cho phép nh p yêu c u t phía ngư i s d ng Khi ngư i dùng ñi n xong form n nút Submit t t c thơng tin u c u s ñưa ñ n ñ u vào c a chương trình CGI (Common Gateway Interface: cho phép t o chương trình ch y ngư i dùng g i yêu c u) ch y Server Lo i web thư ng dùng ñ làm phi u ñi u tra, trưng c u ý ki n, mua hàng • Web đ ng (Dynamic pages): N i dùng c a trang web ñ ng tương t trang web tĩnh, ngồi cịn ch a ño n mã l nh cho phép truy c p s d li u m ng Tùy theo nhu c u, ng d ng có th cung c p kh truy c p d li u, tìm ki m thơng tin I.2.3 M t s khái ni m liên quan a Web server • Web Server máy ch có dung lư ng l n, t c ñ cao, ñư c dùng ñ lưu tr thông tin m t ngân hàng d li u, ch a nh ng website ñã ñư c thi t k v i nh ng thông tin liên quan khác (các mã Script, chương trình, file Multimedia) Gi ng viên: Tr n B u Dung Giáo trình Thi t k website ðHðN – Trư ng Cao đ ng Cơng ngh • Web Server có kh g i ñ n máy khách nh ng trang Web thông qua môi trư ng Internet (ho c Intranet) qua giao th c HTTP - giao th c ñư c thi t k ñ g i file ñ n trình t Web (Web Browser), giao th c khác • T t c Web Server ñ u có m t ñ a ch IP (IP Address) ho c có th có m t Domain Name Gi s b n nh p vào Address trình t c a b n m t dịng http://www.dantri.com sau nh n phím Enter, b n s g i m t yêu c u ñ n m t Server có Domain Name www.dantri.com Server s tìm trang Web có tên index.html r i g i đ n trình t c a b n B t kỳ m t máy tính có th tr thành m t Web Server b i vi c cài đ t lên m t chương trình ph n m m Server Software sau k t n i vào Internet, đơi ngư i ta g i ph n m m Web Server • T t c Web Server ñ u hi u ch y ñư c file *.htm *.html, nhiên m i Web Server l i ph c v m t s ki u file chuyên bi t ch ng h n như: o IIS c a Microsoft dành cho *.asp, *.aspx o Apache dành cho *.php o Sun Java System Web Server c a SUN dành cho *.jsp Trong đó, Apache HTTP Server web server m nh m , uy n chuy n, tương thích v i giao th c HTTP/1.1 b Web browser Web Browser trình t Web, dùng đ truy xu t tài li u xem thông tin Web Server Ngày nay, có nhi u trình t đư c s d ng Internet M i trình t có nh ng đ c m khác chúng hi n th trang web khơng hồn toàn gi ng Mozilla Firefox Microsoft Internet Explorer (IE) hai trình t đư c s d ng ph bi n Ngồi ra, cịn có chương trình t Web thơng d ng khác như: • Opera c a Opera Software • Safari Mac OS X, c a Apple Computer • Maxthon c a MySoft Technology • Avant Browser c a Avant Force (Ý) • Google Chrome c a Google c Home page Gi ng viên: Tr n B u Dung ðHðN – Trư ng Cao đ ng Cơng ngh Giáo trình Thi t k website • Home page trang web đ u tiên website, hay g i trang ch d Hyperlink • Hyperlink tên khác c a hypertextlink , g i siêu liên k t • Siêu liên k t giúp ta d dàng tìm ki m thơng tin khác v ch đ • M t siêu liên k t ph n c a trang web Khi ta click chu t vào s t đ ng th c hi n công vi c sau : o ðưa ñ n ph n khác c a trang o ðưa ñ n trang khác site o ðưa ñ n trang khác c a site khác o Cho phép download file o Ch y ng d ng, trình di n ho c đo n video e URL • M i ngu n web có nh t m t đ a ch r t khó nh Vì v y, ngư i ta s d ng URL (Uniform resource locator) m t chu i cung c p ñ a ch Internet c a m t web site ho c ngu n WWW ð nh d ng ñ c trưng là: www.nameofsite.typeofsite.countrycode • URL: m t đ a ch , ch ñ n m t file c th ngu n tài nguyên m ng • URL nh n bi t giao th c c a site ho c ngu n ñư c truy c p Có hai d ng URL : o URL t ñ i – ñ a ch Internet ñ y ñ c a m t trang ho c file, bao g m giao th c, v trí m ng, đư ng d n tuỳ ch n tên file Ví d : http:// www.microsoft.com/ms.html o URL tương ñ i - mơ t ng n g n đ a ch t p tin k t n i có đư ng d n v i t p tin hi n hành, URL tương ñ i ñơn gi n bao g m tên ph n m r ng c a t p tin Ví d : index.html I.3 Cơng c h tr thi t k ngơn ng l p trình web I.3.1 Công c h tr thi t k web • Ph n m m thi t k giao di n, t o x lý nh cho trang web Photoshop, Corel Draw… • Ph n m m Macromedia Dreamweaver trình biên so n HTML chuyên nghi p dùng ñ thi t k , vi t mã phát tri n website trang web ng d ng web Gi ng viên: Tr n B u Dung ðHðN – Trư ng Cao ñ ng Cơng ngh Giáo trình Thi t k website I.3.2 Ngơn ng l p trình web • PHP: ðư c ch y máy ch Linux ho c Windows, có ñ c ñi m m nh m , d vi t, d dùng, d phát tri n ði đơi v i PHP s d li u MySQL PHP tr thành ngơn ng l p trình web ph bi n nh t hi n • ASP: Ch y máy ch Windows, thư ng s d ng s d li u Access, ñư c Microsoft phát tri n nh m vào ñ i tư ng ng d ng văn phịng • ASP.NET: Ch y máy ch Windows ðư c Microsoft xây d ng n n t ng NET, k t h p v i s d li u MSSQL Server • JSP, CGI, Python: Ch y máy ch Windows / Linux, hi n khơng cịn ph bi n I.4 Qui trình xây d ng ng d ng web Qui trình xây d ng ng d ng web g m bư c sau: • Giai đo n Giai đo n ti p xúc, tìm hi u (Initial Planning Phase) o Tìm hi u khách hàng o Tìm hi u sơ b nhu c u làm Web site • Giai đo n Giai đo n phân tích (Analysis Phase) o Xác đ nh m c tiêu kinh doanh, yêu c u v ch c ý đ cơng ngh chi ti t c a Web site o Kh o sát n i dung nhu c u n i dung c a ngư i xem; ví d Web site tương t o Th o lu n l ch trình th ng nh t gi i pháp, kh i lư ng công vi c • Giai đo n Giai đo n thi t k (Design Phase) o Thi t k ñ ho t Design Prototype v i khách hàng o Th nghi m ý ñ : User prototype k ch b n tương tác o Phát tri n chi ti t design ñ ho ñ ng o Th o lu n, t th ng nh t b n thi t k & k ch b n • Giai ño n Giai ño n xây d ng (Production Phase) o Chuy n hoá thi t k ñ ho thành m u trang Web o Tích h p v i h th ng qu n tr n i dung WEB++ o T o c u trúc n i dung o C p nh t m u n i dung thông tin o Gi i thi u hư ng d n sơ b ch c Gi ng viên: Tr n B u Dung 10 ðHðN – Trư ng Cao đ ng Cơng ngh Giáo trình Thi t k website K t qu n Label • Cú pháp: T o nhãn liên k t v i thành ph n kèm Trong đó: idname giá tr thu c tính ID thành ph n form tương ng • Ví d Mã ngu n Firsname: Last name: K t qu o Fieldset • Cú pháp: Nhóm vùng nh p v i Gi ng viên: Tr n B u Dung 80 ðHðN – Trư ng Cao đ ng Cơng ngh Giáo trình Thi t k website Trong đó: th dùng đ t o nhãn c a fieldset • Ví d Mã ngu n Personal information: Name: E-mail: Date of birth: K t qu III.7.3 ði u n ph n t form a ð nh th t tab Dùng th t tab ñ di chuy n gi a ñ i tư ng form, m c ñ nh theo th t c a mã HTML Mu n ñ nh l i th t ta dùng thu c tính TabIndex = n tag t o thành ph n c a form, n th t c a tab, có giá tr t đ n 32767 Trong form, ta thư ng ñ nh th t tab cho thành ph n: textbox, password, checkbox, radio, button, textarea, menu, … Gi ng viên: Tr n B u Dung 81 ðHðN – Trư ng Cao ñ ng Cơng ngh Giáo trình Thi t k website b T o phím t t • Cách t o phím t t: Trong tag t o thành ph n c a form, s d ng thu c tính AccessKey = ”Phím t t” • S d ng phím t t: Nh n t h p phím Alt + Phím t t III.8 DHTML III.8.1 ð nh nghĩa • Ngơn ng ñánh d u siêu văn b n ñ ng (Dynamic Hypertext Markup Language) phiên b n m r ng c a HTML Javascript Ngơn ng đư c dùng đ t o trang thơng tin WWW • DHTML có v trí văn b n đ h a r t xác cho phép n i dung c a trang web thay ñ i m i ngư i dùng nh n, kéo hay tr vào nút, hình nh hay thành ph n khác trang III.8.2 ð c m • DHTML cho phép ngư i dùng đ nh v xác văn b n hình nh trang web Ví d , nhà phát tri n có th thay ñ i ki u ch kích c c a t ng dịng tiêu đ website cách đơn gi n b ng cách thay ñ i ñ c t trang đơn xác đ nh hình th c CSS tương ng • DHTML có kh liên k t CSDL v i trang web ñ s a ñ i n i dung th c thi Trư c trang HTML ñ ng ñư c t, trình t ph i đư c b sung mã chương trình ch y ngồi trình t Java hay thành ph n ActiveX III.8.3 M t s hi u ng DHTML a T o chu i kí t chuy n đ ng • Cú pháp: • Thu c tính Gi ng viên: Tr n B u Dung 82 ðHðN – Trư ng Cao đ ng Cơng ngh Giáo trình Thi t k website Tên thu c tính Ý nghĩa Xác ñ nh cách th c chuy n ñ ng Scroll: Chu i kí t b t ñ u xu t hi n t i c nh c a c a s hình bi n m t c nh bên BEHAVIOR DIRECTION LOOP Slide: Chu i kí t b t đ u chuy n ñ ng t c nh d ng l i c nh bên chu i ch m vào c nh Alternate: Chu i xu t hi n t bên sang bên chuy n ñ ng ngư c l i ð nh hư ng chuy n ñ ng cho chu i ký t (left/right) Xác ñ nh s l n chuy n ñ ng c a chu i N u loop=infinite (hay -1) chu i s xu t hi n liên t c VSCROLLAMOUNT Xác ñ nh t c ñ pixel/giây chuy n ñ ng c a chu i, tính b ng s SCROLLDELAY Th i gian ng ng sau l n chuy n đ ng • Lưu ý: N u khơng có thu c tính chuy n đ ng l p ñi l p l i t ph i sang trái v i t c ñ pixel/1 giây th i gian ng ng gi a l n ch y 90 giây • Ví d : Mã ngu nChào m ng b n ñ n v i trư ng CðCN
b Thay đ i hình d ng chu t qua v trí • Cú pháp: • Ví d Gi ng viên: Tr n B u Dung 83 Giáo trình Thi t k website ðHðN – Trư ng Cao ñ ng Công ngh Mã ngu n Auto Crosshair Default E-resize Ne_resize N-resize Nw-resize Pointer Hand Help Move Text Wait K t qu III.9 Câu h i Tìm hi u tính m i c a HTML5 DHTML gì? Nêu ñ c ñi m ng d ng c a XHTML ? Nêu ñ c ñi m ng d ng c a Tìm hi u b c c c a s ki u website sau: a Website gi i thi u v du l ch Vi t Nam b Website gi i thi u v m th c Vi t Nam c Website kinh doanh s n ph m (sách, áo qu n, m ph m, …) tr c n d Website d ch v vi c làm online e Website báo tin t c (vnexpress.net, dantri.com, …) f Website trư ng h c (dct.udn.vn - CðCN, vnu.edu.vn - ðHQGHN) g Website download tài li u (tailieu.vn, download.com.vn, …) Gi ng viên: Tr n B u Dung 84 Giáo trình Thi t k website ðHðN – Trư ng Cao đ ng Cơng ngh III.10 Bài t p • Bài 1: Hãy t o m c tin t c có hình nh minh h a theo u c u sau o nh minh h a liên k t ñ n trang khác m tab khác o N i dung ñư c canh th ng hàng c bên cách nh minh h a 20px o Các tin n m m i dòng riêng bi t cách 10px Yêu c u: Xây d ng b ng cách o S d ng th … o S d ng thu c tính c a th • Bài 2: T o hi u ng cu n ch b ng li t kê tin v n ngày Ví d : Các dịng tin s ch y t dư i lên ñ n h t b n tin, r i tin b t ñ u xu t hi n tr l i tin cu i bi n m t Gi ng viên: Tr n B u Dung 85 ðHðN – Trư ng Cao đ ng Cơng ngh Giáo trình Thi t k website • Bài 3: Xây d ng b c c cho trang web sau b ng cách o S d ng frame o S d ng table • Bài 4: Xây d ng b c c cho trang web sau b ng cách o S d ng frame o S d ng table Yêu c u: Trang web ph i n m gi a c a s trình t STT Thành ph n Boby Table Gi ng viên: Tr n B u Dung Kích thư c Màu s c #0000FF 1000 x 900 #000000 86 ðHðN – Trư ng Cao đ ng Cơng ngh Giáo trình Thi t k website Header 1000 x 100 #FFFF00 Menu 1000 x 50 #FF66CC Content 1000 x 650 #99FFFF 5.1 C t1 200 x 650 #CC99DD 5.1.1 Menu d c 200 x 250 #CC99FF 5.1.2 Ph n dư i menu d c 200 x 400 #66FF00 5.2 C t2 600 x 650 #FFCC66 5.3 C t3 200 x 650 #33FFFF Footer 1000 x 100 #CCCCCC Gi ng viên: Tr n B u Dung 87 Giáo trình Thi t k website ðHðN – Trư ng Cao đ ng Cơng ngh • Bài 5: Thi t k form sau • Bài 6: Thi t k b c c giao di n website sau Gi ng viên: Tr n B u Dung 88 Giáo trình Thi t k website ðHðN – Trư ng Cao đ ng Cơng ngh • Bài 7: Thi t k trang ch cho trang web sau: a Website báo tin t c b Website du l ch c Website m th c d Website trư ng h c e Website d ch v gi i trí f g h i Website d ch v nhà ñ t Website d ch v vi c làm Website download tài li u Website kinh doanh s n ph m (sách, áo qu n, m ph m, …) tr c n Gi ng viên: Tr n B u Dung 89 ðHðN – Trư ng Cao đ ng Cơng ngh Giáo trình Thi t k website M CL C CHƯƠNG 1: GI I THI U CHUNG I.1 Các khái ni m b n I.1.1 M ng máy tính I.1.2 Internet – Intranet I.1.3 Mơ hình Client - Server I.1.4 Giao th c m ng TCP/IP I.1.5 Phương th c truy n thông tin I.2 Website khái ni m liên quan I.2.1 World Wide Web I.2.2 Website a Khái ni m b L ch s phát tri n web c Phân lo i I.2.3 M t s khái ni m liên quan a Web server b Web browser c Home page d Hyperlink e URL I.3 Công c h tr thi t k ngôn ng l p trình web I.3.1 Công c h tr thi t k web I.3.2 Ngơn ng l p trình web 10 I.4 Qui trình xây d ng ng d ng web 10 I.5 Nguyên t c thi t k website 11 I.5.1 Nguyên t c chung 11 I.5.2 Nh ng lưu ý thi t k 13 CHƯƠNG 2: CÔNG C H TR THI T K WEBSITE 16 II.1 Ph n m m Adobe Photoshop 16 II.1.1 Gi i thi u chung 16 a Gi i thi u 16 Gi ng viên: Tr n B u Dung 90 Giáo trình Thi t k website ðHðN – Trư ng Cao đ ng Cơng ngh b ng d ng 16 c Kh i ñ ng PS3 16 d Thoát kh i PS3 17 e Các khái ni m b n 17 f Các ñ nh d ng nh 19 II.1.2 Các thành ph n b n c a PS3 19 a Giao di n PS3 19 b Các công c 20 c n / Hi n công c 26 II.1.3 Các thao tác b n 26 a T o m i nh 26 b M nh 27 c Lưu nh 27 II.1.4 Các thao tác layout 27 a Phóng to/Thu nh vùng làm vi c 27 b Di chuy n vùng làm vi c 28 c B t/T t ño n text layout 28 d L y font c a ño n text 28 e L y mã màu c a vùng 29 f ðo kích thư c c a vùng 29 g S d ng công c Ruler ñ canh ch nh 29 h C t nh b ng công c Slide Tool 29 i Trích xu t hình l n 29 II.2 Ph n m m Macromedia Dreamweaver 30 II.2.1 Gi i thi u chung 30 a Gi i thi u DW8 30 b Kh i ñ ng DW8 30 c Thoát kh i DW8 31 II.2.2 Các thành ph n b n c a DW8 31 a Giao di n 31 b Các công c 31 II.2.3 Các thao tác b n 33 a T o file 33 Gi ng viên: Tr n B u Dung 91 Giáo trình Thi t k website ðHðN – Trư ng Cao ñ ng Công ngh b Lưu file 33 c M file 34 d Thoát ng d ng 34 e Xem trình t 34 II.2.4 Page Properties 34 II.2.5 Properties Inspector 35 a File panel 36 b CSS Styles panel 36 c Workplace layout 36 d Help 36 CHƯƠNG 3: NGÔN NG ðÁNH D U SIÊU VĂN B N HTML 37 III.1 Gi i thi u chung 37 III.1.1 Gi i thi u HTML 37 III.1.2 Ch c 37 III.2 C u trúc c a tài li u HTML 37 III.2.1 Th thu c tính c a th 37 a Th 37 b Thu c tính 38 III.2.2 C u trúc c a tài li u HTML 39 III.2.3 Chú thích HTML 39 III.3 Các th ñ nh d ng c u trúc 40 III.3.1 Th … 40 III.3.2 Th … 40 III.3.3 Th … 42 III.4 Các th b n 43 III.4.1 Các th ñ nh d ng kh i 43 a Th b Th c Th d Th ñ nh d ng ñ m c H1/H2/H3/H4/H5/H6 43…
44 … 45 45 e Th 46 f Th … 46 g Th … 46 Gi ng viên: Tr n B u Dung 92 Giáo trình Thi t k website ðHðN – Trư ng Cao ñ ng Cơng ngh III.4.2 Các th đ nh d ng danh sách 46 a Danh sách khơng có th t 47 b Danh sách có th t 47 c Danh sách l ng 48 d Danh sách t ñ nh nghĩa 48 III.4.3 Các th đ nh d ng kí t 49 a Các th ñ nh d ng in kí t 49 b Canh l văn b n trang web 51 c Các kí t đ c bi t 51 d S d ng màu s c thi t k 52 III.4.4 Các th liên k t 53 a Siêu văn b n 53 b K t n i mail 54 III.4.5Các th chèn hình nh 54 a Th 54 b Image Map 55 III.4.6 Các th chèn âm 57 a Chèn âm 57 b Chèn ño n phim 58 c Chèn thành ph n Multimedia khác 58 III.5 Tables 61 III.6 Frames 65 III.6.1 Th … 66 III.6.2 Th 67 III.6.3 Th 68 III.6.4 Th 68 III.7 Form 70 III.7.1 T o form 70 a Khái ni m form 70 b T o form 70 III.7.2 Các ph n t form 71 a Text 71 b Password 71 Gi ng viên: Tr n B u Dung 93 Giáo trình Thi t k website ðHðN – Trư ng Cao ñ ng Công ngh c Checkbox 73 d Radio 74 e File 75 f Image 75 g Button 75 h Reset 76 i Submit 76 k Hidden 76 l Select …option 77 m Textarea 79 n Label 80 o Fieldset 80 III.7.3 ði u n ph n t form 81 a ð nh th t tab 81 b T o phím t t 82 III.8 DHTML 82 III.8.1 ð nh nghĩa 82 III.8.2 ð c ñi m 82 III.8.3 M t s hi u ng DHTML 82 a T o chu i kí t chuy n đ ng 82 b Thay đ i hình d ng chu t qua v trí 83 III.9 Câu h i 84 III.10 Bài t p 85 M C L C 90 Gi ng viên: Tr n B u Dung 94 ... c ti p th c hi n nhi u vi c website giao ti p, trao ñ i thông tin v i ngư i ch website v i nh ng ngư i truy c p khác, Gi ng viên: Tr n B u Dung Giáo trình Thi t k website ðHðN – Trư ng Cao đ... hàng d li u, ch a nh ng website ñã ñư c thi t k v i nh ng thông tin liên quan khác (các mã Script, chương trình, file Multimedia) Gi ng viên: Tr n B u Dung Giáo trình Thi t k website ðHðN – Trư ng... thi t k , vi t mã phát tri n website trang web ng d ng web Gi ng viên: Tr n B u Dung ðHðN – Trư ng Cao đ ng Cơng ngh Giáo trình Thi t k website I.3.2 Ngơn ng l p trình web • PHP: ðư c ch y máy
