ວິທີການຫໍ່ຂໍ້ຄວາມອ້ອມພາບ

ເບິ່ງຫນ້າເວັບໃດແລະທ່ານຈະເຫັນການປະສົມປະສານຂອງເນື້ອຫາແລະຮູບພາບຕ່າງໆ. ທັງສອງອົງປະກອບເຫຼົ່ານີ້ແມ່ນສ່ວນປະກອບສໍາຄັນໃນຄວາມສໍາເລັດຂອງເວັບໄຊທ໌. ເນື້ອຫາຂໍ້ຄວາມແມ່ນສິ່ງທີ່ຜູ້ມາຢ້ຽມຢາມເວັບໄຊທ໌ຈະອ່ານແລະສິ່ງທີ່ ເຄື່ອງຈັກຊອກຫາຈະໃຊ້ ເປັນສ່ວນຫນຶ່ງຂອງວິທີການຈັດອັນດັບຂອງພວກເຂົາ. ຮູບພາບຕ່າງໆຈະເພີ່ມຄວາມສົນໃຈທາງດ້ານຕາກັບເວັບໄຊແລະຊ່ວຍເນັ້ນເນື້ອຫາຂໍ້ຄວາມ.

ການເພີ່ມຂໍ້ຄວາມແລະຮູບພາບຕ່າງໆໃນເວັບໄຊທ໌ແມ່ນງ່າຍດາຍ. ຂໍ້ຄວາມຖືກເພີ່ມດ້ວຍແທັບ HTML ມາດຕະຖານເຊັ່ນວັກ, ຫົວຂໍ້ແລະລາຍການ, ໃນຂະນະທີ່ຮູບພາບຖືກຈັດໃສ່ໃນຫນ້າທີ່ມີອົງປະກອບ . ເມື່ອທ່ານໄດ້ເພີ່ມຮູບພາບໄປຍັງຫນ້າເວັບຂອງທ່ານ, ທ່ານອາດຈະຕ້ອງການໃຫ້ມີຂໍ້ຄວາມທີ່ຢູ່ໃກ້ກັບຮູບພາບ, ແທນທີ່ຈະສອດຄ່ອງກັບມັນ (ຊຶ່ງເປັນວິທີການແບບທໍາມະດາຮູບພາບທີ່ເພີ່ມໃນ HTML ຈະສະແດງໃນຕົວທ່ອງເວັບ). ໂດຍວິທີທາງເທກນິກມີສອງວິທີທີ່ທ່ານສາມາດບັນລຸລັກສະນະນີ້ໂດຍໃຊ້ CSS (ແນະນໍາ) ຫຼືໂດຍການເພີ່ມຄໍາແນະນໍາທີ່ເບິ່ງເຫັນໂດຍກົງໃນ HTML (ບໍ່ແນະນໍາ, ເພາະວ່າທ່ານຕ້ອງການຮັກສາການແຍກຮູບແບບແລະໂຄງສ້າງສໍາລັບເວັບໄຊທ໌ຂອງທ່ານ).

ໃຊ້ CSS

ວິທີທີ່ຖືກຕ້ອງເພື່ອປ່ຽນວິທີການຮູບແບບແລະຮູບພາບຂອງຫນ້າເວັບແລະວິທີການຮູບລັກສະນະຮູບພາບຂອງພວກມັນປາກົດຢູ່ໃນຕົວທ່ອງເວັບແມ່ນມີ CSS . ພຽງແຕ່ຈື່ໄວ້, ເນື່ອງຈາກວ່າພວກເຮົາກໍາລັງເວົ້າກ່ຽວກັບການປ່ຽນແປງທີ່ມີຮູບພາບຢູ່ໃນຫນ້າ (ເຮັດໃຫ້ການໄຫຼຂໍ້ຄວາມປະມານຮູບພາບ), ນີ້ຫມາຍຄວາມວ່າມັນເປັນຊື່ໂດເມນຂອງ Cascading Style Sheets.

1. ຫນ້າທໍາອິດ, ເພີ່ມຮູບພາບຂອງທ່ານໃສ່ຫນ້າເວັບຂອງທ່ານ. ຈືຂໍ້ມູນການຍົກເວັ້ນລັກສະນະຂອງສາຍຕາ (ເຊັ່ນ: width ແລະ height height) ຈາກ HTML ນັ້ນ. ນີ້ແມ່ນສິ່ງສໍາຄັນ, ໂດຍສະເພາະແມ່ນສໍາລັບ ເວັບໄຊທ໌ຕອບສະຫນອງ ທີ່ຂະຫນາດພາບຈະແຕກຕ່າງກັນໄປຕາມຕົວທ່ອງເວັບ. ຊອບແວບາງຢ່າງ, ເຊັ່ນ Adobe Dreamweaver, ຈະເພີ່ມຄວາມກວ້າງແລະຄວາມສູງຂໍ້ມູນກັບຮູບພາບທີ່ຖືກໃສ່ດ້ວຍເຄື່ອງມືນັ້ນ, ດັ່ງນັ້ນໃຫ້ແນ່ໃຈວ່າເອົາຂໍ້ມູນນີ້ອອກມາຈາກລະຫັດ HTML! ຢ່າງໃດກໍ່ຕາມ, ໃຫ້ແນ່ໃຈວ່າຈະປະກອບມີ ຂໍ້ຄວາມ alt alt ທີ່ເຫມາະສົມ . ນີ້ແມ່ນຕົວຢ່າງຂອງວິທີທີ່ HTML code ຂອງທ່ານອາດຈະເບິ່ງ:
2. ສໍາລັບຈຸດປະສົງ styling, ທ່ານຍັງສາມາດເພີ່ມຫ້ອງຮຽນໃຫ້ກັບຮູບພາບໄດ້. ຄ່າຫ້ອງຮຽນນີ້ແມ່ນສິ່ງທີ່ພວກເຮົາຈະນໍາໃຊ້ໃນໄຟລ໌ CSS ຂອງພວກເຮົາ. ໃຫ້ສັງເກດວ່າມູນຄ່າທີ່ພວກເຮົາໃຊ້ຢູ່ນີ້ແມ່ນຄວາມຄິດທີ່ບໍ່ດີ, ເຖິງແມ່ນວ່າ, ສໍາລັບແບບສະເພາະນີ້, ພວກເຮົາມັກຈະນໍາໃຊ້ມູນຄ່າຂອງ "ຊ້າຍ" ຫຼື "ຂວາ", ຂຶ້ນກັບວິທີທີ່ພວກເຮົາຢາກໃຫ້ຮູບພາບຂອງພວກເຮົາສອດຄ່ອງ. ພວກເຮົາພົບວ່າ syntax ງ່າຍໆເຮັດວຽກດີແລະງ່າຍສໍາລັບຄົນອື່ນທີ່ອາດຈະຕ້ອງມີການຈັດການເວັບໄຊທ໌ໃນອະນາຄົດເພື່ອເຂົ້າໃຈ, ແຕ່ວ່າທ່ານສາມາດມອບຄ່ານີ້ທີ່ທ່ານຕ້ອງການ.
   2. ໂດຍຕົວມັນເອງ, ມູນຄ່າຫ້ອງຮຽນນີ້ຈະບໍ່ເຮັດຫຍັງເລີຍ. ຮູບພາບຈະບໍ່ສອດຄ່ອງກັບທາງຊ້າຍຂອງຂໍ້ຄວາມ. ສໍາລັບການນີ້, ພວກເຮົາໃນປັດຈຸບັນຕ້ອງຫັນກັບໄຟລ໌ CSS ຂອງພວກເຮົາ.

1. ໃນຄໍເຕົ້າໄຂ່ທີ່ທ່ານສາມາດເພີ່ມຮູບແບບດັ່ງຕໍ່ໄປນີ້:
   1. loft {
   2. float: left
   3. padding: 0 20px 20px 0
   4. }
   5. ສິ່ງທີ່ທ່ານໄດ້ເຮັດຢູ່ນີ້ແມ່ນໃຊ້ ຄຸນສົມບັດ CSS "float" ເຊິ່ງຈະດຶງພາບຈາກການໄຫລຂອງເອກະສານປົກກະຕິ (ຮູບພາບທີ່ສະແດງໂດຍປົກກະຕິກັບຂໍ້ຄວາມທີ່ສອດຄ່ອງຢູ່ຂ້າງລຸ່ມນີ້) ແລະມັນຈະຈັດໃຫ້ມັນຢູ່ເບື້ອງຊ້າຍຂອງບັນຈຸຂອງມັນ ທີ່ຢູ່ ຂໍ້ຄວາມທີ່ມາພາຍຫຼັງທີ່ມັນຢູ່ໃນ HTML markup ກັບປະຈຸບັນກໍ່ຢູ່ໃກ້ມັນ. ພວກເຮົາຍັງໄດ້ເພີ່ມຄ່າ padding ບາງເພື່ອວ່າຂໍ້ຄວາມນີ້ຈະບໍ່ແມ່ນແຕ່ກົງກັນກັບຮູບພາບ. ແທນທີ່ຈະ, ມັນຈະມີຊ່ອງຫວ່າງງາມບາງຢ່າງທີ່ຫນ້າສົນໃຈໃນການອອກແບບຂອງຫນ້າເວັບ. ໃນ CSS shorthand ສໍາລັບ padding, ພວກເຮົາໄດ້ເພີ່ມມູນຄ່າ 0 ກັບຂ້າງເທິງແລະດ້ານຊ້າຍຂອງຮູບ, ແລະ 20 pixels ຕໍ່ຊ້າຍແລະດ້ານລຸ່ມຂອງມັນ. ຈືຂໍ້ມູນການ, ທ່ານຈໍາເປັນຕ້ອງເພີ່ມບາງ padding ເບື້ອງຂວາຂອງຮູບພາບຊ້າຍ. ຮູບພາບສອດຄ່ອງຂວາ (ເຊິ່ງພວກເຮົາຈະເບິ່ງຢູ່ໃນປັດຈຸບັນ) ຈະມີການນໍາໃຊ້ກັບເບື້ອງຊ້າຍຂອງມັນ.
2. ຖ້າທ່ານເບິ່ງຫນ້າເວັບຂອງທ່ານໃນເບົາເຊີແລ້ວ, ທ່ານຄວນເຫັນວ່າຮູບພາບຂອງທ່ານຖືກຈັດໃສ່ໃນເບື້ອງຊ້າຍຂອງຫນ້າແລະຂໍ້ຄວາມທີ່ຫນ້າສົນໃຈກໍ່ຢູ່ໃກ້ມັນ. ອີກວິທີຫນຶ່ງທີ່ກ່າວວ່ານີ້ແມ່ນຮູບທີ່ "ເລື່ອນໄປທາງຊ້າຍ".

1. ຖ້າທ່ານຕ້ອງການປ່ຽນຮູບພາບນີ້ໃຫ້ສອດຄ່ອງກັບສິດ (ເຊັ່ນໃນຕົວຢ່າງຮູບທີ່ມາພ້ອມກັບບົດຄວາມນີ້), ມັນຈະງ່າຍດາຍ. ຫນ້າທໍາອິດ, ທ່ານຕ້ອງແນ່ໃຈວ່າ, ນອກເຫນືອຈາກແບບທີ່ພວກເຮົາໄດ້ເພີ່ມໃນ CSS ຂອງພວກເຮົາສໍາລັບມູນຄ່າຂອງຫ້ອງຮຽນຂອງ "ຊ້າຍ", ພວກເຮົາຍັງມີຫນຶ່ງສໍາລັບການຈັດຕໍາແຫນ່ງຂວາ. ມັນຈະເບິ່ງຄືວ່ານີ້:
   1. right {
   2. float: right
   3. padding: 0 0 20px 20px
   4. }
   5. ທ່ານສາມາດເບິ່ງວ່ານີ້ເກືອບຄືກັບ CSS ທໍາອິດທີ່ພວກເຮົາຂຽນ. ຄວາມແຕກຕ່າງພຽງແຕ່ແມ່ນມູນຄ່າທີ່ພວກເຮົາໃຊ້ສໍາລັບຊັບສິນ "float" ແລະຄ່າ padding ທີ່ພວກເຮົາໃຊ້ (ເພີ່ມບາງເບື້ອງຊ້າຍຂອງຮູບພາບຂອງພວກເຮົາແທນທີ່ຈະມີສິດ).
