یک صفحه وب به طور کلی دارای دو بخش Client Side و Server Side است. بخش Client Side را می‌‌توان به سه‌بخش اساسی تفکیک کرد. برای ایجاد رابط کاربری برای صفحات HTML زبان برنامه‌نویسی CSS (Cascade Style Sheets) ایجاد گردید. این زبان مکملی برای HTML است. CSS شما را قادر می‌‌سازد تا قالب و استایل صفحات وب‌سایت خود را یک‌بار طراحی کرده و به دفعات استفاده کنید. ما صفحات HTML خود را به یک فایل CSS متصل می‌کنیم و قطعه کدهای مربوطه از این فایل خوانده و اجرا میشود. این کار باعث میشود تا حجم کد کمتری نوشته شود و همین‌طور کدنویسی به اصطلاح تمیزتری داریم.
آموزش سی اس اس - طراحی وب با CSS - مقدماتی
زمينه‌های کاری و تخصصی ايشان در حوزه برنامه‌نويسی و طراحی وب، طراحی، توليد و توسعه نرم‌افزارهای سازمانی، مديريت پروژه‌های توليد نرم‌افزار بوسيه چارچوب‌های چابک مانند: اسکرام و معماری سازمانی طبق چارچوب 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
مفید برای
- طراحی سایت
پیش نیاز
آنچه در این آموزش خواهید دید:
نرم افزارهای مرتبط با آموزش
پیش نمایش‌ها
۱.
شروع کار با CSS - بخش یکم
۲.
شروع کار با CSS - بخش دوم
۳.
CSS را کجا و چطور بنویسیم؟ - بخش یکم
۴.
CSS را کجا و چطور بنویسیم؟ - بخش دوم
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۵.
انتخابگرهای ساده
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۶.
ترکیب انتخابگرها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۷.
آشنایی با نام رنگ‌ها و سیستم رنگ‌دهی RGB
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۸.
آشنایی با سایر سیستم‌های رنگ‌دهی
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۹.
پس‌زمینه در CSS
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۰.
تنظیمات دقیق پس‌زمینه در CSS
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
راهنمای سفارش آموزش‌ها
.svg)
در مورد این آموزش یا نحوه تهیه آن سوالی دارید؟
- با شماره تلفن واحد مخاطبین ۵۷۹۱۶۰۰۰ (پیش شماره ۰۲۱) تماس بگیرید. - تمام ساعات اداری
- با ما مکاتبه ایمیلی داشته باشید (این لینک). - میانگین زمان پاسخ دهی: ۳۰ دقیقه
اطلاعات تکمیلی
| نام آموزش | آموزش سی اس اس - طراحی وب با CSS - مقدماتی |
|---|---|
| ناشر | فرادرس |
| شناسه اثر | ۸–۱۲۴۵۲–۰۸۰۴۵۵ (ثبت شده در مرکز رسانه‌های دیجیتال وزارت ارشاد) |
| کد آموزش | FVH4C001 |
| مدت زمان | ۴ ساعت و ۵۶ دقیقه |
| زبان | فارسی |
| نوع آموزش | آموزش ویدئویی (نمایش آنلاین + دانلود) |
| حجم دانلود | ۵۱۲ مگابایت (کیفیت ویدئو HD با فشرده سازی انحصاری فرادرس) |
- ۱۰۰ درصد مبلغ پرداختی در حساب کاربری شما شارژ میشود.
- و یا ۷۰ درصد مبلغ پرداختی به حساب بانکی شما بازگشت داده میشود.
نظرات
بسیار دوره خوبیه، جناب عبداللهی بی نهایت با فنون تدریس آشنایی دارن و محتوایی که انتقال میدن رو به درستی انتقال میدن. شما با دیدن دوتا دوره ویدئویی html و css به راحتی میتونید طراحی قالب خوبی داشته باشید و یک سایت قالب بندی شده با جلوه های حرکتی داشته باشید.
بسیار عالی بود. بعد از دوره html مقدماتی از استاد دیدم و قابل استفاده و مفید بود. ممنونم
بسیار عالی. مثل دوره ی html مقدماتی که از ایشون تهیه کردم مطالب روان و جامع توضیح داده میشدن. خسته نباشید,
مثل همه آموزش های ایشون عالی بود.ممنون از استاد عبداللهی و مجموعه فرادرس
من از این آموزش راضی هستم قبلا آموزش html رو هم دیده بودم از ایشون. عالی بود.
تشکر میکنم از استاد عبداللهی و مجموعه فرادرس.
من آموزش HTML و جاوااسکریپت ایشون رو هم گرفتم. فن و لحن بیان استاد بسیار شیوا و واضح هست و به مطالب کاملا مسلط هستند. به هیچ وجه آدم احساس خستگی نمیکنه. ممنون از استاد عبدالهی و فرادرس
من خیلی راضی هستم. تا الآن نصف آموزش رو دیدم. و هر چیزی که یاد میگیرم روی قالبی که در آموزش اچ تی ام ال از همین استاد محترم یاد گرفتم و ساختم پیاده‌سازی میکنم و جلو میرم. واقعا عالی و کاربردیه. ضمنا طرز تدریس استاد عبداللهی خیلی خوبه. کاملا مشخص است ایشون با تجربه در تدریس هستند. من گاهی احساس میکنم واقعا سر کلاسم. انرژی خیلی خوبی میدهند. فقط نکته مهم اینه که باید خودتون هم زحمت بکشید و تمرین کنید تا به‌خوبی فرابگیرید. ممنون از فرادرس