Website တစ်ခုဖန်တီးနည်း
စက်များ၊ PC၊ လက်ပ်တော့၊ တက်ဘလက် နှင့် ဖုန်းအားလုံးတွင် အလုပ်လုပ်မည့် တုံ့ပြန်မှုရှိသော ဝဘ်ဆိုက်တစ်ခုကို ဖန်တီးနည်းကို လေ့လာပါ။
Scratch မှ ဝဘ်ဆိုဒ်တစ်ခုကို ဖန်တီးပါ။
"လက်ကွက်မူကြမ်း"
ဝဘ်ဆိုဒ်တစ်ခုမဖန်တီးမီ စာမျက်နှာဒီဇိုင်း၏ layout မူကြမ်းကိုရေးဆွဲခြင်းသည် ပညာရှိနိုင်သည်-
လမ်းကြောင်းပြဘား
ဘေးထွက်အကြောင်းအရာ
တစ်ချို့က စာသားတစ်ချို့ကို..
အဓိက အကြောင်းအရာ
တစ်ချို့က စာသားတစ်ချို့ကို..
တစ်ချို့က စာသားတစ်ချို့ကို..
တစ်ချို့က စာသားတစ်ချို့ကို..
အောက်ခြေမှတ်တိုင်
ပထမအဆင့် - အခြေခံ HTML စာမျက်နှာ
HTML သည် ဝဘ်ဆိုဒ်များဖန်တီးရန်အတွက် စံသတ်မှတ်ထားသော ဘာသာစကားဖြစ်ပြီး CSS သည် HTML စာရွက်စာတမ်းတစ်ခု၏ ပုံစံကို ဖော်ပြသည့် ဘာသာစကားဖြစ်သည်။ အခြေခံဝဘ်စာမျက်နှာတစ်ခုဖန်တီးရန် HTML နှင့် CSS ကို ပေါင်းစပ်ပါမည်။
မှတ်ချက်- HTML နှင့် CSS ကို မသိပါက၊ ကျွန်ုပ်တို့၏ HTML Tutorial ကိုဖတ်ခြင်းဖြင့် စတင်ရန် အကြံပြုအပ်ပါသည် ။
ဥပမာ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
နမူနာရှင်းပြထားပါတယ်။
<!DOCTYPE html>ကြေငြာချက်သည် ဤစာရွက်စာတမ်းကို HTML5 အဖြစ် သတ်မှတ်သည် ။<html>ဒြပ်စင်သည် HTML စာမျက်နှာတစ်ခု၏ အမြစ်ဒြပ်စင်ဖြစ်သည် ။<head>ဒြပ်စင်တွင် စာရွက်စာတမ်းနှင့်ပတ်သက်သည့် မက်တာအချက်အလက်ပါရှိသည် ။<title>ဒြပ်စင်သည် စာရွက်စာတမ်းအတွက် ခေါင်းစဉ်တစ်ခုကို သတ်မှတ်သည် ။- ဒြပ်စင် သည်
<meta>UTF-8 ဟုသတ်မှတ်ထားသော ဇာတ်ကောင်ကို သတ်မှတ်ရပါမည်။ - name="viewport" ပါ သော
<meta>ဒြပ်စင်သည် ဝဘ်ဆိုက်ကို စက်အားလုံးနှင့် မျက်နှာပြင် ရုပ်ထွက်များပေါ်တွင် ကောင်းမွန်စေသည်။ <style>ဒြပ်စင်တွင် ဝဘ်ဆိုက်အတွက် ပုံစံများ (အပြင်အဆင်/ဒီဇိုင်း) ပါ၀င် သည်<body>ဒြပ်စင်တွင် မြင်နိုင်သော စာမျက်နှာ အကြောင်းအရာ ပါရှိသည် ။<h1>ဒြပ်စင်သည် ကြီးမားသော ခေါင်းစဉ်တစ်ခုကို သတ်မှတ်သည် ။<p>ဒြပ်စင်သည် စာပိုဒ်တစ်ခုကို သတ်မှတ်သည် ။
စာမျက်နှာအကြောင်းအရာဖန်တီးခြင်း။
ကျွန်ုပ်တို့၏ <body>ဝဘ်ဆိုဒ်၏ဒြပ်စင်အတွင်းတွင်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ "Layout Draft" ကိုအသုံးပြုပြီး ဖန်တီးပါမည်-
- ခေါင်းစီးတစ်ခု
- လမ်းကြောင်းပြဘားတစ်ခု
- အဓိကအကြောင်းအရာ
- ဘေးထွက်အကြောင်းအရာ
- အောက်ခြေမှတ်တိုင်တစ်ခု
ခေါင်းစီး
ခေါင်းစီးသည် များသောအားဖြင့် ဝဘ်ဆိုက်၏ထိပ်တွင် (သို့မဟုတ် ထိပ်တန်းလမ်းညွှန်မီနူးတစ်ခုအောက်တွင်) ရှိသည်။ ၎င်းတွင် လိုဂို သို့မဟုတ် ဝဘ်ဆိုဒ်အမည် ပါဝင်လေ့ရှိသည်-
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
ထို့နောက် ခေါင်းစီးပုံစံပြုလုပ်ရန် CSS ကို အသုံးပြုသည်။
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
လမ်းကြောင်းပြဘား
လမ်းကြောင်းပြဘားတစ်ခုတွင် သင့်ဝဘ်ဆိုက်မှတစ်ဆင့် သွားလာနေသောဧည့်သည်များကို ကူညီရန် လင့်ခ်များစာရင်းပါရှိသည်-
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
လမ်းညွှန်ဘားကို ပုံစံသွင်းရန် CSS ကိုသုံးပါ
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
အကြောင်းအရာ
"ဘေးထွက်အကြောင်းအရာ" နှင့် "ပင်မအကြောင်းအရာ" တို့ကို ပိုင်းခြားထားသော ကော်လံ 2 ကွက်ကို ဖန်တီးပါ။
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
အပြင်အဆင်ကိုကိုင်တွယ်ရန် ကျွန်ုပ်တို့သည် CSS Flexbox ကိုအသုံးပြုသည်-
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
ထို့နောက် အပြင်အဆင်ကို တုံ့ပြန်မှုဖြစ်စေရန်အတွက် မီဒီယာမေးခွန်းများကို ပေါင်းထည့်ပါ။ ၎င်းသည် သင့်ဝဘ်ဆိုဒ်ကို စက်အားလုံး (ဒက်စ်တော့များ၊ လက်ပ်တော့များ၊ တက်ဘလက်များနှင့် ဖုန်းများ) တွင် ကောင်းမွန်ကြောင်း သေချာစေမည်ဖြစ်သည်။ ရလဒ်ကိုကြည့်ရန် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းပါ။
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
အကြံပြုချက်- မတူညီသော layout အမျိုးအစားတစ်ခုကို ဖန်တီးရန်၊ flex width ကိုပြောင်းလိုက်ပါ (သို့သော် ၎င်းသည် 100%) အထိ ပေါင်းထည့်ကြောင်း သေချာပါစေ။
အကြံပြုချက်- @media စည်းမျဉ်းသည် မည်သို့အလုပ်လုပ်သည်ကို သင်တွေးမိပါသလား။ ၎င်းအကြောင်းကို ကျွန်ုပ်တို့၏ CSS Media Queries အခန်းတွင် ပိုမိုဖတ်ရှုပါ ။
အကြံပြုချက်- Flexible Box Layout Module အကြောင်း ပိုမိုလေ့လာရန်၊ ကျွန်ုပ်တို့၏ CSS Flexbox အခန်းကို ဖတ်ရှုပါ ။
အကွက်အရွယ်အစားဆိုတာဘာလဲ။
ဘေးချင်းကပ်လျက် ရေပေါ်သေတ္တာ သုံးခုကို အလွယ်တကူ ဖန်တီးနိုင်သည်။ သို့ရာတွင်၊ အကွက်တစ်ခုစီ၏ အကျယ်ကိုချဲ့သည့်အရာ (ဥပမာ- padding သို့မဟုတ် ဘောင်များ) ကိုထည့်သောအခါ၊ အကွက်သည် ကွဲလိမ့်မည်။ ပိုင်ဆိုင်မှု သည် box-sizingကျွန်ုပ်တို့အား အကွက်၏ စုစုပေါင်းအနံ (နှင့် အမြင့်) တွင် padding နှင့် ဘောင်ကို ထည့်သွင်းနိုင်စေခြင်းဖြင့် အကွက်အတွင်းတွင် ရှိနေစေပြီး မကွဲကြောင်းသေချာစေပါသည်။
ကျွန်ုပ်တို့၏ CSS Box Sizing Tutorial တွင် box-sizing property အကြောင်း ပိုမိုဖတ်ရှုနိုင်ပါသည် ။
အောက်ခြေမှတ်တိုင်
နောက်ဆုံးတွင်၊ အောက်ခြေမှတ်စုတစ်ခုထည့်ပါမည်။
<div class="footer">
<h2>Footer</h2>
</div>
စတိုင်လ်လုပ်ပါ-
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
ဂုဏ်ယူပါသည်။ သင်သည် အစမှနေ၍ တုံ့ပြန်နိုင်သော ဝဘ်ဆိုက်တစ်ခုကို တည်ဆောက်ထားသည်။
W3Schools Spaces
သင့်ကိုယ်ပိုင်ဝဘ်ဆိုဒ်ကိုဖန်တီးပြီး သင်၏ .html ဖိုင်များကို လက်ခံကျင်းပလိုပါက W3schools Spaces ဟုခေါ်သော ကျွန်ုပ်တို့၏ အခမဲ့ဝဘ်ဆိုဒ်တည်ဆောက်သူ ကို စမ်းသုံးကြည့်ပါ -
