標籤：

跟著教材學做邊框

06-18
2011-07-22 07:28:16|分類：裝潢博文區域 |標籤： |字型大小大中小麗人19691、表格的製作（第一層邊框）1.點開"插入表格"圖表(這個是插入表格按鈕

.)2.將"邊框粗細"設置103.選擇邊框顏色 =#1169ee4.選擇背景顏色=#b0bef95.按確認鍵看效果~~~~~~~~~~~~這是第一層表格第二課 在表格中添加文字和圖片添加內容輸入文字後按換行鍵選中文字居中編輯欄下面有一組設置,你看一下,在以後編輯中常用到:"Design"是設計狀態, "VIEW"是預覽狀態, "HTML"是代碼狀態2、學習修改表格的寬度先我們做的第一層邊框,(進入HTML看代碼)<TABLE borderColor=#1169ee cellSpacing=2 cellPadding=3 bgColor=#b0bef9 border=10><TBODY><TR><TD></TD></TR></TBODY></TABLE>現在我們將寬度改width_="60%"<TABLE borderColor=#1169ee cellSpacing=2 cellPadding=3 bgColor=#b0bef9 border=10><TBODY><TR><TD></TD></TR></TBODY></TABLE>3、製作兩層邊框這是上面我做的第一層<TABLE borderColor=#1169ee cellSpacing=2 cellPadding=3 bgColor=#b0bef9 border=10><TBODY><TR><TD></TD></TR></TBODY></TABLE>現在我們做第二層，方法跟1層一樣。添加內容我們將兩層添加在一起，看是什麼效果。方法：用滑鼠選中你做的邊框，點右鍵複製，在第一層邊框中粘貼上，跟文字粘貼一樣添加內容添加內容添加內容簡單嗎？代碼：<TABLE borderColor=#1169ee cellSpacing=2 cellPadding=3 bgColor=#b0bef9 border=10><TBODY><TR><TD><TABLE borderColor=#22ddb8 cellSpacing=2 cellPadding=3 bgColor=#9dfcd5 border=5><TBODY><TR><TD><P align=center></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>等你會做了再教你在代碼中添加邊框怎樣添加表格呢?滑鼠放在這個邊框的邊緣處,(出現一個十字標記),右擊--複製,然後在邊框外空的地方點一下,再把滑鼠放進表格內最靠左邊的位置,(滑鼠進去後,可以用退格鍵試試,把多餘的空格退掉,免得邊框內有空格,邊框會變高.)右擊---粘貼,就出現雙層邊框.重複這樣的操作,做成一個5層邊框如下:能看明白嗎?滑鼠放在這個邊框的邊緣處,(出現一個十字標記),右擊--複製,然後在邊框外空的地方點一下,再把滑鼠放進表格內最靠左邊的位置,(滑鼠進去後,可以用退格鍵試試,把多餘的空格退掉,免得邊框內有空格,邊框會變高.)右擊---粘貼,就出現雙層邊框.重複這樣的操作,退出空格還有一種方法:你進入"HTML"是代碼狀態.將將&nbsp; 這種空格碼刪除掉.你進入代碼中,將&nbsp; 這種空格碼去掉顏色代碼：http://xz1.2000y.net/831437/index.asp?xAction=xReadNews&NewsID=169點擊進入，自由選擇製作多列行表格:修改行列數字.2行:內容內容代碼:<TABLE borderColor=#8e1d77 cellSpacing=15 cellPadding=0 bgColor=#f4b5e7 border=10><TBODY><TR><TD>內容</TD><TR><TD>內容</TD></TR></TBODY></TABLE>4行:內容內容內容內容代碼:<TABLE borderColor=#88225f cellSpacing=10 cellPadding=0 bgColor=#ebaddf border=12><TBODY><TR><TD>內容</TD><TR><TD>內容</TD><TR><TD>內容</TD><TR><TD>內容</TD></TR></TBODY></TABLE>2列:內容內容代碼:<TABLE borderColor=#b11b57 cellSpacing=10 cellPadding=0 bgColor=#f5a3c4 border=10><TBODY><TR><TD>內容</TD><TD>內容</TD></TR></TBODY></TABLE>5列:內容內容內容內容內容代碼:<TABLE borderColor=#991147 cellSpacing=15 cellPadding=0 bgColor=#f7b3ce border=10><TBODY><TR><TD>內容</TD><TD>內容</TD><TD>內容</TD><TD>內容</TD><TD>內容</TD></TR></TBODY></TABLE>行列合併,2行2列內容內容內容內容代碼:<TABLE borderColor=#7a1f56 cellSpacing=10 cellPadding=0 bgColor=#fcbdad border=10><TBODY><TR><TD>內容</TD><TD>內容</TD><TR><TD>內容</TD><TD>內容</TD></TR></TBODY></TABLE>8行3列:內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容代碼:將空格碼刪除掉,太多我就不一個個的刪除了,你做時一定要在代碼中刪除空格碼然後再添加內容.<TABLE borderColor=#f68080 cellSpacing=15 cellPadding=0 bgColor=#fee4de border=10><TBODY><TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR></TBODY></TABLE>第二課 在表格中添加文字和圖片上一課我們學習了怎樣製作表格和熟悉在HTML模式下看自己做表格時自動形成的代碼，結合上一課的基礎我們來學習如何在表格中添加文字和圖片先製作表格:代碼:<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 align=center bgColor=#f394cd border=15><TBODY><TR><TD>&nbsp;</TD></TR></TBODY></TABLE>我們將邊框粗細設置15（border=15）、單元間距設置為20（cellSpacing=20 ）、單元邊距設置2（cellPadding=2）一、在表格中添加文字1、用滑鼠點表格的中間處，你看到游標在閃動，這時你就能寫入文字了，也可以複製粘貼文字。2、編輯表格中的文字將滑鼠放到表格中文字的最前面，點擊，然後橫拖滑鼠選中，你看到字的背景顏色是藍色時你就可以操作了。3、編輯文字居中：點居中圖標字體：選擇你喜歡的字體，有很多選項字型大小：論壇中的編輯器是數字越大字也就越大。字體顏色：點開A自由選色，滿意為止4、我們現在要在表格中輸入「寂寞時上網來看我」看編輯效果：寂寞時上網來看我寂寞時上網來看我寂寞時上網來看我寂寞時上網來看我代碼：<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 align=center bgColor=#f394cd border=15><TBODY><TR><TD><P align=center>&nbsp;<FONT color=#6b0c45 size=6>寂寞時上網來看我</FONT></P></TD></TR></TBODY></TABLE>二、在表格中插入圖片插入圖片方法有三種：1、直接插入法。將滑鼠放在你選好的圖片上，點右鍵，複製然後粘貼到你的表格中，看效果：粘貼圖片

2、用編輯器插入法選擇好圖片，將滑鼠放在圖片中點右鍵，點屬性，複製圖片地址；在編輯器里點開「插入圖片」圖標，將你剛複製過的地址粘貼到信息欄里，按確定，看是下面的格式。[*IMG]http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_3.gif[/IMG*][*IMG]http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_3.gif[/IMG*]你做時將*字去掉看效果

3、在html格式下插入圖片代碼及圖片地址帖圖基本格式如下：<*IMG src="圖片連接URL地址"><*IMG> 稱圖形標記，主要用來插入圖形標記。方法：在表格中輸入「內容」兩字，點開html將你編輯好的代碼及圖片地址粘貼上，看代碼：<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 align=center bgColor=#f394cd border=15><TBODY><TR><TD>內容</TD></TR></TBODY></TABLE>內容我們現在添加代碼和圖片，你做時去掉*符號<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 align=center bgColor=#f394cd border=15><TBODY><TR><TD><*IMG src=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_4.gif><*IMG></TD></TR></TBODY></TABLE>

居中很重要！滑鼠點圖片按居中鍵在代碼中添加高度代碼與設置背景寬高:<TABLE borderColor=#EE1169 height=300 cellSpacing=2 cellPadding=3 width_="58%" bgColor=#ffffff background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_23.gif border=1><TBODY><TR><TD>&nbsp;</TD></TR></TBODY></TABLE>圖片<*IMG> 的一般參數設定：例如 <*img src="logo.gif" width_=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">src="logo.gif"圖片來源，接受 .gif, .jpg 及 .png 格式，width_=100 height=100設定圖片大小，此寬度及高度一般採用 pixels 作單位。通常只設為圖片的真實 大小，以免失真，若需要改圖片大小最好使用圖像編輯工具。（改變大小的寬和高與原圖的寬和高要成正比例，圖片最好是改小不改大，以免失真。）hspace=5 vspace=5設定圖片邊沿空白，以免文字或其它圖片貼近。hspace 是設定圖片左右的空間， 是設定圖片上下的空間，高度採用 pixels 作單位。border=2圖片邊框厚度align="top"調整圖片旁邊文字的位置，你可以控制文字出現在圖片的偏上方、中間、底部、 左右等，可選值：top, middle, bottom, left, right，內定為 botom。Netscape 還支持 texttop, baseline, absmiddle, absbottom，texttop 表示圖片和文字依頂線對齊，baseline 表示圖片對齊到目前文字行底線值，absmiddle 表示圖片對齊到目前文字行絕對中央，absbottom 表示圖片對齊到目前文字行絕對底部，（絕對底部是指它考慮到比如 y 、g、q 等字的下邊）。alt="Logo of PenPal Garden"這是用以描述該圖形的文字，若使用文字瀏覽器，由於不支持圖片，這些文字 將會代替圖片被顯示。若支持圖片的瀏覽器，當滑鼠移至圖片上該文字也會顯示。lowsrc="pre_logo.gif"設定先顯示低解析度的圖片，若加入的是一張很大的圖片，下載要很長的時間，這張低 解析度的圖片會先被顯示以免瀏覽者失去興趣，通常是原圖的黑白版本。例1：原代碼：<*IMG border=0 height=92 src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width_=130>　普通插入普通插入

