පින්තූරයක් වටා පෙළෙහි හැඩ ගන්නේ කෙසේද?

ඕනෑම වෙබ් පිටුවක් බැලීමට සහ පෙළ අන්තර්ගතයන් සහ අනුරූපවල එකතුවකි. මෙම මූලද්රව්ය දෙකම වෙබ් අඩවියක සාර්ථකත්වයෙහි අත්යවශ්ය අමුද්රව්යයන් වේ. පාඨමය අන්තර්ගතය යනු වෙබ් අඩවියේ නරඹන්නන් කියවනු ලබන්නේ ඔවුන්ගේ ශ්රේණිගත ඇල්ගොරිතම වල කොටසක් ලෙස භාවිතා කරන සෙවුම් යන්ත්ර මොනවද යන්නයි. පින්තූර මගින් වෙබ් අඩවියට දෘශ්ය නැරඹුම් සහ පෙළ අන්තර්ගතයන් වැඩිදියුණු කිරීමට උදව් වනු ඇත.

වෙබ් අඩවි වලට පෙළ හා පින්තූර එකතු කිරීම පහසුය. ඡේදයන්, ශීර්ෂයන් සහ ලැයිස්තු වැනි සම්මත HTML ටැග් වලින් පාඨය එකතු කර ඇත, රූපයන් මූලද්රව්යය සමඟ පිටුවක තබා ඇත. කෙසේ වෙතත් ඔබ ඔබේ වෙබ් පිටුවට රූපයක් එකතු කළ පසු, ඔබට පහත රූපයේ අනුපිළිවෙලට වඩා ගැලපෙන පරිදි පෙළ ගලා යෑමට ඔබට අවශ්ය වනු ඇත. (මෙය ප්රකෘති ආකාරයේ HTML කේතයකට එකතු කරන ලද රූපය බ්රව්සරයේ ය.) තාක්ෂණික වශයෙන්, ඔබට මෙම පෙනුම ලබා ගත හැකි ක්රම දෙකක් තිබේ, CSS (නිර්දේශ) හෝ දෘශ්ය උපදෙස් කෙලින්ම HTML බවට එකතු කිරීමෙන් (ඔබ නිර්දේශ නොකරයි, ඔබේ වෙබ් අඩවිය සඳහා ශෛලිය හා ව්යුහය වෙන් කිරීම පවත්වා ගැනීමට අවශ්ය බැවින්).

CSS භාවිතා කිරීම

පිටුවෙහි පෙළ සහ පින්තූර සැකැස්ම ආකාරය සහ ඔවුන්ගේ දෘෂ්ය විලාසයන් බ්රවුසරයේ දිස්වන ආකාරය වෙනස් කිරීම සඳහා නිවැරදි ක්රමයක් වන්නේ CSS වේ. හුදෙක් මතක තබා ගන්න, අප පිටුවෙහි දෘශ්ය වෙනස්වීම ගැන කතා කරන බැවින් (පින්තූරය වටා පෙළ ප්රවාහයක් සෑදීම), මෙය කස්කෑඩින් ස්ටයිල් ෂීට් වසමයි.

1. පළමුව ඔබේ වෙබ් අඩවියට ඔබගේ වෙබ් පිටුවට එකතු කරන්න. කිසියම් දෘශ්ය ලක්ෂණ (පළල සහ උස අගයන් වැනි) ඉවත් කිරීම මතක තබා ගන්න. මෙය විශේෂයෙන් වැදගත් වන්නේ, විශේෂයෙන්ම වෙබ් අඩවිවල ප්රමාණය අනුව වෙනස් වන වෙබ් අඩවි වල වෙනස්වන වෙබ් අඩවියයි . Adobe Dreamweaver වැනි සමහර මෘදුකාංග, එම මෙවලම සමඟ ඇතුළත් කරන ලද අනුරූ සඳහා පළල සහ උස තොරතුරු එකතු කරනු ඇත, එම නිසා මෙම කේතය HTML කේතයෙන් ඉවත් කිරීමට වග බලා ගන්න! කෙසේ වෙතත්, සුදුසු අක්ෂර පෙළ ඇතුළත් කිරීමට වග බලා ගන්න. ඔබගේ HTML කේත දෙස බලන ආකාරය පිළිබඳ උදාහරණයක් මෙන්න:
2. ආලේපන අරමුණු සඳහා, ඔබට අනුරූපයකට පන්තියට එක් කළ හැකිය. මෙම පන්ති වටිනාකම අපගේ CSS ගොනුවේ භාවිතා කරනු ඇත. මෙහිදී අප භාවිතා කරන අගය අත්තනෝමතික බව සලකන්න. මෙම විශේෂිත ශෛලිය සඳහා අපි අපගේ "වමේ" හෝ "හරි" අගයන් භාවිතා කිරීමට උත්සාහ කරමු. ඒ සරල අනුවාදය හොදින් ක්රියාත්මක වන අතර අනාගතයේදී වෙබ් අඩවි කළමණාකරණය කළ යුතු වෙනත් අයට පහසු විය හැකි නමුත් ඔබට අවශ්ය ඕනෑම පන්ති වටිනාකමක් ලබා දිය හැකිය.
   2. තනිවම, මෙම පන්ති වටිනාකම කිසිවක් නොකරනු ඇත. පින්තූරය ස්වයංක්රීයවම වමේ සිට වම් පැත්තට තැබිය නොහැක. මේ සඳහා, දැන් අපේ CSS ගොනුව වෙත හැරිය යුතුයි.

1. ඔබගේ වර්ණ විලාසය තුළ, ඔබට දැන් පහත දැක්වෙන ශෛලිය එකතු කළ හැකිය:
   1. .left {
   2. float: වම්;
   3. padding: 0 20px 20px 0;
   4. }}
   5. මෙහිදී ඔබ සිදු කළ දේ CSS "float" දේපල භාවිතා කරන අතර, සාමාන්යයෙන් ලේඛන ප්රවාහයෙන් රූපය අඳිනු ලැබේ (එම රූපය සාමාන්යයෙන් පෙන්වනු ඇති ආකාරයට, පෙළට අනුව එය පෙළගස්වනු ඇත) එය එහි බහාලු වම් පැත්තට තැබිය හැක . දැන් එය HTML වටයාපේ පසුව එන පාඨය එය වටා එති. මෙම පිටපතේ රූපය කෙරෙහි සෘජුව එල්ල නොවනු ඇත. ඒ වෙනුවට, එය පිටු නිර්මාණයේ දෘශ්යමය ලෙස ආකර්ෂණීය වන අතර එය ඉතා හොඳ පරතරයක් ඇත. පැසවීම සඳහා CSS ක්රමවේදයේ දී, රූපයේ ඉහළ හා වම් පැත්තට 0 ක්, වම් සහ පහළට පික්සල් 20 ක් එකතු කළෙමු. මතක තබා ගන්න, ඔබ වම් පැත්තක පෙළෙහි දකුණු පස ඇති සමහර පැකැට්ටුවක් එක් කිරීමට අවශ්යය. නිවැරදි අනුපිළිවෙලක් ඇති රූපයක් (අපි මොහොතක් දෙස බලනු ඇත) එහි වම් පැත්තට ආවරණ භාවිතා කරනු ඇත.
2. ඔබ ඔබේ වෙබ්පිටුව බ්රව්සරයේ බැලුවේ නම්, ඔබේ රූපය වම් පැත්තට පෙළගස්වා ඇති බව දැන් ඔබට දැනගත යුතු අතර එය වටා පෙළට සරිලන පරිදි පෙළ ගැසී ඇත. මේ ආකාරයෙන් කියන්නට තවත් ක්රමයක් වන්නේ රූපය "වමට පාවෙන" බවයි.

1. ඔබට මෙම පින්තූරය වෙනස් කිරීමට අවශ්ය නම් (මෙම ලිපිය සමඟ බැඳුණු ඡායාරූප නිදසුනේ මෙන්) එය සරල වනු ඇත. පළමුව, ඔබ "වමේ" පන්ති වටිනාකම සඳහා අපගේ CSS වෙත පමණක් එකතු කළ විලාසිතාවට අමතරව, අපට දකුණ පැත්තක් සඳහා එකක් ඇත. එය මෙලෙස දිස්වනු ඇත:
   1. .මම {
   2. float: හරි;
   3. padding: 0 0 20px 20px;
   4. }}
   5. අප විසින් ලියන ලද පළමු CSS වෙත මෙය සමාන බව ඔබට පෙනේ. එකම වෙනස වන්නේ "float" දේපල සඳහා අප භාවිතා කරන අගය සහ අප භාවිතා කරන වැසුම් අගයන් (අපගේ දකුණු රූපය වෙනුවට වම් පැත්තට එකතු කිරීම) පමණි.
2. අවසාන වශයෙන්, ඔබ ඔබගේ HTML හි "වමේ" සිට "හරි" සිට රූපයේ පංතියේ අගය වෙනස් කරනු ඇත:
3. දැන් ඔබගේ බ්රවුසරයේ ඔබගේ පිටුව දෙස බලන්න. ඔබේ පින්තූරය පිළිවෙලට පෙළ ගැසී ඇති අතර එමඟින් ඔබේ පින්තූරය නිවැරදි කර තැබිය යුතුය. අප අපගේ වෙබ් පිටු නිර්මාණය කිරීමේදී අවශ්ය වන පරිදි මෙම දෘශ්ය විලාසයන් භාවිතා කළ හැකි බැවින්, අපගේ සියලු විලාසිතාවලට "වමේ" සහ "හරි" මෙම විලාසිතා දෙක එක් කිරීමට අපි නැඹුරු වෙමු. මෙම ස්ලයිඩ දෙක අලංකාර වන අතර, ඒවා අවට පාඨ රාමුව තුළ පින්තූර විලාසනය කිරීමට අවශ්ය වන අවස්ථාවන්ට හැරවිය හැකිය.

CSS වෙනුවට HTML භාවිතා කිරීම (සහ මෙය ඔබ මෙය නොකළ යුත්තේ)

HTML සමඟ රූපයක් වටා පෙළක් හැදීමට හැකි වුවද, වෙබ් ප්රමිතීන් අනුව CSS (සහ ඉහත දැක්වෙන පියවරයන්) යනු ව්යුහය (HTML) සහ ශෛලිය (CSS) වෙන් කිරීමක් පවත්වා ගැනීම සඳහා වන මාර්ගයයි. සමහරක් උපාංගයන් සහ සැකසුම් සඳහා ඔබ සලකන විට එම රූපය අවට ප්රවාහය අවශ්ය නොවේ යැයි ඔබ සලකන විට මෙය විශේෂයෙන් වැදගත් වේ. කුඩා තිර සඳහා, ප්රතිචාරාත්මක වෙබ් අඩවියේ පිරිසැලසුමක් අවශ්යය නම් එම පින්තූරය ඇත්ත වශයෙන්ම පින්තූරයට පහළින් පෙළට ගැලපෙන අතර රූපය තිරයේ සම්පූර්ණ පළල දක්වා විහිදේවා. ඔබගේ මෝස්තරය ඔබගේ HTML සලකුණු වලින් වෙන් කර තිබේ නම් මාධ්ය විමසුම් සමඟ මෙය පහසුවෙන් කළ හැකිය. වර්තමාන බහු-උපකරණය ලොවෙහි, විවිධාකාර නරඹන්නන් සහ විවිධ තිරයන් සඳහා රූප සහ පෙළ වෙනස් ලෙස පෙනෙන අතර, මෙම වෙන්වීම දිගු කාලීන සාර්ථකත්වය හා වෙබ් පිටුවක කළමනාකරණය අත්යවශ්ය වේ.