Skip to main content

كيفية كتابة كود HTML في دريمويفر - ما وراء سوغ

23 كتابة الكود HTML & CSS (قد 2025)

23 كتابة الكود HTML & CSS (قد 2025)
Anonim

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

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

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

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

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

  • اضغط على انشق، مزق زر (بين الشفرة و التصميم).
  • في ال رأي القائمة ، حدد كود والتصميم.

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

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

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

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

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

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

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

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

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

  • سمات HTML
  • فئة واسم التعريف
  • خصائص CSS

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

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

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

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

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

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

  1. حدد القسم الذي تريد إخفاءه.
  2. في ال تصحيح القائمة ، اختر تصغير التحديد من طي الرمز الفرعية القائمة

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

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

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

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