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

[مستر طاهر]

http://www.t7leeh.com/mnwa/mnwa4.gif

http://www.t7leeh.com/mnwa/mnwa18.gif

http://www.t7leeh.com/fwa9l/fwa9l1.gif

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


لتصميم موقع يجب اولا ان تكون مصمم يعني

بطاقات وغيره ولو ان المواقع تختلف شوي

ولكن اول شي لازم تكون مصمم متمكن من اي

برنامج رسم او تصميم

هذا الدرس للمبتدئين في تصميم المواقع

وتقصيص الصور وترتيبها واللي ما يعرف يرتب

ويسوي جداول في الفرونت بيج

الزبدة ان البرنامج يغنيك عن القص بالفوتو او

بالبينت ويغنيك عن شغل الجداول والترتيب
بالفرونت بيج


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


وانا اخذته منهم

ثبت البرنامج وبعدين شغله

افتح ملف النوت باد بتلاقي فيه الاسم ورقم

التسجيل

اذهب الى برنامج image splitterمن

القائمه فوق اختار help

وبعدين register

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

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

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

وكذا صار البرنامج مجاني

-البدايه

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

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

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 يكون خارج مجلد

الصور وليس داخله



منقووووووووووول للافاده

http://www.t7leeh.com/fwa9l/fwa9l1.gif