网页设计与制作项目案例教程（Dreamweaver CS6） - 万水书苑-出版资源网

(1)

ᮊᄬ̄ ߷ᖹ੧̣ࠧښ Dreamweaver ˗ѹथˁኮေባག

Ǐ䯂乬ᓩܹǐ ೼ࠡ䴶ⱘᄺдЁˈҟ㒡њ㔥义䆒䅵Ϣࠊ԰ⱘⳌ݇෎⸔ⶹ䆚ˈ䞡⚍ҟ㒡њ HTML 䇁㿔Ǆ㽕 ᠟ࡼ㓪䕥 HTML ҷⷕ߯ᓎ㔥义ˈ㽕∖ᇍ HTML Ёⱘᷛㅒঞ݊ሲᗻ䴲ᐌ❳ᙝǄབᵰᇍҷⷕϡ❳ ᙝᗢМࡲˈ㛑ࠊ԰㔥义৫˛ϔϾᇣൟ㔥キ㟇ᇥ᳝ 3ǃ4 Ͼ㔥义ˈ໻ൟ㔥キৃ㛑᳝៤ⱒϞगϾ㔥义ˈ䙷М䆹བԩㅵ⧚䖭ѯ㔥义ҹঞⳌ݇ⱘ䌘᭭ਸ਼˛ Ǐ㾷އᮍ⊩ǐ 䰸њ᠟ࡼ㓪ݭ HTML ҷⷕ߯ᓎ㔥义໪ˈৃ㾚࣪㓪䕥Ꮉ݋ Dreamweaver ᰃᕜདⱘ䗝ᢽǄՓ ⫼ Dreamweaver ৃҹ䖯㸠ৃ㾚࣪㓪䕥ˈϡᰃᕜ❳ᙝ HTML ᷛㅒҷⷕгৃҹࠊ԰㔥义Ǆ DreamweaverЁⱘキ⚍ㅵ⧚Ꮉ݋ৃҹЎ㔥キᓎゟϔϾ䘏䕥ⱘⳂᔩ㒧ᵘˈḍ᥂㔥义ⱘࡳ㛑ᄬᬒϡ ৠⱘ义䴶ⱘݙᆍǄDreamweaver ⱘキ⚍ㅵ⧚Ꮉ݋ㅔ࣪њ㔥キㅵ⧚ⱘ໡ᴖᗻˈᇚ㔥キⱘㅵ⧚বᕫ ѩѩ᳝ᑣǄ Ǐᄺдӏࡵǐ 䅸䆚 Dreamweaver CS6 ᅮН㔥キⱘ䘏䕥㒧ᵘ ߯ᓎᴀഄキ⚍ ㅵ⧚キ⚍ ǏᄺдⳂᷛǐ њ㾷ᑊ❳ᙝ Dreamweaver CS6 ⱘ⬠䴶Ϣ᪡԰ њ㾷㔥キⱘ䘏䕥㒧ᵘ ᥠᦵᴀഄキ⚍ⱘᓎゟᮍ⊩Ϣℹ偸 њ㾷キ⚍ⱘㅵ⧚ 㛑໳Փ⫼ Dreamweaver ࠊ԰ㅔऩ㔥义

2.1 ͊Ҭ 1Ὁᝣគ Dreamweaver CS6

ӏࡵⳂᷛ˖䅸䆚 Dreamweaver CS6ˈ❳ᙝᅗⱘ⬠䴶ҹঞ෎ᴀ᪡԰ᮍ⊩Ǆ 2.1.1 Dreamweaver CS6 ഐᤘ Dreamweaver CS6 ᰃϪ⬠乊㑻䕃ӊॖଚ Adobe ᥼ߎⱘϔ༫݋᳝ৃ㾚࣪㓪䕥⬠䴶ˈ⫼Ѣࠊ ԰ᑊ㓪䕥㔥キ੠⿏ࡼᑨ⫼⿟ᑣⱘ㔥义䆒䅵䕃ӊǄ⬅Ѣᅗᬃᣕҷⷕǃᢚߚǃ䆒䅵ǃᅲᯊ㾚೒ㄝ໮ ⾡ᮍᓣ߯԰ǃ㓪ݭ੠ׂᬍ㔥义ˈ಴ℸᇍѢ߱㑻Ҏਬˈ᮴䳔㓪ݭӏԩҷⷕህ㛑ᖿ䗳߯ᓎ Web 义

(2)

䴶Ǆ݊៤❳ⱘҷⷕ㓪䕥Ꮉ݋᳈䗖⫼Ѣ Web ᓔথ催㑻Ҏਬⱘ߯԰ǄCS6 ᮄ⠜ᴀՓ⫼њ㞾䗖ᑨ㔥 Ḑ⠜䴶߯ᓎ义䴶ˈ೼থᏗࠡৃՓ⫼໮ሣᐩ乘㾜ᅵ䯙䆒䅵ˈ໻໻ᦤ催њ⫼᠋ⱘᎹ԰ᬜ⥛ˈ㗠ᬍ୘ ⱘ FTP ᗻ㛑ৃ᳈催ᬜഄӴ䕧໻ൟ᭛ӊǄĀᅲᯊ㾚೒ā੠Ā໮ሣᐩ乘㾜ā䴶ᵓৃਜ⦄ HTML5 ҷ ⷕˈ⫼᠋㛑᳈ᮍ֓ഄẔᶹ㞾ᏅⱘᎹ԰Ǆ

2.1.2 Dreamweaver CS6 ࢺͻႍ᭧

ᠻ㸠Āᓔྟā̘Ā⿟ᑣā̘Adobe Dreamweaver CS6 ੑҸ៪ঠߏᖿ᥋೒ᷛਃࡼ Dreamweaver CS6ˈ㄀ϔ⃵ᠧᓔ䕃ӊᯊӮ䖯ܹϔϾᓔྟ⬠䴶ˈབ೒ 2-1 ᠔⼎Ǆ ೒ 2-1 ᓔྟ⬠䴶 བᵰϟ⃵ਃࡼϡᛇᰒ⼎ℸ⬠䴶ህᡞᎺϟ㾦Āϡݡᰒ⼎āࠡⱘ໡䗝Ḛ࣒䗝ϞǄ ೼Āᮄᓎāᷣ䗝ᢽ HTML 䖯ܹ Dreamweaver CS6 ⱘᎹ԰⬠䴶ˈབ೒ 2-2 ᠔⼎Ǆ ೒ 2-2 ᓔྟ⬠䴶 ˄1˅㦰ऩᷣǄ㦰ऩᷣᰃ㛑໳ᅲ⦄ϔᅮࡳ㛑ⱘ㦰ऩੑҸǄDreamweaver CS6 ᢹ᳝Ā᭛ӊāǃ 㦰ऩᷣ ᭛ḷᎹ݋ᷣ ⢊ᗕᷣ ᭛ḷにষ Āሲᗻā䴶ᵓ 䴶 ᵓ 㒘

(3)

Ā㓪䕥āǃĀᶹⳟāǃĀᦦܹāǃĀׂᬍāǃĀḐᓣāǃĀੑҸāǃĀキ⚍āǃĀにষāǃĀᐂ ࡽāㄝ 10 Ͼ㦰ऩߚ㉏ˈབ೒ 2-3 ᠔⼎ˈऩߏ䖭ѯ㦰ऩৃҹᠧᓔ݊ᄤ㦰ऩǄDreamweaver CS6 ⱘ㦰ऩࡳ㛑ᵕ݊Єᆠˈ޴Т⎉Ⲫњ᠔᳝ࡳ㛑᪡԰Ǆ ೒ 2-3 㦰ऩᷣ ˄2˅᭛ḷᎹ݋ᷣǄ᭛ḷᎹ݋ᷣЏ㽕ࣙ৿ϔѯᇍ᭛ḷ䖯㸠ᐌ⫼᪡԰ⱘࡳ㛑ᣝ䪂ˈ䗮䖛ऩߏ 䖭ѯᣝ䪂ˈ⫼᠋ৃҹ೼᭛ḷⱘϡৠ㾚೒῵ᓣ䯈䖯㸠ᖿ䗳ߛᤶˈབ೒ 2-4 ᠔⼎Ǆ ೒ 2-4 ᭛ḷᎹ݋ᷣ ˄3˅᭛ḷにষǄ᭛ḷにষЎ䖯㸠ৃ㾚࣪㓪䕥㔥义ⱘЏ㽕ऎඳˈे䆒䅵ऎˈ㔥义Ϟⱘݙᆍ ህ⏏ࡴࠄ䖭䞠䖯㸠㓪䕥ˈৃҹᅲᯊᰒ⼎ᔧࠡ᭛ḷⱘݙᆍǄ⫼᠋ৃҹ䗮䖛ऩߏĀ᭛ḷāᎹ݋ᷣЁ ⱘĀҷⷕāǃĀᢚߚāǃĀ䆒䅵ā੠Āᅲᯊ㾚೒āᣝ䪂ˈߛᤶϡৠⱘ᭛ḷにষᰒ⼎῵ᓣǄ ҷⷕ㾚೒˖೼にষЁাᰒ⼎᭛ḷⱘҷⷕˈᰃϔϾ⫼Ѣ㓪ݭ੠㓪䕥 HTMLǃJavaScriptǃ ᳡ࡵ఼䇁㿔ҷⷕ˄བ PHP ៪ ColdFusion ᷛ䆄䇁㿔(CFML)˅ҹঞӏԩ݊Ҫ㉏ൟҷⷕⱘ ᠟Ꮉ㓪ⷕ⦃๗ˈབ೒ 2-5 ᠔⼎Ǆ ೒ 2-5 ҷⷕ㾚೒ 䆒䅵㾚೒˖ৃ㾚࣪㓪䕥῵ᓣˈ೼䆹㾚೒ЁˈDreamweaver ᰒ⼎᭛ḷⱘᅠܼৃ㓪䕥ⱘৃ 㾚࣪㸼⼎ᔶᓣǄৃⳈ᥹೼䆒䅵㾚೒Ё䕧ܹ᭛ᴀϢᦦܹ೒ڣㄝ㔥义ܗ㋴ˈབ೒ 2-2 ᠔⼎Ǆ ᢚߚ㾚೒˖᭛ḷにষ㹿ᢚߚ៤ϸϾˈϔϾᰒ⼎ҷⷕ㾚೒ˈϔϾᰒ⼎䆒䅵㾚೒ˈབ೒ 2-6᠔⼎Ǆ ᅲᯊ㾚೒˖ৃҹᰒ⼎ᅲᯊᬜᵰˈ㉏ԐѢ೼⌣㾜఼Ёᶹⳟ义䴶ᯊⳟࠄⱘݙᆍǄℸ῵ᓣϟ ϡৃ㓪䕥ݙᆍϢҷⷕǄ 㾚೒ ໮ሣᐩ ᭛ӊㅵ⧚ 乘㾜 W3C 偠䆕 ⌣㾜఼ݐᆍẔ⌟ ৃ㾚࣪ࡽ⧚ ᣛᅮ᭛ḷ㉏ൟ ⹂ᅮৡᄫぎ䯈 HTML᭛ḷ㒧ᵘ

(4)

೒ 2-6 ᢚߚ㾚೒ ᦤ⼎˖qಬನೊ෍rຏມವԅ໒ڴωϢྡྷՇူၽᘭऋ୶ᄯԅ၇ऋ໒ڴྡྷྂd࿙Үྡྷ஭ྑ ྻᘭऋ୶ᄯ၇ऋԅ໒ڴนᆫᄴ໒ڴd ऩߏĀ乘㾜āᣝ䪂 ϟᢝϝ㾦ᔍߎ乘㾜䗝乍㦰ऩˈ䗝ᢽϔ⾡⌣㾜఼ेৃ乘㾜㔥义ᬜᵰˈ བ೒ 2-7 ᠔⼎Ǆ ೒ 2-7 乘㾜㦰ऩ ˄4˅⢊ᗕᷣǄ⢊ᗕᷣ⫼Ѣᰒ⼎ᔧࠡℷ೼㓪䕥ⱘ᭛ḷⱘⳌֵ݇ᙃˈབᔧࠡにষ໻ᇣǃ᭛ḷ ໻ᇣҹঞᔧࠡ䗝ᢽᇍ䈵ⱘᷛㅒˈབ೒ 2-8 ᠔⼎Ǆ ೒ 2-8 ⢊ᗕᷣ ˄5˅Āሲᗻā䴶ᵓǄĀሲᗻā䴶ᵓ⫼Ѣᰒ⼎义䴶Ё䗝Ёᇍ䈵ⱘϔѯሲᗻˈৃҹ䗮䖛Āሲᗻā 䴶ᵓᶹⳟ៪䆒㕂义䴶Ϟܗ㋴ⱘሲᗻǄDreamweaver ⱘĀሲᗻā䴶ᵓߚЎ HTMLǃCSS ሲᗻҹঞ Ā义䴶āሲᗻǄHTML ሲᗻ⫼Ѣ䆒㕂㒧ᵘˈCSS ⫼Ѣ䆒㕂໪㾖ḋᓣˈĀ义䴶āሲᗻ⫼Ѣ䆒㕂ᭈ Ͼ义䴶ⱘሲᗻˈབ೒ 2-9 ᠔⼎Ǆ ೒ 2-9 Āሲᗻā䴶ᵓ HTMLሲᗻ CSSሲᗻ

(5)

ऩߏĀሲᗻā䴶ᵓЁⱘĀ义䴶ሲᗻāᣝ䪂ˈेৃᠧᓔĀ义䴶ሲᗻāᇍ䆱Ḛˈབ೒ 2-10 ᠔⼎Ǆ ೒ 2-10 Ā义䴶ሲᗻāᇍ䆱Ḛ ᇍѢ೼ Dreamweaver Ё߯ᓎⱘ↣Ͼ义䴶ˈ䛑ৃҹՓ⫼Ā义䴶ሲᗻāᇍ䆱ḚᣛᅮᏗሔ੠Ḑ ᓣ䆒㕂ሲᗻǄ೼Ā义䴶ሲᗻāᇍ䆱ḚЁৃҹᣛᅮ义䴶ⱘ咬䅸ᄫԧ㋏߫੠ᄫԧ໻ᇣǃ㚠᱃买㡆ǃ 䖍䎱ǃ䫒᥹ḋᓣঞ义䴶䆒䅵ⱘ݊Ҫ䆌໮ᮍ䴶Ǆ ᦤ⼎˖Dreamweaver CS6 ඔ٢ॴ०ᄵ༉؟ྚੋ೫໿ԅֺ֥ġCSS ݧ HTMLdߙ࿐ರဈ CSS ಁᄢͼ࠿ۤ༉؟ྚੋ೫໿dCSS ၽ܊ੋԅࢻёᄯݖࠩ໻ື຅ߣࠓd ˄6˅䴶ᵓ㒘Ǆ䴶ᵓ㒘Ў⫼Ѣᅲ⦄ᶤѯࡳ㛑ⱘᖿ᥋にষˈ೼ Dreamweaver CS6 咬䅸ⱘ䆒䅵఼ Ꮉ԰ऎᏗሔЁˈ䴶ᵓ㒘ЁЏ㽕᳝ĀᦦܹāǃĀCSS ḋᓣāঞĀAP ܗ㋴ā䴶ᵓˈབ䳔㽕ᠧᓔ݊Ҫ 䴶ᵓˈৃҹ䗮䖛ऩߏĀにষāϟᢝ㦰ऩЁⱘĀৡ⿄āᠧᓔˈ೼䖭䞠䞡⚍ҟ㒡ϔϟĀᦦܹā䴶ᵓǄ Āᦦܹā䴶ᵓЁࣙ৿њৃҹ৥㔥义᭛ḷЁ⏏ࡴⱘ৘⾡ᇍ䈵ˈ՟བ᭛ᄫǃ೒ڣǃ㸼Ḑǃ䍙䫒᥹ǃ㸼ऩㄝǄऩߏĀᦦܹā䴶ᵓЁⱘϟᢝᣝ䪂ˈ೼ϟᢝ߫㸼Ёᰒ⼎᠔᳝ⱘ㉏߿ˈࣙᣀᐌ⫼ǃ Ꮧሔǃ㸼ऩǃ᭄᥂ǃSpryǃjQuery MobileǃInContext Editingǃ᭛ᴀ੠ᬊ㮣།ˈ᳔ᐌ⫼ⱘབ೒ 2-11᠔⼎Ǆ

೒ 2-11 Āᦦܹā䴶ᵓ

2.1.3 Dreamweaver CS6 ۳వ୲ͻ

೼Փ⫼ Dreamweaver 㓪䕥㔥义Пࠡˈ៥Ӏᑨ䆹ᥠᦵ䕃ӊⱘϔѯ෎ᴀ᪡԰ᮍ⊩ˈབᮄᓎ㔥义ǃֱᄬ㔥义ǃᠧᓔ㔥义੠乘㾜㔥义ⱘᬜᵰㄝǄ

(6)

1ĕ໭ߙฉྚ ೼ Dreamweaver Ё߯ᓎ㔥义ⱘᮍᓣ᳝໮⾡Ǆ ೼ਃࡼⱘᓔྟ⬠䴶ऩߏĀᮄᓎāᷣⱘ HTML ህৃⳈ᥹߯ᓎ㔥义ˈ៪㗙ᣝϟᖿ᥋䬂 Ctrl+Nǃ ᠻ㸠Ā᭛ӊā̘ĀᮄᓎāੑҸ䛑ৃᠧᓔĀᮄᓎ᭛ḷāᇍ䆱Ḛˈ䗝ᢽĀぎⱑ义ā̘ĀHTMLā̘ Ā߯ᓎāेৃ߯ᓎ㔥义ˈབ೒ 2-12 ᠔⼎Ǆ ೒ 2-12 ᮄᓎ㔥义 2ĕͬӉฉྚ ᠻ㸠Ā᭛ӊā|ĀֱᄬāੑҸ៪ᣝϟᖿ᥋䬂 Ctrl+Sˈᠧᓔབ೒ 2-13 ᠔⼎ⱘĀ঺ᄬЎāᇍ䆱 Ḛˈ೼ᇍ䆱ḚЁ䗝ᢽ᭛ḷᄬᬒԡ㕂ᑊ䕧ֱܹᄬⱘ᭛ӊৡ⿄ˈऩߏĀֱᄬāᣝ䪂ˈेৃֱᄬ㔥义ˈ བ೒ 2-13 ᠔⼎Ǆ 3ĕӕࢗฉྚ ᠻ㸠Ā᭛ӊā̘ĀᠧᓔāੑҸˈ೼Āᠧᓔāᇍ䆱ḚЁ䗝ᢽ᭛ḷˈऩߏĀᠧᓔāᣝ䪂ेৃ ᠧᓔ᭛ḷˈབ೒ 2-14 ᠔⼎Ǆ ೒ 2-13 ֱᄬ㔥义 ೒ 2-14 ᠧᓔ㔥义 1 2 3 1.䗝ᢽԡ㕂 2.䕧ܹৡ⿄ 3.ऩߏ 1.䗝ᢽ᭛ӊ 2.ऩߏ

(7)

4ĕ၇ऋฉྚ 㔥义㓪䕥དৢৃҹ䗮䖛᭛ḷᎹ݋ᷣϞⱘĀ乘㾜āᣝ䪂䖯㸠乘㾜ǄऩߏĀ乘㾜āᣝ䪂ⱘ ϟᢝᣝ䪂ˈ೼ϟᢝ߫㸼Ё䗝ᢽϔ⾡⌣㾜఼䖯㸠乘㾜ेৃˈབ೒ 2-15 ᠔⼎Ǆ ೒ 2-15 乘㾜㔥义

2.2 ͊Ҭ 2Ὁѹथˁኮေባགú᯸ᛡܹʾ

ӏࡵⳂᷛ˖ҹᅲ՟ᔶᓣ㾘ߦキ⚍㒧ᵘˈ߯ᓎᴀഄキ⚍ˈҹℸᴹњ㾷キ⚍䘏䕥㒧ᵘҹঞᴀ ഄキ⚍߯ᓎⱘᮍ⊩ℹ偸ˈњ㾷キ⚍ㅵ⧚ⱘᮍ⊩ϢݙᆍǄ 2.2.1 ᜻ѳባགፇ౞ ೼䆒䅵ࠊ԰㔥キПࠡˈᑨ߯ᓎϔϾキ⚍ˈ᳔དᰃ㛑໳೼㒌Ϟ㾘ߦキ⚍ⱘ䘏䕥㒘㒛㒧ᵘˈ Փᕫキ⚍᳈ࡴᆍᯧㅵ⧚ˈ䙓ܡ㔥キ᭛ӊ๲໮ৢㅵ⧚⏋хǄ 㔥キⱘ䘏䕥㒧ᵘ㾘ߦ᳝໮⾡ϡৠⱘᮍᓣˈབᣝ✻㔥キⱘࡳ㛑㒧ᵘ㾘ߦˈҹঞᣝ✻᭛ӊⱘ ㉏ൟ㾘ߦㄝǄϔ㠀ᐌ㾕ⱘᰃḍ᥂㔥キⱘࡳ㛑㒧ᵘ䖯㸠߱ℹߦߚˈݡ೼ϡৠⱘࡳ㛑ϟ䴶ᣝ✻᭛ӊ 䖯㸠ߦߚǄDreamweaver ⱘキ⚍ㅵ⧚Ꮉ݋ᦤկњᕜ໮ᮍ֓ⱘࡳ㛑ˈܕ䆌ᇍ䖭ѯ㒘㒛㡃དⱘ᭛ӊ །㒧ᵘ䖯㸠ㅵ⧚Ǆ ᴀ⃵Ḝ՟ҹĀ偈㸠໽ϟāЎЏ乬ˈᣝ✻㔥キⱘࡳ㛑㒧ᵘ䖯㸠㾘ߦˈᵘᓎ㔥キⱘ䘏䕥㒧ᵘˈ བ೒ 2-16 ᠔⼎Ǆ ೒ 2-16 㔥キキ⚍㒧ᵘᬜᵰ೒ 2.2.2 ѹथవڡባག Փ⫼ Dreamweaver ߯ᓎϔϾ㔥キⱘ佪㽕Ꮉ԰ህᰃ䗮䖛㔥キ߯ᓎᎹ݋߯ᓎϔϾキ⚍ˈՓᕫ ᠔᳝ⱘ㔥义䛑᳝ϔϾ䲚Ёⱘᄬᬒԡ㕂ˈৠᯊ֓Ѣ㔥キⱘ㓈ᡸϢㅵ⧚Ǆ 偈㸠໽ϟ㔥キ佪义 ⛁䮼ᮙ␌ ㊒ᔽ␌䆄 ᮙ␌ᬏ⬹ ೼䏃Ϟ 㕢೒ሩ⼎ ೑ݙ␌ ೑໪␌

(8)

߯ᓎキ⚍ⱘℹ偸བϟ˖ ˄1˅ਃࡼ Dreamweaver CS6ˈ೼Āᮄᓎāᷣ䗝ᢽĀDreamweaver キ⚍āˈབ೒ 2-17 ᠔⼎Ǆ ೒ 2-17 ᮄᓎキ⚍ ˄2˅೼ᔍߎⱘĀキ⚍䆒㕂ᇍ䈵āᇍ䆱ḚЁ䆒㕂キ⚍ৡ⿄੠ᴀഄキ⚍᭛ӊ།Ǆ݊Ёキ⚍ৡ ⿄ЎĀ偈㸠໽ϟāˈᴀഄキ⚍᭛ӊ།ᣛᅮЎĀF:\㔥义 2\乍ⳂѠ\偈㸠໽ϟ\āˈ✊ৢऩߏֱᄬˈ བ೒ 2-18 ᠔⼎Ǆ ೒ 2-18 䆒㕂キ⚍ৡ⿄ ᦤ⼎˖ ႿԤ੠ыġಾྡྷّࠧၽ Dreamweaver ႿԤڕसٝ࡮ᄯဈဟႿԤ௕דԅ੠ыēࢶྻಾఉۥ ટٴζӒႿԤ࿉഑ԅᄯำݧ࿧ำēუّ੠ыϢူఉۥЀᆴຂහำߑ੠ອڑ॓d ·ԙႿԤำߑޣġဈဟᄗՇฉႿԅٔંৃēWeb ฉႿԅٔંৃಾᄗͧۃൎပႿԤำߑԅ ંγสᄢē൑ಾྡྷّ๞सӉ҅สᄢdӲՇ࿌ྡྷّฉႿನēDreamweaver ݖߜუّંৃӲᆳӉׂ ൎပႿԤำߑԅંγสᄢd ˄3˅䆒㕂ᅠ៤ৢⱘ᭛ӊにষབ೒ 2-19 ᠔⼎Ǆ

(9)

೒ 2-19 キ⚍᭛ӊにষ

2.2.3 ѹथᎪᮆ஡͈ˁ஡͈݃

⦄೼ⱘキ⚍াᰃϔϾぎⱘ᭛ӊ།ˈ䞠䴶ҔМ䛑≵᳝ˈϟ䴶ᣝ✻キ⚍㾘ߦ㒧ᵘ߯ᓎ㔥义᭛ ӊҹঞᄬᬒ᭛ӊ㋴ᴤⱘ᭛ӊ།Ǆ

᭛ӊǃ᭛ӊ།ⱘੑৡ㾘㣗Ў˖

ϔ㠀佪义᭛ӊৡЎ index.htm ៪㗙 index.html˗བᵰ义䴶ᰃՓ⫼ ASP 䇁㿔㓪ݭⱘˈ䙷 М᭛ӊৡবЎĀindex.aspāǄ

᭛ӊ།ϔ㠀䞛⫼㣅᭛ᇣݭᄫ↡៪Ё᭛ᣐ䷇ঞ㓽ݭੑৡǄ

᭛ӊৡ⿄㒳ϔ⫼ᇣݭⱘ㣅᭛ᄫ↡៪ᣐ䷇ঞ㓽ݭǃ᭄ᄫ੠ϟߦ㒓ⱘ㒘ড়ੑৡǄ

ߚᬃ义䴶ⱘ᭛ӊᄬᬒѢ৘㞾ऩ⣀ⱘ᭛ӊ།Ёˈ䙓ܡ੠݊Ҫ᭛ӊᄬᬒ೼ϔ䍋Ǆབ೒ڣ᭛ ӊᄬᬒѢऩ⣀ⱘⳂᔩϟˈབ imagesǃpics˗ᄬᬒ Flash ᭛ӊⱘ᭛ӊ།ੑৡЎ flash˗ᄬ ᬒ CSS ḋᓣ㸼᭛ӊⱘ᭛ӊ།ੑৡЎ style ៪ CSS˗ᄬᬒ JavaScript 㛮ᴀⱘ᭛ӊ།ੑৡ Ў JSǄ ϔ㠀ᴹ䇈ˈ᭛ӊৡ䞛⫼ҹϟ 4 ⾡ᮍ⊩ੑৡ˖ ∝䇁ᣐ䷇˖䖭ᰃ᳔ㅔऩⱘੑৡᮍ⊩ˈᦤপߎϸϝϾὖᣀᄫˈᇚ∝䇁ᣐ䷇԰Ў᭛ӊৡǄ བĀㅔҟā义䴶ˈ߭ৃҹੑৡЎ jianjie.htmlǄ ᣐ䷇㓽ݭ˖བĀᅶ᳡Ёᖗā义䴶ⱘ᭛ӊৡᰃ kfzx.htmlǄ䖭⾡ᮍ⊩ㅔऩˈैϡ֓Ѣҹ ৢⱘ㓈ᡸˈ䲒ҹ䆄ᖚǄ 㣅᭛㓽ݭ˖䖭⾡ᮍ⊩ৠᣐ䷇㓽ݭϔḋ䲒ҹ䆄ᖚˈϔ㠀䗖⫼Ѣϧ᳝ৡ䆡Ǆབ Active Server Pages䖭Ͼϧ᳝ৡ䆡ϔ㠀⫼ ASP ҷ᳓Ǆ 㣅᭛ॳ᭛˖བᵰ᳝ϔᅮⱘ㣅᭛෎⸔ˈ䙷М䖭⾡ᮍ⊩↨䕗ᅲ⫼ޚ⹂ǄབৃҹᇚĀ݀ৌㅔ ҟā义䴶ੑৡЎ company_introduction.htmlǄ ߯ᓎ᭛ӊϢ㔥义᭛ӊ།ⱘℹ偸བϟǄ 1ĕҗߙ೎ྚำߑူำߑޣ ˄1˅೼ᴀഄ᭛ӊⱘĀキ⚍-偈㸠໽ϟāϞেߏˈᔍߎᖿ᥋㦰ऩབ೒ 2-20 ᠔⼎Ǆ ˄2˅೼ᔍߎⱘᖿ᥋㦰ऩЁ䗝ᢽĀᮄᓎ᭛ӊāੑҸˈ߯ᓎᮄ᭛ӊˈੑৡЎ index.htmlˈे 㔥キ佪义Ǆ ˄3˅೼ᴀഄ᭛ӊⱘĀキ⚍-偈㸠໽ϟāϞেߏˈ೼ᔍߎⱘᖿ᥋㦰ऩЁ䗝ᢽĀᮄᓎ᭛ӊ།ā ੑҸˈЎ㔥キ⏏ࡴᮄ᭛ӊˈੑৡЎ imagesˈ⫼Ѣᄬᬒ index.html 㔥义ⱘ㋴ᴤǄ ߯ᓎᅠ៤བ೒ 2-21 ᠔⼎Ǆ 2ĕҗߙ֝މฉྚำߑူำߑޣ Ўњ֓Ѣㅵ⧚ϢऎߚˈѠ㑻㔥义ⱘ᭛ӊϢ᭛ӊ།ᑨᬒ㕂೼ᇍᑨⱘ᭛ӊݙǄ佪ܜ㽕߯ᓎᄬᬒ Ѡ㑻㔥义ⱘ᭛ӊ།ˈ✊ৢ೼᭛ӊ།ݙ䚼ݡ߯ᓎѠ㑻㔥义ҹঞᄬᬒⳌᑨ㋴ᴤⱘ᭛ӊ།Ǆℹ偸བϟ˖

(10)

೒ 2-20 ᖿ᥋㦰ऩ ೒ 2-21 Џ义߯ᓎᅠ៤ ˄1˅೼ᴀഄ᭛ӊⱘĀキ⚍-偈㸠໽ϟāϞেߏˈ೼ᔍߎⱘᖿ᥋㦰ऩЁ䗝ᢽĀᮄᓎ᭛ӊ།ā ੑҸˈЎ㔥キ⏏ࡴᮄ᭛ӊ།ˈੑৡЎ hottravelˈ⫼ѢᄬᬒĀ⛁䮼ᮙ␌āѠ㑻㔥义Ǆ ˄2˅೼ hottravel ᭛ӊ།Ϟেߏˈ೼ᔍߎⱘᖿ᥋㦰ऩЁ䗝ᢽĀᮄᓎ᭛ӊāੑҸˈᮄᓎ᭛ӊˈ ੑৡЎ hottravel.htmlǄ ˄3˅೼ hottravel ᭛ӊ།Ϟেߏˈ೼ᔍߎⱘᖿ᥋㦰ऩЁ䗝ᢽĀᮄᓎ᭛ӊ།āੑҸˈᮄᓎ᭛ ӊ།ˈੑৡЎ imagesˈ⫼Ѣᄬᬒ hottravel.html 㔥义㋴ᴤǄ 㟇ℸˈĀ⛁䮼ᮙ␌āѠ㑻㔥义߯ᓎᅠ៤ˈབ೒ 2-22 ᠔⼎Ǆ ˄4˅䞡໡ℹ偸˄1˅̚˄3˅ˈߚ߿߯ᓎᄬᬒѠ㑻㔥义Ā㊒ᔽ␌䆄āǃĀᮙ␌ᬏ⬹āǃĀ೼䏃 ϞāǃĀ㕢೒ሩ⼎āⱘ᭛ӊ། wondernoteǃtourstrateǃonwayǃbeauphotoǄᑊ೼Ѡ㑻㔥义᭛ӊ། ϟߚ߿߯ᓎ wondernote.htmlǃtourstrate.htmlǃonway.htmlǃbeauphoto.html Ѡ㑻㔥义ˈᄬᬒⳌ ᑨ㔥义㋴ᴤⱘ᭛ӊ། imagesǄ Ѡ㑻㔥义᭛ӊϢ᭛ӊ།߯ᓎᅠ៤ˈབ೒ 2-23 ᠔⼎Ǆ 3ĕҗߙసމฉྚำߑူำߑޣ ೼㔥义㾘ߦ㒧ᵘЁা᳝ϸϾϝ㑻㔥义ˈ䖭ϸϾϝ㑻㔥义໘ѢѠ㑻㔥义Ā⛁䮼ᮙ␌āϟˈ ߚ߿ЎĀ೑ݙ␌āϢĀ೑໪␌āˈ߯ᓎℹ偸བϟ˖ ˄1˅೼᭛ӊ།ⱘ hottravel Ϟেߏˈ೼ᔍߎⱘᖿ᥋㦰ऩЁ䗝ᢽĀᮄᓎ᭛ӊ།āੑҸˈЎ㔥キ⏏ࡴᮄ᭛ӊ།ˈੑৡЎ intravelˈ⫼ѢᄬᬒĀ೑ݙ␌āѠ㑻㔥义Ǆ ˄2˅೼ intravel ᭛ӊ།Ϟেߏˈ೼ᔍߎⱘᖿ᥋㦰ऩЁ䗝ᢽĀᮄᓎ᭛ӊāੑҸˈᮄᓎ᭛ӊˈ ੑৡЎ intravel.htmlǄ ˄3˅೼ intravel ᭛ӊ།Ϟেߏˈ೼ᔍߎⱘᖿ᥋㦰ऩЁ䗝ᢽĀᮄᓎ᭛ӊ།āੑҸˈᮄᓎ᭛ ӊ།ˈੑৡЎ imagesˈ⫼Ѣᄬᬒ intravel.html 㔥义㋴ᴤǄ 㟇ℸˈĀ೑ݙ␌āϝ㑻㔥义߯ᓎᅠ៤ˈབ೒ 2-24 ᠔⼎Ǆ ˄4˅䞡໡ℹ偸˄1˅̚˄3˅ˈ߯ᓎᄬᬒϝ㑻㔥义Ā೑໪␌āⱘ᭛ӊ། outtravelǄᑊ೼ϝ㑻

(11)

㔥义᭛ӊ།ϟ߯ᓎ outtravel.html ϝ㑻㔥义ˈᄬᬒⳌᑨ㔥义㋴ᴤⱘ᭛ӊ། imagesǄ ೒ 2-22 Ā⛁䮼ᮙ␌āѠ㑻㔥义߯ᓎᅠ៤ ೒ 2-23 ᠔᳝Ѡ㑻㔥义߯ᓎᅠ៤ 㟇ℸˈϝ㑻㔥义᭛ӊϢ᭛ӊ།߯ᓎᅠ៤ˈབ೒ 2-25 ᠔⼎Ǆ ೒ 2-24 Ā೑ݙ␌āϝ㑻㔥义߯ᓎᅠ៤ ೒ 2-25 ᠔᳝ϝ㑻㔥义߯ᓎᅠ៤ 2.2.4 ኮေባག キ⚍ᓎゟৢˈ䖬ৃҹᇍキ⚍䖯㸠㓪䕥ׂᬍǄ ᠻ㸠Āキ⚍ā̘Āㅵ⧚キ⚍āੑҸˈᠧᓔĀㅵ⧚キ⚍āᇍ䆱Ḛˈབ೒ 2-26 ᠔⼎Ǆ

(12)

೒ 2-26 Āㅵ⧚キ⚍āᇍ䆱Ḛ A˖ߴ䰸ᔧࠡ䗝ᅮⱘキ⚍˖ߴ䰸䗝ᢽⱘキ⚍Ǆ B˖㓪䕥ᔧࠡ䗝ᅮⱘキ⚍Ǆऩߏℸᣝ䪂ˈᠧᓔབ೒ 2-18 ᠔⼎ⱘĀキ⚍䆒㕂ᇍ䈵āᇍ䆱 Ḛˈ㓪䕥ׂᬍĀキ⚍ৡ⿄āҹঞĀᴀഄキ⚍᭛ӊ།āǄ C˖໡ࠊᔧࠡ䗝ᅮⱘキ⚍˖໡ࠊ䗝ᢽⱘキ⚍Ǆ D˖ᇐߎᔧࠡ䗝ᅮⱘキ⚍Ǆऩߏℸᣝ䪂ˈᠧᓔབ೒ 2-27 ᠔⼎ⱘĀᇐߎキ⚍āᇍ䆱Ḛˈ 䗝ᢽֱᄬԡ㕂ˈ䕧ܹ᭛ӊৡˈऩߏĀֱᄬāᣝ䪂ेৃᇐߎキ⚍Ǆキ⚍᭛ӊᠽሩৡЎ*.steǄ ೒ 2-27 Āᇐߎキ⚍āᇍ䆱Ḛ ऩߏĀㅵ⧚キ⚍āᇍ䆱ḚЁⱘĀᇐܹキ⚍āᣝ䪂ˈৃҹᇐܹキ⚍Ǆ

2.3 ͊Ҭ 3ὉΎၹ Dreamweaver ѹथʷ˔እӭᎪᮆúMy Zone

ӏࡵⳂᷛ˖Փ⫼ Dreamweaver CS6 䕃ӊࠊ԰ϔϾ↨䕗ㅔऩⱘ㔥义ˈᴹԧ偠ϔϟ㔥义ⱘࠊ ԰䖛⿟ˈ❳ᙝ Dreamweaver CS6 䕃ӊⱘᑨ⫼Ǆ

(13)

2.3.1 ವΓ஍౧࡙ᇨˁѬౢ ᴀḜ՟Փ⫼ Dreamweaver CS6 ࠊ԰ϔϾ My Zone 㔥义ˈ䞛⫼㸼ḐᏗሔᮍᓣǄ Ǐᬜᵰሩ⼎ǐᴀḜ՟᳔㒜ᬜᵰབ೒ 2-28 ᠔⼎Ǆ ೒ 2-28 㔥义᳔㒜ᬜᵰ ǏߚᵤǐᴀḜ՟Փ⫼㸼ḐᏗሔǄҢᬜᵰ೒Ϟৃҹⳟߎˈℸ㔥义ҢϞᕔϟߚЎಯϾ䚼ߚˈ 乊䚼ⱘ bannerˈ✊ৢᰃᇐ㟾ˈݡ৥ϟᰃЏԧݙᆍˈ᳔ৢᰃ⠜ሒ⠜ᴗໄᯢǄ݊Ёᇐ㟾᳝ᷣϗ乍Ǆ ⬅ℸৃᕫ߯ᓎℸ㔥义ⱘ㸼ḐЎϔϾ 4h7 ⱘ㸼Ḑˈ1ǃ3ǃ4 㸠᠔᳝ऩܗḐড়ᑊǄ 2.3.2 ѹथባག ˄1˅ᠻ㸠Āᓔྟā|Ā⿟ᑣā|AdobeDreamweaver CS6 ੑҸਃࡼ䕃ӊǄᠻ㸠Āキ⚍ā̘Āᮄ ᓎキ⚍āੑҸˈᠧᓔĀキ⚍䆒㕂ᇍ䈵āᇍ䆱Ḛˈᇚキ⚍ৡ⿄䆒Ў My Zoneˈ䗝ᢽᴀഄキ⚍᭛ӊ །ᄬᬒԡ㕂བ೒ 2-29 ᠔⼎Ǆ ˄2˅ऩߏĀֱᄬāᣝ䪂Ǆ ˄3˅೼Ā᭛ӊā䴶ᵓЁˈেߏĀキ⚍-My Zoneāˈ೼ᔍߎⱘᖿ᥋㦰ऩЁ䗝ᢽĀᮄᓎ᭛ӊā ੑҸˈᮄᓎ᭛ӊˈੑৡЎ myzone.htmlǄ ˄4˅೼Ā᭛ӊā䴶ᵓЁˈেߏĀキ⚍-My Zoneāˈ೼ᔍߎⱘᖿ᥋㦰ऩЁ䗝ᢽĀᮄᓎ᭛ӊ །āੑҸˈᮄᓎ᭛ӊ།ˈੑৡЎ imagesǄ ˄5˅ᡞ᠔䳔ⱘ೒⠛㋴ᴤᣋ䋱ࠄ images ᭛ӊ།Ё໛⫼Ǆ キ⚍߯ᓎᅠ៤ˈབ೒ 2-30 ᠔⼎Ǆ 2.3.3 ຋ҫЯࠔ ˄1˅ঠߏ myzone.html ᠧᓔ᭛ḷᓔྟ㓪䕥Ǆ ˄2˅ᇚܝᷛᅮԡ೼Ā䆒䅵ā㾚೒Ёˈ೼Āᦦܹā䴶ᵓⱘĀᐌ⫼ā䗝乍वЁऩߏĀ㸼Ḑā

(14)

ᣝ䪂ˈᔍߎĀ㸼Ḑāᇍ䆱Ḛ ˈখ᭄䆒㕂བ೒ 2-31 ᠔⼎Ǆ ೒ 2-29 Āキ⚍䆒㕂ᇍ䈵āᇍ䆱Ḛ ೒ 2-30 My Zone ᓎキᅠ៤ ೒ 2-31 Ā㸼Ḑāᇍ䆱Ḛ 䇈ᯢ˖㸼Ḑⱘᆑᑺᴹ⑤Ѣ㔥义乊䚼ⱘ banner ೒ⱘᆑᑺǄ ˄3˅ऩߏĀ⹂ᅮāᣝ䪂ᦦܹ㸼ḐǄབ೒ 2-32 ᠔⼎Ǆ ೒ 2-32 ᦦܹ㸼Ḑ ˄4˅ᇚܝᷛᬒ೼㄀ϔ㸠㄀ϔϾऩܗЁᣝԣ哴ᷛᎺ䬂৥েᢪࡼˈ䗝Ё㄀ϔ㸠ⱘ᠔᳝ऩܗḐˈ ऩߏĀሲᗻā䴶ᵓⱘĀড়ᑊāᣝ䪂ড়ᑊऩܗḐˈབ೒ 2-33 ᠔⼎Ǆ⫼ৠḋⱘᮍ⊩ড়ᑊ㄀ 3ǃ4 㸠 ⱘ᠔᳝ऩܗḐǄড়ᑊᅠ៤བ೒ 2-34 ᠔⼎Ǆ

(15)

೒ 2-33 ড়ᑊऩܗḐ ೒ 2-34 ऩܗḐড়ᑊᅠ៤ᬜᵰ ˄5˅ᇚܝᷛᅮԡ೼㄀ϔ㸠ⱘऩܗḐݙˈ೼Āᦦܹā䴶ᵓⱘĀᐌ⫼ā䗝乍वЁऩߏĀ೒ڣā ᣝ䪂ˈᠧᓔĀ䗝ᢽ೒ڣ⑤᭛ӊāᇍ䆱Ḛˈབ೒ 2-35 ᠔⼎Ǆ ೒ 2-35 Ā䗝ᢽ೒ڣ⑤᭛ӊāᇍ䆱Ḛ ˄6˅䗝ᢽ䳔㽕ⱘ banner.jpgˈऩߏĀ⹂ᅮāᣝ䪂ˈᔍߎĀ೒ڣᷛㅒ䕙ࡽࡳ㛑ሲᗻāᇍ䆱Ḛˈ བ೒ 2-36 ᠔⼎Ǆ ೒ 2-36 Ā೒ڣᷛㅒ䕙ࡽࡳ㛑ሲᗻāᇍ䆱Ḛ ᳓ᤶ᭛ᴀ˖Ў೒ڣ೼⬅Ѣᶤѯॳ಴ϡ㛑ᰒ⼎ᯊˈ᠔ᰒ⼎ⱘ᭛ᴀ៪ܝᷛᬒ㕂ࠄ೒ڣϞ᠔ ᰒ⼎ⱘ᭛ᴀǄ 䆺㒚䇈ᯢ˖ᔧ⫼᠋ऩߏ೒ڣᯊᰒ⼎ⱘ᭛ӊⱘԡ㕂ˈ៪㗙ऩߏ᭛ӊ།೒ᷛҹ⌣㾜ࠄ䆹᭛ӊǄ ˄7˅ऩߏĀ⹂ᅮāᣝ䪂ˈे೼㄀ϔϾऩܗḐݙᦦܹ banner ೒ڣˈབ೒ 2-37 ᠔⼎Ǆ

(16)

೒ 2-37 ᦦܹ banner ೒ڣ ˄8˅ᣝᬜᵰ೒᠔⼎೼㄀Ѡ㸠ⱘ৘ϾऩܗḐЁߚ߿䕧ܹ᭛ᴀĀ佪义āǃĀ⛁⚍ᮄ䯏āǃĀᖗᚙ ᮹䆄āǃĀ៥ⱘⳌݠāǃĀᴹᅶ⬭㿔āǃĀ䷇Ф⃷䌣āǃĀϟ䕑໽ഄāǄܝᷛᬒ೼ऩܗⱘ䖍Ḛ㒓Ϟৃҹ Ꮊে៪Ϟϟᢪࡼˈ䇗ᭈ৘ϾऩܗḐⱘᆑᑺϢ催ᑺǄ ˄9˅䗝Ёᇐ㟾ᷣ᠔᳝ⱘऩܗḐˈ೼ HTMLĀሲᗻā䴶ᵓⱘĀ䫒᥹āᷣ䕧ܹ#ヺোˈ⏏ࡴ ぎⱘ䍙䫒᥹Ǆ ˄10˅ᣝᬜᵰ೒᠔⼎೼㄀ϝ㸠ⱘऩܗḐЁ䕧ܹ᭛ᴀĀݏ㗕ֱ䰽þঠ䔼ࠊÿᬍ䴽⸈ބໄāˈ ऩߏ Enter ᣝ䪂Ǆ᥹ⴔ䕧ܹϟϔ↉᭛ᴀĀᴎ݇џϮऩԡݏ㗕ֱ䰽ᬍ䴽Ҟᑈজϔ⃵㹿ݭܹњᬓᑰ Ꮉ԰᡹ਞˈᅗᰃℷ೼ࠊᅮЁⱘݏ㗕ֱ䰽乊ሖ䆒䅵Ёⱘ䞡㽕㒘៤䚼ߚǄāˈ⫼ৠḋⱘᮍ⊩䕧ܹᅠ៤ ᠔᳝ⱘ᭛ᴀǄ 䇈ᯢ˖བᵰᛳ㾝᭛ᴀ䕗໮䕧ܹ᜶ˈৃҹ໡ࠊॳྟ㔥义Ёⱘ᭛ᴀˈᮄᓎϔϾĀ䆄џᴀā᭛ ḷˈ✊ৢᡞ᭛ᴀ㉬䌈೼Ā䆄џᴀāЁǄݡҢĀ䆄џᴀāЁ໡ࠊ㉬䌈ࠄ Dreamweaver ЁǄ໡ࠊ ࠄĀ䆄џᴀāЁⱘⳂⱘᰃএᥝॳྟ㔥义Ё䆒㕂ⱘ᭛ᴀḐᓣǄ ˄11˅ᣝᬜᵰ೒᠔⼎೼᳔ৢϔ㸠ⱘऩܗḐЁ䕧ܹ⠜ᴗໄᯢ᭛ᴀ copyright©2014-2020Ǆ 㟇ℸˈ᠔᳝ݙᆍ䕧ܹᅠ↩ˈབ೒ 2-38 ᠔⼎Ǆ ೒ 2-38 ݙᆍ䕧ܹᅠ↩

(17)

2.3.4 ᎿӑᎪᮆ 1ĕྚੋ೫໿ಁᄢ ˄1˅䆒㕂᭛ᄫ໻ᇣǄऩߏĀሲᗻā䴶ᵓϞⱘĀ义䴶ሲᗻāᣝ䪂ˈᠧᓔĀ义䴶ሲᗻāᇍ䆱 Ḛˈ䆒㕂᭛ᴀĀ໻ᇣāЎ 12pxˈབ೒ 2-39 ᠔⼎Ǆ ೒ 2-39 ᭛ᴀ໻ᇣ䆒㕂 ˄2˅䗝ᢽᭈϾ㸼Ḑˈ೼Āሲᗻā䴶ᵓⱘĀᇍ唤āϟᢝ߫㸼Ё䗝ᢽĀሙЁāˈབ೒ 2-40 ᠔⼎Ǆ ೒ 2-40 㸼ḐሙЁ䆒㕂 2ĕਥܤӽ۔ः ᇐ㟾ᷣ乘㾜ᬜᵰབ೒ 2-41 ᠔⼎Ǆ ೒ 2-41 ᇐ㟾ᷣ乘㾜ᬜᵰ ⬅ᬜᵰ೒ৃⶹˈᇐ㟾᳝ᷣ⎵㓓㡆ⱘ㚠᱃㡆ˈ䍙᭛ᴀ买㡆Ўࡴ㉫㪱㡆ˈܝᷛᬒϞএবЎḨ 㑶㡆ˈ≵᳝ϟߦ㒓ˈሙЁǄ ˄1˅䗝Ё᠔᳝ऩܗḐˈऩߏĀሲᗻā䴶ᵓϞⱘĀ㚠᱃买㡆āᣝ䪂䗝ᢽ买㡆៪Ⳉ᥹೼ৢ䴶 ᭛ᴀḚЁ䕧ܹ#ABE967˗Ā∈ᑇā䆒ЎĀሙЁāˈབ೒ 2-42 ᠔⼎Ǆ ೒ 2-42 ऩܗḐሲᗻ䆒㕂 ˄2˅ऩߏĀሲᗻā䴶ᵓϞⱘĀ义䴶ሲᗻāᣝ䪂ˈᠧᓔĀ义䴶ሲᗻāᇍ䆱ḚǄ೼ᎺջⱘĀߚ ㉏ā߫㸼ḚЁ䗝ᢽĀ䫒᥹˄CSS˅ā䗝乍ˈ䆒㕂䍙䫒᥹খ᭄Ǆখ᭄䆒㕂བ೒ 2-43 ᠔⼎Ǆ ˄3˅ऩߏĀ⹂ᅮāᣝ䪂Ǆᇐ㟾ᷣ㕢࣪ᅠ↩Ǆ

(18)

೒ 2-43 䍙䫒᥹ሲᗻ䆒㕂 3ĕਥܤᅖ඘ઝఘ Џԧݙᆍ乘㾜ᬜᵰབ೒ 2-44 ᠔⼎Ǆ ೒ 2-44 Џԧݙᆍ乘㾜ᬜᵰ Џԧݙᆍ㕢࣪ݙᆍ᳝˖᭛ᴀĀݏ㗕ֱ䰽þঠ䔼ࠊÿᬍ䴽⸈ބໄāЎѠ㑻ᷛ乬˗↉㨑᭛ᴀ 佪㸠㓽䖯 2 ᄫヺ˗ऩܗḐ᳝ᅲ㒓üü1 ڣ㋴㉫㒚ǃ⌙♄㡆䖍Ḛ˗ऩܗḐݙᆍᎺে⾏䖍Ḛ㒓᳝ 10 ڣ㋴䯈䎱˗ऩܗḐ᳝ϔ㚠᱃೒ bg.jpgǄ݋ԧ㕢࣪ℹ偸བϟ˖ ˄1˅䗝ᢽ᭛ᴀĀݏ㗕ֱ䰽þঠ䔼ࠊÿᬍ䴽⸈ބໄāˈ೼ HTMLĀሲᗻā䴶ᵓⱘĀḐᓣā ϟᢝ߫㸼Ё䗝ᢽĀᷛ乬 2āˈབ೒ 2-45 ᠔⼎Ǆ ˄2˅ऩܗḐⱘ䖍Ḛ೼Āሲᗻā䴶ᵓЁϡ㛑䆒㕂ˈ㽕೼ CSS 㾘߭ᅮНᇍ䆱ḚЁ䆒㕂Ǆ䗝Ё ऩܗḐˈ೼ CSSĀሲᗻā䴶ᵓⱘĀⳂᷛ㾘߭āϟᢝ߫㸼Ё䗝ᢽĀᮄݙ㘨ḋᓣāˈབ೒ 2-46 ᠔⼎Ǆ ೒ 2-45 Ḑᓣ䆒Ўᷛ乬 ೒ 2-46 ߯ᓎĀᮄݙ㘨ḋᓣā ˄3˅ऩߏĀ㓪䕥㾘߭āᣝ䪂ˈᠧᓔĀ<ݙ㘨ḋᓣ>ⱘ CSS 㾘߭ᅮНāᇍ䆱Ḛˈབ೒ 2-47 ᠔⼎Ǆ ೼Ā<ݙ㘨ḋᓣ>ⱘ CSS 㾘߭ᅮНāᇍ䆱ḚЁ䖯㸠བϟ䆒㕂˖ 1˅ऎഫ˖䆒㕂 Text-indent˄佪㸠㓽䖯˅ⱘሲᗻЎ 2emsˈབ೒ 2-48 ᠔⼎Ǆ

(19)

೒ 2-47 Ā<ݙ㘨ḋᓣ>ⱘ CSS 㾘߭ᅮНāᇍ䆱Ḛ

2˅㚠᱃˖ऩߏ Background-image˄㚠᱃೒˅ৢ䴶ⱘĀ⌣㾜āᣝ䪂ˈᠧᓔĀ䗝ᢽ೒ڣ⑤᭛ ӊāᇍ䆱Ḛˈ䗝ᢽ bg.jpgˈབ೒ 2-49 ᠔⼎Ǆ

೒ 2-48 佪㸠㓽䖯䆒㕂 ೒ 2-49 㚠᱃೒䆒㕂

3˅䖍Ḛ˖䆒㕂 Style˄ḋᓣ˅ⱘሲᗻЎ solid˄ᅲ㒓˅ˈ䆒㕂 Width˄㉫㒚˅ⱘሲᗻЎ 1pxˈ 䆒㕂 Color˄买㡆˅ⱘሲᗻЎ#CCCˈབ೒ 2-50 ᠔⼎Ǆ

4˅ᮍḚ˖೼ padding˄฿ܙǃݙ䖍䎱˅ऎඳপ⍜࣒䗝Āܼ䚼Ⳍৠā໡䗝Ḛˈ䆒㕂 left ੠ right ⱘؐഛЎ 10pxˈབ೒ 2-51 ᠔⼎Ǆ ೒ 2-50 䖍Ḛ䆒㕂 ೒ 2-51 ݙ䖍䎱䆒㕂 ˄4˅ऩߏĀ⹂ᅮāᣝ䪂ǄЏԧݙᆍ㕢࣪ᅠ↩Ǆ 4ĕਥܤ͑ม ⠜ሒ乘㾜ᬜᵰབ೒ 2-52 ᠔⼎Ǆ ೒ 2-52 ⠜ሒ乘㾜ᬜᵰ೒ ⠜ሒ᭛ᴀሙЁˈ㚠᱃Ў⌙♄㡆ˈ催ᑺЎ 50pxǄ 䗝ᢽ⠜ሒऩܗḐˈ೼Āሲᗻā䴶ᵓЁᇚऩܗḐሲᗻĀ催ᑺā䆒Ў 50px˗ᇚĀ∈ᑇā䆒Ў

(20)

ĀሙЁā˗ᇚĀ㚠᱃㡆ā䆒Ў#CCCCCCˈབ೒ 2-53 ᠔⼎Ǆ⠜ሒ㕢࣪ᅠ↩Ǆ ೒ 2-53 ⠜ሒऩܗḐሲᗻ䆒㕂

নᏦጷ˸

ʷǌᤥહᮥ 1ǃ೼ Dreamweaver CS6 Ё߯ᓎᮄⱘ㔥义᭛ḷˈৃҹՓ⫼˄ ˅㒘ড়䬂Ǆ AǃCtrl+M BǃCtrl+N CǃAlt+M DǃAlt+N 2ǃᣝ˄ ˅ࡳ㛑䬂ৃҹᖿ䗳ᠧᓔ⌣㾜఼⌣㾜㔥义ᬜᵰǄ AǃF5 BǃF6 CǃF11 DǃF12 3ǃҹϟϡ㛑Փ⫼Ё᭛ੑৡⱘᰃ˄ ˅Ǆ Aǃ㔥キⱘৡ⿄ Bǃ㔥キЁ㔥义ⱘ义䴶ᷛ乬 Cǃ㔥キЁⱘ᭛ӊ།ৡ DǃЏ义ⱘ㔥义ᷛ乬 4ǃᇍキ⚍ⱘㅵ⧚ࡳ㛑ϡࣙᣀ˄ ˅Ǆ Aǃߴ䰸キ⚍ Bǃ໡ࠊキ⚍ Cǃ⿏ࡼキ⚍ Dǃ㓪䕥キ⚍ 5ǃ೼ DW ⱘĀ᭛ӊā䴶ᵓЁˈҹϟ䇈⊩ℷ⹂ⱘᰃ˄ ˅Ǆ Aǃ䗝ᢽキ⚍ৡ⿄ৢˈᣝ Del 䬂ৃҹᇚ䆹キ⚍ߴ䰸ˈϡᕅડᇍᑨⱘ᭛ӊ੠᭛ӊ། Bǃ䗝ᢽキ⚍ৡ⿄ৢˈᣝ Del 䬂ৃҹᇚ䆹キ⚍ⱘֵᙃঞᇍᑨⱘ᭛ӊ੠᭛ӊ།ߴ䰸 Cǃ䗝ᢽᶤ᭛ӊৢˈᣝ Del 䬂ৃߴ䰸᭛ӊϢᴀキ⚍ⱘ݇㋏ˈ᭛ӊᴀ䑿ᑊ≵᳝ߴ䰸 Dǃ䗝ᢽᶤ᭛ӊৢˈᣝ Del 䬂ৃߴ䰸᭛ӊ 6ǃབᵰᛇ᳈ᤶϔৄ䅵ㅫᴎ㒻㓁䖯㸠㔥キⱘᓔথˈ೼ DW ЁৃՓ⫼ⱘੑҸᰃ˄ ˅Ǆ Aǃ໡ࠊǃᇐܹ Bǃᇐߎǃᇐܹ Cǃᇐߎǃ໡ࠊ Dǃ໡ࠊ ̄ǌእንᮥ 1ǃҔМᰃキ⚍˛߯ᓎᴀഄキ⚍ⱘ԰⫼ᰃҔМ˛ 2ǃㅔ䗄བԩ߯ᓎᴀഄキ⚍Ǆ ઩࡙ᝫጷ Ўњ䖯ϔℹ❳ᙝϢᥠᦵ Dreamweaver CS6 ⱘՓ⫼ˈԧ偠Փ⫼ Dreamweaver CS6 ࠊ԰㔥义 ⱘᮍ⊩ˈ䇋Փ⫼ Dreamweaver CS6 ࠊ԰ᬜᵰབ೒ 2-54 ᠔⼎ⱘ㔥义Ǆ

(21)

೒ 2-54 ᢧሩ㒗д义䴶ᬜᵰ

ℹ偸ᦤ⼎˖

˄1˅㔥义Ёⱘ೒ڣ԰Ў㚠᱃೒ڣ⏏ࡴǄ ˄2˅Փ⫼㸼ḐᏗሔᮍᓣࠊ԰㔥义Ǆ