بالنسبة لصانعي صفحات الويب المحترفين الذين يرغبون في إنشاء صفحات ويب معقدة في بيئة مرئية، فقد ظهر Dreamweaver تدريجيًا في سوق أدوات تحرير صفحات الويب وأصبح الخيار الأفضل للمحترفين لكتابة صفحات الويب. انطلاقًا من الوضع الحالي، يمكن القول أن الوظائف المضمنة في Dreamweaver أصبحت أكثر وفرة وغنية واكتمالًا. هنا أود أن أقدم لكم بعض النصائح التطبيقية في الإصدار 4.0.
1. جعل صفحات الويب أكثر مرونة يسمي بعض مطوري الويب التقنية المقدمة أدناه سائلة، لكنني أسمي هذه التقنية هنا قابلة للتمدد (تقنية الامتداد المرن). هذه تقنية يمكنها ضبط حجم صفحة الويب عندما يتغير حجم نافذة متصفح الزائر، لذلك، إذا كانت النافذة كبيرة جدًا، فلن تكون هناك مساحة فارغة، وإذا كانت النافذة صغيرة جدًا، فسيتم تغيير حجمها لأعلى و لن يظهر الشريط المتحرك لأسفل على الحافة. في الواقع، ستقوم معظم صفحات الويب البسيطة بضبط حجم الصفحة تلقائيًا وفقًا لحجم نافذة المتصفح، ومع ذلك، إذا تم استخدام العديد من الإطارات والجداول المختلفة في صفحة الويب، فسيكون من الصعب ضبط حجم صفحة الويب تلقائيًا تعديلها بمرونة. عادةً ما يستخدم مصممو الويب مزيجًا من الإطارات ذات عرض الأعمدة الثابتة وصور GIF كفواصل زمنية لتصميم صفحات الويب، وبهذه الطريقة، سواء باستخدام Internet Explorer أو Mac، سيكون حجم الصفحة ثابتًا ولن يختفي. باستخدام Dreamweaver 4.0، يمكنك بسهولة تصميم صفحات الويب التي يتم ضبطها تلقائيًا بمرونة. كيف تفعل ذلك؟
افتح صفحة الويب باستخدام الأزرار الموجودة في لوحة الكائنات وانتقل إلى عرض التخطيط. في هذا الوقت، يمكنك رؤية عرض العمود لمربع النص. يوجد سهم منسدل صغير في منتصف المربع أعلى كل عمود، حدد السهم الصغير الموجود أعلى العمود الذي تريد تعيين العرض المرن له ثم حدد "جعل العمود مرنًا" للعرض (جعل العمود يمتد تلقائيًا). (ضبط الضبط التلقائي لعرض العمود بحيث يقتصر على عمود واحد) في هذا الوقت، سيظهر خط متموج أعلى مربع العمود بدلاً من الرقم الأصلي الذي يشير إلى عرض العمود. سيقوم Dreamweaver تلقائيًا بإنشاء ملف صورة فارغ ذي تخطيط ثابت ويتم تمثيل ملف الصورة الفارغ هذا بواسطة جدولين فارغين طويلين فوق الأعمدة. وبهذه الطريقة، سيتم ملء التخطيط تلقائيًا، وسيتم إكمال إعداد التخطيط المرن. (عند إضافة ملف صورة فارغ لأول مرة، سينبثق مربع حوار يسألك عما إذا كنت تريد استخدام ملف الصورة المضمن. للحصول على أفضل تأثير، أوصي بأن تسمح لبرنامج Dreamweaver بإنشاء ملف تلقائيًا، وإلا فلن تتمكن من ذلك لا تحتاج إلى استخدام ملف صورة فارغ لملء التخطيط.)
2. قم بإنشاء لوحة ألوان مخصصة. تعد لوحة Assets الجديدة في Dreamweaver 4.0 أداة جديدة يمكنها إدارة الملفات وفقًا لأنواع الملفات، مثل الصور والقوالب وما إلى ذلك. .، عند تحرير موقع ويب عندما تقوم بتحديد موقع ويب جديد (حدد موقع · موقع جديد)، ستتم إضافة جميع أنواع المكونات تلقائيًا إلى المربعات المناسبة في لوحة الأصول. تحتوي لوحة الأصول الجديدة أيضًا على مربع ألوان في لوحة تحكم الخاصية، والذي يقوم بتخزين جميع الألوان المستخدمة في موقع الويب الخاص بك، بما في ذلك ألوان النص وألوان الخلفية وألوان الروابط. هذه لوحة ألوان موجهة إلى موقع الويب ومصممة خصيصًا للمستخدمين. ما عليك سوى تنشيط لوحة الأصول (حدد Window أولاً، ثم الأصول)، ثم حدد شريط التمرير الملون الصغير الموجود على اليسار، وسترى مجموعة متنوعة من خيارات الألوان لموقع الويب الخاص بك. بالطبع يمكنك سحب هذه الألوان إلى نص معين محدد. حتى عند تحديد لون، ستظهر القيمة السداسية العشرية للون والرمز المقابل ثلاثي الألوان (RGB) على الشاشة. إذا كنت ترغب في جعل شريط أدوات لوحة الألوان أصغر حجمًا، فيمكنك إضافة ألوان معينة فقط إلى المفضلة في لوحة الألوان. ما عليك سوى تحديد اللون المحدد، وتحديد زر يسمى "إضافة إلى المفضلة" في النافذة (الزر السفلي الأيمن)، وبذلك تكون قد انتهيت.
3. إنشاء نظام التنقل بالقائمة المنبثقة في الأصل، كان إنشاء نظام التنقل بالقائمة المنبثقة يتطلب بعض مهارات بناء جملة JavaScript، ولكن إذا كان Dreamweaver/Fireworks Studio مثبتًا لديك، فيمكن القيام بذلك بسرعة. ابدأ أولاً في Fireworks، وحدد صورة، ثم حدد Insert·Pop-Up Menu في مربع الحوار Set Pop-Up Menu. يمكنك إدخال اسم العناصر وتحديد زر Plus لإضافة المشروع. يمكنك الاستمرار في إجراء الإعدادات التفصيلية في مربع الرسالة المنبثقة، مثل تعيين النص والروابط التي سيتم استخدامها للعنصر. وبالطبع، يمكنك أيضًا إضافة قوائم فرعية وإعادة ترتيب الإعدادات للمستوى التالي. عند الانتهاء، حدد التالي لمتابعة تعيين التفضيلات مثل الألوان والخطوط والمزيد. بعد اكتمال القائمة، يمكنك معاينة بناء جملة HTML ومعاينة الصورة. ثم حدد إنهاء. في هذا الوقت، عندما يتحرك الماوس إلى النمط الأصلي، ستظهر قائمة بمحتويات نظام القائمة. بعد ذلك، عندما تقوم بتصدير الملف الذي تم إنشاؤه، سيقوم Fireworks تلقائيًا بإنشاء جميع ملفات HTML وJavaScript وملفات الصور التي يحتاجها Dreamweaver.
4. اجعل ملف الصورة يتحرك!
إذا كان لديك Dreamweaver/Fireworks Studio مثبتًا في نفس الوقت، فسوف تندهش من المزيج المثالي بين هذين المنتجين. حتى لو لم تكن مصمم رسومات محترفًا، فلا تزال ترغب في تعديل بعض ملفات صور GIF لجعلها أكثر حيوية عند تصميم صفحات الويب. يسمح لك Dreamweaver بإنشاء رسوم متحركة دون سؤال أي شخص! حدد الصورة التي تريد تعديلها في النافذة القياسية، ثم حدد الزر "تحرير" في عارض الخصائص. إذا تم تضمين Fireworks مع تثبيت Dreamweaver، فإن Fireworks هو محرر الصور الافتراضي لـ Dreamweaver، وسيتم تحميل الصور تلقائيًا إلى Fireworks. (إذا نظرت بعناية، ستجد أن النص والرسومات مثل Editing From Dreamweaver ستظهر على شاشة Fireworks، مما يشير إلى أنه يمكنك تحرير الصور من Dreamweaver.) حسنًا، حدد الآن الصورة المراد تحريرها في Fireworks وحدد Modify· تحريك · تحريك التحديد. بعد ذلك، أكمل الإعدادات في مربع الحوار Animate، وحدد عدد الإطارات للرسوم المتحركة، واتجاه حركة الرسوم المتحركة، والشفافية، وما إلى ذلك. يمكنك أيضًا تحديد شريط أدوات الإطارات لتعيين سرعة الحركة، وتحديد لوحة الكائن لتغيير الإعدادات. لتصدير الملف، ما عليك سوى تحديد شريط أدوات التحسين وتحديد Animated GIF كنوع الملف. بعد الانتهاء، سيقوم Fireworks تلقائيًا بتصدير الصورة باستخدام الإعدادات المحسنة، وتحديث ملف صورة GIF تلقائيًا، وعرض ملف الصورة المحدث في Dreamweaver. حدد ملف · معاينة في المتصفح، بحيث يمكنك معاينة الصورة الجميلة التي قمت بإنشائها للتو في المتصفح!
5. اجعل الزر له تأثير وامض في Dreamweaver، يمكنك إنشاء كائن زر Flash بتأثير وامض دون الحاجة إلى برنامج Flash. يحتوي الإصدار 4.0 على العديد من كائنات أزرار الفلاش المضمنة، والتي يمكنها إنشاء عدة أشكال مختلفة من الأزرار. حدد إدراج · صور تفاعلية · زر فلاش لمعرفة الأزرار المضمنة المتوفرة. يمكنك أيضًا استخدام الماوس للإشارة إلى نموذج الزر الذي تريد استخدامه في مربع الحوار، ثم مشاهدة كيفية عمله في المستعرض. استخدم مؤشر الماوس لتحديد نموذج الزر الذي تريد استخدامه، ثم أدخل المعلمات بالتسلسل، مثل النص والخط واللون والرابط وما إلى ذلك على الزر أو اسم ملف مخصص. اضغط موافق. بعد ذلك، سيتم إنشاء ملف SWF ووضعه تلقائيًا على صفحة الويب الخاصة بك. انقر فوق الملف المكتمل وسترى خصائص الملف معروضة في Property Inspector. عند عرض سمات الملف، إذا قمت بتوسيع قائمة سمات الملف، سيظهر زر تشغيل. بعد تحديده، يمكنك معاينة التأثير الوامض للزر دون فتح المتصفح.
6. إنشاء نص متدفق تعد إضافة نص متدفق إلى صفحة ويب أمرًا سهلاً مثل إضافة زر Flash الذي قدمته للتو. وبالمثل، لا تحتاج إلى تثبيت Flash، ويمكنك القيام بذلك بسهولة باستخدام الميزات الجديدة التي يوفرها Dreamweaver 4.0. يمكن لمنشئي صفحات الويب الذين يستخدمون عادة بناء جملة HTML لكتابة صفحات الويب وليس لديهم خبرة في الوسائط التفاعلية، إنشاء نص متدفق مضغوط بسهولة في شكل Flash. ووفقا لماكروميديا، فإن 97% من مستخدمي الإنترنت يمكنهم عرض صفحات الويب بتأثيرات الفلاش، لذا يمكن لهذه الميزة الجديدة إضافة بعض التفاعل إلى التصفح وقراء صفحات الويب دون إضافة مشاكل التوافق. حدد إدراج · صور تفاعلية · نص فلاش، ثم املأ إعدادات التفضيل واحدًا تلو الآخر (مثل النص ونمط الخط ولون الخط وحجم الخط وما إلى ذلك الذي تريد تغيير التأثير).
7. تغيير اختصارات لوحة المفاتيح يسمح Dreamweaver للمستخدمين بتخصيص الواجهة. هذا التصميم مرن للغاية. على سبيل المثال، يمكن للمستخدمين تغيير القائمة عن طريق كتابة البرامج أو إضافة كائنات. ليس من الضروري أن تكون خبيرًا لتغيير اختصارات لوحة المفاتيح، لأن Dreamweaver يحتوي على واجهة رسومية تسمى Keyboard Shortcut Editor. ما عليك سوى تحديد Edit · Keyboard Shortcuts، وسيتم تحميل مربع الحوار وإدراج قائمة بمفاتيح الاختصار التي يمكن تغييرها. مما يسمح لك بتغيير المفتاح بسرعة إلى قيمة الإعداد التي اعتدت عليها. لتغيير مفتاح اختصار، ما عليك سوى استخدام القوائم المنسدلة لقائمة Current Set وCommand، والعثور على الأمر الذي تريد تغييره بين الأوامر الموجودة، ثم تحديد مفتاح الاختصار الحالي وسيظهر في قائمة المفاتيح السريعة. في قائمة المفاتيح. بالإضافة إلى ذلك، إذا كنت تريد إضافة إعداد مفتاح سريع، فيمكنك تحديد زر علامة الزائد، وكتابة المفتاح التمثيلي السريع الجديد الذي تريد استخدامه على لوحة المفاتيح، وتحديد تغيير. وفي الوقت نفسه، يمكنك أيضًا تحديد مفتاح اختصار وتحديد مفتاح الإزالة (ناقص) لإزالة مفتاح الاختصار.
8. قم بإعادة تعيين عرض العمود لنافذة الموقع، ما عليك سوى تحديد عرض · عرض الملف من نافذة الموقع لتخصيص حجم وعرض العمود عند عرض طريقة عرض الموقع. حدد عمودًا بالأسماء واستخدم الأسهم لأعلى ولأسفل لتغيير الحجم، أو قم بإلغاء تحديد إظهار الحقل لإخفاء العمود. بالإضافة إلى ذلك، يمكنك أيضًا إضافة أعمدة عن طريق تحديد زر علامة الزائد وإنشاء أسماء الأعمدة الخاصة بك. بالإضافة إلى ذلك، يمكنك ربط عمود بمذكرة تصميم عن طريق تحديد ملاحظة موجودة من القائمة المنسدلة.
9. اقرأ ملف صفحة الويب الأصلية عند فتح مرجع كود O'Reilly (نافذة · مرجع) للتحقق من الخصائص أو توافق المتصفح، ستعرض النافذة الافتراضية الإعدادات المرجعية بخطوط صغيرة. ولكن إذا قمت بالضغط على الزر الأيمن في الزاوية اليمنى العليا من النافذة (أسفل زر الإغلاق مباشرة)، فسيظهر صف من القوائم المنسدلة حيث يمكنك تحديد حجم خط المستند الأصلي (صغير، إلى متوسط، و كبير). . يعد اختيار الخطوط الكبيرة أقل قسوة على العين لأنك لا تحتاج إلى حمل عدسة مكبرة للنظر إلى الشاشة عند عرض ملف HTML الأصلي!
10. أضف زر Flash جديدًا أعلاه، لقد علمتك كيفية استخدام 20 نوعًا من الأزرار المعدة مسبقًا لإنشاء أزرار Flash في Dreamweaver. لا تتطلب هذه الطريقة تثبيت أي ملفات أو برامج إضافية. هناك طريقة أخرى أدناه، وهي تثبيت أزرار الألعاب النارية. هذه الوظيفة الموسعة لها نفس تأثير النصيحة 5. انتقل إلى Exchange for Dreamweaver (مركز تبادل امتدادات Dreamweaver)، وأدخل الكلمة الأساسية للبحث "InstaGraphics Extensions for Dreamweaver"، ثم قم بتنزيل هذا الملف بحجم 577 كيلو بايت. قم بالتبديل إلى Dreamweaver، وحدد Commands·Manage Extensions، ثم حدد File·Install Extension لبدء التثبيت. بمجرد إعادة تنشيط Dreamweaver، توجد ستة أنواع من الأزرار الجديدة والمثيرة للاهتمام، بما في ذلك Surfboard وBulletbar. في الوقت الحالي، ما عليك سوى استخدام الأمر Insert · Interactive Images · Fireworks Button لإنشاء زر رائع. يمكنك أيضًا استخدام الأوامر · تحويل التعداد النقطي إلى صور والأوامر · تحويل النص إلى صور. يمكن لكل من الأساليب المذكورة أعلاه تنفيذ الألعاب النارية تلقائيًا.
11. أضف وظيفة "تعيين كمفضلة" إلى صفحة الويب وابحث في Exchange، ويمكنك العثور على وظيفة الامتداد "إضافة إلى المفضلة". يشغل هذا الملف الصغير حجم 3 كيلو بايت فقط، ولن يستغرق وقت التنزيل وقتًا طويلاً، ثم اتبع نفس الخطوات لتحميله من مدير الامتداد (الأوامر · إدارة الامتدادات، الملف · تثبيت الامتداد). ثم قم بإعادة تنشيط Dreamweaver. سيضيف ملف الامتداد الذي تم تحميله حديثًا ميزة جديدة إلى Dreamweaver. إذا قمت بإضافة وظيفة "الإضافة إلى المفضلة" هذه إلى صفحة الويب الخاصة بك، فعندما يزور مستخدم الإنترنت موقع الويب الخاص بك، يمكنه بسهولة إضافة موقع الويب الخاص بك إلى مفضلات متصفحه بنقرة واحدة فقط (أو إشارات مرجعية شخصية). بالإضافة إلى ذلك، يمكنك أيضًا تخصيص اسم الاختصار المفضل والرمز الصغير الذي سيظهر أمام اسم الاختصار المفضل (بشكل عام، الرمز الصغير الموجود أمام الاختصار المفضل في IE هو القيمة الافتراضية لـ IE. إذا كنت احصل على الأيقونة الصغيرة المصممة بشكل أكثر روعة. لاحظ أن هذه الوظيفة تدعم فقط المتصفحات التي تعمل بنظام IE 4.0 والإصدارات الأحدث. ما عليك سوى تحديد لوحة السلوك في قائمة Windows وتحديد هذا الخيار في القائمة المنسدلة لوظيفة IE
12 هل تريد إنشاء مخططرائع
، هل لا يزال يتعين عليك قضاء بعض الوقت في كتابة الكود المصدري لصفحة الويب؟ يوجد بالفعل كود جاهز للتنزيل من Exchange! يحتوي ملحق Form Builder على نموذج جاهز يسمح لك بذلك لنسخ نموذج يحتوي على حقول مثل البلد والجنس والحالة الاجتماعية والفئة العمرية وفئات أخرى على الفور، قم بتنزيل هذا الملف الصغير (11 كيلوبايت فقط) من Exchange، ثم استخدم مدير الامتدادات وقم بتثبيته (الأوامر · إدارة الامتدادات، ملف · تثبيت الامتداد). ثم قم بإعادة تنشيط Dreamweaver وحدد Insert·FormBuilder، وستجد ملف الامتداد في (Insert·FormBuilder). بعد التحديد، سيظهر مربع حوار، وسيتم عرض جميع قوائم التنسيق القابلة للتطبيق.