|
|
נכתב באוקטובר 1999 |
כתיבת דפי WEB
אתר אינטרנט הוא אוסף קבצים הקשורים זה לזה.
הקבצים נקראים עמודי WEB ויכולים להכיל טקסטים, גרפיקה, קולות, וידאו, קבצים להורדת תוכנות, אפקטים נוספים והיפר-קישורים.
היפר-קישורים (Links) יכולים להיות טקסט או תמונה, המקשרים בין חלקים שונים של אותו עמוד, עמודים שונים באותו אתר, מסמכים שונים או אתרים שונים ברשת.
עד לפני זמן לא רב,
יצירת אתר אינטרנט חייבה ידיעת שפת ה- HTML.
HTML - Hypertext Markup Language
היא אוסף פקודות היוצרות את המבנה והעיצוב של כל עמודי ה- WEB.
קובץ זה כולל תגיות = קודים המוסרים מידע כיצד יש להציג את העמוד,
וכן את הכתובות של כל קובץ אחר בו השתמשת.
הכתיבה ב- HTML אמנם מאפשרת שליטה מלאה בעיצוב, אך דורשת מיומנות רבה.
כדי להקל על בניית אתרים נוצרו תוכנות שונות (עורכי דפי WEB) המנהלות את פקודות ה- HTML
בעבורנו,
למשל, תוכנת ה- פרונט פייג.
על-מנת לראות את אוסף פקודות ה- HTML הבונות דף אינטרנט, לחץ על לחצן ימני של העכבר ובחר ב'הצג מקור' (source).
עכשיו, הגיע הזמן לבנות אתר משלך.
שלב ראשון: החלטה על מה יהיה נושא האתר
שלב שני: איסוף חומרים
שלב שלישי: כתיבה ובדיקה
שלב רביעי: העלאה לרשת
רוב המידע המצוי בשרתי ה WEB , נכתב בשפת HTML.
וגם אתה תבנה דף הכתוב בשפה זו.
על מנת ליצור קובץ HTML חדש ,
תשתמש בתוכנה לעריכת דפי WEB - ה FRONTPAGE EXPRESS.
התוכנה מאפשרת לשבץ בדף WEB ,את האלמנטים הבאים:
טקסט ( עברי/ אנגלי)
גרפיקה – איורים, תמונות, תצלומים ואנימציות.
קישורים – אלמנטים המשמשים לקישור הדף הנוכחי עם דף WEB אחר.
מולטימדיה – סרטי וידאו, קובצי קול.
אובייקטים המבצעים פעולות מיוחדות –כפתורים, לחצנים, טפסים לאיסוף נתונים וכדומה.
לאחר שיבוץ האלמנטים הרצויים, ניתן להעביר את דף הWEB לשרת מקומי או ציבורי כלשהו ,כך שיהפוך נגיש להמוני משתמשים.
אופי העבודה בתוכנה דומה מאד לעבודה עם word - כי הם מאותה משפחה.
עבודת הכנה:
למרות שהתוכנה לעריכת דפי WEB מאפשרת הקלדת טקסט באנגלית , ישירות לתוך הדף,
רצוי להכין את קטעי הטקסט, כתובים מראש במעבד תמלילים כלשהו (Word) .
יש ליישר את הכיתוב לשמאל (באנגלית) או ימין (בעברית) ואין להחיל עיצובים כלשהם (הדגשה, הטיה, שינוי צבע ).
פעולות עיצוב הטקסט נעשות בתוך תוכנת העריכה עצמה.
אלמנטים גראפיים יכולים להגיע ממקורות שונים :
תמונות סרוקות, תמונות אשר יובאו מדפיWEB אחרים ברשת האינטרנט, או גרפיקה אשר
יצרתם בעצמכם , בעזרת תוכנה גראפית כלשהי.
למרות שקיימים פורמטים (סוגים) רבים של קבצים גראפיים, רק שלושה נתמכים (מוכרים) ,
בדפי WEB :
· *.GIF
· *.JPG
· *.PNG
הקפד לשמור את כל התמונות בתיקיית המשנה "img" אשר תחת תיקיית הפרויקט הראשית.
וודא שכל האלמנטים הגראפיים שמורים באחד משלושת הפורמטים המותרים.
תמונות קטנות משפרות את יעילות דף הWEB .
על תמונות שיובאו מהאינטרנט, חלים חוקי זכויות יוצרים.
קובצי קול או וידאו , משובצים בדף הWEB , באותו אופן בדיוק בו משובצות תמונות.
אם ברשותך קובץ מולטימדיה, הקפד על הפורמטים הבאים:
עבור קבצי וידאו:
*.AVI
*.MOV
עבור קבצי קול:
*.wav ; *.mid ; *.au
*.ram ; *.ra
ו פורמט *.MPG לקבצים משולבים.
הגדל את חלון התוכנה למקסימום.
על מנת שהקישורים יוכרו בהמשך, יש לשמור את הדף (שם באנגלית או ספרות, עד 8 תווים).
בחר בתפריט file , את הפקודה save as.
מתוך תפריט FORMAT
בחר בפקודה BACKGROUND בחר צבע רקע או השתמש בקובץ גרפי קיים. קבע ערכים לצבעי ברירת המחדל עבור טקסטים וקישורים. הסמן המהבהב, מסמן את מיקום כתיבת הטקסט. ניתן להשתמש במקש ENTER , על
מנת להורידו לשורה הבאה. כתיבת טקסט יכולה להיעשות, ישירות אל תוך הדף באותה שיטה כמו בכל מעבד
תמלילים. פתח את מעבד התמלילים (WORD ) וסמן את
קטע הטקסט המיועד להעברה. בצע פעולת העתקה לזיכרון – מתפריט עריכה
בחר בפקודה העתק. חזור לעורך דפי הWEB ,והבא את
הסמן לתחילת השורה, בה הנך מבקש לקבל את הקטע. בצע פעולת הדבקה מהזיכרון – מתפריט עריכה
בחר בפקודה הדבק.
רצוי להמיר את הטקסט ל"כתב ראי" ולשנות את הקידוד ל
>META
HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-8"> פעולות עריכת טקסט, נעשות בצורה דומה לעריכה במעבד תמלילים. הפעולות האפשריות: ·
הדגשה, הטיה , סימון בקו תחתון. ·
שינוי גופן, גודל אות וצבע. ·
יישור לימין , יישור לשמאל ומרכוז. כל הפעולות הללו זמינות מתוך סרגל הכלים הממוקם בראש הדף. הקפידו לסמן את הקטע לפני ביצוע העריכה. הוספת אלמנט גרפי הביאו את הסמן אל תחילת השורה הריקה הבאה. מתוך תפריט INSERTבחרו
בפקודה IMAGE . לחצו BROWSE וסמנו את התמונה המיועדת להשתלה. אשרו. הקישו בעזרת העכבר על התמונה , ושימו לב למסגרת המקיפה שנוצרה. היצמדו לאחד הגבולות ובצעו פעולות של לחיצה + גרירה , כדי למתוח או
לכווץ. השתדלו לשמור על פרופורציות על מנת לא לעוות את התמונה המקורית. ניתן לבצע פעולות יישור באותו אופן בו מיישרים קטעי טקסט. הוספת קישורים קישור או "מילה-חמה" הוא אובייקט כלשהו ( קטע טקסט או
תמונה ), המשובץ כחלק אינטגרלי מדף הWEB ומתווה קשר אל דף WEB אחר. דף הWEB אשר אליו מכוון הקישור, יכול להיות ממוקם על אותו מחשב או
לחילופין על שרת אינטרנט אחר. הצבעה על קישור תגרום לדפדפן לטעון אוטומטית את דף הWEB המקושר. סמנו את הטקסט או את התמונה אשר ישמשו כאובייקט הקישור. בחרו בתפריט INSERT ומתוכו בפקודה HYPERLINK . לפניך יפתח חלון ובו שלוש לשוניות: א. קישור אל דף WEB הנמצא על שרת אינטרנט חיצוני - URL יש לכתוב את הכתובת הרצויה. אם תרצו להוסיף קישור
אל אתר המרכז בשלומי עליכם להקליד: http://www.shlomi.org.il , הקפידו ללוות את האתר בקידומת http://. ניתן לקשר דפים בתוך
האתר עצמו - open page ובחלון שנפתח בחר את שם העמוד אליו אתה רוצה לקשר.
¨
בבחירת malito ניתן לקשר את הקישורית לתיבת הדואר שלך. ב. קישור למסמך
אחר במחשב שלך - other ואז יש לכתוב את שם הקובץ. שים לב שיש להעלות קובץ זה על תיקית
האתר! ג. קישור לדף חדש שברצונך לכתוב - new
page ואז יש לתת
לו שם. בדיקת הקישוריות: העלה את המסמך דרך דפדפן
האקספלורר ובחן את הקישורים. ניתן לבחון את הקישוריות גם
בתוך ה- FPE : לחץ על אחד הקישורים כך שהסמן
נמצא בתוך הטקסט/תמונה. בחר מתפריט tools את follow
hyperlink , הדף
אמור להתחלף בתוך ה- FPE. צפייה בדף
המוכן כדי לבדוק את התוצאה הסופית
ולאתר שגיאות , יש לטעון את הדף אל הדפדפן. טבלאות הוספת טבלה ניתן לכתוב בתוכנה ללא טבלה
כפי שעשית עד עכשיו, אך עדיף לסדר את התוכן בטבלאות. בחר ב- table. לפניך ייפתח חלון עם כל
פקודות הטבלאות. בחר ב- insert. החלט על כמות השורות והטורים. אם התחרטת, ניתן
לשנות זאת דרך insert rows or columns שבאותו תפריט טבלאות. ברגע שהטבלה מוכנה ניתן לשנות
את הגודל של כל תא בנפרד, של טור או של שורה או של כל הטבלה ביחד. אם ברצונך לבחור: תא-עמוד
בתוכו עם הסמן. טור-עמוד עם הסמן בצד העליון
של הטור עד שהסמן יהפוך לחץ שחור ולחץ על הכפתור השמאלי של העכבר. כך נבחר טור
אחד, גרירה של העכבר תסמן טורים נוספים. שורה-עמוד עם הסמן בצד השמאלי
של השורה עד שיהפוך לחץ שחור ואז סמן אותה. טבלה שלמה-ניתן לסמן על ידי
גרירה של סימון טור או שורה. את כל האפשרויות הבאות ניתן
למצוא גם בתפריט ה- table. יש להחליט היכן למקם את הטבלה
עוד בתפריט של הכנסת הטבלה. כדי לשנות גודל ושאר מאפייני
החלקים כצריך לבחור ב- cell properties או ב- table
properties. ולתת ערכים באחוזים - בכדי שיראה אותו דבר
בכל מקום. קו אנכי הכנס לתפריט insert ובחר ב- horizontal
line. על המסך
יופיע קו אנכי, אם תעמוד עם העכבר על הקו ותלחץ פעמיים על מקש שמאלי יופיע חלון
ובו אפשרויות עיצוב הקו. עצב ובסיום לחץ על O.K. סרגלי הכלים: להרחבה:
http://planet.nana.co.il/nurit2005/ המדריך של נורית הררי לבנית אתרים באמצעות פרונט פייג אקספרס,
ויש שם גם אפשרות להורדת התוכנה
http://planet.nana.co.il/nurit2005/tochnot.html וגם http://construct.haifa.ac.il/courses/virtualworld/front2.htm תוכנות נוספות לבניית אתר Word Dreamweaver- Macromedia צפייה בדף המוכן כדי לבדוק את התוצאה הסופית ולאתר שגיאות , יש לטעון את הדף אל
הדפדפן.
מתקבלת תיבת דו-שיח:

בחר בחלון את הכפתור as file ואת התיקיה הרצויה ותן שם לקובץ .
התוכנה מוסיפה את הסיומת htm ,
לדף הראשון צריך לקרוא index.htm
אם הדף ימוקם על שרת WEB ציבורי, תן שם באנגלית בלבד.
קבע כותרת לדף - בשורה הראשונה
כותרת זו תוצג בשורה העליונה של הדפדפן
כתיבה:
כתוב את שמך, לחץ על enter.
כעת כתוב פרטים על עצמך ובסוף לחץ על shift+enter.
הרווח שנוצר הוא שונה. רק הרווח מהסוג הראשון נחשב רווח אמיתי ב- FPE כל רווח אחר נחשב חלק מהטקסט.
את צבע הפונטים ניתן לשנות על ידי לחיצה על פלטת הצבעים שבסרגל הכלים. את גודל הכתב ניתן לשנות על ידי האות A עם חץ קטן או גדול - שבסרגל הכלים.
רקע והתאמת צבעים
הכנסת טקסט אנגלי
השתלת טקסט כתוב מראש -
הכנסת טקסט עברי
עריכת טקסט
שינוי גודל התמונה
הכנס לתפריט insert ובחר ב- marquee כעת יפתח חלון:
ב- text רשמו את הנושא שלכם או את שמותיכם.
ב- direction בחרו ב- left.
ב- behavior כדאי לבחור ב- slide.
עצבו את הכיוונים ושאר המיקומים בהתאם לרצונכם. בסיום כרגיל לחצו על O.K.

http://www.edu-negev.gov.il/tapuz/motytp/atar/fp/fpxpress.exe
או כאן
http://www.mkm-haifa.co.il/schools/neemanim/azarim/fpxpress.exe