מדריך למשתמש ביטול

אודות שימוש ב- CSS לפריסת דף

חפש

עודכן לאחרונה בתאריך 20 במאי 2021

למד להכיר את המבנה הבסיסי של פריסת CSS, ולמד כיצד לעצב דפים ותוכן באמצעות CSS ב-Dreamweaver.

אודות פריסת עמודי CSS

פריסת עמוד CSS משתמשת בתבנית CSS ולא בטבלאות או במסגרות HTML מסורתיות, כדי לארגן תוכן בעמוד אינטרנט. אבן הבניין הבסיסית של פריסת CSS היא התג div – תג HTML שברוב המקרים פועל כמיכל לטקסט, תמונות ושאר רכיבי דף. בשעת יצירת פריסת CSS, ממקמים תגי div בדף, מוסיפים להם תוכן וממקמים אותם במקומות שונים. שלא כמו תאי טבלה, החייבים להופיע במקום כלשהו בשורות או בעמודות בטבלה, תגי div יכולים להופיע בכל מקום בדף אינטרנט. ניתן להציב תגי div בצורה מוחלטת (על-ידי ציון קואורדינטות x ו-y) או בצורה יחסית (על-ידי ציון המיקום שלהם ביחס למיקום הנוכחי). ניתן גם למקם תגי div על-ידי ציון ערכי ציפה, ריווח ושוליים - השיטה המקובלת באינטרנט של ימינו.

אודות מבנה של פריסת דפי CSS

לפני שתמשיך בסעיף זה, עליך להבין מספר מושגי CSS בסיסיים.

אבן הבניין הבסיסית של פריסת CSS היא התג div – תג HTML שברוב המקרים פועל כמיכל לטקסט, תמונות ושאר רכיבי דף. הדוגמה הבאה מציגה דף HTML הכולל שלושה תגי div נפרדים: תג "מיכל" גדול, ושני תגים נוספים – תג סרגל צד ותג תוכן ראשי – בתוך תג המיכל.

A. תג div של מיכל B. תג div של סרגל צד C. תג div של תוכן ראשי

להלן הקוד לכל שלושת תגי div אלה ב-HTML:

<!--container div tag--> 
<div id="container"> 
<!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     
<!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div>

בדוגמה שלעיל, לא קושר סגנון כלשהו לאף אחד מתגי div אלה. ללא כללי CSS שהוגדרו, כל תג div והתוכן שלו מוצגים במיקום ברירת המחדל בדף. עם זאת, אם כל תג div כולל מזהה ייחודי (כמו בדוגמה שלעיל), ניתן להשתמש במזהים כדי ליצור כללי CSS שכאשר הם מוחלים, ישנו את הסגנון והמיקום של תגי div.

כלל CSS הבא, היכול להימצא בכותרת המסמך או בקובץ CSS חיצוני, יוצר כללי סגנון לתג div הראשון, או לתג "המיכל" בעמוד:

#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
}

הכלל ‎#container קובע שתג div של המיכל יהיה ברוחב 780 פיקסלים, רקע לבן, ללא שוליים (מצד שמאל של העמוד), גבול אחיד בעובי פיקסל אחד בצבע שחור וטקסט המיושר שמאלה. תוצאות החלת הכלל על תג div של המיכל יהיו:

A. טקסט מיושר שמאלה B. רקע לבן C. גבול אחיד בעובי פיקסל אחד בצבע שחור

כלל CSS הבא יוצר כללי סגנון לתג div של סרגל הצד:

#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
}

הכלל ‎#sidebar יוצר תג div של סרגל צד ברוחב 200 פיקסלים, רקע אפור, ריווח למעלה ולמטה של 15 פיקסלים, ריווח מימין של 10 פיקסלים, וריווח משמאל של 20 פיקסלים. ‏(סדר הריווח של ברירת המחדל הוא למעלה-ימין-למטה-שמאל). בנוסף, הכלל ממקם את תג div של סרגל הצד עם נקודה צפה: שמאל – מאפיין הדוחף את תג div של סרגל הצד לצד שמאל של תג div של המיכל. תוצאות החלת הכלל על תג div של סרגל הצד יהיו:

A. רוחב של 200 פיקסלים B. ריווח למעלה ולמטה של 15 פיקסלים

