אלינור אטרקצ'י - עיצוב גרפי | Eleanor Atrakji - Graphic design
ראשי | תיק עבודות | מידע | צרו קשר

עוד מידע...

כיצד לתחזק את האתר הסטטי שלי?

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

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

ראשית, עליכם ליצור העתק של האתר על המחשב האישי שלכם. שלב זה מבוצע פעם אחת ויחידה. לצורך כך עליכם להעתיק את כל קבצי האתר מן השרת המרוחק למחשב המקומי שלכם בעזרת תוכנה להעברת קבצים (file transfer). למשל תוכנת WS-FTP שניתן להוריד אותה באתר הזה. לאחר התקנת התוכנה פתחו אותה.

ftp

לחצו על הכפתור connect שנמצא למטה משמאל, ותקבלו את החלון הבא:

ftp

לחצו על New  כדי ליצור פרופיל חדש.

הכניסו את שם הפרופיל לפי ראות עיניכם (למשל my site),
הכניסו את שם השרת, את שם המשתמש ואת הסיסמה שקיבלתם. לחצו על OK לאישור.
כעת אתם מחוברים לשרת שלכם.
בחלון תוכנת ה FTP ישנם שני תת-חלונות וביניהם שני כפתורי חיצים:
בחלון השמאלי מופיעים הקבצים של המחשב המקומי שלכם.
בחלון הימני מופיעים קבצי השרת המרוחק. מצאו את קבצי האתר שלכם בשרת המרוחק (בדרך כלל נמצאים בתוך ספריה בשם public_html) והעבירו אותם לתיקייה במחשב המקומי. עשו זאת על ידי סימון כל הקבצים בצד ימין ואז לחיצה על החץ המעביר מימין לשמאל.
שימו לב: קבצים שבהם התוכן נשמר כטקסט פשוט, כגון קבצי html או  css יש להעביר כ -  ascii וקבצים מכל סוג אחר (תמונות, קבצי word, קבצי pdf, וכו') יש להעביר כבינאריים.
הקפידו לשעתק את מבנה האתר המקורי על כל ספריותיו.
כעת יש במחשב המקומי שלכם העתק מלא של אתר האינטרנט שלכם ובו אתם יכולים לגלוש גם כשהמחשב שלכם אינו מחובר לרשת. על גבי העותק הזה תוכלו בהמשך לבצע שינויים ועדכונים.

שלב שני: ביצוע שינויים בקוד של דפי האתר שלכם

תחילה פתחו את העותק המקומי של דף הבית שלכם באמצעות דפדפן האינטרנט.
שם דף הבית הוא C:\MySite\index.htm או משהו בדומה לזה.
דפדפו באתר ובדקו שכל הקבצים מוצגים כראוי.
כדי לראות את הקוד ולערוך אותו עמדו על הטקסט המופיע בדף האינטרנט והקליקו על עכבר ימני ובחרו באופציה view source - הצג מקור או לחליפין - פתחו את תפריט הדפדפן view -> page source.
אם אתם משתמשים בדפדפן אקספלורר תיפתח תוכנת notepad ובה הקוד מוכן לעריכה.
כפי שתראו, הקוד מכיל תגיות באנגלית וביניהן מופיע הטקסט של האתר שלכם בעברית או באנגלית. בהמשך תראו רשימת הסברים לתגיות.
חשוב! אל תתפתו לפתוח את הקוד בעזרת word. תוכנת word מכניסה הרבה דברים מיותרים לתוך הקוד הנקי שלכם. הקוד יהפוך למסורבל וקשה להבנה.
המבנה הכללי של הדף הוא כזה:

<html>
<head></head>
<body></body>
</html>

פירושו של דבר הוא: פתיחה של קוד html, פתיחה וסגירה של ראש הדף head, פתיחה וסגירה של גוף הדף body, סגירה של קוד html.
עריכת הקוד תתבצע רק בין התגית<body> לבין התגית </body> וגם פה רק באיזורים שאינם מתווים את העיצוב של הדף. אם אינכם בטוחים, מומלץ לא לגעת.

תגיות שכיחות בקוד html ומשמעותן:

תגית

הסבר

<p>

התחלה של פיסקה (paragraph=)
דוגמה לפיסקה מוצמדת לימין וכיוונה מימין לשמאל:
<p align="right" dir="rtl">

</p>

סגירת התגית<p>. סוף הפיסקה.

<h1>

התחלה של כותרת מסוג 1 (header1=).
בדומה לזו ישנן תגיות<h2> ,<h3> וכן הלאה.

</h1>

סגירת התגית h1.

<br>

הכנסת שורה רווח

<strong></strong>

פתיחה וסגירה של טקסט מודגש מעובה (bold)

</em><em>

פתיחה וסגירה של טקסט מוטה (italics)

<u></u>

פתיחה וסגירה של טקסט מודגש בקו (underline)

<a  href=" ">

קישור לאתר או כתובת אינטרנט כלשהם
לדוגמה:
<a  href="http://eleanor.co.il/index.html" > my web site </a>

<a  href="mailto: ">

הפניה לכתובת דואר אלקטרוני כלשהו
לדוגמה:
<a  href="mailto:eleanor@eleanor.co.il" > my email </a>

</a>

סגירת התגית a

<img>

הכנסת תמונה
לדוגמה:
<img src="images/header.gif" width=30px height=20px>

<table>

הכנסת טבלה

</table>

סגירת התגית table

<tr>

פתיחת שורה בטבלה

</tr>

סגירת התגית tr

<td>

פתיחת תא בטבלה

</td>

סגירת התגית td
דוגמה ליצירת טבלה בת שורה אחת ושני טורים:
<table border="1" cellspacing="0" cellpadding="3">
  <tr>
  <td> cell no. 1 </td>
  <td> cell no. 2 </td>
  </tr>
</table>

<ul>

הכנסה של רשימה לא ממוינת (unordered list=) .
בדומה לזו ישנה גם תגית (ordered list=)<ol>.

</ul>

סגירת התגית ul. סוף הרשימה.

<li>

הכנסת פריט של טבלה(list item=).

</li>

סגירת התגית li
דוגמה לרשימה עם תבליטים ריבועיים:
<ul type="square">
<li> list item 1 </li>
<li> list item 2 </li>
<li> list item 3 </li>
</ul>

<hr>

הכנסה של קו מפריד (horizontal ruler)
דוגמה לשימוש:
<hr color="#669966" size="3" width="90%">
<!--  --> פתיחה וסגירה של הערה. הדפדפן מתעלם ממלל שנמצא בהערה.

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

שלב שלישי: הטענת הקוד המעודכן אל השרת

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

 

בהצלחה!