យើងអាចបែងចែកទំព័រគ្រប់គ្រង់របស់យើងជា ៣ ផ្នែកបានគឺក្បាលទំព័រ ខ្លួនទំព័រ និងជើងទំព័រ ដោយធ្វើដូចខាងក្រោមនេះ៖
នៅលើបន្តាត់លេខ 6 នៃឯកសារ users.ejs ដែលមាននៅក្នងថត views ការសរសេរថា <link rel="stylesheet" href="/stylesheets/users-style.css"> គឺជាការយកឯកសារ users-style.css នៅក្នុងថត stylesheets នៃថត public មកប្រើប្រាស់ក្នុងការរចនាទំព័រគ្រប់គ្រងរបស់យើង។ អាស្រ័យហេតុនេះ យើងចាំបាច់ត្រូវបង្កើតឯកសារឈ្មោះ users-style.css ទុកនៅក្នុងថត public/stylesheets ហើយនៅក្នុងឯកសារនោះ យើងអាចសរសេរកូដមួយចំនួនដូចមាននៅខាងលើ។
នៅលើបន្ទាត់លេខ 7 នៃឯកសារ users.ejs ការសរសេរថា <link href="https://fonts.googleapis.com/css?family=Odor+Mean+Chey|Moul" rel="stylesheet"> គឺជាការយកពុម្ពអក្សរខ្មែរចំនួន ២ ពីប្រព័ន្ធ Google Fonts មកប្រើនៅក្នុងទំព័រគ្រប់គ្រងរបស់យើង។
ចាប់ពីបន្ទាត់លេខ 10 រហូតដល់បន្ទាត់លេខ 12 នៃឯកសារ users.ejs គឺជាការយកផ្នែកនៃផ្ទៃទំព័រផ្សេងៗដែលមាននៅក្នុងថត views មកបញ្ចូលផ្គុំគ្នា បង្កើតទៅជាទំព័រគ្រប់គ្រងយ៉ាងពេញលេញមួយ។ ដូចនេះ យើងចាំបាច់ត្រូវបង្កើតឯកសារនៃផ្នែកទាំងនោះទុកនៅក្នុងថត views ដែលនៅក្នុងឯកសារទាំងនោះ ត្រូវមានការសរសេរកូដដូចនៅក្នុងរូបខាងលើនេះ។
ក្រោយពីបង្កើតឯកសារចាំបាច់ទាំងឡាយបានរួចរាល់អស់ហើយ យើងអាចធ្វើការរចនាក្បាលទំព័រគ្រប់គ្រងរបស់យើងបាន ដោយសរសេរកូដនៅក្នុងឯកសារ users-style.css ដូចខាងក្រោមនេះ៖
បន្ទាប់មកទៀត យើងអាចរចនាខ្លួនទំព័រគ្រប់គ្រងរបស់យើង ដោយធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<%= title %>
</head>
<body>
<%- include('users-header.ejs') %>
<%- include('users-main.ejs') %>
<%- include('users-footer.ejs') %>
</body>
</html>
/* users-style.css */
body{
padding:0;
margin:0;
font:14px "Lucida Grande", Helvetica, Arial, sans-serif,"Odor Mean Chey";
background:#e6e6e6;
}
ក្បាលទំព័រ
ខ្លួនទំព័រ
នៅលើបន្តាត់លេខ 6 នៃឯកសារ users.ejs ដែលមាននៅក្នងថត views ការសរសេរថា <link rel="stylesheet" href="/stylesheets/users-style.css"> គឺជាការយកឯកសារ users-style.css នៅក្នុងថត stylesheets នៃថត public មកប្រើប្រាស់ក្នុងការរចនាទំព័រគ្រប់គ្រងរបស់យើង។ អាស្រ័យហេតុនេះ យើងចាំបាច់ត្រូវបង្កើតឯកសារឈ្មោះ users-style.css ទុកនៅក្នុងថត public/stylesheets ហើយនៅក្នុងឯកសារនោះ យើងអាចសរសេរកូដមួយចំនួនដូចមាននៅខាងលើ។
នៅលើបន្ទាត់លេខ 7 នៃឯកសារ users.ejs ការសរសេរថា <link href="https://fonts.googleapis.com/css?family=Odor+Mean+Chey|Moul" rel="stylesheet"> គឺជាការយកពុម្ពអក្សរខ្មែរចំនួន ២ ពីប្រព័ន្ធ Google Fonts មកប្រើនៅក្នុងទំព័រគ្រប់គ្រងរបស់យើង។
ចាប់ពីបន្ទាត់លេខ 10 រហូតដល់បន្ទាត់លេខ 12 នៃឯកសារ users.ejs គឺជាការយកផ្នែកនៃផ្ទៃទំព័រផ្សេងៗដែលមាននៅក្នុងថត views មកបញ្ចូលផ្គុំគ្នា បង្កើតទៅជាទំព័រគ្រប់គ្រងយ៉ាងពេញលេញមួយ។ ដូចនេះ យើងចាំបាច់ត្រូវបង្កើតឯកសារនៃផ្នែកទាំងនោះទុកនៅក្នុងថត views ដែលនៅក្នុងឯកសារទាំងនោះ ត្រូវមានការសរសេរកូដដូចនៅក្នុងរូបខាងលើនេះ។
ក្រោយពីបង្កើតឯកសារចាំបាច់ទាំងឡាយបានរួចរាល់អស់ហើយ យើងអាចធ្វើការរចនាក្បាលទំព័រគ្រប់គ្រងរបស់យើងបាន ដោយសរសេរកូដនៅក្នុងឯកសារ users-style.css ដូចខាងក្រោមនេះ៖
ទំព័រគ្រប់គ្រង
/* រចនាក្បាលទំព័រ */
.site-header{
background:#00b3b3;
color:white;
font:22px/1.5 Moul;
padding:10px 0 5px;
}
.site-header .inner{
display:grid;
grid-template-columns:35px auto 40px;
align-items:center;
}
.site-header .inner .title{
margin-left:10px;
position:relative;
top:-5px;
}
.site-header .inner .logo img{
width:100%;
}
.site-header .inner .log-out img{
width:100%;
}
@media only screen and (max-width: 768px){
.region{
width:100%;
}
.site-header{
padding-left:10px;
padding-right:10px;
}
}
បន្ទាប់មកទៀត យើងអាចរចនាខ្លួនទំព័រគ្រប់គ្រងរបស់យើង ដោយធ្វើដូចខាងក្រោមនេះ៖
បណ្តុំទិន្នន័យ
/* រចនាខ្លួនទំព័រ */
.main{
display:grid;
grid-template-columns:20% auto;
min-height:450px;
margin-top:30px;
}
.main .sidebar{
border-right:1px solid #bfbfbf;
padding-right:15px;
margin-right:15px;
}
.main .sidebar .title{
font:18px/1.5 Koulen;
}
.main .content .title{
font:18px/1.5 Bokor;
}
@media only screen and (max-width: 768px){
.main{
grid-template-columns:100%;
padding-left:10px;
padding-right:10px;
box-sizing:border-box;
}
.main .sidebar{
border-right:none;
}
}
ចំណែកឯជើងទំព័រវីញ យើងអាចធ្វើការរចនាដូចខាងក្រោមនេះ៖
/* រចនាជើងទំព័រ */
.site-footer{
margin-top:30px;
background:#d9d9d9;
}
.site-footer .credit{
font:italic 14px/1.5 Nokora;
text-align:center;
padding:15px 0;
}
@media only screen and (max-width: 768px){
.site-footer{
padding-left:10px;
padding-right:10px;
}
}
