راهنمای آموزش طراحی سایت با استفاده از html و css – بخش سوم


توسط : روابط عمومی رشدانا در ۳۰ تیر ۱۳۹۸

در بخش دوم از آموزش طراحی سایت با html css ،مقدمه ای بصورت کلی در ارتباط با آموزش طراحی سایت با html و css بیان کردیم.

در ادامه به طراحی سایت با css بصورت کلی می پردازیم.

برای درک بهتر دو کلمه html و css باید گفت اگر html را اسکلت یک ساختمان در نظر بگیریم ، css نمای ظاهری و زیبایی ساختمان است.

 

آموزش طراحی سایت با html و css

  • صفحه وب بصورت کلی به دو بخش زیر تقسیم می شود:
  1. Client Side
  2. Server Side
  • بخش اول خود به سه قسمت تقسیم می شود:
  1. ساختار صفحه که توسط HTMLساخته می شود.
  2. رنگ ، شکل و شمایل صفحه که در CSS تعیین می شود.
  3. منطق برنامه در سمت کلاینت که با استفاده از زبان های اسکریپتی مانند جاوا اسکریپت مشخص می شود.

بنابرین CSS عنصر ضروری برای طراحی سایت شماست.

تاریخچه CSS

تا قبل از سال ۱۹۹۵ ، HTML یک زبان ساده بود.

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

همچنین خواص تگ های HTML از جمله تگ<font> کار پردازش را سخت کرده بود تا ایکه کنسرسیوم جهانی وب در سال۱۹۹۵ ،css راجهت تعریف ساختار ظاهری وبسایت ارائه کرد.

 

  • سینتکس css از دو بخش  selector (انتخابگر)و declaration (اعلان) تشکیل شده است.

به ساختار زیر توجه کنید:

آموزش طراحی سایت با html و css

 

  • selector شامل یکی از تگ های html یا نام کلاس و  یا شناسه(ID)است.
  • هر Declaration شامل یک propertyو هر property شامل یک value(مقدار)است.

روندساختار بالا:

برای تغییر خصوصیات ظاهری یک تگ ، اول نام تگ وسپس ویژگی هایی مانند رنگ ، اندازه فونت و…را مینویسیم و مقدار هر ویژگی را جلوی هر ویژگی بعد دو نقطه (:) قرار می دهیم.

اگر به مثال داخل تصویر توجه کنید میبینید که اشاره به تغییر رنگ و اندازه فونت دارد که در تگ p یعنی(<p>) قرار گرفته است.

به رنگ مقدار آبی داده و برای تغییر اندازه فونت ابتدا یک (;)گذاشته ایم.

توجه:

در ابتدا یکی ابزار برای نوشتن کد مانند نرم افزار Notepad ++را از این سایت دانلود کنید.

روش های استفاده از Css در HTML

سه روش وجود دارد:

۱- روش خطی inline stylesheets

استایل مورد نظر مستقیم و در خصوصیت style آن تگ مقدار دهی می شود.

در مثال گفته شده  برای تغییر رنگ صفحه به صورت خطی به این شکل زیر عمل می کنیم:

 

آموزش طراحی سایت با html و css

۲- روش درونی Internal Stylesheet

تمامی دستورات CSS بین دو تگ <style></style> یعنی تگ <head> قرار می گیرند.
مثلا برای تغییر رنگ زمینه صفحه بشکل زیر عمل می کنیم:

آموزش طراحی سایت با html و css

۳- روش خارجی external stylesheets

تمام استایل های مورد نظر در فایل جداگانه ای نوشته شده و با پسوند css ذخیره میشود و  توسط برچسب <link> مانند شیوه زیر به صفحه اضافه می شود:

و دقت کنید که آدرس فایل  file.css در href نوشته می شود.

دوره آموزشی پیشنهادی

آموزش کدنویسی HTML5 و CSS

HTML5 - CSS Markup

اولین گام برای ورود به دنیای برنامه نویسی

کدنویسی HTML5 و CSS

  • کدنویسی چیست و آشنایی با کدنویسی
  • کدنویسی واکنشگرا (responsive)
  • آشنایی با layout قالب ها
  • کدنویسی مقرون به صرفه
  • تکنیک های افزایش سرعت در کدنویسی
  • انواع تگ های HTML و HTML5
  • روش صحیح بکارگیری تگ ها
  • انواع تگ های CSS و CSS3
  • اجرای کامل یک قالب در HTML
  • کدنویسی بهینه و تمیز

  • زمان: 13 و 14 و16 و 20 آبان ماه 98 ساعت 16:30 الی 20:30
  • مدت زمان دوره : 4 جلسه 4 ساعته
توضیحات بیشتر و ثبت نام

ورود به دنیای حرفه‌ای کارآموزی

درخواست کارآموزی

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *





دوره های پیشنهادی:
سایر دوره ها