آموزش ساخت اسلاید شو
بسم الله الرحمن الرحیم
آموزش ساخت اسلایدر
بخش ششم (آموزش ساخت اسلایدشو)
نمایش لیست آموزش های Bootstrap
آموزش ساخت slide show
در آموزش پیش نحوه ایجاد منو را در بوت استرپ با هم بررسی کردیم. در این بخش از آموزش قصد داریم بخش مربوط به Slide show را طراحی کنیم.
در این بخش بیشتر فعالیت هایی را انجام خواهیم داد که بوت استرپ در آن تاثیر زیادی نخواهد داشت. در این آموزش نحوه طراحی انواع Slide Show ها را برای سایت های مختلف بررسی خواهیم کرد و نحوه ایجاد Slide Show های زیبا را برای سایت های مختلف و موضوعات مختلف خواهیم آموخت.
یکی از بخش هایی که در تمامی سایت های امروزی وجود دارد Slide Show می باشد، طراحی و ساخت اسلایدشوهای حرفه ای کار بسیار پیچیده ای می باشد زیرا شما باید در jQuery تخصص بسیار زیادی داشته باشید که بتوانید اسلاید شوهای جذاب ایجاد کنید.
اما سایت های زیادی وجود دارند که اسلایدر های زیادی را برای دانلود در اختیار شما قرار می دهند. یکی از این سایت ها، سایت http://www.jssor.com می باشد. در این سایت شما می توانید اسلایدر های زیادی را مشاهده کنید و در میان آنها اسلایدر مورد نظر خود را انتخاب و دانلود کنید. اما طبیعتا این اسلایدری که انتخاب می کنید نیاز به تغییرات دارد، در برخی موارد هزینه ی تغییر این اسلایدر ها به قدری زیاد است که شاید شما ترجیح دهید از این اسلایدر ها استفاده نکنید!.
به هر حال دانستن اینکه سایت های زیادی وجود دارند که اسلایدرهای رایگان و زیبایی را در اختیار ما قرار می دهند، خالی از لطف نیست. می توانیم این راه حل را به عنوان یکی از گزینه های ممکن همیشه در ذهن خود داشته باشیم.
ادامه مطلب...
آموزش ساخت اسلاید شو با WowSlider
بسم الله الرحمن الرحیم
کرک کردن WowSlider
طبیعتا در وب سایت های کنونی برای جذابیت بیشتر از اسلایدشوهای متفاوت استفاده می شود، اما طراحی و ایجاد این اسلاید شو کار ساده ای نیست. توسعه دهنده گان که میخواهند به سرعت یک اسلاید شو زیبا انتخاب و در وب سایت خود قرار دهند معمولا با مشکل روبرو می شوند هر چند با جستجو می توان اسلاید شوهای متفاوتی را یافت که البته بعضا رایگان نبوده و یا برای CMS ها طراحی شده اند که تغییر و بدت آوردن آنها زمان بر خواهد بود.
پیشنهاد می کنم برای اینکار از ابزار WowSlide استفاده کنید. این ابزار با در اختیار گذاشتن نمونه های متفاوتی از اسلاید شو ها به شما اجازه می دهد Slideshow مورد نظر خود را با تمامی پاارمترهای مورد نیاز خود طراحی و با یک Wizard ساده ایجاد کنید.
شما می توانید این ابزار را از لینک زیر دانلود کنید
این ابزار رایگان نبوده و در صورتی که هزینه آن را پرداخت نکنید، اگر یک اسلاید شو ایجاد کنید در پایین تمامی تصاویر لولگو مربوط به نرم افزار دیده می شود.
برای مشاهده لطفا یک اسلاید شو با این نرم افزار ایجاد کنید تا مشکل مربوطه مشخص گردد.
می توان به سادگی لوگو نرم افزار را حذف کرد برای اینکار باید ابتدا تصاویر اصلی خود را بر روی تصاویر ایجاد شده Paste کنید زیر را بر روی تصاویر لوگو نرم اضافه شده است.
پس از جایگزین کردن تصاویر اصلی به مسیر engine1 بروید (البته مدتی است که نام فولدرها توسط این نرم افزار تغییر داده می شود اما مشخصا باید شما پس از ایجاد اسلاید شو خود دو فولدر داشته باشید یکی برای تصاویر و دیگری برای فایلها و اسکریپت های jQuery، به هر حال فولدر اسکریپتها را باز کنید) در فولدر مربوطه فایل wowslider.js را در یک Editor باز کنید.
در فایل مربوطه باید به دنبال کد زیر بگردید:
position:”absolute”,right:”2px”, bottom:”2px”,padding:”0 0 0 0″,”z-index”:10
طبیعتا یافتن این خط کد مابین تمامی کدهای نامرتب این فایل کار آسانی نیست و شخصا تجربه کردم که برخی از این پارامترها مانند مقدار z-index در نسخه های مختلف این نرم افزار متفاوت است اما معمولا در تمامی نسخه های فاصله ی لوگو نرم افزار از پایین 2 پیکسل است (bottom:” 2px”) پس بهتر است شما عدد 2px را در فایل مربوطه جستجو کنید و پس از یافتن خط مربوطه کد زیر را به آن اضافه کنید:
{position:”absolute”,right:”2px”, display:”none”,bottom:”2px”,padding:”0 0 0 0″,”z-index”:10
لطفا کد "display:"none دقیقا به همین صورت قرار دهید.
البته می توانید از این وب سایت نیز برای یافتن اسلایدشو ها استفاده کنید
http://designscrazed.net/free-responsive-jquery-image-sliders/
چطور می توان یک استایل CSS اختصاصی برای IE نوشت
بسم الله الرحمن الرحیم
حتما شما نیز با کاربرانی که به دلیل آشنا نبودن به مرورگرهای دیگر، از مرورگر قدرتمند IE استفاده می کنند در وب سایت داشته، دارید و خواهید داشت!
خوب به دلیل مشکل کاربران در عدم استفاده از ابزار بهتر شما مجبور هستید که سایت خود را به نحوی برای کاربرانتان تغییر دهید که بتوانند آن را به خوبی مشاهده کنند:
لطفا مقاله "طراحی وب سایت برای مرورگرهای مختلف" را مطالعه کنید.
چطور می توان یک استایل CSS اختصاصی برای IE نوشت؟ Cross-Browser
برای این کار می توانید از روشهای زیر استفاده کنید:
در روش اول کافی است درون تگ head مانند تمامی link هایی که قرار می دهید تگ مربوط به لود کردن استایل IE را نیز قرار دهید اما با چند ویژگی، که می توانید تعیین کنید این استایل برای چه نسخه ای از مرورگر IE است.
شما می توانید با دستور IF تعیین کنید که این استایل فقط برای مرورگرهای IE مورد استفاده قرار گیرد
در دستور IF می توانید از شرطهای منطقی استفاده کنید:
- ! به معنی not است. مثال !IE یعنی برای IE استفاده نشود.
- gt به معنی greater than (بزرگتر از)
- gte به معنی greater than or equal (بزرگتر مساوی)
- lt به معنی less than (کوچکتر از)
- lte به معنی less than or equal (کوچکتر مساوی)
وب فونت
بسم الله الرحمن الرحیم
شاید بیشتر شما دوستان عزیز با وب فونت آشنایی داشته باشید، وب فونت درواقع یک روش برای نشان دادن متن های یک وب سایت با قونت های اختصاصی و مورد نظر شما است
همانظور که شما می توانید در نوشتن متن های خود در برنامه Word از فونت های متفاوت استفاده کنید این امکان در وب نیز وجود دارد
گوگل نیز فونت های زیبایی را برای شما البته و طبیعتا فونت های انگلیسی را برای شما طراحی کرده است که متاسفانه منظور از شما در این متن کشور ایران نیست و برای استفاده از این ویژگی به دلیل تحریم بودن باید از نرم افزاری برای تغییر آی پی استفاده کنید
آدرس بخش وب فونت گوگل
گوگل نیز آموزش استفاده از هر فونت را برای شما قرارداده است که اینکار بسیار ساده خواهد بود.
ممکن است شما بخواهید یک فونت که در سیستم خود دارید را در وب استفاده کنید و باید این نکته را مد نظر قرار دهید که وب فونت با فونت های عادی که پسوند ttf دارتد متفاوت است برای تبدیل فونت ttf به فونت وب می توانید از وب سایت های زیر استفاده کنید
http://www.fontsquirrel.com/tools/webfont-generator
برای استفاده از فونت های تولید شده می توایند به صورت زیر عمل کنید
ابتدا فونت را در مسیری مشخص قرار دهید و با دستور CSS زیر فونت ها را به وب سایت خود معرفی کنید
@font-face{
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}
در خط دوم اسم فونت خود را MyWebFont قرار داده ایم حال مانند تمامی فونت های دیگر این فونت را به المان مورد نظر خود انتساب می دهیم
p { font-family: 'MyWebFont', Arial, sans-serif; }
آموزش طراحی قالب Responsive
بسم الله الرحمن الرحیم
آموزش طراحی قالب Responsive
در این بخش قصد دارم به صورت مختصر آموزش ساخت یک قالب Responsive را آموزش دهم. بدون هیچ بحث اضافی سراغ مباحث مربوطه می رویم:
برای نمایش عناصر صفحه در مقایس های مختلف مثل کامپیوتر ها یا تبلت و در نهایت موبایل به نحوی که بتوان اطلاعات را به صورت صحیح نمایش داد نیاز است شما در مورد هر مقایس تصمیمی اخذ نمایید برای این فرایند کافی است از دستور media@ استفاده نمایید. ساختار این دستور بسیار ساده می باشد. در دستور زیر ما مشخص کردیم که اگر خروجی ما صفحه نمایش بود و سایز ما حداقل 1200 پیکسل بود تغییرات مورد نظر صورت گیرد. این کار را به صورت های زیر می توان انجام داد:
درون یک فایل StyleSheet
@media screen and (min-width : 1200px) {
/* let's do somethin' */
}
لینک دادن به یک StyleSheet
<link rel="stylesheet" media="screen and (min-width: 1200px)" href="small.css" />
در روش بالا اگر سایز ما حداقل 1200 پیکسل بود فایل مشخص شده به صفحه ما اضافه می گردد.
لینک دادن به یک فایل StyleSheet (در صورت موبایل بودن دستگاه یا هر دستگاهی با نهایت وضوح 480 پیکسل)
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" />
لینک دادن به یک فایل StyleSheet درون دستورات CSS
@import url( small.css ) screen and ( min-width: 1200px );
استفاده از عملگرهای منطقی
AND
@media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}OR
@media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}NOT
@media not all and (max-width: 600px) {
html { background: red; }
}Exclusive
@media (max-width: 400px) {
html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
@media (min-width: 801px) {
html { background: blue; }
}Overriding
@media (min-width: 400px) {
html { background: red; }
}
@media (min-width: 600px) {
html { background: green; }
}
@media (min-width: 800px) {
html { background: blue; }
}در نهایت یک مثال کامل
@media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}مرورگرهایی که دستورات media@ را پشتیبانی می کنند:
- Firefox 3.5+
- Opera 9.5+
- Safari 3+
- Chrome
- Internet Explorer 9+