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

???????? Frame - PowerPoint PPT Presentation


  • 220 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

การสร้าง Frame

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

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

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

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


Frame

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

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


Frame

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



Frame

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


Frame

Save ข้อมูลมาวางตามส่วนที่ถูกแบ่งโดยใช้คำสั่ง File Save All ตั้งชื่อ Index.html จะเป็นหน้าหลักทั้งหน้า


Frame

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


Frame

ด้านซ้ายตั้งชื่อ ข้อมูลมาวางตามส่วนที่ถูกแบ่งLeft.html(จะเห็นเส้นให้เห็นขอบเขตที่เป็นพื้นที่งาน)


Frame

ด้านบนตั้งชื่อ ข้อมูลมาวางตามส่วนที่ถูกแบ่งTop.html(จะเห็นเส้นให้เห็นขอบเขตที่เป็นพื้นที่งาน)


Frame

ทดสอบโดยการกด ข้อมูลมาวางตามส่วนที่ถูกแบ่งF12 เพื่อRun โปรแกรมดูหน้าเว็บ


Frame

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

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


Frame

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

1. แถบเมนู View เลือก Visual Aids เลือก Frame Border ตามรูป


Frame

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

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


Frame

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

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

1

2

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


Frame

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

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


Frame

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

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


Frame

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

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

จากนั้นใส่เนื้อหาและบันทึกไฟล์งานด้วยคำสั่ง Save All


Frame

ถ้าต้องการเพิ่มเส้นขอบกับแถบเลื่อนใช้คำสั่งเพิ่มเติมถ้าต้องการเพิ่มเส้นขอบกับแถบเลื่อนใช้คำสั่งเพิ่มเติม

จากคำสั่งใน 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>


Frame

ใบงานการสร้างเฟรมถ้าต้องการเพิ่มเส้นขอบกับแถบเลื่อนใช้คำสั่งเพิ่มเติม

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

7. ส่งภายในชั่งโมงเท่านั้น