איך להטמיע וידיאו מיוטיוב עם התחלה וסוף מוגדרים על ידכם

איך להטמיע וידיאו מיוטיוב עם התחלה וסוף מוגדרים על ידכם

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

איך עושים זאת?

נניח ואני מעוניין להטמיע וידיאו שיתחיל אחרי 10 שניות ויסתיים ב – 6:02.

נעתיק את הקוד הטמעה של יוטיוב, לדוגמה:

<iframe width="560" height="315"
src="//www.youtube.com/embed/mYKLvYGqaC0?rel=0"
frameborder="0" allowfullscreen></iframe>

ונוסיף ל"src" פרמטרים של התחלה וסיום:

<iframe width="560" height="315"
src="//www.youtube.com/embed/mYKLvYGqaC0?rel=0&start=10&end=362"
frameborder="0" allowfullscreen></iframe>

start – הוא הפרמטר של ההתחלה.
end – הוא הפרמטר של הסיום.
(מפתיע)

המספרים מייצגים שניות.
על מנת לחשב את השניות בדיוק, נכפיל את מספר הדקות ב-60 ונוסיף את מספר השניות שנותרו. למשל במקרה שלנו:
(6 דקות כפול 60 שניות) פלוס 2 שניות = 362.

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

 

והנה התוצאה הסופית:

איך להגביל עמודים בתוצאות חיפוש של וורדפרס?

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

על מנת להשיג זאת, נפתח את קובץ ה functions.php בתבנית שלנו (אם יש לכם child-theme, אנא פתחו את הקובץ בתיקיה של תבנית הבת).

הכניסו את הקוד הבא:

function remove_pages_from_search() {
    global $wp_post_types;
    $wp_post_types['page']->exclude_from_search = true;
}
add_action('init', 'remove_pages_from_search');

זהו, שימרו את הקובץ, והעלו לשרת שלכם.

איך להעביר אתר מג'ומלה לוורדפרס

איך להעביר אתר מג'ומלה לוורדפרס

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

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

מגבים (אחרת זה קורה)

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

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

התקנת וורדפרס והזנת תוכן

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

לאחר שהתקנתם בהצלחה מערכת וורדפרס, תצטרכו להתקין תוסף לייבוא תוכן ג'ומלה לאתר וורדפרס. אני בחרתי בFG Joomla to WordPress. הגרסה החינמית הספיקה לצרכיי הבלוג שלי. קראו היטב על ההבדלים בין הגרסאות על מנת לוודא איזו גרסה תתאים לכם. ההבדל הכי קריטי שמצאתי בגרסה בתשלום לעומת הגרסה החינמית הוא ייבוא התגובות מתוסף בשם Jcomments שהשתמשתי בו בהתקנה של ג'ומלה. אם אתם יודעים קצת PHP אני משוכנע שתצליחו לבנות קוד פשוט להמרת התגובות, ואם אינכם מבינים בקוד, פשוט תשלמו קצת ותרוויחו משקט נפשי.

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

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

עד כאן המדריך להמרת אתר ג'ומלה לאתר וורדפרס.

אשמח גם לשמוע מה דעתכם על האתר החדש.

Dreamweaver – איך לבנות דף HTML (חלק 5)

5. העלאת הדף לאינטרנט.

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

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

כל תוכנת FTP מעט שונה אך זהה ברעיון, יש לנו חלון של המחשב שלנו (local) וחלון של השרת המרוחק עליו האתר שלנו יושב (remote), עם FileZilla אפשר פשוט לגרור קבצים לשרת המרוחק.
תצטרכו להזין פרטי חיבור כמו כתובת השרת (אותה תקבלו מחוות השרתים אליה נרשמתם) , שם משתמש וסיסמה (שבאופן קסום ומוזר, גם אותם תקבלו מחוות השרתים).

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

תודה ולהתראות!

Dreamweaver – איך לבנות דף HTML (חלק 4)

4. הבדלים בין טבלאות (TABLE) לדיבים (DIV) ושימושיהם.

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

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

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

Dreamweaver – איך לבנות דף HTML (חלק 3)

3. חיתוך גרפיקה מקובץ PSD (פוטושופ) והטמעה בHTML

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

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

dreamweaverHTML4

  • ונבחר רוחב דק מהרקע עד לגובה בו יש לבן נקי ללא הכתום:

dreamweaverHTML5

שמתי את חלונית הINFO ליד הסימון שעשיתי על מנת שתראו את הרוחב והגובה אותו אני מעוניין לחתוך (המידות הן בפיקסלים).

  • השלב הבא הוא החיתוך עצמו. אני נוהג להעתיק את תוכן הסימון שלי וליצור מסמך חדש. על מנת להעתיק ניתן (ואף רצוי) להשתמש בקיצור המקשים: Shift + Ctrl + C . זה קיצור שמקביל ל Shift + C הידוע (העתק) אך הוא יעתיק וימזג את כל השכבות לזכרון במקום להעתיק רק את השכבה הנוכחית אותה סימנו בחלונית הLAYERS. זה הרגל שפיתחתי, ומאוד נוח. על מנת לבצע אותה פעולה דרך התפריט הראשי, ליחצו על Edit > Copy Merged.
  • עכשיו התמונה שחתכנו נמצאת בזכרון המחשב, נפתח עמוד חדש File > New (שימו לב שפתיחת מסמך חדש תקבל את המידות שחתכנו באופן אוטומטי, לכן אין שום סיבה לגעת במידות המסמך ופשוט ללחוץ על אישור).
  • כעת נדביק את התמונה למסמך החדש (Ctrl + V) או באמצעות Edit > Paste.

במסמך יופיע משהו כזה:

dreamweaverHTML6

  • כעת נשמור את התמונה שלנו לפורמט מתאים.
  • גם כאן אני מעדיף קיצור מקשים (Alt + Shift + Ctrl + S) או File > Save for Web & Devices.

dreamweaverHTML7

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

  • לצורך ההדגמה נבחר בPNG-24 ונלחץ Save.

dreamweaverHTML8

  • את התמונה נשמור בתוך תיקיית images בתיקיית השורש שבחרנו עבור האתר (אותה תיקיה שבחרנו בDreanweaver). מכיוון שזהוי תמונת הרקע לגוף העמוד, בחרתי לקרוא לה "bodyBg", השתדלו להקפיד ולשמור שמות של תמונות כך שישקפו את הייעוד שלהן, אין להשתמש ברווחים, יש להקפיד על אותיות גדולות וקטנות (באנגלית בלבד!).

dreamweaverHTML9

  • כעת נחתוך את הלוגו באותה השיטה, ניקח את כלי הסימון, נסמן את הלוגו שלנו, נעתיק אותו (Shift + Ctrl + C), ניצור מסמך חדש (Ctrl + N), נדביק (Ctrl +V) ונשמור (Alt + Shift + Ctrl + S) כPNG בשם "logo".

dreamweaverHTML10

dreamweaverHTML11

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

  • תחילה ניצור תיקיה חדשה שתכיל את הקובץ עיצוב שלנו.
  • נלחץ על הכפתור בחלונית Files ונבחר File > New Folder.
  • לתיקיה החדשה שיצרנו נקרא "css".

dreamweaverHTML12

  • כעת נפתח את חלונית הCSS שלנו, אם החלונית אינה פתוחה, ליחצו בתפריט הראשי על Window > CSS Styles (או Shift + F11).
  • נלחץ על כפתור יצירת CSS חדש.

dreamweaverHTML13

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

  • בחלון הזה נבחר Tag ואז נבחר את תגית ה body (כך ניצור קובץ שכבר בתוכו יהיה רשום לנו סטייל עבור גוף הדף).
  • נשאיר את Define in על קובץ סטייל חדש ונלחץ OK.

dreamweaverHTML14

  • ייפתח עכשיו חלון שמירת קובץ, שימרו את הקובץ החדש בתוך תיקיית CSS שיצרתם, אני קראתי לקובץ שלי "style.css".

dreamweaverHTML15

  • נלחץ Save.
  • עוד חלון קופץ מולנו, CSS Rule, שהוא מגדיר לנו עיצוב בצורה קלה וחצי אוטומטית. אני מעדיף לכתוב את קובץ הCSS שלי ידני, ככה הכל נשמר נקי אחיד וקצר. לכן נלחץ OK מבלי לגעת בחלון הזה.

זהו, יצרנו קובץ CSS ואפילו פתחתו הגדרת עיצוב עבור תגית הBODY.
אתם יכולים לראות כעת את הקוד המעודכן בקובץ הHTML שלכם עם הפניה לקובץ CSS בתגית LINK בתוך תגית HEAD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
</body>
</html>

בנוסף נפתח לכם קובץ חדש style.css שם נגדיר את כל העיצובים שלנו.

  • נשמור את שני הקבצים (Ctrl +S).
  • עברו לקובץ style.css. שם נוסיף מתחת לשורה של body את הגדרת העיצוב לרקע שלנו:
@charset "utf-8";
body {
 background:url(../images/bodyBg.png) top left repeat-x;
}

קצת הסברים:

  • המילה background מגדירה לנו את הרקע של האלמנט אותו בחרנו לעצב.
  • url מגדיר לנו נתיב לקובץ אותו אנחנו רוצים להציג ברקע.
  • top left מגדיר את המיקום של התמונה יחסית לאובייקט, במקרה שלנו התמונה תתחיל מתחילת העמוד למעלה בצד שמאל.
  • repeat-x מגדיר לנו את אופן החזרה של התמונה על ציר מסויים, במקרה שלנו ציר ה – X.

עכשיו נוסיף את הלוגו שלנו.

  • בקובץ index.html נוסיף מתחת לתגית BODY תגית DIV חדשה ובתוכה תגית תמונה:
<body>
<div>
 <img src="/images/logo.png" width="166" height="99" />
</div>
</body> 

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

נוסיף לתגית DIV קלאס (CLASS) שאליו נשייך עיצוב.

  • בתוך תגית הDIV נוסיף קלאס בשם logoDiv, כך יתאפשר לנו להגדיר עיצוב עבור ה DIV הזה ספציפי בקובץ הCSS שלנו בהמשך:
<div>
 <img src="/images/logo.png" width="166" height="99" />
</div> 
  • נוסיף DIV נוסף עבור הטקסט שלנו וניתן לו קלאס בשם "textDiv". כעת הקובץ שלנו ייראה כך:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<divclass="logoDiv">
 <img src="/images/logo.png" width="166" height="99" />
</div>
<divclass="textDiv">
This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
</div>
</body>
</html> 
  • נשמור את הקובץ (Ctrl + S) ונעבור לקובץ העיצוב שלנו style.css.
  • נוסיף מתחת להגדרת הBODY את העיצובים עבור logoDiv והעיצובים עבור textDiv (הוספתי גם הגדרת מרווחים חיצוניים ופנימיים עבור תגית BODY, הסברים לאחר הקוד):
@charset "utf-8";
body {
 background:url(../images/bodyBg.png) top left repeat-x;
 margin:0;
 padding:0;
}
div.logoDiv {
 float:left;
 width:166px;
 height:99px;
 margin:18px 0 0 10px;
}
div.textDiv {
 float:left;
 width:568px;
 border:4px solid #88785e;
 background:#f7f7f7;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#878787;
 margin:30px 0 0 25px;
 padding:10px;
} 

הסברים:

  • הוספתי ל BODY הוספתי margin (רווח חיצוני) ו padding (רווח פנימי). עבור שניהם כתבתי "0" כלומר, המרווחים הפנימיים והחיצוניים של תגית BODY יהיו 0 (שיטה טובה לאפס הגדרות עבור כל דפדפן).
  • הוספתי ל logoDiv הגדרת Float – זה אומר לDIV "להידחף" לכיוון אותו אני בוחר, במקרה שלנו שמאלה.
  • בנוסף הגדרתי לו רוחב וגובה בפיקסלים בדיוק כמו הגודל של התמונה שחתכנו ושמרנו.
  • הוספתי לו גם מרווחים חיצוניים (margin) בכתיבה מקוצרת: המספר השמאלי ביותר מייצג את המרווח העליון, השני משמאל מייצג את המרווח מצד ימין, השלישי משמאל מייצג את המרווח למטה והימני מייצג את המרווח משמאל. הדרך הכי קלה לזכור, זה להתחיל מלמעלה וללכת בכיוון השעון. הכתיבה המקוצרת תקפה גם עבור מרווח פנימי (padding).
  • הוספתי לtextDiv גם הגדרת Float שתצמיד את ה DIV הזה לדיב שמשמאלו (תחשבו על זה קצת כמו טטריס וזה יסתדר לכם בראש).
  • הגדרתי לו גם רוחב בהתאם לעיצוב שלנו אך לא הגדרתי גובה על מנת לאפשר ל DIV להמשיך למטה במידה וישנו טקסט ארוך יותר.
  • הגדרתי גבול (border) עבורו ברוחב 4 פיקסלים, גבול רציף (solid) בצבע חום (#88785e).
  • הגדרתי צבע רקע (background) לאפור בהיר.
  • הגדרתי סוג פונט גודל פונט וצבע פונט.
  • הגדרתי מרווחים חיצוניים (margin) ורווח פנימי אחיד לכל הכיוונים (padding) בכתיבה מקוצרת מאוד, פשוט את המרווח במספר אחד במקום להגדיר לכל כיוון.

נשמור את הקובץ ונציג את הדף בדפדפן שלנו (קיצור דרך – F12).

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

  • תחילה יש להעלים את שכבת הטקסט על מנת לחתוך ללא הטקסט של התפריט (הטקסט יהיה טקסט חי בדף הHTML עצמו).
  • נסמן את אחד הרקעים של פריט בודד עם כלי הסימון, נעתיק אותו הפעם ללא מיזוג שכבות כדי שנוכל להציג גרפיקה ללא רקע (Ctrl + C), ניצור מסמך חדש (Ctrl + N) ונדביק (Ctrl +V).

dreamweaverHTML16

  • הפעם אנחנו רוצים להשיג גרפיקה ללא רקע, לכן נוריד את השכבת רקע הלבנה ונשמור (Alt + Shift + Ctrl + S) כGIF בשם "menuItemBg":

dreamweaverHTML17

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

  • כבו את השכבה "Menu BG" והדליקו את "Menu BG hover".
  • חיזרו על פעולת החיתוך ושמירת התמונה: נעתיק (Ctrl + C), ניצור מסמך חדש (Ctrl + N), נדביק (Ctrl +V), נכבה את שכבת הרקע הלבנה ונשמור (Alt + Shift + Ctrl + S) כGIF בשם "menuItemBgHover".

dreamweaverHTML18

dreamweaverHTML19

בחזרה ל Dreamweaver, נוסיף לעמוד שלנו רשימה (List) ובה יהיו הפריטים שלנו.

  • נוסיף את הרשימה בדיוק מתחת ל textDiv וניתן לה קלאס (Class) בשם "sideMenu"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
 <img src="/images/logo.png" width="166" height="99" />
</div>
<div>
This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
</div>
<ul>
 <li><a href="/demoPage.html">Menu Item 1</a></li>
 <li><a href="/demoPage.html">Menu Item 1</a></li>
 <li><a href="/demoPage.html">Menu Item 1</a></li>
 <li><a href="/demoPage.html">Menu Item 1</a></li>
 <li><a href="/demoPage.html">Menu Item 1</a></li>
</ul>
</body>
</html> 

<ul> היא תגית הפותחת רשימה ו <li> היא תגית הפותחת פריט ברשימה.
כל טקסט בתוך תגית <li> הוא לינק <a>.

  • נעבור לקובץ הגדרות העיצוב (style.css) ונוסיף הגדרות עבור התפריט שלנו:
ul.sideMenu {
 float:left;
 clear:left;
 width:166px;
 margin:10px 0 0 10px;
 padding:0;
}
ul.sideMenu li {
 list-style:none;
 margin:0 0 15px 0;
}
ul.sideMenu li a:link,
ul.sideMenu li a:visited {
 display:block;
 color:#716767;
 font-size:14px;
 font-weight:bold;
 background:url(../images/menuItemBg.gif) left bottom no-repeat;
 text-decoration:none;
 width:111px;
 height:18px;
 text-indent:13px;
}
ul.sideMenu li a:hover {
 color:#716767;
 background:url(../images/menuItemBgHover.gif) top center no-repeat;
 text-decoration:none;
} 

הסברים:

  • עבור הרשימה שלנו (ul) עם קלאס (sideMenu) הוספתי float לצד שמאל שיידחוף את כל הרשימה לצד שמאל ועל מנת לוודא שזה יישב מתחת ללוגו, הוספתי clear שאומר לרדת שורה מתחת לאובייקט אחר. הגדרתי לו גם רוחב ומרווח חיצוני (margin) למעלה ומצד שמאל והקפדתי לאפס מרווח פנימי (padding) מכיוון שכל דפדפן מציג מרווח שונה לרשימות.
  • עבור פריט ברשימה (li) בתוך הרשימה שלנו (ul) הורדתי את העיצוב האוטומטי של סימון פריט (העיגול בצד הפריט ברשימה) על ידי הגדרת סטייל (list-style). הוספתי לו גם מרווח חיצוני (margin) למטה.
  • עבור קישור (a) במצב רגיל (link) ובמצב שנלחץ בעבר (visited) בתוך כל פריט (li) בתוך רשימה (ul) הגדרתי סוג תצוגה כבלוק (display) על מנת שבמעבר עכבר כל השורה של הקישור תהיה לחיצה ולא רק האותיות. הגדרתי צבע, גודל פונט, ועובי פונט, כמו כן הגדרתי תמונת רקע במצב רגיל. text-decoration מגדיר לנו תוספות לטקסט כמו קו תחתי במצב ברירת מחדל בכל הדפדפנים, אצלנו הורדנו כל תוספת שכזו. הגדרתי גם רוחב וגובה ולבסוף מרווח טקסט מתחילת השורה (text-indent).
  • עבור קישור (a) במצב של מעבר עכבר (hover) הגדרתי צבע, רקע שונה ושוב ללא דקורציה נוספת לטקסט.
עמוד 1 מתוך 212