با سلام خدمت همه دوستان عزیز
اول از همه بابت این تاخیر و بدقولی هایی که پیش اومد من عزرمیخوام درجریانید دیگه چیشد . این جلسات هر هفته یک جلسه قرار میگیره تمامی آموزش ها توسط خودم تایپ و نوشته میشه و دانسته های خود منه شاید با حرفای همه کدنویسا فرق کنه ولی بالاخره شیوه ما اینه . اگه مبحثی آموزش دادم و شما بهتر اون اموزش رو بلد بودین توی نظرات بفرستین ماهم یادبگیرم .به ساده ترین زبون دارم یاد میدم و کلی اصطلاحات قلمه سلمبه هم نمیگم .این آموزش تنها و تنها کاربردی هست و برای یادگرفتن طراحی قالب هست نه ادعا کردن که منم اصطلاح بلدم .
با سلام خدمت همه دوستان عزیز
اول از همه بابت این تاخیر و بدقولی هایی که پیش اومد من عزرمیخوام درجریانید دیگه چیشد . این جلسات هر هفته یک جلسه قرار میگیره تمامی آموزش ها توسط خودم تایپ و نوشته میشه و دانسته های خود منه شاید با حرفای همه کدنویسا فرق کنه ولی بالاخره شیوه ما اینه . اگه مبحثی آموزش دادم و شما بهتر اون اموزش رو بلد بودین توی نظرات بفرستین ماهم یادبگیرم .به ساده ترین زبون دارم یاد میدم و کلی اصطلاحات قلمه سلمبه هم نمیگم .این آموزش تنها و تنها کاربردی هست و برای یادگرفتن طراحی قالب هست نه ادعا کردن که منم اصطلاح بلدم .
فقط یک نکته تموم آموزش های گروه بنده رو با دقت خط به خط بخونید و دنبال کنید و اگر میخواهید یاد بگیرید مثال ها رو تمرین کنید .
دقت کنید در ابتدا شما لازم نیست همه متغیر های اچ تی ام ال و سی اس اس رو حفط کنید بر اساس زمان کامل همشون رو به خاصر خواهید سپرد فقط کاربردش به خاطر بسپارسید.
این آموزش ها به خاطر سرعت نت ایران و باتوجه به حجمی بودن بعضی از اینترنت های دوستان به صورت متن - مثال و تصویر گذاشته میشود.
پیش نیاز های این دوره طراحی قالب :
1- اولین پیش نیازی که فعلا نیاز داریم یک نرم افزار ادیتو برای طراحی قالب هست که بنده نرم افزار NotePad++ که شما میتوانید از لینک زیر نسخه بنده رو دانلود کنید.
https://notepad-plus-plus.org/repository/6.x/6.8.1/npp.6.8.1.Installer.exe
2- دومین پیش نیاز نرم افزار فتوشاپ هست که برای سطح حرفه ای در نظر گرفته شده هست که فک کنم دوماه دیگه دوره اون رو شروع کنیم پس زیاد عجله رو تهیه این پیش نیاز نداشته باشین.
مهم ترین پیش نیاز پشتکار - تمرین تمرین و تمرین
جلسه اول - بخش اول : مقدمات طراحی قالب
خوب با اولین آموزش ما همراه ما هستید و باید هرکاری که قرار انجام بدیم یک مقدمه ای از اون کار و حرفه بدونیم .سعی میکنم از تشبیه استفاده کنم در آموزش ها که قشنگ مطلب برای شما جا بیفته .
ما در این دوره قصد داریم Html 5 و css 3 + رسپانسیو + کمی جاوا + کمی جی کوئری + رسپانسیو + سئو مقدماتی رو به شما یاد بدیم.
مرحله به مرحله جلو میریم اگه سوالی بود یا بخش مبهمی بود میتونید از طریق نظرات با من درمیان بگزارید .
خوب هر قالبی که شما میبینید از دو بخش کلی تشکیل شده یک html و دیگری css این دو لازمه طراحی یک قالب هستند . قسمت اچ تی ام ال به مانند اسکلت یک ساختمون هست که تمامی اجزا رو به خودش میگیره ولی هیچ ظاهری نداره تنها محتوا و فرم کلی رو میسازه ولی css به مانند آجر و رنگ و ... هست که به این اسکلت (html) شکل میده - هر بخش رو از بخش دیگرش جدا میکنه و کاملا ظاهر قالبو به وجود میاره .
جلسه اول - بخش دوم : آموزش کار با نرم افزار notepad++
خوب وقتی ما نرم افزار رو دانلود کردیم و نصب کریدم با محیط نرم افزار رو به رو میشیم .من بخش هایی که نیاز داریم رو کامل توضیح میدم باقیشم فعلا نیازی نداریم .جهت مشاهده عکس ها در سایز بزرگ روشون کلیک کنید.
خوب در تولبار بالای این نرم افزار کلی بخش داریم که ما بخش های مختلف مورد نیاز این نرم افزار رو بهتون توضیح میدم.
آموزش بخش file
بخش New : ما با استفاده از این بخش قادر خواهیم بود یک سند متنی جدید ایجاد کنیم که دکمه میانبر آن عبارت است از ctrl + N
هر سند متنی جدید میتواند یکه فایل html و یا css و یا جاوااسکریپت js , jquary و دیگر سند ها با زبان های مختلف برنامه نویسی باشد.
بخش Save و Save as شما با این بخش میتونید سندتون رو ذخیره کنید که خیلی مهمه و دکمه میانبر آن عبارت است از ctrl + S
آموزش بخش Search
ترجیج میدم این بخش رو کلا با کلید میانبر ctrl + F خلاصه کنم چون به قدری ساده هست که همتون متوجه میشید بازم سوالی بود در نظرات همراهتونیم.
آموزش بخش Encoding
شما در این بخش میتونید اینکدینگ نوع سندتون رو تعین کنید که استاندارد پیشفرض جهانیش UTF-8 هست که پشتیبانی کامل از زبان شیرین پارسی دارد.
اینکدینگ(نوع یونی کد) چیست: به زبان ساده مي‌توان گفت كه يوني‌كد روشي براي تبديل متون به رشته‌هاي عددي قابل ذخيره در كامپيوتر است. روش‌هاي گوناگوني براي اين كار وجود دارند، ولي مزيت يوني‌كد نسبت به آنها، اين است كه يك روش كامل جهاني است؛ به اين معني كه تروف همه زبان‌هاي دنيا و تمامي علائم مورد استفاده همه مردم جهان در آن آمده‌اند و همچنين در همه‌جا قابل نمايش است و نياز به امكانات خاصي ندارد. البته يوني‌كد هنوز جوان است ولي امروزه بسياري نرم‌افزارهاي رايج در جهان (از جمله همه مرورگرهاي جديد اينترنت) آن را پشتيباني مي‌كنند.
آموزش بخش Language
شما از این بخش قادر خواهید بود نوع فایل سند متنیتون رو تعین کنید به طور مثال تعین کنید که این سندمون یک فایل html (همون اسکلته ) باید یا css و یا هر نوع فایلی که مد نظرمون هست باشه .
به طور مثال برا اینکه تعین کنیم این فایل html هست از بخش language روی حرف H رفته و روی Html کلیک کردهو نوع سندمون تعیین میشه. شما با استفاده از حرف اول نوع فایلی که میاید میتونید نوع سندتون رو تعیین کنید و یا اینکه برای css از حرف C باید پیداش کنید.
اتوکمپلیت چیست و چگونه در این نرم افزار فعالش کنیم ؟
خوب قبل از آموزش فعال کردنش بهتره بگم این قابلیت چیست. شما با استفاده ازین قابلیت میتونید تگ ها و یا خاصیتن هایی که یادمون نمیاد وقتی چند حرف اولش رو تایپ میکنیم باقی حروف تگ یا خاصیت یا متغیر یا ... رو نشونمون میده و تایپش میکنه و یا تگ های اچ تی ام ال رو که باید ببندیم و خودکار میبنده جلوتر کامل با کارایی های این قابلیت کاملا آشنا میشید.
برای فعال کردن این بخش مسر زیر رو دنبال کنید.
از بخش settings درون تولبار بر روی Prefrences... کلیک کرده به قسمت auto-completion رفته و مانند تصویر زیر تیک هارو فعال کنید.
خوب دیگه باقیشم فعلا نیاز نداریم و بعدا باقیشو آموزش میدم.
جلسه اول - بخش سوم: آموزش ایجاد یک سند html و تعین نسخه html و بخش های اصلی html
آموزش ایجاد یک سند html
خوب برای ایجاد یک سند html از تولبار بالا به بخش file و new رفته و یا روی آیکون زیر در برنامه کلیک کنید
و از بخش language به بخش H رفته و روی html کلیک کنیدو فایلتون رو با نام دلخواه و یا پیشنهادی ما index ذخیره کنید حالا چراشو جلوتر میگم .
خوب شما تا اینجا فایل Html رو ایجاد کردین.
پیش نیاز های یک قالب html
هر قالب اچ تی ام ال چند بخش مهم داره که در زیر به توضیح این بخش ها میپردازیم .
در خط اول قالب ما باید نسخه html رو تعین کنیم که برای اچ تی ام ال از تگ زیر استفاده میکنیم.
خوب تا اینجا نسخه اچ تی ام المون رو تعین کردیم که html 5 هست . بخش دیگر شروع سند html هست
که عنصر اون در اچ تی ام ال به صورت زیر هست . توجه داشته باشین بیشتر عنصر های اچ تی ام ال دارای یک تگ شروع و ابتدایی و یک تگ انتهایی و پایانی هستن . در واقع انگار ما مجموعه بندی میکنیم یک ابتدا و انتها برای اون عنصر تعیین میکنیم و یک سری عنصر دیگه رو درونش قرار میدیم .
خوب سایر بخش های مهم و اصلی یک سند html دو عنصر head و body هستند که در عکس زیر به تشریح کاملش پرداختیم.
خوب تا اینجا ما بخش های اصلی یک سند اچ تی ام ال و نسخه اچ تی ام ال رو معرفی کردیم . درجلسه بعدی آموزش کامل بخش head و کاربرد head و جمع بندی کامل head میپردازیم . تا آموزش بعدی به درود شروع بخش جذاب طراحی قالب از هفته بعد.
با استقبال خود به ما روحیه ادامه این آموزش هارو بدین و هر پیشنهاد بهتری هم دارین درنظرات با من در میان بگزارید از طریق ایمیلم سوالی هم بود در خدمتم در بخش نظرات و ایمیلم.
راستی اینم فایل پروژمون تا امروز میتونید دانلودش کنید و حتما با نرم افزار کدنویسی که معرفی کردم باز کنید
http://up.hypertemp.ir/download/568950/Hyper-index.html
از جلسه آینده دیگه طراحی این قالب ها ساده نیست . این آموزش رو سبک تهیه کردم که برای تمومی سنین قابل فهم باشد.
باتشکر همراه ما باشید - بیست و سوم مرداد ماه 1394 -
