:::圖片說明-2:::

此語法在使瀏覽者滑鼠接觸圖片時,會出現該圖片的說明內容(包括圖片與文字),由於有使用圖層模式,在整頁模式時,不同螢幕解析度可能會造成圖層位置不同,解決的方式有:(1)表格靠網頁左邊,不要使用置中。(2)使用無工具視窗(視窗-無工具視窗)。(3)使用IFRAME (視窗-網頁中的視窗-1).....。

範例
                          
A.貼在<head> 這裡 </head>

可更改的部份:

1.「...#a001 { position:absolute;  left:20px;  top:20px;  width:200px;  height:280px;...」→此段在設定滑鼠接觸圖片時出現的圖層(說明內容), 每一小段中的「#a001」是圖層名稱,要與C、D段語法中的相對應,left是圖層與左邊視窗的距離,數目越小越靠左,top是與視窗上方的距離,數目越小越靠上面。width、height是圖層的寬與高。

                
B.貼在<head> 這裡 </head>

    
C.貼在 <body> 這裡 </body>

可更改的部份:

1. 此段語法在編輯圖片說明內容,每一段的「...<div id="a001">...」,a001要與A、D段中的相對應。

2. 「...<p style="line-height: 150%">...」→150%是字體行距,可視內容修改。

3. 輸入各段文字內容,以<br>來換行。

4. 這種圖層模式,在編輯頁面時各個圖層可能會重疊,最好在HTML中編輯較方便。在Dreamweaver 的軟體,可從「視窗」→「圖層」,在圖層面板可點選各圖層的「眼睛」圖示,如點選「眼睛打開」的圖示,此圖層就會顯現在頁面上。

5. 「..img src="圖片檔名路徑02" height="79" width="120"...」→ 輸入自己的圖片,並更改圖片尺寸。

   
D.貼在 <body> 指定位置 </body>

可更改的部份:(在HTML中修改)

1. 此段語法貼入頁面後,有許多的表格,可在頁面修改成自己需要的樣式。預設的圖片連結框架是target="_self"」→相同框架開啟連結的網頁,可修改自己需要的方式,如果您只要接觸的效果,圖片不連結網頁,把 <a href="連結的網頁檔名路徑01" target="_self"> 刪掉即可。

2. 「.....('a001','','show')....('a001','','hide')...」中的a001要與A、C段語法中的相對應。

3. 「...width="88" height="63"...」→ 記得輸入自己圖片後,修改圖片尺寸。

 --隨意玩網--語法練習--
△TOP