ຮູບລັກກາຂອງຕົວທ່ອງເວັບ, "ດຶງດູດ" ໃນເຄື່ອງຈັກຊອກຫາ

ໃນເວລາທີ່ເວັບໄຊສ້າງເປັນສິ່ງສໍາຄັນໃນການປະສິດທິພາບຂອງຕົນເປັນຮູບແບບລະຫວ່າງຕົວທ່ອງເວັບ. ມັນແມ່ນຫຍັງ? ເຮັດແນວໃດມັນສາມາດເຮັດໄດ້? pitfalls ສິ່ງທີ່ມີ?

ຮູບລັກລະຫວ່າງຕົວທ່ອງເວັບແມ່ນຫຍັງ?

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

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

Walkthrough ໂດຍທົ່ວໄປ

ດັ່ງນັ້ນ, ໃຫ້ຂອງເບິ່ງວິທີການເພື່ອເຮັດໃຫ້ຮູບລັກລະຫວ່າງຕົວທ່ອງເວັບ. ໃນເບື້ອງຕົ້ນຄວນກໍານົດບັນດາໂຄງການຈະເຮັດວຽກເວັບໄຊ. ກະລຸນາສັງເກດວ່າຈໍານວນຂອງເວັບໄຊຕ໌ຕົວທ່ອງເວັບໃກ້ກັບສອງຮ້ອຍໄດ້, ສະນັ້ນພະຍາຍາມທີ່ຈະກະລຸນາທຸກຄົນ - ມັນເປັນຄວາມສັບສົນທີ່ສຸດ. ເພາະສະນັ້ນ, ເລືອກທີ່ຈະເປັນຈໍານວນຈາກ 3 ກັບ 8 ເພື່ອຕັດສິນໃຈວ່າສິ່ງທີ່ຈະສຸມໃສ່ການ, ທ່ານສາມາດນໍາໃຊ້ແລະການບໍລິການສະຫນັບສະຫນູນເຊັ່ນ: Yandex Metrika ແລະ ກູໂກວິເຄາະ. ຫຼັງຈາກນັ້ນທ່ານຄວນຈະຊອກຫາວິທີບັນຫາທີ່ຈະໄດ້ຮັບການແກ້ໄຂເພື່ອໃຫ້ບັນລຸລະຫວ່າງຕົວທ່ອງເວັບ.

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

ການອອກແບບຕອບສະຫນອງ

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

ມີຕົວທ່ອງເວັບຂອງບາງຢ່າງເຊັ່ນ: Opera ແລະ Opera Mini ແມ່ນ. на мобильных телефонах. ນໍາໃຊ້ຄັ້ງທໍາອິດໃນຄອມພິວເຕີ desktop, ແລະຄັ້ງທີສອງ - ໃນໂທລະສັບມືຖື. ໂດຍທົ່ວໄປພວກເຂົາເຈົ້າມີຄວາມຄ້າຍຄືກັນ, ແຕ່ມີຈໍານວນຄຸນນະສົມບັດ. ໃນກໍລະນີດັ່ງກ່າວ, ມັນເປັນສິ່ງສໍາຄັນໃນການເຊື່ອມຕໍ່ໄຟລ໌ບຸກຄົນແລະ / ຫຼືການນໍາໃຊ້ຂອງການສອບຖາມສື່ມວນຊົນ. ມັນແມ່ນຫຍັງ? ໃນກໍລະນີທໍາອິດ, ເຊິ່ງເປັນການສ້າງເປັນເອກະສານແຍກຕ່າງຫາກ, ຊຶ່ງຈຸດປະສົງເພື່ອເຮັດວຽກຂອງຕົວທ່ອງເວັບສະເພາະໃດຫນຶ່ງ, ແລະລົງທະບຽນສິ່ງທີ່ທ້າທາຍຂອງເຂົາເຈົ້າ. ໃນກໍລະນີທີສອງ, ທ່ານຕ້ອງຍື່ນກັບການສອບຖາມສື່ມວນຊົນ. ຖ້າຫາກວ່າໂຄງການຂອງທ່ານພົບຄວາມຕ້ອງການສະເພາະໃດຫນຶ່ງຂອງເອກະສານ loaded ໃນການຕັ້ງຄ່າທີ່ຕ້ອງການ.

ຈະເປັນແນວໃດຂ້າພະເຈົ້າຄວນເຮັດແນວໃດ?

