Bai giang mon tk web 1 docx

CHƯƠNG I – GIỚI THIỆU CHUNG VỀ INTERNET VÀ WORLD WIDE WEB I.1. Giới thiệu về Internet  !"#$% &"'("%)*"+&",-"." /0"% 123*%&"'($4"567!)"8""5 91:;: <=#$"8(<=2>?"$66&"% <(#$*%"@A"#$B"*7C'*DBE* #$*@A"#$B"*"-FGGHC$E9"ID I.2. Một số khái niệm liên quan đến Word Wide Web - Dịch vụ WWW: J70K"&"E70K%LL MMM#$NO7"P-Q9NQ9NP-R@&"(" MMMS7K""&"!Q9<J#3NO7""&"#2 - Định Nghĩa WWW: (&""),"$BS7K"NL&"" 7&"")Q9N"5TQ99: MMMQ99:,U V1,WWX()?@>%)?@> V9%&"")<7$30R>EEY"$OI VZ#$%T$[EZE9I I.3 Một số vấn đề cần quan tâm khi thiết kế và xuất bản trang web - Trang WebU !"&"6>#$\N!""?@>#]@) "8"M@ 2()5#"?@>ER>EOI&7"Q9<J #$6>" - Website:M@-"M@%(L^L#0E#$$!" (O_"#2 - WebBrowse:`3N#$&""E^">S7K"(6#3NE2 #2"a$("7)"!"$BS7K"#("@")*"E 6#2"8M@bc 1M@bc&"7K"UdN 1 " - WebServer: Q)#6 M@eU :6M@e (7"&" M@e#$N$( 22)K-XC1D #2OEO#2."S'>>61&"'M@e 9R7)M@bc2)K*%eE"S%e-> BE30'>"$BS7K"R e 1 11 1 CHƯƠNG II – NGÔN NGỮ HTML(Hypertext Markup Language) II.1. GIỚI THIỆU VỀ HTML 1. Khái niệm: Q9<J("&"!3)L>!""R@RLR7)@ Q9<J#$S7K")#$?@>MMM Q9<J237_"#3#$7!)>E* 2. Trình soạn thảo. `3()EF"Q9<J$%>8(*@(>#3) 12L6@(>#38U :7EM7:7Ef:"gGGGE<7hcc II.2. TẠO MỘT TÀI LIỆU HTML 1. Tạo một tài liệu </(R>Ci7K :7D ej:"jkj 7jlL)R> Zm(7" Z%U] 2. Chạy  L#^"M@#n II.3. GIỚI THIỆU MỘT SỐ THẺ THÔNG DỤNG 1o7_"#3@R7)5R@?@>R]7_"#3 p(*#"E(#$4"R<=o".(X qdrMsth@@8@%7LW@,4WCuDW%4WCjD Q)3)@A"(]oUo/CuqdrMsthjDo#2" Cu;qdrMsthjDhL",CW;WD)o#2"J)v#("#?@>A"! ouqdrMsthj`?@>0#(")u;qdrMsthj <(*o&"2]E^"#$"8o="o#4 1. Thẻ trình bày trang Q9<JS7K"oC"D#3O@)OK `OL^("Q9<J#4">U uQ9<Jj uQdkhj u99Jdj15#6"M@u;99Jdj u;Qdkhj ubshr1*2 15(7""M@ u;bshrj u;Q9<Jj 1"M@U#$g 9o<HTML> </HTML>:h_"#3&"@R7)@@\#^( "M@ :#U<HEAD> </HEAD>U`O232]&""M@ 9#6Uuju;jU<&>#6"c@ :U<BODY> </BODY> l#0_"O"c@E45&" Ví dụ: uQ9<Jj uQdkhj u99JdjMQ9<Ju;99Jdj u;Qdkhj ubshr uQFj7Q9<JQFu;QFj uQgj7Q9<JQgu;Qgj uQwj7Q9<JQwu;Qwj uQxj7Q9<JQxu;Qxj uQyj7Q9<JQyu;Qyj uQzj7Q9<JQzu;Qzj u;bshrj u;Q9<Jj 2. Các thẻ định dạng danh sách {"|U1,F72#*5E&"#*5"c@%6 K a. Danh sách không đánh số thứ tự u}Jj uJj<KF"7 uJj<Kg"7 uJj<Kw"7  u;}Jj 9(ou}Jj 9~•h€U]#0E#|a#'( •e'€U<(R&"•#$&#  •1€U<(Ra&"#$&# Ví dụU97LU h8% u}J~€€j uJj9qQ uJji?qJ uJj:9Q>  u;}Jj b. Danh sách có đánh số thứ tự usJj uJj<KF"7 uJj<Kg"7 uJj<Kw"7  u;sJj 1(ousJj 9~€F€Uq3#7UFEgEw €€Uq3#7UE@E €k€Uq3#7UkEbE1 €€Uq3#7UEE €€Uq3#7UEE e~€"0€Ul#0"0/#7 i7KU97LU h8% usJ~€k€~zj uJj9qQ uJji?qJ uJj:9Q>  u;sJj Lưu ý: 12376L@A"S7K"ou}JjusJj."U i7KU97‚U uj u@7j ufƒ~yj<u;[j usJ~WWj uju[ƒ~xjJu;[j uj uJjq@ uJj1@ uJjQ"@ uJj17 u~WWj uJj1f uJj11 uJj1M u;j uJj97" u;j uju[ƒ~xjbu;[j uju[ƒ~xjJ"Iu;[j u;sJj u;@7j u;j 3. Các thẻ định dạng ký tự a.Định dạng Kiểu dáng - Style <B> (7"?@></B>: (7"?@>#$#- <Strong> . . . </.Strong>: (7"?@>#$#- <I> (7"?@></I>: (7"?@>#$"" <U> (7"?@></U>: (7"?@>#$"7$%COD <S> (7"?@></S>: (7"?@>#$""" b. Thay đổi Font, Size <FONT FACE=“FontName1, FontName2…”> (7"?@></FONT> l#0f (7"?@>E -&"2f FvLf g vLf]#0R7) <BASEFONT SIZE=“n”> l#0„!>)"0U9XF#…C†EFGEFgEFxEFzEgxEwzD]#0w <FONT SIZE=“n”> (7"?@></FONT> l#0„!(7"?@> VD: 9-%(7"$ <HTML> <HEAD> <TITLE>BAI THO CO HAI MO</TITLE> </HEAD> <BODY> <P><Font size=4><B>CÔ HÁI MƠ</B></Font></P> <NOBR><I> Thơ thẩn đường chiều một khách thơ<BR> Say nhìn xa rặng núi xanh lơ </I><BR> <B><i> Khí trời lặng lẽ và trong trẻo<BR> Thấp thoáng rừng mơ, cô hái mơ</B></I> </NOBR> </BODY> </HTML> c. Tạo chỉ số Trên/Dưới <SUP> Văn bản </SUP> : 9‡*?@> <SUB> Văn bản </SUB> : 9‡*7$%?@> VD: uQ9<Jj uQdkhj u99Jdjik bk 1Qes9td h}su;99Jdj ubshrj i?@>2‡*Uklue}:jgu;e}:jVblV1~Gubtj i?@>2‡*7$%UQue}bjgu;e}bjs u;bshrj u;Qdkhj u;Q9<Jj 4. Các thẻ đặt màu a.Xác lập màu chung cho trang Web h_"(obshr#3N-U6E?@>E?@> <BODY BgColor=“Màu” Text=“Màu” Link=“Màu” VLink=“Màu” Alink=“Màu”> Nội dung trang Web. . . . .</BODY> b"1U<6" 9NU<?@> JU<$- iJU<#n- kU<#"•< b. Xác lập màu cho văn bản h_"(1ofs 9#3N-U(7"?@>‡#0 <FONT COLOR =“Trịmàu”> (7"?@></FONT> ihUufs 9fk1d~•9€1sJst~•t7€eˆd~wj1&"")&"u;fs 9j Các mã màu 9 90 9 90 b ` ‰GGGGGG s O" ‰†G†GGG t7 `• ‰ffGGGG 9 O‚ ‰GG†G†G b l ‰GGGGff < O ‰†GGGGG  l`- ‰GGG†GG Z l ‰†G†G†G J i1 ‰ffffGG f Q." ‰ffGGff M 9\" ‰ffffff Z J ‰GG†GGG t `9 ‰†GGG†G e b ‰1G1G1G rc i" ‰ffffGG k' "8 ‰GGffff 5. Các thẻ chèn âm thanh, hình ảnh a. Chèn hình ảnh u<Z~W#0‡Wk~•1O^€j e~W#0‡WU1‡45>p"M@ k~W1O^WU1,7a"!E73(>#$pE7a"!N#2 vNL) b7~U1‡#0#$B"6> Q"~U1‡#0#(> M7~U1‡#0#(("> k"~?6UJ6>?@>@'>C9E77Eb[E"D Q~U1‡#0>"X>#?@>@'2678 i~U1‡#0>"X>#?@>@'26"" Š`]>6"c@ eS7K"ou@7b"7~‹":Œj b. Chèn âm thanh ub"7~W#‡W~j 9("u@"7j et1U`$B"7‚#[O JUe*]C@A"FUJ]&D u@"7j9$B"#]""u7j"c@ i7KUubZes} h~‹@7ŒJss:~‹FŒj 6. Các thẻ định dạng bảng biểu a. Tạo đường viền. <TABLE BORDER=n BORDERCOLOR=“Trị màu”> </TABLE> eS7_"(b7"o9@E@A":NE]#0g b. Tạo đường viền có bóng. <TABLE Border=n BorderColorDark=“Trị màu” BorderColorLight=“Trị màu”> </TABLE> b71hU<#-•b71J"U<" b. Thiết lập độ rộng và canh lề bảng <TABLE Widht=n Alight= “Center” / ”Left”/ ”Right” > </TABLE> U`(("*#0@A"NQ]#(("$4"#*H$%SŽ 1U1"!SŽR7)Ei?@>&"(@' J[U1SŽR7)Ei?@>v(@'@>@>" t"U1>SŽR7)E?@>v('@@>" c. Xác lập màu, ảnh nền cho bảng, hàng, ô. h_"(b"b"7"o$4"5" Thuộc tính Ý nghĩa u9@b"~•90€j <6@>" u9@b"7~•""[€j •6a@>" u9tb"~•90€j <62" u9tb"7~•""[€j •6a" u9hb"~•90€j <6& u9hb"7~•""[€j •6& u9Qb"~•90€j <6&#6 u9Qb"7~•""[€j •6&#6 d. Định dạng ô. 16(7""&U h_"(k"o$4"5" Thuộc tính Ý nghĩa u9hk"~•Q$%"€j 16""&$%"UJ[Et"E1 u9hik"~•Q$%"€j 1678&$%"U9EbE<77 u9Qk"~•Q$%"€j 1"#66"" u9Qik"~•Q$%"€j 1"#6678 u9tk"~•Q$%"€j 16""&"" u9tik"~•Q$%"€j 1678&"" q>""&"!& 1e"~•€q>""!& 1:77"~•€q•"'(7"&:N]#0g:N 9@>"&&U h_"(tce1eo9h9Q#3&26";( Thuộc tính Ý nghĩa u9htce~•€j 9&2#(" u9h1e~•€j 9&2#(("( u9Qtce~•€j 9&#62#(" u9Q1e~•€j 9&#62#(("( ihU9-Q9<%(7"$ uQ9<Jj ubshrj u9kbJdb7~Fb71~W:W1e"~GM7~zyGj u1juQgjq•9‘}•Q’19“:u;1j u9tik"~<77k"~1b"1~WJWj u9Qtce~gM7~FyGjQ8iubtjQ8eu;9Qj u9Q1e~gM7~FyGj ?eu;9Qj u9Qtce~gM7~…Gj`3ubtj9bu;9Qj u9Qtce~gM7~FwGjlJ8u;9Qj u;9tj u9tk"~1b"1~WJWj u9QM7~…yj u;9Qj u9QM7~…yj !u;9Qj u;9tj u9tk"~1j u9hk"~WJ[WjJ9lOu;9hj u9hj•@”u;9hj u9hjF•yGu;9hj u9hj†yu;9hj u9hjZ•u;9hj u;9tj u9tk"~1j u9hk"~WJ[WjJ$9<u;9hj u9hjF•†yu;9hj u9hj•@”u;9hj u9hjxyu;9hj u9hjq,u;9hj u;9tj u9tk"~W1Wb"1~WJWj u9h1e~wjubj9Ž"*8#Uu;bju;9hj u9h1e~gjubjxQ8ubju;9hj u;9tj u;9kbJdju;bshrj u;Q9<Jj CHƯƠNG III - THIẾT KẾ WEB VỚI DREAMWEARER I. MỞ ĐẦU FZ%) k7@hc8"#3M@)EN,6> ?"'‚="‡S7hc,"$BS7K" E)%L6">&"")hc"^^"\B"3 c@"L6&"K#3'>–@>R g !">hc† - Tích hợp RSSU%hc†^"23".teeX"@A" -".),>!"[7*NL)@A"E^" 237!)l<J"(7+7" - Tăng cường hỗ trợ CSSU"@>$4">?"NS–1ee#$ >11ee#n#$NO7""^-4#"1$4"R Y"($%%"^"$BS7K"‡S8(7+7"49 #2Ehc†2(&"K,-_ $4")"c@#"#$NCEc@9iE:hkD - Truyền fileU%hc†23K)"$4"R7!"- #$‡Sq>?"#."@(#$>),"$BS7K"3!" [2#Ž2;/2-A)"#p"–* - Giao diện được cải tiếnU "$B7_"23S7K"?"ˆ"h"ic#3 )7+7"4EL)%@>".1$%#$>"^# "c@XX"N( - Thanh công cụ mớiUhc†2(&"K%E^"vRL &"K/@R"17ic9&"K"L6?"%#3 '>–77+7"4 "$B7_"23^‡%(^(— - Khả năng tương thíchUhc$4"%@>:Q:%LE17[†… i7f wq&"")CMD `3@\#S7K"hcE^">'%"7)!"-@# &"")RJ$–@>M7c2@)%@> <seZR26@>M7c #O#/#("hc†E)*"v)(,^" ("cUh"17Designer workspaceL>!"S* "(&$B"#$*$2)c@'Coder workspace#$ $%"#-RE!""$B$B")%Q9<J"&"! -RM@h_^")/cR^"‚23-#L >5?"hc 1^"233'"!h"c17c@L˜^ @A"R#4M7cjMJ8c q/hc†E^"vLStart page2!"_8U • J%!"-#$/"L • 9_8#3-%12L67"[#3"$B7_"8 • 9_8#3%‚2™ • !""$4"RE"#22hc( • J#70KhcdN"2!"""$B7_"23S7K"#3 ?"hc II. GIAO DIỆN CỦA DREAMWEAVER F<R@# q/#("hc(R$4"$7$%#Ov)E^"v_"R 3'!"R g1&"K q/#("hc(R$4"$7$%#Ov)E^"v_"R 3'!"R Title bar: 9#65$4"RC<7hc†D) ^"#")Ea"]7L"]#4#07"[)#$n2 A/*_"@>^ƒENƒ; Menu bar 9R#45)hc1)#$27"77c 6)#$#]R#4E$"#&Y">&"' Standard ToolBar 9&"KT5(*)&"7K"LEš"s Ee E9%E Document toolbar 9&"Kh5@3$""^)(*&")$B""]$"&" 7$#]"e77@Eš"#Ž7"c)EcE Status bar 9"30"Q9<J"$BS7K"#")C"RER^"#"/ "()="^"/""u@7jD1^"Y"233'"! #(8#*$";?@>E#(,R#(ƒ@A"@^/@> w: hcaS7K"•["c7c€$4"$@1SŽ#$ "8panel]inspector`3@)"!ER"ER7"!" _8#Ž_#*$"#$8 1^"23,30]&"30&"'R#4 M7ch$%#O'8"L Properties inspector :30,^"‡S(#*$"#"#$ 81š"E8?@>Ev30[E6ER"#-E ""?@>EI qL^ ^"23-(*(#*$" ^ A/"27$%@> 1\\#Ov&"K^"S7K"6L"hc [...]... cho phép gõ text sẽ chứa liên kết vào mà thôi V SỬ DỤNG HÌNH ẢNH TRÊN TRANG WEB Chúng ta sẽ tìm hiểu cách thêm hình ảnh vào trang web Chúng ta cũng sẽ tìm hiểu cách tạo một số dạng hình ảnh đặc biệt, chẳng hạn Rollover và nút nhấn bằng flash, những đối tượng giúp tăng tính trực quan của trang web 1 Chèn hình vào trang web Vào menu Insert > Image Xuất hiện một cửa sổ cho phép chọn hình muốn chèn... được kích họa bởi một behavior nào đó 2 Âm thanh Âm thanh ít khi được chèn vào trang web, vì một số người dùng có thể đang nghe nhạc của chính họ, và đôi khi nhạc trên trang web không phù hợp với hoàn cảnh người dùng lướt web Tuy nhiên, một đoạn âm thanh phù hợp lại làm cho trang web trở nên cuốn hút hơn Nhiều trang web có âm thanh cũng cấp cả tùy chọn để người dùng điều khiển theo ý mình Những định... src="others/audio.MID" autostart="false" loop="true"> Nếu ta muốn chèn nhạc nền cho trang web và không cho người dùng thấy control chơi nhạc, chèn đoạn code sau đây vào trang web, sau label Với tham số loop chúng ta có thể chỉ định file âm thanh sẽ chạy bao nhiêu lần, riêng giá trị -1 cho phép chơi lặp liên lục) 3 Movies và Video File Các video format được dùng... độ rộng khung 1 Giới thiệu Mọi đối tượng trên trang web đều được canh trái theo mạc nhiên Tuy nhiên nhờ vào table chúng ta có thể bố trí text vào các cột, đặt hình cạnh một khối văn bản, và làm nhiều việc khác mà nếu không có table, chúng ta không thể làm được Vào thời điểm hiện nay hầu hết website đều dựa trên table Thực tế này là một tất yếu vì table rất hữu ích trong việc thiết kế web Table là tập... để chèn dữ liệu, nhưng trong chế độ này chúng ta sẽ không thấy thực tế trang web hiển thị thế nào VII SỬ DỤNG FRAME Chúng ta cùn tìm hiểu xem frame là gì và khi nào phải dùng frame Chúng ta cũng tìm hiểu cách chèn frame vào website và cách thức làm việc với nó 1 Giới thiệu Frame được sử dụng để phân bố dữ liệu trong một web site Frame giúp giữ nguyên một số dữ liệu, chẳng hạn logo và navigation bar,... trình cài sẵn trên máy tính của người duyệt web để có thể chơi được Mục Src của properties inspector chứa liên kết đến file multimedia gắn với control đang được chọn Trường hợp người dùng chưa cài sẵn plug-in, ta có thể thiết lập thông số Plg URL là địa chỉ của trang web chứa plug-in X Sử dụng Dreamweaver Templates 1 Giới thiệu Mỗi lần chúng ta muốn tạo một web site thường thì chúng ta phải tuân theo... Để thêm flash text vào trang web, vào menu Insert > Media > Flash Text Trong cửa sổ hiện ra, thiết lập text, link, và tên của đối tượng text cũng như chỉ định màu nguyên thủy và màu rollover Properties inspector của flash text giống như của flash button 6 Navigation bar Một navigation bar là mọt tập hợp hình ảnh sẽ được sử dụng giống như một menu để duyệt qua WebSite Một web page chỉ được chứa một navigation... Margins: thiết lập lề của văn bản web Lưu ý là lề không xuất hiện trong cửa sổ tài liệu của Dreamweaver, chúng chỉ xuất hiện trên trình duyệt Trong Title/Codification category có những thuộc tính sau: - Title: đây là tiêu đề của trang web Tiêu đề này sẽ được hiển thị trên thanh tiêu đề của trình duyêt và trên của sổ tài liệu của Dreamweaver - Encoding: cách thức trang web được mã hóa Với các trang unicode... tính của table hay cột, còn con số thứ hai là độ rộng thực tế trong design view Chẳng hạn, trong hình bên đây, cột thứ ba có độ rộng 13 9 Như vậy cột này có độ rộng 13 9 pixel, những nếu trên cột có chứa một hình cần nhiều không gian hơn, cột sẽ được chỉnh lại độ rộng mới là 14 2 pixel (đây là độ rộng của cột người ta nhìn thấy trên màn hình) Chúng ta có thể thay đổi điều này bằng cách chọn Make All Widths... thiết kế web chọn một tập hợp font Lưu ý đây là tập hợp fonts thay vì chỉ một font, vì nếu chúng ta chỉ thiết lập một font duy nhất, có khả năng người duyệt web không có font đó trên máy tính của họ Nếu người dùng không có font này thì văn bản sẽ được áp dụng một font khác trong tập hợp font ta đã chọn từ trước Chẳng hạn, nếu chúng ta chọn Arial, Helvetia,Sans-serif, chúng ta sẽ thấy trang web bằng . 22)K-XC1D #2OEO#2."S'>>6 1 &"'M@e 9R7)M@bc2)K*%eE"S%e-> BE30'>"$BS7K"R e 1  1  1  1  CHƯƠNG II – NGÔN NGỮ HTML(Hypertext Markup Language) II .1. GIỚI THIỆU VỀ HTML 1. Khái niệm: Q9<J("&"!3)L>!""R@RLR7)@ Q9<J#$S7K")#$?@>MMM Q9<J237_"#3#$7!)>E* 2 ý:  12 376L@A"S7K"ou}JjusJj."U i7KU97‚U uj u@7j ufƒ~yj<u;[j usJ~WWj uju[ƒ~xjJu;[j uj uJjq@ uJj1@ uJjQ"@ uJj17 u~WWj uJj1f uJj1 1  uJj1M u;j uJj97" u;j uju[ƒ~xjbu;[j uju[ƒ~xjJ"Iu;[j u;sJj u;@7j u;j 3 9&#62#(("( ihU9-Q9<%(7"$ uQ9<Jj ubshrj u9kbJdb7~Fb7 1 ~W:W 1 e"~GM7~zyGj u1juQgjq•9‘}•Q 1 9“:u ;1 j u9tik"~<77k" ~1 b" ;1 ~WJWj u9Qtce~gM7~FyGjQ8iubtjQ8eu;9Qj u9Q 1 e~gM7~FyGj