سؤال محيرني في تقسيم التصميم !!

[أمجد]

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


يا شباب عندي سؤال ومحيرني .. عندما نقوم بتصميم موقع بواسطة الفوتوشوب وبعد الإنتهاء منه نقوم بتقطيع التصميم بواسطة الأداة Slice Tool وإذا أردنا أن نجعل التصميم يناسب مقاس جميع الشاشات نقوم بجعل القيمة 100% للجداول لكن المشكلة في الصور إذا كانت عبارة عن روابط فيكون العرض لها 100% حتى يناسب مقاس الشاشات لكن إذا تمددت طبقاً للمتصفح فإنه قد يؤدي إلى تشويه الصور وخصوصاً إذا كانت عريضة .

لكن السؤال هنا وجدت بعض التصاميم وهي عبارة عن صور ولكنها ليست مقسمة بواسطة الأدراة Slice Tool ولكن إذا فتحنا مصدر الصفحة Resource Code نجد أن الصورة عبارة عن روابط وهذا مثال :

	<map name="FPMap0">
		<area target="_blank" coords="463, 54, 518, 105" shape="rect" href="http://www.Site.com">
		<area target="_blank" href="http://www.Site.com" shape="rect" coords="382, 91, 439, 139">
		<area target="_blank" href="http://www.Site.com/vb/index.php" shape="rect" coords="298, 124, 357, 173">
		</map>
		<img border="0" src="images/logo.jpg" width="535" height="200" usemap="#FPMap0"></td>
			</tr>

وصورة logo.jpg تتكون من عدة روابط .. وهي كما هي موضحة في الصورة .. والسر هو في الأرقام .. لكن كيف ؟؟

هل هناك برنامج معين يقوم بتقسيم الصورة مثل الكود السابق بحيث لا يخرب على التصميم لأنه لا يحتاج وضع الأيقونات على 100% كما المثال السابق !!


إن شاء الله يكون كلامي واضح .. وآسف على الإطالة .

[BrooDEX]

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

اذاً:
قسم الأطراف والمنحنيات كصور ثابته وقسم المساحات المستطيله الطولية والعرضية لاستخدامها فيما بعد كصور خلفية للخلايا التي سوف تتمدد بمعنى يصبح عرضها او ارتفاعها 100%

هذا هو الحل الامثل والمتبع اصلاً

--------------------------------------
رأي خاص:

التصميم الناجح والمتقن لصفحات الويب يتوجب ان تكون في احد مساحات التصميم رسم ثابت قابل للتمدد كالإطارات
والسبب(سرعة التحميل وعدم كثرة الصور + القابلية والمرونه في التمدد والتقلص).

شكرا

[عبد الله هُربي]

جزاك الله خير على المعلومات الجميلة ..

[المبدع العربي]

أنت تقصد أنك تريد وضع عدة روابط على صورة واحدة فقط؟ دون تقطيع الصورة ووضع رابط على كل صورة منها؟

ان كان كذلك.. فهل تريد صنعها بالفرونت بيج أم الدريم ويفر .. اذا كنت تستخدم أحدهما فأخبرني .. وان كنت تريد كتابتها بيدك وبنفسك فهناك أيضاً درس لذلك وتكتبها عن طريق HTML
^_^

والله الموفق

[أمجد]

شكراً لكم جميعاً على الرد

أنت تقصد أنك تريد وضع عدة روابط على صورة واحدة فقط؟ دون تقطيع الصورة ووضع رابط على كل صورة منها؟

ان كان كذلك.. فهل تريد صنعها بالفرونت بيج أم الدريم ويفر .. اذا كنت تستخدم أحدهما فأخبرني .. وان كنت تريد كتابتها بيدك وبنفسك فهناك أيضاً درس لذلك وتكتبها عن طريق HTML
^_^

والله الموفق

نعم أخي المبدع العربي هذا ما قصدته بالضبط تقسيم الصور ووضع عدة روابط على صورة واحدة فقط .

أنا أستخدم برنامج الفرونت بيج حالياً .. فهل لديك الطريقة ؟؟ :con2:

[AHMED2]

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

[المبدع العربي]

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

عزيزي ان كنت تعرف فساعد وإلا فلا تحبط الأخ
ومن قال أن الأمر يحتاج لمحترفين او احتراف لصنعه؟
انتظر عزيزي أمجد غداص ان شاء الله حال عودتي سأشرح لك الطريقة وهي سهلة جداً جداً

للعلم عزيزي امجد هذه الحركة اسمها Hot link
انتظرني ان شاء الله

[عبد الله هُربي]

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

و انا اقوم باستخدامها كثيراً ..




وخالص المودة ،،

[AHMED2]

اخي العزيز المبدع العربي مع احترامي لكامل كلامك ارجو انك تقراء ردي كاملا قبل ان تحكم علي فا انا لم كتب انة صحب ولا تحاول لانك لا تستطيع بل كتبت (الافضل ان تكون الصور مقسمة لسرعة فتح الموقع اما اذا كانت صورة واحدة راح يتقل الموقع في فتحة)

ارج قبل ما تعقب علي ردي تقراء كاملا

[المبدع العربي]

وماذا عن الجملة التي قبلها؟
"الامر يهل للمحترفين وصعب جدا للمبتدئين ولا انصحك بة لكي لا تتتعب نفسك"

[عبد الله هُربي]

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

ارج قبل ما تعقب علي ردي تقراء كاملا

ما اقول الا الله يسامحك ..
الاحتراف ليس بعيداً عنا ..
ويجب عليك ان تحتفظ بكلامك لكي نحتفظ بكلامنا ..

[عبد الله هُربي]

هذه المشاركة أقتبستها لكم من هذا الموضوع :-
http://www.swalif.net/softs/showthread.php?t=135794

السلام عليكم ورحمة الله
أفتح الفرونت بيج ثم اختار صورتك التى سيكون عليها العمل ...ثم نشطها بالماوس وأختر هذه الاداة الخاصة بالصور اذا لم تكن ظاهرة تستطيع تفعيها بالتالى tools ثم customize ثم picture

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

وخالص المودة ،،

[المبدع العربي]

هذه المشاركة أقتبستها لكم من هذا الموضوع :-
http://www.swalif.net/softs/showthread.php?t=135794





وخالص المودة ،،

جزاك الله خيراً أخي الكريم

اخي امجد
ان لم تفهم الطريقة من شرح الأخ مجاهد فأخبرني


المبدع العربي

[AHMED2]

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


بارك الله لك في شرحك للاخ صاحب الموضوع

[عبد الله هُربي]

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


بارك الله لك في شرحك للاخ صاحب الموضوع

يا هلا وسهلا بيك ،،
واعتذارك مقبول ،،

ونحن أخوة في الله .. نجتمع تحت ظلال سوالف ..