CHAPTER 11 善用框架分割網頁版面.

Presentation on theme: "CHAPTER 11 善用框架分割網頁版面."— Presentation transcript:

1 CHAPTER 11 善用框架分割網頁版面

2 11-1 網頁版型與框架 當您瀏覽網站時，應該會經常看到被分割成不同區塊的網頁，這就是所謂的框架效果。
網頁版型與框架 當您瀏覽網站時，應該會經常看到被分割成不同區塊的網頁，這就是所謂的框架效果。 透過視窗的分割可以讓網頁呈現更多的東西，也便於網頁觀眾瀏覽網頁。

3 認識框架 框架就是將網頁加以分割，使網頁分隔為不同的版面，每個版面都可以放置不同的內容。
部份框架的內容是固定的，而部份框架的內容則是活動的，可以此來進行版面配置。

4 圖 框架網頁

5 使用框架網頁的優缺點 使用框架的好處是不需要在每個網頁都放置導覽列或選單等固定的內容，只有變動的主頁區需要讀取，可以加快網頁的讀取效率。
缺點則是在設計含框架的網站時，必須考量到網頁的整體設計和版面，而且在設定超連結時，也會較為複雜。

6 製作框架網頁 要在網頁上製作分割為兩個以上網頁的效果，要透過<FRAME>標籤和<FRAMESET>來設定。 使用框架來分割網頁時，不是在<BDOY>標籤中寫入網頁程式碼，而是在<GRAMESET>標籤之中。

7 製作框架網頁的第一步 製作框架網頁時，必須先準備至少二個網頁文件才能動手實作，也就是要先完成子網頁的內容，再動手製作放置子網頁的母網頁。

8 網頁的切割 透過COLS和ROWS這兩個屬性就可以設定要左右分割還是上下分割網頁視窗。
常見的網頁多半是由不均等的視窗組成，這時只要改用百分比數字或是直接加上數值來區分就可以了。

9 框架網頁的基本屬性設定 本節將說明<FRAMESET>標籤和<FRAME>標籤常用的屬性，來調整和美化你的框架網頁。

10 邊界框架的設定 框架網頁預設是會有邊界的，若不希望顯示窗格的邊界，可以更改其屬性。 相關屬性： FRAMEBORDER BORDER
BORDER COLOR FRAMESPACING

11 <FRAME>標籤的屬性設定
替框架命名 <name> 設定分割網頁視窗的捲軸 <SCROLLING> 固定分割視窗的大小 <NORSIZE> 網頁內容與邊界距離的設定 <MARGINWIDTH> <MARGINHEIGHT>

12 不支援框架的瀏覽器設定 當網頁觀眾的瀏覽器不支援框架效果時，將會看不到任何內容。利用<NOFRAMES>標籤加上說明文字，即可讓這些使用者知道為甚麼看不到網頁。

13 框架網頁的超連結設定 設定框架網頁時最麻煩的就是超連結的設定，因為必須逐一設定超連結所顯示目標視窗的位置，是既有視窗(也就是原視窗)、新視窗或是框架網頁。

14 選單列超連結的設定 要設定超連結時要在<A HREF>之後加上TARGET屬性來指定開啟的目的視窗。 框架網頁名稱之外的設定值：
_TOP _BLANK _SELF _PATENT

15 圖 在框架網頁顯示網頁

16 框架的巢狀結構 想要同時上下和左右分割，或者是製作左右兩邊不均等的網頁時，就必須使用巢狀結構。

17 多層的框架設定 巢狀結構就是在框架底下還有第二層的框架，將整個視窗切割為數個小視窗。
以上、左右分割的視窗來說。就有圖11-21的這二種分割方式。

18 圖 不同的切割方式