网页设计实用技术 - 万水书苑-出版资源网

(1)

ኄ 3 ቦ Ꭺᮆ᝺ᝠ࣋ࡍࢺЦ፬Ռऄၹ

䆒䅵㗙೼䆒䅵㔥义ᯊ䳔㽕ᇍݙᆍ䖯㸠ড়⧚Ꮧሔˈৠᯊ⬠䴶㽕㕢㾖㊒㕢ˈҙҙ䗮䖛᭛ᄫ੠ ೒⠛ⱘᥦ߫ᰃϡ໳ⱘǄᴀゴᇚҟ㒡ϝ⾡㔥义䆒䅵ᏗሔᎹ݋˖㸼ḐǃḚᶊ੠ሖǄḍ᥂ϡৠⱘ䳔∖ 䗝ᢽড়䗖ⱘᏗሔᎹ݋ˈৃҹࠊ԰ߎ㒧ᵘড়⧚ǃ⬠䴶টདⱘ㔥义Ǆ

3.1 ᛫ಫ

㸼Ḑᰃ㔥义䆒䅵ࠊ԰ϡৃ㔎ᇥⱘܗ㋴ˈᅗҹㅔ⋕ᯢњ੠催ᬜᖿ᥋ⱘᮍᓣᇚ೒⠛ǃ᭛ᴀǃ ᭄᥂੠㸼ऩㄝܗ㋴᳝ᑣഄᰒ⼎೼义䴶Ϟˈ䅽៥Ӏৃҹ䆒䅵ߎⓖ҂ⱘ义䴶ǄՓ⫼㸼Ḑᥦ⠜ⱘ义䴶 ೼ϡৠᑇৄǃϡৠߚ䕼⥛ⱘ⌣㾜఼䞠䛑㛑ֱᣕ݊ॳ᳝ⱘᏗሔˈ㗠೼ϡৠⱘ⌣㾜఼ᑇৄ᳝䕗དⱘ ݐᆍᗻˈ᠔ҹ㸼Ḑᰃ㔥义Ё᳔ᐌ⫼ⱘᥦ⠜ᮍᓣПϔǄ ᴀ㡖Џ㽕ҟ㒡㸼Ḑ೼㔥义Ёⱘᑨ⫼ˈࣙᣀᦦܹ㸼Ḑǃׂᬍ㸼Ḑሲᗻǃ㸼Ḑጠ༫ㄝݙᆍǄ 3.1.1 ᛫ಫ۳వ୲ͻ ᴀ㡖ᇚ㒧ড়Āᮙ␌ᮄ䯏ā义䴶ⱘᅲ⦄ˈЎ໻ᆊҟ㒡㸼 Ḑⱘ෎ᴀ᪡԰䖛⿟ˈབ೒ 3-1 ᠔⼎Ǆ 1ĕЌదζٌ ೼᭛ḷにষЁˈᇚܝᷛᬒ೼䳔㽕߯ᓎ㸼Ḑⱘԡ㕂ˈऩ ߏĀᦦܹāėĀᐌ⫼āėĀ㸼ḐāੑҸ˄བ೒ 3-2 ᠔⼎˅ˈ ៪㗙䗝ᢽĀᦦܹāėĀ㸼ḐāੑҸˈᔍߎĀ㸼Ḑāᇍ䆱Ḛˈ བ೒ 3-3 ᠔⼎ˈሲᗻ䇈ᯢབϟǄ ೒ 3-2 Ā㸼Ḑā೒ᷛ ೒ 3-3 Ā㸼Ḑāᇍ䆱Ḛ 㸠᭄˖⫼ᴹ䆒㕂㸼Ḑⱘ㸠᭄Ǆ ᭄߫˖⫼ᴹ䆒㕂㸼Ḑⱘ᭄߫Ǆ 㸼Ḑᆑᑺ˖⫼ᴹ䆒㕂㸼Ḑⱘᆑᑺˈৃҹ฿᭄ܹؐˈ㋻䱣݊ৢⱘϟᢝ߫㸼Ḛ⫼ᴹ䆒㕂ᆑ ೒ 3-1 Āᮙ␌ᮄ䯏āᬜᵰ೒

(2)

ᑺⱘऩԡˈ᳝ⱒߚ↨੠ڣ㋴ϸϾ䗝乍Ǆᔧᆑᑺⱘऩԡ䗝ᢽⱒߚ↨ᯊˈ㸼ḐⱘᆑᑺӮ䱣 ⌣㾜఼にষⱘ໻ᇣ㗠ᬍবǄ ऩܗḐ䖍䎱˖⫼ᴹ䆒㕂ऩܗḐⱘݙᆍϢऩܗḐ䖍ḚП䯈ⱘ䎱⾏ˈҹĀڣ㋴āЎऩԡǄ ऩܗḐ䯈䎱˖⫼ᴹ䆒㕂ऩܗḐϢऩܗḐП䯈ⱘ䎱⾏ˈҹĀڣ㋴āЎऩԡǄ 䖍Ḛ㉫㒚˖⫼ᴹ䆒㕂㸼Ḑ䖍ḚⱘᆑᑺˈҹĀڣ㋴āЎऩԡǄ䕧᭄ܹᄫ 0 㸼⼎≵᳝䖍Ḛˈ ೼䆒䅵㾚೒Ё⫼㰮㒓㸼⼎㸼Ḑ䖍ḚǄ 义ⳝ˖ᅮН义ⳝḋᓣˈৃҹ೼ҹϟ 4 ⾡ḋᓣЁ䗝ᢽϔ⾡Ǆ ᮴˖㸼⼎㸼ḐϡՓ⫼߫៪㸠ᷛ乬Ǆ Ꮊ˖㸼⼎ᇚ㸼Ḑⱘ㄀ϔ߫԰Ўᷛ乬߫ˈৃҹЎ㸼Ḑⱘ↣ϔ㸠䕧ܹϔϾᷛ乬Ǆ 乊䚼˖㸼⼎ᇚ㸼Ḑⱘ㄀ϔ㸠԰Ўᷛ乬㸠ˈৃҹЎ㸼Ḑⱘ↣ϔ߫䕧ܹϔϾᷛ乬Ǆ ϸ㗙˖㸼⼎⫼᠋㛑໳೼㸼ḐⱘᎺ䖍੠乊䚼ৠᯊ䕧ܹ㸠ᷛ乬੠߫ᷛ乬Ǆ 㹿䆒㕂Ў义ⳝⱘऩܗḐЁᄫԧ咬䅸䆒㕂Ў咥ԧሙЁǄ ᷛ乬˖ᅮН㸼Ḑⱘᷛ乬ˈ䆹ᷛ乬ϡࣙ৿೼㸼ḐݙǄ ᇍ唤ᷛ乬˖ᅮН㸼Ḑᷛ乬ⳌᇍѢ㸼Ḑⱘᰒ⼎ԡ㕂ˈ咬䅸ᷛ乬೼㸼Ḑⱘ乊䚼Ǆ ᨬ㽕˖ৃҹ೼䖭䞠ᇍ㸼Ḑ䖯㸠⊼䞞ˈᨬ㽕ֵᙃϡӮ೼⌣㾜఼Ёᰒ⼎Ǆ 䆒㕂᭄߫੠㸠᭄䛑Ў 2ˈ㸼ḐᆑᑺЎ 300 ڣ㋴ˈ䖍Ḛ㉫㒚ǃऩܗḐ䖍䎱ǃऩܗḐ䯈䎱䛑Ў 0ˈ݊ԭ乍ϡ䆒㕂ˈ߭ᦦܹⱘ㸼Ḑབ೒ 3-4 ᠔⼎Ǆབᵰᇚ䖍ḚᬍЎ 1ˈ߭ᦦܹⱘ㸼Ḑབ೒ 3-5 ᠔⼎Ǆབᵰݡᇚ䯈䎱䆒Ў 1ˈ߭ᦦܹⱘ㸼Ḑབ೒ 3-6 ᠔⼎Ǆ ೒ 3-4 ᮴䖍Ḛ㸼Ḑ ೒ 3-5 ᳝䖍Ḛ㸼Ḑ ೒ 3-6 ᳝䖍Ḛ᳝䯈䎱㸼Ḑ ೒ 3-4 㸼Ḑҷⷕབϟ˖

<table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> ᔶ៤㸼Ḑⱘ෎ᴀᷛㅒ᳝<table>ǃ<tr>੠<td>ˈ<table>ᷛㅒԡѢ᳔໪ሖˈ<tr>ҷ㸼㸠˄table row ⱘ㓽ݭ˅ˈ<td>Ў㸼Ḑ᭄᥂ऩܗḐ˄table datacell ⱘ㓽ݭ˅ˈৠᯊгҷ㸼߫Ǆ㽕ᔶ៤ϸ㸠ϸ߫ⱘ 㸼Ḑˈ䳔㽕ϸᇍ<tr>ˈ↣㸠ϸ߫ˈे㸠ݙጠ༫ϸᇍ<td>Ǆ 2ĕ༪႔ζٌ ೼㔥义Ёᦦܹ㸼Ḑৢˈৃҹᇍ䆹㸼Ḑ䖯㸠㓪䕥ˈ㓪䕥ⱘᇍ䈵ࣙᣀ㸼Ḑǃ㸠ǃ߫ǃऩܗḐˈ 㗠㓪䕥䖭ѯᇍ䈵Пࠡᑨ䆹ܜ䗝ᅮᇍ䈵Ǆ ˄1˅䗝ᢽᭈϾ㸼ḐǄ 㽕䗝ᅮᭈϾ㸼Ḑˈৃҹᡞ哴ᷛᬒ೼㸼Ḑ䖍Ḛⱘӏᛣ໘ˈᔧ哴ᷛবЎ ᯊऩߏˈेৃ 䗝ЁᭈϾ㸼ḐǄ

(3)

೼㸼Ḑݙⱘӏᛣ໘ऩߏˈ✊ৢ೼⢊ᗕᷣЁ䗝Ё<table>ᷛㅒेৃǄ ೼㸼Ḑݙⱘӏᛣ໘েߏˈ೼ᔍߎⱘᖿ᥋㦰ऩЁ䗝ᢽĀ㸼ḐāėĀ䗝ᢽ㸼ḐāੑҸ៪㗙䗝ᢽĀׂᬍāėĀ㸼ḐāėĀ䗝ᢽ㸼ḐāੑҸǄ ऩߏ㸼ḐᎺϞ㾦Ǆ ˄2˅䗝ᢽऩϾऩܗḐǄ ᣝԣ Ctrl 䬂ˈ೼䳔㽕䗝ЁⱘऩܗḐϞऩߏǄ ऩߏ㽕䗝ᢽⱘऩܗḐˈݡ䗝ᢽ⢊ᗕᷣЁⱘ<td>ᷛㅒǄ ೼㽕䗝ᢽⱘऩܗḐݙঠߏǄ ˄3˅䗝ᢽ䖲㓁ⱘऩܗḐǄ ᣝԣ哴ᷛᎺ䬂ˈҢϔϾऩܗḐⱘᎺϞᮍᓔྟ৥㽕䖲㓁䗝ᢽⱘऩܗḐᮍ৥ᢪࡼ˗៪㗙ᣝԣ Shift䬂ᑊऩߏ㽕䗝ᢽⱘऩܗḐǄ ˄4˅䗝ᢽϡ䖲㓁ⱘऩܗḐǄ ৃҹᣝԣ Ctrl 䬂ˈऩߏ㽕䗝ᢽⱘ᠔᳝ऩܗḐǄ ˄5˅䗝ᢽ㸠៪߫Ǆ ᇚܝᷛ⿏ࡼࠄ㸠Ꮊջ៪߫Ϟᮍˈ哴ᷛᣛ䩜বЎ৥ে៪৥ϟⱘㆁ༈೒ᷛᯊऩߏेৃǄ 䇈ᯢ˖Ӳ༪ᄯζٌݧζٌᄯပЌదԤನēDreamweaver ݖມವζٌۤॹԅࣚէēྻރ׀ ูζٌγඕϲӦۤॹγඕϲӦԅߐ෈ēఢ෍ 3-7 ൎವdٔ࡬༓ྑēࢶྻ୳ဈۤࠬဈࣚէۤϲӦd ೒ 3-7 ᏺ㸼Ḑᆑᑺᰒ⼎ⱘ㸼Ḑ 㢹㽕ਃ⫼៪⽕⫼㸼Ḑ੠߫ⱘᆑᑺϢ㦰ऩˈৃᠻ㸠ҹϟ᪡԰Пϔ˖ 䗝ᢽĀᶹⳟāėĀৃ㾚࣪ࡽ⧚āėĀ㸼ḐᆑᑺāੑҸǄ েߏ䆹㸼Ḑˈ✊ৢ䗝ᢽĀ㸼ḐāėĀ㸼ḐᆑᑺāੑҸǄ 3ĕԸჼζٌԅӖ໌ ˄1˅䇗ᭈ㸼Ḑⱘ໻ᇣǄ 䗝পᭈϾ㸼Ḑৢˈᇚ哴ᷛᬒ೼㸼Ḑ䖍Ḛ਼ೈⱘ咥㡆ᇣᮍഫϞˈ哴ᷛবЎঠㆁ༈ৢᣝԣ哴 ᷛᎺ䬂ᢪࡼˈेৃᬍব㸼Ḑ໻ᇣǄ ᔧ䇗ᭈᭈϾ㸼Ḑⱘ໻ᇣᯊˈ㸼ḐЁⱘ᠔᳝ऩܗḐᣝ↨՟᳈ᬍ໻ᇣǄབᵰ㸼ḐⱘऩܗḐᣛ ᅮњᯢ⹂ⱘᆑᑺ៪催ᑺˈ߭䇗ᭈ㸼Ḑ໻ᇣᇚ᳈ᬍĀ᭛ḷāにষЁऩܗḐⱘৃ㾚໻ᇣˈԚϡ᳈ᬍ 䖭ѯऩܗḐⱘᣛᅮᆑᑺ੠催ᑺǄ ˄2˅䇗ᭈ㸠催੠߫ᆑǄ ᡞ哴ᷛᬒ೼䳔㽕䇗ᭈ߫ⱘ䖍Ḛ໘ˈ哴ᷛবЎ ᯊˈᣝԣ哴ᷛᎺ䬂ᢪࡼेৃᬍব㸠៪߫ⱘ ໻ᇣǄᔧࠡ߫ᆑᬍবᯊˈⳌ䚏߫ⱘᆑᑺг᳈ᬍњˈ಴ℸᅲ䰙Ϟ䇗ᭈњϸ߫ⱘ໻ᇣˈ㗠㸼Ḑⱘᘏ ᆑᑺϡᬍবǄৃ㾚࣪ড作ᇚᰒ⼎བԩᇍ߫䖯㸠䇗ᭈǄ 㢹㽕᳈ᬍᶤϾ߫ⱘᆑᑺᑊֱᣕ݊Ҫ߫ⱘ໻ᇣϡবˈৃᣝԣ Shift 䬂ˈ✊ৢᢪࡼ߫ⱘ䖍Ḛˈ ℸ߫ⱘᆑᑺህӮᬍবˈ㸼ⱘᘏᆑᑺᇚ᳈ᬍҹᆍ㒇ℷ೼䇗ᭈⱘ߫Ǆ 㸼Ḑᷛ乬㦰ऩᣝ䪂 ߫ᷛ乬㦰ऩᣝ䪂

(4)

㸠ⱘ䇗ᭈᮍ⊩ৠ߫ⱘⳌԐˈϡݡ䌬䗄Ǆ 4ĕ຿ζٌඡަઝఘ ೼ᓎゟⱘ᮴䖍Ḛϸ㸠ϸ߫ⱘ㸼ḐЁ฿ࡴݙᆍǄ佪ܜ೼㄀ϔ㸠㄀ϔ߫੠㄀Ѡ߫䕧ܹݙᆍˈ 䕧ܹᅠ៤ৢˈ㸼ḐӮḍ᥂ݙᆍ㞾ࡼ䇗ᭈऩܗḐⱘ໻ᇣˈབ೒ 3-8 ᠔⼎Ǆ ೒ 3-8 ㄀ϔ㸠䕧ܹݙᆍ 㒻㓁䕧ܹݙᆍˈᅲ⦄བ೒ 3-9 ᠔⼎ⱘᬜᵰǄ ೒ 3-9 ᅠ៤ݙᆍ䕧ܹ 5ĕЌద໻ݧॹ ˄1˅ᦦܹऩ㸠៪ऩ߫Ǆ ऩߏϔϾऩܗḐˈ䗝ᢽĀᦦܹāėĀ㸼Ḑᇍ䈵āੑҸˈ೼ᄤ㦰ऩЁ䗝ᢽᦦܹ㸠៪ᦦܹ ߫Ǆ ऩߏϔϾऩܗḐˈ䗝ᢽĀׂᬍāėĀ㸼ḐāėĀᦦܹ㸠āੑҸ៪ĀׂᬍāėĀ㸼Ḑā ėĀᦦܹ߫āੑҸǄ েߏ㽕ᦦܹ㸠៪߫ⱘӏϔऩܗḐˈ✊ৢ䗝ᢽĀ㸼ḐāėĀᦦܹ㸠āੑҸ៪Ā㸼Ḑāė Āᦦܹ߫āੑҸǄ ऩߏ߫ᷛ乬㦰ऩˈ✊ৢ䗝ᢽĀᎺջᦦܹ߫ā៪Āেջᦦܹ߫ā䗝乍Ǆ ˄2˅ᦦܹ໮㸠៪໮߫Ǆ ऩߏϔϾऩܗḐˈ䗝ᢽĀׂᬍāėĀ㸼ḐāėĀᦦܹ㸠៪߫āੑҸˈᔍߎĀᦦܹ㸠៪߫ā ᇍ䆱Ḛˈ೼݊Ё䗝ᢽĀ㸠ā៪Ā߫ā䗝乍ˈབ೒ 3-10 ᠔⼎Ǆ✊ৢ೼Āᦦܹ㸠៪߫āᇍ䆱ḚЁ 䆒㕂䳔㽕ᦦܹⱘ㸠៪߫ⱘ᭄Ⳃˈབ೒ 3-11 ᠔⼎Ǆ᳔㒜ᬜᵰབ೒ 3-12 ᠔⼎Ǆ ೒ 3-10 ᦦܹ㸠៪߫೒⼎ ೒ 3-11 Āᦦܹ㸠៪߫āᇍ䆱Ḛ ೒ 3-12 ᦦܹ㸠ৢ᳔㒜ᬜᵰ 6ĕ౗҂໻ݧॹ 䗝ᢽ㽕ߴ䰸ⱘ㸠៪߫ˈ೼㸠៪߫ⱘ㣗ೈݙেߏˈ೼ᔍߎⱘᖿ᥋㦰ऩЁ䗝ᢽĀ㸼Ḑāė Āߴ䰸߫āੑҸ៪Ā㸼ḐāėĀߴ䰸㸠āੑҸǄ 䗝ᢽᅠᭈⱘϔ㸠៪߫ˈ✊ৢ䗝ᢽĀ㓪䕥āėĀ⏙䰸āੑҸ៪ᣝ Delete 䬂Ǆ

(5)

7ĕЗדۤۦωӦ၍ٌ ᢚߚ੠ড়ᑊऩܗḐⱘ᪡԰Ϣᄫ໘⧚䕃ӊ Word Ёⱘ᪡԰㉏ԐǄ ˄1˅ᢚߚऩܗḐǄ েߏ㽕ᢚߚⱘऩܗḐˈ೼ᔍߎⱘᖿ᥋㦰ऩЁ䗝ᢽĀ㸼ḐāėĀᢚߚऩܗḐāੑҸˈᔍߎ ĀᢚߚऩܗḐāᇍ䆱Ḛˈ೼݊Ё䆒㕂ᇚऩܗḐᢚߚ៤໮㸠៪໮߫Ǆ ˄2˅ড়ᑊऩܗḐǄ 䗝Ё㽕ড়ᑊⱘ໮ϾऩܗḐˈেߏᑊ䗝ᢽĀ㸼ḐāėĀড়ᑊऩܗḐāੑҸˈ៪㗙ऩߏሲᗻ 䴶ᵓЁⱘĀড়ᑊāᣝ䪂 Ǆ བ˖ᮄ䯏฿ࡴᷛ乬Āᮙ␌ᮄ䯏ā੠೒⠛Āarrow.gifāˈℸ㸠䖯㸠ড়ᑊǄབ೒ 3-13 ᠔⼎Ǆ ೒ 3-13 ড়ᑊ㄀ϔ㸠 8ĕಁᄢζٌ೫໿ 䗝ЁϔϾ㸼ḐৢˈĀሲᗻā䴶ᵓ᳈ᬍЎ㸼ḐⱘⳌ݇ሲᗻখ᭄ˈབ೒ 3-14 ᠔⼎Ǆ ೒ 3-14 㸼ḐĀሲᗻā䴶ᵓ ೼Āሲᗻā䴶ᵓЁৃҹ䆒㕂㸼Ḑⱘ৘乍ሲᗻখ᭄Ǆ ˄1˅㸼Ḑ ID˖䆒㕂㸼Ḑⱘৡ⿄Ǆ䆹ৡ⿄䗮ᐌ೼㓪ݭҷⷕᯊ⫼ࠄˈϔ㠀ϡ䳔㽕䆒ᅮǄ ˄2˅㸠੠߫˖㸼ḐЁ㸠੠߫ⱘ᭄ⳂǄৃҹ䗮䖛ׂᬍϸϾ᭛ᴀḚⱘ᭄ؐᴹᬍব㸼Ḑⱘ㸠᭄៪ ᭄߫Ǆ ˄3˅ᆑ੠催˖ᰃҹڣ㋴Ўऩԡ៪ᣝऴ⌣㾜఼にষᆑᑺⱘⱒߚ↨䅵ㅫⱘ㸼Ḑᆑᑺ੠催ᑺǄ 䗮ᐌϡ䳔㽕䆒㕂㸼Ḑⱘ催ᑺǄ ˄4˅฿ܙ˖ेऩܗḐ䖍䎱ᰃऩܗḐݙᆍ੠ऩܗḐ䖍ḚП䯈ⱘ䎱⾏Ǆབᵰᇚ฿ܙؐ䆒Ў 5ˈ ߭ᕫࠄབ೒ 3-15 ᠔⼎ⱘᬜᵰǄ ˄5˅䯈䎱˖ेऩܗḐ䯈䎱ᰃⳌ䚏ⱘऩܗḐП䯈ⱘ䎱⾏Ǆབᵰᇚ䯈䎱䆒Ў 5ˈ߭ᕫࠄབ೒ 3-16᠔⼎ⱘᬜᵰǄ ೒ 3-15 䆒㕂฿ܙৢⱘᬜᵰ ೒ 3-16 䆒㕂䯈䎱ৢⱘᬜᵰ ˄6˅ᇍ唤˖⹂ᅮ㸼ḐⳌᇍѢৠϔ↉㨑Ё݊Ҫܗ㋴˄བ᭛ᴀ៪೒ڣ˅ⱘᰒ⼎ԡ㕂Ǆ 䇈ᯢ˖Ӳߜճ୪ֺ಴ಁᄢนq੯ఊrನēୣ൐ઝఘϢມವၽζٌԅ૵Ψdయྑၽୣ൐ઝ ఘ૵Ψມವζٌēைರဈqᆰճ୪rݧqဗճ୪r༪ົd

(6)

˄7˅䖍Ḛ˖ᣛᅮ㸼Ḑ䖍Ḛⱘᆑᑺˈҹڣ㋴ЎऩԡǄ ˄8˅ ⏙䰸߫ᆑ੠ ⏙䰸㸠催ᣝ䪂˖Ң㸼ḐЁߴ䰸᠔᳝ᯢ⹂ᣛᅮⱘ㸠催៪߫ᆑǄ ˄9˅ ੠ ᣝ䪂˖ᇚ㸼Ḑᆑᑺ೼ڣ㋴੠ⱒߚ↨П䯈䕀ᤶǄ 9ĕಁᄢӦ၍ٌ೫໿ ᡞܝᷛ⿏ࡼࠄᶤϾऩܗḐ៪䗝ᢽ㢹ᑆऩܗḐˈৃҹ߽⫼ऩܗḐĀሲᗻā䴶ᵓᇍ䖭Ͼऩܗ Ḑⱘሲᗻ䖯㸠䆒㕂Ǆ՟བ䗝Ё᮹ᳳ᠔೼ⱘ᠔᳝ऩܗḐˈሲᗻ䴶ᵓབ೒ 3-17 ᠔⼎Ǆ ೒ 3-17 ऩܗḐሲᗻ䴶ᵓ ∈ᑇ˖⫼ᴹ䆒㕂ऩܗḐݙܗ㋴ⱘ∈ᑇᥦ⠜ᮍᓣ˖ሙᎺǃሙেǃሙЁǄᇚ᮹ᳳֵᙃሙে ᰒ⼎ˈབ೒ 3-18 ᠔⼎Ǆ ೒ 3-18 ᮹ᳳֵᙃ∈ᑇেᇍ唤 ൖⳈ˖⫼ᴹ䆒㕂ऩܗḐݙⱘൖⳈᥦ⠜ᮍᓣ˄乊ッᇍ唤ǃᑩッᇍ唤ǃሙЁᇍ唤˅Ǆ 催ǃᆑ˖⫼ᴹ䆒㕂ऩܗḐⱘᆑᑺ੠催ᑺǄ ϡᤶ㸠˖ৃҹ䰆ℶऩܗḐЁ䕗䭓ⱘ᭛ᴀ㞾ࡼᤶ㸠Ǆ ᷛ乬˖Փ䗝ᢽⱘऩܗḐ៤Ўᷛ乬ऩܗḐˈऩܗḐݙⱘ᭛ᄫ㞾ࡼҹᷛ乬Ḑᓣᰒ⼎ߎᴹǄ 㚠᱃买㡆˖⫼ᴹ䆒㕂ऩܗḐⱘ㚠᱃买㡆Ǆ 10ĕCSS פٌಁᄢ ℹ偸 1˖㒭Āᮙ␌ᮄ䯏ā䆒㕂᭛ᄫ໻ᇣǃ㚠᱃೒⠛ㄝˈ೒⠛ৡЎ news.jpgǄՓ⫼ ID 䗝ᢽ ఼ˈৡЎ newstitleǄ೼Ā#newstitle ⱘ CSS 㾘߭ᅮНāᇍ䆱ḚЁˈĀfont-familyāؐЎĀ咥ԧāˈ Āfont-sizeāؐЎ 18 ڣ㋴ǄĀ㚠᱃āऎඳЁˈĀBackground-imageāሲᗻᇍᑨⱘ᭛ᴀḚЁࡴ䕑 news.jpg೒⠛ˈĀBackground-repeatāؐЎĀrepeat-yāˈབ೒ 3-19 ᠔⼎Ǆ 䗝ᢽĀᮙ␌ᮄ䯏ā᠔೼㸠ˈ೼Āሲᗻā䴶ᵓЁ䗝ᢽ ID ؐĀnewstitleāˈेᅲ⦄њ亢Ḑᑨ⫼ˈ བ೒ 3-20 ᠔⼎Ǆ ೒ 3-19 Ā㚠᱃೒⠛ā䆒㕂 ೒ 3-20 Ānewstitleāᑨ⫼ᬜᵰ

(7)

ℹ偸 2˖㒭᠔᳝ᮄ䯏ᷛ乬ֵᙃ䆒㕂᭛ᄫ亢ḐˈՓ⫼㉏ৡ䗝ᢽ఼ˈ㉏ৡЎĀnewslistāˈ䆒㕂 Āfont-sizeāⱘؐЎ 12 ڣ㋴ˈݡᇚ亢Ḑᑨ⫼Ѣ᠔᳝ⱘᮄ䯏ᷛ乬ֵᙃǄ

ℹ偸 3˖Ў㸼Ḑ䆒㕂໪䖍Ḛˈ买㡆ЎĀ#adcf7cāˈՓ⫼㉏ৡ䗝ᢽ఼ˈৡ⿄ЎĀtable_borderāǄ ೼Ā䖍ḚāऎඳЁˈ䆒㕂ĀStyleāЎĀsolidāˈĀWidthāЎ 1 ڣ㋴˄㒚䖍Ḛ˅ˈĀColorāЎĀ#adcf7cāˈ བ೒ 3-21 ᠔⼎Ǆ 䗝ЁᭈϾ㸼Ḑˈ೼ᇍᑨⱘĀሲᗻā䴶ᵓЁ䗝ᢽĀ㉏āėĀtable_borderā䗝乍ˈ೼Āᅲᯊ 㾚೒āЁᶹⳟ᳔㒜ᬜᵰˈབ೒ 3-22 ᠔⼎Ǆ ೒ 3-21 Ā䖍Ḛā亢Ḑ䆒㕂 ೒ 3-22 Āᮙ␌ᮄ䯏ā᳔㒜ᬜᵰ 3.1.2 ᛫ಫ࣋ࡍ Փ⫼㸼Ḑ䖯㸠㔥义ᭈԧᏗሔˈᇚ৘⾡ϡৠⱘ㔥义ܗ㋴ޚ⹂ᅮԡ੠ᭈ唤㾘㣗ഄሩ⦄ߎᴹˈ ߯䗴ߎটདǃ㊒㕢ⱘ⬠䴶ᬜᵰˈᑊ⹂ֱ೼ϡৠ໻ᇣⱘにষ੠ሣᐩߚ䕼⥛ϟ䛑㛑ℷᐌᰒ⼎Ǆ ᇚ໡ᴖⱘ义䴶㒧ᵘ䆒䅵ߎᴹˈ佪ܜ㽕ᥠᦵጠ༫㸼Ḑᡔᴃˈৃҹᅲ⦄࣪㐕Ўㅔˈᑊ㛑ֱ䆕↣ Ͼ⠜ഫⱘⳌᇍ⣀ゟǄ↨བ㽕ᅲ⦄བ೒ 3-23 ᠔⼎ⱘ义ⳝ䚼ߚⱘᬜᵰˈ䳔㽕⫼ࠄ㸼Ḑጠ༫ᡔᴃǄ 佪ܜᦦܹϔϾ 2 㸠 2 ߫ⱘ㸼Ḑˈᑊᇍ㄀ 1 ߫ⱘ 1ǃ2 㸠䖯㸠ড়ᑊˈᕫࠄབ೒ 3-24 ᬜᵰǄ✊ৢˈ ೼㄀ 2 ߫ⱘ㄀ 1 㸠ᦦܹ 1 㸠 5 ߫ⱘ㸼Ḑˈ݊Ё㄀ 2 ੠ 4 ߫ᆑᑺЎ 1 ڣ㋴ˈ೼㄀ 2 㸠㄀ 2 ߫ᦦܹ 1㸠 9 ߫ⱘ㸼Ḑˈབ೒ 3-25 ᠔⼎Ǆ ೒ 3-23 ጠ༫㸼Ḑ⼎՟ ೒ 3-24 ᳔໪ሖ㸼Ḑ㒧ᵘ ೒ 3-25 ጠܹ㸼Ḑৢⱘᬜᵰ 㸼ḐᏗሔ㾘߭བϟ˖ ᳔໪ሖᏗሔ㸼Ḑⱘ㒧ᵘሑ䞣ㅔऩˈ♉⌏䖤⫼㸼Ḑጠ༫Ǆ

(8)

Ⳃࠡ 19 㣅ᇌⱘᰒ⼎఼Ꮖ៤Џ⌕ˈ㗗㰥ࠄ义䴶೼ᰒ⼎఼Ёⱘᰒ⼎↨՟ˈᑨ⹂ᅮ义䴶ⱘ ᆑᑺˈᏗሔ㸼Ḑⱘᆑᑺ᱂䗮䆒㕂Ў 1000 ڣ㋴ᎺেˈሙЁᰒ⼎ˈᑊ䆒㕂Ϣ义䴶ⱘϞ䖍䎱Ў 0Ǆጠ༫㸼Ḑⱘᆑᑺሑ䞣⫼ⱒߚ↨԰Ўऩԡˈ݊ൖⳈᇍᮍᓣ䆒㕂Ў乊ッᇍ唤Ǆ ԰ЎᏗሔⱘ㸼Ḑˈ䆒㕂݊䖍Ḛǃ฿ܙ੠䯈䎱Ў 0 ڣ㋴Ǆ 3.1.3 ᛫ಫ࣋ࡍऄၹࠄΓ ᴀ㡖ᇚՓ⫼㸼Ḑᅠ៤ĀФቅФ∈ā㔥キ佪义ⱘࠊ԰ˈ义䴶ᬜᵰབ೒ 3-26 ᠔⼎Ǆབ᮴⡍⅞ 䇈ᯢˈ㸼Ḑⱘ䖍Ḛǃ฿ܙ੠䯈䎱咬䅸䆒㕂Ў 0 ڣ㋴Ǆ ೒ 3-26 佪义ᬜᵰ೒ 1ĕ໭ߙฉྚ ᮄᓎ㔥义᭛ӊˈֱᄬᮄᓎ᭛ḷЎ index.htmlǄ䆒㕂㔥义ᷛ乬ЎĀФቅФ∈āǄ 2ĕಁᄢฉྚჼ඘פٌ Փ⫼ body ԰Ў䗝ᢽ఼ˈ䆒㕂义䴶ⱘᄫԧሲᗻĀFont-familyāЎĀᅟԧāˈĀFont-sizeāЎ 12ڣ㋴ˈĀᮍḚāߚ㉏ЁⱘϞ䖍䎱Āmargin-topāؐЎ 0ˈՓ义䴶ݙᆍϢϞ䖍⬠㋻䌈Ǆ Փ⫼ body 䗝ᢽ఼ᇚ义䴶㒳ϔ亢Ḑ䆒㕂ৃҹޣᇥৢ䴶䆒䅵ⱘᎹ԰䞣Ǆ 3ĕᄥᆴ೎ྚྚਡ ˄1˅೼㔥义ЁᦦܹϔϾ 2 㸠 1 ߫ⱘ㸼ḐˈᆑᑺЎ 1000 ڣ㋴ˈ೼㸼ḐĀሲᗻā䴶ᵓЁ䆒㕂㸼ḐЎĀሙЁᇍ唤āǄ೼㄀ 1 㸠Ёጠܹ 2 㸠 2 ߫ⱘ㸼Ḑˈᆑᑺ䆒Ў 100%Ǆᕫࠄབ೒ 3-27 ᠔ ⼎ⱘᬜᵰǄ ˄2˅೼ 250h90 ໻ᇣⱘԡ㕂ᦦܹ㔥义 Logo˄ᷛᖫ˅ˈ೒⠛ৡЎ logo.pngǄ

(9)

˄3˅೼ 750h30 ໻ᇣⱘऩܗḐЁጠ༫ 1 㸠 7 ߫ⱘ㸼ḐĀᇐ㟾㸼Ḑ 1āˈℸ㸼ḐᆑᑺЎ 257 ڣ㋴Ϩ∈ᑇሙেᇍ唤ˈ㄀ 1ǃ3ǃ5ǃ7 ߫ⱘᆑᑺЎ 85 ڣ㋴ˈ㄀ 2ǃ4ǃ6 ߫ⱘᆑᑺЎ 1 ڣ㋴Ǆ ೒ 3-27 义ⳝ㸼Ḑ㒧ᵘ೒ ೼ऩܗḐЁ䕧ܹݙᆍˈ᭛ᄫ买㡆ЎĀ#717270āˈ䆒㕂 ID 䗝ᢽ఼Āheader_textā䖯㸠亢Ḑ ໘⧚ˈᑊᑨ⫼Ѣℸ㸼Ḑˈᕫࠄབ೒ 3-28 ᠔⼎ⱘᬜᵰǄ ೒ 3-28 Āᇐ㟾㸼Ḑ 1āᬜᵰ ˄4˅ጠ༫ 1 㸠 8 ߫ⱘ㸼ḐĀᇐ㟾㸼Ḑ 2āˈ∈ᑇሙЁᥦ߫Ǆℸ㸼ḐᆑᑺЎ 257 ڣ㋴ˈ催ᑺ Ў 47 ڣ㋴ˈ㄀ 1 ߫੠㄀ 8 ߫ⱘᆑᑺ䆒Ў 11 ڣ㋴ˈ݊ԭऩܗḐ㞾ࡼഛߚǄ೼㄀ 1 ߫ᦦܹ೒⠛ navi_left.jpgˈ㄀ 8 ߫ᦦܹ೒⠛ navi_right.jpgǄ ㄀ 2 ߫ࠄ㄀ 7 ߫䳔䆒㕂㚠᱃೒⠛ navi_bg.jpgˈ⬅Ѣℸ೒⠛໻ᇣЎ 1h47ˈ಴ℸ䳔㽕䞡໡䫎䆒ǄᮄᓎৡЎ navi_bg ⱘ㉏䗝ᢽ఼ˈ೼Ā㚠᱃āऎඳЁ䗝ᢽ㚠᱃೒⠛ेৃǄᇚ㉏䗝ᢽ఼ᑨ⫼Ѣ ⳌᑨⱘऩܗḐˈᕫࠄབ೒ 3-29 ᠔⼎ᬜᵰǄ ೒ 3-29 Āᇐ㟾㸼Ḑ 2ā䰊↉ᗻᬜᵰ ೼㄀ 2 ߫ࠄ㄀ 7 ߫ऩܗЁ䕧ܹ᭛ᄫݙᆍˈϨ∈ᑇሙЁᥦ߫Ǆ䆒㕂ৡЎĀnavi_textāⱘ㉏䗝 ᢽ఼ˈ᭛ᄫ໻ᇣ䆒Ў 14 ڣ㋴ˈᑊᑨ⫼ѢऩܗḐˈᕫࠄབ೒ 3-30 ᠔⼎ⱘᬜᵰǄ ೒ 3-30 Āᇐ㟾㸼Ḑ 2ā᳔㒜ᬜᵰ ˄5˅೼໻ᇣЎ 1000h270 ⱘऩܗḐЁᦦܹ Flash ࡼ⬏ˈ᭛ӊৡ Ў banner.swfǄ݊᪡԰ᮍ⊩བϟ˖೼Āᦦܹā䴶ᵓЁ䗝ᢽĀᐌ⫼āė ĀၦԧāėĀSWFāੑҸˈབ೒ 3-31 ᠔⼎Ǆ

ؐᕫϔᦤⱘᰃˈFlash ⱘ⑤᭛ӊৢ㓔ৡЎ.flaˈℸḐᓣৃ೼ Flash 䕃ӊЁ㓪䕥˄ᇚ೼㄀ 7 ゴҟ㒡˅ˈԚ㛑೼㔥义Ϟ᪁ᬒⱘ Flash ᭛ӊⱘ ḐᓣЎ swfǄ ᳔㒜ˈ义ⳝᬜᵰབ೒ 3-32 ᠔⼎Ǆ LOGO Flash ᇐ㟾㸼Ḑ 2 ᇐ㟾㸼Ḑ 1 ೒ 3-31 Āၦԧā㦰ऩ

(10)

೒ 3-32 义ⳝ᳔㒜ᬜᵰ 4ĕಁᄢྚੋᅖ඘ઝఘࠒٲď໒ڴఢ෍ 3-33 ൎವĐ ᦦܹϔϾ 1 㸠 3 ߫ⱘ㸼ḐˈᆑᑺЎ 1000 ڣ㋴ˈሙЁᇍ唤Ǆ㄀ 1 ߫੠㄀ 3 ߫ऩܗḐᆑᑺЎ 250ڣ㋴ˈབ೒ 3-34 ᠔⼎Ǆ ೒ 3-33 Џԧݙᆍ䚼ߚ ೒ 3-34 ЏԧݙᆍᏗሔ㸼Ḑ ᇍ㸼ḐϞǃϟ䖍Ḛ䖯㸠䆒㕂ˈ䗝ᢽ㉏ৡ䗝ᢽ఼ˈৡЎĀmain_borderāˈ䆒㕂ĀBorder-styleā ЎĀsolidāˈĀBorder-widthāЎ 1 ڣ㋴ˈĀBorder-colorāЎĀ#3e6508āˈᕫࠄབ೒ 3-35 ᠔⼎ⱘ

(11)

ᬜᵰǄᇍ㄀ 2 ߫˄ेЁ䯈ⱘऩܗḐ˅䖯㸠Ꮊǃে䖍Ḛ㒓䆒㕂ˈ㉏ৡ䗝ᢽ఼Ў td2ˈ䰸䖍Ḛ㒓ԡ 㕂໪ˈ݊Ҫ亢ḐϢ䗝ᢽ఼ main_border 䆒㕂ⱘⳌৠǄᑨ⫼ৢˈᕫࠄབ೒ 3-36 ᠔⼎ⱘᬜᵰǄ ೒ 3-35 ЏԧݙᆍϞǃϟ䖍Ḛᬜᵰ೒ ೒ 3-36 ऩܗḐᎺǃে䖍Ḛᬜᵰ೒ 5ĕᄥᆴྚੋᅖ඘ᆰॹઝఘ ˄1˅೼㄀ 1 ߫ᦦܹ 3 㸠 1 ߫ⱘ㸼Ḑˈབ೒ 3-37 ᠔⼎Ǆ೼ℸ㸼Ḑⱘ㄀ 1 㸠ᦦܹĀᮙ␌ᮄ䯏ā ⠜ഫǄ㄀ 3 㸠ᦦܹĀটᚙ䫒᥹ā⠜ഫǄ㄀ 2 㸠Ў⠜ഫ䯈䱨㸠ˈ催ᑺЎ 3 ڣ㋴ˈ㽕ߛᤶࠄĀҷⷕā 㾚೒߭ᇚ݊咬䅸ⱘぎḐ˄ ˅এᥝˈབ೒ 3-38 ᠔⼎Ǆ ೒ 3-37 ᳔Ꮊ䖍ऩܗḐ㒧ᵘ೒ ˄2˅ࠊ԰Āᮙ␌ᮄ䯏ā⠜ഫǄ೼㄀ 1 ߫ऩܗḐЁᦦܹ 2 㸠 1 ߫ⱘ㸼ḐˈᆑᑺЎ 243 ڣ㋴ˈ Ϩ∈ᑇሙЁᥦ߫ˈབ೒ 3-39 ᠔⼎Ǆ ೒ 3-38 ㄀ 2 㸠ⱘĀҷⷕā ೒ 3-39 Āᮙ␌ᮄ䯏ā⠜ഫ㒧ᵘ೒ Ў⠜ഫ䆒㕂໪䖍Ḛ亢Ḑˈ䆒㕂㉏ৡ䗝ᢽ఼Āouter_borderāˈ೼Āouter_border ⱘ CSS ᅮНā ᇍ䆱ḚЁ䆒㕂Ā䖍Ḛā㉏߿亢ḐሲᗻǄĀBorder-styleāЎĀsolidāˈĀBorder-widthāЎ 1 ڣ㋴ˈ ĀBorder-colorāЎĀ#b0d182āˈབ೒ 3-40 ᠔⼎Ǆᕫࠄབ೒ 3-41 ᠔⼎ⱘᬜᵰǄ ೒ 3-40 㸼Ḑ໪䖍Ḛ㒓䆒㕂 ೒ 3-41 Ā໪䖍Ḛā䆒㕂ᬜᵰ 䇈ᯢ˖qout_borderrफ༪႔୶ߜ࿫ဈဟqဖெढ़ࠄrcqडౖਥಪrۤqडౖࡕԫr͑ࣖd ✊ৢˈᇚ㄀ 1 㸠催ᑺ䆒㕂Ў 32 ڣ㋴ˈ䆒㕂ℸऩܗḐⱘ㚠᱃೒⠛Ў news_bg.jpgˈࣙ৿ⱘ᭛ ᄫݙᆍ䆒㕂Āfont-familyāЎĀढ᭛ὋԧāˈĀFont-sizeāЎ 18 ڣ㋴ˈĀFont-weightāЎĀboldāǄ ৠᯊᦦܹㆁ༈೒⠛ arrow.gif ੠᳈໮೒⠛ more.gifˈᕫࠄབ೒ 3-42 ᠔⼎ⱘᬜᵰǄ Āᮙ␌ᮄ䯏ā⠜ഫ Āটᚙ䫒᥹ā⠜ഫ 䯈䱨䆒㕂

(12)

೼㄀ 2 㸠ҹ߫㸼ⱘᮍᓣᦦܹᮄ䯏ֵᙃˈᑊᇚ߫㸼ᷛ䆄䆒㕂Ў೒⠛ news.gifˈ߫㸼乍П䯈ⱘ 㸠催䆒㕂Ў 30 ڣ㋴ˈᕫࠄབ೒ 3-43 ᠔⼎ⱘᬜᵰǄ ೒ 3-42 Āᮙ␌ᮄ䯏āᷛ乬ᷣᬜᵰ ೒ 3-43 Āᮙ␌ᮄ䯏ā᳔㒜ᬜᵰ ˄3˅ࠊ԰Āটᚙ䫒᥹ā⠜ഫǄ⬅ѢĀটᚙ䫒᥹āϢĀᮙ␌ᮄ䯏āⱘ㒧ᵘ੠亢ḐⳌԐˈ಴ ℸЎ㡖ⳕ㔥义ࠊ԰ᯊ䯈ˈ䗮䖛໡ࠊ㉬䌈ᮍᓣᅠ៤Āটᚙ䫒᥹ā㒧ᵘⱘ䆒㕂੠ⳌԐ亢Ḑⱘᰒ⼎Ǆ 䗝ЁĀᮙ␌ᮄ䯏ā⠜ഫ㸼Ḑˈেߏ哴ᷛˈ೼ᔍߎⱘ㦰ऩЁ䗝ᢽĀᣋ䋱ā䗝乍Ǆ ᥹ⴔᇚܝᷛᦦܹ㄀ 3 㸠ˈেߏ哴ᷛˈ䗝ᢽĀ㉬䌈āੑҸˈᡞݙᆍ੠Ḑᓣܼ䛑໡ࠊϟᴹˈ བ೒ 3-44 ᠔⼎Ǆ䆒㕂∈ᑇሙЁᇍ唤ᑊᇚݙᆍ䖯㸠᳓ᤶˈᕫࠄབ೒ 3-45 ᠔⼎ⱘᬜᵰǄ ೒ 3-44 Āটᚙ䫒᥹ā⠜ഫ᪡԰೒ ೒ 3-45 ĀЏԧݙᆍāᎺ߫ᬜᵰ೒ 6ĕᄥᆴᅖ඘ઝఘᄯ޷ॹઝఘ ˄1˅ᦦܹϔϾ 2 㸠 1 ߫ⱘ㸼ḐˈᆑᑺЎ 100%ˈ∈ᑇሙЁᰒ⼎ˈൖⳈሙ乊ッˈབ೒ 3-46 ᠔⼎Ǆ㄀ 1 㸠⫼Ѣࠊ԰Ā᱃⚍᥼㤤āݙᆍˈ㄀ 2 㸠⫼Ѣࠊ԰Āᮙ␌㒓䏃āݙᆍǄ ೒ 3-46 Ё䯈㸠ᦦܹ㸼Ḑ㒧ᵘ೒

(13)

˄2˅ࠊ԰Ā᱃⚍᥼㤤ā⠜ഫǄ ᇚ㄀ 1 㸠ⱘ催ᑺ䆒㕂Ў 320 ڣ㋴ˈ䆒㕂 ID 䗝ᢽ఼Āscenery_bottom_bgāˈЎ݊䆒㕂㚠᱃೒ ⠛ line_bg.png ˈ ೼ Ā 㚠 ᱃ ā ऎ ඳ Ё ࡴ 䕑 Ā Background-image ā 䗝乍 ⱘ ᭛ ӊ 䏃 ᕘ ˈ 䆒㕂 ĀBackground-repeatāЎĀno-repeatāˈĀBackground-position(Y)āЎĀbottomāˈབ೒ 3-47 ᠔⼎Ǆ 㚠᱃ᬜᵰབ೒ 3-48 ᠔⼎Ǆ ೒ 3-47 Ā᱃⚍᥼㤤ā⠜ഫ㚠᱃೒⠛䆒㕂 ೒ 3-48 Ā᱃⚍᥼㤤ā⠜ഫ㚠᱃ᬜᵰ ೒ 3-49 Ā᱃⚍᥼㤤āጠ༫㸼Ḑ㒧ᵘ ೼Ā᱃⚍᥼㤤ā⠜ഫ᠔೼ऩܗḐᦦܹϔϾ 3 㸠 1 ߫ⱘ㸼ḐˈᆑᑺЎ 95%ˈ∈ᑇሙЁᰒ⼎ˈ བ೒ 3-49 ᠔⼎Ǆ㄀ 1 㸠䖯㸠ᷛ乬ݙᆍ䆒㕂ˈ㄀ 3 㸠䖯㸠䆺㒚ݙᆍᰒ⼎Ǆ㄀ 2 㸠䖯㸠䯈䱨䆒㕂ˈ ऩܗḐ催ᑺЎ 10 ڣ㋴Ǆ ೼Ā᱃⚍᥼㤤ᷛ乬ᷣāऩܗḐݙᦦܹϔϾ 2 㸠 2 ߫ⱘ㸼ḐˈᆑᑺЎ 100%ˈᑊᇍ㄀ 1 ߫䖯㸠ড়ᑊˈ䆒㕂݊ᆑᑺЎ 10 ڣ㋴ˈ㚠᱃㡆ЎĀ#3e6508āˈᕫࠄབ೒ 3-50 ᠔⼎ⱘᬜᵰǄ ೒ 3-50 ᷛ乬ᷣऩܗḐጠܹ㸼Ḑᬜᵰ ᇍ㄀ 2 㸠㄀ 2 ߫䖯㸠䆒㕂ˈ催ᑺ䆒Ў 1 ڣ㋴ˈৠᯊএᥝҷⷕЁⱘĀ āˈ㚠᱃㡆Ў Ā#3e6508āˈᕫࠄབ೒ 3-51 ᠔⼎ⱘᬜᵰǄ ೒ 3-51 ᷛ乬ᷣऩܗḐ߱ℹᬜᵰ Ā᱃⚍᥼㤤āᷛ乬ᷣ Ā᱃⚍᥼㤤ā䆺㒚ݙᆍ 䯈䱨䆒㕂

(14)

೼㄀ 1 㸠㄀ 2 ߫ጠ༫ϔϾ 1 㸠 2 ߫ⱘ㸼Ḑˈᆑᑺ䆒Ў 100%ˈĀ᱃⚍᥼㤤āಯϾᄫᬒ೼㄀ 1 ߫ˈ೒⠛Āmore_1.gifāᬒ೼㄀ 2 ߫Ϩ∈ᑇሙেˈ⊼ᛣՓ⫼ぎḐ䖯㸠䗖ᔧ䯈䱨ǄᇍĀ᱃⚍āϸ Ͼᄫ䖯㸠亢Ḑ䆒㕂ˈՓ⫼ৡЎĀscenery_jdāⱘ㉏䗝ᢽ఼ˈ䆒㕂ĀFont-familyāЎĀढ᭛㸠Ὃāˈ ĀFont-sizeāЎ 24 ڣ㋴ˈĀColorāЎĀ#f18821āǄᇍĀ᥼㤤āϸϾᄫՓ⫼Āscenery_tjā㉏䗝ᢽ ఼ˈ䆒㕂ĀFont-familyāЎĀढ᭛ὋԧāˈĀFont-sizeāЎ 16 ڣ㋴ˈᑊ᳝ࡴ㉫ᬜᵰǄᑨ⫼ৢˈᕫ ࠄབ೒ 3-52 ᠔⼎ⱘᬜᵰǄ ೒ 3-52 Ā᱃⚍᥼㤤āᷛ乬ᷣ䆒㕂ᬜᵰ ೼Ā᱃⚍᥼㤤䆺㒚ݙᆍā᠔೼ऩܗḐ䞠ᦦܹϔϾ 2 㸠 3 ߫ⱘ㸼Ḑˈབ೒ 3-53 ᠔⼎Ǆ೼㄀ 1㸠ߚ߿ᦦܹ dafo.pngǃemei.png ੠ jkh.pngˈᥦ߫ᮍᓣЎ∈ᑇሙЁǄ㄀ 2 㸠ᦦܹᦣ䗄᭛ᄫˈᑊ 䖯㸠亢Ḑ᥻ࠊˈ䆒㕂᭛ᄫ㸠催Ў 20 ڣ㋴Ǆ᳔㒜ᕫࠄ೒ 3-54 ᠔⼎ⱘᬜᵰǄ ೒ 3-53 Ā᱃⚍᥼㤤䆺㒚ݙᆍā㸼Ḑ㒧ᵘ೒ ೒ 3-54 Ā᱃⚍᥼㤤ā⠜ഫ䆒䅵ᬜᵰ ˄3˅ࠊ԰Āᮙ␌䏃㒓ā⠜ഫǄ ᦦܹϔϾ 3 㸠 1 ߫ⱘ㸼ḐˈᆑᑺЎ 95%ˈ∈ᑇሙЁǄ㄀ 1 㸠䆒㕂Āᮙ␌䏃㒓āᷛ乬ֵᙃˈ ㄀ 2 㸠䆒㕂䯈䱨催ᑺЎ 15 ڣ㋴ˈ㄀ 3 㸠ᦦܹ䆺㒚ݙᆍǄℸℹ偸ϢĀ᱃⚍᥼㤤ā⠜ഫⱘ䆒㕂㉏ԐǄ ೼ጠܹ㸼Ḑⱘ㄀ 1 㸠ݡᦦܹ 1 㸠 2 ߫ⱘ㸼ḐˈᆑᑺЎ 100%ǄᎺ߫⫼Ѣᬒ㕂ᷛ乬೒⠛ route.pngˈে߫⫼Ѣᬒ㕂 more_1.gif ೒⠛ˈ∈ᑇሙেˈᑊՓ⫼ぎḐ䇗ᭈԡ㕂Ǆᕫࠄབ೒ 3-55 ᠔⼎ⱘᬜᵰǄ ೒ 3-55 Āᮙ␌䏃㒓āᷛ乬ֵᙃ䆒㕂 ೼㄀ 3 㸠ᦦܹ 11 㸠 4 ߫ⱘ㸼ḐˈᆑᑺЎ 90%ˈབ೒ 3-56 ᠔⼎Ǆᇍي᭄㸠䖯㸠ড়ᑊˈ䆒㕂

(15)

催ᑺЎ 3 ڣ㋴ˈএᥝ咬䅸ⱘぎḐˈ䆒㕂㉏ৡ䗝ᢽ఼Āroute_dotāᇚ೒⠛ dot.gif ԰Ў㚠᱃Ǆ೼᠔ ᳝༛᭄㸠ⱘ㄀ 1 ߫ᦦܹ route_arrow.gifˈ㄀ 3 ߫䕧ܹĀ᥼㤤ᣛ᭄ā᭛ᴀˈ㄀ 4 ߫ᦦ᭄ܹ䞣ϡㄝ ⱘ star.gif ೒⠛Ǆᅠ୘Ⳍ݇ݙᆍৢˈᬜᵰབ೒ 3-57 ᠔⼎Ǆ ೒ 3-56 Āᮙ␌䏃㒓ā䆺㒚ݙᆍ㒧ᵘ೒ ೒ 3-57 Āᮙ␌䏃㒓ā⠜ഫᬜᵰ೒ Ё䯈᳔߫㒜ᬜᵰབ೒ 3-58 ᠔⼎Ǆ ೒ 3-58 ĀЏԧݙᆍāЁ䯈߫ᬜᵰ 7ĕᄥᆴᅖ඘ઝఘဗॹઝఘ ˄1˅ে߫䆒㕂ᮍᓣϢᎺ߫㉏ԐǄ佪ܜᦦܹϔϾ 3 㸠 1 ߫ⱘ㸼ḐˈᆑᑺЎ 243 ڣ㋴ˈ∈ᑇሙ

(16)

Ёᰒ⼎Ǆ㄀ 1 㸠ᬒ㕂ĀФቅ㕢亳ā⠜ഫˈ㄀ 2 㸠䆒㕂催ᑺЎ 3 ڣ㋴ˈ㄀ 3 㸠ᬒ㕂ĀФቅ䜦ᑫā ⠜ഫǄ ˄2˅೼㄀ 1 㸠ᦦܹ 3 㸠 2 ߫ⱘ㸼ḐˈᆑᑺЎ 100%ˈࠊ԰ĀФቅ㕢亳ā⠜ഫˈᑨ⫼Āouter_borderā ㉏䗝ᢽ఼ˈ䆒㕂໪䖍ḚǄ㄀ 1 㸠催ᑺЎ 30 ڣ㋴ˈ㚠᱃㡆ЎĀ#8abb47āˈᎺ߫ᬒ food.png ೒⠛ˈ 䆒㕂ᆑᑺЎ 30 ڣ㋴ˈ催ᑺЎ 30 ڣ㋴ˈে߫䕧ܹĀФቅ㕢亳āಯϾᄫǄ㄀ 2 㸠䖯㸠ড়ᑊˈҹ߫ 㸼ᔶᓣᰒ⼎㕢亳ֵᙃˈ߫㸼乍ᷛ䆄Ў೒⠛ right_arrow.gifˈৃՓ⫼㉏ৡ䗝ᢽ఼ right_list ᴹ䖯㸠亢Ḑ䆒㕂ˈᬜᵰབ೒ 3-59 ᠔⼎ǄԚϢ᳔㒜ᬜᵰ↨䕗থ⦄ˈfood.png ೒⠛ⱘԡ㕂䳔㽕䇗ᭈǄ Փ⫼㉏ৡ䗝ᢽ఼ˈৡЎ img_positionˈ೼݊ĀCSS 㾘߭ᅮНāᇍ䆱ḚЁ䗝ᢽĀᅮԡā㉏߿ˈ ᇚĀpositionāؐ䆒ЎĀrelativeāˈĀtopāؐ䆒Ў 15 ڣ㋴ˈᕫࠄབ೒ 3-60 ᠔⼎ᬜᵰǄ ೒ 3-59 ĀФቅ㕢亳ā⠜ഫ߱ℹᬜᵰ ೒ 3-60 ĀФቅ㕢亳ā⠜ഫ᳔㒜ᬜᵰ ㄀ 3 㸠ড়ᑊৢ䕧ܹĀ᳈໮…ā᭛ᄫֵᙃˈ∈ᑇሙেᥦ߫Ǆ ˄3˅ĀФቅ䜦ᑫā⠜ഫϢĀФቅ㕢亳āⳌԐˈ೼ℸϡݡ䌬䗄Ǆ ে߫ݙᆍ᳔㒜ᬜᵰབ೒ 3-61 ᠔⼎Ǆ ೒ 3-61 ে᳔߫㒜ᬜᵰ 8ĕᄥᆴྚ߶໰๯ ᇚܝᷛ㕂Ѣ㸼Ḑҹ໪ⱘぎⱑ໘ˈᦦܹϔϾ 1 㸠 1 ߫ⱘ㸼ḐˈᆑᑺЎ 1000 ڣ㋴ˈ催ᑺЎ 100

(17)

ڣ㋴ˈ∈ᑇሙЁᇍ唤Ǆ䗝ᢽ ID 䗝ᢽ఼ˈৡЎĀfooter_bgāˈЎ义㛮⏏ࡴ㚠᱃೒⠛ bottom.gifˈ ಴Ў೒⠛໻ᇣ䍙䖛њℸ㸼ḐˈЎњ䖒ࠄ᳔Շᰒ⼎ᬜᵰˈĀBackground-position(Y)āؐЎĀtopāǄ ✊ৢ䕧ܹϸ㸠᭛ᄫֵᙃˈᑊ∈ᑇሙЁᰒ⼎ˈབ೒ 3-62 ᠔⼎Ǆ ೒ 3-62 义㛮ᰒ⼎ᬜᵰ ĀФቅФ∈ā㔥キ佪义ࠊ԰ᅠ៤Ǆֱᄬৢˈৃᣝ F12 䬂ᶹⳟ义䴶ᬜᵰǄ

3.2 ᡔᩗଌ

䍙䫒᥹ᰃ㔥义Ё᳔䞡㽕ⱘܗ㋴Пϔˈгᰃᑨ⫼᳔໮ⱘϔ乍ࡳ㛑ǄϔϾ㔥キᰃ⬅໮Ͼ义䴶㒘៤ⱘˈ㗠䖭ѯ义䴶П䯈ձ᥂䫒᥹⹂ᅮⳌѦП䯈ⱘᇐ㟾݇㋏Ǆ᳝њ䍙䫒᥹ⱘᄬ೼ˈ⌣㾜㗙ৃҹ 䗮䖛ऩߏ㔥义ЁⱘᶤϾܗ㋴䕏ᵒഄᅲ⦄㔥义П䯈ⱘ䕀ᤶǃϟ䕑᭛ӊǃᬊথ䚂ӊㄝǄ ĀФቅФ∈ā㔥キᏆᅠ៤њ佪义 index.htmlǃФቅὖމ义䴶 lsgk.htmlǃФቅᮙ␌ഄ೒义䴶 travelmap.htmlǃФቅ㕢亳义 food.html ⱘࠊ԰ˈ෎Ѣ䖭ѯᅲ՟ˈ䗮䖛ᴀ㡖ⱘᄺдˈ៥Ӏᇚᥠᦵキ⚍ ݙⱘ义䴶䫒᥹ǃキ⚍໪义䴶ⱘ䫒᥹ҹঞ䫮䆄䫒᥹ㄝˈৠᯊᅲ⦄ᇍ䍙䫒᥹ⱘ亢Ḑ᥻ࠊǄ 3.2.1 ᡔᩗଌ۳వഐঐ 䍙䫒᥹˄hyperlink˅ᰃ㔥义ⳌѦ㘨㋏ⱘḹṕˈᅗⱘᷛ䆄Ў<a>ˈ㣅᭛ܼ⿄Ў anchorˈЁ᭛ ᛣᗱᰃĀ䫮āˈৃҹᡞ䍙䫒᥹ⳟ԰ᰃϔϾĀ䫮āˈᅗৃҹᡯ৥೼ᔧࠡ义䴶ᅮНⱘӏԩᣛᅮԡ㕂ˈ བ㔥义ǃ೒ڣǃໄ乥ǃ㾚乥ǃWord ᭛ḷǃय़㓽ࣙˈ⫮㟇ᰃ义䴶ЁⱘᶤϾԡ㕂˄䫮⚍˅Ǆ 1ĕбढ़ࠄԅדफ བᵰᣝ䫒᥹Ⳃᷛߚ㉏ˈৃҹߚЎҹϟ޴⾡Џ㽕㉏ൟ˖ ݙ䚼䍙䫒᥹˖ৠϔ㔥キ᭛ḷП䯈ⱘ䫒᥹Ǆ ໪䚼䍙䫒᥹˖ϡৠ㔥キ᭛ḷП䯈ⱘ䫒᥹Ǆ 䫮⚍䍙䫒᥹˖ৠϔ㔥义៪ϡৠ㔥义Ёᣛᅮԡ㕂ⱘ䫒᥹Ǆ ⬉ᄤ䚂ӊ䍙䫒᥹˖ਃࡼ䚂ӊᅶ᠋ッ⿟ᑣˈৃҹݭ䚂ӊᑊথ䗕ࠄ䫒᥹ⱘ䚂ㆅЁǄ བᵰᣝ䍙䫒᥹ऩߏⱘᇍ䈵˄䫒᥹䕑ԧ˅ߚ㉏ˈৃߚЎ᭛ᴀ䍙䫒᥹ǃ೒ڣ䍙䫒᥹ㄝǄ 2ĕढ़ࠄাࡅؠ઱ ೼ᓎゟ䫒᥹Пࠡˈ䳔㽕ᓘ⏙䫒᥹Ϣ㹿䫒᥹ᇍ䈵ⱘ䏃ᕘˈ䖭ḋᠡ㛑ℷ⹂䏇䕀ࠄ䫒᥹ⳂᷛϞǄ 䏃ᕘ䗮ᐌ᳝ҹϟϝ⾡㸼⼎ᮍ⊩˖ ˄1˅㒱ᇍ䏃ᕘ˖ᣛᶤϾ᭛ӊ೼㔥㒰Ϟⱘᅠᭈ䏃ᕘˈࣙᣀ䗖⫼ⱘण䆂˄བ httpǃftpǃrtsp ㄝ˅ǃWeb ᳡ࡵ఼ǃ䏃ᕘ੠᭛ӊৡㄝǄ߯ᓎᇍᔧࠡキ⚍ҹ໪᭛ӊⱘ䫒᥹ᯊᖙ乏Փ⫼㒱ᇍ䏃ᕘˈ ᐌ⫼ⱘህᰃ㔥ഔ˄URL ഄഔ˅ˈ՟བ˖ http://www.lstc.edu.cn/index.html ftp://210.41.166.195/ ៪㗙ᰃ᭛ḷⱘ㒱ᇍ䏃ᕘˈ՟བ˖ file:///G|/೒⠛/᠟ᴎ೒⠛/1.gif 㒱ᇍ䏃ᕘⱘӬ⚍ᰃ㛑໳ޚ⹂ഄᡒࠄⳌ݇᭛ӊˈ㔎⚍ᰃ䏃ᕘ໾䭓ˈབᵰⳂᷛ᭛ӊ㹿⿏ࡼˈ

(18)

߭䫒᥹᮴ᬜˈ䳔㽕ׂᬍ䏃ᕘˈ䖭⾡ᮍᓣϡ֓Ѣׂᬍ੠⌟䆩Ǆ

˄2˅ḍⳂᔩⳌᇍ䏃ᕘ˖ᰃᣛҢキ⚍ḍ᭛ӊ།ࠄ㹿䫒᥹᭛ḷ㒣⬅ⱘ䏃ᕘˈҹࠡ᭰ᴴᓔ༈Ǆ ՟བ/about/index.html ህᰃキ⚍ḍ᭛ӊ།ϟⱘ about ᄤ᭛ӊ།ЁⱘϔϾ᭛ӊ˄index.html ˅ⱘḍ 䏃ᕘǄḍ䏃ᕘ෎Ѣキ⚍ḍⳂᔩˈ೼ৠϔϾキ⚍ⱘ㔥义ЁৃҹՓ⫼Ǆ ḍⳂᔩⳌᇍ䏃ᕘ㽕ℷ⹂ᶹⳟ㔥义Ёⱘ䫒᥹ˈ䳔㽕ᇚ㔥义ϞӴࠄ᳡ࡵ఼Ϟ៪ᇚ㔥义⫼㔥キ ᳡ࡵ఼䕃ӊথᏗߎᴹˈ✊ৢ⫼⌣㾜఼䆓䯂䆹义䴶Ǆ ˄3˅᭛ḷⳂᔩⳌᇍ䏃ᕘ˖ҹᔧࠡ᭛ḷ᠔೼ⱘԡ㕂Ў䍋⚍ˈࠄ㹿䫒᥹᭛ḷ㒣䖛ⱘ䏃ᕘǄⳌ ᇍ䏃ᕘ᳔䗖ড়㔥キⱘݙ䚼䫒᥹Ǆབᵰ䫒᥹ࠄৠϔⳂᔩϟˈ߭া䳔㽕䕧ܹ㽕䫒᥹᭛ӊⱘৡ⿄˗㽕䫒᥹ࠄϟϔ㑻ⳂᔩЁⱘ᭛ӊˈ߭া䳔㽕䕧ܹⳂᔩৡˈ✊ৢ䕧ܹĀ/āݡ䕧ܹ᭛ӊৡˈ՟བ flash/banner.swf˗བ㽕䫒᥹ࠄϞϔ㑻ⳂᔩЁⱘ᭛ӊˈ߭ܜ䕧ܹĀ../āݡ䕧ܹⳂᔩৡǃ᭛ӊৡˈ ՟བ../images/logo.jpgǄ Ⳍᇍ䏃ᕘⱘӬ⚍ᰃ⿏ỡᗻᔎˈা㽕ᭈϾキ⚍ⱘ㒧ᵘ੠᭛ӊⱘԡ㕂ϡবˈᬍবキ⚍ⱘ䏃ᕘ ϡӮᕅડ䫒᥹䏃ᕘⱘᬜᵰǄԚᰃᔧ䫒᥹ᇍ䈵੠䫒᥹䕑ԧⱘⳌᇍԡ㕂ব࣪ৢˈৠḋ䳔㽕ᬍব䏃ᕘǄ 3.2.2 ѹथЯᦊᡔᩗଌ ߯ᓎݙ䚼䍙䫒᥹ᰃᣛ೼ৠϔϾ㔥キݙⱘϡৠ义䴶П䯈ⱘ䫒᥹Ǆ㹿䫒᥹ᇍ䈵ৃҹᰃӏᛣⱘ ᭛ӊˈϡҙৃҹᰃ㔥义ˈ䖬ৃҹᰃ݊Ҫ᭛ḷˈབ Office ᭛ḷǄ 1ĕઝϦбढ़ࠄٌ಴ ˄1˅བᵰᰃৠϔⳂᔩݙⱘ㔥义᭛ӊǄ

<a href="Ⳃᷛ᭛ӊৡ.html">䫒᥹䕑ԧ</a> ˄2˅བᵰ䫒᥹ࠄϟϔ㑻ⳂᔩЁⱘ㔥义᭛ӊǄ

<a href="Ⳃᔩৡ/Ⳃᷛ᭛ӊৡ.html">䫒᥹䕑ԧ</a> ˄3˅བᵰ䫒᥹ࠄϞϔ㑻ⳂᔩЁⱘ㔥义᭛ӊǄ

<a href="../Ⳃᷛ᭛ӊৡ.html">䫒᥹䕑ԧ</a> ˄4˅བᵰ䫒᥹ࠄৠ㑻ⳂᔩЁⱘ㔥义᭛ӊǄ

2ĕำ·бढ़ࠄ ᠔䇧ⱘ᭛ᴀ䍙䫒᥹ˈᰃᡞ᭛ᴀ԰Ў䫒᥹䕑ԧⱘ䍙䫒᥹ᔶᓣǄ᪡԰ᮍ⊩བϟǄ ˄1˅೼᭛ḷにষĀ䆒䅵ā㾚೒Ё䗝ᢽ᭛ᄫˈབ佪义Ёⱘᇐ㟾ᴵֵᙃĀФቅὖމāǄ ˄2˅೼ᇍᑨⱘሲᗻ䴶ᵓЁᠻ㸠ϟ߫᪡԰Пϔ˖ ऩߏĀ䫒᥹ā᭛ᴀḚেջⱘ᭛ӊ།೒ᷛ ˈ⌣㾜ᑊ䗝ᢽϔϾⳂᷛ᭛ӊǄ Փ⫼Āᣛ৥᭛ӊā೒ᷛ ˈᇚ䫒᥹Ⳃᷛᣛ৥Ā᭛ӊā䴶ᵓЁⱘ㔥义᭛ӊˈབ೒ 3-63 ᠔⼎Ǆ ೒ 3-63 Փ⫼ᣛ৥᭛ӊ߯ᓎ䍙䫒᥹

(19)

˄3˅ҢĀሲᗻā䴶ᵓЁ˄བ೒ 3-64 ᠔⼎˅ⱘĀⳂᷛāϟᢝ߫㸼ḚЁ䗝ᢽⳂᷛ᭛ӊⱘᠧᓔ ԡ㕂ˈ䗝乍৿НབϟǄ _blank˖ᇚⳂᷛ᭛ӊࡴ䕑ࠄᮄⱘ⌣㾜఼にষǄ _parent˖ᇚⳂᷛ᭛ӊࡴ䕑ࠄ䫒᥹䕑ԧ᠔೼Ḛᶊⱘ⠊Ḛᶊ៪⠊にষǄབᵰ䫒᥹䕑ԧ᠔೼ Ḛᶊϡᰃጠ༫Ḛᶊˈ߭Ⳃᷛ᭛ӊࡴ䕑ࠄᭈϾ⌣㾜఼にষǄ _self˖ᇚⳂᷛ᭛ӊࡴ䕑ࠄ䫒᥹䕑ԧ᠔೼ⱘৠϔḚᶊ៪にষǄℸЎ咬䅸ؐˈ䗮ᐌϡ䳔㽕 ᣛᅮᅗǄ _top˖ᇚⳂᷛ᭛ӊࡴ䕑ࠄᭈϾ⌣㾜఼にষˈҢ㗠ߴ䰸᠔᳝ḚᶊǄ ೒ 3-64 ĀⳂᷛāሲᗻ㦰ऩ 3ĕ෍ଫбढ़ࠄ ೒⠛䍙䫒᥹᳝ϸ⾡ᔶᓣˈᭈϾ೒ڣ԰Ў䫒᥹䕑ԧⱘ೒ڣ䍙䫒᥹੠೒ڣሔ䚼ऎඳ԰Ў䫒᥹ 䕑ԧⱘ೒ڣ⛁⚍䍙䫒᥹Ǆ ˄1˅೒ڣ䍙䫒᥹ǄབᵰᇚᭈϾ೒ڣ԰Ў䫒᥹䕑ԧˈ݊᪡԰ᮍ⊩Ϣ߯ᓎ᭛ᄫ䍙䫒᥹ϔ㟈ˈ াᰃ䗝Ёⱘ䍙䫒᥹⛁⚍ᰃ೒ڣ㗠ϡᰃ᭛ᄫǄ ˄2˅೒ڣ⛁⚍䍙䫒᥹Ǆ೒ڣ⛁⚍гিخ೒ڣഄ೒៪೒ڣ᯴ᇘˈᰃᣛ೼ৠϔᐙ೒ڣЁᅮН ໮Ͼऎඳˈ↣ϾऎඳᣛᅮϔϾϡৠⱘ䍙䫒᥹ˈᔧऩߏϡৠऎඳᯊˈৃҹ䏇䕀ࠄᣛᅮⱘⳂᷛ㔥义Ǆ ҹĀФቅᮙ␌ഄ೒ātravelmap.html Ў՟ˈ߯ᓎ೒ڣ⛁⚍ⱘᮍ⊩བϟǄ ℹ偸 1˖䗝Ё೒ڣˈ೼ᇍᑨⱘሲᗻ䴶ᵓᎺϟᮍ䗝ᢽĀഄ೒ā䗝乍ᴹࠊ԰⛁⚍ˈབ೒ 3-65 ᠔⼎Ǆ ೒ 3-65 ሲᗻ䴶ᵓĀഄ೒ā乍 ℹ偸 2˖ḍ᥂䳔㽕߯ᓎⶽᔶǃ೚ᔶ੠໮䖍ᔶ⛁⚍Ǆऩߏ ᣝ䪂ৃҹ߯ᓎⶽᔶ⛁⚍ˈऩߏ ᣝ䪂ৃҹ߯ᓎ೚ᔶ⛁⚍ˈऩߏ ᣝ䪂ৃҹ߯ᓎ໮䖍ᔶ⛁⚍ˈऩߏ ೒ᷛৃҹᇍ䆒㕂ⱘ⛁⚍䖯㸠໻ᇣǃԡ㕂ⱘ䇗ᭈǄ ऩߏĀⶽᔶā⛁⚍೒ᷛˈ೼Фቅᮙ␌ഄ೒Ϟᣝԣ哴ᷛᎺ䬂ϡᬒˈ೼ኼⳝ᠔೼ഄᢪᣑˈᔶ ៤ⶽᔶ⛁⚍ˈབ೒ 3-66 ᠔⼎Ǆ

(20)

೒ 3-66 ⏏ࡴ⛁⚍ᬜᵰ ℹ偸 3˖೼䗝Ёⱘ⛁⚍Āሲᗻā䴶ᵓЁ˄བ೒ 3-67 ᠔⼎˅ˈ䖯㸠䫒᥹ǃⳂᷛㄝሲᗻⱘ䆒㕂Ǆ ೼⌣㾜ĀФቅᮙ␌ഄ೒ā义䴶ᯊˈᔧ哴ᷛᣛ৥Āኼⳝā⛁⚍ᯊˈߎ⦄བ೒ 3-68 ᠔⼎ⱘᦤ⼎ֵᙃǄ ೒ 3-67 Ā⛁⚍āሲᗻ䴶ᵓ ೒ 3-68 ೒ڣ⛁ऎᦤ⼎ֵᙃᬜᵰ೒ 㽕ᅲ⦄ℸᬜᵰˈ䳔㽕೼Āҷⷕā㾚೒Ёᇍℸ⛁⚍⏏ࡴ title ሲᗻˈҷⷕབϟ˖ <img src="../images/map.jpg" width="674" height="618" border="0" usemap="#Map" /> <map name="Map" id="Map">

䞡໡ҹϞℹ偸ˈৃҹ೼Фቅഄ೒Ϟᓎゟ݊Ҫ⛁⚍ऎඳǄ 3.2.3 ѹथܱᦊᡔᩗଌ

໪䚼䫒᥹ᰃᣛᇍ㔥キҹ໪ⱘⳂᷛ᭛ӊⱘ䫒᥹Ǆ݊ḐᓣབϟǄ <a href="㔥キ URL ഄഔ">䫒᥹䕑ԧ</a>

ĀФቅФ∈ā㔥キ佪义ⱘĀটᚙ䫒᥹ā⠜ഫህᰃ㽕ᅲ⦄໪䚼䍙䫒᥹Ǆབ䗝ᢽĀФቅᮙ␌

ᬓࡵ㔥ā᭛ᴀֵᙃˈ೼ሲᗻ䴶ᵓⱘĀ䫒᥹ā᭛ᴀḚݙ䕧ܹ URL ഄഔhttp://www.lssta.gov.cn/ˈĀⳂ

(21)

೒ 3-69 ໪䚼䫒᥹ሲᗻ䆒㕂䞡໡ҹϞℹ偸ˈᅲ⦄Āটᚙ䫒᥹ā᠔᳝᭛ᴀⱘ໪䚼䫒᥹Ǆ 3.2.4 ᩳགᡔᩗଌ ᔧ㔥义ݙᆍᕜ䭓ᯊˈЎњ⌣㾜᳈ᖿ᥋ˈৃҹՓ⫼䫮⚍䫒᥹ᴹᅲ⦄೼ৠϔ义ⱘᅮԡǄ᠔䇧䫮⚍䫒᥹ˈᰃᣛ೼᭛ḷЁ䆒㕂ԡ㕂ᷛ䆄ˈᑊ೼䆹ԡ㕂ᅮНϔϾৡ⿄ҹᮍ֓ᓩ⫼Ǆ䫮⚍䫒᥹ৃҹ 䫒᥹ࠄৠϔϾ义䴶Ёᣛᅮⱘϡৠԡ㕂ˈгৃҹ䫒᥹ࠄ݊Ҫ㔥义Ёᣛᅮⱘԡ㕂Ǆ 㽕೼义䴶ݙᅲ⦄䫮⚍䍙䫒᥹ˈ䳔㽕ᅮНϸϾᷛ䆄ˈϔϾᰃ䍙䫒᥹ᷛ䆄ˈ঺ϔϾᰃкㅒᷛ 䆄Ǆ䍙䫒᥹ᷛ䆄ḐᓣЎ˖

ᔧऩߏ䫒᥹䕑ԧৢˈᇚᅮԡࠄĀкㅒৡāⱘԡ㕂Ǆкㅒᷛ䆄ⱘḐᓣЎ˖ <a name="кㅒৡ">Ⳃᷛԡ㕂</a>

ĀⳂᷛԡ㕂āৃҹࣙ৿᭛ᴀǃ೒ڣㄝˈгৃҹϡࣙ৿ӏᛣݙᆍˈাᰃϔϾԡ㕂ⱘੑৡǄ ᴀ㡖ᇚҹĀФቅ㕢亳ā㔥义Ў՟Ў໻ᆊҟ㒡䫮⚍䍙䫒᥹ⱘᅲ⦄Ǆ 1ĕҗߙ੡੠ਏޚ ˄1˅೼Ā䆒䅵㾚೒āにষЁˈᇚᦦܹ⚍ᅮԡࠄ䳔㽕ੑৡ䫮䆄ⱘഄᮍǄབᡞᦦܹ⚍ᅮԡ೼ Ā䏋㛮⠯㙝ā᠔೼ⱘԡ㕂ˈབ೒ 3-70 ᠔⼎Ǆ ೒ 3-70 ܝᷛᦦܹ೒⼎ ˄2˅ᠻ㸠བϟ᪡԰Ǆ 䗝ᢽĀᦦܹāėĀᐌ⫼āėĀੑৡ䫮䆄āੑҸǄ 䗝ᢽ㦰ऩĀᦦܹāėĀੑৡ䫮䆄āੑҸǄ ᣝ Ctrl+Alt+A 㒘ড়䬂Ǆ ˄3˅೼Āੑৡ䫮䆄āᇍ䆱ḚЁ䕧ܹ䫮䆄ⱘৡ⿄ˈ㽕∖ৡ⿄㽕᠔㾕े᠔ⶹˈ᳔དᰃ㣅᭛៪ ᣐ䷇㓽ݭǄ՟བˈ䕧ܹĀqjnrā˄䏋㛮⠯㙝ᣐ䷇㓽ݭ˅ˈབ೒ 3-71 ᠔⼎ǄऩߏĀ⹂ᅮāᣝ䪂ৢˈ 䫮䆄೼ᦦܹ⚍Ёߎ⦄ˈབ೒ 3-72 ᠔⼎Ǆ ೒ 3-71 Āੑৡ䫮䆄āᇍ䆱Ḛ ೒ 3-72 䫮䆄ᬜᵰ

(22)

2ĕढ़ࠄ੡੠ਏޚ ˄1˅೼Ā䆒䅵㾚೒āにষЁ䗝ᢽ㽕߯ᓎ䫒᥹ⱘ᭛ᴀ៪೒⠛Ǆབ೒ 3-73 ᠔⼎ˈ䗝ЁĀ䏋㛮 ⠯㙝ā᭛ᄫǄ ೒ 3-73 䫒᥹䕑ԧ䗝ᢽ᪡԰ ˄2˅೼ᇍᑨⱘĀሲᗻā䴶ᵓЁ䆒㕂Ā䫒᥹ā᭛ᴀḚݙᆍˈ݊ḐᓣЎ#ো+ੑৡ䫮䆄Ǆབ೒ 3-74᠔⼎ˈ䕧ܹĀ#qjnrā˄䫮䆄ৡ⿄ऎߚ໻ᇣݭ˅Ǆ ೒ 3-74 䫒᥹ੑৡ䫮䆄೒⼎ ᗱ㗗˖ఢڴྑၽϢලฉྚᄍ޷ಬຣਏޚढ़ࠄē؞႘ਙЀᆴĦैఢēӦݬ೎ྚ౨ԅqडౖ ਥಪr༪ົēߜᅹ௲ՇสӾ food.html ྚੋᄯԅອڑสᄢd 3.2.5 Х̵ዝیᡔᩗଌ 1ĕԨᆐဏߑбढ़ࠄ ⬉ᄤ䚂ӊ䫒᥹ᣛ৥ϔϾ⬉ᄤ䚂ӊ˄E-mail˅䚂ㆅˈᔧऩߏ䚂ӊ䫒᥹ᯊˈӮᠧᓔ䅵ㅫᴎϞϢ ⌣㾜఼Ⳍ݇ⱘ䚂ӊ䕃ӊˈ㒭䫒᥹Ⳃᷛথ䗕䚂ӊǄ݊ḐᓣЎ˖

ᓎゟ⬉ᄤ䚂ӊ䫒᥹ⱘᮍᓣЎ˖䗝Ё䳔㽕ᓎゟ䫒᥹ⱘ᭛ᴀ៪೒⠛ˈऩߏĀᦦܹā䴶ᵓĀᐌ ⫼āऎඳЁⱘĀ⬉ᄤ䚂ӊ䫒᥹āᣝ䪂 ˈᔍߎĀ⬉ᄤ䚂ӊ䫒᥹āᇍ䆱Ḛˈ೼ᇍ䆱Ḛⱘ᭛ᴀḚ Ё䕧ܹ㽕䫒᥹ⱘ᭛ᴀˈབᵰᰃ乘ܜ䗝ᅮњ᭛ᴀˈ߭᭛ᴀḚЁ㞾ࡼߎ⦄䗝ᅮ᭛ᴀˈ✊ৢ೼ E-mail ᭛ᴀḚݙ䕧ܹ䚂ㆅഄഔǄ ೼佪义ⱘ义㛮䚼ߚˈᇚĀФቅФ∈㔥キā᭛ᴀ԰Ў⬉ᄤ䚂ӊ䫒᥹䕑ԧˈ೼ᔍߎⱘᇍ䆱Ḛ Ё㞾ࡼߎ⦄њ䗝ᅮⱘĀ᭛ᴀāݙᆍˈ฿ݭདĀ⬉ᄤ䚂ӊāৢˈᬜᵰབ೒ 3-75 ᠔⼎Ǆ ೒ 3-75 Ā⬉ᄤ䚂ӊ䫒᥹āᇍ䆱Ḛ བᵰ㽕ᖿ䗳߯ᓎ⬉ᄤ䚂ӊ䫒᥹៪㗙ׂᬍᏆ㒣䆒ᅮདⱘ⬉ᄤ䚂ӊ䫒᥹ˈৃҹ೼䗝ᢽ䫒᥹ᇍ 䈵ৢˈĀሲᗻā䴶ᵓЁⱘĀ䫒᥹ā㒘ড়ḚЁ䕧ܹ⬉ᄤ䚂ӊഄഔǄབᵰᰃᮄ䕧ܹⱘ䚂ӊഄഔˈ೼ 䕧ܹࠡ䳔㽕ࡴϞࠡ㓔Āmailto:āˈབ೒ 3-76 ᠔⼎Ǆ

(23)

೒ 3-76 Ā⬉ᄤ䚂ӊ䫒᥹ā䆒㕂

2ĕຏၻढ़ࠄ

བᵰ䫒᥹ⱘⳂᷛ᭛ӊϡᰃ HTML 㔥义ˈ䆹᭛ӊৃҹ԰Ўϟ䕑᭛ӊˈ݊Ḑᓣབϟ˖ <a href="ϟ䕑᭛ӊৡ䏃ᕘ">䫒᥹䕑ԧ</a>

гৃҹՓ⫼Āሲᗻā䴶ᵓЁⱘĀ䫒᥹ā᭛ᴀḚ߯ᓎϟ䕑䫒᥹Ǆ݊ᮍ⊩བϟ˖ ˄1˅೼Ā䆒䅵㾚೒āにষЁ䗝Ё㽕߯ᓎ䫒᥹ⱘ᭛ᄫ៪೒ڣǄ ˄2˅೼ᇍᑨⱘĀሲᗻā䴶ᵓĀ䫒᥹ā᭛ᴀḚЁ䕧ܹϟ䕑᭛ӊⱘৡ⿄ˈгৃҹ䗮䖛Āᣛ৥ ᭛ӊā៪Ā⌣㾜ā೒ᷛᅲ⦄Ǆ 3.2.6 ᡔᩗଌᄊ CSS ᝺Ꮆ 䍙䫒᥹᭛ᴀⱘ咬䅸亢Ḑᰃᄫԧ买㡆Ў㪱㡆ˈϨᏺ᳝ϟߦ㒓Ǆᔧ䍙䫒᥹᭛ᴀ㹿䆓䯂ৢˈ买㡆বЎ㋿㡆Ǆབᵰᰃ䍙䫒᥹೒ڣˈህӮ咬䅸ᏺ㪱㡆䖍ḚǄབ೒ 3-77 ᠔⼎ˈ佪义Ёⱘϔѯ᭛ᴀ ੠೒ڣ䆒㕂њ䍙䫒᥹ৢˈ义䴶ᭈԧᬜᵰӮবᕫϡ໾টདˈ䳔㽕ᇍ䍙䫒᥹䖯㸠亢Ḑ໘⧚Ǆ ೒ 3-77 䆒㕂䍙䫒᥹ৢⱘ义䴶ᬜᵰ ᇍ䍙䫒᥹䖯㸠亢Ḑ䆒㕂䳔㽕⫼ࠄϟ߫ϸ⾡䗝ᢽ఼Ǆ 1ĕγஆ༪႔୶ Փ⫼䍙䫒᥹ᷛㅒ A ԰Ў䗝ᢽ఼ˈৃҹᇍ᭛ᴀ䍙䫒᥹䖯㸠亢Ḑ᥻ࠊˈ೼Āa ⱘ CSS 㾘߭ᅮ Нāᇍ䆱ḚⱘĀ㉏ൟāऎඳЁˈ䆒㕂ĀText-decorationāؐЎĀnoneāˈे㸼⼎≵᳝ϟߦ㒓ˈĀColorā ؐ䆒ЎĀ#000ā咥㡆Ǆᑨ⫼ৢˈ䍙䫒᥹᭛ᴀ໪㾖Ϣ᱂䗮᭛ᴀᬜᵰϔ㟈Ǆ

(24)

Փ⫼ img ᷛㅒ䗝ᢽ఼ˈ䆒㕂䖍ḚሲᗻĀBorder-styleāЎĀnoneāǄ 2ĕภफ༪႔୶ 䍙䫒᥹᳝ಯϾӾ㉏ˈߚ߿ҷ㸼݊ಯ⾡ϡৠⱘ⢊ᗕˈП᠔ҹ⿄ЎӾ㉏ˈᰃ಴ЎᅗӀϡᰃⳳ ℷⱘ㉏ˈⳳℷⱘ㉏ᰃҹĀ.āᓔ༈ˈ㗠Ӿ㉏ᰃҹ a ᓔ༈ˈৢ䖍䎳Ͼݦোˈݡ䎳⢊ᗕ䰤ᅮᄫヺǄ a:link㸼⼎᳾䆓䯂ⱘ䫒᥹Ǆ a:hover㸼⼎哴ᷛ⿏ࡼࠄ䫒᥹ϞǄ a:active㸼⼎哴ᷛ▔⌏䫒᥹ˈेऩߏ䍙䫒᥹Ǆ a:vivisted㸼⼎Ꮖ䆓䯂ⱘ䫒᥹Ǆ Փ⫼Ӿ㉏䗝ᢽ఼䆒㕂亢Ḑ㛑๲ᔎ⫼᠋᪡԰㔥义ⱘԧ偠ˈᛳফ䍙䫒᥹೼ϡৠ⢊ᗕϟⱘ亢Ḑ ব࣪Ǆ݊᪡԰ᮍ⊩བϟǄ ˄1˅೼Āᮄᓎ CSS 㾘߭āᇍ䆱ḚЁ䗝ᢽ㉏ൟЎĀ໡ড়ݙᆍ˄෎Ѣ䗝ᢽⱘݙᆍ˅āˈ೼Ā䗝 ᢽ఼ৡ⿄āϟᢝ߫㸼Ḛ䗝ᢽĀӾ㉏ā䗝乍ˈབ೒ 3-78 ᠔⼎Ǆ ˄2˅⹂ᅮ䗝ᢽĀӾ㉏āৢˈ೼ĀCSS 㾘߭ᅮНāᇍ䆱ḚЁ䖯㸠亢Ḑ䆒㕂Ǆབ䗝ᢽĀa:hoverā Ӿ㉏䗝ᢽ఼ˈ䆒㕂ሲᗻĀColorāЎĀ#F90āǄ⌣㾜㔥义ᯊˈᔧ哴ᷛᣛ৥䍙䫒᥹᭛ᴀᯊˈᕫࠄ೒ 3-79᠔⼎ⱘᬜᵰǄ ೒ 3-78 ĀӾ㉏䗝ᢽ఼ā䆒㕂䴶ᵓ ೒ 3-79 哴ᷛᣛ৥䍙䫒᥹ᬜᵰ ᗱ㗗˖ఢڴྑճྚਡӽ۔ඨ౨ԅбढ़ࠄำ·ᆳࠩྡྷϤಁᄢēӲ೪γׂၽ౨ੋನē҂ॴཞ ౄ؟έēܮပަҹ໒ڴēҮನ؞ఢۥЀᆴĦ

3.3 ѹथࣳΎၹܱᦊ CSS ನर

㔥キ䳔㽕᳝㒳ϔ亢Ḑ䆒㕂ˈ↨བ᠔᳝㔥义ⱘ᭛ᄫᄫԧ໻ᇣ䛑䆒Ў 12 ڣ㋴ˈᄫԧ㉏ൟЎĀᅟ ԧāˈ䍙䫒᥹᭛ᄫϡᏺϟߦ㒓ㄝǄࠡ䴶៥Ӏ䗮䖛ݙጠ CSS ḋᓣᅲ⦄њ㔥义ⱘ亢Ḑ䆒㕂ˈԚᇍϡ ৠ㔥义ⱘ㒳ϔ亢Ḑⱘ䆒㕂䗴៤њҷⷕⱘݫԭˈՓ䆒䅵㗙ϡᕫϡخ䞡໡ⱘᎹ԰Ǆ䗮䖛Փ⫼໪䚼 CSSḋᓣৃҹ㾷އ䖭ϔ䯂乬Ǆ ໪䚼 CSS ḋᓣᰃᡞ㔥义ЁՓ⫼ⱘḋᓣᅮН೼ϔϾ⣀ゟⱘ CSS ᭛ӊЁ˄ᠽሩৡЎ.css˅ˈϔ Ͼ໪䚼ḋᓣৃҹᑨ⫼Ѣ໮Ͼ㔥义Ǆᔧᬍব䖭Ͼḋᓣ㸼᭛ӊᯊˈ᠔᳝㹿᥻ࠊⱘ义䴶ⱘḋᓣӮ䱣П ᬍবǄ೼ࠊ԰໻䞣Ⳍৠḋᓣ㔥义ⱘ㔥キᯊ䴲ᐌ᳝⫼ˈϡҙޣᇥњ䞡໡ⱘᎹ԰䞣ˈ㗠Ϩ᳝߽Ѣҹ ৢⱘ㓪䕥ˈ⫼᠋೼⌣㾜ᯊгϡᖙ䞡໡ϟ䕑ҷⷕˈࡴᖿњ㔥义ᰒ⼎䗳ᑺǄ

(25)

3.3.1 ѹथܱᦊ CSS ஡͈ ߯ᓎ໪䚼 CSS ᭛ӊⱘᮍ⊩བϟǄ 1ˊ䗮䖛 CSS ḋᓣ䴶ᵓ߯ᓎǄ ˄1˅䗝ᢽĀCSS ᭛ӊā䴶ᵓˈᠧᓔĀᮄᓎ CSS 㾘߭āᇍ䆱ḚǄ ˄2˅೼Āᮄᓎ CSS 㾘߭āᇍ䆱ḚЁˈ䗝ᢽᅮН㾘߭ⱘԡ㕂ЎĀᮄᓎḋᓣ㸼᭛ӊāˈ⹂ᅮ 㽕߯ᓎⱘ CSS 䗝ᢽ఼ঞৡ⿄ˈབ೒ 3-80 ᠔⼎Ǆ ೒ 3-80 ᮄᓎ໪䚼ḋᓣ㸼᭛ӊ ˄3˅ऩߏĀ⹂ᅮāᣝ䪂ৢˈᔍߎĀᇚḋᓣ㸼᭛ӊ঺ᄬЎāᇍ䆱Ḛˈ䕧ܹḋᓣ㸼ৡ⿄Ǆ᱂ 䗮ᚙމϟˈϔϾ㔥キҙ䳔ϔᓴ໪䚼 CSS ḋᓣ᭛ӊˈੑৡЎĀstyleāǄ 2ĕඹڶqำߑr੡গົҗߙd ˄1˅䗝ᢽĀ᭛ӊāėĀᮄᓎāੑҸˈ೼ᔍߎⱘĀᮄᓎ᭛ḷāᇍ䆱ḚЁ䗝ᢽĀCSSā义䴶㉏ൟǄ ˄2˅ऩߏĀ߯ᓎāᣝ䪂ৢˈDreamweaver Ӯ߯ᓎ CSS ᭛ḷにষˈ䗝ᢽĀ᭛ӊāėĀֱᄬā ੑҸǄ 3.3.2 ᩗଌܱᦊ CSS ஡͈ 1ĕӝ৲ֺ಴ढ़ࠄ Փ⫼<link>ᷛ䆄䫒᥹໪䚼 CSS ḋᓣ㸼ˈ݊ḐᓣЎ˖ <head> …

(26)

ᓣ㸼᭛ӊāᇍ䆱Ḛ䗝ᢽ䳔㽕䫒᥹ⱘḋᓣ㸼᭛ӊˈབ೒ 3-82 ᠔⼎Ǆ ೒ 3-81 Ā䫒᥹໪䚼ḋᓣ㸼āᇍ䆱Ḛ ೒ 3-82 䗝ᢽḋᓣ㸼᭛ӊ ˄3˅ऩߏĀ⹂ᅮāᣝ䪂ৢˈ䖨ಲࠄĀ䫒᥹໪䚼ḋᓣ㸼āᇍ䆱Ḛˈ䗝ᢽ Ā䫒᥹āऩ䗝乍Ǆ ऩߏĀ⹂ᅮāᣝ䪂ৢˈ໪䚼ḋᓣ᭛ӊ䫒᥹ᅠ↩Ǆ 3.3.3 ܱᦊ CSS ನरࠄΓ ˄1˅ᮄᓎϔϾৡЎ style.css ⱘ᭛ӊˈֱᄬѢキ⚍ḍⳂᔩϟǄ ˄2˅೼ style.css ᭛ӊЁ䆒㕂㔥キ㒳ϔ亢ḐǄҷⷕབ೒ 3-83 ᠔⼎Ǆ 1˅ᷛㅒ䗝ᢽ఼ bodyˈ䆒㕂义䴶ݙᆍ䎱Ϟ䖍䎱Ў 0 ڣ㋴ˈ᭛ᄫ໻ᇣЎ 12 ڣ㋴ˈ᭛ᄫᄫԧ ЎĀᅟԧāǄ 2˅ᷛㅒ䗝ᢽ఼ h1ˈ䆒㕂᭛ᄫᄫԧЎĀ咥ԧāˈ᭛ᄫ买㡆ЎĀ#060āˈ᭛ᴀᥦ߫ᮍᓣЎĀሙЁāǄ 3˅ᷛㅒ䗝ᢽ఼ hrˈ䆒㕂䖍Ḛ亢ḐЎĀdottedāˈ䖍Ḛ买㡆ЎĀ#060āǄ 4˅ᷛㅒ䗝ᢽ఼ pˈ䆒㕂㸠催Ў 30 ڣ㋴ˈ佪㸠㓽䖯ؐЎ 30 ڣ㋴Ǆ 5˅ᷛㅒ䗝ᢽ఼ aˈ䆒㕂ĀdecorationāؐЎĀnoneāˈ᭛ᄫ买㡆Ў咥㡆Ǆ 6˅ID 䗝ᢽ఼#footerˈ䆒㕂ᥦ߫ᮍᓣЎሙЁˈ㸠催Ў 30 ڣ㋴Ǆ ˄3˅ᇚにষߛᤶࠄ䳔㽕ᑨ⫼亢Ḑⱘ᭛ḷにষˈབĀФቅὖމā义䴶ǄऩߏĀ䰘ࡴḋᓣ㸼ā ᣝ䪂ˈ䫒᥹ style.css ᭛ӊǄ೼ĀCSS ḋᓣā䴶ᵓЁৃҹᶹⳟ义䴶ݙጠ੠໪䚼亢Ḑ䆺㒚ᚙމˈབ ೒ 3-84 ᠔⼎Ǆ ೒ 3-83 style.css ҷⷕ ೒ 3-84 ĀCSS ḋᓣā䴶ᵓ

(27)

䆒䅵㗙೼㔥义䆒䅵䖛⿟Ёˈৃҹ೼ĀCSS 亢Ḑā䴶ᵓЁ䗝ᢽᓎゟݙጠ៪໪䚼 CSS 亢ḐǄ

3.4 ಴౶

Ḛᶊᰃ㔥义䆒䅵ЁՓ⫼ⱘᏗሔᎹ݋ˈḚᶊⱘ԰⫼ህᰃᡞৠϔϾ⌣㾜఼にষߦߚ៤޴ϾⳌ Ѧ䱨⾏ⱘऎඳˈ↣Ͼऎඳࡴ䕑ϔϾ㔥义᭛ӊ˄гৃҹᰃ݊ҪḐᓣ᭛ӊ˅ˈ߽⫼Ḛᶊ㒧ᵘᅲ⦄೼ ৠϔϾ⌣㾜఼にষЁᰒ⼎໮Ͼ HTML 义䴶Ǆ Ḛᶊ㒧ᵘ䗖⫼ѢⳂᔩ˄㋶ᓩ˅ֵᙃ䕗໮ⱘ义䴶ˈᔧऩߏᶤϾऎඳⱘ䍙䫒᥹ᯊˈⳌ݇㔥义 ৃᰒ⼎೼঺ϔϾऎඳˈՓᕫ⫼᠋ϡҙ㛑ᮍ֓ഄ䖯㸠ֵᙃ⌣㾜ˈ䖬ᇍ㔥キⱘ㒧ᵘ᳝⏙᱄ⱘ䅸䆚Ǆ ᴀ㡖ᇚҟ㒡Ḛᶊ෎⸔ǃḚᶊⱘ߯ᓎ੠ᑨ⫼ˈᑊ߽⫼Ḛᶊᅠ៤ Ā᱃⚍ҟ㒡ā义䴶ࠊ԰Ǆ 3.4.1 ಴౶۳ᆩ 1ĕࣟޯՇ࿌ Ḛᶊ⬅Ḛᶊ䲚˄Frameset˅੠ऩϾḚᶊ˄Frame˅㒘៤Ǆ Ḛᶊ䲚˄Frameset˅гᰃϔϾ㔥义᭛ӊˈ⬅㢹ᑆϾḚᶊ㒘៤ˈᅗᇚϔϾにষ䗮䖛㸠੠߫ⱘ ᮍᓣߚࡆ៤໮ϾḚᶊˈḚᶊⱘ໮ᇥḍ᥂݋ԧ᳝໮ᇥ㔥义ᴹއᅮˈ↣ϾḚᶊЁ㽕ᰒ⼎ⱘህᰃϡৠ ⱘ㔥义᭛ӊǄ䗮䖛ᇍḚᶊⱘᏗሔ੠ሲᗻ˄ࣙᣀḚᶊⱘ᭄ⳂǃḚᶊⱘ໻ᇣ੠ԡ㕂ˈҹঞ೼↣ϾḚ ᶊЁ߱ྟᰒ⼎ⱘ义䴶ⱘ᭛ḷ䏃ᕘ˅ⱘ䆒㕂ˈৃҹ䅽Ḛᶊ೼໪㾖Ϟᔶ៤ϔϾᭈԧⱘ义䴶Ǆ Ḛᶊ䲚᭛ӊᴀ䑿ϡࣙ৿೼⌣㾜఼Ёᰒ⼎ⱘ㔥义ݙᆍˈাᰃ৥⌣㾜఼ᦤկབԩᰒ⼎ϔ㒘Ḛ ᶊҹঞ೼䖭ϾḚᶊЁᑨᰒ⼎ાѯ᭛ḷⱘⳌֵ݇ᙃǄᐌ㾕ⱘᰃ೼ϔ㒘ḚᶊЁࣙ৿ϔϾ৿᳝ᇐ㟾ᴵ ⱘḚᶊ੠ϔϾ⫼Ѣᰒ⼎Џ㽕ݙᆍⱘḚᶊǄ Փ⫼ḚᶊᡔᴃϡҙৃҹᏗሔ⠜䴶ˈ᳈໮ⱘᰃ⫼Ѣ䳔㽕䗮䖛Ⳃᔩǃ㋶ᓩᴹ䯙䇏ݙᆍⱘᇐ㟾ˈ г⫼Ѣ㔥义ⱘᇐ㟾ᴵǄՓ⫼Ḛᶊৃҹ䅽㔥义ⱘ亢Ḑ㒳ϔˈ᳈㛑ࡴᖿ⌣㾜䗳ᑺˈ೼⌣㾜义䴶ᯊˈ ϡ䳔㽕ᇚ义䴶Ё᳝Ḛᶊⱘにষ䛑䞡ᮄࡴ䕑ˈᇍѢᇐ㟾៪㗙ϡᬍবݙᆍⱘにষˈ೼⌣㾜㔥キᯊা 䳔㽕ࡴ䕑ϔ⃵ˈ䖭ḋህৃҹ໻໻ࡴᖿ⌣㾜ⱘ䗳ᑺǄ 2ĕࣟޯγޚރӝ৲ࠒٲ Ḛᶊ㒧ᵘᰃ⬅<frameset>੠<frame>ᷛ䆄ᵘ៤ˈ᠔᳝Ḛᶊᷛ䆄䳔㽕ᬒ೼ϔϾ HTML ᭛ӊЁˈ ⫼ѢにষⱘߦߚˈϡӮᰒ⼎݋ԧݙᆍˈϨϡ㛑ጠ༫೼<body>ᷛ䆄Ёˈ㗠ᰃҷ᳓<body>ᷛ䆄Ǆ <frameset>⫼Ѣߦߚにষˈ<frame>⫼ѢᅮН↣ϔϾにষˈ᳝໮ᇥϾにষˈህ᳝໮ᇥϾ<frame> ᷛ䆄Ǆ݊෎ᴀ㒧ᵘབϟ˖ <html> <head>ĂĂ</head> <frameset> <frame /> <frame /> </frameset> </html> ˄1˅<frameset>ᷛ䆄ঞሲᗻǄ <frameset>ᷛ䆄ᅮНњϔϾḚᶊ䲚ⱘሲᗻˈ݊ḐᓣЎ˖

(28)

ሲᗻ৿Н㾕㸼 3-1Ǆ 㸼 3-1 <frameset>ᷛ䆄৘ሲᗻⱘ৿Н ሲᗻ ৿Н Rows 䆒㕂῾৥ߚࡆⱘḚᶊ᭄ˈৃҹҹڣ㋴៪ⱒߚ↨Ўऩԡ Cols 䆒㕂㒉৥ߚࡆⱘḚᶊ᭄ˈৃҹҹڣ㋴៪ⱒߚ↨Ўऩԡ Border 䆒ᅮ䖍Ḛⱘᆑᑺ˄䗮ᐌҹڣ㋴Ўऩԡ˅ bordercolor བᵰ᳝䖍Ḛˈৃҹ䆒㕂䖍Ḛⱘ买㡆 frameborder 䆒㕂᳝᮴䖍Ḛ framespacing 䆒㕂৘にষ䯈ⱘぎⱑ

rows੠ cols ሲᗻ䴲ᐌ䞡㽕ˈ೼Ḛᶊ䆒㕂ᯊˈ<frameset>ᷛ䆄Փ⫼ᅗӀᴹ䆒㕂῾৥੠㒉৥ߚ

ࡆⱘḚᶊ᭄ˈৠᯊ䆒㕂↣Ͼにষⱘ໻ᇣǄ՟བˈᓎゟϞЁϟൟⱘḚᶊˈབ೒ 3-85 ᠔⼎Ǆ

೒ 3-85 Ϟϟ㒧ᵘḚᶊ ݊Ḑᓣབϟ˖

<frameset rows="催ᑺ 1,催ᑺ 2,*" ></frameset> 䇈ᯢ˖ rowsሲᗻⱘؐҷ㸼৘ᄤにষⱘ催ᑺˈ㄀ϔϾにষ催Ў催ᑺ 1ˈ㄀ѠϾにষ催Ў催ᑺ 2ˈ㄀ ϝϾにষЎ*ˈᛣᗱᰃ㞾ࡼߚ䜡ˈेᕙ݊Ҫにষ催ᑺߚ䜡ৢ࠽ԭⱘ催ᑺǄ䆒㕂催ᑺ᭄ؐⱘᮍᓣ ᳝ҹϟϸ⾡˖ ҹڣ㋴Ўऩԡˈ䆒㕂ᭈ᭄ؐˈབ<frameset rows="300,500,*" >Ǆ ҹⱒߚ↨Ўऩԡˈབ rows=Ā20%,30%,*āˈ20%㸼⼎Ḛᶊⱘ໻ᇣЎ⌣㾜఼ᔧࠡにষⱘ 20%Ǆ ˄2˅<frame>ᷛ䆄ঞሲᗻǄ <frame>ᷛ䆄ҷ㸼ᣛᅮⱘ৘ϾḚᶊˈࣙᣀࡴ䕑义䴶੠Ḛᶊ݊Ҫሲᗻㄝˈ݊ḐᓣЎ˖

<frame src="⑤᭛ӊ" name="Ḛᶊৡ" scrolling="yes|no|auto" noresize="noresize" id="Ḛᶊ ID ؐ" border="ڣ㋴ؐ" bordercolor="买㡆ؐ" frameborder="yes|no" marginwidth="ڣ㋴ؐ" marginheight= " ڣ㋴ؐ" /> ሲᗻ৿Н㾕㸼 3-2Ǆ 㸼 3-2 <frame>ᷛ䆄৘ሲᗻⱘ৿Н ሲᗻ ৿Н src ᣛᅮ䆹Ḛᶊࡴ䕑ⱘ⑤᭛ӊ䏃ᕘ name ᣛᅮḚᶊৡ⿄ˈ⬅ᄫ↡ᓔ༈ scrolling 䆒㕂᳝᮴⒮ࡼᴵˈᰃ˄yes˅ǃ৺˄no˅៪㞾ࡼ˄auto˅

(29)

㓁㸼 ሲᗻ ৿Н noresize ϡܕ䆌⌣㾜㗙䇗ᭈにষⱘ໻ᇣˈ咬䅸ؐЎܕ䆌䇗ᭈ໻ᇣ id ᣛᅮḚᶊⱘ ID ؐ border 䆒㕂䖍Ḛⱘᆑᑺ bordercolor 䆒㕂䖍Ḛⱘ买㡆 frameborder 䆒㕂᳝᮴䖍Ḛˈ᳝˄yes˅៪᮴˄no˅ marginwidth 䆒㕂Ḛᶊࡴ䕑ݙᆍϢᎺে䖍Ḛⱘぎⱑ marginheight 䆒㕂Ḛᶊࡴ䕑ݙᆍϢϞϟ䖍Ḛⱘぎⱑ ೒ 3-86 ϞЁϟൟḚᶊ㒧ᵘ䆺㾷೒ ೒ 3-86 ᠔⼎Ḛᶊᅠᭈҷⷕབϟ˖

<frame src="" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="bottomFrame" /> </frameset> 䇈ᯢ˖ ㄀ 1 Ͼ<frame>ҷ㸼᳔Ϟ䴶ⱘḚᶊˈ݊催ᑺЎ 80 ڣ㋴Ǆ ㄀ 2 Ͼ<frame>ҷ㸼Ё䯈ⱘḚᶊˈ݊催ᑺЎ㞾ࡼ䇗ᭈǄ ㄀ 3 Ͼ<frame>ҷ㸼᳔ϟ䴶ⱘḚᶊˈ݊催ᑺЎ 80 ڣ㋴Ǆ ˄3˅T ൟḚᶊҷⷕǄT ൟ㒧ᵘᰃᑨ⫼᳔ᑓⱘḚᶊ㒧ᵘˈ⦄೼៥Ӏҹҷⷕⱘᔶᓣᅠ៤བ೒ 3-87᠔⼎ⱘ T ൟ㒧ᵘǄ ೒ 3-87 T ൟḚᶊ㒧ᵘ ҷⷕབϟ˖

<frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" topFrame mainFrame bottomFrame 㸠催Ў 80 ڣ㋴㞾ࡼߚ䜡㸠催㸠催Ў 80 ڣ㋴

(30)

title="topFrame" />

<frame src="main.html" name="mainFrame" id="mainFrame" title="mainFrame" /> </frameset> </frameset> 䇈ᯢ˖ 佪ܜ䳔㽕ߚᵤℸ㒧ᵘˈḚᶊܜߚЎϞϟൟˈϟ䴶ⱘḚᶊজ䖯ϔℹߚЎᎺেൟǄ䗮䖛ࠡ 䴶ⱘ䆆䗄ˈ㽕ߦߚḚᶊˈᖙ乏Փ⫼<frameset>ᷛ䆄ˈ಴ℸ೼䖭↉ҷⷕЁߎ⦄њϸᇍ <frameset>䖯㸠ḚᶊߦߚǄ ᳔໪ሖⱘ<frameset>ᰃᅲ⦄ϞϟൟḚᶊⱘߦߚˈ㄀ϔϾ<frame>ᷛ䆄ҷ㸼᳔Ϟ䴶ⱘḚ ᶊˈ催ᑺЎ 90 ڣ㋴Ǆ ϟ䴶ⱘḚᶊ䖯ϔℹߚࡆ៤Ꮊেൟˈ಴ℸ⬅঺ϔᇍ<frameset>䖯㸠ḚᶊߦߚǄᎺ䖍Ḛᶊ ᆑᑺЎ 270 ڣ㋴ˈে䖍ḚᶊЎ㞾ࡼ䇗ᭈǄ㄀ѠϾ<frame>ᷛ䆄ҷ㸼Ꮊ䖍Ḛᶊˈ㄀ϝϾ <frame>ᷛ䆄ҷ㸼ে䖍ḚᶊǄ 3.4.2 ѹथ಴౶ DreamweaverЁ㞾ᏺⱘḚᶊᏗሔৃҹ߯ᓎ໮⾡Ḛᶊˈ೼߯ᓎḚᶊ䲚៪Փ⫼Ḛᶊࠡˈ䗮䖛䗝 ᢽĀᶹⳟāėĀৃ㾚࣪ࡽ⧚āėĀḚᶊ䖍ḚāੑҸˈՓḚᶊ䖍Ḛ೼᭛ḷにষⱘ䆒䅵㾚೒Ёৃ㾕Ǆ 1ĕ໭ߙࣟޯނำߑ ˄1˅䗝ᢽĀ᭛ӊāėĀᮄᓎāੑҸˈ೼ᔍߎⱘĀᮄᓎ᭛ḷāᇍ䆱ḚЁ䗝ᢽĀ⼎՟Ёⱘ义ā 䗝乍ЁⱘĀḚᶊ义ā䗝乍ˈ೼ে䖍にḐЁᇚߎ⦄ Dreamweaver ᦤկⱘ৘㉏⼎՟义˄ेḚᶊ㒧 ᵘ˅ˈབ೒ 3-88 ᠔⼎Ǆ ˄2˅೼Ā⼎՟义āऎඳЁ䗝ᢽĀϞᮍ೎ᅮˈᎺջጠ༫ā䗝乍ˈऩߏĀ߯ᓎāᣝ䪂ᇚӮᔍ ߎĀḚᶊᷛㅒ䕙ࡽࡳ㛑ሲᗻāᇍ䆱Ḛˈབ೒ 3-89 ᠔⼎Ǆ ೒ 3-88 Āᮄᓎ᭛ḷāᇍ䆱Ḛ ೒ 3-89 ĀḚᶊᷛㅒ䕙ࡽࡳ㛑ሲᗻāᇍ䆱Ḛ ೼ℸᇍ䆱ḚЁˈৃҹ㒭↣ϔϾḚᶊ䆒ᅮϔϾḚᶊৡ⿄ˈ៪㗙⫼咬䅸ⱘḚᶊৡ⿄Ǆ೼߯ᓎ དḚᶊৢˈৃҹ೼ሲᗻ䴶ᵓЁׂᬍৡ⿄Ǆ೼ℸ䞛⫼㋏㒳咬䅸ⱘḚᶊৡ⿄ topFrame˄Ϟᮍ˅ǃ leftFrame˄Ꮊջ˅ǃmainFrame˄েջ˅Ǆ ˄3˅ׂᬍདৢऩߏĀ⹂ᅮāᣝ䪂ेৃ߯ᓎϔϾᏺḚᶊⱘ㔥义᭛ḷˈབ೒ 3-90 ᠔⼎Ǆ

(31)

೒ 3-90 Ḛᶊ㔥义 2ĕͬӉࣟޯำӶ ೼ֱᄬḚᶊ㔥义ᯊˈϡ㛑াऩ⣀ഄֱᄬϔϾ᭛ӊˈ㗠ᰃ㽕ᇚ᠔᳝ⱘḚᶊ㔥义᭛ḷ䛑ֱᄬ ϟᴹǄֱᄬᯊৃҹߚ߿ֱᄬḚᶊ䲚义䴶៪Ḛᶊ义䴶ˈгৃҹৠᯊֱᄬ᠔᳝ⱘḚᶊ᭛ӊ੠Ḛᶊ䲚 ᭛ӊǄ ˄1˅ֱᄬḚᶊ义Ǆ䗝ᢽĀ᭛ӊāėĀֱᄬḚᶊ义āੑҸˈ೼ᔍߎⱘĀ঺ᄬЎāᇍ䆱ḚЁ ᇚḚᶊ䲚ֱᄬЎ frameset.htmlǄ ˄2˅ֱᄬऩϾḚᶊ义Ǆ೼䳔㽕ֱᄬⱘḚᶊݙऩߏˈ䗝ᢽĀ᭛ӊāėĀֱᄬḚᶊāੑҸˈ 䗤ϾֱᄬḚᶊǄᇚϞ䴶ⱘḚᶊֱᄬЎ top.htmlˈᎺ䖍ⱘḚᶊֱᄬЎ left.htmlˈে䖍ⱘḚᶊֱᄬ Ў main.htmlǄ 3.4.3 ᝺Ꮆ಴౶ᬷˁ಴౶ ߯ᓎདḚᶊৢˈᖙ乏ᇍḚᶊ义Ё᠔ࣙ৿ⱘḚᶊ䲚੠Ḛᶊⱘሲᗻ䖯㸠䆒㕂Ǆ↨བḚᶊⱘ໻ ᇣǃ䖍Ḛᆑᑺǃᰃ৺᳝⒮ࡼᴵㄝǄ 㱑✊Ḛᶊᓣ㔥义ᡞሣᐩߚࡆ៤޴Ͼにষˈ↣ϾḚᶊ˄にষ˅Ёᬒ㕂ϔϾ᱂䗮ⱘ㔥义ˈԚ ᰃ㓪䕥Ḛᶊᓣ㔥义ᯊˈ㽕ᡞᭈϾ㓪䕥にষᔧ԰ϔϾ㔥义ᴹ㓪䕥ˈᦦܹⱘ㔥义ܗ㋴ԡѢાϾḚᶊˈ ህֱᄬ೼ાϾḚᶊⱘ㔥义ЁǄḚᶊⱘ໻ᇣৃҹ䱣ᛣׂᬍǄ 1ĕࣟޯԅݮ·Ѐᆴ ˄1˅䗝ᅮḚᶊǄ䆒㕂Ḛᶊሲᗻᯊˈᖙ乏ܜ䗝ЁḚᶊǄ 䗝ᢽḚᶊⱘᮍ⊩བϟ˖ 䗝ᢽĀにষāėĀḚᶊāੑҸˈ೼にষে䖍ⱘ䴶 ᵓ㒘ЁᇚӮߎ⦄ĀḚᶊā䴶ᵓˈऩߏᶤϾḚᶊे ৃ䗝Ё䆹Ḛᶊ˗ऩߏḚᶊ䲚ⱘ䖍Ḛৃҹ䗝ᢽ䆹Ḛ ᶊ䲚ˈབ೒ 3-91 ᠔⼎Ǆ ᣝԣ Alt 䬂ˈ೼᭛ḷにষЁⱘᶤϾḚᶊݙऩߏˈ ेৃ䗝ᢽ䆹ḚᶊǄ೼᭛ḷにষЁऩߏ㽕䗝ᢽḚᶊ 䲚ⱘ䖍Ḛेৃ䗝Ё䆹Ḛᶊ䲚Ǆ ˄2˅ᬍবḚᶊ໻ᇣǄ⫼哴ᷛᢪᣑḚᶊ䖍Ḛৃ䱣ᛣᬍবḚᶊ໻ᇣǄ ˄3˅ߴ䰸ḚᶊǄ⫼哴ᷛᡞḚᶊ䖍Ḛᢪᣑࠄ⠊Ḛᶊⱘ䖍ḚϞˈৃߴ䰸ḚᶊǄ 2ĕಁᄢࣟޯނ೫໿ ˄1˅䗝ᢽĀにষāėĀḚᶊāੑҸˈᠧᓔĀḚᶊā䴶ᵓˈ䗝ЁᭈϾḚᶊ䲚ˈ೼ሲᗻ䴶ᵓ ЁৃᇍϞϟൟ㒧ᵘ䖯㸠䆒㕂ˈࣙᣀ䖍Ḛǃ䖍Ḛ买㡆੠䖍Ḛᆑᑺˈᑊৃᇍ᳔Ϟ䴶ⱘḚᶊ䆒㕂㸠催ˈ ↨བؐЎ 80 ڣ㋴ˈབ೒ 3-92 ᠔⼎Ǆ ೒ 3-91 ೼Ḛᶊ䴶ᵓЁ䗝ᢽḚᶊ䲚

(32)

೒ 3-92 䆒㕂Ḛᶊ䲚ሲᗻ ˄2˅೼ĀḚᶊā䴶ᵓЁˈ䗝Ёጠ༫ⱘḚᶊ䲚Ǆ೼Āሲᗻā䴶ᵓЁৃᇍᎺেൟḚᶊ㒧ᵘ䖯㸠䆒㕂ˈ䆒㕂ᎺḚᶊⱘ߫ᆑЎ 140 ڣ㋴ˈ݊ԭሲᗻϡবˈབ೒ 3-93 ᠔⼎Ǆ ೒ 3-93 䆒㕂ݙጠḚᶊ䲚ሲᗻ 3ĕಁᄢࣟޯ೫໿ 䗝ЁḚᶊˈབऩߏĀḚᶊā䴶ᵓϞⱘৡЎĀtopFrameāⱘḚᶊˈ೼Āሲᗻā䴶ᵓϞৃҹ䆒㕂 ݊Ḛᶊሲᗻ˖Ḛᶊৡ⿄ǃ⑤᭛ӊǃぎⱑ䖍䎱ǃ⒮ࡼᴵǃ䞡㕂໻ᇣ੠䖍Ḛሲᗻㄝˈབ೒ 3-94 ᠔⼎Ǆ ೒ 3-94 ḚᶊĀሲᗻā䴶ᵓ Ḛᶊৡ⿄˖ᰃ⫼Ѣ䆒㕂䫒᥹ᣛ৥ⱘⳂᷛにষৡ⿄៪ᰃ㛮ᴀ೼ᓩ⫼䆹Ḛᶊᯊ᠔⫼ⱘৡ⿄Ǆ ⑤᭛ӊ˖ᣛᅮ೼ḚᶊЁᰒ⼎ⱘ㔥义᭛ḷǄ䗮䖛ऩߏĀ⌣㾜᭛ӊā೒ᷛ䗝ᢽ⑤᭛ӊǄ ⒮ࡼ˖ᣛᅮ೼ḚᶊЁᰃ৺ᰒ⼎⒮ࡼᴵǄབᇚℸ䗝乍䆒㕂ЎĀ咬䅸āˈ߭ϡ䆒㕂Ⳍᑨሲ ᗻⱘؐˈҢ㗠Փ৘Ͼ⌣㾜఼Փ⫼݊咬䅸ؐǄ໻໮᭄⌣㾜఼咬䅸ЎĀ㞾ࡼāˈ䖭ᛣੇⴔ া᳝೼⌣㾜఼にষЁ≵᳝䎇໳ぎ䯈ᴹᰒ⼎ᔧࠡḚᶊⱘᅠᭈݙᆍᯊˈᠡᰒ⼎⒮ࡼᴵǄ ϡ㛑䇗ᭈ໻ᇣ˖Ҹ䆓䯂㗙᮴⊩೼⌣㾜఼Ё䗮䖛ᢪࡼḚᶊ䖍Ḛ䇗ᭈḚᶊ໻ᇣǄ䆹䗝乍ҙ 䗖⫼Ѣ೼⌣㾜఼ЁᶹⳟḚᶊⱘ䆓䯂㗙ˈ೼ Dreamweaver Ёҡ✊ৃҹ䇗ᭈ䖍Ḛ໻ᇣǄ

(33)

䖍Ḛ˖೼⌣㾜఼ЁᶹⳟḚᶊᯊᰒ⼎៪䱤㮣ᔧࠡḚᶊⱘ䖍ḚǄĀ䖍Ḛā䗝乍ЎĀᰃā˄ᰒ ⼎䖍Ḛ˅ǃĀ৺ā˄䱤㮣䖍Ḛ˅੠Ā咬䅸ؐā˗໻໮᭄⌣㾜఼咬䅸Ўᰒ⼎䖍Ḛˈ䰸䴲⠊Ḛ ᶊ䲚ᏆᇚĀ䖍Ḛā䆒㕂ЎĀ৺āǄা᳝ᔧ݅ѿ䆹䖍Ḛⱘ᠔᳝Ḛᶊ䛑ᇚĀ䖍Ḛā䆒㕂Ў Ā৺āᯊˈ៪㗙ᔧ⠊Ḛᶊ䲚ⱘĀ䖍Ḛāሲᗻ䆒㕂ЎĀ৺āᑊϨ݅ѿ䆹䖍ḚⱘḚᶊ䛑ᇚ Ā䖍Ḛā䆒㕂ЎĀ咬䅸ؐāᯊˈ䖍Ḛᠡᰃ䱤㮣ⱘǄ 䖍Ḛ买㡆˖Ў᠔᳝Ḛᶊⱘ䖍Ḛ䆒㕂䖍Ḛ买㡆Ǆℸ买㡆ᑨ⫼Ѣ੠Ḛᶊ᥹㾺ⱘ᠔᳝䖍Ḛˈ ᑊϨ䞡ݭḚᶊ䲚ⱘᣛᅮ䖍Ḛ买㡆Ǆ 䖍䎱ᆑᑺ˖ҹڣ㋴Ўऩԡ䆒㕂Ꮊ䖍䎱੠ে䖍䎱ⱘᆑᑺ˄Ḛᶊ䖍Ḛ੠ݙᆍП䯈ⱘ䎱⾏˅Ǆ 䖍䎱催ᑺ˖ҹڣ㋴Ўऩԡ䆒㕂Ϟ䖍䎱੠ϟ䖍䎱ⱘ催ᑺ˄Ḛᶊ䖍Ḛ੠ݙᆍП䯈ⱘ䎱⾏˅Ǆ ⫼Ⳍৠᮍ⊩ৃҹ䆒㕂ৡЎĀleftFrameā੠ĀmainFrameāḚᶊሲᗻǄ 3.4.4 ಴౶ࠄΓऄၹ Փ⫼ḚᶊᏗሔᎹ݋ᅠ៤Āᮙ␌᱃⚍ā义䴶ࠊ԰ˈ݊ᬜᵰབ೒ 3-95 ᠔⼎Ǆ ೒ 3-95 Āᮙ␌᱃⚍āḚᶊ㒧ᵘᬜᵰ೒ 1ĕ໭ߙฉྚำߑēಁᄢࣟޯݮ·ࠒٲ ೼キ⚍ḍⳂᔩϟᮄᓎ᭛ӊ།ˈৡЎ travelspotˈᇚĀᮙ␌᱃⚍āⳌ݇㔥义ᄬѢℸ᭛ӊ།Ǆ ˄1˅ᮄᓎ义䴶ˈℸ义䴶㒧ᵘᰃ݌ൟⱘĀT ൟā㒧ᵘˈԚЎњֱ䆕义䴶೼ϡৠߚ䕼⥛ⱘᰒ ⼎఼Ϟྟ㒜ֱᣕᭈԧሙЁᬜᵰˈ佪ܜᮄᓎϔϾᎺЁে㒧ᵘⱘ义䴶ˈᎺ߫੠ে߫Ḛᶊⱘᆑᑺ䆒Ў Ā*āˈЁ䯈߫ḚᶊⱘᆑᑺЎ 1000 ڣ㋴Ǆᓎ䆂೼Āҷⷕ㾚೒āЁҹ㓪ݭҷⷕᮍᓣᅠ៤㒧ᵘ䆒㕂ˈ ҷⷕབϟ˖

(34)

˄2˅ߛᤶࠄĀ䆒䅵㾚೒āにষˈᕫࠄབ೒ 3-96 ᠔⼎ⱘ⬠䴶ᬜᵰǄ ೒ 3-96 ᎺЁেൟḚᶊ ˄3˅ऩߏᎺ߫Ḛᶊݙぎⱑ໘ֱᄬ᭛ӊˈৡЎ blank.htmlǄে߫Ḛᶊࡴ䕑ⱘ义䴶гЎ blank.htmlǄ ˄4˅ऩߏЁ䯈߫ˈ䗝ᢽĀᦦܹā䴶ᵓЁⱘĀᏗሔāऎඳˈऩߏĀḚᶊā䗝乍ЁⱘĀ乊䚼 ੠ጠ༫ⱘᎺջḚᶊā䗝乍ˈབ೒ 3-97 ᠔⼎Ǆᕫࠄབ೒ 3-98 ᠔⼎义䴶ᬜᵰǄ ˄5˅ᇍЁ䯈߫ጠ༫ⱘḚᶊ㒧ᵘ义䴶䖯㸠ֱᄬˈߚ߿ֱᄬЎ top.htmlǃleft.html ੠ main.html 义䴶ǄḚᶊৡ⿄ߚ߿Ў topFrameǃleftFrame ੠ mainFrameǄ ˄6˅ऩߏḚᶊ䲚ˈᇍ travelspot.html 义䴶䖯㸠ֱᄬǄ ೒ 3-97 ĀḚᶊāᏗሔ䴶ᵓ ೒ 3-98 义䴶᳔㒜㒧ᵘ೒ 2ĕᄥᆴ top.html ྚੋઝఘ ˄1˅೼ĀḚᶊā䴶ᵓЁ䗝ЁݙጠḚᶊ䲚˄བ೒ 3-99 ᠔⼎˅ˈ೼Āሲᗻā䴶ᵓЁᇚ㸠催䆒㕂Ў 354 ڣ㋴˄བ೒ 3-100 ᠔⼎˅Ǆ ೒ 3-99 䗝Ёݙጠ T ൟḚᶊ䲚 ೒ 3-100 㸠催䆒㕂

(35)

˄2˅⬅Ѣℸ义䴶ݙᆍ೼ࠡ䴶ゴ㡖ЁᏆ㒣ࠊ԰ˈ䆒䅵㗙ৃ䗮䖛໡ࠊᮍᓣᅲ⦄ݙᆍⱘ໡ࠊǄ 䳔㽕䇈ᯢⱘᰃˈ೼Ḛᶊ㒧ᵘ义䴶にষЁˈ៥Ӏৃҹᮄᓎ CSS 㾘߭ˈԚϡ㛑ᑨ⫼Ѣ݋ԧݙᆍˈ া㛑ऩ⣀ᠧᓔ义䴶にষˈᠡ㛑ᕫҹᑨ⫼Ǆ 3ĕᄥᆴ left.html ྚੋઝఘ ˄1˅೼ĀḚᶊā䴶ᵓЁ䗝ЁݙጠḚᶊ䲚˄བ೒ 3-101 ᠔⼎˅ˈ೼Āሲᗻā䴶ᵓЁᇚ߫ᆑ䆒㕂Ў 260 ڣ㋴˄བ೒ 3-102 ᠔⼎˅Ǆ ೒ 3-101 䗝ЁݙጠᎺেൟḚᶊ䲚 ೒ 3-102 ߫ᆑ䆒㕂 ˄2˅೼义䴶Ё䫒᥹໪䚼 CSS ᭛ӊ style.css˄Ⳍ݇亢Ḑ೼ࠡ䴶Ꮖخ˅Ǆ೼义䴶ЁᦦܹϔϾ 4 㸠 2 ߫ⱘ㸼ḐˈᆑᑺЎ 250 ڣ㋴Ǆ㄀ 1 㸠ϡড়ᑊˈ催ᑺЎ 5 ڣ㋴ˈএᥝ咬䅸ⱘĀ āぎḐǄ ㄀ 2 㸠ড়ᑊˈ催ᑺЎ 44 ڣ㋴Ǆ㄀ 3 㸠ϡড়ᑊˈᇍ݊㄀ 2 ߫䆒㕂ᆑᑺЎ 9 ڣ㋴ˈ催ᑺЎ 16 ڣ㋴Ǆ ㄀ 4 㸠᱖ϡ䆒㕂ˈབ೒ 3-103 ᠔⼎Ǆ ೒ 3-103 㸼Ḑ෎ᴀ㒧ᵘ ˄3˅ᇍ㄀ 1 㸠㄀ 1 ߫䖯㸠ݙጠ亢Ḑ䆒㕂Ǆ䆒㕂ᑊᑨ⫼㉏ৡ䗝ᢽ఼ tr1ˈᇍĀ䖍Ḛā㉏߿Ё ĀBorder-styleāⱘϞǃেǃᎺ䖍Ḛ亢Ḑ䆒ЎĀSolidāˈᆑᑺЎ 1 ڣ㋴ˈ䖍Ḛ买㡆Ў♄㡆Ā#c8c8c8āǄ ˄4˅ᇍ㄀ 2 㸠䖯㸠ݙጠ亢Ḑ䆒㕂Ǆ䕧ܹĀᮙ␌᱃⚍āಯϾᄫˈՓ⫼ぎḐ䖯㸠ড়⧚ᥦ⠜Ǆ 䆒㕂ᑊᑨ⫼㉏ৡ䗝ᢽ఼ tr2ˈ䆒㕂㚠᱃೒⠛ bg.pngˈ᭛ᄫᄫԧЎĀᅟԧāˈ໻ᇣЎ 18 ڣ㋴ˈࡴ ㉫ˈ㸠催Ў 40 ڣ㋴Ǆ ˄5˅ᇍ㄀ 3 㸠䖯㸠ݙጠ亢Ḑ䆒㕂Ǆ䆒㕂㉏ৡ䗝ᢽ఼ tr3ˈᇍĀ䖍Ḛā㉏߿ЁⱘĀBorder-styleā ⱘেǃᎺ䖍Ḛ亢Ḑ䆒ЎĀSolidāˈᆑᑺЎ 1 ڣ㋴ˈ䖍Ḛ买㡆Ў♄㡆Ā#c8c8c8āǄᑊᇚℸ䗝ᢽ఼ ᑨ⫼Ѣ㄀ 1 ߫Ǆ೼㄀ 2 ߫Ёᦦܹ೒⠛ triangle.pngǄ ˄6˅ᇍ㄀ 4 㸠㄀ 1 ߫䆒㕂ݙጠ亢ḐǄ䆒㕂㉏ৡЎ tr4ˈᇍĀ䖍Ḛā㉏߿ЁⱘĀBorder-styleā ⱘেǃϟǃᎺ䖍Ḛ亢Ḑ䆒ЎĀSolidāˈᆑᑺЎ 1 ڣ㋴ˈ䖍Ḛ买㡆Ў♄㡆Ā#c8c8c8āǄ ೼㄀ 4 㸠㄀ 1 ߫Ёᦦܹ݋ԧᮙ␌᱃⚍Ǆᅲ⦄᱃⚍ݙᆍⱘᏗሔ᳝ϸ⾡ᮍᓣˈϔ⾡ᰃጠܹ㸼 Ḑˈ঺ϔ⾡ᰃ߫㸼Ǆ䖭䞠ᰃ䗮䖛ጠܹ㸼Ḑᴹᅠ៤ˈᦦܹϔϾ 10 㸠 2 ߫ⱘ㸼ḐˈᆑᑺЎ 100%ˈ ऩܗḐ㸠催Ў 35 ڣ㋴Ǆ೼㄀ 2 ߫Ё䕧ܹᅠݙᆍৢˈᕫࠄབ೒ 3-104 ᠔⼎ⱘᬜᵰǄ

(36)

䆒㕂㉏ৡ䗝ᢽ఼ tr4_lineǄ೼Ā䖍ḚāऎඳЁ䆒㕂Ꮊ䖍ḚЎĀSolidāˈᆑᑺЎ 4 ڣ㋴ˈ䖍Ḛ 买㡆ЎĀ#F00āǄ೼ĀᮍḚā㉏߿Ё䆒㕂Ꮊ฿ܙЎ 10 ڣ㋴Ǆ䆒㕂ᅠ↩ৢˈᇍ↣乍᭛ᄫᑨ⫼ℸ 䗝ᢽ఼ˈᕫࠄབ೒ 3-105 ᠔⼎ⱘᬜᵰǄ ೒ 3-104 ㄀ 4 㸠߱ྟᬜᵰ ೒ 3-105 ㄀ 4 㸠᳔㒜ᬜᵰ 4ĕᄥᆴ main.html ྚੋઝఘ ˄1˅䫒᥹໪䚼 CSS ᭛ӊ style.cssǄ ˄2˅䆒㕂ݙጠ亢Ḑᷛㅒ䗝ᢽ఼ bodyǄ೼ĀᮍḚāऎඳЁ䆒㕂ĀmargināሲᗻⱘϞ䖍䎱Ў 2ڣ㋴ˈᎺ䖍䎱Ў 0 ڣ㋴Ǆ ˄3˅ᦦܹϔϾ 1 㸠 1 ߫ⱘ㸼ḐˈᆑᑺЎ 720 ڣ㋴ˈ催ᑺЎ 300 ڣ㋴ǄऩܗḐݙൖⳈᥦ߫ ᮍᓣЎĀ乊ッāᇍ唤Ǆ䆒㕂㉏ৡ䗝ᢽ఼ border_styleˈ೼Ā䖍ḚāऎඳЁ䆒㕂ĀBorder-styleā ЎĀSolidāˈᆑᑺЎ 1 ڣ㋴ˈ买㡆ЎĀ#749800āǄ ˄4˅೼㸼Ḑݙ䕧ܹᷛ乬Ḑᓣ᭛ᄫĀФቅ໻ԯāˈᑊ䗮䖛ᷛㅒ䗝ᢽ఼ h1 䆒㕂亢ḐǄ೼Ā㉏ ൟāऎඳЁ䆒㕂᭛ᄫᄫԧЎĀᅟԧāˈ໻ᇣЎ 22 ڣ㋴ˈ㸠催Ў 40 ڣ㋴ˈ买㡆ЎĀ#060āǄ೼Ā㚠 ᱃āऎඳЁ䆒㕂㚠᱃买㡆ЎĀ#EFFEB9āǄĀऎഫāऎඳЁˈ᭛ᴀᥦ߫ЎĀᎺᇍ唤āǄ೼ĀᮍḚā ऎඳЁϞ䖍䎱Āmargin-topāЎ 0Ǆ೼Ā䖍ḚāऎඳЁˈ䖍Ḛ亢ḐЎĀSolidāˈᆑᑺЎ 1 ڣ㋴ˈ 买㡆ЎĀ#c8c8c8āǄ೼᭛ᄫᎺ䖍ᦦܹϸϾぎḐǄ ˄5˅೼↉㨑Ḑᓣϟᦦܹ೒ڣ dafo.jpgǄ ˄6˅ᦦܹ᭛ᄫֵᙃˈ⫼↉㨑᥻ࠊǄ⬅Ѣ䗝ᢽ఼ p ⱘ㾘߭Ꮖ೼໪䚼 CSS ЁᅮНˈ䖭䞠ህϡ 䳔㽕䞡໡䆒㕂亢ḐǄ ˄7˅䆒㕂೒ڣ dafo.jpg Ϣ᭛ᄫⱘᥦ߫ᮍᓣˈ೼ሲᗻ䴶ᵓЁ䗝ᢽĀেᇍ唤āˈᑊ䆒㕂೒ڣⱘ ∈ᑇ䖍䎱Ў 5 ڣ㋴Ǆ ᠻ㸠ᅠҹϞℹ偸ˈৃᕫࠄབ೒ 3-106 ᠔⼎ⱘᬜᵰǄ 䞡໡ҹϞℹ偸ˈࠊ԰Āኼⳝቅā义䴶 emei.htmlǄ 5ĕၽࣟޯᄯರဈбढ़ࠄ ᔧ哴ᷛऩߏ义䴶left.htmlⱘᇐ㟾ֵᙃᯊˈ݊Ⳃᷛ᭛ӊᇚᰒ⼎೼ৡЎ mainFrameⱘেḚᶊЁǄ ˄1˅䗝ЁĀФቅ໻ԯāᇐ㟾ֵᙃˈ೼Āሲᗻā䴶ᵓЁ䆒㕂䫒᥹᭛ӊЎ main.htmlˈ೼ĀⳂ ᷛāϟᢝ߫㸼ḚЁ䗝ᢽেḚᶊৡ⿄ЎĀmainFrameāˈབ೒ 3-107 ᠔⼎Ǆ䗝ЁĀኼⳝቅāᇐ㟾ֵ ᙃˈⳂᷛ᭛ӊЎ emei.htmlˈ೼ĀⳂᷛāϟᢝ߫㸼ḚЁ䗝ᢽĀmainFrameā䗝乍Ǆৠ⧚ৃᅠ៤䍙䫒᥹䆒㕂ˈ㛑೼ᣛᅮḚᶊЁᠧᓔǄ

(37)

೒ 3-106 ĀФቅ໻ԯā义䴶ᬜᵰ೒ ೒ 3-107 䍙䫒᥹೼Ḛᶊ㒧ᵘЁⱘ䆒㕂 ˄2˅བᵰ㽕ᅲ⦄བ೒ 3-108 ᠔⼎ⱘᬜᵰˈ䖬㽕䖯㸠 CSS 䆒㕂ˈՓ⫼Ӿ㉏䗝ᢽ఼ a:hoverˈ䆒㕂ᔧ哴ᷛذ⬭೼Ϟ䴶ᯊˈ ᭛ᄫ买㡆ব៤ⱑ㡆ˈ㚠᱃买㡆ЎĀ#360āˈ฿ܙЎ 2 ڣ㋴Ǆ 䗮䖛ҹϞℹ偸ⱘ᪡԰ˈेৃᅠ៤Āᮙ␌᱃⚍āⳌ݇义䴶 ⱘࠊ៤Ǆ䳔㽕䇈ᯢⱘᰃˈЎњ֓Ѣㅵ⧚ˈᮄᓎњ travelspot Ⳃᔩϧ䮼ᄬᬒ㔥义᭛ӊˈᑊ೼ℸⳂᔩϟᮄᓎ images ᭛ӊᄬ ᬒ᠔䳔೒⠛Ǆ

3.5 Div+CSS

䱣ⴔ Web ᷛޚ೼೑ݙⱘ᱂ঞˈDiv+CSS Ꮧሔ῵ᓣ៤Ўњ㔥义䆒䅵থሩⱘ⌕㸠䍟࢓ˈⳂࠡ ᕜ໮໻ൟ㔥キˈབ䮼᠋㔥キ㔥ᯧǃᮄ⌾੠䲙㰢ˈଚϮ㉏㔥キ⎬ᅱㄝഛ䞛⫼ℸᏗሔᮍᓣǄᴀ㡖ᇚ ҟ㒡 Div ෎⸔ǃDiv Ꮧሔᡔᴃ੠ᅲ՟䆆㾷ˈᅠ៤Āᮙ␌ᬏ⬹ā义䴶ⱘࠊ԰Ǆ 3.5.1 Div ۳ᆩ 1ĕDiv+CSS ϣࡥޏ೬ညԤ Div+CSS ϡҙᰃ䆒䅵ᮍᓣⱘᬍবˈ㗠Ϩᰃ䆒䅵ᗱ㓈ⱘ䕀বˈ䖭ϔ䕀বЎ㔥义䆒䅵ᏺᴹњ ೒ 3-108 a:hover 䆒㕂ᬜᵰ

(38)

߽֓ˈՓ㔥义䆒䅵݋᳝њᕜ໻ⱘ♉⌏ᗻǄ݊Ӭ⚍བϟ˖ ヺড় W3C ᷛޚǄᖂ䕃ㄝ݀ৌഛЎ W3C ᬃᣕ㗙Ǆ䖭ϔ⚍ᰃ᳔䞡㽕ⱘˈ಴Ў䖭ֱ䆕ᙼ ⱘ㔥キϡӮ಴Ўᇚᴹ㔥㒰ᑨ⫼ⱘछ㑻㗠㹿⎬≄Ǆ ㊒ㅔҷⷕˈ䰡Ԣ䞡ᵘ䲒ᑺǄ㔥キՓ⫼ Div+CSS ᏗሔՓҷⷕ᳈㊒ㅔˈCSS ᭛ӊৃҹ೼ 㔥キⱘӏᛣϔϾ义䴶䖯㸠䇗⫼ˈ㗠㢹ᰃՓ⫼ table 㸼Ḑׂᬍ䚼ߚ义䴶ैᕜ咏⚺Ǆ㽕ᰃ ϔϾ䮼᠋㔥キⱘ䆱ˈ䳔᠟ࡼׂᬍᕜ໮义䴶ˈ㗠Ϩⳟⴔ䙷ѯ㸼ḐгӮᛳ㾝ᕜхˈгᕜ⌾ 䌍ᯊ䯈ˈԚᰃՓ⫼ Div+CSS Ꮧሔা䳔ׂᬍ CSS ᭛ӊЁⱘϔϾҷⷕेৃǄ ᬃᣕ⌣㾜఼ⱘ৥ৢݐᆍˈгህᰃ᮴䆎᳾ᴹⱘ⌣㾜఼໻៬㚰߽ⱘᰃ IE7 䖬ᰃ☿⢤ˈ㔥キ䛑㛑ᕜདഄݐᆍǄ ᧰㋶ᓩ᪢᳈ࡴটདǄⳌᇍӴ㒳ⱘ tableˈ䞛⫼ Div+CSS ᡔᴃⱘ㔥义ᇍѢ᧰㋶ᓩ᪢ⱘᬊ ᔩ᳈ࡴটདǄ ḋᓣⱘ䇗ᭈ᳈ࡴᮍ֓Ǆݙᆍ੠ḋᓣⱘߚ⾏Փ义䴶੠ḋᓣⱘ䇗ᭈবᕫ᳈ࡴᮍ֓Ǆ CSS ⱘᵕ໻Ӭ࢓㸼⦄೼ㅔ⋕ⱘҷⷕˈᇍѢϔϾ໻ൟ㔥キᴹ䇈ৃҹ㡖ⳕ໻䞣ᏺᆑˈ㗠 Ϩӫ᠔਼ⶹˈ᧰㋶ᓩ᪢୰⃶ㅔ⋕ⱘҷⷕǄ 㸼⦄੠㒧ᵘߚ⾏ˈ೼ಶ䯳ᓔথЁ᳈ᆍᯧߚᎹড়԰㗠ޣᇥⳌѦ݇㘨ᗻǄ 2ĕDiv γஆ ᷛ䆄<div>ⱘ㣅᭛ܼ⿄ᰃ DivisionˈЁ᭛ᛣᗱЎĀऎߚāˈг⿄Ўሖˈ೼ሖ䞠䴶ৃҹᬒ㕂৘ ⾡ݙᆍˈ↨བ᭛ᄫǃ೒ڣǃFlashˈ⫮㟇ᰃϔϾ㸼Ḑˈ಴ℸ៥Ӏг⿄ᅗᰃϾ䗣ᯢⱘᆍ఼Ǆ݊Ḑ ᓣབϟ˖

བᵰ<div>ᷛ䆄㹿ऩ⣀Փ⫼ˈᅗ೼㔥义ЁⱘᬜᵰϢՓ⫼↉㨑ᷛㅒᰃϔḋⱘǄ 3.5.2 ଣК Div ᄊ۳వ୲ͻ ೼ Dreamweaver Ёˈ䆒䅵㗙ৃҹՓ⫼ Div ᷛㅒ߯ᓎ CSS Ꮧሔ⠜ഫˈᑊᇍᅗӀ䖯㸠ᅮԡˈ ݊ᮍ⊩བϟǄ ˄1˅೼Ā䆒䅵㾚೒āにষˈᇚᦦܹ⚍ᬒ㕂೼㽕ᰒ⼎ሖⱘԡ㕂Ǆ ˄2˅ᠻ㸠ϟ߫᪡԰ᦦܹሖǄ 䗝ᢽ㦰ऩĀᦦܹāėĀᏗሔᇍ䈵āėĀDiv ᷛㅒāੑҸǄ ೼Āᦦܹā䴶ᵓĀᏗሔāऎඳЁऩߏĀᦦܹ Div ᷛㅒā೒ᷛ Ǆ ˄3˅೼ᔍߎⱘĀᦦܹ Div ᷛㅒāᇍ䆱ḚЁ฿ݭⳌᑨⱘ䗝乍ˈབ೒ 3-109 ᠔⼎Ǆ ೒ 3-109 Āᦦܹ Div ᷛㅒāᇍ䆱Ḛ ৘䗝乍ⱘ৿Нབϟ˖ Āᦦܹā䗝乍˖⫼Ѣ䆒㕂 Div ᷛㅒⱘԡ㕂Ǆ䰸Ā೼ᦦܹ⚍ā䗝乍ؐ໪ˈ䖬᳝݊ҪಯϾ 䗝乍ˈᇚ೼ 3.5.3 㡖㒧ড়ᅲ՟䖯㸠ҟ㒡Ǆ

(39)

Ā㉏ā䗝乍˖䆒㕂ℸ Div ᷛㅒⱘ㉏ৡˈҹ֓䖯㸠 CSS 㾘߭ᅮНǄ

ĀIDā䗝乍˖䆒㕂 Div ᷛㅒⱘ ID ؐˈৃҹᐂࡽ݊Ҫ Div ᷛㅒᅮԡˈᮍ֓䖯㸠 CSS 㾘

߭ᅮНǄ ˄4˅ऩߏĀ⹂ᅮāᣝ䪂ৢˈDiv ᷛㅒᇚҹ㰮㒓Ḛⱘᔶᓣᰒ⼎೼᭛ḷЁˈᑊᏺ᳝咬䅸ⱘ᭛ ᴀˈབ೒ 3-110 ᠔⼎Ǆᇚᦦܹ⚍ᬒ㕂೼㒓Ḛݙˈৃ䕧ܹӏԩݙᆍǄ೼ৢ䴶ⱘ䆆㾷Ёˈ៥Ӏ䳔㽕 ⫼ࠄ໻䞣ⱘ Div ᷛㅒϢ CSS ḋᓣᅠ៤㔥义ⱘࠊ԰Ǆ ೒ 3-110 Div ᷛㅒ߱ྟ⢊ᗕ 3.5.3 Div+CSS ऄၹࠄΓ ᴀ㡖ᇚҟ㒡Փ⫼ Div+CSS ᡔᴃࠊ԰Āᮙ␌ᬏ⬹ā义䴶ˈབ೒ 3-111 ᠔⼎Ǆℸ义䴶ࣙ৿њ 3 Ͼ䚼ߚ˖义ⳝ䚼ߚˈࣙᣀ Logoǃᇐ㟾ᴵ੠ᦤ⼎ֵᙃ˗Џԧ䚼ߚˈࣙᣀᎺেϸֵ߫ᙃˈᎺ߫Ў ᇐ㟾ֵᙃˈে߫Ў䆺㒚ݙᆍҟ㒡˗义㛮䚼ߚˈࣙ৿њ⠜ᴗⳌֵ݇ᙃǄ ೒ 3-111 Āᮙ␌ᬏ⬹āᬜᵰ೒ 1ĕಁᄢྚੋϣࡥࠒٲ 䆒䅵㗙佪ܜ㽕ᇍᭈϾ义䴶㒧ᵘ䖯㸠㒬ࠊˈᯢ⹂ Div ᷛㅒП䯈ⱘ ጠ༫݇㋏Ǆ䖭ᰃϔϾᕜདⱘдᛃˈ㛑䖒ࠄџञࡳסⱘᬜᵰˈ݊㒧ᵘ ೒བ೒ 3-112 ᠔⼎Ǆ ᦦܹⱘ Div ᷛㅒ䛑䳔㽕ໄᯢ ID ؐˈҹ֓䗮䖛 CSS 䖯㸠⣀ゟ᥻ ࠊǄ᳝ѯ Div ሖ᳝݅ৠ亢ḐᯊˈЎњޣᇥҷⷕড໡㓪ݭˈ㽕♉⌏䖤 ⫼㉏ৡǄ 2ĕҗߙq৊ဓٞ৛rંৃރฉྚำߑ Ўњ֓Ѣㅵ⧚ˈ೼キ⚍ḍⳂᔩϟᮄᓎ᭛ӊ། strategyˈᑊ೼ℸⳂᔩϟᮄᓎ images ᭛ӊ།ˈ ᇚ义䴶᠔䳔೒⠛໡ࠊࠄ images ᭛ӊ།ЁǄ ᮄᓎĀᮙ␌ᬏ⬹ā㔥义᭛ӊ strategy.htmlǄՓ⫼ body ԰Ўᷛㅒ䗝ᢽ఼ˈ䆒㕂义䴶䯈䎱Ў 0 ڣ㋴Ǆ #header #main #footer ೒ 3-112 义䴶㒧ᵘ೒

(40)

3ĕಁᄢྚੋݮ·ϣࡥࠒٲ

ḍ᥂义䴶㒧ᵘ೒ˈ೼ strategy.html 义䴶Ёᨁᓎ෎ᴀᏗሔ㒧ᵘˈ݊ℹ偸བϟǄ

˄1˅ᇍ义ⳝ䚼ߚ䖯㸠䆒㕂Ǆ佪ܜᦦܹ ID ؐЎ logo ⱘ Div ᷛㅒˈᑊՓ⫼#logo 䗝ᢽ఼䖯㸠

CSS㾘߭ᅮНǄ೼Ā䆒䅵㾚೒āにষЁ䗝ᢽℸሖˈऩߏĀᮄᓎ CSS 㾘߭āᣝ䪂ৢˈDreamweaver

ᇚ㞾ࡼ䆒㕂䗝Ёሖⱘ ID ؐ԰Ў䗝ᢽ఼Ǆ೼Ā䖍Ḛā㉏߿ሲᗻᇍ䆱ḚЁˈ䆒㕂ᆑᑺЎ 1000 ڣ ㋴ˈ催ᑺЎ 90 ڣ㋴Ǆ㽕ՓሖሙЁᰒ⼎ˈ䖬䳔ᇍĀmarginā䗝乍䖯㸠䆒㕂ˈtop ੠ bottom ؐ䆒 Ў 0 ڣ㋴ˈleft ੠ right ؐ䆒Ў autoǄ

✊ৢᦦܹ ID ؐЎ navi ⱘ Div ᷛㅒˈЎՓ݊ޚ⹂ᅮԡˈ೼Āᦦܹ Div ᷛㅒāᇍ䆱ḚЁˈ䗝 ᢽĀᦦܹā䗝乍ؐĀ೼ᷛㅒПৢāˈ᥹ⴔ೼েջⱘϟᢝ߫㸼ḚЁ䗝ᢽĀ<div id="logo">ā䗝乍ˈ བ೒ 3-113 ᠔⼎Ǆ✊ৢՓ⫼#navi 䗝ᢽ఼䖯㸠 CSS 㾘߭ᅮНǄ೼Ā䖍Ḛā㉏߿ሲᗻᇍ䆱ḚЁˈ 䆒㕂݊催ᑺЎ 30 ڣ㋴ˈᆑᑺЎ autoǄ

೒ 3-113 ᦦܹ#navi ሖ

᳔ৢᦦܹ ID ؐЎ tips ⱘ Div ᷛㅒˈᇚ݊ᦦܹ#navi ሖПৢˈᮍ⊩ৠϞǄ䆒㕂݊ CSS 㾘߭ˈ ᆑᑺЎ 1000 ڣ㋴ˈ催ᑺЎ 30 ڣ㋴ˈᑊሙЁǄ

义ⳝ㒧ᵘᬜᵰབ೒ 3-114 ᠔⼎Ǆ

೒ 3-114 义ⳝ㒧ᵘᬜᵰ೒

˄2˅ᇍЏԧݙᆍ㒧ᵘ䖯㸠䆒㕂Ǆ佪ܜᦦܹ ID ؐЎ main ⱘ Div ᷛㅒˈᑊ䆒㕂 CSS 㾘߭Ǆ ೼ĀᮍḚā㉏߿Ёˈ䆒㕂ᆑᑺЎ 1000 ڣ㋴ˈ催ᑺЎ 580 ڣ㋴ˈᑊ䆒㕂ሙЁᬜᵰǄ✊ৢᦦ ܹ ID ؐЎ main_left ⱘ Div ᷛㅒˈ⬅Ѣℸሖጠܹࠄ#main ሖݙˈЎޚ⹂ᅮԡˈ೼Āᦦܹ

Div ᷛㅒāᇍ䆱ḚЁˈ䗝ᢽĀᦦܹā䗝乍ؐĀ೼ᓔྟᷛㅒПৢāˈ೼݊েջⱘϟ߫㸼Ḛऩ

Ё䗝ᢽĀ<div id="main">ā䗝乍ˈབ೒ 3-115 ᠔⼎Ǆ

(41)

ᔧሖП䯈থ⫳ጠ༫݇㋏ৢˈབᵰᇍጠ༫ⱘሖ䖯㸠 CSS 亢Ḑ䆒㕂ˈ݊Āᮄᓎ CSS 㾘߭āᇍ 䆱ḚϞӮ㞾ࡼ฿ࡴབ೒ 3-116 ᠔⼎ⱘ䗝ᢽ఼ˈ⿄ЎĀ໡ড়ݙᆍ˄෎Ѣ䗝ᢽⱘݙᆍ˅ā៪㗙ĀϞ ϟ᭛ā䗝ᢽ఼Ǆ

೒ 3-116 ጠ༫݇㋏ⱘϞϟ᭛䗝ᢽ఼

#main_leftሖⱘ CSS 㾘߭ᰃ˖ᆑᑺЎ 300 ڣ㋴ˈ催ᑺЎ autoˈ⍂ࡼᮍᓣЎĀᎺ⍂ࡼāǄ

᥹ⴔ೼#main_left ሖПৢᦦܹ#main_right ሖˈᆑᑺЎ 690 ڣ㋴ˈ催ᑺЎ autoˈ⍂ࡼᮍᓣЎ Āে⍂ࡼāǄ㒧ᵘབ೒ 3-117 ᠔⼎Ǆ

೒ 3-117 ĀЏԧ䚼ߚā㒧ᵘ೒

˄3˅ᇍ义㛮㒧ᵘ䖯㸠䆒㕂Ǆ೼#main ሖПৢᦦܹ#footer ሖˈᆑᑺЎ 1000 ڣ㋴ˈ催ᑺЎ

100ڣ㋴ˈᑊሙЁᇍ唤Ǆ

˄4˅义䴶㒧ᵘҷⷕབϟǄ

<div id="main_left">ℸ໘ᰒ⼎ id "main_left" ⱘݙᆍ</div> <div id="main_right">ℸ໘ᰒ⼎ id "main_right" ⱘݙᆍ</div> ℸ໘ᰒ⼎ id "main" ⱘݙᆍ</div>

<div id="footer">ℸ໘ᰒ⼎ id "footer" ⱘݙᆍ</div>

4ĕᄥᆴྚਡϦדઝఘ

(42)

Āno-repeatāǄ݊ CSS ҷⷕབϟ˖ #logo { height: 90px; width: 1000px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-image: url(images/logo.png); background-repeat: no-repeat; } ˄2˅ጠܹ#logo_search ሖˈᆑᑺЎ 313 ڣ㋴ˈ催ᑺЎ 39 ڣ㋴ˈᎺ⍂ࡼˈ䎱Ϟ䖍⬠ 30 ڣ ㋴ˈ䎱Ꮊ䖍⬠ 300 ڣ㋴ˈᑊ䆒㕂㚠᱃೒⠛ serach.pngǄ݊ CSS ҷⷕབϟ˖ #logo #logo_search { height: 39px; width: 313px; margin-top: 30px; margin-left: 300px; background-image: url(images/search.png); background-repeat: no-repeat; } ˄3˅೼#logo_search ሖПৢᦦܹ#logo_button ሖˈᆑᑺЎ 341 ڣ㋴ˈ催ᑺЎ 29 ڣ㋴ˈᎺ ⍂ࡼˈ䎱Ϟ䖍⬠ 35 ڣ㋴ˈᑊ䆒㕂㚠᱃೒⠛ button.pngˈϡ䞡໡Ǆ݊ CSS ҷⷕབϟ˖ #logo #logo_button { background-image: url(images/button.png); float: left; height: 29px; width: 341px; margin-top: 35px; }

䇈ᯢ˖float ׼Վ೫໿ၽ Div ϣࡥᄯׄШᄷྑē൑ટ̟ Div γஆЌదԅഈ༝ճЊࠩ໻ࡢᆰ ݧࡢဗω૦d ᬜᵰབ೒ 3-118 ᠔⼎Ǆ ೒ 3-118 #logo ሖ义䴶ᬜᵰ೒ ˄4˅䆒㕂#navi ሖ㚠᱃买㡆ЎĀ#5A9900āǄ೼#navi ሖЁᦦܹ߫㸼Ḑᓣֵᙃˈབ೒ 3-119 ᠔⼎Ǆ ೒ 3-119 ߫㸼ֵᙃ߱ྟᬜᵰ

(43)

ҷⷕབϟ˖ <div id="navi"> <ul> <li>佪义</li> <li>Фቅὖމ</li> <li>᱃⚍ҟ㒡</li> <li>ᮙ␌㒓䏃</li> <li>ᮙ␌ᬏ⬹</li> <li>ᮙ␌䜦ᑫ</li> <li>೼㒓⬭㿔</li> </ul> </div> ˄5˅Փ⫼ CSS 㾘߭䇗ᭈ߫㸼ǄՓ⫼Ā#navi ul liā䗝ᢽ఼䖯㸠 CSS 亢Ḑ䆒㕂Ǆ೼Ā㉏ൟā ऎඳЁˈ䆒㕂᭛ᄫ໻ᇣЎ 16 ڣ㋴ˈ买㡆Ўⱑ㡆ˈ㸠催Ў 30 ڣ㋴Ǆ೼ĀᮍḚāऎඳЁˈ䆒㕂↣ Ͼ߫㸼乍ᆑᑺЎ 140 ڣ㋴ˈᎺ⍂ࡼǄ೼Ā߫㸼āऎඳЁˈ䆒㕂ĀList-style-typeāؐЎĀnoneāǄ ᇍᭈϾ߫㸼䖯㸠亢Ḑ䆒㕂ˈՓ⫼Ā#navi ulā䗝ᢽ఼ˈ䆒㕂ᆑᑺЎ 1000 ڣ㋴ˈ催ᑺЎ 30 ڣ㋴ˈϨሙЁᥦ߫ǄCSS ҷⷕབϟ˖ #navi { height: 30px; background-color: #5A9900; } #navi ul li { float: left; list-style-type: none; font-family: "ᅟԧ"; font-size: 16px; color: #FFF; width: 140px; line-height: 30px; } #navi ul { width: 1000px; height: 30px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } ˄6˅೼#tips ሖЁ䕧ܹĀᔧࠡԡ㕂˖ФቅФ∈㔥キ > ᮙ␌ᬏ⬹ā᭛ᄫˈ䗝Ё䚼ߚ᭛ᄫˈ 䆒㕂ࡴ㉫ᬜᵰǄ䆒㕂 CSS 亢Ḑˈ᭛ᄫ໻ᇣЎ 12 ڣ㋴ˈ㸠催Ў 30 ڣ㋴ˈ᭛ᴀ㓽䖯 30 ڣ㋴ǄCSS ҷⷕབϟ˖ #tips { width: 1000px; height: 30px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;

(44)

font-size: 12px; line-height: 30px; text-indent: 30px; } 义ⳝ᳔㒜ᬜᵰབ೒ 3-120 ᠔⼎Ǆ ೒ 3-120 义ⳝ᳔㒜ᬜᵰ೒ 5ĕᄥᆴᅖ඘Ϧדઝఘ ˄1˅#main_left ሖЁ䆒㕂䖍Ḛ亢ḐЎᅲ㒓ˈᆑᑺЎ 1 ڣ㋴ˈ买㡆ЎĀ#060āǄCSS ҷⷕབϟ˖ #main #main_left { float: left; height: auto; width: 300px; border: 1px solid #060; } ˄2˅೼#main_left ሖЁጠܹ#left_title ሖǄ䕧ܹĀФቅᮙ␌ᬏ⬹ā᭛ᄫˈՓ⫼ϔ⃵ぎḐˈ ݡᦦܹ೒⠛ arrow_down.gifǄ 䆒㕂Ⳍ݇ CSS 㾘߭ˈĀ㉏ൟāऎඳЁˈ᭛ᄫᄫԧЎĀ咥ԧāˈᄫԧ໻ᇣЎ 19 ڣ㋴ˈ㸠催Ў 40ڣ㋴ǄĀ㚠᱃āऎඳЁˈ㚠᱃㡆ЎĀ#edf6e4āǄĀऎഫāऎඳЁˈ᭛ᄫሙЁᇍ唤ǄĀᮍḚāऎ ඳЁˈ催ᑺЎ 40 ڣ㋴ǄĀ䖍ḚāऎඳЁˈা䆒㕂Ϟǃϟ䖍Ḛˈ亢ḐЎᅲ㒓ˈᆑᑺЎ 1 ڣ㋴ˈ买㡆ЎĀ#CCCāǄ݊ҷⷕབϟ˖

#main #main_left #left_title { height: 40px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #CCC; border-bottom-color: #CCC; background-color: #edf6e4; font-family: "咥ԧ"; font-size: 16px; line-height: 40px; text-align: center; } ˄3˅೼#left_title ሖৢݡᦦܹ#left_navi ሖǄ䆒㕂݊ CSS 㾘߭ˈᆑᑺЎ 300 ڣ㋴ˈ催ᑺЎ 122ڣ㋴ˈ㚠᱃೒ڣЎ left_navi.pngǄ݊ҷⷕབϟ˖

#main #main_left #left_navi { height: 122px; width: 300px;

background-image: url(images/left_navi.png); }

(45)

݊ᬜᵰབ೒ 3-121 ᠔⼎Ǆ

೒ 3-121 #main_left ሖᬜᵰ೒

˄4˅೼#main_right ሖЁ߯ᓎᬏ⬹䆺㒚ᦣ䗄ֵᙃˈᦦܹϝϾሖˈID ৡߚ߿Ў right1ǃright2 ੠ right3Ǆ⬅Ѣ↣Ͼֵᙃ⠜ഫⱘᆑᑺ䛑Ў 690 ڣ㋴ˈϨ䛑䆒㕂њ♄㡆ᅲ㒓Ḛˈ⠜ഫП䯈᳝Ⳍৠ Ϟϟ䯈䎱ˈ᭛ᄫ໻ᇣЎ 12 ڣ㋴ˈ㸠催Ў 20 ڣ㋴ˈϨᎺ⍂ࡼǄ಴ℸ೼߯ᓎሖᯊ䆒㕂㉏ৡ䛑Ў right_descriptionˈབ೒ 3-122 ᠔⼎Ǆ ೒ 3-122 ㉏ৡ䆒㕂᪡԰ ㉏ৡ䗝ᢽ఼䆒㕂 CSS ҷⷕབϟ˖ .right_description { font-size: 12px; line-height: 20px; width: 690px; margin-bottom: 6px; border: 1px solid #CCC; float:left; }

˄5˅೼#right1ǃ#right2 ੠#right3 ሖЁߚ߿ጠܹ݋ԧᬏ⬹ᦣ䗄ֵᙃⱘሖˈID ؐߚ߿ৡЎ right1_contentǃright2_content ੠ right3_contentˈ㱑✊݋ԧݙᆍϡϔḋˈԚϝϾሖ݋᳝ϔѯⳌৠ ⱘ亢ḐˈབᆑᑺЎ 480 ڣ㋴ˈে⍂ࡼˈে䖍䎱Ў 3 ڣ㋴ˈ಴ℸໄᯢৠϔ㉏ৡЎ right_contentˈ 䖯㸠㒳ϔ亢Ḑ䆒㕂Ǆ݊ CSS ҷⷕབϟ˖ .right_content { float: right; width: 480px; margin-right: 3px; } ˄6˅೼#right1 ሖЁᦦܹ㚠᱃೒⠛ jingding1.pngˈϡ䞡໡Ǆ೼ݙጠⱘ#right1_content ሖЁ 䕧ܹᦣ䗄᭛ᄫǄৠ⧚ˈᅠ៤#right2 ੠#right3 ݙᆍⱘࠊ԰ˈ᠔䳔㚠᱃೒⠛ߚ߿Ў qianwei.png ੠ jkh1.pngǄ᳔㒜ᬜᵰབ೒ 3-123 ᠔⼎Ǆ