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

تستخدم طريقة العرض Live محرك إنتاج يستند إلى عرض الكروم بحيث يبدو المحتوى الموجود في Dreamweaver مطابقًا لما يبدو عليه في مستعرضات الويب المفضلة لديك. أثناء التطوير، يمكنك التبديل إلى Live View لمعاينة الصفحة بسرعة. ولتوفير وقت التبديل بين طرق العرض المختلفة (طريقة عرض الرموز والتصميم)؛ يمكنك تحرير عناصر HTML مباشرةً في Live View.

يتم تحديث Live View باستمرار لعرض التغييرات على الصفحة.

يمكنك استخدام المكونات التالية لتحرير صفحتك في طريقة العرض Live:

  • لوحة DOM: يعرض (Windows > DOM) بنية HTML للمستند الخاص بك ويتيح لك نسخ العناصر ولصقها، وتكرارها، وحذفها، وإعادة ترتيبها في طريقة العرض. راجع لوحة DOM لمزيد من المعلومات.
  • Element Display يظهر فوق عنصر HTML المحدد في Live View. يتيح لك Element Display إقران عناصر HTML بالفئات والمعرفات. راجع إقران عناصر HTML بالفئات والمعرفات لمزيد من المعلومات.
  • يظهر Quick Property Inspector عند النقر فوق أيقونة الشطيرة في Element Display أو تحديد نص. يتيح لك Quick Property Inspector تحرير سمات الصور وتنسيق النص في Live View. راجع Quick Property Inspector لمزيد من المعلومات.
  • Live View Property Inspector: يظهر أسفل النافذة المستند ويتيح لك تحرير خصائص متنوعة لـ HTML وCSS في Live View. راجع Live View Property Inspector‬‏‫ لمزيد من المعلومات.
  • Insert panel‎(Window > ‎Insert) :‎‎‎ تتيح لك سحب العناصر من اللوحة مباشرةً إلى Live View. راجع إدراج العناصر مباشرةً في Live View لمزيد من المعلومات.

ملاحظة:

إذا تغيرت صفحتك على نحو مأساوي (بسبب البرامج النصية) أو تم بها تمكين التحديث الأولي، فقد يتم فقدان أي تحرير قمت به في Live View.

تلميحات:

  • إذا أصبحت Live View فارغة، عند تحرير الصفحة، فأوقف Live View ثم أعد تشغيلها مرة أخرى.
  • إذا كنت لا ترى عمليات التحديد في الصفحة، فانقر فوق زر التحديث في Live View.

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

لا يمكن تحرير عنصر بحد رمادي في Live View
لا يمكن تحرير عنصر بحد رمادي في Live View

ملاحظة:

في Live View، لا تتوفر إلا الخيارات القابلة للتطبيق للعنصر المحدد في القائمة الرئيسية. تأخذ الخيارات غير القابلة للتطبيق لونًا رماديًا عند تحديد العنصر.

Element Display

باستخدام Element Display، يمكنك إقران عناصر HTML مع الفئات والمعرفات مباشرة في Live View.‬ ينبهك Element Display بالفئات والمعرفات المتاحة لمساعدتك في عرض الخيار المطلوب واختياره بسرعة. 

يمكنك أيضا تنسيق الجداول باستخدام Element Display. لمزيد من المعلومات، راجع الارتباط.

إقران عناصر HTML بالفئات والمعرفات

انقر فوق العنصر المطلوب في Live View. يظهرElement Display ويعرض الفئة والمعرف المقترنين حاليًا.

أثناء التواجد في Live View، يمكنك أيضًا النقر فوق عنصر HTML في لوحة DOM لرؤية Element Display للعنصر.

Element Display للعنصر
Element Display للعنصر

  • لفصل عنصر HTML عن فئة أو معرف، انقر فوق "x" القريبة من الفئة أو المعرف.
  • لتغيير الفئة أو المعرف المقترن بعنصر HTML، انقر في المربع. تظهر قائمة بالفئات والمعرفات المتاحة. انقر فوق الخيار المطلوب.
  • لإضافة فئة أو معرف وتطبيقه على العنصر، انقر فوق "+"، واكتب الاسم. لحفظ التغييرات، انقر على '+' أو اضغط على Enter.

يمكنك بعد ذلك استخدام CSS Designer لتعريف محدد يتضمن هذه الفئة أو المعرف. لمزيد من المعلومات، راجع تخطيط الصفحات باستخدام CSS Designer.

ملاحظة:

لا يتحرك Element Display الخاص بالعناصر الانتقالية مع العناصر عند بدء النقل. ومع ذلك، يتم تفعيل التغييرات التي تجريها باستخدام Element Display حتى إذا لم تكون بنفس موقع عنصر النقل. 

Quick Property Inspector‬‏‫

Quick Property Inspector‬‏‫ للصور

يظهر Quick Property Inspector‬‏‫ مباشرة فوق العناصر المحددة في Live View. باستخدام Property Inspector هذا، يمكنك تحرير السمات، أو تنسيق النصوص في Live View.

Quick Property Inspector‬‏‫ الذي يظهر مباشرة فوق عناصر الصفحة في Live view
Quick Property Inspector‬‏‫ الذي يظهر مباشرة فوق عناصر الصفحة في Live view

لعرض أو إخفاء Quick Property Inspector‬‏‫، اضغط على ‎.Ctrl+Alt+H (Win)/CMD+Ctrl+H (Mac‎)‎

ملاحظة:

لا يتم عرض أيقونة Code navigator في Live Viewعند استخدام Quick Property Inspector‬‏‫.

في مستندات Bootstrap، يتضمن Quick Property Inspector أيضًا خيارات لتخصيص الصور.

Quick Property Inspector‬‏‫ للصور في مستندات Bootstrap
Quick Property Inspector‬‏‫ للصور في مستندات Bootstrap

  • قص للتشكيل: انقر لقص زوايا الصور إلى زوايا دائرية أو مستديرة أو كصورة مصغرة.
  • جعل الصورة تستجيب: انقر لجعل الصور تستجيب وتتأقلم مع مختلف أحجام الشاشة.

Quick Property Inspector‬‏‫ للنص

يتيح لك Quick Property Inspector للنص في Live View التنسيق السريع والاستخدام والنص التشعبي. يظهر Quick Property Inspector‬‏‫ عندما تقوم بالنقر فوق أيقونة الشطيرة لعناصر النص: h1-h6 وpre وp.

Quick Property Inspector‬‏‫ للنص
Quick Property Inspector‬‏‫ للنص

  • يتيح لك خيار التنسيق تغيير علامة العنصر سريعًا إلى إحدى هذه العلامات: h1-h6 وp وpre. 
  • يتيح لك خيار الارتباط تحديد ارتباط تشعبي لعنصر النص. 
  • تتيح لك رموز Bold وItalic إضافة <strong> و<em> إلى عنصر النص.
  • تساعدك أيقونة المسافة البادئة في إضافة المسافة البادئة للنص أو إزالتها. تتم إضافة علامة <blockquote> أو إزالتها من التعليمة البرمجية وفقًا لذلك.

في مستندات Bootstrap، يتيح لك Quick Property Inspector الخاص بالنص أيضًا محاذاة عناصر النص ونقلها.

  • محاذاة: محاذاة عناصر نص Bootstrap إلى اليسار أو الوسط أو اليمين أو الضبط عن طريق تطبيق الفئات المتطابقة.
  • النقل: تغيير حالة النص الخاصة بعنصر عن طريق تطبيق فئات أحرف صغيرة أو أحرف كبيرة أو التحسس لحالة الأحرف.

Live View Property Inspector

Live View Property Inspector هو Property Inspector‎ التقليدي المتاح أسفل النافذة Document.

يتيح لك Property Inspector الخاص بـ Live View الخصائص الشائعة لعنصر الصفحة المحدد حاليًا، مثل النصوص أو الكائنات المدرجة. تختلف محتويات Property Inspector‎ الخاص بـ Live View تبعًا للعنصر المحدد.

ملاحظة:

لا يتوفر Property Inspector لـ Live View‬‏‫ في صفحات الشبكة المرنة.

للوصول إلى التعليمات لـ Property Inspector معين، انقر فوق الزر Help الموجود في الركن العلوي الأيمن من Property Inspector. أو اختر Help من قائمة Options‎ في Property Inspector.

فيما يلي العناصر التي يمكنك تحريرها باستخدام Live ViewProperty Inspector:

  • HTML
  • CSS
  • Image
  • Table
  • الوسائط - فقط صوت HTML5 وفيديو HTML5
  • Anchor
  • Form
  • FormButton
  • FormTextArea
  • FormSubmitButton
  • FormRange
  • FormRadioButton
  • FormList
  • FormImage
  • FormFile
  • FormCheckBox
  • FormColor
  • FormDate
  • FormDateTime
  • FormDateTimeLocal
  • FormMonth
  • FormTime
  • FormWeek
  • FormNumber
  • FormLabel
  • FormHidden
  • FormGeneric

ملاحظة:

لا يتوفر jQuery UI والخصائص المستندة إلى القالب للتحرير في Live View Property Inspector.

تحرير سمات HTML

يمكنك سريعًا إضافة سمات HTML الخاصة بالصور أو تحريرها أو إزالتها مباشرةً في Live View باستخدام .Quick Property Inspector.

يظهر Quick Property Inspector للصور عند النقر فوق أيقونة الشطيرة . حسب المساحة المتاحة، يظهر Property Inspector على يمين الصورة أو يسارها أو أعلاها أو أسفلها أو فوقها. يمكنك تحريك Property Inspectorووضعه في أي موضع ملائم. 

Quick Property Inspector لتحرير السمات
Quick Property Inspector لتحرير السمات

لتحرير السمات، انقر فوق أيقونة الشطيرة في Quick Property Inspector. يمكنك تغيير مصدر الصورة مع سمات أخرى مثل "العنوان” و"alt” ويتم تطبيق هذه التغييرات على الفور. وبالمثل، يمكنك أيضًا ضبط عرضوارتفاع الصورة في Live View.

يتم حفظ التغييرات التي تقوم بإجرائها عند القيام بأي مما يلي:

  • انقر في أي مكان خارج Property Inspector
  • اضغط Enter
  • اضغط Tab لتحرير سمة أخرى في Property Inspector
  • احفظ الملف

عند تحميل الصور ديناميكيًا، يمكنك استخدام Quick Property Inspector الخاص بالصورة لفحص السمات التي تم تعيينها للصورة سريعًا.

تحرير النص مباشرةً في Live View

يمكنك الآن تحرير عناصر النص مباشرةً في Live View. يمكنك ببساطة النقر نقرًا مزدوجًا فوق عنصر النص لتحريره. أو، يمكنك النقر فوق عنصر النص لرؤية Element Display ثم النقر فوق Enter.

ملاحظة:

عند الضغط على Enter بعد الدخول إلى وضع التحرير، تختلف النتائج وفقًا لمكان نقطة الإدراج قبل الضغط على Enter. تتشابه التغييرات مع ما يحدث عند الضغط على Enter أثناء تحرير النص في Design View.

تشير الحدود البرتقالية حول عنصر النص إلى أن الوضع قد تغير إلى وضع تحرير. 

حد برتقالي يوضح وضع التحرير
حد برتقالي يوضح وضع التحرير

تتمركز نقطة الإدراج هذه في موضع النقر المزدوج. لتحديد كل النص الموجود في عنصر النص، انقر نقرًا ثلاثيًا فوق عنصر النص.

يتم دعم القص والنسخ واللصق والتراجع والإعادة أثناء تحرير النص في Live View. عند لصق نص، يتم لصقه كنص عادي.

يسرد الجدول التالي السيناريوهات المدعومة وغير المدعومة أثناء تحرير النص في Live View:

مدعوم غير مدعوم
جميع عناصر HTML التي يمكن أن تحتوي على نص

تحرير العلامات غير الصالحة أو المقطوعة. إذا كان HTML يحتوي على علامات غير صالحة أو مقطوعة، سيكون تحرير هذه العلامات محكومًا بالطريقة التي تفهم بها المستعرضات هذه العلامات:

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

 

ملفات HTML المشتقة من القوالب الموجودة في Live View
تحرير صفحات jQuery
العلامات الهيكلية المحتوية على عناصر مضمنة. يتم عرضها معًا في مربع واحد لتحريرها.
تحرير العلامات التي لها محتوى ثابت وديناميكي على حد سواء. على الرغم من أنه بإمكانك تحرير محددات تلك العلامات، إلا أنه لا يمكنك تحرير النص مباشرة في Live View. في حالة النقر المزدوج فوق تلك العناصر الموجودة في Live View، يظهر حد رمادي حولها، مما يشير إلى أن تحرير ذلك النص ليس مدعمًا.
نص ثابت في الصفحات الديناميكية
 
صفحات Fluid Grid في Live View بدون شبكات
 
نص يحتوي على كيانات  

تنسيق النص

يمكنك الآن تغيير تنسيق النص العادي والنص التشعبي مباشرة في Live View. للاطلاع على خيارات تنسيق النص، حدد كلمة أو عبارة. يظهرQuick Property Inspector مع خيارات التنسيق فوق النص المحدد مباشرةً.

Quick Property Inspector لتنسيق النص
Quick Property Inspector لتنسيق النص

إدراج العناصر مباشرةً في Live View.

باستخدام اللوحة Insert يمكنك سحب العناصر مباشرةً إلى الموضع المطلوب في المستند في Live View. تساعدك المساعدات المرئية في Live View مثل أدلة Live ورموز DOM على‬‏ وضع العناصر المسحوبة في موقع مناسب بالنسبة إلى العنصر الذي تم تحريك الماوس فوقه.

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

  • Above and Below - تظهر عند تحريك الماوس فوق كل أنواع العناصر/العلامات، فيما عدا العلامات المضمنة. عند تحريك الماوس في أول (أعلى) 50٪ من العنصر، فإن الأدلة تظهر فوق العنصر الذي تم تحريك الماوس فوقه. عند تحريك الماوس في آخر (أسفل) 50٪ من العنصر، فإن الأدلة تظهر أسفل العنصر الذي تم تحريك الماوس فوقه.
الأدلة Live في الأعلى والأسفل
الأدلة Live في أعلى وأسفل‬ العناصر التي تم التحريك فوقها

  • Left and Right - تظهر عند تحريك الماوس فوق العلامات المضمنة، على سبيل المثال، <a>، <span>، أو فوق العلامات التي لها مجموعة "خاصية التعويم".
الأدلة Live على يمين ويسار العناصر التي يتم تحريك الماوس فوقها
الأدلة Live على يمين ويسار العناصر التي يتم تحريك الماوس فوقها

عند التوقف لفترة من الوقت قبل إسقاط العنصر، يظهر رمز DOM (</>). عند تحريك الماوس فوق هذه الأيقونة، يتم فتح لوحة DOM، ويمكنك إسقاط العنصر داخل بنية DOM للمستند.

لإدراج العناصر مباشرة في Live View، قم بإجراء الخطوات التالية:

  1. التبديل إلى Live View.

  2. من اللوحة Insert ، انقر فوق العنصر المطلوب واسحبه إلى المستند. أو بدلاً من ذلك، يمكنك النقر فوق العنصر المطلوب في اللوحة Insert.

    تلميح: إذا لم تتمكن من سحب عنصر من اللوحة Insert إلى الصفحة، فأعد تشغيل جهاز الكمبيوتر وحاول مرة أخرى.

  3. أسقط العنصر أعلى أو أسفل أو على يمين أو على يسار العنصر بناءً على أدلة Live. أو، أسقط العنصر في مكان دقيق من بنية المستند بالنقر فوق </> واستخدام لوحة DOM.

    يتم إدراج العنصر في الصفحة ويتم تمييزه.

التحديد المتعدد

يتيح لك التحديد المتعدد تحديد كتلة نصية بسهولة بالنقر والسحب داخل العلامة في Live View. عند النقر على كتلة نصية وسحبها في إصدارات Dreamweaver قبل 2014.1، كان العنصر يتحرك بالكامل. 

ملاحظة:

يقتصر التحديد المتعدد في Live View على العمليات التي يدعمها المستعرض. 

تحديد العناصر وسحبها وإسقاطها

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

من خلال النقر على اسم العلامة في Live View، يمكنك تحديد المحتويات الكاملة لتلك العلامة في طريقة العرض Code.

انقر فوق اسم العلامة في Live View لتحديد المحتويات الكاملة لتلك العلامة في طريقة العرض Code.
انقر فوق اسم العلامة في Live View لتحديد المحتويات الكاملة لتلك العلامة في طريقة العرض Code.

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

يعمل الوضع Inspect مع طريقة العرض Live لمساعدتك في التعرّف على عناصر HTML وأنماط CSS المقترنة بها بشكل سريع. مع تشغيل الوضع Inspect، يمكنك تحريك الماوس فوق العناصر الموجودة بالصفحة لديك لمشاهدة سمات نموذج مربعات نص CSS لأي عنصر على مستوى المخطط.

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

عند فتح CSS Designer في الوضع Current وتحريك الماوس فوق عنصر بالصفحة، يتم تحديث القواعد والخصائص في CSS Designer تلقائيًا لعرض القواعد والخصائص الخاصة بهذا العنصر.

علاوة على ذلك، يتم أيضًا تحديث أي طريقة عرض أو لوحة متعلقة بالعنصر الذي تقوم بتحريك الماوس فوقه (على سبيل المثال، طريقة العرض Code، ومحدد Tag، وعارض الخصائص، وما إلى ذلك).

  1. ومع فتح المستند في نافذة المستند، انقر فوق View > Inspect.

    ملاحظة:

    إذا لم تكن داخل طريقة العرض Live بالفعل، يقوم الوضع Inspect بتمكينها تلقائيًا.

  2. حرّك الماوس فوق العناصر الموجودة بالصفحة لمشاهدة نموذج مربعات نص CSS. يقوم الوضع Inspect بتمييز ألوان مختلفة للحد، والهامش، والمساحة المتروكة، والمحتوى.

  3. (اختياري) اضغط على سهم لليسار الموجود بلوحة مفاتيح الكمبيوتر لديك لتمييز العنصر الأصل للعنصر المميز حاليًا. اضغط على سهم لليمين للرجوع لتمييز العنصر التابع.

  4. (اختياري) انقر فوق أحد العناصر لقفل تحديد تمييز.

    ملاحظة:

    يؤدي النقر فوق أحد العناصر لقفل تحديد تمييز إلى إيقاف تشغيل الوضع Inspect.

التنقل باستخدام لوحة المفاتيح في Live View

يمكنك نقل عناصر الصفحة أو المحددات في Element Display باستخدام لوحة المفاتيح الخاصة بك للإسراع بعملية التحرير. 

التنقل عبر عناصر الصفحة

يساعدك مفتاحا السهم لأعلى والسهم لأسفل على التنقل عبر عناصر الصفحة في Live View. يستند هذا التنقل إلى بنية DOM للمستند.

يوفّر تنقل لوحة المفاتيح في Live View إمكانية الوصول بسهولة إلى العناصر المتداخلة والملتفة.

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

الصورة في التركيز أولاً
هنا تكون الصورة في التركيز أولاً. عند الضغط على مفتاح السهم للأسفل، يتم تحديد الفقرة أسفل الصورة كما هو موضح في الصورة التالية.

يتم تحديد النص ذي التنسيق الغامق
يتم تحديد النص ذي التنسيق الغامق.

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


التنقل عبر المحددات

اضغط على المفتاح Tab للتنقل عبر المحددات في Element Display. يتم عرض المحدد الواقع في التركيز بحد كهرماني اللون كما هو مبين أدناه: 

يتم تمييز المحدد في التركيز
يتم تمييز المحدد الواقع في التركيز بحد كهرماني اللون.

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

ملاحظة:

يمكنك استخدام Ctrl+[ أو Cmd+[ لتحديد العنصر الأصل وCtrl+] أو Cmd+] لتحديد العنصر التابع.

تعطيل التحرير في Live View

‏‫إذا كنت تفضل عدم استخدام Element Display وQuick Property Inspector في Live View، يمكنك تعطيل ميزات التحرير تلك.

اختصارات لوحة المفاتيح:

  • (نظام التشغيل Windows) Ctrl+Alt+H
  • (نظام التشغيل Mac) Cmd+Ctrl+H

  1. قم بالتبديل إلى Live View وانقر فوق View > Live View Options.

  2. حدد Hide Live View Displays.

السيناريوهات غير المدعمة

  • لا يمكن تحرير ملفات قوالب Dreaweaver في Live View.
  • العلامات التي لها محتوى ثابت وديناميكي على حد سواء. على الرغم من أنه بإمكانك تحرير محددات تلك العلامات، إلا أنه لا يمكنك تحرير النص في Live View. في حالة النقر المزدوج فوق تلك العناصر الموجودة في Live View، يظهر حد رمادي حولها، مما يشير إلى أن تحرير ذلك النص ليس مدعمًا.
  • العلامات التي لها محددات زائفة مطبقة عليها. قد تحصل على نتائج غير متوقعة عند محاولة تحرير تلك العناصر في Live View.

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

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