ຫນຶ່ງໃນເຕັກໂນໂລຢີ "ທີ່ສຸດ" ໃນເວັບໃນມື້ນີ້ແມ່ນການເລື່ອນພາບ parallax. ພວກເຮົາທັງຫມົດໄດ້ໄປຫາສະຖານທີ່ເຫຼົ່ານີ້ບ່ອນທີ່ທ່ານ rotate ລໍ້ເລື່ອນໃນຫນູຂອງທ່ານແລະເນື້ອໃນຢູ່ໃນຫນ້າ moves ຂຶ້ນແລະລົງຫຼືໃນທົ່ວຫນ້າໃນເວລາທີ່ທ່ານ rotate ລໍ້ຫນູ.
ສໍາລັບຜູ້ທີ່ໃຫມ່ໃນການອອກແບບເວັບແລະການອອກແບບຮູບພາບ, ວິທີການນີ້ສາມາດມີຄວາມຫຍຸ້ງຍາກຢ່າງຍິ່ງທີ່ຈະບັນລຸເນື່ອງຈາກຈໍານວນ CSS ທີ່ຕ້ອງການ.
ຖ້າຫາກວ່າຄໍາອະທິບາຍຂອງທ່ານ, ມີຈໍານວນຂອງຄໍາຮ້ອງສະຫມັກທີ່ອາດຈະຂໍອຸທອນກັບບັນດາກາຟິກ. ພວກເຂົາໂດຍພື້ນຖານໃຊ້ວິທີການສ້າງຫນ້າທີ່ຄຸ້ນເຄີຍກັບຫນ້າເວັບ, ຊຶ່ງຫມາຍຄວາມວ່າບໍ່ມີຫຼາຍ, ຖ້າມີ, ການເຂົ້າລະຫັດແມ່ນມີສ່ວນຮ່ວມ. ຫນຶ່ງໃນຄໍາຮ້ອງສະຫມັກທີ່ໄດ້ຮວບຮວມຢ່າງແທ້ຈິງເປັນປະໂຫຍດແມ່ນ Adobe Muse.
ວຽກງານທີ່ຖືກເຮັດໂດຍ pros ໂດຍຮູບພາບທີ່ນໍາໃຊ້ Muse ແມ່ນຂ້ອນຂ້າງໃຫ້ປະລາດໃຈແລະທ່ານສາມາດເບິ່ງຕົວຢ່າງຂອງສິ່ງທີ່ທ່ານສາມາດເຮັດໄດ້ໂດຍການຢ້ຽມຢາມ Muse Site of the Day . ເຖິງຢ່າງໃດກໍ່ຕາມຜູ້ໃຊ້ເວັບສ່ວນໃຫຍ່ມັກຈະເບິ່ງ Muse ເປັນ "ເຄື່ອງຫຼີ້ນລົມ", ມັນຍັງຖືກນໍາໃຊ້ໂດຍນັກອອກແບບເພື່ອສ້າງຕົວແບບມືຖືແລະເວບໄຊທ໌ທີ່ຈະຖືກສົ່ງໄປຫານັກພັດທະນາໃນທີມຂອງພວກເຂົາ.
ຫນຶ່ງໃນເຕັກນິກທີ່ງ່າຍດາຍທີ່ຈະເຮັດສໍາເລັດກັບ Muse ແມ່ນການເລື່ອນພາບ parallax ແລະຖ້າທ່ານຕ້ອງການເບິ່ງສະບັບທີ່ສົມບູນຂອງການອອກກໍາລັງກາຍພວກເຮົາຈະຍ່າງຜ່ານ, ຊີ້ໃຫ້ຕົວທ່ອງເວັບຂອງທ່ານຕໍ່ຫນ້ານີ້. ໃນເວລາທີ່ທ່ານມ້ວນລໍ້ເລື່ອນຫນູຂອງທ່ານ, ຂໍ້ຄວາມເບິ່ງຄືວ່າຈະຍ້າຍອອກໄປຫຼືລົງຫນ້າແລະຮູບພາບຈະປ່ຽນແປງ.
ໃຫ້ເລີ່ມຕົ້ນ.
01 of 07
ສ້າງຫນ້າເວັບ
ເມື່ອທ່ານເປີດ Muse ໃຫ້ຄລິກໃສ່ການເຊື່ອມຕໍ່ ເວັບໄຊທ໌ໃຫມ່ . ນີ້ຈະເປີດ ຄຸນສົມບັດເວັບໃຫມ່ . ໂຄງການນີ້ຈະຖືກອອກແບບມາສໍາລັບໂປແກຼມ desktop ແລະທ່ານສາມາດເລືອກເອົາມັນໄດ້ໃນເມນູປະເພດ ເບື້ອງຕົ້ນທີ່ ປາກົດຂຶ້ນ. ນອກນັ້ນທ່ານຍັງສາມາດກໍານົດຄ່າສໍາລັບຈໍານວນຄໍລໍາ, ຄວາມກວ້າງຂອງຂີ້ຝຸ່ນ, ຂອບແລະພັບ. ໃນກໍລະນີນີ້, ພວກເຮົາບໍ່ໄດ້ເປັນຫ່ວງກ່ຽວກັບເລື່ອງນີ້ແລະພຽງແຕ່ກົດ OK .
02 of 07
Format the Page
ເມື່ອທ່ານກໍານົດຄຸນສົມບັດຂອງເວັບໄຊທ໌ແລະກົດ OK ທ່ານໄດ້ຖືກນໍາໄປໃຊ້ກັບສິ່ງທີ່ເອີ້ນວ່າ View Plan . ມີ ຫນ້າທໍາ ອິດຢູ່ທາງເທິງແລະຫນ້າ ແມ່ບົດ ຢູ່ທາງລຸ່ມຂອງປ່ອງຢ້ຽມ. ພວກເຮົາພຽງແຕ່ຕ້ອງການຫນຶ່ງຫນ້າ. ເພື່ອໃຫ້ໄດ້ຮັບການອອກແບບເບິ່ງ, ພວກເຮົາ double-click ຫນ້າທໍາອິດທີ່ເປີດອິນເຕີເຟດ.
ຢູ່ເບື້ອງຊ້າຍມືແມ່ນເຄື່ອງມືຂັ້ນພື້ນຖານຈໍານວນຫນ້ອຍແລະມີສິດທີ່ຈະໃຊ້ໃນການຈັດການເນື້ອຫາໃນຫນ້າ. ຢູ່ເທິງສຸດແມ່ນຄຸນສົມບັດທີ່ສາມາດຖືກນໍາໃຊ້ກັບຫນ້າຫລືສິ່ງທີ່ເລືອກໃນຫນ້າ. ໃນກໍລະນີນີ້, ພວກເຮົາຕ້ອງການໃຫ້ມີພື້ນຫລັງສີດໍາ. ເພື່ອເຮັດສໍາເລັດນີ້, ພວກເຮົາຄລິກໃສ່ ຕົວທ່ອງເວັບຕື່ມຂໍ້ມູນໃສ່ ສີແລະເລືອກສີດໍາຈາກ Color Picker.
03 of 07
ເພີ່ມຂໍ້ຄວາມໃຫ້ຫນ້າ
ຂັ້ນຕອນຕໍ່ໄປແມ່ນການເພີ່ມຂໍ້ຄວາມບາງຢ່າງໃຫ້ກັບຫນ້າ. ພວກເຮົາໄດ້ເລືອກ ເຄື່ອງມືຂໍ້ຄວາມ ແລະລາກອອກຈາກກ່ອງຂໍ້ຄວາມ. ພວກເຮົາເຂົ້າໄປໃນຄໍາສັບ "ຍິນດີຕ້ອນຮັບ" ແລະ, ໃນຄຸນສົມບັດກໍານົດຂໍ້ຄວາມໃຫ້ Arial, 120 pixels ສີຂາວ. Center Aligned
ຫຼັງຈາກນັ້ນ, ພວກເຮົາໄດ້ປ່ຽນເຄື່ອງມືການເລືອກ, ກົດຢູ່ໃນ Textbox ແລະຕັ້ງ ຕໍາແຫນ່ງ Y ຂອງຕົນ ໃຫ້ 168 pixels ຈາກປາຍ. ມີກ່ອງຂໍ້ຄວາມທີ່ຍັງເລືອກໄວ້, ພວກເຮົາໄດ້ເປີດ ກະດານຄວບຄຸມ ແລະສອດຄ່ອງກ່ອງຂໍ້ຄວາມໃຫ້ສູນ.
ສຸດທ້າຍ, ກັບກ່ອງຂໍ້ຄວາມທີ່ເລືອກ, ພວກເຮົາໄດ້ກົດປຸ່ມ Option / Alt ແລະ Shift ແລະສ້າງສີ່ສໍາເນົາຂອງກ່ອງຂໍ້ຄວາມ. ພວກເຮົາໄດ້ປ່ຽນແປງຂໍ້ຄວາມແລະຕໍາແຫນ່ງ Y ຂອງແຕ່ລະສໍາເນົາໄປ:
- To, 871
- Graphics, 1621
- Software, 2371
- @ Aboutcom, 3181
ທ່ານຈະສັງເກດເຫັນ, ເມື່ອທ່ານກໍານົດສະຖານທີ່ຂອງແຕ່ລະປ່ອງຂໍ້ຄວາມ, ຫນ້າຈະປັບຂະຫນາດເພື່ອຮອງຮັບສະຖານທີ່ຂອງຂໍ້ຄວາມ.
04 of 07
ຕື່ມຮູບພາບບ່ອນວາງສະແດງຮູບພາບ
ຂັ້ນຕອນຕໍ່ໄປແມ່ນເຮັດໃຫ້ຮູບພາບລະຫວ່າງຂໍ້ຄວາມທ່ອນໄມ້.
ຂັ້ນຕອນທໍາອິດແມ່ນເລືອກເອົາ ເຄື່ອງມື Rectangle ແລະແຕ້ມກ່ອງຂອງພວກເຮົາທີ່ກວ້າງຂວາງຈາກຫນ້າຫນຶ່ງໄປຫາຫນ້າອື່ນ. ກັບມຸມສາກທີ່ເລືອກ, ພວກເຮົາກໍານົດ ຄວາມສູງ ຂອງຕົນ ໃຫ້ 250 pixels ແລະ ຕໍາແຫນ່ງ Y ຂອງມັນ ເປັນ 425 pixels . ແຜນການແມ່ນເພື່ອໃຫ້ເຂົາເຈົ້າສະເຫມີ stretch ຫຼືສັນຍາກັບຫນ້າ width ເພື່ອຮອງຮັບ viewport ຂອງຕົວທ່ອງເວັບຂອງຜູ້ໃຊ້. ເພື່ອເຮັດສໍາເລັດນີ້, ພວກເຮົາກົດປຸ່ມ width 100% ໃນ Properties. ສິ່ງທີ່ເຮັດນີ້ແມ່ນສີຂີ້ເຖົ່າອອກ X ຄ່າແລະເພື່ອຮັບປະກັນພາບສະເຫມີ 100% ຂອງ width viewport ໃນ browser.
05 of 07
ເພີ່ມຮູບພາບໃຫ້ກັບຮູບພາບຜູ້ຖື
ກັບ Rectangle ທີ່ເລືອກແລ້ວພວກເຮົາໄດ້ກົດປຸ່ມ Fill link - ບໍ່ແມ່ນ Color Chip - ແລະກົດ ຫມຶກ I mage ເພື່ອເພີ່ມຮູບພາບໃນຮູບສີ່ຫລ່ຽມ. ໃນພື້ນທີ່ການ ຕິດຕັ້ງ , ພວກເຮົາໄດ້ເລືອກ Scale To Fit ແລະກົດຕົວ ຄວບຄຸມສູນກາງ ໃນພື້ນທີ່ ຕໍາແຫນ່ງ ເພື່ອຮັບປະກັນພາບທີ່ຖືກປັບຂະຫນາດຈາກຈຸດສູນກາງຂອງຮູບ.
ຕໍ່ໄປ, ພວກເຮົາໄດ້ໃຊ້ເທກນິກ Option / Alt-Shift-drag ເພື່ອສ້າງສໍາເນົາຂອງຮູບພາບລະຫວ່າງສອງທ່ອນທໍາອິດ, ເປີດກະດານສໍາເລັດຮູບແລະແລກປ່ຽນຮູບພາບສໍາລັບຄົນອື່ນ. ພວກເຮົາໄດ້ເຮັດສໍາລັບສອງຮູບພາບທີ່ຍັງເຫຼືອເຊັ່ນກັນ.
ມີຮູບພາບຢູ່ໃນສະຖານທີ່, ມັນແມ່ນເວລາທີ່ຈະເພີ່ມ motion ໄດ້.
06 of 07
ເພີ່ມ Parallax Scrolling
ມີວິທີການເພີ່ມເລື່ອນ parallax ໃນ Adobe Muse. ພວກເຮົາຈະສະແດງໃຫ້ທ່ານເຫັນວິທີທີ່ງ່າຍຕໍ່ການເຮັດມັນ.
ດ້ວຍແຜງສໍາເລັດຮູບເປີດ, ໃຫ້ຄລິກໃສ່ ແຖບເລື່ອນ ແລະ, ເມື່ອມັນເປີດ, ໃຫ້ຄລິກໃສ່ Motion .
ທ່ານຈະເຫັນຄຸນຄ່າສໍາລັບການ ເຄື່ອນໄຫວໃນ ເບື້ອງຕົ້ນ ແລະ ສຸດທ້າຍ . ເຫຼົ່ານີ້ກໍານົດວິທີການໄວຍ້າຍຮູບພາບທີ່ກ່ຽວຂ້ອງກັບລໍ້ Scroll. ຕົວຢ່າງ, ມູນຄ່າຂອງ 1.5 ຈະຍ້າຍຮູບພາບ 1.5 ເວລາໄວກ່ວາລໍ້. ພວກເຮົານໍາໃຊ້ມູນຄ່າຂອງ 0 ເພື່ອລັອກຮູບໃນສະຖານທີ່.
ລູກສອນແນວນອນແລະແນວຕັ້ງ ຈະກໍານົດທິດທາງຂອງ motion. ຖ້າຄ່າແມ່ນ 0, ຮູບພາບຈະບໍ່ມີຜົນກະທົບຕໍ່ລູກສອນທີ່ທ່ານກົດ.
ຄ່າກາງ - ຕໍາແຫນ່ງທີ່ສໍາຄັນ - ສະແດງຈຸດທີ່ພາບຈະເລີ່ມເຄື່ອນຍ້າຍ. ເສັ້ນຂ້າງເທິງຂອງຮູບພາບເລີ່ມຕົ້ນ, ສໍາລັບຮູບພາບນີ້, 325 pixels ຈາກເທິງຂອງຫນ້າ. ເມື່ອປື້ມເລື່ອນໄປເຖິງຄ່ານັ້ນຮູບພາບເລີ່ມຕົ້ນຍ້າຍ. ທ່ານສາມາດປ່ຽນຄ່ານີ້ໄດ້ໂດຍການປ່ຽນແປງມັນໃນກ່ອງໂຕ້ຕອບຫຼືໂດຍການຄລິກແລະການດຶງຈຸດທີ່ຢູ່ທາງເທິງຂອງແຖວຂຶ້ນຫຼືລົງ.
ເຮັດຊ້ໍາອີກຄັ້ງນີ້ສໍາລັບຮູບພາບອື່ນໆໃນຫນ້າເວັບ.
07 of 07
ທົດສອບຕົວທ່ອງເວັບ
ໃນຈຸດນີ້, ພວກເຮົາໄດ້ສໍາເລັດ. ສິ່ງທໍາອິດທີ່ພວກເຮົາໄດ້ເຮັດ, ສໍາລັບເຫດຜົນທີ່ຊັດເຈນ, ແມ່ນການເລືອກ File> Save Site . ກັບການທົດສອບຂອງຕົວທ່ອງເວັບ, ພວກເຮົາພຽງແຕ່ເລືອກ ເອກະສານ> ຫນ້າ Preview ໃນ Browser . ນີ້ໄດ້ເປີດຕົວເບົາເຊີໃນຕອນຕົ້ນຂອງຄອມພິວເຕີຂອງເຮົາແລະ, ເມື່ອຫນ້າເປີດ, ພວກເຮົາເລີ່ມເລື່ອນ.