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

mamad.noise

mamad.noise

کاربر فعال انجمن فتوشاپ
سلام
شما یه شروع دوباره رو انجام بده ما همگی پشتت هستیم !
موفق باشیـــــــــــــ:rose:
 
sarabb

sarabb

New Member
آقا محسن( websaz2012 ) ما منتظر بقیه درس هستیم.
:rose: ایشاله که موفق باشی. :rose:
 
websaz2012

websaz2012

Member
[FONT=&amp]
[/FONT]​
ستون های کناری[FONT=&amp](sidebar)[/FONT][FONT=&amp]بخش دوم [/FONT]


​
[FONT=&amp]خوب حالا نوبت[/FONT][FONT=&amp]sidebar-right[/FONT][FONT=&amp]است تا محتویاتش را[/FONT][FONT=&amp]ما طراحی کنیم .[/FONT]
[FONT=&amp]متن داخل [/FONT][FONT=&amp]sidebar-right[/FONT][FONT=&amp] را پاک کنید و یک کلاس به نام [/FONT][FONT=&amp]right-sidebar-box-ads[/FONT][FONT=&amp] وارد کنید من کد کامل را می دهم شما اون را وارد کنید و مراحل دقیقا مانند مراحل قبل است پس این کدها رو وارد [/FONT][FONT=&amp]sidebar-right[/FONT][FONT=&amp] کنید! [/FONT]


[HTMLS]<!-- right-sidebar-box-ads -->
<div class="right-sidebar-box-ads">
<div class="top_right-sidebar-box-ads"></div>
<div class="bg_right-sidebar-box-ads">text</div>
<div class="botoon_right-sidebar-box-ads"></div>
</div>

<!-- right-sidebar-box-category -->
<div class="right-sidebar-box-category">
<div class="top_right-sidebar-box-category"></div>
<div class="bg_right-sidebar-box-category">text</div>
<div class="botoon_right-sidebar-box-category"></div>
</div>

<!-- right-sidebar-box-friends -->
<div class="right-sidebar-box-friends">
<div class="top_right-sidebar-box-friends"></div>
<div class="bg_right-sidebar-box-friends">text</div>
<div class="botoon_right-sidebar-box-friends"></div>
</div>
[/HTMLS]


[FONT=&quot]این کدها را هم توی [/FONT][FONT=&quot]style.css[/FONT][FONT=&quot] وارد کنید![/FONT]


[CSSS] .right-sidebar-box-ads { }
.top_right-sidebar-box-ads {
background-image: url(img/sidebar-ads.jpg);
background-repeat: no-repeat;
height: 37px;
}
.bg_right-sidebar-box-ads {
background-image: url(img/sidebar-content.jpg);
background-repeat: repeat-y;
padding: 10px;
}
.botoon_right-sidebar-box-ads {
background-image: url(img/right-sidebar-footer.jpg); background-repeat: no-repeat;
height: 29px;
}

.top_right-sidebar-box-category { }
.top_right-sidebar-box-category {
background-image: url(img/category.jpg);
background-repeat: no-repeat;
height: 38px;
}
.bg_right-sidebar-box-category {
background-image: url(img/sidebar-content.jpg); background-repeat: repeat-y;
padding: 10px;
}
.botoon_right-sidebar-box-category {
background-image: url(img/right-sidebar-footer.jpg); background-repeat: no-repeat;
height: 29px;
}



.right-sidebar-box-friends { }
.top_right-sidebar-box-friends {
background-image: url(img/sidebar-links.jpg);
background-repeat: no-repeat;
height: 35px;
}
.bg_right-sidebar-box-friends {
background-image: url(img/sidebar-content.jpg);
background-repeat: repeat-y;
padding: 10px;
}
.botoon_right-sidebar-box-friends {
background-image: url(img/right-sidebar-footer.jpg); background-repeat: no-repeat;
height: 29px;
}
[/CSSS]



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





1.jpg
 
آخرین ویرایش:
websaz2012

websaz2012

Member
درس 8 اسلایدر بخش اول html

[FONT=&quot]خوب دیگه الان وارد بخش تخصصی تر می شویم[/FONT]
[FONT=&quot]ما میخواهیم یک اسلایدر طراحی کنیم که بتونه تصاویر جدیدترین موبایلها رو نشون بده![/FONT]
[FONT=&quot]اول از همه می خوام اسلایدرو واسه شما تعریف کنم راسیتش تعریف علمیشو نمیدونم ولی من این جوری تعریفش می کنم که اسلایدر می تونه یک بخشی از سایت باشه که با ایفکتهای جذاب تصاویر یا پستهای سایتمونو نشون بده![/FONT]
[FONT=&quot]حالا چجوری میتوان یک اسلایدر طراحی کرد واسه طراحی اسلایدرها اصولا ما از یک فایل جاوااسکریپت استفاده میکنیم که میتوان نمونه های زیادی را در اینترنت یافت کرد اما دوستان شاید بخوان بدونن که بهترینشون کدومه من چندتاشونو که خیلی معروف هستند را بیان میکنم حالا هرکدومو خواستن استفاده کنن![/FONT]
[FONT=&quot]البته هرکدام کارایشون با هم فرق داره ایفکتهای هر کدام متفاوت است![/FONT]
· [FONT=&quot]Easyslider[/FONT]
· [FONT=&quot]Jcarousellite[/FONT]
· [FONT=&quot]Simple slider[/FONT]
· [FONT=&quot]skitter slider[/FONT]
· [FONT=&quot]wow slider[/FONT]
· [FONT=&quot]simpleSpy[/FONT][FONT=&quot] [/FONT][FONT=&quot][/FONT]
· [FONT=&quot]carouFredSel[/FONT]
· [FONT=&quot]img scrool[/FONT]
· [FONT=&quot]اینهامعروفترینها بودند که مخصوصا تو ایران خیلی طرفدار پیدا کرده اند البته من به شما دو تاشونو پیشنهاد می کنم اول [/FONT][FONT=&quot]Jcarousellite[/FONT][FONT=&quot] دوم [/FONT][FONT=&quot]Easyslider[/FONT]
[FONT=&quot]که من از [/FONT][FONT=&quot]Jcarousellite[/FONT][FONT=&quot] اینجا استفاده کردم اسکریپت واقعا جالب و خوبیه طرز استفاده اش هم خیلی راحته توی ادامه درس بیان می شود ![/FONT]
[FONT=&quot]حالا برویم سر اصل مطلب[/FONT]
[FONT=&quot]متن داخل [/FONT][FONT=&quot]maincont[/FONT][FONT=&quot] را پاک کنید و یک کلاس به نام [/FONT][FONT=&quot]wrap-mobile-post[/FONT][FONT=&quot] را وارد این دیو کنید و استایل ان را بصورت ذکر شده معین کنید

[/FONT][CSSS].wrap-mobile-post { position: relative; direction: ltr; }[/CSSS]
[FONT=&quot]
[/FONT]شاید بپرسید که چرا من خاصیت relative و ltr برای ان معین کردم؟؟؟
پس بزارین من جواب این مسئله را بصورت یک نکته و یک طنز بیان کنم!
نکته!
هرگاه ما به یک تگ که میتونه هر تگی باشه و من اینجا برای div بیان میکنم پس میگم هرگاه ما به یک div خاصیت absolute بدهیم که ماشالله خیلی هم طرفدار داره مشاهده میکنیم که اون دیو از مرز مادر خود که مثلا یک div دیگه است خارج می شود پس برای حل این مشکل ما باید به مادر اون تگ خاصیت relative بدهیم تا اجازه نده فرزندش بره بیرون تو کوچه فوتبال بازی کنه!
پس ما میخواهیم برای این کلاس wrap-mobile-post
یک فرزند بعدا بدهیم که خاصیت position: absolute داشته باشد.
خوب این جواب سوال اول الان میپردازیم به جواب سوال دوم که اون هم این است که بیشتر sliderها تا بخواهند کار کنند باید مادرشون خاصیت ltr داشته باشد میتوانید امتحان کنید که اگه ما به اون این خاصیت را ندهیم چون تگ body ما بصورت rtl است اسلاید ما درست کار نخواهد کرد حالا شاید بخواهین بگین شاید ما بخواهیم تو اسلایدرمون متن فارسی داشته باشیم که باید بصورت rtl نمایش داده بشود خوب این که کاری نداره متنتون را داخل یک تگ با خاصیت rtl بنویسید همین.
خوب بریم سر ادامه درس متن داخل wrap-mobile-post را پاک کرده و یک کلاس به نام top-wrap-mobile-post وارد کنید و استایل ان را بصورت زیر تنظیم کنید.


[CSSS].top-wrap-mobile-post { background-image: url(img/links-top.jpg); background-repeat: no-repeat; height: 39px; }[/CSSS]

حالا یک کلاس بعد ازtop-wrap-mobile-post به نام bg-wrap-mobile-post وارد wrap-mobile-post کنید این هم استایلش!

[CSSS].bg-wrap-mobile-post { background-color: #F8F7F3; margin: 0px auto; width: 520px; height: 200px; }[/CSSS]

خوب تا اینجا ما فقط کلاسهایی واسه زیبایی اسلایدر طراحی کردیم الان میخواهیم کلاسی که خود اسلایدر است را طراحی کنیم پس یک کلاس به نام .slider وارد bg-wrap-mobile-post می کنیم خوب این هم استایلش

[CSSS].slider { margin: 0px auto; padding-top: 20px; }[/CSSS]


خوب قراره تو این کلاس تصاویرمون به نمایش در بیاد
حالا تو حالت Desing دریمویور باشید همچنین دریمویور را برای راحتی کار به حالت classic در بیاورید.
خوب متن داخل slider را پاک کرده واز پانل بالا از قسمت text ایکونی که شبیه حرف انگلیسی ul است را کلیک کنید و عدد 1 را تایپ کنید سپس اینتر را بزنید و عدد 2 را تایپ کنید و باز اینتر عدد 3 اینتر عدد 4 خوب حالا اگه به حالت code بروید می بینید که دریمویور بصورت اتوماتیک یک لیست نا مرتب برای شما نوشته است که برای راحتی شما من کد را مینوسم تا شما دچار مشکل نشوید.

[HTMLS]<div class="slider">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>[/HTMLS]

خوب مرحله بعد ما اعداد را پاک کرده و به جاش تصویر قرار می دهیم عدد 1 را پاک کنید و از insert > image تصویر یک موبایل به اندازه 75.100 از درون پوشه
Img انتخاب کنید و این مراحل را برای اعداد دیگر نیز انجام دهید.
کدها به این صورت باشد


[HTMLS]<div class="slider">
<ul>
<li> <img src="img/ViewSonic-VPC08-01-END.jpg" width="75" height="100" /> </li>
<li> <img src="img/ViewSonic-VPC08-01-END.jpg" width="75" height="100" /> </li>
<li> <img src="img/ViewSonic-VPC08-01-END.jpg" width="75" height="100" /> </li>
<li> <img src="img/ViewSonic-VPC08-01-END.jpg" width="75" height="100" /> </li>
</ul>
</div>
[/HTMLS]


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

[HTMLS]<div class="slider">
<ul>
<li>
<div class="img"><img src="img/ViewSonic-VPC08-01-END.jpg" width="75" height="100" /></div>
</li>
<li>
<div class="img"><img src="img/ViewSonic-VPC08-01-END.jpg" width="75" height="100" /></div>
</li>
<li>
<div class="img"><img src="img/ViewSonic-VPC08-01-END.jpg" width="75" height="100" /></div>
</li>
<li>
<div class="img"><img src="img/ViewSonic-VPC08-01-END.jpg" width="75" height="100" /></div>
</li>
</ul>
</div>[/HTMLS]


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

[HTMLS]
<span>
<h3><a href="#">post title</a></h3>
<h4>category</h4>
</span>
[/HTMLS]

این کد را بعد از کلاس img برای هر چهارتا قرار بدهید. کد پایانی تا این قسمت
[HTMLS]بصورت زیر خواهد بود ...


[HTMLS]<div class="slider">
<ul>
<li>
<div class="img"><img src="img/ViewSonic-VPC08-01-END.jpg" width="75" height="100" /></div>
<span>
<h3><a href="#">post title</a></h3>
<h4>category</h4>
</span>
</li>
<li>
<div class="img"><img src="img/ViewSonic-VPC08-01-END.jpg" width="75" height="100" /></div>
<span>
<h3><a href="#">post title</a></h3>
<h4>category</h4>
</span>
</li>
<li>
<div class="img"><img src="img/ViewSonic-VPC08-01-END.jpg" width="75" height="100" /></div>
<span>
<h3><a href="#">post title</a></h3>
<h4>category</h4>
</span>
</li>
<li>
<div class="img"><img src="img/ViewSonic-VPC08-01-END.jpg" width="75" height="100" /></div>
<span>
<h3><a href="#">post title</a></h3>
<h4>category</h4>
</span>
</li>
</ul>
</div>











[/HTMLS]



خوب الان نوبت استایل ها است من کدها را می دهم شما ان را وارد کنید


[CSSS].slider li { display: block; height: 150px; width: 75px; padding: 5px; float: left; margin: 0px 10px 0px 0px; background-color: #FFF; border: 1px solid #CCC; direction: rtl; text-align: center; }
.slider li:hover { background-color: #E8E4D7; }
.img, .img img { height: 100px; width: 75px; }

[/CSSS]


تصویر نهایی تا این مرحله!!!


2.jpg



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

websaz2012

Member
درس 8 بخش دوم (جاوا اسکریپت)
خوب اول از همه باید بگم که هر اسکریپت یا فایل جاوا بخواهد تو صفحه فعال یا کار کند قبلش احتیاج به فایل کامل جیکوثری را دارد این فایل را میتوان از سایت جیکوثری اخرین ورزنش را دانلود کرد در غیر اینصورت هیچ اسکریپتی بدون این فایل عمل نخواهد کرد

http://jquery.com/


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

[HTMLS]<link href="style.css" rel="stylesheet" type="text/css" />[/HTMLS]

قرار دهید اینطوری

[HTMLS]<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>[/HTMLS]


همانطور که میبینید من از ورزن 1.8.2 استفاده کردم.
مرحله دوم
الان باید اسکریپت jcarousellite را دانلود کنید و ان را توی پوشه js کپی کرده و به صفحه لینک کنید.این اسکریپت را میتوانید از ادرس زیر دانلود کنید

http://gmarwaha.com/jquery/jcarousellite/


خوب ما دو فایل را به صفحه لینک کردیم اما اسلایدر ما هنوز کار نمی کند جوابش اینه که ما هنوز به اسکریپت jcarousellite نفهموندیم تا کدوم کلاس را برای ما اسلاید کند برای این کار یک فایل جاوا کوچک نیاز داریم
تا اسلایدر ما شروع به کار کند پس یک فایل جاوا با دریمویور ایجاد کرده وان را با نام custom.js درون پوشه js ذخیره کنید و به صفحه لینک کنید و کد زیر را درونش paste کنید .



[JSS]$(document).ready(function(){

$(".slider").jCarouselLite({
btnNext: "#next",
btnPrev: "#prev",
auto: 5000,
speed : 400,
scroll: 1,
visible: 4
});

});//end call
[/JSS]


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

[JSS]
btnNext :"#next"[/JSS]

ما توی این قسمت برای دکمه بعدی یک ایدی به نام next تعریف کرده ایم البته میتواند بصورت کلاس هم باشد


[JSS]btnPrev: "#prev"[/JSS]

ایدی دکمه برگشت

[JSS]auto: 5000[/JSS]

این قسمت دو حالت را میپذیرد
1.عبارت true که بااین عبارت اسایدردر صفحه بدون هیچ مکثی نمایش داده می شود
2.عدد که باتایپ عدد میتوان یک زمان وقفه برای اسلایدر تعیین کرد یعنی چند ثانیه یک تصویررا نشان خواهد داد سپس سراغ تصویر بعدی می رود.


[JSS]speed : 400[/JSS]

سرعت رد کردن تصاویر که با عدد دادن قابل تنظیم است

[JSS]scroll: 1[/JSS]


دراین قسمت ما می توانیم تعیین کنیم که اسلایدر ما چند تا تصویر را رد کند چون من 1 دادم پس یکی یکی رد میکنه اگه 2 بدم دوتا دوتا رد می کنه و الی اخر


[JSS]visible: 4[/JSS]

تو این قسمت ما تعیین می کنیم که اسلایدر ما چند تا تصویر نشون بده من 4 زدم پس 4تا تصویر نشون می دهد.



توجه!!!!
من عبارت تصویر را برای شما ذکر کردم تا در فهم شما کمک کند اما این در حالیست که اسکریپت ما نه با تصویر کاری دارد و نه با متن ما اون فقط با
Li هایی که توی اسلایدر است عکس العمل نشون میدهد که این li ما اندازه تصویرمون است به همین جهت این توجه را ذکر کردم تا توی کارهای دیگه دچار سوتفاهم نشوید .
خوب همه را ذخیره کنید و توی مرورگر صفحه را مشاهده کنید و لذت ببرید که شما الان توانستید یک اسلایدر طراحی کنید اما به نظر شما یک چیز کم نیست؟ درسته دکمه های عقب و جلو
که با اونها میتوان به عقب و جلو رفت.کد زیر را بعد از کلاس slider کپی کنید


[HTMLS]<a id="next"></a>
<a id="prev"></a>
[/HTMLS]

کد زیر هم استایلشون است


[CSSS]#next,#prev { position: absolute; top: 100px; }
a#next,a#prev { height: 46px; width: 46px; display: block; cursor: pointer; }
a#next { background-image: url(img/next.jpg); background-repeat: no-repeat; right: 20px; }
a#prev { background-image: url(img/previous.jpg); background-repeat: no-repeat; left: 20px; }[/CSSS]


نتیجه نهایی توی مرورگر

3.jpg

حالشو ببرین درس بعدی راجع به پست ها خواهد بود.
 
websaz2012

websaz2012

Member
دوستان دراینده وقتی پوسته کامل بشه یک بخشی به نام css3 خواهیم اشت که برای زیبایی پوسته ما اهمیت زیادی خواهد داشت که در این قسمت من مهمترین ویزگی های css3 رابیان خواهم کرد اما میخوام قسمتی به نام meia query را نیزبرای سایتمون استفاده کنم اما قبلش میخوام با شما مشورت کنم چون میخواتم تو کتابم بنویسم .دوس دارین یا نه؟؟؟

media querry
یه بخشی از css3 است که در ان ما عرض صفحمون را برای دستگاه های تبلت و موبایل بهینه سازی می کنیم جوری که در این دست گاه ها اسکرول افقی نندازه

قبلا ازاین قابلیت به شکل دیگری استفاده میشد مثلا وقتی یک استایل را لینک میکردند در اخر ان این عبارت تایپ میشد media:handle
انتخاب با شماست
 
sarabb

sarabb

New Member
خب احتمالن با بیان meia query درس کاملتر خواهد شد احیانا .
:rose:من که نظرم اینه که زحمت بکشید و بگیدش. :rose:
 
F

face_sade

New Member
سلام دوست عزيز
در چند درس اول خوب پيش رفتي ولي الان همش شده كپي پيس اينطوري آدمهايي مثل من كه تازه كارن گيج ميشن
تا كي بايد كد كپي كنيم ؟؟؟؟؟؟؟؟؟؟؟؟؟؟
تا كي بايد فقط تقليد كنيم ؟؟؟؟؟؟؟؟؟؟؟؟؟؟
ريشه رو ياد بده اصول و پايه رو ياد بده بقيشو بسپور به خودمودن
آخه اگه از اين تم خارج شيم ديگه ماها نميتونيم طراحي كنيم چون عادت به كپي كردن كد كرديم
من يه طراحه فتوشاپم و دوست دارم تم خودمو طراحي كنم
دوس دارم فرم خودمو به سايت بدم

مرسي از شما كه وقت خودتو صرف آموزش دادن ميكنيد
فقط خسته نشينو تا آخر با همون انرژي اول باشين
بازم مرسي
:rose:
 
L

l3aran

New Member
سلام
خسته نباشی
میخوام آموزش طراحی ووردپرس رو یاد بگیرم هیچیم بلد نیستم :دی
الان فکر کنم توضیحاتت کامله اما درس اولت ک واسه شروعه عکساش لود نمیشه اما در کل فکر کنم کامله :دی اما زیاده اما شروع میکنم :دی
اون عکسا رو درت کن من 5 ساعت سعی نکنم :دی
دمت گررم :دی
 
jafar1374

jafar1374

Active Member
سلام
اولا بابت این آموزش واقعا پیشرفته از شما ممنون websaz2012 :rose:

بعد یه مشکل دارم وقتی سایدبار رو دو بار تکرار می کنم سایدبار از بالا فاصله زیادی می گیره (البته وقتی هم که یه دونس باز همین فاصله رو داره) - عکسش رو ببنید بی زحمت

با دریم ویور cs6

[URL=http://upload.tehran98.com/] [/URL]
 
tarenoco

tarenoco

Member
سلام
من همه این کاراو انجام میدم همه چی تو برنامه عالیه ولی وقتی میاد بالا میریزه بهم
 
W

webdesigner_pro

Banned
شرکت طراحی سایت وبدار مجری پروژه های طراحی سایت های شخصی، شرکتی و پرتال های سازانی و دولتی. همچنین خدمات طراحی سایت ریسپانسیو(واکنش گرا)، طراحی PSD به HTML و طراحی پی اس دی و تبدیل قالب خام به قالب وردپرس و پشتیبانی سایت و بروزرسانی سایت های شما رو هم انجام می دهیم. لطفا سر بزنید به سایت از نمونه کارها دیدن کنید. قیمت های کاری ما هم نسبت به جاهای دیگر بسیار پایینتره.

برای استعلام قیمت طراحی سایت هم از این آدرس می تونید اقدام کنید:
http://webdar.ir/استعلام-قیمت-طراحی-سایت/

برای اطلاعات بیشتر هم می تونید با شماره 09357705065 (مجتبی عشقی) تماس بگیرید.

webdar.ir
 
tarenoco

tarenoco

Member
سلام خیلی ممنون بابت آموزشهاتون
سوالی که من دارم چرا وقتی سایت رو تو برنامه تعریف می کنیم هر از گاهی بالا یه نوار میاد که میگه سایت رو تعریف کن ؟
ایراد من از کجاست ؟
 
mohammad_r03

mohammad_r03

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

آخرین مطالب مجیدآنلاین

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

بالا