ເວັບໄຊຮັງ: ວິທີການເພື່ອເຮັດໃຫ້ຮູບພາບຄວາມເປັນມາຂອງ html

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

tags HTML ພື້ນຖານໃນການສ້າງພື້ນຖານ

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

1. ຂຽນເຫດຜົນໂຄດຄໍາສັ່ງ.
2. ໂດຍຜ່ານແບບ CSS ໃນລະຫັດ HTML ໄດ້.
3. ຂຽນຄໍເຕົ້າໄຂ່ທີ່ CSS ໃນເອກະສານແຍກຕ່າງຫາກ.

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

1. ວິທີການບັນທຶກຄັ້ງທໍາອິດໂດຍຜ່ານການໂຄດຄໍາສັ່ງໃຫ້ເຫດຜົນ (ຮ່າງກາຍ) ໃນໄຟ indexhtm. ມັນແມ່ນເກັບຮັກສາໄວ້ໃນຮູບແບບນີ້: (body background = "folder_name / Nazvanie_kartinki.rasshirenie") (/ body). ຫມາຍຄວາມວ່າ, ຖ້າຫາກວ່າພວກເຮົາມີຮູບພາບທີ່ມີຫົວຂໍ້«ຮູບພາບ»ແລະຂະຫຍາຍ JPG, ແລະໂຟນເດີພວກເຮົາຊື່ວ່າ«ຮູບພາບ», ຫຼັງຈາກນັ້ນເຂົ້າ HTML, ລະຫັດຈະເບິ່ງຄືແນວນີ້ເປັນ: (body background = "ຮູບພາບ / Picture.jpg") ... (/ body) .
2. ວິທີທີສອງກ່ຽວຂ້ອງກັບການບັນທຶກແບບ CSS ໄດ້, ແຕ່ວ່າມັນແມ່ນລາຍລັກອັກສອນໃນໄຟລ໌ດຽວກັນທີ່ມີຊື່ index.htm ໄດ້. (Body style = "background: url ( 'ຮູບພາບ ../ / Picture.jpg')").
3. ວິທີທີ່ສາມຂອງການບັນທຶກແມ່ນຢູ່ໃນສອງໄຟລ໌. ເອກະສານທີ່ມີໂຄດຄໍາສັ່ງຊື່ index.htm (ຫົວ) ແມ່ນລາຍລັກອັກສອນດັ່ງກ່າວບັນທັດ: (ຫົວ) (ເຫນີການເຊື່ອມຕໍ່ rel = "stylesheet" type = "text / javascript" href = "http: // D0 ເວັບໄຊ / article / 193110 /%% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ ຫົວ). A ໄຟລ໌ເອີ້ນວ່າແບບ style.css ແລ້ວຂຽນ: body {background: url (Images / Picture.jpg ')}.

ໃນ HTML ເພື່ອເຮັດໃຫ້ຮູບພາບພື້ນຖານ, ພວກເຮົາເຂົ້າໃຈ. ໃນປັດຈຸບັນທີ່ທ່ານຕ້ອງການທີ່ຈະຄິດອອກວິທີທີ່ຈະ stretch ຮູບພາບໃນທົ່ວ width ຂອງຫນ້າຈໍທັງຫມົດ.

ວິທີທີ່ຈະ stretch ຮູບພາບຄວາມເປັນມາໃນການ width ຂອງປ່ອງຢ້ຽມດັ່ງກ່າວ

ພວກເຮົາເປັນຕົວແທນຂອງຫນ້າຈໍຂອງພວກເຮົາໃນຮູບແບບຂອງເປີເຊັນໄດ້. ມັນ turns ໃຫ້ເຫັນວ່າຄວາມກວ້າງທັງຫມົດແລະຄວາມຍາວຂອງຫນ້າຈໍຈະເປັນ 100% 100%. ພວກເຮົາຕ້ອງການທີ່ຈະ stretch ຮູບພາບທີ່ຈະ width ນີ້. ຕື່ມການກັບໄຟລ໌ຮູບພາບເສັ້ນບັນທຶກ style.css ທີ່ຈະ stretch ຮູບພາບໃນໄລຍະຄວາມກວ້າງທັງຫມົດແລະຄວາມຍາວຂອງຈໍສະແດງຜົນ. ໃນຖານະເປັນມັນແມ່ນລາຍລັກອັກສອນໃນແບບ CSS? ມັນເປັນງ່າຍດາຍ!

ຮ່າງກາຍ

{

background: url (Images / Picture.jpg ')

ຄວາມເປັນມາຂະຫນາດ: 100%; / * ໂພດນີ້ແມ່ນເຫມາະສົມສໍາລັບຕົວທ່ອງເວັບທີ່ທັນສະໄຫມທີ່ສຸດ * /

}

ດັ່ງນັ້ນພວກເຮົາຄິດອອກວິທີການເຮັດໃຫ້ເປັນພື້ນຖານຮູບພາບໃນ html ໃນຫນ້າຈໍໄດ້. ນອກນັ້ນຍັງມີວິທີການຂອງການບັນທຶກໃນໄຟ indexhtm ໄດ້. ເຖິງແມ່ນວ່າວິທີການນີ້ແລະລ້າສະໄຫມ, ແຕ່ວ່າສໍາລັບຜູ້ເລີ່ມເປັນທີ່ມີຄວາມຈໍາເປັນທີ່ຈະຮູ້ແລະເຂົ້າໃຈ. ໂຄດຄໍາສັ່ງ (ຫົວ) (ແບບ) div {background-size: ການປົກຫຸ້ມຂອງ; } (/ Style) (/ ຫົວ), ການບັນທຶກນີ້ຫມາຍຄວາມວ່າພວກເຮົາຈັດສັນຫນ່ວຍງານພິເສດສໍາລັບຄວາມເປັນມາຂອງ, ເຊິ່ງຈະໄດ້ຮັບການ positioned ໃນໄລຍະຄວາມກວ້າງທັງຫມົດຂອງປ່ອງຢ້ຽມ. ພວກເຮົາໄດ້ພິຈາລະນາທັງສອງວິທີການ, ວິທີການເພື່ອເຮັດໃຫ້ເວັບໄຊ html ຮູບພື້ນຖານ, ດັ່ງນັ້ນຮູບພາບແມ່ນຂ້ອນຂ້າງຍາວກັບ width ທັງຫມົດຂອງຫນ້າຈໍມາຈາກບັນດາຕົວທ່ອງເວັບທີ່ທັນສະໄຫມ.

ວິທີການເຮັດໃຫ້ເປັນພື້ນຖານຄົງທີ່

ຖ້າຫາກວ່າທ່ານຕັດສິນໃຈທີ່ຈະນໍາໃຊ້ຮູບພາບເປັນພື້ນຖານຂອງຊັບພະຍາກອນເວັບໄຊຕ໌ໃນອະນາຄົດໄດ້, ຫຼັງຈາກນັ້ນທ່ານພຽງແຕ່ຕ້ອງການທີ່ຈະຮູ້ຈັກວິທີເພື່ອເຮັດໃຫ້ມັນຄົງທີ່, ດັ່ງນັ້ນມັນບໍ່ໄດ້ຖືກຂ້ອນຂ້າງຍາວໃນຄວາມຍາວແລະບໍ່ໄດ້ຝັງດິນໃນຮູບລັກສະນະກ່ຽວກັບຄວາມງາມ. ພຽງແຕ່ໂດຍການນໍາໃຊ້ລະຫັດ HTML ການລົງທະບຽນນອກຈາກນັ້ນຂະຫນາດນ້ອຍ. ທ່ານຈໍາເປັນຕ້ອງຍື່ນຄໍາ style.css ຈະເພີ່ມປະໂຫຍກຫຼັງຈາກ background: url (Images / Picture.jpg ') ການແກ້ໄຂ; ຫລືເພີ່ມແທນທີ່ຈະເປັນຫຼັງຈາກຈ້ໍາຈຸດເສັ້ນແຍກຕ່າງຫາກໄດ້ - ຕໍາແຫນ່ງ: ມີການສ້ອມແຊມ. ດັ່ງນັ້ນ, ຮູບຂອງທ່ານຈະໄດ້ຮັບການແກ້ໄຂແລ້ວ. ໃນລະຫວ່າງການເລື່ອນເນື້ອຫາຈາກເວັບໄຊດັ່ງກ່າວ, ທ່ານຈະເຫັນຂໍ້ຄວາມທີ່ສາຍການເຄື່ອນຍ້າຍ, ແຕ່ຄວາມເປັນມາຍັງຢູ່ໃນສະຖານທີ່. ດັ່ງນັ້ນທ່ານໄດ້ຮຽນຮູ້ວິທີການເຮັດແນວໃດຮູບພາບຄວາມເປັນມາ html, ໃນຫຼາຍວິທີ.

ການເຮັດວຽກກັບຕາຕະລາງໃນ HTML

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

ຕາຕະລາງທີ່ມີຮູບແທນທີ່ຈະເປັນພື້ນຖານການ: ຕົວຢ່າງ HTML

ແຕ້ມຕາຕະລາງ 2x3 ແລະເຮັດໃຫ້ມັນຮູບພາບພື້ນຖານເກັບຮັກສາໄວ້ຢູ່ໃນໂຟນເດີ "ຮູບພາບ": (ຄວາມເປັນມາຕາຕະລາງ = "ຮູບພາບ / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ ຕາຕະລາງ). ດັ່ງນັ້ນຕາຕະລາງຂອງພວກເຮົາຈະໄດ້ຮັບການກັນໃນຄວາມເປັນມາຂອງຮູບໄດ້.

ໃນປັດຈຸບັນແຕ້ມໄດ້ຂະຫນາດແຜ່ນດຽວກັນຂອງ 2x3, ແຕ່ສະແດງກິ່ງງ່າຮູບພາບໃນຄໍລໍາເລກ 1, 4, 5 ແລະ 6 (ຕາຕະລາງ) (tr) (ຄວາມເປັນມາ td = "ຮູບພາບ / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (ຄວາມເປັນມາ td = "ຮູບພາບ / Picture.jpg") 4 (/ td) (ຄວາມເປັນມາ td = "ຮູບພາບ / Picture.jpg") 5 ( / td) (ຄວາມເປັນມາ td = "ຮູບພາບ / Picture.jpg") 6 (/ td) (/ tr) (/ ຕາຕະລາງ). ຫຼັງຈາກທີ່ສັງເກດເບິ່ງພວກເຮົາສາມາດເຫັນວ່າຄວາມເປັນມາຂອງປະກົດພຽງແຕ່ໃນຈຸລັງເຫຼົ່ານັ້ນທີ່ພວກເຮົາໄດ້ລົງທະບຽນແລະບໍ່ຕາຕະລາງທັງຫມົດ.

ເວັບໄຊທີ່ເຫມາະສົມລະຫວ່າງຕົວທ່ອງເວັບ

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