代碼學習群簡易教程(29)

  
  代碼學習群簡易教程 (29)

——「信紙」與「相冊」

本節講解兩個內容:「應用信紙撰寫文章」與「應用代碼製作相冊」。

一、應用信紙撰寫文章:

在網路中,有許多漂亮的信紙圖片,許多朋友來信詢問想用信紙圖片撰寫文章。那麼,怎樣應用信紙圖片撰寫文章呢?

應用信紙圖片撰寫文章,可分為橫排版與豎排版兩種方法。

(一)橫排版方法:

1、先設置一套表格標籤,表格標籤中要設置css相對定位樣式、背景圖片、表格的寬度與高度。

2、單元格中要設置塊區標籤(或者段落標籤)和文字標籤。塊區標籤中要設置css絕對定位樣式。

舉例如下:

<TABLE style=”POSITION: relative; WIDTH: 600px; HEIGHT: 450px; TOP: 0px; LEFT: 0px” border=0 background=http://image49.360doc.com/DownloadImg/2012/02/2423/21792405_16.jpg bgColor=#d7ffee align=center>

<TBODY>

<TR>

<TD>

<DIV style=”POSITION: absolute; WIDTH: 230px; TOP: 148px; LEFT: 370px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#f0fbb8>飲茶粵海未能忘,</FONT></DIV>

<DIV style=”POSITION: absolute; WIDTH: 230px; TOP: 181px; LEFT: 370px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#f0fbb8>索句渝州葉正黃。</FONT></DIV>

<DIV style=”POSITION: absolute; WIDTH: 230px; TOP: 212px; LEFT: 370px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#f0fbb8>三十一年還舊國,</FONT></DIV>

<DIV style=”POSITION: absolute; WIDTH: 230px; TOP: 243px; LEFT: 370px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#f0fbb8>落花時節讀華章。</FONT></DIV>

<DIV style=”POSITION: absolute; WIDTH: 230px; TOP: 274px; LEFT: 370px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#f0fbb8>牢騷太盛防腸斷,</FONT></DIV>

<DIV style=”POSITION: absolute; WIDTH: 230px; TOP: 305px; LEFT: 370px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#f0fbb8>風物長宜放眼量。</FONT></DIV>

<DIV style=”POSITION: absolute; WIDTH: 230px; TOP: 336px; LEFT: 370px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#f0fbb8>莫道昆明池水淺,</FONT></DIV>

<DIV style=”POSITION: absolute; WIDTH: 260px; TOP: 367px; LEFT: 370px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#f0fbb8>觀魚勝過富春江。</FONT></DIV>

<DIV style=”POSITION: absolute; WIDTH: 230px; TOP: 398px; LEFT: 370px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#ff9b98>——毛澤東——</FONT></DIV></TD></TR></TBODY></TABLE>

上面的代碼中,第一個尖括號(包括尖括號裡面的內容)是表格標籤。表格標籤中,style=”POSITION: relative; WIDTH: 600px; HEIGHT: 450px; TOP: 0px; LEFT: 0px”是css相對定位樣式。

css相對定位樣式解析:樣式=「定位類型:相對定位;表格寬度:600px;表格高度:450px;居上值:0px; 居左值:0px;」

單元格中的塊區標籤:<DIV style=”POSITION: absolute; WIDTH: 260px; TOP: 143px; LEFT: 320px”>

塊區標籤解析:<塊區標籤 樣式=「定位類型:絕對定位;寬度:260px;居上值:143px;居左值:320px」>

單元格中的文字標籤:<FONT style=”LINE-HEIGHT: 1.5em; LETTER-SPACING: 20px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#00fff00>

塊區標籤解析:<文字標籤 樣式=「行高:1.5em;字距: 20px;字體:微軟雅黑;字號:20px」 顏色=綠色>

3、找到你要使用的信紙,「右擊」信紙圖片,點擊「屬性」,就會彈出一個方框,方框中「地址」一欄中就是信紙的「地址」,「維度」一欄中就是信紙圖片的「寬度×高度」。

4、把信紙的「地址」黏貼(替換)到表格標籤中背景圖片「地址」處,把「信紙的寬度與高度」黏貼(替換)到表格標籤與塊區標籤的「寬度與高度」處。

5、「文字內容」要輸入到文字標籤與其尾標籤之間。

6、每一行文字要用一套塊區標籤與一套文字標籤控制。

7、要反復修改塊區標籤中css絕對定位樣式的「居上值」與「居左值」,觀察文字所在的位置,把文字放置到合適的位置上。

8、文字的字體、大小與顏色,可修改文字標籤中的字體、字號與顏色,還可以修改文字標籤中的行高與字距。

效果如下:

飲茶粵海未能忘,

索句渝州葉正黃。

三十一年還舊國,

落花時節讀華章。

牢騷太盛防腸斷,

風物長宜放眼量。

莫道昆明池水淺,

觀魚勝過富春江。

——毛澤東——

(二)豎排版方法:

豎排版方法與橫排版方法基本相同,不同點在於豎排版時,要在控制每一行文字的塊區標籤或者文字標籤中添加豎排版樣式:WRITING-MODE: tb-rl。

舉例如下:

<TABLE style=”POSITION: relative; WIDTH: 700px; HEIGHT: 500px; TOP: 0px; LEFT: 0px” border=0 background=http://image49.360doc.com/DownloadImg/2012/02/2423/21792405_14.jpg bgColor=#d7ffee align=center>

<TBODY>

<TR>

<TD>

<DIV style=”POSITION: absolute; WRITING-MODE: tb-rl; WIDTH: 40px; TOP: 200px; LEFT: 605px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 25px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#0050b8>七絕</FONT></DIV>

<DIV style=”POSITION: absolute; WRITING-MODE: tb-rl; WIDTH: 40px; TOP: 130px; LEFT: 570px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 12px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#0050b8>為女民兵題照</FONT></DIV>

<DIV style=”POSITION: absolute; WIDTH: 40px; TOP: 200px; LEFT: 550px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#0050b8>毛澤東</FONT></DIV>

<DIV style=”POSITION: absolute; WIDTH: 40px; TOP: 130px; LEFT: 510px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#0050b8>颯爽英姿五尺槍,</FONT></DIV>

<DIV style=”POSITION: absolute; WIDTH: 40px; TOP: 130px; LEFT: 470px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#0050b8>曙光初照演兵場。</FONT></DIV>

<DIV style=”POSITION: absolute; WIDTH: 40px; TOP: 130px; LEFT: 430px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#0050b8>中華兒女多奇志,</FONT></DIV>

<DIV style=”POSITION: absolute; WIDTH: 40px; TOP: 130px; LEFT: 390px” class=divBorderStyle><FONT style=”LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 20px” color=#0050b8>不愛紅裝愛武裝。</FONT></DIV></TD></TR></TBODY></TABLE>

效果如下:

七絕

為女民兵題照

毛澤東

颯爽英姿五尺槍,

曙光初照演兵場。

中華兒女多奇志,

不愛紅裝愛武裝。

下面為您提供我收藏的一些漂亮的信紙圖片,文章地址如下:

http://www.360doc.com/content/13/0705/17/4127803_297869785.shtml

二、應用代碼製作相冊:

網路中有許多精美的相框,如果把自己的照片放入精美的相框中,製作成相冊,既不用花錢,又很美觀,我們何樂而不為呢?

相冊有靜態相冊與移動相冊兩種。下面分別講解這兩種相冊的製作方法。

(一)靜態相冊:

代碼舉例:

<DIV align=center>

<TABLE style=”POSITION: relative; WIDTH: 405px; TOP: 0px; LEFT: 0px” id=table1>

<TBODY>

<TR>

<TD>

<TABLE width=416 height=479>

<TBODY>

<TR>

<TD><IMG border=0 src=”http://image14.360doc.com/DownloadImg/2010/09/0714/5114845_2.jpg” width=405 height=470> </TD></TR></TBODY></TABLE>

<DIV style=”POSITION: absolute; TOP: 3px; LEFT: 3px” class=divBorderStyle height=”470″ width=”416″><IMG style=”TOP: 0px; LEFT: 0px” src=”http://image52.360doc.com/DownloadImg/2012/05/2208/24265553_69.jpg”></DIV></TD></TR></TBODY></TABLE></DIV>

代碼簡析:

靜態相冊,用二層表格製作。第一層表格標籤中設置「css相對定位樣式」,單元格中用設置有「css絕對定位樣式」的塊區標籤控制相框圖片;第二層表格的單元格中放置照片。

照片的規格要略小於相框的規格。

製作時要測試調整css絕對定位樣式的「居上值」與「居左值」,使移動照片位於相框的合適位置中。

相冊效果:

代碼學習群簡易教程(29)

代碼學習群簡易教程(29)

(二)移動相冊:

代碼舉例:

<DIV align=center>

<TABLE style=”POSITION: relative; WIDTH: 416px; TOP: 0px; LEFT: 0px” id=table1>

<TBODY>

<TR>

<TD>

<MARQUEE height=479 width=416 behavior=”alternate” scrollAmount=3>

<TABLE width=1917 height=479>

