الدرس الثاني : إضافة النصوص والصور في دريم ويفر

وفي هذا الدرس نتحدث عن العمليات الأساسية في الدريم ويفر:
وهي اضافة النصوص والصور والتعامل معها ...

إدراج النصوص

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: لتحديد محاذاة الصوره بجانب النص بدرجات متفاوتة ومتقاربة ..ستظهر لك قائمة لتحديد محاذاة النص

أنتهى الدرس
نجمة سوريا

» الدرس الأول : أساسيات HTML
» الدرس الأول : شرح مبسط لواجهة البرنامج