◎請先下載整個WWW資料夾至D:,解壓縮所有檔案。
一、使用NVU製作表格:
(一) 用NVU -> 另存新檔
(二) 修改網頁標題: 7xx-xx圖片編修作品
(三) 檔案名稱: c.html
(四)下方畫一個 6x2 的表格 ,要求如下:
1. 將表格改為相對於視窗百分比的 寬度 70% 大小
2. 將表格置中對齊
3. 在標題輸入: 圖片編修作品(儲存格百分比)
第一列表格輸入文字:圖片去背、圖片合成
第三列表格輸入文字:框架圖片、動態框架
第五列表格輸入文字:3D立體圖片、動態LOGO
二、儲存格百分比設定:
(一)因為目前的表格,佔了頁面的70%。(大約是914px)
但是我們等等要置入的圖片,大小不一,有的寬640、有的1024....
加在一起絕對會超過914px,因此我們選擇以百分比方式來符應頁面及儲存格。
設定 寬度 50% 垂直對齊:中間 水平對齊:置中
※只需調整一格,其它格皆會跟著百分比調整。(原始碼語法設定)
(二)插入圖片設定百分比。
將圖片寬度百分比調成相對於儲存格100% (其它原始碼會再調整)
(亦即 儲存格多大px,照片寬度自動調為多大px,高度會自動變化)
(三)分別插入圖片六張,將圖片寬度百分比調成相對於儲存格。
bird(50%)、combine(100%)、frame1(100%)、
frame2(100%)、3Dpic(100%)、logo(100%)
結果如下: 圖片大小不一 (因為NVU的bug,所以須調整原始碼)
(四)將視窗調整至 原始碼 ,找到每一個<img style="......>
修改百分比,並將每一個 height: ooo px 刪除(共6個)
(五)回一般模式,
再調整一下版面。
如範例,
就會有自動縮放
網頁大小及圖片的功能
請務必存檔。
(六)在網頁最下方,插入回首頁的icon(home1、home2皆可)
並將連結 引導至 index.html
(七)!!!務必存檔!!!