מדריך למשתמש ביטול

אודות XML ו-XSLT

  1. מדריך למשתמש של Dreamweaver
  2. מבוא
    1. מידע בסיסי על עיצוב אתרי אינטרנט מגיב
    2. מה חדש ב-Dreamweaver
    3. פיתוח אתרי אינטרנט באמצעות Dreamweaver - סקירה
    4. Dreamweaver / שאלות נפוצות
    5. קיצורי מקשים
    6. דרישות המערכת של Dreamweaver
    7. סיכום תכונות
  3. Dreamweaver ו-Creative Cloud
    1. סנכרון הגדרות של Dreamweaver עם Creative Cloud‏
    2. Creative Cloud Libraries ב-Dreamweaver
    3. שימוש בקובצי Photoshop ב-Dreamweaver
    4. עבודה עם Adobe Animate ו-Dreamweaver
    5. חילוץ קובצי SVG ממוטבים לאינטרנט מספריות
  4. התצוגות וסביבות העבודה של Dreamweaver
    1. סביבת העבודה של Dreamweaver‏
    2. מיטוב סביבת העבודה של Dreamweaver לפיתוח חזותי
    3. חיפוש קבצים בהתבסס על שם קובץ או תוכן |‏ Mac OS
  5. הגדרת אתרי אינטרנט
    1. על אתרי Dreamweaver
    2. הגדרת גרסה מקומית של האתר שלך
    3. התחברות לשרת פרסום
    4. הגדרת שרת בדיקות
    5. ייבוא וייצוא של הגדרות אתר Dreamweaver
    6. העתקת אתרי אינטרנט קיימים משרת מרוחק לבסיס האתר המקומי שלך
    7. תכונות נגישות ב-Dreamweaver
    8. הגדרות מתקדמות
    9. הגדרת העדפות להעברת קבצים
    10. ציון הגדרות שרת פרוקסי ב-Dreamweaver
    11. סנכרון הגדרות של Dreamweaver עם Creative Cloud‏
    12. שימוש ב-Git ב-Dreamweaver
  6. ניהול קבצים
    1. יצירה ופתיחה של קבצים
    2. ניהול קבצים ותיקיות
    3. הורדת קבצים מהשרת והעלאת קבצים לשרת
    4. הכנסה לאחסון והוצאה מאחסון של קבצים
    5. סנכרון קבצים
    6. השוואת קבצים למציאת הבדלים
    7. הסוואת קבצים ותיקיות באתר Dreamweaver שלך
    8. הפעלת Design Notes עבור אתרי Dreamweaver
    9. מניעת אפשרות ניצול לרעה של Gatekeeper
  7. פריסה ועיצוב
    1. שימוש בעזרים חזותיים לפריסה
    2. על השימוש ב-CSS לפריסת דף
    3. עיצוב אתרי אינטרנט מגיבים באמצעות Bootstrap
    4. יצירת שאילתות מדיה והשימוש בהן ב-Dreamweaver
    5. הצגת תוכן בטבלאות
    6. צבעים
    7. יצירת עיצוב מגיב באמצעות פריסות רשת זורמות
    8. Extract ב-Dreamweaver
  8. CSS
    1. הכרת CSS ‏(Cascading Style Sheets)
    2. פריסת עמודים בעזרת CSS Designer
    3. שימוש בכלים לעיבוד מקדים של CSS ב-Dreamweaver
    4. כיצד להגדיר העדפות סגנון CSS ב-Dreamweaver
    5. העברת כללי CSS ב-Dreamweaver
    6. המרת CSS בתוך שורה לכלל CSS ב-Dreamweaver
    7. עבודה עם תגי div
    8. החלת מעברי צבע על רקע
    9. יצירה ועריכה של אפקטי מעבר של CSS3 ב-Dreamweaver
    10. עיצוב קוד
  9. תוכן דף והנכסים הקיימים בו
    1. הגדרת מאפייני דף
    2. הגדרת מאפייני כותרת של CSS ומאפייני קישור של CSS
    3. עבודה עם טקסט
    4. מציאה והחלפה של טקסט, תגים ותכונות
    5. החלונית DOM
    6. עריכה ב-Live View
    7. קידוד מסמכים ב-Dreamweaver
    8. בחירה והצגה של רכיבים בחלון Document
    9. הגדרת מאפייני טקסט ב-Property inspector
    10. בדיקת איות בדף אינטרנט
    11. שימוש בכללים אופקיים ב-Dreamweaver
    12. הוספה ושינוי של שילובי גופנים ב-Dreamweaver
    13. עבודה עם נכסים
    14. הכנסה ועדכון של תאריכים ב-Dreamweaver
    15. יצירה וניהול של נכסים מועדפים ב-Dreamweaver
    16. הכנסה ועריכה של תמונות ב-Dreamweaver
    17. הוספת אובייקטי מדיה
    18. הוספת סרטוני וידאו ב-Dreamweaver
    19. הכנסת וידאו של HTML5
    20. הכנסת קובצי SWF
    21. הוספת אפקטי שמע
    22. הכנסת שמע של HTML5 ב-Dreamweaver
    23. עבודה עם פריטי ספרייה
    24. שימוש בטקסט ערבי ועברי ב-Dreamweaver
  10. קישור וניווט
    1. אודות קישור וניווט
    2. קישור
    3. מפות תמונה
    4. פתרון בעיות של קישורים
  11. רכיבים גרפיים ואפקטים של jQuery
    1. שימוש ברכיבים גרפיים של jQuery לממשק משתמש ולמכשירים ניידים ב-Dreamweaver
    2. שימוש באפקטים של jQuery ב-Dreamweaver
  12. כתיבת קוד של אתרי אינטרנט
    1. כתיבת קוד ב-Dreamweaver
    2. סביבה של כתיבת קוד ב-Dreamweaver
    3. הגדרת העדפות לכתיבת קוד
    4. התאמה אישית של העדפות צבעי קוד
    5. כתיבה ועריכה של קוד
    6. אפשרויות של רמזי קוד והשלמת קוד
    7. צמצום והרחבה של קוד
    8. שימוש חוזר בקוד עם גזירי קוד
    9. איתור שגיאות בקוד (Linting)
    10. מטוב הקוד
    11. עריכת קוד בתצוגת Design
    12. עבודה עם תוכן כותרת של דפים
    13. הכנסת קבצים נכללים בצד השרת ב-Dreamweaver
    14. שימוש בספריות תגים ב-Dreamweaver
    15. ייבוא תגים מותאמים אישית אל Dreamweaver
    16. שימוש בהתנהגויות של JavaScript (הוראות כלליות)
    17. החלת התנהגויות מובנות של JavaScript
    18. על XML ו-XSLT
    19. ביצוע המרות XSL בצד השרת ב-Dreamweaver
    20. ביצוע המרות XSL בצד הלקוח ב-Dreamweaver
    21. הוספת ישויות תו עבור XSLT ב-Dreamweaver
    22. עיצוב קוד
  13. תהליכי עבודה המותאמים למגוון מוצרים
    1. התקנה הרחבות אל Dreamweaver והשימוש בהן
    2. עדכונים בתוך היישום ב-Dreamweaver
    3. הכנסת מסמכי Microsoft Office ב-Dreamweaver‏ ‏(Windows בלבד)
    4. עבודה עם Fireworks ו-Dreamweaver
    5. עריכת תוכן באתרי Dreamweaver באמצעות Contribute
    6. שילוב של Dreamweaver עם Business Catalyst
    7. יצירת מסעות פרסום בדוא"ל מותאמים אישים
  14. תבניות
    1. על תבניות Dreamweaver
    2. זיהוי תבניות ומסמכים המבוססים על תבניות
    3. יצירת תבנית Dreamweaver
    4. יצירת אזורים ניתנים לעריכה בתבניות
    5. יצירת אזורים חוזרים וטבלאות חוזרות ב-Dreamweaver
    6. שימוש באזורים אופציונליים בתבניות
    7. הגדרת תכונות תג ניתנות לעריכה ב-Dreamweaver
    8. כיצד ליצור תבניות מקוננות ב-Dreamweaver
    9. עריכה, עדכון ומחיקה של תבניות
    10. ייצוא וייבוא תוכן XML ב-Dreamweaver
    11. החלה של תבנית על מסמך קיים או הסרתה ממנו
    12. עריכת תוכן בתבניות Dreamweaver
    13. כללי תחביר של תגי תבנית ב-Dreamweaver
    14. הגדרת העדפות סימון לאזורי תבנית
    15. היתרונות של שימוש בתבניות ב-Dreamweaver
  15. מכשירים ניידים ומסכים מרובים
    1. יצירת שאילתות מדיה
    2. שינוי כיוון דף עבור מכשירים ניידים
    3. יצירת יישומי אינטרנט עבור מכשירים ניידים באמצעות Dreamweaver
  16. אתרי אינטרנט, דפים וטופסי אינטרנט דינמיים
    1. הבנת יישומי אינטרנט
    2. הגדרת המחשב לפיתוח יישומים
    3. פתרון בעיות בחיבורים למסדי נתונים
    4. הסרת סקריפטים של חיבור ב-Dreamweaver
    5. עיצוב דפים דינמיים
    6. סקירת מקורות של תוכן דינמי
    7. הגדרת מקורות של תוכן דינמי
    8. הוספת תוכן דינמי לדפים
    9. שינוי תוכן דינמי ב-Dreamweaver
    10. הצגת רשומות של מסד נתונים
    11. אספקת נתונים בזמן אמת ב-Dreamweaver ופתרון בעיות בהם
    12. הוספת התנהגויות שרת מותאמות אישית ב-Dreamweaver
    13. בניית טפסים באמצעות Dreamweaver
    14. שימוש בטפסים לאיסוף מידע ממשתמשים
    15. יצירה והפעלה של טופסי ColdFusion ב-Dreamweaver
    16. יצירת טופסי אינטרנט
    17. תמיכה משופרת ב-HTML5 עבור רכיבי טופס
    18. פיתוח טופס באמצעות Dreamweaver
  17. בנייה חזותית של יישומים
    1. בניית דפי אב ופרטים ב-Dreamweaver
    2. בניית דפי חיפוש ותוצאות
    3. בניית דף להכנסת רשומות
    4. בניית דף לעדכון רשומות ב-Dreamweaver
    5. בניית דפים למחיקת רשומות ב-Dreamweaver
    6. שימוש בפקודות ASP כדי לשנות מסד נתונים ב-Dreamweaver
    7. בניית דף רישום
    8. בניית דף כניסה
    9. בניית דף המאפשר גישה למשתמשים מורשים בלבד
    10. אבטחת תיקיות ב-ColdFusion באמצעות Dreamweaver
    11. שימוש ברכיבי ColdFusion ב-Dreamweaver
  18. בדיקה, תצוגה מקדימה ופרסום של אתרי אינטרנט
    1. תצוגה מקדימה של דפים
    2. תצוגה מקדימה עבור דפי אינטרנט של Dreamweaver במכשירים מרובים
    3. בדיקת אתר Dreamweaver שלך

 

