[درس] تقطيع وتركيب قالب للووردبريس مع الستايل (الجزء 5 - ب)

ثم نحدد الجزء السفلي من التصميم



ونفس ما عملنا بالجزء العلوي من التصميم نقوم بقص الخلفية المتكررة أفقياً كالتالي



ليصبح تقطيعنا في الأخير كالتالي



الأن راح نحفظ الصور اللي حددناها راح يقطعها لنا الفوتوشوب ,

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

نكمل الموضوع , اختر File ثم Save For Web Or Devices كما في الصورة التالية



ستظهر لنا نافذة كبيرة , يمكننا عن طريقها تحديد كل صورة تم تقطيعها واختيار الإعدادات المناسبة لها فمثلاً الصور الكبيرة والتي فيه ألوان كثيره وتدرجات كثيره يجب ان تكون ذات صيغة JPG وبجودة 100% اما الصور التي تحتوي على الوان بسيطه من دون تدرجات وصور صغيره نجعلها GIF بعدد ألوان بسيط

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

كما في الصور التالية :









في الأخير نضغظ على Save ستظهر لنا هذه النافذة , ننشأ مجلد جديد يكون اسم مجلد الستايل الذي تبنيه



نفتح المجلد نكتب images ثم نضغظ Save



الان تم تقطيع الستايل نتجه إلى المجلد الذي أنشأناه



نفتحه لنجد صور الستايل مقطعه الان علينا ان نحدد الصور التي لا نريدها ونحذفها



لتبقى لدينا فقط الصور التي نريد استخدامها في الستايل والتي حددناها سابقاً في الفوتوشوب




يتبع

الان علينا ان نأتي بملفات ستايل ووردبريس لكي ننشأ الستايل الخاص بنا وذالك بنسخ مجلد Default

داخل wp-content/themes/

يمكنك اخذها من مدونتك السابقه او تحميلها من ووردبريس http://ar.wordpress.org

وننقل ملفات الستايل من دون images داخل المجلد الذي انشأناه NiceeeStyle



CSS & XHTML

الان نحذف الملف rtl.css داخل المجلد NiceeeStyle لأننا لا نحتاجه حيث سيكون جميع عملنا على الـ CSS في ملف style.css



الأن نفتح ملف style.css بأي برنامج تحرير



( فقط لكي نعمل إجراءات بسيطه وليس لكتابة الـ CSS ) هذه الإجراءات هي كتابة عنوان الستايل وبيانات تصميم الستايل , أولاً نقوم بحذف جميع أكواد الـ CSS



الأن بما اننا حذف الستايل بالكامل وسنبدأ بعمل تصميمنا الخاص سنقوم بتسمية التصميم بأسمنا

هذه المعلومات ستكون موجوده في لوحة تحكم المدونة



الأن نحفظ الملف ونغلقه

وننقل مجلدنا NiceeeStyle إلى المدونة داخل مجلد wp-content/themes

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



راح نغير صورته في الأخير لكن اضغط على اسمه ستايل نايس



شكله حالياً Blank يعني فاضي بدون اي ستايل اضغط على تفعيل ستايل نايس عشان نفعله ثم اضغط تحرير القالب عشان نبدا نعدل على الـ CSS



راح نجد اول ما تضغط على تحرير القالب ملف style.css مفتوح , وطبعاً فاضي حالياً نبي نعدل على الـ XHTML فنروح لملف أعلى الصفحة



هذي الصورة للتوضيح



في ستايلنا ما نحتاج الـ div اللي بالآي دي headerimg لذالك راح نمسحه , ووننقل الـ div اللي بالآي دي page اسفل الهيدر بحيث راح نستخدمه في خلفية المحتوى كما في الصورة التالية



أحب اوضح لكم إذا فهمت التعامل مع الـ XHTML والـ CSS راح تقدر تصمم اي ستايل في العالم بكل سهوله

نكمل شرحنا

نروح لملف footer.php الخاص بأسفل الصفحة ونلقحه مثل الصوره التاليه اهم شي لا تنسون تسكيرة الـ div اللي بالآي دي page اللي سويناها في الهيدر وهي أول سطر في هذا الملف



الان نفتح ملف index.php اللي هو الصفحة الرئيسية , ونغير مثل اللي في الصورة , مجرد تغيير اماكن عشان نضبطها في نفس التصميم اللي سويناه مثلاً التعليقات نخليها فوق وبدال بواسطة نكتب المدون مثل ما سوينا في تصميمنا ومثل ما تم التخطيط عليه



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



الأن ننتقل إلى ملف الستايل style.css ملف التنسيق

المشوار طويل وقد يكون معقد لبعض من لا يعرف الكثير عن CSS


يتبع

نبدأ بسم الله

أولاً نكتب ستايل اول وسم لدينا وهو body كالتالي

margin معناتها المساحة الخارجية إفتراضياً راح من دون وضع 0 بكسل راح يكون هناك مسافه بين اي عنصر في الصفحة وحائط المتصفح إن صحت التسميه لكن بوجود margin:0px تعني ان المساحة غير موجوده بين اي عنصر وحدود المتصفح

background: هو الخاصية المتعلقه بالخلفية سواء كان لون او صورة , في حالتنا هذه لون الخلفيه هو الأبيض فلن نكتب اي شي فقط سنضع خلفيه صوره بعنوان images/header_bg.jpg بعد ذالك اضفنا repeat-x هذا معناه ان التكرار أفقي فقط وليس أفقي وعمودي فلذالك ستكون الخلفية بالطول فقط

الأن بعد حفظ الملف ستظهر لدينا خلفية علوية بالصورة التي اخترناها

نكمل الكود المتعلق بالـ CSS

انتهينا من الـ Body ننتقل إلى اللي بعده

مثلاً نبي نخلص من الجزء العلوي اللي هو الهيدر نكتب الآي دي الخاص بالهيدر وهو

نضيف صورة الخلفية الخاصة بالجزء العلوي من التصميم

لو لاحظنا بأن الصورة header.jpg طولها الاساسي بالعرض 763 بكسل , واحنا كاتبين 733 بكسل ! ليش ؟ لأننا أضفنا padding الـ padding يعتبر من ضمن الطول الخاص بطول الوسم فـ padding-right يكون 30 بكسل و الطول 733 بكسل المجموع يساوي 763 بكسل وهكذا

لماذا وضعنا padding-right ? لكي نضبط مكان عنوان الموقع ويجب علينا وضع الإرتفاع لكي تظهر لنا صورة الخلفية كاملة وذالك بكتابة الـ Height

هناك نقطه أخيرة في هذا الوسم وهو margin:0 auto هذا السطر يعني توسيط الوسم في وسط الصفحة, هناك طريقه كتابه اخرى لكن هذه افضلها بحيث انها من المعايير القياسيه المعتمده كتابةً وجميع ما كتبت لكم في اكود هي خصائص سليمه تعمل في الفايرفوكس والإكسبلورر

ننتقل إلى الخطوة التالية

وقبل ان ننتقل إلى الخطوة التالية أود ان اوضح شيء دائماً في مجال تقطيع وتركيب الستايل يجب عليك ان تنتقل بين كود الـ XHTML و الـ CSS لكي تعرف أسامي الوسوم والآي دي تبعها فمثلاً

الجزء العلوي يحتوي على

[HTML]<div id="header">
<h1><a href="<?php echo get_option(’home’); ?>/"><?php bloginfo(’name’); ?></a></h1>
<div class="description"><?php bloginfo(’description’); ?></div>
</div>[/HTML]

انتهينا من الـ header وباقي h1 اللي داخل الهيدر وباقي كلاس description

بالنسبة لـ h1 هو الوسم الذي يحتوي على عنوان الموقع

وبالنسبه لكلاس description هو الوسم الذي يحتوي على النص الذي اسفل عنوان الموقع كجملة او شعار الموقع النصي

ننتقل إلى الـ CSS بكتابة الخصائص المتعلقة بوسم الـ h1 و الدسكريبشن

الأن ماذا تعني هذه الأكواد

اول سطر هو وسم h1 الذي داخل #header لماذا وضعنا #header لماذا لم نستخدم h1 مباشرة كالتالي

لأننا نريد تعديل h1 فقط الذي بداخل الهيدر وليس اي h1 آخر , فأحياناً في المقالات والمحتوى قد نكتب عنوان يتكون من الوسم h1 هكذا لن يتأثر لأنه ينطبق الستايل على h1 الذي بداخل header فقط

margin:0px كتبناها في h1 لان h1 بشكل إفتراضي يحتوي على مسافات كثيره ونحن لا نريد هذه المسافات المعقده فقط نريد المساحه التي نحددها فنكتب padding-top:25px لكي نظبط مكان عنوان الموقع ويكون هناك مسافه بين حدود المتصفح عنوان الموقع

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

ننتقل إلى الجزء الثاني من h1 وهو الذي بجانبه الوسم a وهذا يعني الستايل الخاص بعنوان الموقع عندما يكون رابط او وصلة فسنحدد اللون بكتابة color: ثم رمز اللون المطلوب

وبعدها الجزء الثالث يوجد الوسم a مع :hover وهذا يعني عند مرور الفأرة على الرابط نفذ هذا الستايل وهو تغيير اللون قليلاً فقط

بعد تنفيذ هذا الكود وحفظه سترون بأن النتيجه اصبحت افضل لكن ليست كامله فلدينا مشوار طويل جداً جداً والله يكون بعونكم

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

بحيث يتم تنفيذ الستايل على الوسم <a> في اي مكان في الستايل بعدم وجود خط سفلي او اي زخرفه ويكون لون الرابط دائماً بالرمز الموضوع

هناك خاصيه اخرى نود ان نضيفها لوسم عام وهو وسم الصور img فعندما نضع على الوسم img رابط معين بشكل إفتراضي سيكون هناك حدود كبيره على الرابط وهي غير جميله نسبياً فنزيلها بشكل عام بكتابة الكود التالي

الأن نرجع للهيدر احنا خلصنا من h1 وباقي description

اعتقد واضح جداً

كذا نكون خلصنا من الجزء العلوي بشكل اساسي ننتقل إلى الجزء السفلي

شرحنا معضم الأكواد اللي هنا سابقاً وواضح جداً

فبعد كتابة الكود السابق الخاص بالفوتر كذا تكون انتهيت من الفوتر بشكل كامل كتصميم مثل ما احنا عملناه بالفوتوشوب ممكن تكون بالنسبه لك سهله كذا لكن لما تصمم ستايل خاص اخر ياخذ وقت على بال ما تحدد الخصائص اللي تبي تختارها عشان يضبط معك الستايل غير كذا يعتمد الـ CSS على حسب تعقيد التصميم او بساطته

الأن تقريباً خلصنا الهيدر بشكل أساسي والفوتر بشكل نهائي ننتقل إلى محتوى الصفحة بداية بالخلفيه الخاصه بها وتوسيطها

مثل ما تذكرون احنا نقلنا الـ div اللي له الآي دي page بعد الهيدر وينتهي قبل الفوتر فهو يعتبر الوسم الخاص بمحتوى المدونة

فنكتب الكود

اول شي يمكن تستغرب ليش وضعت اول شي body وليس #page فقط , انا جربت #page اول شي بدون اي سبب ما رضى يتنفذ الكود ليش ما ادري لكن احياناً في عالم الكمبيوتر تجيك اشياء مالها معنى وغريبه ماكانت تصير لك اول حتى اني جربت الكود باستخدام #page فقط بدون body في برنامج تحرير خاص واشتغل طبيعي لكن في المدونة ما رضت معي فالحلول اللي جربتها واشتغلت معي اني اضع body قبل الآي دي وهو الوسم الذي يحتوي على الوسم آي دي page او اغير اسم page عموماً اذا اشتغلت معاكم #page من دون body ممتاز او استخدم هالطريقه او غير الآي دي مثل ما تحب اهم يشتغل عندك

انا قد واجهتني مشاكل غريبه مثلاً ستايل وسم معين ما رضى يشتغل اذا كتبته في مكان معين لكن اذا نقلته إلى مكان آخر في نفس الملف اشتغل !

عموماً نكمل الموضوع

الان داخل المحتوى يوجد هنا المقالات والقائمة الجانبية , راح تلاحظ انها صايره تحت بعض واحنا نبيها تكون جمب يعض

الطريقه كالتالي

الوسم الخاص بالمقالات راح تلاحظ اسمه content في ملف الصفحة الرئيسية فنبدأ فيه بالتالي في ملف التنسيق

فيه خاصيه جديده هنا ما شرحناها في اي من الخصائص السابقه وهي خاصية float هذه الخاصيه تجعل الوسم يكون كالنص بحيث اي وسم بعده راح يكون بجانب هذا الوسم لأنه float وليس اسفله بشرط ان يكون الذي بعده ايضاً يحمل خاصية float او هو اساساً نص او اي عنصر يكون inline يعني يسمح ان يكون في نفس السطر اما الوسوم التي لا تسمح تكون block اي انها تأخذ العرض كامل لوحدها

حالياً أضفنا float على content وراح نضيف float على القائمه الجانبيه لكي تصبح المقالات والقائمة الجانبيه جنب بعض

والكود الخاص بالقائمة الجانبية كالتالي :

دائماً حط في بالك إذا استخدمت float عشان اي عنصر بعده يجي جمبه بعد نهاية مكان العناصر اللي تبيها خلاص توقف يعني ما يكون جمبه شي لازم تضيف كود clear يعني يوقف عملية الـ float بحيث ان اي وسم آخر يصير تحت الوسم اللي يحتوي على float ويكون بشكل متناسق

فمثلاً بعد الـ content وال sidebar نبي نوقف الـ float ونضع هذا الكود بعدهما , وافضل مكان هو في الفوتر بحيث انه قبل ما نسكر الوسم آي دي page نضع كود الـ clear كالتالي

[HTML]<div class="clear"></div>
</div>
<div id="footer_bg">
<div id="footer">
<p>
<?php bloginfo(’name’); ?> مدار بواسطة
<a href="http://arabic.wordpress.net">ووردبريس المعرب</a>
<br /><a href="feed:<?php bloginfo(’rss2_url’); ?>">خلاصة التدوينات</a>
- <a href="feed:<?php bloginfo(’comments_rss2_url’); ?>">خلاصة التعليقات</a>
<!– <?php echo get_num_queries(); ?> عملية. <?php timer_stop(1); ?> ثانية. –>
</p>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>[/HTML]

clear يعتبر كلاس CSS لذالك يجب ان نضعه في ملف التنسيق كذالك كالتالي :

لأن لننتهي من القائمة الجانبية نريد ان نعمل القوائم وعنوان القوائم والكود كالتالي :

الخاص بعنوان القائمة

الخاص بالقائمة

الأن انتهينا من القائمة الجانبية ننتقل إلى المقالات

اترككم تحللونها بنفسكم صراحه العمليه سهله كلها نفس الخصائص اللي شرحناها سابقاً

كذا نكون خلصنا من المقالات برضوا التي في الصفحة الرئيسية


يتبع

الأن لننهي الجزء العلوي فهناك قائمة علوية تحتوي على ( الرئيسية | نبذه | اتصل بنا | سجل الزوار ) اي صفحات تضيفها عن طريق لوحة التحكم

يجب علينا اولاً إضافة الوسم الخاص بالقائمة العلوية في الـ XHTML لذالك لنذهب إلى ملف أعلى الصفحة header.php

لاحظ الفروقات في وسم header التي سنضيفها هنا في الكود وهي باللون الازرق

[html]<div id="header">
<h1><a href="<?php echo get_option(’home’); ?>/"><?php bloginfo(’name’); ?></a></h1>
<div class="description"><?php bloginfo(’description’); ?></div>
<div id="header_bar">
<div id="pages">
<ul><li><a href="<?php echo get_settings(’home’); ?>/">الرئيسية</a></li>
<?php wp_list_pages(’sort_column=menu_order&depth=1&titl e_li=’); ?>
</ul>
</div>
<div id="search"><?php include (TEMPLATEPATH . ‘/searchform.php’); ?></div>
</div>
</div>[/html]تحتوي على وسم pages ووسم search الذين بداخل الوسم header_bar والذي يعتبر كـ container او holder للأثنين بحيث يبقيهما في سطر واحد بتناسق

لاحظ الكود المتعلق بعرض الصفحات مكتوب فيه sort_column=menu_order وهذا يعني ان ترتيب عرض الصفحات معتمداً على ترتيب الصفحات من لوحة التحكم , يمكنك ترتيب عرض القائمة حسب آخر تحديث بتاريخ الصفحة كالتالي sort_column=post_date

ويمكنك كتابة ‘exclude=17,38′ اي لا تعرض هذه الصفحات في القائمة

يمكنك معرفة جميع الأوامر في هذه الدالة عن طريق هذه الصفحة

http://codex.wordpress.org/Template_Tags/wp_list_pages

فمثلاً كتبنا depth=1 وذالك يعني انه يتم عرض فقط الصفحات الرئيسية وليس الفرعية و title_li= ولا شي لأننا لا نريد عنوان لهذه القائمه من الصفحات

الان ستجد وسم الآي دي search قررت فجأه ان اضع صندوق البحث هنا لأنني في التصميم لم اضع له مكان وكان هذا المكان كأنه مخلوق عشانه فقلت فرصه حلوه

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

ونكتب الأكواد الخاصة بتنسيق القائمة وصندوق البحث كالتالي :

كذا وضعنا القائمة العلويه مع صندوق البحث

في الهيدر باقي شيء واحد فقط وننتهي منه ومن الصفحة الرئيسية بشكل كامل والباقي هو زر الـ RSS

نرجع لملف أعلى الصفحة header.php ونضيف الصورة كالتالي ( لاحظ الإضافات بالخط الازرق )

[html]<body>

<div id="header">

<div id="header_right">
<h1><a href="<?php echo get_option(’home’); ?>/"><?php bloginfo(’name’); ?></a></h1>
<div class="description"><?php bloginfo(’description’); ?></div>
</div>
<div id="header_left">
<a href="?feed=rss2"><img src="wp-content/themes/NiceeeStyle/images/rss.png" alt="RSS" /></a>
</div>

<div class="clear"></div>

<div id="header_bar">
<div id="pages">
<ul><li><a href="<?php echo get_settings(’home’); ?>/">الرئيسية</a></li>
<?php wp_list_pages(’sort_column=menu_order&depth=1&titl e_li=’); ?>
</ul>
</div>
<div id="search"><?php include (TEMPLATEPATH . ‘/searchform.php’); ?></div>
</div>
</div>

<div id="page">[/html]بعد ذالك نتوجه إلى ملف التنسيق لكي نضع خصائص الوسوم التي أنشأناها لكي تكون header_right بالخاصية float:right ويكون الوسم header_left بالخاصية float:left لكي يكون عنوان الموقع والشرح تحته في header_right وتكون صورة الـ RSS في header_left وهكذا يكونان بجانب بعض

أخيراً انتهينا بأغلب أساسيات تصميم الستايل

باقي اشياء بسيطه جداً راح اتركها لكم لأن أولاً وأخيراً التخطيط والتنسيق يمكن عمله بطرق كثيره على حسب جهدكم فيه

هذا هو التصميم بعد الإنتهاء ويمكنكم تحميل الستايل كذالك هنا



لتحميل ستايل المدونة بعد الإنتهاء منها كامله باللون الأزرق أضغط هنا

قمت بتعديل بسيط في خلفية التصميم وتجهيز الستايل خاص للبنات باللون الوردي

ما اخذ وقت كبير لان كل شي جاهز ( التقطيع والـ CSS ) فقط تغيير الوان بالفوتوشوب وألوان النصوص

ليصبح كالتالي



لتحميل ستايل المدونة بعد الإنتهاء منها كامله باللون الوردي أضغط هنا

تقبلوا اطيب تحياتي واتمنى ان الدرس يعجبكم وينال الفائدة المرجوة

لمشاهدة الستايل حياً

تحياتي للجميع

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

جاري التطبيق بالتأكيـد

وجزاك الله الف الف خير هذا الشـرح كنت انتظرهـ منك على احـر من الجمـر

واعتقـد انه الشرح الوافي والكامـل بإذن الله ..

الله يبارك فيك .. ويجعل هذا العمل في ميزان حسناتـك يارب


دمت بـــــود ،،

حياك الله اخوي iDesiGn

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

بإذن الله سيتم طرح مجموعة Tips لقوالب الووردبريس والـ CSS لاحقاً

شكراً لك على المرور



حياك الله أخوي توفي وجزاك الله خير على مرورك الجميل

أخوي جزاك الله خير على الشرح الرائع
ولكن
الا يمكن عمل الهيدر و الفوتر و لصقها في قوالبها مباشرة دون الحاجة الى css يعني تصمم و تركب على طول مثل المنتديات...
والله ما أحب الـcss

مرحبا اخوي ابو زايد

بإمكانك عمل ذالك طبعاً ولكن الـ CSS أفضل لأنه يجعل لك الكود نظيف وكذالك لأنه معتمد من المعايير القياسية وليظهر التصميم بأفضل صورة وكذالك هناك مميزات كثيره ...

http://css-discuss.incutio.com/?page=WhyCss

Why CSS

1. By editing a single CSS file, you can make sitewide design changes in seconds.
   بتعديل ملف واحد CSS بإمكانك تغيير تصميم الموقع كامل في دقائق
2. CSS lets you output to multiple formats quickly.
   CSS تجعلك ترى اكثر من شكل او فورمات للموقع بسرعه
   
   
3. CSS lets you use logical names for page elements. You can, for example, give a DIV the name "header", or a H1 the class "headline". It's self-describing.
   CSS تمكنك من إعطاء العناصر أسامي مميزة مثلاً تعطي الوسم Div اسم Header اي الجزء العلوي من الموقع أو H1 بـ headline أي عنوان المقالة
   
   
4. External CSS files are cached by browsers, improving load time.
   ملفات ال CSS يتم التعامل معها من كاش المتصفح لتعطي سرعة افضل في تحميل الموقع
   
   
5. CSS eliminates the need for messy code -- namely font tags, spacer gifs and nested tables. This improves load time and makes developers' lives easier.
   CSS تعطيك الجودة في الأكواد لكي لا تكون مبعثره وفيها جداول ومسافات كثيرة بل كود بسيط وسهل وواضح مما يعطي التطوير اسهل واسرع
   
   
6. CSS lets you do things normal HTML doesn't. Examples: better font control, absolute positioning, nifty borders.
   CSS تجعلك تستطيع عمل أشياء لا يمكنك عملها بالـ HTML العادي مثل التحكم بالخطوط بشكل أفضل , الأبسليوت والحدود
   
   
7. Practical use of CSS encourages proper HTML structure, which will improve accessibility and search engine placement.
   إستخدام الـ CSS يمنح هيكلة أفضل للـ HTML مما يساعد في سهولة الوصول لها من محركات البحث.
   
   
8. CSS's :hover PseudoClass cuts down on the need to use JavaScript onmouseover calls.
   CSS يمنحك إستخدام خاصية :hover السهلة والرائعة والتي تغنيك عنها بالجافاسكريبت مما يجعل الكود أفضل وأوضح
   
   
9. If you want valid XHTML Strict you have to use it anyway
   إذا كنت تريد أن يكون موقعك معتمد بشكل صحيح بالـ XHTML ويعمل في كل المتصفحات يجب عليك استخدام CSS

تقبل اطيب تحياتي يا غالي

يعطيك العافية استاذي الكريم

دروس ولااروع بارك الله فيك
ورحم والديك

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

المهم اتمنى يكون التصميم قد نال على الاستحسان

ما شاء الله اخوي الرايق صراحه تصميم رائع وجميل

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

لكن حلو تجرب تنفذ الطريقه بحيث تقطعها بشكل ممتاز وبصراحه بدايه موفقه ورائعة

اعجبني كثيييييير عملك

بالتوفيق وبارك الله فيك

أخوي مشكور و ربي يعطيك العافية سؤال أخير الله يبارك فيك

الا يوجد برنامج يقوم بتحويل برمجة الـhtml الى الـcss

أخوي ابو زايد HTML هي لغة ترميز و CSS هي لغة تصميم وكل واحده تختلف عن الثانيه

فلغة الترميز هي تعتبر رموز فمثلاً <h1></h1> هو وسم يرمز لـ Header Title 1 يعني العنوان الرأسي الأول

اما لغة التصميم والستايل فهي لغة التصميم للـ HTML فمثلاً

يعني اي عنوان رأسي يجب أن يكون لونه احمر في الموقع

ولكي تبدع في الـ CSS هناك محررات ويب مثل Dreamwaver وغيرها تدعم الـ CSS بشكل كبير ,

بحيث يعطيك نافذة تختار الألوان ونوع الخط والخلفية .. الخ ويعطيك الـ CSS كاملاً

اي استفسارات او مناقشة ارحب بها

وبارك الله فيك

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

و عند الإنتهاء من التصميم أعدت كل شيء الى ما كان المهم

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

تقبل خالص تحياتي و تقديري
محبكم حسن أبو زيد

جزاك الله خيرا عن كل هذه الدروس
وبصراحة شرح ممتع وممتاز
بس انا لسه مبتدأ وبتعلم Html و css بس استفدت جدااااا
واستفدت أكتر من هذا الموضوع في مدونتك تطوير الويب - تلميحات كل أسبوع (1) وإضافة fireburg
بصراحة حلوة جدا
ولكن عندي شوية اسئلة وطلبات منك واعذرني انا مبتدأ (يعني لو الأسئلة ساذجة ما تضايقش)
1. مفيش إضافة زي الfireburg تكون لأكواد الphp بدل css يعني يظهرلي أماكن اكواد ال php واماكنها وانا اقوم بتعديلها عشان اشوفها على الطبيعة مش مجرد ملف تيكست
2. انا كنت بدور على طريقة إزاي اعدل بيها ثيم الوورد بريس من خلال ال adobe dreamweaver عشان هو بيظهر الأكواد اسهل (يعني ما بدورش عليها وسط التيكست كله) من خلال العرض design وليس كود
ووجدت موقع اجنبي شرح الطريقة ولكني ما فهمتش منه حاجة فيا ريت تشرحلنا الطريقة بالتفصيل وكيفية ربط الphp templates با style.css ونعدله في dreamweaver عشان انا أعشق حاجة اسمها dreamweaver وبعد ما نعدلها ازاي نحفظ ال templates منفرده والستايل منفرد

آسف على الإطالة ويا ريت تلبيلي طلبي عشان بجد انا نفسي اتعلم قووووي
ده رابط الموقع الأجنبي http://max.limpag.com/2006/06/07/how...g-dreamweaver/

على فكرة اقل ما توصف بيه مدونتك انها رااااااااااااائعة

شكراً وآسف على الإطالة

اخوي ابو زايد للأسف لا والله لا اعرف , لكن اكيد المشكله في كتابتك للكود , حاول تتعلم طريقة كتابتها بالشكل الصحيح باستخدام CSS و XHTML

اخوي كريم

بالنسبة للإستفسار رقم 1 / لا يوجد إضافة تعرض أكواد الـ PHP لأن لا يحق لأحد مشاهدة ملف الـ PHP لأي موقع إلا موقعه هو الخاص فيه , وموقعك يمكنك مشاهدة ملفات الـ PHP عبر لوحة تحكم المدونة تحت قسم التصاميم والقوالب او عن طريق إدارة الملفات في لوحة تحكم موقعك او عن طريق برامج الـ FTP
ممكن يكون هناك إضافة تمكنك عن طريق الفايرفوكس مشاهدة الملفات للـ PHP الخاصه فيك بوضع كلمة المرور مثلاً لموقعك لكي يمنحك الصلاحية للدخول والتعديل في الملفات للـ PHP مباشره عن طريق المتصفح فهذه ستكون إضافة سوبر لكن لا اعتقد موجوده حالياً
بالنسبه للإستفسار رقم 2 / فعلاً هناك طريقه جيده لعمل قالب ووردبريس بإستخدام الـ Dreamwaver لكن لا تقل صعوبه كثيراً عن الطريقة التي طرحتها والطريقه التي طرحتها افضل لأنك تستخدم الكود مباشره وليس وسيط فستكون محترف اكثر , عموماً بإستخدام الدريم ويفر
يجب ان اولاً ان تفتح الملفات ( header.php و index.php و footer.php و sidebar.php ) لأن كل هذه الملفات تمثل الصفحة الرئيسية أولاً كالتالي
[ هيدر ]
[ الريسية [ السايد ] ]
[ فوتر ]
رأيت جميع هذه الأربع ملفات تمثل الرئيسية لكن أيضاً الهيدر والسايد والفوتر تمثل ايضاً جميع الصفحات لانها تضهر في جميع الصفحات كذالك مثل عرض تدوينه مفرده او عرض صفحة فارغه او عرض الأقسام او عرض الأرشيف
ما عدا الرئيسيه تمثل فقط الصفحة الرئيسية بعد التعديل على الهيدر والفوتر والسايد الذان يمثلان جميع الصفحات انتفل إلى الرئيسية ثم عرض تدوينه مفرده .. الخ
نرجع لموضوعنا باستخدام الدريم ويفر يجب عليك فتح الأربع ملفات مع بعض ونسخ اكوادها في صفحة دريم ويفر جديده فارغه تماماً ونسخ الهيدر اولاً إلى الأعلى ثم بعده نسخ الرئيسية ويفضل وضع فاصل بينهما عشان اذا خلصت ترجع الأكواد للملفات وبعد الرئيسية تنسخ السايد وبعد السايد تنسخ الفوتر كلها في صفحه واحده تحت بعض , الان يمكنك تحريرها باستخدام الدريم ويفر ومثل ما طرحت لك بعد ما تخلص ترجع الأكواد للملفات البي اتش بي وتحفظها

شغل عدل

كل عام وانتم بخير

شكراً لك أخوي , وكل عام وأنت بخير

الله يعطيك العافية
وجعل الله هذا العمل في موازين حسناتك

__________________

{ .. اشوى اني مركبه المدونه على سيرفر شخصي >_< ..

طلعت لي اخطاء كثيره ! وسويت نفس اللي سويته بالضبط واخر شي لمن جيت اشوف المدونه
القى الهيدر رايح يمين ولسا على ستايل الافتراضي هههههه ..

ياليت تعطينا برنامج ممكن يسهل علينا تركيب المدونه !!! .. وسؤال ثاني بخصوص صورة الهيدر ! ..

انا كنت حاطه موضوع طلب مساعده ! ..

هذا ستايلي اللي صممته !




لمن جيت اعدل بكود الصوره في الهيدر !! .. صور الستايل بملف الصور حافظ كل صوره باسم

style_1 , style_2 وهكذا !! ..

فشلت اسم صورة الستايل الافتراضي من ملف التنسيق وحطيت بدلها

/imege/style_04 طبعا الى اخر الكود ! .. ولا طلعت لي .. فمعناته شغلي غلط ^^

ابي اعرف زياده عن هالموضوع ! واهم شي البرنامج اللي ينقذنا ^^ ..
شكرا لمجهودك الجبار في الشرح .. جزاك الله خير =)

__________________

أخوي جزاك الله خير على الشرح الرائع

الأخ عبد الملك الثوري جزاك الله خيرا وبارك فيك وفي علمك ..

__________________

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

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

حاجة تشرف قلمك والله

سلمت

__________________