آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100
آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100آموزش طراحی سایت-media object در بوت استرپ 4
آموزش Media Object ها در بوت استرپ 4
بوت استرپ 4، راه حل ساده ای برای چینش Media Object یا فایل های رسانه ای مثل عکس یا ویدیو درون سایر محتواها را فراهم کرده است. از فایل های رسانه ای معمولا در بخش نظرات بلاگ ها، پست های شبکه های اجتماعی و ... استفاده می شود.
شکل زیر، یک مکالمه ساده بین دو کاربر در یک انجمن را با استفاده از کلاس های جدید بوت استرپ 4، در قالبی زیبا نمایش داده است :
آموزش ایجاد فایل رسانه ساده Basic Media Object
شکل زیر، نحوه قرار دادن یک عکس را درون سایر محتویات صفحه متوسط کلاس های جدید بوت استرپ 4 نشان داده است :
برای ایجاد یک شی رسانه ای (Media Object)، کلاس media را به عنصر دربرگیرنده یا Container اضافه کرده و فایل رسانه (عکس یا ویدیو) را درون عنصر فرزند آن که دارای کلاس media-body است، قرار دهید. به میزان مورد نظر حاشیه درونی (padding) و مارجین (margin) تعیین کرده و برای این کار از کلاس های کاربری ویژه بوت استرپ 4 (utility Classes) استفاده کنید، همانند کد مثال عملی زیر :
مثال 1 :
آموزش ایجاد فایل رسانه ای تو در تو Nested Media Object در Bootstrap 4 در آموزش طراحی سایت
یک فایل رسانه ای را می توانید درون یک فایل رسانه ای دیگر قرار دهید، همانند تصویر زیر :
برای تو در تو کردن فایل رسانه ای و قرار دادن یک Media Object درون یک شی دیگر (Nested)، فایل لازم را درون عنصر دربرگیرنده فایل اول که دارای کلاس media-body است، قرار دهید. همانند کد مثال عملی زیر :
مثال 2 :
آموزش راست چین کردن فایل رسانه ای در بوت استرپ 4
می توانید فایل رسانه ای (عکس یا ویدیو) را در سمت راست محتویات قرار دهید، همانند تصویر زیر :
مثال 3 :
آموزش ترازبندی بالا، پایین یا وسط فایل رسانه در Bootstrap 4
از کلاس های کاربردی Flex Utility مخصوص بوت استرپ 4، برای تنظیم قرارگیری عمودی فایل رسانه ای استفاده کنید. برای این منظور، کلاس align-self-* را به تگ یا تگ فایل رسانه ای داده که در آن * یکی از 3 مقدار (start) بالا، وسط (center) و پایین (end) را دریافت می کند.
همانند کد مثال عملی زیر :
مثال 4 :
با دیگر پست های ما در زمینه آموزش طراحی سایت همراه باشید .....
آموزش طراحی سایت-آموزش Text در CSS
سلام بر دوستان عزیزم..
امروز با مقاله دیگری از سری مقالات آموزش طراحی سایت همراه شما هستیم. در این مقاله به بررسی محتوا متنی و چگونگی استایل دهی به آن در CSS3 می پردازیم.
پیش از هر چیزی باید به این نکته اشاره کرد که CSS3 دربردارنده ی چندین خاصیت جدید در زمینه ی text می باشد. در این فصل از سری مقاله های آموزشی CSS3 با خاصیت های جدید متن آشنا می شوید که از جمله آنها می توان به text-overflow, word-wrap, word-break اشاره کرد.
خاصیت / Property text-overflow در CSS3 (خارج شدن متن از کادر)
خاصیت text-overflow تعیین می کند چگونه محتوای سرریز شده (overflowed یا از کادر خارج گشته) برای کاربر قابل دسترسی باشد و نمایش داده شود. ممکن است نوشته برش داده شود (clip), مرورگر متن را به اندازه ای که می تواند نمایش داده و ادامه آن را بریده و نمایش ندهد :
و یا به جای متنی که قادر به نمایش آن نیست نقطه چین بگذارد (حالت ellipsis) - (مرورگر متن را به اندازه ای که می تواند نمایش داده و ادامه آن را به صورت نقطه چین... نشان می دهد) :
کد CSS آن به ترتیب زیر می باشد :
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
مثال زیر به شما نشان می دهد چگونه می توانید محتوای سرریز شده (overflowed content) را هنگامی که مکان نمای موس روی آن قرار می گیرد, نمایش دهید :
div.test:hover {
text-overflow: inherit;
overflow: visible;
}
خاصیت word-wrap در CSS3
خاصیت word-wrap در CSS3 به شما امکان می دهد کلمات و نوشته های طولانی را شکسته و آن را داخل خط بعدی قرار دهید (باعث می شود در صورتی که یک کلمه طولانی بود و به انتهای یک خط رسید، به دو قسمت تبدیل شده و قسمت دوم آن به سطر بعدی نوشته انتقال داده شود). به صورت پیش فرض (بدون استفاده از این خاصیت), کلمه ی بسیار طولانی که داخل کادر محتوا جای نمی گیرد, صرفاً از کادر سرریز شده و از آن خارج می گردد :
خاصیت word-wrap باعث می شود کلمه ی بسیار طولانی داخل سطر بعدی جای داده شود, حتی در صورت لزوم کلمه از وسط شکسته شده و نصف آن در خط بعدی قرار داده شود :
کد CSS آن به شرح زیر می باشد :
p {
word-wrap: break-word;
}
خاصیت word-break
خاصیت word-break در CSS3 باعث می شود در صورتی که یک کلمه طولانی به انتهای سطر رسید، مرورگر آن را به دو قسمت تقسیم کرده (شکسته) و ادامه ی آن را به سطر بعدی متن انتقال دهد.
کد CSS آن به ترتیب زیر می باشد :
p.test1 {
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}
خصوصیت های / Properties مربوط به متن و نوشته در CSS3
- text-align-last :
نحوه ی ترازبندی آخرین خط یک نوشته را تنظیم می کند.
- text-emphasis :
یک خاصیت مختصر نویسی (Shorthand property) است که خصوصیت های text-emphasis-color و text-emphasis-style را در یک تعریف واحد (declaration) مقداردهی می کند.
- text-justify :
برای تعیین نحوه چیدمان نوشته هنگامی که مقدار خاصیت text-align آن بر روی مقدار justify تنظیم شده است، استفاده می شود. مقدار justifyمتن را از هر دو طرف چپ و راست تراز بندی می کند.
- text-overflow :
تعیین می کند چگونه متنی که از کادر محتوا و محدوده ی مشخص شده ی آن خارج گشته به کاربر نشان داده شود.
- word-break :
قوانین مربوط به شکستن خط را برای اسکریپت هایی که غیر از کاراکترهای چینی, ژاپنی و کره ای (non-CJK scripts) هستند, تعیین می کند.
- word-wrap :
کلماتی که طولانی هستند را نصف کرده یا شکانده و بقیه ی آن را در سطر بعدی به نمایش می دهد.
با دیگر مقاله های از آموزش طراحی سایت همراه ما باشید...
آموزش طراحی سایت-آموزش افزونه اسلایدر در جی کوئری
سلام بر دوستان عزیزم..
امروز با یک مقاله دیگه از سری مقاله های آموزش طراحی سایت همراه شما هستیم. مقاله امروز برای دوستانی کاربردیست که با جی کوئری آشنایی داشته باشند؛ چون قرار همراه با هم یکی از افزونه های (پلاگین های) جی کوئری تحت عنوان SlideBars رو یاد گرفته و بکار بگیریم..
افزونه Slidebars در jQuery برای اجرای سریع و سبک منوها و نوارهای باریک افقی و عمودی در وب سایت مورد استفاده قرار می گیرد. Slidebars 2 دارای ویژگی های هیجان انگیز و پرکاربردی است.
برای استفاده از این افزونه لازم است پیش از هر کاری فایل های css و js مورد نیاز را به پروژه اضافه کنیم :
< link href="css/slidebars.css" rel="stylesheet" >
< script src="js/jquery.js" >< /script >
< script src="js/slidebars.js" >< /script >
در بخش body در صفحه Html، صفحه را به دو بخش محتوا اصلی و منو تقسیم می کنیم و محتوا دلخواه را در آنها قرار می دهیم :
< div canvas="container" >
< h1 >welcome to my website< /h1 >
< p > introduction of slidebars.js< /p >
< p >
< button class="js-open-left-slidebar" >open left< /button >
< button class="js-close-left-slidebar" >CLOSE left< /button >
< button class="js-toggle-left-slidebar" >toggle left< /button >
< /p >
< /div >
< div off-canvas="slidebar-1 left shift" >
< p >menu left< /p >
< /div >
جهت و مدل باز و بسته شدن منو، با استفاده از پارامتر off-canvas مشخص می شود. قطعه کد جی کوئری را برای فراخوانی افزونه اسلایدر در جی کوئری، بصورت زیر می نویسیم :
$ (document).ready(function(){
var controller = new slidebars();
controller.init();
بعد از ایجاد یک نمونه جدید از شی، برای رویداد کلیک روی دکمه منو، متد باز کردن منو را اجرا می کنیم :
$ ('.js-open-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.open('slidebar-1');
})
با کلیک روی دکمه دارای کلاس مشخص، متد بستن منو را فراخوانی می کنیم :
$('.js-close-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.close('slidebar-1');
})
متد toggle، دو متد close و open را با یکدیگر اجرا می کند :
$('.js-toggle-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.toggle('slidebar-1');
})
//events
رویدادها
رویدادها برای ایجاد نمونه جدید، اعمال css روی منو که شامل shift و overlay ،push و reveal است، استفاده می شود و مدل رفتاری منو در زمان باز و بسته شدن را نشان می دهد. رویداد باز و بسته شدن منو نیز از جمله رویدادهای این افزونه است.
$ ( controller.events ).on( 'init', function () {
console.log( 'Init event' );
} );
$ (controller.events).on('css',function () {
console.log('css')
})
$ (controller.events).on('exit',function () {
console.log('exit')
})
$ (controller.events).on('opening',function (event,id) {
console.log('opening'+id);
})
$ (controller.events).on('opened',function (event,id) {
console.log('opened'+id);
})
$ (controller.events).on('closing',function (event,id) {
console.log('closing'+id);
})
$ (controller.events).on('closed',function (event,id) {
console.log('closed'+id);
})
با آموزش های دیگر در زمینه آموزش طراحی سایت همراه ما باشید..
آموزش طراحی سایت-آموزش متد ریاضی در جاوا اسکریپت
امروز با یک مقاله جدید از سری مقاله های آموزش طراحی سایت همراه شما هستیم. در مقاله امروز قرار با متدهای ریاضی در جاوا اسکریپت آشنا شده و همراه با هم این متدها رو پیاده سازی کنیم..
شی math به شما این امکان را می دهد که روی اعداد عملیات ریاضی انجام دهید. شی math امکان انجام عملیات محاسباتی و ریاضی را برای برنامه نویس فراهم می کند. شی بیان شده دربردانده ی مجموعه متد ها و توابع ریاضی می باشد. یکی از کاربردهای معمول شی math در زبان جاوا اسکریپت ایجاد یک عدد تصادفی است.
نمونه 1 :
document.getElementById("demo").innerHTML = Math.random();
}
شی Math خود دارای سازنده (constructor) نیست. لازم نیست هیچ متدی ابتدا یک شی math ایجاد کند.
توابع ()Math.min و ()Math.max
متدهای ()Math.min و ()Math.max را می توان برای بدست آوردن مقدار بیشینه (بزرگترین عددی که به عنوان پارامتر ارسال شده) و کمینه (کوچکترین عددی که به عنوان پارامتر ارسال شده) از میان مجموعه ای از آرگومان ها بکار برد.
نمونه 2 :
function myFunction() {
document.getElementById("demo") =
Math.min(0, 150, -2230, 20, -8, -200);
}
نمونه 3 :
function myFunction() {
document.getElementById("demo") =
Math.max(0, 150, 30, 20, -8, -200);
}
تابع ()Math.random
یک عدد تصادفی بین 0 و 1 را به عنوان خروجی (output) برمی گرداند.
نمونه 4 :
Math.random(); // returns a random number
تابع ()math.random همیشه عددی کوچکتر از 1 بر می گرداند.
تابع ()Math.round
یک عدد را به نزدیکترین عدد صحیح (integer) گرد می کند(به عنوان مثال عدد x را گرد کرده و به نزدیکترین عدد صحیح به آن تبدیل می کند).
نمونه 5 :
function myFunction() {
document.getElementById("demo") = Math.round(4.4);
document.getElementById("demo1") = Math.round(4.7);
}
تابع ()Math.ceil
در آموزش طراحی سایت می آموزید که این متد یک عدد را به بالا گرد کرده و نزدیکترین عدد صحیح (integer) به آن را برمی گرداند.
نمونه 6 :
function myFunction() {
document.getElementById("demo") = Math.round(4.4);
}
توابع ()Math.floor و ()Math.random را می توان به طور همزمان برای برگرداندن یک عدد تصادفی بین 0 و 10 مورد استفاده قرار داد.
تابع ()Math.floor
یک عدد را به پایین گرده کرده و نزدیکترین عدد صحیح به آن را برمی گرداند.
نمونه 7 :
function myFunction() {
document.getElementById("demo") = Math.floor(4.7);
}
توابع ()Math.floor و ()Math.random را می توان به طور همزمان برای برگرداندن یک عدد تصادفی بین 0 و 10 مورد استفاده قرار داد.
function myFunction() {
document.getElementById("demo") =
Math.floor(Math.random() * 11);
}
ثابت های ریاضی
جاوا اسکریپت در کل 8 ثابت ریاضی دارد که با استفاده شی math می توان به آن ها دسترسی پیدا کرد.
function myFunction() {
document.getElementById("demo") =
Math.E + "
" +
Math.PI + "
" +
Math.SQRT2 + "
" +
Math.SQRT1_2 + "
" +
Math.LN2 + "
" +
Math.LN10 + "
" +
Math.LOG2E + "
" +
Math.LOG10E + "
"
}
آموزش طراحی سایت : توابع شی math را می توان بصورت زیر فهرست کرد.
1. abs(x) =
قدر مطلق عدد x را برمی گرداند.
2. acos(x) =
آرک کوسینوس عدد x را بر حسب رادیان برمی گرداند.
3. asin(x) =
آرک سینوس عدد x را بر حسب رادیان برمی گرداند.
4. atan(x) =
آرک تانژانت عدد x را به صورت مقدار عددی بین رادیان های clip_image002 - و clip_image002[1] برمی گرداند.
5. atan2(y,x) =
آرک تانژانت خارج قسمت آرگومان های عدد x را برمی گرداند یا به عبارت ساده تر این متد آرک تانژانت عدد x را بر می گرداند.
6. ceil(x) =
عدد x رو به بالا گرد کرده و نزدیک ترین عدد صحیح (integer) به آن را بر می گرداند.
7. cos(x) =
کسینوس x را بر حسب رادیان برمی گرداند.
8. exp(x) =
مقدار عدد Ex را برمی گرداند.
9. floor(x) =
مقدار x را رو به پایین گرد کرده و نزدیک ترین عدد صحیح به آن را بر می گرداند.
10. log(x) =
لگاریتم طبیعی x را بر مبنای عدد e بر می گرداند.
11. max(x,y,z,...,n) =
بزرگترین عدد که به عنوان آرگومان ارسال شده را برمی گرداند.
12. min(x,y,z,...,n) =
کوچکترین عدد که به عنوان پارامتر پاس داده شده را بر می گرداند.
13. pow(x,y) =
مقدار x را به توان y رسانده و حاصل آن را برمی گرداند.
14. ()random =
یک عدد تصادفی بین 0 و 1 را به عنوان خروجی برمی گرداند.
15. round(x) =
مقدار x را به نزدیک ترین عدد صحیح به آن گرد می کند.
16. sin(x) =
مقدار سینوس x را بر حسب رادیان برمی گرداند.
17. sqrt(x) =
جذر یا ریشه ی دوم عدد x را برمی گرداند.
18. tan(x) =
تانژانت یک زاویه را برمی گرداند / مقدار تانژانت x را بازمی گرداند.
در روزهای آتی با مقاله دیگه ای از آموزش جاوا اسکریپت با شما خواهم بود.
آموزش Jquery-مثال عملی
سلام عزیزان ... با آموزش JQuery از دوره آموزش طراحی سایت همراه باشید
آموزش مثال Hello, world در Jquery
در مبحث قبلی با نحوه ی اضافه کردن jQuery به صفحه ی وب برای بهره وری از امکانات فوق العاده زیاد آن آشنا شدید. پیش از شروع به استفاده از کتابخانه ی jQuery بایستی با مفاهیم پایه ای آن آشنایی پیدا کنید و نظر خود را به مثال ساده ی زیر جلب نمایید:
نمونه یک
<div id="divTest1">Hello, world!</div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
همان
طور که مشاهده می کنید، یک تگ با شناسه ی "divTest1" داریم. از علامت $ که
به مثابه ی یک میانبر برای دسترسی به المان های HTML ایفای نقش می کند،
استفاده می کنیم. بنابراین با استفاده از این علامت تمامی المان های HTML
با شناسه ی "divTest1" را انتخاب کرده و مقدار "Hello, world!" را در آن
قرار می دهیم (text آن را با رشته ی "Hello, world!" تنظیم می کنیم).
حتی چاپ کردن همین متن ساده در جاوا اسکریپت به کدنویسی بسیار بیشتر نیاز داشت:
نمونه دو
<div id="divTest2">Hello, world!</div>
<script type="text/javascript">
document.getElementById("divTest2") = "Hello, world!";
اگر المان HTML فقط یک class داشت و از ID نیز برخوردار نبود، این کد به مراتب طولانی تر می شد.
به
طور معمول، باید صبر کنید تا صفحه ی وب وارد مرحله یا وضعیت READY شود و
سپس اقدام به دستکاری محتویات آن نمایید. مثال های ساده ی بالا (و همچنین
تعدادی از عملیات پیچیده ی دیگر) در بیشتر مرورگرها، پیش از آماده شدن صفحه
نیز قابل اجرا هستند. اما این امر در مورد تمامی عملیات با jQuery (پیش از
بارگذاری کامل صفحه و آماده شدن آن) امکان پذیر نیست. خوشبختانه، jQuery
اجرای این عملیات را نیز بسیار آسان ساخته است.