Follow us on Facebook Follow us on Twitter Linked In Flickr Watch us on YouTube My Space Blogger
التسجيل
صفحة 4 من 5 الأولىالأولى 12345 الأخيرةالأخيرة
النتائج 46 إلى 60 من 63

دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

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

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

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

    رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

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


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

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

    رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

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

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



  3. #48
    الصورة الرمزية MOSTAFA3D
    احباب طريق الجرافيك

    الحالة
    غير متصل
    تاريخ التسجيل
    Aug 2007
    الدولة
    مصراوي في الكويت
    العمر
    31
    المشاركات
    3,630
    Thanks
    2
    Thanked 1 Time in 1 Post
    الصور
    4
    معدل تقييم المستوى
    101

    Lightbulb رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

    جزاكم الله خير أستاذ أيمن .. ولكن لي سؤال .... من أين نحصل على نوتباد ++ ؟؟
    ( إقرأوا القرآن فإنه يأتي يوم القيامة شفيعاً لأصحابه )

    إحفظ القرآن في سنة عالفيس بوك


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

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

    رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

    اقتباس المشاركة الأصلية كتبت بواسطة MOSTAFA3D مشاهدة المشاركة
    جزاكم الله خير أستاذ أيمن .. ولكن لي سؤال .... من أين نحصل على نوتباد ++ ؟؟
    جزانا واياكم
    ادخل على الرابط ده
    Download | 5.7
    ربنا يوفقك
    وأنا سعيد انك متابع
    ربنا يباركلك

  5. #50
    الصورة الرمزية مشمش
    مصمم مشارك

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

    Post رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

    ماشاء الله الموضوع اكتر من رائع وبجد جزاك الله كل خير
    لا تشغل فكرك فلربما ساءتك اوائل الامور وسرتك اخرها: كالسحاب أوله برق ورعد ، وآخره غيث هنيئ .

  6. #51
    مصمم جديد

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

    رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

    الموضوع لايظهر هل يوجد مشكله ما

  7. #52
    مصمم جديد

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

    رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

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




    ستلاحظ فى هذه الصورة أن تاج البانر سليم وهناك تظليل على بداية ونهاية التاج
    كما أنه يمككنا اختيار تاج معين محفوظ فى البرنامج أثناء التكويد من خلال الضغط على مفتاحى ctrl + space لتظهر لنا نافذة منسدلة بها كل الاوامر



    يمكنك الآن اتقان التعامل مع هذا البرنامج باتباع هذه الخطوات البسيطة قبل العمل
    افتح البرنامج وتوجه الى قائمة sittings ومنها الى preferences ثم اختر تبويب new document/default directory واذهب الى encoding واختر فتح الملفات دائما بفورمات UTF-8 without BOM وقم أيضا بتحديد Apply to opened ANSI files ثم close
    اذهب الى قائمة view ثم منها الى word wrap
    شكرا لك – لقد قمت الآن بما يجب عليك أن تفعله قبل البدأ فى فتح أى ملفات
    تأكيدا على ما قمت بعمله قم باغلاق البرنامج الآن ثم افتحه مرة أخرى
    قبل التكويد يجب أن نحفظ صور البانر وصورة علامة الاستفهام والصورة اللتى بجوارها والصورة الخاصة بالمنتجات أو العروض
    سنحفظ البانر باسم header.jpg وايقونة علامة الاستفهام باسم slogan.jpg والصورة اللتى بجوارها باسم java.jpg وصور المنتجات باسم imagemain.jpg



    ثم قم الآن بصنع مجلد لتضع فيه محتويات الموقع بالكامل على الديسك توب مثلا فى مجلد جديد وليكن اسمه my new website
    واصنع بداخله مجلد جديد وليكن اسمه images_folder وضع فيه الصور اللتى أخرجناها من الفوتوشوب منذ قليل فى الخطوة السابقة





    بخصوص التقطيع
    فأنا لم استخدم اداة التقطيع كى اخرج هذه الصور فكل الصور من خارج التصميم فى الاصل الا البانر قمنا بصنعه فى الفوتوشوب
    طريقة استخراج البانر لمن لا يعرف كيف يقوم بفصله عن التصميم كالتالى
    فى المرحلة الاولى من الدورة كنا قد اخترنا مقاس البانر من خلال أداة Rectangle Shape Tool بمقاسات 950 بكسل عرض فى 176 ارتفاع
    سوف نقوم الآن بمعل Canvas Size
    افتح ملف layout.psd فى الفوتوشوب وتوجه الى قائمة image ومنها الى canvas size ثم أختر أن يكون الـ width والـ hight بالكسل واترك الـ width كما هو 950 بكسل ثم غير قيمة الـ hight الى 176 بكسل واختر القطع من الاعلى من خلال الضغط على السهم الاوسط العلوى واضغط ok



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

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

    لدينا فى ملف العمل layers قمنا بتصميمها أو جلبها ووضعها فى ملف التصميم
    لدينا financial و icon? و image و image1 و image2 ...... وبقية اللايرات
    قم باختيار كل لاير تريد استخدامه فى الصفحة بعد ذلك مثل لاير financialثم اذهب الى قائمة Layer ومنها الى أمر New Layer Based Slice وسوف يقوم بتحديد اللاير وحده فى slice وهكذا بقية اللايرات المستخدمة فيصبح لدينا هنا عدد 8 slice ايقونة علامة الاستفهام وصورة financial وال 6 صور المتبقين





    احفظ هذه الصور الآن بالطريقة التالية
    من قائمة file اختر save for web and devices
    ومن النافذة الخاصة بها اختر نوعية الصور jpg



    ثم اضغط ok لتفتح لك نافذة مكان الحفظ احتر قبل الحفظ images only و ايضا all user slices لكى يقوم باستخراج ما قمت بتقطيعه فقط



    غير اسماء الصور الناتجة الى ما تريد وضعهم فى المجلد images_folder كما بالشرح بالاعلى


    مرحلة التكويد
    الجزء الأول : كتابة الهيدر

    - تعريف المتصفح بنوعية ملفك
    تعرضت لهذه النقطة بالخصوص فى مقال المجلة العدد الثانى حيث كنت أتكلم عن توافقية الصفحات مع المستعرضات بعنوان لماذا صلاحية صفحتك دائما invalid ، لكننا هنا سنزداد معرفة بمتطلبات w3 لتعريف صفحاتك قبل قراءة محتوياتها من طرف المتصفح، وتسمى هذه الجزئية بـ DOCTYPE أى نوعية الملف

    [high]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    [/high]
    الـ DOCTYPE من المفترض أن تكون فى أعلى أى صفحة وأول شيئ يتم كتابته قبل تاج <html> ، كما أنها ليست من ضمن لغة html بل هى أوامر أو تعليمات لمتصفح الويب تخبره عن إصدار الـ markup language لغة التكويد اللذى تستخدمه الصفحة ..
    هذا السطر يقوم بتعريف نوعية الملف Document Type Definition DTD واللتى بدورها تقوم بتحديد أوامر وقواعد اللغة المكتوب بها الصفحة لكى يقوم المتصفح بإظهارها لأجهزة العملاء – الزوار – بطريقة صحيحة
    - تجهيز الصفحة لتعرض اللغة العربية RTL بشكل سليم وطبيعى بدون مشاكل
    هناك قاعدة تحفظها كل المتصفحات وهى قاعدة الاتجاهات واللتى يكون الافتراضى لها هو LTR من اليسار بما أن لغة برمجة الويب باللغة الانجليزية ، فاذا لم تقم بابلاغ المتصفح باتجاهات تصميمك فسيقوم تلقائيا بالقراءة من جهة اليسار أولا
    ولا أقصد هنا التكست أو المحتوى فقط بل أيضا أقصد تكويد الصفحة نفسه ، فالمفترض أننى أقوم بكتابة العمود الأيسر أولا خلال التكويد لكن مع
    RTL
    أستطيع كتابة العمود الأيمن أولا



    ويمككنا كتابة الكود الخاص بذلك فى داخل تاج الـ html كالتالى


    [high] <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
    [/high]


    اذا هيدر الصفحة سيكون كالتالى
    [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">
    [/high]




    -
    بداية كتابة الهيد Head




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




    [high]
    <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" />
    </head>
    [/high]



    هذا الهيد يقوم باعطائنا
    - معلومات الترميز UTF-8 وهو الترميز العالمى لقراءة اللغات الغريبة - منها العربية - بطريقة صحيحة ،
    عنوان الصفحة اللذى يظهر للزائر فى شريط المتصفح بالأعلى وبالأسفل




    - وصف محتويات الصفحة وما تتكلم عنه وهو خاص بمحركات البحث لتقييم صفحتك
    - الكلمات المفتاحية اللتى يتم التركيز عليها أثناء قراءة صفحة من طرف أحد محركات البحث
    - اسم المؤلف وبياناته – وهو كود خاص بى ليس من الضرورى التقيد بكتابته –
    · تذكر أنه كلما كانت كلماتك المفتاحية قليلة كلما كانت هدفا لعناكب محركات البحث
    · سنأتى آجلا للـ HEAD ثانية لوضع معلومات ملفات الـ css اللتى سنقوم بصنعها فتذكر ذلك

    الجزء الثانى : تكويد محتوى الصفحة
    Body



    نذكر هنا بعض النقاط قبل البدأ
    تاج div اختصار division أى قسم وصفحتنا لها عدة أقسام أو div's منها أول قسم div يحتوى الموقع بالكامل وهو containerdiv يوضع بداخله جميع محتويات الموقع





    توضح الصورة السابقة مكان التقسيمات div's الموجودة بالصفحة
    لعمل القوائم سنستخدم دائما Unordered List لعمل عناصر القائمة List Items بداخلها






    للكتابة العادية سنستخدم البراجراف p

    ملاحظة هامة : الفرق بين الـ ID والـ CLASS
    الـ id مستقل بذاته لا يندرج تحت معرّف آخر ولا يندرج تحته فى الاستايل أى عنصر غيره
    الـ class يعطى كل عنصر تحته نفس الاستايل
    أى أنه لو لدينا عنصر أو div له id لا يستطيع عنصر آخر فى الصفحة أن يأخذ نفس الاستايل
    أما الكلاس فكل العناصر المسماه به تأخذ نفس الاستايل
    وقد قصدت أن أكتب هنا هذه الملحوظة كى لا نتفرق أو نتشتت عندما نستخدم الكلاسات أو الايديهات عند تكويد محتوى الصفحة

    القسم الأول : تكويد البانر

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


    [high]
    <div id="containerdiv">
    <div id="header">

    <div id="banner">

    </div><!-- end banner-->

    <div id="topmenu">
    <ul>
    <li class="topmenu_li"><a href="#">الصفحة الرئيسية</a></li>
    <li class="topmenu_li"><a href="#">خدمات الشركة</a></li>
    <li class="topmenu_li"><a href="#">نبذة عنا</a></li>
    <li class="topmenu_li"><a href="#">من نحن</a></li>
    <li class="topmenu_li"><a href="#">اتصل بنا</a></li>
    </ul>
    </div><!-- end top menu-->
    </div><!-- end header-->
    [/high]
    شرح الكود السابق
    فتحنا تاج containerdiv واللذى سنقوم باغلاقه فى نهاية التكويد للصفحة – ثم قمنا بفتح تاج الهيدرheader ووضعنا بداخله البانر مجرد تاج مفتوح ثم أغلقناه مباشرة بدون وضع أى تاجات بداخله وذلك لأننا سنقوم باعطائه خلفية وهى صورة البانر اللذى صممناه فلا حاجة أن نقوم بوضع أى أكواد بداخل هذا البانر فسيكون له قيم عرض وطول وهى قيم البانر 950 بكسل فى 176 بكسل
    بعد ذلك قمنا بفتح القائمة الرئيسية للموقع من خلال فتح تاج div المسمى topmenu لكى يتسنى لنا وضع مجموعة عناصر القائمة ul بداخله
    أما القوائم نفسها topmenu_li تأخذ نفس الـ class لكى نستطيع ارفاق ستايل لها كلها مرة واحدة فى نفس الوقت
    ثم أغلقنا القوائم والهيدر
    موضوع سهل وليس صعبا فبهذه الأكواد البسيطة قمنا بعمل القسم العلوى من الصفحة كاملا واللذى سيكون فيما بعد على هذا الشكل



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

    القسم الثانى : تكويد العمود الأيمن

    مجرد صورة وخمس عناوين وخمس مقاطع تكست وباختصار img-h3-p فقط ذلك
    سوف نعطى العمود الأيمن نفسه id ثم نعطى العناوين كلها نفس الـ class وأيضا التكست كالتالى

    [high]
    <div id="rightcol">
    <img src="images_folder/slogan.jpg" class="siteslogan" alt="" title="" />
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    </div><!-- end right col-->
    [/high]
    كان من الممكن أن لا أقوم باعطاء العناوين أى كلاسات ولا حتى التكست أقوم بوضع كلاس له لكن احتياطا فى حالة وجود عناوين أخرى h3 لنفس العمود فقمت بوضع كلاس لأحدد للاستايل أى العناوين سوف يندرج تحته
    فى جزئية صنع ملف الانماط الانسيابية css سوف نتعرض لشرح وافى لهذه النقطة

    حتى الان التكويد الكامل لما قمنا بعمله كالتالى قم بحفظه فى ملف داخل مجلد عملنا my new website
    [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" />
    </head>
    <body>
    <div id="containerdiv">

    <div id="header">

    <div id="banner">

    </div><!-- end banner-->

    <div id="topmenu">
    <ul>
    <li class="topmenu_li"><a href="#">الصفحة الرئيسية</a></li>
    <li class="topmenu_li"><a href="#">خدمات الشركة</a></li>
    <li class="topmenu_li"><a href="#">نبذة عنا</a></li>
    <li class="topmenu_li"><a href="#">من نحن</a></li>
    <li class="topmenu_li"><a href="#">اتصل بنا</a></li>
    </ul>
    </div><!-- end top menu-->
    </div><!-- end header-->

    <div id="rightcol">
    <img src="images_folder/slogan.jpg" class="siteslogan" alt="" title="" />
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    </div><!-- end right col-->
    [/high]




    المرحلة الثالثة
    القسم الثالث : تكويد العمود الأيسر



    العمود الأيسر عبارة عن 5 ديفات div سنسردهم بالتفصيل كيف يكون تكويدهم


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

    سنعتبر أن أول جزء فى العمود الأيسر وهو الصورة سيكون فيما بعد عبارة عن جافا سكربت يتم فيها تقليب عدد من الصور لذا سميت هذا الـ div بـ javascript استعدادا
    أو بمعنى آخر سنقوم الآن بوضع صورتنا هنا ولا يوجد جافا سنستخدمها
    - اعتبارا لمن لا يريد استخدام هذه الجزئية -


    [high]
    <div id="leftcol">

    <div id="javascript">
    <img src="images_folder/java.jpg" alt="" />
    </div><!-- end java script div-->
    [/high]


    فتحنا هنا تاج العمود الأيسر leftcol ثم تاج الجافا سكربت ووضعنا بداخله صورة ثم قفلنا تاج الجافا سكربت

    • القوائم




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

    [high]
    <div class="menu">
    <ul>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل</a></li>
    </ul>
    </div>
    [/high]

    تذكر أن الـ <ul> والـ </ul> هما بداية ونهاية مجموعة عناصر قوائم دائما والـ li هو عنصر القائمة وهنا قمنا بداخل عنصر القائمة li بوضع مجموعة عناصر ul لقوائم أخرى li ستكون كقوائم منسدلة عند الوقوف على هذا العنصر – عن طريق الـ css -





    • المحتوى الكتابى على اليمين

    سيوضع هذا المحتوى الكتابى فى div خاص به وسيأخذ الكلاس floatright وسبب أنه لم يأخذ id خاص به هو أننى فضلت أن أجعل كل ما سيأخذ الاتجاه اليمين الاجبارى فى الـ css يكون تحت نفس الكلاس بدلا من أن أصنع كل مرة id له نفس الاستايل
    وسنتعرض ونتعرف لهذا أكثر عند الدخول فى مرحلة الـ css وأرجوا من المشتركين فى الدورة اللذين ليس لهم خبرة سابقة بملفات الـ css أنت يذاكروا عنها ولو قليلا




    [high]
    <div class="floatright">
    <p class="aboutcompany">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.. فالوقت نعمة كبرى منَّ الله بها علينا،
    ولكن معظم الناس غافلون عن نعمة الوقت.
    وقد دأب بعض علماء الغرب على إصدار كتب حول إدارة الوقت،
    حققت هذه الكتب نسبة مبيعات عالية في العالم،
    بما يؤكد اهتمام الناس بهذا الجانب المهم وحرصهم على تعلم الجديد في فنّ استغلال الوقت واستثماره بأفضل صورة ممكنة،
    وبما يحقق مصالحهم وأهدافهم وبالنتيجة ليصلوا إلى السعادة التي يبحث عنها كل إنسان.
    ولكن لو تأملنا هذه الكتب نجد أنها تركز على هدف واحد هو الدنيا وزينتها،
    فمقياس النجاح لديهم هو ما يحققه المرء من مكاسب مادية أو شهرة أو سلطة،
    ولكنهم يتجاهلون فكرة بسيطة وهي المصير الذي ينتظر كل واحد منا بعد الموت،
    وهذه الفكرة كانت الخطوة الأولى التي جعلتني أتّجه نحو البحث والتأليف والتفكر والتدبر.
    </p>
    </div><!-- end div floated right-->
    [/high]


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

    • مجموعة الصور المعبرة عن المنتجات أو ما شابه

    لدينا 6 صور هنا لهم نفس معلومات الطول والعرض وكلهم على اليسار من التسكت – المحتوى الكتابى – سنضعهم فى div خاص بهم يأخذ الكلاس floatleft لكى يتجه ناحية اليسار اجباريا



    [high]
    <div class="floatleft">
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    </div><!-- end floated left div-->
    [/high]



    أعطيت أيضا كل الصور نفس الكلاس لاعطائهم نفس الاستايل فى الـ css

    • الفوتر


    به قائمتان حاليا يمكننا أن نصنع div بداخله مجموعة قوائم كالتالى
    وسنغلق هنا العمود الايسر ثم نغلق الـ containerdiv أيضا ثم الـ body ثم الـ html



    [high]
    <div id="footer">
    <ul>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Home Page</a></li>
    </ul>
    </div><!-- end footer div-->

    </div><!-- end left col-->

    </div><!-- end container div-->
    [/high]


    انتهينا الآن من تكويد كامل الصفحة عن طريق النوت باد++ ولكن هناك نقاط يجب أن نراجعها معا
    تكويد كامل الصفحة كالتالى الآن



    [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" />
    </head>
    <body>
    <div id="containerdiv">

    <div id="header">

    <div id="banner">

    </div><!-- end banner-->

    <div id="topmenu">
    <ul>
    <li class="topmenu_li"><a href="#">الصفحة الرئيسية</a></li>
    <li class="topmenu_li"><a href="#">خدمات الشركة</a></li>
    <li class="topmenu_li"><a href="#">نبذة عنا</a></li>
    <li class="topmenu_li"><a href="#">من نحن</a></li>
    <li class="topmenu_li"><a href="#">اتصل بنا</a></li>
    </ul>
    </div><!-- end top menu-->
    </div><!-- end header-->

    <div id="rightcol">
    <img src="images_folder/slogan.jpg" class="siteslogan" alt="" title="" />
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    </div><!-- end right col-->

    <div id="leftcol">

    <div id="javascript">
    <img src="images_folder/java.jpg" alt="" />
    </div><!-- end java script div-->



    <div class="menu">
    <ul>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل</a></li>
    </ul>
    </div>


    <div class="floatright">
    <p class="aboutcompany">
    لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن
    يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم..
    فالوقت نعمة كبرى منَّ الله بها علينا،
    ولكن معظم الناس غافلون عن نعمة الوقت.
    وقد دأب بعض علماء الغرب على إصدار كتب حول إدارة الوقت،
    حققت هذه الكتب نسبة مبيعات عالية في العالم،
    بما يؤكد اهتمام الناس بهذا الجانب المهم وحرصهم
    على تعلم الجديد في فنّ استغلال الوقت
    واستثماره بأفضل صورة ممكنة،
    وبما يحقق مصالحهم وأهدافهم وبالنتيجة
    ليصلوا إلى السعادة التي يبحث عنها كل إنسان.
    ولكن لو تأملنا هذه الكتب نجد أنها تركز
    على هدف واحد هو الدنيا وزينتها،
    فمقياس النجاح لديهم هو ما يحققه
    المرء من مكاسب مادية أو شهرة أو سلطة،
    ولكنهم يتجاهلون فكرة بسيطة وهي المصير
    الذي ينتظر كل واحد منا بعد الموت،
    وهذه الفكرة كانت الخطوة الأولى التي
    جعلتني أتّجه نحو البحث والتأليف والتفكر والتدبر.
    </p>
    </div><!-- end div floated right-->

    <div class="floatleft">
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    </div><!-- end floated left div-->

    <div id="footer">
    <ul>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Home Page</a></li>
    </ul>
    </div><!-- end footer div-->

    </div><!-- end left col-->

    </div><!-- end container div-->

    </body>
    </html>
    [/high]


    قم بحفظ الملف الآن فى مجلد العمل my new website بجوار مجلد images_folder
    باسم
    default.htm
    او اى مسمى تريده
    اقتباس للموضوع

  8. #53


    الصورة الرمزية 4MAX
    الإشراف العام

    الحالة
    غير متصل
    تاريخ التسجيل
    Jul 2009
    الدولة
    فى القلب
    العمر
    29
    المشاركات
    19,932
    Thanks
    983
    Thanked 241 Times in 199 Posts
    الصور
    6
    معدل تقييم المستوى
    462

    رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

    لا اعلم اخى الكريم ولكن اعتقد يوجد مشكله
    ان لله عبادا اختصهم لقضاء حوائج الناس
    حببهم للخير وحبب الخير لهم
    اولئك هم الامنون من عذاب الله يوم القيامه
    =====

    بروا آبائكم يبروكم أبنائكم




    ĎΞs!GŖ

    مركز طريق الجرافيك التعليمي

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

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

    رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

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

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

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

    رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

    ya po d sujet ici !! il est vide et merci !

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

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

    رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

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

  12. #57
    مصمم جديد

    الحالة
    غير متصل
    تاريخ التسجيل
    Nov 2007
    الدولة
    القاهرة
    المشاركات
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    Talking رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

    معلش يعنى بس الدرس مش ظاهر عندى اصلالالا
    مش باين خالص منين اجيبه

  13. #58

    الصورة الرمزية waleed_ali
    مشرف القسم العام والإسلامي

    الحالة
    غير متصل
    تاريخ التسجيل
    Jan 2010
    الدولة
    A, A
    المشاركات
    20,140
    Thanks
    587
    Thanked 288 Times in 256 Posts
    الصور
    21
    معدل تقييم المستوى
    433

    رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

    lمجهود ممتاز اخى الفاضل

  14. #59
    مصمم جديد

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

    رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

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




    ستلاحظ فى هذه الصورة أن تاج البانر سليم وهناك تظليل على بداية ونهاية التاج
    كما أنه يمككنا اختيار تاج معين محفوظ فى البرنامج أثناء التكويد من خلال الضغط على مفتاحى ctrl + space لتظهر لنا نافذة منسدلة بها كل الاوامر



    يمكنك الآن اتقان التعامل مع هذا البرنامج باتباع هذه الخطوات البسيطة قبل العمل
    افتح البرنامج وتوجه الى قائمة sittings ومنها الى preferences ثم اختر تبويب new document/default directory واذهب الى encoding واختر فتح الملفات دائما بفورمات UTF-8 without BOM وقم أيضا بتحديد Apply to opened ANSI files ثم close
    اذهب الى قائمة view ثم منها الى word wrap
    شكرا لك – لقد قمت الآن بما يجب عليك أن تفعله قبل البدأ فى فتح أى ملفات
    تأكيدا على ما قمت بعمله قم باغلاق البرنامج الآن ثم افتحه مرة أخرى
    قبل التكويد يجب أن نحفظ صور البانر وصورة علامة الاستفهام والصورة اللتى بجوارها والصورة الخاصة بالمنتجات أو العروض
    سنحفظ البانر باسم header.jpg وايقونة علامة الاستفهام باسم slogan.jpg والصورة اللتى بجوارها باسم java.jpg وصور المنتجات باسم imagemain.jpg



    ثم قم الآن بصنع مجلد لتضع فيه محتويات الموقع بالكامل على الديسك توب مثلا فى مجلد جديد وليكن اسمه my new website
    واصنع بداخله مجلد جديد وليكن اسمه images_folder وضع فيه الصور اللتى أخرجناها من الفوتوشوب منذ قليل فى الخطوة السابقة





    بخصوص التقطيع
    فأنا لم استخدم اداة التقطيع كى اخرج هذه الصور فكل الصور من خارج التصميم فى الاصل الا البانر قمنا بصنعه فى الفوتوشوب
    طريقة استخراج البانر لمن لا يعرف كيف يقوم بفصله عن التصميم كالتالى
    فى المرحلة الاولى من الدورة كنا قد اخترنا مقاس البانر من خلال أداة Rectangle Shape Tool بمقاسات 950 بكسل عرض فى 176 ارتفاع
    سوف نقوم الآن بمعل Canvas Size
    افتح ملف layout.psd فى الفوتوشوب وتوجه الى قائمة image ومنها الى canvas size ثم أختر أن يكون الـ width والـ hight بالكسل واترك الـ width كما هو 950 بكسل ثم غير قيمة الـ hight الى 176 بكسل واختر القطع من الاعلى من خلال الضغط على السهم الاوسط العلوى واضغط ok



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

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

    لدينا فى ملف العمل layers قمنا بتصميمها أو جلبها ووضعها فى ملف التصميم
    لدينا financial و icon? و image و image1 و image2 ...... وبقية اللايرات
    قم باختيار كل لاير تريد استخدامه فى الصفحة بعد ذلك مثل لاير financialثم اذهب الى قائمة Layer ومنها الى أمر New Layer Based Slice وسوف يقوم بتحديد اللاير وحده فى slice وهكذا بقية اللايرات المستخدمة فيصبح لدينا هنا عدد 8 slice ايقونة علامة الاستفهام وصورة financial وال 6 صور المتبقين





    احفظ هذه الصور الآن بالطريقة التالية
    من قائمة file اختر save for web and devices
    ومن النافذة الخاصة بها اختر نوعية الصور jpg



    ثم اضغط ok لتفتح لك نافذة مكان الحفظ احتر قبل الحفظ images only و ايضا all user slices لكى يقوم باستخراج ما قمت بتقطيعه فقط



    غير اسماء الصور الناتجة الى ما تريد وضعهم فى المجلد images_folder كما بالشرح بالاعلى


    مرحلة التكويد
    الجزء الأول : كتابة الهيدر

    - تعريف المتصفح بنوعية ملفك
    تعرضت لهذه النقطة بالخصوص فى مقال المجلة العدد الثانى حيث كنت أتكلم عن توافقية الصفحات مع المستعرضات بعنوان لماذا صلاحية صفحتك دائما invalid ، لكننا هنا سنزداد معرفة بمتطلبات w3 لتعريف صفحاتك قبل قراءة محتوياتها من طرف المتصفح، وتسمى هذه الجزئية بـ DOCTYPE أى نوعية الملف

    [high]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    [/high]
    الـ DOCTYPE من المفترض أن تكون فى أعلى أى صفحة وأول شيئ يتم كتابته قبل تاج <html> ، كما أنها ليست من ضمن لغة html بل هى أوامر أو تعليمات لمتصفح الويب تخبره عن إصدار الـ markup language لغة التكويد اللذى تستخدمه الصفحة ..
    هذا السطر يقوم بتعريف نوعية الملف Document Type Definition DTD واللتى بدورها تقوم بتحديد أوامر وقواعد اللغة المكتوب بها الصفحة لكى يقوم المتصفح بإظهارها لأجهزة العملاء – الزوار – بطريقة صحيحة
    - تجهيز الصفحة لتعرض اللغة العربية RTL بشكل سليم وطبيعى بدون مشاكل
    هناك قاعدة تحفظها كل المتصفحات وهى قاعدة الاتجاهات واللتى يكون الافتراضى لها هو LTR من اليسار بما أن لغة برمجة الويب باللغة الانجليزية ، فاذا لم تقم بابلاغ المتصفح باتجاهات تصميمك فسيقوم تلقائيا بالقراءة من جهة اليسار أولا
    ولا أقصد هنا التكست أو المحتوى فقط بل أيضا أقصد تكويد الصفحة نفسه ، فالمفترض أننى أقوم بكتابة العمود الأيسر أولا خلال التكويد لكن مع
    RTL
    أستطيع كتابة العمود الأيمن أولا



    ويمككنا كتابة الكود الخاص بذلك فى داخل تاج الـ html كالتالى


    [high] <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
    [/high]


    اذا هيدر الصفحة سيكون كالتالى
    [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">
    [/high]




    -
    بداية كتابة الهيد Head




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




    [high]
    <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" />
    </head>
    [/high]



    هذا الهيد يقوم باعطائنا
    - معلومات الترميز UTF-8 وهو الترميز العالمى لقراءة اللغات الغريبة - منها العربية - بطريقة صحيحة ،
    عنوان الصفحة اللذى يظهر للزائر فى شريط المتصفح بالأعلى وبالأسفل




    - وصف محتويات الصفحة وما تتكلم عنه وهو خاص بمحركات البحث لتقييم صفحتك
    - الكلمات المفتاحية اللتى يتم التركيز عليها أثناء قراءة صفحة من طرف أحد محركات البحث
    - اسم المؤلف وبياناته – وهو كود خاص بى ليس من الضرورى التقيد بكتابته –
    · تذكر أنه كلما كانت كلماتك المفتاحية قليلة كلما كانت هدفا لعناكب محركات البحث
    · سنأتى آجلا للـ HEAD ثانية لوضع معلومات ملفات الـ css اللتى سنقوم بصنعها فتذكر ذلك

    الجزء الثانى : تكويد محتوى الصفحة
    Body



    نذكر هنا بعض النقاط قبل البدأ
    تاج div اختصار division أى قسم وصفحتنا لها عدة أقسام أو div's منها أول قسم div يحتوى الموقع بالكامل وهو containerdiv يوضع بداخله جميع محتويات الموقع





    توضح الصورة السابقة مكان التقسيمات div's الموجودة بالصفحة
    لعمل القوائم سنستخدم دائما Unordered List لعمل عناصر القائمة List Items بداخلها






    للكتابة العادية سنستخدم البراجراف p

    ملاحظة هامة : الفرق بين الـ ID والـ CLASS
    الـ id مستقل بذاته لا يندرج تحت معرّف آخر ولا يندرج تحته فى الاستايل أى عنصر غيره
    الـ class يعطى كل عنصر تحته نفس الاستايل
    أى أنه لو لدينا عنصر أو div له id لا يستطيع عنصر آخر فى الصفحة أن يأخذ نفس الاستايل
    أما الكلاس فكل العناصر المسماه به تأخذ نفس الاستايل
    وقد قصدت أن أكتب هنا هذه الملحوظة كى لا نتفرق أو نتشتت عندما نستخدم الكلاسات أو الايديهات عند تكويد محتوى الصفحة

    القسم الأول : تكويد البانر

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


    [high]
    <div id="containerdiv">
    <div id="header">

    <div id="banner">

    </div><!-- end banner-->

    <div id="topmenu">
    <ul>
    <li class="topmenu_li"><a href="#">الصفحة الرئيسية</a></li>
    <li class="topmenu_li"><a href="#">خدمات الشركة</a></li>
    <li class="topmenu_li"><a href="#">نبذة عنا</a></li>
    <li class="topmenu_li"><a href="#">من نحن</a></li>
    <li class="topmenu_li"><a href="#">اتصل بنا</a></li>
    </ul>
    </div><!-- end top menu-->
    </div><!-- end header-->
    [/high]
    شرح الكود السابق
    فتحنا تاج containerdiv واللذى سنقوم باغلاقه فى نهاية التكويد للصفحة – ثم قمنا بفتح تاج الهيدرheader ووضعنا بداخله البانر مجرد تاج مفتوح ثم أغلقناه مباشرة بدون وضع أى تاجات بداخله وذلك لأننا سنقوم باعطائه خلفية وهى صورة البانر اللذى صممناه فلا حاجة أن نقوم بوضع أى أكواد بداخل هذا البانر فسيكون له قيم عرض وطول وهى قيم البانر 950 بكسل فى 176 بكسل
    بعد ذلك قمنا بفتح القائمة الرئيسية للموقع من خلال فتح تاج div المسمى topmenu لكى يتسنى لنا وضع مجموعة عناصر القائمة ul بداخله
    أما القوائم نفسها topmenu_li تأخذ نفس الـ class لكى نستطيع ارفاق ستايل لها كلها مرة واحدة فى نفس الوقت
    ثم أغلقنا القوائم والهيدر
    موضوع سهل وليس صعبا فبهذه الأكواد البسيطة قمنا بعمل القسم العلوى من الصفحة كاملا واللذى سيكون فيما بعد على هذا الشكل



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

    القسم الثانى : تكويد العمود الأيمن

    مجرد صورة وخمس عناوين وخمس مقاطع تكست وباختصار img-h3-p فقط ذلك
    سوف نعطى العمود الأيمن نفسه id ثم نعطى العناوين كلها نفس الـ class وأيضا التكست كالتالى

    [high]
    <div id="rightcol">
    <img src="images_folder/slogan.jpg" class="siteslogan" alt="" title="" />
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    </div><!-- end right col-->
    [/high]
    كان من الممكن أن لا أقوم باعطاء العناوين أى كلاسات ولا حتى التكست أقوم بوضع كلاس له لكن احتياطا فى حالة وجود عناوين أخرى h3 لنفس العمود فقمت بوضع كلاس لأحدد للاستايل أى العناوين سوف يندرج تحته
    فى جزئية صنع ملف الانماط الانسيابية css سوف نتعرض لشرح وافى لهذه النقطة

    حتى الان التكويد الكامل لما قمنا بعمله كالتالى قم بحفظه فى ملف داخل مجلد عملنا my new website
    [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" />
    </head>
    <body>
    <div id="containerdiv">

    <div id="header">

    <div id="banner">

    </div><!-- end banner-->

    <div id="topmenu">
    <ul>
    <li class="topmenu_li"><a href="#">الصفحة الرئيسية</a></li>
    <li class="topmenu_li"><a href="#">خدمات الشركة</a></li>
    <li class="topmenu_li"><a href="#">نبذة عنا</a></li>
    <li class="topmenu_li"><a href="#">من نحن</a></li>
    <li class="topmenu_li"><a href="#">اتصل بنا</a></li>
    </ul>
    </div><!-- end top menu-->
    </div><!-- end header-->

    <div id="rightcol">
    <img src="images_folder/slogan.jpg" class="siteslogan" alt="" title="" />
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    </div><!-- end right col-->
    [/high]




    المرحلة الثالثة
    القسم الثالث : تكويد العمود الأيسر



    العمود الأيسر عبارة عن 5 ديفات div سنسردهم بالتفصيل كيف يكون تكويدهم


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

    سنعتبر أن أول جزء فى العمود الأيسر وهو الصورة سيكون فيما بعد عبارة عن جافا سكربت يتم فيها تقليب عدد من الصور لذا سميت هذا الـ div بـ javascript استعدادا
    أو بمعنى آخر سنقوم الآن بوضع صورتنا هنا ولا يوجد جافا سنستخدمها
    - اعتبارا لمن لا يريد استخدام هذه الجزئية -


    [high]
    <div id="leftcol">

    <div id="javascript">
    <img src="images_folder/java.jpg" alt="" />
    </div><!-- end java script div-->
    [/high]


    فتحنا هنا تاج العمود الأيسر leftcol ثم تاج الجافا سكربت ووضعنا بداخله صورة ثم قفلنا تاج الجافا سكربت

    • القوائم




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

    [high]
    <div class="menu">
    <ul>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل</a></li>
    </ul>
    </div>
    [/high]

    تذكر أن الـ <ul> والـ </ul> هما بداية ونهاية مجموعة عناصر قوائم دائما والـ li هو عنصر القائمة وهنا قمنا بداخل عنصر القائمة li بوضع مجموعة عناصر ul لقوائم أخرى li ستكون كقوائم منسدلة عند الوقوف على هذا العنصر – عن طريق الـ css -





    • المحتوى الكتابى على اليمين

    سيوضع هذا المحتوى الكتابى فى div خاص به وسيأخذ الكلاس floatright وسبب أنه لم يأخذ id خاص به هو أننى فضلت أن أجعل كل ما سيأخذ الاتجاه اليمين الاجبارى فى الـ css يكون تحت نفس الكلاس بدلا من أن أصنع كل مرة id له نفس الاستايل
    وسنتعرض ونتعرف لهذا أكثر عند الدخول فى مرحلة الـ css وأرجوا من المشتركين فى الدورة اللذين ليس لهم خبرة سابقة بملفات الـ css أنت يذاكروا عنها ولو قليلا




    [high]
    <div class="floatright">
    <p class="aboutcompany">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.. فالوقت نعمة كبرى منَّ الله بها علينا،
    ولكن معظم الناس غافلون عن نعمة الوقت.
    وقد دأب بعض علماء الغرب على إصدار كتب حول إدارة الوقت،
    حققت هذه الكتب نسبة مبيعات عالية في العالم،
    بما يؤكد اهتمام الناس بهذا الجانب المهم وحرصهم على تعلم الجديد في فنّ استغلال الوقت واستثماره بأفضل صورة ممكنة،
    وبما يحقق مصالحهم وأهدافهم وبالنتيجة ليصلوا إلى السعادة التي يبحث عنها كل إنسان.
    ولكن لو تأملنا هذه الكتب نجد أنها تركز على هدف واحد هو الدنيا وزينتها،
    فمقياس النجاح لديهم هو ما يحققه المرء من مكاسب مادية أو شهرة أو سلطة،
    ولكنهم يتجاهلون فكرة بسيطة وهي المصير الذي ينتظر كل واحد منا بعد الموت،
    وهذه الفكرة كانت الخطوة الأولى التي جعلتني أتّجه نحو البحث والتأليف والتفكر والتدبر.
    </p>
    </div><!-- end div floated right-->
    [/high]


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

    • مجموعة الصور المعبرة عن المنتجات أو ما شابه

    لدينا 6 صور هنا لهم نفس معلومات الطول والعرض وكلهم على اليسار من التسكت – المحتوى الكتابى – سنضعهم فى div خاص بهم يأخذ الكلاس floatleft لكى يتجه ناحية اليسار اجباريا



    [high]
    <div class="floatleft">
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    </div><!-- end floated left div-->
    [/high]



    أعطيت أيضا كل الصور نفس الكلاس لاعطائهم نفس الاستايل فى الـ css

    • الفوتر


    به قائمتان حاليا يمكننا أن نصنع div بداخله مجموعة قوائم كالتالى
    وسنغلق هنا العمود الايسر ثم نغلق الـ containerdiv أيضا ثم الـ body ثم الـ html



    [high]
    <div id="footer">
    <ul>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Home Page</a></li>
    </ul>
    </div><!-- end footer div-->

    </div><!-- end left col-->

    </div><!-- end container div-->
    [/high]


    انتهينا الآن من تكويد كامل الصفحة عن طريق النوت باد++ ولكن هناك نقاط يجب أن نراجعها معا
    تكويد كامل الصفحة كالتالى الآن



    [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" />
    </head>
    <body>
    <div id="containerdiv">

    <div id="header">

    <div id="banner">

    </div><!-- end banner-->

    <div id="topmenu">
    <ul>
    <li class="topmenu_li"><a href="#">الصفحة الرئيسية</a></li>
    <li class="topmenu_li"><a href="#">خدمات الشركة</a></li>
    <li class="topmenu_li"><a href="#">نبذة عنا</a></li>
    <li class="topmenu_li"><a href="#">من نحن</a></li>
    <li class="topmenu_li"><a href="#">اتصل بنا</a></li>
    </ul>
    </div><!-- end top menu-->
    </div><!-- end header-->

    <div id="rightcol">
    <img src="images_folder/slogan.jpg" class="siteslogan" alt="" title="" />
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    </div><!-- end right col-->

    <div id="leftcol">

    <div id="javascript">
    <img src="images_folder/java.jpg" alt="" />
    </div><!-- end java script div-->



    <div class="menu">
    <ul>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل</a></li>
    </ul>
    </div>


    <div class="floatright">
    <p class="aboutcompany">
    لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن
    يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم..
    فالوقت نعمة كبرى منَّ الله بها علينا،
    ولكن معظم الناس غافلون عن نعمة الوقت.
    وقد دأب بعض علماء الغرب على إصدار كتب حول إدارة الوقت،
    حققت هذه الكتب نسبة مبيعات عالية في العالم،
    بما يؤكد اهتمام الناس بهذا الجانب المهم وحرصهم
    على تعلم الجديد في فنّ استغلال الوقت
    واستثماره بأفضل صورة ممكنة،
    وبما يحقق مصالحهم وأهدافهم وبالنتيجة
    ليصلوا إلى السعادة التي يبحث عنها كل إنسان.
    ولكن لو تأملنا هذه الكتب نجد أنها تركز
    على هدف واحد هو الدنيا وزينتها،
    فمقياس النجاح لديهم هو ما يحققه
    المرء من مكاسب مادية أو شهرة أو سلطة،
    ولكنهم يتجاهلون فكرة بسيطة وهي المصير
    الذي ينتظر كل واحد منا بعد الموت،
    وهذه الفكرة كانت الخطوة الأولى التي
    جعلتني أتّجه نحو البحث والتأليف والتفكر والتدبر.
    </p>
    </div><!-- end div floated right-->

    <div class="floatleft">
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    </div><!-- end floated left div-->

    <div id="footer">
    <ul>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Home Page</a></li>
    </ul>
    </div><!-- end footer div-->

    </div><!-- end left col-->

    </div><!-- end container div-->

    </body>
    </html>
    [/high]


    قم بحفظ الملف الآن فى مجلد العمل my new website بجوار مجلد images_folder
    باسم
    default.htm
    او اى مسمى تريده
    جزاك الله خير على هذه الدوره

  15. #60
    مصمم جديد

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

    رد: دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -

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




    ستلاحظ فى هذه الصورة أن تاج البانر سليم وهناك تظليل على بداية ونهاية التاج
    كما أنه يمككنا اختيار تاج معين محفوظ فى البرنامج أثناء التكويد من خلال الضغط على مفتاحى ctrl + space لتظهر لنا نافذة منسدلة بها كل الاوامر



    يمكنك الآن اتقان التعامل مع هذا البرنامج باتباع هذه الخطوات البسيطة قبل العمل
    افتح البرنامج وتوجه الى قائمة sittings ومنها الى preferences ثم اختر تبويب new document/default directory واذهب الى encoding واختر فتح الملفات دائما بفورمات UTF-8 without BOM وقم أيضا بتحديد Apply to opened ANSI files ثم close
    اذهب الى قائمة view ثم منها الى word wrap
    شكرا لك – لقد قمت الآن بما يجب عليك أن تفعله قبل البدأ فى فتح أى ملفات
    تأكيدا على ما قمت بعمله قم باغلاق البرنامج الآن ثم افتحه مرة أخرى
    قبل التكويد يجب أن نحفظ صور البانر وصورة علامة الاستفهام والصورة اللتى بجوارها والصورة الخاصة بالمنتجات أو العروض
    سنحفظ البانر باسم header.jpg وايقونة علامة الاستفهام باسم slogan.jpg والصورة اللتى بجوارها باسم java.jpg وصور المنتجات باسم imagemain.jpg



    ثم قم الآن بصنع مجلد لتضع فيه محتويات الموقع بالكامل على الديسك توب مثلا فى مجلد جديد وليكن اسمه my new website
    واصنع بداخله مجلد جديد وليكن اسمه images_folder وضع فيه الصور اللتى أخرجناها من الفوتوشوب منذ قليل فى الخطوة السابقة





    بخصوص التقطيع
    فأنا لم استخدم اداة التقطيع كى اخرج هذه الصور فكل الصور من خارج التصميم فى الاصل الا البانر قمنا بصنعه فى الفوتوشوب
    طريقة استخراج البانر لمن لا يعرف كيف يقوم بفصله عن التصميم كالتالى
    فى المرحلة الاولى من الدورة كنا قد اخترنا مقاس البانر من خلال أداة Rectangle Shape Tool بمقاسات 950 بكسل عرض فى 176 ارتفاع
    سوف نقوم الآن بمعل Canvas Size
    افتح ملف layout.psd فى الفوتوشوب وتوجه الى قائمة image ومنها الى canvas size ثم أختر أن يكون الـ width والـ hight بالكسل واترك الـ width كما هو 950 بكسل ثم غير قيمة الـ hight الى 176 بكسل واختر القطع من الاعلى من خلال الضغط على السهم الاوسط العلوى واضغط ok



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

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

    لدينا فى ملف العمل layers قمنا بتصميمها أو جلبها ووضعها فى ملف التصميم
    لدينا financial و icon? و image و image1 و image2 ...... وبقية اللايرات
    قم باختيار كل لاير تريد استخدامه فى الصفحة بعد ذلك مثل لاير financialثم اذهب الى قائمة Layer ومنها الى أمر New Layer Based Slice وسوف يقوم بتحديد اللاير وحده فى slice وهكذا بقية اللايرات المستخدمة فيصبح لدينا هنا عدد 8 slice ايقونة علامة الاستفهام وصورة financial وال 6 صور المتبقين





    احفظ هذه الصور الآن بالطريقة التالية
    من قائمة file اختر save for web and devices
    ومن النافذة الخاصة بها اختر نوعية الصور jpg



    ثم اضغط ok لتفتح لك نافذة مكان الحفظ احتر قبل الحفظ images only و ايضا all user slices لكى يقوم باستخراج ما قمت بتقطيعه فقط



    غير اسماء الصور الناتجة الى ما تريد وضعهم فى المجلد images_folder كما بالشرح بالاعلى


    مرحلة التكويد
    الجزء الأول : كتابة الهيدر

    - تعريف المتصفح بنوعية ملفك
    تعرضت لهذه النقطة بالخصوص فى مقال المجلة العدد الثانى حيث كنت أتكلم عن توافقية الصفحات مع المستعرضات بعنوان لماذا صلاحية صفحتك دائما invalid ، لكننا هنا سنزداد معرفة بمتطلبات w3 لتعريف صفحاتك قبل قراءة محتوياتها من طرف المتصفح، وتسمى هذه الجزئية بـ DOCTYPE أى نوعية الملف

    [high]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    [/high]
    الـ DOCTYPE من المفترض أن تكون فى أعلى أى صفحة وأول شيئ يتم كتابته قبل تاج <html> ، كما أنها ليست من ضمن لغة html بل هى أوامر أو تعليمات لمتصفح الويب تخبره عن إصدار الـ markup language لغة التكويد اللذى تستخدمه الصفحة ..
    هذا السطر يقوم بتعريف نوعية الملف Document Type Definition DTD واللتى بدورها تقوم بتحديد أوامر وقواعد اللغة المكتوب بها الصفحة لكى يقوم المتصفح بإظهارها لأجهزة العملاء – الزوار – بطريقة صحيحة
    - تجهيز الصفحة لتعرض اللغة العربية RTL بشكل سليم وطبيعى بدون مشاكل
    هناك قاعدة تحفظها كل المتصفحات وهى قاعدة الاتجاهات واللتى يكون الافتراضى لها هو LTR من اليسار بما أن لغة برمجة الويب باللغة الانجليزية ، فاذا لم تقم بابلاغ المتصفح باتجاهات تصميمك فسيقوم تلقائيا بالقراءة من جهة اليسار أولا
    ولا أقصد هنا التكست أو المحتوى فقط بل أيضا أقصد تكويد الصفحة نفسه ، فالمفترض أننى أقوم بكتابة العمود الأيسر أولا خلال التكويد لكن مع
    RTL
    أستطيع كتابة العمود الأيمن أولا



    ويمككنا كتابة الكود الخاص بذلك فى داخل تاج الـ html كالتالى


    [high] <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
    [/high]


    اذا هيدر الصفحة سيكون كالتالى
    [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">
    [/high]




    -
    بداية كتابة الهيد Head




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




    [high]
    <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" />
    </head>
    [/high]



    هذا الهيد يقوم باعطائنا
    - معلومات الترميز UTF-8 وهو الترميز العالمى لقراءة اللغات الغريبة - منها العربية - بطريقة صحيحة ،
    عنوان الصفحة اللذى يظهر للزائر فى شريط المتصفح بالأعلى وبالأسفل




    - وصف محتويات الصفحة وما تتكلم عنه وهو خاص بمحركات البحث لتقييم صفحتك
    - الكلمات المفتاحية اللتى يتم التركيز عليها أثناء قراءة صفحة من طرف أحد محركات البحث
    - اسم المؤلف وبياناته – وهو كود خاص بى ليس من الضرورى التقيد بكتابته –
    · تذكر أنه كلما كانت كلماتك المفتاحية قليلة كلما كانت هدفا لعناكب محركات البحث
    · سنأتى آجلا للـ HEAD ثانية لوضع معلومات ملفات الـ css اللتى سنقوم بصنعها فتذكر ذلك

    الجزء الثانى : تكويد محتوى الصفحة
    Body



    نذكر هنا بعض النقاط قبل البدأ
    تاج div اختصار division أى قسم وصفحتنا لها عدة أقسام أو div's منها أول قسم div يحتوى الموقع بالكامل وهو containerdiv يوضع بداخله جميع محتويات الموقع





    توضح الصورة السابقة مكان التقسيمات div's الموجودة بالصفحة
    لعمل القوائم سنستخدم دائما Unordered List لعمل عناصر القائمة List Items بداخلها






    للكتابة العادية سنستخدم البراجراف p

    ملاحظة هامة : الفرق بين الـ ID والـ CLASS
    الـ id مستقل بذاته لا يندرج تحت معرّف آخر ولا يندرج تحته فى الاستايل أى عنصر غيره
    الـ class يعطى كل عنصر تحته نفس الاستايل
    أى أنه لو لدينا عنصر أو div له id لا يستطيع عنصر آخر فى الصفحة أن يأخذ نفس الاستايل
    أما الكلاس فكل العناصر المسماه به تأخذ نفس الاستايل
    وقد قصدت أن أكتب هنا هذه الملحوظة كى لا نتفرق أو نتشتت عندما نستخدم الكلاسات أو الايديهات عند تكويد محتوى الصفحة

    القسم الأول : تكويد البانر

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


    [high]
    <div id="containerdiv">
    <div id="header">

    <div id="banner">

    </div><!-- end banner-->

    <div id="topmenu">
    <ul>
    <li class="topmenu_li"><a href="#">الصفحة الرئيسية</a></li>
    <li class="topmenu_li"><a href="#">خدمات الشركة</a></li>
    <li class="topmenu_li"><a href="#">نبذة عنا</a></li>
    <li class="topmenu_li"><a href="#">من نحن</a></li>
    <li class="topmenu_li"><a href="#">اتصل بنا</a></li>
    </ul>
    </div><!-- end top menu-->
    </div><!-- end header-->
    [/high]
    شرح الكود السابق
    فتحنا تاج containerdiv واللذى سنقوم باغلاقه فى نهاية التكويد للصفحة – ثم قمنا بفتح تاج الهيدرheader ووضعنا بداخله البانر مجرد تاج مفتوح ثم أغلقناه مباشرة بدون وضع أى تاجات بداخله وذلك لأننا سنقوم باعطائه خلفية وهى صورة البانر اللذى صممناه فلا حاجة أن نقوم بوضع أى أكواد بداخل هذا البانر فسيكون له قيم عرض وطول وهى قيم البانر 950 بكسل فى 176 بكسل
    بعد ذلك قمنا بفتح القائمة الرئيسية للموقع من خلال فتح تاج div المسمى topmenu لكى يتسنى لنا وضع مجموعة عناصر القائمة ul بداخله
    أما القوائم نفسها topmenu_li تأخذ نفس الـ class لكى نستطيع ارفاق ستايل لها كلها مرة واحدة فى نفس الوقت
    ثم أغلقنا القوائم والهيدر
    موضوع سهل وليس صعبا فبهذه الأكواد البسيطة قمنا بعمل القسم العلوى من الصفحة كاملا واللذى سيكون فيما بعد على هذا الشكل



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

    القسم الثانى : تكويد العمود الأيمن

    مجرد صورة وخمس عناوين وخمس مقاطع تكست وباختصار img-h3-p فقط ذلك
    سوف نعطى العمود الأيمن نفسه id ثم نعطى العناوين كلها نفس الـ class وأيضا التكست كالتالى

    [high]
    <div id="rightcol">
    <img src="images_folder/slogan.jpg" class="siteslogan" alt="" title="" />
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    </div><!-- end right col-->
    [/high]
    كان من الممكن أن لا أقوم باعطاء العناوين أى كلاسات ولا حتى التكست أقوم بوضع كلاس له لكن احتياطا فى حالة وجود عناوين أخرى h3 لنفس العمود فقمت بوضع كلاس لأحدد للاستايل أى العناوين سوف يندرج تحته
    فى جزئية صنع ملف الانماط الانسيابية css سوف نتعرض لشرح وافى لهذه النقطة

    حتى الان التكويد الكامل لما قمنا بعمله كالتالى قم بحفظه فى ملف داخل مجلد عملنا my new website
    [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" />
    </head>
    <body>
    <div id="containerdiv">

    <div id="header">

    <div id="banner">

    </div><!-- end banner-->

    <div id="topmenu">
    <ul>
    <li class="topmenu_li"><a href="#">الصفحة الرئيسية</a></li>
    <li class="topmenu_li"><a href="#">خدمات الشركة</a></li>
    <li class="topmenu_li"><a href="#">نبذة عنا</a></li>
    <li class="topmenu_li"><a href="#">من نحن</a></li>
    <li class="topmenu_li"><a href="#">اتصل بنا</a></li>
    </ul>
    </div><!-- end top menu-->
    </div><!-- end header-->

    <div id="rightcol">
    <img src="images_folder/slogan.jpg" class="siteslogan" alt="" title="" />
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    </div><!-- end right col-->
    [/high]




    المرحلة الثالثة
    القسم الثالث : تكويد العمود الأيسر



    العمود الأيسر عبارة عن 5 ديفات div سنسردهم بالتفصيل كيف يكون تكويدهم


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

    سنعتبر أن أول جزء فى العمود الأيسر وهو الصورة سيكون فيما بعد عبارة عن جافا سكربت يتم فيها تقليب عدد من الصور لذا سميت هذا الـ div بـ javascript استعدادا
    أو بمعنى آخر سنقوم الآن بوضع صورتنا هنا ولا يوجد جافا سنستخدمها
    - اعتبارا لمن لا يريد استخدام هذه الجزئية -


    [high]
    <div id="leftcol">

    <div id="javascript">
    <img src="images_folder/java.jpg" alt="" />
    </div><!-- end java script div-->
    [/high]


    فتحنا هنا تاج العمود الأيسر leftcol ثم تاج الجافا سكربت ووضعنا بداخله صورة ثم قفلنا تاج الجافا سكربت

    • القوائم




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

    [high]
    <div class="menu">
    <ul>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل</a></li>
    </ul>
    </div>
    [/high]

    تذكر أن الـ <ul> والـ </ul> هما بداية ونهاية مجموعة عناصر قوائم دائما والـ li هو عنصر القائمة وهنا قمنا بداخل عنصر القائمة li بوضع مجموعة عناصر ul لقوائم أخرى li ستكون كقوائم منسدلة عند الوقوف على هذا العنصر – عن طريق الـ css -





    • المحتوى الكتابى على اليمين

    سيوضع هذا المحتوى الكتابى فى div خاص به وسيأخذ الكلاس floatright وسبب أنه لم يأخذ id خاص به هو أننى فضلت أن أجعل كل ما سيأخذ الاتجاه اليمين الاجبارى فى الـ css يكون تحت نفس الكلاس بدلا من أن أصنع كل مرة id له نفس الاستايل
    وسنتعرض ونتعرف لهذا أكثر عند الدخول فى مرحلة الـ css وأرجوا من المشتركين فى الدورة اللذين ليس لهم خبرة سابقة بملفات الـ css أنت يذاكروا عنها ولو قليلا




    [high]
    <div class="floatright">
    <p class="aboutcompany">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.. فالوقت نعمة كبرى منَّ الله بها علينا،
    ولكن معظم الناس غافلون عن نعمة الوقت.
    وقد دأب بعض علماء الغرب على إصدار كتب حول إدارة الوقت،
    حققت هذه الكتب نسبة مبيعات عالية في العالم،
    بما يؤكد اهتمام الناس بهذا الجانب المهم وحرصهم على تعلم الجديد في فنّ استغلال الوقت واستثماره بأفضل صورة ممكنة،
    وبما يحقق مصالحهم وأهدافهم وبالنتيجة ليصلوا إلى السعادة التي يبحث عنها كل إنسان.
    ولكن لو تأملنا هذه الكتب نجد أنها تركز على هدف واحد هو الدنيا وزينتها،
    فمقياس النجاح لديهم هو ما يحققه المرء من مكاسب مادية أو شهرة أو سلطة،
    ولكنهم يتجاهلون فكرة بسيطة وهي المصير الذي ينتظر كل واحد منا بعد الموت،
    وهذه الفكرة كانت الخطوة الأولى التي جعلتني أتّجه نحو البحث والتأليف والتفكر والتدبر.
    </p>
    </div><!-- end div floated right-->
    [/high]


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

    • مجموعة الصور المعبرة عن المنتجات أو ما شابه

    لدينا 6 صور هنا لهم نفس معلومات الطول والعرض وكلهم على اليسار من التسكت – المحتوى الكتابى – سنضعهم فى div خاص بهم يأخذ الكلاس floatleft لكى يتجه ناحية اليسار اجباريا



    [high]
    <div class="floatleft">
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    </div><!-- end floated left div-->
    [/high]



    أعطيت أيضا كل الصور نفس الكلاس لاعطائهم نفس الاستايل فى الـ css

    • الفوتر


    به قائمتان حاليا يمكننا أن نصنع div بداخله مجموعة قوائم كالتالى
    وسنغلق هنا العمود الايسر ثم نغلق الـ containerdiv أيضا ثم الـ body ثم الـ html



    [high]
    <div id="footer">
    <ul>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Home Page</a></li>
    </ul>
    </div><!-- end footer div-->

    </div><!-- end left col-->

    </div><!-- end container div-->
    [/high]


    انتهينا الآن من تكويد كامل الصفحة عن طريق النوت باد++ ولكن هناك نقاط يجب أن نراجعها معا
    تكويد كامل الصفحة كالتالى الآن



    [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" />
    </head>
    <body>
    <div id="containerdiv">

    <div id="header">

    <div id="banner">

    </div><!-- end banner-->

    <div id="topmenu">
    <ul>
    <li class="topmenu_li"><a href="#">الصفحة الرئيسية</a></li>
    <li class="topmenu_li"><a href="#">خدمات الشركة</a></li>
    <li class="topmenu_li"><a href="#">نبذة عنا</a></li>
    <li class="topmenu_li"><a href="#">من نحن</a></li>
    <li class="topmenu_li"><a href="#">اتصل بنا</a></li>
    </ul>
    </div><!-- end top menu-->
    </div><!-- end header-->

    <div id="rightcol">
    <img src="images_folder/slogan.jpg" class="siteslogan" alt="" title="" />
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    </div><!-- end right col-->

    <div id="leftcol">

    <div id="javascript">
    <img src="images_folder/java.jpg" alt="" />
    </div><!-- end java script div-->



    <div class="menu">
    <ul>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل</a></li>
    </ul>
    </div>


    <div class="floatright">
    <p class="aboutcompany">
    لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن
    يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم..
    فالوقت نعمة كبرى منَّ الله بها علينا،
    ولكن معظم الناس غافلون عن نعمة الوقت.
    وقد دأب بعض علماء الغرب على إصدار كتب حول إدارة الوقت،
    حققت هذه الكتب نسبة مبيعات عالية في العالم،
    بما يؤكد اهتمام الناس بهذا الجانب المهم وحرصهم
    على تعلم الجديد في فنّ استغلال الوقت
    واستثماره بأفضل صورة ممكنة،
    وبما يحقق مصالحهم وأهدافهم وبالنتيجة
    ليصلوا إلى السعادة التي يبحث عنها كل إنسان.
    ولكن لو تأملنا هذه الكتب نجد أنها تركز
    على هدف واحد هو الدنيا وزينتها،
    فمقياس النجاح لديهم هو ما يحققه
    المرء من مكاسب مادية أو شهرة أو سلطة،
    ولكنهم يتجاهلون فكرة بسيطة وهي المصير
    الذي ينتظر كل واحد منا بعد الموت،
    وهذه الفكرة كانت الخطوة الأولى التي
    جعلتني أتّجه نحو البحث والتأليف والتفكر والتدبر.
    </p>
    </div><!-- end div floated right-->

    <div class="floatleft">
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    </div><!-- end floated left div-->

    <div id="footer">
    <ul>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Home Page</a></li>
    </ul>
    </div><!-- end footer div-->

    </div><!-- end left col-->

    </div><!-- end container div-->

    </body>
    </html>
    [/high]


    قم بحفظ الملف الآن فى مجلد العمل my new website بجوار مجلد images_folder
    باسم
    default.htm
    او اى مسمى تريده
    لمن لاتضهر الدوره عندهم


 

 
صفحة 4 من 5 الأولىالأولى 12345 الأخيرةالأخيرة

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

  1. دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 34
    آخر مشاركة: 27 / 01 / 2012, 13 : 07 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

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

المفضلات

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

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