קטגוריות
מידע כללי

תכנון אתר אינטרנט

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

מהי מטרת האתר?

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

קהל יעד

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

איך מרוויחים מהאתר?

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

שאלות, רעיונות והצעות לכתוב בתגובות, תודה.

קטגוריות
תיכנות

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

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

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

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

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

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

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

[learn_more caption="למדריך המלא"]

  1. יצירת פרוייקט חדש בDreamweaver.
  2. כתיבה נכונה של HTML ומרכיבי הדף.
  3. חיתוך גרפיקה מקובץ PSD (פוטושופ) והטמעה בHTML.
  4. הבדלים בין טבלאות (TABLE) לדיבים (DIV) ושימושיהם.
  5. העלאת הדף לאינטרנט.

[/learn_more]

קטגוריות
תיכנות

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

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

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

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

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

[learn_more caption="למדריך המלא"]

  1. יצירת פרוייקט חדש בDreamweaver.
  2. כתיבה נכונה של HTML ומרכיבי הדף.
  3. חיתוך גרפיקה מקובץ PSD (פוטושופ) והטמעה בHTML.
  4. הבדלים בין טבלאות (TABLE) לדיבים (DIV) ושימושיהם.
  5. העלאת הדף לאינטרנט.

[/learn_more]

קטגוריות
תיכנות

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) הגדרתי צבע, רקע שונה ושוב ללא דקורציה נוספת לטקסט.

[learn_more caption="למדריך המלא"]

  1. יצירת פרוייקט חדש בDreamweaver.
  2. כתיבה נכונה של HTML ומרכיבי הדף.
  3. חיתוך גרפיקה מקובץ PSD (פוטושופ) והטמעה בHTML.
  4. הבדלים בין טבלאות (TABLE) לדיבים (DIV) ושימושיהם.
  5. העלאת הדף לאינטרנט.

[/learn_more]

קטגוריות
תיכנות

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

2. כתיבה נכונה של HTML ומרכיבי הדף

נתחיל מההתחלה, מה זה HTML?
HTML (ראשי תיבות של HyperText Markup Language) היא שפת תגיות (markup language) ליצירה ועיצוב עמודי אינטרנט (להרחבה אפשר בWIKI).

בואו ניצור עמוד HTML ראשון.

  • נלחץ בתפריט הראשי על Files > New וייפתח לנו חלון אפשרויות, כרגע נבחר את האופציה הכי פשוטה שהיא HTML ונלחץ Create.

dreamweaverHTML3

  • ייפתח מולנו עמוד חדש שמכיל את התגיות הבאות:
<!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>
</head>

<body>
</body>
</html>

להלן הסברים על כל חלק:
את דף הHTML נפתח בתגית DTD שתסביר לדפדפן איך לקרוא את העמוד שכתבתם:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

לאחר מכן תגית הHTML המציינת פתיחת מסמך HTML (ליד המילה "html" יש תוספת שמגדירה כי המסמך הזה הוא למעשה XHMTL – מסמך דומה לHTML משולב אלמנטים נוספים):

<html xmlns="http://www.w3.org/1999/xhtml">

תגית הHEAD תכיל את כל האלמנטים הקשורים בקבצים נוספים (כגון מסמך עיצוב – CSS, אפליקציות ג'אווה סקריפט – Java Script וכדומה).
תגית META המופיעה מתחת לHEAD היא תגית המגדירה את הקידוד בו נשתמש בעמוד, אני נוהג להשתמש בקידוד UTF-8 לכל השפות, כך האתר שלנו ייראה בכל מערכת הפעלה ודפדפן בקידוד הנכון. ישנן תגיות META נוספות המשמשות לתיאור העמוד ומילות מפתח לשימושי מנועי חיפוש ואינדוקס האתר.
לאחר מכן תגית הTITLE תגדיר לנו את כותרת העמוד (זאת שמופיעה בראש הדפדפן):

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

ולבסוף תגית BODY שלתוכה נזין את כל תוכן העמוד שלנו:

<body>
</body>

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

<img alt="" src="/imageName.jpeg" />

או למשל תגית META מתוך הHEAD:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • נשמור את העמוד (Ctrl + S) בתור "index.html" בתוך התיקיה הראשית שבחרנו לפרוייקט.

[learn_more caption="למדריך המלא"]

  1. יצירת פרוייקט חדש בDreamweaver.
  2. כתיבה נכונה של HTML ומרכיבי הדף.
  3. חיתוך גרפיקה מקובץ PSD (פוטושופ) והטמעה בHTML.
  4. הבדלים בין טבלאות (TABLE) לדיבים (DIV) ושימושיהם.
  5. העלאת הדף לאינטרנט.

[/learn_more]

קטגוריות
תיכנות

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

לאחר שיחה קלה עם שותפה שלי שלומדת עיצוב (Illustrator, Photoshop, Flash, Dreamweaver), הבנתי שיש בלבול רב בנושאים הנלמדים. לכן, החלטתי לעזור לה (ולכם) ולכתוב על איך לבנות דף HTML בסיסי לאחר שיש לכם כבר עיצוב מוכן (על איך לעצב אכתוב בפוסטים עתידיים).
מסתבר שזה פוסט ממש ארוך, לכן הוא יהיה בחלקים.

אסביר על:

  1. יצירת פרוייקט חדש בDreamweaver.
  2. כתיבה נכונה של HTML ומרכיבי הדף.
  3. חיתוך גרפיקה מקובץ PSD (פוטושופ) והטמעה בHTML.
  4. הבדלים בין טבלאות (TABLE) לדיבים (DIV) ושימושיהם.
  5. העלאת הדף לאינטרנט.

1. יצירת פרוייקט חדש בDreamweaver

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

  • נפתח את חלונית הFiles שלנו (במידה והיא סגורה יש ללחוץ בתפריט העליון על Window > Files, או קיצור מקשים F8).
  • על מנת ליצור פרוייקט חדש, נלחץ על הכפתור בחלונית ה Files, נבחר Site ואז New Site כמו בדוגמה הבאה:

dreamweaverHTML1

  • ייפתח מולנו חלון הגדרות אתר:

dreamweaverHTML2

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

*(שימו לב שבתוך חלונית Files יופיעו קבצים ותיקיות בהתאם לתיקיית היעד שקבעתם במחשב שלכם, במידה והתיקיה ריקה, תופיע רק תיקיית השורש).

קטגוריות
וידיאו

עוד מוכשר

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

קטגוריות
מידע כללי

ציוד לעבודה מהבית

הפוסט הזה מוקדש לציוד. הגאדג'טים והמחשבים בהם אני משתמש כדי לעבוד.
אתם מוזמנים לכתוב בתגובות באיזה ציוד אתם משתמשים ועל מה אתם ממליצים מניסיונכם.
המחשב הראשי שלי מורכב ממעבד אינטל דואלי (שתי ליבות), במהירות של 2.83 ג'יגה הרץ, 2 ג'יגה זכרון (633 מגה הרץ). הוא מספיק לרוב סוגי העבודות הגרפיות והתכנות וגם מריץ פלאש מורכב ממש טוב, נתקל בבעיות בהרצת אפטר אפקטס. הייתי מוסיף עוד 2 ג'יגה זכרון וזה היה מספיק לדעתי.
שני הארדיסקים בתוך המחשב (250 ג'יגה ו300 ג'יגה) – אני מאוד ממליץ להפוך אחד מהם להארדיסק התקנות, כזה שיכיל את כל התוכנות המותקנות, והשני ישמש לעבודה, כלומר יישמרו עליו הפרוייקטים ותוכנות כמו פוטושופ יריצו עליהם את הקבצים הזמניים, זה משפר בביצועים, במיוחד בעבודה על וידיאו וקבצי תמונה גדולים במיוחד.
מחוץ למחשב מחובר עוד הארד דיסק לגיבויים (500 ג'יגה) ובקרוב יצטרף אליו חבר חדש בנפח של 1 טרה לפחות.
למחשב מחוברים שני מסכים: מוניטור CRT (שפורפרת) של LG בגודל 19 אינץ' ומסך רחב 22 אינץ' של AOC.
הכל מחובר לUPS (סוללת גיבוי) – אני ממליץ בחום, חוסך הרבה משברים בהפסקות חשמל, ובאופן כללי מייצב מתחים כך שהמחשב שלכם נשמר קצת יותר טוב ומקבל זרם אחיד.
wacoma Intous 3 A5 wideחיברתי סט אלחוטי של מייקרוסופט של מקלדת ועכבר, אבל בעכבר אני לא משתמש כי חיברתי טבלט (TABLET) של WACOM בגודל A5 רחב מסדרת Intuos 3 (נכון להיום יצאה הסדרה החדשה Intous 4 ואני שוקל בחום להחליף לאחד חדש מהסדרה הזו). הלוח הגרפי הוא אחת הקניות היותר מוצלחות וזו פשוט חוויה שונה לגמרי, ממליץ בחום.
יש לי מחשב נוסף במידה והראשי קורס, שהוא AMD ישן ופחות מעניין, נקווה שלא אזדקק לו.
samsungOmniaבנוסף רכשתי לפני מספר חודשים NETBOOK של ASUS, התקנתי עליו windows 7 והוספתי ג'יגה זיכרון (סה"כ 2), זה מחשב מעולה לפגישות, גלישה באינטרנט וכתיבת מסמכים כמו הפוסט הזה. מדי פעם יוצא לי לעבוד על Dreamweaver שעובד לא רע ומעט Photoshop שעובד לא משהו, אבל מספיק לי לגרפיקות קטנות כמו תמונות לכפתורים ועריכה קלה לתמונות עבור הפוסטים. אגב הדגם הספיציפי הזה מגיע עם סוללה שמחזיקה 9 שעות עבודה! אחרי מחקר ארוך ומייגע, מצאתי שזה המחשב היחידי שמחזיק כל כך הרבה זמן.

הציוד המשלים זה המחשב כף יד סלולרי של סמסונג Omnia , מכשיר מעולה עם Windows mobile 6.1 לדעתי שווה יותר מכל iphone, עליו התקנתי אפליקציה שהופכת את המכשיר ליותר נעים ויזואלית, אפשר להתקין עליו כל דבר, GPS מובנה, מסך מגע ובכלל שומעים איתו מצויין.

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

קטגוריות
תיכנות

הסבר על DTD

DTD
(Document Type Definition) – הגדרת סוג מסמך, היא תגית זיהוי אשר שייכת לחלקו העליון של כל עמוד אינטרנט. היא מבצעת משימה כפולה – מצד אחד, היא עוזרת לכם לכתוב קוד נכון, ומצד שני היא עוזרת לדפדפנים לקרוא קוד זה נכון. איך, אתם עשויים לשאול, יכולה תגית זו לעשות זאת? המשיכו לקרוא.
‏אם אתם מעצבים, אתם ללא ספק מודעים למבנה הבסיסי של עמודי אינטרנט. ישנם שני חלקים עיקריים בתוך מסמך:

<html>
    <head>Header Data</head>
    <body>Visible Content</body>
</html>

הנ"ל קרוב לוודאי יהיה מאוד מוכר לכם. בתקווה, אתם תהיו מודעים למאות התגיות האחרות אשר זמינות לשימוש. אבל האם ידעתם שהקוד הבא יכול להיות גם נכון וגם לא נכון?‏

<P align="center">Text here</P>

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

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

אז, ‏DTD‏ חיוני לכל דף. הוא שמיש על ידי מוודאי קוד (‏validators‏) לקביעת השפה בה אתם כותבים, כך שהם יוכלו לבדוק את הקוד שלכם (ואם אתם מעצבי רשת שלא מוודאים את הקוד שלכם, אתם צריכים לשנות את הדרכים שלכם… או לשקול קריירה חדשה). ‏DTD‏ שמיש על ידי דפדפנים לפענוח דפים. ואם אתם יודעים מהי השפה בה אתם כותבים, אתם יכולים להשתמש בתגיות וב – ‏markup‏ (השפה שקובץ ‏HTML‏ בנוי ממנה) הנכון לכל חלק מהדף שלכם, לעזור לו להיות נכון סמנטית.‏
DTD‏ נוצר משני חלקים, ונראה כמו זה:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

הנ"ל הוא ‏DTD‏ ל – ‏XHTML 1.1‎‏. למספר שפות יש ווריאציות שונות (למשל, ‏HTML‏ יכול להיות ‏Strict‏ (לכתיבה נכונה ומדויקת של דפים), ‏Transitional‏ (לדפים עם תגיות מגוונות או שאינן כתובות עם קוד מושלם), או ‏Frameset‏ (לדפים עם ‏Frames‏)), ואחרות, כמו ‏XHTML 1.1‎‏ ללא. לכל אחת מהווריאציות האלה יהיה ‏DTD‏ משלה גם כן. חלקן דורשות אותיות גדולות ב – "‏HTML‏" וחלקן אותיות קטנות. כל אחת מהן יכולה להימצא באתר של ‏W3C‏, ורשימה קצרה של היותר שכיחות נכללו בדף הבא.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

זה קשה להוסיף ‏DTD‏ לאחר שהעמוד נכתב, במיוחד אם אתם משתמשים ב‏CSS‏ להצגת מראה ותבנית. כאשר דפדפן יוצא מ"‏Quirks Mode‏" ומציג את הדף נכון, מרבית ה – ‏Positions‏, ‏Margin ‎‏ ו – ‏Padding ‎‏ (מאפייני תגית מעוצבת בתוך מסמך ‏CSS‏), עשויים להיראות בצורה שגויה.

אם תרצו להוסיף ‏DTD‏ לדף שכבר נכתב, אתם הולכים להיתקל במספר בעיות. זאת עובדה. זה לא עושה את זה פחות כדאי להוסיף אחד. בנוסף לכל, אתם יכולים להיות בטוחים שתזכרו להוסיף אותו ראשון באתר הבא שתכתבו. אתם תעדיפו ללכת על ‏DTD‏ "‏Transitional‏", שמאפשר לכם גמישות יחסית (‏Transitional DTD‏ היא שפה המאפשרת תגיות שעברו זמנן, כמו "<‏b‏>", ובאופן יחסי וותרנית, בשונה מהשפות הנוקשות).‏
אם מעולם לא ביצעתם אימות דף בעבר (ואם אין לכם ‏DTD‏, הסיכויים הם שלא הייתם מצליחים לבצע ווידוא של הקוד שלכם), קרוב לוודאי שאתם תעדיפו את ‏HTML 4.0 Transitional DTD‏, למטה. הוסיפו זאת לחלק העליון של הדף שלכם, ואשרו זאת עם אחד מכלי האימות הקיימים ברשת. תקנו את ה"באגים" שמצאתם, ואז הביטו בדף שלכם בדפדפן. אם השתבשו דברים, זה יהיה בתוך הקוד – ‏CSS‏ או ‏HTML‏ – ולא ידרוש זמן רב לתיקון.
בזמן שלכל עמוד שלכם יש ‏DTD ‎‏ מתאים, אתם יכולים להיות רגועים, בידיעה שתוכנות מבינות ומציגות את העמודים שלכם, בידיעה באיזו שפה הם כתובים ולאיזה סוג של חוקים לציית. אם העמוד שלכם עובר אימות, אתם יודעים שהקוד שכתבתם די קרוב למדויק, אף על פי כמובן ש validator‏ לא יכול לבדוק את הסמנטיקה של מסמך. לסיום, אתם יודעים שעכשיו כאשר הדפדפנים יודעים איזה שפה להציג, יש סיכוי טוב שכל אחד שמבקר באתרכם רואה פחות או יותר את אותו הדבר.

DTD‏ שכיחים
הרשימה הבאה היא רשימה של ‏DTD‏ שנמצאים לרוב בשימוש ברשת. אם אין לכם ‏DTD‏ בעמודים שלכם, הסיכויים הם שזה צריך להיות אחד מהבאים:‏

  • XHTML 1.1
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • XHTML 1.0 Strict
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • XHTML 1.0 Transitional
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • XHTML 1.0 Frameset
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • HTML 4.01 Strict
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • HTML 4.01 Transitional
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • HTML 4.01 Frameset
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  • HTML 3.2
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
  • HTML 2.0
    <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

Original Article

קטגוריות
וידיאו

מי מוכשרת?

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