تعليم ادوبي دريم ويفر

[JAMOOOOL]

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

شـــرح واجهــــة دريــم ويفــر

سنبدأ بشرح واجهة برنامج الادوبي دريم ويفر بدون تعقيد وبإذن الله سيكون الشرح مبسط للمبتدئين
فبرنامج الادوبي دريم ويفر أصبح من البرامج المهمة لعمل موقع متكامل فالبرنامج يُمكنك من استخدام الكائنات اللازمة لتصميمك..

واجهة البرنامج :

بعدما تعرفنا على شكل واجهة البرنامج نبدأ بشرحها ..

شريط الأدوات:

1- لإظهار شاشة العمل بأكواد صفحتك.
2- يعرض لك قسمين الجزء العلوي بالأكواد والأسفل بصفحة عملك.
3- يعرض العمل بالكامل بدون أكواد.
4- لعرض عملك اونلاين.
5- لكتابة اسم صفحة العمل.
6- بالضغط عليه ستظهر قائمة للتحكم بموقعك وأدارته.
7- لعرض عملك على المتصفح.
8- لعمل تحديث.
9- لفحص كود الصفحة.
10- يحتوي على جميع أسماء التوابع المستخدمة بالصفحة.
11- بمجرد الضغط عليها تظهر قائمة لإظهار المسطرة أو إخفاء كائنات وإظهارها.

مجموعة القوائم المرفقة أي Insert:

1- صفحة العمل : خاصة لعمل تصميم عملك .
2- لوحة إدراج الكائنات:

عند اختيارك لكلا من القوائم ستظهر لكل منهما شريط بأسفلها
لنفرض اخترنا Text سيظهر لك الشكل كالتالي:

وهذا الجدول لفهم دور القوائم:

Common

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

Layout

يحتوى على جداول و رسم اللاير وأطارات لتحديد الصفحه

Text

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

Frames

لتقسيم صفحة موقعك لتقسيمات متنوعه

Forms

لإدراج نص وحقل نصي وفريم للإرسال والقوائم ولإضافة الصور داخل الفريم

Templates

قوالب وارتباطات لموقعك وقبل كل شي يجب ان يكون موقعك محفوظ لديك للعمل عليها

Characters

لإدراج رموز ليست موجوده بلوحة المفاتيح

Media

لإضافة الفلاش وازرارفلاشيه متنوعة ونص فلاشي والجافا وإضافة الصوت لها

Head

لعمل تجديد للصفحه اي Refresh ولإضافة تعليقات ووصف عن موقعك

******

لإضافة السكربت

Application

لعمل سيرفر بموقعك

شريط الحالة:

1- يظهر لك الأكواد الأتش ام أل HTML بصفحة عملك بإمكانك بزر الماوس الأيمن أن تحذف كود ما أو بإضافة تعديل للكود أما لو ضغطت بزر الفأرة الأيسر سيحدد لك الكود بصفحة عملك ويظلله.
2- التحكم بحجم العمل بتكبيرها أو تصغيرها من خلال الضغط عليها ستظهر قائمة اختر المقاس الذي تريده.
3- يظهر حجم ملف عملك ووقت تحميله.

شرح تفصيلي لنافذة Page Properties :

أذهب لقائمة Modify ثم اختر Page Properties أو بالضغط مباشرة في ملف عملك رايت كليلك بالماوس وستظهر قائمة اختر منها Page Properties ومفتاح الاختصار Ctrl + J

1- Title: لكتابة عنوان الصفحة ستظهر بأعلى المتصفح .
2-Background Image : لإرفاق صورة لخلفية موقعك بالضغط على زر Browse اختر ملفك وحدد الصورة.
3-background : لون خلفية الصفحة
4- Text: لاختيار لون النص انظر للشكل التالي
5- Links: لون الارتباط بصفحة أخرى
6-Visited Links : لون الارتباط الذي تم زيارته سابقاً
7- Active Links: لون الارتباط عند الضغط
8-Left Margin + Top Margin + Margin Width + Height =تشير إلى مساحة العمل بالأعلى أو بأي جهة أخرى مع تحديد طول والعرض للعمل
9-******** Encoding : لتحديد تشفير الصفحة
10- reload: لتحديث الصفحة
11-Tracing Image :بإمكانك تجربتها لوضع صورة فلها مميزات رائعة بسهولة تحريكها من كائن لكائن آخر .
12-Image Transparency :لتحديد شفافية الصورة
13- ******** Folder: مكان حفظ عمل ملفك بالفولدر
14- Site Folder: مكان حفظ ملفك بالموقع

انتهى الدرس ولا تنسونا من صالح دعائكم

[JAMOOOOL]

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

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

انتهى الدرس ولا تنسونا من صالح دعائكم

[JAMOOOOL]

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

ولا تنسونا من صالح دعائكم

[JAMOOOOL]

سنتناول في هذا الدرس شرح ثلاث استخدامات للفلاش

النص الفلاش – أزرار بالفلاش – إرفاق الفلاش

طريقة إضافة نص فلاشي

بإمكانك في برنامج دريم ويفر إضافة نصوص فلاشيه بطريقة سهلة وسريعة ..
قبل البدء يجب ان تقوم بحفظ عملك
من إدراج الكائنات Media ثم اختر من شريط الأدوات زر Flash Text
او بالذهاب لقائمة Insert> Interactive Images> Flash Text
ستظهر نافذة جديدة كما بالشكل التالي:

1- Font: نوع الخط الذي ستكتبه
2- Size: حجم الخط
3- أزرار معروف طريقة استخدام
- Bold: لتعريض الخط
- Italic: لجعل النص مائل
- لكتابة النص الى اليسار
- لكتابة النص الى الوسط
- لكتابة النص الى اليمين
4- Color: لتحديد لون النص
5- Rollover color: لتحديد لون النص الذي سيظهر عند مرور السهم علي النص
6- Text: لكتابة نصك
7- Show Font : لإظهار نوعية شكل الفونت داخل خانة النص
8- Link: لعمل أرتباط تشعيبي على النص
9- Target: يمكنك اختيار طريقة ظهور رابط النص بمتصفح مستقل ام بنفس الصفحه ستظهر لك قائمة منسدلة اختر منها ماتريد
10- Bg Color: لون خلفيه النص وليس الموقع
11- Save As: لحفظ الملف الفلاشي لديك بالجهاز ومن ثم تحميله مع ملف موقعك بالانترنت

طريقة إضافة أيقونات أزرار بالفلاش

من إدراج الكائنات Media ثم اختر من شريط الأدوات زر Flash Button
او بالذهاب لقائمة Insert> Interactive Images> Flash Button

1- Sample: لمشاهدة شكل الأيقونة بالفلاش وبإمكانك مشاهدة التأثير بمجرد تمرير السهم على الصورة
2- Style: لإختيار الأزرار بالفلاش
3- Button Text: لكتابة النص فوق الزر الفلاشي
4- Font: لإختيار نوعية الفونت (الخط)
4- Size: حجم النص
5- Link: لإضافة رابط تشعيبي على الزر الفلاشي
6- Target: لتحديد مسار فتح الأرتباط التشعيبي بمتصفح جديد او بنفس الصفحة
7- Bg Color: لإختيار خلفية لون الزرار الفلاشي بإمكانك الضغط على هذه الايقونه لجعله بدون لون
8- Save As: تلقائيا سيتم تحديد أسم الملف الفلاشي او بإمكانك كتابة الاسم واختيار مكان حفظ الملف الفلاشي من browse
بإمكانك حفظ عملك وتجربة الزر الفلاشي
بعد انتهاءك من عمل الأزرار ستلاحظ ظهور خصائص الزر الفلاشي بأسفل البرنامج كالشكل التالي:

1- Flash Button: لكتابة أسم الزر الفلاشي
2- Width: مقاس عرض الصورة مع إمكانية بالتعديل عليها , Height: مقاس طول الصورة مع إمكانية التعديل عليها
3- File: لإرفاق الملف الفلاشي للزر
4- Edit: عند تغيرك بخصائص الصورة فبمجرد الضغط على الايقونة Edit سيتم تعديلها فوراً ..و Rest Size لإرجاع حجم الزر الاصلي كما كان
5- V space: لعمل اطار شفاف (مخفي) فقط لكي يبعد عن اي شي يقع من فوقه او بأسفله,,.. H space: لعمل اطار شفاف (مخفي) فقط لكي يبعد عن اي شي يقع من جهة اليمنى او
6- Quality: لتحديد دقة الزر الفلاشي وسرعته ستظهر قائمة منسدلة اختر ما تشاء (Low يهتم بعمل السرعه و High يهتم بدقة الزر اما Auto Low يعمل على سرعة ظهور الزر الفلاشي و Auto High يعمل بسرعة ودقة الزر الفلاشي والأفضل اختيار High )
7- Scale: بجانبه قائمة منسدلة لثلاث خيارات ( Default: يجعل النص كما هو دون التعديل عليه او تغير دقته),(No Border:سيتم ظهور النص بعرض الزر الفلاشي مما يؤدي الى قلة دقة النص),(Excat Fit: سيقوم بجعل النص يتمدد على حسب طول الزر الفلاشي مما يفقد جودته )
8- Align: لتحديد محاذاة الصوره بجانب النص بدرجات متفاوتة ومتقاربة ..ستظهر لك قائمة لتحديد محاذاة النص
9- Bg: بإمكانك إختيار لون خلفية الزر الفلاشي
10- Play: لتشغيل الزر الفلاشي بصفحتك في البرنامج ثم إضغط Stop لإيقافه
11- Parameters: لعمل البرامترات للزر الفلاشي

طريقة إضافة ملفات الفلاش

أذهب لقائمة Insert > Media > Flash مفتاح الإختصار Ctrl + Alt + F
ستظهر لك نافذة أختر منها ملفك الفلاشي بإمتداد SWF وسيتم إدراجه داخل صفحتك

انتهى الدرس ولا تنسونا من صالح دعائكم

[JAMOOOOL]

طريقة عمل الجداول بدريم ويفر

إذهب الى شريط Table او Layout ثم أختر زر Insert Table
ستظهر لديك نافذة انظر للشكل التالي:

1- Rows: لوضع عدد أسطر الجدول
2- Columns: لوضع عدد الأعمدة بالجدول
3- Cell Padding: لتحديد مساحة بين الخلية وأطار الخلية بالبيكسل
4- Cell Spacing: لتحديد المساحة بين الخليتين بالبيكسل
5- Width: لتحديد عرض الجدول (بالبيكسل او بالنسبة المئوية)
6- Border: لتحديد عرض الإطار للخلية فإذا حددنا رقم (صفر) سيصبح إطار الخليه غير ظاهر بصفحتك
عند انتهاءك من أضافة الجدول ستلاحظ ظهور خصائص الجدول بأسفل البرنامج (أنظر للشكل التالي):

Table ID -1: لكتابة إسم الجدول
Rows -2: عدد أسطر الخلية,, Cols: عدد أعمدة الخلية كلما إزداد الرقم كلما إزدات الأعمدة
ًWidth -3: لتحديد عرض الجدول بالبيكسل او بالنسبة المئوية , Height: لتحديد طول إرتفاع الجدول بالبيكسل او بالنسبة المئوية %
Cell Pad -4: لتحديد مساحة بين الخلية وأطار الخلية بالبيكسل
Cell Space -5: لتحديد المساحة بين الخليتين بالبيكسل
Align -6: لتحديد محاذاة الجدول يمين او يسار او بالمنتصف
Border -7: لتحديد عرض الإطار للخلية
Clear Column Widths -8: كنا بالسابق حددنا عرض الخليه اما بهذه الخاصية سيتم إعادة وضع الجدول الى السابق بإلغاء عرض الخلية
Convert Table Widths to Pixels -9: لجعل مساحة الجدول بالبيكسل
Convert Table Widths to Percent -10: بمجرد تكرار النقر سيزداد مساحة بالنسبة المئوية فقط بعرض الجدول
Clear Row Height -11: لتحديد طول الجدول كما كانت بالسابق
Convert Table Height To Pixels -12:يقوم بتحديد طول الجدول الى البيكسل
Convert Table Height To Percent -13:يقوم بتحديد طول الجدول الى النسبة المئوية
Bg Color -14: لون خلفية الجدول
Brdr Color -15: لتحديد لون إطار الجدول
Bg Image -16: لإرفاق صورة او شكل ما بخلفية الجدول

ترتيب الخلايا داخل الجدول

للإظهار خصاص الخلية قم بتحديد جميع الخلايا الموجودة داخل الجدول ستلاحظ بأسفل البرنامج الخصائص

Row -1: أسطر الخلية
Merges Selected Cells Using Spans -2 * عند تحديد جميع الخلايا سيتم تنشيط الزر وبمجرد الضفط عليه سيقوم بمدج كل الخلايا بخلية واحدة
Splits Cell into rows or columns -3* لتقسيم الخلية التى تم تحديدها وبمجرد الضغط عليها ستظهر نافذة بخصائص لأسطر الخلية والأعمدة
Horz -4: لتحديد وضع النص داخل الخلية (بالمنتصف او يمين او يسار)
Vert -5: لتحديد وضع النص عمودي (أعلى او أسفل او وسط او بمحاذاة السطر)
ًWidth -6: لتحديد عرض الجدول بالبيكسل او بالنسبة المئوية , Height: لتحديد طول إرتفاع الجدول بالبيكسل او بالنسبة المئوية %
No Wrap -7: ميزة رائعه بالجدول فبحالة كتابة النص وأخذ حيذ كبيراً من المساحة يقوم تلقائياً بزيادة حجم الخلية دون تغير او التأثير على النص

Header -8: يجعل النص يعرض bold ويكون بالمنتصف في كل خلية

BG -9: لإرفاق صورة خلفية للخلية
BG -10: لإختيار لون خلفية الخلية مع إمكانية تحديد بكل خلية لون خلفية مختلف بمجرد تحديدها
Brdr -11: لإختيار لون إطار الخلية

طريقة إدراج جداول جاهزة بالبرنامج

إذهب لقائمة Commands>Format Table
ستظهر لك نافذة جديدة إنظر للشكل التالي:

1- إختيار نماذج الجدول
2- شكل النماذج تظهر هنا
3- Row Color

First: لتحديد لون خلفية السطر الأول أول سطرين بالترتيب بعد كل سطرين
Second: لتحديد لون خلفية السطر الثالث والرابع
Alternate: بجانبه قائمة منسدلة لتحديد اختيار طريقة ترتيب اللون كل سطر ام سطرين ام ثلاث ام كل اربع اسطر
4- Top Row
Align: لعمل محاذاة النص داخل الخلية
Style Text: نوعية شكل النص

Bg Color: لتحديد لون خلفية السطر

Text Color: لتحديد لون النص
5- Left Col
Align: لتحديد محاذاة النص بالطرف الأيسر
Style Text: نوعية شكل النص
Border: لتحديد عرض إطار الجدول
Apply All Attributes to Td Tags: لإلغاء كود TR وكتابة بدلا عنه TD

انتهى الدرس ولا تنسونا من صالح دعائكم