الدرس الأول: سلسلة دروس تصميم المواقع باستخدام الCSS

[الحضرمي]

الله يوفقك اخي
جزاك الله خيرا

[عبد الله هُربي]

الف الف شكر لك على هذا الدرس الرائع والجميل ..

وأتمنى ان يكون معمق أكثر ..


وخالص المودة ،،

[محمود المسعودي]

جزاك الله خير ... شرح أكثر من ممتاز

[isader.com]

أشكر جميع الأخوه الذين ردوا على الموضوع:

بووليد: شكراً لك أخي.. و ان شاء الله تكون استفدت من الدرس

RED_LINE: يعطيك العافيه.. و الحمدلله إنك استفدت من الدرس

Fuga: الله يعافيك، و أشكرك على التثبيت..

hossam elkady: تحيتي لك و سلامي أخي حسام، و الثاني قادم قريباً..

دركوش: أشكرك أخي دركش على ردك.. و بإذن الله تصبح من محترفي هذه اللغه...

moslem_tk: شكراً لك أخي.. و قريباً سأكمل السلسلة..

داعية: بإذن الله أخي داعية سنواصل... و معاً لإنترنت عربية أفضل..

إنترنت بلس: أهلا بك أخي إنترنت بلس، و بانتظار رؤية تطبيقك للدرس...

4AMIN: أشكرك أخي على ردك.. و بانتظار تطبيقك على الدرس..

بالنسبه لسؤالك فيمكنني أن أختصر الإجابه في 4 نقاط قصيره و هي أن الxhtml تتميز على الhtml بأنها:
- أرتب
- أنظف
- تتبع هيكل الxml
- يمكنها الإتحاد مع لغات أخرى بشكل أسهل

اما لمزيد من التفصيل فيمكنك زيارة الصفحة التاليه:
http://www.w3.org/MarkUp/2004/xhtml-faq#need

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

يمكنك زيارة هذا الرابط لتتعرف أكثر على الفوارق بين اللغتين:
http://www.w3schools.com/xhtml/xhtml_intro.asp

الباهر: شكراً لك أخي الباهر على ردك، و اقتراحك سأبدأ بتطبيقه بالدرس القادم بإذن الله..

N-DES: صراحة أسعدني كثيراً رؤية تطبيقك للدرس، و بالفعل بدأت أحس أن هذا الدرس كان مفيداً للبعض..

بالنسبه للخطأ في الصفحه فهو بسيط للغايه، و أظن أنك قد سهوت عنه..
الخطأ ببساطه هو أنك قد نسيت أن تضع علامة اليساوي (=) بعد الـ id.. و هذا كل ما في الأمر..

أتمنى لك التوفيق في تصاميمك القادمه باستخدام الcss...

محمد العتيبي: شكراً لك أخي محمد على ردك.. و يعطيك العافيه..

yemen-1-host: أتمنى أن يكون أعجبك الدرس..

الحضرمي: تسلم أخي و الله يجزي الخير جميع المسلمين..

مُجَاهِد: شكراً لك أخي.. و بإذن الله سيكون بشكل أعمق في الدروس القادمه..

ابو محمود: تحيتي لك أخي أبو محمود.. و أطال الله في عمرك..



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


تقبلوا تحيتي و سلامي..

عماد الصدر

[ابو مشاري 97]

بارك الله فيك

هذا الدرس الاول فقط وش بقى فيها بعد

على العموم تم حفظ الدرس لتطبيقه في وقت قريب

===================

س / هل تعتبرهذه اللغة اسرع من لغة html في فتح الصفحات المنشأة فيها ؟
وهل يمكن الدمج بينها وبين لغة html ؟

[مشراق]

بارك الله فيك شرح جميل وواضح
تمت اضافته للمفضلة
جزاك الله خير اخي isader.com

[N-DES]

مــــشكور والله اخي عماد

هذه النتيجة
والحمد لله الدرس اتطبق صحيح :shy:
http://www.mudares.com/css223/index.htm

[isader.com]

أخي أبو مشاري: أشكرك على ردك هذا... و ان شاء الله يفيدك الدرس...

س / هل تعتبرهذه اللغة اسرع من لغة html في فتح الصفحات المنشأة فيها ؟
وهل يمكن الدمج بينها وبين لغة html ؟

الحقيقه من وجهة نظري الشخصيه، فإني أرى أن الxhtml أسرع من الhtml و ذلك لإنها أكثر ترتيباً، و لا تقبل أكوام الmark-up الغير مفيده، و التي كانت تقبل به من قبل الـ html..
هذا كله يوفر على المتصفح الكثير من الوقت لفهم المستند، مما يؤدي إلى الإسراع في عرضه للمستخدم..

بالنسبه للدمج.. فلا يجوز الدمج بين هاتين اللغتين، و لا أظن من الأصل أن هناك حاجه للدمج بينهما..


مشراق: أشكرك أخوي.. و بانتظار رؤية التطبيق على الدرس..

N-DES: :nice: مبروك أخي على التطبيق... لكن الآن حاول أن تغير قليلاً بالقيم الموجوده.. و انظر كيف تأثر في التصميم.. و من ثم حاول أن تكتب أوامرك الخاصه.. لتتماشى مع التصميم الخاص بك الذي تريده..

[elkaser]

السلام عليكم

شكرا لك اخي العزيز عماد بارك الله فيك درس رائع وضح لي العدد من الاشياء

ولاكن عندي استفسار أهل من الممكن وضع نتائج في وست المتغير عموديا ؟؟؟
مثلا في ال html نستخدم style="vertical-align: middle;"

اهل من طريقة لعمل ذلك ؟؟؟؟؟

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

وشكرا
وبارك الله فيك
ووفقك ونجحك

[WaLeeD]

الله يرزقك الفردوس الاعلى

اشكرك يامبدع

[ALaa462]

شكرا لك على الدرس المفيد

و هناك سؤال : ما المقصود بالقيمة

media="screen"

<style type="text/css" media="screen">

[Hossam AL-Abdeh]

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

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

من بعد اذنك كمان بظن الرد على الأخ علاء media="screen انه معناها بيكون الموقع على قياس الشاشة بحال اختلاف قياس الشاشات و الله أعلم

[hossam elkady]

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

وهذا تطبيقي مع تعديل بسسسسسسسسيط

http://www.arabip.com/css/1

[isader.com]

الكاسر: من زمان عنك و الله... اشتقنالك يا زلمه..
الحمدلله أن الدرس فادك.. و ان شاء الله الدورس القادمه تفيدك أكثر..

بالنسبه لسؤالك الأول.. فتفضل الجواب...

أعتقد أنك قد جربت الأمر التالي:vertical-align:middle و لكنك وجدته لا يعمل مثلما تريد بالضبط..

الحقيقه أن هناك طريقة أخرى لعمل ما تريد و هي التاليه:

<div id="outer">
  <div id="middle">
    <div id="inner">
        <p>النص الذي تريده أن يكون في المنتصف العامودي للصندوق</p>
    </div>
  </div>
</div>

أما بالنسبه للسي اس اس فستكون كالتالي:

#outer {height: 200px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} 
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%}

أما للسؤال الثاني، فكما فهمت من سؤالك أنك تريد أن تضع صورة معينه، و بجانبها جملة لشرح هذه الصوره (مثلاً)...

ان كان هذا هو قصدك من السؤال: فالجواب كالتالي:

بالنسبه لملف الhtml فما عليك وضعه هناك هو ببساطه الصوره و بجابنها الجمله التي تريدها:

<img src="name.jpg" width="200" height="200" alt="a photo" class="photo">

الشرح الذي تريد كتابته عن الصوره السابقه أو أي نص آخر

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

.photo{vertical-align:text-top;}

أما اذا أردته أن يظهر "بالجانب النصفي" للصوره:

.photo{vertical-align:middle;}

و أخيراً إذا أردته أن يظهر بالجانب السفلي:

.photo{vertical-align:text-bottom;}

و هذا كل شيء..

أشكرك جزيل الشكر على ردك.. و موفق إن شاء الله في بناء موقعك


وليد: جزاك الله كل خير، و بإذن الله نلتقي سوياً بالفردوس الأعلى..


علاء: أشكرك أخي على ردك، و بإذن الله تكون قد استفدت منه..
بالنسبه لمعنى القيمة media = "scree".. فهي تعني أن هذه الستايلات نريدها أن تطبق عندما نعرض الموقع على الشاشه

هناك قيم أخرى مثل media="print" للستايلات التي نريد أن نطبقها عند طباعة الصفحه

أو القيمه media="handheld" للستايلات التي نريد أن نطبقها عند عرض الصفحة على الأجهزة المحموله

و هناك العديد من القيم الأخرى.. يمكنك الإطلاع عليها من الرابط التالي:
http://www.w3schools.com/css/css_mediatypes.asp

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

أرجو أن تكون الفكره قد وصلت لك.. و بانتظار تطبيقك للدرس..

أخي حسام العبده: يشرفني وجودك في هذا الموضوع.. و الحمدلله أن الدرس عجبك..
و أنا بانتظار تطبيقك للدرس، و الأسئله التي تريدها أنا حاضر لإجابتها..

أشكرك على محاولتك الرد على الأخ علاء، و لتعرف الإجابه الأصح لمعنى تلك القيمة، يمكنك قراءة ردي له..


حسام القاضي: ماشاء الله عليك أخي حسام.. يعني الصراحه الواحد ينشرح صدره عندما يرى تطبيق الأعضاء لدرس كتبه.. يحس أن تعبه لم يذهب هدراً..

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

[AMiSHKA]

السلام عليكم
بااااااااك
حبيت أوريك التطبيق حقي
تصدق وناسة يوم تسويه في النوتة تحس انك تقابل مسائل وتطلع حلول :nice:
http://mashahed.net/css/index.html
عجبني فكرة انه الموقع يصير صناديق وبيني وبينك أول مرة أتعامل مع الID :funny: :funny:
بس أحس انها روعة

سؤال على الطاير
اذا سويت تصميم بالفوتوشوب و قصصته هل في صعوبة إذا أردت تحويله إلى xhtml >>>مع اني ما اتوقع .
اللحين لو شيكت على التطبيق في w3 ممكن أني ما ألقى ولا خطا ؟؟