ולבסוף, כלל CSS לתג div של התוכן הראשי מסיים את הפריסה:

#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
}

הכלל ‎#mainContent קובע את תג div של התוכן עם שוליים שמאליים של 250 פיקסלים, כלומר הוא ממקם 250 פיקסלים של רווח בין צד שמאל של תג div של המיכל לצד שמאל של תג div של התוכן הראשי. בנוסף, הכלל מספק 20 פיקסלים של רווח מצד ימין, למעלה, למטה ומצד שמאל של תג div של התוכן הראשי. תוצאות החלת הכלל על תג div של התוכן הראשי יהיו:

הקוד המלא ייראה כך:

תג div של תוכן ראשי, שוליים שמאליים של 250 פיקסלים

A. ריווח של 20 פיקסלים משמאל B. ריווח של 20 פיקסלים מימין C. ריווח של 20 פיקסלים למטה

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
} 
#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
} 
#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
} 
</style> 
</head> 
<body> 
<!--container div tag--> 
<div id="container"> 
    <!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     <!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div> 
</body>

הערה:

הקוד שלעיל הוא גרסה פשוטה יותר של הקוד היוצר פריסה של סרגל צד שמאלי קבוע הכולל שתי עמודות בעת יצירת מסמך חדש בעזרת פריסות מוגדרות מראש של Dreamweaver.

יצירת דף בעזרת פריסת CSS

בעת יצירת דף חדש ב-Dreamweaver, ניתן ליצור דף שכבר כולל פריסת CSS.‏ ‏Dreamweaver כולל 16 פריסות CSS שונות שניתן לבחור מתוכן. בנוסף, באפשרותך ליצור פריסות CSS משלך ולהוסיף אותן לתיקיית הגדרות התצורה, כדי שהן יופיעו כאפשרויות פריסה בתיבת הדו-שיח New Document.

יצירת דף בעזרת פריסת CSS

בחר ‏File >‏ ‏New.
בתיבת הדו-שיח New Document, בחר בקטגוריה Blank Page. ‏(זוהי אפשרות ברירת המחדל).
ב-Page Type, בחר בסוג הדף שברצונך ליצור.

הערה:

יש לבחור סוג דף HTML לפריסה. לדוגמה, ניתן לבחור HTML‏, ‎ColdFusion®‎‏, PHP וכולי. לא ניתן ליצור דף ActionScript‎™‎‎‏, CSS‏, Library Item‏, JavaScript‏, XML‏, XSLT‏, או ColdFusion Component בעזרת פריסת CSS. קיימות מגבלות גם על כלילת סוגי דף בקטגוריה Other בתיבת הדו-שיח New Document בפריסות דף מסוג CSS.
באפשרות Layout, בחר בפריסת CSS הרצויה. ניתן לבחור מבין 16 פריסות. החלון Preview מציג את הפריסה שנבחרה, וכן תיאור קצר שלה.

פריסות CSS המוגדרות מראש מציעות את סוגי העמודות הבאים:

Fixed

רוחב העמודה מצוין בפיקסלים. העמודה אינה משנה את גודלה לפי גודל הדפדפן או לפי הגדרות הטקסט של המבקר באתר.

Liquid

רוחב העמודה מצוין כאחוז מרוחב חלון הדפדפן של המבקר באתר. העיצוב מתאים את עצמו אם המבקר באתר מגדיל או מקטין את חלון הדפדפן, אך אינו משתנה בהתאם להגדרות הטקסט של המבקר באתר.
בחר סוג מסמך מהתפריט הנפתח DocType.
בחר מיקום לפריסת CSS מהתפריט הנפתח Layout CSS.

Add To Head

הוספת CSS לפריסת כותרת הדף שיצרת.

Create New File

מוסיף פריסת CSS לגיליון סגנונות חיצוני חדש ומקשר את גיליון הסגנונות החדש לדף שאתה יוצר.

Link To Existing File

מאפשר לציין קובץ CSS קיים שכבר כולל את כללי CSS הדרושים לפריסה. אפשרות זו שימושית במיוחד כשברצונך להשתמש באותה פריסת CSS (שכללי CSS שלה כלולים בקובץ אחד) במסמכים מרובים.
בצע אחת מהפעולות הבאות:
- אם תבחר Add to Head מהתפריט הנפתח Layout CSS (אפשרות ברירת המחדל), לחץ על Create.
- אם בחרת Create New File מ-Layout CSS בתפריט הנפתח, לחץ על Create, וציין שם לקובץ החיצוני החדש בתיבת הדו-שיח Save Style Sheet File As.
- אם תבחר Link to Existing File מהתפריט הנפתח Layout CSS, הוסף את הקובץ החיצוני לתיבת הטקסט Attach CSS file בלחיצה על הסמל Add Style Sheet, השלמת ההגדרות בתיבת הדו-שיח Attach External Style Sheet ולחיצה על OK. לסיום, לחץ על Create בתיבת הדו-שיח New Document.
הערה:

כשבוחרים באפשרות Link to Existing File, הקובץ שתציין חייב לכלול את הכללים לקובץ CSS.

בעת שמירה של פריסת CSS בקובץ חדש או כאשר מקשרים אותה לקובץ קיים, Dreamweaver מקשר אוטומטית את הקובץ לדף HTML שאתה יוצר.

הערה:

הערות תנאי של Internet Explorer ‏(CCs), המסייעות לעקוף בעיות עיבוד של IE, נשארות מוטבעות בכותרת של פריסת CSS החדשה, גם אם תבחר New External File או Existing External File כמיקום לפריסת CSS.
‏(אופציונלי) ניתן גם לקשר גיליונות סגנונות CSS לדף החדש (ללא קשר לפריסת CSS) כשיוצרים את הדף. לשם כך, לחץ על הסמל Attach Style Sheet שמעל לאזור Attach CSS File ובחר גיליון סגנונות CSS.

לקבלת סיור מפורט במוצר, עיין במאמר של דיוויד פאוורס, ‏צירוף גיליון סגנונות למסמכים חדשים באופן אוטומטי.

הוספת פריסות CSS מותאמות אישית לרשימת האפשרויות

צור דף HTML הכולל את פריסת CSS שברצונך להוסיף לרשימת האפשרויות בתיבת הדו-שיח New Document. כללי CSS של הפריסה חייבים להיכלל בכותרת של דף HTML זה.

הערה:

כדי שפריסת CSS מותאמת אישית תהיה עקבית לפריסות אחרות המגיעות עם Dreamweaver, שמור את קובץ HTML עם הסיומת ‎.htm.
הוסף את דף HTML שיצרת לתיקייה Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
‏(אופציונלי) הוסף תמונה של תצוגה מקדימה של הפריסה (לדוגמה קובץ ‎.gif או ‎.png) לתיקייה Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. תמונות ברירת המחדל שמגיעות עם Dreamweaver הן קובצי PNG ברוחב 227 פיקסלים ובגובה 193 פיקסלים.

הערה:

תן לתמונת התצוגה המקדימה שם זהה לזה של קובץ HTML כדי שתוכל לעקוב אחריה בקלות. לדוגמה, אם קובץ HTML נקרא myCustomLayout.htm, קרא לתמונת התצוגה המקדימה בשם myCustomLayout.png.
‏(אופציונלי) צור קובץ הערות לפריסה המותאמת אישית על-ידי פתיחת התיקייה Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, העתקה והדבקה של קובצי ההערות הקיימים באותה תיקייה ושינוי שם העותק של הפריסה המותאמת אישית. לדוגמה, ניתן להעתיק את הקובץ oneColElsCtr.htm.mno, ולשנות את שמו ל-myCustomLayout.htm.mno.
‏(אופציונלי) לאחר שיצרת קובץ הערות לפריסה המותאמת אישית, ניתן לפתוח את הקובץ ולציין את שם הפריסה, תיאור ותמונת תצוגה מקדימה.

פריטים דומים נוספים

קבל עזרה במהירות ובקלות

משתמש חדש?

אודות שימוש ב- CSS לפריסת דף

אודות פריסת עמודי CSS

אודות מבנה של פריסת דפי CSS

יצירת דף בעזרת פריסת CSS

יצירת דף בעזרת פריסת CSS

הוספת פריסות CSS מותאמות אישית לרשימת האפשרויות

פריטים דומים נוספים

קבל עזרה במהירות ובקלות

שאל את הקהילה

איך פונים אלינו