單欄式內頁框版面與頁面連結
2020/05/12閱讀時間約 3 分鐘
內頁框來表現網站內頁，最適合的就屬單欄式的頁面設計，可在不捲動到頁面內容的狀態下， 只在內容區局部捲動捲軸瀏覽內容，讓網站內頁有不一樣的表現方式。
A.建構初始頁面
STEP1.
開啟「dw03.psd」為預先設計與切割完成的畫面，其中切片編號11 的範例要加入內嵌頁框內容，該區域內容可以捲動瀏覽。執行「檔案」→「轉存」→「儲存為網頁用」， 儲存出包含所有切片完整網頁檔（HTML 和影像）。
開啟「dw03.psd」為預先設計與切割完成的畫面，其中切片編號11 的範例要加入內嵌頁框內容，該區域內容可以捲動瀏覽。執行「檔案」→「轉存」→「儲存為網頁用」， 儲存出包含所有切片完整網頁檔（HTML 和影像）。
STEP2.
在 Dreamweaver 開啟所儲存出之網頁檔，點取包含整個內容的表格，設定置中對齊，完成水平置中。執行「檔案」→「頁面屬性」， 設定頁面背景色可使用顏色滴管滴取版面邊緣藍色，完成此頁面版型編排，按下【F12】瀏覽檢視置中的結果。
在 Dreamweaver 開啟所儲存出之網頁檔，點取包含整個內容的表格，設定置中對齊，完成水平置中。執行「檔案」→「頁面屬性」， 設定頁面背景色可使用顏色滴管滴取版面邊緣藍色，完成此頁面版型編排，按下【F12】瀏覽檢視置中的結果。
STEP3.
新增「dw03-iframe1.html」空白頁面，執行「檔案」→「頁面屬性」，設定背景影像：images/dw03_11.jpg、重複：no-repeat。
新增「dw03-iframe1.html」空白頁面，執行「檔案」→「頁面屬性」，設定背景影像：images/dw03_11.jpg、重複：no-repeat。
STEP4.
點取左下方<body>再由屬性控制板上按下【編輯規則】，設定更詳細 CSS 規則定義：背景分類內的『Background-attachment:fixed（固定）』，如此即可瀏覽捲動捲軸時背景圖固定不動。
點取左下方<body>再由屬性控制板上按下【編輯規則】，設定更詳細 CSS 規則定義：背景分類內的『Background-attachment:fixed（固定）』，如此即可瀏覽捲動捲軸時背景圖固定不動。
STEP5.
於 dw03-iframe1.html 頁面中插入 2列、1 欄、寬度 850px（略小於 900）之隱形表格，於表格第一列插入單元標題圖dw03-b1.png，第二列內置入文字圖片內容，此頁面即為內頁框內容。
於 dw03-iframe1.html 頁面中插入 2列、1 欄、寬度 850px（略小於 900）之隱形表格，於表格第一列插入單元標題圖dw03-b1.png，第二列內置入文字圖片內容，此頁面即為內頁框內容。
STEP6.
回到 dw03.html，點取要嵌入內頁框的位置，目前此位置內是一張預留的圖片，請點取該圖片檢視圖片寬與高（900╳458），更改為插入<iframe>內容:
回到 dw03.html，點取要嵌入內頁框的位置，目前此位置內是一張預留的圖片，請點取該圖片檢視圖片寬與高（900╳458），更改為插入<iframe>內容:
設定『Source』iframe 內容來源網頁（dw03-iframe1.html）、『height(高)：458（原影像高）、width(寬)：900（原影像寬）、scrolling(捲軸)：auto（自動判斷）、name（名稱 /做為連結目標使用）：iframe，按下確定完成插入內頁框設定。
STEP7.
儲存檔案完成內嵌頁框設定，內嵌頁框區呈現灰色標示，按下【F12】即可預覽。內嵌頁框的捲軸功能也不會影響主頁面。
儲存檔案完成內嵌頁框設定，內嵌頁框區呈現灰色標示，按下【F12】即可預覽。內嵌頁框的捲軸功能也不會影響主頁面。
B.單欄式內頁框網站建置
內嵌頁框除了使用在單一頁面外，還可以內頁框表現網站的內頁版型，必需要正確設定連結， 才能在瀏覽時按下連結後頁面切換時，搭配版型讓連結頁面顯示在內頁框之內，讓連結的網頁顯示在固定區域中。
STEP1.
繼續使用 dw03.html 與 dw03-iframe1.html， 至檔案控制版上複製 dw03-iframe1.html，請點取dw03-iframe1.html 並按下『Ctrl+D』一共複製成四個檔案，請依序更改檔名成dw03-iframe2.html～dw03-iframe5.html 共四個內頁。
繼續使用 dw03.html 與 dw03-iframe1.html， 至檔案控制版上複製 dw03-iframe1.html，請點取dw03-iframe1.html 並按下『Ctrl+D』一共複製成四個檔案，請依序更改檔名成dw03-iframe2.html～dw03-iframe5.html 共四個內頁。
STEP2.
依序開啟 dw03-iframe2.html～dw03-iframe5.html，更改頁面上的單元標籤圖（dw03-b2.png～dw03-b5.png）與文字內容，均儲存檔案完成內頁的準備。
依序開啟 dw03-iframe2.html～dw03-iframe5.html，更改頁面上的單元標籤圖（dw03-b2.png～dw03-b5.png）與文字內容，均儲存檔案完成內頁的準備。
STEP3.
回到 dw03.html，設定每個按鈕的連結設定，依序設定相對應的頁面連結（dw03-iframe1.html～dw03-iframe5.html），注意！在每個連結的目標欄位都要設定為「iframe」（內頁框名稱），完成之後五個按鈕的連結頁面都將會顯示在內頁框中。
回到 dw03.html，設定每個按鈕的連結設定，依序設定相對應的頁面連結（dw03-iframe1.html～dw03-iframe5.html），注意！在每個連結的目標欄位都要設定為「iframe」（內頁框名稱），完成之後五個按鈕的連結頁面都將會顯示在內頁框中。
STEP4.
儲存檔案完成內嵌頁框連結設定，按下【F12】即可預覽，按下上方內頁按鈕即可檢視連結後的內容均在內頁框範圍內。
儲存檔案完成內嵌頁框連結設定，按下【F12】即可預覽，按下上方內頁按鈕即可檢視連結後的內容均在內頁框範圍內。
相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用
為什麼會看到廣告
留言0
查看全部