نگــاهــی متفـــاوت بــه طراحـــی
A Different View on design

Hypertemp.ir

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

پست شماره 204
13:41 , جمعه 23 مرداد 1394

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

با سلام خدمت همه دوستان عزیز

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

 

با سلام خدمت همه دوستان عزیز

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

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

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

این آموزش ها به خاطر سرعت نت ایران و باتوجه به حجمی بودن بعضی از اینترنت های دوستان به صورت متن - مثال و تصویر گذاشته میشود.

 

پیش نیاز های این دوره طراحی قالب :

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++

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

محیط نرم افزار 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 رفته و یا روی آیکون زیر در برنامه کلیک کنید

آموزش ایجاد یک html

 و از بخش language به بخش H رفته و روی html کلیک کنیدو فایلتون رو با نام دلخواه و یا پیشنهادی ما index ذخیره کنید حالا چراشو جلوتر میگم .

خوب شما تا اینجا فایل Html رو ایجاد کردین.

پیش نیاز های یک قالب html

هر قالب اچ تی ام ال چند بخش مهم داره که در زیر به توضیح این بخش ها میپردازیم .

در خط اول قالب ما باید نسخه html رو تعین کنیم که برای اچ تی ام ال از تگ زیر استفاده میکنیم.

خوب تا اینجا نسخه اچ تی ام المون رو تعین کردیم که html 5 هست . بخش دیگر شروع سند html هست

که عنصر اون در اچ تی ام ال به صورت زیر هست . توجه داشته باشین بیشتر عنصر های اچ تی ام ال دارای یک تگ شروع و ابتدایی و یک تگ انتهایی و پایانی هستن . در واقع انگار ما مجموعه بندی میکنیم یک ابتدا و انتها برای اون عنصر تعیین میکنیم و یک سری عنصر دیگه رو درونش قرار میدیم .

آموزش عنصر html

خوب سایر بخش های مهم و اصلی یک سند html دو عنصر head و body هستند که در عکس زیر به تشریح کاملش پرداختیم.

آموزش عناصر html

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

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

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

http://up.hypertemp.ir/download/568950/Hyper-index.html

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

باتشکر همراه ما باشید - بیست و سوم مرداد ماه 1394  -

 

 

توجه : تمام حقوق مطالب برای هایپرتمپ محفوظ می باشد.

نظرات ارسال شده

  • faramarz 1395/7/16 , 21:04

    یعنی یک از همکاراتون رفته؟؟؟؟
    خب ما شخص خواصی رو نمیشناسیم ما این سایتو میشناسیم!!!!

    پاسخ : خودم اگه وقت کردم میزارم ادامشو ولی قولی نمیدم

  • faramarz 1395/7/16 , 14:25

    !امروز جمعه است و من همچنان به صفحه مانیتور خیره موندم

    پاسخ : فکر نکنم دیگه ادامه داشته باشه اموزش

    اونی ک این قسمت رو گذاشته رفته

  • مهدی حسینی 1395/3/22 , 15:16

    سلام لطفا قسمت دوم رو هم سریع بگذارید مرسی فداتون .

    پاسخ : فک نکنم قسمت دومی در کار باشه

  • متین 1395/2/12 , 13:29

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

  • 1394/10/9 , 11:45

    ممنون آقا مرتضی♥

    پاسخ : ممنون از شما بابت نظر انرژی بخشتون

  • SaEeD GH 1394/7/1 , 20:30

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

    پاسخ : ممنون از شما بابت حمایتتانون با نظرات امید بخشتون سعید جان

  • dxhidden 1394/6/24 , 1:24

    سلام داداش مرتضی
    داداش قسمت بعدیش کی میاد؟

  • موزیک 1394/6/15 , 19:54

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

    ممنون

  • امیررضا 1394/6/2 , 16:44

    سلام آقای مدیر وبلاگ میشه منو هم نویسنده وبسایت کنین تروخدا همه چی بلدم به جز ساخت قالب که با این آموزش شما انشاءلله اونوهم یاد میگیرم همه چی دارم به جز فتوشاپ که دوسهروز دیگه میخرم.لطفا منو هم نویسنده کن خواهش

  • علی امینی 1394/6/2 , 0:34

    سلام آقا مرتضی خواهش میکنم آموزش دومش رو هم بذارین زود تر خواهش میکنم

  • نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتی