0

راهنمای کامل شروع یادگیری طراحی سایت

یادگیری طراحی سایت
یادگیری طراحی سایت

یادگیری طراحی سایت

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

مطلب مرتبط: دانلود کتاب آموزش طراحی وبسایت از ۰ تا ۱۰۰

یادگیری طراحی سایت می تواند دلایل مختلفی داشته باشد. برخی به عنوان شغل این کار را به صورت حرفه ای دنبال می کنند و برخی فقط به عنوان علاقه مندی. به هر صورت اگر قصد یادگیری طراحی سایت را دارید، در این مقاله از کاسپریا، طراحی سایت ارزان در کرج، مرحله به مرحله نحوه یادگیری طراحی و کدنویسی صفحات وب (طراحی سایت)، توضیح داده شده است. البته قابل توجه است که در این مطلب نحوه یادگیری “طراحی” سایت که شامل کدنویسی است توضیح داده می شود و نه “راه اندازی” سایت. “طراحی” سایت به معنی طراحی و کدنویسی یک سایت از ابتدا است ولی “راه اندازی” سایت معنی خرید هاست (فضای نگه داری فایل ها سایت) و ثبت دامین (آدرس سایت) و نصب یک سیستم مدیریت محتوای آماده مانند وردپرس است که نیازی به کدنویسی ندارد.

پیش نیازهای یادگیری طراحی سایت

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

یادگیری HTML، زبان ایجاد ساختار صفحات وب

HTML

وب سایت ها و صفحات وب معمولاً دارای بخش های مشترکی هستند. به عنوان مثال هِدر (بالاترین نقطه صفحه که شامل لوگو و منو است)، سایدبار (یعنی ستون کنار محتوای سایت که معمولاً شامل دسته بندی، تبلیغات، و لینک های مختلف است)، بخش محتوا (که شامل عنوان، متن و تصاویر محتوای اصلی سایت است) و فوتِر (یعنی انتهای سایت که معمولاً شامل متن کپی رایت و لینک به دیگر صفحات است). این بخش های مختلف توسط زبان HTML که مخفف Hypertext Markup Language است تعریف می شوند. اِچ تی اِم اِل مجموعه ای از تَگ های مختلف است که برای تعریف بخش های مختلف (مثل هِدر، سایدبار، بخش محتوا و فوتِر) بکار می رود. پس به عنوان مثال یک تَگ برای تعریف و درج متن در صفحه است، یک تگ برای درج عکس در صفحه، تگ دیگری برای ایجاد عنوان (مثل عنوان مطالب) و ده ها تگ دیگر که هر یک برای تعریف بخش و جزء خاصی در صفحه بکار گرفته می شوند. پس از تعریف اجزاء و بخش های مختلف، این بخش ها و اجزاء با زبان دیگری به نام CSS استایل و شکل دهی می شوند. CSS در ادامه توضیح داده شده است. جهت شروع یادگیری HTML به صفحه آموزش مربوط به آن در وبسایت با نام اچ تی ام ال مراجعه نمایید.

یادگیری CSS، زبان ایجاد استایل ها و ظواهر

CSS

پس از تعریف اجزاء و بخش های مختلف مانند هِدر، سایدبار، محتوا و فوتِر توسط HTML حالا این عناصر توسط زبان CSS که مخفف Cascading Style Sheets است اِستایل دهی خواهند شد. به عنوان مثال اندازه و نوع فونت، موقعیت و سایز عناصر در صفحه، رنگ پس زمینه آنها، فاصله آنها از یکدیگر، حاشیه و کادر دور آنها و هر چیزی که به شمایل و ظواهر این عناصر مربوط باشد با زبان CSS کدنویسی می شود. یادگیری سی اِس اِس نسبت به HTML زمان بیشتری نیاز دارد چراکه دارای جزئیات بیشتری است. تا اینجا با یادگیری همین دو زبان HTML و CSS شخص می تواند وب سایت های اِستاتیک (Static) طراحی کند. وب سایت استاتیک به معنی یک صفحه ثابت است که برای تغییر بخشی از آن (به عنوان مثال، عنوان یا متن صفحه)، این موارد باید از طریق کدهای آن ویرایش شود. در مقابل طراحی سایت داینامیک (Dynamic) است که دارای پنل مدیریت بوده و شخص بدون نیاز به ویرایش کدهای اصلی می تواند متن، عنوان صفحات و دیگر موارد را ویرایش کند.

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

یادگیری JavaScript، زبان برنامه نویسی کلایِنت ساید

Javascript

در طراحی وب زبان برنامه نویسی کلایِنت ساید (Client Side) یا به فارسی “سَمتِ کاربر” به معنی زبان برنامه نویسی است که در مرورگر کاربر اجرا می شود و این بر خلاف زبان سِروِر ساید است که کدها در سِروِر سایت پردازش و اجرا و فقط نتیجه آن به کاربر نمایش داده می شود و کاربر کدهای اصلی را نمی بینید. JavaScript یک زبان برنامه نویسی کلاینت ساید است که یادگیری آن برای طراحی سایت لازم است. تا اینجا شخص تنها با یادگیری HTML و CSS می تواند صفحات وب طراحی کند. کاربرد کلی جاوا اِسکریپت را می توان به این صورت نام برد، بررسی و اعتبارسنجی فرم ها، ارسال و دریافت اطلاعات بدون رفرش صفحه به صورت اِیجَکس (Ajax)، انجام کارهای خاص با واکنش های مختلف کاربر (به عنوان مثال کلیک ماوس روی دکمه ای، یا فشردن دکمه ای روی کیبورد)، ایجاد اسلایدشو تصاویر و بسیاری موارد دیگر. در ادامه به این چند مثال برای روشن تر کردن موارد بالا توجه شود.

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

یادگیری یک زبان برنامه نویسی سرور ساید

PHP VS ASP.NET

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

برای طراحی وب یادگیری سه زبان HTML، CSS و جاوا اِسکریپت لازم است و جایگزین ندارد ولی برای زبان سرور ساید گزینه های مختلفی موجود است. دو انتخاب اصلی برای زبان سرور ساید یکی زبان PHP که اُپِن سورس و رایگان است و دیگری ASP.NET (اِی اِس پی دات نِت) از شرکت مایکروسافت است که رایگان نیست. برای یادگیری زبان سرور ساید و انتخاب یکی از این دو مورد، PHP توصیه می شود و دلیل آن آمار استفاده بالا (حدود ۸۰ درصد PHP و ۲۰ درصد ASP.NET) و منابع یادگیری بسیار است. ASP.NET متعلق به شرکت مایکروسافت است و یک زبان برنامه نویسی نیست بلکه بخشی از فریم ورک Net Framework. (دات نِت فِریم وُرک) است که برای ایجاد وب سایت ها و برنامه های تحت وب بکار گرفته می شود و معمولاً با زبان برنامه نویسی دیگری از همین شرکت به نام #C (سی شارپ) استفاده می شود. همچنین PHP زبان سیستم مدیریت محتوای وردپرس است که طراحان سایت آن را مبنای طراحی سایت خود قرار می دهند چراکه وردپرس بسیاری از قابلیت های مشترک و پایه یک وب سایت را دارا بوده و بدین صورت نیازی به صرف وقت و هزینه بسیار برای بازنویسی این قابلیت ها وجود ندارد که نتیجه آن کاهش زمان و هزینه مورد نیاز برای طراحی یک سایت است.

مشاهده  دانلود کتاب آموزش کامل سئو

مطالب مرتبط:

بهترین سایت، کتاب و یا فیلم برای یادگیری طراحی سایت کدام است؟

بهترین و کامل ترین سایت برای یادگیری کدنویسی به زبان های بالا که به صورت انگلیسی روان است سایت W3Schools.com بوده که بدون نیاز به عضویت یا هرگونه هزینه مطالبش در دسترس است. با ورود به صفحه اصلی این سایت دسته بندی مواردی که در بالا توضیح داده شد مانند JavaScript ،CSS ،HTML و PHP را مشاهده خواهید کرد. در مورد کتاب هم باید گفت که کتاب های بسیار زیادی در مورد یادگیری طراحی وب وجود دارد که به عنوان مثال می توان به کتاب HTML & CSS: Design and Build Web Sites اشاره کرد که نسخه PDF آن قابل دانلود است. و برای فیلم آموزشی هم فیلم های بسیاری زیادی از Lynda و TutsPlus وجود دارد که امکان دانلود آنها از سایت های مختلف ممکن است چراکه امکان خرید اشتراک از این سایت ها از ایران ممکن نیست. برای دانلود می توانید عبارت هایی مانند “دانلود آموزش Lynda HTML” یا “دانلود آموزش Lynda CSS” را در گوگل جستجو کنید.

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

یادگیری اصول طراحی

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

تبدیل PSD به HTML

در طراحی سایت برخی ترجیح می دهند طراحی و کدنویسی خود را در نرم افزار کد ادیتور (ویرایشگر کد) و مرورگر انجام دهند و برخی دیگر طراحی ظاهری را در نرم افزار فتوشاپ انجام می دهند و سپس آن را کدنویسی و به یک صفحه قابل استفاده در مرورگر تبدیل می کنند. به این کار تبدیل طرح PSD به HTML گفته می شود.

تبدیل PSD به HTML به این صورت انجام می شود که پس از اتمام و نهایی کردن طراحی، ابتدا بخش هایی که با کدنویسی قابل اجرا نیستند مانند لوگو، آیکان ها و غیره از طرح PSD برش و استخراج می شود سپس طراح سایت با نگاه کردن به طرح PSD اصلی آن را کدنویسی می کند.

مطلب مرتبط: فیلم آموزش طراحی وبسایت در نرم افزار فتوشاپ

تبدیل PSD به HTML از نظر ظاهر باید دقیقاً شبیه طرح اصلی باشد و این کار نیازمند مهارت بالا در کدنویسی HTML و CSS است. تبدیل و کدنویسی PSD جزو مراحل یادگیری طراحی سایت نیست ولی یادگیری آن برای افرادی که قصد طراحی سایت حرفه ای را دارد لازم است.

یادگیری اصول سِئو

SEO

اگر شخص قصد یادگیری طراحی سایت به عنوان علاقه مندی را داشته باشد، یادگیری سِئو ضروری نیست ولی اگر قصد یادگیری طراحی سایت به صورت حرفه ای را داشته باشد یادگیری اصول سئو کاملاً ضروری است. سئو یا به انگلیسی SEO (که البته عبارت صحیح آن سِئو نیست بلکه اِس ای اُ است) به معنی بهینه سازی سایت برای موتورهای جستجو مانند گوگل با هدف رتبه بهتر و دریافت بازدید کنندگان (و در نتیجه مشتریان) بیشتر در عبارات کلیدی مورد جستجوی کاربران است. از اصول سئو می توان به انتخاب عنوان خوب و صحیح، استفاده از عبارات کلیدی مورد جستجوی افراد در متن محتوا و دریافت بک لینک از دیگر سایت ها اشاره داشت. اصول سئو دارای جزئیات زیادی است که کلیات آن در بالا توضیح داده شد. برای یادگیری سئو می توان از راهنمای یادگیری SEO در سایت ماز (Moz) استفاده کرد. برای ورود اینجا کلیک کنید.

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

یادگیری طراحی سایت چقدر طول می کشد؟

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

جمع بندی

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

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

ایمیل جهت ارتباط با ما و ارسال مقالات: it.research.ir@gmail.com

انتهای پست مهمان/

اگر این مطلب را دوست داشتید، با امتیاز دادن به آن از ما حمایت کنید.
[کل: میانگین: ]

نظرات کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *