Spry Image Slideshow影像投影片播放
2020/05/13閱讀時間約 1 分鐘
提供快速建立可自動撥放控制的大圖瀏覽方式，像投影片撥放的方式可以暫停與前後往返播放控制。
STEP1.
開啟範例練習檔dw10.html與dw10-imageSlideShow.html。在dw10.html點取原內容區影像(尺寸為 635x410)並直接刪除。
開啟範例練習檔dw10.html與dw10-imageSlideShow.html。在dw10.html點取原內容區影像(尺寸為 635x410)並直接刪除。
至dw10-imageSlideShow.html內直接複製所需CSS 與 Javasccript 檔連接，並貼入dw10.html</head>之前:
以及主要內容於dw10.html內容區(原刪除圖片區)<td>之內:
STEP2.
儲存檔案即可預覽，唯獨尺寸與內容區不符合，因此版面有略為破損，需要更改 CSS 屬性設定。
儲存檔案即可預覽，唯獨尺寸與內容區不符合，因此版面有略為破損，需要更改 CSS 屬性設定。
STEP3.
對於外觀屬性部分，可以找到 CSS【 #ImageSlideShow.ImageSlideShow】 width:633px、height:408(border 邊框 1px，寬與高需要各減去 2)，讓整個內容區符合頁面內容區尺寸；依序直接更改圖片內容原始檔與連結圖檔為其對應大圖。
對於外觀屬性部分，可以找到 CSS【 #ImageSlideShow.ImageSlideShow】 width:633px、height:408(border 邊框 1px，寬與高需要各減去 2)，讓整個內容區符合頁面內容區尺寸；依序直接更改圖片內容原始檔與連結圖檔為其對應大圖。
STEP4.
若要增加圖片內容請至程式碼直接增加完整一組<li>…</li>，即可儲存檔案後預覽檢視。
若要增加圖片內容請至程式碼直接增加完整一組<li>…</li>，即可儲存檔案後預覽檢視。
相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用
為什麼會看到廣告
留言0
查看全部