אוגדן הדרכה
אוגדן הדרכה

מאמרים

עיצוב מתקדם

מסמך זה יציג מספר אפשרויות לעיצוב מתקדם של דפי האתר והמאמרים. איך לעצב כפתורים, מסגרות להוסיף אפקטים ועוד
תאריך פרסום: 23/5/2017

הקדמה

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

אתר פסיכולוגיה עברית בגרסה החדשה (2017) מבוסס על גיליון עיצוב תקני של w3.css הכולל סט של הגדרות עיצוב הניתנות לשימוש באופן מודולרי. היות והקובץ נלווה לאתר תוכלו להשתמש בו גם אתם - כל שצריך להכיר הוא את שמות מחלקות העיצוב שיש לקרוא להן. למשל, המחלקה w3-button תעצב אלמנט ככפתור, המחלקה w3-green תוסיף רקע ירוק לאלמנט.

 

דוגמאות

הנה קישור רגיל: פסיכולוגיה עברית

והנה אותו קישור לאחר שהוספנו לו את המחלקה w3-button: פסיכולוגיה עברית

והנה אותו קישור שהוספנו לו את שתי המחלקות w3-button w3-green: פסיכולוגיה עברית

הנה דוגמא לתמונה שהוספנו לה את המחלקה w3-image (תמונה רספונסיבית = מתאימה עצמה אוטומטית לגודל המסך)

תמונה לדוגמא

ואותה תמונה לאחר שהוספנו לה גם את המחלקה w3-sepia

תמונה לדוגמא

 

איך מוסיפים מחלקת עיצוב

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

במסך מאפייני קישור

אפשרויות מתקדמות - קישור

בחלון מאפייני תמונה:

אפשרויות מתקדמות - תמונה

בחלון מאפייני מיכל DIV - האפשרות מופיעה בטאב 'כללי'

אפשרויות מתקדמות - מיכל DIV

בחלון מאפייני טבלה:

אפשרויות מתקדמות - טבלה

 

אלו מחלקות עיצוב קיימות

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

(בתמונה הבאה נעשה שימוש במחלקות: w3-image w3-sepia w3-border w3-border-green w3-button)

תמונה לדוגמא

 

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

מחלקות עיצוב w3.css

הנה כמה מחלקות שימושיות יותר:

 

תגובות

הוספת תגובה

אין עדיין תגובות למאמר זה.

צרו קשר

מוזמנים ליצור עימנו קשר.


×Avatar
זכור אותי
שכחת את הסיסמא? הקלידו אימייל ולחצו כאן
הסיסמא תשלח לתיבת הדוא"ל שלך.