השתמש ב-XML וב-XSLT בדפי אינטרנט של Dreamweaver.

הערה:

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

שימוש ב-XML וב-XSL בדפי אינטרנט

Extensible Markup Language ‏(XML) היא שפה המאפשרת להבנות מידע. בדומה ל-HTML‏, XML מאפשר להבנות את המידע בעזרת תגים, אך תגי XML אינם מוגדרים מראש כמו תגי HTML. במקום זאת, XML מאפשר ליצור תגים המגדירים באופן הטוב ביותר את מבנה הנתונים (סכימה) שלך. תגים מקוננים בתוך תגים אחרים כדי ליצור סכימה של תגי אב ותגים בנים. כמו רוב תגי HTML, כל התגים בסכימת XML חייבים לכלול תג פותח ותג סוגר.

הדוגמה הבאה מציגה את המבנה הבסיסי של קובץ XML:

<?xml version=“1.0”> 
<mybooks> 
    <book bookid=“1”> 
        <pubdate>03/01/2004</pubdate> 
        <title>Displaying XML Data with Adobe Dreamweaver</title> 
        <author>Charles Brown</author> 
    </book> 
    <book bookid=“2”> 
        <pubdate>04/08/2004</pubdate> 
        <title>Understanding XML</title> 
        <author>John Thompson</author> 
    </book> 
</mybooks>

בדוגמה זו, כל תג אב <book> כולל שלושה תגים בנים: <pubdate>‏, <title> ו- <author>. אך כל תג <book> הוא גם תג בן של התג <mybooks>, הנמצא רמה אחת גבוה יותר בסכימה. ניתן לתת שמות ולהבנות תגי XML בכל דרך שהיא, בתנאי שמקוננים תגים בהתאם בתוך תגים אחרים, ומקצים לכל תג פותח תג סוגר מקביל.

מסמכי XML אינם כוללים עיצוב – אלה הם פשוט מכלים למידע מובנה. לאחר שיש לך סכימת XML, ניתן להשתמש בשפת XSL ‏(Extensible Stylesheet Language) כדי להציג את המידע. כפי ש-Cascading Style Sheets ‏(CSS) מאפשרים לעצב HTML,‏ XSL מאפשר לעצב נתוני XML. ניתן להגדיר סגנונות, רכיבי דף, פריסה וכן הלאה בקובץ XSL ולצרף אותו לקובץ XML. כאשר המשתמש יצפה בנתוני XML בדפדפן, הנתונים יעוצבו בהתאם להגדרות בקובץ XSL. התוכן (נתוני XML) והתצוגה שלו (המוגדרת באמצעות קובץ XSL) הם נפרדים לחלוטין, ומעניקים יתר שליטה על אופן התצוגה של המידע בדף האינטרנט. באופן עקרוני, XSL היא טכנולוגיית תצוגה לקובצי XML, כשהפלט הראשי הוא דף HTML.

Extensible Stylesheet Language Transformations ‏(XSLT) היא תת-שפה של XSL המאפשרת להציג נתוני XML בדף אינטרנט ו"להמיר" אותם, יחד עם סגנונות XSL, לנתוני סגנון HTML ניתנים לקריאה. ניתן להשתמש ב-Dreamweaver ליצירת דפי XSLT המאפשרים לבצע המרות XSL בעזרת שרת יישומים או דפדפן. בהמרות XSL מצד השרת, השרת מבצע את עבודת ההמרה של XML ו-XSL ומציג את הנתונים בדף. בהמרות מצד הלקוח, הדפדפן (כגון Internet Explorer) מבצע את העבודה.

הגישה שתנקוט (המרות מצד השרת לעומת המרות מצד הלקוח) תלויה בתוצאה הסופית שאתה מנסה לקבל, בטכנולוגיות הזמינות, ברמת הגישה לקובצי המקור מסוג XML ובגורמים אחרים. לכל אחת משתי הגישות יש יתרונות וחסרונות משלה. לדוגמה, המרות מצד השרת פועלות בכל הדפדפנים, ואילו המרות מצד הלקוח מוגבלות לדפדפנים חדשים יותר (Internet Explorer 6‏, Netscape 8‏, Mozilla 1.8 ו-Firefox 1.0.2). המרות מצד השרת מאפשרות להציג נתוני XML באופן דינמי מהשרת שלך או מכל מקום אחר ברשת האינטרנט, ואילו המרות מצד הלקוח חייבות להשתמש בנתוני XML המאוחסנים מקומית בשרת האינטרנט שלך. לבסוף, המרות מצד השרת דורשות שתפרוס את הדפים בשרת יישומים מוגדר מראש, ואילו המרות מצד הלקוח דורשות גישה לשרת אינטרנט בלבד.

לקבלת ערכת לימוד בנושא הבנת XML, ראה www.adobe.com/go/vid0165_il.

המרות XSL מצד השרת

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

