|
|
|
טיפים וטריקים, דף ארכיב מס. 6
| הדגשת אות ראשונה בפסקה (הטיפ השבועי לבוני אתרים - 17.3.2002)
|
|
ה
נה טריק המאפשר לכותב אתרים להדגיש אות ראשונה בפסקה כפי שמקובל בספרים מעוטרים. הדגשה כזו אינה מתאימה לדפי טקסט רגילים אך תתאים לדפים מעוטרים. הדוגמאות כאן נועדו להדגים את השיטה.
ה
שיטה היא להשתמש בהגדרת סגנון לאות הראשונה השונה מסגנון יתר הטקסט שבפסקה. אנו כותבים את האות הראשונה בתוך תאגי <DIV> או <SPAN> להם אנו מגדירים את הסגנון המתאים. בתוך הגדרת הסגנון יש להכניס את הפרמטר float: right; (או float: left; לטקסט לטיני) כדי שהקטע הבא "יצוף" ויצמד אל הקטע שלצידו. הנה לדוגמה הקוד של האות "ה" שבתחילת פסקה זו:
<DIV
STYLE="float: right; font-weight: bold; font-size: 140%; padding: 2px; color: #c2cddb; background: #ecf0f4;">ה</DIV><BR STYLE="line-height: 10px;">
כפי
שאתם רואים כאן, אפשר כמובן להכניס מילה שלמה בתחילת הפסקה. תוכלו להתאים את הגופן, גודלו, צבעו וצבע הרקע לטעמכם ולשיקולי העיצוב של הדפים שלכם.
|
| הגדרת סמנים שונים - נתמך על ידי IE 6 (הטיפ השבועי לבוני אתרים - 3.3.2002)
|
הדפדפן IE6 תומך בתכונת סגנון (CSS) חדשה: האפשרות להגדיר סמנים (Cursors) שונים בדפים שלכם. אפשר להגדיר סמן ראשי שיופיע בדף שלכם, סמן עבור קישורים, סמן עבור כפתורי ביצוע לטפסים וכו'.
כדי להגדיר זאת, אתרו קודם כל סמנים מתאימים (סוגי קבצים: .cur או .ani) באתרי אייקונים וסמנים, הורידו אותם אליכם והעלו אותם אל השרת שלכם. לאחר מכן הוסיפו את הפרמטר cursor: url(name.ext); אל הגדרת הסגנון המתאימה כ- body { } ואל הגדרות סגנונות הקישורים. לדוגמה: a:link {cursor: url(name.ext);} וכו'.
לאחר שתשמרו ותעלו את הדף שלכם המכיל את ההגדרות החדשות (או את קובץ ה- CSS המשמש את דפי האתר), תוכלו לראות כיצד הסמנים החדשים משתלבים בו.
הערה: הסמנים החדשים יוצגו רק בעת שימוש בדפדפן IE6 ואילך. יתר הדפדפנים יתעלמו מהגדרות אלו ויציגו את הסמנים הרגילים.
|
| שימוש בו-זמני בכמה קלאסים (CSS) (הטיפ השבועי לבוני אתרים - 24.2.2002)
|
כשמגדירים סגנונות (CSS) לשימוש בדפי HTML אנו מגדירים קלאסים (Classes). השימוש באותם קלאסים נעשה על ידי הפרמטר Class אותו ניתן לצרף לתאגים שונים כ: Table, TD, DIV, Span, Form ואחרים.
את הפרמטר Class אפשר להכניס לתאג רק פעם אחת. מה קורה אם רוצים בתאג מסוים להשתמש ביותר מאשר קלאס יחיד? שיטה אחת בה משתמשים רבים היא הגדרת הפרמטר Style באותו תאג וצירוף המשתנים הנוספים הדרושים לנו. אך יש שיטה פשוטה בהרבה: אפשר להשתמש בפרמטר Class הכולל מספר רב של שמות קלאסים שהגדרנו כשבין כל שם מפריד רווח יחיד. לדוגמה: <DIV CLASS="Border2 Menu Red">.
הערה חשובה: במידה וכללנו שמות קלאסים בהם יש הוראות סותרות (כמו הגדרת גודל גופן), תחול ההגדרה האחרונה שבין אותן הוראות, לכן שימו לב לתוכן הקלאסים והסדר בהן הוספתם אותם בתוך הפרמטר.
ראו טבלה זו: בתאים הנראים הוגדרו שני קלאסים שונים לכל תא, הראשון מגדיר את המסגרת והשני את הטקסט.
מסגרת אפורה
וכתב אדום. |
|
|
|
מסגרת ורקע אפורים,
כתב כתום. |
|
|
|
מסגרת צהובה
וכתב כחול. |
|
| ישור מאוזן לטקסט (הטיפ השבועי לבוני אתרים - 17.2.2002)
|
כשאנו כותבים גושי טקסט בדף HTML, אנו מיישרים אותו בדרך כלל ימינה עבור טקסט עברי ושמאלה עבור טקסט לטיני. זהו ישור בו נשמר רווח יחיד בין מילה למילה, (אלא אם הכנסנו רווחים "קשים" נוספים) וכל שורה מסתיימת היכן שאורך המילה הבאה בגוש אינו מאפשר הכנסתה. התוצאה - גלישה של הטקסט משורה לשורה כשצד הסיום של כל שורה (בעברית - צד שמאל) מזוגזג על פי אורך הקטע בו לא ניתן היה להכניס מילה נוספת. זו התנהגות טבעית של טקסט לוגי הנכתב בעברית לוגית וכמובן של טקסט לטיני.
הטקסט בספרים ובעיתונים נראה אחרת. הטקסט מיושר כך שתחילת שורה וסיומה, מגיעים עד לקצוות הטור - משמע, אם נעביר קו אנכי בצד הסיום, נגלה שכל המילים באותה שורה מגיעות עד לקו זה ואין זגזוג. ישור כזה נקרא Justify או "ישור מאוזן". ישור זה ידאג להשתיל רווחים נוספים בין המילים שבכל שורה כדי שכל שורה תראה באורך זהה וללא זגזוג. פיסקה זו מיושרת בשיטת הישור המאוזן וההבדל בינה ליתר הפסקאות ניכר לעין.
כדי לישר פיסקה או גוש טקסט בשיטה זו השתמשו בהגדרת הסגנון style="text-align: justify;" בתוך התאג המתאים (TD, DIV, P). שלוש הסתייגויות מהשימוש בישור זה הן: א. מהדפדפן נדרשת עבודה נוספת כדי להציג טקסט מאוזן. ב. מה שנראה יפה וטבעי בדפוס לא תמיד יראה כך על גבי המסך אלא בטורים צרים יחסית. ג. לא ניתן לביצוע בדפים הכתובים בעברית ויזואלית.
|
| דף הדפסה חילופי (הטיפ השבועי לבוני אתרים - 10.2.2002) המקור: Dynamic Drive
|
הדפסת דף כלשהו מאתר יכולה להיות מתסכלת ביותר. אנו רוצים את תוכן הדף והתמונות הרלוונטיות לתוכן, אך מקבלים בדרך כלל כתוספת את כל מה שלא רצוי: לוגו הדף, באנרים, פרסומות, תפריטים, קישורים ומה לא. ברור שמבנה דף לצפייה על המסך שונה מאד ממה שאנו זקוקים לו על נייר.
אתרים לא מעטים מאפשרים להדפיס גרסה שונה של הדף הנקראת "גרסת הדפסה". ישנן מספר טכניקות ליצירת דף כזה וביניהן: כתיבת התוכן במסגרת (Frame) מרכזי שרק אותה שולחים להדפסה. הכנת דף "נקי" מהתוכן המאוכסן במסד נתונים בנפרד מכל יתר מרכיבי הדף. הכנת דף נפרד לחלוטין לצורך ההדפסה.
מאחר והשימוש במסגרות פוחת והולך ומאידך, הרבה מאד אתרים אינם משתמשים במסדי נתונים, תוכלו להכין דף נפרד לתוכן הדפים שלכם ולגרום לדפדפן לבחור אוטומטית בגרסה להדפסה. הנה איך:
הכינו את דף ההדפסה הנפרד בפורמט הרצוי לכם - HTML, DOC, TXT ואכסנו אותו על השרת. (גם אם לגולשים אין את Word, הרי שתוכנת WordPad הכלולה בחלונות תוכל ברוב המקרים להדפיס קבצי DOC). בדף המקורי שלכם הכניסו אל מקטע HEAD את ההוראה הבאה:
<LINK REL="alternate" MEDIA="print" HREF="printversion.ext">
כששם הקובץ כולל כמובן את המיקום המוחלט או היחסי שלו על השרת. כעת, כשגולש מגיע אל הדף ומקליק על הוראת הדפסה של הדפדפן, הקובץ שהכנתם להדפסה יועבר אל המדפסת במקום הדף הנראה על המסך.
תכונת ניתוב קובץ ההדפסה נתמכת על ידי דפדפני IE 4 ואילך ואמורה להתמך גם בנטסקייפ 6 ומוזילה.
|
| מעבד התמלילים Word (הטיפ השבועי - 3.2.2002) המקור: Lockergnome
|
מעבד התמלילים Word כולל תוכנית "מקרו" המאפשרת להציג את כל הפקודות וצירופי המקשים עבורם, במסמך נפרד בו תוכלו להשתמש בכל עת. הנה איך יוצרים אותו:
הקליקו על צירוף המקשים Alt F8 ותקבלו תיבת דיאלוג של תוכניות המקרו. בתיבת הגלילה "Macros in" בחרו באפשרות "Word commands". בתיבה העליונה ששמה "Macro name" רשמו ListCommands (או בחרו בה מתיבת הגלילה שמתחתיה). כעת הקליקו על Run ובחרו את האפשרות הרצויה לכם - "All Word commands" עבור כל הפקודות. לאחר האישור, יפתח מסמך חדש וארוך שיכיל בטבלה את כל הפקודות, צירופי המקשים והתפריט הרלוונטי עבורם. האפשרות השנייה "Current Menu and keyboard settings" תיצור מסמך קצר יותר שיכיל את אותו סוג מידע אך רק לגבי התפריטים הפעילים אצלכם כעת. שמרו את המסמך לשימוש חוזר בכל עת או הדפיסו אותו.
|
| הודעות טעות לסקריפטים ב- IE (הטיפ השבועי - 27.1.2002)
|
כמעט כל אתר ברשת האינטרנט מכיל סקריפטים הכתובים בג'אווהסקריפט או בשפות אחרות. אלו יכולים להיות סקריפטים חיצוניים ששולבו בקוד הדף או קריאה לפונקציות ג'אווהסקריפט הבנויות לתוך הדפדפן (כמו למשל: javascript:window.open() לפתיחת חלון חדש).
במידה והדפדפן Internet Explorer אינו יכול לפרש נכון את הסקריפט (טעות בקוד, אי תאימות), תפתח הודעת טעות על גבי המסך. הודעה זו מטרידה גולשים רבים שאינם מבינים ממש את תוכנה ומעדיפים שלא לראותה. כדי למנוע מהודעות אלו להופיע, עשו כך: פתחו מהתפריט את Tools » Internet Options » Advanced ובקטע Browsing סמנו את התיבה Disable script debugging והסירו את הסימון מהתיבה Display a notification about every script error. אשרו. הודעות הטעות הללו לא יופיעו עוד. במקומם תראו בפינה השמאלית התחתונה של הדפדפן אייקון אזהרה צהוב קטן המלווה בכיתוב "Done, but with errors on page".
גולש המעוניין בכל זאת לקבל תיאור כלשהו של מהות הודעת הטעות, יכול להקליק הקלקה כפולה על האייקון האמור. כתוצאה, תופיע הודעת הטעות - כללית או מפורטת (ניתן לבחירה על ידי הכפתור Show Details / Hide Details). הקפידו שלא לסמן את התיבה Always display... שכן כך תבטלו את הבחירות שעשיתם בחלק הראשון.
|
| לקוח הדואר Outlook Express (הטיפ השבועי - 20.1.2002)
|
לקוח הדואר Outlook Express מאפשר בניית וישום כללים שונים לטיפול בדואר נכנס. אפשר ליצור כללים הנגזרים מסוג / פרטי ההודעה וליישמם אוטומטית. לדוגמא: יצרתי כלל שמציג כל הודעה הכוללת נספחים בצבע אדום, כך אני יכול לזכור להיות זהיר לפני שאני פותח הודעה כזו. דוגמא נוספת: מניעת טעינת הודעות ממקורות המוכרים לי כשולחי "דואר זבל" ובמקביל, מחיקת ההודעות הללו משרת הדואר. הנה כך עושים זאת:
מהתפריט, לכו אל: Tools » Message Rules » Mail » New. תפתח תיבת דיאלוג ובה ארבע חלונות. בחלון העליון יש לבחור את התנאי או מספר תנאים שיגדירו את הכלל. בחלון השלישי יוצגו התנאים שבחרתם והאפשרות להגדיר ערכים חד-ערכיים לכלל (למשל: בחירת שם השולח המסוים שיפעיל את הכלל). בחלון השני יש לבחור את הפעולה / הפעולות שייושמו אם התנאים המוגדרים יתמלאו. גם כאן שימו לב למידע המוצג בחלון השלישי ולאפשרות להגדיר משתנים שונים. חשוב לבדוק מהי המשמעות של כל כלל ולוודא שלא יבוצע "סינון" עמוק שיעלים מכם הודעות רצויות.
כשסיימתם להגדיר את תנאי ופעולות הכלל, תוכלו לתת לו שם משמעותי בחלון התחתון - או להשאיר את השם שנוצר. כעת הקליקו על Apply Now, ואשרו. בסיום אשרו שוב. זהו הכלל החדש פעיל וייושם בכל הפעלה של OE.
|
| ממשק המשתמש ב- Google (הטיפ השבועי - 13.1.2002)
|
מנוע החיפוש המוביל Google מאפשר לגולש העברי עבודה עם ממשק עברי הכתוב כיאות מימין לשמאל והמקל מאד על ציבור גדול שאינו חש בנוח בסביבה אנגלית. בפועל, מנוע החיפוש מאפשר ממשק מותאם בעשרות שפות שונות ומפתחיו ממשיכים לפתח ממשקים בשפות נוספות.
לכאורה, כדי לקבל את גוגל בממשק אנגלי יש להכנס אל www.google.com וכדי להכנס אל הממשק העברי יש לגלוש אל האתר המקומי www.google.co.il, נכון? לא! תוכלו לקבל את הממשק הרצוי לכם בכל עת, ללא קשר לאיזו כתובת נכנסתם. הנה איך:
לצד תיבת החיפוש באתר גוגל תראו מספר קישורים (בכתב קטן). הקליקו על הקישור ששמו Preferences ("העדפות" בממשק העברי) ותגיעו אל דף בו תוכלו לבחור את העדפותיכם האישיות. תוכלו לבחור את האפשרויות האלו:
- Interface Language - שפת הממשק: השפה בה יוצגו דפי החיפוש והתוצאות.
- Search Language - שפת החיפוש: חיפוש דפים בשפות שתגדירו (או כל השפות).
- Number of Results - מספר התוצאות: כמה תוצאות חיפוש יוצגו בכל דף.
- Results Window - חלון התוצאות: האם להציג תוצאות בחלון חדש.
- SafeSearch Filtering (סינון): האם לסנן תוצאות הכוללות אופי מיני.
לאחר שתקבעו את העדפותיכם, חשוב לזכור להקליק על כפתור Save Preferences (שמור העדפות). תיווצר "עוגייה" (Cookie) הכוללת את המידע המתאים ותשמר על הדיסק שלכם. מרגע זה, בכל עת שתגיעו אל Google, הדפים יוצגו בדיוק בממשק ובצורה שבחרתם.
|
| גלגלת העכבר (הטיפ השבועי - 6.1.2002)
|
כל העכברים המודרניים כוללים גלגלת המאפשרת לגלגל דפים מעלה ומטה במירב התוכניות ובמיוחד בעת עבודה עם הדפדפן. האם ידעתם שבחלק מאותם עכברים (לפחות בדגמים המתקדמים של Microsoft IntelliMouse), משמשת הגלגלת ככפתור מרכזי עליו ניתן להקליק כמו על הכפתורים האחרים?
אינני יודע לומר אם גם העכבר שלכם תומך בתכונה זו, בדקו בעצמכם. לאלו שאצלם הגלגלת משמשת ככפתור לחיץ, אפשר באמצעות התוכנה המלווה את העכבר (אצלי זו Microsoft IntelliPoint) להגדיר מה הגלגלת תעשה בעת הקלקה עליה. אני משתמש בתכונה הבסיסית של אפשרות גלגול רציף של דף לאחר הקלקה (מופיע סמן מיוחד לשם כך) וכן להפעלת תוכניות רקע כמו Babylon בעת שהיא טעונה לזכרון. יעיל ביותר!
|
| IE & ActiveX (הטיפ השבועי - 30.12.2001) המקור: Lockergnome
|
דפדפני IE של מייקרוסופט תומכים בהתקנת רכיבי ActiveX להרחבת ביצועי הדפדפן. הקלות בה מתבצע הדבר עשויה לגרום לכם בעיות ו/או חדירה לפרטיותכם. אתם מגיעים לדף מסוים ולפתע מופיע דיאלוג המציע לכם להתקין תוסף כלשהו - רק לחצו על "אישור" בבקשה... התיאור של התוסף יהיה תמיד מלווה במתק שפתיים והרי בלעדיו חייכם אינם חיים... למרבה הצער, לא ניתן להסיר רכיבים אלו בדרך המקובלת של "הוסף/הסר תוכניות".
אז קודם כל, בואו נוודא שתמיד תשאלו אם אתם מאשרים התקנה כזו (כדי שזו לא תבוצע ללא ידיעתכם). מהדפדפן, לכו אל Tools » Internet Options » Security והקליקו על Custom Level. וודאו שלאפשרות "Download signed ActiveX controls" מסומנת הבחירה "Prompt" ושלאפשרות "Download unsigned ActiveX controls" מסומנת הבחירה "Disabled". כך נשאל לגבי התקנת רכיבי ActiveX שיש להם אישור מקור ונמנע לחלוטין מכאלה שאין להם.
כעת נבדוק אילו רכיבי ActiveX מותקנים. לכו אל Tools » Internet Options » General » Settings והקליקו על View Objects. יפתח חלון של סייר הקבצים ובו יוצגו כל הרכיבים הללו המותקנים אצלכם. תוכלו לראות את שמם, גודלם, גרסה, מתי הותקנו ומתי הופעלו לאחרונה. בהקלקה ימנית על שם כל רכיב תוכלו לבחור בין Update, Remove, Properties. דרך Properties תוכלו לבדוק נתונים מפורטים יותר של הרכיב, Update יאפשר לכם לעדכן את הרכיב לגרסה האחרונה ו- Remove יאפשר לכם להסירו. כאן נדרשת זהירות רבה - אל תסירו רכיב שאינכם בטוחים מהו, אתם עלולים לפגוע בפעולת הדפדפן!
|
| מיקום לא נכון בדף HTML (הטיפ השבועי לבוני אתרים - 23.12.2001)
|
תופעה מוזרה בה נתקלתי מספר פעמים בעת כתיבת דפי HTML, היא מיקום לא נכון של תוכן (טקסט, DIV, תמונה וכו') הנכתבים מיד לאחר סגירת טבלה שהכילה תמונה, אחת או יותר. למרות שהטבלה נסגרת כיאות וכל התאגים הושלמו, התוכן הנוסף "קופץ" לחלקו העליון של הדף ומופיע באחד הצדדים. התופעה עלולה להופיע גם לאחר שהכנסנו הגדרות מסוימות לתמונה שאינה ממוקמת בטבלה.
מה הסיבה לכך? מעט מעורפלת אך קשורה בדרך כלל לכך שלתמונה יש מרווחי צד (Margins) עקב ישורה למיקום מסוים על ידי התכונה Align. במקרה כזה ובמיוחד אם הוכנסה תמונה כזו לטבלה, התאג <BR> מבצע לא נכון את תפקידו.
הפתרון פשוט, בעת שנתקלתם בבעייה המתוארת, הכניסו במיקום הבעייתי את <BR> כולל התכונה Clear ופרמטר מתאים. הפרמטרים האפשריים לתכונה הם: left, right, all והתאג יראה לדוגמא כך: <BR CLEAR="right">. נסו את אחד משלושת הפרמטרים עד לקבלת תוצאה משביעת רצון.
|
|
|
|
