Transcript PPT
การสร้างเฟรม(Frame) ด้วยภาษา HTML คาสั่งกาหนดเฟรม ใช ้ Tag <FRAMSET>…</FRAMESET> กำหนดให้ Browser แสดงผลแบบเฟรม กำหนดขนำดของเฟรม ใช ้ attributes 2 ต ัวคือ ROWS และ COLS ROWS เป็น attribute แบ่งเฟรมตำมแนวนอนตำมค่ำ ทีก ่ ำหนด ROWS = “lists” COLS เป็น attribute แบ่งเฟรมตำมแนวตงตำมค่ ั้ ำ ทีก ่ ำหนด COLS = “lists” ้ ำหนดขนำดให้ก ับเฟรมตำมแนวนอน Lists เป็นชุดค่ำต ัวเลขทีใ่ ชก หรือแนวตงั้ ถ้ำมีหลำยค่ำจะคนด้ ่ ั วยเครือ ่ งหมำยจุลภำค 2 การแบ่งจอภาพ ่ นๆ แต่ละสว่ นมีขอ เป็นกำรแบ่งจอภำพเป็นสว ้ มูลและกำรทำงำนที่ เป็นอิสระจำกก ัน ่ ั ทีใ่ ชร้ ว กำรสร้ำงเฟรม มีคำสง ่ มก ันอยู่ 3 คำสง่ ั ด ังนี้ <FRAMESET> …</FRAMESET> กำหนดกำรแสดงผลแบบเฟรม <FRAME> กำหนดกำรแสดงเฟรมแต่ละเฟรม <NOFRAME>…</NOFRAME> เป็นแท็กทีจ ่ ะแสดงก็ตอ ่ เมือ ่ โปรแกรม Browser ไม่สน ับสนุนกำร แสดงผลแบบเฟรม ้ นภำยใน <FRAMESET> ได้ หรืออำจจะมี สำมำรถสร้ำงเฟรมซอ แท็ก <FRAME> หรือ <NOFRAME> อยูภ ่ ำยในได้ ้ ท็ก <FRAMESET> แล้วจะไม่ม ี ในเอกสำร HTML ทีม ่ ก ี ำรใชแ แท็ก <BODY> 3 ตัวอย่าง <HTML> <HEAD> <TITLE> This is frame Demo </TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML> 4 การกาหนดขนาดของเฟรม กำรกำหนดค่ำของ lists มีวธ ิ ก ี ำหนด 3 แบบคือ 1. กำหนดค่ำด้วย pixel ต้องดูควำมละเอียดของจอภำพทีใ่ ช ้ (640 x 480 หรือ 1024 x 768 ) <FRAMESET ROWS = “200, 140, 100”> <FRAMESET COLS = “200, 200,150 “> 2. กำหนดค่ำด้วยหน่วยเปอร์เซ็นต์ <FRAMESET ROWS = “25%, 25%, 50%”> <FRAMESET COLS = “60%,40%”> 5 การกาหนดขนาดของเฟรม(2) ้ วำมสมพ ั ันธ์ของแต่ละเฟรม 3. กำหนดโดยใชค ใชเ้ ครือ ่ งหมำย * เป็นต ัวกำหนด ่ นตำม <FRAMESET ROWS = “40%, *”> แบ่งเป็น 2 สว ้ ทีท ้ ที่ แนวนอน สว่ นบนสูง 40% ของเนือ ่ งหมด ั้ และสว่ นล่ำงใข้เนือ ๆเหลือทงหมด ั้ ่ น <FRAMESET COLS = “60,80, *”> แบ่งจอภำพเป็น 3 สว สว่ นซำ้ ยกว้ำง 60 pixel ้ ทีท ใชเ้ นือ ่ เี่ หลือทงหมด ั้ 6 สว่ นกลำงกว้ำง 80 pixel และสว่ นขวำ Tag <FRAME> ่ ะหว่ำงแท็ก <FRAMESET>…</FRAMESET> ใช ้ เป็นแท็ กทีใ่ สร ่ อ ื่ เอกสำรหรือรูปภำพไว้ในสว่ นของจอภำพทีแ สำหร ับใสช ่ บ่งไว้ดว้ ย แท็ก<FRAMESET> มีรป ู แบบด ังนี้ <FRAME SRC = “URL” NAME = “windows_name” MARGINWIDTH=value1 MARGINHEIGHT = value2 SCROLLING=choice NORESIZE FRAMEBORSER=choice2 FRAMESPACING=value2> 7 Attribute ของ <FRAME> SRC= “url” บอกถึงไฟล์รป ู ภำพ หรือไฟล์ HTMLทีต ่ อ ้ งกำรแสดง 8 ในเฟรม ื่ ให้ก ับเฟรม เพือ NAME = “windows_name” ตงช ั้ อ ่ นำไฟล์ รูปภำพหรือไฟล์เอกสำรอืน ่ ๆ มำแสดง ่ งว่ำงทำงซำ้ ยและขวำระหว่ำงข้อมูล MARGINWIDTH กำหนดชอ และเฟรม ่ งว่ำงด้ำนบนและล่ำงระหว่ำงข้อมูล MARGINHEIGHT กำหนดชอ และเฟรม ้ ำหนดให้เฟรมมี Scrollbar SCROLLING =“YES/NO/AUTO” ใชก หรือไม่ม ี (auto browser เป็นต ัวกำหนด) FRAMEBORDER กำหนดให้ browser สร้ำงกรอบให้ก ับเฟรม ้ กรอบเฟรม ่ นเสน FRAMEBORDER = 0 ซอ ปกติคำ ่ default ของกรอบเฟรมเป็น 5 FRAMESPACING กำหนดระยะห่ำงระหว่ำงเฟรม NORESIZE กำหนดไม่ให้ผใู ้ ชเ้ ปลีย ่ นแปลงขนำดเฟรมในขณะทีใ่ ช ้ งำน ตัวอย่างการแบ่งเฟรม <HTML> <HEAD> <TITLE> Using frame demo</TITLE> </HEAD> <FRAMESET ROWS=“30%,40%,30%”> <FRAME NAME=“frame1” SRC=“web1.html”> <FRAME NAME=“frame2” SRC=“web2.html”> <FRAME NAME=“frame1” SRC=“web3.html”> </FRAMESET> </HTML> 9 ตัวอย่างการแบ่งเฟรมให้มีขนาดแน่นอน <HTML> <HEAD> <TITLE> Using frame demo</TITLE> </HEAD> <FRAMESET ROWS=“30%,40%,30%”> <FRAME NAME=“frame1” SRC=“web1.html” NORESIZE> <FRAME NAME=“frame2” SRC=“web2.html” NORESIZE > <FRAME NAME=“frame1” SRC=“web3.html” NORESIZE > </FRAMESET> </HTML> 10 Computer and Internet (310101) การกาหนดแถบเลื่อนในเฟรม ้ หำ จะมีแถบ โดยปกติเฟรมทีม ่ พ ี น ื้ ทีไ่ ม่เพียงพอสำหร ับแสดงเนือ เลือ ่ นเพือ ่ ให้ผใู ้ ชเ้ ลือ ่ นดูขอ ้ มูลในสว่ นทีเ่ หลือได้ ถ้ำไม่ตอ ้ งกำรให้แสดงแถบเลือ ่ นจะต้องกำหนดแอตทริบวิ ต์ SCROLLING=“NO” ใน <FRAME> 11 ตัวอย่ างการใช้แถบเลื่อนในเฟรม <HTML> <HEAD> <TITLE> Using frame demo</TITLE> </HEAD> <FRAMESET ROWS=“30%,*”> <FRAME NAME=“frame1” SRC=“web1.html” NORESIZE> <FRAME NAME=“frame3” SRC=“web3.html” SCROLLING=“NO” > </FRAMESET> </HTML> 12 การสร้างเฟรมซ้อน แต่ละคอล ัมน์สำมำรถแบ่งเป็นแถวและแต่ละแถวสำมำรถแบ่งเป็น ่ ก ัน คอล ัมน์ได้เชน ต ัวอย่ำง แบ่งจอภำพเป็น 2 เฟรมตำมแนวดิง่ ขนำด 40% และ60% โดย เฟรมแรกแบ่งตำมแนวนอนเป็น 2 เฟรม โดยเฟรมแรกสูง 30% และสว่ นทีเ่ หลือสูง 70% <FRAMESET COLS = “40%, *”> ... <FRAMESET ROWS = “30%, 70%”> ... </FRAMESET> </FRAMESET> 13 ตัวอย่างการสร้างเฟรมซ้อน 1 <HTML> <HEAD> <TITLE> Using nested frame demo</TITLE> </HEAD> <FRAMESET COLS=“30%,*”> <FRAME NAME=“frame1” SRC=“web1.html”> <FRAMESET ROWS=“40%,*”> <FRAME NAME=“frame2” SRC=“web2.html”> <FRAME NAME=“frame3” SRC=“web3.html”> </FRAMESET> </FRAMESET> </HTML> 14 ตัวอย่างการสร้างเฟรมซ้อน 2 <HTML> <HEAD> <TITLE> Using nested frame demo</TITLE> </HEAD> <FRAMESET ROWS=“30%,*”> <FRAME NAME=“frame1” SRC=“web1.html”> <FRAMESET COLS=“20%,*”> <FRAME NAME=“frame2” SRC=“web2.html”> <FRAME NAME=“frame3” SRC=“web3.html”> </FRAMESET> </FRAMESET> </HTML> 15 tag <NOFRAME>…</NOFRAME> ้ ำหนดสว่ นของเอกสำรทีจ ใชก ่ ะให้แสดงโดย browser ทีไ่ ม่ สำมำรถแสดงเฟรมได้ มีรป ู แบบด ังนี้ <NOFRAME>…</NOFRAME> ้ ี่ ่ ว่ น <NOFRAME> ไว้เสมอเพือ ถ้ำมีกำรใชเ้ ฟรมควรใสส ่ ให้ผใู ้ ชท ใช ้ browser ทีไ่ ม่สำมำรถแสดงเฟรมได้ ใชไ้ ด้ตำมปกติเหมือนไม่ มีเฟรม 16 การเชื่อมโยงให้สัมพันธ์ กันในเฟรม ่ เอกสำรไปแสดงในเฟรมอืน Targeting Frame เป็นกำรสง ่ โดย ื่ สำหร ับอ้ำงอิง เฟรมเป้ำหมำยต้องมีกำรตงช ั้ อ ระบุเฟรมเป้ำหมำยในแท็ ก anchor <A HREF = “page1.html” ื่ เฟรมเป้ำหมำย”> TARGET = “ชอ ื่ กำหนดbase (default) target ให้ก ับทุก Link ทีไ ่ ม่ได้ระบุชอ target ด้วยคำสง่ ั ื่ เฟรมเป้ำหมำย”> <BASE TARGET = “ชอ 17 การเชื่อมโยงให้สัมพันธ์ กันในเฟรม(2) ื่ เฟรมในวินโดว์ทเี่ ปิ ดอยู่ browser จะเปิ ดวินโดว์ใหม่ให้ ถ้ำไม่มช ี อ โดยถือว่ำเป็นวินโดว์ลก ู ั ันธ์ระหว่ำงเอกสำรระหว่ำงเอกสำรปัจจุบ ัน ื่ เฉพำะแสดงควำมสมพ ชอ ก ับเอกสำรอืน ่ _blank โหลด link นีไ้ ปทีห ่ น้ำจอทีบ ่ รำวเซอร์เปิ ดหน้ำต่ำงใหม่ ้ ับเฟรมทีก _self โหลด link นีท ่ ำล ังถูกใชง้ ำนอยู่ ้ ทีข ้ ับพืน _parent โหลด link นีท ่ องทุกเฟรมทีถ ่ ก ู กำหนด ภำยใต้แท็ก<FRAMESET> เดียวก ันก ับเฟรม ทีก ่ ำล ังถูกใชง้ ำนอยู่ ้ ทีท _top โหลด link นีไ้ ปย ังพืน ่ งหมดของหน้ ั้ ำจอบรำวเซอร์ ปัจจุบ ัน ต ัวอย่ำง <A HREF = “mypage.html” TARGET= “_parent”> 18 ตัวอย่าง <HTML> <HEAD> <TITLE> Using nested frame demo</TITLE> </HEAD> <FRAMESET COLS=“30%,*”> <FRAME NAME=“frame1” SRC=“toc.html”> <FRAME NAME=“main” SRC=“first.html”> </FRAMESET> </HTML> 19 ตัวอย่าง แฟ้ม toc.html <HTML> <HEAD> <TITLE> Table of Content</TITLE> </HEAD> <BODY> <B>เวบไซต์ทส ี่ นใจ</B>Click mouse เพือ ่ ไปย ังเวบไซต์ท ี่ ต้องกำร<BR> <A HREF=“http://www.yahoo.com” TARGET=“main”>Yahoo Search</A><BR> <A HREF=“http://www.sanook.com” TARGET=“main”>SANOOK</A><BR> <A HREF=“http://www.srw.ac.th” TARGET=“main”>Sriboonruangwittayakarn School</A> <BR> </BODY> </HTML> 20 ตัวอย่าง แฟ้ม first.html <HTML> <HEAD> <TITLE> first file Content</TITLE> </HEAD> <BODY> <H1>หน้ำจอแรก</H1> ี ำว</H2> <H2>ห้องเรียนสข <H2>ชมรมคอมพิวเตอร์</H2> <H3>โรงเรียนศรีบญ ุ เรืองวิทยำคำร</H3> </BODY> </HTML> 21 HELPING SEARCH ENGINES FIND YOUR WEBSITE ้ ัดทำ index เอำไว้สำหร ับ สำมำรกำหนดแท็ก <META> เพือ ่ ใชจ ่ Infoseek, AltaVista ค้นหำข้อมูล ให้ Search Engine ต่ำงๆเชน จำก index ได้ ้ ร้ำงคือ Meta Tag มีรป แท็ กทีใ่ ชส ู แบบด ังนี้ <META NAME=“description” CONTENT=“ คำบรรยำยทีแสดงว่ำโฮมเพจเรำเป็นอย่ำงไร?”> <META NAME=“Key word” CONTENT=“key1, key2, key3,…”> ต้องเขียนแท็ ก <META>ไว้ภำยในแท็ ก <HEAD>…</HEAD> เสมอ 22 HELPING SEARCH ENGINES FIND YOUR WEBSITE (2) ้ รุปย่อถึงกำรอธิบำยเว็บเพจ ่ นทีใ่ ชส DESCRIPTION เป็นสว KEYWORD เป็นรำยกำรของคียเ์ วิรด ์ ทีเ่ รำคำดว่ำผูท ้ เี่ ข้ำมำเยีย ่ ม ชมจะค้นหำเว็บไซต์ ต ัวอย่ำง <META NAME=“description” CONTENT=“ How to promote website.”> <META NAME=“Key word” CONTENT=“announcing website, web submittion, Burapha University, Eastern Seaboard”> 23 HELPING SEARCH ENGINES FIND YOUR WEBSITE (3) ้ อ ื่ title ของเว็บเพจเป็นกำรค้นหำอ ันด ับแรก ใน Infoseek จะใชช ใน yahoo จะใช ้ title ของเว็ บเพจพร้อมทงั้ description ในกำร ค้นหำ ้ หำของเว็บเพจ ใน Excite จะค้นหำจำกแท็ ก Comment และเนือ สรุป ต้องจ ัดทำคียเ์ วิรด ์ ไว้ในแท็ก TITLE, META และ COMMENT 24