צור עמוד אינטרנט.
עודכן לאחרונה בתאריך
27 באפריל 2021
ניתן להשתמש בשאילתות מדיה לציון קובצי CSS בהתבסס על המאפיינים המדווחים של ההתקן (עיצוב מהיר-תגובה). הדפדפן בהתקן בודק את שאילתת המדיה ומשתמש בקובץ ה- CSS התואם כדי להציג את דף האינטרנט.
לדוגמה, שאילתת המדיה הבאה מציינת את הקובץ phone.css להתקנים ברוחב של 300-320 פיקסלים.
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">
למבוא מקיף לשאילתות מדיה, עיינו במאמר של Don Booth ב-Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_en.
למידע נוסף על שאילתות מדיה מ-W3C עיינו ב-www.w3.org/TR/css3-mediaqueries/.
יצירת שאילתת מדיה
ב-Dreamweaver, אפשר ליצור קובץ שאילתות מדיה כלל-אתרי או שאילתת מדיה ספציפית למסמך.
קובץ שאילתות מדיה כלל-אתרי
מגדיר הגדרות תצוגה לכל הדפים באתר שכוללים את הקובץ.
קובץ שאילתות המדיה הכלל-אתרי משמש כמאגר מרכזי לכל שאילתות המדיה באתר.לאחר יצירת הקובץ, קשרו אליו מדפי האתר שצריכים להשתמש בשאילתות המדיה שבקובץ לתצוגה שלהם.
שאילתת מדיה ספציפית למסמך
שאילתת המדיה מוכנסת ישירות למסמך, והדף מוצג על בסיס שאילתת המדיה שהוכנסה.
בחר Modify > Media Queries.
בצע אחת מהפעולות הבאות:
כדי ליצור קובץ שאילתות מדיה כלל-אתרי, בחרו באפשרות Site Wide Media Queries File.
כדי ליצור שאילתת מדיה ספציפית למסמך, בחר This Document.
עבור קובץ שאילתות מדיה לכל האתר, בצע את הפעולות הבאות:
לחץ על Specify.
בחר Create New File.
ציין שם עבור הקובץ ולחץ על OK.
ייתכן שחלק מהמכשירים לא מדווחים על הרוחב הקיים שלהם.כדי לאלץ מכשירים לדווח על הרוחב הממשי שלהם, ודאו שהאפשרות Force Devices To Report Actual Width מופעלת.
הקוד הבא מוכנס לקובץ שלכם כשאתם בוחרים באפשרות זו.
<meta name="viewport" content="width=device-width">
בצע אחת מהפעולות הבאות:
לחצו על "+" כדי להגדיר את המאפיינים עבור קובץ שאילתות המדיה.
לחצו על ה-Default Presets אם ברצונכם להתחיל עם הגדרות קבועות מראש סטנדרטיות.
בחרו שורות בטבלה ועדכנו את המאפיינים שלהן באמצעות האפשרויות שתחת Properties.
Description
התיאור של המכשיר שעבורו יש להשתמש בקובץ ה-CSS.לדוגמה, טלפון, טלוויזיה, מחשב לוח וכן הלאה.
Min Width and Max width
קובץ ה-CSS משמש להתקנים שהרוחב המדווח שלהם נמצא במסגרת הערכים שצוינו.
פתק
השאר את Min Width או את Max Width ריק אם אינך רוצה לציין טווח מפורש עבור התקן כלשהו. לדוגמה, נהוג להשאיר את Min Width ריק אם התקני היעד הם טלפונים, שנוטים להיות ברוחב של 320 פיקסלים ומטה.
CSS file
בחרו באפשרות Use Existing File ועברו לקובץ ה-CSS עבור המכשיר.
אם רצונכם לציין קובץ CSS שטרם יצרתם, בחרו באפשרות Create New File.הזינו את שם קובץ ה-CSS.הקובץ נוצר בעת הלחיצה על OK.
לחץ על OK.
קובץ חדש נוצר בתור קובץ שאילתות מדיה לכל האתר. שמור אותו.
שאילתת מדיה כלל-אתרית: עבור דפים קיימים, ודאו שכללתם את קובץ שאילתות המדיה בכל הדפים בתגית <head>.
דוגמה לקישור שאילתת מדיה שבו mediaquery_adobedotcom.css הוא קובץ שאילתת המדיה כלל-אתרי עבור האתר www.adobe.com:
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
שימוש בקובץ שאילתות מדיה קיים
צור עמוד אינטרנט או פתח עמוד קיים.
בחר Modify > Media Queries.
בחר Site-Wide Media Queries File.
לחץ על Specify.
בחרו באפשרות "Use Existing File" אם כבר יצרתם קובץ CSS עם "Media Query".
לחץ על סמל העיון כדי לנווט את הקובץ ולציין אותו. לחץ על OK.
בחר Site-Wide Media Queries File.
כדי לאלץ מכשירים לדווח על הרוחב בפועל שלהם, ודאו שהאפשרות Force Devices To Report Actual Width מופעלת.הקוד הבא מוכנס לקובץ שלכם כאשר תבחרו באפשרות זו.
<meta name="viewport" content="width=device-width">
לחץ על OK.
בחרו קובץ media queries כלל-אתרי אחר
השתמשו בהליך זה כדי לשנות את קובץ שאילתות המדיה הכלל-אתרי שהגדרתם בתיבת הדו-שיח Media Queries.
בחר Site > Manage Sites.
בתיבת הדו-שיח Manage, בחר את האתר שלך.
לחץ על Edit. תיבת הדו-שיח Site Setup מוצגת.
תחת Advanced Settings בחלונית השמאלית, בחר Local Info.
ב-Site-Wide Media Query File בלוח הימני, לחצו על Browse כדי לבחור את קובץ ה-CSS של media query.
פתק
שינוי קובץ ה-media queries הכלל-אתרי אינו משפיע על מסמכים המקושרים לקובץ media query כלל-אתרי אחר או קודם.
לחץ על Save.
הצגת דפי אינטרנט על בסיס media query
המימדים שצוינו בשאילתת מדיה מופיעים באפשרויות עבור גודל לחצן/חלון Multiscreen.כשבחרתם מימד מהתפריט, השינויים הבאים נראים:
גודל התצוגה משתנה כדי לשקף את הממדים שצוינו. גודל מסגרת המסמך אינו משתנה.
קובץ ה-CSS שצוין ב-media query משמש להצגת הדף.
פריטים דומים נוספים
בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.
