ໃຊ້ຕົວອັກສອນ, ຊາຍແດນ, ແລະຮູບພາບຕ່າງໆເພື່ອອອກແບບຫົວຂໍ້ຂ່າວ
ຫົວຂໍ້ແມ່ນທົ່ວໄປໃນຫນ້າເວັບຕ່າງໆທີ່ສຸດ. ໃນຄວາມເປັນຈິງ, ຫຼາຍໆເອກະສານຂໍ້ຄວາມທີ່ມີແນວໂນ້ມທີ່ຈະມີຢູ່ຢ່າງຫນ້ອຍຫນຶ່ງຫົວຂໍ້ເພື່ອວ່າທ່ານຮູ້ຊື່ຂອງສິ່ງທີ່ທ່ານກໍາລັງອ່ານ. ຫົວຂໍ້ເຫຼົ່ານີ້ຖືກກໍານົດໂດຍໃຊ້ຫົວຂໍ້ຫົວຂໍ້ HTML - h1, h2, h3, h4, h5 ແລະ h6.
ໃນບາງເວັບໄຊທ໌່, ທ່ານອາດພົບວ່າຫົວຂໍ້ທີ່ຖືກກໍານົດໂດຍບໍ່ໃຊ້ອົງປະກອບເຫຼົ່ານີ້. ແທນທີ່ຈະ, ຫົວຂໍ້ອາດຈະນໍາໃຊ້ວັກທີ່ມີຄຸນລັກສະນະຊັ້ນພິເສດເພີ່ມໃສ່ພວກເຂົາ, ຫຼືພະແນກທີ່ມີອົງປະກອບຫ້ອງຮຽນ. ເຫດຜົນທີ່ຂ້າພະເຈົ້າມັກຈະໄດ້ຍິນກ່ຽວກັບການປະຕິບັດທີ່ບໍ່ຖືກຕ້ອງນີ້ແມ່ນວ່າຜູ້ອອກແບບ "ບໍ່ມັກຫົວຂໍ້ວິທີເບິ່ງ". ໂດຍຕົວຢ່າງ, ຫົວຂໍ້ແມ່ນສະແດງຢູ່ໃນແບບຫນາແລະພວກມັນມີຂະຫນາດໃຫຍ່ກວ່າ, ໂດຍສະເພາະແມ່ນອົງປະກອບ h1 ແລະ h2 ທີ່ສະແດງໃນຂະຫນາດຕົວອັກສອນຫຼາຍກ່ວາສ່ວນທີ່ເຫຼືອຂອງຂໍ້ຄວາມຂອງຫນ້າ. ຈື່ໄວ້ວ່ານີ້ແມ່ນພຽງແຕ່ລັກສະນະຕົ້ນຕໍຂອງອົງປະກອບເຫຼົ່ານີ້! ມີ CSS, ທ່ານສາມາດເຮັດໃຫ້ຫົວຂໍ້ເບິ່ງແຕ່ທ່ານຕ້ອງການ! ທ່ານສາມາດປ່ຽນຂະຫນາດຂອງຕົວອັກສອນ, ລົບກ້າຫານ, ແລະອື່ນໆຫຼາຍ. ຫົວຂໍ້ແມ່ນວິທີການທີ່ເຫມາະສົມທີ່ຈະລະຫັດຫົວຂໍ້ຂອງຫນ້າ. ນີ້ແມ່ນເຫດຜົນບາງຢ່າງ.
ເປັນຫຍັງຈຶ່ງໃຊ້ແຖບຫົວຂໍ້ແທນທີ່ຈະໃຊ້ DIVs ແລະ Styling
ເຄື່ອງຈັກຊອກຫາເຊັ່ນດຽວກັນກັບແຖບຫົວຂໍ້
ນີ້ແມ່ນເຫດຜົນທີ່ດີທີ່ສຸດທີ່ຈະນໍາໃຊ້ຫົວຂໍ້ແລະນໍາໃຊ້ໃນຄໍາສັ່ງທີ່ຖືກຕ້ອງ (ie h1, ຫຼັງຈາກນັ້ນ h2, ຫຼັງຈາກນັ້ນ h3, ແລະອື່ນໆ). ເຄື່ອງຈັກຊອກຫາໃຫ້ຄວາມສູງທີ່ສູງທີ່ສຸດກັບຂໍ້ຄວາມທີ່ລວມຢູ່ໃນຫົວຂໍ້ tags ເນື່ອງຈາກມີຄ່າເສລີພາບໃນຂໍ້ຄວາມນັ້ນ. ໃນຄໍາສັບຕ່າງໆອື່ນໆ, ໂດຍການຕິດສະຫຼາກຊື່ຫນ້າ H1 ຂອງທ່ານ, ທ່ານບອກກັບເຄື່ອງຈັກຊອກຫາວ່າມັນເປັນຈຸດສຸມ # 1 ຂອງຫນ້າ. ຫົວຂໍ້ H2 ມີຄວາມສໍາຄັນ # 2, ແລະອື່ນໆ.
ທ່ານບໍ່ຈໍາເປັນຕ້ອງໃຊ້ສິ່ງທີ່ທ່ານໃຊ້ເພື່ອກໍານົດຫົວຂໍ້ຂອງທ່ານ
ໃນເວລາທີ່ທ່ານຮູ້ວ່າຫນ້າເວັບທັງຫມົດຂອງທ່ານຈະມີ H1 ທີ່ມີຄວາມຫນາແຫນ້ນ, 2em ແລະສີເຫຼືອງ, ຫຼັງຈາກນັ້ນທ່ານສາມາດກໍານົດວ່າຢູ່ໃນຄໍເຕົ້າໄຂ່ທີ່ທ່ານຕ້ອງເຮັດ. 6 ເດືອນຕໍ່ມາ, ເມື່ອທ່ານກໍາລັງເພີ່ມຫນ້າອື່ນ, ທ່ານພຽງແຕ່ເພີ່ມແທັກ H1 ໄປທາງເທີງຂອງຫນ້າເວັບ, ທ່ານບໍ່ຈໍາເປັນຕ້ອງກັບໄປຫນ້າອື່ນໆເພື່ອຊອກຫາຊື່ແບບຫຼືລະດັບທີ່ທ່ານໃຊ້ເພື່ອກໍານົດຫຼັກ ຫົວຂໍ້ແລະຫົວຍ່ອຍ.
ພວກເຂົາສະຫນອງບົດບາດຫນ້າທີ່ເຂັ້ມແຂງ
ຂໍ້ກໍານົດເຮັດໃຫ້ຂໍ້ຄວາມງ່າຍຕໍ່ທີ່ຈະອ່ານ. ນັ້ນແມ່ນເຫດຜົນທີ່ໂຮງຮຽນຫຼາຍທີ່ສຸດຂອງສະຫະລັດໄດ້ສອນນັກຮຽນໃຫ້ຂຽນລາຍລະອຽດກ່ອນທີ່ພວກເຂົາຂຽນເອກະສານ. ໃນເວລາທີ່ທ່ານນໍາໃຊ້ຫົວຂໍ້ຫົວຂໍ້ໃນຮູບແບບແຜນ, ຂໍ້ຄວາມຂອງທ່ານມີໂຄງສ້າງທີ່ຊັດເຈນທີ່ຈະປາກົດຂຶ້ນຢ່າງໄວວາ. ນອກຈາກນັ້ນ, ມີເຄື່ອງມືທີ່ສາມາດທົບທວນບົດຮ່າງຫນ້າເພື່ອສະຫນອງຂໍ້ສະຫຼຸບ, ແລະເຫຼົ່ານີ້ແມ່ນອີງໃສ່ຫົວຂໍ້ຫົວຂໍ້ສໍາລັບໂຄງສ້າງໂຄງຮ່າງ.
ຫນ້າຂອງທ່ານຈະເຮັດໃຫ້ຄວາມຮູ້ສຶກເຖິງແມ່ນວ່າມີຄໍເຕົ້າໄຂ່ທີ່ຖືກປິດ
ບໍ່ແມ່ນທຸກຄົນສາມາດເບິ່ງຫລືໃຊ້ຮູບແບບ (ແລະນີ້ແມ່ນກັບຄືນໄປຫາ # 1 - ເຄື່ອງຈັກຊອກຫາເບິ່ງເນື້ອຫາ (ຂໍ້ຄວາມ) ຂອງຫນ້າຂອງທ່ານ, ບໍ່ແມ່ນແຜ່ນສະໄຕ). ຖ້າທ່ານໃຊ້ຊື່ຫົວຂໍ້, ທ່ານກໍາລັງເຮັດໃຫ້ຫນ້າເວັບສາມາດເຂົ້າເຖິງໄດ້ຫລາຍຂຶ້ນເນື່ອງຈາກວ່າຫົວຂໍ້ສະແດງຂໍ້ມູນທີ່ແທັບ DIV ຈະບໍ່ໄດ້.
ມັນເປັນປະໂຫຍດສໍາລັບຜູ້ອ່ານຫນ້າຈໍແລະເຂົ້າເຖິງເວັບໄຊທ໌
ການນໍາໃຊ້ຢ່າງຖືກຕ້ອງຂອງຫົວຂໍ້ສ້າງໂຄງສ້າງຢ່າງມີເຫດຜົນກັບເອກະສານ. ນີ້ແມ່ນສິ່ງທີ່ຜູ້ອ່ານຫນ້າຈໍຈະໃຊ້ເພື່ອ "ອ່ານ" ເວັບໄຊທ໌ກັບຜູ້ໃຊ້ທີ່ມີຄວາມບົກຜ່ອງດ້ານຕາເບິ່ງ, ເຮັດໃຫ້ເວັບໄຊທ໌ຂອງທ່ານສາມາດເຂົ້າເຖິງຄົນພິການໄດ້.
ແບບຂໍ້ຄວາມແລະຕົວອັກສອນຂອງຫົວຂໍ້ຂອງທ່ານ
ວິທີທີ່ງ່າຍທີ່ສຸດທີ່ຈະຍ້າຍອອກໄປຈາກບັນຫາ "ຂະຫນາດໃຫຍ່, ກ້າຫານແລະຫນ້າຢ້ານ" ຂອງແທໍກຫົວຂໍ້ຄືການຂຽນຂໍ້ຄວາມທີ່ທ່ານຕ້ອງການເບິ່ງ. ໃນຄວາມເປັນຈິງ, ໃນເວລາທີ່ຂ້າພະເຈົ້າເຮັດວຽກຢູ່ໃນເວັບໄຊທ໌ໃຫມ່, ຂ້າພະເຈົ້າປົກກະຕິຂຽນຫຍໍ້ຫນ້າ h1, h2 ແລະ h3 ທໍາອິດ. ຂ້າພະເຈົ້າປົກກະຕິແລ້ວຕິດກັບຄອບຄົວພຽງແຕ່ຕົວອັກສອນແລະຂະຫນາດ / ນ້ໍາຫນັກ. ຕົວຢ່າງ, ນີ້ອາດຈະເປັນເອກະສານແບບເບື້ອງຕົ້ນສໍາລັບເວັບໄຊທ໌ໃຫມ່ (ເຫຼົ່ານີ້ແມ່ນພຽງແຕ່ບາງຮູບແບບຕົວຢ່າງທີ່ສາມາດນໍາໃຊ້ໄດ້):
ຮ່າງກາຍ, html {ຂອບ: 0; padding: 0 } p {font: 1em Arial, Geneva, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif } h2 {font: bold 15em "Times New Roman", Times, serif } h3 {font: bold 12em Arial, Geneva, Helvetica, sans-serif }ທ່ານສາມາດດັດແປງໂປແກມຂອງຫົວຂໍ້ຂອງທ່ານຫຼືປ່ຽນແບບອັກສອນຫຼືແມ້ແຕ່ ສີຂໍ້ຄວາມ . ທັງຫມົດເຫຼົ່ານີ້ຈະເຮັດໃຫ້ຫົວຂໍ້ "ugly" ຂອງທ່ານເປັນບາງສິ່ງບາງຢ່າງທີ່ມີຊີວິດຊີວາແລະມີຄວາມສອດຄ່ອງກັບການອອກແບບຂອງທ່ານ.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif margin: 0 padding: 0 ສີ: # e7ce00; }ຂອບເຂດສາມາດແຕ່ງຫນ້າຂໍ້ມູນຂ່າວສານ
ຂອບແມ່ນວິທີທີ່ດີທີ່ຈະປັບປຸງຂ່າວສານຂອງທ່ານ. ແລະຂອບເຂດແມ່ນງ່າຍທີ່ຈະເພີ່ມ. ແຕ່ຢ່າລືມທີ່ຈະທົດລອງກັບຊາຍແດນ - ທ່ານບໍ່ຈໍາເປັນຕ້ອງມີຂອບຊາຍແດນຂອງຫົວຂໍ້ຂອງທ່ານ. ແລະທ່ານສາມາດນໍາໃຊ້ຫຼາຍກ່ວາຂອບເຂດຫນ້າເບື່ອທົ່ງພຽງ.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif margin: 0 padding: 0 ສີ: # e7ce00; border-top: solid # e7ce00 medium ຂອບດ້ານລຸ່ມ: dotted # e7ce00 thin; width: 600px }ຂ້າພະເຈົ້າໄດ້ເພີ່ມຊາຍແດນເທິງແລະລຸ່ມໃສ່ຫົວຂໍ້ຕົວຢ່າງຂອງຂ້າພະເຈົ້າເພື່ອແນະນໍາບາງຮູບແບບທີ່ຫນ້າສົນໃຈ. ທ່ານສາມາດເພີ່ມຊາຍແດນໃນວິທີໃດກໍ່ຕາມທີ່ທ່ານຕ້ອງການເພື່ອໃຫ້ບັນລຸແບບການອອກແບບທີ່ທ່ານຕ້ອງການ.
ເພີ່ມຮູບພາບພື້ນຫລັງຂອງຫົວຂໍ້ຂອງທ່ານສໍາລັບ Pizazz ຫຼາຍ
ສະຖານທີ່ເວັບໄຊຕ໌ຈໍານວນຫຼາຍມີສ່ວນ header ຢູ່ປາຍສຸດຂອງຫນ້າທີ່ປະກອບມີຫົວຂໍ້ - ໂດຍປົກກະຕິຊື່ຂອງເວັບໄຊທ໌ແລະຮູບພາບ. ຜູ້ອອກແບບສ່ວນຫຼາຍຄິດວ່ານີ້ເປັນສອງສ່ວນທີ່ແຕກຕ່າງກັນ, ແຕ່ທ່ານບໍ່ຈໍາເປັນຕ້ອງເຮັດ. ຖ້າຫາກວ່າຮູບພາບແມ່ນມີພຽງແຕ່ເພື່ອ decorate ຫົວຂໍ້, ຫຼັງຈາກນັ້ນ, ເປັນຫຍັງຈຶ່ງບໍ່ເພີ່ມມັນກັບຄໍເຕົ້າໄຂ່ທີ່ຫົວຂໍ້?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif background: #fff url ("fancyheadline.jpg") repeat-x bottom; padding: 0,5em 0 90px 0 text-align: center margin: 0 ດ້ານລຸ່ມ: ແຂງ # e7ce00 0.25em; ສີ: # e7ce00; }trick ທີ່ຫົວຂໍ້ນີ້ແມ່ນວ່າຂ້ອຍຮູ້ວ່າຮູບພາບຂອງຂ້າພະເຈົ້າແມ່ນສູງ 90 pixels. ດັ່ງນັ້ນ, ຂ້າພະເຈົ້າໄດ້ເພີ່ມ padding ກັບລຸ່ມຂອງຫົວຂໍ້ຂອງ 90px (padding: 0.5 0 90px 0p;). ທ່ານສາມາດຫຼິ້ນກັບຮາບລ່ຽມ, ເສັ້ນ, ຄວາມສູງ, ແລະ padding ເພື່ອໃຫ້ຂໍ້ຄວາມຂອງຫົວຂໍ້ເພື່ອສະແດງໃຫ້ເຫັນບ່ອນທີ່ທ່ານຕ້ອງການ.
ສິ່ງຫນຶ່ງທີ່ຕ້ອງຈົດຈໍາເມື່ອນໍາໃຊ້ຮູບພາບແມ່ນວ່າຖ້າທ່ານມີ ເວັບໄຊທ໌ຕອບສະຫນອງ (ທີ່ທ່ານຄວນ) ກັບຮູບແບບທີ່ປ່ຽນແປງໂດຍອີງໃສ່ຂະຫນາດຫນ້າຈໍແລະອຸປະກອນ, ຫົວຂໍ້ຂອງທ່ານຈະບໍ່ມີຂະຫນາດດຽວກັນ. ຖ້າທ່ານຕ້ອງການຫົວຂໍ້ຂອງທ່ານເປັນຂະຫນາດທີ່ແນ່ນອນ, ນີ້ອາດຈະເຮັດໃຫ້ບັນຫາ. ມັນແມ່ນຫນຶ່ງໃນເຫດຜົນທີ່ວ່າຂ້ອຍມັກຈະຫຼີກເວັ້ນພາບພື້ນຫລັງໃນຫົວຂໍ້ທີ່ຫນ້າສົນໃຈ, ຍ້ອນວ່າມັນບາງຄັ້ງກໍ່ສາມາດເບິ່ງໄດ້.
ການປ່ຽນຮູບພາບໃນຫົວຂໍ້ຂ່າວ
ນີ້ແມ່ນເຕັກນິກທີ່ມີປະໂຫຍດສໍາລັບນັກອອກແບບເວັບເພາະວ່າມັນອະນຸຍາດໃຫ້ທ່ານສ້າງຫົວຂໍ້ຮູບພາບແລະແທນທີ່ຂໍ້ຄວາມຂອງຫົວຂໍ້ທີ່ມີຮູບພາບນັ້ນ. ນີ້ແມ່ນຄວາມຈິງທີ່ເປັນການປະຕິບັດທີ່ເກົ່າແກ່ຈາກນັກອອກແບບເວັບໄຊທ໌ໄດ້ຮັບການເຂົ້າເຖິງໂປແກຣມນ້ອຍແລະຕ້ອງການໃຊ້ແບບອັກສອນທີ່ແປກປະຫລາດຫຼາຍໃນວຽກງານຂອງພວກເຂົາ. ການເພີ່ມຂຶ້ນຂອງ ຕົວອັກສອນເວັບ ໄດ້ປ່ຽນແປງຢ່າງແທ້ຈິງວິທີການອອກແບບສະຖານທີ່. ຂໍ້ມູນຂ່າວສານສາມາດຕັ້ງຢູ່ໃນຮູບແບບຕ່າງໆແລະຮູບພາບຕ່າງໆທີ່ມີຕົວອັກສອນທີ່ຖືກຝັງບໍ່ຈໍາເປັນ. ດັ່ງນັ້ນ, ທ່ານພຽງແຕ່ຈະຊອກຫາການປ່ຽນຮູບພາບ CSS ສໍາລັບຫົວຂໍ້ຕ່າງໆໃນເວັບໄຊທ໌ເກົ່າທີ່ຍັງບໍ່ທັນໄດ້ຮັບການປັບປຸງໃຫ້ທັນສະໄຫມຫຼາຍຂຶ້ນ.
ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard ເມື່ອວັນທີ 9/6/17