كتابة كود HTML في Dreamweaver

ليس عليك استخدام WYSIWYG فقط

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

كيفية الحصول على عرض Dreamweaver Code

إذا لم تستخدم Dreamweaver كمحرر HTML مطلقًا ، فقد لا تلاحظ أبدًا الأزرار الثلاثة في أعلى الصفحة: "Code" و "Split" و "Design". يبدأ Dreamweaver افتراضيًا في "طريقة عرض التصميم" أو وضع WYSIWYG. ولكن من السهل التبديل إلى عرض كود HTML وتحريره. فقط اضغط على زر "الرمز". أو انتقل إلى قائمة "عرض" وحدد "الرمز".

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

لعرض كلاهما في آن واحد ، إما:

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

خيارات عرض الشفرة

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

عندما تكون في عرض الشفرة ، يوجد زر "خيارات العرض" في شريط الأدوات. يمكنك أيضًا عرض الخيارات من خلال الانتقال إلى قائمة "عرض" واختيار "خيارات عرض الشفرة". الخيارات هي:

تحرير كود HTML في Dreamweaver عرض الكود

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

إذا كنت مستخدمًا جديدًا لـ HTML ، فيمكنك التمرير عبر قائمة علامات HTML واختيار مجموعات مختلفة لترى ما يفعلون. سيستمر Dreamweaver في مطالبتك بالظهور بمجرد كتابة علامة. على سبيل المثال ، إذا كتبت " HTML ، مع علامات أخرى تبدأ بالأناطق التالية. إذا تابعت كتابة الحرف "m" ، فسيقوم Dreamweaver بتضييقه إلى العلامة .

لكن تلميحات التعليمات البرمجية لا تنتهي عند العلامات. يمكنك استخدام تلميحات التعليمات البرمجية لإدراجها:

إذا لم تظهر تلميحات التعليمات البرمجية ، فيمكنك الضغط على Ctrl-spacebar (في Windows) أو Cmd-spacebar (في نظام التشغيل Macintosh) لحملهم على العرض. قد يكون السبب الأكثر شيوعًا وراء عدم ظهور تلميحات التعليمات البرمجية هو التبديل إلى نافذة أخرى قبل إنهاء علامتك. نظرًا لأن Dreamweaver يقوم بالضغط على كتابة الحرف <، إذا تركت النافذة والعودة ، فسيتعين عليك إعادة تشغيل تلميحات التعليمات البرمجية.

يمكنك إيقاف تشغيل قائمة تلميحات التعليمات البرمجية عن طريق الضغط على مفتاح الهروب.

بمجرد كتابة علامة HTML الافتتاحية ، ستحتاج إلى إغلاقها. يقوم Dreamweaver بذلك بطريقة طبيعية. إذا قمت بكتابة الخيار "إغلاق العلامات التي تناسب احتياجاتك.

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

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

الميزة التي لا يعرفها الكثير من مُشفِّري HTML أو لا تستخدم هي القدرة على طي كود HTML. هذا لا يؤدي إلى إزالة العلامات من المستند ، ولكن عليك فقط إزالتها من العرض بحيث لا تشتت انتباهك عما تعمل عليه. لطي كودك:

  1. حدد القسم الذي تريد إخفاءه
  2. في قائمة "تحرير" ، اختر "Collapse Selection" من القائمة الفرعية "Code Collapse"

أسهل طريقة هي تحديد الرمز ثم النقر على أيقونة طي التعليمة البرمجية التي تظهر في البالوعة. يمكنك أيضًا النقر بزر الماوس الأيمن على الشفرة المحددة واختيار "Collapse Selection".

إذا كنت تريد إخفاء كل شيء ما عدا ما يتم تمييزه ، فاختر "Collapse Outside Selection" في أي من الطرق المذكورة أعلاه.

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

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