دروس تصميم مواقع الويب : القسم يهتم بدروس HTML, XHTML, HTML5, CSS, CSS3

[ شرح ] تقطيع الاستايل+تركيب وتوزيع بالفرونت بيج+تركيب في المنتدى (الجزء الثاني)

اوتـــUAEـــار
.:: عضو متألق ::.
تاريخ الإنضمام: 20 - 10 - 2004
رقم العضوية : 180
الدولة : ~*§*oOo الشارجه oOo*§*~
العمر: 36
المشاركات: 11,001
الإجابات المقدمة: 1
  • أرسل رسالة بواسطة ICQ إلى اوتـــUAEـــار
  • أرسل رسالة بواسطة MSN إلى اوتـــUAEـــار
  • أرسل رسالة بواسطة Yahoo إلى اوتـــUAEـــار
قديمة 11 - 12 - 2007, 01:53
المشاركة 1
نشاط اوتـــUAEـــار
  • قوة السمعة : 2883
  • الإعجاب: 339
    Icon30 [ شرح ] تقطيع الاستايل+تركيب وتوزيع بالفرونت بيج+تركيب في المنتدى (الجزء الثاني)


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

    تنزيل برنامج الفوتوشوب 7.0

    وقريبا سوف ارفع لكم برنامج الفرونت بيج على موقعي الشخصي

    درسنا اليوم هو :

    تركيب وتوزيع التصميم في الفرونت بيج ( الجزء الثاني )




    ثلاث دروس وانت راح تعرف سر التقطيع والتوزيع بالفرونت بيج والتركيب في المنتدى

    المستلزمات :

    برنامج الفرونت بيج FrontPage


    (( الجزء الثانــي ))


    تقطيع استايل بعد التصميم ( الجزء الاول )
    تركيب وتوزيع التصميم في الفرونت بيج ( الجزء الثاني )
    تركيب الاستايل في المنتدى ( الجزء الثالث )





    تابع الدرس لدرس الجزء الاول
    [ شرح ] تقطيع الاستايل+تركيب وتضبيط بالفرونت بيج+تركيب في المنتدى اتحداك لو مانجحت



    الان من بعد ما خلصنا تقطيع التصميم


    نذهب الى

    برنامج الفرونت بيج المثبت في جهازك

    مثال




    وتختار الفرونت بيج


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

    تختار من تحت

    اكواد

    مثال



    وامسح الموجود فيه كاملا

    مثال



    شفت اشلون مسحته

    الان نروح الى زر التصميم الي مأشر عليه انا الي هو Desing

    مثال


    شفتوا راحت التقسيمتين


    والان نجي للجد

    من فوق تختار على زر الجدول
    مثال

    نختار 3 في 3

    ليش اخترت 3 عرض و 3 طول
    لان في التقطيع اخترنا 3 في ثلاث عرفتوا ليش ولا لا

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


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

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



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


    شفتوا

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

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

    شفتوا اشلون رتبت اماكنهم وابيكم ترتبونه نفسي
    الرقم التصميم في جدول مناسبه

    مثال التطبيق

    ورقم قمسه اتركها فاضية


    الان نضغط على رقم واحد مرتين كلك يسار رات تفتح لكم

    مثال


    فقط احفظ المقاس لكي نضعها في الجدول التالي

    الان حفظنا المقاسات
    نسكر الجدول الظاهر

    ونروح نضغط كلك يمين ونختار

    مثال


    راح يفتحلنا جدول

    مثال



    ضع المقاسات الي حفظته في ذهنك هنا المكان الي مأشر عليه
    ضعه نفس ما وضعت مقاسات تقطيعي
    وانت ضع المقاسات لتقطيعك

    واضغط OK

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


    مثال


    شوفتوا الفرق


    الان نروح نطبق بنفس الي طبقناه على الصوره رقم ثلاثه


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

    وشيك على المقاس قبل ما تضع المقاسات لها

    ملاحظة :
    اذا كانت المقاسات تفرق يعني تقطيعك فيه غلط ولازم تعدل التقطيع عشان تكون نفس المقاسات للطول والعرض لصور رقم واحد وثلاثة

    من بعد ما شيكنا عالمقاس
    مثال


    وبعدين تحط المقاسات


    شوفوا الفراق الي مأشر عليه انا
    يوم بتضغط على كلمه OK راح تختفي الفراغات الزائده


    خلصنا من رقم واحد وثلاث

    الان نروح للفوتر
    رقم تسعة
    نشوف مقاسها

    ونروح نضغط كلك يمين ونختار
    مثال


    وبنفس الطريقه نضع المقاسات


    شفتوا عندي الطول فقط مختلف اما العرض كلهم نفس الشي الا رقم اثنين وثمانية

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

    كالعادة



    ونضع المقاسات للصورة
    ونضغط OK

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

    بنفس المقاس صوره رقم تسعة

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

    ويفتح لكم
    مثال

    وضع المقاسات بمكانهم المأشر عليهم

    وتضغط OK


    الان خلصنا من الصور الارقام

    1 _ 3 _ 7 _ 9



    والان ننتقل الى الاعمدة الصور ارقامهم
    4 _ 6


    والي بطبقه في صوره رقم 4 تتطبع نفسها عالصوره رقم 6 >>>>>>>> تمام وفاهمين

    الان
    روح للصوره رقم 4
    واضغط عليه مرتين كلك يسار
    وراح يفتحلكم
    مثال

    احفظوا المقاسات عدل

    ومن فوق اختار كلمه جنرال او عام

    وراح يفتح لكم
    مثال



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

    وهذا للتوضيح اكثر




    الان خلصنا وحفظنا المقاسات ونسخنا الرابط للصورة

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


    وبعدين يفتح لنا

    مثال


    اهنيه عادة اشوي غير عن القبل

    تخلي المقاسات + تخلي الرابط الي نسخناه + وتخلي الخيارين واحد سنتر والثاني توب وبالعربي يعني توسيط واعلى

    وتضغط ok

    وبعدين اشر على الصوره الي عدلتها رقم اربعه
    واختر
    مثال

    يعني احذفها لاننا وضعنا الصوره في قلب الجدول

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

    مثال

    كلك يمين عشان تدخل هنا

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


    الان خلصنا من الصور الارقام
    1 _ 3 _ 4 _ 6 _ 7 _ 9



    الان نروح للحواف اطارات الجدول ونخفيها

    مثال


    كلك يمين بالمنتصف
    واختار الي بالمثال
    او خصائص الجدول

    ونروح نخلي في ثلاث خيارات صفر
    مثال للتوضيح

    قبل التعديل وبعد التعديل
    خليهم صفر واضغط ok

    من بعد ضغطنا على كلمه اوكى
    صار عندنا
    مثال

    شفتوا التطبيق شو صار بالحواف او اطارات الجدول

    الان خلصنا من كل شي وباقي
    الهيدر رقم ( 2 )

    والفوتر رقم ( 8 )

    اول شي بنبدأ بالرقم 2

    اضغط من تحت بالفرونت بيج على كلمة

    Split

    يعني للاكواد

    عشان تتقسم نصفين

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

    اضغط بالماوس مره وحده عالصوره رقم 2
    او اشر عليها


    مثال


    الان شوفوا رقم المقاس 734 مقاس العرض
    بين قوسين

    تمسحون المقاس
    وتكتبون المقاس

    اقتباس
    100%
    مثال


    لاحظوا في مكان الفراغ شو راح يصير

    الان اضغط من تحت على كلمه Desing او التصميم

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


    ان شاء الله فاهمين على الشرح


    الان نروح هم نطبق العمليه بالفرتر رقم الصوره ( 8 )
    بنفس ما عملناه بالصوره رقم 2


    مثال


    الان راح اخلي بدال
    734
    بخليه
    اقتباس
    100%
    مثال


    واضغط على كلمه Desing او التصميم
    وشوف عملك
    وهذا تطبيقي عالصوره رقم 8


    وهذا تطبيقي للتصميم كامل


    وانتهينا من الدرس الثاني من توزيع التصميم في الفرونت بيج

    والان نروح نحفظ الصفحة الي عملناه

    لين ما ندخل للدرس الثالث
    تركيب الاستايل في المنتدى ( الجزء الثالث )



    وارجوا اني وفقت في شرحي البسيط


    اخواني واخواتي

    اي حد مو فاهم لا يتردد


    فقط يسال لكي اجيبه

    والي يبي يطبق القص يطبق ويراوينا التقصيص قبل الحفظ
    عشان نعرف اشلون او شنو الخطأ


    وارجوا من الي بينقل الموضوع يرجى ذكر المصدر ( درس اوتـــUAEـــار )
    لاني تعبت عليه وانا اصور واكتب

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

    وهم مرفقه ايضا للفائده الجميع


    وانتظروني في الدرس التالي

    الصور مرفقات
    اول ملف
    اسمه
    الاول
    الاوول
    الثاني
    الثاالث
    الرابع

    لان تاخير في التحميل صار

    اخوكم
    اوتـــUAEـــار
    الملفات المرفقة
    نوع الملف : zip المقطع الثاني.zip (787.1 كيلوبايت, عدد مرات المشاهدة 2866 مرة)
    نوع الملف : zip المقطع الثاالث.zip (571.0 كيلوبايت, عدد مرات المشاهدة 2307 مرة)
    نوع الملف : zip المقطع الرابع.zip (1.34 ميقابايت, عدد مرات المشاهدة 2490 مرة)
    نوع الملف : zip الاول.zip (381.1 كيلوبايت, عدد مرات المشاهدة 2291 مرة)
    نوع الملف : zip الاوول.zip (894.4 كيلوبايت, عدد مرات المشاهدة 2580 مرة)
    محمد بن حسن, دموع رجل و jrooooh معجبون بهذا .
    قديمة 11 - 12 - 2007, 01:55
    المشاركة 2
    صورة 'TheStudent' الرمزية
    TheStudent
    ||| عضو التميز |||
    تاريخ الإنضمام: 11 - 08 - 2006
    رقم العضوية : 25821
    الدولة : Hail
    المشاركات: 16,125
    افتراضي
    الله يحفظك لنا يابدر وتستاهل التثبيت على ها المجهود الطيب ...

    ترايدنت .. أيامُ لا تنسى !
    قديمة 11 - 12 - 2007, 01:59
    المشاركة 3
    اوتـــUAEـــار
    .:: عضو متألق ::.
    تاريخ الإنضمام: 20 - 10 - 2004
    رقم العضوية : 180
    الدولة : ~*§*oOo الشارجه oOo*§*~
    العمر: 36
    المشاركات: 11,001
    • أرسل رسالة بواسطة ICQ إلى اوتـــUAEـــار
    • أرسل رسالة بواسطة MSN إلى اوتـــUAEـــار
    • أرسل رسالة بواسطة Yahoo إلى اوتـــUAEـــار
    الإجابات المقدمة: 1
    افتراضي
    ويحفظك ربي اخي عبدالرحمن

    ما لحقت اخلي موضوع واشوف الرد طوالي
    ماشاء الله عليك دومك خدوم ووفي يا اخوي

    وبارك الله فيك
    arabw-pearl معجب بهذا.
    قديمة 11 - 12 - 2007, 14:14
    المشاركة 4
    همس الشوق
    :: عضو نشيط ::
    تاريخ الإنضمام: 08 - 02 - 2006
    رقم العضوية : 18702
    المشاركات: 1,041
    افتراضي
    مشكوووور وبارك الله فيك


    جهد جميل وشرح رائع

    الله يعطيك الف عافيه
    قديمة 11 - 12 - 2007, 14:27
    المشاركة 5
    Max7des
    :: عضـــو::
    تاريخ الإنضمام: 30 - 11 - 2007
    رقم العضوية : 46086
    المشاركات: 77
    افتراضي
    جزاك الله كل الخير اخى الكريم
    .. لن تموت فكرة صالحة ..
    قديمة 11 - 12 - 2007, 15:50
    المشاركة 6
    aissa1
    :: عضو نشيط ::
    تاريخ الإنضمام: 23 - 12 - 2006
    رقم العضوية : 30342
    الدولة : الجزائر
    المشاركات: 1,262
    • أرسل رسالة بواسطة Skype™ إلى aissa1
    افتراضي
    بارك الله فيك شرح وافي وكافي الله يرزق المال الحلال
    قديمة 11 - 12 - 2007, 16:02
    المشاركة 7
    شقران الشمري
    :: عضو نشيط ::
    تاريخ الإنضمام: 28 - 09 - 2007
    رقم العضوية : 38774
    الدولة : ديآر آبو متعب . . . !
    العمر: 35
    المشاركات: 4,365
    Iconrote

    مشكور يـــا أوتــــــــــــــــــــــار شرح ولا أروع

    سلمت لنا أناملك لاهنت عالشرح الرائــع

    دمت بود

    شقران الشمري
    لست الناجح الوحيد ، وإبتعادي عن الإنترنت لأسباب خاصة وشخصيه .
    كلمة أحب أن أقولها للآخرين : لا تقذف إلا الشجرة المثمره ، تُقذف وتعطي أطيب ثمارها .
    All I am trying to do is survive, and make good out likewise

    لمن آراد التواصل معي ..
    [email protected]
    قديمة 11 - 12 - 2007, 19:18
    المشاركة 8
    اوتـــUAEـــار
    .:: عضو متألق ::.
    تاريخ الإنضمام: 20 - 10 - 2004
    رقم العضوية : 180
    الدولة : ~*§*oOo الشارجه oOo*§*~
    العمر: 36
    المشاركات: 11,001
    • أرسل رسالة بواسطة ICQ إلى اوتـــUAEـــار
    • أرسل رسالة بواسطة MSN إلى اوتـــUAEـــار
    • أرسل رسالة بواسطة Yahoo إلى اوتـــUAEـــار
    الإجابات المقدمة: 1
    افتراضي
    الله يعافيكم يا الاخوة

    وتستاهلون المزيد


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


    وتسلمون عالتواصلكم الجميل
    قديمة 11 - 12 - 2007, 19:43
    المشاركة 9
    صورة '! مج ـرد إن ـسـآن !' الرمزية
    ! مج ـرد إن ـسـآن !
    :: عضو نشيط ::
    تاريخ الإنضمام: 22 - 05 - 2005
    رقم العضوية : 4522
    الدولة : فـ الـدنيـا
    المشاركات: 3,529
    افتراضي
    تسلمـ،، يا بدر والله

    شرح ولا أروع من أنسان مميز مثلك ..
    اشهد ان لا اله الا الله , اشهد ان محمد رسول الله ,


    :: اللهم صلي وسلم وبارك على سيدنا محمد , سلاماً يرضيك , ويرضيه , وترضى به عنا ::
    قديمة 11 - 12 - 2007, 22:57
    المشاركة 10
    اوتـــUAEـــار
    .:: عضو متألق ::.
    تاريخ الإنضمام: 20 - 10 - 2004
    رقم العضوية : 180
    الدولة : ~*§*oOo الشارجه oOo*§*~
    العمر: 36
    المشاركات: 11,001
    • أرسل رسالة بواسطة ICQ إلى اوتـــUAEـــار
    • أرسل رسالة بواسطة MSN إلى اوتـــUAEـــار
    • أرسل رسالة بواسطة Yahoo إلى اوتـــUAEـــار
    الإجابات المقدمة: 1
    افتراضي
    الله يسلمكم

    نيتي انكم تتعلمون لان ما يبيله وايد شغل وسهل جدأ

    ويعطيكم الف عافيه على تواصلكم وياي
    قديمة 13 - 12 - 2007, 19:13
    المشاركة 11
    صورة 'arabw-pearl' الرمزية
    arabw-pearl
    :: عضو نشيط ::
    تاريخ الإنضمام: 21 - 12 - 2006
    رقم العضوية : 29686
    الدولة : كل البلدان الغرض افادة نساء المسلمين
    المشاركات: 3,729
    • أرسل رسالة بواسطة Yahoo إلى arabw-pearl
    افتراضي
    الله يعطيك العافيه اخوي

    و متابعين معاك ...

    بس بالاخر بنقدر نسوي ملف الاستيل بضيغة xml و نرفعه مباشرة في الاستيلات بالمنتدي ؟؟؟
    مركزنا طبي اسري زوجي تربوي استشاري- اطباء و متخصصين ماهرين
    العضوية تستخدمها اختان

    ترغب في متخصصة تجيب على اسئلة عضواتك النساء
    في مجال الطب و العلاقات الزوجية و الاسرية بمبلغ رمزي ؟ ارسل طلبك هنا
    قديمة 16 - 12 - 2007, 05:53
    المشاركة 12
    اوتـــUAEـــار
    .:: عضو متألق ::.
    تاريخ الإنضمام: 20 - 10 - 2004
    رقم العضوية : 180
    الدولة : ~*§*oOo الشارجه oOo*§*~
    العمر: 36
    المشاركات: 11,001
    • أرسل رسالة بواسطة ICQ إلى اوتـــUAEـــار
    • أرسل رسالة بواسطة MSN إلى اوتـــUAEـــار
    • أرسل رسالة بواسطة Yahoo إلى اوتـــUAEـــار
    الإجابات المقدمة: 1
    افتراضي
    نعم لا تستعجل

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

    ويعطيكم الف عافيه
    قديمة 16 - 12 - 2007, 11:46
    المشاركة 13
    صورة 'الجناح' الرمزية
    الجناح
    :: عضـــو::
    تاريخ الإنضمام: 19 - 05 - 2006
    رقم العضوية : 24940
    المشاركات: 99
    افتراضي
    مشكور أخوي على الشرح الكافي والوافي ,,

    الله يعطيك العافيه يا رب ,,

    مجهود واضح منك أخي العزيز ,, ننتظر الدرس الثالث بأحر من الجمر ,,

    حتى نكمل باقي الاستايل
    لا للمستحيل ..!!
    قديمة 16 - 12 - 2007, 13:38
    المشاركة 14
    MOHD
    :: عضو نشيط ::
    تاريخ الإنضمام: 20 - 07 - 2005
    رقم العضوية : 6256
    الدولة : Oman - mct-sal
    المشاركات: 2,572
    افتراضي
    رائع جدا

    يعطيكـ ألف عافيه

    ويجزاك خير يأأرب

    ع هالشرررحـ الرائع والمبسط


    مودتي
    قريبا سنحلق الى الامام بابداعنا باذن الله
    قديمة 16 - 12 - 2007, 18:32
    المشاركة 15
    بنت الرياضـ
    :: عضـــو::
    تاريخ الإنضمام: 07 - 07 - 2005
    رقم العضوية : 5845
    المشاركات: 31
    افتراضي
    جزاك الله خير اخوي ..

    انا بطبق الدرس وبرجع لكم ..

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

    بانتضار المزيد
    اضافة رد
    العلامات المرجعية

    [ شرح ] تقطيع الاستايل+تركيب وتوزيع بالفرونت بيج+تركيب في المنتدى (الجزء الثاني)


    بدون هاكات الطريقة الصحيحة لوضع الأقسام الفرعية تحت بعض مطابق للمعايير القياسية W3 [ الدرس الأول ] تصميم استايل إحترافي

    أدوات الموضوع
    طرق العرض



    الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 07:44.
    المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
    فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
    التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)

    جميع الحقوق محفوظة Traidnt 2015
    • 00966920020037
    • 00966138648289
    • 2051033691
    Powered by vBulletin® Version 3.8.7 .Copyright ©2000 - 2016, Jelsoft Enterprises Ltd
    SEO by vBSEO ©2011, Crawlability, Inc.