<TBODY>

<TR>

<TD><IMG border=0 src=”http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg” width=416 height=479> <IMG border=0 src=”http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_2.jpg” width=416 height=479> <IMG border=0 src=”http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_1.jpg” width=416 height=479> <IMG border=0 src=”http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_6.jpg” width=416 height=479> <IMG border=0 src=”http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_5.jpg” width=416 height=479> </TD></TR></TBODY></TABLE></MARQUEE>

<DIV style=”POSITION: absolute; TOP: 3px; LEFT: 3px” class=divBorderStyle width=”416″ height=”479″><IMG style=”TOP: 0px; LEFT: 0px” src=”http://image52.360doc.com/DownloadImg/2012/05/2208/24265553_69.jpg”></DIV></TD></TR></TBODY></TABLE></DIV>

代碼簡析:

移動相冊也是用兩層表格製作。第一層表格標籤中設置「css相對定位樣式」,用設置有「css絕對定位樣式」的塊區標籤控制單元格中放入的相框圖片;第二層表格用移動標籤控制,表格的單元格中放置多張照片,表格的寬度為多張照片寬度之和。

照片的規格要略小於相框的規格。

製作時要測試調整css絕對定位樣式的「居上值」與「居左值」,使移動照片位於相框的合適位置中。

相冊效果:

代碼學習群簡易教程(29)
  代碼學習群簡易教程(29)
  代碼學習群簡易教程(29)
  代碼學習群簡易教程(29)
  代碼學習群簡易教程(29)

代碼學習群簡易教程(29)

(三)用音畫圖片做相框的移動相冊:

代碼舉例:

<DIV align=center>

<TABLE style=”POSITION: relative; WIDTH: 416px; TOP: 0px; LEFT: 0px” id=table1>

<TBODY>

<TR>

<TD><EMBED height=550 type=application/x-shockwave-flash align=right width=750 src=http://hsb345.16789.net/domName/hsb345/20135239264731874.swf quality=”high” menu=”false” wmode=”transparent” allowNetworking=”internal” allowScriptAccess=”never”>

<MARQUEE style=”POSITION: absolute; TOP: 40px; LEFT: 60px” height=450 behavior=alternate width=630 scrollAmount=3>

<TABLE width=1917 height=479>

<TBODY>

<TR>

<TD><IMG alt=”” src=”http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_1.jpg” width=630 height=430><IMG alt=”” src=”http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_2.jpg” width=630 height=430><IMG alt=”” src=”http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_3.jpg” width=630 height=430><IMG alt=”” src=”http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_4.jpg” width=630 height=430><IMG alt=”” src=”http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_5.jpg” width=630 height=430><IMG alt=”” src=”http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_6.jpg” width=630 height=430><IMG alt=”” src=”http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_7.jpg” width=630 height=430><IMG alt=”” src=”http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_8.jpg” width=630 height=430> </TD></TR></TBODY></TABLE></MARQUEE></TD></TR></TBODY></TABLE></DIV>

代碼簡析:

用音畫圖片做相框的移動相冊,同上面的移動相冊,只不過把相框圖片換為了音畫圖片,把「css定位樣式」設置在移動標籤中罷了。

用音畫圖片做相框的移動相冊,效果挺美的。不但可以欣賞漂亮的相冊,而且能夠聆聽悅耳的音樂聲音。

相冊效果:

‘,2)”>
  代碼學習群簡易教程(29)
  代碼學習群簡易教程(29)
  代碼學習群簡易教程(29)
  代碼學習群簡易教程(29)
  代碼學習群簡易教程(29)
  代碼學習群簡易教程(29)
  代碼學習群簡易教程(29)
  代碼學習群簡易教程(29)

作業:

一、填空:

1、應用信紙撰寫文章,有兩種方法:()方法與()方法。

2、應用信紙撰寫文章,css的相對定位樣式應該設置在()標籤中,css的相對定位樣式應該設置在什麼標籤中。

3、要想把文章內容放置到信紙的合適文章上,需要反復調整css絕對定位樣式的()值與()值。

4、應用豎排版方法撰寫文章,需要在()標籤或者()標籤中設置css的()樣式。

二、怎樣獲取信紙圖片的地址?怎樣獲取信紙圖片的寬度與高度?

三、簡述應用信紙撰寫文章的方法。

四、簡述應用代碼製作相冊的方法。

五、應用信紙製作一篇橫排版網頁。

六、應用信紙製作一篇橫排版網頁。

七、製作一個靜態相冊。

八、製作一個移動相冊。

代碼學習群簡易教程(29)
   「春天沒來」編撰

2014年7月16日於北京