大家好，歡迎來到跟我一起學習HTML&CSS網頁設計吧系列文章，今天是第15天，要分享介紹的是頁框的多樣設定，還不清楚或不知道頁框是甚麼嗎?馬上來參考文章
每篇都會有簡單上手的實作內容，邀請大家一起來練習。
常見的html檔案會是由head與body構成，但今天要分享的視窗分割是由head與frameset組成。
視窗分割就是讓我們在一個網頁上分割成多個部分，以致顯示多個文件。
這邊我準備了3個檔案:index.html、about.html(關於)、photo.html(照片)
因為是示範，所以內容多為複製相同文字標題圖片，重點將放在分割網頁上。
(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>頁框教學</title>
</head>
<frameset cols="30%,70%">
<frame src="about.html"></frame>
<frame src="photo.html"></frame>
</frameset>
</html>
我們將body的部分替換成frameset標籤。
frameset cols="30%,70%" 把網頁直切兩刀，並且拆成30% + 70%的顯示
參數值也可使用像素、*
frame src="about.html" 第一份(範例為30%)的頁框，scr 則為顯示的html文件
frame src="photo.html"" 第二份(範例為70%)的頁框，scr 則為顯示的html文件
也可以切成更多份:
<frameset cols="30%,30%,40%">
<frame src="about.html"></frame>
<frame src="photo.html"></frame>
<frame></frame>
</frameset>
橫切的方式就是在frameset標籤中的屬性cols改變成rows，其他操作參數意思相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>頁框教學</title>
</head>
<frameset rows="35%,65%">
<frame src="about.html"></frame>
<frame src="photo.html"></frame>
<frame></frame>
</frameset>
</html>
也可以讓他們互相搭配，在直切頁框中加入橫切頁框，或將橫切頁框中加入直切頁框。
<frameset cols="50%,50%">
<frameset rows="35%,65%">
<frame src="about.html"></frame>
<frame src="photo.html"></frame>
</frameset>
<frame></frame>
</frameset>
現在是預設有框線的網頁樣子
加入frameborder屬性至需要移除框線的frame標籤，並設定參數值為0
<frame src="about.html" frameborder="0"></frame>
這邊是去除框線後，但依然會顯示框線邊界
當我們預設的框線大小是開啟網頁時呈現的，使用者在操作時可以自由變動拉移框線。
可以在frame標籤中，加入noresize固定框線，使用者就再也不能自由移動框線了。
<frame src="about.html" noresize></frame>
編輯框線寬度，至frameset標籤中添加border屬性，參數值為像素。
<frameset cols="50%,50%" border="40px">
<frameset rows="35%,65%" border="0px">
<frame src="about.html" noresize></frame>
<frame src="photo.html" noresize></frame>
</frameset>
<frame src="photo2.html" noresize></frame>
</frameset>
編輯框線顏色，至frameset標籤中添加bordercolor屬性，參數值為色彩值、顏色名稱。
<frameset cols="50%,50%" border="40px" bordercolor="pink">
最後一個要分享的是「子視窗」概念，在網頁中寫入一個小視窗，顯示另一個html文件。
這邊又回到正常html架構:head與body組成的文件。
在我們body中，想要加入子視窗，就把下列編碼寫入想要添加的地方。
<iframe src="other.html" width="500" height="200">
</iframe>
src 顯示的html位置(檔名)
width 顯示視窗寬度
height 顯示視窗高度
第15天教學分享到這邊，分割頁框可以用在有很多東西想要呈現，但是怕太凌亂，就可以用這個功能拉
還有子視窗我覺得很方便，自己設定寬度高度，就可以在網頁中再加入別的文件參照了。
大家下次見
iThome鐵人賽
看影片追技術