عمل اكثر من رابط في نفس الصورة

وعليكم السلام اخي ...تستطيع إستخدام map image في الhtml

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

اخي انصحك بتقسيم الصورة من ثم اعمل رابط لك صورة!!

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

انا الان بعد ماحفظت التصميم في الفيتوشوب ( حفظ كويب ) تكون لي مجلد الصور وصفحة الموقع ... جميل

فتحت صفحة asp.net وعملت جلب للصفحة الانترنت ومجلد الصور .. وحررت الكود الخاص بصفحة الانترنت الى عمل صفحة جديدة كامستر ... ونجح معي الامر والرابط يعمل ... جميل

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

وسؤالي كيف اجعل التصميم لاينخل مهما اضفت من ادوات الى صفحة تصميم

ارجو ان تساعدني بشرح مفصل جزاك الله الف خير ... لانني عملت اكثر من طريقة (كود css ، عمل جدول ) كل الطرق فشلت في حالة استعراض التصميم في اكثر من متصفح اجد التصميم ينخل

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

السلام عليكم

اخى العزيز فى التصميم اشياء كثيرة و اهم شيى هو حجم الصور اللى هتخليها فى المشروع فى الاخر حجم كبير ام صغير

سوف اشرح لك على الصورة التى ارفقتها

كل فى الاول التصميم بيكون كده

بتعمل Table على التصميم بتاعك ثم انشاء Table و عمل الصور كخلفية له

مثل كده

تمام

بس الطريقة دى لية اخطاء كتيرها منها ان طول و عرض كل row او col لا يتغير و ان تغير الصورة هتتطعل مش كويسة خالص

و ان جم الصور يكون صغير و ده الاهم لان ده اللى بيهم الUser ان الموقع يكون خفيف ولكن الطريقة دى بتطلع صور كبيرة الحجم

و انت لو حبيت تضيف اى زياده على Menu اللى طبعا مش هبنفع

و الحل كالتالى

اولا من Photoshop او اى برنامج اخر تصميم انت شغال عليها

هتحدد التقسيم على حسب ما انت مصمم الشكل

و اهم شى ان يكون التصميم متنثق يعنى مينفش جزئية ال Content تكون صورة كده لانه مش هتنفع تكبر لازم تكون حاجه بلون واحد من النصف و من الاحرف كما تشاء انت

و ال Menu نفس الشى من الافضل لك ان تكون فى النصف شىء واحد و الاحرف مش مشكلة و الاحرف متكونش كبير

و لية باء المنتصف هيكون نفس الشىء لانك هتاخد بس 1m من التصميم يعنى بمساحة 10 كيلو يعنى ولا حاجه و هتقوم بتكرار الصورة كمثال لذالك

ال Content هيكون فى هيدر و ال Content و هناخد الصورة التالية من التصميم

الصورة الاولة كما هى

اما الصورة الثانية هتكون متكررها و ده بكون CSS

الكود

background-image: url('microsoft_entourage_n.png');
    background-repeat: repeat-x;

و بعد ذلك فى الTable او Div او اى Control انت استخدمتها متحطش له طول height بكده مع زياده المحتوى هيكبر الشكل بدون مشاكل و كل ما يكبر الشكل هتتكرر الصورة

و كذلك طبعا لو بال width العرض تسيب العرض من غير مساحه هيكون على حسب المحتوى او تعمل ال Menu اللى على اليمين مثلا 15 % و اللى على اليسار 15% و الباقى لل Content او المحتو و هيكون 70%

 width: 60%;
    height: auto;

بكده كل ما هتكبر الشاشة بالعرض هتكبر معاك

لو عندك اى استفسار اخر انا معاك

شكرا استاذي العزيز وجزاك الله الف خير على ردك الجميل وشرح الرائع ....

سوف اطبق كل ماتقول

بس ياليت لوتدلني على موقع او درس اومثال ( حتى افهم اكثر )

وعلى فكرة في بالصورة footer بس للاسف ماظهرت في الصورة وهي على شكل صورة

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

اخى سوف اشرح لك المثال على المشروع بتاعك

كمثال فى الاول الHeader للصفحة هيكون الصورة دى

هناخد منه فقط اول جزء علشان الانحناء فى الطرفين كمثال الصور دى

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

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

و الكود للمثال

الصورة رقم 1 اللى على الشمال 2 اللى على اليمن 3 اللى فى النصف او التكرار

    <table width="900"   cellpadding="0" cellspacing="0">
        <tr>
            <td height="40" 
                style="width: 43px; 
                height: 40px; 
                background-image: url('Image/1.jpg'); 
                background-repeat: no-repeat; 
                background-position: right center" 
                width="43">
            </td>
            <td style="background-image: url('Image/3.jpg'); 
                background-repeat: repeat-x; 
                background-position: center center; text-align: center;"  >
                <h4>اسم الموقع</h4>

                </td>
            <td style="background-image: url('Image/2.jpg'); 
                background-repeat: no-repeat; 
                background-position: left center; width: 43px" 
                width="43"  >
            </td>
        </tr>
    </table>

و النتيجة هتكون كده

و ده كده للى هتكون الصور بالعرض

و ده مثال للصور اللى بالطول

هناخد دى

من

و هيكون الكود كده

  <tr>
            <td style="background-position: center top; 
                background-image: url('Image/6.jpg'); 
                background-repeat: repeat-y">

            </td>
            <td>



            </td>
            <td style="background-position: center top; 
                background-image: url('Image/6.jpg'); 
                background-repeat: repeat-y">

            </td>
        </tr>

انا عملت فولدر اسمة image و حطيت الصور بداخلة لذالك المتداد هو

url('Image/6.jpg')

طبعا انت خرج الصور من البرنامج الصور اللى عنك علشان جوده الصورة

ارفقت لك مثال للHeader للتاكيد

Amr Ragab.rar

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

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

اخى انت ليست محتاج لان تضع الصورة كاملة

كما شرحت لك انشىء الTable و بعد ذلك ضع صور الروابط واحد تلو الاخر و اذا اضفت الكثير تكبر معك التصميم

و المثال

فى المرفقات

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

New folder.rar

جزاك الله خيرا يابش مهندس وكثر من امثالك وإن شاء الله سوف ابدأ بهذا الموقع وهو موقع اسلامي اعمله لوجه الله لخدمة هذا الدين ... لك مني كل الشكر والتقدير

بالتوفيق ان شاء الله

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

الاخ عمرو كفى ووفى .. بالتوفيق ..