נכתב באוקטובר 1999

כתיבת דפי   WEB

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

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

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

רוב המידע המצוי בשרתי ה  WEB  , נכתב בשפת HTML. וגם אתה תבנה דף הכתוב בשפה זו.

על מנת ליצור קובץ HTML חדש , תשתמש בתוכנה לעריכת דפי WEB - ה FRONTPAGE EXPRESS.
התוכנה מאפשרת לשבץ בדף 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.
מתקבלת תיבת דו-שיח:
בחר בחלון את הכפתור as file ואת התיקיה הרצויה ותן שם לקובץ .
התוכנה מוסיפה את הסיומת htm ,
לדף הראשון צריך לקרוא index.htm
אם הדף ימוקם על שרת WEB ציבורי, תן שם באנגלית בלבד.
קבע כותרת לדף - בשורה הראשונה
כותרת זו תוצג בשורה העליונה של הדפדפן

כתיבה:
כתוב את שמך, לחץ על enter.
כעת כתוב פרטים על עצמך ובסוף לחץ על shift+enter.
הרווח שנוצר הוא שונה. רק הרווח מהסוג הראשון נחשב רווח אמיתי ב- FPE כל רווח אחר נחשב חלק מהטקסט. את צבע הפונטים ניתן לשנות על ידי לחיצה על פלטת הצבעים שבסרגל הכלים. את גודל הכתב ניתן לשנות על ידי האות A עם חץ קטן או גדול - שבסרגל הכלים.

רקע והתאמת צבעים 

מתוך תפריט 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.

 

כתובית מטיילת
הכנס לתפריט 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

להרחבה:

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

 

צפייה בדף המוכן 

כדי לבדוק את התוצאה הסופית ולאתר שגיאות , יש לטעון את הדף אל הדפדפן.

 





Site Meter