تتضمن آخر تحديثات لإصدار 2014 من Dreamweaver CC التكامل مع Extract وهذا يساعدك في إنشاء مواقع للكمبيوتر المكتبي والهاتف المحمول من تركيبة PSD مباشرة في Dreamweaver. تسهّل Live Guides الجديدة وضع عناصر HTML وإعادة ترتيبها بدقة ويتيح التحرير المحسّن في طريقة العرض ‏Live إجراء تغييرات في الوقت الفعلي.

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

Adobe Dreamweaver CC 2014.1.1 (فبراير 2015)

شاشة ترحيب جديدة

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

يوفر آخر تحديث لإصدار Dreamweaver CC 2014 من Dreamweaver وصولاً سريعًا إلى ملفات الفيديو (بما في ذلك الميزات الجديدة)، والتدريبات العملية والتلميحات والأساليب والمزيد من شاشة الترحيب.

شاشة الترحيب
شاشة الترحيب

ملاحظة:

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

تحسينات على لوحة Extract

يظهر رمز Live Guides وElement Quick View في طريقة العرض Live عند سحب الصور من لوحة Extract. تساعدك هذه المساعدات البصرية على وضع الصورة سريعًا وبدقة في الموضع المطلوب.

لوحة Extract
لوحة Extract

تحسينات على التحرير في طريقة العرض Live

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

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

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

يمكنك الآن تحديد نص أو صور أو عناصر أخرى في علامة عن طريق النقر والسحب في أي مكان داخل العلامة (التحديد المتعدد). يساعد التحديد المتعدد على تحديد كائنات متعددة بسهولة ضمن علامة.

ملاحظة:

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

تحسينات عرض العناصر

يُظهر عرض العناصر الآن نص التلميح "فئة/معرف" للإشارة بوضوح إلى أنه يمكن تحديد فئة أو معرف.

بالإضافة إلى ذلك، يتم حفظ التغييرات التي يتم إجراؤها في عرض العنصر عند النقر على '+'. يمكنك أيضًا الضغط على Enter أو Return لحفظ التغييرات كما هو الحال في الإصدارات السابقة من Dreamweaver. 

سمات طريقة العرض Code الجديدة

تمت إضافة 10 سمات ألوان جديدة إلى طريقة العرض Code:

  • RecognEyes
  • Havenjark
  • Solarized Dark
  • Solarized Light
  • Wombat
  • Monaki
  • Schuss
  • Tango
  • Cool Light
  • Roboticket

لمزيد من المعلومات حول سمات طريقة العرض Code، راجع تعيين سمة الألوان لطريقة العرض Code.

تحسينات CSS Designer

يتضمن هذا التحديث تغييرات قليلة على واجهة مستخدم CSS Designer وتغييرًا في الإعداد الافتراضي لمربع الاختيار Show Set.

عند بدء التشغيل، يتم تحديد مربع الاختيار Show Set افتراضيًا وستكون التغييرات التي يتم إجراؤها على هذا الخيار ثابتة عبر جلسات Dreamweaver. على سبيل المثال، إذا قمت بإلغاء تحديد هذا الخيار، فستحتفظ الجلسة التالية لبرنامج Dreamweaver بالإعداد وتعرض الخيار دون تحديد.

فيما يلي التغييرات التي تمت على واجهة المستخدم:

  • تقوم لوحة CSS Designer بالتمرير أثناء إضافة الخواص: عند النقر على "+" في قسم Properties، يتم تمرير اللوحة بحيث تأتي خاصية Add تقريبًا في مركز لوحة Properties. إذا كان قسم Properties صغيرًا جدًا، يتم تمرير اللوحة لإظهار صف خاصية Add في أسفل القسم.
  • الخلفية والتمييز: عندما يكون التمييز على مربع النص Add New Property، يتم تمييز الصف بخلفية رمادية. 
  • موضع الزرين '+' و'-': تم نقل موضع الزرين "+" و"-" الذين يظهران في كل قسم في لوحة CSS Designer (‏Source وSelectors وMedia query وProperties) الآن من أقصى اليمين إلى اليسار لجعلهما أكثر وضوحًا.
  • تسمى الفئة "Custom" الآن "More".

تصحيح طريقة العرض Live‬ عن بعد

يمكنك الآن تصحيح مستندات Dreamweaver الخاصة بك المفتوحة في "طريقة العرض Live‬" عن بعد باستخدام Google Chrome DevTools. في Google Chrome، يمكنك استخدام المنفذ 5471، الذي يمكّنك من التنشيط بتنفيذ الخطوات التالية:

  1. تشغيل Dreamweaver بتنفيذ الأمر التالي:

    • Windows: <installation_path> -enableRemoteDebugging
    • Mac: open <installation_path> --args -enableRemoteDebugging

    ملاحظة: اكتب واصلتين قبل الوسيطات

  2. في مربع الحوار الذي يظهر ويشير إلى أن منفذ 5471 منشط لتصحيح الأخطاء، انقر فوق "موافق".

    يتم تشغيل Dreamweaver.

    انقر فوق OK في مربع الحوار لتشغيل Dreamweaver
    انقر فوق OK في مربع الحوار لتشغيل Dreamweaver

  3. افتح المستندات التي تريد تصحيحها في "طريقة العرض Live".

  4. لبدء التصحيح، افتح Google Chrome واستعرض للوصول إلى localhost:5471. يتم عرض قائمة بجميع المستندات المفتوحة في Dreamweaver.

    ملاحظة: نظرًا لأن "شاشة الترحيب" الجديدة ولوحة Extract تستخدمان إطار عمل Chromium Embedded Framework (CEF)‎، ستشاهد أيضًا الإدخالات المرتبطة بهذه الميزات.

    يمكنك الآن استخدام Google Chrome DevTools لتصحيح المستندات المطلوبة.

  5. لإيقاف تصحيح الأخطاء وفتح Dreamweaver في الوضع العادي، قم بالخروج من Dreamweaver وتشغيله مرة أخرى.

تحسينات أخرى

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

عندما تقوم الآن بإعادة تعيين التفضيلات باستخدام اختصارات لوحة المفاتيح، يقوم Dreamweaver بإنشاء نسخة احتياطية من التفضيلات في مجلد 'Adobe Dreamweaver CC 2014.1 Backups'. يتم إنشاء هذا المجلد تلقائيًا في نفس مجلد تفضيلات Dreamweaver الأصلية في نظام Windows وMac.

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

إعادة تعيين التفضيلات والإعدادات
إعادة تعيين التفضيلات والإعدادات

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

لم تعد المستندات الديناميكية مثل PHP وCFM وASP تُفتح في طريقة العرض Code بشكل افتراضي. فهي تُفتح في نفس الوضع (Code/Live/Split/) الخاص بآخر مستند تم غلقه أو آخر مستند كان في التركيز.

Adobe Dreamweaver CC 2014.1 (أكتوبر 2014)

ميزة Extract في Dreamweaver

يتيح تكامل Extract مع Dreamweaver لمصممي ومطوري الويب تطبيق معلومات التصميم واستخراج الأصول المحسنة للويب مباشرة في بيئة كتابة الأكواد البرمجية. يوفر ‏‫Extract حلاً كاملاً قائمًا بذاته لاستخراج معلومات الأنماط والأصول من تركيبات PSD، مما يقلل الحاجة إلى الانتقال ذهابًا وإيابًا بين Photoshop وDreamweaver.

باستخدام ‏‫لوحة Extract في Dreamweaver‬، يمكنك استخراج CSS والصور والخطوط والألوان والتدرجات، والقياسات إلى صفحة الويب الخاصة بك مباشرة. بالإضافة إلى ميزات Extract الرئيسية هذه، يقدم برنامج Dreamweaver الميزات الفريدة التالية:

  • يمكنك الوصول مباشرة إلى ملفات PSD على Creative Cloud وملفات PSD المشاركة معك في مجلد تعاوني
  • تلميحات الأكواد البرمجية السياقية لتحديد الخطوط والألوان والتدرجات بسهولة في CSS
  • دعم السحب والإسقاط لإنشاء علامات صور من طبقات PSD
  • لصق الأنماط مباشرة في طريقة العرض Live (على سبيل المثال، CSS Designer وElement Display)

تعرض مساحة العمل الافتراضية في Dreamweaver (التي تحمل اسم Extract) لوحة Extract على اليسار حتى يتسنى لك بدء العمل سريعًا. عند تشغيل Dreamweaver لأول مرة، تُظهر اللوحة Extract تدريبًا مبسطًا يساعدك في التعرف على عمليات سير عمل Extract. يمكنك النقر فوق Get Started لبدء استخدام Extract.

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

لمزيدٍ من المعلومات حول سير عمل Extract في برنامج Dreamweaver، راجع تكامل Dreamweaver مع Extract.

بنية بدقة 64 بت

يتوفر الآن الإصدار 64 بت من برنامج Dreamweaver ويدعم كل الميزات تمامًا مثل الإصدار 32 بت. مع هذه الإضافة، يمكنك تنزيل بنيات Dreamweaver التالية من تطبيق Adobe Creative Cloud:

نظام التشغيل موقع التثبيت الافتراضي مجلد تفضيلات التطبيق
Windows 32 بت C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Windows 64 بت C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Mac 64 بت /Applications/Adobe Dreamweaver CC 2014.1 ~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

الأسئلة الشائعة

  • هل سيعمل تطبيق 64 بت على الإصدار 32 بت من نظام Windows؟ - لا
  • هل يمكنني تثبيت إصداري 32 بت و64 بت على جهاز Windows واحد؟ - لا
  • كيف يمكنني التحقق مما إذا كان نظامي يقوم بتشغيل إصدار 32 أم إصدار 64 بت من Dreamweaver؟
    • Windows: قم بتشغيل برنامج Dreamweaver. افتح إدارة المهام وابحث عن عملية Dreamweaver. إذا كانت بنية Dreamweaver التي تم تشغيلها 64 بت، فسيكون اسم العملية "Dreamweaver.exe". إذا كانت بنية Dreamweaver التي تم تشغيلها 32 بت، فسيكون اسم العملية "Dreamweaver.exe *32".
    • Mac: افتح Activity Monitor، وانتقل للتحقق من View > Columns > Kind. ابحث عن Dreamweaver في Activity Monitor ولاحظ عمود Kind. إذا كان إصدار Dreamweaver المستخدم هو 64 بت، فسيشير العمود Kind إلى "64 بت".

تثبيت إصدار Dreamweaver 64 بت

  1. تأكد من أن جهازك يعمل باستخدام إصدار نظام التشغيل 64 بت:

    للتحقق مما إذا كان جهازك يعمل بإصدار 64 بت، اتبع الخطوات الموصوفة في الموضوعات أدناه:

  2. قم بتنزيل إصدار Dreamweaver 64 بت من Creative Cloud وقم بتثبيت البنية.

تحسينات طريقة العرض Live

أدلة Live

أدلة Live هي معلومات مرئية في طريقة العرض Live تشير إلى المواضع الممكنة حيث يمكنك إدراج عنصر في السيناريوهات التالية:

  • أثناء السحب من اللوحة Insert
  • أثناء السحب من اللوحة Asset
  • سحب (تحريك) العناصر في طريقة العرض Live.

ملاحظة:

أدلة Live غير مدعومة في مستندات Fluid Grid.

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

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

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

إدراج عنصر هيكلي بدقة

يمكنك استخدام طريقة العرض السريع للعنصر مع أدلة Live لإدراج عنصر HTML بصورة أكثر دقة في بنية المستند.  

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

أيقونة العرض السريع للعنصر
رمز طريقة العرض السريع للعنصر الذي يساعد في الإدراج بدقة

قائمة السياق في طريقة العرض Live

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

ملاحظة:

يمكنك أيضا استخدام اختصارات لوحة المفاتيح (على سبيل المثال، في Windows، Ctrl+x وctrl+c وCtrl+v وCtrl + d ومفتاح Delete في طريقة العرض Live.

أولاً، حدد عنصرًا في طريقة العرض Live لرؤية Element Display. ثم انقر بزر الماوس الأيمن داخل منطقة العلامة لرؤية خيارات قائمة السياق أعلاه. الخيارات عاملة في مستوى العلامة. 

تغييرات في Element Display

الآن، يمكنك تطبيق المحددات على العناصر بالإضافة إلى إمكانية إنشاء محدد في مصدر CSS المرغوب وتعيين استعلام وسائط باستخدام Element Display. عند إدخال محدد غير موجود في أي ورقة أنماط والضغط على Enter، يوفر Element Display خيارات لاختيار مصدر CSS واستعلام وسائط.

خيارات مصدر CSS واستعلام الوسائط في Element Display
خيارات مصدر CSS واستعلام الوسائط في Element Display

إذا لم ترغب في اختيار مصدر CSS أو استعلام وسائط، فاضغط على Esc لإغلاق الخيارات.

يمكنك أيضًا النقر بالزر الأيمن للماوس فوق محدد مطبق الآن للانتقال إلى الأكواد البرمجية المناظرة (انتقل إلى الخيار Code) أو للصق أي أنماط تم نسخها (الخيار Paste Styles).

انتقل إلى الخيارين Code وPaste Styles في Element Display
انتقل إلى الخيارين Code وPaste Styles في Element Display

ملاحظة:

يُظهر خيار Go To Code خيارات فرعية إذا تمت إضافة نفس المحدد إلى استعلامات متعددة الوسائط. يُظهر الخيار Paste Styles خيارات فرعية إذا كانت المحددات المنسوخة زائفة أو محددات مركبة.

تحريك العناصر في طريقة العرض Live

الآن، يدعم Dreamweaver حركة العناصر (مستوى العلامة) في طريقة العرض Live. يمكنك تحديد عنصر في طريقة العرض Live، ثم سحبه في أي مكان آخر وإسقاطه.

  1. انقر فوق العنصر الذي تريد نقله، وبمجرد ظهور Element Display (المربع الأزرق حول العنصر)، قم بسحب العنصر. عندما تتم تهيئة 'السحب'، يتغير مؤشر الماوس مشيرًا إلى جاهزية العنصر للنقل.

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

ملاحظة:

يمكن نقل العناصر الثابتة فقط في طريقة العرض Live. لا يمكن نقل علامات المحتوى الديناميكية مثل PHP.

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

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

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

  • مفتاحي السهم لأعلى والسهم لأسفل للتنقل‬‏‫ عبر عناصر الصفحة.يوفّر تنقل لوحة المفاتيح في طريقة العرض Live إمكانية الوصول بسهولة إلى العناصر المتداخلة والملتفة.
  • المفتاح Tab للتنقل عبر المحددات في Element Display

لمزيد من المعلومات، راجع ‏‫التنقل باستخدام لوحة المفاتيح في طريقة العرض Live‬‏.

Quick Tag Editor في طريقة العرض Live

يؤدي الضغط على Ctrl+T في Windows أو Cmd+T في Mac في طريقة العرض Live الآن إلى عرض Quick Tag Editor للعنصر المحدد. يضم Quick Tag Editor ثلاث حالات: Edit Tag وWrap Tag وInsert HTML. يمكنك التبديل بين هذه الحالات باستخدام Ctrl/Cmd + T.

Quick Tag Editor في طريقة العرض Live
Quick Tag Editor في طريقة العرض Live

‏‫التغييرات على مساحة عمل Dreamweaver

التغييرات على شريط الأدوات Document

تم تعديل شريط الأدوات Document وجعله سهل الاستخدام.

  • يتم دمج خيارات Design وطريقة العرض Live في عنصر تحكم واحد (القائمة المنسدلة).
خيارات Design وطريقة العرض Live في Dreamweaver CC (أكتوبر 2014)
خيارات Design وطريقة العرض Live في آخر تحديث - Dreamweaver CC (أكتوبر 2014)

الزران Design وLive View في شريط الأدوات Document في الإصدارات السابقة
الزران Design وLive View في شريط الأدوات Document في الإصدارات السابقة

  • تم نقل حقل عنوان المستند الآن إلى عارض الخصائص.
شريط الأدوات Document في Dreamweaver CC (أكتوبر 2014)
شريط الأدوات Document في آخر تحديث - Dreamweaver CC (أكتوبر 2014)

حقل عنوان شريط الأدوات Document المنقول إلى عارض الخصائص في الإصدار 2014 من Dreamweaver CC (أكتوبر 2014)
تم نقل حقل عنوان Document إلى عارض الخصائص في آخر تحديث - Dreamweaver CC (أكتوبر 2014)

حقل العنوان في شريط الأدوات Document في الإصدارات السابقة
حقل العنوان في شريط الأدوات Document في الإصدارات السابقة

  • تم استبدال زري Inspect وLive Code بأيقونتين.
أيقونتا Inspect وLive Code - في Dreamweaver CC (أكتوبر 2014)
رمزا Inspect وLive Code - في آخر تحديث - Dreamweaver CC (أكتوبر 2014)

الزران Live Code وInspect في الإصدارات السابقة
الزران Live Code وInspect في الإصدارات السابقة

  • تم تجميع خيارات Back، وForward، وRefresh مع شريط Address ووضعها في وسط شريط الأدوات Document.
‏‫خيارات شريط Address وBack، وForward، وRefresh في Dreamweaver CC (أكتوبر 2014)
شريط العناوين مع ‏‫الخيارات Back، وForward، وRefresh في آخر تحديث - Dreamweaver CC (أكتوبر 2014)

شريط العناوين مع الخيارات Back وForward وRefresh في الإصدارات السابقة
شريط العناوين مع الخيارات Back وForward وRefresh في الإصدارات السابقة

  • تم تجميع أيقونات Preview/Debug in Browser، وLive View Options، وFile Management معًا ومحاذاتها على يمين شريط الأدوات Document.
أيقونات Preview، وdebug in browser وخيارات طريقة العرض Live وFile Management في Dreamweaver CC (أكتوبر 2014)
أيقونات Preview، وdebug in browser وخيارات طريقة العرض Live وFile Management في آخر تحديث - Dreamweaver CC (أكتوبر 2014)

أيقونات Preview وDebug In Browser وخيارات طريقة العرض Live وFile Management في الإصدارات السابقة
أيقونات Preview وDebug In Browser وخيارات طريقة العرض Live وFile Management في الإصدارات السابقة

التغييرات على مساحة العمل الافتراضية

تم تغيير مساحات العمل غير النمطية المتوفرة مع Dreamweaver على النحو التالي:

  • Code
  • Design
  • Extract
مساحات العمل
مساحات العمل

مساحة العمل الافتراضية الآن هي Extract. تُظهر مساحة العمل هذه اللوحة Extract على اليسار وصفحة الويب على اليمين. عند تشغيل Dreamweaver لأول مرة، تعرض اللوحة Extract تدريبًا مبسطًا يساعدك في التعرف على تدفقات سير عمل Extract. لبدء استخدام Extract، انقر فوق Get Started.

مساحة العمل Extract
مساحة العمل Extract

طريقة العرض الافتراضية لمستندات HTML الآن هي Split View، وهي تعني الفصل أفقيًا لعرض طريقة العرض Live وCode. يتم فتح الملفات الديناميكية مثل تلك المسرودة أدناه في طريقة العرض Code الكاملة افتراضيًا. عند تقسيم طريقة العرض، تظهر هذه المستندات في طريقة العرض Design وCode.

  • PHP
  • قالب PHP ‏(Example.dwt.php)
  • ASP
  • قالب ASP‎ ‏(Example.dwt.asp)
  • JSP
  • قالب JSP ‏(Example.dwt.jsp)
  • CFM
  • قالب CFM ‏(Example.dwt.php)
طريقة العرض الافتراضية لمستندات HTML تُظهر طريقتي العرض Live وCode
طريقة العرض الافتراضية لمستندات HTML تُظهر طريقتي العرض Live وCode

طريقة العرض الافتراضية للمستندات الديناميكية تُظهر طريقة العرض Code الكاملة
طريقة العرض الافتراضية للمستندات الديناميكية تُظهر طريقة العرض Code الكاملة

تلميح: للتبديل إلى طريقة العرض Design، انقر فوق القائمة المنسدلة المجاورة لـ Live وانقر فوق Design. لتغيير التقسيم الأفقي إلى تقسيم رأسي، حدد View > Split Vertically. تظهر طريقة العرض Live/Design الآن على اليسار. لجعل طريقة العرض Live/Design تظهر في اليمين، قم بإلغاء تحديد View ‏> طريقة العرض ‏Live على اليسار أو طريقة العرض ‏Design على اليسار.

يتذكر Dreamweaver الآن حالة طريقة العرض ‏Live التي اخترتها لمستند HTML ثم يطبق نفس طريقة العرض على كل مستندات HTML التي تفتحها لاحقًا. على سبيل المثال، لنفرض أن HTML1 هو المستند الذي تفتحه أولاً. يتم تقسيم طريقة عرض المستند بين Code وطريقة العرض Live. لنفرض أنك غيرت طريقة هذا المستند إلى طريقة العرض Live الكاملة. يتم عرض المستند التالي الذي تفتحه، لنفرض أنه HTML2، في طريقة العرض Live الكاملة.  

التغييرات على مستندات الشبكة المرنة

الدعم لتحرير طريقة العرض Live

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

تساعدك الميزات التالية على تحرير مستندات الشبكة المرنة في طريقة العرض Live:

يمكنك الآن أيضًا عرض HTML DOM لمستند الشبكة المرنة باستخدام ‏‫العرض السريع للعنصر‬‏‫. 

ملاحظة: ‏‫لا يسمح لك العرض السريع للعنصر‬‏‫ في تخطيطات الشبكة المرنة بنسخ عناصر HTML أو لصقها أو تكرارها أو إعادة ترتيبها.

لقد تغيرت واجهة المستخدم المستخدمة لعرض وتحرير مستندات الشبكات المرنة لاستيعاب ميزات التحرير في طريقة العرض Live. عند تحديد عنصر الآن في مستند شبكة مرنة، يتم عرض Element Display مع باقي عناصر التحكم مثل Hide Elements و Start A New Row.

خيارات الشبكة المرنة في الإصدارات السابقة
خيارات الشبكة المرنة في الإصدارات السابقة

خيارات الشبكة المرنة إلى جانب Element Display في Dreamweaver CC (أكتوبر 2014)
خيارات الشبكة المرنة إلى جانب Element Display في آخر تحديث من Dreamweaver CC (أكتوبر 2014)


أيضا، مستندات الشبكة المرنة مفتوحة مباشرة الآن في طريقة العرض Live: لا يمكنك عرض أو تحرير مستندات الشبكة المرنة في Design View أكثر من ذلك.

شريط الأدوات Document في Dreamweaver CC (أكتوبر 2014)
شريط الأدوات Document في آخر تحديث - Dreamweaver CC (أكتوبر 2014)

شريط الأدوات Document في مستند شبكة مرنة في الإصدارات السابقة
شريط الأدوات Document في مستند شبكة مرنة في الإصدارات السابقة

لمزيد من المعلومات عن مستندات الشبكة المرنة، راجع التصميم التفاعلي باستخدام مخططات الشبكة المرنة.

تغييرات على سير عمل Insert

يحتوي مربع الحوار Insert لمستندات الشبكات المرنة الآن على "مساعدة للموضع". تتيح لك مساعدة الموضع وضع العنصر المدرج قبل، أو بعد، أو تضمينه داخل العنصر الذي عليه التركيز (في طريقة العرض Live). لمزيدٍ من المعلومات حول إدراج عناصر الشبكات المرنة، راجع إدراج عناصر الشبكات المرنة.

التغيير في خيار Manage Hidden Elements

تم نقل خيار Manage Hidden Elements (زر العين في شريط أدوات المستند) إلى قائمة السياق في مستند الشبكة المرنة.


لإدارة العناصر المخفية، انقر بالزر الأيمن للماوس على صفحة الشبكة المرنة، وحدد Manage Hidden elements لرؤية العناصر المخفية. لإخفاء هذه العناصر، يمكنك النقر على رمز العين في HUD. 

خيار ‏‫إدارة العناصر المخفية‬‏‬ في قائمة النقر بزر الماوس الأيمن في Dreamweaver CC (أكتوبر 2014)
خيار Manage Hidden Elements في قائمة النقر بزر الماوس الأيمن في آخر تحديث - Dreamweaver CC (أكتوبر 2014)

رمز 'العين' لإدارة العناصر المخفية في الإصدارات السابقة
رمز 'العين' لإدارة العناصر المخفية في الإصدارات السابقة

نُسق الألوان خارج المربع لطريقة العرض Code

يمكنك الآن الاختيار من بين إحدى نُسق اللون التالية المتوفرة بسهولة لطريقة العرض Code:

  • Classic (افتراضي؛ نفس الإصدارات السابقة من Dreamweaver)
  • Raven
  • Slate
  • Blanche
  • Geneva
النُسق Classic وRaven وSlate وBlanche وGeneva
السمات Classic وRaven وSlate، وBlanche، وGeneva

استخدم تفضيلات ألوان الأكواد البرمجية لتحديد سمة لطريقة العرض Code. يمكنك تخصيص السمة عن طريق اختيار أنظمة ألوان مختلفة للخلفيات والمقدمات و‏‫الأحرف المخفية.

لكل نوع مستند مدرج، يمكنك تخصيص الألوان لفئات مختلفة من العلامات وعناصر الأكواد البرمجية، كالعلامات المتعلقة بالنموذج أو معرفات JavaScript. على سبيل المثال، لنسق Raven المطبق على جميع أنواع المستندات، يمكنك اختيار أن يكون لها اللون الأزرق للعلامات المتعلقة بالنموذج في مستندات HTML فقط.

يتم حفظ جميع الإعدادات المخصصة في نسق عند النقر على Apply ويكون النسق المخصص متوفرًا للاستخدام عبر جلسات Dreamweaver.

ملاحظة:

يمكنك الاحتفاظ بنسق التعليمة البرمجية المرفقة متزامنة بين مثيلات Dreamweaver الخاص بك باستخدام خيار Sync Settings في Preferences. لمزيد من المعلومات، راجع مزامنة إعدادات Dreamweaver مع Creative Cloud.

لمزيد من المعلومات، راجع ‏‫تعيين نسق اللون لطريقة العرض Code‬.

مزامنة طريقة العرض Code مع طريقة العرض Live

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

يمكنك مشاهدة عرض التعليمة البرمجية لمزامنة طريقة العرض Live في الإجراء في مهام سير العمل التالية (عندما يكون التركيز في طريقة العرض Code‬):

  • عمليات النص، مثل Cut/Copy/paste/Delete ،Undo/redo.
  • تحريك العناصر في ‏‫العرض السريع للعنصر‬‏ عندما يكون التركيز في طريقة العرض ‏Code‬.
  • الكتابة في طريقة العرض ‏Code.
  • إجراءات Delete/Duplicate/Copy/Paste في ‏‫العرض السريع للعنصر‬ (خيارات النقر بالزر الايمن للماوس).
  • العمليات في عارض الخصائص، مثل تغيير تنسيقات النص -Bold/Italic وChanging Class، وID، وFormat، وخصائص الصفحة، وتطبيق الخطوط.
  • إضافة/حذف فئات أو معرفات باستخدام تلميحات الأكواد البرمجية في طريقة العرض Code.
  • إدخال عناصر، مثل، Div، وImage، والارتباط التشعبي، وعناصر البنية من لوحة في طريقة العرض Code.
  • إضافة / تحرير أنماط CSS في علامة <style>. 
  • تحرير التعليمة البرمجية في ملفات CSS.

ملاحظة:

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

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

اللوحة Assets (Windows > Assets) متاحة الآن في طريقة العرض Live. باستخدام اللوحة Assets، يمكنك إدارة المهام التالية بسهولة:

  • قم بسحب الأصول أو إدراجها (الصور، أو عناوين URL، أو الألوان أو الوسائط) من جزء المعاينة أو عرض القائمة من لوحة Assets.

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

  • انسخ قيمة اللون والصق قيمته على أي حقل نص في Dreamweaver مثل خصائص CSS Designer، وCode View، ومنتقي الألوان، أو حتى لتطبيقات الأخرى مثل Notepad.

ملاحظة:

 

  • نظرًا لزيادة ملائمة فئات البرامج النصية، والقالب، والمكتبة في Code View، فإنها مخفية في لوحة Assets في طريقة العرض Live.
  • تم الجمع بين فئتي Flash، وMovies في هذا الإصدار من Dreamweaver CC، في فئة واحدة تسمى Media" .
         

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

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


‏‫للحصول على تعليمات مفصلة عن كيفية استخدام لوحة Assets، راجع ‏‫استخدام الأصول‬.

قوالب بداية التشغيل الجديدة

يشتمل Dreamweaver الآن على قوالب بداية تشغيل تفاعلية جديدة تساعدك في بدء العمل مع مواقع الويب التفاعلية بشكل أسرع. يمكنك الاختيار من بين أحد القوالب التالية في مربع حوار New Document (File > New > Starter Templates):

  • حول الصفحة
  • منشور المدونة
  • eCommerce
  • Email
  • Portfolio
قوالب بداية التشغيل التفاعلية الجديدة
قوالب بداية التشغيل التفاعلية الجديدة

عند اختيار قالب والنقر فوق Create في مربع حوار New Document، يطلب Dreamweaver منك حفظ المستند الجديد. بحفظ المستند، تكون قد صنعت نسخة من القالب، والتي يمكنك تخصيصها في وقت لاحق لتناسب متطلباتك.

إعادة تعيين تفضيلات عند بدء التشغيل

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

إعادة تعيين التفضيلات
إعادة تعيين التفضيلات

يمكنك فتح مربع الحوار Reset Preferences عن طريق الضغط مع الاستمرار على مفاتيح اختصار لوحة المفاتيح التالية أثناء بدء تشغيل Dreamweaver:

  • (Win)‏ Windows key ‏+ Ctrl +‏ Shift
  • (Mac)‏ Cmd +‏ Option ‏+ Shift

ملاحظة:

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

في جهاز Mac، اضغط مع الاستمرار على Cmd +‏ Option +‏ Shift أثناء تشغيل Dreamweaver (بالنقر على رمز Dreamweaver في المنصة).

في Windows، قم بالخطوات التالية:

  1. انتقل إلى مجلد التثبيت وحدد موقع الملف Dreamweaver.exe وانقر عليه.

  2. اضغط مع الاستمرار على المفاتيح Windows key ‏+ Ctrl +‏ Shift وانقر مرتين فوق الملف Dreamweaver.exe.

تأكد من أن تضغط باستمرار على مفاتيح الاختصار المذكورة أعلاه حتى عندما يظهر مربع الحوار User Account Control ‏(UAC). 

تحسينات أخرى

التغييرات في إعدادات المزامنة

يمكنك الآن استيراد الإعدادات من الإصدار السابق لـ Dreamweaver والتي تم حفظها في Creative Cloud باستخدام مربع الحوار Preferences. يتم تجاوز كل الإعدادات المحلية بالإعدادات التي تم استيرادها من الخدمة السحابية وتطبيقها أثناء عملية التشغيل التالية لـ Dreamweaver.

استيراد إعدادات من إصدارات سابقة من Dreamweaver
استيراد إعدادات من إصدارات سابقة من Dreamweaver

أيضا، من هذا الإصدار فصاعدًا، وبالإضافة إلى الإعدادات التي تم مزامنتها في الإصدارات السابقة، سيتم مزامنة الإعدادات التالية أيضًا مع Creative Cloud:

  • نسق ألوان التعليمة البرمجية التي تمت إضافتها مؤخرًا
  • إعدادات شريط Application وإطار Application على أجهزة Mac

تغييرات CSS Designer

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

التغييرات على الشاشة Welcome

تم استبدال الخيار Site Templates في الشاشة Welcome بـ Starter Templates. يمكنك الوصول إلى Site Templates في مربع الحوار New Document‏ (File > New).

تحديثات إصدار jQuery

يتضمن Dreamweaver الآن مكتبات jQuery المحدثة كما يلي:

  • jQuery - 1.8.3 إلى jQuery - 1.11.1
  • jQuery UI - 1.9.2 إلى jQuery UI - 1.10.4

تمت إزالة صفحات بدء تشغيل jQuery. 

تحديث PhoneGap

التكامل المباشر لـ Dreamweaver مع PhoneGap Build لحزم التطبيقات غير مدعوم في آخر تحديث لإصدار 2014 من Dreamweaver CC (أكتوبر 2014) والإصدارات اللاحقة.

إلا أنه يمكنك الوصول مباشرة إلى خدمة PhoneGap Build على الإنترنت والاستفادة من آخر تحديثات الميزات لحزم تطبيقات الويب كتطبيقات محمول أصلية. لمزيد من المعلومات، راجع استخدام PhoneGap build مع آخر تحديث لإصدار 2014 من Dreamweaver CC.

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

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