شرح مفصل عن كيفية تصميم واجهه رئيسية للمواقع

السلام عليكم ورحمة الله وبركاته

" طبعا هذه اول مشاركة لي بالقروب وان شاء الله تحوز على رضاكم"

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

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


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

1 – افتح الفوتوشوب وافتح صفحه جديده بالمقاسات اللي تناسبك ويفضل بالعرض

750 الى 800 بيكسل والطول حسب الخانات اللي حاب تضيفها على الصفحه

مثلا انا بالدرس هذا مقاسات الصوره 790 بيكسل عرض في 700 بيكسل طول



2- صمم الموقع حسب ذوقك وهنا يبدأ الابداع وبعد ماتصمم وتخلص احفظ العمل

على صيغة jpg او gif ولا تنسى تحفظه على امتداد psd عشان التعديلات لو حبيبت تعدل .. سكر جميع الصفحات وخل الفوتوشوب مفتوح

كل هذه الخطوات السابقه ماراح نسترسل فيها لان الاغلبية يعرفها واللي حاب

يستفسر او يسأل عن الفوتوشوب تراني حاضر


الحين نجي للصج

الحين افتح التصميم اللي حفظته على jpg او gif عن طريق الفوتوشوب عشان نقطع الصوره الى صور صغيره والسبب ........... ؟؟؟

نشوف السبب بالمرحله رقم 3



3- مرحلة تقيطع الصور :

نبذه عن هذه المرحله :

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

مثال




قم بااختيار اداة Slice Select Tool (K) من شريط الادوات



بعد اختيار اداة التقطيع نقوم بتقطيع الصوره بدقه



ملاحظه : يجب ان يكون تقطيع صوره بنر ( المساحه الاعلانية ) دقيق جدا

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

بصورة الاعلان اللي بتحطه .. فكل اللي عليك انك تجيب بنر الاعلان اللي بتحطه

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

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



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



عاد لا حد يعلق على التصميم خخخ تراه ولادي زياده عن اللزوم لوول


بعد مانقطع الصوره نجي لمرحله الحفظ بصيغه الـ HTML



ملاحظه .. حفظ الملف باسم الموقع .. لان كل صوره تم تقطيعها تتسمى بااسم الموقع

مثل ..
alqamra_01
alqamra_02
alqamra_03
alqamra_04

الى آخره



بكذا خلصنا من الفوتوشوب . ونلاحظ بعد ما نحفظ الملف راح يطلع لنا

ملف باامتدادHTML وبااسم الموقع ومجلد الصور images


ونجي لمرحله الفرونت بيج



ومن ملف >> فتح >> بعدين افتح الصفحه اللي حفظناها على شكل HTML

بعد مانفتحها نختار كلمه تصميم من الاسفل ..



طبعا راح نلاحظ ان خلفيه الموقع بيضا .. فانت باامكانك تتحكم بلون الخلفيه

او تقدر تضيف بدل اللون صوره . وراح نوضح هالشي .


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



بعد ماخلصنا من لون الخلفية .. نجي الحين لاضافة الروابط على الصفحة

طبعا عندنا نوعين من الروابط ،، يا اما تكون رابط جاهز من النت مثل

المنتدى www.alqamra.net/vb

او تكون من الجهاز مثل

C:\Documents and Settings\super ssh\My Documents\New Folder

ملاحظه على الرابط اللي يكون من الجهاز ..

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



لاضافة الروابط اتبع الاتي

كلك يمين على الصورة اللي نبي نضيف عليها الرابط بعدها نختار

ارتباط تشعبي




بعدها موافق وبكذا اضفت الرابط .. بس احيانا بعد ماتضيف الرابط تطلع عندك

مشكله مثل اللي طالع عندي ..



لاحظوا ان الصوره طلعت كأنها متشققة ..
طبعا لو صارت عندك هالمشكلة اتبع الاتي

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

خل سمك الحدود زيرو وبكذا انحلت المشكلة



طيب نجي لشغله ثانية ...
لو تلاحظون المواقع بالنت ،، تلاقون الروابط نوعين

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

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

يفتح لك بنفس الصفحة .. بس تعالوا خلونا نشوف كيف نضغط على الرابط ويطلعنا بصفحة ثانية


طبعا نفس طريقة اضافة الرابط بس نضيف عليها شي واحد الا وهو




وبكذا اضفنا الرابط بصفحة مستقلة ..

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



بالفرونت بيج .. ملف >> جديد ثم اختر صفحة فارغة



بعدها بتطلع لك صفحة بيضة

اختر كلك يمين ثم خيارات الصفحة وغير لون الخلفيه حسب اللون اللي يناسبك

وسبق اننا شرحنا طريقة تغيير لون الخلفية .

اختر من القائمة جدول >> ادراج جدول

وعلى حسب طلبك ،، مثلا اختر

الصفوف 10 ... والاعمدة 1

وبكذا صار عندك جدول واضف فيه الزخارف على ذوقك .. بعدها حفظ بااسم



ملاحظه بالحفظ :



شوف بالصورة . نلاحظ كلمه (( تغيير العنوان )) هذه عشان تعطينا اسم الصفحه اللي يطلع فوق بالشريط الازرق ..

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

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

www.alqamra.net/zakharf.htm

وبكذا انت سويت صفحه للزخارف مثل هذه


http://2photoshop.malware-site.www/zakharf.htm


طيب الحين نجي لمرحلة تركيب الشات

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

لكن الحين نجي للجد ونحط الشات الصجي << حلوة الصجي خخخ


روح على كلمة تصميم اللي تحت بالفرونت بيج
بعدها اضغط ضغطه وحده على مكان الشات (( اللي انا حاط صوره بدال الجافا ))


روح على كلمة تصميم اللي تحت بالفرونت بيج
بعدها اضغط ضغطه وحده على مكان الشات (( اللي انا حاط صوره بدال الجافا ))



بعدها روح على تعليمات برمجية بدل ماكانت على تصميم



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

كل اللي عليك من الرابط اللي مظلل باازرق ..



استبدل هالرابط

برابط الجافا وبكذا انت اضفت الشات على الصفحة

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



http://host1.ya3arb.com/DigiChat/DigiClasses/
height=102 archive=Client.jar width=211 align=middle
code=com.diginet.digichat.client.DigiChatApplet.cl ass

name=DigiChat><PARAM NAME="cabbase" VALUE="Client.cab"><PARAM

NAME="language" VALUE="arabic.lang"><PARAM NAME="siteID"

VALUE="1255"><PARAM NAME="background" VALUE="000000"><PARAM

NAME="textcolor" VALUE="FFFFFF"><PARAM NAME="MenuItem1" VALUE="???? ????

???????"><PARAM NAME="MenuLocation1" VALUE="http://www.5shost.com">
Digi Chat Requiresa Java Compatible web browser

torun.</APPLET>



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

الا وهي ،، لون جافا الشات ،، ولون كلمه (( Nickname ))


من الاسفل ،، اختر تصميم .. ثم اضغط ضغطه وحده على الشات

بعدين روح على تعليمات برمجيه ،، راح تشوف روابط مظلله

اتبع هذه الروابط وراح تشوف الآتي



غير اكواد اللون باللون اللي يناسبك ..

وبكذا خلصنا من تصميم الواجهه الرئيسيه للموقع

طبعا في تفاصيل اخرى لكن هذه هي الفكره الاساسيه ..

بعد ماتخلص من كل هذا مايبقى الا مرحلة وحده

الا وهي .. رفع المجلد على سيرفر الموقع .. طبعا المجلد شامل كل شي

قبل اشوي قلنا خل كل شغلك بمجلد واحد عشان مرحله الاب لود

وبالتوفيق .. واي سؤال تراني حاضر ..

للسؤال او الاستفسار .. اضغـط هنــا

(( عذرا صار اشويا لخبطه بالموضوع عشان الكلمات الانجليزية ))

تحياتي لكم

~~~BIGSMOKE~~~