Follow us on Facebook Follow us on Twitter Linked In Flickr Watch us on YouTube My Space Blogger
التسجيل
صفحة 1 من 6 1234 ... الأخيرةالأخيرة
النتائج 1 إلى 15 من 82

دورة تعلم بناء صفحات الانترنت من الفوتوشوب إلى Html + CSS

هذا الموضوع : دورة تعلم بناء صفحات الانترنت من الفوتوشوب إلى Html + CSS داخل الويب وتطوير المواقع | Websites Design & Developmentالتابع الي قسم المنتديات التقنية : الحمد لله اللذى هدانا لهذا وماكنا لنهتدى لولا أن هدانا الله قبل البدأ مباشرة بالدورة أرجوا من كل الأخوة الأفاضل ...

  1. #1
    الصورة الرمزية RealIdea
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Mar 2010
    الدولة
    مــصــر
    العمر
    39
    المشاركات
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    دورة تعلم بناء صفحات الانترنت من الفوتوشوب إلى Html + CSS


    الحمد لله اللذى هدانا لهذا وماكنا لنهتدى لولا أن هدانا الله
    قبل البدأ مباشرة بالدورة أرجوا من كل الأخوة الأفاضل كتابة مايستطيعون كتابته من الدورة على الورق حتى يتسنى مراجعة الدورة فى أي وقت
    ستكون خريطة الدورة مقسمة على مراحل وكل مرحلة مقسمة إلى أجزاء وكل جزء مقسم إلى خطوات ، حتى يتسنى لنا السؤال عن جزئية بعينها ويتم تسهيل المراجعة والفهم
    أي سؤال خارج الدورة سيتم استبعاده أو وقفه حتى الانتهاء من الدورة
    أي عوائق أو صعوبة فى الوصول لتطبيق جزئية من جزئيات الدورة ستعنى أن العائق أو الصعوبة مصدرها عدم الإلمام بكل أدوات برنامج مثل الفوتوشوب أو النوت باد ++ أو لغة الـ html بوجه عام لذا سيتم وضع مصادر لشرحها من طريق الجرافيك أو من مصادر أخرى صديقة


    -----------------------------------------------------------------------


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



    هناك عدة طرق لاخراج التصميم من الفوتوشوب حتى يصبح صفحة انترنت وأقدم هذه الطرق هو تقطيع الصفحة بأداة الـ Slice Tool لكنها طريقة قديمة ومعقدة وتعقيدها ليس خاصا بأسلوب التقطيع فقط بل يمتد إلى طريقة قراءة المستعرضات لصفحتك وفهمها الفهم الصحيح ، فمجرد أنك تقوم بصناعة جدول table ليس بالشيئ المفيد عمليا بالنسبة لمستعرضات الويب الحديثة اللتى تتطور كل ساعة ،
    ولن أطيل النفس فى شرح أن الويب المقسم div المدعم بـ id أو class هو الاسلوب العصرى المتوافق مع جميع المستعرضات
    دورتنا هنا تعتمد اعتمادا كليا على طريقة الويب المقسم فلنتوكل على الله ونتعرف سويا على كيفية بناء هذه الصفحة وسأقوم هنا بوضع أساسيات العمل
    1. سيكون مقاس صفحتنا 950 بكسل عرض حيث أن معظم صفحات الانترنت الحالية الحديثة تأخذ مقاسات من 950 الى 970
    2. لن أضطر لاستخدام كامل الصفحة اللتى سنصممها حيث أننا لن نستخدم كل هذا العمل فيما بعد بل سنستخدم فقط ما يلزمنا من الجرافيك من خلال الفوتوشوب فسنقوم بتصميم البانر وبقية الصور المستخدمة فقط ...
    بعضنا فى هذه الدورة سيقع فى مشاكل عديدة تخص المقاسات لذا سأقوم سريعا بتصميم كامل الصفحة فى الفوتوشوب
    3. تحميل ما يلزمنا من أيقونات أو تصاميم خارجية مساعدة ولذلك عدة طرق منها عن طريق Google Images وعن طريق موقع Icon Finder فالايقونات اللتى استخدمتها قمت بتحميلها من موقع www.iconfinder.net/browse يمكنك الدخول على الموقع والبحث فيه – بالنسبة لايقونة علامة الاستفهام قمت بجلبها من صور جوجل عن طريق البحث عن كلمة question (www.google.com.eg/images?q=question )، بقية الصور من عندى وهى موجودة مع ملفات العمل...
    4. المحتوى التجريبى – هو محتوى لملأ فراغات الصفحة ويمكنك تحميله ونسخه دائما من هنا www.real-idea.net/content.txt
    فلنبدأ التصميم
    - افتح ملف عمل جديد فى الفوتوشوب بمقاس 950 بكسل عرض x 1300 بكسل ارتفاع (يمكن تغيير الارتفاع)
    - قم باختيار أداة الـ Rectangle Shape Tool لعمل البانر


    وسنرسم البانر بمقاساته 950 بكسل فى 176 بكسل ، كيف ذلك ؟
    عند اختيارك أداة Rectangle Shape Tool كما بالشكل السابق أو الضغط على حرف U من الكيبورد مباشرة سيظهر لنا شريط أدوات داخلى خاص برسم الأشكال ومكانه بالاعلى سنختار Rectangle Options لنكتب مقاسات الرسم كما بالصورة التالية



    ثم املأ هذا الشكل بتدرج لونى Gradient من الاعلى بالكود اللونى 7bbcff ومن الأسفل بالكود اللونى b9e5f4



    ثم اختر الفرشاة لنرسم شكلا مثل التفريعات الزهرية مثلا أو أى شكل نريده



    ثم من الناحية الأخرى مثل ذلك



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



    انتهينا الآن من رسم البانر كما يجب
    - نقوم الآن برسم القوائم الرئيسية بنفس الطريقة بأداة Rectangle Shape Tool لكن بعد ظبط اعداداتها السابقة لكى تكون بارتفاع 30 بكسل فقط بدلا من 176 بكسل



    - هذا الجزء ليس له معطيات الا وصف موجز وهو أننا سنقوم الآن بوضع علامة الاستفهام على اليمين والصورة على اليسار، وبالمختصر فالصور ارتفاعها 213 بكسل



    - بأداة الـ Rectangle Shape Tool بعد ظبط اعداداتها للاعدادات الافتراضية قم بصنع خمس نسخ كرؤوس عناوين فى العمود الأيمن، ويكون نسبة التباعد بينهم متشابهة.. يمكنك استخدام أداة Ruler Tool لقياس المسافة بينهم



    - سنقوم الآن بعمل العمود الأيسر وسنبدأ بالقائمة الثانية وهى تعتبر قوائم داخلية للموقع وسنستخدم لها نفس الاداة السابقة بعد تظبيط اعداداتها ليكون مقاس ال shape عرض 610 بكسل وارتفاع 43 بكسل



    - سنقوم الآن بوضع وترتيب الصور المعبرة عن منتجات الشركة مثلا أو عروض أو ما شابه ، الصورة موجودة فى ملف العمل كما يمكنك أن تضع صورة مناسبة من أى مكان..، تذكر فقط أن أحجام مجموعة الصور هنا هو 175 بكسل عرض فى 200 بكسل ارتفاع والحجم هنا مهم لكن تغييره بأصغر أو أكبر لن يشتتنا أو يبعدنا عن التصميم ، فقط سنقوم بتصغير المسافة اللتى تبعد كل صورة عن الأخريات على حسب حجم الصورة نفسها وسنتعرض لذلك فى مرحلة صنع ملف الـ css ..



    - قم بنسخ القائمة السابقة وضعها بالاسفل لتصبح مكان الفوتر ثم ضع بعض المحتوى الكتابى لتظهر لك صفحتك كاملة

    ******
    الى هنا انتهت المرحلة الاولى من الدورة
    تحميل ملف العمل

    تطبيقات المشتركين فى الدورة
    1 - medo601


    2 - الاستاذ اسلام مشرف القسم


    3 - Last Soul


    4 - hatemgoda


    5 - روح مجروحة

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

    التعديل الأخير تم بواسطة RealIdea ; 11 / 07 / 2010 الساعة 34 : 08 AM سبب آخر: وضع التطبيقات
    يحفظ العلم بالعمل به وتعليمه والتأليف فيه، ومن حفظه وكرره وذاكره ودرسه ثبت في صدره

    موقعى الشخصى
    www.Real-Idea.Net



  2. #2
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Jun 2010
    المشاركات
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة انشاء موقع متكامل بداية من الفوتشوب إلى Html + CSS

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

  3. #3
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Jun 2010
    المشاركات
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة انشاء موقع متكامل بداية من الفوتشوب إلى Html + CSS


    بقية الصور من عندى وهى موجودة مع ملفات العمل...
    الصورة موجودة فى ملف العمل
    عذرا اين ملفات العمل ؟؟

  4. #4
    الصورة الرمزية Eng. Firas
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    May 2010
    المشاركات
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة انشاء موقع متكامل بداية من الفوتشوب إلى Html + CSS

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

    ايضا اتقدم باقتراح تسجيل الدروس كفيديو حيث المعلومة اوضح والتطبيقات اسرع وسيكون بامكانك توصيل كم ونوع اكبر بكثير لنا مما اكرمك الله..
    جعله الله في ميزان حسناتك ووالديك ,,,,,,,,,,,

  5. #5
    مصمم جديد

    الحالة
    غير متصل
    تاريخ التسجيل
    Sep 2008
    الدولة
    المملكة العربية السعودية
    المشاركات
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة انشاء موقع متكامل بداية من الفوتشوب إلى Html + CSS

    تطبيق على الدرس الاول
    web1.jpg

  6. #6
    الصورة الرمزية مازن المصري
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Jun 2010
    المشاركات
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة انشاء موقع متكامل بداية من الفوتشوب إلى Html + CSS

    السلاااااااااام عليكم
    الله أكبر ما شاء الله

    للأمااااااااااااااااااااا ااااااااااااااام سر

    و انتظروا موقعي الإلكترونيى يا إخواني

    دمتم في رعاية الله ؛

  7. #7
    الصورة الرمزية محمد الحضرمي
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Sep 2006
    الدولة
    اليمن
    المشاركات
    129
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    رد: دورة انشاء موقع متكامل بداية من الفوتوشوب إلى Html + CSS

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

  8. #8
    الصورة الرمزية مازن المصري
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Jun 2010
    المشاركات
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة انشاء موقع متكامل بداية من الفوتوشوب إلى Html + CSS

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

    كنت أسأل هل سنتطرق الى مسألة دخول الموقع بالبريد الالكتروني و امكانية اضافة ردود وخلافه .. وشكراً

    وهل ستكون المحاضرات أسبوعيا ؟
    التعديل الأخير تم بواسطة مازن المصري ; 09 / 07 / 2010 الساعة 01 : 08 AM سبب آخر: إضافة

  9. #9
    مصمم جديد

    الحالة
    غير متصل
    تاريخ التسجيل
    Oct 2009
    الدولة
    في عالم الجرافيك
    العمر
    30
    المشاركات
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة انشاء موقع متكامل بداية من الفوتوشوب إلى Html + CSS

    ماشاء الله درس ولا أروع

    تسلم أخوي على الدرس والله يقويك على طاعته

    كان ودي أكون معاكم بس ما لحقت التسجيل

    إنشاء الله بأكون متابعكم أول بأول

    دمتم في حفظ الرحمن

    .
    لا تجادل الأحمق .. فقد يخطئ الناس في التفريق بينكما.
    ولا يستطيع أحدٌ ركوب ظهرك .. إلا إذا كنتَ منحنياً.

  10. #10
    مصمم جديد

    الحالة
    غير متصل
    تاريخ التسجيل
    Oct 2009
    الدولة
    في عالم الجرافيك
    العمر
    30
    المشاركات
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة انشاء موقع متكامل بداية من الفوتوشوب إلى Html + CSS

    أخوي بالنسبة للبرامج المطلوبة في العمل في روابط تحميل لها طبعا غير الفوتوشوب

  11. #11
    الصورة الرمزية RealIdea
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Mar 2010
    الدولة
    مــصــر
    العمر
    39
    المشاركات
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    رد: دورة انشاء موقع متكامل بداية من الفوتوشوب إلى Html + CSS

    السلام عليكم
    بالنسبة للنوت باد ++ فهو برنامج سهل جدا لن تضطر لمعرفة كل أدواته وستتطرق الدورة للضرورى فقط من الاستخدام
    أما بالنسبة لمسألة تحميل البرامج فالروابط فى موضوع الاعلان عن الدورة بنفس القسم من المنتدى الموضوع المثبت ستجد فيه روابط تحميل جميع البرامج اللازمة
    وبالنسبة لموضوع البريد الالكترونى فهذا خارج الدورة فالدورة لا تتتحدث عن كيفية دخول المواقع من خلال البريد الالكتروني أو اضافة ردود وخلافه ؟ لم تذكر هذه المسائل فى الدورة ولا علاقة لها بالدورة من قريب أو بعيد
    لكم تحياتى ووفقكم الله لما يحبه ويرضاه
    المحاضرات مرتين أسبوعيا بمشيئة الله تعالى
    التعديل الأخير تم بواسطة RealIdea ; 09 / 07 / 2010 الساعة 46 : 08 PM

  12. #12
    الصورة الرمزية مازن المصري
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Jun 2010
    المشاركات
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة انشاء موقع متكامل بداية من الفوتوشوب إلى Html + CSS

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

    معذرة عن السؤال الخارج ، بارك الله فيك
    فإنني ظننت من عنوان الدورة "دورة انشاء موقع متكامل بداية من الفوتوشوب إلى Html + CSS " أنها ستتطرق إلى ما أسلفت .

    عموما أكرر الإعتذار ؛

  13. #13

    الصورة الرمزية eslam mohamad
    عضو مميز

    الحالة
    غير متصل
    تاريخ التسجيل
    Sep 2006
    الدولة
    مصر
    العمر
    32
    المشاركات
    1,991
    Thanks
    1
    Thanked 0 Times in 0 Posts
    الصور
    4
    معدل تقييم المستوى
    54

    رد: دورة انشاء موقع متكامل بداية من الفوتوشوب إلى Html + CSS

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

    أهلاً بكم أستاذنا الفاضل أستاذ أيمن

    يعني غيرت شوية في المقاسات لكن لم أخرج عن الطبيعي الذي وضعته

    تطبيقي للدرس الأول



    وجزاكم الله عنا كل الخير أستاذنا الحبيب

    تقبل الله منا ومنكم صالح الأعمال

  14. #14
    الصورة الرمزية RealIdea
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Mar 2010
    الدولة
    مــصــر
    العمر
    39
    المشاركات
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    رد: دورة انشاء موقع متكامل بداية من الفوتوشوب إلى Html + CSS

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

  15. #15
    الصورة الرمزية RealIdea
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Mar 2010
    الدولة
    مــصــر
    العمر
    39
    المشاركات
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    رد: دورة انشاء موقع متكامل بداية من الفوتوشوب إلى Html + CSS

    اقتباس المشاركة الأصلية كتبت بواسطة مازن المصري مشاهدة المشاركة
    السلام عليكم و رحمة الله

    معذرة عن السؤال الخارج ، بارك الله فيك
    فإنني ظننت من عنوان الدورة "دورة انشاء موقع متكامل بداية من الفوتوشوب إلى Html + CSS " أنها ستتطرق إلى ما أسلفت .

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

    التعديل الأخير تم بواسطة RealIdea ; 09 / 07 / 2010 الساعة 02 : 09 PM

 

 
صفحة 1 من 6 1234 ... الأخيرةالأخيرة

المواضيع المتشابهه

  1. دورة تعلم بناء صفحات الانترنت - بعض مصطلحات لغة html و css ومعانيها
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 11
    آخر مشاركة: 24 / 07 / 2012, 44 : 04 AM
  2. دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 34
    آخر مشاركة: 27 / 01 / 2012, 13 : 07 PM
  3. دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 62
    آخر مشاركة: 24 / 01 / 2012, 41 : 08 PM
  4. التصويت على تسجيل دورة تعلم بناء صفحات الانترنت بالفيديو
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 15
    آخر مشاركة: 04 / 12 / 2010, 54 : 04 AM
  5. دورة تعلم بناء صفحات الانترنت
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 38
    آخر مشاركة: 07 / 09 / 2010, 30 : 05 AM

الكلمات الدلالية لهذا الموضوع

المفضلات

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

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  
الساعة الآن 23 : 05 AM
Powered by vBulletin® Version 4.2.3
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.
Search Engine Optimization by vBSEO