منتديات المشاغب

منتديات المشاغب (http://www.absba.org/index.php)
-   شروحات قسم تطوير المواقع والمنتديات (http://www.absba.org/forumdisplay.php?f=16)
-   -   المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة (http://www.absba.org/showthread.php?t=155869)

ابوعبدالعزيز 03-02-2005 09:32 PM

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


مساء الخير يامشاغبين


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


درس ممتع وسهل للغايه وقد سبق وان شرح بمنتدانا الغالي المشاغب


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


اولا وقبل كل شي شاهد الموقع الذي صممته لاجراء الشرح عليه اضغط هنـــا


وهذا نموذج اخر قمت بتصميمه




بسم الله نبدأ الشرح


الأدوات التي سوف نستخدمها :


1 - برنامج الفوتوشوب الاصدار رقم 7
2 - برنامج الفرونت بيج 2003
3 - برنامج السويتش ماكس


الشرح مجزء الى عشر مراحل وهي كتالي :

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


المرحلة الثانية : شرح فتح العمل ببرنامج الفرونت بيج ومعرفة اسم ومقاسات الصور وذلك لإضافة بعض التعديلات عليها وشرح طريقة إدراجها سواء كانت صورة متحركة او ملف فلاشي.


المرحلة الثالثة : شرح إدراج كود الشاشة الأسمية ( النص المتحرك من تحت الى أعلى او من اليمين الى اليسار ) .


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

للنصوص .


المرحلة الخامسة : شرح إدراج كود القائمة المنسدلة .


المرحلة السادسة : شرح إدراج كود الشايب العجوز المرحب بالزوار .


المرحلة السابعة : شرح إدراج كود (( حدث في مثل هذا اليوم )) وايضا كود (( شريط اخبار الجزيرة )) .


المرحلة الثامنة : شرح اضافة لون لاساس الصفحة واضافة العنوان وطريقة حفظ العمل .


المرحلة التاسعة : طريقة رفع الملفات الى سيرفر مجاني .


المرحلة العاشرة : طريقة رفع الملفات الى سيرفر مدفوع

------------------------------------------------------------------------------

=== المرحلة الأولى ===


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


نبدأ اولا بفتح برنامج الفوتوشوب ونفتح عمل جديد وذلك عن طريق File >> New
ونحدد المقاسات الموضحة بالصورة التالية :




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




ملاحظة هامة
( بعد الانتهاء من التصميم نحفظ العمل بنوع psd وذلك للرجوع اليه عند حدوث اي خطأ )

الان نقوم بدمج جميع الطبقات وذلك بالضغط من لوحة المفاتيح على Ctrl+Shift+E
وذلك لاستخدام اداة تقسيم الشرائح وإضافة الروابط .. فالخانات التي سوف اقسمها بالاداة موضحة بالصورة التالية :




1 - المستطيل الاحمر / سيتم تقسيم الازرار وإدراج الروابط ببرنامج الفوتوتوشوب

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

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

5 - المستطيل البني / سيتم تقسيم هذه الخانة لادراج قائمة منسدله وذلك ببرنامج الفرونت بيج

6 - المربعين بلون السماوي يمين ويسار الصفحة / سيتم تقسيم هذه الخانة لادراج نص أو صوره ببرنامج الفرونت بيج

7 - المستطيل الرمادي / سيتم تقسيم هذه الخانة لادراج صورة متحركة وذلك ببرنامج الفرونت بيج


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




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




بعد الانتهاء من اضافة الروابط بالفوتوشوب يتبقى لنا طريقة حفظ التصميم بنوع HTML والطريقة موضحة بالصورة التالية :




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

---------------------------------------------------------------------------


=== المرحلة الثانية ===

المرحلة الثانية : شرح فتح العمل ببرنامج الفرونت بيج ومعرفة اسم ومقاسات الصور وذلك لإضافة بعض التعديلات عليها
وشرح طريقة إدراجها سواء كانت صورة متحركة او ملف فلاشي.

قبل فتح برنامج الفرونت بيج نذهب الى المستندات ثم الى My Web Sites ونننشأ مجلد جديد ف ونسميه أي اسم فأنا اختر اسم لهذا المجلد absba فسيتم شرح الغرض من انشاء هذا المجلد


الان نفتح برنامج الفرونت بيج ومن قوائم البرنامج نذهب الى File ثم نضغط على Open كما هو موضح بالصورة التالية :




تم فتح الموقع ببرنامج الفرونت بيج وهو مجموعة من الصور بلغ عددها 74 صورة منها الكبير والصغير فنحنوا لانريد الا الصور التي قسمناها ببرنامج الفوتوشوب فهي التي سيتم العمل عليها فلنلقي نظرة على الصورة الثالثة المدرجة في أول الموضوع
ونشاهد الفقرة رقم 2 - المستطيل الأزرق يوجد به اربع مستطيلات فهي الان اصبحت اربع صور بعد فتحها بالفرونت بيج
فسوف احذف هذه الصور وادرج مكانها صورة متحركة او ملف فلاشي فالطريقة سهلة جدا عليك تطبيق التالي :

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




ستشاهد اطار باسم خصائص الصورة الموضح بالصورة التالية :




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




انتهينا من طريقة ادراج الصورة المتحركة وايضا من طريقة سحب الصورة ببرنامج السويتش
يتبقى لنا الان طريقة ادراج الملف الفلاشي ببرنامج الفرونت بيج والطريقة كما هو بالصورة التالية :




---------------------------------------------------------------------------

=== المرحلة الثالثة ===


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




وهذا كود الشاشة الاسمية :

كود:

<marquee direction="up" width="275" height="190" style="tahoma: 150%; font-size: 14pt; text-align: center; border-style: solid; border-width: 0px" bgcolor="#FFFFFF" scrolldelay="70" scrollamount="2">
.................................................. ...................


=== المرحلة الرابعة ===


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




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




والآن نشاهد شكل الجدول الذي ادرجناه في الصورة التالية :




شرح الصورة :
1- الفقرة رقم 1 هذا شكل الجدول بعد ادراجه
2- الفقرة رقم 2 نضع المؤشر على العمود الأوسط ونسحبه الى اليمين حتى ان يصبح شكله كالصورة التالية :




يتبقى الان ادراج الصور الصغيرة المتحركة او ثابته والصور التي استخدمتها موضحة بالصورة التالية :




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




يتبقى علينا الان كتابة النص واضافة ارتباط له والطريقة هي :

نكتب النص المطلوب ثم نضلل عليه كما في الصورة التالية :




نضغط الماوس يمين على النص وهو مضلل ونختار ارتباط تشعبي كما في الصورة التالية :




ستجد اطار باسم ادراج ارتباط تشعبي كما في الصورة التالية :




شرح فقرات هذه الصورة :

1- الفقرة الاولى ضع الرابط في هذا الحقل طبعا يجب ان تكون مجهز الرابط وطريقة لصقه من لوحة المفاتيح تضغط على
Ctrl>>> ثم حرف C

2- الفقرة الثانية اذا انت تحب ان يفتح الرابط في صفحة جديده اضغط على الاطار الهدف ثم اختر اطار جديد ثم موافق .

3- الفقرة الثالثة اثناء تصفح الزائر ومروره على الرابط بيطلع له نص يعبر عن محتوى الرابط وطريقته اضغط على تلميح الشاشة بيطلع لك مستطيل اكتب ماتريد ثم اضغط موافق..

وبعد الانتهاء من تعبئة حقول ادراج ارتباط تشعبي اضغط على موافق وبهذه الطريقة تم ادراج الارتباط التشعبي على النصوص
وايضا يتم تطبيقها على الصور... والحمدلله انتهيت من شرح المرحلة الرابعة



--------------------------------------------------------------------------------

=== المرحلة الخامسة ===

تم طرح شرح المرحلة الخامسة في الصفحة الثانية من هذا الموضوع وذلك للتخفيف من حجم الصور المشروحة

أبا ياسر 03-02-2005 11:44 PM

متميز دائماً استاذ ابوعبدالعزيز ..

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

دمت بخير ..
:) :) ..

Abo_ELleal 04-02-2005 01:25 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة أبا ياسر
متميز دائماً استاذ ابوعبدالعزيز ..

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

دمت بخير ..
:) :) ..

ما شاء الله..

تبارك الله..

جزاك الرحمن كل خير .. علي كل ما تقدمه..

ومتميز..بل مبدع..

ولن نجد ما نوصفك به..

بارك الله فيك..

ابوزيد 04-02-2005 01:47 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة أبا ياسر
متميز دائماً استاذ ابوعبدالعزيز ..

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

دمت بخير ..
:) :) ..



ماشاء الله تبارك الله ...

أبدعت اخوي ابو عبدالعزيز على الشرح المميز .

وهذا مو جديد عليك ماشاء الله دائما مبدع في شروحاتك .

وجزاك الله خير الجزاء .

تحياتي لك .

هزيز 04-02-2005 01:57 AM

جزاك الرحمن كل خير .. علي كل ما تقدمه..

MsaS 04-02-2005 10:11 AM

ماشاء الله تبارك الله ...

أبدعت اخوي ابو عبدالعزيز على الشرح المميز .

وهذا مو جديد عليك ماشاء الله دائما مبدع في شروحاتك .

وجزاك الله خير الجزاء .

تحياتي لك

ابوعبدالعزيز 04-02-2005 01:09 PM

العفو بارك الله فيكم
واسعدني مروركم والرد الرائع في الموضوع
واتمنى لمن لديه اضافات او تعليقات ان يطرحها لنا ليستفيد الجميع
شكرا لكم ووفقكم الله

