PDA

مشاهده نسخه کامل : آموزش فارسی طراحی قالب وب سایت با فتوشاپ+ cCSS/HTML



Morteza1371
شنبه 12 شهریور 1390, 17:30
آموزش طراحی قالب سایت با فتوشاپ + CSS/HTML

قسمت اول

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

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

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


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

Morteza1371
شنبه 12 شهریور 1390, 17:32
قسمت دوم

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

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


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


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

Morteza1371
شنبه 12 شهریور 1390, 17:34
قسمت سوم

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

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

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

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


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

Morteza1371
شنبه 12 شهریور 1390, 17:36
قسمت چهارم

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

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

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


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

Morteza1371
شنبه 12 شهریور 1390, 17:40
قسمت پنجم

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

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


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



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

Morteza1371
شنبه 12 شهریور 1390, 17:42
قسمت ششم

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

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

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


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

Morteza1371
شنبه 12 شهریور 1390, 17:45
قسمت هقتم

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

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


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

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


دانلود فایل های پروژه (https://skydrive.live.com/redir.aspx?cid=9cac091a3300e9cf&resid=9CAC091A3300E9CF%21106)


3 کیلوبایت

Morteza1371
شنبه 12 شهریور 1390, 17:47
قسمت هشتم

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

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


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



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


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



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

Morteza1371
دوشنبه 21 شهریور 1390, 15:57
قسمت نهم
گفته ی نویسنده ی وب سایت CGTV.IR :

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


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


http://a29.video2.blip.tv/11390009345153/Animators-WebDesignPart9761.mp4

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


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

Morteza1371
سه شنبه 25 بهمن 1390, 16:20
قسمت دهم
گفته ی نویسنده ی وب سایت CGTV.IR :

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



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



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


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



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



دانلود نرم افزار xampp (http://sourceforge.net/projects/xampp/)
دانلود نرم افزار easyPHP (http://www.easyphp.org/download.php)

Morteza1371
سه شنبه 25 بهمن 1390, 16:27
قسمت یازدهم

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


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


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


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



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


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



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

پی دی اف لیست تگ های وردپرس (https://skydrive.live.com/redir.aspx?cid=9cac091a3300e9cf&resid=9CAC091A3300E9CF%21118&parid=9CAC091A3300E9CF%21116)



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


فایلهای پروژه (https://skydrive.live.com/redir.aspx?cid=9cac091a3300e9cf&resid=9CAC091A3300E9CF%21117&parid=9CAC091A3300E9CF%21116)

http://www.cgtv.ir/wp-content/uploads/2012/01/ProjectFile-webdesign11_CGTV.ir_.zip

(https://skydrive.live.com/redir.aspx?cid=9cac091a3300e9cf&resid=9CAC091A3300E9CF%21118&parid=9CAC091A3300E9CF%21116)

Morteza1371
سه شنبه 25 بهمن 1390, 16:29
قسمت دوازدهم

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

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



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




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


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

Omid RKO
شنبه 27 اسفند 1390, 16:25
ادامه داره آیا ؟؟

1mdfr
سه شنبه 08 فروردین 1391, 18:56
گفته ی نویسنده ی وب سایت CGTV.IR :

خب دیگه کم کم داریم به پایان مجموعه آموزشی نزدیک میشیم ، به غیر از این قسمت فقط یه قسمت دیگه از مجموعه طراحی وب باقی مونده. در این قسمت شروع به تکه تکه کردن فایل وردپرس میکنی که دوستان در این مورد سوال زیاد میکردند. همچنین در این آموزش اشکالات قالب خودمون رو برطرف میکنم ، برای قالبمون عکس پیش فرض انتخاب میکنیم و نام طراح و توضیحات قالب رو اضافه خواهیم کرد.
خواهشی که از دوستان دارم هر سوالی که در مورد طراحی وب و طراحی قالب برای وردپرس دارند فقط و فقط در انجمنهای وب سایت مطرح ککند. برای ورود به انجمن وب سایت اینجا (http://forum.cgtv.ir/)کلیک کنید. امیدوارم از آموزش طراحی وب شماره سیزده لذت ببرید.
دانلود آموزش (http://animators.blip.tv/file/get/Animators-WebDesignPart13572.mp4) ( کیفیت بالا )
دانلود آموزش (http://animators.blip.tv/file/get/Animators-WebDesignPart13372.mp4) (کیفیت پایین)
مشاهده از طریق آیفون (http://animators.blip.tv/file/get/Animators-WebDesignPart13598.m4v)
مشاهده از طریق نرم افزار ITunes (http://itunes.apple.com/us/podcast/animators/id355778786)
فایلهای پروژه (https://skydrive.live.com/redir.aspx?cid=9cac091a3300e9cf&resid=9CAC091A3300E9CF%21125&parid=9CAC091A3300E9CF%21124)

1mdfr
سه شنبه 08 فروردین 1391, 18:57
خب دوستان نهایتا قسمت آخر آموزش طراحی وب رو آماده کرده ام همونطور که قبلا اشاره کردم در این قسمت قسمت single.php رو طراحی میکنیم یعنی همون قسمتی که متن اصلی خبر در اون قسمت قرار میگیره و قسمت ثبت دیدگاه و … در اون قسمت قرار میگیره. شما خودتون میتونید ویژگیهای خیلی خیلی بیشتری رو به قالب وردپرس خودتون اضافه کنید که این بستگی به علاقه و دنبال کردن خود شما داره.
بعضا میبینم دوستان ایمیل میزنن و سوالهایی میپرسند که خیلی بدیهی هست و با یه جستجوی کوچک در اینترنت میتونند به جواب برسند.
به هر حال انجمنهای زیادی در اینترنت وجود داره و مقالات فوق العاده ای (چه به فارسی و چه به انگلیسی) در اینترنت وجود داره که میتونید از اونها در توسعه قالب وردپرس خودتون کمک بگیرید.
همچنین خیلی از دوستان رو میبینم که پس از اینکه چندقسمتی توی مجموعه آموزشی وقفه افتاد خودشون رفتن مطالب جدید رو با جستجو و مطالعه یاد گرفتند و این بسیار خوشحال کننده است.
امیدوارم همه دوستان با این مجموعه آموزشی تا اندازه ای با طراحی وب ، CSS و طراحی قالب برای وردپرس آشنایی پیدا کرده باشند.
ممنون از همه دوستانی که در این مدت طولانی سعه صدر داشتند و آموزشهای وب سایت رو دنبال میکردند.
در آینده ای نه چندان دور آموزشهای بیشتری در زمینه وب و طراحی گرافیک بروی وب سایت قرار خواهد گرفت.
یا حق
دانلود آموزش (کیفیت بالا) (http://animators.blip.tv/file/get/Animators-webDesignPart14389.mp4)
دانلود آموزش (کیفیت پایین) (http://animators.blip.tv/file/get/Animators-webDesignPart14651.mp4)
دانلود آموزش ( برای مشاهده بروی آیفون) (http://animators.blip.tv/file/get/Animators-webDesignPart14138.m4v)
مشاهده از طریق نرم افزار آیتونز (http://itunes.apple.com/us/podcast/animators/id355778786)
فایلهای پروژه

karimy110
چهارشنبه 24 خرداد 1391, 17:10
سلام و با تشکر از زحمتی که کشیده اید
امید وارم که در این عرصه موفق باشید و مزد این کار خوبتون رو بگیرید
خدمت شما عرض کنم که قسمت ششم از آموزش های شما وجود نداره. لطف کنید و لینک رو اصلاح کنید
با تشکر از شما

1mdfr
چهارشنبه 24 خرداد 1391, 21:29
می تونید به سایت http://cgtv.ir رفته آن را دنبال کنید

hamedara82
سه شنبه 21 شهریور 1391, 00:43
قسمت ششم

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

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

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


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


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

amirv60
سه شنبه 02 آبان 1391, 22:47
دانلود قسمت ششم
خوب همونطور که قبلا گفتم از این آموزش به بعد شروع به css کردن قالب اولیه خودمون خواهیم کرد و به شکل حرفه ای قالب وب سایت خودمون رو به یک فایل HTML تبدیل میکنیم.

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

fgcosoft
شنبه 16 دی 1391, 19:03
سلام این شرکت برای طراحی وب سایت (http://www.webpouya.com/) چطور است؟ و از چه سیستمی استفاده میکند

tarenoco
شنبه 20 اردیبهشت 1393, 10:47
میشه فایل های دانلودی رو تو یه فایل تکست قرار بدید که همش یکجا تو دسترس باشه