בחר File > New.
עודכן לאחרונה בתאריך
25 באפריל 2024
למד להכיר את המבנה הבסיסי של פריסת CSS, ולמד כיצד לעצב דפים ותוכן באמצעות CSS ב- Dreamweaver.
אודות פריסת עמודי CSS
פריסת עמוד CSS משתמשת בתבנית CSS ולא בטבלאות או במסגרות HTML מסורתיות, כדי לארגן תוכן בעמוד אינטרנט. אבן הבניין הבסיסית של פריסת CSS היא התג div – תג HTML שברוב המקרים פועל כמיכל לטקסט, תמונות ושאר רכיבי דף. בשעת יצירת פריסת CSS, ממקמים תגי div בדף, מוסיפים להם תוכן וממקמים אותם במקומות שונים. שלא כמו תאי טבלה, החייבים להופיע במקום כלשהו בשורות או בעמודות בטבלה, תגי div יכולים להופיע בכל מקום בדף אינטרנט. ניתן להציב תגי div בצורה מוחלטת (על-ידי ציון קואורדינטות x ו-y) או בצורה יחסית (על-ידי ציון המיקום שלהם ביחס למיקום הנוכחי). ניתן גם למקם תגי div על-ידי ציון ערכי ציפה, ריווח ושוליים - השיטה המקובלת באינטרנט של ימינו.
אודות מבנה של פריסת דפי CSS
לפני שתמשיכו לקטע הזה, עליכם להכיר את עקרונות CSS בסיסיים.
אבן הבניין הבסיסית של פריסת CSS היא תג div— תג HTML שברוב המקרים משמש כמיכל לטקסט, לתמונות ולרכיבי עמוד אחרים.הדוגמה הבאה מציגה עמוד HTML הכולל שלושה תגי div נפרדים: תג "container" גדול אחד, ושני תגים אחרים—תג sidebar ותג תוכן ראשי—בתוך תג ה-container.
A. תג div של מיכל B. תג div של סרגל צד C. תג div של תוכן ראשי
להלן הקוד לכל שלושת תגי div אלה ב-HTML:
<!--תג div של container-->
<div id="container">
<!--תג div של סרגל צד-->
<div id="sidebar">
<h3>תוכן סרגל צדדי</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--תג div של mainContent-->
<div id="mainContent">
<h1> תוכן ראשי </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</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, שיכול להיות ממוקם ב-head של המסמך או בקובץ CSS חיצוני, יוצר כללי עיצוב עבור ה-div הראשון, או ה-"container" בעמוד:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
הכלל #container מעצב את תג ה-div של ה-container כך שיהיה לו רוחב של 780 פיקסלים, רקע לבן, ללא margin (מהצד השמאלי של העמוד), גבול שחור, מלא, של פיקסל אחד, וטקסט שמיושר שמאלה. התוצאות של יישום הכלל על תג ה-div של ה-container הן כדלקמן:
A. טקסט מיושר שמאלה B. רקע לבן C. גבול אחיד בעובי פיקסל אחד בצבע שחור
כלל CSS הבא יוצר כללי סגנון לתג div של סרגל הצד:
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
הכלל #sidebar מעצב את תגית div של הסרגל הצדדי כך שיהיה לה רוחב של 200 פיקסלים, רקע אפור, ריפוד עליון ותחתון של 15 פיקסלים, ריפוד ימני של 10 פיקסלים וריפוד שמאלי של 20 פיקסלים. (סדר הריווח שמוגדר כברירת המחדל הוא למעלה-ימין-למטה-שמאל.) בנוסף, הכלל ממקם את תגית div של הסרגל הצדדי עם float: left – מאפיין שדוחף את תגית 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 של mainContent הן כדלקמן:
הקוד המלא ייראה כך:
A. ריווח של 20 פיקסלים משמאל B. ריווח של 20 פיקסלים מימין C. ריווח של 20 פיקסלים למטה
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>מסמך ללא כותרת</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>
<!--תג div של container-->
<div id="container">
<!--תג div של sidebar-->
<div id="sidebar">
<h3>תוכן סרגל צדדי</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> תוכן ראשי </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 </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
בתיבת הדו-שיח 'מסמך חדש', בחרו בקטגוריה 'עמוד ריק'. (זוהי אפשרות ברירת המחדל).
ב-Page Type, בחר בסוג הדף שברצונך ליצור.
פתק
יש לבחור סוג דף HTML לפריסה. לדוגמה, אתם יכולים לבחור ב-HTML, ColdFusion®, PHP וכדומה. אינכם יכולים ליצור עמוד ActionScript™, CSS, פריט ספרייה, JavaScript, XML, XSLT או רכיב ColdFusion עם פריסת CSS. סוגי העמודים בקטגוריה 'אחר' בתיבת הדו-שיח 'מסמך חדש' גם כן מוגבלים מלכלול פריסות עמוד CSS.
באפשרות Layout, בחר את פריסת CSS הרצויה. אתם
יכולים לבחור מתוך 16 פריסות שונות. חלון התצוגה המקדימה מציג את
הפריסה ונותן תיאור קצר של הפריסה שנבחרה.
הפריסות המעוצבות מראש של CSS מספקות את הסוגים הבאים של עמודות:
Fixed
רוחב העמודה מצוין בפיקסלים. העמודה לא משנה גודל על סמך גודל הדפדפן או הגדרות הטקסט של מבקר האתר.
Liquid
רוחב העמודה מוגדר כאחוז מרוחב הדפדפן של מבקר האתר. העיצוב מתאים אם מבקר האתר מרחיב את הדפדפן או מצמצם אותו, אך לא משתנה על סמך הגדרות הטקסט של מבקר האתר.
בחר סוג מסמך מהתפריט הנפתח DocType.
בחרו מיקום עבור ה-CSS של הפריסה מהתפריט הקופץ Layout
CSS in.
Add To Head
הוספת CSS לפריסת כותרת הדף שיצרת.
Create New File
מוסיף CSS עבור הפריסה לגיליון סגנונות CSS חיצוני חדש ומחבר את הגיליון החדש לעמוד שאתם יוצרים.
Link To Existing File
מאפשר לכם לציין קובץ CSS קיים שכבר מכיל את כללי ה-CSS הדרושים עבור הפריסה. אפשרות זו שימושית במיוחד כשאתם רוצים להשתמש באותה פריסת CSS (כללי ה-CSS שלה נמצאים בקובץ יחיד) במספר מסמכים.
בצע אחת מהפעולות הבאות:
- אם בחרתם Add to Head מהתפריט הקופץ Layout CSS in (האפשרות המוגדרת כברירת מחדל), לחצו על Create.
- אם בחרתם Create New File מהתפריט הקופץ Layout CSS, לחצו על Create ואז ציינו שם עבור הקובץ החיצוני החדש בתיבת הדו-שיח Save Style Sheet File As.
- אם בחרתם Link to Existing File מהתפריט הקופץ Layout CSS in, הוסיפו את הקובץ החיצוני לתיבת הטקסט 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.
להסבר מפורט על תהליך זה, ראו את המאמר של David Powers, Automatically attaching a style sheet to new documents.
הוספת פריסות 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.
(אופציונלי) צרו קובץ Notes (פתקים) עבור הפריסה המותאמת שלכם
על ידי פתיחת התיקיה Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes
, העתקה והדבקה של קבצי הפתקים הקיימים באותה
תיקיה, ושינוי שם ההעתק עבור הפריסה המותאמת שלכם.לדוגמה,
תוכלו להעתיק את הקובץ oneColElsCtr.htm.mno ולשנות את שמו ל-myCustomLayout.htm.mno.
(אופציונלי) לאחר שיצרתם קובץ פתקים עבור
הפריסה המותאמת שלכם, תוכלו לפתוח את הקובץ ולציין את שם הפריסה,
התיאור ותמונת התצוגה המקדימה.
בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.
