怎樣用FrontPage軟件編輯HTML帖子 | 音畫(huà)代碼學(xué)堂 - 中國(guó)音畫(huà)家園 - Po...****

清風(fēng)@明月 2010-05-08

展開(kāi)全文

怎樣用FrontPage軟件編輯HTML帖子

新手按順序看完此篇已經(jīng)音畫(huà)入門(mén)
本篇素材源于網(wǎng)絡(luò):部分修改
首先必須有一些必要的輔助工具。
1、最簡(jiǎn)單的首推每臺(tái)電腦附件里肯定有的“記事本”。

記事本是一個(gè)非常有用的工具，我們編輯好的代碼可以貼在記事本里，保存的時(shí)候默認(rèn)格式為文本文件（txt格式），我們可以隨時(shí)修改并保存在其他地方，以免重裝系統(tǒng)造成丟失。

如果我們想看看編輯好的HTML代碼是什么模樣，可以點(diǎn)“記事本”的“另存為”，并在文件名的后面加上后綴“.html”，保存后再點(diǎn)擊打開(kāi)，你可以看到文件不是被“記事本”打開(kāi)而是被“瀏覽器”以網(wǎng)頁(yè)的方式打開(kāi)了。

記事本還可以用來(lái)編輯音樂(lè)連播文件。

記事本還有個(gè)更重要的作用就是：把HTML代碼張貼在記事本里，保存為格式（.html格式），然后上傳到本論壇作為附件，而當(dāng)你點(diǎn)擊附件的鏈接時(shí)，你看到的居然不是文字而是網(wǎng)頁(yè)！這個(gè)功能常常被HTML編輯高手用來(lái)做無(wú)空間個(gè)人網(wǎng)頁(yè)，我們?cè)诮酉聛?lái)的課程將重點(diǎn)介紹這個(gè)非常好玩的做法。

2、還有就是臺(tái)電腦附件里肯定有的“畫(huà)圖”。

畫(huà)圖雖然功能不強(qiáng)大，但可以對(duì)圖片做基本的修改，比如屏幕截圖我們打算在上面加上一些文字或做一些裁減，畫(huà)圖就是最好最簡(jiǎn)單的工具了。

過(guò)眼云煙	2009-02-10 22:10
本部分內(nèi)容設(shè)定了隱藏,需要回復(fù)后才能看到

過(guò)眼云煙	2009-02-10 22:12
本部分內(nèi)容設(shè)定了隱藏,需要回復(fù)后才能看到

過(guò)眼云煙

2009-02-10 22:22

編寫(xiě)一個(gè)最簡(jiǎn)單的單格表格：

<table border="1" width="300" height="50" bordercolor="#FF0000">
<tr>
<td>需要編寫(xiě)在表格內(nèi)的內(nèi)容編寫(xiě)在這里
</td>
</tr>
</table>

這段代碼的含義是：這是一個(gè)邊框粗細(xì)為1像素、寬300像素、高50像素的單格表格，表格里有文字“需要編寫(xiě)在表格內(nèi)的內(nèi)容編寫(xiě)在這里”。

如果是家園直發(fā)應(yīng)該這么寫(xiě):
<table style="border:1px #FF0000 solid; WIDTH: 300px; height:50px">
<tr>
<td>需要編寫(xiě)在表格內(nèi)的內(nèi)容編寫(xiě)在這里
</td>
</tr>
</table>為了便于顯示我在邊框上加了顏色#FF0000和性質(zhì)實(shí)線(xiàn)solid

效果：

需要編寫(xiě)在表格內(nèi)的內(nèi)容編寫(xiě)在這里

過(guò)眼云煙

2009-02-10 23:23

所謂萬(wàn)丈高樓平地起，這段代碼雖然簡(jiǎn)單，卻是一切代碼貼的基礎(chǔ)。再?gòu)?fù)雜、再絢麗的代碼貼，都是從這樣開(kāi)始出發(fā)的。

我們可以再進(jìn)一步實(shí)驗(yàn)：

1、點(diǎn)“代碼”按紐；

2、把代碼“<table style="border:1px #FF0000 solid; WIDTH: 300px; height:50px">
<tr>
<td>需要編寫(xiě)在表格內(nèi)的內(nèi)容編寫(xiě)在這里
</td>
</tr>
</table>”粘貼進(jìn)去；

3、點(diǎn)“設(shè)計(jì)”按紐。

這時(shí)，我們可以看到，FrontPage已經(jīng)把代碼轉(zhuǎn)化成了“所見(jiàn)既所得”的模樣：

需要編寫(xiě)在表格內(nèi)的內(nèi)容編寫(xiě)在這里

然后把鼠標(biāo)放在格子的邊沿，我們可以看到鼠標(biāo)變成了箭頭摸樣,這時(shí)再次按下左鍵拉動(dòng)，可以看到格子出現(xiàn)變化。可以改變表格大小

我們還可以把格子里面的文字重新編輯，比如修改成“向朋友們問(wèn)好！”，并修改字體、大小、顏色、置中等（這些修改都在編輯欄上方有相應(yīng)的工具按鈕），比如修改成這樣：

向朋友們問(wèn)好！

然后再點(diǎn)“代碼”，我們將看到，FrontPage已經(jīng)把我們剛才的操作自動(dòng)修改好了相應(yīng)的代碼：

<TABLE style="border:1px solid #FF0000; WIDTH: 400px; height:120px">
<TBODY>
<TR>
<TD>
<P align=center>
<FONT face=黑體>
<FONT color=#3300ff>
<STRONG>
<FONT size=7>
向朋友們問(wèn)好！
</FONT>
</STRONG>
</FONT>
</FONT>
</P>
</TD>
</TR>
</TBODY>
</TABLE>
　

第一行是表格的樣式，“高120，寬400，框1像素”；

二、三、四行表示表體、一行、一列；

五、六、七、八、九行分別規(guī)定了字體居中、字體、顏色、加粗和字號(hào)。

十一至十九行分別是第一至第九行的結(jié)束語(yǔ)句，注意看，從里到外，標(biāo)簽是成對(duì)出現(xiàn)的。

[attachment=3913]

過(guò)眼云煙

2009-02-10 23:44

1、準(zhǔn)備好素材，也就是準(zhǔn)備填充在邊框空格內(nèi)的背景圖片。

往邊框里填充背景圖片有個(gè)特點(diǎn)，不管圖片大小，HTML會(huì)自動(dòng)將空格填滿(mǎn)，因此你不需要擔(dān)心圖片的大小問(wèn)題，反而因?yàn)橐紤]網(wǎng)絡(luò)傳輸問(wèn)題，圖片小點(diǎn)還好。你可以自己找其他圖片代替。

圖片地址：http://image9.360doc.com/DownloadImg/2010/05/0811/3132759_9.jpg
圖片模樣：

2、打開(kāi)FrontPage，點(diǎn)“設(shè)計(jì)”，在頂部工具欄里點(diǎn)“表格”-“插入表格”
[attachment=3955]
點(diǎn)“表格”，出現(xiàn)如下對(duì)話(huà)框：
[attachment=3957]
修改“行數(shù)”、“列數(shù)”為“1”；修改“單元格襯距”、“單元格間距”為“0”；在“指定高度”方框打勾，選“像素”，修改“400”（修改這項(xiàng)的意義是在邊框里面沒(méi)有內(nèi)容時(shí)能保存一定的高度）；選擇“背景顏色”（目的是當(dāng)背景圖片地址失效后邊框里面依然有顏色而不會(huì)顯得難看）；在“使用背景圖片”方框里打勾，把我們準(zhǔn)備好的背景圖片地址填進(jìn)去，確定。
[attachment=3956]
你將看到，F(xiàn)rontPage的“設(shè)計(jì)”欄里出現(xiàn)了你剛才設(shè)計(jì)的邊框了。
[attachment=3958]

過(guò)眼云煙

2009-02-11 21:23

3、接著點(diǎn)FrontPage的“代碼”凸舌，你將看到你剛才的操作已經(jīng)變成代碼了：
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建網(wǎng)頁(yè) 1</title>
</head>

<body>

<table border="1" width="100%" cellspacing="0" cellpadding="0" bgcolor="#CC0000" background="http://www.**/jiaocai/3.jpg" height="400" id="table1">
<tr>
<td>　</td>
</tr>
</table>

</body>

</html>
但你可以把網(wǎng)頁(yè)編輯所需要的代碼去掉（因?yàn)槲覀儺吘共皇蔷庉嬀W(wǎng)頁(yè)），只要保留表格部分的代碼即可：
<table border="1" width="100%" cellspacing="0" cellpadding="0" bgcolor="#CC0000" background="http://www.**/jiaocai/3.jpg" height="400" id="table1">
<tr>
<td>　</td>
</tr>
</table>
把上面表格重新編寫(xiě)下,就可以在家園直接發(fā)了
<table style="border:1px #CC0000 solid; height:400px" width="100%" cellspacing="0" cellpadding="0" background="http://www.**/jiaocai/3.jpg" id="table1">
<tr>
<td>　</td>
</tr>
</table>
(注意:發(fā)帖的時(shí)候圖片地址里**去掉)
　

效果是
　

過(guò)眼云煙

2009-02-13 15:32

4、看一組代碼: <table style="width:700px; height:400px" background="http://www.**/jiaocai/1.jpg" id="table1">
<tr>
<td>　</td>
</tr>
</table>
但是我們所舉例子的邊框是帶有凸線(xiàn)，并且是越過(guò)發(fā)帖區(qū)的寬屏帖的，這樣我們就需要對(duì)邊框做樣式上的調(diào)整。
在FrontPage“設(shè)計(jì)”欄里編好的邊框上右擊，在出現(xiàn)的對(duì)話(huà)框里點(diǎn)“表格屬性”，出現(xiàn)“插入表格”（上面有圖）對(duì)話(huà)框。點(diǎn)對(duì)話(huà)框下面的“樣式”按鈕，出現(xiàn)“修改格式”對(duì)話(huà)框。
[attachment=4044]
注意看，“ID”欄里有“table1”字樣，表示我們將要修改的表格樣式是對(duì)table1表格修改的。（我說(shuō)這段話(huà)的意思是，大家一定要養(yǎng)成給表格起名字的習(xí)慣，這樣在修改時(shí)有時(shí)很方便。）

