Loading…

جزیره طراحی و توسعه وب

دوره آموزشی طراحی وب (HTML و CSS و JavaScript) :: قسمت بیستم - آشنایی با مفهوم Grid System و مزیت های آن در طراحی وب
9,500 تومان

برای پرداخت هزینه این فیلم آموزشی در سایت ثبت نام کرده و وارد سایت شوید

دوره آموزشی طراحی وب (HTML و CSS و JavaScript) :: قسمت بیستم - آشنایی با مفهوم Grid System و مزیت های آن در طراحی وب
شما می توانید سه دقیقه از زمان آموزش را به صورت رایگان مشاهده کنید. برای مشاهده این فیلم آموزشی به صورت کامل می بایست هزینه آن را پرداخت کنید
ارسال کننده: حسین احمدی
حسین احمدی ، بنیانگذار ITPRO ، توسعه دهنده وب و برنامه نویس ، بیش از 12 سال سابقه فعالیت حرفه ای در سطح کلان ، مشاور ، مدیر پروژه و مدرس نهادهای مالی و اعتباری ، تخصص در پلتفرم دات نت و زبان سی شارپ ، طراحی و توسعه وب ، امنیت نرم افزار ، تحلیل سیستم های اطلاعاتی و داده کاوی ...
کاربران برتر
نرم افزار Help desk  دانا
توضیحات
در قسمت بیستم از دوره آموزشی طراحی وب به سراغ مبحث Grid System میرویم. این مبحث یکی از مهمترین مباحث در طراحی وب بوده و علاقه مندان به طراحی وب با درک صحیح این مطلب می توانند با روشی اصولی در طراحی Layout صفحات وب آشنا شوند و به راحتی Layout صفحات را طراحی کنند. در این مبحث به بررسی سیستم گرید در سایز 960 خواهیم پرداخت و با مفهامی مانند سطر ها و ستون ها در Grid System آشنا می شویم. مباحث آموزش داده شده در این قسمت:

  1. آشنایی اولیه با Grid System و مزایای استفاده از آن
  2. بررسی ساختار Grid System در سایز 960 پیکسل
  3. بررسی مفاهیم container و row و column در grid system
  4. آشنایی با مفاهیم Guids و Grids در Photoshop و انجام تنظیمات مربوط به آن ها
  5. آماده سازی محیط Photoshop برای طراحی وب سایت مبتنی بر Grid System
  6. پیاده سازی Layout بر اساس Grid System در Photoshop به صورت خیلی ابتدایی
  7. نحوه محاسبه اندازه سطر ها و ستون ها بر اساس Pixel و Percent
  8. نوشتن کدهای CSS مربوط به Grid System (یکبار نوشتن کدهای Grid System و استفاده در کلیه طراحی ها)
  9. دلیل استفاده از درصد در مشخص کردن اندازه ستون ها
  10. آشنایی با سایت 960.gs و فایل های آماده Grid System در این سایت
  11. آشنایی با Action ها در فتوشاپ و استفاده از اکشن های سایت 960.gs

تصاویری از محیط آموزش:

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


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


تهیه کننده: حسین احمدی
منبع: ITpro
مدت زمان کل آموزش: 14 ساعت و 9 دقیقه
دیدگاه ها
  • ارسال توسط:
  • زمان ارسال: 2 ماه قبل
سلام
فوق العاده عالی بودش خسته نباشید مهندس
  • ارسال توسط:
  • زمان ارسال: 2 ماه قبل
سلام مهندس متشکر از اموزش بسیار عالی تون
witdh اسکرین های کامپیوتر های مختلف خوب الان متفاوته برای یکی ممکنه این 960 نباشه یکی عین خودم 1920پیکسل باشه.
باید برای همچین رزولوشن هایی چی کار کنیم دقیقا. بیایم بگیم 960 پیکسل وسط این 1920 پیکسل رو در نظر بگیر یا اینکه چون طول این اسکرین ها بزرگتره دیگه از گرید سیستم 960 استفاده نکن.

سلام و عرض ادب، در مورد طول صفحه طراحی شده کاملاً به خود شما بستگی داره، شما می تونید به صورت Fluid طراحی کنید که بر اساس طول صفحه نمایش به صورت درصدی طول اضافه بشه و شاید به صورت ثابت سایز 960 رو انتخاب کنید. این کاملاً به شما و مالک سایت بستگی داره، برای مثال سایت ITPRO در صفحه نمایش های بزرگ سایز ثابتی داره و با کوچیک کردن صفحه نمایش بر اساس اندازه صفحه نمایش سایت تغییر میکنه که این برمیگرده به موضوع طراحی Responsive، اما در سایز های بزرگ خودتون تصمیم گیری می کنید.
  • ارسال توسط:
  • زمان ارسال: 1 ماه قبل
سلام استاد
این آموزش هاتون رو ادامه نمیدید دیگه؟
سلام، این هفته سه قسمت بعدی تو سایت قرار میگیره.
  • ارسال توسط:
  • زمان ارسال: 1 ماه قبل
خیلی ممنون
استاد احمدی با توجه به اینکه برنامه نویس سایت جنابعالی هستید تو یه پست استاد نصیری یه اشکالاتی از سایت رو مطرح کردم با اجازتون به شما هم در این پست می فرستم.
"سلام استاد
سایتتون کار کردن باهاش کمی سخته .
برای پیدا کردن این دوره تون (mcsa)مجبور شدم برم تو پروفایلتون تا بگردم اخرین پستی که در این مطلب گذاشتید رو پیدا کنم.
اولا که این دوره جز مجموعه دوره ها نشون نمیده که بشه از اونجا انتخابش کرد.
ثانیا روی آیکن سرچ سایتتون کلیک می کنم یه مگا منو باز میشه میخوام سرچ بزنم تا روی سرچ باکسش کلیک می کنم که بنویسم کلا مگا منوی سرچ میره و سرچ باکس سایتتون نمیشه توش چیزی تایپ کرد و جست و جو کرد.
بعدش هم توی دوره ها که اون تو یه صفحه میاد بهتر بود بنظرم به تفکیک اساتید هم میشد دوره ها رو دید."
  • ارسال توسط:
  • زمان ارسال: 1 ماه قبل
ضمن اینکه همین الان جناب عالی یه کامنت گذاشتید من 3-4 تب تو مرورگرم از ای تی پرو باز کردم وقتی تو یه تک کامنت شما رو دیدم نباید دیگه تو تب های دیگه میرم نوتیفیکیشن بده و هم صدای نوتیفیکیشن بده که الان این مشکل هم هست و ان شاء الله این رو هم درست کنید.
همچنین در نوتیفیکیشن ها من ممکنه عین فیس بوک بخوام به نوتیفیکیشن های سابقم که دیدم دسترسی داشته باشم این امکان الان اینجا وجود نداره صرفا تیک نوتیفیکشن رو بزنم دیگه اون رو بهم نشون نمیده
برای ارسال نظر وارد شوید.