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

دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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

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

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

    دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    الحمد لله الّذى هدانا لهذا وما كنا لنتهدى لولا أن هدانا الله
    السلام عليكم



    المرحلة الرابعة
    صنع ملف الأنماط الانسيابية css
    - التصميم –
    فى بداية المرحلة سوف نجهز لها تقنيا ونظريا وعمليا ، فمن الناحية التقنية سوف نتطرق لنقاط يجب التنويه لها مثل كيفية قراءة المتصفحات الشهيرة لصفحات الانترنت منهم على سبيل المثال انترنت اكسبلورر – ولكل اصدار طريقته فى القراءة – ومنهم الفاير فوكس والجوجل كروم وسفارى وغيرهم
    كل متصفح مما سبق له طريقة تختلف عن طريقة بقية المتصفحات مع ملاحظة أن انترنت اكسبلورر له وحده عدة طرق لكل اصدار طريقة مثل الاصدار السادس انترنت اكسبلورر 6 والاصدار السابع والثامن كل اصدار له طريقة وبهذا تعتبر انترنت اكسبلورر وحدها عدة متصفحات وتحديدا 3 متصفحات كل منهم له طريقة تفكير أو طريقة قراءة،
    سوف أضع مثال صغير للناحية النظرية وأكمل بقية الشرح
    اذا قمت باستعراض صفحتك قبل وضع أى ستايل الآن ستجد كما فى هذه الصورة كمثال



    وهذه أيضا



    ستجد هناك اختلافا فى نوعية الخطوط وأحجامها
    الصورة الاولى من متصفح فاير فوكس والثانية من متصفح انترنت اكسبلورر 8
    وخلاف ذلك سنجد أمور كثيرة مختلفة لكننا لا نستخدمها الآن فى دورتنا وبمرور الوقت والخبرات سيتضح لك معظم الاختلافات بين المتصفحات وأسلوب قرائتها
    حسنا .....
    ماذا سنفعل لكى نتلاشى ذلك وماذا نفعل لكى نقهر أسلوب قراءة المتصفحات ونجبرهم على قراءة ما لدينا نحن من ستايلات ؟ وكيف نبدأ مرحلة التصميم من خلال الـ css
    الناحية العملية
    أولا : الغاء كل القيم والاكواد اللتى يستطيع أى متصفح من خلالها رؤية ما يريده ويقرر له استايل خاص بأسلوبه، والالغاء هنا بمعنى – تصفير كل القيم – أى جعلها صفر وذلك من خلال ملف reset ومعنى كلمة Reset معروف وهو اعادة ظبط
    ثانيا : وضع قيم جديدة ولا نترك القيم السابقة مصفرة – أى صفر – بل سنضع لها قيما تخصنا نحن
    وسنقسم العمل على ملفين واحد سنضع فيه قيم الغاء وآخر سنضع به قيما جديدة تخص الديزاين اللذى نستعد لتشكيله
    وسنسمى ملف الالغاء reset.css والملف الآخر layout.css
    قم بصنع مجلد جديد فى مجلدات العمل اللتى تحفظ فيها ما سبق وقمنا بعمله وهو الملف my new website
    قم بصنع ملف جديد بداخله وسميه style_folder بجوار المجلد images_folder
    ثم افتح النوت باد ++ وقم بنسخ التالى به واحفظ هذا الملف باسم reset.css كما ذكرنا


    [high]
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
    }
    body {
    line-height: 1;
    font-family: Tahoma;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }

    :focus {
    outline: 0;
    }

    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    [/high]


    لكن سأطالبك هذه المرة أن تقوم بنسخ الموجود هنا واحتفظ بالنسخة للتحميل لديك
    طريقة حفظ هذا الملف بصيغة css كالتالى
    من قائمة file قم باختيار save as ستفتح لك نافذة حفظ الملف قم باختيار الامتداد css كالتالى



    من خلال الملف السابق يتضح أننا قمنا بالغاء معظم أو تقريبا كل القيم والتاجات اللتى تهز ثقة المتصفحات وتجعلها قادرة على تغيير الاستايل
    نقوم الآن بوضعه فى صفحتنا لكى يعمل
    افتح default.htm الصفحة اللتى قمنا بتكويدها فى مرحلة التكويد وفى منطقة الهيد <head> قبل وسم اغلاقه قم بجلب الملف reset.css كالتالى

    كود HTML:
    <link rel="stylesheet" href="style_folder/reset.css" type="text/css" />
    لا نتسرع الآن ونغلقه بل سننتظر قليلا لنقوم بجلب ملف الاستايل الخاص بنا أيضا والمسمى layout.css
    قم بفتح ملف جديد فى النوت باد ++ واحفظه باسم layout وبصيغة css كما سبق وحفظنا
    reset.css




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

    [high]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>دورة بناء صفحات الانترنت</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="Original design: ayman essaied - http://www.real-idea.net" />
    <!--CSS-->
    <link rel="stylesheet" href="style_folder/layout.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style_folder/reset.css" type="text/css" />
    </head>
    [/high]


    افتح صفحتك الآن بأى مستعرض سوف تجد اختلافا كبيرا وستفهم تلقائيا ماللذى قمنا الآن بعمله بواسطة الـ reset



    ماذا الآن بعد اعادة ظبط – عملية الالغاء – اللتى قمنا بها منذ قليل وجلبنا الملفين reset.css و layout.css فى الصفحة ؟
    أعتقد أن الاجابة هى : أن ملف reset.css قد انتهت عمليته وتمت مهمته ولا حاجة لنا فى العمل عليه أكثر من ذلك، اذا فلنبدأ بالعمل فى ملف الاستايل الاساسى layout.css ونبدأ بوضع بعض البيانات الاساسية كالتالى

    [high]
    body {
    font-size:10px
    }
    a {
    color:#ffffff;
    }
    a:hover {
    color:#000000;
    }
    [/high]

    وضعنا حجم الفونت فى الصفحة

    – ملحوظة : قد يبدأ البعض بتخيل أن هذا الحجم سيكون بكل الصفحة لكن يمكننا أن نضع أحجام مختلفة كل على حسب الـ id أو الـ class أما هنا فلتتضح لنا رؤية الفونت قمت بوضع قيمته –
    ثم أخبرنا المتصفح أن جميع الروابط – اللينكات – المستخدمة لونها أبيض #ffffff وعند الوقوف عليها بالماوس hover سيكون لونها أسمر #000000
    بهذه الاسطر وضعنا معطيات لثلاثة أشياء فى الصفحة
    الفونت
    الروابط : ثابتة ومتحركة أى عند المرور عليها بالماوس وعند عدم المرور عليها بالماوس
    أرجوا مراجعة هذا الدرس سريعا فقط لمعرفة ماذا يعنيه كل من body و a هنا
    http://forums.cgway.net/cg31290/

    القسم الأول
    توسيط الصفحة
    containerdiv

    بالرجوع الى تكويد الصفحة default.htm سنجد أننا قمنا بوضع كامل الصفحة فى div وسميناه containerdiv لكى يحتوى على جميع أجزاء الصفحة من البانر والعمود الأيمن والأيسر والفوتر وهكذا
    اذا فلنقم بتوسيط الصفحة عن طريق إعطاء هذا الـ div قيمة auto أى توسيط تلقائى له دون كافة محتوياته
    كيف ذلك

    Margin:auto

    الـ margin يفسح المسافات بين العناصر وبعضها - من الخارج -



    القيمة auto تحدد تلقائيا كم ستكون المسافات حول كل الاضلع بنسب متشابهة، فاذا قمنا بإضافة كود الاستايل margin:auto للآيدى containerdiv فسيتم توسيطه مباشرة
    http://www.w3schools.com/CSS/css_margin.asp

    عرض الصفحة
    Width:950px

    بما أننا قمنا بالتصميم على هذه القيمة فيما يخص العرض فسنقوم باعطاء هذا الـ div أيضا قيمة العرض 950 بكسل وبهذا سوف يقوم المتصفح بحساب هذا العرض ويقوم بعمل margin للـ div بعد خصم هذه القيمة لذا كان لابد من إعطاؤه عرض ثابت 950 بكسل و margin لكى يتم توسيطه
    طريقة كتابة أكواد الاستايل للـ conainerdiv كالتالى


    [high]
    #containerdiv {
    margin: auto;
    width: 950px;
    }
    [/high]

    القسم الثانى
    الهيدر – البانر والقوائم الرئيسية –
    ماذا لدينا فى هذه المنطقة من الصفحة وتحديدا ماذا لدينا من آيديهات أو كلاسات ...؟
    لو راجعنا جزء التكويد سنجد أنه لدينا فى منطقة الهيدر header+banner+topmenu
    لن نستخدم الـ header حيث أننى قمت بصنعه وتكويده احتياطيا فى حالة اذا كنت سأقوم بعمل الهيدر على قسمين أو أن أقوم بعمل مسافة بينه وبين محتوى الصفحة من تحته فيكون لدي آيدي أستطيع حينها أن أقوم بوصف استايل له لكننى لم أقم بذلك.. فقط لن نقوم باضافة أكواد استايل له
    اذا لدينا البانر والقوائم متمثلين فى banner + topmenu
    وعندما كنا فى مرحلة التكويد لم أقم بوضع صورة البانر اطلاقا لأنني سأقوم الآن بوضعها هنا لذا يلزم أن أقوم بوضع عرض وارتفاع ثابتين للبانر ووضع خلفيه له اللتى هى عبارة عن صورة البانر header.jpg أو أيا كان مسماها لديك
    اذا البانر قبل اضافة أكواد الاستايل له كان كالتالى ثم أصبح له عرض وارتفاع




    والأكواد الخاصة لذلك كالتالى

    [high]
    #banner {
    background-image: url(../images_folder/header.jpg);
    height: 176px;
    margin: auto;
    }
    [/high]


    طبعا ستسألنى عن أول سطر وهو كيفية جلب الخلفية

    لدينا الخلفية فى مجلد الصور images_folder وملف layout.css موجود فى مجلد style_folder اذا يجب أن يكون مسار الصورة فى ملف الاستايل سليما والا لن تظهر الصورة ولذلك قلت لملف layout.css أن يتوجه للاعلى ثم يدخل ملف images_folder ثم يقوم بعرض صورة header.jpg
    ومن المعروف أن التوجه للاعلى بمعنى up حتى فى مجلدات الويندوز اذا أردت أن أخرج من المجلد ضغطت على up فأخرج المجلد اللذى كنت فيه مسبقا
    و up فى الويب تكتب نقطتين ثم شرطة مائلة /..

    القوائم

    القوائم بداخل div اسمه topmenu بداخله مجموعة أو صندوق القوائم ul بداخله عناصر القائمة li ، كيف أقوم بعمل الاستايل الخاص بها ؟؟

    Padding

    تعرفنا منذ قليل على margin وسنتعرف على أختها padding واللتى تقوم بنفس عملها لكن بالعكس أى من الداخل
    فهى تقوم بإفساح وتوسيع المسافات داخل العناصر
    أى أنه لو لدينا عنصر كمستطيل وبداخله عدة مستطيلات أصغر منه وأريد ابعاد المستطيلات الصغيرة عن حافة المستطيل الكبير أقوم باعطاء المستطيل الكبير كود الاستايل padding أى الازاحة – داخل حدود العنصر


    سأقوم أيضا بإعطاء topmenu خلفية لونية وأقوم بعمل margin له من الأعلى بحيث تكون المسافة بينه وبين البانر ظريفة نوعا ما مثل تصميمنا على الفوتوشوب

    [high]
    #topmenu {
    background-color: #356aa0;
    margin-top: 5px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    }
    [/high]

    طبعا لم أذكر من أين جئت بكود اللون وأعتقد أن معظمكم يعرف كيف يجلب كود لوني من الفوتوشوب لكن سأقوم بشرح ذلك سريعا

    فى الفوتوشوب ومن شريط الادوات على اليسار هناك الـ BackGround Color و ForGround Color قم بالضغط على أى منهما لتغيير لونه وقم بالمرور على المنطقة اللتى تريد أن تعرف الكود اللونى لها واضغط عليه وسيقوم البرنامج بكتابة الكود له فى الجزء السفلى من هذه النافذة



    شرح سريع لكود الاستايل السابق
    قمت بإزاحة العناصر بداخل topmenu من الأعلى والأسفل واليمين واليسار
    وقمت بتوسيع المسافة بينه وبين البانر ووضعت له خلفية لونية

    عناصر القائمة topmenu_li
    Display:inline
    عناصر القائمة لدينا فى مستوى أفقى واحد لذا لابد من ذكر ذلك فى ملف الاستايل فإذا لم أذكر ذلك قام المتصفح بعرضهم فى توافق عمودى وليس رأسى أو أفقى
    أحتاج أيضا أن يكون الخط أو الفونت ثقيل bold وأيضا سأقوم بتكبير حجمه
    كما سأقوم بتوسيع المسافات بينهم البعض حتى لا يكونوا متلاصقين وذلك عن طريق margin




    [high]
    .topmenu_li {
    font-size: 12px;
    font-weight: bold;
    display: inline;
    margin: 20px;
    }
    [/high]

    كل عنصر فى القوائم يبعد عن مثيله بمقدار 20 بكسل يمين ويسار اذا فكل عنصر بينه وبين مثيله 40 بكسل

    ومن الأعلى والأسفل 20 بكسل
    قم الآن باستعراض الصفحة بأى مستعرض ستجد أن الهيدر بالكامل قد تم تنسيقه بالشكل المطلوب اللذى يرضينا عن أدائنا فى هذه المرحلة حتى الآن

    القسم الثالث
    العمود الأيمن

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



    لكننى فضّلت أن أقوم بتكويد العمود الأيمن بالكامل منفصلا
    ما سبب المقدمة السابقة ؟؟ سببها أنى كنت أمهد لكيفية صنع أكواد الاستايل للعمودين الأيمن والأيسر سأذكر منهما هنا الجزء الخاص بالعمود الأيمن وعندما نصل للجزء الآخر للعمود الأيسر سوف أذكر أكواد الاستايل الخاص به
    بما أننى قمت بصنع عمود أيمن وعمود أيسر إذا : فسوف يأخذ العمود الأيمن width بالنسبة المئوية والآخر كذلك
    وسوف تكون النسبة المئوية للعمود الأيمن هنا 35%

    التعويم
    Float:right



    نظرا لأن العمود الأيمن على جهة اليمين فسوف نبلغ عن ذلك بإعطائه كود الاستايل float جهة اليمين
    وسوف نقوم أيضا باعطاء هذا العمود margin من الأعلى لكى تكون هناك مسافة مناسبة بينه وبين ما فوقه


    [high]
    #rightcol {
    float: right;
    width: 35%;
    margin-top: 5px;
    }
    [/high]


    أيقونة علامة الاستفهام siteslogan

    هل أنت معى إذا قلت لك لن نعطيها أى أكواد استايل الا أننا سوف نبعد الجزء اللذى سيكون أسفل منها بمقدار 5 بكسل ؟
    صورة الايقونة لها عرض وارتفاع وبهذا قد قامت بفرض مساحتها فى هذا المكان اللذى قمنا بوضع الكود الخاص بها فيه ، وبما أننا نعمل على RTL فسيكون وضع الصورة ملاصق للعمود اليمين من جهة اليمين وهذا ما نريده

    [high]
    .siteslogan {
    margin-bottom: 5px;
    }
    [/high]





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

    فى البداية سنجعل الخط ثقيل جدا bolder ونقوم بتوسيطه text-align:center واذا سألتنى كم سيكون حجم الخط سأجاوبك أنه سيكون 10 بكسل ، اذا من أين ؟ سأجاوب من كود استايل البودى اللذى قمنا فيه باعطاء حجم أى فونت مستخدم 10 بكسل فلا داعى أن أقوم هنا أيضا بإعطاء الفونت حجم..،
    العمود الأيمن
    اللذى أعطيناه width بمقدار 35% هو بمثابة 100% للعناصر بداخله، فسنقوم بإعطاء رؤوس العناوين width 90% من الـ 100% هذه لكى يكون عرضه بعرض العمود ويناسب التصميم اللذى قمنا بعمله على الفوتوشوب
    إذا لم نعطه padding الآن سيكون ملتصقا بالأعلى لذا يجب أن نعطيه padding أيضا ليتوسط التاج أفقيا كما قمنا بتوسيطه عموديا عن طريق text-align ، فلننظر لأكواد الاستايل

    [high]
    .rightcol_h3 {
    font-weight: bolder;
    text-align: center;
    background-color: #aadbf7;
    padding: 10px;
    width: 90%;
    }
    [/high]


    قم بتغيير قيم الـ
    width والـ padding بنفسك وسترى نتيجة غير مرضية ولن يكون كما صممناه بالفوتوشوب

    ستسألنى الآن
    س : كيف وفقت بين التصميم على الفوتوشوب وبين نظرتك لما سيكون عليه خلال مراحل التكويد والـ css
    ج : دراسة وخبرة وعشرة عمر
    من المفترض أنه عند النظر لتصميم ما فى الفوتوشوب أو فى أى مكان أن أقوم بتحليله تحليلا css's – سى اس اسيِّا –
    ثم تحليلا تكويديا قبل العمل
    محتوى كتابى p
    رؤوس عناوين h3
    صور img
    قوائم ul + li
    عمود يمين float:right
    وهكذا
    وهذه النظرة ستكلفك بقدر ما ستفيدك بأن تكون مصمم ويب محترف أو حتى معترف بتصميماته أو ينوى على ذلك
    وستساعدك على الخروج من بوتقة الجداول وحوارات – دوخينى يا لمونة – فى تصميمات الويب وأن تكون دائما قادرا على التعامل مع صفحات الويب الحديثة
    بناء صفحات الانترنت أمر سهل وبسيط وله عدة طرق منها معقد ومنها بسيط – كما أن التصميمات أيضا منها معقد جدا لا تستطيع أن تفك طلاسمه الا بتقطيع التصميم بطريقة الجداول القديمة لكى تستطيع أن تقدمه للويب ، ومن التصميمات أيضا ماهو بسيط ومعبر وقوى فى الهدف والمحتوى ويمكن تكويده بكل بساطه وحرفة ومهارة وتصبح معه قادرا على تخطى الاختبارات اللتى مررنا عليها لاختبار صلاحية صفحتنا للعرض
    ولكل مقام مقال – فهناك من يرى أن كل زر فى الصفحة لابد أن يكون أيقونة كلها تصميم وصور وشادو وفلتر
    وهناك من يرى أن الأمر أبسط من ذلك بكثير
    هناك من يرى أنه لابد لكل جزء فى الصفحة خلفية متدرجة الألوان – وهناك من يرى أن الأمر بسيط وتكفى خلفية بيضاء أو بلون آخر
    ملحوظة شديدة الأهمية : فى القريب العاجل سأشرح لكم طريقة عمل خلفية متدرجة للصفحة أو أى جزء فيها بدون استخدام أى صور فى التصميم ، فقط بالـ css
    هناك مصمم ويب يرى أن خلفية القوائم لابد وأن تكون مثلا نصفها شفاف ونصفها متدرج الالوان وهذا كثيرا ما يضيع فى النهاية ويضطر لأن يقوم بعمل الصفحة كلها عبارة عن مجموعة صور متراصة بجوار بعضها تعطى فى النهاية التصميم اللذى كان على الفوتوشوب
    وكثيرا ما نرى ذلك خاصة فى الصفحات الشخصية
    لكن بطريقتنا فى هذه الدورة أستطيع أن أقوم بمجرد النظر لأى تصميم أن أقوم بتقطيعه غيبيا

    نرجع لموضوعنا

    المحتوى الكتابىp

    سوف نقوم بتكبير حجم الخط وتنسيق المنظر عن طريق justify وإزاحته من اليسار ليناسب العمود ثم توسيع المسافة بين السطور
    هذا كل ما له وما عليه ، فلننظر فى أكواد الاستايل

    [high]
    .rightcol_p {
    font-size: 13px;
    line-height: 28px;
    text-align: justify;
    padding-left: 15px;
    }
    [/high]

    القسم الرابع
    العمود الأيسر



    بما أننا قمنا بعمل float:right للعمود اليمين سوف نقوم بكل تأكيد بعمل float:left للعمود اليسار – وبالمثل فكما قمنا باعطاء العمود الأيمن عرض 35% سوف نعطى العمود الأيسر بقية الـ 100%ليكون 65%

    فكرة بسيطة وليست معقدة
    لذا قمت بعمل عمودين كما قلت لكى أستطيع بناءا عليه تحديد معلومات الاستايل – CSS – بعد ذلك بكل سهولة وبساطه

    [high]
    #leftcol {
    float: left;
    width: 65%;
    margin-top: 5px;
    }
    [/high]


    بداخل هذا العمود الأيسر عدة عناصر

    --- الصور المتقلبة ---

    أولا سيكون هناك موضوع خاص بالجافا سكربت اللتى سنقوم بتركيبها هنا فى هذا المكان لكى يصبح لدينا امكانية وضع عدة صور بنفس المقاس وتكون متقلبة واحدة تلو الأخرى ، لكن بعد الانتهاء من جزئية الـ css لعدم التشتت ولأن التركيز مطلوب
    ولأن من المفترض أن تكون آخر مرحلة لأنها سوف تضايقنا أثناء عملية استعراض الصفحة كل مرة بعد تركيب استايل ما فى مرحلة الـ css
    ونظرا لأننا سنقوم بوضع جافا سكربت هنا فلن يكون هناك أكثر من ستايل واحد لهذا الـ div والمسمى javascript

    [high]
    #javascript {
    margin-bottom: 5px;
    }
    [/high]

    فقط margin من الأسفل لنبعد عنه الجزء السفلى

    --- القوائم ---

    أرجوا الانتباه والتركيز من الآن حتى ننتهى من القوائم ، لأنها سوف يتوقف عليها تكملتك الدورة معى أو المغادرة ثم ستقول " ياعم أنا ايه اللى دخلت نفسى فيه ده – أنا كان مالى ومال الويب "
    اذا كان هيبقى ده حالك وعايز تسيب الويب خالص لمجرد أننا دخلنا فى القوائم أنصحك بأن تحفظ هذه الأكواد القادمة فى ملف لديك على الكمبيوتر للرجوع اليها فيما بعد ولا يلزم حفظها فى رأسك

    التركيز

    نبدأ الآن...

    سنتكلم عن أول قائمة كمثال سيطبق عليه بقية عناصر القوائم كما بالتالى



    رابط – خدمات – هو الرابط الرئيسي لمجموعة القوائم اللتى تندرج تحته وهذه المجموعة مختفيه لا تظهر الا عند المرور بالماوس
    حتى الآن ممتاز فكيف سنخفى هذه المجموعة ؟؟
    سنستخدم أوامر أو أكواد الاستايل display و position ، الأول الظهور والثانى الموضع
    وسنستخدم للـ display طريقتين الأولى none أى عدم ظهور والثانية block أى بلوك أو ثابت وبهذين الأمرين سيكون الثابت ظاهر بعد تحرير المختفى عن طريق المرور بالماوس كمعادلة مادة الرياضيات تماما
    وسنستخدم للوضع position الوضع الثابت محله أو مكانه بالأمر absolute
    هذه هى المعادلة بكل بساطة لكن تحتاج إلى تركيز وفهم
    فالظهور display والموضع position يتم جمع قيمهما معا لينتج لدينا قائمة مخفية وأخرى ستظهر بعد المرور بالماوس
    نعيد هذه الجزئية مرة أخرى بطريقة أخرى
    سنعطى الـ ul اللتى تحتوى بداخلها على مجموعة قوائم أخرى نريدها مخفية سنعطيها position:absolute أى ثابتة لا تتحرك، وسنعطيها عدم ظهور عن طريق display:none ، هذه أول معادلة
    سنعطى عناصر القائمة اللتى بداخل الـ ul سنعطيها حاصل ضرب الـ display فى الـ position وهو display:block
    البلوك أو block تشابه القيمة absolute فى الهدف منها لكنها تأتى مع display ، وهذه ثانى معادلة
    احفظها أو افهمها لا فارق أو كنسلها بالكلية
    لنكمل نمذجة هذه القوائم سأعطيك الاكواد الخاصة بالاستايل كالتالى


    [high]
    /*تم التعديل*/
    .menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font-family:Tahoma,geneva,arial,helvetica,sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#ffffff;
    }
    .menu ul{
    background:#356AA0;
    height:43px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
    float:right;
    }
    .menu li a{
    color:#ffffff;
    display:block;
    font-weight:bold;
    line-height:43px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }
    .menu li a:hover{
    color:#000000;
    text-decoration:none;
    }
    .menu li ul{
    border-left:2px solid #0079b2;
    border-right:2px solid #0079b2;
    border-bottom:2px solid #0079b2;
    display:none;
    height:auto;
    filter:alpha(opacity=95);
    opacity:0.95;
    position:absolute;
    width:225px;
    z-index:200;
    margin-top : -5px;
    }
    .menu li:hover ul{
    display:block;
    }
    .menu li li {
    display:block;
    float:none;
    width:225px;
    }
    .menu li ul a{
    display:block;
    font-size:12px;
    font-style:normal;
    padding:0px 10px 0px 15px;
    text-align:right;
    }
    .menu li ul a:hover{
    background:#949494;
    color:#000000;
    opacity:1.0;
    filter:alpha(opacity=100);
    }
    .menu p{
    clear:right;
    }
    /*تم التعديل*/
    [/high]
    قم بنسخها وضعها فى ملف جديد بالنوت باد ++ ثم قم بحفظ هذا الملف باسم menu.css وبنفس الطريقة اللتى حفظنا بها ملفاتنا السابقة layout.css و reset.css
    الآن افتح ملف صفحتنا default.htm أو أيا كان مسماها عندك وفى تطبيقك، لنضع فى الهيد رابط جلب هذا الملف الجديد menu.css قبل نهاية تاج الـ head أيضا كما فعلنا فى المرحلة السابقة التكويد
    سيكون لديك الآن هذا الهيدر

    [high]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>دورة بناء صفحات الانترنت</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="Original design: ayman essaied - http://www.real-idea.net" />
    <!--CSS-->
    <link rel="stylesheet" href="style_folder/layout.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style_folder/reset.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="style_folder/menu.css" />
    </head>
    [/high]

    هذا الملف الجديد
    menu.css وهذه الاستايلات بداخله فكرتها بسيطة وهى تنسيق القوائم لتبدوا كما سترى عند استعراض الصفحة الآن
    بعض أكواد نوعية الفونت والبوردرات حول القوائم والالوان والخلفيات وجعل القوائم فى مستوى أفقي وبعض التنسيق
    كان المهم من هذه الاستايلات ما قمت بذكره ومن أجل التسهيل عليك قمت بتبسيط الموضوع من أجل الفهم
    وبعد الدورة بأمر الله تعالى ستكون هناك اسطوانة خاصة بالـ css فقط سيتم فيها وضع خريطة كاملة لكل أكواد الاستايلات وما يستخدم معها مع الأمثلة

    --- المحتوى الكتابى وصور الخدمات ---

    كما قمنا بعمل floating للعمودين الأيمن والأيسر هذا right وهذا left سنقوم هنا تماما بعمل نفس الأمر
    المحتوى الكتابى right وصور المنتجات left
    وتماما مثلما أعطيناهم width سنفعل هنا نفس الأمر
    ملحوظة هامة جدا : من خلال التكويد واللذى أعتبره فنا من فنون الويب أصبح باستطاعتى تكرير أمرين لعدة عناصر مختلفة لكنها تقع تحت نفس الاستايل من width و float

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

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

    [high]
    .floatright {
    float: right;
    width: 35%;
    }
    .floatleft {
    float: left;
    width: 65%;
    }
    [/high]

    هذه بداية تنسيق الاستايلات لمنطقة ما تحت القوائم بالكامل

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

    [high]
    .aboutcompany {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    font-style: italic;
    line-height: 35px;
    padding-right: 5px;
    }
    [/high]

    قمنا أيضا بعمل ازاحة من اليمين قليلا لتبعد الكتابة عن ملاصقة العمود الأيمن


    --- صور الخدمات ---

    هناك مشتركين فى الدورة اللذين قاموا بعمل تطبيقات بالفوتوشوب لم يتبعوا طريقة التصميم بالظبط واللتى كان تصميمها بناءا على النظرة كما ذكرت لأننى بكل تأكيد لدى خبرة عن موضوع التكويد ثم كيفية عمل ملف الـ css لها
    لذا قمت بتصميمها كما فعلت،
    لكن هناك من قاموا بوضع ثلاث صور خدمية فقط
    وهناك أيضا عضو مشترك قام مؤخرا بعمل ظلال – شادو – حول الـ 6 صور الخدمية
    كنت متيقنا أن هناك بعض التطبيقات لن تخلوا من الاختلاف
    لذا سأقوم بمعاونة هؤلاء وهؤلاء وسأقوم بعمل الأكواد بما يناسب 6 صور و 3 صور حتى أكون عادلا بين كل المشتركين بالدورة

    • فى حالة وجود 6 صور

    لو تلاحظ أن الصور عائمة لا شكل لها فكيف سنقوم بظبط الشكل العام ليناسب ما صممناه ؟
    فى البداية مجموعة الصور أصبحت على اليسار عن طريق float:left كما فعلنا منذ قليل، اذا فالـ div اللذى يحتويهم قام بتنسيق نفسه فى مستوى عمودى وبما أنه يأخذ width أيضا
    الصور أصبحت متلاصقه الآن
    ملحوظة : أنا هنا أعتمد أنك تطبق ورائى وفى كل جزئية تستعرض صفحتك لترى التغيير اللذى حدث فلا داعى لوضع صور تبين ما أقول فأعتقد أنه واضح جدا
    تخيل أن هناك استايل واحد فقط لهذه المجموعة من الصور ليتم تنسيقها ؟


    ***********************************************
    تكملة المرحلة
    .................................................

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

    [high]
    .mainimages {
    margin: 10px;
    }
    [/high]

    قام بالاجابة على السؤال الأخ حاتم جزاه الله خيرا
    * فى حالة وجود 3 صور

    [high]
    .mainimages {
    margin:10px 135px 10px 0;
    }
    [/high]

    وعلى حسب حجم صورك سيتم التغيير فى قيمة 135 لليمين
    أما فى حالة كنت تريد توسيع مكان الكتابة على اليمين فانصحك بعمل الآتى

    [high]
    .floatright {
    float: right;
    width: 55%;
    }
    .floatleft {
    float: left;
    width: 45%;
    }
    .mainimages {
    margin: 10px;
    }
    [/high]



    القسم الخامس
    الفوتر

    [high]
    #footer {
    background-color: #356aa0;
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
    clear: both;
    text-align: center;
    }
    #footer ul li {
    display : inline;
    margin-left : 10px;
    }
    [/high]


    قمنا بعمل خلفية بنفس لون القوائم كلها فى الصفحة ثم قمنا بازاحتها من الاعلى والاسفل بمقدار 20 ومن اليمين واليسار بمقدار 10 تماما مثلما فعلنا مع القوائم الرئيسية وقمنا بتوسيط الكتابة
    Clear:both
    فى حلة اذا كان لدينا ثلاثة عناصر داخل قسم معين فى الصفحة وليكن داخل
    div

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

    float

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





    قوائم الفوتر مثل بقية القوائم الا فى حجم الفونت
    قمنا بعرضها أفقيا عن طريق display:inline وابعادها من ناحية اليسار بقيمة 10 بكسل لكى نقوم بعمل مسافات بين القوائم وبعضها
    بهذا انتهت هذه المرحلة وفى انتظاركم فى الموضوع المثبت الخاص بالاسئلة العامة على كل مرحلة
    وفقنا الله واياكم


    ملحوظة كل الأكواد اللتى استخدمناها كالتالى قم بنسخها داخل layout.css

    [high]
    /*css*/
    body {
    font-size:10px
    }
    a {
    color:#ffffff;
    }
    a:hover {
    color:#000000;
    }
    #containerdiv {
    margin: auto;
    width: 950px;
    }
    #banner {
    background-image: url(../images_folder/header.jpg);
    height: 176px;
    margin: auto;
    }
    #topmenu {
    background-color: #356aa0;
    margin-top: 5px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    }
    .topmenu_li {
    font-size: 12px;
    font-weight: bold;
    display: inline;
    margin: 20px;
    }
    #rightcol {
    float: right;
    width: 35%;
    margin-top: 5px;
    }
    .siteslogan {
    margin-bottom: 5px;
    }
    .rightcol_h3 {
    font-weight: bolder;
    /* [disabled]height: 35px; */
    text-align: center;
    background-color: #aadbf7;
    padding: 10px;
    width: 90%;
    }
    .rightcol_p {
    font-size: 13px;
    line-height: 28px;
    text-align: justify;
    padding-left: 15px;
    }
    #leftcol {
    float: left;
    width: 65%;
    margin-top: 5px;
    }
    #javascript {
    margin-bottom: 5px;
    }
    .floatright {
    float: right;
    width: 35%;
    }
    .floatleft {
    float: left;
    width: 65%;
    }
    .aboutcompany {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    font-style: italic;
    line-height: 35px;
    padding-right: 5px;
    }
    .mainimages {
    margin: 10px;
    }
    #footer {
    background-color: #356aa0;
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
    clear: both;
    text-align: center;
    }
    #footer ul li {
    display : inline;
    margin-left : 10px;
    }
    [/high]

    التعديل الأخير تم بواسطة RealIdea ; 28 / 07 / 2010 الساعة 50 : 02 PM
    يحفظ العلم بالعمل به وتعليمه والتأليف فيه، ومن حفظه وكرره وذاكره ودرسه ثبت في صدره

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



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

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

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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

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

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

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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

  4. #4
    الصورة الرمزية osama
    مصمم متميز

    الحالة
    غير متصل
    تاريخ التسجيل
    Jul 2006
    الدولة
    مصر
    المشاركات
    1,386
    Thanks
    0
    Thanked 0 Times in 0 Posts
    الصور
    10
    معدل تقييم المستوى
    43

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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

  5. #5
    الصورة الرمزية Last Soul
    مصمم جديد

    الحالة
    غير متصل
    تاريخ التسجيل
    Feb 2009
    الدولة
    ....
    المشاركات
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    اقتباس المشاركة الأصلية كتبت بواسطة RealIdea مشاهدة المشاركة



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


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

    درس دسم جدااا ويحتاج لاعادة دراسة اكثر من مرة

    س1: على اي اساس اضع النسبة المئوية مع العلم ان العمود الايسر وضعته 65 % فكانت النتيجة نقل الصورة وما تحتها للأسفل فاضطررت لتقليل الى 64 % بالمحاولة والخطأ وكانت النتيجة سليمة

    س2: حاولت استخدام متصفح الفايرفوكس للمعاينة ولكن الصور لا تظهر به .. مع اني قمت بعمل reset.css

    --

    الاجابة مع الكود والملف كامل

    من هنــا

    وفقكم الرحمن

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

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

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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

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

    my new website.rar - 163 Kb

    كود:
    1. .menu li ul{
    2. border-left:2px solid #0079b2;
    3. border-right:2px solid #0079b2;
    4. border-bottom:2px solid #0079b2;
    5. display:none;
    6. height:auto;
    7. filter:alpha(opacity=95);
    8. opacity:0.95;
    9. position:absolute;
    10. width:225px;
    11. z-index:200;
    12. margin-top : -5px;
    13. }
    هذا الكود خاص بأي قائمة أستاذي الفاضل

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

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

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    اقتباس المشاركة الأصلية كتبت بواسطة hatemgoda مشاهدة المشاركة
    ماشاء الله درسك مميز كالعاده
    جارى التطبيق باذن الله
    منتظر تطبيقك
    اقتباس المشاركة الأصلية كتبت بواسطة محمد الحضرمي مشاهدة المشاركة
    السلام عليكم ورحمة الله وبركاته

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

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

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

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    اقتباس المشاركة الأصلية كتبت بواسطة Last Soul مشاهدة المشاركة
    بارك الله بك أخي

    درس دسم جدااا ويحتاج لاعادة دراسة اكثر من مرة

    س1: على اي اساس اضع النسبة المئوية مع العلم ان العمود الايسر وضعته 65 % فكانت النتيجة نقل الصورة وما تحتها للأسفل فاضطررت لتقليل الى 64 % بالمحاولة والخطأ وكانت النتيجة سليمة

    س2: حاولت استخدام متصفح الفايرفوكس للمعاينة ولكن الصور لا تظهر به .. مع اني قمت بعمل reset.css

    --

    الاجابة مع الكود والملف كامل

    من هنــا

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

    [high]
    <img src="F:\My Web Site\دورة انشاء موقع متكامل\images_folder/Gaza_02.jpg" alt="" />
    [/high]

    كيف سيفهم المتصفح أن الدرايف F لديكى على الكمبيوتر ؟؟!!
    أنا لم أقم بفعل ذلك على الاطلاق
    راجعى مرحلة التكويد يا أختى انتى والاخ بعدك فى الرد واللذى أخذ الكود منكى
    راجعى مرحلة التكويد كلها بدون تخطى كلمة واحدة

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

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

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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

  10. #10
    الصورة الرمزية Last Soul
    مصمم جديد

    الحالة
    غير متصل
    تاريخ التسجيل
    Feb 2009
    الدولة
    ....
    المشاركات
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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

    [high]
    <img src="F:\My Web Site\دورة انشاء موقع متكامل\images_folder/Gaza_02.jpg" alt="" />
    [/high]
    كيف سيفهم المتصفح أن الدرايف F لديكى على الكمبيوتر ؟؟!!
    أنا لم أقم بفعل ذلك على الاطلاق
    راجعى مرحلة التكويد يا أختى انتى والاخ بعدك فى الرد واللذى أخذ الكود منكى
    راجعى مرحلة التكويد كلها بدون تخطى كلمة واحدة

    ربي يجزيك الخير أخي لملاحظتك

    المشكلة كانت بالمرحلة الاولى للتكويد عندما أضع هالامتداد

    كود:
    <img src="images_folder/Gaza_02.jpg" alt="" />
    لم تظهر معي الصور ابدا فاضطررت الى وضع الامتداد بالكامل على الجهاز

    لا ادري الان كيف ظهر بالمتصفح مع تغير الامتداد لما ذكرت ؟!

    معذرة لهذا الخطأ و تم تعديل الكود من جديد حسب ملاحظتك .. هل ارسله ؟؟

    كما ان الصور ظهرت بمتصفح الفايرفوكس ولله الحمد

    ---

    ماذا عن اجابة السؤال هل هي سليمة أم لا ؟

    ربي يبارك بوقتك وصحتك

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

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

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    شكرا
    لكن والله عصرت مخى لكى أعدرف سؤالك اللذى قلتى عنه

    ماذا عن اجابة السؤال هل هي سليمة أم لا ؟

    ربي يبارك بوقتك وصحتك
    ماهو السؤال ؟ لم أراه فى الرد الأول
    لكن اذا كان عن طريقة تكويدك للصفحة
    ارسلى الملفات defauult.html و layout.css بالمرفقات
    لكى أحدد بعد تغييرك لمسارات الصور الآن

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

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

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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

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

    my new website.rar - 163 Kb

    كود:
    1. .menu li ul{
    2. border-left:2px solid #0079b2;
    3. border-right:2px solid #0079b2;
    4. border-bottom:2px solid #0079b2;
    5. display:none;
    6. height:auto;
    7. filter:alpha(opacity=95);
    8. opacity:0.95;
    9. position:absolute;
    10. width:225px;
    11. z-index:200;
    12. margin-top : -5px;
    13. }
    هذا الكود خاص بأي قائمة أستاذي الفاضل
    ارفع ملفاتك فى المرفقات فلم استطع أن أشاهدها الى الآن

    وبالنسبة لسؤالك عن هذه الاكواد الخاصة بالكلاس .menu li ul
    ماذا ترى فيه من أكواد الاستايل ؟
    اننا قمنا بعمل اخفاء للكلاس عن طريق display:none
    واذا راجعت الدرس فستعرف أننى قمت باخفاء هذه المجموعة وهذه هى أكواد الاستايل الخاصة بها
    راجع الدرس ثانية وقل لى ما وصلت له ومنتظرك ردك

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

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

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    هذه هي الملفات المرفقة

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

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

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    الاخ محمد الحضرمي
    لمزيد من شرح لسؤالك عن الكلاس شاهد الصورة



    اذا أردت كتاية استايل لعنصر لا يأخذ كلاس فى الصفحة أستطيع أن أقوم بجلبه من خلال التاج
    فأنا هنا قمت بكتابة استايل للعنصر ul من خلال العنصرين اللذى هو بداخلهما
    الـ ul بداخل li واللتى هى بداخل الكلاس menu
    فكان الترتيب كما هو موضح
    menu li ul


  15. #15
    الصورة الرمزية Last Soul
    مصمم جديد

    الحالة
    غير متصل
    تاريخ التسجيل
    Feb 2009
    الدولة
    ....
    المشاركات
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    اقتباس المشاركة الأصلية كتبت بواسطة RealIdea مشاهدة المشاركة
    شكرا
    لكن والله عصرت مخى لكى أعدرف سؤالك اللذى قلتى عنه


    ماهو السؤال ؟ لم أراه فى الرد الأول
    لكن اذا كان عن طريقة تكويدك للصفحة
    ارسلى الملفات defauult.html و layout.css بالمرفقات
    لكى أحدد بعد تغييرك لمسارات الصور الآن

    الله يكرمك استاذي

    اقصد السؤال الذي قمت انت بطرحه لنا كواجب بنهاية الدرس

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

    ---
    بالاضافة لهذا الاستفسار إن أمكن

    س1: على اي اساس اضع النسبة المئوية مع العلم ان العمود الايسر وضعته 65 % فكانت النتيجة نقل الصورة وما تحتها للأسفل فاضطررت لتقليل الى 64 % بالمحاولة والخطأ وكانت النتيجة سليمة
    هل تعتمد الطريقة على المحاولة والخطأ أم ان هناك قاعدة ما لها ؟

    وفقكم الرحمن


 

 
صفحة 1 من 3 123 الأخيرةالأخيرة

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

  1. دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 62
    آخر مشاركة: 24 / 01 / 2012, 41 : 08 PM
  2. دورة تعلم بناء صفحات الانترنت من الفوتوشوب إلى Html + CSS
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 81
    آخر مشاركة: 22 / 01 / 2012, 53 : 04 AM
  3. التصويت على تسجيل دورة تعلم بناء صفحات الانترنت بالفيديو
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 15
    آخر مشاركة: 04 / 12 / 2010, 54 : 04 AM
  4. دورة تعلم بناء صفحات الانترنت
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 38
    آخر مشاركة: 07 / 09 / 2010, 30 : 05 AM
  5. تطبيقات المشتركين فى دورة بناء صفحات الانترنت المرحلة الأولى - على الفوتوشوب -
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 12
    آخر مشاركة: 21 / 08 / 2010, 44 : 07 PM

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

المفضلات

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

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