صفحة 1 من 7 123456 ... الأخيرةالأخيرة
النتائج 1 إلى 15 من 94

الموضوع: +:: الدرس الثاني في دورة : تصميم المواقع الاحترافية ::+

  1. #1
    عضو نشيط جدا
    تاريخ التسجيل
    Nov 2002
    المشاركات
    404

    +:: الدرس الثاني في دورة : تصميم المواقع الاحترافية ::+



    بسم الله الرحمن الرحيم

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

    اقسم بالله العظيم بان لاا استغل ما اتعلمه من هذه الدورة فيما يغضب الله ورسوله او يسيئ للاسلام والمسلمين ... والله على ما اقول شهيد


    في هذا الدرس بمشيئة الله سنتعرف على كيفيه :

    قص التصميم من خلال برنامج الايماج ريدي
    ترتيب وتنظيف التصميم من خلال برنامج الفرونت بيج
    اعداد ملف CSS للتمبلت .

    ...........

    سنبدأ بشرح كيفية قص التصميم من خلال برنامج الايماج ريدي

    وسنطبق الشرح علىالتصميم التالي :


    1/ افتح التصميم من خلا برنامج الايماج ريدي الملحق مع الفوتوشوب من خلال قائمة البرامج ستجده في قائمة الفوتو شوب او من خلال برنامج الفوتو شوب من قائمة الادوات على يسار البرنامج اسفل وهو اخر خيار


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


    3/ الارقام المبينه على التصميم وهي ( 1,2,3 ) سوف يتم حذفها من خلال الفرونت بيج ويتم ادراج المحتوى مكانها والصورة رقم 1 , 2 سوف نجعلها خلفية لمنطقتها لكي نتمكن من ادراج المحتوى الذي نريد بها

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

    5/ اذا اردت ان تعمل تاثير على الروابط عند مرور الماوس عليها يفترض انك حسبت حساب هذه النقطه من بداية التصميم بان تكون عملت الصور التى تريد ظهورها عند تمري الماوس او المؤثرات التى تريد تطبيقها على اسماء الروابط انظر الصورة التاليه :



    1/ ملف التصميم
    2/ مجلد اسمه Link 1 وهو يحتوي على مسميات الروابط بالشكل الافتراضي الافتراضيه للتصميم
    3/ مجلد واسمه Link 2 وهو يحتوي على مسميات الروابط بالشكل الذي نريد ان تتغير اليه عند مرور الماوس عليها

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

    4/ كيفيه تطبيق امر التغيير على الرابط عند مرور الماوس عليه ..
    عندما تقوم بتحديد القص للايقونه التى تريدها ان تكون رابط يوجد اسفل البرنامج لوح تحكم في الروابط طبق ما هو مبين بالصورة التالية :

    حسب الارقام :
    1/ تحديد المكان الذي نريده ان يكون رابط
    2/ خيار امر Slice لاظهار خانه تسجيل مسار الصفحه التى سينتقل لها الزائر عند الضغط على الرابط
    3/ خانة تسجيل مسار الصفحه التى سينتقل لها الزائر قم بتسجيله ان كنت مخطط لها مسبقا او ضع اي شيئ يدل عليه حتى يم تعديله على الفرونت بيج مثلا ضع رقم الرابط او اسم الرابط وفيما بعد غيره من الفرونت بيج للمسار الصحيح .



    4/ فتح تحديد التحكم في التاثير على الرابط
    5/ فتح لير جديد للصورة التى ستتغير عن مرور الماوس على الرابط

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

    5/ الان اذهب الى صندوق الريلز او الشفائف على يمين البرنامج اسفل واخفي الصورة او خط الرابط الافتراضي واظهر الصورة التى تريدها ان تظهر خلال تمرير الماوس على الرابط كالتالي


    طبعا انا جعلت الروابط الافتراضيه في المجلد Link1 في الصورة اخفيت العين المجاورة لاسم الرابط الافتراضق من المجلد Link 1 ومنثما اظهرت التاثير الذي اريده ان يظهر اثناء تمرير الماوس وذلك من المجلد Link2

    يتبع







    __________________

    اثكو جرافيكس
    Web Designer & Graphics
    +||[ عالم الابداع والتميز ]||+

    www.athco.com.sa
    athco غير متواجد حالياً


  2. #2
    عضو نشيط جدا
    تاريخ التسجيل
    Nov 2002
    المشاركات
    404


    6/ الان نفترض اننا انهينا عمليه القص والتأثيرات ونريد تصدير العمل على هيئة ملف انتر نت يجب علينا ضغط الصور لكي نقلل من حجمها كي لا تكون بطيئه التحميل على جهاز الزائر للموقع ويتم ذلك من خلال تحديد امتداد الصور ودقتها وهناك طريقتان وهما كالتالي :
    1/ jpg وتستخدم في حال كان التصميم به مساحات تدرج لونى او صور اشخاص
    2/ gif وتستخدم في حال كان التصميم بلا تدرجات لونيه وبلا صور اشخاص وهو بالعاده اقل حجم من سابقه

    يكف يتم تحديد ذلك ؟

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



    7/ الان نقوم بحفظ وتصدير العمل اتبع ماهو مبين بالصورتين التاليتين :



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

    حدد الخيار كما هو موضح بالصورة التالية :


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


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





    __________________

    اثكو جرافيكس
    Web Designer & Graphics
    +||[ عالم الابداع والتميز ]||+

    www.athco.com.sa
    athco غير متواجد حالياً

  3. #3
    عضو نشيط
    تاريخ التسجيل
    Feb 2003
    المشاركات
    110


    جزاك اللة خير ووفقك
    شرح اكثر من رائع


    اسف لم اراء عدم الرد





    __________________
    ماوقع الا على شيكات
    scripts غير متواجد حالياً

  4. #4
    عضو نشيط جدا
    تاريخ التسجيل
    Nov 2002
    المشاركات
    404


    الان سوف يكون العمل على برنامج الفرونت بيج


    1/ افتح الملف الذي قمنا بتصديره من خلال الفرونت بيج
    سيظهر لك بهذا الشكل :


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


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







    __________________

    اثكو جرافيكس
    Web Designer & Graphics
    +||[ عالم الابداع والتميز ]||+

    www.athco.com.sa
    athco غير متواجد حالياً

  5. #5
    عضو نشيط جدا
    تاريخ التسجيل
    Nov 2002
    المشاركات
    404


    الان قم بحفظ الصفحة باسم جديد دون حذف الصفحة الحالية

    3/ الان العمل في النسخه الجديده من الصفحة
    */ قم بتظليل كامل الصفحة
    واضغط كلك يمين في اى جزء من الصفحه واختار Cut

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



    4/ الان ضع مؤشر الماوس داخل الخليه التى عملتها واضغط كلك يمين ومن القائمة اختر الخيار التالي :


    5/ سوف يظهر لك ادوات التحكم في الخليه ما نحتاجه هو اسفل الصندوق وهو خيار الخلفية قم بعمل خلفية للخلية سواء كانت لون ام صورة قمت باعدادها مسبقا كالتالي:


    6/ الان قم بوضع المؤشر في وسط الجدول واضغط كلك يمين واختار الامر Paste وذلك لكي تقوم بلصق التصميم كاملا داخل الخليه التى عملتها

    * ما فائده هذه الخليه ؟؟؟
    الفائده منها هو عند تصفح موقعك من قبل احد الزوار وتكون دقة شاشته اكبر من الدقه 800*600 سيظهر له موقعك في منتصف الشاشه وهذا هو الافضل دائما

    7/ الان جاء دور حذف الاجزاء التى نريد حذفها في هذا التصميم الذين نطبق عليه الشر توجد ارقام تم وضعها وهي مساحات سوف نحذف منها شيئ وسوف نعمك منها خلفيات لكي نتمكن من ادراج محتويات مكانها انظر لهذه الصورة وتابع شرح الاقام :

    الشرح حسب الارقام :

    1/ سوف يتم حذف هذه الصورة وجعلها خلفيه لكي يتم ادارج صندوق دخول الاعضاء مكانها

    2/ هذه الصورة سيتم اخذ نسخه منها وجعلها خلفيه للخليه التى هي بها لكى تتمدد معنا كل ما تمددت الصفحه الى اسفل

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

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

    5/ هذه الصورة سوف تحذف نهائيا ويتم عمل خليه مكانها لكي يتم ادارج الامر البرمجي الذي يدرج المحتوى مكانها

    6/ هذه الصورة سوف يتم اقتصاص جزء منها ويعمل خلفيه لخانتها وتحت الروابط لكي نخفف من حجم الصفحه واستغلا مكانها باي شيئ نحتاجه

    انظر النتيجيه الان بعد الحذف والتنسيق :

    اضغط على الصورة لرؤيتها بشكل اوضح

    الان انتهينا من تنظيف وتنسيق التصميم سوف نقوم الان باعداد ملف CSS لتنسيق محتوى الموقع

    يتبع





    __________________

    اثكو جرافيكس
    Web Designer & Graphics
    +||[ عالم الابداع والتميز ]||+

    www.athco.com.sa
    athco غير متواجد حالياً

  6. #6
    عضو نشيط جدا
    تاريخ التسجيل
    Nov 2002
    المشاركات
    404


    ماهي فائده هذا الملف ؟

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

    سنكتفي بهذه الاوامر بدرسنا هذا لعده اسباب ومنها ان هذه هي الاوامر التى نحتاجه فقط في درسنا ولعدم تمكننا من هذه التقنيه كثيرا حيث اننا مبتدئين بها حديثا ( ورحم الله امرءٍ عرف قدر نفسه )

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


    نبدأ الاعداد :

    1/ افتح برنامج المفكره الملحق بالويندوز

    2/ قم بكتابه الاوامر التاليه في ملف المفكره واحفظ الملف بهذا الاسم Style.css

    كود PHP:


    //------------------------------------
    التحكم في نوع ولون الخط في الجداول

    Td    

    //---- نوع الخط

       
    font-family:   Tahoma;
    //---- حجم الخط    
        
    font-size10px;
    //---- تاثير الخط عريض ام عادي    
        
    font-stylenormal;
    //---- لون الخط    
       
    color#1F4C63;
    //---- لتنسيق حواف الاسطر لكي تكون متساوية
        
    text-alignjustify;
    }
    //------------------------------------

    //------------------------------------
    التحكم في نوع ولون وحجم الخط في خلايا الجداول

    P    


       
    font-family:   Tahoma;
        
    font-size11px;
        
    font-stylenormal;
       
    color#1F4C63;
        
    text-alignjustify;
    }
    //------------------------------------

    //------------------------------------
    التحكم في التاثير وخط ولون الروابط 

    a
    :link {
        
    font-family:  Tahoma;
        
    font-size11px;
        
    font-stylenormal;
        
    color#1F4C63;
       
    text-decorationnone;
    }
    a:hover {
        
    font-familyMS Sans SerifTahoma;
        
    font-size10px;
        
    font-stylenormal;
        
    color#FF7F50;
        
    text-decorationnone;

    }
    a:visited {
        
    font-familyMS Sans SerifTahoma;
        
    font-size10px;
        
    font-stylenormal;
        
    color#cccccc;
        
    text-decorationnone;
    }
    a:active {
        
    font-familyMS Sans SerifTahoma;
        
    font-size10px;
        
    font-stylenormal;
        
    colorRed;
        
    text-decorationnone;
    }

    //------------------------------------ 
    3/ كيف يتم ادراج هذا الملف الى ملف التمبلت او التصميم ؟

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

    كود PHP:

    <HEAD>

    <
    link href="Style.css" rel="stylesheet" type="text/css">


    </
    HEAD


    الى هنا يتم الانتهاء من الدرس الثاني في هذه الدورة المباركه باذن الله

    الدرس القادم هو الانتقال الى السيرفر المحلى واعداد الشفره البرمجيه لتضمين ملفات الموقع للقالب من خلال لغة البرمجه PHP


    اسأل الله لي ولكم التوفيق لما يحبه ويرضاه



    اثكو جرافيكس





    __________________

    اثكو جرافيكس
    Web Designer & Graphics
    +||[ عالم الابداع والتميز ]||+

    www.athco.com.sa
    athco غير متواجد حالياً

  7. #7
    عضو نشيط
    تاريخ التسجيل
    Feb 2003
    المشاركات
    194


    الله يجزاك خير أخوي اثكو جرافيكس

    مشاء الله شغل متعوب علية بصرحة من أقوى الدروس الشاملة في تصميم المواقع من الألف إلى الياء إن شاء الله والتي انصح كل شخص بقرأتها أكثر من مرة قبل تصميم أي موقع فهي سوف تريحك كثيراً في تعديل وتحديث الموقع





    __________________
    >> .... <<
    ^FaWaZ.NeT^ غير متواجد حالياً

  8. #8
    عضو نشيط
    تاريخ التسجيل
    Feb 2003
    المشاركات
    194


    أخوي أداة القص موجودة في الفوتوشب "Adobe Photoshop " الإصدار السادس والسابع ولا حاجة لفتح التصميم من خلال برنامج
    "Adobe ImageReady "
    اخوي احب استفسر هل هناك فرق بين أداة القص في البرنامجين أم انهم متشابهين ولكم منا جزيل الشكر





    __________________
    >> .... <<
    ^FaWaZ.NeT^ غير متواجد حالياً

  9. #9
    عضو نشيط جدا
    تاريخ التسجيل
    Nov 2002
    المشاركات
    404


    اهلا بك اخي الكريم

    لا يوجد بينهما فرق حيث ان معالجة امر القص تتم من خلال برنامج الايماج ريدي ولكن في الخلف ولكي تتاكد من ذلك قم بقص الصفحه من خلال الفوتوشوب ومن ثم افتح شفره الهتمل للصفحه ستجد هذا الكود
    <!-- ImageReady Slices (athco2.psd) -->
    من ثم قم بقص اي تصميم اخر من خلال الايماج ريدي وافتح شفره الهتمل للصفحه ستجد نفس الكود السابق مما يدل على ان البرنامج الذي نفذ امر القص في كلتا الحالتين هو الايماج ريدي ولكنه من خلال الفوتوشوب نفذ الامر بالخلف دون ان تشعر بتشغيل البرنامج


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


    تمنياتي لك بالتوفيق





    __________________

    اثكو جرافيكس
    Web Designer & Graphics
    +||[ عالم الابداع والتميز ]||+

    www.athco.com.sa
    athco غير متواجد حالياً

  10. #10
    عضو نشيط
    تاريخ التسجيل
    May 2003
    المشاركات
    289


    اولا حبيت اشكرك اخوي athco

    فعلا شرح اكثر من رائع وهذا مانحتاجه

    بارك الله فيك ووفقك الله لما يحب ويرضى

    جهد رائع

    ولي عوده ان شاء الله





    EYNN غير متواجد حالياً

  11. #11
    عضو سوبر نشيط
    تاريخ التسجيل
    Mar 2002
    المشاركات
    693


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

    درس رائع أخى athco كعادتك

    تحياتى لك بالتوفيق





    php master غير متواجد حالياً

  12. #12
    عضو سوبر نشيط
    تاريخ التسجيل
    Feb 2003
    المشاركات
    955


    جزاك الله كل خير و الموضوع يحتاج الى التثبيت





    __________________
    لك الله يا غزة ..
    palnour غير متواجد حالياً

  13. #13
    عضو سوبر نشيط
    تاريخ التسجيل
    Nov 2001
    المشاركات
    823


    جزاك الله خير على هذا الدرس الرائع فعلا





    أبو الوليد غير متواجد حالياً

  14. #14

    تاريخ التسجيل
    May 2001
    المشاركات
    3,294


    يعطيك الف عافيه درس متقن ماشاءالله عليك





    __________________
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور
    Net Hunter غير متواجد حالياً

  15. #15
    عضو نشيط
    تاريخ التسجيل
    Apr 2002
    المشاركات
    189


    مشكوور الف وخمسمية وست وسبعين شكر




    والله يجزاك الف خير

    وصراحه انت مبدع

    تحياتي





    __________________
    قريبا جداً

    المفاجأة ,,,
    قرية العرب غير متواجد حالياً





ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا|شقق للايجار في الكويت | بيوت للبيع في الكويت | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض