เฟรม - มันคืออะไร? โครงสร้างเฟรมและการสร้าง

สารบัญ:

เฟรม - มันคืออะไร? โครงสร้างเฟรมและการสร้าง
เฟรม - มันคืออะไร? โครงสร้างเฟรมและการสร้าง
Anonim

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

แต่เฟรมส่วนใหญ่จะใช้ในการสร้างพอร์ทัลเว็บขนาดใหญ่ ซึ่งจำเป็นต้องมีรายการเมนูและเมนูย่อยจำนวนมาก พวกเขามักจะพูดเกี่ยวกับบุคคลเหล่านี้: "เว็บไซต์บนเฟรม" จำเป็นต้องมีความรู้ที่ดีเกี่ยวกับ HTML เพื่อสร้างทรัพยากรดังกล่าว

การสร้างเฟรมในตัวสร้างเว็บไซต์

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

แต่เฟรมส่วนใหญ่จะใช้ในการสร้างพอร์ทัลเว็บขนาดใหญ่ ซึ่งจำเป็นต้องมีรายการเมนูและเมนูย่อยจำนวนมาก พวกเขามักจะพูดเกี่ยวกับบุคคลเหล่านี้: "เว็บไซต์บนเฟรม" การสร้างทรัพยากรดังกล่าวต้องใช้ความรู้ที่ดีภาษา HTML

การสร้างเฟรม
การสร้างเฟรม

ด้วยความช่วยเหลือของ "บริการ" นี้ คุณสามารถสร้างหลายเฟรมบนหน้าได้ แต่คุณจะไม่ได้รับองค์ประกอบที่เชื่อมต่อถึงกันด้วยวิธีนี้

เฟรมใน CMS

ในหลายๆ โปรแกรมสำหรับสร้างเว็บไซต์ สามารถติดตั้งโมดูลที่เกี่ยวข้องได้ ตัวอย่างเช่น สำหรับ Joomla เฟรมคือโมดูล "Wrapper"

ใส่กรอบ
ใส่กรอบ

สามารถพบได้และสร้างในแผงควบคุม Joomla CMS: "ส่วนขยาย" - "ตัวจัดการโมดูล" - "สร้าง" (ปุ่มกลมสีส้มที่มีเครื่องหมายบวกอยู่ข้างใน) ในหน้าต่างป๊อปอัป ในรายการ คุณจะเห็นโมดูล "Wrapper"

ไม่อยู่ก็ไม่รวม ในการใช้งาน ก่อนอื่นคุณต้องเปิดใช้งานที่นี่: แท็บ "ส่วนขยาย" จากนั้น "ตัวจัดการส่วนขยาย" จากนั้นแท็บ "การจัดการ" และเรากำลังค้นหาในรายการที่เปิดขึ้นสำหรับการค้นหาอย่างรวดเร็วในฟิลด์ "ตัวกรอง" ให้ป้อนคำว่า: Wrapper ตรงข้ามโมดูลนี้ ควรมีไอคอนสีเขียวพร้อมเครื่องหมายถูกด้านใน วงกลมสีแดงที่มีจุดด้านในหมายความว่าปลั๊กอินนี้ถูกปิดใช้งาน

หลังจากขั้นตอนนี้ คุณสามารถกลับไปที่ "ตัวจัดการโมดูล" สร้างเฟรมและตั้งค่าพารามิเตอร์ได้

กรอบคืออะไร
กรอบคืออะไร

ดังที่คุณเห็นในภาพ โมดูลอนุญาตให้คุณตั้งค่า: ชื่อเรื่องเหนือเฟรม ตำแหน่งของโมดูล เลือกหน้าของไซต์ที่จะแสดง และยังปรับความกว้าง ความสูง; ใส่กรอบแล้วจริงๆเชื่อมโยงไปยังหน้าเว็บ หากในเฟรมที่คุณต้องการแสดงหน้าหลักของเว็บไซต์แบบเต็มความกว้าง 100% ซึ่งกำหนดโดยค่าเริ่มต้นจะไม่เพียงพอ คุณสามารถวาง 400% ได้ทันทีอย่างปลอดภัย โดยปกติความสูง 200 ก็เพียงพอแล้วที่จะแสดงเมนูด้านบนของหน้า เนื้อหาอื่นๆ ทั้งหมดจะมองเห็นได้หากผู้ใช้ (ผู้เยี่ยมชมเว็บไซต์) ใช้แถบเลื่อน

