តំបន់បណ្តាញសំណាញ់: របៀបដើម្បីធ្វើឱ្យរូបភាពផ្ទៃខាងក្រោយ html

រចនាបណ្ដាញដើម្បីសុខភាពជាច្រើនមានតែទៅមើលសារៈសំខាន់នៃការបង្កើតនៃតំបន់បណ្ដាញនេះ, ជាញឹកញាប់ឆ្ងល់ពីរបៀបធ្វើរូបភាពផ្ទៃខាងក្រោយ HTML ។ ហើយប្រសិនបើពួកគេមួយចំនួនអាចដោះស្រាយបញ្ហានេះវានៅតែជាបញ្ហានៅក្នុងពេលនៃការលូតទទឹងទាំងមូលនៃរូបភាពនៅលើម៉ូនីទ័រនេះ។ នៅពេលជាមួយគ្នានេះខ្ញុំចង់ឃើញត្រូវបានបង្ហាញអត្តសញ្ញាណតំបន់នៅលើកម្មវិធីរុករកទាំងអស់ដូច្នេះវាគួរតែបំពេញតម្រូវការនៃការឆ្លងកម្មវិធីរុករក។ អ្នកអាចកំណត់ផ្ទៃខាងក្រោយនេះនៅក្នុងវិធីពីរយ៉ាង: ដោយប្រើ ស្លាក HTML និងរចនាប័ទ្ម CSS ។ គ្នាសម្រាប់ខ្លួនគាត់បានជ្រើសរើសជម្រើសដែលល្អបំផុត។ ជាការពិតណាស់, រចនាប័ទ្ម CSS ដែលជាការងាយស្រួលនោះទេព្រោះលេខកូដរបស់វាត្រូវបានរក្សាទុកនៅក្នុងឯកសារដាច់ដោយឡែកមួយនិងការមិនយកវាគ្មិនបន្ថែមទៀតនៅក្នុងស្លាកវែបសាយសំខាន់ប៉ុន្តែជាដំបូងសូមយើងពិចារណាអំពីវិធីសាស្រ្តសាមញ្ញសម្រាប់ដំឡើងរូបភាពនៅលើផ្ទៃខាងក្រោយនៃតំបន់បណ្តាញនេះ។

មូលដ្ឋានស្លាក HTML ដើម្បីបង្កើតផ្ទៃខាងក្រោយ

ដូច្នេះយើងទៅសំណួរនៃរបៀបដើម្បីធ្វើឱ្យរូបភាពផ្ទៃខាងក្រោយក្នុង HTML នៅលើអេក្រង់។ ក្នុងគោលបំណងដើម្បីមើលទៅតំបន់ស្រស់ស្អាតអ្នកត្រូវតែយល់លម្អិតមួយដែលមានសារៈសំខាន់ជា: វាគឺគ្រប់គ្រាន់គ្រាន់តែដើម្បីធ្វើឱ្យផ្ទៃខាងក្រោយជម្រាលឬគូរវាជាណ៍រឹងមាំប៉ុន្តែប្រសិនបើអ្នកត្រូវការបញ្ចូលរូបភាពផ្ទៃខាងក្រោយវានឹងមិនលើកទទឹងពេញលេញរបស់ម៉ូនីទ័រ។ រូបភាពនេះគឺជាការចាំបាច់ដំបូងដើម្បីយកឡើងឬធ្វើឱ្យការរចនាផ្ទាល់របស់អ្នកជាមួយផ្នែកបន្ថែមនេះ, នៅក្នុងការដែលអ្នកនឹងបង្ហាញទំព័រនៃតំបន់បណ្តាញ។ តែនៅពេលនេះគឺមានរូបភាពផ្ទៃខាងក្រោយត្រៀមខ្លួនជាស្រេចអូសវាទៅក្នុងថតដែលមានឈ្មោះ«រូបភាព»មួយ។ នៅក្នុងវាយើងនឹងរក្សាទុកទាំងអស់រូបភាពដែលបានប្រើ, ចលនានិងឯកសារក្រាហ្វិកផ្សេងទៀត។ ថតនេះគួរតែត្រូវបានកំណត់ទីតាំងក្នុងថត root ជាមួយឯកសារ HTML របស់អ្នកទាំងអស់។ ឥឡូវនេះអ្នកអាចផ្លាស់ទីនៅលើនិងទៅកូដ។ មានជម្រើសជាច្រើនសម្រាប់កូដសរសេរ, ដែលនឹងផ្លាស់ប្តូរផ្ទៃខាងក្រោយរូបភាពនេះ។

1. សរសេរគុណលក្ខណៈស្លាក។
2. តាមរយៈការរចនាប័ទ្ម CSS ក្នុងកូដ HTML ។
3. សរសេរនៅក្នុងឯកសារ CSS មានរចនាប័ទ្មដាច់ដោយឡែកមួយ។

ដូចជានៅក្នុង HTML ដើម្បីធ្វើឱ្យរូបភាពផ្ទៃខាងក្រោយ, អ្នកសម្រេចចិត្តទេប៉ុន្តែខ្ញុំចង់និយាយពាក្យមួយចំនួនអំពីរបៀបដែលវានឹងមានការល្អប្រសើរបំផុត។ វិធីសាស្រ្តជាលើកដំបូងគឺដោយសរសេរតាមរយៈគុណលក្ខណៈស្លាកបានគេយូរមកលែងប្រើ។ ជម្រើសទីពីរគឺត្រូវបានប្រើកម្រណាស់, ព្រោះវាប្រែចេញថាជាច្រើននៃកូដដូចគ្នា។ ជម្រើសទីបីគឺទូទៅបំផុតនិងមានប្រសិទ្ធិភាព។ នេះគឺជាឧទាហរណ៍នៃស្លាក HTML:

1. វិធីសាស្រ្តជាលើកដំបូងតាមរយៈការថតគុណលក្ខណៈស្លាក (រាងកាយ) នៅក្នុងឯកសារ index.htm ។ វាត្រូវបានរក្សាទុកនៅក្នុងសំណុំបែបបទនេះ: (ផ្ទៃខាងក្រោយរាងកាយ = "ថត / Nazvanie_kartinki.rasshirenie") (/ រាងកាយ) ។ នោះគឺប្រសិនបើយើងមានរូបភាពជាមួយនឹងចំណងជើង«រូបភាព»និងផ្នែកបន្ថែមឯកសារ JPG, និងថតដែលយើងបានដាក់ឈ្មោះ«រូបភាព», បន្ទាប់មកធាតុរបស់ HTML កូដនឹងមើលទៅដូចនេះ: (ផ្ទៃខាងក្រោយរាងកាយ = "រូបភាព / Picture.jpg") ... (/ រាងកាយ) ។
2. វិធីសាស្ត្រទីពីរពាក់ព័ន្ធនឹងការថតរចនាប័ទ្ម CSS នោះទេប៉ុន្តែវាត្រូវបានសរសេរក្នុងឯកសារដូចគ្នានេះជាមួយ index.htm ឈ្មោះ។ (តួរចនាប័ទ្ម = "ផ្ទៃខាងក្រោយ: url ( 'រូបភាព ../ / Picture.jpg')") ។
3. វិធីសាស្រ្តទីបីនៃការថតត្រូវបានធ្វើឡើងក្នុងឯកសារពីរ។ ឯកសារជាមួយនឹងស្លាកឈ្មោះ index.htm (ក្បាល) នេះត្រូវបានសរសេរដូចបន្ទាត់: (ក្បាល) (តំណ rel = "សន្លឹករចនាប័ទ្ម" ប្រភេទ = "text / css" href = "http: // តំបន់ / អត្ថបទ / 193110 /% D0% 9F % ឃ 1% 83% 82% D1% D1% 8C_% D0% បរិញ្ញាបត្រ CSS_faylu ") (/ ក្បាល) ។ រចនាប័ទ្ម style.css ឯកសារដែលហៅថាសរសេររួចទៅហើយ: រាងកាយ {ផ្ទៃខាងក្រោយ: URL (រូបភាព / Picture.jpg ')} ។

ដូចជានៅក្នុង HTML ដើម្បីធ្វើឱ្យរូបភាពផ្ទៃខាងក្រោយនេះយើងបានយល់។ ឥឡូវអ្នកត្រូវរកវិធីដើម្បី stretch រូបភាពនៅទូទាំងទទឹងនៃអេក្រង់ទាំងមូល។

វិធីដើម្បី stretch រូបភាពផ្ទៃខាងក្រោយទៅទទឹងរបស់បង្អួច

យើងតំណាងឱ្យអេក្រង់របស់យើងនៅក្នុងសំណុំបែបបទនៃការភាគរយនោះទេ។ វាប្រែថាទទឹងទាំងមូលនិងប្រវែងនៃអេក្រង់នេះនឹងមាន 100% × 100% ។ យើងត្រូវការដើម្បី stretch រូបភាពទៅទទឹងនេះ។ បន្ថែមទៅឯកសាររូបភាពបន្ទាត់ style.css ថតដែលនឹង stretch រូបភាពនៅលើទទឹងទាំងមូលនិងប្រវែងនៃម៉ូនីទ័រ។ ដូចដែលវាត្រូវបានសរសេរនៅក្នុងរចនាប័ទ្ម CSS បាន? វាជារឿងធម្មតា!

រាងកាយ

{

ផ្ទៃខាងក្រោយ: URL (រូបភាព / Picture.jpg ')

ផ្ទៃខាងក្រោយទំហំ: 100%; / * ប្រកាសនេះគឺសមរម្យសម្រាប់កម្មវិធីរុករកបណ្ដាញសម័យទំនើបបំផុត * /

}

ដូច្នេះយើងគិតថារបៀបដើម្បីធ្វើឱ្យផ្ទៃខាងក្រោយមួយនៅក្នុង HTML រូបភាពនៅលើអេក្រង់។ វាមានវិធីសាស្រ្តនៃការថតនៅក្នុងឯកសារ index.htm នេះ។ ទោះបីជាវិធីសាស្រ្តនេះនិងហួសសម័យនោះទេប៉ុន្តែសម្រាប់អ្នកចាប់ផ្តើមដំបូងវាគឺជាការចាំបាច់ដើម្បីឱ្យដឹងនិងយល់។ ស្លាក (ក្បាល) (រចនាប័ទ្ម) div {ទំហំផ្ទៃខាងក្រោយ: គម្រប; } (/ រចនាប័ទ្ម) (/ ក្បាល), កំណត់ត្រានេះមានន័យថាយើងបានបម្រុងទុកអង្គភាពពិសេសសម្រាប់ផ្ទៃខាងក្រោយដែលនឹងត្រូវបានដាក់នៅលើទទឹងទាំងមូលនៃបង្អួច។ យើងបានចាត់ទុកថាជាវិធីពីរ, របៀបដើម្បីធ្វើឱ្យតំបន់បណ្តាញរបស់ HTML រូបភាពផ្ទៃខាងក្រោយ, ដូច្នេះរូបភាពត្រូវបាន stretched ទៅទទឹងទាំងមូលនៃអេក្រង់នៅក្នុងការណាមួយនៃកម្មវិធីរុករកទំនើប។

តើធ្វើដូចម្តេចដើម្បីធ្វើឱ្យផ្ទៃខាងក្រោយថេរ

ប្រសិនបើអ្នកសម្រេចចិត្តក្នុងការប្រើរូបមួយជាផ្ទៃខាងក្រោយនៃធនធានបណ្តាញនាពេលអនាគតបន្ទាប់មកអ្នកគ្រាន់តែត្រូវដឹងពីរបៀបដើម្បីធ្វើឱ្យវាថេរ, ដូច្នេះវាមិនត្រូវបាន stretched នៅក្នុងប្រវែងនិងមិនបានលេខមួយស្ទួនរូបរាងភ័ណភ្ព។ គ្រាន់តែដោយប្រើកូដ HTML ដើម្បីចុះឈ្មោះលើសពីនេះទៀតតូចមួយ។ អ្នកត្រូវការទៅឯកសារ style.css ដើម្បីបន្ថែមឃ្លាមួយបន្ទាប់ពីផ្ទៃខាងក្រោយ: URL (រូបភាព / Picture.jpg ') ថេរ; ឬជំនួសបានបន្ថែមទៀតថាបន្ទាប់ពីសញ្ញាបន្ទាត់ដាច់ដោយឡែក - ទីតាំង: ថេរ។ ដូច្នេះផ្ទាំងរូបភាពរបស់អ្នកនឹងត្រូវបានជួសជុល។ ក្នុងអំឡុងពេលរមូរមាតិកានៅលើតំបន់បណ្តាញ, អ្នកនឹងឃើញអត្ថបទបន្ទាត់ត្រូវបានផ្លាស់ប្តូនោះប៉ុន្តែផ្ទៃខាងក្រោយនៅតែក្នុងកន្លែង។ ដូច្នេះអ្នកបានរៀនពីរបៀបធ្វើរូបភាពផ្ទៃខាងក្រោយ HTML, នៅក្នុងវិធីជាច្រើន។

ធ្វើការជាមួយតារាងក្នុង HTML

បណ្តាញដែលគ្មានបទពិសោធជាច្រើនអ្នកអភិវឌ្ឍន៍ប្រឈមមុខជាមួយតុនិងប្លុកជាញឹកញាប់មិនបានយល់ពីរបៀបដើម្បីធ្វើឱ្យតារាងផ្ទៃខាងក្រោយរូបភាព HTML ។ ដូច ក្រុមរបស់ HTML រចនាប័ទ្មនិង CSS ដែលជាភាសាសរសេរកម្មវិធីបណ្ដាញគឺសាមញ្ញសមរម្យ។ និងដំណោះស្រាយចំពោះបញ្ហានេះគឺដើម្បីសរសេរគូបន្ទាត់នៃកូដ។ អ្នករួចហើយគួរតែដឹងថាការសរសេរតារាងជួរដេកនិងជួរឈររៀងគ្នា, ដូចជាចង្អុលបង្ហាញដោយស្លាក (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 ដើម្បីប្ដូរតាមបំណងដែលមានកម្មវិធីរុករកចាំបាច់។ លើសពីនេះទៀតនៅក្នុងសម័យទំនើបនៃទូរស័ព្ទឆ្លាត, អ្នកអភិវឌ្ឍន៍វែបសាយជាច្រើនកំពុងព្យាយាមបង្កើតគេហទំព័រនិងការប្រែប្រួលសម្រាប់កំណែចល័តនិងមើលទៅកុំព្យូទ័រមួយ។