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

التحرير في Live View

 

 

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

تستخدم 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 ثم أعد تشغيلها مرة أخرى.
  • إذا كنت لا ترى عمليات التحديد في الصفحة، فانقر فوق زر التحديث في Live View.

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

لا يمكن تحرير عنصر بحد رمادي في Live View
لا يمكن تحرير عنصر بحد رمادي في 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.

فاحص الخصائص السريع الذي يظهر مباشرة فوق عناصر الصفحة في Live view
فاحص الخصائص السريع الذي يظهر مباشرة فوق عناصر الصفحة في Live view

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

ملاحظة:

لا يتم عرض أيقونة Code navigator في Live Viewعند استخدام فاحص الخصائص السريع.

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

فاحص الخصائص السريع للصور في مستندات Bootstrap
فاحص الخصائص السريع للصور في مستندات 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 لـ 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 باستخدام .فاحص الخصائص السريع.

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

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

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

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

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

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

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

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

ملاحظة:

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

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

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

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

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

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

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

مدعوم

غير مدعوم

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

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

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

 

ملفات HTML المشتقة من القوالب الموجودة في Live View

تحرير صفحات jQuery

العلامات الهيكلية المحتوية على عناصر مضمنة. يتم عرضها معًا في مربع واحد لتحريرها.

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

نص ثابت في الصفحات الديناميكية

 

نص يحتوي على كيانات

 

تنسيق النص

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

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

إدراج العناصر مباشرةً في 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 View لمساعدتك في التعرّف على عناصر HTML وأنماط CSS المقترنة بها بشكل سريع. مع تشغيل الوضع Inspect، يمكنك تحريك الماوس فوق العناصر الموجودة بالصفحة لديك لمشاهدة سمات نموذج مربعات نص CSS لأي عنصر على مستوى المخطط.

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

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

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

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

    ملاحظة:

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

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

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

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

    ملاحظة:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ملاحظة:

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

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

‏‫إذا كنت تفضل عدم استخدام عرض العناصر وفاحص الخصائص السريع في 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.
  • شبكات CSS مدعومة في طريقة عرض Live فقط في إصدار 2019 والإصدارات الأحدث من Dreamweaver.

احصل على مساعدة بشكل أسرع وأسهل

مستخدم جديد؟