代碼：<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 align=center bgColor=#f394cd border=15><TBODY><TR><TD><*IMG border=0 height=92 src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width_=130></TD></TR></TBODY></TABLE>例2：<*img src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width_=130 height=92 border=0 hspace=10 vspace=20"> 設定上下左右空白位置設定上下左右空白位置

代碼：<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 align=center bgColor=#f394cd border=15><TBODY><TR><TD><P><*img src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width_=130 height=92 border=0 hspace=10 vspace=20"> </P></TD></TR></TBODY></TABLE>例3：<*img src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width_=130 height=92 border=4 align=middle>設定圖片中間對齊，邊框厚度為 4設定圖片中間對齊，邊框厚度為 4

代碼:<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 align=center bgColor=#f394cd border=15><TBODY><TR><TD><P><*img src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width_=130 height=92 border=4 align=middle></P></TD></TR></TBODY></TABLE><BR>例4：<*img src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width_=180 height=152 border=0> 放大了的圖片放大了的圖片

代碼:<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 align=center bgColor=#f394cd border=15><TBODY><TR><TD><P><*img src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width_=180 height=152 border=0></P></TD></TR></TBODY></TABLE><BR><BR>例5：<*img src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width_=130 height=92 border=0 align=right>設定圖片靠右

代碼:<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 align=center bgColor=#f394cd border=15><TBODY><TR><TD><P><*img src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" width_=130 height=92 border=0 align=right></P></TD></TR></TBODY></TABLE><BR><BR>居中插入:

代碼:<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 align=center bgColor=#f394cd border=15><TBODY><TR><TD><P align=center><IMG src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_5.jpg" border=0></P></TD></TR></TBODY></TABLE><BR><BR>圖片縮邊添加法 :將做好的邊框修改邊距,我將邊距和間距都設置為0cellSpacing=0 cellPadding=0邊框粗細設置10 <border=10>將表格的寬度設置width_="60%"修改過的代碼:<TABLE borderColor=#8a1040 cellSpacing=0 cellPadding=0 width_="60%" align=center bgColor=#f394cd border=10><TBODY><TR><TD><P></P></TD></TR></TBODY></TABLE></P>看我做的看我做的

（第三課)常用參數識別常用參數識別如下：<TABLE align=center background="帖子背景圖" border=0 cellPadding=0 cellSpacing=0 borderColor=#ffff00 ><TBODY><TR><TD>帖子內容，文字或圖片.....</TD></TR></TBODY></TABLE><TABLE> 的參數設定（常用）：<table border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">註解：width_="100"表格寬度，接受絕對值（如 80）及相對值（如 80%）。border="1"表格邊框的厚度，不同瀏覽器有不同的內定值，故請指明。cellspacing="2"表格格線的厚度align="CENTER"表格的擺放位置（水平），可選值為： left, right, centervalign="TOP".表格內內容的對齊方式（垂直），可選值為： top, middle, bottom。background="myweb.gif"表格的背景圖片，與 bgcolor 不要同用。bgcolor="#0000FF"表格的底色，與 background 不要同用bordercolor="#CF0000"表格邊框顏色bordercolorlight="#00FF00"表格邊框向光部分的顏色bordercolordark="#00FFFF"表格邊框背光部分的顏色，使用 bordercolorlight 或 bordercolordark 時 bordercolor 將會失效。cols="2"表格欄位數目，只是讓瀏覽器在下載表格時先畫出整個表格而已。貼圖格式帖圖基本格式如下：<IMG src="圖片連接URL地址"><IMG> 稱圖形標記，主要用來插入圖形標記。<IMG> 的一般參數設定：例如 <img src="logo.gif" width_=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">src="logo.gif"圖片來源，接受 .gif, .jpg 及 .png 格式，前兩者通行已久，後者則由 96 年開始發展， 於未來取代前兩者。若圖片檔與該 html 檔同處一目錄則只需寫上檔案名稱，否則 必須加上正確的路徑，相對或絕對均可。width_=100 height=100設定圖片大小，此寬度及高度一般採用 pixels 作單位。通常只設為圖片的真實 大小，以免失真，若需要改圖片大小最好使用圖像編輯工具。（改變大小的寬和高與原圖的寬和高要成正比例，圖片最好是改小不改大，以免失真。）hspace=5 vspace=5設定圖片邊沿空白，以免文字或其它圖片貼近。hspace 是設定圖片左右的空間， 是設定圖片上下的空間，高度採用 pixels 作單位。border=2圖片邊框厚度align="top"調整圖片旁邊文字的位置，你可以控制文字出現在圖片的偏上方、中間、底部、 左右等，可選值：top, middle, bottom, left, right，內定為 botom。Netscape 還支持 texttop, baseline, absmiddle, absbottom，texttop 表示圖片和文字依頂線對齊，baseline 表示圖片對齊到目前文字行底線值，absmiddle 表示圖片對齊到目前文字行絕對中央，absbottom 表示圖片對齊到目前文字行絕對底部，（絕對底部是指它考慮到比如 y 、g、q 等字的下邊）。alt="Logo of PenPal Garden"這是用以描述該圖形的文字，若使用文字瀏覽器，由於不支持圖片，這些文字 將會代替圖片被顯示。若支持圖片的瀏覽器，當滑鼠移至圖片上該文字也會顯示。lowsrc="pre_logo.gif"設定先顯示低解析度的圖片，若加入的是一張很大的圖片，下載要很長的時間，這張低 解析度的圖片會先被顯示以免瀏覽者失去興趣，通常是原圖的黑白版本。1HTML 標記一覽<HTML> ● 文件聲明 讓瀏覽器知道這是 HTML 文件<HEAD> ● 開頭 提供文件整體資訊<TITLE> ● 標題 定義文件標題，將顯示於瀏覽頂端<BODY> ● 本文 設計文件格式及內文所原代碼<!--註解--> ○ 說明標記 為文件加上說明，但不被顯示<P> ○ 段落標記 為字、畫、表格等之間留一空白行<BR> ○ 換行標記 令字、畫、表格等顯示於下一行<HR> ○ 水平線 插入一條水平線<CENTER> ● 居中 令字、畫、表格等顯示於中間 反對<PRE> ● 預設格式 令文件按照原始碼的排列方式顯示<DIV> ● 區隔標記 設定字、畫、表格等的擺放位置<NOBR> ● 不折行 令文字不因太長而繞行<WBR> ● 建議折行 預設折行部位<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 bgColor=#ffffff border=1><TBODY><TR><TD>&nbsp;</TD></TR></TBODY></TABLE>&nbsp;空格碼cellspacing="2" 表格格線的厚度border=1>邊框粗細邊框的寬度borderColor=#cccccc 邊框顏色bgColor=#ffffff 背景顏色cellPadding=3邊距(第四課)表格中添加圖片代碼製作精美邊框前三節課我們學習了表格製作和代碼的識別,今天我們來學習在表格中如何添加圖片代碼製作精美的網頁(邊框)。首先我們找來製作邊框素材:邊框素材1、http://tietu.znrsw.com/dispbbs.asp?boardID=9&ID=14857&page=1邊框素材2、http://tietu.znrsw.com/dispbbs.asp?boardID=9&ID=14584&page=1http://tietu.znrsw.com/dispbbs.asp?boardID=9&ID=12355&page=3

1、打開個發主題帖子編輯欄2、點插入表格不用設置 （默認設置即可）添加內容3、轉換為HTML模式，邊框變為代碼如下：<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 bgColor=#ffffff border=1><TBODY><TR><TD>內容</TD></TR></TBODY></TABLE>4、修改邊框和背景顏色代碼:http://xz1.2000y.net/831437/index.asp?xAction=xReadNews&NewsID=169代碼如下:<TABLE borderColor=#EE7600 cellSpacing=2 cellPadding=3 bgColor=#FF82AB border=1><TBODY><TR><TD>內容</TD></TR></TBODY></TABLE>5、添加圖片代碼background=「圖片地址」代碼如下：<TABLE borderColor=#EE7600 cellSpacing=2 cellPadding=3 bgColor=#FF82AB 此處添加圖片邊框代碼 border=1><TBODY><TR><TD>添加內容</TD></TR></TBODY></TABLE>6、把代碼稍微修改一下換上代碼background= 及圖片地址，把border=1改為border=0 ，cellSpacing=2 把2修改得大一點，比如20 ，數越大，邊框越寬7、添加圖片代碼與圖片地址<TABLE borderColor=#EE7600 cellSpacing=2 cellPadding=3 bgColor=#FF82AB background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_7.jpg border=1><TBODY><TR><TD>添加內容</TD></TR></TBODY></TABLE>8、這是第一層，轉換為DESIGN模式，看一下效果第一層的全代碼：<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 bgColor=#FF82AB background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_7.jpg border=0><TBODY><TR><TD>添加內容</TD></TR></TBODY></TABLE>看效果：添加內容我們接著做第二層：1。把第一層的上半部分複製，<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 background=http://bbs.sucaiw.com/UploadFile/2004159451140157.jpg border=0><TBODY><TR><TD>我們將圖片地址修改一下2、然後稍作修改就可以了 。<TABLE borderColor=#EE7600 cellSpacing=1 cellPadding=3 background=http://bbs.sk66.net/UploadFile/2005-2/20052442518140.gif border=0><TBODY><TR><TD>cellSpacing=1 把原來的20改為了1。這是第二層 。看效果了：（要記得轉換一下模式）前兩層的全代碼：<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_7.jpg border=0><TBODY><TR><TD><TABLE borderColor=#EE7600 cellSpacing=1 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_8.jpg border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>同樣的方法做第三層第三層的代碼是<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_9.jpg border=0><TBODY><TR><TD>不用發出，你轉換一下模式就可以看出效果了前三層全代碼如下：<TABLE borderColor=##EE7600 cellSpacing=20 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_7.jpg border=0><TBODY><TR><TD><TABLE borderColor=##EE7600 cellSpacing=1 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_8.jpg border=0><TBODY><TR><TD><TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_9.jpg border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>七層邊框：第四層跟第二層一樣 ，第五層跟第一層一樣 ，第六層跟第二層還一樣 ，把原來的代碼依次複製過來就可以了。（還可以自由組合）都複製過來看看效果：<TABLE borderColor=#0e7600 cellSpacing=20 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_7.jpg border=0><TBODY><TR><TD><TABLE borderColor=#0e7600 cellSpacing=1 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_8.jpg border=0><TBODY><TR><TD><TABLE borderColor=#ee7600 cellSpacing=20 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_9.jpg border=0><TBODY><TR><TD><TABLE borderColor=#0e7600 cellSpacing=1 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_10.jpg border=1><TBODY><TR><TD><TABLE borderColor=#0e7600 cellSpacing=20 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_7.jpg border=0><TBODY><TR><TD><TABLE borderColor=#0e7600 cellSpacing=1 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_8.jpg border=0><TBODY><TR><TD><TABLE borderColor=#ee7600 cellSpacing=1 cellPadding=0 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_11.jpg border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

我們做八層邊框，再複製一層代碼過來，然後換上背景地址就OK了。最後一層代碼如下：<TABLE borderColor=##EE7600 cellSpacing=1 cellPadding=0 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_9.jpg border=0><TBODY><TR><TD>內容</TD></TR></TBODY></TABLE>讓我們一起看看八層邊框組成的效果吧：

代碼：<TABLE borderColor=#0e7600 cellSpacing=20 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_7.jpg border=0><TBODY><TR><TD><TABLE borderColor=#0e7600 cellSpacing=1 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_8.jpg border=0><TBODY><TR><TD><TABLE borderColor=#ee7600 cellSpacing=20 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_9.jpg border=0><TBODY><TR><TD><TABLE borderColor=#0e7600 cellSpacing=1 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_10.jpg border=1><TBODY><TR><TD><TABLE borderColor=#0e7600 cellSpacing=20 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_7.jpg border=0><TBODY><TR><TD><TABLE borderColor=#0e7600 cellSpacing=1 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_8.jpg border=0><TBODY><TR><TD><TABLE borderColor=#ee7600 cellSpacing=10 cellPadding=0 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_11.jpg border=0><TBODY><TR><TD><P align=center><FONT color=#dd226d size=6><STRONG><TABLE borderColor=#ee7600 cellSpacing=20 cellPadding=3 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_9.jpg border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE></STRONG></FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>(第五課)如何在網頁中添加音樂代碼與音樂地址音樂添加代碼與音樂地址:http://xz1.2000y.net/831437/index.asp?xAction=xReadNews&NewsID=160載入音樂基本語法：<EMBED SRC="音樂文件地址">常用屬性如下：src="your.mid"設定 midi 檔案及路徑，可以是相對或絕對。autostart=true是否在音樂檔下載完之後就自動播放。true 是，false 否 (內定值)。loop="true"是否自動反覆播放。LOOP=2 表示重複兩次，true 是， false 否。HIDDEN="true"是否完全隱藏控制畫面，true 為是，no 為否 (內定)。STARTTIME="分:秒"設定歌曲開始播放的時間。如 STARTTIME="00:30" 表示從第30秒處開始播放。VOLUME="0-100"設定音量的大小，數值是0到100之間。內定則為使用系統本身的設定WIDTH="整數" 和 HIGH="整數"設定控制面板的高度和寬度。(若 HIDDEN="no")ALIGN="center"設定控制面板和旁邊文字的對齊方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottomCONTROLS="smallconsole"設定控制面板的外觀。預設值是 console。console 一般正常面板smallconsole 較小的面板playbutton 只顯示播放按鈕pausecutton 只顯示暫停按鈕stopbutton 只顯示停止按鈕volumelever 只顯示音量調節按鈕<EMBED SRC="midi.mid" autostart=true hidden=true loop=true>作為背景音樂來播放，隱藏了播放器。例二：<EMBED SRC="midi.mid" loop=true width_=145 height=60>出現控制面板了，你可以控制它的開與關，還可以調節音量的大小。註明：可用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及 新版的 IE 都支持。IE中的的背景音樂代碼如下：<bgsound src="音樂文件地址" loop=#>#=循環數註明：這種背景音樂格式，只有在IE瀏覽器中才可以聽到。一般用來插入wav wma mid mp3等格試的音樂。例一：<EMBED SRC="midi.mid" autostart=true hidden=true loop=true>作為背景音樂來播放，隱藏了播放器。例二：<EMBED SRC="midi.mid" loop=true width_=145 height=60>出現控制面板了，你可以控制它的開與關，還可以調節音量的大小。註明：可用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及 新版的 IE 都支持。IE中的的背景音樂代碼如下：<bgsound src="音樂文件地址" loop=#>#=循環數註明：這種背景音樂格式，只有在IE瀏覽器中才可以聽到。一般用來插入wav wma mid mp3等格試的音樂。在論壇做帖常用格試如下：一：<EMBED height=200 src=音樂文件地址 type=audio/x-pn-realaudio-plugin width_=200 autostart="true" controls="IMAGEWINDOW,ControlPanel,StatusBar" console="Clip1"></EMBED>說明：一般用來插入mp3 rm ra ram asf mid 等音樂文件，如果要隱藏播放器，把width和height的數值改成0或者1就可以了。二：<bgsound src="音樂文件地址" loop=3>說明：一般用來插入wav wma mid mp3等格試的音樂文件。我們來試一下,音樂地址:http://qhc.tsxx.net/UploadFile/2005-5/200556103557248.swf代碼:<TABLE borderColor=#be310e cellSpacing=20 cellPadding=0 width_="60%" bgColor=#ffffff border=10><TBODY><TR><TD><EMBED height=360src=http://qhc.tsxx.net/UploadFile/2005-5/200556103557248.swf type=audio/x-pn-realaudio-plugin width_=500 autostart="true" controls="IMAGEWINDOW,ControlPanel,StatusBar" console="Clip1"></EMBED></TD></TR></TBODY></TABLE>插入方法有很多種，我來向大家介紹幾種常用的。1、製作好網頁，2、寫好文字或標題，3、粘貼上你喜歡的美圖4、添加音樂在添加音樂前你在邊框中最下面輸入文字「內容」然後進入html里，在「內容」處粘貼上你編輯好的音樂代碼，音樂格式如下：（1）、<EMBED src=http://www.flamesky.org/raynal-onwer/asoka%20theme..wma.wma hidden=true type=audio/x-ms-wma LOOP="TRUE" AUTOSTART="TRUE"></EMBED>綠色是音樂地址，紅色是添加音樂完整代碼，你在做時只要修改音樂地址就可以了。（2）、插入單張ＦＬＡＳＨ：(包括圖片)<EMBED align=center src=http://flash.crcstar.com/upload/20044161110320 width_=400 height=300 type=application/octet-stream wmode="transparent" quality="high" >（3）、mp3的插入<EMBED src=:http://www.xhgw.net/home/UploadFile/200441513204729442.mp3hidden=true type=audio/x-ms-wma AUTOSTART="TRUE" LOOP="TRUE" ="00914D6C">（4）、mp3代碼:<EMBED hidden=true src=http://music.angelyaya.net/gs/Ancient%20voices/Siliente%20and%20relax.mp3 type=audio/mpeg loop="true" autostart="true">（5）、FLASH隱藏代碼<EMBED src=http://image2.sina.com.cn/dongman/f/2003-11-28/U4P55T4D13002F53DT20031128142736 hidden=true type=audio/x-ms-wma LOOP="TRUE"所用元素：<EMBED></EMBED>參數：src：音樂文件的URL；hidden：=true為不可見，=false反之；type：指定音頻類型；LOOP：是否循環播放，注意其值置於小角雙引號中；AUTOSTART：是否自動播放，其值同上。(第六課)如何修改邊框圖片與邊距間距及音樂地址前面我們熟悉了各種代碼的識別,現在來學習修改<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 bgColor=#FF82AB background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_7.jpg border=0><TBODY><TR><TD>添加內容</TD></TR></TBODY></TABLE>邊框顏色borderColor=#EE7600 顏色你可以根據圖片或自己需要來設置EE7600背景顏色:bgColor=#FF82AB 根據製作需要修改FF82AB表格格線的厚度cellSpacing=20 你可以隨意修改滿意為止.一般在0--50邊距:cellPadding=3一般設置0--30你可以試改網頁寬度: 根據製作的需要或網站論壇而設定,如:(450550 80% 60%等)網頁圖片代碼與圖片地址background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_7.jpg你在製作中可以隨意修改http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_7.jpg 圖片地址來達到網頁顏色的搭配美感插入音樂地址的修改<EMBED height=200 src=音樂文件地址 type=audio/x-pn-realaudio-plugin width_=200 autostart="true" controls="IMAGEWINDOW,ControlPanel,StatusBar" console="Clip1"></EMBED>代碼格式都一樣,你只要修改音樂地址就可以了高度height=200 寬度width_=200是mp3就改height=0 寬度width_=0FLASH顯示將高度改height=360寬度改width_=480 還可以根據需要設置高和寬（第七課）特效字體製作和代碼的添加與要素的修改ffff00ffff33ffff66ffff99ffffccffffffffcc00ffcc33ffcc66ffcc99ffccccffccffff9900ff9933ff9966ff9999ff99ccff99ffff6600ff6633ff6666ff6699ff66ccff66ffff3300ff3333ff3366ff3399ff33ccff33ffff0000ff0033ff0066ff0099ff00ccff00ffccff00ccff33ccff66ccff99ccffccccffffcccc00cccc33cccc66cccc99ccccccccccffcc9900cc9933cc9966cc9999cc99cccc99ffcc6600cc6633cc6666cc6699cc66cccc66ffcc3300cc3333cc3366cc3399cc33cccc33ffcc0000cc0033cc0066cc0099cc00cccc00ff99ff0099ff3399ff6699ff9999ffcc99ffff99cc0099cc3399cc6699cc9999cccc99ccff9999009999339999669999999999cc9999ff9966009966339966669966999966cc9966ff9933009933339933669933999933cc9933ff9900009900339900669900999900cc9900ff66ff0066ff3366ff6666ff9966ffcc66ffff66cc0066cc3366cc6666cc9966cccc66ccff6699006699336699666699996699cc6699ff6666006666336666666666996666cc6666ff6633006633336633666633996633cc6633ff6600006600336600666600996600cc6600ff33ff0033ff3333ff6633ff9933ffcc33ffff33cc0033cc3333cc6633cc9933cccc33ccff3399003399333399663399993399cc3399ff3366003366333366663366993366cc3366ff3333003333333333663333993333cc3333ff3300003300333300663300993300cc3300ff00ff0000ff3300ff6600ff9900ffcc00ffff00cc0000cc3300cc6600cc9900cccc00ccff0099000099330099660099990099cc0099ff0066000066330066660066990066cc0066ff0033000033330033660033990033cc0033ff0000000000330000660000990000cc0000ff2、文字在圖片中間移動，方向向上，高度300，速度為2歡迎你的到來祝你學的開心祝你玩的快樂<TABLE height=330 width_=450 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_24.gif border=0><TBODY><TR><TD align=middle><MARQUEE scrollAmount=2 direction=up height=300><P align=center><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 華文彩雲"><P align=center>歡迎你的到來</P><P align=center>祝你學開心</P><P align=center>祝你玩的快樂</P></FONT><P></P></MARQUEE></TD></TR></TBODY></TABLE>移

<MARQUEE>移<IMG src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_13.gif"><IMG src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_13.gif"><IMG src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_14.gif"><IMG src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_13.gif"></MARQUEE>文字顯示在圖片的左側right，方向向下direction=down ，速度scrollAmount=4加快為4文字顯示在圖片的左側right ，方向向下direction=down ，速度scrollAmount=4加快為4 歡迎您來到 html學堂群號: 12041464 代碼： 歡迎您來到祝快樂每一天代碼：<TABLE height=360width_=500 align=center background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_25.jpg border=0><TBODY><TR><TD><DIV align=left><MARQUEE scrollAmount=4 direction=down align="left"><P align=right><FONT face=華文新魏 color=red size=40>歡迎您來到</FONT></P><P align=right><FONT face=華文新魏 color=red size=40>祝快樂</FONT></P><P align=right><FONT face=華文新魏 color=red size=40>每一天</FONT></P></MARQUEE></DIV><DIV></DIV><DIV></DIV></TD></TR></TBODY></TABLE>代碼:

代碼:<TABLE borderColor=#5f1807 cellSpacing=10 cellPadding=0 bgColor=#ffffff background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_26.jpg border=1><TBODY><TR><TD><TABLE borderColor=#5f1807 cellSpacing=1 cellPadding=0 bgColor=#ffffff background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_27.jpg border=1><TBODY><TR><TD><TABLE borderColor=#fa886b cellSpacing=20 cellPadding=0 bgColor=#ffffff background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_28.gif border=1><TBODY><TR><TD><TABLE borderColor=#5f1807 cellSpacing=10 cellPadding=0 bgColor=#ffffff background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_26.jpg border=1><TBODY><TR><TD><TABLE borderColor=#5f1807 cellSpacing=2 cellPadding=0 bgColor=#ffffff background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_27.jpg border=1><TBODY><TR><TD><TABLE borderColor=#fa7a5b cellSpacing=1 cellPadding=0 bgColor=#ffffff background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_28.gif border=0><TBODY><TR><TD><TABLE borderColor=#0f3430 cellSpacing=15 cellPadding=0 bgColor=#ffffff background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_29.jpg border=1><TBODY><TR><TD><P align=center><MARQUEE scrollAmount=1 behavior=alternate ><P align=center><FONT color=#7fc01d size=6><B><TABLE borderColor=#ffbbff height=272 cellSpacing=10 cellPadding=3 width_=500 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_30.gif border=2><TBODY><TR><TD><MARQUEE scrollAmount=3 behavior=alternate width_="90%"><P align=center><A href="http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_15.gif" target=_blank><IMG src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_15.gif" border=0></A> </A><BR><BR><BR><BR><BR><FONT face=楷體_GB2312 color=#cccc00 size=7></FONT></P></MARQUEE></TD></TR></TBODY></TABLE></B></FONT></P></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>字體素材：

祝你心想事成<TABLE cellSpacing=0 cellPadding=0 align=center background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_17.gif><TBODY><TR><TD style="FILTER: chroma(color=#336699)"><TABLE cellSpacing=0 cellPadding=0 align=center background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_16.jpg><TBODY><TR><TD align=middle><CENTER><FONT style="FONT-SIZE: 65pt" face=華文新魏 color=#336699><B>HTML課堂祝你心想事成</B></FONT></CENTER></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>雪花飛舞<TABLE borderColor=#111111 cellSpacing=5 cellPadding=10 background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_31.jpg border=0 collapse?><TBODY><TR><TD align=middle ><DIV align=center><TABLE cellSpacing=5 borderColorDark=#030201 cellPadding=0 width_="90%" borderColorLight=#864e18 border=1><TBODY><TR><TD align=middle ><FONT face=Verdana size=2><P><FONT style="FONT-SIZE: 45pt; FILTER: glow(color=#B250F3,strength=50); WIDTH: 100%; COLOR: #e477ff; LINE-HEIGHT: 150%; FONT-FAMILY: 華文彩雲"><MARQUEE direction=up behavior=alternate width_=120 height=240><CENTER><B><FONT color=#ff8c00>雪</FONT></B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width_=120 height=300><CENTER><B><FONT color=#dc143c>花</FONT></B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width_=120 height=240><CENTER><B><FONT color=#7fff00>飛</FONT></B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width_=120 height=300><CENTER><B><FONT color=#ff00ff>舞</FONT></B></CENTER></MARQUEE></FONT></P></FONT></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>圖片素材

你也可以學做代碼:<TABLE height=160 width_=470 align=center background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_18.jpg><TBODY><TR><TD align=middle><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=#9acd32); WIDTH: 100%; COLOR: #ffff00; LINE-HEIGHT: 150%; FONT-FAMILY: 楷體_gb2312"><B>你也可以學做</B></FONT></TD></TR></TBODY></TABLE>圖素

朋友您辛苦了!代碼:<MARQUEE direction=up><TABLE cellSpacing=0 cellPadding=0 align=center background=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_19.gif><TBODY><TR><TD style="FILTER: chroma(color=#336699)"><TABLE align=center bgColor=red><TBODY><TR><TD align=middle><FONT style="FONT-SIZE: 40pt" face=華文行楷 color=#336699>朋友您辛苦了!</FONT></TD></TR></TBODY></TABLE></FONT></TD></TR></TBODY></TABLE></FONT></MARQUEE></DIV>歡迎朋友們來這裡真好！代碼:<CENTER><FONT style="FONT-SIZE: 55pt; FILTER: shadow(color=#0000FF); WIDTH: 100%; COLOR: #9932cc; LINE-HEIGHT: 150%; FONT-FAMILY: 華文行楷">歡迎朋友們<BR>來這裡真好！</FONT> <BR></CENTER><BR></DIV>一起來學習代碼:<CENTER><FONT size=7><FONT face=隸書 color=red><MARQUEE direction=up behavior=alternate width_=60 height=120>一</MARQUEE></FONT><FONT color=yellow><MARQUEE direction=up behavior=alternate width_=60 height=80>起</MARQUEE></FONT><FONT color=brown><MARQUEE direction=up behavior=alternate width_=60 height=120>來</MARQUEE></FONT><FONT color=green><MARQUEE direction=up behavior=alternate width_=60 height=80>學</MARQUEE></FONT><FONT color=orange><MARQUEE direction=up behavior=alternate width_=60 height=120>習</MARQUEE></FONT></FONT></CENTER></DIV>

高級設置

高級設置

<MARQUEE width_=250 height=50><IMG src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_21.gif"><FONT face=隸書 color=#ff0000 size=7> 高級設置<IMG src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_21.gif"></FONT></MARQUEE></FONT><MARQUEE direction=right width_=250 height=50><IMG src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_22.gif"><FONT face=隸書 color=#ff0000 size=7> 高級設置<IMG src="https://www.getit01.com/getimg_360.php?url=http://image49.360doc.com/DownloadImg/2012/02/1023/21420849_22.gif"></FONT></MARQUEE></FONT></DIV>
推薦閱讀：

※藝術日誌邊框
※精美竹藝邊框
※立體邊框代碼3
※別院庭深情思切【粉色美文邊框】
※藍白花邊框

TAG:教材 | 邊框 |