05 දෘශ්ය නිර්මාණ මූලිකාංග (UI Basics)
අපගේ වෙබ් අඩවියේ සැකැස්ම (blueprint) දැන් සූදානම්. දැන් එයට වර්ණ සහ මෝස්තර එක් කර අලංකාර පෙනුමක් ලබා දීමට කාලයයි.
UI නිර්මාණයේ කුළුණු තුන
හොඳ User Interface (UI) එකක් පරිශීලකයාට ප්රියජනක අත්දැකීමක් ලබා දෙන අතර වෙබ් අඩවිය භාවිතා කිරීමට පහසු කරයි. මෙහිදී ප්රධාන අංග තුනක් ඉතා වැදගත් වේ.
පැහැය (Color)
වර්ණ මගින් හැඟීම් ඇති කළ හැකි අතර, පරිශීලකයාගේ අවධානය යොමු කිරීමට සහ වෙබ් අඩවියේ සන්නාමය (brand) හඳුන්වා දීමට උපකාරී වේ.
අකුරු (Typography)
පැහැදිලි, කියවීමට පහසු අකුරු වර්ග භාවිතා කිරීම අන්තර්ගතය තේරුම් ගැනීමට අත්යවශ්ය වේ. අකුරුවල ප්රමාණය සහ බර (bold) මගින් ධූරාවලිය (hierarchy) පෙන්විය හැක.
ඉඩ (Spacing)
මූලිකාංග (elements) අතර නිසි පරතරය තැබීමෙන් (padding, margin) වෙබ් පිටුව පිළිවෙලකට සහ කියවීමට පහසු එකක් බවට පත් කරයි.
ප්රායෝගික ක්රියාකාරකම: අපේ පිටුවට පෙනුමක් දෙමු
දැන් අපි මෙම මූලධර්ම අපගේ ව්යාපෘතියට CSS (Cascading Style Sheets) භාවිතයෙන් එක් කරමු. CSS යනු HTML මූලිකාංගවලට මෝස්තර (styles) ලබා දෙන භාෂාවයි.
උපදෙස්:
- ඔබේ
student-notes-v3.htmlගොනුව විවෘත කරන්න. - පහත දැක්වෙන කේතයේ අලුතින් එකතු කළ
<style>කොටස<head>ටැගය තුළට එක් කරන්න. - මීට අමතරව,
<body>ටැගය තුල<div class="container">නමින් නව කොටසක් එක් කර, සියලුම අන්තර්ගතය එය තුළට දමන්න. මෙය අන්තර්ගතය පිළිවෙලට තැබීමට උපකාරී වේ. - ගොනුව
student-notes-v4.htmlලෙස අලුතින් save කරන්න.
HTML කේතය:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Notes</title>
<!-- Basic Styling -->
<style>
body {
font-family: Arial, sans-serif; /* A clean font */
background-color: #f4f4f9; /* Light gray background */
color: #333; /* Dark gray text for readability */
}
.container {
padding: 20px; /* Add some space around the content */
max-width: 800px;
margin: auto;
}
button {
background-color: #007bff; /* Blue button */
color: white; /* White text on button */
border: none;
padding: 10px 15px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<nav>
<a href="#">Home</a> |
<a href="#">Notes</a> |
<a href="#">About</a>
</nav>
<hr>
<h1>Welcome to Student Notes Website</h1>
<p>A simple place to store your notes online.</p>
<button>Login</button>
</div>
</body>
</html>
නව පිටපත (New Output):
දැන් ඔබේ වෙබ් පිටුව වඩාත් පිළිවෙලකට සහ වර්ණවත් ලෙස දිස්වනු ඇත!
Welcome to Student Notes Website
A simple place to store your notes online.