如何在網頁中放置可以捲動的區域?
如何讓好幾個連結內容共用區域卻不用框架?
這兩個排版經常碰到的需求,使用Iframe都可以輕易地做到。

目標:建立一個網頁,導覽列有三個連結,點選連結時,三個連結的內容都會出現在Iframe裡

1.首先請下載這個Iframe extension --- PD Iframe Object
其實它只是一個視覺輔助工具,讓你透過輸入的方式決定你要把Iframe放在哪裏與調整大小。


2.先準備一個網頁就叫做Iframe.htm,並l建立兩列式表格,上列放導覽列而下列是要插入Iframe的位置。同時準備三個網頁稍後對應三個連結。


3.安裝好Iframe extension後可在常用面板上看到iframe的圖示,或是在插入-->版面物件-->iframe裡。



  ■source:為目前這個Iframe的連結頁面
  ■scrolling:用來指定iframe是否可以捲動,先選擇auto
  ■Name:替iframe取個名字,這個很重要,他是用來使外部連結辨認的關鍵

iframe的語法

此時按一下F12,就可以看到mainframe1裡的內容出現在Iframe裡了


4.接下來則分別替三個導覽指定連結。注意在目標這裡輸入你的Iframe的名字。

待三連結都設定好後,按F12預覽就能看到三格連結內容都乖乖的出現在iframe裡了。


5.將其中一個網頁輸入比較長的內容,就會發現Iframe自動出現捲軸了。



注意事項
  ■你也可以透過設定連結屬性面板裏的目標=Iframe名稱,來將外部連結連到你的Iframe裡。
  ■Iframe的extension只適用於第一次建立,以後要修該iframe的內容,就必須手動去改code。
  ■一個網頁裡可以用數個iframe,只要你不搞混的話。





不傳密技!

Q.我的Iframe都會有兩個方向的捲軸,不管我怎麼調整內容都是如此,有什麼辦法只顯示一個方向的捲軸嗎?
 這個現象也曾困擾moody良久,今天在此公開這個密技,只要將scrolling這個參數設成yes!那Iframe就只會有一個方向的捲軸囉!




arrow
arrow
    全站熱搜

    fennser 發表在 痞客邦 留言(14) 人氣()