בניית אתרים באמצעות FrontPage

תכנון האתר, תוכן ומבנה
חשוב על יעדי האתר המתוכנן: למי הוא מיועד – ילדים, מבוגרים, בקיאים באינטרנט או מתחילים, אנשי מקצוע, בעלי עניין מיוחד או קהל רחב, מי שמגיעים במקרה לאתר או קהל יעד מכוון, דוברי עברית, אנגלית או שניהם, מה הוא צריך להשיג – הרכשת ידע, שינוי עמדות, מכירה, אספקת מידע, בניית קהילה, האמצעים הטכנולוגיים של קהל היעד – מחשבים מהירים \ איטיים, דפדפן Explorer \ Netscape. על פי מאפיינים אלה תכנן את התכניםהמתאימים ביותר – אופי התכנים ניסוחם, מידת המקצועיות. תכנן את מבנה הדפים והאתר – מה המבנה היעיל ביותר להשגת המטרה, מה המבנה הנוח ביותר למשתמש המיועד. הכן תרשים של מבנה האתר עם הדפים שבו, כותרת כל דף והקישורים ביניהם.

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

כתיבה ועיצוב של הדפים
לאחר שבנית את השלד, תוכל לראות את כל הדפים (אם לא סגרת אותם) תחת תפריט Window, לפתוח ולערוך כל אחד מהם. אם הספקת לסגור את הקבצים, תוכל לפתוח אותם להמשך עריכה באמצעות Browse < Open < Fileומשם בחר את התיקייה שיצרת עבור האתר ומתוכה את הקובץ שברצונך לערוך.

בקרה
זכור ש-Front Page היא תוכנת עריכה ולא דפדפן. מבקרי האתר יצפו בו באמצעות דפדפן כמו Explorer או Netscape ולא באמצעות Front Page. לכן בדוק כל הזמן איך נראה הדף שלך בדפדפנים אלה. איך תעשה זאת: במקביל לעבודתך ב-Front Page, פתח דפדפן Explorer, פתח בתוכו מן המחשב את הקובץ עליו אתה עובד (Browse > Open > File בחר קובץ) וראה איך הוא נראה ואיך פועלים הקישורים. חזור ל- Front Page מבלי לסגור את אקספלורר והמשך לערוך את הדף. עם כל שינוי משמעותי שאתה עושה בדף, בצע שמירה וחזור לחלון Explorer. כדי לראות את הדף המחודש, עם השינוי שבצעת, לחץ על Refresh.

פתיחת קבצים חדשים ושמירה

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

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

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

ראשית, הכן תיקיה שבה יישמרו כל הקבצים הקשורים באתר, קבצי html (הדפים שמכינים ב-Front Page) וקובצי תמונות.

לחץ על צלמית שמירה  או Save < File ורשום תחת Page Title את כותרת הדף. שים לב, לכל דף באתר רצוי לתת כותרת שונה. הכותרת יכולה להכיל יותר ממילה אחת אבל מומלץ להסתפק ב1-7 מילים. אם האתר נועד לקוראי אנגלית רצוי לכתוב את הכותרת באנגלית. לאחר רישום הכותרת, לחץ על As File (לא ללחוץ OK!).

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

התיבה הבאה היא תיבת השמירה הרגילה Save As File. בתיבה זו יש להגיע לתיקיה המוקדשת לאתר, לרשום את שם הקובץ – מילה אחת באנגלית וללחוץ Save. מומלץ לתת לדף הראשי באתר את השם index.

בהמשך העבודה בצע שמירה כל רבע שעה לערך ע”י לחיצה חוזרת על צלמית השמירה.

עיצוב הטקסט והדף

סרגל הכלים של Front Page

כתיבה ועיצוב טקסט ב-Front Page נעשים באופן דומה מאוד למעבד התמלילים Word. התחל מסמך עברי בלחיצה על לחצן הכתיבה מימין. כדי לעבור שורה אין צורך להקישEnter אלא להמשיך לכתוב והתוכנה עוברת בעצמה לשורה הבאה. הקשה עלEnter מתחילה פיסקה חדשה ברווח של שורה מהשורה הקודמת. אם ברצונך להתחיל שורה חדשה ללא רווח מהקודמת, הקש Shift-Enter. (החזק את האצבע לחוצה על Shift והקש תוך כדי כך על Enter). בכתיבה עברית מומלץ להשתמש בגופן Ariel בלבד בגלל שדפדפנים רבים אינם יכולים לקרוא אותיות עבריות אחרות בכיוון הנכון.

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

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

יצירת טבלאות

נקדים כאן את נושא יצירת טבלאות כיוון שהן משמשות גם לשילוב נאות של תמונות.
טבלאות יוצרים באמצעות לחצן הטבלאות (כמו ב-Word) או באמצעות תפריט Insert Table < Table. כאן יש לציין את מאפייני הטבלה:

מספר שורות

מספר עמודות

סדר העמודות (משמאל לימין או מימין לשמאל)

יישור

רוחב השוליים

המרחק בין השוליים לתוכן התאים

המרחק בין התאים

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

אפשר לשנות את מאפייני הטבלה גם לאחר הצבתה בדף ע”י הגעה עם הסמן אל הטבלה, לחיצה על לחצן ימני בעכבר ובחירת Table Properties. למשל, שימוש בלחצן הטבלאות יוצר באופן אוטומטי טבלה בעלת גבולות ברוחב 0, בצד שמאל של המסך. סמן את הטבלה, לחץ על לחצן ימני בעכבר, בחר Table Properties וקבע Alignment Center, Border 2, Background Color Green. בצורה דומה ניתן לשנות מאפיינים של תאים בודדים: סמן תא או תאים אחדים בשורה או בעמודה, לחץ על לחצן ימני, בחר Cell Properties וקבע את המאפיינים הרצויים.

בנוסף לשימושים רגילים של טבלאות מומלץ להשתמש בהן לשם ארגון הטקסט והאלמנטים הגרפיים באתר.

• לשם תרגול, הכן טבלה עבור רשימת של 12 אנשים. לכל איש יש שם, גובה וצבע עיניים ומספר סידורי בהתחלה. לפיכך הטבלה תכיל 13 שורות (כולל כותרות) וארבע עמודות. צבע כל שורה לפי צבע עיני האיש. צבע את עמודת המספרים הסידוריים בצבע לבן. הדגש את הכתב בשורת הכותרות ובעמודת המספרים הסידוריים.
• כתוב את תוכן העניינים של האתר באמצעות טבלה: בצד אחד כותרות הנושאים ובצד שני תמונה הממחישה אותם.

הוספת תמונות

ניתן לשלב תמונות בדף האינטרנט, בצורת קבצים בפורמט jpg.*אוgif.*. ראשית, יש לאסוף את התמונות הרצויות בתוך התיקייה בה מאוחסנים דפי האינטרנט שלך (או בתיקיית משנה למשל Images). כדי לשלב תמונה בתוך הדף, הקלק במקום הרצוי בדף (רק במקום שיש בו טקסט או טבלה, בשלב מאוחר יותר תוכל להזיז את התמונה לכל מקום שתרצה) ובצע את הצעדים באים:
1. לחץ על לחצן Insert Image.
2. בתוך חלון Image לחץ Browse כדי לאתר את קובץ התמונה הרצוי.
3. מצא את הקובץ, סמן אותו ולחץ OK.

התמונה צריכה להופיע בדף וכעת תוכל לשנות את מאפייניה: הצב את הסמן על התמונה, לחץ בלחצן הימני בעכבר ובחר Image Properties.

עם הופעת תיבתImage Propertiesבחר מחיצתAppearence

Alignment – יישור
תכונה זו מאפשרת לך לקבוע את היישור האנכי של התמונה ביחס לשורת הטקסט שבה היא משולבת:

ניתן גם לקבוע יישור אופקי שבו הטקסט עוטף את התמונה משמאל או מימין. בשלב זה ניתן לקבוע את המרחק המינימלי שבין התמונה והטקסט העוטף באמצעות: Horizontal Spacing, Vertical Spacing.

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

left align

center align

right align

הוספת טקסט מלווה תמונה
טקסט שמלווה תמונה: ניתן להוסיף לתמונה טקסט הסבר אשר ייראה כאשר הצופה יציב את הסמן על פני התמונה. הצב את הסמן על התמונה, לחץ בלחצן הימני בעכבר ובחר Image Properties, במחיצתGeneral, תחת Alternative Representations, מול Text, רשום את הטקסט הרצוי. לא תוכל לראות את התוצאה במסך Front Page לכן בצע שמירה, עבור ל-Explorer, לחץ Refresh ואז הצב את הסמן על פני התמונה. כעת אתה צריך לראות את הטקסט במסגרת צהובה בסמוך לתמונה (ראה לדוגמה את התמונה שמתחת center alignלמעלה.

• הכנס תמונות שאספת לדף הראשי ולשאר דפי האתר וסדר אותם לפי רצונך ולפי העניין

יצירת קישורים (Hyper links)

קישורים יוצרים קשר בין דפים שונים באתר או בין דפים באתר לבין אתרי אינטרנט אחרים ב-WWW

יצירת קישור (כללי): סמן את הטקסט שברצונך להפוך לקישור (אפשר לסמן ולקשר גם תמונה), לחץ על לחצן הקישור ותקבל את תיבת הדיאלוג של יצירת קישור – Create Hyperlink.

קישור לאתר חיצוני: בתוך תיבת Create Hyperlink בחר את מחיצתWorld Wide Web, וודא שהרשימה הנגללת Hyperlink Type מכוונת עלhttp, רשום בשדה URL את כתובת האינטרנט הרצויה ולחץ OK. כעת הטקסט שסימנת בדף ייראה כקישור (צבע כחול וקו תחתון). שים לב, בתוך הדף המופיע ב-Front Page, אינך רואה את היד המצביעה על הקישור ואינך יכול ללחוץ עליו (אלא בדרך עקיפה שנלמד בהמשך). כדי לוודא שהקישור עכן פועל כראוי, בצע שמירה, עבור לדפדפן הפתוח, לחץ עלRefreshואז תראה את הקישור ותוכל לנסותו.

קישור לדפים אחרים באתר: ראשית, יש להחליט איך לקשר את הדפים. לאיזה דפים לקשר את הדף שבו אתה מטפל כעת? למשל, תרצה שהצופה יקליק על המילה “תחביבים” ויגיע לדף hobbies.htm. בתוך תיבת Create Hyperlink בחר שוב את מחיצת World Wide Web, ברשימה הנגללת Hyperlink Type בחר other, רשום בשדה URL את שם הקובץ: hobbies.htm ולחץ OK. גם כאן תוכל לראות סימון של המילה המקושרת בצבע כחול וקו תחתון אך כדי לבדוק את הקישור יש לבצע שמירה, לעבור לדפדפן, ללחוץ Refresh ולבדוק.