آموزش کدنویسی جعبه دانلود از مبتدی تا پیشرفته

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

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

مقدمه :

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

ما برای کدنویسی نرم افزار Notepad++ را معرفی میکنیم که لینک دانلود آن در جعبه دانلود پایین مطالب میباشد.

برای شروع دو تا پرونده جدید در نرم افزار کدنویسیمون باز میکنیم با اسم های Style.css (مربوط به استایل و زیبایی جعبه دانلود) و index.html (مربوط به فایل اصلی کد جعبه دانلود).

مرحله اول :

در مرحله اول لازم است محیط اصلی جعبه دانلود به همراه پس زمینه جعبه دانلود را کدنویسی کنیم .برای بهتر متوجه شدن به تصویر زیر توجه کنید:

جهت مشاهده تصویر کلیک کنید...

خوب از کد html آن شروع میکنیم و یک دایو برای ان ایجاد میکنیم و کلاسی براش تعیین میکنیم ما کلاس این دایو رو {download-box}انتخاب کرده ایم شما از هر اسم دلخواهی میتوانید استفاده کنید که کد ایجاد شده به صورت زیر میشود :

<div class="download-box"></div>

خوب حالا به سراغ طراحی استایل یا ظاهر بکگراند جعبه دانلود با css میپردازیم که این کد در فایل Style.css قرار میگرد کد آن به صورت زیر در استایل تعریف میشود که ابتدا ما مد را برای شما قرار داده سپس به توضیح اجزای آن میپردازیم :

.download-box { margin-top: 10px; border: 1px solid #CEDCE5; border-radius: 5px; background: none repeat scroll 0% 0% #FFF; padding: 1px; height: auto; transition: all 0.5s ease 0.1s; }

حال نوبت آن رسیده بکگراند داخلی جعبه دانلود رو تعیین کنیم ک دایو برای ان ایجاد میکنیم و کلاسی براش تعیین میکنیم ما کلاس این دایو رو {download-box}انتخاب کرده ایم شما از هر اسم دلخواهی میتوانید استفاده کنید که کد ایجاد شده به صورت زیر میشود :

<div class="bg"> </div>

خوب حالا به سراغ طراحی استایل یا ظاهر بکگراند داخلی جعبه دانلود با css میپردازیم که این کد هم در فایل Style.css قرار میگرد کد آن به صورت زیر در استایل تعریف میشود که ابتدا ما مد را برای شما قرار داده سپس به توضیح اجزای آن میپردازیم :

.bg { background: none repeat scroll 0% 0% #EFF3F5; transition: all 0.5s ease 0.1s; }

معرفی خاصیت های مرحله اول :

خاصیت margin-top با استفاده از این خاصیت فاصله جعبه دانلود از عناصر بالای آن تعیین میکنیم.و این خاصیت برحسب px اندازه داده میشود که ما 10px در نظر گرفتیم.

خاصیت border با استفاده از این خاصیت برای جعبه دانلود یک کادر  تعیین میکنیم.و این خاصیت برحسب px اندازه داده میشود که ما 1px در نظر گرفتیم سپس با استفاده از تعیین کردن نوع ظاهر  کادر که انواع آن عبارت است از:

- none : در اين حالت هيچ خطی به عنوان خطوط حاشيه عنصر نمايش داده نمی شود .
- hidden : در اين حالت خطوط حاشيه مخفی هستند .
- dotted : در اين حالت خطوط حاشيه به صورت نقطه نقطه نمايش داده می شوند .
- dashed : در اين حالت خطوط حاشيه به صورت بريده بريده نمايش داده می شوند .
- solid : در اين حالت خطوط حاشيه به صورت معمولی نمايش داده می شوند .
- doubled : در اين حالت خطوط حاشيه به صورت دو خطی نمايش داده می شوند .
- groove : در اين حالت خطوط حاشيه به صورت 3D نمايش داده می شوند که معمولا خطوط بالايي و سمت چپ پر رنگ تر از خطوط ديگر هستند .
- ridge : در اين حالت خطوط حاشيه به صورت 3D با طيف رنگی نمايش داده می شوند .
- inset : در اين حالت خطوط حاشيه به صورت 3D نمايش داده می شوند که معمولا خطوط بالايي و سمت چپ دارای سايه و تيره تر از خطوط ديگر هستند .

سپس رنگ کادر و یا حاشیمون رو تعیین میکنیم #CEDCE5 .

خاصیت border-radius با استفاده از این خاصیت میزان گردی گوشه های کادر هامون رو تعیین میکنیم.و این خاصیت برحسب px اندازه داده میشود که ما 5px در نظر گرفتیم.

خاصیت background با استفاده از این خاصیت پس زمینه جعبه دانلود رو تعیین میکنیم.

خاصیت padding با استفاده از این خاصیت فاصله داخلی جعبه دانلود رو تعیین میکنیم.و این خاصیت برحسب px اندازه داده میشود که ما 1px در نظر گرفتیم.

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

جمع بندی مرحله اول :

در مرحله اول کد html ما در مجموع به صورت زیر میباشد:
<div class="download-box"> <div class="bg"> </div> </div>

و استایل ما در مجموع تا این مرحله به صورت زیر میباشد:

.download-box { margin-top: 10px; border: 1px solid #CEDCE5; border-radius: 5px; background: none repeat scroll 0% 0% #FFF; padding: 1px; height: auto; transition: all 0.5s ease 0.1s; } .bg { background: none repeat scroll 0% 0% #EFF3F5; transition: all 0.5s ease 0.1s; }

مرحله دوم :

 در مرحله دوم ما جعبه qr کد و یا بارکد خودمان را طراحی میکنیم  .برای بهتر متوجه شدن به تصویر زیر توجه کنید:

 جهت مشاهده تصویر کلیک کنید...

خوب از کد html آن شروع میکنیم و یک دایو برای ان ایجاد میکنیم و کلاسی براش تعیین میکنیم ما کلاس این دایو رو {qr_post}انتخاب کرده ایم شما از هر اسم دلخواهی میتوانید استفاده کنید که کد ایجاد شده به صورت زیر میشود :

<div class="qr_post"></div>

خوب حالا به سراغ طراحی استایل یا ظاهر بارکد جعبه دانلود با css میپردازیم که این کد در فایل Style.css قرار میگرد کد آن به صورت زیر در استایل تعریف میشود که ابتدا ما کد را برای شما قرار داده سپس به توضیح اجزای آن میپردازیم :
.qr_post { float: left; margin: 18px 0px 0px 12px; transition: all 0.5s ease 0.1s; }

خوب حالا نوبت قرار دادن خود بارکد در جایگاه بارکد میباشد که کد آن به صورت زیر میباشدو بین کلاس دایو qr_post قرار میدهیم:

<img src="http://up.hypertemp.ir/up/hypertemp/Morteza/learn/coding_downloadbox_ver1/img/qrcode.hyperdesign.png" alt="QR code" />

توضیحات اضافه:

توسط  alt توضیحات بارکد و توسط  img src بارکدمون قرار میدهیم که شما باید به جای

http://up.hypertemp.ir/up/hypertemp/Morteza/learn/coding_downloadbox_ver1/img/qrcode.hyperdesign.png

آدرس بارکد خودتون رو قرار بدین.
خوب بعد از این مرحله برای تصاویر بارکدمون استایل تعیین میکنیم:

.qr_post img {
width: 150px;
height: 150px;
}

معرفی خاصیت های مرحله دوم :
خاصیت width با استفاده از این خاصیت طول رو تعیین کردیم.

خاصیت height با استفاده از این خاصیت عرض رو تعیین کردیم.

باقی خاصیت های در مرحله یک توضیح داده شده اند باز اگر مشکلی بود در نظرات بیان کنید.

خاصیت float با استفاده از این خاصیت تعیین مکنیم بارکد سمت چب جعبه دانلود قرار گیرد که به صورت راست ( right ) و چب ( left ) میباشد.

جمع بندی مرحله اول و دوم :

در مرحله اول و دوم کد html ما در مجموع به صورت زیر میباشد:

 <div class="download-box"> <div class="bg"> <div class="qr_post"><img src="http://up.hypertemp.ir/up/hypertemp/Morteza/learn/coding_downloadbox_ver1/img/qrcode.hyperdesign.png" alt="QR code" /></div> </div> </div>

و استایل ما در مجموع تا این مرحله به صورت زیر میباشد:
.download-box { margin-top: 10px; border: 1px solid #CEDCE5; border-radius: 5px; background: none repeat scroll 0% 0% #FFF; padding: 1px; height: auto; transition: all 0.5s ease 0.1s; } .bg { background: none repeat scroll 0% 0% #EFF3F5; transition: all 0.5s ease 0.1s; } .qr_post { float: left; margin: 18px 0px 0px 12px; transition: all 0.5s ease 0.1s; } .qr_post img { width: 150px; height: 150px; }

 مرحله سوم :

 در این مرحله ما قسمت داتلود و توضیحات شما رو مینویسیم.برای بهتر متوجه شدن به تصویر زیر توجه کنید:

 جهت مشاهده تصویر کلیک کنید...

خوب از کد html آن شروع میکنیم و یک دایو برای ان ایجاد میکنیم و کلاسی براش تعیین میکنیم ما کلاس این دایو رو {right_post_new}انتخاب کرده ایم شما از هر اسم دلخواهی میتوانید استفاده کنید که کد ایجاد شده به صورت زیر میشود :

<div class="right_post_new"></div>

خوب حالا به سراغ طراحی استایل یا ظاهر  قسمت راست جعبه دانلود با css میپردازیم که این کد در فایل Style.css قرار میگرد کد آن به صورت زیر در استایل تعریف میشود که ابتدا ما کد را برای شما قرار داده سپس به توضیح اجزای آن میپردازیم :

.right_post_new { float: right; width: 60%; margin-right: 30px; line-height: 20px; color: #3F3F3F; margin-top: 9px; transition: all 0.5s ease 0.1s; }

خوب حالا نوبت قرار دادن خود لینک ها و توضیحات  در جایگاه بارکد میباشد که کد آن به صورت زیر میباشدو بین کلاس دایو {right_post_new} قرار میدهیم:
<a class="ab_of">رمز فایل : www.hypertemp.ir </a> <a class="ab_of">حجم : 2.34 مگابایت</a> <a class="dl_of" href="link download">دانلود با لینک مستقیم</a> <a class="dl_of" href="pishnamayesh">پیشنمایش</a>

چند نکته در مورد قسمت بالا:

به جای link download لینک دانلودتون رو قرار بدین و به جای pishnamayesh لینک پیشنمایش باقی قسمت ها هم خودتون متوجه میشید.

توضیحات اضافه:

برای لینک های دانلود و پیش نمایش ما کلاس dl_of انتخاب و برای توضیحات که همان رمز و حجم از کلاس ab_of استفاده کردیم .که استایل های آن رو به ورت زیر تعیین کردیم:

.dl_of { display: block; background: url('http://up.hypertemp.ir/up/hypertemp/Morteza/learn/coding_downloadbox_ver1/img/dl.png') no-repeat scroll right center #FFF; border-radius: 4px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.15); margin-top: 6px; padding: 6px 32px 9px; transition: all 0.5s ease 0.1s; } .ab_of { display: block; background: url('http://up.hypertemp.ir/up/hypertemp/Morteza/learn/coding_downloadbox_ver1/img/verification5.png') no-repeat scroll 97% 32%#FFF; border-radius: 4px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.15); margin-top: 6px; padding: 6px 32px 9px; transition: all 0.5s ease 0.1s; } .ab_of:hover { display: block; background: url('http://up.hypertemp.ir/up/hypertemp/Morteza/learn/coding_downloadbox_ver1/img/verification5.png') no-repeat scroll 97% 32% orange; border-radius: 4px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.15); margin-top: 6px; padding: 6px 32px 9px; color: #fff transition: all 0.5s ease 0.1s; } .dl_of:hover { display: block; background: url('http://up.hypertemp.ir/up/hypertemp/Morteza/learn/coding_downloadbox_ver1/img/dl.png') no-repeat scroll right center #eee; border-radius: 4px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.15); margin-top: 6px; padding: 6px 32px 9px; transition: all 0.5s ease 0.1s; }
خوب مطمعنم دیگه نیازی نیست خاصیت هارو توضیح بدم چون فک میکنم که در مرحله یک و دو تموم خاصیه های لازم رو توضیح دادم حالا اگر بازم قسمتی براتون سوال و ابهام داشت از قسمت نظرات مطلب سوال خود را پرسیده تا پاسخ دهیم.

جمع بندی مرحله اول و دوم :

در مرحله اول و دوم کد html ما در مجموع به صورت زیر میباشد:

<div class="download-box"> <div class="bg"> <div class="qr_post"><img src="http://up.hypertemp.ir/up/hypertemp/Morteza/learn/coding_downloadbox_ver1/img/qrcode.hyperdesign.png" alt="QR code" /></div> <div class="right_post_new"> <a class="ab_of">رمز فایل : www.hypertemp.ir </a> <a class="ab_of">حجم : 2.34 مگابایت</a> <a class="dl_of" href="link download">دانلود با لینک مستقیم</a> <a class="dl_of" href="pishnamayesh">پیشنمایش</a> </div> <br style="clear: both;" /> </div> </div>

و استایل ما در مجموع تا این مرحله به صورت زیر میباشد:

.download-box { margin-top: 10px; border: 1px solid #CEDCE5; border-radius: 5px; background: none repeat scroll 0% 0% #FFF; padding: 1px; height: auto; transition: all 0.5s ease 0.1s; } .bg { background: none repeat scroll 0% 0% #EFF3F5; transition: all 0.5s ease 0.1s; } .qr_post { float: left; margin: 18px 0px 0px 12px; transition: all 0.5s ease 0.1s; } .qr_post img { width: 150px; height: 150px; } .right_post_new { float: right; width: 60%; margin-right: 30px; line-height: 20px; color: #3F3F3F; margin-top: 9px; transition: all 0.5s ease 0.1s; } .dl_of { display: block; background: url('http://up.hypertemp.ir/up/hypertemp/Morteza/learn/coding_downloadbox_ver1/img/dl.png') no-repeat scroll right center #FFF; border-radius: 4px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.15); margin-top: 6px; padding: 6px 32px 9px; transition: all 0.5s ease 0.1s; } .ab_of { display: block; background: url('http://up.hypertemp.ir/up/hypertemp/Morteza/learn/coding_downloadbox_ver1/img/verification5.png') no-repeat scroll 97% 32%#FFF; border-radius: 4px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.15); margin-top: 6px; padding: 6px 32px 9px; transition: all 0.5s ease 0.1s; } .ab_of:hover { display: block; background: url('http://up.hypertemp.ir/up/hypertemp/Morteza/learn/coding_downloadbox_ver1/img/verification5.png') no-repeat scroll 97% 32% orange; border-radius: 4px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.15); margin-top: 6px; padding: 6px 32px 9px; color: #fff transition: all 0.5s ease 0.1s; } .dl_of:hover { display: block; background: url('http://up.hypertemp.ir/up/hypertemp/Morteza/learn/coding_downloadbox_ver1/img/dl.png') no-repeat scroll right center #eee; border-radius: 4px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.15); margin-top: 6px; padding: 6px 32px 9px; transition: all 0.5s ease 0.1s; }

مرحله نهایی :

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

کد html این قسمت :

<div class="info_post_t"> محل قرار گیری متن توضیحات بیشتر </div>

اینم استایل این کلاس:

.info_post_t {
    text-align: justify;
    line-height: 20px;
    margin: 12px 15px 0px;
    border-top: 1px solid #CEDCE5;
    padding: 15px 8px;
    color: #3F3F3F;
	    transition: all 0.5s ease 0.1s;
}

برای مشاهده جمع بندی نهایی و آموزش قرار دادن در سایت به بخش زیر مراجعه کنید :

کلیک کنید...