» נושאי לימוד
» נושאי לימוד
יום חמישי 28 במרץ 2024
לכידת מסך
דף ראשי  בניית אתרים  HTML בסיסי  לכידת מסך גרסה להדפסה

"לכידת" מסך
 
בתרגיל זה אנו הולכים לכסות כמה נושאים: איך ל"לכוד" דמויות מסך לתוך קובץ בפורמט GIF, איך להוציא ולצרף תמונה, ואיך להוסיף קישור לתמונה בפורמט GIF לדף הבית שלך.
התוכנה בה נשתמש היא SnagIt, תוכנה לחלונות המיועדת לרכישה לאחר התנסות, ה"לוכדת" מסך או חלק ממנו, ו- Paint Shop Pro , תוכנית חלונות נוספת שהינה נכס יקר בהפיכת ותמרון תמונות.
  
 

"לכידת" מסך בעזרת SnagIt

 

האפשרות ל"לכוד" כתמונה את מסך המחשב או חלקו לעיתים חשובה מאוד. למשל, הרבה מהדוגמאות באתר זה התחילו כדמויות "לכודות" מהמסך. מערכת ההפעלה הרגילה של חלונות כוללת  "לוכד" מסך יסודי דרך כפתור ה- PRINT SCREEN שבמקלדת, אבל תוכנת ה- SnagIt מאפשרת סדרה עשירה יותר של אפשרויות. 

 

 

לפניך סרטון הדגמה המתאר את ממשק המשתמש של התוכנה ומסביר את אופן השימוש בה:

 

 


 

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

 

 

 

            

 

 

 

ראשית, אתה שולט בשיטת הפעולה של התוכנית על ידי בחירה מהתפריטים המוצגים בחלק העליון של החלון.
שנית, ניתן ללחוץ על מנת לאתחל "לכידה" על
<CTRL><SHIFT><P> בו זמנית או על ידי הכפתור "Capture" בחלק הימני של החלון.

 

 

                                


 

ארבע האפשרויות בצד ימין מראות את סוג  ה"לכידה" שהתוכנה יכולה לספק:

 

 

        

 


•  "לכידת" דמות/תמונה - שומר תצלום בזק בחלק או בכל המסך.


•  "לכידת" טקסט – שומר רק את הטקסט ולא את התמונות במסך.


•  "לכידת" וידאו- שומר את המסך והפעולות שעשית בו לתוך סרטון וידאו (מעין הקלטת סרט). 

 

•  "לכידת" רשת – שומר את התמונות שבדף אינטרנט.


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


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


תפריט הקלט (input) של SnagIt 

 

 


                                              

                                

 

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

 

 • Screen - "לוכד" תוכן של כל המסך (דומה מאוד ל Print Screan). 


 • Window -  "לוכד" תוכן של חלון נבחר.


 • Active Window - "לוכד" תוכן של החלון האחרון שהיה פעיל לפני שהפעלת את SnagIt.


 • Region - מאפשר להשתמש בעכבר לבחור את האזור "הנלכד".

 

תפריט זה גם מאפשר להחליט האם לכלול את סמן העכבר בדמות ה"נלכדת" אם בזמן הלכידה הוא היה בתוך האזור ה"נלכד" (זה עובד רק עם " Screen " ו" Active Window " כקלט). ישנה גם אופצייה  "Auto Scroll"  שמאפשרת ל"לכוד" תוכן של חלון שלם במקום את מה שנראה על המסך. זה יכול להיות שימושי, למשל, ב"לכידת" דף רשת שלם כאשר רק חלק ממנו נצפה בחלון הדפדפן. כל אחת משתי הפקודות האחרונות היא כפתור מוארך, סימון של "V" יופיע לידם אם האופציה נבחרה.


 תפריט הפלט (output)

 

 

                                         

                         

 

 

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


• Printer - מדפיסה את האזור ה"לכוד".


• Clipboard - שומר את האזור ה"לכוד" למקלדת.


• File -  שומר את האזור ה"לכוד" בקובץ.


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

 

 

סקירה
 

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

מידע נוסף בכל אחד מהנושאים שנידונו ניתן למצוא בתפריט העזרה (Help) של SnagIt.


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


