פרק 3: טריקים לאתר טוב יותר

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

אז מה יהיה לנו בפרק הזה? מה בתפריט?
אם בפרק הקודם נגענו בשאלה הראשונה שכל בונה אתרים מתחיל שואל את עצמו - והיא איך מעמדים אתר. אז השאלה הבאה צצה תמיד כאשר גולשים בכל מיני אתרים יפים ומעוצבים, שיש בהם כל מיני גרדיאנטים למיניהם, תפריטים יפים שמחליפים צבע כשעוברים עליהם (כמו באתר שלי למשל...) ועוד כל מיני טריקים שהופכים את האתר ליפה ומהוקצע יותר.
אז אני אענה לכם, שגם אני לא ממש יודע לבנות את התפריטים האלה לדוגמה, אבל אני הולך להסביר לכם בגדול איך הם בנויים, ולהפנות אותכם לאתרים שמשם תוכלו להוריד אותם בחינם (באופן חוקי כמובן!!!).
למעשה בנקודה הזו טמון היופי והעוצמה של האינטרנט. האינטרנט הוא באר מידע. לא באר, נהר. לא נהר, כאם ים. לא ים, כאם אוקיינוס המידע.
זוהי העצמה.
היופי הוא שכל אחד משתף את כולם בידע שלו, ביצירתיות שלו, וכך הוא מפרה את אוקיינוס המידע הענק ותורם את החלק הקטן שלו לפאזל הגדול של מארג המידע.
אני מאמין גדול בזכויות יוצרים, לכן אני אפנה אל מקורות חינמיים וחוקיים.
Cut The Bulshit! נצא לדרך:

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

אריק מאייר - בונה אתרים רציני ביותר, שאף כתב ספר על CSS מציע באתר שלו תפריטים מוכנים לשימוש:
http://css.maxdesign.com.au/listamatic/

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

14 תפריטים ב - CSS:
http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/
בחורצ'יק / בלוגר מוכשר שמציע כמה תפריטים יפים שהוא הכין להורדה חינם.

עוד תפריטים ב - CSS:
http://www.13styles.com/
עוד כמה תפריטים נחמדים - חלקם בחינם, חלקם בתשלום.
התפריטים החינמיים יפים, טובים ועושים את העבודה.

עוד אתר עם תפריטים בחינם:
http://www.cssmenumaker.com/


גרדיאנטים וכפתורים:
כמעט ברוב האתרים היום יש כל מיני גרדיאנטים עדינים ויפים כאלו, וכל מיני כפתורים עם פסים ומרקמים יפים עליהם.
נכון שזה שייך יותר לגראפיקה, שגם בה נעסוק כאן בהמשך המדריך, אך קצת טריקים לא יזיקו: 1) הטריק הראשון הוא בפריסה של הגרדיאנט:
אין צורך ליצור תמונה רחבה על מנת להעניק רקע גרדיאנטי משתנה לתיבה / איזור כלשהוא באתר. פשוט יוצרים תמונת גרדיאנט ברוחב של 1 או 2 פיקסלים, טוב אתם מתעקשים? 4-3 פיקסלים... ופורסים את התמונה לרוחב התיבה בעזרת המאפיינים:
background-image:url(.gif);
background-repeat:repeat-x;
כך אגב, אפשר ליצור גם כפתורים יפים רק על ידי הגדרת h3 לדוגמה , או כל אלמנט טקסטואלי אחר, שאתם מגדירים לו בורר מחלקה עם מסגרת כל שהיא, ותמונת רקע.
מאוד פשוט, מאוד יעיל.

בקישור הבא תמצאו הרבה גרדיאנטים ומרקמים יפים שאיזה הודי הכין:
http://www.dezinerfolio.com/2007/03/14/ultimate-web-20-gradients-free-download/
עקרונית, זה גרדאינטים שהוא הכין לפוטושופ, אבל אפשר פשוט ללחוץ על PrintScreen, ולעשות Crop לגרדיאנט המבוקש לרוחב תמונה של כמה פיקסלים בודדים וזהו.
את תנאי השימוש הוא רושם באתר. כעיקרון זה חינם, אבל יש כמה מגבלות - כמו לא להציע את זה להורדה תחת שם אחר.

אותם גרדיאנטים, רק לגימפ:
http://gimp-tutorials.net/30-Ultimate-Web-20+Layer-Styles-for+-Gimp

פינות מעוגלות:
אחד הטרנדים היום באינטרנט הוא תיבות עם פינות מעוגלות שמעניקות לאתר מראה עדין וחדשני. הטכניקה פשוטה - בעזרת משחקים עם 2-3 DIV-ים יוצרים תיבות עם פינות מעוגלות.
יש על זה הרבה מאמרים ברשת איך לעשות, והרבה אתרים ודוגמאות.
אני אביא כאן כמה קישורים טובים, אם מצאתם אחד יותר טוב - תעדכנו אותי במייל:
האתר פינות מעוגלות מייצר תיבות עם פינות עגולות בקלות - מומלץ מאוד:
http://www.roundedcornr.com/

השיטה המומלצת:
ת'כלס, הכי טוב, אבל הכי הכי טוב, זה מה שאני מנסה ללמד ולהטמיע לאורך האתר הזה: לימוד עצמי.
מה הכוונה?
פשוט מאוד, כל אתר יפה וטוב שאתם רואים - לנתח וללמוד.
לא להעתיק!!
ללמוד מהמקצוענים. לא להתבייש להקליק קליק ימני בעכבר , הצג מקור - או View Source ולראות איך בנויים אתרים. כמובן שעדיף ללמוד מאתרים מקצועיים ושבנויים נכון.
קחו לדוגמה את CSS Zen Garden:
http://www.csszengarden.com/
האתר הזה הוא למעשה אוסף של עיצובים שונים של אתרים שכולם מבוססים על אתר אחד.
כלומר, על מנת להדגים את העוצמה של CSS נבנה דף html שמשותף לכל העיצובים, שהתוכן שלו זה למעשה הסבר על האתר, שזה פרוייקט של מעצבי ובוני אתרים שונים וכו' וכו'. הרעיון הוא שכל עיצוב שונה מבוסס למעשה על גליון סגנון שונה.
הרעיון הוא להראות איך בקלות ניתן לשנות את העיצוב של האתר מקצה לקצה בלי לגעת ב - html, רק על ידי קריאה לקובץ CSS אחר.
את העיצובים השונים תרמו בוני אתרים מקצוענים מכל העולם (אני עדיין לא תרמתי עיצוב...) בכל מקרה, גם הקובץ html וגם קובץ ה - CSS ניתנים להורדה כך שניתן ללמוד בנייה נכונה, וגם קצת טריקים.

עוד אתר שמסביר איך להצמיד את ה - footer לתחתית בלי שימוש ב - Absolute:
http://ryanfait.com/sticky-footer

עוד קישור מומלץ לבוני אתרים: אתר שמספק תמונות להורדה חינם. חשוב!! לקרוא לפני כן את תנאי השימוש.
http://www.freedigitalphotos.net