دليل المستخدم إلغاء

معاينة الصفحات

بحث

تاريخ آخر تحديث 25 فبراير 2022

قم بمعاينة صفحات الويب في Dreamweaver وفي المستعرضات.

تتيح المعاينة في الوقت الفعلي لك معاينة صفحاتك في المستعرض وعرض التغييرات في المستعرض في الوقت الفعلي أثناء كتابة التعليمات برمجية.

تعطيك طريقة العرض Live فكرة عن الكيفية التي ستظهر بها صفحتك على الويب وتتيح لك تحرير العناصر في طريقة العرض Code.

تعطيك طريقة العرض Design فكرة عن الكيفية التي ستظهر بها صفحتك على الويب ولكنها لن تعرض الصفحة كما يعرضها المستعرض تمامًا.

تتيح لك الميزة Open in Browser إمكانية مشاهدة الكيفية التي ستظهر بها صفحاتك في المستعرضات. تصلح هذه الميزة بأفضل شكل مع الصفحات التي تستخدم بيانات ديناميكية من قواعد البيانات لأنها ليست في الوقت الفعلي.

اقرأ لمعرفة المزيد حول الأنواع المختلفة من خيارات المعاينة في Dreamweaver.

المعاينة في المستعرض في الوقت الفعلي

يمكنك معاينة صفحات الويب الخاصة بك في الوقت الفعلي أثناء كتابة التعليمات البرمجية أو تصميمها في Dreamweaver. تتيح لك هذه الميزة كتابة التعليمات البرمجية ومعاينتها في صفحات الويب في وقت واحد على العديد من المستعرضات.

معاينة التغييرات في الوقت الفعلي في مستعرضك

انقر فوق Real-time Preview في شريط حالة Dreamweaver.

المعاينة في الوقت الفعلي

لديك خيارات معاينة صفحات الويب الخاصة بك في الوقت الفعلي في مستعرض.
لمعاينة صفحات الويب الخاصة بك على مستعرض، انقر فوق أيّ من خيارات المستعرضات المتوفرة.

يمكنك تحرير المستعرضات التي تظهر في هذه القائمة. لإضافة أو إزالة مستعرض من هذه القائمة، راجع تعيين تفضيلات المستعرضات.

وفي حالة وجود خادم اختبار، تأكد من تمكين Automatically Push Files To Testing Server أثناء إعداد خادم الاختبار.

تعمل المعاينة في الوقت الفعلي خارج الملفات في خادم الاختبار. يضمن تمكين الدفع التلقائي إلى خادم الاختبار لك مشاهدة التغييرات في الوقت الفعلي.
احفظ صفحة الويب والمستندات المرتبطة بها إذا طلب منك ذلك.

يتم فتح مستعرض يعرض صفحة الويب.
واصل كتابة التعليمات البرمجية لصفحتك وشاهد التغييرات في المستعرض أثناء الكتابة.

تعيين تفضيلات المعاينة في المستعرض

يمكنك التبديل بين المعاينة في الوقت الفعلي وفي المستعرض. قم بتعيين تفضيلات للمستعرض لكي يستخدمها عند معاينة موقع وتحديد المستعرض الأساسي الافتراضي والمستعرض الثانوي.

تستخدم تفضيلات المستعرض بغض النظر عما إذا كنت تعاين موقعك بشكل مباشر من خلال المعاينة في الوقت الفعلي، أو في حالة فتح الصفحة في المستعرض فحسب.

حدد File > Real-time Preview > Edit Browser List.

Default to Static Browser Preview

إذا قمت بإلغاء تحديد خيار Default to Static Browser Preview سيتم تعطيل المعاينة في الوقت الفعلي. يمكنك استخدام اختصارات لوحة المفاتيح للمستعرضات الأساسية والثانوية لفتح المعاينة في المستعرض. أو يمكنك استخدام قائمة File أو النقر فوق أيقونة معاينة الجهاز في شريط الحالة.
لإضافة مستعرض إلى القائمة، انقر فوق علامة الجمع (+)، وأكمل مربع الحوار Add Browser، ثم انقر فوق OK.
لحذف مستعرض من القائمة، حدد المستعرض، ثم انقر فوق زر علامة الطرح (-).
لتغيير إعداد المستعرض المحدد، انقر فوق الزر Edit، وقم بإجراء التغييرات في مربع الحوار Edit Browser، ثم انقر فوق OK.
حدد الخيار Primary Browser أو Secondary Browser لتحديد ما إذا كان المستعرض المحدد هو المستعرض الأساسي أو الثانوي.

يؤدي الضغط على المفتاح F12 (في نظام التشغيل Windows) أو Option+F12 (في نظام التشغيلMacintosh) إلى فتح المستعرض الأساسي، ويؤدي الضغط على المفتاح Control+F12 (في نظام التشغيل Windows) أو Command+F12 (في نظام التشغيل Macintosh) إلى فتح المستعرض الثانوي.
حدد Preview Using Temporary File لإنشاء نسخ مؤقت للمعاينة وتصحيح أخطاء الخادم. (قم بإلغاء تحديد هذا الخيار إذا كنت تريد تحديث المستند مباشرةً).

يتيح Default to static browser preview للمستخدمين اختيار وضع معاينة ملفاتهم في المستعرض. عند تحديد مربع الاختيار، يمكن للمستخدمين معاينة الملفات باستخدام "Open in browser" من القوائم واستخدام الاختصارات. عند عدم التحديد، سيتم استخدام Real Time Preview لمعاينة الملفات في المستعرضات. بشكل افتراضي، يتم إلغاء تحديد خانة الاختيار وسيتم استخدام المعاينة في الوقت الفعلي لمعاينة الملفات في المستعرض.

معاينة الصفحات في طريقة العرض Live

تختلف طريقة العرض Live عن طريقة عرض تصميم Dreamweaver التقليدية في أنها توفر عرضًا أكثر واقعية للشكل الذي ستظهر به صفحتك في المستعرض، حيث يكون قابل للتحرير أيضًا.

يمكنك التبديل إلى طريقة العرض Live في أي وقت تكون في طريقة العرض Design قيد التشغيل. ومع ذلك، لا يرتبط التبديل إلى طريقة العرض Live بالتبديل بين أي من طرق العرض التقليدية الأخرى في Dreamweaver (وهي Code/Split/Design). عند التبديل إلى طريقة العرض Live من طريقة العرض Design، فأنت بذلك تقوم بتبديل طريقة العرض Design بين قابلية التحرير و"العرض المباشر".

وعلى الرغم من أن طريقة العرض Design تظل جامدة بمجرد الدخول إلى طريقة العرض Live، إلا أن طريقة العرض Code تظل قابلة للتحرير، بحيث يمكنك تغيير التعليمة البرمجية، وحينها قم بتحديث طريقة العرض Live لمشاهدة تفعيل تغييراتك. عندما تكون في طريقة العرض Live، يكون أمامك خيار إضافية لمشاهدة التعليمة البرمجية الحية. تشبه طريقة العرض Live Code طريقة العرض Live في أنها تعرض إصدار التعليمة البرمجية التي ينفذها المستعرض من أجل عرض الصفحة. ومثل طريقة العرض Live، فإن طريقة العرض Live Code هي طريقة عرض غير قابلة للتحرير.

وهناك ميزة إضافية لطريقة العرض Live تتمثل في القدرة على تجميد JavaScript. على سبيل المثال، يمكنك التبديل بين طريقة العرض Live والتحويم فوق صفوف الجدول المستند إلى jQuery والتي تغيِّر اللون نتيجة لتفاعل المستخدم. عند تجميد JavaScript، تؤدي طريقة العرض Live إلى تجميد الصفحة في حالتها الحالية. يمكنك عندئذٍ تحرير CSS أو JavaScript وتحديث الصفحة لمشاهدة تفعيل التغييرات. يعتبر تجميد JavaScript في طريقة العرض Live أمرًا مفيدًا إذا كنت تريد مشاهدة الخصائص وتغييرها للحالات المختلفة للقوائم المنبثقة وغيرها من العناصر التفاعلية التي لا يمكنك مشاهدتها في طريقة العرض Design التقليدية.

لمعاينة الصفحات في طريقة العرض Live:

تأكد من أنك في طريقة العرض Design (View > Design) أو طريقتي العرض Code and Design (View > Code and Design).
انقر فوق زر Live View.
(اختياري) قم بإجراء التغييرات التي تريدها في طريقة العرض Code، أو في اللوحة CSS Styles، أو في ورقة أنماط CSS خارجية، أو في ملف آخر مرتبط.

وعلى الرغم من ذلك لا يمكنك التحرير في طريقة العرض Live، حيث تتغير خياراتك المتعلقة بإجراء عمليات التحرير في المناطق الأخرى (على سبيل المثال، في اللوحة CSS Styles أو في طريقة العرض Code) أثناء قيامك بالنقر في طريقة العرض Live.

يمكنك العمل الملفات المرتبطة (مثل أوراق أنماط CSS) أثناء الإبقاء على تركيز طريقة العرض Live عن طريق فتح الملف المرتبط من شريط أدوات Related Files الموجود في الجزء العلوي من المستند.
إذا قمت بإجراء تغييرات في طريقة العرض Code، أو في ملف مرتبط، فقم بتحديث طريقة العرض Live بالنقر فوق الزر Refresh في شريط أدوات Document أو بالضغط على المفتاح F5.
للرجوع إلى طريقة العرض Design القابلة للتحرير، انقر فوق زر Live View مرة أخرى.

معاينة التعليمات البرمجية مباشرة

تعتبر التعليمة البرمجية المعروضة في طريقة العرض Live Code مشابهة لما ستشاهده إذا قمت بعرض مصدر الصفحة من المستعرض. وعلى الرغم من أن مصادر الصفحات تلك ثابتة، والتي توفر لك مصدر الصفحة فقط من المستعرض، إلا طريقة العرض Live Code ديناميكية ويتم تحديثها أثناء تفاعلك مع الصفحة في طريقة العرض Live.

تأكد من أنك في طريقة العرض Live.
انقر فوق زر Live Code.

يعرض Dreamweaver التعليمة البرمجية الحية التي سيستخدمها المستعرض لتنفيذ الصفحة. يتم تمييز التعليمة البرمجية باللون الأصفر وتكون غير قابلة للتحرير.

عند تفاعلك مع العناصر التفاعلية على الصفحة، تعمل طريقة العرض Live Code على تمييز التغييرات الديناميكية في طريقة العرض.
لإيقاف تشغيل التمييز للتغيرات في طريقة العرض Live Code، اختر View > Live View Options > Highlight Changes in Live Code.
للرجوع إلى طريقة العرض Code القابلة للتحرير، انقر فوق زر Live Code مرة أخرى.

لتغيير تفضيلات Live Code، اختر Edit > Preferences (في نظام التشغيل Windows) أو Dreamweaver > Preferences (في نظام التشغيل Macintosh OS)، ثم حدد الفئة Code Coloring.

تجميد JavaScript

قم بأحد الإجراءات التالية:

اضغط F6
حدد Freeze JavaScript من القائمة المنبثقة لزر Live View.

يخبرك شريط المعلومات الموجود في الجزء العلوي من المستند بأن JavaScript مجمدة. لإغلاق شريط المعلومات، انقر فوق ارتباط الإغلاق.

خيارات طريقة العرض Live

إلى جانب خيار Freeze JavaScript، توجد بعض الخيارات الأخرى المتاحة من القائمة المنبثقة للزر Live View، أو من عنصر القائمة View > Live View Options menu item.

‎Freeze JavaScript لتجميد العناصر المتأثرة بـ JavaScript في حالتها الحالية.

Disable JavaScript لتعطيل JavaScript وإعادة عرض الصفحة كما ستظهر في حالة عدم تمكين JavaScript في المستعرض.

Disable Plug-ins لتعطيل المكونات الإضافية وإعادة عرض الصفحة كما ستظهر في حالة عدم تمكين المكونات الإضافية في المستعرض.

Highlight Changes in Live Code تشغيل تمييز التغييرات في Live Code وإيقاف تشغيله.

Edit the Live View Page in a New Tabيتيح لك إمكانية فتح علامات تبويب جديدة لمستندات الموقع الذي تستعرضه لاستخدام شريط أدوات Browser Navigation أو الميزة (Follow Link(s. يجب عليك الاستعراض وصولاً إلى المستند أولاً، ثم حدد Edit the Live View Page in a New Tab لإنشاء علامة تبويب جديدة له.

Follow Link تنشيط الارتباط التالي الذي تنقر فوقه في Live View. وبدلاً من ذلك، يمكنك النقر بالمفتاح Control فوق ارتباط في طريقة العرض Live لتنشيطه.

Follow Links Continuously تنشيط الارتباطات في Live View باستمرار إلى أن يتم تعطيلها مرة أخرى أو إغلاق الصفحة.

Automatically Sync Remote Files مزامنة الملف المحلي والبعيد تلقائيًا عند النقر فوق أيقونة Refresh في شريط أدوات Browser Navigation. يضع Dreamweaver ملفك على الخادم قبل التحديث، بحيث تتم مزامنة الملفين معًا في نفس الوقت.

Use Testing Server for Document Source يُستخدم بشكل أساسي بواسطة الصفحات الديناميكية (مثل صفحات ColdFusion)، ويتم تحديده بشكل افتراضي للصفحات الديناميكية. عند تحديد هذا الخيار، يستخدم Dreamweaver إصدار الملف الموجود على خادم اختبار الموقع باعتباره مصدر لعرض طريقة العرض Live.

Use Local Files for Document Links الإعداد الافتراضي للمواقع غير الديناميكية. عند تحديد هذا الخيار للمواقع الديناميكية التي تستخدم خادم اختبار، يستخدم Dreamweaver الإصدارات المحلية من الملفات المرتبطة بالمستند (على سبيل المثال، ملفات JavaScript وCSS) يمكنك بعد ذلك، إجراء تغييرات محلية على الملفات المرتبطة بحيث يمكنك مشاهدة الكيفية التي ستظهر بها قبل وضعها على خادم الاختبار. في حالة إلغاء تحديد هذا الخيار، يستخدم Dreamweaver إصدارات خادم الاختبار للملفات المرتبطة.

HTTP Request Settings يأخذك إلى مربع حوار الإعدادات المتقدمة حيث يمكنك إدخال قيم لعرض البيانات الحية. لمزيد من المعلومات، انقر فوق الزر Help في مربع الحوار.

الفتح في مستعرض‏‎‎‏‎‏‎

يمكنك فتح صفحة في مستعرض في أي وقت؛ ولست بحاجة إلى تحميلها إلى خادم ويب أولاً. عند معاينة صفحة، يجب أن تعمل كل الوظائف المرتبطة بالمستعرض، بما في ذلك سلوكيات JavaScript، والارتباطات المطلقة والمرتبطة بالمستندات، وعناصر التحكم في ActiveX® ومكونات المستعرض الإضافية، بشرط تثبيت المكونات الإضافية المطلوبة أو عناصر التحكم في ActiveX داخل مستعرضاتك.

قبل فتح مستند في المستعرض، احفظ المستند، وإلا لن يعرض المستعرض أحدث تغييراتك.

انقر بزر الماوس الأيمن فوق اسم الملف في شريط أدوات Document ثم انقر فوق Open in Browser.

ملاحظة:

إذا لم تكن هناك مستعرضات مسرودة، فحدد Edit > Preferences أو < Dreamweaver > Preferences (في نظام التشغيل Macintosh)، ثم حدد الفئة Preview In Browser الموجودة إلى اليسار لتحديد مستعرض. لمزيد من المعلومات، راجع تعيين تفضيلات المعاينة في المستعرض.
انقر فوق الارتباطات ومحتوى الاختبار في صفحتك.

ملاحظة:

لا يظهر المحتوى المرتبط باستخدام المسار النسبي لجذر الموقع عند معاينة المستندات في مستعرض محلي ما لم تقم بتحديد خادم اختبارات، أو تحديد الخيار Preview Using Temporary File في Edit > Preferences > Preview In Browser. وذلك نظرًا لأن المستعرضات لا تستطيع التعرف على جذور المواقع، في حين تستطيع الخوادم ذلك.

ملاحظة:

لمعاينة المحتوى المرتبط بمسارات قريبة من الجذر، ضع الملف على خادم بعيد، ثم حدد File > Preview In Browser لعرضه.
أغلق الصفحة في المستعرض عند إنهاء الاختبار.