2. قم بتعديل عنوان الملف بسرعة. في كثير من الأحيان عندما نقوم بإنشاء ملفات جديدة، غالبًا ما نتجاهل محتوى عنوان الملف. وعندما نحتاج إلى تعديله لاحقًا، يتعين علينا غالبًا فتح كل ملف وتعديله على حدة. في الواقع، يمكن إكمال هذا العمل بسهولة في نافذة الموقع. افتح إظهار عناوين الصفحات ضمن القائمة عرض في نافذة الموقع لتجعل الملفات الموجودة في نافذة الموقع تعرض رأس الملف بدلاً من اسم الملف الأصلي. رأس الملف الافتراضي هو Untitled Document، يمكننا النقر مرتين لتغيير النص الافتراضي إلى رأس الملف الذي نحتاجه. كما هو موضح في الصورة:
3. إنشاء خرائط الموقع بسرعة. نحتاج أحيانًا إلى إنشاء خريطة موقع تحتوي على جميع هياكل الملفات الخاصة بالموقع الحالي ولا يمكننا العثور على الطريقة المناسبة. يحتوي Dreamweaver نفسه على هذه الوظيفة. الطريقة هي كما يلي: افتح الأمر File—Save Site Map وأدخل اسم الملف المحفوظ في مربع الحوار المنبثق. سيقوم Dreamweaver تلقائيًا بإنشاء موقع بتنسيق .bmp أو .png في الدليل الجذر من الصورة الحالية.
2. التقنيات في مرحلة تخطيط الصفحة
لا يعد Dreamweaver أداة جيدة لإنشاء الصفحات فحسب، بل يمكنه أيضًا إجراء تنضيد وتخطيط دقيق للصفحة. في هذا القسم، نقدم العديد من تقنيات تخطيط الصفحة.
1. افتح النموذج المساعد. ويأمل الأصدقاء الذين قاموا بالتصميم بشكل خاص في تحديد موضع عناصر صفحة الويب بدقة، ويحبون إمكانية وضع كل عنصر بدقة وفقًا لرغباتهم. يمكن أن تساعد وظيفة Grid التي تأتي مع Dreamweaver في تحقيق هذا الأمل. قم بتنفيذ الأمر عرض - تحرير الشبكة لتشغيل مساعدة الإحداثيات. يمكنك اختيار عرض الشبكة أو النقطة، وتشغيل Snap to Grid. عند إدراج عناصر جديدة أو إضافتها في المستقبل، سيتم تحديد موضعها بدقة وفقًا لإعداداتك.
2. استخدم تقنيات صفحة تخطيط الجدول. يمكن أن يؤدي الاستخدام الصحيح لوظيفة الجدول في Dreamweaver إلى تحقيق غرض تجميل الصفحة بسهولة، وسأقدم بعض التقنيات أدناه.
1) قم بإنشاء حدود بحجم 1 بكسل. يشتكي بعض الأصدقاء من أن Dreamweaver لا يمكنه إنشاء حدود جدول أحادية البكسل. في الواقع، يمكنك إنشاء جدول أحادي البكسل باستخدام لوحة الخصائص الخاصة بالجدول بعناية. استخدم أولاً لوحة Object لإدراج جدول وتحديد عرض الجدول وارتفاعه وصفوفه وأعمدته. في هذا الوقت، تكون القيمة الافتراضية لـ CellPad وCellSpace وBorder للجدول المدرج في Dreamweaver هي 0. حدد حدود الجدول في لوحة الخصائص على 0، وCellPad على 5 (وهذا سيبقي 5 بكسل بين المحتوى الموجود في الخلية وحافة الخلية هو 1 (وهذا سيبقي 1 بكسل بين الخلايا) تباعد بينهما أغراض). قم بتعيين لون خلفية الجدول إلى لون داكن (مثل #999999)، وقم بتعيين لون خلفية الخلايا إلى لون فاتح (مثل #FFFFFF). فقط تصفحه ولاحظ التأثير.
2) استيراد جدول البيانات. نحتاج أحيانًا إلى استيراد بعض الجداول التي تم إنشاؤها في ملفات Excel إلى Dreamweaver. يمكننا حفظ ملفات Excel الأصلية كملفات نصية بتنسيق .txt محددة بعلامات جدولة. يؤدي تنفيذ الإدراج—التاريخ الجدولي في Dreamweaver إلى فتح النافذة التالية:
بعد إضافة كل معلمة، يمكن استيراد البيانات إلى جدول في Dreamweaver.
3) تنسيق الجدول. إذا سئمت من تعيين معلمات كل خلية بشكل متكرر، فيمكنك استخدام أمر تنسيق الجدول لتنسيق الجدول بسرعة. ويأتي هذا الأمر مزودًا بأنظمة ألوان متعددة للجدول سيتم تطبيق نظام الألوان تلقائيًا على الجدول الذي حددته. كما هو موضح في الصورة:
4. التبادل بين الجداول والطبقات. يحب بعض الأصدقاء ترتيب محتوى صفحاتهم بحرية، لكنهم لا يحبون طريقة عمل الجداول. في الواقع، يمكنك استخدام طبقات مرنة لترتيب محتوى صفحتك، ثم تحويلها إلى جدول عندما تكون راضيًا. حدد الطبقة التي تريد تحويلها وقم بتنفيذ الأمر تعديل—تحويل—الطبقات إلى جدول. كما هو موضح في الصورة:
5. قم بتحديث صفحات الإطارات المتعددة في نفس الوقت. نحن بحاجة إلى تحديث محتوى صفحتين أو أكثر من صفحات الإطارات الأخرى في نفس الوقت عند النقر فوق الارتباط. ويمكن تحقيق ذلك باستخدام سلوك Dreamweaver من خلال الخطوات التالية.
1) حدد نص أو صورة الرابط.
2) افتح لوحة السلوكيات (السلوكيات) وانقر فوق علامة الجمع لإضافة سلوك الانتقال إلى عنوان URL.
3) في مربع الحوار Go to URL، يتم عرض جميع نوافذ الإطارات الموجودة حاليًا، ونقوم بتحديد اسم النافذة على التوالي ويمكننا تعيين محتوى الملف بشكل فردي ليتم تحديثه في كل نافذة. سيضيف Dreamweaver علامة "*" بعد النافذة التي تم تعيين الملف الهدف فيها، للإشارة إلى أنه تم تعيين عنوان URL لنافذة الإطار هذه.
4) انقر فوق "موافق" بعد الانتهاء. عندما نضغط على هذا الرابط، سيتم تحديث محتويات النوافذ المتعددة في نفس الوقت.
3. المحتوى
كيفية تنظيم المحتوى بشكل أسرع وأكثر ملاءمة هو ما يريد كل صديق معرفته، ربما تعرف أو لا تعرف النصائح التالية، ولكن الشيء المهم هو أنه من خلال الاستخدام المستمر، ستكتشف مزاياها.
1. تحرير سريع للملصقات. بالنسبة للأصدقاء الذين هم على دراية بالرموز المكتوبة بخط اليد، غالبًا ما يحتاجون إلى التبديل إلى نافذة التعليمات البرمجية لإضافة بعض التعليمات البرمجية يدويًا. في الواقع، يمكنك إدراج علامات HTML المتنوعة بسرعة باستخدام Quick Tag Editor الخاص بـ Dreamweaver. تتمثل إحدى الطرق في النقر فوق لوحة الخصائص.
إدراج الأيقونة، والاختصار الآخر هو Ctrl+T، وستفتح كلتا الطريقتين تحريرًا سريعًا للعلامة، ويمكنك تحديد علامة كود المصدر المطلوبة مباشرةً من القائمة، كما هو موضح أدناه:
2. أضف حدود الصورة بسرعة. العديد من الصور المدرجة في صفحات الويب ليس لها حدود في بعض الأحيان نحتاج إلى إضافة حدود للصور، ولا نحتاج إلى فتح برنامج معالجة الصور لتحقيق ذلك. تتمثل إحدى الطرق في تحديد الصورة وتحديد الحدود مباشرة بمقدار 1 بكسل في لوحة الخصائص، مما سيضيف حدًا بمقدار 1 بكسل للصورة، أما الطريقة الأخرى فهي تحديد نمط يمكننا تحديد علامة img كنمط مباشرةً مع 1 بكسل من جميع الجوانب، فإن جميع الصور المدرجة في صفحة الويب سيكون لها نفس الحدود. كما هو موضح في الصورة:
3. استخدم السحب لإضافة الروابط. يدعم Dreamweaver سحب الروابط مباشرة من المستند إلى الملفات الأخرى في الموقع. يمكننا وضع نافذة الموقع ونافذة المستند جنبًا إلى جنب، كما هو موضح في الشكل:
ثم حدد النص الذي يجب ربطه في المستند، وافتح لوحة الخصائص، وقم بتوجيه الإشارة إلى الملف بعد شريط عنوان الارتباط إلى الملف الهدف في نافذة الموقع، كما هو موضح أدناه:
4. كيفية إضافة صوت الخلفية. يشعر العديد من الأصدقاء بالحيرة بشأن إدراج بعض ملفات صوت الوسائط المتعددة في Dreamweaver، في الواقع، الأمر بسيط للغاية. انقر فوق علامة التبويب الموجودة في الزاوية اليسرى السفلية من نافذة عمل Dreamweaver، وافتح لوحة Behavior، ثم انقر فوق علامة + في القائمة. نافذة السلوك المنبثقة، حدد تشغيل الصوت، وحدد يمكن إضافة ملفات الصوت التي تحتاجها. حدد شعار ملف الصوت في نافذة المستند وانقر فوق Parameters في لوحة الخصائص لتعيين عدد حلقات موسيقى الخلفية، وما إذا كان سيتم تشغيلها تلقائيًا أم لا، والخصائص الأخرى، كما هو موضح في الشكل:
4. التجميل
يعد تجميل عناصر صفحة الويب المختلفة مهمة تستغرق وقتًا طويلاً وليست فعالة دائمًا، وقد تساعدك النصائح التالية قليلاً.
1. إنشاء أنظمة الألوان بسرعة. غالبًا ما نحتاج إلى تعيين لون النص لكل حالة رابط. يشعر بعض الأصدقاء أن إحساسهم بالألوان ليس جيدًا جدًا، لذلك يبحثون دائمًا عن بعض أدلة مطابقة الألوان. في الواقع، يأتي Dreamweaver نفسه مزودًا بالفعل ببعض أنظمة الألوان. افتح أمر Commands-Set Color Scheme، ويمكننا أن نرى أن هناك العديد من مجموعات أنظمة الألوان، تحدد كل منها لون الخلفية ولون النص ولون كل رابط. الحالة ما عليك سوى تحديد نوع واحد فقط يكفي، انظر الصورة أدناه:
2. مهارات أسلوب الارتباط CSS. تحتوي الروابط النصية عمومًا على أربع حالات، وهي الرابط، والتمرير، والنشطة، والحالة التي تمت زيارتها. نحدد عادةً ألوانًا وأنماطًا مختلفة لكل حالة من حالات الروابط النصية، ومع ذلك، غالبًا ما يجد الأصدقاء أن الأنماط التي حددوها لا تبدو كما هو متوقع عند التصفح. السبب الرئيسي هو أن هناك متطلبات معينة لترتيب تعريف الارتباطات في ورقة الأنماط، والترتيب الصحيح هو: A:link—A:visited—A:hover. في الواقع، بالنسبة للأصدقاء العاديين، في كثير من الأحيان يريدون فقط تغيير حالة التمرير. الحيلة الصغيرة ليست تحديد نمط الارتباط وفقًا للطريقة المذكورة أعلاه، ولكن فقط تحديد أنماط حالة التمرير وa:. لا يوجد سوى حالة التمرير، والنمط يختلف عن الحالات الأخرى. طريقة التعديل كما هو موضح أدناه؛
3. قم بإنشاء نص متصل وتسطير بألوان مختلفة. في الواقع، لنص الرابط العادي وتسطير الرابط نفس اللون، يمكننا أيضًا استخدام سمة Border في ورقة الأنماط لاستبدال التسطير للروابط العادية نظرًا لأن Border يحتوي على المزيد من معلمات وأنماط التحكم، طالما أن لون Border و Our يمكن تحقيق الغرض من خلال تعريفات ألوان مختلفة للنص. على سبيل المثال، يمكننا تحديد النص باللون الأسود والتسطير باللون الأحمر في خيار Border، كما هو موضح أدناه؛
5. تقنيات تحسين الكفاءة
يحتوي Dreamweaver أيضًا على العديد من الأوامر التي يمكنها تحسين كفاءة العمل بشكل كبير، بما في ذلك إنشاء مشاريع المكتبة واستخدام القوالب ووظيفة لوحة المحفوظات ووظيفة البحث والاستبدال. أقدم هنا بعض الحيل الصغيرة لإثبات قوة هذه الأوامر.
1. نصائح لتنظيف ملفات Word. غالبًا ما نحتاج إلى تحويل بعض ملفات Word إلى ملفات HTML، ولكن نتيجة هذا التحويل هي أن ملفات HTML التي تم إنشاؤها كبيرة جدًا وتحتوي على الكثير من التعليمات البرمجية المتكررة. يمكن أن يؤدي استخدام وظائف Dreamweaver المتعددة إلى تنظيف التعليمات البرمجية غير المفيدة بسهولة. أولاً، افتح ملف HTML الذي تم إنشاؤه بواسطة Word وقم بتنفيذ أمر Clean Up Word HTML ضمن قائمة الأوامر، وسيقوم البرنامج تلقائيًا بتحديد إصدار Word الأصلي وإزالة التعليمات البرمجية غير المفيدة. ومع ذلك، لا يزال الملف في هذا الوقت يحتوي على الكثير من التعليمات البرمجية المتكررة، ويحتوي بشكل أساسي على عدد كبير من
العلامات والعلامات. يمكننا تنفيذ أمر تنظيف HTML ضمن قائمة الأوامر مرة أخرى، وتحديد خيار العلامة (العلامات) المحددة في القائمة المنبثقة. مربع الحوار لأعلى، ثم أدخل علامات الامتداد وp، مفصولة بمسافات. بعد تنفيذ الأمر، سيتم مسح جميع علامات الامتداد وp.
لكن في الوقت الحالي، تحتوي كل سمة صورة في الملف أيضًا على سمات مشابهة لـ v:shapes="_x0000_i1025"، وما زلنا بحاجة إلى مسح هذه السمات. افتح لوحة البحث والاستبدال وقم بتعيين قواعد الاستبدال كما هو موضح أدناه، بعد التنفيذ، سيتم مسح هذه السمات لجميع الصور. كما هو موضح في الصورة؛
2. استبدال عناوين الملفات بسرعة. لقد قدمت سابقًا أنه يمكنك استبدال عنوان الملف في نافذة الموقع، ولكن يمكنك فقط استبدال عنوان ملف واحد في كل مرة. يمكننا محاولة استخدام أمر البحث والاستبدال الذي تم تقديمه في الخطوة السابقة لاستبدال عناوين متعددة الملفات في وقت واحد. عادةً ما تكون عناوين الملفات التي تم إنشاؤها حديثًا هي مستند بدون عنوان. يمكنك فتح أمر "تحرير-بحث واستبدال" وإجراء الإعدادات التالية لاستبدال جميع الملفات الموجودة على الموقع الحالي والتي تحمل عنوان "مستند بدون عنوان" بالعناوين الخاصة بنا.
3. قم بتعيين تنسيق المستند الافتراضي. على الرغم من أن الطريقة المذكورة أعلاه سريعة، إلا أنه في كل مرة نقوم بإنشاء ملف جديد، يظل عنوان الملف الافتراضي هو "مستند بدون عنوان". لأنه عند إنشاء مستند جديد، سيقوم Dreamweaver باستدعاء صفحة افتراضية كتنسيق افتراضي. هذا الملف هو Dreamweaver 4ConfigurationTemplatesDefault.html، حتى نتمكن من تعيين بعض التنسيقات الموحدة في موقعنا، مثل لون الخلفية. وحجم الخط وعنوان الملف وما إلى ذلك، ثم احفظه بالكتابة فوق ملف Default.html أعلاه. عندما نقوم بإنشاء ملفات جديدة في المستقبل، سيقوم Dreamweaver تلقائيًا بتطبيق التنسيق الذي قمنا بتعيينه، مما قد يؤدي إلى تحسين كفاءة العمل بشكل كبير.
6. ما بعد الصيانة
حسنًا، بعد العديد من المقدمات المذكورة أعلاه، أتقننا بعض مهارات إنتاج صفحات الويب، ولكن هل صفحتك النهائية لن تحتوي على أخطاء بعد الآن؟ هل الروابط الخاصة بك كلها الروابط الصحيحة؟ هل تعمل صفحتك بشكل جيد عبر المتصفحات؟ هل لا يزال لديك الكثير من الملفات على موقعك والتي لم تعد بحاجة إليها؟ لا تزال هناك العديد من المشاكل المشابهة، وتعود هذه المشاكل إلى الاكتشاف والصيانة اللاحقة للموقع. نقدم هنا بعض تقنيات ما بعد الكشف.
1. كشف الارتباط. قم بتنفيذ أمر القائمة File—Check Links، وسيقوم Dreamweaver تلقائيًا باكتشاف جميع الارتباطات الموجودة في الموقع الحالي والكشف عن الارتباطات غير الصالحة، كما هو موضح أدناه:
سيؤدي النقر المزدوج على النتيجة المكتشفة إلى فتح الصفحة المقابلة تلقائيًا وتحديد موقع الرابط الخاطئ مباشرة، وهو أمر مناسب جدًا بالنسبة لنا لتعديل خطأ الرابط.
2. الكشف بسرعة عن الملفات غير المفيدة. تنفيذ أمر القائمة الموقع - التحقق من الروابط يمكن على مستوى الموقع تشغيل وظيفة الكشف عن ملفات الارتباط، ويمكننا أيضًا استخدام هذه الوظيفة للتحقق من الملفات غير المفيدة في الموقع وحذفها. ما عليك سوى تحديد الملفات المعزولة في المربع المنسدل العلوي، وسيتم إدراج جميع الملفات غير المفيدة في الموقع أدناه، ثم حددها جميعًا واضغط على مفتاح الحذف لحذفها.
