Computer Graphic TV

آموزشهای گرافیک کامپیوتری به صورت چندرسانه ای

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

می 10, 2011, توسط حامد میاحیان, دسته بندی طراحی وب

خوب دوستان دیگه وقت اون رسیده که شروع به کد نویسی و به اصطلاح CSS کردن قالب خودمون کنیم.

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

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

به هر حال!

من در این آموزش مقدمات کار با CSS رو به شما یاد خواهم داد اینکه چگونه:

- فایل CSS رو به صفحه HTML لینک کنید.

- چگونه رنگ پس زمینه ، فونتها و … رو تغییر بدید.

- چگونه نوشته ها رو راست چین ، چپ چین یا وسط چین کنید.

- چگونه یک div ایجاد کنید و خصوصیات اون رو در سی اس اس تعریف کنید.

و…

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

دانلود ویدیوی آموزشی (سرور مدیافایر)

دانلود ویدئوی آموزشی

مشاهده از طریق آیفون ( شما میتوانید با استفاده از گوشی آیفون وارد سایت شوید و آموزشهای سایت رو به صورت آنلاین بروی آیفون مشاهده کنید)

مشاهده از طریق نرم افزار آیتونز

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

[hana-flv-player video="http://animators.blip.tv/file/get/Animators-WebDesignPart5873.mp4" width="400" height="330" description="" player="4" autoload="true" autoplay="false" loop="false" autorewind="true" /]

۶۰ Comments

  1. EDrisCG |

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

    پاسخ دادن
  2. رضا کیانوش |

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

    /………………………… /
    /………………………… /
    /………………………… /
    /………………………… /
    /………………………… /
    /………………………… /
    ………………………..
    ………………………..
    ………………………..
    ………………………..
    ………………………..
    ………………………..

    الان اگه این / رو همون عکس فرض کنیم و . نقطه ها رو نوشته هام اینطوری میشه یعنی عکس همون جا میمونه و دیگه برای خط های بعد تکرار نمیشه ابعاد عکس رو هم اگر ۲۰۰ در ۲۰ بگیریم باید بعد از تموم شدن دوباره همون عکس بیاد پایین تکرار بشه تا جاهای خالی پر شن ولی نمیدونم باید چه طوری اینکار رو بکنم اگر کمک کنید ممنون میشم

    پاسخ دادن
  3. میلاد |

    سلان حامد جان از این که به وبلاگم سر زدی ممنونم ، حامد جان بی صبرانه منتظر قسمت ۶ مشم ، هر ۵ دقیقه سایت چک می کنم ببینم آپلود کردی یا نه ،… دمت گرم خدایی ، کمک خاستی من هستم ، من C#.net کار هستم …خوشحال میشم کمک کسی مثل تو بکنم ، وقعا کارت عالیه.

    پاسخ دادن
  4. رضا کیانوش |

    سلام استاد
    مشگل عکس حل شد باید عکس رو به عنوان بک گراند قرار میدادم تا حل میشد و هر با که نوشته ها زیاد میشدن عکس هم چون ک گراند هست هی پایین میاد.
    یه مشگل دیگه پیش اومده اونم اینه که تمام عکس ها از ۴ طرف با هم فاصله پیدا کردن این عکس رو ببینید و راهنماییم کنید ممنون
    http://www.up.alborzdownload.com/images/2qfywz23gmgv1bfqodt3.jpg

    پاسخ دادن
  5. h |

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

    پاسخ دادن
  6. salar |

    salam va khaste nabashid az shoma doos aziz babat in amoozeshe aali faghat mikhastaam age mataleb roo saritar upload konid mamnon misham chon niaz daram be in amoozesh 1!!!!

    پاسخ دادن
  7. رضا کیانوش |

    سلام استاد
    این اموزشی که دارید میدید البته بخش پیاده سازی قالب رو میگم قصد دارید html کار کنید؟نمیشه php کار کنید چون الان قالب سایت من php هست و اگه بخوام فالبی رو که با اموزش های شما طراحی کردم بزارم رو سایت باید با کلی ۴۰۴ مواجه شم البته ارههایی هست که ۴۰۴ نشه ولی به اونها اطمینان نیومده اگر هم لطف کنید هر دو رو یعنی هم html و هم php رو اموزش بدید که خیلی خوب میشه.
    در ضمن منظورتون رو از لواشکی که به عنوان پذیرایی داده بودید رو هم همون اول فهمیدم…

    پاسخ دادن
  8. میلاد |

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

    پاسخ دادن
  9. A |

    سلام
    ممنون از آموزش هاتون
    چقدر خوبه اگر در مورد ویرایش/ترجمه قالب های بلاگ هم مطلب بزارید
    تشکر و خسته نباشید

    پاسخ دادن
    • حامد میاحیان |

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

      پاسخ دادن
  10. رضا کیانوش |

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

    پاسخ دادن
  11. محمدرضا |

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

    پاسخ دادن
  12. seyed |

    سلام
    اگر ممکن هست یه پل ارتباطی خصوصی بذار..
    یه شماره ای ایمیلی چیزی…
    با تشکر از این همه زحمتی که کشیدی.

    پاسخ دادن
  13. محمدعلی حاجیان |

    سلام حامدعزیز
    ازاینکه وقت برای دوستانت گذاشتی وآموزش های مختلفی ازجمله آموزش طراحی سایت بی نهایت ممنون وسپاسگزارم
    اگرممکن است این سئوال منوجواب بده ممنون میشم
    اگه ازسرویسIISکه درویندوزموجودهست درزمینه طراحی سایت استفاده بشه به نظرشماخوبه؟
    درضمن دراین زمینه هم اگه ممکنه راهنمایی وارشادکن
    باتشکرفراوان

    پاسخ دادن
  14. مهدی هاشمیان |

    سلام کارت عالیه دمت گرم فقط یه لطفی بکن و این قسمت رو درستش کن چون فکر کنم مشکل داره(قسمت ۵)

    تشکر

    پاسخ دادن
  15. محمدعلی حاجیان |

    سلام حامدعزیزاستادگرانقدر
    نزدیک به یک سال است روش های مختلفی که درسایت هاآموزش کدنویسی وساخت وب سایت رامی دهندتجربه کرده ام
    درحال حاضردرانتهای درس ینجم ساختن وب سایت دراین سایت واقعاًممتازهستم درس هاروان واستفاده ازCssرابرای htmlبااین روش عالی راتجربه نکرده بودم درحدفوق عالی آموزش می دهی من که ازشماخیلی تشکرمی کنم موفق وپیروزوسلامت باشید منتظرساختن hederمتحرک هستم که ازطریق شماآموزش ببینم
    خدانگهدار

    پاسخ دادن
  16. مرتضی |

    سلام
    یه قالب طراحی شده برای وردپرس که کدهای css و html رو داره
    میخوام که این قالب رو برای بلاگفا ترجمه بشه
    آیا شما این کار رو انجام میدید و یک هزینه ای رو در نظر بگیرید
    با تشکر

    پاسخ دادن
  17. الناز |

    سلاح استاد من تازه این ویدو هارو پیدا کردم عالین بخدا دمتون گرم!
    فقط الان قسمت ۵ هستم تو این قسمت cssواسه div که جدا میکنم کار نمیکنه اصلا روش اعمال نمیشن همون کارا که شما میکنم اما هیچکدوم نمیشه توروخدا کمکم کنین

    پاسخ دادن
  18. مهدی |

    سلام
    حالت چطوره؟ خوبی؟
    آقا من این style.css رو لینک میکنم فقط کد رو اضافه میکنه و چیز دیگه ای نمیاره و نمیتونم چیزی بنویسم
    ورژن دریمویورم CS5 هستش مثل خودت
    میشه سریع تر راهنماییم کنی؟

    پاسخ دادن
  19. ehsan |

    بازم نفهمیدم داداش؟؟؟دیشب چهار ساعت روش کار کردم تا اونجا رسیدم و بعد هر کاری کردم stroke فعال نشد خاموش بودش عصابم داغون شد و نفهمیدم دیگه چیکار کنم stroke فعال بشه؟؟؟منتظرتونم

    پاسخ دادن
  20. ehsan |

    سلام من روش ۴ ساعت دیشب کار کردم و به قسمت stroke که رسیدم خاموش بود و کلیک میکردی کلیک نمیشد !!!!
    نمیدونم چیکار کنم من از ۱ تا ۱۴ رو دانلود کردم خواهشا توضیح بدید ممنون میشم اگه با عکس بهم توضیح بدید و منتظرتونم

    پاسخ دادن
  21. یک طراح |

    سلام
    آموزش هاتون خیلی عالیه واقعا ازتون ممنونیم!
    فقط اگر درزمینه فلش و اکشن اسکریپت هم آموزشی دارید لطفا بذارید روی سایت
    با تشکر

    پاسخ دادن
  22. erfan |

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

    پاسخ دادن
  23. Core Atom |

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

    پاسخ دادن
  24. jalal |

    سلام به شما دوست عزیز
    لینک مستقیم فایل مشکل داره
    ممنون از زحماتی که برای این ویدئو کشیدی

    پاسخ دادن
  25. فریدون |

    سلام حامد جان. آموزشهات خیلی عالی بود.
    تا قسمت ۵ یعنی کار با دریم ویور پیش رفتم ولی اینجا یه مشکلی دارم لطفا راهنماییم کن. اونجایی که میگی دریم ویور خودش حدس میزنه کد رو (Ctrl+Space) رو که میزنم کدها رو نمیاره حتی از منوی ادیت هم رفتم و گزینه show code hints رو زدم ولی بازم نشد. اگر این نیاد همه کدهارو باید خودم بنویسم که هم سخته هم اشتباه پیش میاد. لطفا راهنماییم کنین!!!!

    پاسخ دادن
  26. elahe |

    سلام و خسته نباشید.. بسیار ممنونم از آموزشهای خوبی که میزارید.
    اقای میاحیان من از دریم ویور Cs3 استفاده میکنم و زمانی که میخوام فایل css رو attach کنم نمیشه! و مثل اموزش شما کنار فایل source code، فایل css style ظاهر نمیشه که هربار بتونم تغییراتی رو در فایل css بدم!
    باید چیکار کنم؟
    ممنون میشم پاسخ بدید!

    پاسخ دادن

خب ، نظر شما چیه؟

Switch to our mobile site