Transcript 設定分割視窗的捲軸
第 15 講次 (book2:chap8+chap9) 網際網路導論 嘉義大學資訊工程學系李龍盛老師 [email protected] 本著作除另有註明外，採取創用 CC「姓名標示－非商業性－相同 方式分享」台灣3.0版授權釋出 1 Frame 互動式表單 Content 2 frame 3 瀏覽分割視窗的網站, 會發現視窗中所分割出來 的子視窗相當於各自獨立的瀏覽器, 每個子視窗 都有自己的 URL。有時候還會看到在某個分割視 窗內按下的超連結, 內容卻在另一個分割視窗中 出現。 對網頁的設計者而言, 分割視窗可以對網頁做更 多的掌控與變化, 也能使整個網站顯得更具層次 感, 讓瀏覽該站的使用者不至於兜幾個圈子就迷 路, 只要設計一個導覽子視窗, 隨時可以輕鬆地回 到首頁。 分割視窗的操作特色 Frame主要的部分是 <frameset> 、 <frame> 、<noframes> 幾個簡單的標籤。 Frame 實作初探 <frameset> 與 <body> 標籤具有同等地位, 也就是說一個 HTML 檔案中只能存在兩者其中之 一。所以在檢視有分割視窗的網頁原始碼時, 只 會看到 <frameset> 標籤, 而視窗中的內容則 放在其它檔案內。但是有一個例外的情況, <body> 可以放在 <noframes> 標籤內。如此 當使用者的瀏覽器不支援 <frameset> 標籤的 時候，仍然可以看到放在<noframes> 標籤的 內容。 製作分割視窗－<frameset> 我們先從簡單的例子介紹 <frameset cols=“*,*”> <frame src=“1.htm”> <frame src=“2.htm”> </frameset> <frameset cols="*,*">...</frameset>這對 標籤將整個視窗從中劃分成左右兩個相同大小的 分割視窗。而 <frame> 便決定了每個子視窗中 的網頁內容。 <frameset>例子 <frameset> 標籤是用來分割子視窗的, 且必須與cols 或 rows 屬 性的其中一種互相配合使用, 以決定是由上而下或是由左至右來分割 視窗。 cols、rows 除了表示橫向或垂直分割外, 也能定義要切割成幾個子 視窗, 及每個子視窗所佔的大小或比例。這兩種屬性值的設定方法都 一樣, 只是上下分割或左右分割的差別而已。 <frameset cols="*,*"> 標籤, 會將視窗劃分出左、右兩個相等視 窗。同理推之, <frameset cols="*,*,*"> 標籤會將視窗劃分成左、 中、右三個相等的子視窗。 其中每個 『,』 就代表分割 1 次, "*" 則表示子視窗會隨著瀏覽器的 主視窗自動調整尺寸, 例如 "*,*" 表示兩個一樣大小的子視窗。如果 您使用 "2*,*", 則表示第一個子視窗是第二個子視窗的 2 倍, 即使 您調整瀏覽器的視窗大小也會得到相同的比例。 設定分割窗大小－ <frameset cols>、<frameset rows> 其實調整分割視窗大小的設定值, 除了 “*” 外, 也可以 直接指定百分比數值。筆者將上面的範例改寫如下： <frameset cols=“66%,33%”> <frame src=“1.htm”> <frame src=“2.htm”> </frameset> 這個結果與 "2*,*" 的結果一模一樣。而 100% 當然是 指整個瀏覽器視窗的大小。 調整分割視窗大小還有一個辦法, 就是直接填上視窗所佔 的圖點數目。將前面範例中的 <frameset cols=“2*,*”> 改寫成 <frameset cols=“120,*”>, 則 左邊子視窗會固定在120 個圖點的大小, 其餘的部分則組 成右視窗, 且右邊的視窗大小會隨著整個瀏覽器視窗大小 做動態調整。 以百分比設定分割子視窗大小 剛剛看了幾個用 <frameset> 標籤分割視窗的 範例, 很明顯的會看到一條用來分割窗格的分割 線。以下是幾個 <frameset> 標籤中, 用來設定 邊界的屬性： ◦ frameborder：設定是否顯示窗格的邊界。1 或 yes 是預設值, 表示要顯示邊界；0 或 no 則是不顯示邊界。 ◦ border：用來設定窗格邊界的厚度。 ◦ framespacing：效果與border相同。 設定 frameset 的邊界 scrolling 屬性決定分割視窗中的捲軸是否顯示出來。 <frame scrolling=“no|yes|auto”> scrolling 的預設值為 auto, 也就是說分割視窗內所 顯示的內容沒有超出這個視窗的大小時, 就不會加上 捲軸; 一旦所顯示的內容超出分割視窗的大小時,則自 動加上捲軸以供使用。 所以當指定 scrolling="yes" 時, 不管內容多寡, 瀏 覽器都會在該分割視窗加上垂直與水平的捲軸。反之, 當 scrolling="no" 時, 瀏覽器不會為該分割視窗加 上任何捲軸。 設定分割視窗的捲軸－<frame scrolling> 若不希望使用者在連上網站後, 任意更動某些分 割視窗的大小, 可以在該分割視窗的<frame> 標籤內加上 noresize 屬性。如此便能限制使用 者調整這個分割視窗的大小。 <frame noresize> 鎖住分割視窗的大小－<frame noresize> 瀏覽網頁時, 視窗的上下左右邊界都會留下一些 空白, 以增加美觀。而分割視窗時, 每個子視窗都 被當作獨立的瀏覽器視窗, 所以每個分割視窗的 四邊也都可以設定內容與邊界的距離。 <frame marginwidth=“距離”> 若要設定上下間距的大小, 則可以使用 marginheight 屬性。 設定視窗內容與上下左右邊界的距離－ <frame marginwidth> 除了早期的瀏覽器, 現在幾乎沒有不支援 Frame 的瀏覽器了。但是萬一, 使用者的瀏覽器無法顯 示分割視窗時，這時 <noframes> 標籤就有用 了, 您可以在 <frameset>...</frameset> 之 間加上 <noframes>...</noframes> 標籤。 然後在 <noframes> 標籤中加入一段說明文字, 則不支援 Frame 的瀏覽器, 仍可以顯示這段說明 文字。 瀏覽器不支援 Frame 時所顯示的訊息 －<noframes> 巢狀架構應用到 Frame 的編輯上, 則是視窗分割之 後, 在某子視窗下又可以再次分割出更多的子視窗。 <frameset cols=“*,*”> <frame src=“1.htm”> <frameset rows=“*.*”> <frame src=“2-1.htm”> <frmae src=“2-2.htm”> </frameset> </frameset> 第一組 <frameset> 標籤將主視窗分成左右兩個後, 第二組 <frameset> 標籤又再將右邊視窗分割出上、 下兩個更小的子視窗。 <frameset> 的巢狀結構 如何讓使用者在按下子視窗中的超連結, 卻由另 外一個子視窗中顯示這個超連結的內容。 首先我們必須為目的視窗 (要顯示連結內容的分 割視窗) 用 name 屬性取個名字。然後在超連結 <a href> 語法中, 加上 target 屬性指向目的視 窗。 在子視窗顯示超連結內容－<frame name>與 <a href target> target 屬性除了用來指向既有的分割視窗外, 還有幾個特殊的設定 值, 可供我們操控分割視窗, 這些設定值皆以 “_” 底線符號為起頭。 ◦ target="_blank“ 這個屬性值會讓瀏覽器開啟另一個視窗, 並將連結的網頁顯示在新的瀏覽器視 窗上。 ◦ target="_self" 這是 target 的預設值, 會將連結的網頁顯示在目前這個視窗內。您也許會問, 那要這個設定值有什麼用? 連結的網頁本來就預設顯示在目前視窗內! 如果目前的網頁上設定 <base target="某分割視窗">時, 會讓連結的畫面 呈現在某個分割視窗中。如果您希望某些連結網頁要留在目前視窗的時候, 這 個屬性值就派上用場了。 ◦ target=“_top” 這個屬性值會將瀏覽器內所有的分割視窗全都拆掉, 使連結的網頁顯示在瀏覽 器的主視窗內。當要從自己的網頁連結到別人的網頁時，最好使用這個屬性， 免得把別人的網頁內容〝鑲〞在自己的窗格中。 ◦ target="_parent“ 這個屬性值會將上一層 <frameset> 所設定的分割視窗拆掉, 使連結的網頁 顯示在上一層分割視窗內。 target 的進階應用 由於將別人的網站放在自己的 frame 中, 會有侵 權的爭議, 所以最好不要將別人的網頁放入自己 的窗格中。建議您在該超連結的 <a href>... </a> 標籤內, 加上 target="_top" 敘述(或設 成 ="_new") 即可。當然如果該頁上所有的超 連結都會通往其他網站, 那麼我們也可以直接在 檔案開頭就先設定好 <base target="_top"> 標籤。 Frame 與 Frame 相疊時, 如何回到 原來的網頁 當顯示在分割視窗中的網頁又自行分割出更下層 的視窗時, 若希望使用者瀏覽完後又想回到上一 層的分割視窗,這時就得用到 target=“_parent” 屬性值了。 Frame 與 Frame 相疊時, 如何回到 原來的網頁 本章的主題全都集中在 <frame> 等分割視窗的 標籤上, 但偏偏 <frame> 標籤又無法與 <body> 標籤共用。為了改善這種情形, 微軟首 先提出 Inline Frames 的觀念。 IE 可以在 <body> 標籤中置入 frame, 這時的 frame 性質就和 <img> 標籤所置入的圖片 (Inline image) 非常近似,所以把它稱為 Inline Frames。 嵌在網頁中的子視窗 首先要注意 <iframe> 標籤不是用在 <frameset> 之中, 而是用在 <body>...</body>之中。它的功能是在一般 的網頁中建立窗格 (inline frame), 感覺有點像 電視上的子母畫面。 定義窗格－<iframe> 剛剛我們說用 iframe 所做出來的窗格可當實際 的瀏覽器使用, 至於窗格中的超連結, 若未指定 target 屬性, 則按下超連結時, 目的網頁也都會 直接顯示在窗格中。 定義窗格－<iframe> 了解 <iframe> 之後, 接著介紹各項屬性的作用： ◦ align：窗格與文字對齊的方式, 有 left、right、top、 middle、與 bottom五種。 ◦ frameborder：設定窗格邊線的厚度。 ◦ height、width：設定窗格的高度和寬度。 ◦ marginheight、marginwidth：設定顯示內容與 上下邊界或左右邊界的距離。 ◦ name：設定窗格的名稱, 可以和target 配合使用。 ◦ scrolling：設定捲軸顯示的方式, 有yes、no、與 auto 三種。 <iframe> 的屬性 互動式表單 24 要設計可輸入資料的網頁並不困難, 麻煩的是如何 處理使用者所輸入的資料。以目前而言, 大多數的 表單資料都是透過 ASP (Active Server Page)、 PHP (PHP: Hypertext Preprocessor)、CGI (Common Gateway Interface) 程式來處理。 不過也有比較單純的處理方式, 就是將資料以電子 郵件的方式寄到自己的電子信箱中, 事後再用人工 或程式來處理這些郵件 (資料)。 前言 所有的表單內容都是放在 <form> .. </form> 標籤之中, 包括表單中的說明文字、供使用者輸 入的欄位等等。 在文件中可設定多個表單, 但是不能做巢狀的表 單, 也就是不能在 <form> 標籤中加入第二個 <form> 標籤。 建立表單－<form> 在一般表單中所看到的輸入欄位, 幾乎都是用 <input> 標籤來設定的, 只要修改其中的屬性, 就會出現不同的輸入欄位。 <input type=輸入欄位種類 name=“欄位名稱 ” value=“初始值”> 其中 type 屬性就是用來設定要使用的輸入欄位 種類, 例如一般的文字輸入欄 (text)、單選鈕 (radio)、多選鈕 (checkbox)、或是按下後就會 送出表單資料的按鈕 (button) 等等。 表單中的輸入欄位－<input> 這是最常見的輸入欄位之一, 其設定為 type=“text”, 這樣就會出現一個可供輸入的方 框。 如果想要調整方框的長度, 則可再加上 size 屬性 。若要限制使用者輸入的資料長度, 則可用 maxlength 加以設限。 請輸入你的電子郵件：<input type=“text” name=“email” size=“40” maxlength=“30”> 建立可輸入文字的欄位－<input type="text"> 將 type 設為 passward, 則可得到一個與 text 相似的輸入欄位, 不過在這個密碼欄中輸入的文 字在螢幕上都會以 『*』 或 『●』 符號取代。 密碼：<input type=“password” name=“psword” maxlength=“12”> 建立可輸入密碼的欄位－<input type="password"> 所有的表單中都會有一個送出資料的按鈕, 當使 用者按下此鈕時, 瀏覽器就會將使用者在表單中 所輸入的資料送出。 使用 type=“submit” 即可做出用來送出資料的 按鈕, 由於不須從這個按鈕本身得到資料, 所以不 用設定其 name 屬性。 此時在 value 屬性所設的文字, 會變成出現在按 鈕上的文字。 <input type=“submit” value=“送出資料”> 建立送出資料的按鈕－<input type="submit"> 有一個送出資料的按鈕, 相對的還有一個清除表 單中已輸入資料的重設鈕 (Reset), 其目的是讓 使用者在發現有輸入錯誤時, 只要按下此鈕,就能 將目前表單中所有的資料都清除掉, 以便重新輸 入。 <input type=“reset” value=“資料重填”> 建立清除輸入資料的按鈕－<input type="reset"> 表單資料在傳送時, 其資料的排列方式, 就是依各 欄位在表單中出現的先後次序, 依序以 '&' 分格 排列。至於每一欄資料則套上了我們在 <input>標籤中用 name 屬性所設的內容而成 為：『欄位的名稱=使用者輸入的值』的格式。 9-1-6 應用實例 要做出一組供使用者只能選擇其一的選擇項目時,可以 使用 type = radio,此時就會出現一個圓圈, 只要用 滑鼠在這個圓圈上按一下就會出現一個黑點, 表示已 選擇了此項。 至於要讓多個單選鈕成為同一組的選項, 只要將這幾 個單選鈕的 name 屬性設定成相同的名稱即可。 <input name=“sex” type=“radio” value=“male”>男 <input name=“sex” type=“radio” value=“female”>女 只能選擇一項的單選鈕－<input type="radio"> 若要提供可讓使用者複選的選項, 則可使用 type=checkbox 設定, 一般也是將同一組的選項設為相 同的名稱。 <input name=“course” type=“checkbox” value=“math”>數學<br> <input name=“course” type=“checkbox” value=“Eng”>英文<br> <input name=“course” type=“checkbox” value=“phy”>物理<br> 勾選其中的2項, 其傳回的資料就會是 “course=math& course=phy"。 可重複選擇的多選鈕－<input type="checkbox"> 使用影像做為輸入欄位時是以圖片做為使用者輸 入的界面, 不過使用影像的輸入欄位時, 使用者所 輸入的資料將是滑鼠在圖形上的座標值。 <input name=“coods” type=“image” src=“image/pic.jpg” align=“middle”> <br> 在圖上點選一下，就會送出圖形座標! 送出圖片的座標值－< input type="image" > name 屬性要加在 <select> 標籤中, value 屬性則 是要加在 <option> 標籤中,不過 value 屬性是可 有可無的, 因為當使用者選擇了未設定 value 屬性的 項目時, 送出的值就會是該項目的文字內容。 <select name=“course”> <option value=“1” selected>數學 <option value=“2”>英文 <option value=“3”>物理 </select> 下拉式的列表欄－<select> 與 <optioin> 列表欄預設的大小只有一列, 要檢視列表中的其它選 項都必須按下右邊的向下箭頭才會列出。 使用 size 屬性則可自由設定方框的大小, 例如改成 3 列, 這樣就只會列出 3 個選項供使用者選擇, 而使 用者也可用列表欄右邊的捲軸來捲動列表的內容。 <select name=“course” size=“2”> <option value=“1”>數學 <option value=“2”>英文 <option value=“3”>物理 </select> 調整列表欄方框的大小－ <select size> 如果設定的列數超過 <option> 項目的個數, 例 如將上例改成 size="7", 則多出的三列都會變成 空白。 如果列表欄是個複選題, 而不是只能選擇一項的 單選題, 那麼只要加上 multiple 屬性即可, 此時 使用者可同時按下 [Ctrl] 鍵及滑鼠左鈕,就可以 在列表欄中選擇一個以上的項目。 可選擇多項的列表欄－ <select multiple> 使用 <input type="text"> 時, 雖然可用 size 屬性設定欄位 的寬度, 不過仍是只有一列的輸入欄位, 如果輸入的文字超過欄 位大小, 則文字就會往左推, 前面的字就看不到了。 如果要建立像是在留言板或討論區那樣的文字輸入欄位, 就要使 用 <textarea> 標籤了。和一般輸入欄位不同的是, <textarea> 標籤是成對出現的, 至於欄位的高度與寬度則是 分別用 rows 及 cols 屬性來設定。 由於 rows 及 cols 只是設定文字輸入欄在畫面上有幾列幾行, 所以在某一列輸入超過 cols 所指定的字元數, 或是超過 rows 所設的列數時, 捲軸就會自動變為可捲動的, 讓使用者能捲動欄 位內容, 以便查看被捲出欄位外的內容。 如果想在 <textarea> 的欄位中加上預設的輸入內容, 可以放 在 textarea> ..</textarea> 標籤之間。 區塊式文字輸入欄位－<text area> wrap屬性可用來設定在輸入超過欄位寬度的文字時, 是否要自動換行： ◦ 1.<textarea wrap="off"> : 當設定 wrap=“off ”時, 輸入的欄位會出現水平方向的捲軸 。當輸入的資料長度超過欄位寬度的時候, 不會自動換行。 ◦ 2.wrap=“virtual” 及 wrap=“physical”： 這兩項在設定都會讓輸入的文字在超過欄位寬度時自動換行 。但是在送出資料時, wrap=“virtual” 只有在按 [Enter] 鍵的地方會換行, 其它部份並不會自動換行。而 wrap="physical" 則會依照螢幕上所見到的方式將輸入的 資料送出。 設定區塊式文字輸入欄自動換行－ <textarea wrap> tabindex=“編號”屬性的作用是設定使用者按 [Tab] 鍵時, 切換欄位的順序。 另一個指定欄位存取方式的屬性則是 accesskey, 其作用就是設定一個可直接移到該 欄位的快捷鍵。 欄位的存取設定 <fieldset> 標籤的用途是將多個輸入欄位組合 在一起, 瀏覽器會自動用一個方框將這些輸入欄 位框起來, 讓使用者能看得比較清楚。 <fieldset> 標籤的用法很簡單, 只要將想放在一 起的輸入欄位都放在 <fieldset>...</fieldset> 之中即可。 將多個輸入欄位框在一起－ <fieldset> <legend> 標籤需放在 <fieldset>...</fieldset> 之中, 它是用來做為 <fieldset> 欄位的說明, 在 <legend>...</legend> 中的文字會出現在 <fieldset> 的框線上面, 例如下面這個例子： 在框線顯示說明文字－<legend> 另外還有一種表單標籤 <isindex>, 一般是做為資料庫查詢用的, 比 較有趣的是, 這個標籤需放在 <head> 標籤之間。 使用這個標籤時, 文件中會出現一個文字輸入欄位, 在此輸入的內容 就會成為查詢用的關鍵字。 <head> <isindex action=“處理表單程式URL” prompt=“請輸入查詢：”> </head> action 屬性不一定要使用, 在未指定 action 屬性時, 輸入的內容將 直接傳送到目前的 URL 上, 這也是一般 <isindex> 標籤較常使用 的方式。 prompt 屬性可用這個標籤來設定輸入欄位前的提示文字。 使用 <isinedx> 標籤不需用到 submit 鈕, 因為在使用者按下 [Enter]鍵時, 瀏覽器就會送出使用者輸入的資料。 <isindex>標籤通常是做搜尋的, 而 <body>可用來放置有關搜尋 的說明文字。 建立搜尋用表單－<isindex> Based on 第八章與第九章 最新HTML&CSS網頁程式設計，施威銘研究室 著，台北：旗標出版公司，F6462。 reference 45