標籤

4GL (1) 人才發展 (10) 人物 (3) 太陽能 (4) 心理 (3) 心靈 (10) 文學 (31) 生活常識 (14) 光學 (1) 名句 (10) 即時通訊軟體 (2) 奇狐 (2) 爬蟲 (1) 音樂 (2) 產業 (5) 郭語錄 (3) 無聊 (3) 統計 (4) 新聞 (1) 經濟學 (1) 經營管理 (42) 解析度 (1) 遊戲 (5) 電學 (1) 網管 (10) 廣告 (1) 數學 (1) 機率 (1) 雜趣 (1) 證券 (4) 證券期貨 (1) ABAP (15) AD (1) agentflow (4) AJAX (1) Android (1) AnyChart (1) Apache (14) BASIS (4) BDL (1) C# (1) Church (1) CIE (1) CO (38) Converter (1) cron (1) CSS (23) DMS (1) DVD (1) Eclipse (1) English (1) excel (5) Exchange (4) Failover (1) Fedora (1) FI (57) File Transfer (1) Firefox (3) FM (2) fourjs (1) Genero (1) gladiatus (1) google (1) Google Maps API (2) grep (1) Grub (1) HR (2) html (23) HTS (8) IE (1) IE 8 (1) IIS (1) IMAP (3) Internet Explorer (1) java (4) JavaScript (22) jQuery (6) JSON (1) K3b (1) ldd (1) LED (3) Linux (117) Linux Mint (4) Load Balance (1) Microsoft (2) MIS (2) MM (51) MSSQL (1) MySQL (27) Network (1) NFS (1) Office (1) OpenSSL (1) Oracle (126) Outlook (3) PDF (6) Perl (60) PHP (33) PL/SQL (1) PL/SQL Developer (1) PM (3) Postfix (2) postfwd (1) PostgreSQL (1) PP (50) python (5) QM (1) Red Hat (4) Reporting Service (28) ruby (11) SAP (234) scp (1) SD (16) sed (1) Selenium (3) Selenium-WebDriver (5) shell (5) SQL (4) SQL server (8) sqlplus (1) SQuirreL SQL Client (1) SSH (2) SWOT (3) Symantec (2) T-SQL (7) Tera Term (2) tip (1) tiptop (24) Tomcat (6) Trouble Shooting (1) Tuning (5) Ubuntu (37) ufw (1) utf-8 (1) VIM (11) Virtual Machine (2) VirtualBox (1) vnc (3) Web Service (2) wget (1) Windows (19) Windows (1) WM (6) Xvfb (2) youtube (1) yum (2)

2014年4月8日 星期二

framset 分割視窗

http://www.pcnet.idv.tw/pcnet/html/14.htm

所謂分割視窗即是將流覽視窗分割成數個範圍,每個範圍稱為一個 frame ,每個 frame 都有自己的名字,可以彼此互通也可以不相干擾。
分割視窗只有一個命令就是 <frameset> 不過有幾個附加指令可用,先來看看如何分割視窗。
<frameset>...</frameset>
frameset 不可以和 body.../body 同時存在,同時存在時那一個寫在前在前,哪一個生效。
水平分割視窗
<frameset rows=> - 決定上下共分為幾個視窗
垂直分割視窗
<frameset cols=> - 決定左右共分為幾個視窗
決定分割大小
這裡rows=和cols=填的不是分割數,而是直接填入每個分割視窗的大小,數值和數值之間用逗號隔開即可。
而填入的數字可為「點數」「百分比」「大小比」如:
<frameset rows=100,200,300> 固定大小為100點200點和300點 或
<frameset rows=20%,20%,60%> 注意總和等於100% 或
<frameset rows=1*,2*,3*> 使視窗依 1:2:3 的比例分割。三種寫法可同時存在如:
<frameset rows=20%,200,1*,1*> 此時瀏覽器會先分 200 點給第二個視窗,其餘的20% 給第一個視窗,剩下再 1:1 分配。
指定分割後視窗顯示的內容
分割完成視窗後要指定每個視窗所要顯示的內容,語法如:
<frame src=顯示的文件名稱> 您可以指定一份文件或一個圖案在視窗中,先看個例子
<title>Frame 實例</title>
<frameset cols=15%,50%,*>
   <frame src="h-1.html" name=f1>
   <frame src="h-2.html" name=f2>
   <frame src="h-3.html" name=f3>
</frameset>
行2 與行 6是成對的標籤,在之中宣告分割的個別內容。指定視窗分割為垂直三部分,比例為第一是整個視窗大小的 15%,第二部份指定大小為整個視窗的 50% ,剩下的則是第三部份的大小。行 3,4,5 則是指定每個分割出來的視窗顯示不同的文件。
視窗的巢狀結構
所謂巢狀結構,我想是翻譯來的名稱,事實下並沒有那麼複雜。只是要在視窗中再分割視窗的方法而己。 像是寫程式中的for...next中又有for..next一樣。 要注意的是順序。我們將上一個例子再加以修改:  
我們將第一個視窗再分割成兩個視窗,同樣的第三個視窗也再分為兩個視窗,這樣的結構就稱為巢狀視窗結構。這種巢狀結構怎麼宣告呢?看底下的原始文件內容:
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
<title>Frame 實例</title>
<frameset cols=15%,50%,*>
   <frameset rows=30%,*>
     <frame src="h-1.html" >
     <frame src="h-2.html" >
   </frameset>
   <frame src="h-3.html"3>
   <frameset rows=70%,*>
     <frame src="h-4.html" >
     <frame src="h-5.html" >
   </frameset>
</frameset>
行2 與行 12是成對的標籤,在之中宣告分割的個別內容。和先前不同的地方是原本指定第一個分割視窗的行3現在則擴張成為行3,4,5,6把原本指定顯示的文件內容 指令改成了另一個分割視窗的指令。原本的行5也改成了行8,9,10,11分割視窗的指令。如此一來,就完成了所謂巢狀視窗的架構了。
指定新文件到分割的視窗
分割視窗有什麼好處呢?基本上,是否分割視窗視需求而定,一般而言,要是網站的設計之中有某些部份是每頁都必需 顯示的,好比選單之類的,那麼使用分割視窗可以減少許多撰寫 HTML 文件的麻煩,因為同樣的選單部份不必每份文件都撰寫,像先前我們舉例的五子棋網站,在左下方的功能選單不而要隨著正中央棋局的改變而改變,左方是聊天室, 聊天室中的資料也都隨時在更新,所以選單也不需要重新讀取一次,這麼一來,使用分割視窗可以讓整個製作變的簡單許多。接下來的問題是:如何能讓選單中的超 連結顯示在指定的視窗中呢?
要解決這個問題,我們必需在宣告分割視窗時對每個視窗加以命名,然後在超連結時使用 target 標籤指定顯示文件的視窗名稱即可。如圖:
當我們按下左邊 h-1.html 的超連結,當然是希望 h-1.html 的內容會顯示在右邊的視窗中,這時我但要修正一下分割視窗的宣告,改成:
<title>Frame 實例</title>
<frameset cols=15%,*>
   <frame src="f-menu.html" name=menu>
   <frame src="f-main.html" name=main>
</frameset>
注意到我們在<frame src=文件名稱>之後多加了 name=menu 的參數,這個參數指定該視窗的名稱,一旦一個分割視窗指定了名稱之後,往後在使用超連結時,就能以名稱的方式指定文件顯示在該視窗,我們來看看 f-menu.html 的內容是怎麼寫的。
<a href=h-1.html target=main>h-1.html</a>
<a href=h-2.html target=main>h-2.html</a>
<a href=h-3.html target=main>h-3.html</a>
<a href=h-4.html target=main>h-4.html</a>
<a href=h-5.html target=main>h-5.html</a>
注意到了嗎,在超連結的指定上,我們多加了 target 標籤來指定文件顯示的視窗。
這裡要注意一個地方:如果超連結指定的 target 名稱不是分割視窗中宣告的視窗名稱時,那麼流覽器會新開一個視窗來代替。

沒有留言:

張貼留言