အသိုက် site ကို: နောက်ခံရုပ်ပုံ html အောင်ဘယ်လို

အတော်များများကအတွေ့အကြုံမရှိသေးသောရှိသော web designer, သာက်ဘ်ဆိုက်များ၏ဖန်ဆင်းခြင်း၏အနှစ်သာရသို့ delve ရန်မကြာခဏ html နောက်ခံပုံလုပ်ဖို့ဘယ်လိုတွေးမိ။ ထိုသူအချို့တို့သည်ဤပြဿနာကိုကိုင်တွယ်ဖြေရှင်းနိုင်ပါလျှင်, ကမော်နီတာပေါ်တွင်ပုံရိပ်တစ်ခုလုံးရဲ့ width ဆန့်သည့်အချိန်တွင်နေဆဲပြဿနာတစ်ခုဖြစ်ပါတယ်။ တစ်ချိန်တည်းမှာပင်ကိုယ်က Cross-browser ၏လိုအပ်ချက်များကိုဖြည့်ဆည်းသင့်တယ်ဒါမှဆိုက်ကြီးသားအပေါင်းတို့, browser များပေါ်တူညီပြသနေကြသည်ကိုမြင်ချင်ပါတယ်။ သငျသညျနည်းလမ်းနှစ်ခုအတွက်နောက်ခံသတ်မှတ်ထားနိုင်သည် အသုံးပြု. HTML တဂ် နဲ့ CSS စတိုင်များ။ ကိုယ်တော်အဘို့အသီးအသီးကိုအကောင်းဆုံး option ကိုရွေးချယ်ပါတယ်။ ယင်း၏ကုဒ်သီးခြားဖိုင်ထဲတွင်သိမ်းဆည်းထားသည်နှင့်အဓိက site ရဲ့ tags များအတွက်အပိုပီတက်ယူပေမယ့်ပထမဦးဆုံးကျွန်တော်တို့ကိုဆိုက်၏နောက်ခံပေါ်တွင်ပုံရိပ်ကို install များအတွက်ရိုးရှင်းသောနည်းလမ်းစဉ်းစားပါမသွားပါစေပါဘူးဘာဖြစ်လို့လဲဆိုတော့ဟုတ်ပါတယ်, CSS ကိုစတိုင်, ပိုပြီးအဆင်ပြေပါတယ်။

နောက်ခံကိုဖန်တီးရန်အခြေခံ HTML တဂ်

ဒါကြောင့်ကျနော်တို့ screen ပေါ်မှာ html အတွက်နောက်ခံပုံစေရန်မည်ကဲ့သို့၏မေးခွန်းကိုသွားပါ။ လှပသော site ကိုကြည့်ရှုနိုင်ဖို့အတွက်သင်တဦးတည်းမဟုတ်ဘဲအရေးကြီးသောအသေးစိတ်နားလည်ရပါမယ်: ကယ့် gradient ကိုနောက်ခံအောင်သို့မဟုတ်ကအစိုင်အခဲအရောင်ပန်းချီဖို့လုံလောက်ပါတယ်, ဒါပေမယ့်သင်နောက်ခံပုံထည့်သွင်းဖို့လိုအပ်မယ်ဆိုရင်ကမော်နီတာအပြည့်အဝအကျယ်ဆန့်မည်မဟုတ်။ အဆိုပါပုံရိပ်သင် site ၏စာမျက်နှာပြပေးလိမ့်မယ်ရသော, ကောက်သို့မဟုတ်ဤ extension နှင့်သင်၏ကိုယ်ပိုင်ဒီဇိုင်းလုပ်မူလကလိုအပ်သောဖြစ်ခဲ့သည်။ နောက်ခံပုံရိပ်အဆင်သင့်တဲ့အခါမှသာ, «ပုံများ»အမည်ရှိ folder ကိုထဲသို့ဆွဲယူပါ။ အထဲတွင်, ငါတို့ရှိသမျှကိုအသုံးပြုသောပုံရိပ်တွေ, Animation နှင့်အခြားဂရပ်ဖစ်ဖိုင်များကိုသိမ်းဆည်းထားမည်ဖြစ်သည်။ ဤဖိုင်တွဲအားလုံးကိုသင့် html files တွေကိုအတူအမြစ် directory ထဲတွင်တည်ရှိသောရပါမည်။ အခုဆိုရင်သင်ကုဒ်အပေါ်နှင့်မှရွှေ့နိုင်ပါတယ်။ နောက်ခံပုံကိုပြောင်းလဲလိမ့်မယ်သောအရေးအသားကုဒ်များအတွက်အများအပြားရွေးချယ်စရာရှိပါတယ်။

1. tag ကို attribute ကိုရေးပါ။
2. HTML code တွေဟာအတွက် CSS ကိုစတိုင်မှတဆင့်။
3. သီးခြားဖိုင်ထဲမှာ CSS ကိုစတိုင်များရေးပါ။

အဆိုပါ HTML မှာအဖြစ်နောက်ခံပုံလုပ်, သင်ဆုံးဖြတ်, ဒါပေမယ့်ကိုယ်ကအများဆုံးအကောင်းဆုံးဖြစ်လိမ့်မယ်ဘယ်လိုစကားအနည်းငယ်ပြောချင်ပါတယ်။ ပထမဦးဆုံးနည်းလမ်း attribute ကိုရှည်လျားပေါရာဏခဲ့တဲ့ tag ကိုတဆင့်ရေးသားခွငျးဖွစျသညျ။ ဒါဟာတူညီတဲ့ကုဒ်တွေအများကြီးထွက်လှည့်နေသောကြောင့်ဒုတိယ option ကိုအလွန်ခဲကိုအသုံးပြုသည်။ တစ်ဦးကတတိယ option ကိုအသုံးအများဆုံးနှင့်ထိရောက်သောဖြစ်ပါတယ်။ ဒီနေရာတွင်က HTML tags များ၏နမူနာနေသောခေါင်းစဉ်:

1. index.htm ဖိုင်ထဲမှာ tag ကို attribute ကို (ခန္ဓာကိုယ်) မှတဆင့်ပထမဦးဆုံးမှတ်တမ်းတင်နည်းလမ်း။ ဒါဟာဤပုံစံထဲမှာသိမ်းထားတဲ့ဖြစ်ပါတယ်: (ခန္ဓာကိုယ်နောက်ခံ = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ ခန္ဓာကိုယ်) ။ (ခန္ဓာကိုယ်နောက်ခံ = "ပုံများ / Picture.jpg") ... (/ ခန္ဓာကိုယ်): ဒါကကျွန်တော်ခေါင်းစဉ်«ရုပ်ပုံ»နဲ့ extension JPG, ကြှနျုပျတို့«ပုံများ»အမည်ရှိဖိုလ်ဒါနဲ့ရုပ်ပုံရှိပါက, ထို့နောက် HTML ကို-code ကို entry ကိုဤကဲ့သို့သောကြည့်ရှုမည်ဖြစ်ပါသည် ။
2. ဒုတိယနည်းလမ်းတစ် CSS ကိုစတိုင်မှတ်တမ်းတင်ကပါဝင်ပတ်သက်ပေမယ့်နာမကို index.htm နှင့်တူညီသောဖိုင်၌ရေးထားလျက်ရှိ၏ဖြစ်ပါတယ်။ (ခန္ဓာကိုယ်စတိုင် = "background ကို: url ( '../ ပုံများ / Picture.jpg')") ။
3. အသံဖမ်း၏တတိယနည်းလမ်းနှစ်ခုဖိုင်တွေအတွက်လုပ်ဖြစ်ပါတယ်။ (ဦးခေါင်း) (link ကို rel = "stylesheet ကို" အမျိုးအစား = "စာသားကို / css" href = "http: // ရဲ့ site / ဆောင်းပါး / 193110 /% D0% 9F နာမတော်ကိုအမှီ ပြု. index.htm tag ကို (ဦးခေါင်း) နဲ့စာရွက်စာတမ်းထိုကဲ့သို့သောလိုင်းတိကျမ်းစာ၌လာသည်ကား % D1% 83% D1% 82% D1% 8C_% D0% BA ဘွဲ့ CSS_faylu ") (/ ဦးခေါင်း) ။ style.css စတိုင်ပြီးသားရေးဖို့ကိုခေါ်တစ်ဖိုင်ကို: body {background: url (ပုံများ / Picture.jpg ')} ။

နောက်ခံပုံရိပ်ဖြစ်စေခြင်းငှါ HTML မှာအဖြစ်ကျနော်တို့နားလည်ပါတယ်။ ယခုတွင်သင်သည်တစ်ခုလုံးကိုမျက်နှာပြင်၏အကျယ်ကိုဖြတ်ပြီး image ကိုဆန့်ဖို့ဘယ်လိုထွက်တွက်ဆဖို့လိုပါတယ်။

ပြတင်းပေါက်ရဲ့ width ဖို့နောက်ခံပုံဆန့်ရန်နည်းလမ်းများ

ကျနော်တို့ကရာခိုင်နှုန်း၏ပုံစံအတွက်ကျွန်တော်တို့ရဲ့မျက်နှာပြင်ကိုကိုယ်စားပြုသည်။ ဒါဟာမျက်နှာပြင်၏တပြင်လုံးကို width နဲ့အရှည် 100% × 100% ဖြစ်လိမ့်မည်ဟုထုတ်ပြန်သွားလေ၏။ ငါတို့သည်ဤအကျယ်ဖို့ image ကိုဆန့်ဖို့လိုအပ်ပါတယ်။ အဆိုပါမော်နီတာ၏တစ်ခုလုံးကို width နဲ့အရှည်ကျော် image ကိုဆန့်လတံ့သော image file ကိုမှတ်တမ်းတင် style.css လိုင်းပေါင်းထည့်ရန်။ က CSS ကိုစတိုင်ဟုကျမ်းစာလာသည်အတိုင်း? ဒါဟာရိုးရှင်းတဲ့င်!

ကိုယ်ခန္ဓာ

{

နောက်ခံ: url (ပုံများ / Picture.jpg ')

နောက်ခံ-size: 100%; / * ဒီ post * အများဆုံးခေတ်သစ် browser များအဘို့သင့်လျော်သည် /

}

ဒါကြောင့်ကျနော်တို့က screen ပေါ်မှာ html အတွက်ပုံနောက်ခံအောင်ဘယ်လိုထွက်နေသေးတယ်။ အဆိုပါ index.htm ဖိုင်ထဲတွင်မှတ်တမ်းတင်တဲ့နည်းလမ်းလည်းဖြစ်ပါတယ်။ ဒီနည်းလမ်းကိုသော်လည်းခြင်းနှင့်ခေတ်မမီတော့ပေမယ့်အခုမှစအဘို့အသိနဲ့နားလည်ရန်လိုအပ်ပေသည်။ အဆိုပါ tag ကို (ဦးခေါင်း) (စတိုင်) div {background-အရွယ်အစား: အဖုံး; } (/ စတိုင်) (/ ဦးခေါင်း), ဤမှတ်တမ်းကျနော်တို့က window ၏တစ်ခုလုံးကို width ကိုကျော် positioned ပါလိမ့်မည်သည့်နောက်ခံများအတွက်အထူးယူနစ်ခွဲဝေချထားပေးရန်ဆိုလိုသည်။ ကျနော်တို့ image ကိုခေတ်သစ် browser များမဆိုအတွက်မျက်နှာပြင်၏တစ်ခုလုံးကို width ကိုမှဆန့်ကြောင်းသို့မှသာတစ်ဦးနောက်ခံရုပ်ပုံ html site ကိုအောင်ဘယ်လိုနည်းလမ်းနှစ်ခုထည့်သွင်းစဉ်းစားပါပြီ။

သတ်မှတ်ထားတဲ့နောက်ခံအောင်လုပ်နည်း

သငျသညျအနာဂတျကို web အရင်းအမြစ်၏နောက်ခံအဖြစ်ပုံကိုအသုံးပြုရန်ဆုံးဖြတ်လျှင်, သင်ရုံကအရှည်အတွက်ဆန့်မဟုတ်ကြောင်းဒါကြောင့် fixed လုပ်ပုံကိုသိရန်လိုအပ်ပါသည်နှင့်ဗေဒအသွင်အပြင်ကိုလုယူခဲ့ပါဘူး။ ရိုးရှင်းစွာအသေးငယ်တဲ့အပွငျမှတ်ပုံတင်ရန် HTML code တွေဟာ အသုံးပြု. ။ သငျသညျနောက်ခံပြီးနောက်ထားသောစာပိုဒ်တိုများထည့်သွင်းဖို့ style.css file ဖို့လိုအပ်: url (ပုံများ / Picture.jpg ') fixed; fixed: အနေအထား - သို့မဟုတ်အစား semicolon သီးခြားလိုင်းပြီးနောက်ဆက်ပြောသည်။ ထို့ကြောင့်သင့်နောက်ခံပုံအား fixed လိမ့်မည်။ site ပေါ်တွင်အကြောင်းအရာ scrolling စဉ်အတွင်း, သင်ကစာသားလိုင်းများပြောင်းရွှေ့ဖြစ်ကြောင်းမြင်ရပါလိမ့်မည်, ဒါပေမယ့်နောက်ခံအရပျ၌ဆက်လက်တည်ရှိနေသည်။ ဒါကြောင့်သင်ကနည်းလမ်းများစွာအတွက်, html နောက်ခံပုံလုပ်ဖို့ဘယ်လိုသင်ယူခဲ့တယ်။

HTML မှာဇယားနှငျ့အလုပျလုပျ

စားပွဲနှင့်လုပ်ကွက်နှငျ့ရငျဆိုငျအတော်များများအတွေ့အကြုံက web developer များ, မကြာခဏ html ပုံရိပ်ကိုနောက်ခံစားပွဲပေါ်မှာအောင်ဘယ်လိုနားလည်ကြပါဘူး။ အားလုံးလိုပဲ အဖွဲ့များက HTML နဲ့ CSS စတိုင်များ, ဝဘ် programming language ကိုမျှမျှတတရိုးရှင်းပါသည်။ နှင့်ဤပြဿနာကိုဖြေရှင်းနည်းကုဒ်၏လိုင်းများတစ်စုံရေးသားဖို့ဖြစ်ပါတယ်။ အဆိုပါ tags များ (TR) နှင့် (td) ကညွှန်ပြသကဲ့သို့သင်တို့ပြီးသား, အသီးသီးအတန်းနှင့်ကော်လံ၏စားပွဲတစ်ခုရေးသားခြင်းဖြစ်ကြောင်းကိုသိရကြသင့်ပါတယ်။ နောက်ခံ = URL ကိုဓာတ်ပုံများကို: ပုံတစ်ပုံရဲ့ပုံစံအတွက် table ၏နောက်ခံအောင်ပြုလုပ် (TR) သို့မဟုတ် (td), အ tag ကို (စားပွဲ) ကိုပေါင်းထည့်ဖို့ရည်ညွှန်းပုံရိပ်ကိုရည်ညွှန်းနှင့်အတူရိုးရှင်းတဲ့ထားသောစာပိုဒ်တိုများလိုအပ်ပါသည်။ ရှင်းလင်းပြတ်သားမှုအတွက်ကျနော်တို့ဥပမာ၏စုံတွဲတစ်တွဲပေးပါ။

HTML ကိုဥပမာ: အစားနောက်ခံ၏ရုပ်ပုံနှင့်အတူဇယား

တစ်ဦး 2x3 စားပွဲပေါ်မှာ Draw ကဖိုင်တွဲထဲမှာသိမ်းထားတဲ့နောက်ခံပုံစေ "ပုံများ": (စားပွဲနောက်ခံ = "ပုံများ / 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) (/ စားပွဲပေါ်မှာ) ။ စောင့်ကြည့်ပြီးနောက်ကျွန်တော်နောက်ခံသာတပြင်လုံးကိုစားပွဲမှတ်ပုံတင်မဟုတ်, သောသူတို့အားဆဲလ်ထဲမှာပေါ်လာတဲ့မြင်နိုင်ပါသည်။

cross-browser ကိုလိုက်ဖက်မှု site ကို

cross-browser ကိုလိုက်ဖက်မှုကို web အရင်းအမြစ်ကဲ့သို့သောအရာရှိပါသည်။ ဒါဟာသင့်ရဲ့ site ကိုအညီအမျှကောင်းစွာကွဲပြားခြားနားသောအမျိုးအစားများနှင့် browser ဗားရှင်းထဲမှာဖော်ပြပါတယ်ဆိုလိုသည်။ ဒါဟာဖြစ်သင့် HTML code တွေဟာ တစ်ဦးလိုအပ်သော browser များစိတ်ကြိုက်ဖို့နဲ့ CSS ကိုစတိုင်များ။ ထိုမှတပါး, စမတ်ဖုန်းများများ၏ခေတ်မီခေတ်အတွက်များစွာသောကို web developer များက်ဘ်ဆိုက်များကိုဖန်တီးရန်ကြိုးစားနေကြပါတယ်နှင့်မိုဘိုင်းဗားရှင်းနှင့်ကွန်ပျူတာကြည့်ဘို့အဆင်ပြေအောင်။