×
۱۳۵,۰۰۰ تومان

آموزش سی اس اس - طراحی وب با CSS - مقدماتی

آموزش سی اس اس - طراحی وب با CSS - مقدماتی

هزینه آموزش
۱۳۵,۰۰۰ تومان

تعداد دانشجو
۱,۰۴۸ نفر
مدت زمان
۴ ساعت و ۵۶ دقیقه
محتوای این آموزش
تضمین کیفیت
۷ بازخورد (مشاهده نظرات)

یک صفحه وب به طور کلی دارای دو بخش Client Side و Server Side است. بخش Client Side را می‌‌توان به سه‌بخش اساسی تفکیک کرد. برای ایجاد رابط کاربری برای صفحات HTML زبان برنامه‌نویسی CSS (Cascade Style Sheets) ایجاد گردید. این زبان مکملی برای HTML است. CSS شما را قادر می‌‌سازد تا قالب و استایل صفحات وب‌سایت خود را یک‌بار طراحی کرده و به دفعات استفاده کنید. ما صفحات HTML خود را به یک فایل CSS متصل می‌کنیم و قطعه کدهای مربوطه از این فایل خوانده و اجرا می‌‌شود. این کار باعث می‌شود تا حجم کد کمتری نوشته شود و همین‌طور کدنویسی به اصطلاح تمیزتری داریم.

آموزش سی اس اس - طراحی وب با CSS - مقدماتی

تعداد دانشجو
۱,۰۴۸ نفر
مدت زمان
۴ ساعت و ۵۶ دقیقه
هزینه آموزش
۱۳۵,۰۰۰ تومان
محتوای این آموزش
۷ بازخورد (مشاهده نظرات)

محمد عبداللهی

کارشناس ارشد مهندسي فناوری اطلاعات (IT) - معماری سازمانی

زمينه‌های کاری و تخصصی ايشان در حوزه برنامه‌نويسی و طراحی وب، طراحی، توليد و توسعه نرم‌افزارهای سازمانی، مديريت پروژه‌های توليد نرم‌افزار بوسيه چارچوب‌های چابک مانند: اسکرام و معماری سازمانی طبق چارچوب TOGAF است.

توضیحات تکمیلی

یک صفحه وب به طور کلی دارای دو بخش Client Side و Server Side است. بخش Client Side را می‌‌توان به سه‌بخش اساسی تفکیک کرد. اول ساختار صفحه است که توسط HTML ساخته، دوم شکل، شمایل و رنگ و لعاب صفحه است که در CSS تعیین و سوم منطق برنامه در سمت کلاینت است که با زبان‌های اسکریپتی مانند JavaScript مشخص و مطابق با این سه‌بخش لزوم یادگیری CSS برای طراحی وب مشخص می‌شود. 

زبان برنامه‌نویسی HTML به خوبی می‌‌تواند اجزای صفحه را ایجاد کند اما ضعف اصلی زبان HTML عدم توانایی ایجاد رابط کاربری است. برای ایجاد رابط کاربری برای صفحات HTML زبان برنامه‌نویسی CSS (Cascade Style Sheets) ایجاد گردید. این زبان مکملی برای HTML است و سعی در پر کردن خلاها و برطرف کردن نقاط ضعف زبان HTML دارد. CSS شما را قادر می‌‌سازد تا قالب و استایل صفحات وب‌سایت خود را یک‌بار طراحی کرده و به دفعات استفاده کنید. برای واضح‌‌تر شدن ماجرا، یک مثال را بیان کنیم: در نظر بگیرید که وب‌سایتی با ۱۰۰ صفحه‌ را به زبان HTML طراحی کرده‌اید، حال بعد از گذشت مدتی تصمیم دارید تا برخی خصوصیات را کمی تغییر دهید مثلا رنگ پس‌زمینه را کمی تیره‌‌تر کنید. گفتن این حرف بسیار راحت است اما در عمل کمی بحث فرق می‌کند.

تغییر یک خط کد در ۱۰۰ صفحه بسیار زمانبر است. حال اگر ما از CSS در طراحی این وب‌سایت استفاده کنیم، کافی است تا یک خط کد را در فایل خود تغییر دهیم و این تغییرات در تمامی صفحات اعمال می‌شود. در واقع ما صفحات HTML خود را به یک فایل CSS متصل می‌کنیم و قطعه کدهای مربوطه از این فایل خوانده و اجرا می‌‌شود. این کار باعث می‌شود تا حجم کد کمتری نوشته شود و همین‌طور کدنویسی به اصطلاح تمیزتری داریم.

فهرست سرفصل‌ها و رئوس مطالب مطرح شده در اين مجموعه آموزشی، در ادامه آمده است:
  • فصل یکم: شروع کار با CSS
    • درس یکم: شروع کار با CSS - بخش یکم
    • درس دوم: شروع کار با CSS - بخش دوم
  • فصل دوم: CSS را کجا و چطور بنویسیم
    • درس سوم: CSS را کجا و چطور بنویسیم - بخش یکم
    • درس چهارم: CSS را کجا و چطور بنویسیم - بخش دوم
  • فصل سوم: انتخابگرها (Selectors)
    • درس پنجم: انتخابگرهای ساده
    • درس ششم: ترکیب انتخابگرها
  • فصل چهارم: رنگ‌ها در CSS
    • درس هفتم: آشنایی با نام رنگ‌ها و سیستم رنگ‌دهی RGB
    • درس هشتم: آشنایی با سایر سیستم‌های رنگ‌دهی
  • فصل پنجم: پس‌زمینه در CSS
    • درس نهم: پس‌زمینه در CSS
    • درس دهم: تنظیمات دقیق پس‌زمینه در CSS
  • فصل ششم: جعبه‌ها، کادرها و حاشیه‌ها
    • درس یازدهم: کادرها
    • درس دوازدهم: حاشیه‌ها
    • درس سیزدهم: سايزبندی عناصر، جعبه‌ها و تنظيمات بيشتر حاشيه‌ها
  • فصل هفتم: تنظيمات متن و بلاک‌های متنی
    • درس چهاردهم: دستورات مربوط به تنظيم و تزئين Text و بلاک‌های متنی - بخش یکم
    • درس پانزدهم: دستورات مربوط به تنظيم و تزئين Text و بلاک‌های متنی - بخش دوم
    • درس شانزدهم: نحوه نمايش لينک‌ها و تنظيمات آن‌ها
  • فصل هشتم: استفاده از فونت‌ها در CSS
    • درس هفدهم: آشنايی با خانواده فونت‌ها در CSS
    • درس هجدهم: تغییر ظاهر فونت
    • درس نوزدهم: فونت‌های گوگل
    • درس بیستم: نمادها و آیکن‌های مبتنی بر فونت
  • فصل نهم: نمايش بلاک‌های متنی در صفحه
    • درس بیست‌و‌یکم: تعيين چينش عناصر و المان‌های صفحه
    • درس بیست‌و‌دوم: کنترل سرريزشدن بلاک‌های متنی و کار با خصوصيت Float
  • فصل دهم: ليست‌ها در CSS
    • درس بیست‌وسوم: نحوه نمايش ليست‌ها
  • فصل یازدهم: تنظيمات جداول در CSS
    • درس بیست‌وچهارم: تنظيمات جداول
  • فصل دوازدهم: انتخابگرها و ترکيب‌کننده‌ها
    • درس بیست‌وپنجم: انتخابگرها و ترکيب‌کننده‌ها
  • فصل سیزدهم: جلوه‌های دوبعدی و سه‌بعدی
    • درس بیست‌وششم: جلوه‌های حرکتی در صفحه وب (خصوصیت Transition) - بخش یکم
    • درس بیست‌وهفتم: جلوه‌های حرکتی در صفحه وب (خصوصیت Transition) - بخش دوم
  • فصل چهاردهم: پویانمایی در CSS
    • درس بیست‌وهشتم: ایجاد پویانمایی 
  • فصل پانزدهم: طراحی واکنشگرا (Media Query)
    • درس بیست‌و‌نهم: طراحی واکنشگرا (Media Query)
  • فصل شانزدهم: چینش صفحه با FlexBox
    • درس سی‌ام: چینش صفحه با FlexBox

 

مفید برای
  • طراحی سایت

پیش نیاز


آنچه در این آموزش خواهید دید:

آموزش ویدئویی مورد تائید فرادرس
فایل برنامه ها و پروژه های اجرا شده

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

Visual Studio Code 1.28.2 - آموزش وابستگی به این نرم‌افزار ندارد.

پیش نمایش‌ها

۱. شروع کار با CSS - بخش یکم
۲. شروع کار با CSS - بخش دوم
۳. CSS را کجا و چطور بنویسیم؟ - بخش یکم
۴. CSS را کجا و چطور بنویسیم؟ - بخش دوم
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۵. انتخابگرهای ساده
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۶. ترکیب انتخابگرها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۷. آشنایی با نام رنگ‌ها و سیستم رنگ‌دهی RGB
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۸. آشنایی با سایر سیستم‌های رنگ‌دهی
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۹. پس‌زمینه در CSS
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۰. تنظیمات دقیق پس‌زمینه در CSS
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
این آموزش شامل ۳۱ جلسه ویدئویی با مجموع ۴ ساعت و ۵۶ دقیقه است.
با تهیه این آموزش، می‌توانید به همه بخش‌ها و جلسات آن، دسترسی داشته باشید.

راهنمای سفارش آموزش‌ها

آیا می دانید که تهیه یک آموزش از فرادرس و شروع یادگیری چقدر ساده است؟

(راهنمایی بیشتر +)

در مورد این آموزش یا نحوه تهیه آن سوالی دارید؟
  • با شماره تلفن واحد مخاطبین ۵۷۹۱۶۰۰۰ (پیش شماره ۰۲۱) تماس بگیرید. - تمام ساعات اداری
  • با ما مکاتبه ایمیلی داشته باشید (این لینک). - میانگین زمان پاسخ دهی: ۳۰ دقیقه


اطلاعات تکمیلی

نام آموزش آموزش سی اس اس - طراحی وب با CSS - مقدماتی
ناشر فرادرس
شناسه اثر ۸–۱۲۴۵۲–۰۸۰۴۵۵ (ثبت شده در مرکز رسانه‌های دیجیتال وزارت ارشاد)
کد آموزش FVH4C001
مدت زمان ۴ ساعت و ۵۶ دقیقه
زبان فارسی
نوع آموزش آموزش ویدئویی (نمایش آنلاین + دانلود)
حجم دانلود ۵۱۲ مگابایت (کیفیت ویدئو HD با فشرده سازی انحصاری فرادرس)


تضمین کیفیت و گارانتی بازگشت هزینه
توجه: کیفیت این آموزش توسط فرادرس تضمین شده است. در صورت عدم رضایت از آموزش، به انتخاب شما:
  • ۱۰۰ درصد مبلغ پرداختی در حساب کاربری شما شارژ می‌شود.
  • و یا ۷۰ درصد مبلغ پرداختی به حساب بانکی شما بازگشت داده می‌شود.
آموزش‌های مرتبط با آموزش سی اس اس - طراحی وب با CSS - مقدماتی




نظرات

تا کنون ۱,۰۴۸ نفر از این آموزش استفاده کرده اند و ۷ نظر ثبت شده است.
مصطفی
مصطفی
۱۴۰۱/۰۲/۲۷

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

فاطمه
فاطمه
۱۴۰۱/۰۲/۱۸

بسیار عالی بود. بعد از دوره html مقدماتی از استاد دیدم و قابل استفاده و مفید بود. ممنونم

پوریا
پوریا
۱۴۰۰/۱۲/۰۷

بسیار عالی. مثل دوره ی html مقدماتی که از ایشون تهیه کردم مطالب روان و جامع توضیح داده میشدن. خسته نباشید,

ساجده
ساجده
۱۴۰۰/۱۲/۰۲

مثل همه آموزش های ایشون عالی بود.ممنون از استاد عبداللهی و مجموعه فرادرس

shadi
shadi
۱۴۰۰/۱۱/۱۳

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

مجید
مجید
۱۴۰۰/۱۰/۱۴

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

معصومه
معصومه
۱۴۰۰/۱۰/۰۸

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

دسته‌بندی موضوعی: طراحی سایت
برچسب‌ها:
CSS را چطور بنویسیم | CSS را کجا بنویسیم | FlexBox in CSS | Media Query in CSS | Selectors in CSS | آموزش CSS | آموزش طراحی وب | آموزش طراحی وب با CSS | آیکن‌ های مبتنی بر فونت در CSS | المان‎ های صفحه در CSS | انتخابگرها در CSS | انتخابگرهای ساده در CSS | ایجاد پویانمایی در CSS | بلاک ‌های متنی در CSS | پس‌ زمینه در CSS | پویانمایی در CSS | ترکيب‌ کننده‌ ها در CSS | ترکیب انتخابگرها در CSS | تزئين Text در CSS | تغییر ظاهر فونت در CSS | تنظيم Tect در CSS | تنظيمات جداول در CSS | تنظيمات حاشيه‌ ها در CSS | تنظيمات لینک ها در CSS | تنظيمات متن در CSS | تنظیمات پس‌ زمینه در CSS | جعبه ‎ها در CSS | جلوه‌ های حرکتی در صفحه وب در CSS | جلوه‌ های دو بعدی در CSS | جلوه های سه ‌بعدی در CSS | چينش عناصر صفحه در CSS | چینش صفحه با FlexBox در CSS | حاشیه ‌ها در CSS | خانواده فونت ‌ها در CSS | خصوصيت Float در CSS | خصوصیت Transition در CSS | رنگ ها در css | زبان برنامه‌ نویسی CSS | زبان برنامه ‌نویسی HTML | سايزبندی عناصر در CSS | سیستم رنگ‌ دهی RGB در CSS | سیستم‌ های رنگ‌ دهی در CSS | شروع کار با CSS | طراحی واکنشگرا در CSS | طراحی وب با css | طراحی وب سایت در CSS | فونت ها در CSS | فونت‌ های گوگل در CSS | کادرها در CSS | ليست‌ ها در CSS | نام رنگ‌ ها در CSS | نحوه نمايش ليست ‌ها در CSS | نحوه نمايش لينک ‌ها در CSS | نمادهای مبتنی بر فونت در CSS
مشاهده بیشتر مشاهده کمتر
×
فهرست جلسات ۳۱ جلسه ویدئویی
×