12. עיצוב של האתר
למן ההתחלה הזכרתי קישור של CSSים ודפי אתר, אך לא עברנו על כך בפירוט. זהו הנושא של שיעור אחרון זה.
קישור ושיבוץ
ברגע שיש לכם CSS, יש שתי דרכים לקשר אליו דף אתר. הראשונה, כפי שעשינו בשיעורים הללו, היא לקשר את הדף ל-CSS.
הדרך השנייה, היא לשבץ את ה-CSS בראש הדף של האתר.
. מי משתיהן עדיפה יותר? אם תחשבו על אחד היתרונות החשובים ביותר של ה-CSS, היכולת שלו לעדכן ולשפץ את מראה האתר ללא כל שינוי לדף האתר עצמו, תסכימו איתי שקישור הוא עדיף. אחרת, כאשר אתם משנים את ה-CSS שלכם, תצטרכו לערוך אותו בכל דף. זה שולל הרבה מהיתרונות של הפרדה בין תוכן ופרזנטציה
מתי שיבוץ נחשב כרעיון טוב? אם הכוונה היא להוריד את הדפים שלכם ולקרוא אותם כאשר המחשב אינו מקוון, סביר להניח שהמשתמשים לא יוכלו למצוא או להוריד כל CSS שהוא. כך שכאשר הם ירצו לקרוא את הדף, לא מקוון, לא יהיה כל עיצוב או סגנון. במקרה של Netscape Navigator העניינים מסתבכים, כאשר הוא לא מצליח להטעין דף אם ה-CSS אינו נמצא.
אבל בגדול, עדיף הקישור.
בואו נבדוק כעת איך עושים זאת.
קישור
אם נפתח את דוגמת דף ה-HTML שלנו, נמצא את הדבר הבא בראש הדף:
<LINK REL="STYLESHEET" TYPE="text/css" HREF="core-style.css">
הבא נבדוק כל תכונה בקצרה.
REL=STYLESHEET פירושו, שזהו קישור מקדים, ואומר לדפדפן למה לצפות בצד השני, בקיצור, CSS.
TYPE=text/css באופן תיאורטי, יש אפשרות לכתוב CSSים בשימוש בהרבה שפות. ה-CSSים, שעליהם דיברנו בשיעורים האחרונים, הם Cascading Style Sheets . עוד CSS שיכול להיות חשוב הוא
Extensible Style Language . תכונה זו אומרת לדפדפן באיזה פורמט הוא יקבל את ה-CSS.
סוג התוכן הוא הכרחי.
HREF="core-style.css" אומר לדפדפן היכן למצוא את ה-CSS. היעד מתואר באותה צורה כמו קישורי Hypertext (A HREF="link destination") או עם url יחסי או מוחלט.
כדי ליצור קישור ל-CSS שלכם כל שעליכם לעשות הוא להדביק את שורת הקוד למעלה לתוך ראש הקובץ של HTML שלכם, ואז שנו את ערך ה- HREF כך שיצביע על מיקום ה-CSS שלכם.
שיבוץ
אם אתם רוצים או צריכים לשבץ את ה- CSS שלכם, יש להכניס את האלמנטים הבאים לתוך ראש קובץ ה-HTML .
<STYLE TYPE=" text/css ">
<!--
BODY {margin-left: 15%}
H1 {text-indent: -10%}
H2 {text-indent: -8%}
H3 {text-indent: -6%}
H4 {text-indent: -4%}
P {text-indent: 5%}
-->
</STYLE>
דרוש תואר TYPE TYPE לתוכן וזה אותו הדבר עבור CSSים מקושרים. כל שעשינו היה למקם את ה-CSS בתוך האלמנט <STYLE></STYLE> > , ולשים תגי הערות מסביב לתוכן, כך שדפדפנים ישנים יותר, שלא מזהים את אלמנט ה- STYLE, לא יראו את ה-CSS כתוכן.
שלב הבא
כמעט סיימנו. שלב הבא . כעת נעבור בקצרה על כל מה שעשינו עד עכשיו, ונחשוב לאן אפשר להמשיך כדי באמת לשלוט ב-CSSים.
|