בעבודה עם המרות מצד השרת, ניתן להשתמש ב-Dreamweaver ליצירת דפי XSLT המפיקים מסמכי HTML מלאים (דפי XSLT שלמים) או מקטעי XSLT היוצרים חלק ממסמך HTML. דף XSLT מלא דומה לדף HTML רגיל. הוא כולל תג <body> ותג <head>, ומאפשר להציג שילוב של נתוני HTML ו-XML בדף. מקטע XSLT הוא קטע קוד, המשמש למסמך נפרד, ומציג נתוני XML מעוצבים. שלא כמו דף XSLT שלם, זהו קובץ עצמאי שאינו כולל תג <body> או <head>. אם ברצונך להציג נתוני XML בדף נפרד, יש ליצור דף XSLT מלא ולקשר אליו את נתוני XML הרצויים. מצד שני, אם ברצונך להציג נתוני XML במקטע מסוים בדף דינמי קיים – לדוגמה דף בית דינמי לחנות של מוצרי ספורט, עם תוצאות ממשחקי ספורט מהזנות RSS המוזנות בצד אחד של הדף – ניתן ליצור מקטע XSLT ולהוסיף הפניה למקטע זה בדף הדינמי. התרחיש הנפוץ הוא יצירת מקטעי XSLT ושימוש בהם בצירוף לדפים דינמיים אחרים לתצוגת נתוני XML.

הצעד הראשון ביצירת סוגי דפים אלה הוא ליצור מקטע XSLT. זהו קובץ נפרד הכולל את הפריסה, העיצוב וכולי של נתוני XML שברצונך להציג בסופו של דבר בדף הדינמי. לאחר יצירת מקטע XSLT, ניתן להוסיף הפניה למקטע בדף הדינמי (לדוגמה, דף PHP או ColdFusion). ההפניה שנוספת למקטע פועלת כמו SSI ‏(Server Side Include) – נתוני XML המעוצבים (המקטע) מאוחסנים בקובץ נפרד, ואילו בתצוגת Design מופיע מציין מיקום למקטע בדף הדינמי עצמו. כשדפדפן מבקש את הדף הדינמי הכולל את ההפניה למקטע, השרת מעבד את ההוראה הנכללת ויוצר מסמך חדש, שבו התוכן המעוצב של המקטע מופיע במקום מציין המיקום.

A. הדפדפן מבקש לקבל דף דינמי B. שרת האינטרנט מוצא את הדף ומעביר אותו לשרת היישומים C. שרת היישומים סורק את הדף לקבלת הוראות ומקבל את מקטע XSLT‏ D. שרת היישומים מבצע המרה (קורא את מקטע XSLT, מקבל נתוני XML ומעצב אותם) E. שרת היישומים מוסיף את המקטע לאחר ההמרה לדף ומעביר אותו בחזרה לשרת האינטרנט F. שרת האינטרנט שולח את הדף הגמור לדפדפן 

ניתן להשתמש בהתנהגות המרת XSL של השרת כדי להוסיף את ההפניה למקטע XSLT בדף דינמי. כשמוסיפים את ההפניה, Dreamweaver יוצר את התיקייה includes/MM_XSLTransform/‎ בתיקיית השורש של האתר, הכוללת קובץ ספרייה של זמן הריצה. שרת היישומים משתמש בפונקציות שהוגדרו בקובץ זה בשעת המרת נתוני XML שצוינו. הקובץ אחראי להביא את נתוני XML ואת מקטעי XSLT, לבצע המרת XSL, ולהפיק את התוצאות בדף האינטרנט.

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

ניתן גם להשתמש ב-Dreamweaver ליצירת דפי XSLT שלמים לשימוש בהמרות מצד השרת. דף XSLT שלם פועל בדיוק כמו מקטע XSLT. רק אחרי שמוסיפים את ההפניה לכל דף XSLT בעזרת התנהגות המרת XSL של השרת, מוסיפים את כל התוכן לדף HTML. באופן זה, הדף הדינמי (דף CFM‏, PHP או ASP הפועל בדף המכל) חייב להיות נקי מנתוני HTML לפני שמוסיפים את ההפניה.

Dreamweaver תומך בהמרות XSL לדפי ColdFusion‏, ASP ו-PHP.

הערה:

השרת חייב להיות מוגדר כהלכה כדי לבצע המרות מצד השרת. למידע נוסף, פנה למנהל השרת.

המרות XSL מצד הלקוח

ניתן לבצע המרות XSL במחשב הלקוח מבלי להשתמש בשרת יישומים. ניתן להשתמש ב-Dreamweaver ליצירת דף XSLT מלא שיבצע זאת. עם זאת, המרות מצד הלקוח דורשות טיפול בקובץ XML הכולל את הנתונים שברצונך להציג. בנוסף, המרות מצד הלקוח פועלות רק בדפדפנים מתקדמים (Internet Explorer 6‏, Netscape 8‏, Mozilla 1.8 ו-Firefox 1.0.2). 

צור תחילה דף XSLT וקשר אותו למקור נתונים מסוג XML.‏ (Dreamweaver ישאל אם ברצונך לקשר את מקור הנתונים כשאתה יוצר דף חדש.) ניתן ליצור דף XSLT מאפס, או להמיר דף HTML קיים לדף XSLT. כשממירים דף HTML קיים לדף XSLT, יש לקשר מקור נתונים מסוג XML מהחלונית Bindings ‏(Window >‏ Bindings).

לאחר יצירת דף XSLT, יש לקשר אותו לקובץ XML הכולל את נתוני XML הדרושים באמצעות הוספת הפניה לדף XSLT בקובץ XML עצמו (כפי שמוסיפים הפניה לגיליון סגנונות CSS חיצוני באזור <head> של דף HTML). המבקרים באתר חייבים לראות את קובץ XML (ולא את דף XSLT) בדפדפן. כשהמבקרים באתר יראו את הדף, הדפדפן יבצע את המרות XSL ויציג את נתוני XML, המעוצבים על-ידי דף XSLT המקושר.

היחס בין דף XML לבין דף XSLT המקושר אליו הוא דומה מבחינה מושגית, ועם זאת שונה מהמודל של דף HTML/גיליון CSS חיצוני. כשיש דף HTML הכולל תוכן (כגון טקסט), ניתן להשתמש בגיליון סגנונות חיצוני לעיצוב התוכן. דף HTML קובע את התוכן, וקוד CSS החיצוני, שהמשתמש אינו רואה לעולם, קובע את התצוגה. ב-XSLT ו-XML המצב הפוך. קובץ XML (שהמשתמש אינו רואה לעולם בצורתו הגולמית) קובע את התוכן, ואילו דף XSLT קובע את התצוגה. דף XSLT כולל את הטבלאות, הפריסה, הגרפיקה וכולי שדף HTML סטנדרטי כולל בדרך כלל. כשמשתמש מתבונן בקובץ XML בדפדפן, דף XSLT מעצב את התוכן.

A. הדפדפן מבקש לקבל קובץ XML B. ‏השרת מגיב ושולח קובץ XML לדפדפן C. הדפדפן קורא את הנחיות XML וקורא לקובץ XSLT‏ D. ‏השרת שולח קובץ XSLT לדפדפן E. הדפדפן ממיר את נתוני XML ומציג אותם בדפדפן 

כשמשתמשים ב-Dreamweaver לקישור דף XSLT לדף XML, ‏Dreamweaver מוסיף את הקוד המתאים בראש דף ה-XML. אם דף XML שאתה מבצע אליו את הקישור נמצא ברשותך (כלומר אם קובץ XML מאוחסן אך ורק בשרת האינטרנט שלך), כל מה שאתה צריך לעשות הוא להשתמש ב-Dreamweaver להוספת הקוד המתאים המקשר את שני הדפים. כשקובץ XML נמצא ברשותך, המרות XSL המתבצעות על-ידי הלקוח הן דינמיות באופן מלא. כלומר, כל פעם שתעדכן את הנתונים בקובץ XML, כל פלט HTML המשתמש בדף XSLT המקושר יתעדכן אוטומטית במידע החדש.

הערה:

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

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

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

נתוני XML ורכיבים חוזרים

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

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

כשמחילים אובייקט XSLT מסוג אזור חוזר בחלון המסמך, מסגרת אפורה דקה מופיעה מסביב לאזור החוזר. כשאתה מציג תצוגה מקדימה של עבודתך בדפדפן (File >‏ Preview in Browser), המסגרת האפורה נעלמת והבחירה מתרחבת ומציגה את הרכיבים החוזרים שצוינו בקובץ XML, כמו באיור הקודם.

כשאתה מוסיף אובייקט XSLT מסוג אזור חוזר לדף, אורך מציין המיקום של נתוני XML בחלון המסמך נקטם. זאת משום ש-Dreamweaver מעדכן את ביטוי XPath (שפת XML Path) למציין המיקום של נתוני XML כך שהוא יחסי לנתיב של הרכיב החוזר.

לדוגמה, הקוד הבא הוא קוד של טבלה הכוללת שני מצייני מיקום דינמיים, שלא הוחל עליה אובייקט XSLT מסוג אזור חוזר:

<table width="500" border="1"> 
    <tr> 
        <td><xsl:value-of select="rss/channel/item/title"/></td> 
    </tr> 
    <tr> 
        <td><xsl:value-of select="rss/channel/item/description"/></td> 
    </tr> 
</table>

הקוד הבא הוא לאותה טבלה, שהוחל עליה אובייקט XSLT מסוג אזור חוזר:

<xsl:for-each select="rss/channel/item"> 
    <table width="500" border="1"> 
        <tr> 
            <td><xsl:value-of select="title"/></td> 
        </tr> 
        <tr> 
            <td><xsl:value-of select="description"/></td> 
        </tr> 
    </table> 
</xsl:for-each>

בדוגמה הקודמת, Dreamweaver עדכן את XPath לפריטים הנכללים באזור החוזר (כותרת ותיאור) כך שיהיו יחסיים ל-XPath בתגים הפותחים ובתגים הסוגרים ‎<xsl:for-each>‎, במקום לעדכן את כל המסמך.

Dreamweaver מפיק ביטויי XPath יחסיים להקשר גם במקרים אחרים. לדוגמה, אם תגרור מציין מיקום של נתוני XML לטבלה שכבר הוחל עליה אובייקט XSLT מסוג אזור חוזר, Dreamweaver יציג אוטומטית את XPath יחסית ל-XPath הקיים בתגים הפותחים והסוגרים ‎<xsl:for-each>‎.

תצוגה מקדימה של נתוני XML

כשמשתמשים באפשרות Preview in Browser ‏(File >‏ Preview in Browser) כדי להציג תצוגה מקדימה של נתוני XML שהוספת במקטע XSLT או בדף XSLT שלם, המנגנון המבצע את המרות XSL שונה ממצב למצב. בדפים דינמיים הכוללים מקטעי XSLT, שרת היישומים מבצע תמיד את ההמרות. במקרים אחרים, Dreamweaver או הדפדפן יכולים לבצע את ההמרה.

הטבלה הבאה מסכמת את המצבים בשעת שימוש בפקודה Preview in Browser, ואת המנגנונים המבצעים את ההמרות, בהתאמה:

סוג הדף המוצג בתצוגה מקדימה בדפדפן

המרת נתונים מתבצעת על-ידי

דף דינמי הכולל מקטע XSLT

שרת יישומים

מקטע XSLT או דף XSLT שלם

Dreamweaver

קובץ XML עם קישור לדף XSLT שלם

דפדפן

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

תצוגה מקדימה של דפים להמרות מצד השרת

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

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

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

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

תצוגה מקדימה של דפי XSLT מלאים ושל מקטעי XSLT

בשעת יצירת דפי XSLT מלאים ומקטעי XSLT, ודאי תרצה להציג תצוגה מקדימה של עבודתך כדי לוודא שהנתונים מוצגים כהלכה. אם תשתמש בפקודה Preview in Browser כד להציג דף XSLT שלם או מקטע XSLT, ‏Dreamweaver יבצע את ההמרות בעזרת מנגנון המרה מובנה. שיטה זו מציגה תוצאות מהירות, ומקלה עליך להמשיך לבנות את הדף ולנפות בו שגיאות. היא גם מספקת דרך לצפות בקוד HTML המלא (תגים, סגנונות וכולי) בעזרת בחירה באפשרות View Source בדפדפן.

הערה:

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

לוגו של Adobe

כניסה לחשבון