ການຈັດວາງຕາຕະລາງເປີດຂອບເຂດການອອກແບບໃຫມ່
ມີ ເຫດຜົນຫຼາຍຢ່າງທີ່ບໍ່ຄວນໃຊ້ຕາຕະລາງສໍາລັບຮູບແບບ . ຫນຶ່ງໃນເຫດຜົນເລື້ອຍໆທີ່ປະຊາຊົນໃຫ້ສໍາລັບການສືບຕໍ່ນໍາໃຊ້ພວກເຂົາແມ່ນຍ້ອນວ່າມັນເປັນການຍາກທີ່ຈະເຮັດຮູບແບບດ້ວຍ CSS. ເຖິງແມ່ນວ່າການສະຄິບ CSS ກໍ່ມີຂອບເຂດການຮຽນຮູ້, ໃນເວລາທີ່ທ່ານເຂົ້າໃຈວິທີການເຮັດ CSS layout, ທ່ານອາດຈະຕົກຕະລຶງວ່າມັນຈະເຮັດໄດ້ງ່າຍແນວໃດ. ໃນເວລາທີ່ທ່ານຮຽນຮູ້, ທ່ານຈະແກ້ໄຂເຫດຜົນທີ່ສອງທີ່ເຮັດໃຫ້ບໍ່ໃຫ້ໃຊ້ CSS- "ມັນໄວທີ່ຈະຂຽນຕາຕະລາງ." ມັນໄວກວ່າທ່ານຮູ້ຕາຕະລາງ, ແຕ່ເມື່ອທ່ານຮຽນຮູ້ CSS, ທ່ານອາດຈະໄວເທົ່າທີ່ຈະໄວໄດ້. ກັບວ່າ.
ການສະຫນັບສະຫນູນຂອງຕົວທ່ອງເວັບຂອງການຕັ້ງຕໍາແຫນ່ງ CSS
ການຕັ້ງຕໍາແຫນ່ງ CSS ແມ່ນຖືກສະຫນັບສະຫນູນໃນ ທຸກຕົວທ່ອງເວັບທີ່ທັນສະໄຫມ . ເວັ້ນເສຍແຕ່ວ່າທ່ານກໍາລັງສ້າງເວັບໄຊທ໌ສໍາລັບ Netscape 4 ຫຼື Internet Explorer 4, ຜູ້ອ່ານຂອງທ່ານບໍ່ຄວນມີບັນຫາໃນການເບິ່ງຫນ້າເວັບທີ່ຕັ້ງ CSS ຂອງທ່ານ.
ທົບທວນວິທີການສ້າງຫນ້າຂອງທ່ານ
ເມື່ອທ່ານສ້າງເວັບໄຊທີ່ໃຊ້ຕາຕະລາງ, ທ່ານຕ້ອງຄິດໃນຮູບແບບ ຕາຕະລາງ . ໃນຄໍາສັບຕ່າງໆອື່ນໆ, ທ່ານກໍາລັງຄິດໃນແງ່ຂອງຈຸລັງແລະແຖວແລະຄໍລໍາ. ຫນ້າເວັບຂອງທ່ານຈະສະທ້ອນເຖິງວິທີນີ້. ໃນເວລາທີ່ທ່ານຍ້າຍໄປອອກແບບ CSS, ທ່ານຈະເລີ່ມຕົ້ນຄິດກ່ຽວກັບຫນ້າຂອງທ່ານກ່ຽວກັບເນື້ອຫາ, ເພາະວ່າເນື້ອຫາສາມາດຖືກວາງໄວ້ທຸກບ່ອນທີ່ທ່ານຕ້ອງການໃນຮູບແບບ, ເຖິງແມ່ນວ່າມັນຖືກຈັດໃສ່ເທິງເນື້ອຫາອື່ນໆ.
ເວັບໄຊທ໌ທີ່ແຕກຕ່າງກັນມີໂຄງສ້າງທີ່ແຕກຕ່າງກັນ. ເພື່ອສ້າງຫນ້າທີ່ປະສິດທິພາບ, ປະເມີນໂຄງສ້າງຂອງຫນ້າໃດຫນຶ່ງກ່ອນທີ່ທ່ານຈະມອບເນື້ອຫາໃຫ້ມັນ. ຫນ້າຕົວຢ່າງອາດມີຫ້າສ່ວນທີ່ແຕກຕ່າງກັນ:
- ຫົວຫນ້າ . ຫນ້າທໍາອິດກັບການໂຄສະນາປ້າຍໂຄສະນາ, ຊື່ເວັບໄຊທ໌, ການເຊື່ອມຕໍ່ນໍາທິດ, ຫົວຂໍ້ບົດຄວາມແລະເຊັ່ນດຽວກັນກັບສິ່ງອື່ນໆອີກ.
- ຄໍລໍາຂວາ . ນີ້ແມ່ນເບື້ອງຂວາຂອງຫນ້າທີ່ມີກ່ອງຄົ້ນຫາ, ໂຄສະນາ, ກ່ອງວິດີໂອແລະເຂດການຄ້າ.
- ເນື້ອຫາ . ຂໍ້ຄວາມຂອງບົດຄວາມ, ບົດຄວາມ blog ຫຼືໂຄງຮ່າງການຊື້ - ຊີ້ນແລະມັນຝະລັ່ງຂອງຫນ້າ.
- Inline ads ໂຄສະນາພາຍໃນເນື້ອຫາ.
- footer . ການນໍາທິດທາງລຸ່ມ, ຂໍ້ມູນຂອງຜູ້ຂຽນ, ຂໍ້ມູນລິຂະສິດ, ໂຄສະນາປ້າຍໂຄສະນາຕ່ໍາ, ແລະການເຊື່ອມຕໍ່ທີ່ກ່ຽວຂ້ອງ.
ແທນທີ່ຈະວາງຫ້າອົງປະກອບໃນຕາຕະລາງ, ໃຫ້ໃຊ້ອົງປະກອບສ່ວນ HTML5 ເພື່ອກໍານົດສ່ວນທີ່ແຕກຕ່າງກັນຂອງເນື້ອຫາ, ແລະຫຼັງຈາກນັ້ນນໍາໃຊ້ CSS ຕໍາແຫນ່ງເພື່ອຈັດເອົາອົງປະກອບເນື້ອໃນໃນຫນ້າ.
ການກໍານົດສ່ວນເນື້ອໃນຂອງທ່ານ
ຫຼັງຈາກທີ່ທ່ານໄດ້ກໍານົດພື້ນທີ່ເນື້ອໃນທີ່ແຕກຕ່າງກັນຂອງເວັບໄຊທ໌ຂອງທ່ານ, ທ່ານຈໍາເປັນຕ້ອງຂຽນເຂົ້າໃນ HTML ຂອງທ່ານ. ໃນຂະນະທີ່ທ່ານສາມາດ, ໂດຍທົ່ວໄປ, ຈັດວາງພາກສ່ວນຂອງທ່ານໃນຄໍາສັ່ງໃດກໍ່ຕາມ, ມັນເປັນຄວາມຄິດທີ່ດີທີ່ຈະເອົາພາກສ່ວນທີ່ສໍາຄັນທີ່ສຸດຂອງຫນ້າຂອງທ່ານກ່ອນ. ວິທີການນີ້ຈະຊ່ວຍໃຫ້ມີການເພີ່ມປະສິດທິພາບຂອງເຄື່ອງຈັກຊອກຫາ, ເຊັ່ນດຽວກັນ.
ເພື່ອສະແດງໃຫ້ເຫັນຕໍາແຫນ່ງ, ຈົ່ງເບິ່ງຫນ້າທີ່ມີສາມຄໍລໍາແຕ່ບໍ່ມີຫົວຂໍ້ຫລືເບື້ອງລຸ່ມ. ທ່ານສາມາດນໍາໃຊ້ຕໍາແຫນ່ງເພື່ອສ້າງຮູບແບບໃດໆທີ່ທ່ານຕ້ອງການ.
ສໍາລັບຮູບສາມຄໍລໍາ, ໃຫ້ກໍານົດສາມສ່ວນ: ຄໍລໍາຊ້າຍ, ຄໍລໍາຂວາແລະເນື້ອຫາ.
ພາກສ່ວນເຫຼົ່ານີ້ຈະຖືກນໍາໃຊ້ໂດຍໃຊ້ອົງປະກອບ ARTICLE ສໍາລັບເນື້ອຫາແລະສອງພາກສ່ວນ SECTION ສໍາລັບສອງຄໍລໍາ. ທຸກສິ່ງທຸກຢ່າງກໍ່ຈະມີຄຸນລັກສະນະກໍານົດມັນ. ເມື່ອທ່ານໃຊ້ຄຸນລັກສະນະ id, ທ່ານຕ້ອງຂຽນຊື່ທີ່ເປັນເອກະລັກສໍາລັບແຕ່ລະ id.
ວາງຕໍາແຫນ່ງເນື້ອຫາ
ການນໍາໃຊ້ CSS, ກໍານົດຕໍາແຫນ່ງສໍາລັບອົງປະກອບ ID'd ຂອງທ່ານ. ເກັບຂໍ້ມູນຕໍາແຫນ່ງຂອງທ່ານໃນການໂທແບບນີ້ຄືດັ່ງນີ້:
#content {
}
ເນື້ອໃນພາຍໃນອົງປະກອບເຫຼົ່ານີ້ຈະໃຊ້ເວລາຫຼາຍເທົ່າທີ່ມັນສາມາດເຮັດໄດ້, ເຖິງ 100 ສ່ວນຮ້ອຍຂອງຄວາມກວ້າງຂອງສະຖານທີ່ປະຈຸບັນຫຼືຫນ້າ. ເພື່ອສົ່ງຜົນກະທົບຕໍ່ສະຖານທີ່ຂອງສ່ວນໂດຍບໍ່ຕ້ອງບັງຄັບໃຫ້ມັນມີຄວາມກວ້າງຄົງທີ່, ປ່ຽນແປ້ນພິມຫຼືຄຸນສົມບັດຂອບ.
ສໍາລັບຮູບແບບນີ້, ໃຫ້ຕັ້ງສອງຄໍລໍາເປັນຄວາມກວ້າງຄົງທີ່ແລະຫຼັງຈາກນັ້ນກໍານົດຕໍາແຫນ່ງຂອງເຂົາຢ່າງແທ້ຈິງ, ດັ່ງນັ້ນພວກເຂົາຈະບໍ່ໄດ້ຮັບຜົນກະທົບຈາກບ່ອນທີ່ພວກເຂົາພົບຢູ່ໃນ HTML.
# left-column {
ຕໍາແຫນ່ງ: absolute;
left: 0
width: 150px
margin-left: 10px;
margin-top: 20px
ສີ: # 000000;
padding: 3px
}
# right-column {
ຕໍາແຫນ່ງ: absolute;
ຊ້າຍ: 80%;
top: 20px
width: 140px
padding-left: 10px
z-index: 3;
ສີ: # 000000;
padding: 3px
}
ຫຼັງຈາກນັ້ນ, ສໍາລັບເຂດເນື້ອໃນ, ກໍານົດຂອບສຸດຂວາແລະປະໄວ້ດັ່ງນັ້ນເນື້ອໃນຈະບໍ່ກວມເອົາສອງຖັນພາຍນອກ.
#content {
top: 0px
ຂອບ: 0px 25% 0 165px
padding: 3px
ສີ: # 000000;
}
ການກໍານົດຫນ້າຂອງທ່ານໂດຍໃຊ້ CSS ແທນທີ່ຈະເປັນຕາຕະລາງ HTML ຮຽກຮ້ອງໃຫ້ມີທັກສະທາງດ້ານວິຊາການນ້ອຍໆ, ແຕ່ວ່າຜົນປະໂຫຍດດັ່ງກ່າວແມ່ນມາຈາກການອອກແບບທີ່ມີຄວາມຍືດຫມັ້ນແລະຕອບສະຫນອງແລະງ່າຍຕໍ່ການດັດປັບໂຄງສ້າງຕໍ່ຫນ້າຂອງທ່ານ.