مساحة عمل Dreamweaver

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

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

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

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

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

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

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

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

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

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

افتح أحد قوالب البادئ الموجودة في Dreamweaver. 

انقر فوق Home للرجوع إلى شاشة البدء.

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

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

يمكنك النقر فوق 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. 

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

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

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

‏‫عبارة عن بيئة تعليمات برمجية يدوية لكتابة التعليمات البرمجية بلغة HTML، ولغة JavaScript، وأي نوع آخر من التعليمات البرمجية، وتحريرها.‬

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

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

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

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

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

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

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

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

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

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

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

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

لتتالي نوافذ المستند: حدد 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 بأسفل النافذة Document.

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

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

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

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

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

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

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

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

هي معاينة تفاعلية تعرض حاليًا كائنات 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. الأزرار الموجودة على شريط الأدوات خاصة بطرق العرض وتظهر فقط إذا كانت تنطبق على طريقة العرض التي تعمل فيها. على سبيل المثال، إذا كنت تعمل في طريقة العرض Live فلا تكون خيارات خاصة بطريقة العرض Code مثل Format Source Code مرئية. 

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

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

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

لاستعادة أزرار شريط الأدوات الافتراضية، انقر فوق Restore Default في مربع حوار Customize Toolbar.

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

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

Tag selector

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

لوحة Output

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

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

(تتوفر في طريقة العرض Code فقط)

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

التبديل بين 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) فوق علامة تبويبها ثم حدد Close أو قم بإلغاء تحديدها من قائمة Window.
• لإضافة لوحة، حددها من قائمة Window، وقم بتثبيتها حيثما تريد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تخصيص 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:

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

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

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

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

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

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

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

CSS Designer

اللوحة CSS Designer ‏(Windows > CSS Designer) عبارة عن CSS Property Inspector يتيح لك إنشاء ملفات وأنماط 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 في طريقة العرض Code، يتم عرض جميع خصائص المحدد المميز.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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