يسرني احبتي تقديم النسخه الجديده من برنامج Sothink DHTML الرائع في تصميم القوائم على صفحات المواقع
حجم البرنامج 2,7 ميقا بايت مضغوط
بيئة البرنامج Windows All
النسخه 4.2 Trail
قمت بتحميله الى هنا لضمان وجود النسخه
التحميل من هنا
لا يحتاج كراك او سيريال
قم بتنصيب البرنامج كاي برنامج اخر .. اهم خطوه في التنصيب هي عندما يسألك هل تريد تنصيب ملحقات Front page و Dream weaver
هو ان تجيب بنعم على الفرونتبيج .. واذا كنت تملك دريم ويفر فاجب بنعم ايضا( ضع علامة صح في الفراغات المقابله لاسماء البرامج )
وبعد ان تقوم بالتنصيب اذهب الى برنامج فرونتبيج وقم بتشغيله ستجد ايقونه في وسط البرنامج .. اسحبها وضعها في شريط الادوات في المكان الذي يناسبك .. وسنقوم في نهاية الموضوع بشرح كيفية ارسال العمل من هنا الى الفرونت بيج ..
الان وقد انتهينا من التركيب لنبدأ العمل على البرنامج ..
عند تشغيل البرنامج للمره الاولى فانه سيبدو كما في الصوره التاليه .. وفيها تعريف بسيط بايقونات البرنامج واجزاءه .. ونوافذه .. ولاحظ انه يبدأ مباشره بفتح مشروع جديد ويمكنك البدء في هذا المشروع والتغيير فيه مباشرة .. دون الحاجه الى فتح جديد .. بالنسبه لاستخدام النوافذ الصغيره فقد وضعت لها شرح في الصور التي تليها كل على حده ...
هذه النافذه مخصصه لما إذا كنت قد أضفتَ نفس قائمةَ dhtml إلى العديد مِنْ الصفحاتِ، فأن هذه الصفحاتِ قَدْ تَكُون في أدلةِ مختلفةِ، لذا فان القائمة لا تَستطيعُ العَمَل لإستعمال الطريقِ النسبيِ (العنوان في ويب ) لملفاتِ المصدرِ. لذلك، يَجِبُ أَنْ تَضعَ عنوان او طريق لاتباعه في جميع الصفحات وذلك عن طريق فتح مجلد داخل الموقع. وارسال هذه الملفاتِ إلى ذلك المجلد الذي فتحته في موقعك. حيث تقوم بكتابة العنوان في الفراغ المقابل لـ Web path . وهذه الميزه ليست محسوبه في عملنا هذا ولكن سأجيب عن اي استفسار حولها باذن الله .. ان اهم ما يعنينا في هذه النافذه الان هو تحديد مكان القائمة في صفحة ويب... فمن القائمه المجاوره لكلمة Align اختر ما اذا كنت تريد وضعها على يمين الصفحه او يسارها او وسط الصفحه .. وهذا كل مافي الامر ..
في هذه النافذه يمكنك ان :-
General
1- Display : يُعرّفُ عرضُ او خروج القائمةَ المخفيه - بشكل عمودي أَو أفقياً.
2- Trans شفافيه :تحكم في الشفافيةً. عدّلْ شفافيةَ قائمةِ popup بإدخال قيمةَ أَو بسْحبُ slider. القائمة سَتَكُونُ مخفية عندما القيمةَ 100.
3- Spacing: مباعدة المادةِ كميةُ المسافةِ بين كُلّ مادة واخرى. حدّدْ عدد مِنْ نقطةِ الشاشة (pixel ) لوَضْع مسافه بين مواد القائمه.
4- Padding البطانة: بطانة المادةِ كميةُ الفضاءِ بين محتوى مادةِ وحَدِّه (أَو حائط). حدّدْ عدد مِنْ نقطةِ الشاشة (pixel ) لوَضْع بطانة المادةِ.
5-BG color لون الخلفيه: أنْقرُ زرُّ اللونَ واختارُ لوناً للخلفيةَ مِنْ القائمه المنسدله لعرض الالوان. إنقرْ زرَّ لوحة الألوانَ لتَوسيع إختيارِ لونِكَ أَو أدخلَ رمزَ إتش تي إم إلَ الذي يدل على اللونِ. لون الخلفيةِ يُمْكِنُ أَنْ يُشاهد عندما تكون قيمةَ المباعدة (Spacing ) للمادةِ أكبر مِنْ(0) .
6-Transparent شفّاف: يُدقّقُ هذا الخيارِ لوَضْع خلفيةِ القائمةِ كشفّافة.
7-BG Image صورة الخلفيه: اضغط زرّ حافظةِ لتَجَوُّل في جهازك وإخْتياَر صورةً كخلفية. يُمْكِنُك أَنْ تَطْبعَ مسار الصورةَ أيضاً. والسهمين بجوار عنوان الصوره هي لاختيار كيفية عرض الصوره داخل خلفية المادة اما عموديه او افقيه .
8-Border لون حدودِ: أنْقرُ زرُّ السهمَ لإلتِقاط لونِ الحدودِ. يُمْكِنُك أَنْ تَضعَ لونَ مختلفَ لكُلّ جانب بنَقْر زرِّ السهمِ المختلفِ.
9-Synchronize all زَامنْ الكُلّ: عندما تَختارُ هذا الخيارِ، فهذا يَعْني بأنّك سَتَستعملُ نفس اللونِ لكُلّ حدود.
10-Width العرض: حدّدُ عدداً في نقطةِ الشاشة (pixel) أَو يَنْقرُ زرَّ السهمَ لوَضْع سُمكِ الحدودَ.
11-Style المظهر: حدّدُ مظهر الحدودِ مِنْ القائمةِ المنسدله.
12-Outset & Inset المظهر الخارجي والداخلي: أنْقرُ السهمُ بجانب Style للحُصُول على تأثيرِ الشكلَ أَو البدايةَ. ولاحظ ان Outset/ Inset يتعلّقُ بلونِ الخلفيةَ .. لذا فان اعدادك السابق للونِ الحدودِ سَيُعدّلُ ذاتيا.
Advanced Tabعندما تذهب الى Advanced فستجد الادوات التاليه ...
1- Popup direction إتّجاه القائمه المخفيه: يَختارُ إتّجاهاً مِنْ القائمةِ المنسدله أَو يَتْركُ في الموقعِ المركزيِ الأصليِ (ذاتي Auto). وتستطيع تحديده حسب موقع القائمه في صفحتك اما ان تختار فتحه الى اليمين او اليسار او اتركه في وضع ذاتي مركز القائمه.
2- The corner's X-coordinate : ادخل قيمة الزاويه التي ترغب خروج القائمه المخفيه بحدودها أَو تَنْقرُ السهمَ لوَضْع قيمة الزاويه.
3- The corner's Y-coordinate: ادخل قيمة الزاويه التي ترغب خروج القائمه المخفيه بحدودها أَو تَنْقرُ السهمَ لوَضْع قيمة الزاويه.
Effects Tab
1- Drop Shadowِ هبوط الظل: يُضيفُ الظِلُّ إلى مادةِ القائمةِ. إذا كنت لا تُريدُ إسْتِعْمال الظِلِّ، إخترْ "لا شيئ".
2- Shadow Thickness سُمك الظِلِّ: عندما تَختارُ "بسيط simple" أَو "معقّدَ Complex" في الظِلِّ Shadow، هذا الخيارِ سيُمَكن السُمكِ .اكتب القيمة أَو انقر السهمِ لوَضْع سُمكِ الظِلِّ.
3- Colorاللون: انْقرُ زرُّ اللونَ واختارُ لوناً مِنْ قائمة الالوان لتحدد لون الخلفيةَ. إنقرْ زرَّ لوحة الألوانَ لتَوسيع إختيارِ لونِكَ أَو لإدْخال رمزِ إتش تي إم إلَ الخاص باللونِ المطلوب.
4- Effect for showing تأثيرات للعرض: يَستعملُ لوضع تأثيرُ خاصُّ لعَرْض القائمةِ. إنقرْ السهمَ وإخترْ تأثيرَ واحد مِنْ القائمةِ المنسدله. وللمعلوميه هذه الخاصيه مدعومه في المتصفحات 4.0 واحدث.
5- effect for hiding التأثير للإختفاء: يَستعملُ لوضع تأثيرُ خاصُّ لإخْفاء القائمةِ. إنقرْ السهمَ وإخترْ تأثيرَ واحد مِنْ القائمةِ المنسدله.
6- Special speed السرعة الخاصّة: ادخل سرعة التاثير أَو تَسْحبُ slider لوَضْع سرعةِ التأثيرِ.
في هذه النافذه ارجو ان تتذكر من الصوره الاولى عندما قلت في الكتابه عليها بان ادواتها ستظهر عندما تختار ماده من القائمه للعمل عليها .. ولكي تجعل ادواتها تظهر .. عد الى الصوره الاولى .حيث من الجزء الايسر للصفحه الرئيسيه تشاهد في الحقل كلمة Menu Item 1 .. وبالضغط عليها ستفتح ادوات هذه النافه ويمكنك الان وضع الاسم والعنوان المطلوب وكيفية فتح الرابط الجديد هل تريده في نفس الصفحه ام في صفحه اخرى . وهي لا تختلف عن السابقه الا في وضع الروابط وتحديد نوع القائمة اما خطيه او لغة HTML او صور يمكنك البرنامج من حفظها والافضل حسب تجربتي ان تختار HTML وفي الصور المرفقه توضيح لما يمكن ان تقوم به..
ومن Mouse Over Tab ستجد نفس الادوات والخيارات والافضل ان تنقل جميع التغييرات التي احدثتها في التاب الاول نفسها الى هذا التاب لكي لايكون هناك اختلال في حجم الزر اذا لامسه الماوس .. ويمكنك وضع تغيير معقول لكي لاتكون بصوره مشوهه .. ولك الخيار في ذلك
ومن هنا يمكنك ان تختار هيئة او ستايل القائمه او تصميمها من خيالك اذا كان لديك صور صغيره فيمكنك استخدامها كصور للخلفيه ..
والان كما تلاحظ ادخلت عدد من الروابط لموقع عيون عربيه وصنعتها كقوائم فرعيه وفرعيه داخليه ضمن القائمه الرئيسيه
الشرح على الصوره
وفي هذه الصوره تكمله لشرح الصوره السابقه
وانظر الصوره التاليه لمزيد من الشرح
هذا اهم مايمكن ان نقدمه عن البرنامج .. وبامكانك اكتشاف المزيد من خصائص البرنامج من خلال العمل .. وهو سهل للغايه ويقدم اعمال رائعه جدا ..
والان بعد ان تكون قد انتهيت من اعداد القائمه وتجهيزها.. قم بحفظها كاي مستند اخر في اي برنامج من File >> Save as ثم اختر اسم للحفظ ..
سنقوم الان باستقدامها في برنامج فرونتبيج
شاهد الصوره
والصوره التاليه
وشاهد هنا ايضا
الصوره الاخيره
حجم البرنامج 2,7 ميقا بايت مضغوط
بيئة البرنامج Windows All
النسخه 4.2 Trail
قمت بتحميله الى هنا لضمان وجود النسخه
التحميل من هنا
لا يحتاج كراك او سيريال
قم بتنصيب البرنامج كاي برنامج اخر .. اهم خطوه في التنصيب هي عندما يسألك هل تريد تنصيب ملحقات Front page و Dream weaver
هو ان تجيب بنعم على الفرونتبيج .. واذا كنت تملك دريم ويفر فاجب بنعم ايضا( ضع علامة صح في الفراغات المقابله لاسماء البرامج )
وبعد ان تقوم بالتنصيب اذهب الى برنامج فرونتبيج وقم بتشغيله ستجد ايقونه في وسط البرنامج .. اسحبها وضعها في شريط الادوات في المكان الذي يناسبك .. وسنقوم في نهاية الموضوع بشرح كيفية ارسال العمل من هنا الى الفرونت بيج ..
الان وقد انتهينا من التركيب لنبدأ العمل على البرنامج ..
عند تشغيل البرنامج للمره الاولى فانه سيبدو كما في الصوره التاليه .. وفيها تعريف بسيط بايقونات البرنامج واجزاءه .. ونوافذه .. ولاحظ انه يبدأ مباشره بفتح مشروع جديد ويمكنك البدء في هذا المشروع والتغيير فيه مباشرة .. دون الحاجه الى فتح جديد .. بالنسبه لاستخدام النوافذ الصغيره فقد وضعت لها شرح في الصور التي تليها كل على حده ...
هذه النافذه مخصصه لما إذا كنت قد أضفتَ نفس قائمةَ dhtml إلى العديد مِنْ الصفحاتِ، فأن هذه الصفحاتِ قَدْ تَكُون في أدلةِ مختلفةِ، لذا فان القائمة لا تَستطيعُ العَمَل لإستعمال الطريقِ النسبيِ (العنوان في ويب ) لملفاتِ المصدرِ. لذلك، يَجِبُ أَنْ تَضعَ عنوان او طريق لاتباعه في جميع الصفحات وذلك عن طريق فتح مجلد داخل الموقع. وارسال هذه الملفاتِ إلى ذلك المجلد الذي فتحته في موقعك. حيث تقوم بكتابة العنوان في الفراغ المقابل لـ Web path . وهذه الميزه ليست محسوبه في عملنا هذا ولكن سأجيب عن اي استفسار حولها باذن الله .. ان اهم ما يعنينا في هذه النافذه الان هو تحديد مكان القائمة في صفحة ويب... فمن القائمه المجاوره لكلمة Align اختر ما اذا كنت تريد وضعها على يمين الصفحه او يسارها او وسط الصفحه .. وهذا كل مافي الامر ..
في هذه النافذه يمكنك ان :-
General
1- Display : يُعرّفُ عرضُ او خروج القائمةَ المخفيه - بشكل عمودي أَو أفقياً.
2- Trans شفافيه :تحكم في الشفافيةً. عدّلْ شفافيةَ قائمةِ popup بإدخال قيمةَ أَو بسْحبُ slider. القائمة سَتَكُونُ مخفية عندما القيمةَ 100.
3- Spacing: مباعدة المادةِ كميةُ المسافةِ بين كُلّ مادة واخرى. حدّدْ عدد مِنْ نقطةِ الشاشة (pixel ) لوَضْع مسافه بين مواد القائمه.
4- Padding البطانة: بطانة المادةِ كميةُ الفضاءِ بين محتوى مادةِ وحَدِّه (أَو حائط). حدّدْ عدد مِنْ نقطةِ الشاشة (pixel ) لوَضْع بطانة المادةِ.
5-BG color لون الخلفيه: أنْقرُ زرُّ اللونَ واختارُ لوناً للخلفيةَ مِنْ القائمه المنسدله لعرض الالوان. إنقرْ زرَّ لوحة الألوانَ لتَوسيع إختيارِ لونِكَ أَو أدخلَ رمزَ إتش تي إم إلَ الذي يدل على اللونِ. لون الخلفيةِ يُمْكِنُ أَنْ يُشاهد عندما تكون قيمةَ المباعدة (Spacing ) للمادةِ أكبر مِنْ(0) .
6-Transparent شفّاف: يُدقّقُ هذا الخيارِ لوَضْع خلفيةِ القائمةِ كشفّافة.
7-BG Image صورة الخلفيه: اضغط زرّ حافظةِ لتَجَوُّل في جهازك وإخْتياَر صورةً كخلفية. يُمْكِنُك أَنْ تَطْبعَ مسار الصورةَ أيضاً. والسهمين بجوار عنوان الصوره هي لاختيار كيفية عرض الصوره داخل خلفية المادة اما عموديه او افقيه .
8-Border لون حدودِ: أنْقرُ زرُّ السهمَ لإلتِقاط لونِ الحدودِ. يُمْكِنُك أَنْ تَضعَ لونَ مختلفَ لكُلّ جانب بنَقْر زرِّ السهمِ المختلفِ.
9-Synchronize all زَامنْ الكُلّ: عندما تَختارُ هذا الخيارِ، فهذا يَعْني بأنّك سَتَستعملُ نفس اللونِ لكُلّ حدود.
10-Width العرض: حدّدُ عدداً في نقطةِ الشاشة (pixel) أَو يَنْقرُ زرَّ السهمَ لوَضْع سُمكِ الحدودَ.
11-Style المظهر: حدّدُ مظهر الحدودِ مِنْ القائمةِ المنسدله.
12-Outset & Inset المظهر الخارجي والداخلي: أنْقرُ السهمُ بجانب Style للحُصُول على تأثيرِ الشكلَ أَو البدايةَ. ولاحظ ان Outset/ Inset يتعلّقُ بلونِ الخلفيةَ .. لذا فان اعدادك السابق للونِ الحدودِ سَيُعدّلُ ذاتيا.
Advanced Tabعندما تذهب الى Advanced فستجد الادوات التاليه ...
1- Popup direction إتّجاه القائمه المخفيه: يَختارُ إتّجاهاً مِنْ القائمةِ المنسدله أَو يَتْركُ في الموقعِ المركزيِ الأصليِ (ذاتي Auto). وتستطيع تحديده حسب موقع القائمه في صفحتك اما ان تختار فتحه الى اليمين او اليسار او اتركه في وضع ذاتي مركز القائمه.
2- The corner's X-coordinate : ادخل قيمة الزاويه التي ترغب خروج القائمه المخفيه بحدودها أَو تَنْقرُ السهمَ لوَضْع قيمة الزاويه.
3- The corner's Y-coordinate: ادخل قيمة الزاويه التي ترغب خروج القائمه المخفيه بحدودها أَو تَنْقرُ السهمَ لوَضْع قيمة الزاويه.
Effects Tab
1- Drop Shadowِ هبوط الظل: يُضيفُ الظِلُّ إلى مادةِ القائمةِ. إذا كنت لا تُريدُ إسْتِعْمال الظِلِّ، إخترْ "لا شيئ".
2- Shadow Thickness سُمك الظِلِّ: عندما تَختارُ "بسيط simple" أَو "معقّدَ Complex" في الظِلِّ Shadow، هذا الخيارِ سيُمَكن السُمكِ .اكتب القيمة أَو انقر السهمِ لوَضْع سُمكِ الظِلِّ.
3- Colorاللون: انْقرُ زرُّ اللونَ واختارُ لوناً مِنْ قائمة الالوان لتحدد لون الخلفيةَ. إنقرْ زرَّ لوحة الألوانَ لتَوسيع إختيارِ لونِكَ أَو لإدْخال رمزِ إتش تي إم إلَ الخاص باللونِ المطلوب.
4- Effect for showing تأثيرات للعرض: يَستعملُ لوضع تأثيرُ خاصُّ لعَرْض القائمةِ. إنقرْ السهمَ وإخترْ تأثيرَ واحد مِنْ القائمةِ المنسدله. وللمعلوميه هذه الخاصيه مدعومه في المتصفحات 4.0 واحدث.
5- effect for hiding التأثير للإختفاء: يَستعملُ لوضع تأثيرُ خاصُّ لإخْفاء القائمةِ. إنقرْ السهمَ وإخترْ تأثيرَ واحد مِنْ القائمةِ المنسدله.
6- Special speed السرعة الخاصّة: ادخل سرعة التاثير أَو تَسْحبُ slider لوَضْع سرعةِ التأثيرِ.
في هذه النافذه ارجو ان تتذكر من الصوره الاولى عندما قلت في الكتابه عليها بان ادواتها ستظهر عندما تختار ماده من القائمه للعمل عليها .. ولكي تجعل ادواتها تظهر .. عد الى الصوره الاولى .حيث من الجزء الايسر للصفحه الرئيسيه تشاهد في الحقل كلمة Menu Item 1 .. وبالضغط عليها ستفتح ادوات هذه النافه ويمكنك الان وضع الاسم والعنوان المطلوب وكيفية فتح الرابط الجديد هل تريده في نفس الصفحه ام في صفحه اخرى . وهي لا تختلف عن السابقه الا في وضع الروابط وتحديد نوع القائمة اما خطيه او لغة HTML او صور يمكنك البرنامج من حفظها والافضل حسب تجربتي ان تختار HTML وفي الصور المرفقه توضيح لما يمكن ان تقوم به..
ومن Mouse Over Tab ستجد نفس الادوات والخيارات والافضل ان تنقل جميع التغييرات التي احدثتها في التاب الاول نفسها الى هذا التاب لكي لايكون هناك اختلال في حجم الزر اذا لامسه الماوس .. ويمكنك وضع تغيير معقول لكي لاتكون بصوره مشوهه .. ولك الخيار في ذلك
ومن هنا يمكنك ان تختار هيئة او ستايل القائمه او تصميمها من خيالك اذا كان لديك صور صغيره فيمكنك استخدامها كصور للخلفيه ..
والان كما تلاحظ ادخلت عدد من الروابط لموقع عيون عربيه وصنعتها كقوائم فرعيه وفرعيه داخليه ضمن القائمه الرئيسيه
الشرح على الصوره
وفي هذه الصوره تكمله لشرح الصوره السابقه
وانظر الصوره التاليه لمزيد من الشرح
هذا اهم مايمكن ان نقدمه عن البرنامج .. وبامكانك اكتشاف المزيد من خصائص البرنامج من خلال العمل .. وهو سهل للغايه ويقدم اعمال رائعه جدا ..
والان بعد ان تكون قد انتهيت من اعداد القائمه وتجهيزها.. قم بحفظها كاي مستند اخر في اي برنامج من File >> Save as ثم اختر اسم للحفظ ..
سنقوم الان باستقدامها في برنامج فرونتبيج
شاهد الصوره
والصوره التاليه
وشاهد هنا ايضا
الصوره الاخيره
ليست هناك تعليقات:
إرسال تعليق