على ابو عمار

، أهلاً .. وسهلاً .. ,’،

,’، (( اسم العضو )) ,’،

,’، نحن سعداء بتشريفك لمنتدانا
’,، فأهلاً بك عطْراً فوَّاحاً ينثرُ شذاه في كلِّ الأَرجاء ,’،
,’، وأهلاً بك قلماً راقياً وفكراً واعياً نشتاقُ لنزفه ’,،
’,، وكلنا أملٌ بأن تجد هنا ,’،
,’، مايسعدك ويطَيِّب خاطرك ’,،
’,، فِي إنْتظَارِ هطولِ سحابة إبداعك ,’،
,’، نتمنى لَك التوفيق ومزيداً من التوهج ’,،
’,، تَحيّاتِي وَتَقْديرِي ,’،

&&&&&&&&&&&&&


انضم إلى المنتدى ، فالأمر سريع وسهل

على ابو عمار

، أهلاً .. وسهلاً .. ,’،

,’، (( اسم العضو )) ,’،

,’، نحن سعداء بتشريفك لمنتدانا
’,، فأهلاً بك عطْراً فوَّاحاً ينثرُ شذاه في كلِّ الأَرجاء ,’،
,’، وأهلاً بك قلماً راقياً وفكراً واعياً نشتاقُ لنزفه ’,،
’,، وكلنا أملٌ بأن تجد هنا ,’،
,’، مايسعدك ويطَيِّب خاطرك ’,،
’,، فِي إنْتظَارِ هطولِ سحابة إبداعك ,’،
,’، نتمنى لَك التوفيق ومزيداً من التوهج ’,،
’,، تَحيّاتِي وَتَقْديرِي ,’،

&&&&&&&&&&&&&

على ابو عمار

هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.
على ابو عمار

عام/اسلامى/افلامم/اغانى/فديوكليب/رياضه/برامج/كمبيوتر/نت/اعلامى/دروس

عام/اسلامى/افلامم/اغانى/فديوكليب/رياضه/برامج/كمبيوتر/نت/اعلامى/دروس من على ابوعمار

المواضيع الأخيرة

» برنامج Inpaint 2.3 آخر اصدار باللغة العربية لإزالة طابع أو صور أو ختم الخ
عنوان الدرس :: توزيع الاستايل بلغة cass I_icon_minitimeالخميس مارس 15, 2012 8:07 am من طرف الاسدالذهبي

» فيلم الجبان والحب بطولة شمس البارودي الممنوع من العرض
عنوان الدرس :: توزيع الاستايل بلغة cass I_icon_minitimeالجمعة أكتوبر 14, 2011 4:17 pm من طرف nasser alnaggar

»  كل شىء عن المحولات
عنوان الدرس :: توزيع الاستايل بلغة cass I_icon_minitimeالسبت يوليو 16, 2011 8:36 am من طرف bombar

»  أنواع الملفات وامتداداتها ومعرفة ما يمكن تشغيله منها...
عنوان الدرس :: توزيع الاستايل بلغة cass I_icon_minitimeالخميس مايو 12, 2011 5:31 pm من طرف 

» مجله الستلايت كامله بكل شى للقنوات الفضائيه والجديد هنا دائما
عنوان الدرس :: توزيع الاستايل بلغة cass I_icon_minitimeالخميس مايو 12, 2011 4:57 pm من طرف 

» أكبر موسوعه بالعالم للتتعلم كل شى عن الستلايت والاجهزه الرقميه من هنا!!!
عنوان الدرس :: توزيع الاستايل بلغة cass I_icon_minitimeالخميس مايو 12, 2011 4:08 pm من طرف 

» ما هو كود ارسال معلومات للإيميل "contact form
عنوان الدرس :: توزيع الاستايل بلغة cass I_icon_minitimeالسبت فبراير 05, 2011 11:53 am من طرف QOHSAY

» شرح برنامج Nero Burning ROM v6.3 لنسخ السيديات
عنوان الدرس :: توزيع الاستايل بلغة cass I_icon_minitimeالثلاثاء يناير 25, 2011 3:11 pm من طرف QOHSAY

» <a href='http://www.klamaraby.com'><span style='text-decoration: none'><img border='0' src='http://www.klamaraby.com/Glitter/glitter/3/a.gif' alt='كلام عربي'></span> <a href='http://www.klamaraby.com'><span style='text-decoration: none'><img border='0' sr
عنوان الدرس :: توزيع الاستايل بلغة cass I_icon_minitimeالثلاثاء يناير 25, 2011 2:50 pm من طرف QOHSAY

التبادل الاعلاني


    عنوان الدرس :: توزيع الاستايل بلغة cass

    avatar


    نقاط : 0
    تاريخ التسجيل : 31/12/1969

    عنوان الدرس :: توزيع الاستايل بلغة cass Empty عنوان الدرس :: توزيع الاستايل بلغة cass

    مُساهمة من طرف  السبت يونيو 19, 2010 11:05 am



    <td style="FONT-WEIGHT: bold; FONT-SIZE: 8pt; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma" width="99%" height=34>
    <table id=table2 style="BORDER-COLLAPSE: collapse" borderColor=#7c4717 height=29 cellSpacing=0 cellPadding=0 width="50%" border=1>[tr]<td style="FONT-WEIGHT: bold; FONT-SIZE: 8pt; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma" bgColor=#fdfada>
    [/tr]</table></SPAN></SPAN>

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

    انشاء الله سوف يعلمنا بداية التفكير الصحيح بتوزيع الصور علي الاستايلات
    وليس فقط الاستايلات ولكن المواقع والمجلات واي شيئ حيث من فوائد هذة اللغه انها تقلل عدد الجداول في المنتدي وبذلك يشتغل معاك المنتدي مثل الصاروخ
    مقدمة عن ال Css
    من الغريب ان لاحظ تطور هائل في العلوم ولانزال نتمسك بقديمنا , فعلا مع ظهور عصر ال css ومعضم العرب المصممين يزالون متمسكين بلغة Html مع العلم بأن لغة ال Scc ن اسهل اللغات الموجودة باعالم والتي مثلت جميع المعايير القياسية في ضبط التصمبيم والمواقع حيث السرعة والكفئة



    فتعتمد فكرة عملهاعلي انك تقوم بفرد ( فرش )خلفية عامة وتعمل علي رص الصور بمحازات بعضها حتي تتكون أكواد تغير فيها حسب ماشئت

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

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

    1- ال Contant
    2- ال Header
    3- ال footer
    4- ال container
    أولا : ما المقصود بال Contant ؟ وما الموازي لة بلفة ال Html ؟.
    ** ال Contant ما هو الا اطار كبير أو محتوي نقوم بعرض التصميم بداخلة (لرص الصور بة) حسب الجزء المخصص لها
    ** الموازي لة بلغة ال html هو الجدول
    ثانيا : مما يتكون ال Contant ؟
    ** يتكون من header -Container-Footer
    عنوان الدرس :: توزيع الاستايل بلغة cass Pxll-1.300x300


    ثالثا : ما هو header ؟

    ** هو المكان العلوي بالموقع والذي يحتوي علي التصميم العلوي ( الصور التجميلية العلوية )



    رابعـــا: مما يتكون ال header ؟

    ** يتكون الهيدر من الصور التي قمت بتصميمها ثم تقطيعها ويتكون من صورة يمين hedr.right وصورة في المنتصف hedr.middl وصورة شمال hedr.left



    خامسا : مما يتكون ال Footer ؟

    ** يتكون الفوتر من الصور التي قمت بتصميمها ثم تقطيعها ويتكون من صورة يمين footr.right وصورة في المنتصف footer.middl وصورة شمال footer.left




    عنوان الدرس :: توزيع الاستايل بلغة cass Pxll-2




    ما هو ال Container ؟

    ** يتكون من الصورة للأعمدة (ان وجدت ) اليمين والشمال

    تتبع الصورة التالية


    عنوان الدرس :: توزيع الاستايل بلغة cass Pxll-3



    مصطلحات ستمر علينا :

    1- div وهو الوسم الذى سيتم التقسيم من خلالة .

    2- id معرف يتم تحديدة ويمكن ان ندرج تحتها عنده فئات .

    3- class الفئات وهى يمكن ان تكرر اكثر من مرة بنفس الصفحة ، على عكس المعرفات id .

    سنتعرف في الدرس التالي كيفية أدراج أكواد الهيدر والفوتر وعمل استايل بأستخدام الٍCSS

    الدرس الثاني


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

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

    عنوان الدرس :: توزيع الاستايل بلغة cass Css-By-ashour-1

    والصورة التالية توضح التقطيع اي تقطيع للأستايل

    عنوان الدرس :: توزيع الاستايل بلغة cass Css-By-ashour-2

    نيجي لأهم حاجة وهي Div -Id -Class


    يتم تعريف الـ id بوضع هاش ( # )

    يتم تعريف الـclass بوضع نقطة ( . )

    ويمكن أيضا للـ id والـ class ان يتضمنوا أكثر من تعريف او فئه جديدة بداخلة

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

    div = وهو الوسم الذى سيتم التقسيم من خلالة .
    id = معرف يتم تحديدة ويمكن تندرج تحدتها عنده فئات حيث تكون ثابتة لاتتكرر بالتصميم مثل الهيدر والفوتر .
    class = الفئات وهى يمكن ان تكرر اكثر من مرة بنفس الصفحة ، على عكس المعرفات id مثل الجوانب المتكررة راسيا في اتجاه (Y)حسب الاتجاهات المشروحة سابقا

    نييجي للتصميم
    أحنا قطعناه ل 9 صور
    4 هيدر و 2 أعمدة و 3 فوتر

    يبقي كدا من السهل كتابة الكود بتاع الاوسمة div وهي كالتالي

    عنوان الدرس :: توزيع الاستايل بلغة cass Css-By-ashour-3

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

    يبقي كدا نبدأندخل اكواد ال Style Css وهى تعريف قيم كل الفئات التى وضعناها في الوسوم div .

    كالتالي

    عنوان الدرس :: توزيع الاستايل بلغة cass Css-By-ashour-4

    لأدخال محتوي ال Container يتم كالتالي

    عنوان الدرس :: توزيع الاستايل بلغة cass Css-By-ashour-5

    شوف ال cONTAINER موجود فين هتلاقي ان لازم نعرف ال CONTAINER بخواص ال cSS

    يتم تعريف ال Container بأنة صندوق شامل مثل الجدول في ال Htmlوالذي يحتوي علي بقية التصميم من هيدر وفوتر وأعمدة وخلافة حسب تقطيعك للأستايل

    عنوان الدرس :: توزيع الاستايل بلغة cass Css-By-ashour-6

    كدا انتهينا من الContainer وظبطنا عرضة سواء محدد بالبكسل أو ممتد بالنسبة المأوية شوف بقي في كود ال style كتب اية

    عنوان الدرس :: توزيع الاستايل بلغة cass Css-By-ashour-7

    ننتقل لحاجة جديدة وهي الهيدر

    نضغط بردة لأضافة خصائص Css

    عنوان الدرس :: توزيع الاستايل بلغة cass Css-By-ashour-8

    يتم ادخالها كالتالي

    عنوان الدرس :: توزيع الاستايل بلغة cass Css-By-ashour-9


    عنوان الدرس :: توزيع الاستايل بلغة cass Css-By-ashour-10

    ويتم أدخال ما يحتوية Header بالشكل التالي

    header .right#
    header .left#
    header .midl#

    عنوان الدرس :: توزيع الاستايل بلغة cass Css-By-ashour-11
    ويتم أدخال جميع الصور بهذة الطريقة

    ونكرر الصورة في ناحية الشمال والصورة الوسطي بنفس الطريقة مع وضع ال Float =left في حالة الصورة الشمال

    ومفيش Float في الصورة الوسطي


    ويكرر العمل علي الفوتر كذلك

    نيجي للأعمدة


    shadowright. و shadowleft. قم بتعريف كل منهم كما بالصورة التالية .



    عنوان الدرس :: توزيع الاستايل بلغة cass Css-By-ashour-12


    in_container# بالنسبه لهذا المعرف لا نحتاج ان نضع فيه اى قيم حيث انه المكان الذى سيظهر فيه المنتدى ، اما في حاله تصميم المواقع ستوضع تعريف للخلفيه والخط ..



    مصطلحات مرت علينا في المثال :

    Background : هو التعريف العام للخلفيه سواء كانت صورة او لون فقط ويمكن من خلاله ان يستخدم لأكثر من وظيفه .
    background-color : لون الخلفية .
    background-image : صورة الخلفية .
    background-repeat : تكرار الخلفية .
    background-attachment : كيفية معالجة الخلفية .
    background-position : وضع الخلفية .

    Height : الطول .

    Width : العرض .

    Float : محاذاة العنصر .

    Padding : وهى تعرف بالعربيه ( الحواشي ) اى انها لعمل حاشية للعنصر او مسافة مـا ـ ويأثرعلى العنصر من الداخل .

    Margin : الهوامش وتؤثر على العنصر من الخارج بالنسبه للعناصر الأخري المجاورة .


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


    -**- طريقه وضع الاكواد الناتجه :

    /*/*/- كل مانتج من أكواد css سيتم وضعه بالإستايل فى تعاريف css الإضافية وتجدها بـ إعددات css رئيسي بلوحة تحكم المنتدى ـ وتحصل هذه الأكواد داخل الـ dreamweaver بين الوسمين


    ووضع أجزاء div كما في الصورة التالية


    عنوان الدرس :: توزيع الاستايل بلغة cass Ashour-linus

    في قالب الهيدر يوضع مباشرة قبل الكود ..

    $spacer_open

    $_phpinclude_output

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




    الي هنا انتهي الشغل بتاعنا وبكدانقدر نظبط الاستايل



    مهم ليس كل ما عرفتة هنا في الدرس يجعلك ملم بال css ولكن هناك علم رهيب يتكلم عن ال Css والجيل الجديد من المطورين



    برجاء عند نقل الموضوع ذكر أسم صاحب الموضوع اللي هو انا



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



    الدرس من
    http://www.traidnt.net/vb/showthread.php?t=951931
    </FONT></FONT>

      الوقت/التاريخ الآن هو الخميس مارس 28, 2024 3:08 pm