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

العودة   منتديات عرب ووردبريس > قسم القوالب > قوالب ووردبريس - عام
التسجيل التعليمـــات قائمة الأعضاء التقويم البحث مشاركات اليوم اجعل كافة الأقسام مقروءة

دورة قوالب ووردبريس[3]: بناء صفحة Html، بناء ملف Css

إضافة رد
 
LinkBack أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 02-25-2008, 01:42 PM
مدون مميز جداً
 
تاريخ التسجيل: Dec 2007
الدولة: المغرب
المشاركات: 263
شكر غيره: 4
تم شكره 6 مرة في 4 موضوع
افتراضي دورة قوالب ووردبريس[3]: بناء صفحة Html، بناء ملف Css

بسم الله الرحمن الرحيم والصلاة والسلام على محمد وعلى آله وصحبه أجمعين.



-> الموضوع: دورة قوالب ووردبريس للمبتدئين.

-> الهدف: قيام الأعضاء بعد إتمام الدورة بتصميم قوالب تجمع بين البساطة والروعة (قبل الإنتقال للدورة المتقدمة) وذلك لتحقيق الغرض من القالب.

->الفئة المستهدفة: المبتدئين بالدرجة الاولى.

-> المرحلة: الثالثة.

-> المحاور: بناء صفحة HTML، بناء ملف CSS، خطوة قبل البداية.

-> فهرس مراحل الدورة: دورة قوالب ووردبريس للمبتدئين.

-> الدرس السابق: التخطيط على الورق، التصميم، التقطيع.










التعديل الأخير تم بواسطة a9laam ; 02-25-2008 الساعة 07:11 PM.
رد مع اقتباس
  #2  
قديم 02-25-2008, 01:58 PM
مدون مميز جداً
 
تاريخ التسجيل: Dec 2007
الدولة: المغرب
المشاركات: 263
شكر غيره: 4
تم شكره 6 مرة في 4 موضوع
افتراضي بناء صفحة Html

لغة HTML: باختصار كل موقع تعرفه في الشبكة هو عبارة عن ملف أو ملفات HTML مترابطة، HTML لغة بسيطة ومنطقية يقرأها كل متصفح ويطبق كل سطر منها ليراه الزائر بشكل أكثر تنسيقا.

وسوم HTML: تعمتد لغة HTML على عناصرتحددها ما يطلق عليه الوسوم، لكل وسم بداية ونهاية، وبين بدايته ونهايته نضع المحتويات التي يشملها الوسم ويطبق عليها خصائصه.
مثال: لكتابة عنوان عريض للموقع: الوسم المناسب هو h1 ويتم تطبيقه كالآتي:



بالمثل لكتابة عناوين رئيسية نطبق الوسم h2 وعناوين فرعية بالوسم h3 وفقرات بالوسم p وهكذا دواليك.

* الوسوم الأساسية: هناك وسوم أساسية تشكل هيكلة الصفحة: هي html و header و body
مثال: هيكلة صفحة HTML بسيطة:

[html]
<html>

<head>
<title>موقعي</title>
<h1>عنوان الموقع</h1>
<h3>وصف الموقع</h3>
</head>

<body>
<h2>عنوان الموضوع</h2>
<p>محتوى الموضوع<p>

<h2>عنوان آخر</h2>
<p>موضوع آخر<p>
</body>

</html>
[/html]

الوسم والخاصية والعنصر:قبل الحديث عن أنواع الوسوم، أود أن أعرف بعض المصطلحات التي ستمر بنا في هذه الفقرة والفقرات السابقة:
الوسم أو Tag: سبق الحديث عنه وهو أمر من أوامر HTML يتميز ببداية ونهاية
الخاصية أو attribute: وتعني الخاصية أو الخصائص المسندة لهذا الوسم.
مثلا لتعيين خلفية حمراء للفقرة نكتب:

[html]<p style="background-color: red;">الفقرة </p>[/html]

الخاصية هي style وقيمتها هي background-color: red -وليس red-
العنصر element: هو العنصر الذي يستخدم الوسم، أي من بداية الوسم مرورا بالمحتوى إلى نهاية الوسم.
مثلا العنصر "فقرة paragraph" ذو الوسم p يحمل القيمةbackground-color: red للصفة style.

سنتحدث إذن عن بعض الوسوم وأنواع العناصر المشكلة لها:

عناصر أساسية: هي العناصر التي تشكل هيكلة الصفحة وسبق الإشارة إليها
[html]<html>المحتوى</html>
<head>المحتوى</head>
<body>المحتوى</body>[/html]

عناصر خفية: هي عناصر لا تظهر في محتوى الصفحة وإنما تحدد أمورا أخرى تفيد الموقع.
مثال:
[html]<title>عنوان الموقع</title> [/html]
يظهر في أعلى المتصفح وفي محركات البحث لكن لا مكان داخل في الصفحة.

عناصر متمددة (block): عناصرتنتقل إلى سطر جديد تلقائيا عند إدراجها.
مثال:
[html]<div>صندوق تجميع</div> عنصر مهم سنتطرق إليه في فقرة خاصة
<p>للفقرات في الصفحة</p>
<blockquote>اقتباس، فقرة داخلية</blockquote>
<h1>عنوان رئيسي</h1>[/html]
عناصر سطرية inline: وهي عناصر يمكن أن تدرج في السطر دون الحاجة لسطر جديد
مثال:
[html]<a>للروابط</a>
مثال:
<a href="URL" title="additional information">link text</a>
<span>…</span> مشابه في خصائصه للعنصر <div>[/html]

عناصر واصفة:
مثال:
[html] <i>للنص المائل</i>
<big> نص كبير</big>
<small> نص صغير</small>[/html]

تذكر:
* العناصر السطرية inline تدرج في السطر ويمكن أن تحتوي عناصر من فئتها.
* العناصر السطرية لا يمكن أن تحتوي على عناصر متمددة block.
* العناصر المتمددة block يمكن أن تحتوي على عناصرأخرى من فئتها.
* العناصر المتمددة block يمكن أن تحتوي على عناصر سطرية inline.
* عند تداخل العناصر نغلق آخر وسم فتحناه ثم الذي قبله ثم الذي قبله:
مثال خاطئ:
[html]<h1><a href="url">عنوان برابط </h1></a>[/html]
مثال صحيح:
[html]<h1><a href="url">عنوان برابط </a></h1>[/html]









الصور المصغرة للصور المرفقة
اضغط على الصورة لعرض أكبر

الاســـم:	wasmh1.gif‏
المشاهدات:	1849
الحجـــم:	5.3 كيلوبايت
الرقم:	968  

التعديل الأخير تم بواسطة a9laam ; 02-25-2008 الساعة 04:12 PM.
رد مع اقتباس
  #3  
قديم 02-25-2008, 02:32 PM
مدون مميز جداً
 
تاريخ التسجيل: Dec 2007
الدولة: المغرب
المشاركات: 263
شكر غيره: 4
تم شكره 6 مرة في 4 موضوع
افتراضي المعايير القياسية في صفحة Html

ليست كل المواقع تكتب بنفس الطريقة الHTMLية، وليست كل المتصفحات تقرأ بنفس الطريقة، لذلك يختلف شكل ظهور المواقع في المتصفحات، لكن هناك خطوة قامت بها منظمة World Wide Web بمحاولة توحيد معايير القراءة والكتابة ب HTML، في إطار ما يسمى بالمعايير القياسية.
قالب ووردبريس يعمل كأي قالب مواقع عادي، يكتب بلغة HTML ويتوفر على أكواد PHP، وينسق باستخدام css، ولكي يقرأ المتصفح الأكواد ويفهمها ويطبقها، عليك أن تقول له في البداية: هذه هي لهجة HTML التي أستخدم وهي التي ستقرأ بها، أي أنك تقوم بتعريفه بنسخة اللغة التي تستخدمها.


للتوسع في الموضوع يمكنك زيارة درس المعايير القياسية في موقع HTML.net

لإبلاغ متصفحنا بما سبق ندرج السطرين التاليين في صفحة القالب:

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
[/html]

السطر الاول مستقل والثاني ضمن بداية الوسم <html>

تصبح هيكلة الصفحة كالآتي:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>موقعي</title>
<h1>عنوان الموقع</h1>
<h3>وصف الموقع</h3>
</head>

<body>
<h2>عنوان الموضوع</h2>
<p>محتوى الموضوع<p>

<h2>عنوان آخر</h2>
<p>موضوع آخر<p>
</body>

</html>
[/html]

هناك معرف آخر للمعايير القياسية يسمى XFN و هو مختصر لمصطلح (XHTML Friends Network) وهو طريقة بسيطة لتمثيل العلاقات الانسانيه باستخدام الوصلات، وهي ضرورية في المدونات والمواقع الشخصية.

لمعرفة المزيد بالإنجليزية:
http://www.gmpg.org/xfn/
http://microformats.org/wiki/XFN

يضاف التعريف السابق للصفحة بإضافة السطر التالي في بداية الوسم head:
[html]<head profile="http://gmpg.org/xfn/11">[/html]

ليصبح كود الصفحة:

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
<title>موقعي</title>
<h1>عنوان الموقع</h1>
<h3>وصف الموقع</h3>
</head>

<body>
<h2>عنوان الموضوع</h2>
<p>محتوى الموضوع<p>

<h2>عنوان آخر</h2>
<p>موضوع آخر<p>
</body>

</html>
[/html]









رد مع اقتباس
  #4  
قديم 02-25-2008, 04:06 PM
مدون مميز جداً
 
تاريخ التسجيل: Dec 2007
الدولة: المغرب
المشاركات: 263
شكر غيره: 4
تم شكره 6 مرة في 4 موضوع
افتراضي شيء من ال Css

إذا قمنا بكتابة صفحة قالبنا بلغة ال HTML ولم ندرج ضمنها بعضا من "البهارات والمساحيق" فستبدو، بشكل تقليدي، كل عنصر يأتي وفق الإعدادات الإفتراضية لمتصفحك، كمثل هذه الصفحة:



تلك البهارات والمساحيق التجميلية هي ما يدعى ب css وهي اختصار لمصطلح Cascading Style Sheets أو مايسمى تقنية الصفحات الإنسيابية، تكتب صفحتك بالHTML ثم تجملها وتنظمها ب css، وفق معايير قياسية عكس التنظيم بالجداول، أو بصور Gif الخفية.

قبل قليل أوردت مثالا لصفحة بخلفية حمراء، ولكن أدرجناها كصفة للوسم P.
هذا شيء من css أدرجناه داخل صفحة html.

يمكن إدراجه أيضا بين وسمي style كما يلي:

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>موقعي</title>

<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: "times new roman";}
h3 {font-size: 12px; font-family: tahoma;}
p {font-size: 8px; font-family: "tahoma"; background-color: red;}
</style>

<h1>عنوان الموقع</h1>
<h3>وصف الموقع</h3>
</head>

<body>
<h2>عنوان الموضوع</h2>
<p>محتوى الموضوع<p>

<h2>عنوان آخر</h2>
<p>موضوع آخر<p>
</body>

</html>

[/html]

قمنا بتخصيص كل عنصر من العناصر المدرجة في الصفحة: العناوين بخطوط ذات حجم أكبر ونوع خط مختلف، الفقرة بخط أصغر وبخلفية حمراء.

كيف تعمل تقنية css إذن:



إذن يمكن للوسم style أن يحدد صفات أخرى متعددة لعناصر الصفحة. (بتفصيل في الفقرة اللاحقة)

أفضل الطرق لتصميم أي موقع وصيانته والتغيير في تصميمه دون المس بالمحتوى يكون أفضل خيار هو عزل المحتوى عن التصميم، وهذا بالضبط ما تفعله كل قوالب ووردبريس، محتوى HTML و PHP في ملفات PHP التي سبق الإشارة إليها والتنسيق أو التصميم في ملف style.css معزول تماما كالصور، ويتم استدعاؤه بوسم لعنصر من العناصر الخفية (راجع الفقرة السابقة:بناء صفحة Html، أنواع العناصر ).

الوسم المستخدم: link
طريقة الإستخدام:
[html]<link rel="stylesheet" type="text/css" href="url" title="description of style">[/html]

بدل url تضع رابط ملف style.css وعادة ما يوضع في مجلد القالب مباشرة أو في مجلد css داخل مجلد القالب.









الصور المصغرة للصور المرفقة
اضغط على الصورة لعرض أكبر

الاســـم:	pagesimp.gif‏
المشاهدات:	1832
الحجـــم:	12.7 كيلوبايت
الرقم:	969   اضغط على الصورة لعرض أكبر

الاســـم:	selector.gif‏
المشاهدات:	1826
الحجـــم:	12.0 كيلوبايت
الرقم:	973  

التعديل الأخير تم بواسطة a9laam ; 02-25-2008 الساعة 06:27 PM.
رد مع اقتباس
  #5  
قديم 02-25-2008, 04:40 PM
مدون جديد
 
تاريخ التسجيل: Mar 2007
المشاركات: 13
شكر غيره: 0
تم شكره 0 مرة في 0 موضوع
افتراضي

جميل جدا..

متابع لدورتك..

سأقرأ من جديد وحال وجود الأسئلة سأطرحها..

شكرا لك..









رد مع اقتباس
  #6  
قديم 02-25-2008, 04:54 PM
مدون مميز جداً
 
تاريخ التسجيل: Dec 2007
الدولة: المغرب
المشاركات: 263
شكر غيره: 4
تم شكره 6 مرة في 4 موضوع
افتراضي إستخدام عناصر Html مع تنسيق Css.

نعود إلى قالبنا الذي اعتمدناه منذ بداية الدورة، لكي يتوضح لدينا كيف سنكتب أكواد HTML التي ستجسد لنا التصميم السابق يجب أن نتعرف على عنصر من العناصر المتمددة الهامة.


العنصر DIV:

العنصر div هو عنصر لتجميع العناصر المتمددة والسطرية على حد سواء، وبواسطة ملف style.css وا ستخدام "الوسوم والفئات والمعرفات" (شرحها في فقرة لاحقة) يتم توصيف أي عنصر داخل عنصر div من حيث لون الخطوط وأنواعها والخلفيات والقياسات إلخ..

حسنا، هكذا نريد لقالبنا أن يبدو، أو بالأحرى هكذا سنقسمه العنصر DIV والعناصر الأخرى:




لعلك تلاحظ في الإطارات header.php و sidebar.php و footer.php تكلمنا من قبل عن إمكانية فصل محتويات القالب كملفات خارجية واستدعائها في ملف Index.php سنؤجل هذا الأمر، لكي يبقى البناء متكاملا، وبعد ذلك نجزء الملف.

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

هذه الأمور أو الاوصاف يحدده ملف style.css تبعا للوسوم (سبق الإشارة إليها) الفئات Class والمعرفات id.









الصور المصغرة للصور المرفقة
اضغط على الصورة لعرض أكبر

الاســـم:	balises.gif‏
المشاهدات:	2295
الحجـــم:	53.0 كيلوبايت
الرقم:	970   اضغط على الصورة لعرض أكبر

الاســـم:	baliseskey.gif‏
المشاهدات:	1808
الحجـــم:	4.8 كيلوبايت
الرقم:	971  
رد مع اقتباس
  #7  
قديم 02-25-2008, 05:58 PM
مدون مميز جداً
 
تاريخ التسجيل: Dec 2007
الدولة: المغرب
المشاركات: 263
شكر غيره: 4
تم شكره 6 مرة في 4 موضوع
افتراضي المعرفات Id والفئات class

في قالبنا الذي نحن بصدده قد نستخدم وسما معينا في أكثر من موضع، ونريد أن تختلف خصائص هذا الوسم، حسب موضعه:
مثلا قد نستخدم وسم العناوين الرئيسية h2 في عناوين المواضيع ونستخدمه أيضا في عناوين القوائم في القائمة الجانبية.


الفئات class:
نريد أن يكون عنوان المواضيع أحمرا وذا حجم أكبر قليلا، وعتوان القائمة أزرقا وذا حجم أصغر من حجم عنوان المواضيع:
لهذا سنحتاج إلى تخصيص:
العنوان من فئة "موضوع" = لون احمر وحجم كبير
العنوان من فئة "قائمة" = لون أزرق و حجم صغير

من المؤكد أن أي متصفح لن يفهمنا إذا كتبنا هذا، لكنه سيفهمه إذا كتبناه كما يلي:

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>موقعي</title>

<style type="text/css">

h2.menu {font-size: 12px; color: red;}
h2.post {font-size: 14px; color: blue;}

</style>

<h1>عنوان الموقع</h1>
<h3>وصف الموقع</h3>
</head>

<body>
<ul>
<h2 class="menu">عنوان القائمة</h2>
<li>الموضوع الأول</li>
<li>الموضوع الثاني</li>
</ul>

<h2 class="post">عنوان الموضوع</h2>
<p>محتوى الموضوع<p>

<h2 class="post">عنوان آخر</h2>
<p>موضوع آخر<p>
</body>

</html>
[/HTML]

تلميح: العنصر ul هو عنصر قائمة نقطية -غير مرقمة-، وهو من العناصر المتمددة ويوجد عنصر مماثل له وهو ol وهو للقائمة المرقمة، و il لإدراج عنصر في القائمتين.

لكي نطبق ماتكلمنا عنه من فصل المحتوى عن التنسيق:

ندرج كود HTML كما يلي:

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>موقعي</title>

<link rel="stylesheet" type="text/css" href="رابط style.css" title="description of style">

<h1>عنوان الموقع</h1>
<h3>وصف الموقع</h3>
</head>

<body>
<ul>
<h2 class="menu">عنوان القائمة</h2>
<li>الموضوع الأول</li>
<li>الموضوع الثاني</li>
</ul>

<h2 class="post">عنوان الموضوع</h2>
<p>محتوى الموضوع<p>

<h2 class="post">عنوان آخر</h2>
<p>موضوع آخر<p>
</body>

</html>
[/HTML]

وفي ملف style.css نكتب:

[HTML]
h2.menu {font-size: 12px; color: red;}
h2.post {font-size: 14px; color: blue;}
[/HTML]



المعرفات id:

من خلال هذه الخاصية أيضا يمكنك تحديد خصائص للعناصر من خلال ملف style.css ولكن الإختلاف بينها وبين الفئات، أن المعرفات لا يمكن استخدامها إلا لعنصر وحيد.

مثلا نريد جعل العنوان الاول يظهر بالأحمر والثاني بالأخضر:

نكتب في كود HTML:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>موقعي</title>

<link rel="stylesheet" type="text/css" href="رابط style.css" title="description of style">

<h1>عنوان الموقع</h1>
<h3>وصف الموقع</h3>
</head>

<body>
<ul>
<h2>عنوان القائمة</h2>
<li>الموضوع الأول</li>
<li>الموضوع الثاني</li>
</ul>

<h2 id="post1">عنوان الموضوع</h2>
<p>محتوى الموضوع<p>

<h2 id="post2">عنوان آخر</h2>
<p>موضوع آخر<p>
</body>

</html>
[/HTML]

وفي ملف style.css نكتب:

[HTML]
#post1 {color: blue;}
#post2 {color: green;}
[/HTML]


إشارة: يمكن الآن ربط القائمة في الاعلى بالموضوعين الاول والثاني:

نضيف الروابط إلى القائمة كالتالي:

[HTML]

<ul>
<h2>عنوان القائمة</h2>
<li><a href="url#post1">الموضوع الأول</a></li>
<li><a href="url#post2">الموضوع الثاني</a></li>
</ul>

[/HTML]

عناصر Div مخصصة بفئات ومعرفات:

كما ذكرنا عناصر div هي لتجميع عناصر أخرى، يمكن أن تفيدنا في تحديد خاصية ما لجميع العناصر ضمنها،مثلا كل العناصر المدرجة في div من فئة معينة تحصل على حجم خط محدد.

نكتب:
[HTML]
<div class="sizesmall">
مجموعة عناصر
</div>
[/HTML]


في ملف style.css
[HTML]
.sizesmall {font-size: 8px;}
[/HTML]

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

نكتب:
[HTML]
<div class="sizesmall">
<h2>عناوين داخلية </h2>
مجموعة عناصر أخرى
</div>
[/HTML]


في ملف style.css
[HTML]
.sizesmall {font-size: 8px;}
.sizesmall h2 {font-size: 14px;}
[/HTML]

كذلك مع المعرفات id، فقط لا تنسى أن المعرف الفلاني ينبغي أن يكون في الصفحة مرة واحدة فقط، واستبدل class ب id في ملف HTML و النقطة (.) بالمربع (#) في ملف style.css.

لاحظ الفرق بين h2 من الفئة class، في المثال الاول (post و menu)، و h2 داخل عنصر من الفئة class في هذا المثال (sizesmall):
كود:
الاول: h2.post أو h2.menu بدون مسافات
الثاني: .sizesmall h2 مسافة ثم h2









رد مع اقتباس
  #8  
قديم 02-25-2008, 06:49 PM
مدون مميز جداً
 
تاريخ التسجيل: Dec 2007
الدولة: المغرب
المشاركات: 263
شكر غيره: 4
تم شكره 6 مرة في 4 موضوع
افتراضي خطوة قبل البداية

بسم الله الرحمن الرحيم، يا أيها الناس إنفروا خفافا وثقالا
جهزوا أدواتكم واشحذوا هممكم فإنا مقبلون على أمر عظيم.
انتهينا من الكلام...؟ لا لا ليس بعد لكن سنبدأ مع قالبنا غدا سنفتح برنامجا، كلما وصلنا إلى نقطة يتوجب شرحها قمنا بشرحها شرحا مركزا ولن يكون الامر صعبا أبدا بعد أن تطرقنا لكل الأمور التي تتوجب معرفتها في المراحل السابقة،
سنفتح برنامجا نعم، يالها من حلاوة أن تحس أنك تصنع شيئا بنفسك، طيب بلاش كلام...! لا بد أنكم قمتم بتثبيت السيرفر المحلي وبرنامج ووردبريس وإلا لما وصلتم إلى هنا، -إذا وصلت إلى هنا مباشرة فاطلع على المرحلتين السابقتين من السلسلة أو من بداية دورة قوالب ووردبريس للمبتدئين فهي الآن تحتوي على فهرس لكل مواضيع الدورة -
إذن هي الخطوة قبل البداية:
1. إذهب إلى المجلد: /wp-content/themes
2.قم بإنشاء مجلد جديد وأطلق عليه اسم قالبك: سأسميه أنا aktar تبعا لعنوان المدونة أو الموقع "أكثر من رأي"
3.افتح محرر النصوص المفضل لديك (سنعمل على نوتباد ++) أنشئ ملفا جديدا، احفظه بإسم index.php في المجلد الذي أنشأته للتو، عند الحفظ في المحرر العادي قم بتحديد ترميز UTF-8، في برنامجنا نوتباد ++ يكفي أن تختار من قائمة format عنصر encode in UTF-8
أفضل الإحتفاظ بترميز ainsi واختيار العمل بترميز UTF-8 دون التغيير إليه وذلك باختيار عنصر UTF-8 without BOM



للتوسع في موضوع byte-order-mark-bom

حسنا لن تجد صعوبة في تطبيق هذه الخطوة مرة أخرى غدا، لأنك فعلتها الآن، أغلق برنامجك وانتظر المرحلة المقبلة، يمكنك مشاهدة الجزيرة أو قراءة القرءان، أو حتى القراءة أكثر عن HTML و CSS في المواقع التالية لكي لا تشعر بالملل أثناء انتظارك.

دروس html بالعربية.
دروس css بالعربية.
جميع العناصر والوسوم في Html بالإنجليزية.
الفرق بين العناصر المتمددة والعناصر السطرية بالعربية
الفرق بين العنصر والوسم والصفة بالعربية.
الفصل بين المحتوى والتصميم بالعربية.
الفرق المحتوى والتصميم في المواقع بالعربية

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









الصور المصغرة للصور المرفقة
اضغط على الصورة لعرض أكبر

الاســـم:	encode.gif‏
المشاهدات:	1816
الحجـــم:	13.5 كيلوبايت
الرقم:	974  

التعديل الأخير تم بواسطة a9laam ; 02-25-2008 الساعة 07:18 PM.
رد مع اقتباس
  #9  
قديم 02-25-2008, 09:22 PM
مدون جديد
 
تاريخ التسجيل: Nov 2007
المشاركات: 24
شكر غيره: 0
تم شكره 0 مرة في 0 موضوع
افتراضي

أسال الله العلي العظيم أن يجزيك بكل حرف حسنة والحسنة بعشر أضعافها إلا مائة ضعف ... والله يضاعف من يشاء









__________________
رد مع اقتباس
  #10  
قديم 02-25-2008, 10:38 PM
مدون مميز جداً
 
تاريخ التسجيل: Dec 2007
الدولة: المغرب
المشاركات: 263
شكر غيره: 4
تم شكره 6 مرة في 4 موضوع
افتراضي

اللهم آمين أخي الاديب، دعاؤك هذا شرح صدري وأسعدني كثيرا.

أخي سلامة أعذرني لم أنتبه لردك لأني حينها كنت حاشرا انفي، في css.
شكرا لك على متابعتك، أنتظر أسئلتك أيها الغالي.









رد مع اقتباس
  #11  
قديم 02-25-2008, 11:30 PM
مشرف
 
تاريخ التسجيل: Oct 2006
الدولة: دبــي / الإمارات
المشاركات: 371
شكر غيره: 2
تم شكره 20 مرة في 8 موضوع
افتراضي

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









رد مع اقتباس
  #12  
قديم 02-26-2008, 02:15 PM
مدون مميز جداً
 
تاريخ التسجيل: Jul 2007
المشاركات: 313
شكر غيره: 53
تم شكره 42 مرة في 14 موضوع
افتراضي

ما شاء الله تبارك الله

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

شكرا لك

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









رد مع اقتباس
  #13  
قديم 02-26-2008, 04:27 PM
مدون مميز جداً
 
تاريخ التسجيل: Dec 2007
الدولة: المغرب
المشاركات: 263
شكر غيره: 4
تم شكره 6 مرة في 4 موضوع
افتراضي

أخي الحبيب زلزال مرورك يزلزلني، ألهج بالتأمين على دعائكم فهو ذخر لي، أتمنى لك التوفيق ولك بالمثل.

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









رد مع اقتباس
  #14  
قديم 04-24-2008, 11:51 PM
مدون جديد
 
تاريخ التسجيل: Sep 2007
المشاركات: 9
شكر غيره: 0
تم شكره 0 مرة في 0 موضوع
افتراضي

يعطيك العافية اخي الكريم

كل الود









رد مع اقتباس
إضافة رد


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are معطلة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
دورة قوالب ووردبريس: ماذا تعرف عن html؟ يونس مقتطفات تدوينية 0 06-14-2009 06:47 PM
دورة قوالب ووردبريس للمبتدئين a9laam قوالب ووردبريس - عام 31 07-14-2008 09:52 PM
دورة قوالب ووردبريس[5]: بناء القالب، الجزء الثاني. a9laam قوالب ووردبريس - عام 14 06-08-2008 10:17 AM
دورة قوالب ووردبريس[4]: بناء القالب، الجزء الأول a9laam قوالب ووردبريس - عام 16 03-11-2008 03:47 PM
قوالب رائعة تحتاج إلى تعريب <<< أضعها بناء على طلب الإخوان :: الخلوق :: طلبات القوالب / طلبات تعريب القوالب 12 06-28-2007 03:53 PM



الساعة الآن 09:58 PM.