單欄式內頁框版面與頁面連結
閱讀時間約 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專業網頁編輯應用
為什麼會看到廣告
29會員
161Content count
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
你可能也想看
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
郝廣才日日談週一至週五晚上8點17分，都會刊出以下的「頭腦菜單」：
❶ 主菜：讀一論，談論一個改變世界的英雄，在當天發生的關鍵事件 or 談論一個改變世界的創意，和產生創意的方法
❷ 開胃菜：君一笑，真實人物的真實幽默
❸ 湯品：觀一得，一部電影電流最強的神對白
❹ 甜點：偶一悟，每日思考一領悟
一頁式網站又稱為單頁式網站，重點在一個頁面內呈現所有該產品或系列商品的所有資訊，完全聚焦在銷售產品項目上，降低因跳轉網頁而導致跳出率上升。單頁銷售網站最好的優點，容易讓使用者不自覺的一直往下滑，不小心滑到使用者的痛點，隨時就可以結帳收單，這是一種非常直接式的導購，將產品的特色、內容行銷、一次性的端到
發現google協作平台提供新的、簡單的網頁製作功能，便拿手邊正在進行的案子元素來做一個單書頁，也隨手拿來做成教學。（感謝麥田出版提供圖文資料）如果有興趣的人想研究，這功能幾乎也能做成一個陽春但還算功能齊全的「網站」或者個人的基本文字連載之類的，這就容後再談了。
面對具備中隔板分成上下段落又彼此干涉的段落造型隔板，上通膝蓋、下達腳踝又前推膝裝甲的小腿內構，究竟該如何規替預留未來施作的空間、細緻的呈現複雜的造型？
大腿摩擦力咬合式簡易內構的延伸，舉一反三，製作的變通與更多細節的提點，盡收小腿內構回中！
和近全數位可直接規劃外殼輪廓到內軸棒插槽的鋼普拉不同，手工製作的巴力必須由外向內規劃零件集成的布局，才能賦予散件組裝的能力。
緊接而來的腿部製作五連章，大頭老師將沿著大腿、小腿與膝關節的順序展開教學─如何借助干涉判定確認順序？要如何整合內構與外部造型的漸變？距離站立大地的目標、迎接全體的中段！
吳允方，畢業於政大廣告系。畢業後的她，曾經一度輾轉在不同的產業擔任行銷工作，而目前她則落腳在驚喜製造Surprise Lab.擔任行銷公關。我們表面上看到允方的工作經驗彷彿與行銷離不開掛勾，然而她的興趣及想法卻比我們想像的來得更多。表演、政治、創作及電影幕後製作等她都有所涉獵，到最後還是選擇了行銷。
緩慢不中斷地帶過裸身的靜距離鏡頭，像是親手撫摸過這些被影像呈現出來的肉身細節，暗示觀眾關於全片一再呈現出來的一個重要命題：「觀看不僅僅只能是旁觀，而是能夠透過觀看他人肉身與慾望的展演，尋回對自身肉體與慾望的親密體感。」因此全片的角色鮮少肢體接觸，卻引爆出最赤裸的慾望交流。
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
郝廣才日日談週一至週五晚上8點17分，都會刊出以下的「頭腦菜單」：
❶ 主菜：讀一論，談論一個改變世界的英雄，在當天發生的關鍵事件 or 談論一個改變世界的創意，和產生創意的方法
❷ 開胃菜：君一笑，真實人物的真實幽默
❸ 湯品：觀一得，一部電影電流最強的神對白
❹ 甜點：偶一悟，每日思考一領悟
一頁式網站又稱為單頁式網站，重點在一個頁面內呈現所有該產品或系列商品的所有資訊，完全聚焦在銷售產品項目上，降低因跳轉網頁而導致跳出率上升。單頁銷售網站最好的優點，容易讓使用者不自覺的一直往下滑，不小心滑到使用者的痛點，隨時就可以結帳收單，這是一種非常直接式的導購，將產品的特色、內容行銷、一次性的端到
發現google協作平台提供新的、簡單的網頁製作功能，便拿手邊正在進行的案子元素來做一個單書頁，也隨手拿來做成教學。（感謝麥田出版提供圖文資料）如果有興趣的人想研究，這功能幾乎也能做成一個陽春但還算功能齊全的「網站」或者個人的基本文字連載之類的，這就容後再談了。
面對具備中隔板分成上下段落又彼此干涉的段落造型隔板，上通膝蓋、下達腳踝又前推膝裝甲的小腿內構，究竟該如何規替預留未來施作的空間、細緻的呈現複雜的造型？
大腿摩擦力咬合式簡易內構的延伸，舉一反三，製作的變通與更多細節的提點，盡收小腿內構回中！
和近全數位可直接規劃外殼輪廓到內軸棒插槽的鋼普拉不同，手工製作的巴力必須由外向內規劃零件集成的布局，才能賦予散件組裝的能力。
緊接而來的腿部製作五連章，大頭老師將沿著大腿、小腿與膝關節的順序展開教學─如何借助干涉判定確認順序？要如何整合內構與外部造型的漸變？距離站立大地的目標、迎接全體的中段！
吳允方，畢業於政大廣告系。畢業後的她，曾經一度輾轉在不同的產業擔任行銷工作，而目前她則落腳在驚喜製造Surprise Lab.擔任行銷公關。我們表面上看到允方的工作經驗彷彿與行銷離不開掛勾，然而她的興趣及想法卻比我們想像的來得更多。表演、政治、創作及電影幕後製作等她都有所涉獵，到最後還是選擇了行銷。
緩慢不中斷地帶過裸身的靜距離鏡頭，像是親手撫摸過這些被影像呈現出來的肉身細節，暗示觀眾關於全片一再呈現出來的一個重要命題：「觀看不僅僅只能是旁觀，而是能夠透過觀看他人肉身與慾望的展演，尋回對自身肉體與慾望的親密體感。」因此全片的角色鮮少肢體接觸，卻引爆出最赤裸的慾望交流。