การสร้าง
Download
1 / 20

การสร้าง Frame - PowerPoint PPT Presentation


  • 215 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' การสร้าง Frame' - alta


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

การสร้าง Frame

สามารถสร้างได้หลายวิธี

1.จากหน้าหลักเมื่อเปิดโปรแกรม

2.จากเมนูคำสั่ง

3.จากแถบเครื่องมือ Layout


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

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


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



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


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)และถ้าต้องการเส้นข้างให้คลิกที่

1

2

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


การสร้าง ข้อมูลมาวางตามส่วนที่ถูกแบ่งFrame(3)

เปิดโปรแกรมแถบ Create New คลิก HTML


การสร้าง ข้อมูลมาวางตามส่วนที่ถูกแบ่งFrame(3)

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


การสร้าง ข้อมูลมาวางตามส่วนที่ถูกแบ่งFrame(3)

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

จากนั้นใส่เนื้อหาและบันทึกไฟล์งานด้วยคำสั่ง 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. ส่งภายในชั่งโมงเท่านั้น


ad