(Frame)
ปกติเรำจะแสดงเวบ็ เพจใน browser ไดท้ ี่ละ 1 เวบ็ เพจ แต่ถำ้ เรำใช้ Frame เรำจะสำมำรถ
แสดงเวบ็ เพจไดห้ ลำยๆเวบ็ เพจในหนำ้ เดียว โดยจะแบ่งหนำ้ ของ browser ออกเป็นส่วนๆ โดย
ใช้ Frame
คำสง่ั ในกำรสร้ำงเฟรม คำสงั่ แรกท่ีใชส้ ร้ำงเฟรมคือ คำสง่ั <frameset> โดยคำสง่ั น้ีเป็น
คำสง่ั ที่ใชใ้ นกำรกำหนดขนำดและ รูปแบบของเฟรมใหเ้ ป็นไปตำมตอ้ งกำร ซ่ึงส่วนของคำสง่ั
<frameset> น้นั จะนำมำใชแ้ ทนคำสง่ั <body> ในไฟล์ html โดยมีโครงสร้ำง
รูปแบบกำรใชง้ ำนดงั น้ี
กำรแบ่ง Frame แบบแนวต้งั
frame ในแนวต้งั ซ่ึงจะเปิ ดเวบ็ เพจได้ 3 ไฟลใ์ นหนำ้ เดียวกนั โดยเรำจะแบ่งขนำดของ frame เป็น % หรือเป็น pixel
กไ็ ด้ ลกั ษณะคำสงั่
<html>
<frameset cols=ขนำดเฟรม1,ขนำดเฟรม2>
<frame src='เวบ็ เพจ1'> ตวั อยำ่ งคำสั่ง
<frame src='เวบ็ เพจ2'> <html>
</frameset> <frameset cols="25%,50%,25%">
</html>
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</html>
ผลบน Browser
กำรแบ่ง Frame แบบแนวนอน
กำรแบ่งแบบแนวนอนกส็ ำมำรถทำไดเ้ ช่นเดียวกนั ซ่ึงแบ่งเป็น % หรือ px (pixel) กไ็ ดเ้ ช่นกนั ซ่ึงเรำจะใช้ rows (แถว)
แทน cols (หลกั )
ลกั ษณะคำสงั่
<html>
<frameset rows=ขนำดเฟรม1,ขนำดเฟรม2>
<frame src='เวบ็ เพจ1'> ตัวอย่างคาสั่ง
<frame src='เวบ็ เพจ2'> <html>
</frameset>
</html> <frameset rows="25%,50%,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</html>
ผลบน Browser
<noframes>
ถำ้ browser ของคุณไม่สนบั สนุน frame จะมี
คำเตือนตำมที่เรำเขียนข้ึนมำ
ตวั อยำ่ งคำส่งั
<html>
<noframes><body>
คำเตือน
</body></noframes>
</html>
กำรแบ่งโครงสร้ำงท้งั 2 แนว ผลบน Browser
ตวั อยำ่ งคำสั่ง
<html>
<frameset rows="25%,*" cols="30%,*">
<frame /> <frame />
<frame /> <frame />
</frameset>
</html>
การสร้ างเฟรมซ้ อนกนั ผลบน Browser
การแบง่ frameset ออกเป็น 2 ชดุ คอื การนาเอา
Frameset มาแสดงผลซ้อนกนั ดงั นี ้
ตวั อยา่ งคาสงั่
<html>
<head><title></title></head>
<frameset rows="30%,*">
<frame></frame>
<frameset cols="45%,*">
<frame></frame>
<frame></frame>
</frameset>
</frameset>
</html>
การนาไฟล์เอกสารมาแสดงในหน้าเฟรม
การนาไฟล์มาแสดงจะต้องมีไฟล์เอกสารนนั้ ๆ เตรียมไว้เรียบร้อยแล้วจงึ จะแสดงผล ซง่ึ การเตรียมไฟล์เอกสารควรจะ
จดั เกบ็ ให้อยใู่ นแหลง่ ข้อมลู เดยี วกนั หรือเรียกไดเร็กทรอรี่ให้ถกู ต้อง
ตวั อย่างคาส่งั
<html> ผลบน Browser
<head><title></title></head>
<frameset rows="30%,*">
<frame src="12.html"></frame>
<frameset cols="45%,*">
<frame src="13.html"></frame>
<frame src="14.html"></frame>
</frameset>
</frameset>
</html>
กำรกำหนดลกั ษณะของกรอบเฟรม
border กำหนดควำมหนำใหก้ บั กรอบของเฟรม
bordercolor กำหนดสีใหก้ บั กรอบของเฟรม
frameborder เปิ ด/ปิ ด กำรแสดงเส้นกรอบ ผลบน Browser
ตวั อยำ่ งคำส่งั
<html>
<head><title>แนวนอน</title></head>
<frameset rows="30%,*" border="5" bordercolor="red"
frameborder="yes">
<frame src="12.html"></frame>
<frameset cols="45%,*">
<frame src="13.html"></frame>
<frame src="14.html"></frame>
</frameset>
</frameset>
</html>
ตวั อยา่ งคาสง่ั (ไม่แสดงเส้นขอบ) ผลบน Browser
<html>
<head><title></title></head>
<frameset rows="30%,*" frameborder="No">
<frame src="12.html"></frame>
<frameset cols="45%,*" frameborder="No">
<frame src="13.html"></frame>
<frame src="14.html"></frame>
</frameset>
</frameset>
</html>
กำรกำหนดไมใ่ หเ้ ล่ือนขอบเฟรมได้
กำรกำหนดเฟรมตำมค่ำปกติน้นั เม่ือแสดงผลแลว้ จะสำมำรถจบั ขอบขยบั ตำแหน่ง ปรับขนำดของเฟรมได้ จนบำงคร้ังทำใหก้ ำรจดั
หนำ้ เวบ็ เสียสมดุล เสียรูปทรงที่ไดจ้ ดั ไว้ จึงมีคำสงั่ เพื่อใชใ้ นกำรกำหนดไมใ่ หส้ ำมำรถเล่ือนปรับขนำดของเฟรมได้ ดงั น้ี
noresize="noresize"
ตวั อยำ่ งคำสง่ั
<html>
<head><title></title></head>
<frameset rows="30%,*" border="5" bordercolor="red" frameborder="yes">
<frame src="12.html" noresize="noresize"></frame>
<frameset cols="45%,*">
<frame src="13.html" noresize="noresize"></frame>
<frame src="14.html" noresize="noresize"></frame>
</frameset>
</frameset>
</html>
ตวั อย่าง
จะตอ้ งมีไฟล์ table.html และไฟล์ ตวั โปรแกรมอยำ่ ลืมตดั ส่วน <body>.....</body>
ex.html จึงจะมีกำรนำขอ้ มูลในไฟลท์ ้งั 2 ออกดว้ ยนะคะ
มำแสดงในเฟรมท่ีแบ่งไว้
หมำยถึง แบง่ หนำ้ จอแนวนอนออกเป็น 2 ส่วนๆแรก 20%
ทเ่ี หลือ (*) เป็นส่วนที่ 2 เสน้ ของเฟรมมีขนำดเทำ่ กบั 5 เสน้ มีสีแดง
ผลบน Browser
หมำยถึง แบง่ หนำ้ จอแนวต้งั ออกเป็น 2 ส่วนๆแรกไม่ระบวุ ่ำกี่%
(ท้งั หมดของส่วนที่แบง่ จำกส่วนที่ 2 แลว้ ) ส่วนที่ 2 แบง่ 10%
(สีเส้นและขนำดของเส้นแบง่ เฟรมไม่ไดร้ ะบุฉะน้นั สีเส้นและขนำดของ
เส้นแบง่ เฟรมจะมีขนำดและสีอตั โนมตั ิ (สีเทำ)
จะตอ้ งมีไฟล์ table.html และไฟล์ ex.html จึงจะ
มีกำรนำขอ้ มูลในไฟลท์ ้งั 2 มำแสดงในเฟรมท่แี บ่งไว้
ผลบน Browser
ให้นักศกึ ษาออกแบบหน้าจอเว็บฯอย่างน้อยแบ่งเป็ น 3 เฟรมจะออกแบบ
อย่างไรกไ็ ด้ พร้อมนาข้อมูลมาแสดงในเฟรมทงั้ 3
(ข้อมูลท่แี สดงในแต่ละเฟรมจะเป็ นเร่ืองอะไรกไ็ ด้)
กาหนดส่ง 5 เมษายน 2563
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
การสร้างเฟรม
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
การสร้างเฟรม
- 1 - 15
Pages: