បង្កើនល្បឿនគេហទំព័ររបស់អ្នកជាមួយ CSS Sprites

គេហទំព័រ spritemaster

ខ្ញុំសរសេរអំពីល្បឿនទំព័របន្តិចនៅលើគេហទំព័រនេះហើយវាជាផ្នែកសំខាន់មួយនៃការវិភាគនិងការកែលំអដែលយើងបានបង្កើតនៅលើគេហទំព័ររបស់អតិថិជនរបស់យើង។ ក្រៅពីការផ្លាស់ប្តូរទៅម៉ាស៊ីនមេដែលមានអនុភាពនិងការប្រើប្រាស់ឧបករណ៍ដូចជា បណ្តាញចែកចាយមាតិកាមានបច្ចេកទេសសរសេរកម្មវិធីមួយចំនួនទៀតដែលអ្នកអភិវឌ្ឍន៍គេហទំព័រអាចប្រើបាន។

ស្តង់ដារសម្រាប់សន្លឹករចនាប័ទ្មល្បាក់ដើមមានអាយុកាលជាង ១៥ ឆ្នាំហើយ។ CSS គឺជាការវិវត្តន៍ដ៏សំខាន់មួយនៅក្នុងការអភិវឌ្ឍគេហទំព័រពីព្រោះវាញែកមាតិកាចេញពីការរចនា។ រកមើលប្លក់នេះនិងអ្វីផ្សេងទៀតហើយភាគច្រើននៃភាពខុសគ្នានៃរចនាប័ទ្មគឺគ្រាន់តែនៅក្នុងសន្លឹករចនាប័ទ្មដែលភ្ជាប់ប៉ុណ្ណោះ។ សន្លឹករចនាប័ទ្មក៏សំខាន់ផងដែរពីព្រោះពួកវាត្រូវបានរក្សាទុកជាមូលដ្ឋាននៅក្នុងឃ្លាំងសម្ងាត់មួយនៅក្នុងកម្មវិធីរុករករបស់អ្នក។ ជាលទ្ធផលនៅពេលមនុស្សបន្តទស្សនាគេហទំព័ររបស់អ្នកពួកគេមិនទាញយកសន្លឹកស្ទីលរាល់ពេល ... គ្រាន់តែមាតិកាទំព័រប៉ុណ្ណោះ។

ធាតុមួយនៃ CSS ដែលជារឿយៗមិនមានដំណើរការគឺ អេសអេសស្ព្រីត។ នៅពេលអ្នកប្រើចូលមើលគេហទំព័ររបស់អ្នកអ្នកប្រហែលជាមិនបានដឹងថាពួកគេមិនគ្រាន់តែធ្វើការស្នើសុំមួយសម្រាប់ទំព័រនោះទេ។ ពួកគេ ធ្វើសំណើច្រើន…សំណើរសម្រាប់ទំព័រសំរាប់សន្លឹកស្ទីលណាមួយសំរាប់ឯកសារ JavaScript ដែលភ្ជាប់មកហើយបន្ទាប់មករូបភាពនីមួយៗ។ ប្រសិនបើអ្នកមានប្រធានបទដែលមានរូបភាពជាស៊េរីសម្រាប់ព្រំដែនរនាំងរុករកផ្ទៃខាងក្រោយប៊ូតុងជាដើម…កម្មវិធីរុករកត្រូវស្នើសុំមួយម្តងមួយៗពីបណ្តាញគេហទំព័ររបស់អ្នក។ គុណថាដោយភ្ញៀវរាប់ពាន់នាក់ហើយដែលអាចជាសំណើរាប់ម៉ឺនរាប់ពាន់ដែលបានធ្វើនៅក្នុងម៉ាស៊ីនមេរបស់អ្នក!

ជាលទ្ធផលវាធ្វើឱ្យគេហទំព័ររបស់អ្នកយឺត។ ក គេហទំព័រយឺតអាចជះឥទ្ធិពលយ៉ាងខ្លាំងទៅលើការចូលរួមនិងការសន្ទនា ដែលទស្សនិកជនរបស់អ្នកបង្កើត។ យុទ្ធសាស្រ្តមួយដែលអ្នកអភិវឌ្ឍន៍គេហទំព័រដ៏អស្ចារ្យប្រើគឺដាក់រូបភាពទាំងអស់ទៅក្នុងឯកសារតែមួយ ... ដែលគេហៅថា a sprite &។ ជាជាងធ្វើសំណើសម្រាប់រូបភាពឯកសារនីមួយៗរបស់អ្នកឥឡូវនេះចាំបាច់ត្រូវមានសំណូមពរតែមួយសម្រាប់រូបភាពផ្កាថ្មតែមួយ!

អ្នកអាចអាន របៀបដែល CSS Sprites ធ្វើការនៅ CSS-Tricks or CSS Sprite របស់ទស្សនាវដ្តី Smashing ប្រកាស។ ចំណុចរបស់ខ្ញុំគឺមិនបង្ហាញអ្នកពីរបៀបប្រើវាទេគ្រាន់តែដើម្បីណែនាំអ្នកដើម្បីធានាថាក្រុមអភិវឌ្ឍន៍របស់អ្នកបញ្ចូលពួកគេទៅក្នុងគេហទំព័រ។ ឧទាហរណ៍ CSS ល្បិចផ្តល់នូវរូបភាពចំនួន ១០ ដែលជាសំណើចំនួន ១០ ហើយបន្ថែមរហូតដល់ ២០.៥ គីប។ នៅពេលប្រមូលផ្តុំនៅក្នុងស្ព្រីងតែមួយវាជា សំណើ ១ នោះគឺ ១៣ គ។ ក! ការស្នើសុំដំណើរកម្សាន្តជុំនិងពេលវេលាឆ្លើយតបសម្រាប់រូបភាពចំនួន ៩ ឥឡូវត្រូវបានបាត់បង់ហើយចំនួនទិន្នន័យត្រូវបានកាត់បន្ថយជាង ៣០% ។ គុណថាដោយចំនួនភ្ញៀវនៅលើគេហទំព័ររបស់អ្នកហើយអ្នកនឹងកោរសក់ធនធានមួយចំនួន!

globalnavនេះ ផ្លែប៉ោម របាររុករកគឺជាឧទាហរណ៍ដ៏អស្ចារ្យ។ ប៊ូតុងនិមួយៗមានរដ្ឋមួយចំនួន…មិនថាអ្នកនៅលើទំព័របិទទំព័រឬនៅលើផ្ទាំងនោះទេ។ CSS កំណត់កូអរដោនេនៃប៊ូតុងនិងបង្ហាញតំបន់នៃស្ថានភាពត្រឹមត្រូវដល់កម្មវិធីរុករកអ្នកប្រើប្រាស់។ រដ្ឋទាំងអស់នេះត្រូវបានបង្រួបបង្រួមជាមួយគ្នានៅក្នុងក្រាហ្វិចតែមួយ - ប៉ុន្តែត្រូវបានបង្ហាញតាមតំបន់តាមតំបន់ដែលបានបញ្ជាក់នៅក្នុងសន្លឹកទម្រង់។

ប្រសិនបើអ្នកអភិវឌ្ឍន៍របស់អ្នកចូលចិត្តឧបករណ៍មានតោននៅទីនោះដែលអាចជួយពួកគេរួមទាំងឯកសារ គ្រោងត្រីវិស័យ CSS, ការស្នើរសុំ សម្រាប់ ASP.NET, អេសអេស-ស្ព្រីត សម្រាប់រូប៊ី ស្គ្រីបស៊ីស៊ីអេស សំរាប់កម្មវិធី Photoshop SpritePad, SpriteRight, SpriteCow, សូន្យស្ព្រីត, ម៉ាស៊ីនភ្លើងរបស់ស្ពីតហ្វ្រីដរបស់គម្រោងហ្វុនឌូ, គេហទំព័រ Sprite Master, និង SpriteMe កន្លែងចំណាំ។

រូបថតអេក្រង់នៃ គេហទំព័រ Sprite Master:
គេហទំព័រ spritemaster

Martech Zone មិនប្រើរូបភាពផ្ទៃខាងក្រោយពេញប្រធានបទរបស់វាទេដូច្នេះយើងមិនចាំបាច់ប្រើបច្ចេកទេសនេះនៅពេលនេះទេ។

2 យោបល់

  1. 1

    រង់ចាំ ... តើការប្រមូលទាំងមូលមិនមែនជា“ រូបភាព” (ឬ“ យន្ដហោះ” ទេ) និងរូបភាពរងនីមួយៗ (ឬក្រុមរូបភាពក្នុងករណីមានចលនាឬផ្លាស់ប្តូរអន្តរកម្ម) ជា“ ផ្ការីក”?

    ប្រហែលជាវត្ថុត្រូវបានប្តូរឈ្មោះចាប់តាំងពីពេលចុងក្រោយដែលខ្ញុំបានដោះស្រាយរឿងនេះប៉ុន្តែខ្ញុំអាចស្បថស្បថថាស្ព្រីតគឺជាធាតុដែលត្រូវបានបង្ហាញមិនមែនតារាងទិន្នន័យធំដែលវាត្រូវបានទាញចេញពីនោះទេ។

    (“ តារាង Sprite” …តើវាមិនមែនអញ្ចឹងទេ?)

    • 2

      យើងប្រហែលជាកំពុងនិយាយរឿងពីរផ្សេងគ្នាគឺម៉ាក។ ជាមួយ CSS អ្នកអាចបញ្ជាក់ថាផ្នែកណាមួយនៃឯកសាររូបភាពដើម្បីបង្ហាញសំរបសំរួលប្រើប្រាស់។ នេះអនុញ្ញាតឱ្យអ្នកដាក់រូបភាពរបស់អ្នកទាំងអស់ទៅជា 'រនាត្រី' តែមួយហើយបន្ទាប់មកគ្រាន់តែចង្អុលទៅតំបន់ដែលអ្នកចង់បង្ហាញជាមួយ CSS ។

តើ​អ្នក​គិត​អ្វី?

តំបន់បណ្ដាញនេះប្រើ Akismet ដើម្បីកាត់បន្ថយសារឥតបានការ។ សិក្សាអំពីរបៀបដែលទិន្នន័យរបស់អ្នកត្រូវបានដំណើរការ.