50
- ۱ -

Dream course 1

  • Upload
    kdas81

  • View
    239

  • Download
    6

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Dream course 1

­۱­

Page 2: Dream course 1

­۲­

كل من يرغب تعلم إلي.....االنترنت كل مهتم بتصميم صفحات إلى)..........دريم ويفر (تصميم الصفحات باستخدام البرنامج االحترافي كلية التقنية الى كل طالب علم واخص بالذكر زمالئي طالب ال

)..........المملكة العربية السعودية(بالقنفذة أهدي هذا الكتاب داعيا المولي عز وجل أن ينفعني واياكم بهذا

.وأن يمكننا من نشر راية االسالم عاليا....العلم

إهداء خاص www.cb4a.comالي موقع كتب الحاسب العربية

Page 3: Dream course 1

­۳­

الحمد هللا رب العالمين والصالة والسالم على سيدنا محمد وعلى .الة وصحبة وسلم

وليس ...ماوضع بين يديك االن ليس تأليفا تفردت بنسج أفكارة ماتنظرله ......كتابا منهجيا قامت له الخبرات واجتهدت لة العقول

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

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

­:المصادر التي إعتمدت عليها شبكة المنهل التعليمية.۱الموسوعة العربية للكمبيوتر واالنترنت.۲۳.com.homearab.www

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

إن اهللا على كل شئ قدير.لك العلم والمعرفة ...................................................................

محمد علي الناشريالكلية التقنية بالقنفذةالمملكة العربية السعودية[email protected]

Page 4: Dream course 1

­٤­

..٥مقدمة..۷إعدادات اللغة..۱۰القوائم.. ۱٤الموقعإنشاء..۱۷انشاء الصفحة.. ۱۸الجداول۲۳النصوص

۲٥الصور۳۳الخرائط الصوريةالروابط التشعبية ۳٤۳۷ادراج الفالش٤۲الطبقات٤٥نماذج البيانات٤۸االطاراتالنماذج ٤۹٥۰المكتبة

Page 5: Dream course 1

­٥­

م ويف ر واح د م ن أق وي ب رامج ت صميم فعال لقد أح سنت االختي ار ـ عزي زي الق ارئ ـ فبرن امج دري على االطالق فهو يوفر عليك الجهد ويمنحك مزيدا من الحرية ف ي ­ نظرة شخصية –مواقع الويب

تصميم موقعك حسب مايروق لك

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

)عليهما تراه هو ما تحصل(WYSIWYGبتقنية

:اإلدراجشريط)۱والعديد من المزايا التي ............ادراج الصور والجداول وملفات الفالش والروابط والتاريخ

......سنشرحها بالتفصيل الحقا

Page 6: Dream course 1

­٦­

:األدواتريطش)۲ واإلثنان كتابة الكودالتصميم و:الثالثيحتوي على أزرار تساعدك على التنقل بين وضعيات العمل

.على مجموعة من االزرار سنشرحها الحقاأيضايحتويكما.معا

:اللوحاتمجموعة)۳.حتوىموقعك وتغيير وتعديل المعلومات في صفحاته من خالل الم معاينةالبد أنك ستحتاج الى

.ستجد هنا مجموعة من اللوحات تعينك على ذلك

:العملنافذة)٤وستصمم صفحتك من خاللها.هذا هي النافذة التي ستعمل عليها

:الخصائص)٥عنصر في دريم ويفر له خصائص معينة، بمجرد الضغط عليه تتغير لوحة الخصائص حسب كل.يناسب ذلك العنصرما

Dreamweaverفي /مالحظة MX2004 بعض الشئ في ترتيب شريط اختالف هناك انظر الشكل االدراج

أو اختر .فقط اختر من القائمة المنسدلة الواضحة امامك في الشكل لتجد ماتبحث عنة امامك show as Tabsلتعرض لك على شكل ايقونات .

Page 7: Dream course 1

­۷­

فقط غير بعض االعدادات وتمتع بهذا البرنامج … يدعم اللغة العربيةMXبرنامج الدريم ويفر

.االحترافي

ـ:لضبط اعدادات اللغة اتبع الخطوات اآلتية

1. Edit2. Preferences

Ctrl+uأو اضغط

Fontsاختر Categoryمن قائمة

Fontعند settingsأواختر اختر اللغة العربية Otherربية الخطوط العمايناسبك من ثم اختر.في القوائم السفلية

Page 8: Dream course 1

­۸­

مرة أخري اختر االتيCategoryمن قائمة

4. New DocumentDefault encoding

Otherة أو اختراختر العربي

ثم اضغط موافق

5. OK

اللغة العربية قد ضبطت اعداداتوبهذا تكون

)Otherاذا لم تنحح معك هذة االعدادات أولم تروق لك كلمة (مالحظة

ـ : قم بعمل االتي

Page 9: Dream course 1

­۹­

:من داخل البرنامج، افتح الملف­C:/Program Files/Macromedia/DreamweaverConfiguration/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"/>

.احفظ الملف، و أعد تشغيل البرنامج-

وسوف تالحظ الفرق.......ثم قم بضبط االعدادات كما تعلمنا سابقا

Page 10: Dream course 1

­۱۰­

File

تشتمل على وظائف فتح مستند جديد،

الحفظ وأوامر وفتح مستند موجود، كما تحتوي على أوامر االستيراد والتصدير والتحويل وتحتوي ايضا على أمر مهم

)انظر الشكل( المعاينة في المتصفحجدا وهو امر

Editeوتشمل وظائف القص واللصق والنسخ

واالدراج والتحديد والبحث كما تشمل أيضا وقائمة بالتفضيالت.على مكتبة األكواد

Page 11: Dream course 1

­۱۱­

View تمكنك من مشاهدة مختلف الخصائص للمستند مثل التصميم واألكواد وأنواع

. مكونات الصفحة وأدوات دريم ويفر المختلفة كماتتيح لك مثل المسطرة أو وضع الشبكة

.ة الكاملة للصفحةد المشاه

insert هي بديلة لشريط األدراج فمن خاللها يمكنك ادراج الصور والجداول والمؤثرات

وماوالروابط التشعبية المختلفة. إلى ذلك

Page 12: Dream course 1

­۱۲­

modify تمكنك من تعديل خصائص عناصر الصفحة ويمكنك باستخدامها تحرير

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

. الجاهزه

textيمكنك من التحكم في محاذاة النص ونوع الخط

وحجمة ولونة والتدقيق االمالئي

Page 13: Dream course 1

­۱۳­

commandsالتسجيل وتحرير القائمة تمكنك

.ألبومات الصور واعداد HTMLوتنظيف وسوم .والتحكم في خلفية وشكل الجدول

site

مشاهدة ملفات الموقع تمكنك من فتح وانشاء المواقعو

.وتحرير الموقع والتعديل في خصائصة

window تمكنك من الدخول الى

. مختلف لوحات التحكم في البرنامج

Page 14: Dream course 1

­۱٤­

ونستطيع من خاللة إدارة الموقع وتظهر . بإنشائة موقع عبارة عن مجلد نقومال­:أهمية إنشاء الموقع في اآلتي

إدارة الموقع وسهولة التحكم بةتسهيل عمليات الحذف وتغيير االسماء واالماكنيسهل على البرنامج عملية تجديد الروابط المكسورة وإدارة الملفات على السيرفرمن خالل هذا البرنامجيسهل معاينة

:لعمل موقع ويب في دريم ويفر اتبع اآلتي

Site من القائمة Newاختر ­)۱

