كيفية تصميم استايل لمجلة اجا 1.3 بستخدام تقنيه الويب 2

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

التصميم بستخدام تقنيات الويب 2 مايزال في البدايات الان لكنه راح يكون خلال الفترة القادمة هو المعيار لكل المواقع وذلك بسبب انه يخفف تقريبا 80 بالميه من ضغط الموقع على السيرفر ويحول كل شي الى اوامر تنفذ بشكل سهل ومريح للزائر وللسيرفر وبذلك يكون الموقع اسرع بالتصفح واجمل وخفيف على معدة السيرفر ..
انسى مجلة اجا الان .. الشرح راح يكون تعلم طريقة التصميم بشكل عام وانت بعدين تطبقه على اجا او موقعك الخاص او اي موقع بنفس الاسلوب

لنفرض ان عندك مجلد استايل سواء استايل منتدى او مجله او موقع خاص .. عادة يكون مجلد الاستايل يحتوي على ملف الاستايل style.css ومجلد صور حقت الاستايل لذا راح ابدأ من الصفر واسوي مجلد صور فارغ وملف استايل فاضي داخل مجلد واحط فيه ملف اسمه index.php مثلا هذا كل الموقع
طبعا تستطيع تسوي كذا عن طريق النوت باد او اوورد باد او اي محرر تكست بعد مايفتح البرنامج معك تختار من قائمة ملف .. جديد وراح يفتح لك صفحة مافيها شي بالمحرر من ملف ثاني مره حفظ بأسم وتسميها style.css وبعدين تعيد العمليه وتحفظها بأسم index.html او index.php على كيفك .. ملف ال index.php او الهوتميل هو اللي نشوفه عن طريق المتصفح وراح نحط فيه كود يستدعي ملف الاستايل والصور من الداخل ..

هذه صورة موقعي مافيه شي بس المجلدات اللي فوق فاضيه كلها ..

صورة مرسلة

نفتح ملف index.php ونحط فيه كود يستدعي ملف الاستايل style.css ونحط فيه كود هوتميل بسيط حق الترويسة والجسم الموقع كالتالي

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<HTML>


 <HEAD>
	<LINK href="style.css" rel="stylesheet" type="text/css">
 </HEAD>
 
 
 
 
 <BODY>
	HELLO MY NAME IS ABU SALEH .. WWW.MAGTRB.COM .
 </BODY>
 
 
 
</HTML

طبعا كود هوتميل يبدا بكلمة هوتميل وينتهي بكلمة هوتميل قبلها شرطة وبينهن الهيدر الترويسه وفيها كود اللي يطلب ملف الاستايل وبعدين الجسم اللي انا كاتب فيه اسمي وراح يكون شكل الصفحة على الانترنت كالتالي لو فتحنا index.php بالمتصفح

صورة مرسلة

ملاحظة : لو حطيت ملف style.css في اي مكان بالعالم لازم تعدل مساره في الكود فوق علشان تدل على مكانه يعني بالكود هنا

	<LINK href="style.css" rel="stylesheet" type="text/css">

طبعا المسار بالنسبة لملف index.php مثلا لو كان الملف ستايل داخل مجلد اسمه xmw وهذا المجلد يقع بجنب ملف index.php يكون المسار كالتالي

	<LINK href="xmw/style.css" rel="stylesheet" type="text/css">

وممكن تحط عنوانه بالانترنت مباشرة مثلا

http://www.yoursite.com/xmw/style.css

الان الاستايل شغال ومرتبط بصفحة البداية مثلا وكل شي تمام ونبي نبدا التصميم

في كثير من الموقع يستخدم واحده من اثنين id او class الفرق بينهم ان id يستخدم مره وحده و class يستخدم اكثر من مره ... طبعا مافهمتوا شي انا متأكد لكن خلنا نبدأ وراح تفهمونها بكل سهولة ...

افتح ملف index.php علشان نبدا نصمم .. الكلام اللي انا كتبته وهو التالي HELLO MY NAME IS ABU SALEH .. WWW.MAGTRB.COM نبي نحطه داخل جدول مربع له طول وعرض والوان مختلفه وللي نسويه فقط نحطه شي اسمه div كالتالي وانا راح اركز فقط على اللي في جسم الموقع لذا باقي الكود ماراح اكرره فراح يكون الكود في جسم الموقع كالتالي

 <BODY>
 <div>
	HELLO MY NAME IS ABU SALEH .. WWW.MAGTRB.COM .
	</div>
 </BODY>

طبعا ان حفظت شغلك وسويت تحديث لصفحة الانترنت ماراح يتغير شي !! لكن علشان نسوي مربع لابد من اننا نربط div هذا بكلاس يكون في ملف الاستايل ويكون اسم الكلاس على كيفيك خلنا نسميه كلاس حائل مثلا Hail فيكون الكود كالتالي

 <BODY>
 
 <div class="Hail">
 
	HELLO MY NAME IS ABU SALEH .. WWW.MAGTRB.COM .
	
	</div>
	
 </BODY>

طبعا المتصفح اول مايفتح الصفحة يمر بالديف هذا ويلقاه يتبع كلاس حائل يروح لملف الاستايل يدور كلاس حائل وشي ممزاته علشان يطبقها على الكلام الموجود داخل هالديف .. فكل الكلام الموجود داخل الديف يتبع الكلاس حق الديف مهما كان لذا الان نروح لملف الاستايل style.css ونحط كلاس Hail هناك ومواصفاته

.Hail {
 width: 300px;
 height: 100px;
 background: #CCCCCC

}

طبعا لاحظ النقطة قبل اسم الكلاس لازم هذي علشان تميز انه كلاس .. وراح يظهر الشكل كالتالي
طبعا width معناه العرض و height الارتفاع و background يعني لون الخلفية

صورة مرسلة

الان خلاص انتهينا من تعديل ملف index.php انسى موضوعه كل شي هالحين فقط تتحكم فيه من ملف style.css لذا راح نسوي بعض الحركات

اول شي نسوي له اطار نوع الاطار لونه

.Hail {
 width: 300px;
 height: 100px;
 background: #CCCCCC;
 border: solid;
 border-color: #990000;
 border-style: solid;

}

راح يظهر الشكل التالي

صورة مرسلة

الان نبي نخلي الكتابة تنزل عن الاطار شوي تحت وشوي يسار نسوي التالي

.Hail {
 width: 300px;
 height: 100px;
 background: #CCCCCC;

 border-color: #990000;
 border-style: solid;

 padding-top: 10px;
 padding-left: 10px;
 padding-bottom: 10px;
 padding-right: 10px;


}

اللي فوق معناه padding البعد من داخل الاطار فوق ويسار وتحت ويمين
وراح يكون الشكل كالتالي

صورة مرسلة

فيه كثير من المواقع تستخدم نفس الطريقة السابقة لكن بالشكل التالي

 padding: 10px 5px 3px 40px;

هي نفسه 10 من فوق 5 من يمين 3 من تحت و 40 من اليسار على الترتيب دائما كذا ... فوق يمين تحت يسار ..

بالنسبة للخطوط كالتالي

.Hail {
 width: 300px;
 height: 100px;
 background: #CCCCCC;

 border-color: #990000;
 border-style: solid;

 padding-top: 10px;
 padding-left: 10px;
 padding-bottom: 10px;
 padding-right: 10px;

 font-family: MS Sans Serif;
 font-size: medium;
 font-weight: bold;
}

وراح يكون الشكل كالتالي

صورة مرسلة

الخط راح فيها لكن انت تقدر تسوي افضل حسب الخطوط اللي تحبه ..

الان نبي نغير لون الخلفيه ونحط مثلا صورة اسمها my.jpg انقل الصورة اول شي الى مجلد الصورة بجنب الاستايل ثم بعدين عدل على الكود علشان يطلب الصورة بدل اللون الرمادي كالتالي

.Hail {
 width: 300px;
 height: 100px;
 background: url(images/my.jpg);

 border-color: #990000;
 border-style: solid;

 padding-top: 10px;
 padding-left: 10px;
 padding-bottom: 10px;
 padding-right: 10px;

 font-family: MS Sans Serif;
 font-size: medium;
 font-weight: bold;
}

وراح تظهر الصورة كالتالي

صورة مرسلة

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

.Hail {
 width: 300px;
 height: 100px;
 background: url(images/my.jpg) no-repeat;

 border-color: #990000;
 border-style: solid;

 padding-top: 10px;
 padding-left: 10px;
 padding-bottom: 10px;
 padding-right: 10px;

 font-family: MS Sans Serif;
 font-size: medium;
 font-weight: bold;
}

التعديل اللي سويناه اننا اظفنا كلمة no-repeat فيكون الشكل التالي

صورة مرسلة

لو غيرنا مقاس الصورة بشكل اكبر واستخدمنا الصورة فقط تظهر افقي نستخدم كلمة repeat-x او عمودي نستخدم كلمة repeat-y

صورة مرسلة

لو فرضنا الان اننا نبي نضيف مربع ثاني في الملف index.php يحتوي على الكلام التالي

My site is nice ...

ويكون يحتوي على نفس مميزات المربع اعلاه فقط نفتح ملف index.php ونسوي الكود التالي


 <BODY>
 
 <div class="Hail">
 
	HELLO MY NAME IS ABU SALEH .. WWW.MAGTRB.COM .
	
	</div>
	
	
	<div class="Hail">

	my site is nice...

	</div>
	
	
 </BODY>

الجدول الجديد راح يحمل نفس مميزات ستايل حائل وراح يكون الشكل كالتالي

صورة مرسلة

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

.Hail {
 width: 300px;
 height: 100px;
 background: url(images/my.jpg) no-repeat;

 border-color: #990000;
 border-style: solid;

 padding-top: 10px;
 padding-left: 10px;
 padding-bottom: 10px;
 padding-right: 10px;

 font-family: MS Sans Serif;
 font-size: medium;
 font-weight: bold;

 margin: 10px 10px 10px 10px;
}

طبعا مثل ماشرحت فوق من فوق عشرة ومن يمين عشرة ومن تحت عشرة ومن يسار عشرة بنفس الترتيب فوق يمين تحت يسار .. ليش ما ادري لكن هي كذا .. وممكن تستخدم نفس خواص padding لكن بدلا من padding-top تحط margin-top لكن الفرق ان بادنق البعد من الداخل و margin البعد من الخارج لذا لو حطينا البعد حق الجدول من تحت مثلا 10 ومن فوق 10 راح يكون الجدولين الفرق بينهم 20 بكسل والبكسل نوع من انواع البسكوت !! البكسل معناه نقطه بالتصميم مثل قولة متر اذا بنيت غرفة نوم او بيت شعر فتقول غرفة نوم خمسة بستة متر او خمسة بستة بكسل بالتصميم للمواقع ..

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

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


 <div class="gray">
 <div class="Hail">
 
	HELLO MY NAME IS ABU SALEH .. WWW.MAGTRB.COM .
	
	</div>
	
	
	<div class="Hail">

	my site is nice...

	</div>
	</div>

حطينا كل المحتويات ضمن كلاس اسمه gray ومواصفاته من ملف الاستايل هي التالي


.gray {
 width: 600px;
 height: 400px;
 background: #D2B48C;

 border-color: #000000;
 border-style: dotted;

 padding: 10px 10px 10px 10px;
 margin: 10px 10px 10px 100px;

}

لاحظ ان margin من الجهة اليسار تساوي 100 يعني راح يحطه مسافة 100 بيكسل من اليسار وراح يكون الشكل كالتالي

صورة مرسلة

ولا حط ان الاستايل حائل ابعد عن الجانب الايسر بعد 10 بكسل مثل ماسوينا فوق من الخارج ..

بكذا تقدر تقسم موقعك على راحتك كلاسات مثلا الترويسة لها كلاس والتذليله لها كلاس والوسط كله داخل كلاس والعب على راحتك ... انا راح احط كل الاوامر حقت التصميم تحت انشاء الله واحدث المقال بستمرار كلما لقيت شي زين ..

الان خلونا نشوف استايل اجا 1.3 وهو نفس الطريقة السابقه انظر الصورة تحت

صورة مرسلة

خلفيه المجموعات عباره عن صورة لكن الالون متدرجة من الازرق الى الابيض ولون الاطار ازرق وبعدين حددنا المسافات بين المجموعات حسب margin وكذلك البعد من اليسار عن جدار الصفحة ومن اليمين عن الاخبار والرسائل والاخبار الساخنة وبعدن علشان محتوى المجموعة مايكون لاصق باطار المجموعة استخدمنا padding علشان البعد من الداخل ونفس الشي بالنسبة للاخبار والرسائل والاخبار الساخنة ..

لذا فقط افتح ملف الاستايل حق مجلة اجا 1.3 والعب في الالوان والمساحات وخلنا نشوف امكانياتك .. وابداعاتك ..

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

اخوكم ومحبكم في الله
ابو صالح

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

منتديــات مغتــرب: كيفية تصميم استايل لمجلة اجا 1.3 بستخدام تقنيه الويب 2 - منتديــات مغتــرب