מדריכים בעיצוב אתרים

[gkman]

שלום לכולם

אני גלשתי בכל מיני אתרים ופשוט נדהמתי מהעיצובים שלהם כמו האתרים שכאן:

http://www.zymic.com/free-templates/33/live-preview/

http://www.zymic.com/free-templates/140/live-preview/

http://www.zymic.com/free-templates/138/live-preview/

http://www.zymic.com/free-templates/121/live-preview/

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

חיפשתי אתרים שיכולים ללמד אותי לעצב ברמה כזו (שימו לב שאין לי רקע כ"כ גדול בפוטושופ)

מישהו יכול לעזור ולהביא כמה אתרים?

[AgentZ]

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

יש אתר מצויין (אחד מהפורום המליץ עליו , לא זוכר את השם :).

הכתובת שלו :

http://www.pixel2life.com/tutorials/adobe_photoshop/

[gkman]

מרפרוף באתר גילית שהכל נעשה בפוטושופ

איך מפוטושופ אני הופך את זה לאתר איטרנט?

[AgentZ]

זה תחום די רחב ...

אני יתחייס לאתר הראשון שהבאת בדוגמאות :

גוזרים תמונות ושמים אותם בתור תמונות רגילות ולתפריט נותנים לקישורים רקע . אבל אני לא הכי טוב בהסברים :-X ככה שאני ממליץ לך להיכנס באתר שנתתי לך לקטגוריה http://www.pixel2life.com/tutorials/adobe_photoshop/buttons_and_interfaces/ .

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

[gkman]

הבעיה שלי במדריכים האלו הם שהם מראים איך לעצב אותם בפוטושופ

מה שהם לא מראים זה את הקוד שכותבים בדפי הHTML

ואת זה אני לא יודע

איך הם משנים את הכפתור של התמונה כשעוברים עליהם? אני תמיד קורא כל מיני דברים עם סלייסים (slicing ) מה זה ? איך נעזרים בזה?

[AgentZ]

אני אמנם לא מומחה אך אנסה לענות על שאלותייך כמה שאני יכול .

1) אני לא מאמין שאוכל להסביר זאת יותר טוב מהמדריך הזה (כולל את כל מה שצריך , כולל קודי HTML וCSS) :

http://blog.rhfreelance.dk/make-an-optimized-slick-css-menu.html

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

קוד HTML :

<img src="bar_left.png" class="bar" />
<img src="bar_center.png" class="bar" />
<img src="bar_right.png" class="bar" />

קוד הCSS :

.bar{padding:0px;}

אז מה בעצם עשינו ? הצבנו את שלושת חלקי הבאר שלנו ונתנו להם CLASS שנקרא "BAR" , אח"כ הגדרנו בCSS שלקלאס אין מסגרת חיצונית (בכדי שהתמונות יהיו "דבוקות" ביחד)

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

[gkman]

הבעיה שלי זה לא רק התפריט -- הנה משהו שיסביר יותר טוב

http://hv-designs.co.uk/2009/07/02/wordpress-layout-5/

איך אני הופך דבר כזה לדף אינטרנט?

[AgentZ]

האם אתה מתכוון לדרך של איך להתאים את התבנית שהבאת לאתר וורדפרס או לאתר "רגיל" ?

[gkman]

ממה שהבנתי wordpress

זה פשוט מערכת שעובדת על PHP וMYSQL תוכנה כזאת שעושה בשבילך את הכל

אז אני רוצה לדעת קודם איך להפוך את זה לאתר רגיל אולי אחרי זה נבדוק את הwordpress

[urib]

ממה שהבנתי wordpress

זה פשוט מערכת שעובדת על PHP וMYSQL תוכנה כזאת שעושה בשבילך את הכל

אז אני רוצה לדעת קודם איך להפוך את זה לאתר רגיל אולי אחרי זה נבדוק את הwordpress

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

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

שילוב של פוטושופ+DW+פלאש, זה שילוב אידיאלי למי שרוצה לעצב ולבנות אתרי תדמית.

לגבי מערכות ניהול תוכן CMS כגון: ג'ומלה, דרופל, WP, אלו מערכות ניהול תוכן שמבוססות על שפת תיכנות צד שרת PHP.

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

הינה אינפורמציה על התוכנה DW:

http://www.quicksoft.co.il/index.php?option=com_content&view=article&id=32&Itemid=75

http://www.adobe.com/products/dreamweaver/