إرشادات استخدام المنتدى

   
   

الصفحة 1 من 6 1234 ... الأخيرةالأخيرة
عرض النتائج 1 إلى 10 من 57
  1. #1
    Array الصورة الرمزية rAiHaNaH
    تاريخ التسجيل
    Aug 2009
    الاقامه
    في غرفتي ( كم أحبها )
    المشاركات
    3,597
    التقييم
    2231684
    الجنس
    أنثى
    الدولة
    Saudi Arabia
    المتصفح
    Firefox
    نوع الجوال
    نوكيا NOKIA
    نظام الجهاز
    Windows 7
    المؤهل الدراسي
    جامعي
    مزاجي
    Confused

    نوافذ الدرس الرابع (الجزء الثالث): تركيب الستايل على المنتدى وتغيير الألوان



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

    حياكم الله معشر مصممات الويب
    * اليوم خلاص بتصيرون تعتمدون على أنفسكم في 70% من الدرس
    لا مساعدات ولا شي
    الدرس طويل لكن سهل ان شاء الله على الجميع


    بسم الله توكلنا على الله :
    ** سموا بالله عشان ربي يبارك لكم في وقتكم يا جماعة

    بعد التقطيع وعشان نركب الهيدر
    نفتح مجلد السيرفر وننشئ مجلد ونسميه باسم الستايل ..
    نفتح مجلد الـimage وننسخ منه المجلدات التالية في المجلد الجديد :
    Attach – buttons – editor – gradients – icons – miscpagination – rating – reputation - search_results - site_icons – statusicon

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

    فتصبح مكونات المجلد كالتالي :



    مسار المجلد يكون كالتالي : C:\wamp\www\sh\images\umprella
    sh | هذا اسم قاعدة بياناتي

    • ملف الإندكس سنتحدث عنه الآن :



    # استخدموا المشاهدة في الوضع الكامل حتى يكون الفيديو واضح..



    نفتح ملف جديد في برنامج النت باد++ أو الدريم ويفر ونبدأ في برمجة الهيدر
    ومن الأفضل حفظ الصفحة أولًا في مجلد الستايل ونسميها مثلًا index
    نبدأ أولًا بلغة الـhtml بما انها لغة البناء
    كود PHP:
    <div id="header"></div><!--header--> 
    طيب أشرح لكم معنى هذا الكود .. * ما حبيت أشرحه لكم من قبل لأنكم ما راح تعرفون أهميته إلا الآن ^^
    الـdiv : هذا اسهل ما نقول عنه انه صندوق يحتوي على عدة أشياء
    أنا بديت أبني صفحتي ,, فصفحتي راح تكون مكونة من عدة صناديق وكل صندوق له اسم معين
    وهذا اول صندوق واللي نسميها الهيدر
    الـid : هذا مفتاح الصندوق .. وهناك مفتاح آخر يسمى class
    الـ id .. مخصص للصور أو النصوص الغير متكررة... صورة الهيدر (المظلة) لن تتكرر مرة أخرى في الصفحة فلذلك نستخدم الـ id
    أما الـ class مخصص للصور أو النصوص المتكررة.. * لن أستخدمه في صفحتي =)

    الـ <!--header--> : هذا تعليق يستخدم في الصفحات الكبيرة عشان نعرف نهاية كود الدف هذا لمين .. وهو لايظهر في الصفحة .. مهمته فقط زيادة الترتيب =)
    كود PHP:
    <div id=" bg-h "></div><!--bg--> 
    كود صورة الهيدر
    كود PHP:
    <div id="logo"></div><!--logo--> 
    كود الشعار ..
    وبما انه شعار وأنا أرغب انه يؤدي إلى صفحة أخرى ,, فسأضيف له كود الرابط
    ونضيف كود center حتى تكون الصور في منتصف الصفحة * هذا كود اختياري ويعتمد على تصميمك =)
    طيب.. طيب.. خلصنا كذا من الهيدر



    نجي ألحين في الفوتر :



    كود PHP:
    <div id="footer">
    <
    div id="bg-f"></div><!--bg-->
    <
    div id="domen"></div><!--domen-->
    </
    div><!--footer--> 
    صندوق الفوتر يحتوي الخلفية وصورة للحقوق
    انتهينا الآن من البناء ,, نأتي الآن للزينه ^^
    خلصنا من صورة الهيدر.. نجي لصورة الشعار
    طيب الشعار موجود.. وش الإضافة اللي بتكون عليه ؟!
    بما انه في التصميم الشعار تحت المظله مباشرة فأنا أستخدم خاصية الـ position لتحريكه =)
    # خصائص الـcss خاصة فيني أنا .. وكل تصميم مايناسبه من خصائص ^^







    * ملاحظه: اللي بيكونعندها خلفية متمددة وهذا الغالب منكم
    تسوي تكرار أفقي يعني تكتب :
    كود:
    background:url(header.png) repeat-x;
    جزئية الفيديو شرحت تركيب صفحتي الإندكس والستايل فقط ...
    نقل المجلدات وتوضيح الألوان بيكون صوري فقط (أريح لكم الظاهر )

    بالنسبة لنقل المجلدات :

    مثل ما قلت لكم فوق مثلا سميت المجلد : umprella
    * الإسم تقدرين تسمين أي شي والأفضل جدًا انه يكون انجليزي
    بعد إنشاء المجلد تنسخين فيه المجلدات اللي تكلمت عنها فوق
    وإذا احتفظتي بنسخة من مجلد الصور كامل في مكان آخر من الجهاز يكون أفضل..

    بما اني نقلت المجلد وكذا فشيء طبيعي ان مسار الصورة اللي كتبته في ملف الستايل بيتغير
    يعني يصير اسمه كذا
    كود:
    background:url(images/umprella/header.png)
    مجلد الصورة + اسم مجلد الستايل + اسم الصورة وصيغتها
    أي مسار بيكون مختلف عن هذا ,, الصورة ماراح تظهر لك ونتيجة العمل خطأ

    أحبكم آل لها


  2. #2
    Array الصورة الرمزية rAiHaNaH
    تاريخ التسجيل
    Aug 2009
    الاقامه
    في غرفتي ( كم أحبها )
    المشاركات
    3,597
    التقييم
    2231684
    الجنس
    أنثى
    الدولة
    Saudi Arabia
    المتصفح
    Firefox
    نوع الجوال
    نوكيا NOKIA
    نظام الجهاز
    Windows 7
    المؤهل الدراسي
    جامعي
    مزاجي
    Confused

    افتراضي



    الشرح فيديو :


    *لمشاهدة بشكل واضح اختاروا الوضع الكامل

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






    ندخل للوحة التحكم ثم نختار من القائمة اللي في اليمين الإستايلات والقوالب > التحكم بالإستايلات

    نقوم بإنشاء ستايل جديد

    http://www.up-king.com/almaciat/icyq...cyqfgtp1be.png

    أول تغيير نسويه ..
    ننتقل لقائمة متغيرات الستايل



    * نختار اذهب =)

    تطلع قائمة طويلة عريضة
    ابحثي عن هذي القائمة



    نغير مسار المجلدات اللي نسخناها وعدلناها في البداية



    انتبهي ان الشرطة هي اللي في حرف الظاء بالإنجليزي وليس اللي في حرف الميم

    ,,,
    طبعًا الصور ماراح تطلع ألحين
    نرجع للتحكم بالإستايلات مرة ثانية ونختار القوالب الشائعة
    لما تطلع لي صفحة فيها 3 أقسام
    الأول : الهيدر
    الثاني : مدري وش يعني فخلوه
    الثالث : الفوتر

    الطريقة الأسهل للمبتدئ.. انسخي أكواد الهيدر كاملة والصقيها في صقحة جديدة في البرنامج اللي تستخدمينه
    ثم اضغطي كنترول وحرف (ب) f
    ابحثي عن :
    كود:
    <div id="toplinks" class="toplinks">
    وامسحي اللي قبله
    الصقي كود الهيدر مكانه
    انسخي الجميع مرة أخرى والصقيه في مريع الهيدر

    # الصورة ماراح تطلع حاليًا





    بالنسبة للفوتر

    نلصق أكواد الفوتر كاملة قبل
    كود:
    <div class="below_body">
    نرجع لصفحة التحكم بالإستايلات ونختار التوسيع


    نختار الـcss


    ثم نضغط على اللي مظلل مرتين
    تظهر قائمة نختار منها



    تظهر نافذة جديدة فيها مربع فارغ نضع فيه أكواد الستايل كاملة

    الآن افتحي صفحة المنتدى الرئيسية ,, وتحصلين صور استايلك ظاهرة



    الجزئية هذي تعتمد عليكم بشكل كامل
    أنا الآن أعطيك فقط المفاتيح

    انتقلي لقائمة متغيرات الستايل
    العنوان اللي مكتوب بالخط العريض اضغطي عليه
    تطلع على اليسار قائمة بالألوان

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

    common / هذا يتعلق في الخلفية الخلفية وخلفية الأقسام
    body-background
    body-color
    يعني هذا



    editor / هذا صندوق الرد المتقدم ,,

    footer / ما يحتاج أقول ان هذي الجزئية السفلية للمنتدى

    forume / هذا مختص بالصندوق المربع اللي يكون في يسار صفحة المنتدى الرئيسية (اللي تشوفون فيه آخر رد للمواضيع - الكلمات الدليلة .. الخ)

    header / الجزء العلوي للمنتدى

    links / ألوان الروابط وخصائصها

    navbar / الجزء العلوي والذي يقع تحت الهيدر مباشرة

    popup meanu / لون القوائم المنسدلة في المنتدى

    postpit / للشريط الذي يقع تحت الرد ويكون فيه تعديل المشاركة وو الخ

    profile / الملف الشخصي للعضو

    secodary cotent / لصندوق احصائيات الزوار

    Threadbit / الأقسام في الرئيسية

    toolsmenu / أيضًا قوائم منسدلة في داخل الأقسام

    هذا بصفة عامة ::
    بعض الكلمات اللي تواجهك
    border الحدود ,, راح تواجهكم دائمًا
    hover مرتبط بالروابط .. يعني اذا مررتي الماوس على كلمة وتغير لونها لأزرق فعشان انتي غيرتي لون الـhover




    كذا نكون خلصنا منتدانا بحمد الله

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

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



    * اسم الإضافة الفايرفوكسية التي استخدمتها في معرفة أبعاد الصورة وقيم الـposition اسمها Firebug
    ابحثوا عنها في موقع اضافات الفايرفوكس =)

    التعديل الأخير تم بواسطة : rAiHaNaH بتاريخ 23-03-2012 الساعة 10:27 PM
    أحبكم آل لها


  3. #3
    Array الصورة الرمزية rAiHaNaH
    تاريخ التسجيل
    Aug 2009
    الاقامه
    في غرفتي ( كم أحبها )
    المشاركات
    3,597
    التقييم
    2231684
    الجنس
    أنثى
    الدولة
    Saudi Arabia
    المتصفح
    Firefox
    نوع الجوال
    نوكيا NOKIA
    نظام الجهاز
    Windows 7
    المؤهل الدراسي
    جامعي
    مزاجي
    Confused

    افتراضي

    الدرس مثل ما قلت لكم طويل
    يمكن بعض النقاط الصغيرة نسيت أشرحها
    أو كلامي عنها غير واضح
    ماتترددون في السؤال,, ومثل ما أقول دائمًا
    حاولي أكثر من مرة ابحثي ثم اسألي =)
    أحبكم آل لها


  4. #4
    عضو Array
    تاريخ التسجيل
    May 2009
    المشاركات
    81
    التقييم
    579
    الجنس
    أنثى

    افتراضي

    الدرس شكله دسم وصعب

    الله ييسر لنا ونفهم الخطوات

    استاذه الحين المجلدات الي باللون الاحمر هي فقط الي ننقلها ام ننقل جميع المجلدات الي بالمجلد الايميج الى مجلد ستايلنا ونعدل فقط في المجلدات الاربع ؟؟

    لي عودة للتطبيق باذن الله
    أحلى طله سابقاَ....

  5. #5
    طموحي يلامس عنان السماء Array
    تاريخ التسجيل
    Oct 2009
    المشاركات
    95
    التقييم
    8037
    الجنس
    أنثى

    افتراضي

    تسجيل حضور وعودة بإذن الله بعد ما أركز عليه
    تسلمين ريحانة ويعطيك العافية

  6. #6
    عضو Array
    تاريخ التسجيل
    May 2009
    المشاركات
    81
    التقييم
    579
    الجنس
    أنثى

    افتراضي

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

    الصور هنا


    لدي استفسار ايش الي مسميته domen هل هو صورة او ايش ؟؟ مافهمتها

    وايضا الايقونة الي بالفايرفوكس مو موجوده عندي كيف اجيبها ؟
    أحلى طله سابقاَ....

  7. #7
    كنت هنا..! Array الصورة الرمزية صمود أنثى..!
    تاريخ التسجيل
    Mar 2009
    الاقامه
    تحت السماء~
    المشاركات
    1,208
    التقييم
    296474
    الجنس
    أنثى
    الدولة
    Saudi Arabia
    المتصفح
    Google Chrome
    المؤهل الدراسي
    جامعي
    مزاجي
    Lurking

    افتراضي

    تسجيل حضور
    نرفرف لنحلق إليه
    إلا أن الجناحين قد كسرت..!

  8. #8
    Array الصورة الرمزية rAiHaNaH
    تاريخ التسجيل
    Aug 2009
    الاقامه
    في غرفتي ( كم أحبها )
    المشاركات
    3,597
    التقييم
    2231684
    الجنس
    أنثى
    الدولة
    Saudi Arabia
    المتصفح
    Firefox
    نوع الجوال
    نوكيا NOKIA
    نظام الجهاز
    Windows 7
    المؤهل الدراسي
    جامعي
    مزاجي
    Confused

    افتراضي

    إبداع قلب :
    المجلدات اللي باللون الأحمر .. تلاحظين بعض الأيقونات فيها لونها أزرق
    فهذي مهم انك تغيرين الأزرق للون يناسب للستايل حقك =)
    ،،
    معليش نسيت تصميمك الأصلي للستايل
    فما فهمت عليك .. يعني اللي أشوفه ان شغلك صحيح الآن :$

    دومين أقصد فيه رابط لموقعي أو مدونتي ,, يعني حفظ حقوق لك
    تضيفين رابط لموقعك في أسفل الفوتر
    * يعني أنا حطيت في فوتر منتدى لها الآن اسمي ويوصلكم لملفي الشخصي :p



    سما: الله يسعدك ^^
    أحبكم آل لها


  9. #9
    عضو فعال Array الصورة الرمزية omawlad
    تاريخ التسجيل
    Aug 2008
    الاقامه
    السعودية
    المشاركات
    402
    التقييم
    85246
    الجنس
    أنثى
    مزاجي
    Innocent

    افتراضي

    تسجيل حضور
    ولي عودة بعد المحاولة إن شاء الله
    ...::: لا إله إلا الله :::...
    ...::: وحده لا شريك له :::...
    ...::: له الملك وله الحمد :::...
    ...::: وهو على كل شيء قدير :::...


  10. #10
    عضو Array
    تاريخ التسجيل
    May 2009
    المشاركات
    81
    التقييم
    579
    الجنس
    أنثى

    افتراضي

    المجلدات اللي باللون الأحمر .. تلاحظين بعض الأيقونات فيها لونها أزرق
    فهذي مهم انك تغيرين الأزرق للون يناسب للستايل حقك =)
    ،،


    مافهمت اي ايقونات واعتذر اسئلتي كثيره واشوف نفسي الوحيده الي اسال كثير >>> فيس مستحي

    بالنسبة للاستايل تبعي هو هذا

    هنا
    أحلى طله سابقاَ....

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

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

  1. الدرس الثالث (الجزء الثالث): تقطيع الهيدر والفوتر
    بواسطة rAiHaNaH في منتدى |استايلات الجيل الرابع| بدأت
    مشاركات: 45
    آخر مشاركة: 22-03-2012, 12:02 AM
  2. الدرس الثاني(الجزء الثالث): تصميم ستايل المنتدى
    بواسطة rAiHaNaH في منتدى |استايلات الجيل الرابع| بدأت
    مشاركات: 39
    آخر مشاركة: 12-03-2012, 08:52 PM
  3. الدرس الأول:(الجزء الثالث) تحميل + تركيب .. السيرفر والمنتدى
    بواسطة rAiHaNaH في منتدى |استايلات الجيل الرابع| بدأت
    مشاركات: 112
    آخر مشاركة: 08-03-2012, 12:50 PM
  4. الدرس الرابع (الجزء الأول) : إدراج رابط في الصفحة
    بواسطة rAiHaNaH في منتدى |استايلات الجيل الرابع| بدأت
    مشاركات: 106
    آخر مشاركة: 22-02-2012, 12:39 AM
  5. الدرس الثالث عشر [ توزيع الستايل في الفرونت بيج + تركيبه على المنتدى ]
    بواسطة هاله الغامدي في منتدى |استايلات الجيل الثالث| انتهت
    مشاركات: 7
    آخر مشاركة: 08-01-2010, 07:42 PM

مواقع النشر (المفضلة)

مواقع النشر (المفضلة)

تعليمات المشاركة

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



جميع الحقوق محفوظه©