หลักการทำframe

 

                   ปกติเราจะแสดงเว็บเพจใน Browser ได้ที่ละ 1 เว็บเพจ แต่ถ้าเราใช้ Frame เราจะสามารถแสดงเว็บเพจได้หลาย ๆ เว็บเพจในหน้าเดียว
โดยจะแบ่งหน้าของ browser ออกเป็นส่วน ๆ โดยใช้ Frame

        การใช้ Frame ส่วนมากเรานิยมที่จะใช้กับส่วนที่เป็น Navigation เช่น ให้มี Navigation เป็น Frame อยู่ทางซ้ายมือ และให้เนื้อหา
อยู่ทางขวามือ


 

                      การทำงานของ Frame จะเป็นดังรูปที่ 161 - 162 

        index.html

รูปที่ 161 แสดงหลักการทำงานของเฟรม

                                                                 รูปที่ 162 แสดงโครงสร้างของเฟรม

                                                                  
                   ถ้าเราใช้คำสั่งแบ่ง Frame เป็น 3 Frame ใน 1 หน้าเว็บเพจ เราจะต้องใช้ไฟล์ประกอบกันทั้งหมด 4 ไฟล์ดังรูป
        1.index.html เป็นไฟล์หลักทั้งหมด เมื่อผู้ชมจะดูหน้าเว็บเพจจะเข้ามาที่ไฟล์นี้เท่านั้น
                   2.Frame1.html เป็นไฟล์ที่แสดง Frame ส่วนบนของหน้า จะเรียกแสดงผลไฟล์นี้ผ่าน index.html เท่านั้น
                   3.Frame2.html เป็นไฟล์ที่แสดง Frame ส่วนซ้ายของหน้า จะเรียกแสดงผลไฟล์นี้ผ่าน index.html เท่านั้น
                   4.Frame3.html เป็นไฟล์ที่แสดง Frame ส่วนขวาของหน้า จะเรียกแสดงผลไฟล์นี้ผ่าน index.html เท่านั้น

รูปที่ 163 แสดงขั้นตอนการสร้างเฟรม

             1.เปิดไฟล์ html ใหม่ขึ้นมา
          2.จากนั้นคลิกที่ปุ่มตามรูปที่ 163

        ดังตัวอย่างเราจะสร้าง Frame ทั้งหมด 3 Frame เมื่อคลิกที่ปุ่มแล้วจะเป็นดังรูปที่ 164


        
รูปที่ 164 แสดงผลการสร้างเฟรม

ถ้าเรามองไม่เห็นขอบของ Frame ดังรูปด้านบนให้ไปที่  view > visual aid > Frame borders             3. เราสามารถเลือก Frame ที่ต้องการ และพิมพ์เนื้อหา หรือใส่รูปลงไปใน Frame นั้นได้เลย ดังรูปที่ 165 

  รูปที่ 165  แสดงการตั้งชื่อเฟรม

                       รูปที่ 166 การบันทึกเฟรม

           

                4.เมื่อเราเขียนเนื้อหาใน Frame ใดเรียบร้อยแล้วก็ให้คลิกที่เมนู  File > Save Frame 

  

                                  รูปที่ 167  การตั้งชื่อเฟรมของ TopFrame

ในตัวอย่างเรากำลังเขียนส่วน TopFrame เมื่อ Save เราก็ให้ชื่อไฟล์ว่า Chonnfe.html
ให้เราทำแบบนี้ในทุก Frame ที่เหลือ จะได้ File มาทั้งหมด 3 ไฟล์ ได้แก่
1.Chonnfe.html
2.Chonleft.html
3.Chonmain.html


รูปที่ 168 การตั้งชื่อเฟรมของ LeftFrame

                                

รูปที่ 169 การตั้งชื่อเฟรมของ MainFrame
5.เมื่อเราเขียนทุก Frame เรียบร้อยแล้วจะทำการ Save หน้าเว็บเพจ ให้เราไปที่
File > Save all  เพื่อเป็นการ Save หน้าหลักในการแสดงผล โดยเราจะ Save ในชื่อ index.html 
เท่านี้เราก็จะได้ File ทั้งหมด 4 ไฟล์ด้วยกัน ได้แก่
                        1.Chonnfe.html
2.Chonleft.html
3.Chonmain.html
4.index.html

           

                      รูปที่ 170 การบันทึกเฟรมทั้งหมด

รูปที่ 171 การบันทึก Index ของเฟรม


      

                        ถ้าลองสังเกตในเว็บไซต์บางเว็บไซต์จะเห็นว่าซีกซ้ายมือเป็นเมนู และเมื่อคลิกลิงค์เมนูนั้น จะมีหน้าเว็บเพจแสดงขึ้นมาในเฟรม
main Frame เป็นผลที่ได้จากการเชื่อมโยงระหว่างเฟรม ส่วนวิธีทำการเชื่อมโยงระหว่างเฟรม ทำได้ดังนี้.-

รูปที่ 172 การลิงค์ระหว่างเฟรม

รูปที่ 173 การทำลิงค์ไฟล์เป้าหมาย

 

รูปที่ 174 การกำหนดลิงค์แสดงผลไฟล์เป้าหมาย

 

จากนั้นกดปุ่ม <F12> แล้วทดสอบลิงค์ระหว่างเฟรมภายในบราวเซอร์ด้วยการคลิกที่จุดลิงค์  หน้าเว็บเพจจะแสดงในส่วนของ mainFrame

รูปที่ 176 การแสดงผลผ่าน Bownser

การสร้างhyperlink

                                                            

          ไฮเปอร์ลิงค์ (Hyperlink) หรือที่เรียกว่า “ลิงค์” เป็นการเชื่อมโยงเว็บไซต์บนอินเตอร์เน็ต จากจุดหนึ่งโยงไปยังอีกจุดหนึ่ง การเชื่อมโยง
ในลักษณะนี้นับว่ามีประโยชน์อย่างมาก เนื่องจากทําให็ผู้เข้าชม สามารถเข้าถึงข้อมูลและเนื้อหาทุกหน้า เว็บเพจภายในเว็บไซต์ของเราได้ 

          
          ในการทํางานของไฮเปอร์ลิงค์มีส่วนประกอบดังนี้
          1. ต้นทาง (Source Anchor) หมายถึง ส่วนประกอบบนเว็บที่เป็นจะลิงค์ ซึ่งเมื่อเลื่อนเมาส์ ไปชี้ พอยเตอร์จะเปลี่ยนเป็นรูปมือ และเมื่อ
คลิกเลือกหน้าเว็บหรือข้อมูลปลายทางจะปรากฏขึ้นมา ซึ่งอาจเป็นข้อความหรือรูปภาพก็ได้
          2. ปลายทาง (Destination Anchor) หมายถึง เนื้อหาข้อมูลต่างๆ ไม่ว่าจะเป็นข้อความหรือ รูปภาพ ซึ่งถูกเรียกให้ปรากฏขึ้นมาเมื่อมี
ผู้ชมคลิกที่ลิงค์ต้นทาง ซึ่งลิงค์ปลายทางแบ่งได้เป็นหลาย รูปแบบ ดังนี้
          - ตําแหน่งเฉพาะบนเว็บเพจ  คือการสั่งให้เบราเซอร์เปิดเว็บเพจพร้อมทั้งเลื่อนไปยัง ตําแหน่งที่ระบุไว้โดยทันที
          - เว็บเพจหรือเว็บไซต์  โดยส่วนมากลิงค์บนเว็บเพจจะใช้สําหรับเปิดไปยังหน้าเว็บ เพจอื่นภายในเว็บไซต์เดียวกัน หรือเปิดไปยัง หน้าเว็บไซต์อื่น
          - ไฟล์เอกสารอื่นๆ สามารถลิงค์ไปยังเนื้อหาหรือข้อมูลต่าง ๆ บนอินเตอร์เน็ตได้ หากรู้ ตําแหน่งที่อยู่ โดยวธีการทํางาน ของเบราเซอร์จะขึ้นอยู่
กับประเภทของไฟล์เหล่านั้น
          - คําสั่งส่งอีเมลล์  คือการสั่งให้เปิดโปรแกรมอีเมลล์บนเครื่องคอมพิวเตอร์ของผู้ชม เพื่อเตรียมเขียนข้อความส่งอีเมลล์
          - การรันโปรแกรมจาวาสคริปต์ สําหรับใช้ในการโต้ตอบบนเว็บเพจ การปิดวินโดว์ เบราเซอร์ การเปิดลิงค์ก็เป็นวินโดว์ใหม่ แบบป๊อบอัพ

          ในการลิงค์ข้อความนั้นสามารถทําได้ 2 วิธี คือ

          วิธีที่ 1 การลิงค์ข้อความไปยังส่วนต่าง ๆ ในหน้าเว็บเพจเดียวกัน มีขั้นตอนดังนี้
          1. วางเคอร์เซอร์หน้าข้อความที่ต้องการลิงค์ไปหา  
          2. คลิกเมนู Insert > Common           3. คลิกที่รูป  
          4.ปรากฎหน้าต่าง Named Anchor จากนั้น พิมพ์ชื่อลิงค์ โดยในที่นี้พิมพ์คําว่า Top
          5. คลิกปุ่ม OK
          6. จะปรากฏเป็นไอคอน 
          7. เลือกข้อความที่ใช้เป็นจุดลิงค์
          8. พิมพ์ข้อความดังนี้ #top          9. เลือกเมนู File > Save            10.จากนั้นทดลองเปิด Internet Explorer โดยกด F12 

                                                                                                                          

                                                                                          รูปที่ 105 จุดสำหรับการสร้างลิงค์


                     รูปที่ 106 เลือก Common ในเมนู Insert

                                 รูปที่ 107 ใส่ข้อความจุดทำลิงค์

                                  

                                                                                                          รูปที่ 108 การแสดงจุดลิงค์

รูปที่ 109 การสร้างจุดลิงค์     

                                                              รูปที่ 110 การใส่ข้อความจุดลิงค์

รูปที่ 111 การแสดงผลจุดลิงค์

           

          วิธีที่ 2 การลิงค์ข้อความไปยังหน้าเว็บเพจอื่นในเว็บไซต์เดียวกัน มีขั้นตอนดังนี้
          1. เลือกข้อความที่ต้องการ สร้างจุดลิงค์
          2. คลิกที่ปุ่ม
          3.ปรากฎหน้าต่าง Select File จากนั้นคลิกเลือกเว็บเพจปลายทางที่ต้องการลิงค์
          4. คลิกปุ่ม OK
          5. ที่เมนู File เลือก Save

รูปที่ 112 การสร้างจุดลิงค์เว็บเพจอื่น

                                                            รูปที่ 113  ขั้นตอนสร้างจุดลิงค์

                                       

                                                                                        รูปที่ 114 การ เลือกเว็บเพจเป้าหมายสร้างจุดลิงค์

 

                                                                                            
                                                                                                                                                                         
                                                                                รูปที่ 116 การแสดงจุดลิงค์

 

            1. ใส่รูปภาพลงไปในเว็บเพจ โดยคลิกที่เมนู Insert  > Image  หรือคลิกที่รูป 
            2. คลิกเลือกรูปภาพที่ต้องการ แล้วคลิกปุ่ม OK
            3. ใส่ข้อความแทนรูปภาพ แล้วคลิกปุ่ม OK
            4. กำหนดหน้าเว็บเพจที่ต้องการลิงค์ไป โดยคลิกที่  
            5. จากนั้นเลือกรูปภาพที่ต้องการทำลิงค์  แล้วคลิก OK 
            6. เลือกเมนู File > Save
            7. กดปุ่ม F12  เพื่อดูผลการสร้างลิงค์ แล้วคลิกที่รูปทำลิงค์                                               

รูปที่ 117 ขั้นตอนการสร้างลิงค์จากรูปภาพ

 

  
                        
                           รูปที่ 118 เลือก Common ในเมนู Insert

