الرئيسية > My M1nd# > بدايتك في كتابة كودك لتصميم موقعك

بدايتك في كتابة كودك لتصميم موقعك

سلام عليكم شباب ..

اليوم رح احاول اوضح بعض المفاهيم الي يجهل عنها بعض المتعلمين للبرمجة او الذي لا يعرف كيف يبدأ وهو يملك كل الاساسيات
وحاليا رح ابدي اوضح المفاهيم الي تحص للغة الهيكلة والتنسيق
HTML / CSS
اولا رح ابدي بالملفات الي تقوم بأنشائها حتى تبدا العمل عليها
1 – index.html وهذا رح يكون بيه كود تصميم الصفحة مقسمة كل شيء بيها مثل البلوكات والهيدر والفوتر الخ ..
2 – ملف style.css وهنا رح تبدي تكتب اكواد تنسيق الصفحة كـ طول عرض ارتفاع نوع الخط حجم الخط لون الخط الخ ..
( طبعا لا تتقيد بالاسماء الي ذكرتها اكتب الي يعجبك )
3 – مجلد images وهو الي رح يكون بيه الصور الخاصة والمدرجة بداخل الموقع
4- header.html or php وهنا رح ناخذ قسم الهيدر الي كتبناه بداخل الـ index.html ونخليه بملف وحدة
لسهولة التعديل عليه وترتيب عملك ..

5 – navbar.html or php وهنا ايضاً رح نقطع كود الناف بار نفس عملية الي قمنا بيها بالهيدر ايضاً حتى يسهل التعديل عليه

6 – sidebar.html or php وهنا رح ناخذ كود القوائم الجانبية الي سويناها والي تحتوي على ديف الخ .. وايضاً وضعها بملف
وحدة
7 – footer.php or html ونفس الكلام ايضاً😀 ماكو داعي اعيد
8 – ننشاء مجلد function وهذا رح نخلي بيه اكواد الـ html والفانكشنز والمتغيرات الي رح نكتبها ايضاً حتى نعزلها بمجلد وحدة
في حال كان بالك موقعك يكون داينمك وليس ستاتك ويعمل بلوحة تحكم او بدون لكن تود يعمل بشكل ديناميكي
حاليا اعتقد غطيت بعض الغموض عند شبابنا الي ديواجهون مشاكل ..
حاليا رح نبداء بملف index.html
-div للصفحة وكل التاكات رح تكون بداخلة wrapper
-بداخل div ال wrapper, راح نسوى div للاتي:
-div للهيدر واسمه header
-div للناف بار واسمه nav
-div للمقالات واسمه content
-div للقائمة الجانبية واسمه sidebar
-div للفوتر واسمه footer
وهذا الكود بالبداية الي رح نكتبة
————————————-
<div id=”wrapper”>
<div id=”header”></div>
<div id=”nav”></div>
<div id=”content”></div>
<div id=”sidebar”></div>
<div id=”footer”></div>
</div>
وحاليا رح نكمل ونملي كل div بالي يناسبه الى ان نكمل كلشي ونبدي نقسمة بـ Css
1-div الheader >>راح نضع به عنوان الموقع
2-div الnav >>راح نضع بيه لنكات الموقع الرئيسية
3-div الcontent >>راح نضع به المقالات
4-div الsidebar >>راح نضع به لنكات القائمة الجانبيه
5-div الفوتر >>راح نضع به حقوق الموقع
ورح يكون الكود كالتالي
<div id=”wrapper”>
<div id=”header”>
<h2>bla bla bla</h2>
</div>
<div id=”nav”>
<a href=”#”>الرئيسية</a>
<a href=”#”>قسم اخر</a>
<a href=”#”>قسم اخر</a>
<a href=”#”>قسم اخر</a>
<a href=”#”>قسم اخر</a>
<a href=”#”>قسم اخر</a>
<a href=”#”>قسم اخر</a>
<a href=”#”>قسم اخر</a>
</div>
<div id=”content”>
<a href=”#”><h3>اخر المقالات</h1></a>
<h3>اكتب الي يناسبك هنا</h3>
<p>
هنا رح يكون نص الي في داخل الموقع اكتب الي يعجبك والي يناسب موقعك</p>
<p>
هنا ايضاً اكتب الي يناسب موقعك وافكارك
</p>
<p>————————————————————-
————————————————————</p>
<h3>كذلك</h3>
<p>
كذلك كذلككذلككذلككذلككذلككذلككذلككذلككذلككذلك
</p>
<p>————————————————————-
————————————————————</p>
<p>
كذلك كذلك كذلك كذلك كذلك كذلك كذلك كذلك كذلك كذلك كذلك
</p>
</div>
<div id=”sidebar”>
<h3>القائمة الرئيسية</h3>
<li><a href=”#”>الرئيسية</a></li>
<li><a href=”#”>اقسام الموقع</a></li>
<li><a href=”#”>اقسام الموقع</a></li>
<li><a href=”#”>اقسام الموقع</a></li>
<li><a href=”#”>اقسام الموقع</a></li>
<h3>bla bla bla bla</h3>
<li><a href=”#”>bla bla</a></li>
<li><a href=”#”>bla bla</a></li>
<li><a href=”#”>bla bla</a></li>
<li><a href=”#”>bla bla</a></li>
<li><a href=”#”>bla bla</a></li>
<h3>bla bla</h3>
<li><a href=”#”>bla bla</a></li>
<li><a href=”#”>bla bla</a></li>
<li><a href=”#”>bla bla</a></li>
<li><a href=”#”>bla bla</a></li>
<li><a href=”#”>bla bla</a></li>
</div>
<div id=”footer”>
<p> <a href=”https://www.facebook.com/saif.eigrp”>coded by Sec-
Mind &copy;</a></p>
</div>
</div>
style.css
وحاليا جاء دور css
مثلل مذكرنا رح نبدي نقوم بتنسيق الصفحة بشكل جميل ومتناسق
وهذا الكود
body {
background-color:#fefbea;
font-family: “Tahoma”, Times, serif;
font-size:14px;
color:black;
margin:0;
padding:0;
}
#wrapper {
width:960px;
background-image:url(images/bg.jpg);
margin:0 auto;
border-left:1px solid #ac8e33;
border-right:1px solid #ac8e33;
}
#header {
background-image:url(images/bg.jpg);
width:960px;
height:100px;
margin:0 auto 0 1PX;
margin-bottom:1px;
border-bottom:1px solid #ac8e33;
border-top:1px solid #ccc;
}
#header h2 {
direction:rtl;
padding:10px;
}
#nav {
width:960px;
height:40px;
border-bottom:1px solid #ac8e33;
}
#nav a {
font-weight:bold;
display: block;
float:right;
padding:10px;
text-decoration:none;
background-color: #fbf1d5;
}
#nav a:hover {
background-color:#fce18e;
height:20px;
}
#content {
direction:rtl;
width:675px;
float:left;
padding:10px;
}
#content a{
text-decoration:none;
}
#sidebar {
width:200px;
float:right;
margin-bottom:25px;
}
#sidebar a {
text-decoration:none;
}
#sidebar li {
list-style:none;
text-align:center;
}
#sidebar h3{
text-align:center;
}
#footer {
clear:both;
width:960px;
height:135px;
border-top:1px solid #ac8e33;
}
#footer p {
direction:rtl;
padding:10px;
}
#footer p a {
text-decoration:none;
}
كـ شي بدائي وانت وشطارتك وتبدي تطور وترتب كل شي بيه
الى هنا رح ينتهي هذا الدرس ..والدرس القادم رح يكون تفصيل للcss الي كتبناه وكل وسم شنو فائدتة
التصنيفات :My M1nd#
  1. لا يوجد تعليقات.
  1. No trackbacks yet.

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: