السلام عليكم ورحمة الله
ازيكم ؟!
فقرة :: علي جنب ::
فقرة معلومات إضافية هناخدها قبل الدرس .. لو حبيت تقرأها
علي فكرة هي مفيدة جدا وأنصحك تقرأها
" الفقرة دي مش أساسية في كل درس "
---------
فهم إختلاف المتصفحات:
حاجة مهم اوي انك تفهمها قبل ما تبدأ تعمل صفحات ويب ..
هو ان تصميمك مهما كنت حريص في عمله فهو مش هيظهر لكل مستخدم بنفس الشكل ,,
تعالي نوضح شوية ::
لغة ال html صممت لعمل مشاركة للمعلومات عن طريف عرض المعلومات دي علي كل كمبيوتر علي وجه الأرض .. تمام ؟
لكن كل كمبيوتر مش بيستخدم نفس المتصفح ,, او نفس الخطوط او نفس مقاس الشاشة ,,
وفوق كل ده في متصفحات قديمة موجودة غير قادرة علي انها تعرض التقنيات الجديدة في الويب .
, نصيحة بقي لو عايز صفحتك أو موقعك يظهر بشكل جيّد لكل اللي ممكن يزوره ,
وهي انك تختبر موقعك كويس ,, test test test من هنا للصبح ..
وبعد كده قول لأصدقائك يعملوا test بردوو .. الكلام ده لو عايز تبقي في السليم .
هقولك حاجة كمان " الأبسط هو دايما الأفضل "
يعني :: موقعك كل ما كان تصميمه بسيط .. كل ما ضمنت انه يظهر زي
ماهو او شبيه بدرجة كبير ليه .
------------------------------------
يلا حضّر نفسك
انهارده بداية دخولنا في البرنامج
درسنا اسمه :: واجهة البرنامج :: The Interface
والدرس مقسّم لتسع أجزاء .. هناخد النهارده 4 فقط
يلا نبدأ
----
Workspace Layout
ال Workspace Layout أو مساحة العمل ..
ماهو إلا تنظيم لشكل او تقسيمة مساحة العمل حسب رغبتك ..
افتح معايا قائمة Window وهنختار منها Workspace Layout
هنلاقي أمامنا ثلاث إختيارات رئيسية
وهي Coder ,, Designer ,, Dual Screen
صورة توضيحية
1- Coder بإختيارها هتغير أماكن ال Panels لجهة اليسار
ودا وضع بيفضلوا الناس المبرمجين اللي بيطلع عينهم في كتابة الأكواد
2- Designer بإختيارها هيتم إعادة ال Panels لمكانها جهة اليمين مرة أخري ,,
والوضع Designer هو الوضع الإفتراضي للبرنامج . Default Workspace Layout
3- Dual Screen وهو وضع ثالث لتقسيمة مساحة العمل ,,
لو حضرتك ربنا كارمك وعندك شاشتين الوضع ده هيعرضلك
ال Design في شاشة وال Code في الشاشة التانية ,,
وبعيدا عن الأوضاع الثلاثة السابقة انت عندك تحكم كامل في
أماكن ال Panels في البرنامج وممكن تغير حسب رغبتك ,, زي ما هنعرف بعد كده .
---------
Welcome Screen
ال Welcome Screen أو شاشة الترحيب ,, هي شاشة بتظهرلك كل مرة تفتح فيها البرنامج
الشاشة دي مش مجرد ديزين جميل وخلاص ..
الشاشة دي مُفيدة جدا وبتمكنك من الوصول السريع للي انت عايزه .
صورة توضيحية
تعالوا نتعرف علي مكونات الشاشة دي مع بعض
1- Open a Recent Item
عندنا علي شمال شاشة الترحيب عمود اسمه Open a Recent Item
ودي بتمكنك من فتح آخر ملفات اشتغلت عليها ,, ومنها كمان ممكن تفتح ملفات أخري
بالضغط علي Open وتحديد مكان الملف علي الهارديسك .
وممكن تفتح ملفاتك كمان بالذهاب لقائمة File وإختيار Open :: هيه هيه ::
--
2- عندنا كمان عمود اسمه Create New
ودا بيستخدم في إنشاء الصفحات ,, وعندنا فيه إختيارات كثيرة
فممكن نعمل صفحة HTML عادية .. او لو بتشتغل علي نوع تاني من الصفحات
زي ال ColdFusion او PHP او ASP ...
وعندنا خيار مهم جدا في العمود ده هنتعرف عليه فيما بعد اسمه
Dreamweaver Site ودا علشان نبدأ نعمل موقع بالبرنامج .
وعندنا More ودي ممكن تضغط عليها وتختار أنواع أخري للصفحات .
طريقة تانية علشان تختار أنواع أخري للصفحات
من قائمة File ثم New :: هيه هيه ::
--
3- عمود تالت اسمه Create From Samples
ودا عمود بيحتوي علي مجموعة من الأشكال أو ال Styles الجاهزة
لعدد من الأشياء زي ال css وزي ال Frameset وزي Starter Page
والعمود ده مهم ومريح ومفيد جدا
عندنا فيه More والي بالضغط ليها هتفتح نافذه شاملة لكل الإختيارات
الموجودة في العمود يعني شاملة لل CSS وال Frameset وال Starter Page
4- عندنا كمان في عمود Create Form Samples
لينك اسمه Dreamweaver Exchange ودا بالضغط عليه هتروح لصفحة تحميل Plug-ins
أو إضافات مفيدة للبرنامج وهنتعرف علي ما في الربط أكثر لما نيجي لدرس ال Behaviors .
--
5- روابط مفيدة لدروس .. وتتعرف علي الجديد في البرنامج ,, لو تحب تشوفها
علي العموم احنا بناخذ دورة اهو .. مش مشكلة يعني لو مشفتهاش
--
6- هنا بيظهرلك آخر الأخبار عن البرنامج ولو في تحديثات ممكن تحملها .
--
7- لو بقيت تمام ومش محتاج كل ما تفتح البرنامج انك تشوف شاشة الترحيب
يبقي هتعمل Check علي Don't Show again ,,
ولو عايز تخليها تظهر تاني كل مرة تفتح فيها البرنامج هتروح لقائمة Edit ثم
Preferences او تضغط Ctrl+U وفي ال General هتعمل Check علي أول خيار عندك وهو
Show Welcome Screen .
---------
Insert Bar
ال insert bar من أهم الحاجات الموجودة في البرنامج واللي دايما هتحتاج تستخدمها .
صورة توضيحية
علشان تخلي ال insert bar مُفعّل عندك أو Active
اعمل صفحة HTML جديدة زي ما عرفنا في عمود Create New في شاشة الترحيب
ال insert bar هو مجموعة من العناصر اللي بإماكنك إضافتها لصفحتك
Common - Layout - Forms - Data - Spry - Text - Favorites
ال Favorites ممكن تحط فيها الأيقونات أو العناصر اللي انت بحتاج تضيفها في كل موقع بتعمله
زي الصور والجداول وزي حقول البيانت Forms و أي عنصر آخر بتفضل إستخدامه دايما .
في طريقتين للعرض لل insert bar
1- ال Tabs وهي الإفتراضية في البرنامج :: زي الصورة التوضيحية ::
وبتقدر تتنقل بينهم بإنك تضغط بالماوس علي ال tab اللي انت عايزه ,
عن طريق السهم اللي في آخر يمين ال insert bar :: :: ممكن تنتقل للوضع الثاني
وهو ال Menu ,, هنضغط مع بعض علي السهم وتختار Show as Menu
صورة توضيحية
هنشوف الوضع أو طريقة العرض الثانية لل Insert bar
صورة توضيحية
وعن طريق السهم المشار إليه في الصورة تقدر ترجع تاني لوضع ال Tabs
صورة توضيحية
يبقي احنا عندنا طريقتين للعرض في ال insert bar
[Tabs - Menu]
بعض الناس بتفضل ال Tabs لأنها مريحة وبتوصلك للي انت عايزه بسرعة
وبعض الناس بتفضل ال Menu لأنها مش بتاخد كتير من مساحة العمل
اختار اللي يريحك
حاجة بس بسيطة في ال insert bar
- ال insert bar مهمة جدا .. ودايما خليها مفتوحة ادامك ,,
ولو قفلتها عن طريق الخطأ ممكن ترجعها تاني
عن طريق الذهاب لقائمة Window ثم إختيار insert أو الضغط مباشرة علي Ctrl+F2
- كل العناصر الموجودة في ال insert bar ممكن تلاقيها كمان في ال قائمة insert .
-----
Properties Panel
أو Property Inspector
صورة توضيحية
من أهم ال Panels الموجودة في البرنامج واللي دايما تخليها مفتوحة
علشان لو قفلتها -- مافيش مكان تقدر تجيب منه الخصائص اللي فيها
يعني مش زي insert bar اللي ممكن لو قفلتها تقدر تجيب العناصر من قائمة insert ,,
-----
وعن طريق السهم الصغير المشار إليه في الصورة تقدر تعمل Collapse لل Panel
" هيخفي الجزء اللي تحت فقط "
وبعد عمل Collapse تقدر من نفس السهم تعمل تاني Expand
" هيظهر الجزء اللي تحت تاني "
حضرتك بقي هتخلي الجزء اللي تحت ده ظاهر علطول لأنه مهم جدا وهنعرف ليه حالا .,
-----
ببساطة وبإختصار ال Popert inspector هي Panel بتبين الخصائص والتعديلات
اللي ممكن تعملها لأي عنصر عندك في الصفحة
وهي إفتراضيا by default معمولة علي خصائص
ال text او الكتابة .. لأنه ال Dreamweaver يعتبر محرر Editor
فمثلا لو حطينا جدول هنلاقي الخصائص الخاصة بالجدول ظهرت فيها ,,
لو حطينا صورة هنلاقي خصائص الصورة ظهرت فيها .. وهكذا ..
حطيت أنا صورة .. شوف كده
خصائص مختلفة خاصة بالصورة
تمام ؟
طيب خدت بالك من الجزء اللي تحت ,, في خصائص كتيرة ومهمة جدا هتحتاجها
علشان كده أفضل انك تعمله Expand وتسيبه دايما مفتوح زي ما قلنا .
-----
وال Property inspector زي بقيت ال Panels اللي ممكن لو قفلتها عن طريق الخطأ
ترجعها تاني من قائمة Window ثم إختيار Properties أو الضغط مباشرة علي CTRL+F3
========
انتهي درسنا
----
في الدروس انا بس بقول ايه هي ال Workspace Layout
ايه هو ال insert bar .. ايه هو ال Property inspector
لكن طبعا شرحهم الكامل وإستخدامهم هيتم من خلال الدورة ..
انا مجرد بس بعرفكم علبهم حاليا.
---
موضوع: الدورة التعليمية لبرنامج Dreamweaver CS3 :: واجهة البرنامج :: 
الأربعاء 1 أكتوبر - 17:04
