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

Morteza1371 · Sep 3, 2011

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

قسمت اول

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

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

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

PHP:

http://a23.video2.blip.tv/10850008121415/Animators-bbbbbbbbb497.mp4

Morteza1371 · Sep 3, 2011

قسمت دوم

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

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

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

PHP:

http://a23.video2.blip.tv/10860008188936/Animators-webDesigPart2551.mp4

Morteza1371 · Sep 3, 2011

قسمت سوم

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

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

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

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

PHP:

http://animators.blip.tv/file/get/Animators-webDesignPart3934.mp4

Morteza1371 · Sep 3, 2011

قسمت چهارم

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

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

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

PHP:

http://a23.video2.blip.tv/10840008329522/Animators-webdesignp4859.mp4

Morteza1371 · Sep 3, 2011

قسمت پنجم

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

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

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

PHP:

http://animators.blip.tv/file/get/Animators-WebDesignPart5873.mp4

Morteza1371 · Sep 3, 2011

قسمت ششم

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

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

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

PHP:

http://a25.video2.blip.tv/11550008781386/Animators-WebDesignPart61673.mp4

Morteza1371 · Sep 3, 2011

قسمت هقتم

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

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

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

PHP:

http://animators.blip.tv/file/get/Animators-WebDesignPart7337.mp4

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

3 کیلوبایت

Morteza1371 · Sep 3, 2011

قسمت هشتم

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

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

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

PHP:

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

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

PHP:

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

Morteza1371 · Sep 12, 2011

قسمت نهم
گفته ی نویسنده ی وب سایت 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

Morteza1371 · Feb 14, 2012

قسمت دهم
گفته ی نویسنده ی وب سایت 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

Morteza1371 · Feb 14, 2012

قسمت یازدهم

گفته ی نویسنده ی وب سایت 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

Morteza1371 · Feb 14, 2012

قسمت دوازدهم

گفته ی نویسنده ی وب سایت 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

Omid RKO · Mar 17, 2012

ادامه داره آیا ؟؟

1mdfr · Mar 27, 2012

آموزش طراحی وب – شماره سیزده

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

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

1mdfr · Mar 27, 2012

آموزش طراحی وب سایت – قسمت ۱۴ -پایانی

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

karimy110 · Jun 13, 2012

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

1mdfr · Jun 13, 2012

می تونید به سایت http://cgtv.ir رفته آن را دنبال کنید

hamedara82 · Sep 11, 2012

Morteza1371 گفت:
قسمت ششم

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

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

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

PHP:

http://a25.video2.blip.tv/11550008781386/Animators-WebDesignPart61673.mp4

با سلام و تشکر از شما قسمت ششم درست کار نمی کنه!

amirv60 · Oct 23, 2012

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

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