قم بإنشاء الملفات وفتحها وتحريرها وحفظها في Dreamweaver. قم بإنشاء القوالب وفتح الملفات ذات الصلة.

يعرض Dreamweaver بيئة مرنة للعمل باستخدام مجموعة متنوعة من مستندات الويب. بالإضافة إلى مستندات HTML، يمكنك إنشاء مجموعة متنوعة من المستندات المستندة إلى النصوص وفتحها - مثل JavaScript وPHP وأوراق الأنماط المتتالية (CSS).

يوفر Dreamweaver خيارات عديدة لإنشاء مستند جديد. يمكنك إنشاء أي من التالي:

  • مستند أو قالب فارغ جديد

  • مستند يعتمد على أحد مخططات الصفحات سابقة التصميم والذي يأتي مع Dreamweaver، بما في ذلك ما يزيد عن 30 مخططًا للصفحات المستندة إلى CSS.

  • مستند قائم على أحد القوالب الموجودة لديك

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

    يمكنك بسهولة تحديد خصائص المستند مثل علامات التعريف وعنوان المستند وألوان الخلفية والعديد من الخصائص الأخرى للصفحة في العرض Design أو العرض Code.

أنواع ملفات Dreamweaver

يمكنك العمل باستخدام مجموعة متنوعة من أنواع الملفات في Dreamweaver. نوع الملفات الرئيسي الذي ستعمل به هو HTML. تحتوي ملفات HTML––أو ملفات Hypertext Markup Language––على اللغة القائمة على العلامات والمسئولة عن عرض صفحات الويب في برامج التصفح. يمكنك حفظ ملفات HTML بالامتداد html أو htm. يحفظ Dreamweaver الملفات بالامتداد .html بشكل افتراضي.

يتيح لك Dreamweaver إنشاء صفحات ويب قائمة على HTML5 وتحريرها. تتوفر كذلك مخططات بداية لإنشاء صفحات HTML5 من الصفحات المؤقتة.

وفيما يلي بعض أنواع الملفات الأخرى الشائعة التي يمكنك استخدامها عند العمل باستخدام Dreamweaver:

CSS

امتداد الملفات Cascading Style Sheet هو .css. وتُستخدم في تنسيق محتوى HTML والتحكم في موضع العديد من عناصر الصفحة.

GIF

امتداد ملفات Graphics Interchange Format هو .gif. يٌعد GIF تنسيقًا شائعًا لرسوميات الويب المستخدمة في إنشاء الرسوم المتحركة والشعارات والرسوميات ذات المساحات والرسوم المتحركة الشفافة. يبلغ العدد الأقصى للألوان في GIF 256 لونًا.

JPEG

امتداد الملفات Joint Photographic Experts Group (سميت باسم المؤسسة التي أنشأتها) هو .jpg وغالبًا ما تُستخدم في الصور الفوتوغرافية أو الصور الغنية بالألوان. يُعد التنسيق JPEG الأفضل للصور الفوتوغرافية الرقمية أو المنقولة عبر المسح الضوئي، والصور التي تحتوي على بنيات نسيجية، والصور التي تحتوي على مقاطع انتقالية للتدرجات اللونية، وأي صور تتطلب عرضًا أكثر من 256 لونًا.

XML

امتداد الملفات Extensible Markup Language هو .xml. وهي تتضمن بيانات في هيئة خامة يمكن تنسيقها باستخدام XSL (Extensible Stylesheet Language).

مربع الحوار New Document

يعرض مربع حوار New Document جميع أنواع ملفات المستندات المدعومة، بما في ذلك PHP وXML وSVG.

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

ملاحظة:

وجميع تخطيطات البادئ المميزة مصممة لدعم مواقع الويب التفاعلية ومتوافقة مع لغة HTML-5.

إنشاء تخطيط HTML باستخدام صفحة فارغة

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

  1. حدد File > New.

  2. في الفئة New Document حدد نوع الصفحة التي تريد إنشاءها من العمود Document Type. على سبيل المثال، حدد HTML لإنشاء صفحة HTML عادية.

  3. حدد نوع مستند من القائمة المنبثقة DocType. في معظم الحالات، يمكنك استخدام التحديد الافتراضي، HTML5.

  4. حدد الخيارات الإضافية بناءً على نوع الصفحة التي تريد إنشاءها.

    • ملاحظة: حدد هذا الخيار إذا كنت تريد إنشاء صفحة ويب بسيطة بدون استخدام أي إطار عمل.
    • Bootstrap: قوالب Bootstrap هي قوالب تم تعريفها مسبقًا باستخدام إطار عمل Bootstrap. حدد هذا الخيار إذا كنت تريد إنشاء صفحات ويب تفاعلية باستخدام إطار عمل Bootstrap.

    ملاحظة:

    إذا كنت تخطط لإنشاء صفحات ويب تفاعلية، فحدد إطار عمل Bootstrap.

  5. وإذا كنت لا تستخدم إطار عمل، فسوف:

    • Document Title: أدخل عنوان المستند في هذا الحقل، ويضيفه Dreamweaver تلقائيًا لقسم <head> في المستند.
    • Doc Type: حدد نوع مستند من القائمة المنبثقة DocType. في معظم الحالات، يمكنك استخدام التحديد الافتراضي، HTML5.

    يؤدي تحديد أحد تعريفات أنواع مستندات XHTML من القائمة DocType إلى أن تكون صفحتك متوافقة مع XHTML. على سبيل المثال، يمكنك إنشاء مستند HTML متوافق مع XHTML بتحديد XHTML 1.0 Transitional أو XHTML 1.0 Strict من القائمة. XHTML (Extensible Hypertext Markup Language) عبارة عن إعادة تشكيل لـ HTML كتطبيق XML. بشكل عام، يمنحك استخدام XHTML مزايا XML بما يضمن التوافق مع مستندات الويب الأقدم والمستقبلية.

    ملاحظة:

    للاطلاع على المزيد من المعلومات عن XHTML، انظر موقع ويب World Wide Web Consortium (W3C) والذي يحتوي على مواصفات XHTML 1.1 - الوحدة النمطية القائمة على XHTML (www.w3.org/TR/xhtml11/) وXHTML 1.0 (www.w3c.org/TR/xhtml1/)بالإضافة إلى مواثق التحقق XHTML للملفات القائمة على الويب (http://validator.w3.org/) والملفات المحلية (http://validator.w3.org/file-upload.html).

    • Attach CSS: قم بإرفاق تخطيط CSS حالي بالصفحة.  لإجراء ذلك، انقر فوق رمز Attach Style Sheet  بجوار جزء Attach CSS File وحدد ورقة أنماط CSS.
    إنشاء صفحة HTML جديدة بدون استخدام إطار عمل
    إنشاء صفحة HTML جديدة بدون استخدام إطار عمل

    إذا كنت تريد إنشاء صفحة جديدة بناءً على تركيبات Photoshop فحدد Use Extract لإنشاء صفحتك من تركيبات Photoshop. 

    يؤدي تحديد هذا الخيار إلى فتح لوحة Extract حيث يمكنك تحميل ملف PSD وبدء إنشاء صفحة HTML.

  6. إذا كنت تريد إنشاء صفحة ويب تفاعلية باستخدام إطار عمل Bootstrap، فسوف:

    • Bootstrap CSS: اختر إنشاء Bootstrap CSS جديد، أو استخدام ملف CSS حالي. إذا كنت تستخدم ملف CSS حالي، فقم بتوفير المسار إلى الملف. تأكد أن ملف CSS داخل مجلد جذر موقعك.
    • Attach CSS: قم بإرفاق تخطيط CSS حالي بالصفحة.  لإجراء ذلك، انقر فوق رمز Attach Style Sheet  بجوار جزء Attach CSS File وحدد ورقة أنماط CSS.
    • تضمين تخطيط معد مسبقًا: حدد هذا الخيار إذا كان لديك تخطيط بالفعل. انقر فوق Customize لتحرير قيم الشبكة ونقاط الفاصل.
    إنشاء صفحة HTML جديدة باستخدام إطار عمل Bootstrap
    إنشاء صفحة HTML جديدة باستخدام إطار عمل Bootstrap

    إذا كنت تريد إنشاء صفحة جديدة بناءً على تركيبات Photoshop فحدد Use Extract لإنشاء صفحتك من تركيبات Photoshop. 

    يؤدي تحديد هذا الخيار إلى فتح لوحة Extract حيث يمكنك تحميل ملف PSD وبدء إنشاء صفحة HTML.

  7. انقر فوق Preferences إذا كنت تريد تعيين تفضيلات المستند الافتراضي، مثل نوع المستند، والتشفير، وامتداد الملف.

  8. انقر فوق الزر Create.

  9. احفظ المستند الجديد (File > Save).

  10. في مربع الحوار الذي يظهر، انتقل إلى المجلد الذي حفظت به الملف.

    ملاحظة:

    إنها لفكرة جيدة أن تحفظ ملفك في أحد مواقع Dreamweaver.

  11. اكتب اسمًا للملف، في المربع File Name.

    تجنب استخدام المسافات والأحرف الخاصة في أسماء الملفات والمجلدات ولا تبدأ أسماء الملفات برقم. وبخاصة، لا تستخدم الأحرف الخاصة (مثل é أو ç أو or ¥) أو علامات الترقيم (مثل علامة النقطتين أو الأشرطة المائلة أو النقط) في أسماء الملفات التي تنوي إدخالها في خادم بعيد، حيث أن العديد من الخوادم تقوم بتغيير هذه الأحرف أثناء رفع الملفات وهو ما قد يؤدي إلى قطع الروابط المؤدية إلى الملفات.

إنشاء قالب فارغ

يمكنك استخدام مربع الحوار New Document لإنشاء قوالب Dreamweaver. بشكل افتراضي، يتم حفظ القوالب في المجلد Templates الخاص بموقعك.

ملاحظة:

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

  1. حدد File > New.

  2. في مربع الحوار New Document، حدد الفئة Site Templates.

  3. حدد نوع مستند من القائمة المنبثقة DocType. في معظم الأحيان، ستريد ترك هذا الخيار على الاختيار الافتراضي، وهو XHTML 1.0 Transitional.

    يؤدي تحديد أحد تعريفات أنواع مستندات XHTML من القائمة DocType (DTD) إلى أن تكون صفحتك متوافقة مع XHTML. على سبيل المثال، يمكنك إنشاء مستند HTML متوافق مع XHTML بتحديد XHTML 1.0 Transitional أو XHTML 1.0 Strict من القائمة. XHTML (Extensible Hypertext Markup Language) عبارة عن إعادة تشكيل لـ HTML كتطبيق XML. بشكل عام، يمنحك استخدام XHTML مزايا XML بما يضمن التوافق مع مستندات الويب الأقدم والمستقبلية.

    ملاحظة:

    للاطلاع على المزيد من المعلومات عن XHTML، انظر موقع ويب World Wide Web Consortium (W3C) والذي يحتوي على مواصفات XHTML 1.1 - الوحدة النمطية القائمة على XHTML (www.w3.org/TR/xhtml11/) وXHTML 1.0 (www.w3c.org/TR/xhtml1/)بالإضافة إلى مواثق التحقق XHTML للملفات القائمة على الويب (http://validator.w3.org/) والملفات المحلية (http://validator.w3.org/file-upload.html).

  4. حدد Update page عندما يتغير القالب إذا كنت تريد تحديث الصفحة تلقائيًا عند تحرير القالب.

  5. انقر فوق الزر Create.

  6. احفظ المستند الجديد (File > Save). إذا لم تكن قد أضفت مساحات قابلة للتحرير إلى القالب، فسيظهر مربع حوار يفيدك بعدم وجود مساحات قابلة للتحرير في المستند. انقر فوق OK لإغلاق مربع الحوار.

  7. في مربع الحوار Save As، حدد موقعًا يمكنك حفظ القالب فيه.
  8. اكتب اسمًا للقالب الجديد، في المربع File Name. لن تحتاج إلى إلحاق ملحق ملف باسم القالب. عند النقر فوق Save، يتم إلحاق الامتداد .dwt بالقالب الجديد، الذي تم حفظه في المجلد Templates الخاص بموقعك.

    تجنب استخدام المسافات والأحرف الخاصة في أسماء الملفات والمجلدات ولا تبدأ أسماء الملفات برقم. وبخاصة، لا تستخدم الأحرف الخاصة (مثل é أو ç أو or ¥) أو علامات الترقيم (مثل علامة النقطتين أو الأشرطة المائلة أو النقط) في أسماء الملفات التي تنوي إدخالها في خادم بعيد، حيث أن العديد من الخوادم تقوم بتغيير هذه الأحرف أثناء رفع الملفات وهو ما قد يؤدي إلى قطع الروابط المؤدية إلى الملفات.

إنشاء صفحة استنادًا إلى قالب

يمكنك تحديد مستند جديد ومعاينته وإنشاءه باستخدام أحد القوالب الموجودة، أو قوالب بادئ Dreamweaver. يمكنك إما استخدام مربع الحوار New Document لتحديد قالب من أي من المواقع المحددة بواسطة Dreamweaver أو استخدام لوحة Assets لإنشاء مستند جديد من قالب حالي.

إنشاء مستند بناءً على قالب

  1. حدد File > New.

  2. في مربع الحوار New Document، حدد الفئة Page From Template.

  3. في العمود Site حدد موقع Dreamweaver الذي يحتوي على القالب الذي تريد استخدامه، ثم حدد قالب من القائمة الموجودة على اليمين.

  4. قم بإلغاء تحديد Update Page When Template Changes إذا كنت لا تريد تحديث هذه الصفحة في كل مرة تُجري تغييرات على القالب الذي تستند إليه هذه الصفحة.

  5. انقر فوق Preferences إذا كنت تريد تعيين تفضيلات المستند الافتراضي، مثل نوع المستند، والتشفير، وامتداد الملف.

  6. انقر فوق Get More Content إذا كنت تريد فتح Dreamweaver Exchange حيث يمكنك تنزيل مزيد من محتوى تصميم الصفحات.

  7. انقر فوق Create واحفظ المستند (File > Save).

إنشاء مستند من قالب في اللوحة Assets

  1. افتح لوحة Assets (Window > Assets)، إذا لم تكن مفتوحة بالفعل.

  2. في لوحة Assets، انقر فوق رمز Templates الموجود على اليسار لعرض قائمة القوالب في موقعك الحالي.

    ملاحظة:

    إذا قمت للتو بإنشاء القالب الذي تريد تطبيقه، فقد تحتاج إلى النقر فوق الزر Refresh لمشاهدته.

  3. انقر بزر الماوس الأيمن (في نظام التشغيل Windows) أو انقر بالزر Control (في نظام التشغيل Macintosh) فوق القالب الذي تريد تطبيقه، ثم حدد New From Template.

    يتم فتح المستند في النافذة Document.

  4. قم بحفظ المستند.

إنشاء صفحة استنادًا إلى قالب بادئ Dreamweaver

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

وعند إنشاء مستند يستند إلى قالب بادئ، ينشئ Dreamweaver نسخة من الملف كي لا تحتاج إلى الكتابة فوق ملفات البادئ.

يمكنك معاينة ملف العينة وقراءة وصف مختصر عن عناصر تصميم المستند في مربع الحوار New Document.

  1. حدد File > New.

  2. في مربع حوار New Document حدد الفئة Starter Templates.

    قوالب البادئ في Dreamweaver
    قوالب البادئ في Dreamweaver

    يمكنك مشاهدة تفاصيل الصفحة العينة والعرض على الجانب الأيمن من اللوحة أثناء تحديد خيارات مختلفة.

  3. انقر فوق الزر Create.

    يتم فتح المستند الجديد وجميع ملفاته في نافذة Document.

  4. احفظ المستند (File > Save).

إنشاء ملفات تعليمات برمجية جديدة لمختلف لغات التعليمات البرمجية

يمكنك إنشاء ملفات التعليمات البرمجية لعدد من لغات التعليمات البرمجية في Dreamweaver.

لمزيد من المعلومات حول دعم التعليمات البرمجية في Dreamweaver، راجع حول التعليمات البرمجية في برنامج Dreamweaver‬.

لإنشاء ملف تعليمات برمجية جديد في Dreamweaver، استخدم التعليمات التالية:

  1. حدد File > New Document.

  2. من Document Type، حدد ملف التعليمات البرمجية الذي تريد إنشاءه.

  3. حدد نوع المستند الذي تريد إنشاءه من العمود Document Type (مثل ملف PHP).

    إنشاء صفحة PHP جديدة
    إنشاء صفحة PHP جديدة

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

    على سبيل المثال، عند إنشاء ملف PHP يمكنك تحديد خيارات DocType وبعض خيارات CSS.

  5. انقر فوق الزر Create. ثم احفظ المستند (File > Save).

حفظ المستندات واسترجاعها

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

ملاحظة:

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

حفظ مستند

  1. قم بأحد الإجراءات التالية:
    • للكتابة فوق الإصدار الحالي على القرص، وحفظ أي تغييرات أجريتها، حدد File > Save.
    • لحفظ الملف في مجلد مختلف أو استخدام اسم مختلف، حدد File > Save As.
  2. في مربع الحوار Save As الذي يظهر، انتقل إلى المجلد الذي تريد حفظ الملف به.
  3. اكتب اسمًا للملف، في مربع النص File Name.

  4. انقر فوق Save لحفظ الملف.

حفظ كل المستندات المفتوحة

  1. حدد File > Save All.

  2. في حالة وجود أية مستندات غير محفوظة مفتوحة، سيتم عرض مربع الحوار Save As لكل مستند غير محفوظ.

    في مربع الحوار الذي يظهر، انتقل إلى المجلد الذي حفظت به الملف.

  3. اكتب اسمًا للملف، في المربع File Name، ثم انقر فوق Save.

الرجوع إلى آخر إصدار محفوظ من المستند

  1. حدد File > Revert.

    يسألك مربع الحوار عما إذا كنت تريد تجاهل التغييرات التي أجريتها والرجوع إلى الإصدار المحفوظ مسبقًا.

  2. انقر فوق Yes للرجوع إلى الإصدار السابق؛ وانقر فوق No للإبقاء على تغييراتك.

    ملاحظة:

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

تعيين النوع والترميز الافتراضيين للمستند‬ تفضيلات

إذا كان معظم الصفحات في موقعك من نوع ملفات معين (مثل JavaScript أو HTML أو PHP)، فيمكنك تعيين تفضيلات المستندات التي تعمل تلقائيًا على إنشاء مستندات جديدة من نوع الملفات المحدد هذا.

  1. حدد Edit > Preferences (في نظام التشغيل Windows) أو Dreamweaver > Preferences (في نظام التشغيل Macintosh).

    ملاحظة:

    كما يمكنك النقر فوق الزر Preferences في مربع الحوار New Document لتعيين تفضيلات المستند الجديد عند إنشاء مستند جديد.

  2. انقر فوق New Document من قائمة الفئات الموجودة على اليسار.

  3. قم بتعيين التفضيلات أو تغييرها حسب الحاجة، ثم انقر فوق OK لحفظها.

    المستند الافتراضي

    حدد نوع مستند سيُستخدم للصفحات التي تقوم بإنشائها.

    الملحق الافتراضي

    حدد ملحق الملف الذي تفضله (.htm أو .html) لصفحات HTML الجديدة التي تقوم بإنشائها.

    ملاحظة: هذا الخيار معطل لأنواع الملفات الأخرى.

    نوع المستند الافتراضي (DDT)

    حدد أحد تعريفات أنواع مستندات XHTML (DTD) إلى أن تكون صفحتك متوافقة مع XHTML. على سبيل المثال، يمكنك جعل أحد مستندات HTML متوافق مع XHTML عن طريق تحديد XHTML 1.0 Transitional أو XHTML 1.0 Strict من القائمة.

    الترميز الافتراضي

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

    إذا قمت بتحديد Unicode (UTF‑8) على أنه ترميز المستند، فإن ترميز الوحدة ليس ضروريًا لأن UTF‑8 يمكنه تمثيل كل الحروف بأمان. عند تحديد ترميز آخر للمستند، فقد يكون ترميز الوحدة ضروريًا لتمثيل بعض الأحرف. لمزيد من المعلومات حول وحدات الأحرف، انظر www.w3.org/TR/REC-html40/sgml/entities.html.

    إذا قمت بتحديد Unicode (UTF‑8) على أنه الترميز الافتراضي، فيمكنك تضمين Byte Order Mark (BOM) في المستند عن طريق تحديد الخيار Include Unicode Signature (BOM).

    BOM عبارة عن 2-4 بايت في بداية الملفات النصية مهمتها هو التعرف على الملف كـ Unicode بالإضافة إلى ترتيب البايت للبايت التالية. ونظرًا لأن ترميز UTF‑8 لا يحتوي على أي ترتيب للبايت، فإن إضافة UTF‑8 BOM يعد اختياريًا. ولكنه يكون مطلوبًا مع UTF‑16 وUTF‑32.

    Unicode Normalization Form

    حدد واحدًا من هذه الخيارات، إذا قمت بتحديد Unicode (UTF-8) على أنه ترميز افتراضي.

    يوجد أربعة نماذج لمعايرة الترميز. أكثرهم أهمية هو نموذج المعايرة C نظرًا لأنه الأكثر شيوعًا واستخدامًا في طراز الأحرف لشبكة الويب العالمية. توفر Adobe نماذج معايرة الترميز الثلاثة الأخرى لإكمالها.

    مربع الحوار Show New Document على Control+N

    قم بإلغاء تحديد هذا الخيار (على "Command+N" لأجهزة Macintosh) لإنشاء مستند لنوع المستند الافتراضي تلقائيًا عند استخدام مفتاح الأوامر.

    في Unicode، توجد أحرف متشابهة بالنظر لكن يتم تخزينها في المستند بعدة طرق. على سبيل المثال، يمكن تمثيل "ë" ‏(e‑نقطتان) كحرف واحد، "e‑نقطتان"، أو كحرفين، "حرف e اللاتيني العادي" + "علامة umlaut الرابطة". يستخدم حرف Unicode الرابط مع الحرف السابق، وبذلك تظهر النقطتان فوق "حرف e اللاتيني". وينتج عن كلا النموذجين نفس أسلوب الطباعة المرئية، ولكن يتمثل الاختلاف فيما يتم حفظه في الملف مع كل نموذج.

    المعايرة هي عملية التأكد من إمكانية حفظ كل الأحرف بأشكال مختلفة باستخدام نفس الشكل. أي يتم حفظ كافة الأحرف "ë" في أي مستند كحرف "e‑نقطتان" واحد أو في صورة "e" + "علامة umlaut الرابطة"، وليس بالنموذجين في مستند واحد.

    لمزيد من المعلومات حول تسوية Unicode والنماذج الخاصة التي يمكن استخدامها، انظر موقع ويب Unicode على www.unicode.org/reports/tr15.

فتح المستندات الموجودة وتحريرها

يمكنك فتح صفحة ويب موجودة أو مستند قائم على النص، سواء تم إنشاؤه في Dreamweaver أم لا، وتحريره إما في طريق العرض Design أو طريق العرض Code.

إذا كانت الصفحة التي تفتحها هي ملف Microsoft Word تم حفظه كمستند HTML، فيمكنك استخدام Tools > Clean up Word HTML لإزالة علامات التمييز الخارجية التي سيدرجها برنامج Word إلى ملفات HTML.

لتنظيف HTML أو XHTML الذي لم يتم إنشاؤه بواسطة Microsoft Word، فاستخدم Tools > Clean up HTML. لمزيد من المعلومات، راجع تنظيف ملفات Microsoft Word HTML.

يمكنك أيضًا فتح ملفات نصية بخلاف HTML، مثل ملفات JavaScript أو ملفات XML أو أوراق أنماط CSS أو الملفات النصية التي تم حفظها بواسطة برامج معالجة النصوص أو المحررات النصية.

  1. حدد File > Open.

    ملاحظة:

    يمكنك أيضًا استخدام اللوحة Files لفتح الملفات.

  2. انتقل إلى الملف الذي تريد فتحه وحدده.

    ملاحظة:

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

  3. انقر فوق Open.

    يتم فتح المستند في النافذة Document. بشكل افتراضي، يتم فتح JavaScript، والنص، وCSS Style Sheets في طريقة العرض Code. يمكنك تحديث المستند أثناء العمل في Dreamweaver، وحفظ التغييرات في الملف.

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

لمزيد من المعلومات حول الملفات الديناميكية المرتبطة، راجع فتح الملفات المرتبطة ديناميكيًا‬‏‫.

ملاحظة:

عند العمل باستخدام ملفات HTML فإذا كنت تريد عمل تغييرات سريعة على ملفات CSS أو JavaScript أو PHP المرتبطة بدون الحاجة إلى التنقل إلى هذا الملف، فيمكنك استخدام Quick Edit. لمزيد من المعلومات، راجع Quick Edit.

بشكل افتراضي، يعرض Dreamweaver أسماء الملفات المرتبطة بالمستند الرئيسي في شريط أدوات Related Files الموجود أسفل عنوان المستند الرئيسي. يتبع ترتيب الأزرار في شريط الأدوات ترتيب ارتباطات الملفات ذات الصلة الموجودة في المستند الرئيسي.

ملاحظة:

إذا كان أحد الملفات المرتبطة مفقودًا، فسيستمر Dreamweaver في عرض الزر المقابل له في شريط أدوات Related Files. ومع ذلك؛ فإذا قمت بالنقر فوق هذا الزر، فلن يعرض Dreamweaver أي عنصر.

يدعم Dreamweaver أنواع الملفات ذات الصلة التالية:

  • ملفات البرمجة النصية من جانب العميل
  • يتضمن جانب العميل
  • أوراق أنماط CSS الخارجية (بما في ذلك أوراق الأنماط المتداخلة)

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

  • في شريط أدوات Related Files الموجود في الجزء العلوي من المستند، انقر فوق اسم الملف الخاص بالملف المرتبط الذي تريد فتحه.

  • في شريط أدوات Related Files، انقر بزر الماوس الأيمن فوق اسم الملف الخاص بالملف المرتبط الذي تريد فتحه، ثم حدد Open as Separate File من قائمة السياق. عند فتح ملف ذي صلة عن طريق هذا الأسلوب، لا يظل المستند الرئيسي مرئيًا في الوقت نفسه.

  1. ضع نقطة الإدخال على خط معين أو في منطقة تعلم أنها متأثرة بملف ذي صلة.

  2. انتظر حتى ظهور مؤشر Code Navigator، ثم انقر فوقه لفتح Code Navigator.

  3. قم بالتحويم فوق العناصر الموجودة في Code Navigator لمعرفة مزيد من المعلومات عنها. على سبيل المثال، إذا كنت تريد تغيير خاصية لون معينة لـCSS، ولكن لا تعلم القاعدة التي تقوم عليها تلك الخاصية، فيمكنك العثور على الخاصية المناسبة من خلال التحويم فوق القواعد المتوفرة في Code Navigator.

  4. انقر فوق العنصر الذي تهتم به لفتح الملف المطابق ذي الصلة.

الرجوع إلى التعليمة البرمجية المصدر الخاصة بالمستند الرئيسي

  1. انقر فوق الزر Source Code في شريط أدوات Related Files.

عند فتح ملف مرتبط من طريقة عرض Design أو طرق عرض Code و Design(طريقة عرض Split)، يتم عرض الملف المرتبط في طريقة عرض Split.

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

وإذا كنت تريد عرض الملفات المرتبطة في طريقة عرض Code فقط، فحدد Code في أعلى شريط الأدوات.

ملاحظة:

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

ملاحظة:

يشير Code View في خيار العرض إلى التعليمة البرمجية المصدر الخاصة بالمستند الرئيسي. على سبيل المثال، إذا قمت بتحديد View > Code View في الأعلى، فسيعرض Dreamweaver التعليمة البرمجية المصدر للمستند الرئيسي في النصف العلوي من النافذة Document. إذا قمت بتحديد View > Code View on Left على اليسار، فسيعرض Dreamweaver التعليمة البرمجية المصدر للمستند الرئيسي في الجانب الأيسر من النافذة Document.

وعندما تفتح أحد ملفات HTML بشكل افتراضي، يعرض Dreamweaver الملفات المرتبطة في علامات تبويب منفصلة. وإذا كنت تريد تعطيل الوظائف، فيمكنك تعطيلها باستخدام لوحة Preferences.

  1. حدد Edit > Preferences (في نظام التشغيل Windows) أو Dreamweaver > Preferences (في نظام التشغيل Macintosh).

  2. في الفئة General، قم بإلغاء تحديد Enable Related Files.

تعمل الميزة Dynamically-Related Files على تمديد وظائف الميزة Related Files من خلال تمكينك من مشاهدة الملفات المرتبطة بالصفحات الديناميكية في شريط أدوات Related Files. بصفة خاصة، تسمح ميزة Dynamically-Related Files برؤية المحتويات الديناميكية العديدة الضرورية لإنشاء التعليمات البرمجية أثناء وقت التشغيل لأطر عمل PHP Content Management System (CMS) الشائعة ومفتوحة المصدر مثل WordPress وDrupal وJoomla!

لاستخدام ميزة Dynamically-Related Files، يجب أن يكون لديك وصول إلى خادم تطبيق PHP المحلي أو البعيد الذي يقوم بتشغيل إطار عمل WordPress أو Drupal أو Joomla! من بين الأساليب الشائعة الخاصة باختبار الصفحات إنشاء خادم تطبيق PHP للمضيف المحلي واختبار الصفحات محليًا.

قبل اختبار الصفحات، لا بد من إجراء الخطوات التالية:

  • قم بإنشاء موقع Dreamweaver وتأكد من أنك قمت بملء بيانات مربع النص Web URL في مربع الحوار Site Setup.

  • قم بإنشاء خادم تطبيق PHP.

    ملاحظة: يجب أن يكون الخادم قيد التشغيل قبل محاولة العمل باستخدام Dynamically-Related Files في Dreamweaver.

  • قم بتثبيت WordPress أو Drupal أو Joomla! على خادم التطبيق. لمزيد من المعلومات، راجع:

  • في Dreamweaver، قم بتحديد مجلد محلي حيث ستقوم بتنزيل ملفات CMS وتحريرها.

  • تحديد موقع ملفات WordPress أو Drupal أو Joomla المثبّتة باعتبارها مجلد الاختبار البعيد الخاص بك .

  • قم بتنزيل ملفات CMS من المجلد البعيد.

عند فتح صفحة مرتبطة بـ Dynamically-Related Files، يمكن لـ Dreamweaver اكتشاف الملفات تلقائيًا أو السماح لك باكتشاف الملفات يدويًا (الأمر الذي يمكنك القيام به من خلال النقر فوق ارتباط في شريط Info أعلى الصفحة). يعد الاكتشاف اليدوي هو الإعداد الافتراضي.

  1. اختر Edit > Preferences (في نظام التشغيلWindows) أو Dreamweaver > Preferences (في نظام التشغيلMacintosh OS).

  2. في الفئة General، تأكد من تحديد الخيار Enable Related Files.

  3. حدد Manually أو Automatically من القائمة المنبثقة Dynamically-Related Files. يمكنك أيضًا تعطيل عملية الاكتشاف بشكل تام من خلال تحديد Disabled.

  1. افتح صفحة لها Dynamically-Related Files مرتبطة بها - على سبيل المثال، صفحة الجذر الفرعي index.php الخاصة بموقع WordPress أو Drupal أو Joomla!.

  2. في حالة تعيين اكتشاف Dynamically-Related Files إلى يدوي (وهو الإعداد الافتراضي)، فانقر فوق الارتباط Discover في شريط Info الذي يظهر في الجزء العلوي من الصفحة بالنافذة Document.

    وإذا كان قد تم تمكين الإعداد التلقائي لاكتشاف Dynamically-Related Files، فستظهر قائمة من Dynamically-Related Files في شريط الأدوات Related Files.

ويكون ترتيب Related وDynamically-Related Files في شريط أدوات Related Files على النحو التالي:

  • الملفات ذات الصلة الثابتة (الملفات ذات الصلة التي لا تتطلب أي نوع من المعالجة الديناميكية)
  • الملفات ذات الصلة الخارجية (ملفات .css و.js) المرفقة بخادم مسار ديناميكي يتضمن ملفات
  • خادم مسار ديناميكي يتضمن ملفات (ملفات .php و.inc و.module)

نظرًا لأن ملفات Related Files وDynamically-Related Files يمكن أن تكون عديدة غالبًا، فإن Dreamweaver يسمح لك بتصفية Related Files بحيث يمكنك أن تحدد بدقة مكان الملفات التي تريد العمل معها.

  1. افتح الصفحة المحتوية على Related Files المرتبطة بها.

  2. اكتشف Dynamically-Related Files، إذا كان ضروريًا.

  3. انقر فوق رمز Filter Related Files في الجزء العلوي من شريط أدوات Related Files.

  4. حدد أنواع الملفات التي تريد مشاهدتها في شريط أدوات Related Files. بشكل افتراضي، يحدد Dreamweaver جميع Related Files.

  5. لإنشاء مرشح مخصص، انقر فوق رمز Filter Related Files واختر Custom Filter.

    لا يسمح مربع الحوار Custom Filter إلا بترشيح أسماء الملفات بالضبط (style.css)، وامتدادات الملفات (.php)، وتعبيرات أحرف البدل باستخدام النجوم (*القائمة*). يمكنك التصفية باستخدام تعبيرات أحرف بدل متعددة من خلال فصل كل تعبير باستخدام الفاصلة المنقوطة (على سبيل المثال، style.css;*.js;*tpl.php).

ملاحظة:

لا يتم الاحتفاظ بإعدادات عامل التصفية بمجرد أن تغلق الملف.

تنظيف ملفات HTML لبرنامج Microsoft Word

يمكنك فتح المستندات المحفوظة بواسطة Microsoft Word (مثل Microsoft Word 97 أو أحدث) كملفات HTML، ثم استخدام Tools > Clean Up Word HTML لإزالة تعليمة HTML البرمجية الغريبة التي تم إنشاؤها بواسطة Word.

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

احتفظ بنسخة من ملف Word الأصلي (.doc) كنسخة احتياطية، لأنك قد لا تتمكن من إعادة فتح مستند HTML في Word بمجرد تنظيف ملف HTML.

ملاحظة:

لتنظيف HTML أو XHTML الذي لم يتم إنشاؤه بواسطة Microsoft Word، فاستخدم الأمر Tools > Clean up HTML.

  1. قم بحفظ مستند Microsoft Word كملف HTML.

    ملاحظة:

    في نظام تشغيل Windows، أغلق الملف في Word لتجنب حدوث انتهاك في المشاركة.

  2. افتح ملف HTML في Dreamweaver.

    لعرض تعليمة HTML البرمجية التي أنشأهاWord، قم بالتبديل إلى طريقة العرض Code (View > Code).

  3. حدد Tools > Clean Up Word HTML.

    ملاحظة:

    إذا تعذر على Dreamweaver تحديد إصدار Word الذي تم استخدامه لحفظ الملف، فحدد الإصدار الصحيح من القائمة المنبثقة.

  4. حدد (أو ألغِ تحديد) خيارات التنظيف. يتم حفظ التفضيلات التي تدخلها كإعدادات تنظيف افتراضية.

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

    خيارات تنظيف Microsoft Word HTML
    خيارات تنظيف Microsoft Word HTML

    Remove All Word Specific Markup

    إزالة جميع تعليمات HTML البرمجية الخاصة ببرنامج Microsoft Word، بما في ذلك XML من علامات HTML وبيانات تعريف Word المخصصة وعلامات الارتباط الموجودة في رأس المستند وعلامات Word XML والعلامات الشرطية ومحتوياتها والفقرات الفارغة والهوامش المتخذة من الأنماط. يمكنك تحديد كل من هذه الخيارات على حدة باستخدام علامة التبويب Detailed.

    Clean Up CSS

    إزالة جميع علامات CSS الخاصة ببرنامج Word، بما في ذلك أنماط CSS المضمنة قدر الإمكان (حيث يكون للنمط الرئيسي نفس خصائص النمط) وسمات النمط التي تبدأ بالمقطع "mso” وإعلانات أنماط CSS وسمات أنماط CSS المأخوذة من الجداول وجميع تعريفات الأنماط غير المستخدمة من الرأس. يمكنك تخصيص هذا الخيار بشكل أكبر باستخدام علامة التبويب Detailed.

    Clean Up <font> Tags

    إزالة علامات HTML، وتحويل النص الأساسي الافتراضي إلى نص بحجم 2 HTML.

    Fix Invalidly Nested Tags

    إزالة علامات تمييز الخطوط التي تم إدخالها بواسطة Word خارج الفقرة والرأس (في مستوى الحظر).

    Apply Source Formatting

    يعمل على تطبيق خيارات تنسيق المصدر التي تحددها في تفضيلات تنسيق HTML والملف SourceFormat.txt على المستند.

    Show Log On Completion

    لعرض مربع تنبيه يحتوي على تفاصيل حول التغييرات التي أُجريت على المستند بمجرد انتهاء التنظيف.

  5. انقر فوق OK، أو انقر فوق علامة التبويب Detailed إذا كنت تريد إجراء مزيد من التخصيص على خيارات Remove All Word Specific Markup وClean Up CSS options، ثم انقر فوق OK.

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

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