طراحی سایت

آموزش طراحی سایت برای مبتدی ها: قدم به قدم از صفر تا صد

نویسنده: تحریریه آرسافت

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

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

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

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

چرا باید وب سایت داشته باشم؟

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

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

حال که پاسخ سؤال خود را دریافت کردید، برمی گردیم به اصل بحث که همان آموزش رایگان طراحی سایت است.

اقدامات لازم قبل از طراحی وب سایت

همواره قبل از شروع به طراحی یک وبسایت باید سه سوال اساسی از خود بپرسید؛

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

سوالات مهم قبل از طراحی سایت

سوال دوم: مخاطبین من چه کسانی هستند. پاسخ به این سوال کمک شایانی به شما در جهت طراحی ظاهر سایت و همچنین استفاده از امکانات همسو با مخاطب خواهد کرد.

سوال سوم: از چه امکاناتی باید استفاده کنم. در این مرحله باید در نظر داشته باشید استفاده از چه نوع امکاناتی می تواند تا حد زیادی نیاز شما و کاربر را برطرف کند و به اهداف طرفین نزدیکتر شد.

نحوه طراحی وب سایت

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

۱. بدون کدنویسی:

این روش از طراحی سایت نیاز به تخصص خاصی ندارد و هر فردی با کمترین آموزشی از تکنیک ها می تواند یک سایت ساده را طراحی کند. از ویژگی های این روش می توان به ساده و ارزان بودن آن نسبت به نمونه کدنویسی اشاره کرد که نهایت در عرض ۲-۳ روز می توان یک سایت را به کمک سیستم های مدیریت محتوایی نظیر وردپرس طراحی کرد.

امروزه بیش از ۴۰ درصد از سایت های موجود در دنیا از سیستم های آماده (CMS) مثل وردپرس استفاده می کنند اما ذکر این نکته بسیار حائز اهمیت است که امنیت این نوع سایت ها بسیار پایین می باشد و استفاده از سیستم های آماده نیز هیچ وقت شما را به یک طراح سایت تبدیل نخواهد کرد.

۲. کدنویسی:

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

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

آموزش قدم به قدم برای ساخت وب سایت

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

الف) طراحی سایت بدون برنامه نویسی

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

استفاده از سیستم مدیریت محتوا برای طراحی سایت

درواقع دامنه، هاست و سیستم مدیریت محتوا، جزو پیش ‌نیازهای اصلی و اولی هر سایت برای راه اندازی بشمار می ‌روند که باید تهیه شود. در ادامه به توضیح کامل تری نسبت به مراحل ساخت سایت به روش غیر کدنویسی خواهیم پرداخت:

مرحل ۱: انتخاب دامنه

هر سایتی یک اسم و آدرس الکترونیکی که کاملاً متناسب و مرتبط با حوزه فعالیت خود است را دارا می باشد که به آن دامنه گویند. به یاد داشته باشید که انتخاب یک اسم خوب تأثیر بسیار زیادی در روند برندسازی سایت شما خواهد داشت؛ به عنوان مثال Google.com یک دامنه محسوب می شود.

پسوندهای مختلفی برای دامنه وجود دارد که رایج ‌ترین آنها در ایران، پسوند com. و ir. می باشد و شما برای خرید دامنه‌های ir. باید از سایت دولتی nic.ir و برای خرید دامنه com. باید از سرویس‌ های ارائه هاست استفاده کنید.

در ضمن سالیانه باید مبلغی را جهت خرید دامنه پرداخت کنید که با توجه به نوع پسوند دامنه، این مبالغ متفاوت است؛ به عنوان مثال دامنه ‌های ir. بسیار ارزان ‌تر از دامنه‌ های com. هستند.

مرحله ۲: انتخاب هاست

در واقع هاست‌ یک فضایی است که کلیه اطلاعات سایت اعم از تصاویر، فیلم ها، پست ‌ها و … بر روی آن ذخیره می ‌شود. هاست نیز همانند دامنه تأثیر زیادی در روند پیشرفت سایت دارد به طوری که اگر اشتباه انتخاب شود و یا هاست از کیفیت بالایی برخوردار نباشد می‌ تواند تأثیرات بدی بر روی سایت شما بگذارد.

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

مرحله ۳: دانلود وردپرس

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

برای دانلود سیستم مدیریت محتوا (وردپرس) باید از سایت رسمی وردپرس استفاده شود که بعد از آن وارد مرحله اصلی طراحی سایت خواهید شد.

مرحله ۴: آپلود وردپرس بر روی هاست

در این بخش باید فایل Zip وردپرس که در مرحله قبل دانلود کردید را در هاست خودتان آپلود کنید. برای این منظور ابتدا وارد پنل کاربری هاست خود شوید و بر روی گزینه File Manager کلیک کنید، سپس وارد پوشه Public_html شوید.

بارگذاری فایل های سایت روی هاست

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

به هر حال پس از اتمام آپلود فایل ZIP، نوبت به استخراج فایل زیپ آپلود شده می باشد که برای این منظور روی فایل زیپ کلیک راست کرده و گزینه (Extract) را بزنید.

معمولاً بعد از استخراج، یک پوشه جدید به نام WordPress ایجاد می شود که تمامی فایل ‌ها به داخل آن منتقل می ‌شود ولی برای نصب وردپرس باید تمامی فایل ‌ها به صورت مستقیم در پوشه Public_html قرار داشته باشند، یعنی کافی است تنها وارد پوشه wordpress شد و تمامی فایل‌ ها را به پوشه Public_html منتقل کرد.

مرحله ۵: ساخت دیتابیس

در ادامه کار شما نیاز به یک دیتابیس دارید که برای این منظور ابتدا باید وارد پنل مدیریت هاست خود شد و از بخش Database بر روی گزینه MySQL کلیک کرد تا با وارد شدن به بخش دیتابیس، اقدام به ساخت دیتابیس خود کرد.

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

مرحله ۶: شروع به مراحل نصب (ارتباط با دیتابیس)

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

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

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

مراحل بعدی فقط وارد کردن یکسری اطلاعات معمولی است که پس از تکمیل آن بر روی دکمه «راه اندازی وردپرس» کلیک کنید. اگر تمامی مراحل به درستی انجام شده باشد، در صفحه جدید پیامی با عنوان «انجام شد» ظاهر می شود که حاکی از موفقیت بودن عملیات طراحی سایتِ رایگان است.

ب) طراحی سایت با برنامه نویسی

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

طراحی و پیاده سازی سایت با برنامه نویسی

به هر حال برای طراحی یک سایت به روش کدنویسی باید مراحل مختلفی را طی کرد که در ادامه به مهمترین بخش های آن خواهیم پرداخت.

مرحله ۱: HTML

امروزه وب سایت ‌ها از دو بخش فرانت‌ اند (Front end) و بک‌ اند (Back end) تشکیل می شوند. به بخشی که توسط کاربر قابل مشاهده بوده و در مرورگر او نمایش داده می ‌شود فرانت‌ اند و به بخشی که به پردازش ‌های سمت سرور ارتباط پیدا می کند بک ‌اند می گویند.

قسمت ظاهری یک سایت (فرانت‌ اند)، با استفاده از زبان نشانه ‌گذاری HTML ایجاد می‌ شود که این زبان به مشابه یک اسکلت برای سایت عمل می‌کند به طوری که هیچ سایتی بدون وجود «اچ تی ام ال» وجود نخواهد داشت.

البته فرقی نمی کند برنامه ‌نویسی سمت سرور را با چه زبانی انجام دهید اما شناخت نسبی زبان HTML از ضروریات طراحی سایت می باشد که با تلاش و جدیت می توان در عرض ۱۰ روز با اصول آن آشنا شد. 

مرحله‌ ۲: CSS

HTML به تنهایی نمی ‌تواند ظاهر زیبایی برای سایت پدیدار کند چراکه این زبان فقط امکان ایجاد سایت (نظیر اولین صفحه وب در طول تاریخ) را برعهده دارد.

به همین منظور برای زیباسازی صفحات وب از تکنولوژی CSS استفاده می شود که فراگیری این زبان هم علیرغم پیچیدگی های خاص خود، به راحتی در عرض یکی دو هفته انجام می گیرد. 

مرحله‌ ۳: JavaScript

تا به اینجای کار با دو بخش از مهمترین عناصر تشکیل ‌دهنده‌ی صفحات وب آشنا شدید اما برای ایجاد امکانات بیشتر در یک سایت نظیر انیمیشن‌‌، تاریخ، ساعت، اسلایدرو ... باید به سراغ یادگیری زبان JavaScript بروید.

جاوا اسکریپت برخلاف HTML و CSS که از زبان ‌های نشانه‌ گذاری بودند، یک زبان برنامه‌ نویسی است که فراگیری آن کمی زمانبر خواهد بود.

مرحله‌ ۴: انتخاب زبان برنامه‌ نویسی

همانطور که قبلاً اشاره شد، برای ایجاد بک ‌اند سایت باید سراغ یک زبان برنامه ‌نویسی به سوی سرور رفت تا با استفاده از آن بتوان صفحات سایت خود را پویا و متحرک کرد. انتخاب‌ های زیادی پیش روی شماست که به عنوان نمونه می توان به زبان برنامه نویسی PHP اشاره کرد.

پیاده سازی سایت با استفاده از زبان php

PHP یکی از محبوب ‌ترین زبان ‌های برنامه ‌نویسی تحت وب می باشد که بیش از ۸۰ درصد سایت های جهان با استفاده از این زبان ایجاد شده اند و فیسبوک و ویکی ‌پدیا از آن موارد هستند. بنابراین با یادگیری کامل این نوع زبان می توان موقعیت‌ های شغلی بسیار مناسبی را برای خود فراهم آورد.

البته از دیگر زبان های برنامه نویسی می توان به ASP , Python , Node JS , Java و ... نیز اشاره کرد. در مطلب «زبان های برنامه نویسی مخصوص طراحی سایت» توضیحات کاملی در همین مورد ارائه شده است.

مرحله ۵: انتخاب دیتابیس

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

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

مرحله‌ ۶: خرید هاست و دامنه

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

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