לחצו על סרגל Visual Media Query המתאים לשאילתת המדיה שברצונכם לערוך.
עודכן לאחרונה בתאריך
20 בדצמבר 2021
השתמש ב-Visual Media Queries כדי להציג ולערוך את דפי האינטרנט שלך בנקודות עצירה שונות המתאימות לגודלי מסך שונים.
Media Queries הוא מודול של CSS3 המסייע לך לתכנן אתרי עיצוב מהירי תגובה על-ידי הגדרת כללי סגנון שונים עבור סוגי מדיה או התקנים שונים. על בסיס החוקים הללו, התוכן מעובד כדי להסתגל לתנאים שונים, כמו גודל מסך, גודל חלון הדפדפן, גודל מכשיר וכיוון, ורזולוציה.
ניתן להוסיף שאילתות מדיה לקובץ ה-CSS באמצעות הכלל @media. לחלופין, אתם יכולים ליצור גיליונות סגנון נפרדים לסוגי מדיה שונים ואז לקרוא להם באמצעות התחביר הבא:
<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />
הדפדפן בהתקן בודק את שאילתת המדיה ומשתמש בקובץ ה- CSS התואם כדי להציג את דף האינטרנט.
לקבלת מידע נוסף, עיין במאמר זה.
באפשרותך להוסיף את שאילתות המדיה על-ידי הוספת הקוד הרלוונטי לקבצי ה-HTML או ה-CSS שלך. בנוסף, Dreamweaver מאפשר ליצור ולנהל שאילתות מדיה בקלות באמצעות:
ההבדל העיקרי בין שתי השיטות ניכר בהיבט החזותי. אם אתה מעדיף לערוך את שינויי הקוד ולאחר מכן להציג את השינויים בתצוגת Live, השתמש ב-CSS Designer. אם אתה מעדיף להציג את הדף במעברי שורה שונים ותוך כדי כך לערוך שינויים בעיצוב, עדיף להשתמש בשאילתת מדיה חזותית.סרגלים של Visual Media Query
סרגלי Visual Media Query הם ייצוג חזותי של שאילתות המדיה הקיימות בדף. סרגלים אלו עוזרים לך ליצור תמונה חזותית של דף האינטרנט במעברי שורה שונים ולראות את הזרימה החוזרת של רכיבים שונים בדף האינטרנט באזורי תצוגה שונים. בעת הצגת הדף באזורי תצוגה שונים, ניתן לערוך שינויים בעיצוב של אזור תצוגה ספציפי ללא השפעה על עיצוב הדף באזורי תצוגה אחרים.
שאילתת מדיה חזותית מכילה שלושה סרגלים המופיעים כשורות אופקיות, וכל אחד מהם מייצג קטגוריה של שאילתת מדיה:
ירוק: שאילתות מדיה עם תנאי max-width
כחול : שאילתות מדיה עם תנאי min-width וגם max-width
סגול : שאילתות מדיה עם תנאי min-width
שאילתות המדיה הרשומות בלוח ה-CSS Designer מסומנות גם בצבעים האלה.
כל קטגוריה יכולה להכיל שאילתת מדיה אחת או יותר. אם תנאי של שאילתת מדיה אינו מוגדר במסמך, גם סרגל שאילתות המדיה החזותיות הרלוונטי לא יוצג. לדוגמה, אם המסמך לא כולל תנאי min-width, אז הסרגל הסגול לא מוצג.
ערכי נקודת השבר מוצגים על הסרגלים – min-width בצד שמאל ו-max-width בצד ימין של הסרגל.
A. מעברי שורה B. סרגלים של Visual Media Query C. סמל הוספת שאילתות מדיה D. כלי הניקוי
הסתרה או הצגה של שאילתות מדיה ויזואליות
סרגל Visual Media Query גלוי בתצוגת Live כברירת מחדל. כדי להסתיר את הסרגל, השתמשו ב-Toggle Visual Media Queries bar שבסרגל הכלים.
מעבר בין נקודות שבר
כדי להציג את הדף בגודל מסוים (במעבר שורה ספציפי), לחץ על סרגל שאילתות המדיה המתאים. המסמך ייצמד לנקודת השבר.
לחלופין, אתם יכולים לגרור את הסקראבר לנקודת השבר הרצויה.
כדי לשנות את גודל התצוגה לגודל חלון המסמך של Dreamweaver, בצעו את אחת הפעולות הבאות:
- לחץ פעמיים במקום כלשהו באזור האפור שמימין למסמך, שבו מופיע הכיתוב 'Double Click To Fit Width'. אם אתם לא רואים את האזור האפור, גררו את הסקראבר שמאלה.
- בחרו באפשרות Full Width ברשימה הנפתחת בתחתית חלון המסמך.
אם אתם לא רואים את האפשרות הזו, גררו את הסקראבר כדי להקטין את גודל דף האינטרנט.
עריכה ויזואלית של שאילתות מדיה
פעולה זו תציג את נקודות שינוי הגודל. עבור שאילתות מדיה שכוללות גם ערכי min וגם max-width, ידיות שינוי גודל מופיעות בשני הצדדים של הסרגל.
גררו את הידיות לגודל הנדרש.
שאילתות המדיה מתעדכנות באופן אוטומטי בערכי הרוחב המינימלי ו/או הרוחב המקסימלי. לאחר מכן תוצג התראה המציינת כי עריכת שאילתת המדיה הסתיימה בהצלחה. אם יש כמה שאילתות מדיה השייכות לסרגל שאילתות המדיה החזותיות, כולן יתעדכנו. מספר שאילתות המדיה שעודכנו מוצג יחד עם הודעת ההצלחה.
כדי לבטל, הקישו Ctrl+Z (Win) או Cmd+Z (Mac).
לחלופין, תוכלו ללחוץ לחיצה כפולה על ערכי נקודת השבירה כדי להקליד את הערכים באמצעות המקלדת.
הוספת שאילתות מדיה חדשות
גררו את המחוון לאורך הסרגל לגודל הנדרש.
לחץ על 
.
בחלון המוקפץ שמופיע, אפשרות הרוחב המרבי נבחרת כברירת מחדל. כדי לציין min-width או min-max, בחרו את האפשרות המתאימה ברשימה הנפתחת ובחרו את היחידות הנדרשות.
לאחר מכן, בחרו מקור CSS שאליו יש להוסיף את שאילתת המדיה.
אם תבחר ליצור קובץ CSS חדש, יופיע חלון נפתח אחר. ציינו את השם ואת הנתיב של קובץ ה-CSS החדש ולחצו OK.
כדי לבטל, הקישו Ctrl+Z (Win) או Cmd+Z (Mac).
מחיקת שאילתות מדיה
לחצו לחיצה ימנית על סרגל Visual Media Query המתאים.
לחצו Delete ולאחר מכן לחצו על שאילתת המדיה שברצונכם למחוק.
לחצו OK כדי לאשר שברצונכם למחוק את כל שאילתות המדיה ואת הבוררים המשויכים.
כדי לבטל, הקישו Ctrl+Z (Win) או Cmd+Z (Mac).
הצגת הקוד עבור שאילתות מדיה
לחצו לחיצה ימנית על סרגל Visual Media Query הנדרש והעבירו את העכבר על Go To Code.
רשימה של כל שאילתות המדיה בטווח נקודת השבירה הספציפי, יחד עם הקבצים שבהם הן מוגדרות, מופיעה.
לחצו על שאילתת המדיה הנדרשת כדי לנווט לקוד המתאים ב-Code View.
אם תצוגת הקוד אינה גלויה, המסמך עובר למצב פיצול כדי להציג את הקוד.
בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.
