تبادل الخبرات: مهارات الإنتاج العملية في تصميم الويب

1. استخدم الأنماط بمرونة.

يعرف مستخدمو الإنترنت الذين هم على دراية بتصميم الويب أن هناك طرقًا عديدة لاستدعاء النمط. يمكننا النقر بزر الماوس الأيمن وتحديد Custon Style لاستدعاء معيار النمط شريط الحالة لاستدعاء النمط. على الرغم من أن التأثيرات التي يتم تحقيقها بطرق مختلفة تبدو هي نفسها، إلا أن رموز HTML التي تم إنشاؤها بالفعل مختلفة تمامًا. على سبيل المثال، سيؤدي استخدام Custon Style لاستدعاء معيار النمط إلى إنشاء علامة <span> في رمز صفحة الويب. سيؤدي وجود عدد كبير جدًا من هذه العلامات إلى جعل الملف منتفخًا للغاية ويؤثر على سرعة تحليل المتصفح، لذا يجب أن نحاول استخدام العناصر الموجودة في الملف. شريط الحالة للاتصال بالنمط.

2. الاستفادة الكاملة من أمر تنسيق الجدول

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

3. الارتباط بصفحتي ويب في نفس الوقت

نعلم جميعًا أن الارتباط التشعبي يمكنه الاتصال بصفحة واحدة فقط في كل مرة. إذا أردنا فتح المستند في صفحات إطارات مختلفة مرة واحدة، فيمكننا استخدام سلوك JavaScript "Go To URL". افتح صفحة ويب ذات إطار، وحدد النص أو الصور، ثم حدد "Go To URL" من لوحة Actions. سنلاحظ أن Dreamweaver يعرض جميع الإطارات المتوفرة في مربع الحوار "Go To URL". حدد أحد الإطارات التي نريد الارتباط بها وأدخل عنوان URL المقابل، ثم حدد إطارًا آخر وأدخل عنوان URL آخر.

4. لا تعطي الملف اسمًا صينيًا.

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

5. ضبط دقة الخط بذكاء

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

6. قم بإخفاء العلامات بشكل ذكي

إذا تم إدراج عنصر غير مرئي في صفحة ويب، فسيقوم Dreamweaver تلقائيًا بإضافة علامة عنصر مقابلة إلى الصفحة حتى نتمكن من تحديد العنصر غير المرئي. لكن هذا ليس بالأمر الجيد دائمًا، على سبيل المثال، إذا قمنا بإدراج جدول في الصف الأول من الصفحة يحتوي على طبقات عديدة، فسنجد أن الجدول يتراجع تلقائيًا إلى الصف الأول من الصفحة نظرًا لوجود عدد كبير جدًا من عناصر الطبقة. العلامات مرتبة في الصف الأول والسطر الثاني، على الرغم من أنها لا تؤثر على التأثير عند التصفح، إلا أنها ستعيق عملنا بالفعل. لذلك عندما نشعر أن تسمية العنصر تطفلية، فإننا ببساطة نحظرها. تتمثل الطريقة في الضغط على Ctrl + U لفتح لوحة التفضيلات، وتحديد Invisibel Elements في الفئة، وستظهر جميع تسميات العناصر على الجانب الأيمن من اللوحة. وطالما قمت بإزالة علامة الاختيار الموجودة أمام علامة العنصر غير الضرورية، فسيتم ضمان عدم ظهورها مرة أخرى في المستقبل.

7. استخدم تقنيات السحب والإفلات بشكل جيد

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

8. ضبط وقت التحديث تلقائيًا

نحن نعلم أنه إذا كانت صفحة الويب ترغب في الحصول على المزيد من الزيارات المتكررة، فمن المهم جدًا تحديثها باستمرار. ولكن بالنسبة لصفحات الويب الشخصية الخاصة بنا، قد لا يكون من السهل تحديثها في الوقت المناسب كل يوم. لذلك، نأمل أن يتم تحديث صفحة الويب تلقائيًا. سيوفر المؤلف أدناه رمز مصدر يمكنه تحديث وقت التعديل تلقائيًا. نحتاج فقط إلى إضافة رمز المصدر هذا إلى... ＜ /BODY ＞ لتحقيق الغرض تحديث الوقت:

＜ Script Language="JavaScript"> ＜/script>؛ والثاني هو استخدام الماوس للنقر فوق Text/Custom Style/Edit/Style Sheet/New/Redefine HTML Tag في Dreamweaver، وتحديد علامة منها، ثم حدد لا شيء في الزخرفة، وأخيرا انقر فوق موافق، وبذلك تكون قد انتهيت.

9. نسخ النص بذكاء

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

10. الاستفادة من مفاتيح الاختصار

لتحسين كفاءة العمليات، يمكننا استخدام مفاتيح الاختصار في Dreamweaver، مثل استخدام Ctrl-B أو Ctrl-I لتطبيق تنسيق غامق أو مائل على النص اختصارات لوحة المفاتيح التالية لتحديد النص يطبق تنسيق HTML: Ctrl-0: غير منسق Ctrl-T: الفقرة Ctrl-1: العنوان 1 Ctrl-2: العنوان 2 Ctrl-3: العنوان 3 Ctrl-4: العنوان 4 Ctrl-5: العنوان 5 Ctrl-6 : العنوان 6

11. إغلاق صفحة الويب تلقائيًا

إذا أردنا إغلاق صفحة الويب الخاصة بنا تلقائيًا خلال فترة زمنية محددة، فقد نضيف أيضًا الكود التالي بعد العلامة في الكود المصدري لصفحة الويب: ＜ script LANGUAGE. ="JavaScript"＞ ＜ /script＞ الكود 3000 in يعني 3 ثواني، ويقاس بالمللي ثانية.

12. قم بتعيين أسماء الكائنات بذكاء

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

13. إضافة تأثيرات ديناميكية إلى روابط الصور

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