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

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

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

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

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

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

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

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

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

ملاحظة:

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

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

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

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

    وإذا كنت تريد معاينة صفحات الويب على جهاز، فراجع معاينة صفحات ويب Dreamweaver على العديد من الأجهزة.

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

    ملاحظة:

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

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

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

    تمكين الدفع التلقائي إلى خادم الاختبار
    تمكين الدفع التلقائي إلى خادم الاختبار

  3. احفظ صفحة الويب والمستندات المرتبطة بها إذا طلب منك ذلك.

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

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

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

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

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

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

  2. لإضافة مستعرض إلى القائمة، انقر فوق علامة الجمع (+)، وأكمل مربع الحوار Add Browser، ثم انقر فوق OK.
  3. لحذف مستعرض من القائمة، حدد المستعرض، ثم انقر فوق زر علامة الطرح (-).
  4. لتغيير إعداد المستعرض المحدد، انقر فوق الزر Edit، وقم بإجراء التغييرات في مربع الحوار Edit Browser، ثم انقر فوق OK.
  5. حدد الخيار Primary Browser أو Secondary Browser لتحديد ما إذا كان المستعرض المحدد هو المستعرض الأساسي أو الثانوي.

    يؤدي الضغط على المفتاح F12 (في نظام التشغيل Windows) أو Option+F12 (في نظام التشغيلMacintosh) إلى فتح المستعرض الأساسي، ويؤدي الضغط على المفتاح Control+F12 (في نظام التشغيل Windows) أو Command+F12 (في نظام التشغيل Macintosh) إلى فتح المستعرض الثانوي.

  6. حدد Preview Using Temporary File لإنشاء نسخ مؤقت للمعاينة وتصحيح أخطاء الخادم. (قم بإلغاء تحديد هذا الخيار إذا كنت تريد تحديث المستند مباشرةً).

معاينة الصفحات في طريقة العرض 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:

  1. تأكد من أنك في طريقة العرض Design (View > Design) أو طريقتي العرض Code and Design (View > Code and Design).

  2. انقر فوق زر Live View.

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

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

    ملاحظة:

    يمكنك العمل الملفات المرتبطة (مثل أوراق أنماط CSS) أثناء الإبقاء على تركيز طريقة Live View عن طريق فتح الملف المرتبط من شريط أدوات Related Files الموجود في الجزء العلوي من المستند.

  4. إذا قمت بإجراء تغييرات في طريقة العرض Code، أو في ملف مرتبط، فقم بتحديث طريقة Live View بالنقر فوق الزر Refresh في شريط أدوات Document أو بالضغط على المفتاح F5.

  5. للرجوع إلى طريقة العرض Design القابلة للتحرير، انقر فوق زر Live View مرة أخرى.

Preview Live Code

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

  1. تأكد من أنك في طريقة Live View.

  2. انقر فوق زر Live Code.

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

    عند تفاعلك مع العناصر التفاعلية على الصفحة، تعمل طريقة Live View Code على تمييز التغييرات الديناميكية في طريقة العرض.

  3. لإيقاف تشغيل التمييز للتغيرات في طريقة Live View Code، اختر View > Live View Options > Highlight Changes in Live Code.

  4. للرجوع إلى طريقة العرض 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 داخل مستعرضاتك.

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

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

    ملاحظة:

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

  2. انقر فوق الارتباطات ومحتوى الاختبار في صفحتك.

    ملاحظة:

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

    ملاحظة:

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

  3. أغلق الصفحة في المستعرض عند إنهاء الاختبار.

تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

إشعارات قانونية   |   سياسة الخصوصية على الإنترنت