ໃນເບື້ອງຕົ້ນ, ພວກເຮົາຄວນຈະຈື່ວ່າໃນເວລາທີ່ເຮັດວຽກຮ່ວມກັບ HTML, ຮູບແບບລະຫວ່າງຕົວທ່ອງເວັບຂອງຮຽກຮ້ອງໃຫ້ມີຄວາມສົນໃຈເປັນພິເສດ. ດັ່ງນັ້ນ, ທ່ານຄວນຈະນໍາໃຊ້ຄວາມເປັນໄປໄດ້ສູງສຸດຂອງແຜ່ນແບບ cascading ສໍາລັບປະສິດທິພາບຫຼາຍກວ່າເກົ່າ. ໃນເວລາດຽວກັນຍັງຕ້ອງການທີ່ຈະມີການປ່ຽນແປງວິທີການຂອງການເຮັດວຽກຈໍານວນຫນຶ່ງ. ດັ່ງນັ້ນປະຊາຊົນທີ່ມີປະສົບຫຼາຍໃນເວລາທີ່ພວກເຂົາເຈົ້າຊີ້ອອກຂະຫນາດຂອງບາງສິ່ງບາງຢ່າງ, ການນໍາໃຊ້ pixels ໄດ້ - px. ພິຈາລະນາຕົວຢ່າງຂອງການ header inscription ຂະຫນາດໃຫຍ່, ທີ່ປະດັບປະດາເທິງຂອງເວັບໄຊດັ່ງກ່າວໄດ້.

ນາງກວ້າງໄດ້ກໍານົດໄວ້ໃນອັດຕາ 800rh ໄດ້. ໃນຫນ້າຈໍໃນ 1600rh ໄດ້ມັນຈະເປັນທີ່ຫນ້າສົນໃຈທີ່ຂ້ອນຂ້າງ. ແຕ່ໃນ 700rh ມັນຈະເບິ່ງ ridiculous. ສິ່ງທີ່ຕ້ອງເຮັດໃນກໍລະນີນີ້? ທ່ານບໍ່ສາມາດກໍານົດຂະຫນາດໃນ pixels, ແລະອັດຕາສ່ວນການ! ແລະຖື inscription ໄດ້ຈະບໍ່ເປັນຄວາມຍາວຄົງທີ່, ແລະອີກເຄິ່ງຫນຶ່ງ width ຂອງຫນ້າຈໍໄດ້. ອັດຕາສ່ວນສາມາດກໍານົດແລະໄລຍະທາງທີ່ເປັນອົງປະກອບສະເພາະໃດຫນຶ່ງຈະຖືກເກັບໄວ້ໃນຮູບແບບເຕັມຈໍໄດ້. ແຕ່ໃນທີ່ນີ້ແມ່ນສິ່ງທີ່ຈະເຮັດແນວໃດຖ້າຫາກວ່າຫນ້າຈໍມີຂະຫນາດນ້ອຍເກີນໄປ?

ສົມມຸດວ່າມັນແມ່ນ 300 pixels? ໃນກໍລະນີດັ່ງກ່າວນີ້, ພວກເຮົາຈະຊ່ວຍໃຫ້ການສອບຖາມສື່ມວນຊົນວ່າຕ້ອງແກ້ໄຂ width ລົງທະບຽນ. ແລະຖ້າຫາກວ່າມັນແມ່ນເທົ່າທຽມກັນກັບ 700rh ແລະນ້ອຍ, ມັນເປັນໄປໄດ້ທີ່ຈະສ້າງຕັ້ງວ່າອາການຈະໄວກວ່າ 75% ຂອງອີກດ້ວຍ. ແລະຖ້າຫາກວ່າ width ແມ່ນເທົ່າທຽມກັນກັບ 300 pixels ຫຼືຫນ້ອຍ, ມັນເປັນໄປໄດ້ທີ່ຈະເປີດເຜີຍແລະ 100%. ກະທູ້ທັງຫມົດແມ່ນຫນ້າສົນໃຈຫຼາຍແລະເປັນປະໂຫຍດ, ດັ່ງນັ້ນມັນກໍສາມາດໄດ້ຮັບການສຶກສາລະອຽດທີ່ຍິ່ງໃຫຍ່. ແຕ່ອະນິຈາ, ບໍ່ມີຂໍ້ມູນກ່ຽວກັບປຶ້ມ, ແລະເຮັດໃຫ້ທຸກສິ່ງທຸກຢ່າງໃນບົດຄວາມຈະບໍ່ເຮັດວຽກ.

ເປັນຫຍັງຮູບລັກລະຫວ່າງຕົວທ່ອງເວັບຂອງການປັບດຶງດູດເຄື່ອງມືຄົ້ນຫາ?

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

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

ສະຫຼຸບ

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