من پیشنهاد میکنم قالب های امده رو دست کاری کنی و تغییر بدی تا چیزهایی رو که خوندی بیشتر با کاربردش اشنا بشی تا بتونی از پایه خودت طراحی کنی.
اما یک سری پیشنهاد دیگه هم دارم :
این موارد رو فراموش میکنم
1. همیشه تگها را ببندیدچندی پیش ممکن بود مواردی این چنینی عادی به نظر برسد :
1
<li>Some text here.
2
<li>Some new text here.
3
<li>You get the idea.
دقت کنید در کد بالا تگهای ol یا ul وجود ندارد و حتی تگ li هم بسته نشده است. اما امروزه به خاطر استاندارد سازی وب سایتها این کار کاملا اشتباه است و ممکن است باعث ایراداتی در سایت شما بشود. پس همیشه همه تگهای خود را ببندید :
1
<ul>
2
<li>Some text here. </li>
3
<li>Some new text here. </li>
4
<li>You get the idea. </li>
5
</ul>
2. DOCTYPE درست انتخاب کنیدهمیشه بسته به نوع نیاز خود بهترین DOCTYPE را برای اسناد خود انتخاب کنید.
3. هیچوقت از Inline Style ها استفاده نکنیدبعضی مواقع که دارید روی کد خود کار می کنید ممکن است وسوسه انگیز باشد که برای دادن استایل از روش inline استفاده کنید :
بهتر است همیشه ابتدا کدنویسی ساختار سایت خود را تکمیل کنید و بعد به استایل دادن آن توسط فایل بیرونی CSS بپردازید :
در این پست می توانید اطلاعات بیشتری را در مورد انواع روشهای دادن استایل بدست آورید.
1
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>
1
#someElement > p {
2
color: red;
3
}
4. فایلهای CSS بیرونی را در head قرار دهیدشما می توانید فایهای بیرونی CSS را هر جا که بخواهید قرار دهید. اما پیشنهاد می شود که این فایلها درون head قرار گیرند چون لود شدن صفحه ها افزایش می یابد.
1
<head>
2
<title>My Favorites Kinds of Corn</title>
3
<link rel="stylesheet" type="text/css" media="screen"href="path/to/file.css" />
4
<link rel="stylesheet" type="text/css" media="screen"href="path/to/anotherFile.css" />
5
</head>
5. فایلهای javascript را در انتها قرار دهیدیکی از مهمترین اهداف در طراحی وب سایت سریع لود شدن صفحات میباشد ، برای همین منظور همیشه بهتر هست که کدهای جاوااسکریپت را در انتهای صفحه قرار دهیم تا کاربر منتظر لود شدن همه کدهای
جاوااسکریپت نماند.
1
<p>And now you know my favorite kinds of corn. </p>
2
<script type="text/javascript" src="path/to/file.js"></script>
3
<script type="text/javascript"src="path/to/anotherFile.js"></script>
4
</body>
5
</html>
6. از inline javascript استفاده نکنیدخیلی مواقع دستورات جاوااسکریپت را به طور مستقیم در کد HTML قرار داده میشود در صورتیکه این کار خیلی جالب نیست و بهتر هست همه کدهای جاوااسکریپت در یک فایل خارجی قرار داده شوند.
7. همیشه Validate کنیدابتدا پلاگین Web Developer Toolbar رو برای فایرفاکس دانلود کنید، سپس از گزینه های Validate HTML و Validate CSS همیشه و به طور دائم استفاده کنید.
8. Firebug را دانلود کنیداین پلاگین فایرفاکس یکی از بهترین ابزارها برای برنامه نویسان و طراحان وب سایت است. توسط این پلاگین به راحتی می توانید کد جاوااسکریپت خود را دیباگ کنید و همه المانهای کد HTML و CSS را به راحتی بررسی
کنید و تغییر بدهید. حتما دانلود کنید !
9. از Firebug استفاده کنیدبه طور متوسط کاربران از 20 درصد از تواناییهای فایرباگ استفاده می کنند، شما میتوانید با چند ساعت وقت گذاشتن از درصد بیشتری از تواناییهای این ابزار فوق العاده استفاده کنید ، برای این منظور از منابع زیر استفاده کنید :
Overview of Firebug
Debug Javascript With Firebug – video tutorial
10. تگها را با حروف کوچک بنویسیدکد شما در این حالت هم کار می کند :
1
<DIV>
2
<P>Here's an interesting fact about corn. </P>
3
</DIV>
اما بهتر است همیشه از حروف کوچک استفاده کنید :
1
<div>
2
<p>Here's an interesting fact about corn. </p>
3
</div>
11. از تگهای h1 تا h6 استفاده کنیدیکی از بهترین عادتهایی که می توانید بکنید این است که از این 6 تگ به درستی استفاده کنید، چون هم برای موتورهای جستجو خوب است و هم رتبه سایت شما را بهتر می کند.
1
<h1>This is a really important corn fact! </h1>
2
<h6>Small, but still significant corn fact goes here. </h6>
12. اگر وبلاگ می سازید از h1 برای عنوان استفاده کنیدبهتر است در ساخت وبلاگ از تگ h1 برای عنوان مطالب استفاده کرد تا اینکه این تگ را برای عنوان سایت و لوگو قرار داد. البته این انتخاب بیشتر به عهده خود شما می باشد اما از نظر SEO این کار نتیجه بهتری خواهد داشت.
13. yslow را دانلود کنیدیاهو برای فایرباگ پلاگین عالی ساخته است که توسط آن میتوانید به نقاط ضعف وب سایت خود پی ببرید و آنها را بهینه کنید. این پلاگین را نیز حتما دانلود کنید.
14. navigation را درون تگ ol قرار دهیدهر وب سایتی یک navigation دارد، شما میتوانید این قسمت را به صورت زیر کدنویسی کنید :
1
<div id="nav">
2
<a href="#">Home </a>
3
<a href="#">About </a>
4
<a href="#">Contact </a>
5
</div>
اما روش بهتر این است که این قسمت را درون تگ ol و li قرار دهید :
1
<ul id="nav">
2
<li><a href="#">Home</a></li>
3
<li><a href="#">About</a></li>
4
<li><a href="#">Contact</a></li>
5
</ul>
15. یاد بگیرید چگونه IE را هدف قرار دهیدچه بخواهید و چه نخواهید همیشه هنگام کدنویسی با IE سروکله خواهید زد. یکی از بهترین روشها این است که ابتدا کد CSS را کامل بنویسید، سپس برای قسمتهایی که در Internet Explorer به مشکل میخورید یک فایل CSS جداگانه تهیه کنید و آنرا فقط برای IE اجرا کنید :
1
<!--[if lt IE 7]>
2
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
3
<![endif]-->
کد فوق می گوید که اگر مرورگر کاربر IE بود و نسخه آن کمتر از 7 بود این کد را اجرا کند، اگر میخواهید خود IE 7 هم شامل شود به جای lt عبارت lte را به کار ببرید.
16. یک برنامه برای کدنویسی انتخاب کنیدچه روی پی سی کار کنید و چه روی مک همیشه انتخابهای عالی برای کدنویسی دارید، در زیر لیستی را مشاهده می کنید که تعدادی از این برنامه ها را معرفی کرده است :
عاشقان پی سی :
InType
E-Text Editor
Notepad++
Aptana
Dreamweaver CS4
عاشقان مک
Coda
Espresso
TextMate
Aptana
Dreamweaver CS4
17. وقتی وب سایت تمام شد آنرا فشرده کنیدتوسط zip کردن فایلهای CSS و JS میتوانید تا 25 درصد حجم آنها را کاهش دهید. توسط ابزارهای آنلاین زیر می توانید این کار را انجام دهید :
JavaScript
Javascript Compressor
JS Compressor
CSS
CSS Optimiser
CSS Compressor
Clean CSS
18. بریدن، بریدن و بریدنشما معمولا عادت دارید که وقتی کدنویسی می کنید هر پاراگراف را درون یک div قرار دهید و آن div را هم درون یک div دیگر قرار دهید. اما بهتر است وقتی کدنویسی سایت تمام شد به کدها دوباره نگاه بندازید و تگهای اضافی که استفاده نکرده اید را پاک کنید تا سرعت سایت شما افزایش یابد.
19. همه تصاویر به alt نیاز دارندبه خاطر accessibility و validation حتما لازم است که alt در تصاویر قرار داده شود، فراموش نکنید !
بد :
1
<IMG SRC="cornImage.jpg" />
بهتر :
1
<img src="cornImage.jpg" alt="A corn field I visited." />
20. سورس را ببینیدهمه ما به نحوی از هم کپی میکنیم، اما مهم این است که از این کپی کردنها چیزی یاد بگیریم و بعدها خودمان کدنویسی بکنیم، برای شروع بد نیست به سایتهای مختلف رفته و سورس آنها را ببینید و کپی کنید (البته طرح گرافیکی را نه فقط کد)، سپس بعد از مدتی می بینید که می توانید برای خودتان هم کد بنویسید.
21. همه المانها را استایل بدهیداین تمرین بیشتر برای موقعی مناسب است که برای مشتری طراحی می کنید، ممکن است شما در طرح خود از تگ لیست استفاده نکرده باشید اما از کجا می دانید مشتری شما هم نمی خواهد از آن استفاده کند، برای همین علت بهتر است همیشه همه المانها را با توجه به استایل سایت کدنویسی کنید حتی اگر از آنها استفاده نمی کنید.
22. فتوشاپ یاد بگیریدوقتی کدنویسی HTML و CSS را یاد گرفتید بهتر است فتوشاپ را هم یاد بگیرید، چون ابزاری بسیار کارآمد و مفید برای طراحی وب سایت خواهد بود. از منابع زیر می توانید استفاده کنید :
Videos section
Lynda.com
You Suck at Photoshop
چند ساعت اختصاص دهید تا کلیدهای میانبر در فتوشاپ را یاد بگیرید
23. همه تگهای HTML را یاد بگیریدخیلی از تگهای HTML هستند که به ندرت از آنها استفاده می کنید، اما این بدین معنی نیست که نباید آنها را یاد بگیرید. برای مثال تگ abbr و یا cite .
24. در فضای مجازی فعال شویدوقتی یک مطلبی را در مورد طراحی و برنامه نویسی وب سایت فرا گرفتید چرا آنرا با بقیه قسمت نمی کنید ؟ یک وبلاگ بسازید و دانسته های خود را آموزش دهید ! خیلی از کاربران هستند که کمتر از شما می دانند. با این کار هم به بقیه کمک کردید و هم می توانید دانسته های خود را هم محک بزنید.
25. از CSS Reset استفاده کنیداین مورد یکی از مواردی است که همیشه سر استفاده کردن یا نکردن آن بحث است، به نظر من بهتر است یکی از فایلهای معروف CSS Reset را دانلود کنید و طبق آن برای خود یک فایل جداگانه بسازید مثلا از فایل Eric Mayerاستفاده کنید. اگر تنها فایل را کپی کنید به درستی نخواهید فهمید که این کدها دقیقا چه کاری را انجام می دهند.
26. تراز کنیدیکی از بهترین تمرینها این است که سعی کنید در طرحهایتان همه المانها با هم تراز باشند.
27. slice کردن قالب فتوشاپحال که کدنویسی HTML و CSS را فرا گرفتید و قالب خود را در فتوشاپ طراحی کردید باید یاد بگیرید که چگونه میتوانید قالب فتوشاپ خود را برای کدنویسی تکه تکه و یا همان slice کنید. خیلی کار سختی نیست فقط نیاز به تمرین دارد، می توانید از منابع زیر هم برای یادگیری استفاده کنید :
ساخت وب سایت توسط فتوشاپ
Slice and Dice that PSD
From PSD to HTML/CSS
امید وارم این مطالب بهت کمک کرده باشه دوست عزیز .
تادرودی دیگر بدرود .:n18:
مشاهده نسخه کامل
: