مكتبة الدروس التعليمية

Archive for the ‘دروس برنامج دريم ويفر ’ Category

بسم الله الرحمن الرحيمطريقة عمل صور متغيره Rolloverوهي عباره عن صورة تتأثر بمجرد مرور السهم عليها لتغير شكلها لصوره اخرىاذهب الى Common ثم اضغط الزر Rollover Image

أوأذهب الى قائمة Insert> Interactive Images> Rollover Imageستظهر نافذة جديدة بها عدة اختيارات كما بالشكل التالي:

1- Image name: وهو ما ستكتبه عن اسم الصورة2- Original Image: وهيا الصورة الاصليه التى ستظهر بالبداية3- Rollover Image: وهي الصورة التى بمجرد مرور السهم عليها ستظهر مباشرة4- اما Preload rollover image تلاحظ وضع عليها علامة صح والمقصد منها عند فتح الصفحه سيتم تحميل الصورة الثانيه قبل ظهورها فبمجرد مرور السهم على الصورة الاولى ستظهر الصورة الثانية مباشرة .5- Alternate text: لكتابة نص او تعليق حول الصوره بمجرد مرور السهم عليها سيظهر التعليق6- When clicked ,Go to Url : وهيا لعمل ارتباط تشعيبي بمجرد الضغط على الصوره تلقائيا سينتقل لمسار الصفحة المختارةطريقة عمل أكثر من صورةأما لكيفية عمل أكثر من صورة بمجرد مرور السهم او بمجرد النقر او بمجرد خروج السهم من اطار الصورةأذهب لـ Common وأختر زر Navigation Bar

Insert> Interactive Images> Navigation Bar

1- Nav Bar Elements: بإمكانك وضع أكثر من شريط بإستخدام +للزيادة و – للحذف اما بالأسهم فتمكنك من التنقل بين الأشرطة2- Element Name: أسم للشريط3- Up Image: الصورة الأولى التى ستظهر بصفحتك4- Over Image: الصورة الثانية ستظهر بمجرد مرور السهم على الصورة الأولى5- Down Image: بمجرد النقر عليها ستظهر الصورة الثالثة6- Over While Down Image: بمجرد مرور السهم على الصورة الثالثه ستظهر الصورة الرابعة7- Alternate Text: لكتابة نص او تعليق حول الصوره بمجرد مرور السهم عليها سيظهر التعليق8- When clicked ,Go to Url : وهيا لعمل ارتباط تشعيبي بمجرد الضغط على الصوره تلقائيا سينتقل لمسار الصفحة المختارة9- In Main Window: وهو الذي سيتم فتح فيه المتصفح الجديد10-Options: -Preload Image * لتحميل الصور كلها عند فتح المتصفح مباشرة حتى يسهل عملية مرور السهم لتسريع اظهار الصور -Show” Down image “Initially * لوضع الصورة الثالثه تظهر بالمقدمه حين فتح الصفحة11- Insert:بجانبها قائمة منسدلة لإختيار بين ظهور شريط الصور بالشكل العمودي ام الأفقي12- Use Table: لإرفاق الصورة داخل جدول وعند اختيارك لهذا الأمر ستلاحظ ظهور خصائص الجدول اسفل البرنامج

إضافة النصوص والصور

1- Format: بمجرد الضغط عليها ستظهر نافذة منسدلة لاختيار فقرة ام لعنوان أو نص طبيعي 2- A : بمجرد الضغط على الحرف سيتحول لاختيار مابين CSS ام HTML وستلاحظ ظهور قائمة منسدلة بجانب الحرف وهو يعتبر منسق لكلاهما بالنسبة للفونتفأختر ماتريده من الفونت أو بإمكانك اختيار فونت أخر3- Size: حجم الفونت 4- Text Color: لون النص 5- Bold: لتعريض الخط6- Italic: لجعل النص مائل7- لكتابة النص إلى اليسار 8- لكتابة النص إلى الوسط9- لكتابة النص إلى اليمين10- لعمل النص بمحاذاة واحدة11- Link:لعمل ارتباط تشعيبي للنص12- تسمى بالساعة وعملها يتوقف على وجود موقع متكامل في نافذة Files كل ما عليك هو سحب شكل الساعة لملف الموقع لديك بنافذة البرنامج وهيا ميزة رائعة ببرنامج الدريم ويفر13- مجرد الضغط على الفولدر ستظهر نافذة لاختيار الملف المراد ربطه مع النص14- Target: ستظهر نافذة منسدلة لتحديد عند الضغط على النص المرتبط بصفحة أخرى هل تفضل فتح الرابط بصفحه مستقلة ام بنفس الصفحة ام بأعلى الصفحة ام بصفحه جديدة مستقلة15- List Item: ستظهر نافذة بمجرد الضغط عليها لتغير شكل النقاط أو الأرقام التي بجانب النص

1- نوع التعداد 2- لتحديد شكل التعداد3- لتحديد العدد الذي سيبدأ فيه التعداد الرقمي4- لتحديد لكائن رقمي أخر شكل جديد و لتحديد بدأ ترقيم التعداد الرقمي16- بمجرد الضغط ستظهر قائمة لاختيار عرض الخصائص HTML or CSS 17- زر للمساعدة18- للتحرير المباشر للـغة HTML 19- لتصغير لوحة الخصائص طريقة إضافة الصوريتميز دريم ويفر بسهولة إضافة الصور لعملك وبقدرته لتحرير الصورلإدراج صورة اذهب لفتح لوحة إدراج الكائنات والتي سبق شرحها في واجهة البرنامجCommon>Imageأو بالذهاب لقائمة Insert>Image مفتاح الاختصار Ctrl + Alt + I

بعد انتهاءك من إرفاق الصورة قم بالضغط عليها مره واحده ستلاحظ ظهور خصائص الصورة بأسفل البرنامج ( أنظر للشكل التالي )

1- مربع توضيحي لشكل الصورة التي تم تحديدها وبجانبها كلمة Image وحجم الصورة وبأسفلها مستطيل فارغ لكتابة اسم الصورة2- Width: مقاس عرض الصورة مع إمكانية بالتعديل عليها , Height: مقاس طول الصورة مع إمكانية التعديل عليها3- Src: من شكل خصائص الصورة ستلاحظ وجود مسار للصورة وهو يقوم بتحديدها لك لمعرفة مسار الصورة بالبرنامج بإمكانك القيام بتجربة السحب على أيقونة شكل الساعة وأسحبها للصورة سيظهر تحديد مسار الملف بالكامل4- Link: لوضع ارتباط تشعيبي على الصورة 5- Alt: عند تمرير السهم على الصورة بموقعك سيظهر عليها اسم ما فبإمكانك تحديد ما تريد كتابته6- Edit: عند تغيرك بخصائص الصورة فبمجرد الضغط على الأيقونة Edit سيتم تعديلها فوراً ..و Rest Size لإرجاع حجم الصورة الأصلية كما كان.7- Map: خاص برسم خرائط للصور فالأمر أشبه بعمل ارتباطات متعددة لصورة واحده ولكي نقوم بعمل ارتباطات متعددة سنستخدم أداوت للرسم 8- Pointer: سهم لتحريك الأشكال المرسوم على الصورة 9: Hotspot Tool: هذه الثلاث أدوات الخاصة برسم مربع أو مستطيل أو رسم عشوائي للمضلع وبمجرد رسم المربع ستظهر لوحة خصائص جديدة لعمل ارتباط عليها وتحديد مسار فتح الإطار في حاله النقر على الصورة10- Vspace: لعمل إطار شفاف (مخفي) فقط لكي يبعد عن أي شي يقع من فوقه أو بأسفله11- Hspace: لعمل إطار شفاف (مخفي) فقط لكي يبعد عن أي شي يقع من جهة اليمنى أو اليسرى 12- Target: عندما تحدد ارتباط ألتشعبي على الصورة بإمكانك تحديد طريقة فتح الصفحة إذا كانت صفحة مستقلة أو بنفس الصفحة وسبق شرحها بواجهة البرنامج13- Lowsrc: وهيا ميزة رائعة ترفق صورة بمقاس صغير وستظهر لك الصورة بالموقع في حين يتم تحميل المقاس الأصلي14- Border: نكتب رقم ما لتحديد إطار للصورة15- لتحديد محاذاة الصورة يمين أو يسار أو بالمنتصف16- Align: لتحديد محاذاة الصورة بجانب النص بدرجات متفاوتة ومتقاربة ..ستظهر لك قائمة لتحديد محاذاة النص