內頁版面切割與編排
2020/05/12閱讀時間約 4 分鐘
對於網站內頁，尤其是左右分欄的內頁版面，同樣也是設計好版面之後，經由Photoshop切割後儲存成HTML頁面，再到Dreamweaver中處理設定，以完美呈現頁面內容，包括滑鼠變換影像按鈕，以及內頁的龐大頁面內容資料加入版型版面後，需保持版面的完整。
STEP1.
在Photoshop中開啟範例練習檔為預先已在Photoshop所設計好的網站首頁，目的是希望能完成首頁並完美表現設計內容，包括已經事先準備好的按鈕滑上圖層，請先保持隱藏。
在Photoshop中開啟範例練習檔為預先已在Photoshop所設計好的網站首頁，目的是希望能完成首頁並完美表現設計內容，包括已經事先準備好的按鈕滑上圖層，請先保持隱藏。
使用切片選取工具即可檢視切片內容，按鈕部分為了要設定滑鼠變換影像，因此每個按鈕都需要個別切割；另外在版面上，切片03、15、18均是為了背景圖設定而準備，切片03是頁面背景圖、切片15是版面區上下背景、切片18是頁尾左右重複延伸時使用。
STEP2.
請執行「檔案」→「轉存」→「儲存為網頁用」指令，接著使用切片選取工具，分別點取設定各切片，大部分切片含有漸層效果影像，於最佳化控制版上設定檔案格式，均為JPEG、品質約70％即可。
請執行「檔案」→「轉存」→「儲存為網頁用」指令，接著使用切片選取工具，分別點取設定各切片，大部分切片含有漸層效果影像，於最佳化控制版上設定檔案格式，均為JPEG、品質約70％即可。
按下「儲存」，設定「存檔類型」為HTML和影像、「切片」為全部切片，完整儲存出包含網頁格式與影像圖檔至練習網站資料夾內。
STEP3.
回到Dreamweaver直接開啟所儲存的HTML頁面，頁面中已包含組合所有影像切片的隱形表格與影像。點取整個內容表格，設定表格置中對齊。
回到Dreamweaver直接開啟所儲存的HTML頁面，頁面中已包含組合所有影像切片的隱形表格與影像。點取整個內容表格，設定表格置中對齊。
STEP4.
點取內容區域的影像必直接刪除，再選取整個表格切換至分割編輯狀態:
點取內容區域的影像必直接刪除，再選取整個表格切換至分割編輯狀態:
在該<table>標籤內加入background="images/dw01_15.jpg"，完成表格背景影像延伸。
STEP5.
執行【檔案 > 頁面屬性】，由頁面屬性設定整個頁面的文字顏色（白色）、背景顏色:#343434(同版型設計圖下方影像背景色)、背景影像:dw01_03.jpg、重複:repeat-x(完成左右背景圖延伸)、邊界均為0。
執行【檔案 > 頁面屬性】，由頁面屬性設定整個頁面的文字顏色（白色）、背景顏色:#343434(同版型設計圖下方影像背景色)、背景影像:dw01_03.jpg、重複:repeat-x(完成左右背景圖延伸)、邊界均為0。
STEP6.
在內容區儲存格之內插入1列、3欄、寬：100%之隱形表格，調整表格分隔線將內容區塊位置固定好（3欄是為了要控制文字左右縮排位置用），並在中間儲存格內加入頁面文字內容，調整分隔線讓內容最完善的顯示在中央。
在內容區儲存格之內插入1列、3欄、寬：100%之隱形表格，調整表格分隔線將內容區塊位置固定好（3欄是為了要控制文字左右縮排位置用），並在中間儲存格內加入頁面文字內容，調整分隔線讓內容最完善的顯示在中央。
按下【F12】瀏覽，頁面已經不會因為加入內容而破圖，只有左側圖與右側邊圖並沒有準確靠上，解決方式其實只要設定該儲存格垂直靠上即可。
STEP7.
依序分別點取版面左側圖以及右側並暫時剪下，方便設定該儲存格垂直靠上對齊，再貼回原暫時剪下的圖即可，再次瀏覽檢視時，左右二側的圖片就會完整靠上而不中斷。
依序分別點取版面左側圖以及右側並暫時剪下，方便設定該儲存格垂直靠上對齊，再貼回原暫時剪下的圖即可，再次瀏覽檢視時，左右二側的圖片就會完整靠上而不中斷。
STEP8.
繼續設定頁面下方頁尾的左右重複延伸；首先於頁面最下方插入1列、1欄、寬：100%、邊框間距內距均為0之隱形表格；
繼續設定頁面下方頁尾的左右重複延伸；首先於頁面最下方插入1列、1欄、寬：100%、邊框間距內距均為0之隱形表格；
繼續在此表格內插入1列、1欄、寬：980、邊框間距內距均為0之隱形表格，在此表格內請依序剪下貼上頁尾區的二張圖片（dw01_17.jpg與dw01_18.jpg）。
STEP9.
選取下方外圍1列、1欄、寬：100%之表格，切換至分割編輯，在該<table>標籤內加入background="images/dw01_18.jpg"，完成表格背景影像延伸。
選取下方外圍1列、1欄、寬：100%之表格，切換至分割編輯，在該<table>標籤內加入background="images/dw01_18.jpg"，完成表格背景影像延伸。
接著讓滑鼠游標於剪下圖片後剩餘的列之內，執行『編輯 > 表格 > 刪除列』，完成頁尾的整理。
STEP10.
最後要來設定按鈕的滑鼠變換影像，請回到photoshop在圖層控制版上顯示『按鈕滑上』圖層，再次「檔案」→「轉存」→「儲存為網頁用」指令。接著使用切片選取工具，選取到上方六個按鈕與右側三個按鈕的切片。按下「儲存」，設定『檔名』為dw01-over、「存檔類型」為僅影像、「切片」為選取的切片，完整儲存出6個按鈕滑上時影像圖檔至練習網站資料夾內。
最後要來設定按鈕的滑鼠變換影像，請回到photoshop在圖層控制版上顯示『按鈕滑上』圖層，再次「檔案」→「轉存」→「儲存為網頁用」指令。接著使用切片選取工具，選取到上方六個按鈕與右側三個按鈕的切片。按下「儲存」，設定『檔名』為dw01-over、「存檔類型」為僅影像、「切片」為選取的切片，完整儲存出6個按鈕滑上時影像圖檔至練習網站資料夾內。
STEP11.
再回到Dreamweaver來設定按鈕的滑鼠變換影像，首先先刪除第一顆按鈕，重新插入滑鼠變換影像，設定影像名稱:b1、原始影像dw01_04.jpg、滑鼠變換影像dw01-over_04.jpg，按下確定完成第一顆按鈕滑鼠變換影像設定；
再回到Dreamweaver來設定按鈕的滑鼠變換影像，首先先刪除第一顆按鈕，重新插入滑鼠變換影像，設定影像名稱:b1、原始影像dw01_04.jpg、滑鼠變換影像dw01-over_04.jpg，按下確定完成第一顆按鈕滑鼠變換影像設定；
相同方式請依序完成另外五個按鈕的滑鼠變換影像(影像名稱:b2-b6)。儲存檔案預覽，即可檢視整理後的版面與按鈕的滑鼠變換影像效果。
相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用
為什麼會看到廣告
留言0
查看全部