الدورة التعليمية لبرنامج Dreamweaver CS3 :: واجهة البرنامج 2 ::

السلام عليكم ورحمة الله
ازيكم ..



اتعرفنا في الدرس اللي فات علي واجهة البرنامج
أخدنا بس أربعة منها

مساحة العمل Workspace Layout
شاشة الترحيب Welcome Screen
شريط الإدخال Insert bar
والخصائص أو Prpopert inspector
تمام ؟

انهارده احنا هنكمل شرح واجهة البرنامج
اللي باقي فيها 5 دروس ,, وهما


يلا نبدأ ...

وهنبدأ بصورة توضيحية لشكل الصفحة أو الملف :: Document :: في برنامج Dreamweaver


هنبدأ مع بعض في شرح ال
Document Toolbar

صورة توضيحية


-1-
ثلاثة إختيارات للعرض ,, واحدة لعرض التصميم " Design "
وواحدة لعرض الكود " Code "
وواحدة لعرض التصميم والكود مع بعض " Split "
--
Design View
ودي زي ما قلنا لعرض التصميم
في جملة بسيطة ممكن توضحلك المعني أكتر
"What you see is What you get"
ومعناها ان كل اللي انت شايفه :: اللي انت عامله في صفحتك ::
هو ما ستحصل عليه :: اللي هتلاقيه في المتصفح ::

- يعني كل اللي بتعمله ظاهر ادامك وبالتالي بتديلك صورة مسبّقة عن موقعك .

- و هيبقي كل شغلك في صفحتك في ال Design View
--
Code View
ودا بيعرض لك كود الصفحة ,,
وكل كود بيضاف فيها اوتوماتيكلي لما انت تضيف عنصر معين ,,
يعني مثلا لو أضفت صورة هتروح لل Code View هتلاقيه كتب كود الصورة وهكذا .
--
Split View
في ال Split بيعرضلك ال Design وال Code مع بعض
بحيث تشوف التصميم أو العنصر والكود الخاص بيه في نفس الوقت .

- بيعرضلك الكود فوق والتصميم تحت ,,

. عندنا طريقة تانية ممكن نشوف بيها ال Design وال Code غير الوضع Split
والطريقة كالتالي
أولا هنختار الوضع Design
وبعدين هنروح لقائمة Window ونختار منها Code inspector
أو تضغط من الكيبورد علي F10
هتظهر لنا نافذة .. هي نفسها ال Code View ,,

صورة توضيحية


وبكده تقدر تشوف ال Design وال Code .

==
-2-
Title
ودا ببساطة هو عنوان صفحتك ,,
ودا بيظهر في ال toolbar اللي فوق في المتصفح

لو فتحنا موقع زي Google مثلا

صورة توضيحية


Google هي الكلمة التي كُتيت في ال Title

==
-3-
File Management
إدارة الملفات

ودا بيستخدم في رفع أو تحميل الملفات علي جهاز الكمبيوتر من السيرفر والعكس .
وماتشغلش بالك بيه دلوقتي .. دي حاجات بتتعمل في الآخر خالص
وهنبقي نتكلم عنها في الدرس الخاص بيها .

==
-4-
Preview in browser
العرض في المتصفح

ودا بيستخدم في عرض بمعني إختبار موقعك أو صفحتك في المتصفح
وممكن تضغط F12 للعرض في المتصفح الإفتراضي علطول .

==
-5-
*******
الكلمة دي :: ريفريش ::

هقول مثال بسيط .. هتفهم منه إستخدامها بالظبط

1- لما بنعمل تغيير معين واحنا في ال Design View لما نروح
لل Code View هنلاقي كود التغيير اللي احنا عملناه اتكتب مافيش مشكلة ,, تمام ؟
2- لما نعمل تغيير معين واحنا في ال Code View [نكتب كود] لما نروح لل Design View مش
هنشوف التغييرات إلا بعد الضغط علي زر ال ريفريش أو F5

جرّب علشان توضح أكتر بالنسبالك

==
-6-
View Options
خصائص العرض

ودا كل وظيفته إخفاء وإظهار بعض الأشياء ,, حسب رغبتك ,,
زي ال Ruler المسطرة .. وال Grid الشبكة .. وال Tracing image ودي هنتكلم عنها ادام شوية

وخياراته بتختلف في ال Code View
هنلاقي خيارات خاصة بإخفاء وإظهار بعض الأشياء الخاصة بال Code View
زي ال Word Wrap ودي بتضم الأكواد بحيث لا يظهر ال Scroll bar
وزي ال Line Numbers الأرقام المرتبة للأكواد

==
الدروس دي عملية أكتر منها نظري
فلازم تجرّب بنفسك وهتفهم كويس
==

-7-
Visual Aids
-[ هيتم إستكمال الدروس ]-

منقووول للأمانة