การสร�าง Frame

การสร�าง Frameสามารถสร�างได้�หลายวิ�ธี� 1.จากหน้�าหล�กเม��อเปิ�ด้โปิรแกรม2.จากเมน้�คำ าส��ง3.จากแถบเคำร��องม�อ Layout

คลิกที่� Framesets ตามภาพด้�านบน

การสร�าง Frame(1)

คลิกFramesets เลิ�อกFixed Top, Nested Left คลิก Create

แสด้งภาพเฟรมที่� เลิ�อก คลิก Cancel

จากหน�าไฟลิ�งานเว็�บเพจน าร!ป ข้�อม!ลิมาว็างตามส$ว็นที่� ถู!กแบ$ง

Save โด้ยใช้�ค าส* ง File Save All ต*+งช้� อ Index.html จะเป-นหน�าหลิ*กที่*+งหน�า

ตรงกลิางต*+งช้� อ Main.html(จะเห�นเส�นให�เห�นข้อบเข้ตที่� เป-นพ�+นที่� งาน)

ด้�านซ้�ายต*+งช้� อ Left.html(จะเห�นเส�นให�เห�นข้อบเข้ตที่� เป-นพ�+นที่� งาน)

ด้�านบนต*+งช้� อ Top.html(จะเห�นเส�นให�เห�นข้อบเข้ตที่� เป-นพ�+นที่� งาน)

ที่ด้สอบโด้ยการกด้ F12 เพ� อRun โปรแกรมด้!หน�าเว็�บ

การสร�าง Frame(2) เป/ด้โปรแกรม แถูบ Create New คลิก HTML

การสร�าง Frame(2) 1. แถูบเมน! View เลิ�อก Visual Aids เลิ�อก Frame Border ตามร!ป

การสร�าง Frame(2) 2 แสด้งหน�าไฟลิ�งาน เร�ยกแถูบค าส* งพาเลิ�ต Window frameเพ� อด้!การที่ างาน

การสร�าง Frame(2) 3 น าเมาส�ลิากเส�นจากข้อบกระด้าษลิงมา(1) แลิะถู�าต�องการเส�นข้�างให�คลิกที่�

ข้อบภาพ ลิ!กศร(2) เฉพาะด้�านซ้�ายแลิ�ว็ลิากเส�นข้อบออกมาด้*งภาพจะได้�เฟรมตามต�องการ จากน*+นใส$เน�+อหาแลิะบ*นที่3กไฟลิ�งานด้�ว็ยค าส* ง Save All

1

2

การสร�าง Frame(3) เป/ด้โปรแกรม แถูบ Create New คลิก HTML

การสร�าง Frame(3) 1. แถูบเคร� องม�อ Layout เลิ�อกร!ปแบบต$าง ๆ ตามเมน!ย$อยด้*งภาพด้�านลิ$าง

การสร�าง Frame(3)

แสด้งภาพเฟรมที่� เลิ�อก คลิก Cancel

จากน*+นใส$เน�+อหาแลิะบ*นที่3กไฟลิ�งานด้�ว็ยค าส* ง Save All

ถู�าต�องการเพ มเส�นข้อบก*บแถูบเลิ� อนใช้�ค าส* งเพ มเตม

จากค าส* งใน Frame<frameset rows="206,*" cols="*" frameborder="Yes" border="10" bordercolor=blue framespacing="10"> <frame src="Top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" /> <frameset rows="*" cols="162,*" framespacing="10" frameborder="Yes" border="10" bordercolor=blue> <frame src="Left.html" name="leftFrame" scrolling="Yes" noresize="noresize" id="leftFrame" /> <frame src="Main.html" name="mainFrame" id="mainFrame" /> </frameset></frameset>

ใบงาน้การสร�างเฟรม 1. ให�น้�กศึ%กษาออกแบบเวิ'บไซต์*ร�าน้เส�+อผ้�า 2. ใช้�คำ าส��งแบ.งแฟรมเพื่��อต์กแต์.งเวิ'บให�น้.าสน้ใจ 3. ม�หน้�าหล�ก การล�งคำ*ร�ปิแบบต์.าง ๆ 4. ม� Banner อย�.ด้�าน้บน้ของหน้�าจอ โด้ยน้�กศึ%กษาสร�างข%+น้มาเองด้�วิยโปิรแกรมที่��น้�กศึ%กษาเร�ยน้มา 5. ให�หาร�ปิภาพื่และเน้�+อหา จากเวิ'บ Google 6. ม�อย.างน้�อย 8 ไฟล*พื่ร�อมหน้�าหล�กที่ าการต์บแต์.งให�สวิยงาม 7. ส.งภายใน้ช้��งโมงเที่.าน้�+น้