|
רשימת פרומים |
| הנדסת מערכות | | ניתוח אפיון ועיצוב מערכות מידע | | טכנולוגיות אינטרנט | | ניהול פרויקטים מערכתי | | עבודות סטודנטים באנליטיקה זמן-אמת |
|
03 פרק שלישי - טבלאות |
 גדעון קוך
|
| טבלאות הם הבסיס למבנה דף אינטרנטי.
להלן קיימים אפשרויות עיצוב רבות לטבלאות הכוללות: רוחב קבוע ואחוז, צבע רקע, גבולות, מרווח ועוד.
בעת תכנון הדף מומלץ לבצע חלוקה ל -12 עמודות ומהן לצרף כמה עמודות ולספק תצוגה מיטבית.
לא מומלץ להקצות עמודה צרה מ-1/12 מרוחב הדף.
בניידים מומלץ לא לחלק כלל בגלל רוחב התצוגה.
להלן דוגמא המכילה:
כותרת עילית
תפריט בצד שמאל
תוכן המידע בחלק הימני הגדול של הדף
הדף מכיל כותרת, וטבלה בסיסית.
בדף עיצוב CSS וכן קוד ב-JavaScript
בכותרת קיימות הפניות לדפים אחרים
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.header { background-image: linear-gradient(to bottom, blue, white); }
</style>
<script>
function randString(len)
{
let s = '';
while (s.length < len)
s += Math.random().toString(36).substr(2, len - s.length);
return s;
}
function add_dada(lines,len)
{
var str = "";
for(l=0; l<lines ; l++) {
str += randString(len)+"<br>";
}
return str;
}
</script>
</head>
<body>
<table style="width: 100%; text-align:center">
<tr>
<td>GK10 Home Page</td>
<td><h1>Basic Page</h1></td>
<td><a href="https://www.gideonkoch.com">About Me</a></td>
</tr>
</table>
<br>
<table align="center" style="width:80%">
<tr>
<td id="menu"
style="width:200px; height:80vh; vertical-align:top; padding:10px;
background-image: linear-gradient( to right, #EEE, white);
border-radius:20px 0px 0px 20px">
List of items
</td>
<td id="data"
style="padding:10px; border:thin #FFF solid;
border-color: #999 #999 #999 #FFF;
border-radius:0px 20px 20px 0px;">
Data to show
</td>
</tr>
</table>
<script>
document.getElementById("menu").innerHTML = add_dada(20,15);
document.getElementById("data").innerHTML = add_dada(50,20);
</script>
</body>
</html>
לקורס נדרשים כמה כלים להלן המלצות שלי לכלים חינמיים מצוינים:
| | מערכת חינמית תואמת VISIO
| | | אתר לטיפול בתמונות לאתרים | |
|
|
| הגדרת טבלאות |
גדעון קוך
|
| דוגמאות לטבלאות בתצורות שונות (תחילה הדוגמאות ולאחריהן המקור)
מקור הדף
מידע זה גלוי לרשומים בלבד. להרשמה לחץ כאן.
|
|
|
| בסיס לדף הבית של אתר |
גדעון קוך
|
| אנחנו מבחינים בין דף נחית - לורב לינק לפרוסם של האתר שלנו הכולל פעולה אחת בלבד, לבין דף הבית הכולל מגוון רחב של קישורים לאתרים שונים.
דף הבית יכלול לרוב:
כותר
תפריט מאוזן לפעילויות ראשיות
תפריט משני אנכי, בצד ימין של המסך לפעיליות בתחום זה.
שדה פעילות ראשי
כותרת תחתית
|
|
|
|