استخدم Dreamweaver لتحرير علامات صفحات الويب بسرعة
الكاتب：Eve Cole
وقت التحديث：2009-06-01 01:02:43
أتساءل عما إذا كانت لديك عادة كتابة التعليمات البرمجية يدويًا. على سبيل المثال: إذا كنت تريد إدراج جزء من كود CSS أو جزء من كود Javascript في خلية، فكيف يمكنك القيام بذلك بسرعة وسهولة؟
على الرغم من أن Dreamweaver قد زودنا بطريقة عرض التعليمات البرمجية، إلا أنه لا يزال يتعين علينا العثور عليها يدويًا والتبديل بينها. على الرغم من أنه يمكنك أيضًا استخدام عرض التعليمات البرمجية وعرض التحرير للتعايش، إلا أنه سيشغل نصف مساحة الشاشة، مما يجعل منطقة التحرير الصغيرة بالفعل أكثر ازدحامًا. هل هناك طريقة أفضل؟ الجواب هو نعم.
لنأخذ Dreamweaver 8 كمثال، بافتراض أن تخطيط لوحة Dreamweaver الخاص بكل شخص هو التخطيط الافتراضي. تحقق مما إذا كان هناك صف من التسميات الصغيرة أعلى لوحة الخصائص. (إذا كنت لا تستخدم MX، فستكون العلامة موجودة في شريط الحالة) على سبيل المثال: إذا قمت بإنشاء مستند HTML فارغ جديد، فيجب أن تكون العلامة الصغيرة أعلاه <body>. يرجى إلقاء نظرة على الصورة أدناه:
المكان المحدد بإطار أحمر في الصورة هو بطل الرواية لدينا اليوم. دعونا نلقي نظرة على "علامات الالتفاف" أولاً. اكتب بضع كلمات في الصفحة، وحددها، ثم حدد "التفاف العلامات" في قائمة النقر بزر الماوس الأيمن، وأدخل "<strong>" (باستثناء علامات الاقتباس) في مربع الحوار "التفاف العلامات" المنبثق، ثم اضغط على Enter. هل تم جعل النص المحدد مسبقًا غامقًا؟ انتقل إلى الكود المصدري وألق نظرة. هل النص المحدد محاط بعلامات <strong>؟ يمكنك محاولة إضافة بعض العلامات الأخرى، مثل: <a>، <p>. يمكنك أيضًا إدخال السمات مباشرة هنا. على سبيل المثال: <p style="color:#CC0000">. فيما يلي مجرد شرح عام. إذا كانت لديك أية أسئلة، فيرجى مراجعة تعليمات Dreamweaver.
دعونا نتحدث عن كيفية تطبيق محدد العلامات.
عندما ننقل المؤشر إلى النص الغامق الآن، سنجد أن هناك <strong> إضافية بعد <body>. وهذا يعني أن هناك علامة <strong> خارج النص حيث يوجد المؤشر، وعلامة <body> خارج العلامة <strong>. بعد ذلك، دعونا نضيف جدولًا آخر، ونحرك المؤشر إلى الجدول، ونرى بنية العلامات. أعتقد أن الأصدقاء الذين لديهم بعض المعرفة الأساسية بلغة HTML يجب أن يكونوا قادرين على فهمها بسهولة.
لنفترض أننا نريد الآن إدراج جدول واستخدام CSS لتحريك الجدول لأسفل بمقدار 10 بكسل. قم أولاً بإدراج جدول، ثم قم بتحريك المؤشر إلى داخل الجدول. في هذا الوقت، من المفترض أن تشاهد الكلمات <body><table><tr><td> في محدد العلامات. ثم انقر بزر الماوس الأيمن فوق تسمية الجدول وستظهر لك أربعة خيارات. حذف العلامات، وتحرير العلامات، وتعيين الفئات، وتعيين المعرفات.
حذف العلامة: حذف العلامة. (هناك بعض العلامات الخاصة التي لا يمكن حذفها. على سبيل المثال: <table>، <tr>، <td>، <body>...)
تحرير العلامات: إرفاق السمات بالعلامات، وتعديل السمات، وما إلى ذلك.
تعيين فئة: قم بإرفاق فئة بهذه العلامة. (أي فئات CSS)
معرف المجموعة: قم بإرفاق معرف بهذه العلامة. (أي معرف CSS)
هنا، نختار تحرير العلامة، ثم نضيف السمة style = "margin-top: 10px" في النهاية، وهي نفس الطريقة العادية لكتابة كود المصدر. ثم اضغط على دخول. اكتمل التحرير. إذا لم تتمكن من رؤية التأثير في Dreamweaver، فيرجى استخدام المتصفح للمعاينة.
هناك طريقة أخرى قد ترغب بها. حدد Window → Tag Inspector عند تحديد علامة، سيتم عرض جميع سمات العلامة المحددة حاليًا هنا. يمكنك أيضًا التعديل بسرعة هنا. السمات التي تم إدخالها هنا لا تحتاج إلى تضمين علامات الاقتباس. اضغط على Enter بعد التحرير للتأكيد.
وهنا نحكي لكم الطريقة فقط ونتمنى أن يستفيد منها الجميع.
