خوب برنامه دریمویور را باز کنیید و
file->new>php>create
کلیک کنید و یک فایل جدید باز کنیدو فایل را با نام index.phpدرون پوشه wp-tmذخیره کنید.
خوب شما الان تونستیید صفحه اول سایتتونو تعریف کنید خوب الان احتیاج به یک فایل استایل دارین پس:
file->new>css>create
را انتخاب کنید و یک فایل css جدید را باز کنیدو ان را با نام style.css تو پوشه wp-tm ذخیره کنید خوب الان باید شما این استایل را به صفحه اولتون فراخوانی کنید.
شما یک فایل استایل را به 2 صورت میتونیدبه یک صفحه فراخوانی کنید(منظور از فراخوانی در زبان وب اینه که اون فایل را به صفحه اعمال کنیم یا به صورت دیگر بخوام بگم ایینه که اون فایل را وارد صفحه کنیم)
1.بصورت External
<link href="style.css" rel="stylesheet" type="text/css" />
2.بصورت Internal
<style type="text/css">
@import url("style.css");
</style>
که فرق اینها در اینه که خاصیت ایمپورت بر خاصیت لینک ارجعیت دارد. خوب شما این استاییلتون را بصورت لینک به صفحه اعمال کنید اموزش این کار در دریمویور را درپایین ببینید.
توضیح: تو دریموییور پانل css styleرا باز کنیدو بر روی ایکونی که شبیه یک زنجیر است کلیک کنید (مطابق شکل 1) .
سپس یک کادر باز شده که شما باید در آن دکمه Browse را کلیک کنید و سپس فایل style.css را که درون پوشه wp-tm است را انتخاب کنید (مطابق شکل 2) و در اخر هم ok کنیدو کار تمام است شما تو دریمیور اینجوری باید فایلهای استایل را به صفحه فراخوانی کنید.
قبل از شروع ما باید یه تعداد کلاس و تگ برای صفحمون تعریف کنیم این کلاسها بسیار ضروری هستند که هر طراحی قبل از طزاحی باید انها را برای پوسته خود تعریف کند.من قبلا این کلاسها را طراحی کردم و فقط شما باید انها را درون استایلتون کپی کنید.
کد های زیر را درون style.cssکپی کنید
/*
Theme Name: novindl
Theme URI: http://www.novindl.com/
Version: 1.0
Author: mohsen_golmohammadi
Author URI: http://www.adoberan.com/
*/
*{margin:0;padding:0}
body{
font:11px tahoma,sans-serif;
color:#494848;
background-color:#f2efe9;
line-height:1.7;
margin:0;
padding:0 0;
text-align:right;
direction: rtl;
}
/* list */
ol,ul,li{
list-style:none;
direction: rtl;
}
/* link */
a,a:link{
text-decoration:none;
color:#4e4a3d
}
a:hover{
color:#07cfed
}
/* images */
img{
border-style:none;
}
/* text */
h1{padding:0px;margin:0px;font:bold 1.4em/1.6 Arial,sans-serif}
h2{padding:0px;margin:0px;font:bold 1.4em/1.6 Arial,sans-serif}
h3{padding:0px;margin:0px;font:bold 1.3em/1.6 Arial,sans-serif}
h4{padding:0px;margin:0px;font:bold 1.2em/1.6 Arial,sans-serif}
/* class */
.left{
float:left;
margin: 0px 10px 0px 0px;
}
.right{
float:right;
margin: 0px 0px 0px 10px;
}
.clear{clear:both;height:0;line-height:0;font-size:0}
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;height:0}
*:first-child+html .clearfix{min-height:1px}
از کدهای بالا نترسیید چون فرض کنید این کدها پیش فرض هستند و شما میتوانید برای هر پوسته یا سایتی از ان استفاده کنید.
البته حتی شما میتوانید انها را تغییر دهید.
خوب حلا همه فایلهاتون را ذخیره کنید و درون صفحه index.php عبارت test را وارد کنیدو ذخیره کرده سپس کلید f12 را برای نمایش پوسته درون مرورگر فشار دهید اگر عبارت فوق را مشاهده کردید هیچ مشکلی نیست در غیر این صورت:
- مطمئن باشید که نرم افزار wampserver در حال اجراست
- مطمئن باشید تمام سرویسهای نرم افزار فوق فعال هستند
- ممکن است در تعرییف سایت تو دریمویور اشتباه کرده باشید پس تمام اینها رو چک کنید.
خوب دیگه داره وقت اون میرسه که باید کم کم کار عملی را شروع کنیم
اما قبل از این یک توضیع بسیار مهم درمورد div id و div class باید بدهم تا شما با یک قانون کلی اشنا شوید
div چیست؟
خیلی ساده بخوام بگم یعنی مرز بین عناصر وب را دیو میگویند.(البته معنی کتابی و علمیشو نمیدونم اما من اینجوری
معنی کردم که درک ان برای شما راحت بشود)
این بدان معنی است که بوسیله دیوها ما صفحات سایتمون را به بخشهای مجزا تقسیم میکنیم.
ما برای دیوها میتوانیم استاییل تعریف کنیم یعنی میتونیم مثلا طول و عرض ورنگ زمینه وفونت یا هر چیز دیگر برای ان تعریف
کنیم.و مطالب و تصاویر یا هر چیز دیگر را درون ان بگنجانیم.
دیوها را میتوان به دو گونه تقسیم کرد:
- div id
- div class
این دوتا چی هستند؟اصلا اون پسوند که بعد از اون اومده چیه و به چه دردی میخوره؟
فرض کنید شما صفحات سایتتون را با یک دیو بدون این پسوندها تقسیم کنید.
منظور من یک دیو تنها نیست هر تعداد دیوی است که شما استفاده کرده اید بزارین با مثال بگم ما تو صفحمون داریم:
<div>hello</div>
<div>this is my site</div>
<div>how are you?</div>
ما بوسیله دیو مطالب خود را مجزا کرده ایم اما حالا چگونه به انها استایل دهیم؟شاید به ذهن شما برسد که میتوان استایل را به صورت inline وارد کرد که این راه خوبی است اما....ایا شا میخواهید تمام این استایلها رو تو صفحتون بنویسید؟
پس تکلیف فایل style.css چی میشه؟
پس اینجاست که اون دوتا پسوند به داد ما میرسند تا بتوانیم استایل دیوها رو تو فایل style.css بنویسیم.با مثال بگم مثلا همون کد قبلی
<div id="hi">hello</div>
<div class="info">this is my site</div>
<div id="how">how are you?</div>
که در این صورت ما تو استایل میتوانیم بنویسیم
#hi {
}
.info {
}
#how {
}
امیدوارم که مطلبو گرفته باشید/
حال پس فرق بین div class و div id در چیه و ما چه وقت باید از کدام یک استفاده کنیم؟
یک قانون کلی داریم که میگه div id یکتاست یعنی که شما میتوانید فقط یک بار از یک id در یک صفحه استفاده کنید با مثال میگم شما تو صفحتون اینو دارید
<div id="hi">hello</div>
پس شما دیگه از این id نمیتوانید استفاده کنید یعنی دیگر نمیتوانید از id به نام hi استفاده کنید بلکه باید با یک نام مجزای دیگری استفاده کرد مثلا
<div id="good">hello</div>
اما div class از این قانون مبراست و شما میتوانید بارها و بارها ار یک کلاس استفاده کنید
خوب درس امروز هم تموم شد و از جلسه بعد کار عملی در پیش داریم.
دانلود فیلم اموزشی به حجم 500KB
pass:00123000000