دسته: علوم کامپیوتری

طراحی وب: ۸- انیمیشن

انیمیشن در CSS امکان تغییر پراپرتی‌های یک المنت را در زمان معین و با سرعت دلخواه می‌دهد.

مزایای انیمیشن CSS نسبت به جاواسکریپت

نیازی به یادگیری و به کاربردن جاواسکریپت نیست.
با لگ کمتری نمایش داده می‌شود. (حتی در کامپیوترهای ضعیف)

راه اندازی یک انیمیشن در CSS دو بخش دارد.

تعریف
کاربرد

تعریف انیمیشن

در هنگام تعریف انیمیشن ابتدا یک نام به آن داده می‌شود. سپس گام‌های انیمیشن تعریف می‌شود. در مثال زیر یک انیمیشن به نام to-circle تعریف شده و گام‌های انیمیشن نیز مشخص شده است.

CSS


@keyframes to-circle {
	0% {
		border-radius:0%;
	}
	20% {
		border-radius:10%;
	}
	40% {
		border-radius:20%;
	}
	60% {
		border-radius:30%;
	}
	80% {
		border-radius:40%;
	}
	100% {
		border-radius:50%;
	}
}

نام انیمیشن
گام‌های انیمیشن
پراپرتی‌های هر گام

در تعیین گام‌ها می توانید بجای 0% از from و بجای 100% از to استفاده کنید.

پراپرتی‌های انیمیشن

برای تعیین شیوه‌ی کار انیمیشن چند پراپرتی وجود دارد.

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

animation-name

ابتدا باید انیمیشنی را که می‌خواهید اجرا شود، مشخص کنید.

CSS


@keyframes zoom-in {
	from {
	  opacity: 0;
	  transform: scale(0.2, 0.2);
	}
	to {
	  opacity: 1;
	}
}
img {
	animation-name: zoom-in;
}
img:active {
	animation-name: none;
}

روی تصویر کلیک کنید.

animation-duration

مدت زمان انیمیشن را مشخص می کند. واحد زمان s برای ثانیه یا ms برای میلی ثانیه باید حتما نوشته شود. مقدار پیش فرض صفر است.

animation-timing-function

تابعی را معرفی می‌کند که به کمک آن مقادیر میانی پراپرتی محاسبه می‌شود.

animation-delay

قبل از انیمیشن چقدر باید منتظر ماند. واحد زمان s برای ثانیه یا ms برای میلی ثانیه باید حتما نوشته شود. مقدار پیش فرض صفر است.

animation-iteration-count

انیمیشن چند بار تکرار شود. مقدار پیش فرض یکبار است برای اینکه پیوسته تکرار شود، مقدار infinity را به کار برید.

animation-direction

جهت انیمیشن را مشخص می‌کند از آغاز به پایان یا عکس آن.

animation-fill-mode

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

animation-play-state

این پراپرتی مشخص می‌کند انیمیشن اجرا شود یا موقتا متوقف شود.

دستور خلاصه

همه دستورهای بالا را می‌توانید در یک دستور زیر خلاصه کنید.

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

مثال

Flash

CSS


@keyframes flash {
	0%,50%,100%  {
		opacity: 1;
	}
	25%,75%  {
		opacity: 0.5;
	}
}

.item {
	animation-name: flash;
	animation-duration: 1s;
}

.item:active {
	animation-name: none;
}

مثال

Square to Circle

CSS


@keyframes square-to-circle {
	0%  {
		border-radius:0 0 0 0;
		background: #4285F4;
		transform: rotate(0deg);
	}
	25%  {
		border-radius:50% 0 0 0;
		background: #FBBC05;
		transform: rotate(45deg);
	}
	50%  {
		border-radius:50% 50% 0 0;
		background: #34A853;
		transform: rotate(90deg);
	}
	75%  { 
		border-radius:50% 50% 50% 0;
		background: #EA4335;
		transform: rotate(135deg);
	}
	100% {  
		border-radius:50% 50% 50% 50%;
		background: #000000;
		transform: rotate(180deg);
	}
}
.item {
	animation: square-to-circle 2s .5s infinite cubic-bezier(1,.15,.3,1.35) alternate;
}

