مساحة عمل Dreamweaver

إلحاق Dreamweaver

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

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

وبعد أن تختار مساحة العمل، يمكنك اختيار سمة لون مريح لك. يمكنك بعد ذلك بدء الاستخدام.

الشاشة الرئيسية المحسّنة

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

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

يعرض Dreamweaver الشاشة الرئيسية عند التشغيل أو عندما لا تكون هناك مستندات مفتوحة.

الخيارات في تجربة Start في Dreamweaver

انقر على Learn للوصول الفوري إلى دروس Dreamweaver من هذه الشاشة.

ابدأ في إنشاء المستندات في Dreamweaver من خلال النقر على أي من أنواع الملفات المعروضة.

افتح إحدى قوالب البداية المرفقة مع Dreamweaver. 

انقر على Home للعودة إلى شاشة البداية. 

يمكنك عرض الملفات الحديثة التي عملت عليها في شاشة البدء. إذا لم تكن لديك أي ملفات حديثة، فستكون هذه علامة التبويب فارغة.

يمكنك أيضا استخدام وظيفة البحث باستخدام أيقونة البحث في الركن الأيمن العلوي من هذه الشاشة. عندما تكتب استعلام بحث، يعرض التطبيق ملفاتك الحديثة وأصول Creative Cloud وروابط المساعدة وصور Stock التي تطابق استعلام البحث.

يمكنك النقر فوق Create New لبدء إنشاء ملفات Dreamweaver جديدة. إذا كان لديك بالفعل ملفات في نظامك، فانقر فوق Open. للحصول على معلومات حول إنشاء وفتح المستندات في Dreamweaver، راجع إنشاء الملفات وفتحها.

نظرة عامة على مساحة العمل

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

نظرة عامة على عناصر مساحة العمل

تتضمن مساحة العمل العناصر التالية:

يقع في الجزء العلوي من نافذة التطبيق ويحتوي على مبدل مساحة عمل والقوائم (Windows فقط) وعناصر تحكم أخرى للتطبيق.

يحتوي على أزرار توفر خيارات لعروض مختلفة من نافذة Document (مثل عرض Design وعرض Live وعرض Code).

لعرض شريط الأدوات Standard حدد Window > Toolbars > Standard. يحتوي شريط الأدوات على أزرار للعمليات الشائعة من قائمتي File وEdit: New وOpen وSave وSave All وPrint Code وCut وCopy وPaste وUndo وRedo.

يقع على الجانب الأيسر من نافذة التطبيق ويحتوي على أزرار خاصة بالعرض.

تعرض المستند الحالي أثناء قيامك بإنشائه وتحريره.

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

موجود في الشريط Status أسفل الإطار Document. يعرض التسلسل الهيكلي للعلامات الموجودة حول التحديد الحالي. انقر فوق أي علامة في التسلسل الهيكلي لتحديد هذه العلامة وجميع محتوياتها.

تساعدك على متابعة عملك وتعديله. من الأمثلة اللوحة Insert واللوحة CSS Designer ، واللوحة Files. لتوسيع لوحة، انقر نقرًا مزدوجًا فوق علامة التبويب الخاصة بها.

تتيح لك تحميل ملفات PSD وعرضها في Creative Cloud. باستخدام هذه اللوحة، يمكنك استخراج CSS والنص والصور والخطوط والألوان والتدرجات اللونية والقياسات من ملفات PSD إلى مستندك.

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

تتيح لك إدارة الملفات والمجلدات، سواء كانت جزءًا من موقع Dreamweaver أو موجودة على خادم بعيد. كما تتيح لك اللوحة Files الوصول إلى كل الملفات الموجودة على القرص المحلي. لمزيد من المعلومات، راجع إدارة الملفات والمجلدات.

تتيح لك حفظ أجزاء تعليماتك البرمجية وإعادة استخدامها عبر مختلف صفحات الويب ومختلف المواقع ومختلف عمليات تثبيت Dreamweaver (باستخدام إعدادات المزامنة). لمزيد من المعلومات، راجع إعادة استخدام التعليمات البرمجية مع الأجزاء‬.

هو CSS Property Inspector الذي يتيح لك إنشاء أنماط وملفات CSS "بصرياً" وتعيين الخصائص، بالإضافة إلى استعلامات الوسائط.

نظرة عامة على النافذة Document

تعرض النافذة Document المستند الحالي. لتبديل عروض المستند، استخدم خيارات العرض الموجودة في شريط الأدوات Document. 

يمكنك أيضاً تبديل طرق العرض باستخدام خيارات العرض في قائمة العرض.

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

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

هي بيئة ترميز يدوي لكتابة وتحرير HTML وJavaScript وأي نوع آخر من التعليمات البرمجية.

هي نسخة مقسومة من عرض Code التي تتيح لك التمرير للعمل على أقسام مختلفة من المستند في نفس الوقت. 

يتيح لك رؤية كل من عرض Code وعرض Live للمستند نفسه في نافذة واحدة.

يتيح لك رؤية كل من عرض Code وعرض Design للمستند نفسه في نافذة واحدة.

يعرض التعليمات البرمجية الفعلية التي يستخدمها المتصفح لتنفيذ الصفحة، ويمكن أن يتغير ديناميكياً أثناء تفاعلك مع الصفحة في عرض Live.

عندما يكون الإطار Document في وضع التكبير (الوضع الافتراضي)، تظهر علامات التبويب بأعلى الإطار Document لتعرض أسماء ملفات جميع المستندات المفتوحة. يعرض Dreamweaver علامة نجمية بعد اسم الملف إذا كنت قد أجريت تغييرات لم تحفظها بعد.

يعرض برنامج Dreamweaver كذلك شريط الأدوات Related Files أسفل علامة تبويب المستند (أو أسفل شريط عناوين المستند إذا كنت تقوم بعرض المستندات في نوافذ منفصلة). المستندات ذات الصلة هي المستندات المقترنة بالملف الحالي، مثل ملفات CSS أو ملفات JavaScript. لفتح ملف من هذه الملفات ذات الصلة في الإطار Document، انقر فوق اسم الملف له في شريط الأدوات Related Files.

التبديل بين طرق العرض

استخدم شريط أدوات Document للتبديل بين مختلف طرق العرض بشكل سريع. لمزيد من المعلومات، راجع نظرة عامة على شريط أدوات المستند.

يمكنك أيضاً التبديل بين العروض باستخدام الخيارات التالية في قائمة View:

• عرض Code فقط: حدد Code
• العرض المقسوم: حدد Split وحدد أي من خيارات التقسيم
• وضع العرض: التبديل بين عرضي Live وDesign
• تبديل العروض: للتبديل من عرض إلى آخر.

تتالي نوافذ المستند أو تجانبها أو إعادة تنظيمها

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

لترتيب نوافذ المستندات بشكل متتالي: حدد Window > Arrange > Cascade.

لترتيب نوافذ المستندات بشكل متجانب:

• (Windows) حدد Window > Arrange > Tile Horizontally أو Tile Vertically.
• (Macintosh) حدد Window > Arrange > Tile.

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

تغيير حجم نافذة المستند

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

عند تغيير حجم العرض لصفحة في طريقة العرض Design أو Live، تتغير أبعاد حجم العرض فقط. ويظل حجم المستند دون تغيير.

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

لتغيير حجم نافذة المستند، حدد أحد الأحجام من قائمة Window Size المنبثقة أسفل نافذة المستند.

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

تغيير القيم المسرودة في القائمة المنبثقة Window Size

إضافة حجم جديد إلى القائمة المنبثقة Window Size

نظرة عامة على شريط الأدوات Document

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

تظهر الخيارات التالية بشريط الأدوات Document:

يعرض طريقة العرض Code فقط في الإطار Document.

يقسم النافذة Document بين طرق العرض Code وLive/Design. خيار عرض Design غير متاح لمستندات الشبكة السائلة.

هي معاينة تفاعلية تعرض حاليًا كائنات HTML5 والتحديثات في الوقت الفعلي لإظهار تغييراتك وعملها. يمكنك أيضًا تحرير عناصر HTML في طريقة العرض Live. تتيح لك القائمة المنسدلة المجاورة لخيارات Live التنقل بين طريقتي العرض Live وDesign. هذه القائمة المنسدلة غير متاحة في مستندات الشبكة السائلة.

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

نظرة عامة على شريط الأدوات Standard

لعرض شريط الأدوات Standard حدد Window > Toolbars > Standard. يحتوي شريط الأدوات على أزرار للعمليات الشائعة من قائمتي File وEdit: New وOpen وSave وSave All وPrint Code وCut وCopy وPaste وUndo وRedo.

نظرة عامة على شريط الأدوات Browser Navigation

يصبح شريط أدوات Browser Navigation نشطًا في طريقة العرض Live (فقط في حالة تمكينها من خلال تحديد Window->Toolbars->Standard)، ويعرض عنوان الصفحة التي تستعرضها في نافذة Document. تعمل طريقة العرض Live كمستعرض منتظم، ومن ثم فحتى في حالة الاستعراض إلى موقع خارج الموقع المحلي الخاص بك (على سبيل المثال، http://www.adobe.com)، يقوم برنامج Dreamweaver بتحميل الصفحة في الإطار Document.

لا تكون الارتباطات نشطة بشكل افتراضي في طريقة العرض Live. يتيح لك وجود ارتباطات غير نشطة تحديد نص ارتباط أو النقر فوقه في الإطار Document دون الانتقال إلى صفحة أخرى. لاختبار الروابط في عرض Live، يمكنك تمكين النقر لمرة واحدة أو النقر المستمر بتحديد View > Live View Options > Follow Links (Ctrl+Click Link) أو Follow Links Continuously.

نظرة عامة على شريط الأدوات

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

تخصيص شريط الأدوات

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

لتخصيص شريط الأدوات، قم بما يلي:

لاستعادة أزرار شريط الأدوات الافتراضية، انقر فوق "استعادة الافتراضي" في مربع الحوار "تخصيص شريط الأدوات".

نظرة عامة على شريط الحالة

يوفر الشريط Status الموجود بأسفل النافذة Document معلومات إضافية حول المستند الذي تقوم بإنشائه.

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

يعرض التسلسل الهيكلي للعلامات الموجودة حول التحديد الحالي. انقر فوق أي علامة في التسلسل الهيكلي لتحديد هذه العلامة وجميع محتوياتها. انقر فوق <body> لتحديد النص الأساسي بالكامل للمستند. لتعيين سمات class أو ‎ID لعلامة في محدد العلامات، انقر بزر الماوس الأيمن (في نظام التشغيل Windows) أو انقر مع الضغط على المفتاح Control (في نظام التشغيل Macintosh) فوق العلامة، ثم حدد فئة أو معرفًا من قائمة السياق.

لوحة Output

انقر فوق هذا الرمز لعرض لوحة Output التي تُظهر أخطاء الترميز في مستندك.

ألوان التعليمات البرمجية

(متاح فقط في عرض الكود)

حدد أي من لغات البرمجة من هذه القائمة المنبثقة لتغيير تلوين الكود ليُعرض وفقاً للغة البرمجة.

التبديل بين Insert وOverwrite

(متاح فقط في عرض Code)

يتيح لك التبديل بين وضعي Insert وOverwrite أثناء العمل في عرض Code.

رقم السطر والعمود

(متاح فقط في عرض Code.)

يعرض رقم السطر ورقم العمود حيث يقع المؤشر.

نظرة عامة على عارض الخصائص

تتيح لك Property Inspector (Window > Properties) فحص وتعديل الخصائص الأكثر شيوعًا للعنصر المحدد حاليًا في الصفحة، مثل النص أو كائن مُدرج.

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

يوجد عارض الخصائص بالحافة السفلى من مساحة العمل افتراضيًا، ولكن يمكنك إلغاء تثبيته وجعله لوحة عائمة في مساحة العمل.

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

عرض خصائص وتغييرها لعنصر صفحة

قوائم السياق

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

لفتح قائمة سياقية، انقر بزر الماوس الأيمن (Windows) أو Ctrl+انقر (Mac) على قسم من الكود في عرض Code، أو على كائن في عروض Live أو Design.

إعادة تنظيم اللوحات في Dreamweaver

يمكنك تخصيص موضع ومظهر جميع لوحات Dreamweaver وفقًا لمتطلباتك.

تثبيت اللوحات وإلغاء تثبيتها

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

نقل اللوحات

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

• لنقل لوحة، اسحبها من علامة تبويبها.
• لنقل مجموعة لوحة، اسحب شريط العنوان.

إضافة وإزالة اللوحات

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

• لإزالة لوحة، انقر بزر الماوس الأيمن (في Windows) أو انقر مع الضغط على مفتاح Control (في Mac OS) فوق علامة تبويبها ثم حدد Close أو قم بإلغاء تحديدها من قائمة Window.
• لإضافة لوحة، حددها من قائمة Window، وقم بتثبيتها حيثما تريد.

معالجة مجموعات اللوحات

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

تكديس اللوحات العائمة

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

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

تغيير حجم اللوحات

• لتصغير أو تكبير لوحة أو مجموعة لوحات أو تكديس من اللوحات، انقر نقرًا مزدوجًا فوق علامة تبويبها. يمكنك أيضًا النقر نقرًا مزدوجًا فوق مساحة علامة التبويب (المسافة الفارغة بجوار علامات التبويب).
• لتغيير حجم لوحة، اسحب أي جانب من جوانبها. 

طي رموز اللوحات وتوسيعها

يمكنك طي اللوحات إلى رموز لتقليل التزاحم على مساحة العمل. في بعض الحالات، يتم طي اللوحات إلى رموز في مساحة العمل الافتراضية.

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

إنشاء مساحات العمل المخصصة

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

من خلال حفظ الحجم والموضع الحاليين للوحات على هيئة مساحة عمل مسماة، فإنه يمكنك استعادة مساحة العمل حتى وإن قمت بنقل اللوحة أو إغلاقها.

لحفظ مساحة عمل مخصصة:

1. اختر Window > Workspace Layout > New Workspace.
2. اكتب اسمًا لمساحة العمل.

يتم حفظ مساحة العمل وتكون مرئية في مبدل Workspace في شريط أدوات Document.

لحذف مساحة عمل مخصصة:

حدد Manage Workspaces من مبدل مساحات العمل في شريط Application لفتح مربع حوار Manage Workspaces. حدد Workspace، ثم انقر Delete.

عرض مساحات العمل أو تبديلها

حدد مساحة عمل من مبدل مساحة العمل في شريط الأدوات للمستند.

تخصيص Dreamweaver في أنظمة متعددة المستخدمين

يمكنك تخصيص Dreamweaver ليناسب احتياجاتك حتى في نظام تشغيل متعدد المستخدمين مثل Windows XP أو Mac OS X.

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

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

عرض العناصر المجدولة (في Mac فقط)

يمكنك عرض مستندات متعددة في نافذة Document واحدة عبر استخدام علامات تبويب لتحديد كل مستند. يمكنك كذلك عرض المستندات كجزء من مساحة عمل عائمة، يظهر بها كل مستند في نافذة خاصة به.

فتح مستند مبوب في نافذة منفصلة

انقر مع الضغط على المفتاح Control فوق علامة التبويب، وحدد Move To New Window من قائمة السياق.

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

1. حدد Dreamweaver > Preferences، ثم حدد الفئة General.
2. حدد الخيار Open Documents in Tabs أو قم بإلغاء تحديده، ثم انقر فوق OK.

لا يقوم برنامج Dreamweaver بتعديل عرض المستندات المفتوحة حاليًا عند تغيير التفضيلات. ومع ذلك، يتم عرض المستندات التي يتم فتحها بعد تحديد تفضيل جديد وفقًا للتفضيل الذي قمت بتحديده.

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

لوحات Dreamweaver الشائعة

يمكنك التعامل مع عدد من اللوحات في Dreamweaver. بعض اللوحات الشائعة الاستخدام موصوفة هنا.

نظرة عامة على اللوحة Insert

تحتوي اللوحة Insert ‏(Window > Insert) على أزرار لإنشاء كائنات وإدراجها، مثل الجداول، والصور، والارتباطات. الأزرار منظمة في عدة فئات، يمكنك التبديل بينها عبر تحديد الفئة المرغوبة من القائمة المنسدلة في الأعلى.

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

تحتوي اللوحة Insert على الفئات التالية مرتبة بها:

يتيح لك إنشاء وإدراج عناصر HTML الأكثر استخداماً مثل علامات div والكائنات، مثل الصور والجداول.

يحتوي على أزرار لإنشاء النماذج وإدراج عناصر النماذج، مثل البحث والشهر وكلمة المرور.

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

يحتوي على مكونات Bootstrap لتوفير التنقل والحاويات والقوائم المنسدلة والمزيد التي يمكنك استخدامها في المشاريع المتجاوبة.

يحتوي على أزرار لبناء مواقع تستخدم jQuery Mobile.

يتيح لك إدراج عناصر jQuery UI مثل الأكورديون والمنزلقات والأزرار.

تتيح لك تجميع أزرار اللوحة Insert التي تستخدمها بكثرة وترتيبها في مكان واحد معروف.

إدراج كائن

لإدراج كائن باستخدام لوحة الإدراج:

تحرير تفضيلات لوحة Insert

إضافة عناصر أو حذفها أو إدارتها في الفئة Favorites باللوحة Insert

نظرة عامة على اللوحة Files

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

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

تساعد اللوحة Files أيضًا على إدارة الملفات ونقلها من وإلى خادم بعيد. 

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

CSS Designer

لوحة CSS Designer (Windows > CSS Designer) هي مفتش خصائص CSS يتيح لك إنشاء أنماط وملفات CSS "بصرياً" وتعيين الخصائص، إلى جانب استعلامات الوسائط.

يمكنك استخدام Ctrl/Cmd+ Z للتراجع أو Ctrl/Cmd + Y لإعادة كل التغييرات التي أجريتها في CSS Designer. سيتم تلقائيًا تفعيل التغييرات في طريقة العرض Live View وسيتم أيضًا تحديث ملف CSS المرتبط.‬ للتمكن من معرفة أن الملف ذي الصلة قد تغير، يتم تمييز علامة تبويب الملف المتأثر لفترة من الوقت (حوالي 8 ثوان).

تتكون لوحة CSS Designer من الأجزاء والخيارات التالية:

All يقوم بإدراج جميع استعلامات CSS واستعلامات الوسائط والمحددات المقترنة بالمستند الحالي. يمكنك ترشيح قواعد CSS المطلوبة وتعديل الخصائص. يمكنك أيضاً استخدام هذا الوضع لبدء إنشاء محددات أو استعلامات الوسائط.

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

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

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

Sources يسرد كل أوراق أنماط CSS المقترنة بالمستند. باستخدام هذا الجزء، يمكنك إنشاء CSS وإرفاقه بالمستند أو تعريف الأنماط داخل المستند.

@Media يسرد جميع استعلامات الوسائط في المصدر المحدد في الجزء Sources. إذا لم تقم بتحديد CSS محدد، فسيعرض هذا الجزء كل استعلامات الوسائط المقترنة بالمستند.

Selectors يدرج جميع المحددات في المصدر المحددة في جزء Sources. وإذا قمت أيضًا بتحديد استعلام وسائط، يقوم هذا الجزء بتقليل عناصر قائمة المحددات لاستعلام الوسائط هذا. في حالة عدم تحديد أي استعلامات وسائط، يعرض هذا الجزء جميع المحددات في المستند.

عندما تحدد Global في لوحة @Media، تُعرض جميع المحددات التي لم يتم تضمينها في استعلام وسائط من المصدر المحدد.

Properties لعرض الخصائص التي يمكن تعيينها للمحدد المخصص. لمزيد من المعلومات، راجع تعيين الخصائص.

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

ملاحظة: عند تحديد عنصر صفحة، يتم تحديد المُحدد المعين في الجزء Selectors. لعرض خصائص محدد معين، انقر على اسم ذلك المحدد في الجزء.

لعرض جميع المحددات، يمكنك اختيار All Sources في الجزء Sources. لعرض المحددات التي لا تنتمي إلى أي استعلام وسائط في المصدر المحدد، انقر على Global في جزء @Media.

نظرة عامة على الأدلة المرئية

يوفر Dreamweaver عدة أنواع من الأدلة المرئية لمساعدتك في تصميم المستندات وتوقع كيف ستظهر تقريباً في المتصفحات.يمكنك القيام بأي مما يلي:

• قم على الفور بمحاذاة النافذة Document إلى حجم النافذة المطلوب لمشاهدة كيفية احتواء العناصر بالصفحة.

• استخدم صورة تتبع كخلفية للصفحة لمساعدتك على تكرار التصميم الذي تم إنشاؤه في رسم أو تطبيق تحرير صور مثل ® Photoshop® أو Adobe® Fireworks®.

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

• استخدم الشبكة لتعيين مواضع العناصر ذات التعيين المطلق للمواضع (عناصر AP) وتغيير أحجامها.

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

التكبير أو التصغير داخل الصفحة

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

للتكبير أو التصغير في الصفحة، حدد View > Design View Options > Magnification، واختر أي من خيارات التكبير المتاحة.

يمكنك الاختيار من بين مجموعة من خيارات التكبير. يمكنك أيضاً اختيار:

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

تعيين التفضيلات General لبرنامج Dreamweaver

تعيين تفضيلات الخطوط للمستندات في برنامج Dreamweaver

يحدد ترميز المستند الشكل الذي يظهر عليه المستند في المستعرض. تتيح لك تفضيلات خطوط Dreamweaver عرض ترميز معين بالخط والحجم الذي تفضّله. ومع ذلك، تؤثر الخطوط التي تقوم بتحديدها في مربع الحوار Fonts Preferences، على كيفية ظهور الخطوط في برنامج Dreamweaver فقط، ولا تؤثر على كيفية ظهور المستند في المستعرض الخاص بالزائر. لتغيير كيفية ظهور الخطوط في المستعرض، يلزم تغيير النص باستخدام عارض الخصائص أو عبر تطبيق قاعدة CSS.

للحصول على معلومات حول تعيين ترميز افتراضي للمستندات الجديدة، راجع إنشاء المستندات وفتحها.

تخصيص ألوان التمييز في برنامج Dreamweaver

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

المزيد مثل هذا

• فتح الملفات ذات الصلة
• معلومات عامة حول التعليمات البرمجية في برنامج Dreamweaver
• تعيين تفضيلات التعليمات البرمجية
• عرض محتوى العنوان وتحريره
• استخدام الأدوات المساعدة المرئية للتخطيط
• صفحات Preview
• استخدام الملفات في اللوحة Files