עיצוב מתקדם
הקדמה
עיצוב אתרי אינטרנט מודרניים מבוסס על מחלקות עיצוב (או גליונות עיצוב) CSS. אלו מחלקות המוגדרות בקובץ מיוחד נפרד הנלווה לאתר וניתן להשתמש בהן לעיצוב של כל אלמנט (פיסקה, קישור, טבלה...).
אתר פסיכולוגיה עברית בגרסה החדשה (2017) מבוסס על גיליון עיצוב תקני של w3.css הכולל סט של הגדרות עיצוב הניתנות לשימוש באופן מודולרי. היות והקובץ נלווה לאתר תוכלו להשתמש בו גם אתם - כל שצריך להכיר הוא את שמות מחלקות העיצוב שיש לקרוא להן. למשל, המחלקה w3-button תעצב אלמנט ככפתור, המחלקה w3-green תוסיף רקע ירוק לאלמנט.
דוגמאות
הנה קישור רגיל: פסיכולוגיה עברית
והנה אותו קישור לאחר שהוספנו לו את המחלקה w3-button: פסיכולוגיה עברית
והנה אותו קישור שהוספנו לו את שתי המחלקות w3-button w3-green: פסיכולוגיה עברית
הנה דוגמא לתמונה שהוספנו לה את המחלקה w3-image (תמונה רספונסיבית = מתאימה עצמה אוטומטית לגודל המסך)
ואותה תמונה לאחר שהוספנו לה גם את המחלקה w3-sepia
איך מוסיפים מחלקת עיצוב
את מחלקת העיצוב ניתן להוסיף בטאב 'אפשרויות מתקדמות' של האלמנט אותו תרצו לעצב (קישור, תמונה, טבלה, מיכל DIV...). יש להיכנס למאפייני הקישור או מאפייני התמונה, לעבור לטאב 'אפשרויות מתקדמות' ולחפש שם את השדה 'מחלקת עיצוב CSS' או 'גליונות עיצוב CSS' או 'מחלקות גליונות עיצוב' (אלו שמות זהים לאותו דבר)
במסך מאפייני קישור
בחלון מאפייני תמונה:
בחלון מאפייני מיכל DIV - האפשרות מופיעה בטאב 'כללי'
בחלון מאפייני טבלה:
אלו מחלקות עיצוב קיימות
ראשית, ניתן לשלב בין מספר מחלקות עיצוב כפי שהודגם קודם. למשל, תוכלו לעצב תמונה בגווני Sepia, עם מסגרת ירוקה ושמתנהגת כמו כפתור כאשר עוברים עליה עם העכבר.
(בתמונה הבאה נעשה שימוש במחלקות: w3-image w3-sepia w3-border w3-border-green w3-button)
רשימה מלאה של כל מחלקות העיצוב הזמינות תמצאו במדריך זה בו מופיע פירוט מסודר כולל הדגמות של כל מחלקות העיצוב. תוכלו להשתמש בהן באופן חופשי וכיד הדמיון הטובה עליכם
הנה כמה מחלקות שימושיות יותר:
