السلام عليكم ورحمة الله وبركات
مرحبآ بكم زوار مدونة العالمي
الان وكما وعدتكم سابقآ انني سف اقدم لكم دورة عن تصميم قوالب الـبلوجر واليوم سوف ابدأ معكم الدرس الاول في هذه الدورة .. وكما قلت ووضحت سابقآ عن المتطلبات الاساسية التي سوف نستخدمها في تصميم القوالب وهيا متصفح لعرض ما نقوم بتصميمة وثانيآ برنامج محرر نصوص وانا سوف استخدم برنامجadobe dream weaverويمكنك استخدام اي محرر نصوص اخر .....
الان لنبدأ .. ما الذي يلزمنا لتصميم قالب بلوجر وتجربته ؟؟
أولآ توجه الي بلوجر وقم بإنشاء مدونة كي تجرب عليها ما ستتعلمه
ثانيآ هل تعرف ما هيا اللغات الأساسية المستخدمة في تصميم قوالب البـلوجر ؟؟
اللغة الاساسية الاولي وهيا لغة HTML واللغه الثانية هيا لغة css
لغة الـ html هيا اللغة الاساسية الاولي في القالب ومن خلالها يتم عمل القوائم ويتم عمل المحتوي للمدونة
ولغة الـ css وهيا اللغة الاساسية الثانية التي من خلالها يتم التحكم في الالوان والاحجام والتنسيق وحيث انها تعطي القالب الحياة والحيوية
اللغة الاساسية الاولي وهيا لغة HTML واللغه الثانية هيا لغة css
لغة الـ html هيا اللغة الاساسية الاولي في القالب ومن خلالها يتم عمل القوائم ويتم عمل المحتوي للمدونة
ولغة الـ css وهيا اللغة الاساسية الثانية التي من خلالها يتم التحكم في الالوان والاحجام والتنسيق وحيث انها تعطي القالب الحياة والحيوية
إذآ فـأنت الان تعرفت علي اللغات التي يتم بها تصميم قالب البلوجر
إذآ كيف تكتب لغة الـ HTML
لغة الـ html هيا لغة بتتكون من مجموعه من الوسوم او مايسمي بـ الـ Tags
إذآ ما هوا الوسم او التاج
الوسم هوا عبارة عن كلمة تكتب بين قوسين من هذا الشكل < >
إذآ ما هوا الوسم او التاج
الوسم هوا عبارة عن كلمة تكتب بين قوسين من هذا الشكل < >
علي سبيل المثال <Tags> فهذا يسمي وسم
ولكل وسم بداية وسم نهاية ويكون بهذا الشكل </>
وعلي سبيل المثال </tags>
وعلي سبيل المثال </tags>
إذآ الان عرفنا ان لغة الـ html تتكون من مجموعه من الوسوم وعرفنآ ايضآ ان لكل وسم بداية وسم اخر يسمه وسم النهاية له والفرق بين وسم البدية ووسم النهاية هوا علامة /
و للغة الـ html صيغة اساسية تكتب في اي تصميم وتكون بهذا الشكل
ما معني هذا الكلام الذي امامك !!!
اولآ انت بدأت بـ وسم <html> ثم اغلقت الوثيقة بوسم </htm> وهذا كي تعرف للمتصفح ان هذا القالب مكتوب بلغة تسمي HTML
اولآ انت بدأت بـ وسم <html> ثم اغلقت الوثيقة بوسم </htm> وهذا كي تعرف للمتصفح ان هذا القالب مكتوب بلغة تسمي HTML
ثم تجد بعد وسم الـ <html> وسم اخر يسمي <head> وهذا الوسم هوا رأس الصفحة
ويحتوي وسم الــ <head> هذا علي وسم اخر يسمي <title> وداخل هذا الوسم تكتب عنوان رأس الصفحة (( اي عنوان المدونة الخاصة بك (( ثم تغلق هذا الوسم </title> عندما تنتهي من كتابة العنوان ومن ثم تغلق الوسم </head> مادمت لاتريد ان تكتب شئ اخر في رأس الصفحة
ويحتوي وسم الــ <head> هذا علي وسم اخر يسمي <title> وداخل هذا الوسم تكتب عنوان رأس الصفحة (( اي عنوان المدونة الخاصة بك (( ثم تغلق هذا الوسم </title> عندما تنتهي من كتابة العنوان ومن ثم تغلق الوسم </head> مادمت لاتريد ان تكتب شئ اخر في رأس الصفحة
ومن ثم تفتح وسم جديد وهوا الوسم <body> وهذا الوسم كما انا موضح في الصورة يوضع بداخلة الروابط والصور وكل شئ وبعد الانتهاء من وضع الاشياء يتم اغلاق الوسم </body>
ومن ثم بعد الانتهاء من تصميم القالب تقوم بادخال وسم الاغلاق </html>
إذآ فالنبدأ بالتطبيق العملي
أولآ قم بكتابة صفحة الاتش تي ام ال الخاصة بك كالتالي وغير مايلزم
ثم انسخ هذا الكود وادخلة في المدونة التجريبة وقم بعمل حفظ
ستظهر لك علمة الخطأ التالية بالطبع اتعرف لمااااذا هذا لأن القالب بهذا الشكل لا يحتوي علي صناديق والصناديق هيا عندما تدخل الي تخطيط وتضغط علي اضافة اداه مثا اعلان اوكود في هذا القالب الذي انت رفعتة هوا لايحتوي علي صنادي وحيث ان قوالب بلوجر لابد ومن ان تحتوي علي صناديق و لأن بلوجر لها كوود خاص في الادخل للقالب اذآ دعني اعرفك علية واشرحه لك بالتفصيل
هذا هوا الكود الاصلي او الرئيسي لمدونات البلوجر
ستظهر لك علمة الخطأ التالية بالطبع اتعرف لمااااذا هذا لأن القالب بهذا الشكل لا يحتوي علي صناديق والصناديق هيا عندما تدخل الي تخطيط وتضغط علي اضافة اداه مثا اعلان اوكود في هذا القالب الذي انت رفعتة هوا لايحتوي علي صنادي وحيث ان قوالب بلوجر لابد ومن ان تحتوي علي صناديق و لأن بلوجر لها كوود خاص في الادخل للقالب اذآ دعني اعرفك علية واشرحه لك بالتفصيل
هذا هوا الكود الاصلي او الرئيسي لمدونات البلوجر
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML>
<html>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<b:section id="header"/>
</body>
</html>
إذآ انسخ الكود الذي انا وضعتة لك وجرب ستجد ان القالب قبل التعريف للكود ثم ادخل علي التخطيط ستلاحظ وجود صندوق ويمكنك من خلالة اضافة ما تريد
وثم ادخل الي المدونة ستجد انها عبارة عن صفحة بيضاء وهذا طبيعي لاننا لم نضيف اليها اي شئ حتي الان
إذآ ما معني التغيير ات التي وضعنها الي في كود الـ html
أولآ كود <?xml version="1.0" encoding="UTF-8" ?>
وهوا اول كود يكتب في قالب بلوجر وهوا يعرف بلغة المدونة utf-8 اي اللغة العالمية وليس العربية فقط فبهاذا الكود عندما تكتب اي شئ بأي لغة يظهر للجميع اما اذا لم يوجد هذا الكود وحدد كود اخر اي يكون محتوي المدونة عربي فقط ستلاحظ عند كتابة اي كلمات بلغة اجنبية سلاحظ انها لن تظهر في القالب
ونأتي الي الكود الثاني الذي اضفناه الي المدونة وهوا
<!DOCTYPE HTML>
وهذا الكود خاصية وهوا تعريف للمتصفح بأن القالب بلغة html
وهذا الكود خاصية وهوا تعريف للمتصفح بأن القالب بلغة html
نأتي الي الكود الثالث وهوا
<b:skin><![CDATA[
]]></b:skin>
وهذا خالص ببلوجر وخاص بالصناديق اي الاضافات ولابد من كتابتة في القالب وتحتة تكتب الاستايلات
نأتي الي الكود الاخير وهوا
<b:section id="header"/>
يوضع هذا الوسف داخل الجسم <body> وهوا اضافة صندوق ويكون الكود العام لمدونة بلجر هوا
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML>
<html>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<b:section id="header"/>
</body>
</html>
يمكنك ان تقوم بنسخة وتركيبه في قالبك الان
ومن هنا ينتهي درس اليوم وكن علي علم كل ماشرحتة هذا فهوا فقط الاساسيات ولذا قمت بكتابتة فقط ولكن بداية من الدروس القادمة سوف اشرحها لكم بالفيديو وسوف اطبق معكم هذا الدرس مرة اخري واراكم في درس جديد من دورة تعلم تصميم قوالب بلوجر اخوكم عبدالله جلال العالمي www.al3almi.info
ليست هناك تعليقات:
إرسال تعليق