در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش طراحی وب صفر تا صد قسمت 21 : آشنایی با Grid System

آموزش طراحی وب صفر تا صد قسمت 21 : آشنایی با Grid System

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

شما می توانید 3 دقیقه از این ویدیو را به صورت رایگان مشاهده کنید

در قسمت بیستم از دوره آموزشی طراحی وب به سراغ مبحث 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
#آموزش_html_و_css #دوره_طراحی_وب_سایت #ایجا_layout_صفحات_وب #آموزش_طراحی_وب_سایت #کار_با_action_ها_در_فتوشاپ #grid_system_در_طراحی_وب #guid_ها_و_grid_ها_در_فتوشاپ
عنوان
1 آموزش طراحی وب صفر تا صد قسمت 1 : مقدمه ای بر دوره 23′:39″ رایگان
2 آموزش طراحی وب صفر تا صد قسمت 2 : ساختار HTML 32′:29″ 5,500
3 آموزش طراحی وب صفر تا صد قسمت 3 : قالب بندی متن ها 41′:38″ 5,500
4 آموزش طراحی وب صفر تا صد قسمت 4 : ماهیت برچسب ها در HTML 50′:55″ 6,600
5 آموزش طراحی وب صفر تا صد قسمت 5 : استفاده از Link ها 37′:28″ 4,400
6 آموزش طراحی وب صفر تا صد قسمت 6 : کار با تصاویر در HTML 27′:0″ رایگان
7 آموزش طراحی وب صفر تا صد قسمت 7 : کار با جداول در HTML 36′:56″ 4,400
8 آموزش طراحی وب صفر تا صد قسمت 8 : فرم ها و ورود اطلاعات 54′:58″ 8,250
9 آموزش طراحی وب صفر تا صد قسمت 9 : آشنایی اولیه با CSS 48′:21″ رایگان
10 آموزش طراحی وب صفر تا صد قسمت 10 : کار کردن با فونت و متن در CSS 32′:47″ 5,500
11 آموزش طراحی وب صفر تا صد قسمت 11 : بک گراند در CSS 21′:0″ 4,400
12 آموزش طراحی وب صفر تا صد قسمت 12 : Display و Visibility در CSS 11′:39″ رایگان
13 آموزش طراحی وب صفر تا صد قسمت 13 : مفهوم BoxModel 31′:15″ 7,700
14 آموزش طراحی وب صفر تا صد قسمت 14 : Position ها در HTML و CSS 27′:31″ 6,600
15 آموزش طراحی وب صفر تا صد قسمت 15 : استفاده از Pseudo Class ها 18′:36″ رایگان
16 آموزش طراحی وب صفر تا صد قسمت 16 : ایجاد Navigation ها 16′:3″ 5,500
17 آموزش طراحی وب صفر تا صد قسمت 17 : ایجاد منوهای کشویی با HTML 21′:48″ 5,500
18 آموزش طراحی وب صفر تا صد قسمت 18 : ایجاد Mega Menu ها 9′:13″ رایگان
19 آموزش طراحی وب صفر تا صد قسمت 19 : خاصیت Float و Layout 34′:23″ 7,150
20 آموزش طراحی وب صفر تا صد قسمت 20 : آشنایی با Pseudo Element ها 15′:52″ رایگان
21 آموزش طراحی وب صفر تا صد قسمت 21 : آشنایی با Grid System 1:5′:29″ 10,450
22 آموزش طراحی وب صفر تا صد قسمت 22 : آموزش CSS Reset 6′:32″ رایگان
23 آموزش طراحی وب صفر تا صد قسمت 23 : آشنایی اولیه با HTML5 34′:56″ 4,070
24 آموزش طراحی وب صفر تا صد قسمت 24 : طراحی وب سایت خبری : بخش 1 47′:39″ 5,500
25 آموزش طراحی وب صفر تا صد قسمت 25 : استفاده از Font-Face در CSS 15′:57″ رایگان
26 آموزش طراحی وب صفر تا صد قسمت 26 : طراحی وب سایت خبری : بخش 2 1:2′:1″ 7,700
27 آموزش طراحی وب صفر تا صد قسمت 27 : طراحی وب سایت خبری : بخش 3 37′:24″ 3,300
28 آموزش طراحی وب صفر تا صد قسمت 28 : مقدمه ای بر CSS3 21′:0″ رایگان
29 آموزش طراحی وب صفر تا صد قسمت 29 : Background و Color در CSS3 23′:45″ 4,400
30 آموزش طراحی وب صفر تا صد قسمت 30 : آشنایی با Gradient ها در CSS3 17′:9″ رایگان
31 آموزش طراحی وب صفر تا صد قسمت 31 : کار با سایه ها در CSS3 21′:25″ 6,050
32 آموزش طراحی وب صفر تا صد قسمت 32 : خصوصیت های کار با متن در CSS3 10′:48″ رایگان
33 آموزش طراحی وب صفر تا صد قسمت 33 : Transform ها در CSS3 18′:2″ 4,950
34 آموزش طراحی وب صفر تا صد قسمت 34 : آشنایی با محیط سه بعدی (3D) 17′:11″ 4,950
35 آموزش طراحی وب صفر تا صد قسمت 34 : Transition در CSS3 15′:51″ رایگان
36 آموزش طراحی وب صفر تا صد قسمت 36 : ایجاد مکعب سه بعدی (3D Cube) 20′:23″ 6,050
37 آموزش طراحی وب صفر تا صد قسمت 37 : ایجاد Animation در CSS3 23′:28″ 5,500
38 آموزش طراحی وب صفر تا صد قسمت 38 : Multiple Columns 16′:21″ رایگان
39 آموزش طراحی وب صفر تا صد قسمت 39 : آشنایی با Flexbox در CSS3 18′:27″ رایگان
40 آموزش طراحی وب صفر تا صد قسمت 40 : طراحی واکنشگرا یا Responsive 33′:35″ 9,790
41 آموزش طراحی وب صفر تا صد قسمت 41 : آشنایی با تکنیک Sprite Images 20′:5″ 4,950
42 آموزش طراحی وب صفر تا صد قسمت 42 : آشنایی با Font Awesome 19′:38″ رایگان
43 آموزش طراحی وب صفر تا صد قسمت 43 : آشنایی با تکنیک Flipcard 13′:26″ 4,290
44 آموزش طراحی وب صفر تا صد قسمت 44 : تکنیک Hover Effect 17′:23″ رایگان
45 آموزش طراحی وب صفر تا صد قسمت 44 : آموزش جاوااسکریپت (JavaScript) 15′:49″ رایگان
46 آموزش طراحی وب صفر تا صد قسمت 46 : مفاهیم اولیه در جاوا اسکریپت 20′:10″ رایگان
47 آموزش طراحی وب صفر تا صد قسمت 47 : نوع های داده و عملگرها 42′:24″ 8,250
48 آموزش طراحی وب صفر تا صد قسمت 48 : مباحث تکمیلی نوع های داده 30′:15″ رایگان
49 آموزش طراحی وب صفر تا صد قسمت 49 : آشنایی با حلقه ها (Loops) 21′:0″ 4,950
50 آموزش طراحی وب صفر تا صد قسمت 50 : دستورات کنترلی if و switch 19′:31″ رایگان
51 آموزش طراحی وب صفر تا صد قسمت 51 : آشنایی با توابع (Functions) 18′:34″ 5,500
52 آموزش طراحی وب صفر تا صد قسمت 52 : آموزش کار با DOM 40′:16″ 9,350
53 آموزش طراحی وب صفر تا صد قسمت 53 : آموزش کار با DOM 14′:15″ 4,950
54 آموزش طراحی وب صفر تا صد قسمت 54 : آموزش کار با DOM 5′:31″ رایگان
55 آموزش طراحی وب صفر تا صد قسمت 55 : آموزش کار با DOM 54′:9″ 8,800
56 آموزش طراحی وب صفر تا صد قسمت 56 : آشنایی با BOM 28′:25″ رایگان
57 آموزش طراحی وب صفر تا صد قسمت 57 : کار با فرم ها در JavaScript 34′:19″ 4,950
58 آموزش طراحی وب صفر تا صد قسمت 58 : آموزش Timing Events 12′:16″ رایگان
59 آموزش طراحی وب صفر تا صد قسمت 59 : چند مثال کاربردی JavaScript 32′:45″ 4,950
زمان و قیمت کل 26:21′:5″ 210,650
14 نظر
ابوالفضل رهنما

سلام

فوق العاده عالی بودش خسته نباشید مهندس

zappy

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

witdh اسکرین های کامپیوتر های مختلف خوب الان متفاوته برای یکی ممکنه این 960 نباشه یکی عین خودم 1920پیکسل باشه.

باید برای همچین رزولوشن هایی چی کار کنیم دقیقا. بیایم بگیم 960 پیکسل وسط این 1920 پیکسل رو در نظر بگیر یا اینکه چون طول این اسکرین ها بزرگتره دیگه از گرید سیستم 960 استفاده نکن.

برای مشاهده نظرات مدرس باید این ویدیو را خریداری کنید.

zappy

سلام استاد

این آموزش هاتون رو ادامه نمیدید دیگه؟

برای مشاهده نظرات مدرس باید این ویدیو را خریداری کنید.

zappy

خیلی ممنون

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

"سلام استاد

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

برای پیدا کردن این دوره تون (mcsa)مجبور شدم برم تو پروفایلتون تا بگردم اخرین پستی که در این مطلب گذاشتید رو پیدا کنم.

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

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

بعدش هم توی دوره ها که اون تو یه صفحه میاد بهتر بود بنظرم به تفکیک اساتید هم میشد دوره ها رو دید."

zappy

ضمن اینکه همین الان جناب عالی یه کامنت گذاشتید من 3-4 تب تو مرورگرم از ای تی پرو باز کردم وقتی تو یه تک کامنت شما رو دیدم نباید دیگه تو تب های دیگه میرم نوتیفیکیشن بده و هم صدای نوتیفیکیشن بده که الان این مشکل هم هست و ان شاء الله این رو هم درست کنید.

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

__ERROR__

سلام استاد احمدی عزیز ممنون بابت آموزش خوبتون در بخش طراحی وب سوالی که داشتم در بخش Grid System وقتی شما میخواین offset-3 را تعیین کنین مقداری که قرار میدین فرق داره با مقداری که شما خودتون بخش Grid System را در طراحی سایت خبری و کد نویسی ان را اعمال میکنید ممنون میشم یه راهنمایی کنید از چه روشی استفاده کردید چون اعداد فرق داره برای مثال شما برای offset-3 فرمودین که باید margin-left صفحه رو که به صورت درصد بدست آوردیم دو بار با مقدار col-3 جمع میبندیم اما جواب های شما متفاوت بود ممنون راهنمایی کنید درگیر این مسئله شدم ، عکس های مربوطه را نیز ظمیمه میکنم براتون با تشکر از وقتی که برای آموزش میگذارید.

بخش آموزشی Grid System

وب سایت توسینسو

بخش آموزش قسمت 25 ام

وب سایت توسینسو

برای مشاهده نظرات مدرس باید این ویدیو را خریداری کنید.

__ERROR__

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

ممنون میشم واضح تر بیان کنین استاد

__ERROR__

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

برای مشاهده نظرات مدرس باید این ویدیو را خریداری کنید.

__ERROR__

ممنون بابت پاسختون متوجه موضوع شدم.

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

با سپاس فراوان

قسمت پانزدهم navigation ها

میلاد کنعانیان

استاد عزیز سلام

واقعا ممنونم، خیلی عالی و کامل توضیح میدید

بسیار بسیار ممنون. این آموزشها واقعا جای تشکر و قدر دانی دارد

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....