รูปที่ 119 การเลือกรูปภาพลิงค์

 

                                              รูปที่ 120  การใส่ข้อความรูปภาพลิงค์

                                                             รูปที่ 121 การเปิดรูปภาพลิงค์

                                
                                                                                           รูปที่ 122 การเลือกเว็บเพจเป้าหมาย

                รูปที่ 123 การบันทึกเว็บเพจ

                                     
                                                                                                  รูปที่ 124 การแสดงผลผ่าน  Browser

          อีเมล์ลิงค์เป็นลิงค์ที่เมื่อเราคลิกแล้วจะเปิดหน้าต่างใหม่พร้อมกับเรียกโปรแกรมส่งอีเมล์
ที่ เรากําหนดไว้ในเว็บเบราเซอร์ ซึ่งในช่องที่ให้กรอกที่อยู่ของผู้รับของโปรแกรมส่งอีเมล์จะแสดง
อีเมล์แอดเดรส (Email Address) ที่กําหนดไว้ในอีเมล์ลิงค์ ซึ่งการแทรกอีเมล์ลิงค์ในเอกสารทําได้
ดังนี้

          1. เลือกตําแหน่ง ที่ต้องการเพิ่มอีเมล์ลิงค์ลงในเว็บเพจ
          2. เลือกเมนู Insert -> E-mail Link หรือ คลิกที่ปุ่ม  
          3. หลังจากขั้นตอนที่ 2 จะปรากฎไดอะล็อก Email Link ดังรูปที่   ให้พิมพ์อีเมล์แอดเดรสที่ใช้ตอนคลิกอีเมล์ลิงค์
          เช่น mailto:naunggate@yahoo.co.th  เป็นต้น
          4. เลือกเมนู File > Save  จากนั้นทดลองโดยกดที่ F12 จะปรากฏดังรูปที่ 125

                                       
                                                                                       รูปที่ 125 การคลุมข้อความอีเมล์ลิงค์

รูปที่ 126 ขั้นตอนการสร้างอีเมล์ลิงค์

                                    หรือเลือกตรง Common Tab ใน Insert Bar


  
                            รูปที่ 127 การเลือก Common ในเมนู Insert 

รูปที่ 128 ข้อความอีเมล์ลิงค์

 

                     รูปที่ 129 การบันทึกเว็บเพจ

                     เราสามารถที่จะทําเว็บของเราเป็นเว็บบริการหรือรวมลิงค์ให้ผู้อื่นสามารถลิงค์ไปยังเว็บไซต์อื่นได้อีกด้วยเพื่อสร้างความหลากหลาย
ในเว็บของเรา และยังสะดวกกับเจ้าของเว็บเองอีกด้วยโดยไม่ต้องพิมพ์ URL เข้าไปใหม่ แต่สามารถคลิกที่เว็บของตัวเองก็สามารถไปยังเว็บที่ต้องการได้
มีวิธีทำดังนี้.-

                     1. พิมพ์ข้อความที่ต้องการทําลิงค์ ตัวอย่างต้องการลิงค์ไปยังเว็บ สำนักบริหารงานการศึกษานอกโรงเรียน ให้พิมพ์
สำนักบริหารงานการศึกษานอกโรงเรียน
                     2. ให้แดรกเม้าส์ทับข้อความ สำนักบริหารงานการศึกษานอกโรงเรียน จากนั้นที่ Properties inspector ในช่อง Link ให้พิมพ์
URL เข้าไปคือ http://www.nfe.go.th 
                     3. เลือกเมนู File > Save  จากนั้นกด F12 เพื่อดูผ่าน Browser ใ ช้ Mouse ชี้ที่ข้อความ สำนักบริหารงานการศึกษา
นอกโรงเรียน  ให้สังเกตจาก Status bar ด้านล่างจะระบุเว็บไซต์ที่ถูกเชื่อมโยง แล้วทดสอบคลิกที่ลิงค์ที่ทําไว้

รูปที่ 130 คลุมข้อความสร้างลิงค์เว็บไซต์เป้าหมาย

                      รูปที่ 131 บันทึกเว็บเพจ

                                                   


                                                               รูปที่ 132 การแสดงผลผ่าน Browser