การสร้างเฟรม( Frame ) ด้วยภาษา HTML

การสร้างเฟรม(Frame)ด้วยภาษา HTML

คำสั่งกำหนดเฟรม • ใช้ Tag <FRAMSET>…</FRAMESET> กำหนดให้ Browser แสดงผลแบบเฟรม • กำหนดขนาดของเฟรม ใช้ attributes 2 ตัวคือ ROWS และ COLS • ROWS เป็น attribute แบ่งเฟรมตามแนวนอนตามค่า ที่กำหนด ROWS = “lists” • COLS เป็น attribute แบ่งเฟรมตามแนวตั้งตามค่า ที่กำหนด COLS = “lists” • Lists เป็นชุดค่าตัวเลขที่ใช้กำหนดขนาดให้กับเฟรมตามแนวนอนหรือแนวตั้ง ถ้ามีหลายค่าจะคั่นด้วยเครื่องหมายจุลภาค

การแบ่งจอภาพ • เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนมีข้อมูลและการทำงานที่เป็นอิสระจากกัน • การสร้างเฟรม มีคำสั่งที่ใช้ร่วมกันอยู่ 3 คำสั่ง ดังนี้ • สามารถสร้างเฟรมซ้อนภายใน <FRAMESET> ได้ หรืออาจจะมี แท็ก <FRAME> หรือ <NOFRAME> อยู่ภายในได้ • ในเอกสาร HTML ที่มีการใช้แท็ก <FRAMESET> แล้วจะไม่มี แท็ก <BODY>

ตัวอย่าง <HTML> <HEAD> <TITLE> This is frame Demo </TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML>

การกำหนดขนาดของเฟรม • การกำหนดค่าของ lists มีวิธีกำหนด 3 แบบคือ 1. กำหนดค่าด้วย pixel ต้องดูความละเอียดของจอภาพที่ใช้ (640 x 480 หรือ 1024 x 768 ) <FRAMESET ROWS = “200, 140, 100”> <FRAMESET COLS = “200, 200,150 “> 2. กำหนดค่าด้วยหน่วยเปอร์เซ็นต์ <FRAMESET ROWS = “25%, 25%, 50%”> <FRAMESET COLS = “60%,40%”>

การกำหนดขนาดของเฟรม(2) 3. กำหนดโดยใช้ความสัมพันธ์ของแต่ละเฟรม ใช้เครื่องหมาย * เป็นตัวกำหนด • <FRAMESET ROWS = “40%, *”> แบ่งเป็น 2 ส่วนตามแนวนอน ส่วนบนสูง 40% ของเนื้อที่ทั้งหมด และส่วนล่างใข้เนื้อที่ ๆเหลือทั้งหมด • <FRAMESET COLS = “60,80, *”> แบ่งจอภาพเป็น 3 ส่วน ส่วนซ้ายกว้าง 60 pixel ส่วนกลางกว้าง 80 pixel และส่วนขวาใช้เนื้อที่ที่เหลือทั้งหมด

Tag <FRAME> • เป็นแท็กที่ใส่ระหว่างแท็ก <FRAMESET>…</FRAMESET> ใช้สำหรับใส่ชื่อเอกสารหรือรูปภาพไว้ในส่วนของจอภาพที่แบ่งไว้ด้วยแท็ก<FRAMESET> • มีรูปแบบดังนี้ • <FRAME SRC = “URL” NAME = “windows_name” • MARGINWIDTH=value1 • MARGINHEIGHT = value2 • SCROLLING=choice NORESIZE • FRAMEBORSER=choice2 • FRAMESPACING=value2>

Attribute ของ <FRAME> • SRC= “url” บอกถึงไฟล์รูปภาพ หรือไฟล์ HTMLที่ต้องการแสดงในเฟรม • NAME = “windows_name” ตั้งชื่อให้กับเฟรม เพื่อนำไฟล์รูปภาพหรือไฟล์เอกสารอื่นๆ มาแสดง • MARGINWIDTH กำหนดช่องว่างทางซ้ายและขวาระหว่างข้อมูลและเฟรม • MARGINHEIGHT กำหนดช่องว่างด้านบนและล่างระหว่างข้อมูลและเฟรม • SCROLLING =“YES/NO/AUTO” ใช้กำหนดให้เฟรมมี Scrollbar หรือไม่มี (auto browser เป็นตัวกำหนด) • FRAMEBORDER กำหนดให้ browser สร้างกรอบให้กับเฟรม • FRAMEBORDER = 0 ซ่อนเส้นกรอบเฟรม • ปกติค่า default ของกรอบเฟรมเป็น 5 • FRAMESPACING กำหนดระยะห่างระหว่างเฟรม • NORESIZE กำหนดไม่ให้ผู้ใช้เปลี่ยนแปลงขนาดเฟรมในขณะที่ใช้งาน

