วิธีการจัดรูปแบบ Tag Cloud

ใช้ CSS เพื่อสร้างสไตล์แท็กเมฆ

แท็กเมฆเป็นภาพของภาพของรายการ คุณมักจะเห็นแท็กเมฆในบล็อก ได้รับความนิยมจากเว็บไซต์อย่าง Flickr

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

สิ่งที่คุณจำเป็นต้องสร้างเมฆแท็ก?

ง่ายที่จะสร้างแท็กเมฆคุณจะต้องมีสองสิ่ง:

เมฆแท็กส่วนใหญ่เป็นรายการลิงก์ดังนั้นจึงช่วยได้หากแต่ละรายการมี URL ที่เชื่อมโยงอยู่ แต่ไม่จำเป็นต้องสร้างลำดับชั้นภาพ

ขั้นตอนในการสร้าง Tag Cloud ของลิงก์ยอดนิยม

เว็บไซต์ของฉันมีบทความที่ได้รับการดูหน้าเว็บทุกวันและนี่เป็นเมตริกที่ง่ายสำหรับฉันที่จะใช้เพื่อสร้างแท็กเมฆ ดังนั้นในตัวอย่างนี้เราจะสร้างแท็ก cloud จากรายการบทความบทความ 25 อันดับแรกบนเว็บไซต์ของฉันสำหรับสัปดาห์ 1 มกราคม 2007

  1. กำหนดจำนวนระดับที่คุณต้องการในลำดับชั้นของคุณ
    1. แม้ว่าจะมีหลายระดับในระบบคลาวด์ของคุณเนื่องจากคุณมีรายการในรายการ แต่โค้ดนี้ก็น่าเบื่อและความแตกต่างอาจน้อยมาก ขอแนะนำให้มีลำดับชั้นไม่เกิน 10 ระดับ
  2. ตัดสินใจตัดคะแนนสำหรับแต่ละระดับ
    1. อาจเป็นการง่ายๆเพียงแค่ตัดมุมมองหน้าของคุณต่อวันเป็นชิ้น 1/10 ชิ้นนั่นคือ ถ้าหน้าเว็บที่ใหญ่ที่สุดในไซต์ของคุณได้รับการดูหน้าเว็บ 100 ครั้งต่อวันคุณสามารถแบ่งเป็น 100+, 90-100, 80-90, 70-80 เป็นต้นฉันสับหน้าเว็บของฉันดูแบบนี้
  3. แสดงรายการของคุณในลำดับการดูหน้าเว็บและให้อันดับตามขั้นตอนที่ 2
    1. อย่ากังวลหากคุณไม่มีรายการใด ๆ ในช่องบางช่องซึ่งทำให้เมฆน่าสนใจยิ่งขึ้น
  4. จัดเรียงรายการตามลำดับตัวอักษร (หรือเรียงลำดับที่สองที่คุณต้องการใช้)
    1. นี่คือสิ่งที่ทำให้เมฆน่าสนใจ ถ้าคุณปล่อยให้เรียงลำดับตามอันดับจากนั้นก็จะเป็นรายการที่มีรายการที่ใหญ่ที่สุดที่ด้านบนลงไปที่เล็กที่สุดที่ด้านล่าง
  5. เขียน HTML ของคุณเพื่อให้อันดับเป็นจำนวนชั้นเรียน class = "tag4"> การเพิ่มไฟล์เสียงสตรีมมิ่ง

เมื่อคุณมี HTML สำหรับรายการแต่ละรายการและลำดับที่คุณต้องการแสดงแล้วคุณต้องตัดสินใจ คุณสามารถวางลิงก์ไว้ในย่อหน้าได้และคุณต้องทำ แต่จะไม่มีเครื่องหมายแสดงความหมายและทุกคนที่ไม่มี CSS มาที่แท็กของคุณจะเห็นลิงก์ขนาดใหญ่ HTML สำหรับรายการประเภทนี้จะมีลักษณะดังนี้:

การเพิ่มไฟล์เสียงสตรีม ซอฟต์แวร์ออกแบบเว็บที่ดีที่สุด สัญลักษณ์สัญลักษณ์สี / aa033103a.htm" class = "tag2"> การสร้างหน้าเว็บสำหรับผู้ที่หลงทางทั้งหมด สัญลักษณ์สี < a>

แต่ขอแนะนำให้คุณสร้างแท็กเมฆโดยใช้รายการที่เรียงลำดับ เป็นอีกหนึ่งบรรทัดของโค้ด HTML และ CSS แต่จะช่วยให้แน่ใจได้ว่าเนื้อหาจะสามารถอ่านได้ไม่ว่าใครจะมาดูบ้าง HTML จะมีลักษณะดังนี้:

  • การเพิ่มไฟล์เสียงสตรีมมิง
  • ซอฟต์แวร์ออกแบบเว็บที่ดีที่สุด
  • การสร้างเว็บเพจสำหรับคนที่หลงทางโดยสิ้นเชิง
  • สัญลักษณ์สัญลักษณ์สี

    แต่รูปแบบสำหรับแท็กมีเมฆอยู่ที่ไหน

    ตอนนี้เราได้รับส่วนสนุก - สไตล์ CSS เมื่อคุณจัดรูปแบบแท็กเมฆคุณมักจะเปลี่ยนขนาดตัวอักษรและน้ำหนักตัวอักษร คุณยังสามารถเปลี่ยนสีของแบบอักษรหรือพื้นหลังหรือแอตทริบิวต์สไตล์อื่นได้ แต่ขนาดและน้ำหนักเป็นแบบเดิม

    คุณจำเป็นต้องมี 10 ชั้นเรียนสไตล์หนึ่งสำหรับแต่ละอันดับแท็ก:

    #cloud a.tag1 {font-size: 0.7em; น้ำหนักตัวอักษร: 100; } # cloud a.tag2 {font-size: 0.8em; น้ำหนักตัวอักษร: 200; } # cloud a.tag3 {font-size: 0.9em; น้ำหนักตัวอักษร: 300; } # cloud a.tag4 {font-size: 1.0em; น้ำหนักตัวอักษร: 400; } # cloud a.tag5 {font-size: 1.2em; น้ำหนักตัวอักษร: 500; } # cloud a.tag6 {font-size: 1.4em; น้ำหนักตัวอักษร: 600; #cloud a.tag7 {font-size: 1.6em; น้ำหนักตัวอักษร: 700; #cloud a.tag8 {font-size: 1.8em; น้ำหนักตัวอักษร: 800; #cloud a.tag9 {font-size: 2.2em; น้ำหนักตัวอักษร: 900; #cloud a.tag10 {font-size: 2.5em; น้ำหนักตัวอักษร: 900; }

    ฉันต้องการรวมสไตล์บางอย่างไว้รอบ ๆ ตัวเมฆ: วางตัวข้อความในระบบคลาวด์และตั้งค่าความสูงเป็นเส้นหนึ่งเพื่อให้เมฆสามารถอ่านได้และตรวจดูให้แน่ใจว่าแท็ก anchor ไม่มีช่องว่างอยู่

    # cloud {padding: 2px; line-height: 3em; text-align: center; } # cloud {padding: 0px; }

    สุดท้ายหากคุณกำลังใช้วิธีการจัดแนวความหมาย (เช่นรายการที่เรียงลำดับ) คุณจะต้องเพิ่ม CSS อีกสองบรรทัดเพื่อให้รายการไม่มีสัญลักษณ์แสดงหัวข้อย่อยและไม่เว้นไว้:

    #cloud {margin: 0; } #cloud li {display: inline; }