مساعدة 
اللهم أفتح لنا فتوح العارفين
اللهم إني أعوذ بك أن أشرك بك شيئا أعلمه و أستغفرك لما لا أعلمه
السلام عليكــم ورحمـة الله وبركاتــه ،،
سنتعرف بهذه الدورة على كيفيه إنشاء تصاميم واستخدامها في مواقعنا بحيث تكون ميزه وشبيه بتصاميم جوملا أو وورد بريس
سأقوم بإذن الله بتقسيم هذه الدورة إلى دروس كل درس سيكون عن جزء من أجزاء الموقع وكل درس يمكن أن يكون كافيا لتبدأ التصميم بإذن الله
أرجو من الجميع من يقوم بالتطبيق أن لا يبخل علينا بتصاميمه وسيتم عمل قسم في موقع أداوت مدارك لهذه التصاميم مع إسم المصمم لتكون كتشجيع له وليستفيد منها الغير بإذن الله
الدرس الأول
أساسيات في التصميم
عندما نبدأ في تصميم أي موقع يجب أن نعلم أن هناك قواعد وأسس إذا اتبعناها أصبح الأمر بسيطا ويمكن لأي شخص أن يكمل ما بدأته
من أهم الأساسيات هي فصل الشيفرات الخاصه الهتمل والستايل والصور والجافاسكريبت عن بعضها البعض لكي تكون الأمور غير معقدة
نبدأ بصفحة الهتمل HTML
دائما علينا بدء صفحتنا بشيفرة قواعد و معايير الويب
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">هذه الشيفره تقوم بجعل موقعك يظهر في جميع المتصفحات التي تدعم هذه المعاير بنفس الشكل تقريبا وبذلك ترتاح من مشاكل المتصفحات
الآن لعمل أي تصميم لن نقوم بكتابة شيفرة طويله من الهتمل
html
وإنما سنقوم بكتابه طبقة
div
وبعدها نقوم بتنسيقها من خلال الستايل لتتناسب مع مانريد
لنبدأ بعمل رابط في قائمة
نعود إلى صفحة الهتمل
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>الدرس الأول </title>
</head>
<body>
<div class="">
<a href="#">LINK 1</a>
<a href="#">LINK 2</a>
<a href="#">LINK 3</a>
</div>
</body>
</html>كما نرى إلى الآن لم نقم إلا بكتابة شيفرة الهتمل ولو قما بعرض الصفحة ستظهر كما يلي
الآن سنقوم بإنشاء ملف الستايل ويكون عادة بإمتداد
style.css
نبدأ الكود كما يلي
في حال أردنا التأثير على وسم نكتب إسم الوسم ليتأثر بذلك جميع الوسوم المشابه لهذا الوسم
فمثلا إذا أردنا جعل جميع الوسوم
<a .... /a>
تصبح الكلمات التي بينها خط غامق بلون أحمر نكتب
/*لاحظ مايوضع داخل هذه العلامات يكون كتعليق ولا يؤثر بالشيفره */
a{
font-weight: bold;
color: #FF0000;
}
أما لو أردنا التأثير على مجموعه أخرى تختلف الأوسمه فيها فبعضها
<a .../a>
أو ممكن أن تكون
<p .... /p>
بهذه الحاله نستخدم الكلاس فنكتب
<a href="#" class="test_a">LINK 2</a>
طبعا نسمي الكلاس بأي إسم يمكننا من معرفة ما هو الهدف من هذا الكلاس
الآن نعود إلى الستايل لنرى كيف سنتحكم بهذا الستايل وكيف أن الوسم سيكون غير متأثر بستايل الوسم وإنما بستايل الكلاس
/*لاحظ مايوضع داخل هذه العلامات يكون كتعليق ولا يؤثر بالشيفره */
a{
font-weight: bold;
color: #FF0000;
}
.test_a{
font-weight: bold;
color: #FF0000;
}لاحظ أننا كتبنا نقطه قبل إسم الستايل أما في حال الوسم فقط نكتب إسم الوسم
كما تلاحظ أننا نكتب الستايل إذا كان داخل الصفحة بين وسمي
<style>...</style>
أما إذا أردنا فصل الستايل نكتبه بدون هذه الوسوم ولكن نستدعي ملف الستايل من خلال هذا الوسم كما يلي :
<link rel="stylesheet" href="css/style.css" type="text/css"/>
يمكنك وضع السطر السابق في أي مكان في الصفحة ولكن يفضل وضعه في الترويسه
<head>...here...</head>
لكي تظهر الصفحة كما تريد للمتصفح لآن الستايل سيتم تحميله أولا ومن ثم تحميل الصفحة
الآن أصبح لدينا مجلد وبداخل هذا المجلد ملف الهتمل ومجلد آخر بإسم ستايل
css
وداخل مجلد الستايل يوجد ملف بإسم
style.css
نأتي لآخر عمليه في التحكم للستايلات وفي المعرف
ID
فإذا أردنا تنفيذ الستايل على طبقه معينه نستخدم الآي دي أو المعرف مثل
<a href="#" id="test_id_a">LINK 3</a>
<style>
#test_id_a{
font-weight: bolder;
color: #0000FF;
}
</style>لاحظ قمنا باستخدام اشارة المربع قبل إسم المعرف
بهذه الطرق الثلاثه تقريبا يتم استدعاء جميع الستايلات
في البدايه ربما ترى أن طريقه واحد تكفي ولكن فيما بعد سترى أن تنوع هذه الطرق يعطي حيويه ومرونه في التنسيق بإذن الله
أتركك إلى حين الدرس الثاني وسأحاول أن أضع درس كل يوم لتكون الدورة منتظمه بإذن الله
الملف الخاص بهذا الدرس
L1.rar (590بايتات )
عدد مرات التحميل : 483
للتعليق على هذا الدرس أرجو اتباع هذا الرابط : http://www.urorbit-t...&show_thread=34
تم تعديل هذه المشاركة بواسطةbastr3: 17/12/2009 - 01:46 AM
اذهب للاعلى 
اقتباس متعدد
... 
) 10 بكسل . على إكسبلولر رح يكون التصميم فيه بشكل مستطيل 
