اردیبهشت
۲۰
۱۳۹۰

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

خوب دوستان دیگه وقت اون رسیده که شروع به کد نویسی و به اصطلاح 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" /]

Related Posts

درمورد نویسنده این مطلب:

یه نفر مثل خود شما...

۶۰ Comments + Add Comment

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

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

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

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

    • باید قالب رو ببینم و کدهایی که استفاده کردید.
      همین کار و رفع عیبهاست که شما رو توی کار طراحی بهتر میکنه.
      موفق باشید

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

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

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

  • salam dadash aval ke khobi ya na ?:D
    bad amozeshe 6 ham saritar jor kon dg :D
    badam kar ba jequeri ro ham amozesh bedeh bishta to dideh

  • سلام آموزش dream wiver البته خراب نوشتم دریم ویور بیشتر بذار منتظر هستیم

  • 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!!!!

  • سلام حامد جان ، کجایی پس استاد ، ما منتظر یم ، تو رو خدا بیا آپدیت کن ، قسمت ۶ رو بزار برامون ، مردیم از انتظار.

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

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

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

  • بابا قسمت ۶ را بزار منتظریم ….

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

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

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

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

  • سلام
    حامد جون چی شد قسمت جدید طراحی سایت؟ مردیم از صبر!

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

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

  • سلام

    واقعاٌ دسدتون درد نکنه که این همه تلاش میکنین.
    انشا الله هر چی می خواین خدا بهتون بده
    موفق باشین

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

  • سلام خوبی؟
    من لینکت کردم لینکم کن با اسم ” سرگرمی ۹۸ ” http://www.sargarmi98.ir
    با تشکر

  • سلام

    دریم ویوور شما ورژنش چنده ؟

    آخه مال من ۸ هست که به جای format نوشته txte از طرفی وقتی css رو به html لینک میکنم اون بالا مثه مال شما فایل style.css اضافه نمیشه که راحت بتونم برم کدای css رو ببینم !

    http://up8.iranblog.com/images/k62jtv51toqzlck3ixb8.jpg

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

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

    تشکر

  • salam v khaste nabashid
    man nemitonam ghesmate 5 amozesh web ro download konam yani nemishe download kard chera?

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

  • فقط می تونم اینو بگم که حق استادی رو بر ما تمام کردی استاد

    یاشاسین *( استاد حامد میاحیان )* یاشاسین

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

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

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

  • سلام دوست عزیز
    من در این قسمت که باید بر روی stroke path کلیک کنم خاموشه؟؟؟چیکار کنم؟؟؟توروخدا سریع راهنمایی کنیم
    این عکسی از ایراد من هست
    http://www.axgig.com/images/68702948990347800280.png
    و راستی چطور فایل رو با چه پسوندی سیو کنم که بعدا ادامشو برم؟؟؟منتظرتونم

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

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

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

  • سلام
    لینک دانلود مشکل داره نصفه دانلود میشه لطفا چک کنید.
    ولی بقیه پارت ها درسته

  • سلام
    لینک دانلود مشکل داره

  • لطفا لینک دانلود رو درست کنید

  • لینک دانلود خرابه جان خودت درستش کن اســـــتــــاد

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

  • باسلام و تشکر
    جان مادرتون لینک دانلود رو درست کنیند خرابه!!!!!!!!!!
    لطفا سریع

    • من فایلهاشو پیدا کردم. اگه فراموش نکنم تا دو روز دیگه واستون آپلودش میکنم.

  • سلام/ خسته نباشید
    استاد مارو بدجور گذاشتی تو کف قسنت ۵ و ۶ بدادمون برس.

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

  • اقا قسمت ÷نجم وششم لینکش خرابه هر چه سریع مشکل را رفع کنید

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

  • لینک دانلود این قسمت خرابه لطفا بررسی کنید باتشکر

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

  • لینک دانلود قسمت پنجم رو درست کنین لطفاً. خیلی ممنون از سایت عالیتون.

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

  • ممنوون.خیلی زحمت کشیدین واقعا دستتون درد نکنه

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

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

دیدکاه خود را بنویسید