ตัวอย่างการแบ่งเฟรม <HTML> <HEAD> <TITLE> Using frame demo</TITLE> </HEAD> <FRAMESET ROWS=“30%,40%,30%”> <FRAME NAME=“frame1” SRC=“web1.html”> <FRAME NAME=“frame2” SRC=“web2.html”> <FRAME NAME=“frame1” SRC=“web3.html”> </FRAMESET> </HTML>

ตัวอย่างการแบ่งเฟรมให้มีขนาดแน่นอนตัวอย่างการแบ่งเฟรมให้มีขนาดแน่นอน <HTML> <HEAD> <TITLE> Using frame demo</TITLE> </HEAD> <FRAMESET ROWS=“30%,40%,30%”> <FRAME NAME=“frame1” SRC=“web1.html” NORESIZE> <FRAME NAME=“frame2” SRC=“web2.html” NORESIZE > <FRAME NAME=“frame1” SRC=“web3.html” NORESIZE > </FRAMESET> </HTML> Computer and Internet (310101)

การกำหนดแถบเลื่อนในเฟรมการกำหนดแถบเลื่อนในเฟรม • โดยปกติเฟรมที่มีพื้นที่ไม่เพียงพอสำหรับแสดงเนื้อหา จะมีแถบเลื่อนเพื่อให้ผู้ใช้เลื่อนดูข้อมูลในส่วนที่เหลือได้ • ถ้าไม่ต้องการให้แสดงแถบเลื่อนจะต้องกำหนดแอตทริบิวต์ SCROLLING=“NO” ใน <FRAME>

ตัวอย่างการใช้แถบเลื่อนในเฟรมตัวอย่างการใช้แถบเลื่อนในเฟรม <HTML> <HEAD> <TITLE> Using frame demo</TITLE> </HEAD> <FRAMESET ROWS=“30%,*”> <FRAME NAME=“frame1” SRC=“web1.html” NORESIZE> <FRAME NAME=“frame3” SRC=“web3.html” SCROLLING=“NO” > </FRAMESET> </HTML>

การสร้างเฟรมซ้อน • แต่ละคอลัมน์สามารถแบ่งเป็นแถวและแต่ละแถวสามารถแบ่งเป็นคอลัมน์ได้เช่นกัน • ตัวอย่าง แบ่งจอภาพเป็น 2 เฟรมตามแนวดิ่งขนาด 40% และ60% โดย เฟรมแรกแบ่งตามแนวนอนเป็น 2 เฟรม โดยเฟรมแรกสูง 30% และส่วนที่เหลือสูง 70% <FRAMESET COLS = “40%, *”> ... <FRAMESET ROWS = “30%, 70%”> ... </FRAMESET> </FRAMESET>

ตัวอย่างการสร้างเฟรมซ้อน 1 <HTML> <HEAD> <TITLE> Using nested frame demo</TITLE> </HEAD> <FRAMESET COLS=“30%,*”> <FRAME NAME=“frame1” SRC=“web1.html”> <FRAMESET ROWS=“40%,*”> <FRAME NAME=“frame2” SRC=“web2.html”> <FRAME NAME=“frame3” SRC=“web3.html”> </FRAMESET> </FRAMESET> </HTML>

ตัวอย่างการสร้างเฟรมซ้อน 2 <HTML> <HEAD> <TITLE> Using nested frame demo</TITLE> </HEAD> <FRAMESET ROWS=“30%,*”> <FRAME NAME=“frame1” SRC=“web1.html”> <FRAMESET COLS=“20%,*”> <FRAME NAME=“frame2” SRC=“web2.html”> <FRAME NAME=“frame3” SRC=“web3.html”> </FRAMESET> </FRAMESET> </HTML>

tag <NOFRAME>…</NOFRAME> • ใช้กำหนดส่วนของเอกสารที่จะให้แสดงโดย browser ที่ไม่สามารถแสดงเฟรมได้ มีรูปแบบดังนี้ • ถ้ามีการใช้เฟรมควรใส่ส่วน <NOFRAME> ไว้เสมอเพื่อให้ผู้ใช้ที่ใช้ browser ที่ไม่สามารถแสดงเฟรมได้ ใช้ได้ตามปกติเหมือนไม่มีเฟรม <NOFRAME>…</NOFRAME>

การเชื่อมโยงให้สัมพันธ์กันในเฟรมการเชื่อมโยงให้สัมพันธ์กันในเฟรม • Targeting Frame เป็นการส่งเอกสารไปแสดงในเฟรมอื่น โดยเฟรมเป้าหมายต้องมีการตั้งชื่อสำหรับอ้างอิง • ระบุเฟรมเป้าหมายในแท็ก anchor • กำหนดbase (default) target ให้กับทุก Link ที่ไม่ได้ระบุชื่อ target ด้วยคำสั่ง <A HREF = “page1.html” TARGET = “ชื่อเฟรมเป้าหมาย”> <BASE TARGET = “ชื่อเฟรมเป้าหมาย”>

การเชื่อมโยงให้สัมพันธ์กันในเฟรม(2)การเชื่อมโยงให้สัมพันธ์กันในเฟรม(2) • ถ้าไม่มีชื่อเฟรมในวินโดว์ที่เปิดอยู่ browser จะเปิดวินโดว์ใหม่ให้โดยถือว่าเป็นวินโดว์ลูก • ชื่อเฉพาะแสดงความสัมพันธ์ระหว่างเอกสารระหว่างเอกสารปัจจุบันกับเอกสารอื่น _blank โหลด link นี้ไปที่หน้าจอที่บราวเซอร์เปิดหน้าต่างใหม่ _self โหลด link นี้ทับเฟรมที่กำลังถูกใช้งานอยู่ _parent โหลด link นี้ทับพื้นที่ของทุกเฟรมที่ถูกกำหนด ภายใต้แท็ก<FRAMESET> เดียวกันกับเฟรม ที่กำลังถูกใช้งานอยู่ _top โหลด link นี้ไปยังพื้นที่ทั้งหมดของหน้าจอบราวเซอร์ ปัจจุบัน • ตัวอย่าง <A HREF = “mypage.html” TARGET= “_parent”>

ตัวอย่าง <HTML> <HEAD> <TITLE> Using nested frame demo</TITLE> </HEAD> <FRAMESET COLS=“30%,*”> <FRAME NAME=“frame1” SRC=“toc.html”> <FRAME NAME=“main” SRC=“first.html”> </FRAMESET> </HTML>

ตัวอย่าง แฟ้ม toc.html <HTML> <HEAD> <TITLE> Table of Content</TITLE> </HEAD> <BODY> <B>เวบไซต์ที่สนใจ</B>Click mouse เพื่อไปยังเวบไซต์ที่ต้องการ<BR> <A HREF=“http://www.yahoo.com” TARGET=“main”>Yahoo Search</A><BR> <A HREF=“http://www.sanook.com” TARGET=“main”>SANOOK</A><BR> <A HREF=“http://www.srw.ac.th” TARGET=“main”>Sriboonruangwittayakarn School</A> <BR> </BODY> </HTML>

ตัวอย่าง แฟ้ม first.html <HTML> <HEAD> <TITLE> first file Content</TITLE> </HEAD> <BODY> <H1>หน้าจอแรก</H1> <H2>ห้องเรียนสีขาว</H2> <H2>ชมรมคอมพิวเตอร์</H2> <H3>โรงเรียนศรีบุญเรืองวิทยาคาร</H3> </BODY> </HTML>

HELPING SEARCH ENGINES FIND YOUR WEBSITE • สามารกำหนดแท็ก <META> เพื่อใช้จัดทำ index เอาไว้สำหรับให้ Search Engine ต่างๆเช่น Infoseek, AltaVista ค้นหาข้อมูลจาก index ได้ • แท็กที่ใช้สร้างคือ Meta Tag มีรูปแบบดังนี้ • ต้องเขียนแท็ก <META>ไว้ภายในแท็ก <HEAD>…</HEAD> เสมอ • <META NAME=“description” • CONTENT=“ คำบรรยายทีแสดงว่าโฮมเพจเราเป็นอย่างไร?”> • <META NAME=“Key word” • CONTENT=“key1, key2, key3,…”>

HELPING SEARCH ENGINES FIND YOUR WEBSITE (2) • DESCRIPTION เป็นส่วนที่ใช้สรุปย่อถึงการอธิบายเว็บเพจ • KEYWORD เป็นรายการของคีย์เวิร์ดที่เราคาดว่าผู้ที่เข้ามาเยี่ยมชมจะค้นหาเว็บไซต์ • ตัวอย่าง <META NAME=“description” CONTENT=“ How to promote website.”> <META NAME=“Key word” CONTENT=“announcing website, web submittion, Burapha University, Eastern Seaboard”>

HELPING SEARCH ENGINES FIND YOUR WEBSITE (3) • ใน Infoseek จะใช้ชื่อ title ของเว็บเพจเป็นการค้นหาอันดับแรก • ใน yahoo จะใช้ title ของเว็บเพจพร้อมทั้ง description ในการค้นหา • ใน Excite จะค้นหาจากแท็ก Comment และเนื้อหาของเว็บเพจ สรุป ต้องจัดทำคีย์เวิร์ดไว้ในแท็ก TITLE, META และ COMMENT

การสร้างเฟรม( Frame ) ด้วยภาษา HTML