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

- visibility ۳۷ mode_comment

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

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

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

 

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

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

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

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

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

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

 

info نکته :

همیشه کد هایتان را به صورت تو در تو بنویسید و تورفتگی ها (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 دادید، ببینید.

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

comment دیدگاه کاربران
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 به پایین از روی تمام ویندوز ها کم بشه. 😀 😀

nilo

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

N a S e R

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

رضا ساطع بیدگلی

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

نادیا

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

لقمان آوند

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

علی

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

لقمان آوند

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

mina

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

کیوان علی محمدی

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

mina

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

مهشاد کلانتری

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

mina

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

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

mina

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

کیوان علی محمدی

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

meyti pugo

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

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

mina

من تمام اینها رو تست کردم (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 یا جاوااسکریپت چه کار های زیادی میشه کرد.

elham

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

سجاد دریس

این آموزش رو بخونید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.