代碼入門教程（16）
第 二 章 標 簽 應 用第十七節 移動圖片（9）
本節繼續學習移動圖片。圖書館首頁，是圖書館的門面。把它裝扮得漂漂亮亮的，會吸引更多的朋友來訪問你的圖書館。而圖書館首頁的頂圖，是一個不可或缺的裝扮內容。在網路中相互流傳的許多頂圖，其實只能算個頂圖素材，因為沒有設置定位代碼，所以根本放置不到首頁的頂欄中去。本節講解圖書館中的三種移動頂圖代碼，要深刻領會代碼中的內容，學會應用這些代碼製作頂圖，把你的圖書館門面裝扮得漂漂亮亮的。代碼1：（普通圖片頂圖代碼）<DIV class=divBorderStyle style="LEFT: 0px; POSITION:absolute; TOP: 24px"><MARQUEE style="LEFT: 0px; WIDTH: 1345px"scrollAmount=3 behavior=alternate height=270><TABLE style="WIDTH: 1340px" height=280 cellSpacing=0cellPadding=0 border=0><TBODY><TR><TD> <IMG height=280 src="圖片地址1" width_=345 border=0> </TD><TD> <IMG height=280 src="圖片地址2" width_=345 border=0> </TD><TD> <IMG height=280 src="圖片地址3" width_=345 border=0> </TD><TD> <IMG height=280 src="圖片地址4" width_=345 border=0> </TD><TD> <IMG height=280 src="圖片地址5" width_=345 border=0> </TD><TD> <IMG height=280 src="圖片地址6" width_=345 border=0> </TD></TR></TBODY></TABLE></MARQUEE></DIV>效果舉例：http://www.360doc.com/content/12/0515/15/4127803_211190560.shtml代碼解析：1、先設置一套表格代碼（上面代碼中的紅色部分）。表格中單元格個數的設置，要看各個單元格中圖片的寬度之和必須大於移動屏幕的寬度。表格的單元格中各放置一個圖片標籤。2、在這一套表格標籤的上面添加一個塊區標籤、一個移動標籤，下面添加塊區標籤、移動標籤的尾標籤。3、塊區標籤是對頂圖圖片的定位。4、在網路中尋找上你喜愛的圖片，複製其地址，替換到「圖片地址」處。圖片地址處，可以替換為「同一個圖片」的地址，也可以替換為「不同的圖片」地址。
代碼2：（翻轉圖片頂圖代碼）<div style="left: 0px; top: 24px; position: absolute;"class="divBorderStyle"><marquee style="left: 0px; width: 1350px;" height="275"behavior="alternate" scrollAmount="3"><table style="width: 1350px;" border="0" cellSpacing="0"cellPadding="0" height="280"><tbody><tr><td><img style="border-width: 0px; margin: 0px; width: 450px;height: 275px;" border="0" alt=""src=http://image40.360doc.com/DownloadImg/2011/10/2309/18691916_4.gifwidth_="450" height="275"><img style="border-width: 0px; margin: 0px;width: 450px; height: 275px; filter: FlipH;" alt=""src="https://www.getit01.com/getimg_360.php?url=http://image40.360doc.com/DownloadImg/2011/10/2309/18691916_4.gif"><imgstyle="border-width: 0px; margin: 0px; width: 450px; height: 275px;" border="0" alt=""src=http://image40.360doc.com/DownloadImg/2011/10/2309/18691916_4.gifwidth_="450" height="275"><img style="border-width: 0px; margin: 0px; width: 450px;height: 275px; filter: FlipH;" alt=""src="https://www.getit01.com/getimg_360.php?url=http://image40.360doc.com/DownloadImg/2011/10/2309/18691916_4.gif"><imgstyle="border-width: 0px; margin: 0px; width: 450px; height: 275px;" border="0"alt="" src=http://image40.360doc.com/DownloadImg/2011/10/2309/18691916_4.gifwidth_="450" height="275"><img style="border-width:0px; margin: 0px; width: 450px;height: 275px; filter: FlipH;" alt=""src="https://www.getit01.com/getimg_360.php?url=http://image40.360doc.com/DownloadImg/2011/10/2309/18691916_4.gif"></td></tr></tbody></table></marquee></div>效果舉例：http://www.360doc.com/content/12/0517/21/4127803_211755207.shtml代碼解析：1、先設置一套表格標籤（上面代碼中的紅色部分），表格的單元格中放置了六個圖片標籤。相鄰的兩個圖片標籤中，有一個圖片標籤添加了「左右翻轉」圖片代碼filter: FlipH;" 。2、在這一套表格標籤的上面添加一個移動標籤和一個塊區標籤，下面添加了移動標籤和塊區標籤的尾標籤。3、塊區標籤是對頂圖圖片的定位。4、用上面的代碼1製作的頂圖，兩個圖片的銜接處有不太明顯的銜接痕迹。代碼2添加了「左右翻轉」圖片代碼，製作的頂圖就美觀多了。5、在網路中尋找上你喜愛的圖片，複製其地址，替換到「圖片地址」處，即可製作出漂亮的移動頂圖。
代碼3：（動畫圖片頂圖代碼）<div style="left: 0px; top: 24px; position: absolute;"class="divBorderStyle"><marquee style="left: 0px; width: 1350px;" height="280"behavior="alternate" scrollAmount="4"><table style="width: 1350px;" border="0" cellSpacing="0"cellPadding="0" height="280"><tbody><tr><td><embed height="280" type="application/x-shockwave-flash"width_="350"src=http://home.invil.org/kkj941/editorImage/12284722444050871.swfwmode="transparent"><embed style="filter: fliph;" height="280"type="application/x-shockwave-flash"width_="350"src=http://home.invil.org/kkj941/editorImage/12284722444050871.swfwmode="transparent"><embedheight="280" type="application/x-shockwave-flash" width_="350"src="https://www.getit01.com/getimg_360.php?url=http://home.invil.org/kkj941/editorImage/12284722444050871.swf"wmode="transparent"><embed style="filter: fliph;" height="280"type="application/x-shockwave-flash" width_="350"src="https://www.getit01.com/getimg_360.php?url=http://home.invil.org/kkj941/editorImage/12284722444050871.swf"wmode="transparent"><embed height="280" type="application/x-shockwave-flash"width_="350" src=http://home.invil.org/kkj941/editorImage/12284722444050871.swfwmode="transparent"><embed style="filter: fliph;" height="280"type="application/x-shockwave-flash" width_="350"src=http://home.invil.org/kkj941/editorImage/12284722444050871.swfwmode="transparent"></td></tr></tbody></table></marquee></div>效果舉例：http://www.360doc.com/content/12/0527/18/4127803_214083954.shtml代碼解析：1、先設置一套表格標籤（上面代碼中的紅色部分），表格的單元格中放置了六個動畫圖片標籤。相鄰的兩個動畫圖片標籤中，有一個圖片標籤添加了「左右翻轉」圖片代碼filter: FlipH;" 。2、在這一套表格標籤的上面添加一個移動標籤和一個塊區標籤，下面添加了移動標籤和塊區標籤的尾標籤。3、塊區標籤是對頂圖圖片的定位。4、動畫圖片標籤中，要用embed代碼，而不能用普通圖片的img代碼。5、動畫圖片是網路中流行的一種圖片，也是人人都喜愛的一種圖片。用動畫圖片製作的移動頂圖，其效果要比用普通圖片製作的頂圖漂亮多了。
作業：替換圖片，製作幾幅移動頂圖。替換圖片以後，要修改上面圖片標籤中的寬度。寬度值的確定，最好是看你使用的圖片高度變為280px以後縮小了多少倍，然後把寬度也縮小相同的倍數，求出其寬度值。高度一般不作太大幅度的修改。如果想修改高度值，請參閱我撰寫的《個人圖書館中的數據(原創) 》 一文。因為頂圖的高度與你所使用的360圖書館提供的首頁皮膚有關。代碼入門教程(1)代碼入門教程(2)代碼入門教程(3)代碼入門教程(4)代碼入門教程(5)代碼入門教程(6)代碼入門教程(7)代碼入門教程(8)代碼入門教程(9)代碼入門教程(10)代碼入門教程(11)代碼入門教程(12)代碼入門教程(13)代碼入門教程(14)代碼入門教程(15)
2012年11月11日於北京
第 二 章 標 簽 應 用第十八節 移動圖片（10）
本節繼續學習移動圖片。下面講解整個文章頁面的移動代碼。代碼：<marquee direction="up" height="350" width_="980"scrollAmount="1"><table id="table93407659" border="1" cellSpacing="20"borderColor="#990000" borderColorDark="#ffff00"cellPadding="0" width_="665" background="http://userimage3.360doc.com/12/1001/06/4127803_201210010652090930.jpg"><tbody><tr><td width_="98%"><table id="table93407660" border="0" cellSpacing="1"cellPadding="0" width_="100" background="http://image38.360doc.com/DownloadImg/2011/10/0517/18251042_13.jpg"><tbody><tr><td width_="89%"><table id="table93407661" border="1" cellSpacing="1"borderColor="#990000" borderColorDark="#ffff00"cellPadding="0" width_="289" background="http://image38.360doc.com/DownloadImg/2011/10/0517/18251042_3.jpg"><tbody><tr><td width_="50%"><a href="http://tongenguoji.blog.163.com/edit/"><table id="table93407662" border="1" cellSpacing="15"borderColor="#039902" width_="36%" background="image38.360doc.com/DownloadImg/2011/10/0517/18251042_12.jpg"><tbody><tr><td vAlign="middle"><table id="table93407663" border="1" cellSpacing="1"borderColorLight="#202020" borderColorDark="#000000"cellPadding="8" width_="68" background="http://image38.360doc.com/DownloadImg/2011/10/0517/18251042_10.jpg"><tbody><tr><td><table id="table93407664" border="1" cellSpacing="1"borderColor="#990000" borderColorDark="#ffff00"cellPadding="0" width_="567" background="image38.360doc.com/DownloadImg/2011/10/0517/18251042_3.jpg"><tbody><tr><td width_="97%"><div align="center"><table style="width: 570px; height: 48px;" border="0"cellSpacing="10" borderColorLight="#2954d6"borderColorDark="#2954d6" cellPadding="0" width_="570"background="http://image45.360doc.com/DownloadImg/2011/12/0117/19707544_4.gif" align="center"><tbody><tr><td><table style="width: 636px; height: 500px;" border="0"cellSpacing="2" borderColor="#cccccc" cellPadding="2"width_="636" background="http://image50.360doc.com/DownloadImg/2012/03/2001/22449761_9.jpg"align="right"><tbody><tr><td><table style="width: 629px; height: 500px; text-align: left;"border="0" cellSpacing="2" borderColor="#cccccc"cellPadding="2" width_="629" background="http://image50.360doc.com/DownloadImg/2012/03/2001/22449761_11.jpg"align="right"><tbody><tr><td><font style="font-size: 29px;" color="#00ffff"><p align="center"><font style="font-size: 32px;"color="#00ffff"><strong>代碼入門教程</strong></font></p><p align="center"><font style="font-size: 29px;"color="#00ffff"><strong>前言</strong></font></p><div align="left"> 我是一個年已花甲的退休教師，一不懂代碼，二不會英語。前年，兒子給我買了一個筆記本電腦，剛開始玩的時候，連「關機」也不會，看個電子書、玩個遊戲，都十分困難。後來，又給我註冊了360doc個人圖書館，更找不著「北」了。進入網路以後，頁面中的內容五彩繽紛，這兒閃爍，那兒跳動，文字內容，五顏六色，真不知該點擊什麼地方了！然而，就是在這個圖書館中，我學到了不少的知識。現在，我不但能夠瀏覽別人的文章、收藏別人的文章，而且還學會了自己撰寫文章，編輯圖片，使用邊框，在實踐操作的過程中，我知道了那些五彩繽紛的美麗網頁，都是用代碼製作的。於是，我對代碼產生了興趣，開始學習代碼、研究代碼。經過一段時間的努力學習、刻苦鑽研，終於邁進了代碼的門檻。我已經撰寫了幾十篇關於360doc圖書館的知識和操作方法的文章，製作了幾百個個人圖書館的頂圖，還有一些底圖、圖書館首頁的模塊等作品，初步地嘗到了學習代碼的甜頭。在實踐的過程中，我認識到，代碼並不是什麼神秘的天書，也不是高不可攀的山峰，不懂英語，沒有學過系統的電腦知識，照樣可以學會代碼，用代碼製作自己喜歡的各種漂亮的網頁。<br> 在這裡，我把自己學習代碼的體會撰寫成這些文章，編輯成小冊子，陸續發表，提供給大家，用以幫助願意學習代碼而又不知從哪裡入手的朋友們，希望我的這些文章能夠對這些館友們有所幫助，引導你們步入代碼的門檻。<br> 我的這些文章，語言不一定十分規範，概念不一定非常準確。我本著這樣一條原則，力求通俗易懂，講解具體，能夠操作，使大家能夠看明白，會操作，真正起到引導入門的作用。<br> 由於本人的水平有限，文章中一定存在不少紕漏和錯誤之處，希望大家批評指正。在此我預先向給我提出寶貴意見的朋友們表示感謝。</div><div align="center"></div><div align="center"><nobr><marquee height="90" behavior="alternate" width_="170"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee direction="up" height="120" behavior="alternate"width_="90"><img title="春天沒來歡迎您" alt="春天沒來歡迎您"src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_10.jpg" height="90"></marquee><marquee height="90" behavior="alternate" width_="170"><imgtitle="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg"height="100"></marquee><marquee direction="up" height="120" behavior="alternate"width_="90"><img title="春天沒來歡迎您" alt="春天沒來歡迎您"src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_10.jpg" height="90"></marquee><marquee height="90" behavior="alternate" width_="170"><imgtitle="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg"height="100"></marquee></nobr><nobr></nobr></div><nobr><div align="center"></div></nobr><div align="center"></div><div align="right"> </div><div align="right"><a href="http://www.360doc.com/userhome/4127803" target="_blank"><img src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/12/0710/06/4127803_201207100648100037.jpg"></a></div><div align="right"><font style="font-size: 29px;" color="#00ffff"><strong></strong></font> </div><div align="right"><font style="font-size: 29px;" color="#00ffff"><strong>２０１２年１０月２日於北京</strong></font></div><div align="center"><strong></strong> </div><div align="center"><strong><img border="0"alt="精美的分割線——「春天沒來」歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image36.360doc.com/DownloadImg/2011/09/0521/17098424_91.jpg" __1315228007266__="ev_5058300886"><img border="0"alt="精美的分割線——「春天沒來」歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image36.360doc.com/DownloadImg/2011/09/0521/17098424_91.jpg" __1315228007266__="ev_5058300886"></strong></div><div align="right"><strong></strong> </div><div align="left"> </div><div align="center"><font style="font-size: 34px;"color="#00ffff"><strong>第一章 代碼基礎知識</strong></font></div><div align="center"><strong></strong> </div><div align="center"><font style="font-size: 29px;"color="#00ffff">第一節 認識撰寫文章處的兩種頁面</font></div><div align="center"> </div><div align="left"> 學習代碼，離不開實踐活動。而實踐活動，離不開編輯器。因此，我們有必要先來認識一下360doc個人圖書館中編輯器的頁面，也就是撰寫文章處的頁面。</div><div align="left"> 「撰寫文章」處有兩種頁面，一種是「文字圖片」編輯頁面，另一種是「代碼編輯」頁面。</div><div align="left"> 在你的圖書館首頁點擊「撰寫」按鈕，進入的頁面是「文字圖片」編輯頁面（見圖１）；你再點擊一下此頁面下方的「代碼編輯」，進入的是「代碼」編輯頁面（見圖２）</div><div align="left"></div><div align="left"><font color="#00ffff"><font style="font-size: 24px;"><strong>圖1：</strong>「文字圖片」編輯頁面<font style="background-color: rgb(51, 102, 255);"><font style="background-color: rgb(0, 255, 0);"></font></font></font></font></div><div align="left"><font style="background-color:rgb(51, 102, 255);"><font style="font-size: 24px;background-color: rgb(0, 255, 0);" color="#00ffff"></font></font></div><font style="background-color: rgb(51, 102, 255);"><font style="background-color: rgb(0, 255, 0);"><div align="left"><img style="border-width: 0px; margin: 0px;width: 787px; height: 420px;" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/0928/09/4127803_201209280908330362.jpg"> <font style="font-size: 24px;" size="3"><font style="background-color: rgb(255, 0, 0);"><strong>圖２<font style="font-size: 24px;">：</font></strong><font style="font-size: 24px;" size="3">「代碼」編輯頁面</font></font></font></div></font><div align="left"></div></font><div align="left"> </div><div align="left"><img style="border-width: 0px; margin: 0px;width: 798px; height: 425px;" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/0928/09/4127803_201209280908310065.jpg"></div><div align="left"></div><div align="left"> 「文字圖片」編輯頁面是用來撰寫文章、編輯圖片使用的頁面；而「代碼編輯」頁面是用於編輯代碼、粘貼代碼使用的頁面。</div><div align="left"></div><div align="left"> 「撰寫」文章頁面下方的「代碼編輯」按鈕，就是專門用於切換這兩種頁面的按鈕。在「文字圖片」編輯頁面點擊一下「代碼編輯」按鈕，就可以切換到「代碼編輯」頁面；在「代碼編輯」頁面點擊一下「代碼編輯」按鈕，就可以切換到「文字圖片」編輯頁面中。</div><div align="left"></div><div align="left"> 在「代碼編輯」頁面，你可以使用代碼製作網頁，修改網頁代碼、粘貼網頁代碼。而這個「預覽」按鈕，就是讓你觀看網頁製作的實際效果的按鈕。你只要點擊一下這個按鈕，就可以看到實際效果了。在這裡我要說明的是，點擊「預覽按鈕」以後看到的效果，與「發表」以後看到的效果有時是不一致的，不要過於依賴這個頁面，點擊「發表」按鈕觀看實際效果才是最可靠的方法。</div><div align="left"></div><div align="left"> 我還要說明的一點是：你在「代碼編輯」頁面編輯了你要製作的網頁代碼以後，當你再一次點擊「代碼編輯」按鈕或者點擊「發表」按鈕以後，你原來編寫的代碼，可能有部分地方已經有所改變。這是系統自動給你修改的。</div><div align="left"></div><div align="left"> 要查看系統給你修改了哪些代碼，可以這樣查看：</div><div align="left"></div><div align="left"> </div><div align="left"> 將你點擊「發表」按鈕以後發表的文章，點擊一下「修改」按鈕，然後在進入的「文章修改頁面」的下方，點擊一下「代碼編輯」按鈕，就可看到系統為你修改以後的代碼了。把這份代碼和你原來的代碼比較一下，就可以查出系統給你修改了哪些代碼了。</div><div align="left"></div><div align="left"> </div><div align="center"><table style="border-color: rgb(87, 193, 0); width: 600px;height: 100px; text-align: left; border-collapse: collapse;background-color: rgb(204, 249, 249);" border="0"cellSpacing="0" cellPadding="2" width_="500"><tbody><tr style="text-align: left;"><td><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image21.360doc.com/DownloadImg/2010/12/2204/7861744_1.gif" width_="100" height="100" real_src="http://userimage2.360doc.com/12/0317/19/7747867_201203171904280062.jpg"></marquee></td><td><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image4.360doc.com/DownloadImg/2009/8/31/159348_5434897_108.gif" width_="100" height="100" real_src="http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_3"></marquee></td><td><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image4.360doc.com/DownloadImg/2009/8/31/159348_5434897_12.gif" width_="100" height="100" real_src="http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_4"></marquee></td><td><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image4.360doc.com/DownloadImg/2009/8/31/159348_5434897_5.gif" width_="100" height="100" real_src="http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_5"></marquee></td><td style="text-align: left;"><div align="center"><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image4.360doc.com/DownloadImg/2009/8/31/159348_5434897_34.gif" width_="100" height="100" real_src="http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_6"></marquee></div></td></tr></tbody></table></div><div align="center"></div><div align="left"> 作業：</div><div align="left"><strong><font color="#ff0000"></font></strong>１、認識一下<font style="font-size: 29px;"color="#00ffff" size="3">「文字圖片」編輯頁面，試著撰寫一段文章或者粘貼幾個圖片。</font></div><div align="left"> ２、認識一下<font style="font-size: 29px;"color="#00ffff" size="3">「代碼編輯」編輯頁面，看看與「文字圖片」編輯頁面有什麼不同。</font></div><div align="left"> ３、自己任意尋找一篇文章，複製、粘貼到「文字圖片」編輯頁面，然後點擊一下頁面下方的「代碼編輯」按鈕，獲取其代碼，認識一下代碼。</div><div align="right"><a href="http://www.360doc.com/userhome/4127803" target="_blank"><img src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/12/0710/06/4127803_201207100648100037.jpg"></a></div><div align="right"><font style="font-size: 32px;" color="#00ffff"><strong></strong></font> </div><div align="right"><font style="font-size: 32px;" color="#00ffff"><strong>２０１２年１０月２日於北京</strong></font></div></font></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody><div></div></table></div></td></tr></tbody></table></td></tr></tbody></table>< /td></tr></tbody></table></a></td></tr></tbody></table></a></td></tr></tbody></table></td></tr></tbody></table></marquee>代碼解析：1、上面的代碼可以修改為左右「來回走」的移動代碼， 或者修改為「向右」移動，還可以修改為「向左」移動的移動代碼。但是，效果都不如「向上」移動的好。2、整個網頁的移動代碼比較簡單，只要把你的某篇文章的代碼粘貼到移動標籤與它的尾標籤之間就可以了。移動標籤中，移動方向最好是「向上」，移動速度的值最好是「1」。
作業：自己製作一篇整個網頁移動的文章。注意事項：1、所選文章的代碼不必修改；2、移動速度最好選擇為「1」或者「2」，不要太大，移動速度太大了效果不好。（因為文章是供別人瀏覽的，移動速度大了別人無法瀏覽。）3、「移動屏幕的寬度和高度」要根據自己選擇的文章顯示的頁面規格情況進行修改，以效果最佳為原則。所以必須認真觀察你製作的作品的顯示效果，反覆修改，直至效果最佳狀態為止。
2012年11月11日於北京
推薦閱讀：
※電子三軸穩定器的13個拍法和技巧
※單羅紋織起和收針的教程
※領帶夾有什麼講究？怎麼佩戴領帶夾(圖文教程)
※轉廠貿易教程,轉廠貿易流程以及轉廠貿易所需資料.
※筷枕一製作教程