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

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

بعد أن تقوم بعمل تصميمك على الفوتوشوب هناك بعض الخطوات الواجب فعلها لتعديل التصميم وجعله ملائم كواجهة لموقعك :
و هاهي الواجهة التي اخترناها لدرسنا مع التعديل :

https://mwadah.com/images/imgcache/2008/12/106.png


نقوم بفتحها بالبرنامج الشهير لتحرير الصور : adobe photoshop

نقوم بالتعديل عليها كما نريد

ثم نذهب الى الآداة لتقطيع تصميمنا كما هو موضح في الصورة :


ملاحظة : كل قطعة تعينها تمثل رابط لصفحة أخرى في موقعك

مثلا : المنتدى رابطه www.salafsoft.com/vb

https://mwadah.com/images/imgcache/2008/12/107.png

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

مثلا الجهة العليا اين مكتوب شيكة الحاسوب السلفية

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





edit slice Option

ثم تظهر لنا بينات القطعة كما في الصورة :


و ندخل فيه الرابط الذي تؤدي اليه الجهة العليا مع عنوان الرابط


https://mwadah.com/images/imgcache/2008/12/108.png

نفس الشيء مع الأزرار الأخرى مثلا زر المنتدى

https://mwadah.com/images/imgcache/2008/12/109.png

ثم نكتب الرابط مع العنوان


https://mwadah.com/images/imgcache/2008/12/110.png


و نطبق على جميع القطع التي عينها

ثم نحفظ العمل كما في الصورة :
بالضغط على save for the web


https://mwadah.com/images/imgcache/2008/12/111.png

و نواصل كما في الصورة مع ان يكون صيغة الحفظ html and images

https://mwadah.com/images/imgcache/2008/12/112.png


و نحصل على ملفات الصور بهذه الطريقة :



https://mwadah.com/images/imgcache/2008/12/113.png


نذهب الى ملف html و نفتحه بال Front page كما في الصورة :

https://mwadah.com/images/imgcache/2008/12/114.png


و نذهب الى زر Design في الأسفل :

فتظهر لنا الصورة فنضغط مثلا على المنتدى بالز الأيمن كما هو موضح


page propety :

https://mwadah.com/images/imgcache/2008/12/115.png
ثم يظهر لنا العنوان و نضغط على ok

https://mwadah.com/images/imgcache/2008/12/116.png

ثم نذهب الى Hyperlink proprety لرؤية رابط الزر

https://mwadah.com/images/imgcache/2008/12/117.png


ثم ندخل رابط المنتدى :



https://mwadah.com/images/imgcache/2008/12/118.png

و نتأكد من سمك الزر بالضغط على picture propretie يجب ان يكون 0

https://mwadah.com/images/imgcache/2008/12/119.png

و نقوم بهذا التطبيق على جميع الأزرار
ثم ننقر على code في برنامج الفرونت بيج :

https://mwadah.com/images/imgcache/2008/12/120.png

يظهر لنا كود التصميم فنقوم بتغيير الروابط :

مثلا رابط :

/images/ wajiha4_01
الي www.ttt.com/images/wajiha4_01

مع تغيير ttt الى مسار موقعك



https://mwadah.com/images/imgcache/2008/12/121.png


ثم نقوم بحفظ العمل

https://mwadah.com/images/imgcache/2008/12/122.png

و في الأخير نغير ملف Html الى index.html

كما في الصورة :



https://mwadah.com/images/imgcache/2008/12/110.png


و بعد ذلك ارفع مجلد images و index.html

عبر ftp الى موقعك

و سيكون رابط صفحتك الرئيسية

www.ttt.com/index.html

وفقك الله

و أتمنى ان يكون الشرح واضح و كافي

منقووول[/quote]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

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

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

مجهود رائع
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

جميل جدأ تشكر أستاذي

بس كيف نقدر نغير حجم الواجهة??

بحيث تكون موافقة للإكسبلورر على مساحة الشاشة!!

ولو بغينا نحفظ صورة للتصميم بصيغة gif بدل psd أوبدل html

يا ليت أستاذي.

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .