التحرير في Live View

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

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

يمكنك استخدام المكونات التالية لتحرير صفحتك في Live View:

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

تلميحات:

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

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

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

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

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

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

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

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

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

فاحص الخصائص السريع

فاحص الخصائص السريع للصور

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

لعرض أو إخفاء فاحص الخصائص السريع، اضغط على ‎.Ctrl+Alt+H (Win)/CMD+Ctrl+H (Mac‎)‎

في مستندات Bootstrap، يتضمن فاحص الخصائص السريع أيضًا خيارات لتخصيص الصور.

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

فاحص الخصائص السريع للنص

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

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

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

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

Live View Property Inspector

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

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

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

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

تحرير سمات HTML

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

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

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

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

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

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

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

يمكنك الآن تحرير عناصر النص مباشرةً في Live View. يمكنك ببساطة النقر فوق عنصر النص لتحريره. إذا كنت في وضع عرض العناصر فاضغط Enter لتحرير النص.

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

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

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

تتيح ميزة المزامنة التلقائية مزامنة أي تعديلات يتم إجراؤها في طريقة العرض المباشرة تلقائيًا مع عرض التعليمات البرمجية. 

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

تنسيق النص

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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