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

គេហទំព័រ spritemaster

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

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

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

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

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

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

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

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

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

2 យោបល់

  1. 1

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

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

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

    • 2

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

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

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