تبدیل قالب psd به قالب html5

شروع موضوع توسط websaz2012 ‏17 مارس 2013 در انجمن نرم‌افزارهای توسعه‌وب‌سایت (Sublime, VSCode و ...)

  1. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    ............. ادامه

    16.PNG

    خوب این کلاس هم تموم شد.حالا چه طوری از این کلاسها استفاده کنیم؟این خیلی راحته روی عبارت خانه کلیک کنید سپس پایین برنامه
    تو قسمت propreites تو قسمت class کلاس home را انتخاب کنید کار تمام است. واسه عبارت ورود نیز کلاس login را انتخاب کنید.

    17.PNG

    خوب فصل هدر دیگه تموم شد فصل بعدی مختص به showcase خواهد بود.




    پایان درس هفتم.

    مشاهده پیوست lesson7.rar
     
    نوشته شده توسط websaz2012 در ‏9 آوریل 2013
    babilo، majidsica و ghasemrayaneh از این ارسال تشکر کرده اند.
  2. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    دوستان کسی بلده چطوری تو یک تاپیک بیش از 5 تصویر گذاشت؟ اصلا میشه؟
     
    نوشته شده توسط websaz2012 در ‏9 آوریل 2013
    ghasemrayaneh از این پست تشکر کرده است.
  3. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43
    نه داداش من تا حالا این موضوع را امتحان نکردم .
     
    نوشته شده توسط ghasemrayaneh در ‏9 آوریل 2013
  4. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    درس هشتم

    قسمت showcase

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

    فایل psd رو باز کرده و قفل گروپ showcase را غیر فعال کنید
    برای این قسمت ما به سه تصویر نیاز داریم اول دوتا ایکن دوم اون سایه زیبا که زیر این دوتا ایکن
    هستند(divider ) ....

    گروپ showcase را باز کرده و لایه divider را تبدیل به smartobjiect کنید و روش دوبار کلیک کرده و با نام divider.png درون پوشه images ذخیره کنید.

    حالا گروپ Skin info را باز کرده و روی لایه computer دوبار کلیک کنید و تصویر را با نام computer.png ذخیره کنید.

    گروپ Slide show info را باز کرده و روی ایکون slideshow دوبار کلیک کنید و تصویر را با نام slideshow.png ذخیره کنید.

    ذخیره تصاویر برای این قسمت دیگه تموم شد و فتوشاپ را ببندید و وارد دریمویور شوید.

    روی تصویر showcase که درون کلاس showcase. است کلیک کنید و سپس دکمه delete کیبرد را فشار دهید تا تصویر حذف شودحالا متن showcase را داخلش تایپ کنید تا بتوانید ان را انتخاب کنید.

    حالا سراغ کلاس .showcase که قبلا تعریف کرده بودیم میرویم (پانل css style) خوب روش دوبار کلیک میکنیم و تنظیمات زیر را براش انجام میدهیم.

    1.PNG

    2.PNG

    شکل بدست امده تا این لحظه :

    3.PNG


    خوب الان ما نیاز به دو کلاس ریم تا در هر کدوم متن ها وایکن هایی که ذخیره کردیم را توش جاگذاری کنیم.

    من دو کلاس به نامهای skininfo و slideshowinfo را برای این کار انتخاب کردم پس بصورت زیر عمل میکنیم.

    متن showcase را پاک کرده و یک کلاس به نام skininfo با تنظیمات زیر درونش تعریف می کنیم.


    4.PNG

    خوب ok کنید . این شد کلاس skininfo حالا نوبت کلاس slideshowinfo است پس وارد قسمت code دریمویور میشویم و بعد از کلاس skininfo کلیک کرده و یک کلاس به نام .slideshowinfo با تنظیمات زیر وارد میکنیم.


    5.PNG


    خوب ما دوتا کلاس وارد کلاس showcase قرار دادیم حالا چون این دوکلاس درون کلاس showcase هستند و هردوی انها شناورند(float دارند) ما باید برای اینکه کلاس showcase ناپدید نشود (در بعضی مواقع اگر بخواهید به ان پس زمینه دهید در مرورگر نمایش داده نمیشود!) بعد از اخرین کلاسی که درون ان است یک کلاس به نام clear که قبلا در تمپلتمون بود را بدون هیچ متنی درون ان قرار دهیم.


    ..........................
     
    آخرین ویرایش: ‏10 آوریل 2013
    نوشته شده توسط websaz2012 در ‏10 آوریل 2013
    babilo، key12 و ghasemrayaneh از این ارسال تشکر کرده اند.
  5. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    **************************************************************************
    Clear همان کلاس .clearfloat است که من ان را تغییر نام داده ام . برای راحتی و روان بودن
    ***************************************************************************


    خوب بعد از کلاس slideshowinfo این کد را قرار دهید.


    <div class="clear"></div>


    خوب شکل نهایی تا این لحظه:

    6-.PNG


    7.PNG

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

    متن داخل skininfo را پاک کنید

    از موی inser > image را انتخاب کرده و تصویر computer.png را وارد کنید. عرض ان را به 80 پیکسل تنظیم کنید(تو پانل proprities) سپس از کادر class تو همین پانل کلاس left را انتخاب کنید.


    این مرحله اول. حالا میرسیم به نوشتن متنمون وارد code شوید و بعد از تصویر کلیک کرده و تگ
    <p></p> را تایپ کنید و متن دلخواه خود را در ان تایپ کنید.


    این هم مرحله دوم. قسمت skininfo تمام شد حالا میرویم سراغ قسمت sideshowinfo و متن ان را نیز پاک کرده و تصویر slideshow.png را جاگذاری کنید و عرض ان را نیز به 80px تغییر دهید و از کادر class کلاس right را انتخاب کنیدو وارد قسمت code دریمویور شوید و بعد از تصویر عبارت <p></p> را تایپ کنید و متن دلخواه خود را درون این عبارت تایپ کنید.


    این فصل هم به پایان رسید.

    شکل نهایی:


    8.PNG

    9.PNG


    مشاهده پیوست lesson8.rar
     
    آخرین ویرایش: ‏10 آوریل 2013
    نوشته شده توسط websaz2012 در ‏10 آوریل 2013
    babilo، key12، majidsica و یک نفر دیگر از این ارسال تشکر کرده اند.
  6. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    درس نهم
    بخش footer

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

    فایل psd را باز کنید سپس یک انتخاب مانند زیر انجام دهید.

    1.jpg


    سپس Edit > Copy Merged را انتخاب کنید حالا از File > new را میزنیم و ok میکنیم و Edit > paste را نیز میزنیم تصویر را با نام footer-bg.jpg درون images ذخیره کنید.

    وارد دریمویور شوید و تصویر footer را پاک کنید و عبارت footer را تایپ کنید سپس سراغ کلاس footer روید و تنظیمات ان را مانند زیر انجام دهید.


    2.jpg


    3.jpg


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


    کپی رایت و تماس ها

    یکی برای ایکون های share

    یکی برای صفحات سایت

    من این سه کلاس را به ترتیب

    Copyright

    Share

    Pages

    مینامم.

    -بخش اول copyright

    همیشه یکجا که معولا در پاورقی است برای کپی رایت طراحی شده است تا کپی رایت ان شرکت را به نمایش گذارد.

    متن داخل footer را پاک کنید و یک کلاس با نام copyright درون ان با تنظیمات زیر قرار دهید.


    4.jpg


    خوب ok کنید تا کلاس جاگذاری شود حالا یک کلاس با نام share بعد از کلاس copyright با همین تنظیمات بالا جاگذاری کنید.

    یک کلاس هم با نام pages بعد از کلاس share با همین تنظیمات قبلی وارد footer کنید.

    شکل بدست امده:


    5.jpg



    .......................
     
    آخرین ویرایش: ‏13 آوریل 2013
    نوشته شده توسط websaz2012 در ‏10 آوریل 2013
    majidsica از این پست تشکر کرده است.
  7. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    ....... ادامه

    خوب برای ذخیره سازی تصاویر دوباره وارد فتوشاپ شوید

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

    a (6).PNG


    سپس دو گروپ Background را خاموش کره و از منو Edit > Copy Merged را انتخاب کرده File >new را هم میزنیم در کادرجدید دقت شود روی transparent تنظیم شده باشد حالا تو سندجدید paste کنید وفیلو بانام logo-footer.png ذخیره کنید.

    حالا دور اون خط عمودی نیز انتخاب کرده و اون را هم با نام divider-block ذخیره کنید.

    خوب فقط مونده ایکونهای share وارد پوشه Social Network Icons شوید وتک تک ایکونها رو به smart objiect تبدیل کرده و انها را با نام های خودشون با فرمت png ذخیره کنید.

    کارمون با فتوشاپ تموم شد .فتوشاپ را ببندید و سراغ دریمویور بروید.

    اول میرویم سراغ copyright پس متن اخل ان را پاک کرده و تصویر logo-footer.png را وارد منید سپس به اون کلاس right بدهید این مرحله اول
    حالا وارد code شده بعد از این تصویر عبارت <p></p> را تایپ کنید حالا موس را وسط این تگ برده کلیک کنید به حالت Desing رفته و متن خود را تایپ کنید .

    من چیکار کردم؟

    اول عبارت tell:your tell را تاپیدم سپس کلیدهای shift+enter را زدم تا به خط جدید رفتم و اینبار عبارت Email:[email protected] را تایپ کردم دوباره shift+enter متن forum.majidonline.com بازهم shift+enter متن Make by : mohsen golmohammadi باز shift+enter و متن Copy Right © 2013 majidonline.com را تایپ کردم.

    دوست داشتم که دو عبارت [email protected] و Copy Right © 2013 majidonline.com از بقیه متن ها متمایز باشد پس تصمیم گرفتم که رنگشونو تغییر دهم مثلا یه جور رنگ طلایی را واسه این کار مناسب دیدم حالا چطوری رنگشونو تغییر دادم؟


    متن [email protected] را هایلات کردم و در پایین برنامه که دو حالت دارد که من بخش css را انتخاب کردم سپس دکمه Edit Rule را فشار دادم.در کادر جدید عبارت tala را وارد و ok کردم
    و color را روی #cda869تنظیم کردم و ok زدم که در نتیجه رنگ این قسمت از متن تغییر کرد
    خوب متن بعدی را که Copy Right © 2013 majidonline.com است را نیز هایلات کردم و در قسمت Target rule عبارت tala را انتخاب کردم در نتیجه رنگ این متن هم تغییر کرد.


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


    a (7).PNG



    a (8).PNG

    a (9).PNG



    خوب شکل نهایی:


    a (10).PNG
     
    نوشته شده توسط websaz2012 در ‏10 آوریل 2013
    salam8، babilo، majidsica و یک نفر دیگر از این ارسال تشکر کرده اند.
  8. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43
    سپاس از شما

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

    ممنون
     
    نوشته شده توسط ghasemrayaneh در ‏13 آوریل 2013
  9. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43
    سلام دوست عزیز ادامه آموزش رو تکمیل نمیکنید ؟
     
    نوشته شده توسط ghasemrayaneh در ‏19 آوریل 2013
  10. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    بزودی دوست من...!راستی از سطح اموزش راضی هستین؟؟؟؟
     
    نوشته شده توسط websaz2012 در ‏20 آوریل 2013
    babilo از این پست تشکر کرده است.
  11. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43
    سپاس از شما سطح آمزش خیلی خوبه اما چند تا نکته :

    شما در بخش درس اول اندازه ها رو تغییر دادید ، میخواهم بدونم اندازه ها رو بر چه مبنایی تغییر دادید ؟
     
    نوشته شده توسط ghasemrayaneh در ‏20 آوریل 2013
  12. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    دقیقا منظور شما رو نفهمیدم اما تمام اندازه ها بر مبنای px (پیکسل) است.
     
    نوشته شده توسط websaz2012 در ‏21 آوریل 2013
    ghasemrayaneh از این پست تشکر کرده است.
  13. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43
    نه میدونم اندازه ها پیکسل هستش .

    منظورم اینه که شما تو درس دوم عرض را به 640 تغییر دادید . آیا باید هم اندازه عرض psd مون باشه ؟
     
    نوشته شده توسط ghasemrayaneh در ‏21 آوریل 2013
  14. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    بله منظور شما را الان فهمیدم !!!

    چند نکته به عزضتون

    1. فایل psd به دوجهت طراحی میشود
    اول واسه اینکه یک نقشه کامل از سایتمونو داشته باشیم ( بدونیم چی داریم طراحی میکنیم)
    دوم واسه طراحی تصاویر مورد نظر که تو کدنویسی لازممون میشه

    3. ما سایت را بر اساس همون فایل psd که طراحی کردیم طراحی میکنیم یعنی ظاهر را با هم ست میکنیم

    اول اینکه حالا اندازه ها درس مث هم نشد مهم نیست ( بستگی به ظرافت کار دارد)
    دوم من حالا خیلی به اندازه ها دقت نکردم و هر جی ک فک کنم مناسب است میزارم
    سوم بیخیال داش حالا شما خیلی هم گیر ندین!!!!
    :green:

    اگه ظرافت خیلی براتون مهمه اندازه های همون psd را بزارین!!

    با تشکر سوال دیگه ایی هم بود بفرمایین.!
     
    نوشته شده توسط websaz2012 در ‏21 آوریل 2013
    ghasemrayaneh از این پست تشکر کرده است.
  15. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43
    ممنون داداش جسارت نباشه من سوال میپرسم ، فقط میخوام بدونم اگر خواستم قالبی خودم psd کنم اندازه هاش رو برای تنظیم بدونم . که کامل متوجه شدم .

    سپاس فراوان
     
    نوشته شده توسط ghasemrayaneh در ‏22 آوریل 2013
  16. WebDesinger

    WebDesinger New Member

    ارسال‌ها:
    2
    تشکر شده:
    1
    امتیاز دستاورد:
    1
    سلام

    ادامه بدهید دوست گرامی
     
    نوشته شده توسط WebDesinger در ‏8 می 2013
    ghasemrayaneh از این پست تشکر کرده است.
  17. AhadGD

    AhadGD Well-Known Member

    ارسال‌ها:
    470
    تشکر شده:
    342
    امتیاز دستاورد:
    63
    ???

    ببخشید این لینک خرابه؟
     
    نوشته شده توسط AhadGD در ‏9 می 2013
  18. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43
    بله فایل پاک شده
     
    نوشته شده توسط ghasemrayaneh در ‏9 می 2013
  19. AhadGD

    AhadGD Well-Known Member

    ارسال‌ها:
    470
    تشکر شده:
    342
    امتیاز دستاورد:
    63
    نوشته شده توسط AhadGD در ‏10 می 2013
    ghasemrayaneh از این پست تشکر کرده است.
  20. کورش کبیر

    کورش کبیر Member

    ارسال‌ها:
    202
    تشکر شده:
    48
    امتیاز دستاورد:
    16
    دم همتون گرم دوستای گلم
    من الان مطلع شدم و قصد دارم با اراده قوی بصوی آموزش بیام
     
    نوشته شده توسط کورش کبیر در ‏20 می 2013

به اشتراک بگذارید