在“修改格式”對(duì)話(huà)框里點(diǎn)“格式”按鈕，將出現(xiàn)下拉對(duì)話(huà)框，一共有5個(gè)可選（字體、段落、邊框、編號(hào)方式、定位）。我們先點(diǎn)“邊框”，出現(xiàn)“邊框和底紋”調(diào)整對(duì)話(huà)框。
[attachment=4045]
在對(duì)話(huà)框里的“設(shè)置”欄點(diǎn)“方框”，在“樣式”欄里點(diǎn)“凸線(xiàn)”，選擇顏色，修改寬度為10，襯距全部為20，確定。

這時(shí)，你將看到FrontPage已經(jīng)給剛才的邊框加上凸線(xiàn)了。點(diǎn)“代碼”，把代碼復(fù)制下來(lái)：
<table style="border:10px ridge #990000; padding:20px; width:700px; height:400px" background="http://www.**/jiaocai/1.jpg" id="table1">
<tr>
<td>　</td>
</tr>
</table>
(注意:發(fā)帖的時(shí)候圖片地址里**去掉,我這里是為了便于教材顯示)

過(guò)眼云煙

2009-02-13 15:35

<table style="border:10px ridge #990000; padding:20px; width:700px; height:400px" background="http://www.**/jiaocai/1.jpg" id="table1">
<tr>
<td>　</td>
</tr>
</table>
效果是:

過(guò)眼云煙

2009-02-13 22:51

5、寬屏的實(shí)現(xiàn)。

這是一個(gè)經(jīng)驗(yàn)值。一般來(lái)說(shuō)，論壇發(fā)帖區(qū)左邊的頭像信息欄一般寬220像素，因此我們需要把帖子向左偏移220像素，然后把帖子的寬度修改為980像素。同時(shí)為了露出發(fā)帖人的頭像，又要把帖子向下偏移140像素。還有就是，為了防止底部的發(fā)帖人的簽名檔被遮，還需要在帖子的最后加上至少8個(gè)<br>換行。

重復(fù)前面的樣式調(diào)整過(guò)程，點(diǎn)“修改格式”對(duì)話(huà)框里的“定位”，出現(xiàn)“定位”對(duì)話(huà)框。

在“定位”對(duì)話(huà)框里的“定位樣式”里點(diǎn)“相對(duì)”，在“位置與大小”里的“左邊”框里填上“-220”，在“寬度”框里填上“980”，在“頂部”框里填上“140”，確定。

[attachment=4098]
這是，你在 FrontPage的“設(shè)計(jì)”欄里看不到變化，但你點(diǎn)“預(yù)覽”，你將看到邊框偏移向左向下了，沒(méi)關(guān)系，我們正是要的這個(gè)效果。

還有就是記住在代碼后面加上8個(gè)換行代碼“<br>”。

完成后的代碼如下：

<table style="border:10px ridge #990000; padding:20px; width:980px; height:400px; position:relative; left:-220px; top:140px" background="http://www.**/jiaocai/1.jpg" id="table1">
<tr>
<td>　</td>
</tr>
</table><br><br><br><br><br><br><br><br>

效果是:

過(guò)眼云煙

2009-02-14 21:57

6.第二層邊框的制作:

第一層邊框做好了，等于這個(gè)帖子有了基礎(chǔ)。我們可以接著在這個(gè)基礎(chǔ)上繼續(xù)加上其他的邊框。

接下來(lái)我們學(xué)習(xí)加第二層邊框。與做第一層邊框相比，我們不需再做“寬屏”設(shè)置，因?yàn)樽源艘院蟮倪吙蚨即钶d在第一層邊框之上了。

假設(shè)我們從頭開(kāi)始，所有的編輯都在FrontPage上實(shí)現(xiàn)。

打開(kāi)FrontPage，把“代碼”里的所有默認(rèn)代碼刪掉，把前面我們編好的第一層邊框的代碼填進(jìn)去：

提示：如果你在編輯過(guò)程需要隨時(shí)“預(yù)覽”編輯效果，可把上面代碼第一行的“left:-220px;”臨時(shí)改為“left:0px;”，“top:140px;”臨時(shí)改為“top:0px;”，最后面的“<br>”刪掉，編輯完后再改回來(lái)。

點(diǎn)“設(shè)計(jì)”，可以看到代碼已被解析為圖象了，而我們的目的，就是將要在既有表格里面插入新的表格。

請(qǐng)注意，這時(shí)我們既有的表格（邊框）的單元間距為0，如果我們直接插入新的表格，那么新表格將緊挨老表格，因此，在插入新表格前要設(shè)置老表格的間距，假設(shè)設(shè)置為25。

在既有表格上右擊，在出現(xiàn)的對(duì)話(huà)框里點(diǎn)“表格屬性”（前面有圖），出現(xiàn)“表格屬性”調(diào)整對(duì)話(huà)框，在對(duì)話(huà)框里的“單元格間距”里填上“25”，“單元格寸距”里填上“0”，確定。如圖:
[attachment=4116]

代碼:<table style="border:10px ridge #990000; width:980px; height:400px; position:relative; left:0px; top:0px" background="http://www.**/jiaocai/1.jpg" id="table1" cellspacing="25" cellpadding="0">
<tr>
<td>　</td>
</tr>
</table>

這是，你將在FrontPage的“設(shè)計(jì)”欄里看到既有的邊框里面出現(xiàn)一道白色的虛線(xiàn)框，這個(gè)虛線(xiàn)框告訴編輯者可填充內(nèi)容在虛線(xiàn)框以?xún)?nèi)。

過(guò)眼云煙

2009-02-14 22:29

準(zhǔn)備第二層邊框的背景圖片。

圖片地址：http://www.**/jiaocai/2.jpg
圖片模樣：
　

在虛線(xiàn)框里單擊，點(diǎn)頂部菜單的“表格”-“插入表格”-“表格”，出現(xiàn)“插入表格”對(duì)話(huà)框。這個(gè)過(guò)程與前面編輯第一層邊框的過(guò)程是基本一樣的，所不同的是，我們對(duì)這層邊框做了“亮邊框”和“暗邊框”設(shè)置。

什么叫“亮邊框”和“暗邊框”？

一個(gè)邊框有四個(gè)邊，所謂“亮邊框”指邊框的右邊和下邊的邊框，而“暗邊框”則是指邊框的左邊和上邊的邊框。如果我們給“亮邊框”加上較為明亮的邊框顏色，“按邊框”加上較為灰暗的邊框顏色，這樣就回營(yíng)造一種仿佛這層邊框與下層邊框相比較為“凸出”或較為“凹陷”的立體感覺(jué)，增強(qiáng)帖子的觀賞效果。
[attachment=4117]

按圖做好設(shè)置后，確定。

這時(shí)，點(diǎn)“代碼”，我們將看到新的代碼：

其中蘭色代碼部分就是插入的第二層表格,把第一層表格left:0px; top:0px改為left:-220px; top:140px,家園里發(fā)帖把 border="0"寫(xiě)為 style="border:0px",代碼最后面加上8個(gè)換行代碼“<br>”。(注意:發(fā)帖的時(shí)候圖片地址里**去掉,我這里是為了便于教材顯示)

顯示的效果是:

過(guò)眼云煙

2009-02-14 23:01

依次類(lèi)推,設(shè)計(jì)第三層表格的代碼是:

<table style="border:10px ridge #990000; width:980px; height:400px; position:relative; left:0px; top:0px" background="http://www.**/jiaocai/1.jpg" id="table1" cellspacing="25" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellspacing="15" cellpadding="0" bordercolorlight="#C0C0C0" bordercolordark="#808080" bgcolor="#CC6600" background="http://www.**/jiaocai/2.jpg" height="400" id="table2">
<tr>
<td>
<table border="0" width="100%" cellspacing="20" cellpadding="0" bgcolor="#990000" background="http://www.**/jiaocai/3.jpg" height="400" id="table3">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
其中蘭色代碼部分就是插入的第三層表格,把第一層表格left:0px; top:0px改為left:-220px; top:140px,家園里發(fā)帖把 border="0"寫(xiě)為 style="border:0px",代碼最后面加上8個(gè)換行代碼“<br>”。(注意:發(fā)帖的時(shí)候圖片地址里**去掉,我這里是為了便于教材顯示)

顯示的效果是: {中間插入文字代碼<p align="center"><font color="#FF00FF" size="7">內(nèi)容:中國(guó)音畫(huà)家園歡迎你</font>}

內(nèi)容:中國(guó)音畫(huà)家園歡迎你

表格就說(shuō)到這里,在家園里最好的代碼寫(xiě)作方式參照http://www./read.php?tid-5021.html

過(guò)眼云煙

2009-02-16 15:07

接下來(lái)的工作，就是在邊框的最里層加入我們打算呈現(xiàn)給讀者的內(nèi)容，也就是代碼帖的其他4個(gè)元素：文字、圖片、聲音、影象。

我們繼續(xù)把這個(gè)例子做完他。

準(zhǔn)備圖片，地址：http://www.**/jiaocai/hongqi1.gif

圖片的模樣：

這是一張背景透明圖片，目的是讓圖片粘貼到邊框里面時(shí)能和背景融合在一起。

把前面我們最終得到的邊框代碼

