نگــاهــی متفـــاوت بــه طراحـــی
A Different View on design

Hypertemp.ir

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

پست شماره 6
22:23 , جمعه 09 آبان 1393

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

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

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

مقدمه :

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

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

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

مرحله اول :

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

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

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

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

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

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

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

خاصیت 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 ما در مجموع به صورت زیر میباشد:

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

مرحله دوم :

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

 

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

 مرحله سوم :

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

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

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

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

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

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

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

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

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


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

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

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


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

مرحله نهایی :

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

کد html این قسمت :

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




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

کلیک کنید...

توجه : تمام حقوق مطالب برای هایپرتمپ محفوظ می باشد.

نظرات ارسال شده

  • محمد رضا 1394/12/19 , 8:47

    سلام.این کد را برای رزبلاگ هم بگید

    پاسخ : برای رزبلاگ هم میتونید استفاده کنید

  • ramin max 1394/11/3 , 15:48

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

    پاسخ : جان؟

  • ramin max 1394/11/3 , 15:47

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

    پاسخ : توی انجمن بگید تا بهتر بشه راهنمایتون کنیم

  • SaEeD GH 1394/7/9 , 13:23

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

    پاسخ : متاسفانه صفحه ها پاک شدن

  • علی امینی 1394/1/26 , 19:35

    بسیار علی مثل همیشه برام کاربردی بود

    پاسخ : نظرات شما هم کاربردی علی جان

  • hossda 1394/1/23 , 20:14

    میشه شما آمادشو برای دانولد بزارید

    پاسخ : با سلام در انجمن درخواست دهید براتون در همون لحظه کدو در اختیارتون میگزارم

  • hossda 1394/1/23 , 19:59

    لینک خرابه که ..............

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

  • omid 1393/8/20 , 10:41

    ممنون

  • dominar 1393/8/10 , 15:32

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

    پاسخ : قابلی نداشت منتظر آموزش های بعدی باشین

  • غزل 1393/8/10 , 15:26

    خیلی عالی بود

    پاسخ : ممنون از نظرتون

  • نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتی