Webist
  • קורס בניית אתרים בוורדפרס
  • בלוג
    • בניית אתרים
      • וורדפרס
      • בניית חנות וירטואלית
      • דפי נחיתה
      • מערכות ניהול תוכן
    • קידום אתרים
    • עיצוב אתרים
    • אחסון אתרים
      • מדריך Cpanel
      • אחסון קבצים
      • גוגל אנליטיקס
    • כללי
      • ברשת
      • כלים חינמיים
  • צור קשר
  • שירותים
    • בניית אתרים בתשלום חודשי
    • בניית אתרים חינם בגוגל
    • קידום אתרים
    • פרסום בגוגל
  • קורס בניית אתרים בוורדפרס
  • בלוג
    • בניית אתרים
      • וורדפרס
      • בניית חנות וירטואלית
      • דפי נחיתה
      • מערכות ניהול תוכן
    • קידום אתרים
    • עיצוב אתרים
    • אחסון אתרים
      • מדריך Cpanel
      • אחסון קבצים
      • גוגל אנליטיקס
    • כללי
      • ברשת
      • כלים חינמיים
  • צור קשר
  • שירותים
    • בניית אתרים בתשלום חודשי
    • בניית אתרים חינם בגוגל
    • קידום אתרים
    • פרסום בגוגל
ווביסט ● בניית אתרים ● מדריך יצירת תפריט ניווט באמצעות Css

מדריך יצירת תפריט ניווט באמצעות Css

יוסי ג'אנה אפריל 30, 2010 11:21 pm 5 תגובות

תפריט הוא אחד מהדברים ההכרחיים באתר אינטרנט עכשווי ומודרני. תפריט מאפשר לגולשים לעבור בין דפי האתר באופן קל ופשוט. קיים מגוון רב של סוגי תפריטים. תפריט יכול להיות לצורכי נווט או לצורכי שיתוף מידע באתר כמו ב- Twitter, Facebook, Rss דוא"ל וכו'. יצירת תפריט ניווט באמצעות Css הוא תהליך קצר ומהיר אך דורש דייקנות. כעת אני ילמד אותך איך ליצור תפריט ניווט באמצעות Css על-ידי שימוש ב- Photoshop בשיטה המכונה CSS Sprites.

[adsense]

מה זה CSS Sprites ?

שיטה זו היא שיטת חיסכון בתעבורה של משלוח בקשות למשיכת נתונים משרת אל הדפדפן. אם ניקח לדוגמה שיש לך 5 סמלים בתפיט: שיתוף בטוויטר, שיתוף בפייסבוק ועוד, וכל אחד מציג את סמל של האתר בתפריט, הדפדפן שולח 5 בקשות באמצעות פרוטוקול Http לשרת כדי לקבל את התמונות האלה בחזרה. הדבר יכול להאט את טעינת האתר בדפדפן. באמצעות שיטת CSS Sprites אפשר ליצור תפריט ניווט באמצעות Css אשר יחסוך את הבקשות ומשיכת התמונות יחידות מהשרת . כעת אנחנו נבנה תפריט ניווט לשיתוף בדיוק כפי שזה קיים בהרבה אתרים פופולריים בעולם.

מדריך יצירת תפריט ניווט באמצעות CSS
מדריך יצירת תפריט ניווט באמצעות CSS

שלב ראשון – יצירת תמונה

נא לגשת לתוכנת פוטושופ, ועליך ליצור תמונה חדשה בגדלים הבאים – 432 פיקסלים רוחב על 78 פיסקלים לאורך. הוסף כותרת לתפריט, ו-4 סמלים של אפשרויות השיתוף. במקרה שלנו, אנחנו נשתמש בסמלים של Twitter, Facebook, Rss, ו-Email. הסמלים הורדו מקישור הבא: Graphicriver

צור תמונה בדיוק בצורה שמופיע בתמונה:

kissmysocialass
מדריך יצירת תפריט נווט באמצעות Css

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

שכפול שכבות בפוטושופ עם עברתו תמונה לשחור לבן
שכפול שכבות בפוטושופ עם עברתו תמונה לשחור לבן

נא להשתמש בסמלים שיצרת כדי ליצור את התמונה הבא:

מדריך יצירת תפריט נווט באמצעות Css

שמור את הקובץ כקובץ PNG ושמור אותו בתיקיה נפרדת לדוגמה IMAGES בתוך תקיית האתר שלך. כעת סיימנו עם עיצוב התמונה שישמש אותנו כתפריט ניווט.

שלב 2.  – יצירת HTML

נא לפתוח את תוכנת עריכה כמו Dreamweaver או Notepad, נא ליצור את קובץ HTML ולשמור אותו. אנחנו חייבים כעת אלמנט Div ותפריט קישורים כדי ליצר Css Sprites.

הכנס את הקוד הבא במסמך ה-HTML שלך.

מסמך HTML
מסמך HTML

כמובן עליך להכניס את הקישורים שלך במקום סימן # . שים לב שהאלמנט הראשון בתפריט אינו קישור ! זו היא אך ורק הודעת "שתף אותי".

שלב שלישי – CSS

נא לפתוח קובץ CSS ולרשום בו את השורות הבאות.

יצירת קובץ CSS
יצירת קובץ CSS

