גליונות סגנון מדורגים

אנחנו כבר דיברנו על כך שלגמריי לשנות את עיצוב האתר באון-ליין (לוח "עיצוב") זה כמעט בלתי אפשרי.לדוגמא,אתם רוצים להשתמש במקום הכיתוב הקיים כמו  Ariel במשהו יותר אקזוטי. כמובן שאפשר בעזרת העורך לבחור כיתוב אחר כלשהו,אבל הוא יופיע רק בעמוד שבו החלטתם לבצע שימוש בו. שאר הסעיפים של האתר יופיעו רגיל בלי שינוי,באותה צורת כיתוב של  Ariel. עיצוב כזה נראה כבלתי מקצועי.

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

כך שעבור אלו שרוצים לעשות עיצוב יחודי ובלתי שיגרתי לאתר, צריך לעשות שימוש בקבצים של גליונות סגנון מדורגים (Cascading Style Sheets, או בקיצור, CSS). רצוי תוך כדי שיהיה ידע בסיסי בתחום השפת  HTML.

בסעיף זה אנחנו נשתדל להסביר אך לעשות שימוש ב CSS אל תבנית העיצוב של האתר שלכם. נסכם מראש על כך שאת תבנית העיצוב אנחנו לא מתכוונים לשנות,  על כך כבר שוחחנו בעבר.

1. פתחו איזה שהוא עמוד באתר שלכם וביחרו בתפריט העליון של הבראוזר שלכם  View -> Source.

2. מיצאו בו חלק מהקוד שישנו בין ה"טאגים"  <style></style> והעתיקו את החלק הזה לתוך קובץ טקסט נפרד. תנו לו שם איזה שאתם רוצים, אבל רצוי עם  .css מורחב!

חשוב! שנו את הדרך אל הקבצים בסלטורים, היכן שתראו את החלק של הקוד: 

background: url(שם הקובץ.jpg) אל background: url(../template/שם הקובץ.jpg)

3. היכנסו אל לוח לניהול קבצים והעלו את הקובץ הנ"ל לתיקיה עם  טקסטים, html, php css-קבצים.

4. לאחר מכן בלוח (פאנל) הגדרוות  התקינו טבלת סגנונות חיצונית, ובחלון מימין  - את הקובץ שלכם.

עכשיו האתר שלכם עובד עם CSS חיצונית, נשאר רק ללמוד לערוך אותו.

תבבנית עיצוב של האתר שלכם - זה במילים פשוטות,טבלה,המכילה עמודות ושורות. אם יצא לכם אי פעם לבנות טבלאות בתוך עורך טקסטים של Word, אז אתם תבינו בקלות על מה אנחנו מדברים.

העמודות האפורות בצד של תבנית עיצוב, שמאלית - c_side_L וימנית - c_side_R מיועד בשביל הכנסת תמונות, היוצרים אפקט של צל תלת מימד (ראה עיצוב האתר המוגדר כ"ברירת מחדל").

כל מה שנותר לכם לעשות על מנת לקבל עיצוב יחודי ואישי משלכם - זה לשנות בקובץ שלכם את ההגדרות של ה  סלקטורים האלה. ואך לעשות זאת,אתם יכולים לקרוא במדריכים רבים של  CSS!