You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
16 KiB
157 lines
16 KiB
# ការតុបតែងកម្មវិធីធនាគាររបស់អ្នកជាមួយ CSS ទំនើប
|
|
|
|
## ទិដ្ឋភាពគម្រោង
|
|
|
|
បម្លែងកម្មវិធីធនាគារដំណើរការរបស់អ្នកឱ្យក្លាយជាកម្មវិធីវែបមានរូបរាងទាក់ទាញ និងមានរូបរាងវិជ្ជាជីវៈដោយប្រើបច្ចេកវិទ្យា CSS ទំនើប។ អ្នកនឹងបង្កើតប្រព័ន្ធរចនាប័ទ្មឯកសណ្ឋានដែលបង្កើនបទពិសោធន៍អ្នកប្រើខណៈពេលរក្សាគោលការណ៍ចូលដំណើរការ និងរចនាបទឆ្លាតវៃឆ្លើយតប។
|
|
|
|
ការតែងនេះជាការតស៊ូឱ្យអ្នកអនុវត្តលំនាំរចនាវែបទំនើប អនុវត្តអត្តសញ្ញាណវិស្វកម្មមួយដែលមានភាពរួមបញ្ចូល និងបង្កើតចំណុចប្រទះដែលអ្នកប្រើនឹងងាយស្រួលរួមទាំងទាក់ទាញ។
|
|
|
|
## សេចក្តីណែនាំ
|
|
|
|
### ជំហានទី 1៖ រៀបចំស្ទីលស៊ីត
|
|
|
|
**បង្កើតមូលដ្ឋាន CSS របស់អ្នក៖**
|
|
|
|
1. **បង្កើត** ឯកសារថ្មីឈ្មោះ `styles.css` នៅក្នុងថតគម្រោងរបស់អ្នក
|
|
2. **ភ្ជាប់** ស្ទីលស៊ីតទៅក្នុងឯកសារ `index.html` របស់អ្នក៖
|
|
```html
|
|
<link rel="stylesheet" href="styles.css">
|
|
```
|
|
3. **ចាប់ផ្តើម** ជាមួយការកំណត់ឲ្យ CSS ទទួលស្គាល់ថ្មី និងតម្លៃលំនឹងទំនើប៖
|
|
```css
|
|
/* Modern CSS reset and base styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
}
|
|
```
|
|
|
|
### ជំហានទី 2៖ តម្រូវការប្រព័ន្ធរចនា
|
|
|
|
**អនុវត្តធាតុរចនាដ៏សំខាន់ទាំងនេះ៖**
|
|
|
|
#### ពណ៌
|
|
- **ពណ៌សំខាន់**៖ ជ្រើសរើសពណ៌វិជ្ជាជីវៈសម្រាប់ប៊ូតុង និងការរិះគន់
|
|
- **ពណ៌គូសមហេតុ**៖ ពណ៌បន្ថែមសម្រាប់លក្ខណៈផ្សេងៗ និងសកម្មភាពរង
|
|
- **ពណ៌អថេរ**៖ ពណ៌ស្មើរសម្រាប់អក្សរ ស្រទាប់ព្រំ និងផ្ទៃខាងក្រោយ
|
|
- **ពណ៌ជោគជ័យ/កំហុស**៖ ពណ៌បៃតងសម្រាប់ស្ថានភាពជោគជ័យ ពណ៌ក្រហមសម្រាប់កំហុស
|
|
|
|
#### ផ្នែកអក្សរ
|
|
- **លំដាប់ក្បាល**៖ ផ្សាញ់បំបែកច្បាស់ចន្លោះ H1, H2, និង H3
|
|
- **អត្ថបទខ្លី**៖ ទំហំអក្សរអាចអានបាន (យ៉ាងតិច 16px) និងកម្ពស់បន្ទាត់សមរម្យ
|
|
- **ស្លាកបែបបោះពុម្ព**៖ រចនាអក្សរតាមសមត្ថភាព និងច្បាស់លាស់
|
|
|
|
#### ទីតាំង និងចម្ងាយរវាងធាតុ
|
|
- **ចម្ងាយស្របគ្នា**៖ ប្រើវិមាត្រចម្ងាយ (8px, 16px, 24px, 32px)
|
|
- **ប្រព័ន្ធប្លង់ប្រអប់**៖ រៀបចំប្លង់សម្រាប់ទម្រង់ និងផ្នែកមាតិកា
|
|
- **រចនាបទឆ្លាតវៃឆ្លើយតប**៖ ប្រើវិធីសាស្រ្តមុនសម្រាប់ឧបករណ៍ចល័តជាមួយចំណុចលំហូរ
|
|
|
|
### ជំហានទី 3៖ ការតុបតែងធាតុផ្សំពិសេស
|
|
|
|
**តុបតែងធាតុផ្សព្វផ្សាយទាំងនេះ៖**
|
|
|
|
#### ទម្រង់
|
|
- **ប្រអប់បញ្ចូល**៖ ស្រទាប់ព្រំវិជ្ជាជីវៈ, ស្ថានភាពផ្តោត និងរចនាអ្នកបញ្ជាក់ត្រឹមត្រូវ
|
|
- **ប៊ូតុង**៖ ប្រតិកម្មពេលកាក់, ស្ថានភាពពុំដំណើរការ, និងសញ្ញាតម្លើង
|
|
- **ស្លាក**៖ ទីតាំងច្បាស់និងសញ្ញាបញ្ជាក់វាលចាំបាច់
|
|
- **សារកំហុស**៖ រចនាកំហុសដែលមើលឃើញបាន និងសារជួយបង្ហាញ
|
|
|
|
#### ការរុករក
|
|
- **ក្បាល**៖ តំបន់រុករកស្អាត និងមានម៉ាកពាណិជ្ជកម្ម
|
|
- **តំណភ្ជាប់**៖ ស្ថានភាពកាក់ច្បាស់ និងសញ្ញាសកម្ម
|
|
- **រូបតំណាង/ចំណងជើង**៖ ធាតុម៉ាកពាណិជ្ជកម្មដ៏រឹងមាំ
|
|
|
|
#### ផ្នែកមាតិកា
|
|
- **ផ្នែក**៖ ការបំបែកជាថ្នាក់ទាក់ទាញរវាងផ្នែកផ្សេងៗ
|
|
- **កាត**៖ ប្រសិនបើប្រើប្លង់កាត រួមបញ្ចូលរន្ធញ័រនិងស្រទាប់ព្រំ
|
|
- **ផ្ទៃខាងក្រោយ**៖ ការប្រើប្រាស់គន្លងពណ៌សនិងផ្ទៃខាងក្រោយស្រទន់
|
|
|
|
### ជំហានទី 4៖ លក្ខណៈពិសេសបន្ថែម (ជាជម្រើស)
|
|
|
|
**ពិចារណាអនុវត្តលក្ខណៈពិសេសដ៏កម្រិតខ្ពស់ទាំងនេះ៖**
|
|
- **របៀបងងឹត**៖ ប្ដូររវាងរបៀបស្រាលនិងងងឹត
|
|
- **អនុវត្តន៍ចលនា**៖ ប្រតិកម្មស្រទន់និងចលនាតូចៗ
|
|
- **ស្ថានភាពផ្ទុក**៖ មតិយោបល់វីស្វកម្មក្នុងអំឡុងពេលបញ្ជាទម្រង់
|
|
- **រូបភាពឆ្លើយតប**៖ រូបភាពបានបង្កើតគ្រប់គ្រាន់សម្រាប់ទំហំអេក្រង់ខុសគ្នា
|
|
|
|
## ឧទាហរណ៍ការបង្ហាញរចនា
|
|
|
|
**លក្ខណៈលេចធ្លោនៃកម្មវិធីធនាគារទំនើប៖**
|
|
- **រចនាស្អាត និងទំនេរទីតាំងខាងស** ជាមួយដំណើរការទូលំទូលាយ
|
|
- **ម៉ាស៊ីនពណ៌វិជ្ជាជីវៈ** (ពណ៌ខៀវ បៃតង ឬពណ៌ស្មើរស្ទាត់)
|
|
- **លំដាប់បង្ហាញច្បាស់** ជាមួយប៊ូតុងហៅដំណើរការដែលច្បាស់លាស់
|
|
- **អត្រាការប្រៀបធៀបច្បាស់លាស់** ដែលគោរពតាមគោលការណ៍ WCAG
|
|
- **ប្លង់ឆ្លាតវៃឆ្លើយតបនៅលើទូរស័ព្ទ** ដែលមានប្រសិទ្ធភាពលើឧបករណ៍ទាំងអស់
|
|
|
|
## តម្រូវការបច្ចេកទេស
|
|
|
|
### ការរៀបចំ CSS
|
|
```css
|
|
/* 1. CSS Custom Properties (Variables) */
|
|
:root {
|
|
--primary-color: #007bff;
|
|
--secondary-color: #6c757d;
|
|
/* Add more variables */
|
|
}
|
|
|
|
/* 2. Base Styles */
|
|
/* Reset, typography, general elements */
|
|
|
|
/* 3. Layout */
|
|
/* Grid, flexbox, positioning */
|
|
|
|
/* 4. Components */
|
|
/* Forms, buttons, cards */
|
|
|
|
/* 5. Utilities */
|
|
/* Helper classes, responsive utilities */
|
|
|
|
/* 6. Media Queries */
|
|
/* Responsive breakpoints */
|
|
```
|
|
|
|
### តម្រូវការចូលដំណើរការ
|
|
- **ការប្រៀបធៀបពណ៌**៖ បញ្ជាក់អត្រាអតិភាពតែលើស 4.5:1 សម្រាប់អត្ថបទធម្មតា
|
|
- **សញ្ញាផ្តោត**៖ សញ្ញាផ្តោតដែលមើលឃើញសម្រាប់ការរុករកជាមួយក្តារចុច
|
|
- **ស្លាកទម្រង់**៖ ជារួមបញ្ចូលដោយសមស្របជាមួយបញ្ចូល
|
|
- **រចនាបទឆ្លាតវៃឆ្លើយតប**៖ អាចប្រើបានលើអេក្រង់ពី 320px ដល់ 1920px
|
|
|
|
## វិធានការវាយតម្លៃ
|
|
|
|
| ការវាស់បណ្តុះ | ល្អឧត្តម (A) | ល្អប្រសើរ (B) | កំពុងអភិវឌ្ឍ (C) | ត្រូវការកែប្រែ (F) |
|
|
|----------|---------------|----------------|----------------|----------------------|
|
|
| **ប្រព័ន្ធរចនា** | អនុវត្តប្រព័ន្ធរចនាដ៏ទូលំទូលាយជាមួយពណ៌ សតិវិជ្ជា និងចម្ងាយស្តេីរត្រួតពិនិត្យ | ប្រើស្ទីលមួយដែលមានលំនាំច្បាស់ និងលំដាប់វិស្វករ | រៀបចំស្ទីលមូលដ្ឋានជាមួយខ្សែប្លង់មិនជាប់គ្នា ឬអវត្តមានធាតុរចនា | ស្ទីលតិច និងមានជម្រើសរចនាផ្សេងគ្នា មិនសមរម្យ |
|
|
| **បទពិសោធន៍អ្នកប្រើ** | បង្កើតចំណុចប្រទះអាជីពដែលងាយយល់ និងទាក់ទាញ | ផ្ដល់បទពិសោធន៍ល្អជាមួយការរុករកច្បាស់ និងមាតិកាអាចអានបាន | ប្រើបានមូលដ្ឋាន ជាមួយកំណែទម្រង់ត្រូវការកែលម្អ | បទពិសោធន៍អាក្រក់ ងាយស្រួលត្រូវរុករក ឬអានបាន |
|
|
| **ការអនុវត្តបច្ចេកទេស** | ប្រើបច្ចេកវិទ្យា CSS ទំនើប ជាស្ថាបត្យកម្មកូដបានល្អ និងអនុវត្តបានត្រឹមត្រូវ | អនុវត្ត CSS បានល្អជាមួយរៀបចំបានល្អ និងបច្ចេកវិទ្យាសមរម្យ | CSS ដំណើរការបានត្រឹមត្រូវ ប៉ុន្តែខ្វះរៀបចំឬបច្ចេកវិទ្យាទំនើប | អនុវត្ត CSS មិនបានល្អ មានបញ្ហាបច្ចេកទេស ឬមិនគាំទ្រតាមកម្មវិធីរុករក |
|
|
| **រចនាបទឆ្លាតវៃឆ្លើយតប** | រចនាបទឆ្លាតវៃឆ្លើយតបពេញលេញ ធ្វើការបានល្អលើទំហំឧបករណ៍ទាំងអស់ | មានការឆ្លើយតបល្អជាមួយបញ្ហាតិចតួចលើខ្លះទំហំអេក្រង់ | អនុវត្តឆ្លើយតបមូលដ្ឋាន ជាមួយបញ្ហាប្លង់ខ្លះ | មិនឆ្លើយតប ឬមានបញ្ហារុករកកាន់តែដាច់ខាតលើទូរស័ព្ទ |
|
|
| **ចូលដំណើរការ** | គោរពតាមសេចក្ដីណែនាំ WCAG ជាមួយការរុករកក្តារចុចល្អ និងគាំទ្រអានអេក្រង់ | អនុវត្តការចូលដំណើរការល្អ ជាមួយការប្រៀបធៀប និងសញ្ញាផ្តោតត្រឹមត្រូវ | ពិចារណាអំពីការចូលដំណើរការមូលដ្ឋាន ជាមួយធាតុខ្វះ | ចូលដំណើរការមិនល្អ ពិបាកសម្រាប់អ្នកមានពិការភាព |
|
|
|
|
## សេចក្តីណែនាំដាក់ស្នើ
|
|
|
|
**រួមបញ្ចូលក្នុងការដាក់ស្នើរបស់អ្នក៖**
|
|
- **styles.css**៖ ស្ទីលស៊ីតរបស់អ្នកដល់ពេញលេញ
|
|
- **HTML បានកែប្រែ**៖ ការផ្លាស់ប្តូរអ្វីៗក្នុង HTML របស់អ្នក
|
|
- **រូបថតអេក្រង់**៖ រូបភាពបង្ហាញរចនារបស់អ្នកលើកុំព្យូទ័រ និងទូរស័ព្ទ
|
|
- **README**៖ សេចក្តីពិពណ៌នាខ្លីអំពីជម្រើសរចនារបស់អ្នក និងម៉ាស៊ីនពណ៌
|
|
|
|
**ពិន្ទុបូសសម្រាប់៖**
|
|
- **គុណលក្ខណៈ CSS** សម្រាប់ការរក្សាទុកសមត្ថភាពកែប្រែ
|
|
- **លក្ខណៈពិសេស CSS ខ្ពស់** ដូចជា Grid, Flexbox, ឬចលនាផ្ទៃ CSS
|
|
- **ការពិចារណាពិសេស** ដូចជាការបង្កើត CSS បែបប្រសើរនឹងទំហំឯកសារតិចបំផុត
|
|
- **ការធ្វើតេស្តរវាងកម្មវិធីរុករក** ដើម្បីធានាការគាំទ្រចំពោះកម្មវិធីរុករកខុសៗគ្នា
|
|
|
|
> 💡 **ទំនុកចិត្តឯកទេស**៖ ចាប់ផ្តើមជាមួយរចនាបទទូរស័ព្ទ ជាមុនបំផុត បន្ទាប់មកបង្កើនសម្រាប់អេក្រង់ធំ។ វិធីសាស្រ្តមុនទូរស័ព្ទនេះធានាថាកម្មវិធីរបស់អ្នកដំណើរការល្អលើឧបករណ៍ទាំងអស់ និងទទួលបានការអភិវឌ្ឍវែបទំនើបល្អបំផុត។
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**ការបដិសេធ**៖
|
|
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈពេលយើងខិតខំផ្ដល់ភាពត្រឹមត្រូវ សូមកត់សម្គាល់ថា ការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុស ឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមដែលមានភាសាទីតាំងដើមគួរត្រូវបានរក្សាទុកជាមូលដ្ឋានដែលមានសិទ្ធិអនុញ្ញាត។ សម្រាប់ព័ត៌មានសំខាន់ៗ ការបកប្រែដោយមនុស្សជំនាញត្រូវបានផ្ដល់អនុសាសន៍។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការយល់ក្នុងចិត្តខុសពីការប្រើប្រាស់ការបកប្រែនេះឡើយ។
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |