آموزش طراحی سایت
راهنمای جامع آموزش طراحی سایت – طراحی سایت را از کجا شروع کنیم
خیلی از دوستان نمیدانند آموزش طراحی سایت را از کجا و با چه زبانی شروع کنند و این موضوع شده یکی از مهمترین دغدغه های کسانی که تمایل دارند طراح وب شوند.
ما قصد داریم در این متن به شما کامل راهنمایی کنیم که یادگیری طراحی و دیزاین وبسایت را از کجا و با چه زبانی شروع کنید.
گام یک در آموزش طراحی سایت
قدم اول در این مسیر یادگیری بدون شک و تردید آموزش HTML میباشد. شما باید در ابتدای این مسیر بتوانید آموزش طراحی سایت با HTML را فرا بگیرید.
مهم نیست شما آیا قصد دارید جاوا بخوانید یا جاوااسکریپت، PHP و یا حتی ASP، هر مسیری که در آینده شما قصد داشته باشید طی کنید قدم همه این مسیرها یادگیری HTML میباشد.
زبان HTML ساختار و بدنه اصلی صفحات سایت را مشخص میکند و خروجی زبانها همه به کمک HTML است. منابع بسیاری به شکل PDF و یا کتابهای کاغذی هستند ولی پیشهاد نمیشود، چرا که به روز نگه داشتن کتابها و PDF ها با تاخیر بسیاری امکانپذیر است.
منبع خوب میتواند یک سایت خوب و به روز باشد. به عنوان مثال سایت W3school چنین ویژگیهایی دارد. البته شما در سایت میزفا هم میتوانید آموزش های HTML را به شکل رایگان دنبال کنید.
مشاهده آموزش HTML کلیک نمایید.
گام دو در آموزش طراحی سایت
گام دوم به گام اول بستگی داره، یعنی باید ابتدا آموزش HTML پیش ببرید و سپس آموزش CSS شروع کنید. درواقع HTML بدون CSS عملا به درد نخواهد خورد. با HTML ما ساختار سایت و بدنه یک وبسایت را پیکربندی میکنیم با CSS به ساختار و بدنه سایت رنگ و استایل میدهیم.
مثلا در همین صفحه از چه نوع فونت و یا رنگی استفاده شده؟ پیش زمینه این صفحه به چه شکل است؟ چپ و راست کردن المانهای HTML و متنها همه به کمک CSS صورت میگیرد.
وقتی شما HTML و CSS فرا گرفتید میتوانید طراحی سایت را شروع کنید. مثلا در ابتدای کار میتوانید برای وبلاگها نمونه طرح بزنید تا هم قابل استفاده برای کاربران باشد و هم یک نمونه کار اولیه برای شما حساب شود.
گام سه در آموزش طراحی سایت
گام سه کمی مهم و سخت میشود، البته سختی در انتخاب صحیح مسیر است، نه آموزش دیدن طراحی سایت. شما میتوانید در این مسیر به سمت زبان جاوا اسکریپت بروید و یا به سمت زبانهای PHP و ASP که بسیار جامع هستند بروید.
-> حال چه فرقی دارند؟
ما یک سری زبان سمت کاربر داریم که در مرورگر لود میشود همانند زبان نمادگذاری HTML و CSS و همینطور زبان جاوااسکریپت. ولی یک سری هم زبان داریم که سمت سرور لود میشوند، همانند زبانهای قدرتمند PHP و ASP، البته زبانهای دیگر هم داریم که ما صرفا همین ۲ زبان معروف را مورد بحث قرار میدهیم.
نکته: HTML و CSS زبان برنامه نویسی نیستند و به آنها زبان نمادگذاری می گویند ولی جاوااسکریپت، PHP و ASP زبان برنامه نویسی هستند و زبانهای برنامه نویسی زبان و انرژی بیشتری نیاز دارد تا شما یاد بگیرید درحالی که زبان نمادگذاری HTML وCSS شاید اگر روزی دو ساعت زمان مفید بگذارید بتوانید در دو هفته به خوبی این دو را فرا بگیرید. ولی برای زبانهای برنامه نویسی به نظر بنده اگر روزی دو ساعت وقت بگذارید بعد از سه ماه میتوانید به یک سطح قابل قبول برسید.
-> حال چه کنیم؟ کدام را انتخاب کنیم؟
شاید مسیر درست ولی بسیار طولانی این باشد که آموزش جاوا اسکریپت Javascript را بخوانید و سپس یکی از آموزش PHP و یا آموزش asp.net را انتخاب کنید.
-> آیا بین PHP و ASP فرقی است؟
خیر، فرقی ندارد شما کدام زبان را انتخاب میکنید. هر ایدهای داشته باشید میتوانید با هر دو زبان قدرتمند پیش ببرید. مهم این نیست که شما کدام را انتخاب میکنید مهم این است که هر کدام انتخاب کردید تا اخر دنبالش باشید و یاد بگیرید تا متخصص شوید. در بازار امروز کمبود متخصص است وگرنه افراد زیادی هستند که از هر زبان کمی میدانند.
پس آموزش طراحی سایت با ASP و یا آموزش طراحی سایت با PHP را شروع کنید ولی قبل آن پیشنهاد میزفا را بخوانید:
-> پیشنهاد میزفا کدام است؟
ما با یک تیر دو نشان زدیم. آموزش طراحی سایت را طوری پیاده سازی کردیم که به اندازه کافی درباره جاوا اسکریپت JavaScript بدانیم و همینطور زبان قدرتمند ASP را هم به شکل جامع با پروژه های متعدد یاد بگیریم. درواقع محوریت آموزش ما ASP.NET در اخرین نسخه Core خود است و در بین این آموزش طراحی ما به اندازهای که نیاز داریم جاوا اسکریپت را هم میآموزیم.
این آموزش ۶۰ ساعت فیلم آموزشی است. جهت مشاهده روی لینک زیر کلیک نمایید.
-
سرفصل های آموزش CSS
صفحه ای که هم اکنون در آن حضور دارید، مانند جاده ای است که رسیدن به انتهای آن، به معنی یادگیری آسان CSS است. کافیست در کنار دیگر همراهان همیشگی وب سایت میزفا در این مسیر قدم بگذارید و با گذراندن یک دوره آموزش CSS رایگان، این زبان طراحی لذت…
بیشتر بخوانید » -
جلسه ۷۹ – layout در CSS
مفهوم layout به طور خلاصه، layout به ساختار و ترتیب محتوا در صفحه وب سایت اطلاق میشه. این مفهوم، تنها مختص به CSS و آموزش طراحی وب سایت نیست، بلکه یک مفهوم عموما طراحی محور محسوب میشه که تجربه کاربری (UX) و رابط کاربری (UI) در اون نقش مهمی رو…
بیشتر بخوانید » -
جلسه ۷۸ – مثال های بیشتر از انیمیشن در CSS
تو مقاله قبل، با مفهوم اینکه انیمیشن چیه و چیکار میکنه آشنا شدیم. فهمیدیم که چطور با کمک CSS، انیمیشن های جذابی برای وب سایتمون بسازیم و مراحل اجراشون رو تعیین کنیم. اگر هنوز مقاله آشنایی با Animation ها در CSS رو نخوندید پیشنهاد میکنم هرچه سریعتر، بخونیدش و بعد…
بیشتر بخوانید » -
جلسه ۷۷ – انیمیشن در CSS
همونطور که تو مقدمه فصل آشنایی با انیمیشن ها کمی صحبت کردیم، متوجه شدیم که انیمیشن ها، به خاطر متحرک بودنشون، باعث جلب توجه کاربر به محتوای وب سایت ما میشن. ساختار انیمیشن ها در CSS انیمیشن ها، از نظر ساختاری، شباهت زیادی به transition ها دارن که در مورد…
بیشتر بخوانید » -
جلسه ۷۶ – transition در CSS
تو مقدمه، یه جمله کوچیک در مورد مفهوم transition با هم مرور کردیم. جمله ای که در موردش صحبت کردیم، این بود: “اضافه کردن مدت زمان به تغییرات استایل در CSS” مفهوم کم و بیش واضحی داره، اما در واقعیت، داره به چی اشاره میکنه؟ مفهوم و تعریف کلی transition…
بیشتر بخوانید » -
جلسه ۷۵ – تبدیلات سه بعدی در CSS
تو مقاله قبل، تبدیلات دو بعدی رو با هم بررسی کردیم، و دیدیم که میتونیم تبدیلاتی همچون انتقال، دوران، انحراف و تغییر ابعاد رو روی اون ها انجام بدیم. تبدیلات به اینجا ختم نمیشه، و ما تو این مقاله از آموزش طراحی وب سایت ، تبدیلات سه بعدی رو با…
بیشتر بخوانید » -
جلسه ۷۴ – تبدیلات دو بعدی در CSS
تبدیلات دو بعدی، چه تبدیلاتی هستن؟ و ما چطور از تبدیلات دو بعدی میتونیم استفاده کنیم؟ پشتیبانی مرورگر ها از تبدیلات دو بعدی به چه صورته؟ تو این مقاله، به این سوالات پاسخ میدیم و تبدیلات دو بعدی رو کنار هم دیگه یاد میگیریم. خاصیت transform برای استفاده از تبدیلات…
بیشتر بخوانید » -
جلسه ۷۳ – روش ها و متد های طراحی واکنش گرا
تا اینجا، با مفهوم طراحی واکنش گرا آشنا شدیم. فهمیدیم که طراحی واکنش گرا، بر پایه مفهومی به نام مدیا کوئری انجام میگیره. همچنین متوجه شدیم که چطور میتونیم با استفاده از واحد های وابسته به viewport یا همون متغیر، عناصرمون رو واکنش گرا کنیم. تو این مقاله، روش هایی…
بیشتر بخوانید » -
جلسه ۷۲ – واکنش گرایی و ابعاد عناصر
تو این مقاله، خلاصه ای از مفهوم viewport رو مرور میکنیم، و به این موضوع میپردازیم که چه خاصیت ها و واحد هایی در طراحی واکنش گرا، به خصوص در چیدمان عکسها و ویدیو ها بهمون کمک میکنن؟ مفهوم viewport در CSS میتونیم تعریف این مفهوم رو به شکل زیر…
بیشتر بخوانید » -
جلسه ۷۱ – مدیا کوئری در CSS
مدیا کوئری ها چی هستن و چطور میشه از مدیا کوئری ها استفاده کرد؟ چطور میتونیم با استفاده از اون ها صفحاتمون واکنشگرا کنیم؟ مفهوم مدیا کوئری در جلسه گذشته از آموزش طراحی سایت با مفاهیم پایه ریسپانسیو آشنا شدیم، در این جلسه میخواهیم با مدیا کوئری آشنا بشیم. مدیا…
بیشتر بخوانید »