:::分割圖片說明:::
範例
﹝測試頁﹞

這個語法使用在圖片方面,最好要熟練影像處理的軟體, 如果要如測試頁的效果,在影像軟體操作要花一些時間。測試頁的圖片是在PHOTOSHOP中編輯,先製作兩個大的地圖(分別是滑鼠未接觸的狀態,與滑鼠接觸後變化的狀態),再個別切割成8個小圖,並個別製作左邊出現的說明圖片。

在不同解析度的螢幕下左邊圖片的位置會有所不同,解決的方式有:(1)整個表格靠網頁左邊。(2)使用無工具視窗(視窗-無工具視窗)。(3)使用IFRAME (視窗-網頁中的視窗-1)。

在 Dreamweaver 軟體時程式碼最前面一段「 "http://www.w3.org/TR/html4/loose.dtd"」要刪掉。

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

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

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

1. 這段語法中有八個儲存格,其中有段語法可以使滑鼠接觸圖片後產生變化,並在左邊產生一個說明圖文,﹝→B段語法細節說明﹞

2. 儲存格的版面配置,上面一排有「靠下對齊」(valign="bottom"),下面一排有「靠上對齊」(valign="top"),這是貼入切割的地圖時,讓各部份都能緊湊在一起。

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

 

可更改的部份:

1. 這段語法在編輯圖層內容,也就是在測試頁中左邊出現的圖文,圖層的數目與id要與B段語法相對應,才能造成滑鼠接觸地圖某塊圖片,左邊就會出現某個圖文的效果,
﹝→C段語法細節說明﹞

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