1 / 20

การสร้าง Frame

การสร้าง Frame. การสร้าง Frame สามารถสร้างได้หลายวิธี 1. จากหน้าหลักเมื่อเปิดโปรแกรม 2. จากเมนูคำสั่ง 3. จากแถบเครื่องมือ Layout. การสร้าง Frame(1). คลิกที่ Framesets ตามภาพด้านบน. คลิก Framesets เลือก Fixed Top, Nested Left คลิก Create. แสดงภาพเฟรมที่เลือก คลิก Cancel.

alta
Download Presentation

การสร้าง Frame

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. การสร้าง Frame

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

  3. การสร้าง Frame(1) คลิกที่ Framesets ตามภาพด้านบน

  4. คลิกFramesets เลือกFixed Top, Nested Left คลิก Create

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

  6. จากหน้าไฟล์งานเว็บเพจนำรูป ข้อมูลมาวางตามส่วนที่ถูกแบ่ง

  7. Save โดยใช้คำสั่ง File Save All ตั้งชื่อ Index.html จะเป็นหน้าหลักทั้งหน้า

  8. ตรงกลางตั้งชื่อ Main.html(จะเห็นเส้นให้เห็นขอบเขตที่เป็นพื้นที่งาน)

  9. ด้านซ้ายตั้งชื่อ Left.html(จะเห็นเส้นให้เห็นขอบเขตที่เป็นพื้นที่งาน)

  10. ด้านบนตั้งชื่อ Top.html(จะเห็นเส้นให้เห็นขอบเขตที่เป็นพื้นที่งาน)

  11. ทดสอบโดยการกด F12 เพื่อRun โปรแกรมดูหน้าเว็บ

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

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

  14. การสร้าง Frame(2) 2 แสดงหน้าไฟล์งาน เรียกแถบคำสั่งพาเล็ต Window frameเพื่อดูการทำงาน

  15. การสร้าง Frame(2) 3 นำเมาส์ลากเส้นจากขอบกระดาษลงมา(1)และถ้าต้องการเส้นข้างให้คลิกที่ 1 2 ขอบภาพ ลูกศร(2)เฉพาะด้านซ้ายแล้วลากเส้นขอบออกมาดังภาพจะได้เฟรมตามต้องการ จากนั้นใส่เนื้อหาและบันทึกไฟล์งานด้วยคำสั่ง Save All

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

  17. การสร้าง Frame(3) 1. แถบเครื่องมือ Layout เลือกรูปแบบต่าง ๆ ตามเมนูย่อยดังภาพด้านล่าง

  18. การสร้าง Frame(3) แสดงภาพเฟรมที่เลือก คลิก Cancel จากนั้นใส่เนื้อหาและบันทึกไฟล์งานด้วยคำสั่ง Save All

  19. ถ้าต้องการเพิ่มเส้นขอบกับแถบเลื่อนใช้คำสั่งเพิ่มเติมถ้าต้องการเพิ่มเส้นขอบกับแถบเลื่อนใช้คำสั่งเพิ่มเติม จากคำสั่งใน 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>

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

More Related