1. تحليل الخلفية
بالنسبة لمنتجي صفحات الويب المحترفين الذين يرغبون في إنشاء صفحات ويب معقدة في بيئة مرئية، ظهر Dreamweaver تدريجيًا كأداة لتحرير صفحات الويب وأصبح الخيار الأفضل للمحترفين لكتابة صفحات الويب. وفقًا لاستطلاع أجرته Macromedia، يضم Dreamweaver حاليًا أكثر من 700000 مستخدم، ويحتل المرتبة الأولى بين أدوات تحرير الويب من حيث المشاركة، تاركًا المنافسين مثل "Adobe GoLive" و"NetObjects Fusion" في الخلف كثيرًا. لذلك، من المتوقع عمومًا أن يستمر عدد مستخدمي Dreamweaver في التزايد.
في ظل معدل الشعبية الهائل هذا، من المتصور أن الوظائف المضمنة في Dreamweaver أصبحت أكثر وفرة وغنية واكتمالًا. في مقدمتنا هذه المرة، هناك بعض الميزات الجديدة التي توفر لصانعي صفحات الويب تصميمًا أسرع وترميزًا أسهل ووظائف أكثر تكاملاً. وبدون مزيد من اللغط، نقدم هنا كيفية الاستفادة من بعض الوظائف في Dreamweaver. هناك اثني عشر تقنية سرية أدناه، والتي يمكن تقسيمها إلى أربعة مواضيع. وهي: تصميم صفحات الويب (يتمتع Dreamweaver بوظائف مرنة لتصميم الصفحات)، واستخدام Dreamweaver مع منتجات Macromedia الأخرى (إنشاء رسوم متحركة وصور دون طلب المساعدة)، وتخصيص واجهة المستخدم (الاستمتاع بتجربة مستخدم مخصصة)، وأخيرًا الانضمام إلى ملحقات Dreamweaver ( تحميل الميزات المتقدمة الموسعة إلى صفحات الويب).
2. نصائح لتصميم صفحات الويب
سواء كنت تريد استخدام صيغة HTML الأصلية لكتابة صفحات الويب كلمة بكلمة، أو استخدام نوافذ موحدة للتصميم المرئي لصفحات الويب، فإن النصائح التالية يمكن أن تكون مفيدة.
نصيحة 1: اجعل حجم صفحة الويب أكثر مرونة
يطلق بعض مطوري الويب على التقنية المقدمة أدناه اسم "السائل"، لكنهم هنا يسمونها "تقنية الامتداد المرن". هذه تقنية تقوم بضبط حجم صفحة الويب عندما يتغير حجم نافذة متصفح الزائر. لذلك، إذا كانت النافذة كبيرة جدًا، فلن تكون هناك مساحة فارغة؛ وإذا كانت النافذة صغيرة جدًا، فستتحرك لأعلى ولأسفل لن تظهر القضبان على الحواف. في الواقع، ستقوم معظم صفحات الويب البسيطة بضبط حجم الصفحة تلقائيًا وفقًا لحجم نافذة المتصفح، ومع ذلك، إذا تم استخدام العديد من الإطارات والجداول المختلفة في صفحة الويب، فسيكون من الصعب ضبط حجم صفحة الويب تلقائيًا تعديلها بمرونة. عادةً ما يستخدم مصممو الويب مزيجًا من الإطارات ذات العرض الثابت وصور GIF كفواصل زمنية لتصميم صفحات الويب. وبهذه الطريقة، سواء باستخدام Internet Explorer أو Netscape Navigator، سيكون حجم الصفحة ثابتًا ولن يختفي. باستخدام Dreamweaver 4.0، يمكنك بسهولة تصميم صفحات الويب التي سيتم ضبطها تلقائيًا بمرونة. كيف نفعل ذلك؟
★طريقة محددة: استخدم الزر الموجود على لوحة الأدوات (لوحة الكائنات) لفتح صفحة الويب والانتقال إلى "عرض التخطيط". في هذا الوقت، يمكنك رؤية عرض العمود في مربع النص. يوجد سهم منسدل صغير في منتصف المربع أعلى كل عمود، انقر فوق السهم الصغير الموجود أعلى العمود الذي تريد تعيين العرض المرن فيه، ثم حدد "تعيين العمود كعمل امتداد تلقائي للعمود. (اضبط عرض عمود الضبط التلقائي ليقتصر على عمود واحد) في هذا الوقت، سيظهر خط متموج أعلى مربع العمود بدلاً من الرقم الأصلي الذي يشير إلى عرض العمود. سيقوم Dreamweaver تلقائيًا بإنشاء صورة فارغة ذات تخطيط ثابت ويتم تمثيل هذه الصورة الفارغة بواسطة جدولين فارغين طويلين أعلى العمود. وبهذه الطريقة، سيتم ملء التخطيط تلقائيًا، وسيتم إكمال إعداد التخطيط المرن. (عند إضافة صورة فارغة لأول مرة، سينبثق مربع حوار يسألك عما إذا كنت تريد استخدام صورة مضمنة. للحصول على أفضل تأثير، نوصي بالسماح لبرنامج Dreamweaver بإنشاء صورة تلقائيًا، وإلا فلن تفعل ذلك تحتاج إلى استخدام صورة فارغة لملء التخطيط.)
نصيحة 2: إنشاء لوحة شخصية
تعد "لوحة الأصول" (لوحة تحكم الخاصية) الجديدة في Dreamweaver أداة جديدة يمكنها إدارة الملفات وفقًا لتنسيقات الملفات، مثل الصور والأنماط وما إلى ذلك. ، عند تحرير موقع ويب.
★طريقة محددة: عند تحديد موقع جديد (انقر فوق "موقع جديد")، ستتم إضافة كافة أنواع الكائنات تلقائيًا إلى مربعات الجدول المناسبة في "لوحة الأصول". تحتوي لوحة التحكم الخاصة بخاصية "لوحة الأصول" المضافة حديثًا أيضًا على مربع ألوان، يقوم بتخزين جميع الألوان المستخدمة في موقع الويب الخاص بك، بما في ذلك لون النص ولون الخلفية ولون الارتباط التشعبي. هذه لوحة ألوان للتنقل في موقع الويب مصممة خصيصًا للمستخدمين. ما عليك سوى تشغيل "لوحة الأصول" (اختر "نافذة" أولاً ثم انقر فوق "الأصول")، ثم انقر فوق شريط التمرير الملون الصغير الموجود على اليسار، وسترى مجموعة متنوعة من خيارات الألوان لموقع الويب الخاص بك. بالطبع يمكنك سحب هذه الألوان إلى نص معين محدد. حتى عند تحديد لون معين، ستظهر القيمة السداسية العشرية لكثافة اللون ورموز تباين الألوان الأساسية الثلاثة (RGB) على الشاشة. إذا كنت تريد تصغير شريط أدوات اللوحة، يمكنك أيضًا إضافة ألوان معينة فقط إلى "المفضلة" في اللوحة. ما عليك سوى تحديد اللون المحدد والنقر فوق الزر "إضافة إلى المفضلة" في النافذة (الزر الأيمن السفلي)، وبذلك تكون قد انتهيت.
نصيحة 3: إنشاء نظام تنقل بقائمة منبثقة
في الأصل، كان إنشاء نظام تنقل بقائمة منبثقة يتطلب الكثير من تقنيات وتركيبات JavaScript، ولكن إذا كان لديك Dreamweaver وFireworks Studio، فيمكنك القيام بذلك بسهولة وسرعة.
★طريقة محددة: ابدأ أولاً في "الألعاب النارية"، وحدد صورة، ثم انقر فوق "إدراج القائمة المنبثقة" في مربع الحوار "تعيين القائمة المنبثقة"، ويمكنك إدخال اسم العناصر (العناصر) والنقر عليها زر "زائد" لإضافة العنصر. يمكنك الاستمرار في إجراء الإعدادات التفصيلية في مربع المعلومات المنبثق، مثل تعيين النص والارتباطات التشعبية التي سيتم استخدامها للمشروع، ويمكنك أيضًا إضافة قوائم فرعية وإعادة ترتيب الإعدادات للمستوى التالي. عند الانتهاء، انقر فوق "التالي" لمواصلة تعيين قيم المعلمات المختلفة، مثل اللون والخط وما إلى ذلك. بعد اكتمال القائمة، يمكنك معاينة كل من بناء جملة HTML والصور. انقر فوق "إنهاء" مرة أخرى. في هذا الوقت، عندما يتحرك الماوس إلى الصورة الأصلية، ستظهر قائمة بمحتويات نظام القائمة. بعد ذلك، عندما تقوم بتصدير الملف الذي تم إنشاؤه، ستنتج "Fireworks" تلقائيًا كافة ملفات HTML وjavascript والصور التي يحتاج Dreamweaver إلى استخدامها.
نصيحة 4: اجعل الصور تتحرك
إذا كان لديك Dreamweaver وFireworks Studio مثبتين في نفس الوقت، فسوف تندهش من المزيج المثالي بين هذين البرنامجين. حتى لو لم تكن مصمم صور محترفًا، فقد ترغب في تعديل بعض صور GIF لجعلها أكثر حيوية عند تصميم صفحات الويب. يتيح لك Dreamweaver إنشاء رسوم متحركة دون طلب المساعدة.
★طريقة محددة: حدد الصورة المراد تعديلها في النافذة القياسية، ثم انقر فوق "تحرير" في "مفتش الخصائص". إذا قمت بتثبيت Dreamweaver مع تضمين "Fireworks"، فإن "Fireworks" هو محرر الصور الافتراضي في Dreamweaver، وسيتم تحميل الصور تلقائيًا إلى "Fireworks". (إذا نظرت بعناية، ستجد أن النص والرسومات مثل "Editing From Dreamweaver" ستظهر على شاشة Fireworks، مما يشير إلى أنه يمكنك تحرير الصور في Dreamweaver.) حسنًا، انقر الآن على الصورة التي تريد تحريرها في " الألعاب النارية"، حدد "تعديل تحديد الرسوم المتحركة". بعد ذلك، أكمل الإعدادات في مربع الحوار "Animate"، وحدد عدد إطارات الرسوم المتحركة، واتجاه حركة الرسوم المتحركة، والشفافية والإعدادات الأخرى. يمكنك أيضًا النقر فوق أداة "الإطارات" لتعيين سرعة الحركة، وتحديد لوحة "الكائن" لتغيير الإعدادات. عندما تريد تصدير ملف، ما عليك سوى النقر على شريط الأدوات "تحسين" وتحديد "GIF المتحركة" في نوع الملف. بعد الانتهاء، سيقوم "Fireworks" بتصدير الصورة تلقائيًا باستخدام الإعدادات المحسنة، وتحديث صورة GIF تلقائيًا، وعرض الصورة المحدثة في Dreamweaver. انقر فوق "معاينة الملف في المتصفح" حتى تتمكن من معاينة الصورة الجميلة التي أنشأتها للتو في المتصفح.
نصيحة 5: اجعل الزر له تأثير وامض
في Dreamweaver، يمكنك إنشاء كائن زر Flash بتأثير وامض دون الحاجة إلى Flash. يحتوي Dreamweaver على العديد من كائنات أزرار Flash المضمنة، والتي يمكنها إنشاء عدة أشكال مختلفة من الأزرار.
★طريقة محددة: انقر فوق "إدراج زر فلاش الصور التفاعلية" لرؤية الأزرار المضمنة. يمكنك أيضًا استخدام الماوس للإشارة إلى نموذج الزر الذي تريد استخدامه في مربع الحوار، ثم مشاهدة كيفية عمله في المستعرض. استخدم مؤشر الماوس لتحديد نموذج الزر الذي سيتم استخدامه، ثم أدخل المعلمات بالتسلسل، مثل النص والخط واللون والارتباط التشعبي وما إلى ذلك على الزر أو اسم ملف مخصص. اضغط موافق. بعد ذلك، سيتم إنشاء ملف بتنسيق "SWF"، وسيتم استيراد الملف تلقائيًا إلى صفحة الويب الخاصة بك. انقر على الملف المكتمل وسترى خصائص الملف معروضة في "Property Inspector". عند عرض سمات الملف، إذا قمت بتوسيع قائمة سمات الملف، فسوف تظهر كلمة "تشغيل"، بعد النقر، يمكنك معاينة التأثير الوامض للزر دون فتح المتصفح.
نصيحة 6: إنشاء نص متدفق
تعد إضافة نص متدفق إلى صفحة ويب أمرًا سهلاً مثل إضافة زر Flash الذي قدمناه للتو. وبالمثل، بدون تثبيت Flash، يمكنك القيام بذلك بسهولة باستخدام الميزات الجديدة التي يوفرها Dreamweaver. يمكن لمنشئي صفحات الويب الذين يستخدمون عادة بناء جملة HTML لكتابة صفحات الويب وليس لديهم خبرة في الوسائط التفاعلية إنشاء نص متدفق مضغوط بسهولة في شكل Flash. يمكن لهذه الميزة الجديدة إضافة بعض التفاعلية في التصفح إلى صفحات الويب دون إضافة متاعب التوافق. ★طريقة محددة: انقر فوق "إدراج نص فلاش للصور التفاعلية"، ثم املأ إعدادات المعلمة واحدًا تلو الآخر (مثل النص ونمط الخط ولون الخط وحجم الخط الذي تريد تغيير التأثير فيه، وما إلى ذلك).
نصيحة 7: تغيير اختصارات لوحة المفاتيح
يسمح Dreamweaver للمستخدمين بتخصيص الواجهة، وهذا التصميم مرن للغاية. على سبيل المثال، يمكن للمستخدمين تغيير القائمة عن طريق كتابة البرامج أو إضافة كائنات بأنفسهم. ليس من الضروري أن تكون خبيرًا لتغيير اختصارات لوحة المفاتيح لأن Dreamweaver يحتوي على واجهة رسومية تسمى "Keyboard Shortcut Editor".
★طريقة محددة: ما عليك سوى النقر فوق "تحرير اختصارات لوحة المفاتيح"، وسيتم تحميل مربع الحوار وسرد مفاتيح الاختصار التي يمكن تغييرها، مما يسمح لك بتغيير مفاتيح الاختصار إلى الإعدادات التي اعتدت عليها. لتغيير مفتاح اختصار، ما عليك سوى استخدام القائمة المنسدلة لشريط المجموعة الحالية والأوامر، والعثور على الأمر الذي تريد تغييره بين الأوامر الموجودة، ثم تحديد مفتاح الاختصار الحالي، وسيظهر في قائمة مفاتيح الاختصار. في القائمة. بالإضافة إلى ذلك، إذا كنت تريد إضافة إعدادات مفتاح الاختصار، فيمكنك النقر فوق "زائد"، واكتب مفتاح الاختصار الجديد الذي تريد استخدامه على لوحة المفاتيح، ثم انقر فوق "تغيير". وفي الوقت نفسه، يمكنك أيضًا تحديد مفتاح الاختصار والنقر فوق "ناقص" لإزالة مفتاح الاختصار.
نصيحة 8: إعادة تعيين عمود نافذة الموقع
★ طريقة محددة: فقط انقر فوق "عرض أعمدة عرض الملف" من "نافذة الموقع" لعرض حجم ومظهر عمود عرض الموقع. حدد اسم الحقل واستخدم الأسهم لأعلى ولأسفل لتغيير حجمه، أو قم بإلغاء تحديد إظهار الحقل لإخفاء الحقل. بالإضافة إلى ذلك، يمكنك أيضًا إضافة أعمدة وإنشاء أسماء الأعمدة الخاصة بك عن طريق النقر فوق الزر "زائد". وبدلاً من ذلك، يمكنك ربط عمود بـ "ملاحظة التصميم" عن طريق تحديد "ملاحظة" موجودة في القائمة المنسدلة.
نصيحة 9: عرض الكود الأصلي لصفحة الويب
★ طريقة محددة: عند فتح "Reilly Code Reference" (مرجع النافذة) للتحقق من الخصائص أو توافق المتصفح، ستعرض النافذة الافتراضية "إعدادات المرجع" بقيمة خطوط صغيرة. ولكن إذا قمت بالضغط على الزر الأيمن في الزاوية اليمنى العليا من النافذة (أسفل زر الإغلاق مباشرة)، فسيظهر صف من القوائم المنسدلة حيث يمكنك تحديد حجم خط الكود الأصلي (صغير إلى متوسط وكبير). يعد اختيار الخطوط الكبيرة أقل "إيذاءً" للعين لأنك لا تحتاج إلى حمل عدسة مكبرة للنظر إلى الشاشة عند قراءة كود HTML الأصلي.
نصيحة 10: إضافة زر Flash
في النصيحة 5، قدمنا كيفية استخدام 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:
إذا كنت تريد إنشاء نموذج، فهل لا يزال يتعينعليك
قضاء بعض الوقت في كتابة الكود الأصلي لصفحة الويب حرفيًا؟
تبادل وتنزيل "ملحق Form Builder"، هناك جداول جاهزة تتيح لك نسخ الجداول بشكل فوري والتي تشمل: البلد، والجنس، والحالة الاجتماعية، والفئة العمرية، وغيرها من الفئات. انتقل إلى Exchange لتنزيل هذا الملف الصغير (11 كيلو بايت فقط)، ثم قم بتثبيته من خلال "مدير الامتدادات" (أوامر إدارة الامتدادات، ملحق تثبيت الملف). ثم قم فقط بإعادة تشغيل Dreamweaver، وانقر فوق "Insert FormBuilder"، وستجد الوظيفة الموسعة في (Insert FormBuilder). بعد النقر، سيظهر مربع حوار يعرض جميع قوائم التنسيق القابلة للتطبيق، وهو أمر مناسب حقًا.