• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

سرعت در کد نویسی HTML و CSS ،بخش سوم: تمپلیت آماده برای شروع کار

10218 ۲۶ دی ۹۲

بنام یگانه هستی بخش.

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

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

 

استایل خاصی دهید تا در همه ی مروگر ها به یک شکل نمایش داده شوند مثلا :

یا مثلا برای فراخوانی فونت ها، هر دفعه باید کدی را از فایل سی اس اس قبلی که در آن فونت فراخوانی کردید را کپی کنید.یا همچنین برای نوشتن مدیا کوئری های استاندارد(طراحی ریسپانسیو)  هم باید همین کار را انجام دهید.

یا به برخی از تگ جدید HTML5 مانند:

باید خاصیت و مقدار display: block دهیم.و ... .

چرا این کار را یک بار برای همیشه انجام ندهیم؟

فایل زیپ را دانلود کنید و هر وقت خواستید پروژه ی طراحی جدیدی را شروع کنید با این فایل ها شروع کنید.

 

نکته : همیشه کد هایتان را به صورت تو در تو بنویسید و تورفتگی ها (indentation) رو رعایت کنید. مثلا اینطوری:

box-sizing: border-box;  چیست؟

حتما وقتی به یک دایو عرض و ارتفاع مورد نظر رو میدید،بعد از اینکه به همون دایو padding و border بدید؛ میبینید که عرض padding و border به عرض و ارتفاع دایو (div) اضافه شده. خب باید چکار کنیم؟ حتما میرید و به همون مقدار که padding و border دادید ، از عرض و ارتفاع دایو کم میکنید.

خب یک راه دیگه هم هست.استفاده از box-sizing: border-box .به تصویر توجه کنید.

box

 

همونطور که دیدید، به جای اینکه border و padding به بیرون از دایو اضافه بشه؛ به داخل دایو اعمال میشه.

میتونید به این شکل ازش استفاده کنید:

همه ی مرورگر ها بجز IE7 از box-sizing پشتیبانی میکنند. اگر می خواهید از box-sizing استفاده کنید حتما قبل از اینکه پروژه ی تان را آغاز کنید این کد را در فایل سی اس اس بنویسید. اگر در وسط پروژه از این کد استفاده کنید، قالبتون دچار مشکلاتی میشه.

 

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

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 37 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    N a S e R(۲۶ دی ۱۳۹۲)

    ممنون از اموزش خوبتون ، نمیدونم چرا IE همیشه ساز ناسازگاری میزنه 😆

    • ‏‏
      علی امینی(۲۶ دی ۱۳۹۲)

      خواهش میکنم داداش.خب کارش همینه.منم یه راه حل خوب براش پیدا کردم؛مرورگر IE ویندوز رو لیلیت کردم.میدونی لیلیت یعنی چی؟یعنی گذاشتمش توی قرنطینه ی کومودو فایروال.آیکنش رو هم حذف کردم.هر چی دیلیت نشه اینجوری لیلیت میشه 😀 .خداروشکر از دستش راحت شدم

      • ‏‏
        N a S e R(۲۶ دی ۱۳۹۲)

        کار خوبی میکنی منم یادم باشه لیلیت کنمش 😀

      • ‏‏
        حسین محمدی(۲۶ دی ۱۳۹۲)

        من اگه وبلاگی درست کنم با شرط ها چک میکنم اگه مرورگر ie بود کلاً صفحه رو نشون نده و display تگ body رو none کنه 💡 💡 …تا کسایی که ie دارن بدونن خیری از نمیبینن….البته میشه گفت اکثر کاربرا ie دارند…..

        • ‏‏
          N a S e R(۲۶ دی ۱۳۹۲)

          نمیدونم چه گیریه همه چسبیدن به IE چی ازش دیدن که تو بقیه مرورگرها ندیدن ولی باز نسخه 11 خوبه ولی اکثر با نسخه های پیش فرض ویندوز کار میکنن و ابدیت نمیکنن مرورگرشونو. 😐

        • ‏‏
          وحید صالحی(۲۶ دی ۱۳۹۲)

          این گیر نیست یه عادته چون همه اینترنت رو با ie میشناسن کسی که تازه کار با کامپیوتر رو شروع میکنه و اطلاعات زیادی در این زمینه نداره قطعا برای اتصال به نت هم از ابزار در دسترس استفاده میکنه و اون هم ie هست که با ویندوز همراه اینم از سیاست های ماکروسافت و بیل گیتس عزیزه خود ما چرااز windows استفاده میکنیم در حالی که mac یه دنیای دیگس ؟؟؟؟خوب این بر میگرده به عادت و خو گرفتن ما با win در حالی که اگر mac رو امتحان کنیم win هم برای ما مثل ie مزحک به نظر میاد…

        • ‏‏
          کیوان علی محمدی(۲۷ دی ۱۳۹۲)

          داداش لینوکس رو بگو!عشق است این لینوکس خد وکیلی. :))))))

        • ‏‏
          علی امینی(۲۶ دی ۱۳۹۲)

          منم می خوام تو طرح های بعدی همین کارو کنم.
          آخه با حضور مروگر IE طراحان وب اصلا پیشرفت نمیکنن

        • ‏‏
          مهشاد کلانتری(۲۶ دی ۱۳۹۲)

          به نظر من کسایی که هنوز IE زیر 8دارند چیزی از نت و کامپیوتر و … نمیدونن برا همین آپدیت هم نمیکنن یا مرورگر رو عوض نمیکنن
          شاید اگه ازشون بپرسیم اسم مرورگرتون چیه هم حتی ندونن 😯

      • ‏‏
        کیوان علی محمدی(۵ بهمن ۱۳۹۲)

        میتونستی از قسمت سرویس های ویندوز حذفش کنی IE رو.دیگه چرا بنده خدا رو لیلیت کردی ؟ :)))

        • ‏‏
          علی امینی(۵ بهمن ۱۳۹۲)

          خب زیاد تلاش کردم ولی انگار نمیشد حذفش کنم.
          وقتی قالب هایی رو که طراحی میکردم (البته بعضی هاشون رو) با IE بازشون میکردم عصابم حسابی خورد میشد. آخه بهم میریختن و بعضی وقتا حوصله نداشتم سازگارشون کنم.با روانپزشکم در این باره حرف زدم و اون گفت باید از شرش خلاص شی. چاره ی دیگه ای پیدا نکردم.منم با عصبانیت پرتش کردم تو قرنطینه.نمیدونم تا حالا مرده یا زندست.خداکنه شر IE 10 به پایین از روی تمام ویندوز ها کم بشه. 😀 😀

  • ‏‏

    ممنون از مطالب خوبتان.لطفا از امنیت سایت هم بگویید..بد جور نیازمند امنیت سایت هستم.برای قسمت هایی مثل خرید ان لاین و ….

    • ‏‏
      N a S e R(۲۶ دی ۱۳۹۲)

      ایشالله بعد امتحانات من کامل درباره امنیت میگم حاصل 5-6 ماه تلاشمو که یه سایت از کجا ها میخوره چطوری میخوره . مهم ترین بخش یه سایت هم امنیته چون یه بار خودم داغ دیدم 😆 البته استفاده از سی ام اس های اماده مثل وردپرس یا جوملا جلوی خیلی از اینا را میگیره ولی به طبع چون سی ام اس های رایج هستن تعداد هکر ها هم برای اینا هم بسیار هستن.

      • ‏‏
        رضا ساطع بیدگلی(۲۶ دی ۱۳۹۲)

        منتظریم ……………………………………………………
        ………………………..

  • ‏‏
    نادیا(۲۶ دی ۱۳۹۲)

    سلام من رمز ایمیلمو فراموش کردم اطلاعاتی هم توش هست میشه یه رمزو به وبلاگم بفرستید؟ :sad:

    • ‏‏
      لقمان آوند(۲۶ دی ۱۳۹۲)

      رمز چیو می خواید ؟ ایمیلتون یا اکانت سون لرنتون ؟

  • ‏‏

    سلام
    آقای مدیر چرا نمیشه توی سایت لاگین کرد؟؟؟؟!!!! :sad: 😯 :roll: 😥

    • ‏‏
      لقمان آوند(۲۷ دی ۱۳۹۲)

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

  • ‏‏

    سلام
    اقای صالحی شما روی مک برای طراحی از چی استفاده میکنید ؟
    من مدتهاست مک دارم اما متسفانه هنوز نرم افزاری بخوبی ویژوآل در ویندوز برای مک پیدا نکردم و بخاطر همین مسئله هم بیشتر از ویندوز استفاده میکنم
    وِیژوآل رو هم در مک بصورت مجازی نصب کردم اما بخاطر اینکه 8 گیگ رم داره سرعتش گاها خیلی کنده
    ممنون میشم راهنمایی کنید واسه مک چه ادیتوری رو پیشنهاد میکنیدکه قابلیتهای ویژوآل رو داشته باشه بخصوص ران و دیباگر
    حالا ای دی ای هم باشه خوبه
    با تشکر 😐

    • ‏‏
      کیوان علی محمدی(۲۷ دی ۱۳۹۲)

      من بهتون NetBeans رو پیشنها میکنم فوق العاده است.من شخصا برای پروژه های مشتریانم ازش استفاده میکنم،از سایتش نسخه مکینتاش رو دان کنید.

      • ‏‏

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

        • ‏‏
          مهشاد کلانتری(۲۸ دی ۱۳۹۲)

          دلیلتون برای افتضاح بودن نت بینز رو ذکر کنید لطفا

        • ‏‏

          دلیلم رو همونطور که خواسته بودید ذکر کردم و ممنون میشم حالا اگر ادیتور کاملتری دارید لطفا معرفی کنید
          چون لپ تاپم مکه و واقعا به یه ادیتور خوب براش نیاز دارم
          گرچه مدتهاست در خیلی از انجمن ها حتی msdn و appleforums هم سوال کردم اما هنوز بجز با همون ویژوال کار میکنم که خیلی هم ازار دهنده ست بدلیل رم کم و نصب مجازی
          ولی خوشحال میشم اگر شما ادیتور بهتری دارید معرفی کنید

  • ‏‏
    کیوان علی محمدی(۲۸ دی ۱۳۹۲)

    البته این مسئله هم کاملا شخصیه و به نظرم بستگی به این داره که شما با چی راحت باشی،ولی واقعا نت بینز برای شما افتضاحه؟؟؟ من راستش با خیلی از IDE های مشهور کار کردم و در نهایت هم نت بینز مورد نظرم قرار گرفت،شاید بهتره PHP Strom رو هم امتحان کنید.برای خود مکینتاش Coda رو تست کردین؟Zend Studio و Aptana و DW و Eclipse جزء بهترین ها هستن ولی بازم همون نت بینز رو پیشنهاد میکنم و در رتبه دوم هم Zend Studio
    😎

  • ‏‏

    بطور کلی پروژه های ASP.NET رو نداره بصورت پیش فرض و تا جایی هم که من امتحانش کردم قدرت کامپایل #C رو نداره مثه اینکه
    البته من نسخه 7.3 رو رو حدود 6 هفت ماه پیش روی مک نصب کردم و بخاطر اینکه توان کار با #C رو نداشت پاک کردم
    بیشتر کارم با ASP.NET و بخصوص برای فرمهایی که طراحی میکنم به #C نیاز دارم
    حدود 4 ساله با مک کار میکنم و برای کارهای گرافیکی بیشترین فشار کاریم با مکه اما موقع کد نویسی بیشتر مجبورم با ویندوز کار کنم
    اقای صالحی بالا تر صحبتی کردند گفتم شاید تجربه ایشون بیشتر باشه و بتونه یه ادیتور خوی برای مک معرفی کنند
    بهر حال ممنون از راهنمایی

    • ‏‏
      کیوان علی محمدی(۵ بهمن ۱۳۹۲)

      شما خودتون رو خیلی اذیت کردین دیگه؛یه لپ تاپ خوب غیر اپلی میگرفتین این همه دردسر هم نداشت براتون.

  • ‏‏
    meyti pugo(۲ بهمن ۱۳۹۲)

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

    برای مک هم coda خیلی عالی تر از بقیه بوده البته من چندتایی بیشتر تست نکردم.. ولی برای شرایط کاریم و سریع کار کردنم تو مک کدا خیلی عالیه و زیادم گذرافیکی نیست و ساده است <3

    • ‏‏

      من تمام اینها رو تست کردم (coda و …. ) و در نهایت چه روی مک و چه ویندوز همون ویژوآل بهتر از همه ست بخصوص قدرتی که در کامپایل داره و یا بخاطر کتابخانه های عظیمی که بصورت پیش فرض باهاش نصب میشه چه روی مک بصورت مجازی الان نصب کردم و با این وجود که سرعتش خیلی کمه نسخه 2013 بخاطر لوگین بودنش و چه روی ویندوز که با ویندوز 8.1 اصلا حرف نداره و واقعا تک این نرم افزار و در هیچ کجای کار ادم رو نگران و نا امید نمیکنه
      البته ویندوز نه تنها ویژوآل بلکه تمام نرم افزارهاش سر تر و راحت تر از مک و لینوکس هستند بخصوص محیطهای گرافیکیشون
      ولی یه مک بوک پرو دارم و چون بالاتر اقای صالحی اشاره کرد که مک فوق العاده بهتره احساس کردم شاید یه ادیتور خوب هم براش سراغ داره اما متاسفانه مثه اینکه اینبار هم مثه تمام سایتهای دیگه قضاوت فقط حرفی بوده و نه از سر تجربه کاری

      • ‏‏
        کیوان علی محمدی(۵ بهمن ۱۳۹۲)

        شما خودتون چقدر تجربه کاری با لینوکس و مک دارین که اینطوری ویندوز رو برتر میدونید؟من که چند ساله داره کار میکنم و اکثر آموزش هایی که استفاده میکنم به زبان انگلیسی هستش کمتر دیدم در این آموزش ها از ویندوز استفاده بشه و اکثر از مک و لینوکس استفاده کردن،البته من اینو بگم عنوان اصلی سیستم عامل شرکت اپل IOS هستش نه مک،مک به کامپیوتر های شرکت اپل گفته میشه،ما که از کاربران حرفه ای دیدم و شنیدیم که لینوکس رو انتخاب میکنن و به قول یه هکر معروف شما که سی و لینوکس بلد نیستین اسم خودتونو نذارید هکر،البته جذابیت های گرافیکی ویندوز بماند و اینکه محیطی مثل ویژوال با اون همه کلاس توکارو و کامپوننت اماده کارو راحت میکنه،اما خوب برنامه نویسی در دنیای اوپن سورس واقعا یه چیز دیگه است،اینکه من میتونم پی اچ پی رو طبق خواسته خودم کانفیگ و کامپایل کنم خیلی حرفه،ادیتور های حرفه ای رو قبلا معرفی کردیم،Zend Studio ,NetBeans,Aptana,Eclipse,PHPStorm که اکثر نسخه های مک و لینوکس هم دارن رو میتونید استفاده کنید.ویژوال استدیو فقط و فقط برای کد نویسی پلتفرم ویندوز مناسبه،حالا انتخاب با خودتونه و نکته آخر اینکه منظور آقای صالحی تجربه کاربری حرفه ای در محیط مک و لینوکس بوده نه استفاده از ادیتورهاش.موفق باشید

      • ‏‏
        مهشاد کلانتری(۵ بهمن ۱۳۹۲)

        شما که میخواستین از نرم افزارهای ویندوز استفاده کنین چرا مک خریدین؟ 😯

      • ‏‏
        وحید صالحی(۵ بهمن ۱۳۹۲)

        دوست عزیز من احساس میکنم شما دچار یه دو گانگی در تصمیم گیریتون شدین و هنوز تفاوت ها و قابلیت های ios و win رو بخوبی نمیدونید شما هم می خوای هم ios رو داشته هم ویندوز رو, خوب اینکه کاری نداره win نصب کنید تم ios بریزید روش ولی اگه واقعا دنبال توانایی هاشون هستی نمی خواد به حرف من هم توجه کنی, گوگل کنید اگر هم به سایت های فارسی نمیتونید اعتماد کنید سایت های لاتین زیادی وجود دارن که میتون کمکت کنه تا خودت بفهمی کدوم بهتر من نه سنگ مک با ios رو به سینه میزنم نه win رو بلکه توانایی هایی رو که ازشون دیدم و تجربه کردم رو میگم مثل همون تفاوت های ie با سایر مرورگرها رو که در کامنت قبلی گفتم در ضمن مگه من در نظری که بالاتر دادم گفتم که با مک کد نویسی میکنم که شما میگی که قضاوت حرفی بوده اما اینجا میگم که بله برای کد نویسی مخصوصا opensource انتخاب اول و آخرم ios به هزارویک دلیل که برای خودم دارم که مهمترینش دوری از تنبلی و کامپوننت آماده و و و و خیلی چیزای دیگس …

        مورد دیگه اینکه شما میفرمایید ویندوز نه تنها ویژوآل بلکه تمام نرم افزارهاش سر تر و راحت تر از مک و لینوکس هستند بخصوص محیطهای گرافیکیشون!!! پس چرا مک بوک خریدین ؟؟؟؟2 حالت داره که امیدوام حالت دوم شامل شما نشه!!!
        1-آشنایی با توانایی هاش دارین و اونا رو قبول دارین
        2-یا بقول دوستان برای کلاسش خریدین که بگین من هم یه دونه… و از کورس چشم و همچشمی دور نمونید

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

        و در آخر هر سیستمی علاوه بر مزیت هاش ممکنه نواقصی هم داشته باشه اونم یه چیزی مثل کامپیوتر که اگه نداشت میشد یه ادم و میشستیم باهم کد میزدیم غذا میخوردیم میرفتیم بیرون و هزار جور کار دیگه که در آینده اینها هم عملی خواهد شد…

        و تعجب میکنم و به جرات میتونم بگم شما اولین کسی هستین که ازش شنیدم میگه NetBeans افتضاحه…

        وبعنوان سخن آخر حتما لطفا اگر سیستمی برای شما جواب نمیده و خواسته هات رو برآورده نمیکنه بجای تغییر در روشها و تحلیل اون سیستم خط سیاه روش نکشید که شاید مشکل از نوع بهره گیری شما از منابع موجود باشه و بقول برنامه نویس ها سعی کنید که توی loop نیفتی که اگه اینطور بشه متکی به یک سیستم میشی و در جا میزنی

        موفق باشی…

  • ‏‏
    reza____ebliser(۳ بهمن ۱۳۹۲)

    عالی بود دست شما درد نکنه

    • ‏‏
      علی امینی(۶ بهمن ۱۳۹۲)

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

  • ‏‏

    سلام
    میشه بگید چطور میشه یک فایل CSS را به html وصل کرد؟ممنون میشم توضیح دقیق بدید؟

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram