(2013-11-24) 多媒體互動式動態網頁製作第26講

位置: 許惠雯 > 多媒體互動式動態網頁製作[大] (返回課程)

by 許惠雯

2013-11-24 11:13:32, 回應(0), 人氣(1865)

多媒體互動式動態網頁製作第25講

所見即所得網頁編輯器

• 以 word 為例

＊例如"在word中輸入【這是徐某某的網站，歡迎光臨】"文字置中"字體為標楷體"大小為18"粗體"有底線"web版面配置"顯示比例為100％"插入圖片"編輯圖片"儲存檔案類型為homepage.htm"網頁不能編輯要在word中作修正

"word所見畫面即是瀏覽器的畫面(無須運用HTML的語法,而是真接使用WORD的元件來製作畫面,而畫面所見即是瀏覽器所見)

＊為何不用WORD而要運用HTML、CSS、Javascript語法？是因為WORD無法製作互動。

＊WORD只能產生多媒體靜態網頁

設定超連結

• 也就是 <a href="URL">

• 以homepage.htm為例：在圖片上按滑鼠右鍵"【超連結】"輸入網址"contentl.htm"確定"儲存檔案"以Google Chrome開啟檔案"點選圖片"出現”找不到這個網頁” "在word開啟新檔案"右邊選單點選【網頁】"儲存檔案"已篩選的網頁"輸入 contentl.htm"儲存檔案"【是】

• 在word編輯content1.htm"輸入

┌我的志向"反白"【插入】"【超連結】"輸入網址"intent.htm "確定 ┐

│ │

├我的興趣"反白"【插入】"【超連結】"輸入網址"interest.htm"確定 ┤

│ │"

├我的專長"反白"【插入】"【超連結】"輸入網址"profession.htm "確定 ┤

│ │

└ 我的人生觀"反白"【插入】"【超連結】"輸入網址"thought.htm"確定 ┘

"""儲存檔案"【是】"以Google Chrome開啟homepage.htm"點選圖片"會出現下列畫面：

"但點各個選項皆會出現【找不到這個網頁】

"再一次word編輯content1.htm"增加一個選項"友善連結"反白"【插入】"【超連結】"輸入網址"http://www.ouk.edu.tw/index.aspx"確定"儲存檔案"【是】"以Google Chrome開啟homepage.htm"點選圖片"會出現下列畫面：

友善連結到ouk （按此會連到空大網頁）

＊以我的人生觀為例：

若要使每個選向都可以連結到網頁"每個皆要在word開啟新檔案"右邊選單點選【網頁】"儲存檔案"網頁"輸入thought.htm "儲存檔案"【是】

• 在word編輯thought.htm"輸入想要的內容

"以Google Chrome開啟homepage.htm"點選圖片"點選【我的人生觀】即會有畫面出現

看一下 word所產生的原始碼

• 與一般網頁有何差別?

【可在Notepad++看到homepage.htm原始碼】

（參考附件第25講.rtf）

※ 附件

◎ 第25講.rtf

*** <meta name=Generator content="Microsoft Word 11">

--> 說明這一份文件是使用 word所產生的

*** <meta name=Originator content="Microsoft Word 11">

--> 說明這一份文件是使用 word所產生的 (一開始就是)

*** <link rel=File-List href="homepage.files/filelist.xml">

--> 會參考到外部檔 filelist.xml , 它是儲存在 homepage.files 資料夾下.

（下列屬26講的內容）

*** 536x402 【Ps：此為圖檔的size】

--> width=596 height=447

【此圖檔size在word中的變動會影響到原始碼內容的改變】

【參考第25講資料夾homepage1.html】

*** 所見即所得編輯器,可以讓我們以物件拖曳的方式,編輯網頁.

-- 使用 word , 缺點:

1. 會增加額外的 tags

2. 只能編輯靜態, 可以加圖像

*** 使用 HTML, CSS ,Javascript的語法,編寫網頁,優點[s1] :

1. 彈性比較大,不會受限於所見即所得編輯器的物件[s2] .

例如加上所見即所得沒有的物件之對應 tags, 像video, HTML5 的智慧輸入控制項,...

2. 可以加入javascript語法,達成互動與動態.

◎ homepage.htm　

<html xmlns:v="urn:schemas-microsoft-com:vml"

xmlns:o="urn:schemas-microsoft-com:office:office"

xmlns:w="urn:schemas-microsoft-com:office:word"

xmlns="http://www.w3.org/TR/REC-html40">

<head>

<!--[if !mso]>

<style>

v\:* {behavior:url(#default#VML);}

o\:* {behavior:url(#default#VML);}

w\:* {behavior:url(#default#VML);}

.shape {behavior:url(#default#VML);}

</style>

<![endif]-->

<title>這是徐某某的網站，歡迎光臨</title>

<!--[if gte mso 9]><xml>

<w:WordDocument>

<w:SpellingState>Clean</w:SpellingState>

<w:GrammarState>Clean</w:GrammarState>

<w:ValidateAgainstSchemas/>

<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>

<w:IgnoreMixedContent>false</w:IgnoreMixedContent>

<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>

<w:Compatibility>

<w:UseFELayout/>

</w:Compatibility>

<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>

</w:WordDocument>

</xml><![endif]--><!--[if gte mso 9]><xml>

<w:LatentStyles DefLockedState="false" LatentStyleCount="156">

</w:LatentStyles>

</xml><![endif]-->

<style>

<!--

/* Font Definitions */

@font-face

{font-family:新細明體;

panose-1:2 2 3 0 0 0 0 0 0 0;

mso-font-alt:PMingLiU;

mso-font-charset:136;

mso-generic-font-family:roman;

mso-font-pitch:variable;

mso-font-signature:3 137232384 22 0 1048577 0;}

@font-face

{font-family:標楷體;

panose-1:3 0 5 9 0 0 0 0 0 0;

mso-font-charset:136;

mso-generic-font-family:script;

mso-font-pitch:fixed;

mso-font-signature:3 137232384 22 0 1048577 0;}

@font-face

{font-family:"\@標楷體";

panose-1:3 0 5 9 0 0 0 0 0 0;

mso-font-charset:136;

mso-generic-font-family:script;

mso-font-pitch:fixed;

mso-font-signature:3 137232384 22 0 1048577 0;}

@font-face

{font-family:"\@新細明體";

panose-1:2 2 3 0 0 0 0 0 0 0;

mso-font-charset:136;

mso-generic-font-family:roman;

mso-font-pitch:variable;

mso-font-signature:3 137232384 22 0 1048577 0;}

/* Style Definitions */

p.MsoNormal, li.MsoNormal, div.MsoNormal[s3]

{mso-style-parent:"";

margin:0cm;

margin-bottom:.0001pt;

mso-pagination:widow-orphan;

font-size:12.0pt;

font-family:"Times New Roman"[s4] ;

mso-fareast-font-family:新細明體;}

@page Section1

{size:595.3pt 841.9pt;

margin:72.0pt 90.0pt 72.0pt 90.0pt;

mso-header-margin:42.55pt;

mso-footer-margin:49.6pt;

mso-paper-source:0;

layout-grid:18.0pt;}

div.Section1

{page:Section1;}

-->

</style>

<!--[if gte mso 10]>

<style>

/* Style Definitions */

table.MsoNormalTable

{mso-style-name:表格內文;

mso-tstyle-rowband-size:0;

mso-tstyle-colband-size:0;

mso-style-noshow:yes;

mso-style-parent:"";

mso-padding-alt:0cm 5.4pt 0cm 5.4pt;

mso-para-margin:0cm;

mso-para-margin-bottom:.0001pt;

mso-pagination:widow-orphan;

font-size:10.0pt;

font-family:"Times New Roman";

mso-fareast-font-family:"Times New Roman";

mso-ansi-language:#0400;

mso-fareast-language:#0400;

mso-bidi-language:#0400;}

</style>

<![endif]--><!--[if gte mso 9]><xml>

<o:shapedefaults v:ext="edit" spidmax="3074"/>

</xml><![endif]--><!--[if gte mso 9]><xml>

<o:shapelayout v:ext="edit">

<o:idmap v:ext="edit" data="1"/>

</o:shapelayout></xml><![endif]-->

</head>

<p class=MsoNormal align=center style='text-align:center'><b><u><span

style='font-size:18.0pt;font-family:標楷體'>這是徐某某的網站，歡迎光臨</span></u></b></p>

<p class=MsoNormal align=center style='text-align:center'><b><span lang=EN-US

style='font-size:18.0pt;font-family:標楷體'> </span></b></p>[s5]

<p class=MsoNormal align=center style='text-align:center'><b><span lang=EN-US

style='font-size:18.0pt;font-family:標楷體'><a href="content1.htm[s6] "><span

style='color:windowtext;text-decoration:none;text-underline:none'><!--[if gte vml 1]><v:shapetype

id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t"

path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">

<v:stroke joinstyle="miter"/>

<v:formulas>

<v:f eqn="if lineDrawn pixelLineWidth 0"/>

<v:f eqn="sum @0 1 0"/>

<v:f eqn="sum 0 0 @1"/>

<v:f eqn="prod @2 1 2"/>

<v:f eqn="prod @3 21600 pixelWidth"/>

<v:f eqn="prod @3 21600 pixelHeight"/>

<v:f eqn="sum @0 0 1"/>

<v:f eqn="prod @6 1 2"/>

<v:f eqn="prod @7 21600 pixelWidth"/>

<v:f eqn="sum @8 21600 0"/>

<v:f eqn="prod @7 21600 pixelHeight"/>

<v:f eqn="sum @10 21600 0"/>

</v:formulas>

<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>

<o:lock v:ext="edit" aspectratio="t"/>

</v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:354pt;

height:265.5pt'>

<v:imagedata src="homepage.files/image001.jpg" o:title="Blue hills"/>

</v:shape><![endif]--><![if !vml]><img border=0 width=472 height=354

src="homepage.files/image002.jpg"[s7] v:shapes="_x0000_i1025"><![endif]></span></a></span></b></p>

</div>

</body>

</html>

多媒體互動式動態網頁製作第26講

原始碼與內容的對應

再次觀察 word所產生的網頁（參考附件第25講.rtf、homepage1.html）

【一個所見即所得的編輯器所完成的原始碼，跟用HTM的語法一行一行的書寫，其兩者的差異在於可維護的程度。後者易修改;前者只能在word修改，其原始碼的修改不易，不適合動態(互動式)網頁製作，較適合靜態網頁】

去掉 word自加的標籤會如何?

• 儲存檔案時，可以選擇去掉 word 自訂的tag

<點選的是【已篩選的網頁】"是否要去掉"【是】／若選【否】（則不會去掉而是會多一些word才看得懂的語法）【參考thought.htm & thought1.htm】

<去掉 word <沒去掉

所見即所得網頁編輯器

• 以 powerpoint 為例

（參考附件第25講.rtf）

（參考附件）

◎ 食在安全.htmà以 powerpoint製作à【儲存檔案】à檔案類型選擇【網頁】à【儲存】(儲存在第26講資料夾而且會自己產生【食在安全.files】的資料夾)

※ 附件：

◎ homepage1.html

<html>

<head>

</head>

<body>

<center>這是徐某某的網站，歡迎光臨</center> <br>

<a href="content1.html">[s9] <center><img border=0 width=596 height=447

src="homepage.files/image001.jpg" [s10] <center> </a> [s11]

</body>

</html>

◎thought.htm

<html>

<head>

<title>我的人生觀</title>

<style>

<!--

/* Font Definitions */

@font-face

{font-family:新細明體;

panose-1:2 2 3 0 0 0 0 0 0 0;}

@font-face

{font-family:標楷體;

panose-1:3 0 5 9 0 0 0 0 0 0;}

@font-face

{font-family:"\@標楷體";

panose-1:3 0 5 9 0 0 0 0 0 0;}

@font-face

{font-family:"\@新細明體";

panose-1:2 2 3 0 0 0 0 0 0 0;}

/* Style Definitions */

p.MsoNormal, li.MsoNormal, div.MsoNormal

{margin:0cm;

margin-bottom:.0001pt;

font-size:12.0pt;

font-family:"Times New Roman";}

/* Page Definitions */

@page Section1

{size:595.3pt 841.9pt;

margin:72.0pt 90.0pt 72.0pt 90.0pt;

layout-grid:18.0pt;}

div.Section1

{page:Section1;}

-->

</style>

</head>

<p class=MsoNormal align=center style='text-align:center'><b><span

style='font-size:36.0pt;font-family:標楷體;color:blue'>我的人生觀</span></b></p>

<p class=MsoNormal align=center style='text-align:center'><b><span

style='font-size:36.0pt;font-family:標楷體'>人生在世</span></b></p>

<p class=MsoNormal align=center style='text-align:center'><b><span

style='font-size:36.0pt;font-family:標楷體'>有無皆空</span></b></p>

<p class=MsoNormal align=center style='text-align:center'><b><span

style='font-size:36.0pt;font-family:標楷體'>自利利人</span></b></p>

<p class=MsoNormal align=center style='text-align:center'><b><span

style='font-size:36.0pt;font-family:標楷體'>道在其中</span></b></p>

<video src=”test.ogv”></video>[s12]

</div>

</body>

</html>

◎ thought1.htm【綠色代表word本身的編碼】

<html xmlns:o="urn:schemas-microsoft-com:office:office"

xmlns:w="urn:schemas-microsoft-com:office:word"

xmlns="http://www.w3.org/TR/REC-html40">

<head>

<title>我的人生觀</title>

<!--[if gte mso 9]><xml>

<o:DocumentProperties>

<o:Author>sss</o:Author>

<o:LastAuthor>sss</o:LastAuthor>

<o:Revision>2</o:Revision>

<o:TotalTime>2</o:TotalTime>

<o:Created>2013-11-23T22:58:00Z</o:Created>

<o:LastSaved>2013-11-23T22:58:00Z</o:LastSaved>

<o:Pages>1</o:Pages>

<o:Words>3</o:Words>

<o:Characters>23</o:Characters>

<o:Company>west</o:Company>

<o:Lines>1</o:Lines>

<o:Paragraphs>1</o:Paragraphs>

<o:CharactersWithSpaces>25</o:CharactersWithSpaces>

<o:Version>11.9999</o:Version>

</o:DocumentProperties>

</xml><![endif]--><!--[if gte mso 9]><xml>

<w:WordDocument>

<w:SpellingState>Clean</w:SpellingState>

<w:GrammarState>Clean</w:GrammarState>

<w:PunctuationKerning/>

<w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>

<w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery>

<w:ValidateAgainstSchemas/>

<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>

<w:IgnoreMixedContent>false</w:IgnoreMixedContent>

<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>

<w:Compatibility>

<w:SpaceForUL/>

<w:BalanceSingleByteDoubleByteWidth/>

<w:DoNotLeaveBackslashAlone/>

<w:ULTrailSpace/>

<w:DoNotExpandShiftReturn/>

<w:AdjustLineHeightInTable/>

<w:BreakWrappedTables/>

<w:SnapToGridInCell/>

<w:WrapTextWithPunct/>

<w:UseAsianBreakRules/>

<w:DontGrowAutofit/>

<w:UseFELayout/>

</w:Compatibility>

<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>

</w:WordDocument>

</xml><![endif]--><!--[if gte mso 9]><xml>

<w:LatentStyles DefLockedState="false" LatentStyleCount="156">

</w:LatentStyles>

</xml><![endif]-->

<style>

<!--

/* Font Definitions */

@font-face

{font-family:新細明體;

panose-1:2 2 3 0 0 0 0 0 0 0;

mso-font-alt:PMingLiU;

mso-font-charset:136;

mso-generic-font-family:roman;

mso-font-pitch:variable;

mso-font-signature:3 137232384 22 0 1048577 0;}

@font-face

{font-family:標楷體;

panose-1:3 0 5 9 0 0 0 0 0 0;

mso-font-charset:136;

mso-generic-font-family:script;

mso-font-pitch:fixed;

mso-font-signature:3 137232384 22 0 1048577 0;}

@font-face

{font-family:"\@標楷體";

panose-1:3 0 5 9 0 0 0 0 0 0;

mso-font-charset:136;

mso-generic-font-family:script;

mso-font-pitch:fixed;

mso-font-signature:3 137232384 22 0 1048577 0;}

@font-face

{font-family:"\@新細明體";

panose-1:2 2 3 0 0 0 0 0 0 0;

mso-font-charset:136;

mso-generic-font-family:roman;

mso-font-pitch:variable;

mso-font-signature:3 137232384 22 0 1048577 0;}

/* Style Definitions */

p.MsoNormal, li.MsoNormal, div.MsoNormal

{mso-style-parent:"";

margin:0cm;

margin-bottom:.0001pt;

mso-pagination:none;

font-size:12.0pt;

font-family:"Times New Roman";

mso-fareast-font-family:新細明體;

mso-font-kerning:1.0pt;}

span.GramE

{mso-style-name:"";

mso-gram-e:yes;}

/* Page Definitions */

@page

{mso-page-border-surround-header:no;

mso-page-border-surround-footer:no;}

@page Section1

{size:595.3pt 841.9pt;

margin:72.0pt 90.0pt 72.0pt 90.0pt;

mso-header-margin:42.55pt;

mso-footer-margin:49.6pt;

mso-paper-source:0;

layout-grid:18.0pt;}

div.Section1

{page:Section1;}

-->

</style>

<!--[if gte mso 10]>

<style>

/* Style Definitions */

table.MsoNormalTable

{mso-style-name:表格內文;

mso-tstyle-rowband-size:0;

mso-tstyle-colband-size:0;

mso-style-noshow:yes;

mso-style-parent:"";

mso-padding-alt:0cm 5.4pt 0cm 5.4pt;

mso-para-margin:0cm;

mso-para-margin-bottom:.0001pt;

mso-pagination:widow-orphan;

font-size:10.0pt;

font-family:"Times New Roman";

mso-fareast-font-family:"Times New Roman";

mso-ansi-language:#0400;

mso-fareast-language:#0400;

mso-bidi-language:#0400;}

</style>

<![endif]-->

</head>

<p class=MsoNormal align=center style='text-align:center'><b style='mso-bidi-font-weight:

normal'><span style='font-size:36.0pt;font-family:標楷體;color:green'>我的人生觀[s13] <span

lang=EN-US><o:p></o:p></span></span></b></p> <(red)

<p class=MsoNormal align=center style='text-align:center'><b style='mso-bidi-font-weight:

normal'><span style='font-size:36.0pt;font-family:標楷體'>人生在世<span lang=EN-US><o:p></o:p></span></span></b></p>

<p class=MsoNormal align=center style='text-align:center'><span class=GramE><b

style='mso-bidi-font-weight:normal'><span style='font-size:36.0pt;font-family:

標楷體'>有無皆空</span></b></span><b style='mso-bidi-font-weight:normal'><span

lang=EN-US style='font-size:36.0pt;font-family:標楷體'><o:p></o:p></span></b></p>

<p class=MsoNormal align=center style='text-align:center'><b style='mso-bidi-font-weight:

normal'><span style='font-size:36.0pt;font-family:標楷體'>自利<span class=GramE>利</span>人<span

lang=EN-US><o:p></o:p></span></span></b></p>

<p class=MsoNormal align=center style='text-align:center'><b style='mso-bidi-font-weight:

normal'><span style='font-size:36.0pt;font-family:標楷體'>道在其中<span lang=EN-US><o:p></o:p></span></span></b></p>

</div>

</body>

</html>

[s1]缺點是必須懂這些語法

[s2]如果無此物件就不能用

[s3]P的類別作用此一排版樣式

[s4]字型的使用樣式

[s5]font-size 的設定<p></p>改變字型的大小

[s6]超連結設定所在

[s7]圖檔所在

[s8]如果是big5會出現亂碼

[s9]超連結

[s10]圖檔

[s11]製作超連結會有<a></a>的標籤

[s12]在網頁的製作上可加上自己的新標籤

[s13]字體的顏色