นี่คือตัวอย่างเฟรมใน Joomla

ตัวอย่างเฟรม
ตัวอย่างเฟรม

Jumla โมดูลสำหรับสร้างเฟรมสะดวกและใช้งานง่ายมาก อย่างไรก็ตาม ความสามารถของมันถูกจำกัด เช่นเดียวกับความสามารถของตัวสร้าง

ประวัติศาสตร์และความเป็นจริง

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

ไซต์ที่มีโครงสร้างซับซ้อน

สำหรับพวกเขา การสร้างเฟรมที่เชื่อมต่อถึงกันหลายเฟรมเป็นทางออกที่ดีที่สุดสำหรับการจัดระเบียบเนื้อหาในหน้าทรัพยากร ตามกฎแล้วพอร์ทัลขนาดใหญ่เติบโตแข็งแกร่งทุกปี

ทำอย่างไรให้ได้ผลเหมือนเดิม? โครงสร้างเฟรมถูกสร้างขึ้นอย่างไร

โครงสร้างเฟรม
โครงสร้างเฟรม

อย่างไรใส่เฟรมลงในโค้ดของเพจ

เฟรมใน HTML ถูกเพิ่มโดยใช้แท็ก:

  • เฟรม (สำหรับหน้าต่างแยกต่างหาก);
  • frameset (ใช้เพื่อสร้างโครงสร้างทั้งหมด);
  • iframe (เฟรม "ลอย");
  • noframes (ในกรณีที่เฟรมไม่แสดงในเบราว์เซอร์ของผู้ใช้)

แท็กแรกที่ระบุจะอยู่ในคู่ของ และ เสมอ และแทนที่และ และด้วยความช่วยเหลือของแอตทริบิวต์ที่เหมาะสม คุณสามารถปรับคุณสมบัติของแต่ละองค์ประกอบ: ชื่อ (ชื่อ=), ขนาด (cols=และแถว=), การปรากฏตัวของเส้นขอบ (เส้นขอบ), ลักษณะของแถบเลื่อนและ แน่นอน ลิงก์ไปยังหน้าเว็บที่จะแสดง

การออกแบบที่หลากหลาย

ทั้งหน้าของเว็บไซต์สามารถแบ่งออกเป็นพื้นที่ ตัวอย่างเช่น เช่นนี้:

ซ้าย กรอบบน
ขวา

โครงสร้างดังกล่าว (เรียกว่าซ้อนกัน) สามารถรับได้โดยการเขียนแอตทริบิวต์ cols ภายในแท็ก ซึ่งหมายถึงตำแหน่งของเฟรมในแนวนอน และแถว - ในแนวตั้ง ถัดไป ใส่เครื่องหมาย=และกำหนดขนาด ตัวอย่างเช่น 60%, 40% - เปอร์เซ็นต์ (หน้าต่างหนึ่งจะใช้พื้นที่เบราว์เซอร์ 60% อีกหน้าต่างหนึ่งตามลำดับ 40%) หรือ 100, 200 - อัตราส่วนภาพเป็นพิกเซล ขนาดของเฟรมใดเฟรมหนึ่งไม่สามารถกำหนดได้เลย (จะถูกกำหนดโดยค่าเริ่มต้น) หากต้องการทำสิ่งนี้ หลังหรือก่อนเครื่องหมายจุลภาค คุณต้องระบุสัญลักษณ์.

ทำรังแต่ละพื้นที่ใหม่จะแสดงด้วยเฟรมเซ็ตใหม่

ตัวอย่างโค้ด:

โปรดทราบว่าในตัวอย่างของเรา สำหรับเฟรมที่สองและสาม ขนาดจะถูกระบุเพียงครั้งเดียว

ไอเดียมากมายให้คุณสร้างเฟรมให้สมบูรณ์ ตัวอย่างตำแหน่งของพวกเขาในหน้าต่างเบราว์เซอร์สามารถให้ได้อย่างไม่รู้จบ (เปลี่ยนรหัสตามลำดับ) อย่างไรก็ตาม ข้อมูลนี้ไม่พบการใช้งานจริงมาเป็นเวลานาน เฟรม หากใช้ในปัจจุบันในการสร้างไซต์ จะอยู่ในรูปแบบของโมดูลใน CMS ที่ไม่เสียค่าใช้จ่ายหรืออยู่ในรูปของ iframe เท่านั้น