2. ສຸດທ້າຍ, ທ່ານຈະປ່ຽນມູນຄ່າຂອງຊັ້ນຂອງຮູບພາບຈາກ "ຊ້າຍ" ໄປ "ຂວາ" ໃນ HTML ຂອງທ່ານ:
3. ເບິ່ງຫນ້າຂອງທ່ານໃນຕົວທ່ອງເວັບໃນປັດຈຸບັນແລະຮູບພາບຂອງທ່ານຄວນສອດຄ່ອງກັບສິດທີ່ມີຂໍ້ຄວາມຫໍ່ຢ່າງຮອບຄອບ. ພວກເຮົາມີແນວໂນ້ມທີ່ຈະເພີ່ມຮູບແບບເຫຼົ່ານີ້, "ຊ້າຍ" ແລະ "ຂວາ" ກັບຄໍເຕົ້າໄຂ່ທີ່ພວກເຮົາທັງຫມົດເພື່ອໃຫ້ພວກເຮົາສາມາດນໍາໃຊ້ຮູບແບບການເບິ່ງເຫັນເຫລົ່ານີ້ຕາມຄວາມຈໍາເປັນທີ່ພວກເຮົາກໍາລັງສ້າງຫນ້າເວັບຕ່າງໆ. ຮູບແບບສອງນີ້ຈະງາມ, ລັກສະນະທີ່ສາມາດນໍາໃຊ້ໄດ້ທີ່ພວກເຮົາສາມາດຫັນໄປຫາທຸກໆຄັ້ງທີ່ພວກເຮົາຈໍາເປັນຕ້ອງມີຮູບແບບທີ່ມີຮູບຫໍ່ໃສ່ພວກມັນ.

ໃຊ້ HTML ແທນ CSS (ແລະເປັນຫຍັງທ່ານບໍ່ຄວນເຮັດເຊັ່ນນີ້)

ເຖິງແມ່ນວ່າມັນເປັນໄປໄດ້ທີ່ຈະເຮັດຂໍ້ຄວາມຫໍ່ໃສ່ຮູບພາບທີ່ມີ HTML, ມາດຕະຖານເວັບກໍານົດວ່າ CSS (ແລະຂັ້ນຕອນທີ່ສະແດງຂ້າງເທິງ) ແມ່ນວິທີທີ່ຈະໄປເພື່ອໃຫ້ພວກເຮົາສາມາດຮັກສາແຍກຕ່າງຫາກຂອງໂຄງສ້າງ (HTML) ແລະແບບ (CSS). ນີ້ແມ່ນສິ່ງສໍາຄັນໂດຍສະເພາະເມື່ອທ່ານພິຈາລະນາວ່າ, ສໍາລັບບາງອຸປະກອນແລະການອອກແບບ, ຂໍ້ຄວາມທີ່ ອາດຈະບໍ່ ຈໍາເປັນຕ້ອງໄຫຼຜ່ານຮູບພາບ. ສໍາລັບຫນ້າຈໍຂະຫນາດນ້ອຍ, ຮູບແບບເວັບໄຊທ໌ທີ່ຕອບສະຫນອງອາດຮຽກຮ້ອງໃຫ້ຂໍ້ຄວາມປະຕິບັດຢູ່ຂ້າງລຸ່ມຮູບພາບແລະຮູບພາບທີ່ກວ້າງຂວາງຂອງຫນ້າຈໍ. ນີ້ແມ່ນເຮັດໄດ້ງ່າຍດ້ວຍການ ສອບຖາມສື່ ຖ້າຮູບແບບຂອງທ່ານແຍກອອກຈາກ HTML ຂອງທ່ານ. ໃນໂລກຂອງອຸປະກອນຫຼາຍມື້ນີ້, ບ່ອນທີ່ຮູບພາບແລະຂໍ້ຄວາມຈະແຕກຕ່າງກັນສໍາລັບນັກທ່ອງທ່ຽວທີ່ແຕກຕ່າງກັນແລະໃນຫນ້າຈໍທີ່ແຕກຕ່າງກັນ, ການແຍກນີ້ແມ່ນສໍາຄັນຕໍ່ຄວາມສໍາເລັດແລະການຄຸ້ມຄອງຫນ້າເວັບ.