آموزش فارسی طراحی قالب وب سایت با فتوشاپ+ cCSS/HTML

شروع موضوع توسط Morteza1371 ‏3 سپتامبر 2011 در انجمن آموزش هاي ويدئويي - Video Tutorial

  1. Morteza1371

    Morteza1371 Active Member

    ارسال‌ها:
    1,126
    تشکر شده:
    955
    امتیاز دستاورد:
    36

    آموزش طراحی قالب سایت با فتوشاپ + CSS/HTML

    قسمت اول

    گفته ی نویسنده ی وب سایت CGTV.IR :

    در این مجموعه شما از ابتدا یاد خواهید گرفت که چه نرم افزارهایی برای اینکار نیاز دارید و چه مهارتهایی رو باید یاد بگیرید.
    در مجموعه طراحی قالب وب سایت ما قصد داریم برای سیستمهای مدیریت محتوای وردپرس و احتمالا بعد از اون سیستم مدیریت محتوای جوملا ۱٫۵ قالب طراحی کنیم و بروی این سیستمها پیاده سازی کنیم.
    همچنین در سری آموزشی که فکر کنم حدوده ۱۰ قسمت یا بیشتر باشه روش کار با کدهای css رو یاد خواهید گرفت و توسط این کدها استایل قالب طراحی شده رو تعریف میکنیم.
    در اولین قسمت از این آموزش من اصول کلی از طراحی قالب و نرم افزارهای مورد نیاز و در کل روال کاری را برای شما شرح داده ام.
    امیدوارم از این آموزش لذت ببرید.:)

    دانلود با لینک مستقیم ::: 6 مگابایت

    PHP:
    http://a23.video2.blip.tv/10850008121415/Animators-bbbbbbbbb497.mp4
     
    AliBilly، ameir-hg، p30site و 17 نفر دیگر از این ارسال تشکر کرده اند.
  2. Morteza1371

    Morteza1371 Active Member

    ارسال‌ها:
    1,126
    تشکر شده:
    955
    امتیاز دستاورد:
    36
    قسمت دوم

    گفته ی نویسنده ی وب سایت CGTV.IR :

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


    دانلود با لینک مستقیم ::: 39 مگابایت

    PHP:
    http://a23.video2.blip.tv/10860008188936/Animators-webDesigPart2551.mp4
     
    AliBilly، deltamaster، hamedara82 و 15 نفر دیگر از این ارسال تشکر کرده اند.
  3. Morteza1371

    Morteza1371 Active Member

    ارسال‌ها:
    1,126
    تشکر شده:
    955
    امتیاز دستاورد:
    36
    قسمت سوم

    گفته ی نویسنده ی وب سایت CGTV.IR :

    امیدوار هستم تا به اینجا از یادگیری طراحی وب سایت خسته نشده باشید!
    طراحی وب سایت مخصوصا برای سیستم مدیریت محتوای وردپرس بسیار لذت بخشه و مطمئن هستم بعد از یادگیری طرحهای بسیار زیبایی رو از شما دوستان گرامی شاهد خواهیم بود.
    در این قسمت از آموزش ابتدا یک مقدار رنگ بندی قبلی وب سایت رو تغییر میدم تا جلوه زیباتری داشته باشه ، سپس به طراحی قسمت مطالب و قسمت زیرین وب سایت (فوتر) خواهیم پرداخت.

    آموزش طراحی قالب وب سایت رو از وب سایت CGTV.ir دنبال کنید:

    دانلود با لینک مستقیم ::: 43 مگابایت

    PHP:
    http://animators.blip.tv/file/get/Animators-webDesignPart3934.mp4
     
    hamedara82، ameir-hg، m0hammad و 13 نفر دیگر از این ارسال تشکر کرده اند.
  4. Morteza1371

    Morteza1371 Active Member

    ارسال‌ها:
    1,126
    تشکر شده:
    955
    امتیاز دستاورد:
    36
    قسمت چهارم

    گفته ی نویسنده ی وب سایت CGTV.IR :

    در این قسمت از آموزش به Slice کردن قالب خود خواهیم پرداخت به این مفهوم که قسمتهایی از طراحی اولیه کارمون رو که در آینده “CSS نویسی” به آن احتیاج پیدا خواهیم کرد جدا میکنیم و به صورت Gif یا PNG ذخیره میکنیم.اینکه چه قسمتهایی رو ما نیاز داریم که Slice کنیم یا تکه کنیم رو در این آموزش خواهم گفت اما برای اینکه دقیق تر به این موضوع پی ببرید نیاز به تمرین طراحی و مشاهده قالبهای آماده دارید به هر حال در قسمت بعدی که نوشتن کدهای CSS رو شروع خواهیم کرد خواهید دید که چرا فقط قسمتهایی از فایل فتوشاپ خودمون رو تکه کردیم و از بقیه قسمت ها صرفنظر کردیم.

    دانلود با لینک مستقیم ::: 31 مگابایت

    PHP:
    http://a23.video2.blip.tv/10840008329522/Animators-webdesignp4859.mp4
     
    hamedara82، ameir-hg، m0hammad و 14 نفر دیگر از این ارسال تشکر کرده اند.
  5. Morteza1371

    Morteza1371 Active Member

    ارسال‌ها:
    1,126
    تشکر شده:
    955
    امتیاز دستاورد:
    36
    قسمت پنجم

    گفته ی نویسنده ی وب سایت CGTV.IR :

    خوب دوستان دیگه وقت اون رسیده که شروع به کد نویسی و به اصطلاح CSS کردن قالب خودمون کنیم. در مورد آموزش CSS من در سایتهای فارسی سایت خوبی رو پیدا نکردم که از پایه شروع کنه و کار با هر کد رو یاد بده البته جسته و گریخته در سایتها و فرومهای فارسی چیزهایی دیده میشه که جالبه.
    اما به هر حال کتاب آموزشی مناسبی که به زبان فارسی باشه رو من حداقل پیدا نکردم. اما در سایتهای انگلیسی زبان هم کتاب و هم سایت و هم ویدئوهای آموزشی جالبی وجود داره که خیلی از اونا هم رایگان هست.
    به هر حال!
    من در این آموزش مقدمات کار با CSS رو به شما یاد خواهم داد اینکه چگونه:
    - فایل CSS رو به صفحه HTML لینک کنید.
    - چگونه رنگ پس زمینه ، فونتها و … رو تغییر بدید.
    - چگونه نوشته ها رو راست چین ، چپ چین یا وسط چین کنید.
    - چگونه یک div ایجاد کنید و خصوصیات اون رو در سی اس اس تعریف کنید.
    و…


    دانلود با لینک مستقیم::::44 مگابایت


    PHP:
    http://animators.blip.tv/file/get/Animators-WebDesignPart5873.mp4
     
    hamedara82، ameir-hg، hamid taghavi و 15 نفر دیگر از این ارسال تشکر کرده اند.
  6. Morteza1371

    Morteza1371 Active Member

    ارسال‌ها:
    1,126
    تشکر شده:
    955
    امتیاز دستاورد:
    36
    قسمت ششم

    گفته ی نویسنده ی وب سایت CGTV.IR :

    خوب همونطور که قبلا گفتم از این آموزش به بعد شروع به css کردن قالب اولیه خودمون خواهیم کرد و به شکل حرفه ای قالب وب سایت خودمون رو به یک فایل HTML تبدیل میکنیم.

    دانلود با لینک مستقیم::::37 مگابایت

    PHP:
    http://a25.video2.blip.tv/11550008781386/Animators-WebDesignPart61673.mp4
     
    hamedara82، ameir-hg، hamid taghavi و 14 نفر دیگر از این ارسال تشکر کرده اند.
  7. Morteza1371

    Morteza1371 Active Member

    ارسال‌ها:
    1,126
    تشکر شده:
    955
    امتیاز دستاورد:
    36
    قسمت هقتم

    گفته ی نویسنده ی وب سایت CGTV.IR :

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


    دانلود با لینک مستقیم::::38 مگابایت
    PHP:
    http://animators.blip.tv/file/get/Animators-WebDesignPart7337.mp4

    دانلود فایل های پروژه


    3 کیلوبایت


     
    ameir-hg، hamid taghavi، m0hammad و 11 نفر دیگر از این ارسال تشکر کرده اند.
  8. Morteza1371

    Morteza1371 Active Member

    ارسال‌ها:
    1,126
    تشکر شده:
    955
    امتیاز دستاورد:
    36
    قسمت هشتم

    گفته ی نویسنده ی وب سایت CGTV.IR :

    در این آموزش ادامه طراحی سی اس اس سایت خواهیم پرداخت ، ابتدا فوتر وب سایت رو طراحی میکنیم بعد به طراحی جزییات قسمت محتوا خواهیم پرداخت در این آموزش با استایل دادن به لینک ها آشنا خواهید شد.
    این نکته رو بگم که این آموزش یه مقدار طولانی شد “حدوده چهل دقیقه ” و به نسبت حجم فایل هم زیادتر شده است. البته من نسخه کم حجمتر این آموزش رو هم قرار دادم اما به نسبت کیفیت پایینتری دارد.


    دانلود با لینک مستقیم::::73 مگابایت کیفیت بالا


    PHP:
    http://a34.video2.blip.tv/12470009236033/Animators-WebDesignPart8882.mp4

    دانلود با لینک مستقیم::::38 مگابایت کیفیت پایین


    PHP:
    http://a34.video2.blip.tv/12510009220876/Animators-WebDesignPart8207.mp4


     
    ameir-hg، m0hammad، bitaroos و 12 نفر دیگر از این ارسال تشکر کرده اند.
  9. Morteza1371

    Morteza1371 Active Member

    ارسال‌ها:
    1,126
    تشکر شده:
    955
    امتیاز دستاورد:
    36
    قسمت نهم
    گفته ی نویسنده ی وب سایت CGTV.IR :

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


    دانلود با لینک مستقیم::::36 مگابایت کیفیت بالا

    PHP:
    http://a29.video2.blip.tv/11390009345153/Animators-WebDesignPart9761.mp4
    دانلود با لینک مستقیم::::38 مگابایت کیفیت پایین

    PHP:
    http://a24.video2.blip.tv/10990009342519/Animators-WebDesignPart9833.mp4



     
    ameir-hg، hamid taghavi، m0hammad و 10 نفر دیگر از این ارسال تشکر کرده اند.
  10. Morteza1371

    Morteza1371 Active Member

    ارسال‌ها:
    1,126
    تشکر شده:
    955
    امتیاز دستاورد:
    36
    قسمت دهم
    گفته ی نویسنده ی وب سایت CGTV.IR :

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



    دانلود با لینک مستقیم::::25 مگابایت کیفیت بالا


    PHP:
    http://a4.video4.blip.tv/0520000221676/Animators-WebDesignPart10CGTVir505.mp4

    دانلود با لینک مستقیم::::15 مگابایت کیفیت پایین


    PHP:
    http://a39.video2.blip.tv/7960009963382/Animators-WebDesignPart10CGTVir980.mp4


    دانلود نرم افزار xampp
    دانلود نرم افزار easyPHP
     
    ameir-hg، hamid taghavi، m0hammad و 3 نفر دیگر از این ارسال تشکر کرده اند.
  11. Morteza1371

    Morteza1371 Active Member

    ارسال‌ها:
    1,126
    تشکر شده:
    955
    امتیاز دستاورد:
    36
    قسمت یازدهم

    گفته ی نویسنده ی وب سایت CGTV.IR :


    در این قسمت از آموزش طراحی شروع به پیاده سازی قالب بروی وردپرس میکنیم و با تگ های وردپرس و چگونگی عملکرد آنها آشنا خواهیم شد. یک فایل پی دی اف نیز همراه فایل آموزشی آپلود کرده ام که لیست تگهای وردپرس در اون گنجانده شده و شما برای پیاده سازی قالب روی وردپرس نیاز به این مجموعه تگ ها دارید. البته تمامی تگ ها در این پی دی اف موجود نیست و شما برای دیدن لیست کامل تگ ها به آدرس http://codex.wordpress.org مراجعه کنید.


    در این آموزش خواهید دید پیاده سازی قالب روی وردپرس چقدر راحت و لذت بخشه!


    دانلود با لینک مستقیم::::40 مگابایت کیفیت بالا


    PHP:
    http://a16.video4.blip.tv/1980000759154/Animators-WebDesignPart11220.mp4

    دانلود با لینک مستقیم::::17 مگابایت کیفیت پایین


    PHP:
    http://a23.video2.blip.tv/13120010255080/Animators-WebDesignPart11654.mp4
    پی دی اف لیست تگ های وردپرس


    PHP:
    http://www.cgtv.ir/wp-content/uploads/2012/01/WordPress-Help-Sheet_CGTV.ir_.pdf

    فایلهای پروژه
    PHP:
    http://www.cgtv.ir/wp-content/uploads/2012/01/ProjectFile-webdesign11_CGTV.ir_.zip



     
    ameir-hg، hamid taghavi، m0hammad و یک نفر دیگر از این ارسال تشکر کرده اند.
  12. Morteza1371

    Morteza1371 Active Member

    ارسال‌ها:
    1,126
    تشکر شده:
    955
    امتیاز دستاورد:
    36
    قسمت دوازدهم

    گفته ی نویسنده ی وب سایت CGTV.IR :

    در این آموزش شروع به استایل دادن به منوی سمت چپ قالب خواهیم کرد. با تگ <ul> و <li> آشنا خواهیم شد و اینکه چه استفاده ای از این تگها میشود و نحوه دسترسی به آنها در سی اس اس را به شما آموزش خواهیم داد. در آموزش طراحی وب سایت شماره ۱۲ شما با چند تکنیک در سی اس اس نیز آشنا خواهید شد که شما را در خلاصه نویسی در فایل سی اس اس بسیار کمک میکنه و بوسیله این تکنیک میتوانید از نوشتن کلاسهای اضافی در فایل سی اس اس جلوگیری کنید. ممکنه این آموزش یه مقدار پیچیده به نظر بیاد اما به هیچ وجه اینگونه نیست با یه خورده تمرین میتونید این تکنیکها رو به نحو احسن توی کار خودتون استفاده کنید.



    دانلود با لینک مستقیم::::49 مگابایت کیفیت بالا

    [PHPhttp://a13.video4.blip.tv/1450001196585/Animators-WebDesignPart12CGTVir610.mp4][/PHP]

    دانلود با لینک مستقیم::::17 مگابایت کیفیت پایین

    PHP:
    http://a23.video2.blip.tv/13120010255080/Animators-WebDesignPart11654.mp4

     
    ameir-hg، hamid taghavi، m0hammad و 4 نفر دیگر از این ارسال تشکر کرده اند.
  13. Omid RKO

    Omid RKO New Member

    ارسال‌ها:
    21
    تشکر شده:
    2
    امتیاز دستاورد:
    1
    ادامه داره آیا ؟؟
     
  14. 1mdfr

    1mdfr Member

    ارسال‌ها:
    263
    تشکر شده:
    113
    امتیاز دستاورد:
    16
    آموزش طراحی وب – شماره سیزده

    گفته ی نویسنده ی وب سایت CGTV.IR :

    خب دیگه کم کم داریم به پایان مجموعه آموزشی نزدیک میشیم ، به غیر از این قسمت فقط یه قسمت دیگه از مجموعه طراحی وب باقی مونده. در این قسمت شروع به تکه تکه کردن فایل وردپرس میکنی که دوستان در این مورد سوال زیاد میکردند. همچنین در این آموزش اشکالات قالب خودمون رو برطرف میکنم ، برای قالبمون عکس پیش فرض انتخاب میکنیم و نام طراح و توضیحات قالب رو اضافه خواهیم کرد.
    خواهشی که از دوستان دارم هر سوالی که در مورد طراحی وب و طراحی قالب برای وردپرس دارند فقط و فقط در انجمنهای وب سایت مطرح ککند. برای ورود به انجمن وب سایت اینجا کلیک کنید. امیدوارم از آموزش طراحی وب شماره سیزده لذت ببرید.
    دانلود آموزش ( کیفیت بالا )
    دانلود آموزش (کیفیت پایین)
    مشاهده از طریق آیفون
    مشاهده از طریق نرم افزار ITunes
    فایلهای پروژه
     
    hamedara82، ameir-hg، Morteza1371 و یک نفر دیگر از این ارسال تشکر کرده اند.
  15. 1mdfr

    1mdfr Member

    ارسال‌ها:
    263
    تشکر شده:
    113
    امتیاز دستاورد:
    16
    آموزش طراحی وب سایت – قسمت ۱۴ -پایانی

    خب دوستان نهایتا قسمت آخر آموزش طراحی وب رو آماده کرده ام همونطور که قبلا اشاره کردم در این قسمت قسمت single.php رو طراحی میکنیم یعنی همون قسمتی که متن اصلی خبر در اون قسمت قرار میگیره و قسمت ثبت دیدگاه و … در اون قسمت قرار میگیره. شما خودتون میتونید ویژگیهای خیلی خیلی بیشتری رو به قالب وردپرس خودتون اضافه کنید که این بستگی به علاقه و دنبال کردن خود شما داره.
    بعضا میبینم دوستان ایمیل میزنن و سوالهایی میپرسند که خیلی بدیهی هست و با یه جستجوی کوچک در اینترنت میتونند به جواب برسند.
    به هر حال انجمنهای زیادی در اینترنت وجود داره و مقالات فوق العاده ای (چه به فارسی و چه به انگلیسی) در اینترنت وجود داره که میتونید از اونها در توسعه قالب وردپرس خودتون کمک بگیرید.
    همچنین خیلی از دوستان رو میبینم که پس از اینکه چندقسمتی توی مجموعه آموزشی وقفه افتاد خودشون رفتن مطالب جدید رو با جستجو و مطالعه یاد گرفتند و این بسیار خوشحال کننده است.
    امیدوارم همه دوستان با این مجموعه آموزشی تا اندازه ای با طراحی وب ، CSS و طراحی قالب برای وردپرس آشنایی پیدا کرده باشند.
    ممنون از همه دوستانی که در این مدت طولانی سعه صدر داشتند و آموزشهای وب سایت رو دنبال میکردند.
    در آینده ای نه چندان دور آموزشهای بیشتری در زمینه وب و طراحی گرافیک بروی وب سایت قرار خواهد گرفت.
    یا حق
    دانلود آموزش (کیفیت بالا)
    دانلود آموزش (کیفیت پایین)
    دانلود آموزش ( برای مشاهده بروی آیفون)
    مشاهده از طریق نرم افزار آیتونز
    فایلهای پروژه
     
    hamedara82، ameir-hg، Morteza1371 و 2 نفر دیگر از این ارسال تشکر کرده اند.
  16. karimy110

    karimy110 New Member

    ارسال‌ها:
    2
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    سلام و با تشکر از زحمتی که کشیده اید
    امید وارم که در این عرصه موفق باشید و مزد این کار خوبتون رو بگیرید
    خدمت شما عرض کنم که قسمت ششم از آموزش های شما وجود نداره. لطف کنید و لینک رو اصلاح کنید
    با تشکر از شما
     
  17. 1mdfr

    1mdfr Member

    ارسال‌ها:
    263
    تشکر شده:
    113
    امتیاز دستاورد:
    16
    می تونید به سایت http://cgtv.ir رفته آن را دنبال کنید
     
  18. hamedara82

    hamedara82 New Member

    ارسال‌ها:
    15
    تشکر شده:
    5
    امتیاز دستاورد:
    1
    با سلام و تشکر از شما قسمت ششم درست کار نمی کنه!
     
  19. amirv60

    amirv60 New Member

    ارسال‌ها:
    16
    تشکر شده:
    11
    امتیاز دستاورد:
    1
    دانلود قسمت ششم
    خوب همونطور که قبلا گفتم از این آموزش به بعد شروع به css کردن قالب اولیه خودمون خواهیم کرد و به شکل حرفه ای قالب وب سایت خودمون رو به یک فایل HTML تبدیل میکنیم.

    http://animators.blip.tv/file/get/Animators-WebDesignPart61673.mp4
     
  20. fgcosoft

    fgcosoft Member

    ارسال‌ها:
    51
    تشکر شده:
    6
    امتیاز دستاورد:
    6
    سلام این شرکت برای طراحی وب سایت چطور است؟ و از چه سیستمی استفاده میکند
     

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