الخواجه 04-02-2005 06:05 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة MsaS
ماشاء الله تبارك الله ...

أبدعت اخوي ابو عبدالعزيز على الشرح المميز .

وهذا مو جديد عليك ماشاء الله دائما مبدع في شروحاتك .

وجزاك الله خير الجزاء .

تحياتي لك


al_hawi 04-02-2005 08:17 PM

ابـداع x ابـداع
الفـ الفـ شكر أخي ابوعبدالعزيز على هـذا الشرح الرائع

ابوعبدالعزيز 04-02-2005 11:16 PM

الخواجه
al_hawi

العفو بارك الله فيكم
واسعدني مروركم والرد الرائع في الموضوع
شكرا لكم ووفقكم الله



تم ادراج شرح المرحلة الثالثة ...........................

PHPerl 04-02-2005 11:54 PM

يحفضك الله يا ورده

God bless you abo abd al azez

You are the Best Please we want more and The Part number 4

Computer Angel 05-02-2005 01:58 AM

بارك الله فيك أخي ابو عبد العزيز

ابوعبدالعزيز 05-02-2005 09:55 AM

Computer Angel
حياك الله اخي الكريم


الله يسلمك اخي PHPerl
وابشر يالغالي المرحلة الرابعة تحت الاعداد

شكرا لمروركم والرد الطيب في الموضوع

ابوعبدالعزيز 05-02-2005 09:29 PM

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

PHPerl 06-02-2005 12:11 AM

UP always but abo abd al azez Can you help us with one thing I like to know who did you make the design in Photoshop it is very very very nice I would love to know the design that you made in photoshop Can you do that Please ?

Thanks alot

From me to you

PHPerl

nolook 06-02-2005 12:20 AM

اخي ابو عبدالعزيز
والله موضوعك مفيـــــــــــــد وخاصة لي

انا ماشي معك خطوه خطوه...

ولكن اين الباقي !!!

جزاك الله خيرا

New***OLD 06-02-2005 12:43 AM

جميل جدا جهد موفق وشرح متميز بارك الله فيك واعانك على تكملت مابدأت

بالتوفيق

dreamo5005 06-02-2005 02:03 AM

شرح اكثر من راااااائع بارك الله فيك

ولكن لى سؤال اين اجد برنامج الفرونت بيج 2003

وشكرا لك

nolook 06-02-2005 02:14 AM

برنامج الفرونت بيج حجمه كبير..ولو تاخذه سيدي من اي محل كمبيوتر اوفرلك في الوقت

Computer Angel 06-02-2005 02:24 AM

اخي ابو عبد العزيز ..... هل مجلة المشاغب اللي صممها " الراسم " بمثل هذه الطريقة

PHPerl 06-02-2005 02:27 AM

upppp

ابوعبدالعزيز 06-02-2005 11:18 AM

اخي PHPerl
بالنسبة شرح تصميم الاستايل بالفوتوشوب ما اقدر لانه لو ابشرح طريقة تصميمه بياخذ وقت طويل جدا لان الفوتوشوب بحر من الدروس
ولاكن اخي الكريم اذهب الى قسم شروحات قسم التصميم والجرافيكس :
http://www.absba.org/vb/forumdisplay.php?f=30
او الى هذا الموضوع لاستاذي العداوي :
http://www.absba.org/vb/showthread.p...4&page=1&pp=15
ستجد كل شي خاص بالتصميم
واي طريقة تعجز عنها اطلبها في موضوع جديد وماراح يقصرون معك كل المشاغبين وانا ان شاء الله ما اقصر معك
تحياتي لك


اخي nolook
ابشر يالغالي في الطريق ان شاء الله ولاكن توعدني انك تعرض لنا تطبيقك.....



اخي New***OLD
اشكرك على كلماتك الطيبة بارك الله فيك ووفقك الله.............


اخي dreamo5005
الله يسلمك وشكرا لردك الطيب في الموضوع
وبالنسبة لبرنامج الاوفيس حجمه كبير لو تبحث عنه في محلات الكمبيوتر وسعره رخيص جدا
واذا انت عندك DSL اطلبه في موضوع جديد بقسم البرامج العام وان شاء الله مايقصرون معك كل المشاغبين
تحياتي لك


حياك اخي Computer Angel
اعتقد ان مجلة المشاغب او اي مجلة صممت ببرامج اخرى ....ولاكن تصميمي مقتبس منها فقط الصفحة الرئيسية..........

بارك الله فيكم واشكركم على زيارتكم وكلماتكم الطيبة وسوف اطرح الان شرح للمرحلة الخامسة .

ابوعبدالعزيز 06-02-2005 11:26 AM

=== المرحلة الخامسة ===

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

الان تم ادراج كود القائمة المنسدلة واصبح شكله كالتالي :


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


بعد اختيار خصائص الخلية ستجد اطار باسم خصائص الخلية كما هو موضح بالصورة التالية :


بفقره واحد المطلوب منك الان الضغط على استعراض لاستيراد الصورة . والصورة طبعا موجودة من ضمن الــ 74 صورة الموجودة في ملف images ...
الفقرة الثانية : بعد استيراد الصورة ستجد في هذا الحقل اسم الصورة المستوردة عليك الان بالضغط على موافق لاتمام الاستيراد
حتى ان يصبح الشكل النهائي كما هو موضح بالصورة التالية :


وبتطبيق خطوات المرحلة الخامسة يتم بذلك ادراج كود القائمة المنسدلة ..

ومن اراد كود القائمة المنسدلة يضغط من هنـــــــا

وفقكم الله

Some Thing 06-02-2005 10:28 PM

موضوع رائع بل أكثر من رائع شكرا ثم شكرا
درس تحفة !!!!!!!!!!

ابوعبدالعزيز 06-02-2005 11:50 PM

=== المرحلة السادسة ===

المرحلة السادسة : شرح إدراج كود الشايب العجوز المرحب بالزوار الموضح شكله بالصورة التالية :





وطريقة إدراجة سهلة جدا يوجد أدوات لبرنامج الفرونت بيج في الأسفل وهي :

تصميم و انقسام و تعليمات برمجيه و معاينة وشكلها موضح بالصورة التالية :




اضغط على تعليمات برمجيه والموضح بالفقرة رقم واحد وابحث عن السطر التالي :

<meta http-*****="Content-Type" content="text/html; charset=windows-1252">

وعند الحصول عليه قم باستبداله بهذا السطر:

<meta http-*****="Content-Type" content="text/html; charset=windows-1256">

لو تلاحظ الاختلاف في الرقم بدل 1252 وضعنا 1256
وبالنسبة لي لم اغير فيه شي لاني وجدته 1256

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


<OBJECT classid=CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F id=ricci width="32"

height="32"></OBJECT>
<script>
var MerlinID;
var MerlinACS;
ricci.Connected = true;
MerlinLoaded = LoadLocalAgent(MerlinID, MerlinACS);
Merlin = ricci.Characters.Character(MerlinID);
Merlin.Show();
Merlin.Play("congratulate");
Merlin.Speak("أهلاً وسهلاً باعضاء المشاغب");
Merlin.Play("domagic1");
Merlin.Speak("ونتمنى لكم وقتاً سعيداً في تصفح الموقع");
Merlin.Hide();
function LoadLocalAgent(CharID, CharACS) {
LoadReq = ricci.Characters.Load(CharID, CharACS);
return(true);
}
</SCRIPT>



اخي الكريم باستطاعتك تغيير النص المكتوب باللغة العربية وبعد نسخ الكود نذهب في المساحة الفارغة في اخر صفحة التصميم ونضع المؤشر في وضع التوسيط ثم نذهب الى أدوات البرنامج التي بالأعلى ونضغط على إدراج ثم Web Component كما هو موضح بالصورة التالية :




ستشاهد اطار بأسم إدراج Web Component الموضح بالصورة التالية :





شرح فقرات الصورة :
1- ضلل على عناصر تحكم متقدمة
2- ستجد قائمة على اليسار ضلل على HTML
3- بعد ذلك اضغط على انهاء
بعد الضغط على انهاء ستشاهد اطار باسم علامة HTML الموضح بالصورة التالية :





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

ابوعبدالعزيز 07-02-2005 12:09 AM

تسلم يالغالي Some Thing
واشكرك على المرور والرد الطيب في الموضوع
وفقك الله

nolook 07-02-2005 12:55 PM

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

وموقعي الحين جاهز مابقي غير اني ارفعه ..وانتظر الدرس منك...

-_- جواني -_- 07-02-2005 01:34 PM

مشكوووووووووور

وصراحة شرح متقن جدا جدا

محبك

ابوعبدالعزيز 07-02-2005 02:03 PM

=== المرحلة السابعة ===

المرحلة السابعة : شرح إدراج كود (( حدث في مثل هذا اليوم )) وايضا كود (( شريط اخبار الجزيرة )) .
بسم الله نبدأ بشرح هذه المرحلة وهي كالتالي :
في الخانة التي نريد ان نضع كود حدث في مثل هذا اليوم أو كود شريط اخبار الجزيرة في هذه الخانة نضع المؤشر في
وضع التوسيط ثم ننسخ كود حدث في مثل هذا اليوم :

<IFRAME
frameBorder=0 height=50 name=I2 scrolling=no
src="http://www.aldorr.com/vb/today.php"
width="100%" target="_blank">
</IFRAME>


أو كود شريط أخبار الجزيرة :


<IFRAME name=I1 marginHeight=4 src="http://www.qassimy.com/jaz.php" frameBorder=0 width=462 scrolling=no height=33 align="center"></IFRAME>


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


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


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

والانتهاء من المرحلة السابعة

ابوعبدالعزيز 07-02-2005 02:11 PM

=== المرحلة الثامنة ===

المرحلة الثامنة : شرح اضافة لون لاساس الصفحة واضافة العنوان وطريقة حفظ العمل .

اخي الكريم في بداية تصميمي للاستايل ببرنامج الفوتو شوب وضعت مقاس العرض 772 ومقاس الارتفاع 800
وعندما حفظت العمل وفتحته ببرنامج الفرونت بيج وجدت في أطراف الصفحة من اليمين وفي الأسفل حواف بيضاء
والموضح شكلها بالصورة التالية :


ولاخفاء هذا اللون وصبغه بلون الاستايل البرتقالي الفاتح عليك باتباع التالي :

في أي خانة من التصميم اضغط الماوس يمين واختر خصائص الصفحة كما هو موضح بالصورة التالية :


ستشاهد اطار باسم خصائص الصفحة كما هو موضح بالصورة التالية :


شرح فقرات الصورة :
وانت على عام في فقره واحد ضع عنوان موقعك فمثلا انت فتحت موقعك ففي المستعرض يمكنك مشاهدة عنوان
الموقع الذي كتبته في هذا الحقل وايضا عند اضافتة الى المفضلة ستشاهد العنوان الذي كتبته في حقل فقر واحد..

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


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


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

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


بعد ذلك ستشاهد اطار باسم حفظ بأسم كما هو موضح بالصورة التالية :


لو ترجع الى المرحلة الثانية من هذا الموضوع فقد انشأنا مجلد بأسم absba الموجود في المستندات ثم My Web Sites

فلنشرح فقرات الصورة :
فقرة واحد نذهب الى المجلد الذي انشأناه
فقره اثنين نسمي الملف index طبعا هذه هي الصحة الرئيسية للموقع فلو عندي صفحة ثانية اسميها index1 وهكذا
فقره ثلاثه نضغط على حفظ وسنشاهد اطار باسم حفظ الملفات المضمنه الموضح بالصورة التالية :


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

وبهذه الخطوات يتم الانتهاء من المرحلة الثامنة
وفقكم الله

PHPerl 07-02-2005 04:44 PM

Thank you so much
 
Thank you so so so much Brother God bless you abo abd al azez you are the best Keep it up brother we are all with you and god with you. Thanks for everything.


from me your brother


PHPerl


Ta7eyate

ابوعبدالعزيز 07-02-2005 05:54 PM

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




اخي الكريم -_- جواني -_-
العفو بارك الله فيك واشكرك على المرور والرد في الموضوع





اخي الغالي PHPerl
الله يرفع مقدارك
شكرا لك اخي PHPerl على المرور والرد في الموضوع


تحياتي للجميع

yosyoyo 07-02-2005 06:47 PM

جزاك الله خيرا ....... و نفع الله بك
 
شرح و لا اجمل و لا امتع و لااروع
بارك الله فيك

صقر الرواسي 07-02-2005 06:51 PM

أنا أستحي أني























ما قلتلك شكرا من أول الموضوع

MoShaKeS™ 07-02-2005 08:54 PM

شـــــــرح أكثر من رائـــــــع

بصراحــــة يعجز لسانــــي عن الوصــــــف


دائمــــا مميز




مشكور

البلاد 07-02-2005 09:34 PM

شكرا لك ابو عبدالعزيز
موضوع اكثر من رائع

وألف مبروك الترقيه

ابوعبدالعزيز 08-02-2005 12:10 AM

yosyoyo
صقر الرواسي
مــشـاكـــس
البلاد


اسعدني مروركم والرد الرائع في الموضوع
والله يبارك فيك اخي البلاد
وفقكم الله

أخو العرب 08-02-2005 01:36 AM

والله رائع ومبدع ومهما قلت لن أوفيك شيئاً
الأن أتعلم منك وأنا مصفر ولكن لن يذهب تعبك هدر بمشيئة الله أكون أحد تلاميذك فتقبل ملفي :)
http://www.islambgd.com/upload/sas25.gif :D

ابوعبدالعزيز 08-02-2005 02:20 AM

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

ابوعبدالعزيز 08-02-2005 03:55 AM

=== المرحلة التاسعة ===

المرحلة التاسعة طريقة رفع الملفات الى سيرفر مجاني وشرحي بيكون على موقع لايكوس

بسم الله نبدأ الشرح

اولا نحجز مساحة في موقع lycos بالضغط على هذا الرابط :
وافق على شروط الاستخدام :


نقوم بتعبئة البيانات الموجودة بالنموذج التالي :


الآن ستصل الى بريدك رسالة تفعيل الأشتراك كما هو موضح بالصورة التالية :


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


نفتح الرسالة.. فنجد رسالة التفعيل من موقع لايكوس كالشكل التالي :


فنضغط على رابط التفعيل في الرسالة..

فينتقل بنا المتصفح الى موقع لايكوس مرة أخرى .. فنقوم بتعبئة الفراغات.. كما في الصورة التالية :


الآن أصبح لدينا موقع مجاني محجوز.. على موقع لايكوس..

اضغط على الرابط التالي وسجل الدخول


بعد تسجيل الدخول اضغط على Site building tools الموجودة في الجهة اليسرى كما في الصورة التالية :


ثم اضغط على WebFTP الموضح بالصورة التالية :


بعد ذلك اضغط على Open WebFTP الموجودة في وسط الصفحة الموضحة بالصورة التالية :


بيفتح معك اطار جديد وهو المطلوب لتحميل الملفات شاهد الصورة التالية :


شرح الصورة :
فقره رقم واحد احذف هذا الملف index.html لاني سوف ارفع ملف بنفس الاسم وطريقة حذفه اضغط عليه بالماوس مرة واحدة ثم اذهب اضغط على سلة المحذوفات الموضحة بالسهم ووافق على الحذف

فقرة اثنين بعد حذف ملف index.html اضغط على استعراض وابدأ برفع الملفات بالضغط على استعراض ستشاهد هذا الاطار الموضح بالصورة التالية :


بعد الضغط على استعراض وسحب جميع الملفات بيكون انتهينا من رفع الموقع ولمشاهدته اضغط على الرابط التالي :


ضع بدل yourname اسم موقعك

وهنا شرح لأخي AhMaD_Q8


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


الساعة الآن 09:20 PM