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

[عاشقة الريناد]

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
شرح طريقة قص وتصميم واجهة الموقع للمبتدئين
- مقدمة
لتصميم موقع يجب اولا ان تكون مصمم
يعني بطاقات وغيره
ولو ان المواقع تختلف شوي
ولكن اول شي لازم تكون
مصمم متمكن من اي برنامج رسم او تصميم
هذا الدرس للمبتدئين في تصميم المواقع
وتقصيص الصور وترتيبها
واللي ما يعرف يرتب ويسوي جداول في الفرونت بيج
الزبدة ان البرنامج يغنيك عن القص بالفوتو او بالبينت
ويغنيك عن شغل الجداول والترتيب بالفرونت بيج
-برنامج تحتاجه لتسهيل عملية القص
حمل البرنامج التالي image splitter مع الشكر الخاص للاخ الرفيع صاحب شبكه الخريف لتوفيره
حمل البرنامج
Images Splitter (http://www.alwannah.com/uplo/imagesplitter/Imgesplitter.zip)
وانا اخذته منهم
الملف المضغوط معه ملف تثبيت البرنامج
وملف نوت باد فيه السيريال للبرنامج
ثبت البرنامج وبعدين شغله
افتح ملف النوت باد
بتلاقي فيه الاسم ورقم التسجيل
اذهب الى برنامج image splitter
من القائمه فوق اختار help
وبعدين register
يطلع لك مربع
ادخل فيه الاسم ورقم التسجيل
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 **** هذا اختياري
اذا اردت ان تكتب كلمات عند مرور الماوس على الزر
مثال لعمله
هنا كتبت
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
يكون خارج مجلد الصور وليس داخله
هذا وصلى الله على سيدنا محمد
وعلى آله وصحبه أجمعين ..
اتمنى الدعاء لي
أرجو عدم مسح الحقوق من الشرح
لقد تم النقل للفائدة

[اميــ(الفرسان)ــر]

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

[مشاعر انسانه]

ياسلام عليج

موضوع مفيد جدا

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

][ ويستحق التثبيت ][

سلمت اناملج

ولاعدمناج يارب

[أمــيرالريـــناد]

برنسيسه

موضوع اكثر من رائع وجميل
مجهود رائع تشكري عليه

لا عدمناك مبدعه

تقبلى اجمل تحيه

[الريــ عصفورة ــناد]

برنسيسه

جزاك الله خير على هذا الموضوع

القيم

[عبد المحسن بن محمد]

ألف ألف ألف شكر لك برنسيسه..

مواضيع مختارة بأنتقاء راااااااائع..

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

وبخصوص تصميم صور واجهة المواقع..
أنا على أستعداد لمساعدة أي شخص من خلال تصميم الصورة..

وبأذن الله لو تمكنت من تطبيق هذا الدرس سيكون العمل الاول إهداء مني للريناد.

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

[&إحساس قلب&]

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

تحياتي
إحــساس قلب