استخدام الأصول

تاريخ آخر تحديث 25 أبريل 2024

استخدم اللوحة Assets في Dreamweaver لإدارة الأصول في الموقع الحالي.

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

يمكنك الحصول على الأصول من مصادر متنوعة. على سبيل المثال، قد تقوم بإنشاء أصول في تطبيق مثل Adobe Photoshop، أو Adobe Animate، أو تتلقاها من زميل في العمل، أو تنسخها من قرص مضغوط للصور الفنية أو موقع للرسوميات.

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

استخدم اللوحة Assets ‏(Window > Assets) لإدارة الأصول في الموقع الحالي. تعرض اللوحة Assets الأصول الخاصة بالموقع المقترن بالمستند النشط في النافذة Document.

ملاحظة

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

اللوحة Assets في طريقة العرض Live
اللوحة Assets في طريقة العرض Live

‏‫اللوحة Assets في طريقتي العرض Design وCode

توفر لوحة الأصول طرقًا مختلفة لعرض الأصول:

القائمة Site

تُظهر جميع الأصول في موقعك، بما في ذلك الألوان وعناوين URL المستخدمة في أي مستند في موقعك.

القائمة Favorites

تعرض فقط الأصول التي قمت باختيارها بشكل صريح.

للتبديل بين هذين العرضين، حدد إما زر الموقع أو المفضلات فوق منطقة المعاينة.(هذان العرضان غير متوفران لفئتي القوالب والمكتبة.)

ملاحظة

تعمل معظم عمليات اللوحة Assets بالطريقة نفسها في كلتا القائمتين. بالرغم من ذلك، هناك بضع مهام لا يمكنك أداؤها سوى من القائمة Favorites.

في كلتا القائمتين، تندرج الأصول ضمن إحدى الفئات التالية:

Images

ملفات الصور بتنسيقات GIF أو JPEG أو PNG.

الألوان

الألوان المستخدمة في المستندات وأوراق الأنماط، بما في ذلك ألوان النص والخلفيات والروابط.

عناوين URL

الروابط الخارجية في مستندات موقعك الحالي، بما في ذلك روابط FTP وgopher وHTTP وHTTPS وJavaScript والبريد الإلكتروني (mailto) والملف المحلي (file://).

Media

ملفات الوسائط مثل ملفات Adobe Flash (SWF فقط) وملفات Adobe Shockwave وملفات QuickTime أو MPEG.

Scripts

ملفات JavaScript أو VBScript. لا تظهر البرامج النصية الموجودة في ملفات HTML (وليس في ملفات JavaScript أو VBScript المستقلة) في اللوحة Assets. هذه الفئة متوفرة فقط في عرض الكود والتصميم.

القوالب

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

Library items

عناصر التصميم التي تستخدمها في صفحات متعددة؛ عند تعديل عنصر مكتبة، يتم تحديث جميع الصفحات التي تحتوي على هذا العنصر.هذه الفئة متوفرة فقط في عرض الكود والتصميم.

ملاحظة

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

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

تشير أيقونة Creative Cloud في العمود Type إلى أن الأصول المقابلة يتم استيرادها من "مكتبات Creative Cloud". يمكنك النقر نقرًا مزدوجًا فوق أيقونة Creative Cloud لإعادة تشكيل الأصول المقابلة. لمزيد من المعلومات حول إعادة استخدام الأصول في Creative Cloud Libraries، راجع Creative Cloud Libraries في Dreamweaver.

عرض أصل في منطقة المعاينة

حدد الأصل في اللوحة Assets.

عرض الأصول الموجودة ضمن فئة

انقر على أيقونة فئة على الجانب الأيسر من لوحة الأصول.

فرز الأصول

انقر فوق عنوان عمود.

على سبيل المثال، لترتيب قائمة الصور حسب النوع (بحيث تكون جميع صور GIF معًا، وجميع صور JPEG معًا، وهكذا)، انقر على عنوان عمود النوع.

تغيير حجم عمود

اسحب الخط الفاصل بين عنواني العمودين.

تغيير حجم منطقة المعاينة

اسحب شريط التقسيم (بين منطقة المعاينة وقائمة الأصول) لأعلى أو لأسفل.

تحديث اللوحة Assets

قد يستغرق الأمر بضع ثوانٍ لإنشاء قائمة الموقع لأن Dreamweaver يجب أن يقرأ ذاكرة التخزين المؤقت للموقع أولاً.

لا تظهر تغييرات معينة في اللوحة Assets على الفور. على سبيل المثال، عند إضافة أصل أو إزالته من الموقع، لا تظهر التغييرات في اللوحة Assets إلى أن تقوم بتحديث القائمة Site من خلال النقر فوق الزر Refresh Site List. إذا أضفت أو أزلت أصلاً خارج Dreamweaver—باستخدام Windows Explorer أو Finder، على سبيل المثال—يجب إعادة بناء ذاكرة التخزين المؤقت للموقع لتحديث لوحة الأصول.

وفي حالة إزالة المثيل الوحيد للون أو عنوان URL معين في الموقع لديك، أو حفظ ملف جديد يحتوي على لون أو عنوان URL غير مستخدم بالفعل في الموقع، لا تظهر التغييرات في اللوحة Assets إلى أن تقوم بتحديث القائمة Site.

  • لتحديث قائمة الموقع يدويًا، انقر على زر تحديث قائمة الموقع .ينشئ Dreamweaver ذاكرة التخزين المؤقت للموقع أو يحدثها حسب الضرورة.
  • لتحديث قائمة الموقع وإعادة بناء ذاكرة التخزين المؤقت للموقع يدويًا، انقر بزر الماوس الأيمن (Windows) أو انقر مع الضغط على Command (Macintosh) في قائمة Assets، ثم حدد تحديث قائمة الموقع.

إضافة أصل إلى مستند

يمكنك إدراج معظم الأصول في مستند من خلال سحبها إلى طريقة العرض Live وطريقة العرض Code و طريقة العرض Design في النافذة Document أو من خلال استخدام الزر Insert الموجود في اللوحة. يمكنك سحب الأصول من عرض القائمة ومن جزء المعاينة في لوحة الأصول.

ملاحظة: السحب من جزء المعاينة مدعوم فقط على Mac.

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

 

في المستند، ضع نقطة الإدراج حيث تريد ظهور الأصل.

في لوحة الأصول، حدد من أزرار فئة الأصول على اليسار.
ملاحظة

حدد أي فئة فيما عدا Templates. يتم تطبيق القالب على المستند بأكمله؛ لا يمكن إدراجه في مستند.

حدد إما الموقع أو المفضلة في أعلى اللوحة، ثم حدد الأصل.

لا توجد قوائم موقع أو مفضلة لعناصر المكتبة؛ تجاوز هذه الخطوة إذا كنت تدرج عنصر مكتبة.

قم بأحد الإجراءات التالية:
  • اسحب الأصل من اللوحة إلى المستند. يمكنك السحب من عرض القائمة وكذلك من جزء المعاينة.

    ملاحظة: على Windows، لا يمكنك سحب العناصر من جزء المعاينة.

    يمكنك سحب برامج نصية إلى منطقة محتوى الرأس بالنافذة Document؛ فإذا لم تكن هذه المنطقة ظاهرة، فحدد View > Head Content.

  • حدد الأصل في اللوحة ثم انقر فوق Insert.

    إذا كان الأصل الذي تم إدراجه لونًا، يتم تطبيقه على النص الذي يظهر بعد نقطة الإدراج.

تطبيق الألوان على النص باستخدام لوحة الأصول

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

في عرض التصميم، قم بتنفيذ الخطوات التالية:

حدد النص الموجود في المستند.

في لوحة الأصول، حدد فئة الألوان.

حدد اللون المطلوب، وانقر على تطبيق.

في العرض المباشر، نفّذ الخطوات التالية:

في لوحة الأصول، حدد فئة الألوان.

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

  • انقر بزر الماوس الأيمن في اللوحة Assets‬، وانقر فوق Copy Color Value. يتم نسخ قيمة اللون إلى الحافظة الخاصة بك. يمكنك الآن لصق قيمة اللون (Ctrl+v، Cmd+v) في CSS Designer.
  • اسحب اللون من المعاينة وقم بتمرير الماوس على العناصر في طريقة العرض ‏Live.عندما تسقط اللون، يظهر مربع حوار قاعدة CSS الجديدة وعندما تنقر على موافق، يتم تطبيق اللون على العنصر المحدد.
  • انقر فوق Apply في لوحة Assets. يظهر مربع حوار قاعدة CSS الجديدة وعندما تنقر على موافق، يتم تطبيق اللون على العنصر المحدد.

عيّن عناوين URL للصور أو النص

في عرض التصميم، نفّذ الخطوات التالية:

حدد النص أو الصورة.

في لوحة الأصول، حدد فئة عناوين URL في عرض المواقع أو المفضلة، اعتماداً على مكان تخزين عنوان URL.

ملاحظة

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

حدد عنوان URL.
قم بأحد الإجراءات التالية:
  • اسحب عنوان URL من اللوحة إلى التحديد في عرض التصميم.

  • حدد عنوان URL، ثم انقر فوق Insert.

في العرض المباشر، قم بتنفيذ الخطوات التالية:

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

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

  • اسحب عنوان URL من المعاينة أو طريقة عرض القائمة. قم بتمرير الماوس على العناصر في طريقة العرض ‏Live. عندما تضع عنوان URL، تلتف علامة <a> حول العنصر المُميز في العرض المباشر.
  • انقر فوق العنصر المطلوب في طريقة العرض ‏Live. اختر عنوان URL في لوحة Assets، وانقر فوق Apply. العنصر المحدد ملتف بعلامة <a>.

تحديد أصول وتحريرها

تتيح لك لوحة الأصول تحديد عدة أصول في آنٍ واحد. كما أنها توفر أيضًا طريقة سريعة لبدء عملية تحرير الأصول.

تحديد أصول متعددة

في اللوحة Assets، حدد أحد الأصول.
حدد الأصول الأخرى باستخدام إحدى الطرق التالية:
  • انقر مع الضغط على Shift لتحديد سلسلة متتالية من الأصول.

  • انقر مع الضغط على Control (Windows) أو Command (Macintosh) لإضافة أصل فردي إلى التحديد (سواء كان متجاورًا مع التحديد الحالي أم لا). انقر مع الضغط على Control أو Command على أصل محدد لإلغاء تحديده.

تحرير أصل

عندما تقوم بتحرير أصل في لوحة الأصول، يختلف السلوك حسب نوع الأصل. لبعض الأصول، مثل الصور، تستخدم محررًا خارجيًا، والذي يفتح تلقائيًا إذا كنت قد عرّفت محررًا لهذا النوع من الأصول.يمكنك تحرير الألوان وعناوين URL في قائمة المفضلة فقط. عندما تحرر القوالب و عناصر المكتبة، تقوم بإجراء التغييرات داخل Dreamweaver.

في لوحة الأصول، نفذ أحد الإجراءات التالية:
  • انقر نقرًا مزدوجًا فوق الأصل.

  • حدد الأصل، ثم انقر على زر التحرير.

ملاحظة

في حالة وجود ضرورة لتحرير الأصل في محرر خارجي لا يتم فتحه تلقائيًا، حدد Edit > Preferences (في نظام التشغيل Windows) أو Dreamweaver > Preferences (في نظام التشغيل Macintosh)، ثم حدد الفئة File Types/Editors، وتأكد من أنك قد قمت بتحديد محرر خارجي لهذا النوع من الأصول.

قم بإجراء التغييرات التي تريدها.
عند الانتهاء، قم بأحد الإجراءات التالية:
  • إذا كان الأصل مستند إلى ملف (أي فئة بخلاف اللون أو عنوان URL)، قم بحفظه (في المحرر الذي قمت باستخدامه)، ثم أغلقه.

  • إذا كان الأصل عنوان URL، انقر فوق OK في مربع الحوار Edit URL.

ملاحظة

إذا كان الأصل لونًا، يتم إغلاق Color Picker تلقائيًا بعد انتقاء لون. لاستبعاد Color Picker دون انتقاء لون، اضغط على المفتاح Esc.

إعادة استخدام الأصول في موقع آخر

تُظهر لوحة الأصول جميع الأصول (من الأنواع المعروفة) في موقعك الحالي. لاستخدام أصل من الموقع الحالي في موقع آخر، يجب عليك نسخه إلى الموقع الآخر. يمكنك نسخ أصل فردي، أو مجموعة من الأصول الفردية، أو مجلد مفضلة كامل في آنٍ واحد.

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

ملاحظة

قد تُظهر لوحة الملفات موقعًا مختلفًا عن الموقع الذي تُظهره لوحة الأصول. هذا لأن لوحة الأصول مرتبطة بالمستند النشط.

حدد موقع ملف أصل في لوحة الملفات

في لوحة الأصول، حدد فئة الأصل الذي تريد العثور عليه.
انقر بالزر الأيمن (Windows) أو انقر مع الضغط على Control (Macintosh) على اسم الأصل أو أيقونته في لوحة الأصول، ثم حدد Locate In Site من القائمة السياقية.
ملاحظة

الأمر "تحديد الموقع في الموقع" غير متاح للألوان وعناوين URL التي لا تتطابق مع ملفات في الموقع.

تفتح لوحة الملفات مع تحديد ملف الأصل.يحدد الأمر "تحديد الموقع في الموقع" موقع الملف المطابق للأصل نفسه؛ ولا يحدد موقع الملفات التي تستخدم ذلك الأصل.

نسخ الأصول من لوحة الأصول إلى موقع آخر

في لوحة الأصول، حدد فئة الأصل الذي تريد نسخه.
انقر بزر الماوس الأيمن (Windows) أو انقر مع الضغط على Control (Macintosh) على أصل واحد أو أكثر في قائمة الموقع أو قائمة المفضلة، حدد "نسخ إلى موقع"، ثم حدد اسم الموقع الهدف من القائمة الفرعية التي تسرد جميع المواقع التي قمت بتعريفها.
ملاحظة

في قائمة المفضلة، يمكنك نسخ مجلد المفضلة وكذلك الأصول الفردية.

يتم نسخ الأصول إلى مواقعها المطابقة في الموقع الهدف.ينشئ Dreamweaver مجلدات جديدة في التسلسل الهرمي للموقع الهدف حسب الحاجة.تتم أيضاً إضافة الأصول إلى قائمة المفضلة لدى الموقع الهدف.

ملاحظة

إذا كان الأصل الذي نسخته عبارة عن لون أو عنوان URL، فسيظهر فقط في قائمة المفضلة للموقع الهدف.نظراً لأن الألوان وعناوين URL لا تتطابق مع ملفات، فلا يوجد ملف لنسخه إلى الموقع الآخر.