Thông tin tài liệu
CHƯƠNG I – GIỚI THIỆU CHUNG VỀ INTERNET VÀ WORLD WIDE WEB I.1. Giới thiệu về Internet !"#$% &"'("%)*"+&",-"." /0"% 123*%&"'($4"567!)"8""5 91:;: <=#$"8(<=2>?"$66&"% <(#$*%"@A"#$B"*7C'*DBE* #$*@A"#$B"*"-FGGHC$E9"ID I.2. Một số khái niệm liên quan đến Word Wide Web - Dịch vụ WWW: J70K"&"E70K%LL MMM#$NO7"P-Q9NQ9NP-R@&"(" MMMS7K""&"!Q9<J#3NO7""&"#2 - Định Nghĩa WWW: (&""),"$BS7K"NL&"" 7&"")Q9N"5TQ99: MMMQ99:,U V1,WWX()?@>%)?@> V9%&"")<7$30R>EEY"$OI VZ#$%T$[EZE9I 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#"?@>ER>EOI&7"Q9<J #$6>" - Website:M@-"M@%(L^L#0E#$$!" (O_"#2 - WebBrowse:`3N#$&""E^">S7K"(6#3NE2 #2"a$("7)"!"$BS7K"#("@")*"E 6#2"8M@bc 1M@bc&"7K"UdN 1 " - WebServer: Q)#6 M@eU :6M@e (7"&" M@e#$N$( 22)K-XC1D #2OEO#2."S'>>61&"'M@e 9R7)M@bc2)K*%eE"S%e-> BE30'>"$BS7K"R e 1 11 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@RLR7)@ Q9<J#$S7K")#$?@>MMM Q9<J237_"#3#$7!)>E* 2. Trình soạn thảo. `3()EF"Q9<J$%>8(*@(>#3) 12L6@(>#38U :7EM7:7Ef:"gGGGE<7hcc II.2. TẠO MỘT TÀI LIỆU HTML 1. Tạo một tài liệu </(R>Ci7K :7D ej:"jkj 7jlL)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 1o7_"#3@R7)5R@?@>R]7_"#3 p(*#"E(#$4"R<=o".(X qdrMsth@@8@%7LW@,4WCuDW%4WCjD Q)3)@A"(]oUo/CuqdrMsthjDo#2" Cu;qdrMsthjDhL",CW;WD)o#2"J)v#("#?@>A"! ouqdrMsthj`?@>0#(")u;qdrMsthj <(*o&"2]E^"#$"8o="o#4 1. Thẻ trình bày trang Q9<JS7K"oC"D#3O@)OK `OL^("Q9<J#4">U uQ9<Jj uQdkhj u99Jdj15#6"M@u;99Jdj u;Qdkhj ubshr1*2 15(7""M@ u;bshrj u;Q9<Jj 1"M@U#$g 9o<HTML> </HTML>:h_"#3&"@R7)@@\#^( "M@ :#U<HEAD> </HEAD>U`O232]&""M@ 9#6Uuju;jU<&>#6"c@ :U<BODY> </BODY> l#0_"O"c@E45&" Ví dụ: uQ9<Jj uQdkhj u99JdjMQ9<Ju;99Jdj u;Qdkhj ubshr uQFj7Q9<JQFu;QFj uQgj7Q9<JQgu;Qgj uQwj7Q9<JQwu;Qwj uQxj7Q9<JQxu;Qxj uQyj7Q9<JQyu;Qyj uQzj7Q9<JQzu;Qzj u;bshrj u;Q9<Jj 2. Các thẻ định dạng danh sách {"|U1,F72#*5E&"#*5"c@%6 K a. Danh sách không đánh số thứ tự u}Jj uJj<KF"7 uJj<Kg"7 uJj<Kw"7 u;}Jj 9(ou}Jj 9~•h€U]#0E#|a#'( •e'€U<(R&"•#$&# •1€U<(Ra&"#$&# Ví dụU97LU h8% u}J~€€j uJj9qQ uJji?qJ uJj:9Q> u;}Jj b. Danh sách có đánh số thứ tự usJj uJj<KF"7 uJj<Kg"7 uJj<Kw"7 u;sJj 1(ousJj 9~€F€Uq3#7UFEgEw €€Uq3#7UE@E €k€Uq3#7UkEbE1 €€Uq3#7UEE €€Uq3#7UEE e~€"0€Ul#0"0/#7 i7KU97LU h8% usJ~€k€~zj uJj9qQ uJji?qJ uJj:9Q> u;sJj Lưu ý: 12376L@A"S7K"ou}JjusJj."U i7KU97‚U uj u@7j ufƒ~yj<u;[j usJ~WWj uju[ƒ~xjJu;[j uj uJjq@ uJj1@ uJjQ"@ uJj17 u~WWj uJj1f uJj11 uJj1M u;j uJj97" u;j uju[ƒ~xjbu;[j uju[ƒ~xjJ"Iu;[j u;sJj u;@7j 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$%COD <S> (7"?@></S>: (7"?@>#$""" b. Thay đổi Font, Size <FONT FACE=“FontName1, FontName2…”> (7"?@></FONT> l#0f (7"?@>E -&"2f FvLf g vLf]#0R7) <BASEFONT SIZE=“n”> l#0„!>)"0U9XF#…C†EFGEFgEFxEFzEgxEwzD]#0w <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 u99Jdjik bk 1Qes9td h}su;99Jdj ubshrj i?@>2‡*Uklue}:jgu;e}:jVblV1~Gubtj i?@>2‡*7$%UQue}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_"(obshr#3N-U6E?@>E?@> <BODY BgColor=“Màu” Text=“Màu” Link=“Màu” VLink=“Màu” Alink=“Màu”> Nội dung trang Web. . . . .</BODY> b"1U<6" 9NU<?@> JU<$- iJU<#n- kU<#"•< b. Xác lập màu cho văn bản h_"(1ofs 9#3N-U(7"?@>‡#0 <FONT COLOR =“Trịmàu”> (7"?@></FONT> ihUufs 9fk1d~•9€1sJst~•t7€eˆd~wj1&"")&"u;fs 9j Các mã màu 9 90 9 90 b ` ‰GGGGGG s O" ‰†G†GGG t7 `• ‰ffGGGG 9 O‚ ‰GG†G†G b l ‰GGGGff < O ‰†GGGGG l`- ‰GGG†GG Z l ‰†G†G†G J i1 ‰ffffGG f Q." ‰ffGGff M 9\" ‰ffffff Z J ‰GG†GGG t `9 ‰†GGG†G e b ‰1G1G1G rc 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‡Wk~•1O^€j e~W#0‡WU1‡45>p"M@ k~W1O^WU1,7a"!E73(>#$pE7a"!N#2 vNL) b7~U1‡#0#$B"6> Q"~U1‡#0#(> M7~U1‡#0#(("> k"~?6UJ6>?@>@'>C9E77Eb[E"D Q~U1‡#0>"X>#?@>@'2678 i~U1‡#0>"X>#?@>@'26"" Š`]>6"c@ eS7K"ou@7b"7~‹":Œj b. Chèn âm thanh ub"7~W#‡W~j 9("u@"7j et1U`$B"7‚#[O JUe*]C@A"FUJ]&D u@"7j9$B"#]""u7j"c@ i7KUubZes} 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> eS7_"(b7"o9@E@A":NE]#0g b. Tạo đường viền có bóng. <TABLE Border=n BorderColorDark=“Trị màu” BorderColorLight=“Trị màu”> </TABLE> b71hU<#-•b71J"U<" b. Thiết lập độ rộng và canh lề bảng <TABLE Widht=n Alight= “Center” / ”Left”/ ”Right” > </TABLE> U`(("*#0@A"NQ]#(("$4"#*H$%SŽ 1U1"!SŽR7)Ei?@>&"(@' J[U1SŽR7)Ei?@>v(@'@>@>" t"U1>SŽR7)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"~•90€j <6@>" u9@b"7~•""[€j •6a@>" u9tb"~•90€j <62" u9tb"7~•""[€j •6a" u9hb"~•90€j <6& u9hb"7~•""[€j •6& u9Qb"~•90€j <6 u9Qb"7~•""[€j •6 d. Định dạng ô. 16(7""&U h_"(k"o$4"5" Thuộc tính Ý nghĩa u9hk"~•Q$%"€j 16""&$%"UJ[Et"E1 u9hik"~•Q$%"€j 1678&$%"U9EbE<77 u9Qk"~•Q$%"€j 1"#66"" u9Qik"~•Q$%"€j 1"#6678 u9tk"~•Q$%"€j 16""&"" u9tik"~•Q$%"€j 1678&"" q>""&"!& 1e"~•€q>""!& 1:77"~•€q•"'(7"&:N]#0g:N 9@>"&&U h_"(tce1eo9h9Q#3&26";( Thuộc tính Ý nghĩa u9htce~•€j 9&2#(" u9h1e~•€j 9&2#(("( u9Qtce~•€j 9>#(" u9Q1e~•€j 9>#(("( ihU9-Q9<%(7"$ uQ9<Jj ubshrj u9kbJdb7~Fb71~W:W1e"~GM7~zyGj u1juQgjq•9‘}•Q’19“:u;1j u9tik"~<77k"~1b"1~WJWj u9Qtce~gM7~FyGjQ8iubtjQ8eu;9Qj u9Q1e~gM7~FyGj ?eu;9Qj u9Qtce~gM7~…Gj`3ubtj9bu;9Qj u9Qtce~gM7~FwGjlJ8u;9Qj u;9tj u9tk"~1b"1~WJWj u9QM7~…yj u;9Qj u9QM7~…yj !u;9Qj u;9tj u9tk"~1j u9hk"~WJ[WjJ9lOu;9hj u9hj•@”u;9hj u9hjF•yGu;9hj u9hj†yu;9hj u9hjZ•u;9hj u;9tj u9tk"~1j u9hk"~WJ[WjJ$9<u;9hj u9hjF•†yu;9hj u9hj•@”u;9hj u9hjxyu;9hj u9hjq,u;9hj u;9tj u9tk"~W1Wb"1~WJWj u9h1e~wjubj9Ž"*8#Uu;bju;9hj u9h1e~gjubjxQ8ubju;9hj u;9tj u;9kbJdju;bshrj u;Q9<Jj CHƯƠNG III - THIẾT KẾ WEB VỚI DREAMWEARER I. MỞ ĐẦU FZ%) k7@hc8"#3M@)EN,6> ?"'‚="‡S7hc,"$BS7K" E)%L6">&"")hc"^^"\B"3 c@"L6&"K#3'>–@>R g !">hc† - Tích hợp RSSU%hc†^"23".teeX"@A" -".),>!"[7*NL)@A"E^" 237!)l<J"(7+7" - Tăng cường hỗ trợ CSSU"@>$4">?"NS–1ee#$ >11ee#n#$NO7""^-4#"1$4"R Y"($%%"^"$BS7K"‡S8(7+7"49 #2Ehc†2(&"K,-_ $4")"c@#"#$NCEc@9iE:hkD - Truyền fileU%hc†23K)"$4"R7!"- #$‡Sq>?"#."@(#$>),"$BS7K"3!" [2#Ž2;/2-A)"#p"–* - Giao diện được cải tiếnU "$B7_"23S7K"?"ˆ"h"ic#3 )7+7"4EL)%@>".1$%#$>"^# "c@XX"N( - Thanh công cụ mớiUhc†2(&"K%E^"vRL &"K/@R"17ic9&"K"L6?"%#3 '>–77+7"4 "$B7_"23^‡%(^(— - Khả năng tương thíchUhc$4"%@>:Q:%LE17[†… i7f wq&"")CMD `3@\#S7K"hcE^">'%"7)!"-@# &"")RJ$–@>M7c2@)%@> <seZR26@>M7c #O#/#("hc†E)*"v)(,^" ("cUh"17Designer workspaceL>!"S* "(&$B"#$*$2)c@'Coder workspace#$ $%"#-RE!""$B$B")%Q9<J"&"! -RM@h_^")/cR^"‚23-#L >5?"hc 1^"233'"!h"c17c@L˜^ @A"R#4M7cjMJ8c q/hc†E^"vLStart page2!"_8U • J%!"-#$/"L • 9_8#3-%12L67"[#3"$B7_"8 • 9_8#3%‚2™ • !""$4"RE"#22hc( • J#70KhcdN"2!"""$B7_"23S7K"#3 ?"hc II. GIAO DIỆN CỦA DREAMWEAVER F<R@# q/#("hc(R$4"$7$%#Ov)E^"v_"R 3'!"R g1&"K q/#("hc(R$4"$7$%#Ov)E^"v_"R 3'!"R Title bar: 9#65$4"RC<7hc†D) ^"#")Ea"]7L"]#4#07"[)#$n2 A/*_"@>^ƒENƒ; Menu bar 9R#45)hc1)#$27"77c 6)#$#]R#4E$"#&Y">&"' Standard ToolBar 9&"KT5(*)&"7K"LEš"s Ee E9%E Document toolbar 9&"Kh5@3$""^)(*&")$B""]$"&" 7$#]"e77@Eš"#Ž7"c)EcE Status bar 9"30"Q9<J"$BS7K"#")C"RER^"#"/ "()="^"/""u@7jD1^"Y"233'"! #(8#*$";?@>E#(,R#(ƒ@A"@^/@> w: hcaS7K"•["c7c€$4"$@1SŽ#$ "8panel]inspector`3@)"!ER"ER7"!" _8#Ž_#*$"#$8 1^"23,30]&"30&"'R#4 M7ch$%#O'8"L Properties inspector :30,^"‡S(#*$"#"#$ 81š"E8?@>Ev30[E6ER"#-E ""?@>EI qL^ ^"23-(*(#*$" ^ A/"27$%@> 1\\#Ov&"K^"S7K"6L"hc [...]... 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 . 22)K-XC1D #2OEO#2."S'>>6 1 &"'M@e 9R7)M@bc2)K*%eE"S%e-> BE30'>"$BS7K"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@RLR7)@ Q9<J#$S7K")#$?@>MMM Q9<J237_"#3#$7!)>E* 2 ý: 12 376L@A"S7K"ou}JjusJj."U i7KU97‚U uj u@7j ufƒ~yj<u;[j usJ~WWj uju[ƒ~xjJu;[j uj uJjq@ uJj1@ uJjQ"@ uJj17 u~WWj uJj1f uJj1 1 uJj1M u;j uJj97" u;j uju[ƒ~xjbu;[j uju[ƒ~xjJ"Iu;[j u;sJj u;@7j u;j 3 9>#(("( ihU9-Q9<%(7"$ uQ9<Jj ubshrj u9kbJdb7~Fb7 1 ~W:W 1 e"~GM7~zyGj u1juQgjq•9‘}•Q 1 9“:u ;1 j u9tik"~<77k" ~1 b" ;1 ~WJWj u9Qtce~gM7~FyGjQ8iubtjQ8eu;9Qj u9Q 1 e~gM7~FyGj
Ngày đăng: 07/08/2014, 14:20
Xem thêm: Bai giang mon tk web 1 docx, Bai giang mon tk web 1 docx