<table style="border:10px ridge #990000; width:980px; height:400px; position:relative; left:-220px; top:140px" background="http://www.**/jiaocai/1.jpg" id="table1" cellspacing="25" cellpadding="0">
<tr>
<td>
<table style="border:0px" width="100%" cellspacing="15" cellpadding="0" bordercolorlight="#C0C0C0" bordercolordark="#808080" bgcolor="#CC6600" background="http://www.**/jiaocai/2.jpg" height="400" id="table2">
<tr>
<td>
<table style="border:0px" width="100%" cellspacing="20" cellpadding="0" bgcolor="#990000" background="http://www.**/jiaocai/3.jpg" height="400" id="table3">
<tr>
<td>
<p align="center"><font color="#FF00FF" size="7">內(nèi)容:中國(guó)音畫(huà)家園歡迎你</font></p></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table><br><br><br><br><br><br><br><br><br><br>

填在FrontPage的“代碼”欄（記得在填入前把默認(rèn)的代碼全部刪掉或者填在<body></body>之間），點(diǎn)“設(shè)計(jì)”，將看到這個(gè)邊框的設(shè)計(jì)狀態(tài)。
[attachment=4143]

在打算插入的圖片上右擊，點(diǎn)“復(fù)制”，然后在FrontPage的邊框里面右擊，點(diǎn)“粘貼”，可看到圖片已粘貼到了邊框里面：

我們看到圖片位置不對(duì)，居左中，可這樣調(diào)整：在邊框里面右擊，點(diǎn)“單元格屬性”，出現(xiàn)“單元格屬性”調(diào)整對(duì)話(huà)框：
[attachment=4144]

在對(duì)話(huà)框的“水平對(duì)齊方式”里選“居中”，“垂直對(duì)齊方式”里點(diǎn)“頂端對(duì)齊”，確定，這時(shí)，粘貼的圖片將移動(dòng)到邊框的上中部。為了不讓圖片過(guò)于靠近頂部，可在圖片左邊點(diǎn)一下，回車(chē)一次，讓圖片走下一點(diǎn)。

再在圖片右邊單擊，回車(chē)幾次，在你打算寫(xiě)字的地方編輯文字，選擇編好的文字，在頂部菜單欄選擇文字的字體、字號(hào)、顏色：
[attachment=4145]

做到這里時(shí)的顯示的代碼是

<table style="border:10px ridge #990000; width:980px; height:400px; position:relative; left:-220px; top:140px" background="http://www.**/jiaocai/1.jpg" id="table1" cellspacing="25" cellpadding="0">
<tr>
<td>
<table style="border:0px" width="100%" cellspacing="15" cellpadding="0" bordercolorlight="#C0C0C0" bordercolordark="#808080" bgcolor="#CC6600" background="http://www.**/jiaocai/2.jpg" height="400" id="table2">
<tr>
<td>
<table style="border:0px" width="100%" cellspacing="20" cellpadding="0" bgcolor="#990000" background="http://www.**/jiaocai/3.jpg" height="400" id="table3">
<tr>
<td align="center">
<img style="border:0px" src="http://www.**/jiaocai/hongqi1.gif" width="205" height="148">
<p align="center"><font color="#FF00FF" size="7">內(nèi)容:中國(guó)音畫(huà)家園歡迎你</font></p></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table><br><br><br><br><br><br><br><br><br><br>

效果是

內(nèi)容:中國(guó)音畫(huà)家園歡迎你

過(guò)眼云煙

2009-02-16 15:45

到這里，可以加入音樂(lè)了。我打算加入的音樂(lè)是《愛(ài)琴海》。

音樂(lè)地址：http://www./jiaocai/aiqinhaii.mp3

加入音樂(lè)有兩種方式：一種是以背景音樂(lè)的方式加入，另一種是以播放器播放的方式加入。

背景音樂(lè)方式加入：

在FrontPage“設(shè)計(jì)”欄框架里右擊，點(diǎn)“網(wǎng)頁(yè)屬性”，出現(xiàn)“網(wǎng)頁(yè)屬性”對(duì)話(huà)框。在對(duì)話(huà)框里的“背景音樂(lè)”的“位置”里填上音樂(lè)地址，確定。

[attachment=4146]

這樣加入的音樂(lè)，看不到播放器，只能聽(tīng)，不便于控制，有時(shí)不太方便。

播放器播放的方式加入：

在打算加入播放器的位置點(diǎn)擊出現(xiàn)鼠標(biāo)后，點(diǎn)頂部菜單欄的“插入”-“Web組件”，出現(xiàn)“插入Web組件”對(duì)話(huà)框。
[attachment=4147]

在對(duì)話(huà)框里的“組件類(lèi)型”里點(diǎn)“高級(jí)控件”，在“選擇一個(gè)控件”里點(diǎn)“ActiveX控件”，然后點(diǎn)“下一步”。

在接著出現(xiàn)的對(duì)話(huà)框里點(diǎn)“自定義”，在“Windows Media Player”選擇框里打勾（其他的可不能打勾），點(diǎn)“完成”，這時(shí)，你可以看到播放器已經(jīng)出現(xiàn)在了我們剛才指定的位置。

在出現(xiàn)的播放器上右擊，在出現(xiàn)的對(duì)話(huà)框里點(diǎn)“ActiveX控件屬性”，出現(xiàn)“Windows Media Player屬性”對(duì)話(huà)框。
[attachment=4148]

對(duì)話(huà)框一共4個(gè)凸舌，在第一個(gè)凸舌“常規(guī)”的“源文件名或URL”欄里把音樂(lè)地址填進(jìn)去，“播放選項(xiàng)”的“自動(dòng)啟動(dòng)”框里打鉤（不打勾則手動(dòng)播放），選擇“播放次數(shù)”（你希望播放幾次就改為幾次），把“音量”拉到最大“，再點(diǎn)第三個(gè)凸舌“Object標(biāo)志”，在“寬度”里填上“400”，“高度”里填上“45”，確定。
[attachment=4149]

這是，播放器的模樣就是默認(rèn)的淺藍(lán)色播放器。

但為了讓顯示效果更酷，可以給播放器加上一個(gè)X光濾鏡使之變成黑白色。

加濾鏡的做法是在播放器代碼的第一行里加入濾鏡參數(shù)style="FILTER: xray()"

顯示的效果是

內(nèi)容:中國(guó)音畫(huà)家園歡迎你

過(guò)眼云煙

2009-02-16 22:48

最后,“層”的運(yùn)用

在網(wǎng)頁(yè)制作里,我們經(jīng)常運(yùn)用到“層”。在“層”里我們幾乎可以加任何音畫(huà)元素.

假加入FLASH了。假如FLASH與前面所加的元素不同，有三個(gè)特點(diǎn)：覆蓋性、疊加性和透明性。

為了實(shí)現(xiàn)覆蓋性和疊加性，必須使用“層”。

我們先準(zhǔn)備好打算覆蓋在帖子上面的FLASH文件。

FLASH文件地址：

http://www./jiaocai/FrontPage11.swf

在FrontPage“設(shè)計(jì)”欄框架的頂部菜單點(diǎn)“插入”-“層”，你將看到在帖子的隨機(jī)位置出現(xiàn)了一個(gè)藍(lán)綠色的小邊框，小邊框的左上角標(biāo)注了“layer1”，這就是剛才插入的ID為“layer1”的“層”。如圖。
[attachment=4155]

把鼠標(biāo)放在“層”的邊緣，你可以看到鼠標(biāo)變成了十字箭頭，表示這時(shí)可以拖動(dòng)“層”。把“層”拖到帖子的左上角，再把鼠標(biāo)放在“層”的由下角調(diào)整點(diǎn)，鼠標(biāo)變成斜向雙箭頭，表示這時(shí)你可以拉動(dòng)“層”放大到你希望的大小。你可以拉大到“層”覆蓋掉帖子。如圖。
[attachment=4156]

在調(diào)整好大小的“層”里單擊出現(xiàn)鼠標(biāo)后，點(diǎn)頂部菜單的“插入”-“Web組件”，出現(xiàn)“插入Web組件”對(duì)話(huà)框。在對(duì)話(huà)框的“組件類(lèi)型”欄里點(diǎn)“高級(jí)控件”，在“選擇一個(gè)控件”欄里點(diǎn)“ActiveX控件”，點(diǎn)“下一步”，點(diǎn)“自定義”，在出現(xiàn)的“自定義ActiveX控件列表”對(duì)話(huà)框里找到“Shockwave Flash Object”，在方框里打勾（其他的控件可不能打勾），點(diǎn)“完成”，出現(xiàn)“選擇文件”對(duì)話(huà)框。

把前面準(zhǔn)備的FLASH文件的某一個(gè)地址填進(jìn)“文件名”欄，點(diǎn)“插入”。
[attachment=4157]

這時(shí)，你可以看到，剛才我們選擇的FLASH文件已經(jīng)插入到“層”里面了。
[attachment=4158]

FLASH插入“層”后，在FLASH文件上右擊，在出現(xiàn)的對(duì)話(huà)框里點(diǎn)“FLASH影片屬性”，出現(xiàn)“FLASH影片屬性”對(duì)話(huà)框，在對(duì)話(huà)框的“外觀”凸舌的“透明”方框打勾，在“寬度”和“高度”的“百分比”選項(xiàng)點(diǎn)擊，把數(shù)字框里的數(shù)字全部改為“100”，“確定”。
[attachment=4159]

這時(shí)，你可以看到插入的FLASH文件已經(jīng)自動(dòng)根據(jù)“層”的大小添滿(mǎn)了。
[attachment=4160]

此時(shí)的FLASH文件由于已經(jīng)在前面的“透明”做了選擇，因此你雖然在“設(shè)計(jì)”模式下看到的FLASH依然不透明，但你只要點(diǎn)“預(yù)覽”，你可以看到，F(xiàn)LASH已經(jīng)透明了。

顯示效果：(由于上面有歌了,我把歌曲地址去掉了)

內(nèi)容:中國(guó)音畫(huà)家園歡迎你

過(guò)眼云煙

2009-02-16 23:04

15樓的顯示效果的代碼是(發(fā)帖時(shí),要把**去掉)
<table style="border:10px ridge #990000; width:980px; height:400px; position:relative; left:-220px; top:140px" background="http://www.**/jiaocai/1.jpg" id="table1" cellspacing="25" cellpadding="0">
<tr>
<td>
<table style="border:0px" width="100%" cellspacing="15" cellpadding="0" bordercolorlight="#C0C0C0" bordercolordark="#808080" bgcolor="#CC6600" background="http://www.**/jiaocai/2.jpg" height="400" id="table2">
<tr>
<td valign="top">
<table style="border:0px" width="100%" cellspacing="20" cellpadding="0" bgcolor="#990000" background="http://www.**/jiaocai/3.jpg" height="400" id="table3">
<tr>
<td align="center">
<div style="position: absolute; width: 868px; height: 280px; z-index: 1; left: 46px; top: 44px" id="layer1">
    <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="100%" height="100%">
        <param name="movie" value="http://www./jiaocai/FrontPage11.swf">
        <param name="quality" value="High">
        <param name="wmode" value="transparent">
        <embed src="http://www./jiaocai/FrontPage11.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="100%" height="100%" quality="High" wmode="transparent"></object>
</div>
<img border="0" src="http://www.**/jiaocai/hongqi1.gif" width="205" height="148">
<p align="center"><font color="#FF00FF" size="7">內(nèi)容:中國(guó)音畫(huà)家園歡迎你</font></p>
<p align="center">
<object style="FILTER: xray()" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="WindowsMediaPlayer1" width="400" height="45">
    <param name="URL" ref value="http://www./jiaocai/aiqinhai.mp3">
    <param name="rate" value="1">
    <param name="balance" value="0">
    <param name="currentPosition" value="0">
    <param name="defaultFrame" value>
    <param name="playCount" value="1">
    <param name="autoStart" value="-1">
    <param name="currentMarker" value="0">
    <param name="invokeURLs" value="-1">
    <param name="baseURL" value>
    <param name="volume" value="50">
    <param name="mute" value="0">
    <param name="uiMode" value="full">
    <param name="stretchToFit" value="0">
    <param name="windowlessVideo" value="0">
    <param name="enabled" value="-1">
    <param name="enableContextMenu" value="-1">
    <param name="fullScreen" value="0">
    <param name="SAMIStyle" value>
    <param name="SAMILang" value>
    <param name="SAMIFilename" value>
    <param name="captioningID" value>
    <param name="enableErrorDialogs" value="0">
</object>
</p></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table><br><br><br><br><br><br><br><br><br><br>
蘭色是"層"的部分,同樣方法可以插入幾個(gè)FLASH

過(guò)眼云煙	2009-02-16 23:05
最后要告訴朋友的是:每組代碼之間在發(fā)帖的時(shí)候最好不要留空,否則可能變形家園朋友,當(dāng)你們按照順序看好每個(gè)過(guò)程,原來(lái)音畫(huà)入門(mén)并不復(fù)雜. 所謂修行在個(gè)人,希望每個(gè)朋友不要學(xué)我,學(xué)而不精,哈哈

斜陽(yáng)	2009-02-25 15:15
來(lái)學(xué)習(xí)。謝謝云煙提供教材

沖浪	2009-03-01 15:55
謝謝老大改天一定學(xué),

一音	2009-03-10 23:22
不一般的教程.

趙姐	2009-03-20 07:27
謝謝??！好想學(xué)習(xí)呀！

沖浪

2009-03-20 13:15

中國(guó)音畫(huà)家園沖浪交作業(yè)

FrontPage2003改修論壇直發(fā)代碼

趙姐	2009-03-21 13:05
我正在研讀，前面的感覺(jué)真好，原來(lái)學(xué)過(guò)的都沒(méi)有這篇寫(xiě)得好，看來(lái)我馬上就要入門(mén)了！謝謝??！

趙姐

2009-03-22 01:44

過(guò)眼云煙管管：我已經(jīng)仔細(xì)研讀了這篇文章，照著，背著做了幾遍，非常有收獲，就按著這個(gè)式樣發(fā)在博客上《..歡迎你》，發(fā)現(xiàn)放光的flash沒(méi)有固定在層上，而是跑到了頁(yè)面的的上邊了。
請(qǐng)問(wèn)老師：這個(gè)現(xiàn)象是層的定位問(wèn)題，還是flash定位問(wèn)題？這剛剛一個(gè)flash就跑了，如果再多用幾個(gè)，定位問(wèn)題就更要有問(wèn)題了。能專(zhuān)題講解一下么？謝謝啦！??！

趙姐

2009-03-22 01:50

中國(guó)音畫(huà)家園歡迎你

趙姐	2009-03-22 01:55
[attachment=4996] 過(guò)眼云煙管管請(qǐng)看，沖浪總版主的發(fā)光就在自己的畫(huà)格里，而我的發(fā)光已經(jīng)在網(wǎng)頁(yè)頂上了，郁悶。我把代碼粘貼在txt文件里，能幫著診斷一下么？

過(guò)眼云煙

2009-03-22 14:38