تمرین ۱

این فایل را دانلود کنید.
آن را در فولدر web2 باز کنید.
در فایل CSS آن تغییراتی بدهید تا همانند ویدیوی زیر شود.

زمان خواندن: ۳ دقیقه

طراحی وب: ۷- ترنسفورم سه بعدی

فضای سه‌بعدی

برای نمایش المنت‌ها در فضای سه بعدی باید از محورهای مختصات سه بعدی استفاده کرد. جهت این محورها به دو صورت می‌تواند باشد. که به آن راست‌گرد و یا چپ‌گرد می‌گویند. اگر سه انگشت شست، نشانه و میانی دست خود را طوری باز کنید که هر یک از آنها با زاویه ۹۰ درجه نسبت به دیگری قرار گیرد. انگشت شست جهت محور x را تعیین می‌کند. و انگشت نشانه جهت محور y را و انگشت میانی جهت محور z را نشان می‌دهد.

X: انگشت شست
Y: انگشت نشانه
Z: انگشت میانی

اگر از دست راست استفاده کنید جهت محورهای مختصات راست‌گرد و اگر از دست چپ استفاده کنید چپ‌گرد خواهد بود.

راست‌گرد: دست راست
چپ‌گرد: دست چپ

بیشتر جاها سیستم راست‌گرد به کار می‌رود. ولی در کامپیوتر سیستم مختصات چپ گرد است.

فانکشن‌های ترنسفورم

با پراپرتی transform در فضای سه بعدی نیز می‌توانید سایز، جا و یا شکل المنت را تغییر دهید.

فرم کلی آن به شکل زیر است:

transform: function( );

در پراپرتی ترنسفورم فانکشن‌های زیر را می‌توان به کار برد.

rotate: چرخش
translate: جابجایی
scale: تغییر اندازه
skew: کجی
matrix: کلی

rotate

برای چرخاندن المنت حول محور x از فانکشن rotateX استفاده کنید.
زاویه را با یکی از واحدهای زیر بنویسید.

deg: درجه
rad: رادیان
grad: گرادیان
turn: تعداد دور

برای چرخاندن المنت حول محور y از فانکشن rotateY استفاده کنید.

برای چرخاندن المنت حول محور z از فانکشن rotateZ استفاده کنید. این معادل دستور rotate است.

برای چرخاندن المنت حول محور دلخواه از فانکشن rotate3d به شکل زیر استفاده کنید.

transform: rotate3d(x, y, z, angle);

محور مورد نظر، خطی است که از مبدأ مختصات و نقطه‌ای با مختصات (x، y، z) می‌گذرد. و angle زاویه چرخش است.

translate

برای جابجایی المنت بر روی محور x از فانکشن tranlateX استفاده کنید. در این جا از هر واحدی می‌توانید استفاده کنید.

برای جابجایی المنت بر روی محور y از فانکشن tranlateY استفاده کنید.

برای جابجایی المنت بر روی محور z از فانکشن tranlateZ استفاده کنید.

برای جابجایی المنت به نقطه دلخواه از فانکشن translate3d به شکل زیر استفاده کنید.

transform: translate3d(x, y, z);

scale

برای تغییر اندازه المنت بر روی محور x از فانکشن scaleX استفاده کنید. (این مقدار نسبی است و واحد نمی‌خواهد.)

برای تغییر اندازه المنت بر روی محور y از فانکشن scaleY استفاده کنید.

برای تغییر اندازه المنت بر روی محور z از فانکشن scaleZ استفاده کنید. اگر المنت در صفحه باشد، این فانکشن هیچ تأثیری ندارد.

ولی اگر المنت با صفحه مانیتور زاویه داشته باشد تغییر می‌کند.

برای تغییر اندازه المنت بر روی هر سه محور از فانکشن scale3d به شکل زیر استفاده کنید.

transform: scale3d(x,y,z);

skew

پراپرتی skew تنها بر روی محورهای x و y کار می‌کند.

matrix

برای این که همه موارد بالا را در یک فانکشن بگنجانید می‌توانید عبارت matrix3d را به کار برید.

پشت المنت

