בניית אתר

שלב א- תכנון סקיצה של אתר על דף.

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

שלב ב- פתיחת תיקייה חדשה לאכסון האתר.

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

שלב ג- פתיחת פרוייקט (אתר) חדש ב- DreamWeaver .

נפתח את תוכנת ה-DreamWeaver ובתפריט נכנס לsite- ,משם נבחר new site... . בשלב הזה תפתח לנו תיבת דו שיח שתבקש מאיתנו לתת לאתר שם (למען הנוחות כדאי לתת לאתר את השם של התיקיה של הפרוייקט שלו) וכן נתבקש להגדיר את תיקיית השורש של האתר שבה יימצאו כל הקבצים של האתר. בשלב זה נלחץ על סימן התיקייה מימין לשדה ונבחר את תיקיית הפרוייקט שלנו שהגדרנו במיוחד למטרה זו.עכשיו נאשר את הבחירות שלנו ע"י לחיצה על המקש O.K ותפתח לנו שוב תיבה בה נישאל האם אנחנו נרצה שיווצר עבורנו שרטוט של האתר. נלחץ על create וייפתח לנו חלון השרטוט שהוא מעין חלון אקספלורר בו אנו יכולים לראות אילו קבצים נמצאים בתיקיית האתר וכן ליצור תיקיות וקבצים חדשים.

שלב ד-יצירת הקבצים הנחוצים לנו באתר.

במידה וחלון ה-site שלנו לא פתוח נפתח אותו מהתפריט site->open site... .כעת נבנה את הקבצים הנחוצים לנו ע"פ התכנון שעשינו על דף הנייר וניתן להם שמות . כדי ליצור קובץ חדש עלינו ללחוץ ctrl+shift+N .כדאי שלכל הקבצים שלנו ניתן את אותה הסיומת ( או שכולם HTML או שכולם HTM ) וכן שנשתמש רק באותיות קטנות למען הנוחות. לקובץ שאנחנו רוצים שייפתח את האתר ( דף הבית) נקרא index.html .לקבצים האחרים שלנו נקרא בשמות משמעותיים לדוגמא לקובץ של הטופס נקרא form.html וכן הלאה. במידה אנחנו בונים אתר בפריימים כאי כבר בשלב הזה ליצור את הקבצים הפנימיים של הפריימסט (לדוגמא left.html נקרא לפריים השמאלי ו-center.html נקרא לקובץ המרכזי (פרוט נוסף על בניית פריימים בשלב ה ).לאחר שיצרנו את הקבצים הרצויים נפתח את קובץ האינדקס שלנו ונתחיל לעבוד על האתר.

שלב ה- בניית אתר עם פריימים.

לעיתים נרצה לבנות את האתר שלנו בעזרת פריימים ,לשם כך עלינו להגדיר פריימסט ולהכניס אותו לקובץ האינדקס שלנו. נפתח את קובץ index.html ןנבנה בו פריים . ב- DreamWeaver יש כמה דרכים לבניית פריימים . הראשונה היא להשתמש בסרגל objects ( אם סרגל זה אינו פתוח אז אפשר לפתוח אותו דרך תפריט window->objects ). בד"כ סרגל זה יציג לנו את הכלים תחת הכותרת common ,בכל אופן נלחץ על החץ ליד הכותרת ונבחר בכותרת frames .כעת נבחר בצורת הפריים הרצויה ונקליק עם העכבר. דרך נוספת ליצירת פריימים היא דרך התפריט insert->frame .

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

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

בחלון frames נבחר בפריים השמאלי ובחלון properties שלו ( אם אינו פתוח ניתן לפתוח דרך תפריט window->properties ) בשדה source נלחץ על התיקיה מימינו ונבחר בקובץ שיצרנו בשם left.html . לאחר מכן נבחר בשאר הפריימים ולכל אחד מהם נתאים קובץ בהתאמה בשדה source .

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

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

שלב ו-קיצורים בסיסיים בעבודה עם DreamWeaver.

כאשר אנחנו מבצעים שינוי בקובץ מסויים ורוצים לשמור רק אותו נלחץ ctrl + S .

כאשר נרצה לשמור את השינויים בכל הקבצים הפתוחים נלחץ ctrl + shift + S .

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

כדי לשנות מאפיינים של עמוד מסויים או אובייקט מסויים עלינו להצביע על אותו אובייקט וללחוץ

ctrl + J . תיפתח לנו תיבת דו שיח בה נוכל לשנות פרטים תצוגתיים עבור אותו קובץ וכן נוכל לתת לו שם משמעותי למען הנוחיות שלנו.

קיצורי נוספים: ctrl + c העתק ctrl +alt + c מרכז

ctrl + x גזור ctrl + a בחר הכל

ctrl + v הדבק ctrl + shift + n יצירת קובץ חדש

F10 הראה מקור F12 הראה באקספלורר.

ctrl + z בטל פעולה אחרונה

שלב ז- בניית טופס.

בטפסים אנחנו משתמשים כאשר אנחנו מעוניינים לקבל אלינו בדואר פרטים מסויימים אותם המשתמש ימלא בטופס. דבר ראשון ביצירת טופס עלינו ליצור אובייקט של טופס בסרגל objects נפתח את התת סרגל forms ונצביע על האובייקט העליון השמאלי שהוא יצירת טופס.במצב זה אנחנו אמורים לראות על הקובץ שלנו מעין חלון אדום מקווקו שהוא בעצם חלון הטופס. במידה אינכם רואים חלון זה ליחצו ctrl + shift + I וכך החלון הזה יופיע.

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

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

צורת התחביר של הפקודה mailto: -

mailto: e-mail address ? subject

mailto: hinanit@yahoo.com ? form

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

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

בסוף כל טופס עלינו ליצור כפתור submit כפתור זה בעצם שולח את כל הפרטים שהמשתמש הקליד ע"פ ההוראות שביקשנו מהטופס לבצע.

דבר נוסף וחשוב הוא לציין ששליחת הנתונים באצורת post שולחת לנו את הנתונים בקובץ מצורף (attachment) ולכן הוא לא יהיה קריא לכן עלינו להכנס לקוד עצמו של עמוד ה HTML ע"י לחיצה על מקש F10 ובתגית של ה-action נוסיף בסופה את הכיתוב enctype = "text/plain" .לאחר שנוסיף שורה זו נתוני הטופס יישלחו כאי מייל בפורמט רגיל וקריא.

הערה: לכל שדה בטופס יש בחלון properties גם מאפיין name . כדאי לקרוא לכל שדה השייך לטופס בשם כלשהו המתחיל באותיות txt שכן שמו של השדה מופיע באי מייל אותו אנו מקבלים ויקל עלינו לדעת ע"פ קידומת זו ששדה זה מקורו בטופס שלנו.

המלצה: כדי לראות טופס שעובד בשיטת post ו- mailto אפשר להיכנס לאתר הבא:

www.gil-teichman.com

שלב ח- Slicing בעזרת תוכנת ה –FireWorks

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

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

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

ע"י לחיצה בתפריט על window -> objects . כעת נבחר עם החץ השחור תמונה אחר תמונה ובחלון objects נסיר את סימן ה – v מהריבוע מצד שמאל בתחתית החלון. כעת נכניס בשדה הטקסט מתחת לריבוע זה את השם שנרצה עבור חלק זה של התמונה. את הפעולה הזו נבצע עבור כל חלק וחלק בתמונה.

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

קובץ עם התמונה בשלמותה

קבצים עם כל חלקי התמונות

קובץ בשם shim.gif שאליו כרגע אין צרוך להתייחס

קובץ HTML ובו קוד המאכסן את כל חלקי התמונה בתוך טבלה

שלב ט-עבודה עם FireWorks

תוכנת ה- FireWorks לא נועדה אך ורק לחתיכת תמונות ויש הרבה מאוד פונקציות שעוזרות לנו לעצב את התמונות שלנו באתר כרצוננו. דברים בסיסיים אשר בוודאי ניתקל בהם רבות הם:

שינוי גודל תמונה קיימת:כניסה לתפריט modify -> image size...

שיוני פורמט התמונה : פתיחת חלון optimize ואז בשדה settings בחירת סוג הקובץ המועדף עלינו.

חתיכה: שימוש בכלי crop על סרגל הכלים מצד שמאל מתחת לחץ למעלה. באמצעות כלי זה ניתן לחתוך שוליים מיותרים מתמונות.

דבר מאוד חשוב לגבי תוכנית זו הוא שכל פעם שנרצה לשמור קובץ עלינו לדאוג שהוא יישמר בפורמט קריא ב- HTML ובמשקל כמה שיותר קל. אם נשמור את הקובץ כפי שאנחנו רגילים בתוכניות אחרות ע"י כניסה לתפריט file -> save הקובץ יישמר בפורמט PNG שהוא פורמט של תוכנת FireWorks ושהוא מאוד כבד לכן עלינו לשמור את התמונה כ- GIF או כ- JPG לשם כך עלינו לשם שמירת תמונה ללחוץ על כפתור export או לחליפין להכנס לתפריט file -> export ולבחור את סוג הקובץ הרצוי לנו כדי שנוכל להשתמש בו באתר שלנו.

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

שלב י- stylesheets

יש באפשרותנו ליצור תגיות משלנו וכן לשנות את המאפיינים של תגיות קיימות בHTML .

בתחילת קובץ HTML לפני תגית <body> נגדיר תגית בשם <style> ובינה לבין הסוגר שלה </style> נכניס את כל השינויים שאנחנו מעוניינים לבצע . לדוגמא כדי לשנות את התגית <H1> נכתוב כך:

H1 { font: 45pt times ; color: red }

כעת כל פעם שנשתמש בתגית < H1> הטקסט יהיה כפי שהגדרנו , כלומר טקסט בגודל 45 פיקסלים מסוג פונט טיימס ובצבע אדום.

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

BLOCKQUOTE { font : 12pt times ; color : red ; background color: yellow}

דבר נוסף שניתן לעשות באמצעות stylesheets הוא יצירת כמה וריאציות לאותה תגית בשינויים קלים.

לדוגמא נגדיר את התגית <H1> פעם אחת כגודל 12 פיקסלים בצבע ירוק ופעם נוספת בגודל 24 פיקסלים בצבע אדום.

H1.green {font:12pt times ;color: green }

H1.red {font:24pt times ;color: red}

לאחר מכן בגוף הקובץ עצמו הקריאה תתבצע בצורה הבאה:

<H1 class = "green"> free text ... </H1>

<H1 class = "red"> free text ... </H1

שלב יא- יצירת map בעזרת DreamWeaver

לפעמים נרצה שתמונה אחת תהווה קישור לכמה מקומות ( לדוגמא תמונה של איש – נרצה שכשנלחץ על הראש נגיע למקום אחד וכשנלחץ על היד נגיע למקום אחר) . לשם כך אנחנו נצביע עם העכבר על התמונה אותה אנו רוצים למפות ואז נראה בחלון properties בצד ימין חץ קטן . כרשר נלחץ על החץ ייפתח לנו עוד חלק של חלון זה והו מצד שמאל למטה שלושה כפתורים עם צורות . נלחץ על אחד הכפתורים עם הצורה המתאימה לנו ביותר ( עבור הראש נבחר בעיגול ועבור היד במלבן לדוגמא) ונסמן את האזורים הרצויים. כעת כשנצביע עם העכבר על אחד החלקים המסומנים נראה שלכל כל חלק יש חלון properties משלו ולכל חלק שכזה יש שדה link משלו ולכן אנו יכולים לתת לכל חלק קישור למקום שונה. נבחר ע"י לחיצה על תמונת התיקיה ליד השדה link ונבחר לאן נרצה שכל חלק ייקשר אותנו.

שלב יב-עבודה עם טבלאות

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

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

כדי ליצור טבלה ניכנס לתפריט insert->table ואז תפתח לנו תיבת דו שיח בה נתבקש להגדיר את מספר השורות בטבלה (rows ) , את מספר העמודות ( columns ) , את רוחב קווי המתאר ( border)

שכפי שאמרתי לרב יהיה אפס וכן נתונים נוספים כמו מרווח בין תא לתא לאורך ולרוחב.

לאחר שיצרנו טבלה אנחנו יכולים להצביע על כולה וכן אנו יכולים להצביע על שורה או עמודה בודדת או על תא בודד או על כמה תאים. אם אנחנו רוצים למזג שני תאים לתא אחד אז נצביע על שני התאים ונלחץ על הלחצן הימני בעכבר . ייפתח לנו תפריט בו נבחר table ->merge cells ואותו כנ"ל אם נרצה לפצל תא אז נצביע על התא ונבחר table -> split cell .לכל תא יש את חלון המאפיינים שלו ואפשר לקבוע לו רקע שונה ואפילו להכניס לתוכו טבלה נוספת .

שלב יג- העלאת האתר לאינטרנט (או עבודה עם FTP Explorer )

לאחר שבנינו אתר ועיצבנו אותו כרצוננו אנחנו מוכנים כדי להעלות אותו לאינטרנט לשם כך נשתמש בתוכנית FTP Explorer שמחברת אותנו ישירות למחשב שבו אנחנו מאחסנים את הקבצים שלנו כאשר במקרה שלנו מדובר במחשב ftp.oocities.com לשם חיבור למחשב זה עלינו לבנות פרופיל חיבור בתוכנית עצמה . נפתח את התוכנית FTP Explorer ונבחר ב- create new profile , תיפתח לנו תיבת דו שיח שתבקש מאיתנו להכניס את שם הפרופיל שנועד אך ורק לנוחות שלנו וכן את שם המחשב המארח שהוא כפי שציינתי ftp.oocities.com וכן להכניס שם משתמש וסיסמה שהם השם והסיסמה שקיבלנו מהאתר www.oocities.org כשנרשמנו לאתר. לאחר שמילאנו את כל הפרטים הללו נלחץ על כפתור connect .

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