引用

引用第26樓趙姐于2009-03-22 01:55發(fā)表的 :
[attachment=4996] 過(guò)眼云煙管管請(qǐng)看，沖浪總版主的發(fā)光就在自己的畫(huà)格里，而我的發(fā)光已經(jīng)在網(wǎng)頁(yè)頂上了，郁悶。

我把代碼粘貼在txt文件里，能幫著診斷一下么？

你這個(gè)定位是用的絕對(duì)定位position: absolute; 而不是相對(duì)定位代碼position: relative; 所以它跑到上面了,不是說(shuō)絕對(duì)定位不可以,如果你一定要使用絕對(duì)定位,你就要調(diào)試"層"定位里的left: 106px; top: 111px的值

沖浪	2009-03-22 15:40
我去掉作業(yè)里的音樂(lè)吧從合了

沖浪	2009-03-22 15:46
我對(duì)比了一下你沒(méi)插層FLASH在層里面.不過(guò)版本2000里面是沒(méi)有這個(gè)插層的功能我在單位里的電腦也沒(méi)有.

趙姐	2009-03-22 19:56
太....謝謝過(guò)眼云煙管管和沖浪總版主?。。?！我馬上修改我的代碼，再發(fā)來(lái)看看。不過(guò)我還不太明白，我是插過(guò)層的，還按照教程使flash充滿(mǎn)層的大小，還有絕對(duì)定位與相對(duì)定位在FRONTPAGE 操作中可以選定嗎？還是必須要在代碼方式下人工修改一下呢？

趙姐

2009-03-22 21:12

中國(guó)音畫(huà)家園歡迎你

重新交一下作業(yè)，這是按照兩位老師的指導(dǎo)改動(dòng)的，由于改為相對(duì)定位之后，發(fā)光獨(dú)占了一塊畫(huà)面，怎么也與紅旗重合不了了，不知有什么好方法。于是，我就按照管管的提示調(diào)整了層的位置，現(xiàn)在倒是能把光與紅旗重合起來(lái)，但是，一定還有什么玄機(jī)，我沒(méi)有參透，同樣的代碼，在FP軟件里就不是光與紅旗重合的。

過(guò)眼云煙	2009-03-23 21:47
回 31 樓大膽的做,成功就在眼前,你比我開(kāi)始時(shí),好多了

趙姐	2009-03-23 23:31
謝謝過(guò)眼云煙管管的鼓勵(lì)，我會(huì)努力學(xué)習(xí)。

我想	2009-03-30 21:16
謝謝老師的講解

我想	2009-03-30 21:22
<table style="border:1px #FF0000 solid; WIDTH: 300px; height:50px"> <tr> <td>需要編寫(xiě)在表格內(nèi)的內(nèi)容編寫(xiě)在這里 </td> </tr> </table>

蘇小二	2009-03-31 11:11
學(xué)習(xí)

光玉	2009-04-12 21:45
老師好！每臺(tái)電腦附件里肯定有的“記事本”。這個(gè)“記事本”在哪里？我不清楚。可不要笑我，因我是個(gè)電腦盲，正在摸索。

過(guò)眼云煙	2009-04-12 21:49
引用引用第37樓光玉于2009-04-12 21:45發(fā)表的 : 老師好！每臺(tái)電腦附件里肯定有的“記事本”。這個(gè)“記事本”在哪里？我不清楚?？刹灰ξ?，因我是個(gè)電腦盲，正在摸索。所有程序__附件__記事本

晚來(lái)天欲雪	2009-04-13 20:28
詳細(xì)，耐心，真好！要好好的學(xué)一下。

晚來(lái)天欲雪	2009-04-13 20:32
FrontPage？　我的電腦上沒(méi)有，安裝一下試試。

江南布衣	2009-04-14 21:29
真的很辛苦

山村老人	2009-04-15 13:46
謝謝老師的精細(xì)講解！我是新手，來(lái)學(xué)習(xí)了。請(qǐng)多關(guān)照。

linger	2009-04-15 13:57

tecomdouwei	2009-04-18 15:16
來(lái)學(xué)習(xí)!占個(gè)座位!

淺淺妖	2009-05-01 15:27
原來(lái)我會(huì)的只是個(gè)皮毛,學(xué)習(xí)了.

風(fēng)輕揚(yáng)	2009-05-01 15:48
學(xué)習(xí)一下～

紫陌紅塵	2009-05-07 14:01
為了學(xué)習(xí)只好回貼了。

小蔣	2009-05-09 14:41
我來(lái)學(xué)習(xí)了！

獨(dú)孤求敗	2009-05-14 17:01
認(rèn)真回復(fù)學(xué)習(xí)教程啦~

查看完整版本: [-- 怎樣用FrontPage軟件編輯HTML帖子 --] [-- top --]

Powered by PHPWind v7.5 SP3 Code © 2003-09 PHPWind
Gzip disabled

You can contact us

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：清風(fēng)@明月 > 《我的圖書(shū)館》

舉報(bào)/認(rèn)領(lǐng)