עזרה:שכבות
מתוך ויקיפדיה, האנציקלופדיה החופשית
הערך נמצא בשלבי עריכה הנכם מתבקשים שלא לערוך ערך זה בטרם תוסר הודעה זו כדי למנוע התנגשויות עריכה. שימו לב! אם דף זה לא נערך במשך שבוע, רשאי כל ויקיפד להסיר את התבנית ולהמשיך לערוך אותו. |
ויקיפדיה תומכת בשכבות (תגי div). שכבות הן מעין חלוניות עצמאיות המסוגלות להכיל מידע. קל לראות בהן מעין טבלה עם תא יחיד. יתרונן על פני הטבלאות הם בניידותן וגמישותן: ניתן למקם אותן בכל מקום בעמוד ולעצב אותן בעיצובים שונים ומגוונים; ניתן ליצור שכבות מקוננות, שאחת מכילה את האחרת; ניתן ליצור שכבות בתוך טבלאות, טבלאות בתוך שכבות. בוויקיפדיה נהוג להשתמש בשכבות ליצירת רשימות ניווט, ליצירת הודעות מערכת, ליצירת תיבות מידע, ליישור מידע לשמאל וליצירת פורטלים. בעבר היה נהוג להשתמש בשכבות בעת בניית גרפים, ואולם כיום עדיף להתשמש בתגי timeline; ראו כאן מידע נוסף.
אולי מחר... |
תוכן עניינים |
[עריכה] תחביר
השכבה נבנית באמצעות שני תגי HTML:
- <div> - תג הפתיחה
- </div> - תג הסגירה
עיצוב ומיקום השכבה נעשית באצעות הגדרת מאפיינים ותכונות בתוך התג הראשון. התכונות העיקריות הן id ,class ו-style, לדוגמה:
- <div id="toc">
- <div class="usermessage">
- <div style="background-color: green;">
[עריכה] מאפיינים
תיאור | תכונה | מאפיינים | ברירת מחדל | הערות |
---|---|---|---|---|
ראות | visibility | מוסתר - hidden נראה - visible |
visible | אין |
רוחב שכבה | width | auto או אחוזים או יחידות מידה | auto | אין |
גובה שכבה | height | auto או אחוזים או יחידות מידה | auto | אין |
גלישה | overflow | אוטומטית - auto | משמש ליצירה של סרגלי גלילה | |
גופן | font | סגנון, גודל, שם | לפי הדפדפן | לדוגמה: italic normal bolder 12pt Arial |
ישור טקסט | text-align | שמאל - left ימין - right מרכז - center מיושר לשני הצדדים - justify |
right | אין |
גובה שורה | line-height | אחוזים או יחידות מידה | normal | אין |
מסגרת | border | רוחב, סגנון, צבע | אין מסגרת | לדוגמה: 3px solid green. ניתן להוסיף מקף וצד כלשהוא (כגון left) לשם התכונה כדי להגדיר מסגרת של צד אחד בלבד. |
סגנון מסגרת | border-style | ללא - none מקווקו - dashed מנוקד - dotted קשיח - solid שני קווים - double (לפחות 3px רוחב) |
none | אין |
צבע מסגרת | border-color | צבע | white | אין |
שוליים | margin | יחידות מידה או auto | 0 | התכונה מקבלת עד ארבעה מאפיינים: שוליים עליונים, ימניים, תחתונים ושמאליים - בסדר הזה. לדוגמה, 4px 7px 4px 7px. אם רק מאפיין אחד ניתן, הוא משמש לקביעת כל הצדדים. לדוגמה: 0.5em. ניתן להוסיף מקף וצד כלשהוא (כגון left) לשם התכונה כדי להגדיר שוליים של צד אחד בלבד. |
מרווח | padding | אחוזים או יחידות מידה | 0 (ברירת המחדל של טבלה היא 1) | התכונה מקבלת עד ארבעה מאפיינים: מרווח עליון, ימני, תחתון ושמאלי - בסדר הזה. לדוגמה, 4px 7px 4px 7px. אם רק מאפיין אחד ניתן, הוא משמש לקביעת כל הצדדים. לדוגמה: 0.5em. ניתן להוסיף מקף וצד כלשהוא (כגון left) לשם התכונה כדי להגדיר מרווח של צד אחד בלבד. |
כיוון כתיבת טקסט בשכבה | dir | ימין לשמאל - rtl שמאל לימין - ltr |
rtl | אין |
עמדה | position | ללא מיקום מיוחד - static מיקום יחסי - relative מיקום מוחלט - absolute |
statis | במידה שמיקומו יחסי, ניתן להצמיד רק לימין או לשמאל, בתוך שורת הטקסט, עם התכונה float. במידה שמיקומו מוחלט, ניתן למקמם את השכבה בכל מיקום שיקבע בעמוד באמצעות התכונות left ו-top, אולם השכבה תצוף מעל לטקסט. |
כיוון ציפה של כל השכבה | float | ימין - right שמאל - left |
right | למרכוז לאמצע ישל השתמש בתכונה margin ובמאפיין auto |
שמאל | left | auto או אחוזים או יחידות מידה | auto | המרחק מהשול השמאלי של הדף. יש להשתמש בתכונה זו רק בעת השימוש בתכונה position |
עליון | top | auto או אחוזים או יחידות מידה | auto | המרחק מהשול העליון של הדף. יש להשתמש בתכונה זו רק בעת השימוש בתכונה position |
צבע רקע | background-color | צבע | white | אין |
[עריכה] סגנונות מובנות (id ,class)
[עריכה] סגנונות
לויקיפדיה הגדרת סגנונות שכבה, בעמוד מערכת מיוחד, כך שלא צריך כל פעם להגדיר את כל השכבה.
דוגמא לסגנון כזה הוא סגנון toc שמקביל להגדרה: div style="border:1px solid #aaaaaa; background-color:#f9f9f9; padding:5px; font-size: 95% ;"
שם | תוצאה | כתיבה | הערה |
class=toccolours |
טקסט טקסט טקסט טקסט טקסט |
<div class="toccolours"> טקסט טקסט טקסט טקסט טקסט </div> |
|
class=usermessage | <div class="usermessage"> טקסט טקסט טקסט טקסט טקסט </div> | שונה קצת, משום שזהו class ולא id. אבל אין הבדל בדרך שבה צריך להשתמש. לקוח מתוך ההודעה "יש לך הודעות חדשות.." | |
id=footer | <div id="footer"> טקסט טקסט טקסט טקסט טקסט </div> | השורה בתחתית כל דף עם הקישורים "אודות ויקיפדיה", "הבהרה משפטית" וכד' | |
class=pBody |
טקסט טקסט טקסט טקסט טקסט טקסט |
<div class="pBody"> טקסט טקסט טקסט טקסט טקסט טקסט </div> | זהו class ולא id אבל אין הבדל בדרך שבה צריך להשתמש. לקוח מתוך תיבת הניווט בצד ימין. |
[עריכה] דוגמאות
הסבר | קוד | תוצאה | ||||||
יישור לשמאל |
<div dir=ltr align=left>
</div> |
|
||||||
המטרה בדוגמה זו ליצור שכבה פשוטה בעלת גבול מקווקו שתהיה צמודה לשמאל | <div style="width: 121px; height: 121px; border: 1px dashed blue; float: right" > ניסיון</div> |
ניסיון
|
||||||
זרימת טקסט מסביב לשכבה | אחת שתיים שלוש אני אחשוורוש <div id="layer1" style="width:141px; height: 141px; border: 1px dashed blue; float: left" > ניסיון</div> ארבע חמש שש אני מלכת אסתר | אחת שתיים שלוש אני אחשוורוש
ניסיון
ארבע חמש שש אני מלכת אסתר |
||||||
המטרה בדוגמה זו ליצור שכבה בגודל של רבע תא ברקע אפור שתהיה צמודה לימין | <div id="layer2" style="width:50%; height: 50%; border: 3px dashed blue; float: right; background-color: #808080" > ניסיון</div> |
ניסיון
|
||||||
שימוש בשכבה במיקום מוחלט, באמצעות position: absolute; אפשר להגיע בשיטה כזו לכל מקום בעמוד. | <div id="layer3" style="position: absolute; width: 50%; height: 60px; border: 1px dashed blue; " > ניסיון</div> |
ניסיון
|
||||||
תמונת רקע בתוך השכבה (משום מה לא עובר קומפילציה של ויקיפדיה) | <div style="position: absolute; right: 547px; top: 19px; width: 246px; height: 154px; z-index: 2; background-image: url('http://upload.wikimedia.org/wikipedia/he/4/42/Inbal-workshop.jpg'); background-position: left center" id="layer2"> </div> |
|
||||||
הוספת סרגל גלילה באמצעות תכונת - overflow | <div style="border: 1px dashed blue; height: 100px; width: 141px; overflow: auto"> http://upload.wikimedia.org/wikipedia/he/4/42/Inbal-workshop.jpg מי יודע מדוע ולמה לובשת הזברה פיג'מה מי יודע מדוע ולמה לובשת הזברה פיג'מה;</div> |
http://upload.wikimedia.org/wikipedia/he/4/42/Inbal-workshop.jpg מי יודע מדוע ולמה לובשת הזברה פיג'מה מי יודע מדוע ולמה לובשת הזברה פיג'מה;
|
||||||
גרפים - שימוש בשכבות שמייצגות גרפים בתוך טבלת ויקי | {| border="1" align="center" |- valign="bottom" align="center" | <div style="border-style:outset; height: 25px; width: 41px; right: 656px; top: 109px; background-color: #6699FF" > <p align="center"> 47</p> </div> | <div style="height: 114px; border-style:outset; border-width:5px; width: 41px; right: 424px; top: 46px; background-color: #00CC99" > <p align="center"> 214</p> </div> | <div style="height: 51px; border-style:outset; width: 41px; right: 540px; top: 112px; background-color: #008080; padding-left:-5px" > <p align="center"> 97</p> </div> |- | 2000 | 2001 | 2002 |- |} |
|
||||||
גרף אנכי - שימוש מקונן - שלוש שכבות שתוך שכבה אחת | <div> <div style="border-style:outset; height: 25px; width: 41px; right: 656px; top: 109px; background-color: #6699FF" > <p align="center"> 47</p> </div> <div style="height: 25px; border-style:outset; border-width:5px; width: 147px; right: 424px; top: 46px; background-color: #00CC99" > <p align="center"> 214</p> </div> <div style="height: 25px; border-style:outset; width: 74px; right: 540px; top: 112px; background-color: #008080" > <p align="center"> 97</p> </div> </div> |
47 214 97 |
||||||
טבלה בתוך שכבה | <div style="height: 25px; border-style:outset; width: 74px; right: 540px; top: 112px; background-color: #008080" > <p align="center"> {| border=1 | שנת 2000 | שנת 2001 | שנת 2002 |} |
|
||||||
גרף בתוך שכבה; יתרונו שגובה העמודים כתוב באחוזים | <div style="border-width:3px; border-style:double; width: 140px; height: 185px; right: 600px; top: 68px; float:left; background-color:#C0C0C0"> <div style="height: 47%; border-style:outset; background-color: #6699FF; float:left" > <p align="center"> 47</p> </div> <div style="height: 88%; border-style:outset; background-color: #00CC99; float:left" > <p align="center"> 88</p> </div> <div style="height: 97%; border-style:outset; background-color: #008080; float:left" > <p align="center"> 97</p> </div> <div style="height: 50%; border-style:outset; background-color: #FFCC99; float:left" > <p align="center"> 50</p> </div> <div style="height: 33%; border-style:outset; background-color: #4186BE; float:left" > <p align="center"> 33</p> </div> </div> |
47 88 97 50 33 |
[עריכה] דוגמה לגרפים בוויקיפדיה
כותרת הגרף | |||||
47 |
207 |
452 |
214 |
97 |
|
שנת 2000 | שנת 2001 | שנת 2002 | שנת 2003 | שנת 2004 | מספר |
[עריכה] דוגמה לתצוגת ערך בשכבה נגללת
הערך ענת מופיע בשלמותו בחלונית ו"נשאב" באמצעות התצורה הבאה: {{:ענת}}
במיתולוגיה הכנענית ובפרט בלוחות אוגרית, מסופר שהיא בתו של אל ואחותו הנאמנה של בעל - אל הסופה והגשם. כונתה גם "בתולת" משום שהיא אלה אוטונומית וראשונית שאין עליה עול גבר, ו"יבמת לאומים", כנראה מלשון יבום (=יולדת לאומים? אם לאומים? אחות לאומים?). בנוסף נמצא הכינוי "נעמת בן אחת הבעל" (=הנעימה בין אחיות הבעל). התואר "נעימה" מוזכר מספר פעמים ולא ברור אם הוא במשמעות של יופי חיצוני או נועם. באסטלה מתקופה זו היא נראת יושבת על כסא, ומחזיקה בידיה כלי נשק.
עוד היא מתוארת כאישה בעלת מאפיינים גבריים, שרוחצת בדם האנשים שמתנגדים לפולחן בעל, מבלי להניד עפעף. עוצמתה גדולה יותר משל בעל, והיא זו שעוזרת לו להלחם כנגד האל ים והמפלצות שלו: לחסום את פי התנין האיום ולהכות את נחש העקלתון בעל שבעה הראשים, להילחם כנגד האל מות שהצליח לשבות את האל בעל בשאול, להמית אותו ולשחרר לחופשי את בעל. כוח ההרס העצום שלה מופנה לעזרת כוח החיים של האל בעל ולהצלתו מידי אויביו האלים ובני האדם כאחד. כך היא תולה את כפות ידיהם של האנשים על חגורתה ומשחקת בראשיהם כבכדורים. היא אף מעזה להתחצף לאביה אל, בעל הסמכות העליונה, ולאיים עליו שתמרוט את שער קדקודו ותוריד שיבתו בדם שאולה, אם לא יתמוך בכינון מלכותו של אחיה בעל, כאשר הוא נחבא מפניה בשבעה חדרים ובשמונה מנעולים.
במקדש מצרי בבית שאן התגלתה מצבה מימי רעמסס השני, שבו היא מתוארת כמלכת השמים (תואר שהיה שמור לעשתורת) ובעלת כל האלים. בספר שופטים (פרק א' פסוק ל"ג) מוזכר שאת היישוב שבו עבדו לה, בית ענת, לא יכלו אנשי שבט נפתלי לכבוש. יישוב נוסף שאנשיו עבדו לה היה בית ענות בנחלת יהודה. גם השופט שמגר בן ענת קשור אליה ככל הנראה; הרב מ"ד קאסוטו טוען שבא מהעיירה בית ענת. מעניין שאף שנראה שענת הייתה אלה חזקה ודומיננטית, בתנ"ך אין כלל התייחסות לה או לפולחנה.
[עריכה] לקריאה נוספת
- הרב משה דוד קאסוטו, האלה ענת