Adding Graphics to Web Page

background-image: 

 background-image: url(image/bg.jpg); 

ប្រើសំរាប់ដាក់ background ទៅអោយ tag ណាមួយ។

background-repeat:  

background-repeat: repeat|repeat-x|repeat-y|no-repeat; 

ប្រើសំរាប់កំណត់នូវការ repeat របស់ background image ។

background-position: 

background-position: [left|center|right|#px|%] [bottom|center|top|#px|%]; 

ប្រើសំរាប់កំណត់ទីតាំងរបស់ background image។

html { height: 100%; } 

មានប្រយោជន៍សំរាប់ពេលដែលមានបញ្ហាក្នុង firefox browser ដែលកំពស់របស់ body មិនស្មើនឹងកំពស់របស់ page ទាំងមូល។

background-attachment: 

background-attachment: scroll|fixed; 

fixed: កំណត់កុំអោយ background-image រំកិលតាមការដែលយើងបាន scroll

scroll: កំណត់អោយ background-image រំកិលតាមការដែលយើងបាន scroll

background: 

background: url(…) #FFF center center fixed …; 

សំរាប់កំណត់គ្រប់ property របស់ background ។

Navigation Technique

Requirement 

ជាធម្មតាក្នុងការបង្កើតនូវ Link គេតែងតែប្រើ <a/>,<ul/>,<li/> tag ដើម្បីដាក់ link  ជាក្រុមៗ។ ការធ្វើបែបនេះវាអាច

អោយរចនានូវប្រភេទនៃ navigation option បានច្រើន ដូចជា Vertical Navigation, Horizontal Navigation។ 

Vertical Navigation Sample 

Preloading Techniques

Pixy Techniques 

ជាវិធីសាស្ត្រដែលគេប្រើក្នុង preloading-rollover។ ក្នុងវិធីសាស្រ្តគឺមានដំណាក់កាលដូចខាងក្រោម ៖ 

·         ត្រូវបង្កើតរូបភាពមួយដែលមានទាំង normal state, rollover state

·         ត្រូវកំណត់គំលាតពី state នីមួយៗអោយបានជាក់លាក់  ត្រូវកំណត់ style អោយ link ដូចខាងក្រោម៖(ឧបមាថាគំលាត 20px)

·         a{ background: url(state.jpg) 0px 0px;

·         a:hover{ background: url(state.jpg) opx -20px;

Using Hidden Loading

រូបភាពត្រូវបាន download ទៅកាន់ client តែម្តងគត់ទោះបីជា រូបភាពមួយនោះត្រូវបានប្រើច្រើនដងក្នុង page

ក៏ដោយ។ ដូច្នេះយើងគ្រាន់តែបង្កើតនូវ div tag មួយ រួចដាក់នូវរូបភាពណាដែលត្រូវ load ខាងក្នុងវា បន្ទាប់មកកំណត់

visibility:hidden, position:absolute ជាការស្រេច។

Sliding Door Technique 

ជាវិធីសាស្រ្តមួយដែលគេប្រើសំរាប់បង្កើតនូវប៊ូតុងមួយដែលអាចរីករួមទំហំបាន ដែលយើងបានកំណត់។

·         បង្កើតនូវប៊ូតុងមួយដែលមានទំហំអតិបរិមា 

·         បន្ទាប់ត្រូវបំបែករូបភាពជាពីរចំរៀក។ចំរៀកទី១ដាក់តែម្ខាង ដែលប្រែប្រួលខាងឆ្វេងគេបង្អស់ និងចំរៀកទី២ ដាក់រូបភាពដែលនៅសល់។

·          ក្នុងកូដ HTML គ្រប់ link ត្រូវដាក់ក្នុង li ។ 

·         ក្នុង style sheet ត្រូវកំណត់ background របស់ li អោយរូបភាពទី២  li{ background: url(btn_right.png) right top;

·          ក្នុង a ត្រូវកំណត់ a{ background: url(btn_left.png) left top;

Formatting Table and Form border-collapse:  

border-collapse:

border-collapse:     collapse|separate; 

ប្រើសំរាប់កំណត់នូវការដាច់គ្នា ឬជាប់គ្នារបស់ border នៃ table ។