اموزش طراحی پوسته های وردپرس در دریمویور

websaz2012

Member
اموزش طراحی پوسته های وردپرس در دریمویور + اموزش تصویری دریمویور بصورت عملی و تخصصی

attachment.php


13361629561.gif

اموزش طراحی پوسته های وردپرس در دریمویور


با سلام خدمت دوستان من میخوام طراحی پوسته های وردپرس را تو دریمویور بهتون اموزش بدم
و از انجایی که مطالب مفصل است هفته ای 1 درس بهتون میدم و قول میدم دروس بصورت تصویری باشه
در ضمن باید به عرضتون برسونم که سایتی که میخواهیم بسازیم اول بصورت html طراحی خواهد شد و سپس
اونو مبدل به پوسته ورد پرس خواهیم کرد. پس همhtml خواهید اموخت و هم css و هم وردپرس. وقول میدم از جیکوثری هم تو سایت استفاده شود
پس بزودی........


البته اگه مایل باشید

:green:



اموزش طراحی پوسته وردپرس در برنامه دریمویور

پیشگفتار :
مراحل اولیه کار :
1.قبل از هرکاری شما به یک نرم افزارکه بتونه نقش سرور را در رایانه شما ایفا کند نیاز دارید مانند نرم افزارهای
easyPhp یا wampserver
2.مرحله دوم نصب این نرم افزار است که کار دشواری نیست و بصورت معمولی نصب خواهد شد.
3.این مرحله احتیاج به یک کم دقت دارد شما باید در ریشه نصب نرم افزار یک پوشه برای سایت خود ایجاد کنید
مثلا من نرم افزار wampserver را نصب کرده ام پس باید به این ادرس بروم
C:\wamp\www
دوستان توجه کنند که کار هردو نرم افزار شبیه به یکدیگر هستند و هیچ فرقی با هم ندارن و فقط
کار با ومپ سرور راحتتره و پیشنهاد میکنم که از این نرم افزار استفاده کنید. بگذریم خلاصه شما باید درون پوشه www
یک پوشه ایجاد کنید و نام ان را wp-tm
بگذارید فرقی نمیکند شما اسم ان را چی بذارید فقط سعی کنید با من یکنواخت باشید تا دچار مشکل نشوید
13361629562.gif

نتیچه مهم : پس در هر دو نرم افزار باید در پوشه www واقع در ریشه نصب
ما باید پوشه سایتمون را ایجاد کنیم.
4. درون پوشه wp-tm که برای سایتتون ساختید سه پوشه دیگر با نامهای css,img,js
ایجاد کنید.یکی برای استایل سایت شما ویکی برای تصاویر به کار رفته در سایت شما واخرین هم واسه فایلهای جیکوثری است.
تا اینجا ما فقط وسایل ضروری را فراهم کردیم و هنوز شروع نکرده ایم

در ضمن از استقبالی که به عمل اومد من شخصا قول میدهم که فایل pdf اموزش را در اخر بصورت کامل برای دانلود خواهم گذاشت.
دوستان خواهشا مواد اولیه کارمون را هرچه سریعتر فراهم کنید تا از قافله دور نمانید. تا بعد.....




[FONT=&amp]فصل اول

[/FONT]
[FONT=&amp]درس 1 ایجاد سایت در دریمویور

[/FONT]
[FONT=&amp]بالاخره ما کارمون را با نام و یاد خدا شروع میکنیم.
قبل از شروع کار شما باید یک سایت جدید تو دریمویور تعریف کنید برای این کار مراحل زیر را دنبال کنید و به توضیحات هر بخش توجه [/FONT]
[FONT=&amp]فرمایید.[/FONT]

[FONT=&amp]مرحله 1[/FONT]
.[FONT=&amp]همانطور که در تصویر میبینید بر روی تصویر مورد نظر کلیک کنید[/FONT]

attachment.php



[FONT=&amp]مرحله 2[/FONT]
[FONT=&amp]تنظیمات را همانند شکل زیر انجام دهید[/FONT]

attachment.php


[FONT=&amp]مرحله 3[/FONT]
[FONT=&amp]دقت فرمایید این مرحله خیلی حساس است[/FONT]
[FONT=&amp]بر روی گزینه [/FONT]
server
[FONT=&amp]کلیک کرده و سپس روی علامت + کلیک کنید[/FONT]
[FONT=&amp]و تنظیمات را مقابل شکل زیر انجام دهید[/FONT]

attachment.php


[FONT=&amp]سپس روی گزینه[/FONT]
Save
[FONT=&amp]کلیک کنید و تیک عبارت [/FONT]
Testing
[FONT=&amp]را هم بزارید.

[/FONT]
[FONT=&amp]مرحله4[/FONT]
[FONT=&amp]حالا نوبت ان رسیده که برای سایتمون یک پوشه تصاویر مشخص کنیم پس با توجه به شکل زیر انجام دهید[/FONT]

attachment.php


[FONT=&amp]بر روی [/FONT]
save
[FONT=&amp]کلیک کنید.کار تمام شد وشما موفق شدید یک سایت تو دریمویور تعریف کنید.[/FONT]
[FONT=&amp]توجه: این تنظیمات لزومیترین تنظیمات برای سایت شما بود که من از بقیه تنظیمات چشم پوشی کردم.[/FONT]
[FONT=&amp]پایان درس

نظر یادتون نره نظرات شما باعث دلگرمی ماست دوستان اگر سوالی دارند میتوانند مطرح کنند


با سلام به دوستان از اینکه خیلی طول کشید شرمنده ام اخه یه مشکلی برام پیش اومده بود که رفع شد
از امروز به بعد میریم به ادامه درسمون در ضمن یه سوپرایز براتون دارم.
پس تا چند روز دیگه.....


دانلود فیلم اموزشی به حجم 400KB

less0n_1.rar - 463.1 Kb


درس 2 ایجاید فایلها

همونطور که قولشو داده بودم یه سوپرایز واستون دارم اون هم پوسته ای است که میخواهیم طراحی کنیم
میتونین تصویرشو در زیر مشاهده کنید


32605751776878687304.png


[/FONT]



خوب برنامه دریمویور را باز کنیید و
file->new>php>create
کلیک کنید و یک فایل جدید باز کنیدو فایل را با نام
index.php
درون پوشه
wp-tm
ذخیره کنید.
خوب شما الان تونستیید صفحه اول سایتتونو تعریف کنید خوب الان احتیاج به یک فایل استایل دارین پس
file->new>css>create
را انتخاب کنید و یک فایل
css
جدید را باز کنیدو ان را با نام
style.css
تو پوشه
wp-tm
ذخیره کنیید
خوب الان باید شما این استایل را به صفحه اولتون فراخوانی کنید
شما یک فایل استایل را به 2 صورت میتونیدبه یک صفحه فراخوانی کنید(منظور از فراخوانی در زبان وب اینه که اون فایل را به صفحه اعمال کنیم یا به صورت دیگر بخوام بگم ایینه که اون فایل را وارد صفحه کنیم)
1.بصورت لینک
<link href="style.css" rel="stylesheet" type="text/css" />
2.بصورت ایمپورت
<style type="text/css">
@import url("style.css");
</style>

که فرق اینها در اینه که خاصیت ایمپورت بر خاصیت لینک ارجهیت دارد

خوب شما این استاییلتون را بصورت لینک به صفحه اعمال کنید
اموزش این کار در دریمویور را درپایین ببینید

09574377095673877909.png


توضیح:تو دریموییور پانل
css style
را باز کنیدو بر روی ایکونی که شبیه یک زنجیر است کلیک کنید مطاب شکل 1
سپس یک کادر باز شده که شما باید در ان دکمه
Browse
را کلیک کنید و سپس فایل
style.css
را که درون پوشه
wp-tm
است را انتخاب کنید مطابق شکل 2
و در اخر هم
ok
کنیدو کار تمام است شما تو دریمیور اینجوری باید فایلهای استایل را به صفحه فراخوانی کنید.

قبل از شروع ما باید یه تعداد کلاس و تگ برای صفحمون تعریف کنیم این کلاسها بسیار ضروری هستند
که هر طراحی قبل از طزاحی باید انها را برای پوسته خود تعریف کند.من قبلا این کلاسها را طراحی کردم و فقط شما
باید انها را درون استایلتون کپی کنید.
کد های زیر را درون
style.css
کپی کنید


کد:
[LEFT]/*
Theme Name: novindl
Theme URI: [URL]http://www.novindl.com/[/URL]
Version: 1.0
Author: mohsen_golmohammadi
Author URI: [URL]http://www.adoberan.com/[/URL]
*/

*{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}[/LEFT]
ازکدهای بالا نترسیید چون فرض کنید این کدها پیش فرض هستند و شما میتوانید برای هر پوسته یا سایتی از ان استفاده کنید
البته حتی شما میتوانید انها را تغییر دهید.
خوب حلا همه فایلهاتون را ذخیره کنید و درون صفحه
index.php
عبارت
test
را وارد کنیدو ذخیره کرده سپس کلید
f12
را برای نمایش پوسته درون مرورگر فشار دهید اگر عبارت فوق را مشاهده کردید هیچ مشکلی نیست در غیر این صورت
1.مطمئن باشید که نرم افزار
wampserver
ذز حال اجزاست
2.مطمئن باشید تمام سرویسهای نرم افزار فوق فعال هستند
3.ممکن است در تعرییف سایت تو دریمویور اشتباه کرده باشید پس تمام اینها رو چک کنید.

خوب دیگه داره وقت اون میرسه که باید کم کم کار عملی را شروع کنیم
اما قبل از این یک توضیع بسیار مهم درمورد
div id و div class
باید بدهم تا شما با یک قانون کلی اشنا شوید
div چیست؟
خیلی ساده بخوام بگم یعنی مرز بین عناصر وب را دیو میگویند.(البته معنی کتابی و علمیشو نمیدونم اما من اینجوری
معنی کردم که درک ان برای شما راحت بشود)
این بدان معنی است که بوسیله دیوها ما صفحات سایتمون را به بخشهای مجزا تقسیم میکنیم.
ما برای دیوها میتوانیم استاییل تعریف کنیم یعنی میتونیم مثلا طول و عرض ورنگ زمینه وفونت یا هر چیز دیگر برای ان تعریف
کنیم.و مطالب و تصاویر یا هر چیز دیگر را درون ان بگنجانیم.
دیوها را میتوان به دو گونه تقسیم کرد
1.div id
2.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
از این قانون مبراست و شما میتوانید بارها و بارها ار یک کلاس استفاده کنید
خوب درس امروز هم تموم شد و از جلسه بعد کار عملی در پیش داریم.

[FONT=&amp]دانلود فیلم اموزشی به حجم 500KB[/FONT]

less0n_2.rar - 513.6 Kb


pass:00123000000


درس 3 وارد کردن یک div به صفحه

سلام امروز میخواهیم دیگه کار عملی را شروع کنیم اما قبل از اون اگر مطالب قبل را مطالعه نکرده اید لطفا اول انها را مطالعه کنید
اول کار میخواهم چگونگی تعریف div id و div class و وارد کردن انها در صفحه شما با دریمویور را توضیح دهم پس من این اموزش را بصورت کامل بیان میکنم تا در اینده اگه گفتم فلان کلاس یا ایدی را وارد صفحه کنید شما چگونگی این کار را فرا گرفته باشید
چگونه یک div class و div id را تعریف و داخل صفحه کنیم
برای این که شما یک div class یا div id را وارد صفحه کنید از منو بالا insert > layout Objects > Div tag را انتخاب کنید
یک کادر برای شما باز خواهد شد مثل تصویر زیر که به معرفی بخش های ان میپردازیم

87340184179682315985.png



اگر میخواهید که یک کلاس تعریف کنید تو کادر: class نام یک کلاس را وارد کنید اسمها مهم نیستند مهم اینه که شما اون اسمها رو به خاطر بسپاریید
اگر میخواهید یک div id وارد صفحه کنید در کادر id: یک اسم را وارد کنید
شما الان فقط یک کلاس یا ادی را انتخاب کردید اما هنوز وارد صفحه نکردین
برای این کار دو دکمه برای شما تعبیه شده است که ما به ویزگی هر کدام می پردازیم
دکمه ok
با زدن این دکمه اسمی که برای یک id یا class انتخاب کردید مستقیم وارد صفحه میشود البته کاربرد این دکمه زمانی است که شما قبلا یک id یا class را درون فایل style.css تعریف کرده باشید که در این صورت تو کادهای کلاس و ایدی میتوانید ان را انتخاب کنید و ok را بزنید و وارد صفحه کنید.

دکمه new css Rule
این دکمه برای زمانی است که شما یک کلاس یا ادی جدید میخواهید تعریف کنید
که با این دکمه میتوانید برای ان استایل مشخص کنید که پس از زدن این دکمه یک کادر بصورت زیر نمایان میشود
مثلا من تو کادر کلاس عبارت test را تایپ و سپس دکمه new css Rule را میزنم.

73281940722661298505.png



من بعد از زدن دکمه new css Rule با کادر بالا مواجه میشوم که به توضیح بخش های ان می پردازیم
کادر selector tyle

این کادر زمانی بدرتون میخوره که شما بخواهید نظرتون را عوض کنید مثلا من تو بالا یک کلاس با نام test نوشتم اما الان نظرم عوض میشه و میخوام اون test را بصورت id در بیارم که از این کادر عبارت
ID (applies to only one HTM|L element)
انتخاب میکنم

کادر select name:

اگر تو انتخاب نام منصرف شده اید ار این کادر تغییر نام دهید

کادر Rule Definition:

این کادر بسیار بسیار مهم و کاربردیه دقت فرمایید که شما میتوانید دراین کادر مشخص کنید که استایل این کلاس یا ایدی درون کدام فایل استایل نوسته شود اگر شما استایلی را به صفحتون فراخوانی کرده باشید اسمش تو این کادر میاد اما اگر شما استاییلی را به صفحه فراخوانی نکرده باشیید دو انتخاب دارید
1.(this Document only)
استایل مورد نظر را در همین صفحه تو بخش HED صفحه مینویسد
2.(new css Rule file)
با انتخاب این گزینه برنامه یک فایل css جدید را در پوشه ای که شما انتخاب میکنید ذخیره و به صفحه لینک میدهد و هم اون استاییل خاص را توی اون مینویسد .

خوب به هر حال تنظیمات خود را انتخاب کنید و با زدن دکمه ok با یک کادر نهایی مواجه می شوید که شما توی اون استایل کلاس یا ایدی مورد نظر را تعریف میکنید.

98190834233277247260.png



من دیگه با این کادر کاری ندارم و توضیح نمیدهم چون انوقت باید کل دریموییور را براتون توضیح دهم شما مییتوانید از پستهای قبل که بصورت مهم در امده اند این کادر و ویزگیهای ان را فرا بگیرید پس من در اینده به کارهایی میپردازم که با انها سروکار داریم.
خلاصه تو این کادر شما ویزگی اون div را مشخص میکنید و با زدن دکمه ok کار تمام میشود و شما اون دیو را به همراه استایلش وارد صفحه میکنیید.

فقط یک بخش مهم میمونه که اون هم محل جا گذاری دیوها است که تو عکس اول میبینید که تو درس بعد به ان میپرداریم که میخواهیم صفحه خود را با این دیوها بخش بندی کنیم..



دانلود فیلم اموزشی درس3 به حجم 700KB


less0n_3.rar - 697.2 Kb

[FONT=&amp]
[/FONT]
[FONT=&amp]درس [/FONT][FONT=&amp]4[/FONT]
[FONT=&amp]بخش بندی صفحات توسط دیوها قسمت اول[/FONT]
[FONT=&amp]تو این درس شما می اموزید که چگونه با دیوها صفحات سایتتون را بخش بندی کنید.[/FONT]
[FONT=&amp]ما صفحه سایت خود را باید به صورت زیر در بیاریم تا بتونیم شکل کلی سایتمون را طراحی کنیم.[/FONT]
08424698769610328125.png


[FONT=&amp]تصویر بالا نقشه کلی پوسته ما را تشکیل می دهد پس ما باید اول پوسته خود را مثل تصویر بالا با دیوها تقسیم کنیم .[/FONT]
[FONT=&amp]همانطور که در بالا می بینید ما صفحه خود را با [/FONT][FONT=&amp]div id[/FONT][FONT=&amp] تقسیم کردیم چرا؟ چون مثلا دیو [/FONT][FONT=&amp]header[/FONT][FONT=&amp] فقط یک تا است نه چند تا یا ما فقط یک [/FONT][FONT=&amp]footer[/FONT][FONT=&amp] در صفحه داریم نه چندتا ما بقی هم همینطور.[/FONT]
[FONT=&amp]شروع کار با دریمویور :[/FONT]
· [FONT=&amp]برنامه را اجرا کنید وفایل [/FONT]

[FONT=&amp]index.php[/FONT][FONT=&amp] را توش باز کنید[/FONT]
· [FONT=&amp]از منو بالا [/FONT]

[FONT=&amp]insert > Layout objects > Div tag[/FONT][FONT=&amp] را انتخاب کنید.[/FONT]
· [FONT=&amp]توی کادر ظاهر شده تو قسمت [/FONT][FONT=&amp]id:[/FONT][FONT=&amp] عبارت [/FONT][FONT=&amp]warpaper [/FONT][FONT=&amp] را تایپ کنید.[/FONT]
· [FONT=&amp]روی دکمه [/FONT][FONT=&amp]new css Rule[/FONT][FONT=&amp] کلیک کنید[/FONT]
· [FONT=&amp]در کادر ظاهر شده تو قسمت [/FONT][FONT=&amp]Rule Difination[/FONT][FONT=&amp] را روی [/FONT][FONT=&amp]style.css[/FONT][FONT=&amp] تنظیم کنید.[/FONT]
[FONT=&amp]روی [/FONT][FONT=&amp]ok [/FONT][FONT=&amp] کلیک کنید و در کادر جدید تب [/FONT][FONT=&amp]Box[/FONT][FONT=&amp] را باز کنید و مانند تصویر زیر انجام دهید. تصویر 1-10
61216158672994851445.png

[/FONT] [FONT=&amp]توضیح:[/FONT]
[FONT=&amp] همانطور که من قبلا گفتم این کادر برای استایل نویسی دیوها به کار میرود[/FONT]
[FONT=&amp]حالا ما برای دیو [/FONT][FONT=&amp]warpaper[/FONT][FONT=&amp] چه استایلی تعریف کردیم؟[/FONT]
[FONT=&amp]ما تو کادر بالا گفتیم که طول این دیو برابر با [/FONT][FONT=&amp]960 px[/FONT][FONT=&amp] و وسط چین باشد یعنی با خاصیت:[/FONT]
[FONT=&amp]margin: 0px auto[/FONT][FONT=&amp];[/FONT]​
[FONT=&amp]این کار امکان پذیر است.[/FONT]
· [FONT=&amp]خوب بر روی [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] کلیک کنید تا [/FONT][FONT=&amp]div id warpaper[/FONT][FONT=&amp] وارد صفحه شود.[/FONT]
· [FONT=&amp]متن داخل [/FONT][FONT=&amp]div id warpaper[/FONT][FONT=&amp] را پاک کنید یعنی متن [/FONT][FONT=&amp]Content for id "warpaper" Goes Here[/FONT][FONT=&amp] و از منو بالا [/FONT][FONT=&amp]insert > Layout objects > Div tag[/FONT][FONT=&amp] را انتخاب کنید سپس در کادر جدید در قسمت [/FONT][FONT=&amp]id:[/FONT][FONT=&amp] نام [/FONT][FONT=&amp]header[/FONT][FONT=&amp] را وارد کنید و تنظیمات را کامل کنید تا به کادر زیر برسید و تنظیمات ان را انجام دهید[/FONT]
[FONT=&amp]تصویر 1-11[/FONT]
59779961930415275202.png


[FONT=&amp]و مثل قبل [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] کنید تا [/FONT][FONT=&amp]div id header[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]div id warpaper[/FONT][FONT=&amp] شود.[/FONT]
[FONT=&amp]حالا ما باید بعد از [/FONT][FONT=&amp]div id header[/FONT][FONT=&amp] یک [/FONT][FONT=&amp]id[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]nav[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]div id warpaper[/FONT][FONT=&amp] کنیم.[/FONT]
· [FONT=&amp]از منو بالا [/FONT][FONT=&amp]insert > Layout objects > Div tag[/FONT][FONT=&amp] را انتخاب کنید سپس در کادر جدید در قسمت [/FONT][FONT=&amp]id:[/FONT][FONT=&amp] نام [/FONT][FONT=&amp]nav[/FONT][FONT=&amp] را تایپ کنید[/FONT]
[FONT=&amp]و در همون کادر تنظیمات زیر را انجام دهید تا [/FONT][FONT=&amp]div nav[/FONT][FONT=&amp] بعد از [/FONT][FONT=&amp]div header[/FONT][FONT=&amp] قرار گیرد[/FONT]
[FONT=&amp]تصویر 1-12
75848432543001194451.png

[/FONT] [FONT=&amp]قبل از شروع ادامه کار باید در مورد محل قرار گیری دیوها یک توضیحاتی باید بدم تا در اینده دچار مشکل نشوید.[/FONT]
[FONT=&amp]به [/FONT][FONT=&amp]insert:[/FONT][FONT=&amp] توجه کنید این کادر دارای چند گزینه است که به معرفی بخش های ان می پردازیم.[/FONT]
1. [FONT=&amp]At insertation point[/FONT][FONT=&amp] دیو جدید را هرجا که کلیک
کرده اید وارد می کند[/FONT]
2. [FONT=&amp]Befor tag[/FONT][FONT=&amp] دیو جدید را قبل از دیو انتخابی شما قرار می دهد که دیو انتخابی شما در کادر راست این کادر انتخاب می شود[/FONT]
3. [FONT=&amp]After start of tag[/FONT][FONT=&amp] دیو جدید را درون دیو انتخابی و در اول ان دیو قرار می دهد.[/FONT]
4. [FONT=&amp]Befor end of tag[/FONT][FONT=&amp] دیو جدید را درون دیو انتخابی و قبل از تمام یا بسته شدن ان قرار میدهد.[/FONT]
1. [FONT=&amp]After tag[/FONT][FONT=&amp] دیو جدید را بعد از دیو انتخابی شما وارد می کند.[/FONT]
[FONT=&amp]خوب بر روی [/FONT][FONT=&amp]new css rule[/FONT][FONT=&amp] کلیک کنید و ما بقی کار را خودتون انجام دهید مثل تصویر زیر فقط یک نکته مهم که تمام دیوها یا تگهایی که ما تو این پروزه به ان می پردازیم باید استایل انها درون فایل [/FONT][FONT=&amp]Style.css[/FONT]
[FONT=&amp]نوشته شوند پس حواستون باشه که همیشه [/FONT][FONT=&amp]Rule Definition[/FONT][FONT=&amp] روی [/FONT][FONT=&amp]style.css[/FONT][FONT=&amp] تنظیم باشد.[/FONT]
[FONT=&amp]تصویر 1-13[/FONT]
49314642447706001165.png


[FONT=&amp]*تصویر بالا تنظیمات [/FONT][FONT=&amp]#nav[/FONT][FONT=&amp] است[/FONT]
· [FONT=&amp]یک [/FONT][FONT=&amp]id[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]container[/FONT][FONT=&amp] بعد از [/FONT][FONT=&amp]div nav[/FONT][FONT=&amp] قرار دهید.[/FONT]
· [FONT=&amp]یک [/FONT][FONT=&amp]id[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]footer[/FONT][FONT=&amp] بعد از [/FONT][FONT=&amp]div id container[/FONT][FONT=&amp] قرار دهید.[/FONT]
[FONT=&amp]شکل نهایی باید به صورت زیر باشد[/FONT]

78578352288692859982.png




[FONT=&amp]پایان درس4 قسمت اول[/FONT]

دانلود فیلم اموزشی درس4 قسمت اول به حجم 500KB

less0n_4-part1.rar - 532.7 Kb


[FONT=&amp]درس [/FONT][FONT=&amp]4[/FONT]
[FONT=&amp]بخش بندی صفحات توسط دیوها قسمت دوم[/FONT]

[FONT=&amp]خوب تو این درس می خواهیم [/FONT][FONT=&amp]sidebar[/FONT][FONT=&amp] ها و [/FONT][FONT=&amp]maincont[/FONT][FONT=&amp] را بسازیم در ضمن باید به عرضتون برسونم که این مبحث بسیار مهم است و ریزه نکات ظریفی دارد و شما باید این مبحث را با دقت بیشتری مطالعه کنید.[/FONT]
[FONT=&amp]شما در این درس با کلاس [/FONT][FONT=&amp]clear[/FONT][FONT=&amp] اشنا می شوید. [/FONT]
· [FONT=&amp]فایل [/FONT][FONT=&amp]index.php[/FONT][FONT=&amp] را باز کنید و متن داخل [/FONT][FONT=&amp]container [/FONT][FONT=&amp] را پاک کنید و از منو بالا [/FONT][FONT=&amp]insert > Layout objects > Div tag[/FONT][FONT=&amp] را انتخاب کنید [/FONT]
[FONT=&amp]در کادر [/FONT][FONT=&amp]id:[/FONT][FONT=&amp] نام [/FONT][FONT=&amp]sidebar-left [/FONT][FONT=&amp] را وارد کنید و[/FONT][FONT=&amp]new css rule[/FONT][FONT=&amp] را کلیک کرده و بقیه مراحل را همانند قبل انجام دهید و در پایان تب [/FONT][FONT=&amp]box[/FONT][FONT=&amp] را انتخاب کنید و تنظیمات را با توجه به تصویر زیر انجام دهید.[/FONT]
[FONT=&amp]تصویر 1-14[/FONT]
48638322538065533378.png



[FONT=&amp]و در پایان کلید [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] را بزنید
[/FONT][FONT=&amp]حالا نوبت [/FONT][FONT=&amp]maincont[/FONT][FONT=&amp] است پس از [/FONT][FONT=&amp]insert > Layout objects > Div tag [/FONT][FONT=&amp] انتخاب کنید و اسم [/FONT][FONT=&amp]id[/FONT][FONT=&amp] را [/FONT][FONT=&amp]maincont[/FONT][FONT=&amp] بگذارید سپس در [/FONT][FONT=&amp]insert:[/FONT][FONT=&amp] گزینه [/FONT][FONT=&amp]After tag[/FONT][FONT=&amp] را انتخاب و از کادر روبرو [/FONT][FONT=&amp]sidebar-left[/FONT][FONT=&amp] راانتخاب کنید و [/FONT][FONT=&amp] new css rule[/FONT][FONT=&amp] را کلیک کنید و با توجه به شکل تب [/FONT][FONT=&amp]box[/FONT][FONT=&amp] را تنظیم کنید.
تصویر 1-15
85445534244089565003.png


[/FONT][FONT=&amp]ساخت [/FONT][FONT=&amp]sidebar-right[/FONT][FONT=&amp] از منوی بالا [/FONT][FONT=&amp]insert > Layout objects > Div tag [/FONT][FONT=&amp] را انتخاب کرده و یک [/FONT][FONT=&amp]id[/FONT][FONT=&amp] با نام [/FONT][FONT=&amp]sidebar-right[/FONT][FONT=&amp] بعد از [/FONT][FONT=&amp]maincont[/FONT][FONT=&amp] وارد کرده و تنظیمات [/FONT][FONT=&amp]box[/FONT][FONT=&amp] ان را با توجه به تصویر زیر انجام دهید. تصویر 1-16
42617761388054660202.png


[/FONT]
[FONT=&amp]خوب کار تمام شد اما یه مشکل ما سه تا [/FONT][FONT=&amp]id[/FONT][FONT=&amp] به نام های [/FONT][FONT=&amp]sidebar-left,maincont,sidebar-right [/FONT][FONT=&amp] را وارد [/FONT][FONT=&amp]container[/FONT][FONT=&amp] کردیم اما ظاهرا این [/FONT][FONT=&amp]container[/FONT][FONT=&amp] ناپدید شده و ما مثلا رنگ پس زمینه ان را ابی کنیم توی مرورگر هیچی نشون نمی دهد هنگار که اصلا چنین چیزی نبوده اگه به فایل [/FONT][FONT=&amp]style.css[/FONT][FONT=&amp] یه نگاهی بیندارید یک کلاس می بینید[/FONT]
[FONT=&amp]به نام [/FONT][FONT=&amp].clear[/FONT][FONT=&amp] این کلاس واسه چنین شرایطی تعریف شده که با وارد کردن ان [/FONT][FONT=&amp]id [/FONT][FONT=&amp] ما نمایان می شود[/FONT]
[FONT=&amp]پس این بار در کادر [/FONT][FONT=&amp]class:[/FONT][FONT=&amp] کلاس [/FONT][FONT=&amp].clear[/FONT][FONT=&amp] را انتخاب کرده و گزینه [/FONT][FONT=&amp]insert:[/FONT][FONT=&amp] را روی [/FONT][FONT=&amp]After tag[/FONT][FONT=&amp] تنظیم کنید و در کادر روبرو [/FONT][FONT=&amp]#sidebar-right[/FONT][FONT=&amp] را انتخاب کنید و مستقیما [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] کنید تا این کلاس وارد شود وشما متن داخل ان را پاک کنید و صفحه را ذخیره کنید.

[/FONT]


[FONT=&amp]پایان درس4 قسمت دوم[/FONT]



دانلود فیلم اموزشی درس4 قسمت دوم به حجم 530KB


less0n_4-part2.rar - 534.9 Kb

[FONT=&amp]درس 5
هدر سایت [/FONT][FONT=&amp](header)[/FONT]

[FONT=&amp]امروز می پردازیم به هدر سایت و تنظیم های ان و این درس بسیار کوتاه است.[/FONT]
[FONT=&amp]قبل از شروع کار لطفاً فایل زیر را دانلود کنید و ان را تو پوشه [/FONT][FONT=&amp]img[/FONT][FONT=&amp] واقع در پوشه [/FONT][FONT=&amp]wp-tm[/FONT][FONT=&amp] کپی کنید و سپس ان را از حالت فشرده خارج کنید.[/FONT]
[FONT=&amp]img.rar - 389.8 Kb
[/FONT]
پسورد : 00123000000
[FONT=&amp]خوب برنامه دریمویور را باز کرده و فایل [/FONT][FONT=&amp]index.php[/FONT][FONT=&amp] را در ان اجرا کنید سپس تو پانل [/FONT][FONT=&amp]css styles[/FONT][FONT=&amp] روی ایدی [/FONT][FONT=&amp]header[/FONT][FONT=&amp] دوبار کلیک کنید.[/FONT]
[FONT=&amp]سپس تو کادر باز شده تب [/FONT][FONT=&amp]Background [/FONT][FONT=&amp] را باز کنید اینک دکمه [/FONT][FONT=&amp]Browse[/FONT][FONT=&amp] را زده و از تو پوشه [/FONT][FONT=&amp]img[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]header.jpg[/FONT][FONT=&amp] را انتخاب کرده و دو بار [/FONT][FONT=&amp]ok [/FONT][FONT=&amp] کنید.
تصویر 1-17[/FONT]
[FONT=&amp]
88110576358481621121.png

[/FONT]
[FONT=&amp]همه پرونده ها رو ذخیره کرده و کلید [/FONT][FONT=&amp]F12[/FONT][FONT=&amp] را فشار دهید تا حاصل کار را در مرورگر مشاهده کنید[/FONT]
[FONT=&amp]اکنون بر روی ایدی [/FONT][FONT=&amp]#warpaper[/FONT][FONT=&amp] دو بار کلیک کنید و تو تب [/FONT][FONT=&amp]Background[/FONT][FONT=&amp] رنگ [/FONT][FONT=&amp]Background-color[/FONT][FONT=&amp] را روی سفید {[/FONT][FONT=&amp]#FFF[/FONT][FONT=&amp]} تنظیم کنید.[/FONT]

[FONT=&amp]پایان درس 5[/FONT]



[FONT=&amp]درس 6[/FONT]
[FONT=&amp] منو سایت [/FONT][FONT=&amp](nav)[/FONT][FONT=&amp] بخش اول [/FONT][FONT=&amp]menu[/FONT]
[FONT=&amp]حالا نوبت به منوی سایت می رسد و شما تو این درس با خاصیت لینکها در حالت معمولی و هم تو حالت [/FONT][FONT=&amp]hover[/FONT][FONT=&amp] و از جهتی هم با انواع لیستها هم اشنا می شوید[/FONT]
[FONT=&amp]لینک : نوشته یا تصویری است که با کلیک بر روی ان مرور گر به صفحه مورد نظر تغییر مسیر می دهد.[/FONT]
[FONT=&amp]ما لینک ها رو در 4 حالت می توانیم قرار دهیم و هم می توانیم برای هر حالت استایل جدید مثلا رنگ متن [/FONT]–[FONT=&amp]فونت-زیر خط دار یا ..........[/FONT]
[FONT=&amp]تعریف کنیم که این 4 حالت عبارتند از :[/FONT]
1. [FONT=&amp]a:link[/FONT][FONT=&amp] این حالت معمولی لینک است و ما در این حالت موس را بر روی ان نبرده ایم.[/FONT]
2. [FONT=&amp]a:hover[/FONT][FONT=&amp] به حالتی گویند که موس بر روی لینک است اما هنوز کلیک نکرده ایم.[/FONT]
3. [FONT=&amp] a:active[/FONT][FONT=&amp] به حالتی گویند که ما بر روی لینک کلیک کرده ایم اما کلیک را هنوز رها نکرده ایم.[/FONT]
4. [FONT=&amp]a:visited[/FONT][FONT=&amp] به حالتی گویند که ما روی لینک کلیک کرده و رها می کنیم.[/FONT]


[FONT=&amp]همچنین می پردازیم به لیستها که ما دو نوع لیست داریم[/FONT]
1. [FONT=&amp]لیستهای مرتب[/FONT]
[FONT=&amp]که نمایش انها به صورت زیر است[/FONT]
[FONT=&amp]1. لیست[/FONT]
[FONT=&amp]2. لیست[/FONT]
[FONT=&amp]3. لیست[/FONT]
2. [FONT=&amp]لیستهای نا مرتب[/FONT]
[FONT=&amp]که نمایش انها به صورت زیر است[/FONT]
· [FONT=&amp]لیست[/FONT]
· [FONT=&amp]لیست[/FONT]
· [FONT=&amp]لیست[/FONT]
[FONT=&amp]خوب بهتره دیگه ما به صورت عملی با اینها اشنا بشویم.[/FONT]
[FONT=&amp]درون [/FONT][FONT=&amp]#nav[/FONT][FONT=&amp] در صفحه متن داخل ان را ([/FONT][FONT=&amp]Content for id "nav" Goes Here[/FONT][FONT=&amp]) پاک کنید و از منو بالا [/FONT][FONT=&amp]insert > Layout objects > Div tag[/FONT][FONT=&amp] انتخاب کنید و یک ایدی با نام [/FONT][FONT=&amp]search-top[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]nav[/FONT][FONT=&amp] کنید و خاصیتهای ان را به صورت زیر تعریف کنید.[/FONT]
[FONT=&amp]تصویر 1-19[/FONT]
[FONT=&amp]
63506590693111655119.png


[/FONT]
[FONT=&amp]حالا یک ایدی با نام [/FONT][FONT=&amp]menu[/FONT][FONT=&amp] بعد از ایدی [/FONT][FONT=&amp]search-top[/FONT][FONT=&amp] وارد صفحه کنید و به ان خاصیت های زیر را بدهید.[/FONT]
[FONT=&amp]تصویر 1-20[/FONT]
85241451916859102332.png


[FONT=&amp]حالا متن داخل [/FONT][FONT=&amp]menu[/FONT][FONT=&amp] را پاک کنید و از [/FONT][FONT=&amp]insert > html > text objects > unordered list[/FONT][FONT=&amp] را انتخاب کنید و کلمه صفحه اصلی را تایپ کنید سپس [/FONT][FONT=&amp]inter[/FONT][FONT=&amp] را بزنید و کلمه ارشیو و اینتر و کلمه جستجو و اینتر و کلمه تبلیغات و اینتر و کلمه تماس با ما و اینتر را بزنید حالا یک نگاه به قسمت کدها بیندارید کد شما باید مثل زیر باشد[/FONT]

کد:
[LEFT]<div id="menu">
      <ul>
        <li>صفحه اصلی</li>
        <li>ارشیو</li>
        <li>تبلیغات</li>
        <li>جستجو</li>
        <li>تماس با ما</li>
      </ul>
    </div>
[/LEFT]


[FONT=&amp]سپس به همه کلمات یک لینک پوچ مثل [/FONT]# یا javascript:; بدهید
تصویر شما باید به شکل زیر شده باشد.
تصویر 1-21
14122018413134684775.png


[FONT=&amp]حالا برای افزایش سرعت کار کدهای زیر را به [/FONT][FONT=&amp]style.css[/FONT][FONT=&amp] اضافه کنید[/FONT]

کد:
#menu li { float: right; }
#menu li a { color:#FFF; display:block; font-family:tahoma; font-size:11px; font-style:normal; font-variant:normal; font-weight:normal; line-height:14px; margin:5px 5px 0; padding:0 0 5px 5px; text-align:center; text-decoration:none }
#menu li a:hover { color: #000; background-color: #acaaaa; }




[FONT=&amp]شکل نهایی[/FONT]
[FONT=&amp] تصویر [/FONT][FONT=&amp]1-22[/FONT]
16774399195816744131.png


پایان درس

دانلود فیلم اموزشی درس 5 و 6 بخش اول به حجم 2.5MB

les5_6.rar - 2.5 Mb


pass:00123000000



[FONT=&amp]درس 6 بخش دوم کادر جستجو[/FONT]
[FONT=&amp]متن داخل [/FONT][FONT=&amp]search-top[/FONT][FONT=&amp] را پاک کنید و به حالت [/FONT][FONT=&amp]code[/FONT][FONT=&amp] در دریمویور بروید و از [/FONT][FONT=&amp]insert>form>form[/FONT][FONT=&amp] را انتخاب کنید و یک کادر برای شما باز خواهد شد که با توجه به تصویر ان را کامل کنید[/FONT]
[FONT=&amp]تصویر 1-26
88661329302505653011.png


43297115959888117660.png

[/FONT] [FONT=&amp]سپس کلید [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] را بزنید تا یک فرم وارد [/FONT][FONT=&amp]search-top[/FONT][FONT=&amp] شود این فرم جستجوی پوسته شما است حالا به یک کادر متن و یک دکمه جستجو نیاز دارید. اما قبلش یک توضیح در مورد فرم ها بدهم فرم ها را می توان به دو دسته کلی تقسیم کرد [/FONT]
· [FONT=&amp]فرم هایی که وظیفه گرفتن اطلاعات را دارند که [/FONT][FONT=&amp]method[/FONT][FONT=&amp] انها به صورت [/FONT][FONT=&amp]get[/FONT][FONT=&amp] است مثل فرم های جستجو[/FONT]
· [FONT=&amp]فرم هایی که وظیفه فرستادن اطلاعات را دارند که [/FONT][FONT=&amp]methord[/FONT][FONT=&amp] انها به صورت [/FONT][FONT=&amp]post[/FONT][FONT=&amp] است مثل فرم های ثبت نظرات یا فرم های تماس با ما و .....[/FONT]
[FONT=&amp]خوب می رویم به ادامه مطلب درون فرم یک کیک بکنید تا بتوانید یک کادر متن را درون ان قرار دهید برای قرار دادن کادر متن مراحل زیر را دنبال کنید.[/FONT]
[FONT=&amp]از [/FONT][FONT=&amp]insert>form>text field[/FONT][FONT=&amp] را انتخاب کنید و تنظیمات کادر جدید را با توجه به تصویر زیر انجام دهید.[/FONT]
[FONT=&amp]تصویر 1-28[/FONT]
[FONT=&amp]
56698604931814068827.png
[/FONT]

[FONT=&amp]سپس تب[/FONT][FONT=&amp]style sheet[/FONT][FONT=&amp] را باز کنید و تنظیمات ان را با توجه به تصویر زیر انجام دهید[/FONT]
[FONT=&amp]تصویر 1-29
66561458064104797429.png

[/FONT][FONT=&amp]حالا این استایل را به [/FONT][FONT=&amp]style.css[/FONT][FONT=&amp] اضافه کنید

[/FONT]
کد:
#search-form #s { background: transparent; height: 20px; margin-top: 5px; border-width: 0px; border-style: none; padding: 0px 10px; width: 120px; line-height: 20px; float: right; }
[FONT=&amp]خوب می رسیم به دکمه جستجو برای یک دکمه جستجو از [/FONT][FONT=&amp]insert>form>text field[/FONT][FONT=&amp] را انتخاب کنید و تنظیمات ان را با توجه به شکل زیر انجام دهید(پیشنهاد میکنم برای درج فرم ها با کادرهای متن و جستجو همیشه به حالت [/FONT][FONT=&amp]code[/FONT][FONT=&amp] دریمویور بروید زیرا در این حالت شما میتوانید تنظیمات بیشتری را تحت اختیار داشته باشید.)[/FONT]
[FONT=&amp]تصویر1-30
44986362161057693266.png


[/FONT] [FONT=&amp]سپس[/FONT]
[FONT=&amp]تصویر 1-31

61488188876180396147.png

[/FONT] [FONT=&amp]خوب این هم استایل دکمه ما[/FONT]


کد:
#search-form #submit { margin: 5px 0px 0px; padding: 0px; height: 20px; background: transparent; border-width: 0px; border-style: none; float: left; color: #FFF; font: 10px Tahoma, Geneva, sans-serif; width: 35px; }
[FONT=&amp]شکل کلی باید به صورت زیر شده باشد[/FONT]
[FONT=&amp]تصویر 1-32

63948891435025256777.png

[/FONT] [FONT=&amp]خوب این درس هم به پایان رسید

[/FONT]
[FONT=&amp]درس 7 ستون های کناری [/FONT][FONT=&amp](sidebar)[/FONT]
[FONT=&amp]بخش اول-[/FONT]
[FONT=&amp]sidebar left[/FONT]

[FONT=&amp]دیگه می پردازیم به ستون های کناری و از ستون کناری سمت چپ شروع می کنیم.[/FONT]
[FONT=&amp]من اولش می خواستم کل ستون ها رو با سه تا کلاس سر هم کنم اما دیدم یک مشکلاتی بعدا پیش می اید که ارزش ان را نداشت پس یک کار دیگه ای میکنیم و اونها را به صورت مجزا تعریف می کنیم پس برنامه را باز کنید و متن داخل [/FONT][FONT=&amp]sidebar-lef[/FONT][FONT=&amp] را پاک کنید و از [/FONT][FONT=&amp]insert>layout objects>div tag[/FONT][FONT=&amp] را انتخاب کنید و یک کلاس به نام [/FONT][FONT=&amp]left-sidebar-box-ads[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]sidebar-left[/FONT][FONT=&amp] کنید و من از این به بعد برای سرعت کار فقط استایل ها را می دهم و شما ان را وارد [/FONT][FONT=&amp]style.css[/FONT][FONT=&amp] کنید تا سرعت کار افزایش یابد[/FONT]
[FONT=&amp]خوب یک کلاس دیگه بعد از کلاس [/FONT][FONT=&amp]left-sidebar-box-ads[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]sidebar-left[/FONT][FONT=&amp] کنید و همچنین یک کلاس بعد از [/FONT][FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]left-sidebar-box-monthly-archive[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]sidebar-left [/FONT][FONT=&amp] و یک کلاس بعد از [/FONT][FONT=&amp]left-sidebar-box-monthly-archive[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]left-sidebar-box-random-post[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]sidebar-left [/FONT][FONT=&amp] و یک کلاس بعد از [/FONT][FONT=&amp]left-sidebar-box-random-post[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]left-sidebar-box-statistics[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]sidebar-left[/FONT][FONT=&amp] کنید شکل کلی باید مثل زیر شده باشد[/FONT]
[FONT=&amp]تصویر 1-23[/FONT]
07856879264011863683.png


[FONT=&amp]خوب ما [/FONT][FONT=&amp]sidebar-left[/FONT][FONT=&amp] را به 5 قسمت تقسیم کردیم که هر قسمت مخصوص به یک بخش سایت می باشند که عبارتند از :[/FONT]
[FONT=&amp]قسمت تبلیغات[/FONT]
[FONT=&amp]مطالب قبل[/FONT]
[FONT=&amp]آرشیو سایت[/FONT]
[FONT=&amp]مطالب اتفاقی[/FONT]
[FONT=&amp]امار سایت[/FONT]
[FONT=&amp]- خوب حالا ما تک تک بخشها را طراحی میکنیم شما فقط طبق مراحل زیر پیش بروید[/FONT]
· [FONT=&amp]متن داخل [/FONT][FONT=&amp]left-sidebar-box-ads[/FONT][FONT=&amp] را پاک کنید و یک کلاس به نام[/FONT]
[FONT=&amp]top_left-sidebar-box-ads[/FONT][FONT=&amp] را داخل [/FONT][FONT=&amp]left-sidebar-box-ads[/FONT][FONT=&amp] وارد کنید و بعد از [/FONT][FONT=&amp]top_left-sidebar-box-ads[/FONT][FONT=&amp] یک کلاس به نام [/FONT][FONT=&amp]bg_left-sidebar-box-ads[/FONT][FONT=&amp] را وارد و همچنین یک کلاس به نام [/FONT][FONT=&amp]botoon_left-sidebar-box-ads [/FONT][FONT=&amp] را بعد از [/FONT][FONT=&amp]bg_left-sidebar-box-ads[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]left-sidebar-box-ads[/FONT][FONT=&amp] کنید.
شکل کلی به صورت زیر می باشد. [/FONT]
39199125216434913800.png


[FONT=&amp]حالا نوبت [/FONT][FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] است مراحل زیر را دنبال کنید[/FONT]
· [FONT=&amp]متن داخل [/FONT][FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] را پاک کنید و یک کلاس به نام [/FONT][FONT=&amp]top_[/FONT] [FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] را وارد و سپس بعد از ان یک کلاس به نام [/FONT][FONT=&amp]bg_[/FONT] [FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] را وارد و همچنین بعد از ان یک کلاس به نام [/FONT][FONT=&amp]botoon_[/FONT] [FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] را وارد [/FONT][FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] کنید. شکل کلی را می توانید در زیر مشاهده کنید[/FONT]
[FONT=&amp]
56782189225675897220.png

[/FONT]

[FONT=&amp]خوب مراحل بعد هم شبیه مراحل بالا است و هیچ فرقی نمی کند من اسم کلاس ها را می دهم شما هم طبق مراحل بالا انجام دهید[/FONT]
· [FONT=&amp]برای بخش [/FONT][FONT=&amp]left-sidebar-box-monthly-archive[/FONT][FONT=&amp] کلاس های [/FONT]
[FONT=&amp]top_[/FONT] [FONT=&amp]left-sidebar-box-monthly-archive[/FONT][FONT=&amp] و بعد از ان [/FONT][FONT=&amp]bg_[/FONT] [FONT=&amp]left-sidebar-box-monthly-archive[/FONT][FONT=&amp] و بعد از ان [/FONT][FONT=&amp]botoon_[/FONT] [FONT=&amp]left-sidebar-box-monthly-archive[/FONT][FONT=&amp] را وارد کنید[/FONT]
· [FONT=&amp]برای بخش [/FONT][FONT=&amp]left-sidebar-box-random-post[/FONT][FONT=&amp] کلاس های [/FONT][FONT=&amp]top_[/FONT] [FONT=&amp]left-sidebar-box-random-post [/FONT][FONT=&amp] و بعد از ان [/FONT][FONT=&amp]bg_[/FONT] [FONT=&amp]left-sidebar-box-random-post[/FONT][FONT=&amp] و بعد از ان [/FONT][FONT=&amp]botoon_[/FONT] [FONT=&amp]left-sidebar-box-random-post[/FONT][FONT=&amp] را وارد [/FONT][FONT=&amp]left-sidebar-box-random-post[/FONT][FONT=&amp] کنید[/FONT]
· [FONT=&amp]برای بخش [/FONT][FONT=&amp]left-sidebar-box-statistics[/FONT][FONT=&amp] کلاس های [/FONT][FONT=&amp]top_[/FONT] [FONT=&amp]left-sidebar-box-statistics [/FONT][FONT=&amp] و بعد از ان [/FONT][FONT=&amp]bg_[/FONT] [FONT=&amp]left-sidebar-box-statistics[/FONT][FONT=&amp] و بعد از ان [/FONT][FONT=&amp]botoon_[/FONT] [FONT=&amp]left-sidebar-box-statistics[/FONT][FONT=&amp] را وارد[/FONT][FONT=&amp]left-sidebar-box-statistics[/FONT][FONT=&amp] کنید و شکل کلی [/FONT][FONT=&amp]sidebar-left[/FONT][FONT=&amp] باید شکل زیر شده باشد[/FONT]
[FONT=&amp]تصویر 1-26[/FONT]
03865655576608224408.png


[FONT=&amp]خوب مرحله بعد که مراحل پایانی کار است بسیار راحت است و شما باید تصاویر را در این کلاس ها جایگذاری کنید و همچنین خاصیت کلاس ها را تنظیم می کنیم.[/FONT]
[FONT=&amp]پس از بالا شروع می کنیم[/FONT]
ü [FONT=&amp]در پانل [/FONT][FONT=&amp]css styles[/FONT][FONT=&amp] روی کلاس [/FONT][FONT=&amp]top_left-sidebar-box-ads[/FONT][FONT=&amp] دو بار کلیک کنید و در کادر باز شده روی تب [/FONT][FONT=&amp]Background[/FONT][FONT=&amp] کلیک کنید سپس تو بخش [/FONT][FONT=&amp]background-images[/FONT][FONT=&amp] بر روی [/FONT][FONT=&amp]Browse[/FONT][FONT=&amp] کلیک کنید و از پوشه [/FONT][FONT=&amp]img[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]sidebar-ads.jpg[/FONT][FONT=&amp] را انتخاب کنید و سپس تو تب [/FONT][FONT=&amp]Box[/FONT][FONT=&amp] تو قسمت [/FONT][FONT=&amp]Height[/FONT][FONT=&amp] را به [/FONT][FONT=&amp]37px[/FONT][FONT=&amp] تنظیم کنید و [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] کنید. سپس متن داخل ان را پاک کنید[/FONT]
ü [FONT=&amp]برای بخش [/FONT][FONT=&amp]bg_left-sidebar-box-ads[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]sidebar-content.jpg[/FONT][FONT=&amp] را انتخاب کنید و تو قسمت [/FONT][FONT=&amp]Background-repeat[/FONT][FONT=&amp] را روی [/FONT][FONT=&amp]repeat-y[/FONT][FONT=&amp] تنظیم کنید و سپس تو تب [/FONT][FONT=&amp]Box[/FONT][FONT=&amp] و تو قسمت [/FONT][FONT=&amp]padding[/FONT][FONT=&amp] را به [/FONT][FONT=&amp]5px[/FONT][FONT=&amp] ارتقاء دهید و [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] کنید.[/FONT]
ü [FONT=&amp]برای بخش [/FONT][FONT=&amp]botoon_left-sidebar-box-ads[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]right-sidebar-footer.jpg[/FONT][FONT=&amp] را انتخاب کنید و تو تب [/FONT][FONT=&amp]Box[/FONT][FONT=&amp] تو قسمت [/FONT][FONT=&amp]Height[/FONT][FONT=&amp] را به [/FONT][FONT=&amp]29px[/FONT][FONT=&amp] تنظیم کنید و [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] کنید و متن داخل ان را پاک کنید.[/FONT]
ü [FONT=&amp]بقیه کار هم به همین صورت می باشد که کلاس های [/FONT][FONT=&amp]botoon[/FONT][FONT=&amp] و [/FONT][FONT=&amp]bg[/FONT][FONT=&amp] مثل هم هستند یعنی کلاسهای [/FONT][FONT=&amp]bg[/FONT][FONT=&amp] اینها [/FONT][FONT=&amp]padding=5px[/FONT][FONT=&amp] و تصویر زمینه انها [/FONT][FONT=&amp]sidebar-content.jpg[/FONT][FONT=&amp] که به صورت [/FONT][FONT=&amp]repeat=repeat-y[/FONT][FONT=&amp] است و همچنین کلاس های [/FONT][FONT=&amp]botoon[/FONT][FONT=&amp] اینها تصویر زمینه انها [/FONT][FONT=&amp]right-sidebar-footer.jpg[/FONT][FONT=&amp] است و عرض انها که تو تب [/FONT][FONT=&amp]Box[/FONT][FONT=&amp] است [/FONT][FONT=&amp]Height=29px[/FONT][FONT=&amp] است پس شما تمام این کلاس ها را تنظیم کنید و من فقط کلاس های [/FONT][FONT=&amp]top[/FONT][FONT=&amp] را توضیح می دهم.[/FONT]
ü [FONT=&amp]برای کلاس[/FONT] [FONT=&amp]top_left-sidebar-box-last-post[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]last-posts.jpg[/FONT][FONT=&amp] و عرض ان [/FONT][FONT=&amp]35px[/FONT][FONT=&amp] است و نیز متن داخل ان را پاک کنید.[/FONT]
ü [FONT=&amp]برای کلاس [/FONT][FONT=&amp]top_left-sidebar-box-monthly-archive [/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]monthly-archive.jpg[/FONT][FONT=&amp] و عرض ان[/FONT][FONT=&amp]35px [/FONT][FONT=&amp] است و متن داخل ان را پاک کنید.[/FONT]
ü [FONT=&amp]برای کلاس [/FONT][FONT=&amp]top_left-sidebar-box-random-post[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]random-posts.jpg[/FONT][FONT=&amp] و عرض ان [/FONT][FONT=&amp]35px[/FONT][FONT=&amp] است و متن داخل ان را پاک کنید.[/FONT]
ü [FONT=&amp]برای کلاس [/FONT][FONT=&amp]top_left-sidebar-box-statistics[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]statistics.jpg[/FONT][FONT=&amp] را انتخاب و ارتفاع ان را [/FONT][FONT=&amp]35px[/FONT][FONT=&amp] تنظیم کنید و متن داخل ان را پاک کنید.[/FONT]
[FONT=&amp]شکل کلی [/FONT][FONT=&amp]تصویر1-30[/FONT]
72684861473478278878.png
79491717897176575010.png



پایان درس 7
 

پیوست ها

  • 1.png
    1.png
    92.6 کیلوبایت · بازدیدها: 673
  • 2.png
    2.png
    18 کیلوبایت · بازدیدها: 644
  • 3.png
    3.png
    19.5 کیلوبایت · بازدیدها: 645
  • 4.png
    4.png
    17.4 کیلوبایت · بازدیدها: 642
  • header-wp-thems.png
    header-wp-thems.png
    70.9 کیلوبایت · بازدیدها: 602
آخرین ویرایش:

unknown_i3oy

Well-Known Member
عالی میشه ... من یک آموزش انگلیسی واسه این کار دیدم ولی کامل نبود و آخرش هم کاری از پیش نبردم
خوشحال میشم از شما آموزش ببینم . :green:
 

mamad.noise

کاربر فعال انجمن فتوشاپ
والا من که عکسی نمی بینم
اگه شما دیدی بقیه دیدن به ما هم خبر بدن:wink:
 

MohammadGh

Well-Known Member
سلام
اگه بشه تصاویر و ... را در خود پست پیوست کنید بهتره ...
تشکر
 

MohammadGh

Well-Known Member
شما برای پیوست کردن عکس ها و ... در انجمن می تونین از در قسمت انتخاب بیشتر » الحاق پیوست » مدیریت پیوست ها تصاویر و .... در خود انجمن اپلود کنین و .. هرگز پاک نمیشه ...... احتمال داره اون وبساتی که شما تصاویر رو آپ میکنی ، بسته بشه یا ....

تشکر
 

erpol

Member
با سلام
من میخوام یه چند تا عکس توی قالبی که دارم طراحی میکنم بزارم ولی برای جابجا کردنشون و گذاشتنشون جای که دلم میخواد با مشکل برخوردم و بلد نیستم آگه میشه راهنماییم کنید ممنون میشم
باتشکر :rose:
 

websaz2012

Member
دوست عزیز این کار بسیار راحت است شما فقط به عکستون استایل زیر را بدهید
position: absolute;
و سپس میتوانید با خاصیتهای top و left و bottom , right اونو تغییر جهت دهید

یه مثال میزنم فرض کنید من یه تصویر با نام img1 دارم پس اون به صورت ریر مینوسم
HTML:
img {
    position: absolute;
    left: 20px;
    top: 50px;
}
این میگه که تصویر ما از سمت چپ 20 پیکسل به طرف راست رفته و از طرف بالا 50 پیکسل به طرف پاییین
امیدوارم که مشکلتون حل شده باشه
در ضمن باید بگم این یک مثال بود و در عمل شما باید در استایل تصویر مورد نظر را باید تنظیم کنید.
مثلا شما یک تصویر در div id logo دارید پس در استایل مییشه
HTML:
#logo img {
    position: absolute;
    left: 20px;
    top: 50px;
}
از خاصییتهای margin هم میتونی استفاده کنی که شامل
margin left و margin right و margin top و margin bottom است.


البته یه راه خیلی راحت تر است که شما میتوانید تو دریمیور ازش استفاده کنی
اینه که شما یک کلاس با یه اسمی که دوست دارین تعریف میکنید و ویزگی مورد نظر را براش مینویسید سپس بر روی تصویر مورد
نظز کلیک کرده و در پاییین برنامه دریمویور تو قسمت properties گوشه سمت راست یه کادری است به نام class که از تو اون کادر کلاسی را که تعریف کردیین را انتخاب کنید
به همین راحتی


درود

by:oops:
 
آخرین ویرایش:

erpol

Member
:tavajoh::tavajoh::tavajoh::tavajoh::tavajoh::tavajoh::tavajoh::tavajoh::tavajoh::tavajoh:


ببخشید بازهم مزاحم شدم
:nokte::nokte::nokte::nokte: حالا چطوری یک کلاس تعریف کنیم :sad::sad::sad::?::?::?::?:
 

websaz2012

Member
صفحه قبل درس 3 را مطالعه کنید جوابتون را پیدا خواهید کرد

یا این کلاس را وارد صفحه استایلتون کنید و ویزگیهای مورد نظر را بهش بدین

HTML:
.img1 {
}


میتوانید به جای img1 هر اسم دیگر را بزارید
 
آخرین ویرایش:

rambow

New Member
ممنون و خسته نباشي دوست عزيز

اگه پي دي اف لطف كني ممنون ميشم شديييييييييييييييييييد
 

جدیدترین ارسال ها

بالا