** برنامه نویسی تحت وب CSS

آموزش CSS


Css   چیست ؟ (سی اس اس چیست؟) در این قسمت توضیح مختصری درباره ی css  به شما علاقه مندان این حوزه می دهیم قبل اینکه بخواهیم Css  رو تعریف کنیم ، باید در مورد صفحات وب اطلاعات، صفحه وب شامل متن ، صوت ، تصویر و … می باشد. برای اینکه اجزای وب در کنارهم قرار گیرنداز زبان html استفاده میکنیم، بابکارگیری عنصرها و تگ های HTML  قادر خواهیم بود  تصاویر، متون ، ویدئوها ، صداهاو … را درکنار هم قرار دهیم تا کاربرای سایتبتوانند آن را مشاهده کنند.وقتیکه در مدل کدنویسی ت...

توضیحات بیشتر...

Css   چیست ؟ (سی اس اس چیست؟)
در این قسمت توضیح مختصری درباره ی css  به شما علاقه مندان این حوزه می دهیم
قبل اینکه بخواهیم Css  رو تعریف کنیم ، باید در مورد صفحات وب اطلاعات، صفحه وب شامل متن ، صوت ، تصویر و … می باشد. برای اینکه اجزای وب در کنارهم قرار گیرنداز زبان html استفاده میکنیم، بابکارگیری عنصرها و تگ های HTML  قادر خواهیم بود  تصاویر، متون ، ویدئوها ، صداهاو … را درکنار هم قرار دهیم تا کاربرای سایتبتوانند آن را مشاهده کنند.وقتیکه در مدل کدنویسی تغییرات ایجاد شد و به مرور پیشرفت کرد، در طراحی وب کاربرد  Css یک موضوع  عادی شمرده می شد. با استفاده از زبان  CSS این توانایی را دارید که سبک طراحی صفحات وب را فقط یکبار طراحی کنید و در صفحه مورد نیاز استفاده کنید.CSS  یا به عبارتی Cascade Style Sheets زبان برنامه نویسی می باشد که کنسرسیوم بین المللی شبکه جهانی وب یا W3C برای مواجهه شدن با مشکلاتی که درمدت زمان استفاده از HTML شکل گرفته است  پیشنهاد داده است. زبان  CSS ،تکمیل کننده بر زبان قدیمی تری به نام HTML است و بر این تلاش است که مشکلات آن را برطرف کند.
 CSS )Cascading Style Sheet ): سی اس اس  مدلی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحات وب می باشد.الگوهای آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن ساده رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. به گفته‌ای ساده تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره ها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای میدهند.

در اینجا فقط انواع  css بیان شده است:
•    CSS خارجی
•    CSS داخلی
•    سبک درون خطی
نکته ۱ : با بکار گرفتن از css  می توانیماز تکرار نوشتن کدهای   HTML  که موجب کم شدن آپلود صفحات وب می شود جلوگیری کرد.
 نکته ۲ : استفاده از CSS موجب اصولی تر شدن کدهای برنامه نویسی  می شود، تغییرات را سهولت می بخشد و همچنین دید شما را بیشتر به طراحی متمایل می سازد تا مواجه شدن با کدهای برنامه نویسی.

تعریف و مفهوم CSS

 Cssمخفف Cascading Style Sheets  است که در معنای لغوی به متدی بیان می شود که برای طراحی  وقالب بندی اجزای صفحات وب سایت کاربرد دارد.برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکریپت نیز استفاده کنیم و همانند مشکلات جاوا اسکریپت که در بعضی اوقات مثل غیر فعال بودن جاوا اسکریپت در مرورگر همراه نیست و با خیالی آسوده تر می توانیم از آن استفاده کنیم.Css در نسخه های متنوعی به بازار وب عرضه شد فایلها استایلها با فرمت css ذخیره می شوند. سی اس اس از مجموعه ایی از کدها تشکیل شده که با بکارگیری از این کدها می توانید به راحتی به اجزا و کدهای HTML دست بیابید.

مزایای استفاده از CSS
•    بدون استفاده ازدستورات HTML ظاهر صفحات را طراحی کرد 
•    پیشگیری از تکرار دستورات
•    سرعت آپلود و بارگزاری برای صفحات در اینترنت
•    استفاده از فایل CSS خارجی جهت تغییر ظاهر هر تعداد صفحه ای که تمایل داریم.

کاربرد CSS
دلایل استفاده از CSS را به طور کلی  بیان میکنیم:
همانطور که میدانید صفحات HTML ، از اجزای مختلفی مانند جدول ها ، پاراگراف ، عنوان ها و … تشکیل شده است در حال حاضر صفحات وب از مدل ساده و یکسان بیرون آمده و طراحان تلاش دارند تا با استفاده از جلوه های تصویری مثل استفاده از رنگ های گوناگون ، حالت های نمایش متنوع و … به زیبایی صفحات اضافه کنند.تصور کنید که ما در  یک صفحه از وب سایت ، یکسری عنوان ، پاراگراف و جدول داریم که این اجزا در بیشتر صفحات تکرار شده و ویژگی های یکسانی دارند.برای مثال برخی از عنوان ها رنگ سبز داشته ، یا بعضی از پاراگراف ها دارای نوع و اندازه خاصی از Font هستند و یا جداول دارای پس زمینه رنگی هستند . در اینجا ۲ راه حل جهت تعیین خواص برای این عناصر وجود دارد :
۱- در درون هر صفحه ، خواص مشترک را در تمام صفحات و در درون تگ های مورد نظر به صورت تکی تعیین کنیم ، که این مسئله چند اشکال دارد :
•    باعث تکرار شدن خواص مشترک عناصر در تمام صفحات و تگ های مورد نظر می شود.
•    حجم کد نویسی بالا رفته و احتمال خطا افزایش می یابد.
•    سرعت طراحی صفحات بسیار کاهش می یابد.
•    اعمال تغییرات به عناصر بسیار وقت گیر بوده و کار زیادی را می طلبد.

در این دوره آموزشی آنلاین و رایگان، کلیه مطالب آموزشی CSS طبق سرفصل های استاندارد مرحله به مرحله ارائه خواهد شد. روند مطالب آموزش طبق فهرستی که ارائه شده خواهد بود بدیهی است بخش هایی که هم اکنون مشاهده میکنید، سرفصل هایی است که تا این لحظه تقدیم شرکت کنندگان در این دوره آموزشی شده است.

چرا باید از CSS استفاده کنیم؟
 CSSمی تواند در بسیاری از کارهای تکراری ، زمان طراحی و حجم کدهای  صرفه جویی می کند. شما میتوانید یکبار خصوصیات ظاهری عناصر را در وب سایت توسط دستورات CSS مشخص کنید،و بعد آن هرکجا در وب سایت از عنصر موردنظراستفاده کردید، خصوصیات مشخص شده را به آن عنصر اعمال کنید.همچنین هر زمان نیز تصمیم بگیرید ظاهر وب سایت را تغییر دهید، کافیست به محلی که دستورات CSS را نوشته اید مراجعه کرده و آنها را تغییر دهید تا ظاهر عنصر مورد نظر در تمام صفحات وب سایت تغییر کند و نیازی به تغییر تمام صفحات سایت نیست. بنابراین حجم صفحات وب سایت شما نیز کمتر خواهد شد و در نتیجه سرعت بارگزاری صفحه وب شما افزایش خواهد یافت. همچنین دستورات CSS می تواند در یک فایل جداگانه از کدهای HTML شما نوشته شود و این تفکیک تمیزی و پیچیدگی کمتر کدها را در تمامی وب سایت برای شما به ارمغان می آورد. خوب است بدانید گوگل در رتبه بندی وب سایت ها، سرعت بارگزاری و کیفیت کدها را نیز مدنظر قرار میدهد و وب سایت هایی را که سرعت بارگذاری آنها مناسب نباشد، کمتر به جستجو کنندگان معرفی خواهد کرد. 


در گذشته طراحی و چیدمان عناصر صفحات وب ، از طریق جدول انجام می گرفت. در آن روزها جدول مطمئن ترین عنصر برای چیدن عناصر به نحوی که در تمامی مرورگرها ظاهر سایت یکسان باشد و بهم ریختگی نداشته باشیم ، محسوب میشد. جداول مشکلات زیادی داشتندو به این خاطر با ظهور CSS کاملا منسوخ شدند. از جمله مشکلات جداول میتوان به حجم بالای پردازش آنها توسط مرورگر و در نتیجه کاهش سرعت اشاره کرد. حتما تاکنون وب سایت هایی را مشاهده کرده اید که در هنگام باز شدن، مدت زیادی هیچ عنصری در صفحه نشان داده نمی شود و پس از چندین ثانیه و یا حتی دقیقه که در حالت انتظار و سردرگمی یک صفحه سفید را مشاهده میکنید، اگر انسان صبوری باشید به یکباره تمامی عناصر بر روی صفحه ظاهر میشود. این ویژگی منفی وب سایت هایی است که با جدول پیاده سازی می شدند. در مقابل در وب سایتی که با CSS پیاده سازی شود، عناصر یکی پس از دیگری در هنگام بارگزاری بر روی صفحه پدیدار میشوند و کاربر از لحظه درخواست میتواند مشغول مطالعه و مشاهده وب سایت تا زمانی که بارگزاری کامل شود، باشد.

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

سرفصل دوره ها

فصل اول (مقدماتی)

  • مبانی اولیه
  • مقدمه - آشنایی با برنامه نویسی Web - نحوه عمکلرد وب سایت ها - آشنایی با تگ ها
  •  ایجاد یک HTML ساده
  • کدنویسی HTML - ویرایش فایل HTML
  •  کار با Dreamweaver
  • آشنایی با تگ های متنی - درج فاصله و ایجاد خط جدید
  •  قالب بندی متن
  •  کاربرد دستور Style
  •  کار با تگ Span
  • آشنایی با تگ Span - کاربرد تگ Span
  •  کار با رنگ ها
  •  درج و دسته بندی لینک ها
  •  روش Document Relative
  •  تنظیمات لینک ها
  • کار با ویژگی Target - پیمایش صفحه توسط لینک ها - ایجاد لینک ایمیل
  • ١ویژگی Direction
  • کار با لیست ها
  • ایجاد لیست ها - استایل های لیست
  • ترسیم جدول
  • طرح بندی توسط تگ Table - کار با پانل DOM
  • کار با Colspan و Rowspan
  • ایجاد جداول پیشرفته
  • ایجاد جدول های تو در تو - تنظیم فواصل سلول ها
  • طرح بندی توسط تگ Div
  • طرح بندی در HTML5
  • کار با CSS
  • آشنایی با CSS - ساختار دستورات CSS - ایجاد یک فایل CSS - درج ویژگی در CSS
  • ویرایش کدهای CSS
  •  آزمون های عملی
  •  دوره آزمون عملی

​فصل دوم (متوسط)

  • آشنایی با Class و ID
  • آشنایی با مفهموم Class - آشنایی با مفهوم ID
  • کار با کلاس ها
  • استفاده از کلاس ها - اعمال کلاس ها روی تگ های خاص
  • کار با انواع Selector
  • کار با Descendant Selector - کار با Pseudo Selector
  • واحدهای اندازه گیری
  • کنترل مکان و حاشیه تگ ها
  • آشنایی با Float و Clear - تنظیم لبه ها
  • درج و ویرایش تصاویر
  • افزودن تصویر - تغییر ابعاد تصویر - درج لینک بر روی تصویر
  • کار با تصویر پشت زمینه
  • درج تصویر پشت زمینه - ویژگی Background-Repeat - ویرایش تصویر پشت زمینه
  • درج تصویر پشت زمینه تگ
  • کار با Rollover Image
  • ١کار با Map
  • درج Map بر روی تصویر - ایجاد Map مستطیلی - ایجاد Map دایره ای و چندضلعی
  • ایجاد گالری تصاویر
  • کار با Opacity
  • کار با Navigation Bar عمودی
  • ایجاد Navigation Bar عمودی - ویرایش Navigation Bar عمودی - تنظیمات Navigation Bar عمودی
  • کار با Navigation Bar افقی
  • ایجاد Navigation Bar افقی - تنظیمات Navigation Bar افقی
  • ایجاد انواع Dropdown
  • ایجاد Dropdown ساده - ایجاد Dropdown پیشرفته
  • کار با IFrame
  • مبانی استفاده از Iframe - ویژگی های Iframe (١) - ویژگی های Iframe (٢)
  • کار با Frameset
  • ایجاد Frameset - مقدار دهی به Frameset
  • ایجاد فرم های ورودی
  • کار با تگ Form - ساختار فرم تماس با ما - تگ های ورودی متن
  •  آزمون های عملی
  •  دوره آزمون عملی

فصل سوم (پیشرفته)

  • ایجاد انواع دکمه
  • ایجاد دکمه ساده - ایجاد دکمه Submit و Reset - ایجاد دکمه تصویری و Button
  • امکان انتخاب گزینه ها
  • ایجاد Checkbox - ایجاد Radio Button
  • استفاده از تگ Output
  • کار با تگ Select
  • کار با تگ Select (١) - کار با تگ Select (٢)
  • ایجاد Progress Bar
  • درج انواع Objectها
  • افزودن فایل های صوتی - افزودن فایل های ویدئویی - تگ های Embed و Object
  • کار با موتورهای مرورگر
  • کار با دستور Transform
  • چرخاندن محتویات یک تگ - مقادیر ویژگی Transform
  • ایجاد انیمیشن
  • مدیریت انیمیشن
  • تنظیمات انیمیشن - کنترل سرعت انیمیشن
  • ١قانون Keyframe
  • استفاده از قانون Keyframe - کار با Keyframeها
  • نقش CSS3 در طراحی
  • گرد کردن زوایا - ویژگی Border-Image - درج هم زمان تصاویر در CSS3
  • کار با رنگ ها در CSS3
  • نقش رنگ ها در CSS3 - ایجاد گرادیان های خطی - ایجاد گرادیان ها دایره ای - کار با سایه ها
  • مدیریت متن و فونت
  • کار با متن - کار با فونت ها - فراخوانی فونت ها
  • مرور صفحات
  • ایجاد و ویرایش ستون
  • صفحات چند ستونی - جداکننده چند ستونی
  • کار با صفحات Responsive
  • تغییر ابعاد توسط کاربر - ایجاد صفحات Responsive - استفاده از Grid-View
  • کار با قانون Media
  • کاربرد قانون Media
  • قانون Media (١) - قانون Media (٢) - قانون Media (٣)
  •  آزمون های عملی
  •  دوره آزمون عملی
۷ روز هفته ۲۴ ساعته پاسخگوی شما هستیم.
کلیه حقوق مادی و معنوی برای وب سایت موسسه آموزش عالی آزاد فن پردازان محفوظ است.
طراحی و توسعه با توسط تیم IT در فن پردازان