על מנת להתחיל, "נלכוד" תוכן של חלון שלם. השתמש בתפריט "Input" לבחור  "Window".

ואז:


1. לחץ פעמיים על הסמליל של WS_FTP LE על מנת לפתוח את התוכנה. אחרי שהתוכנית נפתחה, צריך לראות את חלון ה -"Session Profile" בחזית.


2. לחץ בוזמנית על <CTRL><SHIFT><P> או על כפתור "Capture". סמן העכבר יהפוך לסמן של יד. אם אתה ממקם את היד מעל חלון, אתה רואה שהחלון מוקף במלבן צבוע. הזז את סימן היד עד שכל חלון ה "Session Profile" יהיה מוקף (אבל אף אחד מרקעי החלון לא נכלל במלבן הצבוע). עכשיו הקש על הכפתור השמאלי של העכבר, זה גורם ל SnagIt ל"לכוד" תמונה של החלון הזה.

 

3. מבחר ה"לכידות" צריך להיות מוצג בחלון ההצגה המוקדמת. שמור את התמונה בקובץ על ידי בחירה באופציית "Finish Output"  בתפריט "File" או על ידי הקשה על הכפתור  בצד שמאל למעלה. (על מנת למנוע את השמירה בחר באופציית "Cancel Capture" בתפריט "File" או הקש על הכפתור ).


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


 
 


 

 

כדי להשיג תמונה נוספת לשיעור שלנו, נשיג תמונת מסך של החלון העיקרי של WS_FTP . אחרי הקשה על כפתור "Ok" בחלון "Session Profile", הוא צריך להעלם, ולהשאיר את החלון העיקרי של WS_FTP (שהיה ברקע) פתוח. שוב נשתמש בשילוב <CTRL><SHIFTL><P> להתחיל "לכידה". העבר את הסמן היד עד שכל החלון העיקרי מסומן במלבן הצבוע והקש על הכפתור השמאלי של העכבר (כמו קודם). שמור את התמונה המוצגת לקובץ כ- wsftp2.gif על שולחן העבודה (שוב כמו קודם).

 

זו תמונה גדולה למדי, לכן "נלכוד" גרסה מוקטנת שלה. ראשית בחר באופציה "Edit" שבצד שמאל באמצע ואז באופציה הראשונה "Open Snagit Editor". שם בחר File -> Open ופתח את הקובץ מ"שולחן העבודה" לך לתפריט "Image" שבחלון החדש שלך ובחר "Scale"  ואז "Custom Scale". בחלון שנפתח הכנס 67 לערכי אחוזי גודל התמונה והקש "OK". עכשיו חזור על "לכידת" המסך של החלון העיקרי של WS_FTP, אבל הפעם שמור את התמונה בקובץ בשם  wsftp2-small.gif על שולחן העבודה. (זה ישמור גרסה של החלון שרוחבו וגובהו הם 2/3 מאלו של הגרסה המלאה הקודמת. נשתמש מאוחר יותר בגודל של שתי התמונות בשיעור שלנו). לאחר ששמרת את הקובץ הזה, חזור לאופציית "Scale" בתפריט "Options" וקבע מחדש את הערך של "Scale Image"  ל 1.0 כך שתמונת המסך העוקבת לא תהיה בטעות מוקטנת בגודלה. 


לבסוף, לתמונה האחרונה שלנו, נעשה נסיון שיתרכז ברשימה של קבצים על המחשב הרחוק. במקרה זה, נניח שאנו נרצה לכלול בתמונה לא רק את הרשימה של הקבצים בחלון הימני של התצוגה העיקרית של WS_FTP, אלא גם את השורה של הכפתורים המופיעה מעל רשימה זאת. אופציית הקלט של "Windows" לא תאפשר לנו להציג את שניהם בתמונה אחת אלא אם כן נכלול גם את החלון שמצרף את שני אלו (במקרה זה, כל החלון העיקרי של WS_FTP). עכשיו נחליף בתפריט הקלט (Input)של SnagIt ל-"Region" כדי לבצע "לכידה" כפי שאנו רוצים.
 
1. בחר ב"Region" בתפריט "Input".


2. אתחל את ה"לכידה" עם השילוב  <CTRL><SHIFT><P>.


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


4. שחרר את כפתור העכבר. כאשר חלון ההצגה המוקדמת עולה למעלה, הקש על כפתור  בכדי לשמור את התמונה. בתיבת הדו-שיח שתפתח, שמור את הקובץ כ-wsftp3.gif על "שולחן העבודה". עכשיו אתה יכול לסגור את WS_FTP LE.

 

אם תקיש פעמיים על הסמליל של אחת מקבצי התמונות שיצרנו ב"שולחן העבודה", תפתח לפניך התמונה הבאה:

 


 
הסרת חלקים מתמונות על ידי תוכנת Paint Shop Pro

 

ניתן להוריד גרסת התנסות חינם כאן:

 

                  

 

 

עכשיו אנחנו מוכנים ליצור ולהוסיף את תמונות המסך ש"לכדנו" כרגע. מאחר ו SnagIt אפשר לנו לשמור את התמונות כקבצי GIF, אין צורך להמיר קבצים אלה לפורמט אחר כדי להשתמש בתמונות כדמויות INLINE.
(SnagIt יכול גם לשמור תמונות מסך בפורמטים אחרים, כולל JPEG ו BMP. יכולנו להשתמש ב JPEG כדמויות INLINE ללא המרה, אבל לא עם BMP).


עכשיו נעשה תיקון קטן לתמונה האחרונה שלנו. זכור שהיינו קצת פזיזים כאשר ביצענו את ה"לכידה" האחרונה והשתמשנו בשיטה ש"לוכדת" אזור. היינו יכולים להיות זהירים, אבל במקום זה, בכוונה שמרנו חלק גדול יותר של המסך ממה שהיינו צריכים. למעשה, הסיבה שעשינו זאת היא שעכשיו ניתן להדגים את הדרך שבה ניתן למחוק חלקים לא רצויים בתמונה, התהליך ידוע בשם: "image cropping". שיטת "לכידת" אזור של SnagIt מאפשרת באופן ברור להשתמש בתהליך זה לפני סיום ה"לכידה", אך מאחר ובשיטה זו יש צורך לפרט את גבולות האזור שאתה רוצה לשמור לא בחרנו בדרך זו. SnagIt לא מספק דרך לבצע הליך זה לאחר ה"לכידה".

מאחר ו"גזיזת" תמונה קיימת היא פעולה שימושית ומאוד נפוצה נדון בדרך הביצוע על ידי תוכנת גרפיקה פופולרית שנקראת Paint Shop Pro.


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

 

על מנת להשתמש בתוכנה זו לגזיזת דמות, תחילה פתח את התוכנה, אז בחר "Open" שתחת תפריט הגלילה "File". שים לב לכך ש"selection type" באופציות שבתפריט למעלה נקבע ל"Rectangle", אחרת בחר באופציה זו כפי שנראת בתמונה זו:

 


                        

 

 

מקם את העכבר בנקודה בה אתה רוצה להתחיל את התמונה החדשה. לחץ והחזק למטה את הכפתור השמאלי של העכבר בזמן שאתה גורר את העכבר לפינה הנגדית של האזור שברצונך לסיים את התמונה החדשה. שחרר את כפתור העכבר. עכשיו לך לתפריט "Image" ובחר "Crop To Selection". פעולה זו תיצור חלון חדש עם המלבן שבחרת. בחר ב"Save" מתחת לתפריט "File" על מנת לשמור את התמונה החדשה. אתה יכול לסגור את התוכנה.


אף על פי שלא הצטרכנו לנצל את העובדה בדוגמה הזאת, אחד מהרבה מאפיינים של תוכנה זו הוא היכולת שלה להמיר בין פורמטים רבים של קבצי גרפיקה. לכן, למשל, אם אנחנו איכשהו השגנו דמות שרצינו להשתמש בדף של רשת שנוצר על ידי תוכנת גרפיקה של חלונות ונשמר בפורמט BMP, או על ידי תוכנה של מקינטוש ונשמר בפורמט PICT, אנו יכולים להשתמש ב Paint Shop Pro להמיר את הדמות לקובץ בפורמט GIF או JPEG. (תוכנה זו, כמובן, לא יכולה לקרוא או לכתוב כל פורמט של גרפיקה, אבל היא מאוד מגוונת בהמרת הפורמטים).

 

 

דוגמא פשוטה : הכנת שיעור ב WS_FTP

 

פתח את קובץ ה- HOMEPAGE שלך index.html בתיקיית הבית שלך והכנס את קוד ה-HTML הבא במקום מתאים:

 

 


 <h2>שימוש ב ws ftp</h2>
 פרוטוקול הFTP משמש להעברת קבצים בין מחשבים. אתה יכול להשתמש בו להעברת קבצים בין מחשבים שונים עליהם אתה עובד, או כדי להוריד תוכנות למחשב שלך ממחשבים שונים ברחבי העולם.כל שנדרש הוא שתי מחשבים שמחוברים ע"י רשת האינטרנט ותוכנת FTP שתרוץ על המחשבים.
       <p>
   תוכנה אחת לשימוש ב FTP היא WS_FTP . היא מאוד קלה לשימוש. בפעם הראשונה שתפתח את התוכנה תראה "session profile".כמו זה שרואים בתמונה המובאת למטה, אליו תכניס מידע על המחשב אליו ברצונך להתחבר.
   <p>
   <center>
   <img src="wsftp1.gif">
   </center>
   <p>
בשדה ה "Host Name" הכנס את כתובת ה IP של המחשב המרוחק אליו ברצונך להתחבר.
למטה הכנס את שם המשתמש והסיסמא שלך במערכת. אם אתה מתחבר ע"י FTPאנונימי הקלק על התיבה שמסומנת "Anonymous ftp". 

 


שמור את הקובץ index.html, פתח אותו מחדש על ידי הדפדפן. אתה תראה משהו דומה לזה בדף הבית שלך:

 


שימוש ב WS_FTP

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

תוכנה אחת לשימוש ב FTP היא WS_FTP . היא מאוד קלה לשימוש. בפעם הראשונה שתפתח את התוכנה תראה "session profile". כמו זה שרואים בתמונה המובאת למטה, אליו תכניס מידע על המחשב אליו ברצונך להתחבר.

 

בשדה ה "Host Name" הכנס את כתובת ה IP של המחשב המרוחק אליו ברצונך להתחבר. למטה הכנס את שם המשתמש והסיסמא שלך במערכת. אם אתה מתחבר ע"י FTPאנונימי הקלק על התיבה שמסומנת "Anonymous ftp".

 


 

 


בדוגמת HTML הנ"ל, הקוד:

 

 

<center> <img src="wsftp1.gif"> </center>

 

 

ממרכז את התמונה wsftp1.gif. אם במקום זה היינו משתמשים בקוד:

 

 

<img src="wsftp1.gif" align="left" vspace="5"
hspace="15">

 

 

(ללא <center> ו </center>) הדמות wsftp1.gif היתה ממוקמת INLINE, מסודרת בשמאל (עם טקסט עוטף אותה מימין), עם 15 נקודות של רווח אופקי מיותר ו 5 נקודות רווח מאונך מיותר סביב התמונה (יש 72 נקודות באינטש'). אף שלעיתים קרובות תרצה ליישר תמונות באופן הזה, זאת לא הייתה בחירה טובה במקרה זה כיוון שהטקסט של דף זה חייב להתאים למסגרת מאוד צרה, יישור זה של התמונה עלול לשבש אותה ולערפל חלק מהטקסט. 

 


הבניה

 

 <tt> WS_FTP </tt> 

 

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

 

השתמש בנ"ל כמדריך, הוסף בהמשך הטקסט הסברים נוספים על שחמוש בתוכנת WS_ftp והוסף את שתי התמונות הנוספות שיצרנו למעלה. לתמונה השניה בדף זה, השתמש ב wsftp2-small.gif כתמונה בתוך הדף וממנה צור קישור ל wsftp2.gif הגדולה יותר.
 

 

 14-01-04 / 11:21  עודכן ,  02-11-03 / 15:18  נוצר ע"י עזרא גנוט  בתאריך 
 אנימציות - הקודםהבא - הוספת קול לדף רשת 
תגובות הקוראים    תגובות  -  0
דרכונט
מהי מערכת הדרכונט?
אינך מחובר, להתחברות:
דוא"ל
ססמא
נושאי לימוד
חיפוש  |  לא פועל
משלנו  |  לא פועל
גולשים מקוונים: 5