این پراپرتی تعیین می‌کند که هنگام چرخش المنت، محتوای آن از پشت دیده شود یا نه.

backface-visibility: visible(Default)|hidden;

مبدأ مختصات

به نقطه تقاطع محورها، مبدأ مختصات می‌گویند. فاصله‌ها، چرخش و یا پیچش به دور آن صورت می‌گیرد. در ترنسفورم به صورت پیش فرض مبدأ مختصات هر المنت در مرکز آن در نظر گرفته می‌شود. ولی شما می‌توانید آن را تغییر دهید.
با کمک پراپرتی transform-origin می‌توانید جای مبدأ را برای آن المنت تعیین کنید.

transform-origin: x y z;

x: left | center | right | length (default: 50%)
y: top | center | bottom | length (default: 50%)
z: length (default: 0)

پرسپکتیو

پرسپکتیو perspective یا ژرفانمایی به معنای نمایش یک شیء سه بعدی بر روی سطح دو بعدی است، همان گونه که با چشم دیده می‌شود. جای چشم بیننده (دیدگاه) در شکل تصویری که دیده می‌شود بسیار موثر است.

Perspective: A point of view.

با دو پراپرتی perspective و perspective-origin دیدگاه (جای چشم بیننده) را می‌توان تعیین کرد. این پراپرتی‌ها باید به پرنت داده شوند.

perspective

با کمک پراپرتی perspective می‌توانید فاصله دیدگاه را از صفحه z=0 تعیین کنید. (مقدار z نقطه دیدگاه)

perspective: z;

perspective-origin

با کمک پراپرتی perspective-origin می‌توانید x و y دیدگاه را تعیین کنید.

perspective-origin: x y;

x: left | center | right | length (default: 50%)
y: top | center | bottom | length (default: 50%)

تخت یا سه بعدی

این پراپرتی تعیین می‌کند که المنت تخت باشد یا سه بعدی. این پراپرتی را باید به پرنت بدهید.

transform-style: flat(Default)|preserve-3d;

مثال

چرخش تصویر حول محور y:

CSS


.parent {
	position: relative;
	transform-style: preserve-3d;
	perspective: 1000px;
}	
.card {
	position: absolute;
	transition: all 1s;
	backface-visibility: hidden;
}
.card .back {
	transform: rotateY(180deg);
}
.parent:hover .card {
	transform: rotateY(180deg);
}

مثال

چرخش تصویر حول محور y:

CSS


.parent {
	position: relative;
	transform-style: preserve-3d;
	perspective: 1000px;
}	
.item {
	position: absolute;
	transition: all 1s;
	backface-visibility: hidden;
	transform-origin: center right;
}
item.back {
	transform: rotateY(180deg);
}
parent:hover item {
	transform: translateX(-100%) rotateY(180deg);
}

مثال

Parallax

CSS


.parent {
	height: 100vh;
	overflow-x: hidden;
	overflow-y: scroll;
	perspective: 1px;
}	
item.back {
	position: relative;
	z-index: -1;
	transform-origin: top;
	transform: translateZ(-1px) translateY(-50vh) scale(2);
}

زمان خواندن: ۵ دقیقه

طراحی وب: ۶- ترنسفورم

ترنسفورم به معنای دگرگونی است. با پراپرتی transform در CSS می‌توانید سایز، جا و یا شکل المنت را تغییر دهید.

فرم کلی آن به شکل زیر است:

transform: function( );

فانکشن‌های ترنسفورم

در پراپرتی ترنسفورم فانکشن‌های زیر را می‌توان به کار برد.

rotate: چرخش
translate: جابجایی
scale: تغییر اندازه
skew: کجی
matrix: کلی

rotate

این فانکشن المنت را حول محور مختصات به اندازه زاویه داده شده، در جهت عقربه‌های ساعت می‌چرخاند.

زاویه را با یکی از واحدهای زیر بنویسید.

deg: درجه
rad: رادیان
grad: گرادیان
turn: تعداد دور

translate

برای جابجایی المنت بر روی محور افقی (x) از فانکشن tranlateX استفاده کنید. از واحدهای مختلف می توانید استفاده کنید.

برای جابجایی المنت بر روی محور عمودی (y) از فانکشن tranlateY استفاده کنید.

برای جابجایی المنت بر روی هر دو محور از فانکشن tranlate به شکل زیر استفاده کنید.

transform: translate(x,y);

scale

برای تغییر اندازه المنت بر روی محور افقی (x) از فانکشن scaleX استفاده کنید. (این مقدار نسبی است و واحد نمی‌خواهد.)

برای تغییر اندازه المنت بر روی محور عمودی (y) از فانکشن scaleY استفاده کنید.

برای تغییر اندازه المنت بر روی هر دو محور از فانکشن scale به شکل زیر استفاده کنید.

transform: scale(x,y);

skew

برای تغییر اندازه کجی المنت بر روی محور افقی (x) از فانکشن skewX استفاده کنید. واحد زاویه استفاده می‌شود.

برای تغییر اندازه کجی المنت بر روی محور عمودی (y) از فانکشن skewY استفاده کنید.

برای تغییر اندازه کجی المنت بر روی هر دو محور از فانکشن skew به شکل زیر استفاده کنید.

transform: skew(x,y);

matrix

برای این که همه موارد بالا را در یک فانکشن بگنجانید عبارت matrix را به ترتیب زیر بنویسید:

matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)

مبدأ مختصات

با کمک پراپرتی transform-origin می‌توانید جای مبدأ را برای آن المنت تعیین کنید.

transform-origin: x y;

مقدار x و y:

x-value	y-value
left center (default) right value	top center (default) bottom value

مثال rotate

مثال scale

مثال skew

مثال

مبدأ مختصات را می‌توانید خارج المنت قرار دهید.

مثال

نوشته عمودی

CSS


.item {
	font-size: 64px;
	line-height: 1;
	transform-origin: 32px 32px;
	transform: rotate(90deg);
}

مثال

ترنسفورم و ترنزیشن

CSS


.item {
	transition: all 0.5s;
}

.item:hover {
	transform: scale(2) rotate(6deg);
	box-shadow: 10px 10px 10px rgba(0,0,0,.8);
}

مثال

ترنسفورم و ترنزیشن

CSS


.item {
	transition: all 0.5s;
}

.item:hover {
	transform: translateX(-50%);
}

تمرین ۱

این فایل را دانلود کنید.
آن را در فولدر web2 باز کنید.
در فایل CSS آن تغییراتی بدهید تا همانند ویدیوی زیر هنگام کلیک روی آن، تصویر جابجا شود.

زمان خواندن: ۳ دقیقه

طراحی وب: ۵- ترنزیشن

ترنزیشن به معنای جابجایی است. و در CSS باعث می‌شود تغییر پراپرتی به آرامی انجام شود. ترنزیشن یک راه ساده برای ایجاد انیمیشن در وب است. برای نمونه شما می‌توانید در CSS بنویسید: هنگامی که ماوس روی المنت می‌رود نحوه‌ی نمایش آن تغییراتی کند. (رنگ، سایز، سایه و … تغییر کند.)

بدون ترنزیشن این تغییرات به یک باره اتفاق می‌افتد.

ولی با ترنزیشن این تغییرات به آرامی انجام می‌گیرد.

تریگر – Trigger

به رویدادهایی که باعث این تغییر می‌شود تریگر یا ماشه می‌گویند.

رویدادهایی که در ترنزیشن‌ بیشتر به کار می‌روند، عبارتند از:

:hover
:active
:focus

پراپرتی‌های انیمیشن پذیر

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

تعریف ترنزیشن

ترنزیشن با استفاده از چند پراپرتی کنترل می‌شود.

transition-duration

مدت زمان ترنزیشن را مشخص می کند. می‌توانید یک مدت زمان واحد را برای همه پراپرتی‌ها تعیین کنید. یا برای هر پراپرتی یک مدت زمان جداگانه تعیین کنید. واحد زمان s برای ثانیه یا ms برای میلی ثانیه باید حتما نوشته شود. مقدار پیش فرض صفر است.

transition-property

نام پراپرتی‌هایی را که ترانزیشن‌ها باید روی آن‌ها اعمال شوند، مشخص می‌کند. تنها پراپرتی‌های فهرست شده در اینجا در مدت مشخص شده و به آرامی تغییر می‌کنند. تغییرات پراپرتی‌های دیگر به طور آنی به طور معمول رخ می‌دهد.

transition-delay

قبل از ترنزیشن چقدر باید منتظر ماند. واحد زمان s برای ثانیه یا ms برای میلی ثانیه باید حتما نوشته شود. مقدار پیش فرض صفر است.

transition-timing-function

تابعی را معرفی می‌کند که به کمک آن مقادیر میانی پراپرتی محاسبه می‌شود. برای طراحی این تابع ویدیوی زیر را ببینید:

دستور خلاصه

هر چهار دستور بالا را می‌توانید در یک دستور زیر خلاصه کنید.

transition: property duration timing-function delay;

مثال

در فریم زیر مقادیر را تغییر دهید و با بردن ماوس روی مربع سرمه‌ای نتیجه آن را ببینید.

مثال

ترنزیشن سایه Shadow Transition

CSS


.item {
	transition: all 0.5s;
}

.item:hover {
	box-shadow: 0 10px 20px 0 rgba(0,0,0,0.5);
}

پوینتر ماوس را روی تصویر ببرید و تغییر آن را ببینید.

مثال

ترنزیشن سایه داخلی Inner Shadow

CSS


.item {
	transition: all 0.5s;
}
.item.button1:hover {
	color: Beige;
	box-shadow: 200px 0 0 0 DimGray inset;
}
.item.button2:hover {
	color: Beige;
	box-shadow: 0 60px 0 0 DimGray inset;
}
.item.button3:hover {
	color: Beige;
	box-shadow: 0 0 0 30px DimGray inset;
}
.item.button4:hover {
	color: Beige;
	box-shadow: 0 0 100px 0 DimGray inset;
}

پوینتر ماوس را روی دکمه‌ها ببرید و تغییر آن را ببینید.

مثال

ساخت آکوردیون Accordion روش اول

CSS


item {
	max-height: 0;
	transition: max-height 0.5s;
}

item:target {
	max-height: 400px;
}

روی آیتم‌ها کلیک کنید و تغییر آن را ببینید.

مثال

ساخت آکوردیون Accordion روش دوم

CSS


input {
	display: none;
}

item {
	max-height: 0;
	transition: max-height 0.5s;
}

input:checked ~ item {
	max-height: 400px;
}

روی آیتم‌ها کلیک کنید و تغییر آن را ببینید.

تمرین ۱

این فایل را دانلود کنید.
آن را در فولدر web2 باز کنید.
در فایل CSS آن تغییراتی بدهید تا همانند ویدیوی زیر تصاویر به آرامی fade شوند.

زمان خواندن: ۳ دقیقه

طراحی وب: ۴- پوزیشن

پوزیشن موقعیت مکانی یک المنت را در صفحه مشخص می‌کند.

برای تعیین مکان هر المنت، می‌توان فاصله آن را از هر سمت تعیین کرد.

برای محاسبه فاصله، سه محور مختصات در نظر گرفته می‌شود.

مکان پیش‌فرض المنت
المنت پرنت
پنجره بروزر

position: static | relative | absolute | fixed | sticky;

static: None (default value)
relative: Relative to its default position(1).
absolute: Relative to its parent position(2).
fixed: Relative to the browser window(3).
sticky: Relative to the browser window(3).

پوزیشن پیش فرض – static

اگر برای المنتی پوزیشن تعیین نگردد، به صورت پیش‌فرض مقدار static در نظر گرفته می‌شود.

HTML


<main>
    <section class="red-box"></section>
    <section class="orange-box"></section>
    <section class="purple-box"></section>
</main>

CSS


main {
  width: 400px;
  height: 400px;
  background-color: beige;
}
.red-box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.orange-box {
  width: 125px;
  height: 125px;
  background-color: orange;
}
.purple-box {
  width: 150px;
  height: 150px;
  background-color: purple;
}

در فریم بالا اسکرول کنید. و به محل قرار گرفتن هر المنت دقت کنید.

Static With Coordinates

دادن مختصات المنت بدون تعیین پوزیشن، هیچ کاری نمی‌کند.

CSS


.orange-box {
  left:50px;        /* 50px from left */
  ...
}

Relative With Coordinates

تعیین پوزیشن relative بدون تعیین مختصات هیچ کاری نمی‌کند.

CSS


.orange-box {
  position: relative;        /* relative to its default position. */
  ...
}

Relative With Coordinates

هنگامی‌که پوزیشن relative است؛ مختصات نسبت به مکان پیش‌فرض المنت محاسبه می‌شود.

CSS


.orange-box {
  position: relative;        /* relative to its default position. */
  top: 50px;
  left:50px;
  ...
}

Absolute Without Coordinates

تعیین پوزیشن absolute بدون دادن مختصات، المنت را در جای پیش‌فرض خودش نمایش می‌دهد. ولی آن را در چیدمان بقیه المنت‌ها نادیده می‌گیرد.

CSS


.orange-box {
  position: absolute;       /* relative to its parent position. */
  ...
}

Absolute With Coordinates

هنگامی‌که پوزیشن المنت absolute است؛ و پوزیشن پرنت آن المنت تعیین نشده باشد. مختصات آن نسبت به پنجره بروزر محاسبه می‌شود.

CSS


.orange-box {
  position: absolute;        /* relative to its parent position. */
  top: 50px;
  left:50px;
}

Absolute With Coordinates

هنگامی‌که پوزیشن absolute است؛ و پوزیشن پرنت آن المنت تعیین شده باشد. مختصات آن نسبت به پرنت محاسبه می‌شود.

CSS


main {
  position: relative;        /* relative to its default position. */
  ...
}
.orange-box {
  position: absolute;        /* relative to its parent position. */
  top: 50px;
  left:50px;
  ...
}

Fixed Without Coordinates

هنگامی‌که پوزیشن fixed تعیین شود؛ جای المنت ثابت می‌ماند و با اسکرول کردن جابجا نمی‌شود. آن را در چیدمان بقیه المنت‌ها نادیده می‌گیرد.

اگر مختصات داده نشود، المنت را در جای پیش‌فرض خودش نمایش می‌دهد.

CSS


.orange-box {
  position: fixed;       /* relative to the browser window. */
  ...
}

Fixed With Coordinates

هنگامی‌که پوزیشن fixed تعیین شود؛ اگر مختصات داده شود، نسبت به پنجره بروزر محاسبه می‌شود.

CSS


.orange-box {
  position: fixed;       /* relative to the browser window. */
  top: 50px;
  left:50px;
  ...
}

Sticky Without Coordinates

واژه sticky به معنای چسبنده است. پوزیشن sticky باعث می‌شود، هنگام اسکرول، المنت به محل مورد نظر بچسبد. ولی بدون دادن مختصات کاری نمی‌کند.

CSS


.orange-box {
  position: sticky;        /* relative to the browser window. */
  ...
}

Sticky With Coordinates

هنگامی‌که پوزیشن sticky باشد؛ مختصات نسبت به پنجره بروزر محاسبه می‌شود.

CSS


.orange-box {
  position: sticky;        /* relative to the browser window. */
  top: 50px;
  ...
}

z-index

ترتیب قرار گرفتن المنت‌ها روی هم را مشخص می‌کند.

CSS


.red-box {
  position: absolute;
  top: 150px;
  left: 150px;
  z-index: 3;
  ...
}

.orange-box {
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 2;
  ...
}

.purple-box {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
  ...
}

خلاصه

حالات گوناگون را در فریم زیر تست کنید. اسکرول کنید و نتیجه را ببینید.

Sticky Navigation Bar

نوار منوی چسبان یکی از کاربردهای پوزیشن است.

CSS


nav {
  position: sticky;
  top: 0px;
}

Auto-Hiding Menu

منوی پنهان شونده نیز یکی از کاربردهای پوزیشن است.

CSS


.item {
  position: fixed;
  top: 50px;
  left: -75px;
}

.item:hover {
  left: 0px;
}

تمرین ۱

این فایل را دانلود کنید.
آن را در فولدر web2 باز کنید.
یک صفحه با منوی ثابت کناری همانند ویدیوی زیر درست کنید.

زمان خواندن: ۴ دقیقه