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

منتديات المشاغب (http://www.absba.org/index.php)
-   شروحات قسم تطوير المواقع والمنتديات (http://www.absba.org/forumdisplay.php?f=16)
-   -   شرح+تعريب لأحد أفضل برامج تصميم المواقع (http://www.absba.org/showthread.php?t=173771)

doongoan 18-04-2005 10:10 AM

شرح+تعريب لأحد أفضل برامج تصميم المواقع
 
مرحباً بكم إخوانى الكرام

مرحباً إخوانى الكرام
يسعدنى أن القاكم من جديد من بعد الغيبه القصيره التى غبتها عن قسمى المفضل (تطوير المواقع والمنتديات)
أرجو ألا تكونوا نسيتونى


اليكم شرح لبرنامج رائع جداً وظيفته تصميم المواقع بأحترافيه شديده
SITE SPINNER
البرنامج يحتوى على 33 قالب موقع جاهز مصمم مسبقاً ليس عليك سوى التعديل على أحدهم
و أيضاً يحتوى خاصية إنشاء موقع من البدايه
ومن يستطيع التعديل على القوالب يستطيع عمل موقع بالبرنامج من البدايه

لذلك سوف نشرح التعديل على أحد القوالب
قبل الشرح
يمكنكم تحميل التعريب (وهو من تعريبى أيضاً)
من هنـــــــــــــــــــــــــــــــــــــا

الى الشرح:

حمل البرنامج من هنــــــــــــــــــــا
بعد تثبيت البرنامج قم بوضع معلومات التسجيل كما يلى:
VS2368604R19
qzcxjzkqkqfy

المرحله الاولى ( التعرف على البرنامج )

الان وبعد تثبيت البرنامج نضغط على الايقونه التى على سطح المكتب لتشغيل البرنامج
http://absba7.absba.org/teamwork1/SPINNER/1.gif
فتظهر لنا نافذة التصميم بالبرنامج كما بالشكل
http://absba7.absba.org/teamwork1/SPINNER/2.gif

كما نلاحظ أن البرنامج يحتوى أدوات تصميم سهله وقويه فى نفس الوقت
الان أمامنا خياران:
الاول: أن نبدأ فى التعديل على هذا النموذج الذى أمامنا
الثانى : أن نفتح نموذج أخر (قالب) لنبدأ فى التعديل عليه
وهو ما سنفعله

لفتح قالب جديد
من القائمه FILE نختار OPEN TEMPLATE
http://absba7.absba.org/teamwork1/SPINNER/3.gif


فنختار أحد القوالب المتعدده
http://absba7.absba.org/teamwork1/SPINNER/4.gif
الان إنفتح القالب المختار كما بالشكل
http://absba7.absba.org/teamwork1/SPINNER/5.gif


المرحله الثانيه ( مكونات الصفحه العاديه)

وكما لاحظنا عند فتح القالب أنه يحتوى عدة مكونات وهى:
كتابات (نصوص) TEXT
صور IMAGES
روابط (LINKS )
والروابط قد تكون نصوص أو صور أو ورللأوفر ROLLOVER ( أى زر يتحرك شكله بمرور الماوس عليه)

الان نبدأ فى تعلم كيفية التعديل على النصوص TEXT
بكل بساطه نتوجه الى أى نص نريد التعديل عليه ونضغط عليه دبل كليك DOUBLE CLICK
http://absba7.absba.org/teamwork1/SPINNER/6.gif

نجد ان نافذة محرر النصوص قد إنفتحت لنا كما بالشكل
http://absba7.absba.org/teamwork1/SPINNER/7.gif


الان نريد حفظ التعديلات التى أجريناها على النص
كل ما عليك هو الضغط على ( SAVE & CLOSE )
http://absba7.absba.org/teamwork1/SPINNER/8.gif


الان سيبدأ كل هواة النقد و محترفيه ( وما أكثرهم )
فى إصطناع المشاكل للبرنامج
لأن شكل الكتابه أصبح غير مرتب بهذا الشكل
http://absba7.absba.org/teamwork1/SPINNER/9.gif


ولكن لا تتسرعوا
كل ما عليكم أن تعاينوا الصفحه فى المتصفح لتظهر لكم كما ستظهر لزوار الموقع بعد وضعه على الانترنت وذلك بالضغط
على F7
فيظهر لنا الموقع بهذا الشكل
http://absba7.absba.org/teamwork1/SPINNER/10.gif


الان ننتقل الى التعديل على الصور
فمثلاً هناك صوره مزعجه جداً جداً جداً وهى الصوره المكتوب عليها أن هذا الموقع مصمم ببرنامج SITE SPINNER وهى توجد فى جميع القوالب
http://absba7.absba.org/teamwork1/SPINNER/11.gif


وكل ما عليك هو إزالة تلك الصوره المزعجه بالضغط عليها دبل كليك لأختيارها كما بالشكل
http://absba7.absba.org/teamwork1/SPINNER/12.gif

ثم تنفتح لنا النافذه التاليه التى تخبرنا أن هذا العنصر فى الصفحه محمى ( PROTECTED ) ولكن إزالة الحمايه ممنوعه فى الاصدار التجريبى ولأننا أدخلنا معلومات التسجيل
فمن حقنا كل شىء
http://absba7.absba.org/teamwork1/SPINNER/13.gif

الان لنقم بإزالة الحمايه من هذا العنصر
كل ما عليك هو أن تضغط على رمز القفل
http://absba7.absba.org/teamwork1/SPINNER/14.gif
ليتحول الى رمز المفتاح
http://absba7.absba.org/teamwork1/SPINNER/15.gif

الان أصبح بإمكاننا فعل أى شىء مع هذا العنصر سواء تعديله أو حذفه أصلاً

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

لا تخاف كل ما عليك هو سحب تلك الطبقه بعيداً قليلاً حتى تظهر بوادر أو أجزاء من الصوره المطلوبه
http://absba7.absba.org/teamwork1/SPINNER/16.gif
هكذا قمكنا بإختيار الصوره المزعجه ...
http://absba7.absba.org/teamwork1/SPINNER/17.gif

كل ما عليك هو الضغط على الزر DELETE فى لوحة المفاتيح لتخرج لنا تلك الرساله التى تتأكد من حذف العنصر
http://absba7.absba.org/teamwork1/SPINNER/18.gif
مبروك إنحذفت الصوره المزعجه

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

الان هناك تساؤل يلح علينا جميعاً
هل كلما أرغب بالتعديل على عنصر سوف أحتاج الى إزالة الحمايه منه بالطريقة المشروحه؟
الاجابه:
لا
يمكنك أزالة حماية جميع مكونات الصفحه دفعه واحده حتى ترتاح
ولكن موضوع الحمايه هذا مفيد فى حالة وجود فريق عمل يعمل على تصميم الموقع TEAM WORK و أنت رئيسهم ولا تريد الباقون بإفساد تصميمااتك أو أجزاء منها
ولكن لو أنت المصمم الوحيد أزل الحمايه من جميع مكونات الصفحه كما يلى
من القائمه EDIT إختار UNLOCK ALL
أو إختصاراً إضغط فى لوحة المفاتيح على ALT مع U
http://absba7.absba.org/teamwork1/SPINNER/19.gif

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

الان تناولنا حذف صوره ولكننا لم نتناول كيفية إضافة صوره
بكل بساطه إضغط على هذه الايقونه
http://absba7.absba.org/teamwork1/SPINNER/20.gif

أو من القائمه OBJECT نختار IMAGE
http://absba7.absba.org/teamwork1/SPINNER/21.gif

كلاهما يؤدى الغرض

الان نختار الصوره من الصور الموجوده لدينا
http://absba7.absba.org/teamwork1/SPINNER/22.gif


الان أظن أنه ليس بأسهل من إدراج الصور

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ننتقل الان الى جزء جديد من الشرح وهو الروابط LINKS
وهى دائماً الجزء الاصعب والاهم عند تصميم المواقع
لأن موقع بلا روابط يسمى DEAD END PAGE أى : صفحه ذات نهايه ميته لا تؤدى الى شىء بعدها
أنواع الروابط :
كتابه
وطريقة جعل الكتابه رابط تم شرحها عندما شرحت التعديل على النصوص
الان ننتقل الى شرح جعل الصور تحمل رابط

لجعل الصوره تحمل رابطاً ( أى عندما يضغط عليها زائر الصفحه ينتقل الى صفحه أخرى داخل أو خارج الموقع )
نضغط على الصوره دبل كليك فينفتح لنا محرر الصور الخاص بالبرنامج
ونضغط على التفرع LINK ونكتب الرابط الذى نريده
مثلاً نكتب WWW.YAHOO.COM
ونختار مكان فتح الصفحه سواء فى صفحه جديده BLANK
أو فى نفس الصفحه PAGE
أو نختار وضع الوسم HTTP:// قبل إسم الموقع
~~~~~~~~~
وهى غير مهمه لأن جميع المتصفحات الحديثه تضع HTTP:// قبل إسم أى موقع
فعلى سبيل المثال إذا كتبت فى إنترنت إكسبلورر ( و أنا أعتبره أسوأ متصفحات الانترنت ولا أستخدمه مطلقاً) إذا كتبت WWW.YAHOO.COM
فإنه يقوم أوتوماتيكياً بتوجيهك الى HTTP://WWW.YAHOO.COM وهكذا.......
~~~~~~~~~
أو نختار MAIL TO
أى أن هذا هو رابط أيميل
أو نختار FTP لو أنه رابط إف تى بى الذى أدرجناه
أو نختار ELNET: لو أنه رابط تيلنت

وهذا يظهر بالصوره التاليه
http://absba7.absba.org/teamwork1/SPINNER/23.gif

الان إنتهينا من إعداد الروابط

~~~~~~~~~~~~~~~~~~~~~~~~~~~~

الان لدينا خطوه مهمه جداً وتحتاج منا كل التركيز
وهى التعديل على هيدر الصفحه page header

وهو عادة ما يكون فى قوالب هذا البرنامج عباره عن كتابه بخط كبير ألوانها تتناسب مع الوان الخلفيه
هناك من يقول : وما المشكله ...كتابه عاديه نعدل عليها كما عدلنا على الكتابات من قبل
ولكن للأسف هذا هو العيب الوحيد بالبرنامج أنه عند التعديل على الكتابه التى يضعها لنا البرنامج فى الهيدر ( أى فى رأس الصفحه )
فإنها لا تظهر باللغه العربيه بشكل صحيح
إذن فما الحل؟
بسيطه جداً
إمسح تلك الكتابه و إدرج كتابه عاديه من هذه الايقونه
http://absba7.absba.org/teamwork1/SPINNER/24.gif

أو من القائمه المنسدله object ونختار text
الان لا حظنا أن المشكله الوحيده هى إدراج title
ويمكننا الاستغناء عنه بالكتابه العاديه

http://absba7.absba.org/teamwork1/SPINNER/25.gif

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
(ملحوظه هذا الجزء الصغير من الشرح للفضوليين أمثالى الذين يرغبوا بمعرفة أسباب كل شىء ولا ضرر إطلاقاً إذا كنت من قليلى الوقت فيمكنك التغاضى عن هذا الجزء الصغير)
الان سوف أشرح لماذا لا ينفع الكتابه باللغه العربيه فى الخاصيه title

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

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


الان ننتقل إالى جزء جديد من الشرح
وهو إدراج أشكال هندسيه بالصفحه
وذلك من القائمه المنسدله object ونختار أحد الاشكال
http://absba7.absba.org/teamwork1/SPINNER/26.gif
فنختار rectangle مستطيل
http://absba7.absba.org/teamwork1/SPINNER/27.gif

أو ellipse بيضاوى
http://absba7.absba.org/teamwork1/SPINNER/28.gif

أو polygon مضلع
http://absba7.absba.org/teamwork1/SPINNER/29.gif

أو splin منحنى curve
http://absba7.absba.org/teamwork1/SPINNER/30.gif


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ولأدراج جدول
من القائمه object نختار table
http://absba7.absba.org/teamwork1/SPINNER/31.gif



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

تحياتى
أخوكم
دونجوان

تم رفع الصور الى سيرفر المنتدى

Some Thing 18-04-2005 10:43 AM

رنامج رائع من عضو أروع شكرا شكرا شكرا

====

أخي لماذا تضع في توقيعك هذه الجملة (نفسى حزينه جداً حتى الموت)

ماينبغي عليك وضعها ...

doongoan 18-04-2005 10:46 AM

مشكور أخى الغالى
ولكن لماذا لا يجب وضعها
لا أظن أنها مخالفه لقوانين المنتدى

Some Thing 18-04-2005 10:50 AM

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

amralsalam24 18-04-2005 10:53 AM

بارك الله فيك يا معلمنا

doongoan 18-04-2005 10:55 AM

مشكور يالغالى على تشريفك للموضوع المتواضع
وياريت بلاش موضوع معلمنا ده لأن كلنا تلاميذ يا باشا

تحياتى

al3aqel 18-04-2005 06:27 PM

هلا وغلا..بالاخ دونجوان..

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

وماشاء الله عليك..

يالله احنا وراك.. ولا راح نتركك دقيقة...ان شاء الله نتابع معك اول باول..

واشكر كل اللي شاركو في تطوير الموقع المشاغب..ولا يحرمكم الله من الاجر..

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

لذلك تجربتي وتطبيقي للدرس ومحاولة التعرف على بعض الاوامر

اتمنى يكون مقبول ..اقصد التطبيق ولا اقصد الشكل العام..لاني والله احس اني اخترعت شيء

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

وبانتظار جديدكم

تقبل احترامي

والسلام عليكم

aL-SuLaiTi 19-04-2005 12:41 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة al3aqel
هلا وغلا..بالاخ دونجوان..

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

وماشاء الله عليك..

يالله احنا وراك.. ولا راح نتركك دقيقة...ان شاء الله نتابع معك اول باول..

واشكر كل اللي شاركو في تطوير الموقع المشاغب..ولا يحرمكم الله من الاجر..

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

لذلك تجربتي وتطبيقي للدرس ومحاولة التعرف على بعض الاوامر

اتمنى يكون مقبول ..اقصد التطبيق ولا اقصد الشكل العام..لاني والله احس اني اخترعت شيء

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

وبانتظار جديدكم

تقبل احترامي

والسلام عليكم


doongoan 19-04-2005 08:30 AM

مشكور أخى الغالى (العاقل) على كلامك الاكثر من رائع تحياتى لشخصك الكريم ولكنى لأحظت أن الصور لا تظهر بصفحتك ومشكور مره أخرى على ردك الرائع و أخلاقك الكريمه

أخى الغالىA L-SuLaiTi انا سعدت جداً جداً بتشريفك للموضوع المتواضع تقبل تحياتى

أخوكم
دونجوان

mazen23 25-04-2005 09:15 PM

مشكوووووووور يالغالي.......
تحياتي لك


الساعة الآن 10:56 AM