شرح طريقة طريقه قص وتصميم واجهه الموقع للمبتدئين

[admin]

شرح طريقة طريقه قص وتصميم واجهه الموقع للمبتدئين

بسم الله الرحمن الرحيم

-مقدمه

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

-برنامج تحتاجه لتسهيل عملية القص

حمل البرنامج التالي image splitter مع الشكر الخاص للاخ الرفيع صاحب شبكه الخريف لتوفيره

Images Splitter (http://www.alwannah.com/uplo/imagesplitter/Imgesplitter.zip)

الباسوورد

WWW.ARABGLORY.COM (http://WWW.ARABGLORY.COM)
بي اكتيها بحروف صغيره


وانا اخذته منهم
الملف المضغوط معه ملف تثبيت setup البرنامج وملف نوت باد فيه السيريال للبرنامج
ثبت البرنامج وبعدين شغله
افتح ملف النوت باد بتلاقي فيه الاسم ورقم التسجيل
اذهب الى برنامج image splitterمن القائمه فوق اختار help
وبعدين register
http://www.alwannah.com/uplo/imagesplitter/help.gif
يطلع لك مربع ادخل فيه الاسم ورقم التسجيل
http://www.alwannah.com/uplo/imagesplitter/reg.gif
وكذا صار البرنامج مجاني free

-البدايه

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

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

http://www.alwannah.com/uplo/imagesplitter/1.gif

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

الا اذهب الى برنامج قص الصور واختار الزر
http://www.alwannah.com/uplo/imagesplitter/2.gif
واختار الصوره اللي تبي تقصها اللي هي واجهه الموقع

اختار الزر
http://www.alwannah.com/uplo/imagesplitter/3.gif
لعمل خطوط عرضيه للقص هذه الخطوط توضع فوق وتحت الزر وفوق الفوتر وتحت البنر وفي اي مكان تحتاجه

اختار الزر
http://www.alwannah.com/uplo/imagesplitter/4.gif
لعمل خطوط طوليه للقص هذه الخطوط توضع على يمين ويسار الازرار وكذا كل زر يصير مستقل لحاله

وهذه نتيجه التحديد
http://www.alwannah.com/uplo/imagesplitter/5.gif

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

تختار الزر
http://www.alwannah.com/uplo/imagesplitter/6.gif
وهذا زر اضافه الروابط

اذهب على الزر اللي تبي تضيف له رابط واضغط عليه .. راح يطلع عليه شبكه مثل
http://www.alwannah.com/uplo/imagesplitter/7.gif

وبيطلع لك مربع خصائص الروابط مثل
http://www.alwannah.com/uplo/imagesplitter/8.gif

URL هنا تكتب الرابط
Alternate text هذا اختياري اذا اردت ان تكتب كلمات عند مرور الماوس على الزر مثال لعمله
هنا كتبت
http://www.alwannah.com/uplo/imagesplitter/9.gif
Target frame هذه خاصيه تخيرك بين فتح الرابط في صفحه خارجيه جديده او نفس الصفحه
اذا اخترت New browser window فتح الرابط في صفحه خارجيه جديده
اذا اخترت Same frame فتح الرابط في نفس الصفحه
الخيارات اللي على اليمين ماراح تحتاجها لان لو تبي تسويها افضل في الفرونت بيج - اعلى من مستوى المبتدئين
حدد الخيارات واكتب الرابط واضغط ok

وكذا امشي وكمل على كل الازرار الي تبي تسويها

-ازرار تهمك في البرنامج

زر التجربه او معاينه العمل
http://www.alwannah.com/uplo/imagesplitter/test.gif

زر الرجوع اذا غلطت في شي
http://www.alwannah.com/uplo/imagesplitter/undo.gif

زر مسح الكل او اعاده العمل
http://www.alwannah.com/uplo/imagesplitter/reset.gif

لما تنتهي من كل شي اضغط على
http://www.alwannah.com/uplo/imagesplitter/save.gif
وسوي للعمل حفظ بإسم index

بيطلع لك ملف html اللي هو الصفحه ومجلد الصور مثل
http://www.alwannah.com/uplo/imagesplitter/index.gif

لما تفتح الملف index.html
بيطلع كذا
http://www.alwannah.com/uplo/imagesplitter/11.gif

التصميم كله على اليسار والخلفيه سوداء

اسحب الملف index.html وافتحه الان على الفرونت بيج
ولمسات خفيفه سوي له توسيط واختار لون الخليفه اللي تبيه
واظن التوسيط ما يبيله شرح طريقة ظلل التصميم في الفرونت بيج واضغط زر التوسيط

بالنسبه للون الخلفيه
في الفرونت بيج في الخلفيه بالماوس اضغط زر الماوس اليمين واختار خصائص الصفحه
http://www.alwannah.com/uplo/imagesplitter/pageproperties.gif

بتجيك النافذه



http://www.alwannah.com/uplo/imagesplitter/bg.gif
اختار formatting من فوق
واختار لون الخلفيه اللي تبيه من تحت من عند background

واحفظ العمل وارفع الملفين
http://www.alwannah.com/uplo/imagesplitter/index.gif
مع بعض

ملاحظه: ملف index.html يكون خارج مجلد الصور وليس داخله

هذا وصلى الله على سيدنا محمد وعلى آله وصحبه أجمعين .. اتمنى الدعاء لي

أرجو عدم مسح الحقوق من الشرح طريقة

تحياتي

الونه




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©