فروردین
۳۱
۱۳۹۰

آموزش طراحی قالب وب سایت – قسمت چهارم

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

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

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

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

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

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

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

Related Posts

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

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

۴۰ Comments + Add Comment

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

  • خیلی خیلی ممنون!
    خدا ازت راضی باشه.

  • استاد شما در بخش سی اس اس نویس اموزش میدید که چه طوری دکمه های بخش های مختلف مثل تماس با ما صفحه تبلیغات و … رو به شکلی در بیاریم که مثلا مثل همین جا بشه و یا اموزش استفاده از بخش های سیستم وردپرس مثل ضمینه اهی دلخواه و چکیده مطالب و … رو میدید؟

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

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

        خیلی خیلی ممنون.

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

        خیلی خیلی ممنون.

  • سلام حامد جان
    عزیز منم از سایت شما خوشم اومده ، به نظر میاد مایل به تبادل لینک هستم
    ایمیلتون حاوی عنوان لینکتون نبود که من ثبت کنم
    شما زحمت بکشید “نهایت گرافیک” رو با آدرس بدون www. ثبت کنید : http://mehrdaddesign.com
    ممنونم

  • سلام
    واقعا ممنون
    کلی استفاده کردیم
    واقعا کارت درسته

  • ممنون واقعا زحمت کشیدید اینکار به حوصله زیادی نیاز داره …

  • سلام .
    عالی بود اگه اجازه بدی برای دانلود روی سایت بزارم .
    با تشکر .

    • خواهش میکنم دوست من ،
      اگر دوست دارید برای دانلود روی سایتتون بزارید.
      موفق باشید

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

  • سلام حامد جان دمت گرم داداش کارت عالیه من اتفاقی به وب سایتت رسیدم کل آموزش هارو دیدم نمیدنم تا قسمت چند ادامه داره واینکه کی تموم میشه بی صبرانه منتظر قسمت های بعدی ام!
    ان شاء الله مجمو عه های بعدی رو کی میزاری رو سایت؟

  • سلام امیدوارم که حالتون خوب باشه
    خیلی زحمت می کشی دستت درد نکنه
    من تا قسمت ۳ دانلود کردم ولی قسمت ۴ مشکل داره روی ۹۸ درصد گیر میکنه لطفا کمک کنید

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

  • واقعا کارتون جای تشکر خیلی خیلی زیادی داره!!!من تا اینجا رو دیدم الان رفتم ۵ و ۶ رو دانلود کنم
    سعی میکنم سریع تر خودم رو به بچه ها برسونم
    فوق العادست کارتون!!!فوق العااااااااااااااااااده!!!
    خیلی کارتون ارزشمنده!!!!خیلییییییییییییییی!!!!میگم خیلی یعنی واقعا خیلــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــی!!!
    خیر ببینی جوون!!

  • راستی توی قسمت چهارم اولش گفتید با بخش سوم از ….:D
    ببینید چه شاگردای دقیقی دارید

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

  • سلام
    مرسی… اما پس بخش سوم چی شده؟

  • سلام

    چگونه می توان برای گروه یاهو قالب درست کنیم و کد آنرا در کدام قسمت صفحه یاهو پست می شود ؟
    اگر کسی می دونه برم خبر بده خیلی ها خوشحال خواهم شد

    jamshed_222@yahoo.com

  • سلام پس قسمت ۳ کو؟

  • جدا آموزش های این بخش حرف نداشت….
    فردا برم مدرسه به همه ی دوستام معرفی میکنم…
    موفق باشی حامد جان
    ___________________________________________

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

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

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

  • دوست عزیز لینک بخش سوم نیستش
    میشه لینکشو بدید

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

  • رفیق آموزش های ۴۰۴ شدند
    لینک دیگه ای ازشون نداری ؟

  • سلام لینک مدیا فایر ایراد داره

  • سلام
    روزتون به خیر واقعا سایت خوبی دارید مفید عالی
    من آدرس سایت شما رو به سایتم پیوند داده ام
    سایت نیست وبلاگه میگم سایت چون ارزش وبلاگم نیاد پایین :)
    بدون اجازه شما من بعضی از مطالبتون رو در سایتم قرار دارم اومدم بپرسم مانعی داره یا اینکه نه مانعی نداره؟؟؟
    اگه مانعی داره مطالبتون رو از وبلاگم پاک کنم؟؟؟
    با تشکر از سایت مفیدتون

  • salam ghesmate 3 kojast ? nadare ghesmate 3 ?mamnon misham begid

  • مرسی از فیلم آموزشیتون ولی چون تا قسمت ۴ دیدم این سوالا رو دارم اگه میشه جواب بدین چون عشق طراحی وبم
    ۱٫اگه بخوام برا بکگراند سایت از عکس استفاده کنم تو فتوشاپ انجام بدم یا تو سی اس اس؟

    ۲٫چون سایتی که قصد ساختشو دارم یکم پیچیدست مث سایت آموزشیتون نیس و صفحه اولش بیشتر لینکه میخواستم بدونم اینجوری باشه به مشگل بر نمیخورم؟مث لینکه زیر
    http://gamer-city.ir/main/

    3.قالب من اینه میتونم با آموزشاتون رو همین کار کنم؟ چون خیلی از طرحم خوشم میاد-چون سریع درس کردم حجمشو دس نزدم شرمنده اگه دیر
    باز میشه
    http://gamer-city.ir/ghaleb/

    4.یه ایده دارم که تو هیچ سایتی ندیدم میشه بجای متن فیلد از فلش استفاده کنم؟ مث لینک زیر
    http://gamer-city.ir/flash/

    5.یه قسمت از سایتم قراره به صورت زیر باشه یعنی قسمت بالا مثلا آخرین اخبار پایینش خبرای دیگه باشه اینم میتونم با آموزشاتون انجام بدم؟
    http://gamer-city.ir/chideman/

    6.و آخریش اینه که برا ادامه مطلب اگه بخوام از عکس استفاده کنم تو فتوشاپ اسلایس کنم یا تو دریم ویور بزارمش
    http://gamer-city.ir/black.gif

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

  • همشهری دانلود نمیشه .تمام لینک ها ی دانلود سایتتون این ارور میده The requested URL /Animators-Painting851.mp4 was not found on this server.

  • با سلام
    ممنون عالی بود

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

  • خیلی خوب بود

    یه سوال

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

    نشون میده

  • واقعاً خدا قوت، خیلی کارتون درسته.
    شاد و سلامت باشید.
    خدا نگهدارتون

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

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