(شرح) تصميم اسايل لمجلة Magic Blocks

[العمري]

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

السلام عليكم ورحمة الله وبركاته

اخواني على عجاله اشرح لكم تصميم استايل لمجلة MAGIC BLOCKS اتمنى من الله التوفيق


الى الدرس مباشره وأعذرونا عن اي قصور بارك الله فيكم

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

أولا لابد من احضار هذه البرامج لانها هي الاساس
1- برنامج الفوتوشب
2- الفرونت بيج

على بركة الله نبدأ

نفتح برنامج الفوتوشب

ملف + جديد

المقاسات طبعا بالبيكسل

العرض 780

الارتفاع 450

طبعا انا صممت استايل وهذه هي النتيجه

http://www.traidnt.org/index.php?action=getfile&id=23659

والان ينقسم الاستايل الى ثلاث اقسام كما هو موضح بالصور
1- الهيدر
2- القوائم
3- الفوتر
http://www.traidnt.org/index.php?action=getfile&id=23660
انتهينا من الهيدر والقوائم والفوتر ناجي الان الى تقطيع الاستايل كما هو موضح بالصوره
http://www.traidnt.org/index.php?action=getfile&id=23661
طبعا الان من لوحة الكيبورد نضغط التالي

shift+alt+s

راح تفتح لك قائمة حفظ طبعا احفضها باي باسم بالانجليزي وراح تنقل على طول في مجلد الصور تلقائي مثل ما هو موضح بالصوره
http://www.traidnt.org/index.php?action=getfile&id=23662

والان نذهب الى برنامج الفرونت بيج

الخطوه الاولى

بعد فتح البرنامج نذهب الى تعليم برمجي

ونمسح جميع ما فيه من اكواد مثل ما هو موضح بالصوره

http://www.traidnt.org/index.php?action=getfile&id=23674

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



http://www.traidnt.org/index.php?action=getfile&id=23675

والان نعمل جداول تحى نستطيع توزيع الصور عليها والصور الباقيه تكمل الشرح
http://www.traidnt.org/index.php?action=getfile&id=23676
ر
http://www.traidnt.org/index.php?action=getfile&id=23677
http://www.traidnt.org/index.php?action=getfile&id=23679http://www.traidnt.org/index.php?action=getfile&id=23678


http://www.traidnt.org/index.php?action=getfile&id=23686
والشرح له بقيه ارجوا عدم وضع الردود حتى تكملت الشرح

اخوكم العمري

[حسين911]

ديب يابعد حيي والله يعطيك طولة الصحه والعافيه

ماشاء الله عليك تعب وجهد الله يعطيك العافيه

ولاهنت يابعدي
^_^

[حسين911]

يعطيك الف عافيهي اخيي ولاهنت

شرح ولا احلى

بالتوفيز ^_^

[TeEmOoR]

لا هنت والله يعطيك العافيه

[العمري]

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



السلام عليكم ورحمة الله وبركاته

اخواني على عجاله اشرح لكم تصميم استايل لمجلة MAGIC BLOCKS اتمنى من الله التوفيق


الى الدرس مباشره وأعذرونا عن اي قصور بارك الله فيكم

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

أولا لابد من احضار هذه البرامج لانها هي الاساس
1- برنامج الفوتوشب
2- الفرونت بيج

على بركة الله نبدأ

نفتح برنامج الفوتوشب

ملف + جديد

المقاسات طبعا بالبيكسل

العرض 780

الارتفاع 450

طبعا انا صممت استايل وهذه هي النتيجه

http://www.traidnt.org/index.php?action=getfile&id=23659

والان ينقسم الاستايل الى ثلاث اقسام كما هو موضح بالصور
1- الهيدر
2- القوائم
3- الفوتر
http://www.traidnt.org/index.php?action=getfile&id=23660
انتهينا من الهيدر والقوائم والفوتر ناجي الان الى تقطيع الاستايل كما هو موضح بالصوره
http://www.traidnt.org/index.php?action=getfile&id=23661
طبعا الان من لوحة الكيبورد نضغط التالي

shift+alt+s

راح تفتح لك قائمة حفظ طبعا احفضها باي باسم بالانجليزي وراح تنقل على طول في مجلد الصور تلقائي مثل ما هو موضح بالصوره
http://www.traidnt.org/index.php?action=getfile&id=23662

والان نذهب الى برنامج الفرونت بيج

الخطوه الاولى

بعد فتح البرنامج نذهب الى تعليم برمجي

ونمسح جميع ما فيه من اكواد مثل ما هو موضح بالصوره

http://www.traidnt.org/index.php?action=getfile&id=23674

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



http://www.traidnt.org/index.php?action=getfile&id=23675

والان نعمل جداول تحى نستطيع توزيع الصور عليها والصور الباقيه تكمل الشرح
http://www.traidnt.org/index.php?action=getfile&id=23676
ر
http://www.traidnt.org/index.php?action=getfile&id=23677
http://www.traidnt.org/index.php?action=getfile&id=23679http://www.traidnt.org/index.php?action=getfile&id=23678


http://www.traidnt.org/index.php?action=getfile&id=23686


طيب والان نفتح لوحة تحكم الاداره وهي على الرابط التالي

http://www.xxx.com/magic/admin/index.php
بدال xxx اسم موقعك

ونذهب الى التحكم بالتصميم مثل ما هو موضح لك بالصوره
http://www.traidnt.org/index.php?action=getfile&id=23724

ثم تعديل رأس وذيل الموقع (http://www.ftat-islam.com/magic/admin/main.php?cmd=editdes)

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




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

[رماد انثى]

رووووعه الشرح مره واضح تسسسلم

[MSHAER]

الله لايهينك اخوي وتسلم يمينك

[safer-al7ob]

مشكور ويعطيك الف عافيه
تسلم ايديك

[asdaf44]

مشكور ويعطيك الف عافيه
تسلم ايديك

منقول هههه

[نبض الشوق]

بارك الله فيك

تسلم يمناك ياذيب