กรอบลอย

ไซต์บนเฟรม
ไซต์บนเฟรม

มันแปลกทำไมได้ชื่อแบบนี้ คำว่า "ในตัว" เหมาะกว่าที่นี่ เฟรมนี้สร้างขึ้นเพื่อแสดงเนื้อหาของไฟล์ คุณอัปโหลดเอกสารหรือไฟล์ใดๆ ไปยังฐานข้อมูล เขียนพาธโดยใช้แท็ก iframe - และผู้เข้าชมจะเห็นข้อความของไฟล์ (วิดีโอหรือรูปภาพ) ขออภัย เบราว์เซอร์ไม่ได้แสดงเนื้อหาเสมอไป ในการดำเนินการนี้ ผู้สร้างเว็บจะต้องป้อนวลีระหว่างแท็กเปิดและแท็กปิด: "เบราว์เซอร์ของคุณไม่แสดงเนื้อหา"

ตัวอย่างเช่น Seopult.ru เป็นบริการที่รู้จักกันดีสำหรับผู้เชี่ยวชาญด้านการโปรโมต ไม่ใช่ไซต์หลักของเขาเท่านั้น แต่เป็นมิเรอร์ I.seopult.pro ที่สร้างขึ้นสำหรับไคลเอนต์พอร์ทัล รหัส iframe เขียนดังนี้:

คำแนะนำ

. แท็กอยู่ไหน

  • ถูกสร้างขึ้นเพื่อกำหนดรายการ รองรับทุกบราวเซอร์

    ในหน้ามิเรอร์ คุณจะเห็นคำว่า "คำแนะนำ" ในรูปแบบของปุ่ม การคลิกที่ตรงกลางหน้าต่างเบราว์เซอร์จะเป็นการเปิดงานนำเสนอ

    ใหญ่ไปหมดไซต์สำหรับดูภาพยนตร์และซีรีส์สร้างขึ้นโดยใช้ iframe (เช่น "Imhonet") รวมถึงเครือข่ายสังคมออนไลน์ แม้แต่หน้าหลักของ "Yandex" ก็มีแท็กนี้และมากกว่าหนึ่งคู่

    วิธีเขียน iframe

    คุณสามารถอัปโหลดเอกสารในรูปแบบของหน้าต่างที่มีแถบเลื่อนไปยังที่ใดก็ได้บนไซต์ โดยปกติแท็กจะวางอยู่ภายในเนื้อหา เกินมาตรฐาน

    และ

    ตามที่แสดงในตัวอย่างด้านบน แท็กรายการสามารถใช้ -

    • เพิ่มแอตทริบิวต์ใน iframe:

      • กว้าง (กว้าง) และสูง (สูง=);
      • จัดแนวขอบ;
      • เยื้องที่อาจหรือไม่ได้ระบุ: ค่าเริ่มต้นคือ 6 - แค่นี้ก็เพียงพอแล้ว
      • ใช้ allowtransparency คุณสามารถตั้งค่าความโปร่งใสของพื้นที่เฟรมเพื่อให้สามารถมองเห็นพื้นหลังของหน้าได้
      • บวก scr ที่คุ้นเคย ชื่อ การเลื่อน เส้นขอบ

      การนำทางด้วย iframe

      ทักษะการจัดเฟรมที่น่าสนใจที่สุดคือการเขียนโค้ดที่อนุญาตให้คุณเปิดเนื้อหาในหน้าต่างโดยใช้ลิงก์ ซึ่งเป็นสิ่งที่ผู้สร้างกระจก Seopult ทำ โดยมีลิงก์หลายลิงก์ในครั้งเดียวเท่านั้น (พร้อมให้ผู้ใช้ใช้งานได้บน หน้าเดียวกัน)

      สำหรับสิ่งนี้ iframe ถูกใช้แล้ว ชื่อจะถูกเขียนเพิ่มเติมด้วยชื่อ=ตัวอย่างเช่น ส่วนหัว นอกจากนี้ ก่อนหน้านั้นในแท็กและลิงก์จะถูกเขียนผ่าน HREF=โดยมีการระบุแอตทริบิวต์ตามหลัง ก่อนใช้แท็กปิด a จะมีการระบุคำจารึกที่จะทำหน้าที่เป็นปุ่มลิงก์ แท็ก "ก" การเปิดและปิดอยู่ในแท็ก p.

      คุณสามารถเขียนโค้ดได้หลายบรรทัดในโค้ด เพื่อให้ได้ปุ่มลิงก์หลายปุ่มในแถวเดียวบนไซต์ในที่สุด โดยคลิกที่เนื้อหาต่างๆ ที่จะแสดงในหน้าต่างด้านล่าง

      รหัสจะมีลักษณะดังนี้:

      ลงโฆษณา

      ดูโฆษณา

      Image
      Image

      มันจะดูเป็นอย่างไรในเว็บไซต์:

      วิธีแทรก iframe ลงในเว็บไซต์ Joomla

      ตามมาตรฐาน แผงควบคุม Joomla มีโมดูล "HTML-code" ที่เปิดใช้งาน (พร้อมใช้งาน) ด้วยวิธีนี้ คุณสามารถแทรกโค้ดใดก็ได้บนไซต์ อย่างไรก็ตาม เขาเมินเฉยต่อโค้ดด้วยแท็ก iFrem อย่างดื้อรั้น ดังนั้น เราจะใช้โมดูล Jumi พิเศษ

      ก่อนอื่น คุณต้องดาวน์โหลดจากอินเทอร์เน็ตและติดตั้งผ่านแผงการดูแลระบบ Joomla: "ส่วนขยาย" - "ตัวจัดการส่วนขยาย" - "เลือกไฟล์" ระบุเส้นทางไปยังไฟล์เก็บถาวรที่ดาวน์โหลดแล้วคลิก "ดาวน์โหลด"

      หลังจากติดตั้งสำเร็จ ให้ไปที่ "ตัวจัดการโมดูล" แล้วสร้างใหม่ เลือกประเภทของจูมิ ในหน้าต่างที่เปิดขึ้น ในช่อง "รหัสที่กำหนดเอง" ให้ป้อน iFrem ที่เตรียมไว้ ตามที่แสดงในย่อหน้าก่อนหน้าของบทความ ตั้งชื่อโมดูล ระบุตำแหน่งตำแหน่งและหน้าเว็บไซต์ คลิกบันทึกแล้วลองดู

      เบราว์เซอร์และเฟรม

      เบราว์เซอร์ยอดนิยมทั้งหมดแสดงเนื้อหาของหน้าต่างเฟรมได้ดี: Chrome, Safari, Firefox, Android, iOS Internet Explorer และ Opera มีอัตราที่สูงเป็นพิเศษในเรื่องนี้ และยังไม่มีการรับประกันที่ผู้เยี่ยมชมเว็บไซต์ของคุณจะเห็นเนื้อหาของหน้าต่างทั้งหมด ในกรณีนี้ คุณควรฝากข้อความโดยใช้แท็ก noframe (เปิดและปิด) คุณสามารถป้อนข้อมูลต่อไปนี้: "เบราว์เซอร์ของคุณล้าสมัย อัปเดตเวอร์ชันเพื่อแสดงเนื้อหาของไซต์" หากเบราว์เซอร์ของผู้ใช้แสดงเฟรมอย่างถูกต้อง พวกเขาจะไม่เห็นข้อความนี้

      ดังนั้น เฟรมคือพื้นที่หรือหน้าต่างของไซต์ที่มี URL ของตัวเอง ใช้เพื่อแสดงหน้าเว็บหลายหน้าหรือเอกสารอิสระในฟิลด์เบราว์เซอร์เดียวพร้อมกัน โดยมี URL ของตัวเองด้วย แม้ว่าเฟรมจะอนุญาตให้คุณจัดระเบียบไซต์ที่ซับซ้อนได้ดี แต่ก็ไม่ได้ถูกใช้มาเป็นเวลานาน ยกเว้น iframe การใช้แท็กนี้ยังคงเกี่ยวข้องกับการโหลดงานนำเสนอ เครื่องเล่นวิดีโอ เอกสารข้อความในหน้าต่างเฉพาะ มีการใช้งานอย่างแข็งขันในแหล่งข้อมูลบนเว็บขนาดใหญ่และเป็นที่รู้จัก