הסבר:
סלקטור הראשון "#Share-webist" מכיל את הפרמטרים הגלובליים כמו מיקומים וגדלים עבור התפריט שלך.
סלקטור ( Share-webist ul#shar li ) מודיע לדפדפן להציג את הרשימה (LIST) בצורה אופקית.
סלקטור שלישי ( Share-webist ul#shar li a ) קורא לתמונה שלנו שיצרנו באמצעות פוטושופ.

התמונה webist-social.png הוא השם של התמונה שיצרנו בפוטושופ.

T
T

קטע הקוד הנ"ל מגדיר את הכותרת שבתמונה בשם "שתף אותי".

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

מדריך יצירת תפריט נווט באמצעות CSS
מדריך יצירת תפריט נווט באמצעות CSS

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

שגיאה ב-CSS
שגיאה ב-CSS

אוקי, לא קיבלנו את התוצאה הרצויה. הסיבה לכך היא אי-התאמה במיקומם של התמונות לסמלים. כדי לסדר את זה עלינו לגשת לקוד שמופיע לך בתמונה הקודמת ולשנות את הפיקסלים של background-position כדי להגיע להתאמה מלאה. חשוב לציין שקיימת 2 קבוצות של הגדרות. אחד בזמן שהוא אינו פעיל ושני שאכן עוברים עליו עם העכבר. 4 שורות הראשונות הם השורות האחראים על מיקום התמונות בזמן שהם אינם פעילים, לעומת זאת הקבוצה השניה אחראית על התצוגה בזמן שעוברים עליהם עם סימן של העכבר. ההבדל בין הקבוצה הלא פעילה – לקבוצה הפעילה, אפשר למצאו באמצעות הגדרה של  a:hover שאחראית על המראה החיצוני של הסמל הפעיל כשעוברים עליו עם הסימן של העכבר.

נא לשנות את הפיקסלים של פקודות background-position כפי שזה מופיע בתמונה הבא:

מדריך בניית תפריט נווט באמצעות CSS
מדריך בניית תפריט נווט באמצעות CSS

לאחר הגדרת הפיקסלים המדויקים בקובץ CSS, התפריט הניווט שלנו ניראה כך:

תפריט נווט באמצעות CSS
תפריט נווט באמצעות CSS

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

תפריט נווט - CSS
תפריט נווט - CSS

הורדה קובץ מוכן: [download id="48"]

CSS Sprites html יצירת תפריט נווט מדריך CSS מדריך יצירת תפריט ניווט תפריט ניווט תפריט ניווט ב-CSS תפריט שיתוף
« פוסט קודם
פוסט הבא »

5 תגובות

  1. גבי הגב מאי 2, 2010 בשעה 1:26 am

    כתבה מושקעת מאוד !!! like
    .-= בבלוג של גבי פוסט אחרון הוא: ..‫מה חדש ב Adobe Creative Suite 5‬ =-.

  2. ליאון אטקינסון הגב מאי 6, 2010 בשעה 10:28 am

    שימושי ויעיל, יוסי מדוע כשאתה מציג קוד אתה לא מזין אותו כטקטס חי אי אפשר לעשות copy/paste ? )-:
    תודה בכל אופן.
    .-= בבלוג של ליאון אטקינסון פוסט אחרון הוא: ..‫מה חדש ב CS5 חלק – א‬ =-.

  3. יוסי ג'אנה הגב מאי 6, 2010 בשעה 10:59 am

    אהלן ליאון: רק בגלל הסיבה שציינת, שלא תעשה Copy Past אלה תכתוב לבד.
    חוץ מזה בסוף המאמר יש קובץ מוכן להורדה ששם נמצא כל הקבצים עם כל הקוד.

  4. yakov הגב מאי 17, 2010 בשעה 11:17 pm

    ההורדה של הקובץ המוכן לא עובדת, אני ממש ממש אשמח אם תתקן זאת

  5. יוסי ג'אנה הגב מאי 17, 2010 בשעה 11:40 pm

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

השארת תגובה

ביטול

צור איתנו קשר
בניית אתרים
בנה אתר מקצועי עכשיו
עשה קליק
קידום אתרים
קדם אתר בגוגל
קבל מחיר ותוצאות
פרסום בגוגל
פרסום היחיד שעובד חזק
קבל מחיר ותוצאות
הקודם
הבא
קטגוריות בבלוג
  • קידום אתרים
  • בניית אתרים
  • וורדפרס
  • תוספים של וורדפרס
  • עיצוב אתרים
  • שרתי אחסון
  • אחסון אתרים
  • אחסון קבצים
  • בניית חנות וירטואלית
  • ברשת
  • גוגל אנליטיקס
  • דפי נחיתה
  • מדריך Cpanel
  • קוד פתוח
פוסטים אחרונים
  • אז מה חדש בוורדפרס 4.0 ועד 4.7?
  • איך פותחים כתובת מייל ממותג בשרת – Cpanel
  • איך מתחברים לחשבון Cpanel בשרת אחסון
  • תוסף וורדפרס לבדיקת ביצועים – P3 💯
  • Facebook סוגרת פיצ'ר הנפוץ של Like Box
iDox סוכנות דיגיטל
Webist.co.il - כל הזכויות שמורות 2008 - 2017
גלילה לראש העמוד