Dreamweaverفي /مالحظة MX2004اختر االتي :­

Site>manage Site…

Newثم اختر

Siteواختر

Siteلديك في أعلى النافذة­۲ DefinitionخيارانلديكBasicو

Page 15: Dream course 1

­۱٥­

Advancedسنختار هناBasic.

.MySiteوسيكون عنوان موقعنا هنافي مربع اإلسم أكتب اسم موقعك.­۳

.Nextاضغط.٤

اذا كنت تريد أن .....ما كنت تريد استخدام لغة برمجة معينةاآلن سيسألك إذا.٥.No اخترأو ......ثم حدداللغة YESتستعمل لغة برمجة معينة اختر

.Nextاضغط­٦

: ثالثة خياراتفي هذه النافذة يعطيك.۷

عمل الموقع محليا ثم رفعه إلى سيرفر:األولالشبكة المحليةعمل الموقع على سيرفر:الثاني عمل الموقع على سيرفر :الثالثFTP أوRDS

اختر إحداها حسب ما ينا سبك

بإنشاءه المجلد الذي قمنااستخدم ا(وقع، واختر أين ستضع مجلد الم­۹Myوهو Site ،

.Nextاضغط.­۱۰

:كيف تتصل بموقعك يعطيك خيارات.­۱۱

Noneال شيء.FTPعن طريق بروتوكولFTP.

Page 16: Dream course 1

­۱٦­

Local/Networkإذا كنت تستخدم مجلد في شبكة أو على سيرفر في.جهازك

RDSإذا كنت تتصل بموقعك عن طريقRDS.SourceSafe Databaseإذا كنت تتصل بموقعك عن طريق

SourceSafe Database.WebDAVإذا كنت تتصل بموقعك عن طريقWebDAV.

Nextاضغط

هذه الوظيفة Noللملف اخترسيسألك عما إذا كنت تريد عمل دخول وخروج­۱۲دخول أكثر من شخص مهمة لمن يعمل مع مجموعة على اإلنترنت للتأكد من عدم

.ملف الواحدلل

Nextكما قلنا و اضغطNoاختر.­۱۳

Done اضغطكسيعرض لك معلومات موقع.­۱٤

­:إذا أردت إجراء تعديل ما على موقعك افعل االتي

Site<<Edit Site

ثم اخترEdite

حذف الموقع

Page 17: Dream course 1

­۱۷­

عدل ماتريد تعديلة في موقعك ثم

Done

ـ:إلنشاء صفحتك االولى اتبع الخطوات التالية

۱.file>> Newمثل الصفحا ت الجامدة (Categryها من اؤاختر نوع الصفحة المراد إنش.۲

)الخ......صفحات الديناميكيةلأو احدد اللغة التي ستستخدمها في بناء الصفحة.۳ من أسفل القائمةcreateاضغط دبل كليك أو .٤

لتحديد خصائص الصفحة ولون الخلفية والدراج صورة لتكن خلفية للصفحة.٥ولتحديد لون النص وتمييز الروابط بالوان تتناسب مع حالتها اضغط من داخل

Page اختر Modifyمساحة العمل يمين الفارة أومن قائمة properties

Page 18: Dream course 1

­۱۸­

Insertثم أختر زر Layoutاو Tableإذهب الى شريط Table

ستظهر لك هذة النافذة

۱­Rows:لوضع عدد أسطر الجدول

۲­Columns:لوضع عدد األعمدة بالجدول

۳­Cell Padding:ة وأطار الخلية بالبيكسللتحديد مساحة بين الخلي

٤­Cell Spacing:لتحديد المساحة بين الخليتين بالبيكسل

٥­Width: بالبيكسل او بالنسبة المئوية(لتحديد عرض الجدول(

٦­Border: سيصبح إطار )صفر(لتحديد عرض اإلطار للخلية فإذا حددنا رقمالخليه غير ظاهر بصفحتك

Page 19: Dream course 1

­۱۹­

Table ID كتابة إسم الجدولل:1-

Rows عدد أعمدة الخلية كلما إزداد الرقم كلما :Cols،، عدد أسطر الخلية:2-إزدات األعمدة

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-

Page 20: Dream course 1

­۲۰­

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

Row أسطر الخلية:1-

Merges Selected Cells Using Spans عند تحديد جميع الخاليا *2-ج كل الخاليا بخلية واحدةسيتم تنشيط الزر وبمجرد الضفط عليه سيقوم بمد

Splits Cell into rows or columns لتقسيم الخلية التى تم تحديدها *3-وبمجرد الضغط عليها ستظهر نافذة بخصائص ألسطر الخلية واألعمدة

Horz )بالمنتصف او يمين او يسار(لتحديد وضع النص داخل الخلية :4-

Vert ) أسفل او وسط او بمحاذاة السطر اوأعلى(لتحديد وضع النص عمودي :5-

Width :Height، لتحديد عرض الجدول بالبيكسل او بالنسبة المئوية :6-%لتحديد طول إرتفاع الجدول بالبيكسل او بالنسبة المئوية

No Wrap ميزة رائعه بالجدول فبحالة كتابة النص وأخذ حيذ كبيرا من :7-لخلية دون تغير او التأثير على النصالمساحة يقوم تلقائيا بزيادة حجم ا

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

BG إلرفاق صورة خلفية للخلية:9-

BG إلختيار لون خلفية الخلية مع إمكانية تحديد بكل خلية لون خلفية مختلف :10-بمجرد تحديدها

Brdr إلختيار لون إطار الخلية:11-

Page 21: Dream course 1

­۲۱­

Commands>Formatإذهب لقائمة Table

:ستظهر لك نافذة جديدة إنظر للشكل التالي

إختيار نماذج الجدول­۱

شكل النماذج تظهر هنا­۲

۳­Row Color

First:لتحديد لون خلفية السطر األول أول سطرين بالترتيب بعد كل سطرين

Second:السطر الثالث والرابعلتحديد لون خلفية

Alternate: بجانبه قائمة منسدلة لتحديد اختيار طريقة ترتيب اللون كل سطر امسطرين ام ثالث ام كل اربع اسطر

٤­Top Row

Page 22: Dream course 1

­۲۲­

Align:لعمل محاذاة النص داخل الخلية

Style Text:نوعية شكل النص

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

Text Color: النصلتحديد لون

٥­Left Col

Align:لتحديد محاذاة النص بالطرف األيسر

Style Text:نوعية شكل النص

Border:لتحديد عرض إطار الجدول

Apply All Attributes to Td Tags:

TD وكتابة بدال عنه TR إللغاء كود

********************************************************

Page 23: Dream course 1

­۲۳­

( Format) لعنوان او نص انافذة منسدلة إلختيار فقرة امبمجرد الضغط عليها ستظهر*-

*­)(A HTMLامCSSسيتحول الختيار مابينبمجرد الضغط على الحرف:لخطيعتبر منسق لكالهما بالنسبه لوستالحظ سظهور قائمة منسدلة بجانب الحرف وهو

أخرخط او بإمكانك اختيارFontر ماتريده منفأخت

( Size)*لخطحجم ا

( Text Color) لون النص*

( Bold)لتعريض الخط( Italic)لجعل النص مائل

)( Link:لعمل ارتباط تشعيبي للنص

ك هو كل ما عليFilesوعملها يتوقف على وجود موقع متكامل في نافذةتسمى بالساعه)رائعه ببرنامج الدريم الاتميز احدى ال وهي.لملف الموقع لديك بنافذة البرنامجسحب شكل الساعه

ويفر

ستظهر نافذة ألختيار الملف المراد ربطه مع النصالمجلدمجرد الضغط على ا)(

)(Target:اخرى هل ستظهر نافذة منسدلة لتحديد عند الضغط على النص المرتبط بصفحةجديدة مستقلهتفضل فتح الرابط بصفحه مستقله ام بنفس الصفحه ام بأعلى الصفحه ام بصفحه

( List Item:)النقاط او األرقام التى بجانب ستظهر نافذة بمجرد الضغط عليها لتغير شكلالنص

Page 24: Dream course 1

­۲٤­

نوع التعداد1-لتحديد شكل التعداد2-الرقميسيبدأ فيه التعداد لتحديد العدد الذي3-

- التعداد الرقميلتحديد لكائن رقمي أخر شكل جديد و لتحديد بدأ ترقيم4

**************************************************************************

Page 25: Dream course 1

­۲٥­

Image اختر Insert أو من قائمة اضغط على الزر .۱

هر لك هذة النافذةستظ.۲

okسوف تظهر لك هذة الرسالة اضغط .۳

/مالحظة

.ضع مجلد للصور في ا لموقع الخاص بك يفضل و

Page 26: Dream course 1

­۲٦­

. المطلوبةاضغط على الصورةلعرض لوحة خصائص الصور

(Width)مقاس عرض الصورة( Height)مقاس طول الصورة

( Src)من شكل خصائص الصورة ستالحظ وجود مسار للصوره وهو يقوم بتحديدها لكلمعرفة مسار الصوره بالبرنامج بإمكانك القيام بتجربة السحب على ايقونة شكل الساعة

وأسحبها للصورة سيظهر تحديد مسار الملف بالكامل

( Link)تشعيبي على الصورةلوضع إرتباط

( Alt)اسم ما فبإمكانك تحديد ما تريد سهم على الصوره بموقعك سيظهر عليهاعند تمرير الكتابته

)( Edit فبمجرد الضغط على االيقونةخصائص الصورةلعند تغيركEdit سيتم تعديلهاRestو..فورا Sizeالصورة االصليه كما كانإلرجاع حجم.

- Map:تباطات متعدده لصورة واحده ارخاص برسم خرائط للصور فاألمر أشبه بعملولكى نقوم بعمل ارتباطات متعددة سنتخدم أداوت للرسم

( Pointer)سهم لتحريك األشكال المرسوم على الصورة

( Hotspot Tool) هذه الثالث ادوات الخاصه برسم مربع او مستطيل او رسم عشوائيرتباط عليها وتحديد مسار رسم المربع ستظهر لوحة خصائص جديدة لعمل اللمضلع وبمجرد)راجع الخرائط الصورية(حاله النقر على الصورةفتح اإلطار في

( Vspace) اي شي يقع من فوقه او بأسفلهفقط لكي يبعد عن)مخفي(لعمل اطار شفاف

( Hspace) يبعد عن اي شي يقع من جهة اليمنى او فقط لكي)مخفي(لعمل اطار شفافاليسرى

( Target)التشعيبي على الصوره بإمكانك تحديد طريقة فتح الصفحه اذا عندما تحدد ارتباطالصفحه كانت صفحة مستقله او بنفس

)( Lowsrc:بمقاس صغير وستظهر لك الصوره بالموقع في وهيا ميزة رائعه ترفق صورة

Page 27: Dream course 1

­۲۷­

حين يتم تحميل المقاس االصلى

(Border)نكتب رقم ما لتحديد إطار للصورة

يسار او بالمنتصفلتحديد محاذاة الصوره يمين او

( Align)ستظهر لك قائمة ..متفاوتة ومتقاربة لتحديد محاذاة الصوره بجانب النص بدرجاتلتحديد محاذاة النص

:Crop/القص *

نها للتركيز على وذلك بقص األجزاء الغير مهمة م..حيث يتم تصغير مساحة الصورة األصلية.ما هو مطلوب

(pixels( إضافة العينات * / Resample:ويتم ذلك بتكرار إضافة صف من البيكسالت وأخذ أقرب األلوان بعد قيامنا بتغييرات في قياس

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

.حجم الصورة األصلي)عن التصغير(:Brightness/Contrast/درجة الوضوح *

وهذا يؤثر على إضاءة، ظالل ولون ..حيث يتم تغيير درجة وضوح البيكسالت في الصورة.األداة عندما تكون الصورة داكنة أو فاتحة جداوعادة ما تستخدم هذه ..الصورة

:Sharpen/ حدة الصورة *عامل تصفية لزيادة حدة األطراف ويؤثر بشكل خاص على الخطوط الخارجية للعنصر

.المصور، ويتركز عمله بالعنصر أقل مما يمس عامل التصفية العادي.gifو .jpegالصور ذات االمتداد إن أدوات تحرير الصور في دريم ويفر تنتطبق فقط على

:كيفية استخدام كل أداة:مالحظات قبل البدأ

سوف تتغير .. عند اختيار الصورة في دريم ويفر والتي ترغب في إجراء التغييرات عليها­۱propertiesلوحة المفاتيح panelإلى لوحة مفاتيح تحوي جميع .. والموجودة أسفل نافذة العملاصة بالصوراألدوات الخ

Page 28: Dream course 1

­۲۸­

قم بوضع الماوس عند األماكن )..أي تكبيرها أو تصغيرها( لتغيير مقاس الصورة ­۲واضغط بشكل مستمر على زر الفأرة األيسر وقم ..▪المحددة على الصورة وهي بالشكل أن األرقام الموجودة ..سوف تالحظ عند إجراء هذا التغيير..بالسحب سواء للتكبير أو التصغير

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

الموجود في لوحة الخصائصrefreshعلى زر الـ انظر الشكل

عند إجراء التأثيرات الخاصة بمعالجة الصور وهي القص، إضافة العينات، درجة ­لذى عليك أن ..فإن هذا سيؤثر على الملف األصلي للصورة..الوضوح وحدة الصورة

وسوف يقوم ..تتأكد قبل إجراء هذه العمليات، أن يكون لديك نسخة احتياطية من الصورةانظر وذلك عن طريق ظهور رسالة تحذيرية ..البرنامج قبل البدأ بإجراء أي تغيير بتنبيهك

الشكل­

..standardوللتراجع عن أي تغيير عليك بالضغط على أيقونة التراجع الموجودة في شريط .edit>undoأو من خالل القائمة

التحذيرية في كل مرة قم باختيار المربع الموجود بجانب إذا كنت ال ترغب بظهور الرسالة “ال تظهر هذه الرسالة مرة أخرى” الجملة

:Crop/قص الاضغط على ..قم أوال بتحديدها ومن لوحة الخصائص..إلجراء عملية القص على الصورة

وقم بتحديد ..okاضغط موافق ..سوف تظهر لك رسالة تحذير..Crop/ة القص أيقونومن ثم اضغط مرتين بزر الفأرة األيسر داخل )..٥(الجزء الذي ترغب في اختياره شكل وللتراجع عن الخطوة السابقة اضغط على ..Enterالمربع أو اضغط على مفتاح اإلدخال

.undoأيقونة التراجع

Page 29: Dream course 1

­۲۹­

/pixels(إضافة العينات (Resample:ستالحظ عند إضافة أي صورة للصفحة أنك غير قادر على استخدام هذه األداة عليها حيث

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

resample.. والحظ أن حجم الملف سوف يتغير بعدها، حجم الملف ستجده في أعلى.الزاوية اليسرى للوحة الخصائص

:Brightness/Contrast/ درجة الوضوح ستظهر نافذة للقيم قم بتغيير ..ثم اضغط على األيقونة الخاصة..قم باختيار الصورة

brightness و contrast.. أو بتغيير القيم داخل مربع ..إما بسحب المنزلق لكل منهماوالحظ التغيير الذي سيظهر على الصورة..القيم

:Sharpen/حدة الصورة ستظهر نافذة أخرى بالقيمة قم بتغييرها ..Sharpenثم اضغط على أيقونة ..قم باختيار الصورة).۷(ورة شكل والحظ التغيير على الص..أو بتغيير القيمة من مربع القيم ..إما بسحب المنزلق

و Brightness/Contrastفي نافذة )preview(ستالحظ وجود مربع بجانب كلمة معاينة وبإلغائك ..اختيارك له يسمح لك بمشاهدة التغييرات فور تغير القيم مباشرة..Sharpenأيضا لن تتمكن من مالحظة التغييرات إال بعد إغالق النافذة..االختيار

Page 30: Dream course 1

­۳۰­

Rolloverوهي عباره عن صورة تتأثر بمجرد مرور السهم عليها لتغير شكلها لصوره اخرى

Rollover ثم اضغط الزر Commonاذهب الى Image

<Insertأوأذهب الى قائمة Image Objects> Rollover Image

:لتاليستظهر نافذة جديدة بها عدة اختيارات كما بالشكل ا

۱­Image name:وهو ما ستكتبه عن اسم الصورة

۲­Original Image:وهيا الصورة االصليه التى ستظهر بالبداية

۳­Rollover Image:وهي الصورة التى بمجرد مرور السهم عليها ستظهر مباشرة

Preload اما ­٤ rollover imageتح تالحظ وضع عليها عالمة صح والمقصد منها عند ف مرور السهم على الصورة االولى ستظهر الصفحه سيتم تحميل الصورة الثانيه قبل ظهورها فبمجرد

.الصورة الثانية مباشرة

٥­Alternate text:لكتابة نص او تعليق حول الصوره بمجرد مرور السهم عليها سيظهر التعليق

٦­When clicked ,Go to Url:رد الضغط على الصوره تلقائيا وهيا لعمل ارتباط تشعيبي بمجسينتقل لمسار الصفحة المختارة

Page 31: Dream course 1

­۳۱­

أما لكيفية عمل أكثر من صورة بمجرد مرور السهم او بمجرد النقر او بمجرد خروج السهم من

اطار الصورة

Navigation وأختر زر Commonأذهب لـ Bar

Insert> Image Objects > Navigation Bar

­:ستظهر لك النافذة التالية

۱­Nav Bar Elements: للحذف اما ­للزيادة و +بإمكانك وضع أكثر من شريط بإستخدام باألسهم فتمكنك من التنقل بين األشرطة

۲­Element Name:أسم للشريط

۳­Up Image:الصورة األولى التى ستظهر بصفحتك

Page 32: Dream course 1

­۳۲­

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

Page 33: Dream course 1

­۳۳­

­: اظغط أيقونة ادراج صورة ستظهر لك النافذة التالية Commonمن القائمة

)Properties(أو الحظ الشكل في االسفل

Draw Rectangle Hotspot) الشكل المربعرسم(Draw Oval Hotspot)رسم بشكل دائري(Draw Polygon Hotspot)رسم بشكل حر(

)استخدمت هنا الرسم الدائري(واالن الحظ الشكل التالي

الموجود Linkلعمل ارتباط تشعبي للمساحة المحددة في الصورة أختر ماتريد االرتباط بة من ­: الحظ الشكل التالي)Properties(في االسفل

لحديث عنة وهو لتحديد الصفحة التي تريد أن يفتح بها فقد سبق اTargetوبالنسبة لالمر .الرابط

Page 34: Dream course 1

­۳٤­

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

الواحدة، وغالبا ما تكون عبارة عن نص ر، أو حتى التنقل إلى أماكن مختلفة في الصفحةموقع آخعندما يمر عليه، أو عبارة عن صورة يتغير يختلف عن النص العادي ويتغير شكل مؤشر الفأرةوهناك طرق مختلفه لعمل الروابط، وغايات مختلفة شكل مؤشر الفأرة عندما يمر عليها، هذا عادة

.أيضا

يجب مالحظة أن كل جملة تقع في سطر مستقل أو )ة جمل دع(النصوص لعمل رابط للنص )۱(خلية مستقلة وهناك عد ة طرق لعمل الرابط )وكذلك يجب تحديد النص المطلوب........

­:الطريقة االولي

من القائمةCommon أو من اظغط على ايقونةInsertr اختر Heperlinkسيظهر الشكل التالي

Text أذا كنت قد حددت النص سيظهر لك مباشرة ( لكتابة النص(

Linkالختيار االرتباط المطلوب

Target) سبق الحديث عنها(

Title) لكتابة النص االرشادي للمتصفح(

­:الطريقة الثانية

السفل من ا)Properties( أظغط على)( الموجدود امامLink ثم حدد االرتباط المطلوب

Page 35: Dream course 1

­۳٥­

الي يمين النافذة حيث توجد )مع استمرار الضغط( ثم اسحب أو اضغط على الشكل.اختر الصفحة الطلوبة ثم حرر زر الفارة.صفحات موقعك

­:الطريقة الثالثة الفارة االيمن واختر في أي مكان في مساحة العمل اضغط زر Make link انظر

الشكل

بالنسبة لروابط ا لصور ينطبق عليها نفس الخطوات في الطريقة الثانية والثالثة

****************************************************************

Anchorكما تستخدم لالنتقال إلى موضع محدد داخل ، مواضع المختلفة داخل نفس الصفحةوتستخدم للقفز والتنقل بين الصفحة أخرى في نفس الموقع

تتم هذه العملية على مرحلتين:الطريقة

أوال إنشاء موضع الذي نريد القفز إليه في الصفحة حيث نضع المؤشر في المكان الذي نريد ­namedالقفز إليه ونذهب لألمر anchor الموجود ضمن لوح األوامر في التفريعة

invisible فيظهر لنا مربع يطلب منا إدخال االسم الموضع فندخل االسم مع مراعاة عدم تركمسافات بين األحرف ثم نضغط موافق فيتم إنشاء هذا الموضع

نص (ختاره ثانيا نذهب إلى العنصر الذي نريد القفز منه إلى الموقع السابق الذي أنشأناه ون­ ونكتب بالطريقة التاليةLinkثم نذهب إلى خصائص العنصر الموجود في األسفل في الخانة )مثال

#name of ancho

ويجب االنتباه إلى دقة كتابة اسم الموضع الذي أنشأناه مسبقا

صفحة إلى الموض ع أما إذا كنا نريد إنشاء ربط بمكان في صفحة أخرى فيجب علينا القيام بما سبق وإضافة اسم ال index.htm#nameمثال...الذي أنشأناه of anchor

Page 36: Dream course 1

­۳٦­

∙External Links

وهي للربط بمواقع أخرى

:الطريقة

إلنشاء الروابط الخارجية يكون كما عملنا في الروابط الداخلية ولك ن الف رق ف ي أنن ا نكت ب العن وان http//:www.yahoo.com: مثالنكامال في شريط العنوا

e-mailروابط االيميل ∙ links

نق وم باختي ار أو تحدي د العن صر ال ذي نري د بال ضغط علي ه أن يف تح لن ا ناف ذة البري د اإللكترون ي ث م insertنضغط على المفتاح e-mail link من لوحة األوامرcommon فنكت ب العن وان ب شكل بطة ايميلكامل فيتم إنشاء را

Nulروابط ∙ links& script links

تستخدم إلعطاء العناصر خواص معينة لتشغيل كود معين باستخدام جافا سكريبت

Nulالطريقة بالنسبة للـ link: في المربع#وهي بوضع العالمة

Jump Menu

قوائم تحتوي على عدة خيارات تستخدم للتنقل بسهولة بين وتسمى بقوائم القفز وهي عبارة عن صفحات الموقع

مع صفحات أخرى من نفس الموقع أو من خارج الموقعlinkحيث يتم عمل

كما تمكننا تلك القوائم من عمل رسالة إلكترونية

نضع المؤشر في المكان الذي نريد اإلنشاء فيه ثم:الطريقة

ر من لوحة األوامر ونضغط االمforms نذهب إلى اللوحة الفرعية

jump menuفيظهر لنا مربع حواري فنكتب فيه ألواح تلو اآلخر

وعادة يكون الخيار األول غير فعال وهو عبارة عن توضيح

Page 37: Dream course 1

­۳۷­

ضغط ايقونة ا من لوحة االوامر

أذهب لقائمة

Insert > Media > Flash

Ctrlمن لوحة المفاتيح + Alt + F

وسيتم إدراجه داخل صفحتكSWFستظهر لك نافذة أختر منها ملفك الفالشي بإمتداد

Flash واختر )انظر الشكل في االعلى(نة من لوحة االوامر ا ضغط ايقو Button

<Insert>Mediaاو بالذهاب لقائمة Flash Button

­:تالي لسيظهر لك الشكل ا

Page 38: Dream course 1

­۳۸­

۱­Sample:دة شكل األيقونة بالفالش وبإمكانك مشاهدة التأثير بمجرد تمرير السهم على لمشاهالصورة

۲­Style:إلختيار األزرار بالفالش

۳­Button Text:لكتابة النص فوق الزر الفالشي

٤­Font: الخط(إلختيار نوعية الفونت(

٤­Size:حجم النص

٥­Link:إلضافة رابط تشعيبي على الزر الفالشي

٦­Target:لتحديد مسار فتح األرتباط التشعيبي بمتصفح جديد او بنفس الصفحة

۷­Bg Color: إلختيار خلفية لون الزرار الفالشي بإمكانك الضغط على هذه االيقونه لجعلهبدون لون

۸­Save As: تلقائيا سيتم تحديد أسم الملف الفالشي او بإمكانك كتابة االسم واختيار مكان حفظbrowseملف الفالشي من ال

Page 39: Dream course 1

­۳۹­

بإمكانك حفظ عملك وتجربة الزر الفالشي

بعد انتهاءك من عمل األزرار ستالحظ ظهور خصائص الزر الفالشي بأسفل البرنامج كالشكل :التالي

۱­Flash Button:لكتابة أسم الزر الفالشي

۲­Width: مقاس عرض الصورة مع إمكانية بالتعديل عليها ،Height:س طول الصورة مقامع إمكانية التعديل عليها

۳­File:إلرفاق الملف الفالشي للزر

٤­Edit: عند تغيرك بخصائص الصورة فبمجرد الضغط على االيقونةEdit سيتم تعديلها فورا Restو .. Sizeإلرجاع حجم الزر االصلي كما كان

٥­V space: يقع من فوقه او بأسفلهفقط لكي يبعد عن اي شي)مخفي(لعمل اطار شفاف ،،..H space: فقط لكي يبعد عن اي شي يقع من جهة اليمنى او )مخفي(لعمل اطار شفاف

٦­Quality: لتحديد دقة الزر الفالشي وسرعته ستظهر قائمة منسدلة اختر ما تشاء)Low يهتم Auto يهتم بدقة الزر اما Highبعمل السرعه و Lowر الفالشي و يعمل على سرعة ظهور الز

Auto High يعمل بسرعة ودقة الزر الفالشي واألفضل اختيار High(

۷­Scale: بجانبه قائمة منسدلة لثالث خيارات)Default: يجعل النص كما هو دون التعديلNo(،)عليه او تغير دقته Border: سيتم ظهور النص بعرض الزر الفالشي مما يؤدي الى قلة دقة

Excat(،)النص Fit: سيقوم بجعل النص يتمدد على حسب طول الزر الفالشي مما يفقد جودته(

۸­Align: ستظهر لك قائمة ..لتحديد محاذاة الصوره بجانب النص بدرجات متفاوتة ومتقاربةلتحديد محاذاة النص

۹­Bg:بإمكانك إختيار لون خلفية الزر الفالشي

۱۰­Play:برنامج ثم إضغط لتشغيل الزر الفالشي بصفحتك في الStopإليقافه

۱۱­Parameters:لعمل البرامترات للزر الفالشي

Page 40: Dream course 1

­٤۰­

..بإمكانك في برنامج دريم ويفر إضافة نصوص فالشيه بطريقة سهلة وسريعة

قبل البدء يجب ان تقوم بحفظ عملك

Flashواختر)انظر الشكل في االعلى(من لوحة االوامر ا ضغط ايقونة Text

<Insertاو بالذهاب لقائمة Media> Flash Text

:ستظهر نافذة جديدة كما بالشكل التالي

۱­Font:نوع الخط الذي ستكتبه

۲­Size:طحجم الخ

أزرار معروف طريقة استخدام­۳

­Bold:لتعريض الخط

Page 41: Dream course 1

­٤۱­

­Italic:لجعل النص مائل

لكتابة النص الى اليسار­

لكتابة النص الى الوسط­

لكتابة النص الى اليمين­

٤­Color:لتحديد لون النص

٥­Rollover color:سهم علي النصلتحديد لون النص الذي سيظهر عند مرور ال

٦­Text:لكتابة نصك

۷­Show Font:إلظهار نوعية شكل الفونت داخل خانة النص

۸­Link:لعمل أرتباط تشعيبي على النص

۹­Target: يمكنك اختيار طريقة ظهور رابط النص بمتصفح مستقل ام بنفس الصفحه ستظهرلك قائمة منسدلة اختر منها ماتريد

۱۰­Bg Color:فيه النص وليس الموقعلون خل

۱۱­Save As:لحفظ الملف الفالشي لديك بالجهاز ومن ثم تحميله مع ملف موقعك باالنترنت

Page 42: Dream course 1

­٤۲­

تستخدم لضبط مواقع العناصر داخل المستند ويمكن ان تحتوي الطبق ات :Layersالطبقات ، ت وي عل ى طبق ات أخ رى ب داخلها عل ى نم اذج أو ص ور أو كتاب ات أو غي ر ذل ك كم ا يمك ن ان تح

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

lines ويمك ن ان ، ك لمرونته ا وتستخدم الطبقات في اغلب االحي ان لت صميم وتخط يط الم ستند وذلنحول الطبقات إلى جداول بع د االنته اء م ن الت صميم لك ي ي تم عرض ها داخ ل المت صفحات الت ي ال

insertوي تم إن شاء الطبق ات ع ن طري ق االم ر ، ت دعم الطبق ات \ Layout Objects\Layer­:انظر الشكل التالي.

. الذي تريد ظهور الطبقة فية وسحبها الى المكانأو عن الطريق الضغط على ايقونة

الطبقات المتداخلةNested layers وهي عبارة عن طبقة يتم رسمها داخل طبقة أخرى م ن القائم ة layerوذل ك ع ن طري ق وض ع المؤش ر داخ ل الطبق ة وم ن ث م اختي ار االم ر

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

وم ن ث م تفعي ل layers وم ن ث م اختي ار preferences ومن ثم اختي ار editالمنسدلة .nestingالمربع

انظر الشكلعند اختيار أي طبقة يظهر عندنا خواص جديدة في لوح الخصائص :­

ومن اهم هذه الخواص هي الخانة id وتستخدم الدخال اسم للطبقة وهذا يفيدنا عن د الكتاب ة ت ستخدم لتعي ين الم سافة ب ين topو leftوالخان ة ، ف ي لغ ات البرمج ة كجاف ا س كريبت

،الطبقة والطرف األعلى واأليسر للصفحة

Bgوم ن image والخان ة ، يمكنن ا اختي ار ص ورة لخلفي ة الطبق ةclip ت ستخدم لتحدي د ت ستخدم العط اء الطبق ة رق م يرت ب Z-indexوالخان ة ، مساحة معينة للظهور م ن الطبق ة

Page 43: Dream course 1

­٤۳­

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

indexيرة ستظهر خلف الطبقات التي صغz-indexكبيرة .

layersويمكننا التحكم بظهور الطبقات واختفائها عن طريق اللوح panel" اض غطF2­: انظر الشكل التالي"اذا لم يكن ظاهرا

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

م لتحديد ما سيحدث للطبقة ف ي ح ال كب ر المحتوي ات الموج ودة تستخد overflowوالخانة . فيستخدم لتحديد نوع العنصر النشاء الطبقة Tagأما الخيار ، بداخلها عن ابعاد الطبقة

يمك ن م ن خالل ه عم ل تحري ك للطبق ات بم ا تحت وي م ن Timelineال شريط الزمن ي behaviorشغيل أم ر تحك م كما يمكن تغيير الملف المصدر لصورة معينة أو ت، عناصر

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

timeالتحكم line نضغط على االختصارshift + F9.

ثم نضيف الطبقة ، لطبقة ما نقوم بوضع الطبقة في المكان الذي نريد البدء منهلعمل حركة

إلى احد قنوات الحركة في ال شريط الزمن ي وذل ك بال ضغط وال سحب للطبق ة ووض عها ف ي ، فيتم إضافة شريط يحمل اسم الطبقة التي قمنا باض افتها إل ى قن اة الحرك ة ، الشريط الزمني

keyونالحظ انه ق د ت م اض افة frame وإلن شاء الحرك ة ن ضغط ، ف ي اول القن اة وآخره اف نالحظ ، على مفتاح الحركة األخير ثم نقوم بسحب الطبقة ووض عه ف ي المك ان ال ذي نري د

ويمكنن ا ال تحكم بالحرك ة باس تخدام اكث ر م ن ، انه قد تم إضافة خط يعبر عن مسار الحرك ة addال زر اليمين ي واختي ار ش ريط زمن ي وي تم إض افة األش رطة الزمني ة بال ضغط عل ى

time line.

وت ستخدم لع رض الطبق ات وال صور الت ي ، ويوجد أيضا خيارات أخرى ك ـ قن وات الحرك ة Animationولدينا أيضا شرائط التحريك ، يطبق عليها التحريك داخل المستند bar الت ي

كل قناة من تستخدم لتحديد المدة الزمنية أو فترة عرض كل عنصر داخل الشريط الزمني و .قنوات الحركة يمكن أن تحتوي على اكثر من عنصر مختلف

فم ثال اذا اردن ا ان ، ويمكنن ا اي ضا اض افة الحرك ة إل ى ش ريط التحري ك بال شكل ال ذي نري د تكون الحركة لطبقة ما بشكل منحني بدل من ان تك ون ب شكل م ستقيم نق وم باض فة الحرك ة

Page 44: Dream course 1

­٤٤­

key frameكما يتم ذلك عن طريق ، ر االيمن للماوس إلى شريط الحركة عن طريق الزولنجع ل الحرك ة ، وتعيين المكان الذي نريد على شريط الحرك ة Ctrlالضغط على المفتاح

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

الت ي يج ب behaviors وت ستخدم إلظه ار أوام ر ال تحكم Behaviorsة ال تحكم ام ا قن ا.ويمكن تعديلها بالضغط عليها ضغطا مزدوجا، تشغيلها عند وقت معين

لتحديد معدل العرض أو عدد اللوحات ”FPS “Frame per secondوتستخدم الخانة autoوالخان ة ، التي يتم عرض ها ف ي الثاني ة play المباش ر عن د تحمي ل ي ستخدم للع رض . وهي الستمرار العرض بدون توقفloopوالخانة ، الصفحة داخل المتصفح

حالة ظهور الطبقات:Show - Hide layers

عندما نريد اخفاء جميع الطبقات الفرعية في المستند ما عدا الطبقة الفرعية التي نمر عليه ا ة للطبق ة الفرعي ة الت ي نري دها ان نخت ار الطبق ة الرئي سي، ف ي مؤش ر الم اوس نق وم بالت الي

Behaviorتظه ر ف ي ح ال م رور الم اوس عليه ا ث م نف تح ل وح األوام ر inspectorإلضافة األمر+ونضغط على اإلشارة

show hide layers ومن الجزء named layers نقوم باختيار الطبقة الفرعية التي وبع دها نق وم باخف اء showمر نرغب في ان تظهر عند مرور الماوس عليها ونعطيها اال

hideباقي الطبقات الفرعية فقط

وبعد االنتهاء من ذلك نقوم بغيير الحدث الذي سينفذ فيه التطبيقات التي قمنا بها سابقا إلى

on mouse over وبذلك نكون قد اخفينا كل الطبقات الفرعية في المستند ما عدا التي ،تمر عليها الماوس

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

واخف اء جمي ع الطبق ات layersوالح ل له ذه الم شكلة ه ي ف تح اللوح ة ، س ابقا بالتفعي لكلة الثانية وهي انك من بعد تحريك مؤش ر الم اوس م ن أما المش ، الفرعية عن طريق العين

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

show ب ادراج أم ر ثم نقوم، بشكل عرضي بحيث تمتد اسفل كل الطبقات الفرعية hideonث م نع ين الح دث ، ونق وم باخف اء جمي ع الطبق ات الفرعي ة behaviorم ن الل وح

mouse over.

ألن ، إل ى ج داول وب العكس layersومن الجدير بالذكر أننا ن ستطيع أن نق وم بتحوي ل ال ـ االص دار ذلك يمكن أن نحتاجه عند العمل مع متصفحات ال تدعم استخدام الطبقات كما ف ي

.الثالث

وهناك أنواع من المستندات ال تسمح لك بأن تح ول الطبق ات إل ى ج داول وه ي الت ي تك ون كم ا ال يمك ن تحوي ل الم ستند ال ذي يحت وي ، templateمبنية على نماذج س ابقة االع داد

Page 45: Dream course 1

­٤٥­

nestedعل ى طبق ات متداخل ة layer حي ث ان ه ال يمك ن ان يوج د ف ي الج دول خليت ان modifyطريق ة التحوي ل إل ى ج داول وب العكس ه ي بف تح القائم ة المن سدلة و، مت داخلتان.convertواختيار

­: حيث تجد جميع االوامر انظر الشكل التالي Formمن لوحة االوامر اختر

ي فنضع المؤشر ف، إلى المستندformيجب أوال إدراج نموذج البيانات : إنشاء نماذج البياناتinsertالمكان الذي نريد إدراج النموذج فيه ثم نضغط على المفتاح formمن لوحة العناصر)

الخصائصوبالنسبة إلى ، فيظهر إطار متقطع احمر اللون داخل المستند)،

form نجد أوال name وهذا يفيدنا في إعطاء اسم للنموذج الستخدامه داخل كود جافا سكريبت .ويجب أن يكون هذا االسم غير مستخدم من قبل، عند إضافة أوامر التحكم إليهبي بي سكريبت

، لتحديد عنوان الكود أو التطبيق المستخدم لمعالجة نموذج البياناتActionوتستخدم

متبوعة بعنوان البريد :mailtoوإلرسال بيانات النموذج كرسالة بريد إلكتروني نقوم بكتابة الكلمة Actionفيتم إضافة العنوان كقيمة للخاصية ، ي سيتم إرسال بيانات النموذج إليهاإللكتروني الذ.داخل الكود

>form name="form1" method="post"action="mailto:[email protected]">

Methodوهي لتحديد الطريقة التي سيتم بها تناول بيانات نموذج البيانات ،م التي يتم إدخالها في نموذج البيانات عن يستخدم إلرسال القيPostفاالختيار فيستخدم إلرسال البيانات وقيم نماذج البيانات ملحقة Getأما ، طريق رسالة مع نماذج Getوال يفضل استخدام الطريقة ، إلى السير فرURLبعنوان الـ

محدودة بعدد معين من الحروف فمن URLالبيانات الطويلة إذ إن العناوين كما يجب أن ال نستخدمها مع البيانات التي ، زء من تلك البياناتالممكن حذف ج

تتطلب درجة عالية من السرية كبيانات كروت االئتمان ألن هذه الطريقة غير ،مؤمنة سريا

Page 46: Dream course 1

­٤٦­

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

enctype ، ونق وم بكتاب ة ه ذه الخاص ية ف ي الك ود ف ي لغ ة ال ـHTML ض من Formالسطر

>form name="form1" method="post"action="mailto:[email protected]" enctype="">

فان postهيmethodوفي نماذج البيانات العادية عندما تكون القيمة الموجودة في الخانة أي صحيحةtrueهي enctypeالقيمة االفتراضية للحقل

عب ارة ع ن عن وان للبري د اإللكترون ي ال ذي actionأما إذا كانت القيم ة الموض وعة داخ ل الخان ة سيتم إرسال قيم نموذج البيانات إليه فانه في الحالة االفتراض ية س يتم إرس ال ه ذه الق يم ض من مل ف

لة ف إذا أردن ا إرس ال ه ذه الق يم ض من الرس الة نف سها فنق وم بكتاب ة منف صل مرف ق م ع الرس ا text/plain للخاصيةenctype

>form name="form1" method="post"action="mailto:[email protected]"

enctype="text/plain">

إضافة عناصر نماذج البيان ات بداخل ه إلى المستند فانه بإمكاننا البدء في formبعد إضافة العنصر

ويجب أن تكون اإلضافة بداخل العنصر formإذ ال يمكننا إضافة عناصر نماذج البيانات بدون الـ form.

insert واآلن إلن شاء حق ل لكتاب ة االس م بداخل ه ن ضغط عل ى األم ر text field)( م ن ويمكنن ا أن ن ستعين ، ج ب اختياره ا بدق ة ويوج د له ذا األم ر ع دة خ صائص ي formلوحة األوام ر بالجداول للترتيب

)List & Menu( يضاف هذا األمر من لوح العناصر Form ، وتستخدم لتمكنالمستخدم لعمل خيار واحد من بين العديد من الخيارات

عندما نري د ال تحكم ف ي ع دد الخي ارات الت ي نري د ال تحكم بعرض ها Listوتستخدم ئمة حيث يمكننا تحدي د ارتف اع ه ذه القائم ة وعن دما ي زداد ع دد الخي ارات الت ي بالقا

Page 47: Dream course 1

­٤۷­

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

فت ستخدم عن د عم ل خي ارات مح دودة أي الختي ار عن صر واح د فق ط Menuأم ا Listة نضغط عل ى المفت اح والضافة الخيارات للقائم value فنق وم بكتاب ة ال نص

itemالذي نريد اظهاره داخل القائمة في حقل الـ lable وفي الحقل value نقوم .بكتابة القيمة التي سترسل إلى السيرفر

)Radio Buttons & check boxes( وت ستخدم لت سهيل عملي ة االختي ار radioهم ا ه و ف ي طريق ة العم ل فال ـ اثن اء مل ىء نم وذج البيان ات والف رق بين buttons

checkتستخدم الختيار خيار واحد من بين عدة اختي ارات ام ا boxes فت سمح فاختي ارعدة خيارات وذلك باختيار المربع المطلوب

radioلعم ل ال ـ buttons نق وم باختي اره م ن ل وح االوام ر forms ويج ب اعطائ ه ، س م مع ين ف ي حق ل االس م ض من مرب ع الخ صائص الخ صائص المناس بة فيج ب ادخ ال ا

checkوالكتابة في الحقل value واختي ار الوض عية ، القيم ة الت ي سترس ل إل ى ال سيرفرويج ب االنتب اه إل ى ان ه يج ب إعط اء االس م ذات ه إل ى جمي ع (االفتراض ية لمرب ع االختي ار

).ختيار منهامربعات االختيار حتى يتم ادراجهم في نفس المجموعة التي سيتم اال

إنشاء مفاتيح نم اذج البيان ات وت ستخدم لل تحكم ف ي العملي ات الت ي ت تم عل ى نم اذج البيان اتويمكننا استخدام هذه المفاتيح الرسال البيانات التي قام المستخدم بادخاله ا ف ي النم وذج إل ى

االفتراضية كما تستخدم مفاتيح نماذج البيانات العادة حقول النماذج إلى الوضعية، السيرفرويمك ن إن شاء (أو استخدامها بمهام أخرى يتم تعريفها بكتابة كود معين مثل جافا سكريبت

وبالتالي يجب كتابة forms صورته من لوح االوامر مفتاح معين وذلك عن طريق إدراج).االمر بالجافا اسكريبت

بق ى ان نق وم ب بعض الخط وات للتاك د بعد ان قمنا بانشاء نموذج البيانات وادراج الحقول بداخله يت ك أن يك ون ق د ادخ ل عن وان البري د ، من ان البيان ات الت ي يق وم الم ستخدم بادخاله ا ت تم ب شكل س ليم

Validateويتم ذلك عن طريق األمر ، االلكتروني بالصيغة الصحيحة form منBehaviorsinspector التي نصل إليه ا ع ن طري ق ال ـLauncher ل ى ث م ن ضغط عform م ن ال شريط

Tag selector ومن اللوحة ، الختيار كل اماكن االدخاالتBehaviors نضغط عل ى المفت اح validateالظهار اوامر التحكم ونختار االمر + form ثم يتم اختيار خصائص ك ل حق ل بيان ات

namedبحسب اسمه من القائمة field.

Page 48: Dream course 1

­٤۸­

وبه ذه الطريق ة ، يط صفحات الويب وتقسيمها إل ى ع دة أج زاء لتخطFramesتستخدم االطارات

ن ستطيع ان نف تح ع دة ص فحات ف ي نف س الناف ذة أو ب االحرى ف ي اط ار واح د م ع ابق اء االط ارات frameويتم تنسيق تلك االطارات معا بما يسمى ، األخرى على حالها set حيث ي تم ع ن طريق ه

ات الالزم ة ع ن ه ذه ال صفحات مث ل ع دد االط ارات تعريف التركيب الداخلي والخ واص والمعلوم الت ي س تظهر ف ي ه ذه ال صفحة وابع اد االط ارات ومل ف الم صدر ال ذي ي تم فتح ه داخ ل ك ل إط ار

Frameوال يتم عرض ، والعديد من البيانات األخرى set داخل المت صفح ألن ه عب ارة ع ن مل ف فه ي Framesأم ا االط ارات ، تعريف لحف ظ بيان ات ع ن كيفي ة ع رض االط ارات داخ ل الم ستند

، htmlعب ارة ع ن من اطق معرف ة داخ ل الم ستند وك ل اط ار ف ي ال صفحة ي ستخدم لع رض ص فحة

ومنه ا نخت ار Layoutوللب دء بعم ل إن شاء االط ارات نخت ار م ن لوح ة العناص ر

Frames

التع ديل عليه ا فنجد عدة مجموعات من االطارات الجاهزة نبدأ باالن شاء ع ن طريقه ا حي ث يمكنن ا من لوحة المفاتيح ثم الضغط على altوالختيار أحد االطارات نقوم بالضغط أوال على الزر ، ايضا

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

.االطار الذي سيحفظه باطار اسود

Page 49: Dream course 1

­٤۹­

Template

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

او الضغط Window من قائمة Assetsالمناطق التي نريدها وذلك عن طريق فتح النافذة

ليظهر لنا الشكل التالي F11على

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

newاألمر editable region) او بالضغط علىCtrl+Alt+V( كم ا .ونعطيها اسم مع ينهوواضح في الصورة

Page 50: Dream course 1

­٥۰­

المكتبةlibrary ون ستفيد م ن ه ذه ، تمكننا من حفظ عنصر ما فيها ومن ثم ادراجه ف ي أي م ستند آخ ر

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

ولكن هذا مااسعفني بة الوقت .....ليس هذا كل شئ عن هذاالبرنامج اإل حترافي

وبإذن اهللا سأحاول جاهدا تحديث هذا الكتاب ليغطي هذا البرنامج ....االمكانبات حاليا والعمالق

وصلى اهللا على سيدنا محمد وعلى آله وصحبة وسلم*****************************************************

موقع كتب الحاسب العربيةwww.cb4a.com