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


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

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

لازم به ذکر است که ما در بخش های قبل ابزار  Notepad ++را برای نوشتن کد معرفی کردیم که میتوانید از این سایت دانلود کنید.

استایل نویسی در css

در بخش قبل گفتیم سه روش برای استایل دهی به تگ های html وجود دارد.

اولین روش خطی بودن بود که استایل ها درون تگ قرار دارد.

مثال:

 

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

 

نکته:

در html اگر یک تگ زیر مجموعه تگ های دیگر باشد،این تگ را بعنوان فرزند تگ اصلی گفته میشود.

به تگ اصلی ، والد یا پدر میگویند.

تگ های فرزند کلیه خصوصیات تگ والد یا اصلی را به ارث میبرند،مگراینکه دارای خصوصیات تعریف شده ای باشند.

مثلا در مثال بالا رنگ زمینه تگ p هم قرمز است.

این روش با دو روش دیگر یعنی استایل دهی درونی و خارجی فرق دارد.

در این دو روش باید ایتدا نام هر تگ مربوطه و سپس شروع به استایل نویسی کنیم.

دومین روش استایل نویسی درونی بود.

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

 

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

 

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

class در css

زمانی از کلاس استفاده میکنیم که برفرض مثال فقط بخواهیم رنگ یکی از تگ های سبز شود یا عناصر دیگر بصورت انتخابی رنگ دلخواه را داشته باشد.

در اینضورت باید کلاس را تعریف و استایل موردنظر را به کلاس نسبت دهیم  و سپس نام کلاسی که میخواهید تگ مورد نظر از آن استایل استفاده کند را در تگ بنویسید.

در آموزش طراحی سایت با css توجه داشته باشید که ابتدای هر کلاس با نقطه (.) نشان داده می شود.

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

بدین منظور ابتدا کلاس دلخواه bgcolor-green تعریف می کنیم سپس استایل background-color:green را به آن می دهیم.

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

مثال:

فرض کنید کلاسی به نام bgcolor-green داریم که قصد داریم این کلاس فقط برای تگ  <p>  قابل اجرا باشد.

مثال دوم برای کلاس

id یا شناسه در class

اما گاهی اوقات شما عنصری منحصر به فرد در صفحه دارید که این عنصر بایستی دارای شناسه یکتا یا منحصر به فرد باشد. در این صورت از id برای این عنصر استفاده می کنیم. ابتدای نام آی دی یا id با علامت شارپ (#) مشخص می شود.

مثال برای id در CSS

گاهی عنصر منحصر به فردی داریم که این عنصر باید دارای شناسه منحصر به فرد باشد.

در اینصورت برای این عنصر  یک id درنظر میگیریم.

ابتدای نام idرا با شارپ(#)مشخص میکنیم.

به مثال زیر توجه کنید:

مثال id برای class

در بالا ملاحظه میشود که مثلا تگ divدارای شماره سریال منحصر به فردی است پی برای آن idدر نظر گرفتیم.

توجه:  مجاز هستیم فقط برای یک عنصر شناسه درنظر بگیریم و تگ های دیگر را نمیتوان با این شناسه مقدار دهیم.

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

راه‌اندازی و اجرای چابک کسب و کار آنلاین

online business

اجرای ایده‌های ناب با راه‌اندازی کسب و کار آنلاین

راه و اندازی و اجرای چابک کسب و کار آنلاین

  • تجارت اینترنتی، انواع کسب و کارهای اینترنتی
  • ارائه راهکارهای عملیاتی برای شروع یک کسب و کار اینترنتی
  • بازاریابی اینترنتی و افزایش مشتریان
  • وردپرس و راه اندازی 5 دقیقه ای سایت
  • بازاریابی اینترنتی با شبکه های اجتماعی
  • فروشگاه اینترنتی چگونه؟
  • بازاریابی اینترنتی با موتورهای جستجو
  • یک مدیر کسب و کار اینترنتی چه علومی را ، تا چه حدی باید بداند ؟
  • روش های موثر در بازاریابی اینترنتی

  • زمان: پنج شنبه 9 آبان ماه ساعت 12 تا 15:30
  • مدت زمان دوره : یک جلسه ی 3 تا 4 ساعته
توضیحات بیشتر و ثبت نام
بکارگیری Continuous Integration برای توسعه نرم افزار

Continuous Integration

دوره ای برای توسعه و تست سریع نرم افزار

آموزش مدیریت پروژه

  • پیاده سازی و اجرای Continuous Integration Pipeline با استفاده از Gitlab
  • بهره گیری از Docker برای تسریع توسعه نرم و تست افزار
  • استفاده ازunit test و integration test برای تست نرم افزار
  • گیت و بهترین روشهای مدیریت کد
  • بررسی روشهای unit test و integration test برای تست نرم افزار
  • Mocking و قابلیتهای آن
  • معرفی روشهای مدیریت کد توسط Git

  • زمان: سه شنبه 14 آبان
  • مدت زمان دوره : 1 کمپ فشرده 12 ساعته یک روزه
توضیحات بیشتر و ثبت نام
آموزش تبلیغ نویسی حرفه ای و کپی‌رایتینگ

Blogging & Copywriting

یک کپی رایتر حرفه ای توسط کسب و کار ها شکار می شود.


  • کپی رایتینگ چیست؟
  • کپی رایتر کیست؟
  • تفاوت کپی رایتینگ با تولید محتوا چیست؟
  • جایگاه کپی رایتر در تیم دیجیتال مارکتینگ چیست؟
  • کپی رایتر چه توانایی های فردی باید داشته باشد؟
  • تکنیک های کپی رایتینگ در سئو
  • تکنیک های کپی رایتینگ در تبلیغات و نوشتن متون تبلیغاتی
  • استفاده از کپی رایتینگ برای افزایش فروش

  • زمان: چهارشنبه 1 آبان ماه 98 ساعت 16:30 الی 20
  • مدت زمان دوره : یک جلسه 3 ساعته
توضیحات بیشتر و ثبت نام
آموزش دیجیتال مارکتینگ

Digital Marketing Starter

چگونه در اینترنت به خوبی دیده شویم

digital marketing

  • بازار در اینترنت چگونه و کجاست؟
  • ساختار یک تیم دیجیتال مارکتینگ
  • بازاریابی آنلاین چگونه صورت می پزیرد؟
  • رول ها و مهارت ها در دیجیتال مارکتینگ
  • بازاریابی موتور های جستجو
  • آشنایی با Conversion Rate یا نرخ تبدیل ها و اهیمت آن ها
  • تفاوت فروش و بازاریابی
  • آشنایی با ابزار گوگل آنالیتیک با رویکرد دیجیتال مارکتینگ
  • بررسی استراتژی های Inbound و Outbound و معایب و مزایای هر کدام
  • انواع سطوح مخاطب در دیجیتال مارکتینگ
  • تقسیم بندی کانال هال جذب ترافیک در دیجیتال مارکتینگ
  • آشنایی با ابزار محاسباتی در دیجیتال مارکتینگ

  • زمان: چهارشنبه 8 آبان و یکشنبه 12 آبان ساعت 16:30 تا 19:30
  • مدت زمان دوره : 2جلسه ی3ساعته
توضیحات بیشتر و ثبت نام
تحلیل پروژه های وب و اپ موبایل

Project Analysis Course

خشت اول را درست بکارید

مدیریت پروژه

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

  • زمان: جمعه 10 آبان ماه 98 صبح ساعت 8:30 الی 12
  • مدت زمان دوره : یک جلسه 4 ساعته
توضیحات بیشتر و ثبت نام

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

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

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

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





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