تعليم تصميم المواقع بدريم ويفر مجانا

تعليم تصميم المواقع بدريم ويفر مجانا

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

محتويات

  • مكونات البرنامج
  • القوائم
  • أعدادات اللغة
  • إنشاء الموقع
  • إنشاء الصفحة
  • خصائص الصفحة
  • الجداول
  • خصائص الجداول
  • خلايا الجداول
  • إدراج جداول جاھزة
  • إدراج الصور
  • خصائص الصور
  • عمل Rollover
  • تحرير الصور
  • عمل صور متغيرة Navigation
  • الخرائط الصورية
  • إدراج النصوص
  • إنشاء الروابط

مكونات البرنامج

من أربعة أجزاء رئيسية هي Work Space تتكون صفحة الـ

  • إطار المستند
  • اللوحات المتحركة
    ويمكن الوصول إليھا من خلال القائمة Window وإذا أردنا فتح إحدى ھذه اللوحات مثلاً الخصائص ” Properties” قم بالنقر عليھا من خلال القائمة فتسظھر لنا.
    ويتم تحديد خصائص العنصر الذي تم تحديده وقد يكون صورة أو نص أو غيره.
  • شريط القوائم
  • شريط الحالة

File قائمة

File تعليم تصميم المواقع - تعلم دريم ويفر 8 - قائمة

File تعليم تصميم المواقع – تعلم دريم ويفر 8 – قائمة

وتحتوي على الأوامر المعتادة مثل

  • “New” لفتح مستند جديد
  • “Open” لفتح ملف موجود
  • “Open Recent” لفتح الملفات التي تم فتحھا مؤخراً
  • “Close” لغلق التطبيق الحالي
  • “Close All” لغلق جميع التطبيقات
  • “Save” لحفظ ملف
  • “Revert” للعودة بالصورة إلى آخر نسخة تم حفظھا عليھا. وھي تشبھ تماماً السمة الموجودة في الفوتوشوب – لإعادة الصورة كما كانت عند الفتح أي يزيل كافة التعديلات على الصورة
  • “Design Notes” تقوم بالربط بين الملحوظات الخاصة وبين لغة HTML وغيرھا من الملفات
  • “Exit” للخروج من البرنامج بالكامل

Edit قائمة

Edit تعليم تصميم المواقع - تعلم دريم ويفر 8 - قائمة

Edit تعليم تصميم المواقع – تعلم دريم ويفر 8 – قائمة

وتحتوي على الأوامر المعروفة مثل

  • “Copy” نسخ
  • “Cut” قص
  • “Paste” لصق
  • “Find And Replace” بحث واستبدال
  • “Preferences” بحث واستبدال سنستخدمھا لاحقاً.

.

.

View قائمة

View تعليم تصميم المواقع - تعلم دريم ويفر 8 - قائمة

View تعليم تصميم المواقع – تعلم دريم ويفر 8 – قائمة

وتحتوي على بعض سمات التصميم المفيدة، مثل الشبكات والمساطر كما تتيح إمكانية الاختيار ما بين إظھار حدود جداول هتمل والإطارات والمقاطع أو إخفائھا، كما تمكنك من مشاھدة مختلف الخصائص للمستند مثل التصميم والأكواد وأنواع مكونات الصفحة وأدوات دريم ويفر المختلفة، مثل المسطرة أو وضع الشبكة كما تتيح لك المشاھدة الكاملة للصفحة.

.

.

.

.

Insert قائمة

Insert تعليم تصميم المواقع - تعلم دريم ويفر 8 - قائمة

Insert تعليم تصميم المواقع – تعلم دريم ويفر 8 – قائمة

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

.

.

.

.

Commands قائمة

Commands تعليم تصميم المواقع - تعلم دريم ويفر 8 - قائمة

Commands تعليم تصميم المواقع – تعلم دريم ويفر 8 – قائمة

  • توجد فيھا العديد من الخيارات المفيدة مثل Play و Start Recording و Recorded Commands والتي تستخدم لحفظ سلسلة من الخطوات وتكرارھا بعد ذلك، كما تمكنك التسجيل وتحرير القائمة وإعداد وتنظيف وسوم HTML و ألبومات الصور والتحكم في خلفية وشكل الجدول

.

.

.

.

Modify قائمة

Modify تعليم تصميم المواقع - تعلم دريم ويفر 8 - قائمة

Modify تعليم تصميم المواقع – تعلم دريم ويفر 8 – قائمة

تمكنك من تعديل خصائص عناصر الصفحة ويمكنك باستخدامھا تحرير الأكواد وتغيير الجداول ومكونات الجداول وانجاز مختلف الوظائف لمختلف العناصر الجاھزة

.

.

.

.

.

Text قائمة

Text تعليم تصميم المواقع - تعلم دريم ويفر 8 - قائمة

Text تعليم تصميم المواقع – تعلم دريم ويفر 8 – قائمة

لتنسيق النص باستخدام بعض الخواص مثل خط عريض أو مائل وتحديد نمط الخط و غيره، كما يمكنك من التحكم في محاذاة النص ونوع الخط وحجمھ ولونھ والتدقيق الإملائي

.

.

.

.

.

Site قائمة

Site تعليم تصميم المواقع - تعلم دريم ويفر 8 - قائمة

Site تعليم تصميم المواقع – تعلم دريم ويفر 8 – قائمة

تمكنك من مشاھدة ملفات الموقع و فتح وإنشاء المواقع وتحرير الموقع والتعديل في خصائصھ

.

.

.

.

.

Window قائمة

Window تعليم تصميم المواقع - تعلم دريم ويفر 8 - قائمة

Window تعليم تصميم المواقع – تعلم دريم ويفر 8 – قائمة

تمكنك من الدخول إلى مختلف لوحات التحكم في البرنامج

.

.

.

.

.

Help قائمة

Help تعليم تصميم المواقع - تعلم دريم ويفر 8 - قائمة

Help تعليم تصميم المواقع – تعلم دريم ويفر 8 – قائمة

في حال أردت المساعدة أو البحث عن معلومة معينة عن البرنامج يمكنك إيجادھا ھنا

.

.

.

.

إعدادات اللغة

 

تعليم تصميم المواقع - تعليم دريم ويفر 8 - إعدادات اللغة - 1

تعليم تصميم المواقع – تعليم دريم ويفر 8 – إعدادات اللغة – 1

  • في البداية ھناك بعض الإجراءات المتبعة لجعل برنامج الدريم ويفر يدعم اللغة العربية وھي كالتالي

Ctrl+ U أو الاختصار Preferences اختر Edit من قائمة
ثم العربيةFonts اختر
حدد الإعدادات التي تناسبك مثلاً نوع الخط وحجمھ

  • بعد ذلك إذا لم تجد خيار اللغة العربية ضمن الخيارات السابقة أنا جربت ھذه الطريقة ونجحت معي . اختر Other وإذا لم تنفع معك فھناك العديد من الطرق الأخرى لحل ھذه المسالة

.

.

 

تعليم تصميم المواقع - تعليم دريم ويفر 8 - إعدادات اللغة - 2

تعليم تصميم المواقع – تعليم دريم ويفر 8 – إعدادات اللغة – 2

  • من داخل البرنامج، افتح الملف “باستخدام المفكرة”:
    C:/Program Files/Macromedia/Dreamweaver/Configuration/Encodings/EncodingMenu.xml
    أو قم بإظھار مصدر الملف “Code View” بعد أن تنقر نقرتين على الملف ثم انقر بزر الماوس الأيمن واختر عرض المصدر
    و استبدل السطر الأخير:-
    <mm:encoding name=”Other” charset=””fontgroup=”Other”filename=”other.xml”/>
    بھذا السطر
    <mm:encoding name=”Arabic”charset=”windows-1256″fontgroup=”Other”filename=”other.xml”/>
    أحفظ الملف وأعد تشغيل البرنامج.
    وقم بإعادة إجراء الخطوات السابقة الموضحة بالصور أعلاه

إنشاء الموقع

  • لكي تقوم بإنشاء موقع جديد يجب أن تقوم بإنشاء مجلد في محرك الأقراص الصلبة تحفظ فيھ جميع صفحات الويب التي ستنشئھا.
  • لكي تقوم بتعريف الموقع باستخدام مربع الحوار Site اتبع الخطوات التالية
  • من قائمة Site اختر New Site وتأكد من اختيار Local Info من المربع Category
  • في مربع النص Site Name أكتب اسم الموقع مثل ايجي اوفرز
  • في المربع Local Root Folder اضغط على رمز المجلد وابحث عن المجلد الذي قمت بإنشائھ في الخطوة الأولى ليحوي بداخلھ موقع الويب
  • تأكد من تحديد الخيار Refresh Local File List Automatically
  • أذا أردنا أن يقوم البرنامج بتحديث القائمة الخاصة بجميع الصفحات الجديدة التي أضفناھا إلى الموقع بصورة تلقائية قم بإنشاء مجلد خاص بالصور داخل مجلد الموقع وقم باختياره من المربع Default image Folder
  • اكتب الـ URL الخاص بالموقع في المربع HTTP Address مثلا www.egyoffers.com
  • قم بتحديد مربع الحوار Enable Cache
  • اضغط على OK لإغلاق مربع الحوار

إنشاء الصفحة

تعليم تصميم المواقع - تعليم دريم ويفر 8 - إنشاء الصفحة

تعليم تصميم المواقع – تعليم دريم ويفر 8 – إنشاء الصفحة

  • من قائمة File اختر New
  • فمن ھنا يمكن تحديد نوع الصفحة ساكنة أو ديناميكية وأيضا يمكن تحديد اللغة المستخدمة في إنشاء الصفحة ثم اضغط Create

.

.

.

.

خصائص الصفحة

  • في أسفل الصفحة اضغط على Properties ستجد زر مكتوب عليھ Page Properties انقر عليھ وستظھر لك النافذة التالية
  • حيث يمكن تعديل نوع الخط وحجمھ ولونھ ولون الخلفية
  • يمكن وضع صورة كخلفية للصفحة من مجلد الصور الذي أنشأناه سابقاً
  • الحقل Repeat يمكنك من عدم تكرار الصورة / تكرارھا
  • أيضا تحديد نوع التكرار أفقي أو عمودي
  • ففي النافذة السابقة يمكن تحديد خصائص الروابط بالضغط على Link كما في الصورة التالية
تعليم تصميم المواقع - تعليم دريم ويفر 8 - خصائص الصفحة - الروابط

تعليم تصميم المواقع – تعليم دريم ويفر 8 – خصائص الصفحة – الروابط

  • حيث يتم تحديد نوع الخط للرابط وحجمھ ولون الرابط النشط وأيضا الرابط الذي تمت زيارتھ
  • ولعرض الصفحة قم بالضغط على F12 أو من قائمة ملف اختر Preview in Browser
  • وحدد المتصفح الموجود لديك وستظھر لك الصفحة بعد التنفيذ

.

.

.

.

الجداول

تعليم تصميم المواقع - تعليم دريم ويفر 8 - إنشاء الجداول

تعليم تصميم المواقع – تعليم دريم ويفر 8 – إنشاء الجداول

  • من قائمة Insert اختر Table أو من شريط الإدراج اختار Layout وبعد ذلك اختر Table كما في الصورة التالية

.

.

.

.

.

ستظھر لك الصورة التالية

تعليم تصميم المواقع - تعليم دريم ويفر 8 - الجداول

تعليم تصميم المواقع – تعليم دريم ويفر 8 – الجداول

  • في السطر الأول يتم تحديد عدد الأعمدة والصفوف وفي السطر الثاني يتم تحديد عرض الجدول وفي السطر الثالث يتم تحديد سمك حدود الجدول Border فإذا جعلنا القيمة تساوي صفر تكون الجدول بدون حدود وفي السطر الرابع يتم تحديد المساحة بين الخلية وإطار الخلية بالبيكسل وفي السطر الخامس يتم تحديد المساحة بين الخليتين بالبيكسل

.

.

.

.

خصائص الجدول

تعليم تصميم المواقع - تعليم دريم ويفر 8 - خصائص الجداول

تعليم تصميم المواقع – تعليم دريم ويفر 8 – خصائص الجداول

وستجد ما يلي Properties بعد تحديد الجدول بواسطة الماوس اضغط على

  • table id اسم الجدول
  • row عدد الصفوف
  • cols عدد الأعمدة
  • W عرض الجدول بالبيكسل أو بالنسبة المئوية
  • H ارتفاع الجدول بالبيكسل أو بالنسبة المئوية
  • CellPadتحديد المساحة بين الخلية وإطار الخلية بالبيكسل
  • CellSpaceتحديد المساحة بين الخليتين بالبيكسل
  • Allignتحديد محاذاة الجدول يمين أو يسار أو بالمنتصف
  • Border حدود الجدول
    كما يمكن تحديد لون الخلفية للجدول ولون الحدود وأيضا يمكن عمل صورة كخلفية للجدول من مجلد الصور الذي أنشأتھ سابقاً, وبالنسبة للإشارات الصغيرة
    ضع الماوس عليھا وستظھر وظيفتھا كالتالي
  • Clear Column Widths
    يتم إعادة وضع الجدول إلى السابق بإلغاء عرض الخلية
  • Convert Table Widths to Pixels
    لجعل مساحة الجدول بالبيكسل
  • Convert Table Widths to Percent
    بمجرد تكرار النقر سيزداد مساحة بالنسبة المئوية فقط بعرض الجدول
  • Clear Row Height
    لتحديد طول الجدول كما كانت بالسابق
  • Convert Table Height To Pixels
    يقوم بتحويل طول الجدول إلى البيكسل
  • Convert Table Height To Percent
    يقوم بتحويل طول الجدول إلى النسبة المئوية

خلايا الجدول

تعليم تصميم المواقع - تعليم دريم ويفر 8 - خلايا الجداول

تعليم تصميم المواقع – تعليم دريم ويفر 8 – خلايا الجداول

  • خاصية No wrap عند الكتابة في الخلية يقوم بزيادة حجمھا تلقائيا لاحتواء النص دون التأثير عليھ
  • الرمزين داخل المربع الأحمر في الصورة ضع الماوس عليھما وسيظھر التالي
  • الأول Merges Selected Cells Using Spans من جھة اليسار وظيفتھ عند تحديد جميع الخلايا سيتم تنشيط الزر وبمجرد الضغط عليه سيقوم بدمج كل الخلايا بخلية واحدة
  • Font نوع الخط
  • Horz لتحديد وضع النص داخل الخلية بالمنتصف، يمين أو يسار
  • Vert لتحديد وضع النص عمودي أعلى أو أسفل، وسط أو بمحاذاة السطر
  • Header يجعل النص Bold وبمنتصف الخلية
  • Bg لون خلفية الخلية / صورة خلفية للخلية
  • Brdr لون حدود الخلية
  • Link لعمل رابط للخلية
  • والثاني Splits Cell into rows or columns لتقسيم الخلية التي تم تحديدھا وبمجرد الضغط عليھا ستظھر نافذة بخصائص أسطر الخلية والأعمدة كما في الصورة
تعليم تصميم المواقع - تعليم دريم ويفر 8 - تقسيم الخلايا

تعليم تصميم المواقع – تعليم دريم ويفر 8 – تقسيم الخلايا

.

.

.

.

.

.

  • حدد ھل تريد تقسيم الخلية إلى صفوف أو أعمدة وعددھا ثم اضغط OK

إدراج جداول جاهزة

تعليم تصميم المواقع - تعليم دريم ويفر 8 - إدراج جداول جاهزة

تعليم تصميم المواقع – تعليم دريم ويفر 8 – إدراج جداول جاهزة

  • أضف جدول كما تعلمنا سابقا ثم اذھب إلى قائمة Command واختر منھا Format Table ستظھر الصورة التالية
    ويتم تحديد ألوان الجدول فيھما
  • في القائمة المنسدلة Alternate نلاحظ الخيارات التالية
    do not Alternate يستخدم اللون الأول لكافة سطور الجدول
    Every other row وفيھ يتم وضع الألوان سطر بعد سطر
    Every tow rows وفيھ يتم التلوين سطرين بسطرين
  • ومثلھ بقية الاختيارات الأخرى الموجودة
    Top Row تستخدم الحقول الموجودة فيھ لتنسيق الصف الأعلى الذي في الجدول ويحتوي على العناوين الرئيسية للجدول ومنھا يتم تحديد الاتجاه ونوع الخط ولون الخلفية ولون النص
    Left col وتستخدم لتنسيق أول عمود من جھة اليسار لتحديد الاتجاه وأيضا نوع الخط كما ھو موضح في الشكل السابق
  • أما بالنسبة للحقل Table : Border فيستخدم لوضع حدود أو إطار للجدول ويتم تحديد سمكھ من خلال وضع رقم في المربع ويزداد سمك الإطار بزيادة الرقم
  • والسطر الأخير يستخدم لإلغاء كود TR وكتابة بدلا عنھ TD

إدراج صورة

تعليم تصميم المواقع - تعليم دريم ويفر 8 - إدراج صورة

تعليم تصميم المواقع – تعليم دريم ويفر 8 – إدراج صورة

  • يمكن إدراج الصور من قائمة Image نختار Insert
    أو باستخدام الاختصار Alt + Ctrl + I
    أو من شريط الأدوات نختار الأداة Image

.

.

.

تعليم تصميم المواقع - تعليم دريم ويفر 8 - إختيار الصورة - 1

تعليم تصميم المواقع – تعليم دريم ويفر 8 – إختيار الصورة – 1

  • فيظھر مربع حوار لإختيار الصورة
  • نقوم بتحديد الصورة من داخل مجلد الصور الذي أنشأناه سابقا وتأكد أيضا من اختيار Document من Relative to
    وتشغيل الاختيار Preview images لرؤية صورة مصغرة للصورة ونضغط OK

.

.

.

.

.

تعليم تصميم المواقع - تعليم دريم ويفر 8 - إختيار الصورة - 2

تعليم تصميم المواقع – تعليم دريم ويفر 8 – إختيار الصورة – 2

  • فتظھر الرسالة التالية

.

.

.

.

.

  • إذا لم تكن قد أضفت الصورة إلى مجلد الصور الموجود في مجلد الموقع، وقد تظھر رسالة تطلب نسخ الصورة إلى المسار الجديد فنختار نعم
تعليم تصميم المواقع - تعليم دريم ويفر 8 - إختيار الصورة - 3

تعليم تصميم المواقع – تعليم دريم ويفر 8 – إختيار الصورة – 3

.

.

.

.

.

.

  • حدد المكان ثم اضغط Save
تعليم تصميم المواقع - تعليم دريم ويفر 8 - حفظ الصورة في مكان آخر

تعليم تصميم المواقع – تعليم دريم ويفر 8 – حفظ الصورة في مكان آخر

.

.

.

.

.

.

  • وستظھر الصورة التالية
تعليم تصميم المواقع - تعليم دريم ويفر 8 - كتابة نص بدلا من ظهور الصورة

تعليم تصميم المواقع – تعليم دريم ويفر 8 – كتابة نص بدلا من ظهور الصورة

  • بعد ذلك تلاحظ إدراج الصورة في مساحة العمل ويفضل إضافة عناصر الصفحة بعد تقسيمھا إلى خلايا كي يسھل التعامل مع مختلف الصور في الموقع
  • ونكتب نص بديل يظھر في حال عدم ظھور الصورة

.

.

.

.

خصائص الصور

تعليم تصميم المواقع - تعليم دريم ويفر 8 - خصائص الصور

تعليم تصميم المواقع – تعليم دريم ويفر 8 – خصائص الصور

  • في image نرى نوع الصورة وحجمھا بالكيلوبايت مع نموذج مصغر لھذه الصورة
  • والمربع تحتها يستخدم لإدخال اسم للصورة واستخدامھ في الجافا سكريبت أو لإضافة أوامر التحكم لھذه الصورة
  • H نرى طول وW عرض الصورة بالوحدة الافتراضية للبرنامج وھي البيكسل ويمكننا تغيير أبعاد ھذه الصورة بإدخال قيم جديدة في ھذه الخانات وإذا أردنا إدخال القيم باستخدام وحدة القياس مليمتر اكتب الرقم الذي تريد متبوعاً بالرمز mm
  • وإذا أردت إدخال القيم بالسنتيمتر أضف الرمز cm وبالبوصة أضف الرمز in وھكذا
  • ومع ذلك فلا يفضل استخدام ھذه الطرق لتعديل الصور بل من الأفضل استخدام برنامج الفوتوشوب أو البرامج الأخرى المتخصصة بمعالجة الصور
  • ويمكننا استعادة القيم الأصلية للصورة بالضغط على الحرف W والحرف H لتعود إلى حجمھا الأصلي
  • Src يظھر ملف الصورة ومجالھا ويمكننا استبدال ھذه الصورة بصورة أخرى بالضغط على المجلد المجاور لاختيار الصورة ومن ثم الضغط على OK
  • Link لعمل رابط بين ھذه الصورة وملف آخر أو موقع انترنت آخر ويتم الضغط على المجلد لاستعراض الملف أو المستند الذي نرغب بربطھ بھذه الصورة
  • Target لتحديد النافذة أو الإطار الذي سيتم عرض الملف المرتبط بھذه الصورة، ويتم تفعيل ھذه الخانة بعد عمل Link للصورة
    Low Src لاختيار الصورة البديلة التي سوف تظھر عند بداية تحميل الصورة بشكل مبدئي حتى يتم تحميل الصورة بالكامل ويمكن استخدام نفس الصورة ولكن بجودة اقل أو عدد ألوان اقل من الصورة الأصلية
  • Align لمحاذاة النص بالنسبة للصورة إذا وجد معھا
  • Alt تحتوي على البيانات التي ستظھر في نافذة المتصفح في حالة عدم ظھور الصورة لأي سبب
  • Border لعمل إطار حول الصورة وادخال القيمة صفر لإزالة الإطار
  • وبجانبها يستخدم لمحاذاة الصورة بالنسبة للموقع الموجودة فيھ
  • H space / V Space يستخدم لعمل مسافة تحيط بالصورة راسياً وأفقيا
  • بالضغط على Edit يمكننا تعديل الصورة باستخدام برنامج Fireworks أو استخدام أي برنامج آخر لمعالجة الصور مثل الفوتوشوب

Image Rollover

تعليم تصميم المواقع - تعليم دريم ويفر 8 - تغيير الصورة عند الوقوف عليها بالماوس

تعليم تصميم المواقع – تعليم دريم ويفر 8 – تغيير الصورة عند الوقوف عليها بالماوس

  • ھي صور تتغير بمجرد مرور الماوس عليھا ولعمل ذلك ضع الماوس في المكان الذي تريد عمل الصورة فيھ واختر Rollover image كما ھو مبين في الشكل
  • يظھر لك المربع الحواري التالي

.

.

.

.

.

 

Rollover تعليم تصميم المواقع - تعليم دريم ويفر 8 - إدراج صور

Rollover تعليم تصميم المواقع – تعليم دريم ويفر 8 – إدراج صور

  • في الحقل Image name نقوم بكتابة الاسم البرمجي للصورة لاستخدامھ كمرجع عند كتابة كود جافا سكريبت أو في بي سكريبت وغيره
  • في الحقل Original Image نختار الصورة الأولى التي ستظھر عند بداية تحميل الصفحة
  • في الحقل Rollover image نختار الصورة البديلة التي ستظھر عند وضع المؤشر على الصورة الأولى ويجب أن تتساوى أبعاد الصورتين لكي لا يحدث تشوه للصورة التالية
  • نتأكد من اختيار Preload Rollover image لكي يتم تحميل الصورة الثانية أثناء تحميل الصفحة وبالتالي لا يحدث تأخير في ظھورھا عند تحريك المؤشر على الصورة الأولى
  • في الحقل When Clicked Go to URL نحدد الملف أو الصفحة التي سيتم فتحھا عند الضغط على ھذه الصورة ومن ثم نضغط المفتاح OK من لوحة المفاتيح ويمكن استعراض النتيجة بالضغط على المفتاح F12

 

تحرير الصور

 

 

تعليم تصميم المواقع - تعليم دريم ويفر 8 - تحرير الصور

تعليم تصميم المواقع – تعليم دريم ويفر 8 – تحرير الصور

  • قم بإدراج صورة كما تعلمنا سابقاً ولاحظ وجود ھذه الأدوات في الأسفل عند خصائص الصور
  • عند وضع الماوس على أداة من ھذه الأدوات يظھر اسمھا و سنبدأ الشرح من أول أداة من جھة اليمين

Sharpen حدة الصورة

تعليم تصميم المواقع - تعليم دريم ويفر 8 - حدة الصورة

تعليم تصميم المواقع – تعليم دريم ويفر 8 – حدة الصورة

  • عامل تصفية لزيادة حدة الأطراف ويؤثر بشكل خاص على الخطوط الخارجية للعنصر المصور ويتركز عملھ بالعنصر أقل مما يمس عامل التصفية العادي.
  • بعد إدراج الصورة قم بالنقر عليھ وتظھر الرسالة التالية
    اضغط OK
    بعد ذلك تظھر الصورة التالية
  • عند تغيير القيم تلاحظ التغير الذي طرأ على الصورة وقم بوضع القيم التي تناسب تصميمك ويمكنك التراجع كالتالي من قائمة تحرير اختر الأمر Undo.

Brightness/Contrast درجة الوضوح

 

تعليم تصميم المواقع - تعليم دريم ويفر 8 - درجة وضوح الصورة

تعليم تصميم المواقع – تعليم دريم ويفر 8 – درجة وضوح الصورة

  • حيث يتم تغيير درجة وضوح البيكسلات في الصورة وھذا يؤثر على إضاءة ظلال ولون الصورة وعادة ما تستخدم ھذه الأداة عندما تكون الصورة داكنة أو فاتحة جدا
    من ھنا يمكننا وضع القيم المناسبة للتصميم ويمكننا أيضا التراجع عن التعديلات كما سبق
  • ولاحظ إشارة صح داخل المربع تسمح بعمل معاينة للصورة أثناء التغيير وإذا قمت بإزالتھ لن تتمكن من ملاحظة التغيير إلا بعد ضغط OK وإغلاق النافذة وھذا ينطبق على جميع النوافذ

Resample إضافة العينات

  • ويتم ذلك بتكرار إضافة صف من البيكسلات وأخذ أقرب الألوان بعد قيامنا بتغييرات في قياس الصورة ( سواء بتكبيرھا أو تصغيرھا ) وھذا يؤثر في درجة وضوح الصورة ويتم ذلك فقط في الصور ذات الامتداد gif و jpeg واستخدام ھذه الأداة يعمل على زيادة / التكبير أو تقليل عند التصغير في حجم الصورة الأصلي
  • وليكون الموضوع أكثر بساطة فلندرج صورة ونكبرھا بالسحب من الأطراف وبعد ذلك نعمل Resample ونلاحظ الفرق
  • وكذلك الحال عند تصغير الصورة، ولاحظ أن حجم الملف سوف يتغير بعدھا، حجم الملف ستجده في أعلى الزاوية اليسرى للوحة الخصائص

Crop القص

تعليم تصميم المواقع - تعليم دريم ويفر 8 - تأكيد التحرير على الصورة

تعليم تصميم المواقع – تعليم دريم ويفر 8 – تأكيد التحرير على الصورة

  • حيث يتم تصغير مساحة الصورة الأصلية وذلك بقص الأجزاء الغير مھمة منھا للتركيز على ما ھو مطلوب
  • بعد ذلك بواسطة الماوس حدد الجزء الذي تريده من الصورة واضغط المفتاح Enter أو انقر نقرتين داخل المربع ويمكننا التراجع كما سبق
  • لعدم إظھار رسالة التحذير في كل مرة اضغط على المربع الفارغ في الرسالة ومن ثم OK
  • احتفظ بنسخة من الصور لان التعديلات تتم على الملف الأصلي للصورة
  • إن أدوات تحرير الصور في دريم ويفر تنطبق فقط على الصور ذات الامتداد gif و jpeg

Navigation عمل صور متغيرة

 

 

تعليم تصميم المواقع - تعليم دريم ويفر 8 - عمل صور متغيرة - 1

تعليم تصميم المواقع – تعليم دريم ويفر 8 – عمل صور متغيرة – 1

  • لعمل صور متغيرة اذھب إلى قائمة Insert واختر Image Objects ومنھا Navigation Bar كما في الصورة التالية

.

.

.

.

  • أو اختر Common ومنھا Navigation Bar كما في الصورة التالية

 

تعليم تصميم المواقع - تعليم دريم ويفر 8 - عمل صور متغيرة - 2

تعليم تصميم المواقع – تعليم دريم ويفر 8 – عمل صور متغيرة – 2

  • ستظھر لك النافذة التالية

 

  • Nav Bar Elements بإمكانك وضع أكثر من شريط باستخدام + للزيادة و- للحذف أما بالأسھم فتمكنك من التنقل بين الأشرطة
  • Element Name اسم الشريط
  • Up Image الصورة الأولى التي ستظھر بصفحتك
  • Over Image الصورة الثانية ستظھر بمجرد مرور السھم على الصورة الأولى
  • Down Image بمجرد النقر عليھا ستظھر الصورة الثالثة
  • Over While Down Image بمجرد مرور السھم على الصورة الثالثة ستظھر الصورة الرابعة
  • Alternate Text لكتابة نص أو تعليق حول الصورة بمجرد مرور السھم عليھا سيظھر التعليق
  • When clicked ,Go to Url وھيا لعمل ارتباط تشعيبي بمجرد الضغط على الصورة تلقائيا سينتقل لمسار الصفحة المختارة
  • In Main Window وھو الذي سيتم فتح فيھ المتصفح الجديد
  • Options
    Preload Image
    لتحميل الصور كلھا عند فتح المتصفح مباشرة
    Show “Down image” Initially لجعل الصورة الثالثة تظھر بالمقدمة عند فتح الصفحة
  • Insert بجانبھا قائمة منسدلة للاختيار بين ظھور شريط الصور بالشكل العمودي أو الأفقي
  • Use Table لإرفاق الصورة داخل جدول وعند اختيارك لھذا الأمر ستلاحظ ظھور خصائص الجدول أسفل البرنامج
    عند تطبيق ھذا الدرس ستتضح المفاھيم أكثر والموضوع سھل جداً
تعليم تصميم المواقع - تعليم دريم ويفر 8 - عمل صور متغيرة - 3

تعليم تصميم المواقع – تعليم دريم ويفر 8 – عمل صور متغيرة – 3

الخرائط الصورية

 

 

 

 

 

 

تعليم تصميم المواقع - تعليم دريم ويفر 8 - الخرائط الصورية - 1

تعليم تصميم المواقع – تعليم دريم ويفر 8 – الخرائط الصورية – 1

 

  • قم بأدراج صورة كما تعلمنا سابقاً بعد ذلك
  • اختر الشكل الذي تريد رسمھ مربع أو دائري أو شكل حر ثم ارسم على الصورة ومن خصائص في أسفل الصفحة قم بتحديد الصفحة التي تريد أن يفتحھا ھذا الرابط من خلال مربع الحوار Link
  • ومن المربع Target إذا اخترت blank يتم فتح الصفحة المستدعاه في إطار آخر وبقيت الاختيارات تفتحھا في نفس الإطار

.

.

.

.

  • ومؤشر الماوس يستخدم لتحريك الرسم الذي على الصورة
تعليم تصميم المواقع - تعليم دريم ويفر 8 - الخرائط الصورية - 2

تعليم تصميم المواقع – تعليم دريم ويفر 8 – الخرائط الصورية – 2

.

.

.

.

إدراج النصوص

  • قم بكتابة النص الذي تريد وبعدھا قم بتظليلھ ومن ثم يمكنك تغيير لونھ أو حجمھ أو أي خاصية تريد من خلال Properties في أسفل الصفحة أو من خلال قائمة Text

إنشاء الروابط

تعليم تصميم المواقع - تعليم دريم ويفر 8 - إنشاء الروابط

تعليم تصميم المواقع – تعليم دريم ويفر 8 – إنشاء الروابط

  • اكتب النص الذي ترغب بتحويلھ إلى رابط ومن ثم قم بتظليلھ من قائمة Window قم باختيار Properties من الخصائص قم بكتابة mailto يليھ البريد الالكتروني في الجزء Link كما في الصورة
  • كما يمكن عمل روابط للانتقال من صفحة إلى أخرى في الموقع وذلك من خلال تحديد النص أو الصورة التي نريد أن تمثل الرابط وبعد ذلك ننقر على المجلد الموجود قرب مربع النص Link بعد ذلك حدد الصفحة التي تريد أن ينقلك إليھا الرابط من مربع الحوار Select File واضغط OK

Use Table لإرفاق الصورة داخل جدول وعند اختيارك لھذا الأمر ستلاحظ ظھور خصائص الجدول أسفل البرنامج

 

تعليم تصميم المواقع - برنامج تعليم تصميم المواقع

تعليم تصميم المواقع – برنامج تعليم تصميم المواقع

Twitter Digg Delicious Stumbleupon Technorati Facebook

يوجد 11 تعليقا على “تعليم تصميم المواقع بدريم ويفر مجانا”

  1. موضوع مفيد :) شكرا

  2. حسن القحطاني Reply 26. Mar, 2013 at 2:01 pm

    اود ان اشكركل من قام بمثل هذه الاعمال لانه يستحق الشكر والتقدير فهو عمل لايقدر بثمن وفي الحقيقة اسعاركم جدا ميسرة للجميع واتمنى ان ارى يوما تكريما من الجهات المطورة للثقافة والمبدعين ومن يسعون لتحقيق هدف تنمية ابنائنا وتطوير من لايعلم عن التكنلوجيا شيئا بشروحات راقية مثل شروحاتكم تقبلو خالص تحياتي وتقديري حسن القحطاني

  3. سلام اخوتي انا من المغرب و لكن محتاج هذه الدروس من اجل احتراف ويبديزين، الا توجد طريقة لارساله لي ارجوك و شكرا

  4. السلام عليكم ورحمة الله وبركاته
    هل برنامج تصميم المواقع سوف يساعدنى كى اعمل فى موقع فر لانسر كمصممة مواقع ويجعلنى محترفه ولكم جزيل الشكر على ما تقدموه

  5. كيفية استلام موقع معمول بالدريم ويفر والفوتوشوب مع العلم انى مبدئية في الدريم ويفر حيث ان المصمم سوف يسافر ويترك الموقع حيث انه تم رفعه وانتهى من عمله ولكنه لا يريد ان يعطينى الملفات وقال انها على السيرفر وانا اريد الملفات لمعرفة كيفة عمله هل ده صحيح اما ارجو الرد

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

أكتب تعليقك وسنقوم بالرد عليك حالا في أقصر وقت ممكن.. شكرا لك